/* Parcours identifiants & mot de passe ————————————————————————————————————————

   Composants partagés par les pages d'authentification (récupération du mot de
   passe, réinitialisation, initialisation des identifiants, vérification e-mail,
   confirmation). Le cadre de formulaire (.form-container, .form-group, .submit-btn,
   .error-message, .success-message, .input-wrapper…) est fourni par connexion.css ;
   les critères de mot de passe (.password-requirements…) par forms.css.
   —————————————————————————————————————————————————————————————————————————— */

/* Affichage des messages pilotés par la classe .visible (validation en ligne
   des formulaires de réinitialisation) — gagne sur le [hidden] de connexion.css
   grâce à l'ordre d'import (auth-forms.css après connexion.css). */
.error-message.visible,
.success-message.visible {
  display: block;
}

/* Encadré informatif (ex. « lien valable 24 h ») */
.info-message {
  background-color: color-mix(in srgb, var(--color-secondary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-secondary) 30%, transparent);
  border-radius: var(--radius-sm);
  margin-block-end: var(--space-24);
  padding: var(--space-12);
}

.info-message-text {
  font-size: var(--fs-small);
  line-height: 1.5;
  margin: 0;
}

/* Numéro de téléphone mis en avant dans un texte d'aide */
.phone {
  color: var(--color-primary);
  font-weight: 600;
  white-space: nowrap;
}

/* Lien de retour (flèche + texte) */
.back-link {
  align-items: center;
  color: var(--color-secondary);
  display: inline-flex;
  gap: var(--space-8);
  text-decoration: none;

  & svg {
    height: 1rem;
    width: 1rem;
  }

  &:hover,
  &:focus-visible {
    color: var(--color-accent);
  }
}

/* Carte de message (pages de confirmation / vérification) */
.message-card {
  background-color: var(--color-light-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-20);

  & p {
    margin-block: 0 var(--space-12);
  }

  & ul {
    margin-block: 0 var(--space-16);
    padding-inline-start: var(--space-20);
  }
}

/* Adresse e-mail mise en évidence */
.email-highlight {
  background-color: var(--color-white);
  border-left: 3px solid var(--color-secondary);
  border-radius: var(--radius-sm);
  margin-block-end: var(--space-16);
  padding: var(--space-12);

  & p {
    margin: 0;
  }

  & strong {
    color: var(--color-primary);
  }
}

/* Rappel d'adresse e-mail (étape 2 de l'initialisation) */
.email-info {
  margin-block-start: var(--space-12);
}

.email-label {
  color: var(--color-meta-text);
  font-size: var(--fs-small);
  margin: 0;
}

.email-value {
  color: var(--color-primary);
  font-weight: 600;
  margin: 0;
}

/* Encadré « à noter » */
.info-box {
  background-color: var(--color-light-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  margin-block: var(--space-16);
  padding: var(--space-12);

  & p {
    margin: 0;
  }
}

.info-box-warning {
  background-color: color-mix(in srgb, var(--color-accent) 6%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* Bannière d'alerte (e-mail non confirmé) */
.alert-banner {
  align-items: center;
  background-color: color-mix(in srgb, var(--color-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  padding: var(--space-16);
}

.alert-icon {
  color: var(--color-accent);
  display: flex;
  flex-shrink: 0;
}

.alert-message {
  flex: 1 1 240px;
  font-size: var(--fs-small);

  & p {
    margin: 0;
  }
}

.alert-actions {
  align-items: center;
  display: flex;
  gap: var(--space-8);
}

.alert-btn {
  background-color: var(--color-accent);
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-clear-bg);
  cursor: pointer;
  font-family: var(--ff-primary);
  font-size: var(--fs-small);
  font-weight: 500;
  padding: var(--space-8) var(--space-16);

  &:hover,
  &:focus-visible {
    background-color: var(--color-accent-dark, var(--color-accent));
  }
}

.alert-close {
  align-items: center;
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  padding: var(--space-4);
}