/* ==========================================================================
   AALIYAAH BEAUTY COSMÉTIQUE — Feuille de styles principale
   Design system : or, noir profond, crème, accents tropicaux
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES
   -------------------------------------------------------------------------- */
:root{
  /* Couleurs de marque */
  --noir:#0C0A07;
  --noir-2:#151009;
  --noir-3:#211809;
  --or-clair:#F7E3AE;
  --or:#D9B169;
  --or-mid:#C59B4F;
  --or-fonce:#A77C2E;
  --or-deep:#7C5A18;
  --creme:#FDF9F1;
  --creme-2:#F6EEDD;
  --sable:#EFE2C8;
  --texte:#2B2318;
  --texte-doux:#5E5243;
  --blanc:#FFFFFF;

  /* Accents gammes */
  --afro:#6E1220;
  --curly:#0C4A4E;
  --huile:#C9972F;
  --cocooning:#C4631E;
  --vitc:#E8902A;
  --feuille:#2F5D3A;

  /* Dégradés */
  --grad-or:linear-gradient(135deg,#A77C2E 0%,#F7E3AE 28%,#D9B169 52%,#F7E3AE 72%,#8C661F 100%);
  /* variante lisible sur fonds clairs (contraste AA) */
  --grad-or-texte:linear-gradient(120deg,#8A6416 0%,#C2922F 38%,#9A7226 62%,#7A5714 100%);
  --grad-or-doux:linear-gradient(135deg,#E9CF93 0%,#F9EDCB 50%,#D7AE63 100%);
  --grad-noir:linear-gradient(170deg,#0C0A07 0%,#1B1409 55%,#0C0A07 100%);
  --grad-creme:linear-gradient(180deg,#FDF9F1 0%,#F6EEDD 100%);

  /* Typographie */
  --font-titre:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-texte:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-script:'Parisienne','Brush Script MT',cursive;

  /* Rythme */
  --max:1240px;
  --max-lg:1400px;
  --pad:clamp(1.25rem,5vw,3rem);
  --section-y:clamp(4.5rem,9vw,8rem);
  --r-sm:10px;
  --r:18px;
  --r-lg:28px;
  --r-xl:40px;

  /* Ombres */
  --sh-s:0 2px 10px rgba(32,22,8,.08);
  --sh-m:0 14px 40px -12px rgba(42,30,10,.26);
  --sh-l:0 30px 70px -20px rgba(32,22,8,.38);
  --sh-or:0 10px 40px -10px rgba(197,155,79,.55);

  /* Transitions */
  --t-fast:.25s cubic-bezier(.22,.61,.36,1);
  --t:.45s cubic-bezier(.22,.61,.36,1);
  --t-slow:.9s cubic-bezier(.19,1,.22,1);
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px}
body{
  font-family:var(--font-texte);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.75;
  color:var(--texte);
  background:var(--creme);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--font-titre);font-weight:600;line-height:1.14;letter-spacing:.01em}
h1{font-size:clamp(2.4rem,1.6rem + 3.6vw,4.6rem)}
h2{font-size:clamp(1.95rem,1.4rem + 2.3vw,3.3rem)}
h3{font-size:clamp(1.35rem,1.15rem + .8vw,1.85rem)}
h4{font-size:clamp(1.08rem,1rem + .4vw,1.3rem)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
::selection{background:var(--or);color:var(--noir)}

/* Accessibilité */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--noir);color:var(--or-clair);padding:.9rem 1.4rem;border-radius:0 0 12px 0;
}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--or-fonce);outline-offset:3px;border-radius:4px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   3. UTILITAIRES
   -------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.wrap-lg{width:100%;max-width:var(--max-lg);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--section-y);position:relative}
.section--creme{background:var(--grad-creme)}
.section--sable{background:linear-gradient(180deg,#F6EEDD 0%,#EFE2C8 100%)}
.section--noir{background:var(--grad-noir);color:var(--creme)}
.section--noir h2,.section--noir h3{color:var(--creme)}
.center{text-align:center}
.mx-auto{margin-inline:auto}
.mw-62{max-width:62ch}
.mw-70{max-width:70ch}

/* Texte doré */
.or{
  background:var(--grad-or-texte);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* Sur fonds sombres, le doré clair reprend la main */
.section--noir .or,.hero .or,.hero-page .or,.cta .or,.citation .or,.footer .or,.card--noir .or{
  background:var(--grad-or);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .or{color:var(--or-deep);-webkit-text-fill-color:currentColor}
  .section--noir .or,.hero .or,.hero-page .or,.cta .or{color:var(--or-clair)}
}
.script{
  font-family:var(--font-script);
  font-size:1.45em;line-height:1.35;font-weight:400;
  letter-spacing:.01em;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-texte);font-size:.72rem;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--or-deep);margin-bottom:1.1rem;
}
.eyebrow::before,.eyebrow::after{
  content:"";width:clamp(18px,4vw,34px);height:1px;
  background:linear-gradient(90deg,transparent,var(--or));
}
.eyebrow::after{background:linear-gradient(270deg,transparent,var(--or))}
.section--noir .eyebrow{color:var(--or)}
.lead{font-size:clamp(1.06rem,1rem + .35vw,1.25rem);color:var(--texte-doux);font-weight:300}
.section--noir .lead{color:#E5DACA}

/* Filet décoratif */
.filet{
  width:clamp(90px,14vw,160px);height:2px;margin:1.6rem auto 0;
  background:var(--grad-or);border-radius:2px;position:relative;
}
.filet::after{
  content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--or-clair);box-shadow:0 0 12px var(--or);
}

/* --------------------------------------------------------------------------
   4. BOUTONS
   -------------------------------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  padding:1.02rem 2.1rem;border-radius:999px;
  font-family:var(--font-texte);font-size:.82rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform var(--t-fast),box-shadow var(--t-fast),color var(--t-fast);
  will-change:transform;
}
.btn svg{width:1.05em;height:1.05em;flex:none;transition:transform var(--t-fast)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px)}
.btn:hover svg{transform:translateX(4px)}

.btn--or{color:#2A1D05;background:var(--grad-or);box-shadow:var(--sh-or)}
.btn--or::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.75) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .75s ease;
}
.btn--or:hover::before{transform:translateX(120%)}
.btn--or:hover{box-shadow:0 16px 46px -10px rgba(197,155,79,.8)}

.btn--ligne{color:var(--texte);border:1px solid rgba(167,124,46,.5);background:rgba(255,255,255,.4)}
.btn--ligne::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--grad-or);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t);
}
.btn--ligne:hover{color:#2A1D05;border-color:transparent}
.btn--ligne:hover::before{transform:scaleX(1)}

.btn--clair{color:var(--or-clair);border:1px solid rgba(217,177,105,.55);background:rgba(255,255,255,.04)}
.btn--clair::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--grad-or);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t);
}
.btn--clair:hover{color:#2A1D05;border-color:transparent}
.btn--clair:hover::before{transform:scaleX(1)}

.btn--sm{padding:.78rem 1.5rem;font-size:.74rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem}
.center .btn-row{justify-content:center}

/* Lien animé */
.lien{
  display:inline-flex;align-items:center;gap:.5rem;position:relative;
  font-size:.82rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--or-deep);padding-bottom:.3rem;
}
.lien::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--or);transform:scaleX(0);transform-origin:right;transition:transform var(--t);
}
.lien:hover::after{transform:scaleX(1);transform-origin:left}
.lien svg{width:1em;height:1em;transition:transform var(--t-fast)}
.lien:hover svg{transform:translateX(5px)}
.section--noir .lien{color:var(--or-clair)}

