/* ============================================================
   GTAdrenaline — feuille de style principale
   ============================================================
   Ce fichier etait recopie a l'identique dans le <style> de chaque
   page : 1755 lignes, trois fois. Avec le passage a quatre pages par
   langue, cela aurait fait douze copies a maintenir en parallele —
   et c'est precisement ce qui avait produit les divergences trouvees
   au moment de l'extraction : la regle du cadre dore manquait a la
   seule page francaise, et les pages anglaise et espagnole trainaient
   un vieux bloc en double.

   ORDRE DE CHARGEMENT, A NE PAS INTERVERTIR
   Cette feuille se charge APRES radar-widget.css, site-extras.css et
   bandeau.css, parce que le bloc <style> qu'elle remplace venait apres
   eux et les surchargeait. site-extras.css garde malgre tout le dernier
   mot la ou il emploie !important, ce qui est voulu.
   ============================================================ */

/* ==========================================================
   0. RESET & VARIABLES
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  font-size: 16px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

:root {
  /* Palette — "Coucher de soleil sur Leonida" */
  --midnight-deep : #060814;
  --midnight      : #0B0F2B;
  --panel         : #12163a;
  --panel-light   : #1b2050;
  --panel-border  : rgba(247, 236, 221, 0.10);
  --flamingo      : #FF3D7F;
  --flamingo-dim  : #b32a5a;
  --solar         : #FF8A3D;
  --aqua          : #23E6C0;
  --aqua-dim      : #14806f;
  --sand          : #F7ECDD;
  --muted         : #9A9DC4;
  /* MESURE, PAS IMPRESSION : cette teinte etait a #6669912b, soit 17 %
     d'opacite. Sur le fond du pied de page, ca donnait un rapport de
     contraste de 1,14:1 — du texte qu'on ne voit pas, pas du texte
     discret. Elle ne sert qu'a la ligne du bas, qui porte pourtant
     l'attribution a Rockstar Games : une attribution invisible n'est
     pas une attribution. A 80 % on est a 4,9:1, au-dessus du seuil,
     et la ligne reste nettement plus effacee que le reste du pied. */
  --muted-dim     : rgba(154, 157, 196, 0.8);

  /* Touche "luxe" — or champagne, utilisé avec parcimonie */
  --gold          : #D9B872;
  --gold-bright   : #F3DFA0;
  --gold-dim      : rgba(217,184,114,0.28);

  --gradient-sunset      : linear-gradient(135deg, var(--flamingo) 0%, var(--solar) 100%);
  --gradient-sunset-soft : linear-gradient(135deg, rgba(255,61,127,0.16) 0%, rgba(255,138,61,0.16) 100%);
  --gradient-gold        : linear-gradient(120deg, #a9863f 0%, var(--gold) 45%, var(--gold-bright) 55%, #a9863f 100%);
  --gradient-night       : linear-gradient(180deg, var(--midnight) 0%, var(--midnight-deep) 100%);

  --font-display : 'Unbounded', sans-serif;
  --font-neon    : 'Monoton', cursive;
  --font-body    : 'Manrope', sans-serif;
  --font-mono    : 'Space Mono', monospace;

  --container-w  : 1240px;
  --radius-s     : 10px;
  --radius-m     : 18px;
  --radius-l     : 28px;

  --shadow-glow-flamingo : 0 0 0 1px rgba(255,61,127,0.25), 0 20px 60px -20px rgba(255,61,127,0.45);
  --shadow-glow-aqua     : 0 0 0 1px rgba(35,230,192,0.25), 0 20px 60px -20px rgba(35,230,192,0.4);
  --shadow-card          : 0 20px 50px -25px rgba(0,0,0,0.6);
}

body {
  background: var(--midnight);
  color: var(--sand);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  position: relative;
}

/* Grain / scanlines superposés à toute la page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.030) 0px,
    rgba(255,255,255,0.030) 1px,
    transparent 1px,
    transparent 3px
  );
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: var(--flamingo); color: var(--midnight-deep); }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--midnight-deep); }
::-webkit-scrollbar-thumb { background: var(--panel-light); border-radius: 10px; border: 2px solid var(--midnight-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--flamingo-dim); }

:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--aqua);
  color: var(--midnight-deep);
  padding: 0.75em 1.25em;
  z-index: 10000;
  font-family: var(--font-mono);
  font-weight: 700;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ==========================================================
   1. UTILITAIRES DE MISE EN PAGE
   ========================================================== */
.container {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

section { position: relative; }

.section-pad {
  padding-block: clamp(4.5rem, 9vw, 8rem);
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aqua);
  margin-bottom: 1.1em;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--gradient-sunset);
  display: inline-block;
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--gold::before { background: var(--gradient-gold); }

/* Filet fin doré — respiration "luxe" entre deux blocs */
.divider-gold {
  height: 1px;
  border: none;
  background: linear-gradient(90deg, transparent, var(--gold-dim) 30%, var(--gold-dim) 70%, transparent);
  margin-block: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--sand);
}

.section-head h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 800;
}

.section-head p {
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 60ch;
}

