/* BoKa · L'Expérience — mise en page, typo, styles du repli statique. */
:root{
  --forest:#2f4a34; --forest-d:#20321f; --leaf:#6f8f5c; --leaf-d:#40613f;
  --geranium:#c15f7c; --geranium-d:#a24862; --geranium-l:#f4c9d4;
  --cream:#f8f4ec; --sand:#ece3d2; --ink:#2b2721; --muted:#6a6154;
  --maxw:1120px; --r:16px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--sans); color:var(--cream); background:#0d1310;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%;display:block}

/* --- Canvas plein écran fixe, derrière tout --- */
#gl{
  position:fixed; inset:0; width:100vw; height:100vh; display:block; z-index:0;
  background:#0d1310;
}

/* --- Barre haute --- */
.xp-top{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(18px,4vw,44px);
  pointer-events:none;
}
.xp-top a{pointer-events:auto}
.xp-brand{
  font-family:var(--serif); font-size:1.35rem; letter-spacing:.02em;
  color:var(--cream); text-decoration:none; text-shadow:0 2px 18px rgba(0,0,0,.45);
}
.xp-brand b{color:var(--geranium-l); font-weight:700}
.xp-classic{
  font-size:.82rem; text-decoration:none; color:var(--cream);
  padding:.5em 1em; border:1px solid rgba(248,244,236,.35); border-radius:999px;
  background:rgba(20,26,22,.28); backdrop-filter:blur(6px);
  text-shadow:0 1px 8px rgba(0,0,0,.4); transition:background .25s,border-color .25s;
}
.xp-classic:hover{background:rgba(20,26,22,.55); border-color:rgba(248,244,236,.6)}

/* --- Scènes cinématiques --- */
#film{position:relative; z-index:10}
.scene{
  min-height:100vh; display:flex; align-items:center;
  padding:0 clamp(20px,6vw,90px); position:relative;
}
.scene[data-scene="3"] .copy, .scene[data-scene="5"] .copy{margin-left:auto; text-align:right}
.scene[data-scene="0"]{justify-content:center; text-align:center}

.copy{max-width:min(620px,90vw); will-change:transform,opacity}
.eyebrow{
  font-size:.78rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--geranium-l); margin:0 0 1.1rem; font-weight:600;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.pivot{
  font-family:var(--serif); font-weight:600; line-height:1.06;
  font-size:clamp(2.1rem,6vw,4.3rem); margin:0; color:#fff;
  text-shadow:0 4px 40px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.5);
}
.pivot .accent{color:var(--geranium-l)}
.sub{
  margin:1.3rem 0 0; font-size:clamp(1rem,1.5vw,1.15rem); line-height:1.55;
  color:var(--cream); max-width:46ch; text-shadow:0 2px 16px rgba(0,0,0,.72), 0 1px 3px rgba(0,0,0,.6);
}
.scene[data-scene="3"] .sub, .scene[data-scene="5"] .sub{margin-left:auto}

/* Scène 0 : marque émergente */
.hero-mark{display:flex; flex-direction:column; align-items:center; gap:1.4rem}
.hero-mark .logo{width:clamp(78px,12vw,120px); height:auto; filter:drop-shadow(0 8px 30px rgba(0,0,0,.5))}
.hero-title{
  font-family:var(--serif); font-size:clamp(3rem,11vw,7rem); line-height:.95;
  margin:0; color:#fff; letter-spacing:.01em; text-shadow:0 6px 50px rgba(0,0,0,.5);
}
.hero-title b{color:var(--geranium-l)}
.hero-tag{margin:.2rem 0 0; letter-spacing:.22em; text-transform:uppercase; font-size:.8rem; color:rgba(248,244,236,.85)}

.scroll-hint{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:15;
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(248,244,236,.8);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  transition:opacity .5s; text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.scroll-hint .chev{width:16px; height:16px; border-right:2px solid; border-bottom:2px solid;
  transform:rotate(45deg); animation:bob 1.7s ease-in-out infinite}
.scroll-hint.gone{opacity:0; pointer-events:none}
@keyframes bob{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(3px,3px)}}

/* --- Rail de progression --- */
.rail{
  position:fixed; right:clamp(14px,2.5vw,30px); top:50%; transform:translateY(-50%);
  z-index:20; display:flex; flex-direction:column; gap:14px;
}
.rail-dot{
  width:10px; height:10px; border-radius:50%; padding:0; cursor:pointer;
  border:1px solid rgba(248,244,236,.6); background:transparent;
  transition:background .3s,transform .3s,border-color .3s;
}
.rail-dot:hover{border-color:#fff}
.rail-dot.on{background:var(--geranium-l); border-color:var(--geranium-l); transform:scale(1.35)}
@media(max-width:720px){.rail{display:none}}

/* --- Scène 6 : atterrissage clair, contenu net --- */
.landing{
  position:relative; z-index:10; background:var(--cream); color:var(--ink);
  border-radius:34px 34px 0 0; margin-top:-2px;
  box-shadow:0 -40px 80px rgba(0,0,0,.35);
  padding:clamp(60px,9vw,110px) clamp(20px,6vw,60px) 0;
}
.landing .wrap{max-width:var(--maxw); margin:0 auto}
.landing .lead{max-width:640px; margin:0 auto 3.5rem; text-align:center}
.landing .lead .eyebrow{color:var(--geranium-d); text-shadow:none}
.landing h2{
  font-family:var(--serif); font-weight:600; color:var(--forest);
  font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.08; margin:.2rem 0 1rem; text-shadow:none;
}
.landing .lead p{color:var(--muted); font-size:1.08rem; line-height:1.6; margin:0}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:20px; margin:0 0 3.5rem}
.card{
  background:#fff; border:1px solid var(--sand); border-radius:var(--r);
  padding:26px 24px; box-shadow:0 8px 26px rgba(43,39,33,.06);
}
.card .k{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--geranium-d); font-weight:700}
.card h3{font-family:var(--serif); font-weight:600; color:var(--forest); font-size:1.28rem; margin:.5rem 0 .55rem}
.card p{margin:0; color:var(--muted); font-size:.96rem; line-height:1.55}

