/* @grammaire v2
 *
 * FLUX D'ADHESION PUBLIC — ce qui reste en propre aux pages du parcours une
 * fois la grammaire employee.

 * Elle sert `/adhesion`, `/adhesion/individuel` et les pages de resultat des
 * deux parcours. La feuille v1 `zones/adhesion.css` ne porte plus que les
 * formulaires, qui restent a migrer.
 *
 * CE QUI A DISPARU, et pourquoi la feuille est courte. L'ancienne version de
 * cette page portait sa propre tete (photo pleine largeur, voile sombre, titre
 * pose dessus), son propre titre de section, sa propre carte, son propre
 * bouton et son propre bandeau d'aide — environ 210 lignes. Tout cela existe
 * dans la grammaire : `_content_header` en surface `bare`, `_section_header`,
 * `ui-card` avec `ui.side_header`, `ui.button`, `_titled_card`.
 *
 * NE RESTE ICI QUE CE QU'AUCUNE BRIQUE NE PORTE : la grille des deux parcours,
 * le bloc de prix et la liste de benefices. Trois objets propres a une page
 * d'offre, et rien d'autre.
 *
 * Le rythme vertical vient de `--rhythm-block`, jamais d'un `padding` local :
 * l'ecart appartient a ce qui SUIT, d'ou le `+` du selecteur.
 */

/* `--card-gap`, ET NON `--rhythm-block`. Ces pages sont des MOSAIQUES DE CARTES,
   pas des successions de sections de prose : la tete, les deux formules, les
   trois blocs de reassurance sont tous des cartes, et l'oeil compare l'ecart
   vertical a l'ecart horizontal de la meme grille. A 48 contre 24, les deux
   rangees se lisaient comme deux blocs sans rapport.

   `--rhythm-block` reste le jeton juste pour une page de LECTURE, ou ce qui se
   suit n'est pas de meme nature. Ici tout est de meme nature.

   L'ecart appartient a ce qui SUIT (`+`), jamais a ce qui precede : une
   `margin-bottom` en poserait une sous le dernier bloc, qui n'a rien apres lui. */
.adh-landing__block + .adh-landing__block {
    margin-top: var(--card-gap);
}

/* Le corps editorial est de la PROSE : il se borne a la mesure de lecture,
   comme la colonne d'une fiche. A pleine largeur il courait a ~150 signes. */
.adh-landing__intro {
    max-width: var(--measure-prose);
}

/* ── Les deux parcours ────────────────────────────────────────
   Une colonne sous 60em : a deux colonnes, la liste de benefices tombe a
   trois mots par ligne et le prix se decolle de ce qu'il qualifie. */
.adh-parcours-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--card-gap);
}

@media (width >= 60em) {
    .adh-parcours-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* `margin-top: auto` sur le pied : les deux cartes portent le meme nombre de
   contreparties, mais pas des phrases de meme longueur -- sans lui, les deux
   boutons se posent a deux hauteurs. */
.adh-parcours {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-width: 0;
}

/* Le sur-titre et le JETON D'ETAT en vis-a-vis. C'est ce jeton qui dit d'un mot
   ce qui separe les deux formules -- adhesion immediate contre validation du
   conseil --, la ou l'ancienne page posait un avis pleine largeur d'un seul
   cote et laissait deviner de l'autre. */
.adh-parcours__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.adh-parcours__kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    min-width: 0;
}

.adh-parcours__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-primary-dark);
}

.adh-parcours__lead {
    margin: 0;
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
}

/* COMMENT ON REGLE, DANS LA CARTE. C'est ce qui explique pourquoi l'une dit
   « adherer » et l'autre « deposer une demande » : sans cette ligne, deux
   boutons differents restent une enigme, et ne pas savoir comment on paie est
   le premier motif d'abandon sur un paiement associatif. */
.adh-parcours__settlement {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text-light);
}

/* Le PRIX est la donnee que la carte porte : chasse fixe pour la valeur, comme
   partout ou le site rend un nombre (`--font-data`), et la periode en second
   rang sur la meme ligne de base. */
