@charset "UTF-8";
/* ============================================================
   BIBLIOSPHERE — feuille de style du thème
   Direction « revue savante » : grille asymétrique, une seule
   famille de caractères, la hiérarchie vient de l'échelle et du
   blanc, pas d'un contraste de polices.

   Palette alignée sur ref.bibliosphere.fr, à une exception près,
   documentée plus bas.
   ============================================================ */

/* ---------- Luciole ----------
   Police libre conçue en France pour les lecteurs déficients visuels
   (CTRDV + laboratoire DIPHE, Université Lumière Lyon 2). Déjà déployée
   sur ref.bibliosphere.fr : le choix est celui de l'association.

   Fichiers à déposer dans assets/font/Luciole/ (voir README) — formats web
   woff2 et woff, jamais les fichiers d'impression, jamais de CDN tiers.
   Tant qu'ils sont absents, le repli s'applique : la page reste lisible,
   elle perd seulement sa police de marque. */
@font-face {
  font-family: 'Luciole';
  src: url('../font/Luciole/luciole-regular-webfont.woff2') format('woff2'),
       url('../font/Luciole/luciole-regular-webfont.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Luciole';
  src: url('../font/Luciole/luciole-bold-webfont.woff2') format('woff2'),
       url('../font/Luciole/luciole-bold-webfont.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Luciole';
  src: url('../font/Luciole/luciole-regular-italic-webfont.woff2') format('woff2'),
       url('../font/Luciole/luciole-regular-italic-webfont.woff') format('woff');
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* Couleurs — extraites du logo Bibliosphere (charte v1.0, §1).
     Contrastes mesurés :
       encre sur blanc      12,80:1  AAA
       profond sur blanc    16,19:1  AAA
       plomb sur blanc       8,38:1  AAA
       violet sur blanc      7,01:1  AAA
       blanc sur violet      7,01:1  AAA
       clair sur encre       6,63:1  AA
       accent clair/encre    8,43:1  AAA
     Interdit absolu : encre sur violet (1,83:1). Sur fond violet, le texte
     est blanc, sans exception. */
  --encre:        #382860;
  --profond:      #241a40;
  --violet:       #5050a0;
  --clair:        #b7b7e2;
  --accent-clair: #cfcff0;
  --plomb:        #4a4c63;
  --papier:       #f4f4fa;
  --blanc:        #ffffff;

  /* Typographie — une seule famille. La personnalité vient de l'échelle
     et de l'espace, pas d'un contraste de caractères.
     Atkinson Hyperlegible n'est jamais téléchargée : elle n'est utilisée
     que si le poste la possède déjà. Aucune requête vers un tiers. */
  --police:       "Luciole", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --corps:        1.25rem;
  --corps-petit:  1.0625rem;
  --interligne:   1.65;
  /* La mesure de lecture EST la colonne de la grille, pas une valeur séparée.
     Les deux étaient distinctes (760 px contre 36 em = 720 px) : le texte
     s'arrêtait 40 px avant le filet qui le surmonte, ce qui donnait au
     contenu un air comprimé dans son propre cadre.
     760 px à 20 px de corps font 38 em, environ 76 caractères — sous le
     plafond de 80 recommandé. La lisibilité est préservée. */
  --mesure:       var(--colonne);

  /* Espacement, base 8 */
  --esp-1: 0.25rem;  --esp-2: 0.5rem;   --esp-3: 1rem;
  --esp-4: 1.5rem;   --esp-5: 2rem;     --esp-6: 3rem;
  --esp-7: 4.5rem;   --esp-8: 6.5rem;   --esp-9: 10rem;

  --insert:    2.5rem;

  /* Structure.
     Le conteneur épouse exactement la grille : 248 + 72 + 760 = 1080, plus
     les deux marges intérieures. La charte v1.0 le fixait à 1360 px, ce qui
     laissait 200 px de vide à droite — 16 % de la largeur — que les filets
     de séparation venaient souligner en traversant toute la page.
     La mesure de lecture (36 em) n'est pas touchée : c'est le cadre qui
     s'ajuste au texte, pas l'inverse. */
  --marge:     320px;
  --colonne:   760px;
  --gouttiere: 96px;
  --conteneur: calc(var(--marge) + var(--gouttiere) + var(--colonne) + (2 * var(--insert)));
  --filet:     1px solid var(--encre);
  --rayon:     0;

  /* Jeton local, hors charte : filet de séparation sur fond sombre. */
  --liseré:    #55407f;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Fond sombre de part et d'autre de la feuille. Sur un grand écran, une
     page blanche sur fond blanc n'a plus de bords : elle flotte. Le fond
     coloré lui redonne un cadre, comme sur ref.bibliosphere.fr.
     C'est le ton le PLUS sombre : les sections sombres de la feuille sont
     un cran plus claires, sinon elles s'y confondent et la feuille paraît
     percée à cet endroit. */
  background: var(--profond);
  color: var(--encre);
  font-family: var(--police);
  font-size: var(--corps);
  line-height: var(--interligne);
  text-rendering: optimizeLegibility;
}

/* ---------- Focus ----------
   Jamais supprimé, toujours à fort contraste, doublé d'un halo
   blanc pour rester visible sur n'importe quel fond. */
:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--blanc);
  border-radius: 0;
}
.sombre :focus-visible {
  outline-color: var(--clair);
  box-shadow: 0 0 0 6px var(--encre);
}
.pied :focus-visible {
  outline-color: var(--clair);
  box-shadow: 0 0 0 6px var(--encre);
}

