/*
 * Ez'Challenges · site public. Système « Carte à tampons » (DESIGN.md de l'app) :
 * carton ivoire sur plateau lilas, carte du jour violette, or réservé à la
 * couronne et à l'action principale, perforations pointillées.
 * Polices : Bricolage Grotesque (SIL OFL 1.1, /fonts/OFL.txt), hébergées ici.
 */

@font-face {
  font-family: "Bricolage";
  src: url("/fonts/bricolage-grotesque-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage";
  src: url("/fonts/bricolage-grotesque-semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Display";
  src: url("/fonts/bricolage-grotesque-display.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Stamp";
  src: url("/fonts/bricolage-grotesque-stamp.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Palette : JOUR (src/design/tokens.ts) ─────────────────────────────── */
:root {
  color-scheme: light dark;
  --ground: #ECE7F4;
  --surface: #FBF8FF;
  --sunk: #E2DAF0;
  --ink: #1E1433;
  --ink-soft: #5B4B80;
  --violet: #4B2A9B;
  --violet-soft: #DCD0F5;
  --on-violet-soft: #241048;
  --day: #4B2A9B;
  --on-stock: #FBF8FF;
  --on-day-muted: #D6C8F6;
  --gold: #E9B530;
  --gold-hover: #F0C24A;
  --on-gold: #2A1D00;
  --gold-ink: #8A6400;
  --stamp-gold: #B07F0E;
  --vermilion: #C23B14;
  --perf: #CBC0E0;
  --outline: #8F80B8;
  --ghost-opacity: .55;
  --shadow: rgba(52, 26, 120, .22);
  --queen-face: #FFF6DF;
  --g-queen: #6C3BD1; --g-queen-deep: #5428B0; --g-queen-tint: #E4D9FA; --g-queen-on: #3D1C8C;
  --g-nono: #2D5BD8; --g-nono-deep: #1F46B4; --g-nono-tint: #D6E1FB; --g-nono-on: #173A94;
  --g-fleches: #C8401A; --g-fleches-deep: #A53212; --g-fleches-tint: #FADBCF; --g-fleches-on: #8A2A0E;
  --g-match: #C2306B; --g-match-deep: #A02256; --g-match-tint: #F8D3E2; --g-match-on: #861C47;
  --g-logic: #1B7A50; --g-logic-deep: #12603E; --g-logic-tint: #D2EEDF; --g-logic-on: #0F5135;
  /* REGION_TILES.jour (fill / deep) */
  --r0: #BDA1F9; --r0d: #583D87;
  --r1: #D87234; --r1d: #650600;
  --r2: #31AD8B; --r2d: #00472D;
  --r3: #628CFA; --r3d: #0E2384;
  --r4: #F8C302; --r4d: #895A00;
  --r5: #FD9DB8; --r5d: #893953;
  --radius-card: 20px;
  --gutter: 16px;
}

/* ── Palette : NUIT ────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #140D24;
    --surface: #1F1638;
    --sunk: #2A1F4A;
    --ink: #F3EEFF;
    --ink-soft: #B9AAE0;
    --violet: #B49CFF;
    --violet-soft: #3A2A66;
    --on-violet-soft: #EDE5FF;
    --day: #3A2380;
    --on-day-muted: #CBB9F5;
    --gold: #F0C24A;
    --gold-hover: #F6D06A;
    --gold-ink: #F0C24A;
    --stamp-gold: #F0C24A;
    --vermilion: #FF7A57;
    --perf: #3A2F5C;
    --outline: #7564A8;
    --ghost-opacity: .7;
    --shadow: rgba(0, 0, 0, .45);
    --queen-face: #F2E6C9;
    --g-queen: #5B30B8; --g-queen-deep: #4A2499; --g-queen-tint: #2E2155; --g-queen-on: #CDB8FF;
    --g-nono: #2650C0; --g-nono-deep: #1D3F9E; --g-nono-tint: #1B2A55; --g-nono-on: #A9C2FF;
    --g-fleches: #B23A17; --g-fleches-deep: #932E10; --g-fleches-tint: #3D2018; --g-fleches-on: #FFB39C;
    --g-match: #A82A5E; --g-match-deep: #8A1F4C; --g-match-tint: #3A1A2B; --g-match-on: #FFA8CB;
    --g-logic: #17694A; --g-logic-deep: #10553B; --g-logic-tint: #173A2E; --g-logic-on: #8FE0B8;
    --r0: #8876D2; --r0d: #352D75;
    --r1: #AC532A; --r1d: #361806;
    --r2: #307770; --r2d: #062421;
    --r3: #1A71EF; --r3d: #08295F;
    --r4: #D8A800; --r4d: #7C4800;
    --r5: #DD84A5; --r5d: #7E3654;
  }
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1rem/1.55 "Bricolage", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-synthesis: none;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) { body { font-size: 1.0625rem; } }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
strong, b { font-weight: 600; }
a { color: var(--violet); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2.5px; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 6px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -100px; z-index: 10;
  background: var(--surface); color: var(--ink); padding: 10px 16px; border-radius: 999px;
  box-shadow: 0 4px 12px var(--shadow); font-weight: 600;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 768px) { :root { --gutter: 32px; } }

/* ── Type ──────────────────────────────────────────────────────────────── */
.display, h1, h2 { font-family: "Bricolage Display", "Bricolage", system-ui, sans-serif; font-weight: 800; }
h1 { font-size: clamp(2.75rem, 1.9rem + 4.2vw, 4.75rem); line-height: .98; letter-spacing: -.025em; }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.625rem); line-height: 1.08; letter-spacing: -.018em; text-wrap: balance; }
h3 { font-weight: 600; font-size: 1.125rem; line-height: 1.35; letter-spacing: -.005em; }
.eyebrow {
  font-family: "Bricolage Stamp", "Bricolage", system-ui, sans-serif;
  font-size: .8125rem; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase;
  color: var(--violet);
}
.lede { font-size: 1.125rem; line-height: 1.55; color: var(--ink-soft); max-width: 36em; }
@media (min-width: 900px) { .lede { font-size: 1.1875rem; } }
.muted { color: var(--ink-soft); }
.num { font-family: "Bricolage Stamp", "Bricolage", system-ui, sans-serif; font-variant-numeric: tabular-nums lining-nums; }

/* ── Cartons, perforations ─────────────────────────────────────────────── */
.carton {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 3px var(--shadow);
}
.perf {
  position: relative;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--perf) 0 4px, transparent 4px 9px);
}
/* The real tear: ticket notches cut into both edges, in the ground colour. */
.perf--tear { margin-inline: 0; }
.perf--tear::before, .perf--tear::after {
  content: ""; position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  border-radius: 50%; background: var(--notch, var(--ground));
}
.perf--tear::before { left: -8px; }
.perf--tear::after { right: -8px; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 12px 28px; border-radius: 999px;
  font: 600 1rem/1.25 "Bricolage", system-ui, sans-serif; text-decoration: none;
  transition: transform .12s ease-out, box-shadow .15s ease-out, background-color .15s ease-out;
}
.btn svg { width: 22px; height: 22px; flex: none; }
.btn--gold { background: var(--gold); color: var(--on-gold); box-shadow: 0 1px 3px var(--shadow); }
.btn--gold:hover { background: var(--gold-hover); box-shadow: 0 4px 12px var(--shadow); text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn--ink { background: var(--violet); color: var(--surface); min-height: 48px; padding: 10px 22px; }
.btn--ink:hover { text-decoration: none; box-shadow: 0 4px 12px var(--shadow); }

/* ── Brand mark (BrandMark.tsx) ────────────────────────────────────────── */
.mark { width: 36px; height: 36px; flex: none; }
.mark--hero { width: 112px; height: 112px; filter: drop-shadow(0 10px 24px var(--shadow)); }
.mark--cta { width: 72px; height: 72px; margin-inline: auto; filter: drop-shadow(0 4px 12px var(--shadow)); }
@media (min-width: 900px) { .mark--hero { width: 128px; height: 128px; } }
.land { transform-box: view-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  /* The stamp lands once: 1.8× → 1, fade in, unwind from −10° (Stamp.tsx useLanding). */
  .land { animation: land .62s cubic-bezier(.2, 1.35, .45, 1) .25s both; }
}
@keyframes land {
  0% { opacity: 0; transform: scale(1.8) rotate(-10deg); }
  12% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* ── Header / footer ───────────────────────────────────────────────────── */
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand span { font: 800 1.1875rem/1 "Bricolage Display", "Bricolage", system-ui, sans-serif; letter-spacing: -.01em; }
.header-link { font-weight: 600; font-size: .9375rem; color: var(--ink-soft); text-decoration: none; padding: 12px 4px; }
.header-link:hover { color: var(--violet); text-decoration: underline; }

.site-footer { margin-top: 72px; padding-bottom: 40px; }
.site-footer .perf { margin-bottom: 28px; }
.footer-grid { display: grid; gap: 20px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1fr auto; align-items: start; } }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand p { font-size: .9375rem; color: var(--ink-soft); }
.footer-brand strong { color: var(--ink); }
.footer-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-nav a { display: inline-block; padding: 10px 0; font-weight: 600; font-size: .9375rem; }
.footer-legal { margin-top: 16px; font-size: .8125rem; color: var(--ink-soft); }

/* ── Index : hero ──────────────────────────────────────────────────────── */
.hero { display: grid; gap: 40px; padding-block: 16px 48px; align-items: center; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.08fr .92fr; gap: 56px; padding-block: 40px 72px; } }
.hero-text > * + * { margin-top: 16px; }
.hero-text .eyebrow { margin-top: 28px; }
.hero h1 { margin-top: 10px; }
.promise {
  font: 800 clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem)/1.12 "Bricolage Display", "Bricolage", system-ui, sans-serif;
  letter-spacing: -.015em; color: var(--violet); text-wrap: balance;
}
.hero-text .lede { margin-top: 20px; }
.cta { margin-top: 28px !important; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cta-note { font-size: .9375rem; color: var(--ink-soft); }

/* The board card (the game screen in miniature) */
.board-card { max-width: 440px; width: 100%; margin-inline: auto; border-radius: var(--radius-card); background: var(--surface); box-shadow: 0 10px 24px var(--shadow); overflow: hidden; }
.board-card .band { background: var(--g-queen); color: var(--on-stock); padding: 16px 18px 18px; border-radius: 0 0 28px 28px; }
.band-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.band-title { font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.band-meta { font-size: .8125rem; opacity: .92; }
.timer { font-family: "Bricolage Stamp", sans-serif; font-variant-numeric: tabular-nums; font-size: 1rem; background: var(--g-queen-deep); box-shadow: inset 0 1px 2px rgba(0,0,0,.25); padding: 4px 12px; border-radius: 999px; }
.progress { margin-top: 14px; display: flex; align-items: center; gap: 10px; }
.progress .track { flex: 1; height: 8px; border-radius: 999px; background: var(--g-queen-deep); box-shadow: inset 0 1px 2px rgba(0,0,0,.25); overflow: hidden; }
.progress .fill { display: block; width: 33.4%; height: 100%; border-radius: 999px; background: var(--gold); }
.progress .num { font-size: .9375rem; }
.board-wrap { padding: 16px; }
.board { width: 100%; height: auto; }
.board .r0, .mini .r0, .motif .r0 { fill: var(--r0); }
.board .r1, .mini .r1, .motif .r1 { fill: var(--r1); }
.board .r2, .mini .r2, .motif .r2 { fill: var(--r2); }
.board .r3, .mini .r3, .motif .r3 { fill: var(--r3); }
.board .r4, .mini .r4, .motif .r4 { fill: var(--r4); }
.board .r5, .mini .r5, .motif .r5 { fill: var(--r5); }
.qface { fill: var(--queen-face); }
.qface.d0, .xedge.d0 { stroke: var(--r0d); } .qface.d1, .xedge.d1 { stroke: var(--r1d); }
.qface.d2, .xedge.d2 { stroke: var(--r2d); } .qface.d3, .xedge.d3 { stroke: var(--r3d); }
.qface.d4, .xedge.d4 { stroke: var(--r4d); } .qface.d5, .xedge.d5 { stroke: var(--r5d); }
.xedge { fill: none; }
.xmark { fill: none; stroke: #FBF8FF; }
.board-tip { margin: 0 16px 16px; padding: 12px 14px; border-radius: 16px; background: var(--g-queen-tint); color: var(--g-queen-on); font-size: .9375rem; line-height: 1.45; display: flex; gap: 10px; align-items: flex-start; }
.board-tip svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }

/* Counters strip (a punched ticket) */
.counters { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding: 18px 8px; position: relative; }
.counters > div { position: relative; padding: 4px 6px; }
.counters > div + div::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  background: repeating-linear-gradient(180deg, var(--perf) 0 4px, transparent 4px 9px);
}
.counters .num { display: block; font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1.05; color: var(--ink); }
.counters span:last-child { display: block; margin-top: 4px; font-size: .875rem; color: var(--ink-soft); }

/* ── Sections ──────────────────────────────────────────────────────────── */
.section { padding-block: 56px 0; }
@media (min-width: 900px) { .section { padding-block: 88px 0; } }
.section-head { max-width: 46rem; }
.section-head > * + * { margin-top: 12px; }
.section-head h2 { margin-top: 10px; }
.section-head + * { margin-top: 28px; }

/* Games list (« Tes jeux » : one perforated card of rows) */
.games { list-style: none; padding: 4px 0; }
.games li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; padding: 16px; }
@media (min-width: 768px) { .games li { grid-template-columns: 72px 1fr; padding: 18px 24px; gap: 20px; } }
.games li + li::before { content: ""; position: absolute; top: -1px; left: 16px; right: 16px; height: 2px; background: repeating-linear-gradient(90deg, var(--perf) 0 4px, transparent 4px 9px); }
.games h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.games p { color: var(--ink-soft); margin-top: 2px; }
.games .count { font-family: "Bricolage Stamp", sans-serif; font-size: .8125rem; letter-spacing: .04em; font-weight: 400; color: var(--g-on); }
.thumb { width: 64px; height: 64px; border-radius: 14px; background: var(--g-tint); padding: 9px; }
@media (min-width: 768px) { .thumb { width: 72px; height: 72px; padding: 10px; } }
.mini { width: 100%; height: 100%; }
.mini .g-stock { fill: var(--g-stock); }
.mini .g-deep { fill: var(--g-deep); }
.mini .g-cell { fill: var(--surface); }
.mini .g-line { stroke: #FBF8FF; fill: none; }
.mini .g-x { stroke: var(--g-on); fill: none; opacity: .55; }
.mini .g-digit { fill: var(--g-on); font-family: "Bricolage Stamp", sans-serif; }
.mini .g-on { fill: #FBF8FF; font-family: "Bricolage Stamp", sans-serif; }
.g--queen { --g-stock: var(--g-queen); --g-deep: var(--g-queen-deep); --g-tint: var(--g-queen-tint); --g-on: var(--g-queen-on); }
.g--nono { --g-stock: var(--g-nono); --g-deep: var(--g-nono-deep); --g-tint: var(--g-nono-tint); --g-on: var(--g-nono-on); }
.g--fleches { --g-stock: var(--g-fleches); --g-deep: var(--g-fleches-deep); --g-tint: var(--g-fleches-tint); --g-on: var(--g-fleches-on); }
.g--match { --g-stock: var(--g-match); --g-deep: var(--g-match-deep); --g-tint: var(--g-match-tint); --g-on: var(--g-match-on); }
.g--logic { --g-stock: var(--g-logic); --g-deep: var(--g-logic-deep); --g-tint: var(--g-logic-tint); --g-on: var(--g-logic-on); }
.games-note { margin-top: 16px; font-size: .9375rem; color: var(--ink-soft); max-width: 46rem; }

/* The day card (Queens du jour) */
.day-card { background: var(--day); color: var(--on-stock); border-radius: var(--radius-card); box-shadow: 0 10px 24px var(--shadow); --notch: var(--ground); }
.day-card .eyebrow { color: var(--on-day-muted); }
.day-card p { color: var(--on-day-muted); }
.day-card a { color: var(--on-stock); }
.day-top { display: grid; gap: 28px; padding: 24px 20px 28px; align-items: center; }
@media (min-width: 900px) { .day-top { grid-template-columns: 1fr 360px; gap: 48px; padding: 40px 40px 40px 44px; } }
.day-top h2 { margin-top: 10px; color: var(--on-stock); }
.day-top p { margin-top: 14px; font-size: 1.0625rem; max-width: 30em; }
.day-card .perf { background: repeating-linear-gradient(90deg, rgba(251, 248, 255, .35) 0 4px, transparent 4px 9px); }
.day-bottom { display: grid; gap: 18px; padding: 22px 20px 24px; align-items: center; }
@media (min-width: 900px) { .day-bottom { grid-template-columns: auto 1fr; gap: 36px; padding: 26px 40px 30px 44px; } }
.day-bottom p { max-width: 34em; }
.punches { list-style: none; display: flex; gap: 8px; }
.punches li { display: grid; justify-items: center; gap: 4px; }
.punches svg { width: 34px; height: 34px; }
.punches span { font: .75rem/1 "Bricolage Stamp", sans-serif; letter-spacing: .06em; color: var(--on-day-muted); }
.punch { fill: var(--gold); }
.hole { fill: var(--day); }
.slot { fill: none; stroke: rgba(251, 248, 255, .5); }

/* The share ticket (ShareTicket.tsx), drawn smaller */
.ticket-frame { background: var(--g-queen); border-radius: 22px; padding: 14px; max-width: 360px; width: 100%; justify-self: center; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.ticket { background: var(--surface); color: var(--ink); border-radius: 14px; padding: 18px 18px 14px; text-align: center; --notch: var(--g-queen); }
.day-card .ticket p { color: var(--ink); }
.day-card .ticket .eyebrow { color: var(--violet); font-size: .75rem; }
.ticket-date { font: 800 1.375rem/1.15 "Bricolage Display", sans-serif; margin-top: 4px; letter-spacing: -.01em; }
.motif { width: 70%; margin: 14px auto 16px; }
.ticket .perf { margin-inline: -18px; background: repeating-linear-gradient(90deg, var(--perf) 0 4px, transparent 4px 9px); }
.ticket-stats { display: grid; grid-template-columns: 1fr 1.5fr 1fr; align-items: end; gap: 6px; padding-top: 14px; }
.ticket-stats .num { font-size: 1.5rem; line-height: 1; display: block; }
.ticket-stats small { display: block; margin-top: 6px; font: .625rem/1.2 "Bricolage Stamp", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.ticket-stamps { display: flex; justify-content: center; gap: 2px; }
.ticket-stamps .stamp { width: 30px; height: 30px; }
.ticket-foot { margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 6px; font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.ticket-foot svg { width: 14px; height: 14px; color: var(--gold-ink); }
.ticket-foot span { font-weight: 400; color: var(--ink-soft); }
.ticket-caption { margin-top: 10px; text-align: center; font-size: .875rem; color: var(--on-day-muted); }

/* Stamps (vocabulary: violet = done, gold = perfect, ghost = to earn, vermilion = failed) */
.stamp { width: 100%; height: auto; overflow: visible; }
.stamp--violet { color: var(--violet); }
.stamp--gold { color: var(--stamp-gold); }
.stamp--ghost { color: var(--outline); opacity: var(--ghost-opacity); }
.stamp--fail { color: var(--vermilion); }

/* Learn (carnet) */
.learn { display: grid; }
@media (min-width: 900px) { .learn { grid-template-columns: 340px 2px 1fr; } }
.stamps-row { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 24px 16px 20px; text-align: center; align-content: center; }
.stamps-row .stamp { width: min(96px, 100%); margin-inline: auto; }
.stamps-row p { margin-top: 10px; font-size: .8125rem; line-height: 1.35; color: var(--ink-soft); }
.stamps-row p strong { display: block; color: var(--ink); font-size: .875rem; }
.learn-perf { margin-inline: 16px; }
@media (min-width: 900px) {
  .learn-perf { margin: 24px 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--perf) 0 4px, transparent 4px 9px); }
  .stamps-row { padding: 32px 24px; }
}
.learn-list { list-style: none; padding: 8px 0; }
.learn-list li { position: relative; padding: 16px 20px; }
@media (min-width: 900px) { .learn-list li { padding: 18px 28px; } }
.learn-list li + li::before { content: ""; position: absolute; top: -1px; left: 20px; right: 20px; height: 2px; background: repeating-linear-gradient(90deg, var(--perf) 0 4px, transparent 4px 9px); }
.learn-list p { color: var(--ink-soft); margin-top: 2px; }
.steps { display: inline; }

/* Small facts */
.facts { list-style: none; display: grid; gap: 22px 32px; }
@media (min-width: 720px) { .facts { grid-template-columns: 1fr 1fr; } }
.facts li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.medallion { width: 44px; height: 44px; border-radius: 50%; background: var(--violet-soft); color: var(--on-violet-soft); display: grid; place-items: center; }
.medallion svg { width: 22px; height: 22px; }
.facts p { color: var(--ink-soft); margin-top: 2px; }

/* Sans pub ticket */
.noads-list { list-style: none; padding: 20px 20px 22px; display: grid; gap: 12px; }
@media (min-width: 768px) { .noads-list { grid-template-columns: 1fr 1fr; padding: 28px 32px; gap: 14px 32px; } }
.noads-list li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.noads-list svg { width: 22px; height: 22px; color: var(--violet); margin-top: 2px; }
.stub { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; align-items: center; padding: 22px 20px 24px; }
@media (min-width: 768px) { .stub { padding: 26px 32px 28px; } }
.stub h3 { font: 800 1.5rem/1.1 "Bricolage Display", sans-serif; letter-spacing: -.01em; }
.stub p { color: var(--ink-soft); margin-top: 6px; max-width: 34em; }
.price { text-align: right; }
.price .num { display: block; font-size: clamp(2rem, 1.6rem + 1.8vw, 2.75rem); line-height: 1; }
.price small { display: block; margin-top: 4px; font-size: .8125rem; color: var(--ink-soft); }

/* Final call */
.final { text-align: center; padding-top: 72px; }
.final h2 { margin-top: 20px; }
.final p { margin: 12px auto 0; max-width: 32em; }
.final .btn { margin-top: 24px; }

/* ── Legal pages ───────────────────────────────────────────────────────── */
.doc { max-width: 46rem; margin-inline: auto; padding-block: 16px 0; }
.doc h1 { font-size: clamp(2.25rem, 1.7rem + 2.6vw, 3.25rem); line-height: 1.04; letter-spacing: -.02em; margin-top: 10px; }
.doc-meta { margin-top: 14px; color: var(--ink-soft); font-size: .9375rem; }
.doc h2 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); margin-top: 56px; scroll-margin-top: 16px; }
.doc h3 { margin-top: 28px; }
.doc p, .doc ul, .doc ol, .doc dl, .doc table { margin-top: 14px; }
.doc ul, .doc ol { padding-left: 1.25em; }
.doc li + li { margin-top: 6px; }
.doc li::marker { color: var(--violet); }
.doc address { font-style: normal; }
.summary { margin-top: 32px; padding: 22px 20px 20px; }
@media (min-width: 768px) { .summary { padding: 26px 28px 24px; } }
.summary h2 { margin-top: 0; font-size: 1.375rem; }
.summary ul { list-style: none; padding: 0; margin-top: 12px; }
.summary li { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 12px 0; margin: 0; }
.summary li + li::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--perf) 0 4px, transparent 4px 9px); }
.summary li svg { width: 22px; height: 22px; color: var(--violet); margin-top: 1px; }
.toc { margin-top: 32px; }
.toc h2 { font-size: 1.125rem; margin-top: 0; font-family: "Bricolage", system-ui, sans-serif; font-weight: 600; letter-spacing: 0; }
.toc ol { margin-top: 10px; columns: 1; }
@media (min-width: 720px) { .toc ol { columns: 2; column-gap: 32px; } }
.toc li { break-inside: avoid; }
.processing { margin-top: 20px; padding: 22px 20px 8px; }
@media (min-width: 768px) { .processing { padding: 26px 28px 12px; } }
.processing h3 { margin-top: 0; font-size: 1.1875rem; }
.processing > p:first-of-type { margin-top: 8px; color: var(--ink-soft); }
.kv { margin-top: 12px; }
.kv > div { position: relative; padding: 12px 0; display: grid; gap: 2px; }
.kv > div + div::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--perf) 0 4px, transparent 4px 9px); }
@media (min-width: 720px) { .kv > div { grid-template-columns: 10.5rem 1fr; gap: 16px; } }
.kv dt { font-family: "Bricolage Stamp", sans-serif; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); padding-top: 3px; }
.kv dd { margin: 0; }
.kv dd > :first-child { margin-top: 0; }
.kv dd > * + * { margin-top: 8px; }
.kv ul { padding-left: 1.1em; margin-top: 6px; }
.note { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--violet-soft); color: var(--on-violet-soft); }
.note a { color: inherit; }
.table-wrap { overflow-x: auto; margin-top: 14px; }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 2px dotted var(--perf); }
th { font-family: "Bricolage Stamp", sans-serif; font-weight: 400; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
td code { font-size: .8125rem; word-break: break-all; color: var(--ink-soft); }
.updated { margin-top: 48px; font-size: .9375rem; color: var(--ink-soft); }

/* ── 404 ───────────────────────────────────────────────────────────────── */
.lost { text-align: center; padding-block: 40px 24px; max-width: 34rem; margin-inline: auto; }
.lost .stamp { width: 168px; margin-inline: auto; transform: rotate(-4deg); }
.lost h1 { font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem); margin-top: 24px; }
.lost p { margin-top: 12px; color: var(--ink-soft); }
.lost .btn { margin-top: 28px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .btn:active { transform: none; }
}
@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer .footer-nav, .skip, .toc { display: none; }
  .carton, .day-card { box-shadow: none; border: 1px solid #ccc; }
}