/* Interface du cerveau (lot 3). Rendu repris des prototypes du 23/10 (cerveau d'équipe et vue des agents) :
   nébuleuse, verre, palette sombre et palette claire dédiées (pas d'inversion de couleurs). */
:root{--fort:#fff;--nuit:#020617;--bleu:#2f7bff;--cyan:#38d6ff;--vert:#3ee6a0;--ambre:#f5c86b;--rose:#ff8fb1;--violet:#b9a3ff;--texte:#dfe8ff;--doux:#7d8bb5;--tres-doux:#46527a;--verre:rgba(10,20,50,.74);--bord:rgba(56,214,255,.26);--rouge:#ff9aa8}
*{box-sizing:border-box;margin:0;padding:0;scrollbar-width:thin;scrollbar-color:rgba(56,214,255,.22) transparent}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(56,214,255,.22);border-radius:6px}
html,body{height:100%;background:var(--nuit);color:var(--texte);font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;overflow:hidden}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.cache{display:none!important}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;transition:opacity .6s}
body.usage #c{opacity:.18}

/* ---------- barre du haut ---------- */
.haut{position:fixed;top:16px;left:24px;right:24px;display:flex;align-items:center;gap:20px;z-index:7;pointer-events:none}
.haut>*{pointer-events:auto}
.marque{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan)}
.sous{font-size:12px;color:var(--doux);letter-spacing:.12em;text-transform:uppercase;margin-top:3px}
.horloge{font-size:38px;font-weight:200;color:var(--fort);font-variant-numeric:tabular-nums;text-shadow:0 0 22px rgba(56,214,255,.35)}
.chercher{display:flex;align-items:center;gap:8px;flex:0 1 340px;min-width:150px;background:rgba(2,6,23,.5);border:1px solid var(--bord);border-radius:999px;padding:6px 8px 6px 14px}
.chercher input{flex:1;min-width:0;background:none;border:0;outline:0;font-size:13.5px;color:var(--texte)}
.chercher input::placeholder{color:var(--doux)}
.chercher button{border:0;background:none;color:var(--cyan);font-size:13px;padding:2px 6px}
.vue{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--doux)}
.vue button{font-size:13px;color:var(--texte);background:rgba(2,6,23,.5);border:1px solid var(--bord);border-radius:999px;padding:6px 12px}
.vue button.on{background:linear-gradient(90deg,var(--bleu),var(--cyan));border-color:transparent;color:var(--fort);font-weight:600}
.niveau{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--vert);border:1px solid rgba(62,230,160,.5);border-radius:999px;padding:4px 10px;white-space:nowrap}
.theme,.sortir{font-size:13px;color:var(--texte);background:transparent;border:1px solid var(--bord);border-radius:999px;padding:6px 12px;white-space:nowrap}
.direct{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--doux);display:flex;align-items:center;gap:6px;white-space:nowrap}
.direct i{width:7px;height:7px;border-radius:50%;background:var(--tres-doux)}
.direct.on i{background:var(--vert);box-shadow:0 0 8px var(--vert);animation:bl 2s infinite}
.bandeau-vue{position:fixed;top:72px;right:24px;z-index:7;font-size:12px;color:var(--ambre);border:1px solid rgba(245,200,107,.45);border-radius:999px;padding:5px 12px;background:rgba(2,6,23,.6)}