.evitement {
  position: absolute; left: -9999px; top: 0;
  background: var(--encre); color: var(--blanc);
  padding: 1rem 1.5rem; z-index: 100; text-decoration: none;
}
.evitement:focus { left: 0; }

/* Réservé aux lecteurs d'écran */
.lecture-seule {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- La feuille ----------
   Tout le contenu vit sur une surface blanche centrée. Les bandes de couleur
   à l'intérieur vont d'un bord à l'autre de la feuille, plus de l'écran. */
.feuille {
  max-width: var(--conteneur);
  margin: 0 auto;
  background: var(--blanc);
}

/* ---------- Grille asymétrique ---------- */
.enveloppe { max-width: var(--conteneur); margin: 0 auto; padding: 0 var(--insert); }
.feuille .enveloppe { max-width: none; }

.rubrique {
  display: grid;
  grid-template-columns: var(--marge) minmax(0, var(--colonne));
  gap: var(--gouttiere);
  padding-top: 3rem;
  padding-bottom: 6.5rem;
}
.rubrique--ouverture { padding-top: 3.25rem; padding-bottom: 7rem; }

.bande--papier { background: var(--papier); }

.rubrique__marge {
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--violet); line-height: 1.4; margin: 0.5rem 0 0;
}
.rubrique__glose {
  display: block; margin-top: 0.85rem;
  font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--plomb); font-size: 1rem;
}

/* ---------- Échelle typographique : 4 paliers ---------- */
h1, h2, h3 { font-family: var(--police); font-weight: 700; margin: 0; }

.manchette {
  font-size: clamp(2.25rem, 4.1vw, 3.75rem);
  line-height: 1.1; letter-spacing: -0.025em;
  /* Seule exception : une manchette de trois lignes au plus se lit mieux
     resserrée. C'est un choix de composition, pas une contrainte de mesure. */
  max-width: 14em; margin: 0 0 var(--esp-5);
}
/* Titre d'une page intérieure : un cran sous la manchette de l'accueil,
   pour que la page d'accueil reste le point haut de la hiérarchie. */
.titre-page {
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.15; letter-spacing: -0.02em;
  max-width: var(--mesure); margin: 0 0 var(--esp-5);
}
.chapeau {
  font-size: 1.5rem; line-height: 1.5;
  max-width: var(--mesure); margin: 0 0 1.75rem;
}
h2 {
  font-size: clamp(1.625rem, 2.7vw, 2.25rem);
  line-height: 1.22; letter-spacing: -0.018em;
  max-width: var(--mesure); margin: 0 0 var(--esp-4);
}
h3 {
  font-size: 1.375rem; line-height: 1.35;
  margin: var(--esp-5) 0 var(--esp-3); max-width: var(--mesure);
}

p { margin: 0 0 var(--esp-4); max-width: var(--mesure); }
p:last-child { margin-bottom: 0; }
.appui { color: var(--plomb); }

