/* ============================================================
   MIMI COCOON. Palette sampled from the house logo (rose gold
   monogram, emerald bottle) and from the regraded hero footage,
   so the page and the film read as one place.
   ============================================================ */

:root{
  /* Noir franc, et non plus un bordeaux tres sombre. Chaque photo de
     parfum est un rectangle pose sur du noir : si le sol du site portait
     la moindre teinte, on verrait le bord de chaque rectangle. */
  --canvas:#000000;
  --canvas-deep:#000000;
  --panel:#1A0F12;
  --panel-hi:#231519;
  --accent:#C9A084;
  --accent-hover:#E0B99E;
  --accent-muted:#6B5546;
  --emerald:#8E4453;
  --emerald-lo:#4B222B;
  --text-primary:#F1EEE7;
  --text-secondary:#B3A3A6;

  --line:rgba(201,160,132,.16);
  --line-strong:rgba(201,160,132,.34);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --tshadow:0 1px 2px rgba(8,4,6,.95),0 3px 12px rgba(8,4,6,.78),0 10px 44px rgba(8,4,6,.8);

  --wrap:1220px;
  --nav-h:74px;
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  overflow-x:hidden;
  overflow-x:clip;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:'Jost',"Segoe UI",system-ui,sans-serif;
  font-weight:300;
  font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}

a{color:inherit;text-decoration:none}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:3px;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:14px;top:-60px;z-index:200;
  background:var(--accent);color:#14100C;padding:10px 16px;border-radius:6px;
  font-weight:500;transition:top .25s var(--ease);
}
.skip:focus{top:14px}

.wrap{width:min(var(--wrap),calc(100% - 2.5rem));margin-inline:auto}

.mono{font-family:'DM Mono',ui-monospace,monospace;font-weight:300;letter-spacing:.13em;text-transform:uppercase;font-size:.72rem}
.display{font-family:'Cinzel',Georgia,serif;font-weight:600;line-height:1.06;letter-spacing:.005em}
.display.xl{font-size:clamp(2.6rem,7.4vw,5.6rem);letter-spacing:.02em}
.display.lg{font-size:clamp(1.9rem,4.2vw,3.2rem)}

.kick{color:var(--accent);margin:0 0 .9rem}

/* L annonce de la remise : une pastille, assez presente pour etre lue
   des l arrivee, assez discrete pour ne pas voler la vedette au nom de la
   maison. Elle se replie en deux lignes sur un telephone plutot que de
   deborder. */
.offer{
  display:inline-block;margin:1.1rem 0 0;
  padding:.5rem .95rem;
  border:1px solid var(--line-strong);border-radius:999px;
  background:rgba(201,160,132,.10);
  color:var(--accent-hover);
  font-size:.7rem;letter-spacing:.1em;
  text-shadow:none;
}
.offer[hidden]{display:none}
@media (max-width:760px){
  .offer{font-size:.64rem;padding:.45rem .8rem;letter-spacing:.07em}
}

/* la ligne de remise dans le panier et sur la commande */
.ck-row#cart-remise-row span:last-child,
.ck-row#ck-remise-row span:last-child,
.ob-remise span:last-child{color:var(--accent)}
.ck-row[hidden],.ob-remise[hidden]{display:none}

/* ============================================================
   THE ENVIRONMENT LAYER, one place behind everything
   ============================================================ */
/* Le sol, uni. Les lueurs bordeaux et le grain qui vivaient ici teintaient
   la page derriere les cartes, et le rectangle noir de chaque photo se
   detachait dessus. */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--canvas);}
.env canvas{position:absolute;inset:0;width:100%;height:100%}
/* La lueur et le grain vivaient dans une couche fixe, donc a l ecran en
   permanence : ils teintaient le sol derriere le catalogue et le bord noir
   de chaque photo se detachait dessus. Le heros a sa propre atmosphere,
   dessinee en 3D, et n en a pas besoin. */
.env-glow,.grain{display:none}
.env-glow-unused{
  position:absolute;left:50%;top:0;height:100vh;width:min(120vw,1500px);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(150,60,80,.16),transparent 64%);
  animation:breathe 78s var(--ease-soft) -22s infinite;
}
@keyframes breathe{
  0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:.85;transform:translate(-50%,-50%) scale(1.16)}
}
.grain-unused{
  position:absolute;left:-50%;right:-50%;top:0;height:100vh;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:var(--nav-h);
  display:flex;align-items:center;gap:1.4rem;
  padding-inline:clamp(1rem,3vw,2.2rem);
  background:linear-gradient(to bottom,rgba(9,5,6,.9),rgba(9,5,6,.55) 62%,transparent);
  transition:background .4s var(--ease),backdrop-filter .4s var(--ease);
}
.nav.solid{
  background:rgba(11,6,8,.9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:.7rem;margin-right:auto;min-width:0}
.mark{width:38px;height:38px;flex:none}
.wordmark{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.wm-1{font-family:'Cinzel',Georgia,serif;font-weight:700;font-size:1.02rem;letter-spacing:.11em;white-space:nowrap}
.wm-2{font-family:'DM Mono',monospace;font-weight:300;font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);white-space:nowrap}

.links{display:flex;gap:1.7rem;flex:none}

/* On a phone the four links wrap into the logo and push the basket off the
   edge. Below 900px only the catalogue survives, and below 480px the mark
   and the basket carry the bar on their own. */
@media (max-width:900px){
  :root{--nav-h:64px}
  .nav{gap:.9rem}
  .links{gap:1.1rem}
  .links a[href="#vitrine"],.links a[href="#prix"],.links a[href="#questions"]{display:none}
  .wm-1{font-size:.92rem;letter-spacing:.09em}
  .wm-2{font-size:.5rem;letter-spacing:.2em}
  .mark{width:32px;height:32px}
}
@media (max-width:480px){
  .links{display:none}
  .wm-2{display:none}
}
.links a{
  font-size:.86rem;letter-spacing:.04em;color:var(--text-secondary);
  position:relative;padding-block:.35rem;transition:color .3s var(--ease);
}
.links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.links a:hover{color:var(--text-primary)}
.links a:hover::after{transform:scaleX(1)}

.cart-btn{
  position:relative;width:42px;height:42px;flex:none;
  display:grid;place-items:center;
  background:transparent;border:1px solid var(--line);border-radius:50%;
  color:var(--text-primary);cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.cart-btn:hover{border-color:var(--line-strong);background:rgba(201,160,132,.08)}
.cart-btn svg{width:19px;height:19px}
.cart-count{
  position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;
  display:grid;place-items:center;border-radius:10px;
  background:var(--accent);color:#14100C;
  font-family:'DM Mono',monospace;font-size:.63rem;font-weight:400;
}
/* display:grid otherwise beats the hidden attribute and an empty cart
   shows a gold zero in the corner */
.cart-count[hidden]{display:none}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-block;padding:.86rem 1.7rem;border:1px solid transparent;
  border-radius:2px;cursor:pointer;
  font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;font-weight:400;
  transition:background .35s var(--ease),color .35s var(--ease),
             border-color .35s var(--ease),transform .35s var(--ease),
             box-shadow .35s var(--ease);
}
.btn-gold{background:var(--accent);color:#14100C;border-color:var(--accent)}
.btn-gold:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-2px);box-shadow:0 12px 30px rgba(201,160,132,.22)}
.btn-ghost{background:transparent;color:var(--text-primary);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-wide{width:100%;text-align:center}
.btn[disabled]{opacity:.5;pointer-events:none}
/* inline-block otherwise beats the hidden attribute, and "Voir plus" stays
   on screen with nothing left to show */
.btn[hidden]{display:none}

@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .btn-wide{display:flex}
}

