/* =========================================================================
   CURIOCITÉ — LANDING PAGE
   Direction « Le fonds » : une archive de terrain, pas un jeu de cartes.
   Papier manille grainé, encre chaude, rouge tampon, kraft de chemise et
   bleu de plan. Angles vifs (rayon 0), filets plutôt qu'ombres.
   Les valeurs reprennent celles de l'app (src/assets/styles/palette.css et
   tokens.css) : toute évolution du design system doit être reportée ici.
   ========================================================================= */

:root {
    /* ---- Palette brute (palette.css) -------------------------------- */
    --c-brand-50: #f6e8e3;
    --c-brand-400: #b15c42;
    --c-brand-500: #9e3b22; /* rouge tampon */
    --c-brand-600: #85301b;
    --c-brand-700: #6a2615;

    --c-gold-50: #f7eeda;
    --c-gold-300: #d2aa57;
    --c-gold-400: #c5963c;
    --c-gold-500: #b8862b; /* kraft de chemise */
    --c-gold-600: #9a6f22;

    --c-plan-100: #d5dfe8;
    --c-plan-300: #7d99b3;
    --c-plan-500: #3c5670; /* bleu de plan */

    --c-neutral-0: #ffffff;
    --c-neutral-25: #f5f0e5; /* carton de fiche */
    --c-neutral-50: #e8e1d3; /* papier manille */
    --c-neutral-100: #ddd4c1;
    --c-neutral-200: #cec3ab;
    --c-neutral-300: #b4a68b;
    --c-neutral-500: #7a6c53;
    --c-neutral-600: #5b5041;
    --c-neutral-800: #221e18; /* encre chaude */
    --c-neutral-900: #17140f;

    /* ---- Rôles sémantiques (tokens.css) ----------------------------- */
    --surface-base: var(--c-neutral-50);
    --surface-raised: var(--c-neutral-25);
    --surface-sunken: var(--c-neutral-100);
    --surface-inverse: var(--c-neutral-800);

    --text-primary: var(--c-neutral-800);
    --text-secondary: var(--c-neutral-600);
    --text-muted: var(--c-neutral-500);
    --text-on-brand: var(--c-neutral-25);
    --text-on-inverse: var(--c-neutral-50);
    --text-brand: var(--c-brand-600);

    --brand: var(--c-brand-500);
    --brand-hover: var(--c-brand-600);
    --brand-pressed: var(--c-brand-700);
    --on-brand: var(--c-neutral-25);
    --accent: var(--c-gold-500);
    --highlight: var(--c-gold-400);
    --plan: var(--c-plan-500);

    --border-subtle: rgba(34, 30, 24, 0.14);
    --border-default: rgba(34, 30, 24, 0.24);
    --border-strong: rgba(34, 30, 24, 0.42);

    /* ---- Typographie ------------------------------------------------ */
    --font-family-display: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --font-family-body: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --font-family-label: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --letter-spacing-wide: 0.16em;
    --letter-spacing-tight: -0.015em;

    /* ---- Espacements ------------------------------------------------ */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ---- Élévations : des décalages nets, pas du flou --------------- */
    --elevation-1: 0 1px 0 rgba(34, 30, 24, 0.1);
    --elevation-2: 2px 2px 0 -1px rgba(34, 30, 24, 0.14);
    --elevation-3: 4px 4px 0 -1px rgba(34, 30, 24, 0.18);

    /* ---- Grain de papier (tokens.css) ------------------------------- */
    --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");

    /* ---- Motion ----------------------------------------------------- */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-decelerate: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 150ms;
    --duration-base: 300ms;

    --max-width: 1160px;
    --nav-height: 68px;
}

/* ─────────────────────────────────────────────────────────────
   Reset & base
   ───────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-height) + var(--space-4));
    font-size: 16px;
}

body {
    font-family: var(--font-family-body);
    background-color: var(--surface-base);
    /* Le grain fait la matière : il est posé sur toute la page, comme dans l'app. */
    background-image: var(--texture-grain);
    color: var(--text-primary);
    font-size: 1.0625rem;
    line-height: 1.62;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--brand);
    color: var(--on-brand);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-family-label);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* ─────────────────────────────────────────────────────────────
   Typographie
   ───────────────────────────────────────────────────────────── */
h1, h2, h3 {
    font-family: var(--font-family-display);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: var(--letter-spacing-tight);
    color: var(--text-primary);
    text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.85rem); }
