/* MEDays 2026 — registration portal design system
 * Tokens mirror medays.org/front/assets/css/main.css so the portal and the
 * public site read as one event. All custom properties are --md- prefixed to
 * avoid collision with Metronic and the legacy public/style.css, which already
 * define --primary-blue, --accent-blue, --light-gray and --dark-blue.
 */
:root {
  /* brand */
  --md-navy:  #02203c;
  --md-royal: #043dba;
  --md-blue:  #0043ff;
  --md-cyan:  #02c5ff;

  /* text & surface */
  --md-ink:     #02203c;
  --md-ink-2:   #1f2937;
  --md-muted:   #64748b;
  --md-line:    #d7e2ff;
  --md-bg:      #ffffff;
  --md-bg-soft: #fafbff;

  /* status — darkened from the legacy #ef4444 / #f59e0b / #10b981, which fail
     4.5:1 on white while carrying form validation errors */
  --md-ok:   #0f7a52;
  --md-warn: #b45309;
  --md-err:  #b42318;

  /* radii */
  --md-r-sm: 8px;
  --md-r-md: 14px;
  --md-r-lg: 22px;

  /* spacing — 4px base */
  --md-s-1:  0.25rem;
  --md-s-2:  0.5rem;
  --md-s-3:  0.75rem;
  --md-s-4:  1rem;
  --md-s-6:  1.5rem;
  --md-s-8:  2rem;
  --md-s-12: 3rem;
  --md-s-16: 4rem;

  /* Undo the 62.5% root in public/style.css.
     That rule -- font-size 62.5% on :root -- makes 1rem mean 10px, so every
     (Written without braces on purpose: tools/checks/check_components.py reads
     this block by scanning for the closing brace, so a literal one in a comment
     ends :root early and every token below it reads as being outside it.)
     size in this file rendered at 62.5% of its value -- 16px labels arrived as
     10px, and the masthead at 7px. This same selector in a later sheet wins,
     which keeps the funnel's type correct whether or not style.css is the
     rescaled version. 100%, not 16px: a reader who sets a larger base font in
     their browser keeps it (WCAG 1.4.4).
     public/style.css is loaded first and only by this layout; the admin panel
     does not load this file, so nothing else is affected. */
  font-size: 100%;

  /* type scale — 12 / 14 / 16 / 18 / 24 / 32 on a 16px base.
     Reading text (labels, hints, errors, legends, body) lives at --md-text-base
     and never below --md-text-sm. --md-text-xs is a floor for micro-labels
     only -- uppercase eyebrows and reference markers -- not a size for anything
     a person has to actually read. Nothing in this layer goes under it: text
     that needs to recede does so with weight, case, colour and tracking. */
  --md-text-xs:   0.75rem;  /* 12px */
  --md-text-sm:   0.875rem; /* 14px */
  --md-text-base: 1rem;     /* 16px */
  --md-text-lg:   1.125rem; /* 18px */
  --md-text-xl:   1.5rem;   /* 24px */
  --md-text-2xl:  2rem;     /* 32px */

  /* VIP surface. That page is a dark, gold-accented panel rather than the
     white funnel, so it needs its own ground and accent -- as tokens, because
     tools/checks/check_components.py rejects raw hex outside :root. */
  --md-gold:       #d4af37;
  --md-gold-light: #ffd700;
  /* --md-gold is a surface colour: as text on white it measures about 1.9:1
     and fails WCAG 1.4.3 outright. --md-gold-ink is the same hue taken dark
     enough to read -- 4.89:1 on white -- for gold text, numerals and rules on
     the light layouts. */
  --md-gold-ink:   #a16207;
  --md-vip-ink:    #0f1419;
  --md-on-dark:    #ffffff;

  /* Cairo carries Latin and Arabic in one family. The fallbacks name Arabic
     system faces so a failed webfont load still renders Arabic properly. */
  --md-font: 'Cairo', 'Segoe UI', 'Noto Sans Arabic', 'Geeza Pro', system-ui, sans-serif;
  --md-container: 1200px;
}

/* Available to assistive technology, clipped for sighted users. Used where a
   page needs a heading for structure that the visual design does not show. */
.md-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Box model
   public/style.css has NO universal box-sizing reset -- only two scoped
   instances -- so everything defaults to content-box, and any `width: 100%`
   plus padding overflows its container by exactly the padding. That is what
   made .navbar 391px wide inside a 375px viewport while its computed width
   read 375px and its children totalled 333px.
   Applied to this layer's own components and to .navbar rather than globally:
   a `*` reset would change the box model of every element in the 7,300-line
   legacy stylesheet, which cannot be re-verified without a running app.
   ========================================================================== */
[class*="md-"],
[class*="md-"]::before,
[class*="md-"]::after,
.navbar {
  box-sizing: border-box;
}

/* ==========================================================================
   Base
   Scoped to what is safe to change globally: the type voice and text colour.
   Layout stays with the legacy classes until each view is rebuilt.
   ========================================================================== */
body {
  font-family: var(--md-font);
  /* Stated here rather than left to the legacy sheet, which set neither: any
     text this layer does not name explicitly still lands on 16px/1.5 instead
     of inheriting whatever style.css happened to apply. */
  font-size: var(--md-text-base);
  line-height: 1.5;
  color: var(--md-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--md-navy);
}

/* Respect the reader's motion preference. This must beat the legacy
   stylesheet's unconditional animations, hence !important. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.md-container {
  max-width: var(--md-container);
  margin-inline: auto;
  padding-inline: var(--md-s-6);
}

.md-stack > * + * { margin-top: var(--md-s-6); }

.md-grid-2,
.md-grid-3 {
  display: grid;
  gap: var(--md-s-4);
}
.md-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 767px) {
  .md-grid-2, .md-grid-3 { grid-template-columns: 1fr; }
}

/* Available to assistive technology only. */
.md-page-title {
  font-size: var(--md-text-2xl);
  margin: 0 0 var(--md-s-2);
}

/* ==========================================================================
   Eyebrow / micro-label
   Uppercase, wide-tracked. Echoes the patronage bar on medays.org.
   ========================================================================== */
.md-eyebrow {
  display: block;
  font-size: var(--md-text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--md-muted);
  margin-bottom: var(--md-s-2);
}

/* ==========================================================================
   Fields
   ========================================================================== */
.md-field { margin-bottom: var(--md-s-6); }

.md-label {
  display: block;
  font-size: var(--md-text-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--md-ink-2);
  margin-bottom: var(--md-s-2);
}

/* The required marker sits after the label text. The legacy .required::after
   was positioned at right:12px/top:16px, landing on top of typed input. */
.md-label[data-required]::after {
  content: "*";
  margin-left: 0.25em;
  color: var(--md-err);
  font-weight: 700;
}

