/* ==========================================================================
   Les Deudeuch du Ségala — feuille de style
   CSS moderne : scroll-driven animations, @container scroll-state,
   @starting-style, Popover API, interpolate-size, oklch, color-mix…
   ========================================================================== */

@layer reset, tokens, base, components, sections, motion;

@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ---------- Reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  img, svg, iframe { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  ul[class], ol[class] { list-style: none; padding: 0; }
}

/* ---------- Design tokens ---------- */
@layer tokens {
  :root {
    color-scheme: light;
    interpolate-size: allow-keywords;

    --cream:   oklch(94.5% 0.03 82);
    --paper:   oklch(97.5% 0.018 85);
    --ink:     oklch(22% 0.02 40);
    --ink-soft:oklch(42% 0.03 45);
    --red:     oklch(58% 0.19 33);
    --bordeaux:oklch(36% 0.11 18);
    --yellow:  oklch(83% 0.15 85);
    --orange:  oklch(72% 0.15 55);
    --green:   oklch(58% 0.1 135);
    --forest:  oklch(42% 0.08 140);
    --blue:    oklch(76% 0.06 225);
    --line:    color-mix(in oklch, var(--ink) 14%, transparent);

    --car-body:  #7a1f2b;
    --car-fender:#1e1a1a;
    --car-roof:  #2a2422;

    --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --font-sans: "Bricolage Grotesque", system-ui, sans-serif;

    --radius: 22px;
    --gutter: clamp(16px, 4vw, 48px);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1);
  }
}

/* ---------- Base ---------- */
@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: 90px; container-type: scroll-state; }
  body {
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
    line-height: 1.6;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
  }
  /* grain papier */
  body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
    opacity: .22; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .2  0 0 0 0 .1  0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  h1, h2, h3 { font-family: var(--font-display); line-height: 1.02; font-weight: 600; text-wrap: balance; letter-spacing: -.02em; }
  p { text-wrap: pretty; }
  em { font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; }
  a { color: inherit; }
  ::selection { background: var(--yellow); color: var(--ink); }
  :focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 6px; }

  .skip {
    position: fixed; top: 10px; left: 10px; z-index: 200; padding: .6em 1em;
    background: var(--ink); color: var(--paper); border-radius: 99px; translate: 0 -200%;
    transition: translate .3s var(--ease-out);
  }
  .skip:focus { translate: 0 0; }
  .container { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }
}