.text-gradient {
  background: var(--gradient-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mono-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.95em 1.7em;
  border-radius: 100px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color .25s ease;
  white-space: nowrap;
}
.btn--primary {
  position: relative;
  overflow: hidden;
  background: var(--gradient-sunset);
  color: var(--midnight-deep);
  box-shadow: var(--shadow-glow-flamingo);
}
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 25px 50px -15px rgba(255,61,127,0.55); }
/* Effet de brillance "premium" au survol */
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 35%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.65), transparent);
  transform: skewX(-18deg);
  transition: left 0.65s ease;
}
.btn--primary:hover::after { left: 130%; }

.btn--ghost {
  border: 1.5px solid var(--panel-border);
  color: var(--sand);
  background: rgba(247,236,221,0.03);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--aqua); color: var(--aqua); transform: translateY(-3px); }

.btn--gold {
  border: 1.5px solid var(--gold-dim);
  color: var(--gold-bright);
  background: rgba(217,184,114,0.06);
}
.btn--gold:hover { border-color: var(--gold); background: rgba(217,184,114,0.14); transform: translateY(-3px); }

/* Coins de viseur retires a la demande : bracket-frame ne dessine plus rien */
.bracket-frame { position: relative; }
.bracket-frame::before,
.bracket-frame::after { content: none; }

/* Halo au repos + halo qui change de couleur au survol, sur toutes les cartes */
.card {
  box-shadow: var(--shadow-card), 0 0 0 1px rgba(35,230,192,0.10), 0 0 26px -8px rgba(35,230,192,0.25);
  transition: transform 0.15s ease-out, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card:hover {
  box-shadow: var(--shadow-glow-flamingo);
  border-color: rgba(255,61,127,0.4);
  transform: translateY(-4px);
}

/* Variante « VIP » — reservee aux elements les plus premium (Lucia/Jason,
   Editions, video a la une). Elle manquait a la seule page francaise :
   le cadre de la video a la une y ressortait en sable au lieu d'or. */
.bracket-frame--gold::before,
.bracket-frame--gold::after {
  border-color: var(--gold-dim);
  opacity: 0.85;
}
.bracket-frame--gold:hover::before,
.bracket-frame--gold:hover::after {
  border-color: var(--gold-bright);
  opacity: 1;
}

.badge-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--midnight-deep);
  background: var(--gradient-gold);
  padding: 0.4em 0.85em;
  border-radius: 100px;
  font-weight: 700;
}

/* Cartes génériques */
.card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-light) 100%);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease-out;
  will-change: transform;
}
/* Filet doré en tête de carte — réservé aux emplacements les plus premium */
.card--gold-edge { position: relative; overflow: hidden; }
.card--gold-edge::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gradient-gold);
}

/* Animation de révélation au scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================
   2. NAVIGATION
   ========================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  padding-block: 1.35rem;
  transition: padding 0.35s ease, background 0.35s ease, box-shadow .35s ease;
}
.nav.is-scrolled {
  padding-block: 0.85rem;
  background: rgba(6,8,20,0.78);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--panel-border), 0 20px 40px -30px rgba(0,0,0,0.8);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.nav__brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 0.55em;
}
.nav__logo {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.nav__brand span.brand-accent {
  font-family: var(--font-neon);
  font-weight: 400;
  font-size: 1.15em;
  background: var(--gradient-sunset);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.6vw, 1.7rem);
}
.nav__links a {
  font-size: clamp(0.8rem, 1vw, 0.88rem);
  font-weight: 600;
  color: var(--muted);
  position: relative;
  padding-block: 0.3em;
  display: inline-block;
  transition: color 0.25s ease, transform 0.25s ease, text-shadow 0.25s ease;
}
.nav__links a:hover {
  transform: scale(1.08);
  text-shadow: 0 0 12px rgba(35,230,192,0.5);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--gradient-sunset);
  transition: right 0.3s ease;
}
.nav__links a:hover,
.nav__links a.is-active { color: var(--sand); }
.nav__links a:hover::after,
.nav__links a.is-active::after { right: 0; }
.nav__links a.nav__lang {
  border: 1px solid var(--panel-border);
  border-radius: 100px;
  padding: 0.3em 0.8em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.nav__links a.nav__lang::after { display: none; }
.nav__links a.nav__lang:hover { border-color: var(--aqua); }

.nav__toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.nav__toggle span { width: 18px; height: 2px; background: var(--sand); transition: transform .3s ease, opacity .3s ease; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__search-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  color: var(--sand);
  transition: border-color .25s ease, color .25s ease;
}
.nav__search-btn svg { width: 17px; height: 17px; }
.nav__search-btn:hover,
.nav__search-btn[aria-expanded="true"] { border-color: var(--aqua); color: var(--aqua); }

.search-panel {
  max-height: 0;
  overflow: hidden;
  background: rgba(6,8,20,0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: max-height 0.35s ease;
}
.search-panel.is-open { max-height: 420px; border-bottom-color: var(--panel-border); }
.search-panel__box {
  display: flex; align-items: center; gap: 0.7rem;
  padding-block: 1.2rem;
  color: var(--muted);
}
.search-panel__box svg { width: 18px; height: 18px; flex: none; }
.search-panel__box input {
  flex: 1;
  background: none; border: none;
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--sand);
}
.search-panel__box input::placeholder { color: var(--muted); }
.search-panel__box input:focus { outline: none; }
.search-panel__box button {
  color: var(--muted);
  width: 30px; height: 30px;
  border-radius: 50%;
  flex: none;
}
.search-panel__box button:hover { color: var(--flamingo); }
.search-panel__results { padding-bottom: 1.2rem; display: flex; flex-direction: column; gap: 0.3rem; max-height: 320px; overflow-y: auto; }
.search-result {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-s);
  color: var(--sand);
  transition: background .2s ease;
}
.search-result:hover, .search-result:focus-visible { background: rgba(247,236,221,0.06); }
.search-result .cat { font-family: var(--font-mono); font-size: 0.68rem; color: var(--aqua); text-transform: uppercase; letter-spacing: 0.05em; }
.search-panel__empty { padding: 0.75rem 1rem; color: var(--muted); font-size: 0.9rem; }

@media (max-width: 1080px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: fixed;
    inset: 0 0 0 30%;
    top: 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.7rem;
    padding: 2rem clamp(1.5rem, 6vw, 3rem);
    background: rgba(8,10,26,0.98);
    backdrop-filter: blur(10px);
    border-left: 1px solid var(--panel-border);
    /* Ferme, ce panneau restait dans la page : il depassait a droite et
       faisait defiler toute la page de 82 px lateralement sur telephone.
       Ses liens restaient aussi atteignables au clavier alors qu'on ne
       les voyait pas. visibility regle les deux d'un coup ; le delai de
       0.4s laisse l'animation de fermeture se jouer avant de le retirer. */
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(.2,.7,.2,1), visibility 0s linear 0.4s;
  }
  .nav__links.is-open {
    visibility: visible;
    transform: translateX(0);
    transition: transform 0.4s cubic-bezier(.2,.7,.2,1), visibility 0s;
  }
  .nav__links a { font-size: 1.2rem; }
}

