/* ══════════════════════════════════════════════════════════════
   Glossaire · index alphabétique
   ══════════════════════════════════════════════════════════════
   Maquette « Fonctionnalités ANCESU », branche `glossaire`.

   Deux colonnes : l'index à gauche, les repères à droite. La bande
   alphabétique en tête de l'index, puis une section par lettre, chacune
   ouverte par sa barre et portant une FEUILLE DE RANGÉES — une carte blanche
   dont les entrées sont séparées d'un filet.

   CE QUI A DISPARU AVEC LA BASCULE, et pourquoi :

   · la CARTE de terme (`.glossary-card*`) et ses deux modes. Une entrée porte
     un nom court, sa forme développée, une définition et ses autres
     appellations : ça se lit sur une ligne large, pas dans un cadre de 292 px.
     C'est déjà pour cette raison que la grille s'y limitait à trois colonnes
     quand les autres listes en tiennent quatre ;
   · la bande alphabétique rangée DANS le panneau de filtres
     (`.glossary-alphabet`), en cases de 28 px. Ce n'est pas un filtre, c'est
     une navigation, et 28 px n'atteint pas la taille de cible du RGAA.

   La fiche d'un terme (`.glossary-term__*`) et le rebond alphabétique
   (`.glossary-nearby*`) vivent plus bas et ne bougent pas ici.
   ══════════════════════════════════════════════════════════════ */

/* LES DEUX COLONNES VIENNENT DE `content.css` (`.content-list__layout`,
   `__side`, `__rail`, `__main`), comme sur /actualites, /evenements et
   /ressources. Cette feuille en avait une a elle (`.glossary-layout`) : elle
   refaisait une grille que la grammaire posait deja, et elle n'avait AUCUN
   equivalent du tiroir modal sous le palier — donc pas de responsive pour les
   filtres. Le rail partage le donne sans une ligne de plus. */

/* LA BANDE ALPHABÉTIQUE a quitté cette feuille le 2026-09-02 : elle vit dans
   `components/alpha-band.css`, partagée avec le mur des portraits, qui la rend
   à l'identique. Le gabarit passe par `components/_alpha_band.html.twig`. */

/* ── LES SECTIONS PAR LETTRE ── */
.glossary-sections {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}






/* ── LA FEUILLE DE RANGÉES ──
   Même objet que `.resource-sheet` de /ressources et que `.helpcenter__sheet`
   du centre d'aide. TROIS consommateurs, donc une brique de grammaire à
   extraire : c'est le lot décidé avec Luc, à faire dans un commit à part parce
   qu'il touche /ressources, écrit par une session voisine. */
.glossary-sheet {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: var(--surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    /* Les angles rognent les rangées, sinon la première et la dernière
       débordent du rayon de la carte. */
    overflow: hidden;
}

/* La grille porte les trois zones : la case du nom, le corps, le chevron. La
   case et le chevron gardent leur largeur, le corps prend le reste et peut
   descendre sous la largeur de son contenu (`minmax(0, 1fr)`). */
.glossary-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: background-color var(--transition-fast);
}

/* Pas de filet sur la première : sous la bordure de la carte, les deux
   dessinent deux traits à un pixel d'écart. */
.glossary-sheet > li:first-child .glossary-row {
    border-top: 0;
}

/* Chaque rangee est une ANCRE (`#terme-{slug}`). La barre de navigation est
   collante : sans cette marge, l'ancre depose la rangee derriere elle. */
.glossary-sheet > li {
    scroll-margin-top: 6rem;
}

.glossary-row:hover,
.glossary-row:focus-visible {
    background: var(--color-bg-light);
}

/* ── La case du nom ──
   Chasse fixe, comme tous les repères du site. Elle porte le NOM de l'entrée,
   qui est un sigle dans quarante cas sur soixante-trois — mesuré. Les treize
   entrées dont le nom est une phrase (« Arrêt cardio-respiratoire », vingt-cinq
   signes) l'y font tenir sur trois lignes : d'où `min-height` plutôt que
   `height`, et le retour à la ligne autorisé.

   LARGEUR FIXE, et c'est ce qui compte : sans elle les titres ne démarrent pas
   au même endroit d'une rangée à l'autre et la colonne de texte ondule sur
   toute la longueur de la feuille. */