.md-input,
.md-select,
.md-textarea {
  width: 100%;
  min-height: 48px;
  /* Was --md-s-3 (12px) top and bottom, which rendered a 56px field: too tall
     next to its label. Dropping the vertical padding to 4px gives 44px, which
     is exactly what removing the padding altogether produces -- min-height 44px
     is the floor in both cases -- so the height is the same either way and the
     16px inline padding costs nothing. It stays because at 0 the caret and the
     first character sit hard against the border. */
  padding: var(--md-s-1) var(--md-s-4);
  font-family: var(--md-font);
  font-size: var(--md-text-base);
  color: var(--md-ink);
  background: var(--md-bg-soft);
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-sm);
  -webkit-appearance: none;
  appearance: none;
}

.md-textarea {
  min-height: 160px;
  max-width: 70ch;
  resize: vertical;
  line-height: 1.6;
}

.md-input::placeholder,
.md-textarea::placeholder { color: var(--md-muted); opacity: 1; }

.md-input:hover,
.md-select:hover,
.md-textarea:hover { border-color: #b9caf7; }

/* A real outline, not just a colour change, so the focus ring survives
   forced-colours / high-contrast mode. .md-choice replaced by .md-option:
   the dossier-direction card component this list was written for no longer
   exists in any view. */
/* Buttons, options and links: the ring sits just outside the shape, which is
   where an offset reads correctly. */
.md-btn:focus-visible,
.md-option:focus-visible,
.md-lang__link:focus-visible {
  outline: 2px solid var(--md-royal);
  outline-offset: 2px;
  background: var(--md-bg);
  border-color: var(--md-royal);
}

/* Fields keep the same 2px ring, but flush to the border rather than offset
   from it. A field already has a visible 1px border, so an offset ring drew a
   second concentric line with a gap between -- the "double border" on a
   focused textarea. Flush, the two read as one heavier edge. */
.md-input:focus-visible,
.md-select:focus-visible,
.md-textarea:focus-visible {
  outline: 2px solid var(--md-royal);
  outline-offset: 0;
  background: var(--md-bg);
  border-color: var(--md-royal);
}

.md-input[aria-invalid="true"],
.md-select[aria-invalid="true"],
.md-textarea[aria-invalid="true"] {
  border-color: var(--md-err);
  background: #fffafa;
}

/* iOS zooms the viewport when a focused input is under 16px. */
@media (max-width: 767px) {
  .md-input, .md-select, .md-textarea { font-size: 16px; }
}

.md-select {
  padding-right: var(--md-s-8);
  background-image: linear-gradient(45deg, transparent 50%, var(--md-ink-2) 50%),
                    linear-gradient(135deg, var(--md-ink-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.md-hint {
  display: block;
  margin-top: var(--md-s-2);
  font-size: var(--md-text-base);
  color: var(--md-muted);
}

.md-error {
  display: flex;
  gap: var(--md-s-2);
  align-items: baseline;
  margin-top: var(--md-s-2);
  font-size: var(--md-text-base);
  font-weight: 500;
  color: var(--md-err);
}
/* Indicator drawn in CSS rather than an emoji, which screen readers announce
   and which renders differently on every platform. */
.md-error::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--md-err);
  transform: translateY(-0.1em);
}

/* ==========================================================================
   Radio & checkbox
   ========================================================================== */
.md-radio,
.md-check {
  display: inline-flex;
  align-items: center;
  gap: var(--md-s-2);
  min-height: 44px;
  padding-right: var(--md-s-6);
  cursor: pointer;
  font-size: var(--md-text-base);
}

.md-radio input,
.md-check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--md-royal);
  cursor: pointer;
}

.md-fieldset {
  margin: 0 0 var(--md-s-6);
  padding: 0;
  border: 0;
}

.md-fieldset > legend {
  padding: 0;
  font-size: var(--md-text-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--md-ink-2);
  margin-bottom: var(--md-s-2);
}

/* ==========================================================================
   Buttons
   No rule here sets pointer-events. The layout used to set
   pointer-events:none on click, which blocked the very handler meant to
   advance the step, and steptow fought back with a 500ms setInterval.
   ========================================================================== */
.md-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-s-2);
  min-height: 48px;
  padding: var(--md-s-3) var(--md-s-8);
  font-family: var(--md-font);
  font-size: var(--md-text-base);
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  /* .md-btn is used on <a> as well as <button> -- a link that navigates stays
     a link, so middle-click and open-in-new-tab keep working -- and without
     this the user agent underlines the label inside the pill, which reads as a
     link that happens to sit in a box rather than as a button. */
  text-decoration: none;
}
.md-btn:hover,
.md-btn:focus { text-decoration: none; }

.md-btn--primary {
  color: var(--md-bg);
  background: var(--md-royal);
}
.md-btn--primary:hover { background: #032e8f; }

.md-btn--ghost {
  color: var(--md-royal);
  background: transparent;
  border-color: var(--md-line);
}
.md-btn--ghost:hover { border-color: var(--md-royal); background: var(--md-bg-soft); }

/* The VIP tier's call to action. Gold is the pack's own colour, and the
   recommended card needs a control that is visibly not the same as the two
   beside it. Dark ink on gold, not white: white on this gold measures about
   1.9:1 and would fail outright. */
.md-btn--gold {
  color: var(--md-vip-ink);
  background: linear-gradient(135deg, var(--md-gold), var(--md-gold-light));
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(212, 175, 55, 0.3);
}
.md-btn--gold:hover {
  color: var(--md-vip-ink);
  box-shadow: 0 14px 30px rgba(212, 175, 55, 0.42);
}
/* The shared focus rule repaints a button white and rings it in royal blue.
   On gold that erases the fill and the ring is low-contrast against it, so the
   ring is re-inked here in the pack's own dark. Never removed, only re-coloured. */
.md-btn--gold:focus-visible {
  background: linear-gradient(135deg, var(--md-gold), var(--md-gold-light));
  border-color: transparent;
  outline-color: var(--md-vip-ink);
}

.md-btn--danger {
  color: var(--md-bg);
  background: var(--md-err);
}
.md-btn--danger:hover { background: #8f1c13; }

.md-btn:disabled,
.md-btn[aria-busy="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.md-btn__icon { flex: none; width: 1.125rem; height: 1.125rem; }

/* Actions sit on a rule at the foot of the sheet, like a form footer.

   This was two separate .md-actions blocks 200 lines apart -- the first laying
   out the row, the second quietly adding the border and overriding the margin.
   Anyone reading the first had no reason to expect a rule to appear. One
   definition now. */
.md-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-s-3);
  align-items: center;
  margin-top: var(--md-s-6);
}

/* No border-top here, deliberately. .md-row and .md-option both close with a
   border-bottom, so every list of fields and every list of options already
   ends on a rule -- and .md-actions follows one of those on the homepage and
   on all four funnel steps. A border-top drew a second line a few pixels under
   the first, which is the doubled rule above every Suivant button.

   Use --divided where the actions genuinely do not follow ruled content: the
   confirmation screen, where they sit under a paragraph. */
.md-actions--divided {
  padding-top: var(--md-s-6);
  border-top: 1px solid var(--md-line);
}
.md-actions--end { justify-content: flex-end; }
@media (max-width: 600px) {
  .md-actions { flex-direction: column-reverse; align-items: stretch; }
  .md-actions .md-btn { width: 100%; }
}

/* ==========================================================================
   Card
   Flat: hairline border, no shadow, matching medays.org's --shadow: none.
   ========================================================================== */
.md-card {
  background: var(--md-bg);
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-md);
  padding: var(--md-s-8);
}
@media (max-width: 600px) { .md-card { padding: var(--md-s-6); } }

