/* Écran de l'usine à leads. Base : les maquettes choisies par Harlem (plaquette 02, E et K ; police Geist, sombre par défaut). */
:root{
  --bg:#0e1116;--surf:#151a21;--surf2:#1b212a;--line:#2b323d;--line2:#3a4350;--text:#eef1f5;--muted:#aab3c0;--faint:#8b95a3;
  --acc:#2a4fe0;--acc-ink:#fff;--acc-deep:#1b37b0;--acc-soft:#1a2a66;
  --ok:#3ee8b8;--ok-ink:#04281e;--ok-txt:#3ee8b8;--warn:#e2bc4c;--warn-txt:#e2bc4c;--bad:#ff6b6b;--bad-txt:#ff8a8a;--bad-ink:#2a0b0b;
  --t-1:.8125rem;--t0:.9375rem;--t1:1.0625rem;--t2:1.3125rem;--t3:1.625rem;--t4:2.125rem;
  --ff:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;--focus:#fff;
}
html.clair{
  --bg:#eef0f3;--surf:#fff;--surf2:#f6f7f9;--line:#d5dae1;--line2:#bcc3cd;--text:#11151b;--muted:#47505d;--faint:#5b6572;
  --acc-soft:#dde4ff;--ok:#0b8f6a;--ok-ink:#fff;--ok-txt:#08775b;--warn:#b7860b;--warn-txt:#8a6300;--bad:#c62828;--bad-txt:#b71c1c;--bad-ink:#fff;--focus:#11151b;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{background:var(--bg);color:var(--text);font:400 var(--t0)/1.45 var(--ff);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
::selection{background:var(--acc);color:#fff}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit}
svg.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.k{color:var(--muted)}.f{color:var(--faint)}
.num{font-variant-numeric:tabular-nums}
/* boutons */
.bt{height:34px;padding:0 14px;border-radius:8px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:var(--t-1);white-space:nowrap;border:1px solid var(--line2);background:var(--surf);color:var(--text);transition:transform .15s ease-out,background .15s,border-color .15s}
.bt:hover{border-color:var(--text)}
.bt:active{transform:scale(.97)}
.bt.p{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.bt.p:hover{background:var(--acc-deep)}
.bt.g{background:var(--ok);border-color:var(--ok);color:var(--ok-ink)}
.bt.q{background:transparent}
.bt.sm{height:28px;padding:0 10px;font-size:.75rem}
.bt.xl{height:48px;padding:0 20px;font-size:var(--t1)}
/* pilules de statut : couleur + forme + mot, jamais la couleur seule (Harlem est daltonien) */
.st{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:99px;font-size:.75rem;font-weight:600;white-space:nowrap;border:1px solid var(--line2);color:var(--text)}
.st i{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.st.appeler{border-style:dashed;color:var(--muted)}
.st.rappeler{color:var(--warn-txt);border-color:var(--warn)} .st.rappeler i{border-radius:1px;transform:rotate(45deg)}
.st.contacte{color:var(--text);border-color:var(--acc);background:var(--acc-soft)}
.st.rdv{color:var(--ok-txt);border-color:var(--ok)} .st.rdv i{border-radius:1px}
.st.signe{background:var(--text);color:var(--bg);border-color:var(--text)}
.st.pasint{color:var(--faint);text-decoration:line-through}
.st.stop{color:var(--bad-txt);border-color:var(--bad)} .st.stop i{width:10px;height:2px;border-radius:0}
.st.trier{color:var(--warn-txt);border-color:var(--warn);border-style:dotted}
/* familles : pictogramme + mot */
.fam{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-1);font-weight:500;white-space:nowrap}
.fam svg{width:14px;height:14px}
/* champs */
.inp{height:34px;border-radius:8px;border:1px solid var(--line2);background:var(--surf);padding:0 10px;font-size:var(--t-1);color:var(--text);width:100%}
.inp::placeholder{color:var(--faint)}
select.inp{appearance:none;padding-right:26px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 14px) 14px,calc(100% - 9px) 14px;background-size:5px 5px;background-repeat:no-repeat}
textarea.inp{height:auto;min-height:70px;padding:8px 10px;resize:vertical;line-height:1.45}
/* chips de filtre */
.chip{height:28px;padding:0 10px;border-radius:99px;border:1px solid var(--line2);background:var(--surf);font-size:.75rem;font-weight:600;display:inline-flex;align-items:center;gap:6px;color:var(--text)}
.chip .n{color:var(--faint);font-weight:500}
.chip.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.chip.on .n{color:var(--bg);opacity:.7}
/* coque commune */
.coque{display:flex;flex-direction:column;min-height:100vh}
.haut{height:52px;display:flex;align-items:center;gap:18px;padding:0 20px;border-bottom:1px solid var(--line);background:var(--surf)}
.haut .marque{font-weight:700;font-size:var(--t1);display:flex;align-items:center;gap:9px;letter-spacing:-.01em}
.haut .marque svg{width:20px;height:20px;stroke-width:2}
.haut nav{display:flex;gap:2px;margin-left:8px}
.haut nav a{height:52px;display:flex;align-items:center;padding:0 12px;text-decoration:none;color:var(--muted);font-weight:500;border-bottom:2px solid transparent}
.haut nav a.on{color:var(--text);border-bottom-color:var(--text);font-weight:600}
.haut .droite{margin-left:auto;display:flex;align-items:center;gap:10px}
.haut .qui{display:flex;align-items:center;gap:8px;font-size:var(--t-1);color:var(--muted)}
.haut .qui b{width:28px;height:28px;border-radius:50%;background:var(--acc);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}
.compteurs{display:flex;gap:18px;font-size:var(--t-1);color:var(--muted)}
.compteurs b{color:var(--text);font-weight:600}
table{border-collapse:collapse;width:100%}
th{text-align:left;font-weight:500;color:var(--muted);font-size:.75rem;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;background:var(--surf)}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:var(--t-1)}
tr.sel td{background:var(--acc-soft)}
tr:hover td{background:var(--surf2)}
tr.sel:hover td{background:var(--acc-soft)}
.nom{font-weight:600;color:var(--text)}
.etoile{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.etoile svg{width:12px;height:12px;fill:currentColor;stroke:none}
.vide{padding:40px;text-align:center;color:var(--muted);border:1px dashed var(--line2);border-radius:12px}
.histo{display:grid;gap:8px}
.histo div{display:grid;grid-template-columns:86px 1fr;gap:10px;font-size:var(--t-1)}
.histo .d{color:var(--faint)}
.sep{height:1px;background:var(--line);margin:14px 0}
h2.sec{font-size:.75rem;font-weight:600;color:var(--muted);letter-spacing:.02em;margin:0 0 8px}
.note-ex{font-size:.75rem;color:var(--faint);border:1px dashed var(--line2);border-radius:4px;padding:0 5px;margin-left:6px;vertical-align:1px}
body{overflow:auto}
.coque{min-height:100vh}
.av{width:24px;height:24px;border-radius:50%;background:var(--acc);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.6875rem;font-weight:700;flex:none}
.ex{font-size:.6875rem;color:var(--faint);border:1px dashed var(--line2);border-radius:4px;padding:0 5px;font-weight:500;white-space:nowrap}
.panneau{background:var(--surf);border:1px solid var(--line);border-radius:12px}
.titre{font-size:var(--t1);font-weight:650;letter-spacing:-.005em;display:flex;align-items:center;gap:10px}
.titre .k{font-weight:400;font-size:var(--t-1)}
.barre{height:8px;border-radius:4px;background:var(--line);overflow:hidden;display:flex}
.barre i{display:block;height:100%}
.tok{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--line2);background:var(--surf2);font-weight:600;font-size:var(--t-1);color:var(--text);white-space:nowrap}
.tok::after{content:"";width:6px;height:6px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg) translateY(-2px);margin-left:2px}
.tok.vide{border-style:dashed;color:var(--muted);font-weight:500}
.lst{display:grid}
.lst>div{display:grid;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:var(--t-1)}
.lst>div:last-child{border-bottom:0}
.d{color:var(--faint);font-size:.75rem}
.regle{display:flex;gap:8px;align-items:flex-start;font-size:.75rem;color:var(--muted)}
.regle svg{width:14px;height:14px;margin-top:1px;flex:none;color:var(--ok-txt)}
.lien{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2);font-weight:600}
.st.nrp{color:var(--muted);border-style:dotted}.st.nrp i{background:none;border:1.5px solid currentColor}
/* ---- Ajouts de l'écran réel ---- */
html{color-scheme:dark}
html.clair{color-scheme:light}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:10px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}
*{scrollbar-color:var(--line2) transparent}
input,textarea{caret-color:var(--text)}
.haut nav button{height:52px;display:flex;align-items:center;padding:0 12px;color:var(--muted);font-weight:500;border-bottom:2px solid transparent}
.haut nav button.on{color:var(--text);border-bottom-color:var(--text);font-weight:600}
.haut nav button:hover{color:var(--text)}
main.page{flex:1;display:grid;gap:16px;padding:20px 28px;min-height:0}
/* Phrase du constructeur de lot (E) */
.phr{padding:18px 22px;display:grid;gap:12px}
.phr .p{font-size:var(--t2);line-height:2.1;font-weight:500;letter-spacing:-.005em}
.phr .tok{height:36px;font-size:var(--t1);padding:0 12px;vertical-align:2px;cursor:pointer}
.phr .tok:hover{border-color:var(--text)}
.phr .tok[aria-expanded="true"]{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.phr .tok input{width:3.2em;background:none;border:0;font:inherit;color:inherit;text-align:right;outline:none}
.phr .tok.nombre::after{display:none}
.phr .ajout{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.phr .ajout .k{font-size:var(--t-1)}
.phr .retire{margin-left:2px;color:var(--faint);font-size:var(--t-1);text-decoration:underline;text-underline-offset:3px}
.cols{display:grid;grid-template-columns:1fr 340px;gap:18px;min-height:0;align-items:start}
.cols table td{font-size:var(--t-1);padding:7px 10px}
.table-defile{max-height:calc(100vh - 330px);min-height:220px;overflow:auto}
.res{display:grid;gap:12px;align-content:start}
.res .panneau{padding:14px 16px;display:grid;gap:9px}
.res .lst>div{grid-template-columns:1fr auto}
.go{display:flex;justify-content:space-between;align-items:center;gap:12px}
.entete-tab{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 16px 10px}
.bt[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.bt.xl{width:100%;justify-content:center}
/* Fenêtre d'un jeton */
.pop{position:absolute;z-index:40;min-width:240px;max-width:340px;overflow:auto;overscroll-behavior:contain;background:var(--surf);border:1px solid var(--line2);border-radius:12px;padding:10px;box-shadow:0 12px 32px -8px rgb(0 0 0 / .45);display:grid;gap:2px}
.pop label{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;font-size:var(--t-1);cursor:pointer}
.pop label:hover{background:var(--surf2)}
.pop label .n{margin-left:auto;color:var(--faint)}
.pop input[type=checkbox],.pop input[type=radio],.radio input{accent-color:var(--acc);width:16px;height:16px}
.pop .pied{display:flex;justify-content:space-between;gap:8px;padding:8px 4px 2px;border-top:1px solid var(--line);margin-top:6px}
.pop:has(.tete-cases){min-width:min(360px,calc(100vw - 16px));max-width:min(420px,calc(100vw - 16px))}
.pop.large{min-width:min(400px,calc(100vw - 16px));max-width:min(440px,calc(100vw - 16px))}
.pop .pied{position:sticky;bottom:-10px;background:var(--surf);margin-bottom:-10px;padding-bottom:10px;z-index:1}
.pop .tete-cases{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.pop .tete-cases .k{font-size:.75rem;font-weight:600}
.pop .tete-cases span{display:flex;gap:4px}
.pop .titre-sec{font-size:.75rem;font-weight:600;color:var(--muted);padding:8px 8px 4px}
.pop .puces{display:flex;flex-wrap:wrap;gap:6px;padding:2px 8px 6px}
.pop .reg{display:flex;align-items:center}
.pop .reg label{flex:1;font-weight:600}
.pop .deplier{width:28px;height:28px;border-radius:8px;color:var(--muted);flex:none}
.pop .deplier:hover{background:var(--surf2);color:var(--text)}
.pop .deplier svg{width:14px;height:14px;transition:transform .15s}
.pop .deplier[aria-expanded="true"] svg{transform:rotate(90deg)}
.pop .deps{padding-left:22px;display:grid;gap:0}
.pop .deps[hidden]{display:none}
.pop .deps .puces{padding:4px 8px}
.pop label.vide0{color:var(--faint)}
.pop .periode{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:6px 8px;padding:4px 8px 8px 34px}
.pop .periode .inp{height:30px;padding:0 6px}
.pop .note{font-size:.75rem;color:var(--faint);padding:4px 8px}
.pop .ligne{display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:var(--t-1)}
/* Messages */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;font-size:var(--t-1);z-index:60;box-shadow:0 8px 24px -6px rgb(0 0 0 / .4);animation:monte .25s cubic-bezier(.16,1,.3,1)}
.toast.err{background:var(--bad);color:#fff}
@keyframes monte{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.charge{opacity:.55;transition:opacity .2s}
.alerte{border:1px solid var(--warn);color:var(--warn-txt);border-radius:10px;padding:10px 12px;font-size:var(--t-1)}
/* Connexion */
.connexion{min-height:100vh;display:grid;place-items:center;padding:24px}
.connexion form{width:min(400px,100%);display:grid;gap:14px;padding:28px}
.connexion h1{font-size:var(--t3);letter-spacing:-.02em;font-weight:700;display:flex;align-items:center;gap:10px}
.connexion h1 svg{width:26px;height:26px}
.connexion p{color:var(--muted);font-size:var(--t-1)}
/* Équipe (K) */
.k-grille{display:grid;grid-template-columns:330px 1fr;gap:18px;align-items:start}
.k-gauche{display:grid;gap:14px}
.k-gauche .panneau{padding:16px;display:grid;gap:12px}
.bascule{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line2);border-radius:10px;padding:3px;gap:3px}
.bascule button{height:30px;border-radius:7px;font-weight:600;font-size:var(--t-1);color:var(--muted)}
.bascule button.on{background:var(--text);color:var(--bg)}
.champ{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:10px;font-size:var(--t-1)}
.radio{display:flex;align-items:center;gap:10px;font-size:var(--t-1);cursor:pointer}
.k-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.k-cols .panneau{padding:14px 16px;display:grid;gap:10px;align-content:start;min-height:240px}
.k-cols .tete{display:flex;justify-content:space-between;align-items:baseline}
.k-cols .tete b{font-size:var(--t3);font-weight:650}
.k-cols .lst{max-height:300px;overflow:auto}
.k-cols .lst>div{grid-template-columns:1fr auto}
.k-reglages{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:14px 16px;font-size:var(--t-1)}
.k-reglages input{width:52px;height:30px;text-align:center;display:inline-block;margin:0 4px}
.equipe-liste>div{grid-template-columns:auto 1fr auto}
@media (max-width:1100px){.cols,.k-grille{grid-template-columns:1fr}.k-cols,.k-reglages{grid-template-columns:1fr}.table-defile{max-height:none}}
@media (max-width:640px){main.page{padding:16px}.haut{gap:8px;padding:0 12px}.haut .droite .k{display:none}.phr .p{font-size:var(--t1)}}
/* Liste noire (30-10-2026) */
.ln-groupe{padding:14px 16px;display:grid;gap:10px}
.ln-groupe .tete{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ln-groupe .tete .d{margin-top:2px}
.ln-droite{display:flex;align-items:center;gap:10px;flex:none}
.ln-droite b{font-size:var(--t2);font-weight:650}
.ln-lst>div{grid-template-columns:1fr auto 32px}
.ln-nb{color:var(--muted);min-width:28px;text-align:right}
.ln-x{height:26px;width:26px;padding:0;justify-content:center;color:var(--muted)}
.ln-x:hover{color:var(--text)}
.ln-x svg{width:14px;height:14px}
.ln-champ{grid-template-columns:1fr;gap:4px}
/* Confirmation façon appli (30-10-2026) */
.voile{position:fixed;inset:0;z-index:60;background:rgb(0 0 0 / .55);display:grid;place-items:center;padding:16px}
.modale{background:var(--surf);border:1px solid var(--line2);border-radius:14px;padding:20px;max-width:460px;width:100%;display:grid;gap:14px;box-shadow:0 24px 60px -12px rgb(0 0 0 / .6)}
.modale p{font-size:var(--t0);line-height:1.5;color:var(--text)}
.modale .go{justify-content:flex-end}
.bt.danger{background:var(--bad);border-color:var(--bad);color:var(--bad-ink)}
.bt.danger:hover{filter:brightness(.92)}
/* Liste noire : un onglet par groupe */
.onglets{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line)}
.onglet{height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 12px;color:var(--muted);font-weight:500;font-size:var(--t-1);border-bottom:2px solid transparent;margin-bottom:-1px}
.onglet:hover{color:var(--text)}
.onglet.on{color:var(--text);border-bottom-color:var(--text);font-weight:600}
.onglet .n{color:var(--faint);font-weight:500}
.onglet b{font-weight:650;color:var(--bad-txt)}