/* (29/09) Couleurs à la façon de Claude : gris chauds et noir, accent orange (demande de PastiiJay, confort des yeux). */
:root{--fond:#1f1e1d;--panneau:#1a1918;--carte:#2b2a28;--bord:#3d3c38;--texte:#f0eee6;--doux:#a8a59c;--accent:#de7356;--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:#1a1918;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(--doux)}
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:#1a1918}
.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:#1a1918;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:#1a1918;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, #1f1e1d); 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: #161514; 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: #86837b; margin-right: 8px; }
.journal .c-chrono { color: #b3afa5; }
.journal .c-actions { color: #d7b8ff; }
.journal .c-memoire { color: #9fd8c2; }
.journal .c-ecoute { color: #a8a59c; font-style: italic; }
.journal .c-systeme { color: #8f8c84; }
.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 #de7356; }
.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: #6b6963; opacity: .75; } .tuile.orange { border-color: #f0b35a; } .tuile.violet { border-color: #b88cff; } .tuile.bleu { border-color: #de7356; }
.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, #de7356); color: #1a1918; }
.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(222,115,86,.15); border-radius: 6px; padding: 4px 8px; margin: 6px 0 !important; }
.ex .q-liee { font-weight: 700; color: #f0eee6; }
.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: #2b2a28; 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(222,115,86,.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: #de7356; background: rgba(222,115,86,.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,#de7356)}.tableau th.trie{color:var(--accent,#de7356)}

.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: #1a1918; font-weight: 600; }
.segments button.effectif { box-shadow: inset 0 -3px 0 var(--accent, #de7356); }
.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: #1a1918; 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: #1a1918; 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(--doux); 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(222,115,86,.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: #1a1918; 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(222,115,86,.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 #1a1918; }
.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; position: static; background: none; border: none; padding: 0; } /* (29/09 : n'hérite plus de la liste déroulante qui flottait sur toute la largeur) */
.bulle .propositions button { white-space: normal; max-width: 100%; }
.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; }

/* Comptes web (29/09) : boutons réservés aux donateurs (grisés, cliquables pour lire pourquoi), bandeau « occupé »
   près de la saisie, et sur téléphone : conversations au-dessus, saisie ancrée en bas. */
.verrou { opacity: .45; filter: grayscale(1); cursor: help; }
.bandeau-occupe { margin: 8px 0 0; padding: 6px 10px; border-radius: 8px; background: rgba(245,176,65,.12); border: 1px solid rgba(245,176,65,.35); color: var(--att); font-size: 13px; }
@media (max-width:720px) {
  .compte-chat { flex-direction: column; }
  .compte-convs { width: auto !important; max-height: 28vh; }
  .compte-saisie { position: sticky; bottom: 0; z-index: 5; background: var(--fond); padding-bottom: 8px; }
}
/* Messages des agents (29/09) : un rappel du passé (ce qui s'est passé) est présenté à part, grisé, en italique. */
.rappel { margin: 10px 0; padding: 8px 12px; border-left: 3px solid var(--bord); background: rgba(255,255,255,.04); border-radius: 6px; color: var(--doux); font-style: italic; }
.rappel small { display: block; font-style: normal; margin-bottom: 4px; }
/* Petite fenêtre centrée (comptes web, 29/09) : lisible et facile à toucher sur téléphone (Android, iPhone). */
.popup-fond { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.popup { width: min(380px, 100%); box-sizing: border-box; background: var(--carte); border: 1px solid var(--bord); border-radius: 14px; padding: 18px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.popup h3 { margin: 0 0 8px; font-size: 17px; }
.popup p { margin: 0 0 14px; line-height: 1.5; color: var(--texte); }
.popup-boutons { display: flex; flex-direction: column; gap: 8px; }
.popup-boutons > * { min-height: 44px; font-size: 16px; text-align: center; display: flex; align-items: center; justify-content: center; text-decoration: none; }
/* Rappel discret dans la bulle d'attente (29/09) : les donateurs passent devant (touchable : ouvre l'explication). */
.verrou-doux { opacity: .7; filter: none; font-size: 12px; text-decoration: underline dotted; cursor: pointer; }
.popup-soutenir { border-radius: 8px; background: var(--att); color: #1a1300; font-weight: 600; }
.popup-soutenir.bientot { opacity: .55; cursor: default; }
/* Mes données (RGPD discret, 29/09) : replié, petit, sans insister. */
.mes-donnees { margin-top: 18px; font-size: 13px; }
.mes-donnees summary { cursor: pointer; color: var(--doux); }
.interrupteur-ligne { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.interrupteur-ligne input { width: auto; margin: 0; }
.lien-doux { background: none !important; border: none !important; color: var(--doux); text-decoration: underline; padding: 4px 6px; font-size: 13px; cursor: pointer; }
/* Confirmation de demande de compte (29/09). */
.confirmation { text-align: center; padding: 8px 4px; }
.confirmation-icone { font-size: 40px; margin-bottom: 6px; }
.confirmation button { margin-top: 10px; min-height: 44px; width: 100%; }
/* Comptes web (29/09) : bouton ⋯ des conversations (menu sur téléphone ; au survol sur PC). */
.conv-menu { padding: 0 6px !important; min-height: 0; background: none !important; border: none !important; color: var(--doux); opacity: 0; }
.local-conv:hover .conv-menu, .local-conv.actif .conv-menu { opacity: 1; }
@media (hover: none) { .conv-menu { opacity: .8; } }
/* (29/09) Téléphone : la dernière bulle amenée à l'écran ne passe pas sous la zone d'écriture ancrée en bas. */
@media (max-width:720px) { .compte-chat .bulle, #localFil .bulle { scroll-margin-bottom: 160px; } }
/* Fenêtre donateurs (29/09) : une étoile par avantage. */
.avantages-titre { margin: 0 0 4px !important; font-weight: 600; }
.avantages { list-style: none; padding: 0; margin: 0 0 14px; }
.avantages li { position: relative; padding-left: 22px; margin: 6px 0; line-height: 1.45; }
.avantages li::before { content: '★'; position: absolute; left: 0; color: var(--att); }
/* Système › Priorités (29/09). */
.liste-priorites { padding-left: 22px; margin: 8px 0 14px; }
.liste-priorites li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; margin: 6px 0; background: var(--panneau); border: 1px solid var(--bord); border-radius: 8px; }
.liste-priorites li button { margin-left: 4px; }

/* E-mail (29/09) : le texte d'un mail, tel quel (jamais de HTML exécuté). */
.email-texte { white-space: pre-wrap; word-break: break-word; margin: 12px 0; line-height: 1.5; max-height: 60vh; overflow: auto; }

/* E-mail comme Gmail (29/09) : dossiers à gauche, liste paginée au milieu, lecture à droite. */
.email-cadre { display: grid; grid-template-columns: 170px minmax(240px, 360px) minmax(0, 1fr); gap: 10px; align-items: start; }
.email-dossiers { display: flex; flex-direction: column; gap: 4px; }
.email-dossiers button { text-align: left; }
.email-dossiers button.actif { outline: 1px solid var(--accent); background: var(--carte); }
.email-pages { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.email-pages .msg { flex: 1; text-align: right; }
@media (max-width: 900px) { .email-cadre { grid-template-columns: 1fr; } .email-dossiers { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; } .email-dossiers button { flex: none; } }

/* Après l'inscription (29/09) : la consigne « vérifie tes e-mails » bien visible. */
.bulle-verif { background: rgba(222,115,86,.12); border: 1px solid var(--accent); border-radius: 12px; padding: 12px 14px; font-size: 16px; line-height: 1.5; }
/* Avertissement bien visible (orange), à ne pas rater (29/09). */
.avertissement { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: rgba(245,176,65,.14); border: 1px solid var(--att); color: var(--att); line-height: 1.45; }

/* Barre rapide (29/09) : compteur rouge (demandes à valider, mails non lus). */
.compteur { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--ko); color: #fff; font-size: 10px; line-height: 16px; font-weight: 700; box-shadow: 0 0 0 2px var(--panneau); }
/* Utilisateurs (29/09) : en attente en haut, filtres, tableau compact, fiche à droite. */
.attente-comptes { border-color: var(--att); }
.ligne-attente { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--bord); flex-wrap: wrap; }
.filtres-comptes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.filtres-comptes input { max-width: 240px; }
.comptes-cadre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 12px; align-items: start; }
.comptes-cadre:has(#ficheCompte[hidden]) { grid-template-columns: minmax(0, 1fr); }
.comptes-table tr[data-compte] { cursor: pointer; }
.comptes-table tr[data-compte]:hover, .comptes-table tr.actif { background: var(--carte); }
.comptes-table td, .comptes-table th { padding: 6px 8px; font-size: 13px; }
.fiche-tete { display: flex; justify-content: space-between; align-items: center; }
.fiche-tete h3 { margin: 0; }
.fiche-email { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.fiche-ligne { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--bord); font-size: 13px; }
.fiche-ligne select { width: auto; padding: 2px 6px; font-size: 13px; }
@media (max-width: 900px) { .comptes-cadre { grid-template-columns: 1fr; } }

/* (29/09) Compteurs lisibles (pas d'ombre de la barre monochrome) ; icônes au trait sombres quand le bouton est allumé. */
.barre-rapide .compteur { text-shadow: none; color: #fff !important; }
.barre-rapide button.actif svg, .barre-rapide button.principal svg { color: #1a1918; }
.barre-rapide button svg { vertical-align: -3px; }

/* Groupes et droits (29/09). */
.groupes-cadre { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 900px) { .groupes-cadre { grid-template-columns: 1fr; } }
#listeGroupes li { cursor: pointer; } #listeGroupes li.actif { outline: 1px solid var(--accent); }
.famille-droits { margin: 14px 0 4px; font-size: 14px; color: var(--accent); }
.droit-ligne { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; } .droit-ligne input { width: auto; margin: 0; }
.fiche-groupes { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: flex-end; } .fiche-groupes input { width: auto; margin: 0 2px 0 0; }
.fiche-perso { margin: 10px 0; } .fiche-perso summary { cursor: pointer; font-size: 13px; }

/* (29/09) Fenêtre plein écran qui cache tout le reste (suppression du compte). */
.plein-fond { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--fond); }
.popup-boutons .danger { background: var(--ko); color: #fff; border-color: var(--ko); }

/* « Voir en tant que… » (29/09). */
.voir-en-tant-que { width: auto; font-size: 13px; padding: 3px 8px; vertical-align: middle; }
.bandeau-apercu { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: rgba(245,176,65,.14); border: 1px solid var(--att); color: var(--att); }
.attente-dans-liste:empty { display: none; }

/* Clodens (29/09). */
.compteur-clodens { font-size: 13px; color: var(--att); padding: 0 6px; }
.clodens-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.clodens-grille > div { background: var(--panneau); border: 1px solid var(--bord); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; }
.clodens-grille b { font-size: 20px; color: var(--att); } .clodens-grille .petit b { font-size: 15px; } .clodens-grille small { color: var(--doux); font-size: 12px; }

/* (29/09) Indicateur de la réponse en cours. */
.indicateur-reponse { font-size: 12px; color: var(--doux); margin-top: 4px; }

/* (29/09) Ligne d'état sous la conversation (comme l'appli Claude). */
.statut-reponse { min-height: 18px; font-size: 12px; color: var(--doux); padding: 4px 4px 0; display: flex; gap: 10px; flex-wrap: wrap; }
.statut-reponse:empty { display: none; }
.point-travail { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 6px; animation: battement 1s ease-in-out infinite; vertical-align: 1px; }
@keyframes battement { 50% { opacity: .25; } }

/* (29/09) Liens, vidéos et images dans les bulles. */
.bulle a { color: var(--accent); word-break: break-all; }
.bulle.moi a { color: #1a1918; text-decoration: underline; }
.video-chat { position: relative; width: min(480px, 100%); aspect-ratio: 16 / 9; margin-top: 8px; border-radius: 8px; overflow: hidden; background: #000; }
.video-chat iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.image-chat { display: block; max-width: min(360px, 100%); max-height: 320px; margin-top: 8px; border-radius: 8px; }

/* Analyse › Clodens (29/09). */
.clodens-resume { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.clodens-resume .petite { display: flex; flex-direction: column; margin: 0; } .clodens-resume b { font-size: 24px; color: var(--att); } .clodens-resume small { color: var(--doux); }
.barre-c { height: 8px; background: var(--panneau); border-radius: 4px; overflow: hidden; flex: 1; } .barre-c span { display: block; height: 100%; background: var(--att); border-radius: 4px; }
.usage-c { display: grid; grid-template-columns: 170px 1fr 110px; gap: 8px; align-items: center; padding: 4px 0; font-size: 13px; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 900px) { .deux-colonnes { grid-template-columns: 1fr; } .usage-c { grid-template-columns: 1fr; } }

/* (29/09) « Obtenir plus de Clodens » : fenêtre Matrix, pilule rouge (don) à gauche, bleue (pubs) à droite, comme Morpheus. */
.compteur-clodens { cursor: pointer; }
.matrix-fond { position: fixed; inset: 0; z-index: 3000; background: #000; display: flex; align-items: center; justify-content: center; }
.matrix-fond[hidden] { display: none; }
#matrixPluie { position: absolute; inset: 0; width: 100%; height: 100%; }
.matrix-contenu { position: relative; text-align: center; color: #b6ffc8; padding: 22px 18px; max-width: 560px; width: calc(100% - 32px); background: rgba(0, 0, 0, .72); border: 1px solid rgba(31, 211, 92, .4); border-radius: 14px; box-shadow: 0 0 40px rgba(31, 211, 92, .25); font-family: ui-monospace, Consolas, monospace; }
.matrix-contenu h2 { margin: 0 0 6px; color: #1fd35c; letter-spacing: 1px; }
.matrix-fermer { position: absolute; top: 8px; right: 8px; background: none !important; border: none !important; color: #b6ffc8; font-size: 18px; }
.matrix-choix { display: flex; justify-content: center; gap: 28px; margin: 18px 0 8px; flex-wrap: wrap; }
.matrix-main { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 200px; }
.matrix-main small { color: #7fd99a; font-size: 12px; }
.main { font-size: 64px; line-height: 1; margin-top: -8px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.6)); }
.main.miroir { transform: scaleX(-1); }
.pilule { border-radius: 999px !important; padding: 10px 22px !important; font-weight: 700; color: #fff !important; border: none !important; min-width: 170px; box-shadow: inset 0 -6px 10px rgba(0,0,0,.25), inset 0 4px 8px rgba(255,255,255,.35), 0 6px 18px rgba(0,0,0,.5); cursor: pointer; font-family: inherit; }
.pilule.rouge { background: linear-gradient(180deg, #ff5b5b, #b3001b) !important; }
.pilule.bleue { background: linear-gradient(180deg, #5b9bff, #0034b3) !important; }
.pilule:hover { transform: translateY(-2px); }
.matrix-msg { min-height: 20px; color: #d8ffd8; }

/* (29/09) Les mains dessinées (façon fan art), la pilule couchée à l'horizontale dans la paume. */
.matrix-contenu { background: rgba(0, 0, 0, .55); }
.matrix-choix { gap: 12px; align-items: flex-end; }
.matrix-main { position: relative; width: 250px; }
.matrix-main .main-svg { width: 250px; height: 160px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.8)); }
.matrix-main.droite .main-svg { transform: scaleX(-1); }
.matrix-main .pilule { position: absolute; top: 72px; min-width: 0; padding: 7px 14px !important; font-size: 12px; white-space: nowrap; transform: rotate(-4deg); }
.matrix-main.gauche .pilule { left: 108px; }
.matrix-main.droite .pilule { right: 108px; transform: rotate(4deg); }
.matrix-main .pilule:hover { transform: rotate(0deg) scale(1.05); }
.matrix-main small { margin-top: 2px; }
@media (max-width: 560px) { .matrix-main, .matrix-main .main-svg { width: 200px; } .matrix-main .main-svg { height: 128px; } .matrix-main .pilule { top: 56px; font-size: 11px; } .matrix-main.gauche .pilule { left: 80px; } .matrix-main.droite .pilule { right: 80px; } }

/* (29/09) Les mains sortent du noir : plus de cadre, mains écartées sur les côtés, texte lisible sur la pluie. */
.matrix-contenu { background: none; border: none; box-shadow: none; max-width: 900px; }
.matrix-contenu h2, .matrix-contenu p, .matrix-main small { text-shadow: 0 0 6px #000, 0 0 12px #000, 0 0 2px #000; }
.matrix-contenu h2 { font-size: 26px; }
.matrix-choix { gap: clamp(20px, 18vw, 260px); }

/* (29/09 v2) Mains de Windows en noir et blanc, gélules brillantes couchées dans la paume. */
.matrix-main { width: 240px; height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.main-emoji { font-size: 150px; line-height: 1; filter: grayscale(1) contrast(1.25) brightness(1.05) drop-shadow(0 10px 18px rgba(0,0,0,.9)); user-select: none; }
.main-emoji.miroir { transform: scaleX(-1); }
.gelule { position: absolute; top: 88px; left: 50%; transform: translateX(-50%) rotate(-6deg); width: 170px; height: 46px; border-radius: 23px !important; border: none !important; padding: 0 !important; cursor: pointer; overflow: hidden; color: #fff !important; font: 700 13px/46px system-ui, sans-serif; text-shadow: 0 1px 2px rgba(0,0,0,.6) !important; }
.matrix-main.droite .gelule { transform: translateX(-50%) rotate(6deg); }
.gelule::before { content: ''; position: absolute; left: 10%; right: 10%; top: 5px; height: 14px; border-radius: 10px; background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0)); }
.gelule::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(0,0,0,.15); }
.gelule span { position: relative; z-index: 1; }
.gelule.rouge { background: radial-gradient(ellipse at 50% 30%, #ff6d6d, #c4001d 60%, #6d0010) !important; box-shadow: 0 0 22px rgba(255, 40, 60, .55), 0 8px 16px rgba(0,0,0,.7); }
.gelule.bleue { background: radial-gradient(ellipse at 50% 30%, #6fb0ff, #0049d6 60%, #001c63) !important; box-shadow: 0 0 22px rgba(40, 120, 255, .55), 0 8px 16px rgba(0,0,0,.7); }
.gelule:hover { filter: brightness(1.15); }
.matrix-main small { margin-top: 6px; }
@media (max-width: 560px) { .matrix-main { width: 160px; height: 170px; } .main-emoji { font-size: 110px; } .gelule { top: 64px; width: 130px; height: 38px; font-size: 11px; line-height: 38px; } }

/* (29/09 v2) La main bien visible, la gélule posée dans le creux de la paume. */
.matrix-main { height: 260px; }
.main-emoji { font-size: 190px; }
.gelule { top: 150px; width: 150px; height: 40px; line-height: 40px; font-size: 12px; }
.matrix-main.gauche .gelule { left: 44%; } .matrix-main.droite .gelule { left: 56%; }
@media (max-width: 560px) { .matrix-main { height: 190px; } .main-emoji { font-size: 130px; } .gelule { top: 104px; width: 120px; height: 34px; line-height: 34px; font-size: 10px; } }

/* (29/09 v3) Une PETITE fenêtre par-dessus la page (pas du plein écran), qui s'ouvre avec une animation ; marche sur téléphone. */
.matrix-fond { background: rgba(0, 0, 0, .65); padding: 16px; }
.matrix-contenu { position: relative; overflow: hidden; width: min(560px, 100%); max-width: none; padding: 20px 16px 16px; background: #000; border: 1px solid rgba(31, 211, 92, .55); border-radius: 16px; box-shadow: 0 0 36px rgba(31, 211, 92, .35); animation: apparition .35s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes apparition { from { opacity: 0; transform: scale(.8) translateY(16px); } to { opacity: 1; transform: none; } }
#matrixPluie { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .75; }
.matrix-contenu > *:not(canvas) { position: relative; z-index: 1; }
.matrix-fermer { position: absolute !important; z-index: 2 !important; }
.matrix-contenu h2 { font-size: 22px; }
.matrix-choix { gap: 16px; margin: 10px 0 4px; }
.matrix-main { width: 45%; min-width: 150px; height: 210px; }
.main-emoji { font-size: 140px; }
.gelule, .matrix-main.droite .gelule { width: 132px; height: 38px; line-height: 38px; font-size: 12px; top: 112px; }
.matrix-main.gauche .gelule { left: 46%; } .matrix-main.droite .gelule { left: 54%; }
/* Textes lisibles : blanc sur un fond sombre. */
.matrix-contenu p, .matrix-main small { color: #fff !important; background: rgba(0, 0, 0, .7); border-radius: 8px; padding: 3px 8px; display: inline-block; }
.matrix-main small { font-size: 12px; margin-top: 8px; }
@media (max-width: 480px) { .matrix-main { height: 170px; min-width: 130px; } .main-emoji { font-size: 104px; } .gelule, .matrix-main.droite .gelule { width: 112px; height: 32px; line-height: 32px; font-size: 11px; top: 84px; } }
/* (29/09 v3) Les deux mains à la même hauteur ; la phrase toujours sous la main. */
.matrix-choix { align-items: flex-start; }
.matrix-main { justify-content: flex-start; height: auto; }
.main-emoji { display: block; height: 150px; }
.matrix-main small { margin-top: 10px; }
@media (max-width: 480px) { .main-emoji { height: 112px; } }

/* (29/09 v3) Mains du fan art (images PNG transparentes) : la gélule posée au creux de chaque paume, en % de l'image. */
.matrix-main { height: auto; justify-content: flex-start; }
.paume { position: relative; width: 100%; max-width: 240px; }
.paume img { display: block; width: 100%; height: auto; user-select: none; pointer-events: none; filter: drop-shadow(0 10px 16px rgba(0,0,0,.9)); }
.paume .gelule, .matrix-main.droite .paume .gelule { top: 40%; width: 58%; height: auto; aspect-ratio: 3.4; line-height: normal; display: flex; align-items: center; justify-content: center; font-size: clamp(10px, 2.6vw, 13px); }
.matrix-main.gauche .paume .gelule { left: 63%; transform: translate(-50%, -50%) rotate(-8deg); }
.matrix-main.droite .paume .gelule { left: 37%; transform: translate(-50%, -50%) rotate(8deg); }
@media (max-width: 480px) { .paume .gelule, .matrix-main.droite .paume .gelule { width: 70%; font-size: 10px; white-space: nowrap; } }

/* (29/09) E-mail comme Gmail : mail HTML dans un cadre blanc isolé, liens des mails texte, boutons de l'expéditeur, contacts. */
.email-html { width: 100%; min-height: 300px; border: 0; border-radius: 10px; background: #fff; margin: 12px 0; display: block; }
.email-texte.riche { white-space: normal; }
.email-texte.riche a { color: var(--accent); }
.de-outils { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.de-outils .mini { padding: 1px 6px; font-size: 12px; }
.contact-ajout { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.contact-ajout input { flex: 1 1 180px; }
.contact-ligne { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bord); }
.contact-ligne > div:last-child { display: flex; gap: 4px; flex-shrink: 0; }

/* (29/09) E-mail comme Gmail, suite : la liste OU le message en grand (plus d'écrasement), dossiers plus étroits. */
.email-cadre { grid-template-columns: 150px minmax(0, 1fr); }
.email-cadre:not(.lecture) .email-lecture-cadre, .email-cadre.lecture .email-liste-cadre { display: none; }
.email-lecture-cadre #emailRetour { margin-bottom: 8px; }
@media (max-width: 900px) { .email-cadre { grid-template-columns: 1fr; } }

/* (29/09) Menu à la façon de Claude : l'élément actif en gris clair (l'orange reste pour les boutons et les surbrillances). */
nav a.actif { background: #3d3c38; color: var(--texte); }
nav a.actif .discret { color: var(--doux); }

/* (29/09) La marque : le logo + « Claudal » dans une police élégante (accueil, espace des comptes). Texte presque à la hauteur du logo. */
.marque { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: -4px; }
.marque img { width: 54px; height: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.titre-accueil, .marque-nom { margin: 0; font-size: 56px; line-height: normal; font-weight: 400; letter-spacing: .5px; font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", serif; }
.marque.petite { gap: 6px; margin: 0 4px 0 2px; justify-content: flex-start; }
.marque.petite img { width: 33px; filter: none; }
.marque.petite .marque-nom { font-size: 34px; }


/* (29/09) Interface administrateur : le logo sert de loupiote (orange et lumineux = démarré, grisé = ne répond pas). */
.logo { gap: 7px; }
.logo .marque-nom { font-size: 30px; font-weight: 400; }
.logo-etat { width: 30px; height: auto; filter: grayscale(1) brightness(.55); transition: filter .4s; }
.logo-etat.ok { filter: drop-shadow(0 0 5px rgba(222,115,86,.85)) drop-shadow(0 0 12px rgba(222,115,86,.45)); }

/* (29/09) Membres d'un groupe (pastilles) et sélecteur d'émoticônes. */
.membres-groupe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.membre { display: inline-flex; align-items: center; gap: 4px; background: var(--carte); border: 1px solid var(--bord); border-radius: 999px; padding: 2px 4px 2px 10px; }
.membre .mini { padding: 0 6px; border-radius: 999px; }
.membres-groupe select { width: auto; }
.emoji-bouton { flex: none; align-self: flex-start; }
.emoji-grille { position: fixed; z-index: 5000; width: 300px; max-height: 260px; overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 6px; background: var(--panneau); border: 1px solid var(--bord); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.emoji-grille[hidden] { display: none; }
.emoji-grille button { background: none; border: none; font-size: 20px; padding: 4px 0; border-radius: 6px; cursor: pointer; }
.emoji-grille button:hover { background: var(--carte); }

/* (29/09) Bouton d'arrêt d'urgence (comme un vrai : rouge, anneau jaune) et bandeau des comptes en pause. */
.barre-rapide .arret-urgence { width: 30px; height: 30px; padding: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff5a4d, #b3130b 70%) !important; border: 3px solid #f2c400 !important; box-shadow: 0 0 0 1px #000, 0 2px 4px rgba(0,0,0,.6); color: #fff; font: 800 7px/1 system-ui, sans-serif; letter-spacing: .2px; display: inline-flex; align-items: center; justify-content: center; }
.barre-rapide .arret-urgence:hover { filter: brightness(1.15); }
.barre-rapide .arret-urgence.actif-urgence { animation: urgence 1s ease-in-out infinite; }
@keyframes urgence { 50% { box-shadow: 0 0 0 1px #000, 0 0 14px 4px rgba(255,60,40,.8); } }
.bandeau-urgence { background: #5a1a14; color: #ffd9d3; border: 1px solid #b3130b; border-radius: 10px; padding: 10px 14px; margin: 8px 0; font-weight: 600; text-align: center; }
.bandeau-urgence[hidden] { display: none; }

/* (29/09) Application installée sur téléphone (plein écran) : rien sous l'encoche ni sous la barre du bas (iPhone, Android). */
@supports (padding: env(safe-area-inset-top)) {
  body { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); }
}

/* (29/09) Comptes liés : une ligne par service (Discord grisé tant qu'il n'est pas prêt). */
.lie-ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--bord); }
.lie-ligne.grise { opacity: .5; }
.lie-ligne button { flex: none; }

/* (29/09) Promotions : liste (admin) et bandeau chez les comptes concernés. */
.promo-ligne { padding: 8px 10px; border: 1px solid var(--bord); border-radius: 8px; margin: 6px 0; cursor: pointer; }
.promo-ligne.actif { border-color: var(--accent); background: var(--carte); }
.bandeau-promo { background: rgba(222,115,86,.12); color: var(--texte); border: 1px solid var(--accent); border-radius: 10px; padding: 8px 14px; margin: 8px 0; text-align: center; }
.bandeau-promo[hidden] { display: none; }

/* (29/09) Choix du pseudo obligatoire (comptes créés avec Google). */
.choix-pseudo { position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,.75); display: flex; align-items: center; justify-content: center; padding: 16px; }
.choix-pseudo .carte { width: min(420px, 100%); }

/* (29/09) Espace des comptes : le compteur de Clodens en haut à droite est retiré (doublon avec l'onglet Utilisation). */
#clodensBarre { display: none !important; }
#deconnexion svg, #boutonDeconnexion svg { display: block; }

/* (29/09) Espace des comptes : « Nouvelle conversation » et « Nouveau dossier » empilés, plus fins. */
.boutons-convs { display: flex; flex-direction: column; gap: 6px; }
.boutons-convs button { width: 100%; padding: 7px 10px; font-size: 14px; }

/* (29/09) Arrêt d'urgence déplacé dans Accueil › Contrôle (plus dans la barre rapide : trop facile à toucher par erreur). */
#boutonUrgence.actif-urgence { background: #5a1a14 !important; border-color: #b3130b !important; color: #ffd9d3 !important; animation: urgence 1s ease-in-out infinite; }

/* (29/09) Comptes liés › Discord : pseudo puis code reçu en message privé. */
.lie-bloc { border-top: 1px solid var(--bord); }
.lie-bloc .lie-ligne { border-top: 0; }
.lie-form { display: flex; gap: 8px; margin: 0 0 8px; }
.lie-form input { flex: 1; }

/* (30/09) Téléphone : zone d'écriture et ligne d'état (« Terminé en… ») vraiment fixées en bas ; la page ne « rebondit » plus ;
   la liste des conversations ne prend pas toute la hauteur (elle défile dans son cadre). */
@media (max-width:720px) {
  html:has(body.mode-chat), body.mode-chat { overscroll-behavior-y: none; } /* (30/09) seulement l'onglet Chatbot : ailleurs, tirer vers le bas actualise */ /* seulement dans la discussion : ailleurs, tirer vers le bas actualise */
  .compte-saisie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 4px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bord); background: var(--fond); }
  #pDiscuter #chat { padding-bottom: 190px; }
  #convs { max-height: 38vh; overflow-y: auto; }
}
.local-section .conv-menu { float: right; padding: 0 6px; }

/* (30/09) Utilisation : le forfait du compte, bien visible. */
.forfait { margin: 4px 0 10px; font-size: 15px; }

/* (30/09, PastiiJay) Bulles inversées dans tous les chatbots : Claudal parle en orange (SA couleur), toi en gris. */
.bulle.moi { background: var(--carte); color: var(--texte); border: 1px solid var(--bord); }
.bulle.lui { background: var(--accent); color: #1a1918; border: none; }
.bulle.moi a { color: var(--accent); text-decoration: none; }
.bulle.lui a { color: #1a1918; text-decoration: underline; }
.bulle.lui .bulle-lire button { background: rgba(0,0,0,.18); border-color: transparent; color: #1a1918; }
.bulle.lui.attente { opacity: .85; }

/* (30/09) Bouton de discussion vocale : le logo de Claudal (c'est à lui qu'on parle), grisé tant qu'il est verrouillé. */
.logo-vocal { width: 24px; height: auto; display: block; margin: auto; pointer-events: none; }
.verrou .logo-vocal { filter: grayscale(1); opacity: .6; }
button.principal .logo-vocal { filter: drop-shadow(0 0 4px rgba(0,0,0,.5)); }

/* (30/09) Boutons de la zone d'écriture (logo vocal, micro, envoyer) : contenu parfaitement centré. */
.chat-boutons button { display: flex; align-items: center; justify-content: center; padding: 0; text-align: center; line-height: 1; min-width: 0; }
.chat-boutons button > * { margin: 0; }

/* (30/09, PastiiJay) En-tête des comptes sur deux lignes, fixé en haut de l'écran : logo + pseudo + déconnexion, puis les onglets
   (qui défilent du doigt s'ils dépassent). Sur téléphone, « Nouvelle conversation » et « Nouveau dossier » côte à côte. */
.entete-compte { position: sticky; top: 0; z-index: 30; background: var(--fond); padding: 6px 0 4px; margin: 0 0 8px; border-bottom: 1px solid var(--bord); }
.entete-ligne { display: flex; align-items: center; gap: 8px; }
.entete-droite { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.onglets-compte { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 6px 0 0 !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.onglets-compte::-webkit-scrollbar { display: none; }
.onglets-compte button { flex: none; white-space: nowrap; }

/* (30/09) Sous le pseudo, son groupe ; tiroir des conversations sur téléphone, ancré sous les onglets. */
.qui-bloc { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.qui-bloc #qui { font-size: 14px; color: var(--texte); }
.qui-bloc #role { font-size: 11px; color: var(--doux); }
.tiroir-convs { display: none; }
@media (max-width:720px) {
  .compte-convs { position: sticky; top: var(--haut-entete, 96px); z-index: 25; padding: 6px 10px !important; }
  .tiroir-convs { display: flex; width: 100%; justify-content: space-between; align-items: center; background: none !important; border: none !important; padding: 4px 2px; font-weight: 600; text-align: left; }
  .tiroir-convs #tiroirTitre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tiroir-convs .fleche { flex: none; transition: transform .2s; }
  .compte-convs.ferme #convsContenu { display: none; }
  .compte-convs.ferme .fleche { transform: rotate(-90deg); }
  .boutons-convs button { padding: 5px 8px; font-size: 13px; }
}

/* (30/09) Liste des conversations : ascenseur orange (bien visible) ; la conversation ouverte a un liseré orange, dans le tiroir
   fermé comme dans la liste dépliée. */
#convs { scrollbar-color: var(--accent) transparent; scrollbar-width: thin; }
#convs::-webkit-scrollbar { width: 6px; }
#convs::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 6px; }
#convs::-webkit-scrollbar-track { background: transparent; }
#convs .local-conv.actif { border: 1px solid var(--accent) !important; border-radius: 8px; }
@media (max-width:720px) {
  .tiroir-convs { border: 1px solid var(--accent) !important; border-radius: 8px; padding: 6px 10px !important; margin-bottom: 4px; }
}

/* (30/09) Rubriques du chatbot : petite flèche ▸ (repliée) / ▾ (dépliée) ; ascenseur orange aussi pour le fil de la conversation (PC). */
.local-section .chevron { display: inline-block; width: 14px; color: var(--accent); font-size: 12px; }
.local-section[data-zone-titre] { cursor: pointer; user-select: none; }
#chat { scrollbar-color: var(--accent) transparent; scrollbar-width: thin; }
#chat::-webkit-scrollbar { width: 6px; }
#chat::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 6px; }

/* (30/09) Téléphone, administration : les catégories du menu (Tableau de bord, Skills, Analyse…) réapparaissent dans la
   bande qui défile, en petits intitulés orange devant leurs sous-menus. */
@media (max-width:720px) {
  nav .groupe { display: inline-flex !important; margin: 0 2px 0 12px; padding: 0; border: 0; font-size: 11px; white-space: nowrap; color: var(--accent); flex: none; }
  nav .groupe:first-child { margin-left: 0; }
}

/* (30/09 v2) Téléphone : tiroir LATÉRAL des conversations (remplace le tiroir replié sous les onglets). */
.tiroir-tete, .tiroir-fond { display: none; }
@media (max-width:720px) {
  .tiroir-convs { display: flex; gap: 10px; align-items: center; position: sticky; top: var(--haut-entete, 96px); z-index: 25; width: 100%; background: var(--fond) !important; border: 1px solid var(--accent) !important; border-radius: 8px; padding: 8px 12px !important; margin: 0 0 6px; font-weight: 600; text-align: left; }
  .tiroir-convs #tiroirTitre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tiroir-convs .fleche { transform: none !important; color: var(--accent); }
  .compte-convs, .compte-convs.ferme { position: fixed !important; top: 0; bottom: 0; left: 0; width: min(85vw, 340px) !important; z-index: 60; margin: 0 !important; border-radius: 0 14px 14px 0 !important; overflow-y: auto !important; transform: translateX(-105%); transition: transform .25s ease; padding: 12px !important; }
  .compte-convs.ouvert { transform: none; box-shadow: 8px 0 30px rgba(0,0,0,.6); }
  .compte-convs.ferme #convsContenu, .compte-convs #convsContenu { display: block !important; }
  .compte-convs #convs { max-height: none !important; }
  .tiroir-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  .tiroir-fond.ouvert { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.5); }
}
@media (max-width:720px) { .compte-convs, .compte-convs.ferme { height: 100vh !important; height: 100dvh !important; max-height: none !important; background: var(--panneau) !important; } }

/* (30/09) Ombre en haut de la conversation : les messages les plus anciens encore visibles s'assombrissent vers le haut.
   PC : le fil défile dans son cadre (dégradé sur le cadre). Téléphone : c'est la page qui défile (dégradé sous la barre ☰). */
.compte-chat #chat { -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.25) 0, #000 70px); mask-image: linear-gradient(to bottom, rgba(0,0,0,.25) 0, #000 70px); }
@media (max-width:720px) {
  .compte-chat #chat { -webkit-mask-image: none; mask-image: none; }
  .tiroir-convs::after { content: ''; position: absolute; left: -12px; right: -12px; top: calc(100% + 1px); height: 60px; background: linear-gradient(to bottom, var(--fond), transparent); pointer-events: none; }
}

/* (30/09) Téléphone : le haut (en-tête + barre ☰) vraiment FIXÉ comme la zone d'écriture (en « sticky », il bougeait un peu
   quand la barre d'adresse du navigateur apparaissait ou disparaissait) ; la page garde une marge de la même hauteur. */
@media (max-width:720px) {
  .entete-compte { position: fixed !important; top: 0; left: 0; right: 0; margin: 0 !important; padding: calc(6px + env(safe-area-inset-top)) 12px 4px !important; }
  .tiroir-convs { position: fixed !important; top: var(--haut-entete, 96px); left: 12px; right: 12px; width: auto !important; margin: 4px 0 0 !important; }
  body:has(.entete-compte) { padding-top: calc(var(--haut-entete, 96px) + 8px) !important; }
  body:has(.entete-compte) #pDiscuter { padding-top: 52px; }
}
@media (max-width:720px) { .tiroir-convs { box-shadow: 0 -8px 0 4px var(--fond); } }

/* (30/09) Bouton ▶ dans les bulles de Claudal : couleurs inversées (fond foncé, triangle orange). */
.bulle.lui .bulle-lire button { background: #1a1918 !important; color: var(--accent) !important; border-color: #1a1918 !important; }
.bulle.lui .bulle-lire button:hover { filter: brightness(1.3); }

/* (30/09) Utilisation : Clodens restants (∞ en promotion illimitée). */
#clodensDetail .reste { color: var(--accent); font-size: 15px; }
#clodensDetail small { display: block; }

/* (30/09) Petit cadenas sur les boutons verrouillés (temps réel, lecture ▶) : on voit tout de suite que l'option est fermée. */
#vocal.verrou, .bulle-lire button.verrou { position: relative; }
#vocal.verrou::after, .bulle-lire button.verrou::after { content: '🔒'; position: absolute; right: -4px; bottom: -4px; font-size: 11px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); pointer-events: none; }
.bulle-lire button.verrou::after { font-size: 9px; right: -3px; bottom: -3px; }

/* (30/09) Administration sur téléphone : le menu en TIROIR latéral (☰), catégories et sous-menus en colonne, comme sur PC. */
#fondMenu { display: none; }
@media (max-width:720px) {
  aside.menu, body.menu-replie:not(.menu-ouvert) aside.menu { display: flex !important; position: fixed !important; top: 0; bottom: 0; left: 0; width: min(80vw, 300px) !important; height: 100vh !important; height: 100dvh !important; flex-direction: column !important; align-items: stretch !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 16px 12px calc(16px + env(safe-area-inset-bottom)) !important; gap: 0 !important; z-index: 70; transform: translateX(-110%); visibility: hidden; border-right: 1px solid var(--bord); }
  body.tiroir-menu-ouvert aside.menu { transform: none !important; visibility: visible !important; box-shadow: 8px 0 30px rgba(0,0,0,.6); }
  aside.menu nav { display: block !important; }
  aside.menu nav a { display: block !important; white-space: normal !important; padding: 8px 12px !important; }
  aside.menu nav a.sous { padding-left: 20px !important; }
  aside.menu nav .groupe { display: flex !important; margin: 16px 6px 4px !important; padding-top: 8px !important; border-top: 1px solid var(--bord) !important; font-size: 12px !important; color: var(--doux) !important; }
  aside.menu .logo { margin: 0 8px 14px !important; }
  aside.menu .bas { display: block !important; }
  body.tiroir-menu-ouvert #fondMenu { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(0,0,0,.5); }
}

/* (30/09) Fenêtre « Parler à Claudal à voix haute » (compte sans le droit vocal) : pub courte, pub longue, devenir donateur. */
.choix-vocal button[data-choix] { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin: 6px 0; padding: 10px 12px; text-align: left; }
.choix-vocal button[data-choix] small { font-weight: 400; opacity: .8; font-size: 12px; }
/* (30/09) Ton espace : ta priorité sous ton pseudo, en petit menu discret. */
#maPriorite { font-size: 11px; padding: 1px 4px; min-height: 0; height: auto; width: auto; max-width: 150px; background: transparent; color: var(--doux); border: 1px solid var(--bord); border-radius: 6px; }
/* (30/09) Réserve de vocal (Basique) : pastille sur le bouton vocal (3M, 8M…), jauge dans la fenêtre des pubs. */
#vocal[data-credit] { position: relative; }
#vocal[data-credit]::after { content: attr(data-credit); position: absolute; right: -6px; bottom: -6px; font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 4px; border-radius: 8px; background: var(--accent, #DE7356); color: #fff; pointer-events: none; }
.jauge-vocal { height: 8px; border-radius: 4px; background: var(--bord); overflow: hidden; margin: 6px 0 10px; }
.jauge-vocal span { display: block; height: 100%; background: var(--accent, #DE7356); transition: width .4s ease; }
.choix-vocal button small { display: block; font-size: 11px; opacity: .8; }
/* (30/09) Onglet « À venir » : les futurs métiers, noms en gras orange. */
.a-venir .metiers { padding-left: 18px; margin: 10px 0; }
.a-venir .metiers li { margin: 6px 0; line-height: 1.45; }
.a-venir .metiers b { color: var(--accent); }
/* (30/09) Utilisation : « ▶ Recharger » sous chaque pourcentage (le pourcentage aussi est cliquable). */
#clodensDetail [data-recharger][role=button] { cursor: pointer; }
#clodensDetail button[data-recharger] { margin-top: 6px; }
/* (30/09) Jauge-compteur des recharges (rouge sang → orange du logo), ligne du tiers, onglet Réinitialiser. */
.jauge-compteur { display: block; width: 100%; height: auto; margin: 6px 0 2px; }
.tiers-ligne { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 8px; }
.tiers-ligne .tiers-pct { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.reinit-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
/* (30/09) Easter egg : le lapin blanc, presque invisible ; bien visible au survol ou au toucher (téléphone : le toucher suffit). */
.lapin-blanc { background: none !important; border: none !important; padding: 0 2px !important; min-height: 0; font-size: 13px; line-height: 1; opacity: .12; filter: grayscale(1) brightness(2); cursor: pointer; transition: opacity .4s; vertical-align: baseline; }
.lapin-blanc:hover, .lapin-blanc:focus-visible, .lapin-blanc:active { opacity: 1; }
.matrix-cadeau { color: #d8ffd8; }
.matrix-lien { color: #1fd35c !important; text-decoration: underline; }
.lapin-carte { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px dashed var(--accent); border-radius: 10px; }
/* (30/09) Groupes et droits : repère des multiplicateurs annoncés sur Ko-fi. */
.repere-kofi { margin: 8px 0; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--panneau); border-radius: 6px; font-size: 13px; }
.repere-kofi.alerte { border-left-color: var(--ko); }
/* (30/09) Message du système dans le chat (ex. un testeur cède sa place en vocal). */
.bulle.systeme { align-self: center; max-width: 92%; background: transparent !important; border: 1px dashed var(--bord); color: var(--doux); font-size: 13px; text-align: center; }
/* (30/09) Progression dans le tiers en cours (semaine), sans chiffre. */
.avance-tiers { height: 5px; border-radius: 3px; background: var(--bord); overflow: hidden; margin: 2px 0 8px; }
.avance-tiers span { display: block; height: 100%; background: #b53a28; transition: width .5s ease; }
/* (30/09) Fenêtre donateur : le mois seul, en bouton secondaire sous l'abonnement. */
.popup-soutenir.secondaire { background: transparent; color: var(--texte); border: 1px solid var(--bord); font-weight: 500; }
/* (30/09) Page d'accueil publique : le contenu sous la connexion (ce qu'il sait faire, comment ça marche). */
.accueil-infos { width: min(804px, 94vw); margin: 0 auto 6px; }
.accueil-infos h2 { font-size: 20px; margin: 22px 0 10px; text-align: center; }
.accueil-infos p { line-height: 1.6; color: var(--texte); }
.accueil-infos a { color: var(--accent); }
.accueil-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .accueil-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .accueil-grille { grid-template-columns: 1fr; } }
/* (30/09, PastiiJay) Accueil en L sur PC : 4 cartes à droite, 3 en bas (celle du coin compte pour les deux), titre et connexion dans le creux */
.accueil-l { display: grid; grid-template-columns: repeat(3, 260px); justify-content: center; gap: 12px; width: min(804px, 94vw); margin: 2vh auto 0; }
.accueil-creux { grid-column: 1 / 3; grid-row: 1 / 3; display: flex; }
.accueil-l { grid-auto-rows: 1fr; } /* toutes les cases de même hauteur ; la connexion en fait 2 */
.accueil-gauche { margin: 2vh auto 0; text-align: center; }
.accueil-gauche .presentation { width: min(804px, 92vw); margin-bottom: 18px; } /* (30/09) slogan plus large, moins haut sur PC */
.accueil-l .accueil-atout { display: flex; flex-direction: column; justify-content: center; }
#carte { width: 100%; box-sizing: border-box; margin: 0; }
@media (max-width: 860px) { .accueil-l { grid-template-columns: 1fr 1fr; } .accueil-creux { grid-column: 1 / -1; grid-row: auto; } .accueil-l { grid-auto-rows: auto; } }
@media (max-width: 600px) { .accueil-l { grid-template-columns: 1fr; } }
/* (30/09) Téléphone et tablette : études, jeu, discuter, recherche, voix (sur PC, l ordre du HTML place les cartes courtes à droite) */
@media (max-width: 860px) { .accueil-l > :nth-child(4) { order: 1; } .accueil-l > :nth-child(6) { order: 2; } .accueil-l > :nth-child(5) { order: 3; } .accueil-l > :nth-child(2) { order: 4; } .accueil-l > :nth-child(3) { order: 5; } .accueil-l > :nth-child(7) { order: 6; } .accueil-l > .accueil-bandeau { order: 7; grid-column: 1 / -1; } }
/* (30/09) Création de compte : deux champs par ligne */
.paire { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
@media (max-width: 600px) { .paire { grid-template-columns: 1fr; } }
.accueil-bandeau { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 16px 20px; text-align: center; }
.accueil-bandeau a { color: var(--accent); }
.accueil-bandeau b { display: block; margin-bottom: 6px; font-size: 17px; }
.accueil-bandeau p { margin: 6px auto 0; max-width: 780px; color: var(--doux); font-size: 14.5px; }
.accueil-atout { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 14px 16px; }
.accueil-atout b { display: block; margin-bottom: 6px; }
.accueil-atout p { margin: 0; color: var(--doux); font-size: 14px; }
.accueil-etapes { margin: 0 auto; padding-left: 22px; max-width: 560px; line-height: 1.8; }
/* (30/09, PastiiJay) PC : tout l'accueil tient sans ascenseur (écran 1080p, Chrome avec barre de favoris, zoom 100 %).
   Connexion à gauche (2×2 cases), 4 vignettes en 2×2 à droite, « Gratuit » dessous sur toute la largeur.
   À droite : 6 vignettes en 2×3 ; « Gratuit » sous la connexion. */
@media (min-width: 861px) {
  .accueil-l { grid-template-columns: repeat(4, 280px); width: min(1156px, 96vw); grid-auto-rows: 1fr; }
  .accueil-infos { width: min(1156px, 96vw); }
  .accueil-l > :nth-child(4) { order: 1; } .accueil-l > :nth-child(6) { order: 2; } .accueil-l > :nth-child(5) { order: 3; } .accueil-l > :nth-child(3) { order: 4; }
  .accueil-l > :nth-child(2) { order: 5; } .accueil-l > :nth-child(7) { order: 6; }
  .accueil-l > .accueil-bandeau { grid-column: 1 / 3; grid-row: 3; }
  .accueil-l .accueil-atout, .accueil-bandeau { padding: 12px 16px; }
  .accueil-l .accueil-atout p, .accueil-bandeau p { font-size: 13.5px; line-height: 1.5; }
  .accueil-bandeau p { margin-top: 4px; }
  .accueil-l #carte { padding: 14px 18px; display: flex; flex-direction: column; justify-content: center; }
  .accueil-l #carte label.champ { margin: 8px 0 3px; }
  .accueil-l #carte .onglets { margin-bottom: 8px; }
}

/* (30/09, PastiiJay) Utilisation : chaque vignette a une entête orange (5 heures, 7 jours, Vocal, Tickets), le chiffre en gros dessous */
.clodens-grille > .tuile-u { padding: 0; overflow: hidden; border-radius: 10px; }
.tuile-tete { background: var(--accent); color: #1a1918; font-weight: 700; font-size: 15px; text-align: center; padding: 7px 8px; }
.tuile-corps { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 12px 10px; flex: 1; }
#clodensDetail .tuile-u .reste { font-size: 36px; font-weight: 700; color: var(--accent); line-height: 1.1; }
.tuile-corps .coupon-form { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 6px; } /* code au-dessus, Valider dessous */
.tuile-corps .coupon-form button { align-self: center; }
/* (30/09, PastiiJay) Anneau d'utilisation (se vide avec le temps) ; appui = bulle avec le chiffre */
.anneau { position: relative; width: 84px; height: 84px; border-radius: 50%; border: 0; padding: 0; margin: 4px 0 6px; cursor: pointer;
  background: radial-gradient(closest-side, var(--panneau) 80%, transparent 81%), conic-gradient(var(--accent) calc(var(--p) * 1%), rgba(255,255,255,.14) 0); }
.anneau.faible { background: radial-gradient(closest-side, var(--panneau) 80%, transparent 81%), conic-gradient(#b3261e calc(var(--p) * 1%), rgba(255,255,255,.14) 0); }
.bulle-info { position: absolute; left: 50%; top: calc(100% + 6px); transform: translateX(-50%); z-index: 5; width: max-content; max-width: 160px; text-align: center; white-space: pre-line; background: var(--texte); color: var(--fond); font-size: 13px; font-weight: 600; padding: 5px 9px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.bulle-info::before { content: ''; position: absolute; left: 50%; top: -5px; transform: translateX(-50%); border: 5px solid transparent; border-top: 0; border-bottom-color: var(--texte); }
/* (30/09, PastiiJay) Espace compte : icônes d'onglets blanches, au trait (plus d'émoticônes colorées) */
.onglets-compte .ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Vignettes d'utilisation : toutes sur une ligne sur PC, plus hautes, l'anneau respire ; boutons plus gros */
@media (min-width: 721px) { #clodensDetail { grid-auto-flow: column; grid-auto-columns: 1fr; grid-template-columns: none; } }
.tuile-corps { padding: 20px 12px 18px; gap: 12px; justify-content: space-between; }
.anneau { width: 96px; height: 96px; margin: 6px 0; }
.tuile-corps button.mini { font-size: 15px; padding: 8px 18px; }
/* Mon compte : la carte prend la largeur, les champs restent de taille raisonnable */
.compte-moi input:not([type=checkbox]), .compte-moi > div[style*="display:flex"] { max-width: 440px; }
.changer-mdp { margin: 14px 0 4px; }
.changer-mdp summary { cursor: pointer; color: var(--doux); font-size: 14px; text-decoration: underline; width: max-content; }
/* (30/09, PastiiJay) PC : vignettes d'utilisation bien plus hautes (presque 9/16), grand anneau fin */
@media (min-width: 721px) {
  #clodensDetail .tuile-u { aspect-ratio: 9 / 14; }
  #clodensDetail .anneau { width: 150px; height: 150px; }
  #clodensDetail .tuile-corps { justify-content: space-evenly; }
}
/* (30/09, PastiiJay) Anneau au milieu de l'espace libre ; boutons Recharger et Valider tous alignés en bas */
#clodensDetail .tuile-corps { justify-content: flex-start; }
#clodensDetail .tuile-corps .anneau { margin: auto 0; }
#clodensDetail .tuile-corps .coupon-form { margin-top: auto; }
.explications-jauges { margin: 4px 0 8px; padding-left: 18px; color: var(--doux); font-size: 14px; line-height: 1.55; }
.explications-jauges li { margin: 4px 0; }
.explications-jauges b { color: var(--texte); }
#clodensDetail .tuile-coupon > :first-child { margin-top: auto; } /* (30/09) le texte à mi-chemin entre l'entête et le code */
/* (30/09, PastiiJay) Entêtes des vignettes et texte du coupon un peu plus grands */
.tuile-tete { font-size: 17px; padding: 9px 8px; }
#clodensDetail .tuile-coupon small { font-size: 14px; line-height: 1.45; }
/* (30/09, PastiiJay) PC : le chatbot tient dans la fenêtre ; zone d'écriture ancrée en bas ;
   deux ascenseurs séparés (la conversation, et la liste des conversations et dossiers). L'ombre du haut (masque) reste. */
@media (min-width: 721px) {
  body.mode-chat { height: 100vh; height: 100dvh; min-height: 0 !important; overflow: hidden; }
  body.mode-chat #pDiscuter { min-height: 0; }
  body.mode-chat #pDiscuter > div:last-child { min-height: 0; }
  body.mode-chat #chat { min-height: 0 !important; }
  body.mode-chat .compte-convs { max-height: 100%; overflow-y: auto; }
}
/* (30/09, PastiiJay) Fenêtre Recharger : l'anneau (repères à chaque tiers, tiers en cours surligné) */
.anneau-recharge { display: block; width: 230px; height: 230px; margin: 0 auto; }
.anneau-recharge circle { fill: none; stroke-width: 10; }
.anneau-recharge .ar-fond { stroke: rgba(255,255,255,.12); }
.anneau-recharge .ar-tiers { stroke: rgba(222,115,86,.35); }
.anneau-recharge .ar-plein { stroke: var(--accent); }
.anneau-recharge .ar-reperes line { stroke: var(--texte); stroke-width: 2; }
.anneau-recharge text { fill: var(--doux); font-size: 11px; font-weight: 700; }
.anneau-recharge .ar-pct { fill: var(--texte); font-size: 20px; }
.ico-micro { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ico-micro.plein { fill: currentColor; stroke: none; } /* (30/09) icône du bouton de dictée */
/* (30/09, PastiiJay) Les trois paliers de la recharge : de plus en plus gros (plus tu montes, plus ça rapporte) */
.tiers-ligne .accent { color: var(--accent); }
.paliers { display: flex; justify-content: center; align-items: flex-end; gap: 8px; margin: 4px 0 6px; }
.palier { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1px solid var(--bord); border-radius: 10px; color: var(--doux);
  padding: calc(6px + var(--t) * 3px) calc(10px + var(--t) * 3px); font-size: 12px; }
.palier b { font-size: calc(14px + var(--t) * 3px); color: var(--texte); }
.palier.encours { border-color: var(--accent); color: var(--accent); }
.palier.encours b { color: var(--accent); }
.palier.fait { opacity: .55; }
.choix-vocal h3 { text-align: center; } /* (30/09) titres des fenêtres de recharge centrés */
/* (30/09, PastiiJay) Pilules plus mates, pour aller avec les mains : reflet discret, moins de halo, couleurs plus douces */
.gelule::before { background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)); }
.gelule.rouge { background: radial-gradient(ellipse at 50% 35%, #c9474d, #9a1b27 60%, #5a0d15) !important; box-shadow: 0 0 8px rgba(200, 40, 55, .25), 0 6px 12px rgba(0,0,0,.6); }
.gelule.bleue { background: radial-gradient(ellipse at 50% 35%, #4f82c4, #1d4f9e 60%, #0f2c5c) !important; box-shadow: 0 0 8px rgba(40, 100, 200, .25), 0 6px 12px rgba(0,0,0,.6); }
.gelule:hover { filter: brightness(1.08); }
.avis-utilisation { margin: 2px 0 0; font-size: 12px; color: var(--doux); text-align: center; } .avis-utilisation a { color: var(--accent); } /* (30/09) discret */
/* (30/09, PastiiJay) Nouvelle conversation / Nouveau dossier : même contour gris au repos (même taille apparente) ;
   au survol, Nouvelle conversation prend un contour noir (Nouveau dossier garde son contour orange) */
.boutons-convs button, .boutons-convs button.principal { border: 1px solid var(--bord); box-sizing: border-box; }
.boutons-convs button.principal:hover { border-color: #0d0c0b; }
.bulle-lire .ico-micro { width: 16px; height: 16px; vertical-align: -3px; } .bulle-lire button { padding: 3px 8px; } /* (30/09) haut-parleur */
/* (30/09, PastiiJay) Écouter : juste l'icône, grise, dans le coin — sans cadre ni fond */
.bulle-lire button, .bulle.lui .bulle-lire button { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 2px 0 !important; opacity: 1; color: rgba(26,25,24,.55) !important; }
.bulle-lire button:hover { color: rgba(26,25,24,.85) !important; }
/* (30/09, PastiiJay) Téléphone : les trois vignettes à anneau ont toutes la même hauteur ; le Coupon peut être plus long */
@media (max-width: 720px) {
  #clodensDetail .tuile-u:has(.anneau) { align-self: start; height: 262px; }
  #clodensDetail .tuile-u:has(.tuile-coupon) { align-self: start; height: 262px; } /* même hauteur que les autres */
  #clodensDetail .tuile-coupon { padding: 12px 10px; gap: 8px; }
  #clodensDetail .tuile-coupon small { font-size: 13px; }
}
/* (30/09, PastiiJay) Chiffre au centre des anneaux (et nombre de tickets, même taille, même place) */
.anneau .anneau-val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: var(--texte); pointer-events: none; }
.anneau.sans-cercle { background: none !important; }
@media (min-width: 721px) { #clodensDetail .anneau .anneau-val { font-size: 36px; } }
#utiliserLapin:disabled { opacity: .45; cursor: default; }
#clodensDetail .place-vide { visibility: hidden; }
#clodensDetail .tuile-corps button.mini { min-width: 140px; } /* (30/09) Recharger et Utiliser de la même taille */
/* (30/09, PastiiJay) Barre d'onglets : fondu sur le bord où il reste des onglets (glisser pour les voir) */
.onglets-compte.suite-droite { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.onglets-compte.suite-gauche { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
.onglets-compte.suite-gauche.suite-droite { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.ico-conv { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* (30/09) conversations et dossiers */
/* (30/09, PastiiJay) « Il réfléchit » : trois points qui ondulent, texte qui scintille doucement, sans émoticônes */
.trois-points { display: inline-flex; gap: 4px; align-items: center; margin-right: 8px; vertical-align: middle; }
.trois-points i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: onde-points 1.2s ease-in-out infinite; }
.trois-points i:nth-child(2) { animation-delay: .15s; } .trois-points i:nth-child(3) { animation-delay: .3s; }
@keyframes onde-points { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }
.bulle.attente .trois-points i { width: 7px; height: 7px; }
.phrase-travail { background: linear-gradient(90deg, var(--doux) 0%, var(--texte) 50%, var(--doux) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: scintille 2.4s linear infinite; }
@keyframes scintille { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.duree-travail { margin-left: 8px; opacity: .6; font-variant-numeric: tabular-nums; }
.ico-fait { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .trois-points i, .phrase-travail { animation: none; } .phrase-travail { color: var(--doux); background: none; } }
/* (01/10, PastiiJay) E-mail › Mails automatiques */
.modeles-cadre { display: grid; grid-template-columns: 280px 1fr; gap: 12px; align-items: start; }
@media (max-width: 900px) { .modeles-cadre { grid-template-columns: 1fr; } }
.modeles-liste { display: flex; flex-direction: column; gap: 6px; }
.modele-ligne { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; padding: 8px 10px; }
.modele-ligne small { color: var(--doux); font-size: 12px; }
.modele-ligne.actif { border-color: var(--accent); }
.mc-titre-liste { margin: 8px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.modeles-edition textarea { font-family: inherit; line-height: 1.5; }
/* (01/10, PastiiJay) Site web › Statistiques */
.stats-barre { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.stats-barre .onglets { margin: 0; }
.stats-barre select { width: auto; }
.stat-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.stat-tuile { background: var(--carte); border: 1px solid var(--bord); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.stat-tuile small { color: var(--doux); font-size: 12px; }
.stat-tuile b { font-size: 26px; color: var(--accent); }
.stat-tuile span { color: var(--doux); font-size: 12px; }
.stat-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 10px; }
@media (max-width: 720px) { .stat-grille { grid-template-columns: 1fr; } }
.stat-carte h3 { margin-top: 0; font-size: 15px; }
.stat-courbe { display: flex; align-items: flex-end; gap: 2px; height: 150px; padding-bottom: 18px; }
.stat-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; min-width: 0; }
.stat-col span { display: block; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 1px; opacity: .85; }
.stat-col:hover span { opacity: 1; }
.stat-col small { position: absolute; bottom: -17px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--doux); white-space: nowrap; }
.stat-ligne { display: grid; grid-template-columns: minmax(90px, 1fr) 2fr auto; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.stat-ligne span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-ligne i { display: block; height: 8px; background: var(--accent); border-radius: 4px; opacity: .8; }
.stat-ligne b { font-variant-numeric: tabular-nums; }
/* (01/10, PastiiJay) Accueil : icônes au trait ; « Utilisable gratuitement » à gauche sur téléphone, centré sur PC */
.ico-accueil { width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.accueil-bandeau { text-align: left; }
@media (min-width: 861px) { .accueil-bandeau { text-align: center; } }
.vignette-edit { border-top: 1px solid var(--bord); padding-top: 8px; margin-top: 8px; }
#envoyer.en-attente { opacity: .55; pointer-events: none; animation: battement 1s ease-in-out infinite; } /* (01/10) transcription en cours avant envoi */
/* (01/10, PastiiJay) Onglet « Devenir donateur » */
.donateur-page h3 { margin: 18px 0 8px; } .donateur-page h3:first-child { margin-top: 0; }
.donateur-intro { color: var(--doux); line-height: 1.6; }
.donateur-avantages { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.donateur-avantages > div { border: 1px solid var(--bord); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.donateur-avantages b { color: var(--accent); font-size: 16px; }
.donateur-avantages span { color: var(--doux); font-size: 14px; line-height: 1.5; }
.donateur-offres { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.donateur-offres button { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 12px 14px; font-size: 16px; }
.donateur-offres button:first-child { border-color: var(--accent); }
.donateur-etapes { line-height: 1.8; padding-left: 20px; }