/*
 * Diapason x NXTFRAME — design tokens et composants (valeurs reprises du prototype HTML).
 * Les écrans peuvent ajouter leurs propres fichiers dans ce dossier (tous chargés via :app).
 */

/* ---------- Tokens ---------- */
:root, [data-theme="light"] {
  --bg:#F4F4F1; --surface:#FFFFFF; --surface-2:#F5F6F3; --border:#EAECE8; --border-strong:#D9DDD8;
  --text:#23292B; --muted:#687174; --faint:#9AA2A4; --ink:#2F3638; --ink-fg:#FFFFFF; --card-bd:#EEEFEC;
  --card-sh:0 1px 2px rgba(30,40,40,.03),0 8px 24px rgba(30,40,40,.04);
  --nx:#5557A6; --nx-bg:#ECECFB; --dia:#2C7A71; --dia-bg:#DDF3EE; --sm:#3B6897; --sm-bg:#E2EDF9; --ab:#94661B; --ab-bg:#FBF0D5;
  --ok:#2E7A4E; --ok-bg:#DEF3E4; --warn:#A2601A; --warn-bg:#FDEAD5; --bad:#BD4538; --bad-bg:#FCE3DE; --neutral:#687174; --neutral-bg:#EFF1EE;
  --overlay:rgba(30,40,40,.3); --on-solid:#FFFFFF;
}
[data-theme="dark"] {
  --bg:#16191A; --surface:#1E2223; --surface-2:#252A2B; --border:#2E3435; --border-strong:#3C4344;
  --text:#ECEFEF; --muted:#A5ADAF; --faint:#7D8688; --ink:#E7ECEC; --ink-fg:#1A1E1F; --card-bd:#2B3132; --card-sh:none;
  --nx:#BDBEF5; --nx-bg:#2D2E4A; --dia:#8AD6CB; --dia-bg:#1E3834; --sm:#A9C8EE; --sm-bg:#233447; --ab:#EACB8A; --ab-bg:#3B3222;
  --ok:#94D9A9; --ok-bg:#1F3628; --warn:#F2BE82; --warn-bg:#3D2F1D; --bad:#F4A195; --bad-bg:#40251F; --neutral:#A5ADAF; --neutral-bg:#2A3031;
  --overlay:rgba(0,0,0,.55); --on-solid:#16191A;
}
:root { --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.3,1.35,.5,1); }

/* ---------- Base ---------- */
html, body { margin:0; }
html { background:var(--bg); color-scheme:light; }
html[data-theme="dark"] { color-scheme:dark; }
body { font-family:'DM Sans',system-ui,sans-serif; font-size:14px; -webkit-font-smoothing:antialiased; background:var(--bg); color:var(--text); min-height:100vh; }
* { box-sizing:border-box; }
a { color:inherit; text-underline-offset:2px; }
a:hover { color:var(--nx); }
button, input, select, textarea { font:inherit; color:inherit; }
[hidden] { display:none !important; } /* l'attribut hidden l'emporte sur un display inline (palette ⌘K…) */
input::placeholder, textarea::placeholder { color:var(--faint); }
select { background:var(--surface); appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%) !important;
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50% !important; background-size:5px 5px !important; background-repeat:no-repeat !important; padding-right:30px !important; }
button, a, select, input, textarea, [draggable], tr, section {
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background-color .18s, color .18s, border-color .18s, opacity .18s; }
button { -webkit-tap-highlight-color:transparent; }
button:not(:disabled):hover { filter:saturate(1.08); }
button:not(:disabled):active, .btn:active { transform:scale(.95); transition-duration:.08s; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [draggable]:focus-visible { outline:2px solid var(--nx); outline-offset:2px; }
input:focus, select:focus, textarea:focus { border-color:var(--nx) !important; box-shadow:0 0 0 4px var(--nx-bg); }
[draggable="true"]:hover { transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(30,40,40,.25); }
[draggable="true"]:active { cursor:grabbing; transform:rotate(-1.2deg) scale(1.02); }
td { font-variant-numeric:tabular-nums; }
::selection { background:var(--nx-bg); color:var(--text); }
h1, h2 { text-wrap-style:balance; }
p, div { text-wrap-style:pretty; } /* text-wrap-style : ne pas écraser un white-space:nowrap hérité */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:16px; border:2px solid transparent; background-clip:content-box; }

