/* Superviseur Speuz — feuille unique, aucune dependance externe. */
:root{
/* ⚠ `color-scheme` DOIT suivre le theme, et il ne le faisait pas.
Les deux index.html annoncent
sans `background` prend le `buttonface` sombre, rgb(107,107,107), et
`.jx-lien` affichait donc l'encre quasi noire de la charte sur un gris
moyen, a 3,5:1, sur 167 noeuds du seul onglet Objets de Terraria. Les
etaient du meme lot. Un correctif ponctuel existait
deja pour UN element (`.ak-esp` dans jeux.css) : c'etait le symptome. */
color-scheme:light;
--fond:#F2F5F7; --fond-2:#E9EEF2; --carte:#FFFFFF; --carte-2:#F7FAFB;
--bord:#DDE5EA; --bord-fort:#C6D2DA;
/* --creux-pur est la couleur PLEINE du fond en creux ; --creux est ce que
tout le monde consomme. Les deux sont confondus partout sauf sur la page
Palworld, qui rend --creux semi-transparent pour laisser passer son
calque (theme.css) — et qui ne peut pas le faire sans cette seconde
source, `--creux:color-mix(...var(--creux)...)` etant un cycle. */
--creux-pur:#EDF2F5; --creux:var(--creux-pur);
--texte:#0E1519; --texte-2:#485964; --texte-3:#7C8D98;
--accent:#0B8C7A; --accent-fond:#0B8C7A14; --accent-bord:#0B8C7A44;
--ok:#1B8F5A; --ok-fond:#1B8F5A14;
--warn:#A86A00; --warn-fond:#A86A0018;
--crit:#C0392B; --crit-fond:#C0392B16;
--info:#2563C9; --violet:#6D4AC4;
/* L'encre a poser SUR un aplat semantique plein (bouton danger, pastille
d'alerte). En clair les aplats sont sombres, le blanc y tient : 4,1 a
5,7:1. En sombre ils sont vifs et le blanc tombe a 1,86:1 — d'ou l'encre
sombre, qui remonte les memes aplats a 7,4-10,5:1. */
--sur-plein:#FFFFFF;
--ombre:0 1px 2px #0f172a0d, 0 4px 16px #0f172a0a;
--ombre-forte:0 2px 6px #0f172a12, 0 12px 36px #0f172a14;
--rail:236px; --r:12px; --r-s:8px;
--f:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
--fm:"JetBrains Mono","SF Mono",ui-monospace,"DejaVu Sans Mono",Menlo,monospace;
}
:root[data-theme="sombre"],
html:not([data-theme="clair"]) body.auto-sombre{
color-scheme:dark;
--fond:#0A0D10; --fond-2:#0D1116; --carte:#12181E; --carte-2:#171F26;
--bord:#222C35; --bord-fort:#31404C;
/* --creux est REDIT ici, pas seulement --creux-pur : ce bloc vise aussi
`body.auto-sombre`, et une substitution declaree sur :root a deja ete
resolue avec la valeur claire quand elle arrive sur . */
--creux-pur:#0E1418; --creux:var(--creux-pur);
--texte:#E6EDF3; --texte-2:#9FB0BD; --texte-3:#66798700;
--texte-3:#687985;
--accent:#2FD4BC; --accent-fond:#2FD4BC1A; --accent-bord:#2FD4BC4D;
--ok:#3FD68A; --ok-fond:#3FD68A18;
--warn:#F0B429; --warn-fond:#F0B42918;
--crit:#FF7566; --crit-fond:#FF756618;
--info:#5AA9FF; --violet:#A78BFA;
--sur-plein:#0A0D10;
--ombre:0 1px 2px #0006, 0 4px 18px #00000040;
--ombre-forte:0 2px 8px #0007, 0 16px 44px #00000055;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; background:var(--fond); color:var(--texte);
font:15px/1.5 var(--f); -webkit-font-smoothing:antialiased;
overflow:hidden;
}
button,input,select{font:inherit;color:inherit}
a{color:var(--accent)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--bord-fort);border-radius:6px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
/* ------------------------------------------------------------------ ossature */
.app{display:grid;grid-template-columns:var(--rail) 1fr;height:100vh}
.rail{
background:var(--fond-2);border-right:1px solid var(--bord);
display:flex;flex-direction:column;min-height:0;
}
.marque{
display:flex;align-items:center;gap:10px;padding:16px 16px 14px;
border-bottom:1px solid var(--bord);
}
.marque .logo{
width:30px;height:30px;border-radius:9px;flex:0 0 auto;
background:linear-gradient(140deg,var(--accent),var(--violet));
display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px;
box-shadow:0 2px 10px var(--accent-fond);
}
.marque b{display:block;font-size:14px;letter-spacing:-.01em;line-height:1.2}
.marque small{display:block;color:var(--texte-3);font-size:11.5px;font-family:var(--fm)}
nav{flex:1;overflow-y:auto;padding:10px 10px 6px}
nav .groupe{
font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
color:var(--texte-3);padding:14px 8px 6px;font-weight:600;
}
nav a{
display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-s);
color:var(--texte-2);text-decoration:none;font-size:14px;font-weight:500;
position:relative;transition:background .12s,color .12s;
}
nav a:hover{background:var(--carte);color:var(--texte)}
nav a.actif{background:var(--accent-fond);color:var(--accent);font-weight:600}
nav a.actif::before{
content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--accent);
}
nav a svg{width:17px;height:17px;flex:0 0 auto;opacity:.85}
nav a .pastille{
margin-left:auto;width:7px;height:7px;border-radius:50%;flex:0 0 auto;
}
nav a .pastille.critique{background:var(--crit);box-shadow:0 0 0 3px var(--crit-fond);animation:pulse 1.8s infinite}
nav a .pastille.alerte{background:var(--warn);box-shadow:0 0 0 3px var(--warn-fond)}
nav a .cpt{margin-left:auto;font-family:var(--fm);font-size:11px;color:var(--texte-3)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.pied{
border-top:1px solid var(--bord);padding:11px 14px;font-size:11.5px;
color:var(--texte-3);font-family:var(--fm);display:grid;gap:3px;
}
.pied .l{display:flex;justify-content:space-between;gap:8px}
.pied b{color:var(--texte-2);font-weight:500}
/* --------------------------------------------------------------------- entete */
.principal{display:flex;flex-direction:column;min-width:0;min-height:0}
header{
display:flex;align-items:center;gap:14px;padding:0 22px;height:58px;
border-bottom:1px solid var(--bord);background:var(--carte);flex:0 0 auto;
}
header h1{font-size:17px;margin:0;font-weight:650;letter-spacing:-.015em}
header .sous{color:var(--texte-3);font-size:12.5px;margin-left:-6px}
.espace{flex:1}
.sante{
display:flex;align-items:center;gap:7px;padding:5px 11px;border-radius:100px;
font-size:12.5px;font-weight:600;border:1px solid transparent;cursor:pointer;
}
.sante .point{width:8px;height:8px;border-radius:50%;background:currentColor}
.sante.ok{color:var(--ok);background:var(--ok-fond);border-color:transparent}
.sante.alerte{color:var(--warn);background:var(--warn-fond)}
.sante.critique{color:var(--crit);background:var(--crit-fond)}
.sante.critique .point{animation:pulse 1.5s infinite}
.segment{display:flex;background:var(--creux);border-radius:var(--r-s);padding:2px;border:1px solid var(--bord)}
.segment button{
border:0;background:transparent;color:var(--texte-3);padding:4px 10px;
border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--fm);
}
.segment button.actif{background:var(--carte);color:var(--texte);box-shadow:var(--ombre)}
.bouton{
display:inline-flex;align-items:center;gap:7px;border:1px solid var(--bord-fort);
background:var(--carte);color:var(--texte-2);padding:6px 12px;border-radius:var(--r-s);
font-size:13px;font-weight:550;cursor:pointer;transition:.12s;white-space:nowrap;
}
.bouton:hover:not(:disabled){border-color:var(--accent-bord);color:var(--accent);background:var(--accent-fond)}
.bouton:disabled{opacity:.45;cursor:default}
.bouton.plein{background:var(--accent);color:#031;border-color:transparent;font-weight:650}
.bouton.plein:hover{filter:brightness(1.08);color:#031}
.bouton.mini{padding:3px 8px;font-size:12px}
.bouton svg{width:14px;height:14px}
/* ----------------------------------------------------------------------- vues */
main{flex:1;overflow-y:auto;padding:20px 22px 40px;min-height:0;scroll-behavior:smooth}
.vue{display:none}
.vue.actif{display:block}
.vue.neuve{animation:entre .22s ease} /* seulement au changement de vue */
@keyframes entre{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.grille{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-bottom:14px}
.grille.large{grid-template-columns:repeat(auto-fill,minmax(430px,1fr))}
.grille.duo{grid-template-columns:repeat(auto-fit,minmax(520px,1fr))}
.grille.vitaux{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.pleine{grid-column:1/-1}
.carte{
background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);
padding:15px 16px;box-shadow:var(--ombre);min-width:0;position:relative;
transition:border-color .15s;
}
.carte.souci{border-color:var(--crit);box-shadow:0 0 0 1px var(--crit-fond),var(--ombre)}
.carte.tiede{border-color:var(--warn)}
.carte h3{
margin:0 0 2px;font-size:11px;font-weight:650;text-transform:uppercase;
letter-spacing:.075em;color:var(--texte-3);display:flex;align-items:center;gap:7px;
}
.carte h3 .espace{flex:1}
.tete{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.tete h3{margin:0}
/* -------------------------------------------------------------------- vitaux */
.vital .val{
font-family:var(--fm);font-size:28px;font-weight:600;letter-spacing:-.035em;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
line-height:1.1;margin-top:6px;font-variant-numeric:tabular-nums;
}
.vital .val .u{font-size:14px;color:var(--texte-3);font-weight:500;margin-left:2px}
.vital .sub{font-size:11.5px;color:var(--texte-3);margin-top:3px;font-family:var(--fm);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vital .spark{margin-top:9px;height:34px}
.vital.ok .val{color:var(--texte)}
.vital.alerte .val{color:var(--warn)}
.vital.critique .val{color:var(--crit)}
/* --------------------------------------------------------------------- jauges */
.barre{height:7px;border-radius:100px;background:var(--creux);overflow:hidden;display:flex}
.barre i{display:block;height:100%;transition:width .4s ease}
.barre i.a{background:var(--accent)}
.barre i.b{background:var(--accent-bord)}
.barre i.w{background:var(--warn)}
.barre i.c{background:var(--crit)}
.barre i.v{background:var(--violet)}
.barre i.i{background:var(--info)}
.legende{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:9px;font-size:11.5px;color:var(--texte-3)}
.legende span{display:inline-flex;align-items:center;gap:5px;font-family:var(--fm)}
.legende i{width:8px;height:8px;border-radius:2px;display:inline-block}
.legende b{color:var(--texte-2);font-weight:600}
.kv{display:flex;flex-wrap:wrap;gap:6px 20px;margin:10px 0 0;font-size:12.5px;color:var(--texte-3)}
.kv span{font-family:var(--fm)}
.kv b{color:var(--texte);font-weight:600;font-variant-numeric:tabular-nums}
.kv b.ok{color:var(--ok)} .kv b.warn{color:var(--warn)} .kv b.bad{color:var(--crit)}
/* --------------------------------------------------------------------- coeurs */
.coeurs{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;margin-top:4px}
.coeur{
border-radius:6px;background:var(--creux);padding:5px 0 4px;text-align:center;
border:1px solid var(--bord);position:relative;overflow:hidden;
}
.coeur .jauge{position:absolute;inset:auto 0 0 0;background:var(--accent);opacity:.22;transition:height .4s}
.coeur .n{font-size:9.5px;color:var(--texte-3);font-family:var(--fm);position:relative}
.coeur .p{font-size:13px;font-family:var(--fm);font-weight:600;position:relative;font-variant-numeric:tabular-nums}
.coeur.chaud .jauge{background:var(--warn)} .coeur.tres-chaud .jauge{background:var(--crit)}
/* ------------------------------------------------------------------- tableaux */
.tw{overflow-x:auto;margin-top:10px;border-radius:var(--r-s);border:1px solid var(--bord)}
table{border-collapse:collapse;width:100%;font-size:13px}
thead th{
text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
color:var(--texte-3);font-weight:650;padding:8px 11px;background:var(--carte-2);
border-bottom:1px solid var(--bord);white-space:nowrap;position:sticky;top:0;z-index:1;
}
thead th.triable{cursor:pointer;user-select:none}
thead th.triable:hover{color:var(--accent)}
thead th .fleche{opacity:.45;font-size:9px}
tbody td{padding:7px 11px;border-bottom:1px solid var(--bord);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--carte-2)}
td.num,th.num{text-align:right;font-family:var(--fm);font-variant-numeric:tabular-nums;white-space:nowrap}
td.mono{font-family:var(--fm);font-size:12px}
td.tronque{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tw.haut{max-height:420px;overflow-y:auto}
/* --------------------------------------------------------------------- pilules */
.pilule{
display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:100px;
font-size:11px;font-weight:650;background:var(--creux);color:var(--texte-3);
font-family:var(--f);white-space:nowrap;letter-spacing:.01em;
}
.pilule.ok{background:var(--ok-fond);color:var(--ok)}
.pilule.alerte{background:var(--warn-fond);color:var(--warn)}
.pilule.critique{background:var(--crit-fond);color:var(--crit)}
.pilule.info{background:var(--accent-fond);color:var(--accent)}
.pilule.encours{background:var(--accent-fond);color:var(--accent)}
.tourne{
width:9px;height:9px;border:1.6px solid currentColor;border-top-color:transparent;
border-radius:50%;animation:tour .7s linear infinite;
}
@keyframes tour{to{transform:rotate(360deg)}}
/* -------------------------------------------------------------------- alertes */
.alertes{display:grid;gap:8px}
.alerte-l{
display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border-radius:var(--r-s);
border:1px solid var(--bord);background:var(--carte-2);
}
.alerte-l.critique{border-color:var(--crit);background:var(--crit-fond)}
.alerte-l.alerte{border-color:var(--warn);background:var(--warn-fond)}
.alerte-l .ic{
width:20px;height:20px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
font-size:12px;font-weight:700;margin-top:1px;
}
.alerte-l.critique .ic{background:var(--crit);color:var(--sur-plein,#fff)}
.alerte-l.alerte .ic{background:var(--warn);color:var(--sur-plein,#fff)}
.alerte-l .t{font-weight:600;font-size:13.5px}
.alerte-l .d{color:var(--texte-2);font-size:12.5px;margin-top:2px}
.alerte-l .dom{margin-left:auto;font-size:11px;color:var(--texte-3);font-family:var(--fm)}
.journal{display:grid;gap:1px;background:var(--bord);border:1px solid var(--bord);border-radius:var(--r-s);overflow:hidden}
.journal .e{display:flex;gap:11px;align-items:baseline;padding:7px 12px;background:var(--carte);font-size:12.5px}
.journal .e .h{font-family:var(--fm);font-size:11.5px;color:var(--texte-3);flex:0 0 auto;width:62px}
.journal .e .n{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--texte-3)}
.journal .e.critique .n{background:var(--crit)} .journal .e.alerte .n{background:var(--warn)}
.journal .e.info .n{background:var(--ok)}
.journal .e .dom{margin-left:auto;color:var(--texte-3);font-size:11px;font-family:var(--fm)}
/* ------------------------------------------------------------------ graphiques */
.graph{position:relative;width:100%}
.graph svg{display:block;width:100%;height:100%;overflow:visible}
.spark svg{overflow:hidden}
.graph .curseur{
position:absolute;top:0;bottom:0;width:1px;background:var(--bord-fort);
pointer-events:none;opacity:0;
}
.bulle{
position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-100%);
background:var(--carte);border:1px solid var(--bord-fort);border-radius:var(--r-s);
padding:7px 10px;font-size:12px;box-shadow:var(--ombre-forte);white-space:nowrap;z-index:9;
font-family:var(--fm);transition:opacity .1s;
}
.bulle .h{color:var(--texte-3);font-size:11px;margin-bottom:3px}
.bulle .s{display:flex;align-items:center;gap:6px}
.bulle .s i{width:8px;height:2px;border-radius:2px}
.bulle .s b{margin-left:auto;font-variant-numeric:tabular-nums}
.axe{font-family:var(--fm);font-size:10px;fill:var(--texte-3)}
.grille-y line{stroke:var(--bord);stroke-width:1;stroke-dasharray:2 4}
/* ------------------------------------------------------------------- details */
details{margin-top:9px;border-top:1px solid var(--bord);padding-top:8px}
details summary{
cursor:pointer;font-size:12.5px;color:var(--texte-2);font-weight:550;
list-style:none;display:flex;align-items:center;gap:6px;padding:2px 0;
}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"›";transition:transform .15s;display:inline-block;color:var(--texte-3);font-size:15px}
details[open] summary::before{transform:rotate(90deg)}
details summary:hover{color:var(--accent)}
.vide{color:var(--texte-3);font-size:13px;padding:14px 0;text-align:center;font-style:italic}
.err{
color:var(--crit);background:var(--crit-fond);border:1px solid var(--crit);
border-radius:var(--r-s);padding:9px 12px;font-size:12.5px;font-family:var(--fm);
margin-top:9px;white-space:pre-wrap;word-break:break-word;
}
.note{color:var(--texte-3);font-size:12px;margin-top:9px;line-height:1.45}
.meta{color:var(--texte-3);font-size:11.5px;font-family:var(--fm);margin-top:10px;
padding-top:8px;border-top:1px solid var(--bord)}
.filtre{
border:1px solid var(--bord);background:var(--creux);border-radius:var(--r-s);
padding:5px 10px;font-size:12.5px;width:180px;
}
.filtre:focus{outline:none;border-color:var(--accent-bord);background:var(--carte)}
.puce-sys{
display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;
vertical-align:baseline;
}
@media(max-width:940px){
.app{grid-template-columns:64px 1fr}
.marque b,.marque small,nav .groupe,nav a span,.pied{display:none}
nav a{justify-content:center;padding:10px 0}
header{padding:0 14px} main{padding:14px}
}
/* ----------------------------------------------------------------- modale */
.voile{
position:fixed;inset:0;background:#000a;backdrop-filter:blur(3px);
display:grid;place-items:center;z-index:50;padding:24px;
animation:entre .14s ease;
}
.modale{
background:var(--carte);border:1px solid var(--bord-fort);border-radius:var(--r);
box-shadow:var(--ombre-forte);max-width:760px;width:100%;max-height:86vh;
display:flex;flex-direction:column;overflow:hidden;
}
.modale > header{
padding:15px 20px;border-bottom:1px solid var(--bord);display:flex;
align-items:center;gap:12px;height:auto;background:var(--carte-2);
}
.modale > header h2{margin:0;font-size:16px;font-weight:650;letter-spacing:-.01em}
.modale .corps{padding:18px 20px;overflow-y:auto;flex:1;min-height:0}
.modale > footer{
padding:13px 20px;border-top:1px solid var(--bord);display:flex;
align-items:center;gap:10px;background:var(--carte-2);
}
.modale.danger > header{background:var(--crit-fond);border-bottom-color:var(--crit)}
.modale.danger > header h2{color:var(--crit)}
.saisie{
border:1px solid var(--bord-fort);background:var(--creux);border-radius:var(--r-s);
padding:7px 11px;font-family:var(--fm);font-size:13px;width:200px;letter-spacing:.06em;
}
.saisie:focus{outline:none;border-color:var(--crit);background:var(--carte)}
.bouton.danger{background:var(--crit);color:var(--sur-plein,#fff);border-color:transparent;font-weight:650}
.bouton.danger:hover:not(:disabled){filter:brightness(1.1);color:var(--sur-plein,#fff);background:var(--crit)}
.bouton.danger:disabled{opacity:.4}
/* --------------------------------------------------------------- onglets */
.onglets{display:flex;gap:2px;border-bottom:1px solid var(--bord);margin-bottom:16px}
.onglets button{
border:0;background:transparent;color:var(--texte-3);padding:9px 15px;
font-size:13.5px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;
margin-bottom:-1px;display:flex;align-items:center;gap:7px;
}
.onglets button:hover{color:var(--texte-2)}
.onglets button.actif{color:var(--accent);border-bottom-color:var(--accent)}
.onglets button .cpt{
background:var(--creux);border-radius:100px;padding:1px 7px;font-size:11px;
font-family:var(--fm);color:var(--texte-3);
}
.onglets button.actif .cpt{background:var(--accent-fond);color:var(--accent)}
/* --------------------------------------------------------- liste systemes */
.systemes{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px}
.sys{
border:1px solid var(--bord);border-radius:var(--r-s);padding:10px 12px;
background:var(--carte-2);cursor:pointer;text-align:left;transition:.12s;
}
.sys:hover{border-color:var(--accent-bord);background:var(--accent-fond)}
.sys.actif{border-color:var(--accent);background:var(--accent-fond)}
.sys b{display:block;font-size:13.5px;font-weight:600;color:var(--texte)}
.sys span{display:block;font-size:11.5px;color:var(--texte-3);font-family:var(--fm);margin-top:2px}
/* ------------------------------------------------------------- selection */
.barre-sel{
display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r-s);
background:var(--accent-fond);border:1px solid var(--accent-bord);margin-top:12px;
position:sticky;bottom:0;z-index:2;backdrop-filter:blur(6px);
}
.barre-sel b{font-family:var(--fm);font-variant-numeric:tabular-nums}
td.coche{width:34px;text-align:center;padding-top:6px}
input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
tr.choisi{background:var(--accent-fond)}
tr.bloque td{opacity:.5}
.raison{font-size:11.5px;color:var(--warn);font-family:var(--f)}
/* Onglet Toutes machines : le titre du jeu en tete, le nom de fichier dessous.
Le titre dit QUEL jeu, le fichier dit LEQUEL — region, disque, revision.
Regle portee par `.titre-jeu` et non par `.fichier` seul : l'onglet Parcourir
separe deja ses lignes par un