/*
 * En-tete editorial (`components/_content_header.html.twig`) — 32 appelants.
 *
 * @grammaire v2
 *
 * Extrait de `zones/content.css` : c'est l'en-tete de page le plus partage du
 * site public, et il vivait dans une feuille de ZONE servie brute. Aucune
 * autre surface ne pouvait le reutiliser, et il echappait au controle du CSS
 * compile.
 *
 * SIX REGLES SONT VOLONTAIREMENT RESTEES DANS LA ZONE, parce qu'elles ne
 * decrivent pas le composant mais son VOISINAGE dans une page :
 *   · `.content-header + .content-list` — la gouttiere entre l'en-tete et la
 *     liste qui le suit ; elle appartient a la page, pas a l'en-tete ;
 *   · cinq regles `.content-header__actions .share-dropdown*` — l'ajustement
 *     du menu de partage QUAND il est pose dans cet en-tete. Elles couplent
 *     deux composants ; les emporter ici ferait entrer le partage dans la
 *     grammaire par la bande.
 *
 * ORDRE DE LIVRAISON PRESERVE : ce bloc etait a la FIN de `content.css`. La
 * feuille est donc liee APRES elle dans les gabarits, pas avant — deplacer des
 * regles change la cascade, et le compile peut garder exactement la meme
 * taille en changeant de contenu (mesure faite ailleurs le meme jour).
 */

/* ══════════════════════════════════════════════════════════════
   En-tête éditorial en card (`components/_content_header.html.twig`)

   Alternative sobre au hero navy `_list_hero` pour les fiches de contenu
   institutionnel. Le titre et son trait signature tiennent à gauche, les
   actions de partage à droite ; l'image de couverture vit SOUS la card,
   jamais en fond (un texte sur photo impose un voile sombre, donc la
   lourdeur qu'on cherchait justement à retirer).
   ══════════════════════════════════════════════════════════════ */
.content-header {
    /* 16 px, la valeur de la maquette entre le fil d'Ariane et la carte de
       titre. Il en posait 32, et comme la barre du fil d'Ariane ne pose plus
       rien en bas, ces 32 px etaient l'ecart entier : deux fois trop pour
       separer une ligne de texte de la carte qu'elle annonce.

       Constant, sans variante telephone : sous 48 em le fil d'Ariane est
       masque, et ce rembourrage devient l'ecart sous la barre de navigation,
       ou 16 px est exactement ce qu'il faut. */
    padding-top: var(--spacing-md);
    /* Le bord bas de la card touche sinon presque la première ligne du texte,
       et les deux blocs se lisent comme un seul.

       `--card-gap` et non `--spacing-lg` : c'est l'ecart entre deux cartes
       empilees, et il retrecit sur telephone. La valeur de bureau est la meme
       qu'avant, au pixel. */
    padding-bottom: var(--card-gap);
}

/* L'en-tête est TOUJOURS une card — avec l'image du contenu quand il y en a
   une, sur un dégradé navy sinon.
   Posé à plat sur le fond clair, le sur-titre en couleur de section n'était pas
   lisible : le vert de marque y donne 2,08:1 quand 4,5 est requis à cette
   taille. L'assombrir suffisait à passer le seuil, mais donnait un olive terne
   qui n'est plus la couleur de la marque. Sur fond sombre, le blanc règle la
   question définitivement (11,5:1) — et les deux formats d'en-tête partagent
   alors exactement la même grammaire. */
.content-header__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    position: relative;
    /* `isolation` fabrique un plan d'empilement pour contenir l'image et le
       voile — mais elle y ENFERME aussi le menu « Partager » et son
       `z-index: 60`, qui ne vaut plus rien hors de la card. Sans `z-index`
       explicite ici, la card se peint donc à son rang dans le document, donc
       SOUS le sommaire, qui vient après elle. La valeur reste loin sous la
       barre de navigation (1000), qui doit continuer à passer devant. */
    isolation: isolate;
    z-index: 20;
    /* PAS d'`overflow: hidden` : il rognait le menu déroulant, qui s'ouvre
       sous le bouton et dépasse du bas de la card. Le rayon est porté par
       l'image et le voile, les seuls à en avoir besoin. */
    /* Ni surface, ni bordure, ni rayon, ni rembourrage, ni ombre : `ui-card
       ui-card--lead`, emise par le gabarit, les porte toutes.

       Ce bloc les redeclarait — c'etait la carte CLAIRE de la refonte v2, qui a
       remplace un degrade navy anterieur au plateau. La bascule etait juste, la
       facon de l'ecrire non : le quatuor surface/bordure/rayon/ombre est
       recopie a la main dans 26 selecteurs du depot, et en ajouter un 27e
       revenait a creer la divergence qu'on passe ses journees a resorber.

       Ce qui reste ici est ce que la carte ne sait pas : la disposition, le
       plan d'empilement, et la consequence de l'encre navy — le sur-titre en
       couleur de section redevient un probleme de contraste sur fond clair,
       d'ou la pastille grise de `.content-header__eyebrow`. */
    color: var(--color-text);
}

/* Sur l'image, la carte n'est pas emise : la photo et son voile font la
   surface. Le fond sombre reste donc declare ici. */

/* Sur l'image, TOUT le texte repasse en blanc : le voile sombre est alors le
   fond, et c'est lui qui décide. La règle valait auparavant pour la card unie,
   qui était sombre elle aussi. */
.content-header__body--hero .content-header__title,
.content-header__body--hero .content-header__eyebrow,
.content-header__body--hero .content-header__kicker,
.content-header__body--hero .content-header__meta,
.content-header__body--hero .content-header__stat-value,
.content-header__body--hero .content-header__stat-label,
.content-header__body--hero .content-header__tag {
    color: var(--color-on-primary);
}

/* Le trait signature reprend la couleur de SECTION, ce que la card navy
   interdisait : `--color-section-ressources` vaut exactement `--color-primary`,
   donc le trait s'y peignait dans son propre fond — invisible sur toute la
   section Ressources. Sur la carte claire, les cinq couleurs se détachent.

   Le vert de marque y donne 2,3:1 quand un objet graphique en demande 3. C'est
   la maquette qui en décide ainsi, et l'identité de rubrique reste portée par
   la barre de navigation et par le sur-titre : le trait n'est pas le seul
   véhicule de l'information. À rouvrir avec le contraste des jetons, pas ici.

   Sur l'image, le fond redevient sombre : le trait y reprend le vert, qui est
   la seule des cinq à passer le seuil sur navy (4,5:1). */
.content-header__body .content-header__title::after {
    background: var(--section-color, var(--color-section-ancesu));
}

.content-header__body--hero .content-header__title::after {
    background: var(--color-section-ancesu);
}

/* Sur l'image, le sur-titre perd sa pastille : un aplat clair posé sur une
   photo sombre se lit comme une étiquette collée, et le blanc suffit là. */