.adh-parcours__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: 0;
}

.adh-parcours__amount {
    font-family: var(--font-data);
    font-size: var(--font-size-3xl);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-primary-dark);
}

.adh-parcours__period {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* ── Liste de contreparties ───────────────────────────────────
   Ce n'est pas `_facts_list` : celle-la rend des couples terme/valeur, ici il
   n'y a qu'une phrase par ligne.

   UN FILET PAR LIGNE plutot qu'un `gap` : c'est ce qui rend les deux cartes
   COMPARABLES d'un coup d'oeil, chaque contrepartie de gauche ayant sa
   jumelle a la meme hauteur a droite. Le filet appartient a la ligne, jamais
   au groupe -- une bordure basse sur la derniere fermerait la liste comme si
   quelque chose suivait. */
.adh-benefits {
    list-style: none;
    margin: 0;
    padding: 0;
}

.adh-benefits__item {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text);
}

.adh-benefits__item + .adh-benefits__item {
    border-top: 1px solid var(--color-border);
}

/* La puce est un `ui-dot`, aligne sur la ligne de base par `align-items` : le
   point se pose alors sur la premiere ligne du texte et non a son sommet. */
.adh-benefits .ui-dot {
    flex-shrink: 0;
}

.adh-parcours__foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Le symbole monetaire ne suit PAS la taille du nombre : a 3xl en chasse fixe,
   l'espace insecable qui le precede ouvrait un trou de la largeur d'un chiffre. */
.adh-parcours__currency {
    font-size: var(--font-size-xl);
}

/* La pastille est en ligne : le paragraphe qui la porte n'existe que pour la
   detacher du prix sans lui donner la largeur de la carte. */
.adh-parcours__approval {
    margin: 0;
}

/* ── Page de resultat (confirmation, echec, indisponible) ─────
   Le titre et le chapo vivent dans l'en-tete ; la carte porte ce qui reste a
   lire et les gestes qui suivent.

   L'ECART VIENT DU `gap`, PAS DES MARGES DES PARAGRAPHES : la carte melange
   des `p` et une rangee de boutons, et une marge de paragraphe ne s'applique
   pas a celle-ci. Deux mecanismes d'espacement dans un meme bloc donnent deux
   ecarts differents selon ce qui suit. */
.adh-outcome {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* LA CARTE PREND LA LARGEUR, LE TEXTE NON. Bornee, elle rendait une carte de
   540 px sous un en-tete de 1 150 : deux blocs de la meme page a deux largeurs,
   ce qui se lit comme un defaut d'alignement. C'est la LIGNE qu'il faut borner,
   et elle seule — la rangee de boutons, elle, garde la largeur de la carte. */
.adh-outcome > p {
    margin: 0;
    max-width: var(--measure-prose);
    line-height: var(--line-height-base);
}

/* Une rangee, jamais une colonne : deux boutons empiles se lisent comme une
   liste d'etapes. */
.adh-outcome__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

/* Sous 36em, deux boutons cote a cote tombent a huit signes chacun : ils
   prennent alors la largeur, dans l'ordre du DOM (le geste principal d'abord). */
@media (width < 36em) {
    .adh-outcome__actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Une URL complete se coupe n'importe ou : sans cela elle deborde la carte sur
   telephone. Chasse fixe, comme partout ou le site rend une donnee a recopier. */
.adh-outcome__token a {
    font-family: var(--font-data);
    font-size: var(--font-size-sm);
    word-break: break-all;
}

/* ══════════════════════════════════════════════════════════════
   FORMULAIRES DU FLUX
   ══════════════════════════════════════════════════════════════ */

/* ── Deux colonnes : le formulaire, puis l'appui ──────────────
   La colonne d'appui est A DROITE et large de 20 rem, comme le rail des fiches
   et des listes du site. Elle etait a gauche, seule du site a l'etre, et le
   formulaire ne demarrait alors pas au meme bord que le titre au-dessus.

   Le rail est COLLANT : un formulaire long fait defiler le recapitulatif hors
   de vue au moment ou l'on en a besoin. */
.adh-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--card-gap);
    align-items: start;
}

