/* ==========================================================================
   ledecodage — style.css (v2.14, phase 2 design)
   Site public. Mode sombre par défaut, palette claire via [data-theme="light"]
   (bascule JS + localStorage dans js/main.js).
   Tokens CIBLES gravés (maquettes-design/, skill design-ledecodage) —
   le clair est un PAPIER, pas un inverse du sombre.
   Les couleurs de catégorie viennent de la BDD via la variable inline --cat
   (+ --cat-clair, migration 062) ; les consommateurs lisent --cat-aff.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --bg: #0a0e1a;
  --bg-alt: #0f1524;
  --card: #0f1524;
  --card-hover: #131b2c;
  --bg-header: #0a0e1a;
  --bg-footer: #0f1524;
  --bg-commentaires: #0a0e1a; /* phase 2 : les commentaires vivent sur le fond, séparés par un filet */
  --placeholder: #0a0e1a;      /* fond d'attente des vignettes sans image */
  --border: #1e2a3a;

  --text: #e6edf6;
  --muted: #8a9bb4;

  --accent: #22d3ee;
  --accent-2: #a78bfa;         /* violet LISIBLE en texte sur fond sombre */
  --accent-2-brand: #8b5cf6;   /* violet de MARQUE : aplats et curseur du wordmark */
  --sur-accent: #04141a;       /* texte posé sur un aplat cyan */
  --live: #f00;                /* point « live » des Shorts — invariant d'identité */

  --ok: #34d399;
  --err: #f87171;
  --warn: #f0b429;

  --radius: 12px;      /* panneaux et cartes */
  --radius-img: 10px;  /* vignettes de catégorie et images de corps */
  --radius-sm: 8px;    /* boutons, champs et petites images */
  --shadow: 0 12px 40px rgba(3, 7, 18, 0.55);
  --font: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", monospace;
}

[data-theme="light"] {
  --bg: #fbfaf8;
  --bg-alt: #ffffff;
  --card: #ffffff;
  --card-hover: #f6f4ef;
  --bg-header: #fbfaf8;
  --bg-footer: #ffffff;
  --bg-commentaires: #fbfaf8;
  --placeholder: #f2efe9;
  --border: #ddd8cd;
  --text: #101720;
  --muted: #586574;
  --accent: #0e7490;
  --accent-2: #6d28d9;
  --accent-2-brand: #6d28d9;
  --sur-accent: #ffffff;
  --shadow: 0 10px 30px rgba(70, 60, 30, 0.10);
}

/* Couleur de catégorie AFFICHABLE (texte, points, liserés) : en sombre la
   couleur BDD telle quelle ; en clair la variante claire dédiée (--cat-clair,
   posée par cat_vars()) sinon un assombrissement automatique — jamais une
   couleur vive de nuit sur le papier. Les fonds à faible alpha gardent --cat. */
.pill, .fil-item__kicker, .fil-item__pastille, .une__kicker, .une,
.cat-head__dot, .strat-cat__dot, .nav__link--cat, .cat-tete, .cat-tete-bande, .mise-avant, .nav-pill {
  --cat-aff: var(--cat, var(--accent));
}
[data-theme="light"] :is(.pill, .fil-item__kicker, .fil-item__pastille, .une__kicker, .une,
.cat-head__dot, .strat-cat__dot, .nav__link--cat, .cat-tete, .cat-tete-bande, .mise-avant, .nav-pill) {
  --cat-aff: var(--cat-clair, color-mix(in srgb, var(--cat, var(--accent)) 55%, #000));
}

/* ---------- Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Mobile : plus de zoom au double-appui (décision Nicolas 25/08/2026).
   touch-action: manipulation CONSERVE le défilement et le pincement
   (accessibilité — user-scalable=no / maximum-scale INTERDITS au viewport) :
   seul le double-tap-zoom disparaît. Posé sur html/body (couvre tout le
   contenu) et rappelé sur les éléments interactifs. Aucun effet sur le
   tiroir latéral ni la barre de rubriques défilante : les deux vivent de
   clics et de défilement natifs, jamais du double-appui. */
html, body { touch-action: manipulation; }
a, button, input, select, textarea, label, summary { touch-action: manipulation; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg, iframe { display: block; }

a { color: inherit; text-decoration: none; }

/* Focus : anneau visible au CLAVIER seulement, jamais au clic */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; }

h1 { font-size: clamp(1.875rem, 5vw, 2.875rem); line-height: 1.06; font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); letter-spacing: -0.01em; }
h3 { font-size: 1.05rem; }

.container { width: min(1200px, 100% - 3rem); margin-inline: auto; }
.container--narrow { width: min(780px, 100% - 3rem); }
.container--auth { width: min(430px, 100% - 3rem); }

/* Phase 2 : plus de dégradé de texte — l'accent porte seul l'emphase
   (la classe reste pour les gabarits existants, strategie.php notamment) */
.text-gradient { color: var(--accent); }

.mono { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font: 600 0.9rem var(--font);
  cursor: pointer;
  transition: 0.2s;
  white-space: nowrap;
}
.btn--primary {
  background: var(--accent);
  color: var(--sur-accent);
  font-weight: 700;
}
.btn--primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn--outline { border-color: var(--border); background: transparent; color: var(--text); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }
.btn--ghost { background: transparent; color: var(--muted); }
.btn--ghost:hover { color: var(--text); }
.btn--lg { padding: 0.8rem 1.4rem; font-size: 0.95rem; }
.btn--block { width: 100%; }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Fond OPAQUE inconditionnel (constat C5, 24/08/2026) : la lisibilité du
     header ne dépend d'AUCUNE feature optionnelle. Le voile translucide +
     blur n'est qu'un raffinement, servi sous @supports ci-dessous — sur un
     WebKit où le blur fait défaut (préfixe, bogues sticky+mask), l'opaque
     reste et le contenu ne transparaît jamais. */
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header {
    /* si color-mix manquait aussi, cette déclaration serait jetée et
       l'opaque ci-dessus resterait — repli par construction, pas par hack */
    background: color-mix(in srgb, var(--bg-header) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

.header__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* gap supprimé (06/08/2026) : la pill Logithèque vit en ligne 1, l'inner ne
     wrappe plus — le row-gap gonflait le header rouvert au scroll vers le haut
     et faisait passer les .lateral-module sticky dessous */
  column-gap: 1.2rem;
  padding-top: 1.15rem;
}

/* Wordmark — JAMAIS retouché : ni taille relative des trois parties, ni
   couleur, ni casse. 26 px en en-tête desktop, 21 px sous 500 px, 19-20 px en pied. */
.logo { font: 700 1.25rem var(--mono); letter-spacing: -0.03em; }

/* ---- Sélecteur de langue (lot accueil EN, 28/08/2026 — D1) ----
   Compact au header (code de langue), endonyme complet dans le tiroir ;
   ≤ 640 px le header le cède au tiroir (place mesurée). */
.langue-lien { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.45rem; border: 1px solid var(--border); border-radius: 8px; font: 700 0.72rem var(--mono); letter-spacing: 0.08em; color: var(--muted); }
.langue-lien:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.tiroir__langue { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; color: var(--text); font-size: 0.95rem; }
.grille-lecture--pleine { grid-template-columns: minmax(0, 1fr); }
.header .logo { font-size: 1.625rem; }
.logo span:not(.logo__cursor) { color: var(--accent); }
.logo__cursor { color: var(--accent-2); animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* v1.46 : plus d'air entre les éléments de droite (retour Nicolas) */
.header__actions { display: flex; align-items: center; gap: 0.95rem; margin-left: auto; }

/* Outils du site (§7.8) : ancre du futur groupe « Outils » — la pill Logithèque
   y vit en ligne 1 (desktop) ; sur mobile elle bascule dans le menu burger */
.outils { position: relative; display: inline-flex; gap: 0.55rem; }

/* Espace membre (v1.45 — connexion.php pour un connecté, page hors cache) */
.membre-tete { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.1rem; }
.membre-tete__pseudo { font-size: 1.3rem; }
.membre-actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.2rem; }

/* Accès compte adaptatif (v1.45 ; correction de cap C1 du 24/08/2026 au
   soir) : les deux états vivent dans le HTML caché, html[data-connecte]
   (posé avant peinture par le script du head) choisit — l'état inactif est
   en display:none (utilitaires .si-* ci-dessous), donc INERTE par nature.
   Le bloc prend la largeur de son CONTENU RÉEL : le groupe de droite reste
   COMPACT contre le bord, sans vide résiduel — les positions peuvent
   différer entre les deux états, c'est assumé (le besoin réel de Nicolas).
   Aucun nombre magique de largeur, rien à maintenir. */
.acces { display: inline-flex; align-items: center; }
.acces__etat { display: inline-flex; align-items: center; gap: 0.5rem; }
/* Avatar d'en-tête du connecté (recette 14/08) : même gabarit que les
   commentaires, en 36 px — double classe : la règle .avatar des commentaires
   vit plus BAS dans la feuille, la spécificité tranche */
.avatar.avatar--header { width: 36px; height: 36px; font-size: 0.72rem; }
a.avatar--header:hover { border-color: var(--accent); color: var(--accent); }
/* Utilitaires d'état (v1.45) : .si-connecte / .si-anonyme — tout bloc public
   dont l'affichage dépend de la connexion (accès header, burger, formulaire
   de commentaires). :not() porte la spécificité : ces règles gagnent sur
   toute règle d'affichage ultérieure, l'ordre du fichier est indifférent. */
html:not([data-connecte="1"]) .si-connecte { display: none; }
html[data-connecte="1"] .si-anonyme { display: none; }
/* (correction de cap C1 : plus de réservation de largeur dans .acces —
   l'état inactif est simplement display:none comme partout ailleurs) */

.search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.7rem;
}
.search__icon { width: 15px; color: var(--muted); flex-shrink: 0; }
.search input {
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font: 0.85rem var(--font);
  width: 130px;
}
.search input::placeholder { color: var(--muted); }
.search:focus-within { border-color: var(--accent); }
/* Croix NATIVE des champs search supprimée partout (recette 14/08 : elle
   doublait la nôtre sur recherche.php) — règles SÉPARÉES : une liste mêlant
   deux pseudo-éléments webkit peut être écartée d'un bloc */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }

.search--page { margin-bottom: 2rem; padding: 0.6rem 0.9rem; }
.search--page input { flex: 1; width: auto; font-size: 0.95rem; }
.search--espacee { margin-top: 0.9rem; margin-bottom: 1.6rem; /* recette 14/08 : de l'air au-dessus */ }

.theme-toggle {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: 0.2s;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* Barre des rubriques (règle gravée nº 8) : DOUZE rubriques, débordement par
   défilement horizontal avec dégradé de bord droit — jamais de repli sur deux
   lignes, jamais de menu « Plus ». Visible à toutes les largeurs. */
.nav--cats {
  order: 5;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 0.2rem; /* espacement minimum quand ça serre (1000-1400 px) */
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.35rem 0 0;
  max-height: 3.5rem;
  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.nav--cats::-webkit-scrollbar { display: none; }
.nav--cats .nav__link:first-child { padding-left: 0; }
.nav--cats .nav__link:last-child { padding-right: 28px; /* le dégradé de bord ne mange pas la dernière rubrique */ }

/* Header compact : la ligne rubriques se replie en descendant, réapparaît
   au premier scroll vers le haut (classe posée par js/main.js, desktop).
   Borné en media query : quel que soit l'état JS résiduel, le menu burger
   mobile (≤ 900 px) ne peut jamais hériter du repli. */
@media (min-width: 901px) {
  /* Latérale de l'accueil (retour prod 13/08 soir) : la COLONNE défile
     normalement — seuls les DEUX DERNIERS modules (Dernière vidéo +
     newsletter, .lat-sticky) collent sous le header rouvert. Garde main.js :
     sous-conteneur plus haut que le viewport (petit écran en paysage) →
     .lat-sticky--statique, jamais de coupure. translateZ : couche de
     composition anti-fantômes Chrome (leçon .article-lateral du 04/08). */
  .lat-sticky {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    /* l'offset SUIT l'état plié/ouvert du header : --header-h = hauteur réelle
       mesurée par main.js (ResizeObserver) ; repli sans JS ≈ header ouvert */
    top: calc(var(--header-h, 95px) + 12px);
    transition: top 0.25s ease; /* le bloc suit le pli sans saut */
    transform: translateZ(0);
  }
  .lat-sticky--statique { position: static; }

  /* Fiches déjà en sidebar (§7.10) : le pied figé masque son groupe
     « Dans cet article » en desktop — sur mobile (sidebar escamotée),
     le pied reprend ses deux groupes */
  .pied--allege .pied-article:has(a.logi-card--mini) { display: none; }

  /* Utilitaire responsive (gabarit unifié v1.36) : réservé au mobile — porte
     en colonne ce que la sidebar escamotée (≤ 900 px) affiche en desktop
     (CTA logiciel, sommaire de dossier) */
  .mobile-seul { display: none; }

  .header--compact .nav--cats {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
  }
  /* Respiration basse du header REPLIÉ : le row-gap supprimé de .header__inner
     (06/08/2026) la fournissait même rubriques repliées — restituée ici, en
     mode compact SEULEMENT (le header rouvert reste au plus bas, sous les 6.7rem
     du sticky latéral) */
  .header--compact .header__inner { padding-bottom: 0.7rem; }
}

.nav__link {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  padding: 0.6rem 0.15rem 0.7rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  flex: none;
  transition: color 0.2s;
}
.nav__link:hover { color: var(--text); }
.nav__link--cat.is-active,
.nav__link.is-active { color: var(--text); border-bottom-color: var(--cat-aff, var(--accent)); }
.nav__link--cat:hover { color: var(--text); }

/* Outils du site (Dossiers, Logithèque, futurs Outils §7.8) : pastilles
   NEUTRES du bord d'en-tête (maquettes phase 2) — l'accent reste réservé
   à l'état actif */
.nav__sep {
  width: 1px;
  align-self: stretch;
  margin: 0.35rem 0.55rem;
  background: var(--border);
}
.nav__link--outil {
  border: 1px solid var(--border);
  border-radius: 100px;
  color: var(--text);
  font-weight: 600;
  padding: 0.5rem 0.9rem;
}
.nav__link--outil:hover { border-color: var(--accent); color: var(--accent); }
.nav__link--outil.is-active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  border-bottom-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}

.nav-burger { display: none; }

/* Recherche en icône (≤ 900 px) : lien 44 px vers la page recherche —
   le champ complet vit sur recherche.php */
.search-lien {
  display: none;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted);
}
.search-lien:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Tiroir latéral (constat C4, 24/08/2026) ----------
   Remplace le menu burger déroulant : panneau qui glisse du bord droit,
   fond assombri cliquable, Échap, focus piégé (js/main.js), défilement
   d'arrière-plan verrouillé par la technique maison (body fixe +
   --scroll-top — fiable iOS, zéro décalage de layout). L'état fermé est en
   visibility:hidden : inerte ET hors de l'ordre de tabulation. La barre des
   rubriques défilante RESTE en place sous le header (règle gravée nº 8) :
   les deux coexistent. */