.content-header__body--hero .content-header__eyebrow {
    padding: 0;
    background: none;
}

.content-header__body--hero a.content-header__tag:hover {
    color: var(--color-on-primary);
    text-decoration-thickness: 2px;
}

/* ── Sur-titre, thématiques, titre, ligne de service, chapô ──
   UN SEUL style pour toute la ligne de qualification : sur-titre de section et
   thématiques partagent le même traitement. Ils viennent du même vocabulaire —
   en distinguer un annoncerait une hiérarchie qui n'existe pas.

   Ni l'un ni l'autre n'est peint en couleur de SECTION sur la carte claire, et
   c'est mesuré : le vert de marque y donne 2,3:1 quand un texte de cette taille
   en demande 4,5. C'est le défaut que la card navy réglait par le blanc, et il
   revient intact dès qu'on éclaircit le fond. La maquette y répond par une
   PASTILLE grise pour le sur-titre ; la couleur de section n'est plus portée
   que par le trait signature, qui est un objet graphique et non du texte. */
.content-header__eyebrow,
.content-header__tag {
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.content-header__eyebrow {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: var(--spacing-2xs) var(--spacing-sm);
    border-radius: var(--radius-pill);
    background: var(--color-bg-light);
    color: var(--color-text);
}

/* Le sur-titre de LISTE : point de rubrique puis texte nu, sans pastille. La
   pastille resout un probleme de contraste que le point ne pose pas — le point
   est un objet graphique, pas du texte, et le libelle reste en encre
   secondaire. */
.content-header__eyebrow-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.content-header__eyebrow--plain {
    padding: 0;
    background: none;
    color: var(--color-text-light);
    letter-spacing: 0.1em;
}

.content-header__tag {
    color: var(--color-primary);
}

a.content-header__tag {
    text-decoration: underline;
    text-underline-offset: 3px;
}

a.content-header__tag:hover {
    color: var(--color-navy);
}

/* Titre de page — composant 23.

   GRAISSE 700 et non 800 : c'est la valeur du niveau « Titre de page » de
   l'échelle typographique, et celle de tous les autres titres du site. À 800,
   le titre de page était le seul caractère du site à ce gras — il ne se lisait
   pas comme le sommet d'une hiérarchie mais comme une police différente.

   `letter-spacing: -0.022em` : un titre de 42 px composé à l'espacement par
   défaut paraît lâche. Le resserrement ne se voit pas, il se sent.

   Borné à 24 caractères : au-delà, la ligne d'un titre en 42 px devient plus
   longue que ce que l'œil suit d'un balayage. */
.content-header__title {
    margin: 0;
    max-width: 24ch;
    font-size: clamp(1.875rem, 1.2rem + 2vw, 2.625rem);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.06;
    color: var(--color-navy);
    /* `balance` égalise la longueur des lignes d'un titre long, au lieu de
       remplir la première et de laisser un reste court dessous. Il travaille
       AVEC le filtre `fr_typo`, il ne le remplace pas : il ne connaît pas le
       français et couperait volontiers avant un deux-points. */
    text-wrap: balance;
    /* Un mot plus large que la colonne déborderait sinon hors de l'écran. */
    overflow-wrap: break-word;
}

/* Titre long (plus de 90 signes, mesure côté serveur) : un cran en dessous.
   Sans cela, un intitulé de document réglementaire remplit quatre lignes à
   2,5 rem et la card devient un pavé de titre. La borne haute passe de 2,5 à
   1,875 rem ; la borne basse ne bouge pas, il n'y a rien à gagner à rapetisser
   encore sur téléphone. */
.content-header__title--long {
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.875rem);
    line-height: 1.2;
}

/* 56 x 5, les dimensions de `ui-rule--lg` — celles de tous les traits de
   titre du site. Il était à 48 x 4,8 : deux traits de tailles voisines pour
   le même rôle, l'écart trop faible pour être voulu, trop réel pour passer
   inaperçu quand deux titres se suivent. */
/* Le filet du titre de PAGE prend le rang `xl` de l'echelle. Il portait 56 × 5
   en dur, c'est-a-dire la taille du titre de SECTION : le sommet de la
   hierarchie et son cran suivant etaient soulignes du meme trait. La maquette
   v2 pose 72 × 6 ici, et c'est ce que `--rule-xl` nomme. */
.content-header__title::after {
    content: '';
    display: block;
    width: var(--rule-xl-w);
    height: var(--rule-xl-h);
    margin-top: var(--spacing-ms);
    border-radius: var(--radius-pill);
    background: var(--section-color, var(--color-primary));
}

/* ── Ligne de service : métadonnées à gauche, actions à droite ──
   La règle de BASE vient d'abord, la variante large ensuite : à spécificité
   égale, la dernière déclaration l'emporte. */
.content-header__utility {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm) var(--spacing-lg);
}

/* ── LA LIGNE DE SERVICE D'UNE FICHE, encadree de filets ──
   La maquette de la fiche d'article reunit sur UNE rangee ce qui parle du
   document (dates, duree de lecture, auteur) et ce qu'on peut en faire
   (partager, imprimer) : les premiers a gauche, les secondes poussees a droite,
   le tout borde de deux filets fins.

   Sur une fiche, cette rangee est une FRONTIERE — elle separe l'annonce du
   texte lui-meme. Les filets le disent ; empilee sans eux, elle se lisait comme
   un troisieme paragraphe d'en-tete.

   Elle ne s'applique qu'a `--in-card` : sur une page de LISTE, la meme rangee
   n'a rien a separer.

   `--in-card` ET NON `--article` : ce modificateur nomme un TRAITEMENT — un
   en-tete pose DANS la carte de lecture — et non un type de page. Renomme le
   2026-08-29, quand le guide a rejoint le meme squelette : il aurait fallu
   soit lui faire passer `article`, ce qui est faux dans le balisage, soit
   dupliquer ces vingt-sept regles sous un second nom. Toute fiche qui pose son
   en-tete dans la carte le passe, quel que soit son type. */
.content-header--in-card .content-header__utility {
    padding-block: var(--spacing-md);
    border-block: 1px solid var(--color-border);
}

/* LA LIGNE D'INFORMATIONS PREND SA PROPRE RANGEE, les commandes tombent dessous,
   a gauche. C'est ce que rend la maquette, et c'est ce qu'il faut : serrees sur
   une seule rangee, les cinq informations se cassaient en TROIS lignes de deux
   mots — mesure — parce que les boutons leur laissaient un tiers de la largeur.

   `flex: 1 1 100%` et non `nowrap` sur le conteneur : forcer la rangee unique
   comprimait la liste au lieu de la laisser respirer. Ici elle occupe la
   largeur, se lit d'un trait, et ce qui suit passe naturellement a la ligne. */
.content-header--in-card .content-header__meta {
    flex: 1 1 100%;
}

