/* ==========================================================================
   Page Indicateurs — reprise de la maquette « Redesign des indicateurs ».
   Feuille globale et non scopée : les blocs sont rendus par la page ET par les
   composants de Components/Indicators, qui ont chacun leur propre scope CSS.
   La palette vient de variables.css, identique à celle de la maquette.
   ========================================================================== */

/* ---------- État de rechargement ----------
   Un changement de filtre garde les chiffres précédents à l'écran, atténués, au lieu de sortir
   tout le contenu de l'arbre de rendu : le reconstruire coûtait plus cher que le calcul lui-même,
   et faisait perdre la page courante des tables. */
.indicators-page.is-refreshing {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.12s ease-out;
}

/* ---------- En-tête et filtres ---------- */
.ind-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 0.5rem;
}

.ind-toolbar__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
    margin: 0;
}

.ind-toolbar__sub {
    font-size: 0.875rem;
    color: var(--color-text-subtle);
    margin: 0.15rem 0 0;
}

/* Ouvre le panneau des règles transverses. Discret : c'est une aide, pas une action. */
.ind-guide-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.5rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-primary);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

    .ind-guide-btn:hover {
        text-decoration: underline;
    }

.ind-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ---------- Barre d'onglets ---------- */
.ind-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.ind-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--color-text-subtle);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: color var(--transition-base), border-color var(--transition-base);
}

    .ind-tab:hover {
        color: var(--color-text);
    }

    .ind-tab.active {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
    }

    .ind-tab i {
        font-size: 0.875rem;
    }

/* ---------- Titre de vue ---------- */
.ind-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 0.75rem;
}

.ind-section-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.ind-section-scope {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* Bouton de recalcul déguisé en mention d'horodatage : discret, mais cliquable — c'est la seule
   porte de sortie du cache de 5 minutes. */
.ind-freshness {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.ind-freshness:hover:not(:disabled) {
    color: var(--color-text-secondary);
}

.ind-freshness:disabled {
    cursor: default;
}

/* ---------- Cartes KPI ---------- */
.ind-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
    gap: 0.75rem;
}

.ind-kpi {
    position: relative;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* position: relative — c'est cet en-tête, et non la carte, qui ancre la bulle d'aide :
   la bulle épouse ainsi la largeur de la carte et s'ouvre juste sous l'intitulé.

   Volontairement sans z-index : hisser tout l'en-tête au-dessus du bouton qui recouvre la
   carte rendait l'intitulé et l'icône inertes — le clic y mourait au lieu de tracer la mesure.
   Seul le « i » a besoin de passer devant (voir .ind-info). */
.ind-kpi__head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}

.ind-kpi__label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

.ind-kpi__icon {
    font-size: 0.9375rem;
    color: var(--color-primary);
    opacity: 0.75;
}

.ind-kpi__row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ind-kpi__value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.ind-kpi__delta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--color-success-light);
    color: var(--color-success);
}

    .ind-kpi__delta.is-down {
        background: var(--color-danger-light);
        color: var(--color-danger);
    }

    .ind-kpi__delta i {
        font-size: 0.625rem;
    }

.ind-kpi__sub {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text-subtle);
    line-height: 1.35;
    min-height: 2rem;
}

.ind-kpi__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-top: 1px solid var(--color-border-light);
    padding-top: 0.5rem;
}

.ind-kpi__spark-label {
    font-size: 0.625rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ---------- Cartes de contenu ---------- */
.ind-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    margin-top: 0.875rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.ind-card__head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.ind-card__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
}

    .ind-card__title i {
        color: var(--color-primary);
        font-size: 1rem;
    }

.ind-card__hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.ind-card__body {
    padding: 0.875rem 1.25rem;
}

/* ---------- Légende de courbe ---------- */
.ind-legend {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ind-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--color-text-subtle);
}

.ind-legend__dot {
    width: 10px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-primary);
    display: inline-block;
}

/* ---------- Bulle d'aide accolée à un chiffre ----------
   Tout en CSS : la page compte une soixantaine de « i », un aller-retour Blazor par survol
   serait absurde. La bulle est positionnée par rapport à la carte hôte (.ind-kpi__head,
   .ind-card__head sont en position: relative), jamais par rapport à l'icône :
   elle épouse la largeur de son hôte et ne peut donc pas déborder de l'écran. */
