/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   BENCHMARK SECTORIEL (2026-10-14, n° 10) : la carte du hub « Face à mon secteur » (Shared/HubCarteSecteur, préfixe bsecc-) et la
   vue « Ma société face à son secteur » (Shared/BenchmarkSecteurVue, préfixe bsec-). La carte prend la matière de la carte
   « Reporting du mois » (hub-perso.css, repc-) ; la vue est une fenêtre centrée. Couleurs : jetons du thème (tokens.css), clair et
   sombre. Sens : vert favorable, rouge défavorable, gris neutre ou non comparé.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Les sens, partagés par la carte et la vue ── */
.bsec-fav { --bsec-c: var(--st-green, #34d399); }
.bsec-def { --bsec-c: var(--st-red, #f87171); }
.bsec-neu { --bsec-c: var(--mut1, #8aa0ad); }
.bsec-nd { --bsec-c: var(--mut2, #6b8a9a); }
html[data-theme="light"] .bsec-fav { --bsec-c: #047857; }
html[data-theme="light"] .bsec-def { --bsec-c: #b91c1c; }
html[data-theme="light"] .bsec-neu { --bsec-c: #4b5d68; }
html[data-theme="light"] .bsec-nd { --bsec-c: #6b7c86; }

.bsec-compte { display: inline-flex; align-items: baseline; gap: 4px; font-size: 12.5px; color: var(--mut1, #8aa0ad); white-space: nowrap; }
.bsec-compte b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--bsec-c); }
html[data-theme="light"] .bsec-compte { color: #4b5d68; }

.bsec-lien { padding: 0; border: 0; background: none; font: inherit; font-weight: 650; color: var(--brand-strong, var(--brand, #00B1CF));
             text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.bsec-lien:focus-visible { outline: 2px solid var(--brand, #00B1CF); outline-offset: 2px; border-radius: 4px; }

/* ── LA CARTE DU HUB ── */
.bsecc { position: relative; display: grid; gap: 12px; width: 100%; max-width: var(--hub-col, 1320px); margin: 14px auto 0; padding: 14px 16px;
         box-sizing: border-box;
         /* 19/10 : la peau des cartes du hub (.intent-card) ; Mat et Papier par leurs listes (style-mat.css, style-papier.css). */
         border-radius: 18px; border: 1px solid var(--o8); background: var(--o4);
         -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.hubp-perso > .bsecc { flex: 1 1 100%; margin: 0 auto; }
.hubp-grille .bsecc > .hubd-outils { top: -16px; right: 64px; }
html[data-density="compact"] .bsecc { padding: 10px 12px; gap: 10px; }
.bsecc.vit-verrou { cursor: default; }
.bsecc.vit-verrou .vit-corps > * { opacity: .4; filter: grayscale(.7); }

.bsecc-tete { display: flex; align-items: center; gap: 10px 12px; min-width: 0; flex-wrap: wrap; }
.bsecc-ic { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
            color: var(--brand-strong, var(--brand)); background: color-mix(in srgb, var(--brand, #00B1CF) 14%, transparent); }
.bsecc-ic svg { width: 18px; height: 18px; }
.bsecc-tete-tx { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; }
.bsecc-t { margin: 0; font-size: 15px; font-weight: 700; }
html[data-papier] .bsecc-t { font-family: var(--pp-serif); }
.bsecc-sect { margin: 0; font-size: 13px; color: var(--mut1, #8aa0ad); overflow-wrap: anywhere; }
.bsecc-sect b { color: var(--tx1); font-weight: 650; }
html[data-theme="light"] .bsecc-sect { color: #4b5d68; }
.bsecc-btn { flex: 0 0 auto; }
.bsecc-msg { margin: 0; font-size: 13px; color: var(--mut1, #8aa0ad); }
html[data-theme="light"] .bsecc-msg { color: #4b5d68; }

/* 18/10 : chaque ratio sur sa réglette (médiane au centre), les réglettes de la vue complète (.bsec-reg, plus bas).
   19/10 (Arthur : « prend trop de place relativement à son importance ») : une BANDE compacte. Carte plus serrée, synthèse en trois
   lignes à gauche sans cadre, quatre écarts sur deux colonnes et deux lignes ; la légende et la source en bulle. */
.bsecc { gap: 10px; padding: 12px 16px; }
html[data-density="compact"] .bsecc { padding: 9px 12px; gap: 8px; }
.bsecc-ic { width: 30px; height: 30px; border-radius: 9px; }
.bsecc-ic svg { width: 16px; height: 16px; }
.bsecc-t { font-size: 14px; }
.bsecc-sect { font-size: 12.5px; }
.bsecc-btn { padding-top: 6px; padding-bottom: 6px; }
.bsecc-corps { display: grid; grid-template-columns: minmax(170px, 210px) minmax(0, 1fr); gap: 8px 22px; align-items: center; }
.bsecc-synth { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-right: 18px; border-right: 1px solid var(--o8, rgba(255,255,255,.08)); cursor: help; }
html[data-theme="light"] .bsecc-synth { border-right-color: rgba(15, 38, 56, .1); }
.bsecc-ex { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--mut1, #8aa0ad); }
html[data-theme="light"] .bsecc-ex { color: #4b5d68; }
.bsecc-jauge { display: flex; gap: 3px; height: 6px; }
.bsecc-jauge > span { min-width: 6px; border-radius: 3px; background: var(--bsec-c); }
.bsecc-comptes { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.bsecc-comptes .bsec-compte { font-size: 11.5px; }
.bsecc-comptes .bsec-compte b { font-size: 13px; }

.bsecc-ratios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; min-width: 0; }
.bsecc-r { display: grid; grid-template-columns: 136px minmax(0, 1fr) 116px; align-items: center; column-gap: 10px; min-width: 0;
           padding: 4px 6px; margin: 0 -6px; border-radius: 8px; cursor: help; }
.bsecc-r:hover { background: var(--o4, rgba(255,255,255,.04)); }
.bsecc-r-l { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--tx1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsecc-r-l .iku-ico { flex: none; color: var(--bsec-c); }
.bsecc-r.is-fort .bsecc-r-l, .bsecc-r.is-att .bsecc-r-l { color: var(--bsec-c); font-weight: 800; }
.bsecc-r-v { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bsecc-r-v b { font-size: 13px; font-weight: 800; color: var(--bsec-c); }
.bsecc-r-v i { font-style: normal; font-size: 11.5px; color: var(--mut1, #8aa0ad); }
html[data-theme="light"] .bsecc-r-v i { color: #4b5d68; }
.bsecc .bsec-reg { height: 14px; }

@media (max-width: 1180px) {
    .bsecc-ratios { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
    .bsecc-corps { grid-template-columns: minmax(0, 1fr); }
    .bsecc-synth { padding-right: 0; border-right: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
    .bsecc-jauge { flex: 0 0 90px; }
}
@media (max-width: 640px) {
    .bsecc-btn { width: 100%; justify-content: center; }
    .bsecc-r { grid-template-columns: 112px minmax(0, 1fr) 72px; column-gap: 8px; }
    .bsecc-r-v i { display: none; }
}

/* ── LA VUE ── */
.bsec-fond { position: fixed; inset: 0; z-index: 12040; display: flex; align-items: center; justify-content: center; padding: 16px;
             background: rgba(4, 12, 18, .58); }
html[data-theme="light"] .bsec-fond { background: rgba(15, 38, 56, .32); }
.bsec-modal { position: relative; display: flex; flex-direction: column; width: min(940px, 100%); max-height: min(92vh, 980px); max-height: min(92dvh, 980px);
              border-radius: 18px; border: 1px solid var(--o8, rgba(255,255,255,.08)); background: var(--surf-pop, var(--surf-2, #102733));
              color: var(--tx1); box-shadow: 0 24px 70px rgba(0, 0, 0, .45); overflow: hidden; }
html[data-theme="light"] .bsec-modal { background: #fff; border-color: rgba(15, 38, 56, .12); box-shadow: 0 24px 70px rgba(15, 38, 56, .22); }
html[data-style="mat"] .bsec-modal { background: var(--mt-carte, var(--surf-2)); }

.bsec-tete { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--o8, rgba(255,255,255,.08)); }
html[data-theme="light"] .bsec-tete { border-bottom-color: rgba(15, 38, 56, .1); }
.bsec-ic { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
           color: var(--brand-strong, var(--brand)); background: color-mix(in srgb, var(--brand, #00B1CF) 14%, transparent); }
.bsec-tete-tx { flex: 1 1 auto; min-width: 0; }
.bsec-tete h2 { margin: 0; font-size: 18px; font-weight: 750; letter-spacing: -.01em; outline: none; }
.bsec-tete-s { margin: 3px 0 0; font-size: 13px; color: var(--mut1, #8aa0ad); }
html[data-theme="light"] .bsec-tete-s { color: #4b5d68; }
.bsec-x { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent;
          color: var(--tx1); cursor: pointer; }
.bsec-x:hover { background: var(--o6, rgba(255,255,255,.06)); }
.bsec-x:focus-visible { outline: 2px solid var(--brand, #00B1CF); outline-offset: 1px; }

.bsec-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 18px 18px; display: grid; gap: 14px; align-content: start; }

.bsec-secteur { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; padding: 10px 14px;
                border-radius: 12px; background: color-mix(in srgb, var(--brand, #00B1CF) 8%, transparent);
                border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 22%, transparent); font-size: 13.5px; }
.bsec-secteur-tx { min-width: 0; overflow-wrap: anywhere; }
.bsec-origine { color: var(--mut1, #8aa0ad); }
html[data-theme="light"] .bsec-origine { color: #4b5d68; }

.bsec-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 12px 14px; border-radius: 12px;
              border: 1px solid var(--o8, rgba(255,255,255,.08)); background: color-mix(in srgb, var(--surf-1, #0b1f29) 52%, transparent); }
html[data-theme="light"] .bsec-choix { background: #f6f8f9; border-color: rgba(15, 38, 56, .1); }
.bsec-champ { display: grid; gap: 5px; min-width: 0; }
.bsec-champ label { font-size: 12.5px; font-weight: 650; }
.bsec-champ input, .bsec-champ select { min-height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--o8, rgba(255,255,255,.12));
                                         background: var(--surf-1, #0b1f29); color: var(--tx1); font: inherit; font-size: 14px; min-width: 0; width: 100%; box-sizing: border-box; }
html[data-theme="light"] .bsec-champ input, html[data-theme="light"] .bsec-champ select { background: #fff; border-color: rgba(15, 38, 56, .2); }
.bsec-champ input:focus-visible, .bsec-champ select:focus-visible { outline: 2px solid var(--brand, #00B1CF); outline-offset: 1px; }
.bsec-champ-aide { font-size: 12px; color: var(--mut1, #8aa0ad); min-height: 1.3em; }
html[data-theme="light"] .bsec-champ-aide { color: #4b5d68; }
.bsec-choix-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.bsec-choix-note { margin-right: auto; font-size: 12px; color: var(--mut1, #8aa0ad); }

.bsec-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 14px; border-radius: 10px; border: 1px solid transparent;
            background: var(--brand, #00B1CF); color: var(--brand-ink, #032530); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; white-space: nowrap; }
.bsec-btn:hover:not(:disabled) { filter: brightness(1.06); }
.bsec-btn:disabled { opacity: .55; cursor: default; }
.bsec-btn:focus-visible { outline: 2px solid var(--brand, #00B1CF); outline-offset: 2px; }
.bsec-btn-2 { background: transparent; color: var(--tx1); border-color: var(--o8, rgba(255,255,255,.14)); }
html[data-theme="light"] .bsec-btn-2 { border-color: rgba(15, 38, 56, .2); }

.bsec-vide { margin: 0; padding: 14px; border-radius: 12px; font-size: 14px; color: var(--mut1, #8aa0ad); border: 1px dashed var(--o8, rgba(255,255,255,.14)); }
html[data-theme="light"] .bsec-vide { color: #4b5d68; border-color: rgba(15, 38, 56, .2); }

.bsec-resume { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
.bsec-resume-ex { font-size: 13px; font-weight: 700; margin-right: 4px; }

/* Les lignes : libellé et sens, valeurs, réglette, phrase. Deux colonnes au large, une sur téléphone. */
.bsec-lignes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bsec-l { display: grid; gap: 6px; padding: 11px 14px 12px; border-radius: 12px; min-width: 0;
          background: color-mix(in srgb, var(--surf-1, #0b1f29) 52%, transparent); border: 1px solid var(--o8, rgba(255,255,255,.08)); }
html[data-theme="light"] .bsec-l { background: #f8fafb; border-color: rgba(15, 38, 56, .1); }
.bsec-l-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bsec-l-lib { font-size: 13.5px; font-weight: 700; }
.bsec-pastille { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--bsec-c);
                 background: color-mix(in srgb, var(--bsec-c) 14%, transparent); white-space: nowrap; }
.bsec-l-vals { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--mut1, #8aa0ad); }
html[data-theme="light"] .bsec-l-vals { color: #4b5d68; }
.bsec-l-vals b { color: var(--tx1); font-weight: 750; font-variant-numeric: tabular-nums; margin-left: 3px; }
.bsec-l-phrase { margin: 0; font-size: 13px; line-height: 1.4; color: var(--tx1); }
.bsec-nd .bsec-l-phrase { color: var(--mut1, #8aa0ad); }
html[data-theme="light"] .bsec-nd .bsec-l-phrase { color: #4b5d68; }
.bsec-l-note { margin: 0; font-size: 12px; line-height: 1.4; color: var(--mut1, #8aa0ad); }

/* La réglette : un axe, la médiane au centre (trait vertical), la société en point, un trait de la médiane au point. */
.bsec-reg { position: relative; height: 18px; }
.bsec-reg-axe { position: absolute; left: 4%; right: 4%; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: var(--o8, rgba(255,255,255,.1)); }
html[data-theme="light"] .bsec-reg-axe { background: rgba(15, 38, 56, .1); }
.bsec-reg-fill { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: color-mix(in srgb, var(--bsec-c) 55%, transparent); }
.bsec-reg-med { position: absolute; left: 50%; top: 1px; bottom: 1px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--tx1); opacity: .55; }
.bsec-reg-pt { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--bsec-c);
               box-shadow: 0 0 0 3px color-mix(in srgb, var(--bsec-c) 22%, transparent); }
.bsec-reg-hd .bsec-reg-axe { background: linear-gradient(90deg, var(--o8, rgba(255,255,255,.1)) 92%, color-mix(in srgb, var(--bsec-c) 45%, transparent)); }
.bsec-reg-hg .bsec-reg-axe { background: linear-gradient(270deg, var(--o8, rgba(255,255,255,.1)) 92%, color-mix(in srgb, var(--bsec-c) 45%, transparent)); }
.bsec-reg-vide .bsec-reg-axe { background: repeating-linear-gradient(90deg, var(--o8, rgba(255,255,255,.1)) 0 6px, transparent 6px 10px); }

.bsec-legende { margin: -4px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 12px; color: var(--mut1, #8aa0ad); }
html[data-theme="light"] .bsec-legende { color: #4b5d68; }
.bsec-legende-med { display: inline-block; width: 2px; height: 12px; border-radius: 2px; background: var(--tx1); opacity: .55; }
.bsec-legende-pt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 8px; background: var(--brand, #00B1CF); }

.bsec-synthese { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 22%, transparent);
                 background: color-mix(in srgb, var(--brand, #00B1CF) 6%, transparent); }
.bsec-synthese-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bsec-synthese-tete h3 { margin: 0; font-size: 13.5px; font-weight: 700; }
.bsec-synthese-tx { margin: 0; font-size: 14px; line-height: 1.5; }
.bsec-synthese-aide { margin: 0; font-size: 12px; color: var(--mut1, #8aa0ad); }
html[data-theme="light"] .bsec-synthese-aide { color: #4b5d68; }

.bsec-source { margin: 0; font-size: 12px; line-height: 1.45; color: var(--mut1, #8aa0ad); }
html[data-theme="light"] .bsec-source { color: #4b5d68; }

@media (max-width: 720px) {
    .bsec-lignes { grid-template-columns: minmax(0, 1fr); }
    .bsec-choix { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .bsec-fond { padding: 0; align-items: stretch; }
    .bsec-modal { width: 100%; max-height: none; height: 100%; border-radius: 0; border: 0; }
    .bsec-tete { padding: 12px 14px 10px; }
    .bsec-corps { padding: 12px 14px 16px; }
}
html[data-motion="reduites"] .bsec-btn { transition: none; }