/* ==========================================================================
   Heart & Nature — design system
   ========================================================================== */

:root{
  /* couleurs */
  --em-950:#05170F; --em-900:#08251A; --em-800:#0B3122; --em-700:#10432D;
  --em-600:#175A3C; --em-500:#1E7350; --em-100:#DDE9E1;
  --gold:#C9A24B; --gold-lt:#E3B45C; --gold-pale:#F2DCA9; --gold-deep:#96601A;
  --cream:#FBF8F1; --paper:#FDFBF6; --sand:#F3EADA; --sand-2:#E9DCC5; --line:#E3D6BE;
  --ink:#241C13; --ink-2:#57493A; --ink-3:#8A7B67;
  --terra:#A9502A; --red:#9C3327;

  /* typo */
  --serif:'Cormorant Garamond',Iowan Old Style,Georgia,serif;
  --sans:'Mulish',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --disp:'Cinzel',var(--serif);

  /* rythme */
  --pad:clamp(20px,5vw,84px);
  --gap:clamp(16px,2vw,28px);
  --sec:clamp(64px,9vh,128px);
  --maxw:1560px;

  /* formes */
  --r-s:10px; --r-m:16px; --r-l:22px; --r-xl:30px; --r-full:999px;
  --sh-s:0 2px 10px rgba(36,28,19,.05);
  --sh-m:0 10px 30px rgba(36,28,19,.09);
  --sh-l:0 26px 64px rgba(36,28,19,.16);
  --sh-xl:0 40px 100px rgba(5,23,15,.32);

  /* mouvement */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.22s var(--ease);
  --t:.42s var(--ease);
  --t-slow:.9s var(--ease-out);

  --nav-h:72px;
}

/* ------------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-synthesis-weight:none;
}
/* `clip` ne crée pas de conteneur de défilement — indispensable pour position:sticky */
@supports (overflow:clip){body{overflow-x:clip}}
body.lock{overflow:hidden}
img,svg,video{display:block;max-width:100%}
img{background:var(--sand)}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none;cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--gold-pale);color:var(--em-900)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
:where(button,a,input,select,textarea):focus:not(:focus-visible){outline:none}

.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:-100px;left:16px;z-index:200;background:var(--em-700);color:var(--cream);
  padding:12px 20px;border-radius:var(--r-full);font-size:13px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;transition:top var(--t)}
.skip:focus{top:16px}

/* -------------------------------------------------------------- typographie */
.h1{font-family:var(--serif);font-weight:600;font-size:min(clamp(52px,9.4vw,146px),20svh);
  line-height:.93;letter-spacing:-.025em}
.h1.sm{font-size:clamp(38px,6vw,88px);line-height:.98}
.h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4vw,62px);line-height:1.06;letter-spacing:-.018em}
.h3{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.4vw,36px);line-height:1.12;letter-spacing:-.012em}
.h4{font-family:var(--serif);font-weight:700;font-size:21px;line-height:1.2}
.kick{display:block;font-size:11.5px;font-weight:800;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:18px}
.kick.light{color:var(--gold-pale)}
.lead{font-family:var(--serif);font-size:clamp(19px,1.7vw,27px);line-height:1.45;color:var(--ink-2);
  margin-top:18px;max-width:62ch;text-wrap:pretty}
.body{font-size:clamp(16px,1.15vw,18.5px);line-height:1.78;color:var(--ink-2);text-wrap:pretty}
.body+.body{margin-top:1.2em}
.light .lead,.lead.light{color:#E4D9C1}
.light .h1,.light .h2,.light .h3,.h2.light,.h1.light{color:var(--cream)}
.muted{color:var(--ink-3)}
.tnum{font-variant-numeric:tabular-nums}

.word{display:flex;align-items:baseline;gap:.14em;font-family:var(--serif);font-weight:600;
  font-size:21px;letter-spacing:.03em;white-space:nowrap;color:var(--em-700)}
.word em{color:var(--gold);font-style:italic}
.word.light{color:var(--cream)}

/* ---------------------------------------------------------------- boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:13.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  padding:16px 30px;border-radius:var(--r-full);white-space:nowrap;
  transition:transform var(--t-fast),box-shadow var(--t),background var(--t),color var(--t),border-color var(--t);
  will-change:transform}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.gold{background:linear-gradient(135deg,var(--gold-lt),var(--gold));color:#2A1D05;
  box-shadow:0 10px 26px rgba(201,162,75,.34)}
.btn.gold:hover{box-shadow:0 16px 38px rgba(201,162,75,.44)}
.btn.dark{background:var(--em-700);color:var(--cream);box-shadow:0 10px 26px rgba(11,49,34,.22)}
.btn.dark:hover{background:var(--em-600);box-shadow:0 16px 38px rgba(11,49,34,.3)}
.btn.ghost{border:1px solid rgba(251,248,241,.45);color:var(--cream);backdrop-filter:blur(6px)}
.btn.ghost:hover{background:rgba(251,248,241,.12);border-color:var(--cream)}
.btn.line{border:1px solid var(--line);color:var(--ink)}
.btn.line:hover{border-color:var(--gold);background:rgba(201,162,75,.07)}
.btn.full{width:100%}
.btn.sm{padding:12px 22px;font-size:12px}
.btn[disabled],.btn.off{background:var(--sand-2);color:var(--ink-3);box-shadow:none;cursor:not-allowed}
.btn[disabled]:hover,.btn.off:hover{transform:none}
.btn .ico{font-size:15px;line-height:1}

.tlink{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);position:relative}
.tlink::after{content:'';position:absolute;left:0;right:100%;bottom:-4px;height:1.5px;
  background:currentColor;transition:right var(--t)}
.tlink:hover::after{right:0}
.tlink.light{color:var(--gold-pale)}
.tlink .ar{transition:transform var(--t)}
.tlink:hover .ar{transform:translateX(5px)}
.tlink svg{width:16px;height:16px;flex:0 0 16px}
/* Le glyphe WhatsApp est un tracé plein : il se colorie par `fill`, pas par `stroke`. */
.wa-inline svg{fill:currentColor;stroke:none}

/* -------------------------------------------------------------------- nav */
.nav{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;gap:clamp(12px,2vw,32px);
  padding:0 var(--pad);height:var(--nav-h);
  transition:background var(--t),box-shadow var(--t),backdrop-filter var(--t),height var(--t)}
.nav.solid{background:rgba(253,251,246,.88);backdrop-filter:saturate(1.4) blur(16px);
  box-shadow:0 1px 0 rgba(36,28,19,.08),0 10px 30px rgba(36,28,19,.05)}
.nav:not(.solid){color:var(--cream)}
.nav:not(.solid)::before{content:'';position:absolute;inset:0 0 -46px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,23,15,.72) 0%,rgba(5,23,15,.42) 55%,transparent 100%)}
.nav:not(.solid) .logo img{box-shadow:0 4px 16px rgba(5,23,15,.45)}
.nav:not(.solid) .word{color:var(--cream)}
.nav:not(.solid) .nav-a{color:#EFE7D6}
.nav:not(.solid) .iconbtn{color:var(--cream);border-color:rgba(251,248,241,.34)}
.nav:not(.solid) .lang button{color:#D6C9AE}
.nav:not(.solid) .lang button.on{color:var(--gold-pale);background:rgba(251,248,241,.14)}

.logo{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.logo img{width:38px;height:38px;border-radius:10px;object-fit:cover;box-shadow:var(--sh-s)}
.nav-links{display:flex;align-items:center;gap:clamp(14px,1.9vw,30px);margin-inline:auto}
.nav-a{position:relative;display:inline-flex;align-items:center;gap:6px;padding:8px 0;
  font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  transition:color var(--t-fast);white-space:nowrap}
.nav-a::after{content:'';position:absolute;left:0;right:100%;bottom:2px;height:1.5px;background:var(--gold);
  transition:right var(--t)}
.nav-a:hover::after,.nav-a.on::after{right:0}
.nav-a.on{color:var(--gold-deep)}
.nav:not(.solid) .nav-a.on{color:var(--gold-pale)}
.nav-a .car{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform var(--t);opacity:.65}
.nav-item.open .car{transform:rotate(-135deg) translateY(-2px)}

.nav-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.lang{display:flex;gap:2px;padding:3px;border-radius:var(--r-full)}
.lang button{font-size:11.5px;font-weight:800;letter-spacing:.1em;color:var(--ink-3);
  padding:6px 9px;border-radius:var(--r-full);transition:var(--t-fast)}
.lang button.on{color:var(--gold-deep);background:rgba(201,162,75,.16)}
.lang button:hover{color:var(--gold-deep)}

.iconbtn{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(36,28,19,.16);transition:var(--t-fast)}
.iconbtn:hover{border-color:var(--gold);background:rgba(201,162,75,.1);transform:translateY(-1px)}
.iconbtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.pill{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:var(--r-full);
  display:grid;place-items:center;background:var(--gold);color:var(--em-900);
  font-size:11px;font-weight:800;line-height:1;box-shadow:0 2px 8px rgba(201,162,75,.5)}
.pill.hide{display:none}
.iconbtn.act{border-color:var(--gold);color:var(--gold-deep)}

.burger{display:none;flex-direction:column;gap:5px;width:42px;height:42px;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid rgba(36,28,19,.16)}
.nav:not(.solid) .burger{border-color:rgba(251,248,241,.34)}
.burger i{display:block;width:18px;height:1.8px;background:currentColor;border-radius:2px;transition:var(--t)}
.burger.on i:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger.on i:nth-child(2){opacity:0;transform:scaleX(.4)}
.burger.on i:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

/* méga-menu */
.mega{position:fixed;top:var(--nav-h);left:0;right:0;z-index:58;background:var(--paper);
  border-bottom:1px solid var(--line);box-shadow:0 26px 50px rgba(36,28,19,.12);
  padding:30px var(--pad) 34px;animation:megaIn .3s var(--ease) both}
@keyframes megaIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.mega-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;max-width:var(--maxw);margin:0 auto}
.mega-card{display:block;border-radius:var(--r-m);overflow:hidden;background:var(--sand);position:relative;
  transition:transform var(--t),box-shadow var(--t)}
.mega-card:hover{transform:translateY(-5px);box-shadow:var(--sh-m)}
.mega-card .ph{aspect-ratio:4/3;overflow:hidden}
.mega-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.mega-card:hover img{transform:scale(1.07)}
.mega-card .tx{padding:12px 14px 15px;background:var(--cream)}
.mega-card b{display:block;font-family:var(--serif);font-size:20px;font-weight:700;color:var(--em-700);line-height:1.15}
.mega-card span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px;line-height:1.35}

/* menu mobile */
.mmenu{position:fixed;inset:var(--nav-h) 0 0;z-index:57;background:var(--paper);overflow-y:auto;
  padding:22px var(--pad) 60px;animation:mmIn .32s var(--ease) both;display:flex;flex-direction:column}
@keyframes mmIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mmenu>a{font-family:var(--serif);font-size:30px;font-weight:600;color:var(--em-700);
  padding:14px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.mmenu>a.on{color:var(--gold-deep)}
.mmenu>a .ar{font-size:18px;color:var(--ink-3)}
.mmenu h5{font-size:11px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-3);margin:26px 0 12px}
.mmenu-cats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mmenu-cat{display:flex;align-items:center;gap:11px;padding:9px;border-radius:var(--r-m);background:var(--cream);
  border:1px solid var(--line)}
.mmenu-cat img{width:48px;height:48px;border-radius:9px;object-fit:cover;flex:0 0 auto}
.mmenu-cat b{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--em-700)}
.mmenu-foot{margin-top:auto;padding-top:30px;display:flex;flex-wrap:wrap;gap:8px}

