/* ── ADHERER.CSS ── */

.page-hero{
  background:var(--coral-deep);color:white;
  padding:clamp(96px,12vw,160px) clamp(20px,6vw,80px) clamp(72px,10vw,120px);
  position:relative;overflow:hidden;
}
/* Halos sombres : en blanc, ils faisaient tomber le chapô blanc à 3,4:1. */
.page-hero::before{
  content:'';position:absolute;top:-180px;right:-160px;width:620px;height:620px;
  background:radial-gradient(circle,color-mix(in srgb,var(--ink-fixed) 22%,transparent) 0%,transparent 60%);
  pointer-events:none;
}
.page-hero::after{
  content:'';position:absolute;bottom:-160px;left:-120px;width:520px;height:520px;
  background:radial-gradient(circle,color-mix(in srgb,var(--ink-fixed) 15%,transparent) 0%,transparent 60%);
  pointer-events:none;
}
.page-hero-inner{max-width:880px;position:relative;z-index:1;}
.page-hero .eyebrow{
  display:inline-block;
  font-family:'Outfit',sans-serif;font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.3em;
  color:#fff;
  padding:7px 16px;border-radius:999px;
  background:color-mix(in srgb,var(--ink-fixed) 15%,transparent);
  border:1px solid rgba(255,255,255,.38);
  margin-bottom:28px;
}
.page-hero h1{
  font-family:'Fraunces',serif;font-style:italic;font-weight:600;
  font-size:clamp(2.6rem,5.5vw,4.25rem);
  letter-spacing:-.04em;line-height:1.02;
  color:white;margin:0 0 24px;
  text-wrap:balance;
}
.page-hero p{
  font-family:'Outfit',sans-serif;font-weight:300;
  font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.55;
  color:#fff;
  max-width:620px;margin:0;
}
/* Le <main> englobe aussi le héros (le lien d'évitement mène au H1) : la mise en page vise le bloc qui suit. */
.main-inner{max-width:1200px;margin:0 auto;padding:clamp(96px,12vw,160px) clamp(16px,4vw,56px);}
.section-heading{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:clamp(2rem,4vw,3.25rem);letter-spacing:-.03em;line-height:1.05;color:var(--ink);margin-bottom:48px;text-wrap:balance;}
.reasons-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:72px;}
/* 3 raisons : 3 colonnes ou 1 (en auto-fill, 2 + 1 orpheline vers 768 px). */
@media(max-width:1023px){.reason-card{padding:32px 24px;}}
@media(max-width:700px){.reasons-grid{grid-template-columns:1fr;}}
.reason-card{background:var(--cream);border-radius:24px;padding:40px 32px;border:1px solid color-mix(in srgb,var(--ink-fixed) 6%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 28px color-mix(in srgb,var(--ink-fixed) 8%,transparent);transition:transform .45s var(--ease),box-shadow .45s var(--ease);position:relative;overflow:hidden;}
.reason-card::before{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;background:radial-gradient(circle,color-mix(in srgb,var(--coral) 18%,transparent),transparent 70%);pointer-events:none;transition:transform .45s var(--ease),background .45s var(--ease);}
.reason-card:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 22px 46px color-mix(in srgb,var(--coral) 16%,transparent);}
.reason-card:hover::before{transform:scale(1.4);background:radial-gradient(circle,color-mix(in srgb,var(--coral) 28%,transparent),transparent 70%);}
.reason-num{font-family:'Fraunces',serif;font-size:3.5rem;font-weight:900;color:var(--coral);opacity:.22;line-height:1;font-variant-numeric:tabular-nums;margin-bottom:8px;position:relative;}
.reason-card h3{font-size:1.1rem;color:var(--ink);margin-bottom:10px;}
.reason-card p{font-size:1rem;color:var(--muted);line-height:1.65;}
/* 4 tarifs : 2 × 2 (en auto-fill, 3 + 1 orphelin dans la colonne de 820 px). */
.types-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.type-price{font-family:'Fraunces',serif;font-size:2rem;font-weight:900;color:var(--coral);line-height:1;font-variant-numeric:tabular-nums;margin-bottom:6px;}
.type-price small{font-family:'Outfit',sans-serif;font-size:.75rem;font-weight:500;color:var(--slate);}
.type-name{font-weight:700;font-size:1rem;color:var(--ink);margin-bottom:6px;}
.type-desc{font-size:.9rem;color:var(--slate);line-height:1.5;}
.form-section h2{font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.02em;color:var(--ink);margin-bottom:32px;}
/* Une seule colonne centrée de 820 px (titre, réassurance, formulaire), alignée
   sur la FAQ : la carte calée à gauche laissait 40 % de vide à 1440 px. */
