/* ==========================================================================
   Chia Auto-Ecole — design tokens
   Red, black, white. Nothing else.
   Easing and duration values are taken from the animation standard, not invented.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- colour ---------------------------------------------------------- */
  /* Two reds, one per ground. Neither passes AA on both:
     #e10600 -> 4.97:1 on paper, only 3.99:1 on ink
     #ff0401 -> 4.97:1 on ink,   only 3.98:1 on paper
     Use --red on light surfaces, --red-bright for small text on dark ones.
     Never place the two within touching distance of each other. */
  --red: #e10600;
  --red-bright: #ff0401;
  --red-deep: #b00500;
  --red-ink: #7a0400;
  --ink: #0a0a0a;
  --ink-2: #17171a;
  --ink-3: #2a2a2f;
  --paper: #ffffff;
  --paper-2: #f4f2f0;
  --paper-3: #e6e3e0;

  --muted: #6b6a68;
  --muted-dark: #9d9c9a;
  --hairline: rgba(10,10,10,0.14);
  --hairline-dark: rgba(255,255,255,0.16);

  /* logo recolouring hooks — consumed by the inline SVG */
  --lg-red: var(--red);
  --lg-ink: var(--ink);

  /* ---- type ------------------------------------------------------------ */
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-num: 'Archivo', ui-monospace, monospace;

  /* fluid scale, 360px -> 1440px */
  --t-xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --t-sm: clamp(0.84rem, 0.81rem + 0.14vw, 0.94rem);
  --t-base: clamp(1rem, 0.96rem + 0.18vw, 1.12rem);
  --t-lg: clamp(1.16rem, 1.08rem + 0.36vw, 1.42rem);
  --t-xl: clamp(1.42rem, 1.24rem + 0.78vw, 2rem);
  --t-2xl: clamp(1.85rem, 1.45rem + 1.75vw, 3rem);
  --t-3xl: clamp(2.4rem, 1.6rem + 3.5vw, 4.75rem);
  /* Capped so the three headline lines still fit their column without
     wrapping — a wrapped line breaks the per-line mask reveal. The floor is
     set by the longest French line ("conduite sûre") at 360px. */
  --t-hero: clamp(2.35rem, 0.5rem + 6.7vw, 6.5rem);

  --lead-tight: 0.94;
  --lead-snug: 1.12;
  --lead-body: 1.55;

  /* ---- space ----------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --gutter: clamp(1.15rem, 4vw, 4rem);
  --measure: 62ch;
  --max: 1440px;

  /* ---- motion ---------------------------------------------------------- */
  /* Built-in CSS easings are too weak for deliberate motion. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --d-press: 160ms;
  --d-tooltip: 150ms;
  --d-menu: 220ms;
  --d-modal: 250ms;
  --d-reveal: 620ms;   /* marketing reveal — allowed to exceed the 300ms UI budget */
  --d-draw: 900ms;

  --radius: 2px;
  --radius-lg: 4px;

  /* ---- shadow (used sparingly; this brand is flat) --------------------- */
  --lift: 0 1px 2px rgba(10,10,10,0.08),
          0 8px 24px rgba(10,10,10,0.08);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: var(--lead-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg,
video { display: block; max-width: 100%; }

/* height:auto so the width/height attributes cannot fight an aspect-ratio */
img { height: auto; }

/* Inline SVG icons carry no intrinsic size; without a floor they expand to
   fill whatever box they land in. Anything that needs to be bigger overrides. */
svg:not([width]):not([height]) { width: 1em; height: 1em; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: var(--lead-tight);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

button { font: inherit; color: inherit; }

::selection { background: var(--red); color: #fff; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Numbers must not shift width while they animate. */
.u-tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ==========================================================================
   Reduced motion — fewer and gentler, never zero.
   Opacity and colour transitions survive; movement does not.
   ========================================================================== */

/* This is a map of what goes and what stays, not a blanket speed-up.
   Removed: ambient loops, entrance movement, scroll-linked drift.
   Kept: press feedback, hover colour, the checkbox tick, the progress bar —
   those are confirmation and state, which reduced motion does not ask us
   to give up. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* --- removed: ambient, looping motion with no comprehension value --- */
  .roadline i,
  .hero__foot .roadline i,
  .hero__eyebrow .dot {
    animation: none !important;
  }

  /* --- removed: entrance movement and masking.
         The content is simply present — which is also the safest state if
         the script never runs. --- */
  .js [data-reveal],
  .js [data-reveal] img,
  .js [data-reveal^='split'] .sp-c,
  .js [data-reveal='lines'] .hero__line-in {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .js .hero__line-in {
    animation: none !important;
    transform: none !important;
  }

  /* --- removed: scroll-linked drift and draw --- */
  .hero__bg,
  .weeks__line i {
    transform: none !important;
  }

  /* --- kept, but shortened: feedback and state --- */
  .btn,
  .mod__in,
  .ck__row,
  .ck__box,
  .ck__box svg,
  .ck__bar i,
  .hdr,
  .strip__cell::before,
  .hdr__nav a::after {
    transition-duration: 120ms !important;
  }
}