/*
 * Section Éclairages (portefeuille clients par NAF), mise en page reprise du tableau de bord validé
 * par José (artefact du 30/10) : chapô, sélecteur de cabinet, cartes filtrantes, barres empilées
 * par cabinet, points comparés, carte de chaleur, sociétés repliables, tableau NAF.
 * Uniquement les jetons d'app.css (DESIGN-SYSTEM §6 pour la palette des graphiques).
 */
.ecl { max-width: 1180px; gap: var(--e-5); }

/* En-tête : titre, phrase de synthèse, périmètre. */
.ecl-entete { display: grid; gap: var(--e-2); }
.ecl-entete h1 { margin: 0; }
.ecl-chapo { margin: 0; max-width: 70ch; font-size: var(--t-md); line-height: 1.5; color: var(--encre-douce); }
.ecl-chapo b { color: var(--encre); font-weight: 600; }
.ecl-entete .pil-sous-titre { margin: 0; }
.ecl-perimetre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-top: var(--e-1); }
.ecl-segments { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--trait); border-radius: var(--rayon-champ); background: var(--surface-4); }
.ecl-segments a { padding: var(--e-1) var(--e-3); border-radius: var(--rayon-xs); font-size: var(--t-sm); color: var(--encre-douce); text-decoration: none; }
.ecl-segments a:hover { color: var(--encre); }
.ecl-segments a[aria-current='page'] { background: var(--surface); color: var(--encre); font-weight: 500; box-shadow: 0 0 0 1px var(--trait); }
.ecl-segments a:focus-visible { outline: 2px solid var(--primaire); outline-offset: 1px; }
.ecl-entite { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); }
.ecl-entite label { color: var(--encre-douce); }
.ecl-entite select { height: 32px; font-size: var(--t-sm); }

/* Chiffres clés : blocs de synthèse (§9.13) cliquables, ils filtrent la liste. Le premier est teinté. */
.ecl-chiffres { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.ecl-bloc-filtre { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color var(--duree-rapide) var(--courbe); }
.ecl-bloc-filtre:hover:not(:disabled) { border-color: var(--trait); }
.ecl-bloc-filtre.bloc--teinte:hover { background: var(--succes-fond); }
.ecl-bloc-filtre:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }
.ecl-bloc-filtre[aria-pressed='true'] { border-color: var(--encre); outline: 1px solid var(--encre); outline-offset: -2px; }
.ecl-bloc-filtre[aria-pressed='true']:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }
.ecl-bloc-filtre:disabled { cursor: default; }
/* Un nom de secteur dans le grand chiffre : coupure en fin de syllabe (Poppins est plus large). */
.ecl-bloc-filtre .chiffre__valeur { overflow-wrap: break-word; hyphens: auto; }
.ecl-bloc-filtre[data-chiffre="premier-secteur"] .chiffre__valeur { font-size: var(--t-lg); line-height: 1.3; }

/* Filtres actifs. */
.ecl-filtres { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-top: calc(-1 * var(--e-2)); }
.ecl-puces { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.ecl-puces:empty { display: none; }
.ecl-puce { font: inherit; font-size: var(--t-xs); padding: 2px var(--e-2); border: 1px solid var(--trait); border-radius: var(--rayon-pilule); background: var(--surface); color: var(--encre); cursor: pointer; }
.ecl-puce:hover { border-color: var(--trait-champ); }
.ecl-puce--discrete { background: transparent; color: var(--encre-douce); }
.ecl-puce:focus-visible { outline: 2px solid var(--primaire); outline-offset: 1px; }
.ecl-avertissement { margin: calc(-1 * var(--e-2)) 0 0; padding: var(--e-2) var(--e-3); border: 1px solid var(--attention-trait); border-radius: var(--rayon-champ); background: var(--attention-fond); color: var(--attention-texte); font-size: var(--t-sm); }
.ecl-avertissement code { font-family: var(--police); font-size: var(--t-xs); }
.ecl-avertissement > summary { cursor: pointer; font-weight: 500; }
.ecl-avertissement p { margin: var(--e-2) 0; color: var(--encre); }
.ecl-a-completer { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--rayon-xs); color: var(--encre); }
.ecl-a-completer th { text-align: left; font-weight: 500; font-size: var(--t-xs); color: var(--encre-douce); padding: var(--e-1) var(--e-2); border-bottom: 1px solid var(--trait-2); }
.ecl-a-completer td { padding: var(--e-1) var(--e-2); border-bottom: 1px solid var(--trait-2); vertical-align: middle; }
.ecl-a-completer td:last-child { text-align: right; }
.ecl-a-completer a:not(.bouton) { color: var(--primaire); }

