/* ============================================================================
   Bloko — feuille de style unique des cinq écrans (accueil, atelier, connexion,
   tarifs, compte). Design system v3 « Bloko Kit Cobalt » :
   docs/design-system.md est la seule source des tokens et des composants.
   Aucune valeur de couleur hors du bloc :root et des deux thèmes, sauf les quelques
   valeurs reprises telles quelles du kit (sections 17 à 19).
   Sommaire :
     1. Tokens        2. Base       4. Champs     5. États
     15. Pages secondaires      16. Replis
     17. Kit Bloko (composants k-*)   18. Kit Bloko — accueil et composants partagés
     19. Kit Bloko — atelier
   L'atelier v2 (sections 3 et 6 à 14) a été remplacé par les composants du kit (s09).
   ========================================================================= */

/* ============ 1. Tokens — v3 « Bloko Kit Cobalt », mesurés une fois dans docs/design-system.md == */
:root{
  --surface:#f4f6fb; --surface-raised:#ffffff; --surface-sunken:#e9edf5; --surface-inverse:#0f1424;
  --ink:#0f1424; --ink-muted:#565d75; --ink-faint:#939ab3;
  --on-inverse:#f4f6fb; --on-inverse-muted:#a3abc7;
  --line:#dfe4ee; --line-strong:#7e869f; --grid:#e3e8f2;
  --signal:#2f5bff; --signal-hover:#1f47e6; --signal-soft:#e3e9ff; --signal-ink:#1d43d6;
  --on-signal:#ffffff; --focus:#2f5bff;
  --online:#22c55e; --online-ink:#137a3a; --online-soft:#dcfce7;
  --offline:#939ab3;
  --running:#0e9aa7; --running-ink:#0a6f7a; --running-soft:#d6f4f7;
  --waiting:#f59e0b; --waiting-ink:#8f5806; --waiting-soft:#fef3c7;
  --error:#dc2626; --error-ink:#b91c1c; --error-soft:#fee2e2; --on-error:#ffffff;
  --demo:#c026d3; --demo-ink:#9d1bb0; --demo-soft:#f8e1fb;
  --pixel-stone:#cfd5e3;
  --link:var(--signal-ink);
  --shadow-sm:0 1px 2px #0f142414;
  --shadow-md:0 4px 12px -2px #0f14241f,0 1px 2px #0f14240f;
  --shadow-lg:0 20px 48px -12px #0f142433,0 2px 6px #0f142414;
  --focus-ring:0 0 0 2px #f4f6fb,0 0 0 4px #2f5bff;
  --font-display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --font-sans:Figtree,"Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:112px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-full:9999px;
  --stroke-1:1px; --stroke-2:2px;
  color-scheme:light;
}
/* Sombre : préférence système, sauf choix explicite « clair »… */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --surface:#0b1020; --surface-raised:#141a2e; --surface-sunken:#070b17; --surface-inverse:#f2f4fa;
  --ink:#f2f4fa; --ink-muted:#a5adc8; --ink-faint:#6c7593;
  --on-inverse:#0b1020; --on-inverse-muted:#5b6482;
  --line:#262e47; --line-strong:#6a7494; --grid:#1b2238;
  --signal:#6b8cff; --signal-hover:#85a0ff; --signal-soft:#1a2650; --signal-ink:#9db3ff;
  --on-signal:#0f1424; --focus:#6b8cff;
  --online:#22c55e; --online-ink:#4ade80; --online-soft:#0f2e1d;
  --offline:#6c7593;
  --running:#22b8c9; --running-ink:#5fd3e0; --running-soft:#0d2f36;
  --waiting:#f59e0b; --waiting-ink:#fbbf24; --waiting-soft:#3a2a08;
  --error:#ef4444; --error-ink:#fca5a5; --error-soft:#3b1313; --on-error:#0f1424;
  --demo:#d946ef; --demo-ink:#e59cf7; --demo-soft:#3a1544;
  --pixel-stone:#2c3550;
  --shadow-sm:0 1px 2px #00000080;
  --shadow-md:0 6px 16px -4px #000000b3;
  --shadow-lg:0 24px 56px -12px #000000e6;
  --focus-ring:0 0 0 2px #0b1020,0 0 0 4px #6b8cff;
  color-scheme:dark;
}}
/* …et bascule explicite, persistée par initTheme() dans public/ui.js. */
:root[data-theme="dark"]{
  --surface:#0b1020; --surface-raised:#141a2e; --surface-sunken:#070b17; --surface-inverse:#f2f4fa;
  --ink:#f2f4fa; --ink-muted:#a5adc8; --ink-faint:#6c7593;
  --on-inverse:#0b1020; --on-inverse-muted:#5b6482;
  --line:#262e47; --line-strong:#6a7494; --grid:#1b2238;
  --signal:#6b8cff; --signal-hover:#85a0ff; --signal-soft:#1a2650; --signal-ink:#9db3ff;
  --on-signal:#0f1424; --focus:#6b8cff;
  --online:#22c55e; --online-ink:#4ade80; --online-soft:#0f2e1d;
  --offline:#6c7593;
  --running:#22b8c9; --running-ink:#5fd3e0; --running-soft:#0d2f36;
  --waiting:#f59e0b; --waiting-ink:#fbbf24; --waiting-soft:#3a2a08;
  --error:#ef4444; --error-ink:#fca5a5; --error-soft:#3b1313; --on-error:#0f1424;
  --demo:#d946ef; --demo-ink:#e59cf7; --demo-soft:#3a1544;
  --pixel-stone:#2c3550;
  --shadow-sm:0 1px 2px #00000080;
  --shadow-md:0 6px 16px -4px #000000b3;
  --shadow-lg:0 24px 56px -12px #000000e6;
  --focus-ring:0 0 0 2px #0b1020,0 0 0 4px #6b8cff;
  color-scheme:dark;
}

/* ============ 2. Base ===================================================== */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-sans);
  font-size:14.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
button{touch-action:manipulation}
::selection{background:var(--signal-soft);color:var(--signal-ink)}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:4px}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
h1,h2,h3,h4{margin:0}
a{color:var(--signal)}

/* ============ 4. Champs =================================================== */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.field label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-muted)}
.field input{width:100%;height:42px;padding:0 13px;border-radius:var(--radius-md);
  border:1px solid var(--line);background:var(--surface-raised);font-size:15px;outline:none;
  transition:border-color .13s,box-shadow .13s}
.field input::placeholder{color:var(--ink-faint)}
.field input:focus-visible{border-color:var(--signal);box-shadow:0 0 0 3px var(--signal-soft);outline:none}
.field .hint{font-size:12.5px;color:var(--ink-muted)}

/* ============ 5. États : histogramme, lignes ============================ */
.bars{display:flex;align-items:flex-end;gap:6px;height:88px;margin-top:10px}
.bars b{flex:1;min-width:0;border-radius:3px 3px 1px 1px;background:var(--signal);min-height:2px}
.bars b.zero{background:var(--surface-sunken);border:1px solid var(--line)}
.axis{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10.5px;
  color:var(--ink-muted);margin-top:6px}

.okline{color:var(--online-ink);font-size:13px;background:var(--online-soft);border:1px solid var(--online-ink);
  border-radius:var(--radius-md);padding:10px 12px}
.muted{color:var(--ink-muted);font-size:13px}

/* Barre du haut des pages secondaires */
.topbar{display:flex;align-items:center;gap:10px;padding:11px 20px;border-bottom:1px solid var(--line);
  background:var(--surface-raised)}

/* ============ 15. Pages secondaires : connexion, tarifs, compte ========= */
.page{min-height:100%;display:flex;flex-direction:column}
.page .topbar{padding:11px 20px}
.page .topbar .brand{padding:0}
.page .topbar .wrap{display:flex;align-items:center;gap:10px}
.page-body{flex:1;padding:0 16px calc(32px + env(safe-area-inset-bottom,0px))}
.wrap{width:100%;max-width:760px;margin:0 auto}
.wrap.wide{max-width:960px}
.spacer{flex:1}
.page-head{margin:26px 0 20px}
.page-head h1{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,5vw,44px);
  letter-spacing:-.02em;line-height:1.05;margin:0 0 8px;text-wrap:balance}
