/* =====================================================================
   Exavoris — sgbl_sunburst.css  (sgbl-Scripts/sunburst)
   Habillage du composant Sunburst : légende DOM (blocs de niveau) + canvas des anneaux.

   Aucune variable n'est DÉFINIE ici — seulement consommée depuis le :root de gbl_styles.css
   (cf. _direction/2_app-conventions/edition-css.md), qui n'est donc pas touché : aucune page
   n'a de cache-busting à relever de ce fait. Les couleurs du graphique lui-même restent
   résolues en JS (dégradé de niveaux, survol).

   > Le bouton d'isolement de niveau ne porte PAS les classes .buttonstructure-* /
   > .buttonstyle-* : c'est une commande d'icône propre au composant, sans texte, dont
   > l'habillage global (remplissage, contour, capitalisation) serait déplacé. Écart à
   > edition-css.md décidé le 2026-08-02 et consigné au Changelog.

   Sections ordonnées : A petits éléments · B textes · C secondaires · D structurels.
   ===================================================================== */

/* ---------- A. Petits éléments fonctionnels ---------- */

/* Deux calques : les anneaux DESSOUS (ils portent le survol), les liaisons AU-DESSUS et
   transparentes aux clics — sans quoi le prolongement du trait dans la carte d'étiquette
   passerait sous le fond opaque de celle-ci. */
.exv-sb-canvas,
.exv-sb-leaders {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.exv-sb-leaders {
    z-index: 2;
    pointer-events: none;
}

/* Œil ouvert = niveau visible ; œil barré = niveau replié. Bandeau plein hauteur à la couleur du
   niveau (posée en JS) : le bouton EST le repère de niveau, il n'a donc besoin d'aucun libellé. */
.exv-sb-eye {
    flex: 0 0 auto;
    align-self: stretch;
    width: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    font-size: 17px;
    cursor: pointer;
    color: var(--cl-blanc);
    border: none;
    transition: opacity 0.15s ease;
}

.exv-sb-eye:hover {
    opacity: 0.82;
}

.exv-sb-eye svg {
    width: 1em;
    height: 1em;
    display: block;
}

/* ---------- B. Textes ---------- */

/* Le dégradé de teinte du niveau est posé en JS ; il court sur toute la largeur du bandeau, d'où
   le titre à fond perdu plutôt qu'en retrait. */
.exv-sb-etq-groupe {
    font-size: var(--ht-texte-08);
    font-weight: var(--wg-texte-semibold);
    color: var(--theme-texte-primaire);
    margin: 0 0 4px;
    padding: 6px 10px 5px;
}

.exv-sb-etq-el {
    font-size: var(--ht-texte-09);
    line-height: 1.45;
    margin: 0;
    padding: 0 10px 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

.exv-sb-etq-el.is-hover {
    font-weight: var(--wg-texte-medium);
}

.exv-sb-etq-more {
    color: var(--theme-texte-tertiaire);
}

.exv-sb-table {
    font-size: var(--ht-texte-07);
}

/* ---------- C. Secondaires (conteneurs, états) ---------- */

/* Un niveau isolé estompe les autres blocs ET les rend inertes : leurs anneaux ne sont plus
   dessinés, les survoler n'aurait rien à mettre en évidence. */
.exv-sb-lv.is-off {
    opacity: 0.35;
    pointer-events: none;
}

/* Sous 420 px, le graphique devient illisible : la table de repli le remplace. Elle est TOUJOURS
   rendue au-dessus, mais masquée visuellement — un canvas est opaque aux lecteurs d'écran, et
   display:none la retirerait aussi de l'arbre d'accessibilité. */
.exv-sb--fallback .exv-sb-canvas,
.exv-sb--fallback .exv-sb-leaders,
.exv-sb--fallback .exv-sb-legend {
    display: none;
}

.exv-sb-fallback:empty {
    display: none;
}

.exv-sb-fallback--sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- D. Structurels (layout) ---------- */

.exv-sb-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 6px;
}

/* Le canvas est en position absolue SOUS la légende et couvre tout le composant : les liaisons
   peuvent ainsi rejoindre les étiquettes, qui sont du DOM. La hauteur est dictée par la légende
   (le canvas la suit), avec un plancher pour que le disque respire. */
.exv-sb {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 470px;
}

.exv-sb-legend {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 288px;
    max-width: 40%;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 4px 0;
}

/* Un bloc par niveau : son bouton et ses étiquettes sur la MÊME ligne, ce qui les aligne par
   construction. Le cadre rend la structure lisible — on voit à quel niveau appartient quoi. */
.exv-sb-lv {
    display: flex;
    align-items: stretch;
    min-width: 0;
    overflow: hidden;
    background: var(--theme-bg-secondaire);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--border-radius-classic);
}

.exv-sb-etq {
    min-width: 0;
    flex: 1 1 auto;
    padding-bottom: 4px;
}

/* Variante du pop-up de listing : verrouillée sur un seul niveau, donc sans bouton d'isolement.
   `--pop` et `exv-sb` sont portés par le MÊME élément (le composant ajoute sa classe à l'hôte) :
   le sélecteur doit donc être composé, pas descendant. */
.exv-sb-wrap--pop.exv-sb {
    min-height: 250px;
}

.exv-sb-wrap--pop .exv-sb-legend {
    width: 172px;
    max-width: 50%;
}

@media (max-width: 900px) {
    .exv-sb-legend {
        width: 224px;
    }

    .exv-sb {
        min-height: 400px;
    }
}