/* =====================================================================
   TRIBUNE — la feuille.
   =====================================================================
   Les jetons sont dans themes/tribune/css/tokens.css, et la direction y
   est expliquée. Ici : les composants, dans l'ordre de la page.

   LA RÈGLE DE CE THÈME, en une phrase : on montre ce qu'on fait, on
   chiffre ce que ça donne, et on demande d'agir — dans cet ordre, sans
   décoration entre les trois.

   CE THÈME EST LE PLUS DENSE DES CINQ, et c'est délibéré. Une
   organisation de plaidoyer a des positions, des publications, des
   actualités et des actions à exposer ; un thème qui ne saurait
   afficher qu'un titre et une photo l'obligerait à se taire. */

/* ---------- 1. Polices auto-hébergées ------------------------------------
   Geist porte tout : une grotesque contemporaine neutre, à grand œil,
   dessinée pour l'interface. C'est exactement ce qu'il faut ici — on
   demande à ce site de faire lire BEAUCOUP de texte sans fatiguer, et
   une humaniste chaleureuse ou une géométrique à contreformes larges y
   perdraient en densité.

   LE 800 NE SERT QU'AUX CHIFFRES. Un titre en 800 crierait ; un chiffre
   d'impact en 800, lui, est l'argument même de l'organisation. C'est la
   seule graisse lourde du thème, et elle a un seul emploi. */

@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('../../../assets/fonts/geist-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('../../../assets/fonts/geist-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 800;
  font-display: swap; src: url('../../../assets/fonts/geist-800.woff2') format('woff2');
}

/* Repli métrique. LE DÉCALAGE DE MISE EN PAGE DE CE SOCLE EST À ZÉRO
   EXACT, et c'est cette règle qui le tient. */
@font-face {
  font-family: 'Geist repli';
  src: local('Helvetica Neue'), local('Helvetica'), local('Arial'), local('Liberation Sans');
  size-adjust: 96%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%;
}

/* ---------- 2. Jetons ----------------------------------------------------
   Déclarés dans themes/tribune/css/tokens.css — voir la note en tête. */

/* ---------- 3. Remise à plat --------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  interpolate-size: allow-keywords;
  /* Les deux noms du contrat d'ancrage sont ceux du socle : c'est
     tools/verifier-ancres.mjs qui les cherche, par leur nom. */
  --ancre-air: 14px;
  --ancre-haut: calc(var(--h-entete) + var(--ancre-air));
  scroll-padding-top: var(--ancre-haut);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--t-body);
  /* L'INTERLIGNE EST LARGE, ET C'EST LE POINT. 1,72 là où un thème
     ordinaire met 1,55 : c'est ce qui rend un paragraphe abordable pour
     quelqu'un qui lit mal. */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.bloque { overflow: hidden; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--vert); color: var(--encre-clair); }

.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--vert); color: var(--encre-clair);
  padding: 0.7em 1.1em; font-weight: 500;
}
.evitement:focus { left: 0; }

.hors-ecran {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.defs { display: none; }

/* ---------- 4. Rythme et enveloppes -------------------------------------- */

/* PAS DE BANDE UNE SUR DEUX. Un rythme mécanique fait « site » ; ici la
   page doit se lire comme un dossier, où le gris signale une NATURE de
   contenu et non un rang. Deux sections seulement le portent — les
   chiffres d'impact et les ressources —, et un filet sépare le reste. */
main > .sec + .sec { border-top: var(--filet) solid var(--trait); }

.sec {
  padding: var(--section-y) var(--gouttiere);
  --ancre-retrait: var(--section-y);
  scroll-margin-top: calc(0px - var(--ancre-retrait));
}
/* LA PHRASE MANIFESTE D'ABORD, LE TERRAIN ENSUITE. On lit la cause
   avant de voir l'image : c'est une organisation qui prend position, et
   une position se lit.

   LA PHOTO N'OCCUPE PAS UN ÉCRAN ENTIER. Un hero de 100 vh pour une
   phrase est le contraire de ce thème : on veut que le bloc « à la une »
   soit déjà visible au premier défilement, sur téléphone comme sur
   grand écran. */
.sec--hero {
  padding: 0 0 var(--section-y);
  background: var(--fond) !important;
  --ancre-retrait: 0px;
  display: flex; flex-direction: column;
}
.sec--hero__texte { order: 1; }
.sec--hero__media { order: 2; }

.sec__entete { max-width: var(--large); margin: 0 auto clamp(22px, 3vw, 40px); }

/* LE TITRE DE SECTION est posé sur un filet d'encre qui traverse toute
   la largeur : c'est la règle d'un dossier, et c'est ce qui donne au
   thème son air de document plutôt que de brochure. Graisse 500 —
   affirmé, jamais lourd. */
.sec__titre {
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.18;
  letter-spacing: -0.02em;
  max-width: 24ch;
  text-wrap: balance;
}
.sec__entete { position: relative; padding-top: 1rem; }
.sec__entete::before {
  content: ""; position: absolute; inset: 0 0 auto 0;
  height: 2px; background: var(--encre);
}
.sec--hero .sec__entete::before { display: none; }
.sec__texte { max-width: var(--lecture); color: var(--encre-douce); }
.sec__texte + .sec__texte { margin-top: 0.9em; }
.sec__texte p + p, .corps p + p { margin-top: 0.9em; }

.sec__corps { max-width: var(--large); margin: 0 auto; }

/* L'ÉTIQUETTE. Petites capitales, vert franc, précédée d'une barre :
   c'est le repère de lecture d'un document dense, et il est partout. */
.sec__intitule {
  font-weight: 500; font-size: var(--t-mention);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--vert);
  margin: 2.2em 0 0.8em;
  padding-left: 0.9em; position: relative;
}
.sec__intitule::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 0.45em; height: 2px; background: var(--vert);
}
.sec__intitule--passe { color: var(--encre-douce); }
.sec__categorie { font-weight: 500; font-size: var(--t-h3); margin: 1.6em 0 0.7em; }

/* L'AVIS. Encadré, pas coloré : ce thème dit les choses, il n'alarme
   personne. */
.sec__avis {
  max-width: var(--lecture);
  padding: 0.9em 1.1em;
  border: 1px solid var(--trait-fort); border-radius: var(--rayon);
  background: var(--fond);
}

.secours { margin-top: 1.4em; color: var(--encre-douce); font-size: var(--t-petit); }
.lien { color: var(--vert); text-underline-offset: 2px; }
.lien:hover { color: var(--vert-fonce); }

.mention-donnees {
  margin-top: 1em; padding: 0.8em 1em;
  background: var(--fond-creux); border-radius: var(--rayon);
  font-size: var(--t-petit); color: var(--encre-douce);
}
.mention-donnees__texte + .mention-donnees__texte { margin-top: 0.4em; }

h1, h2, h3, h4 { font-weight: 500; line-height: 1.28; }
.ital { font-style: italic; }

.sec__points { display: grid; gap: 0.6em; max-width: var(--lecture); }
.sec__points li { position: relative; padding-left: 1.4em; }
.sec__points li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--vert);
}

/* ---------- 5. Boutons ---------------------------------------------------
   PRESQUE RECTANGULAIRES, ET FRANCS. Deux pixels d'arrondi, un filet
   d'encre pour le bouton ordinaire, un aplat vert pour l'action. Aucune
   ombre, aucun dégradé : ce qui distingue les deux est le remplissage,
   pas un effet. */