.tiroir-fond {
  position: fixed; inset: 0; z-index: 230;
  background: rgba(2, 4, 10, 0.55);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.tiroir-fond--visible { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
.tiroir {
  position: fixed; inset: 0 0 0 auto; z-index: 240;
  width: min(20.5rem, 88vw);
  display: flex; flex-direction: column; gap: 1.05rem;
  padding: 1.1rem 1.3rem calc(1.3rem + env(safe-area-inset-bottom));
  background: var(--card);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  transform: translateX(100%); visibility: hidden;
  transition: transform 0.28s ease, visibility 0s linear 0.28s;
}
.tiroir--ouvert { transform: none; visibility: visible; transition: transform 0.28s ease; }
@media (prefers-reduced-motion: reduce) {
  .tiroir, .tiroir-fond { transition: none; }
}
.tiroir__tete { display: flex; align-items: center; justify-content: space-between; }
.tiroir__titre { font: 700 0.8125rem var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.tiroir__fermer {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--muted); cursor: pointer;
  /* couleurs seulement : une transition « all » retarderait la bascule de
     visibility héritée à l'ouverture, et le focus initial la manquerait */
  transition: color 0.15s, border-color 0.15s;
}
.tiroir__fermer:hover { color: var(--accent); border-color: var(--accent); }
.tiroir .search { width: 100%; }
.tiroir .search input { flex: 1; width: auto; }
.tiroir__rubriques { display: flex; flex-direction: column; }
.tiroir__rubriques a {
  display: flex; align-items: center; gap: 0.65rem;
  min-height: 44px;
  font-size: 0.95rem; font-weight: 500; color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: color 0.15s;
}
.tiroir__rubriques a::before {
  content: ''; flex-shrink: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cat, var(--accent)); /* pastille à la couleur de rubrique (cat_vars) */
}
.tiroir__rubriques a.is-active, .tiroir__rubriques a:hover { color: var(--accent); }
.tiroir__outils { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.tiroir__outils a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 1.1rem;
  border: 1px solid var(--border); border-radius: 100px;
  font-size: 0.9rem; font-weight: 600; color: var(--text);
  transition: color 0.15s, border-color 0.15s;
}
.tiroir__outils a:hover, .tiroir__outils a.is-active { color: var(--accent); border-color: var(--accent); }
.tiroir__pied { margin-top: auto; display: flex; flex-direction: column; gap: 0.6rem; padding-top: 1.05rem; border-top: 1px solid var(--border); }
.tiroir__theme {
  display: flex; align-items: center; gap: 0.6rem;
  min-height: 44px; padding: 0 1.1rem;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: 600 0.9rem var(--font); color: var(--text);
  cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.tiroir__theme:hover { color: var(--accent); border-color: var(--accent); }
.tiroir__compte { display: flex; align-items: center; gap: 0.6rem; }
.tiroir__compte .btn { flex: 1; justify-content: center; min-height: 44px; }
.tiroir__membre { display: flex; align-items: center; gap: 0.7rem; min-height: 44px; font-weight: 600; color: var(--text); }
.tiroir__membre:hover { color: var(--accent); }
/* Verrou du fond pendant l'ouverture — technique maison (règle UI gravée) :
   jamais overflow:hidden seul (inopérant sur iOS), jamais de padding-right
   compensatoire. La scrollbar reste visible, rien ne se décale. */
body.tiroir-ouvert {
  overflow-y: scroll;
  position: fixed;
  width: 100%;
  top: calc(var(--scroll-top, 0px) * -1);
}

/* ---------- Hero ---------- */
.hero {
  padding-block: 4rem 3.2rem;
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(34, 211, 238, 0.09), transparent 70%),
    radial-gradient(600px 300px at 85% 10%, rgba(139, 92, 246, 0.1), transparent 70%);
}
.hero--page { padding-block: 3.5rem 1rem; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.hero__sub { color: var(--muted); font-size: 1.02rem; margin-block: 1.1rem 1.6rem; max-width: 52ch; }
.hero__cta { display: flex; gap: 0.8rem; flex-wrap: wrap; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 600 0.78rem var(--mono);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 100px;
  padding: 0.3rem 0.8rem;
  margin-bottom: 1.2rem;
}
.badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }

/* ---------- Miniatures ---------- */
.thumb {
  --cat: var(--accent);
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(320px 180px at 35% 35%, color-mix(in srgb, var(--cat) 26%, transparent), transparent),
    radial-gradient(320px 180px at 75% 75%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent),
    var(--card);
  border: 1px solid var(--border);
}
.thumb--hero { box-shadow: var(--shadow); }

.thumb__play {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: color-mix(in srgb, #0d1424 72%, transparent);
  border: 1px solid rgba(231, 237, 247, 0.25);
  color: #fff;
  backdrop-filter: blur(4px);
  transition: 0.25s;
}
.thumb__play svg { margin-left: 3px; }

/* ---------- Cartes ---------- */
.video-card { display: flex; flex-direction: column; gap: 0.9rem; transition: transform 0.25s; }
.video-card:hover { transform: translateY(-4px); }
.video-card:hover .thumb__play { background: var(--accent); color: var(--sur-accent); border-color: transparent; }
.video-card__body { display: flex; flex-direction: column; gap: 0.45rem; }
.video-card__meta { color: var(--muted); font-size: 0.82rem; }
.video-card__excerpt { color: var(--muted); font-size: 0.88rem; }

.pill {
  --cat: var(--accent);
  align-self: flex-start;
  display: inline-block;
  font: 600 0.7rem var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.22rem 0.6rem;
  border-radius: 100px;
  color: var(--cat-aff);
  background: color-mix(in srgb, var(--cat) 12%, transparent);
}
.pill--author { --cat: var(--accent); }

/* ---------- Sections ---------- */
.section { padding-block: 3.2rem; }
.section--alt { background: var(--bg-alt); }
.section--commentaires { background: var(--bg-commentaires); }

/* ---------- Étalonneur (outil admin ?etalonnage=1 — inc/etalonnage.php) ---------- */
.etalonneur {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 200;
  width: 270px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.9rem;
}
.etalonneur__head { display: flex; align-items: center; gap: 0.5rem; }
.etalonneur__fermer {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.etalonneur__fermer:hover { color: var(--err); }
.etalonneur__note { font-size: 0.75rem; color: var(--muted); margin: 0.3rem 0 0.7rem; }
.etalonneur__lignes { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.8rem; }
.etalonneur__ligne { display: flex; align-items: center; gap: 0.55rem; font-size: 0.82rem; cursor: pointer; }
.etalonneur__ligne input[type="color"] {
  width: 30px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: none;
  padding: 0;
  cursor: pointer;
}
.etalonneur__ligne code { margin-left: auto; font-family: var(--mono); font-size: 0.66rem; color: var(--muted); }

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.8rem;
}

.link-more { color: var(--accent); font-size: 0.88rem; font-weight: 600; }
.link-more:hover { text-decoration: underline; }

.grid { display: grid; gap: 1.6rem; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.article-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
  transition: 0.25s;
}
.article-card p { color: var(--muted); font-size: 0.9rem; }

.empty { color: var(--muted); padding: 1.5rem 0; }

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Image réelle dans une miniature (vignette d'article, miniature YouTube) */
.thumb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb .thumb__play { position: relative; z-index: 2; }

/* Point rouge « live » des Shorts : 10 px, rayon 3 px, #F00, pulsation 1,6 s —
   invariant d'identité (ne jamais le retoucher) */
.videos-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--live); margin-right: 0.35rem; animation: pulseLive 1.6s ease-in-out infinite; }
@keyframes pulseLive { 50% { opacity: 0.3; } }

.videos-flux {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 250px;
  gap: 1.1rem;
  overflow-x: auto;
  padding-bottom: 0.7rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.videos-flux .video-card { scroll-snap-align: start; gap: 0.6rem; }
.thumb__duree { position: absolute; right: 0.5rem; bottom: 0.5rem; padding: 0.14rem 0.42rem; border-radius: 6px;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.02em; color: #e7edf7;
  background: color-mix(in srgb, #000 72%, transparent); } /* durée YouTube (v1.56) — letterbox noir assumé, identique aux deux thèmes */
.videos-flux h3 { font-size: 0.92rem; line-height: 1.35; }

/* Shorts : cartes portrait 9:16 */
.videos-flux--shorts { grid-auto-columns: 172px; }
.thumb--short { aspect-ratio: 9 / 16; }
.thumb--short .thumb__play { width: 42px; height: 42px; }
.videos-flux--shorts h3 { font-size: 0.86rem; }

/* ---------- Les plus lus (encart DANS le fil, phase 2) ----------
   Panneau après le premier groupe de jour : quatre cartes image-puis-titre,
   SANS numérotation ni compteur de vues — la fenêtre glissante s'affiche
   dans l'en-tête (« 7 derniers jours », réglage plus_lus_fenetre_jours). */
.plus-lus {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem;
  margin: 0.9rem 0 0.4rem;
}
.plus-lus__tete {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}
.plus-lus__tete h2 {
  font: 600 0.75rem var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.plus-lus__fenetre { font: 400 0.7rem var(--mono); color: var(--muted); white-space: nowrap; }
/* 3 cartes par défaut (retour prod 13/08) — le nombre suit le réglage
   plus_lus_nombre (2-4), la grille via le modificateur --N posé par index.php */
.plus-lus__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.plus-lus__grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plus-lus__grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plus-lus__carte { display: flex; flex-direction: column; gap: 0.7rem; }
.plus-lus__carte:hover .titre { color: var(--accent); }
/* Vignette : même repli dégradé que .thumb — sans image, le bloc coloré
   reste seul, jamais d'image cassée */
.plus-lus__vignette {
  --cat: var(--accent);
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    radial-gradient(120px 68px at 35% 35%, color-mix(in srgb, var(--cat) 30%, transparent), transparent),
    var(--placeholder);
}
.plus-lus__vignette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plus-lus .titre { font-size: 0.875rem; font-weight: 600; line-height: 1.4; text-wrap: pretty; transition: color 0.15s; }

/* ---------- Logithèque ---------- */
.logi-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
  transition: 0.2s;
}
.logi-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-3px); }
.logi-card > p { color: var(--muted); font-size: 0.88rem; flex: 1; }

.logi-card__head { display: flex; align-items: center; gap: 0.9rem; }
.logi-card__head h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.logi-card__badges { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.logi-logo {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: var(--radius-sm); /* 8 px : petites images (phase 2) */
  object-fit: contain;
  background: #fff; /* les logos d'éditeurs vivent sur blanc, deux thèmes */
  padding: 6px;
  border: 1px solid var(--border);
}
.logi-logo--lettre {
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--sur-accent);
  font: 800 1.4rem var(--mono);
  padding: 0;
}

.badge-prix {
  font: 600 0.68rem var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.55rem;
  border-radius: 100px;
}
.badge-prix--gratuit  { color: var(--ok);    background: color-mix(in srgb, var(--ok) 12%, transparent); }
.badge-prix--freemium { color: var(--warn);  background: color-mix(in srgb, var(--warn) 12%, transparent); }
.badge-prix--payant   { color: var(--muted); background: color-mix(in srgb, var(--muted) 14%, transparent); }

.logi-card__plateformes { font: 400 0.72rem var(--mono); color: var(--muted); }
.logi-card__cta { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.2rem; }
.lien-verifie {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: 500 0.72rem var(--mono);
  color: var(--ok);
  cursor: help;
}

.mention-partenaire { font: 400 0.7rem var(--mono); color: var(--muted); }
.mention-partenaire a { color: var(--accent); }

/* ---------- Fiche logiciel ---------- */
.fiche-retour { font-size: 0.85rem; color: var(--muted); margin-bottom: 1.6rem; }
.fiche-retour a { color: var(--accent); }
.fiche-retour a:hover { text-decoration: underline; }

.fiche-head { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.4rem; }
.fiche-head h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: 0.5rem; }
.fiche-editeur { font-size: 0.85rem; color: var(--muted); }

.logi-logo--grand { width: 76px; height: 76px; border-radius: var(--radius-img); }
.logi-logo--grand.logi-logo--lettre { font-size: 2rem; }

.fiche-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 1.6rem 0 2rem;
}

