/* LE DÉBUT DE « GLOBAL CSS » DU SQUELETTE DE PROTOTYPE.  (lot #240, 15/09/2026)
   ⭐ Des JETONS d'abord (couleurs, texte, espaces), puis quelques classes. La maquette change les
      jetons ; elle n'a pas à réécrire les classes.
   ⛔ Rien n'est repris d'une charte existante : la charte d'un prototype se décide avec son client. */

:root {
  --fond: #f6f7f9;
  --surface: #ffffff;
  --texte: #1c2330;
  --texte-discret: #5d6675;
  --bordure: #d9dee6;
  --accent: #2f5bd3;
  --accent-texte: #ffffff;
  --erreur: #b3261e;

  --police: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --taille: 16px;
  --rayon: 8px;
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 16px;
  --espace-4: 24px;
  --espace-5: 40px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #12161d;
    --surface: #1b212b;
    --texte: #e6e9ef;
    --texte-discret: #9aa3b2;
    --bordure: #2e3644;
    --accent: #7c9cf0;
    --accent-texte: #0d1117;
    --erreur: #f2b8b5;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { font-size: var(--taille); }
body {
  margin: 0;
  font-family: var(--police);
  line-height: 1.5;
  color: var(--texte);
  background: var(--fond);
}
h1 { margin: 0 0 var(--espace-2); font-size: 1.5rem; }
p { margin: 0 0 var(--espace-3); }

.discret { color: var(--texte-discret); }
.erreur { color: var(--erreur); }

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: var(--espace-4);
}

.champ { display: grid; gap: var(--espace-1); margin-bottom: var(--espace-3); font-weight: 500; }
.champ input {
  font: inherit;
  padding: var(--espace-2) var(--espace-3);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond);
  color: var(--texte);
}
.champ input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.bouton {
  font: inherit;
  padding: var(--espace-2) var(--espace-4);
  border: 0;
  border-radius: var(--rayon);
  background: var(--accent);
  color: var(--accent-texte);
  cursor: pointer;
}
.bouton-discret { background: transparent; color: var(--texte); border: 1px solid var(--bordure); }

.page-connexion { min-height: 100vh; display: grid; place-items: center; padding: var(--espace-3); }
.carte-connexion { width: min(100%, 380px); }
.carte-connexion .bouton { width: 100%; }

.entete {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3);
  padding: var(--espace-3) var(--espace-4);
  background: var(--surface);
  border-bottom: 1px solid var(--bordure);
}
.entete .bouton { margin-left: auto; }
.contenu { max-width: 960px; margin: 0 auto; padding: var(--espace-5) var(--espace-3); }