.bouton, .sec__bouton, .menu__action {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.6em 1.35em;
  font-weight: 500; font-size: var(--t-petit);
  text-decoration: none; cursor: pointer;
  border: var(--filet) solid var(--encre); border-radius: var(--rayon);
  background: transparent; color: var(--encre);
  transition: background var(--survol) var(--ease), color var(--survol) var(--ease);
}
.bouton:hover, .sec__bouton:hover { background: var(--encre); color: var(--encre-clair); }

.menu__action, .bouton--action {
  background: var(--vert); border-color: var(--vert); color: var(--encre-clair);
}
.menu__action:hover, .bouton--action:hover {
  background: var(--vert-fonce); border-color: var(--vert-fonce); color: var(--encre-clair);
}

/* ---------- 6. Photos -----------------------------------------------------
   AUCUN EFFET DE COULEUR, ET AUCUN CADRAGE SERRÉ. Les photos d'une
   association d'aide montrent des gens ; un recadrage serré transforme
   une scène ordinaire en portrait de détresse, et ce n'est pas ce
   qu'elle veut dire d'elle. Le 4/3 laisse le contexte. */

.sec__agrandir { display: block; }
.sec__agrandir img { transition: opacity var(--survol) var(--ease); }
.sec__agrandir:hover img { opacity: 0.92; }
figure { margin: 0; }
figcaption { margin-top: 0.45em; font-size: var(--t-mention); color: var(--encre-douce); }

/* ---------- 7. En-tête ----------------------------------------------------
   SOBRE, BLANCHE, ET TRÈS NETTE. Un filet d'encre en bas — pas un gris
   timide : c'est la première règle du document, et toutes les autres
   lui répondent. */

.entete {
  position: sticky; top: 0; z-index: 100;
  background: var(--fond);
  border-bottom: 2px solid var(--encre);
}
/* LA BARRE NE PASSE PAS À LA LIGNE. `--ancre-haut` se calcule depuis
   `--h-entete` ; une barre qui s'enroule mesure 100 px là où elle en
   déclare 80, et toutes les ancres déposent alors leur titre sous
   l'en-tête collée. Ce n'était vrai qu'à 900 px de large — la largeur la
   plus serrée où le menu de bureau paraît —, donc invisible à l'essai et
   parfaitement réel. Le menu se serre pour tenir la ligne. */
.entete__barre {
  min-height: var(--h-entete);
  max-width: var(--large); margin: 0 auto;
  padding: 0.4rem var(--gouttiere);
  display: flex; align-items: center; flex-wrap: nowrap; gap: 1rem;
}
/* LE NOM NE SE SERRE JAMAIS, ET LE MENU SE SERRE EN DERNIER.

   La barre tient une ligne — le contrat d'ancre l'exige, voir plus haut.
   Une ligne unique veut dire que quelque chose doit céder quand le menu
   est long, et il faut dire QUOI : sans `flex: none`, c'est le nom de
   l'association qui se comprimait, et il venait toucher la première
   entrée du menu. « L'Écho du PontACCUEIL », collés, sans un pixel entre
   eux. Le nom est ce qu'on ne peut pas abîmer. */
.entete__marque {
  flex: none; min-width: 0;
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none; font-weight: 500; font-size: 1.18rem; line-height: 1.15;
}
.entete__embleme { width: 28px; height: 28px; flex: none; color: var(--vert); }
.entete__marque { letter-spacing: -0.015em; }

.menu {
  margin-left: auto; min-width: 0;
  display: flex; align-items: center; flex-wrap: nowrap; justify-content: flex-end;
  gap: clamp(0.55rem, 1.1vw, 1.1rem);
}
.menu__liste {
  min-width: 0;
  display: flex; align-items: center; flex-wrap: nowrap; justify-content: flex-end;
  gap: clamp(0.5rem, 1vw, 1rem);
}
.menu__liste a {
  text-decoration: none; font-size: var(--t-petit);
  padding: 0.4em 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.menu__liste a:hover, .menu__liste a[aria-current] { border-bottom-color: var(--vert); }

/* LE BOUTON DU MENU REPREND SES MARGES, ET IL LUI FAUT DEUX CLASSES POUR
   CELA. « .menu__liste a » ci-dessus pèse plus qu'un « .menu__action »
   seul — une classe et un type contre une classe — et il passe après :
   la marge du bouton était donc écrasée par la sienne, horizontale à
   ZÉRO. Mesuré sur les cinq thèmes : quatorze pixels au-dessus et en
   dessous du texte, UN SEUL à gauche et à droite — les capitales
   touchaient le bord de l'aplat, et la hauteur ne venait même pas de la
   marge mais du « min-height ».
   La marge est maintenant la même sur les quatre côtés. La valeur est
   calculée pour que la hauteur du bouton ne bouge pas : c'est la largeur
   qui prend la différence. */
.menu__liste .menu__action { padding: 0.84em; }

.entete__bascule { display: none; }
.entete__trait2 { display: none; }

@media (max-width: 899px) {
  .entete__bascule {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-left: auto;
    background: none; border: 1px solid var(--trait-fort); border-radius: var(--rayon);
    cursor: pointer;
  }
    /* LE BOUTON PORTE DEUX <span>, ET UN SEUL DOIT DESSINER.

     Le gabarit du socle en émet deux — c'est l'héritage d'un burger à
     deux barres qui se croisaient, celui des thèmes hôteliers. Ces
     cinq-ci dessinent leurs trois traits avec UN span et ses deux
     pseudo-éléments ; le second span, visé par la même règle, posait un
     second burger par-dessus le premier et débordait de vingt pixels à
     droite du bouton. Sur les cinq thèmes, à 375 comme à 768.

     `.entete__trait2 { display: none }` plus haut ne suffisait pas :
     `.entete__bascule span` a une spécificité supérieure et gagnait. On
     vise donc le premier, et le second reste caché. */
  .entete__bascule span:first-child { display: block; width: 20px; height: 2px; background: var(--encre); position: relative; }
  .entete__bascule span:first-child::before, .entete__bascule span:first-child::after {
    content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--encre);
    transition: transform 160ms var(--ease), top 160ms var(--ease);
  }
  .entete__bascule span:first-child::before { top: -6px; }
  .entete__bascule span:first-child::after  { top: 6px; }
  .entete[data-ouvert] .entete__bascule span:first-child { background: transparent; }
  .entete[data-ouvert] .entete__bascule span:first-child::before { top: 0; transform: rotate(45deg); }
  .entete[data-ouvert] .entete__bascule span:first-child::after  { top: 0; transform: rotate(-45deg); }

  .menu {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--fond); border-bottom: 1px solid var(--trait);
    padding: 0 var(--gouttiere) 1.2rem;
    max-height: calc(100dvh - var(--h-entete)); overflow-y: auto;
    transform: translateY(-6px); opacity: 0; visibility: hidden;
    transition: opacity 160ms var(--ease), transform 160ms var(--ease), visibility 160ms;
  }
  .entete[data-ouvert] .menu { transform: none; opacity: 1; visibility: visible; }
  .menu__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__liste a { padding: 0.95em 0; border-bottom: 1px solid var(--trait); font-size: 1.08rem; }
  .menu__action { margin-top: 1.1rem; }
}

