/*
 * Tibius Stats — feuille du produit.
 *
 * ── Ce que ce fichier porte, et ce qu'il ne porte plus ──────────────────────
 * Le MÉTIER seulement : grilles du tableau de bord, barres de proportion,
 * graphique, rythme. L'ossature — en-tête, navigation, zone compte, pied,
 * mention de version, en-tête de page, cartes, résumé chiffré, tableaux,
 * notices, badges, états, boutons, lien d'évitement — est rendue par la
 * structure commune de la Galaxie (classes `tds-*`, Design System 2.12.4),
 * vendorisée sans modification à côté de la feuille de jetons. Aucune de ces
 * classes n'est redéfinie ni surchargée ici : un bloc commun adopté retire sa
 * variante locale, il ne cohabite pas avec elle.
 *
 * ── La règle qui gouverne ce fichier ────────────────────────────────────────
 * AUCUNE valeur de couleur littérale. Tout vient des jetons publiés par
 * l'artefact canonique du Design System, dont l'empreinte est déclarée dans
 * design-system.json puis vérifiée par la gate ET par un test. Cette feuille
 * COMPOSE des jetons ; elle n'en redéclare aucun.
 *
 * ── Le thème ────────────────────────────────────────────────────────────────
 * `stats`, celui que le Design System publie pour ce produit. Une identité de
 * produit se décide au Design System, pas dans la feuille de style d'un
 * consommateur. Voir docs/design-system.md.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--tds-surface-canvas);
    color: var(--tds-text-primary);
    font-family: var(--tds-font-family-sans);
    font-size: var(--tds-font-size-body);
    line-height: var(--tds-line-height-body);

    /* Une colonne de la hauteur de l'écran : le pied commun (`tds-footer`,
       marge haute automatique) reste en bas d'une page courte. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Coquille et menu latéral ───────────────────────────────────────────── */

/* Contenu et pied, dans la colonne que le menu laisse libre : le pied commun
   reste en bas d'une page courte. */
.coquille {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    min-width: 0;
}

.menu__titre {
    display: block;
    margin: var(--tds-space-4) 0 var(--tds-space-1);
    padding-inline: var(--tds-space-3);
    color: var(--tds-text-muted);
    font-size: var(--tds-font-size-caption);
    font-weight: var(--tds-font-weight-semibold);
    text-decoration: none;
}

a.menu__titre:hover {
    color: var(--tds-text-primary);
    text-decoration: underline;
}

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

.menu__lien {
    display: flex;
    width: 100%;
}

/* L'entrée courante : l'arête est sur le bord du menu, pas sous le lien. */
.menu .menu__lien--actif {
    border-radius: 0 var(--tds-radius-role-control) var(--tds-radius-role-control) 0;
    box-shadow: inset var(--tds-border-width-accent) 0 0 var(--tds-brand-primary);
}

/* Sous la bascule de la structure commune : replié derrière « Menu ». Le script
   commun pose `aria-expanded` sur le bouton : sans lui, le menu reste affiché. */
@media (max-width: 1023.98px) {
    [aria-expanded="false"] + .menu {
        display: none;
    }

    [aria-expanded="true"] + .menu {
        position: absolute;
        inset: 100% 0 auto 0;
        max-height: calc(100vh - 3.5rem);
        overflow-y: auto;
        padding: var(--tds-space-2) var(--tds-layout-page-gutter-mobile) var(--tds-space-4);
        border-bottom: var(--tds-border-width-default) solid var(--tds-border-default);
        background: var(--tds-surface-default);
        box-shadow: var(--tds-elevation-medium);
    }
}

/* Au-dessus : une colonne fixe, sous l'en-tête, qui défile seule. 3.5rem est la
   hauteur minimale de l'en-tête commun, plus son filet. */
