/* =====================================================================
   PLATEAU — la feuille.
   =====================================================================
   Les jetons sont dans themes/plateau/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 : une association qui programme se
   lit par ses DATES, et une date se range dans une colonne.
   ===================================================================== */

/* ---------- 1. Polices auto-hébergées ------------------------------------
   FRAUNCES TITRE, ARCHIVO PARLE. La serif porte le nom de la compagnie,
   les titres de section et les noms d'élément ; la grotesque porte les
   paragraphes, les dates, les étiquettes et l'interface.

   Fraunces est instanciée à opsz 144 — le dessin d'affiche de la
   famille — puis sous-ensemblée aux 223 signes du français, comme les
   autres fontes du socle. Elle est servie d'ici, jamais d'un CDN.

   CONSÉQUENCE TENUE PAR LE VERROU : tous les titres de section et tous
   les noms d'élément sont en Fraunces, sans exception.
   tools/verifier-typographie.mjs compare la famille des h2 et des h3
   d'une section à l'autre ; un titre resté en Archivo ferait tomber le
   contrôle, et c'est exactement le garde-fou qu'on veut. */

@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('../../../assets/fonts/archivo-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('../../../assets/fonts/archivo-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('../../../assets/fonts/fraunces-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('../../../assets/fonts/fraunces-600.woff2') format('woff2');
}

/* Replis métriques — le décalage de mise en page de ce socle est à zéro
   exact, et c'est ce bloc qui le tient. Archivo mesurée contre
   Helvetica : 0,9126. */
@font-face {
  font-family: 'Archivo repli';
  src: local('Helvetica Neue'), local('Helvetica'), local('Arial'), local('Liberation Sans');
  size-adjust: 91.26%; ascent-override: 101%; descent-override: 26%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Fraunces repli';
  src: local('Georgia'), local('Times New Roman'), local('Liberation Serif');
  size-adjust: 104%; ascent-override: 94%; descent-override: 24%; line-gap-override: 0%;
}

/* ---------- 2. Jetons ----------------------------------------------------
   Déclarés dans themes/plateau/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);
  line-height: 1.62;
  -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(--ambre); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--jaune); color: var(--nuit); }

.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--jaune); color: var(--nuit);
  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 --------------------------------------
   DEUX FONDS, ET PAS TROIS. Le noir de salle, et le blanc de page.

   Ce thème posait AUSSI un gris une section sur deux, par-dessus son
   noir. Il se donnait donc trois fonds là où sa direction en annonce
   deux, et le gris — qui ne veut rien dire, puisqu'il tombe sur le rang
   pair — affaiblissait le seul qui veut dire quelque chose. Sa propre
   note l'écrivait six lignes plus haut, à propos du noir : « il
   perdrait tout son effet s'il revenait une section sur deux ». C'était
   vrai du gris aussi.

   Il ne reste que le noir, à ses trois endroits nommés — l'en-tête,
   l'accueil, l'agenda —, et le pied. Entre eux, des pages claires
   séparées par le seul blanc. C'est la structure d'un livret de saison :
   une couverture, des pages, une quatrième. */

.sec {
  padding: var(--section-y) var(--gouttiere);
  --ancre-retrait: var(--section-y);
  scroll-margin-top: calc(0px - var(--ancre-retrait));
}
.sec--hero {
  padding: 0 0 var(--section-y);
  background: var(--nuit) !important;
  color: var(--clair);
  --ancre-retrait: 0px;
}

/* L'AGENDA EST SOMBRE, ET C'EST LE DEUXIÈME ENDROIT. Une programmation
   se lit comme un tableau de salle : fond noir, dates en jaune. C'est
   aussi ce qui la détache de tout le reste de la page — et c'est la
   section qu'on vient voir. */
/* Le second sélecteur qui doublait celui-ci ne servait qu'à repasser
   devant la bande alternée sur les rangs pairs. Elle n'existe plus. */
main > .sec--evenements {
  background: var(--nuit);
  color: var(--clair);
}

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

/* LE TITRE DE SECTION, ET SON FILET. Deux pixels verticaux à gauche,
   hauts comme le titre : c'est la marge d'un programme, et c'est le
   même geste que devant chaque date et chaque atelier. */
.sec__titre {
  font-family: var(--titre);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.14;
  /* UNE SERIF NE SE SERRE PAS COMME UNE GROTESQUE. Le -0,02 em qui
     tenait Archivo écrasait les empattements de Fraunces les uns sur
     les autres ; à cette taille elle se pose sans approche négative. */
  letter-spacing: 0;
  max-width: 24ch;
  text-wrap: balance;
  padding-left: 0.85em;
  border-left: var(--filet) solid var(--ambre);
}
.sec--evenements .sec__titre,
.sec--hero .sec__titre { border-left-color: var(--jaune); }

.sec__texte { max-width: var(--lecture); color: var(--encre-douce); }
.sec__texte + .sec__texte { margin-top: 0.85em; }
.sec__texte p + p, .corps p + p { margin-top: 0.85em; }
.sec--evenements .sec__texte { color: var(--clair-doux); }

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

.sec__intitule {
  font-weight: 500; font-size: var(--t-mention);
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--encre-douce);
  margin: 2.1em 0 0.8em;
}
.sec--evenements .sec__intitule { color: var(--clair-doux); }
.sec__intitule--passe { opacity: 0.7; }

