/* =====================================================================
   Studio Kaylei · Espace client · DA v3 (« style Susty Hood », oct. 2026)
   Bordeaux profond, rose poudré, crème chaud. Titres Cherry Bomb One en
   capitales, petits mots manuscrits en Borel, texte en Archivo.
   Charge APRÈS app.css et da.css : on ne réécrit rien, on surcharge.
   Les autres palettes (Layali, Sable…) restent disponibles par espace.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  1. JETONS                                                          */
/* ------------------------------------------------------------------ */
:root{
  --f-script: var(--f-texte);
  --rebond: cubic-bezier(.34,1.8,.64,1);
  --entree: cubic-bezier(.19,1,.22,1);
  --penche-survol: -1.5deg;
  --penche-carte: -.6deg;
  --penche-mot: -3deg;
  --r-md: 16px; --r-lg: 22px; --r-xl: 28px; --r-section: 30px;
}
:root:not([data-mode="nuit"]){
  --sh-sm: 0 1px 2px rgba(74,18,24,.05);
  --sh-md: 0 10px 24px rgba(74,18,24,.10);
  --sh-lg: 0 16px 32px rgba(74,18,24,.13);
  --sh-modal: 0 24px 50px rgba(58,14,19,.25);
}

/* palette Kaylei v3 */
:root[data-palette="kaylei"]{
  --rose:#E8B7C3; --gold:#D79AAA; --brand-nuit:#E8B7C3; --clay-nuit:#F3CBD5;
  --wash-a:rgba(232,183,195,.30); --wash-b:rgba(246,220,227,.55);
}
:root[data-palette="kaylei"]:not([data-mode="nuit"]){
  --brand:#4A1218; --brand-deep:#3A0E13; --clay:#5C1B22;
  --surface:#F7F0E6; --card:#FDF9F3; --card-elevated:#FDF9F3;
  --line:rgba(74,18,24,.13);
  --ink:#2B151A; --ink-70:#5A3D42; --ink-45:#7A6560;
  --brand-ink:#F3CBD5;
  --rose-bg:#F6DCE3; --brand-bg:rgba(74,18,24,.07); --gold-bg:rgba(232,183,195,.28);
  --ok:#2F6B45; --danger:#9B1C2C;
  --ok-bg:rgba(47,107,69,.10); --danger-bg:rgba(155,28,44,.09);
}

/* ------------------------------------------------------------------ */
/*  2. TYPO                                                            */
/* ------------------------------------------------------------------ */
body{font-family:var(--f-texte);font-size:16px;line-height:1.6;letter-spacing:0}
h1,h2,h3,h4{font-family:var(--f-texte)}

/* les titres Cherry Bomb : toujours en capitales, interlignage serré */
:root[data-polices="kaylei"] .t-display,
:root[data-polices="kaylei"] .hero .hello,
:root[data-polices="kaylei"] .empty h3,
:root[data-polices="kaylei"] .t-h1,
:root[data-polices="kaylei"] .modal > .t-h2,
:root[data-polices="kaylei"] .modal > .row > .t-h2,
:root[data-polices="kaylei"] .modal > div > .t-h2:first-child{
  font-family:var(--f-titre);font-weight:400;font-style:normal;
  text-transform:uppercase;letter-spacing:.01em;line-height:1.06;
  text-wrap:balance;color:var(--brand);
}
:root[data-polices="kaylei"] .t-display{font-size:clamp(30px, 1rem + 2.6vw, 50px)}
:root[data-polices="kaylei"] .hero .hello{font-size:clamp(32px, 1rem + 3vw, 56px)}
:root[data-polices="kaylei"] .empty h3{font-size:22px}
:root[data-polices="kaylei"] .modal .t-h2{font-size:24px}
:root[data-mode="nuit"] .t-display,
:root[data-mode="nuit"] .hero .hello,
:root[data-mode="nuit"] .empty h3{color:var(--brand)}

/* le mot manuscrit glissé dans un titre */
.mot-penche{font-family:var(--f-script);text-transform:none;display:inline-block;
  transform:rotate(var(--penche-mot));font-size:.86em;line-height:1;margin:0 .08em;color:var(--clay)}
:root[data-mode="nuit"] .mot-penche{color:var(--rose)}