/* ---------- 8. Le bandeau d'information -----------------------------------
   VERT PLEIN, EN HAUT DE TOUT. C'est là qu'une organisation de plaidoyer
   annonce une pétition qui se ferme, une audience, une consultation
   publique dont la date approche. Autant dire : ce qui a une échéance.

   PLEIN ET NON ENCADRÉ : le bandeau doit se voir avant le nom de
   l'organisation, sinon il ne sert à rien. C'est le seul endroit du
   thème où le vert occupe une bande entière. */

.info {
  background: var(--vert); color: var(--encre-clair);
  padding: 0.75em var(--gouttiere);
  font-size: var(--t-petit); text-align: center;
}
.info__mot { display: inline; }
.info__lien { color: var(--encre-clair); text-underline-offset: 3px; margin-left: 0.5em; }

/* ---------- 9. L'accueil --------------------------------------------------
   LA PHRASE MANIFESTE, COURTE ET PRÉCISE, PUIS DEUX BOUTONS. « Protéger
   les territoires. Faire évoluer les décisions. » — deux propositions,
   un point entre les deux, et l'on sait ce que fait l'organisation.

   LA PHOTO EST UNE BANDE, PAS UN ÉCRAN. 2,6/1 sur grand écran : elle
   montre le terrain, elle ne fait pas attendre. Ce qui doit être visible
   au premier défilement, c'est le bloc « à la une ». */

.sec--hero__texte {
  max-width: var(--large);
  margin: 0 auto;
  padding: clamp(36px, 6vw, 80px) var(--gouttiere) clamp(24px, 3.5vw, 44px);
}
.sec--hero--sobre .sec--hero__texte { padding-bottom: clamp(36px, 6vw, 80px); }

.sec--hero__surtitre {
  font-weight: 500; font-size: var(--t-mention);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--vert);
  margin-bottom: 0.9em; padding-left: 0.9em; position: relative;
}
.sec--hero__surtitre::before {
  content: ""; position: absolute; left: 0; top: 0.52em;
  width: 0.45em; height: 2px; background: var(--vert);
}
/* LE MANIFESTE, PUIS LA PLANCHE.

   Le texte d'abord : on lit la position avant de voir le terrain. Ce
   thème partage ce choix avec `permanence`, et il s'en sépare sur tout
   le reste — là où la permanence ouvre sur UNE colonne très aérée, le
   dossier ouvre sur DEUX colonnes serrées, parce qu'un document met le
   constat et son commentaire en vis-à-vis.

   LA PHOTO EST UNE PLANCHE, PAS UNE BANNIÈRE. Très allongée — 3/1 au
   grand écran —, bornée à la largeur de page, et posée sous un filet
   d'encre de deux pixels : la même règle qui ouvre chaque section du
   thème. C'est une pièce jointe au dossier, numérotée comme le reste ;
   ce n'est pas une image d'accueil.

   Graisse 500 pour le titre, jamais 800 : un titre lourd sur une cause
   grave se lit comme un slogan de campagne, et une organisation
   crédible ne fait pas campagne pour elle-même. Le poids est réservé
   aux chiffres, qui sont l'argument. */
.sec--hero__titre {
  font-weight: 500;
  font-size: var(--t-display);
  line-height: 1.04; letter-spacing: -0.032em;
  max-width: 19ch; text-wrap: balance;
}
.sec--hero__soustitre { margin-top: 0.55em; font-size: var(--t-lead); color: var(--encre-douce); max-width: 42ch; }
.sec--hero__intro { margin-top: 1em; max-width: var(--lecture); }
.sec--hero__intro + .sec--hero__intro { margin-top: 0.8em; }
.sec--hero__actions { margin-top: 1.5em; display: flex; flex-wrap: wrap; gap: 0.7em; }

/* La planche : bornée, filetée, et de plus en plus allongée à mesure
   que l'écran s'élargit. L'encart se fait par la largeur et non par un
   padding : `aspect-ratio` se calcule sur la boîte de bordure. */
.sec--hero__media {
  width: 100%;
  max-width: calc(var(--large) - 2 * var(--gouttiere));
  margin: clamp(28px, 4vw, 52px) auto 0;
  padding-top: 12px;
  border-top: 2px solid var(--encre);
  aspect-ratio: 3 / 2; overflow: hidden;
}
.sec--hero__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rayon); }
@media (min-width: 620px)  { .sec--hero__media { aspect-ratio: 2.2 / 1; } }
/* 2,4/1 ET PAS 3/1. La planche a d'abord été cadrée en 3/1 : sur une
   photo de terrain à horizon bas — une berge, un cours d'eau — un
   cadrage aussi allongé ne garde que le ciel, c'est-à-dire la seule
   partie de l'image qui ne montre rien. */
@media (min-width: 1000px) { .sec--hero__media { aspect-ratio: 2.4 / 1; } }

.sec--hero__texte {
  max-width: var(--large);
  margin: 0 auto;
  padding: clamp(32px, 5vw, 64px) var(--gouttiere) 0;
}
.sec--hero--sobre .sec--hero__texte { padding-top: clamp(44px, 7vw, 96px); }

.sec--hero__surtitre {
  font-weight: 500; font-size: var(--t-mention);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--vert);
  margin-bottom: 0.7em;
}

@media (min-width: 1000px) {
  .sec--hero__texte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    column-gap: clamp(32px, 4.5vw, 72px);
    align-items: start;
  }
  .sec--hero__surtitre { grid-column: 1; }
  .sec--hero__titre    { grid-column: 1; }
  .sec--hero__soustitre{ grid-column: 1; }
  /* Une classe posée par riche() ne reçoit jamais de placement par
     élément : on place le PREMIER, les suivants suivent. */
  .sec--hero__intro    { grid-column: 2; grid-row: 1 / span 3; margin-top: 0.35em; }
  .sec--hero__intro + .sec--hero__intro { grid-row: auto; margin-top: 0.8em; }
  .sec--hero__actions  { grid-column: 1; }
}

/* ---------- 10. L'association --------------------------------------------
   LES CHIFFRES D'IMPACT, ET C'EST LE COMPOSANT SIGNATURE DU THÈME.

   Quarante-deux territoires, dix-huit mille personnes, cent vingt-six
   propositions : c'est ce qui distingue une organisation qui agit d'une
   organisation qui parle. Ils sont donc ÉNORMES — jusqu'à 4 rem, plus
   grands que le titre d'accueil — en Geist 800, sur une bande grise,
   séparés par des filets verticaux.

   AUCUNE ICÔNE, AUCUNE CARTE, AUCUNE ANIMATION DE COMPTEUR. Un chiffre
   qui s'anime demande qu'on le regarde ; celui-ci demande qu'on le
   croie. */

.sec--association { background: var(--fond-bande); }
.sec--association .sec__corps { display: grid; gap: clamp(26px, 3.2vw, 52px); }

.sec__chiffres {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  border-top: 2px solid var(--encre);
  border-bottom: var(--filet) solid var(--trait-fort);
}
.sec__chiffres > * {
  padding: 1.6rem clamp(1rem, 2vw, 1.8rem);
  border: 0; border-left: var(--filet) solid var(--trait-fort); border-radius: 0;
  background: transparent;
}
.sec__chiffres > *:first-child { border-left: 0; }
/* UN CHIFFRE NE SE COUPE JAMAIS. « 1 840 » passait à la ligne entre le
   1 et le 840 : à quatre rem, cinq signes et une espace demandent plus
   de place qu'une colonne de deux cents pixels n'en offre une fois son
   padding retiré. Un nombre coupé en deux n'est plus un nombre, c'est
   une erreur de rendu — et c'est le composant signature du thème.

   Deux règles, et il faut les deux : la colonne s'élargit assez pour
   tenir un nombre de cinq signes, et le nombre lui-même refuse la
   coupure quoi qu'il arrive. La seconde protège la première le jour où
   une association écrira « 18 400 ». */