/* barre de progression */
.progress{position:fixed;top:0;left:0;right:0;height:2.5px;z-index:70;
  background:linear-gradient(90deg,var(--gold-lt),var(--gold),var(--gold-deep));
  transform:scaleX(0);transform-origin:0 50%;transition:transform .1s linear}

/* ------------------------------------------------------------------ layout */
.wrap{max-width:var(--maxw);margin:0 auto}
.sec{padding:var(--sec) var(--pad)}
.sec.tight{padding-top:clamp(38px,5vh,72px)}
.sec.bottom0{padding-bottom:0}
.sec.narrow{max-width:900px;margin:0 auto}
.sec.dark{background:var(--em-900);color:#DCD1B8}
.sec.cream{background:var(--cream)}
.sec.sand{background:var(--sand)}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(28px,4vh,52px)}
.head-tx{max-width:820px}
main{min-height:60vh}
.page{padding-top:var(--nav-h)}
.page.flush{padding-top:0}

/* révélation au scroll */
[data-rise]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
[data-rise].in{opacity:1;transform:none}

/* fil d'ariane */
.crumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:18px var(--pad) 4px}
.crumb a{transition:color var(--t-fast)}
.crumb a:hover{color:var(--gold-deep)}
.crumb i{opacity:.5;font-style:normal}
.crumb b{color:var(--ink);font-weight:700}

/* -------------------------------------------------------------------- héro */
.hero{position:relative;min-height:min(100svh,900px);display:flex;align-items:flex-end;
  background:var(--em-950);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.04)}to{transform:scale(1.16)}}
.hero-veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(5,23,15,.68) 0%,rgba(5,23,15,.28) 28%,rgba(5,23,15,.52) 56%,rgba(5,23,15,.86) 82%,rgba(5,23,15,.97) 100%)}
.hero-in{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:calc(var(--nav-h) + 40px) var(--pad) clamp(52px,9vh,116px)}
.hero-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(5,23,15,.7);
  border:1px solid rgba(226,180,92,.4);color:#F6E8C6;padding:10px 20px;border-radius:var(--r-full);
  font-size:11px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;backdrop-filter:blur(8px)}
.hero-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-lt);
  box-shadow:0 0 0 4px rgba(226,180,92,.22)}
.hero h1{color:var(--cream);margin-top:22px;text-shadow:0 4px 34px rgba(4,16,10,.5)}
.hero .lead{color:#E9DFC8;max-width:660px;text-shadow:0 2px 16px rgba(4,16,10,.6);
  font-size:min(clamp(19px,1.95vw,29px),4.4svh)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(26px,4vh,44px)}
.hero-meta{display:flex;gap:clamp(18px,3vw,46px);flex-wrap:wrap;margin-top:clamp(30px,5vh,58px);
  padding-top:24px;border-top:1px solid rgba(251,248,241,.18)}
.hero-meta div b{display:block;font-family:var(--serif);font-size:clamp(24px,2.4vw,34px);
  font-weight:700;color:var(--gold-pale);line-height:1}
.hero-meta div span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#B9AB8E;margin-top:7px}
.scrollhint{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;color:#B9AB8E;
  font-size:9.5px;font-weight:800;letter-spacing:.28em;text-transform:uppercase}
.scrollhint .rail{width:1px;height:38px;background:linear-gradient(180deg,transparent,var(--gold-pale));
  position:relative;overflow:hidden}
.scrollhint .rail::after{content:'';position:absolute;inset:auto 0 0;height:12px;background:var(--gold-lt);
  animation:drop 2s var(--ease) infinite}
@keyframes drop{0%{transform:translateY(-38px)}70%,100%{transform:translateY(38px)}}

/* ------------------------------------------- héro : le visuel pleine page
   L'image remplit l'écran bord à bord. Le fichier est en 4:3, l'écran en 16:9 :
   il faut donc couper. Le recadrage est décalé vers le BAS (88 %) pour que la
   perte porte sur le plafond et non sur la marchandise — coffrets, pots et
   étuis restent entiers. La barre du bas se pose sur le plateau de la table,
   seule zone du cadre où elle ne masque aucun produit. */
.hero-stage{display:block;min-height:100svh}
.hero-shot{position:absolute;inset:0;margin:0}
.hero-shot picture{display:contents}
.hero-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 88%}
/* Voile : sombre en haut pour la navigation, transparent sur la marchandise,
   remontant en bas pour que le titre et les boutons restent lisibles. */
.hero-stage .hero-veil{background:linear-gradient(180deg,
  rgba(5,23,15,.62) 0%,rgba(5,23,15,.14) 17%,rgba(5,23,15,0) 40%,
  rgba(5,23,15,.30) 66%,rgba(5,23,15,.78) 86%,rgba(5,23,15,.94) 100%)}
.hero-grid{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  height:100svh;display:flex;align-items:flex-end;
  padding:calc(var(--nav-h) + 16px) var(--pad) clamp(24px,4vh,52px)}
/* La barre : titre à gauche, boutons à droite, une seule rangée. */
.hero-grid .hero-in{padding:0;max-width:none;width:100%;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(18px,3vw,48px);flex-wrap:wrap}
.hero-stage .h1{margin-top:10px;font-size:min(clamp(34px,3.6vw,58px),9svh)}
.hero-stage .hero-cta{margin-top:0}

/* ------------------------------- ce que le héro ne porte plus : le résumé
   et les quatre chiffres, sur une seule rangée sous l'image. */
.hero-note{background:var(--em-950);color:#E9DFC8;
  padding:clamp(20px,3vh,34px) 0;border-top:1px solid rgba(251,248,241,.1)}
.hero-note .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,4vw,64px);flex-wrap:wrap}
.hero-note .lead{max-width:56ch;margin:0;color:#D9CEB4;
  font-size:clamp(15px,1.15vw,19px)}
.hero-note .hero-meta{margin:0;padding:0;border:0;flex-wrap:nowrap}

/* -------------------------------------------------- coffret : tour filmé
   Le coffret est ici le VRAI objet, filmé en rotation. Le geste horizontal
   commande le temps du film, donc l'angle. */
.tour-stage{position:relative;display:grid;place-items:center;
  padding:clamp(10px,2vw,26px) 0 clamp(18px,3vw,34px);
  cursor:grab;touch-action:pan-y;user-select:none}
.tour-stage.drag{cursor:grabbing}
.tour-stage:focus-visible{outline:2px solid var(--gold-lt);outline-offset:6px;border-radius:var(--r-m)}
.tour-stage video{width:min(100%,470px);aspect-ratio:1;object-fit:contain;
  background:none;border-radius:var(--r-m);pointer-events:none}
/* Les six bocaux sous le tour : c'est cette rangée qui porte les liens vers les
   fiches, une vidéo n'ayant pas de zones cliquables. */
.tour-pots{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1.4vw,18px);
  margin-top:clamp(18px,3vw,30px)}
.tour-pot{display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:14px 6px 12px;border-radius:var(--r-m);border:1px solid transparent;
  transition:var(--t-fast)}
.tour-pot:hover,.tour-pot:focus-visible{border-color:var(--sand-2);background:rgba(255,255,255,.6);
  transform:translateY(-4px)}
.tour-pot img{height:74px;width:auto;background:none;
  filter:drop-shadow(0 5px 9px rgba(60,40,16,.28));transition:var(--t-fast)}
.tour-pot:hover img{transform:scale(1.06)}
.tour-pot-n{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);text-align:center}
.tour-pot-p{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--em-700)}
@media (max-width:640px){
  .tour-pots{grid-template-columns:repeat(3,1fr)}
  .tour-pot img{height:58px}
}

/* ------------------------------------------ bandeau du visuel de gamme */
.band-gamme{background:var(--em-950);line-height:0}
.band-gamme img{display:block;width:100%;height:auto}

/* ---------------------------------------------------------------- bandeau */
.strip{background:var(--em-800);padding:14px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.strip-in{display:flex;width:max-content;animation:march 42s linear infinite}
.strip:hover .strip-in{animation-play-state:paused}
.strip span{display:inline-flex;align-items:center;gap:26px;padding-right:26px;
  font-size:12px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:#E4D9C1;white-space:nowrap}
.strip i{color:var(--gold-lt);font-style:normal;font-size:8px}
@keyframes march{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------ grille gammes */
.ranges{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap)}
.range{position:relative;display:block;grid-column:span 2;border-radius:var(--r-l);overflow:hidden;
  background:var(--em-800);isolation:isolate;transition:transform var(--t),box-shadow var(--t)}
.range:nth-child(1),.range:nth-child(4){grid-column:span 4}
.range:nth-child(2),.range:nth-child(3){grid-column:span 2}
.range:nth-child(5),.range:nth-child(6){grid-column:span 3}
.range:hover{transform:translateY(-6px);box-shadow:var(--sh-l)}
.range-ph{height:clamp(280px,34vw,440px)}
.range img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.range:hover img{transform:scale(1.08)}
.range-veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(5,23,15,0) 34%,rgba(5,23,15,.66) 74%,rgba(5,23,15,.94) 100%)}
.range-tx{position:absolute;inset:auto 0 0;padding:clamp(20px,2vw,30px)}
.range-tx h3{font-family:var(--serif);font-size:clamp(24px,2.5vw,38px);font-weight:700;color:var(--cream);line-height:1.05}
.range-tx p{font-family:var(--serif);font-style:italic;font-size:clamp(15px,1.2vw,18px);color:#D3C6A9;margin-top:5px}
.range-tx .go{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:11.5px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-pale);transition:gap var(--t)}
.range:hover .go{gap:14px}
.range-n{position:absolute;top:18px;right:20px;font-family:var(--serif);font-size:15px;
  color:rgba(242,220,169,.72);letter-spacing:.1em}

