@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100,800..900&family=Instrument+Sans:wght@400;500;600;700&display=swap");
:root{
  --navy:#0D1B3E;--navy2:#16295C;--navy3:#22377A;--orange:#F26B21;--orange2:#FF8A4C;
  --paper:#F6F7FB;--card:#fff;--line:#E2E6F0;--ink:#0D1B3E;--ink2:#2B3552;--muted:#667089;
  --field:#fff;--hover:#F3F5FB;--hover-faint:rgba(13,27,62,.025);--col:rgba(13,27,62,.04);--track:#E7EAF4;--ic-bg:#EEF1FA;
  --on-bg:#0D1B3E;
  --green:#16A34A;--red:#DC2626;--amber:#D97706;
  --ok-bg:#EAF8EF;--ok-fg:#0E7A38;--ok-line:#BFE6CC;
  --soon-bg:#FFF3E3;--soon-fg:#B45309;
  --late-bg:#FDECEC;--late-fg:#B91C1C;--late-line:#F8C9C9;--alerte-bg:#FFF5F5;
  --new-bg:#E8EEFF;--new-fg:#2742A8;--grey-bg:#EEF0F6;
  --warn-bg:#FFF7ED;--warn-line:#FDD9B5;
  --shadow:0 1px 2px rgba(13,27,62,.05),0 8px 24px rgba(13,27,62,.06);
  --titre:"Archivo","Segoe UI",Arial,sans-serif;--texte:"Instrument Sans","Segoe UI",Arial,sans-serif;
  color-scheme:light;
}
/* Thème sombre : choisi par la personne (« Sombre »), ou suivi automatiquement quand l'appareil est en mode sombre (« Auto »).
   Les mêmes noms de couleurs, d'autres valeurs : rien d'autre à changer dans les pages. */
:root[data-theme="dark"]{
  --navy3:#7C93F0;--orange2:#FF9A63;
  --paper:#0A1020;--card:#121B33;--line:#27345A;--ink:#E7EBF7;--ink2:#C3CCE6;--muted:#9AA6C6;
  --field:#0D1530;--hover:#19244A;--hover-faint:rgba(255,255,255,.035);--col:rgba(255,255,255,.04);--track:#27345A;--ic-bg:#1B2750;
  --on-bg:#2F4BB0;
  --green:#34D07A;--red:#FF6B66;--amber:#F5A524;
  --ok-bg:rgba(52,208,122,.15);--ok-fg:#5FE39A;--ok-line:rgba(52,208,122,.35);
  --soon-bg:rgba(245,165,36,.16);--soon-fg:#FFBE5C;
  --late-bg:rgba(255,107,102,.15);--late-fg:#FF9B97;--late-line:rgba(255,107,102,.38);--alerte-bg:rgba(255,107,102,.08);
  --new-bg:rgba(124,147,240,.18);--new-fg:#A9BBFF;--grey-bg:#1C2750;
  --warn-bg:rgba(245,165,36,.10);--warn-line:rgba(245,165,36,.38);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  color-scheme:dark;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --navy3:#7C93F0;--orange2:#FF9A63;
    --paper:#0A1020;--card:#121B33;--line:#27345A;--ink:#E7EBF7;--ink2:#C3CCE6;--muted:#9AA6C6;
    --field:#0D1530;--hover:#19244A;--hover-faint:rgba(255,255,255,.035);--col:rgba(255,255,255,.04);--track:#27345A;--ic-bg:#1B2750;
    --on-bg:#2F4BB0;
    --green:#34D07A;--red:#FF6B66;--amber:#F5A524;
    --ok-bg:rgba(52,208,122,.15);--ok-fg:#5FE39A;--ok-line:rgba(52,208,122,.35);
    --soon-bg:rgba(245,165,36,.16);--soon-fg:#FFBE5C;
    --late-bg:rgba(255,107,102,.15);--late-fg:#FF9B97;--late-line:rgba(255,107,102,.38);--alerte-bg:rgba(255,107,102,.08);
    --new-bg:rgba(124,147,240,.18);--new-fg:#A9BBFF;--grey-bg:#1C2750;
    --warn-bg:rgba(245,165,36,.10);--warn-line:rgba(245,165,36,.38);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font-family:var(--texte);color:var(--ink);background:var(--paper);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--titre);letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- cadre ---------- */