.page-head p{color:var(--ink-muted);margin:0;overflow-wrap:anywhere}
.page-head.center{text-align:center;max-width:620px;margin-inline:auto;display:block}
.stack{display:flex;flex-direction:column;gap:14px}
.big{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:30px;font-weight:500;
  letter-spacing:-.02em;line-height:1.1;display:block}
.big small{font-family:var(--font-sans);font-size:13px;color:var(--ink-muted);font-weight:400;margin-left:6px;
  letter-spacing:0}
.price{font-family:var(--font-display);font-weight:800;font-size:34px;letter-spacing:-.03em;line-height:1;
  display:block}
.price small{font-family:var(--font-sans);font-size:13px;font-weight:400;color:var(--ink-muted);margin-left:6px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.page-foot{margin:22px auto 0;display:flex;align-items:center;justify-content:center;gap:16px;
  flex-wrap:wrap;font-size:13.5px}

/* Connexion : une carte plate, titre Bricolage, aucun libellé au-dessus. */
.auth{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px 16px 36px}
.auth-head{text-align:center;margin-bottom:20px}
.auth-head h1{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,5vw,36px);
  letter-spacing:-.02em;line-height:1.1;margin:14px 0 6px;text-wrap:balance}
.auth-head p{color:var(--ink-muted);margin:0}
.auth-head .cube{width:40px;height:40px;margin:0 auto;border-radius:11px}
.auth-head .cube svg{width:24px;height:24px}
.auth .card{width:100%;max-width:420px;padding:20px}
.auth .errline{margin:0 0 12px}
.swap{margin-top:16px;font-size:13.5px;color:var(--ink-muted);text-align:center}
.swap button{border:0;background:none;color:var(--signal);font-weight:600;cursor:pointer;
  padding:2px 4px;border-radius:4px;text-decoration:underline}

/* Tarifs : le plan courant se marque par une bordure accent, jamais par une ombre. */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
/* Quatre offres : la grille s'élargit d'une colonne, et se replie en deux avant que les
   cartes ne deviennent illisibles. Trois offres gardent exactement la grille d'avant. */
.plans.is-four{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.plans.is-four{grid-template-columns:repeat(2,1fr)}}
.plan-card{display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);
  border-radius:var(--radius-md);background:var(--surface-raised);padding:18px}
/* Même marque pour le plan en cours (tarifs) et le plan mis en avant (accueil). */
.plan-card.current,.plan-card.hot{border-color:var(--signal)}
.plan-card .quota{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12.5px;
  color:var(--ink-muted)}
.plan-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;
  font-size:13px;color:var(--ink-muted)}
.plan-card li{display:flex;align-items:flex-start;gap:9px}
.plan-card li svg{width:14px;height:14px;flex:none;color:var(--online-ink);margin-top:4px}
.plan-card .cta{margin-top:auto;padding-top:4px}

