/* Dialogue de confirmation (valeurs de .dialogue), pages hors coquille (connexion, nouvelle marque) :
   une scène noire, le logotype, un titre traversé par le faisceau devant son halo, une carte. */
dialog.dialogue {
  width: min(440px, calc(100vw - 32px)); padding: 24px; border-radius: var(--rayon-4); background: var(--panneau);
  border: 1px solid var(--trait); box-shadow: var(--ombre-flottante), var(--trait-lumiere); color: var(--encre);
}
dialog.dialogue::backdrop { background: var(--voile-fond); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog.dialogue h2 { font-size: var(--taille-h3); line-height: 1.3; letter-spacing: var(--approche-h3); }
dialog.dialogue p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--encre-2); }
dialog.dialogue .actions { justify-content: flex-end; margin-top: 20px; }
/* Fenêtre du code d'accès (js/fenetre-code.js) : le formulaire garde le rythme du dialogue, l'erreur reste rouge. */
dialog.dialogue-code .form { gap: 16px; }
dialog.dialogue-code .champ-erreur { margin-top: 0; font-size: var(--taille-etiquette); color: var(--moins); }
dialog.dialogue-code .actions { margin-top: 4px; }

.page { position: relative; min-height: 100vh; display: grid; place-items: start center; padding: 56px 16px 80px; overflow-x: clip; }
.page-in { position: relative; width: 100%; max-width: 520px; }
.page-in.large { max-width: 720px; }
.page-lumiere { position: absolute; left: 50%; top: 0; width: min(1100px, 100%); height: 520px; transform: translateX(-50%); pointer-events: none; }
.page-lumiere .halo { position: absolute; left: calc(50% - 460px); top: -120px; width: 760px; height: 460px; background: var(--halo); filter: blur(24px); }
/* Le faisceau sort du titre et file jusqu'au bord de l'écran (la page coupe ce qui dépasse). */
.page .ecran-titre-ligne { position: relative; margin-right: calc((100% - 100vw) / 2); }
.page .carte-etroite { max-width: 560px; }
.page .marque { flex: none; display: inline-flex; width: auto; height: 28px; margin-bottom: 40px; }
.logotype-img { display: block; height: 28px; width: auto; }
.page-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 40px; }
.page-tete .marque { margin-bottom: 0; }
.page .titre { position: relative; }
.page .phrase { margin-bottom: 24px; }
.page .carte { padding: 24px; }
.page .carte:hover { background: var(--voile-2); border-color: var(--trait); }
.page-bas { margin-top: 20px; }
.actions-form { margin-top: 0; }
.marque-champ input { height: 48px; font-size: 18px; letter-spacing: -0.01em; }
.marque-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px; }
.marque-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.marque-note { max-width: 46ch; font-size: var(--taille-petit); line-height: 1.5; color: var(--encre-2); }
@media (max-width: 640px) {
  .page { padding-top: 40px; }
  .page .ecran-titre-ligne { margin-right: 0; }
  .marque-ligne { grid-template-columns: 1fr; }
  .marque-actions .btn { width: 100%; }
}