/* Layout : une vitrine sous arcades. Chaque idée de panier est posée en 3D dans une arche zellige ; un ruban d’occasions traverse la page ; le formulaire de demande compose le panier en direct selon l’occasion, la personne et le budget. */
@property --ry { syntax: "<angle>"; inherits: true; initial-value: -30deg; }

:root{
  --paper:#FCF3F2;
  --paper-2:#F6E2E1;
  --raised:#FFFBFA;
  --ink:#1F1A3D;
  --ink-soft:#5F5979;
  --line:#E7D0D0;
  --majorelle:#2F45D8;
  --band:#2F45D8;
  --on-band:#FFFFFF;
  --safran:#E9A72A;
  --focus:#2F45D8;
  --floor:rgba(31,26,61,.3);
  --sheen-hi:rgba(255,255,255,.16);
  --sheen-lo:rgba(10,8,40,.18);
  --hairline:rgba(27,18,51,.18);
  --err:#B42346;
  --ok:#1F7A5C;

  /* objets : mêmes teintes dans les deux thèmes */
  --obj-paper:#FFFDF9;
  --obj-ink:#2A2350;
  --shade:#1B1233;
  --gold:#D2A848;
  --star-gold:#D9B44A;
  --cel-fill:rgba(255,255,255,.14);
  --cel-line:rgba(110,100,140,.42);
  --cel-hi:rgba(255,255,255,.8);
  --dr-pink:#F6C6D1; --dr-blue:#CFE0F7; --dr-white:#FFFDF9; --dr-gold:#EBCB80;

  --font-display:"Gloock", "Bodoni 72", Didot, "Times New Roman", serif;
  --font-body:"Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-ar:"Aref Ruqaa", "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", serif;
  --font-script:"Parisienne", "Snell Roundhand", "Segoe Script", cursive;

  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-md:1.0625rem; --fs-lg:1.25rem;
  --fs-h3:1.75rem; --fs-h2:clamp(2.1rem, 1.3rem + 2.8vw, 3.4rem); --fs-h1:clamp(2.75rem, 1.5rem + 5vw, 5.6rem);

  --zellige:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.3'%3E%3Cpath d='M14 14h20v20H14z'/%3E%3Cpath d='M24 9.86 38.14 24 24 38.14 9.86 24z'/%3E%3Cpath d='M24 0v9.86M24 38.14V48M0 24h9.86M38.14 24H48M0 6 6 0M42 0l6 6M0 42l6 6M48 42l-6 6'/%3E%3C/g%3E%3C/svg%3E");
  --arch-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V58C0 27 22 9 50 0c28 9 50 27 50 58v82z'/%3E%3C/svg%3E");
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 1.5 20.3 5.8H26.2V11.7L30.5 16 26.2 20.3V26.2H20.3L16 30.5 11.7 26.2H5.8V20.3L1.5 16 5.8 11.7V5.8H11.7Z'/%3E%3C/svg%3E");
  --squig:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath stroke='%23000' stroke-opacity='.14' d='M2 9c4-5 7 4 11 0s7 4 11 0 7 4 11 0M0 23c4-5 7 4 11 0s7 4 11 0 7 4 11 0M6 36c4-5 7 4 11 0s7 4 11 0'/%3E%3Cpath stroke='%23fff' stroke-opacity='.55' d='M4 15c4-5 7 4 11 0s7 4 11 0 7 4 11 0M2 30c4-5 7 4 11 0s7 4 11 0 7 4 11 0M12 4c4-5 7 4 11 0'/%3E%3C/g%3E%3C/svg%3E");

  /* Mode clair imposé : même ambiance quel que soit le réglage clair/sombre de l’appareil */
  color-scheme:only light;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:88px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{max-width:100%}
p{margin:0}
h1,h2,h3{font-family:var(--font-display);font-weight:400;margin:0;line-height:1.04;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:var(--fs-h2)}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
::selection{background:var(--dr-pink);color:var(--obj-ink)}

.wrap{max-width:1240px;margin-inline:auto;padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px))}
.eyebrow{font-size:var(--fs-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--majorelle)}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;text-decoration:none}
.skip:focus{top:12px}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:0 1.4rem;border-radius:999px;border:1.5px solid transparent;font:600 1rem/1 var(--font-body);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.btn:active{transform:translateY(1px)}
.btn-small{min-height:40px;padding:0 1.1rem;font-size:var(--fs-sm)}
.btn-primary{background:var(--band);color:var(--on-band)}
.btn-primary:hover{background:color-mix(in oklab, var(--band), var(--shade) 22%)}
.btn-ghost{background:transparent;color:var(--ink);border-color:currentColor}
.btn-ghost:hover{background:var(--paper-2)}
.btn-light{background:var(--on-band);color:var(--band)}
.btn-light:hover{background:color-mix(in oklab, var(--on-band), var(--band) 12%)}
.btn-outline-light{background:transparent;color:var(--on-band);border-color:color-mix(in oklab, var(--on-band) 60%, transparent)}
.btn-outline-light:hover{border-color:var(--on-band)}

