/* ==========================================================================
   MISTER SMOKE · BLACK EDITION
   Assets Higgsfield centralisés ici. Pour auto-héberger, télécharge les PNG
   et remplace les URL cloudfront par des chemins locaux (ex. assets/hero.png).
   ========================================================================== */

:root{
  --void:#000000;
  --ink:#08090b;
  --surface:#111318;
  --surface-2:#16181f;
  --line:rgba(244,244,242,.10);
  --text:#f4f4f2;
  --muted:#8a8d94;
  --muted-2:#5d616a;
  --teal:#1fd5c7;
  --crimson:#e8365f;
  --ember:#f2a03d;

  --img-hero:url("https://d8j0ntlcm91z4.cloudfront.net/user_2zlGPaSf4FMFwTflYPygUVK0hbq/hf_20260701_142543_d77d6618-79e4-48bc-b1f4-3e0f21f14ba0.png");
  --img-smoke-blue:url("https://d8j0ntlcm91z4.cloudfront.net/user_2zlGPaSf4FMFwTflYPygUVK0hbq/hf_20260701_142554_ea17ebcb-7b81-4e5f-9c42-7924795b3b58.png");
  --img-smoke-crimson:url("https://d8j0ntlcm91z4.cloudfront.net/user_2zlGPaSf4FMFwTflYPygUVK0hbq/hf_20260701_142602_a952c4e0-6f49-4e80-95f7-f269780ae4fb.png");

  --maxw:1320px;
  --pad-y:clamp(6rem,12vh,11rem);
  --pad-x:clamp(1.4rem,6vw,7rem);
}

