/* ========== Variables & base ========== */
:root{
  --nav-h: 64px;
  --clr-pink: #f298a6;
  --clr-light: #f1f1f1;
  --overlay: .6;
  --bg-image: url('./images/bg1.jpg');
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--clr-light); background:#0b0b10; line-height:1.5;
}

/* ===== Fond ===== */
body[data-page="home"]       { --bg-image:url('./images/bg1.jpg'); }
body[data-page="characters"] { --bg-image:url('./images/BG2.png'); }
body[data-page="lore"]       { --bg-image:url('./images/BG2.png'); }
body[data-page="trailer"]    { --bg-image:url('./images/BG2.png'); }
body[data-page="about"]      { --bg-image:url('./images/BG2.png'); }
body[data-page="team"]       { --bg-image:url('./images/BG2.png'); }

.bg{position:fixed; inset:0; z-index:-2; background-image:var(--bg-image); background-size:cover; background-position:center; filter:saturate(1.03) contrast(1.02)}
.bg::after{content:""; position:absolute; inset:0; background:
  radial-gradient(1200px 800px at 70% 30%, rgba(0,0,0,0), rgba(0,0,0,.65)),
  linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,var(--overlay)) 65%);}

/* ===== NAV ===== */
.nav{
  position:fixed; inset-block-start:0; inset-inline:0; height:auto;
  z-index:2000; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.8rem;
  padding:.45rem .9rem; background:linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.35));
  border-bottom:1px solid rgba(255,255,255,.12); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.nav__brand img{height:36px; width:auto; display:block}
.nav__tabs{display:flex; justify-content:center; gap:1rem; flex-wrap:wrap}
.tab{position:relative; color:#fff; text-decoration:none; font-weight:800; letter-spacing:.4px; padding:.42rem .7rem; border-radius:999px; opacity:.9; transition:.2s; border:1px solid transparent; background:transparent}
.tab--btn{border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.05); cursor:pointer}
.tab:hover{opacity:1; transform:translateY(-1px)}
.tab.is-active{background:rgba(242,152,166,.14); border-color:rgba(242,152,166,.6); box-shadow:0 0 0 3px rgba(242,152,166,.08) inset, 0 6px 22px rgba(242,152,166,.25)}
.tab.is-active::after{content:""; position:absolute; left:12%; right:12%; bottom:-8px; height:3px; background:linear-gradient(90deg,transparent,rgba(242,152,166,.9),transparent); border-radius:2px}
.nav__controls{display:flex; align-items:center; gap:.5rem}
.pill{display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .75rem; border-radius:999px; font-weight:700; color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); transition:.2s}
.pill:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.4)}
.pill--ghost{background:rgba(255,255,255,.05)}
.langswitch .is-active{border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.14)}
body.scrolled .nav{box-shadow:0 6px 18px rgba(0,0,0,.35)}

