/* =====================================================================
   AROMANOU · Aromaustral by Aromanou — Design System
   Maison réunionnaise de distillation · Île Maurice
   Palette : sable / espresso / or · Typo : Cormorant Garamond + Mulish
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Neutres & fonds */
  --c-ivoire:    #FAF7F1;
  --c-creme:     #F4EFE3;
  --c-sable:     #D9CBB0;
  --c-taupe:     #B89A78;

  /* Texte */
  --c-espresso:  #2A1E10;
  --c-brun:      #5A4A38;

  /* Accents or */
  --c-or:        #9B7E3A;
  --c-champagne: #C9A961;
  --c-caramel:   #9B6B2A;

  /* Botanique */
  --c-vert:      #1F3A2E;
  --c-vert-clair:#33574733;

  /* Dérivés utilitaires */
  --filet:       #B89A7855;
  --ombre-douce: 0 18px 50px -28px rgba(42,30,16,.45);
  --ombre-carte: 0 24px 60px -30px rgba(42,30,16,.40);
  --ombre-flott: 0 30px 80px -40px rgba(42,30,16,.55);

  /* Typo */
  --font-titre: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-corps: 'Mulish', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Layout */
  --max:        1240px;
  --max-large:  1440px;
  --gut:        clamp(20px, 5vw, 64px);
  --nav-h:      78px;
  --r:          14px;   /* radius cartes */
  --r-pill:     999px;

  /* Mouvement */
  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --dur:        .4s;
}

/* ---------- 2. RESET & BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-corps);
  font-weight:400;
  font-size:16px;
  line-height:1.65;
  color:var(--c-brun);
  background:var(--c-ivoire);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--c-champagne); color:var(--c-espresso); }

/* ---------- 3. TYPOGRAPHIE ---------- */
h1,h2,h3,h4{
  font-family:var(--font-titre);
  color:var(--c-espresso);
  font-weight:600;
  line-height:1.12;
  margin:0;
  letter-spacing:.005em;
}
.display{ font-size:clamp(2.7rem, 6vw, 4.6rem); font-weight:600; line-height:1.04; }
h1{ font-size:clamp(2.4rem, 5vw, 4rem); }
h2{ font-size:clamp(2rem, 3.6vw, 3rem); }
h3{ font-size:clamp(1.4rem, 2.2vw, 1.7rem); }
p{ margin:0 0 1.1em; }
strong,b{ font-weight:700; color:var(--c-espresso); }
em{ font-style:italic; }

.serif-italic{ font-family:var(--font-titre); font-style:italic; font-weight:500; }

.kicker{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--font-corps); font-weight:700;
  font-size:.75rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--c-or); margin:0 0 1.1rem;
}
.kicker::before{
  content:""; width:34px; height:1px; background:var(--c-or);
  display:inline-block; transform-origin:left;
}
.kicker.center{ justify-content:center; }
.kicker.center::after{
  content:""; width:34px; height:1px; background:var(--c-or); display:inline-block;
}

.lead{ font-size:clamp(1.05rem,1.6vw,1.2rem); line-height:1.6; color:var(--c-brun); }
.muted{ color:var(--c-brun); }
.price{ font-family:var(--font-titre); font-weight:600; color:var(--c-espresso); font-size:1.5rem; line-height:1; }
.latin{ font-family:var(--font-titre); font-style:italic; color:var(--c-or); font-size:1.05rem; }

/* ---------- 4. LAYOUT ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.wrap.wide{ max-width:var(--max-large); }
.section{ padding-block:clamp(68px, 9vw, 130px); position:relative; }
.section.tight{ padding-block:clamp(48px, 6vw, 80px); }
.bg-creme{ background:var(--c-creme); }
.bg-sable{ background:var(--c-sable); }
.bg-espresso{ background:var(--c-espresso); color:var(--c-creme); }
.bg-vert{ background:var(--c-vert); color:#EDE7DA; }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.measure{ max-width:62ch; }
.measure-sm{ max-width:46ch; }

.grid{ display:grid; gap:clamp(20px,3vw,40px); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; }

.section-head{ max-width:64ch; margin-bottom:clamp(34px,4vw,56px); }
.section-head.center{ margin-inline:auto; }

/* Filet doré décoratif */
.rule-gold{ height:1px; background:linear-gradient(90deg,transparent,var(--c-or),transparent); border:0; margin:0; transform:scaleX(0); transform-origin:center; }
.is-in .rule-gold,.rule-gold.is-in{ transform:scaleX(1); transition:transform 1.1s var(--ease-out); }

/* ---------- 5. BOUTONS ---------- */
.btn{
  --bg:var(--c-espresso); --fg:var(--c-ivoire);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.95em 1.8em; border-radius:var(--r-pill);
  font-family:var(--font-corps); font-weight:700; font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase;
  background:var(--bg); color:var(--fg);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  overflow:hidden; isolation:isolate; will-change:transform;
}
.btn::before{ /* glissé doré */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg,var(--c-caramel),var(--c-champagne) 55%,var(--c-or));
  opacity:0; transition:opacity var(--dur) var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -16px rgba(155,107,42,.65); }