.md-card__title {
  font-size: var(--md-text-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 var(--md-s-4);
  color: var(--md-navy);
}

/* ==========================================================================
   Step bar — the three sections across the top
   Indicators, not links: jumping a step would bypass the validation that
   .gosteptow runs, so these are a list with aria-current rather than anchors.
   ========================================================================== */
.md-steps {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 var(--md-s-6);
  padding: 0;
  border-bottom: 2px solid var(--md-line);
}

.md-step {
  display: flex;
  align-items: baseline;
  gap: var(--md-s-2);
  padding: var(--md-s-3) var(--md-s-6) var(--md-s-3) 0;
  margin-bottom: -2px;
  font-size: var(--md-text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--md-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.md-step__num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--md-muted);
}

.md-step--current {
  color: var(--md-navy);
  border-bottom-color: var(--md-royal);
}
.md-step--current .md-step__num { color: var(--md-royal); }

.md-step--done { color: var(--md-ink-2); }
/* Not colour alone. */
.md-step--done .md-step__num::after {
  content: " \2713";
  color: var(--md-ok);
}

@media (max-width: 560px) {
  .md-step { padding-right: var(--md-s-4); letter-spacing: 0.04em; }
}

/* ==========================================================================
   Rows — label left of field, every field on screen at once
   The numbering is real positional information (section.field), the way an
   official form is cited, not decoration.
   ========================================================================== */
.md-rows {
  border-top: 1px solid var(--md-line);
}

.md-row {
  display: grid;
  /* The 2.75rem lead column held the A.1 / 2.4 reference markers, now
     removed, so the label starts at the row's edge. */
  grid-template-columns: 13rem minmax(0, 1fr);
  align-items: start;
  gap: 0 var(--md-s-4);
  padding: var(--md-s-3) 0;
  border-bottom: 1px solid var(--md-line);
}


.md-row__label {
  padding-top: 0.85rem;
  font-size: var(--md-text-base);
  font-weight: 500;
  color: var(--md-ink-2);
  line-height: 1.35;
}
.md-row__label[data-required]::after {
  content: "*";
  margin-left: 0.25em;
  color: var(--md-err);
  font-weight: 700;
}

/* A fieldset cannot be a grid item in older engines without this. */
.md-row > .md-row__label--legend {
  display: block;
  float: none;
}

.md-row__field { min-width: 0; }
.md-row__field > .md-input,
.md-row__field > .md-select,
.md-row__field > .md-textarea { max-width: 34rem; }
.md-row__field > .md-textarea { max-width: 46rem; }

/* Narrower controls where a wide box would misrepresent the input. */
.md-row__field--short > .md-input { max-width: 12rem; }
.md-row__field--medium > .md-input,
.md-row__field--medium > .md-select { max-width: 22rem; }

.md-row__note {
  display: block;
  margin-top: var(--md-s-1);
  font-size: var(--md-text-sm);
  color: var(--md-muted);
}

/* Radios sit inline on one line, as on a paper form. */
.md-row__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--md-s-6);
  padding-top: 0.5rem;
}

@media (max-width: 767px) {
  /* Label-left collapses: at 375px a 13rem label column leaves nothing for
     the field. Number and label share the first line, field goes below. */
  .md-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--md-s-1) var(--md-s-3);
    padding: var(--md-s-4) 0;
  }
  .md-row__label { padding-top: 0; grid-row: 1; grid-column: 1; font-weight: 600; }
  .md-row__field { grid-row: 2; grid-column: 1; }
  .md-row__field > .md-input,
  .md-row__field > .md-select,
  .md-row__field > .md-textarea,
  .md-row__field--short > .md-input,
  .md-row__field--medium > .md-input,
  .md-row__field--medium > .md-select { max-width: none; }
  .md-row__choices { padding-top: var(--md-s-1); }
}

/* Dense form section wrapper. */
.md-sheet {
  background: var(--md-bg);
  border: 1px solid var(--md-line);
  border-radius: var(--md-r-sm);
  padding: var(--md-s-8);
}
@media (max-width: 600px) { .md-sheet { padding: var(--md-s-4); } }

.md-sheet__title {
  font-size: var(--md-text-xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--md-navy);
  margin: 0 0 var(--md-s-2);
}

.md-sheet__intro {
  margin: 0 0 var(--md-s-6);
  font-size: var(--md-text-sm);
  color: var(--md-muted);
  max-width: 70ch;
}

/* Denser controls to match the direction, still above the 44px touch floor. */
.md-input, .md-select, .md-textarea { min-height: 44px; }
.md-textarea { min-height: 120px; }
.md-btn { min-height: 44px; }

/* ==========================================================================
   Option rows — the three accreditation categories as a list, not cards
   Cards implied browsing; these are three mutually exclusive routes through an
   official form, so they read as lettered rows on the same rule grid as the
   fields. The whole row is the link target.
   ========================================================================== */
.md-options {
  border-top: 1px solid var(--md-line);
  margin: 0 0 var(--md-s-8);
}

.md-option {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 1.5rem;
  align-items: baseline;
  gap: 0 var(--md-s-4);
  padding: var(--md-s-4) var(--md-s-4) var(--md-s-4) var(--md-s-3);
  margin-inline: calc(var(--md-s-3) * -1);
  border-bottom: 1px solid var(--md-line);
  /* Persistent, not hover-only: a flat left accent so the row reads as
     interactive at rest -- these three rows are the page's primary action,
     and the only affordance they had before this was a single arrow glyph. */
  border-left: 3px solid transparent;
  text-decoration: none;
  color: inherit;
}
.md-option:hover {
  background: var(--md-bg-soft);
  border-left-color: var(--md-line);
}
/* :active is the touch equivalent of :hover -- a phone cannot hover, so
   without this the primary action on the page gave touch visitors zero
   feedback on tap (ui-ux-pro-max ux-guidelines: "Hover vs Tap", severity
   High -- don't rely on hover alone for important actions). */
