:root {
  --accent: #7c3aed; --accent-fonce: #6d28d9; --accent-texte: #6d28d9;
  --texte: #1f2430; --texte-doux: #5b6475;
  --fond: #f2f4f7; --fond-carte: #ffffff; --bordure: #d9dee6;
  --gris-google: #dadce0; --texte-google: #3c4043;
  --erreur: #b3261e; --erreur-fond: #fdecea; --erreur-texte: #61130e;
  --info: #8a5a00; --info-fond: #fdf3d8; --info-texte: #4a3300;
  --succes: #1e7a3c; --succes-fond: #e7f6ec; --succes-texte: #124d27;
  --ombre: 0 10px 30px rgba(24, 39, 75, 0.12); --rayon: 20px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px 16px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.5; color: var(--texte);
  background: linear-gradient(160deg, #f7f9fc 0%, var(--fond) 100%);
}

.carte {
  width: 100%; max-width: 440px;
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre); padding: 32px 28px;
}

.entete { text-align: center; margin-bottom: 24px; }
.logo { display: block; margin: 0 auto 12px; }
.entete h1 { margin: 0; font-size: 1.375rem; font-weight: 600; letter-spacing: 0.01em; color: var(--texte); }
.sous-titre { margin: 4px 0 0; font-size: 0.875rem; color: var(--texte-doux); }

.bouton-google, .bouton-principal {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 0 16px;
  font: inherit; font-weight: 500; border-radius: 12px; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.bouton-google { background: #ffffff; color: var(--texte-google); border: 1px solid var(--gris-google); }
.bouton-google:hover { background: #f6f7f9; }
.bouton-google img { width: 18px; height: 18px; display: block; }
a.bouton-google, a.bouton-principal { text-decoration: none; }
.bouton-principal { background: var(--accent); color: #ffffff; border: 1px solid var(--accent); }
.bouton-principal:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
.bouton-google:focus-visible, .bouton-principal:focus-visible { outline: 3px solid var(--accent-texte); outline-offset: 2px; }

.message {
  border: 1px solid var(--bordure); border-left: 4px solid var(--accent);
  border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; background: #f7f9fc;
}
.message p { margin: 0; }
.message p + p { margin-top: 4px; }
.message-titre { font-weight: 600; }
.message.erreur { border-left-color: var(--erreur); background: var(--erreur-fond); color: var(--erreur-texte); }
.message.info { border-left-color: var(--info); background: var(--info-fond); color: var(--info-texte); }
.message.succes { border-left-color: var(--succes); background: var(--succes-fond); color: var(--succes-texte); }
.message.note { border-left-color: var(--accent); }

.aide { margin: 16px 0 0; font-size: 0.875rem; color: var(--texte-doux); text-align: center; }
.aide a { color: var(--accent-texte); text-decoration: none; }
.aide a:hover { text-decoration: underline; }
.aide strong { white-space: nowrap; }

.bloc-titre { margin: 0 0 12px; font-size: 1rem; font-weight: 600; color: var(--texte); }
.formulaire { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.champ { display: flex; flex-direction: column; gap: 4px; }
.champ label { font-size: 0.875rem; font-weight: 500; color: var(--texte); }
.champ input {
  width: 100%; height: 44px; padding: 0 12px;
  font: inherit; color: var(--texte); background: var(--fond-carte);
  border: 1px solid var(--bordure); border-radius: 12px; transition: border-color 0.15s ease;
}
.champ input:hover { border-color: #b9c1cd; }
.champ input:focus-visible { outline: 3px solid var(--accent-texte); outline-offset: 1px; border-color: var(--accent); }
.champ input[readonly] { background: var(--fond); color: var(--texte-doux); }
.champ-code { text-align: center; font-size: 1.375rem; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.formulaire .bouton-principal { margin-top: 4px; }
.connexion { margin: 0; }

.separateur { display: flex; align-items: center; gap: 12px; margin: 24px 0; font-size: 0.875rem; color: var(--texte-doux); }
.separateur::before, .separateur::after { content: ""; flex: 1; height: 1px; background: var(--bordure); }
.bloc .aide { margin-top: 12px; }

.pied { max-width: 440px; text-align: center; font-size: 0.875rem; color: var(--texte-doux); }

@media (max-width: 380px) {
  .carte { padding: 24px 18px; }
  .entete h1 { font-size: 1.2rem; }
}