.fiche-h2 { margin: 2.4rem 0 1rem; font-size: 1.3rem; }

.logi-card__lien:hover h3 { color: var(--accent); }
.logi-card__lien h3 { transition: color 0.15s; }
.logi-grid--fiche { margin-top: 0.4rem; }
/* Fiche logithèque EMBARQUÉE dans un corps d'article (élément « logiciel »,
   v1.37 — maquette validée 07/08/2026) : la carte pleine, avec respiration */
.logi-card--article { margin-block: 1.6rem; }
.logi-card--mini { padding: 1.1rem 1.2rem; }

/* Formats de dossiers (v1.42 §6.6) : badge guide / comparatif / tuto sur les
   cartes du fleuve — même anatomie que .badge-prix, sémantique par format */
.badge-format {
  display: inline-block;
  font: 600 0.62rem var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.5rem;
  border-radius: 100px;
  margin-left: 0.45rem;
  vertical-align: middle;
}
.badge-format--guide      { color: var(--accent);   background: color-mix(in srgb, var(--accent) 12%, transparent); }
.badge-format--comparatif { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, transparent); }
.badge-format--tuto       { color: var(--ok);       background: color-mix(in srgb, var(--ok) 12%, transparent); }

.pagination { display: flex; gap: 0.5rem; margin-top: 2.5rem; }
.pagination a, .pagination__cur {
  display: grid;
  place-items: center;
  min-width: 44px; height: 44px; /* cibles tactiles 44 px minimum (règle gravée) */
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 0.9rem;
  padding-inline: 0.5rem;
}
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination__cur { border-color: var(--accent); color: var(--accent); background: var(--card); font-weight: 700; }

/* ---------- Page article ---------- */
.article-head { margin-bottom: 1.35rem; } /* resserré de moitié le 25/08, puis un léger air rendu sous la date */
.article-head h1 { margin-block: 0.9rem 0.6rem; font-size: clamp(1.7rem, 4vw, 2.5rem); }
.article-head__meta { color: var(--muted); font-size: 0.88rem; }
.article-head__meta a { color: var(--accent); }

.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  margin-bottom: 1.8rem;
  background: #000;
}
.video-embed iframe { width: 100%; height: 100%; border: 0; }

/* Façade vidéo d'article (chantier CMP 16/08/2026) : aucune requête YouTube
   ni i.ytimg avant le clic. Chips et bouton en letterbox noir translucide,
   identique aux deux thèmes (même exception documentée que .lecteur__fermer) :
   ils flottent sur une image ou un dégradé, jamais sur le fond du site. */
.video-facade__lien {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.9rem; text-decoration: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cat, var(--accent)) 24%, var(--card)), var(--card) 78%);
}
.video-facade__visuel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-facade__bouton {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 68px; height: 68px; border-radius: 50%;
  background: color-mix(in srgb, #000 55%, transparent);
  border: 1px solid var(--border); color: #e7edf7; backdrop-filter: blur(4px);
  transition: transform 0.2s, background 0.2s, color 0.2s;
}
.video-facade__lien:hover .video-facade__bouton { transform: scale(1.07); background: var(--accent); color: var(--sur-accent); }
.video-facade__legende {
  position: relative; z-index: 1; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: #e7edf7;
  background: color-mix(in srgb, #000 55%, transparent);
  padding: 0.4rem 0.85rem; border-radius: 100px;
}

/* Vidéos verticales (Instagram, TikTok) : format portrait centré */
.video-embed--portrait {
  aspect-ratio: 9 / 16;
  max-width: 380px;
  margin-inline: auto;
  margin-block: 1.4rem 1.8rem;
}


/* Corps de lecture — 18 px / 1,78 ; mesure ÉLARGIE à 76 ch (recette 14/08) */
.article-content { font-size: 1.125rem; line-height: 1.78; max-width: 76ch; }
.article-content p { margin-bottom: 1.1rem; color: color-mix(in srgb, var(--text) 88%, var(--muted)); }

/* ---------- Éléments d'article ---------- */
.article-content h2 { margin: 1.8rem 0 0.7rem; font-size: 1.4rem; }
.article-content h2.art-h2--etape::before { content: "→ "; color: var(--accent); }
.article-content h2.art-h2--important { color: var(--accent); }
.article-content h3 { margin: 1.3rem 0 0.5rem; font-size: 1.1rem; }
.art-intro { font-size: 1.06rem; font-weight: 500; color: var(--text); }
/* Conclusion : dans le FLUX de lecture, sans filet — le filet v1 traînait
   entre la fin du contenu et la pagination/le pied (retour prod 13/08, capture) */
.art-conclusion { font-weight: 500; }
.art-citation {
  border-left: 3px solid var(--accent);
  padding: 0.4rem 0 0.4rem 1.1rem;
  margin: 1.1rem 0;
  color: var(--muted);
  font-style: italic;
}
/* Encadré (v1.43 §6.6 — « Piège à éviter » des tutos, bon-à-savoir) */
.art-encadre {
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-left: 3px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 7%, transparent);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.1rem;
  margin: 1.1rem 0;
  font-size: 0.95rem;
}
.art-liste { margin: 0.8rem 0 1.1rem 1.3rem; display: flex; flex-direction: column; gap: 0.35rem; color: color-mix(in srgb, var(--text) 88%, var(--muted)); }
/* `width: 100%` ne BORNE pas : il se résout contre le conteneur, et un
   conteneur peut être élargi par son propre contenu. `max-width: 100%` est ce
   qui contraint réellement (constat 26/08/2026 : une image de 1600 px faisait
   défiler tout le document à 430 px, en-tête coupé). Les attributs width/height
   du HTML figé restent : ils INFORMENT le navigateur du ratio contre le CLS,
   ils ne commandent pas l'affichage. */
.art-image img { width: 100%; max-width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.art-image figcaption { font: 400 0.78rem var(--mono); color: var(--muted); margin-top: 0.45rem; }
/* IMAGE À LA UNE (première figure du corps) — hauteur BORNÉE, ratio PRÉSERVÉ,
   AUCUN recadrage, CENTRÉE quand elle est plus étroite que la colonne.
   (lot L2, 28/08/2026)

   ⚠ La règle précédente était MORTE : elle visait `> .art-image:first-child`,
   or le premier enfant de `.article-content` est `<div class="article-actions">`
   — le sélecteur ne matchait AUCUN article. Mesuré au DOM : une jaquette
   portrait s'affichait à 955 px de haut. Et là où elle s'appliquait encore,
   `object-fit: cover` RECADRAIT l'image (haut et bas perdus).

   Ici, pas d'object-fit du tout : `width:auto` + `max-width:100%` +
   `max-height` laissent le navigateur conserver le ratio de lui-même. Une
   image plus étroite que la colonne se centre par `margin-inline:auto`.

   520 px : arbitrage du propriétaire. Mesure du corpus (90 images, colonne
   855 px) — médiane 477, p90 570, max 955 ; borne 20 % des images, et AUCUNE
   sur smartphone (max 400 px à 358 px de large). */
.article-content figure.art-image:first-of-type img {
  width: auto;
  max-width: 100%;
  max-height: 520px;
  margin-inline: auto;
  display: block;
}
/* Liens au fil du texte (sources, entités §7.9, logithèque) : accent standard —
   style (1) tranché sur maquette le 01/08/2026, identique aux blocs lien */
.article-content p a,
.article-content li a { color: var(--accent); }
.article-content p a:hover,
.article-content li a:hover { text-decoration: underline; }

.art-lien a { color: var(--accent); font-weight: 600; }
.art-lien a:hover { text-decoration: underline; }

/* ---------- Pied d'article : vignettes (§7.9 — maquette validée 01/08/2026) ---------- */
.pied-article { margin-top: 2.6rem; }
.pied-article + .pied-article { margin-top: 1.8rem; }
.pied-article h2 {
  font-size: 1.15rem;
  margin-bottom: 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
}
.pied-article .video-card h3 { font-size: 0.95rem; }
.pied-article .logi-card__desc { color: var(--muted); font-size: 0.85rem; margin-top: 0.4rem; }

/* ---------- Article : gabarit 2 colonnes + modules latéraux (§7.10 — maquette validée 01/08/2026) ---------- */
/* Fil d'Ariane VISUEL supprimé le 06/08/2026 (décision Nicolas) — le
   BreadcrumbList JSON-LD reste servi dans $pageJsonLd (SEO, invisible) */

/* Gabarit unifié v1.36 (maquettes validées 06/08/2026) */
/* léger air sous le titre avant la date (25/08/2026, capture Nicolas) : 0.6 → 1rem */
.article-head h1 { margin-block: 0 1rem; } /* plus de pill au-dessus : même départ que .fiche-head h1 */
/* Sommaire des dossiers multi-pages (§6.6 v1.36) — sidebar + doublon .mobile-seul en colonne */
.lateral-sommaire { display: grid; gap: 0.15rem; }
.lateral-sommaire__lien { display: flex; gap: 0.55rem; padding: 0.42rem 0.55rem; border-radius: var(--radius-sm); color: var(--muted); font-size: 0.88rem; line-height: 1.35; }
.lateral-sommaire__lien:hover { color: var(--text); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.lateral-sommaire__lien.is-active { color: var(--text); font-weight: 600; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.lateral-sommaire__num { font: 600 0.78rem var(--mono); color: var(--accent); min-width: 1.1rem; }

.article-head__auteur {
  margin-top: 0.55rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.article-head__auteur strong { color: var(--text); font-weight: 600; }
.article-head__auteur a { color: var(--accent); font-weight: 600; white-space: nowrap; }
.article-head__auteur a:hover { text-decoration: underline; }

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 2.8rem;
  /* PAS d'align-items: start — la latérale s'étire à la hauteur de la rangée,
     c'est la course de collage du sous-conteneur .lat-sticky (align-content:
     start sur .article-lateral garde ses modules en haut) */
}
/* Latérale d'article : la COLONNE défile avec la page depuis la phase 2 —
   seul le sous-conteneur final .lat-sticky (newsletter + Dernière vidéo)
   colle, COMPOSANT de gabarit partagé avec l'accueil (et les gabarits à
   sidebar du lot 3). L'ancien sticky intégral est retiré (retour 13/08 soir). */
.article-lateral {
  display: grid;
  gap: 1.1rem;
  align-content: start;
}

.lateral-module {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius); /* 12 px : rayon des panneaux (phase 2) */
  padding: 1.1rem 1.2rem;
}
.lateral-module__titre {
  margin: 0 0 0.9rem;
  font: 700 0.78rem var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.lateral-module__liste { display: grid; gap: 0.85rem; }
.lateral-module .mention-partenaire { display: block; margin-top: 0.8rem; }

.lateral-dossier { display: flex; gap: 0.8rem; align-items: flex-start; }
.lateral-dossier__vignette {
  flex-shrink: 0;
  width: 104px; /* maquette lot 2 */
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--border);
}
.lateral-dossier__titre { display: block; font-size: 0.88rem; font-weight: 600; line-height: 1.3; color: var(--text); }
.lateral-dossier:hover .lateral-dossier__titre { color: var(--accent); }
.lateral-dossier__meta { display: block; font-size: 0.74rem; color: var(--muted); margin-top: 0.2rem; }

.lateral-logi { display: flex; align-items: center; gap: 0.7rem; }
.lateral-module .logi-logo { width: 44px; height: 44px; border-radius: 10px; }
.lateral-module .logi-logo--lettre { font-size: 1.15rem; }
.lateral-logi__infos { flex: 1; min-width: 0; }
.lateral-logi__nom { display: block; font-size: 0.9rem; font-weight: 600; color: var(--text); line-height: 1.25; }
.lateral-logi__infos:hover .lateral-logi__nom { color: var(--accent); }
.lateral-logi .logi-note { display: block; margin-top: 0.1rem; }
.lateral-logi .btn { padding: 0.4rem 0.75rem; font-size: 0.78rem; flex-shrink: 0; }

.lateral-entite { display: flex; align-items: center; gap: 0.7rem; }
.lateral-entite__nom { display: block; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.lateral-entite:hover .lateral-entite__nom { color: var(--accent); }
.lateral-entite__type { display: block; font-size: 0.72rem; color: var(--muted); font-family: var(--mono); text-transform: lowercase; }

/* ---------- Fiche entité : identité, galerie, frise (§7.9 v1.35 — maquette validée 03/08/2026) ---------- */
.identite { text-align: center; }
.identite .logi-logo--grand { margin: 0 auto 0.7rem; }
.identite__nom { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.6rem; }
.identite .specs-table { margin-top: 0.4rem; text-align: left; font-size: 0.85rem; }
.identite .specs-table th { font-weight: 600; }
.identite__site-lien { color: var(--accent); font-weight: 600; word-break: break-all; }

/* Galerie sobre : images officielles de l'ÉMETTEUR + photo Commons, créditées */
.galerie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin-top: 1.4rem;
}
.galerie__item { margin: 0; }
.galerie__item img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.galerie__item figcaption {
  margin-top: 0.35rem;
  font: 0.72rem var(--mono);
  color: var(--muted);
  line-height: 1.4;
}

/* Frise chronologique (Repères) — composant design system */
.frise-titre { margin-top: 2.2rem; }
.frise { list-style: none; margin: 1rem 0 0; padding: 0; position: relative; }
.frise::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.frise__item { position: relative; padding: 0 0 1.3rem 2rem; }
.frise__item:last-child { padding-bottom: 0.2rem; }
.frise__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--accent);
}
.frise__texte { font-size: 0.95rem; line-height: 1.55; }
.frise__source { display: block; margin-top: 0.25rem; font-size: 0.78rem; }
.frise__source a { color: var(--muted); }
.frise__source a:hover { color: var(--accent); }

/* Pied DANS la colonne (gabarit unifié §7.10) — variante sans titre (filet seul) */
.pied-article--nu { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--border); }
/* Colonne étroite (901-1150 px) : 2 cartes par rangée, jamais des timbres-poste */
@media (min-width: 901px) and (max-width: 1150px) {
  .article-colonne .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Liens intégrés au fil du texte ([texte](url) dans l'éditeur) */
.article-content p a,
.article-content li a,
.article-content blockquote a {
  color: var(--accent);
  font-weight: 500;
}
.article-content p a:hover,
.article-content li a:hover,
.article-content blockquote a:hover { text-decoration: underline; }
.art-pub {
  display: grid;
  place-items: center;
  min-height: 110px;
  margin: 1.4rem 0;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font: 600 0.7rem var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ---------- Alerts ---------- */
.alert {
  padding: 0.8rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  margin-bottom: 1.4rem;
  border: 1px solid;
}
.alert--ok   { color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 40%, transparent);   background: color-mix(in srgb, var(--ok) 8%, transparent); }
.alert--err  { color: var(--err);  border-color: color-mix(in srgb, var(--err) 40%, transparent);  background: color-mix(in srgb, var(--err) 8%, transparent); }
.alert--warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.alert a { text-decoration: underline; }

/* ---------- Commentaires ---------- */
.count { font: 600 0.85rem var(--mono); color: var(--accent); vertical-align: middle; }

.avatar {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 600 0.8rem var(--font);
  color: var(--sur-accent);
  background: var(--accent);
}

.comment-form { display: flex; gap: 0.9rem; margin-bottom: 2rem; }
.comment-form__field { flex: 1; }
.comment-form textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  color: var(--text);
  font: 0.9rem var(--font);
  resize: vertical;
}
.comment-form textarea:focus { outline: none; border-color: var(--accent); }

.comment-login { color: var(--muted); margin-bottom: 2rem; }
.comment-login a { color: var(--accent); font-weight: 600; }

.comments { list-style: none; display: flex; flex-direction: column; gap: 1.4rem; }
.comment { display: flex; gap: 0.9rem; }
.comment__head { font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.comment__head span:not(.pill) { color: var(--muted); font-size: 0.78rem; }
.comment__body > p:nth-child(2) { font-size: 0.92rem; margin-top: 0.25rem; }

/* Signalement des commentaires (Temps 4a mails) — bouton discret + mini-form motif */
.comment__signaler { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto; background: none; border: 0; color: var(--muted); font: 600 0.72rem var(--font); cursor: pointer; padding: 0.15rem 0.3rem; border-radius: var(--radius-sm); }
.comment__signaler:hover { color: var(--accent); }
.comment__signaler.is-signale { color: var(--warn); }
.comment__head .comment__signaler span { color: inherit; font-size: inherit; }
.signaler-form { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; flex-wrap: wrap; }
.signaler-form input { flex: 1 1 220px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.45rem 0.7rem; color: var(--text); font: 0.82rem var(--font); }
.signaler-form input:focus { outline: none; border-color: var(--accent); }
.signaler-form .btn { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
.signaler-form__note { color: var(--warn); font-size: 0.78rem; flex-basis: 100%; }

/* ---------- Auth ---------- */
.auth-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow);
}
.auth-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--border); }
.auth-tabs a {
  padding: 0.5rem 0.9rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.auth-tabs a.is-active { color: var(--text); border-bottom-color: var(--accent); }
.auth-sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.4rem; }

