/* Composants (spec §5). Listes à filets, pas d'encadrés. Tout libellé de
   conteneur flex est un .label rétrécissable : un contenu nouveau, même très
   long, passe à la ligne au lieu de déborder (spec §2bis.6). */

/* Mise en page générale (enveloppe desktop, proposition du 23/10).
   L'enveloppe --measure-shell (72rem) porte l'en-tête, la navigation, les
   listes et les tableaux ; elle est en rem, donc s'élargit avec le texte
   jusqu'à la fenêtre. La ligne de lecture reste bornée à --measure-reading
   (34em du texte concerné). Aucune taille de texte liée à la fenêtre.
   main est le conteneur de requêtes des composants. */
main { display: block; container-type: inline-size; padding: var(--space-4) var(--gutter) var(--space-6); max-width: calc(var(--measure-shell) + 2 * var(--gutter)); margin-inline: auto; }
main > * + * { margin-top: var(--space-5); }
main > .list-section, main > section { margin-top: var(--space-6); }
/* Texte courant : jamais plus large qu'une ligne de lecture, même dans une enveloppe large. */
main :is(p, h1, h2, h3, h4, blockquote, figcaption, dd), main :is(.alert, .actions, .error-summary, .toc, .field, .checkbox, .verification) { max-width: var(--measure-reading); }
/* Listes de lignes, barres et tableaux : la largeur de leur contenu, au plus --measure-list
   (48rem) ; une liste dont les lignes portent plusieurs colonnes (associations) prend l'enveloppe. */
main > form, main > .disclosure, main > section > .disclosure, main :is(.list, .measures, .feed, .figures, .plain, .distribution, .comparison-wrap, .table-wrap, .search-hits, .legend) { max-width: var(--measure-list); }
main .associations .list { max-width: none; }
/* Sommaire latéral (mentions) : à gauche, non collant, quand main dépasse 60em
   de son propre texte (requête de conteneur : suit la taille racine, la police
   et le zoom). En dessous, sommaire puis prose, comme sur mobile. */
.with-toc > * + * { margin-top: var(--space-5); }
@container (min-width: 60em) {
  .with-toc { display: grid; grid-template-columns: minmax(0, 16em) minmax(0, 1fr); column-gap: var(--space-7); align-items: start; }
  .with-toc > * + * { margin-top: 0; }
  .with-toc > .prose > :first-child { margin-top: 0; }
}

/* Libellé flexible : rétrécit, coupe un mot seulement en dernier recours */
.label { min-width: 0; overflow-wrap: break-word; }

/* En-tête d'application : non collant. Le contenu est aligné sur l'enveloppe ;
   le filet court sur toute la largeur. L'en-tête est le conteneur « entete » :
   le seuil liens en ligne / bouton Menu est mesuré dans sa propre largeur, en em,
   donc il suit aussi la taille du texte (racine, police du navigateur, zoom). */
.app-header { container: entete / inline-size; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-4); padding: var(--space-2) max(var(--gutter), calc((100% - var(--measure-shell)) / 2)); border-bottom: 1px solid var(--color-rule); }
.app-header__logo { display: inline-flex; align-items: center; min-height: var(--target-min); }
.app-header__logo img { height: 1.75rem; width: auto; display: block; }
/* Bouton Menu : natif ; affiché seulement par le script (attribut hidden sinon) et sous le seuil. */
.app-header__toggle { display: inline-flex; align-items: center; gap: 0.4em; max-width: 100%; min-height: var(--target-min); min-width: var(--target-min); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-control); border-radius: var(--radius-control); background: var(--color-bg); color: var(--color-text); font: inherit; font-weight: var(--font-weight-semibold); cursor: pointer; }
.app-header__toggle[aria-expanded="true"] { background: var(--color-action); color: var(--color-on-action); border-color: var(--color-action); }
/* Navigation principale : sous le logo en petit espace, sur sa ligne au-delà du seuil. */
.app-header__nav { flex: 1 0 100%; min-width: 0; }
.app-header__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.app-header__nav li { min-width: 0; max-width: 100%; }
.app-header__nav a { max-width: 100%; display: inline-flex; align-items: center; min-height: var(--target-min); min-width: var(--target-min); font-weight: var(--font-weight-semibold); overflow-wrap: break-word; }
/* « Soutenir Dotto » : seule la couleur du texte (et du soulignement) change ;
   en forced-colors, le système impose sa couleur de lien comme aux voisins. */
