/* ==================================================================
   deep.gotombola — feuille de style commune
   ------------------------------------------------------------------
   Direction artistique « revue » : claire, sobre, éditoriale.
   Palette restreinte (fonds clairs + duo d'accents bleu / doré GoTombola),
   serif pour les titres, sans-serif pour le corps. Voir docs/BRAND.md.

   Cette feuille est partagée par toutes les pages et toutes les
   langues : elle centralise l'apparence pour un site facile à faire
   évoluer. Ne pas dupliquer ces règles dans les pages.
   ================================================================== */

:root {
  color-scheme: light;     /* thème clair par défaut (formulaires, ascenseurs) */
  --ink:        #1a1a1a;   /* texte principal, contraste élevé      */
  --ink-soft:   #55524d;   /* texte secondaire                      */
  --ink-faint:  #6f6b63;   /* mentions discrètes — ≥4.5:1 sur --paper (WCAG AA) */
  --paper:      #faf8f4;   /* fond clair, légèrement chaud          */
  --surface:    #ffffff;   /* surfaces / cartes                     */
  --rule:       #e5e1d8;   /* filets, séparateurs                   */
  --rule-strong:#cbc4b6;   /* filet plus marqué (emplacements « à compléter ») */
  /* Duo GoTombola : bleu principal + accent doré/orange (item request-2026-08-10-1734).
     --brand-blue est le bleu vif de marque (#0987FD), réservé aux aplats/teintes
     décoratifs ; --accent est une nuance plus foncée, LISIBLE, pour tout le texte
     et les éléments interactifs (liens, CTA, focus) — contraste WCAG AA garanti
     sur --paper comme en blanc sur --accent. --gold apporte la ponctuation
     éditoriale (filets, puces de surtitre) sans porter de texte long. */
  --brand-blue: #0987FD;   /* bleu GoTombola vif (teintes / aplats décoratifs) */
  --accent:     #0a66c2;   /* bleu lisible : liens, CTA, survols, focus (AA ≈ 5.3:1 sur --paper) */
  --accent-ink: #084b8f;   /* bleu foncé au survol                  */
  --accent-wash:#e7f1fc;   /* voile bleu très clair (survols, aplats discrets) */
  --on-accent:  #ffffff;   /* texte posé sur un aplat bleu (boutons, skip-link) — AA */
  --gold:       #b5730a;   /* accent secondaire orange/doré (filets, surtitres — décor) */
  --header-glass: rgba(255, 255, 255, .82); /* fond translucide de l'en-tête (verre dépoli) */
  --paper-tint: #f2ece2;  /* fond légèrement plus profond, bas de page (dégradé très discret) */

  /* Ouvertures illustrées (hero d'accueil + bandeaux de rubrique).
     Texte blanc superposé à un visuel, voile dégradé bleu→doré GoTombola.
     Les voiles sont volontairement SOMBRES et INDÉPENDANTS du thème : le
     texte posé dessus reste blanc en clair comme en sombre — un plancher de
     contraste (couche plate ≈ .55) garantit le WCAG AA même sur les zones
     claires du visuel. Repassés en encre foncée à l'impression (@media print). */
  --on-media:        #ffffff;                  /* titre / texte sur visuel   */
  --on-media-soft:   rgba(255, 255, 255, .90); /* accroche secondaire        */
  --on-media-accent: #ffd38a;                  /* surtitre (doré clair, décor)*/
  --hero-panel: linear-gradient(115deg, #06284f 0%, #0a4f9e 42%, #0987fd 58%, #b5730a 118%);
  --scrim-hero:
      linear-gradient(105deg, rgba(4, 26, 54, .42) 0%, rgba(4, 26, 54, 0) 68%),
      linear-gradient(215deg, rgba(120, 74, 8, .28) 0%, rgba(120, 74, 8, 0) 50%),
      linear-gradient(0deg, rgba(4, 26, 54, .55), rgba(4, 26, 54, .55));
  --scrim-banner:
      linear-gradient(to top, rgba(4, 26, 54, .90) 0%, rgba(4, 26, 54, .58) 42%, rgba(4, 26, 54, .38) 100%),
      linear-gradient(110deg, rgba(9, 64, 140, .30) 0%, rgba(120, 74, 8, .24) 100%);
  /* Typographie — rendu contemporain (2026-08-10, request-2026-08-10-1734,
     item-002). Le client jugeait la sérif « vieillotte » : les titres passent
     d'une sérif système (Iowan/Palatino) à une pile sans-serif « display »
     moderne à fort caractère (SF Pro Display sur Apple, Segoe UI Variable
     Display sur Windows, Roboto sur Android — polices système, 0 chargement
     réseau, aucune dépendance externe). Le corps reste en sans-serif. La sérif
     est conservée pour l'impression (lecture papier) et comme repli décoratif. */
  --display: 'Inter Tight', 'SF Pro Display', -apple-system, BlinkMacSystemFont,
             'Segoe UI Variable Display', 'Segoe UI', Roboto, system-ui,
             'Helvetica Neue', Arial, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI',
          Roboto, system-ui, Helvetica, Arial, sans-serif;
  --serif: 'Charter', 'Iowan Old Style', 'Palatino Linotype', Palatino,
           'Book Antiqua', Georgia, 'Times New Roman', serif; /* impression / repli décoratif */

  /* Élévation : ombres chaudes, très discrètes (registre « revue »,
     jamais criardes). Empilées pour un rendu doux et réaliste. */
  --shadow-sm: 0 1px 2px rgba(40, 30, 24, .04),
               0 1px 3px rgba(40, 30, 24, .05);
  --shadow-md: 0 2px 6px rgba(40, 30, 24, .05),
               0 8px 20px rgba(40, 30, 24, .07);
  --shadow-lg: 0 4px 10px rgba(40, 30, 24, .06),
               0 18px 40px rgba(40, 30, 24, .11);

  /* Courbes d'animation partagées — mouvement doux et posé */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur:  .28s;

  /* Rayons harmonisés */
  --radius:    10px;
  --radius-lg: 14px;

  /* Hauteur indicative de l'en-tête collant (ancrage des liens internes) */
  --header-h: 4.75rem;
}

/* ==================================================================
   Mode sombre (item-001)
   ------------------------------------------------------------------
   Décline les mêmes jetons en variante sombre chaude, fidèle à la
   ligne « revue » (sobre, éditoriale). Deux déclencheurs :
     1. la préférence système `prefers-color-scheme: dark` — sauf si
        l'utilisateur a explicitement choisi le thème clair ;
     2. l'attribut `data-theme="dark"` posé par la bascule d'en-tête
        (mémorisé dans localStorage, appliqué avant le rendu).
   Le bleu d'accent est éclairci en bleu ciel lisible
   (≥ 4.5:1 sur les fonds sombres) ; le texte posé SUR l'accent
   (--on-accent) repasse en encre foncée. Contraste WCAG AA respecté
   dans les deux thèmes. Le bloc de jetons est volontairement répété
   pour les deux sélecteurs (système / manuel) : source unique de
   vérité des couleurs, à garder synchronisée.
   ================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink:        #efe9e0;
    --ink-soft:   #c9c2b6;
    --ink-faint:  #a49e92;   /* ≥4.5:1 sur --paper / --surface sombres (WCAG AA) */
    --paper:      #14120e;
    --surface:    #1e1b15;
    --rule:       #35312a;
    --rule-strong:#4a453b;
    --brand-blue: #3d9bff;   /* bleu de marque adapté au fond sombre */
    --accent:     #6db3ff;   /* bleu ciel, lisible sur fond sombre (AA) */
    --accent-ink: #9ccaff;   /* survol : plus clair */
    --accent-wash:#16283a;   /* voile bleu sombre (survols, aplats) */
    --on-accent:  #0a1520;   /* encre foncée posée sur l'accent clair */
    --gold:       #e0a94a;   /* accent doré chaud, lisible sur fond sombre (décor) */
    --header-glass: rgba(20, 18, 14, .82);
    --paper-tint: #0e0c09;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30),
                 0 1px 3px rgba(0, 0, 0, .34);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, .34),
                 0 8px 20px rgba(0, 0, 0, .42);
    --shadow-lg: 0 4px 10px rgba(0, 0, 0, .38),
                 0 18px 40px rgba(0, 0, 0, .52);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink:        #efe9e0;
  --ink-soft:   #c9c2b6;
  --ink-faint:  #a49e92;
  --paper:      #14120e;
  --surface:    #1e1b15;
  --rule:       #35312a;
  --rule-strong:#4a453b;
  --brand-blue: #3d9bff;
  --accent:     #6db3ff;
  --accent-ink: #9ccaff;
  --accent-wash:#16283a;
  --on-accent:  #0a1520;
  --gold:       #e0a94a;
  --header-glass: rgba(20, 18, 14, .82);
  --paper-tint: #0e0c09;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30),
               0 1px 3px rgba(0, 0, 0, .34);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .34),
               0 8px 20px rgba(0, 0, 0, .42);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, .38),
               0 18px 40px rgba(0, 0, 0, .52);
}