.sec__chiffres dt, .sec__chiffres .valeur {
  white-space: nowrap;
  font-size: var(--t-nombre); font-weight: 800; line-height: 0.94;
  letter-spacing: -0.04em; color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.sec__chiffres dd, .sec__chiffres .mot {
  margin: 0.45rem 0 0; font-size: var(--t-petit); color: var(--encre-douce); line-height: 1.4;
}
/* LA CELLULE D'UN CHIFFRE — le couple « nombre + mot », enveloppé par le
   gabarit du socle depuis qu'un « 31 » s'est retrouvé en fin de ligne et
   son « bénévoles » seul à la ligne suivante. La grille place ce
   conteneur ; elle ne peut plus séparer ce qu'il contient.
   La règle est nommée, et pas seulement héritée d'un `> *` :
   tools/verifier-styles.php exige qu'une classe émise soit visée. */
.sec__chiffres .chiffre { min-width: 0; }


/* LES PIÈCES JOINTES — TROIS PLANCHES DE MÊME HAUTEUR, SOUS UN FILET.

   Ce thème traite déjà sa photo d'accueil comme une pièce versée au
   dossier ; les photos de la section font pareil. Trois planches
   alignées, de largeurs égales, sous le filet d'encre de deux pixels qui
   ouvre chaque partie du thème. Ni grande ni petite : trois documents de
   même statut.

   3/2, le cadrage documentaire — et celui des sources, donc rien n'est
   rogné. */
.sec__medias {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--encre);
}
.sec__medias li:first-child { grid-column: auto; }
.sec__medias img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rayon); }
@media (max-width: 639px) {
  .sec__medias { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- 11. Les champs d'action — LA FICHE DE DOSSIER ---------------
   NUMÉROTÉE, SOUS UN FILET D'ENCRE, CONSTAT À GAUCHE ET ACTION À DROITE.

   Les cinq thèmes posaient ici la même grille de cartes de 260 à 300 px.
   Celui-ci empile des fiches pleine largeur, chacune ouverte par son
   NUMÉRO — 01, 02, 03 — et par le filet de deux pixels qui ouvre déjà
   chaque partie du thème. Une organisation qui publie ses relevés
   présente ses champs d'action comme les pièces d'un dossier, pas comme
   un catalogue.

   LE NUMÉRO EST UN COMPTEUR CSS, donc il n'existe pas dans le contenu :
   personne n'a à le saisir, et retirer un champ d'action renumérote les
   suivants tout seul. Il est en `aria-hidden` par construction — un
   pseudo-élément n'est pas lu comme du texte de contenu par les lecteurs
   d'écran, et l'ordre est déjà porté par la liste.

   Voir themes/tribune/templates/sections/activites.php : deux
   conteneurs, sans quoi la colonne de droite imposerait sa hauteur aux
   rangées de gauche. */

.sec__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 52px);
  max-width: var(--large);
  margin: 0 auto;
  counter-reset: fiche;
}

.carte {
  background: transparent;
  border: 0; border-radius: 0;
  border-top: 2px solid var(--encre);
  padding-top: clamp(14px, 1.8vw, 22px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 2vw, 24px);
  counter-increment: fiche;
  scroll-margin-top: var(--ancre-air);
}

.carte__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rayon); }
.carte__corps { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }

/* LE NUMÉRO DE FICHE, devant le nom du champ d'action. */
.carte__nom {
  font-size: var(--t-h3); font-weight: 500; line-height: 1.2;
  display: flex; align-items: baseline; gap: 0.7em;
}
.carte__nom::before {
  content: counter(fiche, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-petit); font-weight: 500;
  color: var(--vert);
  letter-spacing: 0.08em;
  flex: none;
}
.carte__accroche { color: var(--vert); font-size: var(--t-petit); font-weight: 500; }
.carte__resume, .carte__texte { color: var(--encre-douce); font-size: var(--t-petit); max-width: var(--lecture); }
.carte__type, .carte__depuis, .carte__categorie { font-size: var(--t-petit); color: var(--encre-douce); }
.carte__intitule {
  font-size: var(--t-mention); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--vert); font-weight: 500; margin-top: 0.5rem;
  padding-left: 0.9em; position: relative;
}
.carte__intitule::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 0.45em; height: 2px; background: var(--vert);
}

/* LES FAITS EN TABLEAU À FILETS — la forme d'un relevé. */
.carte__faits { display: grid; font-size: var(--t-petit); }
.carte__faits li { padding: 0.4em 0; border-bottom: 1px solid var(--trait); }
.carte__faits li:first-child { border-top: 1px solid var(--trait); }

.carte__equipements {
  display: flex; flex-wrap: wrap; gap: 0.2em 1.1em;
  font-size: var(--t-petit); color: var(--encre-douce);
}
.carte__equipements li { position: relative; padding-left: 0.8em; }
.carte__equipements li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 4px; height: 4px; background: var(--trait-fort);
}

.carte__tarif { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.carte__prix { display: flex; flex-direction: column; gap: 0.1rem; }
.carte__montant {
  font-weight: 800; font-size: var(--t-nombre); line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  /* PAS DE `white-space: nowrap` ICI, ET C'EST UNE LEÇON DÉJÀ APPRISE.
     Ce champ ne porte pas toujours un montant : le modèle y accepte
     n'importe quelle phrase, et les jeux de données y écrivent « compris
     dans l'adhésion », « entrée libre », « un cinquième du prix
     courant ». Rendu insécable, « compris dans l'adhésion » mesurait
     729 px dans une colonne de 200 et sortait la page de 485 px — sur
     les cinq largeurs et les deux moteurs.
     C'est mot pour mot le défaut corrigé la nuit précédente sur
     `.appel__nombre`, pour la même raison. Ce qui protège « 110 € »
     d'une coupure n'est pas cette règle : c'est l'espace insécable que
     les fichiers de langue écrivent entre le nombre et le symbole. */
  overflow-wrap: anywhere;
}
.carte__mention { font-size: var(--t-petit); color: var(--encre-douce); }
/* Le bouton de la fiche, sous le montant. */
.carte__action { margin: 0; }


/* TROIS COLONNES FRANCHES. Elles tenaient `auto-fill, minmax(64px,
   1fr)` : huit pistes pour deux photos, donc deux vignettes de
   soixante-quatre pixels et six colonnes de vide. */
.carte__vues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 26rem; margin-top: 0.3rem; }
.carte__vues img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rayon); }
.carte__vues figcaption { font-size: var(--t-mention); color: var(--encre-douce); margin-top: 0.25em; }

@media (min-width: 820px) {
  .carte {
    grid-template-columns: 260px minmax(0, 1fr) clamp(140px, 15vw, 200px);
    column-gap: clamp(20px, 2.6vw, 40px);
    align-items: start;
  }
  .carte__photo { grid-column: 1; }
  .carte__corps { grid-column: 2; }
  .carte__tarif { grid-column: 3; }
  .carte:not(:has(.carte__photo)) .carte__corps { grid-column: 1 / 3; }
}