.btn:hover::before{ opacity:1; }
.btn:hover{ color:var(--c-espresso); }
.btn:focus-visible{ outline:2px solid var(--c-or); outline-offset:3px; }

.btn--gold{ --bg:var(--c-or); --fg:var(--c-espresso); }
.btn--gold:hover{ color:var(--c-espresso); }
.btn--ghost{ --bg:transparent; --fg:var(--c-espresso); border:1px solid var(--c-taupe); }
.btn--ghost::before{ background:var(--c-espresso); }
.btn--ghost:hover{ color:var(--c-ivoire); border-color:transparent; }
.btn--light{ --bg:var(--c-ivoire); --fg:var(--c-espresso); }
.btn--on-dark{ --bg:var(--c-or); --fg:var(--c-espresso); }
.btn--block{ width:100%; }
.btn--sm{ padding:.7em 1.3em; font-size:.74rem; }

.link-or{ color:var(--c-or); font-weight:700; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.5em; transition:gap var(--dur) var(--ease), color var(--dur) var(--ease); }
.link-or svg{ transition:transform var(--dur) var(--ease); }
.link-or:hover{ color:var(--c-caramel); gap:.8em; }
.link-or:hover svg{ transform:translateX(4px); }

/* ---------- 6. BADGES & CHIPS ---------- */
.badge{
  display:inline-flex; align-items:center; gap:.45em;
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:.42em .85em; border-radius:var(--r-pill);
  border:1px solid var(--filet); color:var(--c-brun); background:rgba(255,255,255,.5);
}
.badge--bio{ color:var(--c-vert); border-color:var(--c-vert-clair); background:rgba(31,58,46,.06); }
.badge--gold{ color:var(--c-espresso); background:linear-gradient(110deg,var(--c-champagne),var(--c-or)); border:0; }
.badge--star::before{ content:"★"; color:var(--c-or); }

.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chips span,.chip{
  font-size:.85rem; padding:.55em 1.05em; border-radius:var(--r-pill);
  background:var(--c-ivoire); border:1px solid var(--filet); color:var(--c-brun);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.chip{ cursor:pointer; }
.chip:hover{ border-color:var(--c-or); color:var(--c-espresso); }
.chip.is-active{ background:var(--c-espresso); color:var(--c-ivoire); border-color:var(--c-espresso); }

/* ---------- 7. NAVBAR ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:var(--nav-h); padding-inline:clamp(18px,4vw,52px);
  transition:background-color .5s var(--ease), box-shadow .5s var(--ease), backdrop-filter .5s var(--ease), height .5s var(--ease);
}
.nav::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--filet); opacity:0; transition:opacity .5s var(--ease); }
.nav.is-stuck{ background:rgba(250,247,241,.86); backdrop-filter:blur(14px) saturate(1.1); box-shadow:0 10px 30px -22px rgba(42,30,16,.5); height:66px; }
.nav.is-stuck::after{ opacity:1; }
/* sur hero sombre : texte clair par défaut */
.nav.on-dark .nav-link,.nav.on-dark .brand-name,.nav.on-dark .nav-ico{ color:var(--c-ivoire); }
.nav.on-dark.is-stuck .nav-link,.nav.on-dark.is-stuck .brand-name,.nav.on-dark.is-stuck .nav-ico{ color:var(--c-espresso); }

.brand{ display:flex; align-items:center; gap:12px; z-index:2; }
.brand img{ width:42px; height:42px; object-fit:contain; transition:transform .6s var(--ease); }
.brand:hover img{ transform:rotate(-6deg) scale(1.06); }
.brand-name{ font-family:var(--font-titre); font-size:1.55rem; font-weight:600; color:var(--c-espresso); line-height:1; letter-spacing:.01em; }
.brand-name small{ display:block; font-family:var(--font-corps); font-size:.56rem; font-weight:700; letter-spacing:.34em; text-transform:uppercase; color:var(--c-or); margin-top:3px; white-space:nowrap; }
@media (max-width:400px){ .brand-name{ font-size:1.3rem; } .brand-name small{ letter-spacing:.22em; font-size:.52rem; } }

.nav-menu{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); }
.nav-link{
  position:relative; font-weight:600; font-size:.82rem; letter-spacing:.04em;
  color:var(--c-espresso); padding:.4em 0; transition:color var(--dur) var(--ease);
  white-space:nowrap;
}
.nav-link::after{ content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); }
.nav-link:hover{ color:var(--c-or); }
.nav-link:hover::after,.nav-link.is-current::after{ transform:scaleX(1); transform-origin:left; }
.nav-link.is-current{ color:var(--c-or); }

.nav-tools{ display:flex; align-items:center; gap:14px; z-index:2; }
.nav-ico{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; color:var(--c-espresso); transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease); position:relative; }
.nav-ico:hover{ background:rgba(155,126,58,.12); color:var(--c-or); }
.nav-ico svg{ width:21px; height:21px; }
.cart-count{ position:absolute; top:4px; right:4px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--c-or); color:#fff; font-size:.6rem; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1; }