.sec__categorie { font-weight: 400; font-size: var(--t-h3); margin: 1.7em 0 0.7em; }

.sec__avis {
  max-width: var(--lecture);
  padding: 0.85em 1em;
  border-left: var(--filet) solid var(--rouge);
  background: var(--fond-creux);
}

.secours { margin-top: 1.4em; color: var(--encre-douce); font-size: var(--t-petit); }
.lien { color: var(--ambre); text-underline-offset: 2px; }
.sec--evenements .lien, .sec--hero .lien { color: var(--jaune); }

.mention-donnees {
  margin-top: 0.9em; padding-left: 0.8em;
  border-left: 1px solid var(--trait-fort);
  font-size: var(--t-petit); color: var(--encre-douce);
}
.mention-donnees__texte + .mention-donnees__texte { margin-top: 0.4em; }

/* LES TITRES PRENNENT TOUS LA SERIF, ET C'EST CE QUE LE CONTRÔLE VÉRIFIE.
   `.carte__nom`, `.appel__nom`, `.evenement__nom`, `.actu__nom`,
   `.atelier__nom`, `.formule__nom` sont tous des h3 : la règle
   d'élément les prend tous d'un coup, et aucun n'a besoin d'être nommé
   une seconde fois plus bas. */
h1, h2, h3, h4 { font-family: var(--titre); font-weight: 400; line-height: 1.2; }
/* LES NOMS D'ÉLÉMENT SONT DÉCLARÉS EN 400, PAS EN 500. Fraunces n'est
   chargée qu'en 400 et 600 : un 500 tomberait sur le 400 par la règle
   d'appariement du navigateur, donc au même endroit — mais en le
   laissant écrit on ferait croire à une graisse intermédiaire qui
   n'existe pas dans ce thème. Ce qui est écrit est ce qui est servi. */
.ital { font-style: italic; }

.sec__points { display: grid; gap: 0.5em; max-width: var(--lecture); }
.sec__points li { position: relative; padding-left: 1em; }
.sec__points li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: var(--filet); height: 1em; background: var(--ambre);
}

/* ---------- 5. Boutons ---------------------------------------------------
   DEUX, ET ILS NE SE RESSEMBLENT PAS. Le plein — rouge de rideau — est
   l'adhésion. Le bordé est tout le reste. Sur le sombre, les deux
   inversent leur encre : c'est la seule adaptation, et elle est
   nécessaire. */

.bouton, .sec__bouton, .menu__action {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0.6em 1.3em;
  font-weight: 500; font-size: var(--t-petit);
  text-decoration: none; cursor: pointer;
  border: 1px solid currentColor; border-radius: 0;
  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(--fond); }

.sec--hero .bouton, .sec--hero .sec__bouton,
.sec--evenements .bouton, .sec--evenements .sec__bouton { color: var(--clair); }
.sec--hero .bouton:hover, .sec--hero .sec__bouton:hover,
.sec--evenements .bouton:hover, .sec--evenements .sec__bouton:hover {
  background: var(--clair); color: var(--nuit);
}

.menu__action, .bouton--action {
  background: var(--rouge); border-color: var(--rouge); color: var(--clair);
}
.menu__action:hover, .bouton--action:hover {
  background: var(--rouge-fonce); border-color: var(--rouge-fonce); color: var(--clair);
}
.sec--hero .menu__action { color: var(--clair); }

/* ---------- 6. Photos -----------------------------------------------------
   AUCUN EFFET DE COULEUR. Ces gabarits sont réglés pour de vraies
   photographies de répétition et de spectacle : une teinte ajoutée par
   le thème rendrait méconnaissable une lumière de scène, qui est
   précisément ce qu'il y a à montrer. */

.sec__agrandir { display: block; }
.sec__agrandir img { transition: opacity var(--survol) var(--ease); }
.sec__agrandir:hover img { opacity: 0.88; }
figure { margin: 0; }
figcaption { margin-top: 0.4em; font-size: var(--t-mention); color: var(--encre-douce); }
.sec--evenements figcaption, .sec--hero figcaption { color: var(--clair-doux); }