/* Les trois blocs de la colonne : recapitulatif, reglement, aide. */
.adh-layout__aside {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
    min-width: 0;
}

@media (width >= 64em) {
    .adh-layout {
        grid-template-columns: minmax(0, 1fr) 21.25rem;
        /* MEME ECART QUE LA VERTICALE. A 48 px, la gouttiere entre le formulaire
           et sa colonne d'appui etait deux fois celle qui separe les cartes DE
           cette colonne : la page portait deux grilles au lieu d'une. */
        gap: var(--card-gap);
    }

    /* COLLANTE : un formulaire de vingt champs ferait defiler le recapitulatif
       hors de vue au moment ou l'on en a besoin. */
    .adh-layout__aside {
        position: sticky;
        top: var(--spacing-2xl);
    }
}

.adh-layout__main {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
    min-width: 0;
}

/* ── Le formulaire ────────────────────────────────────────────
   Il EST la carte : `ui-card--lead`, le niveau 1 de la grammaire, celui qui
   porte l'action. Une seule par vue, et c'est bien elle. */
.adh-form {
    display: flex;
    flex-direction: column;
    gap: var(--rhythm-section);
}

/* Un `fieldset` porte une bordure et un rembourrage par defaut du navigateur,
   qui dessineraient une boite dans la carte. */
.adh-form__section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

/* `float` plutot que `display: block` : dans un conteneur flex, une `legend`
   reste un item, et le `float` la sort du flux sans casser la colonne. */
.adh-form__legend {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
    font-family: var(--font-title);
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-primary-dark);
}

.adh-form__legend-help {
    margin: 0;
    max-width: var(--measure-prose);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text-light);
}

/* LA NOTE APPARTIENT A LA LEGENDE, elle ne la suit pas. Le `gap` du fieldset
   separe des BLOCS -- l'intitule d'une section et ses champs -- et ces deux-la
   n'en font qu'un : la note dit ce que la section attend. A 16 px comme les
   champs, elle se lisait comme un paragraphe pose entre le titre et le
   formulaire, et l'ecart sous « Adresse postale » ouvrait un trou.

   Marge NEGATIVE parce qu'une `legend` ne peut pas etre enveloppee : elle doit
   rester le premier enfant du `fieldset`. Le `gap` pose 16, on en retire 12. */
.adh-form__legend + .adh-form__legend-help {
    margin-top: calc(var(--spacing-xs) - var(--spacing-md));
}

/* Deux champs cote a cote au-dessus de 40em, un seul en dessous : a 375 px,
   « Code postal » et « Ville » sur une rangee donnent deux champs de 150 px. */
.adh-form__pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-md);
}

@media (width >= 40em) {
    .adh-form__pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Choix de la formule ──────────────────────────────────────
   L'etat retenu vient de `:has(input:checked)` et de rien d'autre : une classe
   posee au rendu ne suit pas un changement de choix. */
.adh-form__tariffs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-sm);
}

@media (width >= 48em) {
    .adh-form__tariffs {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }
}

.adh-form__tariff {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color var(--duration-short) var(--easing-standard),
                background-color var(--duration-short) var(--easing-standard);
}

.adh-form__tariff:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--surface-4);
}

/* LE BOUTON RADIO RESTE VISIBLE. Masque, le groupe ne se lit plus que par un
   ecart de teinte, et il n'y a alors plus rien a dire pour qui ne le distingue
   pas. Le clavier, lui, le trouvait deja. */
.adh-form__tariff input {
    margin-top: 0.2em;
    flex-shrink: 0;
    accent-color: var(--color-primary);
}

/* Le contour de focus appartient a la CARTE, pas au bouton : c'est la carte
   qu'on voit, et un anneau de 13 px passe inapercu. */
.adh-form__tariff:has(input:focus-visible) {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.adh-form__tariff-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    min-width: 0;
}

.adh-form__tariff-label {
    font-weight: 600;
    color: var(--color-text);
}

