/* L'Âge de Bière — site public, version 2 : clair, aéré, une couleur par bière. */
@font-face{font-family:"Big Shoulders Display";src:url(/static/fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Big Shoulders Display";src:url(/static/fonts/big-shoulders-display-latin-900-normal.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/static/fonts/instrument-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/static/fonts/instrument-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/static/fonts/instrument-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/static/fonts/instrument-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Grenze Gotisch";src:url(/static/fonts/grenze-gotisch-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Grenze Gotisch";src:url(/static/fonts/grenze-gotisch-latin-900-normal.woff2) format("woff2");font-weight:900;font-display:swap}

:root{
  --bg:#F6F5F1; --surface:#FFFFFF; --ink:#131517; --ink-2:#3B3F44; --muted:#62666B; --line:#DEDBD3;
  --amber:#E2B657; --ink-soft:#1E2124; --cream:#F5F3EC;
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --gothic:"Grenze Gotisch",Georgia,serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:28px;
  color-scheme:light;
}
@view-transition{navigation:auto}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
p,h1,h2,h3{margin:0}
h1,h2,h3{text-wrap:balance}
.wrap{max-width:1360px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
@media (min-width:900px){.wrap{padding-left:max(48px,env(safe-area-inset-left,0px));padding-right:max(48px,env(safe-area-inset-right,0px))}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px}
.skip:focus{left:12px}
.small{font-size:14px;color:var(--muted)}
.empty{margin-top:24px;color:var(--muted)}

/* En-tête */
.head{position:sticky;top:0;z-index:30;background:rgba(246,245,241,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s;padding-top:env(safe-area-inset-top,0px)}
.head.scrolled{border-bottom-color:var(--line)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;min-height:72px;flex-wrap:wrap;padding-block:8px}
.brand{text-decoration:none;display:inline-flex;line-height:1}
.brand-txt{display:inline-flex;align-items:baseline;gap:8px}
.brand-top{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.18em}
.brand-main{font-family:var(--gothic);font-weight:700;font-size:34px}
.brand-logo{display:inline-flex;align-items:center;background:#23272B;border-radius:10px;padding:6px 12px}
.brand-logo img{height:44px;width:auto;max-width:200px;object-fit:contain}
.brand-logo-foot{background:none;padding:0}
.nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-weight:600;font-size:15px;border-radius:999px;text-decoration:none;transition:background .2s}
.nav a:hover,.nav a[aria-current="page"]{background:rgba(19,21,23,.07)}
.nav .cta{background:var(--ink);color:var(--bg);padding:0 20px;margin-left:6px}
.nav .cta:hover{background:#2B2F33}

/* Typo */
.kicker{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
.kicker-amber{color:var(--amber)}
.mega{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(62px,9.4vw,148px);line-height:.86;letter-spacing:-.01em}
.h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(48px,6.4vw,96px);line-height:.88}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--ink-2);max-width:52ch}
.h2+.lead,.mega+.lead{margin-top:20px}
.gothic{font-family:var(--gothic);font-weight:700}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 28px;border-radius:999px;border:2px solid currentColor;background:transparent;font-weight:700;font-size:16px;text-decoration:none;transition:transform .2s ease,background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--on);color:var(--c);border-color:var(--on)}
.btn-ink{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-ink:hover{background:#2B2F33}
.arrow{display:inline-block;transition:transform .2s}
.btn:hover .arrow,.card:hover .arrow,.next:hover .arrow{transform:translateX(4px)}

/* Héros */
.hero{background:var(--c);color:var(--on);transition:background-color .7s ease,color .7s ease;overflow:hidden;border-radius:0 0 var(--radius) var(--radius)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center;padding-block:72px 64px;min-height:min(760px,calc(100svh - 80px))}
.hero-solo{grid-template-columns:minmax(0,1fr);min-height:0;padding-block:96px}
.hero-copy{display:flex;flex-direction:column;gap:30px;min-width:0}
.hero .kicker{margin:0}
.hero-beer{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 22px;align-items:end;padding-top:28px;border-top:2px solid currentColor;max-width:580px}
.hb-name{font-family:var(--gothic);font-weight:900;font-size:clamp(52px,6vw,84px);line-height:.85;grid-row:span 2}
.hb-meta{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.08em;text-transform:uppercase}
.hb-short{font-size:16px;opacity:.9}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.switch{display:flex;gap:10px;flex-wrap:wrap}
.switch button{position:relative;overflow:hidden;min-height:44px;padding:0 18px;border-radius:999px;border:2px solid currentColor;background:transparent;font-weight:700;font-size:14px;color:inherit;opacity:.65;transition:opacity .2s}
.switch button[aria-pressed="true"]{opacity:1}
.switch .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:currentColor}
.hero.running .switch button[aria-pressed="true"] .bar{animation:fill var(--dur,6000ms) linear forwards}
.hero.paused .switch .bar{animation-play-state:paused}
@keyframes fill{to{width:100%}}
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:520px}
.ghost{position:absolute;left:-10%;right:-10%;top:50%;transform:translateY(-50%) rotate(-8deg);text-align:center;font-family:var(--gothic);font-weight:900;font-size:clamp(140px,19vw,300px);line-height:1;opacity:.13;white-space:nowrap;pointer-events:none}
.bottle-frame{position:relative;width:min(300px,70%);aspect-ratio:3/5;max-width:100%;border-radius:200px 200px 26px 26px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.55);transform:rotate(3deg);background:rgba(0,0,0,.15)}
.bottle-frame img{width:100%;height:100%;object-fit:cover;object-position:center 68%}
.pop{animation:pop .7s cubic-bezier(.2,.9,.25,1.2) both}
@keyframes pop{from{transform:translateY(40px) rotate(-4deg) scale(.92);opacity:.2}to{transform:rotate(3deg);opacity:1}}
.rise{animation:rise .6s ease both}
@keyframes rise{from{transform:translateY(18px);opacity:.2}to{transform:none;opacity:1}}

/* Bandeau défilant */
.ticker{overflow:hidden;padding-block:26px;border-bottom:1px solid var(--line)}
.ticker p{display:flex;gap:28px;width:max-content;font-family:var(--display);font-weight:900;font-size:clamp(34px,4vw,52px);text-transform:uppercase;line-height:1;animation:scroll 34s linear infinite;white-space:nowrap}
.ticker .alt{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.ticker .star{color:var(--amber)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* Sections */
.section{padding-block:clamp(72px,10vw,128px)}
.page-top{padding-top:clamp(48px,7vw,96px)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:48px}
.sec-head .lead{max-width:44ch;margin:0}

/* Rayon et cartes */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(290px,360px);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));scroll-padding-left:max(20px,env(safe-area-inset-left,0px));scrollbar-width:thin}
@media (min-width:900px){.rail{padding-left:max(48px,calc((100vw - 1360px)/2 + 48px));scroll-padding-left:max(48px,calc((100vw - 1360px)/2 + 48px))}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:24px;margin-top:40px}
.card{scroll-snap-align:start;position:relative;display:flex;flex-direction:column;height:560px;border-radius:var(--radius);overflow:hidden;background:var(--c);color:var(--on);text-decoration:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.card:hover,.card:focus-visible{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 30px 60px -28px rgba(0,0,0,.45)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;padding:24px 24px 0;min-height:68px}
.card-abv{font-family:var(--display);font-weight:900;font-size:56px;line-height:.8;font-variant-numeric:tabular-nums}
.card-abv small{font-size:24px;margin-left:2px}
.card-num{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.16em;opacity:.8}
.card-img{flex:1;display:flex;align-items:center;justify-content:center;padding:16px 0;min-height:0}
.card-img img{height:100%;max-height:310px;width:auto;aspect-ratio:3/5;object-fit:cover;object-position:center 68%;border-radius:120px 120px 16px 16px;box-shadow:0 26px 50px -24px rgba(0,0,0,.6);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.card:hover .card-img img{transform:translateY(-6px) rotate(3deg) scale(1.03)}
.card-noimg{font-family:var(--gothic);font-size:64px;opacity:.35}
.card-foot{padding:0 24px 24px;display:flex;flex-direction:column;gap:8px}
.card-name{font-family:var(--gothic);font-weight:900;font-size:56px;line-height:.9;margin:0}
.card-style{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.12em;text-transform:uppercase}
.card-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.card-more>span{overflow:hidden;display:flex;flex-direction:column;gap:10px}
.card:hover .card-more,.card:focus-visible .card-more{grid-template-rows:1fr}
@media (hover:none){.card-more{grid-template-rows:1fr}}
.card-short{font-size:15px;opacity:.9;padding-top:4px}
.card-go{font-weight:700;font-size:15px}
.card-next{background:transparent;border:2px dashed var(--line);color:var(--muted);justify-content:center;align-items:center;text-align:center;gap:14px;padding:32px}
.card-next:hover{transform:none;box-shadow:none}
.card-next .gothic{font-size:48px;line-height:1;color:var(--ink-2)}
.rail-nav{display:flex;gap:10px}
.rail-nav button{width:52px;height:52px;border-radius:50%;border:2px solid var(--ink);background:transparent;font-size:20px;font-weight:700;display:grid;place-items:center;transition:background .2s,color .2s}
.rail-nav button:hover{background:var(--ink);color:var(--bg)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font-weight:600;font-size:15px;text-decoration:none}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* Manifeste */
.manifest{background:var(--ink);color:var(--cream);border-radius:var(--radius)}
.manifest-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:end;padding:clamp(36px,6vw,88px)}
.manifest .h2{font-size:clamp(46px,6vw,92px)}
.manifest .h2 em{font-style:normal;color:var(--amber)}
.manifest-txt{color:#C9C5BC;display:flex;flex-direction:column;gap:12px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px;border-top:1px solid #34383C;padding-top:28px}
.fact b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(40px,4.4vw,64px);line-height:.9;color:var(--cream)}
.fact span{font-size:14px;color:#A9A59C}

/* Stand + agenda */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.photo{border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;max-width:100%;background:var(--line)}
.photo img{width:100%;height:100%;object-fit:cover}
.agenda{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column}
.agenda li{display:grid;grid-template-columns:84px minmax(0,1fr);gap:20px;align-items:center;padding-block:18px;border-top:1px solid var(--line)}
.agenda li:last-child{border-bottom:1px solid var(--line)}
.date{display:flex;flex-direction:column;align-items:center;justify-content:center;height:84px;border-radius:20px;background:var(--surface);border:1px solid var(--line)}
.date b{font-family:var(--display);font-weight:900;font-size:38px;line-height:.9}
.date span{font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ev-t{font-weight:700;font-size:19px}
.ev-p{color:var(--muted);font-size:15px}

/* Nous trouver */
.find{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column;gap:12px;min-width:0}
.tile h3{font-family:var(--display);font-weight:900;font-size:30px;text-transform:uppercase;line-height:1}
.tile p{color:var(--ink-2)}
.tile .big{font-family:var(--display);font-weight:800;font-size:26px;line-height:1.1;color:var(--ink)}
.tile-btn{align-self:flex-start;margin-top:auto}
.shops{list-style:none;margin:0;padding:0}
.shops li{display:flex;flex-direction:column;padding-block:10px;border-top:1px solid var(--line)}
.shops li span{color:var(--muted);font-size:15px}

/* Contact */
.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:start}
.coords{margin-top:24px;font-weight:600;line-height:1.8}
.form{display:flex;flex-direction:column;gap:18px}
.form .btn{align-self:flex-start}
.form-error{background:#FBEDEB;color:#8A2318;padding:12px 16px;border-radius:14px;font-weight:600}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label{font-weight:600;font-size:14px}
.input{font:inherit;font-size:17px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:16px;min-height:56px;padding:0 18px;width:100%;transition:border-color .2s}
textarea.input{padding:16px 18px;min-height:150px;resize:vertical}
.input:focus{outline:none;border-color:var(--ink)}
.pills{display:flex;flex-wrap:wrap;gap:8px;border:none;margin:0;padding:0}
.pills label{display:inline-flex;position:relative}
.pills input{position:absolute;opacity:0;pointer-events:none}
.pills span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font-weight:600;font-size:15px;cursor:pointer;transition:all .2s}
.pills input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pills input:focus-visible+span{outline:3px solid var(--amber);outline-offset:2px}
.sent{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:40px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.sent .gothic{font-size:64px;line-height:1}

/* Fiche bière */
.detail{background:var(--c);color:var(--on);border-radius:0 0 var(--radius) var(--radius)}
.detail-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center;padding-block:40px 72px}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;text-decoration:none;opacity:.85}
.back:hover{opacity:1}
.d-name{font-family:var(--gothic);font-weight:900;font-size:clamp(96px,14vw,220px);line-height:.8;margin-top:24px}
.d-style{font-family:var(--display);font-weight:800;font-size:clamp(20px,2vw,26px);letter-spacing:.14em;text-transform:uppercase;margin-top:18px}
.d-story{font-size:clamp(18px,1.6vw,22px);line-height:1.55;max-width:46ch;margin-top:28px;opacity:.95;display:flex;flex-direction:column;gap:12px}
.d-visual{display:flex;justify-content:center}
.d-visual .bottle-frame{width:min(320px,80%)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-block:2px solid var(--ink);margin:0}
.stats div{padding:28px 20px 24px;border-left:1px solid var(--line)}
.stats div:first-child{border-left:none;padding-left:0}
.stats dt{font-weight:600;font-size:14px;color:var(--muted)}
.stats dd{margin:6px 0 0;font-family:var(--display);font-weight:900;font-size:clamp(40px,5vw,72px);line-height:.9;font-variant-numeric:tabular-nums}
.stats dd small{font-size:.42em;margin-left:3px}
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:40px;margin-top:56px}
.notes h2{font-family:var(--display);font-weight:900;font-size:24px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px}
.notes p{color:var(--ink-2)}
.notes p+p{margin-top:10px}
.chips-static{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chips-static span{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:14px}
.where{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-top:56px;padding:26px 28px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line)}
.where-t{font-weight:700;font-size:18px;margin-top:2px}
.next{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:24px;padding:36px clamp(24px,4vw,48px);border-radius:var(--radius);background:var(--c);color:var(--on);text-decoration:none}
.next .k{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.next .gothic{font-size:clamp(56px,7vw,96px);line-height:.9}
.next .arrow{font-size:48px}

/* Pages simples */
.page-actions{margin-top:40px}
.prose{margin-top:40px;max-width:72ch}
.prose h2{font-family:var(--display);font-weight:900;font-size:26px;text-transform:uppercase;margin:36px 0 10px}
.prose p{color:var(--ink-2);line-height:1.7}

/* Pied de page */
.foot{background:var(--ink);color:#C9C5BC;border-radius:var(--radius) var(--radius) 0 0;margin-top:clamp(72px,10vw,128px);padding-bottom:env(safe-area-inset-bottom,0px)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:end;padding-block:72px 48px}
.foot .h2{color:var(--cream);font-size:clamp(42px,5.4vw,80px)}
.foot-lead{margin-bottom:16px}
.nl{display:flex;gap:10px;flex-wrap:wrap}
.nl .input{flex:1 1 220px;background:var(--ink-soft);border-color:#3A3F44;color:var(--cream);border-radius:999px}
.nl .input::placeholder{color:#8E8A82}
.nl .input:focus{border-color:var(--amber)}
.nl button{min-height:56px;padding:0 26px;border-radius:999px;border:none;background:var(--amber);color:var(--ink);font-weight:700}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-block:28px 36px;border-top:1px solid #2C3034;font-size:14px}
.foot-bottom .brand{color:var(--cream)}
.foot a{color:#C9C5BC}

/* Vérification d'âge */
.gate{position:fixed;inset:0;z-index:100;background:var(--ink);color:var(--cream);display:flex;flex-direction:column;justify-content:center;padding:max(24px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));overflow-y:auto}
.age-ok .gate{display:none}
.gate-in{max-width:1100px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:32px}
.gate-ask,.gate-no{display:flex;flex-direction:column;gap:28px}
.gate-ask[hidden],.gate-no[hidden]{display:none}
.gate .brand{color:var(--cream)}
.gate .mega{font-size:clamp(64px,12vw,180px)}
.gate .mega em{font-style:normal;color:var(--amber)}
.gate p{color:#C9C5BC;font-size:18px;max-width:46ch}
.gate-actions{display:flex;flex-wrap:wrap;gap:14px}
.gate-actions button{min-height:64px;padding:0 36px;border-radius:999px;font-weight:700;font-size:18px;border:2px solid var(--cream);background:transparent;color:var(--cream);transition:transform .2s}
.gate-actions button:hover{transform:translateY(-2px)}
.gate-actions .yes{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.gate small{color:#8E8A82;font-size:13px}
body.gate-open{overflow:hidden}

/* Apparition au scroll : seul le mouvement varie, le contenu reste toujours lisible. */
@supports (animation-timeline: view()){
  .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
  @keyframes reveal{from{transform:translateY(40px)}to{transform:none}}
}

@media (max-width:900px){
  .hero-in,.detail-in,.split,.contact,.foot-top,.manifest-in{grid-template-columns:minmax(0,1fr)}
  .hero-in{padding-block:36px 48px;min-height:0;gap:16px}
  .hero-visual{min-height:300px}
  .hero-visual .bottle-frame{width:min(180px,46%)}
  .d-visual{order:-1}
  .d-visual .bottle-frame{width:min(220px,60%)}
  .find{grid-template-columns:minmax(0,1fr)}
  .stats div{border-left:none;padding-left:0}
  .head-in{min-height:0}
  .nav{width:100%;flex-wrap:nowrap;overflow-x:auto;margin-inline:-6px;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:none;padding:0 12px;font-size:14px}
  .nav .cta{margin-left:auto}
}
@media (max-width:560px){
  .row{grid-template-columns:minmax(0,1fr)}
  .card{height:520px}
  .facts{grid-template-columns:minmax(0,1fr)}
  .brand-main{font-size:30px}
  .nav a.opt{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}@view-transition{navigation:none}}