/**
 * Console de mise à jour
 *
 * ══════════════════════════════════════════════════════════════════
 * ── Un outil, pas une publication ─────────────────────────────
 * Sans empattements, comme tout panneau d'administration : c'est ce
 * qu'on attend en ouvrant ce genre d'écran, et ce qui se lit le mieux
 * sur une interface dense.
 *
 * Une version précédente composait le texte en romain à empattements,
 * pour évoquer un registre. L'idée se tenait sur le papier ; à l'écran,
 * elle donnait l'impression d'un article de blog, pas d'une console.
 *
 * ── La chasse fixe, mais seulement où elle sert ───────────────
 * Versions, chemins, horodatages, journal. Dans un outil qui déploie du
 * code, « 1.l0 » et « 1.10 » doivent se distinguer d'un coup d'œil. Le
 * reste — titres, phrases, boutons — est en linéale.
 *
 * Aucune police distante : cette page doit s'afficher quand tout le
 * reste va mal, et c'est souvent alors qu'on l'ouvre.
 *
 * ── Des lignes, pas des cartes ────────────────────────────────
 * Le contenu est un relevé : versions, verdicts, journal. Des filets et
 * des colonnes alignées le servent mieux que des boîtes arrondies
 * identiques, où un numéro de version pèse autant qu'une phrase.
 * ══════════════════════════════════════════════════════════════════
 */

:root {
    /* Un papier froid, et non la crème chaude de tous les gabarits. */
    --papier:  #eef1f4;
    --surface: #ffffff;
    --encre:   #19212b;
    --discret: #5b6878;
    --filet:   #d3dae1;

    /* L'accent est une encre, pas une couleur de marque : ce bleu
       profond signe une action qui engage. */
    --accent:  #27497f;
    --accent-texte: #ffffff;

    /* Les seules couleurs vives sont des états. */
    --franc:     #1b7347;
    --attention: #8a5600;
    --alerte:    #a22d27;

    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --r: 3px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --papier:  #11161d;
        --surface: #161c25;
        --encre:   #dde4ed;
        --discret: #8b97a6;
        --filet:   #273040;
        --accent:  #789ddd;
        --accent-texte: #0d1117;
        --franc:     #4cbd84;
        --attention: #d7a23c;
        --alerte:    #e8776f;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--papier);
    color: var(--encre);
    font: 400 15px/1.55 var(--sans);
    -webkit-text-size-adjust: 100%;
}

code, pre, .mono { font-family: var(--mono); }

/* Les chiffres s'alignent d'une ligne à l'autre : c'est tout
   l'intérêt d'un registre. */
code, pre, .version, .grid td, .log { font-variant-numeric: tabular-nums; }

code {
    font-size: .8125em;
    background: color-mix(in srgb, var(--encre) 7%, transparent);
    padding: .1em .35em;
    border-radius: var(--r);
}

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* Dans un registre, souligner chaque ligne ferait du bruit : le nom
   se donne pour ce qu'il est, et se souligne au survol. */
.nom {
    color: var(--encre);
    font-weight: 600;
    text-decoration: none;
}

