@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Public+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");
@media (min-width: 701px) {

:root{
  --fond:#0a0a0b; --carte:#131316; --carte2:#1c1c21; --bord:#212128;
  --texte:#f3f3f5; --doux:#a9a9b3; --tres-doux:#62626c;
  --rouge:#e4262f; --rouge-sombre:#6f1116; --rouge-clair:#ff6b70;
  --vert:#35b47a; --ambre:#e0a11b;
  --voile:rgba(228,38,47,.13);
  --disp:"Bricolage Grotesque",system-ui,sans-serif;
  --corps:"Public Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --data:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --marge:34px;
}
body{font-family:var(--corps);font-size:14.5px;line-height:1.55;background:var(--fond)}
.mono,.pastille b,.stats b,.carte .gros,.uuid,td.mono,.agenda input[type=date]{font-family:var(--data);font-variant-numeric:tabular-nums}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--fond),0 0 0 4px var(--rouge)}
::selection{background:var(--voile)}

/* ---------- pleine largeur ---------- */
header,nav:not(#barre-bas),main{max-width:none;margin-left:0;margin-right:0}
header{position:relative;background:transparent;border-bottom:1px solid var(--bord);
  padding:20px var(--marge) 52px;gap:0;align-items:center;flex-wrap:nowrap}
nav:not(#barre-bas){padding:16px var(--marge) 0;gap:6px}
main{padding:24px var(--marge) 90px}

/* ---------- entête : marque à gauche, chiffres au centre, bans à droite ---------- */
.marque-bloc{display:flex;flex-direction:column;gap:4px;flex:none}
header .marque{font-family:var(--disp);font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1}
header .marque span{color:var(--rouge)}
.ecg{position:absolute;left:0;right:0;bottom:2px;width:100%;height:48px;max-width:none;overflow:hidden;display:block;pointer-events:none}
.ecg path{fill:none;stroke:var(--rouge);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:2600;stroke-dashoffset:2600;filter:drop-shadow(0 0 6px rgba(228,38,47,.65));
  animation:ecg var(--rythme,3.5s) linear infinite}
@keyframes ecg{to{stroke-dashoffset:-2600}}
.ecg.plat path{stroke:#45454d;filter:none;animation:none;stroke-dasharray:none;stroke-dashoffset:0}
header .pastille{flex-direction:column;gap:2px;padding:0 26px;flex:none}
header .pastille:nth-of-type(2){margin-left:auto}
header .pastille:nth-of-type(5){margin-left:auto;padding-right:26px;border-left:1px solid var(--bord)}
header .pastille b{font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.1}
header .pastille i{font-size:9.5px;font-weight:600;letter-spacing:.15em;color:var(--tres-doux)}
header .pastille:nth-of-type(5) b{color:var(--rouge)}
header .fin{margin-left:0;padding-left:8px;gap:14px;flex:none}
header .compte{font-size:12.5px;color:var(--doux);white-space:nowrap}
@media (max-width:1500px){
  header .pastille{padding:0 16px}
  header .pastille b{font-size:19px}
}
@media (max-width:1180px){
  header{flex-wrap:wrap;gap:14px}
  header .pastille:nth-of-type(2),header .pastille:nth-of-type(5){margin-left:0}
  header .fin{margin-left:auto}
}

/* ---------- onglets ---------- */
nav:not(#barre-bas) button{position:relative;z-index:0;border:0;border-radius:999px;padding:11px 22px;
  font-size:14.5px;font-weight:500;color:#8b8b95;transition:color .2s ease}
nav:not(#barre-bas) button::before{content:"";position:absolute;inset:0;border-radius:999px;background:#1b1b20;transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:-1}
nav:not(#barre-bas) button:hover::before{transform:scaleX(1)}
nav:not(#barre-bas) button:hover{color:var(--texte)}
nav:not(#barre-bas) button.actif{background:var(--texte);color:var(--fond);font-weight:600}
nav:not(#barre-bas) button.actif::before{display:none}
nav button.debut-droite{margin-left:auto}
nav button.debut-droite::after{
  content:"";position:absolute;left:-15px;top:50%;transform:translateY(-50%);width:1px;height:26px;background:var(--bord)}

/* ---------- grille alertes + contenu, à toutes les largeurs ---------- */
@media (min-width:1200px){
  main{display:grid;grid-template-columns:340px minmax(0,1fr);gap:26px;align-items:start;
    transition:grid-template-columns .62s cubic-bezier(.22,.9,.3,1),gap .62s cubic-bezier(.22,.9,.3,1)}
  main > section.vue{grid-column:2}
  main > #alertes{grid-column:1;grid-row:1;position:sticky;top:18px;left:auto;width:auto;margin:0;
    max-height:calc(100vh - 40px);overflow-y:auto;overflow-x:hidden;z-index:1;
    transition:opacity .42s ease,transform .58s cubic-bezier(.22,.9,.3,1)}
  /* sans alerte la colonne se referme à zéro : le tableau reprend toute la largeur.
     Quand une alerte arrive, la colonne se rouvre et pousse le contenu vers la droite. */
  main.sans-alertes{grid-template-columns:0px minmax(0,1fr);gap:0}
  main.sans-alertes > section.vue{grid-column:2}
  main.sans-alertes > #alertes{display:block;opacity:0;transform:translateX(-34px);
    pointer-events:none;overflow:hidden}
}
@media (min-width:1800px){main{grid-template-columns:380px minmax(0,1fr)}}

/* ---------- barres d'outils ---------- */
.barre{gap:10px;margin-bottom:18px}
.barre input[type=text]{background:var(--carte);border:1px solid var(--bord);border-radius:999px;padding:11px 18px;font-size:14px}
.barre input[type=text]:focus{outline:none;border-color:#3a3a44}
.barre label{font-size:13.5px;color:var(--doux)}
.doux{color:var(--doux)}
.agenda{gap:8px;margin-bottom:16px}
.agenda .raccourci,.plus button,.action,.actions button,.envoi button,header button,#note-envoi,.valider,
.alerte-item .pied button,#t-comptes .outils button,.fam-btn{
  position:relative;overflow:hidden;z-index:0;border-radius:999px;transition:color .22s ease,border-color .2s ease}
.agenda .raccourci::before,.plus button::before,.action::before,.actions button::before,.envoi button::before,
header button::before,#note-envoi::before,.valider::before,.alerte-item .pied button::before,
#t-comptes .outils button::before,.fam-btn::before{
  content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:left;
  transition:transform .32s cubic-bezier(.4,0,.2,1);z-index:-1;background:#26262e}
.agenda .raccourci:hover::before,.plus button:hover::before,.action:hover::before,.actions button:hover::before,
header button:hover::before,.alerte-item .pied button:hover::before,#t-comptes .outils button:hover::before,
.fam-btn:hover::before,.envoi button:hover::before,#note-envoi:hover::before,.valider:hover::before,
#confirmation .oui:hover::before{transform:scaleX(1)}
.agenda .raccourci,.action,.actions button,.plus button,header button,#t-comptes .outils button,.fam-btn{
  background:transparent;border:1px solid var(--bord);color:var(--doux);padding:9px 17px;font-size:13px}
.agenda .raccourci:hover,.action:hover,.actions button:hover,.plus button:hover,header button:hover,.fam-btn:hover{
  color:var(--texte);border-color:#3a3a44}
.agenda .raccourci.actif,.fam-btn.actif{border-color:var(--rouge);color:var(--rouge);background:transparent}
.actions button.grave{border-color:var(--rouge-sombre);color:var(--rouge-clair)}
.actions button.grave::before{background:var(--rouge)}
.actions button.grave:hover{color:var(--fond)}
.envoi button,#note-envoi,.valider{background:transparent;border:1px solid var(--rouge);color:var(--rouge);font-weight:600;padding:11px 24px}
.envoi button::before,#note-envoi::before,.valider::before{background:var(--rouge)}
.envoi button:hover,#note-envoi:hover,.valider:hover{color:var(--fond)}
.envoi input{background:var(--carte);border:1px solid var(--bord);border-radius:999px;padding:11px 18px}
.envoi .pseudo{color:var(--doux);font-weight:600}
.filtre{border-radius:999px;background:var(--voile);color:var(--rouge-clair);padding:6px 14px}

/* ---------- tableaux en lignes ---------- */
table{border-collapse:separate;border-spacing:0 6px}
th{font-family:var(--corps);font-size:9.5px;letter-spacing:.14em;color:var(--tres-doux);
  padding:4px 20px 8px;border-bottom:0;font-weight:600}
tbody tr{background:transparent;transition:background-color .18s ease,box-shadow .2s ease}
tbody tr td{background:transparent;border-bottom:0;padding:15px 20px;font-size:14px;vertical-align:middle;
  border-top:1px solid transparent;border-bottom:1px solid transparent}
tbody tr td:first-child{border-left:1px solid transparent;border-radius:18px 0 0 18px}
tbody tr td:last-child{border-right:1px solid transparent;border-radius:0 18px 18px 0}
tbody tr:hover,tbody tr.cliquable:hover{
  background-image:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(228,38,47,.19),transparent 62%);
  background-color:#17171b}
tbody tr:hover td,tbody tr.cliquable:hover td{background:transparent;border-color:#2a2a32}
tbody tr:hover td:first-child,tbody tr.cliquable:hover td:first-child{border-left-color:#2a2a32}
tbody tr:hover td:last-child,tbody tr.cliquable:hover td:last-child{border-right-color:#2a2a32}
tbody tr.cliquable{cursor:pointer}
tbody tr.flash{animation:flashligne .52s ease-out}
@keyframes flashligne{0%{background-color:rgba(228,38,47,.42);box-shadow:0 0 46px -8px rgba(228,38,47,.9)}100%{background-color:#17171b;box-shadow:none}}
tr.tk td{background:rgba(228,38,47,.055)}
tr.tk:hover td{background:transparent}
td b,td a{font-family:var(--disp);font-size:17px;font-weight:600;letter-spacing:-.01em}
td a{text-decoration:none;color:inherit}
td.doux,td .doux{font-family:var(--data);font-size:12px;color:var(--tres-doux)}
.vide{color:var(--tres-doux);padding:30px 20px;font-size:14px}

.etiquette{border-radius:999px;font-size:10px;letter-spacing:.13em;padding:4px 11px;font-weight:600;
  background:var(--carte2);color:var(--doux)}
.etiquette.tk{background:var(--voile);color:var(--rouge-clair);box-shadow:inset 0 0 0 1px rgba(228,38,47,.4)}
.etiquette.f-us{background:rgba(94,148,214,.13);color:#8ab4e8}
.etiquette.f-ussr{background:rgba(224,161,27,.12);color:#d9ab52}

/* ---------- pastille en ligne ---------- */
.etat-ligne{width:9px;height:9px;margin-right:11px;background:#2f2f38;box-shadow:none;position:relative}
.etat-ligne.actif{background:var(--vert);box-shadow:0 0 10px rgba(53,180,122,.9)}
.etat-ligne.actif::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid var(--vert);
  animation:onde-ligne 2.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes onde-ligne{0%{transform:scale(.7);opacity:.9}70%{transform:scale(2.4);opacity:0}100%{opacity:0}}
#vue-joueurs tbody tr:has(.etat-ligne.actif) td:nth-child(3){color:#6fd6a4;font-family:var(--data);font-size:12px}

/* ---------- plateforme en pastille ronde ---------- */
.p-rond{display:inline-flex;align-items:center;justify-content:center;width:27px;height:27px;border-radius:50%;
  font-family:var(--data);font-size:10px;letter-spacing:.02em}
.p-rond.psn{background:rgba(0,112,209,.17);color:#6aaef0}
.p-rond.xbl{background:rgba(16,124,16,.19);color:#6ec96e}
.p-rond.steam{background:rgba(102,192,244,.14);color:#8fc9e8}
.p-rond.inconnu{background:var(--carte2);color:var(--txt3)}

/* ---------- groupes de présence ---------- */
tr.groupe td{padding:22px 22px 8px !important;border:0 !important;background:transparent !important}
tr.groupe:hover{background-image:none !important;background-color:transparent !important}
tr.groupe .lib{display:flex;align-items:center;gap:12px;font-family:var(--corps);font-size:9.5px;
  letter-spacing:.18em;color:var(--txt3);font-weight:600;text-transform:uppercase}
tr.groupe .lib i{flex:1;height:1px;background:var(--bord);font-style:normal}
tr.hors td:first-child b{opacity:.62}

/* ---------- cartes serveur ---------- */
.grille{gap:14px;margin-bottom:22px}
.carte{background:var(--carte);border:1px solid var(--bord);border-radius:24px;padding:22px 24px}
.carte h3{font-size:9.5px;letter-spacing:.16em;color:var(--tres-doux);margin-bottom:10px}
.carte .gros{font-size:34px;font-weight:500;letter-spacing:-.03em}

/* ---------- colonne d'alertes ---------- */
#alertes{gap:14px}
.alerte-bloc{background:var(--carte);border:1px solid var(--bord);border-radius:24px;padding:6px 20px 16px;animation:none}
.alerte-bloc.actif{border-color:var(--bord);animation:none}
.alerte-bloc > summary{font-size:10px;letter-spacing:.18em;color:#8b8b95;font-weight:600;padding:14px 0 8px}
.alerte-bloc .compteur{background:var(--voile);color:var(--rouge-clair);border-radius:999px;padding:2px 10px;
  font-family:var(--data);font-size:11.5px;animation:none}
.alerte-item{position:relative;border-top:1px solid var(--bord);padding:16px 0 4px}
.alerte-item .qui{font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.01em}
.alerte-item .quand{font-family:var(--data);font-size:11px;color:var(--tres-doux)}
.alerte-item .txt{font-size:14px;line-height:1.55;color:var(--doux);margin:6px 0 8px}
.alerte-item .niveau{font-size:9.5px;letter-spacing:.13em;border-radius:999px;padding:3px 9px}
.alerte-item .pied{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.alerte-item .pied button{padding:9px 15px;font-size:12.5px;border:1px solid var(--bord);color:var(--doux);min-height:40px}
.alerte-item .pied button:last-child{border-color:var(--rouge);color:var(--rouge);font-weight:600}
.alerte-item .pied button:last-child::before{background:var(--rouge)}
.alerte-item .pied button:last-child:hover{color:var(--fond)}

/* ---------- fiche joueur · Verre & relief + i2 / c2 / g3 ---------- */
#fiche{width:min(680px,100%);padding:0;border-left:1px solid #2f3540;z-index:60;
  background:linear-gradient(178deg,#1b1e25 0%,#131519 62%,#101215 100%);
  box-shadow:-40px 0 80px rgba(0,0,0,.7);transition:transform .26s cubic-bezier(.4,0,.2,1)}
#fiche::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--rouge),#ff5b61,var(--rouge),transparent)}
#fiche-contenu{padding:30px 34px 70px}
#fiche h2{font-family:var(--disp);font-size:34px;font-weight:600;letter-spacing:-.025em;margin:0 0 2px}
#fiche .fermer{font-size:26px;color:var(--tres-doux);top:24px;right:26px;z-index:3;
  transition:color .2s,transform .2s}
#fiche .fermer:hover{color:var(--rouge);transform:rotate(90deg)}
#fiche h4{font-size:9.5px;letter-spacing:.2em;color:var(--tres-doux);margin:32px 0 12px;
  display:flex;align-items:center;gap:10px;border:0;padding:0}
#fiche h4::before{content:"";width:14px;height:2px;background:var(--rouge);border-radius:2px}

/* --- i2 · identité en verre taillé --- */
#fiche-contenu > .haut-id{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:4px}
#fiche .gp{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
#fiche .puce{position:relative;overflow:hidden;font-size:11px;font-weight:600;letter-spacing:.04em;
  padding:6px 13px;border-radius:999px;color:var(--doux);
  background:linear-gradient(180deg,#252a33,#1a1e25);border:1px solid #313843;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);transition:transform .2s,border-color .2s}
#fiche .puce::after{content:"";position:absolute;inset:0;transform:translateX(-130%);
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);
  transition:transform .75s cubic-bezier(.4,0,.2,1)}
#fiche .puce:hover::after{transform:translateX(130%)}
#fiche .puce:hover{transform:translateY(-2px);border-color:#454e5c}
#fiche .puce.enligne{color:#8fe8b4;border-color:rgba(53,180,122,.45);
  background:linear-gradient(180deg,rgba(53,180,122,.28),rgba(53,180,122,.10))}
#fiche .pt{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;
  vertical-align:1px;background:#59616c}
#fiche .pf-psn .pt{background:#2e6fdb}
#fiche .pf-xbl .pt{background:#57a333}
#fiche .pf-steam .pt{background:#7aa8cf}
#fiche .uuid{font-family:var(--data);font-size:11px;color:var(--tres-doux);margin:14px 0 22px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;word-break:break-all}
#fiche .copier{position:relative;overflow:hidden;z-index:0;border-radius:999px;padding:4px 12px;font-size:11px;
  background:linear-gradient(180deg,#252a33,#1a1e25);border:1px solid #313843;color:var(--doux);
  transition:color .2s,border-color .2s,transform .12s}
#fiche .copier::before{content:"";position:absolute;inset:0;background:#2e3541;transform:scaleX(0);
  transform-origin:left;z-index:-1;transition:transform .3s cubic-bezier(.4,0,.2,1)}
#fiche .copier:hover::before{transform:scaleX(1)}
#fiche .copier:hover{color:#fff;border-color:#454e5c}
#fiche .copier:active{transform:scale(.94)}
#fiche .copier.fait{border-color:var(--vert);color:#6fd6a4}
#fiche .copier.fait::before{background:rgba(53,180,122,.22);transform:scaleX(1)}

/* --- raccourcis « ses messages / ses scores » --- */
#fiche .raccourcis{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
#fiche .action{position:relative;z-index:0;overflow:hidden;min-height:44px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;
  background:var(--carte2);border:1px solid var(--bord);color:var(--texte);
  transition:color .2s,border-color .2s,transform .12s}
#fiche .action::before{content:"";position:absolute;inset:0;border-radius:999px;background:#2e3541;
  transform:scaleX(0);transform-origin:left;z-index:-1;transition:transform .32s cubic-bezier(.4,0,.2,1)}
#fiche .action:hover::before{transform:scaleX(1)}
#fiche .action:hover{color:#fff;border-color:#3d434f}
#fiche .action:active{transform:scale(.955)}
#fiche .raccourcis .action{flex:1}
#fiche .ajout-note .action{border-color:var(--rouge-sombre);color:var(--rouge-clair)}
#fiche .ligne-hist .action{min-height:0;padding:3px 11px;font-size:11.5px;vertical-align:middle;margin:0 2px}

/* --- c2 · commandes en barre segmentée --- */
#fiche .actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:16px;
  background:#14171c;border:1px solid #262c34;border-radius:16px;overflow:hidden}
#fiche .actions button{position:relative;z-index:0;overflow:hidden;border:0;border-radius:0;
  border-right:1px solid #22272f;border-bottom:1px solid #22272f;background:transparent;color:var(--texte);
  min-height:50px;padding:12px 8px;font-size:13px;text-align:center;
  display:inline-flex;align-items:center;justify-content:center;transition:color .2s}
#fiche .actions button:nth-child(3n){border-right:0}
#fiche .actions button:nth-last-child(-n+3){border-bottom:0}
#fiche .actions button::before{content:"";position:absolute;inset:0;background:#20252d;transform:scaleY(0);
  transform-origin:bottom;z-index:-1;transition:transform .28s cubic-bezier(.4,0,.2,1)}
#fiche .actions button:hover::before{transform:scaleY(1)}
#fiche .actions button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--rouge);transform:scaleX(0);transition:transform .28s cubic-bezier(.4,0,.2,1)}
#fiche .actions button:hover::after{transform:scaleX(1)}
#fiche .actions button:hover{color:#fff}
#fiche .actions button:active::before{background:#2a3039}
#fiche .actions button.grave{color:var(--rouge-clair);font-weight:600}
#fiche .actions button.note-sanction{color:var(--ambre)}
#fiche .actions button.note-sanction::before{background:rgba(224,161,27,.18)}
#fiche .actions button.note-sanction:hover{color:#ffd98a}
#fiche .actions button.grave::before{background:rgba(228,38,47,.22)}
.agir{border-radius:999px}

/* --- stats · effet blocs cartes --- */
.stats{gap:10px;margin-top:20px !important}
.stats div{position:relative;overflow:hidden;background:#12151a;border:1px solid #22272f;
  border-left:3px solid #2c323b;border-radius:16px;padding:16px 14px;text-align:left;
  transition:border-left-color .25s,transform .2s,box-shadow .25s}
.stats div::after{content:"";position:absolute;right:-15px;top:-15px;width:30px;height:30px;background:#1e2229;
  transform:rotate(45deg);transition:background .25s}
.stats div:hover{border-left-color:var(--rouge);transform:translateY(-3px);box-shadow:0 16px 34px -20px #000}
.stats div:hover::after{background:var(--rouge)}
.stats b{font-size:26px;font-weight:500;letter-spacing:-.03em;white-space:nowrap}
.stats i{font-size:9px;letter-spacing:.14em;color:var(--tres-doux)}
.stats .alerte{background:#12151a;border-left-color:rgba(228,38,47,.45)}
.stats .alerte b,.stats .alerte i{color:var(--rouge-clair)}
.stats .alerte::after{background:rgba(228,38,47,.45)}

/* --- g3 · fond radar du bloc réseau --- */
.reseau{position:relative;overflow:hidden;background:#101216;border:1px solid #23272f;border-radius:18px;
  padding:16px 18px;gap:0;display:grid;grid-template-columns:1fr 1fr .82fr 1.5fr;margin-top:16px}
.reseau > .cel{position:relative;z-index:2;font-family:var(--data);font-size:14px;padding:2px 12px;
  white-space:nowrap}
.reseau > .cel + .cel{border-left:1px solid #20242b}
.reseau > .cel::after{content:"";position:absolute;left:12px;bottom:-6px;height:2px;width:0;background:var(--rouge);
  border-radius:2px;transition:width .3s cubic-bezier(.4,0,.2,1)}
.reseau > .cel:hover::after{width:calc(100% - 24px)}
.reseau span{font-family:var(--corps);font-size:9px;letter-spacing:.14em;color:var(--tres-doux);margin-bottom:5px}
.fond-ping{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 34px),
             repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 26px)}
.fond-ping::after{content:"";position:absolute;top:0;bottom:0;width:130px;left:-150px;
  background:linear-gradient(90deg,transparent,rgba(228,38,47,.30),transparent);
  animation:balayer 3.6s linear infinite}
@keyframes balayer{to{transform:translateX(880px)}}

/* --- reste de la fiche --- */
.bandeau{border-radius:18px;border-left:3px solid var(--rouge);background:var(--voile);padding:16px 18px}
.bandeau b{color:var(--rouge-clair)}
details.bloc{border:1px solid #23272f;border-radius:14px;background:#131519;margin-bottom:9px;overflow:hidden;
  transition:border-color .22s}
details.bloc:hover{border-color:#333a45}
details.bloc[open]{border-color:#3a2226}
details.bloc > summary{padding:14px 17px;font-size:14px;font-weight:500;transition:background .18s}
details.bloc > summary:hover{background:#181b21}
details.bloc > summary::before{color:var(--tres-doux);font-size:11px;margin-right:2px}
details.bloc > summary .compte{font-family:var(--data);font-size:12px;color:var(--tres-doux)}
details.bloc > .dedans{padding:2px 17px 15px}
.ligne-hist{position:relative;padding:12px 15px;border:0;font-size:13.5px;background:#0f1115;border-radius:12px;
  margin-bottom:6px;line-height:1.55;
  transition:transform .2s cubic-bezier(.4,0,.2,1),background-color .2s;
  background-image:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(228,38,47,.15),transparent 65%)}
.ligne-hist::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:0;background:var(--rouge);
  border-radius:0 3px 3px 0;transition:width .22s}
.ligne-hist:hover{transform:translateX(5px);background-color:#14171c}
.ligne-hist:hover::before{width:3px}
.ligne-hist b{font-family:var(--corps);font-size:13.5px;font-weight:600}
.ligne-hist .mono{font-size:11.5px;color:var(--tres-doux)}
.ajout-note{margin-bottom:10px}
#note-texte{background:#0f1115;border:1px solid #262c34;border-radius:16px;padding:14px 16px;
  transition:border-color .2s,box-shadow .2s}
#note-texte:focus{outline:0;border-color:var(--rouge);box-shadow:0 0 0 3px rgba(228,38,47,.13)}
#note-envoi{border-radius:999px;padding:10px 20px}
#zone-action{background:#0f1115;border:1px solid #23272f;border-radius:16px;padding:16px 18px;margin-top:14px}
#zone-action input[type=text]{background:#131519;border:1px solid #262c34;border-radius:12px;padding:11px 14px}
#zone-action input[type=text]:focus{outline:0;border-color:var(--rouge);box-shadow:0 0 0 3px rgba(228,38,47,.13)}
.durees button,#zone-action .palier{border-radius:999px;padding:7px 15px;background:#131519;border:1px solid #262c34}
#fiche .curseur{margin:4px 0 14px}
#fiche .curseur .valeur{font-family:var(--data);font-size:22px;font-weight:500;letter-spacing:-.02em;
  color:var(--texte);margin-bottom:10px}
#fiche .curseur input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--rouge) 0,var(--rouge) var(--part,50%),#22262e var(--part,50%));outline:none}
#fiche .curseur input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;
  border-radius:50%;background:var(--rouge);border:3px solid #131519;cursor:pointer;
  box-shadow:0 0 0 0 rgba(228,38,47,.35);transition:box-shadow .25s,transform .15s}
#fiche .curseur input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 7px rgba(228,38,47,.18);transform:scale(1.1)}
#fiche .curseur input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--rouge);
  border:3px solid #131519;cursor:pointer}
#fiche .curseur .reperes{display:flex;justify-content:space-between;font-family:var(--data);font-size:10px;
  color:var(--tres-doux);margin-top:8px;letter-spacing:.06em}
.durees button.choisi{background:var(--rouge);border-color:var(--rouge);color:#fff}
.valider{border-radius:999px;padding:10px 22px;transition:box-shadow .3s}
.valider:hover{box-shadow:0 0 0 4px rgba(228,38,47,.16),0 10px 30px -12px var(--rouge)}
.annuler{border-radius:999px;padding:10px 18px;border-color:#262c34}
.duo{gap:26px;margin-top:4px}
.duo .sous{font-size:9px;letter-spacing:.16em;color:var(--tres-doux);text-transform:uppercase;margin-bottom:8px}
details.tir{border-bottom:1px solid #23272f}
details.tir > summary{padding:12px 4px;font-family:var(--disp);font-size:16px;font-weight:600;
  border-radius:8px;transition:background .18s,padding-left .2s}
details.tir > summary:hover{background:#181b21;padding-left:10px}
details.tir .quand-tir{font-family:var(--data);font-size:11px;color:var(--tres-doux)}
.ligne-tir{font-family:var(--data);font-size:11.5px;color:var(--tres-doux);padding:5px 0 5px 16px}
/* ---------- boîte de confirmation ---------- */
#confirmation{background:rgba(4,4,5,.78);backdrop-filter:blur(4px)}
#confirmation .boite{background:linear-gradient(178deg,#1b1e25,#131519);border:1px solid #3a2226;
  border-radius:22px;padding:24px 26px;box-shadow:0 40px 90px -30px #000}
#confirmation h4{font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.02em;margin:0 0 10px}
#confirmation p{color:var(--doux);font-size:14px;line-height:1.55;margin:0 0 20px}
#confirmation .oui{position:relative;overflow:hidden;z-index:0;width:100%;min-height:50px;border-radius:999px;
  background:transparent;border:1px solid var(--rouge);color:var(--rouge);font-weight:600;font-size:16px;
  transition:color .22s ease,box-shadow .3s}
#confirmation .oui::before{content:"";position:absolute;inset:0;background:var(--rouge);transform:scaleX(0);
  transform-origin:left;z-index:-1;transition:transform .32s cubic-bezier(.4,0,.2,1)}
#confirmation .oui:hover{color:var(--fond);box-shadow:0 0 0 4px rgba(228,38,47,.16),0 12px 34px -14px var(--rouge)}
#confirmation .non{width:100%;min-height:46px;border-radius:999px;margin-top:9px;border:1px solid var(--bord);
  background:transparent;color:var(--doux);transition:color .2s,border-color .2s}
#confirmation .non:hover{color:var(--texte);border-color:#3a3a44}

/* ---------- comptes et droits ---------- */
.creation{border-radius:24px;border-color:var(--bord);background:var(--carte);padding:22px 24px}
.creation input,.creation select,#t-comptes select,#t-comptes input{background:var(--fond);border:1px solid var(--bord);
  border-radius:999px;padding:9px 15px;color:var(--texte)}
.secret{border-radius:20px}
.perms td,.perms th{border-color:#1a1a1f}
.perms tr.famille td{background:var(--carte);color:var(--rouge-clair);border-radius:0;font-size:9.5px;letter-spacing:.14em}
.titre-bloc{font-size:9.5px;letter-spacing:.2em;color:var(--tres-doux);margin:36px 0 14px}

}
/* ---------- tampon, hors média pour rester posé au-dessus de tout ---------- */
.tampon-flottant{position:fixed;pointer-events:none;z-index:9999;white-space:nowrap;
  font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:#ff6b70;border:2px solid #e4262f;padding:8px 16px;border-radius:10px;background:rgba(6,6,7,.95);
  box-shadow:0 0 0 1px rgba(228,38,47,.3),0 22px 55px -14px #000,0 0 44px -12px rgba(228,38,47,.65);
  transform:translate(-50%,-50%) rotate(-11deg) scale(2.1);opacity:0;
  animation:tamponflot 1.5s cubic-bezier(.22,.9,.3,1) forwards}
@keyframes tamponflot{
  22%{opacity:1;transform:translate(-50%,-50%) rotate(-11deg) scale(.93)}
  32%{opacity:1;transform:translate(-50%,-50%) rotate(-11deg) scale(1)}
  78%{opacity:1;transform:translate(-50%,-50%) rotate(-11deg) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(-11deg) scale(1.06)}
}



/* ---------- arrivée d'une alerte : elle entre par la gauche et pousse le reste ---------- */
.alerte-item.arrive{overflow:hidden;animation:alerte-entre .68s cubic-bezier(.22,.9,.3,1) both}
@keyframes alerte-entre{
  0%{opacity:0;transform:translateX(-30px);max-height:0;padding-top:0;padding-bottom:0;
     margin-bottom:0;border-top-color:transparent}
  35%{opacity:1}
  100%{opacity:1;transform:none;max-height:400px}
}
.alerte-bloc.signale{animation:alerte-signal .9s ease-out both}
@keyframes alerte-signal{
  0%{box-shadow:0 0 0 0 rgba(228,38,47,.55),0 0 26px -6px rgba(228,38,47,.8)}
  100%{box-shadow:0 0 0 10px rgba(228,38,47,0),0 0 0 0 rgba(228,38,47,0)}
}
.alerte-bloc.signale .compteur{animation:alerte-compteur .6s cubic-bezier(.22,.9,.3,1) both}
@keyframes alerte-compteur{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}

/* ---------- onglet Minigame, au centre et en rouge ---------- */
nav:not(#barre-bas) button#onglet-minijeu{margin-left:auto;border:1px solid var(--rouge);
  color:var(--rouge);font-weight:600;padding:10px 22px}
nav:not(#barre-bas) button#onglet-minijeu::before{background:var(--rouge)}
nav:not(#barre-bas) button#onglet-minijeu:hover{color:var(--fond)}
nav:not(#barre-bas) button#onglet-minijeu.actif{background:var(--rouge);border-color:var(--rouge);
  color:var(--fond);box-shadow:0 0 0 4px rgba(228,38,47,.14)}

/* ---------- salle de jeux ---------- */
body.salle-jeux #alertes{display:none !important}
body.salle-jeux main{grid-template-columns:minmax(0,1fr) !important;gap:0 !important}
body.salle-jeux main>section.vue{grid-column:1 !important}
body.en-jeu{overflow:hidden}
#vue-minijeu{display:none}
#vue-minijeu.actif{display:block}
.mj-tete{text-align:center;margin:26px 0 30px}
.mj-tete h2{font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:-.03em;margin:0 0 6px}
.mj-tete span{font-family:var(--data);font-size:11px;color:var(--tres-doux);letter-spacing:.16em;
  text-transform:uppercase}
.mj-menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:22px;
  max-width:1300px;margin:0 auto 40px;padding:0 20px}
.mj-carte{position:relative;overflow:hidden;z-index:0;display:flex;flex-direction:column;
  align-items:flex-start;gap:8px;text-align:left;padding:26px 26px 22px;border-radius:22px;
  background:var(--carte);border:1px solid var(--bord);color:var(--texte);cursor:pointer;
  transition:transform .22s cubic-bezier(.4,0,.2,1),border-color .25s,box-shadow .3s}
.mj-carte::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(420px circle at 50% 0%,rgba(228,38,47,.16),transparent 70%);
  transition:opacity .3s}
.mj-carte:hover:not(:disabled){transform:translateY(-4px);border-color:var(--rouge);
  box-shadow:0 22px 50px -28px #000,0 0 0 4px rgba(228,38,47,.10)}
.mj-carte:hover:not(:disabled)::before{opacity:1}
.mj-carte:active:not(:disabled){transform:translateY(-1px) scale(.99)}
.mj-sous{font-family:var(--data);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rouge)}
.mj-titre{font-family:var(--disp);font-size:24px;font-weight:600;letter-spacing:-.025em}
.mj-texte{font-size:13.5px;line-height:1.6;color:var(--doux)}
.mj-pied{margin-top:10px;font-family:var(--data);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rouge);border:1px solid var(--rouge);border-radius:999px;
  padding:7px 16px}
.mj-carte.chantier{opacity:.5;cursor:default}
.mj-carte.chantier .mj-sous,.mj-carte.chantier .mj-pied{color:var(--tres-doux);border-color:var(--bord)}

/* ---------- les classements, sous les tuiles ---------- */
.mj-tableaux{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:22px;
  max-width:1300px;margin:0 auto 48px;padding:0 20px;align-items:start}
.mj-tableau{background:var(--carte);border:1px solid var(--bord);border-radius:22px;
  padding:20px 22px 14px;overflow:hidden}
.mj-th{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--bord)}
.mj-th b{font-family:var(--disp);font-size:15px;font-weight:600;letter-spacing:-.02em}
.mj-th span{font-family:var(--data);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tres-doux);margin-left:auto}
.mj-rangs{list-style:none;margin:0;padding:0}
.mj-rang{display:grid;grid-template-columns:22px 1fr auto 46px;align-items:center;gap:10px;
  padding:9px 10px;margin:2px -10px;border-radius:10px;
  font-size:13.5px;transition:background .2s}
.mj-rang:hover{background:var(--carte2)}
.mj-place{font-family:var(--data);font-size:11px;color:var(--tres-doux);text-align:right}
.mj-qui{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--doux)}
.mj-pts{font-family:var(--data);font-size:13.5px;font-weight:600;color:var(--doux)}
.mj-quand{font-family:var(--data);font-size:10.5px;color:var(--tres-doux);text-align:right}
.mj-rang.tete .mj-place,.mj-rang.tete .mj-pts{color:var(--ambre)}
.mj-rang.tete .mj-qui{color:var(--texte);font-weight:600}
.mj-rang.moi{background:rgba(228,38,47,.10);box-shadow:inset 0 0 0 1px rgba(228,38,47,.28)}
.mj-rang.moi .mj-qui{color:var(--texte);font-weight:600}
.mj-rang.moi .mj-pts,.mj-rang.moi .mj-place{color:var(--rouge-clair)}
.mj-vide{list-style:none;padding:18px 0 14px;text-align:center;
  font-family:var(--data);font-size:11px;letter-spacing:.1em;color:var(--tres-doux)}

/* ---------- le jeu, plein écran et centré ---------- */
#mj-plein{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:22px;background:rgba(4,3,5,.97);backdrop-filter:blur(8px);
  animation:mj-ouvre .28s ease both}
@keyframes mj-ouvre{from{opacity:0;transform:scale(.985)}}
#mj-plein .mj-barre{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  width:min(1400px,94vw)}
#mj-plein .mj-nom{font-family:var(--disp);font-size:20px;font-weight:600;letter-spacing:-.02em}
#mj-plein .mj-sous2{font-family:var(--data);font-size:10px;color:var(--tres-doux);letter-spacing:.16em;
  text-transform:uppercase}
#mj-plein .mj-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
#mj-plein .mj-b{position:relative;overflow:hidden;z-index:0;background:transparent;
  border:1px solid var(--bord);color:var(--doux);border-radius:999px;padding:8px 16px;font-size:12.5px;
  font-weight:600;cursor:pointer;transition:color .2s,border-color .2s}
#mj-plein .mj-b::before{content:"";position:absolute;inset:0;background:#22272f;transform:scaleX(0);
  transform-origin:left;z-index:-1;transition:transform .3s cubic-bezier(.4,0,.2,1)}
#mj-plein .mj-b:hover::before{transform:scaleX(1)}
#mj-plein .mj-b:hover{color:var(--texte)}
#mj-plein .mj-b.on{border-color:var(--rouge);color:var(--rouge)}
#mj-plein .mj-fermer{border-color:var(--rouge-sombre);color:var(--rouge-clair)}
#mj-plein .mj-ecran{position:relative;width:min(1400px,94vw);max-height:78vh;aspect-ratio:25/14;
  border:1px solid #2a1016;border-radius:16px;overflow:hidden;background:#0d0b10;
  box-shadow:0 50px 110px -50px #000,0 0 0 1px rgba(228,38,47,.10) inset}
/* les jeux sont vectoriels : on veut le lissage, pas les gros pixels */
#mj-plein .mj-toile{width:100%;height:100%;display:block;cursor:default;touch-action:none}
#mj-plein .mj-toile.curseur-croix{cursor:none}
#mj-plein .mj-ecran::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(120% 120% at 50% 50%,transparent 68%,rgba(0,0,0,.34) 100%)}
#mj-plein .mj-aide{margin:0;font-family:var(--data);font-size:11px;color:var(--tres-doux);
  letter-spacing:.08em}
#mj-plein .mj-aide b{color:var(--doux)}
#mj-plein:fullscreen{padding:26px}
#mj-plein:fullscreen .mj-ecran{max-height:84vh}

/* ---------- écran de connexion, ordinateur seulement ---------- */
@media (min-width: 701px) {
body.hors-session{display:grid;grid-template-columns:1.12fr .88fr;min-height:100vh;margin:0;
  background:#040305;overflow:hidden}
body.hors-session #rl-champ-3d{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:0;display:block}
body.hors-session .rl-voile{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,3,5,.92) 0%,rgba(4,3,5,.55) 26%,rgba(4,3,5,0) 46%)}
body.hors-session .rl-volet{position:relative;z-index:2;display:flex;flex-direction:column;
  justify-content:center;padding:0 7vw 30vh;pointer-events:none}
body.hors-session .rl-geant{font-family:var(--disp);font-weight:800;font-size:clamp(54px,7.4vw,124px);
  line-height:.9;letter-spacing:-.048em;margin:0;color:var(--texte);text-shadow:0 20px 90px rgba(0,0,0,.95)}
body.hors-session .rl-geant i{font-style:normal;color:var(--rouge)}
body.hors-session .rl-cote{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  padding:0 6vw;background:rgba(6,5,8,.58);backdrop-filter:blur(9px) saturate(.92);
  border-left:1px solid rgba(228,38,47,.20);box-shadow:-50px 0 110px -40px #000}
body.hors-session #connexion{position:relative;width:100%;max-width:380px;margin:0;padding:0;
  background:none;border:0;border-radius:0;display:block}
body.hors-session #connexion h1{font-family:var(--disp);font-size:15px;font-weight:600;letter-spacing:.34em;
  color:var(--tres-doux);margin:0 0 22px}
