/* Inscription — déclinaison de la direction visuelle de l'accueil. */
.registration-page { max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 0 clamp(64px, 8vw, 120px) !important; display: grid !important; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr) !important; gap: clamp(34px, 7vw, 110px) !important; align-items: start; background: #0b100d; color: #fff; }
.registration-intro { min-height: min(760px, calc(100svh - 76px)); position: sticky !important; top: 76px !important; padding: clamp(54px, 8vw, 120px) 0 clamp(54px, 7vw, 92px) clamp(24px, 7vw, 110px); background: linear-gradient(90deg, rgba(7,12,9,.96) 0%, rgba(7,12,9,.79) 48%, rgba(7,12,9,.22) 100%), url('/images/rocade-hero-runners.png') center/cover; }
.registration-intro .eyebrow { color: var(--lime); }
.registration-intro h1 { max-width: 560px; margin: 18px 0 24px !important; color: #fff !important; font-size: clamp(64px, 7vw, 112px) !important; line-height: .74 !important; letter-spacing: -.03em; }
.registration-intro h1 em { color: var(--lime); font-style: normal; }
.registration-intro > p { max-width: 430px; color: rgba(255,255,255,.82); font-size: 16px !important; line-height: 1.75; }
.registration-facts { max-width: 470px; margin-top: clamp(38px, 5vw, 68px) !important; padding: 0 !important; border-top-color: rgba(255,255,255,.32) !important; border-radius: 0 !important; background: transparent !important; backdrop-filter: none !important; }
.registration-facts div { padding: 15px 0 !important; border-bottom-color: rgba(255,255,255,.22) !important; }
.registration-facts span { color: rgba(255,255,255,.64) !important; }
.registration-facts strong { color: #fff; }

.registration-card { width: min(760px, calc(100% - 48px)); margin: clamp(44px, 8vw, 112px) clamp(24px, 5vw, 82px) 0 0; padding: clamp(30px, 4.6vw, 62px) !important; border: 0 !important; border-radius: 20px !important; background: #fff !important; color: var(--ink); box-shadow: -20px 24px 70px rgba(0,0,0,.25) !important; }
.form-heading { padding-bottom: 26px !important; }
.form-heading::after { width: 100px !important; height: 4px !important; background: var(--lime) !important; }
.form-heading h2 { font-size: clamp(42px, 4.4vw, 68px) !important; }
.registration-card .form { gap: 24px; margin-top: 38px !important; }
.registration-card .form label { color: #3e4841; }
.registration-card .form input, .registration-card .form select { padding: 14px 4px !important; border-bottom-color: rgba(16,21,18,.28) !important; }
.registration-card .form input:focus, .registration-card .form select:focus { background: #f6ffe8 !important; border-bottom-color: var(--lime) !important; }
.distance-choices { gap: 10px !important; }
.distance-option span { min-height: 118px !important; padding: 17px 14px !important; border-radius: 10px !important; background: #f4f5f0 !important; }
.distance-option b { font-size: clamp(28px, 3vw, 40px) !important; }
.distance-option small { color: #647069 !important; }
.distance-option input:checked + span { background: #101512 !important; color: #fff !important; }
.registration-card .form .button { min-height: 56px; margin-top: 12px; border-radius: 0; background: var(--lime) !important; color: var(--ink) !important; }
.registration-card .form .button:hover { background: #101512 !important; color: #fff !important; }

@media (max-width: 1100px) and (min-width: 761px) {
  .registration-page { grid-template-columns: minmax(320px, .8fr) minmax(390px, 1.2fr) !important; gap: 34px !important; }
  .registration-intro { padding-left: 40px; }
  .registration-card { width: calc(100% - 40px); margin-right: 40px; }
}

@media (max-width: 760px) {
  .registration-page { display: block !important; padding: 0 0 48px !important; }
  .registration-intro { min-height: 480px; position: relative !important; top: auto !important; padding: 46px 20px 38px; background: linear-gradient(180deg, rgba(7,12,9,.68), rgba(7,12,9,.95)), url('/images/rocade-hero-runners.png') center/cover; }
  .registration-intro h1 { font-size: clamp(54px, 15vw, 74px) !important; line-height: .78 !important; }
  .registration-intro > p { max-width: 330px; font-size: 14px !important; }
  .registration-facts { max-width: none; margin-top: 30px !important; }
  .registration-card { width: calc(100% - 28px); margin: -24px auto 0; padding: 28px 18px !important; border-radius: 16px !important; position: relative; z-index: 2; }
  .form-heading h2 { font-size: 42px !important; }
  .registration-card .form { grid-template-columns: 1fr !important; gap: 18px; }
  .registration-card .form label, .registration-card .form label:nth-child(n), .registration-card .form .button { grid-column: 1 !important; }
  .distance-choices { grid-column: 1 !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
  .distance-option span { min-height: 78px !important; padding: 10px 4px !important; text-align: center; }
  .distance-option b { font-size: 22px !important; }
  .distance-option small { display: none; }
}

/* Ajustement de composition : formulaire dense et hiérarchie plus proche
   de l'accueil, sans panneaux surdimensionnés. */
@media (min-width: 761px) {
  .registration-page { grid-template-columns: minmax(360px, .72fr) minmax(620px, 1.28fr) !important; gap: 0 !important; background: #f4f1ea; }
  .registration-intro { min-height: calc(100svh - 76px); padding-right: clamp(36px, 5vw, 76px); }
  .registration-intro h1 { font-size: clamp(58px, 5.8vw, 90px) !important; }
  .registration-intro > p { font-size: 15px !important; }
  .registration-facts { margin-top: 38px !important; }
  .registration-card { width: min(820px, calc(100% - 72px)); margin: clamp(38px, 4vw, 64px) auto !important; padding: clamp(32px, 3.7vw, 52px) !important; box-shadow: 0 20px 50px rgba(16,21,18,.12) !important; }
  .form-heading { padding-bottom: 20px !important; }
  .registration-card .form { margin-top: 30px !important; gap: 20px !important; }
  .distance-choices { margin: 0 !important; }
  .distance-option span { min-height: 102px !important; padding: 14px 12px !important; display: flex !important; flex-direction: column; justify-content: center; }
  .distance-option b { font-size: 31px !important; }
  .registration-card .distance-option small { display: block !important; margin-top: 8px !important; font-size: 9px !important; line-height: 1.35; }
}