:root {
  --bg: #0b0b10;
  --surface: #16161f;
  --surface-2: #1e1e2a;
  --border: #2a2a38;
  --primary: #ff2e88;
  --primary-hover: #ff5ba3;
  --accent: #00e5ff;
  --text: #f2f2f5;
  --text-secondary: #9a9aa5;
  --radius: 10px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.6;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

.logo {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.5px;
}

.logo span {
  color: var(--primary);
}

nav.main-nav ul {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
}

nav.main-nav a {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.95rem;
}

nav.main-nav a:hover,
nav.main-nav a.active {
  color: var(--primary);
  text-decoration: none;
}

.nav-account {
  font-size: 0.85rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.nav-account a {
  color: var(--text-secondary);
  font-weight: 600;
}

.nav-account a:hover {
  color: var(--primary);
}

.lang-switch {
  display: flex;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lang-switch a {
  color: var(--text-secondary);
}

.lang-switch a:hover {
  color: var(--primary);
}

.lang-switch a.active {
  color: var(--accent);
}

@media (max-width: 780px) {
  .site-header .container {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .lang-switch {
    order: 2;
  }

  .nav-account {
    width: 100%;
    order: 3;
  }
}

/* Breadcrumb */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding: 16px 0 0;
}

.breadcrumb a {
  color: var(--text-secondary);
}

.breadcrumb a:hover {
  color: var(--accent);
}

/* Hero */
.hero p {
  color: var(--text-secondary);
  max-width: 560px;
  margin: 0 auto;
  font-size: 1.05rem;
}

/* Countdown */
.countdown-widget {
  margin: 28px auto 0;
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 28px;
}

.countdown-widget .label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.countdown-widget .value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* FAQ accordion */
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 700;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::before {
  content: "+";
  color: var(--primary);
  margin-right: 10px;
  font-weight: 800;
}

.faq-item[open] summary::before {
  content: "−";
}

.faq-item p {
  padding: 0 20px 18px;
  margin: 0;
  color: var(--text-secondary);
}

/* Rumor status pills */
.status-confirme { color: #2ee87a; border-color: #2ee87a; }
.status-probable { color: #ffcc4d; border-color: #ffcc4d; }
.status-a-verifier { color: var(--text-secondary); }
.status-infirme { color: #ff5c5c; border-color: #ff5c5c; text-decoration: line-through; }

/* Sections */
section {
  padding: 40px 0;
}

/* Cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.card h3 a {
  color: var(--text);
}

.card .meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--accent);
  border: 1px solid var(--border);
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
}

/* Lore — texte rendu à la construction (SPEC 20260918, fiches illustrées).
   Révisé 2026-09-19 sur retour @gruid ("plus soigné, style gta6") + les six
   gestes proposés par @lyva dans #build-gta6-cloud (bandeau, vides assumés,
   grille, sommaire, néon au survol, rose réservé aux titres/bords). */

.lore-repli {
  margin: 24px 0;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* 1. Bandeau — un vrai en-tête plutôt qu'un h1 nu. Hors de `.container` du
   `<main>` pour aller bord à bord ; le h1 n'est donc plus visé par la règle
   `main section h1::after` de theme.css (le filet), remplacée ici par le
   bandeau lui-même qui porte tout le couchant. */
.lore-bandeau {
  background: linear-gradient(115deg, var(--lueur-rose) 0%, var(--lueur-orange) 55%, var(--lueur-or) 100%);
  padding: 40px 0 28px;
}

.lore-bandeau h1 {
  color: #12000a;                 /* texte sombre sur couchant saturé, mesuré ailleurs à 5.8:1 */
  padding-bottom: 0;
  margin-bottom: 0;
}

.lore-bandeau h1::after { content: none; }

/* 4. Sommaire — sticky sous l'en-tête du site (point le moins urgent des six,
   donc l'offset ci-dessous est approximatif : à ajuster après les captures
   d'@ejou si le site-header rend plus haut que prévu). */
.lore-sommaire {
  position: sticky;
  top: 58px;
  z-index: 9;
  background: rgba(7, 7, 11, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.lore-sommaire .container {
  display: flex;
  gap: 22px;
  padding-top: 10px;
  padding-bottom: 10px;
  white-space: nowrap;
}

.lore-sommaire a {
  font-family: var(--police-affiche, inherit);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.lore-sommaire a:hover {
  color: var(--lueur-or, var(--accent));
  text-decoration: none;
}

.lore-intro {
  margin: 36px 0;
  scroll-margin-top: 100px;    /* sous le bandeau + le sommaire sticky, pour les ancres */
}

/* Texte entier par-dessus l'image (demande @gruid, 2026-09-25). Un vrai <img>
   derriere le texte, jamais un background-image — sinon les 6 alt sortent du
   DOM. Voile mesure par @lyva : rgba(0,0,0,.60), marge au-dessus du minimum
   AA mesure a 57 %. Le rapport 16/6 DOIT rester dans CETTE regle : le script
   de recadrage (build/preparer_images_lore.py) lit le premier aspect-ratio
   qu'il trouve pour ce selecteur — toute regle de secours va donc APRES.

   PAS de `overflow: hidden` ici, et c'est mesure, pas oublie : avec, le
   navigateur fige la hauteur a la valeur du ratio et TRONQUE le texte qui
   deborde — verifie a 1280px de large (443px de texte pour 390px de boite),
   pas seulement sur petit ecran. Sans le hidden, `aspect-ratio` reste la
   hauteur PREFEREE (le format court quand le texte est court) mais cede
   des que le contenu a besoin de plus — un seul comportement, aucune media
   query necessaire pour l'empecher de couper. */
.lore-intro-visuel {
  position: relative;
  aspect-ratio: 16 / 6;
  margin-bottom: 16px;
  background: var(--surface-2);
}

/* La VRAIE cause du debordement (bug signale par @gruid, 2026-09-25 :
   "CITIES" flottait sur la photo qui depassait sous le texte) n'etait pas
   `height: 100%` : c'est le couple `.visuel img` de theme.css (chargé
   APRES ce fichier), qui impose `width:100%; height:auto; aspect-ratio:16/9`
   a TOUT <img> dans un `.visuel` — et le markup de ce bloc porte les deux
   classes (`class="visuel lore-intro-visuel"`, deja present avant ce lot,
   pour l'etat "sans image" generique de `.visuel:not(:has(img))`).
   Meme specificite (0,1,1) des deux cotes -> la regle chargee en dernier
   gagne, d'ou 1040*9/16 = 585px d'image pour une boite a 443px. Selecteur
   volontairement a DEUX classes (`.lore-intro .lore-intro-visuel img`,
   specificite 0,2,1) pour gagner sans dependre de l'ordre des fichiers. */
.lore-intro .lore-intro-visuel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.lore-intro-visuel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .60);
}

.lore-intro-texte {
  position: relative;
  z-index: 1;
  padding: 24px clamp(16px, 4vw, 48px);
}

/* --text-secondary (8.3:1 sur --surface-2) ne tient pas l'AA sur cette image :
   mesure en integrant, ~2.1:1 sur le pire pixel meme sous le voile — la valeur
   de @lyva suppose le texte PRINCIPAL. Donc --text ici, pas la convention
   habituelle du bloc intro. */
.lore-intro-texte p {
  color: var(--text);
  max-width: 72ch;
}

.lore-groupe {
  margin-bottom: 44px;
  scroll-margin-top: 100px;
}

.lore-groupe h2 {
  margin-bottom: 16px;
}

/* 6. Lisibilité — le rose des titres/bords ne descend jamais dans le corps :
   .lore-trame et .lore-sources restent en --text-secondary, jamais en accent. */
.lore-trame {
  margin-top: 20px;
  color: var(--text-secondary);
  max-width: 72ch;
}

.lore-fiches {
  margin-top: 4px;
  /* 2 colonnes visées sur grand écran (demande @lyva) : des cartes plus
     larges que .card-grid par défaut, à l'échelle "carte de personnage",
     pas une liste dense d'actus. */
  /* min(400px, 100%) plutôt que 400px nu : sur un écran plus étroit que
     400px, un minmax() fixe force le dépassement horizontal — repéré à la
     capture 390px, le texte des fiches sortait du cadre. */
  grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
}

/* 3. Grille + 5. Néon au survol — la carte hérite déjà de .card (fond, bord,
   translateY au survol depuis theme.css) ; on ajoute la lueur rose portée. */
.lore-fiche {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lore-fiche:hover {
  box-shadow: 0 0 0 1px var(--lueur-rose, var(--primary)), 0 12px 28px -12px rgba(255, 46, 136, 0.35);
}

/* 2. Vides assumés — sans image, le bloc reste un dégradé sombre (pas un
   rectangle gris ni un pointillé) et porte le nom en très grande Oswald,
   débordant et tronqué. Avec image, le même scrim assure la lisibilité du
   nom en légende par-dessus la photo — un seul traitement pour les deux cas. */
.lore-fiche-visuel {
  position: relative;
  aspect-ratio: 3 / 2;
  background:
    var(--couchant-doux, linear-gradient(180deg, rgba(255,46,136,.10), rgba(255,194,71,0) 70%)),
    var(--surface-2);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.lore-fiche-visuel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lore-fiche-visuel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 7, 11, 0) 35%, rgba(7, 7, 11, 0.88) 100%);
}

.lore-fiche-visuel h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 10px 14px;
  width: 100%;
  color: var(--text);
  font-size: clamp(1.25rem, 4.5vw, 1.9rem);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lore-fiche-corps {
  padding: 14px 18px 18px;
}

.lore-fiche-corps p {
  color: var(--text-secondary);
  margin: 0;
}

.lore-credit {
  display: block;
  margin-top: 8px;
  font-size: 0.7rem;
  color: var(--lueur-or, var(--text-secondary));
}

.lore-sources {
  color: var(--text-secondary);
  font-size: 0.9rem;
  max-width: 72ch;
}

@media (max-width: 780px) {
  .lore-sommaire { top: 0; }   /* le site-header n'est plus sticky sur mobile (theme.css §12) */
}

/* Forms (auth) */
.auth-form {
  max-width: 400px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}

.auth-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-secondary);
}

.auth-form input,
.auth-form textarea {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.95rem;
}

/* Un formulaire de forum (sujet, réponse) réutilise .auth-form mais n'a pas
   à rester étroit comme un login. */
.auth-form--pleine-largeur { max-width: none; }

.auth-form input:focus {
  outline: none;
  border-color: var(--primary);
}

.auth-form .field-error {
  display: none;
  color: #ff5c5c;
  font-size: 0.8rem;
  margin: -12px 0 12px;
}

.auth-form .field-error.visible {
  display: block;
}

.btn-primary {
  display: inline-block;
  width: 100%;
  padding: 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: center;
}

.btn-primary:hover {
  background: var(--primary-hover);
  text-decoration: none;
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Variantes de largeur/taille : le bouton par défaut est pleine largeur,
   ces trois-là ne le sont pas — un bouton dans une carte ou une barre
   d'actions ne doit pas s'étirer. */
.btn-primary--auto  { width: auto; padding: 8px 16px; font-size: 0.85rem; }
.btn-primary--petit { width: auto; padding: 6px 14px; font-size: 0.8rem; margin-top: 8px; }
.btn-primary--forum { width: auto; padding: 10px 24px; }

/* Bouton discret : n'utilise pas .btn-primary, action secondaire à côté
   d'une action principale (ex. « marquer comme traité » à côté de
   « masquer »). */
.btn-secondaire {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 0.85rem;
  cursor: pointer;
}

.form-note {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 16px;
}

.form-banner {
  display: none;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-bottom: 16px;
}

.form-banner.visible {
  display: block;
}

.form-banner.info {
  background: rgba(0, 229, 255, 0.1);
  border: 1px solid var(--accent);
  color: var(--accent);
}

.form-banner.danger {
  background: rgba(255, 92, 92, 0.1);
  border: 1px solid #ff5c5c;
  color: #ff5c5c;
}

.form-banner.success {
  background: rgba(46, 232, 122, 0.1);
  border: 1px solid #2ee87a;
  color: #2ee87a;
}

/* Forum */
.forum-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.forum-cat-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}

.forum-cat-card h3 {
  margin: 0 0 6px;
  color: var(--text);
}

.forum-cat-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0;
}

/* Composer toolbar */
.composer-toolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.composer-toolbar-btn {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.composer-toolbar-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.emoji-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.emoji-panel-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
}

.emoji-panel-btn:hover {
  background: var(--bg);
}

.forum-quote {
  margin: 8px 0;
  padding: 8px 14px;
  border-left: 3px solid var(--primary);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.forum-post-body ul,
.composer-preview-body ul {
  margin: 8px 0;
  padding-left: 22px;
}

.forum-post-body pre,
.composer-preview-body pre {
  margin: 8px 0;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow-x: auto;
  font-size: 0.85rem;
}

.mention {
  color: var(--accent);
  font-weight: 600;
}

.composer-preview {
  margin-bottom: 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.composer-preview-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.composer-preview-body {
  font-size: 0.95rem;
  line-height: 1.6;
}

.report-panel {
  margin-top: 8px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-width: 320px;
}

.report-select {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
}

.report-detail {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
}

/* Forum — classic horizontal bar layout */
.forum-table {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.forum-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
}

.forum-row:last-child {
  border-bottom: none;
}

a.forum-row:hover {
  background: var(--surface-2);
  text-decoration: none;
}

.forum-row-main {
  flex: 1 1 auto;
  min-width: 0;
}

.forum-row-main h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: var(--text);
}

.forum-row-main p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.forum-row-stat {
  flex: 0 0 90px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.forum-row-stat strong {
  display: block;
  font-size: 1.1rem;
  color: var(--text);
}

.forum-row-last {
  flex: 0 0 200px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-align: right;
}

.forum-row-last strong {
  color: var(--text);
  font-weight: 600;
}

@media (max-width: 700px) {
  .forum-row {
    flex-wrap: wrap;
  }

  .forum-row-stat,
  .forum-row-last {
    flex: 1 1 auto;
    text-align: left;
  }
}

/* Forum — post block (topic view) */
.forum-post {
  display: flex;
  gap: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 20px;
  margin-top: 12px;
}

.forum-post-author {
  flex: 0 0 140px;
}

.forum-post-author .pseudo {
  font-weight: 700;
  color: var(--primary);
}

.forum-post-author .date {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.forum-post-body {
  flex: 1 1 auto;
  min-width: 0;
}

.forum-post-body > div:first-child {
  margin: 0 0 10px;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .forum-post {
    flex-direction: column;
    gap: 8px;
  }

  .forum-post-author {
    flex: none;
    display: flex;
    gap: 8px;
    align-items: baseline;
  }
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 40px;
  padding: 28px 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.site-footer .disclaimer {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

/* Le lien qui suit une grille de cartons ("voir tout"). */
.lien-suite { margin-top: 20px; }

/* Vocabulaire de dé-inlining (JS) — noms par rôle, pas par valeur, même
   principe que theme.css §13. */

/* Une carte qui suit une autre dans une liste construite en JS. */
.carte-empilee { margin-top: 12px; }

/* La zone de boutons sous le contenu d'une carte. */
.zone-actions         { margin-top: 10px; }
.zone-actions--ligne  { margin-top: 10px; display: flex; gap: 10px; }
.zone-actions--serre  { margin-top: 8px; }

/* Le titre d'un sujet de forum, dans une carte — plus petit qu'un h1 de
   page, il n'a pas besoin de l'échelle "hero". */
.titre-sujet { font-size: 1.6rem; margin-bottom: 10px; }

/* Conteneur relatif pour un popup positionné en absolu (emoji, menu…). */
.popup-anchor { position: relative; }

/* Variante espacée d'un bouton de barre d'outils, quand il suit un autre
   élément sur la même ligne. */
.composer-toolbar-btn--espace { margin-left: 8px; }

/* Le champ en lecture seule qui affiche un lien généré côté serveur. */
.champ-lien-genere {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
}

/* Vocabulaire de dé-inlining (HTML).
   ⚠️ DETTE CONNUE (R5, 2026-08-22) : ce vocabulaire vit ici, à côté d'un
   second vocabulaire d'espacement dans theme.css §13 — deux fichiers, douze
   valeurs verticales distinctes. Accepté pour ne pas rouvrir les deux juste
   après validation de gruid (0 changement visuel de toute façon).
   DÉCLENCHEUR : la prochaine classe d'espacement qu'un agent (moi ou Ubou)
   ajoute dans l'un des deux fichiers fusionne les deux listes en une seule,
   dans theme.css §13. Ne pas ajouter une 13e sans fusionner. */

/* Les pages d'authentification (connexion, inscription, mots de passe) :
   un formulaire seul, centré, resserré en haut de page. */
.section-auth { padding-top: 36px; }
.titre-auth   { text-align: center; }

/* Le bloc de contenu qui suit l'intro d'une section (liste, grille,
   conteneur rempli en JS). */
.bloc-suite { margin-top: 24px; }

/* Un lien de retour, sous du contenu. */
.lien-retour { margin-top: 24px; }

/* Une zone qui suit directement un titre de catégorie, sans intro. */
.zone-suite { margin-top: 20px; }

/* Titre de sous-section sur une page d'admin à plusieurs blocs. */
.titre-section          { margin-top: 28px; }
.titre-section--espace  { margin-top: 36px; }

/* Le contenu rempli en JS sous un titre de sous-section. */
.contenu-section { margin-top: 12px; }

@media (max-width: 640px) {
  nav.main-nav ul {
    gap: 14px;
    flex-wrap: wrap;
  }
}