/* ——— Page de connexion ——————————————————————— */

/* Centrage vertical de la section formulaire */
.section-container-centered {
  align-items: center;
  display: flex;
  min-height: 70dvh;
}

/* Conteneur du formulaire */
.form-container {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-border);
  margin-inline: auto;
  max-width: min(calc(100% - var(--space-32)), 500px);
  padding: var(--space-32);
  width: 100%;
}

.form-group {
  margin-block-end: var(--space-24);
}

/* En-tête de section (titre + intro) */
.section-header {
  margin-block-end: var(--space-24);

  h1 {
    font-size: 1.5rem;
    margin-block: 0 var(--space-8);
  }

  p {
    font-size: var(--fs-body);
    margin: 0;
    max-width: 50ch;
  }
}

/* Icône positionnée à gauche dans un champ */
.input-icon {
  fill: none;
  height: 1.25rem;
  inset-block-start: 50%;
  inset-inline-start: var(--space-12);
  position: absolute;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transform: translateY(-50%);
  width: 1.25rem;
}

/* Décaler le texte quand une icône est présente à gauche */
.input-wrapper:has(.input-icon) input {
  padding-inline-start: 2.75rem;
}

/* Bouton de soumission — même apparence que .btn.btn__primary.btn-search */
.submit-btn {
    align-items: center;
    background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
    border: none;
    border-radius: 2rem;
    box-sizing: border-box;
    color: var(--color-accent);
    cursor: pointer;
    display: flex;
    font-family: var(--ff-primary);
    font-size: 0.875rem;
    font-weight: 500;
    justify-content: center;
    letter-spacing: 0.05rem;
    line-height: 1;
    padding: var(--space-12) var(--space-24);
    text-transform: uppercase;
    transition-property: background-color, box-shadow, color, scale;
    transition-duration: 150ms;
    transition-timing-function: ease-out;
    width: 100%;

    &.active {
        background-color: var(--color-accent);
        box-shadow: inset 0 0 0 1px var(--color-accent);
        color: var(--color-clear-bg);
        cursor: pointer;

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

        &:active {
            scale: 0.96;
        }
    }

    &:disabled {
        background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
        box-shadow: none;
        color: var(--color-accent);
        cursor: not-allowed;
    }
}

/* Message d'erreur */
.error-message {
  background-color: color-mix(in srgb, var(--color-error, #c0392b) 8%, transparent);
  border: 1px solid var(--color-error, #c0392b);
  border-radius: var(--radius-sm);
  color: var(--color-error, #c0392b);
  margin-block: var(--space-16);
  padding: var(--space-12);

  p {
    font-size: var(--fs-small);
    line-height: 1.5;
    margin: 0;
  }

  &[hidden] { display: none; }
}

/* Message de succès (ex. e-mail de réinitialisation envoyé) */
.success-message {
  background-color: color-mix(in srgb, var(--color-success, #0aad41) 8%, transparent);
  border: 1px solid var(--color-success, #0aad41);
  border-radius: var(--radius-sm);
  color: var(--color-success, #0aad41);
  margin-block: var(--space-16);
  padding: var(--space-12);

  p {
    font-size: var(--fs-small);
    line-height: 1.5;
    margin: 0;
  }

  &[hidden] { display: none; }
}

/* Icône œil du bouton afficher/masquer le mot de passe */
.toggle-password {
  height: 1.5rem;
  width: 1.5rem;

  svg {
    fill: none;
    height: 1rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 1rem;
  }
}

/* Texte d'aide sous le formulaire */
.help-text {
  font-size: var(--fs-small);
  margin-block-start: var(--space-16);
  max-width: 50ch;
}

/* Variante élargie de .form-container — page de conditions d'utilisation */
.form-container--wide {
  max-width: min(calc(100% - var(--space-32)), 720px);
}

/* Zone scrollable des conditions d'utilisation, pour éviter d'allonger la page indéfiniment */
.conditions-scroll-panel {
  background-color: var(--color-light-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  margin-block-end: var(--space-24);
  max-height: 40dvh;
  overflow-y: auto;
  padding: var(--space-16) var(--space-24);
}

/* Bloc d'acceptation / refus des conditions */
.conditions-actions {
  .confirm-modal__checkbox-label {
    margin-block-end: var(--space-16);
  }
}

.conditions-actions__buttons {
  display: flex;
  gap: var(--space-12);
  justify-content: flex-end;

  .btn {
    justify-content: center;
    width: auto;
  }

  /* Le bouton "J'accepte" reste inactif tant que la case n'est pas cochée */
  .btn[aria-disabled="true"] {
    background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
    box-shadow: none;
    color: var(--color-accent);
    cursor: not-allowed;
    pointer-events: none;

    &:hover,
    &:focus {
      background-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
      box-shadow: none;
    }
  }
}

/* Texte d'aide sous les boutons d'action des conditions */
.conditions-actions__hint {
  color: var(--color-body-dimmed-text);
  font-size: var(--fs-small);
  margin-block-start: var(--space-16);
}