/* Transition douce lors du changement de thème (fonds de grande surface
   uniquement, pour ne pas écraser les transitions propres aux composants).
   Neutralisée si l'utilisateur demande moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
  body, .site-header, .site-footer {
    transition: background-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Les ancres internes (sommaires, index A→T) se posent sous l'en-tête collant */
  scroll-padding-top: calc(var(--header-h) + 12px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Sélection de texte teintée de l'accent (sobre, cohérente) */
::selection { background: var(--accent-wash); color: var(--ink); }

body {
  margin: 0;
  font-family: var(--sans);
  /* Fond « papier » avec une profondeur très discrète : un voile d'accent
     chaud en haut de page + un dégradé vertical à peine perceptible vers un
     ton plus profond. Retire l'impression de surface plate sans quitter la
     palette claire (registre revue). */
  background-color: var(--paper);
  background-image:
    radial-gradient(52rem 26rem at 50% -8rem,
      color-mix(in srgb, var(--brand-blue) 7%, transparent), transparent 72%),
    linear-gradient(180deg, var(--paper) 40%, var(--paper-tint));
  background-repeat: no-repeat;
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Détails typographiques « éditoriaux » (support progressif) */
  font-kerning: normal;
  hanging-punctuation: first last;
}

/* Colonne de lecture confortable (~65-75 caractères) */
.wrap {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 24px;
}
.wrap--wide { max-width: 60rem; }

/* Lien d'évitement (accessibilité clavier) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 16px;
  z-index: 100;
  border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------------
   En-tête institutionnel + navigation principale (commune)
   ------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  /* Léger décollement du contenu (l'en-tête « flotte » sur la page). */
  box-shadow: var(--shadow-sm);
}
/* Signature bleu→doré : fin filet dégradé au bord bas de l'en-tête collant,
   écho des séparateurs de section, des cartes et du pied de page. Fondu aux
   extrémités pour rester discret. (Masqué à l'impression : l'en-tête l'est.) */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--brand-blue) 60%, transparent) 22%,
    var(--gold) 78%,
    transparent 100%);
  opacity: .7;
  pointer-events: none;
  z-index: 1;
}
/* En-tête « verre dépoli » : translucide + flou quand le navigateur le permet,
   sinon fond opaque (repli sûr). Discret, jamais tape-à-l'œil. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: var(--header-glass);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
  }
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 18px;
}
.masthead {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.masthead:hover, .masthead:focus-visible { color: var(--accent-ink); }
.masthead .accent { color: var(--brand-blue); }

/* Le titre pousse la navigation + la recherche vers la droite,
   comme avant l'ajout de la recherche (l'en-tête reste sur une ligne). */
.site-header .masthead { margin-right: auto; }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

/* Utilitaire d'accessibilité : masque à l'écran, garde pour lecteurs d'écran */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   Recherche interne (item-012)
   Champ compact dans l'en-tête commun (présent sur toutes les pages) ;
   fonctionne sans JavaScript (soumission vers /recherche/).
   ------------------------------------------------------------------ */
.site-search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 2px 4px 2px 12px;
  transition: border-color .2s ease;
}
.site-search:focus-within { border-color: var(--accent); }
.site-search__input {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  padding: 5px 0;
  width: 8.5rem;
  min-width: 0;
}
.site-search__input::placeholder { color: var(--ink-faint); }
.site-search__input:focus { outline: none; }
.site-search__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.site-search__submit:hover { color: var(--accent); }
.site-search__submit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 34rem) {
  /* Sur petit écran, le champ passe sous la navigation et s'étire. */
  .site-search { width: 100%; }
  .site-search__input { width: 100%; flex: 1 1 auto; }
}

/* ------------------------------------------------------------------
   Bascule de thème clair / sombre (item-001)
   Bouton rond discret dans l'en-tête. L'icône affichée dépend du
   thème RÉELLEMENT appliqué (même cascade que les jetons de couleur) :
   lune en thème clair (bascule vers sombre), soleil en thème sombre.
   Sans JavaScript le bouton reste inerte, mais le thème système
   s'applique quand même (aucune régression).
   ------------------------------------------------------------------ */
.theme-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle__icon { display: none; }
/* Par défaut (thème clair) : lune visible */
.theme-toggle__moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle__sun  { display: block; }
}
:root[data-theme="dark"]  .theme-toggle__moon { display: none; }
:root[data-theme="dark"]  .theme-toggle__sun  { display: block; }
:root[data-theme="light"] .theme-toggle__moon { display: block; }
:root[data-theme="light"] .theme-toggle__sun  { display: none; }

/* ------------------------------------------------------------------
   Navigation mobile — menu hamburger accessible (item-003)
   ------------------------------------------------------------------
   Sur grand écran, .site-menu regroupe la navigation + la recherche
   en une simple rangée (comportement historique). En deçà du point
   de rupture, le bouton .nav-toggle apparaît et le menu se replie
   dans un panneau déroulant piloté par assets/js/nav.js (classe
   .nav-open sur l'en-tête). Sans JavaScript (classe `js` absente),
   le bouton reste masqué et le menu demeure visible : repli propre.
   ------------------------------------------------------------------ */
.site-menu {
  display: flex;
  align-items: center;
  gap: 16px 24px;
}

/* Bouton hamburger : même vocabulaire visuel que la bascule de thème
   (pastille ronde discrète). Masqué par défaut et si JS indisponible. */
