/* ═══════════════════════════════════════════════════════════════════════════════════════════════════
   LE HUB DU GROUPE (16/10, maquette validée par Arthur : maquette-hub-groupe/hub-groupe.html ; Shared/HubGroupe, préfixe hg-).
   Jetons du thème seulement (clair, sombre, Mat, Papier, palettes) : encre, séries de la palette active pour les sociétés (--org-ent-n,
   comme l'organigramme : la série n, même teinte d'un thème à l'autre), séries 5, 6 et le trait de marque pour les flux internes.
   Aucun :has().
   SURFACES = CELLES DU HUB D'UN DOSSIER SEUL (16/10, Arthur : « harmonise le style du hub groupe avec celui du hub dossier seul ») :
   • classes du hub du dossier posées dans le balisage : tuiles du combiné = .kpi (bandeau des chiffres clés, .kpi-l / .kpi-v),
     puces et boutons = .prio-chip (puces « Mes priorités »), titres de carte = .intent-card-title ;
   • cartes, signaux et bandeau du quotidien (.hg-carte, .hg-sig, .hg-seul) = surface de .intent-card-side, barre du groupe (.hg-barre) = celle de .recap-bar, blocs
     internes (.hg-entc, .hg-o, .hg-op, .hg-slider) = .intent-card-data : le verre ci-dessous (Moderne, FecLoader.razor) ;
     clair, Mat, Papier, image d'ambiance et Compact : les hg- sont AJOUTÉS aux MÊMES règles (style-mat.css, style-papier.css, entry.css,
     densite.css), rien n'est redéfini ici pour eux.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════ */
.hg-root {
    --org-ent-0: var(--color-text-muted);
    --org-ent-1: var(--serie-1); --org-ent-2: var(--serie-2); --org-ent-3: var(--serie-3); --org-ent-4: var(--serie-4); --org-ent-7: var(--serie-7);
    --hg-fl-ventes: var(--serie-5); --hg-fl-div: var(--serie-6); --hg-fl-fin: var(--serie-trait);
    --hg-ligne: var(--o12); --hg-ligne-2: var(--o16); --hg-surf-2: var(--o4);
    --hg-acc: var(--brand-strong); --hg-pos: var(--st-green); --hg-neg: var(--st-red); --hg-warn: var(--st-amber);
    --hg-sur-marque: #04161d;
    width: 100%; max-width: var(--hub-col, 1320px); margin: 0 auto; display: grid; gap: 16px; box-sizing: border-box;
    color: var(--tx1); font-size: 14px; line-height: 1.45; text-align: left;
}
@supports (color: oklch(from red calc(1.2 - l) c h)) {
    html[data-theme="light"] .hg-root {
        --org-ent-1: oklch(from var(--serie-sombre-1, var(--serie-1)) calc(1.2 - l) c h);
        --org-ent-2: oklch(from var(--serie-sombre-2, var(--serie-2)) calc(1.2 - l) c h);
        --org-ent-3: oklch(from var(--serie-sombre-3, var(--serie-3)) calc(1.2 - l) c h);
        --org-ent-4: oklch(from var(--serie-sombre-4, var(--serie-4)) calc(1.2 - l) c h);
        --org-ent-7: oklch(from var(--serie-sombre-7, var(--serie-7)) calc(1.2 - l) c h);
    }
}
/*  Titres : .intent-card-title (taille, graisse, encre, empattements en Papier) ; ici la marge et la coupure seulement. */
.hg-root h3 { margin: 2px 0 0; text-wrap: balance; }
/*  :where() : spécificité nulle, les classes du hub posées sur les boutons (.prio-chip, .kpi) gardent leur police et leur encre. */
:where(.hg-root) button { font: inherit; color: inherit; }
.hg-root button:focus-visible, .hg-root a:focus-visible, .hg-root input:focus-visible { outline: 2px solid var(--hg-acc); outline-offset: 2px; }
.hg-eyebrow { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 800; }
.hg-num { font-variant-numeric: tabular-nums; }
.hg-faint { color: var(--color-text-muted); font-weight: 600; }
.hg-muted { color: var(--color-text-secondary); }
.hg-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--color-text-muted); }
.hg-root .pos { color: var(--hg-pos); }
.hg-root .neg { color: var(--hg-neg); }
.hg-dot { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 3px; background: var(--hg-c, var(--hg-acc)); }

/* Cartes et signaux : la surface de .intent-card-side (verre, filet, rayon 18 px ; en clair, carte blanche posée), son survol pour les
   signaux, qui s'ouvrent au clic comme les cartes du hub. Une section n'est pas cliquable : pas de survol. */