/* ------------------------------------------------------------ carte produit */
.grid{display:grid;gap:var(--gap)}
.grid.g4{grid-template-columns:repeat(auto-fill,minmax(clamp(230px,20vw,290px),1fr))}
.grid.g3{grid-template-columns:repeat(auto-fill,minmax(clamp(260px,24vw,340px),1fr))}
.grid.g2{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}

.card{position:relative;display:flex;flex-direction:column;height:100%;background:var(--cream);
  border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.card:hover{transform:translateY(-7px);box-shadow:var(--sh-l);border-color:var(--sand-2)}
.card-ph{position:relative;aspect-ratio:1/1;overflow:hidden;background:linear-gradient(165deg,#F5EDDD,#E9DCC5)}
.card-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.card:hover .card-ph img{transform:scale(1.06)}
/* La boucle se pose SUR la photo et n'apparaît qu'une fois qu'elle tourne
   vraiment. Tant qu'elle charge, on voit le packshot : jamais de trou noir,
   jamais de saut. Elle reste sous les surcouches (lien, pastilles, bouton). */
.card-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .7s var(--ease-out);pointer-events:none}
.card-loop.on{opacity:1}
.card-lk{position:absolute;inset:0;z-index:1}
.badge{position:absolute;top:13px;left:13px;z-index:2;background:var(--em-800);color:var(--cream);
  font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:7px 13px;
  border-radius:var(--r-full);box-shadow:0 4px 14px rgba(5,23,15,.28)}
.badge.soon{background:rgba(253,251,246,.94);color:var(--em-700);left:auto;right:13px;
  border:1px solid var(--line)}
/* Épuisé : volontairement sobre et non alarmant — le produit reste désirable,
   il est seulement momentanément indisponible. */
.badge.out{background:rgba(36,28,19,.82);color:var(--sand);left:auto;right:13px;
  border:1px solid rgba(251,248,241,.24);backdrop-filter:blur(6px)}
.heart{position:absolute;top:11px;right:11px;z-index:3;width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;background:rgba(253,251,246,.92);backdrop-filter:blur(6px);
  border:1px solid rgba(36,28,19,.09);transition:var(--t-fast);opacity:0;transform:translateY(-6px)}
.card:hover .heart,.heart.on,.heart:focus-visible{opacity:1;transform:none}
.heart svg{width:17px;height:17px;stroke:var(--ink-2);fill:none;stroke-width:1.7}
.heart:hover{transform:scale(1.1)}
.heart.on svg{fill:var(--terra);stroke:var(--terra)}
.card .badge.soon+.heart{top:52px}
.quick{position:absolute;left:50%;bottom:14px;z-index:3;transform:translateX(-50%) translateY(12px);
  opacity:0;transition:var(--t);background:rgba(5,23,15,.9);color:#F6E8C6;backdrop-filter:blur(8px);
  font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:10px 20px;
  border-radius:var(--r-full);white-space:nowrap}
.card:hover .quick,.quick:focus-visible{opacity:1;transform:translateX(-50%)}
.quick:hover{background:var(--em-700)}
.card-bd{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.card-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card-top h3{font-family:var(--serif);font-size:clamp(19px,1.5vw,23px);font-weight:700;color:var(--em-700);line-height:1.15}
.price{font-family:var(--serif);font-size:clamp(19px,1.5vw,23px);font-weight:700;color:var(--terra);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.price small{font-size:.62em;font-weight:600;color:var(--ink-3);margin-right:4px}
.card-sub{font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-top:7px}
.card-desc{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-top:10px;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{display:flex;align-items:center;gap:10px;margin-top:16px;position:relative;z-index:2}
.add{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:11.5px;
  font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:13px 18px;border-radius:var(--r-full);
  background:var(--em-700);color:var(--cream);transition:var(--t-fast)}
.add:hover{background:var(--em-600);transform:translateY(-2px)}
.add.off{background:transparent;color:var(--ink-2);border:1px solid var(--line)}
.add.off:hover{border-color:var(--gold);background:rgba(201,162,75,.08)}
.add.done{background:var(--gold);color:var(--em-900)}
/* Épuisé : le bouton reste lisible mais visiblement inactif, et ne réagit ni au
   survol ni au clavier — il porte `disabled`, pas seulement une classe. */
.add.out{background:transparent;color:var(--ink-3,#8A7F6E);border:1px dashed var(--line);
  cursor:not-allowed;opacity:.85}
.add.out:hover{background:transparent;border-color:var(--line)}

/* ------------------------------------------------------------------ filtres */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:30px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;padding:11px 18px;
  border-radius:var(--r-full);border:1px solid var(--line);color:var(--ink-2);transition:var(--t-fast);
  display:inline-flex;align-items:center;gap:8px;background:var(--paper)}
.chip:hover{border-color:var(--gold);color:var(--gold-deep)}
.chip.on{background:var(--em-700);border-color:var(--em-700);color:var(--cream)}
.chip .x{font-size:13px;opacity:.7}
.chip .n{opacity:.6;font-weight:700}
.tools-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.count{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.select{position:relative}
.select select{appearance:none;font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  padding:11px 40px 11px 18px;border-radius:var(--r-full);border:1px solid var(--line);background:var(--paper);
  color:var(--ink-2);cursor:pointer;transition:var(--t-fast)}
.select select:hover{border-color:var(--gold)}
.select::after{content:'';position:absolute;right:17px;top:50%;width:6px;height:6px;pointer-events:none;
  border-right:1.6px solid var(--ink-3);border-bottom:1.6px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg)}

.empty{text-align:center;padding:clamp(50px,9vh,110px) 20px;border:1px dashed var(--line);
  border-radius:var(--r-l);background:var(--cream)}
.empty .h3{color:var(--em-700)}
.empty p{margin:12px auto 26px;max-width:44ch;color:var(--ink-2)}

/* ------------------------------------------------------------ édito / bandes */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,5vw,80px);align-items:center}
.split.rev>*:first-child{order:2}
.split-ph{border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-l);background:var(--sand)}
.split-ph img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.split-ph.tall img{aspect-ratio:3/4}

.band{position:relative;overflow:hidden;min-height:clamp(440px,68vh,720px);display:flex;align-items:flex-end}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.band-veil{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(5,23,15,.62) 0%,rgba(5,23,15,.24) 46%,transparent 74%),
  linear-gradient(180deg,rgba(5,23,15,.44) 0%,rgba(5,23,15,.12) 26%,rgba(5,23,15,.74) 66%,rgba(5,23,15,.96) 100%)}
.band-tx{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 var(--pad) clamp(42px,7vh,86px)}
.band.short{min-height:clamp(300px,48vh,520px)}
.band.cover{min-height:clamp(360px,58vh,620px);align-items:flex-end}

/* ------------------------------------------------ film piloté au scroll */
.film{position:relative;background:var(--em-950)}
.film-stage{position:sticky;top:0;height:100svh;min-height:520px;overflow:hidden;
  display:flex;align-items:flex-end}
.film-layer{position:absolute;inset:0;opacity:0;will-change:opacity,transform;
  transform:translate3d(0,0,0) scale(1.14);backface-visibility:hidden}
.film-layer img,.film-video{width:100%;height:100%;object-fit:cover;display:block}
.film-video{position:absolute;inset:0;will-change:transform}
.film-veil{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(5,23,15,.72) 0%,rgba(5,23,15,.3) 44%,transparent 72%),
  linear-gradient(180deg,rgba(5,23,15,.5) 0%,rgba(5,23,15,.12) 24%,rgba(5,23,15,.72) 68%,rgba(5,23,15,.96) 100%)}
.film-in{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 var(--pad) clamp(30px,5vh,64px)}
.film-chapter{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:800;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold-pale);margin-bottom:14px}
.film-chapter b{font-family:var(--serif);font-size:19px;letter-spacing:.04em;font-weight:700}
.film-chapter i{display:block;width:34px;height:1px;background:rgba(242,220,169,.5);font-style:normal}
.film-cap{min-height:clamp(96px,15vh,150px);max-width:44ch}
.film-cap h3{font-family:var(--serif);font-size:clamp(28px,3.4vw,52px);font-weight:600;
  line-height:1.04;letter-spacing:-.018em;color:var(--cream);text-wrap:balance}
.film-cap p{font-size:clamp(15px,1.25vw,18px);line-height:1.6;color:#DCD1B8;margin-top:12px;text-wrap:pretty}
.film-cap>div{position:absolute;opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.film-cap>div.on{position:relative;opacity:1;transform:none;pointer-events:auto}

/* ------------------------------------------------- récit animé (par chapitre)
   Le titre se dévoile par le bas comme sous un cache, le paragraphe suit avec un
   léger décalage. `clip-path` est animable et n'entraîne aucun recalcul de mise
   en page, contrairement à une animation de hauteur. */
.film-cap>div h3{clip-path:inset(0 0 108% 0);transform:translateY(22px);
  transition:clip-path .72s var(--ease) .04s,transform .72s var(--ease) .04s}
.film-cap>div p{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease) .26s,transform .6s var(--ease) .26s}
.film-cap>div.on h3{clip-path:inset(0 0 -12% 0);transform:none}
.film-cap>div.on p{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .film-cap>div,.film-cap>div h3,.film-cap>div p{transition:none}
  .film-cap>div h3{clip-path:none}
}
.film-steps{display:flex;gap:8px;margin-top:clamp(18px,3vh,34px);overflow-x:auto;padding-bottom:4px;
  scrollbar-width:none;-ms-overflow-style:none}
.film-steps::-webkit-scrollbar{display:none}
.film-step{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:var(--r-full);
  border:1px solid rgba(251,248,241,.2);background:rgba(251,248,241,.06);color:#C6B99E;
  font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  transition:var(--t);backdrop-filter:blur(6px)}
.film-step:hover{border-color:var(--gold);color:var(--gold-pale)}
.film-step.on{background:rgba(226,180,92,.2);border-color:var(--gold-lt);color:var(--cream)}
.film-step em{font-family:var(--serif);font-style:normal;font-size:14px;color:var(--gold-pale)}
.film-bar{position:absolute;left:var(--pad);right:var(--pad);bottom:14px;height:2px;
  background:rgba(251,248,241,.18);border-radius:2px;overflow:hidden}
.film-bar>i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-lt),var(--gold-pale))}
.film-hint{position:absolute;right:var(--pad);top:calc(var(--nav-h) + 22px);display:flex;align-items:center;
  gap:9px;font-size:10px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:#B9AB8E;
  opacity:0;transition:opacity .5s}