/* ==========================================================
   3. HERO
   ========================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 7rem;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(6,8,20,0.52) 0%, rgba(6,8,20,0.24) 58%, rgba(6,8,20,0) 100%),
    linear-gradient(180deg, rgba(6,8,20,0.32) 0%, rgba(6,8,20,0.55) 55%, var(--midnight) 100%),
    url('hero-bg.jpg');
  background-size: cover;
  background-position: center 35%;
}
/* Variante telephone du fond du premier ecran : 1000 px au lieu de
   1920, 132 Ko au lieu de 485. Le degrade est repete a l'identique,
   sinon il disparaitrait en meme temps que l'image qu'il recouvre. */
@media (max-width: 900px) {
  .hero {
    background:
      linear-gradient(90deg, rgba(6,8,20,0.52) 0%, rgba(6,8,20,0.24) 58%, rgba(6,8,20,0) 100%),
      linear-gradient(180deg, rgba(6,8,20,0.32) 0%, rgba(6,8,20,0.55) 55%, var(--midnight) 100%),
      url('hero-bg-mobile.jpg');
    background-size: cover;
    background-position: center 35%;
  }
}

.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  animation: drift 24s ease-in-out infinite alternate;
  z-index: 0;
}
.hero__orb--1 { width: 480px; height: 480px; background: var(--flamingo); top: -140px; right: -80px; }
.hero__orb--2 { width: 420px; height: 420px; background: var(--solar); bottom: -160px; left: -100px; animation-duration: 30s; animation-delay: -6s; }
.hero__orb--3 { width: 320px; height: 320px; background: var(--aqua); top: 40%; left: 55%; opacity: 0.28; animation-duration: 20s; }
@keyframes drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-40px, 30px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__orb { animation: none; }
}

.channel-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 1.3rem 0.6rem 0.6rem;
  background: rgba(247,236,221,0.05);
  border: 1px solid var(--panel-border);
  border-radius: 100px;
  backdrop-filter: blur(8px);
  margin-bottom: 2.2rem;
  max-width: 100%;
  position: relative;
  z-index: 2;
}
.channel-bar__logo {
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 2px solid var(--panel-border);
  flex: none;
}
.channel-bar__info { display: flex; flex-direction: column; line-height: 1.3; margin-right: 0.3rem; }
.channel-bar__name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--sand); }
.channel-bar__tagline { font-size: 0.78rem; color: var(--muted); }
.channel-bar__cta { padding: 0.6em 1.3em; font-size: 0.82rem; white-space: nowrap; margin-left: 0.2rem; }
@media (max-width: 640px) {
  .channel-bar { flex-wrap: wrap; border-radius: 22px; row-gap: 0.7rem; }
  .channel-bar__cta { margin-left: auto; }
}
@media (max-width: 380px) {
  .channel-bar__tagline { display: none; }
}

.hero__stamp {
  position: absolute;
  top: 6.5rem; right: clamp(1rem,4vw,3rem);
  border: 2px dashed var(--gold-dim);
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.6em 0.9em;
  border-radius: 6px;
  transform: rotate(8deg);
  opacity: 0.75;
  z-index: 3;
}
.hud-clock {
  position: absolute;
  top: 9.6rem; right: clamp(1rem,4vw,3rem);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.6em;
  background: rgba(6,8,20,0.55);
  border: 1px solid var(--panel-border);
  border-radius: 100px;
  padding: 0.5em 1em 0.5em 0.7em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--sand);
}
.hud-clock__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--aqua);
  box-shadow: 0 0 8px var(--aqua);
  animation: hudPulse 2s ease-in-out infinite;
}
@keyframes hudPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.hud-clock__label { color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.62rem; }
.hud-clock__time { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .hud-clock { display: none; } }