/* LA FICHE EST EXCLUE DU TRAITEMENT EN PASTILLE ci-dessus, elle ne le surcharge
   PAS. La regle de base compte deux classes, une surcharge en aurait demande
   trois et surtout aurait RECOPIE les valeurs de la rangee de pied de page —
   soit une troisieme definition du meme bouton. Exclue, la fiche laisse
   `share-row__btn` s'appliquer seule : une apparence, un endroit.

   Les autres en-tetes gardent la pastille, qui est la forme de LEUR maquette. */

/* LES COMMANDES A GAUCHE, sous les informations, alignees sur elles.

   Elles ont d'abord ete poussees a droite, puis ramenees : c'est la forme de la
   maquette, et elle se defend mieux. Une commande alignee sur le bord OPPOSE de
   ce qu'elle concerne oblige l'oeil a traverser la ligne pour la trouver ; ici
   « Lire plus tard » commence exactement sous « 3 min de lecture », donc au
   point ou la lecture reprend.

   La regle de base pousse ces commandes a droite (`margin-left: auto`) parce
   qu'elles y partagent une rangee avec le titre ; sur la fiche elles ont leur
   propre rangee, donc plus rien a fuir. */
.content-header--in-card .content-header__actions {
    margin-left: 0;
    /* ET ELLES DOIVENT POUVOIR RETRECIR. La regle de base pose
       `flex-shrink: 0`, ce qui a du sens quand les commandes partagent une
       rangee avec un titre : elles ne doivent pas se faire ecraser. Sur leur
       propre rangee, ce refus les garde a leur largeur maximale — 372 px
       mesures dans une carte qui en offre 351 a 375 px de fenetre, donc un
       debordement horizontal de toute la page.

       `min-width: 0` avec : sans lui, un conteneur de flex refuse de descendre
       sous la largeur de son contenu, et `flex-shrink` ne sert a rien. */
    flex-shrink: 1;
    min-width: 0;
}

/* L'ECART AVEC LES INFORMATIONS SE RESSERRE : les deux rangees disent la meme
   chose du meme document, elles ne sont pas deux sections. La gouttiere de la
   rangee suffit a les distinguer. */
.content-header--in-card .content-header__utility {
    row-gap: var(--spacing-xs);
}

/* ── LE SUR-TITRE EN PASTILLE, avec son point de rubrique ──
   La maquette pose les deux ensemble : une pastille teintee QUI CONTIENT le
   point. Le composant savait faire l'un ou l'autre — pastille grise sans point
   sur une fiche, point suivi du texte nu sur une liste — mais pas les deux, et
   c'est la forme de la fiche v2.

   La teinte vient de la couleur de SECTION, donc elle suit la rubrique sans
   qu'aucune couleur soit ecrite ici. */
.content-header--in-card .content-header__eyebrow-item {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--section-color, var(--color-primary)) 12%, var(--surface-2));
}

/* LE LIBELLE EST CENTRE SUR SES LETTRES, PAS SUR SA BOITE DE LIGNE.

   `align-items: center` centre la BOITE du texte, dont la hauteur vient de
   l'interlignage : elle reserve de la place pour les descendantes (g, p, q) et
   pour les ascendantes. Un libelle en capitales n'a aucune descendante, si bien
   que cette reserve reste vide EN BAS et pousse les lettres vers le haut. Le
   defaut se voit d'autant mieux en francais que les capitales accentuees — le
   E de « EVENEMENT » — vont chercher le haut de la reserve : l'accent frole le
   bord tandis qu'un vide egal subsiste dessous.

   `line-height: 1` fait coller la boite aux lettres, et le centrage porte alors
   sur ce qu'on voit. C'est un reglage de PASTILLE, pas de texte courant : sur un
   paragraphe, cet interlignage serait illisible. */
.content-header--in-card .content-header__eyebrow-item .content-header__eyebrow {
    line-height: 1;
}

/* LE POINT SE CALE SUR LES CAPITALES, PAS SUR LA BOITE.
   Meme cause que ci-dessus, vue de l'autre cote : `align-items: center` aligne
   les centres des BOITES — mesures identiques au dixieme (274,5 des deux
   cotes) — alors que les capitales occupent la moitie HAUTE de la leur, la
   moitie basse etant la reserve des descendantes. Le point tombait donc sous
   les lettres, et c'est ce qu'on voyait a l'agrandissement.

   Une marge basse le remonte dans un conteneur centre. 0,1em et non une valeur
   en pixels : l'ecart est une propriete de la POLICE (la profondeur de sa
   reserve de descendantes), donc il doit suivre le corps du texte. */
.content-header--in-card .content-header__eyebrow-item .ui-dot {
    margin-bottom: 0.1em;
}

/* L'EN-TETE `plain` N'A PLUS DE GOUTTIERE PROPRE. Il porte un `.container`
   interne, dont le rembourrage lateral s'ajoutait a celui de la carte hote :
   le titre, le chapo et la ligne de service etaient decales de 24 px vers
   l'interieur par rapport au corps, juste en dessous. Un decalage qu'on lit
   comme un defaut d'alignement sans savoir d'ou il vient.

   La largeur maximale part avec : c'est la carte qui borne, pas ce conteneur. */
.content-header--plain > .container {
    padding-inline: 0;
    max-width: none;
}

/* Trois boutons libellés et deux dates ne tiennent pas côte à côte sur un
   téléphone : ils restent empilés sous 48em. */
@media (min-width: 48em) {
    .content-header__utility {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-xl);
    }
}

/* `margin-left: auto` : les actions se collent à droite même quand rien ne les
   pousse — sans chiffre-clé ni métadonnées (cas d'une fiche à couverture), le
   `space-between` n'a qu'un seul élément à répartir et elles restaient à
   gauche, sous le titre.

   Les actions ne s'étirent pas et ne se compriment pas.
   `flex` explicite : sans lui, le bouton d'abonnement et le groupe
   partage/imprimer sont deux blocs, donc deux lignes — la ligne de service en
   comptait trois au lieu d'une. */
.content-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    flex-shrink: 0;
    margin-left: auto;
}

/* GRAMMAIRE V2 DES ACTIONS D'EN-TETE — abonnement, partage, liens de service.
   Tous les gestes de meme nature poses cote a cote partagent un habillage : une
   pastille BLANCHE SANS BORDURE, encre a la couleur d'action, portee par une
   ombre longue et tres diluee. C'est ce que la maquette pose, et le changement
   n'est pas cosmetique : la bordure grise faisait lire ces boutons comme des
   champs desactives sur la carte claire, alors que ce sont les seules actions
   de l'en-tete.

   L'ombre plutot qu'un trait : sur une carte deja blanche, un contour ne separe
   rien — c'est l'elevation qui detache. */