/* En-tête */
.top{position:sticky;top:env(safe-area-inset-top, 0px);z-index:20;background:color-mix(in oklab, var(--paper) 86%, transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in oklab, var(--line) 70%, transparent)}
.top-in{display:flex;align-items:center;gap:28px;min-height:72px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--font-display);font-size:1.45rem;line-height:1;white-space:nowrap}
.logo svg{width:30px;height:30px;flex:none}
.logo .s{fill:var(--majorelle)}
.logo .c{fill:var(--paper)}
.logo .d{fill:var(--safran)}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{text-decoration:none;font-weight:500;font-size:var(--fs-sm);white-space:nowrap}
.nav a:hover{color:var(--majorelle)}
@media (max-width:1120px){.nav{display:none}.top .btn{margin-left:auto}}
@media (max-width:480px){.hide-sm{display:none}}

/* Héros */
.hero{padding-block:clamp(36px,6vw,80px) clamp(48px,6vw,80px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:center}
@media (max-width:860px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.hero-copy{display:grid;gap:22px;justify-items:start;min-width:0}
.hero h1{font-size:var(--fs-h1);line-height:.98;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--majorelle)}
.h1-kicker{display:block;margin-bottom:22px;font-family:var(--font-body);font-size:var(--fs-xs);font-weight:600;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--majorelle)}
.lead{font-size:var(--fs-lg);line-height:1.55;color:var(--ink-soft);max-width:34rem}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.facts{list-style:none;margin:6px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 32px;font-size:var(--fs-sm);color:var(--ink-soft)}
.facts strong{display:block;font-family:var(--font-display);font-weight:400;font-size:1.35rem;line-height:1.2;color:var(--ink)}
.hero-visual{position:relative;width:100%;max-width:540px;justify-self:center;aspect-ratio:1/1.1;--tint:var(--majorelle)}
.arch-star{position:absolute;left:50%;top:6.5%;width:24px;height:24px;margin-left:-12px;background:var(--safran);-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat;z-index:1}
.stage-hint{position:absolute;left:0;right:0;bottom:3%;text-align:center;font-size:var(--fs-xs);letter-spacing:.08em;color:var(--ink-soft);pointer-events:none;z-index:2}
.drg{position:absolute;width:var(--s);height:calc(var(--s) * .78);border-radius:50%;background:radial-gradient(circle at 34% 30%, var(--dr-white) 0 14%, var(--c) 62%, color-mix(in oklab, var(--c), var(--shade) 14%));box-shadow:0 10px 18px -8px var(--floor);animation:float 7s ease-in-out infinite alternate;animation-delay:var(--dl, 0s);pointer-events:none;z-index:2}
@keyframes float{to{transform:translateY(-12px) rotate(10deg)}}

/* Arches */
.arch{position:absolute;top:0;bottom:0;left:5%;right:5%;background:color-mix(in oklab, var(--tint) 14%, var(--paper-2));-webkit-mask:var(--arch-mask) center/100% 100% no-repeat;mask:var(--arch-mask) center/100% 100% no-repeat;transition:background-color .5s}
.arch::before{content:"";position:absolute;inset:0;background:color-mix(in oklab, var(--tint) 34%, var(--paper-2));-webkit-mask:var(--zellige) 0 0/46px 46px repeat;mask:var(--zellige) 0 0/46px 46px repeat;transition:background-color .5s}
.arch::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(transparent, color-mix(in oklab, var(--tint) 12%, var(--paper-2)))}
.arch-line{position:absolute;top:0;left:5%;width:90%;height:100%;overflow:visible;pointer-events:none}
.arch-line path{fill:none;stroke:color-mix(in oklab, var(--tint) 55%, var(--paper));stroke-width:1.5;vector-effect:non-scaling-stroke;transition:stroke .5s}

