/*  ═══════════════════════════════════════════════════════════════════════════════════════════════
    BUSINESS PLAN EX-NIHILO — parcours de création d'entreprise (préfixe `crea-`).

    Écran : plein cadre, par-dessus l'accueil. Trois zones invariables :
      · l'en-tête, qui dit où l'on en est (`.crea-head`) ;
      · le corps, formulaire à gauche et états financiers à droite (`.crea-body`) ;
      · le bandeau de TRÉSORERIE, collé en bas, visible du premier au dernier écran (`.crea-cash`).

    Pourquoi la trésorerie EN BAS et pas en colonne : la saisie est déjà étroite sur un portable, et
    une colonne droite disparaîtrait sous 900 px — or c'est là que le créateur remplit son plan. En
    bas, le bandeau reste visible pendant qu'on tape et ne vole pas de largeur au formulaire. C'est
    aussi le seul emplacement qui survit au clavier virtuel.

    Jetons locaux rebranchés sur tokens.css, jamais de couleur en dur hors de ce bloc.
    ⚠️ Toute modification ici doit bumper le `?v=` de creation.css dans index.html.
    ═══════════════════════════════════════════════════════════════════════════════════════════════ */

.crea-root {
    --crea-gap: 1.25rem;
    --crea-ink: var(--color-text-primary);
    --crea-sub: var(--color-text-secondary);
    --crea-dim: var(--color-text-dim);
    --crea-line: var(--color-border-light);
    --crea-card: var(--color-bg-card);
    --crea-soft: var(--color-bg-card-soft);
    --crea-input: var(--color-bg-input);
    --crea-accent: var(--color-teal);
    --crea-ok: var(--color-success);
    --crea-warn: var(--color-warning);
    --crea-bad: var(--color-danger);

    /*  Palette de SÉRIES — catégories de revenus, charges contre salaires. Cinq teintes distinctes,
        lisibles en clair comme en sombre, et qui ne disent rien de « bon » ou « mauvais » : une
        catégorie n'est pas un état. Les deux premières sont celles de la marque ; les suivantes sont
        posées ici, dans le bloc de jetons, et nulle part ailleurs dans la feuille. */
    --crea-s0: var(--color-teal);
    --crea-s1: #F2B457;
    --crea-s2: #7C9CFF;
    --crea-s3: #5DCAA5;
    --crea-s4: #C58AE0;

    /*  Surfaces empruntées aux vues LBO / DCF : une carte n'a pas un fond « à elle », elle est une
        éclaircie du texte sur le fond de l'écran. Sur un dégradé, c'est la seule façon d'avoir des
        cartes qui restent lisibles où qu'elles tombent. */
    --crea-tint: color-mix(in srgb, var(--crea-ink) 3%, transparent);
    --crea-tint-2: color-mix(in srgb, var(--crea-ink) 5%, transparent);
    --crea-hair: color-mix(in srgb, var(--crea-ink) 9%, transparent);
    --crea-ink-on: var(--brand-contrast, #04121a);

    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    /*  FOND EN DÉGRADÉ (2026-09-23, demande d'Arthur) : deux halos de marque en haut, une descente vers
        le fond de l'application. Il donne au module une identité propre sans changer une seule teinte de
        contenu — tout est en color-mix sur l'accent, donc il suit la palette du cabinet et les deux thèmes.
        🚨 La couleur de repli reste en dur : un fond plein ne doit jamais dépendre d'un jeton qui manque.
        (C'est exactement ce qui rendait cet écran transparent avant le 2026-09-23.) */
    background:
        radial-gradient(1200px 640px at 8% -10%, color-mix(in srgb, var(--crea-accent) 20%, transparent), transparent 60%),
        radial-gradient(900px 520px at 98% -4%, color-mix(in srgb, var(--brand2, #44C1A3) 13%, transparent), transparent 55%),
        linear-gradient(180deg, color-mix(in srgb, var(--crea-ink) 4%, transparent), transparent 38%),
        var(--surf-app, #071d28);
    color: var(--crea-ink);
    font-family: var(--font-family);
    overflow: hidden;
}

/*  THÈME CLAIR : les mêmes halos, deux fois moins appuyés. Un dégradé qui marche sur un fond nuit
    devient une tache sur du papier — et les cartes, qui sont des éclaircies du texte, y perdent leur
    séparation d'avec le fond. */
html[data-theme="light"] .crea-root {
    --crea-tint: color-mix(in srgb, var(--crea-ink) 4%, transparent);
    --crea-tint-2: color-mix(in srgb, var(--crea-ink) 6%, transparent);
    --crea-hair: color-mix(in srgb, var(--crea-ink) 12%, transparent);
    background:
        radial-gradient(1200px 640px at 8% -10%, color-mix(in srgb, var(--crea-accent) 11%, transparent), transparent 58%),
        radial-gradient(900px 520px at 98% -4%, color-mix(in srgb, var(--brand2, #44C1A3) 8%, transparent), transparent 54%),
        var(--surf-app, #f6f9fb);
}

/* ── En-tête ─────────────────────────────────────────────────────────────────────────────────── */
.crea-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 22px 12px;
    border-bottom: 1px solid var(--crea-hair);
    flex: 0 0 auto;
}

.crea-head-id { display: grid; gap: 3px; min-width: 0; max-width: 21rem; }
.crea-head-t { margin: 0; font: 700 17px/1.2 var(--font-family); letter-spacing: -.012em; }
.crea-head-s { margin: 2px 0 0; font-size: 11.5px; color: var(--crea-dim); }
.crea-head-sp { flex: 1; }

.crea-close {
    border: 1px solid var(--crea-hair);
    background: transparent;
    color: var(--crea-sub);
    border-radius: 99px;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    padding: 0;
    flex: 0 0 auto;
    cursor: pointer;
}
.crea-close:focus-visible { outline: 2px solid var(--crea-accent); outline-offset: 2px; }
.crea-close:hover { color: var(--crea-ink); border-color: var(--color-border-hover); }

/*  Fil des étapes : un SÉLECTEUR SEGMENTÉ, pas une barre de progression — on peut revenir en arrière, et
    l'ensemble doit se lire comme un seul objet. Même gabarit que les segments des vues LBO / DCF : un rail
    discret, l'étape courante en teinte de marque, les étapes faites signalées par leur seule pastille. */
.crea-steps {
    display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
    padding: 3px;
    border-radius: 11px;
    border: .5px solid var(--crea-hair);
    background: var(--crea-tint-2);
}

.crea-step {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--crea-ink) 58%, transparent);
    border-radius: 8px;
    padding: 5px 10px;
    font: 600 12px/1.2 var(--font-family);
    cursor: pointer;
    white-space: nowrap;
}
.crea-step:hover { color: var(--crea-ink); background: color-mix(in srgb, var(--crea-ink) 5%, transparent); }
.crea-step:focus-visible { outline: 2px solid var(--crea-accent); outline-offset: 1px; }
.crea-step.is-on { color: var(--crea-accent); background: color-mix(in srgb, var(--crea-accent) 16%, transparent); font-weight: 700; }
.crea-step.is-done { color: color-mix(in srgb, var(--crea-ink) 72%, transparent); }
.crea-step-n {
    display: inline-grid;
    place-items: center;
    width: 17px; height: 17px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--crea-ink) 10%, transparent);
    font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.crea-step.is-on .crea-step-n { background: var(--crea-accent); color: var(--crea-ink-on); }
.crea-step.is-done .crea-step-n { background: color-mix(in srgb, var(--crea-ok) 24%, transparent); color: var(--crea-ok); }

/* ── Corps : formulaire + états ──────────────────────────────────────────────────────────────── */
.crea-body {
    flex: 1;
    min-height: 0;
    display: grid;
    /*  La saisie a besoin de plus de largeur que la lecture : l'étape des ventes aligne un nom, un
        montant, un taux, une part et une courbe sur la même ligne. Le tableau des états, lui, a une
        largeur NATURELLE (libellés + une colonne par exercice) : on la lui donne et on laisse tout le
        reste au formulaire, plutôt qu'un partage en fractions qui coupait la dernière année. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 648px);
    gap: var(--crea-gap);
    padding: var(--crea-gap);
    overflow: auto;
    align-content: start;
}

.crea-form { min-width: 0; }
.crea-form-h { margin: 0 0 3px; font: 700 18px/1.2 var(--font-family); letter-spacing: -.015em; }
/*  Pas de largeur de lecture ici : ces intros font une ou deux phrases et la colonne leur est acquise.
    Bornées à 56 ch, elles se coupaient au tiers de la colonne et laissaient un vide à droite. */
.crea-form-s { margin: 0 0 16px; color: var(--crea-sub); font-size: 12px; line-height: 1.55; }

.crea-fields { display: grid; gap: .85rem; }

.crea-field { display: grid; gap: 5px; }
.crea-field > label { font-size: 11.5px; font-weight: 600; color: var(--crea-ink); }
.crea-hint { font-size: 10.5px; color: var(--crea-dim); line-height: 1.5; }

.crea-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .85rem; }

.crea-in {
    width: 100%;
    box-sizing: border-box;
    background: var(--crea-input);
    border: 1px solid var(--color-border-hover);
    border-radius: 8px;
    color: var(--crea-ink);
    font: 600 12.5px/1.2 var(--font-family);
    font-variant-numeric: tabular-nums;
    padding: 8px 10px;
    min-height: 32px;
}
/*  Anneau de focus des vues LBO / DCF : 2 px de marque à 30 %, pas une ombre large — sur un fond en
    dégradé, une ombre diffuse bave et le champ paraît flou. */
.crea-in:focus { outline: none; border-color: var(--crea-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--crea-accent) 32%, transparent); }
.crea-in::placeholder { color: var(--crea-dim); font-weight: 500; }
.crea-in-suf { position: relative; display: flex; align-items: center; }
.crea-in-suf > .crea-in { padding-right: 2.6rem; }
.crea-in-suf > span { position: absolute; right: 9px; font-size: 10px; color: var(--crea-dim); pointer-events: none; }

/* Modèles d'activité */
.crea-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .7rem; }

.crea-model {
    text-align: left;
    border: 1px solid var(--crea-line);
    background: var(--crea-tint);
    border-radius: 12px;
    padding: 11px 13px;
    cursor: pointer;
    font: inherit;
    color: var(--crea-ink);
    display: grid;
    gap: .25rem;
}
.crea-model:hover { border-color: var(--color-border-hover); }
.crea-model.is-on { border-color: color-mix(in srgb, var(--crea-accent) 55%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--crea-accent) 15%, transparent), color-mix(in srgb, var(--crea-accent) 3%, transparent)); }
.crea-model-t { font-weight: 700; font-size: 13px; }
.crea-model-p { font-size: 11px; color: var(--crea-sub); line-height: 1.45; }

/* Lignes répétables (investissements, charges, salaires) */
.crea-list { display: grid; gap: .5rem; }

.crea-item {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: .5rem;
    align-items: center;
}
.crea-item-del {
    border: 1px solid var(--crea-hair);
    background: transparent;
    color: var(--crea-dim);
    border-radius: 8px;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    cursor: pointer;
    font: inherit;
    line-height: 1;
}
.crea-item-del:hover { color: var(--crea-bad); border-color: var(--crea-bad); }

.crea-add {
    justify-self: start;
    border: 1px dashed var(--crea-hair);
    background: transparent;
    color: var(--crea-sub);
    border-radius: 99px;
    padding: 6px 13px;
    font: 600 11.5px/1.2 var(--font-family);
    cursor: pointer;
}
.crea-add:hover { color: var(--crea-accent); border-color: var(--crea-accent); }

/* ── États financiers, à droite ──────────────────────────────────────────────────────────────── */
.crea-etats { display: grid; gap: .7rem; align-content: start; min-width: 0; }

.crea-card {
    border: 1px solid var(--crea-line);
    background: var(--crea-tint);
    border-radius: 12px;
    padding: 12px 14px;
}
.crea-card-t {
    margin: 0 0 9px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--crea-dim);
}