.app-header__nav a.app-header__soutien { color: var(--color-soutien); }
/* Page courante ("page") et rubrique courante ("true", sous-pages d'archive) : même soulignement épais. */
.app-header__nav a[aria-current="page"], .site-nav a[aria-current="page"], .app-header__nav a[aria-current="true"], .site-nav a[aria-current="true"] { text-decoration-thickness: 3px; }
/* Petit espace avec script : liste dépliée juste sous l'en-tête, lignes natives à filets.
   Repliée, elle est display:none (hors tabulation) sauf si elle contient le focus :
   un lien focalisé n'est jamais masqué au passage du seuil. */
@container entete not (min-width: 43em) {
  .js-nav .app-header:not([data-menu="ouvert"]) .app-header__nav:not(:focus-within) { display: none; }
  .js-nav .app-header__nav ul { flex-direction: column; gap: 0; margin-top: var(--space-2); border-top: 1px solid var(--color-rule); }
  .js-nav .app-header__nav li + li { border-top: 1px solid var(--color-rule); }
  .js-nav .app-header__nav a { display: flex; padding-block: var(--space-3); }
}
/* Espace suffisant (seuil mesuré, voir spec §5.1) : liens dans l'en-tête, pas de bouton. */
@container entete (min-width: 43em) {
  .app-header__toggle { display: none; }
  .app-header__nav { flex: 0 1 auto; }
  .app-header__nav ul { justify-content: flex-end; gap: var(--space-2) var(--space-5); }
}

.app-footer { container-type: inline-size; padding: var(--space-5) max(var(--gutter), calc((100% - var(--measure-shell)) / 2)); border-top: 1px solid var(--color-rule); }
.app-footer a { max-width: 100%; display: inline-flex; align-items: center; min-height: var(--target-min); min-width: var(--target-min); }
/* Plan du site : liste native de liens, lignes séparées par un filet (spec §10) ;
   en grille de colonnes quand la place le permet (lecture ligne par ligne inchangée). */
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav li + li { border-top: 1px solid var(--color-rule); }
.site-nav a { display: block; min-height: var(--target-min); padding-block: var(--space-3); }
@container (min-width: 40em) {
  .site-nav ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(12em, 1fr)); column-gap: var(--space-6); }
  .site-nav li { border-top: 1px solid var(--color-rule); }
}
.app-footer__copy, .app-footer__note { max-width: var(--measure-reading); }
.app-footer__copy { margin-top: var(--space-4); }

.back-link { max-width: 100%; display: inline-flex; gap: 0.25em; align-items: center; min-height: var(--target-min); font-weight: var(--font-weight-semibold); text-decoration: none; }
.back-link:hover { text-decoration: underline; }

/* En-tête de vue */
.view-header > * + * { margin-top: var(--space-2); }
.meta-line { color: var(--color-text-secondary); }
.source-block { margin-top: var(--space-6); color: var(--color-text-secondary); }

/* Icônes */
.icon { width: 1.5em; height: 1.5em; flex: 0 0 auto; }
.chevron { width: 1.1em; height: 1.1em; flex: 0 0 auto; color: var(--color-text-secondary); }

