:root {
  --red: #ce0220;
  --red-bright: #f2052b;
  --ink: #111214;
  --paper: #f4f2ee;
  --white: #fff;
  --line: rgba(17, 18, 20, 0.14);
}

* { box-sizing: border-box; }
/* Un display pose par une regle d'auteur prime sur le [hidden] du navigateur :
   ce garde-fou evite qu'un bloc masque en PHP ou en JS reste visible. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
/* --- police de marque -------------------------------------------------
   Geom n'existe qu'en une graisse : les titres en 800/900 sont donc épaissis
   par le navigateur. Arial reste dans la pile pour les signes que la police
   ne contient pas — flèches, triangles, coche. */
@font-face {
  font-family: 'Geom';
  src: url('assets/fonts/geom-regular.woff2') format('woff2'),
       url('assets/fonts/geom-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Cairo n'est fourni qu'en Medium : declare en 500, les graisses 700+
   sont donc epaissies par le navigateur, comme pour Geom. */
@font-face {
  font-family: 'Cairo';
  src: url('assets/fonts/Cairo-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Cairo', Arial, Helvetica, sans-serif;
  text-rendering: optimizeLegibility;
}
/* --- exception : les textes deja en majuscules gardent Geom -------------
   Titres passes en uppercase par le CSS, plus les libelles ecrits en
   majuscules directement dans le HTML (marque, carte du hero). */
.eyebrow,
.hero h1,
.hero-stats span,
.section-heading h2,
.benefits-copy h2,
.registration-intro h2,
.discipline-kicker,
.discipline-card h3,
.success-label,
.brand strong,
.brand small,
.brand-name strong,
.brand-name small,
.visual-number,
.card-front p,
.card-front strong { font-family: 'Geom', Arial, Helvetica, sans-serif; }

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }

.site-header {
  align-items: center;
  background: rgba(17, 18, 20, 0.9);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--white);
  display: flex;
  height: 82px;
  justify-content: space-between;
  left: 0;
  padding: 0 clamp(24px, 6vw, 96px);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 50;
}

.brand { align-items: center; display: inline-flex; gap: 13px; }
.brand-name { display: flex; flex-direction: column; line-height: 1; }
.brand strong { font-size: 17px; font-weight: 900; letter-spacing: 0.04em; }
.brand small { color: #b9bbc0; font-size: 8px; font-weight: 700; letter-spacing: 0.34em; margin-top: 5px; }
/* Logo envoyé depuis l'admin : il remplace le symbole et le nom écrit. */
.brand-logo { display: block; height: 38px; object-fit: contain; width: auto; }
.footer-brand .brand-logo { height: 32px; }
.brand-symbol { background: var(--red); display: block; height: 30px; position: relative; transform: skewY(-8deg); width: 32px; }
.brand-symbol::before { background: var(--ink); border-radius: 0 0 100% 0; content: ""; height: 14px; left: 0; position: absolute; top: 0; width: 15px; }
.brand-symbol i { background: var(--red); border-radius: 50%; height: 7px; left: -2px; position: absolute; top: -8px; width: 7px; }
.site-header nav { align-items: center; display: flex; gap: 32px; }
.site-header nav a { color: #d7d8da; font-size: 13px; font-weight: 700; }
.site-header nav a:hover { color: var(--white); }
.site-header .nav-button { background: var(--red); border-radius: 999px; color: var(--white); padding: 13px 22px; }

.hero {
  align-items: center;
  background: var(--ink);
  color: var(--white);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  min-height: 790px;
  overflow: hidden;
  padding: 142px clamp(24px, 6vw, 96px) 84px;
  position: relative;
}
.hero-grid { background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 54px 54px; inset: 0; mask-image: linear-gradient(90deg, #000 0%, transparent 84%); position: absolute; }
.hero::after { background: radial-gradient(circle, rgba(206,2,32,.26), transparent 64%); content: ""; height: 720px; position: absolute; right: -260px; top: 50px; width: 720px; }
.orbit { border: 1px solid rgba(255,255,255,.09); border-radius: 50%; position: absolute; }
.orbit-one { height: 570px; right: -70px; top: 130px; width: 570px; }
.orbit-two { height: 390px; right: 20px; top: 220px; width: 390px; }
.hero-content, .hero-visual { position: relative; z-index: 2; }
.hero-content { max-width: 760px; }
.eyebrow { align-items: center; color: #c9cbd0; display: flex; font-size: 11px; font-weight: 800; gap: 10px; letter-spacing: .18em; margin: 0 0 24px; text-transform: uppercase; }
.eyebrow span { background: var(--red); display: inline-block; height: 2px; width: 34px; }
.hero h1 { font-size: clamp(52px, 6.8vw, 102px); font-weight: 900; letter-spacing: -.02em; line-height: .92; margin: 0; max-width: 900px; text-transform: uppercase; }
.hero h1 em { color: var(--red-bright); font-style: normal; }
.hero-copy { color: #babdc2; font-size: 17px; line-height: 1.75; margin: 34px 0 0; max-width: 600px; }
.hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 28px; margin-top: 38px; }
.primary-button, .submit-button { align-items: center; background: var(--red); border: 0; border-radius: 999px; color: var(--white); display: inline-flex; font-size: 13px; font-weight: 800; gap: 24px; justify-content: center; padding: 17px 24px; transition: transform 180ms ease, background 180ms ease; }
.primary-button:hover, .submit-button:hover { background: #ed062b; transform: translateY(-2px); }
.secondary-link { border-bottom: 1px solid rgba(255,255,255,.28); color: #e2e3e5; font-size: 13px; font-weight: 700; padding-bottom: 7px; }
.hero-stats { border-top: 1px solid rgba(255,255,255,.12); display: flex; gap: clamp(30px, 6vw, 76px); margin-top: 58px; max-width: 590px; padding-top: 25px; }
.hero-stats div { display: flex; flex-direction: column; gap: 3px; }
.hero-stats strong { font-size: 23px; font-weight: 900; }
.hero-stats span { color: #85888e; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.hero-visual { height: 520px; justify-self: end; max-width: 520px; width: 100%; }
.visual-card { border: 1px solid rgba(255,255,255,.12); height: 410px; position: absolute; width: 300px; }
.card-back { background: url('assets/images/palette.png') center / cover no-repeat; right: 0; top: 88px; transform: rotate(9deg); }
.card-back span { bottom: 25px; color: rgba(255,255,255,.25); font-size: 70px; font-weight: 900; left: -16px; position: absolute; transform: rotate(-90deg); }
.card-front { background: url('assets/images/olympysky.png') center / cover no-repeat #18191b; box-shadow: 0 32px 60px rgba(0,0,0,.35); left: 48px; padding: 32px; top: 45px; transform: rotate(-5deg); }
.visual-number { color: rgba(255,255,255,.5); font-size: 160px; font-weight: 900; left: 20px; letter-spacing: -.03em; line-height: 1; position: absolute; top: 35px; }
.visual-lines { display: flex; flex-direction: column; gap: 11px; margin-top: 170px; }
.visual-lines i { background: rgba(255,255,255,.16); display: block; height: 2px; }
.visual-lines i:first-child { width: 100%; }
.visual-lines i:nth-child(2) { width: 70%; }
.visual-lines i:nth-child(3) { background: var(--red); width: 42%; }
.card-front p { color: #83868b; font-size: 11px; font-weight: 800; letter-spacing: .23em; margin: 42px 0 7px; }
.card-front strong { font-size: 22px; font-weight: 900; }
.visual-badge { align-items: center; background: var(--white); border-radius: 50%; bottom: 25px; color: var(--red); display: flex; font-size: 13px; font-weight: 900; height: 82px; justify-content: center; left: 2px; position: absolute; transform: rotate(12deg); width: 82px; }
.visual-badge img { display: block; height: auto; width: 44px; }

.academies-section { padding: 110px clamp(24px, 6vw, 96px) 120px; }
.section-heading { align-items: end; display: flex; gap: 80px; justify-content: space-between; margin-bottom: 52px; }
.dark-eyebrow { color: #66696e; margin-bottom: 18px; }
.section-heading h2, .benefits-copy h2, .registration-intro h2 { font-size: clamp(38px, 4.5vw, 68px); font-weight: 900; letter-spacing: -.018em; line-height: .98; margin: 0; text-transform: uppercase; }
.section-heading > p { color: #686b70; font-size: 15px; line-height: 1.75; margin: 0; max-width: 430px; }
.discipline-grid { display: grid; gap: 14px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.discipline-card { background: var(--white); border: 1px solid rgba(17,18,20,.08); cursor: pointer; display: flex; flex-direction: column; grid-column: span 2; justify-content: space-between; min-height: 430px; overflow: hidden; padding: 28px; position: relative; transition: transform 200ms ease, box-shadow 200ms ease; }
/* Grille 3 par rangée. Seule une dernière rangée incomplète est recentrée :
   2 cartes restantes → décalées d'une demi-place ; 1 carte restante → au milieu.
   Une rangée complète reste alignée à gauche. */
.discipline-card:nth-child(3n + 1):nth-last-child(2) { grid-column: 2 / span 2; }
.discipline-card:nth-child(3n + 1):last-child { grid-column: 3 / span 2; }
.discipline-card:hover { box-shadow: 0 24px 50px rgba(24,25,27,.12); transform: translateY(-6px); }
.discipline-card:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
/* Ornement d'angle : bottom.png, disque et quart de cercle d'un seul tenant.
   Le PNG est transparent hors de la forme, il se pose donc sur les photos. */
.discipline-card::after { background: url('assets/images/bottom.png') right bottom / 100px 100px no-repeat; bottom: 0; content: ""; height: 100px; position: absolute; right: 0; transform-origin: bottom right; transition: transform 250ms ease; width: 100px; }
.discipline-card:hover::after { transform: scale(1.1); }
.card-topline { align-items: start; display: flex; justify-content: space-between; }
.card-topline > span { color: #a4a6aa; font-size: 11px; font-weight: 800; }
.card-topline b { align-items: center; background: var(--ink); border-radius: 50%; color: var(--white); display: flex; font-size: 13px; height: 52px; justify-content: center; width: 52px; }
.discipline-kicker { color: var(--red) !important; font-size: 10px !important; font-weight: 900; letter-spacing: .12em; margin: 0 0 13px !important; text-transform: uppercase; }
.discipline-card h3 { font-size: clamp(25px, 2.4vw, 36px); font-weight: 900; letter-spacing: -.015em; line-height: .98; margin: 0; max-width: 290px; text-transform: uppercase; }
.discipline-card p { color: #73767a; font-size: 13px; line-height: 1.65; margin: 18px 0 0; max-width: 310px; }
/* La carte entière est la zone cliquable : ce bandeau n'est plus qu'un
   repère visuel, d'où le div à la place du bouton. */
.card-cta { align-items: center; border-top: 1px solid var(--line); color: var(--ink); display: flex; font-size: 12px; font-weight: 800; justify-content: space-between; margin-top: 28px; padding: 18px 0 0; position: relative; z-index: 1; }
/* --- carte avec photo de fond ------------------------------------------
   L'image remplit la carte ; un dégradé sombre garantit la lisibilité du
   texte quelle que soit la photo envoyée depuis l'admin. */
.discipline-card.has-photo { background-color: var(--ink); background-position: center; background-repeat: no-repeat; background-size: cover; border-color: transparent; }
.discipline-card.has-photo::before { background: linear-gradient(180deg, rgba(9,10,11,.28) 0%, rgba(9,10,11,.72) 52%, rgba(9,10,11,.93) 100%); content: ""; inset: 0; position: absolute; }
.discipline-card.has-photo > * { position: relative; z-index: 1; }
/* Le rouge de marque ne tient pas sur une photo sombre : textes éclaircis. */
.discipline-card.has-photo h3 { color: var(--white); }
.discipline-card.has-photo p { color: rgba(255,255,255,.78); }
.discipline-card.has-photo .card-topline > span { color: rgba(255,255,255,.55); }

.discipline-card.has-photo .card-topline b { background: var(--white); color: var(--ink); }
.discipline-card.has-photo .card-cta { border-top-color: rgba(255,255,255,.28); color: var(--white); }
.discipline-card.has-photo:hover { box-shadow: 0 24px 50px rgba(9,10,11,.32); }


.benefits-section { align-items: start; background: var(--ink); color: var(--white); display: grid; gap: clamp(60px, 10vw, 160px); grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); padding: 110px clamp(24px, 6vw, 96px); }
.benefits-copy > p:last-child { color: #aeb1b5; font-size: 15px; line-height: 1.8; margin: 30px 0 0; max-width: 520px; }
.benefit-list { border-top: 1px solid rgba(255,255,255,.14); }
.benefit-list div { align-items: center; border-bottom: 1px solid rgba(255,255,255,.14); display: grid; gap: 20px; grid-template-columns: 40px 1fr 40px; padding: 24px 0; }
.benefit-list span { color: #74777c; font-size: 11px; font-weight: 800; }
.benefit-list strong { font-size: clamp(19px, 2vw, 27px); }
.benefit-list i { align-items: center; background: var(--red); border-radius: 50%; display: flex; font-size: 12px; font-style: normal; height: 34px; justify-content: center; width: 34px; }

.registration-section { align-items: start; display: grid; gap: clamp(60px, 9vw, 145px); grid-template-columns: minmax(280px, .7fr) minmax(540px, 1.3fr); padding: 120px clamp(24px, 6vw, 96px); }
.registration-intro { position: sticky; top: 120px; }
.registration-intro > p:nth-of-type(2) { color: #686b70; font-size: 15px; line-height: 1.8; margin: 28px 0 0; }
.contact-note { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 18px; margin-top: 40px; padding-top: 26px; }
.contact-note > span { align-items: center; background: var(--red); border-radius: 50%; color: var(--white); display: flex; flex: 0 0 auto; font-size: 13px; font-weight: 900; height: 56px; justify-content: center; width: 56px; }
.contact-note p { color: #76797d; display: flex; flex-direction: column; font-size: 12px; gap: 4px; line-height: 1.45; margin: 0; }
.contact-note strong { color: var(--ink); font-size: 14px; }
.form-shell { background: var(--white); box-shadow: 0 24px 70px rgba(23,24,26,.09); min-height: 620px; padding: clamp(28px, 4vw, 54px); }
fieldset { border: 0; margin: 0; padding: 0; }
legend { font-size: 16px; font-weight: 900; margin-bottom: 20px; }
.discipline-picker { border-bottom: 1px solid var(--line); margin-bottom: 34px; padding-bottom: 34px; }
.discipline-picker > div { display: grid; gap: 9px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.discipline-picker label { align-items: center; border: 1px solid var(--line); color: #55585c; cursor: pointer; display: flex; font-size: 12px; font-weight: 800; gap: 12px; min-height: 56px; padding: 8px 12px; }
/* Grille à deux colonnes : le dernier item ne prend toute la largeur que s'il
   se retrouve seul sur sa rangée, donc quand le nombre de disciplines est
   impair. En nombre pair, ils restent deux par deux jusqu'au bout. */
.discipline-picker label:last-child:nth-child(odd) { grid-column: 1 / -1; }
.discipline-picker label.selected { background: #fff4f5; border-color: var(--red); color: var(--ink); }
.discipline-picker label span { align-items: center; background: var(--ink); border-radius: 50%; color: var(--white); display: flex; flex: 0 0 auto; font-size: 9px; height: 34px; justify-content: center; width: 34px; }
.discipline-picker label.selected span { background: var(--red); }
.discipline-picker input { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; opacity: 0; overflow: hidden; pointer-events: none; position: absolute; white-space: nowrap; width: 1px; }
.form-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid label { color: #3e4145; display: flex; flex-direction: column; font-size: 11px; font-weight: 800; gap: 8px; }
.form-grid small { color: #989b9f; font-weight: 500; }
.full-field { grid-column: 1 / -1; }
input, select, textarea { background: #f7f6f3; border: 1px solid transparent; border-radius: 0; color: var(--ink); outline: none; padding: 14px 15px; transition: border-color 160ms ease, background 160ms ease; width: 100%; }
input:focus, select:focus, textarea:focus { background: var(--white); border-color: var(--red); }
textarea { resize: vertical; }
/* Case + texte sur la meme ligne : sans le renfort de specificite,
   .form-grid label (colonne) l'emporterait et empilerait les deux. */
.consent-field, .form-grid label.consent-field { align-items: flex-start; color: #6d7074; display: flex; flex-direction: row; font-size: 11px; font-weight: 700; gap: 11px; line-height: 1.5; margin-top: 24px; }
.consent-field > span { flex: 1 1 auto; padding-top: 1px; }
.consent-field input { accent-color: var(--red); flex: 0 0 auto; height: 17px; margin: 0; padding: 0; width: 17px; }
.submit-button { margin-top: 27px; min-height: 56px; width: 100%; }
/* Pendant l'envoi : le bouton reste lisible mais visiblement inactif. */
.submit-button[disabled] { cursor: default; opacity: .6; }
.submit-button[disabled]:hover { background: var(--red); transform: none; }
.form-footnote { color: #999ca0; font-size: 10px; margin: 12px 0 0; text-align: center; }
.success-panel { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 540px; text-align: center; }
.success-icon { align-items: center; background: var(--red); border-radius: 50%; color: var(--white); display: flex; font-size: 28px; height: 80px; justify-content: center; margin-bottom: 24px; width: 80px; }
.success-label { color: var(--red); font-size: 10px; font-weight: 900; letter-spacing: .16em; margin: 0 0 10px; text-transform: uppercase; }
.success-panel h3 { font-size: clamp(32px, 4vw, 50px); letter-spacing: -.018em; margin: 0; }
.success-panel > p:last-of-type { color: #6e7175; line-height: 1.7; max-width: 470px; }
.success-panel button { background: var(--ink); border: 0; border-radius: 999px; color: var(--white); font-size: 12px; font-weight: 800; margin-top: 18px; padding: 15px 24px; }

footer { align-items: center; background: #090a0b; color: var(--white); display: flex; justify-content: space-between; padding: 36px clamp(24px, 6vw, 96px); }
.footer-brand .brand-symbol::before { background: #090a0b; }
footer > p { color: #b7b9bd; font-size: 12px; font-weight: 700; }
footer > span { color: #686b70; font-size: 10px; }

/* ---------------------------------- champs générés depuis l'admin ------- */
.honeypot { height: 0; left: -9999px; overflow: hidden; position: absolute; width: 0; }
/* Champ hors de la discipline choisie. Sans !important, le display: flex des
   conteneurs de champ l'emporterait sur l'attribut hidden. */
.form-grid [hidden], .discipline-picker [hidden] { display: none !important; }
.form-alert { background: #fff4f5; border-left: 3px solid var(--red); color: #8d0417; font-size: 13px; font-weight: 700; line-height: 1.5; margin-bottom: 26px; padding: 14px 16px; }
.field-error { color: var(--red); display: block; font-size: 11px; font-style: normal; font-weight: 700; margin-top: 6px; }
/* Libellé + astérisque + aide sur une seule ligne : le label parent étant un
   flex en colonne, chaque enfant direct partirait sinon sur sa propre ligne. */
.field-label { align-items: baseline; display: flex; flex-wrap: wrap; gap: 4px; }
.form-grid label b, .option-group legend b { color: var(--red); font-weight: 900; line-height: 1; }
.form-grid label.has-error input, .form-grid label.has-error select, .form-grid label.has-error textarea { background: #fff8f9; border-color: var(--red); }
.option-group { border: 1px solid var(--line); padding: 16px 16px 18px; }
.option-group.has-error { border-color: var(--red); }
.option-group legend { color: #3e4145; font-size: 11px; font-weight: 800; margin: 0; padding: 0 6px; }
.option-group legend small { color: #989b9f; font-weight: 500; }
.option-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.option-item { align-items: center; border: 1px solid var(--line); color: #55585c; cursor: pointer; display: inline-flex; font-size: 12px; font-weight: 700; gap: 9px; padding: 10px 14px; }
.option-item.is-on { background: #fff4f5; border-color: var(--red); color: var(--ink); }
.option-item input { accent-color: var(--red); height: 15px; margin: 0; padding: 0; width: 15px; }
.consent-wrap .consent-field { margin-top: 0; }
.consent-wrap .consent-field.has-error span { color: var(--red); }
.empty-note { background: #faf9f7; border: 1px dashed var(--line); color: #76797d; font-size: 13px; line-height: 1.7; margin: 0; padding: 26px; }
/* Mise en évidence pilotée depuis le constructeur (admin/form.php). */
[data-field-key].is-highlighted { box-shadow: 0 0 0 2px var(--red), 0 0 0 7px rgba(206, 2, 32, .14); position: relative; z-index: 1; }

/* ------------------------------------------------ visibilité du focus --- */
a:focus-visible, button:focus-visible, .option-item:focus-within,
.discipline-picker label:focus-within, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--red-bright);
  outline-offset: 2px;
}
.site-header a:focus-visible, .hero a:focus-visible, .benefits-section a:focus-visible,
footer a:focus-visible { outline-color: #fff; }

@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(300px, .7fr); }
  .hero-visual { transform: scale(.82); transform-origin: right center; }
  .discipline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 2 par rangée : on annule le recentrage, et la dernière carte ne prend
     toute la largeur que si elle se retrouve seule sur sa rangée. */
  .discipline-card,
  .discipline-card:nth-child(3n + 1):nth-last-child(2),
  .discipline-card:nth-child(3n + 1):last-child { grid-column: auto; }
  .discipline-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .registration-section { gap: 60px; grid-template-columns: minmax(250px, .65fr) minmax(480px, 1.35fr); }
}

@media (max-width: 820px) {
  .site-header nav a:not(.nav-button) { display: none; }
  .hero { display: block; min-height: auto; padding-top: 145px; }
  .hero-visual { height: 460px; margin: 40px auto 0; max-width: 480px; transform: scale(.9); transform-origin: center; }
  .section-heading, .benefits-section, .registration-section { display: block; }
  .section-heading > p { margin-top: 24px; }
  .benefits-copy { margin-bottom: 56px; }
  .registration-intro { margin-bottom: 48px; position: static; }
}

@media (max-width: 600px) {
  .site-header { height: 72px; }
  .brand strong { font-size: 14px; }
  .site-header .nav-button { padding: 11px 16px; }
  .hero { padding-top: 125px; }
  .hero h1 { font-size: clamp(48px, 16vw, 70px); }
  .hero-copy { font-size: 15px; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 18px; }
  .primary-button { width: 100%; }
  .secondary-link { align-self: center; }
  .hero-stats { gap: 24px; justify-content: space-between; }
  .hero-visual { height: 390px; margin-left: -22px; transform: scale(.75); transform-origin: left top; width: 500px; }
  .academies-section, .benefits-section, .registration-section { padding-bottom: 82px; padding-top: 82px; }
  .discipline-grid, .form-grid { grid-template-columns: 1fr; }
  .discipline-card,
  .discipline-card:last-child,
  .discipline-card:last-child:nth-child(odd) { grid-column: auto; min-height: 390px; }
  .discipline-picker > div { grid-template-columns: 1fr; }
  .discipline-picker label:last-child:nth-child(odd), .full-field { grid-column: auto; }
  .form-shell { margin-left: -10px; margin-right: -10px; }
  footer { align-items: flex-start; flex-direction: column; gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}