/* ==========================================================================
   KAGU — landing.css : mise en page de la landing. Aucun token propre :
   tout vient de tokens.css. Préfixe « l- » pour ne pas heurter app.css.
   ========================================================================== */

/* ---- Lumière de la pièce (dérivée des tokens) --------------------------- */
.scene {
  --wall: color-mix(in oklch, var(--sunk) 52%, var(--surface));
  --wall-sh: color-mix(in oklch, var(--wall) 86%, var(--ink));
  --wall-low: color-mix(in oklch, var(--wall) 92%, var(--ink));
  --wall-side: color-mix(in oklch, var(--sunk-2) 62%, var(--sunk));
  --wall-side-far: color-mix(in oklch, var(--wall-side) 58%, var(--ink));
  --ceil: color-mix(in oklch, var(--surface) 90%, var(--sunk));
  --ceil-far: color-mix(in oklch, var(--ceil) 70%, var(--ink));
  --floor-far: color-mix(in oklch, var(--m-chene) 94%, var(--surface));
  --floor: color-mix(in oklch, var(--m-chene) 88%, var(--m-noyer));
  --floor-near: color-mix(in oklch, var(--m-chene) 66%, var(--m-noyer));
  --floor-niche: color-mix(in oklch, var(--m-chene) 55%, var(--ink));
  --light: color-mix(in oklch, var(--m-moutarde) 34%, white);
  --sky-top: color-mix(in oklch, var(--m-petrole) 16%, white);
  --sky-low: color-mix(in oklch, var(--m-sauge) 14%, white);
  --curtain: color-mix(in oklch, var(--m-argile) 52%, var(--surface));
  --curtain-d: color-mix(in oklch, var(--curtain) 82%, var(--ink));
  --hw-dark: color-mix(in oklch, var(--m-noir) 100%, var(--ink));
}
.scene { display: block; width: 100%; height: 100%; }
.sc-chip-text { font-family: var(--font-mono); font-size: 19px; font-weight: 500; fill: var(--on-ink); letter-spacing: 0.02em; }
.sc-vide-loop { animation: vide-breathe 2.6s var(--ease-inout) infinite alternate; }
@keyframes vide-breathe { from { opacity: 0.1; } to { opacity: 0.34; } }

/* ---- En-tête flottant ------------------------------------------------------ */
.l-top { position: fixed; z-index: 60; top: 0; left: 0; right: 0; padding: max(0.6rem, env(safe-area-inset-top)) var(--gutter) 0; pointer-events: none; }
.l-top__in { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 0.2rem 0.5rem 0.2rem 1rem; border-radius: var(--r-pill); background: color-mix(in oklch, var(--surface) 90%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: var(--lift); pointer-events: auto; }
.l-top .logo { color: var(--ink); }
.l-top .logo__word { font-size: 1.5rem; }
.l-top .btn--ghost { color: var(--ink); }

/* ---- Histoire : scène épinglée en CSS (sticky), pilotée par GSAP ------------ */
.l-story { position: relative; }
.l-stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); color: var(--on-ink); isolation: isolate; }
.js:not(.is-static) .l-story { height: 660vh; height: 660svh; }
.js:not(.is-static) .l-stage { position: sticky; top: 0; }
.l-scene { position: absolute; inset: 0; }
.l-scene svg { position: absolute; inset: 0; }
.js:not(.ready):not(.is-static) .l-scene { visibility: hidden; }
.l-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 46%, transparent 58%, oklch(0.18 0.04 195 / 0.34) 100%); }

/* Titre d'ouverture : logo, nom, slogan, seuls à l'écran. */
.l-intro { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: var(--s-4); padding: 5rem var(--gutter) 6rem; text-align: center; will-change: transform, opacity; }
.l-intro__mark .logo__mark { width: clamp(4.5rem, 9vw, 7rem); height: clamp(4.5rem, 9vw, 7rem); color: var(--on-ink); }
.l-intro__mark .logo__mark .body { fill: var(--on-ink); }
.l-intro__name { font-family: var(--font-display); font-weight: 800; font-stretch: 76%; font-size: clamp(6rem, 3rem + 22vw, 15rem); line-height: 0.8; letter-spacing: -0.012em; padding-bottom: 0.08em; }
.l-intro__tag { font-family: var(--font-display); font-weight: 650; font-stretch: 88%; font-size: clamp(1.35rem, 1rem + 1.8vw, 2.2rem); line-height: 1.1; color: var(--on-ink); text-wrap: balance; }
.l-intro__cue { position: absolute; left: 0; right: 0; bottom: max(1.5rem, env(safe-area-inset-bottom)); display: inline-flex; justify-content: center; align-items: center; gap: var(--s-2); color: var(--on-ink-muted); }
.l-intro__cue .icon { animation: cue 1.8s var(--ease-inout) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }

