/* Pages hors application (connexion, mot de passe, 403) en Arc UI (13/10, « plus de Tailwind »). Jetons seulement. */
.cn-guest { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 16px; background: var(--surface-sunken); color: var(--ink); font-family: var(--font-sans, 'Geist', system-ui, sans-serif); }
.cn-guest__wrap { width: 100%; max-width: 420px; display: grid; gap: 24px; }
.cn-guest__brand { display: grid; justify-items: center; gap: 6px; text-align: center; }
.cn-guest__logo { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 18px; background: var(--ink); color: var(--surface); font-size: 22px; }
.cn-guest__name { margin: 6px 0 0; font-size: 22px; font-weight: 500; letter-spacing: 0; text-transform: uppercase; } /* capitales sans interlettrage (Anthony, 30/10) */
.cn-guest__card { padding: 28px; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-overlay); }
.cn-guest__title { margin: 0 0 4px; font-size: 20px; font-weight: 500; }
.cn-guest__lead { margin: 0 0 20px; font-size: 14px; color: var(--ink-3); }
.cn-guest__status { margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--success-soft); font-size: 14px; }
.cn-guest__form { display: grid; gap: 16px; }
.cn-guest__form .cn-input { width: 100%; }
.cn-guest__labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cn-guest__link { font-size: 13px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.cn-guest__link:hover { color: var(--ink); }
.cn-guest__check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.cn-guest__check input { width: 16px; height: 16px; accent-color: var(--ink); }
.cn-guest__submit { width: 100%; justify-content: center; }
.cn-guest__back { margin: 20px 0 0; text-align: center; }
.cn-guest__error { justify-items: center; text-align: center; gap: 8px; }
.cn-guest__code { margin: 0 0 8px; line-height: 1; font-family: var(--font-display, inherit); font-size: 56px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Fond en grille de points (30/10) : toile plein écran sous le contenu, fondu vers les bords par masque (option « fade »).
   Couleurs du composant Arc : trait fort au repos, accent sous la loupe (monochrome ici). */
.cn-guest { position: relative; isolation: isolate; }
.cn-guest__dots { position: fixed; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; pointer-events: none; --dot-grid-color: var(--line-control); --dot-grid-active: var(--ink); -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 75% 75% at 50% 50%, #000 45%, transparent 100%); }

/* Carte de connexion (30/10) : bloc Arc gratuit « sign-in » (titre en display, formulaire, séparateur « ou », Google). */
.cn-guest__card.cn-signin { padding: 32px; }
.cn-guest__wrap:has(> .cn-signin) { max-width: 432px; }
.cn-signin__divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--ink-3); font-size: 12px; line-height: 1; }
.cn-signin__divider::before, .cn-signin__divider::after { flex: 1; height: 1px; background: var(--line); content: ""; }
.cn-signin__google { width: 100%; justify-content: center; }
.cn-signin__google svg { flex: none; }
/* Entrée de la carte : glissé flou des étapes du bloc. */
.cn-guest__wrap { animation: cn-guest-enter 520ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes cn-guest-enter { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } }
@media (max-width: 520px) { .cn-guest__card.cn-signin { padding: 24px; } }
@media (prefers-reduced-motion: reduce) { .cn-guest__wrap { animation: none; } }