@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* Bedrock — Espace client, charte DEKAY (alignée sur le panel en jeu). */

:root{
  --bg:#08080a;
  --halo:radial-gradient(120% 90% at 15% 0%, rgba(155,26,26,.28), transparent 60%);
  --surface:rgba(2,2,2,.4);
  --shell:rgba(2,2,2,.5);
  --raise:rgba(255,255,255,.035);

  --acc:rgba(155,26,26,1);
  --acc-55:rgba(155,26,26,.55);
  --acc-28:rgba(155,26,26,.28);
  --acc-22:rgba(155,26,26,.22);
  --acc-line:rgba(205,85,85,.45);
  --acc-focus:#c94b4b;

  --line:rgba(255,255,255,.06); --line-soft:rgba(255,255,255,.035);

  --white:#fff; --w70:rgba(255,255,255,.70); --w50:rgba(255,255,255,.55);
  --w30:rgba(255,255,255,.45); --w15:rgba(255,255,255,.15);

  --green:#2bad6e; --amber:#c96e06; --blue:#3974c8; --red:#c33131;

  --sans:'Poppins',system-ui,sans-serif;
  --mono:'Space Mono','Consolas',ui-monospace,monospace;

  /* Anciens noms, gardés pour que les règles qui suivent restent valables. */
  --red-900:rgba(155,26,26,.28); --red-800:var(--acc-line); --red-700:var(--acc-line);
  --red-600:var(--acc); --red-500:var(--acc-focus); --red-300:#e58a8a;
  --ink:var(--bg); --ink-2:rgba(2,2,2,.5);
  --display:var(--sans); --body:var(--sans);

  --r:3px;                      /* rayon unique, volontairement petit */
  --ease:cubic-bezier(.4,0,.2,1);
  --colonne:236px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  background:var(--halo) fixed, var(--bg); color:var(--white);
  font:400 15px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

a{color:inherit;text-decoration:none}
a:hover{color:var(--red-300)}

code,.mono{font-family:var(--mono);font-size:.88em}

:focus-visible{outline:2px solid var(--red-500);outline-offset:2px}

/* ==========================================================  Titres  ====== */
h1,h2,h3{font-weight:600;letter-spacing:.1px}
h1{font-size:23px;line-height:1.25}
h2{font-size:16px}
h3{font-size:15px}

.titre-section{
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--w50);font-weight:600;margin-bottom:14px;
}

.aide{color:var(--w50);font-size:13.5px;line-height:1.6}
.aide.encadre{
  border-left:2px solid var(--red-700);padding:10px 0 10px 14px;
  margin-bottom:18px;max-width:760px;
}

/* ==========================================================  Marque  ====== */
.marque,.marque-mini{display:flex;align-items:center;gap:10px}
.marque{flex-direction:column;gap:4px;margin-bottom:26px}

.sigle{
  display:grid;place-items:center;width:30px;height:30px;
  background:linear-gradient(135deg,var(--acc-55),rgba(2,2,2,.25));
  border:1px solid var(--acc-line);border-radius:var(--r);
  font-weight:700;font-size:15px;line-height:1;
  flex:none;
}
.marque .sigle{width:38px;height:38px;font-size:19px}
.marque .nom,.marque-mini .nom{
  font-weight:600;font-size:16px;letter-spacing:.14em;text-transform:uppercase;
}
.marque .sous{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--w50)}

/* ================================================  Pages centrées  ======== */
.page-centre{display:grid;place-items:center;padding:40px 20px}

.carte-auth{
  width:100%;max-width:380px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:32px 30px;
}
.carte-auth.large{max-width:560px}
.carte-auth h1{margin-bottom:6px}
.carte-auth .aide{margin-bottom:20px}
.carte-auth form{margin-top:18px}

.pied-auth{margin-top:20px;font-size:13px;color:var(--w50);text-align:center}
.pied-auth a{color:var(--red-300)}

.liste-etapes{list-style:none;margin:6px 0 16px;font-size:13.5px;color:var(--w70)}
.liste-etapes li{padding:4px 0 4px 18px;position:relative}
.liste-etapes li::before{content:"·";position:absolute;left:6px;color:var(--red-500);font-weight:700}

/* =========================================================  Champs  ======= */
.champ{display:block;margin-bottom:15px}
.champ>span{
  display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--w50);margin-bottom:6px;font-weight:600;
}
.champ small{display:block;margin-top:6px;font-size:12px;color:var(--w30);line-height:1.5}

.champ input,.champ select,.champ-plat,select.champ-plat{
  width:100%;background:var(--ink-2);color:var(--white);
  border:1px solid var(--line);border-radius:var(--r);
  padding:9px 11px;font:400 14px/1.4 var(--body);
  transition:border-color .15s var(--ease);
}
.champ input:hover,.champ-plat:hover{border-color:var(--w15)}
.champ input:focus,.champ select:focus,.champ-plat:focus{
  border-color:var(--red-600);outline:none;
}
.champ input::placeholder,.champ-plat::placeholder{color:var(--w30)}

.champ-plat{width:auto}
.champ-plat.pousse{flex:1;min-width:120px}
.champ-plat.pleine{width:100%}

.etiquette-champ{
  display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--w30);margin-bottom:6px;font-weight:600;
}

/* ========================================================  Boutons  ======= */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--shell);border:1px solid var(--line);border-radius:var(--r);
  padding:9px 16px;font:500 12px/1 var(--sans);
  letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;color:var(--white);
  transition:background .12s linear,border-color .12s linear;
  white-space:nowrap;
}
.bouton:hover{background:var(--acc-28);border-color:var(--acc-line)}
.bouton:active{background:var(--acc-55)}
.bouton.petit{padding:6px 11px;font-size:11px}
.bouton.pleine{width:100%;padding:11px 16px}

