/* =========================================================
   terpsiphone — habillage « BIOS Setup » partage par /admin/ et /gestion/.
   Une seule feuille : changer une couleur ici les change des deux cotes.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* =========================================================
   terpsiphone — console d'administration, habillage « BIOS Setup »
   Palette et disposition d'un setup AMI/Award : fond bleu, cadres gris,
   titres cyan, valeurs blanches, surbrillance jaune, volet d'aide a
   droite, barre de touches en bas.
   ========================================================= */
:root{
  --bleu:#0000a8;        /* fond ecran */
  --bleu2:#000080;       /* fond des zones creuses */
  --gris:#b4b4b4;        /* cadres et barres */
  --gris2:#7d7d7d;       /* ombre des cadres */
  --txt:#c8c8c8;         /* texte courant */
  --blanc:#ffffff;       /* valeurs */
  --cyan:#55ffff;        /* titres de section */
  --jaune:#ffff55;       /* selection / accent */
  --rouge:#ff5555;       /* alertes */
  --vert:#55ff55;        /* conforme */
  --noir:#000000;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bleu);color:var(--txt);
  font-family:'VT323','IBM Plex Mono',ui-monospace,monospace;
  font-size:19px;line-height:1.35;letter-spacing:.02em;
  padding:10px 10px 46px;min-height:100vh;
  -webkit-font-smoothing:none;font-smooth:never}

/* ===== Barre de titre ===== */
header{background:var(--gris);color:var(--noir);display:flex;align-items:baseline;gap:16px;
  padding:1px 10px;flex-wrap:wrap}
header .brand{font-size:19px;letter-spacing:.04em}
header .brand em{font-style:normal}
header .who{font-size:18px;color:#202020}
header .spacer{flex:1}
header a.lk,header button.lk{background:none;border:none;color:var(--noir);font-family:inherit;
  font-size:18px;padding:0 4px;margin-left:8px;cursor:pointer;text-decoration:none}
header a.lk:hover,header button.lk:hover{background:var(--noir);color:var(--gris)}

#bandeau{display:none;background:var(--bleu2);color:var(--jaune);font-size:18px;
  padding:4px 12px;border-left:2px solid var(--gris);border-right:2px solid var(--gris)}
#bandeau.on{display:block}

/* ===== Menu horizontal (onglets du setup) ===== */
.shell{display:block;max-width:1180px;margin:0 auto;
  border:2px solid var(--gris);border-top:none;background:var(--bleu)}
nav.side{display:flex;flex-wrap:wrap;background:var(--gris);color:var(--noir);
  padding:0 6px 1px;gap:0}
nav.side .grp{display:none}
nav.side button{background:none;border:none;color:var(--noir);font-family:inherit;font-size:19px;
  padding:1px 13px;cursor:pointer;white-space:nowrap;display:flex;align-items:baseline;gap:6px}