/* ---------- 7. En-tête ----------------------------------------------------
   SOMBRE, ET C'EST LE PREMIER DES TROIS ENDROITS. Une salle avant le
   lever de rideau : le nom en serif claire, le menu en petites
   capitales, un filet jaune en bas. */

.entete {
  position: sticky; top: 0; z-index: 100;
  background: var(--nuit); color: var(--clair);
  border-bottom: 1px solid var(--trait-nuit);
}
/* LA BARRE NE PASSE PAS À LA LIGNE, ET C'EST LE CONTRAT D'ANCRE QUI
   L'EXIGE.

   Elle a enroulé un temps : neuf entrées en petites capitales espacées
   débordaient d'un écran de 1120 px, bouton compris, et le bouton
   sortait du cadre coupé en deux. L'enroulement réglait ce symptôme et
   en créait un bien pire, invisible à l'œil : `--ancre-haut` est calculé
   depuis `--h-entete`, or une barre qui s'enroule mesure 97 px là où
   elle en déclare 80 — et 130 px à 900 px de large, sur trois lignes.
   Chaque ancre de la page déposait donc son titre SOUS l'en-tête collée.
   1128 mesures en défaut, sur toutes les largeurs de bureau.

   Une hauteur qui dépend du nombre d'entrées du menu ne peut pas être
   déclarée dans une feuille de style. La barre tient donc une ligne, et
   le menu se serre pour y tenir : corps réduit d'un cran, interlettrage
   ramené de 0,05 à 0,02 em, gouttières resserrées. La mesure est refaite
   à 900, 1024, 1280 et 1920 px — voir tools/verifier-ancres.mjs, qui
   compare la réserve DÉCLARÉE au châssis MESURÉ et n'accepte aucun
   écart. */
.entete__barre {
  min-height: var(--h-entete);
  max-width: var(--large); margin: 0 auto;
  padding: 0.5rem 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.55rem;
  text-decoration: none; color: var(--clair);
  /* LA SEULE SERIF DE TOUT LE THÈME. */
  font-family: var(--enseigne); font-weight: 600;
  font-size: 1.28rem; letter-spacing: -0.01em; line-height: 1.1;
}
.entete__embleme { width: 26px; height: 26px; flex: none; color: var(--jaune); }

.menu {
  margin-left: auto; min-width: 0;
  display: flex; align-items: center; flex-wrap: nowrap; justify-content: flex-end;
  gap: clamp(0.5rem, 1vw, 0.9rem);
}
.menu__liste {
  min-width: 0;
  display: flex; align-items: center; flex-wrap: nowrap; justify-content: flex-end;
  gap: clamp(0.45rem, 0.9vw, 0.85rem);
}
.menu__liste a {
  text-decoration: none; color: var(--clair);
  /* 0,02 em au lieu de 0,05 : les petites capitales gardent leur air de
     programme, et dix entrées tiennent la ligne. */
  font-size: 0.75rem; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 0.4em 0; border-bottom: 1px solid transparent; white-space: nowrap;
}
.menu__liste a:hover, .menu__liste a[aria-current] { border-bottom-color: var(--jaune); }

/* 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.94em; }

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

@media (max-width: 899px) {
  .entete__bascule {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: auto;
    background: none; border: 1px solid var(--trait-nuit); 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: 18px; height: 2px; background: var(--clair); position: relative; }
  .entete__bascule span:first-child::before, .entete__bascule span:first-child::after {
    content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--clair);
    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(--nuit);
    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.9em 0; border-bottom: 1px solid var(--trait-nuit);
    font-size: var(--t-petit); letter-spacing: 0.08em;
  }
  .menu__action { margin-top: 1.1rem; }
}

/* ---------- 8. Le bandeau d'information -----------------------------------
   Jaune sur nuit : c'est l'annonce de la billetterie, et c'est la seule
   chose au-dessus de l'en-tête. */

.info {
  background: var(--jaune); color: var(--nuit);
  padding: 0.55em var(--gouttiere);
  font-size: var(--t-petit); text-align: center; font-weight: 500;
}
.info__mot { display: inline; }
.info__lien { color: var(--nuit); text-underline-offset: 3px; margin-left: 0.5em; }

/* ---------- 9. L'accueil --------------------------------------------------
   L'AFFICHE ET LE NOM, CÔTE À CÔTE, DANS LE NOIR DE LA SALLE.

   Les quatre autres thèmes empilent : une photo en bandeau, puis un nom
   dessous — ou l'inverse. Celui-ci met les deux SUR LA MÊME LIGNE, parce
   que c'est ce que fait une affiche de saison : l'image à gauche, le
   titre et les dates à droite, et rien d'autre sur la page.

   LA PHOTO EST EN 3/4, PAS EN 21/9. C'est le format de l'affiche, et
   c'est le format que ce thème emploie partout ailleurs — la galerie,
   les spectacles. Un bandeau panoramique ici contredirait sa propre
   règle de cadrage à l'endroit le plus visible du site.

   EN DESSOUS DE 900 px, ON EMPILE, et la photo passe en 3/2 : une
   affiche en 3/4 sur un téléphone occupe un écran et demi avant qu'on
   ait lu le nom de la compagnie. */