/* Sections et cartes. */
.ecl-section { display: grid; gap: var(--e-3); min-width: 0; }
.ecl-h2 { margin: 0; font-size: var(--t-lg); font-weight: 500; }
.ecl-h2 small { font-size: var(--t-xs); font-weight: 400; color: var(--encre-douce); margin-left: var(--e-2); }
.ecl-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--e-3); align-items: start; }
/* Cartes = .carte.bloc ; le titre d'un bloc reste en encre (le gris de `.carte h3` est pour les sous-titres). */
.ecl .bloc__tete > h3 { color: var(--encre); }
.ecl-pied { max-width: 80ch; line-height: 1.5; }
.ecl-pied code { font-family: var(--police); }

/* Couleur de chaque cabinet. */
.ecl-cab--1 { background: var(--graphe-1); }
.ecl-cab--2 { background: var(--graphe-2); }
.ecl-cab--3 { background: var(--graphe-3); }
/* Catégories (§6) : indigo, encre, indigo clair, menthe ; au-delà, teintes de la suite indigo, jamais les couleurs d'état. */
.ecl-cab--4 { background: var(--graphe-menthe); }
.ecl-cab--5 { background: var(--graphe-seq-2); }
.ecl-cab--6 { background: var(--graphe-seq-5); }
.ecl-cab--autre { background: var(--graphe-4); }
.ecl-legende { display: flex; flex-wrap: wrap; gap: var(--e-3); margin: 0; padding: 0; list-style: none; font-size: var(--t-xs); color: var(--encre-douce); }
.ecl-legende li { display: inline-flex; align-items: center; gap: 6px; }
.ecl-legende i, .ecl-bulle i, .ecl-pilule i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* Barres horizontales empilées. */
.ecl-barres, .ecl-points { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ecl-barre-ligne { position: relative; }
.ecl-barre, .ecl-point { all: unset; box-sizing: border-box; display: grid; grid-template-columns: minmax(84px, 9.5rem) minmax(0, 1fr) auto; align-items: center; gap: var(--e-3); width: 100%; padding: 3px var(--e-1); border-radius: var(--rayon-xs); font-size: var(--t-sm); cursor: pointer; }
.ecl-point { grid-template-columns: minmax(84px, 9.5rem) minmax(0, 1fr); }
.ecl-barre:hover, .ecl-point:hover { background: var(--surface-4); }
.ecl-barre:focus-visible, .ecl-point:focus-visible { outline: 2px solid var(--primaire); outline-offset: 0; }
.ecl-barre[aria-pressed='true'], .ecl-point[aria-pressed='true'] { background: var(--surface-4); box-shadow: inset 2px 0 0 var(--encre); }
.ecl-barre__libelle { text-align: right; color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecl-barre__piste { display: flex; gap: 1px; height: 16px; min-width: 0; }
.ecl-barre__segment { height: 100%; min-width: 2px; border-radius: 2px; }
.ecl-barre__valeur { min-width: 4.5rem; font-size: var(--t-xs); color: var(--encre-douce); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Infobulle d'une barre ou d'un point : au survol et au focus. */
.ecl-bulle { position: absolute; z-index: 5; left: min(10rem, 40%); top: calc(100% - 2px); display: none; gap: 2px; min-width: 12rem; max-width: 22rem; padding: var(--e-2) var(--e-3); border-radius: var(--rayon-champ); background: var(--infobulle); color: #fff; font-size: var(--t-xs); pointer-events: none; }
.ecl-barre-ligne:hover .ecl-bulle, .ecl-barre-ligne:focus-within .ecl-bulle { display: grid; }
.ecl-bulle strong { font-weight: 600; margin-bottom: 2px; }
.ecl-bulle__ligne { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.ecl-bulle__ligne b { margin-left: auto; padding-left: var(--e-3); font-weight: 600; }
.ecl-bulle__code { color: var(--marque-3); }
.ecl-bulle__code code { font-family: var(--police); color: #fff; }

/* Comparaison entre cabinets : un point par cabinet, reliés par un trait. */
.ecl-point__piste { position: relative; display: block; height: 20px; }
.ecl-point__graduation { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--trait-2); }
.ecl-point__ecart { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--trait); }
.ecl-point__rond { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--surface); }
.ecl-points__axe { display: grid; grid-template-columns: minmax(84px, 9.5rem) minmax(0, 1fr); gap: var(--e-3); padding: 0 var(--e-1); }
.ecl-points__axe .ecl-point__piste span { position: absolute; transform: translateX(-50%); font-size: var(--t-xs); color: var(--encre-douce); white-space: nowrap; }

/* Croisement secteur × taille : carte de chaleur. */
.ecl-chaleur { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.ecl-chaleur th { font-weight: 400; color: var(--encre-douce); font-size: var(--t-xs); text-align: center; padding: 0 var(--e-1); white-space: nowrap; }
.ecl-chaleur tbody th { text-align: right; color: var(--encre); font-size: var(--t-sm); padding-right: var(--e-2); }
.ecl-chaleur td { padding: 0; min-width: 56px; }
.ecl-case { all: unset; box-sizing: border-box; display: block; width: 100%; height: 26px; line-height: 26px; text-align: center; border-radius: var(--rayon-xs); background: color-mix(in srgb, var(--graphe-1) var(--intensite, 0%), var(--surface)); color: var(--encre); cursor: pointer; }
.ecl-case:hover { box-shadow: inset 0 0 0 1px var(--encre-douce); }
.ecl-case:focus-visible { outline: 2px solid var(--primaire); outline-offset: 1px; }
.ecl-case[aria-pressed='true'] { box-shadow: inset 0 0 0 2px var(--encre); font-weight: 600; }
.ecl-case--vide { background: var(--surface-4); color: var(--encre-pale); cursor: default; }
.ecl-chaleur__total { text-align: right !important; font-weight: 600; color: var(--encre) !important; padding-left: var(--e-2) !important; }

/* Sociétés par secteur : secteurs repliables. */
.ecl-recherche { height: 34px; width: min(100%, 22rem); font-size: var(--t-sm); }
.ecl-recherche-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.ecl-groupes { display: grid; border-top: 1px solid var(--trait-2); }
.ecl-groupe { border-bottom: 1px solid var(--trait-2); }
.ecl-groupe > summary { display: flex; align-items: baseline; gap: var(--e-2); padding: var(--e-2) var(--e-1); cursor: pointer; font-size: var(--t-base); }
.ecl-groupe > summary:hover { background: var(--surface-4); }
.ecl-groupe > summary:focus-visible { outline: 2px solid var(--primaire); outline-offset: -2px; }
.ecl-groupe__nom { font-weight: 500; }
.ecl-groupe__n { margin-left: auto; font-size: var(--t-xs); color: var(--encre-douce); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ecl-societes { margin: 0; padding: 0 0 var(--e-2); list-style: none; }
.ecl-societe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--e-3); padding: var(--e-1) var(--e-2) var(--e-1) var(--e-5); font-size: var(--t-sm); }
.ecl-societe + .ecl-societe { border-top: 1px dashed var(--trait-2); }
.ecl-societe a { color: var(--primaire); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.ecl-societe a:hover { text-decoration: underline; }
.ecl-societe__meta { grid-column: 1 / -1; font-size: var(--t-xs); color: var(--encre-douce); }
.ecl-societe__meta code { font-family: var(--police); color: var(--encre); }
.ecl-pilule { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-xs); color: var(--encre-douce); white-space: nowrap; }
.ecl-pilule i { border-radius: 50%; width: 8px; height: 8px; }

/* Tableau par code NAF. */
.ecl-defile { max-height: 32rem; overflow: auto; border-top: 1px solid var(--trait-2); }
.ecl-naf thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.ecl-naf tr[data-hors-filtre] { display: none; }
.ecl-naf td:first-child { white-space: nowrap; }
.ecl-naf code { font-family: var(--police); font-size: var(--t-xs); }
.ecl-naf__secteur { white-space: nowrap; }
.ecl-tri { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ecl-tri:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; border-radius: 2px; }
.ecl-tri::after { content: '↕'; opacity: .4; font-size: 10px; }
th[aria-sort='ascending'] .ecl-tri::after { content: '↑'; opacity: 1; }
th[aria-sort='descending'] .ecl-tri::after { content: '↓'; opacity: 1; }

@media (max-width: 640px) {
    .ecl-barre, .ecl-point, .ecl-points__axe { grid-template-columns: minmax(70px, 7rem) minmax(0, 1fr) auto; gap: var(--e-2); }
    .ecl-point, .ecl-points__axe { grid-template-columns: minmax(70px, 7rem) minmax(0, 1fr); }
    .ecl-naf__secteur { display: none; }
    .ecl-bulle { left: var(--e-2); }
    /* Dossiers à compléter : une fiche par dossier, sans défilement horizontal. */
    .ecl-a-completer, .ecl-a-completer tbody, .ecl-a-completer tr, .ecl-a-completer td { display: block; }
    .ecl-a-completer thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .ecl-a-completer tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3); padding: var(--e-2); border-bottom: 1px solid var(--trait-2); }
    .ecl-a-completer td { padding: 0; border: 0; min-width: 0; }
    .ecl-a-completer td:first-child { flex-basis: 100%; overflow-wrap: anywhere; }
    .ecl-a-completer td[data-libelle]::before { content: attr(data-libelle) ' : '; color: var(--encre-douce); font-size: var(--t-xs); }
    .ecl-a-completer td:last-child { margin-left: auto; }
}

/* Secteur modifiable : lien par société, repère « secteur saisi », dialogue, écran de recalcul. */
.ecl-societe__droite { display: inline-flex; align-items: center; gap: var(--e-2); }
.ecl-societe .ecl-societe__secteur { font-size: var(--t-xs); font-weight: 500; color: var(--encre-douce); padding: 1px var(--e-2); border: 1px solid var(--trait); border-radius: var(--rayon-xs); }
.ecl-societe .ecl-societe__secteur:hover { color: var(--encre); border-color: var(--trait); text-decoration: none; }
.ecl-saisi { display: inline-block; padding: 0 6px; border-radius: 999px; background: var(--surface-4); color: var(--encre); font-weight: 500; }
.ecl-a-classer { margin: 0 0 var(--e-3); font-size: var(--t-sm); color: var(--encre-douce); }
.ecl-dialogue { width: min(440px, 92vw); padding: var(--e-5); border: 1px solid var(--trait); border-radius: 8px; background: var(--surface); color: var(--encre); }
.ecl-dialogue::backdrop { background: rgba(31, 41, 55, .45); backdrop-filter: blur(3px); }
.ecl-dialogue h2 { margin: 0 0 var(--e-4); font-size: var(--t-md); }
.ecl-dialogue__actions { display: flex; justify-content: flex-end; gap: var(--e-2); margin-top: var(--e-3); }
.ecl-recalcul-sirene { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); }
.ecl-recalcul-sirene p { margin: 0; font-size: var(--t-sm); }
.ecl-recalcul select { height: 30px; font-size: var(--t-sm); }
.ecl-recalcul td { vertical-align: top; }