/* --------------------------------------------------------------------------
   5. PRÉLOADER
   -------------------------------------------------------------------------- */
.preloader{
  position:fixed;inset:0;z-index:9000;display:grid;place-items:center;
  background:var(--grad-noir);transition:opacity .7s ease,visibility .7s ease;
}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader__inner{text-align:center;animation:plFade 1s ease both}
.preloader__mark{
  font-family:var(--font-titre);font-size:clamp(3rem,10vw,4.6rem);font-weight:700;
  letter-spacing:.06em;line-height:1;
  background:var(--grad-or);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.preloader__name{
  margin-top:.5rem;font-size:.7rem;letter-spacing:.42em;text-transform:uppercase;color:#C9A866;
}
.preloader__bar{
  width:170px;height:2px;margin:1.7rem auto 0;border-radius:2px;
  background:rgba(217,177,105,.2);overflow:hidden;
}
.preloader__bar i{display:block;height:100%;width:40%;background:var(--grad-or);animation:plRun 1.1s ease-in-out infinite}
@keyframes plRun{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}
@keyframes plFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   6. CURSEUR PERSONNALISÉ
   -------------------------------------------------------------------------- */
.cursor,.cursor-dot{
  position:fixed;top:0;left:0;z-index:8000;pointer-events:none;
  border-radius:50%;mix-blend-mode:normal;opacity:0;transition:opacity .3s ease;
}
.cursor{
  width:36px;height:36px;border:1px solid rgba(197,155,79,.75);
  transition:width .3s ease,height .3s ease,background .3s ease,opacity .3s ease;
}
.cursor-dot{width:5px;height:5px;background:var(--or-fonce)}
.cursor.is-active{opacity:1}
.cursor-dot.is-active{opacity:1}
.cursor.is-hover{width:62px;height:62px;background:rgba(217,177,105,.14);border-color:rgba(217,177,105,.9)}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}

/* Barre de progression de lecture */
.progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:7000;
  background:var(--grad-or);box-shadow:0 0 14px rgba(217,177,105,.75);
}

/* --------------------------------------------------------------------------
   7. EN-TÊTE / NAVIGATION
   -------------------------------------------------------------------------- */
.header{
  position:fixed;top:0;left:0;width:100%;z-index:6000;
  transition:background var(--t),box-shadow var(--t),backdrop-filter var(--t);
}
.header::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(217,177,105,.45),transparent);
  opacity:0;transition:opacity var(--t);
}
.header.is-stuck{
  background:rgba(12,10,7,.88);backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 10px 40px -18px rgba(0,0,0,.8);
}
.header.is-stuck::after{opacity:1}
.header.is-hidden{transform:translateY(-105%)}
.header{transition:transform var(--t),background var(--t),box-shadow var(--t)}

.nav{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:clamp(.9rem,2vw,1.35rem);transition:padding var(--t);
}
.header.is-stuck .nav{padding-block:.7rem}

/* Logo */
.logo{display:flex;align-items:center;gap:.8rem;flex:none}
.logo__mark{
  position:relative;display:grid;place-items:center;
  width:clamp(42px,5vw,52px);height:clamp(42px,5vw,52px);border-radius:14px;
  background:var(--grad-or);box-shadow:0 6px 22px -8px rgba(217,177,105,.9);
  font-family:var(--font-titre);font-weight:700;font-size:clamp(1.1rem,2vw,1.35rem);
  color:#18120A;letter-spacing:.02em;overflow:hidden;
}
.logo__mark::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);
  transform:translateX(-130%);
}
.logo:hover .logo__mark::after{transform:translateX(130%);transition:transform .8s ease}
.logo__txt{display:flex;flex-direction:column;line-height:1.05}
.logo__name{
  font-family:var(--font-titre);font-size:clamp(1rem,1.7vw,1.22rem);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--creme);
}
.logo__sub{font-size:.56rem;letter-spacing:.42em;text-transform:uppercase;color:var(--or)}
.header.is-light .logo__name{color:var(--texte)}
.header.is-light .logo__sub{color:var(--or-fonce)}