.glossary-row__stamp {
    display: grid;
    place-items: center;
    flex: none;
    width: 5rem;
    min-height: 3.5rem;
    padding: var(--spacing-2xs);
    border-radius: var(--radius-md);
    background: var(--color-bg-light);
    font-family: var(--font-data);
    /* 11 px et non 13 : mesure, la case fait 80 px moins 8 de rembourrage, soit
       72 px de texte. A 13 px la chasse fixe donne 7,8 signes par ligne, et
       « Débriefing » (10) se coupait en plein mot — « Débriefin / g ». A 11 px
       elle en donne 10,9, et les quatre noms de dix signes du glossaire tiennent
       sur une ligne. */
    font-size: var(--font-size-2xs);
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-primary);
    text-align: center;
    /* `break-word` et non `anywhere` : la coupure en plein mot est un DERNIER
       recours, pas le comportement par defaut. `anywhere` autorise le navigateur
       a couper meme quand un retour a la ligne suffirait — c'est ce qui coupait
       un mot de dix signes alors que la case en tient trois lignes. */
    overflow-wrap: break-word;
}

.glossary-row__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
}

.glossary-row__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.glossary-row__eyebrow:empty {
    display: none;
}

.glossary-row__type {
    font-size: var(--font-size-2xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.glossary-row__title {
    font-family: var(--font-title);
    font-size: var(--font-size-base);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary-dark);
}

.glossary-row__text {
    font-size: var(--font-size-xsm);
    line-height: 1.5;
    color: var(--color-text-light);
}

/* Les autres appellations. Sobres et monochromes : la couleur y désignerait une
   famille qui n'existe pas, ce sont juste d'autres façons de dire la même
   chose. */
.glossary-row__synonyms {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2xs);
    margin-top: var(--spacing-2xs);
}

.glossary-row__synonym {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem var(--spacing-xs);
    border-radius: var(--radius-sm);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    font-size: var(--font-size-2xs);
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text-light);
}

.glossary-row__action {
    display: flex;
    align-items: center;
    flex: none;
    align-self: center;
    color: var(--color-text-light);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.glossary-row:hover .glossary-row__action {
    transform: translateX(3px);
    color: var(--color-primary);
}

/* ── Sous 48 em : la case du nom passe AU-DESSUS ──
   À 375 px, cinq rem de case plus deux gouttières ne laissent que 200 px au
   texte, soit une définition à quatre mots par ligne. */
@media (max-width: 47.99em) {
    .glossary-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "stamp  action"
            "body   body";
        row-gap: var(--spacing-sm);
    }

    .glossary-row__stamp {
        grid-area: stamp;
        width: auto;
        min-height: 0;
        justify-self: start;
        padding: var(--spacing-2xs) var(--spacing-xs);
    }

    .glossary-row__body { grid-area: body; }
    .glossary-row__action { grid-area: action; }
}

/* ══════════════════════════════════════════════════════════════
   Glossaire · fiche d'un terme
   Enveloppe partagee : `_content_header` (content.css) puis la
   colonne de lecture bornee de `article.css`. Ne reste ici que ce
   qui est propre au lexique — synonymes, contenus associes, et le
   rebond vers les termes voisins.
   Le rail gauche historique (`.glossary__layout`, `.glossary__sidebar`,
   `.glossary__filter*`) a ete retire avec la migration : il repetait
   les synonymes deja affiches et n'offrait qu'un lien de retour.
   ══════════════════════════════════════════════════════════════ */

/* ── Synonymes ──
   Petit bloc d'identification en tete de colonne : ce sont les autres
   noms du terme, pas une metadonnee de bas de page. */
/* PAS DE MARGE BASSE. L'ecart qui separe ce bloc du suivant appartient au
   SUIVANT — celui qui porte le filet —, jamais a lui-meme. Mesure avant
   correction : 104 px entre « Aussi appele » et « Ou ce terme est mentionne »,
   soit trois ecarts empiles pour une seule frontiere (32 de marge basse ici,
   48 de marge haute la-bas, 32 de rembourrage sous le filet). C'est la regle
   deja ecrite pour les etiquettes de la barre de liste : une marge ne connait
   qu'une direction, un ecart porte par le conteneur suivant se lit une fois. */
.glossary-term__aka {
    margin-bottom: 0;
}

.glossary-term__aka-title {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--eyebrow-size);
    font-weight: var(--eyebrow-weight);
    letter-spacing: var(--eyebrow-tracking);
    text-transform: uppercase;
    color: var(--color-text-light);
}