/* ---------- 12. À LA UNE ---------------------------------------------------
   LE BLOC LE PLUS IMPORTANT DU THÈME, et celui qui le rend transposable.

   C'est là qu'une organisation met sa campagne, son rapport, sa
   pétition, sa mobilisation ou son alerte du moment. Environnement,
   santé, droits, citoyenneté : toutes en ont un, et aucune ne le met
   ailleurs qu'en tête.

   UN APLAT ANTHRACITE, UN SEUL PAR PAGE. C'est la seule grande surface
   pleine du site avec le pied. Elle ne crie pas — elle est sombre, pas
   rouge — et c'est ce qui la rend crédible : une alerte en rouge vif
   ressemble à une bannière publicitaire. */

.appels { display: grid; gap: clamp(18px, 2.4vw, 32px); max-width: var(--large); margin: 0 auto; }
.appel {
  display: grid;
  border: 0; border-radius: var(--rayon);
  background: var(--fond-encre); color: var(--encre-clair); overflow: hidden;
}
.appel .lien { color: var(--encre-clair); }
@media (min-width: 760px) {
  .appel { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
  .appel__photo { grid-row: 1 / span 6; }
}
.appel__photo img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.appel__nom {
  padding: 1.2rem 1.5rem 0; font-size: var(--t-h2); font-weight: 500;
  line-height: 1.14; letter-spacing: -0.025em; max-width: 22ch;
}
/* L'ÉTIQUETTE DE CATÉGORIE EN BRIQUE CLAIRE : c'est le seul emploi de la
   seconde couleur du thème, et il est réservé à ce bloc. Éclaircie pour
   tenir 5,1:1 sur l'anthracite. */
.appel__accroche {
  padding: 1.4rem 1.5rem 0; color: #FF8E7E; font-weight: 500;
  font-size: var(--t-mention); letter-spacing: 0.14em; text-transform: uppercase;
}
.appel__mots { padding: 0.7rem 1.5rem 0; color: rgba(255, 255, 255, 0.78); max-width: 52ch; }
.appel__chiffre { padding: 1rem 1.5rem 0; display: flex; align-items: baseline; gap: 0.6rem; }
.appel__nombre {
  font-size: var(--t-nombre); font-weight: 800; line-height: 0.94; letter-spacing: -0.04em;
  color: var(--encre-clair); font-variant-numeric: tabular-nums;
}
.appel__mention { font-size: var(--t-petit); color: rgba(255, 255, 255, 0.72); }
.appel__validite {
  padding: 0.7rem 1.5rem 0; font-size: var(--t-mention);
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.66);
}
.appel__action { padding: 1.2rem 1.5rem 1.5rem; }
.appel .bouton, .appel .sec__bouton {
  border-color: var(--encre-clair); color: var(--encre-clair);
}
.appel .bouton:hover, .appel .sec__bouton:hover {
  background: var(--encre-clair); color: var(--encre);
}

/* ---------- 13. L'agenda ---------------------------------------------------
   Réunions publiques, chantiers, conférences, assemblées : une liste
   sur filets, la date à gauche en chiffres tabulaires. Sobre — ce n'est
   pas une programmation culturelle, c'est un calendrier de travail. */