.nav-toggle {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.nav-toggle:hover { color: var(--accent); border-color: var(--accent); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-toggle__icon { display: block; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

@media (max-width: 60rem) {
  /* Bascule en mode « hamburger » : la rangée de 6 liens + recherche
     deviendrait trop dense pour tablette / mobile. */
  .js .nav-toggle { display: inline-flex; }

  /* Rangée du haut : titre à gauche, thème + hamburger à droite ;
     le menu (order élevé + pleine largeur) passe sur une 2ᵉ ligne. */
  .js .theme-toggle { order: 1; }
  .js .nav-toggle   { order: 2; }
  .js .site-menu    { order: 3; flex: 1 1 100%; }

  /* Panneau replié par défaut ; déplié via .nav-open (posé par le JS). */
  .js .site-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height var(--dur) var(--ease),
                opacity var(--dur) var(--ease),
                visibility var(--dur) var(--ease);
  }
  .js .site-header.nav-open .site-menu {
    max-height: 80vh;
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
    margin-top: 8px;
    padding: 8px 0 14px;
    border-top: 1px solid var(--rule);
  }

  /* Liens empilés, cibles tactiles confortables. */
  .js .site-menu .site-nav { width: 100%; }
  .js .site-menu .site-nav ul { flex-direction: column; gap: 0; }
  .js .site-menu .site-nav a {
    display: block;
    padding: 12px 2px;
    font-size: 16px;
  }
  .js .site-menu .site-nav a::after { bottom: 6px; }

  /* Recherche en pleine largeur, sous les liens. */
  .js .site-menu .site-search {
    width: 100%;
    margin-top: 8px;
  }
  .js .site-menu .site-search__input { width: 100%; flex: 1 1 auto; }
}

/* Mouvement réduit : ouverture instantanée (pas d'animation de repli). */
@media (prefers-reduced-motion: reduce) {
  .site-menu { transition: none; }
  .nav-toggle { transition: none; }
}

/* ------------------------------------------------------------------
   Page de résultats /recherche/
   ------------------------------------------------------------------ */
.search-field {
  display: flex;
  gap: 8px;
  margin: 8px 0 20px;
  max-width: 38rem;
}
.search-field input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 12px 14px;
}
.search-field input[type="search"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.search-field button {
  flex: 0 0 auto;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 0 18px;
  cursor: pointer;
  transition: background-color .2s ease;
}
.search-field button:hover { background: var(--accent-ink); }
.search-field button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.search-count {
  font-size: 14px;
  color: var(--ink-faint);
  margin: 0 0 20px;
  min-height: 1.2em;
}

.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 38rem;
}
.search-results .search-result a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.search-results .search-result a:hover,
.search-results .search-result a:focus-visible {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
@media (prefers-reduced-motion: reduce) {
  .search-results .search-result a:hover,
  .search-results .search-result a:focus-visible { transform: none; }
}
.search-result__rubrique {
  display: block;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 4px;
}
.search-result__title {
  display: block;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
  line-height: 1.3;
}
.search-result__summary {
  display: block;
  font-size: 15px;
  color: var(--ink-soft);
  margin: 6px 0 0;
}
.search-empty {
  color: var(--ink-faint);
  font-size: 15px;
  border-left: 3px solid var(--rule);
  padding: 4px 0 4px 18px;
}
.site-nav a {
  position: relative;
  display: inline-block;
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 4px 1px 6px;
  transition: color var(--dur) var(--ease);
}
/* Filet d'accent animé sous chaque entrée (croît depuis la gauche) */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.site-nav a:hover,
.site-nav a:focus-visible { color: var(--accent); }
.site-nav a:hover::after,
.site-nav a:focus-visible::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
}
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .site-nav a::after { transition: none; }
}

/* ------------------------------------------------------------------
   Corps de page
   ------------------------------------------------------------------ */
main {
  flex: 1 0 auto;
  padding: 72px 0 104px;
  animation: fade-in .7s var(--ease) both;
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
}

/* Fil d'Ariane */
.breadcrumb {
  font-size: 13px;
  color: var(--ink-faint);
  margin: 0 0 28px;
}
.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.breadcrumb li::after { content: "›"; margin-left: 8px; color: var(--rule); }
.breadcrumb li:last-child::after { content: ""; margin: 0; }
.breadcrumb a { color: var(--ink-faint); text-decoration: none; }
.breadcrumb a:hover, .breadcrumb a:focus-visible { color: var(--accent); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
  font-weight: 600;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--gold);   /* filet doré — ponctuation éditoriale du duo bleu/or */
  flex: 0 0 auto;
}

h1 {
  font-family: var(--display);
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.033em;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 28px;
  text-wrap: balance;
}

h2 {
  font-family: var(--display);
  font-size: clamp(27px, 3.5vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.024em;
  font-weight: 700;
  color: var(--ink);
  margin: 64px 0 18px;
  text-wrap: balance;
}

h3 {
  font-family: var(--display);
  font-size: clamp(19px, 2vw, 21px);
  line-height: 1.25;
  letter-spacing: -0.016em;
  font-weight: 700;
  text-wrap: balance;
}

p.lead {
  font-family: var(--display);
  font-size: clamp(21px, 2.5vw, 24px);
  line-height: 1.45;
  letter-spacing: -0.011em;
  color: var(--ink);         /* accroche plus présente : renforce la hiérarchie */
  font-weight: 500;
  margin: 0 0 32px;
  max-width: 40rem;
  text-wrap: pretty;
}

p, .body {
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
main p { max-width: 38rem; }

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.prose a:hover, .prose a:focus-visible {
  color: var(--accent-ink);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

/* Filet de séparation sobre */
/* Filet de séparation de section — désormais « travaillé » : un court
   segment dégradé bleu→doré GoTombola en lieu et place du simple trait gris
   (item-004). Utilisé en tête des sections de glossaire, FAQ, cadre juridique. */
.rule {
  border: 0;
  height: 3px;
  width: 72px;
  max-width: none;
  margin: 40px 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-blue), var(--gold));
}

/* Lien éditorial sobre — aucun bouton commercial, aucune ombre */
.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color .2s ease;
}
.link:hover, .link:focus-visible { color: var(--accent-ink); }
.link .arrow { transition: transform .2s ease; }
.link:hover .arrow { transform: translateX(3px); }

/* ------------------------------------------------------------------
   Grille de rubriques / cartes (accueil, renvois internes)
   ------------------------------------------------------------------ */
.card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
/* Lorsqu'une grille de cartes termine le <main> (page d'accueil), on ajoute la
   même respiration avant le pied de page que le bloc « À consulter aussi »
   (.related) des autres pages, pour une présentation identique partout. */
