/* Layout : application SaaS — rail de navigation à gauche (barre horizontale sur mobile), espace de travail à droite. Charte PointFlow : bleu nuit #0A2540, rouge corail #E33B45, corail clair #FF7775, gris clair #F4F6F8 ; atelier d'impression (repères de calage, quadrichromie C/M/K pour coûts et marge). */
:root{
  --paper:#F4F6F8; --surface:#FFFFFF; --sunk:#EBEFF3; --ink:#0A2540; --ink-2:#4F6178; --ink-3:#8494A7; --line:#DCE2E9;
  --primary:#0A2540; --on-primary:#FFFFFF; --accent:#E33B45; --accent-soft:#FDE8E9; --on-accent:#FFFFFF;
  --info:#2E6BB0; --info-soft:#E3EDF8; --rail:#0A2540;
  --cyan:#0E9CC0; --magenta:#C93A7C; --key:#0A2540;
  --ok:#1E8757; --ok-soft:#E1F3EA; --warn:#A86A12; --warn-soft:#FBF0DC; --bad:#B4232C; --bad-soft:#FBE3E4;
  --f-display:"Poppins", "Avenir Next", system-ui, sans-serif;
  --f-body:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r:8px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#06182B; --surface:#0C223A; --sunk:#122B47; --ink:#EEF2F7; --ink-2:#A6B5C7; --ink-3:#6C8199; --line:#1D3856;
  --primary:#FF7775; --on-primary:#0A2540; --accent:#FF7775; --accent-soft:#3A2033; --on-accent:#0A2540;
  --info:#7DB3EE; --info-soft:#14324F; --rail:#041222;
  --cyan:#3BC0E0; --magenta:#E66AA4; --key:#EEF2F7;
  --ok:#4FC48D; --ok-soft:#133325; --warn:#E3A84F; --warn-soft:#352812; --bad:#FF8A84; --bad-soft:#3D1A22; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#06182B; --surface:#0C223A; --sunk:#122B47; --ink:#EEF2F7; --ink-2:#A6B5C7; --ink-3:#6C8199; --line:#1D3856;
  --primary:#FF7775; --on-primary:#0A2540; --accent:#FF7775; --accent-soft:#3A2033; --on-accent:#0A2540;
  --info:#7DB3EE; --info-soft:#14324F; --rail:#041222;
  --cyan:#3BC0E0; --magenta:#E66AA4; --key:#EEF2F7;
  --ok:#4FC48D; --ok-soft:#133325; --warn:#E3A84F; --warn-soft:#352812; --bad:#FF8A84; --bad-soft:#3D1A22; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:14px;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num,.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:1.75rem;font-weight:700}
h2{font-size:1.1rem;font-weight:600}
h3{font-size:.95rem;font-weight:600}
.label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);font-weight:600}
.muted{color:var(--ink-2)}

.app{display:grid;grid-template-columns:228px minmax(0,1fr);min-height:100%}
.rail{--ink:#FFFFFF;--ink-2:rgba(255,255,255,.74);--ink-3:rgba(255,255,255,.5);--line:rgba(255,255,255,.12);--sunk:rgba(255,255,255,.07);--surface:var(--rail);--accent:#FF7775;--accent-soft:rgba(255,119,117,.16);color:var(--ink);position:sticky;top:0;height:100vh;background:var(--rail);border-right:1px solid var(--line);display:flex;flex-direction:column;padding-block:18px;padding-inline:14px;gap:18px}
.brand{display:flex;align-items:center;gap:10px;padding-inline:6px}
.brand b{font-family:var(--f-display);font-size:1.3rem;font-weight:700;letter-spacing:-.02em}
.brand img{height:30px;width:auto;display:block}
.form input[type=checkbox],.form input[type=radio],.auth-card input[type=checkbox]{width:auto;flex:none}
.workspace{display:flex;flex-direction:column;gap:2px;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:var(--sunk)}
.workspace strong{font-size:.9rem}
.workspace span{font-size:.75rem;color:var(--ink-2)}
nav.menu{display:flex;flex-direction:column;gap:2px}
nav.menu button{display:flex;align-items:center;gap:10px;border:0;background:none;padding:8px 10px;border-radius:6px;cursor:pointer;color:var(--ink-2);text-align:left;font-weight:500;white-space:nowrap}
nav.menu button:hover{background:var(--sunk);color:var(--ink)}
nav.menu button[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
nav.menu svg{width:17px;height:17px;flex:none}
.rail .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:8px 6px;border-top:1px solid var(--line);padding-top:14px}
.avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:600;background:var(--accent);color:var(--on-accent);flex:none}

main{min-width:0;padding-block:28px 60px;padding-left:max(28px, env(safe-area-inset-left, 0px));padding-right:max(28px, env(safe-area-inset-right, 0px))}
.page{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.page-head p{margin:4px 0 0;color:var(--ink-2)}

.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);padding:7px 12px;border-radius:6px;cursor:pointer;font-weight:500;font-size:.85rem;white-space:nowrap}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn.primary:focus-visible{outline-color:var(--accent)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{border-color:transparent;background:none}
.btn.sm{padding:4px 8px;font-size:.78rem}
.btn svg{width:15px;height:15px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}

.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.kpi .v{font-family:var(--f-display);font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.kpi .s{font-size:.8rem;color:var(--ink-2)}
.grid-2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px}
.grid-2b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}