/* ---------- Animations ---------- */
section { animation:rise .42s var(--ease) both; }
section:nth-of-type(2) { animation-delay:.04s; } section:nth-of-type(3) { animation-delay:.08s; }
section:nth-of-type(4) { animation-delay:.12s; } section:nth-of-type(5) { animation-delay:.16s; }
[data-screen-label] { animation:fadeIn .25s ease both; }
[data-reveal] { animation:reveal 1.2s var(--ease) both; }
[data-bar] { animation:grow .9s var(--ease) both; transform-origin:left center; }
[data-col] { animation:growY .8s var(--ease) both; transform-origin:bottom center; }
[data-badge] { animation:bump .5s var(--spring) both; }
[data-ring] circle + circle { transition:stroke-dasharray .8s var(--ease), stroke .3s; }
[data-done] { animation:glow 1.6s ease-out both; }
@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes reveal { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 -10% 0 0); } }
@keyframes grow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes growY { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes pop { from { opacity:0; transform:translateY(14px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes toastIn { from { opacity:0; transform:translateY(16px) scale(.95); } to { opacity:1; transform:none; } }
@keyframes bump { 0% { transform:scale(.4); opacity:0; } 60% { transform:scale(1.15); opacity:1; } 100% { transform:scale(1); } }
@keyframes glow { 0% { box-shadow:0 0 0 0 var(--ok-bg); } 40% { box-shadow:0 0 0 8px var(--ok-bg); } 100% { box-shadow:0 0 0 0 transparent; } }
/* Pas de ré-animation des sections lors d'un rafraîchissement par morphing */
html[data-turbo-morphing] section { animation:none; }

/* ---------- Shell ---------- */
.app { display:flex; min-height:100vh; background:var(--bg); color:var(--text); }
.sidebar { width:240px; flex-shrink:0; background:var(--surface); display:flex; flex-direction:column; padding:22px 14px 16px; gap:24px;
  position:sticky; top:0; height:100vh; overflow-y:auto; }
.brand { display:flex; flex-direction:column; gap:3px; padding:0 10px; }
.brand-name { font-weight:700; font-size:15px; letter-spacing:-0.01em; display:flex; align-items:center; gap:6px; }
.brand-sub { font-size:12px; color:var(--muted); }
.nav { display:flex; flex-direction:column; gap:2px; }
.nav a { position:relative; display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:999px; color:var(--muted); font-weight:500; font-size:14px; text-decoration:none; }
.nav a:hover { background:var(--surface-2); color:var(--muted); }
.nav a.on { background:var(--surface-2); color:var(--text); font-weight:600; }
.nav .nav-l { flex:1; }
.nav-badge { min-width:20px; height:20px; padding:0 6px; border-radius:16px; font-size:11px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; }
.me { margin-top:auto; display:flex; flex-direction:column; gap:10px; padding:14px 10px 0; border-top:1px solid var(--border); }
.me-k { font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; }
.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:8px 10px; padding:12px 28px; flex-wrap:wrap;
  background:color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .2s; }
.topbar.scrolled { border-bottom-color:var(--border); }
.crumbs { flex:1 1 100%; min-width:0; display:flex; align-items:center; gap:8px; font-size:14px; flex-wrap:nowrap; overflow:hidden; }
.crumbs a, .crumbs span.cur { padding:2px 4px; margin:0 -4px; border-radius:6px; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; }
.crumbs a { color:var(--muted); font-weight:500; }
.crumbs span.cur { color:var(--text); font-weight:600; }
.crumbs .sep { color:var(--faint); }
.topbar-tools { flex:1 1 auto; display:flex; align-items:center; gap:10px; justify-content:flex-end; flex-wrap:wrap; min-width:0; }
.search-btn { display:flex; align-items:center; gap:10px; border:1px solid var(--border); background:var(--surface); color:var(--faint); border-radius:999px;
  padding:7px 8px 7px 14px; font-size:13px; cursor:pointer; white-space:nowrap; flex-shrink:0; box-shadow:var(--card-sh); }
.kbd { font-size:11px; font-weight:600; color:var(--muted); background:var(--surface-2); border-radius:6px; padding:2px 7px; }
.role-seg { display:inline-flex; gap:2px; padding:4px; background:var(--surface); border-radius:999px; box-shadow:var(--card-sh); }
.role-seg form { display:contents; }
.role-seg button { display:flex; align-items:center; gap:8px; border:0; background:transparent; color:var(--muted); padding:5px 13px 5px 5px; border-radius:999px; font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap; }
.role-seg button.on { background:var(--ink); color:var(--ink-fg); }
.day-ring { display:flex; align-items:center; gap:9px; padding:4px 14px 4px 4px; background:var(--surface); border-radius:999px; box-shadow:var(--card-sh); white-space:nowrap; }
.day-ring span { font-size:12.5px; font-weight:600; }
.theme-btn { width:38px; height:38px; border:0; background:var(--surface); box-shadow:var(--card-sh); border-radius:50%; font-size:16px; cursor:pointer; color:var(--text);
  display:inline-flex; align-items:center; justify-content:center; }
.content { padding:28px 32px 72px; max-width:1480px; width:100%; margin:0 auto; display:flex; flex-direction:column; gap:24px; }
.screen { display:flex; flex-direction:column; gap:18px; }

.mobile-only { display:none !important; } /* affiché seulement sur téléphone (voir ci-dessous) */
@media (max-width: 899px) {
  .app { flex-direction:column; }
  .sidebar { width:auto; height:auto; position:static; flex-direction:row; padding:10px 12px; gap:4px; overflow-x:auto; border-bottom:1px solid var(--border); }
  .sidebar .brand, .sidebar .me { display:none; }
  .nav { flex-direction:row; gap:4px; }
  .nav a { padding:8px 10px; font-size:13px; white-space:nowrap; gap:6px; }
  .nav a svg { display:none; }
  .nav-badge { min-width:18px; height:18px; padding:0 5px; border-radius:14px; }
  .topbar { padding:10px 16px; }
  .content { padding:20px 16px 60px; }
  /* Barre du haut compacte sur une ligne : icônes et avatars seulement */
  .topbar-tools { flex-wrap:nowrap; gap:6px; justify-content:space-between; }
  .search-btn > span:not(:first-child), .role-seg button .role-l, .day-ring span { display:none; }
  .search-btn { padding:8px 12px; }
  .role-seg button { padding:4px; }
  .day-ring { padding:3px; }
  .mobile-only { display:inline-flex !important; }
}

/* ---------- Typographie ---------- */
.page-head { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.page-head > .grow { flex:1; min-width:220px; }
.page-title { font-family:'Sora',sans-serif; font-size:24px; font-weight:600; letter-spacing:-0.02em; margin:0; }
.page-sub { font-size:13px; color:var(--muted); margin-top:4px; }
.card-title { font-family:'Sora',sans-serif; font-size:15px; font-weight:600; margin:0; }
.sora { font-family:'Sora',sans-serif; }
.mono { font-family:'DM Mono',monospace; }
.muted { color:var(--muted); }
.faint { color:var(--faint); }
.num { font-variant-numeric:tabular-nums; }
.empty { font-size:13px; color:var(--faint); }
.spacer { flex:1; }
.nowrap { white-space:nowrap; }
.ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- Cartes ---------- */
.card { background:var(--surface); border:1px solid var(--card-bd); border-radius:22px; box-shadow:var(--card-sh); padding:20px 22px; }
.card-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.count { font-size:12px; font-weight:600; background:var(--surface-2); border-radius:16px; padding:1px 8px; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.kpi { background:var(--surface); border:1px solid var(--card-bd); border-radius:22px; box-shadow:var(--card-sh); padding:18px 20px; display:flex; flex-direction:column; gap:6px; }
.kpi-l { font-size:12.5px; color:var(--muted); }
.kpi-v { font-size:22px; font-weight:600; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; }
.kpi-v2 { font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums; }
.kpi-n { font-size:12.5px; color:var(--muted); }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:16px; padding-top:16px; border-top:1px solid var(--border); }
.fact { display:flex; flex-direction:column; gap:3px; min-width:0; }
.fact-l { font-size:12px; color:var(--muted); }
.fact-v { font-size:13.5px; overflow-wrap:anywhere; }
.cols-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr)); gap:18px; align-items:start; }
.stack { display:flex; flex-direction:column; gap:18px; min-width:0; }

/* Ligne cliquable dans une liste de carte */
.row-link { display:flex; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--border); cursor:pointer; text-decoration:none; color:inherit; }
a.row-link:hover { color:inherit; transform:translateX(3px); }
.row { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--border); }
.row-title { font-weight:500; font-size:14px; }
.row-sub { font-size:12.5px; color:var(--muted); }