.hero__inner {
  position: relative;
  z-index: 2;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 8vw, 6.4rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: 1.4rem;
}
.hero__title .line2 {
  font-family: var(--font-neon);
  font-weight: 400;
  font-size: 1.05em;
  /* La couleur est portee lettre par lettre dans site-extras.css :
     un degrade decoupe dans le texte empeche de les animer une a une. */
  display: block;
  line-height: 1.1;
}

.hero__subtitle {
  max-width: 620px;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  /* Pas var(--muted) : mesure au canvas, l'accroche tombait a 1,32:1
     sur les pixels les plus clairs de la photo. Meme le blanc pur n'y
     suffisait pas — d'ou le voile lateral ajoute au hero ci-dessus.
     Avec lui, ce blanc casse atteint 5:1. */
  color: #EDEFFA;
  text-shadow: 0 1px 10px rgba(0,0,0,0.6);
  margin-bottom: 2.4rem;
}

.hero__trustbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em;
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--panel-border);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--muted);
}
.hero__trustbar .sep { color: var(--gold-dim); }
@media (max-width: 560px) { .hero__trustbar { font-size: 0.72rem; } }

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
}

.hero__panels {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  gap: 1.1rem;
  align-items: stretch;
}

.countdown {
  padding: 1.6rem clamp(1.2rem,2.5vw,2rem);
  background: linear-gradient(160deg, rgba(6,8,20,0.07), rgba(18,22,58,0.03));
}
.countdown__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aqua);
  margin-bottom: 1rem;
  display: block;
  text-shadow: 0 1px 8px rgba(0,0,0,0.85);
}
.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}
.countdown__unit { text-align: center; }
.countdown__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-variant-numeric: tabular-nums;
  color: var(--sand);
  text-shadow: 0 2px 14px rgba(0,0,0,0.85), 0 1px 4px rgba(0,0,0,0.9);
}
.countdown__tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0,0,0,0.85);
  /* 2,1:1 avec var(--muted) : illisible sur les zones claires. */
  color: #C9CCE4;
  margin-top: 0.3rem;
}
.countdown__sub {
  margin-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  border-top: 1px solid var(--panel-border);
  padding-top: 0.9rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.85);
}

.alert-bar {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  justify-content: center;
  padding: 1.6rem clamp(1.2rem,2.5vw,2rem);
  border-color: rgba(255,61,127,0.35);
  background: linear-gradient(160deg, rgba(255,61,127,0.12), rgba(255,138,61,0.06));
}
.alert-bar__top {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flamingo);
}
.pulse-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--flamingo);
  box-shadow: 0 0 0 0 rgba(255,61,127,0.6);
  animation: pulse 1.8s ease-out infinite;
  flex: none;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,61,127,0.55); }
  70% { box-shadow: 0 0 0 10px rgba(255,61,127,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,61,127,0); }
}
.alert-bar p { font-size: 0.92rem; color: var(--sand); }
.alert-bar p strong { color: var(--solar); }
.alert-bar__mini-countdown {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--aqua);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .hero__panels { grid-template-columns: 1fr; }
}

.hero__skyline {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 1;
  opacity: 0.9;
  pointer-events: none;
}

/* Ticker / marquee */
.marquee {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  border-top: 1px solid var(--panel-border);
  background: rgba(6,8,20,0.42);
  padding-block: 0.9rem;
  overflow: hidden;
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  animation: marquee 32s linear infinite;
  will-change: transform;
}
.marquee__track span {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-inline: 1.2rem;
}
.marquee__track span.hi { color: var(--aqua); }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ==========================================================
   4. UNIVERS
   ========================================================== */
.univers { background: var(--midnight); }
.univers__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* une seule colonne : le bandeau carte est sorti d.ici */
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.univers__text p { color: var(--muted); margin-bottom: 1.1rem; font-size: 1.02rem; }
.univers__text p strong { color: var(--sand); font-weight: 700; }



@media (max-width: 860px) {
  .univers__grid { grid-template-columns: 1fr; }
}


/* ==========================================================
   5. PERSONNAGES
   ========================================================== */
.personnages { background: var(--midnight-deep); }

.protagonists {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
  margin-bottom: 2.5rem;
}
.protagonist-card {
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.classified-photo {
  aspect-ratio: 4/5;
  border-radius: var(--radius-s);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--panel-light), var(--midnight-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.classified-photo svg { width: 34%; opacity: 0.35; }
.classified-photo__label {
  position: absolute;
  bottom: 0.8rem; left: 0.8rem; right: 0.8rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(6,8,20,0.65);
  border: 1px solid var(--panel-border);
  padding: 0.4em;
  border-radius: 5px;
}
.protagonist-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.protagonist-card__head h3 {
  font-size: 1.5rem;
  font-weight: 800;
}
.protagonist-card .dossier-no {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--aqua);
}
.tag-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-pill {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--panel-border);
  padding: 0.35em 0.7em;
  border-radius: 100px;
}
.protagonist-card p.bio { color: var(--muted); font-size: 0.95rem; }