/* ---------- ce qui t'attend ---------- */
.attend{position:fixed;left:24px;top:92px;bottom:96px;width:320px;z-index:3;display:flex;flex-direction:column;gap:10px}
.attend h3{font-size:11px;letter-spacing:.26em;color:var(--cyan);font-weight:600;display:flex;align-items:center;gap:8px}
.attend h3 .n{background:var(--bleu);color:var(--fort);border-radius:999px;font-size:11px;padding:1px 8px;letter-spacing:0}
.liste{display:flex;flex-direction:column;gap:9px;overflow-y:auto;overflow-x:hidden;padding:2px 6px 2px 2px}
.item{text-align:left;width:100%;border:1px solid rgba(56,214,255,.2);border-radius:14px;padding:11px 12px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 40%),var(--verre);backdrop-filter:blur(14px) saturate(1.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 24px -14px rgba(0,0,0,.5);transition:border-color .25s,transform .25s;animation:ent .5s ease-out}
.item:hover{border-color:var(--cyan)}
.item.neuf{box-shadow:0 0 0 1px var(--cyan),0 0 26px rgba(56,214,255,.3)}
@keyframes ent{from{opacity:0;transform:translateX(-12px)}}
.type{font-size:10px;letter-spacing:.18em;text-transform:uppercase;display:flex;gap:8px}
.type.passation,.type.avis,.type.termine,.type.annonce{color:var(--cyan)}.type.proposition,.type.modification{color:var(--ambre)}.type.discussion{color:var(--violet)}.type.revue{color:var(--doux)}.type.decision{color:var(--rose)}
.type .qui{margin-left:auto;color:var(--doux);letter-spacing:.05em;text-transform:none}
.item b{display:block;font-size:14px;color:var(--fort);margin:5px 0 0;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.item .sur{display:block;font-size:12px;color:var(--doux);margin-top:3px;overflow-wrap:anywhere}
.vide{font-size:13px;color:var(--doux);padding:6px 2px}
.sous-titre{font-size:11px;letter-spacing:.22em;color:var(--doux);margin-top:8px}

/* ---------- bas, fil d'Ariane ---------- */
.etat{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:3;text-align:center;pointer-events:none;max-width:60vw}
.etat .mouv{font-size:15px;color:var(--fort);text-shadow:0 0 14px rgba(56,214,255,.5);min-height:22px;transition:opacity .6s}
.etat .aide{font-size:12px;color:var(--doux);margin-top:6px}
.ariane{position:fixed;top:80px;left:50%;transform:translateX(-50%);z-index:4;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--doux)}
.ariane button{border:0;background:none;color:var(--cyan);font:inherit;letter-spacing:inherit;text-transform:inherit}
body.usage .ariane{display:none}
.retour{position:fixed;right:24px;bottom:100px;z-index:3;font-size:13px;color:var(--texte);background:rgba(2,6,23,.6);border:1px solid var(--bord);border-radius:999px;padding:8px 14px}

