/* ============================================================================
   LA PAGE D'IDENTIFICATION SUR TÉLÉPHONE

   `lernen/css/style.css` est la feuille du thème, réimportée telle quelle à
   chaque évolution : une retouche faite dans son corps serait perdue au
   passage. Ce qui doit la corriger vit donc ici, dans une feuille à nous,
   chargée après elle par `layouts/lernen-gate`.
   ========================================================================= */

/* LE SECOURS PAR MOT DE PASSE.

   « Le code n'arrive pas ? Utiliser mon mot de passe » n'était stylé que
   dans `@media (min-width: 1101px)`. Sous cette largeur le bouton gardait
   l'apparence par défaut du navigateur — gris, petit, indistinct du texte
   autour : on le voyait sur un ordinateur, pas sur un téléphone, alors que
   c'est la seule porte de sortie quand le code n'arrive pas.

   Les valeurs reprennent le bloc desktop : c'est la même ligne, elle doit
   se lire pareil partout. Le soulignement s'y ajoute, parce qu'un bouton
   sans cadre ni couleur propre ne s'annonce pas comme cliquable. */
.gate-switch {
  margin: 14px 0 0;
  text-align: center;
  font-size: 15.5px;
  font-weight: 600;
  color: #6E6D72;
}

.gate-switch button,
.gate-switch a {
  border: none;
  background: none;
  padding: 2px 0;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 800;
  color: #1C1C1E;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.gate-switch button:hover,
.gate-switch a:hover {
  color: #FF6363;
}

.gate-switch button:focus-visible,
.gate-switch a:focus-visible {
  outline: 3px solid #1C1C1E;
  outline-offset: 3px;
  border-radius: 4px;
}