/* Page « Glossaire » : le tableau des sigles. Le gabarit de page (bandeau,
   colonne de lecture, pied) vient de contenu.css, le sommaire de
   rubriques.css, comme sur les autres pages de contenu — ne restent ici que
   les règles propres au tableau et à son sommaire alphabétique. */

/* La page est longue : le sommaire reste collé sous le bandeau du site
   (dont SiteMenu.js publie la part visible) pendant que le tableau défile
   dessous. Pleine largeur de colonne — fit-content laisserait les lignes
   du tableau réapparaître tronquées à sa droite — et sous le tiroir du
   menu (z-index 30). */
.sommaire {
    position: sticky;
    top: var(--hauteur-entete, 45px);
    z-index: 20;
    width: auto;
    max-width: none;
}

/* Sommaire alphabétique : les initiales en ligne, dans le cadre sommaire
   commun (rubriques.css, qui pose marges et retraits sur `.sommaire ol` —
   d'où le sélecteur qualifié). */
.sommaire ol.sommaire-lettres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin: 0.625rem 0 0;
    padding: 0;
    list-style: none;
}

/* Les intitulés les plus longs dépassent la largeur d'un téléphone : le
   tableau défile dans son cadre plutôt que d'élargir la page. */
.tableau-defilant {
    overflow-x: auto;
}

/* Taille de lecture (1 rem) : depuis que l'explication s'étale sous
   l'intitulé, la page se lit comme de la prose — le 0.875rem des contenus
   denses (statistiques, tableaux des anomalies) y serait trop petit. */
table.sigles {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}

table.sigles tbody th,
table.sigles tbody td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--bordure);
    vertical-align: baseline;
}

table.sigles tbody th {
    text-align: left;
    white-space: nowrap;
    font-family: monospace;
    font-weight: 600;
    color: var(--accent);
}

/* Intertitre alphabétique : une ligne pleine largeur qui ouvre chaque tbody.
   Sélecteur plus précis que celui des sigles ci-dessus, dont il annule la
   fonte à chasse fixe. */
table.sigles tbody tr.initiale th {
    padding: 1.5rem 0.75rem 0.25rem;
    border-bottom: 1px solid var(--bordure);
    font-family: inherit;
    font-size: 1.125rem;
    color: var(--texte-mention);
}

/* L'intitulé occupe seul sa ligne ; l'explication, dessous, se distingue par
   la couleur de mention et un léger retrait d'interligne. */
table.sigles .explication {
    margin-top: 0.25rem;
    color: var(--texte-mention);
}

/* Ligne visée par une ancre (lien « glossaire » d'une page de contenu ou
   lettre du sommaire) : surlignée sur le fond d'accent pour être retrouvée
   d'un coup d'œil. L'arrivée par ancre cale la ligne sous le bandeau ET le
   sommaire collants — la hauteur de celui-ci est publiée par le script de
   la page, elle varie avec le repli des lettres et l'échelle de texte. Le
   repli (6rem, sa hauteur sur une ligne) ne sert que si un cache sert la
   page sans le script qui publie — les ancres restent alors à peu près
   calées au lieu de disparaître sous le sommaire. */
table.sigles tbody tr {
    scroll-margin-top: calc(var(--hauteur-entete, 45px)
        + var(--hauteur-sommaire, 6rem) + 0.5rem);
}

table.sigles tbody tr:target {
    background-color: var(--accent-fond);
}