/* ============================================================
   Gabarit Adhérer — /adherer/
   Repris de maquettes/maquette-adherer-byu-france.html (parties propres à la page).
   Les styles portés en ligne dans la maquette deviennent des classes (rendu identique).
   ============================================================ */
body{line-height:1.65}
.lien-simple{padding-bottom:1px}

/* Tête */
.tete-page{background:var(--nuit);color:var(--papier);padding:clamp(34px,5vw,58px) 0}
.fil{font-size:.85rem;color:#9FB4E8;margin-bottom:18px}
.fil a{text-decoration:none}
.fil a:hover{color:#fff}
.fil span{margin:0 8px;opacity:.5}
.tete-page h1{font-weight:900;font-stretch:118%;line-height:.98;letter-spacing:-.03em;
  font-size:clamp(2rem,4.6vw,3.1rem)}
.tete-page p{margin-top:14px;color:#9FB4E8;font-size:.95rem}
.tete-page .chapeau{max-width:64ch}

/* ---------- Page adhérer ---------- */
.tete-page.avec-prix .wrap{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end}
.tete-page .prix{font-style:italic;font-weight:900;font-stretch:118%;font-size:clamp(2.4rem,6vw,4rem);line-height:.9}
.tete-page .prix em{display:block;font-style:normal;font-weight:600;font-size:.24em;color:#9FB4E8;letter-spacing:.06em;margin-top:8px}
.contenu{padding:clamp(44px,6vw,76px) 0}
.contenu + .contenu{padding-top:0}
.contenu h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;font-stretch:112%;margin-bottom:14px}
.contenu .intro{color:var(--gris);font-size:1.04rem;max-width:82ch;margin-bottom:32px}
.deux-colleges{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.bloc-college{border:1px solid var(--trait);background:#fff;padding:26px}
.bloc-college.a{border-top:5px solid var(--bleu)}
.bloc-college.b{border-top:5px solid var(--gris)}
.bloc-college .lettre{font-style:italic;font-weight:900;font-stretch:118%;font-size:2.2rem;line-height:1;color:var(--bleu)}
.bloc-college.b .lettre{color:var(--gris)}
.bloc-college h3{font-size:1.2rem;margin:4px 0 12px}
.bloc-college ul{margin:12px 0 0 18px;font-size:.95rem;color:var(--gris)}
.bloc-college li{margin-bottom:7px}
.bloc-college ul + p{margin-top:14px;font-size:.94rem;color:var(--gris)}
.etapes{counter-reset:etape;margin-top:8px}
.etape{display:grid;grid-template-columns:56px 1fr;gap:22px;padding:22px 0;border-bottom:1px solid var(--trait)}
.etape:first-child{border-top:2px solid var(--encre)}
.etape .n{counter-increment:etape;font-style:italic;font-weight:900;font-stretch:118%;font-size:2.2rem;color:var(--bleu);line-height:.9}
.etape .n::before{content:counter(etape)}
.etape h3{font-size:1.15rem;font-weight:800;margin-bottom:6px}
.etape p{font-size:.96rem;color:var(--gris)}
.formulaire{background:var(--nuit);color:var(--papier);padding:clamp(30px,4vw,48px)}
.formulaire h2{color:var(--papier)}
.formulaire p{color:#C6CEE0}
.cadre-helloasso{margin-top:24px;min-height:320px;border:1px dashed rgba(159,180,232,.45);
  display:grid;place-items:center;text-align:center;padding:30px;color:#9FB4E8;font-size:.95rem}
/* Ajout thème : le cadre accueille l'iframe HelloAsso une fois la campagne renseignée. */
.cadre-helloasso.actif{border:none;padding:0;display:block;background:#fff}
.cadre-helloasso iframe{display:block;width:100%;min-height:750px;border:0}
.formulaire .aide{margin-top:16px}
.formulaire .aide p{color:#9FB4E8;font-size:.9rem}
.formulaire .aide .lien-simple{color:#fff;border-color:var(--rouge)}
.pieces{background:#fff;border:1px solid var(--trait);padding:26px;margin-top:26px}
.pieces h3{margin-bottom:12px}
.pieces ol{margin-left:20px;font-size:.96rem;color:var(--gris)}
.pieces li{margin-bottom:7px}
.pieces ol + p{font-size:.9rem;color:var(--gris);margin-top:14px}

/* Correction validée par Ronan : la maquette n'avait pas de règle mobile pour cette page
   (collèges sur deux colonnes étroites, montant coupé au bord de l'écran). */
@media (max-width:900px){
  .tete-page.avec-prix .wrap,.deux-colleges{grid-template-columns:1fr}
}