.chip{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap;background:var(--sunk);color:var(--ink-2)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.chip.acc{background:var(--info-soft);color:var(--info)}
.tag{font-family:var(--f-mono);font-size:.68rem;padding:1px 6px;border-radius:4px;border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.tag.int{color:var(--cyan);border-color:currentColor}
.tag.ext{color:var(--magenta);border-color:currentColor}

.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%}
th{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);font-weight:600;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
tr.click{cursor:pointer}
tr.click:hover td{background:var(--sunk)}

.bar{height:6px;border-radius:3px;background:var(--sunk);overflow:hidden;min-width:60px}
.bar i{display:block;height:100%;background:var(--info);border-radius:3px}

/* marge empilée C/M/K */
.stack{display:flex;height:14px;border-radius:3px;overflow:hidden;background:var(--sunk)}
.stack i{display:block;height:100%}
.c{background:var(--cyan)} .m{background:var(--magenta)} .k{background:var(--key)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.75rem;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.mrow{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) 64px;gap:12px;align-items:center;padding:7px 0;cursor:pointer}
.mrow:hover .mname{color:var(--accent)}
.mname{font-size:.85rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mname small{display:block;color:var(--ink-3);font-weight:400;font-size:.72rem}

.list{display:flex;flex-direction:column}
.li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:0}
.li .when{font-family:var(--f-mono);font-size:.75rem;color:var(--ink-2);width:56px;flex:none;padding-top:1px}
.li .what{min-width:0;flex:1}
.li .what b{font-weight:500;display:block}
.li .what span{font-size:.78rem;color:var(--ink-2)}
.dot{width:9px;height:9px;transform:rotate(45deg);flex:none;margin-top:5px}

.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:4px 12px;font-size:.8rem;cursor:pointer;color:var(--ink-2)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}

/* Kanban prospects */
.kanban{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:12px;min-width:1150px}
.col{background:var(--sunk);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:8px;min-height:200px}
.col-head{display:flex;justify-content:space-between;align-items:baseline;padding:2px 4px 6px}
.col-head h3{font-size:.85rem}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:11px;display:flex;flex-direction:column;gap:6px}
.pcard .t{font-weight:600}
.pcard .row{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:.78rem;color:var(--ink-2)}
.pcard .acts{display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap}

