/* @grammaire v2
   ══════════════════════════════════════════════════════════════
   DONNÉES — /donnees et /donnees/bilan.

   Ce qui reste ici tient en quatre objets : le pied du hero, le rythme des
   sections, le cadre d'un graphique, le rebond vers la carte. Tout le reste
   vient de la grammaire, chargée par `app.css` :

     le hero ................... `_content_header` en surface `card`, avec sa
                                 fente `aside` (le sélecteur d'année) et sa
                                 fente `after` (les chiffres et le pied)
     les chiffres .............. `_stat_row` (maquette « Hero données », 1a)
     le sélecteur d'année ...... `_year_switch`
     les titres de section ..... `_section_header`
     les boutons ............... `ui.button`, `_share_buttons`
     les bilans DGS ............ `_media_card` en échelle `compact`
     l'état vide ............... `_empty_state`

   Sont mortes avec leur balisage : la carte de rebond vers la carte
   interactive et son faux bouton, la grille de cartes de rapport et ses sept
   sous-éléments, les trois titres de section locaux, et le pavé marine qui
   enfermait les quatre chiffres — la maquette le nomme comme un défaut, ce
   fond étant réservé aux appels à l'action de fin de page.
   ══════════════════════════════════════════════════════════════ */

/* ══ PIED DU HERO ════════════════════════════════════════════════

   La provenance à gauche, ce qu'on peut faire à droite, séparés du bloc des
   chiffres par un filet. Dans cet ordre parce qu'on lit la provenance APRÈS
   les chiffres qu'elle qualifie.

   `_content_header` pose son `after` dans la carte ; ce filet est donc celui
   qui sépare deux rangs À L'INTÉRIEUR d'elle, pas une bordure de bloc. */

.content-header--donnees .content-header__after {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Le filet entre les chiffres et le chapô qui les précède, et entre les
   chiffres et le pied. Deux rangs, deux traits, même valeur : c'est ce qui
   fait lire la carte comme trois registres et non comme un empilement. */
.content-header--donnees .stat-row {
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.donnees__hero-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm) var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

.donnees__hero-source {
    flex: 1 1 18rem;
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text-light);
}

.donnees__hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-ms);
}

/* ══ LE PARTAGE PASSE EN LIEN, SANS CADRE ═══════════════════════════════════

   Même traitement que la tête de `/dossiers` (`hero-actions`, dans
   `zones/content.css`), et pour la même raison : des contrôles ENCADRÉS côte à
   côte se lisent comme des choix équivalents. Ici deux mènent quelque part —
   la carte, les définitions — et le troisième est un service. Le cadre est ce
   qui dit « bouton » ; le retirer suffit à dire « troisième rang ».

   La règle est portée par la RANGÉE et non par la brique de partage : ailleurs
   sur le site, le déclencheur encadré reste juste — dans une ligne de service,
   il n'a pas de bouton à côté de qui se démarquer. C'est le contexte qui
   décide, donc c'est le contexte qui l'écrit.

   Les valeurs sont celles de `/dossiers`, recopiées et non réinventées : deux
   surfaces qui rendent le même geste ne doivent pas diverger. Le jour où ce
   bloc de règles servira une troisième page, il remontera dans la grammaire —
   il est aujourd'hui captif de `zones/content.css`, 150 Ko qu'une page de
   données n'a aucune raison de charger.

   ET ELLE NE VAUT QUE TANT QU'ILS PARTAGENT UNE LIGNE. Sous 30em le partage
   passe dessous : il n'a plus de voisin dont se distinguer, et un libellé nu
   sous un bouton plein n'a plus aucune forme. Il reprend alors son cadre. */
@media (width >= 30em) {
    .donnees__hero-actions .share-dropdown__summary {
        padding-inline: var(--spacing-md);
        border-color: transparent;
        border-radius: var(--radius-md);
        background: transparent;
        color: var(--color-navy);
        font-weight: 600;
    }

    .donnees__hero-actions .share-dropdown__summary:hover,
    .donnees__hero-actions .share-dropdown__summary:focus-visible {
        border-color: transparent;
        background: var(--surface-3);
    }

    /* LA HAUTEUR N'EST PAS UN NOMBRE, c'est celle des boutons — et elle doit
       DESCENDRE LA CHAÎNE ENTIÈRE, maillon par maillon. Le déclencheur vit dans
       `.share-dropdown-group > details > summary` : poser `align-self` sur le
       seul `summary` ne s'appliquerait à rien. Le défaut ne se voit pas — sans
       cadre ni fond, seule la ZONE CLIQUABLE rétrécit. */
    .donnees__hero-actions > .share-dropdown-group {
        align-self: stretch;
        display: flex;
        align-items: stretch;
    }

    .donnees__hero-actions .share-dropdown {
        display: flex;
    }

    .donnees__hero-actions .share-dropdown__summary {
        align-self: stretch;
    }
}