.film.armed .film-hint{opacity:1}
.film-hint span{width:22px;height:1px;background:currentColor;position:relative;overflow:hidden}
.film-hint span::after{content:'';position:absolute;inset:0;background:var(--gold-lt);
  animation:filmSwipe 2.2s var(--ease) infinite}
@keyframes filmSwipe{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* --------------------------------------------------- film à deux colonnes
   Le récit entre par la GAUCHE, la fiche du lieu par la DROITE, l'image reste
   au centre. Les deux colonnes bougent en sens inverse : c'est ce croisement
   qui rend le défilement lisible — on voit que quelque chose se passe des deux
   côtés, pas seulement un texte qui monte. */
.film-s .film-in{display:grid;align-items:end;
  grid-template-columns:minmax(0,1fr) clamp(230px,22vw,330px);
  gap:clamp(20px,3vw,54px)}
.film-s .film-cap{grid-column:1;max-width:38ch}
.film-s .film-side{grid-column:2;position:relative;min-height:clamp(150px,22vh,230px)}
.film-s .film-steps{grid-column:1 / -1}

/* Les deux colonnes utilisent le même mécanisme que les légendes : une seule
   fiche est « on », les autres sont retirées du flux. */
.film-side>div{position:absolute;inset:auto 0 0 0;opacity:0;pointer-events:none;
  transform:translateX(38px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.film-side>div.on{position:relative;opacity:1;transform:none;pointer-events:auto}
/* Le récit, lui, arrive par la gauche. */
.film-s .film-cap>div{transform:translateX(-32px) translateY(10px)}
.film-s .film-cap>div.on{transform:none}

.film-card{background:rgba(5,23,15,.52);border:1px solid rgba(226,180,92,.34);
  border-radius:var(--r-m);padding:clamp(15px,1.5vw,21px);backdrop-filter:blur(9px)}
.film-card h4{font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);font-weight:600;
  color:var(--gold-pale);margin-bottom:11px;letter-spacing:.01em}
.film-card ul{display:grid;gap:9px}
.film-card li{display:grid;gap:2px;font-size:13.5px;line-height:1.5;color:#D6CBB4}
.film-card li b{font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-family:var(--sans)}
.film-card li.wide{border-top:1px solid rgba(226,180,92,.22);padding-top:9px;font-style:italic;
  color:#C6B99E}
@media (prefers-reduced-motion:reduce){
  .film-side>div,.film-s .film-cap>div{transition:none;transform:none}
}

/* ------------------------------------------------------- film vertical (9:16)
   Sur ordinateur, un 9:16 en plein cadre serait recadré à l'extrême : on le
   présente en panneau portrait à droite, et le récit occupe la colonne gauche.
   Sur téléphone (plus bas) il reprend tout l'écran, où le format tombe juste. */
.film-v .film-stage{align-items:center}
.film-v .film-video{position:absolute;inset:auto;top:50%;
  right:max(var(--pad),calc((100vw - var(--maxw))/2));
  transform:translateY(-50%);height:min(82svh,620px);width:auto;aspect-ratio:9/16;
  object-fit:cover;border-radius:14px;box-shadow:0 34px 90px rgba(0,0,0,.6)}
/* Le fond est déjà très sombre autour du panneau : un voile lourd serait inutile
   et écraserait l'image. On garde juste ce qu'il faut à gauche pour le texte. */
.film-v .film-veil{background:linear-gradient(90deg,rgba(5,23,15,.62) 0%,
  rgba(5,23,15,.24) 38%,transparent 58%)}
.film-v .film-in{padding-bottom:0}
.film-v .film-chapter,.film-v .film-cap,.film-v .film-steps{max-width:min(44ch,46%)}
.film-v .film-cap h3{font-size:clamp(26px,2.9vw,44px)}

/* Repli sans seek : le serveur ne répond pas aux requêtes Range, le navigateur
   refuse tout saut dans la vidéo. La section ne fait plus qu'un écran, le film se
   joue seul en boucle et l'invitation à défiler n'a plus lieu d'être. */
.film-noseek{height:100vh !important}
.film-noseek .film-hint{display:none}
.film-noseek .film-stage{position:relative;top:0}
/* La vidéo ne charge pas du tout : le poster reste, on retire les repères de
   progression qui ne veulent plus rien dire. */
.film-fallback .film-hint,.film-fallback .film-bar,.film-fallback .film-steps{display:none}
.film-fallback{height:100vh !important}

@media (max-width:860px){
  .film-cap{min-height:112px}
  .film-hint{display:none}
  .film-in{padding-bottom:22px}
  /* Sur une fiche produit, la barre d'achat est fixée en bas sous ce même
     point de rupture : on dégage les pastilles de chapitre et la jauge. */
  .film-p .film-in{padding-bottom:88px}
  .film-p .film-bar{bottom:80px}
  /* En portrait, un 16:9 recadré en `cover` perd l'action sur les bords :
     on montre le plan entier en haut et on pose la copie dans la bande basse. */
  .film.has-video .film-video{inset:7% 0 auto 0;height:46%;object-fit:contain}
  .film.has-video .film-veil{background:
    linear-gradient(180deg,rgba(5,23,15,.35) 0%,rgba(5,23,15,0) 18%,rgba(5,23,15,0) 46%,
                    rgba(5,23,15,.72) 60%,rgba(5,23,15,.97) 74%)}
  .film.has-video .film-stage{background:var(--em-950)}

  /* Le film vertical, lui, tombe juste sur un écran de téléphone : il reprend
     tout le cadre en `cover`, sans bandes, et le récit repasse en surimpression
     dans la bande basse comme sur les autres fiches. */
  .film-v.has-video .film-video{position:absolute;inset:0;width:100%;height:100%;
    transform:none;aspect-ratio:auto;object-fit:cover;border-radius:0;box-shadow:none}
  .film-v .film-stage{align-items:flex-end}
  .film-v .film-veil{background:
    linear-gradient(180deg,rgba(5,23,15,.5) 0%,rgba(5,23,15,.08) 26%,
                    rgba(5,23,15,.72) 66%,rgba(5,23,15,.97) 100%)}
  .film-v .film-chapter,.film-v .film-cap,.film-v .film-steps{max-width:none}
  .film-v .film-in{padding-bottom:88px}

  /* Les boutons flottants recouvrent les pastilles de chapitre pendant que le
     film occupe l'écran : on les efface, ils reviennent dès qu'il se libère. */
  body.film-armed .wafab,body.film-armed .totop{
    opacity:0;pointer-events:none;transform:translateY(12px)}

  /* Deux colonnes côte à côte n'ont pas de sens sur un téléphone : on empile,
     récit puis fiche, et les deux entrent par le bas. */
  .film-s .film-in{grid-template-columns:1fr;gap:14px}
  .film-s .film-cap{max-width:none}
  .film-s .film-side{grid-column:1;min-height:96px}
  .film-s .film-cap>div{transform:translateY(14px)}
  .film-side>div{transform:translateY(18px)}
  .film-card{padding:13px 15px}
  .film-card ul{grid-template-columns:1fr;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .film{height:auto!important}
  .film-stage{position:relative;height:auto;min-height:0;padding-top:56vh}
  .film-layer{opacity:0;transform:none}
  .film-layer:first-child{opacity:1}
  .film-cap>div{position:relative;opacity:1;transform:none;margin-bottom:22px}
  .film-cap{min-height:0}
  .film-bar,.film-hint{display:none}
}

/* étapes savoir-faire */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.step{padding:22px;border-radius:var(--r-m);border:1px solid var(--line);background:var(--cream);
  transition:var(--t);position:relative;overflow:hidden}
.step:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:var(--sh-m)}
.step-n{font-family:var(--serif);font-size:36px;font-weight:700;color:var(--gold);line-height:1;opacity:.55}
.step h4{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--em-700);margin-top:10px}
.step p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-top:7px}
.step.dark{background:rgba(251,248,241,.05);border-color:rgba(251,248,241,.16)}
.step.dark h4{color:var(--cream)}
.step.dark p{color:#C6B99E}

/* valeurs / facts */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--gap)}
.fact{padding:26px 24px;border-radius:var(--r-m);background:var(--cream);border:1px solid var(--line)}
.fact b{display:block;font-family:var(--serif);font-size:26px;font-weight:700;color:var(--em-700)}
.fact p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin-top:8px}
.facts.on-dark .fact{background:rgba(251,248,241,.055);border-color:rgba(251,248,241,.14)}
.facts.on-dark .fact b{color:var(--gold-pale)}
.facts.on-dark .fact p{color:#C6B99E}

/* citation */
.quote{max-width:920px;margin:0 auto;text-align:center}
.quote p{font-family:var(--serif);font-size:clamp(24px,3vw,42px);line-height:1.28;color:var(--em-700);
  font-style:italic;text-wrap:balance}
.quote cite{display:block;margin-top:22px;font-family:var(--sans);font-style:normal;font-size:11.5px;
  font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-deep)}
.sec.dark .quote p{color:var(--cream)}
.sec.dark .quote cite{color:var(--gold-pale)}

