/* Incarnez — habillage haute fidélité (design-export/design_handoff_incarnez).
   Recréation en classes réelles des maquettes Claude Design (v1 + variantes
   v2 1a/1e retenues). Mobile-first strict : base 360px, media queries en
   min-width uniquement. Aucun style inline dans les gabarits : tout vit ici. */

@font-face {
  font-family: "Syne";
  src: url("/static/fonts/syne-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Syne";
  src: url("/static/fonts/syne-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/static/fonts/instrument-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/static/fonts/instrument-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/static/fonts/instrument-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/static/fonts/martian-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/static/fonts/martian-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Couche univers (ciels, silhouettes) */
  --nuit: #1B1030;
  --violet-profond: #4A1F7A;
  --magenta: #D8348F;
  --orange-horizon: #F58B4C;
  --sable-rose: #F9C1CF;
  --ciel-degrade: linear-gradient(180deg, #1B1030 0%, #4A1F7A 38%, #D8348F 72%, #F58B4C 100%);

  /* Couche document (contenu, outils) */
  --ink: #141B33;
  --paper: #F5F8FC;
  --sky: #DCE8F6;
  --line: #B7C9E2;
  --holo: #6C4CE0;
  --holo-2: #21C0D6;
  --ok: #1E8E5A;
  --warn: #C8322B;
  --muted: #5B6478;
  --blanc: #FFFFFF;
  --placeholder: #9AA5B8;
  --photo-fond: #C9D6E8;
  --photo-forme: #9AA9C2;

  --degrade-holo: linear-gradient(135deg, #6C4CE0, #21C0D6);
  --degrade-cta: linear-gradient(135deg, #F9C1CF, #F58B4C);
  --degrade-cta-hover: linear-gradient(135deg, #FBD4DE, #F7A06D);

  --font-display: "Syne", "Arial Black", sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "Martian Mono", "Courier New", monospace;

  --radius-carte: 12px;
  --radius-carte-grande: 14px;
  --radius-bouton: 9px;
  --radius-input: 8px;
  --radius-recherche: 10px;
  --radius-pastille: 999px;

  --ombre-carte-perso: 0 14px 36px rgba(20, 27, 51, .18);
  --ombre-carte: 0 8px 24px rgba(20, 27, 51, .1);
  --ombre-bouton-ciel: 0 8px 24px rgba(27, 16, 48, .45);

  --container-max: 1160px;
  --page-pad: 16px;
}

@media (min-width: 640px) { :root { --page-pad: 20px; } }
@media (min-width: 900px) { :root { --page-pad: 40px; } }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

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

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

a { color: var(--holo); text-decoration: none; }
a:hover, a:focus-visible { color: var(--violet-profond); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: 28px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
h2 { font-size: 24px; line-height: 1.15; margin-top: 2rem; }
h3 { font-size: 19px; }

@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  h3 { font-size: 21px; }
}

p { margin: 0 0 1em; }

.lead {
  font-size: 18px;
  line-height: 1.5;
  color: var(--muted);
}
@media (min-width: 768px) { .lead { font-size: 20px; } }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--page-pad) 48px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Les enfants de grille (cartes, MRZ nowrap) doivent pouvoir se réduire
   sous leur largeur de contenu minimale : évite tout débordement horizontal. */
.card, .server-grid > *, .pillars > *, .lexique-liste > *, .exemples-grid > *,
.filtres, .faits-cles, .chronologie > li, .soeurs > *,
.hero-accueil__grille > *, .hero-gta6__grille > *, .corps-deux-colonnes > *,
.corps-deux-colonnes__principal > *, .fiche-serveur__grille > *, .actus-grid > *,
.compte-rebours__blocs > *, .card__stats > *, .savoir-grille > *,
.filtres__pastilles > *, .badges > * { min-width: 0; }

/* --- Ligne MRZ (élément signature) --- */
.mrz {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  margin: 0 0 .6em;
}
@media (max-width: 767.98px) { .mrz { font-size: 10px; } }
.mrz--claire { color: rgba(249, 193, 207, .85); }
/* Les statistiques de carte reprennent la fonte MRZ mais doivent pouvoir se replier. */
.card__stats { white-space: normal; overflow: visible; }
.card__stats dd { overflow-wrap: anywhere; }

/* --- Barre de navigation --- */
.site-header {
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg, #4A1F7A, #D8348F, #F58B4C);
}
.site-header__inner {
  max-width: var(--container-max);
  height: 56px;
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
  flex: none;
}
.logo:hover, .logo:focus-visible { color: var(--ink); }
.logo__holo { position: relative; display: inline-block; }
.logo__holo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: var(--degrade-holo);
  border-radius: 2px;
}

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex: none;
}
.burger__bar {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
}

.nav {
  display: none;
  flex-direction: column;
  gap: 4px;
}
.nav a {
  display: block;
  padding: 12px 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  min-height: 44px;
}
.nav a:hover, .nav a:focus-visible { color: var(--holo); }
.nav a[aria-current="page"] {
  border-bottom-color: #D8348F;
  color: var(--ink);
  font-weight: 600;
}

.site-header__actions { display: none; }

.site-header--open .nav {
  display: flex;
  position: absolute;
  left: 0; right: 0; top: 56px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 8px var(--page-pad) 16px;
  z-index: 19;
}

@media (min-width: 768px) {
  .burger { display: none; }
  .nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    position: static;
    padding: 0;
    border: 0;
    background: none;
  }
  .nav a {
    padding: 8px 3px;
    min-height: auto;
    font-size: 13px;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
  }
  .site-header__actions { display: flex; align-items: center; }
  .site-header__actions .btn-primary { padding: 9px 12px; font-size: 12px; white-space: nowrap; }
}
@media (min-width: 1024px) {
  .nav { gap: 28px; }
  .nav a { padding: 8px 2px; font-size: 14px; }
  .site-header__actions .btn-primary { padding: 12px 20px; font-size: 15px; }
}

/* --- Boutons --- */
.btn-primary, .btn-secondary, .btn-texte {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: var(--radius-bouton);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  line-height: 1.1;
}
.btn-primary {
  background: var(--degrade-cta);
  color: var(--ink);
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(27, 16, 48, .25);
  transition: transform .15s ease;
}
.btn-primary:hover, .btn-primary:focus-visible { color: var(--ink); background: var(--degrade-cta-hover); transform: translateY(-1px); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-secondary:hover, .btn-secondary:focus-visible { color: var(--holo); border-color: var(--holo); }
.btn-texte {
  min-height: auto;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 14px;
}
.btn-texte:hover, .btn-texte:focus-visible { color: var(--ink); }

/* Boutons sur fond ciel (hero) */
.ciel .btn-primary { box-shadow: var(--ombre-bouton-ciel); }
.ciel .btn-secondary {
  color: #fff;
  border-color: #fff;
  background: rgba(27, 16, 48, .35);
}
.ciel .btn-secondary:hover, .ciel .btn-secondary:focus-visible {
  color: #fff;
  border-color: #fff;
  background: rgba(27, 16, 48, .55);
}

input:focus-visible, select:focus-visible, textarea:focus-visible,
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: none;
  border-color: var(--holo);
  box-shadow: 0 0 0 3px rgba(108, 76, 224, .18);
}

/* =========================================================================
   Cartes (format carte bancaire, README §Cartes)
   ========================================================================= */
.card {
  position: relative;
  display: block;
  aspect-ratio: 1.586;
  width: 100%;
  container-type: inline-size;
  background-color: var(--sky);
  background-image:
    repeating-radial-gradient(circle at 28% 40%, rgba(183, 201, 226, .55) 0 .6px, transparent 1px 8px),
    repeating-radial-gradient(circle at 74% 66%, rgba(183, 201, 226, .55) 0 .6px, transparent 1px 9px);
  border: 1px solid var(--line);
  border-radius: var(--radius-carte);
  overflow: hidden;
  box-shadow: var(--ombre-carte);
  color: var(--ink);
  text-decoration: none;
}
.card--grande { border-radius: var(--radius-carte-grande); box-shadow: var(--ombre-carte-perso); }
.card--personnage { box-shadow: var(--ombre-carte-perso); }

.card__holo {
  position: absolute;
  top: 5cqw; right: -9cqw;
  width: 34cqw; height: 5cqw;
  transform: rotate(45deg);
  background: var(--degrade-holo);
  opacity: .92;
  transition: transform .35s ease;
  pointer-events: none;
}
.card:hover .card__holo, .card:focus-within .card__holo { transform: rotate(45deg) translateX(10px); }

.card__inner {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 3cqw;
  padding: 4.5cqw 5.5cqw 3.6cqw;
}
.card__titre {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 2.6cqw;
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
  margin: 0;
}
.card__kind { margin-right: 16cqw; white-space: nowrap; }
.card__mrz {
  border-top: 1px solid var(--line);
  padding-top: 2.2cqw;
  margin: 0;
  font-size: 3.05cqw;
  line-height: 1.35;
}
.card__mrz div { overflow: hidden; text-overflow: clip; white-space: nowrap; }
.card__mrz div + div { margin-top: .2em; }

/* --- Carte de personnage --- */
.card--personnage .card__corps {
  display: grid;
  grid-template-columns: 24cqw 1fr;
  gap: 5cqw;
  align-items: start;
}
.card__photo {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 2cqw;
  background: var(--photo-fond);
  border: 1px solid var(--line);
  overflow: hidden;
}
.card__photo span {
  position: absolute;
  left: 50%;
  background: var(--photo-forme);
  border-radius: 50%;
  transform: translateX(-50%);
}
.card__photo span:first-child { top: 22%; width: 34%; aspect-ratio: 1; }
.card__photo span:last-child { bottom: -18%; width: 74%; aspect-ratio: 1; }
.card__champs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6cqw 4cqw;
  margin: 0;
}
.card__champs > div { min-width: 0; }
.card__champs dt {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 2.4cqw;
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
}
.card__champs dd {
  margin: .6cqw 0 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 4cqw;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.card__champs .champ--large { grid-column: 1 / -1; }

/* Hors carte (fond papier plein, ex. générateur mobile état vide) : cqw peu
   lisible sous 320px de large réel -> clamp de sécurité en dehors du hero. */

/* --- Carte de serveur --- */
/* Hauteur automatique (pas de ratio banque-carte fixe) : un nom de serveur
   sur 2 lignes ne doit plus pousser le pied hors de la carte (QA visuelle
   2026-09-02, item 3). La carte de personnage garde son aspect-ratio. */
.card--serveur {
  aspect-ratio: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card--serveur .card__inner {
  position: static;
  display: flex;
  flex-direction: column;
}
.card__milieu { display: flex; flex-direction: column; gap: 2.4cqw; min-width: 0; justify-content: center; }
.card--serveur .card__milieu { flex: 1; }
.card--serveur .card__entete { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; flex-wrap: wrap; }
.card__soustitre { margin: 0; font-family: var(--font-mono); font-size: 2.4cqw; letter-spacing: .06em; color: var(--muted); }
.card--serveur .card__nom {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 6cqw;
  letter-spacing: -.01em;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.pastille-etat {
  display: inline-block;
  flex: none;
  padding: 1.2cqw 2.2cqw;
  border-radius: var(--radius-pastille);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 2.6cqw;
  letter-spacing: .1em;
  color: #fff;
  white-space: nowrap;
}
.pastille-etat--ok { background: var(--ok); }
.pastille-etat--muted { background: var(--muted); }

.card__stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  gap: 2cqw;
  margin: 0;
}
.card__stats > div { display: flex; flex-direction: column; gap: .4cqw; min-width: 0; }
.card__stats dt {
  font-family: var(--font-mono);
  font-size: 2.3cqw;
  letter-spacing: .1em;
  color: var(--muted);
  white-space: nowrap;
}
.card__stats dd {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 4.2cqw;
}
.card__stats dd .card__stats-total { color: var(--muted); font-weight: 400; }
.card__stats dd .card__stats-ok { color: var(--ok); }

.card__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 2.2cqw;
  margin-top: auto;
}
.card__pied .card__mrz { border: 0; padding: 0; flex: 1; min-width: 0; overflow: hidden; }
.card__actions { display: flex; gap: 8px; flex: none; }
/* Style "document" (QA visuelle 2026-09-02, item 3b) : le dégradé coucher de
   soleil reste réservé aux CTA de page, pas à ces pastilles de carte. */
.card__actions .btn-fiche, .card__actions .btn-discord {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-pastille);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  border: 1.5px solid var(--ink);
}
.card__actions .btn-fiche { background: var(--ink); color: #fff; }
.card__actions .btn-fiche:hover, .card__actions .btn-fiche:focus-visible { background: var(--holo); border-color: var(--holo); color: #fff; }
.card__actions .btn-discord { background: transparent; color: var(--ink); }
.card__actions .btn-discord:hover, .card__actions .btn-discord:focus-visible { color: var(--holo); border-color: var(--holo); }
@media (max-width: 639.98px) {
  .card__actions .btn-fiche, .card__actions .btn-discord { height: 44px; }
}

/* --- Mini-fiche de terme --- */
a.card--terme { display: block; }
.card--terme .card__nom {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 8cqw;
  line-height: 1.1;
}
.card--terme .card__def {
  margin: 0;
  font-size: 3.7cqw;
  line-height: 1.45;
  color: var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.card--terme .pastille-categorie { align-self: start; }

/* --- Carte exemple (générateur / histoires) --- */
.card--exemple {
  aspect-ratio: auto;
  height: 100%;
  padding: 5.5cqw;
  display: flex;
  flex-direction: column;
  gap: .6em;
}
.card--exemple h2, .card--exemple h3 { font-size: 1.15rem; margin: .2em 0 0; }
/* Bouton toujours aligné en bas, même si les cartes d'une même grille
   n'ont pas le même texte (QA visuelle 2026-09-02, item 4). */
.card--exemple > p:last-child { margin-top: auto; }

/* Carte de personnage isolée dans une page éditoriale (exemple annoté,
   histoire) : pas besoin de toute la largeur du texte. */
.page-editoriale__carte { max-width: 440px; margin: 24px 0; }
.card--exemple .card__inner { position: static; padding: 0; display: contents; }

/* Cartes hors contexte carte-bancaire (ratio libre, utilisées pour listes
   d'exemples) : on désactive le ratio fixe et le grid interne en absolu. */
.card--libre {
  aspect-ratio: auto;
  container-type: normal;
}
.card--libre .card__inner { position: static; inset: auto; padding: 24px; display: flex; flex-direction: column; gap: .75em; }
.card--libre .card__holo { top: 0; right: 0; width: 64px; height: 6px; transform: none; }
.card--libre:hover .card__holo, .card--libre:focus-within .card__holo { transform: translateX(6px); }

/* --- Pastilles de catégorie / badges --- */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: .5em 0; }
.badge, .pastille-categorie {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pastille);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.badge--ok { background: rgba(30, 142, 90, .12); color: var(--ok); border-color: transparent; }
.badge--muted { background: rgba(91, 100, 120, .12); color: var(--muted); border-color: transparent; }
.badge--style { background: rgba(108, 76, 224, .12); color: var(--holo); border-color: transparent; }
.badge--curated { background: rgba(33, 192, 214, .15); color: #146a76; border-color: transparent; }

/* =========================================================================
   Ciel crépuscule (hero home, bandeau GTA 6)
   ========================================================================= */
.ciel {
  position: relative;
  overflow: hidden;
  background: var(--ciel-degrade);
}
.ciel__lueur {
  position: absolute;
  bottom: -60px;
  filter: blur(20px);
  pointer-events: none;
}
.ciel__lueur--cyan { background: radial-gradient(ellipse at 50% 100%, rgba(33, 192, 214, .5), transparent 70%); }
.ciel__lueur--rose { background: radial-gradient(ellipse at 50% 100%, rgba(249, 193, 207, .6), transparent 70%); }
.ciel__lueur--accueil-gauche { left: 10%; width: 50%; height: 260px; }
.ciel__lueur--accueil-droite { right: 5%; width: 45%; height: 220px; }
.ciel__lueur--gta6-gauche { left: -5%; width: 45%; height: 220px; bottom: -40px; }
.ciel__lueur--gta6-droite { right: 0; width: 55%; height: 320px; bottom: -80px; }

.skyline {
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  width: 100%;
  height: auto;
  max-width: 100%;
  color: var(--nuit);
  pointer-events: none;
  opacity: .6; /* V2 1a/1e : silhouettes à 60 % */
  overflow: hidden;
}
.skyline rect, .skyline ellipse { fill: currentColor; }
.skyline path { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; }

.ciel__sol { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--nuit); }

.ciel__corps {
  position: relative;
  padding: 40px var(--page-pad) 64px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--sable-rose);
  margin: 0;
}

/* --- Hero home (variante 1a) --- */
.hero-accueil__grille {
  position: relative;
  display: grid;
  gap: 32px;
  align-items: center;
  padding: 36px var(--page-pad) 64px;
}
.hero-accueil__texte { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.hero-accueil__texte h1 { color: #fff; }
.hero-accueil__texte .lead { color: var(--sable-rose); max-width: 520px; }
.hero-accueil__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.hero-accueil__actions .btn-primary, .hero-accueil__actions .btn-secondary { width: 100%; text-align: center; }
.hero-accueil__carte { width: 100%; }
.hero-accueil__mrz { margin-top: 14px; }
.hero-accueil__compte { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pastille-compte {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid var(--sable-rose);
  border-radius: var(--radius-pastille);
  background: rgba(27, 16, 48, .4);
  color: var(--sable-rose);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-decoration: none;
  white-space: nowrap;
}
.pastille-compte:hover, .pastille-compte:focus-visible { color: #fff; border-color: #fff; }

@media (min-width: 900px) {
  .hero-accueil__grille { grid-template-columns: 1fr 440px; gap: 64px; padding: 72px var(--page-pad) 96px; }
  .hero-accueil__actions { flex-direction: row; }
  .hero-accueil__actions .btn-primary, .hero-accueil__actions .btn-secondary { width: auto; }
  .hero-accueil__carte {
    transform: rotate(-2deg) translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
  }
}

/* --- Piliers --- */
.pillars-section { padding: 56px var(--page-pad) 8px; display: flex; flex-direction: column; gap: 20px; }
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0;
}
.pillar-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-carte);
  text-decoration: none;
  color: var(--ink);
  background: #fff;
}
.pillar-card:hover, .pillar-card:focus-visible { border-color: var(--holo); color: var(--ink); }
.pillar-card__numero { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.pillar-card h2, .pillar-card h3 { margin: 0; font-size: 19px; }
.pillar-card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); flex: 1; }
.pillar-card__pourqui { font-size: .85rem; color: var(--muted); margin: 0; }
.pillar-card__lien { color: var(--holo); font-weight: 600; font-size: 14px; }

@media (min-width: 640px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .pillars { grid-template-columns: repeat(4, 1fr); } }

/* =========================================================================
   Compte à rebours (bandeau GTA 6)
   ========================================================================= */
.compte-rebours { display: flex; flex-direction: column; gap: 14px; }
.compte-rebours__cadre {
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid rgba(249, 193, 207, .45);
  border-radius: 12px;
  background: rgba(27, 16, 48, .35);
}
.compte-rebours__etiquette-globale {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--sable-rose);
  margin: 0;
}
.compte-rebours__valeur-simple {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .06em;
  color: #fff;
  margin: 0;
}
@media (min-width: 768px) { .compte-rebours__valeur-simple { font-size: 34px; } }

.compte-rebours__blocs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.compte-rebours__bloc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 6px;
  border: 1px solid rgba(249, 193, 207, .45);
  border-radius: 12px;
  background: rgba(27, 16, 48, .4);
  text-align: center;
}
.compte-rebours__valeur {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 22px;
  color: #fff;
}
.compte-rebours__etiquette {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--sable-rose);
}
@media (min-width: 640px) {
  .compte-rebours__blocs { gap: 10px; }
  .compte-rebours__bloc { padding: 18px 12px; }
  .compte-rebours__valeur { font-size: 40px; }
  .compte-rebours__etiquette { font-size: 10px; }
}
.compte-rebours__fin {
  margin: 0;
  padding: 16px 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: #fff;
}
.compte-rebours__secondaire {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--sable-rose);
}