/* SEUL SUR SA LIGNE, LE PARTAGE NE PEUT PLUS S'ÉTIRER : `align-self: stretch`
   remplit une LIGNE de flex, et quand le déclencheur passe à la ligne il est
   seul dessus. C'est exactement là qu'une hauteur minimale se justifie, et ce
   n'est pas un nombre choisi : `--touch-target-min` est le plancher de zone
   tactile de la charte. */
@media (width < 30em) {
    .donnees__hero-actions .share-dropdown__summary,
    .donnees__hero-actions .share-dropdown-group__btn {
        min-height: var(--touch-target-min);
    }
}

/* ══ LE HERO EST EN DEUX COLONNES, MAIS LES CHIFFRES TRAVERSENT ══

   L'en-tête met sa colonne `aside` en flex, à côté d'une enveloppe `__main`
   qui contient TOUT le reste — y compris la fente `after`. Les chiffres se
   retrouvaient donc enfermés dans la colonne gauche, à 55 % de la largeur de
   la carte, alors que la maquette les fait courir d'un bord à l'autre : c'est
   ce qui les fait lire comme le contenu de la carte plutôt que comme un bloc
   posé à côté du sélecteur.

   La parade est une GRILLE plus `display: contents` sur `__main`, qui rend ses
   enfants directement placeables. Elle n'existe que sous ce modificateur :
   l'enveloppe est là pour la mosaïque d'images des pages de liste, dont le
   comportement ne doit pas bouger.

   TROIS RANGÉES DÉCLARÉES, et c'est ce qui rend `1 / -1` utilisable plus bas.
   Sans grille explicite, toutes les rangées sont implicites, `-1` ne désigne
   plus la fin de la grille mais la ligne 1, et `grid-row: 1 / -1` se réduit à
   une seule rangée — mesuré : la rangée du sur-titre prenait alors les 61 px du
   sélecteur, ouvrant un vide entre le sur-titre et le titre. Le défaut ne se
   voit pas dans le CSS, seulement dans les hauteurs calculées.

   Ces trois rangées sont le sur-titre, le titre et le chapô ; le sélecteur et
   les chiffres prennent les rangées implicites suivantes. */

.content-header--donnees .content-header__body--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, auto);
    row-gap: var(--spacing-md);
}

.content-header--donnees .content-header__main {
    display: contents;
}

/* Tout ce que portait l'enveloppe reste dans la colonne du titre. Les deux
   règles suivantes ressortent la fente `after` et le sélecteur : même
   spécificité, donc c'est l'ORDRE qui tranche, et c'est délibéré. */
.content-header--donnees .content-header__main > * {
    grid-column: 1;
}

/* AU TÉLÉPHONE, LE SÉLECTEUR SE GLISSE ENTRE LE CHAPÔ ET LES CHIFFRES. Dans le
   DOM il est le DERNIER enfant de la carte — c'est ce que l'en-tête impose pour
   que l'ordre de lecture reste titre puis contenu. Sans placement explicite il
   tombait donc SOUS les boutons d'action, c'est-à-dire trois blocs après les
   chiffres qu'il commande. */
.content-header--donnees .content-header__aside {
    grid-column: 1;
    grid-row: 4;
}

.content-header--donnees .content-header__after {
    grid-column: 1;
    grid-row: 5;
}

@media (width >= 64em) {
    .content-header--donnees .content-header__body--split {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        column-gap: var(--spacing-xl);
    }

    /* Le sélecteur se lit à la hauteur du sur-titre, qui l'annonce. Il TRAVERSE
       les trois rangées du titre et se cale en haut, plutôt que d'occuper la
       première : posé dans la seule rangée du sur-titre, ses 61 px la faisaient
       grandir d'autant. */
    .content-header--donnees .content-header__aside {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: start;
        flex: none;
        max-width: none;
    }

    /* Les chiffres et le pied traversent les deux colonnes, sur la rangée
       implicite que l'auto-placement leur donne. */
    .content-header--donnees .content-header__after {
        grid-column: 1 / -1;
        grid-row: auto;
    }
}

