/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   REFONTE DU HUB (22/10, maquette validée par Arthur : scratchpad maquette-landing/maquette-hub.html, points 6 à 13).
   Le hub d'un dossier ouvert (Pages/FecLoader.razor), par-dessus ses règles de base : celles-ci vivent dans le bloc de style du
   composant, rendu APRÈS cette feuille ; d'où la spécificité relevée (.fec-overlay devant) quand une règle doit les remplacer.
   Couleurs : jetons de l'application (--brand, --pal-*, --o*, --tx*, --st-*), jamais figées ; clair et sombre, styles Mat et Papier.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 8. BARRE DU HAUT ─────────────────────────────────────────────────────────────────────────────────────────────────────────
   La loupe reste visible, compacte : loupe et « Ctrl K », sans le mot. */
.fec-overlay .recap-bar .cpal-loupe-lbl { display: none; }
.fec-overlay .recap-bar .cpal-loupe-btn { height: 34px; padding: 0 7px 0 10px; border-radius: 10px; gap: 8px; }

/* La pastille du temps de chargement (consigne d'Arthur : une des forces de la solution) : collée au libellé du dossier, liseré de
   la marque, valeur en gras, petit point vert. Sans clignotement. Masquée seulement en mode groupe (la barre du groupe dit le reste). */
.fec-overlay .recap-bar .recap-elapsed.recap-vitesse:not(.is-groupe) {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; margin-left: 2px; border-radius: 999px;
    font-size: 12px; font-weight: 500; color: var(--mut1, #8aa0ad); white-space: nowrap; cursor: help;
    border: 1px solid color-mix(in srgb, var(--brand) 42%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 13%, transparent), color-mix(in srgb, var(--brand) 5%, transparent));
}
.recap-vitesse .iku-ico { color: var(--brand-strong, var(--brand)); font-size: 13px; }
.recap-vitesse b { color: var(--tx1); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.recap-vit-pt { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--st-green, #34d399);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-green, #34d399) 16%, transparent); }
html[data-theme="light"] .recap-vitesse .iku-ico { color: var(--brand); }
@media (max-width: 1180px) { .recap-vit-l { display: none; } }

/* Le menu « ⋯ » (Shared/HubMenuPlus). La barre passe au-dessus des tuiles tant qu'il est ouvert. */
.fec-overlay .recap-bar:has(.hmp.is-ouvert) { position: relative; z-index: 60; }
.hmp { position: relative; flex: none; display: inline-flex; }
.hmp-btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 10px; cursor: pointer; font-size: 16px;
    color: var(--tx1); background: var(--o4); border: 1px solid var(--o12); transition: background .12s, border-color .12s; }
.hmp-btn:hover, .hmp-btn.on { border-color: color-mix(in srgb, var(--brand) 60%, transparent); background: color-mix(in srgb, var(--brand) 14%, transparent); }
.hmp-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hmp-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; width: 248px; padding: 6px; border-radius: 12px; box-sizing: border-box;
    background: var(--surf-2, #102733);   /* opaque : les tuiles ne transparaissent pas */ border: 1px solid var(--o12); box-shadow: 0 22px 50px rgba(0, 0, 0, .55);
    animation: hmpOuvre .14s ease-out; }
@keyframes hmpOuvre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hmp-menu { animation: none; } }
html[data-theme="light"] .hmp-menu { background: var(--color-bg-card, #fff); border-color: var(--color-border-subtle, rgba(15, 30, 45, .14));
    box-shadow: 0 18px 40px rgba(15, 30, 45, .18); }
.hmp-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
    font-family: var(--font-family); font-size: 13px; font-weight: 600; color: var(--tx1); text-align: left; }
.hmp-item:hover, .hmp-item:focus-visible { background: var(--o5, rgba(255, 255, 255, .05)); outline: none; }
.hmp-item:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brand) 60%, transparent); }
.hmp-ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; font-size: 14px;
    color: var(--brand-strong, var(--brand)); background: var(--o4); border: 1px solid var(--o8); }
