/* ==========================================================================
   Tunnel d'adhésion
   Valeurs reprises de la maquette (adhesion.dc.html).
   ========================================================================== */

.adhesion {
    max-width: var(--largeur-max);
    padding-top: 48px;
    padding-bottom: 72px;
}

/* L'en-tête est aligné à gauche : c'est une page d'argumentaire, pas une
   page d'accueil. */
.adhesion__tete { max-width: 46rem; margin-bottom: 2.2rem; }
/* Illustré, l'en-tête prend toute la largeur : la limite de 46rem sert à garder
   une ligne de lecture confortable, or ici le texte n'occupe qu'une colonne. */
.adhesion__tete.tete-illustree { max-width: none; }
.adhesion__tete h1 { margin: .4rem 0 1rem; }
.adhesion__tete .lead { margin: 0; }
.adhesion__tete strong { color: var(--texte); }

/* --- Fil des étapes -------------------------------------------------------- */

.etapes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
}
.etapes__item {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 7px 18px 7px 8px;
    border: 1.5px solid var(--bord);
    border-radius: var(--r-pill);
    background: var(--fond-carte);
    font-size: .9rem;
    color: var(--texte-3);
}
.etapes__item.est-active {
    border-color: var(--violet);
    background: var(--fond-violet-2);
    color: var(--texte-fort);
    font-weight: 700;
}
.etapes__item.est-faite { border-color: var(--succes-bord); color: var(--succes); }

.etapes__num {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--fond-carte-2);
    font-size: .8rem;
    font-weight: 800;
}
.est-active .etapes__num { background: var(--violet); color: #fff; }
.est-faite  .etapes__num { background: var(--succes-fond); color: var(--succes); }

/* --- Bandeau d'adhésion en cours -------------------------------------------- */

.bandeau-succes {
    margin: 0 0 22px;
    padding: 16px 22px;
    background: var(--succes-fond);
    border: 1px solid var(--succes-bord);
    border-radius: var(--r-md);
    color: var(--succes);
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.6;
}

/* --- Cartes de formule ------------------------------------------------------ */

.formules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    align-items: stretch;
}

.formule {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 26px 24px 24px;
    border: 1.5px solid var(--bord-carte);
    border-radius: var(--r-lg);
    background: var(--fond-carte);
}
.formule.est-mise-en-avant { border-color: var(--violet); }

.formule__ruban {
    position: absolute;
    top: -12px;
    left: 20px;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: var(--fond-violet);
    border: 1px solid var(--violet);
    color: var(--violet-lien-hover);
    font-size: .72rem;
    font-weight: 800;
}

.formule__nom { margin: 0; font-size: 1.15rem; }
.formule__prix {
    margin: 0;
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: 2.4rem;
    line-height: 1;
    color: var(--violet-lien);
}
.formule__prix small {
    margin-left: 6px;
    font-family: var(--police-texte);
    font-size: .8rem;
    font-weight: 400;
    color: var(--texte-4);
}

.formule__desc { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--texte-2); }

.formule__points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.formule__points li {
    position: relative;
    margin: 0;
    padding-left: 22px;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--texte-2);
}
.formule__points li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--succes);
    font-weight: 800;
}

/* Le bouton se colle en bas : les cartes gardent leurs boutons alignés
   même quand les listes n'ont pas le même nombre de points. */
.formule__action { margin: auto 0 0; padding-top: 8px; }

/* --- Notes et encart famille ------------------------------------------------- */

.adhesion__note {
    margin: 1.2rem 0 0;
    font-size: .85rem;
    color: var(--texte-4);
    line-height: 1.6;
}

.adhesion__famille {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 34px;
    padding: 24px 26px;
    background: var(--fond-violet-2);
    border: 1px solid var(--bord-champ);
    border-radius: var(--r-lg);
}
.adhesion__famille p {
    flex: 1;
    min-width: 280px;
    margin: 0;
    color: var(--texte-doux);
    line-height: 1.65;
}
.adhesion__famille strong { color: var(--violet-lien-hover); }
.adhesion__famille a { font-weight: 700; font-size: .95rem; white-space: nowrap; }

/* --- Cartes des étapes 2 à 4 ------------------------------------------------- */

.adhesion__carte { max-width: 760px; padding: 30px; }
.adhesion__carte h2 { margin-top: 0; }
.adhesion__carte--centre { margin: 0 auto; text-align: center; }

.adhesion__icone {
    width: 62px; height: 62px;
    display: grid; place-items: center;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--fond-violet);
    color: var(--violet-lien);
    font-size: 1.6rem;
    font-weight: 800;
}

.adhesion__actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 1.6rem;
}
.adhesion__actions--centre { justify-content: center; }

/* --- Récapitulatif ----------------------------------------------------------- */

.recap { list-style: none; padding: 0; margin: 1.4rem 0; }
.recap li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--bord-ligne);
    font-size: .92rem;
}
.recap li span { color: var(--texte-3); }
.recap__total {
    border-bottom: 0 !important;
    padding-top: 16px !important;
    font-size: 1.05rem;
}
.recap__total strong {
    font-family: var(--police-titre);
    font-size: 1.4rem;
    color: var(--violet-lien);
}

/* --- Grille du formulaire ----------------------------------------------------- */

.adhesion .formulaire-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 1.4rem;
}
.adhesion .champ--large { grid-column: 1 / -1; }

@media (max-width: 620px) {
    .adhesion .formulaire-grille { grid-template-columns: 1fr; }
    .adhesion__actions { flex-direction: column-reverse; }
    .adhesion__actions .btn { width: 100%; }
    .etapes__label { display: none; }
    .etapes__item { padding: 7px 8px; }
}