a { color: var(--encre); text-underline-offset: 0.2em; }
a:hover { color: var(--violet); }

/* ---------- Contenu produit par l'éditeur ----------
   Ces règles couvrent ce qu'un rédacteur peut insérer sans
   connaître le thème : listes, citations, tableaux, images. */
.corps > ul, .corps > ol { max-width: var(--mesure); margin: 0 0 1.5rem; padding-left: 1.4em; }
.corps li { margin-bottom: 0.6rem; }
.corps li:last-child { margin-bottom: 0; }

.corps blockquote {
  margin: 2rem 0; padding: 0 0 0 1.5rem;
  border-left: 3px solid var(--violet);
  font-size: 1.375rem; line-height: 1.5; max-width: 32em;
}
.corps blockquote p:last-child { margin-bottom: 0; }

.corps img, .corps figure img { max-width: 100%; height: auto; display: block; }
.corps figure { margin: 2.5rem 0; }
.corps figcaption {
  margin-top: 0.85rem; font-size: var(--corps-petit);
  color: var(--plomb); max-width: var(--mesure);
}

.corps table {
  width: 100%; border-collapse: collapse; margin: 2rem 0;
  font-size: 1.0625rem;
}
.corps th, .corps td {
  text-align: left; padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--encre); vertical-align: top;
}
.corps th { font-weight: 700; border-bottom-width: 2px; }
/* Un tableau ne doit jamais élargir la page : il défile dans son cadre. */
.tableau-defilant { overflow-x: auto; margin: 2rem 0; }

.corps abbr[title] { text-decoration: underline dotted; cursor: help; }
.corps hr { border: 0; border-top: 1px solid var(--encre); margin: var(--esp-6) 0; max-width: var(--mesure); }

/* ---------- En-tête ---------- */
.entete {
  background: var(--papier);
  border-bottom: 1px solid var(--encre);
}
.entete__interieur {
  max-width: var(--conteneur); margin: 0 auto; padding: 1.5rem var(--insert);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2rem; justify-content: space-between;
}
.entete__interieur > nav { display: flex; align-items: center; order: 2; margin-left: auto; }

/* Accès à l'application : la seule action de l'en-tête, donc traitée comme un
   bouton plein et non comme une entrée de menu. Placé avant le menu dans le
   document — il vient tôt au clavier — et renvoyé à droite par « order ».
   Sous 900 px il reste hors du repli : celui qui vient travailler ne doit pas
   déplier un menu pour atteindre son outil. */
.entete__acces {
  order: 3;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.25rem;
  background: var(--encre); color: var(--blanc);
  font-size: 1.0625rem; font-weight: 700; line-height: 1.2;
  text-decoration: none; border: 2px solid var(--encre);
}
.entete__acces:hover { background: var(--violet); border-color: var(--violet); color: var(--blanc); }
.entete__acces:focus-visible { outline-offset: 4px; }
.logotype { display: inline-block; text-decoration: none; line-height: 0; }
.logotype img { display: block; width: 292px; height: auto; }
.pied .logotype img { width: 240px; }
@media (max-width: 720px) { .logotype img { width: 232px; } }

/* Menu : déplié sur grand écran, repliable sous 900px.
   <details> natif — clavier et lecteur d'écran par construction,
   et le menu reste visible si le JavaScript ne s'exécute pas. */