@media (min-width: 1024px) {
    .avec-menu > header {
        position: sticky;
        top: 0;
    }

    .avec-menu .coquille {
        padding-inline-start: 15rem;
    }

    .menu {
        position: fixed;
        inset: calc(3.5rem + var(--tds-border-width-accent)) auto 0 0;
        width: 15rem;
        overflow-y: auto;
        padding: 0 var(--tds-space-3) var(--tds-space-4);
        border-inline-end: var(--tds-border-width-default) solid var(--tds-border-default);
        background: var(--tds-surface-default);
    }

    .menu__lien {
        min-height: var(--tds-control-height-sm);
    }
}

/* ── Structure ──────────────────────────────────────────────────────────── */

.section {
    margin-block-start: var(--tds-layout-section-gap);
}

/* Le menu mène à ces blocs : ils ne s'arrêtent pas sous la barre de filtre. */
.ancre {
    scroll-margin-block-start: 8rem;
}

/* Un titre de section se lit sous le titre de la page (`tds-page-header__title`),
   qui porte le corps au-dessus ; un classement qui détaille une section, un
   cran plus bas. */
h2 {
    margin: 0 0 var(--tds-space-4);
    font-size: var(--tds-font-size-heading4);
    line-height: var(--tds-line-height-heading);
}

h3 {
    margin: 0 0 var(--tds-space-3);
    font-size: var(--tds-font-size-body-large);
    line-height: var(--tds-line-height-heading);
}

/* ── Grilles ────────────────────────────────────────────────────────────── */

.grid {
    display: grid;
    gap: var(--tds-space-4);
}

/*
 * Une cellule de grille ne s'élargit pas à la taille de son contenu.
 *
 * Par défaut, une colonne `1fr` a pour largeur minimale celle de ce qu'elle
 * contient — ici un tableau, dont les en-têtes ne se coupent pas. Le cadre du
 * tableau (`tds-table-frame`) sait défiler, mais sa cellule grandissait avant
 * lui et poussait la page : mesuré à 375 px, le document débordait de 18 px.
 */
.grid > * {
    min-width: 0;
}

.grid--halves {
    grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
    .grid--halves {
        grid-template-columns: 1fr 1fr;
    }
}

/*
 * Trois colonnes : pays, régions, villes.
 *
 * Elles se lisent ENSEMBLE — on descend d'un degré de gauche à droite — et les
 * séparer sur deux rangées casserait cette lecture. Un palier de plus que
 * `--halves`, parce que trois colonnes de tableau à 60rem seraient étroites au
 * point de faire déborder « Bruxelles-Capitale ».
 */
.grid--thirds {
    grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
    .grid--thirds {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 80rem) {
    .grid--thirds {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* ── Focus et période ───────────────────────────────────────────────────── */

:where(a, button, summary):focus-visible {
    outline: var(--tds-focus-width) solid var(--tds-border-focus);
    outline-offset: var(--tds-focus-offset);
}

/* Le choix de période : trois `tds-button` côte à côte. La période courante
   est marquée par la structure commune (`aria-current`), plus par cette feuille. */
.periods {
    display: flex;
    gap: var(--tds-space-2);
    flex-wrap: wrap;
}

/* ── Tableaux ───────────────────────────────────────────────────────────── */

/* Les tableaux sont des `tds-table` dans un `tds-table-frame`. Il ne reste ici
   que le chemin d'une page mesurée : il peut être long, et se lit en chasse fixe. */
.path {
    font-family: var(--tds-font-family-mono);
    /*
     * Couper un chemin là où il le faut seulement — « /recherc|he » ne se lit
     * pas. `break-word` et non `anywhere` : `anywhere` ramène aussi la largeur
     * minimale de la colonne à un caractère, et à 375 px « /signaler » se
     * lisait « /si|gna|ler » (0.12.0). Avec `break-word`, la colonne garde la
     * largeur du chemin et le cadre du tableau défile.
     */
    overflow-wrap: break-word;
}

/* Les IPv6 restent lisibles dans la fiche, y compris sur petit écran. */
.adresse-ip {
    font-family: var(--tds-font-family-mono);
    overflow-wrap: break-word;
}

/* ── Barres de proportion ───────────────────────────────────────────────── */

/*
 * Un SVG étiré, dont la largeur du remplissage est un attribut : la CSP du
 * produit refuse tout style en ligne, une largeur en `style=""` n'était donc
 * jamais appliquée.
 */
.bar {
    display: block;
    width: 100%;
    height: var(--tds-space-2);
    border-radius: var(--tds-radius-sm);
    background: var(--tds-surface-sunken);
    overflow: hidden;
    margin-block-start: var(--tds-space-1);
}

.bar__fill {
    fill: var(--tds-data-1);
}

/* ── Classements : en-tête, tri, export ─────────────────────────────────── */

/* Le titre et le lien d'export sur une ligne ; l'export passe dessous si la place manque. */
.classement__tete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: var(--tds-space-3);
}

.classement__export {
    font-size: var(--tds-font-size-body-small);
}

/* Les actions d'une ligne : à droite, sans élargir la colonne. Masquées par
   l'opacité, elles gardent leur place et restent atteignables au clavier. */
.actions-icones {
    white-space: nowrap;
}

.action-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tds-control-height-sm);
    min-height: var(--tds-control-height-sm);
    border-radius: var(--tds-radius-role-control);
    color: var(--tds-text-secondary);
}

