:root {
  --orange: #e1741f;
  --noir: #111113;
  --fond: #f6f6f7;
  --carte: #ffffff;
  --texte: #1c1c1e;
  --gris: #6b6b70;
  --bordure: #e2e2e5;
  --vert: #1f8a4c;
  --rouge: #c4342c;
}

* { box-sizing: border-box; }

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

header {
  background: var(--noir);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

header img { height: 38px; }
header h1 { font-size: 17px; margin: 0; font-weight: 600; flex: 1; }
header .compte { color: #b9b9be; font-size: 14px; }

main { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }

.carte {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}

h2 { font-size: 16px; margin: 0 0 16px; }

label { display: block; font-size: 14px; font-weight: 600; margin: 16px 0 6px; }
label:first-of-type { margin-top: 0; }
.aide { font-weight: 400; color: var(--gris); font-size: 13px; }

input[type="text"], input[type="password"], input[type="url"], textarea, select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  font: inherit;
  background: #fff;
  color: inherit;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--orange); border-color: var(--orange); }
textarea { min-height: 90px; resize: vertical; }

button {
  background: var(--orange);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 12px 20px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
button:disabled { opacity: .55; cursor: progress; }
button.discret { background: transparent; color: var(--gris); font-weight: 500; padding: 8px 12px; }

.compteurs { display: flex; gap: 12px; flex-wrap: wrap; }
.compteur {
  flex: 1 1 140px;
  background: var(--fond);
  border-radius: 12px;
  padding: 14px;
}
.compteur .nombre { font-size: 26px; font-weight: 700; }
.compteur .libelle { font-size: 13px; color: var(--gris); }

.message { padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 14px; display: none; }
.message.ok { background: #e8f5ec; color: var(--vert); display: block; }
.message.erreur { background: #fdeceb; color: var(--rouge); display: block; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--bordure); vertical-align: top; }
th { color: var(--gris); font-weight: 600; font-size: 13px; }
tbody tr:last-child td { border-bottom: 0; }
.vide { color: var(--gris); font-size: 14px; }

.etat { font-size: 13px; color: var(--gris); margin-top: 12px; }
.pastille { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.pastille.on { background: var(--vert); }
.pastille.off { background: #c9c9ce; }

.connexion { max-width: 380px; margin: 12vh auto; padding: 0 16px; }
.connexion .logo { display: block; margin: 0 auto 24px; width: 190px; }
.actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; }

details summary { cursor: pointer; font-size: 14px; color: var(--gris); }
details .contenu { margin-top: 14px; }

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #161618; --carte: #1f1f22; --texte: #f2f2f4;
    --bordure: #33333a; --gris: #9a9aa2;
  }
  input[type="text"], input[type="password"], input[type="url"], textarea, select {
    background: #2a2a2f; color: var(--texte);
  }
  .compteur { background: #26262b; }
  .message.ok { background: #14301f; }
  .message.erreur { background: #35191a; }
}