/* Feuille de style du back-office.
 *
 * Les couleurs et les trois règles du tableau de bord : le focus toujours
 * visible, rien signalé par la seule couleur, des tailles en rem qui suivent
 * le réglage de taille de texte.
 */

:root {
  --fond: #ffffff;
  --fond-doux: #f4f4f2;
  --texte: #1b1b1b;
  --texte-doux: #55524e;
  --trait: #d6d3ce;
  --accent: #0b5c4a;
  --alerte: #8f2018;
  --alerte-fond: #fbe9e7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #16181a;
    --fond-doux: #1f2225;
    --texte: #eceff1;
    --texte-doux: #b3bcc2;
    --trait: #333a3f;
    --accent: #6fd3b3;
    --alerte: #ff9c92;
    --alerte-fond: #3a1a17;
  }
}

@media (prefers-contrast: more) {
  :root { --trait: currentColor; --texte-doux: var(--texte); }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
}

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

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

.evitement { position: absolute; left: -999rem; }
.evitement:focus { left: 1rem; top: 1rem; background: var(--fond); padding: 0.5rem 1rem; z-index: 1; }

.entete {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--trait);
  background: var(--fond-doux);
}
.entete .marque { margin: 0; font-weight: 600; }
.entete form { margin: 0; }

main { max-width: 64rem; margin: 0 auto; padding: 1rem; }

h1 { font-size: 1.6rem; line-height: 1.25; }
h2 { font-size: 1.25rem; margin-top: 2rem; }

.aide { color: var(--texte-doux); font-size: 0.95rem; }

.erreurs {
  border: 2px solid var(--alerte); background: var(--alerte-fond); color: var(--texte);
  padding: 0.5rem 1rem; border-radius: 4px;
}
.erreurs p { margin: 0.25rem 0; }

.formulaire label { display: block; font-weight: 600; }
input[type=email], input[type=password], input[type=text] {
  font: inherit; width: 100%; max-width: 24rem; padding: 0.45rem 0.6rem;
  border: 1px solid var(--texte-doux); border-radius: 4px; background: var(--fond); color: var(--texte);
}
button {
  font: inherit; padding: 0.45rem 1rem; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: var(--fond);
}
.entete button { background: transparent; color: var(--accent); }

.scroll-tableau { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
caption { text-align: left; color: var(--texte-doux); padding-bottom: 0.4rem; }
th, td { text-align: left; vertical-align: top; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--trait); }
thead th { border-bottom-width: 2px; }

dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1.25rem; }
dt { font-weight: 600; }
dd { margin: 0; }
@media (max-width: 30rem) {
  dl { grid-template-columns: 1fr; }
  dd { margin-bottom: 0.5rem; }
}

details.info > summary { cursor: pointer; color: var(--accent); }

.secret { font-size: 1.2rem; letter-spacing: 0.08em; word-break: break-all; }

/* Les voyants : un liseré de couleur à gauche, et TOUJOURS le mot écrit — la
   couleur ne fait que doubler ce que dit le texte. */
.voyants { list-style: none; padding: 0; }
.voyants li, p.ok, p.panne {
  border-left: 0.35rem solid var(--trait); padding: 0.3rem 0 0.3rem 0.75rem; margin: 0.4rem 0;
}
.voyants li.panne, p.panne { border-left-color: var(--alerte); }
.voyants li.attention { border-left-color: #b26b00; }
.voyants li.ok, p.ok { border-left-color: var(--accent); }

.confirmation { border-left: 0.35rem solid var(--accent); padding: 0.3rem 0 0.3rem 0.75rem; }
textarea { font: inherit; width: 100%; max-width: 36rem; padding: 0.45rem 0.6rem;
  border: 1px solid var(--texte-doux); border-radius: 4px; background: var(--fond); color: var(--texte); }
fieldset { border: 1px solid var(--trait); border-radius: 4px; }