/* Cockpit Cadevia — DA claire cobalt (31 juil. 2026, réf. maquette v3 validée).
   Palette demandée par Emeric : BLANC · BLEU COBALT FONCÉ (à la place du noir) ·
   BLEU COBALT CLAIR (à la place du violet). ⚠️ Les NOMS de variables historiques
   sont conservés (app.js + styles inline les référencent) — seules les VALEURS
   passent en clair. La barre latérale est remplacée par la pilule de navigation
   du haut (défilable → utilisable sur iPhone). */
:root{
  --sig:#2E6BF0; --sigText:#2E6BF0; --ink:#10182B; --ink2:#5B6472; --label:#8A93A6; --ink3:#8A93A6;
  --bg:#F2F4FA; --surface:#FFFFFF; --surface2:#EAF1FF; --well:#F3F6FC; --track:#ECF0F8;
  --ok:#2FA84F; --warn:#C98A1F; --bad:#E5484D; --info:#2492B3; --violet:#4D8DFF; /* violet → cobalt clair */
  --line:#E7EBF4; --line2:#D9E0EE;
  --dark:#0C1B3F; --dark2:#13275A; --cob:#4D8DFF; --cobDeep:#2E6BF0; --cobTint:#EAF1FF; --cobBorder:#D6E4FF;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Sora',system-ui,sans-serif;background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;padding:0}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ── Coquille : topbar + contenu (plus de barre latérale) ── */
.shell{display:flex;flex-direction:column;min-height:100vh;background:var(--bg)}
.top{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:9px 16px 9px 18px;margin:16px auto 10px;width:min(1240px,calc(100% - 32px));
  box-shadow:0 10px 28px -20px #10306430}
.brand{display:flex;align-items:baseline;gap:8px;flex:0 0 auto;margin-right:auto}
.brand .wm{font-size:15px;font-weight:800;letter-spacing:3px;color:var(--ink)}
.brand .ck{font-size:9.5px;font-weight:700;letter-spacing:1.4px;color:var(--sigText);text-transform:uppercase}
/* La navigation a sa PROPRE ligne, pleine largeur, et passe à la ligne si besoin.
   ⚠️ Régression du 31 juil. 2026 : logée dans la barre du logo, elle débordait de
   378 px et cachait Marketing, Pilotage, Labo et Comprendre — un onglet hors champ
   est un onglet qui n'existe pas. Jamais de défilement horizontal invisible ici. */
.pillnav{display:flex;flex-wrap:wrap;align-items:center;gap:3px;background:var(--dark);border-radius:22px;
  padding:6px;margin:0 auto 4px;width:min(1240px,calc(100% - 32px))}
.pillnav a,.nav a{display:flex;align-items:center;gap:5px;color:#B9C6E4;font-size:12px;font-weight:650;
  padding:7px 12px;border-radius:999px;cursor:pointer;white-space:nowrap;text-decoration:none;border:none;flex:0 0 auto}
.pillnav a.on,.nav a.on{background:var(--cob);color:#fff}
.pillnav a:hover:not(.on){color:#fff}
.nav a .n{margin-left:2px;font-size:9.5px;font-weight:800;color:#fff;background:var(--bad);border-radius:999px;padding:1px 6px}
.nav a .ph{margin-left:2px;font-size:8.5px;font-weight:700;letter-spacing:.5px;color:#8FA2CC;
  border:1px solid #ffffff2a;border-radius:999px;padding:1px 6px;text-transform:uppercase}
.phasePill{display:inline-flex;flex:0 0 auto;font-size:9.5px;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--ok);background:#2FA84F14;border:1px solid #2FA84F33;border-radius:999px;padding:5px 10px}

.main{width:min(1240px,calc(100% - 32px));margin:0 auto;padding:22px 4px 56px;min-width:0}
.mainHead{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.mainHead h2{font-size:26px;font-weight:800;letter-spacing:-.5px}
.mainHead .date{font-size:13px;color:var(--label);padding-bottom:3px}
.mainHead .right{margin-left:auto;display:flex;gap:8px;padding-bottom:2px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;border-radius:999px;padding:4px 11px;border:1px solid var(--line2);color:var(--ink2)}
.chip.live{color:var(--ok);border-color:#2FA84F33;background:#2FA84F12}
.chip.sim{color:#8A6412;border-color:#E8A13D55;background:#FBF1DF}

.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;
  box-shadow:0 14px 34px -26px #10306440}
.cardTitle{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:1.5px;
  color:var(--label);text-transform:uppercase;margin-bottom:16px}
.cardTitle .dot{width:8px;height:8px;border-radius:50%}
.cardTitle .sub{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--label)}
.row{display:flex} .col{display:flex;flex-direction:column}
.g16{gap:16px}.g24{gap:24px}.mt16{margin-top:16px}.mt24{margin-top:24px}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px 22px;position:relative;overflow:hidden;
  box-shadow:0 14px 34px -26px #10306440}
.kpi .l{font-size:11px;font-weight:700;letter-spacing:1.3px;color:var(--label);text-transform:uppercase}
.kpi .v{font-size:29px;font-weight:800;letter-spacing:-.5px;margin-top:10px;display:flex;align-items:baseline;gap:8px}
.kpi .v small{font-size:14px;font-weight:600;color:var(--ink2)}
.kpi .v .delta{font-size:13px;font-weight:750;color:var(--ok)}
.kpi .v .delta.down{color:var(--bad)}
.kpi .s{font-size:12.5px;color:var(--ink2);margin-top:8px;line-height:1.5}
.kpi .s b{color:var(--ink);font-weight:600}
.kpi svg.spark{position:absolute;right:16px;top:20px;opacity:.9}

.coach{display:flex;background:var(--surface);border-radius:20px;border:1px solid var(--cobBorder);overflow:hidden;
  box-shadow:0 14px 34px -26px #10306440}
.coach .barL{width:6px;flex:0 0 auto;background:linear-gradient(var(--cobDeep),var(--cob))}
.coach .cc{padding:20px 24px}
.coach .lab{font-size:10.5px;font-weight:800;letter-spacing:1.6px;color:var(--cobDeep);text-transform:uppercase}
.coach .tx{font-size:15px;color:var(--ink);margin-top:10px;line-height:1.65;max-width:78ch}
.coach .tx b{font-weight:700}
.coach .sig{font-size:11.5px;color:var(--label);margin-top:12px}

.alist{display:flex;flex-direction:column}
.al{display:flex;align-items:flex-start;gap:13px;padding:13px 2px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.55}
.al:last-child{border-bottom:none}
.al .sev{flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:6px}
.al .t b{color:var(--ink);font-weight:600}
.al .t{color:var(--ink2)}
.al .when{margin-left:auto;flex:0 0 auto;font-size:11.5px;color:var(--label);padding-top:2px}

.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-size:10.5px;font-weight:700;letter-spacing:1.2px;color:var(--label);text-transform:uppercase;
  text-align:left;padding:0 12px 10px 0;border-bottom:1px solid var(--line2)}
.tbl td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);color:var(--ink2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl td b{color:var(--ink);font-weight:600}
.tbl .r{text-align:right}.tbl th.r{text-align:right}
.tbl .barCell{width:130px}
.tbl .hbar{height:7px;border-radius:5px;background:var(--track);overflow:hidden}
.tbl .hbar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--cobDeep),var(--cob))}

/* Charts */
.chartWrap{background:var(--well);border:1px solid var(--line);border-radius:14px;padding:18px 18px 10px}
.axisLbl{font-size:10.5px;fill:#8A93A6;font-family:'Sora',sans-serif;font-weight:600}
.axisVal{font-size:11px;fill:#5B6472;font-family:'Sora',sans-serif;font-weight:700}

/* Funnel */
.fun{display:flex;flex-direction:column;gap:6px}
.fr{display:flex;align-items:center;gap:14px}
.fr .fl{width:210px;flex:0 0 auto;text-align:right;font-size:13.5px;color:var(--ink2)}
.fr .fl b{color:var(--ink);font-weight:600}
.fr .fbwrap{flex:1;height:30px;background:var(--well);border-radius:8px;overflow:hidden;position:relative}
.fr .fb{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--cobDeep),var(--cob));display:flex;align-items:center;
  justify-content:flex-end;padding-right:10px;font-size:12px;font-weight:700;color:#fff;min-width:64px}
.fr.gold .fb{background:linear-gradient(90deg,var(--cob),var(--ok))}
.fr .fpct{width:120px;flex:0 0 auto;font-size:12.5px;color:var(--label)}
.fr .fpct b{color:var(--ink2);font-weight:700}
.fdrop{display:flex;align-items:center;gap:8px;padding-left:224px;font-size:11.5px;color:var(--warn);height:16px}

/* Écrans onboarding */
.screens{display:flex;align-items:flex-end;gap:7px;height:130px;padding:4px 2px 0}
.screens .sc{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.screens .sc i{width:100%;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,var(--cob),var(--cobDeep))}
.screens .sc.pb i{background:linear-gradient(180deg,#E8A13D,#C98A1F)}
.screens .sc span{font-size:9.5px;color:var(--label);font-weight:600}
.screens .sc.pb span{color:var(--warn)}

.mchip{font-size:11px;font-weight:600;color:var(--ink2);background:var(--well);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px}
.mchip.cond{color:var(--cobDeep);border-color:#4D8DFF40;background:#4D8DFF12}
.mchip.stat{color:var(--info);border-color:#2492B333;background:#2492B310}
.mchip.good{color:var(--ok);border-color:#2FA84F2e;background:#2FA84F10}
.mchip.warn{color:var(--warn);border-color:#E8A13D40;background:#E8A13D12}

/* Vraie notification iOS (mode sombre) — inchangée : c'est un MIROIR de l'iPhone,
   la bulle reste sombre volontairement, posée sur la carte claire. */
.notif{display:flex;gap:10px;align-items:flex-start;background:rgba(44,46,52,.92);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border:1px solid rgba(255,255,255,.09);border-radius:22px;padding:11px 13px 12px;box-shadow:0 10px 26px rgba(12,27,63,.22)}
.notif .ic{flex:0 0 auto;width:40px;height:40px;border-radius:9px;background-image:url(/cadevia-icon.png);background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.notif .nbody{flex:1;min-width:0;padding-top:1px}
.notif .nhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.notif .napp{font-size:12px;font-weight:600;color:rgba(235,235,245,.62)}
.notif .ntime{font-size:12px;color:rgba(235,235,245,.5);white-space:nowrap;flex:0 0 auto}
.notif .nt{font-size:14px;font-weight:700;color:#fff;margin-top:1px;letter-spacing:-.1px}
.notif .nb{font-size:13.5px;color:rgba(235,235,245,.82);line-height:1.35;margin-top:1px}
.regItem{display:grid;grid-template-columns:minmax(340px,1.05fr) 1fr;gap:20px;align-items:start;padding:15px 0;border-bottom:1px solid var(--line)}
.regItem:last-child{border-bottom:none}
.regMeta{display:flex;flex-wrap:wrap;gap:7px;align-content:flex-start;padding-top:4px}

.tier{background:var(--well);border:1px solid var(--line);border-radius:14px;padding:18px 20px;flex:1}
.tier .tn{display:flex;align-items:baseline;gap:10px}
.tier .tn b{font-size:16px;font-weight:700;white-space:nowrap}
.tier .tn span{font-size:13px;color:var(--ink2)}
.tier .flow{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13px;color:var(--ink2);flex-wrap:wrap}
.tier .flow b{color:var(--ink);font-weight:700}
.tier .flow .arr{color:var(--label)}
.meter{height:7px;border-radius:5px;background:var(--track);overflow:hidden;margin-top:14px}
.meter i{display:block;height:100%;border-radius:5px}
.note{font-size:12.5px;color:var(--label);line-height:1.6}

.split{display:flex;height:14px;border-radius:8px;overflow:hidden;margin-top:14px}
.split i{height:100%}
.legend{display:flex;gap:18px;margin-top:10px;font-size:12px;color:var(--ink2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}

.panel{display:none}
.panel.on{display:block}
h4.secT{font-size:13px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink2);margin:32px 0 12px}
h4.secT:first-of-type{margin-top:0}

/* Marketing : checklist + kanban */
.ck{display:flex;flex-direction:column;gap:2px}
.cki{display:flex;align-items:center;gap:12px;padding:11px 4px;font-size:14px;color:var(--ink2);border-bottom:1px solid var(--line)}
.cki:last-child{border-bottom:none}
.cki .box{flex:0 0 auto;width:18px;height:18px;border-radius:6px;border:1.5px solid var(--line2);background:var(--surface)}
.cki.done{color:var(--label);text-decoration:line-through}
.cki.done .box{background:var(--ok);border-color:var(--ok)}

.kan{display:grid;gap:12px}
.kcol{background:var(--well);border:1px solid var(--line);border-radius:14px;padding:12px}
.kcol .kh{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--label);margin-bottom:10px}
.kcol .kh i{width:8px;height:8px;border-radius:50%}
.kcard{background:var(--surface);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;font-size:13px;
  color:var(--ink);margin-bottom:8px;line-height:1.4;box-shadow:0 6px 14px -12px #10306440}
.kcard:last-child{margin-bottom:0}
.kcard small{display:block;font-size:10.5px;color:var(--label);margin-top:4px;font-weight:400}

/* Onglets pas encore branchés : placeholder honnête */
.future{background:var(--cobTint);border:1px dashed var(--cobBorder);border-radius:16px;padding:26px 30px;max-width:720px}
.future h3{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:10px}
.future p{font-size:14px;color:var(--ink2);line-height:1.65}
.future ul{margin:10px 0 0 18px;font-size:13.5px;color:var(--ink2);line-height:1.7}
.future .manip{display:inline-block;margin-top:12px;font-size:12px;font-weight:700;color:#8A6412;background:#FBF1DF;
  border:1px solid #E8A13D55;border-radius:999px;padding:5px 12px}

/* Écran jeton */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.gate .box{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:32px;width:360px;
  box-shadow:0 24px 50px -30px #10306450}
.gate h1{font-size:18px;font-weight:800;letter-spacing:2px;margin-bottom:16px}
.gate input{width:100%;background:var(--well);border:1px solid var(--line2);border-radius:10px;color:var(--ink);padding:12px 14px;font:inherit;margin-bottom:16px}
.gate button{width:100%;background:var(--cob);border:none;border-radius:999px;color:#fff;font:inherit;font-weight:700;padding:12px;cursor:pointer}

.hidden{display:none!important}

/* ── Tableau « coût de l'IA par client » ── */
.iaBar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px}
.iaCtl{background:var(--well);border:1px solid var(--line2);border-radius:10px;color:var(--ink);
  padding:8px 11px;font:inherit;font-size:12.5px}
.iaCtl:focus{outline:none;border-color:var(--cob)}
#ia-recherche{flex:1;min-width:160px}
.iaBtn{cursor:pointer;color:var(--ink2)}
.iaBtn:hover{color:var(--ink);border-color:var(--cob)}
.iaCols{display:flex;flex-wrap:wrap;gap:6px}
.iaCols label{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  letter-spacing:.4px;color:var(--label);border:1px solid var(--line2);border-radius:999px;
  padding:5px 10px;cursor:pointer;user-select:none}
.iaCols label.on{color:var(--cobDeep);border-color:#4D8DFF55;background:#4D8DFF12}
.iaCols input{display:none}
.iaWrap{overflow-x:auto;margin-top:16px}
.iaTbl{width:100%;border-collapse:collapse;font-size:12.5px;white-space:nowrap}
.iaTbl th{position:sticky;top:0;background:var(--surface);text-align:right;font-size:10.5px;
  font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--label);
  padding:9px 12px;border-bottom:1px solid var(--line2);cursor:pointer;user-select:none}
.iaTbl th:first-child,.iaTbl td:first-child{text-align:left;position:sticky;left:0;
  background:var(--surface);z-index:1}
.iaTbl th:hover{color:var(--cobDeep)}
.iaTbl th .ar{margin-left:5px;opacity:.45;font-size:9px}
.iaTbl th.tri .ar{opacity:1;color:var(--cobDeep)}
.iaTbl td{text-align:right;padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink2)}
.iaTbl tbody tr:hover td{background:#4D8DFF0a}
.iaTbl td.cli{color:var(--ink);font-weight:600}
.iaTbl td.cli small{display:block;font-weight:400;color:var(--label);font-size:11px}
.iaTbl td.fort{color:var(--ink);font-weight:700}
.iaTbl tr.tot td{border-top:1px solid var(--line2);border-bottom:none;color:var(--ink);
  font-weight:700;background:var(--well)}
.iaTbl .warn{color:var(--warn)}
.iaNote{margin-top:12px;font-size:11.5px;color:var(--label);line-height:1.6}
.iaNote b{color:var(--ink2);font-weight:600}

/* ── Page Pilotage ── */
.pilCols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;align-items:start}
.pilCol{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px;
  box-shadow:0 14px 34px -26px #10306440}
.pilCol h3{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--label);margin:0 0 4px}
.pilCol h3 .dot{width:8px;height:8px;border-radius:50%}
.pilCol h3 .n{margin-left:auto;font-size:11px;letter-spacing:0;color:var(--label)}
.pilCol .sous{font-size:11px;color:var(--label);line-height:1.5;margin:0 0 14px}
.pilIt{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid var(--line);
  font-size:13px;line-height:1.5;color:var(--ink2)}
.pilIt:first-of-type{border-top:none}
.pilIt .box{flex:none;width:15px;height:15px;margin-top:2px;border:1.5px solid var(--line2);
  border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:10px;color:transparent;background:var(--surface)}
.pilIt .box:hover{border-color:var(--cob)}
.pilIt.fait .box{background:var(--ok);border-color:var(--ok);color:#fff}
.pilIt.fait .txt{text-decoration:line-through;color:var(--label)}
.pilIt .txt{flex:1;cursor:pointer}
.pilIt .who{flex:none;font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  border:1px solid var(--line2);border-radius:999px;padding:2px 6px;color:var(--label);margin-top:1px}
.pilIt .who.moi{color:var(--cobDeep);border-color:#4D8DFF55}
.pilIt .del{flex:none;opacity:0;cursor:pointer;color:var(--label);font-size:15px;line-height:1;padding:0 2px}
.pilIt:hover .del{opacity:1}
.pilIt .del:hover{color:var(--bad)}
.pilAdd{width:100%;margin-top:14px;background:var(--well);border:1px solid var(--line2);
  border-radius:10px;color:var(--ink);padding:9px 11px;font:inherit;font-size:12.5px}
.pilAdd:focus{outline:none;border-color:var(--cob)}
.pilAdd::placeholder{color:var(--label)}

/* ── Détail d'un client (onglet Coûts) ── */
.dHead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.dHead .who{flex:1;min-width:200px}
.dHead .who b{display:block;font-size:19px;font-weight:700;color:var(--ink)}
.dHead .who span{font-size:12px;color:var(--label)}
.dBack{cursor:pointer;background:var(--well);border:1px solid var(--line2);border-radius:10px;
  color:var(--ink2);padding:8px 12px;font:inherit;font-size:12.5px}
.dBack:hover{color:var(--ink);border-color:var(--cob)}
.dKpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:20px}
.dKpi{background:var(--well);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.dKpi .l{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--label)}
.dKpi .v{font-size:22px;font-weight:700;color:var(--ink);margin-top:6px}
.dKpi .s{font-size:11px;color:var(--label);margin-top:4px;line-height:1.4}
.dSec{margin-top:26px}
.dSec h4{font-size:11.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--label);margin:0 0 6px}
.dSec .exp{font-size:12px;color:var(--label);line-height:1.6;margin:0 0 14px}
.dChart{width:100%;overflow-x:auto}
.dChart svg{display:block}
.dChart .gx{font-size:9px;fill:var(--label)}
.dLeg{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:11.5px;color:var(--ink2)}
.dLeg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.dPart{display:flex;flex-direction:column;gap:11px}
.dPartRow{display:grid;grid-template-columns:118px 1fr 92px;align-items:center;gap:12px;font-size:12.5px}
.dPartRow .nom{color:var(--ink2)}
.dPartRow .bar{height:10px;border-radius:999px;background:var(--track);overflow:hidden}
.dPartRow .bar i{display:block;height:100%;border-radius:999px}
.dPartRow .val{text-align:right;color:var(--ink);font-weight:700}
.dPartRow small{display:block;font-weight:400;color:var(--label);font-size:10.5px}

/* ── Écoute client (V2-A) : liste cobalt foncé + détail cobalt clair ──────
   ⚠️ Préfixe `ec` partout : `.split` est déjà pris plus haut (barre empilée). */
.ecSplit{background:var(--dark);border-radius:24px;padding:16px;display:flex;gap:16px;
  box-shadow:0 24px 50px -30px #0C1B3F99;align-items:stretch}
.ecList{flex:1;min-width:0;padding:4px 2px;max-height:560px;overflow-y:auto}
.ecList .ecHead{display:flex;align-items:center;gap:10px;color:#fff;font-size:14px;font-weight:800;padding:8px 10px 12px}
.ecList .ecHead .cnt{font-size:10.5px;font-weight:800;color:#B9C6E4;background:#ffffff14;border-radius:999px;padding:3px 9px}
.ecRowS{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;cursor:pointer}
.ecRowS:hover{background:#ffffff0a}
.ecRowS.on{background:var(--cob)}
.ecRowS .pic{width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;font-size:14px;background:#ffffff1a}
.ecRowS.on .pic{background:#ffffff2e}
.ecRowS .tt{min-width:0;line-height:1.3;flex:1}
.ecRowS .tt b{display:block;color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ecRowS .tt span{font-size:10.5px;color:#AEBBDD}
.ecRowS.on .tt span{color:#E3EDFF}
.ecRowS .st{flex:0 0 auto;font-size:9px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  border-radius:999px;padding:3px 8px;background:#ffffff14;color:#C9D4EE}
.ecRowS.on .st{background:var(--dark);color:#fff}
.ecRowS.traite .tt b{color:#8FA2CC;text-decoration:line-through}
.ecDetail{flex:1.25;min-width:0;background:linear-gradient(160deg,var(--cob),var(--cobDeep));
  border-radius:18px;padding:22px 24px;color:#fff}
.ecDetail .dh{display:flex;align-items:flex-start;gap:14px}
.ecDetail .dh .lab{font-size:10px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:#DCE9FF}
.ecDetail .dh h3{font-size:19px;font-weight:800;letter-spacing:-.2px;margin-top:5px;line-height:1.3}
.ecDetail .dh .pill{margin-left:auto;flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;background:#ffffff26;border-radius:999px;padding:5px 11px}
.ecDetail .quote{background:#ffffff1f;border-radius:13px;padding:13px 15px;font-size:13px;line-height:1.55;
  font-style:italic;margin-top:15px;color:#F2F7FF}
.ecDetail .cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:14px}
.ecDetail .cell{background:#ffffff22;border-radius:13px;padding:11px 13px}
.ecDetail .cell .cl{font-size:9.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#DCE9FF}
.ecDetail .cell .cv{font-size:15px;font-weight:800;margin-top:4px;word-break:break-word}
.ecDetail .foot{display:flex;align-items:center;gap:12px;background:var(--dark);border-radius:14px;
  padding:13px 16px;margin-top:16px;flex-wrap:wrap}
.ecDetail .foot .f{line-height:1.3}
.ecDetail .foot .f span{display:block;font-size:9.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#8FA2CC}
.ecDetail .foot .f b{font-size:13px;font-weight:700;color:#fff}
.ecDetail .foot .btnW{margin-left:auto;background:#fff;color:var(--dark);font-size:12px;font-weight:800;
  border:none;border-radius:999px;padding:10px 16px;cursor:pointer}
.ecDetail .foot .btnW:disabled{opacity:.55;cursor:default}
.ecDetail .foot .btnG{background:transparent;color:#fff;border:1px solid #ffffff44;font-size:12px;
  font-weight:700;border-radius:999px;padding:10px 14px;cursor:pointer}
.ecDetail a{color:#fff}
/* Bandeau « où en est la sortie » */
.sortie{display:flex;flex-wrap:wrap;gap:10px}
.sortie .et{background:var(--well);border:1px solid var(--line);border-radius:14px;padding:12px 15px;min-width:150px}
.sortie .et .l{font-size:9.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--label)}
.sortie .et .v{font-size:15px;font-weight:800;color:var(--ink);margin-top:5px}
.sortie .et .s{font-size:11px;color:var(--ink2);margin-top:3px}

/* ── Échéances administratives (famille A, 31 juil. 2026) ── */
.ecRow{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:13px;color:var(--ink2)}
.ecRow:first-of-type{border-top:none}
.ecRow .box{flex:none;width:15px;height:15px;margin-top:2px;border:1.5px solid var(--line2);border-radius:5px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;color:transparent;background:var(--surface)}
.ecRow.fait .box{background:var(--ok);border-color:var(--ok);color:#fff}
.ecRow.fait .txt{text-decoration:line-through;color:var(--label)}
.ecRow .txt{flex:1;cursor:pointer}
.ecRow .txt b{color:var(--ink);font-weight:600}
.ecRow .txt small{display:block;color:var(--label);font-size:11px;margin-top:1px}
.ecRow .quand{flex:none;font-size:10.5px;font-weight:700;border-radius:999px;padding:3px 9px;margin-top:1px}
.ecRow .quand.loin{color:var(--ink2);background:var(--well);border:1px solid var(--line)}
.ecRow .quand.proche{color:#8A6412;background:#FBF1DF;border:1px solid #E8A13D55}
.ecRow .quand.depassee{color:#fff;background:var(--bad);border:1px solid var(--bad)}
.ecRow .quand.reglee{color:var(--ok);background:#2FA84F12;border:1px solid #2FA84F33}
.ecRow .del{flex:none;opacity:0;cursor:pointer;color:var(--label);font-size:15px;line-height:1;padding:0 2px}
.ecRow:hover .del{opacity:1}
.ecRow .del:hover{color:var(--bad)}
.ecAjout{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.ecAjout input{background:var(--well);border:1px solid var(--line2);border-radius:10px;color:var(--ink);
  padding:9px 11px;font:inherit;font-size:12.5px}
.ecAjout input:focus{outline:none;border-color:var(--cob)}
#ech-titre{flex:1;min-width:160px}
.btnP{display:inline-flex;align-items:center;gap:8px;background:var(--cob);color:#fff;font-size:12.5px;font-weight:700;
  border:none;border-radius:999px;padding:9px 16px;cursor:pointer}
.btnP:hover{background:var(--cobDeep)}

/* ── Objectif de trajectoire (Business) ── */
.objGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.objGrid label{display:flex;flex-direction:column;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--label)}
.objGrid input{background:var(--well);border:1px solid var(--line2);border-radius:10px;color:var(--ink);
  padding:10px 12px;font:inherit;font-size:13.5px}
.objGrid input:focus{outline:none;border-color:var(--cob)}
.objResume{margin-top:14px;font-size:13px;color:var(--ink2);line-height:1.6}
.objResume b{color:var(--ink)}

/* Pied de page : dernière synthèse (ex-sideFoot, l'id side-foot est conservé pour app.js) */
.footNote{width:min(1240px,calc(100% - 32px));margin:0 auto 28px;padding:14px 4px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--label);line-height:1.6}
.footNote b{color:var(--ink2);font-weight:600}