/* galerie lookbook */
.look{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.look a{position:relative;display:block;border-radius:var(--r-m);overflow:hidden;background:var(--sand)}
.look img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.look a:hover img{transform:scale(1.06)}
.look .cap{position:absolute;inset:auto 0 0;padding:20px 22px;color:var(--cream);
  background:linear-gradient(180deg,transparent,rgba(5,23,15,.86));
  font-family:var(--serif);font-size:20px;font-weight:600}
.look .l1{grid-column:span 7;aspect-ratio:16/10}
.look .l2{grid-column:span 5;aspect-ratio:4/3.4}
.look .l3{grid-column:span 4;aspect-ratio:1/1}
.look .l4{grid-column:span 4;aspect-ratio:1/1}
.look .l5{grid-column:span 4;aspect-ratio:1/1}

/* ----------------------------------------------------------- fiche produit */
.pd{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(26px,4.4vw,72px);align-items:start;
  padding:20px var(--pad) clamp(40px,6vh,76px);max-width:var(--maxw);margin:0 auto}
.pd-gal{position:sticky;top:calc(var(--nav-h) + 18px)}
.pd-main{position:relative;aspect-ratio:4/3;border-radius:var(--r-l);overflow:hidden;
  background:linear-gradient(165deg,#F5EDDD,#E9DCC5);box-shadow:var(--sh-l);cursor:zoom-in}
.pd-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  animation:fadeIn .5s var(--ease) both}
@keyframes fadeIn{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}
.pd-nav{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;padding:0 14px 14px;
  pointer-events:none}
.pd-nav button{pointer-events:auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(253,251,246,.9);backdrop-filter:blur(6px);box-shadow:var(--sh-s);transition:var(--t-fast);
  font-size:16px;color:var(--em-700)}
.pd-nav button:hover{background:var(--cream);transform:scale(1.08)}
.pd-count{position:absolute;top:14px;right:14px;background:rgba(5,23,15,.72);color:#F0E4C6;
  font-size:11px;font-weight:800;letter-spacing:.1em;padding:6px 12px;border-radius:var(--r-full);
  backdrop-filter:blur(6px)}
.pd-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.thumb{width:76px;height:76px;border-radius:var(--r-s);overflow:hidden;border:1.5px solid var(--line);
  background:var(--sand);transition:var(--t-fast)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb:hover{border-color:var(--gold)}
.thumb.on{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.22)}

.pd-title{font-family:var(--serif);font-weight:600;font-size:clamp(32px,3.9vw,58px);line-height:1.02;
  letter-spacing:-.02em;color:var(--em-700);margin-top:6px}
.pd-price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:16px;padding-bottom:20px;
  border-bottom:1px solid var(--line)}
.pd-price .price{font-size:clamp(28px,3.2vw,44px)}
.pd-fmt{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.stock{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--em-600)}
.stock .dot{width:7px;height:7px;border-radius:50%;background:var(--em-500);box-shadow:0 0 0 3px rgba(30,115,80,.18)}
.stock.soon{color:var(--gold-deep)}
.stock.soon .dot{background:var(--gold);box-shadow:0 0 0 3px rgba(201,162,75,.2)}
.stock.out{color:var(--terra,#9B5B3C)}
.stock.out .dot{background:var(--terra,#9B5B3C);box-shadow:0 0 0 3px rgba(155,91,60,.18)}
/* Le format épuisé reste sélectionnable — on veut que le client puisse le
   consulter et lire son prix — mais il s'annonce clairement comme indisponible. */
.opt.out{border-style:dashed;color:var(--ink-3,#8A7F6E)}
.opt.out small{opacity:.9}
.opt.out.on{border-style:solid;border-color:var(--terra,#9B5B3C);color:var(--terra,#9B5B3C)}
.note.out{border-left:2px solid var(--terra,#9B5B3C);padding-left:14px}
.pd-desc{font-size:clamp(16px,1.2vw,18.5px);line-height:1.72;color:var(--ink-2);margin:20px 0 24px;text-wrap:pretty}

.opts{margin-bottom:22px}
.opts h5{font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:11px}
.opt-row{display:flex;gap:9px;flex-wrap:wrap}
.opt{padding:12px 20px;border-radius:var(--r-full);border:1.5px solid var(--line);font-size:13px;
  font-weight:800;letter-spacing:.06em;color:var(--ink-2);transition:var(--t-fast);position:relative;
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-width:92px}
.opt small{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.opt:hover{border-color:var(--gold)}
.opt.on{border-color:var(--em-700);background:var(--em-700);color:var(--cream)}
.opt.on small{color:var(--gold-pale)}

.buy{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.stepper{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-full);
  overflow:hidden;background:var(--paper)}
.stepper button{width:44px;height:100%;min-height:52px;font-size:18px;color:var(--ink-2);transition:var(--t-fast)}
.stepper button:hover{background:var(--sand);color:var(--em-700)}
.stepper span{min-width:34px;text-align:center;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.buy .btn{flex:1;min-width:200px;min-height:52px}
.buy .iconbtn{width:52px;height:52px;border-radius:50%;flex:0 0 auto}

.note{margin-top:14px;font-size:14px;line-height:1.55;color:var(--gold-deep);background:rgba(201,162,75,.1);
  border:1px solid rgba(201,162,75,.34);border-radius:var(--r-m);padding:13px 16px}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.tag{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--em-700);
  background:var(--sand);padding:8px 14px;border-radius:var(--r-full);border:1px solid var(--line)}
.assur{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:22px}
.assur div{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;color:var(--ink-2);
  padding:12px 14px;border-radius:var(--r-m);background:var(--cream);border:1px solid var(--line)}
.assur svg{width:17px;height:17px;stroke:var(--em-600);fill:none;stroke-width:1.6;flex:0 0 auto}

/* accordéon */
.acc{margin-top:26px;border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-t{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;
  padding:18px 0;font-size:12.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--em-700);transition:color var(--t-fast)}
.acc-t:hover{color:var(--gold-deep)}
.acc-t .pm{position:relative;width:14px;height:14px;flex:0 0 auto}
.acc-t .pm::before,.acc-t .pm::after{content:'';position:absolute;background:currentColor;border-radius:2px;
  transition:transform var(--t)}
.acc-t .pm::before{inset:6px 0 auto;height:1.7px}
.acc-t .pm::after{inset:0 6px auto;width:1.7px;height:14px}
.acc-item.open .pm::after{transform:rotate(90deg) scaleX(0)}
.acc-bd{overflow:hidden;max-height:0;transition:max-height .45s var(--ease)}
.acc-item.open .acc-bd{max-height:1400px}
.acc-in{padding:2px 0 22px;font-size:15.5px;line-height:1.72;color:var(--ink-2)}

.spec{width:100%;font-size:14.5px}
.spec tr{border-bottom:1px solid var(--line)}
.spec tr:last-child{border-bottom:0}
.spec td{padding:11px 0;vertical-align:top}
.spec td:first-child{color:var(--ink-3);font-weight:700;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;width:42%;padding-right:18px}
.spec td:last-child{color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.incl{display:grid;gap:9px}
.incl li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.incl li::before{content:'◆';color:var(--gold);font-size:9px;line-height:1.9;flex:0 0 auto}

/* barre mobile d'achat */
.buybar{position:fixed;inset:auto 0 0;z-index:55;display:none;align-items:center;gap:12px;
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));background:rgba(253,251,246,.96);
  backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(36,28,19,.1)}
.buybar .mid{flex:1;min-width:0}
.buybar b{display:block;font-family:var(--serif);font-size:17px;color:var(--em-700);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar span{font-size:13px;color:var(--terra);font-weight:800}

/* ---------------------------------------------------------------- panneaux */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(5,23,15,.52);backdrop-filter:blur(4px);
  animation:fade .3s var(--ease) both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.scrim.out{animation:fadeOut .25s var(--ease) both}
@keyframes fadeOut{to{opacity:0}}

.drawer{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(440px,100vw);background:var(--paper);
  display:flex;flex-direction:column;box-shadow:var(--sh-xl);animation:slideIn .42s var(--ease-out) both}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:none}}
.drawer.out{animation:slideOut .3s var(--ease) both}
@keyframes slideOut{to{transform:translateX(100%)}}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 22px;
  border-bottom:1px solid var(--line);flex:0 0 auto}
.drawer-top h3{font-family:var(--serif);font-size:26px;font-weight:700;color:var(--em-700)}
.xbtn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:17px;
  color:var(--ink-2);transition:var(--t-fast)}
.xbtn:hover{background:var(--sand);color:var(--em-700);transform:rotate(90deg)}
.drawer-bd{flex:1;overflow-y:auto;padding:18px 22px;overscroll-behavior:contain}
.drawer-ft{flex:0 0 auto;padding:18px 22px calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px;background:var(--cream)}

.line{display:grid;grid-template-columns:74px 1fr auto;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line-ph{width:74px;height:74px;border-radius:var(--r-s);overflow:hidden;background:var(--sand)}
.line-ph img{width:100%;height:100%;object-fit:cover}
.line-t{font-family:var(--serif);font-size:17.5px;font-weight:700;color:var(--em-700);line-height:1.2;
  display:block;transition:color var(--t-fast)}
a.line-t:hover{color:var(--gold-deep)}
.line-s{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.line-r{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:8px}
.line-p{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--terra);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.rm{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  transition:color var(--t-fast)}
.rm:hover{color:var(--red)}
.qty{display:flex;align-items:center;gap:10px;margin-top:9px}
.qty button{width:27px;height:27px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  font-size:14px;line-height:1;transition:var(--t-fast)}
.qty button:hover{border-color:var(--gold);background:var(--sand)}
.qty span{font-size:14px;font-weight:800;min-width:18px;text-align:center;font-variant-numeric:tabular-nums}

.freebar{display:flex;flex-direction:column;gap:7px}
.freebar b{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-deep)}
.freebar .track{height:6px;border-radius:var(--r-full);background:var(--sand-2);overflow:hidden}
.freebar .track>i{display:block;height:100%;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--gold-lt),var(--gold));transition:width .6s var(--ease-out)}
.tot{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tot span{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.tot strong{font-family:var(--serif);font-size:30px;color:var(--em-700);font-variant-numeric:tabular-nums}
.tot.sm strong{font-size:19px}
.tot.sm span{font-size:11px}
.ghostlink{font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  text-align:center;padding:6px;transition:color var(--t-fast)}
.ghostlink:hover{color:var(--em-700)}

.promo-row{display:flex;gap:8px}
.promo-row input{flex:1;min-width:0}
.giftbox{border:1px solid var(--line);border-radius:var(--r-m);padding:13px 15px;background:var(--paper)}
.switch{display:flex;align-items:center;gap:11px;cursor:pointer;font-size:13px;font-weight:700;color:var(--ink)}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch .tr{width:38px;height:21px;border-radius:var(--r-full);background:var(--sand-2);position:relative;
  transition:var(--t-fast);flex:0 0 auto}
.switch .tr::after{content:'';position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;
  background:var(--paper);box-shadow:var(--sh-s);transition:var(--t-fast)}
.switch input:checked+.tr{background:var(--em-600)}
.switch input:checked+.tr::after{transform:translateX(17px)}
.switch input:focus-visible+.tr{outline:2px solid var(--gold);outline-offset:2px}

/* ------------------------------------------------------------------ modale */
.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;pointer-events:none}
.modal-in{position:relative;width:min(940px,100%);max-height:min(86vh,820px);overflow-y:auto;
  background:var(--paper);border-radius:var(--r-xl);box-shadow:var(--sh-xl);pointer-events:auto;
  animation:pop .38s var(--ease-out) both;overscroll-behavior:contain}
@keyframes pop{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.modal-x{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%;
  background:rgba(253,251,246,.94);backdrop-filter:blur(6px);display:grid;place-items:center;
  box-shadow:var(--sh-s);font-size:17px;transition:var(--t-fast)}
.modal-x:hover{transform:rotate(90deg)}
.qv{display:grid;grid-template-columns:1fr 1fr}
.qv-ph{background:linear-gradient(165deg,#F5EDDD,#E9DCC5)}
.qv-ph img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.qv-bd{padding:clamp(24px,3vw,40px)}

.lightbox{position:fixed;inset:0;z-index:95;background:rgba(5,23,15,.94);display:grid;place-items:center;
  padding:26px;animation:fade .3s var(--ease) both}
.lightbox img{max-width:100%;max-height:88vh;object-fit:contain;border-radius:var(--r-m);
  box-shadow:var(--sh-xl);animation:pop .4s var(--ease-out) both}
.lightbox .modal-x{background:rgba(251,248,241,.14);color:var(--cream)}
.lb-nav{position:absolute;inset:50% 20px auto;transform:translateY(-50%);display:flex;
  justify-content:space-between;pointer-events:none}
.lb-nav button{pointer-events:auto;width:50px;height:50px;border-radius:50%;background:rgba(251,248,241,.14);
  color:var(--cream);display:grid;place-items:center;font-size:20px;transition:var(--t-fast);backdrop-filter:blur(6px)}
.lb-nav button:hover{background:rgba(251,248,241,.26);transform:scale(1.08)}

/* ---------------------------------------------------------------- recherche */
.search-panel{position:fixed;inset:0;z-index:92;display:flex;flex-direction:column;
  background:rgba(253,251,246,.98);backdrop-filter:blur(20px);animation:fade .26s var(--ease) both}
.search-top{display:flex;align-items:center;gap:14px;padding:20px var(--pad);border-bottom:1px solid var(--line)}
.search-top input{flex:1;font-family:var(--serif);font-size:clamp(24px,3.4vw,44px);font-weight:600;
  border:0;background:none;color:var(--em-700);padding:8px 0}
.search-top input::placeholder{color:var(--ink-3);opacity:.5}
.search-top input:focus{outline:none}
.search-bd{flex:1;overflow-y:auto;padding:26px var(--pad) 60px}
.search-hint{font-size:13px;color:var(--ink-3);letter-spacing:.04em}
.sugg{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.sres{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:22px}
.sres a{display:flex;gap:14px;align-items:center;padding:11px;border-radius:var(--r-m);
  border:1px solid var(--line);background:var(--cream);transition:var(--t-fast)}
.sres a:hover{border-color:var(--gold);transform:translateX(4px)}
.sres img{width:60px;height:60px;border-radius:var(--r-s);object-fit:cover;flex:0 0 auto}
.sres b{display:block;font-family:var(--serif);font-size:18px;font-weight:700;color:var(--em-700);line-height:1.15}
.sres span{display:block;font-size:12px;color:var(--ink-3);margin-top:3px}
.sres .p{margin-left:auto;font-family:var(--serif);font-size:17px;font-weight:700;color:var(--terra);
  white-space:nowrap;padding-left:8px}

/* --------------------------------------------------------------- formulaires */
.form{display:grid;gap:14px;margin-top:26px}
.form.two{grid-template-columns:1fr 1fr}
.form .span{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field label{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.field label .req{color:var(--terra)}
input[type=text],input[type=email],input[type=tel],input[type=search],textarea,select.inp{
  font-size:15.5px;padding:14px 16px;border:1.5px solid var(--line);border-radius:var(--r-m);
  background:var(--paper);color:var(--ink);width:100%;transition:var(--t-fast)}
textarea{resize:vertical;min-height:120px;line-height:1.6}
input:hover,textarea:hover,select.inp:hover{border-color:var(--sand-2)}
input:focus,textarea:focus,select.inp:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,162,75,.16)}
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:.62}
.field.bad input,.field.bad textarea{border-color:var(--red);background:rgba(156,51,39,.03)}
.err{font-size:12px;color:var(--red);font-weight:700}
.radio-row{display:grid;gap:10px}
.radio{display:flex;align-items:center;gap:13px;padding:15px 17px;border:1.5px solid var(--line);
  border-radius:var(--r-m);cursor:pointer;transition:var(--t-fast);background:var(--paper)}
.radio:hover{border-color:var(--gold)}
.radio input{position:absolute;opacity:0}
.radio .dot{width:19px;height:19px;border-radius:50%;border:1.8px solid var(--line);flex:0 0 auto;
  display:grid;place-items:center;transition:var(--t-fast)}
.radio .dot::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--em-600);
  transform:scale(0);transition:var(--t-fast)}
.radio input:checked~.dot{border-color:var(--em-600)}
.radio input:checked~.dot::after{transform:scale(1)}
.radio:has(input:checked){border-color:var(--em-600);background:rgba(30,115,80,.045)}
.radio .tx{flex:1}
.radio b{display:block;font-size:14.5px;font-weight:800;color:var(--ink)}
.radio small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.radio .p{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--terra)}

.ok{margin-top:24px;padding:26px 28px;border-radius:var(--r-l);background:rgba(30,115,80,.07);
  border:1px solid rgba(30,115,80,.3);display:flex;flex-direction:column;gap:8px}
.ok strong{font-family:var(--serif);font-size:28px;color:var(--em-700)}
.ok span{font-size:15.5px;color:var(--ink-2);line-height:1.6}

/* étapes commande */
.stepbar{display:flex;align-items:center;gap:10px;margin-bottom:28px;flex-wrap:wrap}
.stepbar div{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}
.stepbar div.on{color:var(--em-700)}
.stepbar div.done{color:var(--gold-deep)}
.stepbar b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;
  border:1.5px solid currentColor}
.stepbar div.on b{background:var(--em-700);color:var(--cream);border-color:var(--em-700)}
.stepbar div.done b{background:var(--gold);color:var(--em-900);border-color:var(--gold)}
.stepbar .sep{flex:1;height:1px;background:var(--line);min-width:16px}
.recap{border:1px solid var(--line);border-radius:var(--r-l);padding:22px;background:var(--cream);
  position:sticky;top:calc(var(--nav-h) + 18px)}
.recap h4{font-family:var(--serif);font-size:22px;color:var(--em-700);margin-bottom:14px}
.recap .row{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink-2);padding:6px 0}
.recap .row.tot{border-top:1px solid var(--line);margin-top:10px;padding-top:14px}
.co-grid{display:grid;grid-template-columns:1.4fr .85fr;gap:clamp(24px,4vw,56px);align-items:start}

/* ---------------------------------------------------------------- newsletter */
.nl{background:radial-gradient(120% 130% at 78% 0%,var(--em-600) 0%,var(--em-800) 52%,var(--em-950) 100%);
  color:#DCD1B8;padding:clamp(52px,8vh,104px) var(--pad);position:relative;overflow:hidden}
.nl::after{content:'';position:absolute;inset:auto -10% -60% 60%;height:120%;
  background:radial-gradient(circle,rgba(226,180,92,.14),transparent 62%);pointer-events:none}
.nl-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(26px,4vw,64px);align-items:center;position:relative}
.nl-form{display:flex;gap:10px;flex-wrap:wrap}
.nl-form input{flex:1;min-width:220px;background:rgba(251,248,241,.09);border-color:rgba(251,248,241,.22);
  color:var(--cream)}
.nl-form input::placeholder{color:rgba(232,222,200,.55)}
.nl-form input:focus{border-color:var(--gold-lt);box-shadow:0 0 0 3px rgba(226,180,92,.2)}
.nl small{display:block;margin-top:12px;font-size:12px;color:#A9997C}

/* -------------------------------------------------------------------- pied */
.foot{background:var(--em-950);color:#C6B99E;padding:clamp(48px,7vh,88px) var(--pad) 0}
.foot-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.15fr 2fr;
  gap:clamp(28px,5vw,72px);padding-bottom:44px}
.foot-logo{display:flex;align-items:center;gap:12px}
.foot-logo img{width:46px;height:46px;border-radius:11px;object-fit:cover}
.foot-tag{font-family:var(--serif);font-style:italic;font-size:19px;color:#A9997C;margin-top:16px;max-width:320px}
.foot-contact{margin-top:22px;display:grid;gap:8px;font-size:14.5px}
.foot-contact a{display:inline-flex;align-items:center;gap:9px;transition:color var(--t-fast)}
.foot-contact a:hover{color:var(--gold-pale)}
/* Sans cette règle les icônes du pied de page prennent leur taille intrinsèque —
   255 px de côté, en noir plein — et le bloc contact passe de 80 à 900 px de haut. */
.foot-contact svg{width:16px;height:16px;flex:0 0 16px;stroke:currentColor;fill:none;stroke-width:1.6}
/* Spécificité supérieure à la règle ci-dessus, sinon le tracé plein de WhatsApp
   hériterait de son `fill:none` et l'icône serait invisible. */
.foot-contact .wa-inline svg{fill:currentColor;stroke:none}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.foot-cols h5{font-size:10.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-pale);margin-bottom:14px}
.foot-cols a{display:block;font-size:14.5px;padding:5px 0;transition:color var(--t-fast),transform var(--t-fast)}
.foot-cols a:hover{color:var(--gold-pale);transform:translateX(3px)}
.socials{display:flex;gap:9px;margin-top:22px}
.socials a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(251,248,241,.18);
  display:grid;place-items:center;transition:var(--t-fast)}
.socials a:hover{border-color:var(--gold);color:var(--gold-pale);transform:translateY(-2px)}
.socials svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}
.foot-bar{max-width:var(--maxw);margin:0 auto;border-top:1px solid rgba(251,248,241,.13);
  padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;letter-spacing:.05em;color:#8B7F68}
.foot-bar nav{display:flex;gap:18px;flex-wrap:wrap}
.foot-bar a:hover{color:var(--gold-pale)}

/* ------------------------------------------------------------------ flottant */
.toast-wrap{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:96;
  display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none;
  width:min(430px,calc(100vw - 28px))}
.toast{display:flex;align-items:center;gap:13px;padding:10px 12px 10px 10px;border-radius:var(--r-full);
  background:var(--em-800);box-shadow:var(--sh-xl);pointer-events:auto;width:100%;
  animation:toastIn .42s var(--ease-out) both}
@keyframes toastIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.toast.out{animation:toastOut .3s var(--ease) both}
@keyframes toastOut{to{opacity:0;transform:translateY(10px) scale(.97)}}
.toast img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--sand)}
.toast .ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(226,180,92,.18);color:var(--gold-pale);font-size:19px}
.toast .mid{flex:1;min-width:0}
.toast .k{font-size:9.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-pale)}
.toast .t{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--cream);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast .cta{flex:0 0 auto;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-pale);padding:9px 14px;border-radius:var(--r-full);border:1px solid rgba(226,180,92,.45);
  transition:var(--t-fast)}
.toast .cta:hover{background:rgba(226,180,92,.17)}

.totop{position:fixed;right:18px;bottom:18px;z-index:54;width:46px;height:46px;border-radius:50%;
  background:var(--em-700);color:var(--gold-pale);display:grid;place-items:center;font-size:17px;
  box-shadow:var(--sh-l);opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:var(--t)}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--em-600);transform:translateY(-3px)}

