/* Sommaire et rubriques repliables des pages de contenu (js/rubriques.js) :
   anomalies, administration… Seules les règles du mécanisme vivent ici, la
   mise en page de chaque page reste dans sa propre feuille. */

/* Sommaire : dans la forme du fr-summary DSFR — bloc sur fond neutre, liste
   numérotée de liens vers les rubriques. */
.sommaire {
    background-color: var(--fond-alt);
    padding: 1rem 1.5rem;
    /* Cadre ajusté à la largeur de ses entrées et calé à gauche, sans
       dépasser la colonne ni le minimum des cadres de rubrique (38 rem). */
    width: fit-content;
    max-width: 38rem;
    box-sizing: border-box;
    margin: 0 auto 1.5rem 0;
}

.sommaire-entete {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.sommaire-titre {
    margin: 0;
    font-weight: 700;
}

/* Au-delà de dix lignes, rubriques-colonnes.js pose un column-count sur la
   liste : l'écart entre colonnes loge les numéros, qui débordent à gauche
   de chaque colonne comme du padding de la liste. */
.sommaire ol {
    margin: 0.625rem 0 0;
    padding-left: 1.25rem;
    column-gap: 2.5rem;
}

.sommaire li {
    /* Interligne en padding et non en marge : au saut de colonne forcé,
       Firefox conserve la marge haute du premier li de la colonne
       suivante (Chromium la tronque) et les colonnes se décalaient de
       0.25rem ; le padding, lui, voyage avec l'entrée — premières
       lignes alignées dans tous les moteurs. */
    margin: 0;
    padding: 0.125rem 0;
    /* Une entrée reste entière dans sa colonne, mais une partie du
       sommaire des statistiques (li portant une sous-liste) peut se
       répartir sur plusieurs colonnes. */
    break-inside: avoid;
}

.sommaire li:has(> ol) {
    break-inside: auto;
}

.sommaire a {
    color: var(--accent);
}

.sommaire a:hover {
    color: var(--accent-hover);
}

/* Bouton « Tout déplier / Tout replier », posé par rubriques.js : forme
   du bouton secondaire DSFR en petite taille (filet d'accent, fond nu). */
.sommaire-bascule {
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.5rem;
    padding: 0 0.75rem;
    color: var(--accent);
    background: none;
    border: 1px solid var(--accent);
    cursor: pointer;
}

.sommaire-bascule:hover {
    color: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* Colonnes des rubriques sur grand écran : une grille CSS en lignes, dans
   l'ordre du document — le nombre de pistes suit data-colonnes, posé par
   js/rubriques-colonnes.js, qui enveloppe les cadres. Chaque cadre garde
   sa hauteur propre (align-items) : déplier un cadre allonge sa seule
   ligne, les lignes suivantes descendent en bloc, rien ne change de
   colonne. L'espacement vertical reste la marge des cadres (comptée dans
   leur aire de grille) : pas de row-gap, qui s'y ajouterait. */
.rubriques-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 2rem;
    align-items: start;
}

html[data-colonnes="2"] .rubriques-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-colonnes="3"] .rubriques-grille {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Rubrique flottante (illustrée) : pleine largeur, au fil de la grille. */
.rubriques-grille > .rubrique-flottante {
    grid-column: 1 / -1;
}

/* Rubrique : dans la forme de la « mise en avant » (fr-callout) du DSFR —
   fond teinté de la gamme d'accent, bande verticale de 0.25rem, ni cadre ni
   arrondi. */
.rubrique {
    border-left: 0.25rem solid var(--accent);
    padding: 1.5rem;
    margin: 0 0 1.5rem;
    background-color: var(--accent-fond);
    /* L'arrivée par ancre cale la rubrique sous le bandeau collant. */
    scroll-margin-top: 3.5rem;
}

/* Corps du titre de mise en avant DSFR (1.375rem / 1.75rem). */
.rubrique h2 {
    margin: 0 0 0.625rem;
    font-size: 1.375rem;
    line-height: 1.75rem;
}

/* Rubriques repliables (rubriques.js) : le titre devient un bouton
   d'accordéon, le corps est masqué par l'attribut hidden ; l'espace sous le
   titre passe du h2 au corps pour que le cadre replié s'arrête au titre. */
.rubrique.repliable h2 {
    margin: 0;
}

.rubrique.repliee {
    cursor: pointer;
}

.rubrique-titre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    /* Titre copiable : sans cette levée, Firefox exclut le texte des
       boutons de la sélection et du copié-collé. */
    -webkit-user-select: text;
    user-select: text;
}

/* Chevron d'accordéon, pointe en bas replié, en haut déplié. */
.rubrique-titre::after {
    content: "";
    flex: none;
    width: 0.4em;
    height: 0.4em;
    margin-right: 0.2em;
    border-right: 0.125rem solid var(--accent);
    border-bottom: 0.125rem solid var(--accent);
    transform: rotate(45deg);
}

.rubrique-titre[aria-expanded="true"]::after {
    transform: rotate(-135deg);
}

.rubrique-corps {
    margin-top: 0.625rem;
}