/* ── Alerte erreur ── */
.pjx-qf__alert {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    border-left-width: 5px;
    border-radius: 6px;
    padding: .9rem 1rem;
    margin-bottom: 1.5rem;
    font-size: .92rem;
    color: #9b1c1c;
    line-height: 1.5;
    justify-content: center;
}

/* ── Rubriques du formulaire (Tarification) ──
   Séparation visuelle entre « Vous travaillez ou résidez en », « Adultes composant
   le foyer » et « Enfants fiscalement à charge » — filet clair repris du même ton que
   les autres bordures de champs du site (#E7E7E7). La dernière rubrique n'a pas de
   filet sous elle : rien à séparer du bouton « Calculer » qui la suit. */
.pjx-qf__section {
    padding-bottom: 1.75rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid #E7E7E7;
}

.pjx-qf__section:last-of-type {
    padding-bottom: 0;
    margin-bottom: 1.5rem;
    border-bottom: none;
}

/* ── Tarification : RFR (France) / Salaire (étranger) — bascule d'affichage 100% CSS ──
   `#tarification-lieu_0` = radio « France », `#tarification-lieu_1` = radio « Outre-mer
   ou à l'étranger » (ordre du tableau lieuChoix côté controller). L'attribut `required`,
   lui, N'EST PAS géré ici : `display:none` ne dispense pas un champ de la validation
   native (l'algorithme « barred from constraint validation » du HTML Standard ne couvre
   pas le rendu CSS), un `required` resté vrai sur le champ masqué bloquerait le submit
   sans aucune bulle d'erreur visible. C'est `tarification.js` qui toggle `required` sur
   #tarification-revenu / #tarification-salaire selon le radio sélectionné. */
#tarification-bloc-salaire {
    display: none;
}

.pjx-qf__form:has(#tarification-lieu_1:checked) #tarification-bloc-revenu {
    display: none;
}

.pjx-qf__form:has(#tarification-lieu_1:checked) #tarification-bloc-salaire {
    display: block;
}

/* ── Rappel réglementaire RFR (France) / Salaire (étranger) — même bascule ── */
#tarification-aide-etranger {
    display: none;
}

.pjx-qf__form:has(#tarification-lieu_1:checked) #tarification-aide-france {
    display: none;
}

.pjx-qf__form:has(#tarification-lieu_1:checked) #tarification-aide-etranger {
    display: block;
}

/* ── Radios "Vous travaillez ou résidez en" sur une ligne ──
   `.form-item-wrapper--radio` (components/forms/inputs.scss) pose `flex-direction: column`
   avec la même spécificité que l'utilitaire `.flex-row`, mais après lui dans la cascade
   (utils est importé avant components dans app.scss) : il l'emporte donc par défaut.
   Sélecteur scopé par id, plus spécifique, pour gagner de façon fiable sans !important. */
#tarification-lieu .form-item-wrapper--radio {
    flex-direction: row;
}

/* ── Champs RFR / Salaire en pleine largeur ──
   `.form-item-wrapper--inputs` est `inline-flex` (composant générique) : il se réduit à
   la largeur de son contenu au lieu d'occuper toute la largeur du champ, laissant un
   espace vide à côté du label + de l'input. On repasse en `flex` pleine largeur pour ces
   deux champs, l'input et son groupe suivant alors naturellement (stretch par défaut). */
#tarification-bloc-revenu .form-item-wrapper--inputs,
#tarification-bloc-salaire .form-item-wrapper--inputs {
    display: flex;
    width: 100%;
}

#tarification-bloc-revenu .form-input-group,
#tarification-bloc-salaire .form-input-group {
    width: 100%;
}

#tarification-revenu,
#tarification-salaire {
    width: 100%;
}

/* ── Titres de rubrique plus visibles ──
   `.text-label` (components/typography/typography.scss) est calibré pour un simple
   label de champ (14px, gris foncé) — trop discret réutilisé comme titre de rubrique
   ("Adultes composant le foyer", "Enfants fiscalement à charge"). Scopé à ce formulaire
   pour ne pas toucher les usages de `.text-label` ailleurs sur le site (labels de champs,
   y compris dans ce même gabarit). */
.pjx-qf__form h3.text-label {
    font-size: 20px;
    line-height: 28px;
    color: #04366e;
}

/* ── Lien "cliquant ici" des rappels réglementaires ──
   base.scss force `color: inherit` sur tout `<a>` via
   `a:not(.btnv):not(.btnv-link):not(.btnv-link-inverted)` (spécificité 0,3,1) : un
   sélecteur de classe seule sur l'ancêtre ne suffit pas à le contourner, il faut typer
   l'élément `a`. Un id sur l'ancêtre + l'élément `a` (1,0,1) l'emporte quel que soit
   l'état (normal/hover/visited), l'id passant toujours devant le compte de classes. */
#tarification-aide-france a,
#tarification-aide-etranger a {
    color: #012169;
}