body.hors-session #connexion h1 span{color:var(--rouge-sombre)}
body.hors-session #connexion p{font-family:var(--disp);font-size:30px;font-weight:600;letter-spacing:-.03em;
  color:var(--texte);margin:0 0 34px}
body.hors-session #connexion input{width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--bord);border-radius:0;padding:14px 2px;margin-bottom:22px;font-size:15px;
  color:var(--texte);transition:border-color .25s}
body.hors-session #connexion input::placeholder{color:var(--tres-doux)}
body.hors-session #connexion input:focus{outline:0;border-bottom-color:var(--rouge)}
body.hors-session .rl-champ{position:relative}
body.hors-session .rl-champ::after{content:"";position:absolute;left:50%;right:50%;bottom:22px;height:2px;
  background:var(--rouge);transition:left .35s cubic-bezier(.4,0,.2,1),right .35s cubic-bezier(.4,0,.2,1)}
body.hors-session .rl-champ.actif::after{left:0;right:0}
body.hors-session #connexion button{position:relative;overflow:hidden;z-index:0;width:100%;
  background:transparent;border:1px solid var(--rouge);color:var(--rouge);border-radius:999px;padding:15px;
  font-size:15px;font-weight:600;margin-top:10px;transition:color .22s,box-shadow .3s}