/* Listes */
.list-section__title { padding-bottom: var(--space-2); color: var(--color-text-secondary); font-size: var(--font-size-subheadline); }
.list-section__footer { padding-top: var(--space-2); }
.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-rule); }
.list > li { border-bottom: 1px solid var(--color-rule); }
.list-row__link { display: flex; align-items: center; gap: var(--space-3); min-height: var(--target-min); padding-block: var(--space-3); color: inherit; text-decoration: none; }
a.list-row__link:hover .list-row__title { text-decoration: underline; }
.list-row__text { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.list-row__subtitle { font-size: var(--font-size-subheadline); line-height: var(--line-height-subheadline); color: var(--color-text-secondary); }
.list-row__trailing { flex: 0 0 auto; max-width: 50%; overflow-wrap: break-word; }
.list-section--compact .list-row__link { padding-block: var(--space-2); }

/* Ligne de valeur : la valeur passe sous le libellé quand la place manque */
.value-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-4); padding-block: var(--space-3); }
.value-row__label { flex: 1 1 12em; min-width: 0; overflow-wrap: break-word; }
.value-row__value { flex: 0 1 auto; max-width: 100%; overflow-wrap: break-word; font-weight: var(--font-weight-semibold); }
.value-row__note { flex: 1 0 100%; min-width: 0; overflow-wrap: break-word; }

/* Chiffre clé */
.key-figure { display: flex; flex-direction: column; gap: var(--space-1); overflow-wrap: break-word; }

/* Répartition : motifs + texte */
.distribution { margin: 0; }
.distribution__bar { display: block; width: 100%; height: 0.75rem; color: var(--color-text); }
.distribution__legend { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.distribution__legend li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; max-width: 100%; }
.swatch { display: inline-block; width: 1em; height: 1em; border: 1px solid var(--color-text); flex: 0 0 auto; }
.swatch--plein { background: var(--color-text); }
.swatch--hachure { background: repeating-linear-gradient(45deg, var(--color-text) 0 2px, transparent 2px 5px); }
/* « Non appliqué » : lignes horizontales, jamais le fond seul (une barre à 100 % ne se lit pas comme une absence de données). */
.swatch--lignes { background: repeating-linear-gradient(0deg, var(--color-text) 0 1.5px, transparent 1.5px 4px); }

/* Boutons natifs, légèrement stylés */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; max-width: 100%; padding: var(--space-3) min(1.5rem, 24px); border-radius: var(--radius-control); font: inherit; font-weight: var(--font-weight-semibold); text-align: center; text-decoration: none; cursor: pointer; }
.btn--primary { background: var(--color-action); color: var(--color-on-action); border: 1px solid var(--color-action); }
.btn--secondary { background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border-control); }
.btn--tertiary { background: none; border: 0; padding-inline: 0; color: var(--color-text); text-decoration: underline; text-underline-offset: 0.15em; }
.btn[aria-disabled="true"] { cursor: progress; }
/* Empilement intrinsèque : côte à côte s'il y a la place, sinon pleine largeur. */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.actions > .btn { flex: 1 1 14em; min-width: 0; }

/* Formulaires */
form > * + * { margin-top: var(--space-5); }
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label { font-weight: var(--font-weight-semibold); overflow-wrap: break-word; }
.field input, .field select, .field textarea { font: inherit; font-size: 1rem; min-height: var(--target-min); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-control); border-radius: var(--radius-control); background: var(--color-bg); color: var(--color-text); width: 100%; }
/* Liste déroulante : WebKit ignore la hauteur minimale d'un menu natif ; apparence retirée et chevron
   noir dessiné (cible ≥ 44 px). En contraste forcé, l'image disparaîtrait : apparence native rétablie. */
.field select { -webkit-appearance: none; appearance: none; padding-right: calc(var(--space-3) * 2 + 1em); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; background-size: 1em 1em; }
@media (forced-colors: active) { .field select { -webkit-appearance: auto; appearance: auto; background-image: none; padding-right: var(--space-3); } }
.field--error input, .field--error select, .field--error textarea { border: 2px solid var(--color-danger); }
.field__error { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--color-danger); font-weight: var(--font-weight-semibold); }
.checkbox { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-3); align-items: start; }
.checkbox .field__error, .checkbox .field__hint { grid-column: 1 / -1; }
.checkbox input { width: 1.5rem; height: 1.5rem; margin: 0.1rem 0 0; accent-color: var(--color-action); }
.checkbox label { min-height: var(--target-min); overflow-wrap: break-word; }