/* ---------- Composants ---------- */
@layer components {
  .btn {
    --bg: var(--ink); --fg: var(--paper);
    display: inline-flex; align-items: center; gap: .55em;
    padding: .95em 1.6em; border: 2px solid var(--ink); border-radius: 999px;
    background: var(--bg); color: var(--fg);
    font-weight: 650; text-decoration: none; letter-spacing: .01em; white-space: nowrap;
    box-shadow: 0 4px 0 var(--ink);
    transition: translate .25s var(--ease-out), box-shadow .25s var(--ease-out), background-color .25s;
  }
  .btn:hover { translate: 0 -3px; box-shadow: 0 7px 0 var(--ink); --bg: var(--red); }
  .btn:active { translate: 0 3px; box-shadow: 0 1px 0 var(--ink); }
  .btn--ghost { --bg: var(--paper); --fg: var(--ink); }
  .btn--ghost:hover { --bg: var(--yellow); }
  .btn--small { padding: .6em 1.15em; font-size: .92rem; box-shadow: 0 3px 0 var(--ink); }

  .eyebrow, .kicker {
    font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
    color: var(--ink-soft);
  }
  .kicker { display: inline-flex; align-items: center; gap: .7em; margin-bottom: 1.1rem; color: var(--red); }
  .kicker::before { content: ""; width: 28px; height: 2px; background: currentColor; }
  .eyebrow { display: inline-flex; align-items: center; gap: .6em; padding: .5em 1em; border: 1.5px solid var(--line); border-radius: 99px; background: color-mix(in oklch, var(--paper) 70%, transparent); backdrop-filter: blur(6px); }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 var(--red); animation: ping 2s infinite; }
  @keyframes ping { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

  .h2 { font-size: clamp(2.3rem, 1.4rem + 4vw, 4.8rem); margin-bottom: 1.4rem; }
  .h2 em { color: var(--red); }
  .lead { font-size: 1.2em; color: var(--ink-soft); max-width: 60ch; }

  /* ----- La 2CV (SVG) ----- */
  .car { width: 100%; height: auto; overflow: visible; }
  .car__shadow { fill: oklch(20% 0.02 40 / .28); filter: blur(3px); }
  .car__body, .car__accent, .car__fender { transition: fill .6s; }
  .car__body   { fill: var(--car-body); }
  .car__accent, .car__fender { fill: var(--car-fender); }
  .car__body, .car__fender { stroke: oklch(12% 0.01 40 / .55); stroke-width: 3; stroke-linejoin: round; }
  .car__canvas { fill: var(--car-roof); }
  .car__stitch { fill: none; stroke: oklch(100% 0 0 / .22); stroke-width: 2; stroke-dasharray: 6 6; }
  .car__glass  { stroke: oklch(18% 0.01 40 / .9); stroke-width: 5; stroke-linejoin: round; }
  .car__seat   { fill: oklch(28% 0.02 40 / .45); }
  .car__wheel-steer { fill: none; stroke: oklch(20% 0.01 40 / .75); stroke-width: 6; stroke-linecap: round; }
  .car__glint  { fill: oklch(100% 0 0 / .38); }
  .car__line   { fill: none; stroke: oklch(10% 0 0 / .38); stroke-width: 3; stroke-linecap: round; }
  .car__seam   { fill: none; stroke: oklch(100% 0 0 / .16); stroke-width: 3; }
  .car__vent   { fill: oklch(12% 0.01 40 / .55); }
  .car__hinge  { fill: oklch(10% 0 0 / .3); }
  .car__sill   { fill: oklch(12% 0.01 40 / .8); }
  .car__well   { fill: #141110; }
  .car__trim   { stroke: oklch(40% 0.01 250); stroke-width: 2; }
  .car__arm    { stroke: #4a4f55; stroke-width: 5; stroke-linecap: round; }
  .car__dark   { fill: #222; }
  .car__light  { fill: oklch(97% 0.06 95); stroke: oklch(55% 0.01 250); stroke-width: 2; }
  .car__blinker{ fill: var(--orange); }
  .car__tail   { fill: oklch(55% 0.2 28); stroke: oklch(10% 0 0 / .3); stroke-width: 2; }
  .car__tire   { fill: #1b1918; }
  .car__sidewall { fill: none; stroke: #2e2b29; stroke-width: 4; }
  .car__rim    { fill: var(--car-rim, #ece6da); stroke: oklch(10% 0 0 / .3); stroke-width: 2; }
  .car__hubcap { stroke: oklch(45% 0.01 250); stroke-width: 2; }
  .car__nut    { fill: #59606a; }
  .car__wheel  { transform-box: fill-box; transform-origin: center; }
  .car__chassis{ transform-box: view-box; }
  .car__lean   { transform-origin: 400px 300px; rotate: var(--lean, 0deg); transition: rotate .5s var(--ease-spring); }

  .is-honking .car__lean { animation: honk .5s ease-in-out; }
  @keyframes honk { 20% { translate: 0 -16px; } 40% { translate: 0 0; } 60% { translate: 0 -10px; } 80% { translate: 0 0; } }
  .is-honking .car__light { fill: #fff6a8; filter: drop-shadow(0 0 8px #ffe066); }
}

/* ---------- Sections ---------- */
@layer sections {

  /* ===== NAV ===== */
  .nav-wrap {
    position: fixed; inset: 0 0 auto; z-index: 50; padding: 14px var(--gutter);
    pointer-events: none;
  }
  .nav {
    pointer-events: auto;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    max-width: 1240px; margin-inline: auto; padding: .55rem .6rem .55rem 1rem;
    border: 1.5px solid transparent; border-radius: 999px;
    transition: background-color .4s, border-color .4s, box-shadow .4s, padding .4s var(--ease-out);
  }
  .is-scrolled .nav {
    background: color-mix(in oklch, var(--paper) 78%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    border-color: var(--line);
    box-shadow: 0 10px 30px -12px oklch(20% 0.03 40 / .25);
  }
  .brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; font-weight: 700; }
  .brand__badge {
    display: flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 50%;
    background: var(--red); color: var(--paper); font-family: var(--font-display); font-size: 1.15rem; font-weight: 800;
    border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
    transition: rotate .6s var(--ease-spring);
  }
  .brand__badge sup { font-size: .55em; translate: 0 -.1em; }
  .brand:hover .brand__badge { rotate: -18deg; }
  .brand__logo { width: 52px; height: 52px; object-fit: contain; margin-block: -6px; transition: rotate .6s var(--ease-spring); }
  .brand:hover .brand__logo { rotate: -8deg; }
  .brand:has(.brand__logo) .brand__badge { display: none; }
  .brand__name { font-family: var(--font-display); font-size: 1.1rem; line-height: 1; }
  .brand__name em { color: var(--red); }
  .nav__links { display: flex; gap: .2rem; }
  .nav__links a {
    display: block; padding: .5em .9em; border-radius: 99px; text-decoration: none; font-weight: 550; font-size: .95rem;
    transition: background-color .25s;
  }
  .nav__links a:hover { background: color-mix(in oklch, var(--yellow) 60%, transparent); }
  .nav__right { display: flex; align-items: center; gap: .7rem; }
  .speedo {
    font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--ink-soft);
    padding: .35em .8em; border-radius: 99px; border: 1.5px dashed var(--line); white-space: nowrap;
  }
  .speedo b { display: inline-block; min-width: 3ch; text-align: right; color: var(--ink); }
  @media (max-width: 1100px) { .nav__links { display: none; } }
  @media (max-width: 560px) { .speedo { display: none; } .brand__name { font-size: .95rem; } }

  /* ===== HERO ===== */
  .hero {
    /* l'accueil tient dans l'écran, bandeau défilant compris ; le bas est réservé à la route et à la deuche */
    --car-w: clamp(210px, min(40vw, 36svh), 560px);
    position: relative; min-height: calc(100svh - 76px);
    padding-bottom: calc(var(--car-w) * .475 + 110px); overflow: clip;
    background: #f6d9a8;
  }
  .hero__text {
    position: relative; z-index: 3; text-align: center;
    padding: clamp(110px, 16vh, 170px) var(--gutter) 0;
    display: grid; justify-items: center; gap: 1.4rem;
  }
  .hero__title {
    font-size: clamp(2.8rem, min(1rem + 9vw, 11.5svh), 9.5rem);
    font-weight: 800; line-height: .88; letter-spacing: -.045em;
    font-variation-settings: "SOFT" 50, "opsz" 144;
    color: var(--ink);
  }
  .hero__title em { color: var(--red); font-weight: 700; }
  /* marge basse pour ne pas rogner les jambages (le g de Ségala) */
  .hero__title .line { display: block; overflow: clip; padding-block: .04em .22em; margin-bottom: -.18em; }
  .hero__title .line > span { display: inline-block; }
  .hero__lead {
    max-width: 62ch; font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); color: var(--ink);
    padding: .7em 1.3em; border-radius: 20px;
    background: color-mix(in oklch, var(--paper) 62%, transparent); backdrop-filter: blur(8px);
  }
  .hero__text { padding-top: clamp(84px, 11svh, 140px); gap: 1.1rem; }
  /* écrans peu hauts (portables) : on resserre pour garder la route visible */
  @media (max-width: 600px) {
    .hero__cta { gap: .5rem; }
    .hero__cta .btn:first-child { display: none; }
    .hero .btn { padding: .7em 1.05em; font-size: .88rem; }
    .hero__lead { font-size: .95rem; padding: .5em 1em; }
    .hero .eyebrow { display: none; }
  }
  @media (max-height: 780px) {
    .hero { --car-w: clamp(200px, min(40vw, 32svh), 560px); }
    .hero__title { font-size: clamp(2.6rem, min(1rem + 9vw, 10.5svh), 9.5rem); }
    .hero .eyebrow { display: none; }
    .hero__text { gap: .8rem; }
    .hero__lead { font-size: 1rem; padding: .5em 1.1em; }
    .hero .btn { padding: .7em 1.2em; }
  }
  .hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }

  .scene { position: absolute; inset: 0; z-index: 1; }
  .landscape { position: absolute; inset: 0 0 96px; width: 100%; height: calc(100% - 96px); }
  .cloud { fill: oklch(99% 0.01 85 / .85); }
  .cloud--1 { animation: drift 60s linear infinite; }
  .cloud--2 { animation: drift 85s linear infinite -30s; }
  .cloud--3 { animation: drift 70s linear infinite -50s; }
  @keyframes drift { from { translate: -400px 0; } to { translate: 1800px 0; } }

  .road {
    position: absolute; inset: auto 0 0; height: 100px;
    background: linear-gradient(#5f7d3b 0 8px, #3c3633 8px 92px, #5f7d3b 92px);
  }
  .road__dashes {
    position: absolute; inset: 48px 0 auto; height: 5px;
    background: repeating-linear-gradient(90deg, #f0dfb8 0 46px, transparent 46px 96px);
    animation: road .55s linear infinite;
  }
  @keyframes road { to { background-position: -96px 0; } }
  .fence {
    position: absolute; inset: auto 0 100px; height: 26px; z-index: 1;
    background:
      linear-gradient(#7a5a3a, #7a5a3a) 0 7px / 100% 3px no-repeat,
      repeating-linear-gradient(90deg, #7a5a3a 0 5px, transparent 5px 90px);
    animation: fence 1.1s linear infinite;
    opacity: .75;
  }
  @keyframes fence { to { background-position: 0 7px, -90px 0; } }

  .hero__car {
    position: absolute; z-index: 2; left: 50%; bottom: 44px;
    width: var(--car-w); translate: -50% 0;
  }
  .hero__car .car__wheel { animation: spin .6s linear infinite; }
  .hero__car .car__chassis { animation: wobble 1.4s ease-in-out infinite; }
  @keyframes spin { to { rotate: -360deg; } }
  @keyframes wobble { 0%,100% { translate: 0 0; } 25% { translate: 0 -3px; } 50% { translate: 0 1px; } 75% { translate: 0 -2px; } }

  .scroll-hint {
    position: absolute; z-index: 3; right: var(--gutter); bottom: 130px;
    width: 30px; height: 50px; border: 2px solid var(--ink); border-radius: 99px;
  }
  .scroll-hint span { position: absolute; left: 50%; top: 9px; width: 5px; height: 9px; margin-left: -2.5px; border-radius: 9px; background: var(--ink); animation: hint 1.8s infinite; }
  @keyframes hint { 60% { translate: 0 16px; opacity: 0; } 100% { opacity: 0; } }
  @media (max-width: 700px) { .scroll-hint { display: none; } }

  /* ===== MARQUEE ===== */
  .marquee {
    position: relative; z-index: 4; overflow: clip;
    background: var(--ink); color: var(--cream);
    border-block: 3px solid var(--ink);
    rotate: -1deg; margin: -14px -10px 0; padding-block: .7rem;
  }
  .marquee__track {
    display: flex; width: max-content; gap: 2rem; align-items: center;
    font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 1.8vw, 2.5rem); font-weight: 700; font-style: italic;
    animation: marquee 32s linear infinite;
  }
  .marquee__track i { color: var(--yellow); font-style: normal; font-size: .6em; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  @keyframes marquee { to { translate: -50% 0; } }

  /* ===== SECTIONS GÉNÉRIQUES ===== */
  .section { padding-block: clamp(80px, 12vw, 160px); position: relative; }

  /* ===== CLUB ===== */
  .club__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .club__story > p { margin-bottom: 1.1rem; max-width: 58ch; }
  .club__story strong { background: linear-gradient(transparent 60%, color-mix(in oklch, var(--yellow) 70%, transparent) 60%); }
  .objet {
    margin-top: 2.4rem; padding: 1.8rem 2rem; border-radius: var(--radius);
    background: var(--paper); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
    rotate: -1deg;
  }
  .objet p { font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); font-style: italic; line-height: 1.25; font-variation-settings: "SOFT" 100, "WONK" 1; }
  .objet cite { display: block; margin-top: .8rem; font-size: .85rem; font-style: normal; color: var(--ink-soft); }

  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; position: sticky; top: 110px; }
  .stat {
    container-type: inline-size;
    display: grid; align-content: space-between; gap: 1.2rem; min-height: 220px;
    padding: 1.4rem; border-radius: var(--radius); border: 2px solid var(--ink);
    background: var(--bg); box-shadow: 0 6px 0 var(--ink);
    transition: translate .4s var(--ease-spring), rotate .4s var(--ease-spring);
  }
  .stat:nth-child(odd) { rotate: -1.5deg; } .stat:nth-child(even) { rotate: 1.5deg; translate: 0 24px; }
  .stat:hover { rotate: 0deg; translate: 0 -6px; }
  .stat--red { --bg: var(--red); color: var(--paper); }
  .stat--yellow { --bg: var(--yellow); }
  .stat--green { --bg: var(--green); color: var(--paper); }
  .stat--blue { --bg: var(--blue); }
  .stat__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 26cqi, 5rem); line-height: .9; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
  .stat__num sup { font-size: .45em; }
  .stat__label { font-weight: 600; line-height: 1.3; }

  .activities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: clamp(4rem, 8vw, 7rem); }
  .activity {
    padding: 1.6rem; border-radius: var(--radius); background: var(--paper);
    border: 1.5px solid var(--line); transition: border-color .3s, translate .4s var(--ease-out), box-shadow .4s;
  }
  .activity:hover { border-color: var(--ink); translate: 0 -6px; box-shadow: 0 14px 30px -18px oklch(20% 0.03 40 / .5); }
  .activity__icon { display: grid; place-items: center; width: 54px; height: 54px; font-size: 1.6rem; border-radius: 16px; background: var(--cream); margin-bottom: 1rem; }
  .activity h3 { font-size: 1.5rem; margin-bottom: .5rem; }
  .activity p { color: var(--ink-soft); font-size: .98rem; }

  @media (max-width: 980px) {
    .club__grid { grid-template-columns: 1fr; }
    .stats { position: static; }
    .activities { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) {
    .activities { grid-template-columns: 1fr; }
    .stat { min-height: 170px; }
  }

  /* ===== ROUTE (timeline horizontale pilotée au scroll) ===== */
  .route { height: 480vh; background: var(--bordeaux); color: var(--cream); view-timeline: --route block; }
  .route__sticky { position: sticky; top: 0; height: 100svh; overflow: clip; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); padding-block: 110px 40px; }
  .route .kicker { color: var(--yellow); }
  .route .h2 { margin-bottom: 0; }
  .route__track {
    --p: 0;
    display: flex; gap: clamp(1rem, 3vw, 2.5rem); width: max-content; align-items: center;
    padding-inline: var(--gutter) 30vw;
    translate: calc(var(--p) * (-100% + 100vw)) 0;
  }
  .stop {
    position: relative; width: clamp(270px, 32vw, 400px); padding: 2rem;
    border-radius: var(--radius); background: color-mix(in oklch, var(--cream) 8%, transparent);
    border: 1.5px solid color-mix(in oklch, var(--cream) 25%, transparent);
    backdrop-filter: blur(4px);
  }
  .stop:nth-child(3n+1) { rotate: -1.2deg; } .stop:nth-child(3n+2) { rotate: 1deg; translate: 0 30px; } .stop:nth-child(3n) { translate: 0 -20px; }
  .stop__date { display: inline-block; padding: .3em .9em; border-radius: 99px; background: var(--yellow); color: var(--ink); font-weight: 700; font-size: .85rem; margin-bottom: 1.2rem; }
  .stop h3 { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); margin-bottom: .7rem; }
  .stop p { color: color-mix(in oklch, var(--cream) 80%, transparent); }
  .stop--next { background: var(--cream); color: var(--ink); border-color: var(--cream); }
  .stop--next p { color: var(--ink-soft); margin-bottom: 1.2rem; }
  .stop--next .stop__date { background: var(--red); color: var(--paper); }

  .route__progress { position: relative; height: 70px; margin-inline: var(--gutter); container-type: inline-size; }
  .route__line { position: absolute; inset: auto 0 6px; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, color-mix(in oklch, var(--cream) 50%, transparent) 0 18px, transparent 18px 30px); }
  .route__mini {
    --p: 0;
    position: absolute; bottom: 0; left: 0; width: 120px;
    translate: calc(var(--p) * (100cqw - 120px)) 0;
    --car-body: var(--yellow); --car-fender: var(--yellow);
  }
  .route__mini .car__shadow { display: none; }
  .route__progress { max-width: 1240px; }
  @media (min-width: 1240px) { .route__progress { margin-inline: auto; width: calc(1240px - 2 * var(--gutter)); } }

  /* ===== ALBUM ===== */
  .album { background: var(--cream); }
  .photos {
    display: grid; grid-template-columns: repeat(3, 1fr); align-items: start;
    gap: clamp(1.2rem, 3vw, 2.4rem); margin-top: 3rem;
  }
  .photo--big, .photo--cta { grid-column: 1 / -1; }
  .photo--big { max-width: 1100px; justify-self: center; width: 100%; }
  .photo__btn {
    position: relative; display: grid; grid-template-rows: 1fr auto; width: 100%; height: 100%;
    padding: 10px 10px 0; border: 0; border-radius: 6px; background: var(--paper); cursor: zoom-in; text-align: left;
    box-shadow: 0 1px 0 oklch(20% 0.03 40 / .1), 0 18px 40px -22px oklch(20% 0.03 40 / .55);
    rotate: var(--r, -1.2deg);
    transition: rotate .5s var(--ease-spring), scale .5s var(--ease-spring), box-shadow .4s;
  }
  .photo:nth-child(2) .photo__btn { --r: 2deg; }
  .photo:nth-child(3) .photo__btn { --r: -2.2deg; }
  .photo:nth-child(4) .photo__btn { --r: .8deg; }
  .photo__btn:hover, .photo__btn:focus-visible { rotate: 0deg; scale: 1.025; box-shadow: 0 30px 60px -28px oklch(20% 0.03 40 / .6); }
  /* scotch */
  .photo__btn::before {
    content: ""; position: absolute; z-index: 1; top: -12px; left: 50%; width: 92px; height: 26px; translate: -50% 0; rotate: -3deg;
    background: color-mix(in oklch, var(--yellow) 55%, transparent); backdrop-filter: blur(1px);
  }
  .photo__btn img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
  .photo--big .photo__btn img { aspect-ratio: auto; }
  .photo--big .photo__btn { --r: -.6deg; }
  .photo__caption { padding: .55rem .3rem .7rem; font-family: var(--font-display); font-style: italic; font-size: clamp(.95rem, .9rem + .3vw, 1.15rem); font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--ink-soft); }
  .photo__cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.6rem; text-align: center; padding: 1.4rem 2rem;
    border: 2.5px dashed color-mix(in oklch, var(--ink) 35%, transparent); border-radius: var(--radius);
  }
  .photo__cta span { font-size: 2.2rem; }
  .photo__cta p { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; }
  @media (max-width: 860px) {
    .photos { grid-template-columns: 1fr 1fr; }
    .photo--wide { grid-column: 1 / -1; }
  }
  @media (max-width: 520px) { .photos { grid-template-columns: 1fr; } }

  /* Visionneuse (<dialog> natif) */
  .lightbox {
    max-width: min(1200px, 100vw - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 0; background: transparent; overflow: visible;
    opacity: 1; scale: 1;
    transition: opacity .3s, scale .45s var(--ease-spring), overlay .35s allow-discrete, display .35s allow-discrete;
  }
  .lightbox:not([open]) { opacity: 0; scale: .92; }
  @starting-style { .lightbox[open] { opacity: 0; scale: .92; } }
  .lightbox::backdrop { background: oklch(15% 0.02 40 / .82); backdrop-filter: blur(6px); transition: opacity .3s, overlay .35s allow-discrete, display .35s allow-discrete; }
  @starting-style { .lightbox[open]::backdrop { opacity: 0; } }
  .lightbox figure { background: var(--paper); padding: 12px 12px 0; border-radius: 8px; box-shadow: 0 40px 80px -30px #000; }
  .lightbox img { display: block; max-width: 100%; max-height: calc(100dvh - 140px); width: auto; height: auto; margin-inline: auto; border-radius: 3px; }
  .lightbox figcaption { padding: .8rem .4rem 1rem; font-family: var(--font-display); font-style: italic; font-size: 1.2rem; text-align: center; }
  .lightbox__close {
    position: absolute; top: -16px; right: -16px; z-index: 1; width: 44px; height: 44px; border-radius: 50%;
    border: 2px solid var(--ink); background: var(--yellow); font-weight: 800; box-shadow: 0 3px 0 var(--ink);
  }

  /* ===== GARAGE ===== */
  .garage { background: var(--paper); }
  .hero__car, .configurator { --car-body: url(#car-mosaic); --car-fender: url(#car-mosaic); --glow: #f06fa4; }
  .configurator {
    margin-block: 3.5rem; display: grid; grid-template-columns: 1.6fr 1fr; border-radius: calc(var(--radius) * 1.5);
    border: 2px solid var(--ink); overflow: clip; box-shadow: 10px 10px 0 var(--ink); background: var(--cream);
  }
  .configurator__stage {
    position: relative; display: grid; place-items: center; min-height: 380px; padding: 3rem 2rem;
    background:
      radial-gradient(60% 50% at 50% 40%, color-mix(in oklch, var(--glow) 30%, var(--paper)) 0%, transparent 70%),
      var(--cream);
    transition: background .6s;
  }
  .configurator__car { width: min(100%, 560px); position: relative; z-index: 1; view-transition-name: deuche; }
  .configurator__floor { position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, color-mix(in oklch, var(--ink) 8%, transparent)); }
  .configurator__panel { padding: clamp(1.5rem, 3vw, 2.6rem); border-left: 2px solid var(--ink); display: grid; align-content: center; gap: 1.2rem; background: var(--paper); }
  .configurator__panel h3 { font-size: 1.8rem; }
  .configurator__name { font-family: var(--font-display); font-style: italic; font-size: 2.6rem; line-height: 1; color: color-mix(in oklch, var(--glow) 80%, var(--ink)); view-transition-name: color-name; font-variation-settings: "SOFT" 100, "WONK" 1; }
  .swatches { display: flex; flex-wrap: wrap; gap: .7rem; }
  .swatch {
    width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--ink);
    background: conic-gradient(from 200deg, var(--a) 0 50%, var(--b) 50%);
    transition: scale .4s var(--ease-spring), box-shadow .3s;
  }
  .swatch--mosaic { background: conic-gradient(#f06fa4 0 16%, #f7d23e 0 33%, #4fa3e0 0 50%, #6cc26a 0 66%, #9b6fd6 0 83%, #f39a3b 0); }
  .swatch:hover { scale: 1.12; }
  .swatch[aria-checked="true"] { box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--ink); scale: 1.08; }
  @media (max-width: 860px) {
    .configurator { grid-template-columns: 1fr; }
    .configurator__panel { border-left: 0; border-top: 2px solid var(--ink); }
    .configurator__stage { min-height: 260px; }
  }

  .models { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
  .model__btn {
    width: 100%; height: 100%; text-align: left; display: grid; gap: .3rem; align-content: end;
    min-height: 260px; padding: 1.4rem; border-radius: var(--radius);
    border: 2px solid var(--ink); background: var(--c); color: var(--ink);
    position: relative; overflow: clip; box-shadow: 0 5px 0 var(--ink);
    transition: translate .4s var(--ease-spring), box-shadow .4s var(--ease-spring);
  }
  .model__btn::after { content: "+"; position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); font-weight: 700; transition: rotate .4s var(--ease-spring); }
  .model__btn:hover { translate: 0 -8px; box-shadow: 0 13px 0 var(--ink); }
  .model__btn:hover::after { rotate: 90deg; }
  .model__year { font-family: var(--font-display); font-size: 4.6rem; font-weight: 800; line-height: .8; letter-spacing: -.05em; opacity: .22; position: absolute; top: 1rem; left: 1rem; }
  .model__name { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; line-height: 1; }
  .model__tag { font-weight: 600; font-size: .92rem; opacity: .8; }
  @media (max-width: 1100px) { .models { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 640px) { .models { grid-template-columns: 1fr 1fr; } .model__btn { min-height: 190px; } .model__year { font-size: 3.2rem; } }

  /* Popovers */
  .pop {
    inset: auto; margin: auto; width: min(560px, 100% - 32px); max-height: calc(100dvh - 32px); overflow: auto;
    padding: clamp(1.6rem, 4vw, 2.6rem); border: 2px solid var(--ink); border-radius: calc(var(--radius) * 1.2);
    background: var(--paper); color: var(--ink); box-shadow: 12px 12px 0 var(--ink);
    position: fixed; top: 50%; left: 50%; translate: -50% -50%;
    opacity: 1; scale: 1;
    transition: opacity .35s, scale .5s var(--ease-spring), overlay .4s allow-discrete, display .4s allow-discrete;
  }
  .pop:not(:popover-open) { opacity: 0; scale: .85; }
  @starting-style { .pop:popover-open { opacity: 0; scale: .85; } }
  .pop::backdrop { background: oklch(20% 0.03 30 / .45); backdrop-filter: blur(5px); transition: opacity .35s, overlay .4s allow-discrete, display .4s allow-discrete; }
  @starting-style { .pop:popover-open::backdrop { opacity: 0; } }
  .pop__year { font-weight: 700; color: var(--red); letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; }
  .pop h3 { font-size: 2.4rem; margin: .4rem 0 1rem; }
  .pop p { color: var(--ink-soft); margin-bottom: 1.5rem; }
  .pop__close { padding: .55em 1.2em; border-radius: 99px; border: 2px solid var(--ink); background: var(--yellow); font-weight: 650; }

  /* ===== SÉGALA ===== */
  .segala { background: var(--forest); color: var(--cream); overflow: clip; }
  .segala .kicker { color: var(--yellow); }
  .segala .h2 em { color: var(--yellow); }
  .segala__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
  .segala__text p { margin-bottom: 1.1rem; color: color-mix(in oklch, var(--cream) 85%, transparent); max-width: 56ch; }
  .tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
  .tags li { padding: .4em 1em; border-radius: 99px; border: 1.5px solid color-mix(in oklch, var(--cream) 35%, transparent); font-size: .9rem; font-weight: 600; }
  .map { background: var(--cream); border-radius: calc(var(--radius) * 1.5); padding: 1rem; border: 2px solid var(--ink); box-shadow: 10px 10px 0 oklch(25% 0.05 140); rotate: 1.5deg; }
  .map__dept { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; transition: fill .4s; }
  .map__dept--lot { fill: oklch(86% 0.08 85); }
  .map__dept--cantal { fill: oklch(84% 0.06 140); }
  .map__dept--aveyron { fill: oklch(82% 0.07 55); }
  .map__dept:hover { fill: var(--yellow); }
  .map__river { fill: none; stroke: oklch(65% 0.1 230); stroke-width: 6; stroke-linecap: round; }
  .map__road { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 8 8; animation: dash 3s linear infinite; }
  @keyframes dash { to { stroke-dashoffset: -64; } }
  .map__label { font: 800 22px var(--font-display); fill: oklch(30% 0.03 40 / .55); letter-spacing: .12em; }
  .map__small { font: 600 14px var(--font-sans); fill: var(--ink); }
  .map__small--river { fill: oklch(45% 0.1 230); font-style: italic; }
  .map__town { fill: var(--ink); }
  .map__home { font: 700 italic 22px var(--font-display); fill: var(--ink); paint-order: stroke; stroke: var(--cream); stroke-width: 7px; stroke-linejoin: round; }
  .map__dot { fill: var(--red); stroke: var(--ink); stroke-width: 3; }
  .map__pulse { fill: var(--red); opacity: .3; transform-box: fill-box; transform-origin: center; animation: pulse 2s var(--ease-out) infinite; }
  @keyframes pulse { from { scale: .3; opacity: .6; } to { scale: 1.4; opacity: 0; } }
  @media (max-width: 900px) { .segala__grid { grid-template-columns: 1fr; } }

  /* ===== SAVIEZ-VOUS ===== */
  .savoir__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .faq { display: grid; gap: .8rem; }
  .faq details {
    border: 2px solid var(--ink); border-radius: var(--radius); background: var(--paper);
    transition: background-color .3s, box-shadow .3s;
  }
  .faq details[open] { background: var(--yellow); box-shadow: 6px 6px 0 var(--ink); }
  .faq summary {
    list-style: none; cursor: pointer; padding: 1.2rem 1.5rem; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
    font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 600;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); font-family: var(--font-sans); transition: rotate .4s var(--ease-spring); }
  .faq details[open] summary::after { rotate: 45deg; background: var(--paper); }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--ease-out), content-visibility .5s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
  .faq details p { padding: 0 1.5rem 1.4rem; max-width: 62ch; }
  @media (max-width: 900px) { .savoir__grid { grid-template-columns: 1fr; } }

  /* ===== REJOINDRE ===== */
  .join { background: var(--yellow); }
  .join .kicker { color: var(--bordeaux); }
  .join .h2 em { color: var(--bordeaux); }
  .join__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .join__intro > p { max-width: 50ch; margin-bottom: 2rem; }
  .coords { display: grid; gap: 1rem; }
  .coords div { display: grid; grid-template-columns: 100px 1fr; gap: 1rem; padding-bottom: 1rem; border-bottom: 1.5px solid color-mix(in oklch, var(--ink) 20%, transparent); }
  .coords dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; padding-top: .2em; }
  .coords dd { font-weight: 600; overflow-wrap: anywhere; }
  .form {
    display: grid; gap: 1.1rem; padding: clamp(1.4rem, 4vw, 2.6rem);
    background: var(--paper); border: 2px solid var(--ink); border-radius: calc(var(--radius) * 1.4); box-shadow: 10px 10px 0 var(--ink);
  }
  .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
  .form label { display: grid; gap: .4rem; font-weight: 650; font-size: .92rem; }
  .form input, .form select, .form textarea {
    width: 100%; padding: .85em 1em; border-radius: 14px; border: 2px solid var(--ink); background: var(--cream); font-weight: 450;
    transition: box-shadow .2s, background-color .2s; field-sizing: content;
  }
  .form textarea { min-height: 7lh; resize: vertical; }
  .form input:focus, .form select:focus, .form textarea:focus { outline: none; background: var(--paper); box-shadow: 0 0 0 4px color-mix(in oklch, var(--red) 35%, transparent); }
  .form input:user-invalid, .form textarea:user-invalid { border-color: var(--red); }
  .form .btn { justify-self: start; }
  .form__note { font-size: .82rem; color: var(--ink-soft); }
  .osm { margin-top: clamp(3rem, 6vw, 5rem); border: 2px solid var(--ink); border-radius: calc(var(--radius) * 1.4); overflow: clip; box-shadow: 10px 10px 0 var(--ink); }
  .osm iframe { width: 100%; height: clamp(280px, 40vw, 420px); border: 0; filter: sepia(.25) saturate(1.1); }
  @media (max-width: 900px) { .join__grid { grid-template-columns: 1fr; } }
  @media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } .coords div { grid-template-columns: 1fr; gap: .2rem; } }

  /* ===== FOOTER ===== */
  .footer { background: var(--ink); color: var(--cream); padding-bottom: 2rem; overflow: clip; }
  .footer__big {
    font-family: var(--font-display); font-weight: 800; font-style: italic; text-align: center;
    font-size: clamp(4rem, 20vw, 20rem); line-height: .9; letter-spacing: -.05em; padding-top: 2rem;
    background: linear-gradient(var(--red), var(--yellow)); -webkit-background-clip: text; background-clip: text; color: transparent;
    font-variation-settings: "SOFT" 100, "WONK" 1;
  }
  .footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 2rem; border-top: 1px solid color-mix(in oklch, var(--cream) 20%, transparent); font-size: .9rem; color: color-mix(in oklch, var(--cream) 70%, transparent); }
  .footer__top { color: var(--yellow); text-decoration: none; font-weight: 650; }
  .footer__credits { padding-top: 1.2rem; font-size: .78rem; line-height: 1.6; color: color-mix(in oklch, var(--cream) 50%, transparent); }
  .footer__credits a { color: color-mix(in oklch, var(--cream) 75%, transparent); }
  .footer__credits kbd { padding: .05em .45em; border: 1px solid currentColor; border-radius: 4px; font: inherit; }

  /* ===== MOTEUR ===== */
  .engine-led {
    width: 10px; height: 10px; border-radius: 50%; flex: none;
    background: oklch(55% 0.02 40); box-shadow: inset 0 0 0 1.5px oklch(20% 0.02 40 / .4);
    transition: background-color .3s, box-shadow .3s;
  }
  .btn--engine[aria-pressed="true"] { --bg: var(--ink); --fg: var(--paper); }
  .btn--engine[aria-pressed="true"]:hover { --bg: var(--red); }
  .btn--engine[aria-pressed="true"] .engine-led { background: oklch(78% 0.2 145); box-shadow: 0 0 10px oklch(78% 0.2 145); animation: led 1s ease-in-out infinite; }
  @keyframes led { 50% { opacity: .55; } }
  .hero__hint {
    height: 0; margin-top: -.4rem; /* ne prend pas de place : déborde sous les boutons */
    font-size: .9rem; font-weight: 600; color: var(--ink);
    opacity: 0; translate: 0 -6px; transition: opacity .4s, translate .4s var(--ease-out);
  }
  .engine-on .hero__hint { opacity: 1; translate: 0 0; }
  .hero__car[data-rev] { cursor: pointer; }
  .hero__car[data-rev]:focus-visible { outline-offset: 8px; border-radius: 24px; }
  /* moteur allumé : la deuche tremble au ralenti */
  .engine-on .car__chassis { animation: idle-shake .11s linear infinite; }
  @keyframes idle-shake { 0%,100% { translate: 0 0; } 25% { translate: .6px -1.6px; } 50% { translate: 0 .4px; } 75% { translate: -.6px -1px; } }
  .configurator__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
}