.ind-info {
    display: inline-flex;
    align-items: center;
    /* Seul morceau d'en-tête à passer devant les boutons qui recouvrent la carte KPI et
       l'en-tête repliable : le « i » garde son survol, et tout le reste de l'intitulé laisse
       filer le clic vers le bouton. Pas de position: relative ici — la bulle doit rester
       ancrée à l'en-tête et non à l'icône ; le z-index seul suffit sur un élément flex. */
    z-index: 2;
}

.ind-info__btn {
    display: inline-flex;
    padding: 0;
    border: none;
    background: none;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: help;
    transition: color var(--transition-base);
}

    .ind-info__btn i {
        font-size: 0.8125rem;
        color: inherit;
    }

    .ind-info__btn:hover,
    .ind-info__btn:focus-visible {
        color: var(--color-primary);
    }

.ind-info__bubble {
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 220px;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    /* L'hôte est souvent en majuscules espacées : la bulle repart de zéro. */
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    line-height: 1.45;
    opacity: 0;
    visibility: hidden;
    /* Une bulle d'aide ne prend jamais un clic : ouverte, elle recouvre la valeur de la carte
       ou les premières lignes du tableau, qui doivent rester cliquables — même règle que les
       infobulles de courbe (.ind-mini__tip, .ind-overlay__tip). */
    pointer-events: none;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.ind-card__head .ind-info__bubble {
    left: 1.25rem;
    right: 1.25rem;
}

/* Survol, et focus clavier uniquement : au clic souris, :focus-within laissait la bulle
   épinglée en travers du contenu bien après que la souris soit partie. */
.ind-info:hover .ind-info__bubble,
.ind-info__btn:focus-visible + .ind-info__bubble {
    opacity: 1;
    visibility: visible;
}

/* Sans survol — au doigt — le focus reprend ce rôle : c'est la seule façon d'ouvrir la bulle.
   L'appui suivant, ailleurs, retire le focus et la referme. */
@media (hover: none) {
    .ind-info:focus-within .ind-info__bubble {
        opacity: 1;
        visibility: visible;
    }
}

.ind-info__formula {
    font-weight: 600;
    color: var(--color-primary);
}

.ind-info__note {
    color: var(--color-text-secondary);
}

.ind-info__window {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-top: 1px solid var(--color-border-light);
    padding-top: 0.375rem;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

/* ---------- Panneau « Comment lire cette page » ---------- */
.ind-doc {
    display: flex;
    flex-direction: column;
}

/* Le panneau est trop étroit pour la grille terme / définition : la mesure de viewport
   ne dit rien de la largeur du drawer, d'où ce modificateur explicite. */
.ind-doc--stacked .ind-doc__item {
    grid-template-columns: 1fr;
    padding-left: 0;
    padding-right: 0;
}

    .ind-doc--stacked .ind-doc__term {
        grid-row: auto;
    }

.ind-guide__title {
    margin: 1.5rem 0 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
}

.ind-doc__item {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 0.25rem 1.25rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--color-border-light);
}

    .ind-doc__item:last-child {
        border-bottom: none;
    }

.ind-doc__term {
    grid-row: span 2;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
}

.ind-doc__formula {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-primary);
}

.ind-doc__note {
    font-size: 0.8125rem;
    color: var(--color-text-subtle);
    line-height: 1.5;
}

@media (max-width: 720px) {
    .ind-doc__item {
        grid-template-columns: 1fr;
    }

    .ind-doc__term {
        grid-row: auto;
    }
}

/* ---------- Puces de statut dans les tables ---------- */
.ind-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

    .ind-chip.is-good {
        background: var(--color-success-light);
        color: #15803d;
    }

    .ind-chip.is-bad {
        background: var(--color-danger-light);
        color: #b91c1c;
    }

    .ind-chip.is-warn {
        background: rgba(245, 158, 11, 0.12);
        color: var(--color-warning-text);
    }

.ind-num {
    font-variant-numeric: tabular-nums;
}

.ind-muted {
    color: var(--color-text-muted);
}

.ind-bad {
    color: #b91c1c;
}

/* ── DÉTAIL D'UNE LIGNE ───────────────────────────────
   Ouvert par un clic sur une ligne de table. Global comme le reste du fichier : le panneau
   est rendu par la page, la courbe par un composant enfant — un style scopé ne toucherait
   que l'un des deux. */