h3 { font-size: 1.3rem; }

h1 em, h2 em {
    font-style: italic;
    color: var(--text-brand);
}

p { color: var(--text-secondary); }

.lede {
    font-size: 1.15rem;
    line-height: 1.62;
    color: var(--text-secondary);
    max-width: 60ch;
    text-wrap: pretty;
}

/* Label Archivo : capitales, interlettrage large — la seule sans-serif. */
.kicker {
    display: inline-block;
    font-family: var(--font-family-label);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--text-muted);
}

.kicker--rule {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-strong);
    /* Filet double : le trait de tête d'un imprimé. */
    box-shadow: 0 3px 0 -2px var(--border-subtle);
}

/* ─────────────────────────────────────────────────────────────
   Boutons
   ───────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: 0 var(--space-5);
    border: 1.5px solid transparent;
    font-family: var(--font-family-label);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-standard);
}

/* Enfoncement « papier » : la feuille glisse d'un pixel, elle ne rebondit pas. */
.btn:active { transform: translate(1px, 1px); }

.btn--sm { min-height: 42px; padding: 0 var(--space-4); font-size: 0.6875rem; }

.btn--primary {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    box-shadow: var(--elevation-2);
}
.btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn--primary:active { background: var(--brand-pressed); box-shadow: none; }

.btn--store {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text-primary);
    padding: 0 var(--space-5);
    min-height: 56px;
}
.btn--store:hover { border-color: var(--text-primary); box-shadow: var(--elevation-2); }

.btn--light {
    background: var(--surface-raised);
    border-color: var(--surface-raised);
    color: var(--text-primary);
    min-height: 56px;
    box-shadow: 2px 2px 0 -1px rgba(232, 225, 211, 0.35);
}
.btn--light:hover { background: var(--c-neutral-0); }

.store-icon { width: 22px; height: 22px; flex-shrink: 0; }

.store-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-transform: none;
    letter-spacing: 0.02em;
}
.store-text small {
    font-size: 0.5625rem;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    opacity: 0.65;
}
.store-text span { font-size: 0.95rem; font-weight: 600; }

/* ─────────────────────────────────────────────────────────────
   Navigation
   ───────────────────────────────────────────────────────────── */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface-base);
    border-bottom: 1px solid transparent;
    transition: border-color var(--duration-base) var(--ease-standard),
                background-color var(--duration-base) var(--ease-standard);
}
.nav.scrolled {
    border-bottom-color: var(--border-strong);
    box-shadow: 0 3px 0 -2px var(--border-subtle);
}

.nav__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    height: var(--nav-height);
}

.nav__logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-right: auto;
}
.nav__logo-name {
    font-family: var(--font-family-display);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: var(--letter-spacing-tight);
}

.nav__links {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}
.nav__links a {
    font-family: var(--font-family-label);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--text-secondary);
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    transition: color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
}
.nav__links a:hover { color: var(--text-primary); border-bottom-color: var(--brand); }

/* Sélecteur de langue : quatre cartouches, celui de la page en cours est
   plein. Il reste hors du menu repliable — un visiteur néerlandophone qui
   tombe sur la page française doit le voir sans ouvrir quoi que ce soit. */
.langs {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-strong);
}
.langs a {
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-family-label);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--text-muted);
    line-height: 1;
    transition: background-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}
.langs a + a { border-left: 1px solid var(--border-subtle); }
.langs a:hover { color: var(--text-primary); background: var(--surface-raised); }
.langs a.is-current {
    background: var(--text-primary);
    color: var(--surface-base);
}

.nav__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--border-strong);
    background: transparent;
    cursor: pointer;
}
.nav__burger span {
    display: block;
    height: 1.5px;
    background: var(--text-primary);
    transition: transform var(--duration-fast) var(--ease-standard),
                opacity var(--duration-fast) var(--ease-standard);
}
.nav__burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─────────────────────────────────────────────────────────────
   Hero
   ───────────────────────────────────────────────────────────── */
.hero {
    padding: clamp(var(--space-12), 7vw, 96px) 0 clamp(var(--space-12), 7vw, 88px);
    border-bottom: 1px solid var(--border-strong);
    box-shadow: 0 3px 0 -2px var(--border-subtle);
}

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(var(--space-8), 5vw, 72px);
    align-items: center;
}

.hero__title { margin: var(--space-5) 0 var(--space-5); }
.hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-8) 0 var(--space-10);
}