/* ============ 16. Replis ================================================ */
@media (max-width:900px){
  .topbar{padding:10px 12px;gap:8px}
}
@media (max-width:760px){
  .plans,.plans.is-four{grid-template-columns:1fr}
  .page .topbar{padding:10px 12px}
  .page-foot .btn,.row .btn,.row .big+.btn{width:100%}
  .bars{gap:3px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* ============ 17. Kit Bloko — porté de docs/designs/kit/components/bundle.css ==
   Sélecteurs k-* gardés tels quels : le rendu est celui du kit, et s08/s09
   réutilisent les mêmes classes. Seuls les composants de s07 sont repris. */
/* Tons */
.k-tone-signal{--tone:var(--signal);--tone-soft:var(--signal-soft);--tone-ink:var(--signal-ink);--on-tone:var(--on-signal)}
.k-tone-online{--tone:var(--online);--tone-soft:var(--online-soft);--tone-ink:var(--online-ink);--on-tone:#0f1424}
.k-tone-offline{--tone:var(--offline);--tone-soft:var(--surface-sunken);--tone-ink:var(--ink-muted);--on-tone:#0f1424}
.k-tone-running{--tone:var(--running);--tone-soft:var(--running-soft);--tone-ink:var(--running-ink);--on-tone:#0f1424}
.k-tone-waiting{--tone:var(--waiting);--tone-soft:var(--waiting-soft);--tone-ink:var(--waiting-ink);--on-tone:#0f1424}
.k-tone-error{--tone:var(--error);--tone-soft:var(--error-soft);--tone-ink:var(--error-ink);--on-tone:var(--on-error)}
.k-tone-demo{--tone:var(--demo);--tone-soft:var(--demo-soft);--tone-ink:var(--demo-ink);--on-tone:#ffffff}
/* Base */
.k-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
.k-icon{flex:none;display:block}
.k-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.k-stack{display:grid;gap:12px}
.k-eyebrow{font:500 12px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
/* Bouton */
.k-btn{--bg:var(--signal);--fg:var(--on-signal);--bd:var(--signal);--bg-h:var(--signal-hover);appearance:none;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border:var(--stroke-1) solid var(--bd);border-radius:var(--radius-md);background:var(--bg);color:var(--fg);font:600 14px/1 var(--font-sans);text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;transition:background-color .12s,border-color .12s,transform .08s,box-shadow .12s}
.k-btn:hover,.k-btn.is-hover{background:var(--bg-h);border-color:var(--bg-h)}
.k-btn:active:not(:disabled){transform:translateY(1px)}
.k-btn:focus-visible,.k-btn.is-focus{outline:none;box-shadow:var(--focus-ring)}
.k-btn:disabled,.k-btn.is-disabled{cursor:not-allowed;opacity:.5;transform:none}
.k-btn.is-loading{cursor:progress;color:transparent!important}
.k-btn.is-loading .k-spin{position:absolute;inset:0;margin:auto;color:var(--fg)}
.k-btn--primary{--bg:var(--signal);--fg:var(--on-signal);--bd:var(--signal);--bg-h:var(--signal-hover)}
.k-btn--secondary{--bg:var(--surface-raised);--fg:var(--ink);--bd:var(--line-strong);--bg-h:var(--surface-sunken);box-shadow:var(--shadow-sm)}
.k-btn--secondary:hover,.k-btn--secondary.is-hover{border-color:var(--line-strong)}
.k-btn--ghost{--bg:transparent;--fg:var(--ink);--bd:transparent;--bg-h:var(--surface-sunken)}
.k-btn--ghost:hover,.k-btn--ghost.is-hover{border-color:transparent}
.k-btn--danger{--bg:var(--error);--fg:var(--on-error);--bd:var(--error);--bg-h:#c42b2b}
.k-btn--inverse{--bg:var(--surface-inverse);--fg:var(--on-inverse);--bd:var(--surface-inverse);--bg-h:var(--surface-inverse)}
.k-btn--inverse:hover,.k-btn--inverse.is-hover{opacity:.9}
.k-btn--sm{height:32px;padding:0 12px;font-size:13px;gap:6px;border-radius:8px}
.k-btn--lg{height:48px;padding:0 22px;font-size:15px;border-radius:12px}
.k-btn--icon{width:40px;padding:0}
.k-btn--icon.k-btn--sm{width:32px}
.k-btn--block{width:100%}
.k-btn__kbd{font:500 11px/1 var(--font-mono);padding:2px 5px;border-radius:4px;background:rgba(0,0,0,.14);opacity:.9}
/* Champs */
.k-field{display:grid;gap:6px}
.k-field__label{display:flex;justify-content:space-between;font:600 14px/20px var(--font-sans);color:var(--ink)}
.k-field__label small{font:500 13px/20px var(--font-sans);color:var(--ink-muted)}
.k-input{position:relative;display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;box-sizing:border-box;border:var(--stroke-1) solid var(--line-strong);border-radius:var(--radius-md);background:var(--surface-raised);color:var(--ink);transition:border-color .12s,box-shadow .12s}
.k-input input,.k-input textarea{flex:1;min-width:0;border:0;outline:0;background:transparent;color:inherit;font:400 15px/22px var(--font-sans);padding:0}
.k-input input::placeholder,.k-input textarea::placeholder{color:var(--ink-muted);opacity:1}
.k-input .k-icon{color:var(--ink-muted)}
.k-input:hover,.k-input.is-hover{border-color:var(--ink)}
.k-input:focus-within,.k-input.is-focus{border-color:var(--focus);box-shadow:0 0 0 3px var(--running-soft)}
.k-input.is-error{border-color:var(--error);border-width:var(--stroke-2);padding:0 11px}
.k-input.is-error:focus-within{box-shadow:0 0 0 3px var(--error-soft)}
.k-input.is-disabled{background:var(--surface-sunken);color:var(--ink-faint);border-color:var(--line);cursor:not-allowed}
.k-input.is-disabled input{color:var(--ink-faint);cursor:not-allowed}
.k-input.is-loading .k-spin{color:var(--ink-muted)}
.k-input--area{height:auto;padding:10px 12px;align-items:stretch}
.k-input--area textarea{resize:vertical;min-height:72px}
.k-input__btn{appearance:none;border:0;background:none;padding:4px;margin:0 -4px;border-radius:6px;color:var(--ink-muted);cursor:pointer;display:grid;place-items:center}
.k-input__btn:hover{color:var(--ink);background:var(--surface-sunken)}
.k-input__btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.k-field__help{font:500 13px/18px var(--font-sans);color:var(--ink-muted)}
.k-field__error{display:flex;align-items:center;gap:6px;font:500 13px/18px var(--font-sans);color:var(--error-ink)}
/* Étiquettes, badges, pastilles */
.k-tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:var(--radius-sm);background:var(--surface-sunken);color:var(--ink);font:600 12px/1 var(--font-sans)}
.k-tag--tone{background:var(--tone-soft);color:var(--tone-ink)}
.k-tag--mono{font:500 11px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase}
.k-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:var(--radius-full);background:var(--signal);color:var(--on-signal);font:700 11px/1 var(--font-sans)}
.k-badge--neutral{background:var(--surface-inverse);color:var(--on-inverse)}
.k-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--tone);flex:none}
.k-dot--pulse{box-shadow:0 0 0 0 var(--tone);animation:k-pulse 1.6s ease-out infinite}
.k-status{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 9px 0 8px;border-radius:var(--radius-full);background:var(--tone-soft);color:var(--tone-ink);font:600 12px/1 var(--font-sans);white-space:nowrap}
.k-status--plain{background:transparent;padding:0;color:var(--ink)}
/* Messages */
.k-alert{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--radius-md);background:var(--tone-soft);color:var(--ink);font:500 14px/20px var(--font-sans)}
.k-alert .k-icon{color:var(--tone-ink);margin-top:1px}
.k-alert b{font-weight:700}
.k-alert__body{flex:1}
.k-alert__body p{margin:2px 0 0;font-weight:400;color:var(--ink-muted)}
.k-alert a{color:var(--tone-ink);font-weight:600}
.k-alert--inline{padding:0;background:none;color:var(--tone-ink);font-size:13px;line-height:18px;align-items:center}
.k-alert--inline .k-icon{margin:0}
/* Progression */
.k-progress{height:8px;border-radius:var(--radius-full);background:var(--surface-sunken);overflow:hidden}
.k-progress span{display:block;height:100%;border-radius:inherit;background:var(--tone,var(--signal));transition:width .4s}
.k-progress--indeterminate span{width:40%;animation:k-slide 1.2s ease-in-out infinite}
.k-progress--thin{height:4px}
.k-spin{display:inline-block;width:16px;height:16px;box-sizing:border-box;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:k-spin .7s linear infinite;flex:none}
.k-spin--lg{width:28px;height:28px;border-width:3px}
/* Carte */
.k-card{box-sizing:border-box;background:var(--surface-raised);border:var(--stroke-1) solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.k-card--pad{padding:20px}
.k-card--hover:hover{box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.k-card__title{margin:0 0 4px;font:700 15px/20px var(--font-sans)}
.k-card__sub{margin:0;font:400 14px/20px var(--font-sans);color:var(--ink-muted)}
/* Logo */
.k-logo{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none}
.k-logo__mark .p{fill:var(--ink)}
.k-logo__mark .s{fill:var(--signal)}
.k-logo__word{font:700 20px/1 var(--font-display);letter-spacing:-.03em;color:var(--ink)}
.k-logo--inverse .k-logo__mark .p{fill:var(--on-inverse)}
.k-logo--inverse .k-logo__word{color:var(--on-inverse)}
/* Chapeau et grille de points */
.k-lead{margin:0;max-width:600px;font:400 18px/28px var(--font-sans);color:var(--ink-muted);text-wrap:pretty}
.k-dots{background-image:radial-gradient(circle at 1.5px 1.5px,var(--grid) 1.5px,transparent 2px);background-size:22px 22px}
/* Carte de prix */
.k-price{position:relative;display:flex;flex-direction:column;padding:24px;border:var(--stroke-1) solid var(--line);border-radius:var(--radius-xl);background:var(--surface-raised);box-shadow:var(--shadow-sm)}
.k-price.is-featured{border-color:var(--signal);box-shadow:var(--shadow-md),0 0 0 4px var(--signal-soft)}
.k-price.is-current{border-color:var(--line-strong);background:var(--surface-sunken)}
.k-price__badge{position:absolute;top:-12px;left:20px}
.k-price__name{margin:0;font:700 20px/26px var(--font-display);letter-spacing:-.015em}
.k-price__for{margin:2px 0 18px;font:400 14px/20px var(--font-sans);color:var(--ink-muted)}
.k-price__amt{display:flex;align-items:baseline;gap:6px}
.k-price__amt strong{font:800 40px/1 var(--font-display);letter-spacing:-.03em}
.k-price__amt span{font:500 12px/1 var(--font-mono);color:var(--ink-muted)}
.k-price__quota{margin:14px 0;padding:10px 12px;border-radius:10px;background:var(--surface-sunken);font:500 13px/18px var(--font-sans)}
.k-price__quota b{display:block;font:500 11px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.k-price ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px;flex:1}
.k-price li{display:flex;gap:8px;align-items:flex-start;font:400 14px/20px var(--font-sans)}
.k-price li .k-icon{color:var(--online-ink);margin-top:2px}
.k-price li.is-off{color:var(--ink-faint)}
.k-price li.is-off .k-icon{color:var(--ink-faint)}
/* Authentification */
.k-auth{width:100%;max-width:400px;margin:0 auto;padding:28px;box-sizing:border-box;border:var(--stroke-1) solid var(--line);border-radius:var(--radius-xl);background:var(--surface-raised);box-shadow:var(--shadow-md)}
.k-auth__head{text-align:center;margin-bottom:20px}
.k-auth__head h1{margin:12px 0 4px;font:700 24px/30px var(--font-display);letter-spacing:-.02em}
.k-auth__head p{margin:0;font:400 14px/20px var(--font-sans);color:var(--ink-muted)}
.k-auth form{display:grid;gap:14px}
.k-auth__foot{margin:18px 0 0;text-align:center;font:400 14px/20px var(--font-sans);color:var(--ink-muted)}
.k-auth__foot button{appearance:none;border:0;background:none;padding:0;color:var(--signal-ink);font:600 14px/20px var(--font-sans);cursor:pointer}
.k-auth__foot button:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:4px}
.k-auth .k-btn--block{margin-top:4px}
.k-auth a{white-space:nowrap}
/* Compte */
.k-plan{display:flex;align-items:center;gap:14px;padding:18px 20px;border:var(--stroke-1) solid var(--line);border-radius:var(--radius-lg);background:var(--surface-raised)}
.k-plan__name{font:700 20px/26px var(--font-display);letter-spacing:-.015em}
.k-plan__meta{font:500 12px/16px var(--font-mono);color:var(--ink-muted)}
.k-plan .k-btn{margin-left:auto}
.k-hist{display:flex;align-items:flex-end;gap:5px;height:88px;padding-top:8px}
.k-hist i{flex:1;border-radius:3px 3px 1px 1px;background:var(--signal);min-height:3px;position:relative}
.k-hist i.is-low{background:var(--line-strong)}
.k-hist i.is-today{background:var(--signal-hover);outline:2px solid var(--signal-soft)}
.k-hist__axis{display:flex;justify-content:space-between;margin-top:6px;font:500 11px/14px var(--font-mono);color:var(--ink-muted)}
/* Animations */
@keyframes k-spin{to{transform:rotate(360deg)}}
@keyframes k-pulse{0%{box-shadow:0 0 0 0 var(--tone)}100%{box-shadow:0 0 0 8px transparent}}
@keyframes k-slide{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
@media (prefers-reduced-motion:reduce){
  .k-dot--pulse,.k-progress--indeterminate span,.k-spin{animation:none!important}
  .k-btn,.k-input,.k-progress span{transition:none!important}
}

/* ============ 18. Kit Bloko — accueil et composants partagés ==============
   Porté de docs/designs/kit/components/bundle.css pour s08 (page d'accueil), sélecteurs
   k-* inchangés. PromptBar, Chips, ActionLine/ActionLog, PixelScene et CodeBlock servent
   aussi l'atelier (s09) : ils sont portés ici une fois pour toutes. */
/* Illustration pixel */
.k-px{display:block;width:100%;height:auto}
.k-px rect{rx:2}
.k-px .g{fill:var(--grid)}
.k-px .stone{fill:var(--pixel-stone)}
.k-px .signal{fill:var(--signal)}
.k-px .running{fill:var(--running)}
.k-px .online{fill:var(--online)}
.k-px .waiting{fill:var(--waiting)}
.k-px .demo{fill:var(--demo)}
.k-px .ink{fill:var(--ink)}
.k-px .new{animation:k-pop .35s cubic-bezier(.3,1.5,.5,1) both}
/* Grande barre de saisie (sans pièce jointe ni micro : hors périmètre) */
.k-prompt{position:relative;box-sizing:border-box;width:100%;padding:12px 12px 10px;border:var(--stroke-1) solid var(--line-strong);border-radius:var(--radius-xl);background:var(--surface-raised);box-shadow:var(--shadow-md);transition:border-color .12s,box-shadow .12s}
.k-prompt:focus-within,.k-prompt.is-focus{border-color:var(--focus);box-shadow:var(--shadow-md),0 0 0 3px var(--running-soft)}
.k-prompt.is-hover{border-color:var(--ink)}
.k-prompt.is-disabled{background:var(--surface-sunken);border-color:var(--line)}
.k-prompt.is-error{border-color:var(--error);border-width:2px;padding:11px 11px 9px}
.k-prompt__input{display:block;width:100%;box-sizing:border-box;min-height:56px;padding:6px 6px 2px;border:0;outline:0;resize:none;background:transparent;color:var(--ink);font:400 17px/26px var(--font-sans)}
.k-prompt__input::placeholder{color:var(--ink-muted);opacity:1}
.k-prompt--lg .k-prompt__input{min-height:80px;font-size:18px;line-height:28px}
.k-prompt--compact{padding:8px 8px 8px 12px;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.k-prompt--compact .k-prompt__input{min-height:24px;padding:6px 0;font-size:15px;line-height:22px}
.k-prompt__bar{display:flex;align-items:center;gap:4px;margin-top:4px}
.k-prompt--compact{display:flex;flex-wrap:wrap;align-items:flex-end}
.k-prompt--compact .k-prompt__input{flex:1;min-width:0;width:auto}
.k-prompt--compact .k-prompt__bar{margin-top:0;flex:none}
.k-prompt--compact .k-prompt__attach,.k-prompt--compact .k-prompt__error,.k-prompt--compact .k-prompt__working{width:100%;flex:none}
.k-prompt__spacer{flex:1}
.k-prompt__hint{font:500 12px/1 var(--font-mono);color:var(--ink-muted);margin-right:8px}
.k-prompt__send{--bg:var(--signal);--fg:var(--on-signal)}
.k-prompt__stop{--bg:var(--surface-inverse);--fg:var(--on-inverse);--bd:var(--surface-inverse)}
.k-prompt__error{display:flex;align-items:center;gap:6px;padding:6px 6px 0;font:500 13px/18px var(--font-sans);color:var(--error-ink)}
.k-prompt__working{display:flex;align-items:center;gap:8px;padding:2px 6px 6px;font:500 13px/18px var(--font-sans);color:var(--ink-muted)}
/* Puces */
.k-chips{display:flex;flex-wrap:wrap;gap:8px}
.k-chip{appearance:none;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px 0 10px;border:var(--stroke-1) solid var(--line);border-radius:var(--radius-full);background:var(--surface-raised);color:var(--ink);font:500 13px/1 var(--font-sans);white-space:nowrap;cursor:pointer;box-shadow:var(--shadow-sm);transition:border-color .12s,background-color .12s}
.k-chip .k-icon{color:var(--ink-muted)}
.k-chip:hover,.k-chip.is-hover{border-color:var(--ink)}
.k-chip:focus-visible,.k-chip.is-focus{outline:none;box-shadow:var(--focus-ring)}
.k-chip.is-selected{background:var(--signal-soft);border-color:var(--signal);color:var(--signal-ink)}
.k-chip.is-selected .k-icon{color:var(--signal-ink)}
.k-chip:disabled,.k-chip.is-disabled{opacity:.5;cursor:not-allowed}
.k-chip__px{width:12px;height:12px;border-radius:3px;background:var(--tone,var(--signal))}
/* Site public */
.k-wrap{max-width:1120px;margin:0 auto;padding-inline:32px}
.k-section{padding-block:96px}
.k-h2{margin:12px 0 12px;font:700 34px/38px var(--font-display);letter-spacing:-.025em;text-wrap:balance}
.k-center{text-align:center}
.k-center .k-lead{margin-inline:auto}
.k-header{display:flex;align-items:center;gap:24px;height:64px}
.k-header__links{display:flex;gap:2px}
.k-header__links a{padding:8px 12px;border-radius:8px;font:500 14px/1 var(--font-sans);color:var(--ink-muted);text-decoration:none}
.k-header__links a:hover,.k-header__links a.is-hover{color:var(--ink);background:var(--surface-sunken)}
.k-header__links a:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.k-header__links a.is-on{color:var(--ink)}
.k-header__cta{margin-left:auto;display:flex;gap:8px;align-items:center}
.k-header--mobile{height:56px;padding-inline:16px;gap:12px}
.k-header--mobile .k-header__cta{gap:4px}
.k-mnav{display:grid;gap:4px;padding:8px 16px 16px;border-bottom:var(--stroke-1) solid var(--line);background:var(--surface-raised)}
.k-mnav a{padding:12px 10px;border-radius:10px;font:600 16px/1 var(--font-sans);color:var(--ink);text-decoration:none}
.k-mnav a.is-on{background:var(--surface-sunken)}
.k-mnav .k-btn{margin-top:8px}
.k-hero{padding-block:56px 72px;text-align:center}
.k-hero__title{margin:20px auto 16px;max-width:820px;font:800 56px/58px var(--font-display);letter-spacing:-.03em;text-wrap:balance}
.k-hero__title em{font-style:normal;color:var(--signal-ink);position:relative}
.k-hero__title em::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--signal);border-radius:2px}
.k-hero .k-lead{margin:0 auto;max-width:640px}
.k-hero__prompt{max-width:760px;margin:36px auto 0;text-align:left}
.k-hero__chips{justify-content:center;margin-top:16px}
.k-hero__proof{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 24px;margin-top:28px;font:500 13px/18px var(--font-sans);color:var(--ink-muted)}
.k-hero__proof span{display:inline-flex;align-items:center;gap:6px}
.k-hero__proof .k-icon{color:var(--online-ink)}
.k-hero--mobile{padding:32px 16px 40px}
.k-hero--mobile .k-hero__title{font-size:36px;line-height:38px}
.k-hero--mobile .k-lead{font-size:16px;line-height:24px}
.k-demo{display:grid;grid-template-columns:300px 1fr 220px;border:var(--stroke-1) solid var(--line);border-radius:var(--radius-xl);background:var(--surface-raised);box-shadow:var(--shadow-md);overflow:hidden}
.k-demo__col{padding:16px;min-width:0}
.k-demo__col + .k-demo__col{border-left:var(--stroke-1) solid var(--line)}
.k-demo__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.k-demo__prompt{padding:10px 12px;border-radius:12px;background:var(--surface-sunken);font:500 14px/20px var(--font-sans);margin-bottom:14px}
.k-demo__view{position:relative;padding:20px;background-color:var(--surface-sunken);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;min-height:300px;display:grid;place-items:center}
.k-demo__view .k-px{max-width:340px}
.k-demo__added{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.k-demo__added li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;border:var(--stroke-1) solid var(--line);font:500 13px/18px var(--font-sans);animation:k-pop .3s both}
.k-demo__added li i{width:10px;height:10px;border-radius:3px;background:var(--tone)}
.k-demo--mobile{grid-template-columns:1fr}
.k-demo--mobile .k-demo__col + .k-demo__col{border-left:0;border-top:var(--stroke-1) solid var(--line)}
.k-show{overflow:hidden;display:flex;flex-direction:column}
.k-show__img{position:relative;aspect-ratio:16/10;background-color:var(--tone-soft);background-image:radial-gradient(circle at 1.5px 1.5px,var(--surface-raised) 1.5px,transparent 2px);background-size:16px 16px;display:grid;place-items:center;padding:16px;border-bottom:var(--stroke-1) solid var(--line)}
.k-show__img .k-px{max-height:100%}
.k-show__body{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px}
.k-show__name{margin:0;font:700 15px/20px var(--font-sans)}
.k-show__cat{margin:2px 0 0;font:500 12px/16px var(--font-mono);color:var(--ink-muted);text-transform:uppercase;letter-spacing:.06em}
.k-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.k-step{display:flex;gap:14px;align-items:flex-start;padding:18px;border:var(--stroke-1) solid var(--line);border-radius:var(--radius-lg);background:var(--surface-raised)}
.k-step__n{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--surface-inverse);color:var(--on-inverse);font:700 15px/1 var(--font-display)}
.k-step h3{margin:6px 0 4px;font:700 17px/22px var(--font-sans)}
.k-step p{margin:0;font:400 14px/20px var(--font-sans);color:var(--ink-muted)}
/* Questions, bannière d'appel, pied de page */
.k-faq{border-top:var(--stroke-1) solid var(--line)}
.k-faq details{border-bottom:var(--stroke-1) solid var(--line)}
.k-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 4px;font:600 16px/22px var(--font-sans);cursor:pointer;list-style:none}
.k-faq summary::-webkit-details-marker{display:none}
.k-faq summary:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:8px}
.k-faq summary .k-icon{flex:none;color:var(--ink-muted);transition:transform .2s}
.k-faq details[open] summary .k-icon{transform:rotate(45deg)}
.k-faq details p{margin:0;padding:0 4px 18px;max-width:640px;font:400 15px/23px var(--font-sans);color:var(--ink-muted)}
.k-cta{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:40px 48px;border-radius:var(--radius-xl);background:var(--surface-inverse);color:var(--on-inverse)}
.k-cta h2{margin:0 0 6px;font:800 32px/36px var(--font-display);letter-spacing:-.025em}
.k-cta p{margin:0;font:400 16px/24px var(--font-sans);color:var(--on-inverse-muted)}
.k-cta .k-btn{flex:none}
.k-footer{padding-block:48px 32px;border-top:var(--stroke-1) solid var(--line)}
.k-footer__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.k-footer p{margin:12px 0 0;max-width:280px;font:400 14px/20px var(--font-sans);color:var(--ink-muted)}
.k-footer h4{margin:4px 0 12px;font:500 12px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.k-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font:500 14px/20px var(--font-sans)}
.k-footer__legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin-top:40px;padding-top:20px;border-top:var(--stroke-1) solid var(--line);font:500 12px/16px var(--font-mono);color:var(--ink-muted)}
/* Bloc de code */
.k-code{margin:10px 0;border:var(--stroke-1) solid var(--line);border-radius:var(--radius-md);background:var(--surface-inverse);color:var(--on-inverse);overflow:hidden}
.k-code__head{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 6px 12px;border-bottom:1px solid rgba(128,128,128,.25);font:500 11px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-inverse-muted)}
.k-code__copy{appearance:none;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border:1px solid rgba(128,128,128,.35);border-radius:6px;background:none;color:var(--on-inverse);font:500 12px/1 var(--font-sans);cursor:pointer}
.k-code__copy:hover{background:rgba(128,128,128,.2)}
.k-code__copy:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.k-code__copy.is-done{color:var(--online)}
.k-code pre{margin:0;padding:12px 14px;font:400 13px/20px var(--font-mono);overflow:auto}
/* Journal d'actions */
.k-log{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;margin:8px 0;padding:6px;border:var(--stroke-1) solid var(--line);border-radius:var(--radius-lg);background:var(--surface-raised)}
.k-act{display:flex;align-items:center;gap:10px;min-width:0;padding:6px 8px;border-radius:8px;font:500 13px/18px var(--font-sans)}
.k-act__ico{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:6px;background:var(--surface-sunken);color:var(--ink-muted)}
.k-act__type{flex:none;font:500 11px/16px var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-muted);width:64px}
.k-act__desc{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-act__path{flex:0 1 auto;min-width:0;font:500 12px/16px var(--font-mono);color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.k-act__state{flex:none;width:18px;height:18px;display:grid;place-items:center;border-radius:5px;color:var(--ink-muted)}
.k-act.is-waiting{color:var(--ink-muted)}
.k-act.is-waiting .k-act__state{border:1.5px dashed var(--line-strong)}
.k-act.is-running{background:var(--running-soft)}
.k-act.is-running .k-act__ico{background:var(--running);color:#0f1424}
.k-act.is-running .k-act__state{color:var(--running-ink)}
.k-act.is-done .k-act__state{background:var(--online);color:#0f1424}
.k-act.is-failed{background:var(--error-soft)}
.k-act.is-failed .k-act__state{background:var(--error);color:#fff}
.k-act.is-failed .k-act__desc{color:var(--error-ink)}
.k-log__more{appearance:none;display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:0;border-radius:8px;background:none;color:var(--ink-muted);font:500 13px/18px var(--font-sans);cursor:pointer;text-align:left}
.k-log__more:hover{background:var(--surface-sunken);color:var(--ink)}
.k-log__more:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.k-log__more .k-icon{transition:transform .15s}
.k-log__more.is-open .k-icon{transform:rotate(90deg)}
/* Mise en page de l'accueil : les styles en ligne de ScreenHome/preview.html, en classes
   (aucun style= dans public/). Ce ne sont pas des composants, seulement leur placement. */
.home-head{margin-bottom:40px}
.home-section--first{padding-top:0}
.home-section--80{padding-block:80px}
.home-section--cta{padding-block:0 80px}
.home-faq{max-width:760px;margin:0 auto}
.home-shows{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.home-note{margin:16px 0 0;text-align:center;font:400 14px/20px var(--font-sans);color:var(--ink-muted)}
.home-demo-code{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:12px}
.home-demo-code .k-code{margin:0}
.k-footer ul a{color:inherit;text-decoration:none}
.k-footer ul a:hover{color:var(--ink);text-decoration:underline}
/* En-tête : sous 900px, les liens et « Se connecter » passent dans le menu. */
.k-header__menu{display:none}
@media (max-width:900px){
  .k-header{height:56px;gap:12px}
  .k-header__links,.k-header__login{display:none}
  .k-header__cta{gap:4px}
  .k-header__menu{display:inline-flex}
  .k-demo{grid-template-columns:1fr}
  .k-demo__col + .k-demo__col{border-left:0;border-top:var(--stroke-1) solid var(--line)}
  .home-shows{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:901px){.k-mnav{display:none}}
@keyframes k-pop{from{opacity:0;transform:translateY(-6px) scale(.92)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .k-px .new,.k-demo__added li{animation:none!important}
  .k-chip,.k-prompt{transition:none!important}
}
@media (max-width:720px){
  .k-wrap{padding-inline:16px}
  .k-section{padding-block:56px}
  .home-section--first{padding-top:0}
  .home-section--80{padding-block:56px}
  .home-section--cta{padding-block:0 56px}
  .k-hero{padding-block:32px 40px}
  .k-hero__title{font-size:36px;line-height:38px}
  .k-hero .k-lead{font-size:16px;line-height:24px}
  .k-h2{font-size:28px;line-height:32px}
  .k-steps,.k-footer__grid{grid-template-columns:1fr}
  .k-cta{flex-direction:column;align-items:flex-start;padding:28px}
}
@media (max-width:520px){.home-shows{grid-template-columns:1fr}}

/* ============ 19. Kit Bloko — atelier =====================================
   Porté de docs/designs/kit/components/bundle.css pour s09 (atelier), sélecteurs k-*
   inchangés. PromptBar, Chips, ActionLine/ActionLog et CodeBlock viennent de la section 18. */
/* Infobulle, menu */
.k-tip{position:relative;display:inline-block;padding:7px 10px;border-radius:8px;background:var(--surface-inverse);color:var(--on-inverse);font:500 12px/16px var(--font-sans);box-shadow:var(--shadow-md);max-width:240px}
.k-tip::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.k-tip--kbd kbd{font:500 11px/1 var(--font-mono);padding:2px 5px;border-radius:4px;background:rgba(255,255,255,.14);margin-left:6px}
.k-menu{min-width:200px;padding:6px;box-sizing:border-box;border:var(--stroke-1) solid var(--line);border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:var(--shadow-md)}
.k-menu__item{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--ink);font:500 14px/20px var(--font-sans);text-align:left;cursor:pointer}
.k-menu__item .k-icon{color:var(--ink-muted)}
.k-menu__item:hover,.k-menu__item.is-hover{background:var(--surface-sunken)}
.k-menu__item:focus-visible,.k-menu__item.is-focus{outline:none;box-shadow:var(--focus-ring)}
.k-menu__item.is-disabled{color:var(--ink-faint);cursor:not-allowed}
.k-menu__item.is-disabled .k-icon{color:var(--ink-faint)}
.k-menu__item--danger{color:var(--error-ink)}
.k-menu__item--danger .k-icon{color:var(--error-ink)}
.k-menu__item kbd{margin-left:auto;font:500 11px/1 var(--font-mono);color:var(--ink-muted)}
.k-menu__sep{height:1px;margin:6px 4px;background:var(--line)}
.k-menu__label{padding:6px 10px 4px;font:500 11px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
/* Modale, tiroir, voile */
.k-backdrop{position:absolute;inset:0;background:rgba(11,16,32,.6);backdrop-filter:blur(2px)}
.k-modal{position:relative;width:min(480px,calc(100% - 32px));box-sizing:border-box;padding:24px;border-radius:var(--radius-xl);background:var(--surface-raised);border:var(--stroke-1) solid var(--line);box-shadow:var(--shadow-lg)}
.k-modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:8px}
.k-modal__title{margin:0;font:700 20px/26px var(--font-display);letter-spacing:-.015em}
.k-modal__body{font:400 15px/23px var(--font-sans);color:var(--ink-muted)}
.k-modal__body p{margin:0}
.k-modal__foot{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}
.k-modal--sheet{width:100%;border-radius:var(--radius-xl) var(--radius-xl) 0 0;border-bottom:0;padding-top:12px}
.k-modal--sheet::before{content:"";display:block;width:40px;height:4px;margin:0 auto 14px;border-radius:2px;background:var(--line-strong)}
.k-drawer{position:absolute;top:0;bottom:0;width:320px;max-width:85%;box-sizing:border-box;display:flex;flex-direction:column;background:var(--surface-raised);box-shadow:var(--shadow-lg)}
.k-drawer--right{right:0;border-left:var(--stroke-1) solid var(--line)}
.k-drawer--left{left:0;border-right:var(--stroke-1) solid var(--line)}
.k-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:var(--stroke-1) solid var(--line);font:700 15px/20px var(--font-sans)}
.k-drawer__body{flex:1;overflow:auto;padding:16px}
/* Avatar, état vide */
.k-avatar{position:relative;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-full);background:var(--surface-sunken);color:var(--ink);font:700 12px/1 var(--font-sans);overflow:visible;flex:none}
.k-avatar--sm{width:24px;height:24px;font-size:10px}
.k-avatar--lg{width:48px;height:48px;font-size:16px}
.k-avatar--square{border-radius:var(--radius-md)}
.k-avatar__dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:var(--tone);border:2px solid var(--surface-raised)}
.k-avatar__img{width:100%;height:100%;border-radius:inherit}
.k-empty{display:grid;justify-items:center;text-align:center;gap:6px;padding:40px 24px}
.k-empty h3{margin:8px 0 0;font:700 20px/26px var(--font-display);letter-spacing:-.015em}
.k-empty p{margin:0;max-width:360px;font:400 14px/21px var(--font-sans);color:var(--ink-muted)}
.k-empty .k-btn{margin-top:14px}
/* Espace de travail */
.k-ws{display:grid;grid-template-columns:260px 1fr 300px;height:100%;min-height:560px;background:var(--surface);color:var(--ink)}
.k-ws *{box-sizing:border-box}
.k-ws--no-right{grid-template-columns:260px 1fr}
.k-ws--no-left{grid-template-columns:1fr 300px}
.k-ws__left{display:flex;flex-direction:column;min-height:0;border-right:var(--stroke-1) solid var(--line);background:var(--surface-raised)}
.k-ws__main{display:flex;flex-direction:column;min-width:0;min-height:0}
.k-ws__right{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto;padding:12px;border-left:var(--stroke-1) solid var(--line);background:var(--surface-raised)}
.k-ws__feed{flex:1;min-height:0;overflow:auto;padding:20px 24px;display:flex;flex-direction:column;gap:20px}
.k-ws__composer{padding:12px 16px 14px;border-top:var(--stroke-1) solid var(--line);background:var(--surface-raised)}
.k-wsh{display:flex;align-items:center;gap:10px;height:52px;padding:0 12px 0 16px;border-bottom:var(--stroke-1) solid var(--line);background:var(--surface-raised)}
.k-wsh__title{font:600 15px/20px var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.k-wsh__title input{border:0;background:none;font:inherit;color:inherit;outline:none;width:100%}
.k-wsh__conn{display:flex;gap:6px;margin-left:8px}
.k-wsh__tools{margin-left:auto;display:flex;gap:4px;align-items:center}
.k-clist__top{display:grid;gap:8px;padding:12px 12px 8px}
.k-clist{flex:1;min-height:0;overflow:auto;padding:4px 8px 8px}
.k-clist__group{margin:8px 6px 4px;font:500 11px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.k-citem{position:relative;display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--ink);font:500 13px/18px var(--font-sans);text-align:left;cursor:pointer}
.k-citem__t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-citem:hover,.k-citem.is-hover{background:var(--surface-sunken)}
.k-citem:focus-visible,.k-citem.is-focus{outline:none;box-shadow:var(--focus-ring)}
.k-citem.is-on{background:var(--signal-soft);color:var(--signal-ink);font-weight:600}
.k-citem__x{opacity:0;display:grid;place-items:center;width:22px;height:22px;border:0;border-radius:6px;background:none;color:var(--ink-muted);cursor:pointer;padding:0}
.k-citem:hover .k-citem__x,.k-citem.is-hover .k-citem__x,.k-citem__x:focus-visible{opacity:1}
.k-citem__x:hover{color:var(--error-ink);background:var(--error-soft)}
.k-clist__foot{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:var(--stroke-1) solid var(--line)}
.k-clist__foot > div > b{display:block;font:600 13px/16px var(--font-sans)}
.k-clist__foot > div > span{font:500 11px/14px var(--font-mono);color:var(--ink-muted)}
.k-clist__foot .k-btn{margin-left:auto}
.k-clist__clear{margin:4px 10px 8px;font:500 12px/16px var(--font-sans);color:var(--ink-muted);background:none;border:0;padding:4px 0;cursor:pointer}
.k-clist__clear:hover{color:var(--error-ink)}
.k-umsg{display:flex;justify-content:flex-end}
.k-umsg__bubble{max-width:560px;padding:10px 14px;border-radius:var(--radius-lg);border-bottom-right-radius:6px;background:var(--surface-sunken);font:400 15px/23px var(--font-sans);overflow-wrap:anywhere}
.k-umsg__imgs{display:flex;gap:6px;margin-bottom:8px}
.k-umsg__imgs .k-thumb{width:56px;height:56px}
.k-amsg{display:flex;gap:12px;align-items:flex-start;max-width:720px}
.k-amsg__avatar{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--surface-sunken);border:var(--stroke-1) solid var(--line);margin-top:2px}
.k-amsg__body{min-width:0;flex:1}
.k-amsg__name{display:flex;align-items:center;gap:8px;margin:0 0 6px;font:600 13px/20px var(--font-sans)}
.k-amsg__name span{font:500 11px/16px var(--font-mono);color:var(--ink-muted)}
.k-md{font:400 15px/24px var(--font-sans);color:var(--ink)}
.k-md > *:first-child{margin-top:0}
.k-md > *:last-child{margin-bottom:0}
.k-md h1,.k-md h2,.k-md h3{margin:18px 0 6px;font:700 17px/22px var(--font-sans);letter-spacing:-.01em}
.k-md h1{font-size:20px;line-height:26px}
.k-md p{margin:8px 0}
.k-md ul,.k-md ol{margin:8px 0;padding-left:22px}
.k-md li{margin:3px 0}
.k-md a{color:var(--link);font-weight:500}
.k-md code{font:400 13px/1 var(--font-mono);padding:2px 5px;border-radius:5px;background:var(--surface-sunken)}
.k-md blockquote{margin:10px 0;padding:6px 14px;border-left:3px solid var(--line-strong);color:var(--ink-muted)}
.k-md table{border-collapse:collapse;margin:10px 0;font-size:14px}
.k-md th,.k-md td{padding:6px 10px;border:var(--stroke-1) solid var(--line);text-align:left}
.k-md th{background:var(--surface-sunken);font-weight:600}
.k-thinking{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius-full);background:var(--surface-sunken);font:500 13px/18px var(--font-sans);color:var(--ink-muted)}
.k-thinking i{width:6px;height:6px;border-radius:50%;background:var(--running);animation:k-blink 1s ease-in-out infinite}
.k-thinking i:nth-child(2){animation-delay:.2s}.k-thinking i:nth-child(3){animation-delay:.4s}
.k-summary{display:flex;gap:14px;align-items:center;margin:8px 0;padding:12px 14px;border:var(--stroke-1) solid var(--line);border-radius:var(--radius-lg);background:var(--surface-raised)}
.k-summary__ico{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:var(--online-soft);color:var(--online-ink)}
.k-summary.is-failed .k-summary__ico{background:var(--error-soft);color:var(--error-ink)}
.k-summary > div > b{display:block;font:600 14px/20px var(--font-sans)}
.k-summary > div > span{font:500 12px/16px var(--font-mono);color:var(--ink-muted)}
.k-summary .k-btn{margin-left:auto}
.k-mactions{display:flex;gap:2px;margin-top:6px;opacity:.85}
.k-model{position:relative;display:inline-flex}
.k-model__btn{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 10px;border:var(--stroke-1) solid var(--line);border-radius:8px;background:var(--surface-raised);color:var(--ink);font:600 13px/1 var(--font-sans);cursor:pointer}
.k-model__btn:hover{border-color:var(--line-strong)}
.k-model__btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.k-model__btn .k-icon{color:var(--ink-muted)}
.k-model__opt{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--ink);font:500 14px/20px var(--font-sans);text-align:left;cursor:pointer}
.k-model__opt:hover{background:var(--surface-sunken)}
.k-model__opt small{display:block;font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
.k-model__opt.is-on .k-icon--check{color:var(--signal-ink)}
.k-model__opt.is-locked{color:var(--ink-faint);cursor:not-allowed}
.k-model__opt.is-locked small{color:var(--ink-faint)}
.k-model__opt .k-tag{margin-left:auto}
.k-gauge{display:grid;gap:6px}
.k-gauge__top{display:flex;justify-content:space-between;align-items:baseline;font:600 13px/18px var(--font-sans)}
.k-gauge__top > span{font:500 12px/16px var(--font-mono);color:var(--ink-muted)}
.k-gauge .k-progress span{background:var(--tone,var(--signal))}
.k-gauge.is-warn .k-progress span{background:var(--waiting)}
.k-gauge.is-full .k-progress span{background:var(--error)}
.k-gauge__note{font:500 12px/16px var(--font-sans);color:var(--ink-muted)}
.k-gauge.is-warn .k-gauge__note{color:var(--waiting-ink)}
.k-gauge.is-full .k-gauge__note{color:var(--error-ink)}
.k-limit{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:var(--stroke-1) solid var(--line);border-radius:var(--radius-lg);background:var(--waiting-soft)}
.k-limit .k-icon{color:var(--waiting-ink);flex:none;margin-top:2px}
.k-limit b{display:block;font:600 14px/20px var(--font-sans)}
.k-limit p{margin:2px 0 10px;font:400 14px/20px var(--font-sans);color:var(--ink-muted)}
.k-demobadge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--radius-full);background:var(--demo-soft);color:var(--demo-ink);font:600 12px/1 var(--font-sans)}
.k-panel{padding:14px;border:var(--stroke-1) solid var(--line);border-radius:var(--radius-lg);background:var(--surface)}
.k-panel__title{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;font:500 11px/16px var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted)}
.k-recent{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.k-recent li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;font:500 13px/18px var(--font-sans)}
.k-recent li:hover{background:var(--surface-sunken)}
.k-recent li i{width:10px;height:10px;border-radius:3px;background:var(--tone,var(--signal));flex:none}
.k-recent li > span{margin-left:auto;font:500 11px/16px var(--font-mono);color:var(--ink-muted)}
/* Placement de l'atelier. Le cadre de ScreenWorkspace est ici la page entière : ces règles
   ne sont pas des composants, seulement le placement que le kit écrit en styles en ligne
   (aucun style= dans public/) et les replis des colonnes en tiroirs. */