.content-header:not(.content-header--in-card) .content-header__actions .rss-button__trigger,
.content-header:not(.content-header--in-card) .content-header__actions .share-dropdown__summary,
.content-header:not(.content-header--in-card) .content-header__actions .share-dropdown-group__btn,
.content-header:not(.content-header--in-card) .content-header__actions .content-header__action {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    height: 2.5rem;
    padding: 0 var(--spacing-md);
    border: 0;
    border-radius: var(--radius-pill);
    /* `--color-on-primary` ET NON `--color-white` : le second RESOUT sur le site
       public, mais parce que TAILWIND l'emet dans sa palette compilee, pas parce
       que notre theme le declare. Il n'existe ni dans `theme.css` ni dans
       `root.css` — donc il disparait le jour ou Tailwind cesse de l'emettre, et
       il n'existe pas du tout pour une feuille servie hors du paquet compile.
       Meme valeur, meme rendu, une dependance de moins. Signale par le
       coordinateur, verifie au rendu : les deux jetons rendent #fff.

       UN APLAT TRES DILUE, ET NON DU BLANC. La maquette pose ces pastilles en
       blanc parce qu'elle les pose sur le fond GRIS de la page ; notre en-tete
       est une carte BLANCHE, et le blanc sur blanc y rendait des liens nus —
       l'ombre seule ne suffit pas a dessiner une pastille de 40 px.

       La teinte est celle des chips de filtre actif, un cran plus claire : tout
       ce qui se clique dans cette charte derive de la couleur d'action. Sur
       l'image (`--hero`), le fond redevient sombre et la pastille reprend le
       blanc de la maquette — regle plus bas. */
    background: color-mix(in srgb, var(--color-primary) 6%, var(--color-on-primary));
    box-shadow: 0 12px 28px -22px color-mix(in srgb, var(--color-primary-dark) 45%, transparent);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transition: box-shadow 0.15s ease, color 0.15s ease;
}

/* SUR L'IMAGE ET SUR LE FOND GRIS, la pastille reprend le blanc plein de la
   maquette. Les deux cas ont la meme cause et la meme reponse : l'aplat tres
   dilue de bleu a ete choisi pour se detacher d'une carte BLANCHE ; sur un fond
   qui n'est plus blanc, c'est le blanc qui se detache.

   C'est la regle deja payee deux fois aujourd'hui : ce qui se porte d'une
   maquette, c'est le RAPPORT au fond, jamais la couleur. */
/* LA BASE EST PLUS SPECIFIQUE QU'ELLE N'EN A L'AIR : son `:not()` compte pour
   une classe, ce qui la porte a (0,4,0) contre (0,3,0) ici. Les pastilles
   restaient donc sur l'aplat dilue de bleu, pense pour une carte BLANCHE, alors
   qu'un en-tete `--bare` vit sur le fond GRIS de la page : contraste insuffisant,
   signale a l'ecran. La regle contextuelle reprend le meme prefixe pour passer
   devant. */
.content-header:not(.content-header--in-card) .content-header__body--bare .content-header__actions .rss-button__trigger,
.content-header:not(.content-header--in-card) .content-header__body--bare .content-header__actions .share-dropdown__summary,
.content-header:not(.content-header--in-card) .content-header__body--bare .content-header__actions .share-dropdown-group__btn,
.content-header:not(.content-header--in-card) .content-header__body--bare .content-header__actions .content-header__action,
.content-header:not(.content-header--in-card) .content-header__body--hero .content-header__actions .rss-button__trigger,
.content-header:not(.content-header--in-card) .content-header__body--hero .content-header__actions .share-dropdown__summary,
.content-header:not(.content-header--in-card) .content-header__body--hero .content-header__actions .share-dropdown-group__btn,
.content-header:not(.content-header--in-card) .content-header__body--hero .content-header__actions .content-header__action {
    background: var(--color-on-primary);
}

.content-header__actions .rss-button__trigger:hover,
.content-header__actions .share-dropdown__summary:hover,
.content-header__actions .share-dropdown-group__btn:hover,
.content-header__actions .content-header__action:hover {
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-on-primary));
    box-shadow: 0 14px 30px -20px color-mix(in srgb, var(--color-primary-dark) 60%, transparent);
    color: var(--color-primary-dark);
}

/* SUR FOND GRIS ET SUR L'IMAGE, le survol garde le BLANC et ne creuse que
   l'ombre. L'aplat dilue de bleu a ete choisi pour se detacher d'une carte
   blanche : pose sur le gris de la page, il rend un bleu-gris terne qui
   ressemble a un bouton desactive — soit l'inverse de ce qu'un survol doit dire.

   Meme regle que pour l'etat au repos, et pour la meme raison : ce qui se porte
   d'une maquette, c'est le RAPPORT au fond, jamais la couleur. C'est la
   quatrieme fois qu'elle se paye aujourd'hui, et la premiere sur un ETAT plutot
   que sur un repos — l'etat se verifie moins souvent, il derive donc plus
   longtemps. */
.content-header:not(.content-header--in-card) .content-header__body--bare .content-header__actions .rss-button__trigger:hover,
.content-header:not(.content-header--in-card) .content-header__body--bare .content-header__actions .share-dropdown__summary:hover,
.content-header:not(.content-header--in-card) .content-header__body--bare .content-header__actions .share-dropdown-group__btn:hover,
.content-header:not(.content-header--in-card) .content-header__body--bare .content-header__actions .content-header__action:hover,
.content-header:not(.content-header--in-card) .content-header__body--hero .content-header__actions .rss-button__trigger:hover,
.content-header:not(.content-header--in-card) .content-header__body--hero .content-header__actions .share-dropdown__summary:hover,
.content-header:not(.content-header--in-card) .content-header__body--hero .content-header__actions .share-dropdown-group__btn:hover,
.content-header:not(.content-header--in-card) .content-header__body--hero .content-header__actions .content-header__action:hover {
    background: var(--color-on-primary);
    box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--color-primary-dark) 65%, transparent);
    text-decoration: none;
}

/* ── Chiffre-clé de la page ──
   Le nombre porte le poids, le mot qui le nomme reste discret : c'est ainsi
   qu'on lit une donnée, et cela distingue « 13 » de la ligne de métadonnées
   voisine, qui est du texte courant. */
.content-header__stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0;
}

.content-header__stat-value {
    /* Ramené sous la taille du titre en petit écran : à 32 px fixes, « 13 »
       pesait plus lourd que « Agenda », rendu à 28 px sur téléphone. */
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, var(--font-size-3xl));
    font-weight: 800;
    line-height: 1;
    color: var(--color-navy);
    font-variant-numeric: tabular-nums;
}

.content-header__stat-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-light);
}

/* `content-header__stat-line` A ETE RETIREE : /ressources posait deux lignes de
   faits en colonne droite, elles sont devenues des CHIFFRES (`list-figures`),
   la meme brique que /evenements. Plus aucun gabarit ne l'emettait. */