@property --accent{ syntax:'<color>'; inherits:true; initial-value:#1fd5c7; }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ --accent:#1fd5c7; transition:--accent .7s ease; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  background:var(--void);
  color:var(--text);
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-size:clamp(1rem,.55vw + .85rem,1.075rem);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body[data-locked="true"]{ overflow:hidden; height:100vh; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
em{ font-style:normal; color:var(--teal); }

/* ---------- typographie utilitaire ---------- */
.eyebrow{
  font-size:.74rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
  display:inline-flex; align-items:center; gap:.75rem;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--teal); }
.section-title{
  font-family:"Archivo", sans-serif; font-weight:800;
  font-size:clamp(2rem,4.4vw,3.9rem); line-height:1.02;
  letter-spacing:-.02em; margin-top:1.4rem;
}

/* ---------- boutons ---------- */
.btn{
  --bh:#fff;
  font-family:"Space Grotesk", sans-serif;
  font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  padding:1.05rem 1.7rem; border-radius:2px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; transition:.35s cubic-bezier(.16,1,.3,1);
  white-space:nowrap;
}
.btn--solid{ background:var(--teal); color:#04110f; border-color:var(--teal); }
.btn--solid:hover{ background:#4ee7db; border-color:#4ee7db; transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--text); transform:translateY(-2px); }
.btn--nav{ padding:.8rem 1.25rem; font-size:.72rem; background:transparent; border-color:var(--line); }
.btn--nav:hover{ border-color:var(--teal); color:var(--teal); }
.btn--mini{ padding:.7rem 1.1rem; font-size:.7rem; background:var(--teal); color:#04110f; }
.btn--mini-ghost{ background:transparent; border-color:var(--line); color:var(--text); }
.btn:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }

/* ==========================================================================
   GATE 18+
   ========================================================================== */
.gate{
  position:fixed; inset:0; z-index:1000;
  background:radial-gradient(120% 120% at 50% 0%, #0c1414 0%, #000 60%);
  display:grid; place-items:center; padding:2rem;
  transition:opacity .6s ease, visibility .6s;
}
.gate.is-open{ opacity:0; visibility:hidden; pointer-events:none; }
.gate__inner{ max-width:560px; text-align:center; }
.gate__mark{ font-family:"Archivo"; font-weight:900; letter-spacing:.16em; font-size:1.05rem; }
.gate__eyebrow{ margin-top:2.4rem; font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--teal); }
.gate__title{ font-family:"Archivo"; font-weight:800; font-size:clamp(1.5rem,3.4vw,2.3rem); line-height:1.1; margin-top:1rem; letter-spacing:-.01em; }
.gate__text{ color:var(--muted); margin-top:1.1rem; }
.gate__actions{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top:2.2rem; }
.gate__legal{ margin-top:2.4rem; font-size:.72rem; color:var(--muted-2); line-height:1.5; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:1.35rem var(--pad-x);
  transition:background .4s ease, padding .4s ease, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav--scrolled{
  background:rgba(6,7,9,.72); backdrop-filter:blur(14px);
  padding-top:.95rem; padding-bottom:.95rem; border-color:var(--line);
}
.nav__logo{ display:flex; flex-direction:column; line-height:1; }
.nav__logo-main{ font-family:"Archivo"; font-weight:900; letter-spacing:.14em; font-size:1rem; }
.nav__logo-sub{ font-size:.62rem; letter-spacing:.42em; text-transform:uppercase; color:var(--crimson); margin-top:.3rem; }
.nav__links{ display:flex; gap:2.2rem; margin-left:auto; }
.nav__links a{ font-size:.8rem; letter-spacing:.06em; color:var(--muted); transition:color .3s; position:relative; }
.nav__links a:hover{ color:var(--text); }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--teal); transition:width .3s; }
.nav__links a:hover::after{ width:100%; }
.nav__burger{ display:none; background:none; border:none; flex-direction:column; gap:6px; cursor:pointer; padding:6px; }
.nav__burger span{ width:24px; height:2px; background:var(--text); transition:.3s; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--void); }
.hero__smoke{
  position:absolute; inset:-8%; z-index:0;
  background:var(--img-hero) center/cover no-repeat;
  opacity:.92; animation:heroDrift 26s ease-in-out infinite alternate; will-change:transform;
}
@keyframes heroDrift{ from{ transform:scale(1.05) translate(0,0); } to{ transform:scale(1.14) translate(-2.5%,-1.5%); } }
.hero__particles{ position:absolute; inset:0; z-index:1; }
.hero__vignette{
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.35) 42%,transparent 70%),
    linear-gradient(0deg,rgba(0,0,0,.92) 2%,transparent 40%),
    radial-gradient(90% 60% at 70% 40%,transparent 30%,rgba(0,0,0,.55) 100%);
}
.hero__content{ position:relative; z-index:3; padding:0 var(--pad-x) clamp(4rem,10vh,7.5rem); max-width:var(--maxw); width:100%; margin:0 auto; }
.hero__eyebrow{ font-size:.78rem; letter-spacing:.36em; text-transform:uppercase; color:var(--teal); margin-bottom:1.6rem; }
.hero__title{ font-family:"Archivo"; font-weight:900; line-height:.86; letter-spacing:-.02em; font-size:clamp(3.4rem,13vw,10.5rem); }
.hero__title span{ display:block; }
.hero__title-accent{ color:transparent; -webkit-text-stroke:1.5px var(--teal); text-stroke:1.5px var(--teal); }
.hero__lede{ margin-top:1.9rem; max-width:30ch; color:#cfd2d6; font-size:clamp(1.02rem,1.4vw,1.25rem); }
.hero__actions{ display:flex; gap:1rem; margin-top:2.4rem; flex-wrap:wrap; }
.hero__scroll{ position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:3; width:24px; height:40px; border:1px solid var(--line); border-radius:14px; }
.hero__scroll span{ position:absolute; top:8px; left:50%; width:3px; height:8px; background:var(--teal); border-radius:2px; transform:translateX(-50%); animation:scrollDot 1.8s ease infinite; }
@keyframes scrollDot{ 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 100%{opacity:0;transform:translate(-50%,14px)} }

/* ==========================================================================
   MANIFESTE
   ========================================================================== */
.manifesto{ min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--pad-y) var(--pad-x); background:var(--void); }
.manifesto__eyebrow{ font-size:.74rem; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); margin-bottom:2.5rem; }
.manifesto__line{ font-family:"Archivo"; font-weight:800; font-size:clamp(2.6rem,9vw,7rem); line-height:1.02; letter-spacing:-.02em; }

/* ==========================================================================
   PRODUIT
   ========================================================================== */
