/* =============================================================
   Popup plein écran — page de connexion (mew_dash/connexion.html)

   /login s'ouvre ici dans un cadre plein écran plutôt que par
   navigation, avec une entrée/sortie animée. Le contenu vient de la
   page elle-même dans un <iframe> : elle porte déjà sa propre feuille
   (lernen/css/style.css) et ses propres scripts, donc rien n'est
   dupliqué ni reconstruit ici — contrairement à lernen-popup.css, qui
   doit extraire et préfixer chaque règle parce que son contenu vit
   directement dans la page Bootstrap.

   Une seule animation par état (entrée / sortie), posée sur
   `.login-popup-frame` : le bouton de fermeture est un enfant de ce
   cadre, pas un voisin animé séparément — il n'a donc aucune règle
   `animation` qui lui soit propre, il suit l'opacité et le
   déplacement du cadre comme n'importe quel autre contenu. Impossible
   qu'il apparaisse ou disparaisse en décalage.

   Le fondu d'arrière-plan (`#login-popup`) utilise deux noms de
   keyframes distincts, un pour l'entrée et un pour la sortie, plutôt
   que le même nom avec `reverse` : une fois l'animation d'entrée
   terminée (`fill-mode: both`, figée sur son état final), rejouer la
   même keyframe en sens inverse ne redémarre pas de façon fiable —
   seul un changement de nom d'animation garantit qu'elle rejoue.
   ============================================================= */

#login-popup {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  background: rgba(15, 15, 16, 0.55);
}

#login-popup.is-open {
  display: block;
  animation: loginPopupScrimIn 0.28s ease both;
}

#login-popup.is-closing {
  display: block;
  animation: loginPopupScrimOut 0.22s ease both;
  pointer-events: none;
}

#login-popup .login-popup-frame {
  position: absolute;
  inset: 0;
}

#login-popup.is-open .login-popup-frame {
  animation: loginPopupIn 0.38s cubic-bezier(0.22, 1, 0.32, 1) both;
}

#login-popup.is-closing .login-popup-frame {
  animation: loginPopupOut 0.22s cubic-bezier(0.4, 0, 1, 1) both;
}

#login-popup iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}

/* Enfant du cadre, sans animation propre : voir la note en tête de
   fichier. */
#login-popup .login-popup-close {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: rgb(254 228 225);
  color: #1c1c1e;
  cursor: pointer;
  transition: background 0.2s ease;
}

#login-popup .login-popup-close:hover {
  background: rgb(255 214 210);
}

/* Connexion réussie : le cadre continue tel quel jusqu'à la vraie page
   (il l'affiche déjà), mais la croix n'a plus lieu d'être — on ne
   « ferme » plus rien, on part. Elle disparaît dans le même geste que
   celui qui déclenche la navigation (voir login-popup.js), pas après
   coup : sans ça, elle resterait la dernière chose peinte à l'écran
   pendant que le navigateur tient l'ancienne page en attendant que la
   suivante soit prête. */
#login-popup.is-navigating .login-popup-close {
  display: none;
}

@keyframes loginPopupScrimIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes loginPopupScrimOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes loginPopupIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes loginPopupOut {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
}

html.login-popup-locked {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  #login-popup,
  #login-popup .login-popup-frame {
    animation-duration: 0.01ms !important;
  }
}