/* =========================================================================
   Nayuu — template streameuse · v2.1.1

   TROIS TEMPLATES EN UN
   Chaque univers change la palette, les typographies, les formes, les ombres,
   les textures et le cadre du portrait. Le choix du visiteur est retenu dans
   son navigateur (voir assets/js/app.js).

     caraibes  parchemin, or vieilli, vert-de-gris · serif gravé · arche
     escadron  rouge et bleu Harley · affiche condensée · fiche de détention
     westeros  pierre, acier, sang · serif large et clair · bannière

   Structure du fichier
     1-2  thèmes clair et sombre (valeurs de base = escadron)
     3    formes et typographies par univers
     4    palettes par univers, en clair puis en sombre
     5    base et composants communs
     6    variantes de composants par univers
   ========================================================================= */

/* ---------- 1. Thème clair ---------- */
:root {
  --ground:      #EDE7DB;
  --ground-2:    #FAF6EE;
  --ground-3:    #DFD6C6;
  --ink:         #15121A;
  --ink-2:       #4A4353;
  --ink-3:       #7B7386;
  --line:        rgba(21, 18, 26, .18);
  --line-2:      rgba(21, 18, 26, .82);

  --accent:      #D6003F;
  --accent-ink:  #FFF4F7;
  --accent-soft: #F7D5DF;
  --accent-2:    #1E3FB8;
  --pop:         #0F8C7E;
  --glow:        rgba(214, 0, 63, .22);

  --live:        #C8102E;
  --live-ink:    #FFF2F4;

  --ombre-dure:  rgba(21, 18, 26, .9);
  --ombre-titre: rgba(21, 18, 26, .16);
  --trame:       rgba(21, 18, 26, .16);

  --pas: clamp(56px, 7vw, 108px);
}

/* ---------- 2. Thème sombre ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #0B0910;
    --ground-2:    #14111C;
    --ground-3:    #1E1A29;
    --ink:         #F5F1F9;
    --ink-2:       #B6AEC4;
    --ink-3:       #807891;
    --line:        rgba(245, 241, 249, .16);
    --line-2:      rgba(245, 241, 249, .55);

    --accent:      #FF2E6B;
    --accent-ink:  #1A0510;
    --accent-soft: rgba(255, 46, 107, .16);
    --accent-2:    #4D77FF;
    --pop:         #2BE0C8;
    --glow:        rgba(255, 46, 107, .34);

    --live:        #FF3B4E;
    --live-ink:    #1A0407;

    --ombre-dure:  rgba(0, 0, 0, .85);
    --ombre-titre: rgba(0, 0, 0, .5);
    --trame:       rgba(245, 241, 249, .14);
  }
}
:root[data-theme="dark"] {
  --ground:      #0B0910;
  --ground-2:    #14111C;
  --ground-3:    #1E1A29;
  --ink:         #F5F1F9;
  --ink-2:       #B6AEC4;
  --ink-3:       #807891;
  --line:        rgba(245, 241, 249, .16);
  --line-2:      rgba(245, 241, 249, .55);

  --accent:      #FF2E6B;
  --accent-ink:  #1A0510;
  --accent-soft: rgba(255, 46, 107, .16);
  --accent-2:    #4D77FF;
  --pop:         #2BE0C8;
  --glow:        rgba(255, 46, 107, .34);

  --live:        #FF3B4E;
  --live-ink:    #1A0407;

  --ombre-dure:  rgba(0, 0, 0, .85);
  --ombre-titre: rgba(0, 0, 0, .5);
  --trame:       rgba(245, 241, 249, .14);
}

/* ---------- 3. Formes et typographies, par univers ----------
   Indépendantes du thème clair / sombre. */

:root,
:root[data-universe="escadron"] {
  --font-titre: Anton, "Arial Narrow", Impact, sans-serif;
  --font-main:  "Permanent Marker", "Segoe Script", cursive;
  --font-corps: Barlow, "Segoe UI", system-ui, sans-serif;

  --titre-graisse: 400;
  --titre-espacement: .012em;
  --titre-hauteur: .94;
  --titre-casse: uppercase;

  --bord: 2px;
  --trait: var(--ink);
  --r-s: 2px;
  --r-m: 3px;
  --r-l: 4px;

  --ombre-carte: 5px 5px 0 var(--ombre-dure);
  --ombre-carte-forte: 9px 9px 0 var(--ombre-dure);
  --ombre-cadre: 10px 10px 0 var(--ombre-dure);
  --leve: translate(-3px, -3px);

  --texture: radial-gradient(var(--trame) 1px, transparent 1px);
  --texture-taille: 15px 15px;

  --cadre-ratio: 1 / 1.16;
  --tampon-rot: -11deg;

  /*  Accent destiné aux surfaces toujours sombres — l'écran « transmission
      coupée », la barre du lecteur. En thème clair, l'accent normal y serait
      presque noir sur noir. */
  --accent-sombre: #FF2E6B;
}