/* --------------------------------------------------------- WhatsApp flottant
   Volontairement PAS au vert WhatsApp : émeraude et or de la maison, filet doré.
   Au repos c'est une pastille ronde ; au survol elle s'ouvre sur son libellé.
   La largeur est animée sur `max-width` et non sur `width`, pour que le texte
   dicte la largeur finale dans les deux langues sans valeur codée en dur. */
.wafab{position:fixed;left:18px;bottom:18px;z-index:54;display:flex;align-items:center;gap:0;
  height:52px;padding:0 3px;border-radius:26px;background:var(--em-700);color:var(--gold-pale);
  box-shadow:var(--sh-l);border:1px solid rgba(226,180,92,.42);overflow:hidden;
  text-decoration:none;transition:background var(--t),transform var(--t),border-color var(--t)}
.wafab-i{flex:0 0 46px;width:46px;height:46px;display:grid;place-items:center}
.wafab-i svg{width:25px;height:25px}
/* `min-width:0` est indispensable : sur un élément flex, `min-width:auto` vaut la
   largeur mini du contenu et l'emporte sur `max-width:0` — la pastille resterait
   ouverte en permanence. */
.wafab-t{max-width:0;min-width:0;opacity:0;white-space:nowrap;font-size:12.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--gold-pale);
  transition:max-width .42s var(--ease),opacity .3s var(--ease),padding .42s var(--ease);
  padding-right:0}
