:root{--fond:#0f1115;--panneau:#171a21;--carte:#1d212b;--bord:#2a2f3b;--texte:#e6e8ee;--doux:#9aa3b2;--accent:#7c9cff;--ok:#3ecf8e;--ko:#ff6b6b;--att:#f5b041}
*{box-sizing:border-box}
body{margin:0;display:flex;min-height:100vh;background:var(--fond);color:var(--texte);font:15px/1.5 "Segoe UI",system-ui,sans-serif}
.menu{width:220px;background:var(--panneau);border-right:1px solid var(--bord);display:flex;flex-direction:column;padding:18px 12px;position:sticky;top:0;height:100vh}
.logo{font-weight:700;font-size:20px;display:flex;align-items:center;gap:10px;margin:0 8px 22px}
.point{width:10px;height:10px;border-radius:50%;background:var(--doux)}
.point.ok{background:var(--ok);box-shadow:0 0 8px var(--ok)}
nav a{display:block;padding:8px 12px;border-radius:8px;color:var(--doux);cursor:pointer;text-decoration:none;margin:1px 0}
nav a:hover{background:var(--carte);color:var(--texte)}
nav a.actif{background:var(--accent);color:#0b0d12;font-weight:600}
nav a.sous{padding-left:26px;font-size:14px}
/* Catégories du menu (28/09) : bien plus visibles que leurs onglets (gras, couleur, icône, espace au-dessus) */
.groupe{margin:18px 6px 4px;padding-top:10px;border-top:1px solid var(--bord);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
nav > .groupe:first-child{margin-top:0;padding-top:0;border-top:none}
/* Catégories repliables (28/09) : clic sur la catégorie ; le menu défile tout seul s'il est plus haut que la fenêtre */
.groupe{cursor:pointer;user-select:none;display:flex;align-items:center}
.groupe::after{content:'▾';margin-left:auto;font-size:11px;opacity:.7}
.groupe.replie::after{content:'▸'}
nav a.cache-groupe{display:none}
.menu{overflow-y:auto}
nav a.bientot{opacity:.45}
nav .discret{font-size:11px;color:var(--doux);margin-left:4px}
nav a.actif .discret{color:#0b0d12}
.bas{margin-top:auto;color:var(--doux);font-size:12px;padding:0 12px}
main{flex:1;min-width:0;padding:28px 36px;max-width:2560px}
h1{margin:0 0 20px;font-size:24px}h1 small{font-size:13px;color:var(--doux);font-weight:400;margin-left:8px}
h3{margin:0 0 12px;font-size:15px}
.page{display:none}.page.visible{display:block}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.deux{display:grid;grid-template-columns:220px 1fr;gap:16px}
.carte{background:var(--carte);border:1px solid var(--bord);border-radius:12px;padding:18px}
.aide{color:var(--doux);font-size:13px;margin:10px 0 0}
.lignes div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid var(--bord)}
.lignes div:last-child{border:0}.lignes span:first-child{color:var(--doux)}
button{background:var(--panneau);color:var(--texte);border:1px solid var(--bord);border-radius:8px;padding:8px 14px;cursor:pointer;font:inherit}
button:hover{border-color:var(--accent)}
button.principal,.boutons button.actif{background:var(--accent);color:#0b0d12;border-color:var(--accent);font-weight:600}
.boutons{display:flex;gap:8px;flex-wrap:wrap}
input,textarea,select{background:var(--panneau);color:var(--texte);border:1px solid var(--bord);border-radius:8px;padding:8px 10px;font:inherit;width:100%}
textarea{min-height:260px;resize:vertical;font-size:13px;line-height:1.45}
label.champ{display:block;margin:12px 0 4px;color:var(--doux);font-size:13px}
.bascule{display:flex;align-items:center;gap:10px;cursor:pointer}
.bascule input{display:none}
.bascule span{width:42px;height:24px;border-radius:12px;background:var(--bord);position:relative;transition:.2s;flex:none}
.bascule span:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s}
.bascule input:checked+span{background:var(--att)}.bascule input:checked+span:after{left:21px}
.liste{list-style:none;margin:0;padding:0}
.liste li{padding:10px 12px;border-radius:8px;cursor:pointer;border:1px solid transparent}
.liste li:hover{background:var(--carte)}.liste li.actif{border-color:var(--accent);background:var(--carte)}
.liste small{display:block;color:var(--doux)}
.ajout{display:flex;gap:8px;margin:14px 0}
.tableau{width:100%;border-collapse:collapse;margin-top:6px}
.tableau th,.tableau td{padding:8px;border-bottom:1px solid var(--bord);text-align:center}
.tableau th:first-child,.tableau td:first-child{text-align:left}
.pastille{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle}
.actions{display:flex;align-items:center;gap:12px;margin-top:14px}
.msg{color:var(--doux);font-size:13px}
.suppr{background:none;border:0;color:var(--ko);padding:2px 6px}
#toast{position:fixed;bottom:20px;right:20px;background:var(--carte);border:1px solid var(--bord);padding:10px 16px;border-radius:10px;opacity:0;transition:.3s;pointer-events:none}
#toast.vu{opacity:1}
.badge{font-size:12px;padding:2px 8px;border-radius:10px;background:var(--panneau);border:1px solid var(--bord);color:var(--doux)}
.badge.test{color:var(--att);border-color:var(--att)}
.onglets{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.onglets button.actif{background:var(--accent);color:#0b0d12;border-color:var(--accent)}
.defile{max-height:65vh;overflow:auto}
.tableau td.texte{text-align:left;max-width:1100px;white-space:pre-wrap;font-size:13px}
.tableau td[contenteditable]{outline:1px dashed transparent;cursor:text}.tableau td[contenteditable]:focus{outline-color:var(--accent);background:var(--panneau)}
.mini{padding:3px 8px;font-size:12px}
.barre{height:8px;background:var(--panneau);border-radius:4px;margin-top:10px;overflow:hidden}.barre div{height:100%;background:var(--ok);width:0}
.ex{border:1px solid var(--bord);border-radius:10px;padding:12px;margin-top:10px}.ex .ctx{color:var(--doux);font-size:13px;white-space:pre-wrap;border-left:3px solid var(--bord);padding-left:8px}
.ex textarea{min-height:60px}.ex .rate{color:var(--ko);text-decoration:line-through;white-space:pre-wrap;font-size:13px}
.v-ok{color:var(--ok)}.v-juste{color:var(--att)}.v-trop{color:var(--ko);font-weight:600}
.place{margin-top:12px;font-size:14px}.emp{display:grid;grid-template-columns:200px 1fr;gap:10px;align-items:center;margin:6px 0}
.hf{border-top:1px solid var(--bord);padding:8px 0}.hf summary{cursor:pointer}
.depot{border:2px dashed var(--bord);border-radius:12px;padding:28px;text-align:center;color:var(--doux);margin-top:14px}.depot.survol{border-color:var(--accent);color:var(--texte)}
.lien{color:var(--accent);cursor:pointer;text-decoration:underline}
.candidats{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:12px}
.cand{border:1px solid var(--bord);border-radius:10px;padding:12px}.cand h4{margin:0 0 6px}.cand audio{width:100%;height:32px;margin:3px 0}
.cand .ref{font-size:12px;color:var(--doux);margin-bottom:6px}
@media (max-width:720px){body{flex-direction:column}.menu{width:100%;height:auto;position:static;flex-direction:row;overflow-x:auto;padding:8px;gap:6px;align-items:center}.logo{margin:0 8px 0 0;font-size:16px}nav{display:flex;gap:4px}nav a{white-space:nowrap;padding:6px 10px}nav a.sous{padding-left:10px}.groupe,.bas{display:none}main{padding:16px}.deux{grid-template-columns:1fr}}
.lecteur{display:flex;align-items:center;gap:8px;background:var(--panneau);border:1px solid var(--bord);border-radius:10px;padding:8px 10px;margin:12px 0;position:sticky;top:8px;z-index:2}
.lecteur .titre{flex:1;font-size:13px;color:var(--doux);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lecteur button{padding:4px 10px}.bascule.petit span{width:34px;height:20px}.bascule.petit span:after{width:14px;height:14px}.bascule.petit input:checked+span:after{left:17px}
.piste{display:block;width:100%;text-align:left;margin:3px 0}.piste.actif{border-color:var(--accent);color:var(--accent)}
.avance{margin-top:16px;border-top:1px solid var(--bord);padding-top:10px}.avance summary{cursor:pointer;color:var(--doux)}
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:10px}.opt{display:flex;flex-direction:column;gap:3px}.opt label{font-size:13px}
.micro{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}.micro button.rec{background:var(--ko);color:#fff;border-color:var(--ko)}
.niveau{flex:1;min-width:120px;height:8px;background:var(--panneau);border-radius:4px;overflow:hidden}.niveau div{height:100%;width:0;background:var(--ok);transition:width .08s}
#microApercu audio{width:100%;margin-top:10px}

/* Permissions Discord : tableaux défilants sur petit écran */
.defile { overflow-x: auto; }
.tableau.droits th, .tableau.droits td { text-align: center; white-space: nowrap; }
.tableau.droits td:first-child { text-align: left; white-space: normal; min-width: 180px; }
#tableauxDroits h4 { margin: 18px 0 6px; }

.roles summary { cursor: pointer; }
.roles label { display: block; font-size: .9em; white-space: nowrap; }

/* Barre de la carte graphique (façon réglages graphiques d'un jeu) */
.barreCarte { position: relative; height: 18px; border-radius: 4px; background: rgba(255,255,255,.07); margin: 10px 0 6px; overflow: visible; }
.barreCarte .segs { display: flex; height: 100%; border-radius: 4px; overflow: hidden; }
.barreCarte .seg { height: 100%; border-right: 1px solid rgba(0,0,0,.35); }
.barreCarte .limite { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #fff; box-shadow: 0 0 4px #000; }
.barreCarte.trop .segs { box-shadow: 0 0 0 2px #e05a5a; }
.barreCarte.mini { height: 8px; margin: 2px 0; min-width: 140px; }
.barreCarte.mini .limite { top: -2px; bottom: -2px; }
.legende { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .85em; opacity: .85; margin-bottom: 6px; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.placeCol small { font-size: .8em; }

/* En direct */
#page-direct.visible { display: flex; flex-direction: column; height: calc(100vh - 48px); }
#page-direct:fullscreen { background: var(--fond, #0f1320); padding: 16px; height: 100vh; }
.direct-barre .filtres { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 10px; }
.puce { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.06); font-size: .88em; cursor: pointer; user-select: none; }
.puce input { width: auto; margin: 0; }
.filtres .sep { width: 1px; height: 20px; background: rgba(255,255,255,.2); margin: 0 4px; }
.journal { flex: 1; min-height: 300px; overflow-y: auto; background: #0a0d16; border-radius: 10px; padding: 10px 12px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.45; }
.journal .l { white-space: pre-wrap; word-break: break-word; padding: 1px 0; }
.journal .h { color: #6c7590; margin-right: 8px; }
.journal .c-chrono { color: #9aa6c4; }
.journal .c-actions { color: #d7b8ff; }
.journal .c-memoire { color: #9fd8c2; }
.journal .c-ecoute { color: #8fa3b8; font-style: italic; }
.journal .c-systeme { color: #7d8699; }
.journal .err { color: #ff8a8a; }
.carte.large { grid-column: 1 / -1; }
@media (max-width: 700px) { #page-direct.visible { height: calc(100vh - 90px); } .journal { font-size: 12px; } }

/* Accueil : état en tuiles, ressources */
.etat-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.tuile { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border-left: 3px solid #7c9cff; }
.tuile .ic { font-size: 1.3em; }
.tuile small { display: block; opacity: .65; font-size: .78em; }
.tuile b { font-weight: 600; }
.tuile.vert { border-color: #3fc59a; } .tuile.gris { border-color: #5b6275; opacity: .75; } .tuile.orange { border-color: #f0b35a; } .tuile.violet { border-color: #b88cff; } .tuile.bleu { border-color: #7c9cff; }
.tuile .pseudo { font-weight: 600; margin-right: 4px; }
.badge.gris { background: rgba(255,255,255,.1); color: inherit; }
.gpu { margin-bottom: 16px; }
.gpu-tete { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.aide-liste { margin: 8px 0 0; padding-left: 18px; }
.aide-liste li { margin: 2px 0; }

/* Discord : onglets et rôles cliquables */
.onglets { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.onglets button { border-radius: 8px 8px 0 0; opacity: .7; }
.onglets button.actif { opacity: 1; background: var(--accent, #7c9cff); color: #0b0e18; }
.roles-serveur { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.puce-role { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .9em; }
.puce.oui { background: rgba(63,197,154,.18); color: #7fe0bd; } .puce.non { background: rgba(224,90,90,.15); color: #ff9b9b; }

/* LoRA : tri lisible */
.ex .ctx > div { margin: 2px 0; }
.ex .qui { opacity: .6; font-size: .85em; margin-right: 4px; }
.ex .q-principale { font-size: 1.25em; font-weight: 700; color: #fff; background: rgba(124,156,255,.15); border-radius: 6px; padding: 4px 8px; margin: 6px 0 !important; }
.ex .q-liee { font-weight: 700; color: #e6e9f2; }
.ex .q-claudal { font-style: italic; opacity: .75; }
.ex .rate { margin-top: 6px; }
button.vert { background: #1f7a57; color: #fff; } button.vert:hover { background: #26946a; }
button.rouge { background: #8a2f2f; color: #fff; } button.rouge:hover { background: #a63939; }
.auto { position: relative; }
.propositions { position: absolute; z-index: 5; left: 0; right: 0; background: #1b2033; border: 1px solid var(--bord); border-radius: 8px; padding: 4px; }
.propositions > div { padding: 6px 8px; border-radius: 6px; cursor: pointer; } .propositions > div:hover { background: rgba(124,156,255,.2); }

/* Accueil : tout en pleine largeur, l'un sous l'autre */
.pile { display: flex; flex-direction: column; gap: 16px; }
.pile .carte { width: 100%; box-sizing: border-box; }
.etat-tuiles { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
/* Modes façon « soundboard » : gros boutons faciles à cliquer */
#modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
#modes button { padding: 16px 10px; font-size: 1.05em; font-weight: 600; border-radius: 12px; }

textarea.grand { min-height: 420px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.45; }
.texte-bloc + .texte-bloc { margin-top: 24px; }

/* Loupe : le texte suit la taille choisie (tout est en em à l'intérieur) */
.loupe { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.loupe button { padding: 4px 10px; font-size: 14px; }
#directJournal { font-size: 14px; }
#triListe .ex .ctx { font-size: 1em; } #triListe .ex .rate { font-size: .95em; } #triListe textarea { font-size: 1em; }

/* Grands écrans (16:9, 32:9) : l'interface prend la largeur (jusqu'à 2 560 px), les listes gagnent des colonnes */
@media (min-width: 1600px) { .deux { grid-template-columns: 280px 1fr; } .etat-tuiles { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }
/* Téléphone : tout sur une colonne, tableaux défilants, boutons faciles à toucher */
@media (max-width: 720px) {
  .pile .carte, .carte { padding: 12px; }
  .tableau { display: block; overflow-x: auto; }
  .boutons button, .actions button { min-height: 40px; }
  #modes { grid-template-columns: repeat(2, 1fr); }
  .gpu-tete { font-size: .9em; }
  .roles-serveur { flex-direction: column; }
}

.prio { padding-left: 22px; } .prio li { padding: 6px 4px; border-bottom: 1px solid var(--bord); display: flex; align-items: center; gap: 8px; } .prio li.fixe { opacity: .8; } .prio-btn { margin-left: auto; display: inline-flex; gap: 4px; }

/* Un panneau caché reste caché, même s'il a une mise en page (grille…) : corrige « Règles communes » sous les modes */
[hidden] { display: none !important; }
.tuile.allume { box-shadow: 0 0 0 1px #b88cff, 0 0 14px rgba(184,140,255,.35); }

.part-claudal { font-size: 1.15em; font-weight: 700; color: #7c9cff; background: rgba(124,156,255,.12); padding: 2px 10px; border-radius: 8px; }

/* Modèles : modèle | matériel | moteur de calcul sur une ligne (écran large) */
#emplacements .emp { display: grid; grid-template-columns: 220px minmax(260px, 2fr) minmax(160px, 1fr) minmax(150px, 1fr); gap: 8px; align-items: center; margin-bottom: 6px; }
#emplacements .emp small { grid-column: 2 / -1; }
@media (max-width: 900px) { #emplacements .emp { grid-template-columns: 1fr; } }

.tableau th.triable{cursor:pointer;user-select:none;white-space:nowrap}.tableau th.triable:hover{color:var(--accent,#7c9cff)}.tableau th.trie{color:var(--accent,#7c9cff)}

.fenetre{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;display:flex;align-items:center;justify-content:center;padding:24px}
.fenetre-boite{background:var(--panneau);border:1px solid var(--bord);border-radius:12px;width:min(1400px,100%);height:100%;display:flex;flex-direction:column}
.fenetre-tete{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--bord)}.fenetre-tete h3{flex:1;margin:0}
#fenetreContenu{overflow:auto;padding:12px 16px;flex:1}#fenetreContenu input{margin:6px 0 10px;width:100%}
.cv-resume{color:var(--doux);font-style:italic}.cv-l{padding:3px 0;line-height:1.45}.cv-l b{color:var(--accent);margin-right:4px}.cv-claudal b{color:var(--ok)}
.cv-ev{color:var(--doux);font-size:.85em;padding:3px 0}.cv-h{color:var(--doux);font-size:.8em;margin-right:8px;font-variant-numeric:tabular-nums}
td.lien-conv{cursor:pointer}td.lien-conv:hover{color:var(--accent);text-decoration:underline}
a{color:var(--accent)}
.lignes-moteur{display:grid;gap:6px;margin:6px 0 10px}.lignes-moteur .etiq{display:inline-block;min-width:170px;color:var(--doux)}

.rubrique{border:1px solid var(--bord);border-radius:10px;margin:10px 0;background:var(--panneau)}.rubrique>summary{cursor:pointer;padding:12px 16px;font-weight:600;font-size:1.05em}.rubrique>summary small{color:var(--doux);font-weight:400;margin-left:6px}
.rubrique .texte-bloc{padding:4px 16px 16px;border-top:1px solid var(--bord)}
textarea.mono{font-family:ui-monospace,Consolas,monospace;font-size:.9em}
.vars{font-size:.85em;color:var(--doux)}.var{font-family:ui-monospace,Consolas,monospace;background:var(--carte);border:1px solid var(--bord);border-radius:6px;padding:1px 6px;color:var(--accent)}
.fixe{font-size:.85em;color:var(--doux);background:var(--carte);border-left:3px solid var(--bord);padding:4px 10px;border-radius:4px}
.avec-mots{display:flex;gap:8px;margin-top:8px}.avec-mots input{flex:1}
.proposition{margin-top:10px;border:1px solid var(--accent);border-radius:8px;padding:10px}
.diff{font-family:ui-monospace,Consolas,monospace;font-size:.85em;max-height:420px;overflow:auto;white-space:pre-wrap}.dplus{background:rgba(62,207,142,.15);color:var(--ok)}.dmoins{background:rgba(255,107,107,.12);color:var(--ko);text-decoration:line-through}.degal{color:var(--doux)}
.code-bloc{padding:8px 16px;border-top:1px solid var(--bord)}.code-bloc pre{white-space:pre-wrap;margin:4px 0 0;color:var(--doux);font-size:.85em}

.mat{margin-top:14px}.mat-reglage{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0}.mat-reglage input[type=range]{flex:1;min-width:180px}

.grand-juge{margin-top:14px;border-top:1px solid var(--bord);padding-top:10px}.grand-juge h4{margin:0 0 4px}

.retour{border-top:1px solid var(--bord);padding:10px 0;display:grid;gap:4px}.retour.annule{opacity:.6}.cv-form{display:flex;gap:6px;margin:4px 0 8px 40px}.cv-form textarea{flex:1}.cv-avis{padding:0 6px;opacity:.6}.cv-avis:hover{opacity:1}

.point{border:1px solid var(--bord);border-radius:8px;padding:8px 10px;margin:8px 0}.point.erreur{border-color:var(--att)}.point-tete{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.compris{margin:6px 0}.reeval,.refaire{display:flex;gap:6px;margin-top:6px}.reeval textarea,.refaire textarea{flex:1}button.gris{opacity:.5}

#emplacements .suivi-lora { grid-column: 3 / -1; display: flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
@media (max-width: 900px) { #emplacements .suivi-lora { grid-column: auto; } }

.ressources { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.ressources .etiquette { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.segments { display: inline-flex; border: 1px solid var(--bord, #444); border-radius: 8px; overflow: hidden; }
.segments button { border: 0; border-radius: 0; margin: 0; padding: 6px 12px; background: transparent; }
.segments button + button { border-left: 1px solid var(--bord, #444); }
.segments button.actif { background: var(--accent); color: #0b0d12; font-weight: 600; }
.segments button.effectif { box-shadow: inset 0 -3px 0 var(--accent, #3b82f6); }
.ressources small { flex-basis: 100%; }

#listeTaches { display: grid; gap: 10px; }
.tache .tete-tache { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tache h3 { margin: 0; }
.tache p { margin: 6px 0; }
.pastille { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--bord); }
/* (28/09) Une pastille AVEC du texte (« en service », « prête »…) est une étiquette : elle prend la taille de son texte.
   Avant, elle gardait les 10 px du petit rond de couleur (même nom de style) et le texte débordait sur la description. */
.pastille:not(:empty) { width: auto; height: auto; margin-right: 0; white-space: nowrap; flex-shrink: 0; line-height: 1.4; }
.pastille.ok { border-color: var(--ok); color: var(--ok); }
.pastille.pause { opacity: .7; }
.pastille.attente { color: var(--doux); }
.pastille.pret { border-color: var(--accent); color: var(--accent); }
.option-tache { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; margin-left: 8px; cursor: pointer; }
/* Menu repliable (28/09) : ☰ dans la barre ; replié tout seul en plein écran */
body.menu-replie:not(.menu-ouvert) aside.menu { display: none; }
/* Barre d'accès rapide (28/09) : collée en haut, sur toutes les pages et en plein écran */
.barre-rapide { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; margin: -12px 0 14px; background: var(--panneau); border: 1px solid var(--bord); border-radius: 10px; }
.barre-rapide button, .barre-rapide select { padding: 3px 8px; min-width: 32px; font-size: 15px; line-height: 1.4; }
.barre-rapide button.actif { background: var(--accent); color: #0b0d12; border-color: var(--accent); }
.barre-rapide button.effectif { border-color: var(--accent); color: var(--accent); }
.barre-rapide .sep { width: 1px; align-self: stretch; background: var(--bord); margin: 0 4px; }
.groupe-barre { display: inline-flex; gap: 3px; }
/* Familles repliables de la barre (28/09) */
.famille { display: inline-flex; align-items: center; gap: 3px; padding: 2px; border: 1px solid var(--bord); border-radius: 9px; } /* (28/09 : contour blanc essayé, trop flash : retour à la couleur des autres contours) */
.famille .contenu-famille { display: inline-flex; gap: 3px; }
.famille.fermee .contenu-famille { display: none; }
.tete-famille { display: inline-flex; align-items: center; justify-content: center; }
/* (28/09 : fond violet Discord retiré, tout est monochrome dans la barre) */
.famille.fermee.actif-dedans .tete-famille { box-shadow: 0 0 0 2px var(--accent); } /* replié mais un bouton est allumé dedans */
.barre-droite { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.avec-point { position: relative; }
.avec-point.notif::after { content: ''; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--ko); box-shadow: 0 0 0 2px var(--panneau); }
.enveloppe { margin-left: auto; font-size: 14px; padding: 2px 8px; border-radius: 10px; background: var(--att); color: #0b0d12; cursor: pointer; text-decoration: none; }
/* Écran partagé : la page courante à gauche, la page choisie à droite */
main.double { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); gap: 10px; align-content: start; }
main.double > .barre-rapide { grid-column: 1 / -1; order: 0; }
main.double > .page.visible { order: 1; } main.double > .separateur-double { order: 2; } main.double > .page.droite { order: 3; }
.separateur-double { position: relative; display: flex; justify-content: center; align-items: flex-start; }
.separateur-double::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--bord); }
.boutons-separateur { position: sticky; top: 70px; z-index: 1; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.separateur-double button { padding: 4px 5px; }
#redimDouble { cursor: ew-resize; touch-action: none; }
body.redim { cursor: ew-resize; user-select: none; }
.info { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 8px; border-radius: 50%; border: 1px solid var(--doux); color: var(--doux); font-size: 11px; font-weight: 700; font-style: normal; cursor: help; vertical-align: middle; }
.info:hover { border-color: var(--accent); color: var(--accent); }
.barre-rapide select { width: auto; max-width: 200px; }
main.double > .page.visible { min-width: 0; }
main:fullscreen { background: var(--fond); overflow: auto; padding: 16px; }
main:fullscreen #page-direct.visible, main.double #page-direct.visible { height: calc(100vh - 90px); }
.ordre-perso { display: inline-flex; gap: 2px; margin-right: 6px; }
.ordre-perso button { padding: 0 5px; font-size: 11px; }
/* Local : discussion privée (28/09) */
#page-local.visible { display: block; height: calc(100vh - 130px); }
.local-barre label { display: flex; align-items: center; gap: 6px; } .local-barre label input { width: auto; margin: 0; }
.local { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 12px; height: 100%; }
.local.replie { grid-template-columns: minmax(0, 1fr); } .local.replie .local-barre { display: none; }
.local-barre { display: flex; flex-direction: column; gap: 8px; min-height: 0; background: var(--panneau); border: 1px solid var(--bord); border-radius: 12px; padding: 10px; }
.local-barre-tete { display: flex; align-items: center; gap: 8px; }
.local-barre-tete button, .local-chat-tete button { padding: 2px 8px; }
#localListe { flex: 1; overflow-y: auto; min-height: 0; }
.local-section { margin: 10px 2px 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); display: flex; align-items: center; gap: 6px; }
.local-section button { padding: 0 6px; font-size: 12px; margin-left: auto; }
.local-conv { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.local-conv:hover { background: var(--carte); } .local-conv.actif { background: var(--carte); outline: 1px solid var(--accent); }
.local-conv .titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.local-conv .actions { display: none; gap: 2px; } .local-conv:hover .actions { display: inline-flex; }
/* Explorateur (28/09) : glisser-déposer et menu du clic droit */
.local-zone { border-radius: 8px; padding-bottom: 2px; }
.local-zone.survol { outline: 2px dashed var(--accent); background: rgba(124,156,255,.06); }
.local-zone .local-section { cursor: pointer; }
.local-conv.glisse { opacity: .4; }
.local-conv[draggable="true"] { cursor: grab; }
.msg.vide { font-size: 12px; padding: 4px 8px; }
.menu-contexte { position: fixed; z-index: 100; min-width: 220px; background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.45); display: flex; flex-direction: column; }
.menu-contexte button { text-align: left; border: none; background: none; padding: 6px 10px; border-radius: 6px; }
.menu-contexte button:hover { background: var(--panneau); }
.menu-contexte button.danger { color: var(--ko); }
.menu-contexte hr { border: none; border-top: 1px solid var(--bord); margin: 4px 0; }
.menu-contexte .mc-titre { font-size: 11px; color: var(--doux); padding: 4px 10px 0; text-transform: uppercase; }
.local-conv .actions button { padding: 0 4px; font-size: 12px; border: none; background: none; }
.local-conv .extrait { display: block; font-size: 11px; color: var(--doux); }
.local-chat { display: flex; flex-direction: column; min-height: 0; }
.local-chat-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 18px; }
.chat-boutons { display: grid; grid-template-columns: 44px 64px; grid-template-rows: 1fr 1fr; gap: 6px; }
.chat-boutons #localMaintenir { grid-column: 1; grid-row: 1; } .chat-boutons #localMicro { grid-column: 1; grid-row: 2; }
.chat-boutons .envoyer { grid-column: 2; grid-row: 1 / span 2; font-size: 22px; }
.chat { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--panneau); border: 1px solid var(--bord); border-radius: 12px; }
.bulle { max-width: 75%; padding: 10px 14px; border-radius: 14px; line-height: 1.5; white-space: normal; }
.bulle.moi { align-self: flex-end; background: var(--accent); color: #0b0d12; border-bottom-right-radius: 4px; }
.bulle.lui { align-self: flex-start; background: var(--carte); border: 1px solid var(--bord); border-bottom-left-radius: 4px; }
.bulle.attente { opacity: .8; }
/* ▶ lire la réponse à voix haute, à la demande (29/09) */
.bulle-lire { text-align: right; margin-top: 4px; } .bulle-lire button { padding: 0 8px; font-size: 12px; opacity: .75; }
.chat-saisie { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
.chat-saisie { align-items: stretch !important; }
.chat-saisie textarea { flex: 1; resize: none; min-height: 88px; max-height: 40vh; overflow-y: auto; box-sizing: border-box; margin: 0; } /* (28/09 : même hauteur que le bloc de boutons) */
.chat-boutons { min-height: 88px; }
/* Tribunal : boîte aux lettres des seconds regards (28/09) */
.boite { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 12px; }
@media (max-width: 800px) { .boite { grid-template-columns: 1fr; } }
.courrier { border: 1px solid var(--bord); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer; background: var(--panneau); }
.courrier.actif { border-color: var(--accent); }
.courrier .objet { color: var(--att); }
.courrier.nonlu .objet { font-weight: 700; }
.courrier.nonlu::before { content: '●'; color: var(--accent); margin-right: 6px; }
.courrier .msg, .etape .msg { color: var(--doux); font-size: 13px; }
.courrier.panne .objet, .objet-grand.panne { color: var(--ko); }
/* Messagerie (28/09) : une vraie lettre (De / Objet), leçons une par une */
.courrier .expediteur { color: var(--texte); } .courrier .objet { display: block; }
.lettre-tete { border-bottom: 1px solid var(--bord); padding-bottom: 8px; margin-bottom: 10px; display: grid; gap: 2px; }
.lettre-tete .objet-grand { font-size: 17px; margin: 0; }
.lecon { border: 1px solid var(--bord); border-radius: 8px; padding: 8px 10px; margin: 6px 0; background: var(--panneau); }
.lecon.actif { border-color: var(--accent); }
.lecon.faite { opacity: .8; }
.total-modeles { margin: 4px 0 10px; font-size: 15px; }
.precision { margin: 6px 0; padding: 6px 8px; border-left: 3px solid var(--att); background: rgba(245,176,65,.08); border-radius: 4px; font-size: 14px; }
#filtreMessages select { width: auto; margin-left: auto; }
.objet-grand { font-size: 20px; font-weight: 700; color: var(--att); margin: 0 0 6px; }
.etape { border-left: 3px solid var(--bord); padding: 4px 10px; margin: 6px 0; white-space: pre-wrap; }
.etape.verdict { border-color: var(--accent); }
.conv-tribunal > div { padding: 4px 8px; margin: 3px 0; border-radius: 6px; }
.cle-contexte { color: var(--doux); font-size: 13px; opacity: .75; }
.cle-source { font-size: 17px; background: rgba(245,176,65,.15); border-left: 4px solid var(--att); }
.cle-reponse { font-size: 17px; background: rgba(124,156,255,.15); border-left: 4px solid var(--accent); }
.cle-importante { font-size: 15px; border-left: 3px solid var(--doux); }
.conv-tribunal small { color: var(--doux); font-size: 11px; }
.statut-tribunal { font-size: 12px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--bord); }
.statut-tribunal.coupable { color: var(--ko); border-color: var(--ko); } .statut-tribunal.acquittee, .statut-tribunal.relaxee { color: var(--ok); border-color: var(--ok); } .statut-tribunal.second_regard { color: var(--att); border-color: var(--att); }
/* Menu (28/09) : icônes monochromes, de la couleur du texte ; glisser-déposer */
.groupe .ico{font-family:'Segoe UI Symbol','Noto Sans Symbols 2','Noto Sans Symbols',sans-serif;font-variant-emoji:text;margin-right:7px;font-weight:400}
#nav > .tire{opacity:.4}
#nav > .cible-avant{box-shadow:0 -2px 0 var(--accent)}
#nav > .cible-apres{box-shadow:0 2px 0 var(--accent)}
/* Menu plus compact (28/09) : pages et catégories plus serrées en hauteur */
nav a.sous{padding-top:4px;padding-bottom:4px;margin:0}
.groupe{margin:10px 6px 2px;padding-top:7px}
/* Ascenseurs discrets, aux couleurs de l'interface (plus de barre blanche) */
*{scrollbar-width:thin;scrollbar-color:var(--bord) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bord);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--doux)}
/* Barre rapide toute monochrome (28/09, PastiiJay) : les émoticônes deviennent des silhouettes d'une seule couleur ;
   têtes de famille en bleu (comme les catégories du menu), boutons en blanc ; bouton allumé : silhouette sombre. */
.barre-rapide button { color: transparent !important; text-shadow: 0 0 0 var(--texte); }
.barre-rapide button.actif, .barre-rapide button.principal { text-shadow: 0 0 0 #0b0d12; }
.barre-rapide button.effectif { text-shadow: 0 0 0 var(--accent); }
.barre-rapide svg { color: var(--texte); }
/* Tête de famille « bouton séparé » : icône bleue | petite flèche (‹ déplié, › replié), comme un menu déroulant. */
.barre-rapide .tete-famille { padding: 0 !important; gap: 0; overflow: hidden; text-shadow: 0 0 0 var(--accent); }
.tete-famille > svg, .tete-famille > .ico-tete { color: var(--accent); margin: 0 6px; }
.tete-famille:not(:has(svg)) { padding-left: 6px !important; }
.tete-famille::after { content: '‹'; align-self: stretch; display: flex; align-items: center; padding: 0 5px; margin-left: 6px; border-left: 1px solid var(--bord); font-size: 13px; text-shadow: 0 0 0 var(--doux); }
.tete-famille:has(svg)::after { margin-left: 0; }
.famille.fermee .tete-famille::after { content: '›'; }
.tete-famille:hover::after { text-shadow: 0 0 0 var(--accent); }
/* Préréglages d'écran partagé (28/09) : un préréglage vide est plus pâle */
.barre-rapide [data-double].vide { opacity: .5; }
.barre-rapide [hidden] { display: none !important; }
/* Confiance du Professeur dans une leçon (28/09) */
.badge-conf { font-size: 12px; white-space: nowrap; opacity: .9; margin-right: 2px; }
/* Coach en chat (28/09) */
.chat-boutons #coachMaintenir { grid-column: 1; grid-row: 1; } .chat-boutons #coachMicro { grid-column: 1; grid-row: 2; }
.bulle .propositions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.bulle .propositions button { text-align: left; }
/* Téléphone (28/09) : Local sur une seule colonne (la liste des conversations en haut, compacte ; le chat en pleine
   largeur) et un en-tête qui passe à la ligne : avant, l'en-tête débordait et le téléphone dézoomait toute la page. */
@media (max-width:720px) {
  .local { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: auto; }
  .local-barre { max-height: 34vh; overflow-y: auto; }
  .local-chat-tete { flex-wrap: wrap; font-size: 16px; }
  .local-chat .chat { min-height: 45vh; }
  .chat-saisie textarea { min-width: 0; }
  .bulle { max-width: 88%; }
  /* 29/09 : la zone d'écriture reste en bas de l'écran, comme dans une messagerie. */
  .local-chat .chat-saisie { position: sticky; bottom: 0; z-index: 5; background: var(--fond); margin-top: 0; padding: 8px 0; }
}
/* Téléphone, toute l'interface (29/09, PastiiJay) : la barre d'actions rapides tient sur UNE ligne qu'on fait défiler du
   doigt (comme le menu du haut) ; rien ne dépasse la largeur de l'écran (sinon le téléphone dézoome toute la page) :
   cartes, tableaux, journaux et onglets défilent dans leur propre cadre. */
@media (max-width:720px) {
  main { padding: 10px !important; }
  .barre-rapide { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; margin: -4px 0 10px; padding: 4px 6px; border-radius: 8px; -webkit-overflow-scrolling: touch; }
  .barre-rapide > *, .barre-rapide .famille, .barre-rapide .contenu-famille { flex: none; }
  .barre-droite { margin-left: 8px; }
  .carte { max-width: 100% !important; box-sizing: border-box; overflow-x: auto; }
  .tableau { display: block; overflow-x: auto; }
  pre, .journal { max-width: 100%; overflow-x: auto; box-sizing: border-box; }
  input, select, textarea { max-width: 100%; box-sizing: border-box; }
  h1 { font-size: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
  .onglets { flex-wrap: nowrap; overflow-x: auto; }
  .onglets > button { flex: none; }
  .actions { flex-wrap: wrap; }
  .bulle { max-width: 92%; }
}
/* Serveur › Domaines (29/09) : champs du tableau pleine largeur */
#domainesListe input:not([type=checkbox]) { width: 100%; box-sizing: border-box; margin: 0; }