/* Chapô — composant 23 : 20 px, encre NAVY, borné à 62 caractères.

   Il était en gris secondaire, la couleur des métadonnées et des aides. Or le
   chapô n'est pas une note de service : c'est la deuxième phrase que l'on lit
   sur la page, et la charte lui donne l'encre du titre. En gris, il se lisait
   comme une légende sous un titre au lieu d'en être la suite. */
/* LE CHAPO EST EN ENCRE, PAS EN MARINE, et il pese un cran de moins que ce
   qu'il pesait. Mesure au rendu, 2026-08-31 : 20 px en `--color-navy`
   (#2a4d92) alors que TOUTES les maquettes v2 le posent a 16-17 px en #3d4652,
   c'est-a-dire exactement `--color-text`. L'ecart ne se voyait pas en relisant
   la feuille — le jeton existe, la declaration est valide — il se voit en
   regardant la page : le chapo y disputait le rang du titre, en bleu, sur deux
   lignes pleine largeur.

   L'echelle n'a pas de 17 px. `--font-size-lg` (18) est le cran le plus proche,
   et le bon sens : un chapo doit peser plus que le corps du texte, pas autant
   qu'un titre. La descente a 16 px sous 48 em, plus bas, reste valable.

   PORTEE : les trente appelants de cet en-tete. C'est voulu — le defaut etait
   dans la brique, le corriger page par page l'aurait fige. */
.content-header__lead {
    margin: var(--spacing-md) 0 0;
    max-width: 62ch;
    font-size: var(--font-size-lg);
    line-height: 1.6;
    color: var(--color-text);
    /* `pretty` et non `balance` : sur un chapô de plusieurs lignes, égaliser
       les longueurs donnerait un bloc mou. `pretty` ne corrige que la dernière
       ligne, en évitant qu'un mot y reste seul. */
    text-wrap: pretty;
}

/* Sur téléphone, le chapô à 18 px pesait autant que le titre rendu à 28 px. Il
   revient à la taille courante — il n'est PAS masqué : c'est la seule
   description de la page, celle que lisent un lecteur d'écran et un visiteur
   arrivé d'un moteur, et il ne repousse aucun résultat sous la ligne de
   flottaison (mesure /evenements à 390 px : chapô jusqu'à y=340, première carte
   à y=444, fenêtre 844). */
@media (width < 48em) {
    .content-header__lead {
        font-size: var(--font-size-base);
    }
}

/* ── Variante BORNÉE ──
   Pour une fiche SANS sommaire, dont la colonne de lecture est bornée à
   62 rem et centrée (`.article-single__layout` sans `.article-toc`). Sans
   elle, l'en-tête reste à la largeur du conteneur pendant que le corps se
   resserre : le chapô démarre alors quelque cent-vingt pixels à gauche du
   premier mot du texte, et la page a deux bords gauches.
   La borne est posée sur les ENFANTS et non sur `.content-header`, dont le
   padding vertical rythme la page — un `max-width` sur le conteneur
   déplacerait aussi ce rythme. */
.content-header--narrow > .container > .content-header__body,
.content-header--narrow > .container > .content-header__lead,
.content-header--narrow > .container > .content-header__cover {
    max-width: 62rem;
    margin-inline: auto;
}

/* ══════════════════════════════════════════════════════════════
   Variante IMAGE : la photo du contenu remplace le dégradé.
   Même grammaire que la card unie — sur-titre, titre, ligne de service — la
   photo passant sous un voile qui garantit la lisibilité.
   ══════════════════════════════════════════════════════════════ */
.content-header__body--hero {
    background: var(--color-primary-dark);
    /* Rayon et rembourrage declares ICI, et non plus herites du bloc de base :
       la variante image n'emet pas `ui-card`, c'est la photo qui fait la
       surface. Les oublier laissait un bandeau a angles droits, sans marge
       interieure, et rien ne l'aurait signale. */
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    min-height: 22rem;
    /* Le contenu s'ancre en bas : le haut de la photo reste visible, et le
       texte se pose sur la zone la plus sombre du voile. */
    justify-content: flex-end;
}

/* Couverture basse pour les pages de LISTE : la photo y est une atmosphere, pas
   le sujet. A 22 rem, 352 px de decor repoussaient d'autant la premiere entree
   — sur un ecran de 900 px de haut, un tiers de la page avant le premier
   resultat. La fiche, elle, garde sa hauteur : sa photo EST le contenu.

   Placee APRES `--hero` : les deux selecteurs ont la meme specificite, donc
   c'est l'ordre qui tranche. */
/* Scopee a `--hero`, et c'est une correction : la hauteur minimale n'a de sens
   que sur une PHOTO, ou elle garantit qu'il en reste quelque chose a voir. Sans
   image, elle creuse 240 px de vide sous les actions — constate sur /actualites
   des que la maquette v2 lui a retire sa couverture. Une valeur posee pour une
   variante et laissee au cas general finit toujours par s'appliquer a un cas
   qu'elle n'a pas prevu. */
.content-header__body--hero.content-header__body--compact {
    min-height: 15rem;
}

.content-header__hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    border-radius: inherit;
}

.content-header__body--hero::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Dégradé, pas un aplat : l'aplat uniforme qu'il faut pour rendre le bas
       lisible efface la photo en haut, et on paie une image pour ne pas la
       voir. Ici le haut reste net, le bas porte le texte. */
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--color-primary-dark) 25%, transparent) 0%,
        color-mix(in srgb, var(--color-primary-dark) 62%, transparent) 45%,
        color-mix(in srgb, var(--color-primary-dark) 88%, transparent) 100%);
    z-index: 1;
    border-radius: inherit;
}

/* Au-dessus du crédit (5), sinon le menu « Partager » s'ouvre DERRIÈRE lui :
   les deux vivent dans le plan d'empilement de la card, et c'est le rang local
   qui décide, pas le `z-index: 60` du menu. */
.content-header__hero-inner {
    position: relative;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Sur l'image, tout le texte passe en blanc — y compris le sur-titre, dont la
   couleur de section n'aurait pas le contraste requis sur un fond sombre. */
/* Le chapô est un FRÈRE de la card, jamais son enfant : à l'intérieur il
   serait rogné par l'`overflow: hidden` et rendu en blanc sur la photo. */
.content-header__body--hero + .content-header__lead {
    margin-top: var(--spacing-lg);
}

/* Sur-titre et thématiques : une seule suite, séparée par des points médians.
   Le séparateur est décoratif (pseudo-élément, hors du texte) : il ne serait
   sinon ni lu à voix haute, ni exclu d'un copier-coller. */
/* Aucun séparateur : le point médian, posé en pseudo-élément d'un `<li>`,
   s'appuyait sur sa boîte et non sur l'espace entre deux entrées — il tombait
   donc plus près de l'étiquette qui le précédait que de la suivante, et le
   décalage se voyait. L'écart seul sépare aussi bien, sans rien à aligner. */
/* ── Identite : portrait rond a gauche du sur-titre et du titre ──
   Rendue seulement quand l'appelant passe `avatar` (fiche portrait). Une photo
   de visage en bandeau 16/9 est recadree au front et au menton — d'ou le rond,
   meme grammaire que le trombinoscope de /portraits. */
.content-header__identity {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    min-width: 0;
}

.content-header__identity-text {
    /* `min-width: 0` : sans lui, un element de flex refuse de descendre sous la
       largeur de son contenu, et un nom long pousserait la ligne hors du cadre. */
    min-width: 0;
    flex: 1;
}

.content-header__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: clamp(4.5rem, 12vw, 7rem);
    height: clamp(4.5rem, 12vw, 7rem);
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-primary) 12%, var(--surface-2));
    box-shadow:
        0 0 0 3px var(--surface-2),
        0 6px 16px color-mix(in srgb, var(--color-primary-dark) 12%, transparent);
}