.cast-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.cast-card {
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.cast-card__icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--gradient-sunset-soft);
  border: 1px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center;
}
.cast-card__icon svg { width: 18px; height: 18px; opacity: 0.85; }
.cast-card h3 { font-size: 0.98rem; font-weight: 700; }
.cast-card p { font-size: 0.84rem; color: var(--muted); }

@media (max-width: 900px) {
  .protagonists { grid-template-columns: 1fr; }
  .cast-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================
   6. CARTE / REGIONS
   ========================================================== */
.regions { background: var(--midnight); }
.region-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
}
.region-card {
  padding: 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: transform .3s ease, border-color .3s ease;
}
.region-card:hover { border-color: rgba(35,230,192,0.35); }
.region-card__icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--panel-light);
  display: flex; align-items: center; justify-content: center;
}
.region-card__icon svg { width: 24px; height: 24px; stroke: var(--aqua); }
.region-card .region-no { font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted); }
.region-card h3 { font-size: 1.15rem; font-weight: 800; }
.region-card .tagline { font-family: var(--font-mono); font-size: 0.72rem; color: var(--solar); text-transform: uppercase; letter-spacing: 0.04em; }
.region-card p.desc { font-size: 0.88rem; color: var(--muted); flex-grow: 1; }
.region-card .inspiration {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--muted);
  border-top: 1px solid var(--panel-border);
  padding-top: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.region-card .inspiration b { color: var(--sand); font-weight: 700; }

.regions__note {
  margin-top: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 980px) { .region-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .region-grid { grid-template-columns: 1fr; } }

/* ==========================================================
   6bis. VÉHICULES
   ========================================================== */
.vehicles { background: var(--midnight-deep); }
.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.1rem;
}
.vehicle-card {
  padding: 1.5rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  position: relative;
}
.vehicle-card .badge-gold { position: absolute; top: 1rem; right: 1rem; }
.vehicle-card__icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--panel-light);
  display: flex; align-items: center; justify-content: center;
}
.vehicle-card__icon svg { width: 22px; height: 22px; }
.vehicle-card h3 { font-size: 1rem; font-weight: 800; }
.vehicle-card p { font-size: 0.85rem; color: var(--muted); }

@media (max-width: 1100px) { .vehicle-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .vehicle-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .vehicle-grid { grid-template-columns: 1fr; } }

/* ==========================================================
   6ter. ARMES
   ========================================================== */
.weapons { background: var(--midnight); }
.weapon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.weapon-card { padding: 1.5rem 1.3rem; display: flex; flex-direction: column; gap: 0.6rem; }
.weapon-card__icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--panel-light);
  display: flex; align-items: center; justify-content: center;
}
.weapon-card__icon svg { width: 22px; height: 22px; }
.weapon-card h3 { font-size: 0.98rem; font-weight: 800; }
.weapon-card p { font-size: 0.85rem; color: var(--muted); }
@media (max-width: 1100px) { .weapon-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .weapon-grid { grid-template-columns: 1fr; } }

/* ==========================================================
   6quater. FAUNE
   ========================================================== */
.wildlife { background: var(--midnight-deep); }
.wildlife-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.wildlife-card { position: relative; padding: 1.6rem 1.3rem; display: flex; flex-direction: column; gap: 0.7rem; }
.wildlife-card h3 { font-size: 1rem; font-weight: 800; }
.wildlife-card p { font-size: 0.85rem; color: var(--muted); }
@media (max-width: 1100px) { .wildlife-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .wildlife-grid { grid-template-columns: 1fr; } }

/* ==========================================================
   6quinquies. COMMERCES
   ========================================================== */
.shops { background: var(--midnight); }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.shop-card { position: relative; padding: 1.7rem 1.4rem; display: flex; flex-direction: column; gap: 0.8rem; }
.shop-card h3 { font-size: 1.1rem; font-weight: 800; }
.shop-card p { font-size: 0.88rem; color: var(--muted); }
@media (max-width: 860px) { .shop-grid { grid-template-columns: 1fr; } }

/* ==========================================================
   7. FONCTIONNALITÉS
   ========================================================== */
.features { background: var(--midnight-deep); }
.features__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.feature-col {
  padding: 1.8rem;
}
.feature-col__head {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: 1.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--panel-border);
}
.feature-col__head .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.feature-col--confirmed .dot { background: var(--aqua); box-shadow: 0 0 12px var(--aqua); }
.feature-col--rumor .dot { background: var(--solar); box-shadow: 0 0 12px var(--solar); }
.feature-col__head h3 { font-size: 1.1rem; font-weight: 800; }
/* Ce <li> etait un conteneur flex. Or il contient jusqu'a CINQ morceaux :
   l'icone, deux <strong>, et le texte entre eux. Flex les alignait tous
   sur une seule ligne, sans retour a la ligne possible, et cette ligne ne
   pouvait pas descendre sous la somme de leurs largeurs minimales, soit
   377 px. Sur un telephone de 375 px, c'est ce qui faisait defiler toute
   la page de 82 px lateralement.
   Un retrait pendu donne exactement le meme rendu et laisse le texte
   couler normalement. */