body.hors-session #connexion button::before{content:"";position:absolute;inset:0;background:var(--rouge);
  transform:scaleX(0);transform-origin:left;z-index:-1;transition:transform .34s cubic-bezier(.4,0,.2,1)}
body.hors-session #connexion button:hover::before{transform:scaleX(1)}
body.hors-session #connexion button:hover{color:#08070a;
  box-shadow:0 0 0 5px rgba(228,38,47,.14),0 16px 40px -16px var(--rouge)}
body.hors-session #connexion button:active{transform:scale(.985)}
body.hors-session #erreur-connexion{color:var(--rouge);font-size:14px;min-height:20px;margin-top:10px}
body.hors-session #erreur-connexion:not(:empty){animation:rlparaitre .3s ease both}
@keyframes rlparaitre{from{opacity:0;transform:translateY(-4px)}}
}

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

/* ---------- rafales de tirs amis ---------- */
@property --tk-part { syntax: "<number>"; initial-value: 0; inherits: false }

.alerte-bloc.tk-rafale{border-color:#3a2a2e}
.alerte-bloc.tk-rafale > summary{color:#c9a06a}
.alerte-bloc.tk-rafale[data-gravite="grave"]{border-color:#5a3a1e}
.alerte-bloc.tk-rafale[data-gravite="critique"]{border-color:var(--rouge-sombre)}
.alerte-bloc.tk-rafale[data-gravite="massacre"]{border-color:var(--rouge);
  box-shadow:0 0 0 1px rgba(228,38,47,.28),0 0 34px -14px var(--rouge);
  animation:tk-souffle 1.5s ease-in-out infinite}
@keyframes tk-souffle{
  0%,100%{box-shadow:0 0 0 1px rgba(228,38,47,.24),0 0 30px -16px var(--rouge)}
  50%    {box-shadow:0 0 0 1px rgba(228,38,47,.55),0 0 44px -8px var(--rouge)}
}
.alerte-bloc.tk-rafale[data-gravite="critique"] .compteur,
.alerte-bloc.tk-rafale[data-gravite="massacre"] .compteur{background:var(--rouge);color:#fff}

/* une fiche par tireur */
.tk-cas{padding-bottom:14px}
.tk-cas .qui{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tk-cas .niveau{text-transform:uppercase;font-family:var(--data);font-weight:600}
.tk-cas .niveau.surveiller{background:rgba(224,161,27,.14);color:var(--ambre);
  box-shadow:inset 0 0 0 1px rgba(224,161,27,.34)}
.tk-cas .niveau.grave{background:rgba(232,120,40,.16);color:#f0913f;
  box-shadow:inset 0 0 0 1px rgba(232,120,40,.38)}
.tk-cas .niveau.critique{background:rgba(228,38,47,.16);color:var(--rouge-clair);
  box-shadow:inset 0 0 0 1px rgba(228,38,47,.42)}
.tk-cas .niveau.massacre{background:var(--rouge);color:#fff;box-shadow:none}

/* le compte, en gros : c'est l'information */
.tk-chiffre{display:flex;align-items:baseline;gap:9px;margin:8px 0 6px}
.tk-chiffre b{font-family:var(--disp);font-size:34px;font-weight:700;line-height:1;
  letter-spacing:-.03em;color:var(--ambre)}
.tk-chiffre span{font-family:var(--data);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tres-doux)}
.tk-cas.grave    .tk-chiffre b{color:#f0913f}
.tk-cas.critique .tk-chiffre b{color:var(--rouge-clair)}
.tk-cas.massacre .tk-chiffre b{color:var(--rouge)}

/* la jauge : on voit d'un coup d'oeil jusqu'où c'est monté */
.tk-jauge{height:5px;border-radius:999px;background:var(--voile);overflow:hidden;margin:2px 0 9px}
.tk-jauge i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--ambre),#f0913f 55%,var(--rouge));
  transition:width .5s cubic-bezier(.22,.9,.3,1)}

/* le relevé des dernières victimes */
.tk-faits{list-style:none;margin:8px 0 0;padding:10px 0 0;border-top:1px dashed var(--bord)}
.tk-faits li{display:flex;align-items:baseline;gap:9px;padding:3px 0;font-size:12.5px}
.tk-faits .h{font-family:var(--data);font-size:11px;color:var(--tres-doux);min-width:60px}
.tk-faits .v{color:var(--texte)}
.tk-faits .z{font-family:var(--data);font-size:10.5px;color:var(--tres-doux);margin-left:auto}
.tk-faits .plus{font-family:var(--data);font-size:10.5px;color:var(--tres-doux);
  letter-spacing:.1em;padding-top:5px}

/* quand le compteur d'un tireur vient de monter, la fiche accuse le coup */
.tk-cas.monte{animation:tk-coup .7s cubic-bezier(.22,.9,.3,1) both}
@keyframes tk-coup{
  0%  {background:rgba(228,38,47,.20);transform:translateX(-6px)}
  60% {background:rgba(228,38,47,.06);transform:translateX(0)}
  100%{background:transparent}
}
@media (prefers-reduced-motion: reduce){
  .alerte-bloc.tk-rafale[data-gravite="massacre"],.tk-cas.monte{animation:none}
}

/* ---------- derniers duels, sous le classement ---------- */
.mj-duels{margin-top:14px;padding-top:12px;border-top:1px solid var(--bord)}
.mj-dh{font-family:var(--data);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tres-doux);margin-bottom:6px}
.mj-liste-duels{list-style:none;margin:0;padding:0}
.mj-duel{display:grid;grid-template-columns:1fr auto 1fr 40px;align-items:center;gap:8px;
  padding:7px 10px;margin:2px -10px;border-radius:10px;font-size:13px;transition:background .2s}
.mj-duel:hover{background:var(--carte2)}
.mj-duel .mj-j{color:var(--tres-doux);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mj-duel .mj-j:first-child{text-align:right}
.mj-duel .mj-j.gagne{color:var(--texte);font-weight:600}
.mj-duel .mj-sc{font-family:var(--data);font-size:13px;font-weight:600;color:var(--doux);
  white-space:nowrap}
.mj-duel .mj-sc i{font-style:normal;color:var(--tres-doux);margin:0 5px}
.mj-duel.moi{background:rgba(228,38,47,.10);box-shadow:inset 0 0 0 1px rgba(228,38,47,.26)}
.mj-duel.moi .mj-sc{color:var(--rouge-clair)}


/* ---------- staff en jeu dans l'en-tete ---------- */
/* ---------- staff en jeu : quatrieme pastille ----------
   Le bandeau stylait ses pastilles par rang (`nth-of-type`) : la 5e, celle
   des bans, portait la barre de separation, la marge automatique et le rouge.
   En inserant une pastille apres la memoire, tous les rangs glissent d'un
   cran. La classe `avec-staff`, posee par le script uniquement quand la
   pastille existe vraiment, redonne ces regles au 6e rang et rend le 5e
   neutre. Si la route est absente, la classe n'est jamais posee et le
   bandeau reste exactement comme avant. */
@media (min-width: 701px) {
  header.avec-staff .pastille:nth-of-type(5){
    margin-left:0; border-left:0; padding-right:26px;
  }
  header.avec-staff .pastille:nth-of-type(5) b{ color:var(--texte); }

  header.avec-staff .pastille:nth-of-type(6){
    margin-left:auto; padding-right:26px; border-left:1px solid var(--bord);
  }
  header.avec-staff .pastille:nth-of-type(6) b{ color:var(--rouge); }

  /* aucun staff en jeu : le chiffre s'efface sans changer la mise en page */
  header .pastille#p-staff.vide b{ color:var(--tres-doux); }
  header .pastille#p-staff{ cursor:default; }
  header .pastille#p-staff[title]{ cursor:help; }
}

nav:not(#barre-bas) button#onglet-reseau,
nav:not(#barre-bas) button#onglet-anticheat{color:var(--rouge);font-weight:600}
nav:not(#barre-bas) button#onglet-reseau::before,
nav:not(#barre-bas) button#onglet-anticheat::before{background:var(--rouge)}
nav:not(#barre-bas) button#onglet-reseau:hover,
nav:not(#barre-bas) button#onglet-anticheat:hover{color:var(--fond)}
nav:not(#barre-bas) button#onglet-reseau.actif,
nav:not(#barre-bas) button#onglet-anticheat.actif{background:var(--rouge);border-color:var(--rouge);
  color:var(--fond);box-shadow:0 0 0 4px rgba(228,38,47,.14)}
button#onglet-reseau .pastille-reseau,
button#onglet-anticheat .pastille-reseau{display:inline-block;margin-left:9px;padding:1px 9px;border-radius:999px;
  background:var(--rouge);color:#fff;font-family:var(--data);font-size:11px;font-weight:600;vertical-align:1px}
button#onglet-reseau.actif .pastille-reseau,
button#onglet-anticheat.actif .pastille-reseau{background:var(--fond);color:var(--rouge)}
#vue-reseau .grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
#vue-reseau .carte.chaud{border-color:var(--rouge-sombre)}
#vue-reseau .carte.chaud .gros{color:var(--rouge-clair)}
#vue-reseau #liste-reseau{padding:2px 24px 18px}
#vue-reseau .alerte-item:first-child{border-top:0}
#vue-reseau .alerte-item .niveau{background:var(--voile);color:var(--rouge-clair)}
#vue-reseau .alerte-item .niveau.critique{background:var(--rouge);color:#fff}
#vue-reseau .alerte-item .pied button.grave{border-color:var(--rouge-sombre);color:var(--rouge-clair)}

/* ---------- GM actifs ---------- */
#t-gmactif .gm-depuis{font-family:var(--data);font-size:12.5px;color:#6fd6a4}
#t-gmactif .gm-par{color:var(--doux)}
#t-gmactif .gm-doute .gm-depuis{color:var(--ambre)}
#t-gmactif .marque-doute{display:inline-block;margin-left:10px;padding:1px 8px;border-radius:999px;
  font-style:normal;font-family:var(--data);font-size:10px;letter-spacing:.06em;
  background:rgba(224,161,27,.14);color:var(--ambre);cursor:help;vertical-align:1px}

/* ---------- bandeau : marges portees par les tuiles VISIBLES ----------
   `nth-of-type` compte les balises, pas ce qui est affiche : des qu'un
   compte n'a pas les droits serveur, joueurs / fps / memoire sont
   masquees, leur marge automatique ne pousse plus rien, et « staff en
   jeu » se retrouve colle au logo. redline-panneau.js marque la premiere
   et la derniere tuile visibles ; ces regles prennent le relais. Les
   regles nth-of-type restent au-dessus : sans le JavaScript, rien ne
   change. */
@media (min-width: 701px) {
  header.tuiles-rangees .pastille:not(.tuile-debut):not(.tuile-fin){
    margin-left:0; border-left:0;
  }
  header.tuiles-rangees .pastille.tuile-debut:not(.tuile-fin){
    margin-left:auto; border-left:0;
  }
  header.tuiles-rangees .pastille.tuile-fin:not(.tuile-debut){
    margin-left:auto; padding-right:26px; border-left:1px solid var(--bord);
  }
  header.tuiles-rangees .pastille:not(.tuile-fin) b{ color:var(--texte); }
  header.tuiles-rangees .pastille.tuile-fin b{ color:var(--rouge); }
}


/* ---------- la salle de jeux : un rail horizontal ----------
   Grille a deux rangees remplie EN COLONNES : carte, tableau, carte,
   tableau… Chaque colonne porte donc un jeu et son classement, et les
   deux defilent ensemble. La rangee du haut prend la hauteur de la plus
   grande carte, ce qui aligne tous les classements sur la meme ligne.
   `minmax(336px, 1fr)` : 336 est un PLANCHER. S'il reste de la place les
   colonnes s'etirent et il n'y a rien a faire defiler ; sinon elles
   retombent a 336 et le rail defile. */
@media (min-width: 701px) {
  .mj-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(336px,1fr);
    grid-template-rows:auto auto;gap:24px 22px;align-items:start;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scroll-behavior:smooth;
    padding:4px var(--marge) 12px;margin:0 0 42px}
  /* la barre native disparait : le curseur au-dessus la remplace */
  .mj-rail{scrollbar-width:none}
  .mj-rail::-webkit-scrollbar{display:none}
  .mj-rail>.mj-carte{grid-row:1;scroll-snap-align:start;height:100%}
  .mj-rail>.mj-tableau{grid-row:2}
  .mj-rail .mj-texte{flex:1}

  /* Titre et etiquette TOUJOURS sur deux lignes. Cote a cote, un titre
     long comme « Defense du spawn » renvoyait « meilleurs moderateurs »
     a la ligne et faisait descendre le premier rang d'une seule colonne :
     les classements voisins n'etaient plus alignes a l'interieur. */
  .mj-rail .mj-th{display:block}
  .mj-rail .mj-th b{display:block}
  .mj-rail .mj-th span{display:block;margin-left:0;margin-top:4px}

  /* ---------- le curseur, juste au-dessus du rail ---------- */
  .mj-pilote{display:flex;align-items:center;gap:16px;
    padding:0 var(--marge);margin:0 0 14px}
  .mj-pilote[hidden]{display:none}
  .mj-fleche{flex:none;width:38px;height:38px;border-radius:50%;
    background:var(--carte);border:1px solid var(--bord);color:var(--doux);
    font-size:17px;line-height:1;cursor:pointer;transition:.2s}
  .mj-fleche:hover:not(:disabled){border-color:var(--rouge);color:var(--rouge);
    background:rgba(228,38,47,.10)}
  .mj-fleche:disabled{opacity:.3;cursor:default}
  .mj-curseur{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;
    background:linear-gradient(90deg,var(--rouge) 0,var(--rouge) var(--part,0%),#22262e var(--part,0%));
    outline:none;cursor:pointer}
  .mj-curseur::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;
    border-radius:50%;background:var(--rouge);border:3px solid #131519;cursor:grab;
    box-shadow:0 0 0 0 rgba(228,38,47,.35);transition:box-shadow .25s,transform .15s}
  .mj-curseur::-webkit-slider-thumb:hover{box-shadow:0 0 0 7px rgba(228,38,47,.18);transform:scale(1.1)}
  .mj-curseur::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--rouge);
    border:3px solid #131519;cursor:grab}
  .mj-curseur:focus-visible{box-shadow:0 0 0 2px var(--fond),0 0 0 4px var(--rouge)}
  .mj-compteur{flex:none;font-family:var(--data);font-size:11px;letter-spacing:.14em;
    color:var(--tres-doux);min-width:74px;text-align:right}
  .mj-compteur b{color:var(--texte);font-weight:500}
}

#vue-reseau .sous-onglets,
#vue-anticheat .sous-onglets{display:flex;gap:8px;margin:0 0 14px}
#vue-reseau .sous-onglet,
#vue-anticheat .sous-onglet{padding:7px 18px;border-radius:999px;border:1px solid var(--bord);
  background:transparent;color:var(--doux);font-size:13px;font-weight:600;cursor:pointer}
#vue-reseau .sous-onglet:hover,
#vue-anticheat .sous-onglet:hover{color:var(--rouge-clair);border-color:var(--rouge-sombre)}
#vue-reseau .sous-onglet.actif,
#vue-anticheat .sous-onglet.actif{background:var(--rouge);border-color:var(--rouge);color:#fff}
#vue-reseau .sous-onglet .pastille-reseau,
#vue-anticheat .sous-onglet .pastille-reseau{display:inline-block;margin-left:8px;padding:1px 8px;
  border-radius:999px;background:var(--voile);color:var(--rouge-clair);font-family:var(--data);
  font-size:11px;font-weight:600;vertical-align:1px}
#vue-reseau .sous-onglet.actif .pastille-reseau,
#vue-anticheat .sous-onglet.actif .pastille-reseau{background:var(--fond);color:var(--rouge)}
#vue-reseau #liste-ping,#vue-reseau #exemptions-ping{padding:2px 24px 18px}
#vue-reseau #liste-ping .alerte-item:first-child{border-top:0}
#vue-reseau .banniere-ping{padding:14px 24px;margin-bottom:14px}
#vue-reseau .banniere-ping.chaud{border-color:var(--rouge-sombre)}
#vue-reseau .banniere-ping.chaud strong{color:var(--rouge-clair)}
#vue-reseau .alerte-item .niveau.avertissement{background:var(--voile);color:var(--rouge-clair)}
#vue-reseau .alerte-item .niveau.expulsion{background:var(--rouge);color:#fff}
#vue-reseau .alerte-item .niveau.suivi{background:var(--voile);color:var(--doux)}
#vue-reseau .alerte-item .niveau.exempte{background:var(--voile);color:var(--doux);margin-left:6px}
#vue-reseau .ping-titre{margin:18px 0 10px;font-size:12px;text-transform:uppercase;
  letter-spacing:.6px;color:var(--doux)}
#vue-reseau .ping-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
#vue-reseau .ping-form input[type=text],#vue-reseau .ping-form select{
  background:var(--carte2);border:1px solid var(--bord);border-radius:999px;
  padding:10px 16px;font-size:13px;color:var(--texte);font-family:inherit}
#vue-reseau .ping-form input[type=text]:focus,#vue-reseau .ping-form select:focus{
  outline:0;border-color:var(--rouge);box-shadow:0 0 0 3px rgba(228,38,47,.13)}
#vue-reseau .ping-form input[type=text]{flex:1 1 200px;min-width:160px}
#vue-reseau .ping-form select{min-width:130px;cursor:pointer}
#vue-reseau .ping-form button{padding:10px 20px}

/* ---- onglet Anti-cheat ---- */
#vue-anticheat .ac-banniere{margin:0 0 12px;padding:10px 14px;border-radius:8px;
  background:var(--rouge-sombre);color:#ffd7d8;font-size:13px}
#vue-anticheat .ac-table{width:100%;border-collapse:collapse}
#vue-anticheat .ac-table th{text-align:left;padding:8px 10px;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--doux);
  border-bottom:1px solid var(--bord)}
#vue-anticheat .ac-table td{padding:10px;border-bottom:1px solid var(--bord)}
#vue-anticheat .ac-ligne{cursor:pointer}
#vue-anticheat .ac-ligne:hover{background:var(--carte2)}
/* Echantillon faible mis en gras : c'est la seule colonne qui empeche une
   fausse alerte de faire des degats. */
#vue-anticheat .ac-table td b{color:var(--rouge-clair);font-weight:600}
#vue-anticheat .ac-verdict{display:inline-block;margin-left:8px;padding:1px 8px;
  border-radius:999px;font-size:11px;background:var(--carte2);color:var(--doux)}
#vue-anticheat .ac-ecarte{color:var(--doux)}
#vue-anticheat .ac-surveille{color:#ffd7d8;background:var(--rouge-sombre)}

/* ---- onglet Anti-cheat : ce qui n'existe nulle part ailleurs ---- */
#vue-anticheat .ac-titre{margin:18px 0 8px;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--doux)}
#vue-anticheat .ac-regle{display:inline-block;padding:2px 9px;border-radius:999px;
  background:var(--carte2);color:var(--doux);font-size:12px}