.action-icone:hover {
    background: var(--tds-action-ghost-hover);
    color: var(--tds-text-primary);
}

/* Au doigt : la cible commune. */
@media (pointer: coarse) {
    .action-icone {
        min-width: var(--tds-touch-target-web);
        min-height: var(--tds-touch-target-web);
    }
}

/* Seul un appareil qui survole les cache : au doigt, rien ne les révélerait. */
@media (hover: hover) {
    .action-icone {
        opacity: 0;
    }

    .ligne-actions:hover .action-icone,
    .ligne-actions:focus-within .action-icone {
        opacity: 1;
    }
}

/* Un en-tête de colonne qui range le tableau : lien discret, sens affiché. */
.tri {
    color: inherit;
    text-decoration: none;
}

.tri:hover,
.tri:focus-visible {
    text-decoration: underline;
}

.tri__sens {
    margin-inline-start: var(--tds-space-1);
}

/* ── Graphique ──────────────────────────────────────────────────────────── */

.chart {
    display: block;
    width: 100%;
    height: auto;
}

.chart__grid {
    stroke: var(--tds-chart-grid);
    stroke-width: 1;
}

.chart__axis {
    fill: var(--tds-chart-axis);
    font-size: var(--tds-font-size-caption);
}

.chart__area {
    fill: var(--tds-data-1);
    opacity: 0.14;
}