/* ---------- panneau du sujet ---------- */
.panneau{position:fixed;top:0;right:0;height:100%;width:min(460px,94vw);background:rgba(8,16,42,.95);border-left:1px solid var(--bord);backdrop-filter:blur(14px);transform:translateX(105%);transition:transform .5s cubic-bezier(.2,.8,.2,1);z-index:9;padding:26px;overflow-y:auto}
.panneau.ouvert{transform:none}
.fermer{position:absolute;top:16px;right:16px;background:none;border:1px solid var(--bord);color:var(--texte);border-radius:10px;width:34px;height:34px}
.chemin{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);overflow-wrap:anywhere;padding-right:40px}
.panneau h2{font-size:24px;color:var(--fort);margin:10px 0 6px;line-height:1.25;overflow-wrap:anywhere}
.meta{font-size:13px;color:var(--doux);line-height:1.6;margin-bottom:14px}.meta b{color:var(--texte);font-weight:600}
.bloc{border:1px solid rgba(56,214,255,.2);border-radius:14px;padding:12px 14px;margin-bottom:14px;font-size:14px;line-height:1.55;overflow-wrap:anywhere}
.bloc .lab{font-size:11px;letter-spacing:.2em;color:var(--doux);margin-bottom:6px;display:block}
.amorce{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;white-space:pre-wrap;color:#cfe3ff}
.diff del{color:var(--rouge);white-space:pre-wrap}.diff ins{color:var(--vert);text-decoration:none;white-space:pre-wrap}
.donnee{font-size:11px;color:var(--doux);margin-top:6px}
.gestes{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}
.gestes button,.barre button{font-size:14px;padding:10px 14px;border-radius:11px;border:1px solid var(--bord);background:transparent;color:var(--texte)}
.gestes .ok,.barre .ok{flex:1;background:linear-gradient(90deg,var(--bleu),var(--cyan));border:0;color:var(--fort);font-weight:700}
.gestes button:disabled,.barre button:disabled{opacity:.5;cursor:wait}
.mot{width:100%;min-height:70px;margin:8px 0;background:rgba(2,6,23,.6);border:1px solid var(--bord);border-radius:11px;padding:10px;font-size:14px;resize:vertical}
.erreur{color:var(--rouge);font-size:13px;margin:8px 0}
.histo{margin-top:18px;font-size:13px;color:var(--doux)}.histo div{padding:6px 0;border-bottom:1px solid rgba(56,214,255,.08)}.histo b{color:var(--texte)}

/* ---------- dock et écrans d'usage ---------- */
.dock{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:6;display:flex;gap:6px;padding:7px;border:1px solid var(--bord);border-radius:20px;background:rgba(6,12,34,.78);backdrop-filter:blur(12px);max-width:calc(100vw - 24px);overflow-x:auto}
.dock button{position:relative;font-size:12px;color:var(--doux);background:transparent;border:0;border-radius:14px;padding:8px 12px;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:78px;transition:.2s;flex:none}
.dock button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7}
.dock button:hover{color:var(--fort);background:rgba(56,214,255,.08)}
.dock button.on{color:var(--fort);background:linear-gradient(180deg,rgba(47,123,255,.35),rgba(56,214,255,.15));box-shadow:inset 0 0 0 1px rgba(56,214,255,.4)}
.dock .pastille{position:absolute;top:2px;right:14px;background:var(--bleu);color:var(--fort);font-size:10px;border-radius:999px;padding:0 5px}
.ecran{position:fixed;left:24px;right:24px;top:84px;bottom:96px;z-index:5;border:1px solid var(--bord);border-radius:22px;background:rgba(4,10,30,.82);backdrop-filter:blur(14px);display:none;overflow:hidden;animation:monte .45s cubic-bezier(.2,.8,.2,1)}
.ecran.on{display:flex}
@keyframes monte{from{opacity:0;transform:translateY(14px) scale(.985)}}
body.usage .attend,body.usage .etat,body.usage .retour{display:none!important}
.ecran h2{font-size:22px;color:var(--fort);font-weight:600}
.chap{font-size:13px;color:var(--doux);margin-top:4px;line-height:1.5}
.exemple{display:inline-block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ambre);border:1px dashed rgba(245,200,107,.6);border-radius:999px;padding:3px 10px;margin-left:10px;vertical-align:middle;font-weight:600}
.arbo{width:360px;flex:none;border-right:1px solid var(--bord);padding:18px;overflow-y:auto}
.droite2{flex:1;display:flex;flex-direction:column;min-width:0}
.graphe{position:relative;flex:1;min-height:200px;transition:flex .5s}
.graphe canvas{position:absolute;inset:0;width:100%;height:100%}
.droite2.lit .graphe{flex:0 0 38%}
.droite2 .lecteur{flex:0 0 0;overflow:hidden;padding:0 26px;transition:flex .5s}
.droite2.lit .lecteur{flex:1;overflow-y:auto;padding:18px 26px;border-top:1px solid var(--bord)}
.dossier{margin-top:10px}
.dossier>button{width:100%;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--fort);font-weight:600;padding:6px 8px;border-radius:10px;border:0;background:none;text-align:left}
.dossier>button:hover{background:rgba(56,214,255,.07)}
.dossier ul{list-style:none;margin:2px 0 6px 18px;border-left:1px solid rgba(56,214,255,.15)}
.dossier li button{width:100%;text-align:left;font-size:13px;color:var(--texte);padding:5px 10px;border:0;background:none;border-radius:8px;display:flex;gap:8px;align-items:center}
.dossier li button:hover,.dossier li button.on{background:rgba(56,214,255,.1);color:var(--fort)}
.pt{width:7px;height:7px;border-radius:50%;flex:none}.pt.ok{background:var(--vert)}.pt.rev{background:var(--ambre)}
.tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid;border-radius:999px;padding:1px 7px;margin-left:auto;font-weight:500;white-space:nowrap}
.tag.n0{color:var(--cyan)}.tag.n1{color:var(--cyan)}.tag.n2{color:var(--violet)}
.lecteur{flex:1;padding:22px 26px;overflow-y:auto}
.barre{display:flex;gap:8px;margin:14px 0 18px;flex-wrap:wrap}
.barre button{font-size:13px;padding:8px 12px;border-radius:10px}
.barre .ok{flex:none}
.texte{font-size:15px;line-height:1.7;color:var(--texte);max-width:780px;overflow-wrap:anywhere}
.texte h1,.texte h2,.texte h3,.texte h4{color:var(--fort);margin:18px 0 6px;line-height:1.3}
.texte h1{font-size:22px}.texte h2{font-size:19px}.texte h3{font-size:16.5px}.texte h4{font-size:15px}
.texte p{margin:8px 0}.texte ul,.texte ol{margin:8px 0 8px 22px}.texte li{margin:3px 0}
.texte code{font-family:ui-monospace,Consolas,monospace;font-size:13px;background:rgba(56,214,255,.08);border-radius:5px;padding:1px 5px}
.texte pre{background:rgba(2,6,23,.6);border:1px solid rgba(56,214,255,.15);border-radius:10px;padding:12px;overflow-x:auto;margin:10px 0}
.texte pre code{background:none;padding:0}
.texte blockquote{border-left:3px solid var(--cyan);padding:2px 12px;color:var(--doux);margin:10px 0}
.texte table{border-collapse:collapse;margin:10px 0;font-size:13.5px;display:block;overflow-x:auto}
.texte th,.texte td{border:1px solid rgba(56,214,255,.18);padding:5px 9px;text-align:left;vertical-align:top}
.texte a{color:var(--cyan)}
.texte hr{border:0;border-top:1px solid rgba(56,214,255,.18);margin:14px 0}
.texte textarea{width:100%;min-height:300px;background:rgba(2,6,23,.6);color:var(--texte);border:1px solid var(--cyan);border-radius:12px;padding:14px;font-family:ui-monospace,Consolas,monospace;font-size:13px;line-height:1.6}
.champ{width:100%;background:rgba(2,6,23,.6);border:1px solid var(--bord);border-radius:10px;padding:9px 12px;font-size:14px;margin:6px 0}
.grille{padding:22px;overflow-y:auto;width:100%}
.cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-top:18px}
.outil{border:1px solid rgba(56,214,255,.2);border-radius:16px;padding:16px;background:rgba(2,6,23,.45);position:relative}
.outil .nom{font-size:16px;color:var(--fort);font-weight:600}
.etat2{font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
.etat2.b{color:var(--vert)}.etat2.p{color:var(--ambre)}.etat2.n{color:var(--doux)}
.outil p{font-size:13px;color:var(--doux);margin-top:8px;line-height:1.5}
.outil .vit{position:absolute;right:16px;top:18px;width:8px;height:8px;border-radius:50%}
.vit.b{background:var(--vert);box-shadow:0 0 10px var(--vert);animation:bl 2s infinite}.vit.p{background:var(--ambre)}.vit.n{background:var(--tres-doux)}
@keyframes bl{50%{opacity:.35}}
.jours{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:18px}
.jour{border:1px solid rgba(56,214,255,.16);border-radius:14px;padding:12px;min-height:220px}
.jour h5{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--doux);margin-bottom:10px}.jour.auj h5{color:var(--cyan)}
.evt{border-left:3px solid var(--cyan);background:rgba(56,214,255,.06);border-radius:8px;padding:8px 10px;margin-bottom:8px;font-size:12.5px;line-height:1.4}
.evt b{display:block;color:var(--fort);font-size:13px}.evt.rev{border-color:var(--ambre)}.evt.dec{border-color:var(--rose)}.evt.rdv{border-color:var(--vert)}
.evt button{margin-top:6px;font-size:11.5px;color:var(--cyan);background:none;border:1px solid var(--bord);border-radius:8px;padding:3px 8px}
.notif{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid rgba(56,214,255,.1);width:100%;text-align:left;background:none;border-left:0;border-right:0;border-top:0}
.notif .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(56,214,255,.1);font-size:15px;flex:none}
.notif b{color:var(--fort);font-size:14px;display:block}.notif span{font-size:12.5px;color:var(--doux)}
.reglages{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:12px}
.reglage{display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(56,214,255,.16);border-radius:12px;padding:10px 14px;font-size:13.5px;gap:10px}
.bascule2{width:38px;height:22px;border-radius:999px;background:#1c2752;position:relative;transition:.2s;flex:none;border:0}
.bascule2::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#7d8bb5;transition:.2s}
.bascule2.on{background:var(--bleu)}.bascule2.on::after{left:19px;background:#fff}
.deux{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
.resultat{display:block;width:100%;text-align:left;border:1px solid rgba(56,214,255,.16);border-radius:14px;padding:12px 14px;margin-top:10px;background:rgba(2,6,23,.35)}
.resultat:hover{border-color:var(--cyan)}
.resultat .src{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);overflow-wrap:anywhere}
.resultat b{display:block;color:var(--fort);margin:4px 0;font-size:14.5px}
.resultat p{font-size:13px;color:var(--texte);line-height:1.55;max-height:6.2em;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere}
.changement{font-size:13px;padding:8px 0;border-bottom:1px solid rgba(56,214,255,.08);line-height:1.5}
.changement b{color:var(--fort)}.changement span{color:var(--doux)}

/* ---------- la vue des agents (prototype « postes ») ---------- */
.agents{display:flex;flex-direction:column;gap:14px;padding:20px 22px;width:100%;overflow-y:auto}
.agents .tete-ag{display:flex;align-items:flex-start;gap:22px;flex-wrap:wrap}
.compteurs{margin-left:auto;display:flex;gap:26px;font-variant-numeric:tabular-nums;flex-wrap:wrap}
.compteurs div{text-align:right}.compteurs b{display:block;font-size:22px;color:var(--fort);font-weight:600}.compteurs span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--doux)}
.bande{position:relative;height:120px;border:1px solid var(--bord);border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at center,rgba(47,123,255,.16),rgba(2,6,23,.4) 70%);flex:none}
.bande canvas{position:absolute;inset:0;width:100%;height:100%}
.bande .titre{position:absolute;left:18px;top:12px;font-size:11px;letter-spacing:.28em;color:var(--cyan)}
.bande .stat{position:absolute;right:18px;top:11px;font-size:12px;color:var(--doux);font-variant-numeric:tabular-nums}
.bande .pense{position:absolute;left:18px;bottom:12px;right:18px;font-size:15px;color:var(--fort);text-shadow:0 0 14px rgba(56,214,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.postes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.poste{position:relative;border:1px solid var(--bord);border-radius:18px;background:var(--verre);padding:14px 14px 12px;display:flex;flex-direction:column;gap:8px;text-align:left;min-height:230px;transition:border-color .3s,transform .3s}
.poste:hover{border-color:var(--cyan);transform:translateY(-2px)}
.poste.actif{border-color:rgba(62,230,160,.7);box-shadow:0 0 32px rgba(62,230,160,.18)}
.poste .tete{display:flex;align-items:center;gap:8px}.poste .tete b{font-size:15px;color:var(--fort)}
.pastille2{margin-left:auto;font-size:10px;letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:3px 8px;border:1px solid currentColor}
.pastille2.travail{color:var(--vert)}.pastille2.ecoute{color:var(--cyan)}.pastille2.dort{color:var(--doux)}
.poste canvas.onde{width:100%;height:56px;display:block}
.journal{font-size:12.5px;line-height:1.45;flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;overflow:hidden;min-height:60px}
.journal div{opacity:.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.journal div:last-child{opacity:1}
.journal span{color:var(--doux);font-variant-numeric:tabular-nums;margin-right:6px}
.poste .pied{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--doux);border-top:1px solid rgba(56,214,255,.12);padding-top:8px}
.poste .pied .rv{margin-left:auto;color:var(--texte);font-variant-numeric:tabular-nums}
.planning{position:relative;height:96px;border:1px solid rgba(56,214,255,.14);border-radius:14px;background:rgba(2,6,23,.5);flex:none}
.planning canvas{width:100%;height:100%;display:block}
.tableau{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px;font-variant-numeric:tabular-nums}
.tableau th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--doux);text-align:left;font-weight:500;padding:6px 8px;border-bottom:1px solid var(--bord)}
.tableau td{padding:7px 8px;border-bottom:1px solid rgba(56,214,255,.08);vertical-align:top}
.tableau td.n,.tableau th.n{text-align:right}
.tableau tr.clic{cursor:pointer}.tableau tr.clic:hover td{background:rgba(56,214,255,.06)}
.chiffres{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:12px 0 18px}
.chiffres div{border:1px solid rgba(56,214,255,.18);border-radius:12px;padding:10px 12px}
.chiffres b{display:block;font-size:20px;color:var(--fort);font-variant-numeric:tabular-nums}.chiffres span{font-size:11px;color:var(--doux)}
.tour{border:1px solid rgba(56,214,255,.14);border-radius:12px;padding:10px 12px;margin-bottom:10px;font-size:13.5px;line-height:1.5}
.tour .q{color:var(--fort);font-weight:600;white-space:pre-wrap;overflow-wrap:anywhere}
.tour .r{white-space:pre-wrap;overflow-wrap:anywhere;margin-top:6px;color:var(--texte)}
.tour .m{font-size:11.5px;color:var(--doux);margin-top:6px}
.puce{display:inline-block;font-size:10.5px;letter-spacing:.08em;border:1px solid currentColor;border-radius:999px;padding:1px 7px;margin-right:4px}
.puce.a{color:var(--ambre)}.puce.v{color:var(--vert)}.puce.c{color:var(--cyan)}