.crea-tab { width: 100%; border-collapse: collapse; font-size: .82rem; }
.crea-tab th, .crea-tab td { padding: .28rem 0; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crea-tab th:first-child, .crea-tab td:first-child { text-align: left; width: 100%; padding-right: .75rem; white-space: normal; }
.crea-tab thead th { font-size: .74rem; color: var(--crea-dim); font-weight: 600; border-bottom: 1px solid var(--crea-line); }
.crea-tab td { color: var(--crea-sub); }
.crea-tab td:first-child { color: var(--crea-ink); }
.crea-tab tr.crea-sum td { border-top: 1px solid var(--crea-line); font-weight: 650; color: var(--crea-ink); padding-top: .35rem; }
.crea-tab tr.crea-sum td:first-child { color: var(--crea-ink); }
.crea-neg { color: var(--crea-bad); }

/* ── Point bas de trésorerie, DANS L'EN-TÊTE (2026-09-23) ─────────────────────────────────────
   C'était un bandeau collé en bas : une pleine largeur pour un chiffre, et le seul endroit de l'écran
   qu'on ne regarde pas en saisissant. Il monte donc à côté du fil des étapes. Le bloc est borné et
   ne pousse jamais la navigation sur un second rang : l'intitulé au-dessus, le chiffre et sa note
   en dessous, sur une seule ligne chacun. */
.crea-cash {
    flex: 0 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "l l" "v w";
    column-gap: 9px;
    align-items: baseline;
}
.crea-cash-l { grid-area: l; font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--crea-dim); font-weight: 700; }
.crea-cash-v { grid-area: v; font-size: 18px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; }
.crea-cash-v.is-bad { color: var(--crea-bad); }
.crea-cash-v.is-ok { color: var(--crea-ok); }
.crea-cash-w { grid-area: w; font-size: 10.5px; color: var(--crea-sub); line-height: 1.35; min-width: 0; }

