/* OTF RP - panel du serveur (kit HRP : charbon + orange #F8A000, Montserrat, coins coupés « encre et sceau ») */
@font-face { font-family: "Montserrat OTF"; src: url("/static/montserrat-bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
:root {
  --fond: #121318; --carte: #1b1d24; --carte2: #23262f; --ligne: #2e313c; --texte: #eceef4; --doux: #9aa0b2;
  --orange: #f8a000; --rouge: #e0503e; --vert: #5cc46e; --bleu: #4a9be8; --console: #0c0d11;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--texte); font: 15px/1.5 "Montserrat OTF", "Montserrat", "Segoe UI", Arial, sans-serif; }
a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: var(--carte2); padding: 1px 6px; border-radius: 4px; font-size: 13px; }

header { display: flex; align-items: center; gap: 24px; padding: 10px 24px; background: #0c0d11; border-bottom: 2px solid var(--orange); flex-wrap: wrap; }
.marque { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 22px; font-style: italic; letter-spacing: 1px; }
.marque:hover { text-decoration: none; }
.marque img { width: 44px; height: 44px; }
.marque em { color: var(--orange); font-style: italic; }
nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
nav a { color: var(--doux); padding: 6px 12px; border-radius: 6px; text-transform: uppercase; font-size: 13px; letter-spacing: .5px; }
nav a:hover, nav a.actif { color: #fff; background: var(--carte2); text-decoration: none; }
nav a.actif { box-shadow: inset 0 -2px 0 var(--orange); }
.compte { color: var(--doux); font-size: 13px; display: flex; align-items: center; gap: 10px; }
.compte form { margin: 0; }
main { max-width: 1180px; margin: 0 auto; padding: 24px 16px 60px; }
footer { text-align: center; color: #5d6274; font-size: 12px; padding: 20px; }

h1 { font-size: 26px; margin: 4px 0 18px; font-style: italic; }
h1 a, h2 a { font-style: normal; font-weight: 400; margin-left: 10px; }
h2 { font-size: 18px; margin: 0 0 12px; color: #fff; }
h3 { font-size: 15px; margin: 14px 0 8px; color: var(--orange); }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.carte { background: var(--carte); border: 1px solid var(--ligne); border-radius: 10px; padding: 18px; margin-bottom: 16px; min-width: 0; }
/* coin coupé en haut à droite, avec un trait orange : la forme signature OTF */
.carte.coin { border-radius: 0; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); position: relative; }
.carte.coin::before { content: ""; position: absolute; top: 0; right: 0; width: 26px; height: 26px; background: linear-gradient(225deg, var(--orange) 0 9px, transparent 9px); }
.doux { color: var(--doux); }
.petit { font-size: 12px; }
.pastille { display: inline-block; padding: 1px 9px; border-radius: 20px; font-size: 12px; background: var(--carte2); color: var(--doux); }
.pastille.grande { font-size: 15px; padding: 4px 14px; }
.pastille.ok { background: rgba(92,196,110,.15); color: var(--vert); }
.pastille.ko { background: rgba(224,80,62,.15); color: var(--rouge); }
.pastille.att { background: rgba(248,160,0,.15); color: var(--orange); }
.etat-ligne { display: flex; align-items: center; gap: 10px; }
dl.infos { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin: 14px 0; }
dl.infos dt { color: var(--doux); font-size: 13px; }
dl.infos dd { margin: 0; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--doux); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; padding: 8px; border-bottom: 1px solid var(--ligne); }
td { padding: 8px; border-bottom: 1px solid var(--ligne); vertical-align: top; overflow-wrap: anywhere; }
tr:hover td { background: rgba(255,255,255,.02); }
.defile { overflow-x: auto; }
table.journal td { font-size: 13px; }
details summary { cursor: pointer; color: var(--orange); }
.texte { white-space: pre-wrap; word-wrap: break-word; font-size: 12px; max-width: 460px; }

form { margin: 0; }
form.ligne, .ligne { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.ligne > div { flex: 1; min-width: 140px; }
.filtres > div { flex: 0 1 auto; }
label { display: block; font-size: 12px; color: var(--doux); margin: 10px 0 4px; }
label.case { display: flex; align-items: center; gap: 8px; color: var(--texte); font-size: 14px; }
input[type=text], input[type=password], input[type=number], input[type=date], textarea, select {
  width: 100%; padding: 9px 11px; border-radius: 7px; border: 1px solid var(--ligne); background: #101116; color: #fff; font: inherit;
}
textarea { min-height: 110px; resize: vertical; }
textarea.code { min-height: 420px; font: 13px/1.45 Consolas, "DejaVu Sans Mono", monospace; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--orange); }
button, .bouton {
  display: inline-block; padding: 9px 18px; border: 0; background: var(--orange); color: #111; font: inherit; font-weight: 700; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); text-transform: uppercase; font-size: 13px; letter-spacing: .5px;
}
button:hover, .bouton:hover { filter: brightness(1.1); text-decoration: none; }
button.gris, .bouton.gris { background: var(--carte2); color: var(--texte); }
button.rouge { background: var(--rouge); color: #fff; }
button.plein { width: 100%; margin-top: 18px; padding: 12px; }
button.petit-bouton { padding: 5px 12px; font-size: 11px; }
.boutons { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 8px; }
fieldset.sudo, div.sudo { border: 1px solid var(--orange); border-radius: 8px; padding: 10px 14px 14px; margin: 16px 0; background: rgba(248,160,0,.05); }
fieldset.sudo legend { color: var(--orange); padding: 0 6px; font-size: 13px; }
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; background: rgba(92,196,110,.12); color: var(--vert); }
.flash.erreur { background: rgba(224,80,62,.12); color: var(--rouge); }
.liste { padding-left: 18px; }
.liste li { margin: 6px 0; }
.pagination { display: flex; gap: 16px; justify-content: center; margin-top: 14px; }

.connexion { max-width: 420px; margin: 40px auto; }
.logo-connexion { width: 84px; height: 84px; display: block; margin: 0 auto 6px; }
.connexion h1 { text-align: center; }
.connexion p { text-align: center; }

.console-outils { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.console-outils input[type=text] { width: auto; flex: 1; min-width: 160px; }
.console-outils label.case { margin: 0; }
pre.console {
  background: var(--console); border: 1px solid var(--ligne); border-left: 3px solid var(--orange); height: 58vh; min-height: 280px; overflow: auto; margin: 0 0 10px;
  padding: 10px 12px; font: 12.5px/1.45 Consolas, "DejaVu Sans Mono", monospace; white-space: pre-wrap; word-break: break-word; color: #d6d9e4;
}
pre.console .agent { color: var(--orange); }
pre.console .panel { color: var(--bleu); }
pre.console .erreur { color: var(--rouge); }
#console-form input { flex: 1; font-family: Consolas, "DejaVu Sans Mono", monospace; }
pre.diff { background: var(--console); padding: 10px; overflow: auto; font: 12.5px/1.45 Consolas, monospace; max-height: 40vh; }
pre.diff .plus { color: var(--vert); }
pre.diff .moins { color: var(--rouge); }

@media (max-width: 700px) {
  header { gap: 10px; padding: 10px 16px; }
  nav { order: 3; width: 100%; }
  .grille { grid-template-columns: 1fr; }
  main { padding: 16px 16px 40px; }
  h1 { font-size: 22px; }
}