main > .card-grid:last-child { margin-bottom: 4.5rem; }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Sheen très discret : la carte n'est plus un aplat mort mais une surface
     légèrement modelée (haut plus clair). Reste dans la palette claire. */
  background:
    linear-gradient(180deg, var(--surface),
      color-mix(in srgb, var(--surface) 88%, var(--paper)));
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 26px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
/* Filet d'accent qui se révèle en haut de la carte au survol */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-blue), var(--gold)); /* filet bleu→doré révélé au survol */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.card:hover, .card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-4px);
  /* Ombre plus profonde + halo bleu GoTombola à peine teinté (survol plus riche). */
  box-shadow: var(--shadow-lg),
              0 10px 34px color-mix(in srgb, var(--brand-blue) 13%, transparent);
}
.card:hover::before, .card:focus-visible::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .card { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .card:hover, .card:focus-visible { transform: none; }
  .card::before { transition: none; }
}
.card h3 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin: 0 0 8px;
}
.card p {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.card .card-cta {
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  transition: color var(--dur) var(--ease);
  /* La flèche « → » finale glisse au survol (micro-interaction sobre) */
  display: inline-block;
}
.card:hover .card-cta,
.card:focus-visible .card-cta { color: var(--accent-ink); }
@media (prefers-reduced-motion: no-preference) {
  .card .card-cta { transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); }
  .card:hover .card-cta,
  .card:focus-visible .card-cta { transform: translateX(3px); }
}

/* Bouton « Lire la suite » — teaser de dossier (aplat d'accent, sobre).
   Sélecteur qualifié `a.read-more` (spécificité 0,1,1) pour l'emporter sur
   `.prose a`, sinon le texte reprenait `color: var(--accent)` — soit la même
   teinte que le fond `var(--accent)`, rendant le libellé illisible. */
a.read-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  padding: 11px 22px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
a.read-more:hover,
a.read-more:focus-visible {
  /* On réaffirme le texte clair : `.prose a:hover` le forcerait sinon en
     `--accent-ink`, soit la même couleur que le fond au survol. */
  color: var(--on-accent);
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  text-decoration: none;
  box-shadow: var(--shadow-md);
}
.read-more__arrow { flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .read-more__arrow { transition: transform var(--dur) var(--ease); }
  .read-more:hover .read-more__arrow,
  .read-more:focus-visible .read-more__arrow { transform: translateX(3px); }
}

/* Visuel de carte optionnel : image en tête, débordant jusqu'aux bords.
   N'apparaît que si la carte contient un .card__media (rétro-compatible :
   les cartes sans image restent inchangées). Image à fournir dans public/. */
.card__media {
  margin: -26px -26px 18px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
/* Léger rapprochement de l'image au survol (immersif, contenu) */
.card:hover .card__media img,
.card:focus-visible .card__media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .card__media img { transition: none; }
  .card:hover .card__media img,
  .card:focus-visible .card__media img { transform: none; }
}
/* Surtitre de carte optionnel — hiérarchise l'accroche (rubrique, série) */
.card__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 8px;
}
.card__kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);   /* puce dorée du surtitre (duo bleu/or) */
  flex: 0 0 auto;
}

/* Ligne de méta — regroupe le surtitre (accent) et le temps de lecture
   (discret) sur une même rangée, aussi bien sur les cartes que les tuiles. */
.card__meta,
.bento__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 8px;
}
.card__meta .card__kicker,
.bento__meta .bento__kicker { margin: 0; }

/* Temps de lecture — repère discret sur les cartes de dossiers et en tête
   d'article. Estimation statique, calculée à partir du nombre de mots
   (~200 mots/min en français). Balisage sémantique via <time datetime="PT?M">. */
.read-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-faint);
  white-space: nowrap;
}
.read-time__icon { flex: 0 0 auto; opacity: 0.85; }
.read-time time { font-variant-numeric: tabular-nums; }
/* Dans la méta d'article (.updated), s'aligne sur la taille du texte courant. */
.updated .read-time { font-size: inherit; }

/* Encart « renvois / à lire aussi » */
.related {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 26px 30px;
  /* Respiration supplémentaire sous le bloc « À consulter aussi » : aère la
     page avant le pied de page, de façon identique sur toutes les pages. */
  margin: 56px 0 4.5rem;
  box-shadow: var(--shadow-sm);
}
.related h2 {
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
}
.related ul { margin: 0; padding-left: 20px; }
.related li { margin: 0 0 8px; font-size: 16px; }
.related a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule); }
.related a:hover, .related a:focus-visible { color: var(--accent-ink); border-bottom-color: currentColor; }

/* « À lire aussi » — navigation transversale en fin de dossier.
   Réutilise intégralement le composant .card-grid / .card ; n'ajoute qu'un
   habillage de section (filet de séparation + surtitre). */
.read-next {
  margin: 48px 0 0;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
}
.read-next__title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 20px;
}

/* ------------------------------------------------------------------
   Partage de dossier (item-008)
   ------------------------------------------------------------------
   Rangée de liens de partage sobres en fin de dossier : copier le
   lien, partage natif (navigator.share) et liens X / LinkedIn. Aucun
   traceur ni script tiers — X et LinkedIn sont de simples <a> ; le
   copier-coller et le partage natif sont révélés par assets/js/share.js
   (les <li> concernés portent l'attribut `hidden` tant que la prise en
   charge n'est pas confirmée : repli propre sans JavaScript).
   Vocabulaire visuel des pastilles (theme-toggle / nav-toggle).
   ------------------------------------------------------------------ */
.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin: 44px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.share__label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.share__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.share__actions > li { margin: 0; }
.share__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.share__btn:hover,
.share__btn:focus-visible { color: var(--accent); border-color: var(--accent); }
.share__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.share__icon { flex: 0 0 auto; }
/* Confirmation de copie */
.share__btn.is-copied {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-wash);
}
@media (prefers-reduced-motion: reduce) {
  .share__btn { transition: none; }
}

/* ------------------------------------------------------------------
   Bento thématique — sélection des dossiers (rubrique Dossiers)
   Grille façon « bento » : tuiles de tailles variables, regroupées
   par thème. Extensible : ajouter une <section class="bento-theme">
   par thème, une <li class="bento__item"> par dossier. La première
   tuile d'un thème peut porter --lead pour s'étendre sur deux colonnes.
   Registre « revue » (renvoi éditorial, aucun CTA commercial).
   ------------------------------------------------------------------ */