.crea-spark { width: 100%; height: 62px; display: block; overflow: visible; }
.crea-spark-zero { stroke: var(--crea-line); stroke-width: 1; }
.crea-spark-line { fill: none; stroke: var(--crea-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.crea-spark-fill { fill: var(--color-teal-bg); stroke: none; }
.crea-spark-low { fill: var(--crea-bad); }
.crea-spark-lowtxt { fill: var(--crea-bad); font-size: 10px; font-weight: 700; }
.crea-spark-ax { fill: var(--crea-dim); font-size: 9px; }

/* ── Pied : navigation ───────────────────────────────────────────────────────────────────────── */
.crea-nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 11px 22px 12px;
    border-top: 1px solid var(--crea-hair);
}
.crea-nav-sp { flex: 1; }

/*  Gélules des vues LBO / DCF : une bordure fine, un fond transparent, et le seul bouton plein est celui
    qui fait avancer. Hauteur tenue par le rembourrage (32 px), pas par une hauteur de ligne. */
.crea-btn {
    border: 1px solid var(--crea-hair);
    background: transparent;
    color: var(--crea-ink);
    border-radius: 99px;
    padding: 8px 17px;
    font: 600 12.5px/1.2 var(--font-family);
    cursor: pointer;
}
.crea-btn:hover:not(:disabled) { border-color: var(--color-border-hover); }
.crea-btn:disabled { opacity: .45; cursor: default; }
.crea-btn:focus-visible { outline: 2px solid var(--crea-accent); outline-offset: 2px; }

.crea-btn.is-main {
    background: var(--crea-accent);
    border-color: var(--crea-accent);
    color: var(--crea-ink-on);
    font-weight: 700;
}
.crea-btn.is-main:hover:not(:disabled) { filter: brightness(1.08); }

/* ── La porte sur l'accueil ──────────────────────────────────────────────────────────────────── */
/*  Hors du <label for="fec-input"> : un clic ici ne doit PAS ouvrir le sélecteur de fichiers. */
.crea-door {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    box-sizing: border-box;
    margin: .6rem 0 0;
    padding: .7rem .85rem;
    border: 1px solid var(--color-border-light);
    border-radius: .6rem;
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.crea-door:hover { border-color: var(--color-teal-border); background: var(--color-teal-bg); }

.crea-door-ic {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2rem; height: 2rem;
    border-radius: .5rem;
    background: var(--color-teal-bg-strong);
    color: var(--color-teal);
}
.crea-door-tx { display: grid; gap: .1rem; min-width: 0; }
.crea-door-t { font-size: .88rem; font-weight: 650; }
.crea-door-s { font-size: .78rem; color: var(--color-text-secondary); line-height: 1.4; }
.crea-door-free { color: var(--color-success); font-weight: 650; }
.crea-door-chev { margin-left: auto; color: var(--color-text-dim); flex: 0 0 auto; }

/* ── Écrans étroits ──────────────────────────────────────────────────────────────────────────── */
@container (max-width: 900px) {
    .crea-body { grid-template-columns: minmax(0, 1fr); }
}

/* Bascule Tableau / Graphiques, au-dessus des deux (2026-09-23).
   🚨 Les boutons segmentés de la création font 2rem de haut (ils servent d'abord dans les formulaires) : sans
      cette remise à la taille du cockpit, la pastille active débordait de son cadre — la bascule paraissait cassée. */
.crea-vue-bascule { display: flex; justify-content: flex-end; margin-bottom: .5rem; padding-right: .15rem; }
.crea-root .crea-vue-bascule .iku-seg-b { font-size: 11px; padding: 0 10px; min-height: 0; height: 24px; }

/* Tableau de bord (2026-09-23) : les DEUX GRAPHES DU PRODUIT (apexSynth « hub » + apexTreso), pas des SVG maison.
   Ils s'animent d'eux-mêmes (morph ApexCharts) quand les chiffres bougent — aucune transition CSS ici.
   🚨 Hauteur DÉFINIE sur le cadre et sur la cible, débordement caché : ApexCharts pose un min-height sur son
      conteneur et en relit la hauteur au rendu suivant. Sans bornes, le graphe grandit à chaque saisie. */
.crea-bord { margin-top: .9rem; padding: 12px 14px; border: 1px solid var(--crea-line); border-radius: 12px; background: var(--crea-tint); }
.crea-bord-t { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--crea-dim); margin-bottom: 9px; }
.crea-bord-g { height: 232px; overflow: hidden; }
.crea-bord-apex { height: 232px; min-height: 0; }
@media (max-width: 700px) {
    .crea-bord-g, .crea-bord-apex { height: 186px; }
}

/* Bandeau « votre plan a été retrouvé » (2026-09-23) : discret, informatif, avec la sortie de secours à droite. */
.crea-repris { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: .55rem;
    border: 1px solid color-mix(in srgb, var(--color-success) 35%, transparent);
    background: color-mix(in srgb, var(--color-success) 10%, transparent); font-size: .82rem; }
.crea-repris > span { display: inline-flex; align-items: center; gap: .4rem; flex: 1; }
.crea-repris-x { border: 0; background: none; color: var(--crea-sub); font: inherit; font-size: .8rem;
    text-decoration: underline; cursor: pointer; }
.crea-repris-x:hover { color: var(--crea-ink); }

/* Les trois états sont rendus par LE TABLEAU DU COCKPIT (Shared/FinTreeTable, 2026-09-23) : il défile tout seul et veut
   donc une hauteur, sinon `.ftt-wrap { height: 100% }` s'effondre. La carte lui laisse toute sa place (pas de padding :
   le tableau porte le sien) et borne sa hauteur pour que le bandeau de trésorerie reste visible dessous. */
.crea-etats-tab {
    padding: 0;
    overflow: hidden;
    height: clamp(260px, 64vh, 680px);

    /*  Le tableau du cockpit ne porte pas ses couleurs : il les LIT dans des variables que son hôte pose (le pilotage
        les calcule depuis la palette). Sans elles, il retombe sur des défauts pensés pour un fond blanc — libellés
        illisibles sur fond sombre, colonne figée blanche. On les branche ici sur les jetons de l'application, qui
        suivent déjà le thème ET la palette choisie. */
    --ftt-ink: var(--tx2);
    --ftt-ink-2: var(--tx3);
    --ftt-ink-3: var(--tx3);
    --ftt-ink-4: var(--tx4);
    --ftt-ink-strong: var(--tx1);
    --ftt-ink-sub: var(--tx2);
    /*  🚨 OPAQUE, et surtout pas var(--crea-card) : ce jeton vaut rgba(7,29,40,.5). L'en-tête COLLANT du tableau prend
        cette couleur ; à moitié transparent, il laissait défiler le contenu AU TRAVERS — bandes et années illisibles dès
        qu'on faisait défiler la grille. Un en-tête qui tient en place doit être opaque, sans exception. */
    background: var(--surf-1);
    --ftt-surface: var(--surf-1);
    --ftt-frost: var(--surf-1);
    --ftt-frost-dense: var(--surf-1);
    --ftt-frost-edge: var(--o8);
    --ftt-line: var(--o12);
    --ftt-line-soft: var(--o8);
    --ftt-title-bg: var(--o6);
    --ftt-title-ink: var(--tx1);
    --ftt-major-bg: var(--o6);
    --ftt-sub-bg: var(--o4);
    --ftt-hl-bg: var(--o5);
    --ftt-hl-ink: var(--tx1);
    --ftt-hlbis-bg: var(--o4);
    --ftt-hover: var(--o5);
    --ftt-accent: var(--brand);
    --ftt-accent-half: color-mix(in srgb, var(--brand) 50%, transparent);
    --ftt-accent-soft: color-mix(in srgb, var(--brand) 18%, transparent);
    --ftt-annual-wash: transparent;
    --ftt-neg: #FD7358;
}

.crea-etats-tab .ftt-wrap { height: 100%; }

/*  LES TAUX DE MARGE RESSORTENT (2026-09-23) : %Mb, %EBE, %Rex, %Rn ne sont pas des postes de plus, ce sont
    la LECTURE de l'agrégat au-dessus. Ils se détachent par l'ENCRE — la teinte de marque — et rien d'autre.
    🚨 Pas de bande de fond : sur une ligne de tableau elle se lit comme une sélection, et elle SALIT le bord
    de la colonne gelée (dont le fond doit rester opaque : la teinte s'y pose en calque, donc deux nuances
    pour une même ligne). Essayé le 2026-09-23, rendu jugé sale, retiré le jour même.
    Un taux négatif reprend le corail des négatifs : une marge d'EBE à -0,4 % n'est pas une bonne nouvelle. */
.crea-etats-tab .ftt tbody tr.ft-ratio > td { color: var(--crea-accent); font-weight: 600; font-size: 11px; }
.crea-etats-tab .ftt tbody tr.ft-ratio > td.is-neg { color: var(--ftt-neg, var(--crea-bad)); }
@media (max-width: 900px) { .crea-etats-tab { height: clamp(220px, 42vh, 420px); } }

/* Téléphone (2026-09-22) : les sept étapes en toutes lettres prenaient QUATRE lignes, soit ~250 px des 844 d'un iPhone,
   avant même la première question — et le bandeau de trésorerie mange le bas. On garde les sept repères (on doit voir où
   l'on en est et ce qui reste), mais seule l'étape EN COURS garde son intitulé : les autres se réduisent à leur numéro. */
@media (max-width: 700px) {
    .crea-steps { gap: .25rem; }
    .crea-step { padding: .2rem .4rem; }
    .crea-step > span:not(.crea-step-n) { display: none; }
    .crea-step.is-on > span:not(.crea-step-n) { display: inline; }
}

@media (max-width: 900px) {
    .crea-body { grid-template-columns: minmax(0, 1fr); }
    .crea-head { flex-wrap: wrap; gap: .5rem; }
    .crea-cash { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
    .crea-spark { height: 52px; }
    .crea-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
}

/*  ═══════════════════════════════════════════════════════════════════════════════════════════════
    LA SAISIE — refonte du 2026-09-23.

    Trois règles tenues partout :
      · aucun champ nu — tout porte un intitulé, une unité, et une aide quand elle sert ;
      · aucun NUMÉRO de mois — on désigne un mois sur une frise qui porte son vrai nom (« mars 27 ») ;
      · la dataviz est un OUTIL DE SAISIE, pas une illustration : les barres de saisonnalité se
        règlent, les histogrammes vérifient ce qu'on vient de taper.
    ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Groupes de champs ───────────────────────────────────────────────────────────────────────── */
.crea-group {
    border: 1px solid var(--crea-line);
    border-radius: 12px;
    background: var(--crea-tint);
    padding: 12px 14px 14px;
    margin: 0;
    display: grid;
    gap: .85rem;
    min-width: 0;
}
.crea-group > legend {
    padding: 0 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--crea-dim);
}

.crea-in-num { font-variant-numeric: tabular-nums; }

/*  Le sélecteur segmenté de l'application (Shared/Segmented) est un `inline-flex` : posé dans une
    grille, il s'ÉTIRE sur toute la colonne et ses choix se tassent à gauche, ce qui donne une barre
    vide avec trois mots dedans. On le ramène à sa largeur utile, et on lui donne une cible tactile :
    ses 11 px conviennent à une barre d'outils de tableau, pas à un formulaire qu'on remplit au pouce. */
.crea-field > .iku-seg, .crea-fin > .iku-seg {
    justify-self: start;
    max-width: 100%;
    flex-wrap: wrap;
}
.crea-root .iku-seg-b { font-size: .78rem; padding: .38rem .7rem; min-height: 2rem; }
/*  … sauf la bascule € / K€ / M€ du tableau des états : elle vit dans la barre d'outils du composant
    du cockpit, qui lui impose une hauteur de 20 px. L'agrandir la ferait déborder de son en-tête. */
.crea-root .crea-etats-tab .iku-seg-b { font-size: 11px; padding: 0 8px; min-height: 0; }
@media (max-width: 700px) {
    .crea-root .iku-seg-b { min-height: 2.35rem; padding: .45rem .7rem; }
    .crea-root .crea-etats-tab .iku-seg-b { min-height: 0; padding: 0 8px; }
}
.crea-lbl-in { font-size: .74rem; font-weight: 600; color: var(--crea-dim); }
.crea-dim { color: var(--crea-dim); }

/* Repères chiffrés d'une étape : trois nombres qui résument ce qui vient d'être saisi. */
.crea-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 10px; }
.crea-kpi {
    border: 1px solid var(--crea-line);
    background: var(--crea-tint);
    border-radius: 12px;
    padding: 9px 12px;
    display: grid;
    gap: 2px;
    align-content: start;
    min-width: 0;
}
/*  Le PREMIER chiffre d'une étape est celui qu'on est venu voir : il porte la teinte de marque, comme le
    chiffre de tête des vues LBO / DCF. Aucun marqueur dans le balisage — c'est une règle de lecture, pas
    une décoration à poser à la main. */