.adh-form__tariff-amount {
    font-family: var(--font-data);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primary-dark);
}

.adh-form__tariff-description {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text-light);
}

.adh-form__legal {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text-light);
}

/* MEME PIED QUE L'ASSISTANT ETABLISSEMENT, et c'etait le seul endroit du flux a
   en avoir un autre : le geste de retour a gauche, le geste qui AVANCE a droite,
   separes par un vide, sous un filet qui detache la rangee des champs. La
   maquette le pose ainsi, et deux pieds differents pour deux formulaires du meme
   parcours etaient une divergence de plus. */
.adh-form__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.adh-form__actions-spacer {
    flex: 1;
    min-width: var(--spacing-sm);
}

/* `column-reverse` : le geste qui AVANCE est dernier dans le flux a l'ecran
   large, et il doit rester en HAUT de la pile sur telephone. */
@media (width < 34em) {
    .adh-form__actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .adh-form__actions .btn { justify-content: center; }
    .adh-form__actions-spacer { display: none; }
}

/* Le pot de miel : hors de l'ecran, jamais `display: none` — un robot ignore
   un champ masque, une personne au lecteur d'ecran est protegee par
   `aria-hidden` et `tabindex="-1"` portes par le gabarit. */
.adh-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   ASSISTANT EN QUATRE ETAPES — demande d'adhesion etablissement
   ══════════════════════════════════════════════════════════════ */

.adh-wizard {
    display: flex;
    flex-direction: column;
    gap: var(--rhythm-section);
    min-width: 0;
}

/* ── Le fil des etapes ────────────────────────────────────────
   Un trait continu derriere les pastilles, du centre de la premiere au centre
   de la derniere. Quatre etapes, donc chaque `li` occupe 25 % et les centres
   tombent a 12,5 % et 87,5 %. Les pastilles portent le fond de la page pour
   couvrir le trait a leur aplomb. */
/* LE NOMBRE D'ETAPES EST UNE DONNEE, pas une valeur ecrite dans la feuille.
   Elle posait `repeat(4, 1fr)` et un trait borne a 12,5 % — les deux justes
   pour quatre etapes, et faux des qu'il y en a trois. Le gabarit passe
   `--adh-steps`, et les deux s'en deduisent : la moitie d'une colonne vaut
   `50% / n`, ce qui place le trait au centre de la premiere pastille et de la
   derniere, quel que soit `n`. */
.adh-wizard__stepper {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--adh-steps, 3), minmax(0, 1fr));
    list-style: none;
    padding: 0;
    margin: 0;
}

.adh-wizard__stepper::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    left: calc(50% / var(--adh-steps, 3));
    right: calc(50% / var(--adh-steps, 3));
    height: 2px;
    background: var(--color-border);
    z-index: 0;
}

.adh-wizard__step {
    margin: 0;
    padding: 0;
}

.adh-wizard__step-btn {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    width: 100%;
    padding: 0 var(--spacing-2xs);
    background: transparent;
    border: 0;
    font: inherit;
    text-align: center;
    color: var(--color-text-light);
    cursor: pointer;
    appearance: none;
    transition: color var(--duration-short) var(--easing-standard);
}

.adh-wizard__step-btn:disabled {
    cursor: not-allowed;
}

/* L'ATTENUATION PORTE SUR LE TEXTE SEUL. Posee sur le bouton, elle rendait la
   pastille translucide et le trait gris la traversait. */
.adh-wizard__step-btn:disabled .adh-wizard__step-text {
    opacity: 0.6;
}

.adh-wizard__step-btn:not(:disabled):hover,
.adh-wizard__step-btn:not(:disabled):focus-visible {
    color: var(--color-primary-dark);
}

.adh-wizard__step-circle {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    border: 2px solid var(--color-border);
    font-weight: 600;
    color: var(--color-text-light);
    transition: background-color var(--duration) var(--easing-standard),
                border-color var(--duration) var(--easing-standard),
                color var(--duration) var(--easing-standard);
}