.sec--hero__media { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; }
.sec--hero__media img { width: 100%; height: 100%; object-fit: cover; }

.sec--hero__texte {
  max-width: var(--large);
  margin: 0 auto;
  padding: clamp(36px, 6vw, 72px) var(--gouttiere) clamp(40px, 6vw, 80px);
}
.sec--hero--sobre .sec--hero__texte { padding-top: clamp(56px, 10vw, 132px); }

.sec--hero__surtitre {
  font-weight: 500; font-size: var(--t-mention);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--jaune);
  margin-bottom: 0.9em;
}
/* LE NOM DE LA COMPAGNIE, en Fraunces 600 — la graisse d'enseigne, la
   seule du thème qui monte au-dessus de 400. */
.sec--hero__titre {
  font-family: var(--enseigne); font-weight: 600;
  font-size: var(--t-display);
  line-height: 1.0; letter-spacing: -0.015em;
  max-width: 14ch; text-wrap: balance;
  color: var(--clair);
}
.sec--hero__soustitre {
  margin-top: 0.55em; font-size: var(--t-lead);
  color: var(--clair-doux); max-width: 34ch;
}
.sec--hero__intro { margin-top: 1em; max-width: 34ch; color: var(--clair-doux); }
.sec--hero__intro + .sec--hero__intro { margin-top: 0.8em; }
.sec--hero__actions { margin-top: 1.7em; display: flex; flex-wrap: wrap; gap: 0.7em; }

@media (min-width: 900px) {
  /* L'AFFICHE EST UNE BANDE, COLLÉE HAUT ET BAS.

     Elle a d'abord été posée comme une image parmi le texte, centrée dans
     sa colonne avec du noir au-dessus et en dessous : elle flottait, et
     le bloc d'accueil ressemblait à deux éléments posés côte à côte
     plutôt qu'à une affiche. Elle occupe maintenant TOUTE la hauteur du
     noir, du bord supérieur au bord inférieur, exactement comme le visuel
     du bloc « À l'affiche ». C'est le même geste, répété : dans ce thème,
     une image de programmation touche les bords de son fond.

     CONSÉQUENCE SUR LES MARGES : le padding vertical quitte la section
     pour aller sur le seul bloc de texte. S'il restait sur la section, il
     décollerait l'affiche du haut et du bas, ce qu'on cherche justement à
     supprimer. */
  .sec--hero {
    display: grid;
    grid-template-columns: minmax(0, 0.66fr) minmax(0, 1fr);
    align-items: stretch;
    column-gap: clamp(28px, 4vw, 64px);
    max-width: calc(var(--large) + 2 * var(--gouttiere));
    margin: 0 auto;
    padding: 0 var(--gouttiere) 0 0;
  }
  .sec--hero__media {
    aspect-ratio: auto;
    height: 100%;
    min-height: clamp(300px, 44vh, 480px);
  }
  /* LA HAUTEUR DOIT TRAVERSER TOUTE LA CHAÎNE. `pic_agrandissable()`
     emboîte figure > a > picture > img : `height: 100%` sur la seule
     image ne remonte pas, et l'affiche retombe sur son rapport naturel en
     laissant du noir sous elle. */
  .sec--hero__media .sec__agrandir,
  .sec--hero__media picture { display: block; height: 100%; }
  .sec--hero__media img { width: 100%; height: 100%; object-fit: cover; }

  .sec--hero__texte {
    max-width: none;
    margin: 0;
    padding: clamp(32px, 4vw, 56px) 0;
    align-self: center;
  }
  .sec--hero--sobre .sec--hero__texte { padding-top: clamp(32px, 4vw, 56px); }

  /* SANS PHOTO, LA GRILLE N'A PLUS DE RAISON D'ÊTRE. */
  .sec--hero--sobre {
    display: block;
    padding: 0;
  }
  .sec--hero--sobre .sec--hero__texte {
    max-width: var(--large); margin: 0 auto;
    padding: clamp(56px, 10vw, 132px) var(--gouttiere);
  }
}

/* ---------- 10. La compagnie (section « association ») -------------------- */

.sec--association .sec__corps { display: grid; gap: clamp(22px, 3vw, 44px); }