.crea-kpis > .crea-kpi:first-child {
    border-color: color-mix(in srgb, var(--crea-accent) 34%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--crea-accent) 14%, transparent), color-mix(in srgb, var(--crea-accent) 3%, transparent));
}
.crea-kpi-l { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--crea-dim); font-weight: 700; }
.crea-kpi-s { font-size: 10.5px; color: var(--crea-dim); line-height: 1.3; }
.crea-kpi-v { font-size: 19px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; }
.crea-kpi-u { font-size: 12px; font-weight: 600; color: var(--crea-dim); margin-left: 3px; letter-spacing: 0; }

/* Carte d'export du dernier écran (2026-09-23) : c'est l'action de sortie du parcours, elle a donc le
   poids d'une carte et non celui d'un lien. L'accent teinte le fond, le bouton reste le bouton principal. */
.crea-export {
    margin-top: .9rem;
    padding: .95rem 1.05rem 1.05rem;
    border-radius: .8rem;
    border: 1px solid color-mix(in srgb, var(--crea-accent) 38%, transparent);
    background: linear-gradient(140deg, color-mix(in srgb, var(--crea-accent) 12%, transparent), transparent 62%), var(--crea-soft);
}
.crea-export-h { margin-bottom: 8px; }
.crea-export-e { display: block; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--crea-accent); margin-bottom: 3px; }
.crea-export-t { font: 700 15px/1.25 var(--font-family); margin: 0; letter-spacing: -.01em; }
.crea-export-s { font-size: 12px; color: var(--crea-sub); line-height: 1.55; margin: 0 0 8px; max-width: 70ch; }

