/* ============================================================
   GTAdrenaline — touches additionnelles
   ============================================================
   Feuille partagee par les 3 pages d'accueil (FR / EN / ES).
   Contient deux choses independantes :
     1. l'allumage du titre neon du hero
     2. l'encart "nouveautes depuis votre dernier passage"
   ============================================================ */


/* ============================================================
   1. AMORCAGE DU GAZ — l'allumage du titre neon
   ============================================================
   Quand on allume un vrai tube neon, le gaz s'ionise a une
   extremite et le halo REMONTE LE TUBE. Les lettres ne
   s'allument donc pas ensemble : elles s'allument en cascade,
   avec un bref eclat blanc au passage du front. Puis un unique
   reflet balaie le mot, comme un phare de voiture qui passe
   devant l'enseigne.

   Duree totale : 1,1 s, et le mot est deja lisible a 0,3 s.

   POURQUOI PAS UNE ENSEIGNE QUI TOMBE EN PANNE
   L'effet est seduisant, mais il masque le nom de la marque
   pendant 2 a 4 secondes a CHAQUE chargement — or c'est la
   seconde ou le visiteur decide s'il reste. Et une panne
   raconte le desordre (vieux, casse, abandonne) la ou une
   cascade raconte la precision. Le second registre correspond
   a ce que vise ce site.

   POURQUOI PAS UNE ANIMATION PERMANENTE
   Le titre est l'ancre visuelle de la page. S'il bouge sans
   arret, l'oeil ne se pose jamais et tout le reste doit crier
   plus fort pour exister.

   La couleur est portee LETTRE PAR LETTRE, echantillonnee sur
   le degrade rose -> orange du site : un degrade decoupe dans
   le texte (background-clip) rendrait les lettres inanimables
   individuellement. A l'oeil, le resultat est identique.
   ============================================================ */