.bouton.primaire{
  background:linear-gradient(90deg,var(--acc-55),rgba(2,2,2,.25));
  border-color:var(--acc-line);
}
.bouton.primaire:hover{background:var(--acc)}

.bouton.discret{color:var(--w70)}
.bouton.discret:hover{color:var(--white)}

.bouton.danger{background:rgba(195,49,49,.14);border-color:rgba(195,49,49,.35);color:var(--red-300)}
.bouton.danger:hover{background:rgba(195,49,49,.35);color:var(--white)}

.bouton:disabled{opacity:.45;cursor:not-allowed}
.bouton:disabled:hover{background:var(--shell);border-color:var(--line)}

.en-ligne{display:inline}

/* ========================================================  Alertes  ======= */
.alerte{
  border-radius:var(--r);padding:11px 14px;font-size:13.5px;line-height:1.5;
  margin-bottom:16px;border:1px solid;
}
.alerte.erreur{background:rgba(155,26,26,.12);border-color:var(--red-700);color:var(--red-300)}
.alerte.succes{background:rgba(43,173,110,.10);border-color:rgba(43,173,110,.45);color:#7fd8ab}

/* ========================================================  Bandeau  ======= */
.bandeau{
  display:flex;align-items:center;gap:22px;
  padding:0 22px;height:56px;
  background:rgba(6,6,8,.94);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;
}
.liens-bandeau{display:flex;gap:16px;font-size:13.5px}
.liens-bandeau a{color:var(--w50);padding:4px 0;border-bottom:1px solid transparent}
.liens-bandeau a:hover{color:var(--white)}
.liens-bandeau a.actif{color:var(--white);border-bottom-color:var(--red-600)}

.bloc-compte{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px}
.bloc-compte .qui{color:var(--w70);display:flex;align-items:center;gap:7px}

.etiquette{
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  border:1px solid var(--red-700);color:var(--red-300);
  border-radius:var(--r);padding:2px 5px;
}

/* ===========================================================  Page  ======= */
.page{max-width:1180px;margin:0 auto;padding:30px 22px 70px}

.page-tete{
  display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:22px;
}
.page-tete h1{margin-bottom:4px}
.page-tete>.bouton{margin-left:auto}

.carte{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:20px;
}
.carte.mb{margin-bottom:16px}
.carte.replie{display:none}

.grille-form{display:grid;grid-template-columns:repeat(2,1fr);gap:0 16px}
.grille-form .champ.large{grid-column:1/-1}
.actions-form{grid-column:1/-1;display:flex;gap:10px;margin-top:6px}

/* =================================================  Cartes serveur  ======= */
.grille-serveurs{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  margin-top:18px;
}
.carte-serveur{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;display:flex;flex-direction:column;gap:14px;
  transition:border-color .15s var(--ease);
}
.carte-serveur:hover{border-color:var(--w15)}

.tete-serveur{display:flex;align-items:center;gap:9px}

.pastille{width:7px;height:7px;border-radius:50%;flex:none;background:var(--w30)}
.pastille.ok{background:var(--green)}
.pastille.ko{background:var(--red-500)}
.pastille.neutre{background:var(--w30)}

.meta-serveur{display:grid;gap:8px;font-size:13px}
.meta-serveur>div{display:flex;justify-content:space-between;gap:12px}
.meta-serveur dt{color:var(--w30);flex:none}
.meta-serveur dd{color:var(--w70);text-align:right;overflow-wrap:anywhere}

.actions-serveur{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}

.vide-grand{
  border:1px dashed var(--line);border-radius:var(--r);
  padding:44px 30px;text-align:center;margin-top:18px;
}
.vide-grand p+p{margin-top:8px;max-width:520px;margin-inline:auto}

/* ==========================================================  Coque  ======= */
.corps-panel{overflow:hidden}

.coque{display:grid;grid-template-columns:var(--colonne) 1fr;height:calc(100vh - 56px)}

.colonne{
  background:var(--ink-2);border-right:1px solid var(--line);
  padding:18px 14px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;
}
.selecteur{margin-bottom:16px}
.selecteur select{
  width:100%;background:var(--surface);color:var(--white);
  border:1px solid var(--line);border-radius:var(--r);
  padding:8px 10px;font:500 13px var(--body);cursor:pointer;
}

.titre-nav{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--w30);font-weight:600;margin:16px 0 6px 10px;
}
.titre-nav:first-of-type{margin-top:0}

.onglet{
  position:relative;
  display:flex;align-items:center;gap:9px;width:100%;
  background:none;border:1px solid transparent;border-radius:var(--r);
  padding:8px 10px;font:500 13.5px var(--sans);color:var(--w50);
  cursor:pointer;text-align:left;
  transition:color .12s linear,background .12s linear;
}
.onglet:hover{color:var(--white);background:var(--acc-28)}
.onglet.actif{
  color:var(--white);
  background:linear-gradient(90deg,var(--acc-55),rgba(2,2,2,.25));
  border-color:var(--acc-line);
}
.onglet.actif::before{
  content:'';position:absolute;left:-1px;top:15%;bottom:15%;
  width:3px;background:var(--acc);border-radius:2px;
}

/* Icônes tracées : monochromes, elles suivent la couleur du menu. */
.onglet .ic{display:flex;align-items:center;justify-content:center;width:16px;flex:none;opacity:.85}
.onglet.actif .ic{opacity:1}
.onglet .ic svg{
  width:100%;height:auto;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}

.pillule{
  margin-left:auto;background:rgba(195,49,49,.24);color:var(--white);
  border:1px solid rgba(195,49,49,.59);
  font:700 10px/1 var(--mono);padding:3px 6px;border-radius:var(--r);
}

.etat-lien{
  margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--w30);border-top:1px solid var(--line-soft);
}