/* Musique (égaliseur) */
.pill--music{position:relative; padding-right:2.6rem; overflow:hidden}
.pill--music .eq{position:absolute; right:.55rem; top:50%; transform:translateY(-50%); display:inline-flex; gap:3px}
.pill--music .eq i{display:block; width:3px; height:12px; border-radius:2px; background:#fff; animation:eq 700ms ease-in-out infinite; transform-origin:50% 100%}
.pill--music .eq i:nth-child(2){animation-delay:120ms}
.pill--music .eq i:nth-child(3){animation-delay:240ms}
.pill--music .eq i:nth-child(4){animation-delay:360ms}
@keyframes eq{0%,100%{height:6px;opacity:.7}50%{height:16px;opacity:1}}
.pill--music:not(.is-on) .eq i{animation:none;height:6px;opacity:.35;background:rgba(255,255,255,.6)}
.pill--music:not(.is-on){color:#ddd;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)}

/* ===== Pages ===== */
.page{min-height:100svh; padding:2rem 1.2rem 3rem}
.page--afterHeader{padding-top:calc(var(--nav-h) + 18px)} /* un peu plus haut */

/* ===== HERO ===== */
.hero{display:grid; place-items:center; text-align:center; padding:clamp(2rem,6vw,5rem) 1.5rem 2rem}
.hero__inner{max-width:1100px}
.kicker{letter-spacing:.3em; text-transform:uppercase; font-weight:600; font-size:.85rem; color:#e0e0e0; opacity:0; transform:translateY(6px); animation:fadeUp .9s .25s ease forwards}
.title{margin:.4rem 0 .6rem; font-size:clamp(2.2rem,7vw,4.6rem); font-weight:800; line-height:1.05; text-shadow:0 6px 30px rgba(0,0,0,.5); opacity:0; transform:translateY(8px); animation:fadeUp .9s .4s ease forwards, floatY 5.5s 1.3s ease-in-out infinite}
.subtitle{max-width:70ch; margin-inline:auto; font-size:clamp(1rem,2.5vw,1.25rem); color:#eaeaea; font-weight:300; opacity:0; transform:translateY(8px); animation:fadeUp .9s .6s ease forwards}
.platform-buttons{display:flex; flex-wrap:wrap; justify-content:center; gap:1.2rem; margin-top:2.2rem}
.platform-btn{display:inline-flex; align-items:center; justify-content:center; min-width:160px; padding:.9rem 1.4rem; border-radius:14px; border:2px solid rgba(242,152,166,.7); background:rgba(0,0,0,.45); color:#f2c2c7; font-weight:800; letter-spacing:.06em; text-decoration:none; transition:.2s}
.platform-btn:hover{transform:translateY(-3px); border-color:rgba(242,152,166,1); box-shadow:0 0 20px rgba(242,152,166,.55); background:rgba(0,0,0,.65)}
.scroll-hint{position:fixed; right:22px; bottom:22px; letter-spacing:.4em; font-size:.8rem; color:#e7d7a0; opacity:.75}

@keyframes fadeUp{to{opacity:1; transform:translateY(0)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ===== PERSONNAGES ===== */
/* grille 2 colonnes : rail + fiche */
.chars{
  position:relative;
  display:grid;
  grid-template-columns: 260px minmax(0, 1fr);
  column-gap: 22px;
  align-items:start;
}

/* Rail “escalier” – scrollable avec fades */
.chars-stair{
  position:sticky; top:calc(var(--nav-h) + 10px);
  z-index:5; width:auto;
}
.stair__scroll{
  max-height:calc(100svh - var(--nav-h) - 24px);
  overflow:auto; padding-right:8px; position:relative;
  scrollbar-width:thin;
}
.stair__fade{position:absolute; left:0; right:8px; height:26px; pointer-events:none}
.stair__fade.top{top:calc(var(--nav-h) + 10px); transform:translateY(-100%); background:linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,0))}
.stair__fade.bottom{bottom:0; background:linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0))}

.stair-btn{
  display:grid; place-items:center; height:100px; margin-bottom:16px; border-radius:14px;
  font-weight:800; letter-spacing:.06em; color:#f2c2c7;
  background:rgba(0,0,0,.35); border:2px solid rgba(242,152,166,.55);
  transition:transform .18s, box-shadow .25s ease, opacity .18s, background-position .4s;
  cursor:pointer;
  background-image:
    repeating-linear-gradient(transparent 0 11px, rgba(242,152,166,.06) 11px 12px),
    radial-gradient(400px 60px at -80% 50%, rgba(242,152,166,.16), transparent 60%);
  background-position:0 0, 0 0;
  box-shadow: inset 0 0 0 1px rgba(242,152,166,.15);
  transform:scale(.98);
  opacity:.95;
}
.stair-btn:hover{transform:translateX(6px) scale(1); box-shadow:0 10px 30px rgba(242,152,166,.22)}
.stair-btn--soon{cursor:default; pointer-events:none; opacity:.5; background:rgba(0,0,0,.25); border-style:dashed}

/* actif : agrandi + pulse + lueur qui “glisse” */
.stair-btn.is-active{
  background:rgba(242,152,166,.12);
  border-color:rgba(242,152,166,.95);
  box-shadow:0 18px 60px rgba(242,152,166,.34), 0 0 0 2px rgba(242,152,166,.18) inset;
  transform:scale(1.06);
  animation:pulse 1400ms ease-in-out infinite, sweep 2.8s linear infinite;
  background-size:auto, 260% 100%;
  background-position:0 0, -120% 0;
}
@keyframes pulse{
  0%,100%{box-shadow:0 18px 60px rgba(242,152,166,.34),0 0 0 2px rgba(242,152,166,.18) inset}
  50%{box-shadow:0 28px 80px rgba(242,152,166,.44),0 0 0 3px rgba(242,152,166,.25) inset}
}
@keyframes sweep{
  0%{background-position:0 0, -120% 0}
  60%{background-position:0 0, 120% 0}
  100%{background-position:0 0, 120% 0}
}

/* fiche à droite – compacte */
.chars-layout{max-width:1400px; margin:0}
.sheet{
  border:3px solid rgba(242,152,166,.7); border-radius:16px; padding:12px;
  background:rgba(0,0,0,.35); backdrop-filter:blur(6px); box-shadow:0 12px 50px rgba(0,0,0,.35);
  display:grid; gap:12px 16px;
  grid-template-columns: 1.35fr 1.35fr 1fr;
  grid-template-rows: 72px auto;
  grid-template-areas:
    "title   title   portrait"
    "info    info    stats";
}

/* Motif “terminal de XANA” (scanlines + halo + crochets d’angle) */
.panel{position:relative; border:3px solid rgba(242,152,166,.75); border-radius:12px; background:rgba(0,0,0,.32); padding:12px; overflow:hidden}
.panel--xana::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
    radial-gradient(900px 500px at 110% -10%, rgba(242,152,166,.10), transparent 60%);
  mix-blend-mode:screen; opacity:.75;
}
.panel--xana::after{
  content:""; position:absolute; inset:-2px; border-radius:12px;
  box-shadow:0 0 0 1px rgba(242,152,166,.18) inset, 0 0 30px rgba(242,152,166,.12) inset;
  pointer-events:none;
}
/* crochets d’angle */
.panel--xana > .panel__title::before,
.panel--xana > .panel__title::after{
  content:""; position:absolute; left:10px; right:10px; height:4px; bottom:-8px;
  background:linear-gradient(90deg,transparent, rgba(242,152,166,.8), transparent);
  filter:blur(.4px);
}
.panel__title{position:relative; margin:0 0 10px; height:48px; display:grid; place-items:center; border:3px solid rgba(242,152,166,.75); border-radius:10px; background:rgba(0,0,0,.35); font-size:clamp(16px,2.2vw,19px); letter-spacing:.06em}

.sheet__title{grid-area:title; margin:0; display:grid; place-items:center; font-size:clamp(22px,2.8vw,32px); letter-spacing:.05em}
.sheet__info{grid-area:info; min-height:min(44vh, 440px)}
.sheet__portrait{grid-area:portrait; min-height:420px; display:grid; place-items:center; overflow:hidden}
.sheet__portrait img{width:100%; height:100%; object-fit:cover}
.sheet__stats{grid-area:stats}
.stats{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.stats li{display:flex; gap:8px}
.stats li b{width:120px; color:#ffd6de}

/* ===== Histoire ===== */
.lore-hero{position:relative; min-height:100svh; display:grid; place-items:center; padding:clamp(2rem,6vw,4rem) 1.5rem; overflow:hidden}
.lore-hero::before{content:""; position:absolute; inset:0; background:radial-gradient(1200px 800px at 20% 20%, rgba(0,0,0,.4), rgba(0,0,0,.75) 60%)}
.lore-hero__inner{width:min(1100px, 92vw); display:grid; gap:1rem}
.lore-hero__title{margin:0; font-size:clamp(1.4rem, 3vw, 2rem); font-weight:800; letter-spacing:.08em; text-transform:uppercase; opacity:.9}
.lore-hero__synopsis{margin:0; font-size:clamp(1.15rem, 2.5vw, 1.6rem); line-height:1.7; max-width: 42ch; text-shadow:0 2px 18px rgba(0,0,0,.45); opacity:0; transform:translateY(10px); transition:.6s}
.lore-hero.is-revealed .lore-hero__synopsis{opacity:1; transform:none}
.cursor::after{content:"▌"; display:inline-block; margin-left:2px; opacity:.9; animation:blink .9s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}
.lore-hero__synopsis.is-glitch{text-shadow:1px 0 rgba(255,50,80,.5), -1px 0 rgba(80,200,255,.5), 0 0 12px rgba(255,255,255,.18)}

/* ===== Trailer ===== */
.trailer .container{max-width:1200px; margin:0 auto}
.video-wrap{width:100%; max-width:1200px; margin:0 auto; aspect-ratio:16/9; border-radius:16px; overflow:hidden; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.5); box-shadow:0 8px 30px rgba(0,0,0,.25)}
.video-wrap video{display:block; width:100%; height:100%; object-fit:contain; background:#000}

/* ===== What ===== */
.what{display:grid; gap:1.4rem; align-content:start}
.what-hero{text-align:center; max-width:1000px; margin:0 auto 1rem}
.what-title{margin:.1rem 0 .4rem; font-size:clamp(1.9rem,4vw,2.6rem); font-weight:800}
.what-title span{color:var(--clr-pink)}
.what-sub{margin:0 auto; max-width:70ch; color:#e9e9e9; opacity:.9}
.pillars-grid{max-width:1200px; margin:0 auto; display:grid; gap:1rem; grid-template-columns:repeat(3,1fr)}
.pillar__icon{width:44px; height:44px; border-radius:10px; display:grid; place-items:center; font-weight:800; color:#fff; background:rgba(242,152,166,.28); border:1px solid rgba(242,152,166,.6); margin-bottom:.4rem}
.pillar__bullets{margin:.35rem 0 0; padding-left:1.1rem}

/* ===== À propos ===== */
.apropos .container{max-width:1200px}
.apropos-head{text-align:center; max-width:900px; margin:0 auto 1.2rem}
.team-grid{display:grid; gap:1rem; grid-template-columns:repeat(4,1fr)}
.member{display:grid; grid-template-columns:84px 1fr; gap:.8rem; padding:.9rem; border-radius:16px}
.member__avatar{width:84px; height:84px; object-fit:cover; border-radius:12px; border:1px solid rgba(255,255,255,.18)}
.member__name{margin:0; font-weight:800}
.member__role{margin:.1rem 0 .3rem; color:#ffd6de; font-weight:700}
.member__bio{margin:0; color:#e8e8e8}
.site-footer{margin-top:1.6rem; border-top:1px solid rgba(255,255,255,.18); padding:1rem 0 120px}
.footer-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.footer-cols ul{list-style:none; margin:0; padding:0; display:grid; gap:.3rem}
.copy{text-align:center; color:#cfcfcf; margin-top:.8rem}

/* ===== Social dock ===== */
.social-dock{position:fixed; left:20px; bottom:22px; z-index:65; display:flex; flex-direction:column; gap:.5rem}
.sd-pill{display:inline-flex; align-items:center; padding:.45rem .7rem; border-radius:999px; color:#fff; text-decoration:none; font-weight:700; font-size:.9rem; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.35); backdrop-filter:blur(6px)}

/* ===== Rideau ===== */
.transition-curtain{position:fixed; inset:0; pointer-events:none; z-index:120; background:radial-gradient(1400px 900px at 70% 30%, rgba(255,255,255,.03), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25) 60%, rgba(0,0,0,.55)); opacity:0; transform:scaleY(.85); transition:.28s cubic-bezier(.2,.7,.2,1)}
.is-transitioning .transition-curtain{opacity:1; transform:scaleY(1)}

/* ===== News modal ===== */
.news-modal[hidden]{display:none}
.news-modal{position:fixed; inset:0; z-index:150; display:grid; place-items:center}
.news__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); cursor:pointer}
.news__panel{position:relative; width:min(920px, 92vw); border-radius:16px; border:1px solid rgba(255,255,255,.18); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); box-shadow:0 20px 60px rgba(0,0,0,.5); padding:1rem}
.news__head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.6rem}
.news__head h3{margin:0; font-weight:800}
.news__close{width:40px; height:40px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.35); color:#fff; font-size:22px; cursor:pointer}
.news__carousel{position:relative; overflow:hidden}
.news__track{display:flex; width:100%; transition:transform .35s ease}
.news__card{min-width:100%; padding:1rem; display:grid; gap:.35rem}
.news__date{opacity:.75; font-size:.9rem}
.news__link{justify-self:start; color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:.35rem .7rem; background:rgba(0,0,0,.25)}

/* ===== Responsive ===== */
@media (max-width:1100px){
  .sheet{grid-template-columns:1fr 1fr 320px}
  .sheet__portrait{min-height:380px}
  .team-grid{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:880px){
  .chars{grid-template-columns:1fr}
  .chars-stair{position:static}
  .sheet{grid-template-columns:1fr; grid-template-rows:72px auto auto; grid-template-areas:
    "title" "portrait" "info" "stats";}
  .sheet__portrait{min-height:320px}
  .team-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav__tabs{gap:.6rem}
  .pillars-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr}
}

/* ========== PATCH LIGNES + COMPACTAGE (affinage) ========== */
:root{ --brd: 2px; }
.chars{ column-gap: 18px; }
.sheet{
  border-width: var(--brd);
  gap: 10px 14px;
  grid-template-rows: 64px auto;
}
.sheet__title{ font-size: clamp(22px,2.6vw,30px); }
.sheet__info{ min-height: min(40vh, 360px); }
.sheet__portrait{ min-height: 360px; }
.panel{ border-width: var(--brd); }
.panel__title{
  border-width: var(--brd);
  height: 44px;
  font-size: clamp(15px,2vw,18px);
}
.sheet,.panel,.panel__title,.stair-btn{ border-color: rgba(242,152,166,.62) !important; }
.panel--xana::before{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px),
    radial-gradient(900px 500px at 110% -10%, rgba(242,152,166,.07), transparent 60%);
  opacity:.65;
}
.panel--xana::after{
  box-shadow: 0 0 0 1px rgba(242,152,166,.12) inset,
              0 0 22px rgba(242,152,166,.08) inset;
}
.stair-btn{ border-width: var(--brd); box-shadow: inset 0 0 0 1px rgba(242,152,166,.12); }
.stair-btn.is-active{
  border-color: rgba(242,152,166,.9);
  box-shadow: 0 16px 46px rgba(242,152,166,.28), 0 0 0 2px rgba(242,152,166,.14) inset;
}
.stats li b{ width: 110px; color: #ffd6de; }

/* ==== FIX PERSONNAGES : pas de chevauchement portrait/données + hauteur utile ====
   - 3 lignes de grille : Titre / (Infos + Portrait) / (Infos + Données)
   - Portrait et Données partagent la même colonne, l’un sous l’autre
   - Hauteurs mini revues pour remplir l’écran sans déborder
=============================================================================== */
.sheet{
  /* colonne droite dédiée au portrait + stats, côte à côte des infos */
  grid-template-columns: 1.55fr 1.55fr 1fr;
  /* 3 lignes : titre / contenu haut / contenu bas */
  grid-template-rows: 72px auto auto;
  grid-template-areas:
    "title title title"
    "info  info  portrait"
    "info  info  stats";
  /* fiche plus haute mais bornée à la hauteur de l’écran */
  min-height: min(82svh, 980px);
}

/* Bloc infos : assez de place pour respirer */
.sheet__info{
  min-height: min(52svh, 520px);
}

/* Portrait au-dessus des données (même colonne) */
.sheet__portrait{
  grid-area: portrait;
  min-height: 420px;   /* adaptez si vos visuels sont plus hauts */
}

/* Données sous le portrait */
.sheet__stats{
  grid-area: stats;
  min-height: 220px;
}

/* Un poil plus d’air sous les titres internes */
.panel__title{ margin-bottom: 12px; }

/* ---------- Responsive affinage ---------- */
@media (max-width: 1100px){
  .sheet{
    grid-template-columns: 1fr 1fr 0.9fr;      /* un peu plus compact */
    min-height: min(84svh, 900px);
  }
  .sheet__portrait{ min-height: 380px; }
}

@media (max-width: 880px){
  /* Empilement mobile (déjà présent), on garde juste des hauteurs cohérentes */
  .sheet{
    grid-template-columns: 1fr;
    grid-template-rows: 72px auto auto auto;
    grid-template-areas:
      "title"
      "portrait"
      "info"
      "stats";
    min-height: auto;
  }
  .sheet__info{ min-height: 380px; }
  .sheet__portrait{ min-height: 320px; }
  .sheet__stats{ min-height: 200px; }
}

/* === PERSONNAGES — Rail gauche : taille/placement des boutons ================== */
.chars{
  /* sidebar plus large + plus d'air avec la fiche */
  grid-template-columns: 320px minmax(0, 1fr);
  column-gap: 28px;
}

.chars-stair{
  /* on descend le rail pour l’aligner visuellement avec le titre de la fiche */
  top: calc(var(--nav-h) + 24px);
  margin-left: 12px;             /* éloigne du bord gauche */
}

.stair__scroll{
  padding-right: 10px;
  padding-left: 6px;
  max-height: calc(100svh - var(--nav-h) - 36px); /* un peu plus de marge */
}

/* Boutons : plus grands, plus lisibles */
.stair-btn{
  height: 128px;
  border-radius: 16px;
  font-size: clamp(14px, 1.35vw, 16px);
  letter-spacing: .06em;
  width: 100%;
}
.stair-btn + .stair-btn{ margin-top: 18px; }

/* Actif : un chouïa plus grand pour le feedback */
.stair-btn.is-active{ transform: scale(1.08); }

/* “À venir” un peu plus petit pour marquer la diff. */
.stair-btn--soon{ height: 96px; }

/* --------- Responsives ---------- */
@media (max-width: 1100px){
  .chars{ grid-template-columns: 280px 1fr; column-gap: 22px; }
  .stair-btn{ height: 110px; }
}
@media (max-width: 880px){
  .chars{ grid-template-columns: 1fr; } /* empilement mobile (déjà géré) */
}