/* =============================================================
   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;
  left: 22px;
  z-index: 1;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  /* Le dégradé de la marque, comme la croix de la page elle-même : c'est
     la même action, elle doit se présenter pareil. La croix est blanche
     avec une ombre portée — sur le seul aplat #FF6363 le blanc donne
     2,9:1, et le dégradé monte jusqu'à #FFBCBC où il tombe à 1,6:1 ;
     l'ombre pose le liseré sombre qui porte le contraste. Même traitement
     que le bouton principal, qui a le même fond. */
  background: linear-gradient(-38deg, #FFBCBC 0%, #FF6363 54%) #FF6363;
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(255, 99, 99, 0.9);
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s,
              transform 0.2s cubic-bezier(0.22, 0.9, 0.24, 1);
}

/* La police doit être déclarée ICI.
   `.ico` ne porte Material Symbols que dans le gabarit de la page de
   connexion (`gate-v2.css`, portée `.lrn-gate`). Cette croix-ci vit dans
   la page d'accueil, hors de cette portée : sans la règle, le navigateur
   écrivait le mot « close » en toutes lettres, dans la police du site. */
#login-popup .login-popup-close .ico {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(150, 30, 30, 0.55);
}

/* Au survol : le noir de la marque, et une rotation d'un quart de tour.
   Le dégradé est REMPLACÉ, pas recouvert — une `background-image` posée
   resterait au-dessus de toute couleur qu'on lui donnerait ensuite. */
#login-popup .login-popup-close:hover,
#login-popup .login-popup-close:focus-visible {
  background: #1C1C1E;
  /* La couleur doit être REDÉCLARÉE : une propriété qu'une règle de survol
     ne reprend pas garde la valeur d'avant — mais ici l'icône est un <i>
     que le thème colore à part, et le blanc du bouton ne lui parvenait
     plus une fois l'ombre retirée. Sur le noir, la croix ressortait grise. */
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(28, 28, 30, 0.8);
  transform: rotate(-90deg);
}
#login-popup .login-popup-close:hover .ico,
#login-popup .login-popup-close:focus-visible .ico {
  text-shadow: none;
  color: #fff;
}

/* 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;
}

/* LA CROIX NE SE MONTRE QU'AVEC LA PAGE.
   Le cadre s'ouvre en 0,38 s ; la page qu'il contient met plus longtemps
   à arriver. Pendant ce temps l'iframe est vide, et la croix — un rond
   rouge plein, parfaitement opaque — était la seule chose visible sur le
   fond sombre : elle semblait s'afficher AVANT la popup.
   `is-pret` est posé par login-popup.js au chargement de l'iframe, et
   retiré dès qu'elle repart. L'opacité plutôt que `display` : la croix
   garde sa place, rien ne saute quand elle paraît. */
#login-popup .login-popup-close {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

#login-popup.is-pret .login-popup-close {
  opacity: 1;
  pointer-events: auto;
}

@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;
  }
}