/* Menu */
.menu{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.1rem)}
.menu__link{
  position:relative;font-size:.78rem;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(253,249,241,.82);padding-block:.4rem;
  transition:color var(--t-fast);white-space:nowrap;
}
.menu__link::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--grad-or);transform:scaleX(0);transform-origin:right;transition:transform var(--t);
}
.menu__link:hover,.menu__link[aria-current="page"]{color:var(--or-clair)}
.menu__link:hover::after,.menu__link[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.header.is-light .menu__link{color:var(--texte-doux)}
.header.is-light .menu__link:hover,.header.is-light .menu__link[aria-current="page"]{color:var(--or-deep)}

.nav__cta{flex:none}

/* Burger */
.burger{
  display:none;width:46px;height:46px;border-radius:12px;
  flex-direction:column;align-items:center;justify-content:center;
  border:1px solid rgba(217,177,105,.4);flex:none;
}
.burger span{display:block;width:21px;height:1.5px;background:var(--or-clair);margin:4px auto;border-radius:2px;transition:transform var(--t),opacity var(--t-fast)}
.header.is-light .burger span{background:var(--or-deep)}
.burger.is-open span:nth-child(1){transform:translateY(9.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.is-open span:nth-child(3){transform:translateY(-9.5px) rotate(-45deg)}

/* Menu mobile */
.drawer{
  position:fixed;inset:0;z-index:5900;display:grid;place-items:center;
  background:var(--grad-noir);
  clip-path:circle(0% at calc(100% - 44px) 44px);
  transition:clip-path .8s cubic-bezier(.76,0,.24,1);
  visibility:hidden;
}
.drawer.is-open{clip-path:circle(150% at calc(100% - 44px) 44px);visibility:visible}
.drawer__list{display:flex;flex-direction:column;gap:.35rem;text-align:center;padding:2rem}
.drawer__list a{
  display:block;font-family:var(--font-titre);font-size:clamp(1.6rem,6vw,2.3rem);
  color:var(--creme);padding:.4rem 1rem;opacity:0;transform:translateY(22px);
  transition:color var(--t-fast);
}
.drawer.is-open .drawer__list a{animation:drawerIn .55s cubic-bezier(.22,.61,.36,1) forwards}
.drawer__list a:hover,.drawer__list a[aria-current="page"]{color:var(--or)}
.drawer__foot{margin-top:1.6rem;display:flex;flex-direction:column;align-items:center;gap:.9rem}
@keyframes drawerIn{to{opacity:1;transform:none}}

@media (max-width:1080px){
  .menu,.nav__cta{display:none}
  .burger{display:flex}
}

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero{
  position:relative;min-height:100svh;display:grid;align-items:center;
  background:var(--grad-noir);overflow:hidden;isolation:isolate;
  padding-block:clamp(7rem,14vw,9rem) clamp(3rem,7vw,5rem);
}
.hero__bg{
  position:absolute;inset:-10% -5%;z-index:-3;
  background:url('../img/bokeh.jpg') center/cover no-repeat;
  opacity:.4;filter:saturate(1.15);
  transform:scale(1.08);
}
.hero__veil{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%,rgba(217,177,105,.22),transparent 72%),
    linear-gradient(180deg,rgba(12,10,7,.72) 0%,rgba(12,10,7,.58) 40%,rgba(12,10,7,.94) 100%);
}
.hero__canvas{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero__rays{
  position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.55;
  background:
    conic-gradient(from 180deg at 50% 0%,transparent 0deg,rgba(247,227,174,.1) 18deg,transparent 36deg,transparent 324deg,rgba(247,227,174,.08) 342deg,transparent 360deg);
  animation:rays 22s linear infinite alternate;
}
@keyframes rays{from{transform:translateX(-3%) scaleY(1)}to{transform:translateX(3%) scaleY(1.08)}}

.hero__inner{position:relative;text-align:center;display:grid;justify-items:center;gap:0}
.hero__logo{
  width:clamp(185px,28vw,320px);margin-bottom:clamp(1rem,2.6vw,1.7rem);
  mix-blend-mode:screen;               /* efface le fond sombre du visuel */
  filter:drop-shadow(0 16px 46px rgba(217,177,105,.45)) saturate(1.08);
}
.hero h1{
  color:var(--creme);max-width:16ch;margin-inline:auto;
  text-shadow:0 20px 60px rgba(0,0,0,.55);
}
.hero h1 .or{display:inline-block}
.hero__script{
  display:block;margin-bottom:.1em;
  font-family:var(--font-script);font-size:clamp(1.5rem,4.5vw,2.6rem);
  color:var(--or);font-weight:400;
}
.hero__txt{
  margin-top:1.5rem;max-width:58ch;color:#E3D8C6;font-weight:300;
  font-size:clamp(1rem,.95rem + .35vw,1.18rem);
}
.hero__btns{margin-top:2.3rem}
.hero__produits{
  margin-top:clamp(2.5rem,6vw,4rem);width:min(100%,980px);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(217,177,105,.28);
  position:relative;
}
.hero__produits::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(12,10,7,.45) 100%);
}
.hero__scroll{
  position:absolute;left:50%;bottom:1.5rem;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(247,227,174,.6);
}
.hero__scroll i{
  display:block;width:1px;height:42px;background:linear-gradient(180deg,var(--or),transparent);
  animation:scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* Hero interne (pages secondaires) */
.hero-page{
  position:relative;padding-block:clamp(8.5rem,16vw,12rem) clamp(3.5rem,7vw,5.5rem);
  background:var(--grad-noir);overflow:hidden;isolation:isolate;text-align:center;
}
.hero-page__bg{
  position:absolute;inset:0;z-index:-2;
  background:url('../img/bokeh.jpg') center/cover no-repeat;opacity:.3;
}
.hero-page::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 70% 70% at 50% 30%,rgba(217,177,105,.2),transparent 70%),
    linear-gradient(180deg,rgba(12,10,7,.8),rgba(12,10,7,.93));
}
.hero-page h1{color:var(--creme);max-width:18ch;margin-inline:auto}
.hero-page .lead{color:#DED2BE;max-width:62ch;margin:1.3rem auto 0}
.fil{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,227,174,.65);
  margin-bottom:1.3rem;
}
.fil a:hover{color:var(--or-clair);text-decoration:underline}
.fil span{opacity:.5}

/* --------------------------------------------------------------------------
   9. MARQUEE / BANDEAU
   -------------------------------------------------------------------------- */