.content-header__avatar-img {
    display: block;
    width: 100%;
    height: 100%;
    /* `cover` : un portrait doit remplir le cercle. */
    object-fit: cover;
}

/* ── Logo d'une organisation, pas un portrait ──
   Le rond et le `cover` sont faits pour un visage : applique a un logo, ils le
   RECADRENT — sur la fiche COREB, le sigle et sa mention sortaient du cercle,
   coupes a gauche et a droite. Un logo est une marque composee : on la montre
   entiere ou pas du tout.

   D'ou, sur les fiches d'annuaire uniquement : coins arrondis au lieu du
   cercle, fond blanc (ces fichiers sont dessines pour du blanc) et `contain`. */
.content-header--directory-show .content-header__avatar {
    border-radius: var(--radius-md);
    background: var(--surface-2);
    padding: 0.5rem;
}

.content-header--directory-show .content-header__avatar-img {
    object-fit: contain;
}

.content-header__avatar-initials {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-primary);
}

@media (width < 40em) {
    .content-header__identity {
        gap: var(--spacing-md);
    }
}

.content-header__kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem var(--spacing-lg);
    /* AUCUNE MARGE PROPRE : le conteneur est une colonne a gouttiere, et cette
       marge s'AJOUTAIT a elle — 20 px mesures sous le sur-titre la ou tous les
       autres ecarts en font 16. Un bloc pose dans une colonne a gouttiere n'en
       declare aucun ; c'est la troisieme fois que la regle se paye sur cette
       page, apres l'en-tete en `plain` et le rembourrage bas du corps. */
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* Durée de lecture et dates : même registre discret. */
.content-header__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem var(--spacing-md);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.content-header__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* ── Couverture ──
   Proportion FIXE plutot qu'une hauteur plafonnee. Avec `max-height`, la
   hauteur rendue depend de la photo televersee : deux pages voisines
   s'ouvraient sur des bandeaux de tailles differentes, et une image tres haute
   repoussait le texte sous la ligne de flottaison. Le point focal DAM decide de
   ce qui reste visible au recadrage.
   Marge haute plus large que l'interligne du bloc titre : la photo ouvre le
   contenu, elle ne fait pas partie de l'en-tete. */
.content-header__cover {
    margin: var(--spacing-2xl) 0 0;
    position: relative;
}

.content-header__cover-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

@media (width < 40em) {
    /* Un 16/7 sur telephone rend une bande de 60 px de haut, illisible. */
    .content-header__cover-image {
        aspect-ratio: 3 / 2;
    }
}

@media print {
    .content-header {
        display: none !important;
    }
}

/* ── Champ de recherche DANS la card d'en-tete ──
   Premier element de la ligne de service, a la place qu'occupent la duree de
   lecture et les dates ; « Imprimer » et « Partager » restent a droite, pousses
   par le `margin-left: auto` de `.content-header__actions`.
   Borne : un champ pleine largeur donnerait une fente de 1 150 px pour une
   requete de trois mots. `flex: 1 1 …` pour qu'il se resserre au lieu de
   pousser les actions a la ligne quand la card est etroite. */
.content-header__search {
    flex: 1 1 20rem;
    max-width: 34rem;
}

/* Sur la card, le champ garde son fond blanc et son texte sombre : c'est un
   champ de SAISIE, pas une pastille de service. Sans cette reprise, il hérite
   du `color: #fff` que la card impose a ses descendants et la saisie devient
   invisible sur fond blanc. */
.content-header__body .content-header__search input {
    color: var(--color-text);
}

.content-header__body .content-header__search ::placeholder {
    color: var(--color-text-light);
}

/* ── OU SE POSENT LES ACTIONS, EN EN-TETE DE LISTE V2 ──
   La maquette les pose SOUS le titre et son filet, alignees a GAUCHE, dans le
   fil de lecture — pas repoussees a l'oppose du chiffre-cle.

   La difference n'est pas cosmetique. `margin-left: auto` les envoie contre le
   bord droit de la colonne : sur un en-tete a deux colonnes, elles se
   retrouvaient collees a la repartition chiffree, donc lues comme sa legende.
   Ramenees a gauche, elles se rattachent au titre, qui est ce dont elles
   parlent — on s'abonne AUX actualites, pas aux chiffres.

   Portee au `--split` seul : sur une fiche, la ligne de service garde sa mise en
   page d'origine, ou le renvoi a droite separe utilement ce qu'on LIT de ce
   qu'on FAIT. */
.content-header__body--split .content-header__actions {
    margin-left: 0;
    gap: var(--spacing-sm);
}

/* ══════════════════════════════════════════════════════════════
   EN-TETE EN DEUX COLONNES — `aside` de `_content_header`.

   La maquette de liste pose une repartition chiffree a DROITE du titre.

   UNE ENVELOPPE ET NON UNE GRILLE, et la premiere version se trompait. En
   grille, la colonne droite traverse les rangees de la gauche
   (`grid-row: 1 / -1`) et sa hauteur les fait GRANDIR : sur une page sans
   chapo, le titre restait en haut, la ligne de service tombait en bas, et
   250 px de blanc s'ouvraient entre les deux. `align-content: start` n'y
   changeait rien — c'est le DIMENSIONNEMENT des pistes qui est en cause, pas
   leur alignement, et un element qui traverse plusieurs pistes les dimensionne
   toujours. Le symptome ressemble a un probleme d'alignement, il n'en est pas
   un.

   L'enveloppe `__main` n'existe QUE lorsqu'une colonne droite est passee :
   meme motif conditionnel que l'enveloppe d'image du meme gabarit, et les
   trente autres appelants ne voient aucun changement de balisage.
   ══════════════════════════════════════════════════════════════ */
.content-header__main {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-width: 0;
}