#vue-anticheat .ac-regle.ac-dur{background:var(--rouge-sombre);color:#ffd7d8}
/* L'echantillon faible est la seule colonne qui empeche une fausse alerte de
   faire des degats : il doit sauter aux yeux. */
#vue-anticheat .ac-faible{color:var(--rouge-clair);font-weight:600}
#vue-anticheat .ac-traite{opacity:.45}
#vue-anticheat .ac-actions{text-align:right;white-space:nowrap}
#vue-anticheat .ac-actions .action{margin-left:6px}
#vue-anticheat .ac-verdict{display:inline-block;margin-left:8px;padding:1px 8px;
  border-radius:999px;font-size:11px;background:var(--carte2);color:var(--doux)}
#vue-anticheat #ac-ref{display:block;margin:0 0 18px;font-size:15px;
  line-height:1.6;color:var(--doux)}
#vue-anticheat #ac-ref p{margin:0 0 4px}
#vue-anticheat #ac-ref b{color:var(--texte)}
#vue-anticheat .ac-echant{font-family:var(--data);font-size:13px;line-height:1.5}
#vue-anticheat .ac-echant .ac-faible{display:inline-block;margin-top:2px;
  font-family:inherit;font-size:12px}


/* ---------- Anti-cheat : alignement sur le vocabulaire du Reseau ----------
   Neuf regles, pas une de plus. Tout le reste de l'onglet n'utilise que des
   classes qui existaient deja (.grille, .carte, .gros, .alerte-item, .qui,
   .niveau, .txt, .quand, .pied, .vide) : c'est tout l'interet de la reprise,
   les deux onglets vieilliront ensemble. */

