/* 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:#99a4c5;--tres-doux:#46527a;--action:linear-gradient(90deg,#2160e8,#0b6fb0);--action-fond:#2160e8;--verre:rgba(var(--rgb-surface),.74);--bord:rgba(var(--rgb-cyan),.26);--rouge:#ff9aa8;--rgb-cyan:56,214,255;--rgb-nuit:2,6,23;--rgb-or:245,200,107;--rgb-surface:8,18,46;--rgb-bord:56,214,255;--rgb-action:33,96,232}
*{box-sizing:border-box;margin:0;padding:0;scrollbar-width:thin;scrollbar-color:rgba(var(--rgb-cyan),.22) transparent}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(var(--rgb-cyan),.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,#cgl{position:fixed;inset:0;width:100%;height:100%;display:block;transition:opacity .6s}
body.usage #c,body.usage #cgl{opacity:.18}
/* L'arborescence a sa propre couche lumineuse : la nébuleuse de fond s'efface derrière elle. */
:root.arbre-gl body.usage:has(#e-arbo.on) #c,:root.arbre-gl body.usage:has(#e-arbo.on) #cgl{opacity:0}

/* ---------- 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(var(--rgb-cyan),.35)}
.chercher{display:flex;align-items:center;gap:8px;flex:0 1 340px;min-width:150px;background:rgba(var(--rgb-nuit),.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(var(--rgb-nuit),.5);border:1px solid var(--bord);border-radius:999px;padding:6px 12px}
.vue button.on{background:var(--action);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(var(--rgb-or),.45);border-radius:999px;padding:5px 12px;background:rgba(var(--rgb-nuit),.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(--action-fond);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(var(--rgb-cyan),.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(var(--rgb-cyan),.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(var(--rgb-cyan),.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(var(--rgb-nuit),.6);border:1px solid var(--bord);border-radius:999px;padding:8px 14px}

/* ---------- panneau du sujet ---------- */
/* Sous la barre du haut (audit du 26/10) : posé sur toute la hauteur, il recouvrait « Se déconnecter »,
   le thème et le registre, visibles au travers du verre mais impossibles à cliquer. */
.panneau{position:fixed;top:76px;right:16px;bottom:16px;width:min(460px,94vw);background:rgba(var(--rgb-surface),.95);border:1px solid var(--bord);border-radius:20px;backdrop-filter:blur(14px);transform:translateX(calc(100% + 24px));transition:transform .5s cubic-bezier(.2,.8,.2,1);z-index:9;padding:0 26px 26px;overflow-y:auto}
.panneau.ouvert{transform:none}
/* Collé en haut du panneau : il restait en tête de la fiche et disparaissait dès qu'on la faisait défiler. */
.fermer{position:sticky;top:14px;float:right;z-index:2;margin:14px -10px 0 10px;background:rgba(var(--rgb-surface),.92);border:1px solid var(--bord);color:var(--texte);border-radius:10px;width:34px;height:34px}
/* Une marge en haut du panneau, qui reste quand on fait défiler : le texte s'y fond au lieu de buter
   contre le bord (audit du 26/10). */
.panneau::before{content:"";display:block;position:sticky;top:0;z-index:1;height:30px;margin:0 -26px -30px;pointer-events:none;background:linear-gradient(180deg,rgb(var(--rgb-surface)) 45%,rgba(var(--rgb-surface),0))}
:root[data-theme="light"] .panneau::before{background:linear-gradient(180deg,rgb(var(--rgb-surface)) 45%,rgba(var(--rgb-surface),0))}
.fermer:hover{border-color:var(--cyan)}
#contenu{padding-top:26px}
.chemin{font-size:12px;color:var(--doux);padding-right:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panneau h2{font-size:21px;font-weight:650;color:var(--fort);margin:8px 0 6px;line-height:1.3;text-wrap:balance;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(var(--rgb-bord),.12);background:rgba(var(--rgb-bord),.05);border-radius:12px;padding:12px 14px;margin-bottom:12px;font-size:14px;line-height:1.55;overflow-wrap:anywhere}
.bloc .lab{font-size:11px;letter-spacing:.14em;font-weight:600;color:var(--doux);margin-bottom:8px;display:block}
.amorce{font-size:14px;line-height:1.6;white-space:pre-wrap;color:var(--texte)}
.diff del{color:var(--rouge);white-space:pre-wrap}.diff ins{color:var(--vert);text-decoration:none;white-space:pre-wrap}
.donnee{font-size:12px;color:var(--doux);margin-top:10px;padding-top:8px;border-top:1px solid rgba(var(--rgb-bord),.12)}
.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:var(--action);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(var(--rgb-nuit),.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:6px 0 4px;font-size:13px;color:var(--doux)}.histo div{padding:6px 0;border-bottom:1px solid rgba(var(--rgb-cyan),.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(var(--rgb-surface),.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(var(--rgb-cyan),.08)}
.dock button.on{color:var(--fort);background:linear-gradient(180deg,rgba(var(--rgb-action),.35),rgba(var(--rgb-cyan),.15));box-shadow:inset 0 0 0 1px rgba(var(--rgb-cyan),.4)}
.dock .pastille{position:absolute;top:2px;right:14px;background:var(--action-fond);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(var(--rgb-surface),.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(var(--rgb-or),.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 42%}
.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(var(--rgb-cyan),.07)}
.dossier ul{list-style:none;margin:2px 0 6px 18px;border-left:1px solid rgba(var(--rgb-cyan),.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(var(--rgb-cyan),.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}
.dossier>button .tag{min-width:0;overflow:hidden;text-overflow:ellipsis}
.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(var(--rgb-cyan),.08);border-radius:5px;padding:1px 5px}
.texte pre{background:rgba(var(--rgb-nuit),.6);border:1px solid rgba(var(--rgb-cyan),.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(var(--rgb-cyan),.18);padding:5px 9px;text-align:left;vertical-align:top}
a{color:var(--cyan);text-underline-offset:2px}a:hover{color:var(--fort)}
.texte a{color:var(--cyan)}
.texte hr{border:0;border-top:1px solid rgba(var(--rgb-cyan),.18);margin:14px 0}
.texte textarea{width:100%;min-height:300px;background:rgba(var(--rgb-nuit),.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(var(--rgb-nuit),.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(var(--rgb-cyan),.2);border-radius:16px;padding:16px;background:rgba(var(--rgb-nuit),.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(var(--rgb-cyan),.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(var(--rgb-cyan),.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(var(--rgb-cyan),.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(var(--rgb-cyan),.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(var(--rgb-cyan),.16);border-radius:12px;padding:10px 14px;font-size:13.5px;gap:10px}
.bascule2{width:38px;height:22px;border-radius:999px;background:rgba(var(--rgb-bord),.22);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(var(--rgb-cyan),.16);border-radius:14px;padding:12px 14px;margin-top:10px;background:rgba(var(--rgb-nuit),.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(var(--rgb-cyan),.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(var(--rgb-action),.16),rgba(var(--rgb-nuit),.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(var(--rgb-cyan),.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:.8;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(var(--rgb-cyan),.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(var(--rgb-cyan),.14);border-radius:14px;background:rgba(var(--rgb-nuit),.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(var(--rgb-cyan),.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(var(--rgb-cyan),.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(var(--rgb-cyan),.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(var(--rgb-cyan),.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;overflow-y:auto}
/* L'écran 6 de l'accueil (03/11/2026, passe réelle) : le texte d'une fiche ne revenait pas à la ligne ; une ligne de
   500 caractères élargissait la colonne de la grille à ~4 000 px et la carte, centrée dedans, sortait de l'écran par
   la gauche (page vide). Le texte revient à la ligne, la colonne ne dépasse pas l'écran, la carte longue défile. */
.connexion{grid-template-columns:minmax(0,1fr)}
.connexion>.carte-connexion.accueil{align-self:start;margin:8px auto;min-width:0;width:min(760px,100%)}
.fiche-proposee{border-top:1px solid var(--bord);padding:16px 0 12px;min-width:0}
.fiche-proposee h3{font-size:16px;color:var(--fort);margin:0 0 8px}
.fiche-texte{white-space:pre-wrap;overflow-wrap:anywhere;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;line-height:1.5;color:var(--texte);margin:0 0 8px;max-width:100%}
.fiche-proposee .boutons{display:flex;gap:8px;flex-wrap:wrap}
.fiche-proposee .boutons button{width:auto;flex:1 1 120px;padding:10px 12px}
.fiche-proposee.etat-retirée{opacity:.55}
/* Le questionnaire de départ et les tuiles (lot 1, 05/11/2026) : le fond seulement, au style existant ; la reprise
   visuelle des écrans est un lot à part, après les annotations de Kieran. */
.questionnaire .question{border:0;border-top:1px solid var(--bord);padding:14px 0 10px;margin:0;min-width:0}
.questionnaire .question legend{font-weight:600;color:var(--fort);padding:0}
.questionnaire .choix{display:flex;align-items:center;gap:8px;margin:4px 0;width:auto}
.questionnaire .choix input[type=radio],.questionnaire .choix input[type=checkbox]{width:auto;margin:0;flex:none}
.questionnaire .choix label{display:flex;align-items:center;gap:8px;margin:0}
.questionnaire textarea,.questionnaire input[type=text],.questionnaire input[type=url]{width:100%;box-sizing:border-box;margin:4px 0}
.questionnaire textarea{display:block;background:rgba(var(--rgb-nuit),.6);color:var(--texte);border:1px solid var(--bord);border-radius:12px;padding:12px 14px;font:inherit;font-size:16px}
.questionnaire .choix input[type=text]{width:auto;min-width:12em}
.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:12px 0}
.tuile{border:1px solid var(--bord);border-radius:10px;padding:12px 14px;min-width:0}
.tuile h3{font-size:16px;color:var(--fort);margin:0 0 6px}
.tuile ol{padding-left:20px;margin:6px 0}
.tuile-visio{opacity:.8}
.animation table{width:100%;border-collapse:collapse}
.animation td,.animation th{border-top:1px solid var(--bord);padding:6px 8px;vertical-align:top;text-align:left}
.animation pre{white-space:pre-wrap;margin:0;font:inherit}
.fiche-edition{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;background:rgba(var(--rgb-nuit),.6);border:1px solid var(--bord);border-radius:12px;padding:10px;color:var(--texte);margin-bottom:8px}
.connexion form{width:min(420px,100%);border:1px solid var(--bord);border-radius:22px;padding:30px 28px;background:rgba(var(--rgb-surface),.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(var(--rgb-nuit),.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:var(--action);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}

/* ---------- menu du profil : mode et palette (palettes.js) ---------- */
.profil-zone{position:relative}
.profil-bouton{display:flex;align-items:center;gap:8px;border:1px solid var(--bord);background:rgba(var(--rgb-nuit),.5);border-radius:999px;padding:3px 12px 3px 3px;font-size:13px;color:var(--texte);white-space:nowrap}
.profil-bouton i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--action-fond);color:#fff;font-style:normal;font-weight:700;font-size:11.5px}
.profil-bouton i:empty{display:none}
.profil-bouton:hover,.profil-bouton[aria-expanded="true"]{border-color:var(--cyan)}
.profil{position:absolute;right:0;top:calc(100% + 8px);z-index:9;width:min(360px,calc(100vw - 32px));padding:16px;display:flex;flex-direction:column;gap:10px;background:rgba(var(--rgb-surface),.98);border:1px solid var(--bord);border-radius:16px;box-shadow:0 18px 50px -18px rgba(0,0,0,.55)}
.profil[hidden]{display:none}
/* Menu ouvert : la barre du haut passe au-dessus du panneau de droite, sinon le menu glisse dessous. */
.haut:has(.profil:not([hidden])){z-index:13}
.profil{max-height:calc(100dvh - 90px);overflow-y:auto}
@media (max-width:720px){.profil{position:fixed;top:var(--sous-bouton,84px);left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));width:auto;max-height:calc(100dvh - var(--sous-bouton,84px) - 84px)}}
@media (max-width:420px){.profil .segment.mode button{padding:5px 10px}}
.profil-tete b{display:block;font-size:14px;color:var(--fort)}.profil-tete small{color:var(--doux);font-size:12px}
.profil-lab{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--doux);margin-top:4px}
.segment.mode{display:inline-flex;align-self:flex-start;border:1px solid var(--bord);border-radius:999px;padding:3px;gap:2px}
.segment.mode button{border:0;background:none;border-radius:999px;padding:5px 14px;font-size:13px;color:var(--texte)}
.segment.mode button[aria-pressed="true"]{background:var(--action-fond);color:#fff;font-weight:600}
.palettes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pal{display:flex;flex-direction:column;gap:7px;text-align:left;border:1px solid var(--bord);background:transparent;border-radius:12px;padding:8px;color:var(--texte)}
.pal:hover{border-color:var(--cyan)}
.pal[aria-checked="true"]{border-color:var(--action-fond);box-shadow:0 0 0 1px var(--action-fond)}
.pal canvas{width:100%;height:46px;border-radius:8px;display:block}
.pal b{font-size:12.5px;font-weight:600;color:var(--fort)}.pal small{display:block;font-size:12px;color:var(--doux);line-height:1.3}

/* ---------- mode clair : palette dédiée ---------- */
:root[data-theme="light"]{--fort:#0d1a3a;--nuit:#cdd6e4;--texte:#0d1a3a;--doux:#3f4f74;--tres-doux:#5d6a90;--verre:rgba(246,248,252,.9);--bord:rgba(30,60,120,.22);--cyan:#0a4594;--bleu:#1f5fd6;--vert:#07543a;--ambre:#8f4006;--rose:#a3134b;--violet:#4a32a8;--rouge:#b02233;--action-fond:#1f5fd6;--action:linear-gradient(90deg,#1f5fd6,#194cab);--rgb-cyan:10,69,148;--rgb-nuit:205,214,228;--rgb-or:143,64,6;--rgb-surface:246,248,252;--rgb-bord:30,60,120;--rgb-action:31,95,214}
:root[data-theme="light"] body{background:radial-gradient(1100px 760px at 50% 40%,color-mix(in srgb,var(--nuit) 55%,#fff) 0%,transparent 70%),var(--nuit)}
:root:not([data-theme="light"]) body{background:radial-gradient(900px 620px at 8% 10%,rgba(var(--rgb-action),.22) 0%,transparent 62%),radial-gradient(800px 560px at 92% 18%,rgba(var(--rgb-cyan),.14) 0%,transparent 58%),radial-gradient(1000px 760px at 50% 110%,rgba(var(--rgb-action),.12) 0%,transparent 58%),#020617}
:root[data-theme="light"] .ok,:root[data-theme="light"] .vue button.on,:root[data-theme="light"] .attend h3 .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:rgba(var(--rgb-surface),.92)!important;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--bord)!important;box-shadow:inset 0 1.5px 0 rgba(var(--rgb-surface),.95),inset 1px 0 0 rgba(var(--rgb-surface),.45),inset -1px 0 0 rgba(var(--rgb-surface),.25),inset 0 -1px 0 rgba(var(--rgb-surface),.35),0 12px 32px -16px rgba(var(--rgb-bord),.35)!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{background:rgba(var(--rgb-surface),.9)!important}
:root:not([data-theme="light"]) .ecran{background:linear-gradient(135deg,rgba(var(--rgb-surface),.70),rgba(var(--rgb-surface),.58) 50%,rgba(var(--rgb-surface),.64))!important}
/* Le panneau se lit : la nébuleuse et la barre du haut ne doivent plus transparaître sous le texte. */
:root:not([data-theme="light"]) .panneau{background:linear-gradient(135deg,rgba(var(--rgb-surface),.95),rgba(var(--rgb-surface),.93) 50%,rgba(var(--rgb-surface),.94))!important}
:root[data-theme="light"] .panneau{background:linear-gradient(135deg,rgba(var(--rgb-surface),.93),rgba(var(--rgb-surface),.86) 50%,rgba(var(--rgb-surface),.9))!important}
:root[data-theme="light"] .fermer{background:rgba(var(--rgb-surface),.92)}
: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(var(--rgb-surface),.4);border-color:rgba(var(--rgb-surface),.65)}
:root[data-theme="light"] .dock button.on,:root[data-theme="light"] .vue button.on{background:var(--action)!important;color:#fff!important;box-shadow:0 4px 14px -4px rgba(var(--rgb-action),.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"] .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(var(--rgb-surface),.6)}
:root[data-theme="light"] .bascule2:not(.on){background:rgba(var(--rgb-bord),.28)}
: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}}
/* Tablette (721 à 1100) : la barre tenait sur une ligne et poussait « Se déconnecter » hors de l'écran
   (768 : jusqu'à 1041 px). Deux lignes : marque, vue, réglages ; la recherche en dessous. */
@media (min-width:721px) and (max-width:1100px){
  .haut{flex-wrap:wrap;gap:10px 12px}
  .horloge,.niveau,.sous,.vue .lib{display:none}
  .chercher{order:5;flex:1 1 100%}
  .attend,.ecran{top:124px}.ariane{top:126px}.bandeau-vue{top:126px}
  .panneau{top:124px}
}
.bascule2:disabled{cursor:not-allowed;opacity:.75}

/* ---------- 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{top:0;right:0;bottom:0;width:100vw;border-radius:0;border:0;padding:0 16px 20px}
  #contenu{padding-top:20px}
  .panneau::before{margin:0 -16px -30px}
  /* Le graphe de l'arborescence est illisible à cette largeur : la liste prend la place. */
  .graphe{display:none}
  .arbo{max-height:none;flex:1}
  .ecran.on:has(.droite2.lit) .arbo{flex:0 0 auto;max-height:38%}
  .jours{grid-template-columns:1fr}.cartes{grid-template-columns:1fr}
  #c,#cgl{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}

/* ---------- connexion Microsoft, second facteur, sécurité (26/10/2026) ---------- */
.carte-connexion{width:min(440px,100%);border:1px solid var(--bord);border-radius:22px;padding:30px 28px;background:rgba(var(--rgb-surface),.8);backdrop-filter:blur(14px);display:flex;flex-direction:column}
.carte-connexion>div{display:flex;flex-direction:column}
.carte-connexion h1{font-size:24px;color:var(--fort);font-weight:500;margin:10px 0 6px}
.carte-connexion p{font-size:14px;color:var(--doux);line-height:1.5;margin-bottom:14px}
.carte-connexion p strong{color:var(--fort)}
.carte-connexion label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--doux)}
.carte-connexion input{display:block;width:100%;margin:8px 0 14px;background:rgba(var(--rgb-nuit),.6);border:1px solid var(--bord);border-radius:12px;padding:12px 14px;font-size:16px}
.carte-connexion input:focus{outline:2px solid var(--cyan);outline-offset:1px}
.carte-connexion input.code{letter-spacing:.3em;text-align:center;font-size:20px;font-variant-numeric:tabular-nums}
.carte-connexion input.code-secours{letter-spacing:.12em;text-align:center;font-family:ui-monospace,Consolas,monospace}
.carte-connexion form button,.bouton-principal{display:block;width:100%;padding:12px;border-radius:12px;border:0;background:var(--action);color:#fff;font-weight:700;font-size:15px;text-align:center;text-decoration:none;cursor:pointer}
.bouton-principal:hover,.carte-connexion form button:hover{filter:brightness(1.08)}
.bouton-principal:focus-visible,.bouton-lien:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.bouton-principal:disabled,.carte-connexion form button:disabled{opacity:.6;cursor:wait}
.bouton-lien{display:block;width:100%;margin-top:12px;padding:8px;border:0;background:none;color:var(--cyan);font-size:14px;text-align:center;text-decoration:none;cursor:pointer}
.bouton-lien:hover{text-decoration:underline}
.bouton-lien:disabled{opacity:.6;cursor:wait}
.carte-connexion .liens{margin-top:4px}
.carte-connexion .note{font-size:12.5px}
.carte-connexion code{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;color:var(--texte);word-break:break-all}
.qr{align-self:center;background:#fff;border-radius:14px;padding:10px;margin:4px 0 12px;line-height:0}
.qr img{display:block;width:180px;height:180px}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;margin:4px 0 12px 20px;font-family:ui-monospace,Consolas,monospace;font-size:15px;color:var(--fort)}
.carte-connexion .erreur{margin:12px 0 0}
.s-titre{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--doux);margin:22px 0 8px;font-weight:600}
.s-liste{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.s-liste li{border:1px solid rgba(var(--rgb-cyan),.18);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.s-liste li b{color:var(--fort)}
.s-liste li.vide{border-style:dashed;color:var(--doux)}
.s-gestes{display:flex;gap:8px;flex-wrap:wrap}
.s-gestes button,.s-bloc>button,#s-ajouter-cle{font-size:13px;padding:8px 12px;border-radius:10px;border:1px solid var(--bord);background:transparent;color:var(--texte)}
.s-gestes button:hover,.s-bloc>button:hover,#s-ajouter-cle:hover{border-color:var(--cyan)}
.s-gestes .ok,.s-bloc .ok,#s-ajouter-cle{background:var(--action);border:0;color:#fff;font-weight:600}
.s-gestes .danger{border-color:var(--rouge);color:var(--rouge)}
.s-bloc{display:flex;flex-direction:column;gap:8px;align-items:flex-start;font-size:14px}
.s-bloc .champ{max-width:200px}
:root[data-theme="light"] .carte-connexion{background:linear-gradient(135deg,rgba(var(--rgb-surface),.62),rgba(var(--rgb-surface),.34) 50%,rgba(var(--rgb-surface),.42))!important;border:1px solid rgba(var(--rgb-surface),.6)}
:root[data-theme="light"] .carte-connexion input{background:rgba(var(--rgb-surface),.6)}
@media (max-width:720px){.carte-connexion{padding:24px 18px}.codes{grid-template-columns:1fr 1fr;gap:6px 12px;font-size:14px}}
/* La carte de connexion contient des formulaires et des boutons secondaires : la règle d'origine de la page de
   connexion (.connexion form / .connexion button, pensée pour une carte = un formulaire) ne doit pas s'y appliquer. */
.connexion .carte-connexion form{width:auto;border:0;border-radius:0;padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.connexion .bouton-lien{width:100%;margin-top:12px;padding:8px;border:0;border-radius:10px;background:none;color:var(--cyan);font-weight:500;font-size:14px}
.connexion .bouton-lien:hover{background:rgba(var(--rgb-cyan),.08);text-decoration:none}
.qr{width:fit-content}
.carte-connexion .note code{display:block;margin-top:4px}
.codes{list-style-position:inside;margin-left:0}
:root[data-theme="light"] .connexion .carte-connexion form{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none}
:root[data-theme="light"] .connexion .bouton-lien{color:var(--cyan)!important;background:none}
:root[data-theme="light"] .connexion .bouton-lien:hover{background:rgba(var(--rgb-action),.07)}
#second-cle+form,#f-totp,#f-secours{margin-top:16px}
/* Premier passage : le QR code et les trois étapes côte à côte, la clé manuelle repliée (26/10, retour de Tristan). */
.carte-connexion .sous-titre-carte{margin-bottom:18px}
.inscription-totp{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;margin-bottom:6px}
.inscription-totp .qr{margin:0;padding:8px;border-radius:12px;box-shadow:0 0 0 1px var(--bord)}
.inscription-totp .qr img{width:148px;height:148px}
.etapes{list-style:none;counter-reset:etape;display:grid;gap:12px;font-size:13.5px;line-height:1.45;color:var(--texte)}
.etapes li{counter-increment:etape;display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start}
.etapes li::before{content:counter(etape);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--bord);color:var(--cyan);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.connexion .bouton-lien.bouton-lien-gauche{width:auto;align-self:flex-start;padding:6px 0;margin:6px 0 0;font-size:13px}
.cle-manuelle{display:flex;align-items:center;gap:10px;margin-top:8px;padding:10px 12px;border:1px solid var(--bord);border-radius:10px;background:rgba(var(--rgb-nuit),.4)}
.cle-manuelle code{flex:1;font-family:ui-monospace,Consolas,monospace;font-size:13px;letter-spacing:.06em;color:var(--fort);word-break:break-all}
.connexion .bouton-discret{width:auto;flex:none;padding:6px 10px;border-radius:8px;border:1px solid var(--bord);background:none;color:var(--texte);font-size:12.5px;font-weight:500}
.connexion .bouton-discret:hover{border-color:var(--cyan)}
#f-inscription{margin-top:18px}
.carte-connexion label{font-size:13px;letter-spacing:0;text-transform:none;color:var(--texte);font-weight:500}
.carte-connexion input.code{padding:10px 14px;font-size:22px;letter-spacing:.35em}
.carte-connexion input.code::placeholder{color:var(--tres-doux);letter-spacing:.35em}
:root[data-theme="light"] .cle-manuelle{background:rgba(var(--rgb-surface),.5)}
:root[data-theme="light"] .connexion .bouton-discret{color:var(--texte)!important;background:none}
@media (max-width:420px){.inscription-totp{grid-template-columns:1fr;justify-items:center}.etapes{justify-self:stretch}}

/* Les filtres de la nébuleuse (26/10) : ce qui est récent, ce qui vous concerne, ce qui est à revoir. */
.filtres{position:fixed;top:108px;left:50%;transform:translateX(-50%);z-index:4;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.filtres button{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--doux);background:rgba(var(--rgb-nuit),.55);border:1px solid var(--bord);border-radius:999px;padding:5px 11px;backdrop-filter:blur(8px)}
.filtres button:hover{color:var(--texte);border-color:var(--cyan)}
.filtres button.on{color:var(--fort);border-color:var(--cyan);background:rgba(var(--rgb-action),.28)}
.filtres .n{font-size:11px;font-variant-numeric:tabular-nums;color:var(--cyan)}
body.usage .filtres{display:none}
:root[data-theme="light"] .filtres button{background:rgba(var(--rgb-surface),.5);border-color:rgba(var(--rgb-surface),.7)}
:root[data-theme="light"] .filtres button.on{background:rgba(var(--rgb-action),.12);border-color:var(--cyan)}
:root[data-theme="light"] .filtres .n{color:var(--cyan)}
@media (min-width:721px) and (max-width:1100px){.filtres{top:150px}}
@media (max-width:720px){.filtres{display:none}}
/* Dans l'arborescence, les mêmes filtres en tête de la liste (visibles à toutes les largeurs). */
body.usage .filtres.dans-arbo{position:static;transform:none;display:flex;justify-content:flex-start;margin:4px 0 10px;z-index:auto}

/* Avec la couche lumineuse (WebGL), le fond sombre du prototype validé : un bleu nuit qui tombe au noir. */
:root.nebuleuse-gl:not([data-theme="light"]) body{background:radial-gradient(110% 85% at 55% 48%,color-mix(in srgb,var(--nuit) 80%,rgb(var(--rgb-surface))) 0%,var(--nuit) 100%)}
:root:not([data-theme="light"]) .filtres button.on .n{color:var(--cyan)}
/* Mode clair : la nébuleuse agrandie passait sous l'en-tête et le titre de la liste (texte sur un bleu chargé,
   relevé du 27/10) ; un voile léger en haut de l'écran, et un filtre actif sur fond opaque. */
:root[data-theme="light"] body::before{content:"";position:fixed;left:0;right:0;top:0;height:150px;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(var(--rgb-nuit),.82) 0%,rgba(var(--rgb-nuit),.6) 60%,rgba(var(--rgb-nuit),0) 100%)}
:root[data-theme="light"] .filtres button.on{background:rgba(var(--rgb-surface),.82)}
/* Le dock se lit : la nébuleuse ne doit plus transparaître sous ses libellés (retour de Tristan, 27/10). */
:root:not([data-theme="light"]) .dock{background:linear-gradient(180deg,rgba(14,24,58,.94),rgba(var(--rgb-surface),.94))!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
:root[data-theme="light"] .dock{background:linear-gradient(180deg,rgba(var(--rgb-surface),.93),rgba(240,244,252,.9))!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
/* Les gestes d'une passation ou d'une fiche à revoir restent visibles en bas du panneau pendant la lecture
   (27/10 : sous une longue amorce, on ne les voyait pas sans faire défiler). */
/* La barre d'actions (28/10) : pleine, sans texte qui passe dessous ; le geste principal sur sa ligne, les autres côte à côte. */
.panneau .gestes.colle{position:sticky;bottom:-26px;z-index:1;margin:14px -26px -26px;padding:14px 26px 20px;background:rgb(var(--rgb-surface));border-top:1px solid var(--bord);display:flex;flex-wrap:wrap;gap:8px}
.panneau .gestes.colle>button{flex:1 1 0;white-space:nowrap;padding:9px 12px}
.panneau .gestes.colle>button.ok:first-child,.panneau .gestes.colle>:not(button){flex-basis:100%}
.panneau .gestes.colle:empty{display:none}
/* « Ce qui t'attend » (27/10/2026) : état, numéro et échéance des passations, sous-groupes par urgence. */
.liste .groupe{font-size:10.5px;letter-spacing:.2em;color:var(--doux);margin:6px 2px -2px}
.liste .groupe:first-child{margin-top:0}
.item .badge{white-space:nowrap;letter-spacing:.04em;font-size:11px;font-weight:600;border-radius:999px;padding:2px 9px}
.badge.a_prendre,.badge.info{background:var(--action-fond);color:#fff}
.badge.en_cours{border:1px solid var(--doux);color:var(--texte);font-weight:500}
.badge.retard{background:rgba(255,90,110,.18);border:1px solid var(--rouge);color:var(--rouge)}
.item .bas{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--doux);margin-top:7px}
.item .bas .ech{margin-left:auto;white-space:nowrap}
.item .type .genre{white-space:nowrap}
.item .type .qui{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ech.a_prendre,.ech.info{color:var(--fort);font-weight:600}
.ech.en_cours{color:var(--texte)}
.ech.retard{color:var(--rouge);font-weight:600}
.ech.revue{color:var(--ambre);font-weight:600}
.item.calme b{font-weight:500;color:var(--texte)}
.item.retard{border-color:var(--rouge)}
:root[data-theme="light"] .badge.retard{background:rgba(176,34,51,.1)}
.ariane .courant{color:var(--texte);text-transform:none;letter-spacing:.02em;display:inline-block;max-width:32vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.ariane button:hover{text-decoration:underline}
/* « Passer à… » : le choix d'une personne, en pastilles (pas de liste déroulante native). */
.gestes .choix{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.gestes .choix button{border-radius:999px;padding:6px 12px}
.gestes .choix button[aria-checked="true"]{background:var(--action-fond);border-color:transparent;color:#fff;font-weight:600}
/* Arborescence : la période (27/10/2026). */
.filtres.dans-arbo.periode{margin-top:-4px}
.dossier>button .compte{font-size:11px;color:var(--doux);font-weight:400;margin-left:8px;white-space:nowrap}
.dossier.vide-periode>button{color:var(--doux)}
.dossier .plus-anciennes{color:var(--cyan);font-size:12.5px;padding:4px 8px}
.dossier .plus-anciennes:hover{text-decoration:underline}
.dossier>button .nom-dossier{white-space:nowrap;flex:none}
/* Le panneau d'une fiche est presque opaque : sans flou d'arrière-plan, la nébuleuse qui bouge derrière n'est plus
   recomposée floutée à chaque image pendant le trait vers la fiche (27/10/2026). */
:root .panneau.panneau{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
/* ---------- audit du 27/10/2026 ---------- */
/* Le message de retour se voit partout : sur les écrans du dock et sur téléphone, en pastille au-dessus du dock. */
body.usage .etat{display:block!important;z-index:8}
body.usage .etat .aide{display:none}
body.usage .etat .mouv:not(:empty){background:rgba(var(--rgb-surface),.94);border:1px solid var(--bord);border-radius:12px;padding:8px 14px;text-shadow:none}
:root[data-theme="light"] body.usage .etat .mouv:not(:empty){background:rgba(var(--rgb-surface),.96)}
@media (max-width:720px){
  .etat{display:block!important;z-index:12;bottom:78px;max-width:92vw}
  .etat .aide{display:none}
  .etat .mouv:not(:empty){font-size:13px;background:rgba(var(--rgb-surface),.94);border:1px solid var(--bord);border-radius:12px;padding:8px 12px;text-shadow:none}
  :root[data-theme="light"] .etat .mouv:not(:empty){background:rgba(var(--rgb-surface),.96)}
  /* Arborescence : la fiche lue prend tout l'écran (la liste revient à la fermeture), et le lecteur défile jusqu'au bout. */
  .ecran.on:has(.droite2.lit) .arbo{display:none}
  .droite2{min-height:0;flex:1 1 0}
  .droite2:not(.lit){display:none}   /* sans fiche lue, la liste prend toute la hauteur (elle n'en avait que la moitié) */
  .droite2.lit .lecteur{min-height:0;padding:14px 16px}
  /* Les filtres tiennent sur une ligne qui défile : la liste garde la place. */
  .arbo .filtres.dans-arbo{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .arbo .filtres.dans-arbo button{flex:0 0 auto}
}
.retour-panneau{display:inline-block;margin:16px 0 0;font-size:13px;padding:6px 12px;border-radius:10px;border:1px solid var(--bord);background:transparent;color:var(--texte)}
.retour-panneau:hover{border-color:var(--cyan)}
.liste .reessayer{margin-top:8px;font-size:14px;padding:10px 14px;border-radius:11px;border:0;background:var(--action);color:#fff}
.dossier>button[aria-expanded="false"]+ul{display:none}

/* ---------- le cerveau en 3D (28/10/2026) : plein écran, tout le reste flotte dessus ---------- */
[hidden]{display:none!important}
#c3d,.coin3d,.reglages3d,#noms3d,#fils3d,.bulle3d{display:none}
:root.cerveau-3d #c,:root.cerveau-3d #cgl{display:none}
:root.cerveau-3d #c3d{display:block;position:fixed;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;transition:opacity .6s}
:root.cerveau-3d #c3d.tient{cursor:grabbing}:root.cerveau-3d #c3d.survol{cursor:pointer}
:root.cerveau-3d body.usage #c3d{opacity:.18}
:root.cerveau-3d body.usage:has(#e-arbo.on) #c3d{opacity:0}
:root.cerveau-3d #noms3d{display:block;position:fixed;inset:0;z-index:2;pointer-events:none}
:root.cerveau-3d #fils3d{display:block;position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.fil3d{fill:none;stroke:rgba(var(--rgb-or),.6);stroke-width:1.2;stroke-dasharray:3 4}
.anneau3d{fill:none;stroke:rgba(var(--rgb-or),.85);stroke-width:1.2}
:root[data-theme="light"] .fil3d{stroke:rgba(var(--rgb-or),.7)}:root[data-theme="light"] .anneau3d{stroke:rgba(var(--rgb-or),.9)}
.nom3d{position:absolute;left:0;top:0;pointer-events:auto;background:none;border:0;padding:3px 6px;text-align:center;white-space:nowrap;color:var(--fort);will-change:transform,opacity}
.nom3d{transition:opacity .2s ease-out}
@media (prefers-reduced-motion:reduce){.nom3d{transition:none}}
.nom3d b{display:block;font-size:13px;font-weight:600;letter-spacing:.02em;text-shadow:0 0 12px rgba(var(--rgb-nuit),.95),0 0 3px rgba(var(--rgb-nuit),.9)}
.nom3d span{display:block;font-size:11px;color:var(--texte);text-shadow:0 0 8px rgba(var(--rgb-nuit),.95)}
.nom3d.fiche b{font-size:12px;font-weight:500;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.nom3d.fiche.choisie b{color:var(--ambre);font-weight:600}
.nom3d.groupe{pointer-events:none}.nom3d.groupe b{font-size:12px;font-weight:600;color:var(--texte)}.nom3d.groupe span{font-size:10.5px}
.nom3d:hover b{text-decoration:underline;text-underline-offset:3px}
.nom3d:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}
.pastille3d{display:inline-block;margin-top:3px;font-style:normal;font-size:10.5px;font-weight:700;color:#fff;background:var(--action-fond);border-radius:999px;padding:0 6px}
:root[data-theme="light"] .nom3d b,:root[data-theme="light"] .nom3d span{text-shadow:0 0 10px rgba(var(--rgb-surface),.95),0 0 3px rgba(var(--rgb-surface),.9)}
:root.cerveau-3d .bulle3d{display:block;position:fixed;z-index:8;left:0;top:0;pointer-events:none;max-width:280px;padding:7px 10px;border-radius:10px;background:rgba(var(--rgb-surface),.95);border:1px solid var(--bord);font-size:12.5px;line-height:1.35;color:var(--fort);opacity:0;transition:opacity .15s}
.bulle3d small{display:block;color:var(--doux);font-size:11px;margin-top:2px}
:root[data-theme="light"] .bulle3d{background:rgba(var(--rgb-surface),.97)}
/* Pas de flou d'arrière-plan au-dessus d'une scène animée : il coûte une passe par image. */
:root.cerveau-3d .item,:root.cerveau-3d .panneau,:root.cerveau-3d .dock,:root.cerveau-3d .filtres button{backdrop-filter:none}
/* Cartes et panneaux presque opaques au-dessus du cerveau : le texte doit se lire (le thème verre impose son fond en !important). */
:root.cerveau-3d:not([data-theme="light"]) .item,:root.cerveau-3d:not([data-theme="light"]) .panneau,:root.cerveau-3d:not([data-theme="light"]) .dock{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 40%),rgba(var(--rgb-surface),.95)!important}
:root.cerveau-3d[data-theme="light"] .item,:root.cerveau-3d[data-theme="light"] .panneau,:root.cerveau-3d[data-theme="light"] .dock{background:rgba(var(--rgb-surface),.95)!important}
:root.cerveau-3d .item.vise{box-shadow:inset 3px 0 0 var(--ambre)}
/* Les filtres passent en bas, au-dessus du dock ; la phrase du moment au-dessus d'eux. */
:root.cerveau-3d .filtres{top:auto;bottom:100px}
:root.cerveau-3d .etat{bottom:146px}
:root.cerveau-3d .retour{bottom:64px}
:root.cerveau-3d .coin3d{display:flex;position:fixed;left:24px;bottom:24px;z-index:4;gap:8px;align-items:center}
:root.cerveau-3d .reglages3d{display:flex;position:fixed;right:24px;bottom:18px;z-index:4;gap:6px;align-items:center;flex-wrap:wrap-reverse;justify-content:flex-end;max-width:calc(50vw - 310px)}
:root.cerveau-3d body.usage .coin3d,:root.cerveau-3d body.usage .reglages3d,:root.cerveau-3d body.usage #noms3d,:root.cerveau-3d body.usage #fils3d{display:none}
.visite3d{display:flex;align-items:center;gap:8px;border:1px solid rgba(var(--rgb-or),.5);background:rgba(var(--rgb-surface),.86);color:var(--ambre);border-radius:999px;padding:8px 14px;font-size:13px}
.visite3d[aria-pressed="true"]{background:rgba(var(--rgb-or),.16)}
.visite3d i{font-style:normal;background:rgba(var(--rgb-or),.2);border-radius:999px;padding:0 7px;font-size:11.5px}
.pastille3d-bouton{border:1px solid var(--bord);background:rgba(var(--rgb-surface),.86);color:var(--texte);border-radius:999px;padding:7px 12px;font-size:12.5px;white-space:nowrap}
.pastille3d-bouton[aria-pressed="true"]{border-color:var(--vert);color:var(--vert)}
.pastille3d-bouton kbd,.aide3d kbd{font-family:ui-monospace,Consolas,monospace;font-size:11px;border:1px solid var(--bord);border-bottom-width:2px;border-radius:6px;padding:0 5px;margin-left:4px}
.segment3d{display:flex;padding:3px;border-radius:999px;background:rgba(var(--rgb-surface),.86);border:1px solid var(--bord)}
.segment3d button{border:0;background:none;border-radius:999px;padding:4px 11px;font-size:12px;color:var(--doux)}
.segment3d button[aria-pressed="true"]{background:var(--action-fond);color:#fff;font-weight:600}
:root[data-theme="light"] .visite3d,:root[data-theme="light"] .pastille3d-bouton,:root[data-theme="light"] .segment3d{background:rgba(var(--rgb-surface),.92)}
.visite3d:focus-visible,.pastille3d-bouton:focus-visible,.segment3d button:focus-visible,.proche3d:focus-visible,.pas-parcours button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
/* Le panneau : la marche dans un parcours, les fiches proches, la zone. */
.pas-parcours{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 40px 4px 0;padding:6px 6px 6px 10px;border-radius:10px;background:rgba(var(--rgb-or),.1);border:1px solid rgba(var(--rgb-or),.32);color:var(--ambre);font-size:12px}
.pas-parcours div{display:flex;gap:4px}
.pas-parcours button{border:1px solid rgba(var(--rgb-or),.38);background:transparent;border-radius:8px;padding:4px 9px;font-size:12px;color:var(--ambre)}
.pas-parcours button:disabled{opacity:.35;cursor:default}
.ce-qui-change{margin-top:10px;font-size:13px;line-height:1.45}
.proches3d,.liste-zone{display:flex;flex-direction:column;gap:2px;margin:12px 0 4px}
.proches3d .lab{margin-bottom:4px}
.proche3d{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;border:1px solid transparent;background:none;border-radius:10px;padding:6px 9px;color:var(--texte)}
.proche3d:hover{border-color:var(--bord);background:rgba(var(--rgb-cyan),.06)}
.proche3d b{font-size:13px;font-weight:500;line-height:1.3}
.proche3d small{display:flex;flex-wrap:wrap;gap:0 8px;font-size:11.5px;color:var(--doux)}
.proche3d small em{font-style:normal;color:var(--cyan)}
.zone-chiffres{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 14px}
.zone-chiffres span,.pastille-zone{border:1px solid var(--bord);border-radius:999px;padding:3px 10px;font-size:12px;color:var(--doux);background:transparent}
.zone-chiffres b{color:var(--fort);font-weight:600}
.zone-chiffres .rev{border-color:rgba(var(--rgb-or),.5)}
.filtres-zone{display:flex;flex-direction:column;gap:8px;margin:4px 0 14px}
.filtres-zone .champ{margin:0}.filtres-zone .champ::placeholder{color:var(--doux)}
.filtres-zone .segment.mode{flex-wrap:wrap}
.filtres-zone .segment.mode button{padding:4px 11px;font-size:12.5px}
.segment.mode button:focus-visible,.bascule-revoir:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.ligne-filtres{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bascule-revoir{cursor:pointer}.bascule-revoir[aria-pressed="true"]{border-color:rgba(var(--rgb-or),.7);color:var(--fort);background:rgba(var(--rgb-or),.14)}
.mois-zone{font-size:12px;letter-spacing:.06em;color:var(--doux);margin:12px 0 2px;padding-bottom:3px;border-bottom:1px solid var(--bord)}
.mois-zone:first-child{margin-top:0}
.pastille-zone{color:var(--texte)}.pastille-zone:hover{border-color:var(--cyan)}
#panneau .lab{display:block;font-size:11px;letter-spacing:.2em;color:var(--doux);margin-top:6px}
/* Quoi de neuf, dans la colonne de gauche. */
.neuf-sous{font-size:12px;line-height:1.45;color:var(--doux);margin:0 2px 4px}
.neuf-fermer{display:block;margin-top:6px;border:1px solid var(--bord);background:transparent;color:var(--texte);border-radius:999px;padding:4px 10px;font-size:12px}
#titreNeuf{color:var(--ambre)}
/* Palette « Aller à » et raccourcis. */
.voile3d{position:fixed;inset:0;z-index:20;background:rgba(var(--rgb-nuit),.55);display:grid;place-items:start center;padding:90px 16px 16px}
.palette3d,.aide3d{width:min(600px,100%);background:rgba(var(--rgb-surface),.97);border:1px solid var(--bord);border-radius:16px;box-shadow:0 24px 60px -20px rgba(0,0,0,.8);overflow:hidden;color:var(--texte)}
:root[data-theme="light"] .palette3d,:root[data-theme="light"] .aide3d{background:rgba(var(--rgb-surface),.98)}
.palette3d input{width:100%;border:0;border-bottom:1px solid var(--bord);background:transparent;color:var(--fort);font:inherit;font-size:16px;padding:16px 18px;outline:0}
.palette3d ul{list-style:none;margin:0;padding:6px;max-height:min(420px,55vh);overflow-y:auto}
.palette3d li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;cursor:pointer}
.palette3d li[aria-selected="true"]{background:rgba(var(--rgb-action),.25)}
.palette3d li .q{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);width:84px;flex:none}
.palette3d li .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette3d li small{color:var(--doux);font-size:11.5px;white-space:nowrap}
.aide3d{padding:20px 22px}
.aide3d h2{font-size:16px;margin-bottom:12px;color:var(--fort)}
.aide3d dl{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;align-items:center}
.aide3d dt{white-space:nowrap}.aide3d dd{color:var(--doux)}
@media (max-width:720px){:root.cerveau-3d .coin3d,:root.cerveau-3d .reglages3d{display:none}}
@media (min-width:721px){:root.cerveau-3d .panneau{bottom:70px}}
@media (max-width:720px){:root.cerveau-3d:not([data-theme="light"]) .item{background:rgba(var(--rgb-surface),.96)}:root.cerveau-3d #c3d{opacity:.45}}
:root.cerveau-3d .reglages3d .retour{position:static;padding:7px 12px;font-size:12.5px;background:rgba(var(--rgb-surface),.86)}
:root[data-theme="light"].cerveau-3d .reglages3d .retour{background:rgba(var(--rgb-surface),.92)}
/* Dans le panneau, un bloc est un encart discret : pas le verre des cartes posées sur le cerveau (28/10). */
:root #panneau .bloc{background:rgba(var(--rgb-bord),.05)!important;border:1px solid rgba(var(--rgb-bord),.12)!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
:root #panneau .bloc.erreur{border-color:rgba(255,90,110,.45)!important}

/* L'arborescence en plein écran (30/10) : l'arbre dessiné par le moteur du cerveau, la liste et la fiche lue en panneaux
   flottants. Sur téléphone, l'écran garde sa liste seule. */
#a3d,#noms-arbre,#fils-arbre,.retour-arbo,.legende-arbo{display:none}
.dossier .referents-arbo{font-size:11.5px;color:var(--doux);margin:-2px 0 2px 26px}
.dossier li.mois-arbo{font-size:11px;letter-spacing:.06em;color:var(--doux);padding:8px 10px 2px}
.dossier li.mois-arbo:first-child{padding-top:2px}
:root.arbre-3d .pt.ok{background:rgb(var(--rgb-cyan))}:root.arbre-3d .pt.rev{background:rgb(var(--rgb-or))}
.arbo .dossier li .tag{border:0;padding:0;letter-spacing:.04em;text-transform:none;font-size:11px;font-weight:400;color:var(--doux)}
.nom3d.fiche.arbre{text-align:left}.nom3d.fiche.arbre b{max-width:250px}
.nom3d.groupe-arbre b{font-size:12.5px;font-weight:600}.nom3d.groupe-arbre span{font-size:10.5px}
.nom3d.entete-arbre{pointer-events:none;text-align:left}.nom3d.entete-arbre b{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--doux);font-weight:600}.nom3d.entete-arbre span{display:none}
.nom3d.page-arbre b{font-size:12px;font-weight:600;color:var(--cyan)}
.nom3d.vide b{color:var(--doux)}
@media (min-width:721px){
  :root.arbre-3d body.usage:has(#e-arbo.on) #a3d{display:block;position:fixed;inset:0;width:100%;height:100%;z-index:1}
  :root.arbre-3d body.usage:has(#e-arbo.on) #noms-arbre{display:block;position:fixed;inset:0;z-index:2;pointer-events:none}
  :root.arbre-3d body.usage:has(#e-arbo.on) #fils-arbre{display:block;position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
  :root.arbre-3d body.usage:has(#e-arbo.on) #c3d{visibility:hidden}
  :root.arbre-3d #e-arbo.ecran{inset:0;border:0;border-radius:0;background:none!important;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none;z-index:3;animation:none;overflow:visible}
  :root.arbre-3d #e-arbo .arbo{pointer-events:auto;position:fixed;left:24px;top:84px;bottom:96px;width:360px;border:1px solid var(--bord);border-radius:20px;background:rgba(var(--rgb-surface),.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  :root.arbre-3d #e-arbo .graphe{display:none}
  :root.arbre-3d #e-arbo .droite2{display:none;position:fixed;top:84px;right:16px;bottom:96px;width:min(520px,calc(100vw - 440px));pointer-events:auto;border:1px solid var(--bord);border-radius:20px;background:rgba(var(--rgb-surface),.95);overflow:hidden}
  :root.arbre-3d #e-arbo .droite2.lit{display:flex}
  :root.arbre-3d #e-arbo .droite2.lit .lecteur{border-top:0}
  :root.arbre-3d #e-arbo .retour-arbo:not(.cache){display:block;position:fixed;top:84px;left:404px;pointer-events:auto;font-size:13px;color:var(--texte);background:rgba(var(--rgb-surface),.86);border:1px solid var(--bord);border-radius:999px;padding:7px 14px}
  :root.arbre-3d #e-arbo .retour-arbo:hover{border-color:var(--cyan)}
  :root.arbre-3d #e-arbo .retour-arbo:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
  :root.arbre-3d #e-arbo .legende-arbo{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;position:fixed;left:404px;bottom:104px;font-size:12px;color:var(--doux)}
  :root.arbre-3d #e-arbo .legende-arbo span{display:inline-flex;align-items:center;gap:6px}
  :root.arbre-3d #e-arbo .legende-arbo i{width:8px;height:8px;border-radius:50%;background:rgb(var(--rgb-cyan))}
  :root.arbre-3d #e-arbo .legende-arbo i.rev{background:rgb(var(--rgb-or))}
}
/* L'arbre en explorateur (30/10) : racine, catégories avec leur compte et leur jauge, groupes, fiches datées. */
.nom3d.racine-arbre{pointer-events:none}.nom3d.racine-arbre b{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--doux)}
.nom3d.cat-arbre{text-align:left}.nom3d.cat-arbre b{font-size:14px}.nom3d.cat-arbre span{font-size:11.5px;color:var(--doux)}
.nom3d.cat-arbre.ouverte b{color:var(--cyan)}
.jauge-arbre{display:block;width:110px;height:3px;margin-top:5px;border-radius:2px;background:rgba(var(--rgb-or),.75);overflow:hidden}
.jauge-arbre>i{display:block;height:100%;background:rgb(var(--rgb-cyan))}
.nom3d.groupe-arbre{pointer-events:none;text-align:left}.nom3d.groupe-arbre b{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--texte)}.nom3d.groupe-arbre span{display:inline;margin-left:8px;font-size:11px;color:var(--doux)}
.nom3d.groupe-arbre b,.nom3d.groupe-arbre span{display:inline}
.nom3d.fiche.arbre{display:flex;align-items:baseline;gap:8px}.nom3d.fiche.arbre span{font-size:11px;color:var(--doux)}

/* « Rester connecté 30 jours sur cet ordinateur » (03/11/2026) : la ligne entière est l'interrupteur. */
.connexion .carte-connexion button.rester{display:flex;align-items:flex-start;gap:12px;width:100%;margin:14px 0 2px;padding:12px 14px;border:1px solid var(--bord);border-radius:12px;background:none;color:var(--texte);font-weight:400;font-size:14px;text-align:left;cursor:pointer;box-shadow:none}
.connexion .carte-connexion button.rester:hover{border-color:rgba(var(--rgb-cyan),.55);background:rgba(var(--rgb-cyan),.05)}
.connexion .carte-connexion button.rester:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.rester .bascule2{display:block;margin-top:1px}
.rester-texte{display:flex;flex-direction:column;gap:3px;min-width:0}
.rester-titre{color:var(--fort);font-size:14px;line-height:1.35}
.rester-note{color:var(--doux);font-size:12.5px;line-height:1.4}