/* Scène 3D : panier en osier, corde ou boîte ouverte */
.stage{position:absolute;inset:0;container-type:inline-size;perspective:1300px;perspective-origin:50% 30%;-webkit-user-select:none;user-select:none;--by:63%}
.hero-visual .stage,.cv .stage{--by:66%}
.stage.is-live{cursor:grab;touch-action:pan-y}
.stage.is-drag{cursor:grabbing}
.b3,.cello{--u:min(1px, calc(100cqi / 470))}
.b3{position:absolute;left:50%;top:var(--by);width:0;height:0;transform-style:preserve-3d;--rx:-22deg;transform:rotateX(var(--rx)) rotateY(var(--ry));
  --w:calc(var(--W, 256) * var(--u)); --h:calc(var(--H, 96) * var(--u)); --d:calc(var(--D, 190) * var(--u));
  --a:calc(100 * var(--u)); --rb:calc(6 * var(--u));
  --flare:-5deg; --ov:calc(3 * var(--u)); --rimx:calc((var(--H, 96) * .0436 + 1) * var(--u)); --rimh:calc(11 * var(--u));
  --frx:calc((var(--H, 96) - 26) * .087 * var(--u)); --frr:50%; --fd:calc(13 * var(--u));
  --bowy:calc(var(--h) / -2 + 16 * var(--u));
}
.pat-box .b3{--flare:0deg;--ov:0px;--rimx:calc(.5 * var(--u));--rimh:calc(3 * var(--u));--frx:calc(-4 * var(--u));--frr:0px;--fd:calc(14 * var(--u));--bowy:0px}
.b3-g{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.f{position:absolute;left:calc(var(--fw) / -2);top:calc(var(--fh) / -2);width:var(--fw);height:var(--fh);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:width .6s,height .6s,left .6s,top .6s,transform .6s,background-color .45s}
.bk-shape{transform:scale3d(calc(var(--W, 256) / 200), 1, calc(var(--D, 190) / 200));transition:transform .6s}
.w-out,.w-in{--fw:calc(2 * var(--a) * var(--tan) + var(--ov));--fh:var(--h)}
.w-out{transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--a)) rotateX(var(--flare))}
.w-in{transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(calc(var(--a) - 1.5 * var(--u))) rotateX(var(--flare)) rotateY(180deg)}
.w-rim{--fw:calc(2 * (var(--a) + var(--rimx)) * var(--tan) + var(--ov));--fh:var(--rimh);backface-visibility:visible;-webkit-backface-visibility:visible;transform:translateY(calc(var(--h) / -2 + var(--rimh) / 2 - 2 * var(--u))) rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(calc(var(--a) + var(--rimx)))}
.fris{--fw:calc(2 * var(--a) + var(--frx));--fh:calc(2 * var(--a) + var(--frx));border-radius:var(--frr);transform:translateY(calc(var(--h) / -2 + var(--fd))) rotateX(90deg)}
.w-out::after,.w-rim::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--shade);opacity:var(--sh, .1);pointer-events:none}
.w-in::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, var(--shade), color-mix(in oklab, var(--shade) 55%, transparent));opacity:.34;pointer-events:none}
.pat-weave .w-out,.pat-weave .w-in{background-color:var(--wall);background-image:repeating-linear-gradient(0deg, transparent 0 calc(2.2 * var(--u)), color-mix(in oklab, var(--wall), var(--shade) 22%) calc(2.2 * var(--u)) calc(2.9 * var(--u))),conic-gradient(color-mix(in oklab, var(--wall), var(--obj-paper) 24%) 25%, color-mix(in oklab, var(--wall), var(--shade) 10%) 0 50%, color-mix(in oklab, var(--wall), var(--obj-paper) 24%) 0 75%, color-mix(in oklab, var(--wall), var(--shade) 10%) 0);background-size:auto, calc(14 * var(--u)) calc(17.4 * var(--u))}
.pat-weave .w-rim{background-color:var(--wall);background-image:repeating-linear-gradient(118deg, color-mix(in oklab, var(--wall), var(--obj-paper) 26%) 0 calc(3 * var(--u)), color-mix(in oklab, var(--wall), var(--shade) 25%) calc(3 * var(--u)) calc(4.6 * var(--u)));border-radius:calc(5 * var(--u))}
.pat-rope .w-out,.pat-rope .w-in{background-color:var(--wall);background-image:repeating-linear-gradient(62deg, transparent 0 calc(2.4 * var(--u)), color-mix(in oklab, var(--shade) 10%, transparent) calc(2.4 * var(--u)) calc(3.4 * var(--u))),repeating-linear-gradient(0deg, transparent 0 calc(5 * var(--u)), color-mix(in oklab, var(--shade) 22%, transparent) calc(5 * var(--u)) calc(6 * var(--u))),linear-gradient(180deg, transparent 54%, var(--jute) 54%)}
.pat-rope .w-rim{background-color:var(--wall);background-image:repeating-linear-gradient(62deg, transparent 0 calc(2.4 * var(--u)), color-mix(in oklab, var(--shade) 12%, transparent) calc(2.4 * var(--u)) calc(3.4 * var(--u)));border-radius:calc(5 * var(--u))}
.pat-box .w-out{background-color:var(--wall);background-image:linear-gradient(180deg, transparent calc(50% - var(--rb)), var(--ribbon) calc(50% - var(--rb)) calc(50% + var(--rb)), transparent calc(50% + var(--rb)))}
.pat-box .w-in{background-color:var(--wall)}
.pat-box .w-rim{background-color:var(--edge)}
.fris{background-color:var(--fris);background-image:var(--squig), radial-gradient(closest-side, transparent 70%, color-mix(in oklab, var(--shade) 30%, transparent));background-size:calc(30 * var(--u)) calc(30 * var(--u)), 100% 100%}
.b3-floor{position:absolute;left:calc(var(--w) * -.75);top:calc(var(--d) * -.75);width:calc(var(--w) * 1.5);height:calc(var(--d) * 1.5);transform:translateY(calc(var(--h) / 2 + 1px)) rotateX(90deg);background:radial-gradient(closest-side, var(--floor), transparent);transition:width .6s,height .6s,left .6s,top .6s,transform .6s}
.b3-items{transform:translateY(calc(var(--h) / -2 + var(--fd)));transition:transform .6s}
.it{position:absolute;left:calc(var(--iw) / -2);top:calc(var(--ih) / -2);width:var(--iw);height:var(--ih);transform:translate3d(calc(var(--x) * var(--w)), calc(var(--ih) / -2), calc(var(--z) * var(--d))) rotateY(calc(var(--ry) * -1)) rotateX(calc(var(--rx) * -1))}
.it-in{width:100%;height:100%;--sk:var(--sk0);transform:translateY(var(--sk));transition:transform .75s cubic-bezier(.3,1.25,.5,1);transition-delay:var(--dl, 0s)}
.it-in.is-in{--sk:calc(var(--ih) + 8 * var(--u));transition-delay:0s}
.it svg,.bk-bow svg{display:block;width:100%;height:100%;overflow:visible}
.bk-front{transform:translate3d(0, var(--bowy), calc(var(--d) / 2 + 3 * var(--u)))}
.bk-bow{position:absolute;--iw:calc(80 * var(--u));--ih:calc(70 * var(--u));left:calc(var(--iw) / -2);top:calc(var(--ih) / -2);width:var(--iw);height:var(--ih);transform:rotateY(calc(var(--ry) * -1)) rotateX(calc(var(--rx) * -1)) translateY(calc(var(--ih) * .24));transition:opacity .35s}
.is-wrapped .bk-bow{opacity:0}
.bw{fill:var(--ribbon);transition:fill .45s}
.bw-in{fill:none;stroke:var(--shade);stroke-opacity:.22;stroke-width:1.4}
.bw-hi{fill:none;stroke:var(--obj-paper);stroke-opacity:.45;stroke-width:1.4;stroke-linecap:round}
.it-card{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2 * var(--cs) * var(--u));padding:calc(6 * var(--cs) * var(--u));background:var(--obj-paper);color:var(--obj-ink);text-align:center;border-radius:calc(2 * var(--u));box-shadow:inset 0 0 0 calc(3 * var(--cs) * var(--u)) var(--obj-paper), inset 0 0 0 calc(4.2 * var(--cs) * var(--u)) color-mix(in oklab, var(--gold) 75%, transparent), 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(27,18,51,.2)}
.it-card .cg{font-family:var(--font-display);font-size:calc(var(--cgs) * var(--cs) * var(--u));line-height:1}
.it-card .cg[lang="ar"]{font-family:var(--font-ar);font-weight:700;color:#9A6A22;line-height:1.25}
.it-card .cl{font-size:calc(5.4 * var(--cs) * var(--u));font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#7A6F8E;line-height:1.2}
.cello{position:absolute;z-index:1;left:50%;width:calc(var(--W, 256) * 1.38 * var(--u));margin-left:calc(var(--W, 256) * -.69 * var(--u));aspect-ratio:200/230;top:calc(var(--by) + (var(--H, 96) * .5 + var(--D, 190) * .2 + 14) * var(--u) - var(--W, 256) * 1.38 * 1.15 * var(--u));opacity:0;transform:translateY(calc(10 * var(--u))) scale(.97);transform-origin:50% 100%;transition:opacity .45s,transform .45s;pointer-events:none}
.is-wrapped .cello{opacity:1;transform:none}
.cello svg{display:block;width:100%;height:100%}
.cel{fill:var(--cel-fill);stroke:var(--cel-line);stroke-width:1}
.cel-hi{fill:none;stroke:var(--cel-hi);stroke-width:2.4;stroke-linecap:round}
.cello .stars{display:none;fill:var(--star-gold)}
.is-stars .cello .stars{display:inline}

/* Ruban d’occasions */
.ribbon-wrap{overflow:clip;padding-block:30px}
.ribbon{margin-inline:-3%;transform:rotate(-1.6deg);background-color:var(--band);background-image:linear-gradient(180deg, var(--sheen-hi), transparent 45%, var(--sheen-lo));color:var(--on-band);box-shadow:0 14px 28px -16px var(--floor)}
.ribbon-track{display:flex;width:max-content;padding-block:14px;animation:marquee 70s linear infinite}
.ribbon-grp{display:flex;align-items:center;gap:26px;padding-right:26px;flex:none}
.ribbon-grp span{font-family:var(--font-display);font-size:clamp(1.25rem, 1rem + 1.2vw, 1.75rem);white-space:nowrap;line-height:1.2}
.ribbon-grp i{width:14px;height:14px;flex:none;background:var(--safran);-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Sections */
.sec{padding-block:clamp(64px,9vw,120px)}
.sec-head{display:grid;gap:14px;max-width:44rem;margin-bottom:clamp(36px,5vw,60px)}
.sec-head p:not(.eyebrow){color:var(--ink-soft);font-size:var(--fs-md)}

/* Étapes */
.steps-sec{padding-top:clamp(40px,6vw,72px)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:clamp(20px,3vw,40px)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{display:grid;gap:8px;align-content:start;padding-top:20px;border-top:2px solid var(--ink)}
.step-n{font-family:var(--font-display);font-size:2.6rem;line-height:1;color:var(--majorelle)}
.step h3{font-size:1.4rem}
.step p{color:var(--ink-soft);font-size:var(--fs-sm)}

/* Inspirations */
.inspi{background:var(--paper-2)}
.grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr));gap:clamp(48px,5vw,64px) clamp(20px,3vw,40px)}
.panier{display:flex;flex-direction:column;gap:20px;min-width:0;--tint-text:color-mix(in oklab, var(--tint) 58%, var(--ink))}
.cv{position:relative;aspect-ratio:1/1.06;max-width:100%}
.panier .b3{transition:--ry 1s cubic-bezier(.3,.9,.3,1)}
.panier:hover .b3,.panier:focus-within .b3{--ry:-6deg}
.cbody{display:flex;flex-direction:column;gap:10px;flex:1}
.occ{font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tint-text)}
.panier h3{font-size:var(--fs-h3);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.ar{font-family:var(--font-ar);font-weight:700;font-size:1.4rem;line-height:1.2;color:var(--tint-text)}
.desc{color:var(--ink-soft)}
.ideas-label{margin-top:4px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.contents{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:var(--fs-sm)}
.contents li{position:relative;padding-left:22px}
.contents li::before{content:"";position:absolute;left:0;top:.45em;width:11px;height:11px;background:var(--tint-text);-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.cfoot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.budget-hint{font-size:var(--fs-xs);line-height:1.3;color:var(--ink-soft)}
.budget-hint strong{display:block;font-family:var(--font-display);font-weight:400;font-size:1.45rem;color:var(--ink);font-variant-numeric:tabular-nums}
.inspi-note{margin-top:clamp(36px,5vw,56px);font-size:var(--fs-sm);color:var(--ink-soft);max-width:44rem}

/* Occasions & paniers invités */
.occasions-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:820px){.occasions-grid{grid-template-columns:minmax(0,1fr)}}
.occasions-copy{display:grid;gap:18px;justify-items:start}
.occasions-copy p:not(.eyebrow){color:var(--ink-soft);font-size:var(--fs-md);max-width:34rem}
.occasions-side{display:grid;gap:22px;min-width:0}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.tags li{padding:.45rem 1rem;border:1.5px solid var(--line);border-radius:999px;background:var(--raised);font-size:var(--fs-sm);font-weight:500}
.callout{position:relative;overflow:hidden;display:grid;gap:10px;padding:clamp(24px,3vw,34px);background:var(--ink);color:var(--paper)}
.callout::before{content:"";position:absolute;inset:0;background:var(--safran);opacity:.22;-webkit-mask:var(--zellige) 0 0/46px 46px repeat;mask:var(--zellige) 0 0/46px 46px repeat;pointer-events:none}
.callout>*{position:relative}
.callout .eyebrow{color:var(--safran)}
.callout h3{font-size:1.6rem}
.callout p:not(.eyebrow){color:color-mix(in oklab, var(--paper) 80%, var(--ink))}

/* Demande */
.atelier{border-top:1px solid var(--line)}
.atelier-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:900px){.atelier-grid{grid-template-columns:minmax(0,1fr)}}
.vitrine{position:sticky;top:calc(env(safe-area-inset-top, 0px) + 92px);display:grid;gap:14px}
@media (max-width:900px){.vitrine{position:relative;top:auto}}
.vitrine-box{position:relative;aspect-ratio:1/1.02;max-width:100%;--tint:var(--majorelle)}
.vitrine-bar{text-align:center;font-size:var(--fs-sm);color:var(--ink-soft)}
.atelier-form{display:grid;gap:28px;min-width:0}
.atelier-form header{display:grid;gap:14px}
.atelier-form header p:not(.eyebrow){color:var(--ink-soft);font-size:var(--fs-md)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;margin-bottom:12px;font-weight:600;font-size:var(--fs-sm);letter-spacing:.02em}
legend span{font-weight:400;color:var(--ink-soft);margin-left:6px}
.vh{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip span{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;border:1.5px solid var(--line);border-radius:999px;background:var(--raised);font-weight:500;font-size:var(--fs-sm);cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.chip span:hover{border-color:var(--ink-soft)}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip input[type="checkbox"]+span::before{content:"";width:12px;height:12px;margin-right:8px;border-radius:3px;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.6}
.chip input[type="checkbox"]:checked+span::before{background:var(--safran);box-shadow:none;opacity:1;-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat;width:13px;height:13px}
.vh:focus-visible+span{outline:3px solid var(--focus);outline-offset:3px}
.subgroup{display:grid;gap:10px}
.subgroup+.subgroup{margin-top:18px}
.sublabel{font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.sublabel span{font-weight:500;letter-spacing:0;text-transform:none;margin-left:6px}
.sizes{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:10px}
@media (max-width:560px){.sizes{grid-template-columns:repeat(2, minmax(0,1fr))}}
.size{position:relative;display:block}
.size span{display:grid;gap:2px;align-content:start;height:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--raised);cursor:pointer;transition:border-color .2s}
.size b{font-family:var(--font-display);font-weight:400;font-size:1.3rem;line-height:1.15}
.size small{font-size:var(--fs-xs);line-height:1.35;color:var(--ink-soft)}
.size input:checked+span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.sw{position:relative;display:block}
.sw span{display:block;padding:4px;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .2s}
.sw i{display:block;width:34px;height:34px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px var(--hairline)}
.sw input:checked+span{box-shadow:inset 0 0 0 2px var(--ink)}
.row2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px}
@media (max-width:420px){.row2{grid-template-columns:minmax(0,1fr)}}
.field{display:grid;gap:6px;font-size:var(--fs-sm);color:var(--ink-soft);min-width:0}
.field input,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--raised);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;min-height:50px}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--majorelle);box-shadow:0 0 0 3px color-mix(in oklab, var(--majorelle) 25%, transparent)}
.help{margin-top:8px;font-size:var(--fs-xs);color:var(--ink-soft)}
.recap{position:relative;display:grid;gap:14px;padding:32px clamp(18px,3vw,26px) 22px;background:var(--raised);border:1.5px solid var(--line);border-radius:20px}
.recap::before{content:"";position:absolute;top:12px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.recap-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.recap-head span{font-weight:600}
.recap-head strong{font-family:var(--font-display);font-weight:400;font-size:1.8rem;line-height:1;font-variant-numeric:tabular-nums}
.recap ul{list-style:none;margin:0;padding:12px 0 0;border-top:1px dashed var(--line);display:grid;gap:8px;font-size:var(--fs-sm)}
.recap li{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:12px}
.recap li span:first-child{color:var(--ink-soft)}
.recap li span:last-child{min-width:0;overflow-wrap:anywhere}
@media (max-width:420px){.recap li{grid-template-columns:minmax(0,1fr);gap:0}}
.recap-actions{display:flex;flex-wrap:wrap;gap:10px}
.recap .help{margin-top:0}
.field-gap{margin-top:12px}
.field-date{max-width:16rem}
.req{color:var(--majorelle);margin-left:2px}
.field input[aria-invalid="true"]{border-color:var(--err)}
.err{font-size:var(--fs-xs);color:var(--err)}
.err:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn:disabled{opacity:.6;cursor:progress}
.form-status{font-size:var(--fs-sm);color:var(--ink-soft)}
.form-status:empty{display:none}
.form-status.is-error{color:var(--err)}
.sent{display:grid;gap:8px;justify-items:start;padding:18px;border-radius:14px;background:color-mix(in oklab, var(--ok) 12%, var(--raised));border:1.5px solid color-mix(in oklab, var(--ok) 45%, var(--line))}
.sent strong{font-family:var(--font-display);font-weight:400;font-size:1.4rem;line-height:1.2}
.sent p{color:var(--ink-soft);font-size:var(--fs-sm)}

/* Questions fréquentes */
.faq{background:var(--paper-2)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:860px){.faq-grid{grid-template-columns:minmax(0,1fr)}}
.faq .sec-head{margin-bottom:0}
.faq-list{display:grid;border-top:1px solid var(--line);min-width:0}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-family:var(--font-display);font-size:1.25rem;line-height:1.3}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:14px;height:14px;background:var(--majorelle);-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat;transition:transform .3s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list summary:hover{color:var(--majorelle)}
.faq-list details p{padding:0 0 20px;color:var(--ink-soft);max-width:62ch}
.faq-list details a{color:var(--majorelle)}