.marquee{
  background:var(--grad-or);color:#2A1D05;overflow:hidden;position:relative;
  padding-block:.95rem;border-block:1px solid rgba(124,90,24,.25);
}
.marquee__track{display:flex;width:max-content;animation:scrollX 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{
  display:inline-flex;align-items:center;gap:.8rem;padding-inline:1.6rem;
  font-size:.74rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;
}
.marquee__item::after{content:"";width:5px;height:5px;background:#2A1D05;transform:rotate(45deg);opacity:.5}
@keyframes scrollX{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --------------------------------------------------------------------------
   10. GRILLES & CARTES
   -------------------------------------------------------------------------- */
.grid{display:grid;gap:clamp(1.1rem,2.4vw,1.9rem)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}

.card{
  position:relative;background:var(--blanc);border-radius:var(--r-lg);
  padding:clamp(1.7rem,3vw,2.4rem);box-shadow:var(--sh-m);
  border:1px solid rgba(217,177,105,.22);overflow:hidden;isolation:isolate;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity var(--t);
  background:radial-gradient(ellipse 80% 70% at 50% 0%,rgba(247,227,174,.4),transparent 70%);
}
.card:hover{transform:translateY(-8px);box-shadow:var(--sh-l);border-color:rgba(217,177,105,.5)}
.card:hover::before{opacity:1}
.card h3{margin-bottom:.6rem}
.card p{color:var(--texte-doux);font-size:.97rem}

.card--noir{
  background:linear-gradient(160deg,#17110A,#0E0B07);
  border-color:rgba(217,177,105,.26);color:#E2D7C5;
}
.card--noir h3{color:var(--creme)}
.card--noir p{color:#CDBFA9}

/* Icône ronde dorée */
.ico{
  display:grid;place-items:center;width:62px;height:62px;border-radius:50%;
  margin-bottom:1.2rem;position:relative;flex:none;
  background:linear-gradient(150deg,#1D1509,#2E220E);
  box-shadow:0 0 0 1px rgba(217,177,105,.45),0 10px 26px -12px rgba(217,177,105,.7);
}
.ico::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(217,177,105,.22);
}
.ico svg{width:27px;height:27px;stroke:var(--or);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.center .ico{margin-inline:auto}
.ico--clair{background:var(--grad-or-doux);box-shadow:0 10px 26px -12px rgba(197,155,79,.9)}
.ico--clair svg{stroke:#3A2A0C}

/* Numéro étape */
.num{
  display:grid;place-items:center;width:58px;height:58px;border-radius:50%;flex:none;
  font-family:var(--font-titre);font-size:1.5rem;font-weight:600;color:var(--or-clair);
  background:linear-gradient(150deg,#1D1509,#2E220E);
  box-shadow:0 0 0 1px rgba(217,177,105,.45);
}

/* --------------------------------------------------------------------------
   11. CARTES GAMMES
   -------------------------------------------------------------------------- */
.gammes{display:grid;gap:clamp(1.2rem,2.5vw,2rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.gamme{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-lg);background:var(--blanc);
  box-shadow:var(--sh-m);border:1px solid rgba(217,177,105,.22);
  transition:transform var(--t),box-shadow var(--t);
  transform-style:preserve-3d;
}
.gamme:hover{box-shadow:var(--sh-l)}
.gamme__media{position:relative;overflow:hidden;aspect-ratio:2.2/1;background:#1A1309}
.gamme__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.19,1,.22,1)}
.gamme:hover .gamme__media img{transform:scale(1.08)}
.gamme__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(12,10,7,.55) 100%);
}
.gamme__shine{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);
  transform:translateX(-120%);
}
.gamme:hover .gamme__shine{transform:translateX(120%);transition:transform .95s ease}
.gamme__tag{
  position:absolute;left:1rem;top:1rem;z-index:3;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.4rem .9rem;border-radius:999px;
  font-size:.62rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:#FFF;backdrop-filter:blur(6px);background:rgba(12,10,7,.55);
  border:1px solid rgba(255,255,255,.22);
}
.gamme__body{padding:clamp(1.4rem,2.5vw,1.9rem);display:flex;flex-direction:column;flex:1}
.gamme__titre{
  display:flex;align-items:center;gap:.7rem;margin-bottom:.3rem;
  font-family:var(--font-titre);font-size:1.5rem;font-weight:600;
}
.gamme__sous{font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:var(--or-deep);font-weight:500;margin-bottom:.9rem}
.gamme__body p{color:var(--texte-doux);font-size:.96rem;margin-bottom:1.1rem}
.gamme__list{display:grid;gap:.5rem;margin-bottom:1.3rem}
.gamme__list li{
  display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;color:var(--texte-doux);line-height:1.5;
}
.gamme__list svg{width:15px;height:15px;flex:none;margin-top:.35rem;stroke:var(--or-deep);fill:none;stroke-width:2.4}
.gamme__foot{margin-top:auto;padding-top:.3rem}
.gamme__bar{height:3px;width:100%;border-radius:3px;margin-top:1.2rem}

.g-afro .gamme__bar{background:linear-gradient(90deg,var(--afro),#B2384B)}
.g-curly .gamme__bar{background:linear-gradient(90deg,var(--curly),#2A9A9F)}
.g-huile .gamme__bar{background:linear-gradient(90deg,var(--huile),var(--or-clair))}
.g-cocooning .gamme__bar{background:linear-gradient(90deg,var(--cocooning),#F0A96A)}
.g-vitc .gamme__bar{background:linear-gradient(90deg,var(--vitc),#FFD07A)}
.g-afro .gamme__tag{background:rgba(110,18,32,.72)}
.g-curly .gamme__tag{background:rgba(12,74,78,.72)}
.g-huile .gamme__tag{background:rgba(124,90,24,.75)}
.g-cocooning .gamme__tag{background:rgba(196,99,30,.72)}
.g-vitc .gamme__tag{background:rgba(201,122,22,.75)}

/* --------------------------------------------------------------------------
   12. SPLIT (image + texte)
   -------------------------------------------------------------------------- */
.split{
  display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));
}
.split--reverse .split__media{order:2}
@media (max-width:860px){.split--reverse .split__media{order:0}}
.split__media{position:relative}
.split__img{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-l);border:1px solid rgba(217,177,105,.3);
}
.split__img img{width:100%;transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.split__img:hover img{transform:scale(1.05)}
.split__badge{
  position:absolute;z-index:3;right:-12px;bottom:-18px;
  display:grid;place-items:center;text-align:center;
  width:clamp(110px,16vw,142px);height:clamp(110px,16vw,142px);border-radius:50%;
  background:var(--grad-or);color:#2A1D05;box-shadow:var(--sh-or);
  font-family:var(--font-titre);line-height:1.1;padding:1rem;
  animation:float 5.5s ease-in-out infinite;
}
.split__badge b{display:block;font-size:1.75rem;font-weight:700}
.split__badge span{font-size:.6rem;letter-spacing:.17em;text-transform:uppercase;font-family:var(--font-texte);font-weight:500}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* Liste à puces dorées */
.liste{display:grid;gap:.85rem;margin:1.5rem 0}
.liste li{display:flex;gap:.9rem;align-items:flex-start;color:var(--texte-doux)}
.liste li b,.liste li strong{color:var(--texte);font-weight:500}
.liste__p{
  display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:none;margin-top:.22rem;
  background:var(--grad-or-doux);box-shadow:0 4px 12px -4px rgba(197,155,79,.8);
}
.liste__p svg{width:12px;height:12px;stroke:#3A2A0C;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.section--noir .liste li{color:#CFC2AC}
.section--noir .liste li b,.section--noir .liste li strong{color:var(--creme)}

/* --------------------------------------------------------------------------
   13. CHIFFRES
   -------------------------------------------------------------------------- */
.stats{display:grid;gap:clamp(1rem,2.5vw,2rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));text-align:center}
.stat__n{
  font-family:var(--font-titre);font-size:clamp(2.6rem,2rem + 2.4vw,4.1rem);font-weight:600;line-height:1;
  background:var(--grad-or);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.stat__l{margin-top:.5rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#C6B79F}
.section--creme .stat__l,.section--sable .stat__l{color:var(--texte-doux)}

/* --------------------------------------------------------------------------
   14. ENGAGEMENTS (pastilles)
   -------------------------------------------------------------------------- */
.pastilles{
  display:grid;gap:clamp(1.1rem,2.6vw,2rem);
  grid-template-columns:repeat(2,1fr);
  max-width:960px;margin-inline:auto;
}
@media (min-width:560px){.pastilles{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.pastilles{grid-template-columns:repeat(5,1fr)}}
.pastille{text-align:center;transition:transform var(--t)}
.pastille:hover{transform:translateY(-7px)}
.pastille__c{
  position:relative;display:grid;place-items:center;width:clamp(74px,10vw,92px);height:clamp(74px,10vw,92px);
  margin:0 auto .85rem;border-radius:50%;
  background:linear-gradient(150deg,#1C1409,#2C200D);
  box-shadow:0 0 0 1px rgba(217,177,105,.45),0 14px 34px -16px rgba(217,177,105,.8);
}
.pastille__c::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(217,177,105,.2)}
.pastille__c svg{width:34px;height:34px;stroke:var(--or);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.pastille p{font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-doux);line-height:1.5}
.section--noir .pastille p{color:#C9BBA4}
.pastille:hover .pastille__c{box-shadow:0 0 0 1px rgba(217,177,105,.8),0 18px 40px -14px rgba(217,177,105,1)}

/* --------------------------------------------------------------------------
   15. CITATION
   -------------------------------------------------------------------------- */
.citation{
  position:relative;max-width:min(100%,880px);margin-inline:auto;text-align:center;
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,5vw,4rem);
  border-radius:var(--r-xl);overflow:hidden;isolation:isolate;
  background:linear-gradient(155deg,rgba(29,21,10,.96),rgba(15,11,7,.98));
  border:1px solid rgba(217,177,105,.33);
  box-shadow:var(--sh-l);
}
.citation::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.22;
  background:url('../img/bokeh.jpg') center/cover;
}
.citation>span.citation__halo{
  position:absolute;inset:0;z-index:-1;
  background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(217,177,105,.22),transparent 72%);
}
.citation::after{
  content:"\201C";position:absolute;left:50%;top:-.1em;transform:translateX(-50%);
  font-family:var(--font-titre);font-size:11rem;line-height:1;color:rgba(217,177,105,.16);
}
.citation p{
  position:relative;font-family:var(--font-script);
  font-size:clamp(1.6rem,1.15rem + 2.4vw,3rem);line-height:1.45;color:#FBEEC9;
  text-shadow:0 2px 22px rgba(0,0,0,.6);
}
.citation footer{
  margin-top:1.6rem;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:#C3B49B;
}

/* --------------------------------------------------------------------------
   16. TÉMOIGNAGES (carousel)
   -------------------------------------------------------------------------- */
.carousel{position:relative;overflow:hidden;border-radius:var(--r-lg)}
.carousel__track{display:flex;transition:transform .75s cubic-bezier(.19,1,.22,1)}
.carousel__slide{flex:0 0 100%;padding:clamp(.4rem,1vw,.8rem)}
.avis{
  background:var(--blanc);border-radius:var(--r-lg);padding:clamp(1.8rem,4vw,3rem);
  box-shadow:var(--sh-m);border:1px solid rgba(217,177,105,.25);text-align:center;
}
.avis__etoiles{display:flex;justify-content:center;gap:.3rem;margin-bottom:1.2rem}
.avis__etoiles svg{width:19px;height:19px;fill:var(--or);stroke:none}
.avis p{font-size:clamp(1.02rem,.98rem + .3vw,1.18rem);color:var(--texte);font-style:italic;max-width:60ch;margin:0 auto 1.4rem}
.avis__auteur{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--or-deep);font-weight:600}
.carousel__nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.6rem}
.carousel__dots{display:flex;gap:.5rem}
.carousel__dot{
  width:9px;height:9px;border-radius:50%;background:rgba(167,124,46,.3);
  transition:background var(--t-fast),transform var(--t-fast),width var(--t-fast);
}
.carousel__dot.is-on{background:var(--or-fonce);width:26px;border-radius:999px}
.carousel__btn{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(167,124,46,.4);transition:background var(--t-fast),border-color var(--t-fast);
}
.carousel__btn:hover{background:var(--grad-or-doux);border-color:transparent}
.carousel__btn svg{width:17px;height:17px;stroke:var(--or-deep);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* --------------------------------------------------------------------------
   17. ACCORDÉON (FAQ)
   -------------------------------------------------------------------------- */
.faq{max-width:min(100%,860px);margin-inline:auto;display:grid;gap:.85rem}
.faq__item{
  background:var(--blanc);border-radius:var(--r);border:1px solid rgba(217,177,105,.26);
  overflow:hidden;box-shadow:var(--sh-s);transition:box-shadow var(--t),border-color var(--t);
}
.faq__item.is-open{box-shadow:var(--sh-m);border-color:rgba(217,177,105,.55)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.25rem clamp(1.1rem,2.5vw,1.8rem);text-align:left;
  font-family:var(--font-titre);font-size:clamp(1.05rem,1rem + .3vw,1.25rem);font-weight:600;color:var(--texte);
}
.faq__q span{flex:1}
.faq__icon{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;
  background:var(--grad-or-doux);transition:transform var(--t);
}
.faq__icon svg{width:14px;height:14px;stroke:#3A2A0C;stroke-width:2.6;fill:none;stroke-linecap:round}
.faq__item.is-open .faq__icon{transform:rotate(135deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.22,.61,.36,1)}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{padding:0 clamp(1.1rem,2.5vw,1.8rem) 1.4rem;color:var(--texte-doux);font-size:.97rem}

/* --------------------------------------------------------------------------
   18. CTA FINAL
   -------------------------------------------------------------------------- */
.cta{
  position:relative;overflow:hidden;isolation:isolate;text-align:center;
  padding-block:clamp(4rem,8vw,6.5rem);background:var(--grad-noir);color:var(--creme);
}
.cta::before{
  content:"";position:absolute;inset:0;z-index:-2;opacity:.2;
  background:url('../img/bokeh.jpg') center/cover;
}
.cta::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 55% 65% at 50% 45%,rgba(217,177,105,.26),transparent 70%),
    linear-gradient(180deg,rgba(12,10,7,.5),rgba(12,10,7,.72));
}
.cta h2{color:var(--creme);max-width:20ch;margin-inline:auto}
.cta .lead{color:#DDD1BD;max-width:58ch;margin:1.2rem auto 2.2rem}

/* --------------------------------------------------------------------------
   19. FORMULAIRE
   -------------------------------------------------------------------------- */
.form-wrap{
  display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));
  align-items:start;
}
.form{
  background:var(--blanc);border-radius:var(--r-lg);padding:clamp(1.6rem,3.5vw,2.8rem);
  box-shadow:var(--sh-l);border:1px solid rgba(217,177,105,.28);position:relative;overflow:hidden;
}
.form::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--grad-or)}
.form__grid{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.champ{position:relative;display:flex;flex-direction:column;gap:.45rem}
.champ--full{grid-column:1/-1}
.champ label{
  font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--texte-doux);
}
.champ label .req{color:#B3421F}
.champ input,.champ textarea,.champ select{
  width:100%;padding:.92rem 1.05rem;border-radius:var(--r-sm);
  background:var(--creme);border:1px solid rgba(167,124,46,.26);
  font-size:.98rem;font-weight:300;color:var(--texte);
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
}
.champ textarea{min-height:150px;resize:vertical;line-height:1.65}
.champ select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A77C2E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:17px;padding-right:2.6rem;cursor:pointer}
.champ input:focus,.champ textarea:focus,.champ select:focus{
  outline:none;border-color:var(--or);background:var(--blanc);
  box-shadow:0 0 0 4px rgba(217,177,105,.18);
}
.champ.is-error input,.champ.is-error textarea,.champ.is-error select{border-color:#C0502B;box-shadow:0 0 0 4px rgba(192,80,43,.1)}
.champ.is-ok input,.champ.is-ok textarea,.champ.is-ok select{border-color:#5E8C55}
.champ__err{font-size:.78rem;color:#A8401F;min-height:1.1em;display:none}
.champ.is-error .champ__err{display:block;animation:shake .35s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.champ__compteur{position:absolute;right:.2rem;bottom:-1.25rem;font-size:.72rem;color:var(--texte-doux);opacity:.75}
.hp{position:absolute!important;left:-9999px!important;opacity:0}

.consent{display:flex;gap:.75rem;align-items:flex-start;font-size:.86rem;color:var(--texte-doux);line-height:1.55}
.consent input{width:19px;height:19px;flex:none;margin-top:.22rem;accent-color:var(--or-fonce);cursor:pointer}
.consent a{color:var(--or-deep);text-decoration:underline}

.form__msg{
  display:none;margin-top:1.2rem;padding:1rem 1.2rem;border-radius:var(--r-sm);
  font-size:.93rem;line-height:1.6;
}
.form__msg.is-ok{display:block;background:#EDF5E9;border:1px solid #9FC093;color:#2F5327}
.form__msg.is-ko{display:block;background:#FBEDE8;border:1px solid #DFA78F;color:#8C3517}
.btn[disabled]{opacity:.6;pointer-events:none}
.btn .spin{width:15px;height:15px;border:2px solid rgba(42,29,5,.3);border-top-color:#2A1D05;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Coordonnées */
.coord{display:grid;gap:1rem}
.coord__item{
  display:flex;gap:1.1rem;align-items:flex-start;
  background:var(--blanc);border-radius:var(--r);padding:1.25rem 1.4rem;
  border:1px solid rgba(217,177,105,.24);box-shadow:var(--sh-s);
  transition:transform var(--t-fast),box-shadow var(--t-fast);
}
.coord__item:hover{transform:translateX(5px);box-shadow:var(--sh-m)}
.coord__ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:14px;flex:none;
  background:var(--grad-or-doux);
}
.coord__ico svg{width:21px;height:21px;stroke:#3A2A0C;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.coord__item h4{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--or-deep);margin-bottom:.25rem;font-family:var(--font-texte);font-weight:600}
.coord__item p,.coord__item a{font-size:.98rem;color:var(--texte-doux);line-height:1.55}
.coord__item a:hover{color:var(--or-deep)}

/* --------------------------------------------------------------------------
   20. PIED DE PAGE
   -------------------------------------------------------------------------- */
.footer{position:relative;background:var(--grad-noir);color:#BFB29C;overflow:hidden;isolation:isolate}
.footer::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.14;
  background:url('../img/bokeh.jpg') center/cover;
}
.footer__top{
  display:grid;gap:clamp(2rem,4vw,3rem);padding-block:clamp(3.2rem,7vw,5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
}
.footer h4{
  font-family:var(--font-texte);font-size:.74rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--or);margin-bottom:1.1rem;
}
.footer__about p{font-size:.94rem;line-height:1.75;max-width:38ch}
.footer__logo{margin-bottom:1.1rem}
.footer__logo .logo__name{color:var(--creme)}
.footer ul{display:grid;gap:.65rem}
.footer ul a{font-size:.94rem;transition:color var(--t-fast),padding-left var(--t-fast);display:inline-block}
.footer ul a:hover{color:var(--or-clair);padding-left:6px}
.footer__bas{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  padding-block:1.5rem;border-top:1px solid rgba(217,177,105,.18);font-size:.82rem;
}
.footer__bas a:hover{color:var(--or-clair)}
.footer__soc{display:flex;gap:.6rem}
.footer__soc a{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(217,177,105,.3);transition:background var(--t-fast),transform var(--t-fast),border-color var(--t-fast);
}
.footer__soc a:hover{background:var(--grad-or);transform:translateY(-3px);border-color:transparent}
.footer__soc svg{width:17px;height:17px;stroke:var(--or);fill:none;stroke-width:1.6}
.footer__soc a:hover svg{stroke:#2A1D05}
.footer__eng{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.footer__eng span{
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.35rem .75rem;border-radius:999px;border:1px solid rgba(217,177,105,.3);color:var(--or);
}

/* Bouton retour haut */
.top{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:5000;
  display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
  background:var(--grad-or);box-shadow:var(--sh-or);
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity var(--t),transform var(--t),visibility var(--t);
}
.top.is-on{opacity:1;visibility:visible;transform:none}
.top:hover{transform:translateY(-4px)}
.top svg{width:19px;height:19px;stroke:#2A1D05;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* --------------------------------------------------------------------------
   21. DÉCOR (feuilles SVG)
   -------------------------------------------------------------------------- */
.deco{position:absolute;z-index:0;pointer-events:none;opacity:.34;display:block}
.deco img{display:block;width:100%;height:auto}
.deco--tl{top:-26px;left:-56px;width:clamp(130px,16vw,230px);transform:rotate(-14deg)}
.deco--tr{top:-34px;right:-62px;width:clamp(130px,16vw,240px);transform:scaleX(-1) rotate(-10deg)}
.deco--bl{bottom:-44px;left:-62px;width:clamp(120px,15vw,210px);transform:rotate(166deg)}
.deco--br{bottom:-36px;right:-56px;width:clamp(120px,15vw,210px);transform:scaleX(-1) rotate(172deg)}
/* dans les en-têtes de page, on descend le décor sous la barre de navigation */
.hero-page .deco--tl,.hero-page .deco--tr{top:clamp(72px,12vw,110px);opacity:.26}
.section{overflow:hidden}
.section>.wrap,.section>.wrap-lg{position:relative;z-index:1}
@media (max-width:760px){.deco{opacity:.3}}

/* --------------------------------------------------------------------------
   22. ANIMATIONS AU SCROLL
   -------------------------------------------------------------------------- */
[data-anim]{opacity:0;will-change:transform,opacity}
[data-anim="up"]{transform:translateY(38px)}
[data-anim="down"]{transform:translateY(-30px)}
[data-anim="left"]{transform:translateX(-45px)}
[data-anim="right"]{transform:translateX(45px)}
[data-anim="zoom"]{transform:scale(.92)}
[data-anim="blur"]{filter:blur(12px);transform:translateY(22px)}
[data-anim].is-in{
  opacity:1;transform:none;filter:none;
  transition:opacity .85s cubic-bezier(.19,1,.22,1),transform .95s cubic-bezier(.19,1,.22,1),filter .85s ease;
}
.hero__inner>*{opacity:0;transform:translateY(26px)}
.loaded .hero__inner>*{animation:heroIn .95s cubic-bezier(.19,1,.22,1) forwards}
.loaded .hero__inner>*:nth-child(1){animation-delay:.12s}
.loaded .hero__inner>*:nth-child(2){animation-delay:.24s}
.loaded .hero__inner>*:nth-child(3){animation-delay:.36s}
.loaded .hero__inner>*:nth-child(4){animation-delay:.48s}
.loaded .hero__inner>*:nth-child(5){animation-delay:.6s}
.loaded .hero__inner>*:nth-child(6){animation-delay:.72s}
.loaded .hero__inner>*:nth-child(7){animation-delay:.84s}
@keyframes heroIn{to{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   23. RESPONSIVE & PRÉFÉRENCES
   -------------------------------------------------------------------------- */
@media (max-width:700px){
  .hero{min-height:auto;padding-block:8rem 4rem}
  .split__badge{display:none}   /* les visuels panoramiques sont trop bas pour l’accueillir */
  .footer__bas{justify-content:center;text-align:center}
}
@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-anim]{opacity:1!important;transform:none!important;filter:none!important}
  .hero__inner>*{opacity:1;transform:none}
  .marquee__track{animation:none}
}
@media print{
  .header,.drawer,.top,.preloader,.cursor,.cursor-dot,.progress,.hero__canvas{display:none!important}
  body{background:#fff;color:#000}
}

/* --------------------------------------------------------------------------
   24. SIGNATURE DE MARQUE (hero) — reconstruite en texte, nette à tout écran
   -------------------------------------------------------------------------- */
.wordmark{
  position:relative;display:inline-block;text-align:center;
  padding:clamp(.6rem,2vw,1.2rem) clamp(1rem,3vw,2rem);
  line-height:1;user-select:none;
}
.wordmark__ab{
  display:block;font-family:var(--font-titre);font-weight:700;
  font-size:clamp(4rem,12vw,9rem);letter-spacing:.01em;
  background:linear-gradient(170deg,#F6E2B0 0%,#C89B4A 32%,#8C6520 52%,#E7CD92 68%,#B4873A 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 26px rgba(238,205,140,.5)) drop-shadow(0 10px 30px rgba(0,0,0,.6));
}
.wordmark__bande{
  position:absolute;left:-26%;right:-26%;top:50%;transform:translateY(-46%);
  display:flex;align-items:center;justify-content:center;gap:clamp(.5rem,1.5vw,1rem);
}
.wordmark__bande::before,.wordmark__bande::after{
  content:"";flex:1;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent 0,#E4C68A 18%,#F3DFAE 50%,#E4C68A 82%,transparent);
  box-shadow:0 0 12px rgba(238,205,140,.45);
}
.wordmark__nom{
  font-family:var(--font-titre);font-weight:600;white-space:nowrap;
  font-size:clamp(.82rem,2.3vw,1.55rem);letter-spacing:clamp(.1em,.45vw,.18em);
  color:#FBF0D2;text-transform:uppercase;
  text-shadow:0 0 6px rgba(12,10,7,.95),0 0 16px rgba(12,10,7,.85),0 2px 12px rgba(0,0,0,.8),
              0 0 22px rgba(238,205,140,.4);
}
.wordmark__sub{
  display:block;margin-top:clamp(.5rem,1.6vw,1rem);
  font-family:var(--font-titre);font-weight:400;text-transform:uppercase;
  font-size:clamp(.72rem,1.9vw,1.15rem);letter-spacing:clamp(.3em,1vw,.5em);
  color:#E3C98E;text-shadow:0 0 16px rgba(238,205,140,.4);
  padding-left:.4em;
}
.wordmark__feuille{
  position:absolute;right:13%;top:5%;
  width:clamp(26px,6vw,58px);opacity:.95;
  filter:drop-shadow(0 0 10px rgba(238,205,140,.6));
}
.wordmark__feuille svg{width:100%;height:auto;fill:#EFD7A0}

/* === STYLES SPÉCIFIQUES AUX PAGES === */

/* Page gammes */
.gamme-bloc__sous{font-size:.76rem;letter-spacing:.17em;text-transform:uppercase;font-weight:500;color:var(--or-deep);margin:-.3rem 0 1.1rem}
.gamme__list--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));display:grid;margin:1.4rem 0 1.8rem}
.prods__titre{font-size:1.05rem;letter-spacing:.02em;margin-bottom:.9rem}
.prods{display:grid;gap:.7rem;margin-bottom:1.6rem}
.prod{
  display:flex;gap:.9rem;align-items:flex-start;background:var(--blanc);
  border:1px solid rgba(217,177,105,.26);border-radius:var(--r);padding:.85rem 1.1rem;
  box-shadow:var(--sh-s);transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);
}
.prod:hover{transform:translateX(5px);box-shadow:var(--sh-m);border-color:rgba(217,177,105,.55)}
.prod__ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;background:var(--grad-or-doux)}
.prod__ico svg{width:16px;height:16px;stroke:#3A2A0C;fill:none;stroke-width:1.8}
.prod__txt{display:flex;flex-direction:column;gap:.1rem;line-height:1.45}
.prod__txt b{font-weight:500;font-size:1rem}
.prod__ml{font-size:.74rem;letter-spacing:.1em;color:var(--or-deep);font-weight:500}
.prod__acc{font-size:.88rem;color:var(--texte-doux)}
.prod__ing{font-size:.78rem;color:var(--or-deep);letter-spacing:.04em}
.pourqui{
  font-size:.94rem;color:var(--texte-doux);background:rgba(217,177,105,.1);
  border-left:3px solid var(--or);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:.85rem 1.1rem;margin-bottom:1.5rem;
}
.pourqui b{color:var(--texte);font-weight:500}
.guides{display:grid;gap:.8rem;margin-top:clamp(2rem,4vw,3rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.guide{
  display:flex;flex-direction:column;gap:.55rem;background:var(--blanc);border-radius:var(--r-lg);
  padding:1.5rem;border:1px solid rgba(217,177,105,.26);box-shadow:var(--sh-s);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.guide:hover{transform:translateY(-7px);box-shadow:var(--sh-m);border-color:rgba(217,177,105,.6)}
.guide__ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--grad-or-doux)}
.guide__ico svg{width:22px;height:22px;stroke:#3A2A0C;fill:none;stroke-width:1.6}
.guide__q{font-family:var(--font-titre);font-size:1.12rem;line-height:1.35;color:var(--texte)}
.guide__r{display:inline-flex;align-items:center;gap:.5rem;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--or-deep);font-weight:500;margin-top:auto}
.guide__r svg{width:14px;height:14px;transition:transform var(--t-fast)}
.guide:hover .guide__r svg{transform:translateX(5px)}


/* Page engagements */
.origine__pays{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--or-deep);font-weight:600;margin-bottom:.3rem}
.etapes{display:grid;gap:clamp(1rem,2.4vw,1.8rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));counter-reset:e}
.etape{
  position:relative;background:var(--blanc);border-radius:var(--r-lg);padding:clamp(1.6rem,3vw,2.2rem);
  border:1px solid rgba(217,177,105,.24);box-shadow:var(--sh-m);overflow:hidden;
  transition:transform var(--t),box-shadow var(--t);
}
.etape:hover{transform:translateY(-8px);box-shadow:var(--sh-l)}
.etape__n{
  position:absolute;right:.6rem;top:-.4rem;font-family:var(--font-titre);font-size:4.6rem;font-weight:700;
  line-height:1;color:rgba(217,177,105,.17);
}
.etape h3{margin-bottom:.5rem;font-size:1.25rem}
.etape p{color:var(--texte-doux);font-size:.95rem}
.etape .ico{width:54px;height:54px;margin-bottom:1rem}
.etape .ico svg{width:24px;height:24px}


/* Comparatif */
.comp-wrap{overflow-x:auto;border-radius:var(--r-lg);box-shadow:var(--sh-m);background:var(--blanc);border:1px solid rgba(217,177,105,.26)}
.comp{width:100%;min-width:620px;border-collapse:collapse;font-size:.95rem}
.comp thead th{
  background:linear-gradient(160deg,#1C1409,#2C200D);color:var(--or-clair);
  font-family:var(--font-texte);font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding:1.05rem 1.2rem;text-align:left;
}
.comp thead th:last-child{background:var(--grad-or);color:#2A1D05}
.comp tbody th{
  text-align:left;padding:1.1rem 1.2rem;font-family:var(--font-texte);font-weight:500;font-size:.8rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--or-deep);white-space:nowrap;vertical-align:top;
}
.comp td{padding:1.1rem 1.2rem;vertical-align:top;line-height:1.6}
.comp tbody tr+tr th,.comp tbody tr+tr td{border-top:1px solid rgba(217,177,105,.2)}
.comp__autres{color:var(--texte-doux);opacity:.85}
.comp__nous{background:rgba(217,177,105,.09);color:var(--texte);font-weight:400;position:relative}
.comp__ok{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--grad-or-doux);margin-right:.6rem;vertical-align:-4px}
.comp__ok svg{width:11px;height:11px;stroke:#3A2A0C;stroke-width:3;fill:none}


/* Pages de texte */
.texte{max-width:78ch;margin-inline:auto}
.texte h2{font-size:clamp(1.4rem,1.2rem + .9vw,1.95rem);margin:2.4rem 0 .8rem}
.texte h2:first-child{margin-top:0}
.texte h3{font-size:1.15rem;margin:1.6rem 0 .5rem;color:var(--or-deep)}
.texte p{color:var(--texte-doux)}
.texte a{color:var(--or-deep);text-decoration:underline;text-underline-offset:3px}
.texte a:hover{color:var(--texte)}
.aremplir{background:rgba(217,177,105,.22);border-radius:4px;padding:.05em .35em;color:var(--or-deep);font-style:italic}
.maj{margin-top:2.5rem;font-size:.86rem;opacity:.75}


.merci__ico{
  display:grid;place-items:center;width:92px;height:92px;border-radius:50%;margin:0 auto 1.6rem;
  background:var(--grad-or);box-shadow:0 18px 50px -14px rgba(217,177,105,.9);
}
.merci__ico svg{width:42px;height:42px;stroke:#2A1D05;stroke-width:2.4;fill:none}