/* Socle SSR — style sobre du lot A1 (la charte de la gamme arrive plus tard).
   Thèmes clair et sombre, unités relatives uniquement. */

:root {
  --fond: #f7f7f5;
  --surface: #ffffff;
  --encre: #1c2733;
  --encre-douce: #5a6a7a;
  --bordure: #d9dee3;
  --accent: #1e5c52;
  --accent-contraste: #ffffff;
  --ok: #1e7d46;
  --ko: #b03030;
  --alerte-fond: #fdf3e2;
  --alerte-bord: #d9a13c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #14181d;
    --surface: #1d232a;
    --encre: #e8ecef;
    --encre-douce: #9aa7b3;
    --bordure: #333c46;
    --accent: #4fb39f;
    --accent-contraste: #10221e;
    --ok: #58c584;
    --ko: #e07a7a;
    --alerte-fond: #33290f;
    --alerte-bord: #a97b1e;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: var(--fond);
  color: var(--encre);
  line-height: 1.5;
}

/* En-tête ------------------------------------------------------------- */

.entete {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.6rem 1.2rem;
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
  flex-wrap: wrap;
}

.entete .marque { font-weight: 700; color: var(--accent); }
.entete nav { display: flex; gap: 1rem; flex: 1; }
.entete a { color: var(--encre); text-decoration: none; }
.entete a:hover { color: var(--accent); }
.entete .utilisateur { color: var(--encre-douce); font-size: 0.9rem; }

/* Pages ---------------------------------------------------------------- */

.page { max-width: 70rem; margin: 0 auto; padding: 1.5rem 1.2rem; }
h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 0.8rem; }
.note, .vide { color: var(--encre-douce); }

/* Cartes d'intégration -------------------------------------------------- */

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
}

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 0.5rem;
  padding: 1rem;
}

.carte--degrade { border-color: var(--alerte-bord); }
.carte h2 { margin: 0 0 0.4rem; }
.carte dl { margin: 0.6rem 0 0; font-size: 0.9rem; }
.carte dt { color: var(--encre-douce); }
.carte dd { margin: 0 0 0.5rem; }

.statut { font-weight: 600; margin: 0; }
.statut--nominal { color: var(--ok); }
.statut--degrade { color: var(--ko); }
.erreur-detail { color: var(--ko); font-size: 0.85rem; }

/* Filtres et formulaires ------------------------------------------------ */

.filtres, .formulaire {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
  align-items: end;
  margin: 0 0 1rem;
}

.formulaire { flex-direction: column; align-items: stretch; max-width: 28rem; }

label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9rem; }
.filtres label { flex-direction: row; align-items: center; gap: 0.4rem; }

input, select, button {
  font: inherit;
  color: var(--encre);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 0.3rem;
  padding: 0.35rem 0.6rem;
}

select option { background: var(--surface); color: var(--encre); }

button {
  background: var(--accent);
  color: var(--accent-contraste);
  border-color: var(--accent);
  cursor: pointer;
  align-self: start;
}

/* Tableaux -------------------------------------------------------------- */

.tableau-defilant { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 0.5rem;
  font-size: 0.9rem;
}

th, td {
  text-align: left;
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--bordure);
  vertical-align: top;
}

th { color: var(--encre-douce); font-weight: 600; }
td pre {
  margin: 0.3rem 0 0;
  padding: 0.4rem;
  background: var(--fond);
  border-radius: 0.3rem;
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.ok { color: var(--ok); }
.ko { color: var(--ko); }

/* Alertes et messages --------------------------------------------------- */

.alerte, .alerte-expiration, .messages li {
  background: var(--alerte-fond);
  border: 1px solid var(--alerte-bord);
  border-radius: 0.3rem;
  padding: 0.2rem 0.5rem;
}

.alerte { display: block; padding: 0.6rem 0.8rem; margin: 0 0 1rem; }
.alerte-expiration { font-size: 0.8rem; margin-left: 0.4rem; }

.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.messages li { margin-bottom: 0.5rem; }

/* Page de connexion ----------------------------------------------------- */

.page-connexion {
  max-width: 24rem;
  margin: 12vh auto 0;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: 0.6rem;
  text-align: center;
}

.bouton {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.4rem;
  background: var(--accent);
  color: var(--accent-contraste);
  border-radius: 0.4rem;
  text-decoration: none;
  font-weight: 600;
}