/* ============================================================
   THE HERO
   ============================================================ */
/* 520vh, not 400: the flick test showed the first and third beats passing
   in three flicks at 400vh. Every beat now holds for about five and a half. */
.hero{position:relative;height:520vh;z-index:1}
.stage{
  position:sticky;top:0;height:100vh;height:100svh;
  overflow:hidden;background:var(--canvas-deep);
}
/* the lit well the flacons fall through */
.hero-well{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 66% 42%,rgba(150,60,80,.30),transparent 68%),
    radial-gradient(ellipse 46% 38% at 70% 62%,rgba(201,160,132,.14),transparent 70%),
    linear-gradient(to bottom,#090406 0%,#140A0D 38%,#160B0F 62%,#090406 100%);
}
#hero-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;transition:opacity 1s var(--ease);
  will-change:transform;transform:translateZ(0);
}
.stage.gl-ready #hero-canvas{opacity:1}

.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 116% 92% at 66% 48%,rgba(9,5,6,0) 26%,rgba(9,5,6,.62) 100%);
}

/* the name of the flacon the camera is passing */
.hero-tag{
  position:absolute;right:clamp(1.2rem,4vw,3rem);bottom:clamp(1.6rem,5vh,3.2rem);
  display:flex;flex-direction:column;align-items:flex-end;gap:.15rem;
  text-align:right;pointer-events:none;max-width:min(30ch,42vw);
  opacity:0;transition:opacity .6s var(--ease);
  text-shadow:0 1px 3px rgba(8,4,6,.9),0 6px 22px rgba(8,4,6,.8);
}
.hero-tag.on{opacity:1}
.ht-brand{color:var(--accent);font-size:.6rem}
.ht-name{font-family:'Cinzel',Georgia,serif;font-size:.98rem;letter-spacing:.03em;line-height:1.2}
.ht-price{color:var(--text-secondary);font-size:.66rem}
@media (max-height:620px){.hero-tag{display:none}}

.bands{position:absolute;inset:0;pointer-events:none}
.band{
  position:absolute;left:clamp(1.4rem,6vw,7rem);
  width:min(46ch,44vw);
  opacity:0;text-shadow:var(--tshadow);
  /* Its own stacking context, so the scrim on ::before sits behind the words
     and in front of the 3D. Without it the negative z-index sent the scrim
     behind the canvas and a flacon could drift straight through the type. */
  isolation:isolate;
}
.band .btn{text-shadow:none}
/* The floor is .62, not .25. A band's --k is still climbing at its own start,
   and the old floor left the scrim at a quarter strength exactly while the
   first words were arriving, which is where the contrast audit failed. */
.band::before{
  content:"";position:absolute;inset:-14% -22%;pointer-events:none;z-index:-1;
  opacity:calc(.62 + .38*var(--k,1));
  background:radial-gradient(ellipse 78% 66% at 42% 50%,rgba(7,3,5,.7) 0%,rgba(7,3,5,.46) 46%,rgba(7,3,5,0) 76%);
}
.band-1{top:50%;transform:translateY(-50%)}
.band-2{top:50%;transform:translateY(-50%)}
.band-3{top:50%;transform:translateY(-50%)}
.band-4{top:50%;transform:translateY(-50%);width:min(52ch,50vw)}
.band-4::before{opacity:calc(.68 + .32*var(--k,1));background:radial-gradient(ellipse 84% 74% at 44% 50%,rgba(7,3,5,.76) 0%,rgba(7,3,5,.52) 48%,rgba(7,3,5,0) 78%)}

.band .lede{
  margin:1.1rem 0 0;max-width:34ch;
  font-size:clamp(1rem,1.35vw,1.22rem);color:var(--text-primary);opacity:.92;
}
.band .cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem;pointer-events:auto}
.band-4 .lede{max-width:38ch}

/* text splitting */
.split{margin:0}
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block;will-change:transform,opacity}

/* (a) scatter */
[data-fx="scatter"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)));
}
/* (f) drift down, echoing the pour */
[data-fx="drift"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px));
}
/* (c) blur to sharp, the mist clearing */
[data-fx="blur"]{position:relative;display:block}
[data-fx="blur"] .soft{
  position:absolute;inset:0;filter:blur(11px);opacity:calc(1 - var(--k,0));
  pointer-events:none;
}
[data-fx="blur"] .sharp{opacity:var(--k,0)}
/* (e) word by word rise into a staged settle */
[data-fx="rise"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*18px));
}
.settle-sub{--ks:clamp(0,(var(--k,0) - .5)*3.4,1);opacity:calc(var(--ks)*.92) !important;transform:translateY(calc((1 - var(--ks))*12px))}
.settle-cta{--kb:clamp(0,(var(--k,0) - .68)*4,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}

.cue{
  position:absolute;left:50%;bottom:3.4vh;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  color:var(--text-secondary);opacity:.6;
}
.cue svg{width:15px;height:24px;animation:nudge 3.2s var(--ease-soft) -.8s infinite}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}

/* the composed still hero */
.hero-static{display:none}

/* ============================================================
   THE STATIC-HERO GATE. It must match the JS list character for
   character or one side shows what the other hides. A phone now
   gets the same 3D journey as a desktop, so the only visitor sent
   to the still hero is the one who asked for less motion.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{display:none}
  .hero-static{
    display:grid;align-items:end;
    min-height:92vh;min-height:92svh;
    padding:calc(var(--nav-h) + 2rem) clamp(1.2rem,5vw,3rem) clamp(2.6rem,7vw,4rem);
    /* the ending frame is added by JS, so the URL resolves against the page
       and not against this stylesheet, and so it loads only on this path */
    background-image:linear-gradient(to top,rgba(9,5,6,.94) 4%,rgba(9,5,6,.66) 44%,rgba(9,5,6,.3) 100%);
    background-size:cover;background-position:56% 44%;
  }
  .hs-inner{max-width:34rem}
  .hs-inner .lede{margin:.9rem 0 1.4rem;font-size:1.1rem;color:var(--text-primary);opacity:.92;max-width:26ch}
  .hs-line{margin:.25rem 0;color:var(--text-secondary);font-size:.95rem}
  .hs-inner .btn{margin-top:1.7rem}
}

/* short desktop windows keep the scrub but drop the small overlays */
@media (max-height:560px){
  .cue,.v-hint{display:none}
}

/* ============================================================
   THE HERO ON A TALL, NARROW SCREEN
   There is no room beside the flacons, so the words move under
   them and the scrim rises from the floor instead of hugging a
   column. The 3D scene centres its bottles to match.
   ============================================================ */