.bento-nav { margin: 40px 0 0; }
.bento-nav > h2 {
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 20px;
}
.bento-theme { margin: 0 0 28px; }
.bento-theme:last-child { margin-bottom: 0; }
.bento-theme__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.008em;
  color: var(--ink-soft);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.bento-theme__count {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.bento {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  grid-auto-flow: dense;
}
.bento__item { display: flex; }
/* Tuile « à la une » du thème : deux colonnes dès qu'il y a la place */
@media (min-width: 48rem) {
  .bento__item--lead { grid-column: span 2; }
}
.bento__link {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px 26px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.bento__link::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-blue), var(--gold)); /* filet bleu→doré révélé au survol */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}
.bento__link:hover, .bento__link:focus-visible {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.bento__link:hover::before, .bento__link:focus-visible::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .bento__link { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .bento__link:hover, .bento__link:focus-visible { transform: none; }
  .bento__link::before { transition: none; }
}
.bento__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bento__kicker {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 8px;
}
.bento__title {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 8px;
}
.bento__item--lead .bento__title { font-size: 22px; }
.bento__summary {
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.bento__more {
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}
.bento__link:hover .bento__more,
.bento__link:focus-visible .bento__more { color: var(--accent-ink); }

/* Variante compacte (request-2026-08-10-1141, item-002) — « Les derniers
   dossiers » : tuiles réduites au titre + à la date de publication.
   Réutilise .bento / .bento__link ; n'allège que le contenu (padding
   resserré, titre plus court, date poussée en pied de tuile pour aligner
   des cartes de hauteurs différentes sur une même rangée). */
.bento-nav__intro {
  font-size: 14px;
  color: var(--ink-faint);
  margin: -8px 0 22px;
  max-width: 46rem;
}
/* Respiration supplémentaire sous la grille de tuiles (dernier bloc du
   <main>) pour aérer la page avant le pied de page. */
.bento--compact { gap: 14px; margin-bottom: 56px; }
.bento--compact .bento__link { padding: 18px 20px; }
.bento--compact .bento__title {
  font-size: 17px;
  margin: 0 0 12px;
}
.bento__date {
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
   Filtre rapide des dossiers (item-002)
   Recherche ciblée, en direct, sur les tuiles bento de la rubrique.
   Réutilise le motif .site-search pour la cohérence visuelle ; ne
   remplace pas la recherche globale de l'en-tête.
   ------------------------------------------------------------------ */
.dossier-filter { margin: 0 0 24px; }
.dossier-filter__label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  font-weight: 600;
  margin: 0 0 8px;
}
/* Boutons-tags : filtres rapides par mot-clé, en complément du champ texte.
   Puce en pilule (même vocabulaire que .site-search) ; l'état actif reprend
   l'aplat d'accent institutionnel. Générés par dossiers-filter.js. */
.dossier-filter__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.dossier-filter__tags[hidden] { display: none; }
.dossier-tag {
  font: inherit;
  font-size: 13px;
  line-height: 1;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.dossier-tag:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-wash);
}
.dossier-tag:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.dossier-tag.is-active {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.dossier-tag.is-active:hover { background: var(--accent-ink); }

.dossier-filter .site-search { width: 100%; max-width: 26rem; }
.dossier-filter .site-search__input { width: 100%; flex: 1 1 auto; }
.dossier-filter__status {
  font-size: 13px;
  color: var(--ink-faint);
  margin: 8px 0 0;
  min-height: 1.2em;
}
.dossier-filter__empty {
  margin: 16px 0 0;
  color: var(--ink-soft);
}
.dossier-filter__empty[hidden] { display: none; }
/* Tuiles et thèmes écartés par le filtre en direct */
.bento__item.is-filtered,
.bento-theme.is-filtered { display: none; }

/* Mention « contenu à venir » — état de lancement, sobre */
.notice {
  border-left: 3px solid var(--rule);
  padding: 4px 0 4px 18px;
  color: var(--ink-faint);
  font-size: 15px;
  margin: 28px 0;
}
.updated {
  font-size: 13px;
  color: var(--ink-faint);
  margin: 0 0 32px;
}

/* Signature d'auteur en fin d'article — distincte du corps de texte */
.byline {
  margin: 36px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-style: italic;
  color: var(--ink-faint);
}
.byline strong {
  font-style: normal;
  color: var(--ink);
}

/* Accessibilité clavier */
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ------------------------------------------------------------------
   Fonctionnalités de lecture des articles (item-011)
   Barre de progression, sommaire d'article, visualisations sobres.
   Styles partagés : le balisage n'est ajouté que sur les pages qui
   en ont besoin (dossiers longs).
   ------------------------------------------------------------------ */

/* Barre de progression de lecture — fine, discrète, en haut de page */
.reading-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: transparent;
  z-index: 200;
  pointer-events: none;
}
.reading-progress > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
}

/* Sommaire compact en tête d'un article long */
.toc {
  margin: 0 0 32px;
  padding: 18px 24px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);   /* liseré doré (accent secondaire) */
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.toc p {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}
.toc ol {
  margin: 0;
  padding-left: 20px;
  color: var(--ink-soft);
}
.toc li { margin: 0 0 6px; font-size: 15px; }
.toc a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.toc a:hover, .toc a:focus-visible {
  color: var(--accent-ink);
  border-bottom-color: currentColor;
}

/* Visualisation de données sobre — barres horizontales, sans dépendance */
.chart {
  margin: 36px 0;
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  max-width: 38rem;
}
.chart figcaption {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 20px;
}
.chart .bars { list-style: none; margin: 0; padding: 0; }
.chart .bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0 0 16px;
  font-size: 14px;
}
.chart .bar:last-child { margin-bottom: 0; }
.chart .bar-label { flex: 1 0 8rem; color: var(--ink-soft); }
.chart .bar-value {
  flex: 0 0 auto;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.chart .bar-track {
  flex: 1 1 100%;
  order: 3;
  height: 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
.chart .bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
}
.chart-note {
  font-size: 13px;
  color: var(--ink-faint);
  margin: 18px 0 0;
}

/* Illustration d'article — image + légende, sobre */
.article-figure {
  margin: 36px 0;
  max-width: 42rem;
}
.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.article-figure figcaption {
  font-size: 13px;
  color: var(--ink-faint);
  margin: 10px 0 0;
}
/* Légendes de figures : court filet d'accent en tête (signature éditoriale
   cohérente sur hero, en-tête de rubrique et illustrations d'article). */
.hero-figure figcaption,
.article-figure figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.hero-figure figcaption::before,
.article-figure figcaption::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 2px;
  background: var(--gold);   /* filet doré des légendes (duo bleu/or) */
  transform: translateY(-0.32em);
}

/* ==================================================================
   Composants éditoriaux (montée en gamme du système visuel)
   ------------------------------------------------------------------
   Blocs réutilisables au registre « revue / think-tank », dans la
   palette claire + duo d'accents bleu / doré et la typo serif/sans.
   Additifs : le balisage n'est posé que sur les pages qui les
   utilisent — les pages existantes restent inchangées.
   ================================================================== */

/* --- En-tête de rubrique : bandeau à titrage superposé -------------
   <header class="rubric-header">
     <div class="rubric-header__caption"> <p class="eyebrow"> <h1> </div>
     <img …>
   </header>
   Traitement visuel affirmé (req-2026-08-10-1734, item-003) : l'illustration
   devient un bandeau large ; le surtitre et le titre de la rubrique sont
   SUPERPOSÉS sur un voile dégradé bleu→doré (identité GoTombola) au lieu de la
   simple figure + légende d'avant. Voile sombre (plancher de contraste ≈ .90
   sous le titre) : texte blanc lisible (WCAG AA) même sur ces illustrations au
   trait sur fond papier clair. Le titre reste un <h1> réel dans le DOM (SEO /
   structure). L'<img> conserve width/height + alt (accessibilité, anti-CLS). */
.rubric-header {
  position: relative;
  isolation: isolate;
  margin: 0 0 44px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--hero-panel);   /* repli coloré si l'illustration manque */
  display: flex;
  aspect-ratio: 21 / 9;
  min-height: 13rem;
  max-height: 24rem;
}
.rubric-header img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rubric-header::after {          /* voile dégradé (superposition) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--scrim-banner);
}
.rubric-header__caption {
  position: relative;
  z-index: 2;
  align-self: flex-end;          /* titrage ancré en bas du bandeau */
  width: 100%;
  color: var(--on-media);
  padding: clamp(20px, 4vw, 40px);
}
.rubric-header__caption .eyebrow {
  color: var(--on-media-accent);
  margin-bottom: 14px;
}
.rubric-header__caption .eyebrow::before { background: currentColor; }
.rubric-header__caption h1 {
  color: var(--on-media);
  margin: 0;
  text-shadow: 0 1px 18px rgba(4, 20, 44, .45);
}