.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.auth-form label small { font-weight: 400; }
.auth-form input,
.auth-form textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  color: var(--text);
  font: 0.9rem var(--font);
}
.auth-form textarea { resize: vertical; line-height: 1.5; }
.auth-form input:focus,
.auth-form textarea:focus { outline: none; border-color: var(--accent); }
/* Lien « Mot de passe oublié ? » sous le bouton de connexion (Temps 3 mails) */
.auth-oubli { margin: -0.2rem 0 0; text-align: center; font-size: 0.85rem; }
.auth-oubli a { color: var(--muted); }
.auth-oubli a:hover { color: var(--accent); }

/* Page Contact : titre de carte + pot-de-miel anti-robots (hors écran,
   invisible et non focusable pour les humains — les robots le remplissent) */
.auth-titre { font-size: 1.5rem; margin-bottom: 0.4rem; }
.auth-form .champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Page stratégie ---------- */
.strat-cat {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  transition: 0.2s;
}
.strat-cat:hover { border-color: var(--cat); transform: translateY(-2px); }
.strat-cat__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--cat); flex-shrink: 0; }

.strat-note { color: var(--muted); font-size: 0.92rem; margin-top: 1.6rem; }

.strat-engagements { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.strat-engagements li {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.strat-engagements strong { color: var(--text); }

.search-count { color: var(--muted); font-size: 0.9rem; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); background: var(--bg-footer); padding-top: 3rem; margin-top: 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.5fr minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; padding-bottom: 2.5rem; }
.footer h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.9rem; }
.footer nav { display: flex; flex-direction: column; gap: 0.55rem; }
.footer nav a { color: var(--muted); font-size: 0.9rem; }
.footer nav a:hover { color: var(--accent); }
.logo--footer { font-size: 1.15rem; }
.footer__tagline { color: var(--muted); font-size: 0.88rem; margin-top: 0.8rem; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-block: 1.2rem;
  color: var(--muted);
  font-size: 0.82rem;
}

/* ---------- Lecteur vidéo en modale (v1.55 — façade nocookie) ----------
   Le noir du lecteur est VOLONTAIREMENT hors tokens : c'est le letterbox
   vidéo universel, identique dans les deux thèmes (comme un cinéma). */
html.lecteur-ouvert { overflow: hidden; }
html.lecteur-ouvert body { padding-right: var(--barre-defilement, 0px); } /* verrou SANS décalage */
.lecteur { position: fixed; inset: 0; z-index: 220; display: flex; align-items: center; justify-content: center; }
.lecteur__fond { position: absolute; inset: 0; background: rgba(2, 4, 10, 0.82); backdrop-filter: blur(4px); }
.lecteur__carte { position: relative; z-index: 1; width: min(960px, 92vw); aspect-ratio: 16 / 9; background: #000;
  border-radius: 14px; overflow: hidden; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); }
.lecteur--short .lecteur__carte { width: auto; height: min(86vh, 720px); aspect-ratio: 9 / 16; }
.lecteur__carte iframe { display: block; width: 100%; height: 100%; border: 0; }
.lecteur__fermer { position: absolute; z-index: 2; top: 1rem; right: 1rem; display: grid; place-items: center;
  width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, #000 55%, transparent); color: #e7edf7; transition: background 0.2s; }
.lecteur__fermer:hover { background: color-mix(in srgb, #000 80%, transparent); }
.lecteur__yt { position: absolute; z-index: 2; bottom: 1.1rem; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: #94a3b8; text-decoration: none; }
.lecteur__yt:hover { color: #e7edf7; text-decoration: underline; }
/* Encart de consentement (garde CMP 16/08/2026) : jamais un cadre vide —
   explication + geste ; letterbox noir du lecteur assumé, hors tokens */
.lecteur__consentement {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.1rem; height: 100%; padding: 1.6rem; text-align: center;
}
.lecteur__consentement p { margin: 0; max-width: 46ch; color: #94a3b8; font-size: 0.95rem; line-height: 1.65; }

/* ---------- Accueil phase 2 (maquette accueil-hybride, contrat export) ---------- */

/* En-tête de page : baseline seule sous glows plafonnés (8 % cyan / 10 % violet
   en sombre, 5 % / 5 % en clair — jamais au-delà), puis « À la une » */
/* Glows du héros RENFORCÉS (recette 14/08 — valeurs exactes de Nicolas :
   25 % en sombre, 15 % en clair ; amende le plafond 8/10 % de la phase maquettes) */
.accueil-tete {
  background:
    radial-gradient(680px 320px at 16% 0%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 70%),
    radial-gradient(680px 320px at 84% 8%, color-mix(in srgb, var(--accent-2-brand) 25%, transparent), transparent 70%);
  padding: 3.25rem 0 3.25rem;
}
[data-theme="light"] .accueil-tete {
  background:
    radial-gradient(680px 320px at 16% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%),
    radial-gradient(680px 320px at 84% 8%, color-mix(in srgb, var(--accent-2-brand) 15%, transparent), transparent 70%);
}
.accueil-tete h1 { margin-bottom: 2rem; }
.accueil-tete h1 span { color: var(--accent); }

/* Barre de titre de section : intertitre monospace + filet + note ou lien */
.titre-barre { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 1.1rem; }
.titre-barre h2 {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font: 600 0.8rem var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}
.titre-barre__filet { flex: 1; height: 1px; background: var(--border); }
.titre-barre__note { font: 400 0.75rem var(--mono); color: var(--muted); white-space: nowrap; }
.titre-barre__lien {
  font: 600 0.75rem var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.titre-barre__lien:hover { text-decoration: underline; }

/* Trois articles à la une, à égalité — liseré supérieur en couleur de rubrique */
.unes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; align-items: start; }
.une {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--cat-aff);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.25s;
}
.une:hover { transform: translateY(-4px); }
.une__vignette {
  display: block; /* span : sans display, l'aspect-ratio ne s'applique pas */
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(320px 180px at 35% 35%, color-mix(in srgb, var(--cat) 26%, transparent), transparent),
    var(--placeholder);
}
.une__vignette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.une__corps { display: block; padding: 1.1rem 1.25rem 1.25rem; }
.une__kicker {
  font: 600 0.625rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cat-aff);
}
.une h3 { font-size: 1.25rem; line-height: 1.26; letter-spacing: -0.012em; font-weight: 700; margin: 0.7rem 0 0.6rem; text-wrap: pretty; }
.une__date { font: 400 0.75rem var(--mono); color: var(--muted); }

/* Grille de lecture : colonne + latérale 334 px */
.grille-lecture {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 334px;
  gap: 2.8rem; /* recette 14/08 : gouttière resserrée */
  padding: 2.4rem 0 3.5rem;
}
.grille-lecture--haut { padding-top: 0.4rem; /* sous un en-tête de page déjà aéré */ }

/* Shorts en tête de colonne de lecture : grille de 4 vignettes 9:16 —
   la grille se remplit avec les shorts réellement publiés, jamais
   d'emplacement vide, pas de section du tout sans short */
.shorts { padding-bottom: 2rem; margin-bottom: 0.3rem; }
.shorts__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
.short-carte {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-img);
  padding: 0.65rem;
  transition: transform 0.25s;
}
.short-carte:hover { transform: translateY(-3px); }
.short-carte .thumb--short { border-radius: 6px; }
.short-carte h3 { font-size: 0.82rem; font-weight: 600; line-height: 1.35; }

/* Le fil : repères de journée + articles sans filet entre eux */
.titre-fil {
  font: 600 0.8rem var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.jour {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font: 600 0.7rem var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 1.75rem 0 0.25rem;
}
.jour::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.fil-item {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  padding: 1.1rem 0;
}
.fil-item__vignette {
  --cat: var(--accent);
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    radial-gradient(180px 100px at 35% 35%, color-mix(in srgb, var(--cat) 26%, transparent), transparent),
    var(--placeholder);
}
.fil-item__vignette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fil-item__kicker {
  display: block;
  font: 600 0.625rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cat-aff);
  margin-bottom: 0.6rem;
}
.fil-item h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.005em;
  text-wrap: pretty;
  transition: color 0.15s;
}
.fil-item:hover h3 { color: var(--accent); }
.fil-fin { display: flex; justify-content: center; margin-top: 2.1rem; }

/* Colonne latérale de l'accueil : panneaux empilés. Le sous-conteneur
   .lat-sticky (deux derniers modules) n'existe visuellement qu'en desktop —
   en mobile il devient display:contents (règle du bloc ≤ 900 px : la poser
   ici écraserait le sticky desktop, cette section vient APRÈS dans la cascade). */
.lat { display: flex; flex-direction: column; gap: 1rem; }
.lateral-module--accueil { padding: 1.25rem 1.4rem; }
.lat-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; margin-bottom: 1rem; }
.lat-titre {
  font: 600 0.7rem var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.lat-titre--dossiers { color: var(--accent-2); }
.lat-titre--logi { color: var(--accent); }
.lat-lien { font: 600 0.7rem var(--mono); color: var(--accent); white-space: nowrap; }
.lat-lien:hover { text-decoration: underline; }
.lat-note { font-size: 0.82rem; line-height: 1.5; color: var(--muted); margin: -0.6rem 0 1rem; }

/* Dossiers en latérale : vitrine revenu — image PLEINE LARGEUR du module
   au-dessus du titre (retour prod 13/08), plus de pile horizontale étriquée */
.lat-dossier {
  display: block;
  padding-bottom: 0.95rem;
  margin-bottom: 0.95rem;
  border-bottom: 1px solid var(--border);
}
.lat-dossier:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.lat-dossier__vignette {
  --cat: var(--accent);
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 0.6rem;
  background:
    radial-gradient(180px 100px at 35% 35%, color-mix(in srgb, var(--cat) 26%, transparent), transparent),
    var(--placeholder);
}
.lat-dossier__vignette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lat-dossier__titre { display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.4; text-wrap: pretty; transition: color 0.15s; }
.lat-dossier:hover .lat-dossier__titre { color: var(--accent); }

.lat-logi {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}
.lat-logi:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.lat-logi__nom { font-size: 0.875rem; font-weight: 600; line-height: 1.35; transition: color 0.15s; }
.lat-logi:hover .lat-logi__nom { color: var(--accent); }

.lat-video { display: block; }
.lat-video__vignette {
  display: block; /* span : sans display, l'aspect-ratio ne s'applique pas (leçon .une__vignette) */
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--placeholder);
  margin-bottom: 0.65rem;
}
.lat-video__vignette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lat-video__titre { font-size: 0.875rem; font-weight: 600; line-height: 1.35; transition: color 0.15s; }
.lat-video:hover .lat-video__titre { color: var(--accent); }

/* Newsletter en latérale : filet STANDARD comme les autres cartes (retour
   13/08 nuit — le bouton S'inscrire porte assez l'accent à lui seul) */
.lat-news h3 { font-size: 1.0625rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.5rem; }
.lat-news p { font-size: 0.82rem; color: var(--muted); line-height: 1.5; margin-bottom: 0.9rem; }
.lat-news form { display: flex; flex-direction: column; gap: 0.6rem; }
.lat-news input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  color: var(--text);
  font: 0.85rem var(--font);
  outline: none;
}
.lat-news input:focus { border-color: var(--accent); }

