/* ═══════════════════════════════════════════════════════════════
   British Workshop — Centre de 2 Mars · Landing de capture
   Charte reprise du flyer A5 (Canva, août 2026) : couleurs relevées
   au pixel sur le PDF, logo et visuels extraits du flyer lui-même
   pour une continuité parfaite entre le scan du QR et la page.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Palette exacte du flyer */
  --navy: #294287;
  --navy-dark: #1E3269;
  --navy-soft: #EBEDF3;
  --red: #D32A33;
  --red-band-a: #D32828;
  --red-band-b: #AB2222;
  --red-band-c: #7F1A1A;
  --gold: #FFBD59;
  --cream: #FEF4DE;
  --card: #F7F7F7;
  --ink: #2B2B2B;
  --muted: #737373;
  --line: #E3E3E3;

  --radius: 10px;
  --shadow: 0 4px 18px rgba(41, 66, 135, .10);
  --shadow-lg: 0 12px 40px rgba(41, 66, 135, .16);
  --wrap: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

.container {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Titres de section : majuscules espacées + filet, comme le verso du flyer ── */
.sec-title {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 26px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
}
.sec-title::after {
  content: '';
  flex: 1;
  height: 1.5px;
  background: linear-gradient(90deg, var(--red), rgba(211, 42, 51, .15));
}

section { padding: 54px 0; }

/* ═══════════════ HERO ═══════════════ */

.hero {
  position: relative;
  overflow: hidden;
  padding: 0 0 40px;
  background: #fff;
}

/* Drapeau ondulant en haut à gauche (visuel du flyer) */
.hero-flag {
  position: absolute;
  top: 0; left: 0;
  width: min(46%, 430px);
  pointer-events: none;
  z-index: 2;
}

/* Décor : Big Ben, cabine téléphonique et bus, en filigrane comme sur le flyer */
.hero-decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-decor img { position: absolute; opacity: .13; }
.hero-decor .d-bigben { left: 14%; top: 90px; width: 58px; opacity: .18; }
.hero-decor .d-booth { left: 1%; top: 210px; width: 92px; }
/* Le bus descend sous le badge, comme sur le flyer où il occupe le milieu de
   la page et non le haut. À 250 px il venait se coller au badge Cambridge. */
.hero-decor .d-bus { right: -2%; top: 392px; width: 300px; }

.hero-top {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  padding: 22px 0 8px;
}
.hero-logo { width: min(62vw, 300px); }

/* Bandeau diagonal « NOUVELLE OUVERTURE » */
.opening-wrap {
  position: relative;
  z-index: 3;
  margin: 10px 0 0;
  overflow: hidden;
  padding: 26px 0;
}
.opening-band {
  background: linear-gradient(90deg, var(--red-band-a) 0%, var(--red-band-b) 55%, var(--red-band-c) 100%);
  transform: rotate(-2.4deg);
  width: 112%;
  margin-left: -6%;
  padding: 13px 0;
  box-shadow: 0 6px 18px rgba(127, 26, 26, .22);
}
.opening-band span {
  display: block;
  transform: rotate(0deg);
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: clamp(.86rem, 2.7vw, 1.22rem);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero-body { position: relative; z-index: 3; text-align: center; }

/* Badge Cambridge : posé en haut à droite, à cheval sur le bandeau, comme sur
   le flyer. Détouré depuis le rendu vectoriel du PDF, donc net en écran 2×. */
.badge-cambridge {
  position: absolute;
  z-index: 4;
  /* Géométrie relevée sur le flyer : le badge déborde du bandeau vers le bas
     (son centre tombe SOUS le bord inférieur) et il est calé au bord droit. */
  top: 160px;
  right: clamp(16px, 6vw, 96px);
  width: clamp(86px, 12vw, 148px);
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .22));
  pointer-events: none;
}

.hero h1 {
  margin: 6px 0 14px;
  font-size: clamp(2.1rem, 8.2vw, 4rem);
  line-height: 1.03;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--navy);
  text-transform: uppercase;
}
.hero h1 .r { color: var(--red); display: block; }
.hero h1 .n { display: block; }