:root[data-universe="caraibes"] {
  --font-titre: Cinzel, "Trajan Pro", Georgia, serif;
  --font-main:  Caveat, "Segoe Script", cursive;
  --font-corps: Barlow, "Segoe UI", system-ui, sans-serif;

  --titre-graisse: 700;
  --titre-espacement: .035em;
  --titre-hauteur: 1.04;
  --titre-casse: none;

  --bord: 1px;
  --trait: var(--line);
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;

  --ombre-carte: 0 10px 26px var(--ombre-dure);
  --ombre-carte-forte: 0 18px 40px var(--ombre-dure);
  --ombre-cadre: 0 26px 60px var(--ombre-dure);
  --leve: translateY(-4px);

  --texture: repeating-linear-gradient(-38deg, var(--trame) 0 1px, transparent 1px 13px);
  --texture-taille: auto;

  --cadre-ratio: 1 / 1.3;
  --tampon-rot: -4deg;
  --accent-sombre: #E0A93F;
}

:root[data-universe="westeros"] {
  --font-titre: "Cormorant Garamond", "Times New Roman", serif;
  --font-main:  "Cormorant Garamond", "Times New Roman", serif;
  --font-corps: Barlow, "Segoe UI", system-ui, sans-serif;

  --titre-graisse: 300;
  --titre-espacement: .17em;
  --titre-hauteur: 1.08;
  --titre-casse: uppercase;

  --bord: 1px;
  --trait: var(--line-2);
  --r-s: 0px;
  --r-m: 0px;
  --r-l: 0px;

  --ombre-carte: 0 2px 0 var(--ombre-dure);
  --ombre-carte-forte: 0 8px 22px var(--ombre-dure);
  --ombre-cadre: 0 20px 44px var(--ombre-dure);
  --leve: translateY(-3px);

  --texture: repeating-linear-gradient(to right, var(--trame) 0 1px, transparent 1px 48px);
  --texture-taille: auto;

  --cadre-ratio: 1 / 1.34;
  --tampon-rot: 45deg;
  --accent-sombre: #D2495C;
}

/* ---------- 4. Palettes par univers ---------- */

/* --- clair --- */
:root[data-universe="caraibes"] {
  --ground:      #EDE0C4;
  --ground-2:    #F8EFDC;
  --ground-3:    #DFCEAA;
  --ink:         #2B1D10;
  --ink-2:       #5C482F;
  --ink-3:       #8C7454;
  --line:        rgba(43, 29, 16, .2);
  --line-2:      rgba(43, 29, 16, .52);

  --accent:      #9A6410;
  --accent-ink:  #FFF8E8;
  --accent-soft: #E9D3A4;
  --accent-2:    #2A6460;
  --pop:         #8C3A2B;
  --glow:        rgba(154, 100, 16, .24);

  --live:        #A3341F;
  --live-ink:    #FFF3EC;

  --ombre-dure:  rgba(60, 40, 18, .3);
  --ombre-titre: rgba(60, 40, 18, .14);
  --trame:       rgba(60, 40, 18, .14);
}

:root[data-universe="westeros"] {
  --ground:      #E4E3DF;
  --ground-2:    #F2F1EE;
  --ground-3:    #D3D2CD;
  --ink:         #15171A;
  --ink-2:       #474B50;
  --ink-3:       #757A80;
  --line:        rgba(21, 23, 26, .2);
  --line-2:      rgba(21, 23, 26, .58);

  --accent:      #8A1F2B;
  --accent-ink:  #F7EEEA;
  --accent-soft: #E3D3D2;
  --accent-2:    #34647F;
  --pop:         #8A7444;
  --glow:        rgba(138, 31, 43, .2);

  --live:        #9B1B28;
  --live-ink:    #F9EFEF;

  --ombre-dure:  rgba(21, 23, 26, .24);
  --ombre-titre: rgba(21, 23, 26, .12);
  --trame:       rgba(21, 23, 26, .13);
}