/* Cinq chiffres au lieu de quatre : sans ce plancher plus bas, la cinquieme
   carte tombe seule sur une deuxieme ligne. */
#vue-anticheat .grille{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* Le bandeau de regle est une .carte etiree, pas une carte de chiffre. */
#vue-anticheat .banniere-ac{padding:14px 24px;margin-bottom:14px}

/* Un signalement traite reste lisible mais recule. */
#vue-anticheat .alerte-item.traite{opacity:.45}

/* .niveau et ses variantes sont portees par #vue-reseau dans la feuille
   d'origine : hors de cet onglet, les badges retombaient en texte nu. */
#vue-anticheat .alerte-item .niveau{background:var(--voile);color:var(--rouge-clair)}
#vue-anticheat .alerte-item .niveau.critique{background:var(--rouge);color:#fff}
#vue-anticheat .alerte-item .niveau.avertissement{background:var(--voile);color:var(--rouge-clair)}
#vue-anticheat .alerte-item .niveau.surveille{background:var(--voile);color:var(--ambre);margin-left:6px}
#vue-anticheat .alerte-item .niveau.ecarte{background:var(--voile);color:var(--tres-doux);margin-left:6px}

/* Les anciens noms d'un joueur, en pastilles : une liste separee par des
   barres verticales devenait illisible des le quatrieme nom. */