@media (max-width:760px){
  .hero{height:460vh}
  .band{
    left:0;right:0;width:auto;
    padding-inline:clamp(1.2rem,6vw,2rem);
    top:auto;bottom:14vh;transform:none;
  }
  .band-1,.band-2,.band-3,.band-4{top:auto;bottom:14vh;transform:none}
  /* the floor scrim: it reaches well above the words so a flacon drifting
     past never shows through the type */
  .band::before{
    inset:-70% -20% -160% -20%;
    background:linear-gradient(to top,rgba(7,3,5,.99) 0%,rgba(7,3,5,.97) 54%,rgba(7,3,5,.62) 80%,rgba(7,3,5,0) 100%);
  }
  .band-4::before{
    background:linear-gradient(to top,rgba(7,3,5,.99) 0%,rgba(7,3,5,.98) 58%,rgba(7,3,5,.68) 84%,rgba(7,3,5,0) 100%);
  }
  .band .lede,.band-4 .lede{max-width:30ch}
  .band .cta-row{margin-top:1.4rem}
  .display.xl{font-size:clamp(2.5rem,13vw,4rem)}
  .display.lg{font-size:clamp(1.8rem,8.6vw,2.6rem)}
  .hero-tag{
    right:auto;left:clamp(1.2rem,6vw,2rem);top:calc(var(--nav-h) + .8rem);bottom:auto;
    align-items:flex-start;text-align:left;max-width:70vw;
  }
  .cue{bottom:1.6vh}
}


/* ============================================================
   SECTIONS
   ============================================================ */
.sec{position:relative;z-index:1;padding-block:clamp(4.5rem,10vw,8.5rem)}
.sub{color:var(--text-secondary);margin:.9rem 0 0;max-width:46ch}

/* entrances */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}

.stagger>*{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:.05s}
.stagger.in>*:nth-child(2){transition-delay:.16s}
.stagger.in>*:nth-child(3){transition-delay:.27s}
.stagger.in>*:nth-child(4){transition-delay:.38s}
/* retire the delays once the entrance is done, at a specificity that
   beats the nth-child rules above so hovers never lag by the stagger */
.stagger.done>*:nth-child(1),
.stagger.done>*:nth-child(2),
.stagger.done>*:nth-child(3),
.stagger.done>*:nth-child(4){transition-delay:0s}

/* the self-drawing laurel divider */
.laurel{display:block;width:min(900px,calc(100% - 3rem));margin:clamp(3rem,7vw,5rem) auto 0;height:40px;overflow:visible}
.laurel .draw{stroke-dasharray:380;stroke-dashoffset:380;transition:stroke-dashoffset 1.6s var(--ease)}
.laurel.in .draw{stroke-dashoffset:0}

/* ============================================================
   01 LE COCON
   ============================================================ */
.cocon-grid{display:grid;gap:clamp(2.2rem,5vw,4.5rem);grid-template-columns:1fr}
@media (min-width:900px){.cocon-grid{grid-template-columns:.95fr 1fr;align-items:center}}

.cocon-stage{
  position:relative;aspect-ratio:4/5;max-height:66vh;
  border:1px solid var(--line);border-radius:3px;
  background:radial-gradient(ellipse 70% 60% at 50% 46%,rgba(75,34,43,.36),rgba(9,5,6,.9) 72%);
  overflow:hidden;
}
#cocon-canvas{position:absolute;inset:0;width:100%;height:100%}
.cocon-fallback{position:absolute;inset:0;display:none;place-items:center;padding:12%}
.cocon-stage.no-gl .cocon-fallback{display:grid}
.cocon-fallback svg{width:100%;height:100%}

.hold{
  position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:.7rem;
  min-height:44px;padding:.6rem 1.25rem;
  background:rgba(11,6,8,.6);border:1px solid var(--line-strong);border-radius:999px;
  backdrop-filter:blur(10px);color:var(--text-primary);cursor:pointer;
  text-shadow:0 1px 3px rgba(8,4,6,.85);
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.hold:hover{border-color:var(--accent);background:rgba(11,6,8,.76)}
.hold-ring{
  width:15px;height:15px;flex:none;border-radius:50%;
  border:1.5px solid var(--accent-muted);position:relative;
}
.hold-ring::after{
  content:"";position:absolute;inset:2px;border-radius:50%;
  background:var(--accent);transform:scale(var(--hp,0));
  transition:transform .12s linear;
}
.cocon-stage.opened .hold{opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}

.stages{list-style:none;margin:2.2rem 0 0;padding:0;display:grid;gap:1.5rem}
.stage-item{
  display:flex;gap:1.1rem;align-items:baseline;
  opacity:.24;transform:translateY(10px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.stage-item.lit{opacity:1;transform:none}
.st-num{color:var(--accent);flex:none;width:2.2rem;font-size:.78rem}
.stage-item h3{margin:0;font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:1.12rem;letter-spacing:.03em}
.stage-item p{margin:.3rem 0 0;color:var(--text-secondary);font-size:.96rem;max-width:38ch}
.stages-end{
  margin:2rem 0 0;padding-top:1.4rem;border-top:1px solid var(--line);
  color:var(--text-secondary);font-size:.94rem;max-width:44ch;
  opacity:0;transform:translateY(10px);
  transition:opacity .8s var(--ease) .2s,transform .8s var(--ease) .2s;
}
.stages-end.lit{opacity:1;transform:none}

/* ============================================================
   02 LA VITRINE
   ============================================================ */
.vitrine-head{margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.vitrine-stage{
  position:relative;height:min(70vh,600px);
  margin-bottom:5.5rem;
  cursor:grab;touch-action:pan-y;
}
.vitrine-stage.dragging{cursor:grabbing}
#vitrine-canvas{position:absolute;inset:0;width:100%;height:100%}

.v-caption{
  position:absolute;left:50%;bottom:-4.4rem;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.22rem;
  text-align:center;pointer-events:none;
  padding:.7rem 1.3rem;border-radius:10px;
  background:rgba(11,6,8,.55);border:1px solid var(--line);
  backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(8,4,6,.85);
  opacity:0;transition:opacity .5s var(--ease);
}
.v-caption.on{opacity:1}
.v-brand{color:var(--accent);font-size:.63rem}
.v-name{font-family:'Cinzel',Georgia,serif;font-size:1.02rem;letter-spacing:.03em}
.v-price{color:var(--text-secondary);font-size:.86rem}

.v-hint{
  position:absolute;right:1.4rem;top:1.2rem;color:var(--text-secondary);
  padding:.4rem .8rem;border:1px solid var(--line);border-radius:999px;
  background:rgba(11,6,8,.5);backdrop-filter:blur(8px);
  opacity:.75;transition:opacity .5s var(--ease);
}
.v-hint.gone{opacity:0}

/* on a phone the arc is tighter, so the stage needs less room under it */
@media (max-width:760px){
  .vitrine-stage{height:min(54vh,440px);margin-bottom:3.4rem}
  .v-caption{bottom:-3.2rem;max-width:min(26ch,80vw);padding:.55rem 1rem}
  .v-name{font-size:.94rem}
}

.v-rail{
  display:flex;gap:1rem;overflow-x:auto;padding:1rem clamp(1.2rem,5vw,3rem) 1.8rem;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--accent-muted) transparent;
}
.v-rail[hidden]{display:none}
.v-rail .card{flex:0 0 clamp(200px,58vw,260px);scroll-snap-align:center}
.vitrine-stage[hidden]{display:none}

/* ============================================================
   03 LE CATALOGUE
   ============================================================ */
.cat-head{margin-bottom:clamp(1.8rem,4vw,2.8rem)}

/* La barre des categories suit la page au lieu de rester collee en haut.
   Collee, elle prenait un tiers de l ecran d un telephone — chips sur deux
   lignes, recherche, deux listes — et ne laissait presque rien pour les
   flacons. Elle n a donc plus besoin de son fond opaque : il n y a plus
   rien a masquer dessous, et ce fond etait reste vert de l ancienne
   palette, ce qui dessinait un rectangle sur le noir. */
.filters{
  position:static;
  padding:1rem 0 .9rem;margin-bottom:1.8rem;
}
.f-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.f-tabs{margin-bottom:.8rem}
.f-controls{gap:.7rem}

.chip{
  padding:.5rem 1.05rem;min-height:38px;
  background:transparent;border:1px solid var(--line);border-radius:999px;
  color:var(--text-secondary);cursor:pointer;
  font-size:.8rem;letter-spacing:.06em;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.chip:hover{border-color:var(--line-strong);color:var(--text-primary)}
.chip.is-on{background:var(--accent);border-color:var(--accent);color:#14100C}
@media (pointer:coarse){.chip{min-height:44px}}

.field{position:relative;display:flex;align-items:center}
.field input[type="search"],.field select,.field input[type="text"],.field input[type="tel"],.field textarea{
  width:100%;padding:.68rem .9rem;min-height:42px;
  background:var(--panel);border:1px solid var(--line);border-radius:2px;
  color:var(--text-primary);font-size:.9rem;font-weight:300;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-strong)}
.field input::placeholder,.field textarea::placeholder{color:var(--text-secondary);opacity:.75}
.field input[type="search"]{padding-left:2.4rem;min-width:min(280px,68vw)}
.f-ico{position:absolute;left:.8rem;width:17px;height:17px;color:var(--text-secondary);pointer-events:none}
.field.select select{
  appearance:none;padding-right:2.2rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A6AEA6' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:11px;
}
.field.select select option{background:var(--panel);color:var(--text-primary)}

.switch{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;font-size:.85rem;color:var(--text-secondary);min-height:42px}
.switch input{position:absolute;opacity:0;width:0;height:0}
.sw{
  width:38px;height:21px;flex:none;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);position:relative;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.sw::after{
  content:"";position:absolute;left:3px;top:2px;width:14px;height:14px;border-radius:50%;
  background:var(--text-secondary);transition:transform .3s var(--ease),background .3s var(--ease);
}
.switch input:checked+.sw{background:rgba(201,160,132,.22);border-color:var(--accent)}
.switch input:checked+.sw::after{transform:translateX(16px);background:var(--accent)}
.switch input:focus-visible+.sw{outline:2px solid var(--accent);outline-offset:3px}

.f-count{color:var(--text-secondary);margin:.9rem 0 0}

/* the shelf only carries what can be sent today, so this states it plainly
   where the "in stock only" switch used to sit */
.f-all{
  display:inline-flex;align-items:center;gap:.5rem;margin:0;
  color:var(--emerald);font-size:.66rem;
}
.f-all::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--emerald);
  box-shadow:0 0 0 3px rgba(142,68,83,.24);
}

.grid{
  display:grid;gap:clamp(1.2rem,2vw,2rem) clamp(.9rem,1.6vw,1.5rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),1fr));
}
/* one column on a phone stretched the catalogue over fourteen thousand
   pixels. Two columns is what a shop looks like in a hand. */
