/* ==========================================================================
   GA Login — écran de connexion de Garde Alternée (étape 23d, #836)

   Composant propre à l'application, sur les conventions de la bibliothèque
   (BEM, tokens seuls, sans imbrication ni :has()). Référence :
   projet/design/Comptes et notifications.dc.html (#connexion).

   Structure BEM :
   - .login                    → L'écran (téléphone : plein écran surface ;
                                 ≥ 700 px : fond bg, carte de 420 px centrée)
     - .login__view            → Une vue (connexion, oubli, demande envoyée,
                                 nouveau mot de passe, adresse confirmée)
     - .login__top             → « ‹ Connexion »
     - .login__body            → Logo, titre, champs
     - .login__foot            → Action principale (en bas sur téléphone)
     - .login__link            → Lien « Mot de passe oublié ? » (--inline : à
                                 côté du libellé sur bureau ; --foot : sous
                                 l'action sur téléphone)
     - .login__done            → Rond encre et coche (demande envoyée)
   - .login-alert              → Refus : fond surface, filet encre 1,5 px,
                                 triangle (DECISIONS : avertissement)
   - .pwd                      → Champ de mot de passe + « Afficher »
   - .pwd-rules                → Règles du nouveau mot de passe, cochées à la
                                 saisie (.pwd-rule--ok, --unknown)

   Accessibilité :
   - .login-alert est role="alert", masqué (hidden) tant qu'il est vide.
   - « Afficher » est un bouton aria-pressed ; le champ garde son label.
   - Chaque règle porte son état en texte (.sr-only), pas seulement la coche.
   ========================================================================== */

.login {
  min-height: 100dvh;
  background-color: var(--color-surface);
  color: var(--color-text);
}

.login__card { display: flex; flex-direction: column; min-height: 100dvh; }

.login__view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.login__view[hidden] { display: none; }

.login__top {
  display: flex;
  align-items: center;
  padding: 10px 12px 10px 6px;
  padding-top: calc(10px + env(safe-area-inset-top));
}

.login__back { gap: 6px; padding: 0 10px; font-size: var(--font-size-md); }

.login__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  padding: 28px 20px 0;
}

/* Sans barre de retour : le contenu descend (maquettes Connexion, Nouveau mot de passe) */
#login-form .login__body,
.login__body--top { padding-top: calc(44px + env(safe-area-inset-top)); }

#login-form .login__body { gap: 22px; }

.login__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.login__logo { display: block; width: 56px; height: 56px; }

.login__name {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--font-weight-black);
  font-size: 28px;
  line-height: 28px;
  letter-spacing: -0.02em;
}

.login__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-3xl);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.login__title:focus { outline: none; }

#login-form .login__title { margin-top: 8px; }

.login__intro { display: flex; flex-direction: column; gap: 10px; }

.login__text {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: 1.5;
  text-wrap: pretty;
}

.login__text strong { overflow-wrap: anywhere; }

.login__text--muted { font-size: var(--font-size-md); color: var(--color-text-muted); }

.login__text--note { font-size: 0.875rem; line-height: 1.45; color: var(--color-text-muted); }

.login__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.login__link {
  min-height: var(--tap-min);
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.login__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

/* Téléphone : le lien est sous l'action principale (maquette Connexion téléphone) */
.login__link--inline { display: none; }

.login__remember { align-items: flex-start; gap: 12px; }

.login__remember .checkbox__box { margin-top: -1px; }

.login__remember-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--font-size-md);
}

.login__hint {
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--color-text-muted);
}

.login__foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 20px 28px;
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
}

.login__submit {
  width: 100%;
  min-height: var(--control-height-lg);
  font-size: var(--font-size-base);
}

.login__again {
  width: 100%;
  min-height: var(--control-height);
  font-variant-numeric: tabular-nums;
}

.login__again:disabled {
  border-color: var(--color-border);
  color: var(--color-text-muted);
  cursor: default;
}

.login__done {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: var(--color-text);
  color: var(--color-surface);
}

/* --------------------------------------------------------------------------
   AVERTISSEMENT
   -------------------------------------------------------------------------- */
.login-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: var(--border-control) solid var(--color-text);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: var(--font-size-md);
  line-height: 1.4;
}

.login-alert[hidden] { display: none; }

.login-alert__icon { flex: none; margin-top: 2px; }

/* --------------------------------------------------------------------------
   MOT DE PASSE : « AFFICHER » ET RÈGLES
   -------------------------------------------------------------------------- */
.pwd { position: relative; display: flex; }

.pwd__input { flex: 1; min-width: 0; padding-right: 92px; }

.pwd__toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  height: 40px;
  padding: 0 10px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  transform: translateY(-50%);
  cursor: pointer;
}

.pwd__toggle:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: 0;
}

.pwd-rules {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.pwd-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
}

.pwd-rule__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border: var(--border-strong) solid var(--color-text);
  border-radius: var(--radius-full);
  color: var(--color-surface);
}

.pwd-rule__mark svg { display: none; }

.pwd-rule--ok .pwd-rule__mark { border: none; background-color: var(--color-text); }

.pwd-rule--ok .pwd-rule__mark svg { display: block; }

/* Ancien mot de passe inconnu (lien reçu) : le serveur vérifie, la règle reste neutre */
.pwd-rule--unknown { color: var(--color-text-muted); }

.pwd-rule--unknown .pwd-rule__mark { border-color: var(--color-border); }

/* --------------------------------------------------------------------------
   À PARTIR DE 700 PX — carte centrée (maquette Connexion bureau erreur)
   -------------------------------------------------------------------------- */
@media (min-width: 700px) {
  .login {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: var(--color-bg);
  }

  .login__card {
    box-sizing: border-box;
    width: 420px;
    min-height: 0;
    padding: 36px;
    border: var(--border-hair) solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
  }

  .login__view { gap: 20px; }
  .login__top { margin: -10px 0 -8px -14px; padding: 0; }
  .login__body,
  #login-form .login__body,
  .login__body--top { gap: 20px; padding: 0; }
  .login__logo { width: 44px; height: 44px; }
  .login__brand { gap: 12px; }
  .login__name { font-size: 22px; line-height: 22px; }
  .login__title { font-size: 28px; }
  #login-form .login__title { margin-top: 0; }
  .login__link--inline { display: inline; min-height: 0; font-weight: var(--font-weight-normal); font-size: 0.875rem; }
  #login-form .login__link--foot,
  .login__hint { display: none; }
  .login__remember { align-items: center; gap: 10px; }
  .login__foot { padding: 0; }
}