/* --- sombre --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-universe="caraibes"] {
    --ground:      #0D141A;
    --ground-2:    #141F27;
    --ground-3:    #1D2B34;
    --ink:         #F3E5C9;
    --ink-2:       #C2AE8C;
    --ink-3:       #8E7F66;
    --line:        rgba(243, 229, 201, .17);
    --line-2:      rgba(243, 229, 201, .5);

    --accent:      #E0A93F;
    --accent-ink:  #23180A;
    --accent-soft: rgba(224, 169, 63, .16);
    --accent-2:    #56B6A8;
    --pop:         #C25A43;
    --glow:        rgba(224, 169, 63, .3);

    --live:        #E4654A;
    --live-ink:    #220D07;

    --ombre-dure:  rgba(0, 0, 0, .6);
    --ombre-titre: rgba(0, 0, 0, .45);
    --trame:       rgba(243, 229, 201, .12);
  }
  :root:not([data-theme="light"])[data-universe="westeros"] {
    --ground:      #090B0D;
    --ground-2:    #121619;
    --ground-3:    #1B2126;
    --ink:         #E9EBED;
    --ink-2:       #A7AEB4;
    --ink-3:       #757D84;
    --line:        rgba(233, 235, 237, .17);
    --line-2:      rgba(233, 235, 237, .5);

    --accent:      #C0303F;
    --accent-ink:  #1A0608;
    --accent-soft: rgba(192, 48, 63, .18);
    --accent-2:    #7FC4E8;
    --pop:         #C9A961;
    --glow:        rgba(192, 48, 63, .3);

    --live:        #D33B4A;
    --live-ink:    #1A0507;

    --ombre-dure:  rgba(0, 0, 0, .7);
    --ombre-titre: rgba(0, 0, 0, .5);
    --trame:       rgba(233, 235, 237, .1);
  }
}

:root[data-theme="dark"][data-universe="caraibes"] {
  --ground:      #0D141A;
  --ground-2:    #141F27;
  --ground-3:    #1D2B34;
  --ink:         #F3E5C9;
  --ink-2:       #C2AE8C;
  --ink-3:       #8E7F66;
  --line:        rgba(243, 229, 201, .17);
  --line-2:      rgba(243, 229, 201, .5);

  --accent:      #E0A93F;
  --accent-ink:  #23180A;
  --accent-soft: rgba(224, 169, 63, .16);
  --accent-2:    #56B6A8;
  --pop:         #C25A43;
  --glow:        rgba(224, 169, 63, .3);

  --live:        #E4654A;
  --live-ink:    #220D07;

  --ombre-dure:  rgba(0, 0, 0, .6);
  --ombre-titre: rgba(0, 0, 0, .45);
  --trame:       rgba(243, 229, 201, .12);
}
:root[data-theme="dark"][data-universe="westeros"] {
  --ground:      #090B0D;
  --ground-2:    #121619;
  --ground-3:    #1B2126;
  --ink:         #E9EBED;
  --ink-2:       #A7AEB4;
  --ink-3:       #757D84;
  --line:        rgba(233, 235, 237, .17);
  --line-2:      rgba(233, 235, 237, .5);

  --accent:      #C0303F;
  --accent-ink:  #1A0608;
  --accent-soft: rgba(192, 48, 63, .18);
  --accent-2:    #7FC4E8;
  --pop:         #C9A961;
  --glow:        rgba(192, 48, 63, .3);

  --live:        #D33B4A;
  --live-ink:    #1A0507;

  --ombre-dure:  rgba(0, 0, 0, .7);
  --ombre-titre: rgba(0, 0, 0, .5);
  --trame:       rgba(233, 235, 237, .1);
}

/* ---------- 5. Base et composants communs ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-corps);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

[hidden] { display: none !important; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-titre);
  font-weight: var(--titre-graisse);
  line-height: var(--titre-hauteur);
  letter-spacing: var(--titre-espacement);
  text-transform: var(--titre-casse);
  text-wrap: balance;
}

a { color: inherit; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

p { margin: 0; }

.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 20px;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  transform: rotate(-1.2deg);
}

.section { padding-block: var(--pas); }
.section--creme {
  background-color: var(--ground-2);
  background-image: var(--texture);
  background-size: var(--texture-taille);
}

.section-head { max-width: 62ch; margin-bottom: 42px; }
.section-head h2 { font-size: clamp(36px, 5.4vw, 62px); }
.section-head p { color: var(--ink-2); margin-top: 16px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* séparateur de section */
.bande {
  height: 26px;
  background-image: repeating-linear-gradient(-45deg, var(--accent) 0 16px, var(--ink) 16px 32px);
  border-block: var(--bord) solid var(--trait);
}