/* Résumé d'erreurs : un filet à gauche, comme une alerte, pas de cadre */
.error-summary { padding: var(--space-2) 0 var(--space-2) var(--space-3); border-left: 3px solid var(--color-danger); }
.error-summary:focus { outline: none; }
.error-summary h2, .error-summary h3 { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--color-danger); }
.error-summary ul { margin: var(--space-1) 0 0; padding-left: min(1.25em, 22px); }
.error-summary a { color: var(--color-danger); font-weight: var(--font-weight-semibold); }

/* Champ piège du formulaire de contact : hors écran, hors tabulation (tabindex=-1), masqué aux aides techniques (aria-hidden). */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Vérification anti-robot : format compact stable, jamais rogné par le conteneur. */
.verification > * + * { margin-top: var(--space-2); }
.verification__widget { max-width: 100%; }
.verification__widget:empty, .verification > p:empty { margin-top: 0; }

/* Alertes et statuts : icône + texte, filet de couleur */
.alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) 0 var(--space-2) var(--space-3); border-left: 3px solid currentColor; }
.alert > div { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.alert > div > * + * { margin-top: var(--space-1); }
.alert p:not(.alert__title) { color: var(--color-text); }
.alert--info { color: var(--color-text); }
.alert--success { color: var(--color-success); }
.alert--warning { color: var(--color-warning); }
.alert--error { color: var(--color-danger); }
/* Région vivante présente vide dès le chargement puis remplie (annonce fiable) :
   vide, elle n'ajoute aucun espacement ; jamais display:none (elle sortirait de l'arbre d'accessibilité). */
.live-region:empty { margin-top: 0; }
.status { display: flex; gap: var(--space-2); align-items: center; font-weight: var(--font-weight-semibold); }
.status--success { color: var(--color-success); }
.status--warning { color: var(--color-warning); }
.status--error { color: var(--color-danger); }

.stepper { font-weight: var(--font-weight-semibold); }

/* Divulgation : chevron à droite, comme une ligne native */
.disclosure { border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.disclosure + .disclosure { border-top: 0; }
.disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); list-style: none; min-height: var(--target-min); padding-block: var(--space-3); font-weight: var(--font-weight-semibold); cursor: pointer; }
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure__marker { transform: rotate(90deg); transition: transform 150ms; }
.disclosure[open] .disclosure__marker { transform: rotate(-90deg); }
.disclosure__content { padding-bottom: var(--space-4); }

/* Segments */
.tabs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tabs li { min-width: 0; max-width: 100%; }
.tabs a { display: inline-flex; align-items: center; max-width: 100%; min-height: var(--target-min); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border-control); border-radius: var(--radius-control); text-decoration: none; overflow-wrap: anywhere; }
/* Libellé d'onglet : rétrécissable ; un mot plus large que l'onglet passe à la ligne (texte très agrandi). */
.tabs a > .label { min-width: 0; }
.tabs a[aria-current="page"] { background: var(--color-action); color: var(--color-on-action); border-color: var(--color-action); }

/* Jetons longs : seule coupure « n'importe où » autorisée */
.breakable { overflow-wrap: anywhere; }

.empty-state > * + * { margin-top: var(--space-2); }
.loading-state { color: var(--color-text-secondary); }

/* Fil compact : le titre est le lien, étiré sur toute la ligne */
.feed { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-rule); }
.feed-item { position: relative; display: flex; flex-direction: column; gap: var(--space-1); padding-block: var(--space-3); border-bottom: 1px solid var(--color-rule); overflow-wrap: break-word; }
.feed-item__link { color: inherit; text-decoration: none; }
.feed-item__link::after { content: ""; position: absolute; inset: 0; }
.feed-item__link:hover { text-decoration: underline; }
.feed-item__type { font-weight: var(--font-weight-semibold); color: var(--color-text); }
.feed-item__meta, .feed-item__summary { color: var(--color-text-secondary); }