/* --- Chiffres clés : statistiques éditoriales, crédibilité ---------
   <ul class="key-figures">
     <li class="key-figure">
       <span class="key-figure__value">615</span>
       <span class="key-figure__label">tombolas analysées</span>
       <span class="key-figure__source">Source — panel …</span>
     </li> …
   </ul>
   Filets fins obtenus par la couleur de fond visible dans les gouttières. */
.key-figures {
  list-style: none;
  margin: 44px 0;
  padding: 0;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  background: var(--rule);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);  /* filet doré : coiffe éditoriale (accent secondaire) */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.key-figure {
  position: relative;
  background: var(--surface);
  padding: 24px 26px;
  transition: background-color var(--dur) var(--ease);
}
/* Filet d'accent vertical qui se révèle au survol de chaque chiffre */
.key-figure::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gold);   /* filet doré vertical révélé au survol */
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--dur) var(--ease);
}
.key-figure:hover { background: var(--accent-wash); }
.key-figure:hover::before { transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {
  .key-figure::before { transition: none; }
}
.key-figure__value {
  display: block;
  font-family: var(--display);
  font-size: clamp(32px, 4.2vw, 44px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.key-figure__label {
  display: block;
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.key-figure__source {
  display: block;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-faint);
}

/* --- Citation en exergue (pull-quote) pour les dossiers longs -------
   <blockquote class="pull-quote">
     <p>…</p><cite>Auteur / source</cite>
   </blockquote> */
.pull-quote {
  position: relative;
  margin: 48px 0;
  padding: 4px 0 6px 32px;
  border-left: 3px solid var(--gold);   /* liseré doré d'exergue (accent secondaire) */
  max-width: 40rem;
}
/* Guillemet ouvrant décoratif, teinté d'accent, discret mais lisible */
.pull-quote::before {
  content: "\201C";
  position: absolute;
  left: 14px;
  top: -0.28em;
  font-family: var(--serif);
  font-size: 5.2em;
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 16%, transparent);
  pointer-events: none;
  z-index: 0;
}
.pull-quote p, .pull-quote cite { position: relative; z-index: 1; }
.pull-quote p {
  font-family: var(--display);
  font-size: clamp(21px, 2.6vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.014em;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  max-width: none;
}
.pull-quote cite {
  display: block;
  margin: 14px 0 0;
  font-family: var(--sans);
  font-style: normal;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}
.pull-quote cite::before {
  content: "\2014\00a0";  /* tiret cadratin — attribution éditoriale */
  color: var(--accent);
}

/* ------------------------------------------------------------------
   Pied de page commun
   ------------------------------------------------------------------ */
.site-footer {
  position: relative;
  flex-shrink: 0;
  border-top: 1px solid var(--rule);
  background-color: var(--surface);
  /* Léger dégradé vertical : le pied gagne en profondeur sans quitter la
     palette claire (écho du fond « papier » du body). Retiré à l'impression
     par la règle globale `background-image: none`. */
  background-image: linear-gradient(180deg,
    var(--surface), color-mix(in srgb, var(--paper) 55%, var(--surface)));
  color: var(--ink-faint);
  font-size: 14px;
}
/* Signature bleu→doré en tête du pied — « bookend » de l'accent d'en-tête,
   pour un cadrage premium homogène du haut au bas de chaque page. */
.site-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--brand-blue) 60%, transparent) 22%,
    var(--gold) 78%,
    transparent 100%);
  opacity: .7;
  pointer-events: none;
}
.site-footer .wrap {
  padding-top: 48px;
  padding-bottom: 48px;
  display: grid;
  gap: 24px 48px;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) {
  .site-footer .wrap { grid-template-columns: 1.4fr 1fr; }
}
.site-footer h2 {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px;
}
.site-footer nav ul { list-style: none; margin: 0; padding: 0; }
.site-footer nav li { margin: 0 0 6px; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--accent); }
.site-footer .editor { max-width: 26rem; }
.site-footer .editor strong { color: var(--ink-soft); }
/* Logo GoTombola dans l'éditeur du pied de page : remplace la mention texte,
   rendu cliquable vers gotombola.co (FR). Hauteur maîtrisée (width:auto préserve
   le ratio ~8.72:1, aucune déformation) + alignement sur la ligne de base du
   texte ; logo bicolore bleu+orange sur fond transparent, lisible en clair et sombre. */
.editor__logo-link { display: inline-block; border-radius: 3px; }
.editor__logo {
  height: 1.15em;
  width: auto;
  vertical-align: -0.22em;
  transition: opacity var(--dur) var(--ease);
}
.editor__logo-link:hover .editor__logo,
.editor__logo-link:focus-visible .editor__logo { opacity: .82; }
.editor__logo-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Variante « À propos » : logo éditeur affiché en évidence dans le bloc éditeur
   (req-2026-08-11-1501, item-003), sous le chapô et au-dessus du paragraphe
   « deep.gotombola est édité par GoTombola ». */
.editor-badge { margin: 4px 0 22px; }
.editor__logo--about {
  height: auto;
  width: clamp(180px, 42vw, 240px);
  vertical-align: baseline;
}
.site-footer .footer-bottom {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  align-items: baseline;
  justify-content: space-between;
}
.site-footer .footer-note { margin: 0; font-size: 13px; color: var(--ink-faint); }
.site-footer .footer-note .accent { color: var(--accent); }
.site-footer .footer-bottom nav ul { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.site-footer .footer-bottom nav li { margin: 0; font-size: 13px; }

/* --- Ouverture éditoriale de l'accueil (hero sobre, registre revue) ---
   <figure class="hero-figure"> image bandeau + légende discrète </figure>
   Bandeau large, sans texte incrusté ni CTA : respiration visuelle en tête
   de page. width/height sur l'<img> + aspect-ratio ici évitent le CLS. */
.hero-figure {
  margin: 12px 0 52px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 686;
  object-fit: cover;
}
.hero-figure figcaption {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-faint);
  padding: 12px 18px;
  border-top: 1px solid var(--rule);
}

/* --- Ouverture affirmée de l'accueil (hero à texte superposé) ----------
   Refonte req-2026-08-10-1734 (item-003) : composition plus dynamique.
   L'accroche (eyebrow + h1 + lead + raccourcis) est désormais SUPERPOSÉE
   au visuel d'ouverture, sur un voile dégradé bleu→doré GoTombola. Voile
   sombre à plancher de contraste (couche plate ≈ .55 + renfort à gauche
   sous le titre) : texte blanc lisible (WCAG AA) sur toute la surface, y
   compris les zones claires de la photo. Aucune incrustation commerciale,
   aucun CTA de vente ; palette, typo et ton inchangés. */