.nom:hover { text-decoration: underline; text-decoration-color: var(--accent); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── L'en-tête : discret, c'est un outil, pas une vitrine ────── */

.bar {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    padding: .9rem 1.5rem;
    border-bottom: 1px solid var(--filet);
    background: var(--surface);
    flex-wrap: wrap;
}

.bar__brand {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.bar__nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }

.bar__nav a {
    font-size: .875rem;
    color: var(--discret);
    text-decoration: none;
    padding-bottom: .15rem;
    border-bottom: 2px solid transparent;
}

.bar__nav a:hover { color: var(--encre); }

.bar__nav a.is-on {
    color: var(--encre);
    border-bottom-color: var(--accent);
}

.bar__out { margin-left: auto; }

/* ── La trame ────────────────────────────────────────────────── */

.wrap { max-width: 62rem; margin: 0 auto; padding: 2rem 1.25rem 5rem; }

h1 {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}

h2 {
    font-size: .9375rem;
    font-weight: 600;
    margin: 0 0 .75rem;
}

h3 { font-size: .875rem; font-weight: 600; margin: 0 0 .4rem; }

.head {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.head__actions { margin-left: auto; display: flex; gap: .6rem; flex-wrap: wrap; }

/*  L'état du parc : la phrase qu'on vient lire.  */
.etat {
    margin: .3rem 0 0;
    font-size: .875rem;
    color: var(--discret);
}

.etat--franc     { color: var(--franc); }
.etat--attention { color: var(--attention); }

.etat .version { font-size: 1rem; color: var(--encre); }
.etat code { font-size: .75em; }

/* ── Les sections : un filet et de l'air, pas une boîte ──────── */

.card {
    border-top: 1px solid var(--filet);
    padding-top: 1.4rem;
    margin-bottom: 2.5rem;
}

.card > h2 { margin-bottom: .5rem; }

/* Une seule section a droit à un vrai cadre : l'entrée. C'est la
   seule page où il n'y a rien d'autre à regarder. */
.card--narrow {
    max-width: 24rem;
    margin: 5rem auto;
    padding: 1.75rem;
    border: 1px solid var(--filet);
    border-radius: var(--r);
    background: var(--surface);
}

.card--narrow h1 { font-size: 1.25rem; margin-bottom: .5rem; }

.muted  { color: var(--discret); }
.tiny   { font-size: .8125rem; }
.right  { text-align: right; }
.mt     { margin-top: 1rem; }
.grow   { flex: 1 1 14rem; }

.help {
    color: var(--discret);
    font-size: .8125rem;
    max-width: 60ch;
    margin: .4rem 0 1rem;
}

.steps { color: var(--discret); font-size: .8125rem; padding-left: 1.1rem; max-width: 60ch; }
.steps li { margin-bottom: .45rem; }

/* ── La mise en route ────────────────────────────────────────
   Le premier écran, et le seul tant qu'aucun site n'est branché.
   Il doit dire quoi faire, pas constater un vide : du texte lisible
   plutôt que du gris, une largeur de lecture, et UN seul bouton. */

.vide { max-width: 44rem; }

.vide__intro {
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--discret);
    margin: 0 0 2rem;
    max-width: 58ch;
}

.vide h2 { margin-bottom: 1rem; }

.pas {
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
    counter-reset: pas;
}

.pas li {
    position: relative;
    counter-increment: pas;
    padding-left: 2rem;
    margin-bottom: .75rem;
    line-height: 1.6;
    font-size: .9375rem;
}

/* Le numéro est une donnée — l'ordre compte — donc en chasse fixe,
   aligné sur la première ligne du texte qu'il introduit. */
.pas li::before {
    content: counter(pas);
    position: absolute;
    left: 0;
    top: .05em;
    width: 1.5rem;
    text-align: right;
    font-family: var(--mono);
    font-size: .8125rem;
    color: var(--discret);
}

.vide__apres {
    margin: 2.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--filet);
    color: var(--discret);
    font-size: .8125rem;
    line-height: 1.6;
    max-width: 58ch;
}

/* ── Messages ────────────────────────────────────────────────── */

.note {
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
    border-left: 3px solid var(--discret);
    background: var(--surface);
    border-radius: 0 var(--r) var(--r) 0;
    max-width: 70ch;
}

.note--ok    { border-left-color: var(--franc); }
.note--warn  { border-left-color: var(--attention); }
.note--error { border-left-color: var(--alerte); }

/* ── Le registre ─────────────────────────────────────────────── */

.grid { width: 100%; border-collapse: collapse; }

.grid th, .grid td {
    text-align: left;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--filet);
    vertical-align: top;
}

.grid th:first-child, .grid td:first-child { padding-left: 0; }
.grid th:last-child,  .grid td:last-child  { padding-right: 0; }

.grid thead th {
    font-size: .75rem;
    font-weight: 400;
    color: var(--discret);
    border-bottom-color: var(--encre);
    padding-bottom: .4rem;
}

.grid tbody tr:last-child td { border-bottom: 0; }
.grid tr.is-bad { background: color-mix(in srgb, var(--alerte) 7%, transparent); }

/*  Le numéro de version : la seule chose qu'on vient vérifier.  */
.version {
    font-family: var(--mono);
    font-size: .9375rem;
    font-weight: 500;
}

.version--ecart {
    color: var(--attention);
    font-weight: 600;
}

.tag {
    display: inline-block;
    font-size: .6875rem;
    padding: .1rem .4rem;
    border: 1px solid var(--filet);
    border-radius: var(--r);
    color: var(--discret);
    white-space: nowrap;
}

.tag--ok   { color: var(--franc);     border-color: color-mix(in srgb, var(--franc) 40%, transparent); }
.tag--warn { color: var(--attention); border-color: color-mix(in srgb, var(--attention) 40%, transparent); }
.tag--bad  { color: var(--alerte);    border-color: color-mix(in srgb, var(--alerte) 40%, transparent); }

/* ── Formulaires ─────────────────────────────────────────────── */

label {
    display: block;
    font-size: .75rem;
    font-weight: 500;
    color: var(--discret);
    margin: 1.1rem 0 .3rem;
}

input[type=text], input[type=password], textarea, select {
    width: 100%;
    max-width: 34rem;
    padding: .5rem .6rem;
    background: var(--papier);
    color: var(--encre);
    border: 1px solid var(--filet);
    border-radius: var(--r);
    font: 400 .875rem/1.4 var(--sans);
}

input[readonly] { color: var(--discret); }
textarea { resize: vertical; font-family: var(--sans); font-size: .9375rem; }