html[data-theme="light"] .hmp-ic { color: var(--brand); }
.hmp-l { flex: 1 1 auto; min-width: 0; }
.hmp-n { margin-left: auto; flex: none; font-size: 11px; font-weight: 600; color: var(--mut2); }
.hmp-item.is-actif .hmp-ic { color: var(--brand-contrast, #04221f); background: var(--brand); border-color: var(--brand); }
.hmp-item.is-actif .hmp-n { color: var(--brand-strong, var(--brand)); }
.hmp-sep { border: 0; border-top: 1px solid var(--o8); margin: 5px 4px; }

/* ── 12. TUILES : une mini-courbe sur les exercices du dossier au lieu de l'icône ─────────────────────────────────────────────── */
.kpi-tend { grid-area: ico; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; cursor: help; }
/* 22/10 (Arthur, « manque un peu de padding à droite ») : la classe s'appelait « kpi-spark », déjà prise par la courbe de
   PeriodKpiColumn (FecLoader.razor : width 54px) ; la courbe de 64 px débordait de 10 px dans la marge droite. Renommée « kpi-tend ». */
.kpi-tend .ks { display: block; overflow: visible; }
.kpi-tend-l { font-size: 8px; font-weight: 600; letter-spacing: .02em; line-height: 1.1; color: var(--mut2); white-space: nowrap; }
.ks-l { fill: none; stroke: var(--brand-strong, var(--brand)); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ks-aire { fill: color-mix(in srgb, var(--brand) 16%, transparent); stroke: none; }
.ks-pt { fill: var(--brand-strong, var(--brand)); stroke: color-mix(in srgb, var(--brand) 30%, transparent); stroke-width: 3; paint-order: stroke; }
.ks-p { fill: none; stroke: var(--st-green, #34d399); stroke-width: 1.6; stroke-dasharray: 2.5 2.5; stroke-linecap: round; }
.ks-pp { fill: none; stroke: var(--st-green, #34d399); stroke-width: 1.4; }
html[data-theme="light"] .ks-l { stroke: var(--brand); }
html[data-theme="light"] .ks-pt { fill: var(--brand); }
html[data-theme="light"] :is(.ks-p, .ks-pp) { stroke: var(--st-green-ink, #059669); }
/* La tuile « À relancer » renvoie à « Aujourd'hui » : le renvoi en ambre. */
.kpi-renvoi-l { color: var(--st-amber, #fbbf24); font-weight: 600; }
html[data-theme="light"] .kpi-renvoi-l { color: #b45309; }
/* Bandeau replié du téléphone : la tendance sous chaque chiffre. */
.kpi-fold-spark { display: block; margin-top: 3px; line-height: 0; }
.kpi-fold-spark .ks { display: block; overflow: visible; }
@media (max-width: 560px) { .kpi-tend-l { display: none; } }
/* Six tuiles sur une rangée entre 1 101 et 1 360 px : la courbe se resserre pour laisser sa ligne au sous-titre. */
@media (min-width: 1101px) and (max-width: 1360px) {
    .kpi-tend .ks { width: 48px; height: 18px; }
    .kpi-tend-l { display: none; }
    /* « 4,65 M€ dans 12 mois », « 28 factures · voir Aujourd'hui ↓ » : sur deux lignes plutôt que coupés. */
    .fec-overlay .kpi-strip .kpi-d { white-space: normal; line-height: 1.25; }
}

/* ── 6 et 7. UNE LIGNE : SCÉNARIO À GAUCHE, FORMULE À DROITE, COLLÉE EN HAUT AU DÉFILEMENT ──────────────────────────────────── */
.fec-overlay .bsc.is-fusion {
    top: env(safe-area-inset-top, 0px); width: min(100%, var(--hub-col, 1320px)); justify-content: flex-start; flex-wrap: wrap;
    gap: 6px 8px; min-height: 46px; padding: 6px 7px 6px 14px; margin: 0 auto;
}
.bsc.is-fusion .bsc-esp { flex: 1 1 auto; min-width: 0; }
.bsc.is-fusion .bsc-pil { padding: 0 6px; }
.vit-c { display: inline-flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; margin-left: auto; }
.vit-c-l { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--mut1, #8aa0ad); white-space: nowrap; cursor: help; }
.vit-c-ic { display: inline-flex; flex: none; color: var(--mut1, #8aa0ad); }
.vit-c-t b { color: var(--tx2); font-weight: 700; }
.vit-c-sep { margin: 0 5px; }
.vit-c .vit-seg { display: inline-flex; gap: 0; padding: 2px; border-radius: 999px; justify-self: auto; min-width: 0;
    background: var(--o4); border: 1px solid var(--o12); }
.vit-c .vit-seg-b { min-width: 0; height: 26px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 650; line-height: 1;
    color: var(--mut1, #8aa0ad); background: none; overflow: visible; }
.vit-c .vit-seg-b:hover { color: var(--tx1); background: var(--o6, rgba(255, 255, 255, .06)); }
.vit-c .vit-seg-b.on { color: var(--tx1); background: color-mix(in srgb, var(--brand) 20%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 55%, transparent); }
.vit-c .vit-seg-b:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Sans phrase à droite, le segment choisi garde sa bulle (ce que la formule apporte). */
.vit-c .vit-seg-b.on .vit-bulle { display: block; }
.vit-c .vit-apercu-b { margin-left: 0; color: var(--tx2); }
.vit-c-go { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 30px; padding: 0 12px; border-radius: 999px; box-sizing: border-box;
    font-size: 12px; font-weight: 650; white-space: nowrap; text-decoration: none; cursor: pointer;
    color: var(--tx1); border: 1px solid var(--o14, rgba(255, 255, 255, .14)); transition: background .12s, border-color .12s; }
.vit-c-go:hover { color: var(--tx1); text-decoration: none; border-color: color-mix(in srgb, var(--brand) 55%, transparent); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.vit-c-go:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
html[data-theme="light"] .vit-c .vit-seg { background: color-mix(in srgb, var(--color-bg-card, #fff) 70%, transparent); border-color: var(--color-border-subtle, rgba(15, 30, 45, .14)); }
html[data-theme="light"] .vit-c .vit-seg-b { color: var(--mut2); }
html[data-theme="light"] .vit-c .vit-seg-b.on { color: var(--tx1); background: color-mix(in srgb, var(--brand) 14%, #fff); }
html[data-theme="light"] .vit-c-go { border-color: var(--color-border-subtle, rgba(15, 30, 45, .18)); }
/* Écrans moyens : les libellés cèdent la place avant que la ligne ne passe à deux. */
@media (max-width: 1400px) { .vit-c:has(.vit-c-apercu) .vit-c-t { display: none; } }   /* l'aperçu réel prend la place du libellé */
@media (max-width: 1240px) { .bsc.is-fusion .bsc-l-t { display: none; } }
@media (max-width: 1120px) { .vit-c-t { display: none; } .bsc.is-fusion .bsc-l { display: none; } }
/* Téléphone et tablette étroite : la pilule du scénario (tiroir) et la formule sur la même ligne ; « Choisir » vit dans « ⋯ › Offres ». */
@media (max-width: 767px) {
    .fec-overlay .bsc.is-fusion { flex-wrap: nowrap; gap: 6px; padding: 5px; min-height: 42px; border-radius: 12px; }
    .fec-overlay .bsc.is-fusion > .vit-c { display: inline-flex; }
    .bsc.is-fusion .bsc-mob { flex: 0 1 auto; width: auto; min-width: 64px; max-width: 46%; padding: 0 9px; border-radius: 999px;
        color: var(--brand-contrast, #052826); background: var(--brand); font-size: 12px; }
    .bsc.is-fusion .bsc-mob > .iku-ico:first-child, .bsc.is-fusion .bsc-mob-chev { color: inherit; }
    .bsc.is-fusion .bsc-mob-e { display: none; }
    .vit-c { gap: 4px; }
    .vit-c-go { display: none; }
    .vit-c .vit-seg-b { height: 28px; padding: 0 8px; font-size: 11.5px; }
    .vit-c .vit-apercu-l { display: none; }
    .vit-c .vit-apercu-b { padding: 4px 6px; }
    .vit-c:has(.vit-c-apercu) .vit-c-l { display: none; }
}

/* ── 6. LE CONTENU REMONTE : le titre « Que voulez-vous explorer ? » n'est plus affiché (il reste lu, cible du lien d'évitement) ;
   les espacements du haut du hub se resserrent (l'écart de la colonne, 20 px, suffit entre les blocs). À 1 440 × 900, les trois
   cartes tiennent entières dans le premier écran. ── */
.fec-overlay .intent-zone { padding-top: 6px; }
.fec-overlay .intent-zone .kpi-strip { margin-bottom: 0; }
.fec-overlay .intent-zone .today-band { margin-bottom: 0; }
.fec-overlay .intent-zone .prio-wrap { margin-bottom: 0; gap: 10px; }
.fec-overlay .intent-title.hub-titre-lu { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── 9. L'ASSISTANT IA PREND LA LIGNE : titre, phrase et « Choisir → » sur une ligne ──────────────────────────────────────────── */
@media (min-width: 769px) {
    .fec-overlay .hub-ia-ligne .hub-ia-entree .intent-card-banner-body { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
    .fec-overlay .hub-ia-ligne .hub-ia-entree .intent-card-banner-title-row { flex: none; }
}

/* ── 11. LES DEUX ENCARTS DU PIED À LA LARGEUR DES BLOCS, CÔTE À CÔTE ───────────────────────────────────────────────────────── */
.fec-overlay .hub-pied { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 12px;
    width: min(var(--hub-col, 1320px), 100%); box-sizing: border-box; }
.fec-overlay .hub-pied:not(:has(> *)) { display: none; }
.fec-overlay .hub-pied > .pro-teaser.pro-teaser-line { margin: 0; max-width: none; width: auto; box-sizing: border-box; flex-wrap: nowrap; text-align: left; }
.fec-overlay .hub-pied .pro-teaser-txt { flex: 1 1 auto; }
.fec-overlay .hub-pied .pro-teaser-cta { white-space: nowrap; }

/* ── 13. TÉLÉPHONE ─────────────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    /* Les actions tiennent sur une ligne : loupe, Partager, Se connecter, « ⋯ ». */
    .fec-overlay .recap-bar .recap-actions { gap: 8px; }
    .fec-overlay .recap-bar .recap-actions > :is(.recap-share-btn, .recap-login-chip, .recap-compte-btn) { flex: 1 1 auto; justify-content: center; min-width: 0; }
    .fec-overlay .recap-bar .cpal-loupe-btn { width: 34px; padding: 0; justify-content: center; }
    .fec-overlay .recap-bar .recap-elapsed.recap-vitesse:not(.is-groupe) { height: 24px; padding: 0 8px; font-size: 11px; margin-left: auto; }
    /* Le libellé du dossier sur deux lignes nettes (« exercices … », puis « comptes au … ») : pas de « · » qui pend en fin de ligne. */
    .fec-overlay .recap-bar [data-recap-bloc="exercices"] > b { display: block; }
    .fec-overlay .recap-bar [data-recap-bloc="exercices"] > b + .recap-sep { display: none; }
    /* Chiffres clés repliés, puis la ligne du scénario et de la formule : les écarts de la colonne suffisent. */
    .fec-overlay .intent-zone .kpi-zone { margin-bottom: 0; }
}
/* La bulle « Bienvenue » en bas, pleine largeur ; les boutons flottants remontent au-dessus d'elle tant qu'elle est ouverte (sa
   hauteur mesurée : --coach-h, js/hub-direct.js, ikuCoach). Plus rien ne couvre « J'ai compris ». */
@media (max-width: 767px) {
    body .coach-bar:not(.coach-bar-over) { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: none; max-width: none;
        flex-wrap: wrap; gap: 8px 12px; padding: 14px 16px; }
    body .coach-bar:not(.coach-bar-over) .coach-bar-txt { flex: 1 1 100%; }
    body .coach-bar:not(.coach-bar-over) .coach-bar-ok { flex: 1 1 100%; height: 38px; border-radius: 10px; font-size: 13px; }
    body:has(.coach-bar:not(.coach-bar-over)) .fab-stack-r { bottom: calc(24px + var(--coach-h, 170px) + env(safe-area-inset-bottom, 0px)); }
    body:has(.coach-bar:not(.coach-bar-over)) .vfl-lanceur { bottom: calc(84px + var(--coach-h, 170px) + env(safe-area-inset-bottom, 0px)); }
}