/* Légendes : toutes superposées, une seule visible à la fois. */
.l-caps { position: absolute; z-index: 5; left: var(--gutter); right: var(--gutter); bottom: max(1rem, env(safe-area-inset-bottom)); display: grid; pointer-events: none; }
.l-cap { grid-area: 1 / 1; align-self: end; justify-self: start; width: min(100%, 31rem); display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5) var(--s-5); border-radius: var(--r-l); background: color-mix(in oklch, var(--surface) 94%, transparent); color: var(--ink); box-shadow: var(--lift); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.l-cap .is-muted { color: var(--muted); }
.l-cap h2 { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem); }
.js:not(.is-static) .l-cap { opacity: 0; }
@media (min-width: 900px) { .l-caps { left: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))); right: auto; bottom: 2.5rem; } }

/* ---- Sections ----------------------------------------------------------------- */
.l-sec { max-width: var(--maxw); margin: 0 auto; padding: var(--s-9) var(--gutter) var(--s-7); }
.l-sec__head { display: grid; gap: var(--s-3); max-width: 44rem; margin-bottom: var(--s-8); }
.l-feat { display: grid; gap: var(--s-6); align-items: center; margin-bottom: var(--s-9); }
.l-feat__txt { display: grid; gap: var(--s-3); align-content: center; max-width: 32rem; }
.l-feat__media { min-width: 0; }
@media (min-width: 900px) {
  .l-feat { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s-8); }
  .l-feat--flip .l-feat__media { order: 2; }
  .l-feat--flip { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
}
.l-feat .stage__field { height: clamp(220px, 46vw, 340px); }
.l-cap-line { display: grid; gap: 2px; padding: var(--s-1) var(--s-3) var(--s-3); text-align: center; }
.l-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.l-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
@media (min-width: 600px) { .l-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }
.l-cards .card { height: 100%; }
.l-photo { display: grid; gap: var(--s-3); max-width: 34rem; }
.l-photo .shot { border-radius: var(--r-l); background: var(--sunk); }
.l-photo .shot img { max-height: 52dvh; }
.l-photo__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.l-cta { background: var(--ink); margin: 0 var(--gutter); border-radius: var(--r-l); max-width: var(--maxw); }
@media (min-width: 1560px) { .l-cta { margin-inline: auto; } }
.l-cta__in { display: grid; gap: var(--s-6); padding: var(--s-7) var(--s-5); align-items: center; }
.l-cta__txt { display: grid; gap: var(--s-4); justify-items: start; }
.l-cta__txt .t-display { font-size: clamp(3rem, 1.6rem + 6vw, 6.5rem); }
.l-cta__txt .btn { margin-top: var(--s-2); }
.l-cta__field { height: clamp(220px, 48vw, 340px); border-radius: var(--r-m); background: var(--ink-2); display: grid; place-items: center; overflow: hidden; }
@media (min-width: 900px) { .l-cta__in { grid-template-columns: 1.1fr 1fr; padding: var(--s-8) var(--s-8); gap: var(--s-8); } }

.l-foot { margin-top: var(--s-8); border-top: 1.5px solid var(--line); background: var(--surface); }
.l-foot__in { max-width: var(--maxw); margin: 0 auto; padding: var(--s-6) var(--gutter) var(--s-7); display: grid; gap: var(--s-3); justify-items: start; }

/* ---- Révélations (hors histoire) : cachées seulement si GSAP est là ----------------- */
.rv-ready:not(.is-static) .rv { opacity: 0; }

/* ---- Mouvement réduit / sans JS : la pièce terminée, sans animation ---------------- */
.is-static .l-intro { order: -1; position: relative; z-index: 3; padding: 7rem var(--gutter) var(--s-6); background: var(--ink); }
.is-static .l-intro__cue { display: none; }
.is-static .l-stage { height: auto; min-height: 0; display: grid; }
.is-static .l-scene { position: relative; aspect-ratio: 16 / 10; max-height: 70vh; width: 100%; }
.is-static .l-vignette { display: none; }
.is-static .l-caps { position: relative; left: auto; right: auto; bottom: auto; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--s-3); padding: var(--s-5) var(--gutter) var(--s-7); background: var(--ink); }
.is-static .l-cap { grid-area: auto; width: auto; justify-self: stretch; box-shadow: none; }
.is-static .l-cap h2 { font-size: var(--fs-h3); }
.is-static .sc-vide-loop, .is-static .l-intro__cue .icon { animation: none; }
html:not(.js) .l-intro, html:not(.js) .l-caps { position: relative; }

@media (max-width: 599px) { .l-cards > li:nth-child(3) { display: none; } }

/* Téléphone en paysage / écrans très bas : titre et légendes compacts, la scène garde la place. */
@media (max-height: 520px) {
  .l-intro { gap: var(--s-2); padding: 4rem var(--gutter) 3rem; grid-auto-flow: row; }
  .l-intro__mark .logo__mark { width: 3rem; height: 3rem; }
  .l-intro__name { font-size: clamp(3.4rem, 18vh, 6rem); }
  .l-intro__tag { font-size: 1.15rem; }
  .l-cap { padding: var(--s-3) var(--s-4); width: min(100%, 26rem); }
  .l-cap h2 { font-size: 1.35rem; }
  .l-cap .t-small { display: none; }
  .l-caps { bottom: max(0.75rem, env(safe-area-inset-bottom)); }
}