.ind-detail {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ind-detail__head {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ind-detail__kind {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.ind-detail__sub {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.ind-detail__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.625rem;
}

.ind-detail__stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.ind-detail__stat-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.ind-detail__stat-value {
    font-size: 1.0625rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.ind-detail__chart {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ind-detail__chart-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
}

.ind-detail__chart-window {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.ind-detail__chart-hint {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* ── COURBE SURVOLABLE ────────────────────────────────
   Une bande invisible par point : le survol révèle le repère et la valeur exacte, sans
   aucun aller-retour serveur (un @onmousemove Blazor coûterait un message SignalR par
   déplacement de souris). */
.ind-mini {
    position: relative;
    height: 96px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

/* Chargement ou échec de la courbe de détail. Même hauteur que .ind-mini : la courbe arrive
   après les chiffres de la ligne, et une boîte plus courte ferait sauter la mise en page. */
.ind-detail__chart-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 96px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.ind-mini__svg {
    display: block;
    width: 100%;
    height: 100%;
}

.ind-mini__bands {
    position: absolute;
    inset: 0;
    display: flex;
}

.ind-mini__band {
    position: relative;
    flex: 1;
}

.ind-mini__rule,
.ind-mini__dot,
.ind-mini__tip {
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}

.ind-mini__band:hover .ind-mini__rule,
.ind-mini__band:hover .ind-mini__dot,
.ind-mini__band:hover .ind-mini__tip {
    opacity: 1;
}

.ind-mini__rule {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    margin-left: -0.5px;
    background: var(--color-border);
}

.ind-mini__dot {
    position: absolute;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-bg);
}

.ind-mini__tip {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--color-text);
    color: #fff;
    white-space: nowrap;
    z-index: 1;
}

.ind-mini__tip-label {
    font-size: 0.6875rem;
    opacity: 0.75;
}

.ind-mini__tip-value {
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Résumé textuel de la courbe, pour les lecteurs d'écran uniquement. */
.ind-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Fenêtre sans rien à mesurer : la bulle le dit au lieu d'afficher un zéro. */
.ind-mini__tip.is-empty .ind-mini__tip-value {
    font-weight: 400;
    opacity: 0.75;
}

.ind-mini__empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* Sélecteur de mesure du panneau de détail. Des puces plutôt que le groupe segmenté de la
   barre d'outils : celui-ci est figé à 34 px de haut et une seconde ligne en débordait. */
.ind-measures {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.ind-measure {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--transition-fast);
}

    .ind-measure:hover:not(.active) {
        border-color: var(--color-primary);
        color: var(--color-text);
    }

    .ind-measure.active {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: #fff;
    }

/* Repères permanents : posés en HTML, la boîte SVG étant étirée horizontalement. */
.ind-mini__markers {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ind-mini__marker {
    position: absolute;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* ── COURBE COMPOSÉE ──────────────────────────────────
   Palette catégorielle assignée dans un ordre fixe, jamais recyclée : la couleur suit la
   mesure, pas son rang de sélection. Les quatre pas sont validés en clair comme en sombre
   (bande de clarté, plancher de chroma, séparation daltonienne et vision normale sur les
   paires adjacentes). Le plafond de quatre courbes vient de là : au-delà, les pas suivants
   ne se distinguent plus. Trois pas clairs passent sous 3:1 de contraste — d'où la légende
   nommée, l'infobulle chiffrée et l'équivalent texte, jamais la couleur seule. */
:root {
    --ind-series-1: #2a78d6;
    --ind-series-2: #eb6834;
    --ind-series-3: #1baf7a;
    --ind-series-4: #eda100;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Mêmes teintes, repas pour le fond sombre — pas un simple éclaircissement. */
        --ind-series-1: #3987e5;
        --ind-series-2: #d95926;
        --ind-series-3: #199e70;
        --ind-series-4: #c98500;
    }
}

.ind-overlay {
    display: grid;
    grid-template-columns: 52px 1fr;
    grid-template-rows: 240px 22px;
    align-items: stretch;
}

.ind-overlay__yaxis {
    position: relative;
}

/* Sans axe de valeurs — plusieurs courbes normalisées — la gouttière n'a rien à porter. */
.ind-overlay.is-relative {
    grid-template-columns: 0 1fr;
}

    .ind-overlay__yaxis span {
        position: absolute;
        right: 0.5rem;
        transform: translateY(-50%);
        font-size: 0.6875rem;
        font-variant-numeric: tabular-nums;
        color: var(--color-text-muted);
        white-space: nowrap;
    }

.ind-overlay__xaxis {
    position: relative;
}

    .ind-overlay__xaxis span {
        position: absolute;
        transform: translateX(-50%);
        font-size: 0.6875rem;
        font-variant-numeric: tabular-nums;
        color: var(--color-text-muted);
        white-space: nowrap;
    }

.ind-overlay__plot {
    position: relative;
}

/* Filets pleins, un ton au-dessus du fond : un tireté se lirait comme un seuil. */
.ind-overlay__grid {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-border-light);
}

.ind-overlay__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ind-overlay__bands {
    position: absolute;
    inset: 0;
    display: flex;
}

.ind-overlay__band {
    position: relative;
    flex: 1;
    cursor: crosshair;
}

.ind-overlay__rule,
.ind-overlay__dot,
.ind-overlay__tip {
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}

.ind-overlay__band:hover .ind-overlay__rule,
.ind-overlay__band:hover .ind-overlay__dot,
.ind-overlay__band:hover .ind-overlay__tip,
.ind-overlay__band:focus-visible .ind-overlay__rule,
.ind-overlay__band:focus-visible .ind-overlay__dot,
.ind-overlay__band:focus-visible .ind-overlay__tip {
    opacity: 1;
}

.ind-overlay__rule {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    margin-left: -0.5px;
    background: var(--color-border);
}

/* Anneau de surface plutôt qu'un contour : deux repères superposés restent distincts. */
.ind-overlay__dot {
    position: absolute;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--color-bg);
}

.ind-overlay__tip {
    position: absolute;
    top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.4rem 0.55rem;
    border-radius: var(--radius-sm);
    background: var(--color-text);
    color: #fff;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
}

    .ind-overlay__tip.is-start {
        left: 0;
        transform: none;
    }

    .ind-overlay__tip.is-end {
        left: auto;
        right: 0;
        transform: none;
    }

.ind-overlay__tip-label {
    font-size: 0.6875rem;
    opacity: 0.75;
}

.ind-overlay__tip-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
}

.ind-overlay__tip-dot {
    width: 8px;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}

.ind-overlay__tip-name {
    flex: 1;
}

.ind-overlay__tip-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ind-overlay__scale {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.ind-overlay__empty {
    margin: 0;
    padding: 2.5rem 0;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* Carte KPI commandant la courbe : le bouton recouvre la carte, sous le « i » qui garde son
   propre survol. */
.ind-kpi.is-selectable {
    cursor: pointer;
}

.ind-kpi__toggle {
    position: absolute;
    inset: 0;
    z-index: 1;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.ind-kpi.is-selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}

.ind-kpi.is-selectable:hover:not(.is-selected) {
    border-color: var(--color-text-muted);
}

/* ── CARTES REPLIABLES ────────────────────────────────
   Les deux tables du bas arrivent repliées : la page s'ouvre sur les chiffres et la courbe.
   Le repli est en CSS et non par retrait du rendu — les tables sont paginées à dix lignes,
   les garder dans l'arbre coûte peu et évite de perdre la page courante à chaque bascule. */
.ind-card--collapsible:not(.is-open) > :not(.ind-card__head) {
    display: none;
}

.ind-card--collapsible .ind-card__head {
    cursor: pointer;
}

/* Replié, l'en-tête est tout le contenu : il ne doit pas garder le trait de séparation. */
.ind-card--collapsible:not(.is-open) .ind-card__head {
    border-bottom: none;
}

.ind-card__chevron {
    transition: transform var(--transition-fast);
}

.ind-card--collapsible.is-open .ind-card__chevron {
    transform: rotate(90deg);
}

/* Le bouton recouvre l'en-tête entier, chevron et titre compris : ce sont les cibles les plus
   naturelles pour déplier. Seul le « i » lui passe devant (z-index sur .ind-info). */
.ind-card__toggle {
    position: absolute;
    inset: 0;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}