/**
 * Demande d'adhésion V2 — lot 3.2.
 *
 * ELLE EMPRUNTE `profil.css`, chargée juste avant : la grille de champs, les
 * sections repliables et les deux boutons y sont déjà définis. Ce fichier ne
 * porte QUE ce que le profil n'a pas — le bandeau, le bloc de tarif, la liste
 * de parrains et les consentements.
 *
 * Aucun sélecteur nu, comme partout ailleurs : cette feuille est chargée après
 * celle du chrome, et un `h1 { … }` y repeindrait toutes les autres pages.
 */




.adhesion-contenu {
    background: var(--gl-grey-050);
    padding: 26px 0 48px;
}

.card-intro p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--gl-grey-600);
}

/* Le montant et son année, mis en évidence : c'est la question que se pose
   quelqu'un qui hésite à adhérer, et elle mérite mieux qu'une ligne de texte. */
.adhesion-tarif {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin: 18px 0;
    padding: 16px 20px;
    background: var(--gl-teal-050);
    border-radius: var(--radius-lg);
}

.adhesion-tarif-valeur {
    font-size: 26px;
    font-weight: 800;
    color: var(--gl-teal-700);
    white-space: nowrap;
}

.adhesion-tarif-detail {
    flex: 1 1 260px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--gl-grey-600);
}

.adhesion-note {
    margin: 0;
    font-size: 13px;
    color: var(--gl-grey-450);
}

/* ── Les champs que le profil ne connaît pas ────────────────────────────── */

/* Une légende de groupe : `<span>` et non `<label>`, parce qu'elle ne désigne
   aucun champ en particulier — les trois boutons radio ont chacun le leur. */
.form-legende {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--gl-grey-600);
    margin-bottom: 5px;
}

.form-radios {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* `.form-row .form-radio` ET NON `.form-radio` seul : `profil.css` pose
   `.form-row label`, et ces pastilles SONT des `<label>` dans un `.form-row`.
   La règle la plus spécifique l'emportait, et le bouton se retrouvait au-dessus
   de son libellé, empilé. Constaté à l'écran, invisible dans le code.

   Le socle commun, lui, ne parle plus qu'aux libellés qui sont ENFANTS DIRECTS
   d'un `.form-row` : une pastille n'en est pas un, et n'est donc plus concernée.
   La graisse est dite ici pour la même raison que la taille et la couleur
   l'étaient déjà — une pastille est un CHOIX qu'on désigne, pas l'intitulé d'un
   champ, et rien de son apparence ne doit dépendre d'une règle écrite pour
   autre chose. */
.form-row .form-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* 44px de cible tactile, Chapitre 6 : viser un rond de 16px au pouce est un
       échec, et le public de cette association est âgé. */
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--gl-grey-200);
    border-radius: var(--radius-pill);
    background: #fff;
    font-size: 14px;
    font-weight: var(--font-weight-regular);
    color: var(--gl-grey-700);
    cursor: pointer;
}

.form-row .form-radio input {
    accent-color: var(--gl-teal-500);
}

.form-row .form-radio:focus-within {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

/* L'erreur d'un champ et la marque du champ refusé vivent maintenant dans
   `chrome.css`, hors calque : trois feuilles en donnaient trois versions, et
   le même refus ne se présentait pas de la même façon d'un formulaire à
   l'autre. Ce qui suit ne concerne plus que cette page. */

/* ── La recherche de parrain ────────────────────────────────────────────── */

.adhesion-parrain {
    position: relative;
}

.adhesion-parrain-liste {
    position: absolute;
    z-index: var(--z-dropdown);
    left: 0;
    right: 0;
    /* Sous le champ, pas sous le libellé : le décalage tient compte du libellé
       et de la hauteur de saisie. */
    top: 100%;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--gl-grey-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.adhesion-parrain-liste li {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--gl-grey-800);
    cursor: pointer;
}

.adhesion-parrain-liste li:hover,
.adhesion-parrain-liste li[aria-selected='true'] {
    background: var(--gl-teal-025);
    color: var(--gl-teal-700);
}

/* ── Les consentements ──────────────────────────────────────────────────── */

.adhesion-consentements {
    display: grid;
    gap: 12px;
    padding: 8px 0 14px;
}

.adhesion-consentement {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--gl-grey-050);
    border-radius: var(--radius-md);
    font-size: 14px;
    line-height: 1.6;
    color: var(--gl-grey-700);
    cursor: pointer;
}

.adhesion-consentement input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--gl-teal-500);
}

.adhesion-consentement:focus-within {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

/* Le facultatif se distingue des trois obligatoires, sans se cacher : un
   consentement qu'on croit obligatoire n'en est pas un. */
.adhesion-consentement-facultatif {
    background: var(--gl-purple-050);
}

.adhesion-consentement em {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--gl-grey-500);
}

@media (max-width: 767.98px) {

    .adhesion-tarif-valeur {
        font-size: 22px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   LE BOUTON D'ENVOI, TANT QUE LES DÉCLARATIONS NE SONT PAS COCHÉES

   La V1 grisait ce bouton sans un mot. Ici il est grisé ET la raison est
   écrite juste au-dessus — un envoi impossible sans explication, en bas d'un
   formulaire de trente champs, laisse chercher ce qui manque.

   Le gris est celui des éléments inertes du site, le même que sur le bouton
   « Contacter l'auteur » d'une annonce qui est la sienne.
   ══════════════════════════════════════════════════════════════════════════ */
.btn-enregistrer:disabled {
    background: var(--gl-grey-100);
    color: var(--gl-grey-400);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-enregistrer:disabled:hover {
    background: var(--gl-grey-100);
    color: var(--gl-grey-400);
}

.adhesion-blocage {
    flex-basis: 100%;
    margin: 0 0 10px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Le renvoi vers la page Contact, sous le formulaire. Discret : c'est un
   recours, pas une invitation à quitter la page avant d'avoir envoyé. */
.adhesion-aide {
    margin: 22px 0 0;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.adhesion-aide a {
    color: var(--color-text-link);
    font-weight: var(--font-weight-bold);
}

/* ══════════════════════════════════════════════════════════════════════════
   UNE DÉCLARATION NON COCHÉE SE VOIT COMME UN CHAMP REFUSÉ

   La marque commune aux formulaires du site — bordure et fond teinté — ne
   s'applique pas ici : une case à cocher native ne porte pas de bordure, et la
   teinter ne donnerait qu'un carré de 18px. C'est le BLOC qui se marque, comme
   le champ se marque ailleurs, avec le même liseré à gauche et le même fond.

   L'accroche reste `[aria-invalid="true"]`, posé sur la case par la vue : le
   style et la sémantique tiennent au même fait, et un lecteur d'écran entend
   ce que l'œil voit.
   ══════════════════════════════════════════════════════════════════════════ */
.adhesion-consentement:has(input[aria-invalid="true"]) {
    background: var(--color-danger-bg);
    border-left: 3px solid var(--gl-red-600);
    color: var(--rouge-lisible);
}

/* La civilité n'a pas de champ à cercler : c'est le GROUPE de boutons qui
   n'a pas été renseigné, et c'est donc lui qui se marque — voir la vue. */
.form-radios[aria-invalid="true"] {
    padding: 8px 10px;
    margin-left: -10px;
    background: var(--color-danger-bg);
    border-left: 3px solid var(--gl-red-600);
    border-radius: var(--radius-md);
}

.form-row:has([aria-invalid="true"]) > .form-legende {
    color: var(--rouge-lisible);
}