.md-option:active {
  background: var(--md-bg-soft);
  border-left-color: var(--md-royal);
}
/* :focus-visible's left-accent colour comes for free from the shared
   border-color: var(--md-royal) rule above (it recolours all four sides,
   including this 3px left border), so no separate rule is needed here. */


.md-option__name {
  font-size: var(--md-text-lg);
  font-weight: 700;
  color: var(--md-navy);
}

.md-option__note {
  font-size: var(--md-text-sm);
  color: var(--md-muted);
}

.md-option__go {
  justify-self: end;
  color: var(--md-royal);
  font-size: var(--md-text-lg);
  line-height: 1;
}

@media (max-width: 767px) {
  .md-option {
    grid-template-columns: minmax(0, 1fr) 1.5rem;
    row-gap: var(--md-s-1);
  }
  .md-option__name { grid-row: 1; grid-column: 2; }
  .md-option__go   { grid-row: 1; grid-column: 3; }
  .md-option__note { grid-row: 2; grid-column: 2; }
}

/* Lettered section heading, as an official form numbers its parts. */
.md-part {
  display: flex;
  align-items: baseline;
  gap: var(--md-s-3);
  margin: 0 0 var(--md-s-4);
  font-size: var(--md-text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--md-navy);
}

/* ==========================================================================
   Reference codes — invitation codes read as official reference numbers
   ========================================================================== */
.md-code {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ==========================================================================
   Alerts
   ========================================================================== */
.md-alert {
  display: flex;
  gap: var(--md-s-3);
  padding: var(--md-s-4);
  border: 1px solid var(--md-line);
  border-left-width: 3px;
  border-radius: var(--md-r-sm);
  background: var(--md-bg-soft);
  font-size: var(--md-text-base);
}
.md-alert--ok   { border-left-color: var(--md-ok);   color: var(--md-ok); }
.md-alert--warn { border-left-color: var(--md-warn); color: var(--md-warn); }
.md-alert--err  { border-left-color: var(--md-err);  color: var(--md-err); }

/* ==========================================================================
   Confirmation — the last screen of the funnel
   Centred, narrow, and closing with somewhere to go: the previous version
   ended on a signature and nothing else, so the only way onward was the
   browser's back button.
   ========================================================================== */
.md-confirm {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}
.md-confirm__icon {
  display: inline-flex;
  width: 4rem;
  height: 4rem;
  margin-bottom: var(--md-s-4);
  color: var(--md-ok);
}
.md-confirm__icon svg { width: 100%; height: 100%; }

.md-confirm .md-prose {
  margin-inline: auto;
  text-align: center;
}

/* The signature is a closing line, not a callout. It used to be rendered as a
   bordered panel, which gave "L'équipe d'organisation" the same visual weight
   as the confirmation itself. */
.md-confirm__signature {
  margin: var(--md-s-8) 0 0;
  font-style: italic;
  color: var(--md-muted);
}

.md-confirm .md-actions { justify-content: center; }

/* Server-side validation summary at the top of the funnel form. Errors near
   the field are better, but these arrive after a redirect with no field
   context, so a summary is what there is -- and it is focusable so the
   keyboard lands on it. */
.md-form-errors {
  align-items: flex-start;
  margin-bottom: var(--md-s-6);
  scroll-margin-top: var(--md-s-6);
}
.md-form-errors__title {
  margin: 0 0 var(--md-s-2);
  font-size: var(--md-text-base);
  font-weight: 700;
  color: var(--md-err);
}
.md-form-errors__intro {
  margin: 0 0 var(--md-s-3);
  font-size: var(--md-text-base);
  color: var(--md-ink-2);
}
.md-form-errors__link {
  color: var(--md-err);
  text-underline-offset: 0.2em;
}
.md-form-errors__link:hover { color: var(--md-navy); }

.md-form-errors__list {
  margin: 0;
  padding-inline-start: var(--md-s-6);
  font-size: var(--md-text-base);
  line-height: 1.6;
  color: var(--md-ink-2);
}

/* ==========================================================================
   Prose
   Running text -- the press notice, and any view that is paragraphs rather
   than form fields. 70ch is the measure at which the eye still tracks back
   to the right line; 1.6 gives multi-line paragraphs more air than the 1.5
   that UI text uses.
   ========================================================================== */
.md-prose {
  max-width: 70ch;
  color: var(--md-ink-2);
  line-height: 1.6;
}
/* Both selectors are (0,1,0) so the second wins on order. Written as
   `.md-prose p { margin: 0 }` instead, the reset is (0,1,1) and silently beats
   the spacing rule, closing every gap between paragraphs. */
.md-prose > * { margin: 0; }
.md-prose > * + * { margin-top: var(--md-s-4); }
.md-prose a {
  color: var(--md-royal);
  text-underline-offset: 0.2em;
}

/* ==========================================================================
   Language switch — real links, not a JS-only <select>
   ========================================================================== */
/* <details>/<summary>, so the menu opens, closes and takes keyboard focus with
   no JavaScript. */
.md-lang {
  position: relative;
  flex: none;
}

.md-lang__toggle {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--md-s-2);
  padding: 0 var(--md-s-3);
  font-size: var(--md-text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--md-bg);
  /* No border. The tinted ground and the chevron are the affordance -- a
     control still has to look interactive, so the fill stays and only the
     outline goes. */
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  border-radius: var(--md-r-sm);
  cursor: pointer;
  transition: background-color 0.18s ease;
  list-style: none;          /* hides the default disclosure triangle */
  white-space: nowrap;
}
.md-lang__toggle::-webkit-details-marker { display: none; }
.md-lang__toggle::marker { content: ""; }
.md-lang__toggle:hover { background: rgba(255, 255, 255, 0.12); }
.md-lang__toggle:focus-visible {
  outline: 2px solid var(--md-cyan);
  outline-offset: 2px;
}

.md-lang__chevron {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 0.18s ease;
}
.md-lang[open] .md-lang__chevron { transform: rotate(180deg); }

.md-lang__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 60;
  min-width: 100%;
  margin: 0;
  padding: var(--md-s-1);
  list-style: none;
  background: var(--md-navy);
  border: 0;
  border-radius: var(--md-r-sm);
  /* A shadow separates the panel from the masthead behind it now that there
     is no outline to do it. */
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  transform-origin: top;
  /* <details> has no open transition, so the panel used to snap in. An
     animation runs once when the element is revealed, which covers opening;
     closing stays instant, as the element is removed from the box tree. The
     reduced-motion block at the top of this file cuts this to 0.01ms. */
  animation: md-lang-open 0.16s ease-out;
}