.nav__bouton { display: none; }
.menu { display: flex; flex-wrap: wrap; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.menu a {
  font-size: 1.0625rem; text-decoration: none;
  border-bottom: 2px solid transparent; padding: 0.6rem 0; display: inline-block;
}
.menu a:hover, .menu a[aria-current="page"] { border-bottom-color: var(--violet); }

/* ---------- Boutons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.actions--secondaire { margin-top: 1.5rem; }
.lien-action {
  display: inline-flex; align-items: center; min-height: 48px;
  font-size: 1.0625rem; font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 0.25em; color: var(--encre);
}
.lien-action:hover { color: var(--violet); }
.bouton {
  display: inline-flex; align-items: center; min-height: 56px; padding: 0 1.75rem;
  font-family: var(--police); font-size: 1.125rem; font-weight: 700;
  text-decoration: none; border: 2px solid var(--violet);
  background: var(--violet); color: var(--blanc); border-radius: 0;
}
.bouton:hover { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.bouton--contour { background: transparent; border-color: var(--encre); color: var(--encre); }
.bouton--contour:hover { background: var(--encre); color: var(--blanc); }
.sombre .bouton--contour { border-color: var(--blanc); color: var(--blanc); }
.sombre .bouton--contour:hover { background: var(--blanc); color: var(--encre); }

/* ---------- Grille d'engagements ---------- */
.mission {
  list-style: none; margin: var(--esp-5) 0 0; padding: 0; max-width: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25rem 2.5rem;
}
.mission li {
  padding-top: 1.1rem; border-top: 3px solid var(--violet);
  font-size: 1.125rem; line-height: 1.5;
}
.mission + * { margin-top: var(--esp-6); }
@media (max-width: 720px) { .mission { grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); } }

/* ---------- Sommaire des actions ---------- */
.sommaire { list-style: none; margin: 0; padding: 0; }
.sommaire li { border-bottom: 1px solid var(--encre); }
.sommaire li:first-child { border-top: 2px solid var(--violet); }
.sommaire a {
  display: grid; grid-template-columns: 16rem minmax(0, 1fr);
  gap: 2rem; align-items: baseline; min-height: 84px;
  padding: 1.4rem 0; text-decoration: none;
}
.sommaire a:hover { background: var(--blanc); }
.sommaire a:hover .sommaire__titre { color: var(--violet); }
.sommaire__titre { font-family: var(--police); font-weight: 700; font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.012em; }
.sommaire__glose { font-size: 1.0625rem; color: var(--plomb); line-height: 1.5; }
.renvoi { margin-top: 1.75rem; font-size: 1.0625rem; color: var(--plomb); }

/* ---------- Planche illustrée ---------- */
.planche { margin: 0; padding: 0; }
.planche__cadre {
  border-top: 1px solid var(--encre); border-bottom: 1px solid var(--encre);
  background: var(--papier); margin: 0; padding: 0; display: block;
}
.planche__cadre img {
  display: block; width: 100%; height: auto;
  max-height: 62vh; object-fit: cover;
}
.planche__mention {
  display: block; max-width: var(--conteneur); margin: 0 auto;
  padding: 1.1rem var(--insert); border-top: 1px solid var(--encre);
  font-size: 1.0625rem; color: var(--plomb); text-align: left;
}
.planche__legende {
  max-width: var(--conteneur); margin: 1rem auto 0;
  padding: 0 var(--insert) 6.5rem; font-size: 1.0625rem; color: var(--plomb);
}

/* ---------- Bandeau sombre ----------
   La section vit dans la feuille, sur un fond extérieur lui aussi sombre :
   l'écart entre les deux tons n'est que de 1,27:1, invisible en basse vision.
   Ce sont les filets clairs qui la délimitent, pas la nuance de fond — le
   site est fait de filets, la solution reste dans son langage. */
.sombre {
  background: var(--encre);
  color: var(--blanc);
  border-top: 3px solid var(--clair);
  border-bottom: 3px solid var(--clair);
}
.sombre a { color: var(--blanc); }
.sombre .rubrique__marge { color: var(--clair); }
.sombre .rubrique__glose { color: var(--accent-clair); }

/* ---------- Pied ---------- */
/* Le pied est en Encre, pas en Profond : sur un body Profond, un pied de
   même ton se fondrait dans le fond et la page n'aurait plus de fin visible. */
.pied { background: var(--encre); color: var(--blanc); border-top: 1px solid var(--liseré); padding: 3.5rem 0; }
.pied__interieur {
  max-width: var(--conteneur); margin: 0 auto; padding: 0 var(--insert);
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 3rem 2.5rem; align-items: start;
}
.pied__colonne { min-width: 0; }
.pied__nom {
  font-family: var(--police);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--blanc);
}
.pied__signature { color: var(--accent-clair); font-size: 1.0625rem; margin: 1rem 0 0; max-width: 22em; }
.pied__titre {
  font-family: var(--police); font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin: 0 0 1rem; color: var(--clair);
}
.pied__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.pied__liste a { display: inline-block; padding: 0.35rem 0; }
/* Fond indigo : les liens doivent être explicitement clairs,
   sinon ils héritent de la couleur d'encre et disparaissent. */
