/* Écran 1 · Connexion (templates/connexion.html), d'après Ecran-Connexion.dc.html. */
html, body { background: #06070a; }
main { display: block; min-height: 100dvh; padding: 0; text-align: left; }
.cx { position: fixed; inset: 0; overflow: hidden; color: #f3f6fc; font: 16px/1.45 Geist, system-ui, sans-serif; }
.cx-photo { position: absolute; top: 0; left: 0; width: 100%; height: 66%; object-fit: cover; object-position: 46% 50%; }
.cx-voile {
  position: absolute; top: 0; left: 0; right: 0; height: 66%;
  background: linear-gradient(180deg, rgba(6, 7, 10, .55) 0%, rgba(6, 7, 10, .05) 22%, rgba(6, 7, 10, .25) 55%, #06070a 100%);
}
.cx-bas {
  position: absolute; left: 24px; right: 24px; bottom: max(42px, calc(env(safe-area-inset-bottom) + 24px));
  display: flex; flex-direction: column; max-width: 420px; margin: 0 auto;
}
.cx h1 {
  margin: 0; font: 900 60px/.9 "Big Shoulders Display", sans-serif; text-transform: uppercase; letter-spacing: .01em;
}
.cx h1 span { color: var(--zs-acc-txt, #a8ebff); }
.cx-sous { margin: 12px 0 0; font-size: 17px; color: #a6aec2; }
.cx-erreur {
  margin-top: 24px; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 18px;
  background: rgba(255, 122, 114, .08); border: 1px solid rgba(255, 122, 114, .35); color: #ff7a72; font-weight: 600;
}
.cx-erreur span { flex: 1; min-width: 0; }
.cx-erreur .copier {
  flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px;
  background: rgba(255, 122, 114, .12); color: #ff7a72; font-weight: 700; font-size: 15px;
}
.cx-google { margin-top: 28px; min-height: 44px; display: flex; justify-content: center; }
.cx-note { margin: 14px 0 0; font-size: 13px; color: #7b8397; text-align: center; }