/* ============================================================
   LABIRYNTHE — hero scrolltelling V2
   Par défaut (sans JS ou mouvement réduit) : le hero FINAL, statique.
   html.anim : le scroll pilote le parcours (hero.js).
   ============================================================ */
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage-grotesque-wdth.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-wght.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --brown:#8D5724; --red:#A82642; --cream:#F6F0E4; --paper:#FBF8F1; --ink:#1B120C;
  --cta:#A95B19; --cta-h:#BF6D26;
  --bar-h:76px;
  --f-d:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --f-t:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --gh:53svh;           /* hauteur du verre */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:400 16px/1.55 var(--f-t);color:var(--ink);background:var(--cream);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{display:block}
a{color:inherit}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid #F2B766;outline-offset:3px}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:44px;padding:0 1.35em;border-radius:6px;font:600 14px/1 var(--f-t);letter-spacing:.01em;text-decoration:none;border:0;cursor:pointer;transition:background .2s,transform .2s}
.btn--cta{background:var(--cta);color:#fff}
.btn--cta:hover{background:var(--cta-h)}
.btn--cta b{font-weight:500;transition:transform .2s}
.btn--cta:hover b{transform:translateX(3px)}
.btn--icon{width:44px;padding:0;background:#fff;color:var(--ink)}
.btn[hidden]{display:none}

/* ---------- Barre ---------- */
.bar{position:fixed;inset:0 0 auto 0;height:var(--bar-h);z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(16px,4vw,56px);color:#fff;transition:background .3s,color .3s,box-shadow .3s}
.bar__nav{display:flex;gap:clamp(16px,2.4vw,34px)}
.bar__nav a{font-size:14px;font-weight:500;text-decoration:none;opacity:.88;transition:opacity .2s}
.bar__nav a:hover{opacity:1}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;justify-self:center}
.brand__dot{width:13px;height:13px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.brand__name{font:700 19px/1 var(--f-d);font-stretch:82%;letter-spacing:.1em;text-transform:uppercase}
.bar__act{display:flex;gap:10px;justify-content:flex-end;align-items:center}
.bar.is-solid{background:rgba(246,240,228,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);box-shadow:0 1px 0 rgba(27,18,12,.08)}
.bar.is-solid .btn--icon{background:var(--ink);color:#fff}

/* ---------- Hero ---------- */
.hero{position:relative;background:#140D08}
.stage{position:relative;height:100vh;height:100svh;min-height:540px;overflow:hidden;isolation:isolate}
.cream,.maze,.rv,.hint{display:none}

.bgwrap{position:absolute;inset:0;z-index:4;overflow:hidden}
.ph{position:absolute;inset:0;will-change:transform}
.ph__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph__img--sharp{opacity:0}
.ph__img--blur{opacity:1}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,14,8,.62) 0%,rgba(22,13,7,.72) 55%,rgba(14,8,5,.94) 100%)}
.glow{position:absolute;inset:0;background:radial-gradient(ellipse 34% 46% at 50% 66%,rgba(214,128,44,.7),rgba(214,128,44,0) 74%)}

.items{position:absolute;inset:0;z-index:5;pointer-events:none}
.items a{pointer-events:auto}
.bean{position:absolute;filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}
.bean--1{left:11%;top:20%;width:86px;height:120px;transform:rotate(-28deg);filter:blur(3px) drop-shadow(0 14px 18px rgba(0,0,0,.4))}
.bean--2{right:15%;top:17%;width:66px;height:92px;transform:rotate(24deg)}
.bean--3{right:8%;top:58%;width:76px;height:106px;transform:rotate(38deg);filter:blur(1.5px) drop-shadow(0 14px 18px rgba(0,0,0,.4))}
.bean--4{left:21%;top:76%;width:46px;height:64px;transform:rotate(-52deg);filter:blur(2px)}

.f-logo{position:absolute;left:50%;top:17svh;width:min(54vw,72svh);height:auto;aspect-ratio:1350/676;transform:translateX(-50%);fill:#fff}
.f-glass{position:absolute;left:50%;bottom:-1svh;height:var(--gh);width:auto;transform:translateX(-50%);transform-origin:50% 100%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}

.f-badge{position:absolute;left:6vw;top:52svh;width:118px;height:118px;color:#fff}
.f-badge svg{width:100%;height:100%;overflow:visible}
.f-badge text{font:600 10.4px var(--f-t);fill:#fff;letter-spacing:.04em}
.f-badge__spin{transform-origin:60px 60px;animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.f-info{position:absolute;left:5vw;bottom:8svh;margin:0;display:flex;gap:22px;color:#fff}
.f-info>div{display:block}
.f-info>div+div{padding-left:22px;border-left:1px solid rgba(255,255,255,.3)}
.f-info dt{font-size:12px;letter-spacing:.04em;opacity:.65;margin:0 0 4px}
.f-info dd{margin:0;font-size:15px;font-weight:600;max-width:230px;line-height:1.3}

.f-copy{position:absolute;right:5vw;bottom:8svh;width:min(310px,27vw);color:#fff}
.f-copy p{margin:0 0 18px;font-size:14px;line-height:1.65;opacity:.86}

/* ---------- Mode animé : le scroll pilote ---------- */
html.anim .hero{height:calc(var(--hs,7)*100svh)}
html.anim .stage{position:sticky;top:0;background:var(--cream)}
html.anim .cream{display:block;position:absolute;inset:0;z-index:1;background:var(--cream)}
html.anim .maze{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:2}
html.anim .rv{display:block;position:absolute;inset:0;z-index:3;background:var(--red);clip-path:circle(0 at 50% 50%)}
html.anim .bgwrap{clip-path:circle(0 at 50% 50%)}
html.anim .ph__img--sharp{opacity:1}
html.anim .ph__img--blur{opacity:0}
html.anim .shade,html.anim .glow{opacity:0}
html.anim .items>*{opacity:0}
html.anim .bar{opacity:0;pointer-events:none;transform:translateY(-14px)}
html.anim .hint{display:flex;position:absolute;z-index:6;left:50%;bottom:max(28px,5svh);transform:translateX(-50%);align-items:center;gap:10px;padding:10px 18px;border-radius:999px;background:var(--brown);color:#FBF3E6;font:600 13px/1 var(--f-t);letter-spacing:.02em;opacity:0;white-space:nowrap}
.hint i{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:rotate(45deg) translate(2px,2px)}}

/* ---------- Portrait (téléphone, tablette verticale) ---------- */
@media (max-aspect-ratio:9/10),(max-width:760px){
  :root{--gh:44svh;--bar-h:64px}
  .bar{grid-template-columns:auto 1fr}
  .bar__nav{display:none}
  .bar:not(.is-solid) .btn--cta{display:none}
  .brand{justify-self:start}
  .brand__name{font-size:17px}
  .f-logo{top:calc(var(--bar-h) + 4svh);width:min(88vw,640px)}
  .f-glass{bottom:calc(20svh + 12px)}
  .f-badge{left:max(14px,3vw);top:auto;bottom:calc(20svh + 26px);width:84px;height:84px}
  .f-info{display:none}
  .f-copy{left:0;right:0;bottom:max(18px,3.5svh);width:auto;padding:0 24px;text-align:center}
  .f-copy p{font-size:14px;margin-bottom:14px;line-height:1.55}
  .f-copy .btn{width:100%;max-width:340px}
  .bean--1{left:4%;top:14svh;width:56px;height:78px}
  .bean--2{right:6%;top:12svh;width:46px;height:64px}
  .bean--3{right:4%;top:56svh;width:52px;height:72px}
  .bean--4{display:none}
}

/* ---------- Carte (aperçu de structure) ---------- */
.carte,.contact{background:var(--cream);color:var(--ink);padding:clamp(72px,11vw,140px) clamp(20px,5vw,72px)}
.contact{background:var(--paper);padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(56px,8vw,96px)}
.carte__in{max-width:1080px;margin:0 auto}
.carte__kicker{margin:0 0 10px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brown)}
.carte__title{margin:0 0 clamp(28px,4vw,48px);font:700 clamp(40px,7vw,84px)/1 var(--f-d);font-stretch:85%;letter-spacing:-.01em;color:var(--brown)}
.carte__list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(27,18,12,.16)}
.carte__list li{display:flex;align-items:baseline;gap:clamp(14px,3vw,36px);padding:clamp(14px,2vw,22px) 0;border-bottom:1px solid rgba(27,18,12,.16);font:600 clamp(20px,3vw,34px)/1.2 var(--f-d);transition:padding-left .25s,color .25s}
.carte__list li:hover{padding-left:12px;color:var(--brown)}
.carte__list li span{font:600 13px var(--f-t);color:var(--brown);letter-spacing:.08em;min-width:2.2em}
.carte__note{margin:28px 0 0;font-size:14px;color:rgba(27,18,12,.62);max-width:62ch}
.contact__list{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:12px}
.contact__list li{display:flex;gap:16px;font-size:16px}
.contact__list b{min-width:110px;font-weight:600;color:var(--brown)}
.contact__list a{text-underline-offset:3px}
.foot{padding:26px 20px;text-align:center;font-size:13px;background:var(--ink);color:rgba(246,240,228,.72)}
.foot p{margin:0}
.foot a{color:#F2B766;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .f-badge__spin,.hint i{animation:none}
}