/* Fiche technique : la ligne de métadonnées d'un dossier. */
.specs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--border-strong);
    box-shadow: 0 3px 0 -2px var(--border-subtle);
}
/* Colonnes de hauteur égale : les chiffres restent alignés même quand un
   intitulé passe sur deux lignes. */
.specs__item {
    display: flex;
    flex-direction: column;
    padding: var(--space-5) var(--space-4) 0 0;
}
.specs__item + .specs__item {
    padding-left: var(--space-4);
    border-left: 1px solid var(--border-subtle);
}
.specs dt {
    font-family: var(--font-family-label);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}
.specs dd {
    margin-top: auto;
    font-family: var(--font-family-display);
    white-space: nowrap;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.1;
}

/* ─────────────────────────────────────────────────────────────
   Maquette de l'app (hero)
   ───────────────────────────────────────────────────────────── */
.hero__visual { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }

.device {
    position: relative;
    width: min(300px, 78vw);
    aspect-ratio: 300 / 620;
    padding: 10px;
    background: var(--surface-inverse);
    box-shadow: var(--elevation-3);
}
.device__screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--surface-base);
}

.plan { width: 100%; height: 100%; }
.plan__blocks rect { fill: var(--c-neutral-100); }
.plan__streets path { stroke: var(--text-primary); stroke-width: 1.1; opacity: 0.28; fill: none; }
.plan__water { stroke: var(--c-plan-300); stroke-width: 5; fill: none; opacity: 0.55; }
/* Pointillé du parcours : le tracé de la visite, à l'encre bleue. */
.plan__route {
    stroke: var(--plan);
    stroke-width: 2;
    stroke-dasharray: 5 5;
    fill: none;
    opacity: 0.75;
}

/* Vignette : le papier s'assombrit sur les bords, comme dans l'app. */
.device__screen::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 80% at 50% 45%, transparent 55%, rgba(34, 30, 24, 0.16) 100%);
}

.pin {
    position: absolute;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    font-family: var(--font-family-label);
    font-size: 0.6875rem;
    font-weight: 700;
    box-shadow: var(--elevation-2);
}
/* Lieu trouvé : un carré kraft, angles vifs. */
.pin--found {
    background: var(--accent);
    border: 1.5px solid var(--text-primary);
    color: var(--text-primary);
}
/* Lieu secret : le cercle, affordance universelle de l'inconnu. */
.pin--secret {
    background: var(--surface-raised);
    border: 1.5px solid var(--text-primary);
    border-radius: 50%;
    color: var(--text-primary);
}
/* Révélation : le cercle du mystère devient le carré kraft d'un lieu trouvé. */
.pin--secret.is-revealed {
    background: var(--accent);
    border-radius: 0;
}
.pin__q,
.pin__n {
    line-height: 1;
    transition: opacity var(--duration-fast) var(--ease-standard);
}

/* Position de l'utilisateur : bleu de plan, cercle + cône d'orientation. */
.me {
    position: absolute;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    background: var(--plan);
    border: 2px solid var(--surface-raised);
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(60, 86, 112, 0.16);
}
.me i {
    position: absolute;
    left: 50%;
    bottom: 60%;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 22px solid rgba(60, 86, 112, 0.28);
}

/* Tampon « Révélé » : posé de travers, comme au bureau. */
.stamp {
    position: absolute;
    top: 30%;
    left: 50%;
    padding: var(--space-2) var(--space-4);
    border: 2px solid var(--brand);
    color: var(--brand);
    font-family: var(--font-family-label);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    background: rgba(245, 240, 229, 0.72);
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-9deg) scale(1.25);
    transition: opacity var(--duration-base) var(--ease-decelerate),
                transform var(--duration-base) var(--ease-decelerate);
}
.stamp.is-on {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-9deg) scale(1);
}

/* Bandeau du lieu sélectionné, posé au-dessus de la barre d'onglets. */
.sheet {
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: 58px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3) var(--space-4);
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    box-shadow: var(--elevation-2);
}
.sheet__kicker {
    font-family: var(--font-family-label);
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--text-muted);
}
.sheet__name {
    font-family: var(--font-family-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}
.sheet__hint { font-size: 0.85rem; color: var(--text-secondary); }

.tabbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--surface-raised);
    border-top: 1px solid var(--border-strong);
}
.tabbar__tab {
    padding: var(--space-4) 0;
    text-align: center;
    font-family: var(--font-family-label);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--text-muted);
}
.tabbar__tab.is-active {
    color: var(--text-primary);
    box-shadow: inset 0 -3px 0 var(--brand);
}