/* AUCUN REMBOURRAGE EN TETE, et c'est encore une addition qu'il fallait
   supprimer. `_content_header` pose deja `--card-gap` sous sa carte — l'écart
   entre deux cartes empilées, qui rétrécit sur téléphone. Un
   `--rhythm-block` posé ici s'y AJOUTAIT : 72 px mesurés sous le hero, quand
   /dossiers, /actualites et /annuaire en rendent 24. Le site avait une valeur,
   cette page en avait une quatrième.

   Mesure du 2026-09-01, à 1440 px, du bas de la carte au haut du premier bloc :
   /dossiers 24, /actualites 24, /annuaire 24, /donnees 72. */
.donnees {
    padding-block: 0 var(--spacing-3xl);
}

/* L'ÉCART APPARTIENT À CE QUI SUIT. Une `margin-bottom` posée sur toutes les
   sections en met une sous la DERNIÈRE, qui n'a rien après elle — et elle
   s'ajouterait au bandeau d'abonnement du pied de page sans que rien ne le
   signale. */
.donnees > .container > * + * {
    margin-top: var(--rhythm-block);
}

/* UNE SECTION N'A PAS DE `gap`, et c'est le point. `_section_header` porte
   deja sa marge basse (24 px) : un `gap` posé ici s'y AJOUTE, et rien ne le
   signale. Mesure avant correction : 56 px entre un titre de section et son
   contenu, soit une valeur qui n'est ni `--spacing-lg`, ni `--rhythm-section`,
   ni `--rhythm-block` — une quatrième, née d'une addition que personne n'a
   décidée. C'est exactement le défaut que la règle du rythme vertical nomme :
   « une marge basse et une marge haute s'ajoutent ». */
.donnees__section {
    display: flex;
    flex-direction: column;
}

/* ══ DEUX COLONNES : LE FLUX, ET LA CARTE ═══════════════════════════════════

   Empilées, ces deux sections rendaient deux bandes pleine largeur dont la
   seconde était presque vide. Une page qui n'avance qu'en rangées se lit comme
   une pile, et l'oeil n'y distingue plus le principal du rebond.

   Le rail est en `rem` et non en fraction : une colonne d'appui a une largeur
   de LECTURE, elle ne suit pas celle de la page. À `1fr` elle passait à 380 px
   sur un grand écran, où la carte se met à flotter de nouveau. */

.donnees__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rhythm-block);
}

/* ══ LES DEUX CARTES ONT LA MEME HAUTEUR, PAR SUBGRID ═══════════════════════

   Étirer les COLONNES ne suffit pas, et c'est ce qui rend le réglage moins
   évident qu'il n'en a l'air : chaque colonne est une section qui porte son
   en-tête PUIS sa carte, et les deux en-têtes n'ont pas la même hauteur (celui
   du flux a un chapô, celui de la carte a un lien qui passe à la ligne). Deux
   colonnes de même hauteur totale rendaient donc deux cartes qui ne commencent
   ni ne finissent au même endroit.

   `grid-template-rows: subgrid` fait porter les rangées par le PARENT : la
   rangée des en-têtes prend la hauteur du plus haut des deux, la rangée des
   cartes prend tout le reste, et les deux cartes s'y étirent. Les bords hauts
   et bas coïncident, ce qui est la seule définition utile de « même hauteur ».

   Sans `subgrid` (navigateur antérieur à 2023), la déclaration est ignorée et
   la mise en page retombe sur celle d'avant : deux cartes de hauteur propre,
   alignées en haut. Aucun défaut ne s'affiche, seul le réglage disparaît. */
@media (width >= 64em) {
    .donnees__cols {
        grid-template-columns: minmax(0, 1fr) 21rem;
        /* Rangée 1 : les en-têtes. Rangée 2 : les cartes, qui prennent le
           reste. */
        grid-template-rows: auto 1fr;
        gap: var(--spacing-xl);
    }

    .donnees__cols > .donnees__section {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: 1 / -1;
    }
}

/* ══ CADRE D'UN GRAPHIQUE ════════════════════════════════════════

   Carte de niveau 2 : blanc bordé, sans ombre. Un graphique est du CONTENU,
   pas l'action de la page — lui poser une ombre en ferait un niveau 1, et il
   y en a quatre sur cette page. */