.sec--evenements .sec__corps { max-width: var(--large); }
.agenda__liste { display: grid; gap: 0; border-top: 2px solid var(--encre); }
.evenement {
  display: grid; gap: 0.2rem 1.4rem;
  padding: 1rem 0;
  border: 0; border-bottom: var(--filet) solid var(--trait); border-radius: 0;
}
@media (min-width: 700px) {
  .evenement { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto; align-items: baseline; }
  /* Chaque morceau dit sa colonne : le lien arrive en dernier dans le
     balisage et prendrait sinon la case de la date. */
  .evenement__quand     { grid-column: 1; grid-row: 1; }
  .evenement__lieu      { grid-column: 1; grid-row: 2; }
  .evenement__nom       { grid-column: 2; grid-row: 1; }
  .evenement__texte     { grid-column: 2; }
  .evenement__categorie { grid-column: 3; grid-row: 1; text-align: right; }
  .evenement__action    { grid-column: 3; grid-row: 2; text-align: right; }
}
.evenement__quand { font-weight: 500; color: var(--vert); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.evenement__nom { font-size: var(--t-h3); font-weight: 500; }
.evenement__lieu, .evenement__categorie, .evenement__texte { font-size: var(--t-petit); color: var(--encre-douce); }
.agenda__liste--passe .evenement { opacity: 0.7; }
.agenda__vide { color: var(--encre-douce); padding: 1rem 0; }

/* ---------- 14. Les actualités --------------------------------------------
   UNE PRINCIPALE, PUIS DES SECONDAIRES. Une grille de trois cartes
   égales dit « nous publions trois fois par an » ; une actualité large
   suivie d'une liste dit « nous prenons position régulièrement, et voici
   la dernière ». La seconde est vraie d'une organisation de plaidoyer,
   la première ne l'est jamais. */

.actus { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: clamp(14px, 2vw, 24px); max-width: var(--large); margin: 0 auto; }
.actu { border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; display: flex; flex-direction: column; }
.actu__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.actu__date { padding: 0.9rem 1.1rem 0; font-size: var(--t-mention); letter-spacing: 0.08em; text-transform: uppercase; color: var(--vert); }
.actu__nom { padding: 0.2rem 1.1rem 0; font-size: var(--t-h3); font-weight: 500; }
.actu__mots { padding: 0.5rem 1.1rem 0; color: var(--encre-douce); }
.actu__action { padding: 0.9rem 1.1rem 1.1rem; margin-top: auto; }

/* ---------- 15. La galerie ------------------------------------------------ */

/* LA GALERIE A UN NOMBRE DE COLONNES CHOISI, PAS CALCULÉ.

   Elle tenait un `repeat(auto-fill, minmax(...))`, et c'était faux deux
   fois. `auto-fill` fabrique toutes les colonnes que la largeur permet
   PUIS y range ce qu'il y a : une série de trois photos dans une grille
   qui en tient sept sortait en trois vignettes minuscules serrées à
   gauche, avec quatre colonnes de vide à droite. Et comme le gabarit
   découpe la galerie en séries titrées dès qu'il y a des catégories, le
   cas n'était pas rare, c'était le cas COURANT.

   `auto-fit` réparait l'orphelin et en fabriquait un autre : les
   colonnes vides se replient, donc une série de deux photos les affiche
   à 586 px quand une série de quatre les affiche à 289. La taille d'une
   vignette dépendait du nombre de photos de sa catégorie, c'est-à-dire
   de rien.

   Un nombre FRANC de colonnes règle les deux : toutes les vignettes de
   la page ont la même taille, et une série courte laisse un vide en fin
   de ligne — ce qui se lit comme une ligne incomplète, pas comme une
   erreur. C'est aussi une décision de thème : chacun choisit sa trame et
   son cadrage, et c'est ce qui distingue une planche contact d'un mur
   d'affiches. */
/* Quatre colonnes en 3/2 : le cadrage documentaire, celui d'un rapport de
   terrain. Ni carré ni panoramique — le format d'une preuve. */
.galerie-mosaique {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px; max-width: var(--large); margin: 0 auto;
}
@media (min-width: 640px)  { .galerie-mosaique { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .galerie-mosaique { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Le rapport se pose sur la case, pas sur la photo : « aspect-ratio »
   sur un <img> qui porte ses attributs se fait doubler par le rapport
   intrinsèque du fichier dans WebKit. */
.galerie-mosaique > li { aspect-ratio: 3 / 2; }
.galerie-mosaique > li > figure,
.galerie-mosaique .sec__agrandir,
.galerie-mosaique picture { display: block; height: 100%; }
.galerie-mosaique img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rayon); }
.galerie-mosaique figcaption { display: none; }
.sec--gallery__couverture { margin-bottom: 12px; }
.sec--gallery__couverture img { width: 100%; aspect-ratio: 2.6 / 1; object-fit: cover; border-radius: var(--rayon); }

/* ---------- 16. Les services ---------------------------------------------- */

.sec__services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 0 clamp(20px, 3vw, 44px); max-width: var(--large); margin: 0 auto; }
/* LE PICTOGRAMME EST FACULTATIF, ET LA GRILLE DOIT LE SAVOIR.
   Le gabarit ne l'émet que si une icône est choisie ; sans lui, le nom
   tombe dans la PREMIÈRE colonne, qui est en « auto » — donc à la
   largeur de son contenu, donc sans rétrécissement possible. Une
   mission un peu longue débordait alors de sa carte, et la page avec.
   Chaque morceau déclare donc sa colonne, et la colonne de texte
   déclare qu'elle peut rétrécir. */
.sec__services > li {
  display: grid; grid-template-columns: 1.5em minmax(0, 1fr); gap: 0.25em 0.8em;
  padding: 1rem 0; border: 0; border-top: var(--filet) solid var(--trait); border-radius: 0;
}
.service__pictogramme { width: 1.5em; height: 1.5em; grid-column: 1; grid-row: 1 / span 2; color: var(--vert); }
.service__nom { grid-column: 2; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.service__detail { grid-column: 2; min-width: 0; font-size: var(--t-petit); color: var(--encre-douce); overflow-wrap: anywhere; }

/* ---------- 17. Les ateliers ---------------------------------------------- */

.ateliers { display: grid; gap: clamp(14px, 2vw, 24px); max-width: var(--large); margin: 0 auto; }
.atelier { display: grid; border: 0; border-top: 2px solid var(--encre); border-radius: 0; overflow: hidden; }
@media (min-width: 760px) {
  .atelier { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
  .atelier__photo { grid-row: 1 / span 8; }
}
.atelier__photo img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.atelier__nom { padding: 1rem 1.1rem 0; font-size: var(--t-h3); font-weight: 500; }
.atelier__pour, .atelier__categorie { padding: 0.2rem 1.1rem 0; color: var(--vert); font-weight: 500; font-size: var(--t-petit); }
.atelier__mots { padding: 0.6rem 1.1rem 0; color: var(--encre-douce); }
.atelier__intitule { padding: 0.8rem 1.1rem 0.2rem; font-size: var(--t-mention); letter-spacing: 0.09em; text-transform: uppercase; color: var(--encre-douce); font-weight: 500; }
.atelier__suite { padding: 0 1.1rem; display: grid; gap: 0.3em; font-size: var(--t-petit); color: var(--encre-douce); }
.atelier__suite li { position: relative; padding-left: 0.9em; }
.atelier__suite li::before { content: "·"; position: absolute; left: 0.1em; }
.atelier__prix { padding: 0.9rem 1.1rem 1.1rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.atelier__montant { font-size: var(--t-h3); font-weight: 800; color: var(--encre); font-variant-numeric: tabular-nums; }
.atelier__mention, .atelier__compte, .atelier__releve { font-size: var(--t-petit); color: var(--encre-douce); }
.atelier__compte { padding: 0 1.1rem 0.8rem; }
.atelier__releve { padding: 0 1.1rem 0.8rem; }
.atelier__groupe { padding: 0 1.1rem; }
.atelier__serie, .atelier__vues { padding: 0 1.1rem 0.9rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.atelier__vues img, .atelier__serie img { aspect-ratio: 1; object-fit: cover; border-radius: var(--rayon); }

/* ---------- 18. Les informations pratiques --------------------------------
   DÉPLIÉES PAR DÉFAUT ? NON — mais grandes, et avec une cible de 52 px.
   Ce sont les questions qu'on n'ose pas poser : « faut-il être adhérent »,
   « qu'est-ce que je dois apporter », « est-ce que c'est pour moi ». */

.sec__rubriques { max-width: var(--lecture); margin: 0 auto; border-top: 1px solid var(--trait); }
.rubrique { border-bottom: 1px solid var(--trait); }
.rubrique__ligne {
  display: flex; align-items: center; justify-content: space-between; gap: 1em;
  padding: 1.05em 0; min-height: 52px; cursor: pointer; list-style: none;
}
.rubrique__ligne::-webkit-details-marker { display: none; }
.rubrique__nom { font-weight: 500; font-size: var(--t-body); }
.rubrique__ligne::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background:
    linear-gradient(var(--vert), var(--vert)) center / 100% 2px no-repeat,
    linear-gradient(var(--vert), var(--vert)) center / 2px 100% no-repeat;
}
.rubrique[open] .rubrique__ligne::after {
  background: linear-gradient(var(--vert), var(--vert)) center / 100% 2px no-repeat;
}
.rubrique__detail { padding-bottom: 1.2em; color: var(--encre-douce); }

/* ---------- 19. Le mot de la présidence ----------------------------------- */

.sec--about .sec__corps { display: grid; gap: clamp(22px, 3vw, 44px); }
/* LE PORTRAIT EST UN RECTANGLE. Un rond adoucit ; une organisation qui
   publie des rapports n'a pas à s'adoucir. Le 4/5 est celui d'un
   portrait de presse. */
.sec--about__portrait { max-width: 240px; }
.sec--about__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rayon); }
.sec--about__portrait .sec__agrandir { border-radius: var(--rayon); overflow: hidden; }
.sec--about__signature { color: var(--vert); font-weight: 500; }
.sec--about__histoire { max-width: var(--lecture); color: var(--encre-douce); }
@media (min-width: 900px) {
  .sec--about .sec__corps { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(26px, 3.5vw, 52px); align-items: start; }
  .sec--about__portrait { grid-row: 1 / span 4; width: 200px; }
}

/* ---------- 20. Le bureau -------------------------------------------------- */

.bureau { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 45%), 1fr)); gap: clamp(18px, 2.4vw, 32px); max-width: var(--large); margin: 0 auto; }
.membre__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rayon); }
.membre__nom { font-weight: 500; margin-top: 0.6em; }
.membre__role { font-size: var(--t-petit); color: var(--vert); }
.membre__depuis { font-size: var(--t-mention); color: var(--encre-douce); }

/* ---------- 21. Les témoignages ------------------------------------------- */

.sec__temoignages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(14px, 2vw, 24px); max-width: var(--large); margin: 0 auto; }
.temoignage { padding: 1.1rem 0 0; border: 0; border-top: 2px solid var(--encre); border-radius: 0; background: transparent; }
.temoignage__texte p::before { content: "\00AB\00A0"; }
.temoignage__texte p::after { content: "\00A0\00BB"; }
.temoignage__auteur { margin-top: 0.8em; font-weight: 500; }
.temoignage__qualite, .temoignage__source, .temoignage__date { font-size: var(--t-petit); color: var(--encre-douce); }
.temoignage__photo img { width: 48px; height: 60px; object-fit: cover; border-radius: var(--rayon); margin-bottom: 0.6em; }