.k-ws{position:relative;overflow:hidden}
.k-ws > .k-backdrop{z-index:2}
.k-ws > .k-drawer{z-index:3}
.k-ws__right.k-drawer{padding-top:0}
.k-ws__right > .k-drawer__head{margin:0 -12px}
.ws-thread{display:flex;flex-direction:column;gap:20px}
.ws-composer{position:relative}
.ws-scrolldown{position:absolute;top:-44px;left:50%;transform:translateX(-50%);z-index:1}
.ws-scrolldown.k-btn:active:not(:disabled){transform:translateX(-50%) translateY(1px)}
.k-wsh__title{min-width:0}
.k-model .k-menu{position:absolute;top:calc(100% + 6px);right:0;width:260px;z-index:5}
.k-model__btn > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-panel-link{font:600 12px/16px var(--font-sans);color:var(--link);text-transform:none;letter-spacing:0}
.ws-clist-empty{margin:24px 12px;font:400 13px/18px var(--font-sans);color:var(--ink-muted);text-align:center}
.k-citem:focus-within .k-citem__x{opacity:1}
.k-clist__foot > div{min-width:0}
.k-clist__foot > div > b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-empty .k-px{width:160px}
.k-empty .k-chips{justify-content:center;margin-top:14px}
.k-md{overflow-wrap:anywhere}
.k-md pre code{font:inherit;padding:0;border-radius:0;background:none}
.k-code .hljs-comment,.k-code .hljs-quote{color:var(--on-inverse-muted);font-style:italic}
.k-amsg .k-alert{margin-top:8px}
.ws-overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center}
.ws-nav-btn,.ws-panel-btn{display:none}
@media (max-width:1180px){
  .k-ws{grid-template-columns:260px minmax(0,1fr)}
  .ws-panel-btn{display:inline-flex}
}
@media (max-width:900px){
  .k-ws{grid-template-columns:minmax(0,1fr)}
  .ws-nav-btn{display:inline-flex}
  .k-wsh{gap:6px;padding:0 8px}
  .k-wsh__title{flex:1}
  .k-wsh__tools{gap:2px}
  .k-model__btn{max-width:132px}
  .k-ws__feed{padding:16px}
  .k-ws__composer{padding:10px 12px 12px}
}
/* Téléphone : le sélecteur de modèle se réduit à son icône (son nom reste dans aria-label) ;
   dans le fil, une ligne d'action garde sa description (le type, toujours « script », s'efface). */