/* tampon d'univers */
.tampon {
  display: grid; place-items: center;
  width: 74px; height: 74px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  background: var(--ground);
  color: var(--accent);
  transform: rotate(var(--tampon-rot));
  box-shadow: inset 0 0 0 2px var(--ground), inset 0 0 0 5px var(--accent);
  transition: color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.tampon svg { width: 30px; height: 30px; }
.tampon svg[hidden] { display: none; }
.tampon.est-vise { animation: tamponne 1.7s ease; }
@keyframes tamponne {
  0%, 100% { transform: rotate(var(--tampon-rot)) scale(1); }
  16%      { transform: rotate(var(--tampon-rot)) scale(1.18); }
  40%      { transform: rotate(var(--tampon-rot)) scale(.97); }
  62%      { transform: rotate(var(--tampon-rot)) scale(1.07); }
}

/* boutons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  border: var(--bord) solid var(--trait);
  border-radius: var(--r-m);
  background: var(--ground-2);
  color: var(--ink);
  font: inherit; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; font-size: 15px;
  text-decoration: none; cursor: pointer;
  box-shadow: var(--ombre-carte);
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn:hover { transform: var(--leve); box-shadow: var(--ombre-carte-forte); }
.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--trait); }
.btn--sm { padding: 9px 15px; font-size: 13px; }
.btn__ico { width: 17px; height: 17px; flex: none; }

/* en-tête */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  background: var(--ground);
  border-bottom: var(--bord) solid var(--trait);
}
.site-header__in { display: flex; align-items: center; gap: 18px; min-height: 72px; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
/*  Le logo garde ses couleurs : c'est une marque, pas un élément de thème.
    Il ne suit donc pas l'accent du template en cours. */
.brand__sceau { display: block; width: 36px; height: 36px; flex: none; }
.brand__nom {
  font-family: var(--font-titre); font-weight: var(--titre-graisse);
  font-size: 23px; letter-spacing: .08em; text-transform: uppercase;
}
.brand__handle {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em;
  color: var(--ink-3); text-transform: uppercase;
}

.nav { display: flex; gap: 2px; }
.nav a {
  padding: 8px 12px; text-decoration: none;
  font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 3px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
.nav a:hover { color: var(--ink); border-color: var(--line-2); }
.nav a[aria-current="true"] { color: var(--accent); border-color: var(--accent); }

.ambiances { display: flex; gap: 6px; padding-left: 14px; border-left: var(--bord) solid var(--line); }
.ambiance {
  width: 36px; height: 36px; padding: 0; display: grid; place-items: center;
  border: var(--bord) solid var(--line-2); border-radius: var(--r-s);
  background: transparent; color: var(--ink-2); cursor: pointer;
  transition: color .16s ease, background-color .16s ease, transform .16s ease;
}
.ambiance svg { width: 19px; height: 19px; }
.ambiance:hover { color: var(--ink); transform: translateY(-2px); }
.ambiance[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--trait); }

@media (max-width: 1060px) { .nav, .ambiances { display: none; } }

/* héros */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(300px, .96fr);
  gap: clamp(26px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(30px, 4vw, 60px) clamp(46px, 6vw, 96px);
}
.hero__texte { max-width: 34rem; }

.titre-multi {
  display: flex; flex-wrap: wrap;
  margin-top: 18px;
  font-size: clamp(60px, 10.5vw, 140px);
  line-height: .9;
}
.titre-multi span {
  display: inline-block;
  color: var(--ink);
  transform: rotate(var(--r, 0deg));
}

.hero__baseline {
  color: var(--ink-2); margin-top: 22px;
  font-size: clamp(16.5px, 1.5vw, 19px); max-width: 44ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.pastille {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 13px 6px 11px;
  border: var(--bord) solid var(--trait); border-radius: var(--r-s);
  background: var(--ground-3); color: var(--ink-2);
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.pastille__point { width: 9px; height: 9px; background: var(--ink-3); flex: none; border-radius: var(--r-s); }
.pastille[data-live="true"] { background: var(--live); color: var(--live-ink); }
.pastille[data-live="true"] .pastille__point {
  background: currentColor; animation: battement 1.4s steps(2, end) infinite;
}
@keyframes battement { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.stats {
  /* deux colonnes fixes : quatre valeurs de largeurs inégales tomberaient
     autrement en 3 + 1, ce qui se lit mal */
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 30px;
  margin: 36px 0 0; padding-top: 26px;
  border-top: var(--bord) solid var(--line);
}
.stats div { min-width: 0; }
.stats dt {
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3);
}
.stats dd {
  margin: 5px 0 0; font-family: var(--font-titre); font-weight: var(--titre-graisse);
  font-size: 30px; letter-spacing: .03em; font-variant-numeric: tabular-nums;
}
.stats__texte { font-size: 23px; }
.stats__texte.est-live { color: var(--live); }

/* le cadre du portrait */
.hero__scene { display: flex; justify-content: center; }
.cadre { position: relative; width: min(420px, 100%); }

.dossier {
  position: relative; margin: 0; overflow: hidden;
  border: var(--bord) solid var(--trait);
  border-radius: var(--r-l);
  background: var(--ground-2);
  box-shadow: var(--ombre-cadre);
}

.dossier__bande {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 13px;
  background: var(--accent); color: var(--accent-ink);
  border-bottom: var(--bord) solid var(--trait);
  font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}

.dossier__corps {
  position: relative;
  aspect-ratio: var(--cadre-ratio);
  overflow: hidden;
  background-color: var(--ground-3);
  background-image:
    radial-gradient(84% 54% at 50% 96%, var(--glow), transparent 68%),
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 34px);
}

.dossier__toise {
  position: absolute; inset: 0 auto 0 0; width: 46px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 14px 0 22px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--ink-3); text-align: center;
  font-variant-numeric: tabular-nums;
}

.dossier__mot {
  position: absolute; left: 52%; bottom: 11%;
  transform: translateX(-50%) rotate(-7deg);
  font-family: var(--font-main);
  font-size: clamp(60px, 7.4vw, 104px); line-height: 1;
  color: var(--accent); opacity: .3;
  white-space: nowrap; pointer-events: none; user-select: none;
  transition: color .3s ease, opacity .3s ease;
}
.dossier__mot.est-live { color: var(--live); opacity: .38; }

.dossier__ombre {
  position: absolute; left: 54%; bottom: 16px; transform: translateX(-50%);
  width: 56%; height: 26px; border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--ombre-dure), transparent 72%);
  opacity: .6; filter: blur(5px);
}

.dossier__figure {
  position: absolute; left: 54%; bottom: 8px; transform: translateX(-50%);
  height: 92%; width: auto; max-width: none;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .4));
}

