/* ============================================================
   NUIT DE VELOURS (07/10/2026) : le thème 3D.

   Une feuille à part, lue APRÈS site.css : à spécificité égale la
   dernière règle l'emporte, elle rhabille donc l'Écrin sans y toucher.
   Pour revenir en arrière : retirer le lien vers ce fichier.

   LA PAGE EST UNE NUIT DE VELOURS — un bleu minuit profond — SUR
   LAQUELLE UNE CRÈME DESCEND. Le héros est épinglé en haut de la page
   et bascule en arrière, en vrai relief, quand on fait défiler ; le
   chapitre suivant, couleur crème, coule par-dessus avec un bord qui
   goutte. Les chapitres alternent ensuite : minuit, crème, minuit…
   et chaque chapitre crème arrive avec sa coulée. L'or sert aux
   accents, le vert ne sert plus.

   Les photos de flacons sont des rectangles noirs : sur la nuit, on
   fond leur noir dans le velours (mix-blend-mode : lighten) et le
   flacon flotte, comme sur les photos des coffrets.
   ============================================================ */
:root{
  --nuit:#0B1120;
  --nuit-2:#111A2E;
  --velours:#172138;
  --velours-2:#1E2A47;
  --creme:#F4EADA;
  --creme-2:#EADCC4;
  --encre:#17120F;
  --or:#D5B47A;
  --or-clair:#EFD9AA;
  --or-sombre:#A8884C;
  --noir:#070B14;

  --canvas:var(--nuit);
  --canvas-deep:var(--nuit-2);
  --panel:var(--velours);
  --panel-hi:var(--velours-2);
  --accent:var(--or);
  --accent-hover:var(--or-clair);
  --accent-muted:#B59A6A;
  --emerald:#7CC79B;
  --emerald-lo:rgba(124,199,155,.14);
  --text-primary:var(--creme);
  --text-secondary:rgba(244,234,218,.68);
  --line:rgba(244,234,218,.12);
  --line-strong:rgba(244,234,218,.28);
  --bascule:0;
}

/* ---- la nuit : le fond de toute page ---- */
html,body{background:var(--nuit);color:var(--creme)}
body{font-weight:400}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 50% -8%,#1E2B4D 0%,rgba(30,43,77,0) 60%),
    radial-gradient(900px 520px at 100% 100%,rgba(213,180,122,.10) 0%,rgba(213,180,122,0) 60%),
    var(--nuit);
}
:focus-visible{outline-color:var(--or)}
.skip{background:var(--or);color:var(--encre)}

/* ---- les chapitres crème : une crème qui coule par-dessus la nuit ---- */
.cercles,.combo,.prix,.steps,.faq,.order,
.fiche.categorie .filters,
.page-plain .ck-summary,.page-plain .ck-form,.page-plain .th-recap{
  --canvas:var(--creme);
  --canvas-deep:var(--creme-2);
  --panel:#FFFFFF;
  --panel-hi:#FBF7EF;
  --accent:#8A6C34;
  --accent-hover:#6E5426;
  --accent-muted:#B39A70;
  --emerald:#2F7A52;
  --emerald-lo:#DCEBE0;
  --text-primary:var(--encre);
  --text-secondary:#6B6459;
  --line:rgba(23,21,18,.12);
  --line-strong:rgba(23,21,18,.28);
  color:var(--encre);
}
.cercles,.combo,.prix,.steps,.faq,.order{
  position:relative;z-index:3;
  background:linear-gradient(180deg,var(--creme) 0%,var(--creme-2) 100%);
}
.combo{background:var(--creme-2)}
.combo{padding-top:clamp(2.2rem,5vw,3.4rem)}
.cercles{padding-bottom:clamp(2.4rem,5vw,3.6rem)}
/* LA CRÈME QUI DESCEND, AU FIL DES CHAPITRES. Chaque chapitre crème qui
   précède un chapitre de nuit laisse couler son bord inférieur par-dessus
   lui : une nappe de crème (::after) dont le bas ondule et laisse pendre
   des gouttes, et son ombre portée (::before), décalée vers le bas, qui
   donne le relief. Le dessin est un masque SVG. Le chapitre crème
   (z-index 3) passe au-dessus du chapitre de nuit (z-index 2), ses
   gouttes aussi. */