/* salutation */
.bonjour{font-family:var(--f-script);font-size:1.25rem;line-height:1.8;color:var(--clay);margin-bottom:2px}
:root[data-mode="nuit"] .bonjour{color:var(--rose)}

.t-h2{font-weight:700;letter-spacing:-.01em}
.t-h3{font-weight:700;letter-spacing:-.005em}
.page-head .dim{font-size:16px;max-width:64ch}
:root[data-polices="kaylei"] .page-head::after{display:none}
.page-head{padding-bottom:0}

/* sur-titres et labels : la voix manuscrite */
:root[data-polices="kaylei"] .card-title,
:root[data-polices="kaylei"] .label,
:root[data-polices="kaylei"] .kpi .k-lbl,
:root[data-polices="kaylei"] .rail-groupe,
:root[data-polices="kaylei"] .objective .lbl,
:root[data-polices="kaylei"] .esp-lbl{
  font-family:var(--f-script);font-weight:400;text-transform:none;letter-spacing:0;line-height:1.7;
}
:root[data-polices="kaylei"] .card-title{font-size:15px;color:var(--clay)}
:root[data-mode="nuit"] .card-title{color:var(--rose)}
:root[data-polices="kaylei"] .label{font-size:15px;color:var(--brand);margin-bottom:4px}
:root[data-polices="kaylei"] .kpi .k-lbl{font-size:14px;color:var(--clay)}
:root[data-polices="kaylei"] .kpi .k-val,
:root[data-polices="kaylei"] .chiffre-xxl{font-family:var(--f-titre);letter-spacing:0;color:var(--brand)}

/* l'objectif du mois et les questions restent en texte : trop longs pour des capitales */
:root[data-polices="kaylei"] .objective .txt{font-family:var(--f-texte);font-weight:600;font-style:normal;
  letter-spacing:-.01em;font-size:clamp(19px, 1.9vw, 25px);line-height:1.35;font-variation-settings:normal}
:root[data-polices="kaylei"] .onb-q{font-family:var(--f-texte);font-weight:700;font-style:normal;
  letter-spacing:-.015em;color:var(--brand);font-variation-settings:normal}
:root[data-polices="kaylei"] .ct-hook{font-family:var(--f-texte);font-style:italic;font-size:12.5px}
:root[data-polices="kaylei"] .serif{font-family:var(--f-script);font-style:normal;text-transform:lowercase}

/* ------------------------------------------------------------------ */
/*  3. BOUTONS, PASTILLES, CHAMPS                                      */
/* ------------------------------------------------------------------ */
.btn{border-radius:999px;transition:background .2s,color .2s,box-shadow .2s,transform .3s var(--rebond)}
.btn:hover{transform:scale(1.04) rotate(var(--penche-survol));text-decoration:none}
.btn:active{transform:scale(.98)}
.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
:root[data-polices="kaylei"] .btn{font-family:var(--f-script);font-weight:400;font-size:16px;
  height:auto;min-height:46px;padding:8px 22px 3px;line-height:1.6;letter-spacing:0}
:root[data-polices="kaylei"] .btn-sm{font-size:14px;min-height:38px;padding:6px 16px 2px}
:root[data-polices="kaylei"] .btn-lg{font-size:17px;min-height:54px;padding:10px 28px 4px}