/* ===========================================================  Zone  ======= */
/* min-height:0 : sans lui, un élément de grille ou de flex refuse de descendre
   sous la hauteur de son contenu. .defilant héritait de toute la hauteur des
   vues longues, ne défilait jamais, et le bas se faisait couper par la coque. */
.zone{display:flex;flex-direction:column;min-width:0;min-height:0}

.barre-haute{
  display:flex;align-items:center;gap:14px;
  padding:0 22px;height:52px;flex:none;
  border-bottom:1px solid var(--line);background:var(--shell);
}
.titre-vue{font-size:16px;font-weight:600}
.pousse{flex:1}

.bascule{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--w50);cursor:pointer}
.bascule input{accent-color:var(--red-600);width:14px;height:14px;cursor:pointer}

.defilant{flex:1;min-height:0;overflow-y:auto;padding:22px}

.vue{display:none}
.vue.active{display:block}

/* ========================================================  Chiffres  ====== */
.grille-chiffres{
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-bottom:16px;
}
/* Libellé au-dessus, chiffre en bas, filet rouge en tête : comme en jeu. */
.chiffre{
  display:flex;flex-direction:column;gap:6px;
  background:var(--surface);border:1px solid var(--line);
  border-top:2px solid var(--acc);border-radius:var(--r);
  padding:14px 16px;
}
.chiffre .val{
  order:2;margin-top:auto;
  font-family:var(--mono);font-weight:700;font-size:30px;line-height:1.05;
}
.chiffre .lib{
  order:1;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--w50);font-weight:500;
}
.chiffre.alerte-haute .val{color:var(--red)}

.grille-2{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

/* ========================================================  Tableaux  ====== */
.table-boite{overflow-x:auto;margin:0 -20px;padding:0 20px}

.table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
.table th{
  text-align:left;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--w50);font-weight:500;padding:0 12px 9px 0;white-space:nowrap;
  border-bottom:1px solid var(--line);
}
.table td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.table tbody tr:hover{background:var(--acc-28)}
.table tbody tr:last-child td{border-bottom:none}
.table .droite,.table td.droite{text-align:right;padding-right:0}
.table .actions-ligne{display:flex;gap:6px;justify-content:flex-end}