.chart__line {
    fill: none;
    stroke: var(--tds-data-1);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.chart__line--secondary {
    stroke: var(--tds-data-2);
    stroke-dasharray: 4 3;
}

.legend {
    display: flex;
    gap: var(--tds-space-4);
    flex-wrap: wrap;
    margin-block-start: var(--tds-space-3);
    font-size: var(--tds-font-size-caption);
    color: var(--tds-text-secondary);
}

.legend__key {
    display: inline-block;
    width: var(--tds-space-3);
    height: var(--tds-space-1);
    border-radius: var(--tds-radius-sm);
    vertical-align: middle;
    margin-inline-end: var(--tds-space-2);
}

.legend__key--1 { background: var(--tds-data-1); }
.legend__key--2 { background: var(--tds-data-2); }

/* ── Graphique : repères, cibles, points (0.12.0) ───────────────────────── */

/* Un changement de version : un trait vertical, et son numéro. */
.chart__repere {
    stroke: var(--tds-data-4);
    stroke-width: 1.5;
    stroke-dasharray: 2 3;
}

.chart__repere-texte {
    fill: var(--tds-data-4);
    font-size: var(--tds-font-size-caption);
}

/* La cible invisible d'une infobulle : toute la hauteur, la largeur d'un point. */
.chart__cible {
    fill: transparent;
}

.chart__cible:hover {
    fill: var(--tds-surface-sunken);
    fill-opacity: 0.5;
}

.chart__point {
    fill: var(--tds-data-1);
    pointer-events: none;
}

.legend__key--repere { background: var(--tds-data-4); }

/* Les annotations des lecteurs (0.19.0) : pointillé long, numéroté en pied de courbe. */
.chart__annotation {
    stroke: var(--tds-data-5);
    stroke-width: 1.5;
    stroke-dasharray: 6 3;
}

.chart__annotation-texte {
    fill: var(--tds-data-5);
    font-size: var(--tds-font-size-caption);
}

.legend__key--annotation { background: var(--tds-data-5); }

/* Une petite courbe dans une cellule : une forme, sans axe. */
.tendance {
    display: block;
    width: 6rem;
    height: var(--tds-space-6);
}

.tendance__ligne {
    fill: none;
    stroke: var(--tds-data-1);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.cellule-tendance {
    width: 6rem;
}

/* ── Moments : la grille jour × heure ───────────────────────────────────── */

.moments {
    overflow-x: auto;
}

.moments__grille {
    display: block;
    width: 100%;
    min-width: 32rem;
    height: auto;
}

/* Cinq paliers d'un seul jeton : une teinte qu'on ne compare pas n'apprend rien. */
.moments__case { fill: var(--tds-data-1); }
.moments__case--0 { fill: var(--tds-surface-sunken); }
.moments__case--1 { fill-opacity: 0.2; }
.moments__case--2 { fill-opacity: 0.4; }
.moments__case--3 { fill-opacity: 0.6; }
.moments__case--4 { fill-opacity: 0.8; }
.moments__case--5 { fill-opacity: 1; }

/* ── Résumé chiffré ─────────────────────────────────────────────────────── */

/* L'indicateur dont la courbe est tracée : l'arête de marque, et `aria-current`
   pour qui ne la voit pas. */
.indicateur--actif {
    border-color: var(--tds-brand-primary);
    border-left-color: var(--tds-brand-primary);
}

/* ── Barre de lecture : filtre et indicateur d'état ─────────────────────── */

/* Collée sous l'en-tête sur ordinateur. Elle porte les panneaux de ses
   déroulants : ils prennent sa largeur plutôt que celle de leur bouton. */
.barre-lecture {
    position: relative;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--tds-space-2) var(--tds-space-4);
    margin-block-end: var(--tds-space-4);
    padding-block: var(--tds-space-2);
    border-bottom: var(--tds-border-width-default) solid var(--tds-border-default);
    background: var(--tds-surface-canvas);
}

@media (min-width: 1024px) {
    .barre-lecture {
        position: sticky;
        top: calc(3.5rem + var(--tds-border-width-accent));
    }
}

.filtre {
    flex: 1 1 auto;
    align-items: center;
    gap: var(--tds-space-2);
    min-width: 0;
    margin: 0;
}

.filtre__periodes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tds-space-1);
}

.filtre > .filtre__champ {
    flex: 0 1 auto;
}

.filtre__deroulant > summary,
.etat-lecture > summary {
    cursor: pointer;
    list-style: none;
}

.filtre__panneau,
.etat-lecture__panneau {
    position: absolute;
    inset-block-start: 100%;
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
    padding: var(--tds-space-4);
    border: var(--tds-border-width-default) solid var(--tds-border-default);
    border-radius: var(--tds-radius-role-surface);
    background: var(--tds-surface-default);
    box-shadow: var(--tds-elevation-medium);
}

.filtre__panneau {
    inset-inline: 0;
}

.etat-lecture__panneau {
    inset-inline-end: 0;
    width: min(42rem, 100%);
}

/* Le mot dit l'état ; le point le répète pour un coup d'œil. */
.etat-lecture__point {
    width: var(--tds-space-2);
    height: var(--tds-space-2);
    border-radius: var(--tds-radius-full);
    background: var(--tds-text-muted);
}