.dossier__plaque {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 58px 12px 14px;
  border-top: var(--bord) solid var(--trait);
  background: var(--ground-2);
}
.dossier__plaque b {
  font-family: var(--font-titre); font-weight: var(--titre-graisse); font-size: 25px;
  letter-spacing: .06em; text-transform: uppercase;
}
.dossier__plaque span {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}

.cadre .tampon { position: absolute; right: -22px; bottom: -26px; z-index: 3; }

/* textes propres à chaque univers */
[data-univers-txt] { display: none; }
:root[data-universe="caraibes"] [data-univers-txt="caraibes"],
:root[data-universe="escadron"] [data-univers-txt="escadron"],
:root[data-universe="westeros"] [data-univers-txt="westeros"] { display: inline; }

/* le direct */
.live-grid {
  display: grid; gap: 26px;
  grid-template-columns: minmax(0, 1.66fr) minmax(280px, 1fr);
  align-items: start;
}

.player {
  position: relative;
  border: var(--bord) solid var(--trait); border-radius: var(--r-m);
  background: #08070C; overflow: hidden;
  box-shadow: var(--ombre-carte);
}
.player__scene { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.player__scene iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/*  Twitch refuse de s'afficher depuis une adresse IP ou un fichier local.
    Plutôt qu'un cadre gris et muet, on explique et on propose un lien. */
.twitch-indispo {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: center; justify-items: center; gap: 12px;
  padding: 24px; text-align: center;
  background: var(--ground-3); color: var(--ink-2);
}
.twitch-indispo p { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.6; }
.twitch-indispo code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  padding: 1px 6px; border-radius: var(--r-s);
  background: var(--ground-2); color: var(--accent-sombre);
}
/*  Le tchat n'a pas de cadre en position absolue : le message s'y pose dans
    le flux, sinon il se superposerait au lecteur. */
#chat-zone .twitch-indispo { position: static; min-height: 220px; }

.player__mock { position: absolute; inset: 0; overflow: hidden; background: #0B1626; }
.player__mock svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.player__mock-note {
  position: absolute; left: 14px; bottom: 56px; z-index: 3; max-width: 78%;
  font-size: 12px; font-weight: 600; color: #0B0910;
  background: #F3E3C6; border: 2px solid #0B0910; border-radius: var(--r-s);
  padding: 6px 11px;
}

.player__hors-ligne {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center;
  gap: 14px; text-align: center; padding: 28px;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .03) 0 10px, transparent 10px 20px),
    radial-gradient(70% 90% at 50% 0%, var(--glow), transparent 70%),
    #0E0B14;
  color: #F5F1F9;
}
.embleme-hors-ligne { display: block; color: var(--accent-sombre); }
.embleme-hors-ligne svg { width: 42px; height: 42px; }
.embleme-hors-ligne svg[hidden] { display: none; }

.player__rideau {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: center; justify-items: center; gap: 16px;
  padding: 28px; text-align: center;
  background:
    radial-gradient(70% 90% at 50% 0%, var(--glow), transparent 70%),
    #0E0B14;
}
.player__rideau p {
  max-width: 44ch; font-size: 13px; line-height: 1.5;
  color: rgba(245, 241, 249, .62);
}

.player__hors-ligne h3 { font-size: 30px; }

/*  Boutons posés sur une surface toujours sombre : ils ne peuvent pas
    emprunter les couleurs du thème clair. */
.btn--sur-sombre {
  background: transparent;
  color: #F5F1F9;
  border-color: rgba(245, 241, 249, .45);
  box-shadow: none;
}
.btn--sur-sombre:hover { border-color: var(--accent-sombre); color: var(--accent-sombre); }
.player__hors-ligne p { color: rgba(245, 241, 249, .68); max-width: 38ch; font-size: 15px; }