.donnees__chart-card {
    background: var(--surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
}

.donnees__charts {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

@media (width >= 60em) {
    .donnees__charts {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Les hauteurs sont imposées : ECharts mesure son conteneur au montage, et un
   conteneur sans hauteur rend un canevas de zéro pixel — sans erreur, sans
   log, sans rien à voir. */
.donnees__chart {
    width: 100%;
    height: 15rem;
}

.donnees__sankey {
    width: 100%;
    height: 26rem;
}

/* Au telephone, le flux gagne de la hauteur : les libelles y reviennent a la
   ligne (cf. `dataviz-charts.js`), donc chaque noeud occupe deux ou trois
   lignes au lieu d'une. A 20 rem ils se chevauchaient. */
@media (width < 48em) {
    .donnees__sankey {
        height: 30rem;
    }
}

/* Écrit par `assets/dataviz-charts.js` quand le module ECharts ne se charge
   pas. C'est un message d'échec adressé au lecteur, pas une décoration : il
   garde le contraste de l'encre courante. */
.donnees__chart-error {
    margin: 0;
    padding: var(--spacing-lg);
    color: var(--color-text-light);
    font-size: var(--font-size-sm);
    text-align: center;
}

/* ══ REBOND VERS LA CARTE ════════════════════════════════════════

   C'était une carte à elle : cadre, survol, chevron, et un `<span>` maquillé
   en bouton qui n'en était pas un. Le titre et le lien nommé vivent désormais
   dans `_section_header` ; il ne reste que la carte de France et sa phrase,
   dans un lien unique dont la zone de clic couvre les deux.

   DEUX COLONNES, pas un empilement centré. Le tracé à gauche, la phrase à
   droite, tous deux à leur taille : centrés l'un sous l'autre dans une bande
   de 1 140 px, ils laissaient les deux tiers de la carte vides et le bloc se
   lisait comme un espace en attente de contenu. */

.donnees__map {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    /* Le tracé et sa phrase se CENTRENT dans la hauteur qu'on leur donne. La
       carte du rail est étirée sur celle du flux : calés en haut, ils
       laisseraient sous eux le vide qu'on vient de retirer ailleurs. */
    align-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.donnees__map:hover,
.donnees__map:focus-visible {
    border-color: var(--color-section-cesu);
    background: var(--color-section-cesu-light);
}

/* La carte est SERVIE par `/donnees/carte.svg` : hauteur automatique, largeur
   bornée. Les deux attributs `width`/`height` du balisage donnent son rapport
   au navigateur avant le chargement, ce qui évite que le bloc saute. */
.donnees__map-figure {
    display: block;
    width: min(100%, 17rem);
    height: auto;
}

.donnees__map-text {
    font-size: var(--font-size-md);
    line-height: 1.55;
    color: var(--color-text-light);
    text-align: center;
}

/* PAS DE FORME COUCHÉE. Le tracé et sa phrase restent l'un au-dessus de
   l'autre à toutes les largeurs : la carte vit dans un rail de 21 rem, où deux
   colonnes réduiraient la France à un timbre. C'est le rail qui a remplacé la
   mise en page en bande, pas une variante de plus de ce bloc. */

/* ══ BILANS DGS ══════════════════════════════════════════════════

   Motif 71 de la maquette, « le tableau de correspondance » : filets de 1 px
   entre les lignes, jamais de zébrures ni de bordures verticales, la colonne
   d'entrée en gras précédée de son point de rubrique, et les données brutes —
   format, poids — en chasse fixe, où elles se distinguent sans être mises en
   valeur.

   CE QUE CE MOTIF REMPLACE. Onze `_media_card` en échelle compacte, qui ne
   différaient que par leur ANNÉE : « Bilan annuel des CESU 2024 », « … 2023 »,
   onze fois le même titre à un chiffre près. Le sigle « PDF » de la vignette
   redisait par-dessus le marché le « PDF » du repère juste dessous, et quatre
   rangées de cadres rendaient ce qui tient en onze lignes.

   La carte illustrée reste LA carte du site, et ce n'est pas une exception
   qu'on s'accorde : elle suppose que ses entrées se distinguent par leur
   VISUEL ou par leur titre. Une collection annuelle ne se distingue que par
   une date, et c'est exactement le cas que la maquette range dans le tableau.

   DEUX COLONNES DE LIGNES, pas une : sur une page large, une colonne de onze
   entrées laisse les deux tiers de la largeur vides — le défaut même qu'on
   vient de corriger sur la carte. */

.donnees__docs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--spacing-2xl);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (width >= 48em) {
    .donnees__docs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* LE FILET EST EN TÊTE DE LIGNE, jamais en pied : une bordure basse posée sur
   toutes les entrées en met une sous la DERNIÈRE, qui ne sépare plus rien. En
   deux colonnes, chaque colonne garde ainsi son propre filet de tête. */
.donnees__doc {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    padding: var(--spacing-ms) 0;
    border-top: 1px solid var(--color-border);
}

.donnees__doc-title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-md);
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-primary-dark);
    text-decoration: none;
}

.donnees__doc-title:hover,
.donnees__doc-title:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* LA LIGNE ENTIÈRE EST LA CIBLE, pas seulement son titre. Mesuré à 375 px : le
   lien faisait 20 px de haut dans une ligne de 44 — au doigt, on vise le titre
   et on touche le blanc. Un pseudo-élément étiré étend la zone de clic sans
   ajouter de lien : c'est le geste que `_media_card` applique déjà, et il tient
   ici pour la même raison — le poids et le format ne sont pas interactifs, donc
   rien n'est avalé. */
.donnees__doc-title::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Le poids et le format sont des DONNÉES : chasse fixe, encre atténuée, et
   `flex: none` pour qu'ils gardent leur ligne quand le titre est long. */
.donnees__doc-meta {
    flex: none;
    font-family: var(--font-data);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    white-space: nowrap;
}

/* ══ ÉTAT VIDE ═══════════════════════════════════════════════════ */

.donnees__empty {
    padding: var(--spacing-2xl) var(--spacing-lg);
    background: var(--surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--color-text-light);
}

/* ══ TABLEAU DU BILAN ════════════════════════════════════════════

   /donnees/bilan. « Filets de 1 px entre les lignes, jamais de zébrures ni de
   bordures verticales » (maquette, le motif de tableau) : les zébrures et les
   colonnes cernées appartenaient au traitement local, elles ne reviennent pas.

   Un vrai `<table>` avec `<caption>` et `<th scope>` — la maquette réserve la
   grille nue aux correspondances NON tabulaires, et ces chiffres se comparent
   d'une année à l'autre autant que d'une colonne à l'autre.

   Les couleurs étaient huit littéraux Tailwind (#475569, #e2e8f0, #cbd5e1…),
   étrangers à la charte. Elles sont désormais des jetons. */

.donnees__table-wrap {
    overflow-x: auto;
}

.donnees__table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.donnees__table th,
.donnees__table td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: right;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

/* L'en-tête est une INCISE, pas un titre : capitales espacées à 11 px, comme
   tous les sur-titres du site. */
.donnees__table thead th {
    font-family: var(--font-sans);
    font-size: var(--font-size-2xs);
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text-light);
    border-bottom-width: 2px;
}

.donnees__table thead th:first-child,
.donnees__table tbody th {
    text-align: left;
}

.donnees__table tbody th {
    font-weight: 600;
    color: var(--color-text);
}

.donnees__table tbody tr:hover {
    background: var(--color-bg-light);
}

/* L'en-tête se répète sur chaque feuille à l'impression : un tableau de dix
   années tient rarement sur une page, et sans cette ligne les colonnes de la
   seconde feuille n'ont plus de nom. */
@media print {
    .donnees__table thead {
        display: table-header-group;
    }

    .donnees__table tr {
        break-inside: avoid;
    }
}

/* ══ DEFINITIONS DES INDICATEURS ═════════════════════════════════════════════

   /donnees/definitions. Cent cinquante-cinq indicateurs en dix thèmes, et une
   page qui faisait trente-trois mille pixels de haut : une `<dl>` de blocs
   empilés, sans repère latéral, où atteindre « AFGSU 2, ventilation par
   profession » demandait de faire défiler cinquante-six définitions à
   l'aveugle.

   Le sommaire vient de `_sidebar_toc` et n'est pas écrit ici ; les en-têtes de
   `_section_header` ; les pastilles de `ui.pill` ; le point de rubrique de
   `ui.dot`. Ce qui reste est la mise en page à deux colonnes et le motif 71 de
   la maquette, « le tableau de correspondance ». */

/* LE SQUELETTE EST CELUI D'UNE FICHE, et il n'est pas redeclare ici :
   `article-single__layout` (contenu a gauche, rail de 20 rem a droite),
   `article-sidebar` et `article-sidebar__sticky` viennent de `zones/article.css`,
   que dix gabarits du site partagent deja. Une onzieme copie de cette grille
   aurait diverge sur la largeur du rail ou sur le seuil de repli, comme les
   deux qui ont ete resorbees avant elle. */

/* ══ LE SOMMAIRE RESTE ATTEIGNABLE AU TELEPHONE ══════════════════════════════

   `article.css` masque `.article-sidebar` sous 64em — toute la colonne, pas
   seulement le sommaire. C'est juste sur une fiche, où le sommaire est un
   confort de lecture. Ici il est l'ENTRÉE de la page : 155 indicateurs, 14 000
   px de défilement, et aucun moyen de sauter à « AFGSU 2, ventilation par
   profession ». Mesuré : aside `display: none` à 375 et à 768, `flex` à 1024.

   Il remonte donc AU-DESSUS du contenu, et la brique fait le reste — elle rend
   son sommaire replié sous 64em (`data-disclosure-open-from="64em"`,
   `aria-expanded="false"` dès le premier rendu, sans attendre le moindre
   script), et le titre est le bouton qui le déplie.

   La règle est portée par cette page et non par la brique : ailleurs sur le
   site, masquer le rail au téléphone reste le bon choix. C'est le rôle du
   sommaire qui change, pas sa forme. */
@media (width < 64em) {
    .donnees-defs .article-single__layout {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .donnees-defs .article-sidebar {
        display: block;
        order: -1;
    }
}

.donnees-defs__main {
    display: flex;
    flex-direction: column;
    gap: var(--rhythm-block);
    min-width: 0;
}

/* ── LE MOTIF 71 ──

   « Filets de 1 px entre les lignes, jamais de zébrures ni de bordures
   verticales. La première colonne porte un point de rubrique et le libellé en
   gras, c'est la colonne d'entrée. Les données brutes passent en chasse fixe :
   elles se distinguent sans être mises en valeur. »

   UNE SEULE COLONNE DE LIGNES, et la première version en posait deux. Le rail
   de 20 rem laisse 796 px à la colonne principale : deux colonnes de rows y
   font 380 px, dont 200 pour la nature de la donnée en chasse fixe. Il restait
   180 px au libellé — « Cadre de santé ou IDE référent, nombre » y tenait sur
   trois lignes, et la nature débordait de sa colonne. Mesuré, pas supposé.

   Une colonne de 796 px porte le libellé et sa nature sur la MÊME ligne, ce
   qui est la forme du motif. La page reste longue — 155 indicateurs le sont —
   et c'est le sommaire latéral qui règle la navigation, pas la compression. */

.donnees-defs__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* LE FILET EST EN TÊTE DE LIGNE, jamais en pied : une bordure basse posée sur
   toutes les entrées en met une sous la DERNIÈRE, qui ne sépare plus rien. */
.donnees-defs__field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--spacing-lg);
    row-gap: var(--spacing-2xs);
    padding: var(--spacing-sm) 0;
    border-top: 1px solid var(--color-border);
}

.donnees-defs__field-label {
    font-family: var(--font-sans);
    font-size: var(--font-size-md);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-primary-dark);
}

/* LE TEXTE D'AIDE PREND SA PROPRE LIGNE, et il est rare : 6 indicateurs sur
   155 en portent un. Lui donner une colonne aurait rendu « Nombre entier »
   cent quarante-neuf fois. */
.donnees-defs__field-help {
    grid-column: 1 / -1;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text-light);
}

/* La nature de la donnée est une DONNÉE : chasse fixe, encre atténuée, et
   `nowrap` pour qu'elle garde sa ligne quand le libellé est long. */
.donnees-defs__field-nature {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--font-data);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    white-space: nowrap;
}

/* Au téléphone, la nature passe SOUS le libellé : côte à côte, elle laisserait
   au libellé une largeur où il casse sur trois lignes. */
@media (width < 48em) {
    .donnees-defs__field {
        grid-template-columns: minmax(0, 1fr);
    }

    .donnees-defs__field-nature {
        grid-column: 1;
        grid-row: auto;
    }
}