nav.side button:hover{background:#d8d8d8}
nav.side button.on{background:var(--bleu);color:var(--blanc)}
nav.side button .n{font-size:17px;color:#4a4a4a}
nav.side button.on .n{color:var(--jaune)}

/* ===== Corps : contenu + volet d'aide ===== */
.body{display:flex;align-items:stretch;gap:0;min-height:62vh}
main{flex:1;min-width:0;padding:12px 16px 30px}
aside#aide{width:268px;flex:none;border-left:2px solid var(--gris);padding:12px 14px;
  color:var(--cyan);font-size:18px;line-height:1.4}
aside#aide .ah{color:var(--blanc);border-bottom:1px solid var(--gris2);margin-bottom:8px;padding-bottom:3px}
aside#aide .at{color:var(--jaune);margin-bottom:5px}

h1{font-size:21px;font-weight:400;color:var(--blanc);margin-bottom:2px}
h1:before{content:"► "}
.sub{font-size:18px;color:var(--txt);margin-bottom:16px;max-width:80ch;line-height:1.4}
h2{font-size:19px;font-weight:400;color:var(--cyan);margin:20px 0 6px;
  border-bottom:1px solid var(--gris2);padding-bottom:1px}
h2:before{content:"── "}
.grid+h2{margin-top:20px}

.card{background:none;border:none;padding:2px 0 0}
.grid{display:block}

/* ===== Lignes « libelle .... [valeur] » ===== */
.stat{display:flex;align-items:baseline;gap:10px;padding:1px 0}
.stat .k{color:var(--txt);width:270px;flex:none;white-space:nowrap;overflow:hidden;
  /* ligne de points facon setup, sans deborder sur la valeur */
  background:linear-gradient(to right,var(--gris2) 2px,transparent 2px) repeat-x 0 100%;
  background-size:6px 1px}
.stat .v{color:var(--blanc)}
.stat .v:before{content:"[ "}
.stat .v:after{content:" ]"}
.stat .v small{color:var(--txt)}
.stat .d{color:var(--cyan);margin-left:auto;font-size:18px}

/* ===== Formulaires ===== */
label.f{display:block;margin-bottom:10px}
label.f>span{display:block;color:var(--txt);margin-bottom:1px}
label.f>span:before{content:"  "}
label.f>em{display:block;font-style:normal;font-size:17px;color:var(--gris2);margin-top:1px}
input[type=text],input[type=password],input[type=number],textarea,select{
  width:100%;max-width:520px;background:var(--bleu2);border:1px solid var(--gris2);
  color:var(--blanc);font-family:inherit;font-size:19px;padding:1px 7px;border-radius:0}
input:focus,textarea:focus,select:focus{outline:none;background:var(--gris);color:var(--noir);
  border-color:var(--blanc)}
input::placeholder,textarea::placeholder{color:var(--gris2)}
input:focus::placeholder{color:#555}
textarea{resize:vertical;min-height:52px;line-height:1.35}
option{background:var(--bleu2);color:var(--blanc)}
.chk{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;cursor:pointer;user-select:none}
.chk input{width:13px;height:13px;flex:none;accent-color:var(--bleu2);align-self:flex-start;margin-top:5px}
.chk .t{color:var(--txt)}
.chk .t em{display:block;font-style:normal;font-size:17px;color:var(--gris2);margin-top:1px}
.chk:hover .t{color:var(--blanc)}
.row2{display:flex;gap:26px;flex-wrap:wrap}
.row2>*{flex:1;min-width:230px}

button.b{background:var(--gris);border:1px solid var(--blanc);border-right-color:var(--gris2);
  border-bottom-color:var(--gris2);color:var(--noir);font-family:inherit;font-size:19px;
  padding:0 14px;cursor:pointer}
button.b:hover,button.b:focus{background:var(--jaune);outline:none}
button.b:active{border-color:var(--gris2);border-right-color:var(--blanc);border-bottom-color:var(--blanc)}
button.b:disabled{color:var(--gris2);cursor:default}
button.b.neu{background:#9a9a9a}
button.b.dgr{background:#a85050;color:var(--blanc);border-color:#d88080}
button.b.dgr:hover{background:var(--rouge);color:var(--noir)}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

.msg{min-height:22px;margin-top:6px;font-size:18px}
.msg.ok{color:var(--vert)}
.msg.err{color:var(--rouge)}
.msg.inf{color:var(--jaune)}

/* ===== Listes ===== */
.lst{border:1px solid var(--gris2);background:var(--bleu2);padding:2px 0}
.lrow{display:flex;align-items:baseline;gap:12px;padding:1px 9px;flex-wrap:nowrap}
.lrow:hover{background:var(--bleu)}
.lrow .nm{color:var(--blanc);white-space:nowrap}
.lrow .meta{color:var(--txt);font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lrow .sp{flex:1}
.lrow button{background:none;border:none;color:var(--cyan);font-family:inherit;font-size:18px;
  padding:0 5px;margin-left:6px;cursor:pointer;white-space:nowrap;flex:none}
.lrow button:hover{background:var(--cyan);color:var(--noir)}
.lrow button.x{color:var(--rouge)}
.lrow button.x:hover{background:var(--rouge);color:var(--noir)}
.badge{color:var(--jaune);font-size:18px}
.badge:before{content:"<"}
.badge:after{content:">"}
.ed{display:none;padding:6px 9px 12px;background:var(--bleu);border-top:1px solid var(--gris2);
  border-bottom:1px solid var(--gris2)}
.ed.open{display:block}
.vide{padding:4px 9px;color:var(--gris2)}

/* ===== Mesures (poids du site) ===== */
.sect{display:flex;align-items:baseline;gap:10px;padding:0 0;font-size:18px}
.sect .nm{min-width:150px;color:var(--txt)}
.sect .b2{flex:1;height:11px;background:var(--bleu2);border:1px solid var(--gris2);align-self:center}
.sect .b2 i{display:block;height:9px;background:var(--cyan)}
.sect .vv{width:92px;text-align:right;color:var(--blanc)}
.sect .hw{color:var(--jaune);font-size:17px}
.sect .hw:before{content:"("}
.sect .hw:after{content:")"}

/* ===== Outils ===== */
a.tool{display:block;padding:1px 0;text-decoration:none}
a.tool:hover .tn{background:var(--gris);color:var(--noir)}
a.tool .tn{color:var(--blanc);display:inline-block;padding:0 4px}
a.tool .tn:before{content:"► "}
a.tool .td{color:var(--txt);font-size:18px;padding-left:22px}
a.tool .tp{display:none}

/* ===== Journal ===== */
.log{display:grid;grid-template-columns:150px 180px 1fr 130px;gap:10px;align-items:baseline;
  padding:0 2px;font-size:18px}
.log:hover{background:var(--bleu2)}
.log .lt{color:var(--gris2);white-space:nowrap}
.log .lty{white-space:nowrap;color:var(--txt)}
.log .lw{color:var(--blanc);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log .lip{color:var(--gris2);text-align:right;white-space:nowrap}
.c-ok{color:var(--vert)}.c-warn{color:var(--rouge)}.c-neu{color:var(--txt)}.c-or{color:var(--jaune)}

/* ===== Securite ===== */
.ctl{display:flex;gap:10px;padding:2px 9px}
.ctl:hover{background:var(--bleu)}
.ctl .ic{flex:none;width:34px;font-size:17px;color:var(--vert)}
.ctl.info .ic{color:var(--txt)}
.ctl.alerte .ic{color:var(--rouge)}
.ctl .tt{color:var(--blanc)}
.ctl.alerte .tt{color:var(--rouge)}
.ctl .dd{color:var(--txt);font-size:18px;line-height:1.35}
.mono{font-size:18px;color:var(--txt);word-break:break-all;line-height:1.35}

.pane{display:none}
.pane.on{display:block}
.note{font-size:18px;color:var(--txt);line-height:1.4}
.note b{color:var(--blanc);font-weight:400}
#gate{display:flex;align-items:center;justify-content:center;min-height:70vh;
  color:var(--jaune);padding:24px}

/* ===== Barre de touches ===== */
#touches{position:fixed;left:0;right:0;bottom:0;background:var(--gris);color:var(--noir);
  font-size:18px;padding:1px 14px;display:flex;gap:22px;flex-wrap:wrap;z-index:40}
#touches b{font-weight:400;background:var(--noir);color:var(--gris);padding:0 4px;margin-right:5px}
#touches .sp{flex:1}

@media(max-width:860px){
  body{font-size:18px;padding:6px 6px 64px}
  .body{display:block}
  aside#aide{width:auto;border-left:none;border-top:2px solid var(--gris)}
  nav.side{overflow-x:auto;flex-wrap:nowrap}
  .stat{display:block}
  .stat .k{width:auto}
  .stat .k:after{content:""}
  .stat .d{margin-left:0}
  .log{grid-template-columns:1fr;gap:0}
  .log .lip{text-align:left}
  .row2{gap:0}
  #touches{font-size:17px;gap:12px}
}