.player__barre {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(to top, rgba(6, 5, 9, .94), transparent);
  color: #F5F1F9; font-size: 13px;
}
.player__spectateurs {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.player__spectateurs svg { width: 15px; height: 15px; }

.fiche {
  border: var(--bord) solid var(--trait); border-radius: var(--r-m);
  background: var(--ground-2);
  padding: 20px 20px 22px;
  box-shadow: var(--ombre-carte);
}
.fiche + .fiche { margin-top: 22px; }
.fiche h3 { font-size: 22px; }
.fiche__titre-stream { margin-top: 12px; font-weight: 700; }
.fiche dl {
  display: grid; grid-template-columns: auto 1fr; gap: 9px 16px;
  margin: 18px 0 0; font-size: 14.5px;
}
.fiche dt {
  color: var(--ink-3); font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; align-self: center;
}
.fiche dd { margin: 0; text-align: right; font-weight: 600; }

.rebours { display: flex; gap: 10px; margin-top: 18px; }
.rebours div {
  flex: 1; text-align: center; padding: 12px 6px;
  border: var(--bord) solid var(--line); border-radius: var(--r-s);
  background: var(--ground-3);
}
.rebours b {
  display: block; font-family: var(--font-titre); font-weight: var(--titre-graisse);
  font-size: 30px; font-variant-numeric: tabular-nums; line-height: 1;
}
.rebours span {
  font-size: 10px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}

.chat-zone { margin-top: 18px; }
.chat-zone iframe {
  display: block; width: 100%; height: 480px;
  border: var(--bord) solid var(--line); margin-top: 14px; background: var(--ground-3);
}
@media (max-width: 900px) { .chat-zone { display: none; } }
@media (max-width: 900px) { .live-grid { grid-template-columns: 1fr; } }

/* réseaux */
.reseaux-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.reseau {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 16px; text-decoration: none;
  border: var(--bord) solid var(--trait); border-radius: var(--r-m);
  background: var(--ground-2);
  box-shadow: var(--ombre-carte);
  transition: transform .16s ease, box-shadow .16s ease;
}
.reseau:hover { transform: var(--leve); box-shadow: var(--ombre-carte-forte); }
.reseau__ico {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border: var(--bord) solid var(--trait); border-radius: var(--r-s);
  background: var(--accent-soft); color: var(--accent);
}
.reseau__ico svg { width: 23px; height: 23px; }
.reseau__txt { min-width: 0; }
.reseau__nom {
  display: block; font-family: var(--font-titre); font-weight: var(--titre-graisse);
  font-size: 19px; letter-spacing: .05em; text-transform: uppercase;
}
.reseau__handle {
  display: block; font-size: 13.5px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reseau__fleche { margin-left: auto; color: var(--ink-3); flex: none; transition: transform .16s ease, color .16s ease; }
.reseau:hover .reseau__fleche { transform: translate(3px, -3px); color: var(--accent); }
.reseau--phare { background: var(--accent); color: var(--accent-ink); }
.reseau--phare .reseau__handle, .reseau--phare .reseau__fleche { color: inherit; opacity: .85; }
.reseau--phare .reseau__ico { background: var(--accent-ink); color: var(--accent); }

/* programme */
.programme { border-top: var(--bord) solid var(--trait); }
.creneau {
  display: grid; align-items: center; gap: 6px 22px;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  padding: 18px 10px;
  border-bottom: 1px solid var(--line);
}
.creneau__jour {
  font-family: var(--font-titre); font-weight: var(--titre-graisse);
  font-size: 20px; letter-spacing: .06em; text-transform: uppercase;
}
.creneau__titre { font-weight: 700; }
.creneau__jeu { font-size: 14px; color: var(--ink-3); }
.creneau__heure {
  font-family: var(--font-titre); font-weight: var(--titre-graisse);
  font-size: 19px; letter-spacing: .05em;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2);
}
.creneau[data-repos="true"] { color: var(--ink-3); }
.creneau[data-repos="true"] .creneau__titre { font-weight: 500; font-style: italic; }
.creneau[data-aujourdhui="true"] {
  background: var(--accent-soft);
  box-shadow: inset 5px 0 0 var(--accent);
  padding-left: 18px;
}
.creneau__marque {
  display: none; font-size: 10.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
}
.creneau[data-aujourdhui="true"] .creneau__marque { display: block; }

@media (max-width: 620px) {
  .creneau { grid-template-columns: 1fr auto; }
  .creneau__jour { grid-column: 1 / -1; font-size: 15px; color: var(--accent); }
}

/* univers */
.univers-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.univers-card {
  display: flex; flex-direction: column; gap: 14px; text-align: left;
  padding: 24px 22px;
  border: var(--bord) solid var(--trait); border-radius: var(--r-l);
  background: var(--ground-2); color: inherit;
  font: inherit; cursor: pointer;
  box-shadow: var(--ombre-carte);
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.univers-card:hover { transform: var(--leve); box-shadow: var(--ombre-carte-forte); }
.univers-card[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.univers-card__ico { width: 44px; height: 44px; color: var(--accent); }
.univers-card h3 { font-size: 26px; }
.univers-card p { font-size: 14.5px; color: var(--ink-2); }
.univers-card__objet {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.univers-card[aria-pressed="true"] .univers-card__objet { color: var(--accent); }
.univers-card__actif { display: none; }
.univers-card[aria-pressed="true"] .univers-card__actif { display: inline; }

@media (prefers-reduced-motion: reduce) {
  .tampon.est-vise { animation: none; }
  .pastille[data-live="true"] .pastille__point { animation: none; }
  .btn, .reseau, .univers-card, .soutien, .ambiance { transition: none; }
}

/* le jeu */

/*  Le jeu s'ouvre par-dessus la page plutôt que d'y être posé : intégré dans
    le flux, il capturait le défilement sur mobile — le doigt jouait au lieu
    de faire défiler la page. */
.jeu-lancement { display: flex; justify-content: center; }

.jeu-lancement__bouton {
  font-size: 17px;
  padding: 16px 34px;
  /*  Cible confortable au doigt, et au-dessus du minimum de 44 px. */
  min-height: 56px;
}

.jeu-couche {
  position: fixed; inset: 0; z-index: 90;
  background: #08060F;
}
.jeu-couche iframe { display: block; width: 100%; height: 100%; border: 0; }

.jeu-couche__fermer {
  position: fixed; z-index: 91;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: calc(10px + env(safe-area-inset-right, 0px));
  padding: 9px 16px;
  font: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #F3F4F6;
  background: rgba(18, 16, 28, .82);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  cursor: pointer;
}
.jeu-couche__fermer:hover { background: rgba(18, 16, 28, .96); }

.jeu-note {
  margin-top: 18px; text-align: center;
  font-size: 14px; color: var(--ink-3);
}
.jeu-note a { color: var(--accent); font-weight: 700; }

/* soutien */
.soutien-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  /* Deux cartes seulement pour l'instant : sans cette largeur maximale, elles
     s'étireraient chacune sur la moitié de la page. À retirer le jour où la
     boutique et les collaborations reviennent. */
  max-width: 820px;
}
.soutien {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 20px; text-decoration: none;
  border: var(--bord) solid var(--trait); border-radius: var(--r-m);
  background: var(--ground-2);
  box-shadow: var(--ombre-carte);
  transition: transform .16s ease, box-shadow .16s ease;
}
.soutien:hover { transform: var(--leve); box-shadow: var(--ombre-carte-forte); }
.soutien h3 { font-size: 21px; }
.soutien p { font-size: 14.5px; color: var(--ink-2); }
.soutien__lien {
  margin-top: auto; padding-top: 12px;
  font-weight: 700; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
}

/* pages d'information */
.texte-legal { max-width: 68ch; }
.texte-legal h2 {
  margin-top: 40px; margin-bottom: 14px;
  font-size: clamp(22px, 2.6vw, 30px);
}
.texte-legal h2:first-child { margin-top: 0; }
.texte-legal p, .texte-legal ul { color: var(--ink-2); margin-bottom: 14px; }
.texte-legal ul { padding-left: 22px; }
.texte-legal li { margin-bottom: 7px; }
.texte-legal strong { color: var(--ink); }
.texte-legal a { color: var(--accent); }
.texte-legal .date-maj {
  margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-3);
}

/* pied de page */
.site-footer {
  border-top: var(--bord) solid var(--trait);
  background: var(--ground-2);
  padding-block: 48px calc(48px + env(safe-area-inset-bottom, 0px));
  margin-bottom: 70px;
}
.site-footer__in { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; }
.site-footer__bloc { min-width: 200px; }
.site-footer__bloc:first-child { margin-right: auto; }
.site-footer h2 {
  font-family: var(--font-corps); font-size: 12px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14.5px; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.site-footer__legal {
  width: 100%; margin-top: 32px; padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-3);
  display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center;
}
.site-footer__version {
  font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 3px 9px; border: 1px solid var(--line); border-radius: var(--r-s);
}
@media (min-width: 860px) { .site-footer { margin-bottom: 0; } }

/* barre mobile */
.barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--ground);
  border-top: var(--bord) solid var(--trait);
}
.barre-mobile .pastille { flex: none; font-size: 10.5px; padding: 5px 10px; }
.barre-mobile__liens { margin-left: auto; display: flex; gap: 8px; }
.barre-mobile__liens a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: var(--bord) solid var(--line-2); border-radius: var(--r-s); color: var(--ink-2);
}
.barre-mobile__liens a svg { width: 19px; height: 19px; }
.barre-mobile__liens a:hover { color: var(--accent); border-color: var(--accent); }
@media (min-width: 860px) { .barre-mobile { display: none; } }