.device__caption {
    max-width: 34ch;
    text-align: center;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────
   Sections
   ───────────────────────────────────────────────────────────── */
.section { padding: clamp(var(--space-12), 8vw, 104px) 0; }

.section--raised {
    background: var(--surface-raised);
    background-image: var(--texture-grain);
    border-top: 1px solid var(--border-strong);
    border-bottom: 1px solid var(--border-strong);
}

.section--ink {
    background: var(--surface-inverse);
    background-image: var(--texture-grain);
    color: var(--text-on-inverse);
}
.section--ink h2,
.section--ink h3 { color: var(--text-on-inverse); }
.section--ink .lede,
.section--ink p { color: rgba(232, 225, 211, 0.76); }
.section--ink .kicker { color: var(--highlight); }
.section--ink h2 em { color: var(--highlight); }

.section-head { max-width: 62ch; margin-bottom: var(--space-12); }
.section-head h2 { margin: var(--space-4) 0 var(--space-4); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .lede { margin: 0 auto; }

/* ─────────────────────────────────────────────────────────────
   § 01 — Les trois gestes
   ───────────────────────────────────────────────────────────── */
.steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* --steps-4 : la variante « comment ça marche » compte quatre gestes. */
    gap: 0;
    border-top: 1px solid var(--border-strong);
    box-shadow: 0 3px 0 -2px var(--border-subtle);
}
.step { padding: var(--space-8) var(--space-6) 0 0; }
.step + .step {
    padding-left: var(--space-6);
    border-left: 1px solid var(--border-subtle);
}
.step__num {
    display: inline-block;
    margin-bottom: var(--space-4);
    font-family: var(--font-family-label);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--on-brand);
    background: var(--brand);
    padding: var(--space-2) var(--space-3);
}
.step h3 { margin-bottom: var(--space-3); font-size: 1.2rem; }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ─────────────────────────────────────────────────────────────
   § 02 — Grille de fonctionnalités
   ───────────────────────────────────────────────────────────── */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-5);
}
.card {
    position: relative;
    padding: var(--space-6);
    background: var(--surface-base);
    border: 1px solid var(--border-default);
    box-shadow: var(--elevation-2);
    transition: transform var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
}
.card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--elevation-3);
}
.card__index {
    display: block;
    margin-bottom: var(--space-4);
    font-family: var(--font-family-label);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--accent);
}
.card h3 {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-strong);
    box-shadow: 0 3px 0 -2px var(--border-subtle);
}
.card p { font-size: 1rem; }
.card em { font-style: italic; color: var(--text-primary); }

/* ─────────────────────────────────────────────────────────────
   § 03 — Ma visite
   ───────────────────────────────────────────────────────────── */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: clamp(var(--space-8), 5vw, 72px);
    align-items: center;
}
.split__text h2 { margin: var(--space-4) 0 var(--space-5); }

.ticks { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.ticks li {
    position: relative;
    padding-left: var(--space-6);
    color: var(--text-secondary);
}
.ticks li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 10px;
    height: 10px;
    background: var(--accent);
    border: 1px solid var(--text-primary);
}
.ticks--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-8);
}

.note {
    margin-top: var(--space-6);
    padding-left: var(--space-4);
    border-left: 2px solid var(--border-strong);
    font-size: 0.95rem;
    font-style: italic;
    color: var(--text-muted);
}

.split__visual { display: flex; flex-direction: column; gap: var(--space-3); }
.route-card {
    padding: var(--space-4);
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    box-shadow: var(--elevation-3);
}
.route-card__title {
    display: block;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    font-family: var(--font-family-display);
    font-size: 1.2rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border-strong);
    box-shadow: 0 3px 0 -2px var(--border-subtle);
}
.route-card__title span {
    font-family: var(--font-family-label);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--text-muted);
}
.route { width: 100%; height: auto; border: 1px solid var(--border-subtle); }
.route__line {
    stroke: var(--plan);
    stroke-width: 2.5;
    fill: none;
    stroke-linejoin: round;
}
.route__nodes rect { fill: var(--accent); stroke: var(--c-neutral-800); stroke-width: 1.5; }
.route__nodes text {
    font-family: var(--font-family-label);
    font-size: 11px;
    font-weight: 700;
    fill: var(--c-neutral-800);
    text-anchor: middle;
}