.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.row input, .row select { width: auto; }
.row label { margin: 0; }

.btn {
    display: inline-block;
    padding: .5rem .9rem;
    border: 1px solid var(--filet);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--encre);
    font: 500 .8125rem/1.3 var(--sans);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover { border-color: var(--discret); }

.btn--main {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-texte);
}

.btn--main:hover { filter: brightness(1.1); }

.btn--danger { color: var(--alerte); border-color: color-mix(in srgb, var(--alerte) 40%, transparent); }
.btn--danger:hover { border-color: var(--alerte); }

/* Un bouton nu portait la couleur du texte discret : dans une colonne
   où voisinent « Poser ici » (une action) et « site en service » (un
   état), les deux se ressemblaient trait pour trait. Il prend donc
   l'encre d'accent et un soulignement léger — assez pour qu'on voie
   qu'on peut cliquer, pas assez pour peser comme un vrai bouton. */
.btn--bare {
    background: none;
    border-color: transparent;
    color: var(--accent);
    padding-left: 0;
    padding-right: 0;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
    text-underline-offset: 3px;
}

.btn--bare:hover {
    color: var(--encre);
    border-color: transparent;
    text-decoration-color: currentColor;
}

/* Sauf dans la barre : « Sortir » n'est pas une action qu'on cherche,
   c'est une porte qu'on sait trouver. Souligné et coloré, il tirait
   l'œil à chaque page pour rien. */
.bar__out .btn--bare { color: var(--discret); text-decoration: none; }
.bar__out .btn--bare:hover { color: var(--encre); text-decoration: underline; }

.btn--small { padding: .3rem .55rem; font-size: .8125rem; }

form { margin: 0; }

/* Un bouton de validation se met SOUS le champ qu'il valide, et non
   à côté : au bout d'un textarea, il se collait au bord droit. */
.card > form > button {
    display: block;
    margin-top: 1.25rem;
}

.row button { margin-top: 0; display: inline-block; }

/* ── Le journal ──────────────────────────────────────────────── */

.log { list-style: none; margin: 0; padding: 0; }

.log__line {
    display: grid;
    grid-template-columns: 7rem 5.5rem 1fr;
    gap: .75rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--filet);
    font-size: .875rem;
}

.log__line:last-child { border-bottom: 0; }
.log__line--bad .log__msg { color: var(--alerte); }

.log__when { font-family: var(--mono); font-size: .75rem; color: var(--discret); }
.log__what { font-family: var(--mono); font-size: .75rem; color: var(--discret); }
.log__more { grid-column: 3; }
.log__more summary { font-size: .75rem; color: var(--discret); cursor: pointer; }

.log__more pre, pre {
    margin: .5rem 0 0;
    padding: .7rem .8rem;
    background: var(--papier);
    border: 1px solid var(--filet);
    border-radius: var(--r);
    overflow-x: auto;
    white-space: pre-wrap;
    font-size: .75rem;
    line-height: 1.55;
    max-height: 22rem;
    overflow-y: auto;
}

/* ── Petits écrans ───────────────────────────────────────────── */

@media (max-width: 680px) {
    .wrap { padding: 1.25rem 1rem 4rem; }
    .head { align-items: flex-start; }
    .head__actions { margin-left: 0; }
    .log__line { grid-template-columns: 1fr; gap: .1rem; }
    .log__more { grid-column: 1; }
    .bar__out { margin-left: 0; }
    .grid, .grid thead, .grid tbody, .grid tr, .grid th, .grid td { display: block; }
    .grid thead { display: none; }
    .grid tr { border-bottom: 1px solid var(--filet); padding: .6rem 0; }
    .grid td { border: 0; padding: .15rem 0; }
    .grid td.right { text-align: left; padding-top: .5rem; }
}

/* ── Le fil d'Ariane du navigateur de dossiers ───────────────
   L'installation de la console a buté une soirée sur les chemins : un
   client FTP montre « /colbelhub », le serveur attend
   « /home/compte/colbelhub ». Le fil montre où l'on est, et le chemin
   réel sur le disque est rappelé juste en dessous — les deux ensemble,
   pour qu'on n'ait plus à les deviner l'un depuis l'autre. */

.crumb {
    font-family: var(--mono);
    font-size: .8125rem;
    margin: 0 0 .5rem;
    line-height: 1.9;
}

.crumb a { color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--filet); }
.crumb a:hover { border-bottom-color: var(--accent); }
.crumb__sep { color: var(--discret); margin: 0 .25rem; }

/* Une liste de faits, sans puces : ce ne sont pas des étapes, et une
   puce ferait croire à un ordre. */
.plain { list-style: none; padding: 0; margin: 0; max-width: 68ch; }
.plain li { margin-bottom: .55rem; padding-left: 0; }
.plain li:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}