/* ---------- connexion ---------- */
.connexion{position:fixed;inset:0;display:grid;place-items:center;z-index:2;padding:16px}
.connexion form{width:min(420px,100%);border:1px solid var(--bord);border-radius:22px;padding:30px 28px;background:rgba(8,16,42,.8);backdrop-filter:blur(14px)}
.connexion h1{font-size:24px;color:var(--fort);font-weight:500;margin:10px 0 6px}
.connexion p{font-size:14px;color:var(--doux);line-height:1.5;margin-bottom:14px}
.connexion label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--doux)}
.connexion input{display:block;width:100%;margin:8px 0 14px;background:rgba(2,6,23,.6);border:1px solid var(--bord);border-radius:12px;padding:12px 14px;font-size:16px}
.connexion button{width:100%;padding:12px;border-radius:12px;border:0;background:linear-gradient(90deg,var(--bleu),var(--cyan));color:#fff;font-weight:700;font-size:15px}

/* ---------- verre liquide (Hyalite, MIT) : vrai verre sur les seuls grands éléments ----------
   Réglage validé par Kieran : dock, panneaux et écrans d'usage, une seule passe, sans dispersion ;
   flou simple sur les petites cartes. Cette règle remplace le <style> que verre-liquide.js injectait
   (la CSP de la page n'autorise aucun style en ligne). */
:root .hy.hy.hy{backdrop-filter:var(--hyalite,blur(10px) saturate(160%))!important;-webkit-backdrop-filter:var(--hyalite,blur(10px) saturate(160%))!important;box-shadow:var(--hyalite-edge,none),0 14px 40px -16px rgba(0,0,0,.35)!important}

/* ---------- mode clair : palette dédiée ---------- */
:root[data-theme="light"]{--fort:#0a1030;--nuit:#dfe5f0;--texte:#1d2747;--doux:#4f5b7d;--tres-doux:#7d8bb5;--verre:rgba(255,255,255,.38);--bord:rgba(255,255,255,.6);--cyan:#0077d6;--bleu:#0057ff;--vert:#0f9a63;--ambre:#b7791f;--rose:#c2185b;--violet:#5a3fc0;--rouge:#c62839}
:root[data-theme="light"] body{background:radial-gradient(900px 620px at 10% 12%,#9fc0ff 0%,transparent 62%),radial-gradient(820px 600px at 92% 15%,#92e2f2 0%,transparent 58%),radial-gradient(1000px 760px at 50% 108%,#bcb0ff 0%,transparent 58%),radial-gradient(700px 500px at 70% 60%,#a9f0d6 0%,transparent 60%),#dfe5f0}
:root:not([data-theme="light"]) body{background:radial-gradient(900px 620px at 8% 10%,rgba(47,123,255,.22) 0%,transparent 62%),radial-gradient(800px 560px at 92% 18%,rgba(56,214,255,.14) 0%,transparent 58%),radial-gradient(1000px 760px at 50% 110%,rgba(120,90,255,.16) 0%,transparent 58%),#020617}
:root[data-theme="light"] .ok,:root[data-theme="light"] .vue button.on,:root[data-theme="light"] .n,:root[data-theme="light"] .pastille,:root[data-theme="light"] .dock button.on,:root[data-theme="light"] .connexion button{color:#fff}
:root[data-theme="light"] .item,:root[data-theme="light"] .outil,:root[data-theme="light"] .jour,:root[data-theme="light"] .poste,:root[data-theme="light"] .planning,:root[data-theme="light"] .bande,:root[data-theme="light"] .ecran,:root[data-theme="light"] .panneau,:root[data-theme="light"] .dock,:root[data-theme="light"] .bloc,:root[data-theme="light"] .reglage,:root[data-theme="light"] .resultat,:root[data-theme="light"] .tour,:root[data-theme="light"] .connexion form{background:linear-gradient(135deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.10) 42%,rgba(255,255,255,.04) 60%,rgba(255,255,255,.18) 100%)!important;backdrop-filter:blur(14px) saturate(210%) brightness(1.06);-webkit-backdrop-filter:blur(14px) saturate(210%) brightness(1.06);border:1px solid rgba(255,255,255,.55)!important;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 1px 0 0 rgba(255,255,255,.45),inset -1px 0 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(255,255,255,.35),0 12px 40px -14px rgba(25,40,100,.28)!important}
:root:not([data-theme="light"]) .item,:root:not([data-theme="light"]) .outil,:root:not([data-theme="light"]) .jour,:root:not([data-theme="light"]) .poste,:root:not([data-theme="light"]) .planning,:root:not([data-theme="light"]) .bande,:root:not([data-theme="light"]) .ecran,:root:not([data-theme="light"]) .panneau,:root:not([data-theme="light"]) .dock,:root:not([data-theme="light"]) .bloc,:root:not([data-theme="light"]) .reglage,:root:not([data-theme="light"]) .resultat,:root:not([data-theme="light"]) .tour{background:linear-gradient(135deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.025) 45%,rgba(255,255,255,.01) 60%,rgba(120,200,255,.06) 100%)!important;backdrop-filter:blur(14px) saturate(170%);-webkit-backdrop-filter:blur(14px) saturate(170%);border:1px solid rgba(160,220,255,.20)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 1px 0 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(120,200,255,.08),0 14px 44px -16px rgba(0,0,0,.6)!important}
:root[data-theme="light"] .ecran,:root[data-theme="light"] .panneau{background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.34) 50%,rgba(255,255,255,.42))!important}
:root:not([data-theme="light"]) .ecran,:root:not([data-theme="light"]) .panneau{background:linear-gradient(135deg,rgba(14,26,64,.70),rgba(6,12,34,.58) 50%,rgba(14,30,70,.64))!important}
:root[data-theme="light"] .attend{background:none!important;border:0!important;box-shadow:none!important}
:root[data-theme="light"] .vue button:not(.on),:root[data-theme="light"] .retour,:root[data-theme="light"] .theme,:root[data-theme="light"] .sortir,:root[data-theme="light"] .chercher,:root[data-theme="light"] .bandeau-vue{background:rgba(255,255,255,.4);border-color:rgba(255,255,255,.65)}
:root[data-theme="light"] .dock button.on,:root[data-theme="light"] .vue button.on{background:linear-gradient(180deg,#2f7bff,#0a8fe0)!important;color:#fff!important;box-shadow:0 4px 14px -4px rgba(0,87,255,.5)!important}
:root[data-theme="light"] .horloge,:root[data-theme="light"] .etat .mouv,:root[data-theme="light"] .bande .pense{text-shadow:none}
:root[data-theme="light"] .amorce{color:#1d3a6e}
:root[data-theme="light"] .texte textarea,:root[data-theme="light"] .mot,:root[data-theme="light"] .champ,:root[data-theme="light"] .connexion input,:root[data-theme="light"] .texte pre{background:rgba(255,255,255,.6)}
:root[data-theme="light"] .bascule2{background:#b8c3dc}
:root[data-theme="light"] .poste.actif{border-color:rgba(10,138,88,.5)!important}

/* ---------- écran 15 pouces (1366×768, 1536×864) ---------- */
@media (max-width:1600px),(max-height:900px){
  .horloge{font-size:30px}.attend{width:280px;top:84px}.haut{gap:14px}.chercher{flex-basis:260px}
  .jours{grid-template-columns:repeat(5,minmax(0,1fr))}.jour{min-height:180px}
}
@media (max-width:1100px){.attend{width:250px}.jours{grid-template-columns:repeat(3,1fr)}.deux{grid-template-columns:1fr}.dock button{min-width:60px;padding:8px}.arbo{width:290px}.direct span{display:none}}

/* ---------- téléphone : « ce qui t'attend » d'abord ---------- */
@media (max-width:720px){
  .haut{top:10px;left:12px;right:12px;flex-wrap:wrap;gap:8px}
  .horloge{font-size:22px}.marque{font-size:10px}.sous{display:none}
  .chercher{order:5;flex:1 1 100%}
  .vue,.direct,.bandeau-vue{display:none}
  .theme,.sortir{padding:4px 9px;font-size:12px}
  .attend{left:12px;right:12px;width:auto;top:112px;bottom:84px}
  .etat,.ariane,.retour{display:none}
  .dock{bottom:8px;gap:2px;padding:5px}.dock button{min-width:54px;padding:6px 6px;font-size:10.5px}
  .ecran{left:8px;right:8px;top:112px;bottom:80px;border-radius:16px}
  .ecran.on{flex-direction:column}.arbo{width:auto;border-right:0;border-bottom:1px solid var(--bord);max-height:45%}
  .panneau{width:100vw;padding:20px 16px}
  .jours{grid-template-columns:1fr}.cartes{grid-template-columns:1fr}
  #c{opacity:.35}
}

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.ecran h2.suite{margin-top:26px}
.outil .chiffres2{display:flex;gap:16px;margin-top:12px}.outil .chiffres2 b{display:block;font-size:20px;color:var(--fort)}.outil .chiffres2 span{font-size:11px;color:var(--doux)}
.petit{font-size:11px}
.barre a.btn-lien{font-size:13px;padding:8px 12px;border-radius:10px;border:1px solid var(--bord);color:var(--texte);text-decoration:none}
@media (max-width:720px){.dock button[data-m="outils"],.dock button[data-m="agenda"]{display:none}}
.diff span{color:var(--doux);white-space:pre-wrap}