.sec__chiffres { display: grid; gap: 1.2rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(160px, 45%), 1fr)); }
.sec__chiffres > * { padding-left: 0.8em; border-left: var(--filet) solid var(--ambre); }
.sec__chiffres dt, .sec__chiffres .valeur {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem); font-weight: 500;
  line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.sec__chiffres dd, .sec__chiffres .mot {
  margin: 0.35rem 0 0; font-size: var(--t-petit); color: var(--encre-douce);
}
/* 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; }


/* LE MUR D'AFFICHES — TROIS, DE MÊME TAILLE, EN LIGNE.

   Les quatre autres thèmes hiérarchisent : une grande, deux petites.
   Celui-ci ne hiérarchise pas, et c'est son parti pris — trois affiches
   punaisées côte à côte au format 3/4, celui que le thème emploie
   partout ailleurs. Une compagnie montre sa saison, pas une photo
   principale et deux illustrations.

   La première ne prend donc PAS toute la largeur ici : la règle est
   annulée, elle est commune aux quatre autres. */
.sec__medias {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 16px);
}
.sec__medias li:first-child { grid-column: auto; }
.sec__medias img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 519px) {
  /* Trois affiches sur 375 px feraient 110 px de large : on empile. */
  .sec__medias { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sec__medias img { aspect-ratio: 4 / 3; }
}
/* ---------- 11. Les créations — L'ENTRÉE DE PROGRAMME -------------------
   L'AFFICHE À GAUCHE, CE QU'ON LIT À DROITE, UNE CRÉATION PAR LIGNE.

   Les cinq thèmes posaient ici `repeat(auto-fit, minmax(min(260px,
   100%), 1fr))` et des cartes en pile — le même dessin cinq fois, à la
   valeur du minimum près. Celui-ci empile désormais des ENTRÉES pleine
   largeur, l'affiche en 3/4 à gauche : c'est la page d'un livret de
   saison, où chaque spectacle a sa demi-page et son visuel.

   Le format 3/4 n'est pas un choix isolé : c'est celui de la galerie et
   des photos de ce thème. Une affiche recadrée en paysage ici
   contredirait sa propre règle à l'endroit le plus regardé.

   Voir themes/plateau/templates/sections/activites.php : deux
   conteneurs, sans quoi la hauteur de l'affiche se répartirait sur les
   rangées du texte. */

.sec__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 64px);
  max-width: var(--large);
  margin: 0 auto;
}

.carte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 2vw, 22px);
  padding-left: 0.9rem;
  border-left: var(--filet) solid var(--trait-fort);
  scroll-margin-top: var(--ancre-air);
}
.carte__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.carte__corps { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }

.carte__nom { font-size: var(--t-h3); line-height: 1.2; }
.carte__accroche { color: var(--ambre); font-size: var(--t-petit); font-weight: 500; }
.carte__resume, .carte__texte { color: var(--encre-douce); font-size: var(--t-petit); }
.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.13em; text-transform: uppercase;
  color: var(--encre-douce); font-weight: 500; margin-top: 0.4rem;
}

/* Les faits, chacun derrière son filet — le geste du thème, répété. */
.carte__faits { display: flex; flex-wrap: wrap; gap: 0.3em 1.1em; font-size: var(--t-petit); }
.carte__faits li { padding-left: 0.6em; border-left: var(--filet) solid var(--ambre); }