/* ---------- Boutons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--surface); color:var(--text); border:1px solid var(--border-strong);
  border-radius:999px; padding:8px 14px; font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap; text-decoration:none; line-height:1.2; }
.btn:hover { background-color:var(--surface-2); border-color:var(--faint); color:var(--text); }
.btn-primary { background:var(--ink); color:var(--ink-fg); border:0; padding:9px 16px; }
.btn-primary:hover { background:var(--ink); color:var(--ink-fg); transform:translateY(-1px); box-shadow:0 8px 18px -6px rgba(30,40,40,.35); }
.btn-sm { padding:6px 12px; font-size:12.5px; }
.btn-primary.btn-sm { padding:6px 12px; }
.btn-ok { background:var(--ok); color:var(--on-solid); border:0; }
.btn-nx { background:var(--nx); color:var(--on-solid); border:0; }
.btn-dia { background:var(--dia); color:var(--on-solid); border:0; }
.btn-ok:hover, .btn-nx:hover, .btn-dia:hover { color:var(--on-solid); transform:translateY(-1px); box-shadow:0 8px 18px -6px rgba(30,40,40,.35); }
.btn-ok:hover { background:var(--ok); } .btn-nx:hover { background:var(--nx); } .btn-dia:hover { background:var(--dia); }
.btn-danger { background:var(--bad-bg); color:var(--bad); border:0; }
.btn-danger:hover { background:var(--bad-bg); color:var(--bad); }
.btn-ghost { border:0; background:none; color:var(--muted); padding:2px 6px; font-size:12px; font-weight:600; }
.btn-ghost:hover { background:var(--surface-2); color:var(--text); }
.btn-dashed { border:1px dashed var(--border-strong); background:transparent; color:var(--muted); }
.btn-link { border:0; background:none; padding:0; color:var(--muted); text-decoration:underline; cursor:pointer; font-size:13px; }
.btn-soon { background:var(--surface-2); border:1px dashed var(--border-strong); border-radius:999px; padding:6px 10px; font-size:12px; color:var(--faint); cursor:not-allowed; }
.btn-x { border:0; background:none; color:var(--faint); cursor:pointer; font-size:15px; padding:0 6px; }
.btn-x:hover { color:var(--bad); }
form.inline, .button_to { display:inline; }
.actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ---------- Formulaires ---------- */
.input, .select, .textarea { background:var(--surface); border:1px solid var(--border-strong); border-radius:12px; padding:8px 10px; font-size:13px; outline:none; color:var(--text); min-width:0; }
.textarea { resize:vertical; line-height:1.5; }
.field { display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--muted); min-width:0; }
.field .input, .field .select, .field .textarea { padding:9px 11px; width:100%; }
.grid-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.inline-form { display:flex; gap:6px; flex-wrap:wrap; }
.inline-form .input { flex:1; min-width:160px; }
.check { display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; color:var(--text); }
.check input { width:16px; height:16px; accent-color:var(--ink); }