@keyframes md-lang-open {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
[dir="rtl"] .md-lang__menu { right: auto; left: 0; }

.md-lang__item {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: var(--md-s-2);
  padding: 0 var(--md-s-3);
  font-size: var(--md-text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}
.md-lang__item { transition: background-color 0.15s ease, color 0.15s ease; }
.md-lang__item:hover { color: var(--md-bg); background: rgba(255, 255, 255, 0.1); }
.md-lang__item:focus-visible {
  outline: 2px solid var(--md-cyan);
  outline-offset: -2px;
}
.md-lang__item.is-active {
  color: var(--md-bg);
  background: rgba(2, 197, 255, 0.16);
}

/* Configured but not translated yet: listed so the reader knows it is coming,
   but not a link to a page that cannot render. */
.md-lang__item.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.md-lang__item.is-disabled:hover { background: none; }


.md-lang__soon {
  margin-left: auto;
  padding-left: var(--md-s-3);
  font-size: var(--md-text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-cyan);
}

/* Flags carry a hairline so light fields (the white band of the tricolore)
   do not bleed into the navy header. */
.md-flag {
  flex: none;
  width: 1.375rem;
  height: 0.9375rem;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 2px;
}

.md-lang__code { line-height: 1; }

/* ==========================================================================
   Right-to-left
   <html dir> comes from config('meDays.languages.<code>.dir'). Only the
   handful of places this layer hard-codes a side need flipping; the rest uses
   logical properties (padding-inline, margin-inline) already.
   ========================================================================== */

[dir="rtl"] .md-step { padding: var(--md-s-3) 0 var(--md-s-3) var(--md-s-6); }

/* The select arrow is drawn with background-position, which has no logical
   form, so it needs mirroring by hand. Without this it sat on the right in
   Arabic while the text ran to the left -- on the native selects as much as on
   the Select2 ones. */
[dir="rtl"] .md-select,
[dir="rtl"] .md-select2.select2-container .select2-selection--single {
  background-position: 20px center, 14px center;
}
[dir="rtl"] .md-select2.select2-container .select2-selection--single {
  background-position: 20px center, 14px center !important;
}
[dir="rtl"] .md-select2.select2-container--open .select2-selection--single {
  background-position: 14px center, 20px center !important;
}

[dir="rtl"] .md-option__go { justify-self: start; transform: scaleX(-1); }

[dir="rtl"] .md-alert { border-left-width: 1px; border-right-width: 3px; }
[dir="rtl"] .md-alert--ok   { border-right-color: var(--md-ok); }
[dir="rtl"] .md-alert--warn { border-right-color: var(--md-warn); }
[dir="rtl"] .md-alert--err  { border-right-color: var(--md-err); }

[dir="rtl"] .md-btn__icon { transform: scaleX(-1); }

/* Arabic has no letter case, so uppercasing is a no-op that only widens the
   tracking oddly. Latin tracking is also too loose for Arabic. */
[dir="rtl"] .md-mark__day,
[dir="rtl"] .md-mark__place,
[dir="rtl"] .md-patronage__text,
[dir="rtl"] .md-eyebrow,
[dir="rtl"] .md-label,
[dir="rtl"] .md-part,
[dir="rtl"] .md-step,
[dir="rtl"] .md-fieldset > legend {
  text-transform: none;
  letter-spacing: 0;
}

/* The patronage line is the one place worth keeping a little air. */
[dir="rtl"] .md-patronage__text { letter-spacing: 0.02em; }

/* ==========================================================================
   Patronage banner
   ========================================================================== */
.md-patronage__text {
  /* Deliberately larger than the surrounding UI text: this is the royal
     patronage line, the most senior statement on the page. */
  font-size: clamp(0.875rem, 1.15vw, 1.125rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.35;
}

/* ==========================================================================
   Overrides of legacy public/style.css
   Each rule names the selector it has to beat. !important is required here
   because the legacy declarations themselves use it.
   ========================================================================== */

/* style.css:1484-1502 applies `border: 1px solid #dc2626 !important` to
   `input:invalid` / `select:invalid`. Every required field therefore renders
   with an error border from page load, before the reader has typed anything.
   Scope the error look to fields we have actually marked invalid, and to
   :user-invalid, which only matches after interaction. */
.md-input:invalid,
.md-select:invalid,
.md-textarea:invalid {
  border: 1px solid var(--md-line) !important;
}
.md-input:user-invalid,
.md-select:user-invalid,
.md-textarea:user-invalid,
.md-input[aria-invalid="true"],
.md-select[aria-invalid="true"],
.md-textarea[aria-invalid="true"] {
  border: 1px solid var(--md-err) !important;
}

/* style.css:694 sets `.btn-text { order: 2 }`, which pushed an icon declared
   after the label to the left of it. The label is kept as .btn-text because
   the layout's submit handler replaces only that span. */
.md-btn .btn-text { order: 0; }
.md-btn .md-btn__icon { order: 1; }

/* style.css:694 also gives .btn-text a text-shadow and an animated underline
   via ::after, neither of which belongs on a flat design. */
.md-btn .btn-text { text-shadow: none; font-weight: inherit; }
.md-btn .btn-text::after { content: none; }

/* The funnel's validation messages (.inscription__tip, appended by the
   *validation.blade.php partials). style.css declares .modern-tip /
   .inscription__tip fifteen times over -- gradients, a 3px red border, a
   pulsing ::before emoji, a gradient ::after hairline, text-shadow, and
   font-size in rem -- and the deployed copy of that file is the pre-rescale
   one, so the message rendered at ~28px with 20px of padding: louder than the
   field it belongs to, and wide enough to push the radio labels sideways.

   Restyled as what a field error should be: small red text directly under the
   field, matching .md-error. Written in px and !important because the legacy
   declarations are numerous, later in some media queries, and partly
   !important themselves. */
.inscription__tip {
  display: block !important;
  margin: var(--md-s-2) 0 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  color: var(--md-err) !important;
  animation: none !important;
}
/* The emoji and the gradient hairline both came from the legacy rules. */
.inscription__tip::before,
.inscription__tip::after {
  content: none !important;
  display: none !important;
}

/* style.css:1111 gives .form a stacked 32px/16px drop shadow and a 2px blue
   border. The registration form already sits inside .md-sheet, which carries
   its own border and surface, so the two nested together read as a card in a
   card. Dropping both leaves .md-sheet as the single frame.
   The id beats .form on specificity, so no !important is needed; the legacy
   declarations here are not themselves !important. */
#formfrontpartsub.form {
  box-shadow: none;
  border: 0;
}

/* style.css:1129 also paints a 4px gradient bar across the top edge of .form
   via ::before. It is not a border or a shadow, so removing those left it
   behind as a stray coloured line above the first step -- the last piece of
   the old card frame inside .md-sheet's frame. */
#formfrontpartsub.form::before {
  content: none;
  display: none;
}

/* ==========================================================================
   Third-party controls — Air Datepicker (date of birth) and Select2
   (nationality)
   Both vendor stylesheets load before this file, so plain selectors win on
   order; no !important is needed. The aim is that neither widget announces
   itself as a bolted-on library: same 48px control height, same border,
   radius, font and 16px text as .md-input / .md-select.
   ========================================================================== */

/* Air Datepicker themes entirely through custom properties. */
.air-datepicker {
  --adp-font-family: var(--md-font);
  --adp-font-size: var(--md-text-base);
  --adp-color: var(--md-ink-2);
  --adp-accent-color: var(--md-royal);
  --adp-day-name-color: var(--md-muted);
  --adp-border-color: var(--md-line);
  --adp-border-color-inner: var(--md-line);
  --adp-border-radius: var(--md-r-sm);
  --adp-background-color-hover: var(--md-bg-soft);
  --adp-background-color-active: var(--md-bg-soft);
  --adp-cell-background-color-selected: var(--md-royal);
  --adp-cell-background-color-selected-hover: #032e8f;
  --adp-nav-arrow-color: var(--md-muted);
  --adp-nav-color-secondary: var(--md-muted);
  box-shadow: 0 12px 28px rgba(2, 32, 60, 0.12);
}

/* The navigation title is the control that matters here: it is what zooms
   days -> months -> years, and it has to read as a button. */
.air-datepicker-nav--title {
  font-weight: 700;
  color: var(--md-navy);
}

/* ---- Select2 (nationality) ----------------------------------------------
   Scoped to .md-select2 / .md-select2-dropdown, the classes the init passes
   via containerCssClass / dropdownCssClass. style.css declares bare
   .select2-results__option, .select2-dropdown and .select2-search__field in
   eight places, several of them !important, and the deployed copy of that file
   is the pre-rescale one -- its `font-size: 1.6rem !important` on an option
   lands at ~26px against the corrected root, which is what rendered the country
   list at roughly three times its intended size, with rows bolding on hover.

   Two classes beat one, so these win the !important tie on specificity. Sizes
   are px, not rem, so they cannot ride the root the way the legacy literals do.
   -------------------------------------------------------------------------- */

/* The closed control, matched to .md-select. */
.md-select2.select2-container .select2-selection--single {
  height: auto !important;
  /* Kept in step with .md-input, which now renders at 44px. These two sit in
     the same column of the same form, so any change to the field's padding has
     to be mirrored here or Nationalité goes back to standing taller than
     everything around it. In rem so it tracks a reader's larger base font. */
  min-height: 2.75rem !important;
  padding: 4px 16px !important;
  /* background-color, not the `background` shorthand: the shorthand resets
     background-image, which is what draws the arrow below. */
  background-color: var(--md-bg-soft) !important;
  border: 1px solid var(--md-line) !important;
  border-radius: var(--md-r-sm) !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;

  /* The same arrow .md-select draws: two gradients meeting as a 6px triangle,
     at the same size, colour and offset. Select2 renders its own <b> as a CSS
     border-triangle instead, which is why this control did not match the
     native selects sitting directly above and below it. */
  padding-inline-end: var(--md-s-8) !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--md-ink-2) 50%),
                    linear-gradient(135deg, var(--md-ink-2) 50%, transparent 50%) !important;
  background-position: calc(100% - 20px) center, calc(100% - 14px) center !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
}
.md-select2.select2-container .select2-selection--single .select2-selection__arrow b {
  display: none !important;
}
/* Open: the triangle points up. A native <select> cannot show that state, but
   this control can, and an open menu should say so. */