.carte__equipements {
  display: flex; flex-wrap: wrap; gap: 0.2em 1em;
  font-size: var(--t-petit); color: var(--encre-douce);
}
.carte__equipements li { padding-left: 0.6em; border-left: 1px solid 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-size: var(--t-h3); 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 l'entrée, sous ce que couvre l'adhésion. */
.carte__action { margin: 0; }


/* LES AUTRES VUES — TROIS COLONNES FRANCHES. Elles tenaient
   `auto-fill, minmax(60px, 1fr)` : huit pistes pour deux photos, donc
   deux vignettes de soixante pixels et six colonnes de vide. Même
   défaut que celui corrigé dans la galerie, et il vivait dans les cinq
   thèmes. */
.carte__vues {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  max-width: 24rem; margin-top: 0.35rem;
}
.carte__vues img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.carte__vues figcaption { font-size: var(--t-mention); color: var(--encre-douce); margin-top: 0.25em; }

@media (min-width: 860px) {
  .carte {
    grid-template-columns: 300px minmax(0, 1fr) clamp(140px, 15vw, 190px);
    column-gap: clamp(24px, 3vw, 48px);
    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. Les appels du moment -------------------------------------- */

.appels { display: grid; gap: clamp(18px, 2.5vw, 32px); max-width: var(--large); margin: 0 auto; }
.appel {
  display: grid; gap: 0.3rem;
  padding-left: 0.9rem; border-left: var(--filet) solid var(--rouge);
}
@media (min-width: 760px) {
  .appel { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); column-gap: 1.4rem; }
  .appel__photo { grid-row: 1 / span 6; }
}
.appel__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.appel__nom { font-size: var(--t-h3); font-weight: 400; }
.appel__accroche { color: var(--ambre); font-size: var(--t-petit); }
.appel__mots { color: var(--encre-douce); }
.appel__chiffre { display: flex; align-items: baseline; gap: 0.5rem; }
.appel__nombre { font-size: var(--t-h3); font-weight: 400; font-variant-numeric: tabular-nums; }
.appel__mention, .appel__validite { font-size: var(--t-petit); color: var(--encre-douce); }
.appel__validite { letter-spacing: 0.07em; text-transform: uppercase; font-size: var(--t-mention); }
.appel__action { margin-top: 0.4rem; }

/* ---------- 13. L'AGENDA — le cœur de ce thème ----------------------------
   SUR FOND DE NUIT, ET EN COLONNES. La date à gauche, en jaune, dans une
   colonne fixe ; le titre et le lieu à droite. C'est la mise en page d'un
   programme de saison, et c'est ce qui fait qu'on parcourt vingt dates
   sans lire une phrase. */

.sec--evenements .sec__corps { max-width: var(--large); }
.agenda__liste { border-top: 1px solid var(--trait-nuit); }
.evenement {
  display: grid; gap: 0.15rem 1.4rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--trait-nuit);
}
@media (min-width: 700px) {
  .evenement {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto;
    align-items: baseline;
  }
  /* CHAQUE MORCEAU DIT SA COLONNE, ET C'EST OBLIGÉ. Le lien d'un
     événement arrive EN DERNIER dans le balisage ; placé par la seule
     ligne — « grid-row: 1 » — il prenait la première case libre, donc
     la colonne de gauche, et la date de l'événement se retrouvait
     poussée au milieu. Une grille ne devine pas ce qu'on voulait dire.

     La date à gauche, le titre au centre, la catégorie et le lien à
     droite : c'est la mise en page d'un programme, et elle ne dépend
     plus de l'ordre du balisage. */
  .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 {
  color: var(--jaune);
  font-size: var(--t-date); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.evenement__nom { font-size: var(--t-h3); font-weight: 400; color: var(--clair); }
.evenement__lieu, .evenement__categorie { font-size: var(--t-petit); color: var(--clair-doux); }
.agenda__liste--passe .evenement { opacity: 0.55; }
.evenement__texte { font-size: var(--t-petit); }
.agenda__vide { color: var(--clair-doux); padding: 1rem 0; }

/* ---------- 14. Les actualités -------------------------------------------- */

.actus { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: clamp(18px, 2.5vw, 32px); max-width: var(--large); margin: 0 auto; }
.actu { display: flex; flex-direction: column; gap: 0.3rem; padding-left: 0.9rem; border-left: var(--filet) solid var(--trait-fort); }
.actu__photo { margin: 0 0 0.5rem -0.9rem; }
.actu__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.actu__date { font-size: var(--t-mention); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ambre); }
.actu__nom { font-size: var(--t-h3); font-weight: 400; }
.actu__mots { color: var(--encre-douce); }
.actu__action { margin-top: auto; padding-top: 0.6rem; }

/* ---------- 15. La galerie ------------------------------------------------
   EN 3/4, comme les affiches : une photo de spectacle est verticale, et
   la recadrer en paysage coupe les comédiens aux genoux. */

/* 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/4 — le format de l'affiche, comme partout dans ce
   thème. Un mur d'affiches de saison, pas une galerie de photos. */
.galerie-mosaique {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; 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 / 4; }
.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; }
.galerie-mosaique figcaption { display: none; }
.sec--gallery__couverture { margin-bottom: 12px; }
.sec--gallery__couverture img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

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

.sec__services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: clamp(14px, 2vw, 26px); 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.4em minmax(0, 1fr); gap: 0.2em 0.7em; padding-left: 0.9rem; border-left: var(--filet) solid var(--trait-fort); }
.service__pictogramme { width: 1.4em; height: 1.4em; grid-column: 1; grid-row: 1 / span 2; color: var(--ambre); }
.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(20px, 3vw, 40px); max-width: var(--large); margin: 0 auto; }
.atelier { display: grid; gap: 0.3rem; padding-left: 0.9rem; border-left: var(--filet) solid var(--ambre); }
@media (min-width: 760px) {
  .atelier { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); column-gap: 1.4rem; }
  .atelier__photo { grid-row: 1 / span 8; }
}
.atelier__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.atelier__nom { font-size: var(--t-h3); font-weight: 400; }
.atelier__pour, .atelier__categorie { font-size: var(--t-petit); color: var(--ambre); }
.atelier__mots { color: var(--encre-douce); }
.atelier__intitule { margin-top: 0.5rem; font-size: var(--t-mention); letter-spacing: 0.11em; text-transform: uppercase; color: var(--encre-douce); font-weight: 500; }
.atelier__suite { display: grid; gap: 0.2em; font-size: var(--t-petit); color: var(--encre-douce); }
.atelier__suite li { position: relative; padding-left: 0.85em; }
.atelier__suite li::before { content: "·"; position: absolute; left: 0.1em; }
.atelier__prix { margin-top: 0.4rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.atelier__montant { font-size: var(--t-h3); font-weight: 400; font-variant-numeric: tabular-nums; }
.atelier__mention, .atelier__compte, .atelier__releve { font-size: var(--t-petit); color: var(--encre-douce); }
.atelier__groupe { margin-top: 0.3rem; }
.atelier__serie, .atelier__vues { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 6px; margin-top: 0.4rem; }
.atelier__vues img, .atelier__serie img { aspect-ratio: 3 / 4; object-fit: cover; }

/* ---------- 18. Les informations pratiques -------------------------------- */

.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: 0.95em 0; min-height: 44px; cursor: pointer; list-style: none;
}
.rubrique__ligne::-webkit-details-marker { display: none; }
.rubrique__nom { font-weight: 500; }
.rubrique__ligne::after {
  content: ""; flex: none; width: 12px; height: 12px;
  background:
    linear-gradient(var(--ambre), var(--ambre)) center / 100% 2px no-repeat,
    linear-gradient(var(--ambre), var(--ambre)) center / 2px 100% no-repeat;
}
.rubrique[open] .rubrique__ligne::after {
  background: linear-gradient(var(--ambre), var(--ambre)) center / 100% 2px no-repeat;
}
.rubrique__detail { padding-bottom: 1.1em; color: var(--encre-douce); }

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