/* Projet détail */
.crumb{display:flex;gap:8px;align-items:center;color:var(--ink-2);font-size:.85rem}
.crumb button{border:0;background:none;color:var(--info);cursor:pointer;padding:0;font-weight:500}
.phead{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.phead .meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:.85rem;color:var(--ink-2)}
.phead .meta b{color:var(--ink);font-weight:500}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{border:0;background:none;padding:10px 14px;cursor:pointer;color:var(--ink-2);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.swatch{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none}

.jal{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.jal:last-child{border-bottom:0}
.jal input{width:17px;height:17px;accent-color:var(--primary);flex:none}
.jal .n{flex:1;min-width:0}
.jal.done .n{color:var(--ink-3);text-decoration:line-through}

.timeline{display:flex;flex-direction:column;gap:0;position:relative}
.ev{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;padding-bottom:16px;position:relative}
.ev::before{content:"";position:absolute;left:8px;top:16px;bottom:0;width:1px;background:var(--line)}
.ev:last-child::before{display:none}
.ev .pin{width:17px;height:17px;border-radius:50%;border:2px solid var(--info);background:var(--surface);margin-top:2px}
.ev .body{display:flex;flex-direction:column;gap:6px;min-width:0}
.ev .top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;flex-wrap:wrap}
.ev .files{display:flex;gap:4px;flex-wrap:wrap}
.ev select{font-size:.78rem;padding:2px 6px;border:1px solid var(--line);border-radius:5px;background:var(--surface)}

/* Devis */
.devis td{padding:6px 6px}
.devis input,.devis select{width:100%;border:1px solid transparent;background:transparent;padding:5px 6px;border-radius:5px;font-size:.85rem;min-width:0}
.devis input:hover,.devis select:hover{border-color:var(--line)}
.devis input:focus,.devis select:focus{border-color:var(--accent);background:var(--surface);outline:none}
.devis input.n{text-align:right;font-family:var(--f-mono)}
.devis .cell{font-family:var(--f-mono);text-align:right;white-space:nowrap;font-size:.85rem}
.del{border:0;background:none;color:var(--ink-3);cursor:pointer;font-size:1.1rem;line-height:1;padding:4px}
.del:hover{color:var(--bad)}
.totals{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:20px;align-items:end}
.tline{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.tline:last-child{border-bottom:0}
.tline.big{font-family:var(--f-display);font-size:1.15rem;font-weight:700;padding-top:10px}
.tline .num{font-weight:500}

.files-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.file{border:1px solid var(--line);border-radius:6px;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.ft{width:38px;height:46px;border-radius:4px;display:grid;place-items:center;font-family:var(--f-mono);font-size:.62rem;font-weight:500;color:var(--surface);position:relative}
.file .n{font-weight:500;font-size:.85rem;word-break:break-word}
.drop{border:1.5px dashed var(--line);border-radius:6px;display:grid;place-items:center;text-align:center;padding:16px;color:var(--ink-2);font-size:.82rem;cursor:pointer;gap:4px}
.drop:hover{border-color:var(--accent);color:var(--accent)}

/* Planning */
.gantt{display:grid;grid-template-columns:200px auto;width:max-content;font-size:.8rem}
.g-lab{position:sticky;left:0;z-index:2;background:var(--surface);border-right:1px solid var(--line);padding:0 12px;display:flex;flex-direction:column;justify-content:center;height:52px;border-bottom:1px solid var(--line);cursor:pointer;min-width:0}
.g-lab b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-lab span{font-size:.72rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-head{position:relative;height:34px;border-bottom:1px solid var(--line)}
.g-head .mo{position:absolute;top:0;bottom:0;border-left:1px solid var(--line);padding:9px 8px;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);font-weight:600}
.g-track{position:relative;height:52px;border-bottom:1px solid var(--line)}
.g-track .mo{position:absolute;top:0;bottom:0;border-left:1px dashed var(--line)}
.g-bar{position:absolute;top:15px;height:22px;border-radius:4px;opacity:.9;cursor:pointer;display:flex;align-items:center;padding:0 8px;color:#fff;font-size:.72rem;font-weight:500;white-space:nowrap;overflow:hidden}
.g-bar .prog{position:absolute;left:0;top:0;bottom:0;background:rgba(0,0,0,.18)}
.g-bar span{position:relative}
.g-ms{position:absolute;top:20px;width:11px;height:11px;transform:translateX(-50%) rotate(45deg);border:2px solid var(--surface);z-index:1}
.g-today{position:absolute;top:0;bottom:0;width:2px;background:var(--bad);z-index:1}
.g-today-lab{position:absolute;top:2px;font-size:.65rem;font-family:var(--f-mono);color:var(--bad);transform:translateX(4px)}

.month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.month .dh{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);padding:6px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-weight:600}
.month .day{min-height:96px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:5px;display:flex;flex-direction:column;gap:3px;min-width:0}
.month .day.out{background:var(--sunk)}
.month .day .dn{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-2)}
.month .day.today .dn{background:var(--bad);color:#fff;border-radius:4px;padding:0 4px;align-self:flex-start}
.evt{font-size:.7rem;padding:2px 5px;border-radius:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;border-left:3px solid;background:var(--sunk)}

/* Abonnement */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.plan{border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.plan.cur{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.plan .price{font-family:var(--f-display);font-size:1.6rem;font-weight:700}
.plan ul{margin:0;padding-left:18px;color:var(--ink-2);font-size:.85rem;display:flex;flex-direction:column;gap:3px}

/* Fiches détaillées */
.link{border:0;background:none;padding:0;color:var(--info);cursor:pointer;font:inherit;font-weight:500;text-align:left}
.link:hover{text-decoration:underline}
.stepper{display:grid;grid-template-columns:repeat(5,minmax(96px,1fr));gap:6px}
.stepper button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:8px 10px;cursor:pointer;text-align:left;font-weight:500;min-width:0}
.stepper button .num{font-size:.7rem;color:var(--ink-3)}
.stepper button small{color:var(--ink-3);font-size:.72rem;font-weight:400}
.stepper button.past{background:var(--sunk);color:var(--ink-2)}
.stepper button[aria-current="step"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.stepper button[aria-current="step"] .num,.stepper button[aria-current="step"] small{color:var(--on-accent);opacity:.85}
.thread{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.msg{display:flex;flex-direction:column;gap:3px;max-width:88%;padding:10px 12px;border-radius:8px;background:var(--sunk);align-self:flex-start}
.msg.agence{align-self:flex-end;background:var(--accent-soft)}
.msg .who{font-size:.72rem;color:var(--ink-2);font-weight:600}
.msg p{margin:0;white-space:pre-wrap;font-size:.88rem}
.sys{align-self:center;font-size:.74rem;color:var(--ink-3);font-family:var(--f-mono);text-align:center}
.portal{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper)}
.portal-top{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--ink);color:var(--surface)}
.portal-top span{margin-left:auto;font-size:.72rem;opacity:.75}
.portal-body{padding:14px;display:flex;flex-direction:column;gap:10px}
.pfile{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--surface);border:1px solid var(--line);border-radius:6px;font-size:.85rem;min-width:0}
.pfile .ft{width:28px;height:34px;font-size:.52rem}
.pfile span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ident{display:flex;gap:14px;align-items:center}
.ident .avatar{width:48px;height:48px;font-size:1rem}
.etat{font-size:.78rem;padding:3px 6px;border:1px solid var(--line);border-radius:5px;background:var(--surface)}

/* Jalons */
.alert{border:1px solid var(--bad);background:var(--bad-soft);border-radius:var(--r);padding:10px 14px;display:flex;flex-direction:column;gap:6px}
.alert-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.alert-row b{color:var(--bad);font-weight:600}
.alert-row span{flex:1;min-width:0;font-size:.86rem}
.frise{position:relative;height:66px;margin:0 12px}
.fr-ends{position:absolute;left:-12px;right:-12px;top:0;display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:.7rem;color:var(--ink-2)}
.fr-track{position:absolute;left:0;right:0;top:30px;height:6px;border-radius:3px;background:var(--sunk)}
.fr-done{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--ink-3);opacity:.45}
.fr-slip{position:absolute;top:32px;height:2px;background:repeating-linear-gradient(90deg,var(--warn) 0 4px,transparent 4px 7px)}
.fr-ghost{position:absolute;top:26px;width:14px;height:14px;transform:translateX(-50%);border-radius:50%;border:1.5px dashed var(--ink-3);background:var(--surface)}
.fr-m{position:absolute;top:22px;width:22px;height:22px;transform:translateX(-50%);border-radius:50%;display:grid;place-items:center;padding:0;font:600 .66rem var(--f-mono);color:var(--surface);border:2px solid var(--surface);cursor:pointer;z-index:2}
.fr-m.todo{background:var(--surface);color:var(--ink-2);border:1.5px solid var(--ink-3)}
.fr-m.late{box-shadow:0 0 0 2px var(--bad)}
.fr-m:hover{transform:translateX(-50%) scale(1.12)}
.fr-today{position:absolute;top:18px;height:30px;width:2px;background:var(--bad);transform:translateX(-1px);z-index:1}
.fr-today span{position:absolute;top:31px;left:-10px;font-family:var(--f-mono);font-size:.64rem;color:var(--bad)}
.jlist{display:flex;flex-direction:column;gap:8px}
.jrow{border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.jrow.open{border-color:var(--ink-3)}
.jrow.late{box-shadow:inset 3px 0 0 var(--bad)}
.jhead{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto auto auto;gap:10px;align-items:center;padding:10px 12px;cursor:pointer}
.jhead:hover .jtitle b{color:var(--accent)}
.jhead input{width:17px;height:17px;accent-color:var(--ok);margin:0}
.jnum{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:600 .68rem var(--f-mono);color:var(--surface);flex:none}
.jnum.todo{background:var(--surface);color:var(--ink-2);border:1.5px solid var(--ink-3)}
.jtitle{min-width:0}
.jtitle b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jtitle span{font-size:.76rem;color:var(--ink-2)}
.tcount{font-size:.74rem;color:var(--ink-2)}
.jdate{font-size:.8rem;white-space:nowrap;text-align:right;color:var(--ink-2)}
.slip{font-size:.66rem;color:var(--warn);background:var(--warn-soft);border-radius:4px;padding:1px 5px;margin-left:5px}
.chev{color:var(--ink-3)}
.jrow.open .chev{transform:rotate(180deg)}
.jbody{border-top:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:16px}
.jfields{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.jfields label,.jfield{display:flex;flex-direction:column;gap:4px;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);font-weight:600;min-width:0}
.jfields select{border:1px solid var(--line);border-radius:6px;padding:6px 8px;background:var(--surface);font-size:.85rem;text-transform:none;letter-spacing:0;font-weight:400;min-width:0}
.jfield small{text-transform:none;letter-spacing:0;font-weight:400;color:var(--warn);font-size:.74rem}
.datebox{display:flex;align-items:center;gap:8px;white-space:nowrap;text-transform:none;letter-spacing:0;color:var(--ink);font-size:.88rem;min-height:33px}
.jsec{display:flex;flex-direction:column;gap:8px}
.tasks{display:flex;flex-direction:column}
.task{display:flex;align-items:center;gap:8px;padding:4px 0}
.task input{width:16px;height:16px;accent-color:var(--primary);margin:0;flex:none}
.task label{flex:1;min-width:0;font-size:.88rem;cursor:pointer}
.task.done label{color:var(--ink-3);text-decoration:line-through}
.addtask{display:flex;gap:6px}
.addtask input{flex:1;min-width:0;border:1px solid var(--line);border-radius:6px;padding:5px 9px;background:var(--surface);font-size:.85rem}
.livpick{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.livpick > button{border:1px dashed var(--line);background:none;border-radius:5px;padding:4px 8px;font-size:.78rem;cursor:pointer;color:var(--ink-2)}
.livpick > button[aria-pressed="true"]{border-style:solid;border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.jnote{border:1px solid var(--line);border-radius:6px;padding:7px 9px;background:var(--surface);font-size:.86rem;resize:vertical;min-width:0}
.jacts{display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between}
.btn.danger{background:var(--bad);border-color:var(--bad);color:var(--surface)}
.jr-dot{width:8px;height:8px;border-radius:50%;flex:none;margin-top:6px}
@media (max-width:820px){.jhead{grid-template-columns:auto auto minmax(0,1fr) auto auto;gap:8px;padding:10px}.jhead .jchip,.jhead .tcount{display:none}.jfields{grid-template-columns:1fr 1fr}.frise{margin:0 10px}}
@media (prefers-reduced-motion:no-preference){.chev{transition:transform .15s}.fr-m{transition:transform .12s}}

/* Budget annuel */
.alerts{display:flex;flex-direction:column}
.al{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:12px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.al:last-child{border-bottom:0}
.al > i{width:10px;height:10px;border-radius:50%;margin-top:5px}
.al b{font-weight:500;display:block}
.al span{font-size:.8rem;color:var(--ink-2)}
.bstack{display:flex;height:26px;border-radius:5px;overflow:visible;background:var(--sunk);position:relative}
.bstack i{display:block;height:100%}
.bstack i:first-child{border-radius:5px 0 0 5px}
.bmin{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--ink)}
.burn{width:100%;height:auto;display:block}
.burn .ax{fill:var(--ink-3);font:11px var(--f-mono)}
.burn .lab{font:600 11px var(--f-body)}
.planrow{display:grid;grid-template-columns:repeat(12,minmax(88px,1fr));gap:6px;min-width:1100px}
td.r,th.r{white-space:nowrap}
.pcell{display:flex;flex-direction:column;gap:4px;padding:8px;border:1px solid var(--line);border-radius:6px;font-size:.8rem;min-width:0}
.pcell.cur{border-color:var(--accent)}
.pcell input{width:100%;border:1px solid var(--line);border-radius:4px;padding:4px 6px;font:500 .8rem var(--f-mono);text-align:right;background:var(--surface);min-width:0}
.dec-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px;align-items:start}
.mlist{display:flex;flex-direction:column;gap:3px;position:sticky;top:12px}
.mlist button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;align-items:center;border:1px solid transparent;background:none;border-radius:6px;padding:8px 10px;cursor:pointer;text-align:left}
.mlist button:hover{background:var(--sunk)}
.mlist button[aria-current="true"]{background:var(--surface);border-color:var(--accent)}
.mlist .mn{font-weight:500}
.mlist .ma{font-family:var(--f-mono);font-size:.74rem;color:var(--ink-2)}
.dsteps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.dstep{display:flex;flex-direction:column;gap:3px;padding:8px 6px 0;border-top:3px solid var(--line);font-size:.8rem;min-width:0}
.dstep.done{border-top-color:var(--ok)}
.dstep.now{border-top-color:var(--accent)}
.dstep b{font-weight:600}
.dstep span{color:var(--ink-2);font-family:var(--f-mono);font-size:.7rem}
.addline{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1.6fr) minmax(0,1fr) 70px auto;gap:6px;margin-top:10px}
.addline input,.addline select{border:1px solid var(--line);border-radius:6px;padding:6px 8px;background:var(--surface);font-size:.84rem;min-width:0}
.doc{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:28px;box-shadow:0 10px 24px -18px var(--ink-3);display:flex;flex-direction:column;gap:16px;font-size:.85rem}
.doc-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.doc table td,.doc table th{padding:6px 8px}
.cumul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cumul > div{background:var(--sunk);border-radius:5px;padding:8px 10px;display:flex;flex-direction:column;gap:3px}
.g-track{overflow:hidden}
@media (max-width:820px){.dec-grid{grid-template-columns:minmax(0,1fr)}.mlist{flex-direction:row;overflow-x:auto;position:static}.mlist button{min-width:150px}.cumul{grid-template-columns:1fr 1fr}.doc{padding:16px}.addline{grid-template-columns:1fr 1fr}.dsteps{grid-template-columns:repeat(5,minmax(64px,1fr));overflow-x:auto}}

/* Devis composable */
.devis tr.sec td{background:var(--sunk);padding:8px 10px}
.sec-h{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sec-h span{color:var(--ink-2);font-size:.82rem}
.sec-h .num{margin-left:auto;color:var(--ink);font-weight:500}
.devis .sec-h select{width:auto;border:1px solid var(--line);background:var(--surface);padding:3px 6px}
.devis tr.has-sub td{border-bottom:0}
.devis tr.sub td{padding:0 6px 12px}
.devis tr.dim > td{opacity:.55}
.lmode{display:flex;gap:8px;align-items:center;margin-top:2px;padding-left:6px}
.devis .lmode select{width:auto;font-size:.74rem;padding:2px 4px;color:var(--ink-2);border:1px solid var(--line)}
.optchk{display:inline-flex;gap:5px;align-items:center;font-size:.76rem;color:var(--ink-2);white-space:nowrap;cursor:pointer}
.devis .optchk input{width:auto;padding:0;margin:0;accent-color:var(--primary)}
.subbox{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:.8rem;color:var(--ink-2);background:var(--sunk);border-radius:6px;padding:9px 12px}
.subbox label{display:inline-flex;align-items:center;gap:6px}
.devis .subbox input[type=number],.devis .subbox input[type=date],.devis .subbox input[type=text]{width:auto;border:1px solid var(--line);background:var(--surface);border-radius:5px;padding:3px 6px;font-size:.8rem}
.devis .subbox input[type=number]{width:84px;text-align:right;font-family:var(--f-mono)}
.devis .subbox input.wide{flex:1;min-width:160px}
.ins-bad{color:var(--bad);font-weight:500}.ins-warn{color:var(--warn);font-weight:500}
.paliers{display:flex;gap:8px;flex-wrap:wrap}
.palier{display:flex;flex-direction:column;gap:5px;border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:var(--surface);min-width:170px}
.palier.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.palier .pr{display:flex;align-items:center;gap:6px;justify-content:space-between;font-size:.76rem}
.addbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:12px}
.addbar select{border:1px solid var(--line);border-radius:6px;padding:4px 8px;background:var(--surface);font-size:.8rem}
#dtot .totals{grid-template-columns:minmax(0,1fr)}

/* Modal + toast */
#modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px}
#modal .scrim{position:absolute;inset:0;background:rgba(10,12,20,.45)}
#modal .sheet{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:10px;width:min(560px,100%);max-height:calc(100% - 32px);overflow:auto;padding:22px;display:flex;flex-direction:column;gap:14px}
.form{display:flex;flex-direction:column;gap:12px}
.form label{display:flex;flex-direction:column;gap:5px;font-size:.8rem;font-weight:500;color:var(--ink-2)}
.form input,.form select,.form textarea{border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:var(--surface);font-size:.9rem;color:var(--ink);min-width:0}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form .checks{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:6px;padding:10px;max-height:180px;overflow:auto}
.form .checks label{flex-direction:row;align-items:center;gap:8px;color:var(--ink);font-weight:400}
.form .acts{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.note{font-size:.78rem;color:var(--ink-2);background:var(--sunk);border-radius:6px;padding:8px 10px}
#toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom, 0px));left:50%;transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:8px;font-size:.85rem;z-index:60;max-width:calc(100% - 32px)}

.reg{color:var(--ink)}
.empty{padding:24px;text-align:center;color:var(--ink-2);font-size:.88rem}

@media (max-width:1050px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-2,.grid-2b{grid-template-columns:minmax(0,1fr)}.plans{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){
  .app{grid-template-columns:minmax(0,1fr)}
  body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:10;background:var(--rail)}
  .rail{position:sticky;top:env(safe-area-inset-top, 0px);z-index:20;height:auto;flex-direction:column;gap:10px;padding-block:10px 0;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));border-right:0;border-bottom:1px solid var(--line)}
  .rail-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
  .workspace{padding:4px 8px;flex-direction:row;gap:6px;align-items:center}
  .workspace span{display:none}
  .rail .me{display:none}
  nav.menu{flex-direction:row;overflow-x:auto;gap:4px;padding-bottom:8px;scrollbar-width:none}
  nav.menu::-webkit-scrollbar{display:none}
  nav.menu button{padding:6px 10px;font-size:.85rem}
  nav.menu svg{display:none}
  main{padding-block:18px 60px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
  h1{font-size:1.4rem}
  .kpi .v{font-size:1.3rem}
  .mrow{grid-template-columns:minmax(0,1fr) 56px;row-gap:4px}
  .mrow .stack{grid-column:1 / -1;grid-row:2}
  .totals{grid-template-columns:minmax(0,1fr)}
  .form .two{grid-template-columns:1fr}
  .gantt{grid-template-columns:130px auto}
  .month .day{min-height:64px;padding:3px}
  .evt{font-size:.6rem;padding:1px 3px;border-left-width:2px}
  .card{padding:14px}
}
@media (min-width:821px){.rail-top{display:flex;flex-direction:column;gap:18px}}
@media (prefers-reduced-motion:no-preference){.btn,nav.menu button,.filters button{transition:background .15s,border-color .15s,color .15s}}

/* --- Application Laravel --- */
a{color:inherit;text-decoration:none}
nav.menu a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;color:var(--ink-2);font-weight:500;white-space:nowrap}
nav.menu a:hover{background:var(--sunk);color:var(--ink)}
nav.menu a[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
nav.menu a svg{width:17px;height:17px;flex:none}
.link{border:0;background:none;padding:0;color:var(--info);cursor:pointer;font:inherit;font-weight:500}
.link:hover{text-decoration:underline}
.auth-wrap{min-height:100%;display:grid;place-items:center;padding-block:40px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.auth-card{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:28px;display:flex;flex-direction:column;gap:16px}
.error{color:var(--bad);font-size:.8rem;font-weight:400;text-transform:none;letter-spacing:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.inline-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:end}
.inline-form label{display:flex;flex-direction:column;gap:5px;font-size:.78rem;font-weight:500;color:var(--ink-2)}
.inline-form input,.inline-form select{border:1px solid var(--line);border-radius:6px;padding:7px 9px;background:var(--surface);font-size:.88rem;color:var(--ink);min-width:0}
.me form{margin-left:auto}
.readonly-note{font-size:.8rem;color:var(--warn);background:var(--warn-soft);border-radius:6px;padding:8px 10px}
[x-cloak]{display:none!important}

.page > *{min-width:0}

/* Espace de validation client */
.portal-page{min-height:100%;display:flex;flex-direction:column}
.portal-page .portal-top{display:flex;align-items:center;gap:10px;padding-block:14px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));background:var(--ink);color:var(--surface)}
.portal-page .portal-top span{margin-left:auto;font-size:.8rem;opacity:.75}
.portal-main{width:min(760px,100%);margin:0 auto;display:flex;flex-direction:column;gap:16px;padding-block:28px 60px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.thread{display:flex;flex-direction:column;gap:10px}
.msg{display:flex;flex-direction:column;gap:3px;max-width:88%;padding:10px 12px;border-radius:8px;background:var(--sunk);align-self:flex-start}
.msg.agence{align-self:flex-end;background:var(--accent-soft)}
.msg .who{font-size:.72rem;color:var(--ink-2);font-weight:600}
.msg p{margin:0;white-space:pre-wrap;font-size:.88rem}
.sys{align-self:center;font-size:.74rem;color:var(--ink-3);font-family:var(--f-mono);text-align:center}
.pfile{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--surface);border:1px solid var(--line);border-radius:6px;font-size:.85rem;min-width:0}
.pfile .ft,.file .ft{width:30px;height:36px;border-radius:4px;display:grid;place-items:center;font-family:var(--f-mono);font-size:.52rem;font-weight:500;color:#fff;flex:none}
.pfile span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.form .two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.form input,.form select,.form textarea{width:100%;min-width:0}
@media (max-width:820px){.form .two{grid-template-columns:minmax(0,1fr)}.rv-detail{grid-template-columns:minmax(0,1fr)!important}}

.page > *, .page > * > *, [wire\:id], [wire\:id] > * {min-width:0}
.page .page{max-width:none;margin:0;width:100%}

/* Aide et manuel */
.help-links{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.help-links a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;color:var(--ink-2);font-weight:500}
.help-links a:hover{background:var(--sunk);color:var(--ink)}
.help-links a[aria-current="page"]{background:var(--accent-soft);color:var(--accent)}
.help-links a svg{width:17px;height:17px;flex:none}
.help-links a.help-here{font-size:.8rem;color:var(--accent);padding-left:37px}
.rail .help-links + .me{margin-top:0}
.steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.steps li{line-height:1.5}
.steps li b{font-weight:600}
.help-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.help-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.help-card:hover{border-color:var(--accent)}
.help-card img{aspect-ratio:16/9;object-fit:cover;object-position:top left;width:100%;border-bottom:1px solid var(--line);background:var(--sunk)}
.help-card div{padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.help-card p{margin:0;color:var(--ink-2);font-size:.85rem}
.help-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start}
.help-toc{position:sticky;top:12px;display:flex;flex-direction:column;gap:2px}
.help-toc a{padding:6px 10px;border-radius:6px;color:var(--ink-2);font-size:.88rem}
.help-toc a:hover{background:var(--sunk);color:var(--ink)}
.help-toc a[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:500}
.help-article{display:flex;flex-direction:column;gap:28px;min-width:0;max-width:980px}
.help-article p,.help-article li{max-width:72ch;line-height:1.6}
.help-article ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.help-section{display:flex;flex-direction:column;gap:12px;scroll-margin-top:16px}
.help-section h2{font-size:1.25rem}
.help-section p{margin:0}
.tips{display:flex;flex-direction:column;gap:6px;background:var(--accent-soft);border-radius:var(--r);padding:12px 14px}
.tips b{color:var(--accent)}
.shot{margin:0;display:flex;flex-direction:column;gap:14px}
.shot-frame{position:relative;width:100%;max-width:100%;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--sunk);box-shadow:0 12px 30px -24px var(--ink-3)}
.shot-frame img{display:block;width:100%;height:auto}
.shot .hl{position:absolute;border:2px dashed transparent;border-radius:6px;pointer-events:none;transition:border-color .15s,background .15s}
.shot .hl.on{border-color:#E33B45;background:rgba(227,59,69,.08)}
.shot .mk{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:#E33B45;color:#fff;font:600 .78rem/26px var(--f-mono);text-align:center;box-shadow:0 0 0 3px #fff,0 2px 8px rgba(0,0,0,.25);cursor:default;z-index:2}
.shot .mk.on{background:#C93A7C}
.legend-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.legend-list li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;padding:6px 8px;border-radius:6px;line-height:1.5}
.legend-list li.on{background:var(--accent-soft)}
.mk-inline{width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-accent);font:600 .74rem/24px var(--f-mono);text-align:center}
.help-pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px}
@media (max-width:820px){.help-layout{grid-template-columns:minmax(0,1fr)}.help-toc{position:static;flex-direction:row;overflow-x:auto;gap:4px}.help-toc a{white-space:nowrap}.help-toc .label{display:none}.shot .mk{width:20px;height:20px;font-size:.66rem;line-height:20px}.rail .help-links{flex-direction:row;padding-bottom:8px}.rail .help-links a.help-here{padding-left:10px}}
@media (prefers-reduced-motion:reduce){.shot .hl{transition:none}}
@media (max-width:820px){.help-section{scroll-margin-top:150px}}

/* Prestataires */
.sup-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;padding:0 10px 10px}
.sup-tot{display:flex;gap:16px;flex-wrap:wrap;font-size:.85rem;color:var(--ink-2)}
.sup-tot b{color:var(--ink);font-weight:500}
tr.row-open td{background:var(--sunk);border-bottom:0}
.inv-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;background:var(--sunk);border-radius:0 0 6px 6px;padding:12px 14px 16px}
.inv-row{display:flex;gap:12px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:.85rem}
.inv-row:last-child{border-bottom:0}
@media (max-width:820px){.inv-box{grid-template-columns:minmax(0,1fr)}}
.month-head{display:flex;justify-content:space-between;padding:10px 0 4px;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);font-weight:600;border-bottom:1px solid var(--line)}
.ext-rate{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;font-size:.8rem;background:var(--sunk);border-radius:6px;padding:8px 10px}
.ext-rate label{display:flex;flex-direction:column;gap:4px;font-weight:500;color:var(--ink-2)}
.ext-rate select{border:1px solid var(--line);border-radius:6px;padding:5px 8px;background:var(--surface);font-size:.84rem;min-width:220px;max-width:100%}
.rate-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.rate-label{border:1px solid transparent;background:transparent;padding:2px 4px;margin-left:-4px;border-radius:4px;font-size:.8rem;color:var(--ink-2);width:100%}
.rate-label:hover,.rate-label:focus{border-color:var(--line);background:var(--surface)}
.rate-input{width:76px;border:1px solid var(--line);border-radius:5px;padding:4px 6px;text-align:right;font-family:var(--f-mono);background:var(--surface)}
.rate-row > div:last-child{flex:none;white-space:nowrap}
.tabs a{padding:10px 14px;color:var(--ink-2);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.test-result{display:flex;gap:8px;align-items:flex-start;border-radius:6px;padding:10px 12px;font-size:.86rem}
.test-result.ok{background:var(--ok-soft);color:var(--ok)}
.test-result.ko{background:var(--bad-soft);color:var(--bad)}
.settings-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1050px){.settings-grid{grid-template-columns:minmax(0,1fr)}}
.test-card{border:1px dashed var(--accent);background:var(--accent-soft)}
.test-card h2{color:var(--accent)}
.mail-preview{width:100%;height:560px;border:1px solid var(--line);border-radius:8px;background:#F3F5F8}
.var-chip{border:1px solid var(--line);background:var(--surface);border-radius:5px;padding:2px 7px;font-family:var(--f-mono);font-size:.74rem;cursor:pointer;color:var(--ink-2)}
.var-chip:hover{border-color:var(--accent);color:var(--accent)}
.swatch-input{width:46px;height:34px;padding:2px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.logo-box{min-height:72px;display:grid;place-items:center;background:var(--sunk);border-radius:6px;padding:12px}
.logo-box img{max-height:64px;max-width:100%}
.brand-preview{background:#fff;color:#14161B;border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:.85rem}
.brand-preview .bp-bar{height:5px;background:var(--b)}
.brand-preview .bp-head{padding:14px 16px 4px}
.brand-preview .bp-head img{max-height:40px;max-width:180px}
.brand-preview .bp-head b{color:var(--b);font-size:1.05rem}
.brand-preview p{margin:6px 16px}
.brand-preview .muted{color:#5B6271}
.brand-preview .bp-btn{display:inline-block;margin:8px 16px 12px;background:var(--b);color:#fff;border-radius:6px;padding:8px 14px;font-weight:600}
.brand-preview .bp-foot{border-top:1px solid #EBEEF3;padding:8px 16px;color:#5B6271;font-size:.75rem}
.choice{flex-direction:row!important;align-items:flex-start;gap:10px!important;border:1px solid var(--line);border-radius:8px;padding:12px;cursor:pointer;color:var(--ink)!important;font-weight:400!important}
.choice:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.choice input{width:auto!important;margin-top:3px}
.tpl-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start}
.tpl-list{display:flex;flex-direction:column;gap:4px;position:sticky;top:12px}
.tpl-list button{display:flex;flex-direction:column;gap:4px;text-align:left;border:1px solid transparent;background:none;border-radius:6px;padding:9px 10px;cursor:pointer}
.tpl-list button:hover{background:var(--sunk)}
.tpl-list button[aria-current="true"]{background:var(--surface);border-color:var(--accent)}
.tpl-list b{font-weight:500;font-size:.86rem}
.tpl-list span{display:flex;gap:4px;flex-wrap:wrap}
@media (max-width:1050px){.tpl-layout{grid-template-columns:minmax(0,1fr)}.tpl-list{position:static;flex-direction:row;overflow-x:auto}.tpl-list button{min-width:200px}}
.ws-logo{max-height:30px;max-width:150px;object-fit:contain;align-self:flex-start;margin-bottom:4px}
.portal-logo{background:#fff;border-radius:6px;padding:4px 8px;display:inline-flex}
.portal-logo img{max-height:30px;max-width:160px}
.tpl-layout{grid-template-columns:210px minmax(0,1fr)}
.tpl-layout .settings-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.test-card .acts{flex-wrap:wrap}
@media (max-width:1050px){.tpl-layout .settings-grid{grid-template-columns:minmax(0,1fr)}}
/* Factures */
.inv-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;align-items:start}
@media (max-width:1100px){.inv-layout{grid-template-columns:minmax(0,1fr)}}
.inv-doc-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:10px}
.inv-totals{margin-left:auto;width:min(340px,100%);margin-top:10px}
.inv-totals .grand{font-weight:600;border-top:1px solid var(--line);padding-top:6px}
.edit-table td{padding:4px 6px;vertical-align:top}
.edit-table input{width:100%;min-width:0;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);padding:6px 8px;font:inherit;font-size:.85rem}
.edit-table input.r{text-align:right}
/* Jalons détaillés */
.cascade{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);border-radius:var(--r);padding:12px 14px;font-size:.88rem}
.cascade b{display:block;margin-bottom:2px}
.fz{display:flex;flex-direction:column;gap:2px;margin-top:4px;overflow:hidden}
.fz-row{display:grid;grid-template-columns:clamp(110px,22%,190px) minmax(0,1fr);align-items:center;gap:10px;min-height:24px}
.fz-name{all:unset;cursor:pointer;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.fz-name:hover{color:var(--accent)}
.fz-track{position:relative;height:24px;margin-right:14px}
.fz-scale{position:relative;height:18px;margin-right:14px;font-size:.68rem;color:var(--ink-3);text-transform:capitalize}
.fz-scale span{position:absolute;top:0;white-space:nowrap}
.fz-grid{position:absolute;top:0;bottom:0;border-left:1px solid var(--line)}
.fz-today{position:absolute;top:-2px;bottom:-2px;border-left:2px solid var(--ink);opacity:.4}
.fz-bar{position:absolute;top:9px;height:6px;border-radius:3px;opacity:.35}
.fz-ms{position:absolute;top:6px;width:12px;height:12px;margin-left:-6px;transform:rotate(45deg);border-radius:2px}
.fz-ghost{position:absolute;top:7px;width:10px;height:10px;margin-left:-5px;transform:rotate(45deg);border:1.5px dashed var(--ink-3);border-radius:2px}
.fz-slip{position:absolute;top:11px;border-top:1.5px dashed var(--ink-3)}
.fz-ms.ok,.fz-bar.ok{background:var(--ok)} .fz-ms.acc,.fz-bar.acc{background:var(--info)} .fz-ms.bad,.fz-bar.bad{background:var(--bad)} .fz-ms.idle,.fz-bar.idle{background:var(--ink-3)}
.fz-foot .fz-track{height:16px}
.fz-today-label,.fz-end-label{position:absolute;top:0;transform:translateX(-50%);font-size:.66rem;color:var(--ink-2);white-space:nowrap}
.fz-end-label{color:var(--ink-3)}
.ms-name{display:flex;align-items:center;gap:2px}
.ms-toggle{all:unset;cursor:pointer;width:18px;text-align:center;color:var(--ink-3);font-size:.8rem}
.ms-toggle:hover{color:var(--accent)}
.ms-meta{display:flex;gap:4px;margin:2px 0 0 24px}
.ms-meta .chip{font-size:.66rem;padding:1px 6px}
.ms-detail{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;background:var(--sunk);border-radius:6px;padding:12px 14px 14px}
.ms-side{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:12px;align-items:start}
@media (max-width:640px){.ms-side{grid-template-columns:minmax(0,1fr)}}
.mtasks{display:flex;flex-direction:column;gap:2px}
.mtask{display:grid;grid-template-columns:20px minmax(140px,1fr) minmax(0,120px) 128px 24px;gap:6px;align-items:center}
.mtask.add{margin-top:6px;grid-template-columns:20px minmax(140px,1fr) minmax(0,120px) 128px auto}
.mtask input[type=checkbox]{width:16px;height:16px;accent-color:var(--ok)}
.mtask.done .t-label{text-decoration:line-through;color:var(--ink-3)}
.ms-detail input:not([type=checkbox]),.ms-detail select,.ms-detail textarea{background:var(--surface);border:1px solid var(--line)}
@media (max-width:640px){.mtask,.mtask.add{grid-template-columns:20px minmax(0,1fr) 24px}.mtask select,.mtask input[type=date]{grid-column:2}}
.fz-end-label{transform:translateX(-100%)}
/* Sécurité */
.qr-row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.qr{background:#fff;padding:8px;border-radius:8px;border:1px solid var(--line);line-height:0;flex:none}
.qr svg{width:168px;height:168px}
.steps-mini{margin:0;padding-left:18px;font-size:.86rem;color:var(--ink-2);display:flex;flex-direction:column;gap:4px}
.codes{background:var(--warn-soft);border-radius:var(--r);padding:12px}
.codes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px}
.codes-grid code{font-family:var(--f-mono);font-size:.85rem;background:var(--surface);border-radius:5px;padding:4px 8px;text-align:center}
.map{display:flex;flex-wrap:wrap;gap:6px}
.map .chip{font-size:.72rem}
.usage{display:flex;flex-direction:column;gap:4px}
.usage .bar{height:6px;border-radius:3px;background:var(--sunk);overflow:hidden}
.usage .bar i{display:block;height:100%;border-radius:3px}
.plans{display:flex;flex-direction:column;gap:6px}
.plan{display:grid!important;grid-template-columns:20px auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;cursor:pointer;font-weight:400!important;color:var(--ink)!important}
.plan input{grid-row:1/3}
.plan .chip{justify-self:start}
.plan>span:last-child{grid-column:2/4;font-size:.78rem;color:var(--ink-2)}
.plan.current{background:var(--accent-soft);border-color:var(--accent);cursor:default}
.checks{display:flex;flex-direction:column;gap:8px}
.check{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:start;font-size:.85rem}
.check .chip{justify-content:center;padding:2px 0}
.check b{display:block;font-weight:500}
.check span{color:var(--ink-2);font-size:.8rem;word-break:break-word}
.trial-banner{background:var(--warn-soft);color:var(--warn);border-radius:var(--r);padding:10px 14px;font-size:.88rem}
.tabs{overflow-x:auto;scrollbar-width:thin}
.tline>span:first-child{min-width:0}
.tline>span:last-child{flex:none;padding-left:8px}
select.btn{max-width:100%}
.rail .ws-logo{background:#FFFFFF;padding:4px 6px;border-radius:4px}
.pf-logo{display:block;height:32px;width:auto;color:var(--ink)}
.auth-card .pf-logo{height:52px;margin-bottom:4px}
.auth-card{border-top:4px solid var(--accent)}
.rail .brand{padding-inline:4px}
@media (max-width:820px){.rail .ws-logo + strong{display:none}.rail .pf-logo{height:28px}}
.app > main{background:var(--surface)}