/* --- Bandeau GTA 6 (variante 1e) --- */
.hero-gta6__grille {
  position: relative;
  display: grid;
  gap: 32px;
  padding: 40px var(--page-pad) 56px;
}
.hero-gta6__texte { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.hero-gta6__texte h1 { color: #fff; }
.hero-gta6__texte .lead { color: var(--sable-rose); max-width: 520px; margin: 0; }
.hero-gta6__reponse {
  padding: 14px var(--page-pad);
  margin: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  background: #fff;
  border-left: 4px solid var(--magenta);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
}
@media (min-width: 900px) {
  .hero-gta6__grille { grid-template-columns: 1fr 480px; gap: 64px; align-items: center; padding: 64px var(--page-pad) 72px; }
  .hero-gta6__reponse { padding: 14px var(--page-pad); }
}

/* --- Mini-hero (pages de contenu, retour propriétaire 2026-09-02) : bande
   ciel compacte qui remplace l'en-tête texte des pages éditoriales, guides,
   annuaire, lexique, actus… L'accueil et /fr/gta-6-rp/ gardent leur grand ciel.
   Hauteur FIXE (min ET max) à chaque palier : aucune page ne doit faire
   varier la hauteur de la bande (retour propriétaire). Le chapô (lead) est
   sorti du mini-hero, voir `.page-lead` plus bas. --- */
.mini-hero__skyline { opacity: .6; bottom: 6px; height: 70px; }
.mini-hero__lueur-gauche { left: -8%; width: 40%; height: 120px; bottom: -30px; }
.mini-hero__lueur-droite { right: -8%; width: 40%; height: 120px; bottom: -30px; }
.mini-hero__corps {
  position: relative;
  min-height: 188px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 18px var(--page-pad) 16px;
}
.mini-hero__corps h1 {
  color: #fff;
  margin: 0;
  font-size: 24px;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.mini-hero__corps .pastille-categorie { border-color: rgba(255, 255, 255, .5); color: #fff; }
.mini-hero__fil, .mini-hero__fil a { color: rgba(255, 255, 255, .7); margin: 0; }
.mini-hero__fil a:hover, .mini-hero__fil a:focus-visible { color: #fff; }
@media (min-width: 768px) {
  .mini-hero__corps { min-height: 200px; padding: 28px var(--page-pad) 24px; }
  .mini-hero__corps h1 { font-size: 28px; }
}
@media (min-width: 1024px) {
  .mini-hero__corps { min-height: 236px; padding: 36px var(--page-pad) 30px; }
  .mini-hero__corps h1 { font-size: 40px; }
}
.mini-hero + .container, .mini-hero + .page-lead { padding-top: 24px; }

/* --- Chapô de page (README « lead ») : sorti du mini-hero, affiché sur
   papier juste en dessous, avant la date de mise à jour. --- */
.page-lead {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 24px var(--page-pad) 0;
  box-sizing: border-box;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(20, 27, 51, .8);
}
.page-lead + .container { padding-top: 16px; }

/* --- Corps sur papier (GTA6, lexique terme…) : deux colonnes + sidebar sticky --- */
.corps-deux-colonnes {
  display: grid;
  gap: 40px;
  padding-top: 8px;
}
.corps-deux-colonnes__principal { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.corps-deux-colonnes__aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 1000px) {
  .corps-deux-colonnes { grid-template-columns: minmax(0, 720px) 300px; gap: 80px; justify-content: space-between; }
  .corps-deux-colonnes__aside { position: sticky; top: 76px; align-self: start; }
  .corps-deux-colonnes--gta6 { grid-template-columns: minmax(0, 720px) 320px; }
}
@media (min-width: 900px) {
  .corps-deux-colonnes--generateur { grid-template-columns: minmax(0, 1fr) 520px; gap: 48px; }
}

.aside-titre {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--muted);
  margin: 0 0 4px;
}

/* --- Faits clés / Ce qu'on sait / ne sait pas --- */
.faits-cles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 24px 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-carte);
  overflow: hidden;
}
.faits-cles > div { padding: 18px 20px; border-bottom: 1px solid var(--line); }
.faits-cles > div:last-child { border-bottom: 0; }
.faits-cles dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); margin: 0 0 4px; }
.faits-cles dd { margin: 0; font-weight: 600; }
.faits-cles dd.faits-cles--ok { color: var(--ok); }
@media (min-width: 640px) {
  .faits-cles { grid-template-columns: 1fr 1fr; }
  .faits-cles > div:nth-child(odd) { border-right: 1px solid var(--line); }
}