.feature-list li {
  display: block;
  font-size: 0.92rem;
  color: var(--muted);
  padding-block: 0.65rem;
  padding-left: 1.5em;
  text-indent: -1.5em;
  border-bottom: 1px dashed var(--panel-border);
}
.feature-list li:last-child { border-bottom: none; }
.feature-list li .ico { display: inline-block; width: 1.5em; text-indent: 0; }
.feature-col--confirmed .feature-list li .ico { color: var(--aqua); }
.feature-col--rumor .feature-list li .ico { color: var(--solar); }
.feature-col p.disclaimer {
  margin-top: 1.2rem;
  font-size: 0.78rem;
  color: var(--muted);
  background: rgba(255,138,61,0.08);
  border: 1px solid rgba(255,138,61,0.25);
  padding: 0.9em 1em;
  border-radius: var(--radius-s);
}
@media (max-width: 860px) { .features__grid { grid-template-columns: 1fr; } }

/* ==========================================================
   7ter. COMPARATIF GTA V / GTA VI
   ========================================================== */
.comparison { background: var(--midnight-deep); }
.compare-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-m);
}
.compare-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.compare-table th, .compare-table td {
  text-align: left;
  padding: 1rem 1.3rem;
  border-bottom: 1px solid var(--panel-border);
  font-size: 0.9rem;
}
.compare-table thead th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--sand);
  background: var(--panel);
}
.compare-table tbody td:first-child { font-weight: 700; color: var(--sand); white-space: nowrap; }
.compare-table tbody td { color: var(--muted); }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:hover { background: rgba(247,236,221,0.03); }

/* ==========================================================
   7bis. ÉDITIONS
   ========================================================== */
.editions { background: var(--midnight-deep); }
.edition-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 820px;
}
.edition-card {
  position: relative;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.edition-card--ultimate { background: linear-gradient(180deg, var(--panel-light) 0%, var(--panel) 100%); }
.edition-card .badge-gold { position: absolute; top: -12px; left: 2rem; }
.edition-card__head { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--panel-border); }
.edition-card__head h3 { font-size: 1.3rem; font-weight: 800; }
.edition-card__price { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--sand); }
.edition-list { display: flex; flex-direction: column; gap: 0.7rem; flex-grow: 1; }
.edition-list li {
  font-size: 0.92rem;
  color: var(--muted);
  padding-left: 1.3rem;
  position: relative;
}
.edition-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: var(--aqua);
  font-size: 0.8em;
}
.edition-card--ultimate .edition-list li::before { color: var(--gold); }

@media (max-width: 700px) { .edition-grid { grid-template-columns: 1fr; max-width: 460px; } }

/* ==========================================================
   7ter. SÉCURITÉ
   ========================================================== */
.security { background: var(--midnight); }
.security-banner {
  position: relative;
  padding: 1.6rem 1.8rem;
  margin-bottom: 2rem;
  max-width: 900px;
}
.security-banner .badge-gold { position: absolute; top: -12px; left: 1.8rem; }
.security-banner p { font-size: 0.98rem; color: var(--sand); }
.security-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}
.security-card { padding: 1.5rem 1.3rem; display: flex; flex-direction: column; gap: 0.8rem; }
.security-card__icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(255,61,127,0.1);
  display: flex; align-items: center; justify-content: center;
}
.security-card__icon svg { width: 22px; height: 22px; }
.security-card h3 { font-size: 0.98rem; font-weight: 800; }
.security-card p { font-size: 0.84rem; color: var(--muted); }

@media (max-width: 1100px) { .security-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .security-grid { grid-template-columns: 1fr; } }

/* ==========================================================
   8. MISSIONS
   ========================================================== */
.missions { background: var(--midnight-deep); }
.missions__info {
  padding: 1.3rem 1.6rem;
  border-color: rgba(35,230,192,0.3);
  background: var(--gradient-sunset-soft);
  font-size: 0.94rem;
  margin-bottom: 2.2rem;
}
.missions__info strong { color: var(--aqua); }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
}
.filter-btn {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.55em 1.1em;
  border-radius: 100px;
  border: 1px solid var(--panel-border);
  color: var(--muted);
  transition: all 0.25s ease;
}
.filter-btn:hover { color: var(--sand); border-color: var(--muted); }
.filter-btn.is-active {
  background: var(--gradient-sunset);
  color: var(--midnight-deep);
  border-color: transparent;
  font-weight: 700;
}

.mission-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
}
.mission-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: opacity .3s ease, transform .3s ease;
}
.mission-card.is-hidden { display: none; }
.mission-card__thumb {
  aspect-ratio: 16/9;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 16px),
    linear-gradient(150deg, var(--panel-light), var(--midnight-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mission-card__thumb .play-ico {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: all .3s ease;
}
.mission-card__thumb .play-ico svg { width: 16px; height: 16px; margin-left: 3px; }
.mission-card:hover .play-ico { border-color: var(--flamingo); background: var(--flamingo); }
.mission-card__lock {
  position: absolute;
  top: 0.7rem; right: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(6,8,20,0.75);
  border: 1px solid var(--panel-border);
  color: var(--muted);
  padding: 0.35em 0.6em;
  border-radius: 100px;
}
.mission-card__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; flex-grow: 1; }
.mission-card__cat {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--solar);
}
.mission-card h3 { font-size: 1rem; font-weight: 700; }
.mission-card__meta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  padding-top: 0.6rem;
  border-top: 1px dashed var(--panel-border);
}

