/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   ÉCRAN D'ENTRÉE (accueil) — SOURCE UNIQUE de son CSS.
   Extrait du bloc <style> de Pages/FecLoader.razor (2026-09-04) pour être chargé AU BOOT : la coque statique
   d'index.html (peinte avant Blazor) et le composant FecLoader partagent ces règles → rendu identique, pas de
   flash au relais. Toute règle .entry-* / .tzh* / .dropzone* / .dz-* / .btn-demo / .fec-content / .fec-loader
   vit ICI, plus dans le composant. Les @keyframes de la vignette (tzh*) et de l'apparition (entry*) aussi.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
    /* ═══════════════════════════════════════════════════════════════
           Helpers généraux
           ═══════════════════════════════════════════════════════════════ */
    .fec-input-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }


    /* ═══════════════════════════════════════════════════════════════
           Loader root
           ═══════════════════════════════════════════════════════════════ */
    .fec-loader {
        position: fixed;
        inset: 0;
        /* Fond « aurora-mesh » : plusieurs nappes de lumière douces (≠ un seul blob orange centré)
           + vignette de cadrage + grain (::before) pour un rendu premium sans banding.
           - source primaire de marque : adoucie (45%→30%), élargie et REMONTÉE (-8%→-16%), décalée à droite
             (58%) → éclaire la dropzone (CTA) sans écraser le hero à gauche ;
           - nappe secondaire de marque en haut-gauche : asymétrie « mesh », donne de la profondeur ;
           - sol indigo froid (duotone) : conservé mais discret ;
           - vignette : assombrit légèrement les bords → cadre le contenu. */
        background:
            radial-gradient(120% 120% at 50% 36%, transparent 60%, rgba(0, 0, 0, 0.38) 100%),
            radial-gradient(ellipse 75% 55% at 50% 116%, rgba(129, 140, 248, 0.11) 0%, transparent 56%),
            radial-gradient(ellipse 55% 48% at 14% 2%, color-mix(in srgb, var(--brand) 16%, transparent) 0%, transparent 56%),
            radial-gradient(ellipse 92% 68% at 58% -16%, color-mix(in srgb, var(--brand) 30%, transparent) 0%, transparent 60%),
            var(--hx5);
        color: var(--sl4);
        font-family: var(--font-family);
        display: flex;
        flex-direction: column;
    }


    /* Grain « film » fin : tue le banding des dégradés sombres et donne une texture premium.
       z-index:0 → derrière .fec-content (z:1) et l'overlay hub (z:10) ; pointer-events:none ; fixé au viewport. */
    .fec-loader::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0.05;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }


    .fec-content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 24px 32px;
        gap: 16px;
    }


    /* La page d'accueil (upload) défile en interne si elle dépasse — sans toucher l'overlay
       (qui scrolle via .fec-overlay), pour ne pas créer de double scrollbar. */
    .fec-content:not(.fec-content-overlay) {
        overflow-y: auto;
        overflow-x: hidden;
    }


    /* Le hub (.fec-overlay, backdrop-filter) se pose AU-DESSUS de l'accueil (.fec-content) qui reste
       rendu → en clair le « guidaient » violet du hero était flouté en blob parasite à gauche.
       En sombre le texte clair-sur-sombre est imperceptible (dark strictement intact, d'où le scope light).
       On masque la couche accueil tant que l'overlay est présent : il ne reste que le fond à flouter. */
    html[data-theme="light"] .fec-loader:has(.fec-overlay) .fec-content:not(.fec-content-overlay) {
        visibility: hidden;
    }


    /* Le hub « Mes analyses » (.bk-modal) vit DANS .fec-content de l'accueil (z-index:1) → sur le hub chargé,
       .fec-overlay (z-index:10) le recouvre et en light l'accueil est masqué → le modal ne s'affiche pas.
       Quand il s'ouvre, on élève SON hôte au-dessus de l'overlay + on rétablit la visibilité (le backdrop opaque
       du modal couvre l'accueil derrière). Transitoire : retiré dès la fermeture. */
    .fec-content.bk-modal-host { z-index: 5050; }

    /* …mais .fec-content est PIÉGÉ dans .fec-loader (position:fixed = contexte d'empilement racine à z auto ≈0) : son 5050 ne
       dépasse jamais le niveau de .fec-loader. Le pilotage (.fintree-backdrop z 1400) est rendu HORS .fec-loader → il recouvre
       le bk-modal ouvert depuis le FAB. Fix : on lève .fec-loader LUI-MÊME au-dessus du pilotage tant que le hub est ouvert
       (>1400 pilotage et >5000 FAB ; 5700 pour laisser l'opt-in compte, ouvrable DEPUIS le hub, passer au-dessus). */
    .fec-loader:has(.bk-modal-backdrop) { z-index: 5150; }

    /*  MÊME piège pour le panneau Espace pro, et il ne se règle PAS en montant son z-index : mesuré, la
        chaîne est .proshell-panel [fixed z:10061] → .entry-screen → .fec-content [relative z:1] →
        .fec-loader [FIXED z:auto]. `position:fixed` crée TOUJOURS un contexte d'empilement : tout ce qui
        vit sous .fec-loader peint donc au niveau ~0 de la racine, où le stack FAB — qui est HORS de
        .fec-loader (vérifié) — l'emporte avec ses 5000. Le « Mes analyses » passait ainsi PAR-DESSUS un
        panneau modal. On lève donc .fec-loader LUI-MÊME tant que le panneau est ouvert, comme au-dessus.
        `:not(.hidden)` : le panneau reste monté quand on le referme (il garde son état), seule la classe
        change — sans ce filtre, .fec-loader resterait élevé pour toujours après la première ouverture. */
    .fec-loader:has(.proshell-panel:not(.hidden)) { z-index: 5150; }

    /*  Le panneau des régularisations tombe dans le MÊME piège, pour la même raison — il vit sous
        .fec-loader, donc son `fixed` peint au niveau ~0 de la racine et le FAB « Mes analyses »
        (z 5000, hors .fec-loader) passerait devant. Même remède, même filtre `:not(.hidden)`. */
    .fec-loader:has(.solo-panel:not(.hidden)) { z-index: 5150; }

    /*  ⚠️ SECONDE MOITIÉ DU MÊME PIÈGE (mesurée le 2026-09-06, signalée depuis le hub). Lever .fec-loader
        règle la concurrence avec le stack FAB, mais PAS celle qui se joue à l'intérieur : .fec-loader a
        deux enfants directs, `.fec-content` (relative, z:1 — qui porte l'écran d'entrée ET les trois
        panneaux modaux) et `.fec-overlay` (absolute, z:10 — qui porte le HUB). Le z-index 10061 d'un
        panneau ne se compare qu'à SES frères dans .fec-content : dès que le hub est ouvert, tout le
        sous-arbre .fec-content peint SOUS lui, panneau compris. « Découvrir l'espace pro » depuis le hub
        ouvrait donc un panneau invisible et inatteignable.
        Remède : tant qu'un panneau est ouvert, on hisse .fec-content au-dessus de .fec-overlay. Le fond
        du panneau (fixed, inset:0) recouvre alors le hub, ce qui est le comportement modal attendu.
        `> .fec-content` : le combinateur d'enfant direct est indispensable — il existe un second
        `.fec-content.fec-content-overlay` À L'INTÉRIEUR de .fec-overlay, qu'il ne faut pas toucher. */
    /*  L'anonymiseur de FEC tombe dans LES DEUX moitiés du piège : sa modale vit sous .fec-content, donc
        elle passerait sous le stack FAB (moitié 1) et sous le hub (moitié 2). Pas de `:not(.hidden)` ici :
        `AnonymiserModal` ne rend rien du tout quand elle est fermée, la présence du fond SUFFIT. */
    .fec-loader:has(.anonm-back) { z-index: 5150; }

    /*  Les deux lignes d’appel de bas de colonne (anonymiseur puis partenaires) se suivent : elles se
        lisent comme une liste, pas comme deux blocs. */
    .entry-anon { margin-bottom: 2px; }

    .fec-loader:has(.proshell-panel:not(.hidden)) > .fec-content,
    .fec-loader:has(.solo-panel:not(.hidden)) > .fec-content,
    .fec-loader:has(.anonm-back) > .fec-content,
    .fec-loader:has(.bk-modal-backdrop) > .fec-content { z-index: 20; }

    html[data-theme="light"] .fec-loader:has(.fec-overlay) .fec-content.bk-modal-host { visibility: visible; }


    .fec-content-overlay {
        min-height: 100%;
        height: auto;
    }


    /* ═══════════════════════════════════════════════════════════════
           Sas d'entrée (state 0)
           ═══════════════════════════════════════════════════════════════ */
    /* Flux « Publier sur Dealiku » : page d'upload dédiée → on masque la reprise de dossier ; on GARDE l'upload FEC, le mapping
       ET la démo (cliquer la démo charge un jeu d'exemple → le stage de choix Teaser/Datapack s'affiche ensuite, comme un vrai FEC). */

    /* ── Flux « Publier » en iframe : PAS de fond dédié. Le .fec-loader peint déjà un fond de marque plein écran ;
       ajouter un 2ᵉ calque (.dku-da) recréait juste une boîte plus sombre laissant voir une bande du fond autour
       (« rectangle foncé »). La différenciation Dealiku se fait par le CONTENU (eyebrow + textes + features, gérés
       dans le markup via _embed). Seul reste l'eyebrow pill « 🤝 Dealiku ». ── */
    .dku-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand, #00B1CF); background: color-mix(in srgb, var(--brand, #00B1CF) 12%, transparent); border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 30%, transparent); padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; }

    .dku-eyebrow-ic { display: inline-flex; align-items: center; line-height: 1; }

    .dku-eyebrow-ic svg { display: block; }

    .entry-pubback { align-self: flex-start; background: none; border: 1px solid var(--o8, rgba(255,255,255,.16)); color: var(--tx2, #c8d3da); border-radius: 9px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; margin-bottom: 16px; }

    .entry-pubback:hover { border-color: var(--brand, #00B1CF); color: var(--brand, #00B1CF); }

    .entry-screen {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        padding: 24px 16px;
        max-width: 1080px;
        width: 100%;
        margin: 0 auto;
        animation: entryFadeIn 0.6s ease-out;
    }


    @keyframes entryFadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }


    .entry-brand {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.18em;
        color:var(--brand-strong);
        text-transform: uppercase;
        margin-bottom: 4px;
    }


    .entry-headline {
        margin: 0;
        text-align: center;
        font-size: clamp(28px, 4vw, 42px);
        font-weight: 800;
        line-height: 1.2;
        letter-spacing: -0.03em;
        color: var(--sl3);
        display: flex;
        flex-direction: column;
        gap: 4px;
        max-width: 720px;
    }


    .entry-line {
        display: block;
    }


    .entry-line-1 {
        /* Setup discret par CONTRASTE DE POIDS (fin → la promesse en 800 + gradient ressort), PAS par un gris
           atténué qui faisait « désactivé »/peu premium. Couleur riche conservée (--sl3 pleine). */
        font-size: 0.82em;
        font-weight: 500;
        color: var(--sl3);
        letter-spacing: -0.01em;
        opacity: 0;
        animation: entry-line-appear 0.5s ease-out 0.1s forwards;
    }


    .entry-line-2 {
        opacity: 0;
        transform: translateY(8px);
        animation: entry-line-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
    }


    @keyframes entry-line-appear {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }


    @keyframes entry-line-rise {
        from {
            opacity: 0;
            transform: translateY(8px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }


    .entry-accent {
        background: linear-gradient(110deg, var(--brand) 0%, var(--brand) 35%, #f0abfc 60%, var(--brand) 100%);
        background-size: 220% 100%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: accent-shimmer 7s ease-in-out infinite;
    }


    .entry-sub {
        margin: 0;
        font-size: 15px;
        color: var(--sl1);
        text-align: center;
        font-weight: 500;
    }


        .entry-sub b {
            color: var(--sl3);
            font-weight: 700;
        }


    /* ─── Dropzone FEC ─── */
    .dropzone {
        position: relative;
        width: 100%;
        max-width: 520px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        /*  38 → 28 : la colonne gauche a grandi d une preuve, le dépôt rend un peu de son air pour
            que la page tienne toujours sans défilement à 700 px de haut. */
        padding: 28px 24px;
        background:
            radial-gradient(ellipse 70% 70% at 50% 0%, color-mix(in srgb, var(--brand) 8%, transparent) 0%, transparent 70%),
            var(--o3);
        /*  🚨 RETIRÉ le 2026-09-12 — UN backdrop-filter FAIT DE L'ÉLÉMENT UNE
            TEXTURE. Il passe sur sa propre couche de composition, et n'est plus
            redessiné comme du texte mais rééchantillonné comme une image dès que
            quelque chose l'échelonne. Mesuré en embarquant l'accueil dans le banc
            de tournage : à l'échelle 1,000 (cadre 16:9) tout est net ; à 0,778
            (cadre 4:5) CETTE carte est floue et le reste de la page ne l'est pas.
            Le texte voisin survit parce qu'il est re-rastérisé ; elle, non.

            Ce qu'il floutait : une zone de fond quasi uniforme, sous un voile de
            3 % de blanc (--o3). Le gain visuel était donc proche de zéro, et le
            coût — une couche de composition de plus dans une app WASM, plus la
            perte de netteté à toute échelle — bien réel.
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);                              */
        border: 2px dashed color-mix(in srgb, var(--brand) 22%, transparent);
        border-radius: 18px;
        cursor: pointer;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
        margin-top: 8px;
        box-shadow: inset 0 1px 0 var(--o5);
    }


        .dropzone:hover {
            background:
                radial-gradient(ellipse 80% 80% at 50% 0%, color-mix(in srgb, var(--brand) 14%, transparent) 0%, transparent 70%),
                var(--o5);
            border-color: color-mix(in srgb, var(--brand) 55%, transparent);
            transform: translateY(-3px);
            box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--brand) 45%, transparent), inset 0 1px 0 var(--o8);
        }


            .dropzone:hover .dropzone-icon {
                transform: translateY(-2px) scale(1.06);
                opacity: 1;
            }


    .dropzone-active {
        background: color-mix(in srgb, var(--brand) 8%, transparent) !important;
        border-color: var(--brand) !important;
        border-style: solid !important;
        transform: scale(1.01);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 15%, transparent);
    }


    .dropzone-icon {
        color:var(--brand-strong);
        margin-bottom: 4px;
        opacity: 0.85;
        filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--brand) 35%, transparent));
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    }


        .dropzone-icon svg {
            display: block;
            animation: dz-breathe 3.4s ease-in-out infinite;
        }


    @keyframes dz-breathe {
        0%, 100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-4px);
        }
    }


    .dropzone-title {
        font-size: 18px;
        font-weight: 700;
        color: var(--sl3);
        letter-spacing: -0.01em;
    }


    .dropzone-sub {
        font-size: 13px;
        color: var(--sl1);
    }


    .dropzone-spec {
        font-size: 11px;
        color: var(--sl5);
        font-weight: 500;
        margin-top: 6px;
        padding: 3px 10px;
        background: var(--o4);
        border-radius: 5px;
        border: 1px solid var(--o6);
    }


    /* Zone de depot UNIQUE, deux intentions : analyser un FEC / reprendre un dossier (PDF de sauvegarde).
       Remplace la carte « Reprendre un dossier » et son input PDF separe. */
    .dropzone-split {
        display: flex;
        align-items: stretch;
        gap: 14px;
        width: 100%;
        margin-top: 10px;
    }


    .dz-half {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        text-align: center;
    }


    .dz-half-ic {
        display: inline-flex;
        color: var(--brand);
        line-height: 0;
    }


        .dz-half-ic svg {
            width: 20px;
            height: 20px;
        }


    /* Reprise = action SECONDAIRE : gris neutre, pas la couleur d'accent. En palette-aware, --brand2 peut
       sortir tres sature (rose selon la palette) et l'oeil partait a droite alors que le geste par defaut
       est d'analyser un FEC. La distinction se fait par le libelle, pas par la couleur. */
    .dz-half-ic2 {
        color: var(--sl5);
    }


    .dz-half-t {
        font-size: 13px;
        font-weight: 600;
        color: var(--sl4);
    }


    .dz-half-s {
        font-size: 11px;
        color: var(--sl5);
    }


    .dz-split-rule {
        width: 1px;
        align-self: stretch;
        background: var(--o6);
        flex: 0 0 1px;
    }


    /* Sous ~430 px la separation verticale ecrase les libelles : on empile. */
    @media (max-width: 430px) {

        .dropzone-split {
            flex-direction: column;
            gap: 10px;
        }


        .dz-split-rule {
            width: 100%;
            height: 1px;
            flex: 0 0 1px;
            align-self: auto;
        }
    }


    .dropzone-trust {
        font-size: 10px;
        color: #475569;
        font-weight: 500;
        margin-top: 10px;
        letter-spacing: 0.02em;
    }


    /* ─── Separator + Demo button ─── */
    .entry-separator {
        display: flex;
        align-items: center;
        gap: 16px;
        width: 100%;
        max-width: 520px;
        margin: 4px 0;
    }


    .separator-line {
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--o10), transparent);
    }


    .separator-text {
        font-size: 12px;
        color: var(--sl5);
        font-weight: 500;
        white-space: nowrap;
        text-transform: lowercase;
    }


    .btn-demo {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 22px;
        background: var(--o5);
        /*  RETIRÉ le 2026-09-12, même motif que .dropzone : ce bouton est sur
            le MÊME écran, celui qu'on filme. Un voile de 5 % de blanc par-dessus
            un fond quasi uniforme ne demande pas de flou d'arrière-plan, et le
            flou le fait rééchantillonner dès qu'on échelonne le cadre.
            backdrop-filter: blur(10px);                                      */
        color: var(--sl3);
        border: 1px solid var(--o10);
        border-radius: 12px;
        font-size: 14px;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-top: 8px;
        margin-bottom: 8px;
    }


        .btn-demo:hover {
            background: var(--o8);
            border-color: color-mix(in srgb, var(--brand) 30%, transparent);
            transform: translateY(-1px);
        }


    .btn-demo-icon {
        font-size: 11px;
        color:var(--brand-strong);
    }


    .btn-demo-time {
        font-size: 11px;
        color:var(--brand-strong);
        background: color-mix(in srgb, var(--brand) 15%, transparent);
        padding: 2px 7px;
        border-radius: 4px;
        font-weight: 700;
        font-feature-settings: "tnum";
        margin-left: 4px;
    }


    .pdf-import-error {
        margin-top: 8px;
        font-size: 12px;
        color: var(--st-red);
    }


    /* ─── Accueil : cartes de la colonne droite (refonte) ─── */
    .entry-card {
        width: 100%;
        background: var(--sa45);
        border: 1px solid var(--o7);
        border-radius: 14px;
        padding: 14px 16px;
        margin-top: 14px;
        transition: border-color .18s ease, background .18s ease;
    }

    .entry-card:hover { border-color: 0; }

    .entry-card-pro { border-color: color-mix(in srgb, var(--brand) 28%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 6%, transparent), var(--sa45)); }

    .entry-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }

    .entry-card-t { font-size: 12.5px; font-weight: 700; color: var(--sl2); letter-spacing: .01em; }

    .entry-card-tag {
        margin-left: auto; font-size: 9px; font-weight: 800; letter-spacing: .06em; color: var(--surf-1);
        background: linear-gradient(135deg, var(--brand), var(--brand)); border-radius: 5px; padding: 2px 7px; white-space: nowrap;
    }

    /* Neutralise les bordures/marges internes quand les blocs sont dans une carte */
    .entry-card .fec-bk { margin-top: 12px; padding-top: 12px; border-top: 0.5px solid var(--o6); }


    .entry-conn-btn {
        display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
        font-family: var(--font-family); font-size: 12.5px; color: var(--sl2);
        background: color-mix(in srgb, var(--brand) 6%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
        border-radius: 10px; padding: 11px 13px; cursor: pointer; transition: .15s;
    }

    .entry-conn-btn:hover { color: var(--tx1); background: color-mix(in srgb, var(--brand) 13%, transparent); border-color: color-mix(in srgb, var(--brand) 55%, transparent); }

    .entry-conn-arrow { margin-left: auto; color:var(--brand-strong); font-weight: 700; }


    /* ─── Trust + Press ─── */
    .entry-trust {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 12px;
        color: var(--sl1);
        font-weight: 500;
        margin-top: 8px;
    }


        .entry-trust svg {
            color: #34d399;
            flex-shrink: 0;
        }


    .entry-press {
        display: flex;
        align-items: center;
        gap: 24px;
        margin-top: 12px;
        padding-top: 16px;
        border-top: 1px solid var(--o5);
        width: 100%;
        max-width: 520px;
        justify-content: center;
        flex-wrap: wrap;
    }


    .press-label {
        font-size: 11px;
        /* Était #475569 en dur : 2,53:1, sous le seuil. Le jeton muet suit le thème et passe à 4,74. */
        color: var(--sl5);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }


    .press-logo {
        display: inline-flex;
        align-items: center;
        opacity: 0.55;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }


        .press-logo:hover {
            opacity: 1;
            transform: translateY(-1px);
        }


    /* ─── Layout 2 colonnes (écran d'accueil) ─── */
    .entry-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }


    .entry-head,
    .entry-action,
    .entry-aside {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }


    .entry-head {
        gap: 12px;
    }


    .entry-action {
        gap: 14px;
    }


    /* ══ LA TRÉSORERIE QUI RÉPOND — vignette d'accueil ══════════════════════════════════════════
       Le geste que l'écran ne montrait nulle part : poser une hypothèse et voir le point bas se
       déplacer. Le CADRE ne clignote jamais — axes, mois, zéro, libellés et puces sont là dès la
       première image ; seules la courbe et l'étiquette changent. Une capture prise à n'importe quel
       instant montre un graphe crédible, jamais un gabarit à moitié écrit. */
    /*  ⚠️ PAS UNE CARTE. Bordée et posée sur un voile, la vignette portait exactement le même
        habillage que la zone de dépôt et la carte cabinet : rien ne disait « ceci est la
        démonstration » plutôt que « ceci est un composant de plus ». Une preuve n'est pas un
        contrôle — elle vit à nu sur la page, à la largeur de la colonne, et c'est son trait et son
        chiffre qui la font exister. Le plafond de 480 px saute pour la même raison : elle était
        sous-vendue à 340 px de large, avec une étiquette de point bas rendue à 7 px. */
    .tzh { width: 100%; border: 0; background: transparent; padding: 4px 0 0; }

    /*  CLIQUABLE → démo sur la vue d'ensemble. L'anneau est un outline décalé : aucun décalage de mise en page.
        L'affordance « Essayer → » vit dans la ligne des hypothèses (3e colonne auto) — pas une ligne de plus. */
    .tzh-link { cursor: pointer; border-radius: 12px; outline: 1px solid transparent; outline-offset: 8px;
                transition: outline-color .18s ease, transform .18s ease; }

    .tzh-link:hover { outline-color: var(--o22); transform: translateY(-1px); }

    .tzh-link:focus-visible { outline-color: var(--brand); }

    .tzh-go { justify-self: end; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--o22);
              color: var(--sl1); font-size: 11px; font-weight: 600; white-space: nowrap;
              transition: border-color .18s ease, color .18s ease; }

    .tzh-link:hover .tzh-go, .tzh-link:focus-visible .tzh-go { border-color: var(--brand); color: var(--tx1); }

    @media (prefers-reduced-motion: reduce) {
 .tzh-link, .tzh-go { transition: none; }
 .tzh-link:hover { transform: none; }
    }

    .tzh-chart { margin-top: 0; }

    .tzh-chart svg { display: block; width: 100%; height: auto; }

    .tzh-grid { stroke: var(--o8); stroke-width: 1; }

    .tzh-zero { stroke: var(--o22); stroke-width: 1; stroke-dasharray: 3 3; }

    .tzh-guide { stroke: var(--o22); stroke-width: 1; stroke-dasharray: 3 3; }

    /* Les mois RÉELS : trait plein, hors de toute animation. Ils ne bougent jamais. */
    /*  1,8 unité ≈ 2 px : un trait de graphique, pas un tuyau — on lit la forme, pas l encre. */
    .tzh-real { fill: none; stroke: var(--brand); stroke-width: 1.8;
                stroke-linejoin: round; stroke-linecap: round; }

    .tzh-anchor { fill: var(--brand); }

    /* La projection : pointillée. La frontière réel/projeté doit se VOIR. */
    .tzh-prev { fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-dasharray: 5 4;
                stroke-linejoin: round; stroke-linecap: round; opacity: .9; }

    .tzh-fill { fill: color-mix(in srgb, var(--brand) 13%, transparent); stroke: none; }

    .tzh-m, .tzh-ax { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 8.5px;
                      fill: var(--sl1); letter-spacing: .03em; }

    /*  ⚠️ Le disque porte un liseré de la COULEUR DU FOND de la vignette, pas du fond de page :
        c'est ce qui l'isole proprement du filet vertical qui passe dessous. */
    .tzh-dot { fill: var(--brand); stroke: var(--surf-app); stroke-width: 2; }

    /*  ⚠️ ENCRE UNIQUE, PAS DE COULEUR SÉMANTIQUE. Un montant négatif en ambre donnait 2,42:1 en
        thème CLAIR (mesuré) : mélangée à l'encre, l'ambre reste claire sur fond clair. Le signe « − »
        et la position SOUS la ligne de zéro portent déjà le sens — ils n'ont pas besoin d'aide, et
        eux ne dépendent ni du thème ni de la palette. */
    /*  11 unités SVG sur un viewBox de 440 rendu à ~516 px ≈ 13 px : c est LE chiffre qu on vient lire. */
    .tzh-cal { font-size: 11px; font-weight: 700; fill: var(--tx1); }

    /*  tspan DANS le montant : il hériterait du gras et du corps 11 — on le pose explicitement. */
    .tzh-cal-s { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 8.5px; font-weight: 400;
                 fill: var(--sl1); }

    .tzh-lab { opacity: 0; }

    .tzh-l1 { animation: tzhl1 12s linear infinite; }

    .tzh-l2 { animation: tzhl2 12s linear infinite; }

    .tzh-l3 { animation: tzhl3 12s linear infinite; }

    @keyframes tzhl1 { 0%,30% { opacity: 1 } 36%,96% { opacity: 0 } 100% { opacity: 1 } }

    @keyframes tzhl2 { 0%,30% { opacity: 0 } 36%,63% { opacity: 1 } 69%,100% { opacity: 0 } }

    @keyframes tzhl3 { 0%,63% { opacity: 0 } 69%,96% { opacity: 1 } 100% { opacity: 0 } }


    /*  Les deux hypothèses SUR UNE LIGNE : empilées, elles se lisaient comme une liste de réglages ;
        côte à côte, comme deux leviers qu'on actionne — et le graphe garde sa hauteur. */
    .tzh-hyps { display: grid; grid-template-columns: 1fr 1fr auto; gap: 7px; margin-top: 7px; align-items: center; }

    .tzh-hyp { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 8px;
               border: 1px solid var(--o8); background: var(--o4); min-width: 0; }

    .tzh-box { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 5px;
               border: 1px solid var(--o22); display: grid; place-items: center; font-size: 8px;
               color: var(--brand-contrast, #06141a); }

    .tzh-box i { font-style: normal; opacity: 0; }

    .tzh-hyp-t { flex: 1; min-width: 0; font-size: 10.5px; color: var(--tx2); line-height: 1.35; }

    .tzh-hyp-t b { color: var(--tx1); font-weight: 600; }

    .tzh-h1 .tzh-box { animation: tzhbox 12s linear infinite; }

    .tzh-h2 .tzh-box { animation: tzhbox2 12s linear infinite; }

    .tzh-h1 .tzh-box i { animation: tzhchk 12s linear infinite; }

    .tzh-h2 .tzh-box i { animation: tzhchk2 12s linear infinite; }

    @keyframes tzhbox { 0%,30% { background: transparent; border-color: var(--o22) }
                        36%,96% { background: var(--brand); border-color: var(--brand) }
                        100% { background: transparent; border-color: var(--o22) } }

    @keyframes tzhbox2 { 0%,63% { background: transparent; border-color: var(--o22) }
                         69%,96% { background: var(--brand); border-color: var(--brand) }
                         100% { background: transparent; border-color: var(--o22) } }

    @keyframes tzhchk { 0%,30% { opacity: 0 } 36%,96% { opacity: 1 } 100% { opacity: 0 } }

    @keyframes tzhchk2 { 0%,63% { opacity: 0 } 69%,96% { opacity: 1 } 100% { opacity: 0 } }


    /*  ⚠️ SMIL NE LIT PAS LES MEDIA QUERIES. `prefers-reduced-motion` fige les étiquettes et les
        puces, mais la courbe continuerait — c'est `ikuTzhReduce` (app.js) qui la met en pause,
        sur le DERNIER état, jamais sur une courbe à mi-chemin. */
    @media (prefers-reduced-motion: reduce) {

        .tzh-lab { animation: none !important; opacity: 0 }

        .tzh-l3 { opacity: 1 }

        .tzh-hyp .tzh-box { animation: none !important; background: var(--brand); border-color: var(--brand) }

        .tzh-hyp .tzh-box i { animation: none !important; opacity: 1 }
    }


    .entry-aside {
        gap: 18px;
    }


    .entry-features {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 13px;
        width: 100%;
        max-width: 340px;
    }


    .entry-feat {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        text-align: left;
    }


    /* Ligne-titre (titre + bouton « ? ») des items local / sans email → « ? » collé au libellé. */
    .entry-feat-h { display: flex; align-items: center; gap: 6px; }


    /* Bouton « ? » d'aide (items local / sans email) → ouvre WhyLocalModal. */
    .entry-feat-help {
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 1px solid color-mix(in srgb, var(--brand) 42%, transparent);
        background: color-mix(in srgb, var(--brand) 10%, transparent);
        color: var(--brand);
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
        cursor: pointer;
        display: grid;
        place-items: center;
        transition: background .12s, transform .12s;
    }


        .entry-feat-help:hover {
            background: color-mix(in srgb, var(--brand) 24%, transparent);
            transform: scale(1.12);
        }


    .entry-feat-ic {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        background: color-mix(in srgb, var(--brand) 10%, transparent);
        border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
        color:var(--brand-strong);
    }


        .entry-feat-ic svg {
            width: 16px;
            height: 16px;
        }


        /* Le 1ᵉʳ (vitesse) et le 3ᵉ (sans compte) suivent les accents de palette ; le 2ᵉ (100% local · RGPD) est
           VOLONTAIREMENT VERT — couleur sémantique de confiance/protection : on ne veut PAS qu'un accent de palette
           le fasse virer au rouge/orange (lecture « danger ») sur ce message rassurant. Vert fixe, theme-aware via color-mix. */
        .entry-feat-ic.is-safe {
            color: #10b981;
            background: color-mix(in srgb, #10b981 12%, transparent);
            border-color: color-mix(in srgb, #10b981 30%, transparent);
        }


        .entry-feat-ic.is-violet {
            color: var(--brand3-strong);
            background: color-mix(in srgb, var(--brand3) 10%, transparent);
            border-color: color-mix(in srgb, var(--brand3) 20%, transparent);
        }


    .entry-feat-txt {
        display: flex;
        flex-direction: column;
        gap: 1px;
        font-size: 12.5px;
        color: #8a99ad;
        line-height: 1.35;
    }


        .entry-feat-txt b {
            color:var(--tb3);
            font-weight: 650;
            font-size: 13px;
        }

        /* Clair : titre de feature en sombre (le blanc #e8edf5 serait invisible) */
        html[data-theme="light"] .entry-feat-txt b { color: #18222c; }


    /* ════════════════ ACCUEIL — POLISH LIGHT MODE (P1→P4) ════════════════
       En clair, les blocs translucides (var(--oX)) se fondent dans le fond teal.
       On les transforme en vraies surfaces claires posées (ombres douces froides),
       on redonne du focal à la dropzone et on désature le fond. Sombre intact. */

    /* P3 — fond clair : même grammaire « aurora-mesh » que le sombre mais aérée.
       Halo de marque adouci + décalé (CTA), nappe secondaire ténue, voile froid en sol,
       et vignette cool très légère pour poser les cartes sans grisailler le fond. */
    /* Clair : même « aurora-mesh » que le sombre mais sur une base FROIDE en dégradé (≠ le crème plat var(--hx5) #eef1f4)
       + nappes de marque assumées (teal en haut, sol indigo) → de la profondeur, plus du tout « crème ». */
    html[data-theme="light"] .fec-loader {
        background:
            radial-gradient(135% 125% at 50% 40%, transparent 56%, rgba(49, 46, 129, 0.07) 100%),
            radial-gradient(ellipse 78% 56% at 50% 116%, rgba(99, 102, 241, 0.13) 0%, transparent 58%),
            radial-gradient(ellipse 58% 50% at 12% 0%, color-mix(in srgb, var(--brand) 15%, transparent) 0%, transparent 58%),
            radial-gradient(ellipse 96% 72% at 60% -16%, color-mix(in srgb, var(--brand) 26%, transparent) 0%, transparent 62%),
            linear-gradient(168deg, #eaf1f9 0%, #e2ebf6 52%, #e7eff8 100%);
    }

    /* En clair, le grain doit rester quasi imperceptible (sinon « poussière » sur fond blanc). */
    html[data-theme="light"] .fec-loader::before { opacity: 0.022; }


    /* P1 — dropzone : surface blanche posée, bordure dashed franche, ombre douce indigo, icône saturée */
    html[data-theme="light"] .dropzone {
        background:
            radial-gradient(ellipse 70% 70% at 50% 0%, color-mix(in srgb, var(--brand) 6%, transparent) 0%, transparent 70%),
            #ffffff;
        border-color: color-mix(in srgb, var(--brand) 40%, transparent);
        box-shadow: 0 10px 30px -14px rgba(49, 46, 129, 0.28), inset 0 1px 0 #fff;
    }

    html[data-theme="light"] .dropzone:hover {
        background:
            radial-gradient(ellipse 80% 80% at 50% 0%, color-mix(in srgb, var(--brand) 10%, transparent) 0%, transparent 70%),
            #ffffff;
        border-color: color-mix(in srgb, var(--brand) 65%, transparent);
        box-shadow: 0 20px 44px -18px rgba(79, 70, 229, 0.40), inset 0 1px 0 #fff;
    }

    html[data-theme="light"] .dropzone-icon {
        color:var(--brand-strong);
        filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--brand) 30%, transparent));
    }

    html[data-theme="light"] .dropzone-spec {
        background: #f1f4f9;
        border-color: #e2e8f0;
    }


    /* P2 — bouton démo : surface définie + bordure + micro-ombre (2ᵉ CTA lisible) */
    html[data-theme="light"] .btn-demo {
        background: #ffffff;
        border-color: color-mix(in srgb, var(--brand) 28%, transparent);
        box-shadow: 0 6px 18px -12px rgba(49, 46, 129, 0.30);
    }

    html[data-theme="light"] .btn-demo:hover {
        background: #fbfcff;
        border-color: color-mix(in srgb, var(--brand) 50%, transparent);
        box-shadow: 0 12px 26px -14px rgba(79, 70, 229, 0.34);
    }

    html[data-theme="light"] .btn-demo-icon { color:var(--brand-strong); }

    html[data-theme="light"] .btn-demo-time { color: #4f46e5; background: color-mix(in srgb, var(--brand) 12%, transparent); }


    /* P2 — carte « Reprendre un dossier » : surface claire + hairline + ombre légère.
       :not(.entry-card-pro) → on préserve le dégradé teal de la variante pro. */
    html[data-theme="light"] .entry-card:not(.entry-card-pro) {
        background: #ffffff;
        border-color: #e6ebf2;
        box-shadow: 0 8px 22px -16px rgba(30, 41, 59, 0.30);
    }


    /* P4 — chips d'icônes features : couleurs de MARQUE (brand/brand2/brand3 via -strong, déjà theme-aware) → plus
       d'override d'icône en clair (sinon on re-figerait des couleurs hors palette). Seul le libellé garde sa teinte. */
    html[data-theme="light"] .entry-feat-txt { color: #5b6b7e; }


    @media (min-width: 900px) {

        .entry-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
            grid-template-rows: auto auto;
            grid-template-areas:
                "head action"
                "aside action";
            column-gap: 56px;
            row-gap: 24px;
            align-items: center;
            max-width: 1060px;
        }


        .entry-head {
            grid-area: head;
            align-self: end;
            align-items: flex-start;
            gap: 14px;
        }


        .entry-aside {
            grid-area: aside;
            align-self: start;
            align-items: flex-start;
        }


        .entry-action {
            grid-area: action;
            align-self: center;
            padding: 6px 0;
            /* Halo de marque retiré : son bord flou jurait avec l'arrondi NET de la carte d'upload (démarcation visible). Fond plat = propre. */
        }


        .entry-headline {
            text-align: left;
            align-items: flex-start;
            max-width: none;
        }


        .entry-sub {
            text-align: left;
        }


        .entry-features {
            max-width: 360px;
        }


        .entry-press {
            justify-content: flex-start;
            margin-top: 4px;
        }
    }


        .press-logo img {
            width: auto;
        }


            .press-logo img[alt="Maddyness"] {
                height: 22px;
            }


            .press-logo img[alt="BFM Business"] {
                height: 18px;
            }


    /* Clair : les logos presse sont des SVG blancs → on les passe en silhouette sombre */
    html[data-theme="light"] .press-logo { opacity: 0.72; }

    html[data-theme="light"] .press-logo:hover { opacity: 0.95; }

    html[data-theme="light"] .press-logo img { filter: brightness(0); }


    /*  Entrée vers l'espace pro depuis l'ACCUEIL. Plus sobre encore que le bandeau d'après-résultats :
        ici on n'a rien prouvé, donc on propose sans insister — bordure seule, pas de fond coloré. */
    /*  ⚠️ `text-align: left` et `font: inherit` sont OBLIGATOIRES ici : l'élément est un BOUTON, et la
        feuille de style du navigateur lui impose `center` + sa propre police. Le paragraphe sortait
        donc CENTRÉ entre une icône à gauche et un lien à droite — trois lignes en drapeau des deux
        côtés, dans une mise en page qui, elle, est alignée. */
    .entry-pro { display: flex; align-items: center; gap: 13px; margin: 14px auto 0; max-width: 520px;
                 padding: 13px 16px; border-radius: 13px; text-decoration: none; flex-wrap: wrap;
                 text-align: left; font: inherit; cursor: pointer;
                 /*  ⚠️ `--pf-bd2` et `--pf-mut` n'existent QUE sous .pf-root (le portefeuille) : ici ils
                     retombaient sur leurs valeurs de repli, du BLANC à 14 % — donc aucune bordure
                     visible en thème clair, la carte flottait sans contour. Les jetons globaux, eux,
                     suivent le thème. */
                 border: 1px solid var(--color-border-strong, rgba(255,255,255,.14)); background: transparent;
                 transition: border-color .14s, background .14s; }

    .entry-pro:hover { border-color: color-mix(in srgb, var(--brand, #00b1cf) 45%, transparent);
                       background: color-mix(in srgb, var(--brand, #00b1cf) 6%, transparent); }

    .entry-pro:focus-visible { outline: 2px solid var(--brand, #00b1cf); outline-offset: 2px; }

    .entry-pro-ico { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px;
                     border-radius: 10px; color: var(--brand, #00b1cf);
                     background: color-mix(in srgb, var(--brand, #00b1cf) 12%, transparent); }

    .entry-pro-txt { flex: 1 1 200px; min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--color-text-secondary, #b7c2cf); }

    .entry-pro-txt b { color: var(--color-text-primary, #e8f0f3); font-weight: 650; }

    /* La question porte le bloc : sa propre ligne, un cran au-dessus du corps. */
    .entry-pro-q { display: block; font-size: 13px; margin-bottom: 1px; }

    /*  Chevron : signal de direction, pas libellé. Il ne se met jamais à la ligne tout seul — d'où
        `flex: 0 0 auto` sans base extensible — et avance au survol pour confirmer qu'on va quelque part. */
    .entry-pro-chev { flex: 0 0 auto; font-size: 15px; line-height: 1; color: var(--brand-strong, #7fb0ff);
                      transition: transform .14s, color .14s; }

    .entry-pro:hover .entry-pro-chev { color: var(--brand, #00b1cf); transform: translateX(3px); }

    @media (prefers-reduced-motion: reduce) {
 .entry-pro-chev { transition: color .14s; }

                                               .entry-pro:hover .entry-pro-chev { transform: none; }
    }


    /*  Proposition partenaires (2026-09-15) : la ligne la plus légère de l'accueil, sous la carte de l'espace pro. Une phrase
        et deux liens, au poids du lien /solo : l'offre aux partenaires se dit sans rivaliser avec le dépôt, la démo ni l'espace
        pro. Dans entry.css et non ailleurs : la coque statique d'index.html la peint avant Blazor. */
    .entry-ptn { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 6px; max-width: 520px;
                 margin: -2px 0 0; font-size: 12px; line-height: 1.5; color: var(--sl1, #9bb3bd); text-align: center; }

    .entry-ptn-ic { flex: none; width: 14px; height: 14px; color: var(--brand, #00b1cf); }

    .entry-ptn-lien { padding: 0 1px; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer;
                      color: var(--brand-strong, #00b1cf);
                      border-bottom: 1px solid color-mix(in srgb, var(--brand, #00b1cf) 45%, transparent); border-radius: 0;
                      transition: border-color .14s, color .14s; }

    .entry-ptn-lien.is-second { font-weight: 500; color: var(--color-text-secondary, #b7c2cf);
                                border-bottom-color: color-mix(in srgb, var(--color-text-secondary, #b7c2cf) 35%, transparent); }

    .entry-ptn-lien:hover { border-bottom-color: var(--brand, #00b1cf); }

    .entry-ptn-lien.is-second:hover { color: var(--color-text-primary, #e8f0f3); }

    .entry-ptn-lien:focus-visible { outline: 2px solid var(--brand, #00b1cf); outline-offset: 2px; }

    .entry-ptn-sep { opacity: .6; }

    @media (prefers-reduced-motion: reduce) {
        .entry-ptn-lien { transition: none; }
    }


    @media (max-width: 768px) {


        .entry-headline {
            font-size: 26px;
        }


        .dropzone {
            padding: 28px 16px;
        }
    }


    @media (max-width: 700px) {

        .fec-content {
            padding: 16px;
            gap: 6px;
        }


        .entry-press {
            gap: 16px;
        }
    }

/* ── Coque statique (html.iku-shell, posée par index.html avant le paint) : l'écran d'entrée est déjà à l'écran quand
   Blazor prend la main. Les animations d'apparition (fondu de l'écran, lignes du titre) ne doivent rejouer NI sur la
   coque (elles retarderaient le LCP) NI sur le rendu Blazor (elles feraient cligner un écran déjà visible). Les
   animations d'ambiance (vignette, respiration de l'icône) restent, recalées par ikuTzhSync. ── */
html.iku-shell .entry-screen { animation: none; opacity: 1; }
html.iku-shell .entry-line-1, html.iku-shell .entry-line-2 { animation: none; opacity: 1; transform: none; }