@media (max-width:620px){
  .grid{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .card-body{padding:.7rem .1rem 0}
  .card-name{font-size:.86rem}
  .card-now{font-size:.94rem}
  .card-was{font-size:.72rem}
}

/* No panel, no border. Every flacon is cut out of its background, so the
   card is the page itself with a bottle standing on it — which is what the
   shop asked for and what a perfume counter actually looks like. */
.card{
  position:relative;display:flex;flex-direction:column;
  background:transparent;border:0;border-radius:0;
  cursor:pointer;text-align:left;
  transition:transform .5s var(--ease);
}
.card:hover{transform:translateY(-5px)}

/* The box rules, not the photograph: the flacon is laid inside it so a
   tall bottle and a squat one leave every card the same height. */
.card-media{position:relative;aspect-ratio:3/4;isolation:isolate;background:#000}
/* Aucune lueur derriere le flacon : la photo est un rectangle noir opaque,
   une lumiere posee dessous ne se verrait pas et se verrait autour. */

/* Chaque flacon porte desormais sa bandelette Testeur, et un flacon haut
   la touchait du bouchon. La photo laisse donc un bandeau libre en haut :
   le fond est noir, la reserve ne se voit pas, et aucune carte ne se
   cogne a son etiquette. */
.card-media img{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:contain;
  padding-top:2.1rem;
  transition:transform .8s var(--ease);
}
.card:hover .card-media img{transform:scale(1.055)}

/* A coffret carries its own écrin, its own pool of light and its own
   frame of laurels: it needs neither the pool behind it nor the wide
   margin a single flacon is given. */
.card.is-pack .card-media img{object-fit:contain}
.card.is-pack:hover .card-media img{transform:scale(1.03)}

/* the pointer's own light, travelling across the glass */
.card-glow{
  position:absolute;inset:0;pointer-events:none;opacity:0;z-index:2;
  mix-blend-mode:screen;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),var(--halo-hover,rgba(235,190,160,.20)),transparent 52%);
  transition:opacity .4s var(--ease);
}
.card:hover .card-glow{opacity:1}