.wafab:hover,.wafab:focus-visible{background:var(--em-600);border-color:var(--gold-lt);
  transform:translateY(-3px)}
.wafab:hover .wafab-t,.wafab:focus-visible .wafab-t{max-width:280px;opacity:1;padding-right:17px}
/* Pastille de disponibilité, comme sur une messagerie. */
.wafab::after{content:'';position:absolute;top:9px;left:35px;width:9px;height:9px;border-radius:50%;
  background:#4ADE80;border:2px solid var(--em-700);transition:border-color var(--t)}
.wafab:hover::after{border-color:var(--em-600)}
@media (prefers-reduced-motion:reduce){
  .wafab,.wafab-t{transition:none}
}

/* ------------------------------------------------------------------ réactif */
@media (max-width:1240px){
  .look .l1,.look .l2{grid-column:span 6}
  .look .l3,.look .l4,.look .l5{grid-column:span 4}
}
@media (max-width:1080px){
  .nav-links{display:none}
  .burger{display:flex}
  .ranges{grid-template-columns:repeat(2,1fr)}
  .range,.range:nth-child(1),.range:nth-child(2),.range:nth-child(3),
  .range:nth-child(4),.range:nth-child(5),.range:nth-child(6){grid-column:span 1}
  .range:nth-child(1){grid-column:span 2}
  .pd{grid-template-columns:1fr}
  .pd-gal{position:static}
  .co-grid{grid-template-columns:1fr}
  .recap{position:static}
  .foot-in{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:repeat(2,1fr)}
  .nl-in{grid-template-columns:1fr}
  /* Sur un écran étroit, titre et boutons ne tiennent plus côte à côte. */
  .hero-grid .hero-in{align-items:flex-start;flex-direction:column;gap:22px}
  .hero-stage .h1{font-size:min(clamp(38px,6.4vw,58px),10svh)}
  .hero-note .wrap{flex-direction:column;align-items:flex-start}
  .hero-note .hero-meta{flex-wrap:wrap}
}
@media (max-width:860px){
  :root{--nav-h:64px}
  .split,.split.rev{grid-template-columns:1fr}
  .split.rev>*:first-child{order:0}
  .qv{grid-template-columns:1fr}
  .qv-ph img{aspect-ratio:4/3}
  .form.two{grid-template-columns:1fr}
  .look .l1,.look .l2,.look .l3,.look .l4,.look .l5{grid-column:span 12;aspect-ratio:16/10}
  .hero-meta{gap:22px}
  .buybar{display:flex}
  body.has-buybar .totop,body.has-buybar .wafab{bottom:88px}
  .pd{padding-bottom:96px}
  /* Sur mobile le survol n'existe pas : la pastille reste fermée, et on la réduit
     un peu pour ne pas manger la vignette produit. */
  .wafab{height:48px;left:14px;bottom:14px}
  .wafab-i{flex-basis:42px;width:42px;height:42px}
  .wafab::after{left:31px;top:8px}
  .wafab-t{display:none}
}
@media (max-width:640px){
  .ranges{grid-template-columns:1fr}
  .range,.range:nth-child(1){grid-column:span 1}
  .grid.g4,.grid.g3{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .card-desc{-webkit-line-clamp:2;font-size:13.5px}
  .card-bd{padding:14px 15px 16px}
  .add{font-size:10.5px;padding:12px 12px;letter-spacing:.1em}
  .quick{display:none}
  .heart{opacity:1;transform:none}
  .foot-cols{grid-template-columns:1fr}
  .mmenu-cats{grid-template-columns:1fr}
  .toolbar{padding:14px 0}
  .drawer{width:100vw}
  .lang{display:none}
}
@media (max-width:420px){
  .grid.g4,.grid.g3{grid-template-columns:1fr}
}

/* Le plein cadre suppose un écran plus large que haut. En portrait — téléphone,
   tablette debout — un recadrage « cover » mangerait les deux tiers de la
   largeur et il ne resterait qu'une tranche de la boutique. On repasse donc à
   l'image entière, la barre en dessous. Le critère est la FORME de l'écran, pas
   sa largeur : une tablette de 1024 px de large en 4:3 n'a, elle, rien à
   recadrer et garde le plein cadre. */
@media (max-aspect-ratio:1/1){
  .hero-stage{min-height:0}
  .hero-shot{position:static}
  .hero-shot img{height:auto;object-fit:contain}
  .hero-stage .hero-veil{background:linear-gradient(180deg,
    rgba(5,23,15,.6) 0%,rgba(5,23,15,.18) 12%,rgba(5,23,15,0) 24%)}
  .hero-grid{height:auto;padding-top:clamp(16px,2.5vh,26px);
    padding-bottom:clamp(26px,4vh,44px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-rise]{opacity:1;transform:none}
}

@media print{
  .nav,.foot,.drawer,.scrim,.totop,.wafab,.toast-wrap,.buybar,.progress{display:none!important}
  body{background:#fff}
}

/* ==================================================== coffret en trois dimensions
   Maquette 3D d'un coffret, en CSS pur : aucune bibliothèque, aucun WebGL, donc
   elle fonctionne aussi en ouvrant index.html directement. Le socle est un
   volume à six faces ; le couvercle pivote sur une charnière placée à l'arête
   arrière, comme le vrai. Les matières sont extraites des photos de la maison.  */
.c3d{position:relative;background:linear-gradient(165deg,#F6EFE1,#E7DAC2);
  border-radius:var(--r-l);overflow:hidden;padding:clamp(24px,4vw,52px) 0 0;
  box-shadow:var(--sh-l)}
.c3d-stage{perspective:1500px;perspective-origin:50% 50%;
  height:clamp(360px,50vw,540px);display:grid;place-items:center;
  cursor:grab;touch-action:pan-y;user-select:none}
.c3d-stage.drag{cursor:grabbing}
.c3d-box{--w:340px;--d:236px;--h:96px;--lh:26px;
  position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;
  transform:rotateX(var(--rx,-20deg)) rotateY(var(--ry,-32deg));
  transition:transform .12s linear}
.c3d-stage.drag .c3d-box{transition:none}
.c3d-f{position:absolute;left:50%;top:50%;transform-style:preserve-3d;
  background-image:url(../img/3d/bois.webp);background-size:260px auto;
  box-shadow:inset 0 0 40px rgba(0,0,0,.22)}
/* lumiere : haut le plus clair, dos et dessous les plus sombres */
.l-top{filter:brightness(1.14) saturate(1.04)}
.f-front,.l-front{filter:brightness(.98)}
.f-right,.l-right{filter:brightness(.88)}
.f-left,.l-left{filter:brightness(.78)}
.f-back,.l-back{filter:brightness(.7)}
.f-bottom{filter:brightness(.55)}
/* jointure couvercle / socle, sinon le coffret ferme forme un bloc unique */
.l-front,.l-left,.l-right,.l-back{box-shadow:inset 0 -2px 0 rgba(28,16,6,.55),inset 0 0 30px rgba(0,0,0,.2)}
.f-front,.f-left,.f-right,.f-back{box-shadow:inset 0 2px 0 rgba(255,240,214,.14),inset 0 0 34px rgba(0,0,0,.24)}
/* six faces du socle : chaque face est centrée, pivotée, puis poussée d'une
   demi-dimension perpendiculaire — c'est la construction de cube la plus sûre. */
.f-front {width:var(--w);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--w)/-2);
  transform:translateZ(calc(var(--d)/2))}
.f-back  {width:var(--w);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--w)/-2);
  transform:rotateY(180deg) translateZ(calc(var(--d)/2))}
.f-right {width:var(--d);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--d)/-2);
  transform:rotateY(90deg) translateZ(calc(var(--w)/2))}
.f-left  {width:var(--d);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--d)/-2);
  transform:rotateY(-90deg) translateZ(calc(var(--w)/2))}
.f-bottom{width:var(--w);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--w)/-2);
  transform:rotateX(-90deg) translateZ(calc(var(--h)/2))}
