/* ORL Audition — page « Rejoindre ORL Audition »
   Complète assets/css/base.css. Réutilise .form-card, .field,
   .hp, .form-status, .form-note définis dans home.css : la page
   charge donc aussi home.css ? Non — ces styles de formulaire
   sont ici recopiés pour rester autonome. */

.join-hero{padding:150px 0 100px;background:var(--cream-2)}
.join-hero-inner{max-width:720px;margin:0 auto;text-align:center}
.join-hero .eyebrow{display:block;margin-bottom:16px}
.join-hero h1{font-size:clamp(2.1rem,4.8vw,3.1rem);line-height:1.1;letter-spacing:-.02em;margin-bottom:20px}
.join-hero h1 em,.join h2 em{font-style:normal;color:var(--terra)}
.join-hero .lead{color:var(--ink-soft);font-size:1.05rem;line-height:1.7;max-width:620px;margin:0 auto 34px}

/* Pourquoi : grille de cartes */
.join-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:940px;margin:0 auto}
.join-card{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:32px 34px;transition:border-color .25s,transform .35s var(--ease),box-shadow .35s}
.join-card:hover{border-color:var(--terra-tint);transform:translateY(-2px);box-shadow:0 14px 34px -22px rgba(22,19,15,.28)}
.join-card h3{font-size:1.18rem;font-weight:400;letter-spacing:-.01em;margin-bottom:12px}
.join-card p{color:var(--ink-soft);line-height:1.68;margin:0}

/* Détails */
.join-details-sec{background:var(--cream)}
.join-details{max-width:760px;margin:0 auto;display:grid;gap:48px}
.join-block{border-left:2px solid var(--terra-tint);padding-left:30px}
.join-block h3{font-size:1.22rem;font-weight:400;letter-spacing:-.012em;margin-bottom:10px}
.join-block p{color:var(--ink-soft);font-size:1.05rem;line-height:1.7;margin:0}
.join-rpps{max-width:760px;margin:48px auto 0;background:var(--terra-tint-2);border-left:3px solid var(--terra);border-radius:0 14px 14px 0;padding:22px 26px}
.join-rpps p{margin:0;color:var(--ink-soft);line-height:1.7}
.join-rpps strong{color:var(--terra-deep)}
.join-rpps abbr{text-decoration:none;border-bottom:1px dotted var(--ink-faint);cursor:help}

/* Candidature */
.join-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;max-width:1000px;margin:0 auto}
.join-form-intro{padding-top:8px}
.join-form-intro .eyebrow{display:block;margin-bottom:14px}
.join-form-intro h2{font-size:clamp(1.6rem,3.2vw,2.1rem);line-height:1.16;letter-spacing:-.015em;margin-bottom:16px}
.join-form-intro p{color:var(--ink-soft);line-height:1.7;font-size:1.05rem}

/* Formulaire (autonome, mêmes réglages que la page contact) */
.join .form-card{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:34px 34px}
.join .field{margin-bottom:18px}
.join .field label{display:block;font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.join .field input,.join .field select,.join .field textarea{width:100%;font:inherit;color:var(--ink);background:var(--cream);border:1px solid var(--line-strong);border-radius:12px;padding:13px 15px;transition:border-color .2s,background .2s}
.join .field input:focus,.join .field select:focus,.join .field textarea:focus{outline:none;border-color:var(--terra);background:#fff}
.join .field textarea{min-height:130px;resize:vertical}
.join .form-card .btn{width:100%;justify-content:center;margin-top:4px}
.join .hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
.join .form-status{font-size:.92rem;font-weight:500;margin-top:16px;text-align:center;display:none;padding:12px 14px;border-radius:12px}
.join .form-status.show{display:block}
.join .form-status.ok{display:block;color:#1f6b41;background:#e7f2ea;border:1px solid #bfe0cb}
.join .form-status.err{display:block;color:var(--terra-deep);background:var(--terra-tint-2);border:1px solid var(--terra-tint)}
.join .form-note{font-size:.8rem;color:var(--ink-faint);margin-top:14px;text-align:center}

@media (max-width:820px){
  .join-grid{grid-template-columns:1fr;max-width:520px}
  .join-form-grid{grid-template-columns:1fr;gap:32px;max-width:560px}
}
@media (max-width:560px){
  .join-hero{padding-top:120px}
  .join .form-card{padding:28px 22px}
}

/* ---------- Bloc intro médecins (image + texte) ---------- */
.join-intro-sec{background:var(--cream)}
.join-intro{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:center;max-width:940px;margin:0 auto}
.join-intro-media{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5;width:100%;max-width:300px;background:var(--cream-2)}
.join-intro-media picture{display:contents}
.join-intro-media img{width:100%;height:100%;object-fit:cover;display:block}
.join-intro-media .pill{position:absolute;top:16px;left:16px;z-index:2;background:rgba(22,19,15,.72);color:#fff;font-size:.74rem;font-weight:600;letter-spacing:.04em;padding:7px 14px;border-radius:100px;backdrop-filter:blur(4px)}
.join-intro-body .eyebrow{display:block;margin-bottom:14px}
.join-intro-body h2{font-size:clamp(1.6rem,3.2vw,2.1rem);line-height:1.16;letter-spacing:-.015em;margin-bottom:16px}
.join-intro-body .lead{color:var(--ink-soft);font-size:1.05rem;line-height:1.7;margin-bottom:22px}
.join-intro .tags{display:flex;flex-wrap:wrap;gap:9px}
.join-intro .tag{font-size:.82rem;font-weight:500;color:var(--terra-deep);background:var(--terra-tint-2);border:1px solid var(--terra-tint);padding:6px 13px;border-radius:100px}

@media (max-width:820px){
  .join-intro{grid-template-columns:1fr;gap:30px;max-width:520px}
  .join-intro-media{aspect-ratio:16/11}
}

/* Astérisque champ obligatoire */
.req{color:var(--terra);font-weight:600}
.join .form-note .req{color:var(--terra)}

/* Encart "100 % prise en charge" (médecins généralistes) */
.join-highlight{margin-top:18px;background:var(--terra-tint-2);border:1px solid var(--terra-tint);border-radius:14px;padding:18px 22px}
.join-highlight-badge{display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--terra);padding:5px 13px;border-radius:100px;margin-bottom:10px}
.join-highlight p{color:var(--ink-soft);font-size:1.02rem;line-height:1.6;margin:0}