/* QG Rolynk : jetons « Carbon » (voir docs/charte-graphique.md) */
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(/static/figtree-latin.woff2) format('woff2')}
:root{
  --fond:#101310; --fond-2:#0c0f0c; --carte:#171c16; --carte-2:#1c2219;
  --vert:#b0f65b; --vert-clair:#c6ff80; --vert-encre:#19220e;
  --texte:#f1f5ed; --doux:#a4af9c; --discret:#7d887d;
  --trait:#ffffff10; --trait-fort:#ffffff1c; --trait-vert:#b0f65b30;
  --ambre:#ffb020; --rouge:#e0443e; --bleu:#7fb3e6;
  --r-m:12px; --r-s:8px;
}
*,*::before,*::after{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--fond);color:var(--texte);font:400 15px/1.55 'Figtree',system-ui,sans-serif;display:flex;flex-direction:column;overflow:hidden}
button,input,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--vert);outline-offset:2px;border-radius:4px}
.doux{color:var(--doux)}
.espace{flex:1}

/* --- boutons et interrupteurs --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--vert);color:var(--vert-encre);font-weight:700;
  padding:.6rem 1rem;border:0;border-radius:var(--r-s);cursor:pointer;transition:background .15s;white-space:nowrap}
.btn:hover{background:var(--vert-clair)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.creux{background:transparent;color:var(--texte);border:1px solid var(--trait-fort);font-weight:600}
.btn.creux:hover:not(:disabled){background:#ffffff08}
.btn.rouge{background:#e0443e1f;color:#ff8f8a;border:1px solid #e0443e55}
.btn.petit{padding:.35rem .7rem;font-size:.82rem}
.interrupteur{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--doux);cursor:pointer;white-space:nowrap}
.interrupteur input{position:absolute;opacity:0;pointer-events:none}
.glissiere{flex:none;width:32px;height:18px;border-radius:999px;background:#ffffff18;position:relative;transition:background .15s}
.glissiere::after{content:'';position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:var(--doux);transition:transform .15s,background .15s}
.interrupteur input:checked+.glissiere{background:#b0f65b55}
.interrupteur input:checked+.glissiere::after{transform:translateX(14px);background:var(--vert)}
.interrupteur input:focus-visible+.glissiere{outline:2px solid var(--vert);outline-offset:2px}

/* --- barre du haut --- */
.barre{display:flex;align-items:center;gap:.9rem;padding:.55rem 1rem;border-bottom:1px solid var(--trait);background:var(--fond-2)}
.marque{display:flex;align-items:center;gap:.55rem}
.marque strong{font-size:1rem;letter-spacing:-.01em}
.logo-carre{width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,var(--vert),#5e8f2a)}
.lien{font-size:.75rem;color:var(--discret);display:flex;align-items:center;gap:.35rem}
.lien::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--rouge)}
.lien.en{color:var(--doux)}
.lien.en::before{background:var(--vert)}
.outils{display:flex;gap:.2rem}
.outil{background:none;border:0;color:var(--doux);font-size:.85rem;font-weight:600;padding:.4rem .7rem;border-radius:6px;cursor:pointer}
.outil:hover{background:#ffffff0a;color:var(--texte)}
.outil.discret{color:var(--discret)}

/* --- jauges d'usage de l'abonnement --- */
.usage{display:flex;gap:1.1rem;background:none;border:1px solid transparent;border-radius:8px;padding:.25rem .55rem;cursor:pointer;color:inherit}
.usage:hover{border-color:var(--trait-fort)}
.jauge{display:grid;grid-template-columns:auto 90px auto;grid-template-rows:auto auto;column-gap:.5rem;align-items:center;text-align:left}
.j-nom{font-size:.72rem;color:var(--doux);font-weight:600}
.j-barre{height:6px;border-radius:999px;background:#ffffff14;overflow:hidden}
.j-barre i{display:block;height:100%;width:0;border-radius:inherit;background:var(--vert);transition:width .6s ease,background .3s}
.jauge.moyen .j-barre i{background:var(--ambre)}
.jauge.haut .j-barre i{background:var(--rouge)}
.j-val{white-space:nowrap;font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}
.j-reset{grid-column:1 / -1;font-size:.65rem;color:var(--discret);line-height:1.1}
.usage.charge .j-val{opacity:.5}

/* --- client de test : interrupteur dans la barre --- */
.client-test{display:flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--doux);border:1px solid var(--trait-fort);border-radius:999px;padding:.2rem .3rem .2rem .7rem;white-space:nowrap}
.ct-pastille{width:8px;height:8px;border-radius:50%;background:#ffffff30;flex:none}
.client-test.actif{border-color:#ffb02066;color:var(--texte)}
.client-test.actif .ct-pastille{background:var(--ambre);animation:pulse 1.6s infinite}
.client-test.lourd .ct-etat{color:var(--ambre);font-weight:600}
.client-test .btn.petit{padding:.25rem .65rem;font-size:.75rem;border-radius:999px}
.client-test .btn.arreter{background:#e0443e2a;color:#ff8f8a;border:1px solid #e0443e55}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:50;background:var(--carte);border:1px solid var(--trait-fort);
  border-radius:10px;padding:.6rem 1rem;font-size:.85rem;box-shadow:0 10px 30px #000a;max-width:min(520px,calc(100% - 2rem));animation:entre .2s ease-out}

/* --- disposition --- */
.app{flex:1;min-height:0;display:grid;grid-template-columns:270px minmax(0,1fr);transition:grid-template-columns .2s}
body.sans-cote .app{grid-template-columns:0 minmax(0,1fr)}
body.sans-cote .cote{visibility:hidden;padding:0;border:0}
.replier{font-size:1.05rem;padding:.3rem .55rem}
.cote{border-right:1px solid var(--trait);background:var(--fond-2);overflow-y:auto;padding:.9rem .8rem;display:flex;flex-direction:column;gap:1.1rem}
.centre{display:flex;flex-direction:column;min-height:0;position:relative}
.bloc-cote h2{font-size:.7rem;font-weight:700;color:var(--discret);text-transform:uppercase;letter-spacing:1.2px;margin:0 .4rem .45rem;display:flex;gap:.4rem;align-items:center}
.compteur{color:var(--vert);letter-spacing:0;text-transform:none;font-weight:600}
.btn.nouvelle{width:100%}

/* --- liste des missions --- */
.liste-missions,.liste-equipe{list-style:none;padding:0;display:flex;flex-direction:column;gap:2px}
.mission-item{display:grid;grid-template-columns:10px 1fr auto;gap:.55rem;align-items:start;padding:.5rem .55rem;border-radius:var(--r-s);cursor:pointer;border:1px solid transparent}
.mission-item:hover{background:#ffffff07}
.mission-item.actif{background:#b0f65b10;border-color:var(--trait-vert)}
.mission-item .voyant{margin-top:.45rem}
.mission-item .nom{font-size:.86rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.mission-item .sous{font-size:.72rem;color:var(--discret);margin-top:.1rem}
.mission-vide{font-size:.8rem;color:var(--discret);padding:.3rem .55rem}
.voyant{width:8px;height:8px;border-radius:50%;background:#ffffff30;flex:none}
.occupe .voyant,.voyant.vert{background:var(--vert);animation:pulse 1.2s infinite}
.pastille-ambre,.pastille-nl{min-width:18px;height:18px;padding:0 5px;border-radius:999px;font-size:.68rem;font-weight:700;display:grid;place-items:center}
.pastille-ambre{background:var(--ambre);color:#2a1f05}
.pastille-nl{background:#ffffff1c;color:var(--texte)}

/* --- liste de l'équipe (compacte) --- */
.agent-ligne{display:grid;grid-template-columns:34px 1fr auto;gap:.6rem;align-items:center;padding:.35rem .5rem;border-radius:var(--r-s);cursor:pointer}
.agent-ligne:hover{background:#ffffff07}
.agent-ligne .mini-avatar{position:relative;width:34px;height:34px;border-radius:9px;background:#ffffff08;display:grid;place-items:end center;overflow:hidden}
.agent-ligne .mini-avatar svg{width:26px;height:auto;image-rendering:pixelated;display:block}
.agent-ligne .mini-avatar::after{content:'';position:absolute;right:2px;top:2px;width:8px;height:8px;border-radius:50%;background:#ffffff30;box-shadow:0 0 0 2px var(--fond-2)}
.agent-ligne .nom{font-size:.86rem;font-weight:600;line-height:1.2}
.agent-ligne .etat{font-size:.72rem;color:var(--discret);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent-ligne>div:nth-child(2){min-width:0}
.agent-ligne .eco-tag{font-size:.65rem;color:var(--discret);border:1px solid var(--trait);border-radius:4px;padding:0 .3rem}
.agent-ligne[data-statut="repos"] .mini-avatar svg{filter:saturate(.5) brightness(.8)}
.agent-ligne[data-statut="repos"] .yeux{display:none}
.agent-ligne[data-statut="repos"] .yeux-fermes{display:inline}
.agent-ligne[data-statut="travail"] .mini-avatar::after{background:var(--vert);animation:pulse 1.2s infinite}
.agent-ligne[data-statut="travail"] .mini-avatar svg{animation:tape .45s ease-in-out infinite}
.agent-ligne[data-statut="travail"] .etat{color:var(--vert)}
.agent-ligne[data-statut="attente"] .mini-avatar::after{background:var(--ambre)}
.agent-ligne[data-statut="attente"] .etat{color:var(--ambre)}
.agent-ligne[data-statut="fini"] .mini-avatar::after{background:var(--vert)}
.agent-ligne[data-statut="erreur"] .mini-avatar::after{background:var(--rouge)}

/* --- en-tête de mission --- */
.entete-mission{display:flex;align-items:center;gap:.6rem;padding:.5rem 1.25rem;border-bottom:1px solid var(--trait)}
.entete-mission .titres{flex-direction:row!important;align-items:baseline;gap:.7rem}
#voir-scene.actif{border-color:var(--trait-vert);color:var(--vert)}
.entete-mission .titres{min-width:0;flex:1;display:flex;flex-direction:column}
.entete-mission strong{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entete-mission .doux{font-size:.78rem}
.actions-mission{display:flex;gap:.4rem}

/* --- la scène : seulement les agents de cette mission --- */
.scene{position:relative;border-bottom:1px solid var(--trait);background:linear-gradient(180deg,#0e120e,transparent);padding:.7rem 1.25rem}
.scene-agents{display:flex;gap:.7rem;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.scene-vide{font-size:.82rem;color:var(--discret);display:flex;align-items:center;gap:.5rem}
.scene.repos{padding:.5rem 1.25rem}
#faisceaux{position:absolute;inset:0;pointer-events:none;z-index:5}
#faisceaux svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* carte d'agent dans la scène */
.agent{flex:none;width:250px;position:relative;border:1px solid var(--trait);border-radius:var(--r-m);padding:.5rem;
  background:var(--carte);display:grid;grid-template-columns:78px 1fr;gap:.6rem;align-items:center;transition:border-color .3s,box-shadow .3s;cursor:pointer;animation:entre .3s ease-out}
.agent .infos{min-width:0}
.agent h3{font-size:.85rem;font-weight:600;line-height:1.2}
.agent .etat{display:flex;align-items:center;gap:.35rem;margin-top:.2rem;font-size:.72rem;font-weight:600;white-space:nowrap}
.agent .libelle{overflow:hidden;text-overflow:ellipsis}
.agent .etat .point{width:7px;height:7px;border-radius:50%;background:var(--discret);flex:none}
.agent .duree{color:var(--discret);font-weight:400;font-variant-numeric:tabular-nums}
.agent .activite{font-size:.72rem;color:var(--doux);margin-top:.2rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.agent .tache{font-size:.7rem;color:var(--vert);margin-top:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent .tache:empty{display:none}

.poste{position:relative;height:74px;border-radius:var(--r-s);background:linear-gradient(#0a0d0a,#131812);overflow:hidden}
.poste .avatar{position:absolute;left:6px;bottom:9px;width:42px;transform-origin:50% 100%}
.poste .avatar svg{width:100%;height:auto;display:block;image-rendering:pixelated}
.poste .meuble{position:absolute;left:0;right:0;bottom:0;height:11px;background:linear-gradient(#3a2d22,#2a2018);border-top:2px solid #4b3a2c}
.poste .ecran{position:absolute;right:5px;bottom:11px;width:24px;height:20px;border-radius:3px;background:#0a0d0a;border:2px solid #2c332b;transition:box-shadow .3s}
.poste .bulle{position:absolute;left:40px;top:4px;min-width:18px;height:16px;padding:0 4px;border-radius:6px;background:var(--texte);color:var(--vert-encre);
  font-weight:800;font-size:.6rem;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s}
.zzz{display:none}

.avatar .yeux,.avatar .bouche{transform-box:fill-box;transform-origin:center}
.avatar .yeux{animation:cligne 5s infinite}
.avatar .yeux-fermes,.mini-avatar .yeux-fermes{display:none}

.agent[data-statut="travail"]{border-color:var(--trait-vert);box-shadow:0 6px 24px -14px #b0f65b88}
.agent[data-statut="travail"] .etat{color:var(--vert)}
.agent[data-statut="travail"] .etat .point{background:var(--vert);animation:pulse 1.2s infinite}
.agent[data-statut="travail"] .avatar{animation:tape .45s ease-in-out infinite}
.agent[data-statut="travail"] .bouche{animation:parle .6s steps(2) infinite}
.agent[data-statut="travail"] .ecran{box-shadow:0 0 12px #b0f65b44;
  background-image:repeating-linear-gradient(transparent 0 2px,#b0f65b 2px 3px,transparent 3px 5px);background-size:100% 30px;animation:defile 1.2s linear infinite}
.agent[data-statut="travail"] .bulle{opacity:1;transform:none}
.agent[data-statut="travail"] .bulle span{animation:points 1.2s infinite;display:inline-block}
.agent[data-statut="travail"] .bulle span:nth-child(2){animation-delay:.2s}
.agent[data-statut="travail"] .bulle span:nth-child(3){animation-delay:.4s}
.agent[data-statut="attente"]{border-color:#ffb02066;animation:ambre 1.6s ease-in-out infinite}
.agent[data-statut="attente"] .etat{color:var(--ambre)}
.agent[data-statut="attente"] .etat .point{background:var(--ambre)}
.agent[data-statut="attente"] .bulle{opacity:1;transform:none;background:var(--ambre);animation:saute .8s ease-in-out infinite}
.agent[data-statut="attente"] .ecran{box-shadow:0 0 12px #ffb02055;background:#2a1f05}
.agent[data-statut="fini"]{border-color:var(--trait-vert)}
.agent[data-statut="fini"] .etat{color:var(--vert)}
.agent[data-statut="fini"] .etat .point{background:var(--vert)}
.agent[data-statut="fini"] .bulle{opacity:1;transform:none;background:var(--vert)}
.agent[data-statut="fini"] .avatar{animation:hourra .6s ease-out 2}
.agent[data-statut="erreur"]{border-color:#e0443e66}
.agent[data-statut="erreur"] .etat{color:#ff8f8a}
.agent[data-statut="erreur"] .etat .point{background:var(--rouge)}
.agent[data-statut="erreur"] .bulle{opacity:1;transform:none;background:var(--rouge);color:#fff}
.agent.appel{box-shadow:0 0 0 2px var(--vert),0 0 30px -6px #b0f65b99}

/* Scène compacte (par défaut) : une fine bande de pastilles au lieu des grandes cartes */
.scene.compacte{padding:.4rem 1.25rem}
.scene.compacte.repos{padding:.35rem 1.25rem}
.scene.compacte .scene-agents{gap:.45rem}
.scene.compacte .agent{width:auto;max-width:340px;grid-template-columns:30px auto;gap:.5rem;padding:.25rem .7rem .25rem .3rem;border-radius:999px}
.scene.compacte .poste{height:30px;width:30px;border-radius:50%;background:#ffffff0c}
.scene.compacte .poste .avatar{width:24px;left:3px;bottom:0}
.scene.compacte .poste .ecran,.scene.compacte .poste .meuble,.scene.compacte .poste .bulle,.scene.compacte .agent .tache{display:none}
.scene.compacte .infos{display:flex;align-items:center;gap:.5rem;min-width:0}
.scene.compacte .agent h3{font-size:.76rem;white-space:nowrap}
.scene.compacte .agent .etat{margin-top:0;font-size:.68rem}
.scene.compacte .agent .activite{margin:0;font-size:.7rem;-webkit-line-clamp:1;max-width:160px;white-space:nowrap;display:block;overflow:hidden;text-overflow:ellipsis}
.scene.compacte .scene-vide{font-size:.75rem}
.scene.compacte #faisceaux{display:none}

/* --- fil de discussion --- */
.fil{flex:1;min-height:0;overflow-y:auto;padding:1.25rem 1.25rem 1.5rem;display:flex;flex-direction:column;gap:.75rem}
.fil>*{max-width:980px;width:100%;margin-inline:auto;flex-shrink:0}
.vide{margin:auto;text-align:center;color:var(--discret);max-width:44ch}
.vide strong{display:block;color:var(--texte);font-size:1.15rem;margin-bottom:.4rem}
.suggestions{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:1rem}
.suggestion{background:#ffffff06;border:1px solid var(--trait-fort);border-radius:999px;padding:.35rem .75rem;font-size:.8rem;color:var(--doux);cursor:pointer}
.suggestion:hover{border-color:var(--trait-vert);color:var(--texte)}
.msg{padding:.7rem .9rem;border-radius:var(--r-m);border:1px solid var(--trait);background:var(--carte);white-space:pre-wrap;word-break:break-word;animation:entre .25s ease-out}
.msg.moi{width:auto;max-width:min(980px,85%);margin-right:max(0px,calc((100% - 980px) / 2));align-self:flex-end;background:#b0f65b12;border-color:var(--trait-vert)}
.msg.chef{display:grid;grid-template-columns:26px 1fr;gap:.6rem;align-items:start}
.mini svg{width:26px;height:auto;image-rendering:pixelated;display:block}
.msg .auteur{font-size:.72rem;font-weight:700;color:var(--vert);text-transform:uppercase;letter-spacing:1px;margin-bottom:.2rem;white-space:normal}
.msg.erreur{border-color:#e0443e55;color:#ff8f8a}
.msg.systeme{text-align:center;font-size:.8rem;color:var(--ambre);border-color:#ffb02033;background:#ffb02008}
.msg code{font:.85em ui-monospace,SFMono-Regular,Menlo,monospace;background:#ffffff0d;padding:.1rem .3rem;border-radius:4px}
.msg pre{background:var(--fond-2);border:1px solid var(--trait);border-radius:8px;padding:.6rem;overflow-x:auto;margin:.3rem 0;white-space:pre}
.msg pre code{background:none;padding:0}
.msg .image{display:block;margin:.5rem 0;border:1px solid var(--trait);border-radius:10px;overflow:hidden;background:var(--fond-2);max-width:100%}
.msg .image img{display:block;width:100%;height:auto}
.msg .image span{display:block;font-size:.78rem;color:var(--discret);padding:.35rem .6rem;white-space:normal}
.ligne-sys{text-align:center;font-size:.78rem;color:var(--discret)}
.ligne-sys.delegue{color:var(--vert)}

/* cartes d'action dans le fil */
.validation,.apprentissage{border-radius:var(--r-m);padding:.8rem .9rem;animation:entre .25s ease-out}
.validation{border:1px solid #ffb02066;background:#ffb0200d}
.apprentissage{border:1px solid #7fb3e655;background:#7fb3e60a}
.validation header,.apprentissage header{display:grid;grid-template-columns:26px 1fr;gap:.6rem;align-items:center}
.validation .titre{font-weight:600}
.validation small,.apprentissage small{display:block;font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:1px}
.validation small{color:var(--ambre)}
.apprentissage small{color:var(--bleu)}
.validation pre{margin:.6rem 0;max-height:240px;overflow:auto;background:var(--fond-2);border:1px solid var(--trait);border-radius:8px;padding:.6rem;font:.78rem/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;word-break:break-all}
.apprentissage textarea{width:100%;margin:.55rem 0;padding:.55rem .7rem;border-radius:8px;border:1px solid var(--trait-fort);background:var(--fond-2);resize:vertical;font-size:.88rem}
.choix{display:flex;flex-wrap:wrap;gap:.45rem}
.validation.faite,.apprentissage.faite{border-color:var(--trait);background:transparent;opacity:.7;padding:.5rem .8rem}
.validation.faite pre,.validation.faite .choix,.apprentissage.faite .choix{display:none}
.verdict{font-size:.8rem;font-weight:600;margin-top:.3rem}
.verdict:empty{display:none}
.verdict.ok{color:var(--vert)}
.verdict.non{color:#ff8f8a}

/* --- saisie --- */
.saisie{padding:.6rem 1.25rem .75rem;display:flex;gap:.7rem;align-items:flex-end;border-top:1px solid var(--trait)}
.saisie textarea{flex:1;resize:none;max-height:200px;min-height:46px;padding:.7rem .9rem;border-radius:10px;border:1px solid var(--trait-fort);background:var(--carte);outline:none}
.saisie textarea:focus{border-color:var(--trait-vert)}
.saisie .boutons{display:flex;gap:.5rem;align-items:center}
.joindre{padding:.5rem .65rem;font-size:1rem}
.pieces{display:flex;gap:.5rem;flex-wrap:wrap;flex-basis:100%}
.piece{position:relative;width:64px;height:64px;border-radius:10px;overflow:hidden;border:1px solid var(--trait-fort);background:var(--fond-2)}
.piece img{width:100%;height:100%;object-fit:cover;display:block}
.piece.charge img{opacity:.4}
.piece.charge::after{content:'';position:absolute;inset:0;margin:auto;width:20px;height:20px;border-radius:50%;border:2px solid var(--vert);border-right-color:transparent;animation:tourne .8s linear infinite}
.piece.erreur{border-color:var(--rouge)}
.piece button{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;border:0;background:#000b;color:#fff;font-size:.75rem;cursor:pointer;line-height:1}
.saisie{flex-wrap:wrap}
.saisie.depot-actif{outline:2px dashed var(--vert);outline-offset:-6px}
.msg .vignettes{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.4rem}
.msg .vignettes a{display:block;width:120px;height:90px;border-radius:8px;overflow:hidden;border:1px solid var(--trait-fort)}
.msg .vignettes img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes tourne{to{transform:rotate(360deg)}}
.mode{background:var(--carte);border:1px solid var(--trait-fort);border-radius:var(--r-s);padding:.55rem .6rem;font-size:.82rem;color:var(--doux);cursor:pointer}
.mode:focus{outline:none;border-color:var(--trait-vert)}
.ligne-sys.niveau{color:var(--doux);font-size:.74rem}

/* --- tiroirs (changements, journal, écran) --- */
.tiroir{position:fixed;top:0;right:0;bottom:0;width:min(720px,100%);z-index:20;background:var(--carte);border-left:1px solid var(--trait);
  box-shadow:-20px 0 60px -20px #000;display:flex;flex-direction:column;animation:glisse .2s ease-out}
.tiroir.large{width:min(1100px,100%)}
.tiroir header{display:flex;align-items:center;gap:.8rem;padding:.8rem 1.1rem;border-bottom:1px solid var(--trait)}
.journal{list-style:none;padding:.6rem 1.1rem;display:flex;flex-direction:column;gap:.25rem;font-size:.82rem;overflow-y:auto;flex:1}
.journal li{display:flex;gap:.55rem;align-items:baseline;color:var(--doux);padding:.2rem 0;border-bottom:1px solid #ffffff06}
.journal time{color:var(--discret);font-variant-numeric:tabular-nums;flex:none;font-size:.75rem}
.journal .qui{flex:none;font-weight:600;color:var(--texte)}
.journal .texte{word-break:break-word;flex:1}
.journal li.alerte .texte{color:#ff8f8a}
.journal li.delegation .texte{color:var(--vert)}
.journal .mission-tag{flex:none;max-width:16ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.68rem;
  color:var(--discret);background:none;border:1px solid var(--trait);border-radius:4px;padding:0 .35rem;cursor:pointer}
.journal .mission-tag:hover{color:var(--vert);border-color:var(--trait-vert)}
.diffs{flex:1;overflow:auto;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.8rem}
.depot{border:1px solid var(--trait);border-radius:var(--r-m);padding:.8rem;display:flex;flex-direction:column;gap:.6rem}
.depot>header{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;padding:0;border:0}
.valider{display:flex;gap:.5rem}
.valider input{flex:1;min-width:0;padding:.45rem .7rem;border-radius:8px;border:1px solid var(--trait-fort);background:var(--fond-2);outline:none;font-size:.85rem}
.diffs details{border:1px solid var(--trait);border-radius:10px;overflow:hidden}
.diffs summary{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.5rem .8rem;cursor:pointer;font:.8rem ui-monospace,SFMono-Regular,Menlo,monospace;background:#ffffff06}
.diff{margin:0;padding:.6rem .8rem;overflow-x:auto;font:.76rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--fond-2)}
.diff .plus{color:#9be36a;background:#b0f65b0d;display:inline-block;min-width:100%}
.diff .moins{color:#ff8f8a;background:#e0443e12;display:inline-block;min-width:100%}
.diff .bloc{color:var(--bleu)}
.operation{font:.8rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--doux);white-space:pre-wrap}
.zone-ecran{flex:1;display:flex;background:#000}
.zone-ecran p{margin:auto;padding:1rem;text-align:center}
.zone-ecran iframe{flex:1;border:0;width:100%;height:100%}

/* --- fenêtres (fiche agent, réglages) --- */
dialog{margin:auto;color:var(--texte)}
dialog::backdrop{background:#000b}
.carte{border:1px solid var(--trait);border-radius:var(--r-m);background:var(--carte)}
.fiche{width:min(480px,calc(100% - 2rem));padding:1.3rem}
.fiche form{display:flex;flex-direction:column;gap:1rem}
.fiche-tete{display:grid;grid-template-columns:72px 1fr;gap:1rem;align-items:center}
.fiche-avatar{width:72px;height:72px;border-radius:14px;background:#ffffff08;display:grid;place-items:end center;overflow:hidden}
.fiche-avatar svg{width:56px;height:auto;image-rendering:pixelated;display:block}
.fiche h2{font-size:1.2rem}
.fa-etat{font-size:.82rem;font-weight:600;margin-top:.2rem}
.fa-description{font-size:.86rem;color:var(--doux)}
.fa-infos{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;font-size:.85rem}
.fa-infos dt{color:var(--discret)}
.skill{margin-bottom:.45rem}
.skill-nom{display:inline-block;font:600 .74rem ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--vert);background:#b0f65b12;
  border:1px solid var(--trait-vert);border-radius:5px;padding:.05rem .4rem}
.skill-resume{display:block;font-size:.8rem;color:var(--doux);margin-top:.15rem}
.reglages{width:min(560px,calc(100% - 2rem));padding:1.4rem}
.reglages form{display:flex;flex-direction:column;gap:.8rem}
.reglages h2{font-size:1.2rem}
.reglages label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;color:var(--doux)}
.reglages input[type=url],.reglages input[type=time]{padding:.55rem .8rem;border-radius:9px;border:1px solid var(--trait-fort);background:var(--fond-2);outline:none;color:var(--texte)}
.reglages .ligne-case{flex-direction:row;align-items:center;gap:.6rem;color:var(--texte)}
.petit-texte{font-size:.78rem}
.info{color:var(--vert);font-size:.85rem;min-height:1.2em}
.erreur{color:#ff8f8a;font-size:.85rem;min-height:1.2em}

/* --- connexion --- */
.page-connexion{display:grid;place-items:center;padding:1rem;overflow:auto}
.connexion{width:min(380px,100%);padding:1.8rem;display:flex;flex-direction:column;gap:1rem}
.connexion .marque{margin-bottom:.2rem}
.connexion label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;color:var(--doux)}
.connexion input{padding:.7rem .85rem;border-radius:9px;border:1px solid var(--trait-fort);background:var(--fond-2);outline:none}
.connexion input:focus{border-color:var(--trait-vert)}
.btn.google{background:#fff;color:#1f1f1f;gap:.6rem}
.btn.google:hover{background:#f1f1f1}
.separateur{display:flex;align-items:center;gap:.6rem;font-size:.75rem;margin-top:.4rem}
.separateur::before,.separateur::after{content:'';flex:1;height:1px;background:var(--trait-fort)}
.connexion form{display:flex;flex-direction:column;gap:.8rem}

/* --- animations --- */
@keyframes tape{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes cligne{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes parle{0%{transform:scaleY(1)}100%{transform:scaleY(.3)}}
@keyframes defile{from{background-position:0 0}to{background-position:0 -30px}}
@keyframes points{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-2px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 #b0f65b88}100%{box-shadow:0 0 0 6px #b0f65b00}}
@keyframes ambre{0%,100%{box-shadow:0 0 0 0 #ffb02000}50%{box-shadow:0 0 0 1px #ffb02055,0 0 22px -6px #ffb02088}}
@keyframes saute{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes hourra{0%{transform:translateY(0)}40%{transform:translateY(-6px)}100%{transform:translateY(0)}}
@keyframes entre{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes glisse{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}

/* --- petits écrans : la colonne passe en haut, en bandeaux horizontaux --- */
@media (max-width:900px){
  .replier,#voir-scene{display:none}
  body.sans-cote .app{grid-template-columns:minmax(0,1fr)}
  body.sans-cote .cote{visibility:visible;padding:.4rem .5rem;border-bottom:1px solid var(--trait)}
  /* Toute la hauteur de l'écran : la discussion défile à l'intérieur, la saisie reste en bas. */
  html,body{height:100dvh}
  body{overflow:hidden}
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .cote,.centre,.bloc-cote{min-width:0}

  /* Barre du haut compacte */
  .barre{gap:.35rem;padding:.4rem .5rem}
  .marque strong,.lien,.j-reset,.outil.discret,.ct-nom{display:none}
  .client-test{padding:.15rem .2rem .15rem .5rem;gap:.3rem;font-size:.7rem}
  .client-test .ct-etat{max-width:70px;overflow:hidden;text-overflow:ellipsis}
  .outils{overflow-x:auto;scrollbar-width:none}
  .outil{white-space:nowrap;padding:.35rem .4rem;font-size:.78rem}
  .usage{gap:.45rem;padding:.15rem}
  .jauge{grid-template-columns:auto 28px auto;column-gap:.25rem}
  .j-nom{display:none}
  .j-val{font-size:.7rem}
  .jauge{grid-template-columns:30px auto}

  /* Missions : une seule ligne de pastilles ; l'équipe passe par la scène */
  .cote{flex-direction:row;align-items:center;gap:.45rem;padding:.4rem .5rem;border-right:0;border-bottom:1px solid var(--trait);overflow:hidden}
  .btn.nouvelle{width:auto;flex:none;padding:.4rem .7rem;font-size:1rem}
  .libelle-long,.bloc-cote h2,.bloc-cote:last-child{display:none}
  .bloc-cote{flex:1;overflow:hidden}
  .liste-missions{flex-direction:row;overflow-x:auto;gap:.35rem;scrollbar-width:none}
  .mission-item{flex:none;width:auto;max-width:190px;grid-template-columns:8px auto auto;gap:.4rem;align-items:center;padding:.3rem .55rem;border-color:var(--trait)}
  .mission-item .voyant{margin-top:0}
  .mission-item .nom{-webkit-line-clamp:1;font-size:.78rem}
  .mission-item .sous{display:none}
  .mission-vide{font-size:.75rem}

  /* En-tête de mission sur une ligne */
  .entete-mission{padding:.45rem .7rem;gap:.5rem}
  .entete-mission strong{font-size:.88rem}
  .entete-mission .doux{font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .actions-mission .btn.petit{padding:.3rem .5rem;font-size:.72rem}

  /* Scène : fine bande de pastilles au lieu des grandes cartes */
  .scene{padding:.35rem .7rem}
  .scene.repos{padding:.3rem .7rem}
  .scene-vide{font-size:.72rem}
  .scene-agents{gap:.4rem}
  .agent{width:auto;max-width:200px;grid-template-columns:28px auto;gap:.45rem;padding:.25rem .55rem .25rem .3rem;border-radius:999px}
  .poste{height:28px;width:28px;border-radius:50%;background:#ffffff0c}
  .poste .avatar{width:22px;left:3px;bottom:0}
  .poste .ecran,.poste .meuble,.poste .bulle,.agent .activite,.agent .tache,.agent .duree{display:none}
  .agent h3{font-size:.72rem;white-space:nowrap}
  .agent .etat{margin-top:0;font-size:.64rem}
  #faisceaux{display:none}

  /* Discussion et saisie */
  .fil{padding:.8rem .7rem 1rem;gap:.6rem}
  .msg{padding:.6rem .7rem;font-size:.92rem}
  .msg.moi{max-width:92%}
  .validation pre{max-height:160px}
  .saisie{padding:.45rem .6rem calc(.5rem + env(safe-area-inset-bottom));gap:.45rem;flex-direction:row;align-items:flex-end;flex-wrap:wrap}
  .saisie textarea{min-height:42px;padding:.55rem .7rem;flex-basis:100%}
  .saisie .boutons{width:100%;justify-content:space-between}
  .mode{padding:.4rem .45rem;font-size:.75rem}
  .suggestions{flex-direction:column;align-items:stretch}
  .vide{font-size:.85rem}
  .tiroir header{padding:.6rem .8rem;flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}