.combo::after,.prix::after,.steps::after,.order::after,
.combo::before,.prix::before,.steps::before,.order::before{
  content:"";position:absolute;left:0;right:0;bottom:-88px;height:90px;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path d='M0 0 H1440 V30 C1400 30 1392 62 1352 62 C1318 62 1314 34 1276 34 C1236 34 1230 80 1188 80 C1150 80 1146 42 1106 42 C1066 42 1058 64 1018 64 C978 64 972 32 926 32 C880 32 876 86 830 86 C790 86 784 38 740 38 C700 38 692 58 650 58 C610 58 604 28 558 28 C516 28 508 74 466 74 C426 74 420 36 376 36 C336 36 328 54 286 54 C246 54 240 30 196 30 C156 30 148 68 104 68 C70 68 60 32 20 32 C12 32 6 32 0 32 Z'/></svg>") bottom center / 100% 100% no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path d='M0 0 H1440 V30 C1400 30 1392 62 1352 62 C1318 62 1314 34 1276 34 C1236 34 1230 80 1188 80 C1150 80 1146 42 1106 42 C1066 42 1058 64 1018 64 C978 64 972 32 926 32 C880 32 876 86 830 86 C790 86 784 38 740 38 C700 38 692 58 650 58 C610 58 604 28 558 28 C516 28 508 74 466 74 C426 74 420 36 376 36 C336 36 328 54 286 54 C246 54 240 30 196 30 C156 30 148 68 104 68 C70 68 60 32 20 32 C12 32 6 32 0 32 Z'/></svg>") bottom center / 100% 100% no-repeat;
}
.combo::after,.prix::after,.steps::after,.order::after{background:var(--creme-2);z-index:2}
.combo::before,.prix::before,.steps::before,.order::before{background:rgba(5,8,16,.5);bottom:-102px;z-index:1}

/* LA COULÉE DU HÉROS. Une nappe de crème fixée en haut de l'écran, qui
   descend sur le héros à mesure qu'on défile (--coulee, 0 → 1, posé par
   relief.js), avec le même bord qui goutte et son ombre. Elle est
   au-dessus du héros (z-index 1) et sous les chapitres (2 et 3), qui
   finissent par la recouvrir : la couture est invisible, tout est crème. */