.missions__footnote {
  margin-top: 1.8rem;
  font-size: 0.78rem;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 980px) { .mission-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .mission-grid { grid-template-columns: 1fr; } }

/* ==========================================================
   9. ACTUALITÉS / TIMELINE
   ========================================================== */
.timeline-section { background: var(--midnight); }
.timeline {
  position: relative;
  padding-left: clamp(1.6rem, 4vw, 2.6rem);
  border-left: 2px solid var(--panel-border);
}
.timeline-item {
  position: relative;
  padding-bottom: clamp(2rem, 4vw, 2.6rem);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(1.6rem, 4vw, 2.6rem) - 6px);
  top: 0.3rem;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--midnight-deep);
  border: 2px solid var(--muted);
}
.timeline-item.is-live::before {
  border-color: var(--flamingo);
  background: var(--flamingo);
  box-shadow: 0 0 0 5px rgba(255,61,127,0.2);
}
.timeline-item.is-final::before { border-color: var(--aqua); background: var(--aqua); box-shadow: 0 0 0 5px rgba(35,230,192,0.2); }
.timeline-item__date {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--aqua);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.timeline-item__date .badge-live {
  background: var(--flamingo);
  color: var(--midnight-deep);
  font-weight: 700;
  padding: 0.15em 0.55em;
  border-radius: 100px;
  font-size: 0.62rem;
}
.timeline-item h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.3rem; }
.timeline-item p { color: var(--muted); font-size: 0.92rem; max-width: 62ch; }

.trailer-links { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.trailer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.trailer-card {
  display: block;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.trailer-card:hover { border-color: var(--aqua); }
.trailer-card__thumb {
  position: relative;
  aspect-ratio: 16/9;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 16px),
    linear-gradient(150deg, var(--panel-light), var(--midnight-deep));
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.trailer-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.trailer-card:hover .trailer-card__img { transform: scale(1.06); }
.trailer-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,8,20,0.15) 0%, rgba(6,8,20,0.55) 100%);
}
.trailer-card__thumb .play-ico {
  position: relative; z-index: 1;
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(247,236,221,0.1);
  border: 1px solid rgba(247,236,221,0.3);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s ease;
}
.trailer-card__thumb .play-ico svg { width: 16px; height: 16px; margin-left: 2px; color: var(--sand); }
.trailer-card:hover .play-ico { background: var(--flamingo); border-color: var(--flamingo); }
.trailer-card__body { padding: 1rem 1.2rem 1.2rem; }
.trailer-card__body h3 { font-size: 0.94rem; font-weight: 700; margin-top: 0.3rem; }
@media (max-width: 860px) { .trailer-grid { grid-template-columns: 1fr; } }

/* ==========================================================
   10. VIDEOS
   ========================================================== */
.videos { background: var(--midnight-deep); }

.featured-video {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  overflow: hidden;
  margin-bottom: 2rem;
}
.featured-video__thumb {
  aspect-ratio: 16/9;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 16px),
    linear-gradient(150deg, var(--panel-light), var(--midnight-deep));
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.featured-video__badge { position: absolute; top: 1rem; left: 1rem; }
.featured-video__thumb .play-ico {
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(247,236,221,0.08);
  border: 1px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s ease;
}
.featured-video__thumb .play-ico svg { width: 20px; height: 20px; margin-left: 3px; color: var(--sand); }
.featured-video:hover .play-ico { background: var(--gold); border-color: var(--gold); }
.featured-video:hover .play-ico svg { color: var(--midnight-deep); }
.featured-video__body { padding: clamp(1.4rem, 3vw, 2.2rem); display: flex; flex-direction: column; justify-content: center; gap: 0.8rem; }
.featured-video__body h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 800; }
.featured-video__body p { font-size: 0.9rem; color: var(--muted); }
@media (max-width: 760px) {
  .featured-video { grid-template-columns: 1fr; }
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  margin-bottom: 2.4rem;
}
.video-card { overflow: hidden; }
.video-card__thumb {
  aspect-ratio: 16/9;
  background: linear-gradient(150deg, var(--panel-light), var(--midnight-deep));
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.video-card__thumb .play-ico {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(247,236,221,0.08);
  border: 1px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center;
}
.video-card__thumb .play-ico svg { width: 15px; height: 15px; margin-left: 2px; color: var(--sand); }
.video-card__body { padding: 1.1rem 1.2rem; }
.video-card__body .placeholder-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.video-card__body h3 { font-size: 0.94rem; font-weight: 700; margin-top: 0.4rem; color: var(--muted); }
.videos__ctas { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

.tips-box {
  position: relative;
  margin-top: 2.5rem;
  padding: 1.8rem clamp(1.3rem, 3vw, 2.2rem);
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}
.tips-box .badge-gold { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); }
.tips-box h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 0.7rem; }
.tips-box p { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.4rem; }
.tips-box__ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }

@media (max-width: 980px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .video-grid { grid-template-columns: 1fr; } }

/* ==========================================================
   10bis. FAQ
   ========================================================== */
.faq { background: var(--midnight); }
.faq-list { display: flex; flex-direction: column; gap: 0.9rem; max-width: 820px; }
.faq-item {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-s);
  padding: 0.3rem 1.4rem;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding-block: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--sand);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--aqua);
  transition: transform 0.3s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--flamingo); }
