/* Public landing page (screen « Landing — page publique », 1280px board): header, hero with
   an exercise card, then full-width sections. Stacks below 900px; phones from 375px. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.landing) { scroll-behavior: smooth; }
}

.landing { font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
.landing svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.landing :focus-visible { outline-offset: 3px; }
.landing__wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-6); }
.landing .btn { padding: 0 28px; gap: 10px; }
.landing .btn svg { width: 22px; height: 22px; stroke-width: 2.5; }

.landing__eyebrow { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-3); }
.landing h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; margin-bottom: var(--space-3); }
.landing__lead { max-width: 640px; font-size: 20px; line-height: 30px; font-weight: 600; color: var(--ink-muted); }
.landing__section { padding: 88px 0; }
.landing__section--sunken { background: var(--surface-sunken); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Header */
.landing__header { background: #fbf6eeeb; border-bottom: 1px solid var(--line); }
.landing__nav { display: flex; align-items: center; gap: var(--space-4); min-height: 68px; }
.landing__logo .brand__tile { width: 36px; height: 36px; border-radius: 11px; font-size: 22px; }
.landing__nav nav { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.landing__nav .btn { height: 44px; padding: 0 18px; font-size: 15px; }
.landing__nav-link { padding: 0 var(--space-3); color: var(--ink-muted); font-size: 15px; font-weight: 700; text-decoration: none; }
.landing__nav-link:hover { color: var(--ink); }

/* Hero */
.landing__hero { padding: 72px 0 64px; }
.landing__hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-12); align-items: center; }
.landing__hero .flash { margin-bottom: var(--space-6); }
.landing h1 { font-size: clamp(38px, 5.2vw, 64px); line-height: 1.02; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 20px; }
.landing h1 em { font-style: normal; color: var(--brand); }
.landing__hero .landing__lead { margin-bottom: var(--space-8); }
.landing__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.landing__cta small { display: block; width: 100%; margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--ink-muted); }

/* Hero: the exercise card (the ExerciseCard with a correct answer and the hint) */
.landing__demo { position: relative; margin: 0; padding: 28px 28px var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.landing__demo-note { position: absolute; top: -14px; right: -10px; padding: 6px var(--space-3); border-radius: var(--radius-pill); background: var(--ink); color: var(--on-brand); font-size: 13px; line-height: 20px; font-weight: 700; transform: rotate(3deg); }
.landing__demo-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; color: var(--ink-muted); }
.landing__demo-bar .label { font-size: 12px; }
.landing__demo-pause { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; }
.landing__demo-pause svg { width: 16px; height: 16px; stroke-width: 2.5; }
.landing__demo-consigne { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; font-size: 20px; font-weight: 700; }
.landing__demo-speaker { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 2px solid var(--line-strong); border-radius: var(--radius-pill); }
.landing__demo-speaker svg { width: 16px; height: 16px; stroke-width: 2; }
.landing__demo-calc { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); font-family: var(--font-num); font-size: clamp(40px, 4.4vw, 56px); line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.landing__demo-field { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 2.6em; height: 1.5em; padding: 0 0.3em; border: 4px solid var(--success); border-radius: var(--radius-md); background: var(--success-soft); color: var(--success); }
.landing__demo-field svg { position: absolute; top: 8px; left: 8px; width: 0.42em; height: 0.42em; stroke-width: 3; }
.landing__demo-bravo { margin-top: var(--space-4); text-align: center; color: var(--success); font-size: 20px; font-weight: 800; }
.landing__demo-hint { margin-top: 22px; padding: 14px 18px; border-radius: var(--radius-md); background: var(--info-soft); font-size: 16px; line-height: 24px; font-weight: 600; }
.landing__demo-hint b { color: var(--info); }

/* Comment ça marche: three steps, each with a mini-illustration */
.landing__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: 44px; }
.landing__step { display: flex; flex-direction: column; gap: var(--space-4); padding: 28px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.landing__step-n { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); font-family: var(--font-num); font-size: 24px; font-weight: 700; }
.landing__step h3 { font-size: 24px; line-height: 30px; font-weight: 800; }
.landing__step p { color: var(--ink-muted); font-weight: 600; }
.landing__mini { margin-top: auto; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); font-size: 14px; line-height: 1.55; }
.landing__mini-row, .landing__mini-stat { display: flex; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-weight: 700; }
.landing__mini-row { gap: 10px; }
.landing__mini-stat { gap: var(--space-2); }
.landing__mini-row:first-child, .landing__mini-stat:first-child { border-top: 0; }
.landing__mini-row--off > :not(.landing__mini-cb) { opacity: 0.55; }
.landing__mini-cb { flex: none; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 2px solid var(--line-strong); border-radius: 6px; background: var(--surface-raised); }
.landing__mini-cb--on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.landing__mini-cb svg { width: 13px; height: 13px; stroke-width: 3.2; }
.landing__mini-tag { margin-left: auto; padding: 2px 6px; border-radius: 6px; background: var(--brand-soft); color: var(--brand); font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.landing__mini-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.landing__mini-mode { padding: 10px var(--space-2); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 12px; text-align: center; font-size: 13px; font-weight: 800; }
.landing__mini-mode i { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 0 auto 6px; border-radius: var(--radius-sm); font-style: normal; font-family: var(--font-num); font-size: 15px; font-weight: 700; }
.landing__mini-mode svg { width: 16px; height: 16px; stroke-width: 2.4; }
.landing__mini-durations { display: flex; gap: 6px; margin-top: 10px; }
.landing__mini-durations b { flex: 1; padding: 6px 0; text-align: center; background: var(--surface-raised); border: 2px solid var(--line-strong); border-radius: 10px; font-family: var(--font-num); font-size: 14px; }
.landing__mini-durations .landing__mini-duration--on { border-color: var(--brand); background: var(--brand-soft); }
.landing__mini-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.landing__mini-dot--success { background: var(--success); }
.landing__mini-dot--star { background: var(--star); }
.landing__mini-dot--danger { background: var(--danger); }
.landing__mini-stat em { margin-left: auto; font-style: normal; font-family: var(--font-num); color: var(--ink-muted); }

.landing__tone--brand { background: var(--brand-soft); color: var(--brand); }
.landing__tone--star { background: var(--star-soft); color: var(--star); }
.landing__tone--info { background: var(--info-soft); color: var(--info); }

/* Nos choix: six principles */
.landing__principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6) 40px; margin-top: 44px; }
.landing__principle { display: flex; align-items: flex-start; gap: 14px; }
.landing__principle-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-raised); border: 1px solid var(--line); color: var(--brand); }
.landing__principle-icon svg { width: 22px; height: 22px; stroke-width: 2.2; }
.landing__principle h3 { margin-bottom: var(--space-1); font-size: 19px; line-height: 26px; font-weight: 800; }
.landing__principle p { color: var(--ink-muted); font-size: 16px; line-height: 24px; font-weight: 600; }