.home-hero {
  position: relative;
  isolation: isolate;
  margin: 8px 0 20px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--hero-panel);   /* repli coloré + décor sous la photo */
  box-shadow: var(--shadow-lg);
  min-height: clamp(22rem, 52vw, 32rem);
  display: flex;
  align-items: center;
}
.home-hero .hero-figure {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.home-hero .hero-figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}
.home-hero::after {                /* voile dégradé (superposition) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--scrim-hero);
}
.home-hero__intro {
  position: relative;
  z-index: 2;
  min-width: 0;
  max-width: 42rem;
  padding: clamp(28px, 5vw, 60px);
  color: var(--on-media);
}
.home-hero__intro .eyebrow { color: var(--on-media-accent); }
.home-hero__intro .eyebrow::before { background: currentColor; }
.home-hero__intro h1 {
  color: var(--on-media);
  margin-bottom: 20px;
  text-shadow: 0 1px 22px rgba(4, 20, 44, .42);
}
.home-hero__intro .lead {
  color: var(--on-media-soft);
  max-width: 34rem;
}

/* Raccourcis « explorer par thème » — pastilles claires sur le voile
   (navigation éditoriale, jamais promotionnelle). */
.home-hero__topics {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.home-hero__topics li { margin: 0; }
.home-hero__topics a {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--on-media);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.home-hero__topics a:hover,
.home-hero__topics a:focus-visible {
  color: var(--on-media);
  border-color: rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .26);
}

/* --- En-tête de section (titre + chapeau court) ----------------------- */
.alaune { margin-top: 76px; }
.section-head { margin: 0 0 26px; }
.section-head h2 { margin: 0 0 10px; }
.section-head__note {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 44rem;
  margin: 0;
}

/* --- « À la une » : dossiers mis en avant, en pleine largeur -----------
   Cartes-vedettes horizontales (média + corps) qui foregroundent les
   dossiers dès l'entrée. Réutilise .card / .card__media / .card__kicker. */
.card-grid--featured {
  grid-template-columns: 1fr;
  gap: 22px;
}
/* Cartes-vedettes : plus grandes, donc plus présentes — rayon ample (--radius-lg,
   cohérent avec hero / en-têtes de rubrique) et élévation au repos (--shadow-md). */
.card--feature {
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.card--feature .card__body {
  display: flex;
  flex-direction: column;
  padding: 26px 28px 24px;
}
.card--feature .card__media {
  margin: 0;
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--rule);
}
.card--feature h3 {
  font-size: clamp(20px, 2.3vw, 26px);
  line-height: 1.2;
  margin: 0 0 12px;
}
.card--feature p { font-size: 16px; }
.card--feature .card-cta { margin-top: 6px; }
@media (min-width: 46rem) {
  .card--feature { flex-direction: row; align-items: stretch; }
  .card--feature .card__media {
    flex: 0 0 45%;
    aspect-ratio: auto;
    border-bottom: 0;
    border-right: 1px solid var(--rule);
  }
  .card--feature .card__body {
    flex: 1 1 auto;
    justify-content: center;
    padding: 34px 38px;
  }
}

/* --- Emplacement d'illustration à venir (placeholder réservé) ---------
   <figure class="illus-slot" style="--illus-ratio: 3 / 2">
     <div class="illus-slot__frame" aria-hidden="true"></div>
     <figcaption>
       <mark>[illustration à fournir — à intégrer]</mark>
       Rôle éditorial du visuel · ratio 3:2.
     </figcaption>
   </figure>

   Réserve visuellement l'espace d'une future illustration SANS référencer
   aucun fichier : le cadre est dessiné en CSS (aucun src, donc aucun risque
   de lien mort), et l'aspect-ratio fixe la hauteur pour éviter tout décalage
   de mise en page (CLS) le jour où le visuel réel remplacera le cadre.
   Neutre et sobre (registre « revue » : aucun CTA, aucun prix). Le ratio se
   règle par la variable --illus-ratio (défaut 3 / 2). Cahier des visuels
   attendus (emplacement, ratio, rôle, alt) : docs/BRIEF-VISUEL.md. */
.illus-slot {
  margin: 32px 0;
  max-width: 42rem;
}
/* Variante pleine largeur de colonne (bandeau en tête de section) */
.illus-slot--wide { max-width: none; }
.illus-slot__frame {
  aspect-ratio: var(--illus-ratio, 3 / 2);
  border: 1px dashed var(--rule-strong); /* filet « à compléter », plus marqué que --rule */
  border-radius: 6px;
  background-color: var(--surface);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0, transparent 11px,
    rgba(9, 135, 253, 0.06) 11px, rgba(9, 135, 253, 0.06) 22px
  );
  display: grid;
  place-items: center;
  padding: 16px;
}
.illus-slot__frame::after {
  content: "Emplacement réservé — illustration à venir";
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  text-align: center;
}
.illus-slot figcaption {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-faint);
  margin: 10px 0 0;
}

/* ------------------------------------------------------------------
   Bouton « retour en haut » (item-007)
   ------------------------------------------------------------------
   Pastille ronde flottante en bas de page, même vocabulaire visuel
   que .theme-toggle / .nav-toggle (bordure fine, accent au survol),
   posée sur une ombre douce pour signaler qu'elle « flotte ».
   Masquée tant que la page n'a pas été défilée au-delà d'un seuil :
   révélée par assets/js/back-to-top.js (classe .is-visible). Sans
   JavaScript, elle reste masquée — aucune régression. N'est insérée
   que sur les pages longues (dossiers, glossaire, cadre juridique).
   ------------------------------------------------------------------ */
.back-to-top {
  position: fixed;
  right: clamp(16px, 4vw, 32px);
  bottom: clamp(16px, 4vw, 32px);
  z-index: 150;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  /* État masqué par défaut (initial + absence de JS) ; révélé par .is-visible. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--ease),
              visibility var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.back-to-top:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-wash);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.back-to-top__icon { display: block; }

/* Mouvement réduit : apparition instantanée (ni glissement ni fondu). */
@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transform: none;
    transition: color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                background-color var(--dur) var(--ease);
  }
}

/* ==================================================================
   ENCHAÎNEMENTS DE SECTIONS INTERACTIFS (item-004,
   request-2026-08-10-1734)
   ------------------------------------------------------------------
   Le client jugeait les enchaînements entre sections « trop classiques ».
   Deux apports, toujours dans la palette bleu / doré GoTombola :
     1. Séparateurs de sections travaillés — un filet dégradé bleu→doré
        remplace les simples marges entre les sections d'article.
     2. Apparitions au défilement — les blocs de contenu se dévoilent en
        fondu + léger glissé (piloté par assets/js/reveal.js).
   `prefers-reduced-motion` est impérativement respecté (aucune apparition
   forcée) ; sans JavaScript ni IntersectionObserver, tout reste visible.
   ================================================================== */

/* --- 1) Séparateurs de sections « travaillés » -------------------
   Deux cas complémentaires, au rendu identique (filet dégradé bleu→doré) :
     • sections/articles déjà coiffés d'un <hr class="rule"> (glossaire, FAQ,
       cadre juridique) : voir la mise à jour de `.rule` plus haut ;
     • sections/articles SANS `.rule` (confidentialité, teaser dossiers,
       pages-dossier) : on ajoute un séparateur en pseudo-élément — un fin
       filet pleine largeur très discret, coiffé à gauche d'un court accent
       dégradé bleu→doré. Le `:not(:has())` évite tout doublon là où un
       `.rule` est déjà présent (dégradation propre si `:has()` absent). */
