/* web/acces.css — l'accueil, l'inscription et la double authentification. Jetons du système de design seulement (docs/design-system.md). */
#acces { max-width: 560px; }
#acces h1 { font-size: var(--t-4); line-height: 1.2; margin: var(--s-5) 0 var(--s-3); }
#acces h2 { font-size: var(--t-2); font-weight: 600; margin: 0 0 var(--s-3); }
.acces-intro { color: var(--encre-2); margin-bottom: var(--s-4); }
#acces form label { display: block; margin: var(--s-3) 0; font-weight: 600; font-size: var(--t-2); }
#acces input[type="text"], #acces input[type="email"], #acces input[type="password"] {
  display: block; width: 100%; min-height: 44px; margin-top: var(--s-1); padding: 0 var(--s-3); box-sizing: border-box;
  background: var(--fond); border: var(--trait) solid var(--encre-3); border-radius: var(--r-2); color: var(--encre); font: inherit; }
#acces input:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
#acces .etiquette { display: block; font-weight: 400; margin-top: var(--s-1); }
.acces-adresse { display: flex; align-items: center; gap: var(--s-2); }
.acces-adresse input { margin-top: var(--s-1); flex: 1 1 auto; min-width: 0; }
.acces-suffixe { color: var(--encre-2); font-weight: 400; white-space: nowrap; margin-top: var(--s-1); }
.acces-message { min-height: 1.35em; margin: var(--s-2) 0; font-size: var(--t-1); color: var(--action); }
.acces-message.bon { color: var(--entree); }
.acces-etapes { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
.acces-etapes li { margin-bottom: var(--s-3); }
.acces-cle { font-variant-numeric: tabular-nums; font-size: var(--t-3); letter-spacing: 0.04em; margin: var(--s-2) 0; padding: var(--s-3); background: var(--fond);
  border: var(--trait) solid var(--filet); border-radius: var(--r-2); word-break: break-word; user-select: all; }
/* Un code ne se coupe JAMAIS en deux lignes (il se recopie à la main) : une colonne sur téléphone, deux quand la place le permet. */
.acces-codes { list-style: decimal; padding-left: var(--s-5); margin: var(--s-4) 0; column-gap: var(--s-5); font-variant-numeric: tabular-nums; font-size: var(--t-3); }
.acces-codes li { margin-bottom: var(--s-2); white-space: nowrap; }
@media (min-width: 521px) { .acces-codes { columns: 2; } }
.acces-coche { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; font-weight: 400; }
.acces-coche input { width: 24px; height: 24px; margin: 0; }
#acces a.bouton { display: inline-flex; align-items: center; text-decoration: none; }

.acces select, #formulaire-inscription select { min-height: 44px; padding: 0 var(--s-3); box-sizing: border-box; width: 100%; max-width: 100%; background: var(--fond);
  border: var(--trait) solid var(--encre-3); border-radius: var(--r-2); color: var(--encre); font: inherit; }
#formulaire-inscription select:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }

/* Logo dashlife : on règle l'affichage ici, jamais dans les fichiers SVG. */
.logo-complet { display: block; margin-bottom: var(--s-5); }
.logo-complet img { display: block; height: 24px; width: auto; }
.logo-marque { display: inline-flex; flex: none; }
.logo-marque img { display: block; height: 24px; width: 24px; }