.faq-item p {
  padding-bottom: 1.2rem;
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 68ch;
}
.faq-item p a { color: var(--aqua); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================
   11. FOOTER
   ========================================================== */
.site-footer {
  background: var(--midnight-deep);
  border-top: 1px solid var(--panel-border);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--panel-border);
}
.footer__brand .nav__brand { margin-bottom: 0.9rem; }
.footer__brand p { color: var(--muted); font-size: 0.9rem; max-width: 32ch; }
.footer__social { display: flex; gap: 0.7rem; margin-top: 1.3rem; }
.footer__social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center;
  transition: all .25s ease;
}
.footer__social a svg { width: 16px; height: 16px; }
.footer__social a:hover { border-color: var(--aqua); color: var(--aqua); transform: translateY(-3px); }
.footer__col h2 {
  font-family: var(--font-mono);
  /* Conservee explicitement : en h5 ces titres echappaient a la
     regle generique « h1, h2, h3, h4 » et gardaient la hauteur de
     ligne du corps. En h2 ils y tombent, et la colonne se tasserait
     de six pixels par titre. */
  line-height: 1.65;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.footer__col ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__col a { font-size: 0.9rem; color: var(--sand); transition: color .2s ease; }
.footer__col a:hover { color: var(--aqua); }
.footer__legal { padding-top: 1.8rem; font-size: 0.76rem; color: var(--muted); line-height: 1.7; }
.footer__legal p + p { margin-top: 0.7rem; }
.footer__bottom {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted-dim);
}

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   12. BACK TO TOP
   ========================================================== */
.to-top {
  position: fixed;
  /* A GAUCHE, ET PAS A DROITE : le radar GPS occupe le coin bas-droit
     en position fixe avec un z-index superieur. Le bouton s'affichait
     dessous, visible mais inerte — un clic dessus ouvrait la carte au
     lieu de remonter la page. Les deux coins bas sont libres, autant
     en prendre un chacun. */
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  display: flex; align-items: center; justify-content: center;
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { border-color: var(--aqua); color: var(--aqua); }
.to-top svg { width: 18px; height: 18px; }

/* ==========================================================
   13. SCROLL PROGRESS BAR — Barre verticale qui se remplit au scroll
   ========================================================== */
.scroll-track {
  position: fixed; top: 0; left: 0; width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--flamingo), var(--solar), var(--aqua));
  opacity: 0.18; z-index: 999; pointer-events: none;
}
.scroll-fill {
  position: fixed; top: 0; left: 0; height: 4px; width: 0%;
  background: linear-gradient(90deg, var(--flamingo), var(--solar), var(--aqua));
  box-shadow: 0 0 12px rgba(255,61,127,0.7), 0 0 24px rgba(35,230,192,0.4);
  z-index: 1000; pointer-events: none;
  transition: width 0.08s ease;
}
/* Barre de defilement du navigateur, restylee aux couleurs retro du site */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--midnight-deep); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--flamingo), var(--aqua));
  border-radius: 6px;
  border: 2px solid var(--midnight-deep);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--solar), var(--aqua)); }
html { scrollbar-color: var(--flamingo) var(--midnight-deep); scrollbar-width: thin; }

/* ==========================================================
   14. HEADER GLOW — Halo lumineux sous le header
   ========================================================== */
.header-glow {
  position: fixed; top: 0; left: 0; right: 0; z-index: 499;
  height: 180px; pointer-events: none;
  background: radial-gradient(ellipse 50% 120% at 50% 0%,
    rgba(139,92,246,0.28) 0%, 
    rgba(255,61,127,0.14) 30%, 
    transparent 70%);
  mix-blend-mode: screen;
}

/* ==========================================================
   15. LANGUE SWITCHER — Amélioré avec dropdown
   ========================================================== */
.lang-switcher {
  position: relative;
  margin-left: auto;
  margin-right: 16px;
}
.lang-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--panel-border);
  color: var(--aqua);
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.2s, background 0.2s;
}
.lang-btn:hover {
  border-color: var(--aqua);
  background: rgba(35,230,192,0.08);
}
.lang-chevron {
  font-size: 0.65rem;
  transition: transform 0.2s;
}
.lang-switcher.open .lang-chevron {
  transform: rotate(180deg);
}
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  overflow: hidden;
  min-width: 170px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.18s ease;
  box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}
.lang-switcher.open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-menu a {
  display: block;
  padding: 11px 16px;
  text-decoration: none;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--panel-border);
  color: var(--sand);
  transition: all 0.2s;
}
.lang-menu a:last-child {
  border-bottom: none;
}
.lang-menu a:hover {
  background: rgba(255,61,127,0.1);
  color: var(--flamingo);
}

/* ==========================================================
   16. BOUSSOLE INTERACTIVE — Widget flottant en bas à droite
   ========================================================== */
/* Le radar GPS flottant est stylé dans radar-widget.css (fichier partagé). */

/* ==========================================================
   17. RESPONSIVE — Titres de section génériques mobile
   ========================================================== */
@media (max-width: 640px) {
  .hero { padding-top: 6.5rem; }
  .hero__stamp { display: none; }
  .lang-switcher { margin-right: 0; }
}