[data-etat="ok"] .etat-lecture__point { background: var(--tds-status-success); }
[data-etat="attention"] .etat-lecture__point { background: var(--tds-status-warning); }

/* ── Filtre commun : critères actifs en puces ───────────────────────────── */

.filtres-plus {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--tds-space-3) var(--tds-space-4);
}

.puces {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tds-space-2);
    margin: 0 0 var(--tds-space-4);
    padding: 0;
    list-style: none;
}

.puce {
    display: inline-flex;
    align-items: center;
    gap: var(--tds-space-2);
    padding: var(--tds-space-1) var(--tds-space-1) var(--tds-space-1) var(--tds-space-3);
    border: var(--tds-border-width-default) solid var(--tds-border-strong);
    border-radius: var(--tds-radius-full);
    background: var(--tds-surface-default);
    font-size: var(--tds-font-size-body-small);
}

/* La croix d'une puce : une cible pleine au doigt, nommée pour les lecteurs d'écran. */
.puce__retirer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tds-space-8);
    min-height: var(--tds-space-8);
    border-radius: var(--tds-radius-full);
    color: var(--tds-text-secondary);
}

/* ── Sections, listes, pagination ───────────────────────────────────────── */

.section__tete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--tds-space-3);
    margin-block-end: var(--tds-space-4);
}

.section__tete > h2 {
    margin: 0;
}

.voir-tout {
    margin-block: var(--tds-space-2) 0;
    font-size: var(--tds-font-size-body-small);
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tds-space-3);
    margin-block-start: var(--tds-space-3);
}

.liste-simple {
    margin: 0;
    padding-inline-start: var(--tds-space-5);
}

/* « En ce moment » : un chiffre et sa définition, sur une ligne. */
.maintenant {
    margin-block: var(--tds-space-6) 0;
}

.maintenant__chiffre {
    font-size: var(--tds-font-size-heading4);
    font-weight: var(--tds-font-weight-semibold);
}

/* ── Rythme ─────────────────────────────────────────────────────────────── */

.stack > * + * {
    margin-block-start: var(--tds-space-4);
}

/* Ce qui précède un bloc et s'en détache : le retour d'une action avant la
   page, une notice avant les chiffres. */
.suite {
    margin-block-end: var(--tds-space-6);
}

.muted {
    color: var(--tds-text-muted);
    font-size: var(--tds-font-size-caption);
}

a {
    color: var(--tds-brand-link);
}

/* Le périmètre accompagne le sujet ; la courbe reste dans le plan de lecture. */
.lecture-contexte { margin: 0; overflow-wrap: break-word; }
.graphique-ouvert { min-width: 0; padding-block: var(--tds-space-4); }


/* ─── 0.19.0 : recherche, arborescence, segments enregistrés, annotations ─── */

/* La recherche d'une liste : un champ et son bouton, alignés sur la ligne de base. */
.recherche {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--tds-space-2);
    margin-block: var(--tds-space-3);
}

.recherche__champ {
    flex: 1 1 14rem;
    max-width: 28rem;
}

.recherche__etat {
    margin-block: 0 var(--tds-space-3);
    font-size: var(--tds-font-size-body-small);
}

/* Les pages par dossier : une liste imbriquée, repliable, sans puce. */
.arborescence,
.arborescence__enfants {
    list-style: none;
    margin: 0;
    padding: 0;
}

.arborescence__enfants {
    padding-inline-start: var(--tds-space-4);
    border-inline-start: var(--tds-border-width-default) solid var(--tds-border-default);
}

.arborescence__noeud {
    margin-block: var(--tds-space-1);
}

.arborescence__dossier > summary {
    cursor: pointer;
}

.arborescence__dossier > summary,
.arborescence__page {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tds-space-2);
    align-items: baseline;
    overflow-wrap: break-word;
}

.arborescence__page .muted,
.arborescence__dossier > summary .muted {
    font-size: var(--tds-font-size-body-small);
}

