/* Pages hors application : connexion, et rien d'autre.
   La carte est un objet tenu au centre, pas un formulaire collé en haut. */

.hors-app {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--gouttiere);
}

.hors-app-cadre {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-8);
  width: 100%;
  max-width: 22rem;
}

.hors-app-marque {
  font-size: var(--texte-s);
  font-weight: var(--poids-meta);
  letter-spacing: var(--approche-s);
  color: var(--texte-doux);
}

.carte-connexion {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--espace-5);
  width: 100%;
  padding: var(--espace-8) var(--espace-6);
  background: var(--surface-2);
  border: var(--filet) solid var(--bord);
  border-radius: var(--rayon-m);
  box-shadow: inset 0 var(--filet) 0 var(--arete);
}

.carte-connexion h1 {
  font-size: var(--titre-s);
  font-weight: var(--poids-titre);
  letter-spacing: var(--approche-s);
}

/* La place du message est toujours tenue : la carte ne grandit pas de
   52 px et ne remonte pas de 84 px quand l'erreur apparaît. */
.carte-connexion .alerte {
  margin: 0;
  padding: 0;
  min-height: calc(var(--texte-s) * var(--interligne));
  font-size: var(--texte-s);
  font-weight: var(--poids-meta);
  color: var(--lueur-chaude);
}

.carte-connexion .bouton-principal {
  align-self: flex-start;
  margin-top: var(--espace-2);
}

@media (max-width: 560px) {
  .hors-app-cadre {
    max-width: 100%;
  }

  .carte-connexion {
    padding: var(--espace-6) var(--espace-5);
  }
}