#vue-anticheat .ac-nom{display:inline-block;margin:2px 4px 2px 0;padding:2px 10px;
  border-radius:999px;background:var(--voile);color:var(--doux);
  font-family:var(--data);font-size:12px}


/* ---------- Anti-cheat, sous-onglet Import ---------- */

/* La zone de collage. Police de donnees : on y colle des UUID, et un
   caractere ambigu entre O et 0 dans un identifiant coute un ban rate. */
#vue-anticheat .ac-collage{width:100%;min-height:190px;resize:vertical;
  background:var(--fond);border:1px solid var(--bord);border-radius:8px;
  color:var(--texte);font-family:var(--data);font-size:12.5px;line-height:1.55;
  padding:12px 14px;outline:none}
#vue-anticheat .ac-collage:focus{border-color:var(--rouge-sombre)}
#vue-anticheat .ac-collage::placeholder{color:var(--tres-doux)}

#vue-anticheat .ac-source{background:var(--fond);border:1px solid var(--bord);
  border-radius:999px;color:var(--texte);font-size:13px;padding:7px 14px;
  outline:none;min-width:260px}
#vue-anticheat .ac-source:focus{border-color:var(--rouge-sombre)}

#vue-anticheat .ac-outils{display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;margin:12px 0 0}
#vue-anticheat .ac-outils .doux{margin-left:auto}