.hero__title .line2 b {
  font-weight: inherit;
  display: inline-block;
  position: relative;
  text-shadow: 0 0 14px currentColor, 0 0 30px rgba(255, 61, 127, 0.5);
  animation: gazIgnite 0.62s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.hero__title .line2 b:nth-child(1) { color: #FF3D7F; animation-delay: 0.20s; }
.hero__title .line2 b:nth-child(2) { color: #FF4777; animation-delay: 0.26s; }
.hero__title .line2 b:nth-child(3) { color: #FF506E; animation-delay: 0.32s; }
.hero__title .line2 b:nth-child(4) { color: #FF5A66; animation-delay: 0.38s; }
.hero__title .line2 b:nth-child(5) { color: #FF645E; animation-delay: 0.44s; }
.hero__title .line2 b:nth-child(6) { color: #FF6D56; animation-delay: 0.50s; }
.hero__title .line2 b:nth-child(7) { color: #FF774E; animation-delay: 0.56s; }
.hero__title .line2 b:nth-child(8) { color: #FF8045; animation-delay: 0.62s; }
.hero__title .line2 b:nth-child(9) { color: #FF8A3D; animation-delay: 0.68s; }

@keyframes gazIgnite {
  0%   { opacity: 0.04; filter: brightness(0.4); text-shadow: none; }
  35%  { opacity: 1; filter: brightness(1.9);
         text-shadow: 0 0 10px #fff, 0 0 34px currentColor, 0 0 62px currentColor; }
  70%  { opacity: 1; filter: brightness(1.08);
         text-shadow: 0 0 16px currentColor, 0 0 34px rgba(255, 61, 127, 0.55); }
  100% { opacity: 1; filter: brightness(1);
         text-shadow: 0 0 14px currentColor, 0 0 30px rgba(255, 61, 127, 0.5); }
}

/* le reflet qui balaie, une seule fois, apres l'amorcage */
.hero__title .line2 { position: relative; }
.hero__title .line2::after {
  content: "";
  position: absolute;
  top: -18%;
  bottom: -18%;
  left: -40%;
  width: 26%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: skewX(-14deg);
  opacity: 0;
  animation: gazReflet 1.15s cubic-bezier(0.4, 0, 0.4, 1) 0.95s both;
}
@keyframes gazReflet {
  0%   { left: -40%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 118%; opacity: 0; }
}

/* frémissement discret au survol : l'enseigne reagit, sans s'agiter */
.hero__title:hover .line2 b {
  text-shadow: 0 0 20px currentColor, 0 0 44px rgba(255, 61, 127, 0.65);
  transition: text-shadow 0.45s ease;
}


/* ============================================================
   1 bis. LE PREMIER ECRAN
   ============================================================
   Reorganisation du hero pour que le compte a rebours passe
   AU-DESSUS de la ligne de flottaison.

   Mesure avant : sur 1440x900 il occupait 773 -> 999 px, donc
   tranche par la coupe ; sur 375x812 il demarrait a 880 px,
   soit 68 px SOUS le bas de l'ecran — invisible.

   Deux gains de place ont permis de le remonter :
     - la phrase d'accroche passe de 50 mots a 12
     - la barre d'abonnement YouTube descend sous les boutons
   L'abonnement reste sur le premier ecran, mais on montre la
   valeur avant de demander la conversion.
   ============================================================ */

/* la promesse editoriale, juste sous le titre */
.hero__promise {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1.5rem;
}
.hero__chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono, "Space Mono", monospace);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  border-radius: 100px;
  padding: 0.42em 0.9em;
  white-space: nowrap;
}
/* TROIS PUCES, TROIS NIVEAUX, dans l'ordre de certitude decroissante —
   les memes que la charte editoriale en bas de page, et les memes
   couleurs. Le premier ecran promettait deux niveaux pendant que la
   charte en annoncait trois : l'ecart etait exactement celui qu'on
   reprochait aux anciennes mentions legales, dire une chose et en
   faire une autre.

   La rumeur est passee du dore a l'orange pour laisser l'or a
   l'analyse : sur la charte, le filet descend du vert de la certitude
   a l'orange du doute, en passant par l'or. Les deux blocs racontent
   desormais la meme histoire de couleur. */
.hero__chip--ok {
  color: #23E6C0;
  border: 1px solid rgba(35, 230, 192, 0.45);
  background: rgba(35, 230, 192, 0.08);
}
.hero__chip--analyse {
  color: #E8C87E;
  border: 1px solid rgba(232, 200, 126, 0.45);
  background: rgba(232, 200, 126, 0.07);
}
.hero__chip--rumor {
  color: #FFA463;
  border: 1px solid rgba(255, 138, 61, 0.45);
  background: rgba(255, 138, 61, 0.07);
}

/* espacements resserres, dans le nouvel ordre */
.hero__subtitle { margin-bottom: 1rem !important; }
.hero__panels   { margin-bottom: 1.25rem; }
.hero__ctas     { margin-bottom: 1rem; }
.hero .channel-bar { margin-top: 0; margin-bottom: 1.2rem; }
.hero__trustbar { margin-top: 0; }

@media (max-width: 860px) {
  .hero__chip { font-size: 0.62rem; padding: 0.36em 0.75em; }
  .hero__promise { gap: 0.4rem; margin-bottom: 1.1rem; }
  .hero__ctas { margin-bottom: 1rem; }

  /* Sur mobile, les deux cartes de .hero__panels s'empilent : l'encart
     "C'est sorti" mesure environ 300 px et repoussait les boutons sous
     la ligne de flottaison. On sort les cartes de leur conteneur avec
     display:contents pour pouvoir les ordonner independamment, et on
     renvoie l'encart APRES les boutons. */
  .hero__inner { display: flex; flex-direction: column; }
  /* Le <style> interne de la page est charge APRES cette feuille et force
     display:grid sur .hero__panels ; il faut donc passer devant lui. */
  .hero .hero__inner .hero__panels { display: contents !important; }

  .hero__title    { order: 1; }
  .hero__subtitle { order: 2; }
  .hero__promise  { order: 3; }
  .hero__panels .countdown  { order: 4; margin-bottom: 1.2rem; }
  .hero__ctas     { order: 5; }
  /* La chaine YouTube passe avant l'encart "C'est sorti" : elle tombe juste
     sous la ligne de flottaison, donc au moindre scroll c'est elle qu'on voit. */
  .hero .channel-bar { order: 6; margin-bottom: 1.2rem; }
  .hero__panels .alert-bar { order: 7; margin-bottom: 1.2rem; }
  .hero__trustbar { order: 8; }
}


/* ============================================================
   1 ter. SECTION PLATEFORMES — "GTA 6 sur PC ?"
   ============================================================
   La question la plus posee par les joueurs PC, et celle ou le
   site peut le mieux se distinguer : personne ne repond
   honnetement, parce que la reponse honnete est "on ne sait pas".
   On separe donc visuellement le confirme (vert) du non annonce
   (or), et on donne le precedent chiffre plutot qu'une rumeur.
   ============================================================ */

.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  margin-bottom: 1.6rem;
}
.platform-card { padding: 1.5rem; }
.platform-card__state {
  display: inline-block;
  font-family: var(--font-mono, "Space Mono", monospace);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 0.3em 0.85em;
  margin-bottom: 0.85rem;
}
.platform-card--yes .platform-card__state {
  color: #23E6C0;
  border: 1px solid rgba(35, 230, 192, 0.5);
  background: rgba(35, 230, 192, 0.08);
}
.platform-card--no .platform-card__state {
  color: #E8C87E;
  border: 1px solid rgba(232, 200, 126, 0.5);
  background: rgba(232, 200, 126, 0.07);
}
.platform-card h3 { margin-bottom: 0.5rem; font-size: 1.05rem; }

.platform-precedent { padding: 1.6rem; }
.platform-precedent > p { margin: 0.8rem 0; }
.platform-table-wrap { overflow-x: auto; margin: 1rem 0; }
.platform-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  min-width: 460px;
}
.platform-table th,
.platform-table td {
  text-align: left;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--panel-border, rgba(247, 236, 221, 0.1));
}
.platform-table th {
  font-family: var(--font-mono, "Space Mono", monospace);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9A9DC4;
}
.platform-table td:last-child {
  font-family: var(--font-mono, "Space Mono", monospace);
  color: #E8C87E;
  white-space: nowrap;
}
.platform-table tr:last-child td { border-bottom: none; }

.platform-note {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #9A9DC4;
  border-left: 2px solid rgba(232, 200, 126, 0.5);
  padding-left: 0.9rem;
}
.platform-warning {
  margin-top: 1.4rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #F7ECDD;
  background: rgba(255, 61, 127, 0.08);
  border: 1px solid rgba(255, 61, 127, 0.35);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
}


/* ============================================================
   1 quater. SECTION CODES DE TRICHE
   ============================================================
   Vide jusqu'a la sortie du jeu, et elle le dit. Le contenu est
   genere par codes-render.js a partir de codes.js.
   ============================================================ */

/* --- les trois onglets : PlayStation, Xbox, PC --- */
/* Le panneau porte un fond opaque des qu'il contient des codes : sans
   lui, la liste se lisait a meme la photo de fond de la section, et
   l'effet gris des descriptions y devenait illisible. Le panneau vide,
   lui, a deja le sien. */
.codes-panneau:not([hidden]):has(.codes-liste) {
  background: linear-gradient(180deg, #131940, #0b0f2c);
  border: 1px solid var(--panel-border, rgba(247, 236, 221, 0.12));
  border-radius: 16px;
  padding: 1.4rem 1.6rem 0.6rem;
}
/* Repli pour les navigateurs sans :has() — le fond est alors porte par
   la liste elle-meme, ce qui marche aussi, en moins joli. */
@supports not selector(:has(*)) {
  .codes-liste {
    background: linear-gradient(180deg, #131940, #0b0f2c);
    border-radius: 14px;
    padding: 0.2rem 1.2rem;
  }
}
.codes-onglets {

  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
}
.codes-onglet { cursor: pointer; background: none; }

/* --- le contenu d'un onglet --- */
.codes-vide {
  padding: 1.5rem 1.6rem;
  margin: 0;
  line-height: 1.7;
  color: #C9CCE4;
  border-radius: 14px;
  background: linear-gradient(180deg, #131940, #0b0f2c);
  border: 1px solid var(--panel-border, rgba(247, 236, 221, 0.12));
}
.codes-warning {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #F7ECDD;
  background: rgba(232, 200, 126, 0.08);
  border: 1px solid rgba(232, 200, 126, 0.35);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.3rem;
}
.codes-cat {
  font-family: var(--font-mono, "Space Mono", monospace);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright, #F3DFA0);
  margin: 1.6rem 0 0.7rem;
}
.codes-liste { list-style: none; margin: 0; padding: 0; }

/* Trois colonnes sur ordinateur : le nom, ce que ca fait, la
   combinaison. Sur telephone la ligne s'empile — un tableau y aurait
   deborde, et c'est precisement ce qu'on quitte. */
.codes-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 0.4rem 1.2rem;
  align-items: baseline;
  padding: 0.75rem 0.2rem;
  border-bottom: 1px solid var(--panel-border, rgba(247, 236, 221, 0.1));
}
.codes-nom { font-weight: 700; color: var(--sand, #F7ECDD); }
.codes-effet { font-size: 0.85rem; line-height: 1.5; color: #9A9DC4; }
.codes-combo {
  font-family: var(--font-mono, "Space Mono", monospace);
  font-size: 0.84rem;
  color: #23E6C0;
  background: rgba(35, 230, 192, 0.08);
  border: 1px solid rgba(35, 230, 192, 0.25);
  border-radius: 8px;
  padding: 0.35em 0.7em;
  white-space: nowrap;
  justify-self: end;
}
@media (max-width: 720px) {
  .codes-ligne {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
  .codes-combo { justify-self: start; }
}



/* ============================================================
   1 quinquies. GALERIE D'IMAGES OFFICIELLES
   ============================================================
   Les images viennent des serveurs de Rockstar (voir medias.js).
   Elles pesent 1 a 2 Mo chacune, d'ou le chargement differe cote
   JavaScript. Le ratio fixe evite que la page saute pendant leur
   arrivee : la place est reservee avant meme qu'elles chargent.
   ============================================================ */

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.1rem;
}
.media-tile {
  margin: 0;
  border: 1px solid var(--panel-border, rgba(247, 236, 221, 0.1));
  border-radius: 14px;
  overflow: hidden;
  background: rgba(10, 13, 35, 0.6);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s ease;
}
.media-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 61, 127, 0.45);
}
.media-tile img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0a0d20;
}
.media-tile figcaption {
  padding: 0.8rem 1rem 0.95rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #9A9DC4;
}
.media-credit {
  margin-top: 1.3rem;
  font-family: var(--font-mono, "Space Mono", monospace);
  font-size: 0.68rem;
  line-height: 1.65;
  /* Mesure au canvas : 3,16:1 sur les zones claires de la photo de fond,
     pour un seuil a 4,5. La couleur etait doublement affaiblie — un gris
     deja pale, rendu translucide a 75 %, sur un fond que rien ne voile a
     cet endroit. On retire la transparence et on eclaircit : 5,1:1.
     C'est une ligne de credit, pas une note de bas de page qu'on a le
     droit de rendre illisible. */
  color: #C9CCE4;
}


@media (prefers-reduced-motion: reduce) {
  .media-tile { transition: none; }
  .media-tile:hover { transform: none; }
}


/* ============================================================
   1 sexies. MENU DEROULANT "CODES" — ouverture au survol
   ============================================================
   Les autres menus du site (Infos, langue) s'ouvrent au CLIC.
   Celui-ci s'ouvre aussi au SURVOL, comme demande — mais le clic
   reste actif, et c'est indispensable : sur un ecran tactile il
   n'existe pas de survol, et un menu qui ne s'ouvrirait qu'ainsi
   serait totalement inaccessible sur telephone.

   Le survol est en plus enferme dans @media (hover: hover) pour
   qu'il ne se declenche jamais sur tactile, ou un "faux survol"
   au premier appui ouvrirait le menu sans qu'on l'ait demande.

   :focus-within ouvre egalement le menu a la navigation clavier.
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
  .nav-drop:hover .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-drop:hover .lang-chevron { transform: rotate(180deg); }
}

.nav-drop:focus-within .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* la zone de survol descend jusqu'au menu : sans ce pont, le menu
   se referme des que la souris traverse l'espace qui l'en separe */
.nav-drop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
}

/* le menu s'aligne a gauche ici : ancre a droite, il deborderait
   de l'ecran puisque "Codes" est au milieu de la barre */
.nav-drop .lang-menu { right: auto; left: 0; min-width: 190px; }


/* ============================================================
   1 septies. BLOC "DEMENTIS"
   ============================================================
   Troisieme categorie, sous les colonnes confirme / rumeur.

   La distinction compte : une rumeur est en attente de verdict,
   un dementi a DEJA son verdict — c'est faux, et on sait pourquoi.
   Les melanger reviendrait a laisser croire qu'une information
   demontee garde une chance d'etre vraie.

   D'ou le rouge plutot que l'orange des rumeurs, et un bloc
   pleine largeur : chaque entree demande une explication, pas
   une ligne de liste.
   ============================================================ */

.debunk {
  margin-top: 1.5rem;
  padding: 1.8rem;
  border-color: rgba(255, 61, 127, 0.35);
}
.debunk__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
}
.debunk__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
  background: #FF3D7F;
  box-shadow: 0 0 12px #FF3D7F;
}
.debunk__head h3 { font-size: 1.1rem; font-weight: 800; }

.debunk-list { list-style: none; margin: 0; padding: 0; }
.debunk-list li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.9rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #9A9DC4;
  border-bottom: 1px dashed var(--panel-border, rgba(247, 236, 221, 0.1));
}
.debunk-list li:last-child { border-bottom: none; }
/* la croix dit le verdict avant meme qu'on lise */
.debunk-list li::before {
  content: "✕";
  position: absolute;
  left: 0;
  top: 0.85rem;
  color: #FF3D7F;
  font-weight: 700;
}
.debunk-list strong { color: #F7ECDD; }

.debunk__note {
  margin-top: 1.2rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: #F7ECDD;
  background: rgba(255, 61, 127, 0.08);
  border: 1px solid rgba(255, 61, 127, 0.3);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
}


/* ============================================================
   1 octies. PHOTOS DES PERSONNAGES ET DES REGIONS
   ============================================================
   Images officielles Rockstar redimensionnees pour le web :
   les originales font 3840x2160 et pesent jusqu'a 1,2 Mo piece,
   ce qui serait intenable a servir tel quel. Ici 1000x563,
   qualite 82, soit 70 a 130 Ko.

   Contrairement a la galerie (medias.js), ces images-la sont
   hebergees par le site : Rockstar ne les expose pas une par
   une, elles ne sont disponibles que dans son archive.

   Le ratio est fixe pour que la page ne saute pas pendant leur
   chargement — la place est reservee avant qu'elles arrivent.
   ============================================================ */

/* --- fiches des deux protagonistes --- */
.classified-photo--filled {
  position: relative;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 1.1rem;
  /* le cadre garde son format portrait 4/5, herite de .classified-photo */
}
/* L'image remplit tout le cadre. Les fichiers sont recadres en 4/5 depuis
   les originaux 4K, donc le remplissage ne coute aucune nettete : pas
   d'agrandissement, pas de bande vide. */
.classified-photo--filled img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 28%;   /* on privilegie le visage, pas le centre geometrique */
  background: #0a0d20;
}
/* le bandeau garde l'esprit "dossier" de la fiche */
.classified-photo--filled .classified-photo__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.5em 0.9em;
  font-family: var(--font-mono, "Space Mono", monospace);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E8C87E;
  background: linear-gradient(transparent, rgba(6, 8, 20, 0.92) 55%);
}

/* --- en-tete photo des cartes de region --- */
/* La carte a 1,7rem de marge interieure : la photo la deborde des deux
   cotes pour toucher les bords. Le max-width:none est indispensable —
   la feuille du site pose "img, svg { max-width: 100% }", qui plafonnait
   la photo a la largeur du contenu et laissait 57 px de vide a droite. */
/* Les fiches de commerce et de vehicule prennent exactement le meme
   traitement que les fiches de region : photo a fond perdu en haut de
   carte, coins arrondis, et la couleur qui monte au survol. */
.region-card__photo,
.shop-card__photo {
  display: block;
  width: calc(100% + 3.4rem);
  max-width: none;
  margin: -1.7rem -1.7rem 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0a0d20;
  border-radius: 14px 14px 0 0;
}

/* L'icone revient dans le flux, sous la photo et au-dessus du titre,
   au lieu d'etre posee par-dessus l'image. */
.region-card .region-card__icon { position: static; }

/* --- photos des personnages secondaires --- */
/* Meme principe que les regions : la photo deborde la marge interieure
   pour toucher les bords de la carte. max-width:none pour la meme raison. */
.cast-card__photo {
  display: block;
  width: calc(100% + 2.6rem);   /* .cast-card a 1,3rem de marge, pas 1,7 */
  max-width: none;
  margin: -1.3rem -1.3rem 1rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 35%;
  background: #0a0d20;
  border-radius: 14px 14px 0 0;
}
@media (max-width: 640px) {
  .cast-card__photo { width: calc(100% + 2.4rem); margin: -1.2rem -1.2rem 0.9rem; }
}

@media (max-width: 640px) {
  .region-card__photo,
  .shop-card__photo { width: calc(100% + 2.4rem); margin: -1.2rem -1.2rem 0; }
}


/* ============================================================
   1 nonies. IMAGE DE FOND FIXE SUR TOUTE LA PAGE
   ============================================================
   L'image reste en place pendant qu'on fait defiler le contenu
   par-dessus, au lieu de disparaitre avec le hero.

   Realisee avec une couche en position:fixed plutot qu'avec
   background-attachment:fixed — cette propriete est mal geree
   sur iOS et provoque des saccades au defilement sur beaucoup
   de telephones.

   LE VOILE EST INDISPENSABLE. Une photo derriere du texte
   detruit le contraste : le voile a 93% ramene l'image au rang
   de texture, visible mais jamais concurrente de la lecture.

   Les sections qui avaient un fond opaque passent en semi-
   transparent, sans quoi elles masqueraient completement
   l'image sur toute la largeur.
   ============================================================ */

.fond-fixe {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(var(--voile-haut), var(--voile-bas)),
    url("hero-bg.jpg") center / cover no-repeat;
}

/* Sur telephone, l'original de 1920 px coutait 485 Ko pour un ecran
   qui n'en affiche jamais plus de 900 en pixels reels. La version de
   1000 px en coute 132, sous un voile a 62 % d'opacite ou personne ne
   verra la difference. C'est le plus gros poste du premier chargement
   mobile, et c'est celui que Google chronometre. */
@media (max-width: 900px) {
  .fond-fixe {
    background:
      linear-gradient(var(--voile-haut), var(--voile-bas)),
      url("hero-bg-mobile.jpg") center / cover no-repeat;
  }
}

/* le corps devient transparent pour laisser voir la couche du dessous */
body { background: transparent; }

/* Les sections ne portent plus qu'un voile leger : l'image doit respirer
   dans les espaces entre les cartes. Elles restent quand meme voilees
   car les titres et chapeaux de section, eux, ne sont pas sur une carte. */
.features  { background: var(--section-a) !important; transition: background-color 1s linear; }
.security  { background: var(--section-b) !important; transition: background-color 1s linear; }

/* LES CARTES DEVIENNENT OPAQUES.
   Elles n'avaient aucun fond : leur aspect sombre venait uniquement de
   la section derriere. Des que celle-ci est devenue translucide, l'image
   traversait donc le texte. Une surface opaque regle le probleme a la
   source — le texte n'est plus jamais pose sur la photo, et l'image peut
   etre poussee beaucoup plus loin dans les espaces vides sans aucun
   risque de lisibilite. */
.card,
.region-card,
.cast-card,
.feature-col,
.debunk,
.platform-card,
.platform-precedent,
.security-card,
.security-banner,
.tips-box,
.codes-vide {
  background: linear-gradient(180deg, #131940, #0b0f2c) !important;
}

/* EXCEPTION — les deux panneaux du premier ecran.
   Le hero garde son propre fond (hero-bg.jpg + degrade) : il n'a jamais
   ete rendu translucide, donc l'opacite n'apportait rien ici — elle
   alourdissait seulement l'ecran d'accueil. Ces deux cartes retrouvent
   exactement les fonds translucides qu'elles avaient a l'origine.

   Choix assume : sur les zones les plus claires de l'image de fond, les
   petites etiquettes et le titre « C'est sorti » passent sous le seuil
   de contraste. Le rendu a ete prefere, en connaissance de cause.

   Le !important est indispensable : ces deux blocs portent aussi la
   classe .card, rendue opaque quelques lignes plus haut. */
.hero__panels .countdown {
  background: linear-gradient(160deg, rgba(6, 8, 20, 0.07), rgba(18, 22, 58, 0.03)) !important;
}
.hero__panels .alert-bar {
  background: linear-gradient(160deg, rgba(255, 61, 127, 0.12), rgba(255, 138, 61, 0.06)) !important;
}

/* la tuile de galerie garde son fond propre, deja opaque a l'usage */
.media-tile { background: #0b0f2c; }

/* ------------------------------------------------------------
   ALTERNANCE : une section sur deux laisse voir l'image
   ------------------------------------------------------------
   La plupart des sections avaient un fond opaque et bloquaient
   completement l'image. On en ouvre quelques-unes de plus pour
   creer un rythme : on descend, l'image apparait, disparait,
   reapparait. Une image visible partout deviendrait une texture
   qu'on ne remarque plus.
   ------------------------------------------------------------ */
#vehicules,
#faune,
#comparatif,
#videos,
#carte-leonida,
#methode,
#faq {
  background: rgba(6, 8, 20, 0.34) !important;
}

/* ------------------------------------------------------------
   LE LOGO VICE CITY, EN HAUT A GAUCHE DU PREMIER ECRAN
   ------------------------------------------------------------
   Il se pose juste au-dessus du titre, et repond au tampon
   « Leonida P.D. » accroche a droite. Le site dit enfin ou se passe
   le jeu sans avoir a l'ecrire.

   IL EST DANS LE FLUX, pas en position absolue — voir le commentaire
   de la balise dans index*.html. Resume : il flottait dans une bande
   censee rester vide sous la barre de navigation, bande qui n'existe
   pas sur un ecran d'ordinateur portable. Il passait alors sur le
   titre, en 1600x900, 1440x900, 1366x768 et 1024x768 — deja avant
   d'etre agrandi, mais il etait trop pale pour que ca se remarque.
   Dans le flux, il pousse le titre devant lui et ne peut plus le
   heurter, a aucune taille de fenetre.

   IL EST ALLUME (18/09/2026, a la demande de Raf : « il est un peu
   pale en haut a gauche »). Le fichier contenait deja un tube —
   contour rose poussiereux, interieur blanc, aucun pixel semi-
   transparent — mais eteint, et pose a 85 % d'opacite : il se
   dissolvait dans le ciel de la photo.

   La couleur n'a pas ete plaquee a l'aveugle. Chaque pixel a ete
   replace entre le point le plus sombre et le plus clair du dessin,
   puis ce trajet a ete rejoue entre #FF2E7A (le verre) et #FFD6E6
   (le coeur chaud du tube). La forme est donc intacte, et le rose
   est de la meme famille que la premiere lettre de DRENALINE
   (#FF3D7F) : les deux enseignes se repondent.
   Pour une version plus mordante encore, refaire le meme trajet
   entre #E0186A et #FF6BA6. La version eteinte d'origine reste
   dans l'historique git.

   PLUS GRAND ET PLUS BAS : +26 % de largeur. La descente, elle, vient
   toute seule du passage dans le flux — il suit desormais le bloc
   central, qui est centre verticalement dans le premier ecran.

   La lueur est STATIQUE. Un neon qui clignote en boucle est la
   signature de l'amateur, et c'est la regle qu'on s'est donnee pour
   le titre : on allume une fois, on ne fait pas la guirlande.
   Elle est en revanche a trois etages — un halo serre et intense,
   un moyen, un large et diffus — parce qu'un vrai tube eclaire ce
   qui l'entoure, il ne se contente pas d'etre lumineux.

   Il disparait sous 640 px, comme le tampon : sur telephone la bande
   au-dessus du titre n'existe plus.
   ------------------------------------------------------------ */
.hero__vice {
  display: block;
  width: clamp(118px, 11.6vw, 172px);
  height: auto;
  /* Il deborde legerement a gauche du titre : pose pile sur la marge,
     il aurait l'air aligne au cordeau, ce qui contredit l'inclinaison. */
  margin: 0 0 0.7rem -0.4rem;
  transform: rotate(-6deg);
  transform-origin: left center;
  opacity: 1;
  filter:
    drop-shadow(0 0 6px rgba(255, 61, 127, 0.95))
    drop-shadow(0 0 18px rgba(255, 61, 127, 0.75))
    drop-shadow(0 0 42px rgba(255, 61, 127, 0.45));
  pointer-events: none;
  z-index: 3;
}
@media (max-width: 640px) {
  .hero__vice { display: none; }
}

/* ------------------------------------------------------------
   CARTOUCHE DES TITRES DE SECTION
   ------------------------------------------------------------
   Dans les sections ou l'image passe, le titre et son chapeau
   flottaient directement sur la photo. Ils reposent maintenant
   sur un panneau opaque, comme les cartes : lisibles a coup sur,
   et l'image continue de respirer tout autour.

   Volontairement limite a ces sections : ailleurs le fond est
   deja opaque, un cartouche n'y servirait a rien et alourdirait.
   ------------------------------------------------------------ */
.platforms .section-head,
.medias .section-head,
.codes .section-head,
.features .section-head,
.security .section-head,
#vehicules .section-head,
#faune .section-head,
#comparatif .section-head,
#videos .section-head,
#faq .section-head {
  background: linear-gradient(180deg, #131940, #0b0f2c);
  border: 1px solid var(--panel-border, rgba(247, 236, 221, 0.1));
  border-radius: 16px;
  padding: 1.5rem 1.7rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

@media (max-width: 640px) {
  .platforms .section-head,
  .medias .section-head,
  .codes .section-head,
  .features .section-head,
  .security .section-head,
  #vehicules .section-head,
  #faune .section-head,
  #comparatif .section-head,
  #videos .section-head,
  #faq .section-head {
    padding: 1.2rem 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* rien a desactiver : la couche ne bouge pas, c'est le contenu qui glisse */
}


/* ============================================================
   2. NOUVEAUTES DEPUIS LE DERNIER PASSAGE
   ============================================================
   Encart en bas a gauche (le radar occupe la droite). N'apparait
   que pour un visiteur DEJA venu, et seulement si des sections
   ont change depuis. Un premier visiteur ne voit rien.
   Les donnees sont dans updates.js, la logique dans nouveautes.js.
   ============================================================ */

.whatsnew {
  position: fixed;
  bottom: 34px;
  left: 34px;
  z-index: 800;
  max-width: 330px;
  background: linear-gradient(180deg, rgba(18, 22, 58, 0.97), rgba(10, 13, 35, 0.97));
  border: 1px solid rgba(232, 200, 126, 0.45);
  border-radius: 16px;
  padding: 1.1rem 1.2rem 1rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 30px rgba(232, 200, 126, 0.12);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.55s ease;
}
.whatsnew.is-visible { transform: translateY(0); opacity: 1; }

.whatsnew__badge {
  display: inline-block;
  font-family: var(--font-mono, "Space Mono", monospace);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #E8C87E;
  border: 1px solid rgba(232, 200, 126, 0.45);
  border-radius: 100px;
  padding: 0.25em 0.75em;
  margin-bottom: 0.7rem;
}
.whatsnew__title {
  font-family: var(--font-display, "Unbounded", sans-serif);
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--sand, #F7ECDD);
  margin-bottom: 0.7rem;
}
.whatsnew__list { list-style: none; margin: 0 0 0.4rem; padding: 0; }
.whatsnew__list li { margin-bottom: 0.45rem; }
.whatsnew__list a {
  color: var(--muted, #9A9DC4);
  font-size: 0.84rem;
  line-height: 1.45;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.whatsnew__list a:hover,
.whatsnew__list a:focus-visible {
  color: var(--aqua, #23E6C0);
  border-bottom-color: rgba(35, 230, 192, 0.5);
}
.whatsnew__date {
  font-family: var(--font-mono, "Space Mono", monospace);
  font-size: 0.6rem;
  color: rgba(154, 157, 196, 0.7);
  display: block;
}
.whatsnew__close {
  position: absolute;
  top: 0.55rem;
  right: 0.7rem;
  background: none;
  border: none;
  color: var(--muted, #9A9DC4);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25em;
  border-radius: 6px;
}
.whatsnew__close:hover { color: var(--sand, #F7ECDD); }
.whatsnew__close:focus-visible { outline: 2px solid var(--aqua, #23E6C0); outline-offset: 2px; }

/* pastille NOUVEAU sur les liens de navigation concernes */
.nav-new-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E8C87E;
  box-shadow: 0 0 8px rgba(232, 200, 126, 0.9);
  margin-left: 5px;
  vertical-align: super;
}

@media (max-width: 860px) {
  /* sur mobile le radar et l'encart se marcheraient dessus */
  .whatsnew { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* le titre reste allume, sans amorcage ni reflet */
  .hero__title .line2 b { animation: none; opacity: 1; }
  .hero__title .line2::after { animation: none; opacity: 0; }
  .whatsnew { transition: none; }
}


/* ============================================================
   1duodecies — L'OUVERTURE DU SITE (voir intro.js)
   ============================================================
   Le voile n'existe dans la page que si intro.js decide de le creer.
   Un visiteur qui revient, ou qui limite les animations sur son
   appareil, ne recoit jamais ce bloc dans le document.
   ============================================================ */
html.intro-actif,
html.intro-actif body { overflow: hidden; }

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(46, 26, 84, 0.55) 0%, rgba(6, 8, 20, 1) 70%),
    var(--midnight-deep, #060814);
  opacity: 1;
  transition: opacity 0.55s ease;
}
.intro.is-out { opacity: 0; pointer-events: none; }

.intro__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.4rem, 4vw, 3.2rem);
  flex-wrap: wrap;
  padding: 0 1.4rem;
}

/* Le nom du site s'inscrit en premier. */
.intro__word {
  font-family: var(--font-display, inherit);
  font-size: clamp(2rem, 6.5vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--sand, #F7ECDD);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.intro__word b {
  font-weight: 800;
  background: var(--gradient-sunset, linear-gradient(135deg, #FF3D7F, #FF8A3D));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.intro.is-in .intro__word { opacity: 1; transform: none; }

/* La sortie est toujours offerte, et toujours visible. */
.intro__skip {
  position: absolute;
  bottom: clamp(1.4rem, 5vh, 2.6rem);
  right: clamp(1.4rem, 5vw, 2.6rem);
  padding: 0.55rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sand, #F7ECDD);
  background: rgba(247, 236, 221, 0.08);
  border: 1px solid rgba(247, 236, 221, 0.28);
  border-radius: 999px;
  cursor: pointer;
}
.intro__skip:hover,
.intro__skip:focus-visible { background: rgba(247, 236, 221, 0.16); }

/* Ceinture et bretelles : si intro.js s'executait malgre le reglage
   systeme du visiteur, le voile ne s'afficherait pas du tout. */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  html.intro-actif,
  html.intro-actif body { overflow: auto; }
}

/* ============================================================
   1decies — LES VIDEOS DE LA CHAINE (voir videos.js)
   ============================================================
   La section existait deja, avec des emplacements vides en attendant
   les premieres publications. Ces regles-ci ne font qu'habiller les
   vraies cartes : la grille, les proportions et les icones de lecture
   viennent toujours du style de la page.
   ============================================================ */

/* Une carte entiere est un lien. On lui retire l'apparence de lien
   sans lui retirer sa nature : elle reste un <a href>, donc elle se
   copie, s'ouvre au milieu et s'annonce comme un lien. */
.video-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.featured-video.video-link { display: grid; }

/* La vignette YouTube remplit le cadre 16/9 deja defini par la page.
   max-width: none parce que la page plafonne toutes les images a 100 %
   de leur conteneur, ce qui empecherait de couvrir. */
.video-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}
/* L'icone de lecture et le badge passent devant l'image. */
.featured-video__thumb .play-ico,
.video-card__thumb .play-ico,
.featured-video__badge { position: relative; z-index: 1; }
.featured-video__badge { position: absolute; }

/* Un voile leger : les vignettes YouTube sont souvent tres saturees,
   et le site est sombre. Il les rattache a la page, et il fond au
   survol pour signaler que la carte est vivante. */
.video-card__thumb::after,
.featured-video__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 8, 20, 0.1) 0%, rgba(6, 8, 20, 0.45) 100%);
  transition: opacity 0.3s ease;
}
.video-link:hover .video-card__thumb::after,
.video-link:hover .featured-video__thumb::after { opacity: 0.35; }

/* Les titres etaient volontairement grises tant qu'ils annoncaient un
   emplacement a venir. Maintenant qu'ils sont reels, ils reprennent la
   couleur du texte. */
.video-card__body h3 {
  color: var(--sand, #F7ECDD);
  line-height: 1.35;
}
.video-card__meta {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aqua, #23E6C0);
}
.video-link:hover .video-card__meta { color: var(--flamingo, #FF3D7F); }

/* Le clavier doit voir ou il est, aussi nettement que la souris. */
.video-link:focus-visible {
  outline: 2px solid var(--aqua, #23E6C0);
  outline-offset: 3px;
}

/* La barre de chaine reprise en tete de la section videos. Sur le
   premier ecran elle flotte seule et a besoin d'air ; ici elle
   remplace un intitule de section et annonce le titre juste dessous,
   donc elle respire moins. */
/* Sous le bandeau, la barre de chaine se presente en plus grand : elle
   n'est plus un rappel discret comme sur le premier ecran, elle est le
   point d'abonnement de la section. Logo a 76 px au lieu de 50, et le
   nom de la chaine suit. */
.channel-bar--inline {
  margin: 0 0 1.6rem;
  padding: .7rem 1.5rem .7rem .7rem;
  gap: 1.1rem;
}
.channel-bar--inline .channel-bar__logo { width: 76px; height: 76px; }
.channel-bar--inline .channel-bar__name { font-size: 1.12rem; }
.channel-bar--inline .channel-bar__tagline { font-size: .84rem; }
.channel-bar--inline .channel-bar__cta { font-size: .9rem; padding: .7em 1.5em; }
 (max-width: 640px) {
  .channel-bar--inline .channel-bar__logo { width: 58px; height: 58px; }
}

/* La cascade doit gagner sur les transitions propres aux cartes.
   .region-card et .mission-card declarent leur propre raccourci
   `transition: ...`, qui remet le delai a zero. Un selecteur plus
   specifique (deux classes contre une) reprend la main, quel que soit
   l'ordre des fichiers. On ne touche qu'au delai : la carte garde ses
   propres transitions.
   cascade.js remet --i a zero une fois l'entree jouee, sans quoi ce
   delai s'appliquerait aussi au survol. */
.reveal-stagger > .reveal { transition-delay: calc(var(--i, 0) * 90ms); }

/* ------------------------------------------------------------
   LES MENUS DEROULANTS DEBORDAIENT DE L'ECRAN SUR TELEPHONE
   ------------------------------------------------------------
   Dans le panneau hors-champ, les quatre menus sortaient tous par la
   droite : mesure a 375 px de large, « Codes » finissait a 454, « Infos »
   a 463. Leurs libelles etaient donc coupes — un defaut qui existait bien
   avant l'ajout du menu « Univers », il le rendait seulement visible.

   La cause est le min-width de 190 px, qui empeche le menu de se
   retrecir pour tenir dans la place disponible. On le libere, on le
   laisse prendre la largeur de son contenu, et on le borne a la largeur
   de l'ecran moins le panneau.
   ------------------------------------------------------------ */
@media (max-width: 1080px) {
  .nav__links .lang-menu {
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - 140px);
    right: 0;
    left: auto;
  }
}

/* Les bandeaux personnages vivent dans bandeau.css : ils servent aussi
   aux pages de la carte, qui ne chargent pas cette feuille-ci. */

/* ==========================================================
   VIE DES IMAGES AU SURVOL
   ==========================================================
   Une seule sorte d'image reagissait au survol : les cartes de
   bandes-annonces, qui zooment. Toutes les autres — regions,
   casting, galerie, videos — restaient inertes. Sur un site dont
   le contenu EST de l'image, c'est une occasion perdue, et
   l'incoherence se remarque des qu'on promene la souris.

   DEUX TRAITEMENTS, PARCE QUE TOUTES NE SONT PAS BATIES PAREIL.

   1. Celles posees dans un cadre qui les recadre (galerie, videos)
      peuvent zoomer : le cadre coupe ce qui depasse, le mouvement
      est propre.

   2. Les photos de regions et de casting n'ont pas ce cadre : elles
      sont posees directement dans la carte, entourees de marge. Les
      agrandir les ferait deborder sur cette marge au lieu de zoomer
      dedans. Elles recoivent donc la montee de couleur seule.

   La montee de couleur est commune aux deux : les fonds du site sont
   volontairement desatures, et redonner sa saturation a l'image
   survolee la fait avancer d'un plan sans rien deplacer.
   ========================================================== */

.media-tile img,
.video-card__thumb img,
.featured-video__thumb img,
.region-card__photo,
.shop-card__photo,
.cast-card__photo {
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 0.35s ease;
}

/* 1. cadre present : on peut zoomer */
.media-tile:hover img,
.video-card:hover .video-card__thumb img,
.featured-video:hover .featured-video__thumb img {
  transform: scale(1.055);
  filter: saturate(1.18) brightness(1.06);
}

/* 2. pas de cadre : couleur seule */
.region-card:hover .region-card__photo,
.shop-card:hover .shop-card__photo,
.cast-card:hover .cast-card__photo {
  filter: saturate(1.2) brightness(1.07) contrast(1.03);
}

/* Rien de tout cela ne se declenche si le visiteur a demande a
   reduire les animations. La couleur, elle, reste : ce n'est pas
   du mouvement. */
@media (prefers-reduced-motion: reduce) {
  .media-tile img,
  .video-card__thumb img,
  .featured-video__thumb img,
  .region-card__photo,
  .shop-card__photo,
  .cast-card__photo {
    transition: filter 0.35s ease;
  }
  .media-tile:hover img,
  .video-card:hover .video-card__thumb img,
  .featured-video:hover .featured-video__thumb img {
    transform: none;
  }
}

/* ==========================================================
   LA TEINTE DU CIEL DE LEONIDA
   ==========================================================
   heure-leonida.js pose data-moment sur <html> selon l heure
   qu il est reellement en Floride. Le fond visible entre les
   sections en prend la couleur : le site n a pas la meme tete
   le matin et la nuit.

   REGLE ABSOLUE : LES SIX AMBIANCES SONT AUSSI SOMBRES.
   Pas seulement la meme opacite : la meme LUMINANCE PERCUE. Les
   notes de bas de section laissent passer 66 a 100 pour cent du
   fond, donc une teinte plus claire a midi degraderait vraiment la
   lisibilite. Chaque couleur a donc ete ramenee par dichotomie sur
   la luminance relative de l ambiance de nuit, celle d origine :
   toutes tiennent dans une marge de deux pour cent. Seule la teinte
   change, jamais la clarte.

   Sans JavaScript, ou si le navigateur ignore les fuseaux, aucun
   attribut n est pose et :root garde l ambiance de nuit — celle
   que le site avait avant.
   ========================================================== */
:root {
  --voile-haut: rgba(6, 8, 20, 0.62);
  --voile-bas:  rgba(11, 15, 43, 0.68);
  --section-a:  rgba(6, 8, 20, 0.34);
  --section-b:  rgba(11, 15, 43, 0.34);
}

/* premieres lueurs sur l Atlantique : rose et cendre */
:root[data-moment="aube"] {
  --voile-haut: rgba(15, 6, 11, 0.62);
  --voile-bas:  rgba(23, 13, 36, 0.68);
  --section-a:  rgba(15, 6, 11, 0.34);
  --section-b:  rgba(23, 13, 36, 0.34);
}
/* plein matin : bleu franc, un peu de vert dans l ombre */
:root[data-moment="matin"] {
  --voile-haut: rgba(4, 9, 15, 0.62);
  --voile-bas:  rgba(7, 17, 38, 0.68);
  --section-a:  rgba(4, 9, 15, 0.34);
  --section-b:  rgba(7, 17, 38, 0.34);
}
/* midi de Floride : lumiere dure, ombres froides et neutres */
:root[data-moment="journee"] {
  --voile-haut: rgba(7, 9, 11, 0.62);
  --voile-bas:  rgba(13, 16, 36, 0.68);
  --section-a:  rgba(7, 9, 11, 0.34);
  --section-b:  rgba(13, 16, 36, 0.34);
}
/* l heure doree, celle des affiches de Vice City */
:root[data-moment="crepuscule"] {
  --voile-haut: rgba(17, 6, 3, 0.62);
  --voile-bas:  rgba(29, 10, 33, 0.68);
  --section-a:  rgba(17, 6, 3, 0.34);
  --section-b:  rgba(29, 10, 33, 0.34);
}
/* les neons prennent le dessus : magenta et violet */
:root[data-moment="soiree"] {
  --voile-haut: rgba(18, 4, 18, 0.62);
  --voile-bas:  rgba(19, 11, 49, 0.68);
  --section-a:  rgba(18, 4, 18, 0.34);
  --section-b:  rgba(19, 11, 49, 0.34);
}
/* nuit profonde : le reglage d origine du site */
:root[data-moment="nuit"] {
  --voile-haut: rgba(6, 8, 20, 0.62);
  --voile-bas:  rgba(11, 15, 43, 0.68);
  --section-a:  rgba(6, 8, 20, 0.34);
  --section-b:  rgba(11, 15, 43, 0.34);
}

/* La transition dure une seconde : le passage se produit pendant
   la lecture, personne ne doit voir un a-coup. */
.fond-fixe { transition: background-color 1s linear; }

/* ==========================================================
   LES TROIS ACCES PRIORITAIRES DE LA BARRE
   ==========================================================
   La carte, les codes et les videos sont ce qu'un joueur vient
   chercher. Ils ne sont donc ranges dans aucun menu : un clic de
   moins vaut mieux qu'un rangement parfait. Le liseré doré les
   distingue des deux menus sans crier — c'est la meme couleur que
   les badges « confirme », deja utilisee partout pour dire « ceci
   compte ».
   ========================================================== */
.nav__phare {
  position: relative;
  padding: 8px 13px;
  border-radius: 8px;
  border: 1px solid rgba(217, 184, 114, 0.28);
  background: rgba(217, 184, 114, 0.06);
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.nav__phare:hover,
.nav__phare:focus-visible {
  border-color: var(--gold-bright, #F3DFA0);
  background: rgba(217, 184, 114, 0.14);
  color: var(--gold-bright, #F3DFA0);
}
/* Dans le tiroir mobile, les liens sont empiles et pleine largeur :
   le cadre ferait des boutons disparates. On garde la couleur seule. */
@media (max-width: 1080px) {
  .nav__phare {
    border: none;
    background: none;
    padding: 0;
    color: var(--gold-bright, #F3DFA0);
  }
}

/* ==========================================================
   ORNEMENTS DE MARGE
   ==========================================================
   Certaines sections sont de grands aplats sombres avec une
   colonne de texte au milieu et rien sur les cotes. Ces deux
   ornements viennent occuper ces marges.

   TROIS REGLES QUI LES EMPECHENT DE NUIRE
   1. Ils sont en arriere-plan (z-index 0) et le contenu passe
      devant : ils ne recouvrent jamais un mot.
   2. pointer-events: none — ils n'interceptent aucun clic.
   3. Ils disparaissent sous 1400 px de large. En dessous, la
      colonne de contenu occupe presque tout l'ecran : il n'y a
      plus de marge a remplir, et ils passeraient derriere le
      texte au lieu d'a cote.

   Ils restent tres discrets : un decor qu'on remarque au bout de
   quelques secondes vaut mieux qu'un decor qui saute aux yeux et
   qu'on ne peut plus ignorer ensuite.
   ========================================================== */
.ornement {
  position: relative;
  overflow: hidden;
}
.ornement > .container { position: relative; z-index: 1; }

/* --- le VI de Grand Theft Auto VI, en creux --- */
.ornement--vi::before,
.ornement--vi::after {
  content: "VI";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display, sans-serif);
  font-size: clamp(150px, 15vw, 290px);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(247, 236, 221, 0.075);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.ornement--vi::before { left: -0.18em; }
.ornement--vi::after  { right: -0.18em; }

/* LES PALMIERS EN SILHOUETTE ONT ETE RETIRES le 17 septembre 2026,
   a la demande de Raf : "retire tous les palmiers du site". Ils
   ornaient les regions, la faune, la carte, les editions et la
   bienvenue. Ils sont dans l'historique git, commit b363463 :
   "git show b363463:site-extras.css" les ressort entiers, dessin SVG
   compris. */


/* --- le V et le I, perces a jour ---
   Ce n'est pas un dessin pose sur la section : c'est un TROU. Les deux
   lettres portent le meme fond que la page — la meme image, le meme
   voile — en « fixed », donc cale sur la fenetre et pas sur l'element.
   Resultat : ce qu'on voit dedans est exactement ce qui se trouve
   derriere, et le decor defile a travers les lettres quand on descend.

   LES FORMES VIENNENT DU LOGO OFFICIEL, pas d'une police. Le V de GTA
   est pointu, aucune fonte ne le donne — les essais avec des lettres
   tapees ont tous ete rejetes, a raison. Les deux masques sont extraits
   du logo par separation en composantes connexes : le contour sombre
   reliait les deux lettres, seules leurs formes interieures etaient
   reellement distinctes.

   POURQUOI LES MASQUES SONT ECRITS ICI, EN data: URI, ET PAS APPELES
   COMME DEUX FICHIERS
   Un masque CSS obeit a la meme politique d'origine qu'une requete
   reseau. Deux consequences, la seconde apprise a la dure :
     - un masque pris chez Rockstar est refuse — l'element devient
       entierement transparent, sans la moindre erreur en console ;
     - une page OUVERTE DEPUIS LE DISQUE (file://) traite chaque fichier
       comme une origine opaque a lui seul. Meme servis depuis le dossier
       du site, img/vi-v.png et img/vi-i.png etaient donc refuses des que
       Raf ouvrait la page en double-cliquant dessus. Les lettres
       existaient, occupaient leur place, et ne montraient rien.
   Un data: URI n'a pas d'origine a comparer : il marche depuis le
   disque, depuis un serveur, depuis n'importe ou. Cout : 6,2 Ko dans
   cette feuille, une fois, mis en cache avec elle — contre deux
   requetes. Les fichiers d'origine restent dans le commit ff526b2.

   ET SURTOUT : PAS DE transform ICI. Un transform sur l'element cree un
   bloc englobant et annule « background-attachment: fixed » — le trou
   redeviendrait une image collee, decalee. Le centrage vertical passe
   donc par une marge negative, jamais par translateY. */
.ornement--vi-trou::before,
.ornement--vi-trou::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--voile-haut), var(--voile-bas)),
    url("hero-bg.jpg");
  background-attachment: fixed, fixed;
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
/* ------------------------------------------------------------
   OU SE POSENT LES DEUX LETTRES
   ------------------------------------------------------------
   Deux placements, et rien d'autre : on ne veut pas d'un ornement qui
   se reinvente a chaque section.

   L'ECART DE 26 PX entre le V et le I est une demande de Raf : dans le
   logo d'origine les deux lettres se touchent presque, et il les
   voulait franchement separees. Largeur totale du groupe :
   223 + 26 + 78 = 327 px, dont la moitie fait 163,5.

   1. EN BAS, CENTRE — les editions et le pied de page.
      La section se donne une bande en dessous de son contenu (voir
      plus haut) et les lettres s'y posent, au milieu des deux marges
      sombres. Les « bottom » different de 12 px pour remettre les
      sommets a la meme hauteur, le I etant plus haut que le V.

   2. A GAUCHE, A MI-HAUTEUR — les missions et l'arsenal.
      La, pas de bande : les lettres se glissent dans la marge de
      gauche et passent DERRIERE le contenu, qui est opaque. On en voit
      d'autant plus que l'ecran est large — c'est le meme parti que
      les anciens ornements, une forme qui emerge du bord. Le centrage
      vertical passe par une marge negative identique sur les deux
      pseudo-elements : jamais par un transform, qui annulerait le
      « background-attachment: fixed » et tuerait l'effet de trou.
   ------------------------------------------------------------ */
.vi-trou--bas::before { left: calc(50% - 163.5px); bottom: 12px; }
.vi-trou--bas::after  { left: calc(50% + 85.5px);  bottom: 0; }

.vi-trou--gauche::before { left: 34px;  top: 50%; margin-top: -121px; }
.vi-trou--gauche::after  { left: 283px; top: 50%; margin-top: -121px; }

/* ------------------------------------------------------------
   LES DEUX FILLES DES ANCIENNES POCHETTES, DANS LE PIED DE PAGE
   ------------------------------------------------------------
   Elles encadrent le V et le I : San Andreas a gauche, GTA V a
   droite. Deux fois la meme retournee se lirait comme un
   copier-coller — ce sont deux personnages differents.

   Elles reagissent au survol exactement comme les personnages des
   bandeaux : un pas vers le haut, l'ombre qui s'allonge, une demi-
   seconde. Meme geste partout, le site n'a qu'un vocabulaire.

   Elles ne sont pas en pointer-events: none, justement pour que le
   survol existe — mais elles restent derriere le contenu (z-index 0
   contre 1 sur .container), donc elles ne volent aucun clic de lien.

   Elles disparaissent sous 900 px, avec la bande qui les porte.
   ------------------------------------------------------------ */
.footer__perso {
  position: absolute;
  bottom: 0;
  height: 238px;
  width: auto;
  z-index: 0;
  opacity: 0.92;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.75));
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.5s ease;
}
.footer__perso--gauche { left: clamp(1.5rem, 5vw, 5rem); }
.footer__perso--droite { right: clamp(1.5rem, 5vw, 5rem); }
.footer__perso:hover {
  transform: translateY(-6px) scale(1.015);
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.85));
}
@media (max-width: 899px) {
  .footer__perso { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .footer__perso { transition: filter 0.5s ease; }
  .footer__perso:hover { transform: none; }
}

/* ------------------------------------------------------------
   L'ENSEIGNE VICE CITY EN PIED DE PAGE
   ------------------------------------------------------------
   Demandee par Raf le 18/09/2026, en echo a celle du premier ecran :
   la page s'ouvre dessus et se referme dessus.

   ELLE EST PLUS PETITE QU'EN HAUT (130 px contre 172) et c'est
   volontaire. En haut elle annonce le lieu avant le titre, elle a
   donc le droit de parler fort. Ici elle accompagne le nom du site,
   qui doit rester la premiere chose qu'on lit dans ce coin : une
   enseigne plus grande que la marque du site, dans le bloc de la
   marque du site, ferait le contraire de ce qu'on veut.

   En revanche la lueur reste a pleine puissance. Une version
   attenuee a ete essayee : elle redevient la tache pale qu'on venait
   justement de corriger en haut de page. Un neon est allume ou il
   est eteint, il n'est pas a moitie.

   Elle disparait sous 640 px, comme celle du hero : sur telephone le
   bloc de marque est deja dense.
   ------------------------------------------------------------ */
.footer__vice {
  display: block;
  width: 130px;
  height: auto;
  margin: 0 0 0.9rem -0.3rem;
  transform: rotate(-6deg);
  transform-origin: left center;
  filter:
    drop-shadow(0 0 6px rgba(255, 61, 127, 0.95))
    drop-shadow(0 0 18px rgba(255, 61, 127, 0.75))
    drop-shadow(0 0 42px rgba(255, 61, 127, 0.45));
}
@media (max-width: 640px) {
  .footer__vice { display: none; }
}

/* LA SECTION SE DONNE LA PLACE. Mesure : sous la note de bas de
   section il ne restait que 126 px, et les lettres passaient derriere
   le texte — lisible, puisque le contenu est au-dessus, mais pose sur
   une zone claire. Plutot que de reduire les lettres a un timbre, la
   section s'allonge d'une bande qui n'appartient qu'a elles. Elle
   Elle ne sert QU'au placement du bas : les lettres posees a gauche
   passent derriere le contenu et n'ont besoin d'aucune place a elles.

   Le !important est indispensable : site.css est charge APRES cette
   feuille, et son .section-pad reimposerait sa propre marge. */
@media (min-width: 900px) {
  .vi-trou--bas { padding-bottom: 300px !important; }
}

/* LES PROPORTIONS sont celles du logo, au meme facteur : le V fait
   347 x 358 dans l'original, le I 122 x 377. Le I est donc plus haut
   que le V, et dans le logo leurs SOMMETS sont alignes — c'est ce que
   les deux placements ci-dessous reproduisent, chacun a leur maniere. */

.ornement--vi-trou::before {
  width: 223px;
  height: 230px;
  -webkit-mask-image: url("data:image/png;base64,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");
          mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVsAAAFmCAYAAADDKzmeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAA4PSURBVHhe7dTZdhvHFgRR//9P3yvREk2CAaCHGk5lRay1H5zWAOJ065//2Q79vrNqs/A88j49vtyqwzbIY+/T15dbtVh+/3jsvfr6gqsG26PPf2w9+h59vbdqsPw+bu3R9+vrzTWX7dHHvT3+fj3eXPNYfp/3/nr432yPHu+u8WyPPm/+9fh/WX50d41l+X27+bf/+MP2iG6vMWyPvt392398YfnR3TWG5ffj7j+GP2yP6Pbqy/box+1/DF9YfnR39WX50d39x3bz6O7qy/Kju7/8x/Y3y4/urj4sP7r7Bxy/sPzo7urD8qO7f8DxgeVHd1dblh/d/ROODyw/urvasvzo7p9wBJYf3V1tWH50929wBJYf3V1tWH50929wfMLyo7vrHsuP7v4Djk9YfnR33WP50d1/wPEFy4/urmssP7o7wvEFy4/urmssP7o7wvENy45urvMsP7r7Uzi+YfnR3XWO5Ud3fwrHNyw/urvOsfzo7k/heIDlR3fXMZYf3f0lHA+w/OjuOsbyo7u/hONBlh/dXa9ZfnT3t3A8yPKju+s1y4/u/haOJ1h+dHcxy4/ufgiOJ1h+dHcxy4/ufgiOJ1l+dHd9Z/nR3Q/D8STLj+6u7yw/uvthOF5g2dHN9R/Lj+5+Co4XWH50d/3L8qO7n4LjRZYd3Vy2Q3T303C8yPKju+/O8qO7n4bjDZYd3Xx3lh3d/BIcb7D86O67svzo7pfgeJNlRzfflWVHN78Mx5ssP7r7biw/uvtlODZg2dHNd2PZ0c1vwbEBy4/uvgvLj+5+C46NWHZ0811YdnTz23BsxPKju6ez/Ojut+HYkGVHN09n2dHNm8CxIcuObp7M8qO7N4FjY5Yd3TyVZUc3bwbHxiw7unkiy4/u3gyOHVh2dPM0lh3dvCkcO7Ds6OZpLDu6eVM4dmD50d1TWHZ08+Zw7MSyo5unsOzo5s3h2InlR3dfnWVHN+8Cx44sO7r56iw7unkXOHZk+dHdV2X50d27wLEzy45uvirLjm7eDY6dWX5099VYfnT3bnAcwLKjm6/GsqObd4XjAJYd3Xwllh/dvSscB7Hs6OarsOzo5t3hOIhlRzdfhWVHN+8Ox4EsO7p5dZYd3XwIHAey7Ojm1Vl2dPMhcBzMsqObV2XZ0c2HwXEwy45uXpVlRzcfBscJLDu6eTWWHd18KBwnsOzo5tVYdnTzoXCcxLKjm1dh2dHNh8NxEsuObl6FZUc3Hw7HiSw3uncFlh3dfAocJ7Ls6OazWXZ08ylwnMxyo3vPZNnRzafBcTLLjm4+i2VHN58GxwIsN7r3DJYd3XwqHAuw7Ojmo1l2dPOpcCzCcqN7j2a50b2nw7EIy45uPoplRzefDsdCLDe69yiWG927BBwLsezo5r1ZdnTzEnAsxnKje/dmudG9y8CxGMuN7t2TZUc3LwPHYiw7unkvlhvduxQcC7Lc6N49WHZ081JwLMiyo5u3ZtnRzUvBsSjLje7dkmVHNy8Hx6IsO7p5K5Yd3bwcHAuz3OjerVhudO+ScCzMsqOb32XZ0c1LwrE4y43ufZflRvcuC8fiLDu6+VWWHd28LBwXYLnRva+y3OjepeG4AMuObn6WZUc3Lw3HRVhudO+zLDe6d3k4LsJyo3ufYdnRzcvDcSGWG937KMuN7r0EHBdiudG9j7Ds6OZLwHExlhvd+x3Lje69DBwXY7nRvV+x7Ojmy8BxQZYb3fsZy43uvRQcF2S50b2fsdzo3kvBcVGWG937keVG914Ojouy3Ojejyw3uvdycFyY5Ub3/styo3svCceFWW50778sN7r3knBcnGVGt/7NcqN7LwvHxVlu3nuv6N7LwjGAZead9+nx1svDMYDl5p336OudI+AYwjLzvvl9fY9j4BjCcvO+2T2+yxFwDGFm60XvcgQcg5jZWtF7HAHHIGa2TvQOx8AxjJmtEb2/MXAMY2b1o3c3Co6BzKx29N5GwTGQmdWO3tsoOIYys5rR+xoHx1BmVjN6X+PgGMzMakXvaSQcg5lZreg9jYRjODOrEb2fsXAMZ2Y1ovczFo4bMLO50XsZDccNmNnc6L2MhuMmzGxO9D7Gw3ETZjYneh/j4bgRMxsbvYdbwHEjZjY2eg+3gONmzGxM9P5tA8fNmNmY6P3bBo4bMrO+0Xu3FRw3ZGZ9o/duKzhuysz6RO/bdnDclJn1id637eC4MTNrG71nW8JxY2bWNnrPtoTj5sysTfR+bQvHzZlZm+j92haOMrOb0Xu1NRxlZjej92prOMrMbkTv1PZw1Aczuxa9T9vDUR/M7Hz0LukXHPXJzM5F75F+wVGfzOxc9B7pFxz1jZkdi94f/YGjvjGzY9H7oz9w1A9m9jp6b/QFjvrBzF5H742+wFHIzDh6X/QARyEz4+h90QMc9ZSZfY/eEwEc9ZSZfY/eEwEc9ZKZ/Ru9H3oCR71kZv9G74eewFFvme0evRd6AUe9ZbZ79F7oBRx1iNmu0fugN3DUIWa7Ru+D3sBRh5ntFr0HOgBHHWa2W/Qe6AAcdYrZLtHzr4Nw1Clmu0TPvw7CUaeZpUfPvU7AUaeZpUfPvU7AUZeYpUbPu07CUZeYpUbPu07CUZeZpUXPuS7AUZeZpUXPuS7AUZeZJUXPuC7CUbeYpUTPty7CUbeYJUTPtm7AUbeZrR4917oBR91mtnL0TOsmHNWE2arR86ybcFQTZitGz7IawFHNmK0WPcdqAEc1Y7Za9ByrARzVlNkq0fOrRnBUU2arRM+vGsFRzZlVj55bNYSjmjOrHj23aghHdWFWNXpe1RiO6sKsavS8qjEc1Y1Zteg5VQc4qhuzatFzqg5wVFdmVaLnU53gqK7MqkTPpzrBUd2ZzY6eS3WEo7ozmx09l+oIRw1hNit6HtUZjhrCbFb0PKozHDWM2ejoOdQAOGoYs9HRc6gBcNRQZqOi50+D4KihzEZFz58GwVHDmfWOnjsNhKOGM+sdPXcaCEdNYdYret40GI6awqxX9LxpMBw1hVmP6FnTBDhqGrPW0XOmCXDUNGYto2dMk+CoqcxaRc+XJsFRU5m1iJ4tTYSjpjO7Gz1XmghHTWd2J3qmNBmOKsHsavQ8aTIcVYLZlehZUgE4qgyzs9FzpAJwVBlmZ6PnSAXgqFLMjkbPj4rAUaWYHY2eHxWBo8oxexc9NyoER5Vj9i56blQIjirJ7Fn0vKgYHFWS2bPoeVExOKoss8foOVFBOKoss8foOVFBOKo0s7/R86GicFRpZn+j50NF4ajyzOi5UGE4qjwzei5UGI5agu0bPQ8qDkctwfaNngcVh6OWYftFz4EWgKOWYftFz4EWgKOWYvtE99cicNRSbJ/o/loEjlqK7RHdXgvBUcux/OjuWgiOWo5lRzfXYnDUkiw3urcWg6OWZJnRrbUgHLUsy4vurAXhqGVZVnRjLQpHLc1yovtqUThqaZYR3VYLw1HLs/Wju2phOGp5tnZ0Uy0OR0WwdaN7anE4KoKtG91Ti8NRMWy96I4KgKNi2HrRHRUAR0WxdaL7KQSOimLrRPdTCBwVx+pHd1MQHBXH6kd3UxAcFcnqRvdSGBwVyepG91IYHBXL6kV3UiAcFcvqRXdSIBwVzepE91EoHBXN6kT3USgcFc/mR3dRMBwVz+ZHd1EwHLUFmxfdQ+Fw1BZsXnQPhcNR27Dx0R20ARy1DRsf3UEbwFHbsLHRDbQJHLUVGxd9/9oEjtqKjYm+e20ER23H+kffuzaCo7ZjfaPvXJvBUVuyftH3rc3gqC1Zn+i71oZw1LasffQ9a0M4alvWNvqOtSkctTVrF32/2hSO2pq1ib5bbQxHbc/uR9+rNoajtmf3o+9VG8NR+sWuR9+nNoej9Itdj75PbQ5H6Q87H32Pkv/Y6iU7H32Pkv/Y6i07Hn1/0gccpS/sePT9SR9wlB7Y++h7kz7hKD2w99H3Jn3CUQL2PPq+pG9wlIA9j74v6RscpSfsZ/Q9ST/gKD1hP6PvSfoBR+kF+y/6fiSEo/SC/Rd9PxLCUXrD+HuRnsJResP4e5GewlE6YOfo+5BewlE6YOfo+5BewlE6YNfou5DewlE6aMfoe5DewlE6aLfoO5AOwVE6Yafo55cOwVE6YZfoZ5cOw1E6aYfo55YOw1E6KT36maVTcJQuSI5+XukUHKULUqOfVToNR+mixOjnlE7DUbooLfoZpUtwlG5Iin4+6RIcpRuSop9PugRH6aaE6OeSLsNRuikh+rmky3CUGlg5+nmkW3CUGlg5+nmkW3CUGlkx+jmk23CUGlkx+jmk23CUGlop+vxSEzhKDa0UfX6pCRylxlaIPrfUDI5SYytEn1tqBkepg8rR55WawlHqoHL0eaWmcJQ6qRh9Tqk5HKVOKkafU2oOR6mjStHnk7rAUeqoUvT5pC5wlDqrEH0uqRscpc4qRJ9L6gZHqbPZ0WeSusJRGmBm9HmkrnCUBpgVfRapOxylQWZEn0PqDkdpkNHRZ5CGwFEaaGT090tD4CgNNCr6u6VhcJQGGxH9vdIwOEqD9Y7+TmkoHKUJekZ/nzQUjtIEvaK/SxoOR2mSHtHfIw2HozRJj+jvkYbDUZqoZfTnS1PgKE3UMvrzpSlwlCZrEf250jQ4SpO1iP5caRocpQLuRH+eNBWOUgF3oj9PmgpHqYgr0Z8jTYejVMSV6M+RpsNRKuRM9PulEnCUCjkT/X6pBBylYo5Ev08qA0epmCPR75PKwFEq6FX066VScJQKehX9eqkUHKWCnkW/VioHR6koin6dVA6OUlGP0a+RSsJRKuxr9P+lknCUCvsb/T+pqP/983+A/H4yjWCphAAAAABJRU5ErkJggg==");
}
.ornement--vi-trou::after {
  width: 78px;
  height: 242px;
  -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHoAAAF5CAYAAABQuj7+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAANuSURBVHhe7dEBDQAwCMAw/JvmwcbXJlOw2d2Lz5kcYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXTEjTY7wOiEnQcGtf9CqDvzqAAAAABJRU5ErkJggg==");
          mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHoAAAF5CAYAAABQuj7+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAANuSURBVHhe7dEBDQAwCMAw/JvmwcbXJlOw2d2Lz5kcYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXSE0RFGRxgdYXTEjTY7wOiEnQcGtf9CqDvzqAAAAABJRU5ErkJggg==");
}

/* LE VI EN CONTOUR se pose a cheval sur les bords gauche et droit de la
   section : sous 1400 px il n'y a plus de marge ou mordre, il disparait. */
@media (max-width: 1400px) {
  .ornement--vi::before, .ornement--vi::after { display: none; }
}

/* LE VI PERCE, lui, n'a besoin d'aucune marge : il est pose A L'INTERIEUR
   de la section, a 34 px du bord. Il avait herite du seuil de 1400 px du
   contour, et Raf ne le voyait donc pas — un ecran d'ordinateur portable
   courant fait 1366. Il descend jusqu'a 900 px.

   En dessous, il s'efface pour de bon : « background-attachment: fixed »
   est au mieux couteux, au pire ignore sur les navigateurs mobiles, et un
   trou qui ne suit plus le fond n'est plus un trou. */
@media (max-width: 899px) {
  .ornement--vi-trou::before, .ornement--vi-trou::after { display: none; }
}

/* ==========================================================
   LA PAGE DES MISES A JOUR
   ==========================================================
   Deux journaux dos a dos : ce que Rockstar change dans le jeu,
   ce que nous changeons ici. Rendu par patchs-render.js.

   Le « NEW » est volontairement en anglais dans les trois langues :
   c'est le marqueur universel du jeu video, et « NOUVEAU » serait
   plus long et moins lu. Il tombe au bout de sept jours — un NEW
   permanent ne veut plus rien dire.
   ========================================================== */

/* --- une mise a jour du jeu --- */
.patch {
  padding: 1.6rem 1.7rem;
  border-radius: 16px;
  margin-bottom: 1.1rem;
}
.patch__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 0.9rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--panel-border, rgba(247, 236, 221, 0.1));
}
.patch__version {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--midnight-deep, #060814);
  background: var(--gradient-gold, linear-gradient(120deg, #a9863f, #D9B872 45%, #F3DFA0 55%, #a9863f));
  border-radius: 100px;
  padding: 0.35em 0.9em;
  flex: none;
}
.patch__titre {
  font-family: var(--font-display, sans-serif);
  font-size: 1.12rem;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.patch__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  width: 100%;
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  color: var(--muted, #9A9DC4);
}
.patch__sous-titre {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aqua, #23E6C0);
  margin: 1.1rem 0 0.5rem;
}
.patch__liste { margin: 0; padding-left: 1.1rem; }
.patch__liste li {
  color: #C9CCE4;
  font-size: 0.93rem;
  line-height: 1.6;
  margin-bottom: 0.35rem;
}
.patch__source {
  display: inline-block;
  margin-top: 1.1rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  color: var(--aqua, #23E6C0);
}
.patch__source::after { content: " \2197"; }

/* --- le journal du site --- */
.journal { list-style: none; margin: 0; padding: 0; }
.journal__ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--panel-border, rgba(247, 236, 221, 0.08));
}
.journal__ligne:last-child { border-bottom: 0; }
.journal__date {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  color: var(--muted, #9A9DC4);
  flex: none;
  min-width: 11ch;
}
.journal__neuf {
  font-family: var(--font-mono, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--midnight-deep, #060814);
  background: var(--flamingo, #FF3D7F);
  border-radius: 100px;
  padding: 0.2em 0.6em;
  flex: none;
}
.journal__texte { flex: 1 1 14rem; color: var(--sand, #F7ECDD); font-size: 0.95rem; }
.journal__texte a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(247, 236, 221, 0.22); }
.journal__texte a:hover { color: var(--aqua, #23E6C0); border-bottom-color: var(--aqua, #23E6C0); }

@media (max-width: 640px) {
  .patch { padding: 1.2rem 1.2rem; }
  .journal__date { min-width: 0; }
}

/* ------------------------------------------------------------
   LA CHARTE EDITORIALE, EN PAGE D'ACCUEIL
   ------------------------------------------------------------
   Ajoutee le 18/09/2026 apres l'examen des sites concurrents. Le
   plus serieux d'entre eux affiche sa charte en page d'accueil et
   en fait son argument principal — a raison : c'est la seule chose
   qu'un site de fans peut promettre et tenir mieux qu'un gros site.
   GTAdrenaline appliquait deja cette rigueur sans jamais la montrer.

   ELLE PORTE UN BANDEAU comme les autres sections. Je l'avais posee
   nue au depart, en me disant qu'une declaration n'a pas besoin de
   mise en scene ; Raf a tranche le 18/09/2026 dans l'autre sens, et
   il a raison sur le fond : l'encadre avec le titre dedans est la
   signature du site, et une section qui s'en passe a l'air d'un
   corps etranger, pas d'un propos plus grave.

   Le seul effet en propre est le filet colore par niveau, qui
   descend du vert de la certitude a l'orange du doute.

   LA NUMEROTATION N'EST PAS UN ORNEMENT : 01, 02, 03 est une echelle
   de certitude decroissante. Si un jour l'ordre n'a plus de sens,
   les numeros doivent disparaitre.
   ------------------------------------------------------------ */

.methode__niveaux {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}
.niveau {
  background: linear-gradient(180deg, var(--panel) 0%, var(--midnight) 100%);
  border: 1px solid var(--panel-border);
  border-top: 3px solid var(--aqua);
  border-radius: 12px;
  padding: 1.4rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.niveau--confirme { border-top-color: var(--aqua); }
.niveau--analyse  { border-top-color: var(--gold); }
.niveau--rumeur   { border-top-color: var(--solar); }

.niveau__no {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.niveau__nom {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.12rem;
  margin: 0;
}
.niveau--confirme .niveau__nom { color: var(--aqua); }
.niveau--analyse  .niveau__nom { color: var(--gold-bright); }
.niveau--rumeur   .niveau__nom { color: var(--solar); }
.niveau__texte {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* Les deux regles dures. Elles ne sont pas des cartes : ce sont des
   engagements, et un filet a gauche les tient mieux qu'un cadre. */
.methode__regles {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 78ch;
}
.methode__regles .regle {
  margin: 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--flamingo);
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.6;
}
.methode__regles .regle b { color: var(--sand); font-weight: 700; }

@media (max-width: 640px) {
  .niveau { padding: 1.2rem; }
}

/* ------------------------------------------------------------
   LA FICHE TECHNIQUE, EN TETE DE LA CHRONOLOGIE
   ------------------------------------------------------------
   Ajoutee le 18/09/2026. Elle ne contient aucun fait nouveau : tout
   y etait deja, disperse entre le premier ecran et la page
   informations. Un visiteur arrive de Google sur « date de sortie
   GTA 6 » veut ces dix lignes, pas un paragraphe.

   DEUX COLONNES QUI S'ALIGNENT. Les intitules sont en mono, a
   largeur fixe, pour que les valeurs tombent sur la meme verticale :
   c'est ce qui fait qu'on lit une fiche et pas une liste. Sous
   560 px les deux colonnes se superposent, sinon les valeurs
   longues se briseraient sur trois lignes.

   LES LIGNES « NON ANNONCE » SONT GRISEES, pas cachees. Elles
   repondent a deux des questions les plus posees, et une reponse
   vide assumee vaut mieux qu'un silence.
   ------------------------------------------------------------ */
.fiche {
  background: linear-gradient(180deg, var(--panel) 0%, var(--midnight) 100%);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 1.6rem clamp(1.2rem, 3vw, 2rem) 1.5rem;
  margin-bottom: 2.4rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.fiche__titre {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  margin: 0 0 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--panel-border);
}
.fiche__liste {
  margin: 0;
  display: grid;
  /* DEUX COLONNES AU MAXIMUM, jamais trois. Un auto-fit en 320 px en
     fabriquait trois sur un grand ecran, et chaque valeur se brisait
     alors sur deux lignes — « PS5 · PS5 Pro · Xbox / Series X|S ».
     Une fiche dont les valeurs se cassent n'est plus une fiche. */
  grid-template-columns: 1fr;
  gap: 0.15rem 3rem;
}
@media (min-width: 880px) {
  .fiche__liste { grid-template-columns: 1fr 1fr; }
}
.fiche__ligne {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(247, 236, 221, 0.055);
}
.fiche__ligne dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
  width: 10.5em;
}
.fiche__ligne dd {
  margin: 0;
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--sand);
  line-height: 1.4;
}
.fiche__ligne dd.fiche__vide {
  font-weight: 400;
  color: var(--muted);
  font-style: italic;
}
.fiche__note {
  margin: 1.2rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--panel-border);
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.55;
}

@media (max-width: 560px) {
  .fiche__ligne { flex-direction: column; gap: 0.15rem; }
  .fiche__ligne dt { width: auto; }
}

/* ------------------------------------------------------------
   PAR OU COMMENCER — les portes de l'accueil
   ------------------------------------------------------------
   Posee le 18/09/2026, quand l'accueil a ete ramene a ce qu'on
   fait — la carte, les videos, les missions, les codes — et que
   tout le reste est parti dans son onglet. Cette section est le
   carrefour qui mene aux huit autres pages.

   CE SONT DES CARTES CLIQUABLES ENTIERES, pas un titre avec un
   lien. La cible fait 100 % de la carte : sur telephone, viser un
   mot de trois lettres au pouce est un supplice.

   LE LIBELLE GRIS DIT OU MENE LA PORTE. Le visiteur sait donc
   avant de cliquer s'il change de page. C'est une information,
   pas une decoration : le jour ou une porte reste sur la meme
   page, le libelle doit disparaitre.

   PAS DE NUMEROTATION ICI, contrairement a la charte : ces neuf
   portes n'ont pas d'ordre de lecture, on entre par celle qui
   nous interesse. Les numeroter mentirait sur leur nature.
   ------------------------------------------------------------ */
.portes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1rem;
  margin-top: 1.8rem;
}
.porte {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.3rem 1.35rem 1.4rem;
  background: linear-gradient(180deg, var(--panel) 0%, var(--midnight) 100%);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}
/* Le filet de couleur ne se montre qu'au survol : neuf cartes
   soulignees en permanence feraient un jeu de cartes, pas une
   liste de portes. */
.porte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--gradient-sunset);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.porte:hover,
.porte:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(255, 61, 127, 0.45);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45);
}
.porte:hover::before,
.porte:focus-visible::before { transform: scaleX(1); }
.porte:focus-visible { outline: 2px solid var(--flamingo); outline-offset: 3px; }

.porte__ou {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.porte__titre {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.25;
  margin: 0;
  color: var(--sand);
}
.porte__promesse {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
/* La fleche dit qu'on part quelque part, sans ajouter de mot. */
.porte__titre::after {
  content: " →";
  color: var(--flamingo);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: inline-block;
}
.porte:hover .porte__titre::after,
.porte:focus-visible .porte__titre::after {
  opacity: 1;
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .porte, .porte::before, .porte__titre::after { transition: none; }
  .porte:hover, .porte:focus-visible { transform: none; }
}

/* ------------------------------------------------------------
   LES SIGNAUX D'UNE VRAIE ANNONCE — page GTA 6 sur PC
   ------------------------------------------------------------
   C'est la partie qui justifie a elle seule que « GTA 6 sur PC »
   soit une page et plus une section : partout ailleurs on repete
   « rien n'est annonce », ici on donne au visiteur de quoi
   verifier lui-meme. C'est la charte editoriale appliquee — on ne
   demande pas qu'on nous croie, on donne les moyens de controler.

   LA NUMEROTATION EST JUSTIFIEE, comme sur la charte : 01 a 04
   classent les sources de la plus officielle a la plus indirecte.
   Ce n'est pas un ordre de lecture, c'est un ordre d'autorite.

   Meme grammaire visuelle que les niveaux de la charte : filet
   colore en tete, numero en mono, nom en couleur. Deux blocs qui
   disent « voici comment on sait » doivent se ressembler.
   ------------------------------------------------------------ */
.signaux__liste {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.signal {
  background: linear-gradient(180deg, var(--panel) 0%, var(--midnight) 100%);
  border: 1px solid var(--panel-border);
  border-top: 3px solid var(--gold);
  border-radius: 12px;
  padding: 1.3rem 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.signal__no {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.signal__nom {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  margin: 0;
  color: var(--gold-bright);
}
.signal__texte {
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.55;
}
.signal__texte a { color: var(--aqua); }

/* Le contrepoint : ce qui ne compte pas. Un filet rouge a gauche,
   pas un encadre — c'est un avertissement, pas une carte de plus. */
.signaux__note {
  margin: 1.6rem 0 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--flamingo);
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.6;
  max-width: 78ch;
}

@media (max-width: 640px) {
  .signal { padding: 1.2rem; }
}

/* La liste des consequences, sur la page des codes. Une liste a puces
   dans un encadre dore : ce que tricher coute vraiment, et que les
   listes de codes oublient toujours de mentionner. */
.codes-consequences {
  margin: 0.9rem 0 1rem;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}
.codes-consequences li::marker { color: var(--gold); }
.codes-consequences strong { color: var(--sand); }

/* ------------------------------------------------------------
   « MISE A JOUR LE… » — la date de fraicheur de chaque page
   ------------------------------------------------------------
   Prise a GTABase, qui l'affiche en tete de chacune de ses bases.
   C'est le signal de fraicheur le plus simple qui existe, et il a
   un effet secondaire vertueux : une date visible oblige a tenir
   les pages a jour pour de vrai.

   ELLE N'EST PAS ECRITE A LA MAIN. Elle vient de `git log`, via
   le script dater.pl a relancer avant chaque mise en ligne. Une
   date tapee au clavier ment des la modification suivante — on
   corrige un paragraphe, on oublie la date, et la page annonce
   une fraicheur qu'elle n'a pas.

   DISCRETE PAR CHOIX : c'est une mention de service, pas une
   information de la page. Elle ferme le contenu, elle ne l'ouvre
   pas, et elle ne doit jamais peser plus lourd qu'un titre.
   ------------------------------------------------------------ */
.maj-page {
  max-width: 1240px;
  margin-inline: auto;
  padding: 1.6rem clamp(1.25rem, 4vw, 2.5rem) 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  opacity: 0.75;
}

/* ==========================================================
   LES DRAPEAUX DU SELECTEUR DE LANGUE
   ==========================================================
   Demandes par Raf le 19 septembre 2026.

   PAS D'EMOJI, ET C'EST LA RAISON PRINCIPALE DE CE BLOC.
   Les emojis drapeaux (U+1F1EB U+1F1F7) n'existent dans AUCUNE police
   livree avec Windows : le systeme affiche a la place les deux lettres
   « FR », « GB », « ES ». Un visiteur sur Windows — la majorite — ne
   verrait donc pas de drapeau du tout. Sur Mac et Android ils
   s'affichent, ce qui rend le defaut d'autant plus vicieux : on ne le
   voit pas depuis la machine ou on developpe si elle n'est pas Windows.

   DESSINES ICI, EN data: URI, UNE SEULE FOIS. Trois SVG minuscules
   ecrits dans la feuille de style plutot que repetes dans le HTML : le
   selecteur apparait quatre fois par page sur vingt et une pages, soit
   quatre-vingt-quatre fois. En data: URI ils voyagent avec la feuille,
   deja mise en cache, et ne coutent aucune requete.

   QUEL DRAPEAU POUR L'ANGLAIS : le Royaume-Uni. C'est l'usage en
   Europe pour « English ». Les hreflang couvrent en-GB et en-US ; si
   Raf prefere la banniere etoilee, c'est une seule ligne ci-dessous.
   ========================================================== */
.drapeau {
  display: inline-block;
  width: 18px; height: 13px;
  margin-right: .5em;
  vertical-align: -1px;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  /* un filet sombre : sans lui, le blanc du drapeau francais et celui
     de l'Union Jack se fondent dans le panneau clair du menu */
  box-shadow: 0 0 0 1px rgba(0,0,0,.35);
  flex: none;
}
.drapeau--fr {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23002654' d='M0 0h1v2H0z'/%3E%3Cpath fill='%23fff' d='M1 0h1v2H1z'/%3E%3Cpath fill='%23ED2939' d='M2 0h1v2H2z'/%3E%3C/svg%3E");
}
.drapeau--en {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath fill='%23012169' d='M0 0h60v30H0z'/%3E%3Cpath stroke='%23fff' stroke-width='6' d='M0 0l60 30m0-30L0 30'/%3E%3Cpath stroke='%23C8102E' stroke-width='4' d='M0 0l60 30m0-30L0 30'/%3E%3Cpath stroke='%23fff' stroke-width='10' d='M30 0v30M0 15h60'/%3E%3Cpath stroke='%23C8102E' stroke-width='6' d='M30 0v30M0 15h60'/%3E%3C/svg%3E");
}
.drapeau--es {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23AA151B' d='M0 0h3v2H0z'/%3E%3Cpath fill='%23F1BF00' d='M0 .5h3v1H0z'/%3E%3C/svg%3E");
}
/* Dans le bouton, le drapeau precede « FR · Francais » : on l'aligne
   sur la ligne de texte plutot que sur le bas de la boite. */
.lang-btn .drapeau { vertical-align: -2px; }
.lang-menu a { display: flex; align-items: center; }

/* ==========================================================
   LE VRAI LOGO YOUTUBE
   ==========================================================
   Demande par Raf le 19 septembre 2026 : le rouge officiel, pas une
   silhouette au trait.

   ON NE LE RECOLORE PAS, ET CE N'EST PAS UN CAPRICE. La charte de
   marque de YouTube autorise l'icone pour pointer vers une chaine —
   c'est exactement notre cas — a condition de ne pas la deformer ni la
   teinter. Ses couleurs sont donc ecrites en dur dans le SVG et non en
   currentColor : aucun survol, aucun theme ne peut les changer.
   ========================================================== */
.yt-logo {
  width: 20px; height: 20px;
  flex: none;
  display: inline-block;
  vertical-align: -4px;
}
.footer__social a .yt-logo { width: 19px; height: 19px; vertical-align: 0; }
/* Le bouton d'abonnement porte le logo devant son libelle. L'ecart est
   celui d'un mot, pas d'une icone collee au texte. */
.btn .yt-logo { margin-right: .5em; }