@media (max-width:520px){
  .k-model__btn > span{display:none}
  .k-amsg .k-act__type{display:none}
  .k-amsg .k-act__path{max-width:45%}
}
@keyframes k-blink{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.k-thinking i{animation:none!important}}

/* ============ 20. Kit Bloko — connexions =================================
   Porté de docs/designs/kit/components/bundle.css (§ Connexions) : k-pair*,
   k-ext*, k-devices*, k-onb*. Sélecteurs inchangés, aucun composant redéfini.
   Aucune de ces règles n'anime : rien à ajouter aux @keyframes ni au repli
   prefers-reduced-motion. */
.k-pair{text-align:center}
.k-pair__code{display:flex;justify-content:center;gap:8px;margin:18px 0 8px}
.k-pair__code b{width:48px;height:60px;display:grid;place-items:center;border:var(--stroke-1) solid var(--line);border-radius:12px;background:var(--surface-sunken);font:700 30px/1 var(--font-display)}
.k-pair__code b:nth-child(4){margin-left:10px}
.k-pair__code.is-expired b{color:var(--ink-faint);text-decoration:line-through}
.k-pair__timer{display:inline-flex;align-items:center;gap:8px;font:500 13px/18px var(--font-mono);color:var(--ink-muted)}
.k-pair__timer i{width:6px;height:6px;border-radius:50%;background:var(--waiting);flex:none}
.k-pair__steps{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px;text-align:left}
.k-pair__steps li{display:flex;gap:10px;align-items:center;padding:10px 12px;border:var(--stroke-1) solid var(--line);border-radius:10px;font:500 14px/20px var(--font-sans)}
.k-pair__steps li b{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;background:var(--surface-inverse);color:var(--on-inverse);font:700 12px/1 var(--font-display)}
.k-pair__steps li.is-done{color:var(--ink-muted)}
.k-pair__steps li.is-done b{background:var(--online);color:#0f1424}
.k-pair__ok{display:grid;justify-items:center;gap:8px;padding:12px 0}
.k-pair__ok .k-ok{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:var(--online-soft);color:var(--online-ink)}
.k-pair__exp{display:grid;justify-items:center;gap:8px;padding:12px 0}
.k-pair__exp .k-ko{width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:var(--error-soft);color:var(--error-ink)}
.k-pair__ok h3,.k-pair__exp h3{margin:6px 0 0;font:700 20px/26px var(--font-display);letter-spacing:-.015em}
.k-pair__ok p,.k-pair__exp p{margin:0;font:400 14px/20px var(--font-sans);color:var(--ink-muted)}
.k-ext{display:flex;align-items:center;gap:12px;padding:14px 16px;border:var(--stroke-1) solid var(--line);border-radius:var(--radius-lg);background:var(--surface-raised)}
.k-ext__ico{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:var(--surface-sunken);color:var(--ink);flex:none}
.k-ext > div > b{display:block;font:600 14px/20px var(--font-sans)}
.k-ext > div > span{font:400 13px/18px var(--font-sans);color:var(--ink-muted)}
.k-ext__act{margin-left:auto;display:flex;gap:6px;align-items:center}
.k-devices{list-style:none;margin:0;padding:0;border:var(--stroke-1) solid var(--line);border-radius:var(--radius-lg);background:var(--surface-raised);overflow:hidden}
.k-devices li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:var(--stroke-1) solid var(--line)}
.k-devices li:last-child{border-bottom:0}
.k-devices__ico{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:var(--surface-sunken);color:var(--ink-muted);flex:none}
.k-devices li > div > b{display:block;font:600 14px/20px var(--font-sans)}
.k-devices li > div > span{font:500 12px/16px var(--font-mono);color:var(--ink-muted)}
.k-devices .k-btn{margin-left:auto}
.k-onb{display:grid;gap:8px}
.k-onb__item{display:flex;align-items:center;gap:12px;padding:12px 14px;border:var(--stroke-1) solid var(--line);border-radius:12px;background:var(--surface-raised)}
.k-onb__item.is-done{background:var(--surface-sunken);color:var(--ink-muted)}
.k-onb__item.is-done b{text-decoration:line-through}
.k-onb__box{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;border:var(--stroke-1) solid var(--line-strong)}
.k-onb__item.is-done .k-onb__box{background:var(--online);border-color:var(--online);color:#0f1424}
.k-onb__item.is-now{border-color:var(--signal);box-shadow:0 0 0 3px var(--signal-soft)}
.k-onb__item > div > b{display:block;font:600 14px/20px var(--font-sans)}
.k-onb__item > div > span{font:400 13px/18px var(--font-sans);color:var(--ink-muted)}
.k-onb .k-btn{margin-left:auto}
.k-onb__progress{display:flex;align-items:center;gap:10px;margin-bottom:12px;font:500 12px/16px var(--font-mono);color:var(--ink-muted)}
.k-onb__progress .k-progress{flex:1}

/* Mise en page propre à /connexions : deux colonnes, une seule sous 900 px. */
.conn-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.conn-code{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:18px}
.conn-code .k-input{width:170px;text-align:center;font-family:var(--font-mono);font-size:20px;letter-spacing:.14em}
@media (max-width:900px){
  .conn-cols{grid-template-columns:1fr}
}
/* Repli téléphone : six cases de 48 px débordent d'un écran de 375 px. Seule la taille
   change, jamais la forme du composant. */
@media (max-width:480px){
  .k-pair__code{gap:6px}
  .k-pair__code b{width:40px;height:52px;font-size:26px}
  .conn-code .k-input{width:150px}
}

/* ============ 21. Kit Bloko — Skeleton ====================================
   Porté tel quel de docs/designs/kit/components/bundle.css (§ Skeleton) :
   sélecteurs et déclarations inchangés, aucun composant redéfini. Sert aux
   pastilles d'état de l'atelier tant que l'API n'a pas répondu — rien n'est
   deviné. L'animation retombe sur la règle globale prefers-reduced-motion. */
.k-skel{display:block;border-radius:6px;background:linear-gradient(90deg,var(--surface-sunken) 25%,var(--line) 50%,var(--surface-sunken) 75%);background-size:200% 100%;animation:k-shimmer 1.4s linear infinite}
.k-skel--text{height:12px;margin:5px 0}
.k-skel--circle{border-radius:50%}
@keyframes k-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}