/* ===== Typographie commune aux groupes de questions radio (légende + options) =====
   Une seule règle pour toutes les pages ; chaque page ne garde que sa mise en page propre
   (espacements, disposition, poids de police du libellé le cas échéant). Généralisation de
   la valeur posée initialement sur .person-identity__radio-group (person-identity.css).

   Le sélecteur cible le CONTENEUR de chaque groupe (légende + options) : la légende et les
   labels d'option héritent (color/font-family/font-size sont des propriétés héritées),
   pas besoin de les lister individuellement — sauf s'ils portent déjà une règle explicite,
   qui doit alors être retirée côté page (voir les fichiers listés ci-dessous).
     .person-identity__radio-group      (person-identity.css   — référence)
     .attestation-radio__group          (attestation.css)
     .address-detail__radio-group       (saisie-information-detail.css)
     .form__field-group                 (form.css — PPEForm, VehiculeLocationForm)
     .my-account__radio-group           (my-account.css)

   Hors périmètre (raison fonctionnelle) : Process/ClaimDeclaration et
   Process/ClaimDeclarationGlobalWarranty (claim-declaration.css /
   claim-declaration-global-warranty.css) — ces questionnaires plein écran utilisent une
   identité typographique dédiée (--color-text-label, Inter, pas Open Sans) partagée par
   leurs boutons-cartes de réponse ET leurs listes de cases à cocher (choix multiple) ;
   n'aligner que la liste de cases créerait une incohérence à l'intérieur de la même page. */
:is(
    .person-identity__radio-group,
    .attestation-radio__group,
    .address-detail__radio-group,
    .form__field-group,
    .my-account__radio-group
) {
    font-family: var(--font-family-label); /* Open Sans */
    font-size: var(--font-size-base); /* 16px */
    color: var(--color-text-body); /* #3D515A */
}

/* ===== .radio-options / .radio-option — liste d'options empilées (case + libellé) =====
   Généralisé depuis .person-identity__radio-options/-label ; partagé avec address-detail
   (saisie-information-detail.css). Rendu du bouton : .radio-box ci-dessous. */
.radio-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs2);
    align-items: flex-start;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs2);
    cursor: pointer;
    line-height: var(--line-height-base);
}

/* ===== .radio-box — slot radio custom-dessiné (24x24, cercle visible 20x20) =====
   Partagé par person-identity et address-detail (saisie-information-detail). Le rendu
   natif accent-color ne permet pas de fixer la couleur/épaisseur du contour non cochée
   (propre au navigateur) — d'où un rendu ::before/::after. Le radio natif reste dans le
   DOM (masqué visuellement) pour l'interaction/a11y ; :has() pilote cochée/focus. */
.radio-box {
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem; /* 24px */
    height: 1.5rem;
    cursor: pointer;

    & > input {
        position: absolute;
        width: 0;
        height: 0;
        margin: 0;
        opacity: 0;
    }

    &::before {
        content: '';
        width: 1.25rem; /* 20px */
        height: 1.25rem;
        border-radius: 50%;
        border: 0.1rem solid var(--color-heading); /* #3C4D6A */
        background: var(--color-white);
        transition: border-color var(--transition-fast);
    }

    &::after {
        content: '';
        position: absolute;
        /* Sans top/left, un élément absolute retombe sur sa "static position" (haut-gauche du
           conteneur) au lieu d'être centré par le align-items/justify-content du flex parent
           (qui ne s'applique qu'aux éléments en flux normal) — d'où le point mal centré. */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0.7rem;
        height: 0.7rem;
        border-radius: 50%;
        background: var(--color-radio-accent); /* #0066CC */
        opacity: 0;
        transition: opacity var(--transition-fast);
    }

    &:has(input:checked) {
        &::before { border-color: var(--color-radio-accent); }
        &::after { opacity: 1; }
    }

    &:has(input:focus-visible) {
        outline: 0.2rem solid var(--color-radio-accent);
        outline-offset: 0.2rem;
        border-radius: 50%;
    }
}

/* ===== État invalide (groupe radio obligatoire non répondu) =====
   La bordure du radio-box passe au rouge — miroir de .field.is-invalid (field.css, bordure
   de l'input) et .person-identity__attest.is-invalid (checkbox-box, person-identity.css).
   Le libellé/question de la question (.form__field-group-label etc.) reste en couleur neutre :
   l'erreur se lit sur le CONTRÔLE, pas sur le texte de la question. Classe is-invalid posée
   par les scripts de page sur le même conteneur que la liste ci-dessus (base du fichier). */
:is(
    .person-identity__radio-group,
    .attestation-radio__group,
    .address-detail__radio-group,
    .form__field-group,
    .my-account__radio-group
).is-invalid .radio-box::before {
    border-color: var(--color-error);
}

/* ===== .radio-info-link — lien/bouton « En savoir plus » d'un groupe radio =====
   Ouvre la modale de définition partagée #dlg-warranty-desc (data-desc-target + <template>).
   Partagé par person-identity et address-detail (saisie-information-detail). */
.radio-info-link {
    display: block;
    margin: var(--spacing-xs4) 0;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-primary);
    font-size: var(--font-size-base);
    text-decoration: underline;
    cursor: pointer;

    &:hover {
        text-decoration: none;
    }
    /* Anneau : règle globale :focus-visible (Default/base/utilities.css) ; seul le rayon est spécifique (bouton, pas <a>) */
    &:focus-visible {
        border-radius: 0.2rem;
    }
}