.hg-carte, .hg-sig, .hg-seul {
    border: 1px solid var(--o8); border-radius: 18px; box-sizing: border-box; min-width: 0;
    background: var(--o4); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
html[data-theme="light"] .hg-carte, html[data-theme="light"] .hg-sig, html[data-theme="light"] .hg-seul { background: #fff; border-color: #e6ebf2; box-shadow: 0 10px 28px -18px rgba(30, 41, 59, .32); }
.hg-sig { transition: all .25s cubic-bezier(.4, 0, .2, 1); }
.hg-sig:hover { background: var(--o6); border-color: var(--o18); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
html[data-theme="light"] .hg-sig:hover { background: #fff; border-color: #d4deea; box-shadow: 0 18px 40px -20px rgba(30, 41, 59, .42); }
.hg-carte { padding: 20px; display: grid; gap: 12px; align-content: start; }
html[data-density="compact"] .hg-carte { padding: 13px; }
html[data-density="compact"] .hg-root { gap: 10px; }
html[data-theme="light"] .hg-root { --hg-sur-marque: #fff; }
/* Blocs internes (sociétés de l'organigramme, résultats simulés, opérations, curseurs) : la surface de .intent-card-data. */
.hg-entc, .hg-o, .hg-op, .hg-slider { background: var(--o3); border: 1px solid var(--o6); }
.hg-carte-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }
.hg-carte-h > div { display: grid; gap: 2px; min-width: 0; }
/* Liens d'action : ceux des cartes du hub (.intent-card-cta : 13 px, demi-gras, encre de marque). */
.hg-lien { border: 0; background: none; padding: 2px 0; color: var(--hg-acc); font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; }
.hg-lien:hover { text-decoration: underline; }
/* Boutons : .prio-chip (surface, encre, survol, Mat, image d'ambiance, Compact) ; l'action principale reste pleine, à la marque. */
.hg-btn { white-space: nowrap; }
.hg-btn b { color: var(--hg-acc); }
.hg-btn.pri { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--brand); background: var(--brand); border-radius: 999px; padding: 6px 13px;
              font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--hg-sur-marque); }
.hg-btn.pri:hover:not(:disabled) { filter: brightness(1.06); }
.hg-btn:disabled { opacity: .5; cursor: default; pointer-events: none; }
.hg-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; white-space: nowrap;
           background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--hg-acc); }
.hg-pastille { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
               color: var(--hg-acc); border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); }

