/* @grammaire v2
 *
 * PLAN DU SITE — ce qui reste en propre a `/plan-du-site` une fois la
 * grammaire employee.
 *
 * CE QUI A DISPARU. L'ancienne feuille portait son propre titre de page en
 * `2rem`, son propre titre de section souligne d'un filet, sa propre couleur
 * de lien et sa propre borne de largeur — une soixantaine de lignes qui
 * redisaient, moins bien, ce que `_content_header`, `_section_header` et
 * `ui-rule` posent deja. Le titre en `2rem` etait d'ailleurs le seul du site a
 * cette taille : la page ne ressemblait a aucune autre, et c'est exactement ce
 * qu'on lisait comme « pas tres propre ».
 *
 * NE RESTE ICI QUE DEUX OBJETS que la grammaire ne porte pas :
 *
 *   - une COLLECTION : un nom, un volume, un filet entre les lignes. C'est la
 *     seule information que la page donne et qu'on ne trouve nulle part
 *     ailleurs sur le site ;
 *   - un TYPE DE CONTENU : un titre a filet, et des liens EMPILES avec leur date,
 *     parce que ce sont des phrases et non des mots. Mise bout a bout, une
 *     liste de titres d'articles ne se lit plus — l'oeil ne sait pas ou une
 *     entree finit. Meme regle que `stacked` au pied de page.
 *
 * Le rythme vertical vient de `--rhythm-block` et `--rhythm-section`, jamais
 * d'un `padding` local : l'ecart appartient a ce qui SUIT, d'ou le `+` du
 * selecteur. Une `margin-bottom` sur toutes les sections en poserait une sous
 * la derniere, qui n'a rien apres elle.
 */

.sitemap {
    padding-bottom: var(--rhythm-block);
}

/* L'en-tete en surface `plain` n'emet NI rembourrage NI marge : c'est ce qui
   permet de le poser dans une carte ailleurs, et ce qui oblige a l'espacer
   ici. Sans ces deux regles, le titre touche le fil d'Ariane et le chapo
   touche le premier titre de section. */
.sitemap__head {
    padding-top: var(--rhythm-section);
}

.sitemap__head + .sitemap__block,
.sitemap__block + .sitemap__block {
    margin-top: var(--rhythm-block);
}

/* ── Les collections : nom a gauche, volume a droite ────────────────────── */

.sitemap-collections {
    margin: 0;
}

/* Un FILET entre les lignes, pas une bordure par ligne : l'oeil suit le nom
   jusqu'a son nombre sur une liste de seize entrees, et sans guide il perd la
   ligne des la troisieme. La bordure vit sur `+`, donc jamais sous la
   derniere. */
.sitemap-collections__row + .sitemap-collections__row {
    border-top: 1px solid var(--color-border);
}

.sitemap-collections__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding-block: var(--spacing-sm);
}

.sitemap-collections__name {
    margin: 0;
    font-weight: 500;
}

.sitemap-collections__count {
    flex: none;
    margin: 0;
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

/* L'unite ne se compare pas d'une ligne a l'autre : elle s'efface derriere le
   nombre, qui est la seule grandeur que l'oeil balaye. */
.sitemap-collections__unit {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* ── Un type de contenu : titre a filet, compte a droite ────────────────── */

.sitemap-types {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sitemap-types__item + .sitemap-types__item {
    margin-top: var(--rhythm-section);
}

.sitemap-types__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
}

/* Le compte est une information SECONDE : il ne doit pas peser autant que le
   nom du type, sinon on lit un nombre avant de lire une rubrique. */
.sitemap-types__count {
    margin-left: auto;
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-text-light);
    font-variant-numeric: tabular-nums;
}

/* ── Les liens ──────────────────────────────────────────────────────────── */

/* UN LIEN SE VOIT SANS SURVOL. Mesure du 2026-09-03 : la premiere version
   rendait `--color-text` sans decoration, c'est-a-dire `rgb(61, 70, 82)` — la
   couleur EXACTE du corps de texte. Rien ne distinguait un nom cliquable d'un
   nom qui ne l'est pas, et cette liste melange precisement les deux : les
   familles sans page de liste (« Pages institutionnelles », « Documents
   legaux ») sont rendues en texte nu.
 *
 * La convention de la grammaire pour un lien dans du contenu est celle de
 * `.ui-rendered a` : teinte primaire ET soulignement. La couleur seule ne
 * suffirait pas — WCAG 1.4.1 demande que l'information ne passe pas par la
 * seule couleur. */
.sitemap-link {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 1px;
}

.sitemap-link:hover,
.sitemap-link:focus-visible {
    color: var(--color-primary-dark);
    text-decoration-thickness: 2px;
}

/* Un type de contenu porte des TITRES, donc des phrases : une par ligne. */
.sitemap-types__links {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: var(--spacing-2xl);
}

.sitemap-types__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    /* `break-inside` : sans lui, une entree de deux lignes se coupe entre les
       colonnes et son titre se lit en deux morceaux distants. */
    break-inside: avoid;
    padding-block: var(--spacing-2xs);
}

.sitemap-types__date {
    flex: none;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    font-variant-numeric: tabular-nums;
}

/* Deux colonnes de titres demandent de la largeur : sous le palier tablette,
   une seule, sinon chaque entree se casse en trois lignes ET la page deborde
   de quatorze pixels a 375 px.
 *
 * LA VALEUR EST EN DUR, et ce n'est pas un oubli. `theme(--bp-tablet)` se
 * resout a la COMPILATION Tailwind, or une feuille de zone est servie telle
 * quelle par AssetMapper : le navigateur recoit `theme(--bp-tablet)`, ne sait
 * pas le lire, et jette la regle ENTIERE. Mesure du 2026-09-03 : la feuille
 * servie portait bien la media query, `columnCount` valait 2 a 375 px, et rien
 * ne le signalait — une at-rule invalide ne produit ni erreur ni avertissement.
 * 48em, c'est-a-dire 768 px, est la valeur de `--bp-tablet`. En `em` et non en
 * `px` : la requete suit alors la taille de police du navigateur.
 */
@media (width < 48em) {
    .sitemap-types__links {
        columns: 1;
    }
}