/* Écrans de session (vues-session.js) : connexion, second facteur, compte hors équipe.
   Plein cadre, à la place de la coque : une carte de verre centrée sur le fond de l'application.
   Couleurs, rayons et tailles de texte viennent des jetons : le clair et le sombre aussi. */

/* Le fond porte deux halos très légers : sans rien derrière lui, le verre ne se distingue pas d'une surface pleine. */
.tz-session {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding:
    max(var(--tz-espace-6), calc(var(--tz-zone-haut) + var(--tz-espace-4)))
    max(var(--tz-espace-4), calc(var(--tz-zone-droite) + var(--tz-espace-4)))
    max(var(--tz-espace-6), calc(var(--tz-zone-bas) + var(--tz-espace-4)))
    max(var(--tz-espace-4), calc(var(--tz-zone-gauche) + var(--tz-espace-4)));
  background:
    radial-gradient(ellipse 70% 55% at 10% 0%, var(--tz-accent-fond), transparent 72%),
    radial-gradient(ellipse 60% 50% at 100% 100%, var(--tz-violet-fond), transparent 72%),
    var(--tz-fond);
}

/* Le cadre ne reçoit le focus que par script ou par le lien d'évitement : pas d'anneau autour de l'écran entier. */
.tz-session:focus,
.tz-session:focus-visible {
  outline: none;
}

/* Verre fort : la carte porte du texte secondaire, qui ne tient pas le contraste sur le verre ordinaire
   (reference/design-ipados27.md, 3.1). Formes concentriques : ce qui est posé dans la carte prend le rayon
   de la carte moins sa marge, sans descendre sous le rayon des champs. */
.tz-session-carte {
  --tz-session-marge: var(--tz-espace-6);
  --tz-session-rayon: max(var(--tz-rayon-m), calc(var(--tz-rayon-xl) - var(--tz-session-marge)));
  display: flex;
  flex-direction: column;
  gap: var(--tz-espace-5);
  width: min(100%, 26.5rem);
  padding: var(--tz-espace-7) var(--tz-session-marge) var(--tz-session-marge);
  border: 1px solid var(--tz-verre-bord);
  border-radius: var(--tz-rayon-xl);
  background: var(--tz-verre-fort);
  -webkit-backdrop-filter: var(--tz-verre-flou);
  backdrop-filter: var(--tz-verre-flou);
  box-shadow: var(--tz-verre-ombre);
}

.tz-session-carte > * {
  min-width: 0;
}

/* --- En-tête : emblème, nom, titre --- */

.tz-session-entete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tz-espace-2);
  text-align: center;
}

.tz-session-embleme {
  display: grid;
  place-items: center;
  width: calc(var(--tz-cible) + var(--tz-espace-4));
  height: calc(var(--tz-cible) + var(--tz-espace-4));
  margin-bottom: var(--tz-espace-2);
  border-radius: var(--tz-rayon-l);
  background: var(--tz-accent);
  color: var(--tz-sur-accent);
  box-shadow: var(--tz-ombre-2);
}

.tz-session-surtitre {
  color: var(--tz-texte-2);
  font-size: var(--tz-taille-annexe);
  font-weight: 600;
}

.tz-session-titre {
  font-size: var(--tz-taille-titre-1);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.tz-session-texte {
  color: var(--tz-texte-2);
  font-size: var(--tz-taille-annexe);
  overflow-wrap: anywhere;
}

/* --- Formulaire et actions --- */

.tz-session-formulaire {
  display: flex;
  flex-direction: column;
  gap: var(--tz-espace-4);
}

.tz-session-actions {
  display: flex;
  flex-direction: column;
  gap: var(--tz-espace-3);
}

/* Dans la carte, un bouton occupe toute la largeur : une seule action par ligne, facile à viser. */
.tz-session .tz-session-envoi,
.tz-session-actions > .tz-bouton {
  width: 100%;
}

.tz-session-formulaire > .tz-session-envoi {
  margin-top: var(--tz-espace-2);
}

/* Code à usage unique : chiffres larges, espacés, de largeur fixe. */
.tz-session .tz-session-code {
  font-family: var(--tz-police-mono);
  font-size: var(--tz-taille-titre-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3em;
  text-align: center;
}

/* --- Messages --- */

/* La teinte repose sur la couleur de surface : le texte y tient le contraste AA, quoi que le verre laisse voir. */
.tz-session-demo,
.tz-session-motif,
.tz-session-erreur {
  --tz-session-teinte: var(--tz-neutre-fond);
  padding: var(--tz-espace-3) var(--tz-espace-4);
  border-radius: var(--tz-session-rayon);
  background: linear-gradient(var(--tz-session-teinte), var(--tz-session-teinte)) var(--tz-surface);
  color: var(--tz-texte);
  font-size: var(--tz-taille-annexe);
}

.tz-session-demo {
  --tz-session-teinte: var(--tz-orange-fond);
  font-weight: 600;
  text-align: center;
}

.tz-session-erreur {
  --tz-session-teinte: var(--tz-rouge-fond);
  color: var(--tz-rouge-texte);
  font-weight: 600;
}

/* La zone d'alerte reste dans la page pour être annoncée dès qu'un message y arrive ; vide, elle ne prend pas de place. */
.tz-session-erreur:empty {
  display: none;
}

.tz-session-explication {
  font-size: var(--tz-taille-corps);
  text-align: center;
  overflow-wrap: anywhere;
}

.tz-session-explication + .tz-session-explication {
  margin-top: calc(var(--tz-espace-3) * -1);
  color: var(--tz-texte-2);
  font-size: var(--tz-taille-annexe);
}

/* Mention de bas de carte, sous un filet fin tenu en retrait du bord par la marge de la carte. */
.tz-session-mention {
  padding-top: var(--tz-espace-4);
  border-top: 1px solid var(--tz-separateur);
  color: var(--tz-texte-2);
  font-size: var(--tz-taille-note);
  text-align: center;
}

/* --- Écrans étroits (téléphone, iPad en écran partagé) --- */

@media (max-width: 26rem) {
  .tz-session-carte {
    --tz-session-marge: var(--tz-espace-5);
    padding-top: var(--tz-espace-6);
  }
}

/* --- Entrée de la carte : brève, seulement si le mouvement n'est pas réduit, et par transform seulement :
   une opacité animée priverait le flou de ce qui est derrière la carte --- */

@media (prefers-reduced-motion: no-preference) {
  .tz-session-carte {
    animation: tz-session-entree var(--tz-duree-lente) var(--tz-courbe) both;
  }
}

@keyframes tz-session-entree {
  from {
    transform: translateY(var(--tz-espace-4)) scale(0.98);
  }
}