.coulee,.coulee-ombre{
  position:fixed;left:0;right:0;top:0;height:112vh;z-index:1;pointer-events:none;
  transform:translateY(calc(var(--coulee,0) * 112vh - 112vh));
  will-change:transform;
  -webkit-mask:linear-gradient(#000,#000) top center / 100% calc(100% - 90px) no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path d='M0 0 H1440 V30 C1400 30 1392 62 1352 62 C1318 62 1314 34 1276 34 C1236 34 1230 80 1188 80 C1150 80 1146 42 1106 42 C1066 42 1058 64 1018 64 C978 64 972 32 926 32 C880 32 876 86 830 86 C790 86 784 38 740 38 C700 38 692 58 650 58 C610 58 604 28 558 28 C516 28 508 74 466 74 C426 74 420 36 376 36 C336 36 328 54 286 54 C246 54 240 30 196 30 C156 30 148 68 104 68 C70 68 60 32 20 32 C12 32 6 32 0 32 Z'/></svg>") bottom center / 100% 90px no-repeat;
  mask:linear-gradient(#000,#000) top center / 100% calc(100% - 90px) no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path d='M0 0 H1440 V30 C1400 30 1392 62 1352 62 C1318 62 1314 34 1276 34 C1236 34 1230 80 1188 80 C1150 80 1146 42 1106 42 C1066 42 1058 64 1018 64 C978 64 972 32 926 32 C880 32 876 86 830 86 C790 86 784 38 740 38 C700 38 692 58 650 58 C610 58 604 28 558 28 C516 28 508 74 466 74 C426 74 420 36 376 36 C336 36 328 54 286 54 C246 54 240 30 196 30 C156 30 148 68 104 68 C70 68 60 32 20 32 C12 32 6 32 0 32 Z'/></svg>") bottom center / 100% 90px no-repeat;
}
.coulee{background:var(--creme)}
.coulee-ombre{background:rgba(5,8,16,.5);transform:translateY(calc(var(--coulee,0) * 112vh - 112vh + 14px))}
.sec-tete h2,.display{color:inherit}

/* ---- l'en-tête : du verre de nuit, un fil d'or ---- */
.nav,.nav.solid{
  background:rgba(7,11,20,.76);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid rgba(213,180,122,.22);
  color:var(--creme);
}
.ruban{background:linear-gradient(90deg,#CDB080,#EFD9AA 50%,#CDB080);color:var(--encre);font-weight:600}
.wm-1{color:var(--creme)}
.links a{color:rgba(244,234,218,.78)}
.links a:hover{color:var(--or-clair)}
.links a::after{background:var(--or)}
.ico-btn,.cart-btn,.mc-menu-btn{border-color:rgba(213,180,122,.28);color:var(--creme)}
.ico-btn:hover,.cart-btn:hover,.mc-menu-btn:hover{border-color:var(--or);background:rgba(213,180,122,.1)}
.cart-count{background:var(--or);color:var(--encre)}
.mc-bar{background:var(--creme)}

/* ---- les boutons : or sur la nuit, encre sur la crème ---- */
.btn{border-radius:999px;font-weight:500;letter-spacing:.12em}
.btn-gold,.card-buy,.combo-taille.is-on,.chip.is-on,.cat-nav-lien.is-on{
  background:linear-gradient(135deg,#EFD9AA 0%,#D5B47A 55%,#B8955A 100%);
  border-color:transparent;color:var(--encre);
  box-shadow:0 10px 26px rgba(213,180,122,.22),inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-gold:hover,.card-buy:hover{
  background:linear-gradient(135deg,#F6E5BE 0%,#E2C48C 55%,#C7A46A 100%);
  border-color:transparent;color:var(--encre);transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(213,180,122,.34),inset 0 1px 0 rgba(255,255,255,.5);
}
.cat-nav-lien.is-on small,.combo-taille.is-on small{color:#5E4A22}
.btn-ghost,.card-add{color:var(--text-primary);border-color:var(--line-strong)}
.btn-ghost:hover,.card-add:hover{border-color:var(--accent);color:var(--accent)}
.card-add.is-ok{background:var(--emerald);border-color:var(--emerald);color:var(--encre)}
.combo-slot-btn:hover .combo-plus{background:var(--encre);color:var(--creme)}
.vd-prix{background:linear-gradient(135deg,#EFD9AA,#D5B47A);color:var(--encre);box-shadow:0 8px 22px rgba(213,180,122,.25)}
.vd-btn{background:var(--creme);color:var(--encre)}
.vd-btn:hover{background:#fff}

/* ============================================================
   LE HÉROS, EN RELIEF. Épinglé en haut (sticky) : la page qui suit
   coule par-dessus. relief.js pose --bascule (0 → 1) pendant qu'on
   défile sur sa hauteur : il s'incline en arrière, s'éloigne et
   s'assombrit, comme un écrin que l'on referme.
   ============================================================ */
.vedette{
  position:sticky;top:0;z-index:0;
  background:
    radial-gradient(ellipse 60% 70% at 70% 45%,rgba(213,180,122,.16),rgba(213,180,122,0) 65%),
    radial-gradient(ellipse 80% 60% at 20% 100%,rgba(30,43,77,.9),rgba(30,43,77,0) 60%),
    linear-gradient(180deg,#0E1527 0%,#0B1120 60%,#070B14 100%);
  color:var(--creme);
  transform-origin:50% 100%;
  transform:perspective(1400px) rotateX(calc(var(--bascule) * 14deg)) translateY(calc(var(--bascule) * 40px)) scale(calc(1 - var(--bascule) * .06));
  will-change:transform;
}
.vedette::before{
  background:
    radial-gradient(ellipse 34% 40% at 72% 52%,rgba(213,180,122,.22),rgba(213,180,122,0) 70%),
    linear-gradient(to bottom,rgba(11,17,32,.6),rgba(11,17,32,0) 24%,rgba(11,17,32,0) 72%,rgba(7,11,20,.8) 100%);
}
/* le voile qui tombe sur le héros à mesure qu'il bascule */
.vedette::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(to bottom,rgba(7,11,20,0),rgba(7,11,20,.9));
  opacity:var(--bascule);
}
.vd-marque{color:var(--or-clair);letter-spacing:.4em}
.vd-nom{color:var(--creme);text-shadow:0 2px 0 rgba(0,0,0,.35),0 14px 40px rgba(0,0,0,.5)}
.vd-ligne{color:rgba(244,234,218,.86)}
.vd-offre{border-color:rgba(213,180,122,.5);color:var(--or-clair)}

/* la scène : une vraie perspective, le flacon posé sur un disque de verre
   sombre, un anneau d'or qui tourne derrière lui, et son reflet */
.vd-visu{perspective:1200px;transform-style:preserve-3d}
.vd-visu::before{
  background:radial-gradient(ellipse at center,rgba(213,180,122,.26),rgba(213,180,122,0) 62%);
}
.vd-visu::after{
  content:"";position:absolute;left:50%;top:44%;width:92%;aspect-ratio:1;
  transform:translate(-50%,-50%) rotateX(72deg);
  border-radius:50%;
  background:conic-gradient(from 0deg,rgba(213,180,122,0) 0%,rgba(239,217,170,.9) 12%,rgba(213,180,122,0) 30%,rgba(213,180,122,0) 55%,rgba(239,217,170,.55) 68%,rgba(213,180,122,0) 85%);
  -webkit-mask:radial-gradient(circle,transparent 61%,#000 62%,#000 65%,transparent 66%);
  mask:radial-gradient(circle,transparent 61%,#000 62%,#000 65%,transparent 66%);
  animation:mc-anneau 14s linear infinite;
  pointer-events:none;z-index:0;
}
@keyframes mc-anneau{to{transform:translate(-50%,-50%) rotateX(72deg) rotate(360deg)}}
.vd-socle{
  background:radial-gradient(ellipse at 50% 30%,#2A3556 0%,#141C32 48%,#070B14 100%);
  box-shadow:0 0 0 1px rgba(213,180,122,.45),0 30px 50px rgba(0,0,0,.7),inset 0 -14px 26px rgba(0,0,0,.6),inset 0 2px 0 rgba(239,217,170,.35);
}
.vd-img{
  transform:translateZ(60px) rotateY(calc(var(--parallaxe,0) * 1deg));
  filter:drop-shadow(0 34px 30px rgba(0,0,0,.65)) drop-shadow(0 0 30px rgba(213,180,122,.12));
  -webkit-box-reflect:below -5% linear-gradient(transparent 58%,rgba(0,0,0,.38));
  transition:transform 1.1s var(--ease),filter .6s var(--ease);
}
.vd-slide:not(.is-on) .vd-img{transform:translateZ(0) translateY(18px) rotateY(-28deg) scale(.94)}
.vd-slide.is-on .vd-txt{animation:mc-entree 1s var(--ease) both}
@keyframes mc-entree{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.vd-confiance{border-top-color:rgba(213,180,122,.22)}
.vd-conf svg{stroke:var(--or-clair)}
.vd-conf span{color:rgba(244,234,218,.9)}
.vd-dot{background:rgba(244,234,218,.3)}
.vd-dot.is-on{background:var(--or-clair)}

/* ---- les médaillons des catégories ---- */
.cercle{color:var(--encre)}
.cercle-img{
  background:var(--velours);
  box-shadow:0 0 0 2px var(--creme),0 0 0 4px var(--or),0 18px 34px rgba(23,21,18,.22),inset 0 -18px 30px rgba(0,0,0,.45);
  transform:perspective(600px) rotateX(0deg);
}
.cercle-img img{mix-blend-mode:lighten}
.cercle-img-large img{mix-blend-mode:normal}
.cercle:hover .cercle-img{transform:perspective(600px) rotateX(8deg) translateY(-6px);box-shadow:0 0 0 2px var(--creme),0 0 0 4px #8A6C34,0 26px 44px rgba(23,21,18,.3),inset 0 -18px 30px rgba(0,0,0,.45)}
.cercle-txt small{color:#6B6459}

/* ---- la bannière du décant offert ---- */
.bandeau{background:var(--noir);box-shadow:0 24px 50px rgba(23,21,18,.28),0 0 0 1px rgba(213,180,122,.3)}
.bandeau-t1{color:var(--or)}
.bandeau-t2{color:var(--creme)}

/* ---- les cartes : du velours, un fil d'or, le flacon qui flotte ---- */
.ventes{position:relative;z-index:2;background:linear-gradient(180deg,var(--nuit) 0%,var(--nuit-2) 100%);color:var(--creme)}
.card{
  background:linear-gradient(180deg,var(--velours-2) 0%,var(--velours) 100%);
  border:1px solid rgba(213,180,122,.22);border-radius:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
  transform:perspective(900px) rotateX(0) rotateY(0);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .6s var(--ease);
}
.card:hover{
  transform:perspective(900px) rotateX(3deg) rotateY(-4deg) translateY(-8px);
  border-color:rgba(213,180,122,.55);
  box-shadow:0 30px 60px rgba(0,0,0,.55),0 0 0 1px rgba(213,180,122,.2),inset 0 1px 0 rgba(255,255,255,.08);
}
.card-media{background:var(--velours);position:relative;overflow:hidden}
.card-media img{mix-blend-mode:lighten;transition:transform .7s var(--ease)}
.card:hover .card-media img{transform:scale(1.04) translateY(-4px)}
.card-glow{background:radial-gradient(ellipse at 50% 80%,rgba(213,180,122,.22),rgba(213,180,122,0) 60%)}
.card-brand{color:var(--or)}
.card-name{color:var(--creme)}
.card-now{color:var(--creme)}
.card-was{color:rgba(244,234,218,.55)}
.card-add{color:var(--creme);border-color:rgba(244,234,218,.3)}
.card-add:hover{border-color:var(--or);color:var(--or-clair)}
.voir-tout{color:var(--creme)}
.sec-tete .trait{background:rgba(213,180,122,.35)}
.cat-note{color:var(--text-secondary)}
.cat-note strong,.cat-note a{color:var(--creme)}
.flag-test{background:rgba(7,11,20,.75);border-color:rgba(213,180,122,.4);color:var(--creme)}
.flag-new{background:rgba(213,180,122,.9);border-color:rgba(255,246,225,.7);color:var(--encre)}
.flag-out{background:rgba(7,11,20,.85);color:var(--creme)}
/* dans un chapitre crème, les cartes restent de velours : le contraste fait le relief */
.combo-slot img{mix-blend-mode:lighten;background:var(--velours)}
.mc-cherche-res img,.mc-cherche-choix img,.ci img,.ck-line img,.fi-voisin-img img{mix-blend-mode:lighten;background:var(--velours)}
.fi-voisin-img,.mc-cherche-res img,.ci img{background:var(--velours)}

/* ---- les chapitres : titres en relief, panneaux ---- */
.sec{padding-block:clamp(3.6rem,8vw,6.5rem)}
.prix{background:linear-gradient(180deg,var(--creme) 0%,var(--creme-2) 100%)}
.avis,.livraison{position:relative;z-index:2;background:linear-gradient(180deg,var(--nuit-2) 0%,var(--nuit) 100%);color:var(--creme)}
.avis .display,.livraison .display{color:var(--creme)}
.av-fleche{background:rgba(23,33,56,.9);color:var(--creme);border-color:rgba(213,180,122,.35)}
.av-fleche:hover,.av-fleche:focus-visible{background:var(--velours-2);border-color:var(--or)}
.av-capture{background:var(--velours);box-shadow:0 26px 60px rgba(0,0,0,.5)}
.av-carte.est-au-centre .av-capture{box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(213,180,122,.6)}
.avis-social{color:var(--text-secondary)}
.avis-social strong{color:var(--or-clair)}
.pcard,.step{box-shadow:0 14px 34px rgba(23,21,18,.08);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.pcard:hover,.step:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(23,21,18,.14)}
.order{background:linear-gradient(180deg,var(--creme) 0%,var(--creme-2) 100%)}
.field input[type="search"],.field select,.field input[type="text"],.field input[type="tel"],.field textarea{background:#fff;color:var(--encre)}
.livraison .field input,.avis .field input{background:var(--velours);color:var(--creme)}

/* ---- le pied de page ---- */
.foot{position:relative;z-index:2;background:var(--noir);border-top:1px solid rgba(213,180,122,.2)}
.f-tag{color:var(--or)}

/* ---- le panier, le tiroir, la recherche, la barre du bas ---- */
.cart-back,.sheet-back{background:rgba(7,11,20,.7)}
.cart-panel{background:var(--velours);border-left:1px solid rgba(213,180,122,.25);color:var(--creme)}
.sheet-x{border-color:rgba(244,234,218,.3);color:var(--creme)}
.cart-total span:last-child{color:var(--or-clair)}
.mc-menu-in{background:var(--velours);border-top:1px solid rgba(213,180,122,.3);box-shadow:0 -20px 60px rgba(0,0,0,.5)}
.mc-menu-a{color:var(--creme)}
.mc-cherche{background:rgba(7,11,20,.7)}
.mc-cherche-in{background:var(--velours);color:var(--creme)}
.mc-cherche-barre input{color:var(--creme)}
.mc-cherche-x{border-color:rgba(244,234,218,.3);color:var(--creme)}
.mc-cherche-res a:hover,.mc-cherche-res a:focus-visible,.mc-cherche-choix:hover,.mc-cherche-choix:focus-visible{background:var(--velours-2)}
.ac-liste{background:var(--velours);border-color:rgba(213,180,122,.35);box-shadow:0 12px 38px rgba(0,0,0,.5);color:var(--creme)}
.ac-liste li:hover,.ac-liste li[aria-selected="true"]{background:var(--velours-2)}
.ac-liste li mark{color:var(--or-clair);background:none}
@media (max-width:900px){
  .mc-bas{background:rgba(7,11,20,.92);border-top:1px solid rgba(213,180,122,.25)}
  .mc-bas-a{color:var(--creme)}
  .mc-bas-a.is-on{color:var(--or-clair)}
  .mc-bas-n{background:var(--or);color:var(--encre)}
}

/* ---- les pages de catégorie et les fiches ---- */
.fiche,.categorie{color:var(--creme)}
.fi-fil,.fi-fil a{color:var(--text-secondary)}
.fi-fil-ici{color:var(--creme)}
.cat-nav-lien{background:var(--velours);border-color:rgba(213,180,122,.25);color:var(--creme)}
.cat-nav-lien:hover{border-color:var(--or)}
.fiche.categorie .sub{color:var(--text-secondary)}
.fiche.categorie .filters{background:var(--creme);border-radius:16px;padding:.9rem;margin-bottom:1.2rem;box-shadow:0 14px 34px rgba(0,0,0,.3)}
.grid-titre{color:var(--or)}
.fi-media{
  background:var(--velours);border-radius:20px;border:1px solid rgba(213,180,122,.28);
  box-shadow:0 30px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
  transform:perspective(1200px) rotateY(0);transition:transform .8s var(--ease);
}
.fi-media img{mix-blend-mode:lighten}
.fi-media:hover{transform:perspective(1200px) rotateY(-4deg) rotateX(2deg)}
.fi-h{color:var(--or)}
.fi-titre{color:var(--creme)}
.fi-now{color:var(--or-clair)}
.fi-was{color:rgba(244,234,218,.5)}
.fi-lot{color:var(--or)}
.fi-pourquoi{color:var(--text-secondary)}
.fi-pourquoi strong,.fi-pourquoi a{color:var(--creme)}
.fi-liste li{border-bottom-color:rgba(244,234,218,.12)}
.fi-voisin{background:var(--velours);border:1px solid rgba(213,180,122,.2);box-shadow:0 14px 30px rgba(0,0,0,.35);color:var(--creme)}
.sh-now{color:var(--creme)}
.f-all{color:var(--or-clair)}
.f-all::before{background:var(--or);box-shadow:0 0 0 3px rgba(213,180,122,.25)}
.th-ref{color:var(--or);border-color:rgba(213,180,122,.4)}
.th-etat{color:var(--text-secondary)}
.th-etat.est-fini{color:var(--emerald)}
.ck-pay{background:rgba(213,180,122,.12);border-color:rgba(213,180,122,.4)}

/* ---- le relief des pages écrites à la main (commande, merci, 404) ---- */
.page-plain main{position:relative;z-index:1}

/* ---- sans animation si le visiteur le demande ---- */
@media (prefers-reduced-motion:reduce){
  .vedette{transform:none;filter:none}
  .vd-visu::after{animation:none}
  .vd-img{-webkit-box-reflect:none}
  .card:hover,.cercle:hover .cercle-img,.fi-media:hover{transform:none}
}
/* sur un téléphone : pas d'inclinaison des cartes (deux touchers), le reflet reste */
@media (hover:none){
  .card:hover{transform:none;border-color:rgba(213,180,122,.22)}
  .cercle:hover .cercle-img{transform:none}
  .fi-media:hover{transform:none}
}
@media (max-width:760px){
  .vd-visu::after{width:100%}
}

/* ---- compléments du 07/10/2026, après le premier essai à l'écran ---- */
/* Les barres du bouton menu : entre 760 et 900 px, site.css les laisse
   sans taille (un span en ligne) ; ici elles existent partout où le
   bouton s'affiche. */
.mc-bar{display:block;width:20px;height:1.6px;background:var(--creme);border-radius:2px}
/* La pastille « testeur 100 % identique à l'original » sur les cartes :
   deux lignes au plus, plus discrète que sur la fiche. */
.card .flag-test{font-size:.5rem;letter-spacing:.08em;padding:.22rem .45rem;line-height:1.25;max-width:calc(100% - 1rem)}
/* Les chapitres de nuit laissent la place aux gouttes du chapitre crème
   qui les précède. */
.ventes,.avis,.livraison{padding-top:clamp(6.5rem,11vw,8.5rem)}
.foot{padding-top:7rem}
@media (max-width:760px){
  .combo::after,.prix::after,.steps::after,.order::after{bottom:-46px;height:48px}
  .combo::before,.prix::before,.steps::before,.order::before{bottom:-54px;height:48px}
  .ventes,.avis,.livraison{padding-top:5rem}
  .foot{padding-top:5.5rem}
  .coulee,.coulee-ombre{-webkit-mask-size:100% calc(100% - 48px),100% 48px;mask-size:100% calc(100% - 48px),100% 48px}
  .vedette{transform:perspective(900px) rotateX(calc(var(--bascule) * 10deg)) translateY(calc(var(--bascule) * 24px)) scale(calc(1 - var(--bascule) * .05))}
}
@media (prefers-reduced-motion:reduce){.coulee,.coulee-ombre{display:none}}

/* ---- la piste de la coulée (07/10/2026, demande du user : la crème doit
   mettre environ trois gestes de doigt à descendre). Le héros reste collé
   en haut pendant que cette piste vide défile derrière lui ; relief.js
   mesure sa hauteur et y étale la coulée et la bascule. Elle est sous le
   héros (non positionnée) : on ne la voit jamais. ---- */
:root{--piste:220vh}
@media (max-width:900px),(hover:none){:root{--piste:360vh}}
.piste{height:var(--piste);pointer-events:none}

/* un seul flacon dans le héros (07/10/2026) : pas de point de navigation
   quand il n y a qu une diapositive */
.vd-dots:has(:only-child){display:none}

/* ---- les phrases dans la creme (07/10/2026). Trois phrases posees dans la
   nappe .coulee, mais tenues en place dans l ecran par une translation
   inverse : la nappe (et son masque a gouttes) les decouvre en descendant,
   les lettres emergent de la creme. Chacune vit sur un tiers de la course
   (--d debut, --f fin, sur --coulee) : une phrase par geste de doigt. ---- */
.coulee-mots{position:absolute;left:0;right:0;top:22vh;padding:0 1.2rem;text-align:center;pointer-events:none;
  transform:translateY(calc(112vh - var(--coulee,0) * 112vh))}
.coulee-mot{position:absolute;left:1.2rem;right:1.2rem;top:0;margin:0 auto;max-width:24ch;
  font-size:clamp(1.45rem,5.2vw,2.7rem);line-height:1.18;letter-spacing:.01em;font-weight:500;
  color:#4A3B27;text-shadow:0 1px 0 rgba(255,255,255,.8),0 -1px 0 rgba(23,18,15,.08);
  opacity:calc(clamp(0,(var(--coulee,0) - var(--d)) / .06,1) * clamp(0,(var(--f) - var(--coulee,0)) / .06,1));
  transform:translateY(calc((1 - clamp(0,(var(--coulee,0) - var(--d)) / .14,1)) * 18px))}
.coulee-mot::before{content:"";display:block;width:38px;height:1px;margin:0 auto .9rem;background:var(--or-sombre)}
.coulee-mot:nth-child(1){--d:.30;--f:.54}
.coulee-mot:nth-child(2){--d:.54;--f:.78}
.coulee-mot:nth-child(3){--d:.78;--f:9}
@media (max-width:760px){.coulee-mots{top:24vh}.coulee-mot{max-width:20ch}}

/* ---- le heros descend jusqu a la barre du bas sur telephone (07/10/2026,
   capture iPhone du user : le reflet du flacon etait coupe et une bande vide
   restait au-dessus de la barre). Le heros prend toute la hauteur de l ecran
   moins la barre, la diapositive s etire, les engagements se posent en bas,
   et le reflet du flacon descend plus loin. ---- */
@media (max-width:900px){
  html.mc-bas-on .vedette{display:flex;flex-direction:column;
    min-height:calc(100vh - 66px - env(safe-area-inset-bottom,0px));
    min-height:calc(100svh - 66px - env(safe-area-inset-bottom,0px))}
  html.mc-bas-on .vd-piste{flex:1 1 auto;display:grid}
  html.mc-bas-on .vd-piste .vd-slide{align-self:stretch}
  html.mc-bas-on .vd-confiance{margin-top:auto}
  .vd-img{-webkit-box-reflect:below -5% linear-gradient(transparent 6%,rgba(0,0,0,.05) 30%,rgba(0,0,0,.42))}
}