/* ---------- 22. Les ressources ---------------------------------------------
   RAPPORTS, ÉTUDES, GUIDES, NOTES DE POSITION. C'est la section qui rend
   ce thème utile à une association de santé — guides de prévention —
   comme à un mouvement citoyen — propositions —, et elle mérite mieux
   qu'une liste de liens : une TABLE, avec la nature du document à
   gauche, son titre au milieu, son poids et son format à droite.

   La section porte le gris de bande : c'est la seconde des deux, avec
   les chiffres, et ce gris-là dit « documentation ». */

.sec--documents { background: var(--fond-bande); }
.documents {
  max-width: var(--large); margin: 0 auto; display: grid; gap: 0;
  border-top: 2px solid var(--encre); border-bottom: var(--filet) solid var(--trait-fort);
}
.document {
  display: grid; gap: 0.2rem 1.4rem; padding: 1.05rem 0;
  border: 0; border-top: var(--filet) solid var(--trait); border-radius: 0;
}
.document:first-child { border-top: 0; }
@media (min-width: 700px) {
  .document { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; align-items: baseline; }
  .document__nature { grid-column: 1; grid-row: 1; }
  .document__nom    { grid-column: 2; grid-row: 1; }
  .document__faits  { grid-column: 3; grid-row: 1; text-align: right; }
  .document__texte  { grid-column: 2; grid-row: 2; }
}
.document__nom { font-weight: 500; font-size: var(--t-h3); letter-spacing: -0.015em; }
.document__nature {
  font-size: var(--t-mention); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--vert); font-weight: 500;
}
.document__faits { font-size: var(--t-petit); color: var(--encre-douce); font-variant-numeric: tabular-nums; }

/* ---------- 23. L'accès ----------------------------------------------------
   ENCADRÉ, ET EN GRAND. L'adresse et les horaires sont l'information la
   plus consultée de tout le site : ils sont posés dans un cadre vert
   pâle, en corps de lecture, avec des repères d'accès en dessous. */

.sec--access .sec__corps { display: grid; gap: 1.2em; max-width: var(--lecture); }
.sec--access__adresse {
  font-size: var(--t-lead); font-weight: 500;
  padding: 1rem 1.2rem; background: var(--fond-creux); border-radius: var(--rayon);
}
.sec--access__reperes { display: grid; gap: 0.9em; }
.sec--access__reperes dt { font-weight: 500; color: var(--vert); }
.sec--access__reperes dd { margin: 0.15em 0 0; color: var(--encre-douce); }
.sec--access__carte { margin-top: 0.4em; }

/* ---------- 24. Adhérer ----------------------------------------------------
   LE BARÈME EN CADRES, ET LE MONTANT LIBRE ASSUMÉ. Beaucoup
   d'associations d'aide ont une adhésion à montant libre : le cadre doit
   rester lisible même quand il n'y a pas de chiffre à montrer. */