/* intérieur : velours et alvéoles */
.f-inside{width:var(--w);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--w)/-2);
  transform:rotateX(90deg) translateZ(calc(var(--h)/-2 + 12px));
  background-image:url(../img/3d/velours.webp);background-size:120px;
  box-shadow:inset 0 0 0 7px rgba(11,52,34,.95),inset 0 0 34px rgba(0,0,0,.6);
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);
  gap:11px;padding:20px}
/* Alvéole : parois de velours épaisses, donc une bordure interne marquée et une
   ombre portée franche — sur le vrai coffret le calage a du relief, une simple
   case plate donnait un aspect générique. */
.c3d-cell{border-radius:3px;background:rgba(3,26,17,.66);
  box-shadow:inset 0 0 0 3px rgba(9,46,30,.9),inset 0 4px 11px rgba(0,0,0,.75);
  display:grid;place-items:center;position:relative;transform-style:preserve-3d}

/* --------------------------------------------------- le vrai bocal, debout
   La face intérieure du coffret est couchée (rotateX(90deg)). Un enfant à qui
   on applique rotateX(-90deg) redevient donc VERTICAL dans l'espace : le bocal
   se dresse dans son alvéole au lieu d'être plaqué au fond.
   Le rotateY qui suit annule la rotation du coffret : sans lui, la photo étant
   sans épaisseur, le bocal disparaîtrait complètement dès qu'on tourne l'écrin
   d'un quart de tour. C'est le principe du panneau toujours face caméra. */
/* Le bocal dépasse volontairement de son alvéole : la paroi avant du coffret
   masquerait sinon la moitié de la rangée du bas, et c'est justement l'étiquette
   qu'on veut voir. Comme l'origine de la rotation est l'arête basse, élargir
   revient à faire monter le pot. */
/* Le bocal est centré par `left`/`right`, PAS par `left:50%` + `translateX(-50%)`.
   Avec cette seconde méthode l'origine de rotation reste celle de la boîte de
   l'élément, posée à droite du centre de l'alvéole : en tournant l'écrin, chaque
   pot décrivait un arc et sortait du coffret. Ici l'origine tombe exactement au
   milieu de l'alvéole, le bocal pivote sur lui-même et ne bouge plus. */
/* On dimensionne le bocal par sa HAUTEUR et non par sa largeur. Les douze
   photos n'ont pas le même rapport (les miels sont plus élancés que les amlou) :
   une largeur commune donnait des hauteurs différentes, et les plus hauts
   sortaient du coffret par le haut tout en débordant la paroi avant. À hauteur
   imposée, tous les pots d'un même écrin arrivent à la même ligne — ce qui est
   d'ailleurs le cas dans le vrai coffret. */
.c3d-pot{position:absolute;left:0;right:0;bottom:2%;height:104%;
  transform-origin:50% 100%;
  transform:rotateX(-90deg) rotateY(calc(-1 * var(--ry,-32deg)));
  opacity:0;transition:opacity .5s var(--ease) .1s;pointer-events:none;
  display:flex;align-items:flex-end;justify-content:center;line-height:0}
/* `img{background:var(--sand)}` sert de fond d'attente à toutes les images du
   site ; sur un détourage transparent il devient un rectangle crème derrière le
   bocal. On le retire ici, ainsi que sur le monogramme du couvercle. */
.c3d-pot img,.l-under img,.l-top img{background:none}
/* `user-drag` : sans lui, tirer sur un bocal lance le glisser-déposer natif de
   l'image — un fantôme suit le curseur au lieu de faire tourner l'écrin. */
.c3d-pot img{height:100%;width:auto;max-width:none;display:block;
  -webkit-user-drag:none;user-select:none;
  filter:drop-shadow(0 5px 9px rgba(0,0,0,.55));
  transition:transform .3s var(--ease-out),filter .3s var(--ease-out)}
/* Survol : le bocal se détache légèrement et s'éclaire — on comprend qu'il est
   sélectionnable sans qu'aucun texte ne le dise. */
.c3d-cell:hover .c3d-pot img,.c3d-pot:focus-visible img{transform:scale(1.09);
  filter:drop-shadow(0 9px 14px rgba(0,0,0,.62)) brightness(1.09)}
.c3d.open .c3d-pot{opacity:1;pointer-events:auto}
.c3d-pot:hover img,.c3d-pot:focus-visible img{filter:drop-shadow(0 8px 14px rgba(0,0,0,.7))
  brightness(1.07)}
/* Le fond coloré ne sert plus que d'assise sous le bocal : on le rabaisse pour
   qu'il ne dépasse pas du pot. */
.c3d.open .c3d-jar{opacity:.55;transform:scale(.86)}
/* Le bocal : corps en verre teinté de la matière, bandeau émeraude, capsule
   dorée vue de dessus. C'est la capsule qu'on voit d'abord quand on plonge dans
   l'écrin — sans elle, la maquette ressemblait à un nuancier. */
.c3d-jar{position:absolute;inset:11%;border-radius:3px;
  background:radial-gradient(circle at 42% 34%,var(--p1),var(--p2) 78%);
  box-shadow:inset 0 -7px 14px rgba(0,0,0,.34),inset 0 5px 10px rgba(255,255,255,.2),
             0 3px 8px rgba(0,0,0,.5);
  opacity:0;transform:scale(.7);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.c3d.open .c3d-jar{opacity:1;transform:none}
.c3d-band{position:absolute;left:50%;top:-2%;width:21%;height:104%;margin-left:-10.5%;
  background:linear-gradient(180deg,#0C3D28,#072A1B);
  box-shadow:0 0 5px rgba(0,0,0,.45)}
.c3d-cap{position:absolute;left:50%;top:50%;width:47%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#EFD9A2,#CFA954 46%,#9C7429 80%,#7E5B1B);
  box-shadow:0 3px 7px rgba(0,0,0,.5),inset 0 -2px 4px rgba(0,0,0,.3),
             inset 0 2px 3px rgba(255,255,255,.5)}
.c3d-cell b{position:absolute;left:0;right:0;bottom:-13%;font-size:6.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-pale);text-align:center;
  opacity:0;transition:opacity .45s var(--ease) .12s;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.c3d.open .c3d-cell b{opacity:1}
/* Le prix n'apparaît qu'au survol : il informe celui qui hésite sur un pot,
   sans transformer l'écrin en liste de tarifs. */
.c3d-cell b i{display:block;font-style:normal;font-size:7px;color:var(--gold-lt);
  margin-top:1px;opacity:0;transition:opacity .25s var(--ease)}
.c3d-cell:hover b i{opacity:1}
.c3d-stage:focus-visible{outline:2px solid var(--gold-lt);outline-offset:6px;
  border-radius:var(--r-m)}
/* charnière à l'arête arrière haute, puis le couvercle en volume */
.c3d-hinge{position:absolute;left:50%;top:50%;transform-style:preserve-3d;
  transform:translate3d(0,calc(var(--h)/-2),calc(var(--d)/-2)) rotateX(0deg);
  transition:transform .85s cubic-bezier(.22,1,.36,1)}
.c3d.open .c3d-box{transform:translateY(13%) rotateX(var(--rx,-20deg)) rotateY(var(--ry,-32deg))}
.c3d.open .c3d-hinge{transform:translate3d(0,calc(var(--h)/-2),calc(var(--d)/-2)) rotateX(112deg)}
.c3d-lid{position:absolute;transform-style:preserve-3d;
  transform:translate3d(0,calc(var(--lh)/-2),calc(var(--d)/2))}
.l-top   {width:var(--w);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--w)/-2);
  transform:rotateX(90deg) translateZ(calc(var(--lh)/2))}
.l-under {width:var(--w);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--w)/-2);
  transform:rotateX(-90deg) translateZ(calc(var(--lh)/2));
  background-image:url(../img/3d/velours.webp);background-size:120px;
  box-shadow:inset 0 0 26px rgba(0,0,0,.5);display:grid;place-items:center}
.l-under img{width:38%;max-width:120px;opacity:.94;filter:drop-shadow(0 2px 5px rgba(0,0,0,.45))}
.l-front {width:var(--w);height:var(--lh);margin:calc(var(--lh)/-2) 0 0 calc(var(--w)/-2);
  transform:translateZ(calc(var(--d)/2))}
.l-back  {width:var(--w);height:var(--lh);margin:calc(var(--lh)/-2) 0 0 calc(var(--w)/-2);
  transform:rotateY(180deg) translateZ(calc(var(--d)/2))}
.l-right {width:var(--d);height:var(--lh);margin:calc(var(--lh)/-2) 0 0 calc(var(--d)/-2);
  transform:rotateY(90deg) translateZ(calc(var(--w)/2))}
.l-left  {width:var(--d);height:var(--lh);margin:calc(var(--lh)/-2) 0 0 calc(var(--d)/-2);
  transform:rotateY(-90deg) translateZ(calc(var(--w)/2))}
/* ombre portée au sol, séparée du volume pour rester à plat */
.c3d-sol{position:absolute;left:50%;top:50%;width:calc(var(--w) * 1.05);height:calc(var(--d) * .9);
  margin:calc(var(--d) * -.45) 0 0 calc(var(--w) * -.525);
  transform:rotateX(-90deg) translateZ(calc(var(--h)/-2 + 1px));
  background:radial-gradient(ellipse at 50% 50%,rgba(60,42,24,.5),transparent 68%);
  filter:blur(9px)}
.c3d-ui{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:0 var(--pad) clamp(20px,3vw,30px)}
.c3d-hint{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3)}
@media (max-width:640px){ .c3d-box{--w:250px;--d:174px;--h:74px;--lh:20px} }
@media (prefers-reduced-motion:reduce){
  .c3d-hinge,.c3d-cell i,.c3d-cell b,.c3d-box{transition:none}
}

/* Charnières dorées, posées sur l'arête arrière comme les deux du vrai coffret. */
.c3d-charn{position:absolute;left:50%;top:50%;transform-style:preserve-3d;
  transform:translate3d(-50%,calc(var(--h)/-2),calc(var(--d)/-2)) rotateX(-90deg);
  width:calc(var(--w) * .5);height:13px;display:flex;justify-content:space-between}
.c3d-charn i{width:26px;height:100%;border-radius:2px;
  background:linear-gradient(180deg,#EBD08A,#B98F32 55%,#8A6520);
  box-shadow:0 1px 3px rgba(0,0,0,.55)}
/* Monogramme marqué à chaud sur le couvercle : discret, il doit se deviner. */
.l-mark{position:absolute;left:50%;top:50%;width:30%;transform:translate(-50%,-50%);
  opacity:.5;mix-blend-mode:overlay;filter:brightness(1.5)}