/* Trois modes */
.landing__modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: 44px; }
.landing__mode { display: flex; flex-direction: column; gap: 14px; min-height: 220px; padding: 28px; background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.landing__mode-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radius-md); font-family: var(--font-num); font-size: 28px; font-weight: 700; }
.landing__mode-icon svg { width: 30px; height: 30px; stroke-width: 2.2; }
.landing__mode h3 { font-size: 28px; line-height: 34px; font-weight: 800; }
.landing__mode p { color: var(--ink-muted); font-weight: 600; }

/* Pour qui: class chips */
.landing__classes { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.landing__class { padding: var(--space-3) 22px; border: 2px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface-raised); font-family: var(--font-num); font-size: 20px; line-height: 1.55; font-weight: 700; }
.landing__class--on { border-color: var(--brand); background: var(--brand-soft); }
.landing__class--soon { border-style: dashed; opacity: 0.5; }
.landing__classes-note { margin-top: var(--space-4); color: var(--ink-muted); font-weight: 600; }

/* Fait par un parent */
.landing__trust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.landing__bullets { display: flex; flex-direction: column; gap: 14px; margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.landing__bullets li { display: flex; align-items: flex-start; gap: var(--space-3); font-weight: 600; }
.landing__bullets svg { flex: none; width: 24px; height: 24px; margin-top: 1px; color: var(--success); stroke-width: 2.6; }
.landing__quote { margin: 0; padding: var(--space-8); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.landing__quote blockquote { margin: 0; font-size: 20px; line-height: 32px; font-weight: 600; }
.landing__quote figcaption { margin-top: 18px; color: var(--ink-muted); font-size: 15px; font-weight: 700; }

/* Final call to action */
.landing__final { padding: 96px 0; text-align: center; }
.landing__final-sample { margin-bottom: -0.35em; font-family: var(--font-num); font-size: clamp(72px, 12vw, 140px); line-height: 0.95; font-weight: 700; letter-spacing: -0.02em; color: var(--brand-soft); user-select: none; }
.landing__final h2 { position: relative; }
.landing__final .landing__lead { margin: 0 auto; }
.landing__final .landing__cta { justify-content: center; margin-top: 28px; }

.landing__footer { padding: var(--space-8) 0; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 14px; font-weight: 600; }
.landing__footer .landing__wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) 28px; }
.landing__footer a { color: var(--ink-muted); }
.landing__footer a:hover { color: var(--ink); }
.landing__spacer { flex-grow: 1; }

/* Tablet: one column for the hero, the steps and the modes; two for the principles. */
@media (max-width: 900px) {
  .landing__hero-grid, .landing__steps, .landing__modes, .landing__trust { grid-template-columns: minmax(0, 1fr); }
  .landing__principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing__mode { min-height: 0; }
}

/* Phone: shorter sections, one column everywhere, the header keeps the logo and « Se connecter »
   (« Créer un compte parent » is the first button of the hero, right below). */
@media (max-width: 720px) {
  .landing__section { padding: 56px 0; }
  .landing__final { padding: 72px 0; }
}
@media (max-width: 600px) {
  .landing__wrap { padding: 0 var(--space-4); }
  .landing__hero { padding: var(--space-8) 0 var(--space-12); }
  .landing__lead { font-size: 18px; line-height: 28px; }
  .landing__principles { grid-template-columns: minmax(0, 1fr); }
  .landing__demo { padding: 20px; }
  .landing__demo-note { display: none; }
  .landing__step, .landing__mode { padding: var(--space-6); }
  .landing__quote { padding: var(--space-6); }
  .landing__quote blockquote { font-size: 18px; line-height: 28px; }
  .landing__cta .btn { flex: 1 1 100%; }
  .landing__footer .landing__spacer { display: none; }
  .landing__footer span:first-child { width: 100%; }
}

/* Tap targets on touch screens and phones: 48px. */
@media (max-width: 640px), (pointer: coarse) {
  .landing__nav .btn { height: 48px; }
  .landing__nav-link { display: inline-flex; align-items: center; min-height: 48px; }
  .landing__footer a, .landing__bullets a { display: inline-block; padding: 13px 0; margin: -13px 0; }
}

@media (max-width: 560px) {
  .landing__nav .landing__nav-link, .landing__nav .landing__nav-signup { display: none; }
}