#vue-anticheat .ac-uuid{font-family:var(--data);font-size:12px;color:var(--doux)}

#vue-anticheat .alerte-item .ac-motif,
#vue-anticheat .alerte-item .ac-serveur{width:100%;background:var(--fond);
  border:1px solid var(--bord);border-radius:6px;color:var(--texte);
  font-size:12.5px;padding:6px 10px;outline:none}
#vue-anticheat .alerte-item .ac-motif:focus,
#vue-anticheat .alerte-item .ac-serveur:focus{border-color:var(--rouge-sombre)}
#vue-anticheat .alerte-item .ac-serveur{margin-top:6px}

#vue-anticheat .alerte-item.decoche{opacity:.4}
#vue-anticheat .alerte-item .ac-case{float:right;margin-left:14px}

#vue-anticheat .alerte-item .niveau.nouveau{background:var(--voile);color:var(--doux)}
#vue-anticheat .alerte-item .niveau.connu{background:var(--rouge);color:#fff}
#vue-anticheat .alerte-item .niveau.banni{background:var(--voile);color:var(--tres-doux)}
#vue-anticheat .alerte-item .niveau.sans-nom{background:var(--voile);color:var(--ambre)}
#vue-anticheat .alerte-item .niveau.staff{background:var(--voile);color:var(--ambre)}