.sec--about .sec__corps { display: grid; gap: clamp(22px, 3vw, 44px); }
.sec--about__portrait { max-width: 240px; }
.sec--about__portrait img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.sec--about__signature { color: var(--ambre); font-weight: 500; font-size: var(--t-petit); }
.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(150px, 45%), 1fr)); gap: clamp(16px, 2.2vw, 28px); max-width: var(--large); margin: 0 auto; }
.membre__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.membre__nom { font-weight: 500; margin-top: 0.5em; }
.membre__role { font-size: var(--t-mention); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ambre); }
.membre__depuis { font-size: var(--t-petit); color: var(--encre-douce); }

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

.sec__temoignages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: clamp(18px, 2.5vw, 32px); max-width: var(--large); margin: 0 auto; }
.temoignage { padding-left: 0.9rem; border-left: var(--filet) solid var(--ambre); }
.temoignage__texte p::before { content: "\00AB\00A0"; }
.temoignage__texte p::after { content: "\00A0\00BB"; }
.temoignage__auteur { margin-top: 0.7em; font-weight: 500; font-size: var(--t-petit); }
.temoignage__qualite, .temoignage__source, .temoignage__date { font-size: var(--t-mention); color: var(--encre-douce); }
.temoignage__photo img { width: 44px; height: 44px; object-fit: cover; margin-bottom: 0.5em; }

/* ---------- 22. Les documents --------------------------------------------- */

.documents { max-width: var(--large); margin: 0 auto; border-top: 1px solid var(--trait); }
.document { display: grid; gap: 0.15rem 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--trait); }
@media (min-width: 700px) { .document { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; } }
.document__nom { font-weight: 500; }
.document__nature, .document__faits { font-size: var(--t-petit); color: var(--encre-douce); }

/* ---------- 23. L'accès ---------------------------------------------------- */

.sec--access .sec__corps { display: grid; gap: 1.1em; max-width: var(--lecture); }
.sec--access__adresse { font-weight: 500; font-size: var(--t-lead); }
.sec--access__reperes { display: grid; gap: 0.85em; }
.sec--access__reperes dt { font-size: var(--t-mention); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ambre); font-weight: 500; }
.sec--access__reperes dd { margin: 0.15em 0 0; color: var(--encre-douce); }
.sec--access__carte { margin-top: 0.6em; }

/* ---------- 24. Adhérer ---------------------------------------------------- */

.formules { max-width: var(--large); margin: 0 auto 2rem; display: grid; gap: clamp(16px, 2.2vw, 28px); grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.formule { padding-left: 0.9rem; border-left: var(--filet) solid var(--rouge); }
.formule__nom { font-size: var(--t-h3); font-weight: 400; }
.formule__mention { font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 0.15em; }
.formule__texte { color: var(--encre-douce); font-size: var(--t-petit); margin-top: 0.35em; }

.formulaire { max-width: 44rem; }
.champs { display: grid; gap: 0.95rem; }
@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; font-size: var(--t-petit); }
.etiquette__note { font-weight: 400; color: var(--encre-douce); }