.glossary-term__synonyms {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.glossary-term__synonym {
    padding: 0.25rem 0.7rem;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    background: var(--color-primary-light);
    border-radius: 100px;
}

/* ── Corps editorial (rare : aucun terme n'en porte aujourd'hui, mais
   le champ est vivant cote administration). ── */
.glossary-term__body {
    margin-bottom: var(--spacing-2xl);
}

/* ── Contenus associes ── */
.glossary-term__related {
    /* Le meme ecart de part et d'autre du filet : il separe deux sections, il
       n'en pousse pas une. `2xl` au-dessus contre `xl` en dessous decentrait le
       trait de seize pixels, ce qui le faisait lire comme la fin du bloc
       precedent plutot que comme une frontiere. */
    /* DANS UNE CARTE, LE RYTHME EST CELUI DE LA CARTE. `.article-single__card`
       est une colonne flex a `gap: 24px` : une `margin-top` de 32 s'y AJOUTAIT,
       56 px mesures au-dessus du filet contre 32 en dessous — le trait
       decentre, donc lu comme la fin du bloc precedent. C'est le defaut que la
       regle du rythme decrit, rencontre ici a l'interieur d'un conteneur plutot
       qu'entre deux blocs.

       La gouttiere de la carte porte le dessus, le rembourrage porte le dessous,
       a la meme valeur : le filet retrouve son axe. */
    margin-top: 0;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.glossary-term__related-title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text);
}

.glossary-term__related-subtitle {
    margin: var(--spacing-xs) 0 var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.glossary-term__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
}

.glossary-term__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0.35rem 0.85rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-light);
    background: var(--color-bg-light);
    border-radius: 100px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.glossary-term__tab:hover {
    color: var(--color-primary);
    background: var(--color-primary-light);
}

.glossary-term__tab.is-active {
    color: #fff;
    background: var(--color-primary);
}

.glossary-term__tab-count {
    font-size: var(--font-size-xs);
    font-weight: 700;
    opacity: 0.75;
}

.glossary-term__contents {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.glossary-term__content-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.glossary-term__content-card:hover {
    background: var(--color-primary-light);
}

/* `min-width: 0` sur le conteneur ET sur ses enfants : sans lui, un
   element de flex ne descend pas sous la largeur de son contenu et
   l'ellipsis ne coupe rien. */
.glossary-term__content-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.glossary-term__content-type {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.glossary-term__content-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
}

.glossary-term__content-excerpt {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text-light);
}

.glossary-term__content-date {
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.glossary-term__content-chevron {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--color-text-light);
    transition: transform 0.15s ease, color 0.15s ease;
}

.glossary-term__content-card:hover .glossary-term__content-chevron {
    color: var(--color-primary);
    transform: translateX(2px);
}

.glossary-term__empty {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--color-text-light);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
}

/* ── « Où ce terme est mentionné » ──
   Les resultats reutilisent la grammaire de `/recherche`
   (`search/_result_item.html.twig`) : ne reste ici que l'enveloppe. */