/* ---------- Pastilles & étiquettes ---------- */
.pill { display:inline-block; font-size:12px; font-weight:500; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.pill-lg { padding:3px 9px; }
.pill-xs { font-size:11.5px; padding:1px 7px; }
.tag { display:inline-block; font-size:11.5px; font-weight:600; border-radius:4px; padding:3px 7px; white-space:nowrap; }
.tag-sm { font-size:11px; padding:2px 6px; }
.t-ok { color:var(--ok); background:var(--ok-bg); } .t-warn { color:var(--warn); background:var(--warn-bg); }
.t-bad { color:var(--bad); background:var(--bad-bg); } .t-neutral { color:var(--neutral); background:var(--neutral-bg); }
.t-nx { color:var(--nx); background:var(--nx-bg); } .t-dia { color:var(--dia); background:var(--dia-bg); }
.t-sm { color:var(--sm); background:var(--sm-bg); } .t-ab { color:var(--ab); background:var(--ab-bg); }
.c-ok { color:var(--ok); } .c-warn { color:var(--warn); } .c-bad { color:var(--bad); } .c-nx { color:var(--nx); } .c-dia { color:var(--dia); }
.c-sm { color:var(--sm); } .c-ab { color:var(--ab); }
.avatar { border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; width:26px; height:26px; font-size:10px; }
.soon { border:1px dashed var(--border-strong); border-radius:4px; padding:1px 6px; }
.soon-note { font-size:12px; color:var(--faint); display:flex; align-items:center; gap:6px; }

/* ---------- Segments & onglets ---------- */
.seg { display:inline-flex; flex-wrap:wrap; gap:2px; padding:4px; background:var(--surface-2); border-radius:999px; }
.seg > a, .seg > button, .seg > label { border:0; background:transparent; color:var(--muted); padding:7px 15px; border-radius:999px; font-size:13px; font-weight:500; cursor:pointer; white-space:nowrap; text-decoration:none; }
.seg > a:hover { color:var(--text); }
.seg > .on, .seg > label:has(input:checked) { background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgba(0,0,0,.1); }
.seg-sm > a, .seg-sm > button, .seg-sm > label { padding:6px 12px; font-size:12.5px; }
.seg > label input { position:absolute; opacity:0; pointer-events:none; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); overflow-x:auto; }
.tabs a { border:0; background:none; padding:10px 14px; font-size:13.5px; font-weight:500; color:var(--muted); border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; margin-bottom:-1px; text-decoration:none; }
.tabs a.on { color:var(--text); border-bottom-color:var(--text); }