@media (width >= 64em) {
    .content-header__body--split {
        flex-direction: row;
        /* `flex-end` — l'alignement de la maquette, et il fait disparaitre un
           vide. Chaque colonne garde sa hauteur naturelle (aucune n'etire
           l'autre), mais leurs BAS coincident : avec `flex-start`, la colonne la
           plus courte laissait sous elle un blanc egal a leur difference, et ce
           blanc etait au milieu du hero, pas a son bord.

           Le titre et les actions se posent donc sur la meme ligne de sol que le
           visuel — ce qui est aussi la seule facon de faire tenir ensemble deux
           colonnes dont l'une est une image et l'autre du texte. */
        align-items: flex-end;
        gap: var(--section-gap);
    }

    .content-header__body--split > .content-header__main {
        flex: 1 1 auto;
    }

    .content-header__body--split > .content-header__aside {
        /* 26 rem et non 18,75 : la mosaique de la proposition B tient trois
           cadres, dont deux cote a cote. A 300 px les deux petits tombaient sous
           140 px de large — a cette taille une photo ne montre plus rien.

           `1 1` et non `0 0` : la colonne peut RETRECIR si le titre est long,
           plutot que de pousser la mise en page. */
        flex: 1 1 26rem;
        max-width: 26rem;
        /* LA MOSAIQUE NE SUIT PAS LA HAUTEUR DU TEXTE. Etiree par defaut, la
           colonne prenait celle du titre plus le chapo plus la ligne de
           service — 344 px — et la mosaique repartissait ce surplus sur ses
           rangees : le grand cadre passait a 230x344 la ou ses deux voisins
           font du 4/3. Autrement dit, la proportion des photos dependait de la
           longueur du chapo, ce que personne ne peut deviner en lisant l'une ou
           l'autre des deux regles.

           Signale deux fois a l'ecran, la seconde apres qu'un chapo borne a
           62ch soit passe a deux lignes. */
        align-self: flex-start;
    }
}

/* Sous le palier, la colonne repasse dans le flux, apres le titre et la ligne de
   service. Une marge la detache : en colonne elle avait la gouttiere du parent,
   empilee elle n'a plus rien.

   LA MARGE EST SUR L'ENFANT, pas sur la colonne. Posee sur la colonne, elle
   survivait a un contenu MASQUE : sous 48em la mosaique disparait, la colonne
   tombait a zero de haut — et gardait ses 24 px de marge. 28 px de blanc pour un
   element qui n'existe plus a l'ecran, invisibles a la relecture puisque la
   regle est juste. Sur l'enfant, un enfant masque ne coute rien. */
@media (width < 64em) {
    .content-header__aside > * {
        margin-top: var(--card-gap);
    }
}

/* ══════════════════════════════════════════════════════════════
   EN-TETE SANS CARTE — `surface: 'bare'`

   Ce que la maquette v2 pose pour une page de LISTE : l'en-tete vit a meme le
   fond gris de la page, cerne d'un filet, avec deux formes pales en
   arriere-plan.

   POURQUOI PAS LA CARTE. Sur une liste, l'en-tete ne porte qu'un titre, un filet
   et deux boutons : la carte blanche y mettait une surface pleine sous tres peu
   de contenu, et surtout elle entrait en CONCURRENCE avec les cartes de la liste
   juste en dessous — deux niveaux de surface pour deux natures d'objet
   differentes, et c'est la moins importante qui pesait le plus.
   ══════════════════════════════════════════════════════════════ */
/* ── AUCUNE SURFACE ──
   L'en-tete devient un simple bloc de texte, pose dans la carte de l'appelant.
   C'est la forme de la fiche d'article, dont la maquette reunit l'en-tete et le
   corps dans UN cadre : deux cartes accolees s'y liraient comme deux blocs sans
   rapport, et la charte n'admet qu'une ombre par vue.

   Le rembourrage part avec le reste : c'est la carte hote qui le porte, sinon il
   s'ajoute au sien. */
/* EN `plain`, LE BLOC N'A PAS D'ECART PROPRE NON PLUS. Il vit dans la carte de
   l'appelant, qui porte deja son rembourrage et sa gouttiere ; les 16 et 24 px
   de l'en-tete s'AJOUTAIENT a elle — 48 px mesures entre les commandes et le
   corps la ou la colonne en pose 24. Un bloc pose dans une colonne a gouttiere
   ne declare aucun ecart : c'est la colonne qui les donne tous. */
.content-header--plain {
    padding-block: 0;
}

.content-header__body--plain {
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.content-header__body--bare {
    position: relative;
    padding: var(--card-gap);
    border-radius: var(--radius-lg);
    /* NI FOND NI FILET. Le filet cernait un bloc majoritairement vide et le
       donnait a lire comme une BOITE — donc comme quelque chose qui aurait du
       etre rempli. Sans lui, le meme espace se lit comme la respiration du haut
       de page, ce qu'il est. Les deux formes pales suffisent a tenir la zone :
       elles marquent un territoire sans en tracer la frontiere. */
    border: 0;
    background: none;
    box-shadow: none;
}

/* Le calque decoratif. `overflow: hidden` ET le meme rayon que le cadre : c'est
   lui qui ECRETE les formes, et c'est cet ecretage qui les fait lire comme un
   fond plutot que comme deux pastilles posees. */
.content-header__shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    /* Sous le contenu, toujours : le titre et les boutons se lisent par-dessus. */
    z-index: 0;
}

/* Les enfants du corps passent au-dessus du calque. `position: relative` sans
   `z-index` suffit — ils partagent le plan de leur parent et l'ordre du DOM
   tranche, le calque etant premier.

   L'EXCLUSION PORTE SUR UN MARQUEUR, PAS SUR UNE CLASSE PRECISE. Elle ne
   nommait que `content-header__shapes` ; le jour ou la brique a gagne un
   parametre `decor`, le calque qu'il rend est tombe dans la regle et s'est vu
   imposer `position: relative` — mesure : 0 x 0 pour un decor `absolute; inset:
   0`, donc INVISIBLE, sans la moindre erreur. Le parametre etait inutilisable
   pour ce a quoi il sert.

   `.ui-decor-layer` marque tout calque decoratif, present ou futur. Une regle
   qui doit connaitre le nom de chaque decor est une regle qui sera fausse au
   prochain. */
.content-header__body--bare > *:not(.ui-decor-layer) {
    position: relative;
}

/* LE ROND EST CENTRE SUR L'ANGLE, et c'est ce qui le rend lisible. Pose ailleurs,
   il est coupe en haut et en bas par le calque sans qu'on comprenne pourquoi : on
   lit un accident de recadrage. Centre sur le coin, il ne montre qu'un QUART de
   lui-meme, et ce quart dit exactement ou est l'angle du bloc — la forme devient
   un ornement d'angle au lieu d'un rond mal place.

   D'ou le decalage : moins la MOITIE de sa propre taille, sur les deux axes.
   `--shape-size` porte le diametre une seule fois, et les quatre valeurs en
   decoulent. */
.content-header__shape {
    position: absolute;
    width: var(--shape-size);
    height: var(--shape-size);
    border-radius: var(--radius-pill);
}

