/* =====================================================================
   Onboarding VideoFunnel V2 — recueil du besoin
   ---------------------------------------------------------------------
   Peau héritée de la V1 (sol clair, cartes blanches, violet franc, gros
   titres Manrope). Un tunnel en colonne unique — les ÉTAPES occupent le
   centre de l'en-tête, parce que c'est l'information la plus importante.

   Parti pris V2 : des éléments GROS. Une étape = une grande zone de texte
   qui respire, des repères numérotés à côté, un dépôt de fichiers généreux.
   ===================================================================== */

:root {
    --font: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --display: Manrope, "DM Sans", Inter, sans-serif;

    --ink: #252336;
    --ink-2: #47445a;
    --muted: #6f6d7d;
    --faint: #8b8898;

    --paper: #ffffff;
    --ground: #f7f6f3;
    --ground-2: #efedf2;
    --line: #e5e2e8;
    --line-strong: #d6d1dc;

    --purple: #6657e8;
    --purple-dark: #5142cc;
    --purple-soft: #f0edff;
    --purple-line: #d7d0fb;
    --green: #239b6b;
    --green-soft: #eaf7f1;
    --green-ink: #3f705e;
    --amber: #c88325;
    --amber-soft: #fff5e5;
    --red: #d2483a;
    --red-soft: #fdecea;
    --red-ink: #8c2f24;

    --shadow: 0 18px 50px rgba(38, 34, 57, .09);
    --shadow-soft: 0 5px 18px rgba(38, 34, 57, .06);
    --ring-focus: 0 0 0 4px rgba(102, 87, 232, .12);

    --flame: linear-gradient(100deg, #6657E8 0%, #A34FE0 38%, #EE5D68 74%, #F5A73B 100%);
    --progress: linear-gradient(90deg, var(--purple), #a067e4, #e06a5a);
    --cta: linear-gradient(135deg, #6b5be9, #5948d5);
    --cta-final: linear-gradient(135deg, var(--purple), #c65550);

    --radius: 18px;
    --radius-lg: 26px;
    --ease: cubic-bezier(.22, 1, .36, 1);

    --header-h: 84px;
    --navbar-h: 86px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--ground);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 8px; }

svg {
    width: 20px; height: 20px; flex: none;
    fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

.hidden { display: none !important; }

/* ---------- Voix typographiques partagées ---------- */
.eyebrow {
    display: block;
    color: var(--purple);
    font-size: 13.5px; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
}
.small { font-size: 13px; color: var(--muted); line-height: 1.5; }

.tag {
    display: inline-flex; align-items: center;
    padding: 4px 11px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700;
    color: var(--muted); background: var(--ground-2);
}
.tag svg { width: 13px; height: 13px; }
.tag.indigo { color: var(--purple-dark); background: var(--purple-soft); }
.tag.amber  { color: var(--amber); background: var(--amber-soft); }
.tag.green  { color: var(--green-ink); background: var(--green-soft); }

/* =====================================================================
   Coquille : en-tête / zone de travail / barre de navigation
   ===================================================================== */
.shell {
    display: grid;
    width: 100%; min-width: 0; height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--header-h) minmax(0, 1fr) auto;
}

.top {
    position: relative; z-index: 20;
    display: grid;
    /* La marque et les actions prennent leur largeur naturelle, les étapes
       gardent tout le reste : leurs libellés ne sont jamais tronqués. */
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; justify-content: space-between;
    gap: 18px; padding: 0 26px;
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(16px);
}

.brand { display: inline-flex; width: fit-content; align-items: center; gap: 10px; text-decoration: none; }
.brand img { display: block; width: 128px; height: auto; }
.brand-pill {
    padding: 4px 9px; border-radius: 999px;
    color: var(--purple-dark); background: var(--purple-soft);
    font-size: 13px; font-weight: 700; white-space: nowrap;
}


/* Les étapes : au centre, grandes, toujours lisibles. */
.journey-nav { width: 100%; min-width: 0; }
.steps { display: flex; align-items: stretch; justify-content: center; gap: 4px; }
.step-seg {
    /* Largeur dictée par le libellé : on l'affiche en entier ou pas du tout
       (sous 1500px, seule l'étape en cours garde le sien). */
    flex: 0 1 auto;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 9px; border-radius: 13px;
    font-size: 14.5px; font-weight: 600; color: var(--muted);
    text-decoration: none; white-space: nowrap;
    border: 1.5px solid transparent;
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.step-seg:hover { background: var(--ground); color: var(--ink); }
.step-seg .n {
    display: grid; place-items: center; flex: none;
    width: 25px; height: 25px; border-radius: 50%;
    font-family: var(--display); font-size: 12.5px; font-weight: 800;
    color: var(--muted); background: var(--ground-2);
    transition: all .2s;
}
.step-seg .n svg { width: 13px; height: 13px; }
.step-seg.now {
    color: var(--purple-dark); background: #fff;
    border-color: var(--purple-line);
    box-shadow: var(--shadow-soft);
    font-weight: 700;
}
.step-seg.now .n { color: #fff; background: var(--purple); }
/* Une étape faite ET en cours reste violette : on montre d'abord où l'on est. */
.step-seg.done:not(.now) .n { color: #fff; background: var(--green); }
.step-seg.recap { flex: 0 0 auto; }

.top-right { display: flex; align-items: center; gap: 8px; justify-self: end; }

.saved {
    display: inline-flex; min-height: 42px; align-items: center; gap: 8px;
    padding: 0 13px; border-radius: 12px;
    color: var(--green-ink); background: var(--green-soft);
    border: 1px solid #d7ece3;
    font-size: 13.5px; font-weight: 600;
    transition: color .2s, background .2s;
}
.saved svg { width: 16px; height: 16px; }
.saved.busy { color: var(--amber); background: var(--amber-soft); border-color: #f3e3c4; }
.saved.busy svg { animation: spin .9s linear infinite; }
.saved.err { color: var(--red-ink); background: var(--red-soft); border-color: #f3cfc9; }
@keyframes spin { to { transform: rotate(360deg); } }

.pause-btn {
    display: inline-flex; min-height: 42px; align-items: center; gap: 8px;
    padding: 0 13px; border-radius: 12px;
    color: var(--muted); font-size: 13.5px; font-weight: 600;
    transition: all .18s;
}
.pause-btn svg { width: 16px; height: 16px; }
.pause-btn:hover { color: var(--ink); background: var(--ground); }

/* ---------- L'en-tête se replie par le décor, jamais par les étapes ----------
   Les libellés d'étapes sont la boussole du parcours : ils passent avant la
   pastille de marque et avant les libellés des boutons de droite. Les seuils
   sont mesurés sur le libellé le plus long (« Vos recommandations »). */
@media (max-width: 1600px) { .brand-pill { display: none; } }
@media (max-width: 1470px) { .pause-btn span { display: none; } }
@media (max-width: 1330px) { .saved span { display: none; } .saved { padding: 0 10px; } }

@media (max-width: 1250px) {
    /* Vraiment plus la place : seule l'étape en cours garde son libellé.
       Mieux vaut aucun libellé qu'un libellé coupé. */
    .step-seg span:not(.n) { display: none; }
    .step-seg.now span:not(.n) { display: inline; }
    .step-seg.now { flex: 0 0 auto; }
}

@media (max-width: 1080px) {
    .top { gap: 14px; padding: 0 16px; }
    .brand img { width: 100px; }
}

/* ---------- La barre de navigation basse ---------- */
.navbar {
    position: relative; z-index: 20;
    display: grid; width: 100%; min-width: 0;
    grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 20px;
    height: var(--navbar-h); padding: 0 30px;
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(16px);
}
.nav-back {
    display: inline-flex; width: fit-content; min-height: 50px;
    align-items: center; gap: 9px; padding: 0 18px;
    border-radius: 14px; font-size: 15px; font-weight: 700;
    color: var(--muted); text-decoration: none;
}
.nav-back:hover { color: var(--ink); background: var(--ground); }
.nav-back.off { visibility: hidden; }
.nav-hint { color: var(--faint); font-size: 14px; text-align: center; }
.nav-continue {
    display: inline-flex; min-height: 56px; min-width: 220px;
    align-items: center; justify-content: center; gap: 10px;
    justify-self: end; padding: 0 28px;
    border-radius: 16px; font-size: 16.5px; font-weight: 700;
    color: #fff; background: var(--cta); text-decoration: none;
    box-shadow: 0 12px 28px rgba(88, 68, 207, .32);
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.nav-continue:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(88, 68, 207, .4); }
.nav-continue:disabled { opacity: .6; transform: none; cursor: wait; }
.nav-continue.final { background: var(--cta-final); box-shadow: 0 12px 28px rgba(170, 70, 100, .32); }

@media (max-width: 720px) {
    .navbar { padding: 0 14px; gap: 10px; grid-template-columns: auto 1fr; }
    .nav-hint { display: none; }
    .nav-continue { width: 100%; min-width: 0; }
}

/* =====================================================================
   Boutons et champs
   ===================================================================== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 18px; border-radius: 13px;
    font-size: 14.5px; font-weight: 700; white-space: nowrap;
    text-decoration: none;
    transition: background .18s, color .18s, border-color .18s,
                transform .18s var(--ease), box-shadow .18s;
}
.btn svg { width: 17px; height: 17px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { color: var(--muted); }
.btn.ghost:hover:not(:disabled) { background: var(--ground); color: var(--ink); }
.btn.soft { color: var(--ink-2); background: #fff; border: 1.5px solid var(--line-strong); }
.btn.soft:hover:not(:disabled) { border-color: var(--purple-line); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.btn.primary { color: #fff; background: var(--cta); box-shadow: 0 8px 20px rgba(88, 68, 207, .2); }
.btn.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(88, 68, 207, .28); }
.btn.flame { color: #fff; background: var(--cta-final); box-shadow: 0 8px 22px rgba(160, 60, 90, .22); }
.btn.flame:hover:not(:disabled) { transform: translateY(-1px); }
.btn.lg { min-height: 54px; padding: 0 26px; font-size: 16px; border-radius: 15px; }
.btn.sm { min-height: 38px; padding: 0 13px; font-size: 13px; border-radius: 10px; }
.btn.block { width: 100%; }

.input {
    width: 100%; padding: 15px 18px; border-radius: 14px;
    background: #fff; border: 1.5px solid var(--line-strong); outline: none;
    font-size: 16px; transition: border-color .2s, box-shadow .2s;
    box-shadow: var(--shadow-soft);
}
.input:focus { border-color: var(--purple); box-shadow: var(--ring-focus); }
.field-label {
    display: block; margin-bottom: 7px;
    font-size: 14.5px; font-weight: 700; color: var(--ink-2);
}
.field-label small { float: right; font-weight: 500; color: var(--faint); }

/* ---------- L'orbe — la signature de la marque ---------- */
.orb {
    position: relative; display: inline-block; flex: none;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--flame);
    box-shadow: 0 6px 16px rgba(102, 87, 232, .3), inset 0 1px 2px rgba(255, 255, 255, .5);
}
.orb::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(42% 42% at 32% 28%, rgba(255, 255, 255, .78), transparent 62%);
}
.orb.lg { width: 60px; height: 60px; }
.orb.breathe { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe {
    0%, 100% { transform: scale(1); box-shadow: 0 6px 16px rgba(102, 87, 232, .3); }
    50% { transform: scale(1.06); box-shadow: 0 9px 22px rgba(102, 87, 232, .42); }
}

/* =====================================================================
   Écran d'accueil
   ===================================================================== */
.welcome {
    min-height: 100%; overflow-y: auto;
    display: flex; align-items: flex-start; justify-content: center;
    padding: clamp(40px, 7vh, 80px) 24px 60px;
}
.welcome-inner { width: 100%; max-width: 580px; text-align: center; }
.welcome-logo { display: block; width: 150px; margin: 0 auto 26px; }
.welcome .orb { margin: 0 auto 22px; }
.welcome h1 {
    font-family: var(--display); font-weight: 800;
    font-size: clamp(32px, 4.4vw, 46px);
    line-height: 1.08; letter-spacing: -.045em;
    margin-bottom: 14px;
}
.welcome-lead { font-size: 17.5px; color: var(--muted); margin-bottom: 22px; }
.welcome-lead strong { color: var(--ink-2); }
.welcome-points {
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
    margin-bottom: 30px;
}
.welcome-points span {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 999px;
    font-size: 13.5px; font-weight: 600; color: var(--ink-2);
    background: #fff; border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
}
.welcome-points svg { width: 15px; height: 15px; color: var(--purple-dark); }
.welcome form { display: grid; gap: 15px; text-align: left; }
.welcome .btn { margin-top: 8px; }
.welcome-foot { margin-top: 18px; font-size: 13.5px; color: var(--muted); }
.welcome-err {
    padding: 13px 16px; margin-bottom: 18px; border-radius: 13px;
    background: var(--amber-soft); color: var(--amber); font-size: 14px; text-align: left;
}
/* Le pot de miel : invisible pour un humain, atteignable par un robot. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =====================================================================
   Le flux d'écrans
   ===================================================================== */
.flow {
    width: 100%; min-width: 0; min-height: 0;
    overflow-x: hidden; overflow-y: auto;
    padding: clamp(30px, 5vh, 54px) 24px 60px;
    scrollbar-width: thin; scrollbar-color: #ccc8d2 transparent;
}
.pane {
    width: 100%; max-width: 880px; margin: 0 auto;
    animation: screen-in .34s var(--ease) both;
}
.pane.wide { max-width: 1160px; }
@keyframes screen-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
.pane > * { animation: rise .4s var(--ease) both; }
.pane > :nth-child(2) { animation-delay: .06s; }
.pane > :nth-child(3) { animation-delay: .12s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.pane-head { margin-bottom: 28px; }
.pane-head .eyebrow { margin-bottom: 10px; }
.pane-title {
    max-width: 820px;
    font-family: var(--display); font-weight: 800;
    font-size: clamp(30px, 3.8vw, 42px);
    letter-spacing: -.045em; line-height: 1.08;
}
.pane-lead {
    max-width: 700px; margin-top: 12px;
    color: var(--muted); font-size: 17px; line-height: 1.55;
}
.mantra {
    display: inline-flex; align-items: center; gap: 9px;
    margin-top: 16px;
    padding: 9px 15px; border-radius: 999px;
    background: var(--amber-soft);
    font-size: 14px; color: var(--amber);
}
.mantra svg { width: 15px; height: 15px; flex: none; }
.mantra strong { font-weight: 700; }

/* =====================================================================
   Étape 0 — le formulaire entreprise
   ===================================================================== */
.fields { display: grid; gap: 16px; }
.field {
    padding: 20px 22px 18px; border-radius: var(--radius);
    background: #fff; border: 2px solid transparent;
    box-shadow: var(--shadow-soft);
    transition: border-color .2s, box-shadow .2s;
}
.field:focus-within { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(102, 87, 232, .09); }
.field.featured { border-color: var(--purple-line); }
.field.featured:focus-within { border-color: var(--purple); }
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 3px; }
.field-head label {
    display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 17px; font-weight: 700; letter-spacing: -.01em; cursor: text;
}
.field-hint { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.field-area {
    display: block; width: 100%; min-height: 74px; resize: none;
    padding: 12px 14px; border-radius: 12px;
    border: 1.5px solid var(--line); outline: none; background: var(--ground);
    font-size: 15.5px; line-height: 1.6;
    transition: border-color .2s, background .2s, box-shadow .5s;
}
.field-area::placeholder { color: var(--faint); }
.field-area:focus { border-color: var(--purple); background: #fff; }
.field-area.is-filled {
    border-color: var(--green); background: #f2fbf7;
    box-shadow: 0 0 0 3px rgba(35, 155, 107, .12);
}

/* =====================================================================
   Étapes 1-4 — le plan de travail desktop en 3 colonnes
   ---------------------------------------------------------------------
   Les repères à gauche, la PAGE D'ÉCRITURE au centre — traitée comme un
   document : une grande feuille blanche qui grandit avec le texte, la
   page scrolle naturellement pour tout relire. Les documents à droite.
   Les colonnes latérales restent collées à l'écran pendant qu'on écrit.
   ===================================================================== */
.pane.work { max-width: 1760px; }
.pane.work .pane-head { margin-bottom: 22px; }
/* Annule le padding bas du .flow : la feuille est le DERNIER contenu de la
   page, son bord inférieur coïncide donc toujours avec la barre du bas —
   on ne voit jamais de « bas de page ». */
.pane.work { margin-bottom: -60px; }

.workspace {
    display: grid; gap: 26px;
    grid-template-columns: minmax(250px, 330px) minmax(0, 1fr) minmax(270px, 350px);
    align-items: start;
}

/* Les colonnes latérales suivent le lecteur. Le `top` exact est posé par
   fitAsides() dans app.js ; ces valeurs ne sont que le filet sans JS :
   une carte trop haute y scrolle en interne au lieu d'être coupée. */
.keys-col, .docs-col {
    position: sticky; top: 0; min-width: 0;
    max-height: calc(100vh - var(--header-h) - var(--navbar-h) - 20px);
    overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: #ccc8d2 transparent;
    padding-bottom: 4px;
}
/* Dès que fitAsides() prend la main, plus d'écrêtage ni de barre imbriquée :
   une carte trop haute défile AVEC la page (top négatif) et se fige quand son
   bas est visible. La marge basse garde la même respiration en toute fin de
   page, où une carte collée ne peut plus descendre sous le bas de la grille. */
.keys-col.is-free, .docs-col.is-free {
    max-height: none; overflow: visible;
    margin-bottom: 18px;
}

/* La colonne d'écriture s'étire sur toute la hauteur de la rangée : la
   feuille est TOUJOURS la colonne la plus haute, jamais un fond qui dépasse. */
.write-col { min-width: 0; align-self: stretch; display: flex; flex-direction: column; }

/* ---------- La feuille ---------- */
/* Le bas de la feuille coïncide avec la barre du bas : coins inférieurs
   droits, comme une page qui continue sous la barre. */
/* `flex: 1 0 auto` et non `flex: 1` : avec une base 0, la feuille serait
   dimensionnée par la rangée de la grille et la hauteur posée par l'autogrow
   sur le textarea n'aurait AUCUN effet (texte coupé, rien ne défile).
   Base auto = la feuille prend la hauteur de son texte, et s'étire seulement
   si la rangée est plus haute. */
.write-card {
    flex: 1 0 auto; display: flex; flex-direction: column;
    border-radius: 20px 20px 0 0;
    background: #fff; border: 2px solid transparent; border-bottom: 0;
    box-shadow: 0 2px 5px rgba(38, 34, 57, .05), 0 22px 60px rgba(38, 34, 57, .08);
    transition: border-color .2s, box-shadow .2s;
    overflow: hidden;
}
.write-card:focus-within {
    border-color: var(--purple);
    box-shadow: 0 0 0 5px rgba(102, 87, 232, .08), 0 22px 60px rgba(38, 34, 57, .08);
}
.bigtext {
    display: block; width: 100%; flex: 1 0 auto; resize: none;
    /* Ne scrolle JAMAIS en interne : l'autogrow allonge la feuille, la page
       défile. D'où la base `auto` : c'est la hauteur posée par autogrow() qui
       dimensionne la zone. La hauteur minimale exacte (bord bas = barre du
       bas) est mesurée par fitSheet() dans app.js ; 560px n'est qu'un filet.
       La grande marge basse interne = la fin de page d'un traitement de
       texte : on n'écrit jamais collé au bord. */
    overflow: hidden;
    min-height: 560px;
    padding: clamp(28px, 4vw, 56px) clamp(26px, 4.5vw, 64px) clamp(140px, 20vh, 240px);
    border: 0; outline: none; background: none;
    font-size: 17px; line-height: 1.7;
}
.bigtext::placeholder { color: var(--faint); }

/* Le compteur de mots vit dans la barre de navigation basse (nav-hint) :
   toujours visible, jamais posé sur la feuille. */
.nav-hint strong { color: var(--purple-dark); font-weight: 600; }

/* ---------- Les repères (colonne gauche) ---------- */
.keys-card {
    padding: 24px 24px 20px; border-radius: var(--radius-lg);
    background: #fff; border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
}
.keys-card .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.keys-bulb { width: 16px; height: 16px; }
.keys-lead { margin: 10px 0 18px; font-size: 14px; color: var(--muted); line-height: 1.55; }
.keys { display: grid; gap: 15px; }
.key { display: flex; gap: 14px; align-items: flex-start; }
.key-n {
    display: grid; place-items: center; flex: none;
    width: 32px; height: 32px; border-radius: 11px; margin-top: 1px;
    font-family: var(--display); font-size: 14.5px; font-weight: 800;
    color: var(--purple-dark); background: var(--purple-soft);
}
.key-txt { min-width: 0; }
.key-txt strong { display: block; font-size: 15px; letter-spacing: -.01em; margin-bottom: 2px; }
.key-txt span { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.keys-foot {
    display: flex; gap: 9px; align-items: flex-start;
    margin-top: 20px; padding: 12px 14px; border-radius: 12px;
    background: var(--amber-soft); font-size: 13px; line-height: 1.5; color: #7a5119;
}
.keys-foot svg { width: 15px; height: 15px; color: var(--amber); flex: none; margin-top: 1px; }

/* ---------- Le pliage (repères + conseils) ----------
   Une rangée de grille qui passe de 1fr à 0fr : la hauteur s'anime sans
   qu'on ait à la mesurer, quel que soit le contenu. */
.keys-fold, .advice-fold {
    display: grid; grid-template-rows: 1fr;
    transition: grid-template-rows .3s var(--ease);
}
.is-folded > .keys-fold, .is-folded > .advice-fold { grid-template-rows: 0fr; }
.fold-inner { min-height: 0; overflow: hidden; }

.fold-chevron {
    display: none; place-items: center; flex: none;
    width: 26px; height: 26px; border-radius: 9px;
    color: var(--faint); transition: transform .3s var(--ease), background .18s, color .18s;
}
.fold-chevron svg { width: 16px; height: 16px; }
.is-folded .fold-chevron { transform: rotate(-90deg); }

.keys-head {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px;
    text-align: left; cursor: default;
}
.keys-card.is-foldable .keys-head { cursor: pointer; }
.keys-card.is-foldable .fold-chevron { display: grid; }
.keys-card.is-foldable .keys-head:hover .fold-chevron { color: var(--ink); background: var(--ground); }
/* Replié, la carte n'est plus qu'une ligne : on resserre le bas. */
.keys-card.is-folded { padding-bottom: 14px; }

/* =====================================================================
   Les conseils de la relecture (colonne gauche, au-dessus des repères)
   ---------------------------------------------------------------------
   Ce que le LLM a demandé reste à l'écran pendant que le client complète
   son texte : il coche au fur et à mesure, et peut tout replier d'un clic
   si la liste prend trop de place.
   ===================================================================== */
.advice { margin-bottom: 16px; }

.advice-card {
    border-radius: var(--radius-lg);
    background: #fff; border: 1.5px solid #eed7a8;
    box-shadow: 0 6px 20px rgba(150, 110, 30, .10);
    transition: border-color .3s, box-shadow .3s;
}
.advice-card.all-done { border-color: #cbe6da; box-shadow: 0 6px 20px rgba(35, 155, 107, .1); }
/* L'appel du regard quand on revient de la relecture. */
.advice.is-flash .advice-card { animation: advice-flash 1.5s var(--ease) 1; }
@keyframes advice-flash {
    0%   { box-shadow: 0 0 0 0 rgba(200, 131, 37, .38); }
    18%  { box-shadow: 0 0 0 8px rgba(200, 131, 37, .16); }
    100% { box-shadow: 0 0 0 22px rgba(200, 131, 37, 0); }
}

.advice-head {
    display: flex; width: 100%; align-items: center; gap: 12px;
    padding: 15px 16px 15px 17px; text-align: left; border-radius: var(--radius-lg);
}
.advice-ico {
    display: grid; place-items: center; flex: none;
    width: 36px; height: 36px; border-radius: 12px;
    color: var(--amber); background: var(--amber-soft);
    transition: color .3s, background .3s;
}
.advice-ico svg { width: 19px; height: 19px; }
.advice-card.all-done .advice-ico { color: var(--green); background: var(--green-soft); }
.advice-head-copy { flex: 1; min-width: 0; }
.advice-head-copy strong {
    display: block;
    font-family: var(--display); font-size: 16px; font-weight: 800; letter-spacing: -.02em;
}
.advice-count { display: block; margin-top: 1px; font-size: 12.5px; color: var(--muted); }
.advice-card.all-done .advice-count { color: var(--green-ink); font-weight: 600; }
.advice-head .fold-chevron { display: grid; }
.advice-head:hover .fold-chevron { color: var(--ink); background: var(--ground); }

.advice-body { padding: 0 16px 16px; }
.advice-summary {
    margin: 0 0 12px; padding-left: 12px;
    border-left: 2px solid var(--purple-line);
    font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
}
/* Filet de sécurité : une liste très longue défile au lieu de pousser
   les repères hors de l'écran. */
.advice-items {
    display: grid; gap: 9px; margin: 0; padding: 0; list-style: none;
    max-height: min(46vh, 520px); overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: #ddd2c0 transparent;
}
.advice-item {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 12px 13px; border-radius: 14px;
    background: var(--amber-soft); border: 1px solid #f3e3c4;
    transition: background .25s, border-color .25s, opacity .25s;
}
.advice-tick {
    display: grid; place-items: center; flex: none;
    width: 22px; height: 22px; margin-top: 1px; border-radius: 7px;
    color: transparent; background: #fff; border: 1.5px solid #e0cba2;
    transition: all .18s;
}
.advice-tick svg { width: 14px; height: 14px; stroke-width: 2.6; }
.advice-tick:hover { border-color: var(--green); color: #bcd9cb; }
.advice-txt { min-width: 0; }
.advice-txt strong {
    display: block; margin-bottom: 3px;
    font-size: 14.5px; letter-spacing: -.01em; color: #7a5119;
}
.advice-txt p { font-size: 13px; line-height: 1.5; color: #7a5119; }
.advice-ex { margin-top: 5px; font-style: italic; color: #9a7434; }

.advice-item.is-done {
    background: var(--green-soft); border-color: #d7ece3;
}
.advice-item.is-done .advice-tick { color: #fff; background: var(--green); border-color: var(--green); }
.advice-item.is-done .advice-txt { opacity: .62; }
.advice-item.is-done .advice-txt strong { text-decoration: line-through; color: var(--green-ink); }
.advice-item.is-done .advice-txt p { color: var(--green-ink); }

.advice-foot {
    display: flex; gap: 9px; align-items: flex-start;
    margin-top: 12px; padding: 11px 13px; border-radius: 12px;
    background: var(--ground); font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.advice-foot svg { width: 15px; height: 15px; color: var(--purple-dark); flex: none; margin-top: 1px; }
.advice-foot strong { color: var(--ink-2); }

/* =====================================================================
   Les documents (colonne droite)
   ===================================================================== */
.docs-card {
    padding: 22px 22px 20px; border-radius: var(--radius-lg);
    background: #fff; border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
}
.block-title {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: -.02em;
    margin-bottom: 5px;
}
.block-title svg { width: 18px; height: 18px; color: var(--purple-dark); }
.block-lead { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; line-height: 1.5; }

.doc-ideas-title {
    margin: 18px 0 8px;
    font-size: 12px; font-weight: 800;
    letter-spacing: .05em; text-transform: uppercase; color: var(--faint);
}
.doc-ideas { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.doc-ideas li {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 13px; color: var(--ink-2); line-height: 1.45;
}
.doc-ideas svg { width: 14px; height: 14px; color: var(--green); flex: none; margin-top: 2px; }

.dropzone {
    display: grid; justify-items: center; align-content: center; gap: 6px;
    min-height: 150px; padding: 24px 18px; border-radius: var(--radius);
    background: var(--ground); border: 2px dashed var(--line-strong);
    cursor: pointer; text-align: center;
    transition: all .2s;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--purple); background: #faf9ff; }
.dropzone.is-over { border-color: var(--purple); background: var(--purple-soft); transform: scale(1.004); }
.dropzone-ico {
    display: grid; place-items: center;
    width: 46px; height: 46px; border-radius: 15px;
    color: var(--purple-dark); background: var(--purple-soft);
    margin-bottom: 2px;
}
.dropzone strong { font-size: 14.5px; }
.dropzone .small { max-width: 320px; font-size: 12.5px; }

.doclist { display: grid; gap: 8px; margin-top: 12px; }
.doc {
    display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center;
    padding: 11px 12px; border-radius: 14px;
    background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-soft);
    transition: background .5s, border-color .3s;
    animation: rise .3s var(--ease) both;
}
.doc.is-new { background: #f2fbf7; border-color: var(--green); }
.doc.ghost { opacity: .7; }
.doc-ico {
    display: grid; place-items: center; flex: none;
    width: 38px; height: 38px; border-radius: 12px;
    color: var(--purple-dark); background: var(--purple-soft);
}
.doc-ico svg { width: 18px; height: 18px; }
.doc-body { min-width: 0; }
.doc-body strong {
    display: block; font-size: 13.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-meta { font-size: 12px; color: var(--muted); }
.doc-del { color: var(--faint); padding: 7px; border-radius: 10px; }
.doc-del:hover { color: var(--red); background: var(--red-soft); }
.doc-del svg { width: 16px; height: 16px; }
.doc-progress { height: 5px; margin-top: 7px; border-radius: 3px; background: var(--ground-2); overflow: hidden; }
.doc-progress::after {
    content: ""; display: block; height: 100%; width: calc(var(--p, 0) * 1%);
    background: var(--purple); transition: width .2s;
}

/* ---------- Le plan de travail se replie proprement ---------- */
@media (max-width: 1320px) {
    /* Deux colonnes : les repères à gauche, la feuille à droite,
       les documents passent sous la feuille — la feuille n'est plus le
       dernier contenu, on rend son bas de page et le padding du flow. */
    .workspace { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
    .docs-col { grid-column: 2; position: static; max-height: none; overflow: visible; }
    .pane.work { margin-bottom: 0; }
    .write-card { border-radius: 20px; border-bottom: 2px solid transparent; }
    .write-card:focus-within { border-bottom-color: var(--purple); }
}
@media (max-width: 900px) {
    .workspace { grid-template-columns: 1fr; }
    .keys-col, .docs-col { position: static; max-height: none; overflow: visible; grid-column: auto; }
    .bigtext { min-height: 420px; padding-bottom: 80px; }
}

/* =====================================================================
   Le récapitulatif
   ===================================================================== */
.recap-grid { display: grid; gap: 16px; }
@media (min-width: 860px) { .recap-grid { grid-template-columns: 1fr 1fr; } }
.recap-step {
    padding: 22px 24px; border-radius: var(--radius);
    background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-soft);
}
.recap-step.ctx { grid-column: 1 / -1; border-color: var(--purple-line); background: #fdfcff; }
.recap-step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.recap-num {
    display: grid; place-items: center; flex: none;
    width: 42px; height: 42px; border-radius: 14px;
    font-family: var(--display); font-size: 18px; font-weight: 800;
    color: var(--purple-dark); background: var(--purple-soft);
}
.recap-step-head > div { flex: 1; min-width: 0; }
.recap-step-head h3 { font-family: var(--display); font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.recap-step-head .eyebrow { font-size: 11.5px; margin-bottom: 2px; }
.recap-detail { font-size: 14px; color: var(--ink-2); margin-bottom: 10px; }

.submit-card {
    display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
    margin-top: 26px; padding: 28px 30px; border-radius: var(--radius-lg);
    background: linear-gradient(120deg, var(--purple-soft), #fdeee9 76%, var(--amber-soft));
    border: 1px solid var(--purple-line);
}
.submit-card > div:first-child { flex: 1; min-width: 300px; }
.submit-card h2 {
    font-family: var(--display); font-size: 23px; font-weight: 800; letter-spacing: -.03em;
    margin-bottom: 7px;
}
.submit-card p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.submit-actions { display: grid; gap: 10px; }

/* =====================================================================
   Modales
   ===================================================================== */
.backdrop {
    position: fixed; inset: 0; z-index: 90;
    display: grid; place-items: center; padding: 24px;
    background: rgba(37, 35, 54, .42); backdrop-filter: blur(4px);
    animation: fade-in .2s ease both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
    width: 100%; max-width: 560px; max-height: calc(100vh - 48px); overflow-y: auto;
    background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow);
    padding: 26px 28px 28px;
    animation: pop .26s var(--ease) both;
}
.modal.wide { max-width: 760px; }
@keyframes pop {
    from { opacity: 0; transform: scale(.96) translateY(10px); }
    to { opacity: 1; transform: none; }
}
.modal-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.modal-ico {
    display: grid; place-items: center; flex: none;
    width: 46px; height: 46px; border-radius: 14px;
    color: var(--purple-dark); background: var(--purple-soft);
}
.modal-ico.good { color: var(--green-ink); background: var(--green-soft); }
.modal-ico.warn { color: var(--amber); background: var(--amber-soft); }
.modal-head-copy { flex: 1; min-width: 0; }
.modal-head-copy h2 {
    font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -.025em;
}
.modal-head-copy p { margin-top: 3px; font-size: 14.5px; color: var(--muted); }
.modal-close { color: var(--faint); padding: 7px; border-radius: 10px; }
.modal-close:hover { color: var(--ink); background: var(--ground); }
.modal-body { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

.copyrow { display: flex; gap: 10px; }
.copyrow .input { flex: 1; font-size: 13px; }

/* ---------- Le contenu de la modale d'analyse ---------- */
.review-wait {
    display: grid; justify-items: center; gap: 16px;
    padding: 26px 10px 18px; text-align: center;
}
.review-wait .orb { animation: breathe 1.6s ease-in-out infinite; }
.review-wait p { font-size: 14.5px; color: var(--muted); max-width: 380px; }

.review-summary { font-size: 15px; color: var(--ink-2); margin-bottom: 16px; }
.review-covered { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.review-covered .tag { font-weight: 600; }
.miss-list { display: grid; gap: 12px; }
.miss {
    display: grid; gap: 5px;
    padding: 15px 17px; border-radius: 14px;
    background: var(--amber-soft); border: 1px solid #f3e3c4;
}
.miss strong { display: flex; gap: 9px; align-items: center; font-size: 15px; color: #7a5119; }
.miss strong svg { width: 16px; height: 16px; color: var(--amber); flex: none; }
.miss p { font-size: 13.5px; color: #7a5119; line-height: 1.5; }
.miss .miss-ex { font-style: italic; color: #9a7434; }

/* =====================================================================
   Notifications
   ===================================================================== */
.toasts {
    position: fixed; z-index: 95; left: 50%; bottom: calc(var(--navbar-h) + 18px);
    transform: translateX(-50%);
    display: grid; gap: 8px; width: min(460px, calc(100vw - 32px));
    pointer-events: none;
}
.toast {
    display: flex; align-items: center; gap: 11px;
    padding: 13px 17px; border-radius: 14px;
    background: #262336; color: #fff; font-size: 14px;
    box-shadow: var(--shadow);
    animation: rise .28s var(--ease) both;
}
.toast svg { width: 16px; height: 16px; flex: none; }
.toast.warn { background: #6b4a12; }
.toast.error { background: #6d2018; }
.toast.out { animation: fade-in .2s ease reverse both; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =====================================================================
   Onboarding automatique (?automatic=true) — accueil et bannière du récap
   ---------------------------------------------------------------------
   Même peau que l'accueil classique, un cran plus large : la zone JSON a
   besoin d'air. Tout est préfixé .auto-.
   ===================================================================== */
.welcome.auto .welcome-inner { max-width: 720px; }
.auto-eyebrow { margin-bottom: 10px; }

.auto-how {
    margin: 0 0 26px; padding: 18px 20px 18px 40px;
    text-align: left; border-radius: var(--radius);
    background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-soft);
    font-size: 14.5px; color: var(--ink-2); line-height: 1.55;
}
.auto-how li { padding: 6px 0; }
.auto-how li::marker { color: var(--purple); font-weight: 800; }
.auto-how strong { color: var(--ink); }
.auto-how-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-left: 10px; vertical-align: middle; }

.auto-errors ul { margin: 8px 0 0; padding-left: 18px; }
.auto-errors li { margin: 3px 0; }

.auto-json { display: grid; gap: 10px; }
.auto-json-area {
    min-height: 200px; resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px; line-height: 1.5; white-space: pre; overflow: auto;
}
.auto-json-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.auto-file { cursor: pointer; }
.auto-json-status { flex: 1; min-width: 200px; font-size: 13px; color: var(--muted); line-height: 1.4; }
.auto-json-status.ok   { color: var(--green-ink); }
.auto-json-status.warn { color: var(--amber); }
.auto-json-status.err  { color: var(--red-ink); }

.auto-check {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 13px 15px; border-radius: 13px;
    background: #fff; border: 1px solid var(--line);
    font-size: 14px; color: var(--ink-2); cursor: pointer;
}
.auto-check input { margin-top: 3px; accent-color: var(--purple); }
.auto-check small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }

/* ---------- La bannière du récapitulatif ---------- */
.auto-banner {
    margin-bottom: 20px; padding: 22px 24px; border-radius: var(--radius);
    background: linear-gradient(120deg, var(--purple-soft), #fdf5ff 70%, #fff);
    border: 1px solid var(--purple-line);
}
.auto-banner-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.auto-banner-ico {
    display: grid; place-items: center; flex: none;
    width: 42px; height: 42px; border-radius: 14px;
    color: #fff; background: var(--cta);
}
.auto-banner-head h3 { font-family: var(--display); font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.auto-banner-head .eyebrow { font-size: 11.5px; margin-bottom: 2px; }
.auto-banner-meta { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.auto-banner-meta a { color: var(--purple-dark); font-weight: 600; word-break: break-all; }
.auto-banner-resume {
    margin-top: 12px; padding: 14px 16px; border-radius: 12px;
    background: rgba(255, 255, 255, .7); font-size: 14px; color: var(--ink-2); line-height: 1.6;
}
.auto-banner-warn { margin: 12px 0 0; padding-left: 18px; font-size: 13.5px; color: var(--amber); }
.auto-banner-warn li { margin: 2px 0; }
.auto-banner .small { margin-top: 12px; }