/*!
 * Kit éditorial « Découvrir », Yggdrasil Indoor.
 * Vocabulaire de sections inspiré des pages Découvrir de Fort Fort Lointain
 * (fflv2), décliné en identité Indoor (nuit/or/cuivre). Chargé APRÈS le CSS
 * inline de chaque page ; s'appuie sur les tokens :root de la page
 * (--night, --night2, --gold, --gold-l, --copper, --parch, --shadow…).
 *
 * Rythme d'une page type :
 *   ghero (image), puis mani (manifeste), diff (cartes valeur), le contenu de la
 *   page, qband (citation) et enfin cta (appel final) + mobile-cta (collant mobile).
 */

/* ---- Hero pleine image ---- */
.ghero{position:relative;min-height:72vh;display:flex;align-items:flex-end;overflow:hidden;padding:150px 0 62px;
  background:linear-gradient(165deg,#081521,#0b1e2d 50%,#122036)}
.ghero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;z-index:0}
.ghero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,21,33,.30) 0%,rgba(8,21,33,.55) 55%,rgba(8,21,33,.94) 100%)}
.ghero-inner{position:relative;z-index:3;max-width:850px}
.ghero .badge{display:inline-flex;align-items:center;gap:8px;background:rgba(207,162,71,.16);
  border:1px solid rgba(207,162,71,.55);color:var(--gold-l);font-weight:700;font-size:.8rem;
  letter-spacing:2px;text-transform:uppercase;padding:9px 18px;border-radius:30px;margin-bottom:18px}
.ghero h1{font-family:'Cinzel Decorative',serif;color:#fff;font-size:clamp(2.6rem,7.5vw,5rem);font-weight:900;
  letter-spacing:2px;font-kerning:none;font-feature-settings:"kern" 0;text-shadow:0 6px 30px rgba(0,0,0,.55);line-height:1.05}
.ghero p{color:#e6eef5;font-size:clamp(1.08rem,2.2vw,1.35rem);max-width:660px;margin:18px 0 28px}
.ghero-cta{display:flex;flex-wrap:wrap;gap:14px}

/* ---- Manifeste ---- */
.mani{background:var(--night2)}
.mani .lead{max-width:900px;margin:0 auto;text-align:center;font-family:'Cinzel',serif;font-weight:600;
  font-size:clamp(1.35rem,2.9vw,2rem);color:#fff;line-height:1.42}
.mani .lead .hl{color:var(--gold-l)}
.mani .lead-sub{max-width:780px;margin:24px auto 0;text-align:center;font-size:1.1rem;color:#c9d6e2}

/* ---- Cartes « ce que ça apporte » ---- */
.diff{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.diff .card{background:var(--night2);border-radius:18px;padding:28px 24px;box-shadow:0 8px 26px rgba(4,10,16,.35);
  border-top:4px solid var(--copper);border-left:1px solid rgba(255,255,255,.05);border-right:1px solid rgba(255,255,255,.05)}
.diff .ic{color:var(--gold);margin-bottom:10px;line-height:1}
.diff .ic .msym{font-size:2.3rem}
.diff h3{font-family:'Poppins',sans-serif;font-weight:700;color:#fff;font-size:1.12rem;margin-bottom:7px}
.diff p{color:#a9bac9;font-size:.95rem}

/* ---- Bandeau citation ---- */
.qband{background:linear-gradient(150deg,#122036,#1c415f 62%,#3a2e17 140%);color:#fff;text-align:center;padding:74px 0;
  border-top:1px solid rgba(207,162,71,.25);border-bottom:1px solid rgba(207,162,71,.25)}
.qband .q{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(1.5rem,3.8vw,2.4rem);max-width:920px;margin:0 auto;color:#fff}
.qband .q .g{color:var(--gold-l)}
.qband cite{display:block;text-align:center;margin-top:14px;font-size:.9rem;opacity:.82;
  font-style:normal;font-weight:600;color:#c9d6e2}

/* ---- Section annuaire / grille ---- */
.dir{background:var(--night2)}

/* ---- Appel final ---- */
.cta{background:radial-gradient(900px 500px at 50% 0%,rgba(196,122,58,.32),rgba(196,122,58,0) 65%),
  linear-gradient(180deg,#0b1e2d,#081521);text-align:center;padding:88px 0}
.cta .eyebrow{color:var(--gold-l)}
.cta h2{font-family:'Cinzel Decorative',serif;color:#fff;font-size:clamp(2rem,5vw,3rem);letter-spacing:2px;font-kerning:none;font-feature-settings:"kern" 0;margin:8px 0 6px}
.cta p{color:#c9d6e2;font-size:1.15rem;max-width:600px;margin:14px auto 28px}
.cta .mini{margin-top:16px;color:#9fb2c2;font-weight:600;font-size:.95rem}

/* ---- Bouton billetterie collant (mobile) ---- */
.mobile-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(11,30,45,.97);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(0,0,0,.35);
  border-top:1px solid rgba(207,162,71,.3)}
.mobile-cta .btn{width:100%;justify-content:center}

@media(max-width:960px){.diff{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){
  .diff{grid-template-columns:1fr}
  .ghero{min-height:auto;padding:120px 0 50px}
  .mobile-cta{display:block}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}