/* Vert de marque en haut a gauche, navy en bas a droite : les deux couleurs de
   la charte, tres diluees. `color-mix` plutot qu'un `rgba` litteral — la teinte
   suit le jeton si la charte bouge. */
/* ── LES DEUX DISQUES, A LA TAILLE DE LA MAQUETTE ──
   200 et 256 px de diametre a 16 et 10 % : sur un en-tete de 1 150 px, deux
   accents qu'on ne voyait pas. La maquette « Cards decorees » pose 380 et
   460 px, a 20 et 16 %, et les decale d'un TIERS hors du cadre au lieu de la
   moitie — c'est ce qui fait entrer une vraie courbe dans l'en-tete plutot
   qu'un quart de rond colle a l'angle.

   `content-header__shapes` porte `overflow: hidden` et `border-radius:
   inherit` : les disques restent rognes par le bord, carte ou pas. */
.content-header__shape--a {
    --shape-size: 23.75rem;
    left: -7.5rem;
    top: -8.75rem;
    background: color-mix(in srgb, var(--color-section-ancesu) 20%, transparent);
}

/* SANS COLONNE DROITE, LE ROND VERT SORT DU JEU. Le calque n'a que la hauteur
   du corps : sur un en-tete court — pas de colonne droite a equilibrer, donc pas
   de mosaique pour le grandir — le quart de rond visible occupe les cent
   premiers pixels du corps, c'est-a-dire exactement la ou tombent le sur-titre
   et la premiere moitie du titre. On ne lit plus un ornement d'angle mais une
   tache verte derriere les mots.

   Mesure du 2026-08-29 : sur `/evenements`, bas visible de la forme a 323 px,
   haut du sur-titre a 247. Sur `/actualites`, qui porte une mosaique, le titre
   tombe a 368 et degage : c'est la HAUTEUR de l'en-tete qui fait la difference,
   pas la page.

   Le rond navy du bas a droite, lui, reste : cet angle-la est vide dans les deux
   dispositions, et une forme suffit a tenir la zone sans en tracer la frontiere.
   Retirer les deux rendrait le bloc nu. */
.content-header__body--bare:not(.content-header__body--split) .content-header__shape--a {
    display: none;
}

/* Le second passe au cyan `--color-section-cesu`, la valeur exacte de la
   maquette (#2aa9e0), au lieu du bleu primaire dilue. */
.content-header__shape--b {
    --shape-size: 28.75rem;
    right: -10rem;
    bottom: -11.875rem;
    background: color-mix(in srgb, var(--color-section-cesu) 16%, transparent);
}

/* Le chapo REMONTE dans la colonne quand l'en-tete en a deux, ou quand il n'a
   aucune surface propre : il y retrouve l'ordre de la maquette — titre, filet,
   chapo, ligne de service.

   IL GARDE LA MESURE DE 62ch, celle de la maquette. La regle posait ici 52ch
   alors que son propre commentaire annonçait qu'elle « perd sa borne » : le
   texte disait une intention, le code en appliquait une troisieme, et personne
   ne pouvait voir l'ecart sans mesurer. Le chapo se retrouvait un cran plus
   etroit que partout ailleurs, sans raison.

   LA FORME A DEUX COLONNES GARDE LA BORNE, elle aussi. Elle avait ete levee au
   motif que « la grille borne deja la colonne » — mais la colonne fait 816 px a
   1440, soit une centaine de signes par ligne a 20 px de corps. Une grille
   borne une MISE EN PAGE, elle ne borne pas une MESURE DE LECTURE : ce sont
   deux choses, et seule la seconde decide si l'oeil retrouve le debut de la
   ligne suivante. Signale a l'ecran par l'utilisateur. */
.content-header__lead--inline {
    margin: 0;
}


/* ══════════════════════════════════════════════════════════════
   LE PARTAGE GARDE SON LIBELLE DANS UN EN-TETE DE LISTE

   `zones/content.css` reduit les actions a des carres de 44 px sous 48em et
   passe leurs intitules en `sr-only`. La regle est juste sur une FICHE, ou la
   rangee porte trois a quatre gestes et ou l'icone suffit a les distinguer.

   Sur une liste en v2, il n'en reste qu'UN — l'abonnement est masque sous 64em
   par sa propre feuille. Un carre a icone isole sous un chapo ne se lit plus
   comme une action : il se lit comme un objet oublie. Il reprend donc sa forme
   de pastille libellee, celle du bureau.
   ══════════════════════════════════════════════════════════════ */
@media (width < 48em) {
    .content-header__body--bare .content-header__actions .share-dropdown__summary,
    .content-header__body--bare .content-header__actions .share-dropdown-group__btn {
        width: auto;
        padding: 0 var(--spacing-md);
    }

    .content-header__body--bare .content-header__actions .share-dropdown__summary > span,
    .content-header__body--bare .content-header__actions .share-dropdown-group__btn > span {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
    }
}


/* ══════════════════════════════════════════════════════════════
   LE MENU DE PARTAGE S'OUVRE DU BON COTE

   `.share-dropdown__menu` s'ancre a DROITE de son declencheur (`right: 0`), ce
   qui est juste partout ou la rangee d'actions est elle-meme a droite — c'est le
   cas sur une fiche.

   Dans l'en-tete sans carte, elle est a GAUCHE : le menu de 240 px s'ouvrait
   alors vers la gauche depuis un bouton pose a 48 px du bord, donc a -113 px de
   la fenetre. Mesure sur un ecran de 375 px. Et rien ne le signalait : pas
   d'ascenseur horizontal, le menu etait simplement coupe.

   L'ancre suit donc l'alignement de la rangee. La regle est ici, avec ce qui
   decide de cet alignement, et non dans la feuille du partage — qui n'a aucun
   moyen de savoir de quel cote on l'a pose.
   ══════════════════════════════════════════════════════════════ */
.content-header__body--bare .share-dropdown__menu {
    right: auto;
    left: 0;
}

/* ── LA PHRASE DE GRANDEURS, sur la ligne de base du titre ──

   `align-items: baseline` et non `center` : c'est la ligne de base qui aligne
   deux textes de tailles tres differentes — un titre de 36 px et une phrase de
   13, centres l'un sur l'autre, se lisent comme deux blocs qui flottent.

   La chasse fixe n'est pas un ornement : ce sont des NOMBRES, et une chasse
   fixe les rend comparables d'une ligne a l'autre comme d'une page a l'autre. */
.content-header__title-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-md);
}

.content-header__title-note {
    /* `--font-data` et NON `--font-mono` : le second n'est pas declare par le
       paquet, il n'existe que parce que Tailwind l'emet — un jeton qui resout
       par accident, que le controle de grammaire refuse a juste titre. C'est
       `--font-data` que le theme declare, et c'est deja la police des cartouches
       de donnees du site. */
    font-family: var(--font-data);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-light);
}