/*  L'action et sa fiche technique sur la même ligne : le bouton dit ce qu'on obtient, la note dit sous
    quelle forme. Elles se séparent d'elles-mêmes quand la colonne se resserre. */
.crea-export-go { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.crea-export-b { min-width: 14rem; }
.crea-export-note { font-size: 10.5px; color: var(--crea-dim); }

/*  Les garanties : des pastilles, pas une liste à puces. Elles se lisent d'un coup d'œil et ne pèsent pas
    plus que le bouton — ce sont des réponses à une inquiétude, pas des arguments de vente. */
.crea-export-gar { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.crea-export-gar li {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px 4px 8px;
    border-radius: 99px;
    border: 1px solid color-mix(in srgb, var(--crea-ok) 32%, transparent);
    background: color-mix(in srgb, var(--crea-ok) 11%, transparent);
    font-size: 11px; font-weight: 600; color: var(--crea-sub); white-space: nowrap;
}
.crea-export-gar .iku-ico { color: var(--crea-ok); flex: 0 0 auto; }

/* ── ÉTAPE 7 · MA SYNTHÈSE (2026-09-23) ───────────────────────────────────────────────────────
   Un verdict d'abord, puis les signaux qui le composent. Trois états seulement (tient / à regarder /
   bloquant) : au-delà, on demande au lecteur d'arbitrer entre des nuances qu'il n'a pas les moyens de
   juger. La couleur ne porte JAMAIS l'information seule — chaque ligne écrit son verdict en toutes
   lettres dans sa phrase. */
.crea-verdict {
    display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 11px; align-items: start;
    padding: 12px 14px; border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--crea-ok) 34%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--crea-ok) 13%, transparent), color-mix(in srgb, var(--crea-ok) 3%, transparent));
}
.crea-verdict.is-warn { border-color: color-mix(in srgb, var(--crea-warn) 38%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--crea-warn) 14%, transparent), color-mix(in srgb, var(--crea-warn) 3%, transparent)); }
.crea-verdict.is-bad { border-color: color-mix(in srgb, var(--crea-bad) 38%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--crea-bad) 14%, transparent), color-mix(in srgb, var(--crea-bad) 3%, transparent)); }
.crea-verdict-p { width: 10px; height: 10px; border-radius: 999px; background: var(--crea-ok); margin-top: 4px; }
.crea-verdict.is-warn .crea-verdict-p { background: var(--crea-warn); }
.crea-verdict.is-bad .crea-verdict-p { background: var(--crea-bad); }
.crea-verdict-t { font: 700 14px/1.3 var(--font-family); }
.crea-verdict-s { font-size: 11.5px; color: var(--crea-sub); line-height: 1.5; margin-top: 2px; }