.pied a {
  font-size: 1.0625rem; color: var(--blanc);
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.pied a:hover { color: var(--clair); text-decoration-thickness: 2px; }
.pied .logotype { text-decoration: none; }

.pied__mention {
  grid-column: 1 / -1; color: var(--accent-clair); font-size: 1rem;
  margin: 1.5rem 0 0; padding-top: 2rem; border-top: 1px solid var(--liseré);
  max-width: 60em;
}

/* ---------- Grands écrans ----------
   On n'élargit pas la colonne à mesure de l'écran : la ligne s'allongerait et
   deviendrait illisible. On agrandit la typographie. Le nombre de caractères
   par ligne reste constant — 38 em partout — mais le texte occupe davantage
   de pixels, donc la page occupe davantage l'écran.

   Pour le public de l'association, un texte plus grand sur un grand écran est
   un bénéfice direct, pas un effet de style : c'est du confort de lecture
   gagné sans rien demander à l'utilisateur.

   La marge et la gouttière suivent, pour que la grille garde ses proportions. */
@media (min-width: 1600px) {
  :root {
    --corps:       1.375rem;   /* 22 px */
    --corps-petit: 1.125rem;   /* 18 px */
    --colonne:     836px;      /* 38 em à 22 px */
    --marge:       360px;
    --gouttiere:   112px;
    --insert:      3rem;
  }
}

@media (min-width: 2200px) {
  :root {
    --corps:       1.5rem;     /* 24 px */
    --corps-petit: 1.1875rem;  /* 19 px */
    --colonne:     912px;      /* 38 em à 24 px */
    --marge:       420px;
    --gouttiere:   128px;
    --insert:      3.5rem;
  }
}

@media (min-width: 2800px) {
  :root {
    --corps:       1.625rem;   /* 26 px */
    --corps-petit: 1.25rem;    /* 20 px */
    --colonne:     988px;      /* 38 em à 26 px */
    --marge:       480px;
    --gouttiere:   144px;
    --insert:      4rem;
  }
}

@media (max-width: 900px) { .pied__interieur { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pied__interieur { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Bascule ---------- */
@media (max-width: 900px) {
  .entete__interieur { display: block; }
  .entete__interieur > nav { display: block; width: 100%; margin-top: 1.25rem; }
  .entete__acces { display: flex; width: 100%; margin-top: 1.25rem; box-sizing: border-box; }
  .nav { display: block; width: 100%; }
  .nav__bouton {
    display: flex; align-items: center; justify-content: space-between;
    box-sizing: border-box; width: 100%;
    min-height: 52px; padding: 0 1.1rem;
    border: 2px solid var(--encre);
    background: var(--encre); color: var(--blanc);
    font-size: 1.0625rem; font-weight: 700;
    cursor: pointer; list-style: none;
  }
  .nav__bouton::-webkit-details-marker { display: none; }
  .nav__bouton::after {
    content: ""; width: 12px; height: 12px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
  }
  .nav[open] .nav__bouton::after { transform: rotate(-135deg) translate(-4px, -4px); }
  .nav__bouton:hover { background: var(--violet); border-color: var(--violet); }
  .menu { display: block; box-sizing: border-box; width: 100%; gap: 0; margin: 0; border-bottom: 1px solid var(--encre); }
  .menu li { display: block; width: 100%; border-bottom: 0; }
  .menu li + li { border-top: 1px solid var(--encre); }
  .menu a { display: block; box-sizing: border-box; width: 100%; padding: 1rem 1.1rem; border-bottom: 0; }
  .menu a:hover, .menu a:focus-visible, .menu a[aria-current="page"] {
    background: var(--papier); color: var(--violet); border-bottom: 0;
  }
}

@media (max-width: 1024px) {
  .rubrique { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-bottom: 4.5rem; }
  .sommaire a { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  :root { --insert: 1.25rem; }
  .chapeau { font-size: 1.375rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .bouton { border: 2px solid ButtonText; }
  .sommaire li { border-bottom: 1px solid CanvasText; }
}

@media print {
  .entete nav, .evitement, .actions { display: none; }
  body { font-size: 12pt; color: #000; }
  a::after { content: " (" attr(href) ")"; font-size: 10pt; }
}

/* ============================================================
   SECTIONS COMPOSÉES
   Les pages sont assemblées à partir des sections déclarées dans
   inc/patterns.php. L'éditeur produit des <div class="wp-block-group">
   autour de chaque groupe : les règles ci-dessous neutralisent ces
   enveloppes pour que la grille reste celle du thème.
   ============================================================ */

/* Un groupe de l'éditeur ne doit pas introduire d'espacement vertical propre.
   On neutralise les marges hautes et basses uniquement : « margin: 0 » ferait
   sauter le « margin: 0 auto » qui centre les enveloppes, et les sections sur
   fond coloré se décaleraient vers la gauche. */
.rubrique > .wp-block-group,
.enveloppe > .wp-block-group,
.bande--papier > .wp-block-group,
.sombre > .wp-block-group { margin-block: 0; }

/* Une rubrique posée par l'éditeur garde la grille à deux colonnes. */
.wp-block-group.rubrique { display: grid; }

/* Les bandes de couleur portent leur fond sur toute la largeur : elles ne
   doivent donc pas hériter du plafond de largeur d'une enveloppe parente. */
.wp-block-group.bande--papier,
.wp-block-group.sombre { max-width: none; padding: 0; }

/* ---------- Chiffres-clés ---------- */
.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--esp-5) var(--esp-6);
  margin: var(--esp-5) 0 0;
}
.chiffre { padding-top: var(--esp-3); border-top: 3px solid var(--violet); }
.chiffre__valeur {
  font-family: var(--police); font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1.05;
  letter-spacing: -0.03em; margin: 0 0 var(--esp-2); max-width: none;
}
.chiffre__legende {
  font-size: var(--corps-petit); line-height: 1.5;
  color: var(--plomb); margin: 0; max-width: 22em;
}
.sombre .chiffre__legende { color: var(--accent-clair); }
.sombre .chiffre { border-top-color: var(--clair); }
/* Ce qui suit les chiffres ne doit pas leur être collé, sinon le texte
   paraît légender le dernier chiffre. Même règle que pour .mission. */
.chiffres + * { margin-top: var(--esp-6); }

/* Les boutons sont écrits dans un paragraphe : il ne doit pas contraindre
   leur largeur ni les empiler. */
.actions p, p.actions { max-width: none; margin: 0; display: flex; flex-wrap: wrap; gap: var(--esp-3); }

/* ---------- Sous-menus ----------
   L'association peut rattacher des pages sous une entrée du menu depuis
   Apparence → Menus. Le thème doit donc savoir les afficher, sans quoi elles
   se déversent à plat dans la barre de navigation.

   Ouverture au survol ET au focus clavier, sans JavaScript : quand le lien
   parent reçoit le focus, « :focus-within » ouvre le panneau, ce qui rend les
   liens enfants atteignables à la tabulation suivante. Un panneau masqué par
   « display:none » sans cette règle serait inaccessible au clavier. */
.menu > li { position: relative; }

.menu .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 20rem;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--blanc);
  border: 2px solid var(--encre);
}
.menu > li:hover > .sub-menu,
.menu > li:focus-within > .sub-menu { display: block; }

.menu .sub-menu li + li { border-top: 1px solid var(--papier); }
.menu .sub-menu a {
  display: block;
  padding: 0.85rem 1rem;
  border-bottom: 0;
  text-decoration: none;
}
.menu .sub-menu a:hover,
.menu .sub-menu a:focus-visible,
.menu .sub-menu a[aria-current] { background: var(--papier); color: var(--violet); }

/* Une entrée qui en cache d'autres doit le dire : un chevron, pas seulement
   un comportement au survol que rien n'annonce. */
.menu .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-left: 0.5em;
  vertical-align: 0.15em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

@media (max-width: 900px) {
  /* Plus de survol qui tienne : le sous-menu est déplié, en retrait. */
  .menu > li { position: static; }
  .menu .sub-menu {
    display: block;
    position: static;
    min-width: 0;
    border: 0;
    background: var(--papier);
  }
  .menu .sub-menu a { padding-left: 2.2rem; }
  .menu .sub-menu li + li { border-top: 1px solid var(--blanc); }
  .menu .menu-item-has-children > a::after { display: none; }
}

/* ============================================================
   FORMULAIRES
   Le balisage vient de Contact Form 7, dont le HTML est écrit à la
   main dans l'administration : étiquettes visibles reliées aux champs,
   aides permanentes, erreurs en toutes lettres.
   ============================================================ */

.champ { max-width: var(--mesure); margin: 0 0 var(--esp-5); }

.champ label {
  display: block;
  font-weight: 700;
  margin-bottom: var(--esp-2);
}

/* « (obligatoire) » écrit en toutes lettres plutôt qu'un astérisque :
   un astérisque se prononce « étoile » et n'apprend rien. */
.champ__requis {
  font-weight: 400;
  font-size: var(--corps-petit);
  color: var(--plomb);
}

/* Aide permanente, pas un texte d'exemple qui disparaît à la première frappe
   — et que le lecteur d'écran n'annonce plus ensuite.
   Elle vit DANS l'étiquette : Contact Form 7 n'accepte pas d'attribut
   aria-describedby sur ses champs, et une étiquette déjà reliée par « for »
   annonce tout son contenu. Une aide brève s'y prête bien. */
.champ__aide {
  display: block;
  font-weight: 400;
  font-size: var(--corps-petit);
  color: var(--plomb);
  margin-top: var(--esp-2);
  max-width: 34em;
}

.champ input[type="text"],
.champ input[type="email"],
.champ textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0.7rem 0.9rem;
  font-family: var(--police);
  font-size: var(--corps);
  line-height: 1.5;
  color: var(--encre);
  background: var(--blanc);
  border: 2px solid var(--encre);
  border-radius: var(--rayon);
}
.champ textarea { min-height: 12rem; resize: vertical; }

.champ input:focus-visible,
.champ textarea:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
  box-shadow: none;
}

/* ---------- Retours de Contact Form 7 ---------- */

/* Le bloc de message existe dès le chargement, vide, en attente de la
   réponse du serveur. Encadré comme il l'est, il dessinait un cadre vide
   sous le bouton d'envoi. Un conteneur sans contenu ne doit rien occuper. */
.wpcf7-response-output:empty { display: none; }

/* Message global : encadré, jamais porté par la seule couleur. */
.wpcf7-response-output {
  margin: var(--esp-5) 0 0;
  padding: var(--esp-3) var(--esp-4);
  border: 2px solid var(--encre);
  max-width: var(--mesure);
  font-size: var(--corps);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: #19733b; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: #a94442; }

/* Erreur sous le champ concerné, en texte, avec un filet à gauche.
   CF7 lui met role="alert" : elle est annoncée dès son apparition. */
.wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--esp-2);
  padding-left: 0.75rem;
  border-left: 3px solid #a94442;
  color: #a94442;
  font-size: var(--corps-petit);
  font-weight: 700;
}
.champ input.wpcf7-not-valid,
.champ textarea.wpcf7-not-valid { border-color: #a94442; }

/* L'indicateur d'envoi ne doit pas déplacer le bouton. */
.wpcf7-spinner { margin-left: var(--esp-3); }

.wpcf7 .bouton { cursor: pointer; }

/* ---------- Éléments techniques de Contact Form 7 ----------
   La feuille de style du plugin est retirée : le thème doit donc reprendre
   à son compte ce qu'elle faisait d'utile. Deux éléments, deux traitements
   qu'il ne faut surtout pas confondre. */

/* Les champs cachés du formulaire (jeton, version, identifiants). Sans règle,
   le navigateur dessine la bordure du fieldset et lui réserve de la place :
   un cadre vide apparaît au-dessus du premier champ. */
.wpcf7 .hidden-fields-container { display: none; }

/* Le bloc de retour destiné aux technologies d'assistance. Contact Form 7 y
   annonce le résultat de l'envoi et la liste des erreurs.
   Il est masqué à l'œil mais JAMAIS avec « display: none » : cela le
   retirerait de l'arbre d'accessibilité, et les erreurs ne seraient plus
   annoncées du tout. Même technique que .lecture-seule. */
.wpcf7 .screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}