.md-select2.select2-container--open .select2-selection--single {
  background-image: linear-gradient(135deg, transparent 50%, var(--md-ink-2) 50%),
                    linear-gradient(45deg, var(--md-ink-2) 50%, transparent 50%) !important;
  background-position: calc(100% - 14px) center, calc(100% - 20px) center !important;
}
.md-select2.select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  line-height: 1.4 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--md-ink) !important;
}
.md-select2.select2-container .select2-selection--single .select2-selection__placeholder {
  color: var(--md-muted) !important;
}
.md-select2.select2-container .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  inset-inline-end: 12px !important;
}

/* Focus has to be as loud here as on a native field: Select2 moves focus to its
   own control, and the default is a thin grey outline. */
.md-select2.select2-container--open .select2-selection--single,
.md-select2.select2-container--focus .select2-selection--single {
  border-color: var(--md-royal) !important;
  box-shadow: 0 0 0 3px rgba(4, 61, 186, 0.18) !important;
}

.md-select2-dropdown.select2-dropdown {
  border: 1px solid var(--md-line) !important;
  border-radius: var(--md-r-sm) !important;
  box-shadow: 0 12px 28px rgba(2, 32, 60, 0.12) !important;
  overflow: hidden !important;
}

/* 16px, because anything smaller makes iOS zoom the viewport when the search
   field takes focus -- the same reason .md-input is pinned to 16px. */
.md-select2-dropdown .select2-search--dropdown {
  padding: 12px !important;
  background: var(--md-bg) !important;
  border-bottom: 1px solid var(--md-line) !important;
}
.md-select2-dropdown .select2-search--dropdown .select2-search__field {
  min-height: 44px !important;
  padding: 8px 12px !important;
  font-family: var(--md-font) !important;
  font-size: 16px !important;
  border: 1px solid var(--md-line) !important;
  border-radius: var(--md-r-sm) !important;
}

.md-select2-dropdown .select2-results__options {
  max-height: 280px !important;
}
.md-select2-dropdown .select2-results__option {
  padding: 10px 16px !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--md-ink-2) !important;
  border: 0 !important;
  background: transparent !important;
}
/* The legacy :hover rule also switches font-weight, so rows changed width as
   the pointer moved down the list. Weight stays put; the highlight carries it. */