.crea-diag { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 1px;
    border: 1px solid var(--crea-line); border-radius: 12px; overflow: hidden; background: var(--crea-line); }
.crea-diag-l {
    display: grid; grid-template-columns: 8px minmax(7rem, auto) minmax(4.5rem, auto) minmax(0, 1fr);
    gap: 10px; align-items: baseline;
    padding: 9px 13px; background: var(--crea-tint);
}
.crea-diag-p { width: 8px; height: 8px; border-radius: 999px; background: var(--crea-ok); align-self: center; }
.crea-diag-l.is-warn .crea-diag-p { background: var(--crea-warn); }
.crea-diag-l.is-bad .crea-diag-p { background: var(--crea-bad); }
.crea-diag-t { font-size: 11.5px; font-weight: 700; }
.crea-diag-v { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crea-diag-l.is-bad .crea-diag-v { color: var(--crea-bad); }
.crea-diag-l.is-warn .crea-diag-v { color: var(--crea-warn); }
.crea-diag-s { font-size: 11px; color: var(--crea-sub); line-height: 1.45; }
@media (max-width: 760px) {
    .crea-diag-l { grid-template-columns: 8px minmax(0, 1fr) auto; }
    .crea-diag-s { grid-column: 2 / -1; }
}

/*  La lecture par l'IA : même carte que l'export, avec en plus la FICHE ENVOYÉE, lisible avant l'envoi.
    C'est elle qui rend la promesse d'anonymat vérifiable — sans elle, ce ne serait qu'une affirmation. */
.crea-ia { margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--crea-line); background: var(--crea-tint); }
.crea-ia-h { margin-bottom: 8px; }
.crea-ia-voir { font-weight: 600; }
.crea-ia-envoi {
    margin: 12px 0 0; padding: 10px 12px; max-height: 15rem; overflow: auto;
    border-radius: 9px; border: 1px dashed var(--crea-hair); background: var(--crea-input);
    font: 400 10.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--crea-sub); white-space: pre-wrap; word-break: break-word;
}
.crea-ia-rep {
    margin-top: 12px; padding: 11px 13px; border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--crea-accent) 26%, transparent);
    background: color-mix(in srgb, var(--crea-accent) 7%, transparent);
    font-size: 11.5px; line-height: 1.6; color: var(--crea-ink); white-space: pre-wrap;
}

/*  « Et ensuite ? » : la question que tout le monde se pose sur le dernier écran. Trois réponses, pas de bouton
    (les actions sont déjà à l'écran) — c'est une note de sortie, pas une quatrième proposition. */
.crea-suite { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--crea-line); border-radius: 12px; background: var(--crea-tint); }
.crea-suite-t { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--crea-dim); margin-bottom: 9px; }
/*  🚨 Puces par `::marker`, PAS une grille à deux colonnes : dans un `li` en display:grid, le <b> et le texte
    qui le suit forment DEUX éléments de grille — le texte retombait dans la colonne de 5 px de la puce et
    sortait à un mot par ligne. */
.crea-suite-l { margin: 0; padding-left: 1.05rem; list-style: disc; display: grid; gap: 6px; font-size: 11.5px; color: var(--crea-sub); line-height: 1.5; }
.crea-suite-l li::marker { color: var(--crea-accent); }
.crea-suite-l b { color: var(--crea-ink); font-weight: 650; }

/* États vides : ils PROPOSENT, ils n'attendent pas. */
.crea-vide-bloc {
    border: 1px dashed var(--crea-line);
    border-radius: .7rem;
    padding: .9rem 1rem;
    display: grid;
    gap: .7rem;
}
.crea-vide { font-size: .84rem; color: var(--crea-sub); line-height: 1.55; margin: 0; max-width: 60ch; }