.prose blockquote footer { margin-top: var(--space-2); }

.limits { margin: var(--space-2) 0 0; padding-left: min(1.25em, 22px); }
.limits li + li { margin-top: var(--space-2); }
.measure-title { padding-bottom: var(--space-2); }

/* Sommaire et liens du résumé d'erreurs : listes de liens, vraies cibles */
.toc ol, .toc ul { margin: 0; padding-left: min(1.25em, 22px); }
/* Listes de liens : lignes natives séparées par un filet (spec §10) */
.toc li + li, .error-summary li + li { border-top: 1px solid var(--color-rule); }
.toc a, .error-summary a { max-width: 100%; display: inline-flex; align-items: center; min-height: var(--target-min); overflow-wrap: break-word; }

/* Action de ligne (« Modifier ») : vraie cible tactile */
.row-action { max-width: 100%; display: inline-flex; align-items: center; justify-content: center; min-height: var(--target-min); min-width: var(--target-min); }

/* Texte très agrandi : comme iOS aux tailles d'accessibilité, l'icône de tête
   s'efface pour rendre la largeur au texte ; le chevron reste (affordance). */
@container (max-width: 17em) {
  .list-row__link > .icon, .alert > .icon, .field__error > .icon, .org__line > .icon { display: none; }
}

/* Photographie de presse : affichée entière, légende et crédit dessous */
.photo { margin-block: var(--space-5); }
.photo img { display: block; width: 100%; height: auto; }
.photo figcaption { margin-top: var(--space-2); font-size: var(--font-size-subheadline); line-height: var(--line-height-subheadline); color: var(--color-text-secondary); }

/* Couleurs forcées : graphiques et état courant restent visibles */
@media (forced-colors: active) {
  .distribution__bar, .swatch { color: CanvasText; border-color: CanvasText; }
  .swatch { forced-color-adjust: none; background: Canvas; }
  .swatch--plein { background: CanvasText; }
  .swatch--hachure { background: repeating-linear-gradient(45deg, CanvasText 0 2px, Canvas 2px 5px); }
  .swatch--lignes { background: repeating-linear-gradient(0deg, CanvasText 0 1.5px, Canvas 1.5px 4px); }
  .tabs a[aria-current="page"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}

/* Associations : entrée de liste (nom, description, moyens de contact) */
.associations > * + * { margin-top: var(--space-6); }
.org { padding-block: var(--space-3); overflow-wrap: break-word; }
.org > * + * { margin-top: var(--space-1); }
.org__contacts { list-style: none; margin: 0; padding: 0; }
.org__line { display: flex; align-items: center; gap: var(--space-3); min-height: var(--target-min); }
.org__line > .label { overflow-wrap: anywhere; }
.org__contacts a { display: inline-flex; align-items: center; max-width: 100%; min-height: var(--target-min); overflow-wrap: anywhere; }
.org__note { color: var(--color-text-secondary); }
/* Enveloppe large : nom et description à gauche (ligne de lecture), contacts à droite. */
@container (min-width: 52em) {
  .org { display: grid; grid-template-columns: minmax(0, 34em) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--space-6); align-items: start; }
  .org > * + * { margin-top: 0; }
  .org__name, .org__desc { grid-column: 1; }
  .org__desc { margin-top: var(--space-1); }
  .org__contacts { grid-column: 2; grid-row: 1 / span 2; }
}

/* Filtre par type (script) : boutons à bascule, cibles ≥ 44 px, retour à la ligne */
.type-filter > * + * { margin-top: var(--space-2); }
.type-filter ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.type-filter li { min-width: 0; max-width: 100%; }
.type-filter button { display: block; max-width: 100%; min-height: var(--target-min); min-width: var(--target-min); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border-control); border-radius: var(--radius-control); background: var(--color-bg); color: var(--color-text); font: inherit; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.type-filter button[aria-pressed="true"] { background: var(--color-action); color: var(--color-on-action); border-color: var(--color-action); }
.type-filter__status:empty { display: none; }
@media (forced-colors: active) {
  .type-filter button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}