.lang-toggle{ display:inline-flex; align-items:center; border:1px solid var(--filet); border-radius:var(--r-pill); overflow:hidden; }
.nav.on-dark:not(.is-stuck) .lang-toggle{ border-color:rgba(250,247,241,.4); }
.lang-toggle button{ padding:.4em .7em; font-size:.7rem; font-weight:700; letter-spacing:.08em; color:var(--c-brun); transition:background-color var(--dur),color var(--dur); }
.nav.on-dark:not(.is-stuck) .lang-toggle button{ color:rgba(250,247,241,.75); }
.lang-toggle button.is-active{ background:var(--c-espresso); color:var(--c-ivoire); }
.nav.on-dark:not(.is-stuck) .lang-toggle button.is-active{ background:var(--c-or); color:var(--c-espresso); }

.burger{ display:none; width:44px; height:44px; border-radius:50%; align-items:center; justify-content:center; }
.burger span{ display:block; width:22px; height:2px; background:currentColor; position:relative; transition:transform .4s var(--ease),opacity .3s; color:var(--c-espresso); }
.nav.on-dark:not(.is-stuck) .burger span{ color:var(--c-ivoire); }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:22px; height:2px; background:currentColor; transition:transform .4s var(--ease); }
.burger span::before{ top:-7px; } .burger span::after{ top:7px; }
body.menu-open .burger span{ background:transparent; }
body.menu-open .burger span::before{ transform:translateY(7px) rotate(45deg); }
body.menu-open .burger span::after{ transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-menu{ position:fixed; inset:0; z-index:999; background:var(--c-ivoire); padding:calc(var(--nav-h) + 30px) var(--gut) 40px; transform:translateY(-100%); opacity:0; visibility:hidden; transition:transform .6s var(--ease),opacity .5s,visibility .5s; display:flex; flex-direction:column; gap:6px; overflow-y:auto; }
body.menu-open .mobile-menu{ transform:translateY(0); opacity:1; visibility:visible; }
.mobile-menu a{ font-family:var(--font-titre); font-size:2rem; color:var(--c-espresso); padding:.35em 0; border-bottom:1px solid var(--filet); transition:color var(--dur),padding-left var(--dur); }
.mobile-menu a:hover{ color:var(--c-or); padding-left:10px; }
.mobile-menu .mm-foot{ margin-top:auto; padding-top:28px; display:flex; flex-direction:column; gap:14px; }

/* ---------- 8. HERO ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; color:var(--c-ivoire); }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{ width:100%; height:115%; object-fit:cover; will-change:transform; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,14,7,.55) 0%, rgba(20,14,7,.18) 32%, rgba(20,14,7,.45) 70%, rgba(20,14,7,.86) 100%);
}
.hero__inner{ position:relative; z-index:1; width:100%; padding-bottom:clamp(64px,9vw,120px); padding-top:calc(var(--nav-h) + 30px); }
.hero h1{ color:var(--c-ivoire); max-width:16ch; text-shadow:0 2px 30px rgba(0,0,0,.3); }
.hero .kicker{ color:var(--c-champagne); }
.hero .kicker::before{ background:var(--c-champagne); }
.hero__lead{ color:rgba(250,247,241,.9); max-width:46ch; margin-top:18px; font-size:clamp(1.05rem,1.5vw,1.22rem); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.hero__scroll{ position:absolute; right:clamp(20px,4vw,52px); bottom:26px; z-index:1; display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(250,247,241,.7); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; }
@media (max-width:900px){ .hero__scroll{ display:none; } }
.hero__scroll .line{ width:1px; height:46px; background:linear-gradient(var(--c-champagne),transparent); animation:scrollLine 2.4s var(--ease) infinite; }
@keyframes scrollLine{ 0%{transform:scaleY(0);transform-origin:top;} 45%{transform:scaleY(1);transform-origin:top;} 55%{transform:scaleY(1);transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }

/* mini hero (sous-pages) */
.pagehero{ position:relative; padding-top:calc(var(--nav-h) + clamp(60px,9vw,110px)); padding-bottom:clamp(48px,7vw,90px); overflow:hidden; }
.pagehero.dark{ background:var(--c-espresso); color:var(--c-creme); }
.pagehero.dark h1{ color:var(--c-ivoire); }
.pagehero .crumbs{ font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--c-or); margin-bottom:18px; display:flex; gap:.6em; }
.pagehero .crumbs a:hover{ color:var(--c-champagne); }

/* Bande citation sensorielle (image plein-cadre + voile) */
.quoteband{ position:relative; padding-block:clamp(90px,14vw,180px); overflow:hidden; color:var(--c-ivoire); }
.quoteband__media{ position:absolute; inset:0; z-index:-2; }
.quoteband__media img{ width:100%; height:122%; object-fit:cover; object-position:center 40%; }
.quoteband::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(20,14,7,.66),rgba(20,14,7,.74)); }
.quoteband__q{ font-family:var(--font-titre); font-style:italic; font-weight:500; font-size:clamp(1.9rem,4.6vw,3.4rem); line-height:1.22; color:var(--c-ivoire); max-width:22ch; margin-inline:auto; text-shadow:0 2px 34px rgba(0,0,0,.5); }
.quoteband__q::before{ content:""; display:block; width:40px; height:1px; background:var(--c-champagne); margin:0 auto 26px; }

