/* ===== Styles des formulaires ===== */

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);

    &-required::after {
        content: " *";
        color: var(--color-error);
    }
}

.form-control {
    display: block;
    width: 100%;
    height: var(--control-height); /* aligné sur .btn (buttons.css) */
    /* Padding vertical réduit (pas var(--spacing-sm) = 16px) : avec --font-size-input (18px)
       et line-height 1.2 (21.6px), le texte + bordure (3.2px) doivent tenir dans les 44px
       de hauteur fixe. Un select (appearance:none) ROGNE son contenu si ça dépasse — un
       input se contente de déborder visuellement, mais les deux doivent respecter la marge. */
    padding: var(--spacing-xs) var(--spacing-sm);
    font-family: var(--font-family-input);
    font-size: var(--font-size-input);
    line-height: 1.2;
    color: var(--color-input-text);
    background-color: var(--color-input-bg);
    /* var(--field-border-color) : héritée de .field__control (field.css), qui la
       réassigne selon l'état (focus, .is-invalid) — .form-control et .field__chevron
       suivent alors la même couleur sans la dupliquer. Repli sur le token par défaut
       pour les .form-control utilisés hors d'un .field__control. */
    border: 0.1rem solid var(--field-border-color, var(--color-input-border));
    border-radius: var(--border-radius-sm);
    transition: border-color var(--transition-fast);

    /* Pas d'anneau :focus-visible (supprimé ci-dessous) sur les champs : le changement de
       couleur de bordure suffit à indiquer le focus, sans le double cadre de la bague globale. */
    &:focus {
        border-color: var(--color-primary);
    }

    &:focus-visible {
        outline: none;
    }

    /* Lecture seule : reste focusable et annoncé (aria implicite) ; fond neutre + pas de bordure
       d'accent au focus pour signaler « non éditable » sans réduire le contraste du texte. */
    &[readonly] {
        background-color: var(--color-bg-light);
        cursor: default;
        padding-right: 3.6rem; /* place pour le cadenas .field__lock-icon */

        &:focus {
            border-color: var(--field-border-color, var(--color-input-border));
        }
    }

    &:disabled {
        background-color: var(--color-bg-light);
        cursor: not-allowed;
        opacity: 0.6;
    }

    &.is-invalid {
        border-color: var(--color-error);

        &:focus,
        &:focus-visible {
            border-color: var(--color-error);
        }
    }
}

.form-text {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.form-error {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-error);
}

/* Cases à cocher / boutons radio natifs (accent-color) — taille unifiée 1.25rem (20px).
   Les sélecteurs de pages sont regroupés ici en attendant une classe générique (ex. .choice-input)
   posée dans les vues ; chaque page ne garde que ses ajustements d'alignement vertical.
   Exclus : .claim-declaration__check-input / .claim-warranty__check-input / .acnm-warranty-cb —
   cases personnalisées (input masqué + boîte SVG, design partagé components/checkbox.css) ;
   .form__radio-option — migré vers le même composant custom .radio-box/.radio-option
   (components/radio-group.css). */
.attestation-radio__option input[type="radio"] {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* ===================================================================
   .form-actions — barre d'actions de formulaire (Valider / Retour…)
   Composant générique BEM, partagé avec .form__nav (pages/form.css — Form/*, même
   gabarit : la navigation bas de page des formulaires dématérialisés EST un .form-actions
   toujours en variante --split, regroupé ici pour éviter toute divergence de spacing/bordure).
   Reste à terme à remplacer, en phase 2 (après renommage dans les vues), les classes de
   navigation propres à chaque page (*__form-nav, register-actions, mfa-actions, bin-card__actions…).

   Base : ligne flex (retour à la ligne autorisé), séparateur haut, gap/padding-top compacts
   (ex-.form-actions--compact, fusionné dans la base — tous les usages doivent avoir le même
   gabarit compact, plus besoin de modificateur pour ça).
   Modificateurs cumulables :
     .form-actions--split    Retour à gauche / action principale à droite (space-between)
     .form-actions--end      actions alignées à droite
     .form-actions--plain    sans séparateur ni padding-top, marge haute réduite
   Mobile (≤ 620px) : empilement en colonne inversée — action principale en haut,
   lien Retour dessous — bouton principal pleine largeur, lien centré.
   =================================================================== */
.form-actions,
.form__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border-medium);

    @media (max-width: 38.75em) {
        flex-direction: column-reverse;
        align-items: stretch;

        & .btn--primary { width: 100%; }
        & .btn--link { text-align: center; }
    }
}

.form-actions--split {
    justify-content: space-between;
}

.form-actions--end {
    justify-content: flex-end;
}

.form-actions--plain {
    margin-top: var(--spacing-lg);
    padding-top: 0;
    border-top: 0;
}

/* Boutons d'action Contact / Attestation — [Valider][Retour] avec row-reverse.
   DOM : l'action principale est en premier dans le HTML (tab order naturel) ;
   le CSS bascule visuellement Retour à gauche / Valider à droite.
   Mobile : empile en colonne (Valider en haut, Retour en bas).
   Règle groupée ici pour éviter la duplication dans contact.css / attestation.css.
   Phase 2 : migrer vers .form-actions.form-actions--split (écarts : row-reverse,
   gap var(--spacing-lg2), pas de séparateur haut, tous les .btn pleine largeur en mobile). */
.contact-form__actions,
.attestation-form__actions {
    display: flex;
    flex-direction: row-reverse;
    justify-content: start;
    align-items: center;
    gap: var(--spacing-lg2);
    flex-wrap: wrap;
    margin-top: var(--spacing-lg2);
}

@media (max-width: 38.75em) {
    .contact-form__actions,
    .attestation-form__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .contact-form__actions .btn,
    .attestation-form__actions .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* File Input */
.file-input {
    display: none;
}