/* ---------- Tableaux triables ---------- */
.table-card { background:var(--surface); border:1px solid var(--card-bd); border-radius:22px; box-shadow:var(--card-sh); overflow-x:auto; }
.tbl { width:100%; border-collapse:collapse; font-size:13px; }
.tbl th { position:sticky; top:0; background:var(--surface); z-index:1; text-align:left; padding:12px 14px; font-size:12px; font-weight:500; color:var(--muted); border-bottom:1px solid var(--border); white-space:nowrap; user-select:none; }
.tbl th a { display:inline-flex; align-items:center; gap:5px; text-decoration:none; color:inherit; }
.tbl th a:hover { color:var(--text); }
.tbl th.on { font-weight:600; color:var(--text); }
.tbl th.r { text-align:right; } .tbl th.r a { flex-direction:row-reverse; }
.tbl th .arrow { font-size:10px; width:8px; display:inline-block; color:var(--text); }
.tbl td { padding:12px 14px; border-bottom:1px solid var(--border); }
.tbl td.r { text-align:right; }
.tbl td:first-child { min-width:190px; }
.tbl tr.click { cursor:pointer; }
.tbl tr.click:hover td { background:var(--surface-2); }

/* ---------- Barres ---------- */
.bar { height:5px; border-radius:3px; background:var(--surface-2); overflow:hidden; }
.bar > div { height:100%; border-radius:3px; }
.split-bar { display:flex; height:10px; border-radius:5px; overflow:hidden; }

/* ---------- Kanban ---------- */
.kboard { display:flex; gap:10px; overflow-x:auto; padding-bottom:12px; align-items:stretch; }
.kcol { background:var(--surface-2); outline:2px dashed transparent; outline-offset:-2px; border-radius:16px; padding:10px; display:flex; flex-direction:column; gap:8px; min-height:380px; }
.kcol.over { background:var(--nx-bg); outline-color:var(--nx); }
.kcol-head { display:flex; align-items:center; gap:6px; padding:2px 4px 4px; }
.kcol-head .l { font-size:12.5px; font-weight:600; flex:1; }
.kcol-head .n { font-size:11.5px; font-weight:600; color:var(--muted); background:var(--surface); border-radius:16px; padding:1px 7px; }
.kcard { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:11px 12px; display:flex; flex-direction:column; gap:6px; cursor:grab; text-decoration:none; color:inherit; }
.kcard:hover { border-color:var(--border-strong); color:inherit; }

/* ---------- Modales ---------- */
.modal-backdrop { position:fixed; inset:0; background:var(--overlay); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px;
  animation:fadeIn .2s ease both; backdrop-filter:blur(3px); }
.modal { background:var(--surface); border-radius:24px; padding:28px; width:min(600px,100%); display:flex; flex-direction:column; gap:12px;
  box-shadow:0 30px 60px rgba(20,30,25,.18); max-height:92vh; overflow:auto; animation:pop .34s var(--spring) both; }