.dash{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{background:linear-gradient(180deg,var(--navy),#091330);color:#fff;padding:20px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;overflow:auto}
.logo{display:flex;align-items:center;gap:10px;padding:4px 10px 18px}
.logo i{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--orange),var(--orange2));display:grid;place-items:center;font:900 17px var(--titre);font-style:normal;color:#fff}
.logo b{font:800 17px/1 var(--titre)}.logo small{display:block;color:#8F9BBA;font-size:11px;font-weight:500;margin-top:3px}
.nav{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:#B6C1DE;font-weight:500;width:100%;transition:.18s}
.nav:hover{background:rgba(255,255,255,.07);color:#fff}
.nav.on{background:rgba(242,107,33,.16);color:#fff}.nav.on .ico{color:var(--orange2)}
.nav .dot{margin-left:auto;background:var(--orange);color:#fff;border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px}
.side .bas{margin-top:auto;padding:12px;border-radius:12px;background:rgba(255,255,255,.06);font-size:13px;color:#B6C1DE}
.side .bas b{color:#fff;display:block}
.side .bas form{margin-top:8px}.side .bas button{color:#FFB88A;font-weight:600;font-size:13px}
.main{padding:26px clamp(16px,3vw,38px) 100px;max-width:1180px;width:100%}
.top{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.top h1{font-size:clamp(24px,3.2vw,32px);font-weight:900;line-height:1.1}
.top p{color:var(--muted);margin-top:4px}
.top .droite{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- boutons et formulaires ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:11px;font-weight:700;transition:.18s;white-space:nowrap}
.btn.p{background:var(--orange);color:#fff;box-shadow:0 6px 16px rgba(242,107,33,.3)}.btn.p:hover{background:#E05A12;transform:translateY(-1px)}
.btn.s{background:var(--card);border:1px solid var(--line)}.btn.s:hover{border-color:var(--navy3)}
.btn.v{background:var(--ok-bg);color:var(--ok-fg)}.btn.d{background:var(--late-bg);color:var(--late-fg)}
.btn.petit{padding:6px 12px;font-size:13px;border-radius:9px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
label{display:block;font-weight:600;font-size:13.5px;margin:0 0 4px}
input,select,textarea{width:100%;font:inherit;color:inherit;background:var(--field);border:1px solid var(--line);border-radius:10px;padding:9px 12px;transition:.15s}::placeholder{color:var(--muted);opacity:.8}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--navy3);box-shadow:0 0 0 3px rgba(34,55,122,.12)}
textarea{min-height:84px;resize:vertical}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.form .plein{grid-column:1/-1}
.form .aide{color:var(--muted);font-size:12.5px;margin-top:3px}
.cache{display:none!important}
dialog{border:0;border-radius:18px;padding:22px 24px;width:min(560px,94vw);box-shadow:0 30px 80px rgba(13,27,62,.35);color:var(--ink);background:var(--card)}
dialog::backdrop{background:rgba(7,15,36,.55);backdrop-filter:blur(2px)}
dialog h2{font-size:20px;font-weight:900;margin-bottom:14px}
dialog .pied{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.flash{border-radius:12px;padding:11px 16px;margin-bottom:16px;font-weight:600}
.flash.ok{background:var(--ok-bg);color:var(--ok-fg);border:1px solid var(--ok-line)}.flash.err{background:var(--late-bg);color:var(--late-fg);border:1px solid var(--late-line)}

/* ---------- cartes ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi .l{color:var(--muted);font-size:13px;font-weight:500}
.kpi .v{font:900 clamp(22px,2.4vw,29px)/1.15 var(--titre);margin:6px 0 4px;font-variant-numeric:tabular-nums}
.kpi .v small{font-size:13px;font-weight:700;color:var(--muted)}
.kpi .d{font-size:12.5px;font-weight:600}.up{color:var(--green)}.dn{color:var(--red)}
.kpi.alerte{border-color:var(--late-line);background:linear-gradient(180deg,var(--card),var(--alerte-bg))}
.kpi.alerte::after{content:"";position:absolute;right:14px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--red);animation:pulse 1.8s infinite}
.ring{position:absolute;right:14px;top:14px;width:46px;height:46px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(220,38,38,.5)}70%{box-shadow:0 0 0 10px rgba(220,38,38,0)}100%{box-shadow:0 0 0 0 rgba(220,38,38,0)}}
.cols{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:18px 20px;margin-bottom:18px}
.card h2{font-size:17px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.card h2 em{font-style:normal;margin-left:auto;font:600 12.5px var(--texte);color:var(--muted)}
.vide{color:var(--muted);padding:14px 4px;text-align:center}
.lig{display:flex;align-items:center;gap:12px;padding:11px 8px;border-radius:12px;transition:.15s}
a.lig{cursor:pointer}a.lig:hover{background:var(--hover)}
.lig+.lig{border-top:1px solid var(--line)}
.av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:800 14px var(--titre);color:#fff;flex:none}
.av.gros{width:62px;height:62px;border-radius:18px;font-size:22px}
.lig .nom{font-weight:700}.lig .sub{color:var(--muted);font-size:13px}
.lig .droite{margin-left:auto;text-align:right;flex:none}
.lig .mont{font-weight:700;font-variant-numeric:tabular-nums}
.chip{display:inline-block;border-radius:999px;font-size:11.5px;font-weight:700;padding:2px 9px;white-space:nowrap}
.c-ok{background:var(--ok-bg);color:var(--ok-fg)}.c-soon{background:var(--soon-bg);color:var(--soon-fg)}.c-late{background:var(--late-bg);color:var(--late-fg)}.c-new{background:var(--new-bg);color:var(--new-fg)}.c-grey{background:var(--grey-bg);color:var(--muted)}
.bars{display:flex;align-items:flex-end;gap:10px;height:132px;padding-top:6px}
.bars div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end;font-size:11.5px;color:var(--muted)}
.bars span{width:100%;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--navy3),var(--navy));height:0;min-height:3px;transition:height .9s cubic-bezier(.2,.8,.2,1)}
.bars div:last-child span{background:linear-gradient(180deg,var(--orange2),var(--orange))}
.appar{opacity:0;transform:translateY(12px);animation:ent .55s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes ent{to{opacity:1;transform:none}}
.tache{display:flex;align-items:center;gap:10px;padding:8px 4px}.tache+.tache{border-top:1px solid var(--line)}
.tache form{display:contents}
.coche{width:24px;height:24px;border-radius:8px;border:2px solid var(--line);display:grid;place-items:center;flex:none;transition:.15s}
.coche:hover{border-color:var(--green);background:var(--ok-bg)}
.tache .t{flex:1}.tache .t small{color:var(--muted);display:block}
.bloc-ajout{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.bloc-ajout input{flex:1;min-width:140px}.bloc-ajout input[type=date]{flex:0 0 150px}

/* ---------- tableau ---------- */
.tableau{width:100%;border-collapse:collapse;font-size:14px}
.tableau th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
.tableau td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tableau tr:last-child td{border-bottom:0}
.tableau .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.filtres{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.filtres input[type=search]{flex:1;min-width:200px}.filtres select{width:auto}
.onglets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.onglets a{padding:7px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-weight:600;font-size:13.5px}
.onglets a.on{background:var(--on-bg);color:#fff;border-color:var(--on-bg)}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:14px}

/* ---------- fiche ---------- */
.retour{color:var(--muted);font-weight:600;margin-bottom:10px;display:inline-flex;gap:6px;align-items:center}
.retour:hover{color:var(--orange)}
.fiche-tete{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.fiche-tete h1{font-size:26px;font-weight:900;line-height:1.1}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.sante{display:flex;align-items:center;gap:14px}
.ring2{width:74px;height:74px;position:relative;flex:none}
.ring2 b{position:absolute;inset:0;display:grid;place-items:center;font:900 20px var(--titre)}
.prochaine{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;border-radius:16px;padding:18px 20px;margin-bottom:18px;position:relative;overflow:hidden}
.prochaine::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(var(--orange),transparent 65%);opacity:.35;pointer-events:none}
.prochaine small{color:var(--orange2);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:11.5px}
.prochaine h3{font-size:19px;margin:4px 0 6px}.prochaine p{color:#C9D2EA;font-size:14px;margin-bottom:12px}
.svc{display:flex;gap:12px;align-items:center;padding:12px 0;flex-wrap:wrap}.svc+.svc{border-top:1px solid var(--line)}
.svc .ic{width:40px;height:40px;border-radius:12px;background:var(--ic-bg);display:grid;place-items:center;color:var(--navy3);flex:none}
.svc .corps{flex:1;min-width:180px}.svc .corps small{color:var(--muted);display:block}
.svc .acts{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line)}
.ev{position:relative;padding:0 0 16px}
.ev::before{content:"";position:absolute;left:-23px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--card);border:3px solid var(--navy3)}
.ev.o::before{border-color:var(--orange)}.ev.g::before{border-color:var(--green)}
.ev b{display:block}.ev small{color:var(--muted)}
.resume .rdv{padding:8px 0}.resume .rdv+.rdv{border-top:1px solid var(--line)}
.resume small{color:var(--muted);display:block;font-size:13px}.resume b.gros{font:900 21px var(--titre)}
.note-texte{white-space:pre-wrap;color:var(--ink2)}

/* ---------- connexion et pages seules ---------- */
body.plein{display:grid;place-items:center;padding:20px;background:radial-gradient(90% 70% at 85% 0,#2A4392 0,transparent 55%),var(--navy)}
.boite-centre{background:var(--card);color:var(--ink);border-radius:22px;padding:34px 32px;width:min(430px,100%);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.boite-centre h1{font-size:26px;font-weight:900;margin-bottom:6px}
.boite-centre p{color:var(--muted);margin-bottom:14px}
.boite-centre .logo{padding:0 0 18px;color:var(--ink)}
.boite-centre form{display:grid;gap:12px}
.boite-centre .btn{justify-content:center;padding:13px}

.bnav{display:none}
.side .bas .lien-compte{display:block;margin-top:6px;color:#fff;font-weight:600;font-size:13px}
.haut-mobile{display:none}
.top .rech{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0 14px;color:var(--muted);min-width:240px;flex:0 1 300px}
.top .rech input{border:0;background:none;padding:10px 0;width:100%;outline:none;box-shadow:none;color:var(--ink)}
.top .rech:focus-within{border-color:var(--navy3);box-shadow:0 0 0 3px rgba(34,55,122,.12)}
.top .rech + .droite{margin-left:0}
.gros-code{font-size:24px;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}
.cle-secrete{font-family:ui-monospace,Consolas,monospace;font-size:19px;font-weight:700;letter-spacing:.08em;background:var(--paper);border:1px dashed var(--line);border-radius:10px;padding:10px 14px;margin:8px 0;word-break:break-all;user-select:all}
.codes-secours{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:12px 0}
.codes-secours code{font-family:ui-monospace,Consolas,monospace;font-size:16px;font-weight:700;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px 10px;text-align:center;user-select:all}
.etapes{padding-left:20px;margin:12px 0;display:grid;gap:8px}
.card .aide,.boite-centre .aide{color:var(--muted);font-size:12.5px}
.alerte-secu{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:12px;padding:11px 16px;margin-bottom:16px;font-size:14px}
.alerte-secu a{font-weight:700;color:var(--orange);text-decoration:underline}
@media(max-width:980px){
  /* minmax(0,1fr) : sans lui, un tableau large élargit toute la page au lieu de défiler dans sa carte. */
  .dash{grid-template-columns:minmax(0,1fr)}.side{display:none}
  .main{min-width:0}.card{overflow-x:auto}
  .top .rech{flex:1 1 100%;margin-left:0;order:3}
  .haut-mobile{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--navy);color:#fff;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top));font-size:13px}
  .haut-mobile b{font-weight:700}.haut-mobile a,.haut-mobile button{color:#FFB88A;font-weight:600;font-size:13px}
  .haut-mobile .liens{display:flex;gap:14px;align-items:center}
  .kpis{grid-template-columns:repeat(2,1fr)}.cols{grid-template-columns:1fr}
  .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--navy);padding:6px 6px calc(6px + env(safe-area-inset-bottom));justify-content:space-around}
  .bnav a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;color:#9FB0D8;padding:6px 10px;border-radius:10px;font-weight:600}
  .bnav a.on{color:#fff;background:rgba(242,107,33,.2)}.bnav .ico{width:21px;height:21px}
  .form{grid-template-columns:1fr}.actions{margin-left:0}
  .tableau .masque-mobile{display:none}
  /* Sur téléphone, chaque ligne d'un tableau devient une petite fiche : tout est visible, rien ne défile de côté.
     (Un tableau marqué « fixe » reste un vrai tableau, qui défile dans sa carte.) */
  .tableau:not(.fixe),.tableau:not(.fixe) tbody{display:block}
  .tableau:not(.fixe) thead{display:none}
  .tableau:not(.fixe) tr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:14px 0;border-bottom:1px solid var(--line)}
  .tableau:not(.fixe) tr:last-child{border-bottom:0}
  .tableau:not(.fixe) td{display:block;padding:0;border:0;min-width:0}
  .tableau:not(.fixe) td:first-child{flex:1 1 100%}
  .tableau:not(.fixe) td.num{text-align:left}
  .tableau:not(.fixe) td.masque-mobile{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.appar{opacity:1;transform:none}}
@media print{.side,.bnav,.top .droite,.actions,dialog{display:none!important}.dash{display:block}.card{box-shadow:none}}

/* ---------- Phase 2 : entonnoir des prospects ---------- */
.kanban{display:grid;grid-template-columns:repeat(6,minmax(220px,1fr));gap:14px;overflow-x:auto;padding-bottom:14px;align-items:start;scroll-snap-type:x proximity}
.col-k{background:var(--col);border-radius:16px;padding:12px;display:grid;gap:10px;scroll-snap-align:start;min-width:0}
.col-k header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.col-k h2{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.col-k.col-gagne h2{color:var(--green)}.col-k.col-perdu h2{color:var(--red)}
.carte-k{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:8px;box-shadow:var(--shadow)}
.carte-k .sub{color:var(--muted);font-size:12.5px}
.acts-k{display:flex;gap:6px;flex-wrap:wrap}
.vide.petit{font-size:13px;padding:10px 4px}

/* ---------- Projets ---------- */
.proj{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;gap:8px 18px;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line)}
.proj:last-child{border-bottom:0}.proj:hover{background:var(--hover-faint)}
.proj-t b{display:block}.proj-t small,.proj-b small{color:var(--muted);font-size:12.5px}
.barre{height:8px;border-radius:99px;background:var(--track);overflow:hidden;margin-bottom:4px}
.barre span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--navy3),var(--orange))}
.gros-barre{height:10px;margin-bottom:14px}
.proj-s{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.tache.faite .t{color:var(--muted);text-decoration:line-through}
.coche.on{background:var(--green);border-color:var(--green);color:#fff}

/* ---------- Devis, factures, reçus ---------- */
.feuille{--card:#fff;--line:#E2E6F0;--ink:#0D1B3E;--ink2:#2B3552;--muted:#667089;--grey-bg:#EEF0F6;--ok-bg:#EAF8EF;--ok-fg:#0E7A38;--soon-bg:#FFF3E3;--soon-fg:#B45309;--late-bg:#FDECEC;--late-fg:#B91C1C;--new-bg:#E8EEFF;--new-fg:#2742A8;--navy3:#22377A;--hover:#F3F5FB;color-scheme:light;background:#fff;color:#0D1B3E;border:1px solid var(--line);border-radius:16px;padding:clamp(18px,4vw,36px);box-shadow:var(--shadow);margin-bottom:18px}
.f-tete{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.f-emetteur{line-height:1.55;font-size:14px;color:#2B3552}.f-emetteur .marque{font-family:var(--titre);font-size:20px;color:var(--navy)}
.f-titre{text-align:right}.f-titre h1{font-size:clamp(24px,4vw,32px);font-weight:900;letter-spacing:.04em;color:var(--orange)}
.f-num{font-weight:700;margin:2px 0 6px;font-variant-numeric:tabular-nums}
.f-parties{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:20px;font-size:14px;line-height:1.55}
.f-parties small,.f-note small,.f-pied small{display:block;text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:3px}
.f-lignes{overflow-x:auto}
.f-lignes .tableau th{background:#F3F5FB}.piste{stroke:var(--track)}
.f-totaux{margin:14px 0 0 auto;width:min(340px,100%);display:grid;gap:6px}
.f-totaux>div{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.f-totaux .grand{border-top:2px solid var(--navy);padding-top:8px;font-size:18px;font-weight:800}
.f-totaux .reste{color:var(--orange);border-top:0}
.f-note{margin-top:18px;font-size:14px}
.f-pied{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:#2B3552}
.signature{height:46px;border-bottom:1px solid var(--line)}
.doc-page{background:var(--paper);padding:18px 16px 40px}
.doc-page .feuille{max-width:820px;margin:0 auto 18px}
.barre-impression{max-width:820px;margin:0 auto 14px;display:flex;gap:8px;flex-wrap:wrap}
.lien-copie{width:100%;font-size:13px}
.lignes-edit{display:grid;gap:8px;margin-top:6px}
.entete-lignes,.ligne-edit{display:grid;grid-template-columns:minmax(0,1fr) 70px 140px;gap:8px}
.entete-lignes{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
dialog.large{width:min(720px,calc(100vw - 24px))}
.menu-plus{width:min(360px,calc(100vw - 24px))}
.nav-plus{display:flex;align-items:center;gap:12px;padding:13px 6px;border-bottom:1px solid var(--line);font-weight:600}
.nav-plus.on{color:var(--orange)}
.bnav button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;color:#9FB0D8;padding:6px 10px;border-radius:10px;font-weight:600}
.bnav button.on{color:#fff;background:rgba(242,107,33,.2)}.bnav button .ico{width:21px;height:21px}
@media(max-width:700px){
  .kanban{grid-template-columns:repeat(6,minmax(78vw,1fr))}
  .proj{grid-template-columns:1fr}.proj-s{justify-content:flex-start}
  .f-parties,.f-pied{grid-template-columns:1fr}.f-titre{text-align:left}
  .entete-lignes{display:none}
  .ligne-edit{grid-template-columns:1fr 1fr}.ligne-edit input:first-child{grid-column:1/-1}
}
@media print{
  body.doc-page,body{background:#fff!important}
  .barre-impression{display:none!important}
  .feuille{border:0;box-shadow:none;padding:0;margin:0;max-width:none;border-radius:0}
  .chip{border:1px solid #999;background:#fff!important;color:#000!important}
}
/* ---------- Choix du thème (Auto / Clair / Sombre) ---------- */
.side{border-right:1px solid rgba(255,255,255,.06)}
.theme-choix{display:flex;gap:3px;background:rgba(255,255,255,.07);border-radius:10px;padding:3px;margin-top:10px}
.theme-choix button{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 4px;border-radius:8px;font-size:12px;font-weight:600;color:#B6C1DE;transition:.15s}
.theme-choix button .ico{width:15px;height:15px}
.theme-choix button[aria-pressed="true"]{background:rgba(255,255,255,.18);color:#fff}
.card .theme-choix,.boite-centre .theme-choix{background:var(--grey-bg);max-width:340px;margin-top:6px}
.card .theme-choix button,.boite-centre .theme-choix button{color:var(--muted);padding:9px 6px;font-size:13.5px}
.card .theme-choix button[aria-pressed="true"],.boite-centre .theme-choix button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.boite-centre .theme-choix{margin:14px auto 0;max-width:none}
.theme-cycle{display:inline-flex;align-items:center;gap:5px}
.theme-cycle .ico{width:17px;height:17px}
/* ---------- Phase 4 : liens (Ariahfrica, E-ComPlus, Aria) ---------- */
.bulles{display:grid;gap:8px;max-height:560px;overflow-y:auto;padding:4px 2px}
.bulle{max-width:88%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.45;word-break:break-word}
.bulle small{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.7;margin-bottom:2px}
.bulle.client{background:var(--grey-bg);justify-self:start;border-bottom-left-radius:4px}
.bulle.aria{background:var(--new-bg);color:var(--new-fg);justify-self:end;border-bottom-right-radius:4px}
.lien-etat{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
/* ---------- Phase 5 : espace client et élève (téléphone d'abord) ---------- */
body.espace{background:var(--paper);height:auto;min-height:100%;padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.esp-haut{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--navy);color:#fff;padding:10px clamp(14px,4vw,28px);padding-top:calc(10px + env(safe-area-inset-top))}
.esp-haut .logo{padding:0}.esp-haut .logo b{font-size:16px}
.esp-actions{display:flex;align-items:center;gap:14px}
.esp-actions .theme-cycle,.esp-lien{color:#FFB88A;font-weight:600;font-size:13px}
.esp-main{max-width:720px;margin:0 auto;padding:20px clamp(14px,4vw,28px)}
.esp-titre{font-size:clamp(24px,5vw,32px);font-weight:900;line-height:1.1;margin-bottom:6px}
.esp-sous{color:var(--muted);margin-bottom:16px}
.esp-kpis{grid-template-columns:1fr 1fr}
.esp-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--navy);padding:6px 6px calc(6px + env(safe-area-inset-bottom));justify-content:space-around}
.esp-nav a{position:relative}
.esp-nav .dot{position:absolute;top:2px;right:6px;margin:0;background:var(--orange);color:#fff;border-radius:999px;font-size:10.5px;font-weight:700;padding:0 6px;line-height:16px}
.proj-esp{padding:8px 0}.proj-esp+.proj-esp{border-top:1px solid var(--line)}.proj-esp small{color:var(--muted)}
.bulle.moi{background:var(--new-bg);color:var(--new-fg);justify-self:end;border-bottom-right-radius:4px}
.bulle.eux{background:var(--grey-bg);justify-self:start;border-bottom-left-radius:4px}
.bulles-espace{max-height:none}
.seance{display:flex;align-items:center;gap:14px;padding:12px 4px;border-top:1px solid var(--line)}
.seance:first-of-type{border-top:0}
.seance .jour{width:52px;flex:none;text-align:center;background:var(--ic-bg);border-radius:12px;padding:6px 0}
.seance .jour b{display:block;font:900 20px var(--titre);line-height:1.1}.seance .jour small{color:var(--muted);font-size:11.5px;text-transform:uppercase}
.seance small{display:block;color:var(--muted)}
.seance>div:nth-child(2){flex:1;min-width:0}
.seance.passee{opacity:.55}
.seance.prochaine{background:var(--new-bg);border-radius:14px;border-top-color:transparent}
.seance.prochaine+.seance{border-top-color:transparent}.esp-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;color:#9FB0D8;padding:6px 12px;border-radius:10px;font-weight:600;min-width:64px}
.esp-nav a.on{color:#fff;background:rgba(242,107,33,.2)}.esp-nav .ico{width:21px;height:21px}