/* ── 1. La barre du groupe : collante dans le scrolleur du hub (.fec-overlay) ── */
/*  Surface de .recap-bar (la barre du haut d'un dossier) : verre, filet, rayon 14 px ; en clair, la carte givrée et son ombre douce. */
.hg-barre { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 6; padding: 12px 16px; display: grid; gap: 10px;
            box-sizing: border-box; min-width: 0; border: 1px solid var(--o8); border-radius: 14px;
            background: var(--o4); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
/*  Seule exception : la barre est COLLANTE sur le hub du Groupe, les chiffres défilent dessous. Le verre à 4 % les laissait lire
    au travers (constaté au défilement, image d'ambiance comprise) : même verre, posé sur le sol de l'application (--hx5, voir
    sol-application) au lieu du vide, et voile d'image d'ambiance plus dense. Au repos, la barre se lit comme celle d'un dossier. */
/*  16/10 (Arthur : « applique du backdrop filter blur ») : un voile SEMI-TRANSPARENT et un flou fort (le fond opaque annulait le flou) :
    les chiffres qui défilent dessous se devinent, flous, sans se lire. */
html:not([data-theme="light"]) .hg-barre { background: color-mix(in srgb, var(--hx5, #060d14) 66%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); }
html[data-fond]:not([data-theme="light"]) .fec-overlay .hg-root .hg-barre { background-color: rgba(6, 16, 24, .62); }   /* passe devant entry.css */
html[data-theme="light"] .hg-barre { background: color-mix(in srgb, var(--color-bg-card, #fff) 72%, transparent); border-color: var(--color-border-subtle);
    box-shadow: 0 6px 20px rgba(15, 30, 45, .07); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); }
.hg-barre-l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.hg-nom { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; outline: none; }
.hg-meta { font-size: 12.5px; color: var(--color-text-secondary); }
.hg-barre-act { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.hg-barre-l2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.hg-ents { display: flex; flex-wrap: wrap; gap: 6px; }
/* Puces des entités : .prio-chip (l'entité affichée = .prio-chip.on, comme la priorité choisie). */
.hg-ent { gap: 7px; }
.hg-ent.on { cursor: default; }
.hg-ent.on .hg-faint { color: inherit; opacity: .8; }
.hg-ent.is-adj { border-style: dashed; }
/*  16/10 : le périmètre (« 3/3 ») collé à la puce du Groupe, qu'il concerne seule (plus de bouton Périmètre à part). */
/*  16/10 (Arthur : « design foireux », deux pilules accolées) : UNE pilule (.prio-chip, son fond, son bord, son état actif) partagée
    par un filet ; les deux boutons à l'intérieur sont nus. */
.hg-ent-seul { display: contents; }
.hg-ent-bloc.prio-chip { display: inline-flex; align-items: stretch; padding: 0; gap: 0; overflow: hidden; }
.hg-ent-bloc > button { display: inline-flex; align-items: center; gap: 7px; margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0 12px; }
.hg-ent-bloc > .hg-ent-in { padding-right: 10px; }
.hg-ent-bloc.on > .hg-ent-in { cursor: default; }
.hg-ent-bloc > .hg-perim { gap: 5px; padding: 0 11px 0 10px; border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.hg-ent-bloc > button:hover { background: color-mix(in srgb, currentColor 7%, transparent); }
.hg-ent-bloc > button:focus-visible { outline: 2px solid var(--hg-acc); outline-offset: -2px; }
.hg-ent-bloc.on .hg-faint { color: inherit; opacity: .8; }
.hg-perim b { font-weight: 800; }
.hg-perim.is-partiel b { color: var(--hg-warn); }
.hg-ancres { display: flex; flex-wrap: wrap; gap: 2px; }
.hg-ancres a { color: var(--color-text-secondary); text-decoration: none; font-size: 12.5px; font-weight: 700; padding: 4px 9px; border-radius: 8px; }
.hg-ancres a:hover { background: var(--hg-surf-2); color: var(--tx1); }
/* 18/10 (Arthur : « deux rangées max dans cette carte ») : la barre garde deux rangées sur les écrans plus étroits ; ce qui se dit
   ailleurs cède d'abord : la description (l'en-tête de « Les chiffres du groupe » dit les exercices), puis les libellés des boutons
   (icône et bulle), puis les ancres des sections (la page se fait défiler). */
@media (max-width: 1240px) and (min-width: 769px) {
    .hg-barre .hg-meta { display: none; }
    .hg-barre-act .hg-btn-l { display: none; }
}
@media (max-width: 1100px) and (min-width: 769px) { .hg-barre .hg-ancres { display: none; } }
.hg-root section[id] { scroll-margin-top: 150px; }
/* ── 1 bis. Les scénarios du groupe (16/10) : la pilule « Scénario : Base ▾ », son menu ancré, le signal « hors scénario » ── */
/*  Le menu est en position ABSOLUE sous la pilule (ni portail, ni calque fixe : le verre de la barre et de .fec-overlay piègerait un
    position: fixed) ; une surface opaque (le sol de l'application en sombre, la carte blanche en clair) au-dessus des chiffres. */
.hg-sg { position: relative; display: inline-flex; }
.hg-sg-pil { gap: 6px; }
.hg-sg-pil .hg-sg-l { color: var(--color-text-muted); font-weight: 600; }
.hg-sg-pil .hg-sg-n { font-weight: 800; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.hg-sg-pil.is-alt { border-color: color-mix(in srgb, var(--brand) 55%, transparent); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.hg-sg-pil.is-alt .hg-sg-n { color: var(--hg-acc); }
.hg-sg-pil.is-busy { opacity: 1; cursor: progress; }
.hg-sg-pil .hg-sg-chev { opacity: .7; }
.hg-sg-occ { font-weight: 700; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-sg-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: min(320px, calc(100vw - 32px)); box-sizing: border-box;
              display: grid; gap: 2px; padding: 8px; border-radius: 14px; border: 1px solid var(--hg-ligne-2);
              background: var(--surf-2, #102733); box-shadow: 0 18px 44px rgba(0, 0, 0, .45); text-align: left; }
html[data-theme="light"] .hg-sg-menu { background: #fff; border-color: #dbe3ec; box-shadow: 0 18px 40px -16px rgba(30, 41, 59, .38); }
.hg-sg-tete { display: block; padding: 4px 8px 6px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 800; }
.hg-sg-it { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 6px 8px; border: 0; border-radius: 9px; background: none;
            color: var(--tx1); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.hg-sg-it:hover:not(:disabled) { background: var(--hg-surf-2); }
.hg-sg-it.on { color: var(--hg-acc); font-weight: 800; }
.hg-sg-it:disabled { opacity: .45; cursor: default; }
.hg-sg-it.is-danger:not(:disabled) { color: var(--hg-neg); }
.hg-sg-it-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-sg-coche { display: inline-grid; place-items: center; flex: 0 0 16px; width: 16px; }
.hg-sg-sep { display: block; height: 1px; margin: 4px 6px; background: var(--hg-ligne); }
.hg-sg-form { display: grid; gap: 10px; padding: 2px 4px 4px; }
.hg-sg-champ { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--color-text-secondary); }
.hg-sg-champ input, .hg-sg-champ select { width: 100%; box-sizing: border-box; min-height: 36px; padding: 6px 10px; border-radius: 9px;
    border: 1px solid var(--hg-ligne-2); background: var(--hg-surf-2); color: var(--tx1); font: inherit; font-size: 13px; font-weight: 600; }
html[data-theme="light"] .hg-sg-champ input, html[data-theme="light"] .hg-sg-champ select { background: #f6f8fb; border-color: #d4dde8; }
.hg-sg-champ input:focus-visible, .hg-sg-champ select:focus-visible { outline: 2px solid var(--hg-acc); outline-offset: 1px; }
.hg-sg-refus { margin: 0; font-size: 12px; line-height: 1.45; color: var(--hg-warn); font-weight: 600; }
.hg-sg-fa { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.hg-btn.pri.is-danger { background: var(--hg-neg); border-color: var(--hg-neg); }
/*  Une société hors du scénario du groupe : une ligne d'alerte dans la barre, son geste de retour. */
.hg-sg-hors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.45;
              border: 1px solid color-mix(in srgb, var(--hg-warn) 45%, transparent); background: color-mix(in srgb, var(--hg-warn) 10%, transparent); }
.hg-sg-hors > svg { color: var(--hg-warn); flex: 0 0 auto; }
.hg-sg-hors-t { flex: 1 1 260px; min-width: 0; }
@media (max-width: 640px) {
    .hg-sg-menu { right: auto; left: 0; }
    .hg-sg-pil .hg-sg-n { max-width: 14ch; }
}

/* Sous la barre de la vitrine des formules (collante elle aussi, en haut du hub) : la barre du groupe se range JUSTE dessous (16/10 :
   hauteur mesurée --vit-h, hub-direct.js ikuHauteurVitrine ; un top fixe de 58 px laissait une bande de 8 px où le contenu défilait). */
.hg-root.is-sous-vitrine .hg-barre { top: var(--vit-h, 58px); }
.hg-root.is-sous-vitrine section[id] { scroll-margin-top: 200px; }

/* ── 2. Les tuiles du combiné ── */
.hg-tuiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
/*  Chaque tuile est une .kpi (surface, liseré d'accent, survol, Mat, Papier, image d'ambiance, Compact) ; libellé .kpi-l, valeur
    .kpi-v. Seule la grille change : une colonne (pas de pastille d'icône), la jauge sous le texte. */
.hg-tuiles .hg-tuile { box-sizing: border-box; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; align-items: start; align-content: start; }
.hg-tuiles .hg-tuile > * { grid-area: auto; }
.hg-tuile .hg-s { font-size: 11px; color: var(--tx2); }
.hg-jauge { display: block; height: 4px; border-radius: 2px; background: var(--hg-surf-2); overflow: hidden; margin-top: 4px; }
.hg-jauge > span { display: block; height: 100%; border-radius: 2px; background: var(--hg-c, var(--hg-acc)); }

/* ── 3. À retenir ── */
.hg-retenir { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hg-sig { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; align-items: start; padding: 11px 13px; font-size: 13px; text-align: left; cursor: pointer; }
.hg-sig:hover { border-color: var(--hg-ligne-2); }
.hg-sig-ic { grid-row: span 2; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.hg-sig-t { grid-column: 2; color: var(--color-text-secondary); font-size: 12.5px; }
.hg-sig.is-w .hg-sig-ic { background: color-mix(in srgb, var(--hg-warn) 18%, transparent); color: var(--hg-warn); }
.hg-sig.is-i .hg-sig-ic { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--hg-acc); }
.hg-sig.is-o .hg-sig-ic { background: color-mix(in srgb, var(--hg-pos) 16%, transparent); color: var(--hg-pos); }

.hg-rang2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
/*  16/10 (Arthur : gap vide) : la rangée Structure / Poids a ses deux cartes à la même hauteur ; les barres du poids se répartissent sur
    la hauteur de la carte au lieu de laisser un vide dessous. */
.hg-rang2.is-etire { align-items: stretch; }
.hg-rang2.is-etire > #hg-poids { grid-template-rows: auto 1fr; align-content: stretch; }
.hg-rang2.is-etire > #hg-poids > .hg-poids { align-content: space-evenly; }

/* ── 4. Les chiffres du groupe (16/10) : filtre en puces, tableau du hub d'un dossier (HubSynthBlock, styles .hsf de FecLoader) et graphe
   des chiffres clés (apexSynth, mode groupe). Côte à côte (graphe ~40 %), l'un sous l'autre sous 1024 px ; le graphe prend la hauteur du
   tableau (rangée étirée, base flex nulle : le SVG ne nourrit jamais la hauteur, cf. .hubsynth-apex). ── */
.hg-carte-h > .hg-filtre { display: flex; flex-wrap: wrap; gap: 6px; }   /* passe devant .hg-carte-h > div (grille du titre) */
.hg-chiffres-g { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.hg-chiffres-tab, .hg-chiffres-graphe { min-width: 0; display: flex; flex-direction: column; }
.hg-chiffres-graphe { gap: 8px; }
.hg-chiffres-graphe > .hubsynth-chart-wrap { flex: 1 1 0; min-height: 230px; }
.hg-chiffres .hubsynth-thead { flex-wrap: wrap; row-gap: 6px; }
/*  16/10 (Arthur : vide sous le tableau en vue Bilan) : le tableau prend la hauteur de la rangée (celle du graphe quand il a moins de
    lignes que le compte de résultat) ; ses lignes se répartissent la hauteur au lieu de laisser un vide dessous. */
.hg-chiffres-tab > .hubsynth-table-wrap { flex: 1 1 auto; }
.hg-chiffres-tab .hubsynth-scroll { flex: 1 1 auto; display: flex; flex-direction: column; }
.hg-chiffres-tab .hsf { flex: 1 1 auto; }
/*  La bulle du graphe : la boîte en verre .hsynth-tip seule (conteneur d'ApexCharts neutralisé, comme sous .hubsynth). */
.hg-chiffres .apexcharts-tooltip { background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; }
.hg-chiffres-leg b { font-weight: 700; color: var(--tx1); margin-left: 1px; }
.hg-chiffres-leg .is-adj .hg-dot { opacity: .55; }
.hg-trait { display: inline-block; flex: 0 0 auto; width: 14px; border-top: 2.5px solid var(--tx1); opacity: .8; border-radius: 2px; }
/*  Combiné : « dont ventes internes retirées », en retrait sous le chiffre d'affaires. */
.hg-chiffres .hsf .hsf-elim .hsf-lbl { padding-left: 16px; }
/*  L'un sous l'autre dès 1 100 px (comme les autres rangées du hub du Groupe) : à 1 024 px, côte à côte, le tableau des huit exercices
    défilait et les totaux du graphe se chevauchaient. */
@media (max-width: 1100px) {
    .hg-chiffres-g { grid-template-columns: minmax(0, 1fr); }
    .hg-chiffres-graphe > .hubsynth-chart-wrap { flex: none; height: 300px; }
}

/* ── 4 bis. Structure (RETIRÉE du corps du hub le 16/10, balisage commenté dans HubGroupe.razor : règles gardées pour le retour arrière) ── */
.hg-struct { display: grid; justify-items: center; gap: 0; }
.hg-entc { width: 100%; max-width: 340px; display: grid; gap: 8px; padding: 11px 13px; border-radius: 10px;
           text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.hg-entc:hover { border-color: var(--hg-c, var(--hg-ligne-2)); transform: translateY(-1px); }
.hg-entc.is-hors { opacity: .6; border-style: dashed; }
.hg-entc-t { display: flex; align-items: center; gap: 8px; font-weight: 800; min-width: 0; }
.hg-entc-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hg-entc-t .hg-pill { margin-left: auto; }
.hg-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; }
.hg-kv > span { display: grid; gap: 1px; min-width: 0; }
.hg-kv i { font-style: normal; font-size: 10px; line-height: 1.2; color: var(--color-text-muted); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hg-kv b { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.hg-tronc { width: 2px; height: 20px; background: var(--hg-ligne-2); }
.hg-branche { width: calc(100% - 100% / var(--hg-n, 2)); max-width: 660px; height: 14px; border: 2px solid var(--hg-ligne-2); border-bottom: 0; border-radius: 10px 10px 0 0; }
.hg-kids { display: grid; grid-template-columns: repeat(var(--hg-n, 2), minmax(0, 1fr)); gap: 16px; width: 100%; }
.hg-kids.is-auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 6px; }
.hg-kid { display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; }
.hg-held { font-size: 11.5px; font-weight: 800; color: var(--color-text-secondary); border: 1px solid var(--hg-ligne-2); border-radius: 999px; padding: 2px 10px; background: var(--o3); }
.hg-flows { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.hg-flow { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; border: 1px dashed currentColor; white-space: nowrap; }
.hg-flow.is-ventes { color: var(--hg-fl-ventes); }
.hg-flow.is-div { color: var(--hg-fl-div); border-style: solid; }
.hg-flow.is-fin { color: var(--hg-fl-fin); border-style: dotted; }

/* ── Poids ── */
.hg-poids { display: grid; gap: 14px; }
.hg-pb { display: grid; gap: 5px; }
.hg-pb-h { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 700; }
.hg-stack { display: flex; height: 14px; border-radius: 5px; overflow: hidden; background: var(--hg-surf-2); gap: 2px; min-width: 2px; }
.hg-stack > span { display: block; height: 100%; min-width: 2px; }
.hg-stack > span.is-comb { background: var(--hg-acc); }
.hg-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--color-text-secondary); }
.hg-legende span { display: inline-flex; align-items: center; gap: 6px; }

/* ── 5. Simuler ── */
.hg-sim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 18px; }
.hg-sim-g, .hg-sim-d { display: grid; gap: 10px; align-content: start; min-width: 0; }
.hg-sim-etat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); }
.hg-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--hg-ligne); border-top-color: var(--hg-acc); animation: hg-tourne .8s linear infinite; }
@keyframes hg-tourne { to { transform: rotate(360deg); } }
.hg-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.hg-preset { white-space: nowrap; }
.hg-slider { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; }
.hg-slider-h { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; }
.hg-slider-h output { margin-left: auto; font-weight: 600; }
/* Le style global des curseurs (site.css, rail blanc à 12 %) disparaît sur fond clair : rail aux jetons du thème. */
.hg-slider input[type=range] { width: 100%; height: 4px; margin: 8px 0; border-radius: 2px; background: var(--hg-ligne-2); accent-color: var(--hg-c, var(--brand)); }
.hg-slider .hg-faint { font-size: 11.5px; }
.hg-sim-act { display: flex; flex-wrap: wrap; gap: 8px; }
.hg-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hg-out-n { grid-column: 1 / -1; }
.hg-o { border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; min-width: 0; }
.hg-o .hg-v { font-size: 19px; font-weight: 700; }
.hg-o .hg-d { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); }
.hg-cmp { display: grid; gap: 3px; margin-top: 4px; }
.hg-cmp > span { display: block; height: 5px; border-radius: 3px; background: var(--hg-ligne-2); }
.hg-cmp > span.sc { background: var(--hg-acc); }
.hg-cmp > span.sc.neg { background: var(--hg-neg); }
.hg-tbl { overflow-x: auto; }
.hg-tbl table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.hg-tbl th, .hg-tbl td { padding: 6px 8px; text-align: right; border-bottom: 1px solid var(--hg-ligne); white-space: nowrap; }
.hg-tbl th[scope=row], .hg-tbl thead th:first-child { text-align: left; font-weight: 600; }
.hg-tbl thead th { font-size: 10.5px; color: var(--color-text-muted); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

/* ── 6. Valeur ── */
.hg-val { display: grid; gap: 12px; }
.hg-vbars { display: grid; gap: 10px; }
.hg-vb { display: grid; grid-template-columns: 130px minmax(0, 1fr) 84px; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; }
.hg-vb > .hg-num { text-align: right; }
.hg-vrows { display: grid; }
.hg-vr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; font-size: 12.5px; padding: 7px 0; border-top: 1px solid var(--hg-ligne); }
.hg-vr-n { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.hg-sect { font-size: 11.5px; color: var(--color-text-muted); border: 0; background: none; padding: 0; }
.hg-sect.is-miss { color: var(--hg-warn); font-weight: 700; cursor: pointer; text-decoration: underline dotted; }
.hg-four-w { display: grid; gap: 2px; }
.hg-four { position: relative; height: 40px; margin: 10px 6px 0; }
.hg-four-trk { position: absolute; left: 0; right: 0; top: 16px; height: 6px; border-radius: 3px; background: var(--hg-surf-2); }
.hg-four-rng { position: absolute; top: 16px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--brand) 35%, transparent); }
.hg-four-mk { position: absolute; top: 11px; width: 2px; height: 16px; margin-left: -1px; background: var(--color-text-muted); border-radius: 1px; }
.hg-four-mk.is-ret { background: var(--hg-acc); width: 3px; top: 8px; height: 22px; }
.hg-four-lb { position: absolute; top: 28px; transform: translateX(-50%); font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
.hg-four-lb.is-ret { top: -8px; color: var(--hg-acc); font-weight: 800; }

/* ── Reporting : la carte du hub dans sa colonne ── */
.hg-rep { display: grid; gap: 8px; min-width: 0; }
.hg-rep .repc { margin: 0; max-width: none; }
/* Dans sa colonne (à côté de la valeur, au-delà de 1 100 px) : en-tête, actions puis chiffres, sans les mini-graphiques. */
@media (min-width: 1101px) {
    .hg-rep .repc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tete" "actions" "chiffres"; }
    .hg-rep .repc .repc-actions { justify-content: flex-start; flex-wrap: wrap; }
    .hg-rep .repc .repc-k { grid-template-columns: minmax(0, 1fr); }
    .hg-rep .repc .repc-mini { display: none; }
    .hg-rep .repc .repc-k-e i { display: block; margin-left: 0; }
    /*  16/10 (Arthur : vide sous la carte) : à côté de la valeur, plus haute, la carte prend la hauteur de la rangée ; ses chiffres
        s'étirent et retrouvent leur mini-graphique (le mois dans l'exercice), sous le chiffre, à la taille du hub d'un dossier. */
    .hg-rang2.is-etire > .hg-rep { grid-template-rows: minmax(0, 1fr) auto; }
    .hg-rang2.is-etire > .hg-rep .repc { height: 100%; grid-template-rows: auto auto minmax(0, 1fr); align-items: start; }
    .hg-rang2.is-etire > .hg-rep .repc .repc-chiffres { align-self: stretch; }
    .hg-rang2.is-etire > .hg-rep .repc .repc-k { align-content: space-between; }
    .hg-rang2.is-etire > .hg-rep .repc .repc-mini { display: block; grid-column: 1; grid-row: auto; height: 40px; margin-top: 6px; }
}

/* ── 7. Opérations ── */
.hg-ops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hg-op { border-radius: 10px; padding: 12px; display: grid; gap: 4px; align-content: start; justify-items: start; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.hg-op:hover { border-color: var(--hg-acc); transform: translateY(-1px); }
.hg-op b { font-size: 14px; }
.hg-op .hg-v { font-size: 18px; font-weight: 700; }
.hg-op .hg-muted { font-size: 12.5px; }
.hg-op-cta { margin-top: 4px; font-size: 12px; font-weight: 800; color: var(--hg-acc); }
.hg-op.is-fermee { opacity: .7; }

/* ── 8. Le quotidien, société par société ── */
.hg-seul { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; }
.hg-seul p { margin: 0; flex: 1 1 360px; font-size: 13px; color: var(--color-text-secondary); min-width: 0; }
.hg-seul p b { color: var(--tx1); }
.hg-seul-socs { display: flex; flex-wrap: wrap; gap: 6px; }
.hg-phrase { padding: 0 4px 8px; }
.hg-attente { padding: 24px; text-align: center; }

/* ── Largeurs ── */
@media (max-width: 1100px) {
    .hg-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hg-retenir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hg-ops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hg-rang2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
    .hg-sim { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .hg-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hg-kids { grid-template-columns: minmax(0, 1fr); }
    .hg-branche { display: none; }
    .hg-barre { position: static; }
    .hg-barre-act { margin-left: 0; }
    .hg-vb { grid-template-columns: 96px minmax(0, 1fr) 72px; }
}
@media (max-width: 768px) {
    .hg-carte { padding: 12px; }   /* celui de .intent-card sous 768 px */
}
@media (max-width: 560px) {
    .hg-retenir, .hg-ops, .hg-out { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .hg-root * { transition: none !important; animation: none !important; } }

/* 16/10 (Arthur : doublon en tête) : sur le hub du Groupe, le récapitulatif de l en-tête de l application (nom, entité, exercices,
   comptes au) répétait la barre du groupe : masqué ; le bouton accueil et les actions de l en-tête restent. */
.recap-bar.is-hub-groupe .recap-content { display: none; }
/* 16/10 : sur le hub d une SOCIÉTÉ du groupe, la barre du groupe reste en tête : le bloc « Groupe X · n sociétés · entité ·
   Organigramme » de l en-tête la répétait (masqué) ; les exercices, les comptes et les pastilles de la société restent. */
.recap-bar.is-societe-groupe [data-recap-bloc="groupe"] { display: none; }
.hg-root.hg-root-barre { margin-bottom: 14px; }

/* ── 16/10 (scénarios de groupe, lot 3) : la comparaison base ⇄ scénario, hors de la base seulement ──
   • sous un chiffre de tête, l'écart face au scénario de base (« +1,48 M€ vs base en 2026 », couleur du signe ; « – » en calcul) ;
   • « Comparer à la base » dans l'en-tête des chiffres du groupe : la puce, le bandeau discret, la sous-ligne « vs base » du tableau
     (HubSynthBlock) et le repère de la base dans la légende du graphe (trait pointillé neutre, celui d'apexSynth) ;
   • la carte Valeur : le scénario face à la base (combiné, somme des parties). */
.hg-tuile .hg-s.hg-vsbase { font-weight: 700; font-variant-numeric: tabular-nums; }
.hg-tuile .hg-s.hg-vsbase.pos { color: var(--hg-pos); }
.hg-tuile .hg-s.hg-vsbase.neg { color: var(--hg-neg); }
.hg-tuile .hg-s.hg-vsbase.hg-faint { color: var(--color-text-muted); font-weight: 600; }
.hg-carte-h > .hg-filtre > .hg-cmp-tog { margin-left: 6px; border-style: dashed; }
.hg-carte-h > .hg-filtre > .hg-cmp-tog.on { border-style: solid; }
.hg-cmp-band { margin: 2px 0 0; padding: 6px 10px; border-radius: 8px; font-size: 12px; color: var(--color-text-secondary);
               background: color-mix(in srgb, var(--hg-surf-2) 70%, transparent); border: 1px dashed var(--hg-ligne-2); }
.hg-root .hsf tr.hsf-vsbase td { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text-muted); }
.hg-root .hsf tr.hsf-vsbase td.pos { color: var(--hg-pos); }
.hg-root .hsf tr.hsf-vsbase td.neg { color: var(--hg-neg); }
.hg-root .hsf tr.hsf-vsbase td.hsf-lbl { font-weight: 600; font-style: italic; }
.hg-trait.is-base { border-top: 2px dashed var(--mut2); opacity: 1; }
.hg-vcmp { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 4px; }
.hg-vcmp th, .hg-vcmp td { padding: 5px 6px; text-align: right; border-bottom: 1px solid var(--hg-ligne); white-space: nowrap; }
.hg-vcmp thead th { font-size: 11px; font-weight: 700; color: var(--color-text-muted); }
.hg-vcmp th[scope="row"], .hg-vcmp thead th:first-child { text-align: left; font-weight: 600; color: var(--color-text-secondary); }
.hg-vcmp td.pos { color: var(--hg-pos); font-weight: 700; }
.hg-vcmp td.neg { color: var(--hg-neg); font-weight: 700; }
.hg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 560px) {
    .hg-vcmp { font-size: 11.5px; }
    .hg-vcmp th, .hg-vcmp td { padding: 4px 3px; }
}

/* ── 16/10 (scénarios de groupe, lot 4) : l'aperçu en direct du hub du Groupe (Pages/FecLoader.ApercuGroupe.cs) ──
   • le bandeau d'aperçu, dernière rangée de la barre du groupe (dans son verre : aucun backdrop-filter propre, le flou de la barre et de
     .fec-overlay.a-barre-groupe reste le seul) ; couleur d'avertissement des jetons (--hg-warn = --st-amber, sombre et clair) ;
   • l'état « calcul… » : réservé dans le bandeau (visibility, aucun saut de mise en page), et les chiffres du hub légèrement atténués ;
   • la question avant de quitter l'aperçu (Shared/ApercuGroupeQuestion, au niveau racine de FecLoader : hors de .hg-root, jetons du thème). */
.hg-apercu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.45;
             border: 1px solid color-mix(in srgb, var(--hg-warn) 55%, transparent); background: color-mix(in srgb, var(--hg-warn) 14%, transparent); }
html[data-theme="light"] .hg-apercu { background: color-mix(in srgb, var(--hg-warn) 11%, #fff); }
.hg-apercu-ic { display: inline-flex; flex: 0 0 auto; color: var(--hg-warn); }
.hg-apercu-t { flex: 1 1 280px; min-width: 0; color: var(--color-text-secondary); }
.hg-apercu-t b { color: var(--tx1); font-weight: 800; }
.hg-apercu-n { color: var(--tx1); font-weight: 700; }
.hg-apercu-calc { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; color: var(--color-text-muted); font-weight: 600; visibility: hidden; }
.hg-apercu.is-calcul .hg-apercu-calc { visibility: visible; }
.hg-apercu-a { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
/*  La barre collante grandit du bandeau : les ancres des sections (Chiffres, Simuler…) s'arrêtent dessous. */
.hg-root.a-bandeau section[id] { scroll-margin-top: 210px; }
.hg-root.a-bandeau.is-sous-vitrine section[id] { scroll-margin-top: 260px; }
.hg-root.is-calcul .hg-tuiles .kpi-v, .hg-root.is-calcul .hg-tuiles .hg-vsbase, .hg-root.is-calcul .hg-chiffres-g,
.hg-root.is-calcul .hg-val, .hg-root.is-calcul .hg-sim-d { opacity: .62; transition: opacity .2s ease; }
@media (max-width: 640px) {
    .hg-apercu-a { margin-left: 0; width: 100%; }
    .hg-apercu-a .hg-btn { flex: 1 1 auto; justify-content: center; }
    .hg-apercu-calc { margin-left: 6px; }
}
@media (max-width: 400px) {
    .hg-apercu-a .hg-btn.pri { white-space: normal; text-align: center; }
}

.hg-apq-voile { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 18px;
                background: var(--bd62, rgba(3, 12, 18, .62)); }
.hg-apq { width: min(460px, 96vw); max-height: 92svh; overflow: auto; box-sizing: border-box; display: grid; gap: 10px; padding: 20px 20px 16px; text-align: left;
          background: var(--bg1, #121a22); border: 1px solid var(--bd1, #243240); border-radius: 16px; box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
          color: var(--tx1, #e8eef2); font-family: var(--font-family); }
html[data-theme="light"] .hg-apq { background: #fff; border-color: #e1e7ee; box-shadow: 0 24px 60px -18px rgba(15, 30, 45, .35); }
.hg-apq-ey { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px;
             color: var(--st-amber); background: color-mix(in srgb, var(--st-amber) 13%, transparent); border: 1px solid color-mix(in srgb, var(--st-amber) 38%, transparent); }
.hg-apq-t { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.hg-apq-d { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tx2, #c2cdd6); }
html[data-theme="light"] .hg-apq-d { color: var(--color-text-secondary); }
.hg-apq-a { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.hg-apq-b { font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.hg-apq-b.is-pri { border: 1px solid var(--brand); background: var(--brand); color: #04161d; border-radius: 999px; padding: 6px 15px; }
html[data-theme="light"] .hg-apq-b.is-pri { color: #fff; }
.hg-apq-b.is-pri:hover { filter: brightness(1.06); }
.hg-apq-b:focus-visible { outline: 2px solid var(--brand-strong, var(--brand)); outline-offset: 2px; }
@media (max-width: 560px) {
    .hg-apq-voile { padding: 0; align-items: flex-end; }
    .hg-apq { width: 100%; border-radius: 16px 16px 0 0; border-left: 0; border-right: 0; border-bottom: 0; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
    .hg-apq-a { justify-content: stretch; }
    .hg-apq-b { flex: 1 1 auto; text-align: center; justify-content: center; }
}