.strip{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:30px 46px;
  padding:34px; background:var(--eef,#eef3e9); border-radius:var(--r); margin:0 0 3.5rem;
}
.strip .grp{display:flex; align-items:center; gap:16px}
.strip img{height:52px; width:auto; object-fit:contain}
.strip .lbl{font-size:.82rem; color:var(--muted); max-width:180px; line-height:1.4}
.strip .head{width:100%; text-align:center; color:var(--forest); font-family:var(--serif); font-size:1.15rem; margin:0 0 .4rem}

.contact{
  text-align:center; background:var(--forest); color:var(--cream);
  border-radius:var(--r); padding:clamp(40px,6vw,66px) 28px; margin:0 0 3rem;
}
.contact h2{color:#fff}
.contact p{color:rgba(248,244,236,.85); max-width:520px; margin:0 auto 1.8rem; line-height:1.6}
.contact .rows{display:flex; flex-direction:column; gap:.6rem; align-items:center; margin:0 0 1.8rem}
.contact a.line{color:var(--geranium-l); text-decoration:none; font-size:1.05rem}
.contact a.line:hover{text-decoration:underline}
.btn{
  display:inline-block; text-decoration:none; font-weight:600; border-radius:999px;
  padding:.85em 1.7em; font-size:.96rem;
}
.btn-rose{background:var(--geranium); color:#fff}
.btn-rose:hover{background:var(--geranium-d)}
.socials{display:flex; gap:14px; justify-content:center; margin-top:1.4rem}
.socials a{color:rgba(248,244,236,.85); text-decoration:none; font-size:.9rem;
  border:1px solid rgba(248,244,236,.3); border-radius:999px; padding:.5em 1.1em}
.socials a:hover{border-color:var(--geranium-l); color:#fff}

.foot{
  text-align:center; color:var(--muted); font-size:.85rem;
  padding:26px 0 34px; border-top:1px solid var(--sand);
}
.foot a{color:var(--forest); text-decoration:none}

/* --- Repli statique : fonds photo, texte lisible --- */
.is-static #film .scene{background-size:cover; background-position:center; color:#fff}
.is-static #film .scene::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(15,19,16,.35),rgba(15,19,16,.62));
}
.is-static #film{background:#0d1310}
.is-static .scene[data-scene="0"]{background-image:url(sky.webp)}
.is-static .scene[data-scene="1"]{background-image:url(valley.webp)}
.is-static .scene[data-scene="2"]{background-image:url(geranium.webp)}
.is-static .scene[data-scene="3"]{background-image:url(heritage.webp)}
.is-static .scene[data-scene="4"]{background-image:url(alambic.webp)}
.is-static .scene[data-scene="5"]{background-image:url(drop.webp); background-color:#050505}
.is-static .copy{opacity:0; transform:translateY(28px); transition:opacity .8s ease,transform .8s ease}
.is-static .scene.in .copy{opacity:1; transform:none}
.is-static .scroll-hint{position:absolute}

/* is-live : le canvas gère le visuel, les scènes sont transparentes */
.is-live #film .scene{background:transparent}
/* Voile sombre local et flou derrière le texte : lisibilité garantie sur les
   frames claires (ciel, vallée) sans assombrir toute l'image. Le voile suit le
   bloc .copy (gauche/droite/centre) et se fond dans le transparent. */
.is-live #film .copy{position:relative; isolation:isolate}
.is-live #film .copy::before{
  content:""; position:absolute; z-index:-1; inset:-16% -12%;
  background:radial-gradient(62% 56% at 50% 50%,
    rgba(8,12,9,.64), rgba(8,12,9,.34) 55%, transparent 78%);
  filter:blur(24px); pointer-events:none;
}

@media(prefers-reduced-motion:reduce){
  .scroll-hint .chev{animation:none}
  .is-static .copy{transition:none; opacity:1; transform:none}
}
@media(max-width:640px){
  .scene[data-scene="3"] .copy, .scene[data-scene="5"] .copy{margin-left:0; text-align:left}
  .scene[data-scene="3"] .sub, .scene[data-scene="5"] .sub{margin-left:0}
  .strip{gap:22px 26px; padding:26px}
}