.glossary-term__mentions {
    /* Le meme ecart de part et d'autre du filet : il separe deux sections, il
       n'en pousse pas une. `2xl` au-dessus contre `xl` en dessous decentrait le
       trait de seize pixels, ce qui le faisait lire comme la fin du bloc
       precedent plutot que comme une frontiere. */
    /* DANS UNE CARTE, LE RYTHME EST CELUI DE LA CARTE. `.article-single__card`
       est une colonne flex a `gap: 24px` : une `margin-top` de 32 s'y AJOUTAIT,
       56 px mesures au-dessus du filet contre 32 en dessous — le trait
       decentre, donc lu comme la fin du bloc precedent. C'est le defaut que la
       regle du rythme decrit, rencontre ici a l'interieur d'un conteneur plutot
       qu'entre deux blocs.

       La gouttiere de la carte porte le dessus, le rembourrage porte le dessous,
       a la meme valeur : le filet retrouve son axe. */
    margin-top: 0;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

/* PAS DE SECOND FILET SOUS CELUI DE L'EN-TETE. L'en-tete en carte ferme sur sa
   propre ligne de service, filet compris ; la section qui le suit ajoutait le
   sien, plus quatre-vingts pixels de marge — deux traits horizontaux separes
   d'un vide, sur une fiche qui n'a rien entre les deux.

   Le cas est la NORME et non l'exception : aucun terme du glossaire ne porte de
   corps editorial, et les autres appellations vivent desormais dans le rail. La
   premiere section rencontree suit donc toujours l'en-tete directement. */
.content-header + .glossary-term__related,
.content-header + .glossary-term__mentions {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.glossary-term__mention-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.glossary-term__mentions-more {
    margin: var(--spacing-lg) 0 0;
}

.glossary-term__mentions-more a {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.glossary-term__mentions-more a:hover {
    text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════
   « Poursuivre dans le glossaire » — voisins alphabetiques
   Rendu DANS un `.container`, borne a la meme 62 rem que l'en-tete
   et la colonne de lecture : c'est ce qui aligne les trois blocs sur
   un seul bord gauche.
   ══════════════════════════════════════════════════════════════ */
.glossary-nearby {
    max-width: 62rem;
    margin: var(--spacing-xl) auto var(--spacing-3xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border);
}

.glossary-nearby__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
}

/* Meme traitement que les autres blocs de rebond (« A lire aussi »,
   « Autres portraits », « Autres ressources ») : capitales, graisse legere,
   interlettrage. */
.glossary-nearby__title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text);
}

.glossary-nearby__all {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.glossary-nearby__all:hover {
    text-decoration: underline;
}

/* 16 rem et non 15 : sur la colonne bornee a 62 rem, 15 rem donne quatre
   pistes, donc une seconde rangee de deux cartes orphelines. A 16 rem la
   grille tient en trois, et les six voisins se rangent en 3 + 3. */
.glossary-nearby__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.glossary-nearby__card {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    height: 100%;
    padding: var(--spacing-md);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.glossary-nearby__card:hover,
.glossary-nearby__card:focus-visible {
    background: var(--color-primary-light);
}

.glossary-nearby__name {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-primary);
}

.glossary-nearby__description {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text-light);
}

/* ══════════════════════════════════════════════════════════════
   Glossaire · @media print
   Tweaks spécifiques aux listings par lettre et cartes terme.
   La cartouche, les hides universels (nav, sidebar, toolbar, hero…)
   et la mise en page A4 viennent de `styles/components/print.css`.
   ══════════════════════════════════════════════════════════════ */
@media print {
    /* Re-affiche le layout content-list à plat — la brique print.css
       cache `.content-list__sidebar` et `.content-list__toolbar`, mais
       laisse `.content-list__main` qui doit s'étaler sur toute la largeur. */
    .content-list,
    .content-list__main {
        background: #fff;
        padding: 0;
        margin: 0;
    }

    .content-list__layout {
        display: block;
    }

    /* Sections par lettre — on autorise la coupe inter-pages (sinon la
       lettre A qui pèse 10 termes pousse tout le contenu sur la
       page 2). Le `break-after: avoid` du heading (hérité de print.css)
       suffit à éviter une lettre orpheline en bas de page. */
    .glossary-section {
        margin-top: 0.4em;
    }

    /* La barre de section perd son filet et sa pastille : sur papier, la lettre
       et son compte suffisent, et le filet horizontal se confondrait avec la
       bordure de la feuille. */



    .glossary-section__count,

    /* La bande alphabetique est une NAVIGATION : elle ne survit pas au papier,
       ou l'on ne peut suivre aucune ancre. Le rail de filtres et sa colonne
       sont masques par `print.css` — qui ne traitait que l'ancien nom
       `.content-list__sidebar` et laissait donc partir le rail des QUATRE
       listes du site. Corrige la-bas, pour les quatre a la fois : c'est le
       benefice d'etre passe sur la grammaire partagee plutot que sur une
       grille a soi. */
    /* ── Fiche terme `/glossaire/{slug}` — hides print ──
       Le cartouche `_print_page` porte déjà titre + description + QR.
       On masque les éléments écran qui doublonnent ou n'apportent rien
       sur papier : les onglets de filtre, les contenus associés (des liens
       qu'on ne peut pas suivre sur une feuille) et le rebond alphabétique.
       Les synonymes RESTENT : ce sont les autres noms du terme, donc une
       information de référence, pas de la navigation. */
    .glossary-term__tabs,
    .glossary-term__related,
    .glossary-term__mentions,
    .glossary-nearby {
        display: none !important;
    }

    /* Rangees — sobre, dense. La feuille perd son cadre : sur papier, un cadre
       par lettre coute une marge a chaque section pour ne rien dire. */
    .glossary-sheet {
        border: 0 !important;
        border-radius: 0;
        background: none !important;
    }

    .glossary-row {
        display: block;
        padding: 0.15em 0;
        border-top: 0 !important;
        background: none !important;
        line-height: 1.3;
    }

    .glossary-row__stamp {
        display: inline;
        width: auto;
        min-height: 0;
        padding: 0;
        background: none !important;
        color: #000 !important;
        font-weight: 700;
        font-size: 9pt;
    }

    .glossary-row__stamp::after {
        content: ' — ';
    }

    .glossary-row__title {
        display: inline;
        color: #000 !important;
        font-size: 9pt;
    }

    .glossary-row__text {
        display: block;
        margin: 0;
        line-height: 1.3;
        font-size: 8pt;
    }

    /* Sur papier on retire le chevron, le type et les autres appellations : le
       nom, sa forme developpee et sa definition suffisent a l'usage de
       reference. Le reste reste disponible en ligne, par le QR du cartouche. */
    .glossary-row__action,
    .glossary-row__eyebrow,
    .glossary-row__synonyms {
        display: none !important;
    }
}