.card-body{padding:.85rem .15rem 0;display:flex;flex-direction:column;gap:.22rem;flex:1}
.card-brand{color:var(--accent);font-size:.6rem}
.card-name{font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:.96rem;letter-spacing:.02em;line-height:1.25}
.card-meta{
  color:var(--text-secondary);font-size:.72rem;letter-spacing:.05em;margin-top:.1rem;
  /* a coffret's contents can run long, so it is held to two lines */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-price{display:flex;align-items:baseline;gap:.55rem;margin-top:auto;padding-top:.7rem}
.card-now{color:var(--accent);font-size:1.02rem;font-weight:400;letter-spacing:.02em}
.card-was{color:var(--text-secondary);font-size:.8rem;text-decoration:line-through;opacity:.7}

.flag{
  position:absolute;top:.7rem;left:.7rem;z-index:2;
  padding:.28rem .6rem;border-radius:2px;
  font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
}
.flag-out{background:rgba(11,6,8,.82);border:1px solid var(--line);color:var(--text-secondary)}
.flag-test{background:rgba(142,68,83,.34);border:1px solid rgba(142,68,83,.62);color:#F0D3D6}
.card.is-out .card-media img{opacity:.42;filter:grayscale(.5)}

.empty{text-align:center;color:var(--text-secondary);padding:3rem 0}
.more-row{display:flex;justify-content:center;margin-top:2.4rem}

/* ============================================================
   04 LE PRIX
   ============================================================ */
.prix-grid{display:grid;gap:clamp(2.2rem,5vw,4rem);grid-template-columns:1fr}
@media (min-width:960px){.prix-grid{grid-template-columns:1.05fr .95fr;align-items:start}}
.prose p{margin:0 0 1rem;max-width:52ch;color:var(--text-secondary)}
.prose-punch{
  color:var(--text-primary) !important;
  font-family:'Cinzel',Georgia,serif;font-size:1.16rem;letter-spacing:.02em;
  padding-top:.6rem;
}
.prix-cards{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.pcard{
  padding:1.5rem 1.4rem;background:var(--panel);border:1px solid var(--line);border-radius:3px;
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease);
}
.pcard:hover{border-color:var(--line-strong);background:var(--panel-hi);transform:translateY(-3px)}
.pc-ico{width:44px;height:44px;margin-bottom:.9rem}
.pcard h3{margin:0 0 .35rem;font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:1.06rem;letter-spacing:.03em}
.pcard p{margin:0;color:var(--text-secondary);font-size:.93rem}
.prix-end{
  margin:clamp(2.4rem,5vw,3.4rem) auto 0;padding-top:1.6rem;
  border-top:1px solid var(--line);
  font-family:'Cinzel',Georgia,serif;font-size:clamp(1.02rem,1.7vw,1.28rem);
  letter-spacing:.02em;color:var(--text-primary);max-width:none;
}

/* ============================================================
   05 COMMANDER
   ============================================================ */
.step-list{list-style:none;margin:2.6rem 0 0;padding:0;display:grid;gap:1.2rem}
@media (min-width:820px){.step-list{grid-template-columns:repeat(3,1fr)}}
.step{
  position:relative;padding:2rem 1.6rem 1.7rem;
  background:var(--panel);border:1px solid var(--line);border-radius:3px;
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease);
}
.step:hover{border-color:var(--line-strong);background:var(--panel-hi);transform:translateY(-3px)}
.step-n{position:absolute;top:1.1rem;right:1.2rem;color:var(--accent-muted);font-size:.68rem}
.step-ico{width:52px;height:52px;margin-bottom:1rem}
.step h3{margin:0 0 .4rem;font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:1.1rem;letter-spacing:.03em}
.step p{margin:0;color:var(--text-secondary);font-size:.94rem}

/* ============================================================
   06 LIVRAISON
   ============================================================ */
.liv-grid{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr}
@media (min-width:880px){.liv-grid{grid-template-columns:.8fr 1.2fr;align-items:start}}
.liv-list{margin:0;padding:0;display:grid;gap:0}
.liv-row{
  display:grid;gap:.3rem 2rem;padding:1.35rem 0;
  border-bottom:1px solid var(--line);
}
@media (min-width:620px){.liv-row{grid-template-columns:15rem 1fr;align-items:baseline}}
.liv-row:first-child{border-top:1px solid var(--line)}
.liv-row dt{font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:1.02rem;letter-spacing:.03em}
.liv-row dd{margin:0;color:var(--text-secondary)}

/* ============================================================
   QUESTIONS
   ============================================================ */
.faq-list{margin-top:2.4rem;border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1.6rem;
  padding:1.35rem 0;min-height:44px;
  font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:clamp(.98rem,1.5vw,1.1rem);letter-spacing:.02em;
  transition:color .3s var(--ease);
}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--accent)}
.q summary i{
  flex:none;width:16px;height:16px;position:relative;
  transition:transform .4s var(--ease);
}
.q summary i::before,.q summary i::after{
  content:"";position:absolute;background:var(--accent);
  left:50%;top:50%;transform:translate(-50%,-50%);
}
.q summary i::before{width:14px;height:1px}
.q summary i::after{width:1px;height:14px;transition:opacity .3s var(--ease)}
.q[open] summary i{transform:rotate(180deg)}
.q[open] summary i::after{opacity:0}
.q p{margin:0 0 1.5rem;color:var(--text-secondary);max-width:66ch}

/* ============================================================
   THE ORDER FORM
   ============================================================ */
.order{padding-bottom:clamp(5rem,11vw,9rem)}
.order-grid{display:grid;gap:clamp(2.2rem,5vw,4rem);grid-template-columns:1fr}
@media (min-width:920px){.order-grid{grid-template-columns:1fr 1fr;align-items:start}}

