/* ==========================================================================
   theme.css — identité visuelle « Leonida »            gta6.cloud
   --------------------------------------------------------------------------
   Décision @gruid du 2026-08-22 : 1(b) SOBRE + 2(b) images fournies plus tard.

   Conséquence directe, et c'est la contrainte qui a guidé tout ce fichier :
   l'identité ne peut reposer sur AUCUNE image. Elle tient sur trois choses —
   la typographie (condensée, capitales, serrée), la couleur (noir profond
   contre un couchant rose→or) et l'espace. Le couchant apparaît en petites
   doses : un filet, un chiffre, un survol. Jamais sous un texte à lire.

   Ce fichier ne contient QUE des jetons et des composants d'affichage.
   Il se charge APRÈS style.css et gagne par l'ordre, pas par !important.
   Intégration dans les pages : @shamu (style.css / features.css / HTML).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Police d'affichage — auto-hébergée, aucune requête vers un tiers
   --------------------------------------------------------------------------
   Oswald, licence SIL OFL 1.1 (copie dans css/fonts/OFL-oswald.txt).
   Fichier variable : un seul fichier couvre les graisses 200→700.
   latin + latin-ext : le second porte le « œ » (U+0153), indispensable en
   français — « cœur », « œuvre » — et les guillemets typographiques.

   Pas de seconde police pour la lecture, et c'est un écart ASSUMÉ à ma
   propre spec : la pile système est déjà la mieux rendue sur l'appareil du
   visiteur, elle coûte 0 octet et ne peut pas échouer au chargement.
   Une police d'affichage suffit à faire l'identité ; une police de lecture
   n'aurait ajouté que du poids et un risque.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200 700;          /* fichier variable */
  font-display: swap;            /* le texte s'affiche tout de suite, sans page blanche */
  src: url("fonts/oswald-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("fonts/oswald-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* --------------------------------------------------------------------------
   2. Jetons — ils redéfinissent ceux de style.css, qui les utilise déjà
   -------------------------------------------------------------------------- */

:root {
  /* Nuit — plus profonde que l'ancien #0b0b10 : le couchant n'existe que
     contre du vrai noir. Les surfaces montent par paliers lisibles. */
  --bg:          #07070b;
  --surface:     #101018;
  --surface-2:   #191924;
  --border:      #262633;

  /* Texte — un blanc très légèrement chaud, pour ne pas jurer avec l'or. */
  --text:           #f4f3f1;   /* mesuré : 18.1:1 sur le fond */
  --text-secondary: #a8a5b0;   /* mesuré : 8.3:1, contre 7.2:1 pour l'ancien #9a9aa5 */

  /* Couchant — les trois lueurs, du rose au doré. */
  --lueur-rose:   #ff2e88;
  --lueur-orange: #ff7a3d;
  --lueur-or:     #ffc247;

  /* La primaire reste le rose, l'accent devient l'or : le cyan d'origine
     appartenait à une autre famille (Vice City froid) et cassait le couchant. */
  --primary:       #ff2e88;
  --primary-hover: #ff5ba3;
  --accent:        #ffc247;

  --couchant:       linear-gradient(90deg, var(--lueur-rose), var(--lueur-orange) 55%, var(--lueur-or));
  --couchant-doux:  linear-gradient(180deg, rgba(255,46,136,.10), rgba(255,194,71,0) 70%);

  --police-affiche: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --police-lecture: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --radius:    6px;    /* moins arrondi que 10px : plus sec, plus « signalétique » */
  --radius-lg: 10px;

  /* L'échelle du titre principal est un JETON parce qu'elle est écrite à deux
     endroits : `h1` pour les pages intérieures, `.hero h1` pour l'accueil — ce
     second bloc n'existe que pour battre le `.hero h1` de style.css, plus
     spécifique que le mien. Deux écritures de la même valeur, c'est une valeur
     qu'on finit par ne changer qu'à moitié (@random l'a relevé avant nous).
     Le jour où style.css perd ses règles mortes, le second bloc disparaît. */
  --echelle-titre: clamp(2.1rem, 7vw, 4.2rem);

  /* Le titre d'une page intérieure n'est pas un titre d'accueil : il annonce
     une liste ou un fil, il ne fait pas l'affiche. Même jeton que les titres
     de section, volontairement — 34 px et non 67. */
  --echelle-titre-page: clamp(1.5rem, 3.4vw, 2.1rem);
}


/* --------------------------------------------------------------------------
   3. Échelle typographique
   --------------------------------------------------------------------------
   Règle unique, valable partout : la police d'affichage TITRE, la police
   système LIT. Aucune capitale, aucun condensé dans un paragraphe — c'est
   la ligne qui sépare « ambiance » de « pénible à lire ».
   -------------------------------------------------------------------------- */

body {
  font-family: var(--police-lecture);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3,
.logo,
.titre-affiche {
  font-family: var(--police-affiche);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.12;
  margin-top: 0;
}

/* ⚠️ 1.12 et pas 1.02, et c'est une contrainte du FRANÇAIS, pas un réglage de
   goût : en capitales, « VÉRIFIÉE » porte des accents AU-DESSUS des lettres.
   À 1.02 ils entraient dans la ligne du dessus — constaté dans le navigateur
   sur le titre d'accueil, sur deux lignes. Une maquette anglaise ne l'aurait
   jamais montré : « VERIFIED » n'a pas d'accent. */

h1 {
  font-size: var(--echelle-titre);
  letter-spacing: -0.005em;
  margin-bottom: 12px;
}

h2 {
  font-size: var(--echelle-titre-page);
  margin-bottom: 18px;
  padding-bottom: 10px;
  position: relative;
}

/* Le filet de couchant sous les titres de section : la dose d'ambiance la
   plus économe qui soit — 40 px de dégradé, et la page est identifiée. */
h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  background: var(--couchant);
  border-radius: 2px;
}

h3 {
  font-size: 1.18rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* Sur les pages intérieures, le titre principal est un h1 sans héros autour :
   il reçoit le même filet que les titres de section, sinon ces pages n'ont
   aucune trace du couchant. La page d'accueil en est exclue — son h1 est
   dans le héros, qui porte déjà l'ambiance. */
main section h1 {
  font-size: var(--echelle-titre-page);
  position: relative;
  padding-bottom: 10px;
}

main section h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  background: var(--couchant);
  border-radius: 2px;
}

.hero h1 {
  padding-bottom: 0;
  font-size: clamp(1.7rem, 5vw, 3rem);    /* reduit par rapport a --echelle-titre (demande @gruid, 2026-09-25) */
}
.hero h1::after { content: none; }

/* Zones de lecture : on ANNULE l'affichage. Un fil de forum, un article, une
   réponse — ça se lit en bas de casse, dans la police du système. */
.forum-post-body,
.composer-preview-body,
.faq-item p,
.card p,
p, li, td, input, textarea, select, label {
  font-family: var(--police-lecture);
  text-transform: none;
  letter-spacing: normal;
}

.forum-post-body,
.faq-item p {
  line-height: 1.65;
  max-width: 68ch;      /* la longueur de ligne au-delà de laquelle on décroche */
}


/* --------------------------------------------------------------------------
   4. En-tête — la signature de la marque tient dans le logo
   -------------------------------------------------------------------------- */

.site-header {
  background: rgba(7, 7, 11, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.logo {
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  letter-spacing: 0.04em;
}

/* « .cloud » prend le couchant. Repli en couleur pleine d'abord : si le
   navigateur ne sait pas peindre un dégradé dans du texte, il reste lisible
   au lieu de disparaître. */
.logo span {
  color: var(--lueur-orange);
  background: var(--couchant);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

nav.main-nav a {
  font-family: var(--police-affiche);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  font-weight: 500;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

/* Le bloc « Connexion · Inscription » vit dans le même bandeau que le menu :
   il en prend la typographie, sinon deux polices se partagent une seule barre. */
.nav-account a {
  font-family: var(--police-affiche);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
  font-weight: 500;
}

nav.main-nav a:hover,
nav.main-nav a.active {
  color: var(--text);
  border-bottom-color: var(--lueur-rose);
  text-decoration: none;
}


/* --------------------------------------------------------------------------
   5. Héros — sobre : du noir, un très grand titre, un filet. Pas d'image.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  /* Photo plein-large (demande @gruid, 2026-09-25) : posee ICI, sur `.hero`,
     qui n'a pas de max-width — contrairement a `.hero-layout` (= `.container`,
     plafonne a 1080px), qui la laissait entouree de vide a gauche/droite sur
     un grand ecran. Voile a .60, mesure sur le pixel le plus clair de la
     photo (ciel, L=0.98) -> contraste 5.19:1 pour --text. */
  background:
    linear-gradient(rgba(7, 7, 11, .60), rgba(7, 7, 11, .60)),
    url("../img/accueil/hero-compteur.webp") center / cover no-repeat,
    var(--bg);
  padding: clamp(20px, 3vw, 36px) 0 clamp(16px, 2.5vw, 28px);    /* reduit encore (meme demande) */
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

/* Espace au-dessus de "Latest news" (demande @gruid, meme message) : cible
   UNIQUEMENT la section qui suit le hero, pas `section { padding: 40px 0; }`
   qui est partagee par toutes les pages du site. */
.hero + section {
  padding-top: 72px;
}

/* La seule licence prise sur la sobriété : une lueur très basse en haut de
   page, à 10 % d'opacité. Elle se voit sans se remarquer.
   Le dégradé dérive très lentement (26 s) — mêmes teintes, même opacité que
   l'ancienne version statique, juste redécoupé en 115deg + surdimensionné
   pour que la dérive ait quelque chose à montrer. `.hero` garde son
   `overflow: hidden`, donc le débord de `inset: -10%` ne fuit pas. */
.hero::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: linear-gradient(115deg,
    rgba(255, 46, 136, .10) 0%,
    rgba(255, 122, 61, .06) 45%,
    rgba(255, 194, 71, 0) 70%);
  background-size: 180% 180%;
  background-position: 0% 40%;
  animation: couchant-respire 26s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes couchant-respire {
  from { background-position: 0% 40%; }
  to   { background-position: 100% 60%; }
}

.hero .container { position: relative; }

/* Compteur a gauche du titre (demande @gruid, 2026-09-25). Ordre DOM =
   ordre visuel en `row` : le compteur vient en premier dans le markup. */
.hero-layout {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
}

.hero-texte {
  min-width: 0;    /* sinon le texte force la largeur au lieu de se compresser en flex */
  position: relative;
  padding: 20px 24px;
}

@media (max-width: 600px) {
  .hero-layout {
    flex-direction: column-reverse;   /* le titre garde la main sur l'ecran etroit */
    align-items: flex-start;
    gap: 24px;
  }
}

.hero p {
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  max-width: 60ch;
  margin: 0 0 28px;
}

.hero .hero-texte p {
  color: var(--text);    /* specificite 0,2,1 : gagne sur `.hero p` ci-dessus,
    qui ne tient pas l'AA sur la photo en fond de `.hero-texte` (meme mesure
    que le label du compteur) */
}

/* Compte à rebours : le chiffre porte le couchant, le libellé reste sobre.
   C'est le seul endroit de la page où le dégradé est « allumé ». */
.countdown-widget {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 6px;
  padding: 16px 22px;
  margin: 0;    /* annule le `margin: 28px auto 0` de style.css, pensé pour
                   l'ancien empilement vertical — perturbait le flex row */
  text-align: center;    /* le label et la valeur remplissent toute la largeur
    (flex column, align-items stretch par defaut) mais leur TEXTE restait aligne
    a gauche — visible surtout sur la valeur, plus courte que sa boite
    (demande @gruid, 2026-09-25) */
  background: var(--surface);    /* carte opaque, PAS la photo : elle est
    derriere `.hero-layout`, une seule fois, cf. plus bas (@gruid, 2026-09-25) */
  border: 1px solid var(--border);
  border-radius: 0;
}

/* Le filet de couchant à gauche est peint en ::before, PAS en border-image :
   `border-image` remplace les quatre bordures d'un coup, on ne peut pas le
   limiter à un seul côté. Un pseudo-élément fait exactement ce qu'on demande. */
.countdown-widget::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 3px;
  background: var(--couchant);
}

.countdown-widget .label {
  font-family: var(--police-affiche);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.countdown-widget .value {
  font-family: var(--police-affiche);
  font-weight: 700;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);    /* reduit (demande @gruid, 2026-09-25) */
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;    /* chaque chiffre a la meme largeur,
    si la police le supporte (voir min-width juste en dessous, la garantie
    reelle) */
  min-width: 16ch;    /* la vraie garantie (demande @gruid, 2026-09-25) :
    tabular-nums seul ne suffit pas, mesure — Oswald ne semble pas porter de
    chiffres tabulaires, la largeur variait encore de 6px. 16ch couvre
    "54d 06h 29m 59s" (15 caracteres) avec une marge, et le flex column du
    parent (`align-items: stretch` par defaut) propage cette largeur reservee
    a `.countdown-widget` tout entier : c'est SA bordure droite qui bougeait. */
  color: var(--lueur-or);            /* repli lisible, cf. .logo span */
  background: var(--couchant);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;             /* le transform du tick a besoin d'une boite */
}

/* Classe posee par countdown.js UNIQUEMENT quand la minute change (pas chaque
   seconde) — sinon un effet qui se declenche 60 fois par minute cesse d'etre
   un effet. Retiree/reposee a chaque declenchement pour rejouer l'animation. */
.countdown-widget .value.tick {
  animation: countdown-tick .5s ease-out;
}

@keyframes countdown-tick {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}


/* --------------------------------------------------------------------------
   6. Emplacements d'image — invisibles tant qu'ils sont vides
   --------------------------------------------------------------------------
   Règle posée avec @gruid : pas de rectangle gris, pas de « photo à venir ».
   Un emplacement sans fichier n'occupe aucune place. Le jour où une image
   arrive dans img/, elle s'affiche sans qu'on retouche une seule ligne.
   -------------------------------------------------------------------------- */

/* Deux règles SÉPARÉES, et ce n'est pas un oubli de virgule : `:has()` n'existe
   pas sur les navigateurs anciens, et un sélecteur invalide dans une liste
   séparée par des virgules annule TOUTE la règle. Séparées, le repli `:empty`
   continue de fonctionner là où `:has()` est ignoré. */
.visuel:empty {
  display: none;
}

.visuel:not(:has(img)) {
  display: none;
}

.visuel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface-2);
}

/* Une image cassée ne doit pas laisser une icône brisée sur la page. */
.visuel img[src=""],
.visuel img:not([src]) {
  display: none;
}


/* --------------------------------------------------------------------------
   7. Cartes
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color .18s ease, transform .18s ease;
}

.card:hover {
  border-color: var(--lueur-rose);
  transform: translateY(-2px);
}

/* Squelette pose par actus.js/rumeurs.js pendant le fetch, avant qu'on sache
   si la reponse donnera des cartes, une liste vide ou une erreur — les trois
   sorties commencent par vider `container.innerHTML`, ce qui retire le
   squelette sans code dedie pour chacune. Pas de contenu dedans : la forme
   seule (la carte vide) suffit a dire "ca charge". */
.card.skeleton {
  min-height: 148px;
  background: linear-gradient(90deg,
    var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.card h3 a { color: var(--text); }
.card h3 a:hover { color: var(--lueur-or); text-decoration: none; }

.card .meta,
.date, .meta {
  font-family: var(--police-affiche);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.74rem;
  color: var(--text-secondary);
}


/* --------------------------------------------------------------------------
   8. Pastilles de crédibilité — elles PORTENT l'information, pas la déco
   --------------------------------------------------------------------------
   Les rumeurs ont déjà leur code couleur (js/rumeurs.js pose
   « badge status-<clé> »). Les actualités ont un statut dans les données
   — officiel · leak · rumeur — mais js/actus.js ne pose que « badge » :
   les trois se ressemblent aujourd'hui. Les classes ci-dessous sont prêtes ;
   il manque une ligne dans actus.js, côté @shamu, pour qu'elles servent.
   -------------------------------------------------------------------------- */

.badge {
  font-family: var(--police-affiche);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 3px 9px;
  margin-bottom: 12px;    /* espace vers le titre en dessous (demande @gruid, 2026-09-25) */
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--text-secondary);
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Pas un lien, pas de curseur pointer — juste une reaction au survol pour que
   ce ne soit plus le seul element de la page qui ne bouge jamais. currentColor
   reprend la couleur du statut sans dupliquer les 5 regles ci-dessous. */
.badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px currentColor inset;
}

.status-confirme,
.status-officiel  { color: #4fe08a; border-color: #4fe08a; }
.status-probable,
.status-rapporte  { color: var(--lueur-or);    border-color: var(--lueur-or); }
.status-leak      { color: var(--lueur-rose);  border-color: var(--lueur-rose); }
.status-a-verifier{ color: var(--text-secondary); border-color: var(--border); }
.status-rumeur    { color: #4fa8e0; border-color: #4fa8e0; }
.status-infirme   { color: #ff6b6b; border-color: #ff6b6b; text-decoration: line-through; }

/* Le fond de la carte ENTIERE porte la couleur du statut, pas seulement la
   pastille (demande @gruid, 2026-09-25). Un calque de degrade a couleur
   plate, pose PAR-DESSUS le `background: var(--surface)` de `.card` : meme
   technique que `.lore-fiche-visuel` (fond a deux calques), la couleur reste
   discrete (10% d'opacite) et le texte du dessus garde son contraste. `:has()`
   evite de faire poser une classe de plus par `actus.js`/`rumeurs.js` — meme
   choix que `.visuel:not(:has(img))` plus haut : ignore par les vieux
   navigateurs, qui gardent alors le fond neutre d'avant ce lot. */
.card:has(.status-confirme),
.card:has(.status-officiel) {
  background-image: linear-gradient(rgba(79, 224, 138, .10), rgba(79, 224, 138, .10));
}

.card:has(.status-probable),
.card:has(.status-rapporte) {
  background-image: linear-gradient(rgba(255, 194, 71, .10), rgba(255, 194, 71, .10));
}

.card:has(.status-leak) {
  background-image: linear-gradient(rgba(255, 46, 136, .10), rgba(255, 46, 136, .10));
}

.card:has(.status-a-verifier) {
  background-image: linear-gradient(rgba(168, 165, 176, .10), rgba(168, 165, 176, .10));
}

.card:has(.status-rumeur) {
  background-image: linear-gradient(rgba(79, 168, 224, .10), rgba(79, 168, 224, .10));
}

.card:has(.status-infirme) {
  background-image: linear-gradient(rgba(255, 107, 107, .10), rgba(255, 107, 107, .10));
}


/* --------------------------------------------------------------------------
   9. Boutons et champs
   -------------------------------------------------------------------------- */

.btn,
.btn-primary {
  font-family: var(--police-affiche);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  border-radius: var(--radius);
}

.btn-primary {
  background: var(--lueur-rose);
  color: #12000a;                 /* texte sombre sur rose saturé : mesuré 5.8:1 */
  border: none;
}

.btn-primary:hover {
  background: var(--couchant);
  color: #12000a;
}

input, textarea, select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--lueur-or);
  outline: none;
}

/* Le repère de focus au clavier : visible sur fond noir, et il ne dépend pas
   de la couleur du composant survolé. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--lueur-or);
  outline-offset: 2px;
  border-radius: 2px;
}


/* --------------------------------------------------------------------------
   10. Forum, fil d'Ariane, pied de page — les zones sobres
   -------------------------------------------------------------------------- */

.forum-table { border-color: var(--border); }

.forum-row:hover { background: var(--surface-2); }

.forum-row-main a,
.forum-post-author .pseudo {
  font-family: var(--police-affiche);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.forum-post {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.forum-quote {
  border-left: 3px solid var(--lueur-rose);
  background: var(--surface-2);
  color: var(--text-secondary);
}

.breadcrumb,
.breadcrumb a {
  font-family: var(--police-affiche);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.76rem;
}

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* Le disclaimer fan/non-affilié : discret, jamais caché. C'est lui qui
   autorise tout le reste — il reste lisible (mesuré 8.3:1). */
.disclaimer {
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.5;
}

.empty-state {
  font-family: var(--police-affiche);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}


/* --------------------------------------------------------------------------
   11. Reprises de spécificité — SECTION VIDE, et c'est le but
   --------------------------------------------------------------------------
   Ce fichier n'a plus une seule ligne écrite CONTRE style.css. Les trois
   reprises du 22/08 ont disparu avec les règles qu'elles combattaient
   (@shamu les a retirées de son côté, vérifié avant de retirer les miennes).

   ⚠️ La troisième a failli partir avec les autres, et ç'aurait été une faute :
   `section h1 { font-size }` ne compensait plus rien — elle PORTAIT une
   décision. Sans elle, le titre des 18 pages intérieures passait de 34 à 67 px,
   après validation de @gruid. Une dette et un choix peuvent s'écrire pareil ;
   ce qui les distingue, c'est ce qui se passe quand on les retire.
   Elle vit maintenant en section 3, sous le nom `--echelle-titre-page`.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   12. Mobile — 375 px est l'écran de référence (celui de @gruid)
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  h2::after { width: 34px; }

  /* En-tête NON collant sur téléphone — décision @gruid du 22/08 (option A).
     Mesuré avant de le proposer : sur 375 px il fait 120 px de haut (logo,
     menu, connexion sur trois rangées) et restait épinglé, soit 17 % de
     l'écran occupés en permanence pendant qu'on lit un article.
     Sur grand écran il reste collant : là, il coûte 8 % et sert à naviguer.
     Pour revenir à l'ancien comportement : supprimer ces deux lignes. */
  .site-header {
    position: static;
    backdrop-filter: none;      /* plus rien ne passe dessous : le flou ne sert plus */
  }

  .countdown-widget {
    display: flex;
    width: 100%;
  }

  nav.main-nav ul { gap: 14px; }
  nav.main-nav a  { font-size: 0.86rem; letter-spacing: 0.04em; }
}

/* Rien ne bouge pour qui a demandé que rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
  .hero::before { animation: none; }
  .skeleton { animation: none; }
  .countdown-widget .value.tick { animation: none; }
  .badge { transition: none; }
  .badge:hover { transform: none; }
}


/* --------------------------------------------------------------------------
   13. Vocabulaire commun de dé-inlining
   --------------------------------------------------------------------------
   84 styles en dur à remplacer (28 en JS, 56 en HTML), répartis entre deux
   agents. Si chacun invente ses noms, on obtient deux vocabulaires pour un
   seul site — la duplication qu'on est justement en train de payer ailleurs.
   Donc : les noms sont posés ICI, une fois, et @shamu les réutilise.

   Ils décrivent un RÔLE, pas une valeur (`.sous-titre`, pas `.mt-10`) : une
   classe qui porte sa mesure dans son nom est un style en dur avec un point
   devant, et il faudra la renommer au premier changement d'échelle.

   Manque un rôle ? Ajoute-le, même famille, et dis-le — pas un `.mb-8`.

   ⚠️ DETTE CONNUE (R5, notée le 2026-08-22, miroir du commentaire de style.css)
   Un second vocabulaire d'espacement vit dans style.css (bloc HTML de @shamu) —
   deux fichiers, douze valeurs verticales distinctes. Accepté sciemment pour ne
   pas rouvrir les deux feuilles juste après la validation de @gruid, puisque la
   fusion ne changerait rien à l'écran.
   DÉCLENCHEUR : la prochaine classe d'espacement ajoutée par l'un de nous, dans
   l'un ou l'autre fichier, fusionne les deux listes ici, en §13.
   Ne pas en ajouter une 13e sans fusionner.
   -------------------------------------------------------------------------- */

.section-page      { padding: 60px 0; }

/* La ligne d'explication collée sous un titre : elle appartient au titre,
   d'où la marge négative qui rattrape l'espace du bloc précédent. */
.sous-titre        { color: var(--text-secondary); margin-top: -10px; }
.bloc-intro        { color: var(--text-secondary); margin-top: -6px; }
.mention-discrete  { color: var(--text-secondary); }

/* Un panneau de travail : une carte avec son air autour. */
.bloc              { margin-top: 24px; padding: 18px; }
.bloc > h2:first-child { margin-top: 0; }

.champ-large       { width: 100%; max-width: 560px; }
.champ-court       { width: 140px; }

/* Une rangée d'options qui se replie sur mobile au lieu de déborder. */
.ligne-options {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* Le retour d'une action, à côté du bouton qui l'a déclenchée. */
.retour-action     { margin-left: 12px; }

.note-cout {
  color: var(--text-secondary);
  font-size: 0.9em;
  margin-bottom: 0;
}

.grille-suite      { margin-top: 18px; }
.grille-liste      { margin-top: 16px; }
.titre-suite       { margin-top: 32px; }

/* Les états d'un retour d'action. Le JavaScript posait « #4caf50 » et
   « #e05a5a » en dur : deux couleurs qui n'appartenaient à aucune palette et
   qu'aucune feuille de style ne pouvait rattraper. Elles deviennent deux
   états, et elles prennent les couleurs mesurées du thème. */
.retour--succes { color: #4fe08a; }   /* 11.8:1 sur le fond */
.retour--echec  { color: #ff6b6b; }   /*  7.3:1 sur le fond */
.note-succes    { color: #4fe08a; }

/* Vignette de vidéo — UNE seule règle pour les deux cas.
   features.css l.4 disait la même chose pour la vignette cliquable
   (`.video-card .video-thumb-link img`) ; le JS d'administration la répétait
   en dur pour la vignette sans lien. @shamu : cette ligne de features.css
   fait maintenant doublon, à retirer dans ta passe. */
.video-card img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}