.savoir-grille {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius-carte);
  overflow: hidden;
  background: #fff;
  margin: 24px 0;
}
.savoir-colonne { padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.savoir-colonne:first-child { border-bottom: 1px solid var(--line); }
.savoir-colonne__etiquette { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; margin: 0; }
.savoir-colonne--sait .savoir-colonne__etiquette { color: var(--ok); }
.savoir-colonne--sait-pas .savoir-colonne__etiquette { color: var(--warn); }
.savoir-liste { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.5; }
.savoir-liste li { display: flex; gap: 10px; }
.savoir-liste li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; margin-top: 8px; }
.savoir-colonne--sait .savoir-liste li::before { background: var(--ok); }
.savoir-colonne--sait-pas .savoir-liste li::before { background: var(--warn); }
@media (min-width: 640px) {
  .savoir-grille { grid-template-columns: 1fr 1fr; }
  .savoir-colonne:first-child { border-bottom: 0; border-right: 1px solid var(--line); }
}

/* --- Encadré (résumé, prose) --- */
.encadre {
  background: var(--sky);
  border: 1px solid var(--line);
  border-radius: var(--radius-carte);
  padding: 20px;
  margin: 24px 0;
}
.encadre h2 { margin-top: 0; font-size: 19px; }
.encadre--blanc { background: #fff; }
.encadre ul, .encadre ol { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }

/* --- Chronologie --- */
.chronologie { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.chronologie li { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.chronologie .mrz { margin: 0; }
.chronologie__date { font-family: var(--font-mono); font-weight: 600; font-size: 15px; color: var(--ink); }
.chronologie__corps { display: flex; flex-direction: column; gap: 4px; }
.chronologie__corps p { margin: 0; color: var(--muted); }
@media (min-width: 640px) {
  .chronologie li { grid-template-columns: 160px 1fr; align-items: start; gap: 16px; }
}

/* --- FAQ --- */
.faq { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq > div { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq dt { font-weight: 600; font-size: 17px; margin: 0 0 6px; }
.faq dd { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }

/* --- Pages sœurs / annexes --- */
.soeurs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.soeurs a {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-carte);
  text-decoration: none;
  color: var(--ink);
}
.soeurs a:hover, .soeurs a:focus-visible { border-color: var(--holo); }
.soeurs h2, .soeurs h3 { margin: 0; font-size: 18px; }
.soeurs p { margin: 0; font-size: 14px; color: var(--muted); }

.encart-candidature {
  background: var(--sky);
  border: 1px solid var(--line);
  border-radius: var(--radius-carte);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.encart-candidature h2 { margin: 0; font-size: 18px; }

.termes-lies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.termes-lies li { border-bottom: 1px solid var(--line); padding: 14px 0; }
.termes-lies a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--ink); }
.termes-lies a:hover .termes-lies__terme, .termes-lies a:focus-visible .termes-lies__terme { color: var(--holo); }
.termes-lies__terme { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.termes-lies__categorie { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.termes-lies--pastilles { flex-direction: row; flex-wrap: wrap; gap: 8px; border-top: 0; }
.termes-lies--pastilles li { border-bottom: 0; padding: 0; }
.termes-lies--pastilles a {
  flex-direction: row;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pastille);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
}
.termes-lies--pastilles .termes-lies__categorie { display: none; }
.termes-lies-mobile { margin: 8px 0 0; }
.termes-lies-desktop { display: none; }
@media (min-width: 1000px) {
  .termes-lies-mobile { display: none; }
  .termes-lies-desktop { display: block; }
}

/* --- Citations en prose (ex. réplique « En situation » du lexique) --- */
blockquote {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-carte);
  padding: 18px 22px;
  margin: 16px 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
}
blockquote p:last-child { margin-bottom: 0; }

/* --- Bloc en situation (citation) --- */
.bloc-situation { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-carte); padding: 20px 24px; margin: 16px 0; }
.bloc-situation__replique { font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.45; margin: 0 0 8px; }
.bloc-situation__note { font-size: 15px; color: var(--muted); margin: 0; }

/* --- Deux listes de serveurs (home) : avec whitelist / sans whitelist --- */
.serveurs-top__grille { display: flex; flex-direction: column; gap: 32px; margin-top: 12px; }
.serveurs-top__colonne { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pedagogie-whitelist { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 4px 0 4px; }
.pedagogie-whitelist a { font-weight: 600; }
.serveurs-top__colonne h3 { margin: 0 0 4px; }
.serveurs-top__colonne .server-grid { grid-template-columns: 1fr; }
@media (min-width: 520px) { .serveurs-top__colonne .server-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .serveurs-top__grille { flex-direction: row; gap: 40px; } .serveurs-top__colonne { flex: 1; } }

/* --- Grille de serveurs --- */
.server-grid {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
}
.server-grid > li { display: flex; }
@media (min-width: 640px) { .server-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (min-width: 1100px) { .server-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- Recherche par nom (annuaire, QA adverse 2026-09-02 item K) --- */
.filtres__recherche {
  display: flex;
  gap: 10px;
  margin: 20px 0 0;
}
.filtres__recherche input[type="search"] {
  flex: 1;
  min-width: 0;
}

/* --- Barre de filtres (annuaire) --- */
.filtres {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-carte);
  margin: 20px 0;
}
.filtres__groupe { display: flex; flex-direction: column; gap: 8px; }
.filtres__etiquette {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
}
.filtres__explication { margin: -2px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.filtres__pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pastille);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.pastille:hover, .pastille:focus-visible { border-color: var(--holo); color: var(--holo); }
.pastille[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filtres__compteur {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted);
  text-transform: uppercase;
  margin: 0;
}
@media (min-width: 768px) {
  .filtres { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; }
  .filtres__groupe--tri { margin-left: auto; align-items: flex-end; }
}

/* --- Voir aussi (annuaire, page 1) --- */
.voir-aussi { margin: 32px 0; }
.voir-aussi ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.voir-aussi a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pastille);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.voir-aussi a:hover, .voir-aussi a:focus-visible { border-color: var(--holo); color: var(--holo); }

/* --- Formulaires --- */
.formulaire, .generateur__form, .generateur-noms__form {
  display: grid;
  gap: 16px;
}
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ--large { grid-column: 1 / -1; }
.champ--case { flex-direction: row; align-items: center; }
label { font-weight: 600; font-size: .95rem; }
.champ:not(.champ--case) > label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
input, select, textarea { font-size: 16px; }

input[type="text"], input[type="email"], input[type="url"], input[type="number"],
input[type="search"], select, textarea {
  min-height: 44px;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
}
input[type="search"] { border-radius: var(--radius-recherche); padding: 14px 16px; font-size: 17px; }
::placeholder { color: var(--placeholder); opacity: 1; }
textarea { min-height: 96px; }
.champ--honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.erreur-champ { color: var(--warn); font-size: .875rem; margin: 0; }
.erreur { color: var(--warn); }
.confirmation { color: var(--ok); font-weight: 600; }

/* --- Générateur candidature / histoire --- */
.avertissement {
  background: rgba(200, 50, 43, .08);
  border: 1px solid rgba(200, 50, 43, .3);
  border-radius: var(--radius-input);
  padding: 12px 16px;
  color: var(--warn);
  margin: 16px 0;
}
.generateur { display: flex; flex-direction: column; gap: 24px; }
.generateur__form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-carte); padding: 24px; }
.generateur__apercu { display: flex; flex-direction: column; gap: 16px; }
.generateur__apercu--partage { max-width: 620px; margin: 0 auto; }
.generateur__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.generateur__actions .btn-primary { flex: 1; }
.generateur__apercu-etiquette {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
  margin: 8px 0 0;
}
.document {
  border: 1px solid var(--line);
  border-radius: var(--radius-carte);
  padding: 24px;
  background: #fff;
}
.document__entete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 14px; }
.document__titre { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin: 0; }
.document__date { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.document__vide { color: var(--muted); text-align: center; padding: 48px 0; margin: 0; }
.document .mrz { margin: 1.25em 0 .3em; }
.document .mrz:first-child { margin-top: 0; }
.document h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; margin: 0 0 .4em; }
.document p { font-size: 15px; line-height: 1.55; }
.statut { color: var(--ok); min-height: 1.2em; font-size: .9rem; }

