/* Site des stagiaires (page d'accueil, console de requêtes) : sans dépendance externe */
:root {
  --bleu: #437eaf;
  --fond: #f6f8fa;
  --carte: #ffffff;
  --texte: #1f2933;
  --doux: #52606d;
  --bord: #d9e2ec;
  --code: #eef2f6;
  --alerte: #fff4e5;
  --alerte-bord: #f0a030;
  --ok: #2f855a;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bleu: #6fa3d1;
    --fond: #11161c;
    --carte: #1a222b;
    --texte: #e4e9ee;
    --doux: #9aa8b5;
    --bord: #2d3a46;
    --code: #222c37;
    --alerte: #3a2a12;
    --alerte-bord: #c98a2b;
    --ok: #68d391;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bleu: #6fa3d1;
  --fond: #11161c;
  --carte: #1a222b;
  --texte: #e4e9ee;
  --doux: #9aa8b5;
  --bord: #2d3a46;
  --code: #222c37;
  --alerte: #3a2a12;
  --alerte-bord: #c98a2b;
  --ok: #68d391;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, sans-serif;
}

a { color: var(--bleu); }

code, pre, kbd {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", Consolas, monospace;
  font-size: 0.9em;
}

code { background: var(--code); padding: 0.1em 0.35em; border-radius: 4px; }

kbd {
  display: inline-block;
  padding: 0.05em 0.45em;
  border: 1px solid var(--bord);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--carte);
  white-space: nowrap;
}

.entete {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  /* Contenu aligné sur la colonne de main (980px) */
  padding: 1.25rem max(16px, calc((100% - 980px) / 2 + 16px));
  background: var(--carte);
  border-bottom: 3px solid var(--bleu);
}

.entete .logo { height: 44px; width: auto; border-radius: 6px; }
.entete h1 { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.entete p { margin: 0.2rem 0 0; color: var(--doux); }

main { max-width: 980px; margin: 0 auto; padding: 1.5rem 16px 3rem; }

section {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

h2 { margin: 0 0 0.75rem; font-size: 1.25rem; color: var(--bleu); }
h3 { margin: 1.25rem 0 0.5rem; font-size: 1.05rem; }
section > :last-child { margin-bottom: 0; }
.aide { color: var(--doux); margin-top: 0; }

.alerte {
  background: var(--alerte);
  border: 1px solid var(--alerte-bord);
  border-left-width: 5px;
}

.alerte h2 { color: var(--texte); }

.groupe + .groupe { margin-top: 1rem; }
.groupe h3 { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--doux); text-transform: uppercase; letter-spacing: 0.04em; }

.tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.6rem;
}

.tuile {
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--bord);
  border-left: 4px solid var(--bleu);
  border-radius: 8px;
  background: var(--fond);
  color: var(--texte);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}

.tuile:hover, .tuile:focus-visible { border-color: var(--bleu); transform: translateY(-1px); }
/* Nœud cloudext en cours de sonde (formation.js) */
.tuile.sonde { opacity: 0.8; }
/* Service absent du poste (aperçu local) ou arrêté (nœuds cloudext sans make cloudext) */
.tuile.inactive { opacity: 0.55; border-left-color: var(--bord); cursor: default; }
.tuile.inactive:hover { border-color: var(--bord); transform: none; }
.tuile.inactive strong { color: var(--doux); }
.tuile strong { color: var(--bleu); }
.tuile span { font-size: 0.85rem; color: var(--doux); overflow-wrap: anywhere; }

table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; vertical-align: top; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--bord); }
th { color: var(--doux); font-weight: 600; }
.tableau { overflow-x: auto; }

.bloc-code { position: relative; }

.bloc-code pre {
  margin: 0.5rem 0;
  padding: 0.8rem 1rem;
  padding-right: 6.5rem;
  background: var(--code);
  border-radius: 8px;
  overflow-x: auto;
}

.copier {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--bord);
  border-radius: 6px;
  background: var(--carte);
  color: var(--texte);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.copier:hover { border-color: var(--bleu); }
.copier.copie { color: var(--ok); border-color: var(--ok); }

ol, ul { padding-left: 1.4rem; }
li + li { margin-top: 0.3rem; }

/* Page de connexion */
main.etroit { max-width: 520px; }
.formulaire { display: grid; gap: 0.4rem; margin: 1rem 0; }
.formulaire label { font-weight: 600; margin-top: 0.4rem; }
.formulaire input {
  font: inherit;
  color: var(--texte);
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
}
.formulaire input:focus { outline: 2px solid var(--bleu); outline-offset: -1px; }
.formulaire .conseil { margin: 0.4rem 0 0; }
.formulaire button.principal {
  margin-top: 0.8rem;
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: 6px;
  background: var(--bleu);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.formulaire button.principal:disabled { opacity: 0.6; cursor: default; }
.conseil {
  padding: 0.5rem 0.75rem;
  background: var(--alerte);
  border: 1px solid var(--alerte-bord);
  border-radius: 6px;
}
.entete .deconnexion { margin-left: 0.5rem; }

/* Page À propos : en-têtes de ligne, colonne de l'environnement mise en avant dans la comparaison */
th[scope="row"] { width: 22%; }
.comparaison td:last-child { background: var(--fond); }

footer { text-align: center; color: var(--doux); font-size: 0.85rem; padding: 0 16px 2rem; }

@media (max-width: 600px) {
  .entete { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  section { padding: 1rem; }
  .tuiles { grid-template-columns: 1fr; }
  /* Comparaison de la page À propos : une ligne = un bloc, colonnes nommées par data-label */
  .comparaison tr:first-child { display: none; }
  .comparaison th, .comparaison td { display: block; width: auto; border-bottom: 0; }
  .comparaison th[scope="row"] { padding-top: 0.9rem; color: var(--texte); }
  .comparaison td::before { content: attr(data-label) " : "; color: var(--doux); font-weight: 600; }
  .comparaison tr { display: block; border-bottom: 1px solid var(--bord); }
}