/* Contact */
.contact{background-color:var(--band);background-image:linear-gradient(180deg, var(--sheen-hi), transparent 30%);color:var(--on-band)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(64px,8vw,104px)}
@media (max-width:820px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.contact-copy{display:grid;gap:16px}
.contact .eyebrow{color:color-mix(in oklab, var(--on-band) 78%, var(--band))}
.contact-copy p:not(.eyebrow){font-size:var(--fs-md);color:color-mix(in oklab, var(--on-band) 86%, var(--band));max-width:32rem}
.channels{list-style:none;margin:0;padding:0;display:grid}
.channels li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);align-items:center;gap:8px 16px;padding-block:16px;border-bottom:1px solid color-mix(in oklab, var(--on-band) 25%, var(--band))}
.channels li:first-child{border-top:1px solid color-mix(in oklab, var(--on-band) 25%, var(--band))}
@media (max-width:460px){.channels li{grid-template-columns:minmax(0,1fr)}}
.ch-label{font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in oklab, var(--on-band) 75%, var(--band))}
.ch-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;min-width:0}
.ch-row a:not(.btn){font-family:var(--font-display);font-size:1.3rem;text-decoration:none;overflow-wrap:anywhere}
.ch-row a:not(.btn):hover{text-decoration:underline}
.ch-status{font-size:var(--fs-xs);color:color-mix(in oklab, var(--on-band) 80%, var(--band))}