/* Natures : le choix se fait sur une pastille, pas dans une liste déroulante de numéros de compte. */
.crea-nat-grid { display: flex; flex-wrap: wrap; gap: .4rem; }
.crea-nat {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--crea-line);
    background: var(--crea-card);
    color: var(--crea-sub);
    border-radius: 999px;
    padding: .32rem .7rem;
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
    white-space: nowrap;
}
.crea-nat:hover { color: var(--crea-ink); border-color: var(--color-border-hover); }
.crea-nat.is-on { color: var(--crea-ink); border-color: var(--crea-accent); background: var(--color-teal-bg); font-weight: 600; }
.crea-nat:focus-visible, .crea-pill:focus-visible, .crea-frise-m:focus-visible,
.crea-frise-an:focus-visible, .crea-quand:focus-visible, .crea-bar:focus-visible {
    outline: 2px solid var(--crea-accent);
    outline-offset: 2px;
}

/* ── Lignes répétables : une tête compacte, un corps qu'on déplie ─────────────────────────────── */
.crea-ligne, .crea-cat {
    border: 1px solid var(--crea-line);
    border-radius: .6rem;
    background: var(--crea-card);
    overflow: hidden;
}
.crea-ligne.is-open, .crea-cat.is-open { border-color: var(--color-teal-border); }

.crea-ligne-tete {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .5rem;
    flex-wrap: wrap;
}
.crea-ligne-ic {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.8rem; height: 1.8rem;
    border-radius: .45rem;
    border: none;
    background: var(--crea-soft);
    color: var(--crea-accent);
    cursor: pointer;
    padding: 0;
}
.crea-ligne-nom { flex: 1 1 8rem; min-width: 6rem; }
.crea-ligne-mt { flex: 0 0 7.5rem; }
.crea-ligne-mb { flex: 0 0 6.5rem; }
.crea-ligne-nb { flex: 0 0 4.5rem; }
.crea-ligne-mt > .crea-in, .crea-ligne-mb > .crea-in, .crea-ligne-nb > .crea-in { text-align: right; }

.crea-part {
    flex: 0 0 auto;
    font-size: .76rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--crea-dim);
    min-width: 2.6rem;
    text-align: right;
}
.crea-tag {
    flex: 0 0 auto;
    font-size: .72rem;
    color: var(--crea-dim);
    background: var(--crea-soft);
    border-radius: 999px;
    padding: .18rem .55rem;
    white-space: nowrap;
}

/* Le bouton « quand ? » PORTE la réponse : on lit « mars 27 » sans rien déplier. */
.crea-quand {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    border: 1px solid var(--crea-line);
    background: transparent;
    color: var(--crea-sub);
    border-radius: .45rem;
    padding: .3rem .6rem;
    font: inherit;
    font-size: .76rem;
    cursor: pointer;
    white-space: nowrap;
}
.crea-quand:hover { color: var(--crea-accent); border-color: var(--color-teal-border); }

.crea-ligne-corps {
    border-top: 1px solid var(--crea-line);
    background: var(--crea-soft);
    padding: .8rem .7rem .9rem;
    display: grid;
    gap: .85rem;
}
.crea-fin { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-top: .3rem; }

/* ── LA FRISE DES MOIS ───────────────────────────────────────────────────────────────────────── */
/*  Des onglets d'exercice, puis les douze mois avec leur vrai nom. Un mois se DÉSIGNE. */
.crea-frise { display: grid; gap: .4rem; }
.crea-frise-ans { display: flex; flex-wrap: wrap; gap: .3rem; }
.crea-frise-an {
    border: 1px solid transparent;
    background: transparent;
    color: var(--crea-dim);
    border-radius: 999px;
    padding: .2rem .55rem;
    font: inherit;
    font-size: .74rem;
    cursor: pointer;
    white-space: nowrap;
}
.crea-frise-an:hover { color: var(--crea-ink); }
.crea-frise-an.is-on { color: var(--crea-ink); background: var(--crea-soft); border-color: var(--crea-line); font-weight: 600; }
/* L'exercice qui PORTE le mois choisi reste repérable même quand on regarde un autre onglet. */
.crea-frise-an.is-porte::after {
    content: "";
    display: inline-block;
    width: .35rem; height: .35rem;
    border-radius: 999px;
    background: var(--crea-accent);
    margin-left: .35rem;
    vertical-align: middle;
}

.crea-frise-mois { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .2rem; }
.crea-frise-mois12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.crea-frise-m {
    border: 1px solid var(--crea-line);
    background: var(--crea-card);
    color: var(--crea-sub);
    border-radius: .4rem;
    padding: .34rem .1rem;
    font: inherit;
    font-size: .7rem;
    line-height: 1.1;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crea-frise-m:hover:not(:disabled) { border-color: var(--crea-accent); color: var(--crea-ink); }
.crea-frise-m.is-on { background: var(--crea-accent); border-color: var(--crea-accent); color: #fff; font-weight: 700; }
.crea-frise-m.is-off, .crea-frise-m:disabled { opacity: .35; cursor: default; }
.crea-frise-echo { margin: 0; font-size: .76rem; color: var(--crea-sub); }

/* ── L'ÉDITEUR DE SAISONNALITÉ ───────────────────────────────────────────────────────────────── */
/*  Douze barres que l'on règle au pointeur ou au clavier. La hauteur de `.crea-bar` est posée EN
    LIGNE par le composant : elle sert aussi de repère au calcul du poids (position du pointeur
    rapportée à la hauteur). Ne pas la redéfinir ici. */
.crea-saison { display: grid; gap: .5rem; }
.crea-saison-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.crea-saison-t { font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--crea-dim); }
.crea-saison-echo { font-size: .78rem; color: var(--crea-sub); font-variant-numeric: tabular-nums; }

.crea-bars {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: .25rem;
    align-items: end;
    touch-action: none;   /* sinon le glissé fait défiler la page au lieu de dessiner */
}
/*  Le repère du MOIS MOYEN. L'échelle va de 0 à deux fois un mois moyen : sans ce trait, une année
    régulière ressemble à douze barres arrêtées à mi-hauteur sans qu'on sache pourquoi. */
.crea-bars::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    border-top: 1px dashed var(--crea-line);
    pointer-events: none;
    z-index: 1;
}
.crea-bar {
    position: relative;
    display: flex;
    align-items: flex-end;
    border-radius: .35rem;
    background: var(--crea-input);
    border: 1px solid var(--crea-line);
    cursor: ns-resize;
    overflow: hidden;
    min-width: 0;
}
.crea-bar:hover { border-color: var(--color-teal-border); }
.crea-bar.is-avant { opacity: .35; }
.crea-bar-fill {
    display: block;
    width: 100%;
    background: linear-gradient(180deg, var(--crea-accent), color-mix(in srgb, var(--crea-accent) 45%, transparent));
    border-radius: .3rem .3rem 0 0;
    pointer-events: none;
    min-height: 2px;
}
.crea-bar-lab {
    position: absolute;
    left: 0; right: 0; bottom: .15rem;
    text-align: center;
    font-size: .6rem;
    color: var(--crea-ink);
    pointer-events: none;
    text-shadow: 0 1px 2px var(--crea-card);
    overflow: hidden;
    white-space: nowrap;
}