/* ---------- 6. Variantes de composants, par univers ---------- */

/* --- ESCADRON : le nom en couleurs, la fiche de détention --- */
:root[data-universe="escadron"] .titre-multi { font-size: clamp(66px, 11.5vw, 152px); line-height: .84; }
:root[data-universe="escadron"] .titre-multi span { text-shadow: 4px 4px 0 var(--ombre-titre); }
:root[data-universe="escadron"] .titre-multi span:nth-child(5n + 1) { color: var(--accent);   --r: -3deg; }
:root[data-universe="escadron"] .titre-multi span:nth-child(5n + 2) { color: var(--ink);      --r: 2.4deg; }
:root[data-universe="escadron"] .titre-multi span:nth-child(5n + 3) { color: var(--accent-2); --r: -1.4deg; }
:root[data-universe="escadron"] .titre-multi span:nth-child(5n + 4) { color: var(--pop);      --r: 3deg; }
:root[data-universe="escadron"] .titre-multi span:nth-child(5n + 5) { color: var(--accent);   --r: -2.2deg; }

/* --- CARAÏBES : l'arche de cabine, l'or et le parchemin --- */
:root[data-universe="caraibes"] .dossier {
  border-radius: 58% 58% var(--r-l) var(--r-l) / 40% 40% var(--r-l) var(--r-l);
  border-width: 2px; border-color: var(--accent);
}
:root[data-universe="caraibes"] .dossier__bande { display: none; }
:root[data-universe="caraibes"] .dossier__toise { display: none; }
:root[data-universe="caraibes"] .dossier__corps {
  background-image:
    radial-gradient(86% 56% at 50% 92%, var(--glow), transparent 70%),
    repeating-linear-gradient(-38deg, var(--line) 0 1px, transparent 1px 22px);
}
:root[data-universe="caraibes"] .dossier__figure { left: 50%; }
:root[data-universe="caraibes"] .dossier__ombre { left: 50%; }
:root[data-universe="caraibes"] .dossier__mot { left: 50%; bottom: 9%; }
:root[data-universe="caraibes"] .dossier__plaque {
  justify-content: center; gap: 16px; padding: 14px 20px;
  border-top-width: 2px; border-top-color: var(--accent);
}
:root[data-universe="caraibes"] .cadre .tampon { right: -18px; bottom: -22px; }
:root[data-universe="caraibes"] .eyebrow {
  background: transparent; color: var(--accent); padding: 0; transform: none;
  border-bottom: 2px solid var(--accent); letter-spacing: .26em;
}
:root[data-universe="caraibes"] .bande {
  height: 14px;
  background-image: repeating-linear-gradient(64deg,
    var(--accent) 0 7px, var(--accent-soft) 7px 11px, var(--accent) 11px 18px);
  border-block-width: 1px;
  border-radius: 999px;
  margin-inline: max(20px, calc(50vw - 570px));
}
:root[data-universe="caraibes"] .titre-multi span { --r: 0deg; }