.route-steps { margin-top: var(--space-4); }
.route-steps li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
    border-top: 1px solid var(--border-subtle);
}
.route-steps li.is-active { background: var(--c-gold-50); }
.route-steps__n {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: var(--accent);
    border: 1px solid var(--text-primary);
    font-family: var(--font-family-label);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-primary);
}
.route-steps__name { font-size: 1rem; margin-right: auto; }
.route-steps__area {
    font-family: var(--font-family-label);
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--text-muted);
}

figcaption {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-muted);
    text-align: center;
}

/* ─────────────────────────────────────────────────────────────
   § 04 — Hors-ligne
   ───────────────────────────────────────────────────────────── */
.offline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0;
    border-top: 1px solid rgba(232, 225, 211, 0.35);
}
.offline__item { padding: var(--space-8) var(--space-6) 0 0; }
.offline__item + .offline__item {
    padding-left: var(--space-6);
    border-left: 1px solid rgba(232, 225, 211, 0.2);
}
.offline__val {
    display: block;
    font-family: var(--font-family-display);
    font-size: 3.4rem;
    font-weight: 600;
    line-height: 1;
    color: var(--highlight);
}
.offline__item h3 {
    margin: var(--space-2) 0 var(--space-3);
    font-family: var(--font-family-label);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: rgba(232, 225, 211, 0.66);
}

/* ─────────────────────────────────────────────────────────────
   Questions fréquentes — dépliants natifs <details>
   ───────────────────────────────────────────────────────────── */
.faq {
    max-width: 78ch;
    border-top: 1px solid var(--border-strong);
    box-shadow: 0 3px 0 -2px var(--border-subtle);
}
.faq__item { border-bottom: 1px solid var(--border-subtle); }

.faq__item summary {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-5) 0;
    font-family: var(--font-family-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    transition: color var(--duration-fast) var(--ease-standard);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--text-brand); }

/* Le signe bascule de + à − : pas de chevron, on est dans un imprimé. */
.faq__item summary::after {
    content: '+';
    margin-left: auto;
    font-family: var(--font-family-label);
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--brand);
    line-height: 1;
}
.faq__item[open] summary::after { content: '−'; }

.faq__item > p {
    padding: 0 var(--space-8) var(--space-5) 0;
    max-width: 66ch;
}

/* ─────────────────────────────────────────────────────────────
   § 06 — Version anticipée
   ───────────────────────────────────────────────────────────── */
.beta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    max-width: 70ch;
    margin: 0 auto;
    padding: clamp(var(--space-6), 4vw, var(--space-10));
    background: var(--surface-base);
    border: 2px dashed var(--border-strong);
}
.beta__tag {
    font-family: var(--font-family-label);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--on-brand);
    background: var(--brand);
    padding: var(--space-2) var(--space-3);
}
.beta__text {
    font-family: var(--font-family-display);
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────────
   Téléchargement
   ───────────────────────────────────────────────────────────── */
.download { text-align: center; }
.download__title { max-width: 22ch; margin: 0 auto var(--space-5); }
.download .lede { margin: 0 auto; }
.download__stores {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin: var(--space-10) 0 var(--space-5);
}
.download__note {
    font-family: var(--font-family-label);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: rgba(232, 225, 211, 0.55);
}

/* ─────────────────────────────────────────────────────────────
   Pied de page
   ───────────────────────────────────────────────────────────── */
.footer {
    background: var(--c-neutral-900);
    background-image: var(--texture-grain);
    color: var(--text-on-inverse);
    padding: var(--space-12) 0 var(--space-6);
}
.footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
    padding-bottom: var(--space-10);
}
.footer__brand { display: flex; align-items: center; gap: var(--space-3); }
.footer__brand-name {
    font-family: var(--font-family-display);
    font-size: 1.25rem;
    font-weight: 600;
}
.footer__tagline {
    margin-top: var(--space-3);
    font-style: italic;
    color: rgba(232, 225, 211, 0.6);
}
.footer__links-title {
    display: block;
    margin-bottom: var(--space-4);
    font-family: var(--font-family-label);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--highlight);
}
.footer__links { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__links a {
    color: rgba(232, 225, 211, 0.72);
    transition: color var(--duration-fast) var(--ease-standard);
}
.footer__links a:hover { color: var(--text-on-inverse); }

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(232, 225, 211, 0.16);
    font-family: var(--font-family-label);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: rgba(232, 225, 211, 0.5);
}