/* Pied de page */
.foot{padding-block:48px}
.foot-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:28px 40px;align-items:start}
@media (max-width:820px){.foot-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.foot-brand{grid-column:1/-1}}
@media (max-width:460px){.foot-in{grid-template-columns:minmax(0,1fr)}}
.foot-brand{display:grid;gap:8px;align-content:start}
.foot-brand p{color:var(--ink-soft);font-size:var(--fs-sm);max-width:30rem}
.foot-col{display:grid;gap:8px;align-content:start;font-size:var(--fs-sm)}
.foot-title{font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.foot-col a{text-decoration:none}
.foot-col a:hover{color:var(--majorelle)}
.more{font-size:var(--fs-sm);font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.more:hover{color:var(--majorelle)}
.livraison-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:820px){.livraison-grid{grid-template-columns:minmax(0,1fr)}}
.livraison .sec-head{margin-bottom:0}
.zones{display:grid;gap:14px;min-width:0}
.zones-note{font-size:var(--fs-sm);color:var(--ink-soft)}
.foot-legal{grid-column:1/-1;padding-top:20px;border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--ink-soft)}

@media (prefers-reduced-motion: reduce){
  .ribbon-track{animation:none;width:auto;justify-content:center}
  .ribbon-grp{flex:1 1 auto;flex-wrap:wrap;justify-content:center;padding-inline:20px}
  .drg{animation:none}
  .f,.it-in,.b3-floor,.bk-shape,.b3-items,.cello,.panier .b3{transition-duration:.01s}
}