.hero-lead {
  margin: 0 auto 4px;
  max-width: 620px;
  font-size: clamp(1rem, 3.4vw, 1.2rem);
  color: #4A4A4A;
}
.hero-ages {
  margin: 0 0 26px;
  font-size: clamp(1rem, 3.6vw, 1.3rem);
  color: var(--muted);
  letter-spacing: .02em;
}

.hero-dates {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto 24px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--cream);
  border: 1.5px solid var(--gold);
  font-size: clamp(.85rem, 2.9vw, 1rem);
  color: #7A5B14;
}
.hero-dates i { color: #B8860B; }
.hero-dates strong { color: #6B4E0E; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ── Boutons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn-primary { background: var(--red); color: #fff; box-shadow: 0 6px 18px rgba(211, 42, 51, .3); }
.btn-primary:hover { background: #BD1F2F; transform: translateY(-2px); }
.btn-navy { background: var(--navy); color: #fff; box-shadow: 0 6px 18px rgba(41, 66, 135, .3); }
.btn-navy:hover { background: var(--navy-dark); transform: translateY(-2px); }
.btn-wa { background: #25D366; color: #0B3D1F; }
.btn-wa:hover { background: #1FBA59; transform: translateY(-2px); }
.btn-block { width: 100%; padding: 16px; font-size: 1.05rem; }

/* ═══════════════ BANDE DE CHIFFRES ═══════════════ */

.stats {
  padding: 30px 0;
  border-top: 2px solid var(--navy-soft);
  border-bottom: 2px solid var(--navy-soft);
  background: #fff;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.stat + .stat { border-left: 1.5px solid var(--line); }
.stat b {
  display: block;
  font-size: clamp(1.5rem, 5.4vw, 2.7rem);
  font-weight: 800;
  color: var(--red);
  line-height: 1.05;
}
.stat span {
  font-size: clamp(.6rem, 1.9vw, .82rem);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
}

/* ═══════════════ OFFRE ═══════════════ */

.offer { background: #fff; }
.offer-card {
  position: relative;
  background: var(--cream);
  border-radius: var(--radius);
  padding: 30px 28px;
  box-shadow: var(--shadow);
}
.offer-card h2 {
  margin: 0 0 18px;
  font-size: clamp(1.05rem, 3.7vw, 1.4rem);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--red);
}
.offer-list { list-style: none; margin: 0; padding: 0; }
.offer-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  font-size: clamp(1rem, 3.3vw, 1.18rem);
  color: #3A3A3A;
}
.offer-list i { color: var(--red); margin-top: 5px; flex: 0 0 auto; }
.offer-list b { color: var(--gold); font-weight: 800; }
/* Le doré est trop clair sur crème pour du texte fin : on le stabilise
   avec un contour sombre discret plutôt qu'en changeant la couleur charte. */
.offer-list b { text-shadow: 0 0 1px rgba(140, 90, 0, .55); }
.offer-note { margin: 14px 0 0; font-size: .78rem; color: #8A7A55; }

/* ═══════════════ FORMATIONS ═══════════════ */

.trainings { background: #fff; }
.train-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.train {
  background: var(--card);
  border-left: 5px solid var(--navy);
  border-radius: 6px;
  padding: 18px 20px;
}
.train:nth-child(even) { border-left-color: var(--red); }
.train h3 {
  margin: 0 0 5px;
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--navy);
}
.train p { margin: 0; font-size: .95rem; color: #5C5C5C; }

/* ═══════════════ POURQUOI NOUS CHOISIR ═══════════════ */

.why {
  position: relative;
  background: #fff;
  overflow: hidden;
}
.why-flag {
  position: absolute;
  right: -60px; bottom: -40px;
  /* 356 px = résolution native de l'image : au-delà elle serait agrandie donc floue */
  width: min(52%, 356px);
  opacity: .1;
  pointer-events: none;
}
.why-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px 30px;
}
.why-item { display: flex; gap: 15px; align-items: flex-start; }
.why-ico {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
}
.why-item:nth-child(even) .why-ico { background: var(--red); }
.why-item h3 { margin: 2px 0 2px; font-size: 1.04rem; font-weight: 700; color: var(--navy); }
.why-item p { margin: 0; font-size: .94rem; color: #5C5C5C; }

/* ═══════════════ EXAMENS ═══════════════ */

.exams { background: #fff; padding-top: 10px; }
.exam-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.exam-pills span {
  flex: 1 1 auto;
  text-align: center;
  min-width: 120px;
  padding: 12px 20px;
  border-radius: 6px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  letter-spacing: .02em;
}
.exam-pills span:nth-child(even) { background: var(--red); }

/* ═══════════════ FORMULAIRE ═══════════════ */

/* Le formulaire est au milieu de la page : on l'encadre en haut et en bas
   pour qu'il se détache comme un bloc de conversion, au lieu du dégradé
   descendant qui n'avait de sens qu'en fin de page. */
.form-section {
  background: var(--navy-soft);
  border-top: 3px solid var(--navy);
  border-bottom: 3px solid var(--navy);
}
.form-head { text-align: center; margin-bottom: 22px; }
.form-head h2 {
  margin: 0 0 6px;
  font-size: clamp(1.5rem, 5.4vw, 2.25rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.15;
}
.form-head h2 span { color: var(--red); }
.form-head p { margin: 0; color: var(--muted); font-size: 1.02rem; }

.lead-form {
  max-width: 660px;
  margin: 0 auto;
  background: #fff;
  border-radius: 14px;
  padding: 26px;
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 15px;
}
.field { display: grid; gap: 6px; }
.field label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .01em;
}
.field .opt { color: var(--muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(41, 66, 135, .13);
}
.field textarea { resize: vertical; }

.alert {
  max-width: 660px;
  margin: 0 auto 16px;
  padding: 13px 16px;
  border-radius: 8px;
  background: #FBEBEC;
  border: 1.5px solid var(--red);
  color: #8E1B23;
  font-size: .95rem;
}
.reassure {
  margin: 4px 0 0;
  font-size: .78rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}

/* ═══════════════ PIED DE PAGE ═══════════════ */

.footer {
  background: var(--navy);
  color: #fff;
  padding: 34px 0 26px;
}
.footer-logo { width: 250px; margin: 0 auto 22px; filter: brightness(0) invert(1); }
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 34px;
  text-align: center;
}
.footer-grid a, .footer-grid span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
}
.footer-grid a:hover { text-decoration: underline; }
.footer-grid i { color: var(--gold); }
.footer-social { margin-top: 14px; }
.footer-social a { font-size: .94rem; opacity: .92; }
.footer-social i { color: #fff; font-size: 1.15rem; }
.footer-legal {
  margin: 24px 0 0;
  text-align: center;
  font-size: .78rem;
  color: rgba(255, 255, 255, .65);
}

/* WhatsApp flottant */
.wa-float {
  position: fixed;
  right: 16px; bottom: 16px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  z-index: 50;
  text-decoration: none;
}

/* ── Nous trouver ── */
.find-us { background: #fff; text-align: center; padding: 10px 0 40px; }
.find-address { margin: 0 0 8px; line-height: 1.6; color: var(--navy); }
.find-hours { margin: 0 0 20px; color: #737373; }
.find-address i, .find-hours i { color: var(--red); margin-right: 6px; }
.btn-waze { background: #33CCFF; color: #0A2A3D; box-shadow: 0 6px 18px rgba(51, 204, 255, .3); }
.btn-waze:hover { background: #1FB8EB; transform: translateY(-2px); }

/* ── Rappel d'action en fin de page ── */
.closing-cta {
  background: var(--card);
  text-align: center;
  padding: 40px 0;
}
.closing-cta p {
  margin: 0 0 18px;
  font-size: clamp(1.05rem, 3.6vw, 1.35rem);
  font-weight: 600;
  color: var(--navy);
}

/* ── Barre d'action fixe (mobile) ──
   L'ordre des sections suit celui du flyer, donc le formulaire arrive bas
   dans la page. Cette barre garde la conversion accessible en permanence
   sans casser cette continuité de lecture. Masquée sur desktop, où le
   bouton WhatsApp flottant suffit. */
.cta-bar { display: none; }

@media (max-width: 720px) {
  .cta-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    gap: 8px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, .97);
    border-top: 1.5px solid var(--navy-soft);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .1);
  }
  .cta-bar .btn { padding: 13px 14px; font-size: .95rem; }
  .cta-bar .cta-main { flex: 1; }
  .cta-bar .cta-wa { flex: 0 0 auto; width: 52px; padding: 13px 0; font-size: 1.3rem; }
  /* Le flottant ferait doublon avec la barre */
  .wa-float { display: none; }
  /* Réserve la hauteur de la barre pour ne pas masquer le pied de page */
  body { padding-bottom: 74px; }
}

/* ═══════════════ PAGE MERCI ═══════════════ */

.thanks {
  min-height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 40px 20px;
  background: linear-gradient(180deg, #fff 0%, var(--navy-soft) 100%);
}
.thanks-card {
  max-width: 560px;
  background: #fff;
  border-radius: 16px;
  padding: 40px 30px;
  box-shadow: var(--shadow-lg);
  border-top: 5px solid var(--red);
}
.thanks-logo { width: 240px; margin: 0 auto 22px; }
.thanks-ico { font-size: 3rem; color: #25D366; margin-bottom: 12px; }
.thanks h1 {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 5.4vw, 2rem);
  font-weight: 800;
  color: var(--navy);
}
.thanks p { color: #4A4A4A; margin: 0 0 14px; }
.thanks .btn { margin-top: 8px; }
.thanks-back { display: block; margin-top: 18px; color: var(--muted); font-size: .9rem; }

/* ═══════════════ /reserver — FORMULAIRE COURT ═══════════════ */
.quick-wrap { max-width: 480px; padding-top: 18px; }
.quick-wrap .rdv-logo { width: 170px; margin-bottom: 10px; }
.quick-wrap .rdv-head { margin-bottom: 14px; }
.quick-form { gap: 14px; }
.quick-form .field input { font-size: 1.05rem; padding: 14px; }
.quick-form .choice-row { grid-template-columns: repeat(3, 1fr) !important; gap: 6px; }
.quick-form .choice span { flex-direction: column; gap: 4px; padding: 10px 4px; font-size: .9rem; }
.quick-wa { margin-top: 14px; }
.quick-call { display: block; text-align: center; margin-top: 12px; color: var(--navy); font-weight: 600; text-decoration: none; }
.quick-proof { list-style: none; margin: 22px 0 0; padding: 16px 18px; background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); display: grid; gap: 10px; font-size: .95rem; color: #333; }
.quick-proof i { color: var(--red); width: 22px; text-align: center; margin-right: 6px; }
.quick-proof a { color: var(--navy); }

/* ═══════════════ RESPONSIVE ═══════════════ */

@media (max-width: 720px) {
  section { padding: 40px 0; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
  .stat:nth-child(3) { border-left: 0; }
  .hero-decor .d-bus { width: 190px; top: 320px; }
  .hero-decor .d-booth, .hero-decor .d-bigben { display: none; }
  .hero-flag { width: 58%; }
  .opening-band { width: 124%; margin-left: -12%; }
  /* Pas la place à droite du bandeau sur mobile : le badge passe centré
     juste dessous, et le corps du hero est décalé d'autant pour lui faire
     de la place sans jamais recouvrir le titre. */
  .badge-cambridge {
    top: 190px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 78px;
  }
  .hero-body { padding-top: 106px; }
  .lead-form { padding: 20px; }
  .footer-grid { flex-direction: column; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ═══════════════ RÉSERVATION DU TEST (/rdv/<jeton>) ═══════════════ */

.rdv-page { background: linear-gradient(180deg, #fff 0%, var(--navy-soft) 100%); min-height: 100vh; }
.rdv-wrap { max-width: 700px; margin: 0 auto; padding: 28px 16px 48px; }
.rdv-head { text-align: center; margin-bottom: 20px; }
.rdv-logo { width: 210px; margin: 0 auto 14px; display: block; }
.rdv-head h1 { margin: 0 0 6px; font-size: clamp(1.45rem, 5.4vw, 2.1rem); font-weight: 800; color: var(--navy); line-height: 1.15; }
.rdv-head h1 span { color: var(--red); }
.rdv-head p { margin: 0; color: var(--muted); }
.rdv-perks { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.rdv-perks li { background: var(--cream); color: var(--navy); border-radius: 999px; padding: 6px 12px; font-size: .82rem; font-weight: 600; }
.rdv-perks i { color: var(--red); margin-right: 4px; }
.rdv-info { background: #EAF6EE; border: 1.5px solid #25A55A; color: #14532D; border-radius: 8px; padding: 12px 14px; margin: 0 auto 16px; font-size: .95rem; }
.alert ul { margin: 6px 0 0; padding-left: 18px; }

.rdv-form { gap: 22px; }
.rdv-step { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; min-width: 0; }
.rdv-step legend { font-weight: 700; color: var(--navy); font-size: 1.02rem; margin-bottom: 10px; padding: 0; }
.rdv-step .num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .85rem; margin-right: 6px; }
.req { color: var(--red); }
.rdv-hint { margin: 0; color: var(--muted); font-size: .88rem; }
.rdv-hint.is-error { color: var(--red); font-weight: 600; }

.day-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; }
.day-chip { flex: 0 0 auto; scroll-snap-align: start; cursor: pointer; }
.day-chip input, .slot input, .choice input { position: absolute; opacity: 0; pointer-events: none; }
.day-chip { display: grid; justify-items: center; width: 64px; padding: 8px 4px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; transition: all .15s ease; }
.day-chip .dow { font-size: .72rem; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.day-chip .dom { font-size: 1.35rem; font-weight: 800; color: var(--navy); line-height: 1.1; }
.day-chip .mon { font-size: .72rem; color: var(--muted); }
.day-chip:has(input:checked) { background: var(--navy); border-color: var(--navy); }
.day-chip:has(input:checked) span { color: #fff; }
.day-chip:has(input:focus-visible), .slot:has(input:focus-visible), .choice:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(41, 66, 135, .25); }
.day-chip.is-full { opacity: .4; cursor: not-allowed; }

.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.slot-grid[hidden] { display: none; }
.slot { cursor: pointer; }
.slot span { display: block; text-align: center; padding: 10px 4px; border: 1.5px solid var(--line); border-radius: 8px; font-weight: 600; color: var(--navy); background: #fff; transition: all .15s ease; }
.slot:has(input:checked) span { background: var(--red); border-color: var(--red); color: #fff; }
.slot.is-full span { text-decoration: line-through; opacity: .45; cursor: not-allowed; }

.choice-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.choice { cursor: pointer; }
.choice span { display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; min-height: 52px; padding: 8px; border: 1.5px solid var(--line); border-radius: 8px; font-weight: 600; font-size: .9rem; color: var(--navy); background: #fff; }
.choice:has(input:checked) span { border-color: var(--navy); background: var(--navy-soft); box-shadow: inset 0 0 0 1px var(--navy); }

.kids { display: grid; gap: 10px; background: var(--card); border-radius: 10px; padding: 12px; }
.kids[hidden], #bloc-adulte[hidden] { display: none; }
.kid-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kid-row.is-extra { display: none; }
.link-btn { background: none; border: 0; color: var(--navy); font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; text-align: left; padding: 0; }
.link-btn[hidden] { display: none; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: #4A4A4A; }
.consent input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; }
.rdv-help { text-align: center; color: var(--muted); font-size: .92rem; margin-top: 18px; }
.rdv-help a { color: #128C4A; font-weight: 600; }
.rdv-when { font-size: 1.1rem; color: var(--navy) !important; }
.rdv-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }

@media (max-width: 560px) {
  .two, .kid-row { grid-template-columns: 1fr; }
  .choice-row { grid-template-columns: 1fr; }
  .rdv-form { padding: 20px 16px; }
}