/* Charte de la console Prateck V3 : sobre, claire et sombre.
   Le thème suit le système ; l'attribut data-theme="clair|sombre" sur <html> le force. */
:root {
  color-scheme: light;
  --fond: #f4f6fb; --panneau: #ffffff; --ligne: #c3cce0; --texte: #0b1730; --discret: #4a5b7a;
  --accent: #1a5fd0; --accent-texte: #ffffff;
  --ok-fond: #d6f5e6; --ok-texte: #07603f;
  --alerte-fond: #fdecc4; --alerte-texte: #6b4500;
  --mal-fond: #fbd9de; --mal-texte: #8a1427;
  --neutre-fond: #e3e8f2; --neutre-texte: #33425c;
  --ombre: 0 1px 2px rgba(11, 23, 48, .08), 0 4px 14px rgba(11, 23, 48, .06);
  --police: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    color-scheme: dark;
    --fond: #070a14; --panneau: #0f1629; --ligne: #34416a; --texte: #f1f5ff; --discret: #b7c4ea;
    --accent: #7db4ff; --accent-texte: #04101f;
    --ok-fond: #0f3a2a; --ok-texte: #8ff0c3; --alerte-fond: #47340a; --alerte-texte: #ffd98a;
    --mal-fond: #4a1620; --mal-texte: #ffb3bd; --neutre-fond: #1e2742; --neutre-texte: #c4d0f7;
    --ombre: 0 1px 2px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="sombre"] {
  color-scheme: dark;
  --fond: #070a14; --panneau: #0f1629; --ligne: #34416a; --texte: #f1f5ff; --discret: #b7c4ea;
  --accent: #7db4ff; --accent-texte: #04101f;
  --ok-fond: #0f3a2a; --ok-texte: #8ff0c3; --alerte-fond: #47340a; --alerte-texte: #ffd98a;
  --mal-fond: #4a1620; --mal-texte: #ffb3bd; --neutre-fond: #1e2742; --neutre-texte: #c4d0f7;
  --ombre: 0 1px 2px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 16px/1.5 var(--police); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
a { color: var(--accent); }
code, .mono { font-family: var(--mono); font-size: .88em; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lien-evitement { position: absolute; left: -9999px; top: 8px; background: var(--panneau); padding: 8px 12px; border-radius: 8px; z-index: 20; }
.lien-evitement:focus { left: 8px; }
.discret { color: var(--discret); }
.petit { font-size: .85rem; }

/* ---- Bandeau et navigation ---- */
.entete { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 10px 20px; background: var(--panneau); border-bottom: 1px solid var(--ligne); box-shadow: var(--ombre); }
.marque { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; margin-right: auto; }
.logo { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--accent); color: var(--accent-texte); font-weight: 800; }
.navigation { display: flex; gap: 4px; }
.navigation a { padding: 6px 12px; border-radius: 8px; color: var(--texte); text-decoration: none; font-weight: 600; }
.navigation a:hover { background: var(--neutre-fond); }
.navigation a[aria-current="page"] { background: var(--accent); color: var(--accent-texte); }
.utilisateur { display: flex; align-items: center; gap: 10px; font-size: .9rem; }

.bandeau-demo { background: var(--alerte-fond); color: var(--alerte-texte); padding: 8px 20px; font-size: .9rem; font-weight: 600; text-align: center; }

main { max-width: 1240px; margin: 0 auto; padding: 22px 20px 60px; }
main:focus { outline: none; }
.carte { background: var(--panneau); border: 1px solid var(--ligne); border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--ombre); }
.titre-page { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.titre-page h1 { margin: 0; margin-right: auto; }
.fil { font-size: .9rem; margin-bottom: 6px; }

/* ---- Pastilles : couleur + symbole + texte ---- */
.pastille { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.pastille::before { margin-right: 5px; }
.pastille.ok { background: var(--ok-fond); color: var(--ok-texte); } .pastille.ok::before { content: "●"; }
.pastille.ecart { background: var(--alerte-fond); color: var(--alerte-texte); } .pastille.ecart::before { content: "▲"; }
.pastille.injoignable { background: var(--mal-fond); color: var(--mal-texte); } .pastille.injoignable::before { content: "■"; }
.pastille.attente-acces { background: var(--neutre-fond); color: var(--neutre-texte); border: 1px solid var(--discret); } .pastille.attente-acces::before { content: "…"; }
.pastille.inconnu { background: var(--neutre-fond); color: var(--neutre-texte); border: 1px dashed var(--discret); } .pastille.inconnu::before { content: "○"; }
.etiquette { display: inline-block; font-size: .78rem; font-weight: 600; padding: 2px 9px; border-radius: 6px; background: var(--neutre-fond); color: var(--neutre-texte); }
.etiquette.chaud { background: var(--mal-fond); color: var(--mal-texte); }
.etiquette.froid { background: var(--ok-fond); color: var(--ok-texte); }

/* ---- Boutons ---- */
.bouton { font: inherit; font-weight: 600; cursor: pointer; color: var(--texte); background: var(--panneau); border: 1px solid var(--ligne); border-radius: 8px; padding: 7px 14px; text-decoration: none; display: inline-block; }
.bouton:hover { border-color: var(--accent); }
.bouton.principal { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }
.bouton.petit { padding: 3px 9px; font-size: .85rem; }
.bouton[disabled] { opacity: .55; cursor: not-allowed; }
.barre-outils { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

/* ---- Messages ---- */
.message { border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; border: 1px solid var(--ligne); }
.message.info { background: var(--neutre-fond); color: var(--neutre-texte); }
.message.attente { background: var(--alerte-fond); color: var(--alerte-texte); border-color: var(--alerte-texte); }
.message.erreur { background: var(--mal-fond); color: var(--mal-texte); border-color: var(--mal-texte); }
.message strong { display: block; }
.vide { text-align: center; padding: 30px 10px; color: var(--discret); }

/* ---- Formulaires ---- */
label, legend { font-weight: 600; font-size: .92rem; }
.champ { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.aide { font-weight: 400; font-size: .85rem; color: var(--discret); }
input[type=text], input[type=password], select, textarea { font: inherit; color: var(--texte); background: var(--fond); border: 1px solid var(--ligne); border-radius: 8px; padding: 8px 10px; width: 100%; }
input.code { font-family: var(--mono); font-size: 1.6rem; letter-spacing: .5em; text-align: center; }
fieldset { border: 1px solid var(--ligne); border-radius: 10px; margin: 0 0 14px; padding: 10px 14px 6px; }
fieldset legend { padding: 0 6px; }
.choix { display: flex; gap: 10px; align-items: flex-start; padding: 7px 4px; font-weight: 400; cursor: pointer; }
.choix input { margin-top: 5px; }
.choix .nom { font-weight: 600; display: block; }
.choix .aide { display: block; }
.etapes { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 14px; font-size: .85rem; }
.etapes li { padding: 3px 12px; border: 1px solid var(--ligne); border-radius: 99px; color: var(--discret); }
.etapes li[aria-current="step"] { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); font-weight: 700; }

.connexion { max-width: 440px; margin: 7vh auto 0; }
.connexion .logo { width: 44px; height: 44px; font-size: 1.3rem; }

/* ---- Organigramme ---- */
.organigramme { display: flex; flex-direction: column; align-items: center; }
.noeud-racine { background: var(--accent); color: var(--accent-texte); font-weight: 700; padding: 10px 22px; border-radius: 10px; }
.tige { width: 2px; height: 22px; background: var(--ligne); }
.entreprises { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; width: 100%; border-top: 2px solid var(--ligne); padding: 20px 0 0; margin: 0; list-style: none; }
.entreprise { flex: 1 1 300px; max-width: 440px; background: var(--panneau); border: 1px solid var(--ligne); border-radius: 12px; padding: 14px; box-shadow: var(--ombre); }
.entreprise-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.entreprise-tete h2 { margin: 0; font-size: 1.1rem; }
.entreprise-tete h2 a { color: var(--texte); text-decoration: none; }
.entreprise-tete h2 a:hover { text-decoration: underline; }
.arbre { list-style: none; margin: 8px 0; padding: 0 0 0 14px; border-left: 2px solid var(--ligne); display: grid; gap: 7px; }
.arbre li { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.arbre li.sous { margin-left: 18px; }
.entreprise-pied { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ---- Tableaux ---- */
.defile { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
caption { text-align: left; font-weight: 700; padding-bottom: 8px; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
thead th { color: var(--discret); font-weight: 600; white-space: nowrap; }
td .bouton { margin: 2px 4px 2px 0; }
.identite { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .92rem; }
.identite dt { color: var(--discret); font-size: .8rem; }
.identite dd { margin: 0; font-weight: 600; }
.identite div { min-width: 120px; }

/* ---- Journal ---- */
.journal { list-style: none; padding: 0; margin: 0; border: 1px solid var(--ligne); border-radius: 10px; }
.journal li { display: grid; grid-template-columns: 170px 150px 1fr; gap: 4px 14px; padding: 8px 12px; border-bottom: 1px solid var(--ligne); font-size: .9rem; }
.journal li:last-child { border-bottom: 0; }
.journal time { font-family: var(--mono); color: var(--discret); }
@media (max-width: 760px) { .journal li { grid-template-columns: 1fr; } }

dialog { max-width: 480px; width: calc(100% - 32px); border: 2px solid var(--accent); border-radius: 12px; background: var(--panneau); color: var(--texte); padding: 22px; }
dialog::backdrop { background: rgba(0, 0, 0, .55); }
dialog .barre-outils { justify-content: flex-end; }
@media (prefers-reduced-motion: no-preference) { .bouton { transition: border-color .15s; } }
.champ.filtre { margin: 0; min-width: 240px; }
.barre-filtres { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 14px; }
.barre-filtres .champ.filtre { flex: 1 1 200px; min-width: 0; }

/* Téléphone : les tableaux deviennent des fiches (le titre de colonne vient de data-label, posé par le JS). */
@media (max-width: 640px) {
  table thead { position: absolute; left: -9999px; }
  table, table tbody, table tr, table th[scope="row"], table td { display: block; width: 100%; }
  table tr { padding: 10px 0; border-bottom: 1px solid var(--ligne); }
  table td, table th[scope="row"] { border: 0; padding: 3px 4px; }
  table td[data-label]::before { content: attr(data-label); display: block; font-size: .78rem; color: var(--discret); }
}

/* ---- Services d'un serveur (commun/services.js) : partagé par la console et le portail ---- */
.services { margin: 6px 0 0; min-width: 0; }
.services p { margin: 2px 0; font-size: .88rem; }
.services-resume { cursor: pointer; font-weight: 600; font-size: .92rem; }
p.services-resume { cursor: default; font-weight: 400; }
.services-resume-ecart { color: var(--mal-texte, var(--al-texte)); }
.services-detail { list-style: none; margin: 6px 0 4px; padding: 0; }
.service { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 4px 8px; border-radius: 6px; font-size: .88rem; }
.service-nom { font-family: var(--mono); overflow-wrap: anywhere; }
.service-etat { color: var(--discret, var(--doux)); }
.service-ecart { background: var(--mal-fond, var(--al-fond)); color: var(--mal-texte, var(--al-texte)); border-left: 4px solid currentColor; font-weight: 700; }
.service-ecart .service-etat { color: inherit; }

/* ================================================================== */
/* Console centrale V2 : demandes, détail d'un serveur, comptes        */
/* ================================================================== */

/* ---- Navigation : compteur de demandes, lien « Mon compte » ---- */
.navigation { flex-wrap: wrap; }
.entete { column-gap: 14px; }
.compteur { display: inline-block; min-width: 1.4em; padding: 0 6px; margin-left: 4px; border-radius: 99px; background: var(--mal-texte); color: var(--mal-fond); font-size: .78rem; font-weight: 800; text-align: center; line-height: 1.5; }
.navigation a[aria-current="page"] .compteur { background: var(--accent-texte); color: var(--accent); }
.lien-compte { color: var(--texte); font-weight: 600; text-decoration: none; padding: 4px 8px; border-radius: 8px; }
.lien-compte:hover { background: var(--neutre-fond); }
.lien-compte[aria-current="page"] { background: var(--accent); color: var(--accent-texte); }
.lien-compte #nom-utilisateur { display: none; font-weight: 400; color: var(--discret); }
@media (min-width: 1500px) { .lien-compte #nom-utilisateur { display: inline; } }
.lien-compte #nom-utilisateur::before { content: " · "; }
.lien-compte[aria-current="page"] #nom-utilisateur { color: inherit; }

/* ---- Statuts d'une demande : couleur, symbole et texte ---- */
.statut { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.statut::before { margin-right: 5px; }
.statut.en-attente { background: var(--alerte-fond); color: var(--alerte-texte); } .statut.en-attente::before { content: "◔"; }
.statut.acceptee { background: var(--neutre-fond); color: var(--accent); border: 1px solid var(--accent); } .statut.acceptee::before { content: "✓"; }
.statut.refusee { background: var(--neutre-fond); color: var(--neutre-texte); border: 1px dashed var(--discret); } .statut.refusee::before { content: "✕"; }
.statut.executee { background: var(--ok-fond); color: var(--ok-texte); } .statut.executee::before { content: "●"; }
.statut.echouee { background: var(--mal-fond); color: var(--mal-texte); } .statut.echouee::before { content: "■"; }
.statut.inconnu { background: var(--neutre-fond); color: var(--neutre-texte); border: 1px dashed var(--discret); } .statut.inconnu::before { content: "○"; }
.precisions { margin-top: 4px; max-width: 46ch; }
.etiquette-nb { margin-left: 6px; }
h2 .etiquette { vertical-align: middle; margin-left: 6px; }

/* ---- Bandeau d'alertes du tableau de bord ---- */
.bandeau-alertes { border: 1px solid var(--alerte-texte); border-left-width: 6px; background: var(--alerte-fond); color: var(--alerte-texte); border-radius: 12px; padding: 12px 18px; margin-bottom: 18px; }
.bandeau-alertes h2 { margin: 0 0 6px; font-size: 1.05rem; }
.bandeau-alertes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bandeau-alertes a { display: block; padding: 6px 4px; color: inherit; text-decoration: none; border-radius: 6px; overflow-wrap: anywhere; }
.bandeau-alertes a:hover, .bandeau-alertes a:focus-visible { text-decoration: underline; background: rgba(0, 0, 0, .06); }
.releve-ancien { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--alerte-fond); color: var(--alerte-texte); font-size: .85rem; font-weight: 600; }
.difference { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.difference li { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; border-radius: 8px; border-left: 4px solid currentColor; }
.difference .sens { font-weight: 700; white-space: nowrap; min-width: 6.5em; }
.difference li.ajoute { background: var(--ok-fond); color: var(--ok-texte); }
.difference li.retire { background: var(--mal-fond); color: var(--mal-texte); }
.config-incomplete { margin: 8px 0; padding: 8px 12px; border-radius: 8px; border-left: 4px solid currentColor; background: var(--alerte-fond); color: var(--alerte-texte); font-size: .9rem; font-weight: 600; }
.releve-perime { border: 1px solid currentColor; }
.bandeau-alertes li.ancien a { font-weight: 600; }
.bandeau-alertes .symbole { display: inline-block; width: 1.3em; }
.bandeau-alertes li.injoignable a { color: var(--mal-texte); font-weight: 600; }
.bandeau-alertes .discret { color: inherit; opacity: .85; }
.bandeau-alertes:has(li.injoignable) { background: var(--mal-fond); border-color: var(--mal-texte); color: var(--mal-texte); }
.bandeau-alertes.sain { background: var(--ok-fond); color: var(--ok-texte); border-color: var(--ok-texte); border-left-width: 6px; }

/* ---- Détail d'un serveur ---- */
.grille-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 0 18px; align-items: stretch; }
.grille-detail .carte { margin-bottom: 18px; }
.jauge { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.jauge meter { width: min(100%, 260px); height: 18px; }
.jauge strong { font-size: 1.5rem; }
.carte h1 { margin-bottom: 8px; }

/* ---- Graphique d'occupation du disque ---- */
.cartes-graphiques { display: grid; gap: 26px; }
.graphique { margin: 0; min-width: 0; }
.graphique-titre { font-weight: 700; margin-bottom: 4px; }
.graphique-lecture { margin: 0 0 4px; min-height: 1.5em; font-size: .9rem; color: var(--discret); font-variant-numeric: tabular-nums; }
.graphique-zone { width: 100%; min-height: 230px; }
.graphique-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.graphique-svg .grille { stroke: var(--ligne); stroke-width: 1; stroke-dasharray: 2 4; }
.graphique-svg .grille-v { stroke: var(--ligne); stroke-width: 1; stroke-dasharray: 2 4; opacity: .7; }
.graphique-svg .axe { stroke: var(--discret); stroke-width: 1.5; }
.graphique-svg .graduation { fill: var(--discret); font: 12px var(--police); }
.graphique-svg .titre-axe { fill: var(--texte); font: 600 12px var(--police); }
.graphique-svg .courbe { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.graphique-svg .surface { fill: var(--accent); fill-opacity: .14; stroke: none; }
.graphique-svg .point { fill: var(--accent); stroke: var(--panneau); stroke-width: 2; }
.graphique-svg .valeur-finale { fill: var(--texte); font: 700 13px var(--police); paint-order: stroke; stroke: var(--panneau); stroke-width: 4px; }
.graphique-svg .repere { stroke: var(--texte); stroke-width: 1; stroke-dasharray: 3 3; }
.graphique-svg .marque-injoignable { fill: var(--mal-texte); }
.graphique-svg .capteur { fill: transparent; cursor: crosshair; }
.graphique-vide { display: flex; flex-direction: column; gap: 2px; padding: 26px 16px; text-align: center; border: 2px dashed var(--ligne); border-radius: 10px; }
.graphique-resume { margin: 4px 0 0; }
.graphique-legende { margin: 14px 0 0; line-height: 1.8; }
.graphique-legende span[aria-hidden] { margin-left: 14px; }
.graphique-legende span[aria-hidden]:first-child { margin-left: 0; }
.legende-courbe { display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--accent); vertical-align: middle; }
.legende-injoignable { display: inline-block; width: 9px; height: 9px; background: var(--mal-texte); vertical-align: middle; }

/* ---- Boutons, formulaires ---- */
.bouton.danger { color: var(--mal-texte); border-color: var(--mal-texte); }
.bouton.danger:hover { background: var(--mal-fond); }
.bouton.principal.danger { background: var(--mal-texte); color: var(--mal-fond); }
textarea { resize: vertical; min-height: 4.5em; }
input[type=checkbox], input[type=radio] { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.barre-outils.fin { justify-content: flex-end; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
tr.inactif { opacity: .6; }

/* ---- Fenêtre libre (formulaires, secrets affichés une seule fois) ---- */
dialog#fenetre { max-width: 560px; max-height: calc(100dvh - 24px); overflow-y: auto; }
dialog#fenetre.large { max-width: 640px; }
dialog#fenetre h2 { margin-bottom: 12px; }
.secret { margin: 12px 0; }
.secret-titre { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
.secret-valeur { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.secret-valeur code { flex: 1 1 200px; min-width: 0; padding: 10px 12px; border: 1px solid var(--ligne); border-radius: 8px; background: var(--fond); font-size: 1.1rem; letter-spacing: .04em; overflow-wrap: anywhere; user-select: all; }
.qr { display: grid; place-items: center; padding: 12px; background: #ffffff; border: 1px solid var(--ligne); border-radius: 10px; width: fit-content; max-width: 100%; }
.qr svg { display: block; width: min(240px, 100%); height: auto; }

@media (max-width: 640px) {
  .entete { padding: 10px 12px; }
  .navigation { width: 100%; order: 3; overflow-x: auto; }
  .navigation a { padding: 8px 10px; white-space: nowrap; }
  .utilisateur { flex-wrap: wrap; }
  main { padding: 16px 12px 48px; }
  .carte { padding: 14px; }
  .secret-valeur code { font-size: 1rem; }
}

/* ---- Droits et visibilité : matrice de cases à cocher ---- */
table.matrice td { text-align: center; }
table.matrice th[scope="row"] { text-align: left; }
table.matrice input[type="checkbox"] { width: 20px; height: 20px; }
table.matrice input:disabled { opacity: .35; }