.formules { max-width: var(--large); margin: 0 auto 2rem; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.formule { padding: 1.1rem 1.2rem; border: 1px solid var(--trait); border-radius: var(--rayon); }
.formule__nom { font-size: var(--t-h3); font-weight: 500; }
.formule__mention { color: var(--vert); font-weight: 500; margin-top: 0.15em; }
.formule__texte { color: var(--encre-douce); font-size: var(--t-petit); margin-top: 0.4em; }

.formulaire { max-width: 44rem; }
.champs { display: grid; gap: 1rem; }
@media (min-width: 700px) { .champs { grid-template-columns: 1fr 1fr; } }
.champ { display: grid; gap: 0.3em; grid-column: 1 / -1; }
.champ--moitie { grid-column: span 1; }
@media (max-width: 699px) { .champ--moitie { grid-column: 1 / -1; } }
.etiquette { font-weight: 500; }
.etiquette__note { font-weight: 400; color: var(--encre-douce); }

.controle {
  width: 100%; min-height: 50px; padding: 0.6em 0.8em;
  background: var(--fond); color: var(--encre);
  border: 1px solid var(--trait-champ); border-radius: var(--rayon);
  font-size: var(--t-body);
}
.controle--zone { min-height: auto; resize: vertical; }
.controle:focus-visible { outline: 2px solid var(--vert); outline-offset: 1px; border-color: var(--vert); }
.controle[aria-invalid="true"] { border-color: var(--alerte); border-width: 2px; }

.champ--case { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.7rem; }
.case { width: 26px; height: 26px; margin-top: 2px; accent-color: var(--vert); }
.case__etiquette { color: var(--encre-douce); }
.champ--case .erreur { grid-column: 2; }

.erreur { color: var(--alerte); font-size: var(--t-petit); }
.erreur--visible { min-height: 1.3em; }
.indication { font-size: var(--t-petit); color: var(--encre-douce); }
.indication--visible { display: block; }
.appat { position: absolute; left: -9999px; }
.envoi { margin-top: 1.3rem; }

.confirme { padding: 1.2rem 1.3rem; border: 1px solid var(--oui); border-radius: var(--rayon); background: var(--fond-creux); }
.confirme__titre { font-size: var(--t-h3); font-weight: 500; }
.confirme__actions { margin-top: 1em; display: flex; flex-wrap: wrap; gap: 0.8em; }

/* ---------- 25. Les bénévoles --------------------------------------------- */

.missions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 clamp(20px, 3vw, 44px); max-width: var(--large); margin: 1.5rem auto; }
.mission {
  display: grid; grid-template-columns: 1.5em minmax(0, 1fr); gap: 0.25em 0.8em;
  padding: 1rem 0; border: 0; border-top: var(--filet) solid var(--trait); border-radius: 0;
}
.mission__pictogramme { width: 1.5em; height: 1.5em; grid-column: 1; grid-row: 1 / span 2; color: var(--vert); }
.mission__nom { grid-column: 2; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.mission__detail { grid-column: 2; min-width: 0; font-size: var(--t-petit); color: var(--encre-douce); overflow-wrap: anywhere; }

/* ---------- 26. Les dons ---------------------------------------------------
   « 40 € financent une analyse d'eau » : même grammaire que les chiffres
   d'impact, et c'est voulu — ce sont deux façons de dire la même chose,
   ce que produit un euro. */

.dons__emplois {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 0; margin: 1.5rem 0;
  border-top: 2px solid var(--encre); border-bottom: var(--filet) solid var(--trait-fort);
}
.dons__emplois > * {
  padding: 1.4rem clamp(1rem, 2vw, 1.8rem);
  border: 0; border-left: var(--filet) solid var(--trait-fort); border-radius: 0;
}
.dons__emplois > *:first-child { border-left: 0; }
.dons__emplois dt {
  white-space: nowrap;
  font-size: var(--t-nombre); font-weight: 800; line-height: 0.94; letter-spacing: -0.04em;
  color: var(--encre); font-variant-numeric: tabular-nums;
}
.dons__emplois dd { margin: 0.45rem 0 0; font-size: var(--t-petit); color: var(--encre-douce); line-height: 1.45; }
/* LE COUPLE « montant + phrase », enveloppé par le gabarit du socle :
   la grille place ce conteneur, elle ne peut plus séparer ce qu'il
   contient. Règle nommée, et pas seulement héritée du `> *` :
   tools/verifier-styles.php exige qu'une classe émise soit visée. */
.dons__emplois .emploi { min-width: 0; }

/* ---------- 27. Le pied de page -------------------------------------------
   INSTITUTIONNEL ET COMPLET : coordonnées, réseaux, mentions,
   transparence, presse. Un aplat anthracite, parce qu'une organisation
   sérieuse ferme sa page, elle ne la laisse pas se dissoudre dans du
   gris. */

.pied {
  border-top: 0;
  background: var(--fond-encre); color: var(--encre-clair);
  padding: clamp(40px, 5vw, 72px) var(--gouttiere);
  font-size: var(--t-petit);
}
.pied a { color: var(--encre-clair); }
.pied__devise, .pied__adresse, .pied__contacts, .pied__mention { color: rgba(255, 255, 255, 0.72); }
.pied__grille { max-width: var(--large); margin: 0 auto; display: grid; gap: clamp(20px, 3vw, 38px); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.pied__nom { font-size: var(--t-h3); font-weight: 500; }
.pied__intitule {
  font-weight: 500; color: rgba(255, 255, 255, 0.6); margin-bottom: 0.7em;
  font-size: var(--t-mention); letter-spacing: 0.14em; text-transform: uppercase;
}
.pied__reseaux, .pied__legal { display: flex; flex-wrap: wrap; gap: 0.8em; }
.pied__signature {
  max-width: var(--large); margin: clamp(20px, 3vw, 34px) auto 0;
  padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: flex; flex-wrap: wrap; gap: 0.6em 1.2em;
  color: rgba(255, 255, 255, 0.66); font-size: var(--t-mention);
}
.pied__annee { white-space: nowrap; }

/* ---------- 28. Le sélecteur de langue ------------------------------------ */

.langues { margin-left: 0.6rem; }
.langues__liste { display: flex; gap: 0.4em; }
.langues__lien {
  text-decoration: none; font-size: var(--t-mention); text-transform: uppercase;
  padding: 0.35em 0.5em; border: 1px solid var(--trait); border-radius: var(--rayon);
}
.langues__lien[aria-current] { background: var(--vert); color: var(--encre-clair); border-color: var(--vert); }

/* ---------- 29. Les pages légales ------------------------------------------ */

.sec--legal .sec__corps { max-width: var(--lecture); }
.sec--legal__mentions h2 { font-size: var(--t-h3); margin-top: 1.6em; }
.sec--legal__retour { margin-top: 2em; }

/* ---------- 30. Apparition au défilement ----------------------------------- */

.reveal { opacity: 0; transition: opacity var(--apparition) var(--ease); }
.reveal--vu { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- 31. La visionneuse ---------------------------------------------
   ELLE N'EST PLUS HABILLÉE ICI, ET C'EST UNE CORRECTION.

   Son balisage est fabriqué par assets/js/commun.js, pas par un
   gabarit : sept parties, dont ce thème n'en habillait que trois. Le
   <dialog> restait rétracté au milieu de l'écran — l'agent utilisateur
   le pose en « width: fit-content » —, le bouton de fermeture n'avait
   pas de croix, et les deux chevrons s'empilaient sous l'image. Elle
   était inutilisable sur les trois thèmes à la fois, ce qui est le signe
   qu'une règle recopiée trois fois n'était à sa place nulle part.

   Elle vit maintenant dans assets/css/visionneuse.css, du socle, servie
   uniquement quand la page porte un lien agrandissable. Une photo
   agrandie se regarde sur du noir, quel que soit le site : cette
   feuille-là n'a aucune raison d'appartenir à un thème. */

/* ---------- 32. Le calendrier partagé -------------------------------------- */

.calendrier { max-width: var(--large); margin: 0 auto; }
.calendrier--agenda { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 0.9rem; }
.calendrier__etat { font-size: var(--t-petit); color: var(--encre-douce); }
.apercu-section { display: block; }
/* `.serie` NE REÇOIT AUCUNE RÈGLE, ET C'EST VOULU.

   C'est un repère de script — assets/js/commun.js s'en sert pour
   composer le groupe que la visionneuse feuillette — et il est TOUJOURS
   posé à côté d'une classe qui, elle, habille : `galerie-mosaique
   serie`, `carte serie`, `sec__grille serie`. verifier-styles.php garde
   les LISTES de classes et n'exige une règle que pour la liste ; aucune
   ne sort donc nue à cause de lui.

   Il a porté un moment `display: block`, et cette ligne a coûté cher :
   posée après `.galerie-mosaique { display: grid }`, à spécificité
   égale, elle gagnait — la mosaïque tombait en colonne unique sur les
   trois thèmes, à toutes les largeurs, et chaque photo occupait la
   pleine largeur du cadre. Une règle écrite pour satisfaire un contrôle
   qui ne la demandait pas. */

/* ---------- 33. Ce que riche() classe, et qu'on oublie ---------------------
   riche() pose SA classe sur chaque paragraphe qu'elle produit : chacune
   doit avoir sa règle, sinon la section sort avec des blocs nus.
   tools/verifier-styles.php les relève sur le rendu ET sur les gabarits. */

.sec__intro { max-width: var(--lecture); color: var(--encre-douce); margin-top: 0.5em; }
.sec__intro + .sec__intro { margin-top: 0.8em; }

/* .appel__texte TOMBE SUR L'ANTHRACITE, pas sur le blanc. Il était
   écrit ici comme ses voisins, avec l'encre douce du fond clair, et
   retombait à 2,7:1 : le paragraphe le plus long du bloc « à la une »
   était le moins lisible de la page. */
.appel__texte { padding: 0.7rem 1.5rem 0; color: rgba(255, 255, 255, 0.78); max-width: 52ch; }
.actu__texte { padding: 0.5rem 1.1rem 0; color: var(--encre-douce); }
.atelier__texte { padding: 0.5rem 1.1rem 0; color: var(--encre-douce); }
.document__texte { font-size: var(--t-petit); color: var(--encre-douce); }
.membre__texte { font-size: var(--t-petit); color: var(--encre-douce); margin-top: 0.3em; }
.dons__moyens { max-width: var(--lecture); margin-top: 1.2rem; }
.dons__fiscal {
  max-width: var(--lecture); margin-top: 1.2rem;
  padding: 0.9em 1.1em; background: var(--fond-creux); border-radius: var(--rayon);
  font-size: var(--t-petit); color: var(--encre-douce);
}
.sec--access__lieu { color: var(--encre-douce); }
.pied__mot { color: rgba(255, 255, 255, 0.72); }

/* UNE FICHE DE MEMBRE SANS PHOTO N'EST PAS UNE FICHE VIDE. Le bureau
   d'une association d'aide compte toujours quelqu'un qui ne veut pas de
   sa photo en ligne, et c'est son droit. On lui rend un cadre plutôt
   qu'un trou. */
.membre { display: block; }
.membre--sans-photo {
  padding: 0.9rem 1rem;
  border: 1px solid var(--trait); border-radius: var(--rayon);
}

/* LE PREMIER BOUTON DE L'ACCUEIL EST L'ACTION — voir la note du thème
   club. Ici c'est le vert plein : « faire un don » ou « nous
   rejoindre », selon ce que l'association met en premier. */
.sec--hero .sec__bouton:not(.sec__bouton--doux) {
  background: var(--vert); border-color: var(--vert); color: var(--encre-clair);
}
.sec--hero .sec__bouton:not(.sec__bouton--doux):hover {
  background: var(--vert-fonce); border-color: var(--vert-fonce); color: var(--encre-clair);
}