/* ─────────────────────────────────────────────────────────────
   Apparitions au défilement
   -------------------------------------------------------------
   La page se dépose plutôt qu'elle ne s'affiche : chaque élément
   monte de quelques pixels en apparaissant, et à l'intérieur d'un
   groupe ils se suivent au lieu d'arriver ensemble.

   Rien n'est masqué tant que `.js` n'est pas posé sur <html> par le
   script du <head> : si le JavaScript ne répond pas, la page reste
   entièrement lisible plutôt que blanche.
   ───────────────────────────────────────────────────────────── */
.js .reveal {
    opacity: 0;
    transform: translateY(16px);
}

.reveal {
    transition:
        opacity 620ms var(--ease-decelerate),
        transform 620ms var(--ease-decelerate);
    transition-delay: var(--reveal-delay, 0ms);
    /* Le compositeur prépare la couche : sur une grille de huit fiches, ça
       évite le à-coup au moment où l'animation démarre. */
    will-change: opacity, transform;
}

.reveal.visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Cascade interne d'un groupe : ~70 ms d'écart, assez pour lire un ordre,
   trop peu pour attendre. */
[data-stagger] > .reveal:nth-child(1) { --reveal-delay: 0ms; }
[data-stagger] > .reveal:nth-child(2) { --reveal-delay: 70ms; }
[data-stagger] > .reveal:nth-child(3) { --reveal-delay: 140ms; }
[data-stagger] > .reveal:nth-child(4) { --reveal-delay: 210ms; }
[data-stagger] > .reveal:nth-child(5) { --reveal-delay: 280ms; }
[data-stagger] > .reveal:nth-child(6) { --reveal-delay: 350ms; }
[data-stagger] > .reveal:nth-child(7) { --reveal-delay: 420ms; }
[data-stagger] > .reveal:nth-child(n + 8) { --reveal-delay: 490ms; }

/* La maquette du hero arrive après le texte qu'elle illustre. */
.reveal--late { --reveal-delay: 260ms; }

/* ─────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .hero__inner,
    .split { grid-template-columns: minmax(0, 1fr); }
    /* Sur mobile, le titre passe avant la maquette : c'est lui qui doit
       arriver en premier à l'écran comme au robot d'indexation. */
    .hero__visual { margin-top: var(--space-10); }
    .steps,
    .steps--4 { grid-template-columns: minmax(0, 1fr); }
    .step { padding: var(--space-6) 0 0; }
    .step + .step {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--border-subtle);
    }
    .footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer__brand-block { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
    .nav__burger { display: flex; }
    .nav__cta { display: none; }
    .nav__inner { gap: var(--space-3); }
    .langs a { padding: var(--space-2); }
    .nav__links {
        position: absolute;
        top: var(--nav-height);
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--space-2) var(--space-6) var(--space-6);
        background: var(--surface-base);
        border-bottom: 1px solid var(--border-strong);
        box-shadow: var(--elevation-2);
    }
    .nav__links.is-open { display: flex; }
    .nav__links a {
        padding: var(--space-4) 0;
        border-bottom: 1px solid var(--border-subtle);
    }
    .nav__links a:hover { border-bottom-color: var(--border-subtle); }
}

@media (max-width: 640px) {
    body { font-size: 1rem; }
    .container { padding: 0 var(--space-5); }
    .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .specs__item { padding-top: var(--space-4); }
    .specs__item:nth-child(odd) { padding-left: 0; border-left: none; }
    .specs__item:nth-child(n + 3) { border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); }
    .hero__ctas .btn,
    .download__stores .btn { flex: 1 1 100%; }
    .offline__item { padding: var(--space-6) 0 0; }
    .offline__item + .offline__item {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid rgba(232, 225, 211, 0.2);
    }
    .ticks--inline { flex-direction: column; gap: var(--space-3); }
    .footer__inner { grid-template-columns: minmax(0, 1fr); }
}

/* À l'impression, tout est là : une page imprimée ne défile pas, et rien ne
   viendrait déclencher les apparitions. */
@media print {
    .reveal,
    .js .reveal { opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────────────────────
   Accessibilité — mouvement réduit
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal,
    .js .reveal { opacity: 1; transform: none; }
}