.product{ padding:var(--pad-y) var(--pad-x); background:var(--ink); max-width:var(--maxw); margin:0 auto; }
.product__head{ max-width:46rem; }
.product__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); margin-top:clamp(3rem,6vh,5rem); align-items:start; }
.product__stat{ border-top:1px solid var(--line); padding-top:1.6rem; }
.product__stat-num{ display:block; font-family:"Archivo"; font-weight:900; font-size:clamp(3.6rem,9vw,7rem); line-height:.9; letter-spacing:-.03em; background:linear-gradient(180deg,#fff,#7f8894); -webkit-background-clip:text; background-clip:text; color:transparent; }
.product__stat-label{ display:block; color:var(--muted); margin-top:1rem; max-width:22ch; }
.specs{ list-style:none; display:flex; flex-direction:column; }
.spec{ padding:1.5rem 0; border-top:1px solid var(--line); }
.spec:last-child{ border-bottom:1px solid var(--line); }
.spec__title{ display:block; font-weight:700; font-size:1.12rem; }
.spec__desc{ display:block; color:var(--muted); margin-top:.4rem; }

/* ==========================================================================
   SAVEURS · moteur chromatique
   ========================================================================== */
.flavors{ position:relative; height:640vh; background:var(--void); }
.flavors__stage{ position:sticky; top:0; height:100svh; overflow:hidden; display:flex; flex-direction:column; }
.flavors__world{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 55% at 50% 62%, color-mix(in srgb, var(--accent) 55%, transparent) 0%, transparent 62%),
    radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--accent) 35%, transparent) 0%, transparent 55%),
    #000;
}
.flavors__texture{
  position:absolute; inset:-6%; z-index:1;
  background:var(--img-smoke-blue) center/cover no-repeat;
  mix-blend-mode:screen; opacity:.35;
  animation:heroDrift 30s ease-in-out infinite alternate;
}
.flavors__bottle{
  position:absolute; inset:-4%; z-index:2;
  background:center/contain no-repeat;
  background-position:80% 56%;
  opacity:.98; transition:opacity .4s ease;
  will-change:opacity;
}
.flavors__bottle.is-swapping{ opacity:0; }
.flavors__vignette{
  position:absolute; inset:0; z-index:3;
  background:
    linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 40%, transparent 72%),
    linear-gradient(0deg, rgba(0,0,0,.8) 0%, transparent 32%),
    radial-gradient(90% 70% at 30% 50%, transparent 30%, rgba(0,0,0,.35) 100%);
}
.flavors__stage::after{ content:""; position:absolute; inset:0; z-index:3; background:radial-gradient(80% 80% at 50% 50%, transparent 40%, rgba(0,0,0,.6) 100%); }
.flavors__head{ position:relative; z-index:4; display:flex; justify-content:space-between; align-items:center; padding:6.5rem var(--pad-x) 0; }
.flavors__count{ font-family:"Archivo"; font-weight:800; font-size:.95rem; letter-spacing:.1em; color:#cfd2d6; }
.flavors__count span{ color:var(--text); }
.flavors__center{ position:relative; z-index:4; margin:auto auto auto 0; text-align:left; padding:0 var(--pad-x); max-width:32rem; transition:opacity .35s ease, transform .35s ease; }
.flavors__center.is-swapping{ opacity:0; transform:translateY(14px); }
.flavors__profile{ font-size:.82rem; letter-spacing:.32em; text-transform:uppercase; color:#fff; opacity:.85; margin-bottom:1.3rem; }
.flavors__name{ font-family:"Archivo"; font-weight:900; font-size:clamp(2.6rem,8vw,6.4rem); line-height:.96; letter-spacing:-.02em; text-shadow:0 4px 60px rgba(0,0,0,.5); }
.flavors__notes{ margin-top:1.4rem; color:#e9ebec; max-width:34ch; margin-left:auto; margin-right:auto; }
.flavors__center .btn{ margin-top:2.2rem; }
.flavors__ticks{ position:absolute; right:clamp(1rem,3vw,2.6rem); top:50%; transform:translateY(-50%); z-index:4; list-style:none; display:flex; flex-direction:column; gap:10px; }
.flavors__ticks li{ width:22px; height:2px; background:rgba(255,255,255,.22); transition:.4s; }
.flavors__ticks li.on{ background:#fff; width:34px; }
.flavors__hint{ position:relative; z-index:4; text-align:center; padding-bottom:2.2rem; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.55); }

/* ==========================================================================
   GRILLE DES SAVEURS
   ========================================================================== */
.flavor-grid{ padding:var(--pad-y) var(--pad-x); background:var(--ink); max-width:var(--maxw); margin:0 auto; }
.flavor-grid__head{ max-width:44rem; margin-bottom:clamp(2.4rem,5vh,3.6rem); }
.flavor-grid__list{ display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; }
.flavor-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem;
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  padding:1rem .8rem 1.2rem; cursor:pointer; font-family:inherit; color:var(--text);
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .35s;
}
.flavor-card:hover, .flavor-card:focus-visible{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--card-accent) 60%, var(--line)); }
.flavor-card__img{
  width:100%; aspect-ratio:3/4; border-radius:4px; background-color:#000;
  background-size:contain; background-position:center; background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.flavor-card__profile{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--card-accent); margin-top:.2rem; }