.md-select2-dropdown .select2-results__option:hover,
.md-select2-dropdown .select2-results__option--highlighted,
.md-select2-dropdown .select2-results__option--highlighted[aria-selected] {
  background: var(--md-royal) !important;
  color: var(--md-on-dark) !important;
  font-weight: 400 !important;
}
.md-select2-dropdown .select2-results__option[aria-selected="true"] {
  background: var(--md-bg-soft) !important;
  color: var(--md-ink) !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   Header — flat, compact, in flow
   Replaces the legacy .header (gradient + large box-shadow + backdrop-filter)
   and its .navbar / .navbar__logo* / .navbar__shadow structure, which this
   markup no longer uses.
   ========================================================================== */
.md-header {
  /* style.css:41-57 sets a gradient, a box-shadow, backdrop-filter and
     position:fixed. This direction is flat: solid navy, hairline rules, no
     shadow. Same specificity, later in the cascade, so these win.

     position: static is the substantive change. Fixed positioning is what
     forced the `margin-top: 12.5rem` clearance on .content -- a magic number
     that was 200px against a 124px header, and which slid content *under* the
     header at some breakpoints. sticky is not an option here because
     `body { overflow-x: hidden }` (style.css:35) creates a scroll container
     that breaks it. In flow, the clearance problem cannot exist. */
  position: static;
  display: block;
  padding: 0;
  background: var(--md-navy);
  box-shadow: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(2, 197, 255, 0.35);
}

.md-header__patronage {
  background: rgba(2, 197, 255, 0.06);
  border-bottom: 1px solid rgba(2, 197, 255, 0.22);
}
.md-header__patronage .header__title {
  max-width: var(--md-container);
  margin: 0 auto;
  padding: 0.4375rem var(--md-s-6);
  text-align: center;
  overflow-wrap: break-word;
}

/* Three columns with equal outer tracks: the wordmark lands on the page's true
   centre line no matter how wide the marks or the language control are. A flex
   row with space-between cannot do this -- it centres the *gaps*, not the
   middle item. */
.md-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--md-s-4);
  max-width: var(--md-container);
  margin: 0 auto;
  padding: var(--md-s-3) var(--md-s-6);
}

.md-header__side {
  display: flex;
  align-items: center;
  gap: var(--md-s-6);
  min-width: 0;
}
.md-header__side--start { justify-content: flex-start; }
.md-header__side--end { justify-content: flex-end; }

/* The wordmark is the primary mark, so it is set noticeably larger than the
   date and edition marks flanking it. */
.md-header__logo { display: block; }
.md-header__logo img { display: block; width: auto; height: 4.5rem; }

/* The three columns hold at every width -- at 375px the content totals roughly
   300px against a 327px content box -- so the layout never stacks. An earlier
   version stacked below 900px, which made the header ~200px tall and pushed the
   language control well below the wordmark. Shrink instead of reflow. */
@media (max-width: 900px) {
  .md-header__bar {
    gap: var(--md-s-3);
    padding-inline: var(--md-s-4);
  }
  .md-header__side { gap: var(--md-s-3); }
  .md-header__logo img { height: 3.5rem; }
}

@media (max-width: 767px) {
  .md-header__bar { gap: var(--md-s-2); padding-inline: var(--md-s-3); }
  .md-header__side { gap: var(--md-s-2); }
  .md-header__logo img { height: 2.875rem; }
  /* The date and edition labels keep --md-text-xs at every width. Shrinking
     them here is what put the masthead at 7-9px; measured at 375px, the bar
     holds all three columns on one row with the labels at 12px, so only the
     edition numeral -- the one genuinely large thing -- needs to come down. */
  .md-mark__num { font-size: 1.375rem; }
  .md-mark__label { letter-spacing: 0.12em; }
  .md-lang__toggle { padding-inline: var(--md-s-2); gap: var(--md-s-1); }
}

@media (max-width: 480px) {
  .md-header__logo img { height: 2.25rem; }
  .md-mark__num { font-size: 1.125rem; }
  .md-flag { width: 1.125rem; height: 0.8125rem; }
}

@media (max-width: 380px) {
  /* Last resort: the city line is the least load-bearing part of the date
     mark, and the page content states the venue anyway. */
  .md-mark__place { display: none; }
  .md-header__logo img { height: 2rem; }
}

/* The header is in flow now, so no clearance is needed. style.css:481-487 and
   the layout's inline <style> both set margin-top on .content for the fixed
   header; those values are what drifted. */
.content {
  margin-top: 0;
  min-height: 0;
}

/* ==========================================================================
   Header marks — HTML replacements for the outlined-path SVGs
   public/img/date_25_*.svg had 20 paths and no text, and public/img/17_*.svg
   set "17" at 56.8px with a 0.8617 horizontal scale over "édition" at 15.78px
   with 3.5 tracking. Both are reproduced here as text so the dates and edition
   number are editable, translatable, and readable by assistive technology --
   the old <svg><image> carried no accessible name at all.
   ========================================================================== */
.md-mark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--md-bg);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Date mark ── */
.md-mark--date {
  gap: 0.15em;
  font-size: clamp(var(--md-text-xs), 1.15vw, 0.8125rem);
  letter-spacing: 0.04em;
}
/* config('meDays.event') stores human-case values ('nov', 'Tanger') so the
   same data reads correctly in og:description prose. The masthead's upper
   case is presentation, so it belongs here. */
.md-mark__day {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
}
.md-mark__year {
  /* The original set the year roughly twice the day size. */
  font-size: 2em;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-top: 0.05em;
}
.md-mark__place {
  /* Proportional to the date mark it sits under, but never under the floor:
     0.85em of a 12px parent would be 10.2px. */
  font-size: max(var(--md-text-xs), 0.85em);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.15em;
}

/* ── Edition mark ── */
.md-mark--edition {
  align-items: center;
  gap: 0.1em;
}
.md-mark__num {
  /* 56.8px against a 15.78px label in the source: a ~3.6 ratio. The 0.8617
     horizontal scale of the original is approximated with a tighter track
     rather than a transform, which would also squash the superscript. */
  font-size: clamp(1.75rem, 3.4vw, 2.625rem);
  font-weight: 400;
  letter-spacing: -0.03em;
}
.md-mark__num sup {
  font-size: 0.3em;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: super;
  margin-left: 0.06em;
}
.md-mark__label {
  font-size: var(--md-text-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.9);
}

/* The marks sit in the same slots the logo SVGs occupied. */
.navbar__logo-burger_container > .md-mark { padding: 0 var(--md-s-2); }

/* ==========================================================================
   Footer — flat, structured, in flow
   Replaces the legacy .footer, which is declared TWICE in style.css --
   :4644 ("Enhanced Footer Styling") and :5032 -- with the second not
   overriding everything the first set. :5032 supplies the gradient and the
   ::before bar; only :4644 sets `text-align: center`, at every width, with no
   width-scoped override anywhere else in the file. Nothing in this file's own
   markup opted into that, so every column here inherited a centred alignment
   an editor never chose for a footer of scannable contact rows.
   ========================================================================== */
.md-footer {
  /* Flat navy and a hairline instead of the gradient + 3px rainbow bar,
     matching the header. Same specificity, later in the cascade. */
  background: var(--md-navy);
  color: rgba(255, 255, 255, 0.75);
  overflow: visible;
  border-top: 1px solid rgba(2, 197, 255, 0.35);
  /* No margin-top. It was 4rem, which added a band of page background above
     the footer -- white on the funnel, and a visible light strip under any
     page with a dark panel. Every view already ends on its own bottom padding,
     so the footer meets that directly. */

  /* Own padding, rather than style.css's `.footer { padding: 1.875rem 0 }`
     (3rem in the copy currently deployed). That padded the bottom as well as
     the top, and the copyright bar adds another 1rem inside it -- so roughly
     64px of empty navy sat under the last line. Nothing at the bottom here:
     the bar carries its own. The inline value replaces the legacy 0, which
     let the columns reach the edge between 900px and 1200px. */
  padding: var(--md-s-12) var(--md-s-6) 0;
  /* Logical, not `left`: this flips correctly under [dir="rtl"] without a
     separate override, the way padding-inline/margin-inline already do
     elsewhere in this file. */
  text-align: start;
}
.md-footer::before { content: none; }