.adh-wizard__step--active .adh-wizard__step-circle,
.adh-wizard__step--done .adh-wizard__step-circle {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-on-primary);
}

.adh-wizard__step--active .adh-wizard__step-circle {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.adh-wizard__step-text {
    display: flex;
    flex-direction: column;
    line-height: var(--line-height-tight);
}

.adh-wizard__step-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: inherit;
}

.adh-wizard__step--active .adh-wizard__step-label,
.adh-wizard__step--done .adh-wizard__step-label {
    color: var(--color-primary-dark);
}

.adh-wizard__step-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

/* Sous 45em, l'indice de chaque etape tombe : quatre phrases de trois mots
   dans 90 px se lisent en colonnes de un mot. */
@media (width < 45em) {
    .adh-wizard__step-hint { display: none; }
    .adh-wizard__step-label { font-size: var(--font-size-xs); }
    .adh-wizard__step-circle { width: 2rem; height: 2rem; font-size: var(--font-size-sm); }
    .adh-wizard__stepper::before { top: 1rem; }
}

/* ── Les panneaux d'etape ─────────────────────────────────── */

.adh-wizard__panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-width: 0;
}

.adh-wizard__lead,
.adh-wizard__panel-lead,
.adh-wizard__sublead {
    margin: 0;
    max-width: var(--measure-prose);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text-light);
}

.adh-wizard__subhead {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0 0;
    font-family: var(--font-title);
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-primary-dark);
}

.adh-wizard__optional {
    font-family: var(--font-sans);
    font-size: var(--eyebrow-size);
    font-weight: var(--eyebrow-weight);
    letter-spacing: var(--eyebrow-tracking);
    text-transform: uppercase;
    color: var(--color-text-light);
    background: var(--surface-4);
    padding: var(--spacing-2xs) var(--spacing-xs);
    border-radius: var(--radius-sm);
}

/* ── Avis d'etape (doublon detecte, refus de validation) ──── */

.adh-wizard__notice {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    background: var(--surface-4);
}

.adh-wizard__notice--warning {
    background: var(--tint-warning);
}

.adh-wizard__notice--error {
    background: var(--tint-danger);
}

.adh-wizard__notice-icon {
    flex-shrink: 0;
    color: var(--color-warning);
}

.adh-wizard__notice--error .adh-wizard__notice-icon {
    color: var(--color-danger);
}

.adh-wizard__notice-body {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

.adh-wizard__notice-body p {
    margin: 0 0 var(--spacing-xs);
}

.adh-wizard__notice-body p:last-child {
    margin-bottom: 0;
}

.adh-wizard__notice-title {
    font-weight: 600;
    color: var(--color-primary-dark);
}

.adh-wizard__notice-acknowledge {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.adh-wizard__notice-acknowledge input[type="checkbox"] {
    margin-top: 0.2em;
    flex-shrink: 0;
    accent-color: var(--color-primary);
}

/* ── Aller d'une etape a l'autre ──────────────────────────── */

.adh-wizard__nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.adh-wizard__nav .btn {
    white-space: nowrap;
}

.adh-wizard__nav-spacer {
    flex: 1;
}

/* `column-reverse` : le geste qui AVANCE reste en haut de la pile, alors qu'il
   est dernier dans le flux a l'ecran large. */
@media (width < 34em) {
    .adh-wizard__nav {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    .adh-wizard__nav .btn { justify-content: center; }
    .adh-wizard__nav-spacer { display: none; }
}

/* ── Recherche du SIRET ───────────────────────────────────────
   Le champ et son bouton sur une meme ligne, DANS le slot de `_form_field` :
   l'aide du champ descend alors sous les deux, au lieu de s'intercaler. */
/* LE BOUTON VIT DANS LE CHAMP, cale contre son bord droit. Pose a COTE, il
   ajoutait une colonne a une rangee qui n'en a qu'une, et le champ se
   retrecissait d'autant : la maquette le loge dans la boite, ou il se lit comme
   ce qu'il est -- une action SUR ce qu'on vient de saisir. */
.adh-form__siret-row {
    position: relative;
    display: block;
}

.adh-form__siret-row > input.form-control {
    /* La place du bouton, plus les 6 px qui l'ecartent du bord. */
    padding-right: 9rem;
}

.adh-form__siret-btn {
    position: absolute;
    top: 50%;
    right: 0.375rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    height: 2.25rem;
    white-space: nowrap;
}

/* Sous 30 em, le champ n'a plus la place de loger un bouton : la rangee
   redevient deux blocs empiles, et le champ reprend sa largeur entiere. */
@media (width < 30em) {
    .adh-form__siret-row {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    .adh-form__siret-row > input.form-control { padding-right: var(--spacing-md); }
    .adh-form__siret-btn {
        position: static;
        transform: none;
        height: var(--field-height);
        justify-content: center;
    }
}

.adh-form__siret-feedback {
    margin: var(--spacing-xs) 0 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.adh-form__siret-feedback--ok {
    color: var(--color-primary-dark);
    background: var(--tint-success);
}

.adh-form__siret-feedback--error {
    color: var(--color-danger-ink);
    background: var(--tint-danger);
}

@media (width < 30em) {
    .adh-form__siret-row { flex-direction: column; }
    .adh-form__siret-btn { align-self: stretch; justify-content: center; }
}

/* ── Mode de reglement ────────────────────────────────────── */

.adh-form__payment-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--spacing-md);
}

.adh-form__payment-option {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--duration-short) var(--easing-standard),
                background-color var(--duration-short) var(--easing-standard);
}

.adh-form__payment-option:hover {
    border-color: var(--color-primary);
}

.adh-form__payment-option:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--surface-4);
}