.controle {
  width: 100%; min-height: 46px; padding: 0.55em 0.7em;
  background: var(--fond); color: var(--encre);
  border: 1px solid var(--trait-champ); border-radius: 0;
  font-size: var(--t-body);
}
.controle--zone { min-height: auto; resize: vertical; }
.controle:focus-visible { outline: 3px solid var(--ambre); outline-offset: 0; border-color: var(--ambre); }
.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.6rem; }
.case { width: 24px; height: 24px; margin-top: 1px; accent-color: var(--rouge); }
.case__etiquette { font-size: var(--t-petit); 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.2rem; }

.confirme { padding-left: 0.9rem; border-left: var(--filet) solid var(--oui); }
.confirme__titre { font-weight: 400; font-size: var(--t-h3); }
.confirme__actions { margin-top: 0.9em; display: flex; flex-wrap: wrap; gap: 0.7em; }

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

.missions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: clamp(14px, 2vw, 26px); max-width: var(--large); margin: 1.4rem auto; }
.mission { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); gap: 0.2em 0.7em; padding-left: 0.9rem; border-left: var(--filet) solid var(--trait-fort); }
.mission__pictogramme { width: 1.4em; height: 1.4em; grid-column: 1; grid-row: 1 / span 2; color: var(--ambre); }
.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 --------------------------------------------------- */

.dons__emplois { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 45%), 1fr)); gap: clamp(14px, 2vw, 26px); margin: 1.4rem 0; }
.dons__emplois > * { padding-left: 0.8em; border-left: var(--filet) solid var(--rouge); }
.dons__emplois dt { font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.dons__emplois dd { margin: 0.35rem 0 0; font-size: var(--t-petit); color: var(--encre-douce); }
/* 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 -------------------------------------------
   SOMBRE, ET C'EST LE TROISIÈME ET DERNIER ENDROIT. La page s'ouvre sur
   une salle et se referme sur une salle. */

.pied {
  background: var(--nuit); color: var(--clair);
  padding: clamp(30px, 4vw, 52px) var(--gouttiere);
  font-size: var(--t-petit);
}
.pied__grille { max-width: var(--large); margin: 0 auto; display: grid; gap: clamp(18px, 3vw, 36px); grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.pied__nom { font-family: var(--enseigne); font-weight: 600; font-size: var(--t-h3); }
.pied__devise, .pied__adresse, .pied__contacts, .pied__mention { color: var(--clair-doux); }
.pied__intitule { font-size: var(--t-mention); letter-spacing: 0.12em; text-transform: uppercase; color: var(--jaune); font-weight: 500; margin-bottom: 0.4em; }
.pied a { color: var(--clair); }
.pied__reseaux, .pied__legal { display: flex; flex-wrap: wrap; gap: 0.8em; }
.pied__signature {
  max-width: var(--large); margin: clamp(18px, 3vw, 32px) auto 0;
  padding-top: 1rem; border-top: 1px solid var(--trait-nuit);
  display: flex; flex-wrap: wrap; gap: 0.6em 1.2em;
  color: var(--clair-doux); 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.45em; }
.langues__lien {
  text-decoration: none; color: var(--clair);
  font-size: var(--t-mention); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.3em 0.4em; border: 1px solid var(--trait-nuit);
}
.langues__lien[aria-current] { background: var(--jaune); color: var(--nuit); border-color: var(--jaune); }

/* ---------- 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.5em; }
.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-nuit); padding: 0.8rem; }
.calendrier__etat { font-size: var(--t-petit); color: var(--clair-doux); }
.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.7em; }
.sec--evenements .sec__intro, .sec--hero .sec__intro { color: var(--clair-doux); }

.appel__texte { color: var(--encre-douce); }
.actu__texte { color: var(--encre-douce); }
.atelier__texte { 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: 1rem; }
.dons__fiscal {
  max-width: var(--lecture); margin-top: 1rem;
  padding-left: 0.8em; border-left: 1px solid var(--trait-fort);
  font-size: var(--t-petit); color: var(--encre-douce);
}
.sec--access__lieu { color: var(--encre-douce); }
.pied__mot { color: var(--clair-doux); }

/* Une fiche de membre sans photo garde sa place : un filet à gauche,
   comme tout ce que ce thème range. */
.membre { display: block; }
.membre--sans-photo { padding-left: 0.9rem; border-left: var(--filet) solid var(--trait-fort); }

/* LE PREMIER BOUTON DE L'ACCUEIL EST L'ACTION — voir la note du thème
   club : le gabarit distingue les deux, et un thème qui les rend
   identiques perd la hiérarchie que le socle lui donnait. */
.sec--hero .sec__bouton:not(.sec__bouton--doux) {
  background: var(--rouge); border-color: var(--rouge); color: var(--clair);
}
.sec--hero .sec__bouton:not(.sec__bouton--doux):hover {
  background: var(--rouge-fonce); border-color: var(--rouge-fonce); color: var(--clair);
}