.modal > form { display:flex; flex-direction:column; gap:inherit; }
.modal-title { font-family:'Sora',sans-serif; font-size:18px; font-weight:600; margin:0; }
.modal-sub { font-size:13px; color:var(--muted); margin-top:-6px; }
.modal-info { font-size:12.5px; color:var(--muted); padding:10px 12px; background:var(--surface-2); border-radius:12px; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; align-items:center; position:sticky; bottom:-28px; background:var(--surface); padding:12px 0 0; margin-top:4px; }
.block { display:flex; flex-direction:column; gap:12px; padding:16px; border:1px solid var(--border); border-radius:18px; }
.block-title { font-family:'Sora',sans-serif; font-size:13px; font-weight:600; }
.block-num { width:22px; height:22px; border-radius:50%; background:var(--surface-2); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ---------- Toasts ---------- */
#toasts { position:fixed; right:24px; bottom:24px; z-index:60; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.toast { background:var(--ink); color:var(--ink-fg); border-radius:16px; padding:12px 16px; font-size:13.5px; display:flex; align-items:center; gap:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25); max-width:440px; animation:toastIn .45s var(--spring) both; }
.toast.out { opacity:0; transform:translateY(10px); transition:opacity .3s, transform .3s; }
.toast-badge { flex-shrink:0; min-width:34px; height:26px; padding:0 9px; border-radius:999px; background:var(--ok-bg); color:var(--ok); font-size:12.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.toast a { color:var(--ink-fg); text-decoration:underline; font-weight:600; font-size:13px; }

/* ---------- Connexion ---------- */
.auth { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:var(--bg); }
.auth .card { width:min(420px,100%); padding:28px; display:flex; flex-direction:column; gap:14px; }
.flash-alert { padding:10px 12px; border-radius:12px; background:var(--bad-bg); color:var(--bad); font-size:13px; }

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

/* Tableau compact aligné sur le bord de la carte (lignes du devis) */
.tbl-tight th { padding:12px 8px; }
.tbl-tight th:first-child, .tbl-tight th:nth-child(4) { padding-left:0; padding-right:0; }
.tbl-tight td:first-child { min-width:0; }

/* Raccourcis de date (modale de suivi) */
.chip { border:0; background:var(--surface-2); color:var(--text); border-radius:999px; padding:6px 12px; font-size:12.5px; font-weight:500; cursor:pointer; }
.chip.on { background:var(--ink); color:var(--ink-fg); }
.card-link:hover { border-color:var(--border-strong); }

/* Finances : deux courbes côte à côte, empilées en dessous de 1100 px */
.fin-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:18px; }
@media (max-width:1100px) { .fin-grid { grid-template-columns:minmax(0,1fr); } }

/* Palette ⌘K */
.pal-item { width:100%; display:flex; align-items:center; gap:12px; border-radius:12px; padding:10px 12px; text-align:left; color:var(--text); text-decoration:none; }
.pal-item .pal-open { visibility:hidden; }
.pal-item.on { background:var(--surface-2); }
.pal-item.on .pal-open { visibility:visible; }
.pal-item:focus { outline:none; box-shadow:none; }

/* Case à cocher ronde des tâches */
.task-check { width:20px; height:20px; border-radius:50%; border:1.5px solid var(--border-strong); background:var(--surface); flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--on-solid); cursor:pointer; padding:0; }
.task-check:hover { border-color:var(--ok); background:var(--ok-bg); }
.task-check.on { background:var(--ok); border-color:var(--ok); }

/* Agenda */
.agenda-slot:hover { background:var(--nx-bg); }
.agenda-add { font-size:14px; color:var(--faint); text-decoration:none; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; }
.agenda-add:hover { background:var(--surface-2); color:var(--text); }

/* Accueil : sections repliables qui invitent à ouvrir la suite */
details.fold > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:14px 22px; background:var(--surface); border:1px solid var(--card-bd); border-radius:18px; box-shadow:var(--card-sh); }
details.fold > summary::-webkit-details-marker { display:none; }
details.fold > summary .fold-t { font-family:'Sora',sans-serif; font-size:15px; font-weight:600; }
details.fold > summary .fold-n { font-size:12.5px; color:var(--muted); flex:1; }
details.fold > summary .fold-chev { color:var(--muted); font-size:13px; transition:transform .2s var(--ease); }
details.fold[open] > summary .fold-chev { transform:rotate(90deg); }
details.fold > summary:hover .fold-t { color:var(--nx); }
details.fold > .fold-body { padding-top:14px; display:flex; flex-direction:column; gap:16px; }
details.fold > .fold-body > section:not(.card) { background:var(--surface); border:1px solid var(--card-bd); border-radius:22px; box-shadow:var(--card-sh); padding:20px 22px; }

/* Crayon d'édition des petits éléments (jalons, documents, lignes…) */
.edit-pen { color:var(--faint); text-decoration:none; font-size:13px; padding:2px 6px; border-radius:6px; flex-shrink:0; }
.edit-pen:hover { color:var(--text); background:var(--surface-2); }