.adh-form__payment-option:has(input:focus-visible) {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
}

.adh-form__payment-option input {
    flex-shrink: 0;
    margin-top: 0.2em;
    accent-color: var(--color-primary);
}

.adh-form__payment-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    min-width: 0;
}

.adh-form__payment-label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-weight: 600;
    color: var(--color-primary-dark);
}

.adh-form__payment-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.adh-form__bank-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--surface-4);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-primary);
}

.adh-form__bank-detail {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

/* Un IBAN se recopie : chasse fixe, et il se coupe plutot que de deborder. */
.adh-form__bank-detail code {
    font-family: var(--font-data);
    background: var(--surface-2);
    padding: var(--spacing-2xs) var(--spacing-xs);
    border-radius: var(--radius-sm);
    word-break: break-all;
}

.adh-form__bank-detail--note {
    font-style: italic;
    color: var(--color-text-light);
}

/* ── Bon de commande ──────────────────────────────────────── */

.adh-form__file {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color var(--duration-short) var(--easing-standard);
}

.adh-form__file:hover,
.adh-form__file:has(input:focus-visible) {
    border-color: var(--color-primary);
}

.adh-form__file--filled {
    border-style: solid;
    border-color: var(--color-primary);
    background: var(--surface-4);
}

/* Hors de l'ecran plutot que `display: none` : masque ainsi, le champ reste
   atteignable au clavier et annonce par le lecteur d'ecran. */
.adh-form__file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.adh-form__file-prompt,
.adh-form__file-selected {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.adh-form__file-prompt small,
.adh-form__file-selected small {
    display: block;
    color: var(--color-text-light);
    font-size: var(--font-size-xs);
}

.adh-form__file-selected {
    flex: 1;
}

.adh-form__file-clear {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-2xs);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-text-light);
    cursor: pointer;
}

.adh-form__file-clear:hover {
    color: var(--color-danger);
}

.adh-form__file-error {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-danger-ink);
}

/* ── Engagements ──────────────────────────────────────────── */

.adh-form__consent {
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--surface-4);
    border-radius: var(--radius-md);
}

.adh-form__consent-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    color: var(--color-text);
    cursor: pointer;
}

.adh-form__consent-label input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 0.2em;
    accent-color: var(--color-primary);
}

