/* Accès (retours du test du 06/10/2026) : la page de connexion (mot de passe, lien, « Mot de passe oublié ? »), les
   champs d'un nouveau mot de passe (proposition après le lien, « Mon compte → Sécurité »), la fenêtre du prénom et du
   nom, le lien qui ramène au site. Grammaire de la DA « Noir » ; jetons de ../assets/tokens.css, aucun littéral. */

/* Champ de mot de passe : le bouton « Afficher » vit dans le champ, à droite. */
.mdp-saisie { position: relative; }
.mdp-saisie input { padding-right: 92px; }
.mdp-voir {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); height: 32px; min-width: 72px; padding: 0 10px;
  border: 0; border-radius: var(--rayon-1); background: transparent; color: var(--encre-2); font: inherit;
  font-size: var(--taille-etiquette); font-weight: var(--graisse-moyenne); cursor: pointer;
  transition: background var(--duree-rapide) var(--courbe), color var(--duree-rapide) var(--courbe);
}
.mdp-voir:hover { background: var(--voile-3); color: var(--encre); }
.mdp-voir:focus-visible { outline: none; box-shadow: var(--anneau-focus); }

/* Action secondaire écrite comme un lien (« Mot de passe oublié ? ») : un bouton, pas une adresse. */
.lien-action {
  padding: 0; border: 0; background: none; font: inherit; font-size: var(--taille-petit); color: var(--bleu-texte);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer;
}
.lien-action:hover { color: var(--encre); }
.lien-action:focus-visible { outline: none; border-radius: var(--rayon-1); box-shadow: var(--anneau-focus); }
.lien-action:disabled { opacity: 0.5; cursor: not-allowed; }
.champ-lien { justify-self: end; margin-top: 2px; }

/* « ou » entre la connexion par mot de passe et le lien par courriel. */
.separateur { display: flex; align-items: center; gap: 12px; font-size: var(--taille-etiquette); color: var(--encre-2); }
.separateur::before, .separateur::after { content: ""; flex: 1; height: 1px; background: var(--trait); }

@media (max-width: 640px) {
  #form-connexion .actions-form .btn { flex: 1 1 100%; }
}

/* Fenêtre « Comment vous appelez-vous ? » (js/fenetre-nom.js) : le rythme de la fenêtre du code d'accès, deux champs. */
dialog.dialogue-nom .form { gap: 16px; }
dialog.dialogue-nom .champ-erreur { margin-top: 0; font-size: var(--taille-etiquette); color: var(--moins); }
dialog.dialogue-nom .actions { margin-top: 4px; }

/* « Mon compte → Sécurité » : le formulaire et ses phrases gardent une largeur de lecture dans la carte pleine largeur. */
.securite-form { max-width: 520px; }
.securite-corps > .aide { max-width: 640px; }
.securite-corps .actions { margin-top: 12px; }

/* « Site Hypervisible » (06/10, D2) : dans la barre du compte (texte masqué sous 1100 px, l'icône et son nom restent) et en
   bas de la barre latérale, sous les surfaces mesurées. Revenir au site ne ferme pas la session. */
.haut-site { gap: 6px; }
.rail .rail-bas .rail-site { margin: 8px -12px 0; padding: 0 12px; border-top: 1px solid var(--trait); border-radius: 0; height: 44px; font-size: var(--taille-petit); }
.rail .rail-bas .rail-site .ic { width: 16px; height: 16px; }
@media (max-width: 1100px) {
  .haut-site-nom { display: none; }
}

/* « Vérification de votre session… » (lot 20, N14) : le temps de demander la session à l'autre domaine, à la place du
   formulaire. Un point qui respire (opacité seule), immobile sous prefers-reduced-motion. */
.form[hidden] { display: none; }
/* Au repos, la zone d'état reste rendue (elle est annoncée quand son texte arrive) mais ne prend aucune place. */
.verification:empty { margin: 0; }
.verification:empty::before { content: none; }
.verification { display: flex; align-items: center; gap: 10px; margin: 4px 0; font-size: var(--taille-petit); color: var(--encre-2); }
.verification::before {
  content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--bleu-texte);
  animation: verification-souffle 1.2s var(--courbe) infinite alternate;
}
@keyframes verification-souffle { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .verification::before { animation: none; } }

/* Tableau de bord verrouillé par code (23/10, js/verrou-espace.js) : la coquille et l'écran (les données de la
   démonstration, jamais celles du client) passent sous un flou profond, sans geste possible ; le bandeau de la
   démonstration n'apparaît pas. Par-dessus, la fenêtre du code, au rythme de celle du code d'accès. */
body.espace-verrouille > :not(dialog) {
  filter: blur(14px) saturate(0.7); opacity: 0.55; pointer-events: none; user-select: none;
  transition: filter var(--duree-lente) var(--courbe), opacity var(--duree-lente) var(--courbe);
}
body.espace-verrouille .bandeau-demo { display: none; }
dialog.dialogue-verrou { width: min(440px, calc(100vw - 32px)); }
dialog.dialogue-verrou::backdrop { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
dialog.dialogue-verrou .form { gap: 16px; }
dialog.dialogue-verrou h2 { margin-top: 14px; }
dialog.dialogue-verrou .champ-erreur { margin-top: 0; font-size: var(--taille-etiquette); color: var(--moins); }
dialog.dialogue-verrou .actions { margin-top: 4px; justify-content: space-between; align-items: center; }
dialog.dialogue-verrou .actions .btn { margin-left: auto; }
/* Le cadenas, dessiné en CSS : un anneau sur un corps, la couleur d'accent. */
.verrou-cadenas { position: relative; display: block; width: 36px; height: 36px; border-radius: var(--rayon-2); background: var(--voile-3); }
.verrou-cadenas::before {
  content: ""; position: absolute; left: 12px; top: 7px; width: 12px; height: 10px;
  border: 2px solid var(--bleu-clair); border-bottom: 0; border-radius: 7px 7px 0 0;
}
.verrou-cadenas::after { content: ""; position: absolute; left: 9px; top: 16px; width: 18px; height: 13px; border-radius: 3px; background: var(--bleu-clair); }
@media (prefers-reduced-motion: reduce) {
  body.espace-verrouille > :not(dialog) { transition: none; }
}