/* Primitives de recommandation (règle gravée nº 1 : AUCUNE note chiffrée) —
   deux niveaux + troisième état légitime : aucun badge, place réservée */
.badge-reco {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: 600 0.5625rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 0.32rem 0.6rem;
  white-space: nowrap;
}
.badge-reco--choix { font-weight: 700; background: var(--accent); color: var(--sur-accent); }
.badge-reco--reco { color: var(--muted); border: 1px solid var(--border); }
.badge-reco--vide { visibility: hidden; /* place réservée : les grilles restent alignées */ }

/* Sections pleine largeur avant le pied (catalogue) */
.section-catalogue { padding: 2.75rem 0 3rem; border-top: 1px solid var(--border); }
.section-catalogue .titre-barre { margin-bottom: 0.4rem; }
.section-catalogue__intro { font-size: 0.875rem; line-height: 1.6; color: var(--muted); margin: 0 0 1.4rem; }

/* Vignettes de catégorie de la logithèque : icône monoline, nom, compteur BDD */
.cat-vignettes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.6rem; }
.cat-vignette {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-img);
  padding: 0.9rem 0.9rem 0.8rem;
  transition: 0.2s;
}
.cat-vignette:hover { border-color: var(--accent); transform: translateY(-3px); }
.cat-vignette svg { width: 22px; height: 22px; color: var(--muted); }
.cat-vignette:hover svg { color: var(--accent); }
.cat-vignette__nom { font-size: 0.82rem; font-weight: 600; line-height: 1.25; }
.cat-vignette__compte { font: 400 0.7rem var(--mono); color: var(--muted); }

/* Fiches en vitrine (accueil) : cartes COMPACTES (recette 14/08) — logo
   MODESTE 56 px en tête de rangée avec le nom, jamais de tuile géante */
.logi-vitrine { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.logi-vitrine__carte {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  transition: 0.2s;
}
.logi-vitrine__carte:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-3px); }
.logi-vitrine__tete { display: flex; align-items: center; gap: 0.75rem; }
.logi-vitrine__logo {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--border);
  overflow: hidden;
}
.logi-vitrine__logo img { max-width: 72%; max-height: 72%; object-fit: contain; }
.logi-vitrine__logo .logi-logo--lettre { width: 100%; height: 100%; border-radius: 0; font-size: 1.4rem; }
.logi-vitrine__nom { font-size: 1rem; font-weight: 700; line-height: 1.25; }
.logi-vitrine__carte .btn { margin-top: auto; }
.section-catalogue .mention-partenaire { display: block; margin-top: 1rem; max-width: 80ch; }

/* ---------- Pages de lecture phase 2 (gabarits article-actu + dossier-multipages) ---------- */

/* ---------- Page article : retouches du 25/08/2026 (captures Nicolas) ---------- */

/* ① ACTIONS EN OVERLAY sur l'image à la une : icônes SEULES, agrandies (21 px),
   cibles de 44 px (règle tactile), TOUJOURS en haut à droite — jamais décalées
   au fil du texte. Pastille translucide + flou : lisible sur une image claire
   comme sur une image sombre, sans repeindre l'image. */