/* ---------- Mouvement ---------- */
@layer motion {
  /* Intro du titre */
  .hero__title .line > span { animation: rise 1.1s var(--ease-out) both; }
  .hero__title .line:nth-child(2) > span { animation-delay: .12s; }
  .hero__text > .eyebrow, .hero__lead, .hero__cta { animation: fade-up 1s var(--ease-out) both; }
  .hero__lead { animation-delay: .3s; } .hero__cta { animation-delay: .42s; }
  .hero__car { animation: drive-in 1.6s var(--ease-out) both .2s; }
  @keyframes rise { from { translate: 0 110%; rotate: 4deg; } }
  @keyframes fade-up { from { opacity: 0; translate: 0 24px; } }
  @keyframes drive-in { from { translate: -260% 0; } }

  /* Révélations : fallback JS (classe .is-in) */
  .js .reveal { opacity: 0; translate: 0 40px; transition: opacity .9s var(--ease-out), translate .9s var(--ease-out); }
  .js .reveal.is-in { opacity: 1; translate: 0 0; }

  @supports (animation-timeline: view()) {
    /* Révélations natives pilotées au scroll */
    .js .reveal, .js .reveal.is-in {
      opacity: 1; translate: none; transition: none;
      animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 80%;
    }
    @keyframes reveal { from { opacity: 0; translate: 0 50px; scale: .97; } }

    /* Parallaxe du paysage */
    .layer--sun  { animation: par-sun  linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .layer--far  { animation: par-far  linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .layer--mid  { animation: par-mid  linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .hero__text  { animation: par-text linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    @keyframes par-sun  { to { translate: 0 160px; } }
    @keyframes par-far  { to { translate: 0 90px; } }
    @keyframes par-mid  { to { translate: 0 40px; } }
    @keyframes par-text { to { translate: 0 -120px; opacity: 0; } }

    /* Timeline horizontale */
    .route__track, .route__mini { animation: route-p linear both; animation-timeline: --route; animation-range: contain 0% contain 100%; }
    @keyframes route-p { from { --p: 0; } to { --p: 1; } }

    /* Barre de progression de lecture */
    body::before {
      content: ""; position: fixed; inset: 0 0 auto; height: 4px; z-index: 60; transform-origin: left;
      background: linear-gradient(90deg, var(--red), var(--yellow));
      animation: progress linear both; animation-timeline: scroll(root);
    }
    @keyframes progress { from { scale: 0 1; } }
  }

  /* Nav compacte via scroll-state container query (Chrome 133+), sinon .is-scrolled en JS */
  @container scroll-state(scrollable: top) {
    .nav {
      background: color-mix(in oklch, var(--paper) 78%, transparent);
      backdrop-filter: blur(14px) saturate(1.4);
      border-color: var(--line);
    }
  }

  /* View Transitions (changement de couleur) */
  ::view-transition-old(deuche) { animation: vt-out .45s var(--ease-out) both; }
  ::view-transition-new(deuche) { animation: vt-in .7s var(--ease-spring) both; }
  @keyframes vt-out { to { opacity: 0; translate: 40px 0; filter: blur(6px); } }
  @keyframes vt-in  { from { opacity: 0; translate: -60px 0; filter: blur(6px); } }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .js .reveal { opacity: 1; translate: none; }
  }
}