/* ---------- 9. STAT / TRUST BAR ---------- */
.statbar{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,3vw,40px); }
.stat{ text-align:center; }
.stat .n{ font-family:var(--font-titre); font-size:clamp(2.4rem,4vw,3.4rem); font-weight:600; color:var(--c-or); line-height:1; }
.stat .t{ font-size:.82rem; letter-spacing:.06em; color:var(--c-brun); margin-top:8px; }
.bg-espresso .stat .t,.bg-vert .stat .t{ color:rgba(237,231,218,.78); }

/* ---------- 10. PRODUCT CARD ---------- */
.prod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:clamp(16px,2vw,28px); }
.pcard{
  position:relative; display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--filet); border-radius:var(--r); overflow:hidden;
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color .55s var(--ease);
  will-change:transform;
}
.pcard:hover{ transform:translateY(-8px); box-shadow:var(--ombre-carte); border-color:var(--c-champagne); }
.pcard__media{ position:relative; aspect-ratio:1/1; background:radial-gradient(120% 120% at 50% 25%, #fff, var(--c-creme)); overflow:hidden; }
.pcard__media img{ width:100%; height:100%; object-fit:contain; padding:14% 18% 8%; transition:transform .7s var(--ease-out); mix-blend-mode:multiply; }
.pcard:hover .pcard__media img{ transform:scale(1.07) translateY(-4px); }
.pcard__media::after{ /* voile doré au survol */
  content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(201,169,97,.18) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform .9s var(--ease); pointer-events:none;
}
.pcard:hover .pcard__media::after{ transform:translateX(120%); }
.pcard__fam{ position:absolute; top:12px; left:12px; }
.pcard__body{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:6px; flex:1; }
.pcard__name{ font-family:var(--font-titre); font-size:1.28rem; font-weight:600; color:var(--c-espresso); line-height:1.15; }
.pcard__lt{ font-family:var(--font-titre); font-style:italic; font-size:.92rem; color:var(--c-or); }
.pcard__foot{ margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pcard__add{ width:42px; height:42px; border-radius:50%; background:var(--c-creme); color:var(--c-espresso); display:flex; align-items:center; justify-content:center; transition:background-color var(--dur),color var(--dur),transform var(--dur); flex:none; }
.pcard__add:hover{ background:var(--c-espresso); color:var(--c-ivoire); transform:scale(1.08); }
.pcard__add svg{ width:19px; height:19px; }
.pcard a.pcard__link{ position:absolute; inset:0; z-index:1; }
.pcard__foot,.pcard__add{ position:relative; z-index:2; }
/* Carte illustration (produit sans photo) */
.pcard__media--illus{ display:flex; align-items:center; justify-content:center; }
.illus-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; width:100%; height:100%; }
.illus-wrap .illus{ width:42%; max-width:96px; height:auto; color:var(--c-or); opacity:.5; transition:transform .7s var(--ease-out), opacity .5s var(--ease); }
.pcard:hover .illus-wrap .illus{ transform:translateY(-5px) scale(1.05); opacity:.78; }
.illus-wrap .illus-note{ font-family:var(--font-corps); font-size:.6rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--c-taupe); }

/* ---------- 11. FEATURE / SPLIT IMAGE ---------- */
.media-card{ position:relative; border-radius:var(--r); overflow:hidden; box-shadow:var(--ombre-douce); }
.media-card img{ width:100%; height:100%; object-fit:cover; }
.media-card.tall{ aspect-ratio:3/4; }
.media-card.square{ aspect-ratio:1/1; }
.media-card .tag{ position:absolute; left:18px; bottom:18px; background:rgba(250,247,241,.92); color:var(--c-espresso); padding:.6em 1.1em; border-radius:var(--r-pill); font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(4px); }
.media-frame{ position:relative; }
.media-frame::before{ content:""; position:absolute; inset:14px; border:1px solid rgba(201,169,97,.5); border-radius:var(--r); z-index:2; pointer-events:none; }

/* liste à puces dorées */
.ticks{ display:grid; gap:14px; margin:24px 0; }
.ticks li{ position:relative; padding-left:34px; color:var(--c-brun); }
.ticks li::before{ content:""; position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:50%; background:rgba(155,126,58,.12); }
.ticks li::after{ content:""; position:absolute; left:8px; top:8px; width:6px; height:10px; border:2px solid var(--c-or); border-top:0; border-left:0; transform:rotate(40deg); }

/* ---------- 12. FAMILLES (mosaïque) ---------- */
.fam-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.fam-tile{
  position:relative; aspect-ratio:1/1.05; border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; padding:16px;
  background:var(--c-creme); border:1px solid var(--filet); color:var(--c-espresso);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), color .5s var(--ease);
}
.fam-tile:hover{ transform:translateY(-6px); box-shadow:var(--ombre-carte); }
.fam-tile .fn{ font-size:.78rem; font-weight:700; color:var(--c-or); letter-spacing:.1em; }
.fam-tile .fnm{ font-family:var(--font-titre); font-size:1.32rem; font-weight:600; line-height:1.08; }
.fam-tile.dark{ background:var(--c-vert); color:#EDE7DA; border-color:transparent; }
.fam-tile.dark .fn{ color:var(--c-champagne); }
.fam-tile.espresso{ background:var(--c-espresso); color:var(--c-creme); border-color:transparent; }
.fam-tile.espresso .fn{ color:var(--c-champagne); }
.fam-tile.sable{ background:var(--c-sable); }

/* ---------- 13. STEPS / PROCESS ---------- */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:clamp(20px,3vw,40px); counter-reset:step; }
.step{ position:relative; }
.step .sn{ font-family:var(--font-titre); font-size:3rem; font-weight:600; color:var(--c-sable); line-height:1; }
.bg-espresso .step .sn,.bg-vert .step .sn{ color:rgba(201,169,97,.55); }
.step h3{ margin:8px 0 8px; }
.bg-espresso .step h3{ color:var(--c-ivoire); }