.flavor-card__name{ font-family:"Archivo"; font-weight:700; font-size:.86rem; line-height:1.2; }

/* ==========================================================================
   PRIX
   ========================================================================== */
.pricing{ padding:var(--pad-y) var(--pad-x); background:var(--ink); max-width:var(--maxw); margin:0 auto; }
.pricing__head{ max-width:44rem; margin-bottom:clamp(3rem,6vh,5rem); }
.pricing__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.price{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:2.4rem 2rem; overflow:hidden; transition:.4s cubic-bezier(.16,1,.3,1); }
.price:hover{ transform:translateY(-6px); border-color:rgba(244,244,242,.24); }
.price::before{ content:""; position:absolute; left:0; top:0; width:100%; height:2px; background:var(--muted); opacity:.4; }
.price--unit::before{ background:var(--crimson); opacity:1; }
.price--best::before{ background:var(--teal); opacity:1; }
.price__label{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.price__amount{ font-family:"Archivo"; font-weight:900; font-size:clamp(3.4rem,7vw,5rem); line-height:1; letter-spacing:-.03em; margin:1.4rem 0 .6rem; }
.price__amount span{ font-size:.32em; letter-spacing:.02em; margin-left:.3rem; color:var(--muted); vertical-align:top; }
.price__note{ font-size:.85rem; color:var(--muted); }
.price--best .price__note{ color:var(--teal); }
.pricing__specs{ display:flex; flex-wrap:wrap; gap:.7rem 2rem; margin-top:2.6rem; padding-top:2rem; border-top:1px solid var(--line); }
.pricing__specs span{ font-size:.82rem; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; display:inline-flex; align-items:center; gap:.6rem; }
.pricing__specs span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--teal); }

/* ==========================================================================
   POINTS DE VENTE
   ========================================================================== */
.locator{ display:grid; grid-template-columns:1.1fr 1fr; min-height:90svh; background:var(--void); }
.locator__map{ position:relative; overflow:hidden; background:#000; }
.locator__svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.locator__map::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 60%,var(--void) 100%),linear-gradient(0deg,var(--void),transparent 30%); }
.locator__points{ position:absolute; inset:0; z-index:2; }
.point{ position:absolute; width:14px; height:14px; transform:translate(-50%,-50%); cursor:pointer; }
.point i{ position:absolute; inset:0; border-radius:50%; background:var(--ember); box-shadow:0 0 12px 2px rgba(242,160,61,.9); }
.point::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(242,160,61,.6); animation:pulse 2.4s ease-out infinite; }
.point.is-active i{ background:var(--teal); box-shadow:0 0 16px 4px rgba(31,213,199,.95); }
@keyframes pulse{ 0%{transform:scale(.6);opacity:.9} 100%{transform:scale(2.4);opacity:0} }
.locator__panel{ padding:var(--pad-y) var(--pad-x); display:flex; flex-direction:column; justify-content:center; }
.locator__text{ color:var(--muted); margin-top:1.4rem; max-width:36ch; }
.locator__card{ margin-top:2.6rem; background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:1.8rem; max-width:23rem; }
.locator__card-city{ font-family:"Archivo"; font-weight:800; font-size:1.6rem; }
.locator__card-meta{ display:flex; align-items:center; gap:.6rem; color:var(--muted); font-size:.85rem; margin-top:.6rem; }
.locator__card-meta .dot{ width:7px; height:7px; border-radius:50%; background:#3ad29a; box-shadow:0 0 8px #3ad29a; }
.locator__card-line{ color:var(--muted); font-size:.85rem; margin-top:.9rem; }
.locator__card-actions{ display:flex; gap:.7rem; margin-top:1.4rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background:var(--ink); border-top:1px solid var(--line); padding:clamp(3.5rem,7vh,5.5rem) var(--pad-x) 2.5rem; }
.footer__brand{ display:flex; align-items:baseline; gap:1.4rem; flex-wrap:wrap; padding-bottom:2.6rem; border-bottom:1px solid var(--line); }
.footer__logo{ font-family:"Archivo"; font-weight:900; letter-spacing:.14em; font-size:1.4rem; }
.footer__tag{ color:var(--teal); font-size:.9rem; }
.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; padding:2.8rem 0; }
.footer__col{ display:flex; flex-direction:column; gap:.7rem; }
.footer__col-title{ font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--text); margin-bottom:.4rem; }
.footer__col a, .footer__col span{ color:var(--muted); font-size:.88rem; transition:color .3s; }
.footer__col a:hover{ color:var(--teal); }
.footer__legal{ display:grid; grid-template-columns:auto 1fr; gap:1.4rem; align-items:start; padding-top:2.4rem; border-top:1px solid var(--line); }
.footer__age{ display:grid; place-items:center; width:52px; height:52px; border:2px solid var(--crimson); border-radius:50%; font-family:"Archivo"; font-weight:900; color:var(--crimson); font-size:1rem; }
.footer__legal p{ font-size:.78rem; color:var(--muted-2); line-height:1.6; max-width:70ch; }
.footer__copy{ margin-top:.8rem; }