/* --- WESTEROS : la bannière de maison, la pierre et le sang --- */
:root[data-universe="westeros"] .dossier {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), 50% 100%, 0 calc(100% - 34px));
  box-shadow: none;
  border-width: 0;
  background: var(--ground-3);
}
:root[data-universe="westeros"] .cadre { filter: drop-shadow(0 18px 30px var(--ombre-dure)); }
:root[data-universe="westeros"] .dossier__bande {
  background: var(--ink); color: var(--ground);
  border-bottom: 0; letter-spacing: .3em; justify-content: center; gap: 18px;
  padding: 10px 13px;
}
:root[data-universe="westeros"] .dossier__toise { display: none; }
:root[data-universe="westeros"] .dossier__corps {
  background-image:
    radial-gradient(80% 50% at 50% 94%, var(--glow), transparent 70%),
    repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px 58px);
}
:root[data-universe="westeros"] .dossier__figure { left: 50%; }
:root[data-universe="westeros"] .dossier__ombre { left: 50%; }
:root[data-universe="westeros"] .dossier__mot {
  left: 50%; bottom: 13%; transform: translateX(-50%); font-style: italic;
  letter-spacing: .04em; opacity: .26;
}
:root[data-universe="westeros"] .dossier__plaque {
  justify-content: center; gap: 16px;
  padding: 14px 20px 52px; border-top: 1px solid var(--line-2);
  background: var(--ground-3);
}
:root[data-universe="westeros"] .cadre .tampon { right: 50%; bottom: -30px; transform: translateX(50%) rotate(45deg); }
:root[data-universe="westeros"] .tampon svg { transform: rotate(-45deg); }
:root[data-universe="westeros"] .tampon { border-radius: 4px; }
@keyframes tamponne-losange {
  0%, 100% { transform: translateX(50%) rotate(45deg) scale(1); }
  16%      { transform: translateX(50%) rotate(45deg) scale(1.18); }
  40%      { transform: translateX(50%) rotate(45deg) scale(.97); }
  62%      { transform: translateX(50%) rotate(45deg) scale(1.07); }
}
:root[data-universe="westeros"] .tampon.est-vise { animation-name: tamponne-losange; }
:root[data-universe="westeros"] .eyebrow {
  background: transparent; color: var(--accent); padding: 0; transform: none;
  letter-spacing: .34em;
}
:root[data-universe="westeros"] .bande {
  height: 3px; background-image: none; background-color: var(--accent);
  border-block: 0;
  margin-inline: max(20px, calc(50vw - 570px));
}
:root[data-universe="westeros"] .titre-multi { font-size: clamp(50px, 8.4vw, 118px); }
:root[data-universe="westeros"] .titre-multi span { --r: 0deg; }
:root[data-universe="westeros"] .btn { box-shadow: none; }
:root[data-universe="westeros"] .btn:hover { box-shadow: var(--ombre-carte-forte); }

/* ---------- 7. Adaptations mobiles ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 0; }
  .hero__texte { display: contents; }
  .hero > .hero__texte > .pastille { order: 1; justify-self: start; }
  .hero__texte h1 { order: 2; }
  .hero__scene { order: 3; margin-block: 26px 6px; }
  .hero__baseline { order: 4; max-width: none; }
  .hero__actions { order: 5; }
  .hero .stats { order: 6; }
  .cadre { width: min(380px, 100%); margin-inline: auto; }
  :root[data-universe="escadron"] .dossier__corps { aspect-ratio: 1 / 1.3; }
}
@media (max-width: 860px) {
  body { font-size: 16.5px; }
  .stats { gap: 16px 22px; margin-top: 30px; }
  .stats dd { font-size: 26px; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 400px) {
  .wrap { padding-inline: 16px; }
  .cadre { width: 100%; }
  .cadre .tampon { width: 62px; height: 62px; right: -10px; bottom: -20px; }
  .cadre .tampon svg { width: 25px; height: 25px; }
}