@media (min-width: 900px) {
  .corps-deux-colonnes--generateur .generateur__apercu { position: sticky; top: 24px; }
}

/* --- Navigation mobile formulaire <-> aperçu (chantier générateur mobile
   2026-09-02) : bouton "Modifier" en tête d'aperçu (focus premier champ
   vide), bouton sticky en bas devenu primaire avec compteur de champs
   restants ("Voir l'aperçu · 6 à compléter"). --- */
.generateur__entete, .generateur__apercu-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.generateur__entete-titre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.generateur-sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 15;
  padding: 10px var(--page-pad);
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(20, 27, 51, .12);
}
.generateur-sticky-cta .btn-primary { display: flex; width: 100%; min-height: 44px; }
.page-generateur { padding-bottom: 76px; }
@media (min-width: 900px) {
  .generateur-sticky-cta { display: none; }
  .page-generateur { padding-bottom: 48px; }
}

/* Lien "[à compléter]" (chaque champ manquant du texte généré) : cliquable,
   ramène au champ et le surligne 1,5 s. */
.lien-a-completer {
  color: var(--warn);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.lien-a-completer:hover, .lien-a-completer:focus-visible { color: var(--holo); }
.champ--surligne { animation: surlignage-champ 1.5s ease-out; border-radius: var(--radius-input); }
.champ--surligne input, .champ--surligne select, .champ--surligne textarea {
  outline: 3px solid var(--holo);
  outline-offset: 2px;
}
@keyframes surlignage-champ {
  0% { background: rgba(108, 76, 224, .16); }
  100% { background: transparent; }
}

/* --- Lien de partage --- */
.partage { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.partage h2 { margin: 0; font-size: 18px; }
.partage__aide { margin: 0; font-size: 14px; color: var(--muted); }
.partage__resultat { display: flex; flex-direction: column; gap: 8px; padding: 16px; margin-top: 4px; background: var(--sky); border: 1px solid var(--line); border-radius: var(--radius-input); }
.partage__champ-label { margin: 6px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.partage__lien { margin: 0; word-break: break-all; font-size: 14px; }
.partage__lien a { color: var(--holo); }
.partage__lien--suppr a { color: var(--warn); }
.partage__avertissement { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--warn); }
.partage--envoi { border-top: none; padding-top: 0; margin-top: 24px; }
.partage__repli { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.partage__repli > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.partage__repli dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.partage__repli dd { margin: 0; font-weight: 600; text-align: right; }

/* --- Générateur de noms --- */
.generateur-noms { display: flex; flex-direction: column; gap: 20px; }
.generateur-noms__form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-carte); padding: 20px; }
.generateur-noms__actions { grid-column: 1 / -1; }
.resultats-noms { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.resultats-noms li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  background: #fff;
  font-family: var(--font-mono);
}

@media (min-width: 900px) {
  .generateur-noms__form { grid-template-columns: repeat(4, 1fr); align-items: end; }
}

/* --- Lexique --- */
.lexique-recherche { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.lexique-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
.lexique-item[hidden] { display: none; }
.lexique-liste--liens { grid-template-columns: 1fr; gap: 0; }
@media (min-width: 640px) { .lexique-liste:not(.lexique-liste--liens) { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .lexique-liste:not(.lexique-liste--liens) { grid-template-columns: repeat(3, 1fr); } }

/* --- Éditorial --- */
.page-cta { margin-top: 2rem; }
.bloc-annote { border-left: 3px solid var(--holo-2); padding-left: 16px; margin: 1.5rem 0; }
.bloc-annote__note { color: var(--muted); font-size: .9rem; }
.exemples-grid { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 16px; align-items: stretch; }
.exemples-grid > li { display: flex; }
@media (min-width: 640px) { .exemples-grid { grid-template-columns: 1fr 1fr; } }

.fiche-serveur__grille { display: flex; flex-direction: column; gap: 32px; margin-bottom: 32px; }
.fiche-serveur__carte { display: flex; flex-direction: column; gap: 8px; }
.fiche-serveur__texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
@media (min-width: 1000px) { .fiche-serveur__grille { flex-direction: row; align-items: start; gap: 56px; } .fiche-serveur__carte { flex: 0 0 min(560px, 45%); } .fiche-serveur__texte { flex: 1; } }

.graphique-historique { width: 100%; height: 160px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-input); }
.graphique-historique__legende { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; margin: 8px 0 0; }

.fiche-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.5rem 0; }

.etat-vide { color: var(--muted); font-style: italic; }

.fil-ariane { font-size: 13px; color: var(--muted); margin: 16px 0 0; }
.fil-ariane a { color: var(--muted); }
.fil-ariane a:hover { color: var(--holo); }

/* --- Actus --- */
.actus-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 20px 0; }
@media (min-width: 640px) { .actus-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .actus-grid { grid-template-columns: repeat(3, 1fr); } }
.actus-card { border: 1px solid var(--line); border-radius: var(--radius-carte); overflow: hidden; background: #fff; }
.actus-card__lien { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); height: 100%; }
.actus-card__hero { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 42%; }
.actus-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px; flex: 1; }
.actus-card__body h3 { margin: 0; font-size: 18px; }
.actus-card__body p { margin: 0; font-size: 14px; color: var(--muted); }
.actus-card__date { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); margin-top: auto !important; }
.actus-card__mrz { margin: 0; }
.actus-article__meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.actus-article__hero { display: block; width: 100%; height: auto; border-radius: var(--radius-carte); margin: 16px 0; }
.actus-article__corps { font-size: 16px; line-height: 1.65; }
.actus-article__corps h2 { margin-top: 2em; }
.actus-sources { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
/* Mobile (retour propriétaire) : une seule ligne ‹ / « Page X sur Y » / ›,
   flèches carrées 44×44, les numéros n'apparaissent qu'à partir de 640px. */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 32px 0; font-size: 14px; }
