/* Feuille de style unique, écrite à la main : pas de Tailwind (imposerait
   Node et une étape de build), pas de framework CSS. Variables CSS natives
   pour la cohérence des couleurs, notamment les couleurs de plateforme
   utilisées dans la grille du lot 3 (reprises de plateforme.couleur_hex). */

:root {
  --couleur-texte: #1f2933;
  --couleur-fond: #f8fafc;
  --couleur-bordure: #d2d6dc;
  --couleur-accent: #2563eb;
  --couleur-erreur: #b91c1c;
  --couleur-erreur-fond: #fee2e2;
  --rayon: 6px;
  --espacement: 1rem;
}

* { box-sizing: border-box; }

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

.carte-centree {
  max-width: 380px;
  margin: 4rem auto;
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
}

.page-connexion { background: var(--couleur-fond); }

h1 { font-size: 1.25rem; margin-top: 0; }

label {
  display: block;
  margin-top: var(--espacement);
  font-weight: 600;
  font-size: 0.9rem;
}

input[type="email"],
input[type="password"],
input[type="text"] {
  width: 100%;
  padding: 0.5rem 0.6rem;
  margin-top: 0.25rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  font-size: 1rem;
}

input:focus {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 1px;
}

button {
  margin-top: 1.5rem;
  padding: 0.6rem 1.2rem;
  background: var(--couleur-accent);
  color: #fff;
  border: none;
  border-radius: var(--rayon);
  font-size: 1rem;
  cursor: pointer;
}

button:hover { filter: brightness(0.92); }

.alerte {
  padding: 0.6rem 0.8rem;
  border-radius: var(--rayon);
  font-size: 0.9rem;
}

.alerte-erreur {
  background: var(--couleur-erreur-fond);
  color: var(--couleur-erreur);
}

.entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--couleur-bordure);
}

.entete form { margin: 0; }
.entete button { margin: 0; padding: 0.4rem 0.8rem; font-size: 0.85rem; }

main { padding: 1.5rem; }