.article-content { position: relative; }
.article-actions { position: absolute; top: 0.85rem; right: 0.85rem; z-index: 2; display: flex; gap: 0.5rem; }
.btn-action {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, #fff 20%, transparent);
  background: color-mix(in srgb, #0a0e1a 55%, transparent);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  /* transition au SURVOL (25/08/2026, demande Nicolas) : la pastille se
     densifie, monte d'un cheveu, grossit légèrement et s'auréole de l'accent —
     courbe douce, jamais un « all » (il retarderait la bascule d'état actif). */
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease,
              box-shadow 0.25s ease, transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.btn-action:hover {
  color: var(--accent);
  border-color: var(--accent);
  background-color: color-mix(in srgb, #0a0e1a 78%, transparent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 28%, transparent);
  transform: translateY(-2px) scale(1.07);
}
.btn-action:active { transform: translateY(0) scale(0.96); transition-duration: 0.08s; }
.btn-action svg { transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1); }
.btn-action:hover svg { transform: scale(1.08); }
/* mouvement réduit : la COULEUR signale toujours le survol, le déplacement
   disparaît. Cet override vit APRÈS les règles qu'il annule — une media query
   n'ajoute AUCUNE spécificité, seul l'ordre tranche (constaté au rendu). */
@media (prefers-reduced-motion: reduce) {
  .btn-action, .btn-action svg { transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; }
  .btn-action:hover, .btn-action:active, .btn-action:hover svg { transform: none; }
}
.btn-action.is-actif { color: var(--accent); border-color: var(--accent); }
.btn-action.is-actif svg { fill: currentColor; }
/* article sans image d'ouverture : les actions reprennent le flux, alignées à
   droite — un bouton ne se pose jamais sur du texte */
.article-actions--flux { position: static; justify-content: flex-end; margin-bottom: 0.9rem; }
.article-actions--flux .btn-action {
  background: transparent;
  backdrop-filter: none;
  border-color: var(--border);
  color: var(--muted);
}

/* ② CRÉDIT D'IMAGE posé SUR l'image, en bas à gauche, SANS fond (l'ombre porte
   la lisibilité — ce n'est pas un aplat). La doctrine des crédits (§6.4) est
   intacte : le texte reste le même, il change seulement de place. */
.art-image {
  position: relative;
  /* l'espace sous l'image (25/08/2026, capture Nicolas) : il venait du crédit
     en flux — passé en overlay, il ne pousse plus rien, la figure porte donc
     sa propre marge. */
  margin-bottom: 1.6rem;
}
.art-image figcaption {
  position: absolute;
  left: 0.9rem;
  bottom: 0.75rem;
  right: 0.9rem;
  margin: 0;
  background: none;
  color: color-mix(in srgb, #fff 88%, transparent);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

/* ③ Pastilles typées : le LOGO de la fiche devant son libellé */
.pastille-vue__logo {
  /* AGRANDI (25/08/2026, capture Nicolas) : 20 px se perdait dans la pastille */
  width: 28px;
  height: 28px;
  border-radius: 6px;
  padding: 2px; /* le logo respire dans son cadre blanc */
  object-fit: contain;
  background: #fff;
  flex-shrink: 0;
}

/* ④ « utile ? » mis en avant et partage de fin à deux gestes : les règles
   vivent à leur DÉFINITION d'origine (plus bas) — une seconde déclaration ici
   serait écrasée par elle (constaté au rendu). */

/* ---------- Connexion OAuth (§7.4, 25/08/2026) — chartes OFFICIELLES (règle
   design nº 10, valeurs gravées) : Google 52 px rayon 4, fond #FFFFFF / bord
   #747775 en clair, #131314 / #8E918F en sombre ; Facebook #1877F2 rayon 6,
   libellé blanc 19 px GRAS (contraste 4,23:1 documenté — « texte large »).
   Les couleurs des programmes sont IMPOSÉES : exception assumée au zéro-en-dur. */
.auth-oauth { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1.1rem; }
.btn-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  height: 52px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 1rem;
  transition: filter 0.15s;
}
.btn-oauth:hover { filter: brightness(1.06); }
.btn-oauth svg { flex-shrink: 0; }
.btn-oauth--google { background: #131314; border: 1px solid #8e918f; color: #e3e3e3; }
[data-theme="light"] .btn-oauth--google { background: #ffffff; border-color: #747775; color: #1f1f1f; }
.btn-oauth--facebook { background: #1877f2; border-radius: 6px; color: #fff; font-size: 1.1875rem; font-weight: 700; }
.auth-oauth__mention { font: 400 0.72rem var(--mono); color: var(--muted); line-height: 1.6; }
.auth-oauth__mention a { color: var(--muted); text-decoration: underline dotted; }
.auth-ou { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.3rem; color: var(--muted); font: 600 0.72rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.auth-ou::before, .auth-ou::after { content: ""; flex: 1; height: 1px; background: var(--border); }
/* identité du lecteur (volet C, 25/08/2026) : photo LOCALE ou initiales */
.compte-identite-tete { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.8rem; }
.compte-avatar {
  width: 72px;
  height: 72px;
  border-radius: 100px;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.compte-avatar--initiales {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font: 600 1.5rem var(--mono);
}
/* page compte : une ligne par fournisseur lié */
.compte-identite { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; padding: 0.45rem 0; }
.compte-identite__nom { flex: 1; min-width: 0; }

/* Fil d'Ariane VISIBLE (règle gravée nº 6 — amendement assumé à la v1.36) */
.ariane {
  font: 400 0.7rem var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.6;
  padding-top: 1rem;
}
.ariane a:hover { color: var(--accent); }
.ariane__sep { opacity: 0.5; }
.ariane__ici { color: var(--text); }

/* En-tête d'article */
.article-kicker {
  display: block;
  font: 600 0.7rem var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cat-aff, var(--accent));
  margin-bottom: 1rem;
}
.article-kicker { --cat-aff: var(--cat, var(--accent)); }
[data-theme="light"] .article-kicker { --cat-aff: var(--cat-clair, color-mix(in srgb, var(--cat, var(--accent)) 55%, #000)); }
.article-head h1 { font-size: clamp(1.7rem, 4.4vw, 2.75rem); line-height: 1.08; letter-spacing: -0.028em; text-wrap: pretty; }
.article-chapo {
  font-size: 1.3125rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 76ch; /* suit la mesure élargie (recette 14/08) */
  text-wrap: pretty;
  margin: 0 0 1.4rem;
}

/* En-tête d'article PLEINE LARGEUR au-dessus de la grille (recette 14/08) :
   la latérale démarre à hauteur du CONTENU, pas du titre — la mesure de
   lecture borne le bloc titre+méta */
.article-head--pleine { max-width: 76ch; }
.article-head--pleine .article-meta { margin-bottom: 0.4rem; }
/* Ligne de méta SIMPLE (retour prod 13/08 nuit : les filets encadrants étaient
   trop lourds — la hiérarchie typographique sépare déjà) : date · signature à
   gauche, partage discret 34 px à DROITE SUR la même ligne, de l'air autour.
   Ni compteur sous le seuil, ni temps de lecture estimé (règle gravée nº 5). */
.article-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font: 400 0.75rem var(--mono);
  color: var(--muted);
  margin: 0.5rem 0 1.9rem;
}
.article-meta__sep { opacity: 0.4; }
.article-meta .btn-partager { margin-left: auto; }
/* Partager = élément TYPOGRAPHIQUE de la famille méta (retour 13/08 nuit) :
   libellé + icône en mono discret, même ligne de base que date · signature —
   plus jamais d'icône orpheline. Un rappel vit en fin d'article. */
.btn-partager {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: 400 0.75rem var(--mono);
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s;
}
.btn-partager:hover { color: var(--accent); }
.btn-partager svg { flex-shrink: 0; }
.partage-fin { margin-top: 2rem; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; } /* partager PUIS favori (25/08/2026) */

/* Notation « Utile / Pas utile » (lot C) : même famille TYPOGRAPHIQUE que la
   méta — question + deux boutons mono, état actif à l'accent, agrégat muted.
   Le bloc naît hidden et ne s'affiche que si la notation est active. */
/* MISE EN AVANT (25/08/2026, capture Nicolas) : le filet seul se confondait
   avec le reste du bas de page — la question devient un PANNEAU plein, et sa
   voix passe du murmure monospace au texte courant. */
.vote-utile {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-top: 2.4rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card); /* le public n'a PAS de --panel (token du tdb) : var() invalide = déclaration ignorée */
  font: 400 0.78rem var(--mono);
  color: var(--muted);
}
.vote-utile__question { font: 600 1rem var(--font); color: var(--text); margin-right: 0.2rem; }
.btn-vote {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: 400 0.78rem var(--mono);
  color: var(--muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.5rem 0.9rem;
  min-height: 34px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.btn-vote:hover { color: var(--accent); border-color: var(--accent); }
.btn-vote.is-actif { color: var(--accent); border-color: var(--accent); }
.btn-vote svg { flex-shrink: 0; }
.vote-utile__agregat { color: var(--muted); }
@media (max-width: 640px) {
  .btn-vote { min-height: 44px; } /* cible tactile */
}

/* Favori (lot A espace membre, 14/08/2026) : même famille TYPOGRAPHIQUE que
   Partager — libellé + cœur mono discret. État actif : cœur PLEIN accent.
   L'état se peint côté client (HTML public cacheable, api/favori.php). */
.btn-favori {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: 400 0.75rem var(--mono);
  color: var(--muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.2s;
}
.btn-favori:hover { color: var(--accent); }
.btn-favori svg { flex-shrink: 0; }
.btn-favori.is-actif { color: var(--accent); }
.btn-favori.is-actif svg { fill: currentColor; }
.article-meta .btn-favori { margin-left: auto; }
.article-meta .btn-favori + .btn-partager { margin-left: 0; } /* le cœur prend l'aimant, Partager le suit */
.fiche-head .btn-favori { align-self: flex-start; margin-left: auto; }

/* Page « Mes favoris » (compte.php) : groupes conditionnés à la matière,
   retrait direct par le cœur en bout de ligne (.fil-item reste un lien —
   le cœur vit à côté, jamais dedans) */
.favoris-groupe { margin-bottom: 2.6rem; }
.favoris-ligne { display: flex; align-items: center; gap: 0.9rem; }
.favoris-ligne .fil-item { flex: 1; min-width: 0; }
.favoris-ligne .btn-favori { flex-shrink: 0; }
.favori-logi {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0;
}
.favori-logi .logi-logo { flex-shrink: 0; }
.favori-logi__nom { font-weight: 600; }
.favori-logi__type { font: 400 0.72rem var(--mono); color: var(--muted); }
.favoris-sorties { display: flex; gap: 0.8rem; flex-wrap: wrap; }

/* Espace personnel (lot B) : onglets nav-pills, cartes de profil, liste des
   commentaires du lecteur avec statut de modération transparent */
.compte-onglets { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.compte-identite { margin-bottom: 2rem; }
.compte-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 1.4rem;
  align-items: start;
}
.compte-carte {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.compte-carte h2 { font-size: 1.05rem; margin-bottom: 1.1rem; }
.compte-carte .btn { align-self: flex-start; }
.compte-note { font: 400 0.75rem var(--mono); color: var(--muted); }
.com-perso { padding: 1.1rem 0; }
.com-perso__meta {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  font: 400 0.75rem var(--mono);
  color: var(--muted);
  margin-bottom: 0.45rem;
}
.com-perso__meta a { color: var(--accent); }
.com-perso__statut {
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.15rem 0.6rem;
  font-weight: 600;
}
.com-perso__statut--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.com-perso__statut--attente { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.com-perso__statut--refus { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.com-perso__texte { line-height: 1.65; max-width: 76ch; }
.com-perso__motif { font-size: 0.85rem; color: var(--muted); margin-top: 0.4rem; max-width: 76ch; }
.compte-texte { color: var(--muted); line-height: 1.65; margin-bottom: 1.1rem; }
.btn--danger-texte { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.btn--danger-texte:hover { color: var(--err); border-color: var(--err); }

/* Corps de lecture : intertitres et gabarits (le HTML art-* est FIGÉ en base
   — on ne restyle que par CSS, jamais en régénérant les articles) */
.article-content h2 { margin: 2rem 0 0.9rem; font-size: 1.75rem; line-height: 1.22; letter-spacing: -0.02em; }
.article-content h3 { margin: 1.8rem 0 0.8rem; font-size: 1.4375rem; line-height: 1.28; letter-spacing: -0.014em; }
.art-intro { font-size: 1.3125rem; line-height: 1.6; font-weight: 400; color: var(--muted); text-wrap: pretty; }
/* Citation : liseré violet, corps affirmé — la barre violette lui est RÉSERVÉE
   (« À découvrir » porte une pastille pleine, jamais la barre — règle skill) */
.art-citation {
  border-left: 3px solid var(--accent-2);
  padding: 0.15rem 0 0.15rem 1.4rem;
  margin: 0 0 1.6rem;
  font-size: 1.375rem;
  line-height: 1.5;
  font-weight: 600;
  font-style: normal;
  color: var(--text);
  text-wrap: pretty;
}
/* Encart « À retenir » : liseré cyan sur panneau (gabarit lecture phase 2) */
.art-encadre {
  border: 1px solid var(--accent);
  border-left-width: 4px;
  background: var(--card);
  border-radius: var(--radius-img);
  padding: 1.05rem 1.25rem;
  margin: 0 0 1.6rem;
  font-size: 1rem;
  line-height: 1.7;
}
/* « Piège à éviter » (lot 6) : la sémantique WARN retrouvée pour les tutos */
.art-encadre--piege {
  border-color: color-mix(in srgb, var(--warn) 55%, transparent);
  border-left-color: var(--warn);
}
.art-image figcaption { font: 400 0.75rem var(--mono); line-height: 1.6; color: var(--muted); margin-top: 0.6rem; }
.art-image img { border-radius: var(--radius-img); }
/* même sélecteur MORT que la borne de hauteur (lot L2) : l'image de une n'a
   jamais reçu son rayon distinct. Corrigé à la même porte. */
.article-content figure.art-image:first-of-type img { border-radius: var(--radius); }
.art-lien { font-family: var(--mono); font-size: 0.8125rem; line-height: 1.5; margin-bottom: 0.55rem; }
.art-pub {
  display: block;
  min-height: 0;
  margin: 1.6rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  padding: 0.85rem 1rem 1rem;
  color: var(--muted);
  font: 600 0.625rem var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.art-pub span { display: block; margin-bottom: 0.75rem; }
.art-pub::after {
  content: "";
  display: block;
  height: 110px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

/* « À découvrir » : recirculation dans le corps — panneau complet + PASTILLE
   pleine violette (jamais la barre latérale, réservée à la citation) */
.decouvrir {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  padding: 1.1rem 1.25rem;
  margin: 0 0 1.8rem;
  transition: border-color 0.2s;
}
.decouvrir:hover { border-color: color-mix(in srgb, var(--accent-2-brand) 55%, transparent); }
.decouvrir__vignette {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--placeholder);
}
.decouvrir__vignette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.decouvrir__pastille {
  display: inline-block;
  font: 600 0.625rem var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--accent-2-brand);
  color: #fff;
  border-radius: 100px;
  padding: 0.3rem 0.7rem;
  margin-bottom: 0.65rem;
}
.decouvrir__titre { display: block; font-size: 1.1875rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; text-wrap: pretty; }
.decouvrir__meta { display: block; font: 400 0.75rem var(--mono); color: var(--muted); margin-top: 0.6rem; }

/* Pastilles typées de fin d'article (règle gravée nº 2 : vues sur des
   structures EXISTANTES — entité, sous-catégorie, dossier ; aucune page /tag/) */
.pastilles { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; }
.pastille-vue {
  display: inline-flex;
  /* CENTRÉ en hauteur (25/08/2026, capture Nicolas) : en `baseline`, le logo
     (20 px) s'alignait sur la ligne de base du texte et débordait vers le
     haut. Le mobile centrait déjà (règle 640) — le desktop suit. */
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.6rem 0.9rem;
  transition: border-color 0.15s;
}
.pastille-vue:hover { border-color: var(--accent); }
/* Fiches SANS LIEN sur les pages traduites (lot B, 28/08/2026) : AUCUNE
   affordance — curseur par défaut, hover neutre. Une pastille qui a l'air
   cliquable et ne mène nulle part mentirait pire que l'absence. */
.lateral-entite--inerte, .pastille-vue--inerte, .logi-card--inerte { cursor: default; }
.lateral-entite--inerte:hover .lateral-entite__nom { color: var(--text); }
.pastille-vue--inerte:hover { border-color: var(--border); }
.logi-card--inerte:hover { border-color: var(--border); transform: none; }
.pastille-vue__type {
  font: 600 0.5625rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.pastille-vue__nom { font: 500 0.75rem var(--font); color: var(--text); }

/* Bloc sources (liens d'appui en fin de corps) */
.article-sources { border-top: 1px solid var(--border); padding-top: 1.4rem; margin-top: 2.1rem; }
.article-sources h2 {
  font: 600 0.7rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.75rem;
}
.article-sources .art-lien a { color: var(--accent); font-weight: 400; }

/* Dossier multi-pages : progression + pagination inter-pages */
.progression { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.progression__label {
  font: 600 0.7rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.progression__jauge { flex: 1; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
/* --pct : variable de DONNÉE posée par article.php (comme --cat) */
.progression__jauge span { display: block; height: 100%; width: var(--pct, 0%); background: var(--accent); }
.section--article { padding-top: 1.4rem; }
.article-content h2.titre-page { margin-top: 0; font-size: 2.125rem; line-height: 1.15; letter-spacing: -0.024em; font-weight: 800; }
/* Badge de format PLEIN (en-tête de dossier : pastille pleine violette) */
.badge-format--plein {
  background: var(--accent-2-brand);
  color: #fff;
  font-size: 0.6875rem;
  padding: 0.35rem 0.75rem;
  margin-left: 0;
}
/* Pas de filet au-dessus : les cartes bordées se séparent d'elles-mêmes
   (retour prod 13/08 soir — un filet traînait après la fin du contenu) */
.pagination-pages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2.4rem;
}
.page-voisine {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  transition: border-color 0.15s;
}
.page-voisine__sens {
  font: 600 0.7rem var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.page-voisine__titre { font-size: 0.9375rem; font-weight: 700; line-height: 1.35; }
.page-voisine--suivante { border-color: var(--accent); text-align: right; grid-column: 2; }
.page-voisine--suivante .page-voisine__sens { color: var(--accent); }
.page-voisine:hover { border-color: var(--accent); }

/* Sommaire latéral du dossier : numéros, pages lues en plein, suivantes atténuées */
.lateral-sommaire__lien { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0.6rem; align-items: baseline; padding: 0.6rem 0; border-bottom: 1px solid var(--border); border-radius: 0; color: var(--muted); font-size: 0.875rem; font-weight: 600; line-height: 1.4; }
.lateral-sommaire__lien:last-child { border-bottom: none; }
.lateral-sommaire__lien:hover { color: var(--text); background: none; }
.lateral-sommaire__num { font: 600 0.75rem var(--mono); color: var(--muted); min-width: auto; }
.lateral-sommaire__lien.is-lu, .lateral-sommaire__lien.is-active { color: var(--text); font-weight: 700; background: none; }
.lateral-sommaire__lien.is-lu .lateral-sommaire__num, .lateral-sommaire__lien.is-active .lateral-sommaire__num { color: var(--accent); }


/* Pied « Pour aller plus loin » / « Autres dossiers » (HTML figé) : le titre
   prend le style d'intertitre monospace avec filet */
/* Sans filet non plus (retour 13/08 nuit) : le titre monospace + son propre
   filet suffisent à ouvrir la section */
.pied-plein-largeur { padding: 2.4rem 0 2.6rem; }
.pied-plein-largeur .pied-article { margin-top: 0; }
.pied-plein-largeur .pied-article h2,
.pied-article h2 {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  font: 600 0.8rem var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  border-top: none;
  padding-top: 0;
  margin-bottom: 1.4rem;
}
.pied-article h2::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.pied-article .video-card h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -0.01em; }

/* Commentaires phase 2 : sur le fond, séparés par un filet */
.section--commentaires { border-top: 1px solid var(--border); }
.commentaires-bloc { max-width: 820px; }
.section--commentaires .section__head h2 { font-size: 1.625rem; letter-spacing: -0.02em; font-weight: 800; }
.count { color: var(--accent); }
.avatar {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--accent);
  font: 700 0.875rem var(--mono);
  width: 48px; height: 48px;
}
.comment-form textarea { min-height: 104px; border-radius: var(--radius-img); }
.comment-note { font: 400 0.75rem var(--mono); color: var(--muted); }
.comment-form__actions { display: flex; align-items: center; gap: 1rem; margin-top: 0.85rem; }
.comments { border-top: 1px solid var(--border); padding-top: 1.6rem; }
.section--commentaires .empty { border-top: 1px solid var(--border); margin-top: 1.4rem; padding-top: 1.4rem; }

/* ---------- Navigation et catalogue phase 2 (lot 3) ---------- */

/* Tête de rubrique TEINTÉE (décision Nicolas 25/08/2026) : la recette des
   glows de l'accueil (.accueil-tete — 25 % sombre / 15 % clair, mêmes rayons),
   où le PREMIER halo prend la COULEUR DE LA RUBRIQUE (--cat-aff, dérivée du
   --cat posé par cat_vars() sur la bande — la même définition que les
   pastilles, variante claire comprise en thème papier) et le second garde le
   violet de marque : chaque rubrique a son ambiance, la marque reste commune.
   Rubrique sans couleur : cat_vars() émet --cat: var(--accent) — halo accent
   standard, jamais un fond cassé. */
/* RETOUCHES 25/08/2026 au soir (valeurs de Nicolas) — trois choses :
   ① les DEUX halos prennent la couleur de la rubrique (--cat-aff) : l'accent
     de marque quitte ces bandes, la rubrique tient les deux positions de la
     recette accueil, mêmes mix (25 % sombre / 15 % clair, comme .accueil-tete) ;
   ② les halos DÉBORDENT la bande. Mécanisme RELEVÉ sur l'accueil (mesuré) :
     là-bas rien ne déborde vraiment — .accueil-tete fait 622 px de haut pour
     des radiaux de 320 px, qui s'estompent DANS la boîte. Une bande de tête
     courte (~130 px) TRONQUE le même halo à mi-course : c'est ce que l'écran
     montrait. On rend donc à la surface peinte sa taille naturelle — un
     pseudo-élément de la HAUTEUR EXACTE du radial (320 px), ancré au sommet,
     qui dépasse la bande : le dégradé va au bout de sa course et s'éteint
     comme sur l'accueil, au lieu d'être coupé net. `isolation: isolate` crée
     le contexte d'empilement qui garde le halo derrière le contenu de la
     bande sans le renvoyer derrière le fond de page ;
   ③ plus de padding-bottom : la bande s'arrête au texte, le halo continue. */
.cat-tete-bande {
  position: relative;
  isolation: isolate;
}
.cat-tete-bande::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;      /* ancré au SOMMET — la hauteur fait le débordement */
  height: 320px;          /* la taille du radial de .accueil-tete, à l'identique */
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(680px 320px at 16% 0, color-mix(in srgb, var(--cat-aff, var(--accent)) 25%, transparent), transparent 70%),
    radial-gradient(680px 320px at 84% 8%, color-mix(in srgb, var(--cat-aff, var(--accent)) 25%, transparent), transparent 70%);
}
[data-theme="light"] .cat-tete-bande::before {
  background:
    radial-gradient(680px 320px at 16% 0, color-mix(in srgb, var(--cat-aff, var(--accent)) 15%, transparent), transparent 70%),
    radial-gradient(680px 320px at 84% 8%, color-mix(in srgb, var(--cat-aff, var(--accent)) 15%, transparent), transparent 70%);
}
/* l'air sous le fil d'Ariane (cohérent avec l'accueil : h1 à 52 px du haut,
   32 px sous le titre) — l'ariane reste transparent, rien ne coupe le halo */
.cat-tete-bande .ariane { padding-bottom: 1.5rem; }

/* RESSERREMENT VERTICAL de la tête de rubrique (25/08/2026 au soir, capture
   Nicolas) : sous la bande, les blancs empilés du gabarit générique
   (.section--article 22 px + .nav-pills 22/21 px + .grille-lecture 38 px)
   faisaient 45 px avant les pastilles et 59 px après. Le sélecteur
   d'ADJACENCE ne vise QUE les pages rubrique et sous-catégorie — article.php
   garde son .section--article, l'accueil sa .grille-lecture, intacts. */
.cat-tete-bande + .section--article { padding-top: 0.5rem; }
.cat-tete-bande + .section--article .nav-pills { padding: 0.7rem 0 0.8rem; }
.cat-tete-bande + .section--article .grille-lecture { padding-top: 1.1rem; }

/* En-tête de rubrique : liseré de la couleur de catégorie, descriptif, compte */
.cat-tete {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.cat-tete__bloc { border-left: 4px solid var(--cat-aff); padding-left: 1.1rem; }
.cat-tete h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.08; margin-bottom: 0.6rem; }
/* clampé à 2 lignes (recette 14/08) : l'en-tête reste bas, le descriptif complet vit au CDC */
.cat-tete__descriptif {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cat-tete__compte { font: 400 0.75rem var(--mono); color: var(--muted); margin-left: auto; padding-bottom: 0.4rem; white-space: nowrap; }

/* Pastilles de navigation à compteurs (sous-catégories, formats de dossiers) */
.nav-pills { display: flex; gap: 0.6rem; flex-wrap: wrap; padding: 1.4rem 0 1.3rem; }
.nav-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.65rem 0.95rem;
  font: 600 0.82rem var(--font);
  color: var(--text);
  transition: border-color 0.15s;
}
.nav-pill:hover { border-color: var(--cat-aff, var(--accent)); }
.nav-pill.is-active { border-color: var(--cat-aff, var(--accent)); background: var(--card); }
.nav-pill__compte { font: 400 0.7rem var(--mono); color: var(--muted); }

/* Mise en avant de rubrique : dernier article, liseré de catégorie */
.mise-avant {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2rem;
  align-items: center;
  border: 1px solid var(--border);
  border-top: 3px solid var(--cat-aff);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
  margin-bottom: 1.25rem;
  transition: transform 0.25s;
}
.mise-avant:hover { transform: translateY(-3px); }
.mise-avant__corps { display: block; padding: 1.6rem 0 1.6rem 1.75rem; }
.mise-avant__kicker {
  display: block;
  font: 600 0.625rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cat-aff);
  margin-bottom: 0.75rem;
}
.mise-avant__titre { display: block; font-size: 1.75rem; font-weight: 800; line-height: 1.18; letter-spacing: -0.02em; text-wrap: pretty; }
.mise-avant__chapo { display: block; font-size: 0.9375rem; line-height: 1.6; color: var(--muted); margin-top: 0.75rem; text-wrap: pretty; }
.mise-avant__date { display: block; font: 400 0.75rem var(--mono); color: var(--muted); margin-top: 0.85rem; }
.mise-avant__vignette {
  position: relative;
  align-self: stretch;
  min-height: 220px;
  background: var(--placeholder);
}
.mise-avant__vignette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Fil riche (rubrique, sous-catégorie, recherche) : pastille de format +
   kicker + chapô + date, même gabarit .fil-item */
.fil-item__tetiere { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.fil-item__pastille {
  display: inline-flex;
  align-items: center;
  font: 600 0.625rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cat-aff);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.38rem 0.7rem;
}
.fil-item__tetiere .fil-item__kicker { display: inline; margin-bottom: 0; }
.fil-item__chapo { display: block; font-size: 0.9375rem; line-height: 1.6; color: var(--muted); margin-top: 0.6rem; text-wrap: pretty; }
.fil-item__date { display: block; font: 400 0.75rem var(--mono); color: var(--muted); margin-top: 0.75rem; }

/* Cartes de l'index des dossiers */
.dossiers-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.dossier-carte {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
  transition: transform 0.25s, border-color 0.2s;
}
.dossier-carte:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent-2-brand) 55%, transparent); }
.dossier-carte__vignette { display: block; position: relative; aspect-ratio: 16 / 9; background: var(--placeholder); }
.dossier-carte__vignette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dossier-carte__corps { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.1rem 1.25rem 1.25rem; flex: 1; align-items: flex-start; }
.dossier-carte__titre { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; text-wrap: pretty; }
.dossier-carte__chapo { font-size: 0.875rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.dossier-carte__meta { font: 400 0.7rem var(--mono); color: var(--muted); margin-top: auto; padding-top: 0.5rem; }

/* Bloc éditorial (« Comment on fait un dossier », « Comment on choisit ») */
.bloc-editorial {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  padding: 1.4rem 1.6rem;
  margin-top: 2.4rem;
}
.bloc-editorial h2 {
  font: 600 0.75rem var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.8rem;
}
.bloc-editorial p { font-size: 0.9375rem; line-height: 1.7; color: var(--muted); max-width: 84ch; text-wrap: pretty; }
.bloc-editorial p + p { margin-top: 0.6rem; }

/* Fiches de la logithèque (cartes colonnes, CTA interne — règle nº 4) */
.fiches-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.fiche-carte {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  padding: 1.1rem;
  transition: transform 0.2s, border-color 0.2s;
}
.fiche-carte:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
/* Carte COMPACTE (recette 14/08) : logo modeste 56 px en rangée avec le nom */
.fiche-carte__tete { display: flex; align-items: center; gap: 0.75rem; }
.fiche-carte__logo {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--border);
  overflow: hidden;
}
.fiche-carte__logo img { max-width: 72%; max-height: 72%; object-fit: contain; }
.fiche-carte__logo .logi-logo--lettre { width: 100%; height: 100%; border-radius: 0; font-size: 1.4rem; }
.fiche-carte__nom { font-size: 1rem; font-weight: 700; line-height: 1.25; }
.fiche-carte__meta { font: 400 0.7rem var(--mono); line-height: 1.5; color: var(--muted); }
.fiche-carte .btn { margin-top: auto; }

/* Carte d'identité de la fiche logiciel : liseré cyan, lignes clé-valeur */
.carte-identite { border-color: var(--accent); }
.carte-identite .lat-titre { display: block; margin-bottom: 0.4rem; }
.carte-identite__verif { font: 400 0.7rem var(--mono); color: var(--muted); margin: 0 0 0.5rem; }
.carte-identite__ligne {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
  line-height: 1.5;
}
.carte-identite__cle {
  font: 600 0.625rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.15rem;
}
.carte-identite .btn { margin-top: 1rem; }
.carte-identite .mention-partenaire { display: block; margin-top: 0.6rem; }

/* Fiche logiciel : colonne d'avis plus large (1fr / 380px) */
.article-layout--fiche { grid-template-columns: minmax(0, 1fr) 380px; }
.fiche-head .badge-reco { vertical-align: middle; }

/* « Pourquoi c'est notre choix » : l'encart qui remplace la note chiffrée */
.encart-avis {
  border: 1px solid var(--accent);
  border-left-width: 4px;
  border-radius: var(--radius-img);
  background: var(--card);
  padding: 1.05rem 1.25rem;
  margin: 0 0 1.6rem;
}
.encart-avis h2 {
  font: 600 0.7rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6rem;
}
.encart-avis p { font-size: 1rem; line-height: 1.7; margin: 0; text-wrap: pretty; }

/* « Ce qu'il fait bien » / « Ses limites » : la fiche dit toujours les deux */
.forces-limites { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 0 0 1.8rem; }
.forces-limites > div {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  padding: 1.1rem 1.25rem;
}
.forces-limites h2 {
  font: 600 0.7rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 0.7rem;
}
.forces-limites ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.forces-limites li { font-size: 0.9375rem; line-height: 1.55; padding-left: 1.1rem; position: relative; color: color-mix(in srgb, var(--text) 88%, var(--muted)); }
.forces-limites li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }
.forces-limites .limites li::before { background: var(--muted); }

/* ---------- Entités et recherche phase 2 (lot 4) ---------- */

/* Champ de recherche rappelé : liseré cyan, requête en 18 px, croix d'effacement */
.recherche-champ {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--card);
  border: 1px solid var(--accent);
  border-radius: var(--radius-img);
  padding: 0.7rem 1rem;
  margin-bottom: 1.4rem;
}
.recherche-champ input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font: 500 1.125rem var(--font);
}
.recherche-champ input::placeholder { color: var(--muted); font-weight: 400; }
.recherche-champ__effacer {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: color 0.15s;
}
.recherche-champ__effacer:hover { color: var(--err); }
.recherche-compte { font: 400 0.8rem var(--mono); color: var(--muted); margin-bottom: 0.4rem; }
.recherche-vide p { color: var(--muted); max-width: 68ch; line-height: 1.7; margin: 1rem 0 1.4rem; text-wrap: pretty; }
.recherche-vide .titre-fil { margin-top: 1.6rem; }
.titre-barre--haut { margin-top: 2.2rem; }

/* Résultat « fiche » : le logo vit sur blanc, contenu, jamais recadré */
.fil-item__vignette--logo { background: #fff; }
.fil-item__vignette--logo img { object-fit: contain; padding: 12%; }
.fil-item__vignette--logo .logi-logo--lettre { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; font-size: 2.4rem; }

/* Galerie d'entité : mosaïque, la première image en double largeur */
.galerie__item:first-child { grid-column: 1 / -1; }

/* Frise : le jalon le plus RÉCENT (premier) en cyan plein, les autres discrets */
.frise__item::before { background: var(--bg); border-color: var(--muted); }
.frise__item:first-child::before { background: var(--accent); border-color: var(--accent); }

/* ---------- Comptes et erreurs phase 2 (lot 5) ---------- */

/* Gabarit centré 440 px (les pages d'auth : exception documentée — le 768
   y est identique au 1280) */
.container--auth { width: min(440px, 100% - 3rem); }
.auth-form input:not([type="checkbox"]) { height: 52px; padding: 0 0.95rem; /* champs de 52 px (maquette) */ }

/* Œil d'affichage du mot de passe : 36 px, dans le champ */
.champ-mdp { position: relative; display: block; }
.champ-mdp input { width: 100%; padding-right: 3rem; }
.oeil {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
}
.oeil:hover { color: var(--accent); }

/* Consentement RGPD : case explicite, jamais pré-cochée (spécificité > .auth-form label) */
.auth-form label.auth-consentement { flex-direction: row; align-items: flex-start; gap: 0.65rem; font-weight: 400; }
.auth-consentement input { width: 18px; height: 18px; margin-top: 0.15rem; flex-shrink: 0; accent-color: var(--accent); }
.auth-consentement span { font-size: 0.82rem; line-height: 1.55; color: var(--muted); }
.auth-consentement a { color: var(--accent); }

/* Page 404 intégrée (gabarit erreur-404) */
.surtitre-erreur {
  font: 600 0.7rem var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.7rem;
}
.erreur-titre { font-size: clamp(1.75rem, 4.5vw, 2.5rem); margin-bottom: 0.8rem; }
.erreur-cause { color: var(--muted); font-size: 1.0625rem; line-height: 1.65; max-width: 58ch; text-wrap: pretty; margin-bottom: 1.6rem; }
.erreur-sorties { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1.2rem; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* Micro-retouches mobile (valeurs dictées par Nicolas, 25/08/2026 — DÉFAUT
     v3.14 corrigé) : elles vivent AU point de rupture de l'interface mobile
     (≤ 900 px : burger, outils masqués), pas à 640 — un téléphone en paysage
     ou une fenêtre de 641-900 px voyait l'interface mobile avec les marges
     desktop. Le corps d'article a SA boîte (.article-layout) : alignée. */
  .container { width: calc(100% - 2rem); }
  .container--auth { width: min(440px, calc(100% - 2rem)); } /* le gabarit auth garde son plafond centré */
  .nav--cats { padding: 0; }
  .nav__link { padding: 0.6rem 0.5rem 0.7rem; }

  .hero__grid { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: minmax(0, 1fr); width: min(780px, calc(100% - 2rem)); } /* largeur de lecture = narrow, marges mobiles */
  .article-lateral { display: none; } /* §7.10 : le pied de vignettes couvre le rôle */
  .grid--3 { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .plus-lus__grille { grid-template-columns: 1fr 1fr; }

  /* En-tête compact (maquette 768) : le wordmark reste, les pastilles
     Dossiers/Logithèque et le champ de recherche s'effacent — recherche,
     thème et menu passent en boutons de 44 px ; les rubriques gardent leur
     barre défilante */
  .outils, .search, .acces { display: none; }
  .search-lien { display: grid; }
  .theme-toggle { width: 44px; height: 44px; }
  .nav-burger {
    display: grid;
    place-items: center;
    order: 3; /* après le groupe d'actions, tout à droite */
    width: 44px; height: 44px;
    background: transparent; /* c'est un <button> depuis le tiroir C4 */
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text);
  }
  .nav-burger:hover { color: var(--accent); border-color: var(--accent); /* tokens, comme ses voisins (recette 14/08) */ }
  /* le glyphe est un SVG inline (24/08/2026 au soir) : trois traits ÉGAUX,
     même stroke/terminaisons que la loupe et la lune voisines — une seule
     famille d'icônes, plus de spans à aligner à la main */

  /* Lot 3 : grilles resserrées, mise en avant empilée (image en tête) */
  .dossiers-grille { grid-template-columns: 1fr 1fr; }
  .fiches-grille { grid-template-columns: 1fr 1fr; }
  .mise-avant { grid-template-columns: 1fr; gap: 0; }
  .mise-avant__vignette { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
  .mise-avant__corps { padding: 1.2rem 1.4rem 1.4rem; }

  /* Accueil : une seule colonne, la latérale passe sous le fil en grille de 2 —
     .lat-sticky devient transparent (ses modules rejoignent la grille, ordre
     DOM inchangé) */
  .grille-lecture { grid-template-columns: 1fr; gap: 1.9rem; }
  .lat { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .lat-sticky { display: contents; }
  .unes { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .une:first-child { grid-column: 1 / -1; }
  .fil-item { grid-template-columns: 200px minmax(0, 1fr); gap: 1.1rem; }
  .cat-vignettes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .logi-vitrine { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .lecteur__carte { width: 96vw; border-radius: 10px; }
  .lecteur--short .lecteur__carte { width: 100vw; height: 100dvh; aspect-ratio: auto; border-radius: 0; } /* Short plein écran téléphone */
  .lecteur--short .lecteur__yt { bottom: max(1.1rem, env(safe-area-inset-bottom)); }
  .grid--3 { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: 1fr; }

  .hero { padding-block: 2.8rem 2.4rem; }
  /* v1.45 : header une seule ligne à 360 (le gap large faisait passer le
     bouton thème sous le logo) */
  .header__inner { column-gap: 0.65rem; }
  .header__actions { gap: 0.65rem; }
  .header .logo { font-size: 1.4rem; } /* valeur dictée par Nicolas (25/08/2026) — remplace les 21 px de l'échelle wordmark */
  .comment-form { flex-direction: column; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: 0.4rem; }

  /* Lecture 390/640 : gabarits resserrés (échelle 26/21, cartes empilées) */
  .article-content h2 { font-size: 1.625rem; }
  .article-content h3 { font-size: 1.3125rem; }
  .article-content h2.titre-page { font-size: 1.75rem; }
  .art-citation { font-size: 1.1875rem; }
  .article-chapo { font-size: 1.0625rem; }
  .decouvrir { grid-template-columns: 1fr; }
  .pagination-pages { grid-template-columns: 1fr; }
  .page-voisine--suivante { grid-column: auto; text-align: left; }

  /* Cibles tactiles 44 px OBLIGATOIRES à 390 (règle gravée — pagination et
     pastilles comprises ; la pagination est déjà à 44) */
  .pastille-vue, .nav-pill { min-height: 44px; align-items: center; }

  /* Lot 3 à 390 : pleine largeur partout */
  .dossiers-grille { grid-template-columns: 1fr; }
  .fiches-grille { grid-template-columns: 1fr; }
  .forces-limites { grid-template-columns: 1fr; }
  .cat-tete__compte { margin-left: 0; padding-bottom: 0; }

  /* Accueil 390 (maquette) : tout en une colonne, gabarits resserrés */
  .accueil-tete { padding: 1.9rem 0 1.9rem; }
  .accueil-tete h1 { margin-bottom: 1.4rem; }
  .unes { grid-template-columns: 1fr; gap: 1rem; }
  .une:first-child { grid-column: auto; }
  .shorts__grille { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  /* Le fil compact mobile (décision Nicolas 25/08/2026, AMENDÉE le soir sur
     capture : vignette à GAUCHE — REMPLACE la pile du 24/08) : vignette
     CARRÉE arrondie 84 px à gauche, centrée verticalement, kicker puis titre
     à droite (3 lignes max, ellipse). Le groupement par jour et les liens ne
     changent pas ; au-dessus de 640 px, la disposition 16:9 est inchangée.
     Le chapô de la variante riche s'efface à cette taille (format compact
     assumé) ; la date reste. L'ordre du DOM (vignette d'abord) suffit :
     aucune inversion. */
  .fil-item { grid-template-columns: 84px minmax(0, 1fr); gap: 1rem; align-items: center; padding: 0.95rem 0; }
  .fil-item__vignette { aspect-ratio: 1 / 1; }
  .fil-item__corps { min-width: 0; }
  .fil-item h3 {
    font-size: 1.0625rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
  }
  .fil-item__chapo { display: none; }
  .fil-item__kicker { margin-bottom: 0.35rem; }
  .fil-item__date { margin-top: 0.45rem; }
  .plus-lus { padding: 1.1rem 1.2rem; }
  .plus-lus__grille { grid-template-columns: 1fr; }
  .lat { grid-template-columns: 1fr; }
  .cat-vignettes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logi-vitrine { grid-template-columns: 1fr; }
}


/* ── Suggestion de langue (vague A multilingue, 26/08/2026) ──────────────
   Bandeau DISCRET et refusable, jamais une redirection. Rendu masqué par le
   serveur (`hidden`) et révélé par main.js seulement si la langue du
   navigateur correspond à une alternative RÉELLE : un robot, qui n'exécute
   pas le script, ne le voit jamais. */
.suggestion-langue { border-bottom: 1px solid var(--border); background: var(--card); }
.suggestion-langue__inner {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  padding: .7rem 24px; font-size: .95rem;
}
.suggestion-langue__texte { margin: 0; color: var(--text); flex: 1 1 auto; min-width: 0; }
.suggestion-langue .btn { padding: .45rem .9rem; font-size: .9rem; }
@media (max-width: 640px) {
  .suggestion-langue__inner { gap: .6rem; padding: .7rem 16px; }
  .suggestion-langue__texte { flex-basis: 100%; }
  /* cibles tactiles : la règle des 44 px vaut aussi ici */
  .suggestion-langue .btn { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Sélecteur de langue du pied — une seule langue active : rien n'est rendu */
.langues-choix { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.langues-choix a { display: inline-flex; align-items: center; gap: .3rem; }
.langues-choix a[aria-current="true"] { color: var(--accent); }


/* ══ AUCUN DÉFILEMENT HORIZONTAL DU DOCUMENT (garde générale, 26/08/2026) ══
   Décision Nicolas après le débordement de l'image de une : la règle ne vise
   pas une image, elle vise le GABARIT. Un tableau, un bloc de code ou une
   vidéo posera un jour le même problème — chacun doit défiler DANS SON PROPRE
   conteneur, jamais en emportant la page (en-tête compris).

   Trois étages, du structurel au filet :
     1. les pistes de grille sont en minmax(0, …) — voir ci-dessus : c'est la
        correction de FOND, celle qui empêche le conteneur de grandir ;
     2. tout contenu potentiellement plus large que la colonne se borne et
        défile chez lui ;
     3. `overflow-x: clip` sur body est la CEINTURE. `clip` et non `hidden` :
        `hidden` créerait un conteneur de défilement et casserait le
        `position: sticky` de .lat-sticky. Une ceinture ne dispense pas des
        deux premiers étages — le banc mesure les BOÎTES, pas le seul
        scrollWidth, précisément pour qu'elle ne puisse pas verdir un défaut. */
body { overflow-x: clip; }

.article-content table,
.article-content pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.article-content img,
.article-content video,
.article-content iframe,
.article-content svg { max-width: 100%; }
.video-embed { max-width: 100%; }

/* ── LA CONTRAINTE NE VISE PLUS L'IMAGE, MAIS SA PLACE (26/08/2026, relevé
   prod de Nicolas) ──────────────────────────────────────────────────────
   L'image de une porte `data-cmp-info` : le script d'AUTOBLOCAGE d'iubenda
   (`cs.iubenda.com/autoblocking/{siteId}.js`, chargé en production, jamais en
   local faute de variables) inspecte l'élément et peut, selon l'état du
   consentement, le remplacer par un PLACEHOLDER — lequel n'est plus un `img`
   et échappe donc à `.art-image img`. Cela expliquerait l'intermittence
   constatée (un article passe, l'autre non) et pourquoi le défaut ne se
   reproduit jamais dans nos bancs, qui tournent sans iubenda.

   On cesse donc de contraindre l'IMAGE pour contraindre SA PLACE : la figure
   et TOUT ce qui l'occupe, quel qu'en soit l'élément. Une largeur en ligne
   posée par un tiers (1376 px, la valeur de l'attribut) est battue par
   `max-width` — c'est ce que le banc éprouve en forgeant le placeholder.
   Et tout élément marqué par le CMP est borné, où qu'il se trouve. */
.art-image,
.art-image > *,
.article-content [data-cmp-info] { max-width: 100%; }
/* la figure ne peut pas non plus être élargie par un enfant en ligne */
.art-image { overflow-x: clip; }