.order-basket{margin:2rem 0 0;border-top:1px solid var(--line)}
.ob-row{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
.ob-row span:first-child{color:var(--text-secondary)}
.ob-total{display:flex;justify-content:space-between;padding:1rem 0;font-family:'Cinzel',Georgia,serif;font-size:1.1rem;letter-spacing:.02em}
.ob-empty{color:var(--text-secondary);padding:1.2rem 0;font-size:.92rem;max-width:44ch}
#order-go{margin-top:1.6rem}

.order-assure{list-style:none;margin:0;padding:0;display:grid;gap:0}
.order-assure li{
  display:grid;gap:.25rem 1.6rem;padding:1.2rem 0;border-bottom:1px solid var(--line);
  align-items:baseline;
}
.order-assure li:first-child{border-top:1px solid var(--line)}
@media (min-width:560px){.order-assure li{grid-template-columns:9rem 1fr}}
.oa-k{color:var(--accent)}
.order-assure li>span:last-child{color:var(--text-secondary);font-size:.94rem}

.field.lift{flex-direction:column;align-items:stretch;gap:.4rem}
.field.lift>span{font-family:'DM Mono',monospace;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-secondary)}
.field.lift>span em{color:var(--accent);font-style:normal}
.field textarea{resize:vertical;min-height:60px}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#C07B6F}
.fe{color:#E9A79C;font-size:.78rem;letter-spacing:.01em}

/* ============================================================
   THE CHECKOUT AND THE THANK YOU, their own two pages
   ============================================================ */
.page-plain{background:var(--canvas)}
.checkout,.thanks{position:relative;z-index:1;padding:calc(var(--nav-h) + clamp(2.4rem,6vw,4.5rem)) 0 clamp(4rem,9vw,7rem)}

.ck-steps{
  list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin:0 0 clamp(1.8rem,4vw,2.8rem);padding:0;
  color:var(--text-secondary);font-size:.85rem;
}
.ck-step{display:flex;align-items:baseline;gap:.55rem}
.ck-step span{color:var(--accent-muted);font-size:.68rem}
.ck-step.done{color:var(--text-secondary)}
.ck-step.done span{color:var(--emerald)}
.ck-step.now{color:var(--text-primary)}
.ck-step.now span{color:var(--accent)}

.ck-title{margin:0}
.ck-sub{margin:1rem 0 clamp(2.2rem,5vw,3.2rem);color:var(--text-secondary);max-width:60ch}

.ck-grid{display:grid;gap:clamp(1.6rem,4vw,3rem);grid-template-columns:1fr}
@media (min-width:940px){.ck-grid{grid-template-columns:1fr 1.15fr;align-items:start}}

.ck-summary{
  background:var(--panel);border:1px solid var(--line);border-radius:3px;
  padding:clamp(1.3rem,3vw,1.9rem);
}
@media (min-width:940px){.ck-summary{position:sticky;top:calc(var(--nav-h) + 1.4rem)}}
.ck-summary h2{margin:0 0 1.2rem;color:var(--text-secondary);font-weight:300}

.ck-line{display:grid;grid-template-columns:56px 1fr auto;gap:.9rem;align-items:center;padding:.95rem 0;border-bottom:1px solid var(--line)}
.ck-line img{width:56px;height:70px;object-fit:contain;border-radius:2px;background:#000}
.ck-l-body{display:flex;flex-direction:column;gap:.15rem}
.ck-l-brand{color:var(--accent);font-size:.58rem}
.ck-l-name{font-family:'Cinzel',Georgia,serif;font-size:.94rem;letter-spacing:.02em;line-height:1.25}
.ck-l-meta{color:var(--text-secondary);font-size:.58rem}
.ck-l-body .ci-qty{margin-top:.4rem}
.ck-l-price{color:var(--accent);font-size:.95rem;white-space:nowrap}

.ck-totals{margin-top:1.2rem}
.ck-row{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.5rem 0;color:var(--text-secondary);font-size:.9rem}
.ck-ship{font-size:.8rem;opacity:.85}
.ck-grand{
  margin-top:.5rem;padding-top:.9rem;border-top:1px solid var(--line);
  color:var(--text-primary);font-family:'Cinzel',Georgia,serif;font-size:1.16rem;letter-spacing:.02em;
}
.ck-grand span:last-child{color:var(--accent)}
.ck-empty{color:var(--text-secondary);padding:1rem 0}
.ck-empty a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.ck-back{
  display:inline-block;margin-top:1.3rem;color:var(--text-secondary);font-size:.85rem;
  border-bottom:1px solid var(--line);padding-bottom:.15rem;transition:color .3s var(--ease),border-color .3s var(--ease);
}
.ck-back:hover{color:var(--accent);border-color:var(--accent)}

.ck-form{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:clamp(1.4rem,3vw,2.3rem)}
.ck-form h2{margin:0 0 1.4rem;color:var(--text-secondary);font-weight:300}
.ck-form.is-blocked{opacity:.55}
.ck-fields{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media (min-width:620px){.ck-fields{grid-template-columns:1fr 1fr}.ck-fields .full{grid-column:1/-1}}

.ck-pay{
  display:flex;gap:.9rem;align-items:flex-start;
  margin:1.6rem 0 0;padding:1.05rem 1.1rem;
  background:rgba(142,68,83,.13);border:1px solid rgba(142,68,83,.34);border-radius:3px;
  color:var(--text-secondary);font-size:.9rem;
}
.ck-pay svg{width:22px;height:22px;flex:none;color:var(--emerald);margin-top:.1rem}
.ck-pay strong{color:var(--text-primary);font-weight:500}
.ck-error{color:#E9A79C;margin:1.2rem 0 0;font-size:.92rem}
#ck-submit{margin-top:1.5rem}
.ck-note{margin:.9rem 0 0;color:var(--text-secondary);font-size:.83rem;text-align:center}

/* the thank you */
.thanks .wrap{max-width:820px}
.th-seal{width:118px;margin:0 0 1.8rem}
.th-ring{stroke-dasharray:352;stroke-dashoffset:352;animation:sealRing 1.4s var(--ease) .15s forwards}
.th-tick{stroke-dasharray:70;stroke-dashoffset:70;animation:sealTick .7s var(--ease) .9s forwards}
@keyframes sealRing{to{stroke-dashoffset:0}}
@keyframes sealTick{to{stroke-dashoffset:0}}
.th-title{margin:0}
.th-lede{margin:1.1rem 0 0;font-size:1.1rem;color:var(--text-secondary);max-width:52ch}
.th-ref{
  display:inline-block;margin:1.6rem 0 0;padding:.5rem .95rem;
  border:1px solid var(--line-strong);border-radius:2px;color:var(--accent);
}
.th-recap{margin-top:clamp(2.2rem,5vw,3rem);padding:clamp(1.3rem,3vw,1.8rem);background:var(--panel);border:1px solid var(--line);border-radius:3px}
.th-recap h2{margin:0 0 1rem;color:var(--text-secondary);font-weight:300}
.th-ship{margin:1rem 0 0;color:var(--text-secondary);font-size:.9rem}
.th-next{list-style:none;margin:clamp(2.4rem,5vw,3.4rem) 0 0;padding:0;display:grid;gap:1.4rem}
.th-next li{display:flex;gap:1.1rem;align-items:baseline}
.th-next span{color:var(--accent);flex:none;width:2.2rem;font-family:'DM Mono',monospace;font-size:.68rem;letter-spacing:.13em}
.th-next h3{margin:0;font-family:'Cinzel',Georgia,serif;font-weight:600;font-size:1.06rem;letter-spacing:.03em}
.th-next p{margin:.25rem 0 0;color:var(--text-secondary);font-size:.94rem;max-width:52ch}
.th-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:clamp(2.4rem,5vw,3.2rem)}
.th-small{margin:1.6rem 0 0;color:var(--text-secondary);font-size:.85rem}

@media (prefers-reduced-motion: reduce){
  .th-ring,.th-tick{animation:none;stroke-dashoffset:0}
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{position:relative;z-index:1;border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,4.5rem) 2rem;background:rgba(9,5,6,.5)}
.foot-grid{display:grid;gap:2.4rem;grid-template-columns:1fr}
@media (min-width:760px){.foot-grid{grid-template-columns:1.4fr repeat(3,1fr)}}
.foot-brand .mark{width:44px;height:44px;margin-bottom:.8rem}
.f-name{font-size:1.2rem;margin:0;letter-spacing:.09em}
.f-tag{color:var(--accent);margin:.35rem 0 0;font-size:.62rem}
.foot-col{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.foot-col h4{margin:0 0 .35rem;color:var(--text-secondary);font-weight:300}
.foot-col a{color:var(--text-secondary);font-size:.9rem;transition:color .3s var(--ease)}
.foot-col a:hover{color:var(--accent)}
.legal{margin:3rem auto 0;padding-top:1.6rem;border-top:1px solid var(--line);color:var(--text-secondary);font-size:.78rem;opacity:.8}

/* ============================================================
   THE PRODUCT SHEET
   ============================================================ */
.sheet,.cart{position:fixed;inset:0;z-index:100}
.sheet[hidden],.cart[hidden]{display:none}
.sheet-back,.cart-back{
  position:absolute;inset:0;background:rgba(7,3,5,.78);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .45s var(--ease);
}
.sheet.on .sheet-back,.cart.on .cart-back{opacity:1}

.sheet-panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98);
  width:min(1000px,calc(100% - 2rem));max-height:min(88vh,900px);
  display:grid;grid-template-columns:1fr;
  /* Rien ne defile ici. Tout ce que le client a besoin de savoir, prix et
     boutons compris, tient dans un seul ecran : c est le sens de la fiche. */
  overflow:hidden;
  /* noir, comme le sol : la photo du flacon y pose son rectangle sans bord */
  background:#000;border:1px solid var(--line-strong);border-radius:4px;
  opacity:0;transition:opacity .45s var(--ease),transform .45s var(--ease);
}
@media (min-width:820px){.sheet-panel{grid-template-columns:.9fr 1.1fr}}
.sheet.on .sheet-panel{opacity:1;transform:translate(-50%,-50%) scale(1)}

.sheet-x{
  position:absolute;top:.7rem;right:.7rem;z-index:3;
  width:40px;height:40px;display:grid;place-items:center;
  background:rgba(11,6,8,.7);border:1px solid var(--line);border-radius:50%;
  color:var(--text-primary);cursor:pointer;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.sheet-x:hover{border-color:var(--accent);color:var(--accent)}
.sheet-x svg{width:17px;height:17px}

/* Meme regle que la carte : la photo est un rectangle noir sur un panneau
   noir, donc son bord ne se voit pas. */
.sh-media{position:relative;background:#000;min-height:280px}
.sh-media img{width:100%;height:100%;object-fit:contain;max-height:min(88vh,900px)}

/* On a phone the sheet stacks, and a 4:5 photograph then eats the whole
   screen before the price is ever reached. The image is held to a third of
   the panel so the name, the price and the buttons stay in view. */
@media (max-width:819px){
  .sheet-panel{
    width:min(560px,calc(100% - 1.4rem));
    max-height:min(86vh,780px);
    grid-template-rows:auto 1fr;
  }
  .sh-media{min-height:0;height:30vh;max-height:270px}
  .sh-media img{height:100%;object-fit:contain;max-height:none;padding:.6rem}
  .sheet-panel .sh-body{padding:1.1rem 1.2rem 1.3rem;gap:.35rem}
  .sheet-panel .sh-body h2{font-size:1.3rem}
  .sheet-panel .sh-desc{margin-top:.6rem;font-size:.86rem;-webkit-line-clamp:2}
  .sheet-panel .sh-notes{margin-top:.6rem;padding-top:.6rem;font-size:.8rem;-webkit-line-clamp:2}
  .pyr-sep{margin:0 .35rem}
  .sheet-panel .sh-price{padding-top:.8rem}
  .sheet-panel .sh-now{font-size:1.4rem}
  .sheet-panel .sh-cta{margin-top:.7rem;gap:.45rem}
  .sh-cta .btn{flex:1 1 100%;text-align:center}
}
.sh-flag{position:absolute;top:.9rem;left:.9rem;padding:.3rem .65rem;border-radius:2px;background:rgba(11,6,8,.82);border:1px solid var(--line);color:var(--text-secondary);font-size:.6rem}

.sh-body{
  padding:clamp(1.3rem,2.6vw,2.2rem);
  display:flex;flex-direction:column;gap:.5rem;min-height:0;overflow:hidden;
}
/* Chaque bloc garde sa hauteur. Laisses libres, ils se faisaient comprimer
   par la colonne et le texte etait tranche en plein milieu d une ligne. */
.sh-body > *{flex:0 0 auto}
.sh-brand{color:var(--accent);margin:0}
.sh-body h2{margin:.1rem 0 0;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.14}
.sh-meta{color:var(--text-secondary);margin:.3rem 0 0;font-size:.66rem}
/* Trois lignes suffisent a situer un parfum ; la fiche complete est dans
   le catalogue, pas dans une fenetre qu il faudrait faire defiler. */
.sh-desc{
  color:var(--text-secondary);margin:.8rem 0 0;font-size:.92rem;max-width:52ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.sh-notes{
  margin:.9rem 0 0;padding-top:.9rem;border-top:1px solid var(--line);
  color:var(--text-primary);font-size:.88rem;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.pyr-sep{color:var(--accent-muted);margin:0 .5rem}
.pyr{display:grid;gap:.7rem}
.pyr-row{display:grid;gap:.15rem .9rem;align-items:baseline}
@media (min-width:520px){.pyr-row{grid-template-columns:5rem 1fr}}
.pyr-k{color:var(--accent);font-size:.64rem}
.pyr-v{color:var(--text-primary);font-size:.92rem;opacity:.9}
/* A house that publishes one composition instead of a pyramid gets one
   line: an empty heart and base would claim a shape it never had. */
.sh-notes.is-flat .pyr-row:nth-child(2),
.sh-notes.is-flat .pyr-row:nth-child(3){display:none}

.sh-nonotes{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--line);color:var(--text-secondary);font-size:.92rem}
.sh-price{display:flex;align-items:baseline;gap:.8rem;margin-top:auto;padding-top:1.1rem}
.sh-now{color:var(--accent);font-family:'Cinzel',Georgia,serif;font-size:1.7rem;letter-spacing:.02em}
.sh-was{color:var(--text-secondary);text-decoration:line-through;font-size:.95rem;opacity:.75}
.sh-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}

/* ============================================================
   THE CART
   ============================================================ */
.cart-panel{
  position:absolute;right:0;top:0;bottom:0;
  width:min(430px,100%);display:flex;flex-direction:column;
  background:var(--panel);border-left:1px solid var(--line-strong);
  transform:translateX(102%);transition:transform .5s var(--ease);
}
.cart.on .cart-panel{transform:none}
.cart-top{display:flex;align-items:center;justify-content:space-between;padding:1.4rem 1.5rem;border-bottom:1px solid var(--line)}
.cart-top h2{margin:0;font-size:1.25rem;letter-spacing:.04em}
.cart-top .sheet-x{position:static}
.cart-items{flex:1;overflow:auto;padding:.5rem 1.5rem}
.ci{display:grid;grid-template-columns:56px 1fr auto;gap:.9rem;align-items:center;padding:.95rem 0;border-bottom:1px solid var(--line)}
.ci img{width:56px;height:70px;object-fit:contain;border-radius:2px;background:#000}
.ci-name{font-family:'Cinzel',Georgia,serif;font-size:.92rem;letter-spacing:.02em;line-height:1.25}
.ci-brand{color:var(--accent);font-family:'DM Mono',monospace;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase}
.ci-price{color:var(--text-secondary);font-size:.84rem;margin-top:.2rem}
.ci-qty{display:flex;align-items:center;gap:.35rem}
.qbtn{
  width:28px;height:28px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--line);border-radius:2px;
  color:var(--text-primary);cursor:pointer;font-size:.9rem;line-height:1;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.qbtn:hover{border-color:var(--accent);color:var(--accent)}
.qn{min-width:1.6rem;text-align:center;font-family:'DM Mono',monospace;font-size:.85rem}
.cart-empty{padding:2.5rem 1.5rem;color:var(--text-secondary);font-size:.94rem}
.cart-foot{padding:1.3rem 1.5rem 1.6rem;border-top:1px solid var(--line)}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.3rem}
.cart-total span:last-child{font-family:'Cinzel',Georgia,serif;font-size:1.3rem;color:var(--accent);letter-spacing:.02em}
.cart-note{color:var(--text-secondary);margin:0 0 1rem}

body.locked{overflow:hidden}

/* ============================================================
   PAUSE EVERYTHING ON A HIDDEN TAB. animation-play-state does not
   inherit, so it has to hit every element and pseudo-element.
   ============================================================ */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

/* ============================================================
   REDUCED MOTION, honoured completely
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
  .reveal{opacity:1;transform:none}
  .stagger>*{opacity:1;transform:none}
  .laurel .draw{stroke-dashoffset:0}
  .stage-item{opacity:1;transform:none}
  .stages-end{opacity:1;transform:none}
  .band{opacity:1}
  .cue svg{animation:none}
  .env-glow-unused{animation:none;opacity:.7}
  /* positional transforms re-applied per breakpoint so nothing lands off screen */
  .band-1,.band-2,.band-3,.band-4{transform:translateY(-50%)}
  .cue,.v-hint{display:none}
  .sheet-panel{transform:translate(-50%,-50%) scale(1)}
  .cart-panel{transform:none}
}

/* the same pins applied live by JS when reduced motion flips on mid-session */
.pinned .reveal{opacity:1;transform:none}
.pinned .stagger>*{opacity:1;transform:none}
.pinned .laurel .draw{stroke-dashoffset:0}
.pinned .stage-item{opacity:1;transform:none}
.pinned .stages-end{opacity:1;transform:none}

/* ============================================================
   L'ENTRÉE : la devanture, avant que la boutique s'ouvre
   ============================================================ */

/* Tant que le rideau est là, la page ne défile pas derrière lui. */
html.intro-on, html.intro-on body{overflow:hidden}

.intro{
  position:fixed;inset:0;z-index:300;
  background:#000;
  overflow:hidden;
  transition:opacity .85s var(--ease);
}
.intro canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

/* ---------- la scène : c'est elle que la caméra traverse ---------- */
.intro-scene{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  transform-origin:50% 52%;
  transition:transform 2.4s cubic-bezier(.55,.04,.28,.99);
  background:radial-gradient(50% 44% at 50% 60%,rgba(201,160,132,.08),transparent 72%);
}
.in-facade{
  display:flex;flex-direction:column;align-items:center;
}

/* L'enseigne : de la vraie typographie, dorée par un dégradé. */
.in-nom{
  margin:0;
  font-family:'Cinzel',Georgia,serif;font-weight:700;
  font-size:clamp(1.7rem,7vw,3rem);
  letter-spacing:.13em;text-indent:.13em;white-space:nowrap;
  background:linear-gradient(to bottom,#F6E3C8 8%,#C9A084 54%,#8E6B55 96%);
  -webkit-background-clip:text;background-clip:text;
  color:#C9A084;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 26px rgba(226,170,110,.30));
}
.in-sub{
  margin:.55rem 0 clamp(1.3rem,3.4vh,2.3rem);
  font-family:'DM Mono',ui-monospace,monospace;font-weight:300;
  font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(201,160,132,.82);white-space:nowrap;
}

.in-porche{display:flex;align-items:center;gap:clamp(1.1rem,4.5vw,2.6rem)}

/* Les deux lanternes : une boule de lumière chaude de chaque côté. */
.in-lampe{
  width:7px;height:7px;border-radius:50%;
  background:#FFD9A8;
  box-shadow:0 0 10px 3px rgba(255,205,150,.85),0 0 58px 20px rgba(226,150,90,.26);
}

/* ---------- la porte à double battant ---------- */
.in-porte{
  position:relative;
  height:clamp(300px,54vh,500px);
  aspect-ratio:0.62;
  border:1px solid rgba(201,160,132,.62);
  border-radius:48% 48% 5px 5px / 25% 25% 5px 5px;
  overflow:hidden;
  perspective:950px;
  box-shadow:
    0 0 70px rgba(226,160,100,.13),
    0 0 0 5px rgba(10,6,8,.9),
    0 0 0 6px rgba(201,160,132,.22);
  background:#0C0608;
}
/* le seuil : la lumière du dedans qui glisse sous la porte */
.in-porte::after{
  content:"";position:absolute;left:8%;right:8%;bottom:0;height:2px;
  background:linear-gradient(to right,transparent,rgba(255,210,160,.8),transparent);
}

/* Le dedans, aperçu à travers le verre : la photographie du héros du site,
   floutée, dans sa lumière ambrée. */
.in-interieur{
  position:absolute;inset:0;
  background-color:#1B0E0C;
  background-size:cover;background-position:center 30%;
  filter:blur(5px) brightness(.72) saturate(1.15);
  transform:scale(1.16);
  transition:filter 2s var(--ease-soft),transform 2.6s var(--ease-soft);
}
.in-interieur::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(62% 50% at 50% 40%,rgba(255,180,110,.26),transparent 76%),
    linear-gradient(to top,rgba(0,0,0,.5),transparent 42%);
}

/* L'imposte en éventail : des barreaux sombres qui rayonnent sur le verre. */
.in-transom{
  position:absolute;top:0;left:0;right:0;height:23%;
  background:repeating-conic-gradient(from -90deg at 50% 102%,rgba(8,4,6,.92) 0deg 2.4deg,transparent 2.4deg 22deg);
  border-bottom:2px solid rgba(201,160,132,.6);
  pointer-events:none;
}

/* Les battants : du verre fumé cerclé d'or, une poignée de laiton.
   La penture est au bord : ils pivotent vers le dedans. */
.in-battant{
  position:absolute;top:23%;bottom:0;width:50.5%;
  background:
    linear-gradient(112deg,transparent 36%,rgba(255,236,214,.05) 44%,rgba(255,236,214,.13) 50%,rgba(255,236,214,.05) 56%,transparent 64%),
    linear-gradient(to bottom,rgba(17,9,11,.78),rgba(30,16,19,.66) 54%,rgba(10,6,8,.86));
  border:1px solid rgba(201,160,132,.5);
  box-shadow:inset 0 0 32px rgba(0,0,0,.5);
  backface-visibility:hidden;
  transition:transform 1.55s cubic-bezier(.62,.02,.22,1);
}
.in-battant::before{
  content:"";position:absolute;inset:6% 10% 9%;
  border:1px solid rgba(201,160,132,.32);
}
.in-battant::after{
  content:"";position:absolute;top:37%;height:26%;width:3px;border-radius:2px;
  background:linear-gradient(to bottom,#EACDA8,#A87D5C 60%,#6E4E3C);
  box-shadow:0 0 12px rgba(240,190,130,.5);
}
.in-battant-g{left:0;transform-origin:left center}
.in-battant-d{right:0;transform-origin:right center}
.in-battant-g::after{right:8%}
.in-battant-d::after{left:8%}

/* Le trottoir : le reflet chaud de la boutique au sol. */
.in-sol{
  width:clamp(260px,50vh,470px);height:72px;margin-top:2px;
  background:radial-gradient(52% 100% at 50% 0%,rgba(226,160,100,.20),transparent 78%);
}

/* La lumière qui prend tout quand on franchit le seuil. */
.in-flood{
  position:absolute;inset:-25%;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 54%,rgba(255,226,186,.98),rgba(255,204,150,.8) 34%,rgba(80,45,25,0) 72%);
  transition:opacity 1s ease 1.05s;
}

/* Un léger voile en bas, pour asseoir la façade dans la nuit. */
.intro-veil{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.45),transparent 24%);
}

/* ---------- l'entrée elle-même ----------
   Il n'y a rien à décider : la porte s'ouvre d'elle-même. Les battants
   pivotent, la caméra avance vers la porte, le dedans se fait net, la
   lumière déborde. Puis le rideau s'efface sur le site. */
.intro.is-entering .in-battant-g{transform:rotateY(-74deg)}
.intro.is-entering .in-battant-d{transform:rotateY(74deg)}
.intro.is-entering .intro-scene{transform:scale(2.6)}
.intro.is-entering .in-interieur{filter:blur(1px) brightness(1.02) saturate(1.1);transform:scale(1.02)}
.intro.is-entering .in-flood{opacity:.96}
.intro.is-out{opacity:0;pointer-events:none}

@media (max-width:760px){
  .in-sub{font-size:.54rem}
}

/* Qui préfère les pages calmes entre directement : le rideau est retiré
   avant même ce fichier. Ceci n'est qu'une ceinture de plus. */
@media (prefers-reduced-motion: reduce){
  .intro-scene,.in-battant,.in-interieur,.in-flood{transition:none}
}