.pagination a { color: var(--holo); text-decoration: none; }
.pagination__compteur { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.pagination__nombres { display: none; flex-wrap: wrap; align-items: center; gap: 6px; }
.pagination__pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pastille);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.pagination__pastille:hover, .pagination__pastille:focus-visible { border-color: var(--holo); color: var(--holo); }
.pagination__pastille--courante { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pagination__pastille--desactivee { opacity: .4; pointer-events: none; }
.pagination__ellipse { padding: 0 4px; color: var(--muted); }
.pagination__fleche { width: 44px; padding: 0; gap: 0; flex: none; font-size: 20px; line-height: 1; }
.pagination__fleche-texte { display: none; }
@media (min-width: 640px) {
  .pagination__compteur { display: none; }
  .pagination__nombres { display: flex; }
  .pagination__fleche { width: auto; padding: 0 16px; font-size: 14px; }
  .pagination__fleche-icone { display: none; }
  .pagination__fleche-texte { display: inline; }
}

/* --- SEO intros --- */
.seo-intro { margin: 2.5rem auto; }
.seo-intro h2 { margin-top: 0; }
.seo-intro h3 { font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 1.25em; }

#histoire-sortie h2 { margin-top: 0; }
#histoire-sortie h3 { font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 1.25em; }

/* --- Boutique affiliée --- */
.boutique-disclosure { font-size: 13px; color: var(--muted); margin: -8px 0 24px; }
.produits-grid { list-style: none; margin: 16px 0 32px; padding: 0; display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .produits-grid { grid-template-columns: 1fr 1fr; } }
.produit-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-carte); overflow: hidden; background: #fff; height: 100%; }
.produit-card__img-lien { display: block; }
.produit-card__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: var(--photo-fond); }
.produit-card__corps h2 a.produit-card__titre-lien { color: var(--ink); text-decoration: none; }
.produit-card__corps h2 a.produit-card__titre-lien:hover, .produit-card__corps h2 a.produit-card__titre-lien:focus-visible { color: var(--holo); }
.produit-card__corps { display: flex; flex-direction: column; gap: 10px; padding: 20px; flex: 1; }
.produit-card__corps h2 { margin: 0; font-size: 19px; }
.produit-card__note { font-size: 13px; color: var(--muted); margin: 0; }
.produit-card__rp { background: var(--sky); border-radius: var(--radius-input); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.produit-card__rp-etiquette { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.produit-card__rp p:not(.produit-card__rp-etiquette) { margin: 0; font-size: 14px; color: var(--ink); }
.produit-card__cta { text-align: center; margin-top: 4px; }
.bloc-tous-produits { background: var(--sky); border: 1px solid var(--line); border-radius: var(--radius-carte); padding: 20px; margin: 24px 0; }
.bloc-tous-produits h2 { margin-top: 0; }

/* --- Accroche de la fiction administrative (home) + sections GTA 6 des piliers --- */
.accroche { font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em; color: var(--sable-rose); margin: 0; }
.section--gta6 { margin-top: 40px; padding: 20px; border: 1px solid var(--line); border-left: 4px solid var(--holo); border-radius: var(--radius-carte); background: #fff; }
.section--gta6 h2 { margin-top: .25em; }
@media (min-width: 768px) { .section--gta6 { padding: 28px; } }

/* --- Footer --- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
}
.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.site-footer__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.site-footer__logo { color: #fff; }
.site-footer__logo:hover, .site-footer__logo:focus-visible { color: #fff; }
.site-footer__disclaimer { margin: 0; font-size: 13px; line-height: 1.5; color: var(--line); max-width: 320px; }
.site-footer__nav { display: flex; flex-direction: column; gap: 10px; font-size: 13px; font-weight: 500; }
.site-footer__nav a { color: var(--paper); text-decoration: none; }
.site-footer__nav a:hover, .site-footer__nav a:focus-visible { color: var(--holo-2); }
.site-footer__separateur { display: block; height: 1px; background: var(--muted); margin: 4px 0; }
.site-footer__meta { margin: 0; font-size: 12px; color: var(--line); }

@media (min-width: 768px) {
  .site-footer__inner {
    padding: 40px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 40px;
    align-items: start;
  }
}

/* Refus de mesure d'audience (page confidentialité) */
.mesure-audience-controle { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* Ligne du préchargement (bandeau GTA 6) : une seule ligne en desktop, repli autorisé en mobile. */
@media (min-width: 1024px) { .compte-rebours__secondaire { white-space: nowrap; font-size: 12px; letter-spacing: .08em; } }

/* Grand écran : le contenu des ciels reste borné comme le reste de la page (retour propriétaire). */
.hero-accueil__grille, .hero-gta6__grille { max-width: var(--container-max, 1180px); margin-left: auto; margin-right: auto; }
/* Mini-hero : le contenu s'aligne sur le conteneur de la page (retour propriétaire). */
.mini-hero__corps { max-width: var(--container-max); margin-left: auto; margin-right: auto; box-sizing: border-box; }
/* Bandeau GTA 6 : skyline complète comme l'accueil, mais plus basse et plus discrète pour ne pas concurrencer le titre et les chronos. */
.hero-gta6 .skyline { height: 150px; opacity: .45; }
@media (min-width: 1024px) { .hero-gta6 .skyline { height: 190px; } }

/* --- Retouches propriétaire (nuit) --- */
[hidden] { display: none !important; }
/* Menu mobile : le CTA vit dans le menu déroulant, le bouton du header prend le relais dès 900 px. */
.nav__cta-mobile { margin: 8px var(--page-pad) 12px; text-align: center; }
@media (min-width: 900px) { .nav__cta-mobile { display: none; } }
/* Bande « Réponse courte » : texte aligné sur le conteneur, respiration avant le corps. */
.hero-gta6__reponse { padding-left: max(var(--page-pad), calc((100% - var(--container-max)) / 2 + var(--page-pad))); margin-bottom: 28px; }
/* Accueil : les deux listes restent alignées ligne à ligne (nom sur une ligne, hauteur commune). */
.serveurs-top .card--serveur .card__nom { -webkit-line-clamp: 1; line-clamp: 1; }
.serveurs-top .card--serveur { min-height: 178px; }
/* Page partagée : le bouton Envoyer à droite du champ. */
@media (min-width: 480px) {
  #form-envoi-mail .champ-mail { display: flex; align-items: flex-end; gap: 10px; }
  #form-envoi-mail .champ-mail > div { flex: 1; }
  #form-envoi-mail #btn-envoyer-mail { flex: none; height: 46px; }
}
/* Le CTA du menu mobile ne doit jamais apparaître en desktop (spécificité des règles .nav a). */
@media (min-width: 768px) { .nav .nav__cta-mobile, .nav a.nav__cta-mobile { display: none !important; } }

/* --- Boutique : bloc précommande --- */
.precommandes { margin: 36px 0; }
.carte-precommande { padding: 22px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--magenta); border-radius: var(--radius); }
.carte-precommande h3 { margin-top: 0; }
.carte-precommande__rp { color: var(--muted); }
.carte-precommande__note { margin-bottom: 0; font-size: 14px; color: var(--muted); }

/* --- Vidéo officielle (façade : rien n'est chargé avant le clic) --- */
.video-officielle { margin: 28px 0; }
.video-officielle__cadre {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ciel-degrade);
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-officielle__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-officielle__lecture {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 14px 24px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: var(--degrade-cta);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(27, 16, 48, .45);
}
.video-officielle__lecture:hover, .video-officielle__lecture:focus-visible { transform: translateY(-1px); }
.video-officielle__triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--ink);
}
.video-officielle figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* --- Boutique : bloc précommande --- */
.precommandes { margin: 36px 0; }
.carte-precommande { padding: 22px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--magenta); border-radius: var(--radius); }
.carte-precommande h3 { margin-top: 0; }
.carte-precommande__rp { color: var(--muted); }
.carte-precommande__note { margin-bottom: 0; font-size: 14px; color: var(--muted); }

/* --- Galerie d'article (slider natif à scroll-snap) --- */
.galerie { margin: 36px 0; }
.galerie__scene { position: relative; }
.galerie__piste {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.galerie__piste::-webkit-scrollbar { display: none; }
.galerie__piste:focus-visible { outline: 3px solid var(--holo); outline-offset: 2px; }
.galerie__vue { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; padding: 0 0 12px; }
.galerie__vue img { display: block; width: 100%; height: auto; border-radius: var(--radius) var(--radius) 0 0; }
.galerie__legende { margin: 10px 16px 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.galerie__fleche {
  position: absolute;
  top: 38%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  color: var(--ink);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(20, 27, 51, .16);
}
.galerie__fleche:disabled { opacity: .35; cursor: default; }
.galerie__fleche--prec { left: 10px; }
.galerie__fleche--suiv { right: 10px; }
.galerie__credit { margin-top: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--muted); }
.actus-article__corps img { display: block; width: 100%; height: auto; margin: 24px 0 6px; border: 1px solid var(--line); border-radius: var(--radius); }