/* Segments enregistrés et annotations : des listes courtes, chaque ligne avec son action. */
.notes-du-lecteur {
    list-style: none;
    margin: 0 0 var(--tds-space-3);
    padding: 0;
}

.notes-du-lecteur li {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tds-space-2);
    align-items: baseline;
    margin-block: var(--tds-space-1);
    overflow-wrap: break-word;
}

.notes-du-lecteur form {
    display: inline;
}

.formulaire-en-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--tds-space-2);
}

.formulaire-en-ligne__champ {
    flex: 1 1 12rem;
    max-width: 28rem;
}

.evolution-valeur__part {
    color: var(--tds-text-muted);
}

/* Identités Atlas : les palettes lisibles du DS suivent le thème système.
   La couleur de marque est réservée au nom, jamais aux mesures ou statuts. */
.produit {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tds-space-1);
    max-width: 100%;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.produit__symbole { flex: 0 0 auto; object-fit: contain; }
.produit__nom { color: inherit; }
.produit[data-tibius-theme] > .produit__nom { color: var(--tds-brand-link); }

/* Journal : une ligne de `tds-table` par visite, dont toute la surface ouvre la
   fiche. Le lien de l'heure s'étire sur la ligne ; les autres passent au-dessus. */
.journal__ligne {
    position: relative;
}

.journal__ligne:hover {
    background: var(--tds-action-ghost-hover);
}

.journal__ouvrir::after {
    content: "";
    position: absolute;
    inset: 0;
}

.journal__ligne a:not(.journal__ouvrir) {
    position: relative;
    z-index: 1;
}

.journal__cellule--chemin {
    min-width: 10rem;
    max-width: 20rem;
}

.journal__cellule .path { overflow-wrap: anywhere; }

/* Sous 40rem : un bloc étiqueté par visite. Un chemin long s'y lit entier, sans
   faire défiler un cadre. */
@media (max-width: 40rem) {
    .journal__tete {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .journal,
    .journal__corps,
    .journal__ligne {
        display: block;
    }

    .journal__ligne {
        padding: var(--tds-space-3);
        border-bottom: var(--tds-border-width-default) solid var(--tds-border-default);
    }

    .journal .journal__cellule {
        display: grid;
        grid-template-columns: 6rem minmax(0, 1fr);
        gap: var(--tds-space-2);
        max-width: none;
        padding: var(--tds-space-1) 0;
        border-bottom: 0;
        text-align: start;
    }

    .journal__cellule::before {
        content: attr(data-libelle);
        color: var(--tds-text-secondary);
        font-size: var(--tds-font-size-caption);
    }
}

/* Compositions métier de la lecture quotidienne, sans surcharge du DS. */
.quotidien__couverture { display: block; font-weight: normal; font-size: var(--tds-font-size-caption); }
.quotidien__nombre { display: block; white-space: normal; }
.quotidien-produits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--tds-space-4); padding: 0; list-style: none; }
.quotidien-produit { min-width: 0; overflow-wrap: anywhere; }
.quotidien-produits dl { display: flex; flex-wrap: wrap; gap: var(--tds-space-4); margin-bottom: 0; }
.quotidien-produits dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Suivi privé : commandes et réceptions, composition métier responsive. */
.actualisation, .flux-activites__contexte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tds-space-2);
}
.flux-activites {
    display: grid;
    gap: var(--tds-space-3);
    padding: 0;
    list-style: none;
}
.flux-activites__ligne {
    display: grid;
    gap: var(--tds-space-2);
    padding: var(--tds-space-3);
    min-width: 0;
    overflow-wrap: anywhere;
}
.flux-activites__chemin { white-space: normal; overflow-wrap: anywhere; }

/* Identifiants de provenance et références des contrats, lisibles sur mobile. */
.couverture-galaxie { min-width: 0; overflow-wrap: anywhere; }

/* Information propre à la mesure de Stats, dans les mentions du pied commun. */
.mesure-confidentialite { max-inline-size: 42rem; }
.mesure-confidentialite summary { cursor: pointer; }