.adh-form__consent-label a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ── Pied de la tete de page (`after` de `_content_header`) ───
   SOUS UN FILET, et non dans le corps du chapo : « Deja adherent ? » remplace un
   ECRAN ENTIER du parcours precedent. Il doit se voir sans disputer la place aux
   deux formules, d'ou la ligne discrete detachee en pied. */
.adh-hero__member {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0 0;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* ── Reassurance : ce que personne ne disait ──────────────────
   Trois cartes voilees de niveau 3, une par inquietude mesuree dans la
   maquette : comment on paie, ce que couvre l'annee, a qui ecrire. */
.adh-reassurance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: var(--card-gap);
    /* MEME HAUTEUR POUR LES TROIS, et c'est `stretch` qui la donne -- le defaut
       de la grille, qu'un `align-items: start` annulait. Trois cartes de 185,
       161 et 248 px cote a cote se lisent comme trois blocs de nature
       differente, alors qu'elles repondent aux trois memes inquietudes. */
    align-items: stretch;
}

/* La carte remplit sa cellule, et son corps pousse ce qui la suit vers le bas :
   sans quoi elle garde la hauteur de son texte et laisse la cellule vide sous
   elle, ce qui ne change rien a l'oeil. */
.adh-reassurance-grid > .ui-card {
    height: 100%;
}

/* Une colonne de liens, jamais une phrase a trous : trois destinations
   distinctes se choisissent, elles ne se lisent pas. */
.adh-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin: 0;
}

/* ── Le total du recapitulatif ────────────────────────────────
   SUR SA PROPRE LIGNE, hors de la liste de faits : ce n'est pas un fait de plus,
   c'est ce que la page demande. Fondu dans la liste, il se lisait comme une
   quatrieme ligne de details. */
.adh-recap__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin: 0;
}

.adh-recap__total-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary-dark);
}

.adh-recap__total-value {
    font-family: var(--font-data);
    font-size: var(--font-size-xl);
    font-weight: 500;
    line-height: var(--line-height-tight);
    color: var(--color-primary-dark);
    text-align: right;
}

/* ── Les messages du serveur, dans le formulaire ──────────────
   Ils ne sont plus rendus par le layout en tete de page : cf.
   `adhesion/_flashes.html.twig`. Le conteneur porte le focus au chargement, ce
   qui le fait defiler dans la vue -- il ne doit donc pas dessiner d'anneau,
   n'etant pas un controle. */
.adh-form__flashes {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* PAS DE MARQUE DE FOCUS SUR CE CONTENEUR. Il recoit le focus pour se faire
   defiler dans la vue et se faire annoncer, mais il n'est pas un CONTROLE : la
   marque l'entourait comme si l'on pouvait agir dessus, et c'est ce que l'oeil
   lit en premier -- avant les messages eux-memes.

   Retirer la marque est ici SANS PERTE, contrairement a la regle generale : rien
   ne se fait depuis cet element, et le message rouge dit deja ou l'on est.

   LES DEUX MOITIES, PAS UNE. La regle globale (`app.css`, « Focus visible, v2 »)
   pose un `outline` orange ET un `box-shadow` d'encre de 1 px -- « anneau a
   l'exterieur, trait d'encre a l'interieur ». N'en neutraliser qu'une laissait
   un LISERE SOMBRE autour du bloc d'erreur, qu'on lit comme une bordure et non
   comme un focus. Exactement le defaut corrige au meme moment sur
   `app-select.css`, reproduit ici sur un conteneur maison. */
.adh-form__flashes:focus,
.adh-form__flashes:focus-visible {
    outline: none;
    box-shadow: none;
}

/* L'IDENTITE TIENT SUR UNE RANGEE : civilite, prenom, nom. C'est une seule
   information, et la civilite n'a pas besoin de la largeur d'un nom -- posee
   sur sa propre ligne, elle ouvrait un champ de 760 px pour trois lettres. */
.adh-form__identity {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-md);
}

@media (width >= 40em) {
    .adh-form__identity {
        grid-template-columns: minmax(7rem, 0.6fr) minmax(0, 1fr) minmax(0, 1fr);
    }
}