.crea-saison-motifs { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.crea-pill {
    border: 1px solid var(--crea-line);
    background: transparent;
    color: var(--crea-sub);
    border-radius: 999px;
    padding: .24rem .6rem;
    font: inherit;
    font-size: .74rem;
    cursor: pointer;
    white-space: nowrap;
}
.crea-pill:hover { color: var(--crea-ink); border-color: var(--color-border-hover); }
.crea-pill.is-on { color: var(--crea-ink); border-color: var(--crea-accent); background: var(--color-teal-bg); font-weight: 600; }
.crea-pill.is-mute { cursor: default; }

/* ── Aperçus ─────────────────────────────────────────────────────────────────────────────────── */
.crea-mini { width: 3.6rem; height: 1.3rem; flex: 0 0 auto; display: block; }
.crea-mini-line { fill: none; stroke: var(--crea-accent); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.crea-spark-hi { height: 96px; }

/* Barre empilée : d'où vient l'argent du premier jour. */
.crea-stack { display: flex; height: .8rem; border-radius: 999px; overflow: hidden; background: var(--crea-soft); }
.crea-stack-p { display: block; height: 100%; }
.crea-stack-p.is-cap { background: var(--crea-s0); }
.crea-stack-p.is-cc { background: var(--crea-s2); }
.crea-stack-p.is-emp { background: var(--crea-s1); }

.crea-legend { display: flex; flex-wrap: wrap; gap: .25rem .9rem; margin: .5rem 0 0; padding: 0; list-style: none; font-size: .76rem; color: var(--crea-sub); }
.crea-legend li { display: inline-flex; align-items: center; gap: .35rem; }
.crea-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 999px; background: var(--crea-dim); }
.crea-dot.is-cap { background: var(--crea-s0); }
.crea-dot.is-cc { background: var(--crea-s2); }
.crea-dot.is-emp { background: var(--crea-s1); }

/* Séries : les mêmes cinq teintes pour un rectangle de SVG (fill) et pour une pastille de légende. */
.crea-cat-0 { fill: var(--crea-s0); background: var(--crea-s0); }
.crea-cat-1 { fill: var(--crea-s1); background: var(--crea-s1); }
.crea-cat-2 { fill: var(--crea-s2); background: var(--crea-s2); }
.crea-cat-3 { fill: var(--crea-s3); background: var(--crea-s3); }
.crea-cat-4 { fill: var(--crea-s4); background: var(--crea-s4); }
rect.crea-cat-0, rect.crea-cat-1, rect.crea-cat-2, rect.crea-cat-3, rect.crea-cat-4 { background: none; }

/* Modèles d'activité : l'icône donne à la grille un point d'accroche. */
.crea-model { grid-template-columns: auto 1fr; grid-template-areas: "ic t" "ic p"; column-gap: .55rem; }
.crea-model-ic {
    grid-area: ic;
    align-self: start;
    display: inline-grid;
    place-items: center;
    width: 1.9rem; height: 1.9rem;
    border-radius: .5rem;
    background: var(--crea-soft);
    color: var(--crea-accent);
}
.crea-model-t { grid-area: t; }
.crea-model-p { grid-area: p; }
.crea-model.is-on .crea-model-ic { background: var(--color-teal-bg-strong); }

/* ── Téléphone ───────────────────────────────────────────────────────────────────────────────── */
/*  390 px : la tête d'une ligne passe sur deux rangs plutôt que de comprimer ses champs à
    l'illisible, et la frise garde ses douze mois sur deux rangées de six — une frise qui défile
    horizontalement se manipule mal au pouce. */
@media (max-width: 700px) {
    .crea-frise-mois { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .crea-frise-m { font-size: .72rem; padding: .42rem .1rem; }
    /*  Le nom garde toute la largeur utile mais reste sur la ligne de l'icône : à 60 %, il ne peut pas
        cohabiter avec le montant, donc il pousse celui-ci au rang suivant sans se retrouver seul. */
    .crea-ligne-nom { flex: 1 1 60%; }
    .crea-ligne-mt, .crea-ligne-mb { flex: 1 1 6rem; }

    /*  Les trois repères de l'étape prenaient 280 px des 844 d'un iPhone AVANT la première question.
        Empilés en lignes, étiquette à gauche et nombre à droite, ils en prennent cent. */
    .crea-kpis {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        border: 1px solid var(--crea-line);
        border-radius: .6rem;
        background: var(--crea-soft);
        overflow: hidden;
    }
    .crea-kpi {
        border: 0;
        border-radius: 0;
        background: transparent;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: .6rem;
        padding: .4rem .65rem;
    }
    .crea-kpi + .crea-kpi { border-top: 1px solid var(--crea-line); }
    .crea-kpi-l { font-size: .68rem; }
    .crea-mini { display: none; }
    .crea-bars { gap: .15rem; }
    .crea-bar-lab { font-size: .52rem; }
    .crea-kpi-v { font-size: .95rem; }
    .crea-spark-hi { height: 84px; }
    .crea-group { padding: .8rem .7rem .85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .crea-bar-fill { transition: none; }
}