.prose > section:not(:has(> .rule)),
.prose > article:not(:has(> .rule)) {
  position: relative;
  margin-top: 52px;
  padding-top: 46px;
}
.prose > section:not(:has(> .rule)) > :first-child,
.prose > article:not(:has(> .rule)) > :first-child { margin-top: 0; }
.prose > section:not(:has(> .rule))::before,
.prose > article:not(:has(> .rule))::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, var(--rule) 14%, var(--rule) 86%, transparent 100%);
}
.prose > section:not(:has(> .rule))::after,
.prose > article:not(:has(> .rule))::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-blue), var(--gold));
}

/* Filet de fin de dossier « Partager » (un <div>, hors flux .prose > section)
   repris en dégradé bleu→doré, au même vocabulaire que les séparateurs de
   section. Le bloc « À lire aussi » est un <section> : il est déjà coiffé par
   le séparateur .prose > section ci-dessus. */
.share { position: relative; }
.share::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 72px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-blue), var(--gold));
}

/* --- 2) Apparitions au défilement (reveal.js) --------------------
   L'état masqué n'est appliqué QUE si (a) JavaScript est actif (html.js,
   posé en <head> avant le rendu) et (b) l'utilisateur n'a pas demandé
   moins d'animations. Le contenu est donc toujours visible sans JS et en
   mode « mouvement réduit ». reveal.js révèle chaque bloc via .is-visible. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .62s var(--ease), transform .62s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ==================================================================
   FEUILLE D'IMPRESSION / PDF (@media print) — item-010
   ------------------------------------------------------------------
   Dossiers propres à imprimer/exporter (usage fréquent des
   responsables associatifs). Purement additif : n'affecte que la
   sortie papier, aucun impact sur l'affichage écran.
   - Encre noire sur papier blanc, palette forcée en clair (quel que
     soit le thème sombre ou la préférence OS).
   - Masque en-tête collant, navigation, recherche, bascules, boutons
     et éléments décoratifs (illustrations réservées, partage…).
   - Affiche l'URL des liens de contenu (lecture hors ligne).
   - Typographie sérif, marges et rythme optimisés pour le papier.
   ================================================================== */
@media print {
  /* Marges de page confortables (registre « document ») */
  @page { margin: 18mm 16mm; }

  /* Jetons forcés en variante claire, y compris si un thème sombre
     est actif ou si l'OS est en mode sombre : toutes les références
     var() du site (titres, filets, encre secondaire…) restent lisibles
     sur papier blanc. */
  :root,
  :root[data-theme="dark"],
  :root[data-theme="light"] {
    color-scheme: light !important;
    --ink:        #000;
    --ink-soft:   #222;
    --ink-faint:  #444;
    --paper:      #fff;
    --surface:    #fff;
    --rule:       #bbb;
    --rule-strong:#999;
    --brand-blue: #0d3b73;   /* bleu marine (rendu N&B correct) */
    --accent:     #103a6b;   /* bleu foncé : lisible aussi en N&B */
    --accent-ink: #0b2c52;
    --accent-wash: transparent;
    --gold:       #6b4a05;   /* doré foncé : lisible aussi en N&B */
    --on-accent:  #000;
    --header-glass: transparent;
    --paper-tint: #fff;
    /* Ouvertures illustrées : texte repassé en encre foncée (les voiles
       dégradés sont neutralisés par background-image:none plus bas). */
    --on-media:        #000;
    --on-media-soft:   #222;
    --on-media-accent: #103a6b;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
  }

  html {
    scroll-behavior: auto;
    background: #fff;
  }

  body {
    margin: 0;
    display: block;                 /* neutralise le flex colonne */
    background: #fff !important;
    background-image: none !important;
    color: #000;
    font-family: var(--serif);      /* corps sérif, lecture papier */
    font-size: 11.5pt;
    line-height: 1.5;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Aplatir toute la profondeur : ombres, filets animés, transitions */
  *, *::before, *::after {
    box-shadow: none !important;
    text-shadow: none !important;
    transition: none !important;
    animation: none !important;
    background-image: none !important;
  }

  /* Apparitions au défilement (reveal.js) : forcer le contenu visible —
     les blocs non encore atteints par l'observer resteraient sinon masqués
     (opacity:0) à l'impression. */
  .reveal { opacity: 1 !important; transform: none !important; }

  /* Séparateurs de section décoratifs : sans objet sur papier */
  .prose > section::before, .prose > section::after,
  .prose > article::before, .prose > article::after,
  .read-next::before, .share::before { display: none !important; }

  /* --- Masquer l'habillage d'interface (hors sujet sur papier) --- */
  .skip-link,
  .site-header,              /* en-tête collant : nav, recherche, bascules */
  .nav-toggle,
  .theme-toggle,
  .site-menu,
  .search-field,
  .search-count,
  .back-to-top,
  .share,
  .bento-nav,                /* sélecteur de thèmes (navigation) */
  .home-hero__topics,        /* raccourcis (navigation) */
  .illus-slot,               /* emplacements d'illustration réservés */
  .card-cta,
  .card__cta,
  .read-more {                /* bouton « Lire la suite » (navigation) */
    display: none !important;
  }

  /* Surfaces à plat : ni fond, ni voile, ni ombre */
  .card, .card--feature, .card__media, .card__body,
  .bento, .key-figure, .key-figures, .pull-quote,
  .hero-figure, .rubric-header, .article-figure,
  .home-hero, .read-next, .search-results {
    background: transparent !important;
    border-color: #bbb !important;
  }

  /* Ouvertures illustrées (hero d'accueil + bandeaux de rubrique) :
     défaire la superposition — le texte, sans voile sombre à l'impression,
     revient en flux normal et en encre foncée. La photo d'ouverture de
     l'accueil (décorative) est retirée ; l'illustration de rubrique est
     conservée, remise en flux sous son titre. */
  .home-hero,
  .rubric-header {
    display: block !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .home-hero::after,
  .rubric-header::after { display: none !important; }
  .home-hero .hero-figure { display: none !important; }
  .rubric-header img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 21 / 9 !important;
    object-fit: cover !important;
    margin-top: 6pt;
  }
  .home-hero__intro,
  .rubric-header__caption {
    position: static !important;
    z-index: auto !important;
    max-width: none !important;
    padding: 0 !important;
    color: #000 !important;
  }

  /* Colonne de lecture : pleine largeur imprimable */
  .wrap, .wrap--wide { max-width: 100%; padding: 0; }

  /* Éviter les coupures disgracieuses */
  h1, h2, h3, h4 { page-break-after: avoid; break-after: avoid; }
  h1, h2, h3 { color: var(--accent); }
  figure, table, .key-figures, .pull-quote, .card {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  img { max-width: 100% !important; }
  p, blockquote, li { orphans: 3; widows: 3; }

  /* Afficher l'URL des liens de contenu (dans le corps de page).
     On cible les liens absolus http(s) : les ancres internes (#…) et
     les liens d'interface restent sans annotation. */
  main a[href^="http"]::after {
    content: " <" attr(href) ">";
    font-family: var(--sans);
    font-size: 85%;
    color: #444;
    word-break: break-all;
  }
  main a[href^="http"] { text-decoration: underline; color: var(--accent); }

  /* Pied de page réduit à l'essentiel (éditeur + mention), sans navigation */
  .site-footer {
    border-top: 1px solid #bbb !important;
    margin-top: 18pt;
    padding: 10pt 0 0 !important;
    font-size: 9pt;
  }
  .site-footer nav,
  .site-footer .footer-bottom nav { display: none !important; }
}