.btn-primary{background:var(--brand);color:var(--brand-ink);border-color:transparent}
.btn-primary:hover{background:var(--clay)}
.btn-secondary{background:var(--rose);color:var(--brand);border-color:transparent}
.btn-secondary:hover{background:color-mix(in srgb, var(--rose) 82%, #fff);border-color:transparent;color:var(--brand)}
.btn-ghost{color:var(--brand)}
.btn-ghost:hover{background:var(--rose-bg)}
:root[data-mode="nuit"] .btn-secondary{color:#2B151A}
:root[data-mode="nuit"] .btn-ghost{color:var(--rose)}

.badge{border-radius:999px}
:root[data-polices="kaylei"] .badge{font-family:var(--f-script);font-weight:400;text-transform:none;
  letter-spacing:0;font-size:12.5px;height:auto;min-height:24px;padding:3px 11px 0;line-height:1.7}
:root[data-polices="kaylei"] .badge::before{margin-top:-3px}
.badge.brand{background:var(--rose-bg);color:var(--brand)}

.pastille,.par-elle{display:inline-flex;align-items:center;border-radius:999px;
  background:var(--rose-bg);color:var(--brand);font-size:12px;padding:2px 10px;line-height:1.7}
:root[data-polices="kaylei"] .pastille,
:root[data-polices="kaylei"] .par-elle{font-family:var(--f-script);font-weight:400;text-transform:none;letter-spacing:0;height:auto;padding:3px 10px 0}
:root[data-mode="nuit"] .pastille,:root[data-mode="nuit"] .par-elle{background:rgba(232,183,195,.16);color:var(--rose)}

.chip,.ct-bar .f{border-radius:999px;transition:background .2s,color .2s,border-color .2s,transform .3s var(--rebond)}
.chip:hover,.ct-bar .f:hover{transform:rotate(var(--penche-survol))}
:root[data-polices="kaylei"] .chip,
:root[data-polices="kaylei"] .ct-bar .f{font-family:var(--f-script);font-size:14px;padding:7px 16px 3px;line-height:1.6}
.chip.on,.ct-bar .f.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:400}

.input,.textarea,.select{border:1.5px solid var(--line);border-radius:16px;background:var(--card-elevated);color:var(--ink)}
.input:focus,.textarea:focus,.select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg)}
.input::placeholder,.textarea::placeholder{color:#A8928E}
.icon-btn{border-radius:999px;border-color:var(--line);background:var(--card-elevated)}

:focus-visible{outline:3px solid var(--brand);outline-offset:3px;box-shadow:none}
:root[data-mode="nuit"] :focus-visible{outline-color:var(--rose)}
.input:focus-visible,.textarea:focus-visible,.select:focus-visible{outline:none}

a{color:var(--brand)}
:root[data-mode="nuit"] a{color:var(--rose)}
.lien-txt{text-decoration:underline;text-underline-offset:2px;word-break:break-word}

/* ------------------------------------------------------------------ */
/*  4. CARTES ET BLOCS                                                 */
/* ------------------------------------------------------------------ */
.card{border-radius:var(--r-lg);box-shadow:none;border-color:var(--line)}
.card::before{display:none}
.card.click{transition:transform .3s var(--rebond),box-shadow .25s,border-color .25s}
.card.click:hover{transform:translateY(-4px) rotate(var(--penche-carte));box-shadow:var(--sh-lg);border-color:var(--rose)}
.kpi{border-radius:var(--r-lg);border-color:var(--line);box-shadow:none}
.kpi:hover{transform:translateY(-3px) rotate(var(--penche-carte))}

/* bloc plein bordeaux : l'objectif du mois */
.objective{border-radius:var(--r-section);background:var(--brand);color:var(--brand-ink);padding:clamp(24px,4vw,44px)}
.objective::after{background:radial-gradient(circle at 60% 40%, rgba(232,183,195,.28), transparent 62%)}
.objective .lbl{color:var(--rose);font-size:16px;margin-bottom:6px}
.prio{background:rgba(243,203,213,.08);border-color:rgba(243,203,213,.22);border-radius:18px}
.prio b{color:var(--rose)}
:root[data-polices="kaylei"] .prio b{font-family:var(--f-script);font-weight:400;letter-spacing:0;font-size:14px}

/* carte d'action : bloc rose poudré, texte bordeaux */
.action{background:var(--rose-bg);border:none;border-radius:var(--r-lg);padding:18px 22px;box-shadow:none;
  transition:transform .3s var(--rebond),box-shadow .25s}
.action:hover{transform:translateY(-3px) rotate(var(--penche-carte));box-shadow:var(--sh-md)}
.action .ic{border-radius:999px;background:var(--brand);color:var(--rose);font-size:18px}
.action .ttl{font-weight:700;font-size:17px;color:var(--brand)}
.action .sub{color:var(--ink-70)}
:root[data-mode="nuit"] .action{background:rgba(232,183,195,.10)}
:root[data-mode="nuit"] .action .ttl{color:var(--rose)}

.next-step{border:none;background:var(--card);border-radius:var(--r-lg);outline:2px solid var(--brand);outline-offset:-2px}
.tuile{border-radius:var(--r-lg);transition:transform .3s var(--rebond),box-shadow .25s,border-color .25s}
.tuile:hover{transform:translateY(-4px) rotate(var(--penche-carte));box-shadow:var(--sh-lg)}
.tuile .ic{color:var(--brand)}
.scope{border-radius:999px}
.todo-item .dot.brand{background:var(--rose);box-shadow:0 0 0 2px var(--brand)}

.modal{border-radius:var(--r-xl);background:var(--card-elevated)}
.veil{background:rgba(43,15,20,.45)}

.toast{border-radius:999px;background:#3A0E13;color:#F3CBD5;padding:12px 20px}
.toast.ok{background:var(--ok);color:#F7F0E6}
.toast.err{background:var(--danger);color:#F7F0E6}
.saved{border-radius:999px}

.empty .ic{color:var(--brand);opacity:.35}

/* ------------------------------------------------------------------ */
/*  5. RAIL BORDEAUX + BARRE HAUTE                                     */
/* ------------------------------------------------------------------ */
:root:not([data-mode="nuit"]) .rail{background:var(--brand);border-right:none;color:var(--brand-ink)}
:root[data-mode="nuit"] .rail{background:#1A1213}
.rail-brand{color:var(--rose);padding-bottom:4px}
:root[data-polices="kaylei"] .rail-brand,
:root[data-polices="kaylei"] .auth-brand{font-family:var(--f-script);font-weight:400;text-transform:lowercase;
  letter-spacing:0;font-size:24px;line-height:1.6}
:root[data-polices="kaylei"] .rail-brand span,
:root[data-polices="kaylei"] .auth-brand span{font-family:inherit;font-style:normal;font-variation-settings:normal}
.rail-sub{color:color-mix(in srgb, var(--brand-ink) 70%, transparent);letter-spacing:.18em}
:root[data-mode="nuit"] .rail-sub{color:var(--ink-45)}
.rail .rail-groupe{color:color-mix(in srgb, var(--brand-ink) 62%, transparent);font-size:14px;padding:14px 12px 2px}
:root[data-mode="nuit"] .rail .rail-groupe{color:var(--ink-45)}
.rail .nav-item{color:color-mix(in srgb, var(--brand-ink) 84%, transparent);border-radius:999px;font-weight:500}
.rail .nav-item:hover{background:rgba(243,203,213,.10);color:var(--brand-ink)}
.rail .nav-item.active{background:var(--rose);color:#4A1218;font-weight:700}
.rail .nav-item.active::before{display:none}
.rail .nav-item .ic{opacity:.9}
:root[data-mode="nuit"] .rail .nav-item{color:var(--ink-70)}
:root[data-mode="nuit"] .rail .nav-item.active{background:var(--rose);color:#2B151A}
.rail .nav-badge{background:var(--rose);color:#4A1218}
.rail .nav-item.active .nav-badge{background:#4A1218;color:var(--rose)}
.rail-foot{border-top-color:rgba(243,203,213,.22);color:color-mix(in srgb, var(--brand-ink) 70%, transparent)}
.rail-foot > div:first-child{color:var(--brand-ink) !important}
.rail-foot .btn-ghost{color:var(--rose);min-height:0;font-size:14px}
.rail-foot .btn-ghost:hover{background:none;transform:none;text-decoration:underline}
:root[data-mode="nuit"] .rail-foot{border-top-color:var(--line)}
.rail .esp{border-bottom-color:rgba(243,203,213,.22)}
.rail .esp-lbl{color:color-mix(in srgb, var(--brand-ink) 70%, transparent);font-size:14px}
.rail .esp-sel{background-color:var(--rose-bg);color:#4A1218;border-color:transparent;border-radius:999px}
.rail::-webkit-scrollbar{width:6px}
.rail::-webkit-scrollbar-thumb{background:rgba(243,203,213,.25);border-radius:6px}

:root[data-polices="kaylei"] .tb-fil{font-family:var(--f-script);font-size:14px}
:root[data-polices="kaylei"] .tb-fil b{font-weight:400;color:var(--brand)}
.tb-btn{border-radius:999px}

/* ------------------------------------------------------------------ */
/*  6. CONNEXION                                                       */
/* ------------------------------------------------------------------ */
.auth{background:radial-gradient(900px 500px at 85% -10%, var(--rose-bg), transparent 60%), var(--surface)}
.auth-card{border-radius:var(--r-xl);border:none;box-shadow:var(--sh-lg);background:var(--card)}
.auth-brand{color:var(--brand)}
:root[data-polices="kaylei"] .auth-card .t-xs{font-family:var(--f-script);text-transform:none;letter-spacing:0;font-size:15px;font-weight:400;color:var(--clay)}

/* ------------------------------------------------------------------ */
/*  7. CONTENUS · CÔTÉ CLIENTE                                         */
/* ------------------------------------------------------------------ */
.onglets{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 24px}
.onglet{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:transparent;
  color:var(--ink-70);border-radius:999px;padding:8px 18px;font-size:15px;cursor:pointer;font-family:var(--f-texte);
  font-weight:600;transition:background .2s,color .2s,transform .3s var(--rebond)}
:root[data-polices="kaylei"] .onglet{font-family:var(--f-script);font-weight:400;padding:9px 20px 4px}
.onglet:hover{transform:rotate(var(--penche-survol));border-color:var(--brand);color:var(--brand)}
.onglet.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.onglet-n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:var(--rose);color:#4A1218;font-family:var(--f-texte);font-weight:700;font-size:12px;line-height:1}
:root[data-polices="kaylei"] .onglet-n{margin-top:-4px}

.compteur-idees{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:14px;font-size:15px}
.compteur-idees b{font-family:var(--f-titre);font-weight:400;font-size:24px;color:var(--brand);margin-right:2px}

.idee{display:flex;gap:18px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:20px 22px;transition:transform .3s var(--rebond),box-shadow .25s,border-color .2s,opacity .2s}
.idee:hover{box-shadow:var(--sh-md)}
.idee.oui{border-color:transparent;outline:2px solid var(--brand);outline-offset:-2px}
.idee.non{opacity:.62}
.idee.non:hover{opacity:1}
.idee-corps{flex:1;min-width:0}
.idee-titre{margin-bottom:4px;color:var(--ink)}
.idee-hook{font-style:italic;color:var(--ink-70);font-size:14.5px;margin-top:8px}
.idee-angle{margin:8px 0 0;white-space:pre-wrap}
.idee-pied{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}

.coche{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;
  cursor:pointer;padding:0;width:72px;font-family:inherit;color:var(--brand)}
.coche-rond{display:grid;place-items:center;width:46px;height:46px;border-radius:999px;border:2px solid var(--brand);
  background:var(--card-elevated);color:var(--rose);font-size:22px;font-weight:700;line-height:1;
  transition:background .2s,transform .3s var(--rebond)}
.coche:hover .coche-rond{transform:scale(1.08) rotate(-6deg);background:var(--rose-bg)}
.coche[aria-checked="true"] .coche-rond{background:var(--brand);color:var(--rose)}
.coche-lbl{font-size:12.5px;line-height:1.5;text-align:center}
:root[data-polices="kaylei"] .coche-lbl{font-family:var(--f-script);font-size:13px;line-height:1.7}
:root[data-mode="nuit"] .coche,
:root[data-mode="nuit"] .coche-rond{color:var(--rose);border-color:var(--rose)}
:root[data-mode="nuit"] .coche[aria-checked="true"] .coche-rond{background:var(--rose);color:#2B151A}

.lien-btn{background:none;border:none;padding:0;cursor:pointer;color:var(--ink-45);font-size:14px;
  text-decoration:underline;text-underline-offset:3px;font-family:var(--f-texte)}
:root[data-polices="kaylei"] .lien-btn{font-family:var(--f-script);font-size:14px}
.lien-btn:hover{color:var(--brand)}

/* ------------------------------------------------------------------ */
/*  8. LIENS SUR LES IDÉES                                             */
/* ------------------------------------------------------------------ */
.liens{margin-top:10px}
.liens-liste{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.lien{display:inline-flex;align-items:center;gap:6px;max-width:100%;background:var(--rose-bg);
  border-radius:999px;padding:4px 6px 4px 12px;font-size:13px}
.lien a{color:var(--brand);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;text-decoration:none}
.lien a:hover{text-decoration:underline}
.lien-fl{margin-right:4px}
.lien-par{font-size:11.5px;color:var(--ink-45)}
:root[data-polices="kaylei"] .lien-par{font-family:var(--f-script);line-height:1.5}
.lien-x{width:22px;height:22px;border-radius:999px;border:none;background:rgba(74,18,24,.08);color:var(--brand);
  cursor:pointer;font-size:14px;line-height:1;display:grid;place-items:center}
.lien-x:hover{background:var(--brand);color:var(--rose)}
:root[data-mode="nuit"] .lien{background:rgba(232,183,195,.14)}
:root[data-mode="nuit"] .lien a{color:var(--rose)}
.liens-plus{background:none;border:none;padding:2px 0;cursor:pointer;color:var(--brand);font-size:14px;
  text-decoration:underline dotted;text-underline-offset:4px;font-family:var(--f-texte)}
:root[data-polices="kaylei"] .liens-plus{font-family:var(--f-script)}
:root[data-mode="nuit"] .liens-plus{color:var(--rose)}
.liens-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.liens-form .input{flex:1 1 220px;min-height:42px;font-size:14.5px}

/* ------------------------------------------------------------------ */
/*  9. FICHIERS                                                        */
/* ------------------------------------------------------------------ */
.fichiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.fi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .3s var(--rebond),box-shadow .25s}
.fi:hover{transform:translateY(-4px) rotate(var(--penche-carte));box-shadow:var(--sh-lg)}
.fi.neuf{border-color:transparent;outline:2px solid var(--brand);outline-offset:-2px}
.fi-apercu{position:relative;display:grid;place-items:center;aspect-ratio:4/3;background:var(--rose-bg);overflow:hidden;text-decoration:none}
.fi-apercu img,.fi-apercu video{width:100%;height:100%;object-fit:cover;display:block}
.fi-ext{font-family:var(--f-titre);font-size:30px;color:var(--brand);letter-spacing:.02em}
.fi-play{position:absolute;inset:auto auto 12px 12px;width:38px;height:38px;border-radius:999px;display:grid;place-items:center;
  background:var(--brand);color:var(--rose);font-size:14px;padding-left:3px;box-shadow:var(--sh-md)}
.fi-corps{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.fi-nom{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi-meta{font-size:12.5px;color:var(--ink-45)}
.fi-corps .pastille{align-self:flex-start;margin-top:2px}
.fi-err{font-size:12.5px;color:var(--danger);margin:4px 0 0;line-height:1.45}
.fi-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:10px}
:root[data-mode="nuit"] .fi-apercu{background:rgba(232,183,195,.10)}

/* ------------------------------------------------------------------ */
/*  10. CONTENUS · BACK-OFFICE                                         */
/* ------------------------------------------------------------------ */
.etapes{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:-6px 0 20px;padding:14px 20px;
  background:var(--rose-bg);border-radius:var(--r-lg)}
.etapes li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--brand)}
.etapes li b{display:grid;place-items:center;width:26px;height:26px;border-radius:999px;background:var(--brand);
  color:var(--rose);font-family:var(--f-titre);font-weight:400;font-size:14px}
.etape-n{font-weight:400;font-size:12.5px;color:var(--ink-70);background:var(--card-elevated);border-radius:999px;padding:1px 9px}
.etape-n.on{background:var(--brand);color:var(--brand-ink)}
:root[data-polices="kaylei"] .etape-n{font-family:var(--f-script);padding:3px 10px 0;line-height:1.6}
:root[data-mode="nuit"] .etapes{background:rgba(232,183,195,.10)}
:root[data-mode="nuit"] .etapes li{color:var(--rose)}

.board{grid-template-columns:repeat(5,minmax(176px,1fr));gap:12px;overflow-x:auto;padding-bottom:6px}
.voie{background:color-mix(in srgb, var(--rose-bg) 55%, var(--surface));border:none;border-radius:var(--r-lg);padding:12px}
.voie-oui{background:color-mix(in srgb, var(--ok-bg) 70%, var(--surface))}
.voie.survol{background:var(--rose-bg);outline:2px dashed var(--brand);outline-offset:-2px}
.voie h3{align-items:flex-start;gap:8px;margin-bottom:10px}
.voie h3 > span{display:flex;flex-direction:column}
:root[data-polices="kaylei"] .voie h3{font-family:var(--f-titre);font-weight:400;font-size:14.5px;letter-spacing:.02em;color:var(--brand);line-height:1.1}
.voie h3 small{font-family:var(--f-script);text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--ink-45);line-height:1.6;margin-top:2px}
.voie h3 em{background:var(--card-elevated);border-radius:999px;min-width:26px;height:26px;display:grid;place-items:center;
  font-family:var(--f-texte);font-size:12.5px;color:var(--brand);padding:0 6px}
.voie-vide{border:1.5px dashed var(--line);border-radius:16px;font-size:13px}
:root[data-polices="kaylei"] .voie-vide{font-family:var(--f-script);line-height:1.7}
.voie-note{font-size:12px;line-height:1.45;background:var(--card-elevated);border-radius:14px;padding:8px 10px;margin-bottom:8px;color:var(--ink-70)}
.ct{border-radius:16px;background:var(--card-elevated);border-color:var(--line);box-shadow:none;
  transition:transform .3s var(--rebond),box-shadow .25s,opacity .2s}
.ct:hover{transform:translateY(-3px) rotate(var(--penche-carte));box-shadow:var(--sh-md)}
.ct-titre{font-size:14px;font-weight:700}
.ct-avis{display:inline-flex;margin-top:7px;font-size:12px;border-radius:999px;padding:2px 9px;line-height:1.6}
:root[data-polices="kaylei"] .ct-avis{font-family:var(--f-script);padding:3px 10px 0}
.ct-avis.att{background:rgba(122,101,96,.12);color:var(--ink-70)}
.ct-avis.oui{background:var(--ok-bg);color:var(--ok)}
.ct-avis.non{background:var(--danger-bg);color:var(--danger)}
.ct-liens{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.ct-liens a{font-size:11.5px;font-weight:600;background:var(--rose-bg);color:var(--brand);border-radius:999px;padding:2px 9px;text-decoration:none}
.ct-lancer{width:100%;margin-top:9px}
.ct-tag{border-radius:999px}

@media (max-width:1080px){.board{grid-template-columns:repeat(5,minmax(220px,1fr))}}
@media (max-width:760px){.board{grid-template-columns:1fr;overflow:visible}}

/* ------------------------------------------------------------------ */
/*  11. MOBILE                                                         */
/* ------------------------------------------------------------------ */
@media (max-width:860px){
  :root[data-polices="kaylei"] .rail-brand{display:none}
}
@media (max-width:560px){
  .toasts{bottom:92px}
  .rail{border-top:none}
  .rail .nav-item{border-radius:14px}
  .idee{padding:16px;gap:12px}
  .coche{width:56px}
  .coche-rond{width:40px;height:40px}
  .fichiers{grid-template-columns:1fr 1fr;gap:10px}
  .fi-corps{padding:10px 12px 12px}
  .fi-actions .btn{flex:1 1 100%}
  .etapes{padding:12px 14px;gap:8px 14px}
  .onglet{padding:8px 14px 3px;font-size:14px}
  .lien a{max-width:150px}
}

/* ------------------------------------------------------------------ */
/*  12. MOUVEMENT                                                      */
/* ------------------------------------------------------------------ */
:root[data-motion="doux"] .btn:hover,
:root[data-motion="doux"] .card.click:hover,
:root[data-motion="doux"] .tuile:hover,
:root[data-motion="doux"] .ct:hover,
:root[data-motion="doux"] .fi:hover,
:root[data-motion="doux"] .action:hover,
:root[data-motion="doux"] .chip:hover,
:root[data-motion="doux"] .onglet:hover{transform:none}
@media (prefers-reduced-motion:reduce){
  .btn:hover,.card.click:hover,.tuile:hover,.ct:hover,.fi:hover,.action:hover,
  .chip:hover,.onglet:hover,.kpi:hover,.coche:hover .coche-rond{transform:none !important}
}

/* sélecteur de statut dans les cartes du tableau : discret */
.ct .select.ct-statut{min-height:34px;font-size:12.5px;padding:4px 28px 4px 12px;border-radius:999px;margin-top:2px}
.onglet.on .onglet-n{background:var(--card-elevated);color:var(--brand)}