.md-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--md-s-8);
  max-width: var(--md-container);
  margin: 0 auto;
}

@media (max-width: 900px) {
  .md-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--md-s-6);
    /* No padding: .md-footer sets it now, and both applying it stacked. */
    padding: 0;
  }
  /* The organiser block reads as an introduction, so it spans the row. */
  .md-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .md-footer__inner { grid-template-columns: 1fr; }
}

.md-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--md-s-4);
}

.md-footer__logo { display: block; }
/* The Amadeus mark is a single-colour SVG whose paths carry .st0; the legacy
   sheet fills it white. Size it here rather than let it fill the column. */
.md-footer__logo .footer__logo {
  display: block;
  width: auto;
  height: 4.5rem;
}
.md-footer__logo .footer__logo .st0 { fill: var(--md-bg); }

.md-footer__note {
  margin: 0;
  max-width: 42ch;
  font-size: var(--md-text-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
}

/* ── Social channels ──────────────────────────────────────────────────────
   Icon-only links, so each carries an aria-label in the markup and the glyph
   is aria-hidden: an icon with no accessible name is announced as "link" and
   nothing else. The target is 44px square while the glyph is 20px -- the rest
   is touch area, which is the point. */
.md-footer__socials {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-s-2);
}

.md-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(215, 226, 255, 0.28);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.md-social svg {
  display: block;
  width: 20px;
  height: 20px;
}
.md-social:hover {
  color: var(--md-bg);
  border-color: var(--md-cyan);
  background: rgba(2, 197, 255, 0.12);
}
/* The same ring the footer's text links use, so keyboard focus reads the same
   everywhere in this block. */
.md-social:focus-visible {
  outline: 2px solid var(--md-cyan);
  outline-offset: 3px;
}

.md-footer__title {
  margin: 0 0 var(--md-s-4);
  font-size: var(--md-text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--md-bg);
}

.md-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--md-s-4);
}

/* The label names what the address is for; the address is the link. */
.md-footer__label {
  display: block;
  font-size: var(--md-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--md-cyan);
  margin-bottom: 2px;
}

.md-footer__list a {
  font-size: var(--md-text-sm);
  /* Full white, not 85%: with the rule gone these still have to separate from
     the 65%-white note text around them, or an address reads as prose. The
     underline returns on hover and focus, so there is a second, non-colour
     signal the moment a reader reaches for one. */
  color: var(--md-bg);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.md-footer__list a:hover {
  color: var(--md-bg);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.md-footer__list a:focus-visible {
  outline: 2px solid var(--md-cyan);
  outline-offset: 3px;
}

/* No rule above the copyright. It was the only separator left in the footer,
   and it read as a line under the social icons -- the copyright already sits
   apart by its own spacing and its dimmer ink. */
.md-footer__bar {
  border-top: 0;
}
.md-footer__rights {
  max-width: var(--md-container);
  margin: 0 auto;
  padding: var(--md-s-4) var(--md-s-6);
  font-size: var(--md-text-sm);
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

/* Arabic has no letter case, so the uppercase labels are a no-op that only
   leaves the tracking looking wrong. */
[dir="rtl"] .md-footer__title,
[dir="rtl"] .md-footer__label {
  text-transform: none;
  letter-spacing: 0;
}
/* No RTL override here on purpose. .md-footer__brand aligns to flex-start,
   which is already the right-hand edge in RTL; forcing flex-end put the
   Amadeus logo hard against the left while the text under it stayed
   right-aligned. */

/* ============================================================================
   SMALL SCREENS: ONE GUTTER, NOT FIVE
   ============================================================================
   The funnel nests the design system inside the legacy page chrome, and every
   level contributes its own horizontal gutter:

     .content__container 16 + main.content 12.8 + form.form 24 (margin, not
     padding) + .md-container 24 + .md-sheet 16  =  93px per side

   At 375px that is 186px -- half the screen -- and it left the form fields
   155px wide, measured on production. Below 600px keep exactly two: one page
   gutter on the outermost wrapper, and the card's own padding. Fields go from
   155px to 309px.

   Naming the legacy classes here is safe: this stylesheet is loaded only by
   registerFront.blade.php, so no admin page sees these rules, and it is loaded
   after style.css, so equal specificity wins on order.
   ---------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .content__container { padding-inline: var(--md-s-4); }
  main.content { padding-inline: 0; }
  /* .form carries its gutter as margin, so padding alone would not free it. */
  form.form { padding-inline: 0; margin-inline: 0; }
  .md-container { padding-inline: 0; }
}

/* ---- Touch targets ---------------------------------------------------------
   Measured on production at 375px: the language items rendered 39px tall and
   the footer links 26px -- both under the 44px minimum, and the footer ones sat
   close enough together to mis-tap. Heights only; nothing reflows. */
@media (pointer: coarse), (max-width: 600px) {
  .md-lang__item { min-height: 44px; }
  .md-footer__list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Grows the hit area around the wordmark, not the wordmark: the image stays
     32px and the header stays 131px tall -- verified on production. */
  .md-header__logo {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* The email and site links in the home contact line are deliberately left
   inline. They sit inside a sentence, where WCAG 2.5.8 exempts targets whose
   size is determined by the line of text -- boxing them to 44px would break
   the sentence it reads as. */

/* ============================================================================
   ONE STEP AT A TIME, WITHOUT JAVASCRIPT
   ============================================================================
   The funnel showed every step stacked -- identity, contact, motivation,
   flight, transfer, hotel, training -- as one 8,500px page.

   Nothing was wrong with the steps. Until now the only thing hiding them was
   hideallsteps(), which lives in @section('scripts') and is yielded at line
   1022 of registerFront.blade.php. Any failure that costs the page its
   trailing scripts therefore also costs it the whole step machine, and the
   form degrades to its worst possible state rather than its simplest one.

   The closed state belongs in CSS, which the head has already applied by the
   time the body parses. jQuery .show() writes an inline display, and inline
   beats a stylesheet, so the existing navigation keeps working untouched --
   this only decides what is true before any script runs.
   ---------------------------------------------------------------------------- */
.content__step { display: none; }
/* Order matters: same specificity as the rule above, so this must follow it. */
.content__step--step1 { display: block; }