/* Pages par type de panier */
.crumbs{padding-top:22px;font-size:var(--fs-xs);color:var(--ink-soft)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"›";margin-right:6px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--majorelle)}
.landing .hero{padding-top:clamp(20px,3vw,40px)}
.ideas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
@media (max-width:860px){.ideas{grid-template-columns:minmax(0,1fr)}}
.idea{display:grid;gap:12px;align-content:start;padding-top:18px;border-top:2px solid var(--ink);--tint-text:var(--majorelle)}
.idea h3{font-size:1.4rem}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:860px){.tiers{grid-template-columns:minmax(0,1fr)}}
.tier{display:grid;gap:8px;align-content:start;padding:22px;background:var(--raised);border:1.5px solid var(--line);border-radius:18px}
.tier b{font-family:var(--font-display);font-weight:400;font-size:1.6rem;line-height:1.15;font-variant-numeric:tabular-nums}
.tier p{color:var(--ink-soft);font-size:var(--fs-sm)}
.tiers-note{margin-top:16px;font-size:var(--fs-xs);color:var(--ink-soft)}
.faq-plain .sec-head{margin-bottom:0}
.cta-band{background-color:var(--band);background-image:linear-gradient(180deg, var(--sheen-hi), transparent 40%);color:var(--on-band)}
.cta-band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding-block:clamp(48px,6vw,80px)}
.cta-band .wrap>div{display:grid;gap:10px;max-width:40rem}
.cta-band p{color:color-mix(in oklab, var(--on-band) 86%, var(--band));font-size:var(--fs-md)}
.others{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.others a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid var(--line);border-radius:999px;background:var(--raised);text-decoration:none;font-weight:500;font-size:var(--fs-sm)}
.others a:hover{border-color:var(--ink)}
.foot-col a[aria-current="page"]{color:var(--majorelle);font-weight:600}