.form-section{max-width:820px;margin-inline:auto;}
.form-wrap{background:var(--cream);border-radius:var(--r);box-shadow:var(--sh);padding:40px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:20px;}
/* La rangée porte déjà la marge : sans ceci, 40 px sous Prénom/Nom contre 20 ailleurs. */
.form-row .form-group{margin-bottom:0;}
/* Scopé sous .form-wrap (DESIGN.md §8) : évite la fuite des sélecteurs nus hors formulaire.
   Tous les champs d'adherer.html sont dans .form-wrap → rendu strictement identique. */
.form-wrap label{font-size:.95rem;font-weight:600;color:var(--slate);}
/* Contour à 55 % d'encre (≥ 3:1 sur la carte, 2 thèmes) ; 1rem évite le zoom
   d'iOS au focus ; pas d'outline:none, l'anneau global :focus-visible s'affiche. */
.form-wrap input,.form-wrap select,.form-wrap textarea{font-family:'Outfit',sans-serif;font-size:1rem;color:var(--slate);background:var(--sand);border:2px solid color-mix(in srgb,var(--ink) 55%,transparent);border-radius:10px;padding:11px 14px;transition:border-color .2s;width:100%;}
.form-wrap ::placeholder{color:var(--muted);opacity:1;}
.form-wrap input:focus,.form-wrap select:focus,.form-wrap textarea:focus{border-color:var(--teal);}
.form-wrap textarea{resize:vertical;min-height:100px;}
.btn-submit{display:inline-flex;align-items:center;gap:12px;background:var(--coral-deep);color:white;border:none;border-radius:999px;padding:11px 11px 11px 28px;font-family:'Outfit',sans-serif;font-size:.95rem;font-weight:600;cursor:pointer;transition:background .35s var(--ease),transform .35s var(--ease-spring),box-shadow .35s var(--ease),opacity .2s;box-shadow:0 4px 14px color-mix(in srgb,var(--coral) 28%,transparent);}
.btn-submit::after{content:'→';display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;background:rgba(255,255,255,.18);font-size:1rem;font-weight:600;transition:transform .35s var(--ease-spring),background .35s var(--ease);}
.btn-submit:hover{background:var(--coral-hover);transform:translateY(-2px);box-shadow:0 10px 28px color-mix(in srgb,var(--coral) 38%,transparent);}
.btn-submit:hover::after{transform:translate(3px,-2px);background:rgba(255,255,255,.26);}
.btn-submit:active{transform:translateY(0) scale(.98);opacity:.95;}
.form-note{font-size:.9rem;color:var(--muted);margin-top:16px;line-height:1.6;}
.field-error{border-color:#c0392b!important;box-shadow:0 0 0 3px rgba(192,57,43,.12);}
.form-feedback{padding:16px 20px;border-radius:10px;margin-top:16px;font-size:.95rem;line-height:1.6;}
.form-feedback.error{background:rgba(192,57,43,.1);color:var(--coral-ink);border:1px solid rgba(192,57,43,.25);}
.btn-submit:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.form-consent{margin-bottom:24px;}
.consent-label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:.95rem;font-weight:400;color:var(--muted);line-height:1.6;}
.consent-label input[type="checkbox"]{flex:0 0 auto;width:24px;height:24px;margin-top:0;cursor:pointer;accent-color:var(--coral);}
.consent-label a{color:var(--coral-ink);text-decoration:underline;}
.consent-label input.field-error{outline:2px solid #c0392b;outline-offset:2px;}

/* Mobile : tarifs sur une colonne et padding de contact.css. En deux colonnes, le
   fieldset (min-width:min-content par défaut) dépassait de la carte jusqu'à 374 px. */
@media(max-width:600px){.form-row{grid-template-columns:1fr;}.form-row .form-group{margin-bottom:20px;}.types-grid{grid-template-columns:1fr;}.form-wrap{padding:28px 22px;}}

/* ── Phase 11 Wave 2 EMP-H — Type-cards radios + trust grid ── */
/* Plus de boîte autour des tarifs : carte de formulaire > fieldset bordé et ombré
   > cartes de tarif faisait trois boîtes imbriquées. min-width:0 : par défaut
   (min-content), le fieldset débordait de la carte sur mobile. */
fieldset.types-section{border:0;padding:0;margin:0 0 clamp(28px,4vw,40px);min-width:0;}
fieldset.types-section legend{
  font-family:'Fraunces',serif;font-style:italic;font-weight:600;
  font-size:clamp(1.4rem,2.4vw,1.8rem);letter-spacing:-.02em;
  color:var(--ink);padding:0;margin-bottom:8px;
}
.types-help{font-size:.95rem;color:var(--muted);margin:0 0 20px;line-height:1.55;}

.type-card{
  display:flex;flex-direction:column;gap:6px;
  cursor:pointer;position:relative;
  padding:clamp(18px,2.2vw,24px);
  /* --ink (qui s'inverse) : en --ink-fixed, le contour disparaissait en thème sombre. */
  border:1px solid color-mix(in srgb,var(--ink) 16%,transparent);
  border-radius:16px;
  background:var(--cream);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.type-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px color-mix(in srgb,var(--coral) 12%,transparent);
}
.type-card:has(input:checked){
  border-color:var(--coral);
  background:color-mix(in srgb,var(--coral) 8%,var(--sand));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 28px color-mix(in srgb,var(--coral) 18%,transparent);
}
/* --teal-ink et non --teal : la carte s'inverse, le teal brut n'y faisait que 2,97:1 en sombre. */
.type-card:has(input:focus-visible){
  outline:3px solid var(--teal-ink);
  outline-offset:3px;
}
.type-card .type-check{
  position:absolute;top:14px;right:14px;
  width:22px;height:22px;border-radius:50%;
  /* Pastille à fond blanc fixe : jeton fixe, ≥ 3:1 contre la carte. */
  border:2px solid color-mix(in srgb,var(--ink-fixed) 55%,transparent);
  background:white;
  transition:all .25s var(--ease);
}
.type-card:has(input:checked) .type-check{
  background:var(--coral);border-color:var(--coral);
  box-shadow:inset 0 0 0 4px white;
}
.type-card .type-engagement{
  display:block;
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed color-mix(in srgb,var(--ink-fixed) 12%,transparent);
  font-family:'Outfit',sans-serif;
  font-size:.82rem;
  font-weight:500;
  color:var(--coral-ink);
  letter-spacing:.01em;
  line-height:1.4;
}

/* ── Trust grid above form ── */
/* .form-trust-* → déplacé dans common.css (partagé avec contact.html) */

/* FAQ accordion : composant partagé déplacé dans common.css (réutilisé adherer/budget/logement/contact). */

/* Le parcours d'adhésion s'arrêtait sans jamais dire comment régler la
   cotisation. Faute de moyen de paiement arrêté par l'association, on dit ce
   qui est vrai : ce qui se passe après l'envoi du formulaire. */
.reglement-note{
  margin:0 0 26px;padding:14px 18px;
  background:color-mix(in srgb,var(--coral) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--coral) 20%,transparent);
  border-radius:12px;
  font-size:.95rem;line-height:1.6;color:var(--slate);
}
/* Formulaire retiré temporairement (04/11/2026) : tarifs affichés sans choix,
   adhésion par téléphone ou e-mail. */
.type-card--info{cursor:default;}
.type-card--info:hover{transform:none;box-shadow:none;}
.reglement-note--adherer{margin:24px 0 0;overflow-wrap:anywhere;}
.reglement-note strong{display:block;color:var(--coral-ink);margin-bottom:3px;}
.reglement-note a{color:var(--coral-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
/* Anneau teal sur le fond corail 7 % : 2,97:1 en sombre ; --ink : 9,9:1 sombre, 14:1 clair (comme .btn-submit). */
.reglement-note a:focus-visible{outline-color:var(--ink);}