/* Les boutons du panneau ne sont styles que dans .alerte-item .pied. Ceux
   de l'import vivent ailleurs : on reprend exactement les memes valeurs
   plutot que d'inventer un deuxieme aspect de bouton. */
#vue-anticheat .ac-outils button,
#vue-anticheat .ac-actions button{background:var(--carte2);color:var(--texte);
  border:1px solid var(--bord);border-radius:7px;padding:9px 15px;
  font-size:12.5px;min-height:40px;transition:.2s}
#vue-anticheat .ac-outils button:hover:not(:disabled),
#vue-anticheat .ac-actions button:hover:not(:disabled){border-color:var(--rouge);
  color:var(--rouge-clair)}
#vue-anticheat .ac-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px}
#vue-anticheat .ac-actions button.majeur{border-color:var(--rouge);
  color:var(--rouge);font-weight:600}
#vue-anticheat .ac-outils button:disabled,
#vue-anticheat .ac-actions button:disabled{opacity:.35;cursor:default;
  border-color:var(--bord);color:var(--tres-doux)}
#vue-anticheat .alerte-item .ac-motif:disabled,
#vue-anticheat .alerte-item .ac-serveur:disabled{opacity:.5;cursor:default}

/* Avant l'analyse, la rangee de chiffres, le bandeau et la liste sont
   vides : sans ca ils s'affichent en barres arrondies creuses entre la
   zone de collage et l'historique. */
#vue-anticheat #ac-chiffres-import:empty,
#vue-anticheat #ac-regle-import:empty,
#vue-anticheat #ac-liste-import:empty{display:none}

/* ==================================================================== *
 * CADENCE DE TIR                                                       *
 *                                                                      *
 * La courbe est un SVG en coordonnees 0..1000 x 0..210 : l'abscisse     *
 * est la concentration de 0 a 100, donc la graduation 80 tombe pile     *
 * sur le bord de la zone teintee. Les tuiles joueurs reprennent le      *
 * meme axe pour que l'oeil ne change pas de repere.                    *
 * ==================================================================== */
/* Le squelette pose .carte sur le conteneur de chaque section. Pour la
   cadence le contenu apporte ses propres cadres, sinon on empile deux
   encadres l'un dans l'autre. */
#vue-anticheat #ac-liste-cadence{background:none;border:0;padding:0}
#vue-anticheat .cad-bloc{background:var(--carte);border:1px solid var(--bord);
  border-radius:16px;padding:20px 22px 16px;margin:0 0 22px}
#vue-anticheat .cad-tete,#vue-anticheat .cad-entete{display:flex;align-items:baseline;
  justify-content:space-between;gap:14px;flex-wrap:wrap}
#vue-anticheat .cad-tete{margin:0 0 18px}
#vue-anticheat .cad-entete{margin:0 0 12px}
#vue-anticheat .cad-titre{font-family:var(--data);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tres-doux)}
#vue-anticheat .cad-legende{display:flex;gap:16px;flex-wrap:wrap;
  font-family:var(--data);font-size:10.5px;color:var(--tres-doux)}
#vue-anticheat .cad-legende i{font-style:normal;display:inline-flex;align-items:center;gap:6px}
#vue-anticheat .cad-legende i::before{content:"";width:11px;height:11px;border-radius:3px;
  background:var(--rouge)}
#vue-anticheat .cad-legende i.zone::before{background:rgba(111,17,22,.85)}
#vue-anticheat .cad-legende i.repere::before{width:0;height:13px;border-radius:0;
  background:none;border-left:1px dashed var(--doux)}
#vue-anticheat .cad-legende i.max::before{width:2px;height:12px;border-radius:1px;
  background:var(--rouge-clair)}
#vue-anticheat .cad-legende i.seuil::before{width:0;height:13px;border-radius:0;
  background:none;border-left:1px dashed var(--rouge-clair)}
#vue-anticheat .cad-note{margin:16px 0 0;font-size:13px;line-height:1.6;color:var(--doux);
  border-top:1px solid var(--bord);padding-top:14px}
#vue-anticheat .cad-note b{color:var(--texte);font-weight:600}

#vue-anticheat .cc-cadre{position:relative;overflow-x:auto}
#vue-anticheat .cc-cadre svg{display:block;width:100%;height:auto;min-width:520px}
#vue-anticheat .cc-eti{font-family:var(--data);font-size:10px;fill:var(--tres-doux)}
#vue-anticheat .cc-eti.fort{fill:var(--texte);font-size:11.5px}
#vue-anticheat .cc-eti.rep{fill:var(--doux);font-size:9.5px}
#vue-anticheat .cc-eti.zone{fill:var(--rouge-clair);font-size:9.5px;letter-spacing:.12em}

/* Axe 0..100 commun aux tuiles : barre = moyenne, trait clair = meilleure
   serie, pointille = limite des 80 pct, fond rouge = zone macro. */
#vue-anticheat .tj-axe{position:relative;height:30px}
#vue-anticheat .tj-piste{position:absolute;left:0;right:0;top:6px;height:8px;
  border-radius:999px;background:var(--carte2);overflow:hidden}
#vue-anticheat .tj-piste i{position:absolute;top:0;bottom:0;left:0;
  background:linear-gradient(90deg,var(--rouge-sombre),var(--rouge))}
#vue-anticheat .tj-piste em{position:absolute;top:0;bottom:0;left:80%;right:0;
  background:rgba(111,17,22,.55)}
#vue-anticheat .tj-max{position:absolute;top:2px;width:2px;height:16px;border-radius:1px;
  background:var(--rouge-clair);transform:translateX(-1px)}
#vue-anticheat .tj-seuil{position:absolute;top:2px;left:80%;width:0;height:16px;
  border-left:1px dashed var(--rouge-clair);opacity:.7}
#vue-anticheat .tj-grad{position:absolute;left:0;right:0;top:19px;height:11px}
#vue-anticheat .tj-grad span{position:absolute;top:0;transform:translateX(-50%);
  font-family:var(--data);font-size:9px;color:var(--tres-doux)}

#vue-anticheat .t1{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
#vue-anticheat .t1-c{background:var(--carte);border:1px solid var(--bord);
  border-radius:14px;padding:15px 16px 13px;transition:border-color .2s}
#vue-anticheat .t1-c:hover{border-color:var(--rouge-sombre)}
#vue-anticheat .t1-c.chaud{border-color:var(--rouge-sombre);
  background:linear-gradient(180deg,rgba(111,17,22,.2),var(--carte))}
#vue-anticheat .t1-h{display:flex;align-items:center;gap:9px;margin-bottom:10px}
#vue-anticheat .t1-r{font-family:var(--data);font-size:11px;color:var(--tres-doux);
  border:1px solid var(--bord);border-radius:6px;padding:2px 7px}
#vue-anticheat .t1-n{font-family:var(--disp);font-size:18px;font-weight:600;
  letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#vue-anticheat .t1-g{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
#vue-anticheat .t1-g b{font-family:var(--data);font-size:33px;font-weight:400;
  line-height:1;letter-spacing:-.02em}
#vue-anticheat .t1-g span{font-family:var(--data);font-size:11px;color:var(--tres-doux)}
#vue-anticheat .t1-m{font-family:var(--data);font-size:10.5px;color:var(--tres-doux);
  line-height:1.7;margin-top:8px}
#vue-anticheat .t1-c button{width:100%;margin-top:11px;background:none;cursor:pointer;
  border:1px solid var(--bord);border-radius:8px;color:var(--doux);padding:9px;
  font-size:12.5px;min-height:38px;transition:.2s}
#vue-anticheat .t1-c button:hover{border-color:var(--rouge);color:var(--rouge-clair)}

@media(max-width:760px){
  #vue-anticheat .cad-bloc{padding:16px 14px 12px}
  #vue-anticheat .t1{grid-template-columns:1fr}
}