/* ==========================================================================
   FICHE PRODUIT (modale)
   ========================================================================== */
.sheet{ position:fixed; inset:0; z-index:500; display:grid; place-items:center; padding:1.5rem; visibility:hidden; }
.sheet.is-open{ visibility:visible; }
.sheet__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(6px); opacity:0; transition:opacity .4s; }
.sheet.is-open .sheet__backdrop{ opacity:1; }
.sheet__panel{ position:relative; z-index:1; width:min(30rem,100%); background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:2.4rem; transform:translateY(20px) scale(.98); opacity:0; transition:.45s cubic-bezier(.16,1,.3,1); }
.sheet.is-open .sheet__panel{ transform:none; opacity:1; }
.sheet__close{ position:absolute; top:1rem; right:1.2rem; background:none; border:none; color:var(--muted); font-size:1.8rem; line-height:1; cursor:pointer; transition:color .3s; }
.sheet__close:hover{ color:var(--text); }
.sheet__swatch{ width:100%; height:220px; border-radius:4px; background-color:#000; background-size:contain; background-position:center; background-repeat:no-repeat; }
.sheet__profile{ font-size:.76rem; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); margin-top:1.6rem; }
.sheet__name{ font-family:"Archivo"; font-weight:800; font-size:1.9rem; line-height:1.05; margin-top:.6rem; }
.sheet__notes{ color:var(--muted); margin-top:1rem; }
.sheet__specs{ list-style:none; margin-top:1.6rem; border-top:1px solid var(--line); }
.sheet__specs li{ display:flex; justify-content:space-between; padding:.85rem 0; border-bottom:1px solid var(--line); font-size:.9rem; }
.sheet__specs span{ color:var(--muted); }
.sheet__cta{ width:100%; margin-top:1.8rem; }
.sheet__legal{ text-align:center; font-size:.72rem; color:var(--muted-2); margin-top:1.2rem; }

/* ---------- reveals ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--d,0) * 90ms); }
.reveal.is-visible{ opacity:1; transform:none; }

.noscript{ position:fixed; bottom:0; left:0; right:0; background:var(--crimson); color:#fff; padding:1rem; text-align:center; font-size:.85rem; z-index:2000; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .nav__links{ display:none; }
  .btn--nav{ display:none; }
  .nav__burger{ display:flex; }
  .product__grid{ grid-template-columns:1fr; }
  .pricing__grid{ grid-template-columns:1fr; }
  .locator{ grid-template-columns:1fr; }
  .locator__map{ min-height:56svh; }
  .flavors{ height:560vh; }
  .flavors__center{ text-align:center; margin:auto; max-width:26rem; }
  .flavors__bottle{ opacity:.4; background-position:center 62%; }
  .flavors__vignette{ background:radial-gradient(90% 70% at 50% 50%, transparent 30%, rgba(0,0,0,.55) 100%); }
  .flavor-grid__list{ grid-template-columns:repeat(3,1fr); }
  .footer__cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .hero__content{ padding-bottom:5rem; }
  .footer__cols{ grid-template-columns:1fr; }
  .footer__legal{ grid-template-columns:1fr; }
  .flavors__head{ padding-top:5rem; }
  .flavor-grid__list{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- accessibilité mouvement ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .hero__smoke, .flavors__texture{ animation:none; }
}