/* Archives (api/lib/archive/render.js), 404 et 503 : vues rendues par le
   serveur, une colonne, listes à filets, pas d'encadrés. Les tableaux restent de
   vrais <table> (légende, portée, rôles explicites) et s'empilent selon la
   largeur de leur conteneur (main), en em : la bascule suit aussi la taille du texte. */
.archive h1 { font-size: var(--font-size-title-1); line-height: var(--line-height-title-1); }
.archive h2 { font-size: var(--font-size-title-2); line-height: var(--line-height-title-2); }
.archive h3 { font-size: var(--font-size-title-3); line-height: var(--line-height-title-3); }
.archive > h1, .archive > .crumbs + .meta-line { margin-top: var(--space-2); }
.archive > h1:first-child { margin-top: 0; }
.stamp { font-weight: var(--font-weight-semibold); color: var(--color-text); }

/* Fil d'Ariane, liens de liste : vraies cibles ≥ 44 px, retour à la ligne */
.crumbs a, .plain a, .measure__link a { display: inline-block; max-width: 100%; min-height: var(--target-min); padding-block: var(--space-3); overflow-wrap: break-word; }

/* Contrôles de la liste des écoles (variante A, 24/10/2026) : le champ et son
   bouton sur une ligne, puis type et tri côte à côte ; chaque paire se replie
   d'elle-même quand la place manque (texte agrandi), sans seuil en px. */
.search-row, .filter-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.search-row > input { flex: 1 1 12em; width: auto; min-width: 0; }
.search-row > .btn { flex: 0 1 auto; }
.filter-row > .field { flex: 1 1 10em; min-width: 0; }
.archive form > * + * { margin-top: var(--space-3); }
.archive .en-bref { margin-top: var(--space-4); }
/* D-010 : à partir d'un conteneur de 64em (≈ 1 024 px à texte 100 %), contrôles et
   « En bref » à gauche, liste à droite ; pas de colonne collante (rien de masqué
   à texte agrandi, où la bascule en em ramène une colonne). */
.results-main > :first-child { margin-top: var(--space-4); }
@container (min-width: 64em) {
  .results-layout { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, var(--measure-list)); gap: 0 var(--space-6); align-items: start; }
  .results-main > :first-child { margin-top: 0; }
}

/* Mesures trouvées par la recherche : filet à gauche, liste de liens */
.search-hits { padding-left: var(--space-3); border-left: 3px solid var(--color-text); }
.search-hits > * + * { margin-top: var(--space-2); }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li + li { border-top: 1px solid var(--color-rule); }
.plain .meta { color: var(--color-text-secondary); }

/* Lignes d'école et de thème : titre, sous-titres, puis la barre de répartition */
.list-row__text > .name { font-weight: var(--font-weight-semibold); }
.list-row__text > .val, .list-row__text > .meta { font-size: var(--font-size-subheadline); line-height: var(--line-height-subheadline); color: var(--color-text-secondary); }
.archive .list > li > .distribution, .archive .list > li > .nums { padding-bottom: var(--space-3); }
.archive .list > li.empty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-block: var(--space-3); }
/* Badge de faible participation : texte secondaire en ligne, sans cadre ni hauteur imposée (D-012). */
.tag { font-size: var(--font-size-subheadline); font-weight: var(--font-weight-regular); color: var(--color-text-secondary); overflow-wrap: break-word; }
.comparison-table tbody th .tag { display: block; }
/* Intertitre du tri par part « non appliqué » (arbitrage G) */
.archive .list > li.group-label { padding-block: var(--space-4) var(--space-2); font-weight: var(--font-weight-semibold); }

/* Barres : motifs + pourcentages écrits ; légende des motifs */
.distribution > * + * { margin-top: var(--space-1); }
.legend { margin-top: var(--space-3); }