.filtres{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.compteur{font:500 12px var(--mono);color:var(--w30);margin-left:auto}

.vide{color:var(--w30);font-size:13.5px;padding:26px 0;text-align:center}

/* =========================================================  Repères  ====== */
.niveau{
  display:inline-block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;padding:3px 7px;border-radius:var(--r);border:1px solid;
}
.niveau.clean  {border-color:rgba(43,173,110,.4);color:#7fd8ab}
.niveau.watch  {border-color:rgba(224,139,40,.45);color:#f0b56b}
.niveau.warned {border-color:var(--red-800);color:var(--red-300)}
.niveau.high   {border-color:var(--red-600);color:var(--white);background:var(--red-800)}

.gravite{font:700 11px var(--mono);letter-spacing:.04em}
.gravite.g1{color:var(--w50)}
.gravite.g2{color:var(--amber)}
.gravite.g3{color:var(--red-300)}
.gravite.g4{color:var(--red-500)}

.jauge{height:3px;background:var(--w15);border-radius:2px;overflow:hidden;min-width:52px}
.jauge span{display:block;height:100%;background:var(--red-600);border-radius:2px}
.jauge.chaud span{background:var(--red-500)}

.score{display:flex;align-items:center;gap:8px}
.score b{font:700 13px var(--mono);min-width:26px}

/* =======================================================  Suspicions  ===== */
.fiche-suspect{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin-bottom:11px;
}
.fiche-suspect.grave{border-color:var(--red-800)}

.tete-suspect{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tete-suspect .nom{font-weight:600;font-size:15px}
.tete-suspect .ident{font:400 11.5px var(--mono);color:var(--w30)}
.tete-suspect .actions-ligne{margin-left:auto}

.motifs{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.motif{
  font-size:11.5px;border:1px solid var(--line);border-radius:var(--r);
  padding:4px 8px;color:var(--w70);display:flex;align-items:center;gap:6px;
}
.motif b{font:700 11px var(--mono);color:var(--red-300)}
.motif .fois{color:var(--w30);font-size:10.5px}

/* =========================================================  Journaux  ===== */
.onglets-plats{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.onglet-plat{
  background:none;border:none;border-bottom:2px solid transparent;
  padding:8px 13px;font:600 12px var(--body);letter-spacing:.06em;text-transform:uppercase;
  color:var(--w30);cursor:pointer;transition:color .15s var(--ease);
}
.onglet-plat:hover{color:var(--w70)}
.onglet-plat.actif{color:var(--white);border-bottom-color:var(--red-600)}

.ligne-journal{
  display:grid;grid-template-columns:88px 132px 1fr;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13px;
  align-items:baseline;
}
.ligne-journal:last-child{border-bottom:none}
.ligne-journal .quand{font:400 11.5px var(--mono);color:var(--w30);white-space:nowrap}
.ligne-journal .quoi{font-weight:600;font-size:12.5px}
.ligne-journal.sensible .quoi{color:var(--red-300)}
.ligne-journal .quoi-detail{color:var(--w50);overflow-wrap:anywhere}
.ligne-journal .quoi-detail em{color:var(--w30);font-style:normal;font-size:12px}

/* =========================================================  Réglages  ===== */
.ligne-reglage{
  display:flex;align-items:center;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line-soft);
}
.ligne-reglage:last-child{border-bottom:none}
.ligne-reglage .infos{flex:1;min-width:0}
.ligne-reglage .titre{font-size:13.5px;font-weight:500}
.ligne-reglage .sous{font-size:12px;color:var(--w30);margin-top:2px}

.interrupteur{position:relative;width:36px;height:20px;flex:none;cursor:pointer}
.interrupteur input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.interrupteur .piste{
  position:absolute;inset:0;background:var(--w15);border-radius:10px;
  transition:background .15s var(--ease);
}
.interrupteur .piste::after{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  background:var(--white);border-radius:50%;transition:transform .15s var(--ease);
}
.interrupteur input:checked+.piste{background:var(--red-600)}
.interrupteur input:checked+.piste::after{transform:translateX(16px)}
.interrupteur input:focus-visible+.piste{outline:2px solid var(--red-500);outline-offset:2px}

.fiche{display:grid;gap:9px;font-size:13.5px;margin-bottom:16px}
.fiche>div{display:flex;gap:14px;justify-content:space-between}
.fiche dt{color:var(--w30);flex:none}
.fiche dd{color:var(--w70);text-align:right;overflow-wrap:anywhere}

/* ========================================================  Dialogue  ====== */
.voile{
  position:fixed;inset:0;background:rgba(0,0,0,.72);
  display:grid;place-items:center;padding:20px;z-index:90;
}
.voile[hidden]{display:none}

.dialogue{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;width:100%;max-width:420px;
}
.titre-dialogue{font-size:16px;margin-bottom:12px}
.corps-dialogue{font-size:13.5px;color:var(--w70);line-height:1.6}
.corps-dialogue .champ{margin-top:14px}
.actions-dialogue{display:flex;gap:9px;justify-content:flex-end;margin-top:20px}

/* ========================================================  Messages  ====== */
.messages{position:fixed;right:18px;bottom:18px;display:grid;gap:8px;z-index:95;max-width:340px}
.message{
  background:var(--raise);border:1px solid var(--line);border-left:2px solid var(--w30);
  border-radius:var(--r);padding:11px 14px;font-size:13px;line-height:1.5;
  animation:entree .2s var(--ease);
}
.message.ok{border-left-color:var(--green)}
.message.ko{border-left-color:var(--red-500)}
@keyframes entree{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ========================================================  Écrans étroits = */
@media (max-width:860px){
  .coque{grid-template-columns:1fr;height:auto}
  .corps-panel{overflow:auto}
  .colonne{
    flex-direction:row;flex-wrap:wrap;align-items:center;
    border-right:none;border-bottom:1px solid var(--line);
    position:sticky;top:56px;z-index:30;
  }
  .titre-nav,.etat-lien{display:none}
  .selecteur{margin:0 auto 0 0;min-width:170px}
  .onglet{width:auto}
  .defilant{overflow:visible;padding:18px}
  .grille-form{grid-template-columns:1fr}
  .bandeau{gap:14px;padding:0 14px}
  .liens-bandeau{display:none}
  .ligne-journal{grid-template-columns:1fr;gap:3px}
  .page{padding:22px 14px 60px}
}

/* ============================================  Réglages détaillés  ======== */
.tete-carte{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.tete-carte .compteur{margin-left:auto}

.groupe{margin-bottom:22px}
.groupe:last-child{margin-bottom:0}

.tete-groupe{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-bottom:7px;margin-bottom:4px;border-bottom:1px solid var(--line);
}
.tete-groupe h3{
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--red-300);font-weight:700;
}
.tete-groupe .compteur{margin:0 auto 0 0;font-size:11px}

.bloc-detection{border-bottom:1px solid var(--line-soft)}
.bloc-detection:last-child{border-bottom:none}
.bloc-detection .ligne-reglage{border-bottom:none}
.bloc-detection.eteinte .infos{opacity:.45}

.options{
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  padding:0 0 13px 0;margin-top:-4px;
}
.option label{
  display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--w30);font-weight:600;margin-bottom:5px;
}
.option .unite{text-transform:none;letter-spacing:0;color:var(--w15)}
.option small{display:block;margin-top:5px;font-size:11.5px;color:var(--w30);line-height:1.45}

.champ-nombre{
  width:100%;max-width:130px;background:var(--ink-2);color:var(--white);
  border:1px solid var(--line);border-radius:var(--r);
  padding:7px 9px;font:500 13px var(--mono);
  transition:border-color .15s var(--ease);
}
.champ-nombre:hover:not(:disabled){border-color:var(--w15)}
.champ-nombre:focus{border-color:var(--red-600);outline:none}
.champ-nombre:disabled{opacity:.4;cursor:not-allowed}

.ligne-reglage .champ-nombre{flex:none;max-width:96px;text-align:right}

.note-clair{
  font-size:12px;line-height:1.5;color:var(--amber);
  border-left:2px solid rgba(224,139,40,.5);padding:2px 0 2px 10px;
}
.note-clair code{color:inherit;opacity:.85}

/* ==========================================  Champ d'étoiles  ============= */
.avec-etoiles{position:relative;overflow:hidden;min-height:100vh}
.etoiles{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 50%,transparent 4%,#000 54%);
  mask-image:radial-gradient(120% 90% at 50% 50%,transparent 4%,#000 54%)
}
.sur-etoiles{position:relative;z-index:1;background:rgba(6,6,8,.88);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* ==========================================  Demandes d'accès  =========== */
.champ small.option-libre,.option-libre{
  display:inline;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--w30);font-weight:600;margin-left:6px;margin-top:0
}

.champ textarea{
  width:100%;background:var(--ink-2);color:var(--white);
  border:1px solid var(--line);border-radius:var(--r);
  padding:9px 11px;font:400 14px/1.5 var(--body);resize:vertical;min-height:76px;
  transition:border-color .15s var(--ease)
}
.champ textarea:hover{border-color:var(--w15)}
.champ textarea:focus{border-color:var(--red-600);outline:none}
.champ textarea::placeholder{color:var(--w30)}

.demande{margin-bottom:14px}
.demande.litige{border-color:var(--red-800)}

.tete-demande{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.tete-demande .niveau{margin-left:auto;flex:none}
.nom-demande{font-size:16px;font-weight:600;margin-bottom:5px}

.meta-demande{
  display:flex;flex-wrap:wrap;gap:7px;align-items:baseline;
  font-size:12.5px;color:var(--w50)
}
.meta-demande strong{color:var(--w70);font-weight:600}

.message-demande{
  margin-top:12px;padding:11px 14px;border-left:2px solid var(--line);
  font-size:13.5px;line-height:1.6;color:var(--w70);
  background:rgba(255,255,255,.02);overflow-wrap:anywhere
}

.actions-demande{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:16px
}
.actions-demande .compteur{margin-left:auto;font-size:11px}
.actions-demande form{display:flex;align-items:center;gap:8px}
.actions-demande .champ-plat{font-size:13px;padding:8px 10px}

.ouverture{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line)
}
.ouverture .champ>span>small{margin-left:0}

.liens-bandeau .compte-attente{
  display:inline-block;margin-left:5px;
  background:var(--red-600);color:#fff;border-radius:var(--r);
  font:700 10px/1 var(--mono);padding:3px 5px;vertical-align:1px
}

/* ====================================  Exigences du mot de passe  ======== */
.exigences{
  list-style:none;display:flex;flex-wrap:wrap;gap:6px;
  margin:8px 0 0;padding:0;
  max-height:80px;overflow:hidden;
  transition:max-height .3s var(--ease),opacity .25s var(--ease),margin .3s var(--ease)
}
.exigences.terminee{max-height:0;opacity:0;margin-top:0}

.exigences li{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;line-height:1;color:var(--w50);
  border:1px solid var(--line);border-radius:var(--r);
  padding:5px 9px 5px 7px;
  transition:color .18s var(--ease),border-color .18s var(--ease)
}

.exigences li::before{
  content:"·";width:12px;text-align:center;font-weight:700;
  color:var(--w30);transition:color .18s var(--ease)
}
.exigences li.remplie{color:#7fd8ab;border-color:rgba(43,173,110,.42)}
.exigences li.remplie::before{content:"✓";font-size:10px;color:var(--green)}

@media (prefers-reduced-motion:reduce){
  .exigences{transition:none}
  .exigences li{transition:none}
}

/* ============================================  Carte en direct  ========== */
/* Trois colonnes : réglages, carte, joueurs. La carte prend ce qui reste. */
.espace-carte{
  display:grid;grid-template-columns:236px minmax(0,1fr) 268px;
  gap:12px;align-items:start
}

.volet-carte{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden
}
.tete-volet{
  display:flex;align-items:center;gap:8px;
  padding:11px 13px;border-bottom:1px solid var(--line-soft)
}
.titre-volet{
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--w70);font-weight:600;display:flex;align-items:center;gap:7px
}
.titre-volet .compteur{margin:0}
.replier{
  margin-left:auto;background:none;border:none;cursor:pointer;
  color:var(--w30);font-size:12px;line-height:1;padding:2px 4px;
  transition:color .12s linear,transform .15s var(--ease)
}
.replier:hover{color:var(--white)}
.volet-carte.replie .replier{transform:rotate(-90deg)}
.volet-carte.replie .corps-volet{display:none}

/* Pas de zone de défilement interne : la molette agit sur la page, où que soit
   le curseur. Les réglages s'allongent, la carte reste en vue (sticky). */
.corps-volet{
  display:flex;flex-direction:column;gap:11px;padding:13px
}
.espace-carte>.cadre-carte,
.espace-carte>#voletJoueurs{position:sticky;top:0}

.groupe-carte{display:flex;flex-direction:column;gap:6px}
.groupe-carte .etiquette-champ{margin-bottom:0}

.choix-fond{display:grid;grid-template-columns:1fr 1fr;gap:6px}

.duo-calage{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.duo-calage label{
  display:flex;align-items:center;gap:6px;
  font:500 11px var(--mono);color:var(--w30)
}
.duo-calage .champ-nombre{max-width:none;flex:1;padding:5px 7px;font-size:12px}

.cadre-carte canvas{cursor:grab}
.cadre-carte canvas:active{cursor:grabbing}
.choix-fond .bouton.actif{
  background:linear-gradient(90deg,var(--acc-55),rgba(2,2,2,.25));
  border-color:var(--acc-line)
}

.reglage-carte{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:7px 0;border-bottom:1px solid var(--line-soft)
}
.reglage-carte:last-of-type{border-bottom:none}
.reglage-carte .quoi{
  flex:1;min-width:0;font-size:12.5px;color:var(--w70);
  display:flex;flex-direction:column;gap:2px
}
.reglage-carte .quoi small{font-size:11px;color:var(--w30);line-height:1.35}
.reglage-carte .interrupteur{flex:none}

.tete-groupe{
  display:flex;align-items:center;gap:8px;
  padding-top:11px;margin-top:2px;border-top:1px solid var(--line)
}
.tete-groupe h3{
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--w50);font-weight:600
}

.jetons{display:flex;flex-wrap:wrap;gap:5px}
.jeton-filtre{
  background:var(--shell);border:1px solid var(--line);border-radius:var(--r);
  padding:5px 9px;font:500 11.5px var(--sans);color:var(--w50);
  cursor:pointer;white-space:nowrap;
  transition:background .12s linear,border-color .12s linear,color .12s linear
}
.jeton-filtre:hover{color:var(--white);border-color:var(--acc-line)}
.jeton-filtre.actif{
  background:linear-gradient(90deg,var(--acc-55),rgba(2,2,2,.25));
  border-color:var(--acc-line);color:var(--white)
}

/* ------------------------------------------------------- Liste des joueurs */
/* Seule zone qui défile encore : une liste, c'est attendu. Barre visible pour
   qu'on devine la suite. */
.liste-carte{
  display:flex;flex-direction:column;gap:1px;
  max-height:min(58vh,620px);overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent
}
.liste-carte::-webkit-scrollbar{width:9px}
.liste-carte::-webkit-scrollbar-track{background:transparent}
.liste-carte::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);border-radius:5px;
  border:3px solid transparent;background-clip:content-box
}
.liste-carte::-webkit-scrollbar-thumb:hover{
  background:var(--acc-line);background-clip:content-box
}
.ligne-carte{
  display:grid;grid-template-columns:34px 1fr auto auto;gap:9px;align-items:center;
  padding:7px 8px;border-radius:var(--r);border:1px solid transparent;
  cursor:pointer;text-align:left;background:none;width:100%;
  transition:background .12s linear
}
.ligne-carte:hover{background:var(--acc-28)}
.ligne-carte.vise{background:var(--acc-28);border-color:var(--acc-line)}
.ligne-carte .lid{font:400 11px var(--mono);color:var(--w30)}
.ligne-carte .lnom{
  font-size:12.5px;color:var(--w70);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.ligne-carte.rapide .lnom{color:var(--red-300)}
.ligne-carte .lscore{font:700 12px var(--mono);color:var(--w50)}
.ligne-carte.m-watch  .lscore{color:var(--amber)}
.ligne-carte.m-warned .lscore{color:var(--red-300)}
.ligne-carte.m-high   .lscore{color:var(--red-500)}
.ligne-carte .ldur{font:400 11px var(--mono);color:var(--w30);white-space:nowrap}

.barre-carte{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px
}
.legende-carte{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:11.5px;color:var(--w50)
}
/* Posée sur la carte : la place autour est prise par les volets. */
.cadre-carte .legende-carte{
  position:absolute;left:10px;bottom:8px;z-index:4;pointer-events:none;
  background:rgba(6,6,8,.82);border:1px solid var(--line);border-radius:var(--r);
  padding:6px 9px
}

@media (max-width:1180px){
  .espace-carte{grid-template-columns:1fr}
  .espace-carte>.cadre-carte,
  .espace-carte>#voletJoueurs{position:static}
  .liste-carte{max-height:min(50vh,460px)}
}
.legende-carte .ex{
  width:9px;height:9px;flex:none;background:var(--w70);
  margin-left:8px;border-radius:1px
}
.legende-carte .ex:first-child{margin-left:0}
.legende-carte .ex.pied{border-radius:50%}
.legende-carte .ex.voiture{border-radius:2px}
.legende-carte .ex.moto{transform:rotate(45deg);width:8px;height:8px}
.legende-carte .ex.avion{
  background:transparent;width:0;height:0;border-radius:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:9px solid var(--w70)
}
.legende-carte .ex.bateau{border-radius:1px 1px 4px 4px}
.legende-carte .ex.rapide{background:var(--red-500);border-radius:50%;
  box-shadow:0 0 0 3px rgba(224,30,43,.22)}

.cadre-carte{
  position:relative;width:100%;height:min(70vh,720px);
  background:rgba(2,2,2,.5);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden
}
.cadre-carte canvas{display:block;width:100%;height:100%}

.vide.sur-carte{
  position:absolute;inset:auto 0 auto 0;top:50%;transform:translateY(-50%);
  margin:0;pointer-events:none
}

.infobulle{
  position:absolute;z-index:5;pointer-events:none;
  background:rgba(6,6,8,.94);border:1px solid var(--line);border-radius:var(--r);
  padding:8px 11px;font:400 11.5px/1.55 var(--mono);color:var(--w70);
  max-width:230px
}
.infobulle .titre{
  font-family:var(--body);font-weight:600;font-size:12.5px;
  color:var(--white);margin-bottom:4px
}

.dialogue.large-capture{max-width:min(1180px,88vw)}
.corps-capture{
  min-height:180px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px
}
img.capture{
  display:block;width:100%;max-height:70vh;margin:0 auto;
  object-fit:contain;
  border:1px solid var(--line);border-radius:var(--r);background:#000
}
/* Cadence du flux : en mono, pour que les chiffres ne dansent pas. */
.debit-capture{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--w30);text-align:center
}
.debit-capture.coupe{color:var(--red-300)}

@media (max-width:860px){
  .cadre-carte{height:min(60vh,520px)}
  .legende-carte{display:none}
}

.champ-code{
  font-family:var(--mono);font-size:22px;letter-spacing:.34em;
  text-align:center;text-indent:.34em
}

.cle-totp{
  display:block;margin:8px 0 6px;padding:10px 12px;
  font-family:var(--mono);font-size:15px;letter-spacing:.08em;
  color:var(--white);background:var(--ink-2);
  border:1px solid var(--line);border-radius:var(--r);
  word-break:break-all;user-select:all
}

.etapes{margin:0 0 18px;padding-left:20px;color:var(--w70);font-size:13.5px;line-height:1.65}
.etapes li{margin-bottom:10px}
.etapes li:last-child{margin-bottom:0}

.codes-secours{
  list-style:none;margin:12px 0 0;padding:14px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r)
}
.codes-secours li{
  font-family:var(--mono);font-size:14px;letter-spacing:.05em;
  color:var(--white);text-align:center;padding:6px 4px;user-select:all
}

.bloc-form{padding-top:16px;margin-top:16px;border-top:1px solid var(--line-soft)}
.bloc-form:first-of-type{padding-top:0;margin-top:0;border-top:0}

.pillule.vert{background:rgba(43,173,110,.16);color:var(--green);border-color:rgba(43,173,110,.3)}

.onglets-registre{
  display:flex;gap:2px;margin:0 0 16px;
  border-bottom:1px solid var(--line)
}
.onglets-registre a{
  padding:10px 18px;font-size:13px;font-weight:600;letter-spacing:.02em;
  color:var(--w50);text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .18s var(--ease),border-color .18s var(--ease)
}
.onglets-registre a:hover{color:var(--w70)}
.onglets-registre a.actif{color:var(--white);border-bottom-color:var(--red-600)}

.tronque{
  max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}

.a-copier{user-select:all;cursor:text}

@media (max-width:860px){
  .tronque{max-width:150px}
}

.portee{white-space:nowrap}
.jeton{
  display:inline-block;margin:1px 3px 1px 0;padding:2px 7px;
  font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--w70);background:rgba(255,255,255,.06);
  border:1px solid var(--line);border-radius:var(--r)
}
.jeton-ip{color:var(--amber);border-color:rgba(224,139,40,.32);background:rgba(224,139,40,.10)}

.reactions{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding:10px 14px;border-top:1px solid var(--line-soft);
  background:rgba(255,255,255,.015)
}
.etiquette-reaction{
  font-size:10.5px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  color:var(--w50)
}
.reactions .champ-plat.petit{padding:5px 8px;font-size:12.5px;min-width:180px}

.reaction{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--w70);cursor:pointer}
.reaction input{accent-color:var(--red-600);cursor:pointer}
.reaction input:disabled{cursor:default}
.reaction:has(input:disabled){opacity:.5;cursor:default}

.reactions.lourde{
  background:rgba(155,26,26,.10);
  box-shadow:inset 2px 0 0 var(--red-600)
}
.bloc-detection.eteinte .reactions{opacity:.45}

@media (max-width:640px){
  .reactions{gap:8px 10px}
  .reactions .champ-plat.petit{min-width:0;flex:1 1 100%}
}

/* ========================================  Preuves  ====================== */
.preuves-plan{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:16px;align-items:start}
@media (max-width:900px){.preuves-plan{grid-template-columns:1fr}}

.preuves-liste{display:flex;flex-direction:column;gap:8px;max-height:70vh;overflow-y:auto}

.preuve-ligne{
  display:flex;flex-direction:column;gap:5px;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:11px 13px;color:var(--w70);font:inherit;cursor:pointer;
  transition:border-color .15s var(--ease),background .15s var(--ease);
}
.preuve-ligne:hover{border-color:var(--w15)}
.preuve-ligne.actif{border-color:var(--red-600);background:rgba(193,18,31,.06)}

.preuve-tete{display:flex;align-items:center;gap:9px}
.preuve-tete strong{font-size:14px;font-weight:600}
.preuve-tete .niveau{margin-left:auto;flex:none}
.preuve-quoi{font-size:12.5px;color:var(--w70)}
.preuve-pied{display:flex;gap:9px;font-size:11.5px;color:var(--w50)}
.preuve-pied .mono{margin-left:auto}

.preuves-vue{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:16px;min-height:220px
}
.preuve-entete{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.preuve-entete h3{font-size:16px;font-weight:600}
.preuve-entete .mono{font-size:11.5px;color:var(--w50);margin-left:auto}

.preuve-cadre{
  background:#000;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:200px
}
.preuve-cadre img{max-width:100%;height:auto;display:block}

.preuve-barre{display:flex;align-items:center;gap:9px;margin-top:12px}
.preuve-barre .mono{font-size:12px;color:var(--w70);min-width:56px;text-align:center}

/* ====================================  Fiche du joueur  ================= */
.fiche-joueur{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  width:min(680px,94vw);max-height:92vh;overflow-y:auto;padding:22px;position:relative
}
.fiche-fermer{
  position:absolute;top:14px;right:14px;width:30px;height:30px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:50%;
  color:var(--w70);font-size:17px;line-height:1;cursor:pointer
}
.fiche-fermer:hover{color:var(--white);border-color:var(--w15)}

.fiche-ident{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:18px}
.fiche-ident h2{font-size:19px;font-weight:600}
.fiche-ident .mono{font-size:12.5px;color:var(--w50)}

.fiche-risque{
  display:flex;align-items:center;gap:18px;padding:16px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px
}
.fiche-risque strong{font-size:14.5px}
.fiche-risque .aide{margin-top:3px}

.anneau-boite{position:relative;width:84px;height:84px;flex:none}
.anneau{width:84px;height:84px;display:block}
.anneau-fond{fill:none;stroke:var(--line);stroke-width:7}
.anneau-arc{fill:none;stroke:var(--w50);stroke-width:7;stroke-linecap:round}
.anneau.tiede .anneau-arc{stroke:#e0a355}
.anneau.chaud .anneau-arc{stroke:var(--red-600)}
.anneau-val{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:600 21px/1 var(--body);color:var(--white)
}

.fiche-chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
@media (max-width:560px){.fiche-chiffres{grid-template-columns:1fr}}
.fiche-case{
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px
}
.fiche-case strong{display:block;font-size:17px;font-weight:600;margin-top:5px}
.fiche-case small{display:block;font-size:11.5px;color:var(--w50);margin-top:2px}

.fiche-notes{margin-bottom:16px}
.tete-notes{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.tete-notes strong{font-size:14px}
.tete-notes .aide{margin:0}
.tete-notes .bouton{margin-left:auto}
.liste-notes{display:flex;flex-direction:column;gap:8px}
.note{
  background:var(--ink-2);border-left:2px solid var(--line);
  border-radius:var(--r);padding:10px 13px
}
.note p{font-size:13.5px;line-height:1.6;color:var(--w70);overflow-wrap:anywhere}
.note-pied{display:flex;gap:9px;margin-top:6px;font-size:11.5px;color:var(--w50)}
.note-pied button{margin-left:auto}
.lien-discret{
  background:none;border:0;color:var(--w50);font:inherit;font-size:11.5px;
  cursor:pointer;text-decoration:underline
}
.lien-discret:hover{color:var(--red-600)}

.fiche-actions{display:flex;gap:9px;flex-wrap:wrap}
#ficheCapture{margin-top:14px}

/* ====================================  Activité  ======================== */
.bloc-activite{margin-bottom:16px}
.tete-activite{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.tete-activite .jetons{margin-left:auto}
.tete-activite .aide{margin-top:3px}

.activite-cadre{width:100%;overflow-x:auto}
.graphe-activite{width:100%;height:240px;display:block}
.graphe-activite .axe{fill:var(--w50);font:400 10px var(--mono)}
.graphe-activite .axe-ligne{stroke:var(--line);stroke-width:1}

.activite-legende{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}
.cle-legende{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--w70)}
.cle-legende i{width:10px;height:10px;border-radius:2px;flex:none}
.cle-legende b{color:var(--white);font-weight:600}

/* ====================================  Carte du joueur  ================= */
.carte-joueur{
  position:absolute;z-index:6;width:250px;
  background:rgba(8,8,10,.94);border:1px solid var(--line);
  border-radius:var(--r);padding:13px;backdrop-filter:blur(8px);
  box-shadow:0 12px 32px rgba(0,0,0,.5)
}
.cj-tete{display:flex;align-items:flex-start;gap:8px;margin-bottom:11px}
.cj-tete strong{font-size:13.5px;font-weight:600}
.cj-tete .mono{font-size:11px;color:var(--w50)}
.cj-etat{font-size:11.5px;color:var(--w50);margin-top:3px}
.cj-fermer{
  margin-left:auto;background:none;border:0;color:var(--w50);
  font-size:16px;line-height:1;cursor:pointer;padding:0 2px
}
.cj-fermer:hover{color:var(--white)}

.cj-chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:11px}
.cj-chiffres div{background:var(--ink-2);border-radius:var(--r);padding:7px 9px}
.cj-chiffres span{display:block;font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--w50)}
.cj-chiffres b{display:block;font-size:14px;font-weight:600;margin-top:2px}
.cj-chiffres b.chaud{color:var(--red-600)}

.cj-sante{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:11.5px;color:var(--w50);margin-bottom:12px}
.cj-sante .cj-pct{margin-left:auto;color:var(--w70)}
.cj-jauge{flex:1 1 100%;height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.cj-jauge i{display:block;height:100%;background:var(--green)}

.cj-actions{display:flex;gap:6px;flex-wrap:wrap}

/* ====================  Tableau de bord : ecarts et fil  ================== */
.chiffre .ecart{
  display:inline-block;margin-top:7px;padding:2px 7px;border-radius:var(--r);
  font:600 11px/1.5 var(--mono)
}
.chiffre .ecart.monte{background:rgba(155,26,26,.18);color:#e58a8a}
.chiffre .ecart.baisse{background:rgba(43,173,110,.14);color:#5fc99a}
.chiffre .ecart:not(.monte):not(.baisse){color:var(--w50)}
.pied-chiffre{margin-top:6px;font-size:11.5px;color:var(--w50)}

.fil{display:flex;flex-direction:column}
.evenement{
  display:flex;align-items:center;gap:11px;padding:10px 2px;
  border-bottom:1px solid var(--line-soft)
}
.evenement:last-child{border-bottom:0}
.evenement .point{
  width:7px;height:7px;border-radius:50%;flex:none;background:var(--w30)
}
.evenement.detection .point{background:var(--acc)}
.evenement.sanction .point{background:var(--amber)}
.evenement .quoi{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.evenement .quoi strong{font-size:13.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evenement .qui{font-size:11.5px;color:var(--w50);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evenement .quand{font-size:11.5px;color:var(--w30);flex:none;white-space:nowrap}
.evenement .gravite{flex:none}

/* ====================  Presence : curseurs des autres  ================== */
#bdk-curseurs{
  position:absolute;top:0;left:0;width:0;height:0;
  pointer-events:none;z-index:60
}
.curseur-autre{
  position:absolute;top:0;left:0;display:flex;align-items:flex-start;gap:4px;
  will-change:transform;pointer-events:none
}
.curseur-autre .pointe{
  width:15px;height:20px;flex:none;
  fill:hsl(var(--teinte, 0) 65% 58%);
  stroke:rgba(0,0,0,.55);stroke-width:1;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))
}
.curseur-autre .nom-curseur{
  margin-top:9px;padding:3px 8px;border-radius:999px;
  background:hsl(var(--teinte, 0) 62% 46%);color:#fff;
  font:600 11.5px/1.4 var(--sans);white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  max-width:180px;overflow:hidden;text-overflow:ellipsis
}

/* ====================  Mode de l'anticheat (Réglages)  ================== */
.aide.attention{color:var(--amber)}

#choixMode{display:flex;gap:10px;margin:14px 0 10px;flex-wrap:wrap}

.carte-mode{
  flex:1 1 200px;display:flex;flex-direction:column;gap:5px;
  padding:13px 14px;text-align:left;
  background:var(--shell);border:1px solid var(--line);border-radius:var(--r);
  cursor:pointer;transition:border-color .15s var(--ease),background .15s var(--ease);
}
.carte-mode:hover:not(:disabled){border-color:var(--acc-line)}
.carte-mode:disabled{opacity:.45;cursor:not-allowed}
.carte-mode.actif{background:var(--acc-22);border-color:var(--acc-55)}

.titre-mode{font:600 14px var(--sans);color:var(--w70)}
.carte-mode.actif .titre-mode{color:var(--white)}
.quoi-mode{font-size:12.5px;line-height:1.5;color:var(--w30)}