/* ---------- 14. QUOTE ---------- */
.quote{ font-family:var(--font-titre); font-style:italic; font-weight:500; font-size:clamp(1.6rem,3.4vw,2.6rem); line-height:1.25; color:var(--c-espresso); max-width:22ch; }
.bg-espresso .quote,.bg-vert .quote{ color:var(--c-ivoire); }
.quote-mark{ font-family:var(--font-titre); font-size:5rem; line-height:.6; color:var(--c-or); opacity:.5; }

/* ---------- 15. MARQUEE ---------- */
.marquee{ overflow:hidden; white-space:nowrap; border-block:1px solid var(--filet); padding:18px 0; }
.marquee__track{ display:inline-flex; gap:0; will-change:transform; animation:marquee 32s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee span{ font-family:var(--font-titre); font-size:1.5rem; color:var(--c-espresso); padding:0 30px; display:inline-flex; align-items:center; gap:30px; }
.marquee span::after{ content:"✦"; color:var(--c-or); font-size:.8rem; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- 16. FORMS ---------- */
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.field label{ font-size:.78rem; font-weight:700; letter-spacing:.04em; color:var(--c-espresso); text-transform:uppercase; }
.field input,.field textarea,.field select{
  font-family:var(--font-corps); font-size:1rem; color:var(--c-espresso);
  padding:.85em 1em; border:1px solid var(--filet); border-radius:10px; background:#fff;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea{ resize:vertical; min-height:130px; }
.field input::placeholder,.field textarea::placeholder{ color:#A8997F; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--c-or); box-shadow:0 0 0 3px rgba(155,126,58,.16); }
.bg-espresso .field label{ color:var(--c-creme); }
.bg-espresso .field input,.bg-espresso .field textarea,.bg-espresso .field select{ background:rgba(255,255,255,.06); border-color:rgba(201,169,97,.3); color:#fff; }
.bg-espresso .field input::placeholder,.bg-espresso .field textarea::placeholder{ color:rgba(237,231,218,.5); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 22px; }

/* ---------- 17. CARDS (génériques) ---------- */
.card{ background:#fff; border:1px solid var(--filet); border-radius:var(--r); padding:clamp(22px,3vw,34px); transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out); }
.card.hover:hover{ transform:translateY(-6px); box-shadow:var(--ombre-carte); }
.card .ico{ width:54px; height:54px; border-radius:14px; background:var(--c-creme); color:var(--c-or); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.card .ico svg{ width:26px; height:26px; }
.bg-espresso .card{ background:rgba(255,255,255,.05); border-color:rgba(201,169,97,.28); }
.bg-espresso .card h3{ color:var(--c-ivoire); }
.bg-espresso .card .ico{ background:rgba(201,169,97,.14); color:var(--c-champagne); }

.pricecard{ background:#fff; border:1px solid var(--filet); border-radius:var(--r); padding:clamp(24px,3vw,38px); display:flex; flex-direction:column; transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .5s; }
.pricecard.feat{ border-color:var(--c-or); box-shadow:var(--ombre-carte); position:relative; }
.pricecard.feat::before{ content:attr(data-flag); position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:linear-gradient(110deg,var(--c-champagne),var(--c-or)); color:var(--c-espresso); font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:.45em 1em; border-radius:var(--r-pill); }
.pricecard:hover{ transform:translateY(-6px); box-shadow:var(--ombre-flott); }
.pricecard .tier{ font-family:var(--font-titre); font-size:1.7rem; color:var(--c-espresso); }
.pricecard .amt{ font-family:var(--font-titre); font-size:2.6rem; color:var(--c-or); margin:6px 0 2px; line-height:1; }
.pricecard ul{ display:grid; gap:12px; margin:22px 0; }
.pricecard ul li{ position:relative; padding-left:28px; font-size:.94rem; }
.pricecard ul li::before{ content:""; position:absolute; left:4px; top:7px; width:6px; height:10px; border:2px solid var(--c-or); border-top:0; border-left:0; transform:rotate(40deg); }

/* ---------- 18. PRODUCT DETAIL ---------- */
.pdp{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(30px,5vw,70px); align-items:start; }
.pdp__gallery{ position:sticky; top:calc(var(--nav-h) + 20px); }
.pdp__main{ aspect-ratio:1/1; border-radius:var(--r); background:radial-gradient(120% 120% at 50% 30%, #fff, var(--c-creme)); border:1px solid var(--filet); overflow:hidden; }
.pdp__main img{ width:100%; height:100%; object-fit:contain; padding:9%; }
.pdp__thumbs{ display:flex; gap:12px; margin-top:14px; }
.pdp__thumb{ width:76px; height:76px; border-radius:10px; border:1px solid var(--filet); background:#fff; padding:8px; cursor:pointer; transition:border-color var(--dur); }
.pdp__thumb.is-active,.pdp__thumb:hover{ border-color:var(--c-or); }
.pdp__thumb img{ width:100%; height:100%; object-fit:contain; }
.spec-table{ width:100%; border-collapse:collapse; margin:8px 0 24px; }
.spec-table td{ padding:13px 0; border-bottom:1px solid var(--filet); vertical-align:top; }
.spec-table td:first-child{ color:var(--c-brun); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; width:42%; }
.spec-table td:last-child{ color:var(--c-espresso); font-weight:600; text-align:right; }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--filet); border-radius:var(--r-pill); overflow:hidden; }
.qty button{ width:46px; height:48px; font-size:1.2rem; color:var(--c-espresso); transition:background-color var(--dur); }
.qty button:hover{ background:var(--c-creme); }
.qty input{ width:46px; text-align:center; border:0; font-family:var(--font-corps); font-size:1rem; font-weight:700; color:var(--c-espresso); -moz-appearance:textfield; }
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; }

.accordion{ border-top:1px solid var(--filet); }
.acc-item{ border-bottom:1px solid var(--filet); }
.acc-head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0; text-align:left; font-family:var(--font-titre); font-size:1.25rem; color:var(--c-espresso); }
.acc-head .pm{ flex:none; width:26px; height:26px; position:relative; }
.acc-head .pm::before,.acc-head .pm::after{ content:""; position:absolute; background:var(--c-or); transition:transform var(--dur) var(--ease); }
.acc-head .pm::before{ left:0; top:12px; width:26px; height:2px; }
.acc-head .pm::after{ left:12px; top:0; width:2px; height:26px; }
.acc-item.open .pm::after{ transform:scaleY(0); }
.acc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.acc-item.open .acc-body{ grid-template-rows:1fr; }
.acc-body>div{ overflow:hidden; }
.acc-body p{ padding-bottom:22px; }

/* ---------- 19. CART DRAWER ---------- */
.overlay{ position:fixed; inset:0; z-index:1100; background:rgba(20,14,7,.5); opacity:0; visibility:hidden; transition:opacity .45s var(--ease),visibility .45s; backdrop-filter:blur(2px); }
body.cart-open .overlay{ opacity:1; visibility:visible; }
.drawer{ position:fixed; top:0; right:0; bottom:0; z-index:1200; width:min(420px,92vw); background:var(--c-ivoire); transform:translateX(100%); transition:transform .55s var(--ease); display:flex; flex-direction:column; box-shadow:var(--ombre-flott); }
body.cart-open .drawer{ transform:translateX(0); }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--filet); }
.drawer__head h3{ font-size:1.4rem; }
.drawer__close{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--c-espresso); transition:background-color var(--dur); }
.drawer__close:hover{ background:var(--c-creme); }
.drawer__body{ flex:1; overflow-y:auto; padding:18px 24px; }
.drawer__empty{ text-align:center; color:var(--c-brun); padding:60px 10px; }
.citem{ display:grid; grid-template-columns:64px 1fr auto; gap:14px; padding:16px 0; border-bottom:1px solid var(--filet); align-items:center; }
.citem img{ width:64px; height:64px; object-fit:contain; background:#fff; border:1px solid var(--filet); border-radius:10px; padding:6px; }
.citem .cn{ font-family:var(--font-titre); font-size:1.1rem; color:var(--c-espresso); line-height:1.1; }
.citem .cq{ font-size:.82rem; color:var(--c-brun); }
.citem .cp{ font-family:var(--font-titre); font-weight:600; color:var(--c-espresso); }
.citem .crm{ font-size:.72rem; color:var(--c-caramel); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; }
.drawer__foot{ padding:20px 24px 26px; border-top:1px solid var(--filet); }
.drawer__total{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.drawer__total .price{ font-size:1.8rem; }

/* ---------- 20. FOOTER ---------- */
.footer{ background:var(--c-espresso); color:rgba(237,231,218,.78); padding-top:clamp(60px,8vw,100px); position:relative; overflow:hidden; }
.footer .fgrid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:clamp(28px,4vw,56px); padding-bottom:60px; }
.footer h4{ color:var(--c-ivoire); font-family:var(--font-corps); font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:20px; }
.footer .brand-name{ color:var(--c-ivoire); }
.footer a{ transition:color var(--dur) var(--ease); }
.footer a:hover{ color:var(--c-champagne); }
.footer .fcol ul{ display:grid; gap:12px; font-size:.94rem; }
.footer .fsmall{ font-size:.9rem; max-width:34ch; margin-top:16px; }
.footer .social{ display:flex; gap:12px; margin-top:22px; }
.footer .social a{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(201,169,97,.3); display:flex; align-items:center; justify-content:center; color:var(--c-champagne); transition:background-color var(--dur),color var(--dur),transform var(--dur); }
.footer .social a:hover{ background:var(--c-or); color:var(--c-espresso); transform:translateY(-3px); }
.footer .social svg{ width:18px; height:18px; }
.fbar{ border-top:1px solid rgba(201,169,97,.2); padding:24px 0; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:.82rem; color:rgba(237,231,218,.55); }
.footer__leaf{ position:absolute; right:-40px; top:30px; width:280px; opacity:.05; pointer-events:none; }

.newsletter{ display:flex; gap:10px; margin-top:14px; }
.newsletter input{ flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(201,169,97,.3); border-radius:var(--r-pill); padding:.8em 1.2em; color:#fff; font-family:var(--font-corps); }
.newsletter input::placeholder{ color:rgba(237,231,218,.5); }
.newsletter input:focus{ outline:none; border-color:var(--c-or); }
.newsletter button{ flex:none; }

/* ---------- 21. ANIMATIONS (reveal) ---------- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.18s; }
.reveal.d3{ transition-delay:.30s; }
.reveal.d4{ transition-delay:.42s; }
.reveal.d5{ transition-delay:.54s; }
.reveal-img{ clip-path:inset(0 0 100% 0); transition:clip-path 1.1s var(--ease-out); }
.reveal-img.is-in{ clip-path:inset(0 0 0 0); }
.reveal-scale{ opacity:0; transform:scale(.94); transition:opacity 1s var(--ease-out),transform 1s var(--ease-out); }
.reveal-scale.is-in{ opacity:1; transform:none; }

.parallax{ will-change:transform; }

/* Page transition (fade-in load) */
.page-veil{ position:fixed; inset:0; z-index:3000; background:var(--c-espresso); display:flex; align-items:center; justify-content:center; transition:opacity .7s var(--ease),visibility .7s; }
.page-veil img{ width:78px; height:78px; animation:veilPulse 1.6s var(--ease) infinite; }
.page-veil.is-gone{ opacity:0; visibility:hidden; }
@keyframes veilPulse{ 0%,100%{ transform:scale(.9); opacity:.55; } 50%{ transform:scale(1); opacity:1; } }

/* ---------- 22. BOTANICAL ACCENTS ---------- */
.bg-deco{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.bg-deco svg{ position:absolute; }
.section>.wrap{ position:relative; z-index:1; }

/* ---------- 23. RESPONSIVE ---------- */
@media (max-width:1080px){
  .footer .fgrid{ grid-template-columns:1fr 1fr; }
  .pdp{ grid-template-columns:1fr; }
  .pdp__gallery{ position:static; }
}
@media (max-width:900px){
  .nav-menu{ display:none; }
  .burger{ display:flex; }
  .split{ grid-template-columns:1fr; }
  .statbar{ grid-template-columns:repeat(2,1fr); row-gap:32px; }
  .hero{ min-height:92svh; }
}
@media (max-width:680px){
  :root{ --gut:22px; }
  .form-grid{ grid-template-columns:1fr; }
  .footer .fgrid{ grid-template-columns:1fr; gap:36px; }
  .statbar{ grid-template-columns:1fr 1fr; }
  .nav-tools .lang-toggle{ display:none; }
  .reveal{ transform:translateY(24px); }
  h2{ font-size:clamp(1.8rem,7vw,2.3rem); }
}

/* ---------- 24. UTILS ---------- */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.mt-s{ margin-top:14px; } .mt-m{ margin-top:26px; } .mt-l{ margin-top:44px; }
.flex{ display:flex; } .gap-s{ gap:10px; } .gap-m{ gap:20px; } .wrapf{ flex-wrap:wrap; }
.items-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.hidden{ display:none !important; }
.txt-or{ color:var(--c-or); }
.uppercase{ text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; font-weight:700; }

/* ---------- 25. I18N ---------- */
html[data-lang="fr"] [data-lang-en]{ display:none; }
html[data-lang="en"] [data-lang-fr]{ display:none; }

/* ---------- 26. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal,.reveal-img,.reveal-scale{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .hero__media img{ height:100%; }
  .marquee__track{ animation:none; }
  .page-veil{ display:none; }
}

/* =====================================================================
   27. COMPATIBILITÉ — alias hérités (sous-pages créées en session 4)
   Plusieurs sous-pages référencent des noms de tokens/classes d'une
   itération antérieure (--ff-title, --c-muted, .bg-blanc, .btn--outline).
   On les rattache au design system pour garantir, partout :
   titres Cormorant Garamond + couleurs & fonds cohérents.
   ===================================================================== */
:root{
  --ff-title: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ff-body:  'Mulish', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --c-muted:  var(--c-brun);
  --c-blanc:  #fff;
}
.bg-blanc{ background:#fff; }
.btn--outline{ --bg:transparent; --fg:var(--c-espresso); border:1px solid var(--c-taupe); }
.btn--outline::before{ background:var(--c-espresso); }
.btn--outline:hover{ color:var(--c-ivoire); border-color:transparent; }

/* Sous-titre crème lisible sur les pageheros sombres (héritage .lead) */
.pagehero.dark .lead,.pagehero.dark .crumbs a{ color:rgba(237,231,218,.85); }
.pagehero.dark .crumbs{ color:var(--c-champagne); }

/* ---- Pagehero PHOTOGRAPHIQUE (sous-pages éditoriales) ----
   Remplace les héros « bloc de couleur plat » par une vraie image
   d'ambiance + voile dégradé, dans l'esprit du hero d'accueil. */
.pagehero.photo{ color:var(--c-ivoire); }
.pagehero__media{ position:absolute; inset:0; z-index:-2; }
.pagehero__media img{ width:100%; height:100%; object-fit:cover; }
.pagehero.photo::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(20,14,7,.62) 0%,rgba(20,14,7,.34) 42%,rgba(20,14,7,.72) 100%); }
.pagehero.photo h1{ color:var(--c-ivoire); text-shadow:0 2px 30px rgba(0,0,0,.35); }
.pagehero.photo h1 em{ color:var(--c-champagne); font-style:italic; }
.pagehero.photo .lead{ color:rgba(250,247,241,.92); }
.pagehero.photo .kicker{ color:var(--c-champagne); }
.pagehero.photo .kicker::before,.pagehero.photo .kicker::after{ background:var(--c-champagne); }
.pagehero.photo .crumbs{ color:var(--c-champagne); }
.pagehero.photo .crumbs a:hover{ color:var(--c-ivoire); }

/* === Méga-menu Boutique (nav unifiée) === */
.nav-item{ position:relative; display:inline-flex; align-items:center; }
.nav-item>.nav-link{ display:inline-flex; align-items:center; gap:5px; }
.nav-item .chev{ width:12px; height:12px; transition:transform .3s var(--ease); }
.nav-item:hover .chev,.nav-item:focus-within .chev{ transform:rotate(180deg); }
.dropdown{ position:absolute; top:100%; left:0; min-width:256px; background:var(--c-ivoire); border:1px solid var(--filet); border-radius:14px; box-shadow:var(--ombre-douce); padding:10px; display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s; z-index:1001; }
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ display:block; padding:9px 14px; border-radius:9px; font-size:.9rem; color:var(--c-espresso)!important; transition:background .2s var(--ease),color .2s var(--ease); }
.dropdown a:hover{ background:var(--c-creme); color:var(--c-or)!important; }
.dropdown a.is-current{ color:var(--c-or)!important; font-weight:600; }
.mobile-menu a.mm-sub{ font-size:1.3rem; padding-left:20px; opacity:.82; }
@media (max-width:900px){ .nav-item .dropdown{ display:none; } }

/* === Selecteur de devise === */
.cur-toggle{ display:inline-flex; align-items:center; border:1px solid var(--filet); border-radius:var(--r-pill); overflow:hidden; margin-left:8px; }
.nav.on-dark:not(.is-stuck) .cur-toggle{ border-color:rgba(250,247,241,.4); }
.cur-toggle button{ padding:.4em .55em; font-size:.7rem; font-weight:700; letter-spacing:.04em; color:var(--c-brun); transition:background-color var(--dur),color var(--dur); }
.nav.on-dark:not(.is-stuck) .cur-toggle button{ color:rgba(250,247,241,.75); }
.cur-toggle button.is-active{ background:var(--c-espresso); color:var(--c-ivoire); }
.nav.on-dark:not(.is-stuck) .cur-toggle button.is-active{ background:var(--c-or); color:var(--c-espresso); }
.mm-foot .cur-toggle{ margin-left:0; margin-top:12px; }
@media (max-width:680px){ .nav-tools .cur-toggle{ display:none; } }

/* === Film cinématique (vidéo hero) === */
.cine{ position:relative; min-height:78vh; display:flex; align-items:flex-end; overflow:hidden; background:var(--c-espresso) center/cover no-repeat; }
.cine__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.cine__veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(28,20,15,.80) 0%, rgba(28,20,15,.18) 46%, rgba(28,20,15,.42) 100%); }
.cine__content{ position:relative; z-index:2; padding-top:clamp(120px,20vh,200px); padding-bottom:clamp(40px,8vh,90px); }
@media (prefers-reduced-motion: reduce){ .cine__video{ display:none; } }

/* (Galerie défilante supprimée — remplacée par la vidéo cinématique .cine) */

/* === Bouton scroll-to-top === */
#scrollTop{
  position:fixed; right:clamp(16px,3vw,32px); bottom:clamp(20px,4vh,40px); z-index:2000;
  width:48px; height:48px; border-radius:50%;
  background:var(--c-espresso); color:var(--c-ivoire);
  border:1px solid rgba(201,169,97,.35);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px -12px rgba(42,30,16,.55);
  cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s, background-color .3s var(--ease);
}
#scrollTop.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
#scrollTop:hover{ background:var(--c-or); color:var(--c-espresso); border-color:transparent; }
#scrollTop:focus-visible{ outline:2px solid var(--c-or); outline-offset:3px; }
#scrollTop svg{ width:20px; height:20px; }
@media (prefers-reduced-motion: reduce){ #scrollTop{ transition:none; } }