/* Mesures : intitulé, barre, comparaison en divulgation */
.measures { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--color-rule); }
.measure { padding-block: var(--space-4); border-top: 1px solid var(--color-rule); overflow-wrap: break-word; }
.measure > * + * { margin-top: var(--space-2); }
.measure .disclosure { border-bottom: 0; }
/* Intitulé de mesure : vrai titre (h2 ou h3, D-011) à la taille « headline » d'avant. */
.archive .measure__title { font-size: var(--font-size-headline); line-height: var(--line-height-headline); margin: 0; }

/* Chiffres : valeur puis libellé, une ligne par chiffre, jamais une grille */
.figures { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-rule); }
.figures li { display: flex; flex-direction: column; gap: var(--space-1); padding-block: var(--space-3); border-bottom: 1px solid var(--color-rule); min-width: 0; overflow-wrap: break-word; }
.figures strong { font-size: var(--font-size-title-2); line-height: var(--line-height-title-2); font-variant-numeric: tabular-nums; }

/* Tableaux de données */
.table-wrap, .comparison-wrap { min-width: 0; }
.letter-table, .comparison-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.letter-table caption, .comparison-table caption { text-align: left; font-weight: var(--font-weight-semibold); padding-bottom: var(--space-2); }
.letter-table th, .letter-table td, .comparison-table th, .comparison-table td { padding: var(--space-2); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-rule); overflow-wrap: break-word; }
.letter-table thead th, .comparison-table thead th { font-size: var(--font-size-subheadline); color: var(--color-text-secondary); }
.letter-table tbody th, .comparison-table tbody th { font-weight: var(--font-weight-regular); }
.letter-table .num, .comparison-table .num { text-align: right; }
.comparison-table .cell-label { display: none; }
.comparison-table tbody a { display: inline-block; max-width: 100%; min-height: var(--target-min); padding-block: var(--space-3); }

/* Empilement : la ligne devient un bloc (en-tête de ligne, puis « libellé : valeur »),
   les en-têtes de colonnes restent lus par les lecteurs d'écran. */
@container (max-width: 20em) {
  .letter-table, .letter-table caption, .letter-table tbody, .letter-table tr, .letter-table th, .letter-table td { display: block; }
  .letter-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .letter-table tr { padding-block: var(--space-2); border-bottom: 1px solid var(--color-rule); }
  .letter-table tbody th, .letter-table td { border: 0; padding: var(--space-1) 0; text-align: left; }
  .letter-table tbody th { font-weight: var(--font-weight-semibold); }
  .letter-table td.num { text-align: left; }
  .letter-table td.num::before { content: attr(data-label) "\202F: "; }
}
@container (max-width: 32em) {
  .comparison-table, .comparison-table caption, .comparison-table tbody, .comparison-table tr, .comparison-table th, .comparison-table td { display: block; }
  .comparison-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .comparison-table tr { padding-block: var(--space-2); border-bottom: 1px solid var(--color-rule); }
  .comparison-table tbody th, .comparison-table td { border: 0; padding: var(--space-1) 0; text-align: left; }
  .comparison-table td.num { text-align: left; }
  .comparison-table .cell-label { display: inline; }
  /* Valeurs d'une école à la suite (D-004) : « Réponses : 12 · Appliqué : 25 % … », libellés complets. */
  .comparison-table td { display: inline; }
  .comparison-table td + td::before { content: " · "; }
  .comparison-table tbody th { display: block; }
}

/* Signataires : nom, puis qualité et arrondissement */
.signataire { padding-block: var(--space-3); overflow-wrap: break-word; }
.signataire .name { display: block; font-weight: var(--font-weight-semibold); }
.signataire .meta { display: block; font-size: var(--font-size-subheadline); color: var(--color-text-secondary); }

/* Confirmation « Lien copié » du bouton Partager */
.toast { position: fixed; left: var(--gutter); right: var(--gutter); bottom: var(--space-4); padding: var(--space-2) var(--space-4); background: var(--color-action); color: var(--color-on-action); border-radius: var(--radius-control); overflow-wrap: break-word; z-index: 1; }
.app-footer__note { margin-top: var(--space-4); }