/* dare-ui.css — système visuel v3 de la DArE Suite (02/09/2026)
   Tokens, bandeau, familles de modules, tuiles, pastilles, boutons, indicateurs,
   cartes, lignes, tables, onglets, cockpit. Une seule source : les maquettes
   l'inlinent, le futur dare_web_v3.html le liera. Titillium Web partout,
   IBM Plex Mono pour les références et les chiffres alignés. */

:root{
  --indigo:#1B2E6E; --marine:#0C447C; --marine-2:#1F5FA8; --marine-p:#DCEBFB; --marine-pp:#EEF5FD;
  --fond:#EEF3FA; --sur:#FFFFFF; --sur-2:#F4F7FC; --sur-3:#E8EEF7;
  --ink:#1C2540; --ink-2:#50597A; --ink-3:#8A93AD;
  --rouge:#C24E3F; --rouge-p:#FDE7E3; --ambre:#B77D1F; --ambre-p:#FDF1DA; --vert:#2F8A5B; --vert-p:#E2F5EA;
  --r:14px; --r2:10px;
  --o1:0 1px 2px rgba(28,37,64,.04),0 4px 10px rgba(28,37,64,.06);
  --o2:0 2px 4px rgba(28,37,64,.05),0 10px 24px rgba(28,37,64,.10);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --indigo:#141F49; --marine:#86B6EA; --marine-2:#A3C8F2; --marine-p:#1B2F4B; --marine-pp:#162538;
  --fond:#10141F; --sur:#181D2B; --sur-2:#1E2433; --sur-3:#252C3D; --ink:#E8EBF3; --ink-2:#AEB5C9; --ink-3:#7B8399;
  --rouge:#EB8A7C; --rouge-p:#3A211E; --ambre:#E0B060; --ambre-p:#342915; --vert:#7CC49A; --vert-p:#17301F;
  --o1:0 1px 2px rgba(0,0,0,.3),0 4px 10px rgba(0,0,0,.35); --o2:0 2px 4px rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.45);
}}
:root[data-theme="dark"]{
  --indigo:#141F49; --marine:#86B6EA; --marine-2:#A3C8F2; --marine-p:#1B2F4B; --marine-pp:#162538;
  --fond:#10141F; --sur:#181D2B; --sur-2:#1E2433; --sur-3:#252C3D; --ink:#E8EBF3; --ink-2:#AEB5C9; --ink-3:#7B8399;
  --rouge:#EB8A7C; --rouge-p:#3A211E; --ambre:#E0B060; --ambre-p:#342915; --vert:#7CC49A; --vert-p:#17301F;
  --o1:0 1px 2px rgba(0,0,0,.3),0 4px 10px rgba(0,0,0,.35); --o2:0 2px 4px rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.45);
}
*{box-sizing:border-box} svg{display:block;flex:none} button{font:inherit;color:inherit}
::selection{background:var(--indigo);color:#fff} :focus-visible{outline:3px solid var(--marine-2);outline-offset:2px} .hdr :focus-visible{outline-color:#fff}
body{margin:0;background:var(--fond);color:var(--ink);font-family:"Titillium Web","Segoe UI",system-ui,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums} .num{font-variant-numeric:tabular-nums}

/* ============ bandeau indigo (Executive) + familles (v2) ============ */
.hdr{background:var(--indigo);color:#fff;position:relative;overflow:hidden;box-shadow:0 10px 30px -18px rgba(27,46,110,.9)}
.hdr .construction{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.14}
.hdr-in{position:relative;max-width:1480px;margin:0 auto;padding:12px 28px 0;display:flex;flex-direction:column;gap:10px}
.hdr-top{display:flex;align-items:center;gap:14px;flex-wrap:nowrap}
.logo-carte{background:#fff;border-radius:10px;height:54px;width:96px;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.25);border:0;padding:0;cursor:pointer}
.logo-carte img{max-height:42px;max-width:82px}
.wordmark{max-width:150px}.wordmark b{font-size:22px;font-weight:600;display:block;line-height:1.05}.wordmark span{display:block;font-size:10.5px;font-weight:300;color:rgba(255,255,255,.72);line-height:1.15;margin-top:2px}
.onglets{display:flex;flex-wrap:wrap;gap:1px;margin-left:6px;min-width:0;flex:1 1 auto}
.ong{height:34px;padding:0 10px;border-radius:9px;border:0;background:transparent;color:rgba(255,255,255,.82);font-size:12.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s;position:relative}
.ong:hover{background:rgba(255,255,255,.12);color:#fff}
.ong[aria-current="page"]{background:linear-gradient(135deg,#4FA0EE,#2E7BD0);color:#fff;box-shadow:0 4px 12px rgba(46,123,208,.5)}
.ong .n{min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:#E0523F;font-size:10.5px;font-weight:700;display:grid;place-items:center}
.hdr .droite{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}
.pill{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 9px;border-radius:12px;background:#fff;border:0;color:var(--ink-2);font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.18),0 8px 18px -8px rgba(0,0,0,.45);transition:transform .2s,box-shadow .2s}
.pill:hover{transform:translateY(-1px);box-shadow:0 3px 6px rgba(0,0,0,.2),0 12px 22px -8px rgba(0,0,0,.5)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:#2F8A5B;box-shadow:0 0 0 3px #E2F5EA}
.avatar{width:24px;height:24px;border-radius:50%;background:var(--marine);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:700}
.familles{display:flex;flex-wrap:wrap;gap:10px;padding:2px 0 14px;align-items:flex-start}
.fam{flex:1 1 auto;display:flex;flex-direction:column;gap:5px;padding:6px 8px 8px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.fam-nom{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.66);padding:0 2px;white-space:nowrap}
.fam-tuiles{display:flex;flex-wrap:wrap;gap:6px}
.tuile{display:inline-flex;align-items:center;gap:6px;height:27px;padding:0 9px 0 7px;border-radius:8px;border:0;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:transform .15s,box-shadow .15s,filter .15s;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.tuile:hover{transform:translateY(-1px);box-shadow:0 4px 10px -4px rgba(0,0,0,.45);filter:saturate(1.15)}
.tuile .c{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;font-weight:500;opacity:.75;margin-left:2px}
.f-bdd{background:#E6F1FB;color:#0C447C}.f-suivi{background:#E7F0FF;color:#0C447C}.f-metre{background:#E1F5EE;color:#085041}.f-3s{background:#FAEEDA;color:#633806}
.f-ecrit{background:#EEEDFE;color:#3C3489}.f-com{background:#FBEAF0;color:#72243E}.f-part{background:#FAECE7;color:#712B13}.f-fin{background:#E9F7EF;color:#0B6B3A}

/* ============ page (Soft UI) ============ */
main{max-width:1480px;margin:0 auto;padding:22px 28px 60px}
.haut{display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.recherche{flex:1 1 380px;max-width:640px;display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;border-radius:var(--r);background:var(--sur);box-shadow:var(--o1);color:var(--ink-3);font-size:13.5px;transition:box-shadow .2s}
.recherche:hover{box-shadow:var(--o2)}
.recherche kbd{margin-left:auto;font:inherit;font-size:11px;padding:2px 8px;border-radius:6px;background:var(--sur-2);color:var(--ink-2)}
.haut .act{margin-left:auto;display:flex;gap:8px}
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:12px;border:0;background:var(--sur);box-shadow:var(--o1);font-size:13px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:box-shadow .2s,transform .2s,background .2s}
.btn:hover{box-shadow:var(--o2);transform:translateY(-1px)}
.btn.prim{background:var(--marine);color:#fff;box-shadow:0 8px 18px -6px rgba(12,68,124,.55)}.btn.prim:hover{background:var(--marine-2)}
.salut{display:flex;align-items:flex-end;gap:16px;margin-bottom:16px;flex-wrap:wrap}
h1{margin:0;font-size:30px;font-weight:600;letter-spacing:-.015em;line-height:1.05}
.sous{color:var(--ink-2);font-size:13.5px;margin-top:4px}.sous b{color:var(--ink);font-weight:600}

/* KPI (Executive, posés en soft) */
.kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:16px}
@media (max-width:1100px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kpi{background:var(--sur);border-radius:var(--r);box-shadow:var(--o1);padding:14px 16px 12px;border:0;text-align:left;cursor:pointer;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;gap:6px;min-width:0}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--o2)}
.kpi .l{font-size:12px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:7px}.kpi .l svg{color:var(--marine)}
.kpi .v{font-size:36px;font-weight:600;line-height:1;letter-spacing:-.02em}
.kpi .tr{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600}.tr.up{color:var(--vert)}.tr.down{color:var(--rouge)}.tr.flat{color:var(--ink-3)}.tr small{font-weight:400;color:var(--ink-3)}
.kpi .spark{position:absolute;right:12px;bottom:12px;width:80px;height:28px}
.kpi.alerte{background:var(--rouge-p)}.kpi.alerte .v,.kpi.alerte .l,.kpi.alerte .l svg{color:var(--rouge)}
.kpi.alerte::after{content:"";position:absolute;top:13px;right:13px;width:10px;height:10px;border-radius:50%;background:var(--rouge);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(194,78,63,.45)}100%{box-shadow:0 0 0 12px rgba(194,78,63,0)}}
.kpi.att{background:var(--ambre-p)}.kpi.att .v,.kpi.att .l,.kpi.att .l svg{color:var(--ambre)}

/* météo multi-communes */
.meteo{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:16px}
@media (max-width:1100px){.meteo{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mt{background:var(--sur);border-radius:var(--r);box-shadow:var(--o1);padding:11px 14px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;transition:box-shadow .2s}
.mt:hover{box-shadow:var(--o2)}
.mt .ico{width:38px;height:38px;border-radius:12px;background:var(--marine-pp);display:grid;place-items:center;color:var(--ambre)}
.mt .ico.gris{color:var(--ink-3)}.mt .ico.pluie{color:var(--marine)}
.mt .v{font-size:13px;font-weight:600;line-height:1.2}.mt .s{font-size:11px;color:var(--ink-3)}
.mt .t{font-size:24px;font-weight:600;line-height:1}
.mt.ici{background:var(--marine);color:#fff}.mt.ici .ico{background:rgba(255,255,255,.14);color:#fff}.mt.ici .s{color:rgba(255,255,255,.7)}

/* semaine */
.semaine{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-bottom:18px}
@media (max-width:1000px){.semaine{grid-template-columns:repeat(4,minmax(0,1fr))}}
.jour{background:var(--sur);border-radius:var(--r);box-shadow:var(--o1);padding:12px 12px 14px;min-height:120px;min-width:0;display:flex;flex-direction:column;gap:6px;transition:box-shadow .2s,transform .2s}
.jour:hover{box-shadow:var(--o2);transform:translateY(-2px)}
.jour.auj{background:var(--marine);color:#fff;box-shadow:0 12px 26px -10px rgba(12,68,124,.6)}.jour.we{background:var(--sur-2);box-shadow:none}
.j-tete{display:flex;align-items:baseline;gap:6px}.j-tete .jn{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:600}.j-tete .jd{font-size:20px;font-weight:600;line-height:1}
.jour.auj .jn{color:rgba(255,255,255,.75)}
.ev{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;line-height:1.25;padding:5px 8px;border-radius:8px;background:var(--sur-2);color:var(--ink-2)}
.ev i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex:none;margin-top:4px}
.ev span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ev.ret{background:var(--rouge-p);color:var(--rouge)}.ev.ret i{background:var(--rouge)}.ev.att{background:var(--ambre-p);color:var(--ambre)}.ev.att i{background:var(--ambre)}.ev.ok{background:var(--vert-p);color:var(--vert)}.ev.ok i{background:var(--vert)}
.jour.auj .ev{background:rgba(255,255,255,.14);color:#fff}.jour.auj .ev i{background:#fff}
.j-vide{color:var(--ink-3);font-size:11.5px;font-style:italic;margin-top:auto}

/* cartes */
.grille{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px}
@media (max-width:1000px){.grille{grid-template-columns:1fr}}
.col{display:flex;flex-direction:column;gap:18px;min-width:0}
.carte{background:var(--sur);border-radius:var(--r);box-shadow:var(--o1);overflow:hidden;transition:box-shadow .2s}.carte:hover{box-shadow:var(--o2)}
.c-tete{display:flex;align-items:center;gap:10px;padding:14px 18px 10px}
.c-tete .ico{width:30px;height:30px;border-radius:9px;background:var(--marine-p);color:var(--marine);display:grid;place-items:center}
.c-tete h2{margin:0;font-size:15px;font-weight:600}.c-tete .n{font-size:12px;color:var(--ink-3)}.c-tete .n.chaud{color:var(--rouge);font-weight:600}.c-tete .d{margin-left:auto}
.lien{border:0;background:var(--sur-2);color:var(--marine);font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:9px;cursor:pointer;transition:background .2s}.lien:hover{background:var(--marine-p)}
.ligne{display:grid;grid-template-columns:auto 96px 1fr auto;align-items:center;gap:0 12px;padding:9px 18px;width:100%;text-align:left;background:none;border:0;cursor:pointer;transition:background .2s}
.ligne:hover{background:var(--sur-2)}.ligne + .ligne{border-top:1px solid var(--sur-3)}
.pastille{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--sur-2);color:var(--ink-2)}
.pastille.ret{background:var(--rouge-p);color:var(--rouge)}.pastille.att{background:var(--ambre-p);color:var(--ambre)}.pastille.bleu{background:var(--marine-p);color:var(--marine)}
.quand{font-size:12.5px;font-weight:600}.quand small{display:block;font-weight:400;font-size:11px;color:var(--ink-3)}.quand.ret{color:var(--rouge)}
.objet{min-width:0}.objet .t{display:block;font-size:13.5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.objet .r{font-size:11px;color:var(--ink-3)}
.etiq{font-size:11px;font-weight:700;padding:3px 9px;border-radius:8px;white-space:nowrap}
.e-ret{background:var(--rouge-p);color:var(--rouge)}.e-att{background:var(--ambre-p);color:var(--ambre)}.e-bleu{background:var(--marine-p);color:var(--marine)}.e-gris{background:var(--sur-2);color:var(--ink-2)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);text-align:left;font-weight:600;padding:8px 18px}
td{padding:9px 18px;border-top:1px solid var(--sur-3)} tbody tr{cursor:pointer;transition:background .2s}tbody tr:hover{background:var(--sur-2)}
.disc{display:inline-block;font-size:10px;letter-spacing:.05em;font-weight:700;padding:2px 7px;border-radius:6px;margin-right:8px}
td.titre{color:var(--ink-2);max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}td.maj{text-align:right;color:var(--ink-3);font-size:12px;white-space:nowrap}
.note{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:10px 18px;cursor:pointer;transition:background .2s}
.note + .note{border-top:1px solid var(--sur-3)}.note:hover{background:var(--sur-2)}
.coche{width:18px;height:18px;border-radius:6px;background:var(--sur-2);box-shadow:inset 0 1px 2px rgba(28,37,64,.12);margin-top:2px}
.note .t{font-size:13.5px;line-height:1.35}.note .r{font-size:11px;color:var(--ink-3)}
.postes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 18px 16px}
.poste{background:var(--sur-2);border-radius:12px;padding:10px 12px}
.poste .h{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:7px}.poste .h i{width:8px;height:8px;border-radius:50%;background:var(--vert)}.poste .h i.att{background:var(--ambre)}.poste .h i.froid{background:var(--ink-3)}
.poste .s{font-size:11px;color:var(--ink-3)}
.disc-l{padding:6px 18px 16px;display:flex;flex-direction:column;gap:9px}
.dl{display:grid;grid-template-columns:96px 1fr 42px;align-items:center;gap:12px;font-size:13px}
.dl .n{font-weight:600}.dl .b{height:9px;border-radius:5px;background:var(--sur-2);overflow:hidden}.dl .b i{display:block;height:100%;border-radius:5px}.dl .c{text-align:right;color:var(--ink-2);font-weight:600}
.notes{margin-top:30px;max-width:82ch;background:var(--sur);border-radius:var(--r);padding:18px 22px;box-shadow:var(--o1)}
.notes h3{margin:0 0 8px;font-size:15px;font-weight:600}.notes p{margin:0 0 8px;font-size:13px;color:var(--ink-2);line-height:1.55}.notes b{color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- repli des modules (principe de la Suite : navFull / menu Modules) ---- */
.fam-barre{display:flex;align-items:flex-start;gap:10px;padding:2px 0 14px}
.fam-barre .familles{padding:0;flex:1 1 auto}
.replier{flex:none;width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .15s}
.replier:hover{background:rgba(255,255,255,.18)}
.replier svg{transition:transform .2s}
.hdr.replie .familles{display:none}
.hdr.replie .replier svg{transform:rotate(180deg)}
.compact{display:none;align-items:center;gap:8px;flex:1 1 auto;flex-wrap:wrap}
.hdr.replie .compact{display:flex}
.menu-btn{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.1);color:#fff;font-size:13px;font-weight:600;cursor:pointer}
.menu-btn:hover{background:rgba(255,255,255,.18)}
.menu-btn .ou{font-weight:400;color:rgba(255,255,255,.6);font-size:12px}
.fchip{height:30px;padding:0 10px;border-radius:9px;border:0;font-size:12px;font-weight:700;letter-spacing:.03em;cursor:pointer;opacity:.92;transition:transform .15s,opacity .15s}
.fchip:hover{transform:translateY(-1px);opacity:1}
.fchip[aria-expanded="true"]{box-shadow:0 0 0 2px #fff}
.pop{position:fixed;z-index:30;background:var(--sur);color:var(--ink);border-radius:14px;box-shadow:0 12px 40px -10px rgba(0,0,0,.45);padding:12px 14px;display:flex;flex-direction:column;gap:12px;min-width:320px;max-width:min(92vw,900px)}
.pop .fam{background:transparent;border:0;padding:0}
.pop .fam-nom{color:var(--ink-3)}
.pop[hidden]{display:none}
.voile{position:fixed;inset:0;z-index:29}

/* ============ cockpit Dossiers ============ */
main.dos{max-width:1480px;margin:0 auto;padding:18px 28px 60px;display:grid;grid-template-columns:330px minmax(0,1fr);gap:18px}
@media (max-width:1000px){main.dos{grid-template-columns:1fr}}
.liste{background:var(--sur);border-radius:var(--r);box-shadow:var(--o1);overflow:hidden;align-self:start;position:sticky;top:12px;max-height:calc(100vh - 24px);display:flex;flex-direction:column}
.l-haut{padding:12px 12px 8px;display:flex;flex-direction:column;gap:8px}
.l-rech{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:11px;background:var(--sur-2);color:var(--ink-3);font-size:13px}
.filtres{display:flex;gap:5px;flex-wrap:wrap}
.filt{height:26px;padding:0 9px;border-radius:8px;border:0;background:var(--sur-2);color:var(--ink-2);font-size:11.5px;font-weight:700;cursor:pointer}
.filt[aria-pressed="true"]{background:var(--marine);color:#fff}
.l-corps{overflow:auto;flex:1}
.l-corps::-webkit-scrollbar{width:8px}.l-corps::-webkit-scrollbar-thumb{background:var(--sur-3);border-radius:8px}
.dl-item{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:9px 14px;border:0;background:none;width:100%;text-align:left;cursor:pointer;border-top:1px solid var(--sur-3);transition:background .15s}
.dl-item:hover{background:var(--sur-2)}
.dl-item[aria-current="true"]{background:var(--marine-p);box-shadow:inset 3px 0 0 var(--marine)}
.dl-item .ref{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--marine);font-weight:500}
.dl-item .ti{font-size:13px;font-weight:600;grid-column:1/-1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-item .st{font-size:10.5px;color:var(--ink-3)}
.l-pied{padding:8px 14px;font-size:11.5px;color:var(--ink-3);border-top:1px solid var(--sur-3)}

.fiche{display:flex;flex-direction:column;gap:16px;min-width:0}
.f-tete{background:var(--sur);border-radius:var(--r);box-shadow:var(--o1);padding:16px 20px;display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.f-tete .id{min-width:0;flex:1 1 360px}
.f-tete .ref{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;color:var(--marine);font-weight:500;display:flex;align-items:center;gap:8px}
.f-tete h1{margin:4px 0 2px;font-size:26px;font-weight:600;letter-spacing:-.015em;line-height:1.1}
.f-tete .adr{font-size:13px;color:var(--ink-2);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.f-tete .adr .sep{width:3px;height:3px;border-radius:50%;background:var(--ink-3)}
.f-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn.sm{height:34px;padding:0 12px;font-size:12.5px;border-radius:10px}
.btn.vert{background:var(--vert-p);color:var(--vert);box-shadow:none}.btn.bleu{background:var(--marine-p);color:var(--marine);box-shadow:none}
.statut{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:8px;background:var(--vert-p);color:var(--vert)}
.type{font-size:10.5px;font-weight:700;letter-spacing:.05em;padding:2px 7px;border-radius:6px}

.cockpit{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
@media (max-width:1200px){.cockpit{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ct{background:var(--sur);border-radius:12px;box-shadow:var(--o1);padding:11px 13px;display:flex;flex-direction:column;gap:3px;border:0;text-align:left;cursor:pointer;transition:transform .2s,box-shadow .2s;min-width:0}
.ct:hover{transform:translateY(-2px);box-shadow:var(--o2)}
.ct .l{font-size:11px;color:var(--ink-2);font-weight:600;display:flex;align-items:center;gap:6px}.ct .l svg{color:var(--marine)}
.ct .v{font-size:24px;font-weight:600;line-height:1.05}.ct .s{font-size:10.5px;color:var(--ink-3)}
.ct.chaud{background:var(--rouge-p)}.ct.chaud .v,.ct.chaud .l,.ct.chaud .l svg{color:var(--rouge)}
.ct.ok{background:var(--vert-p)}.ct.ok .v,.ct.ok .l svg{color:var(--vert)}

.bande{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px;align-items:start}
@media (max-width:1100px){.bande{grid-template-columns:1fr}}
.tabs{display:flex;gap:2px;padding:0 6px;border-bottom:1px solid var(--sur-3);background:var(--sur);border-radius:var(--r) var(--r) 0 0}
.tab{height:42px;padding:0 14px;border:0;background:none;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;align-items:center;gap:7px}
.tab .n{font-size:11px;background:var(--sur-2);color:var(--ink-2);padding:1px 6px;border-radius:6px}
.tab[aria-selected="true"]{color:var(--marine);border-bottom-color:var(--marine)}
.panneau{background:var(--sur);border-radius:0 0 var(--r) var(--r);box-shadow:var(--o1);padding:4px 0 8px}
.sec{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:14px 18px 6px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:6px 14px;padding:4px 18px 10px;font-size:13px}
.kv dt{color:var(--ink-3)}.kv dd{margin:0;font-weight:600}
.hon{padding:4px 18px 12px}
.hon .tot{display:flex;align-items:baseline;gap:10px;font-size:13px;color:var(--ink-2);margin-bottom:8px}.hon .tot b{font-size:22px;color:var(--ink);font-weight:600}
.tranches{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px}
.tranches i{display:block;height:100%}
.tranches i.f{background:var(--marine)}.tranches i.a{background:var(--sur-3)}
.tl{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:11.5px;color:var(--ink-2)}
.tl span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:-1px;background:var(--marine)}
.tl span.a::before{background:var(--sur-3);border:1px solid var(--rule)}

/* liste repliable + sélecteur compact */
main.dos.liste-repliee{grid-template-columns:minmax(0,1fr)}
main.dos.liste-repliee .liste{display:none}
.switch{display:none;align-items:center;gap:10px;flex-wrap:wrap}
main.dos.liste-repliee .switch{display:flex}
.switch .l-rech{flex:1 1 320px;max-width:520px;background:var(--sur);box-shadow:var(--o1);height:40px}
.switch .rec{font-size:11px;color:var(--ink-3);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.switch .chip{height:30px;padding:0 10px;border-radius:9px;border:0;background:var(--sur);box-shadow:var(--o1);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--marine);cursor:pointer}
.switch .chip:hover{box-shadow:var(--o2)}
.plier{width:34px;height:34px;border-radius:10px;border:0;background:var(--sur);box-shadow:var(--o1);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;flex:none}
.plier:hover{box-shadow:var(--o2);color:var(--marine)}
/* cadastre */
.cad{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.cad .lab{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-right:2px}
.parc{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 4px 0 10px;border-radius:8px;background:var(--sur-2);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:var(--ink)}
.parc button{width:22px;height:22px;border-radius:6px;border:0;background:transparent;color:var(--ink-3);display:grid;place-items:center;cursor:pointer}
.parc button:hover{background:var(--marine-p);color:var(--marine)}
.parc.tout{background:var(--marine-p);color:var(--marine);font-family:inherit;font-weight:600;cursor:pointer;padding:0 10px;border:0}
.parc.vide{background:var(--ambre-p);color:var(--ambre);font-family:inherit;font-weight:600}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--sur);padding:9px 14px;border-radius:10px;font-size:13px;font-weight:600;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:50}
.toast.on{opacity:1;transform:translateX(-50%)}
/* verrou finance */
.verrou{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--ink-3);font-weight:600}
body.collab .fin{display:none!important}
body.collab .ct.ok{background:var(--sur-2)}body.collab .ct.ok .v{font-size:13px;color:var(--ink-3);font-weight:600}
body.collab .ct.ok .s,.ct.ok .verr{display:none}body.collab .ct.ok .verr{display:inline-flex}
.vue{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);margin-left:auto}
.vue button{height:28px;padding:0 10px;border-radius:8px;border:0;background:var(--sur-2);font-size:11.5px;font-weight:700;color:var(--ink-2);cursor:pointer}
.vue button[aria-pressed="true"]{background:var(--marine);color:#fff}

/* liste repliable + sélecteur compact */
main.dos.liste-repliee{grid-template-columns:minmax(0,1fr)}
main.dos.liste-repliee .liste{display:none}
.switch{display:none;align-items:center;gap:10px;flex-wrap:wrap}
main.dos.liste-repliee .switch{display:flex}
.switch .l-rech{flex:1 1 320px;max-width:520px;background:var(--sur);box-shadow:var(--o1);height:40px}
.switch .rec{font-size:11px;color:var(--ink-3);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.switch .chip{height:30px;padding:0 10px;border-radius:9px;border:0;background:var(--sur);box-shadow:var(--o1);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;color:var(--marine);cursor:pointer}
.switch .chip:hover{box-shadow:var(--o2)}
.plier{width:34px;height:34px;border-radius:10px;border:0;background:var(--sur);box-shadow:var(--o1);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;flex:none}
.plier:hover{box-shadow:var(--o2);color:var(--marine)}
/* cadastre */
.cad{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.cad .lab{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-right:2px}
.parc{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 4px 0 10px;border-radius:8px;background:var(--sur-2);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:var(--ink)}
.parc button{width:22px;height:22px;border-radius:6px;border:0;background:transparent;color:var(--ink-3);display:grid;place-items:center;cursor:pointer}
.parc button:hover{background:var(--marine-p);color:var(--marine)}
.parc.tout{background:var(--marine-p);color:var(--marine);font-family:inherit;font-weight:600;cursor:pointer;padding:0 10px;border:0}
.parc.vide{background:var(--ambre-p);color:var(--ambre);font-family:inherit;font-weight:600}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:var(--sur);padding:9px 14px;border-radius:10px;font-size:13px;font-weight:600;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:50}
.toast.on{opacity:1;transform:translateX(-50%)}
/* verrou finance */
.verrou{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--ink-3);font-weight:600}
body.collab .fin{display:none!important}
body.collab .ct.ok{background:var(--sur-2)}body.collab .ct.ok .v{font-size:13px;color:var(--ink-3);font-weight:600}
body.collab .ct.ok .s,.ct.ok .verr{display:none}body.collab .ct.ok .verr{display:inline-flex}
.vue{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2);margin-left:auto}
.vue button{height:28px;padding:0 10px;border-radius:8px;border:0;background:var(--sur-2);font-size:11.5px;font-weight:700;color:var(--ink-2);cursor:pointer}
.vue button[aria-pressed="true"]{background:var(--marine);color:#fff}
