/*
Theme Name: Fresh Clean Auto
Description: Theme sur-mesure pour freshcleanauto.fr — Nettoyage auto a domicile, Arles
Version: 2.0
Author: Fresh Clean Auto
*/
/* ========== TOKENS ========== */
    :root {
      --r-sm: 8px;
      --r-md: 14px;
      --r-lg: 22px;
      --r-xl: 32px;
      --section-py: clamp(80px, 9vw, 140px);
      --container: 1200px;
      --gutter: clamp(20px, 4vw, 56px);
      --title-1: clamp(48px, 9vw, 128px);
      --title-2: clamp(36px, 6vw, 80px);
      --title-3: clamp(26px, 3vw, 40px);
      --eye: 11px;
      --hairline: 1px;
    }

    [data-density="tight"] {
      --section-py: clamp(56px, 6vw, 96px);
      --title-1: clamp(40px, 7vw, 100px);
      --title-2: clamp(30px, 5vw, 64px);
    }

    /* ========== ATELIER ========== */
    [data-theme="atelier"] {
      --bg: #efe7d7;
      --bg-2: #e8dec9;
      --surface: #ffffff;
      --surface-inv: #1a1410;
      --ink: #1a1410;
      --ink-2: #4a3f36;
      --ink-3: #8a7d70;
      --line: rgba(26, 20, 16, .14);
      --line-2: rgba(26, 20, 16, .08);
      --accent: #c4541d;
      --accent-2: #1a1410;
      --accent-soft: rgba(196, 84, 29, .1);
      --on-accent: #f7efe3;
      --shadow-sm: 0 1px 0 rgba(26, 20, 16, .04), 0 4px 14px rgba(26, 20, 16, .04);
      --shadow-lg: 0 1px 0 rgba(26, 20, 16, .04), 0 24px 48px rgba(26, 20, 16, .08);
      --hair: rgba(26, 20, 16, .14);
      --serif: 'Fraunces', 'Times New Roman', serif;
      --display: 'Fraunces', 'Times New Roman', serif;
      --body: 'Inter', system-ui, sans-serif;
      --mono: 'Syne', system-ui, sans-serif;
    }

    /* ========== AQUA ========== */
    [data-theme="aqua"] {
      --bg: #0a161b;
      --bg-2: #0f1f26;
      --surface: #142530;
      --surface-inv: #f0f4f5;
      --ink: #f0f4f5;
      --ink-2: rgba(240, 244, 245, .65);
      --ink-3: rgba(240, 244, 245, .4);
      --line: rgba(240, 244, 245, .12);
      --line-2: rgba(240, 244, 245, .06);
      --accent: #10afcf;
      --accent-2: #f0f4f5;
      --accent-soft: rgba(16, 175, 207, .12);
      --on-accent: #0a161b;
      --shadow-sm: 0 1px 0 rgba(0, 0, 0, .2), 0 4px 14px rgba(0, 0, 0, .25);
      --shadow-lg: 0 1px 0 rgba(0, 0, 0, .25), 0 24px 60px rgba(0, 0, 0, .4);
      --hair: rgba(240, 244, 245, .12);
      --display: 'Syne', system-ui, sans-serif;
      --serif: 'Syne', system-ui, sans-serif;
      --body: 'Inter', system-ui, sans-serif;
      --mono: 'Syne', system-ui, sans-serif;
    }

    [data-heading="syne"] {
      --display: 'Syne', system-ui, sans-serif;
      --serif: 'Syne', system-ui, sans-serif;
    }

    [data-heading="fraunces"] {
      --display: 'Fraunces', serif;
      --serif: 'Fraunces', serif;
    }

    [data-heading="space"] {
      --display: 'Space Grotesk', system-ui, sans-serif;
      --serif: 'Space Grotesk', system-ui, sans-serif;
    }

    /* ========== Base ========== */
    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      overflow-x: hidden;
    }

    body {
      margin: 0;
      overflow-x: hidden;
      font-family: var(--body);
      background: var(--bg);
      color: var(--ink);
      font-feature-settings: "ss01", "cv11";
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      transition: background .4s ease, color .4s ease;
    }

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

    a {
      color: inherit;
      text-decoration: none;
    }

    button {
      font: inherit;
      cursor: pointer;
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: var(--display);
      letter-spacing: -.025em;
      line-height: .98;
      margin: 0;
    }

    [data-theme="atelier"] h1,
    [data-theme="atelier"] h2 {
      font-variation-settings: "opsz" 144, "SOFT" 50;
      font-weight: 500;
    }

    [data-theme="aqua"] h1,
    [data-theme="aqua"] h2 {
      font-weight: 700;
    }

    body[data-grain-on]::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      opacity: .05;
      pointer-events: none;
      mix-blend-mode: multiply;
      z-index: 9997;
    }

    [data-theme="aqua"] body[data-grain-on]::before {
      mix-blend-mode: screen;
      opacity: .035;
    }

    /* ========== Layout ========== */
    .container {
      max-width: var(--container);
      margin: 0 auto;
      padding-inline: var(--gutter);
    }

    .container-wide {
      max-width: 1440px;
      margin: 0 auto;
      padding-inline: var(--gutter);
    }

    section {
      padding-block: var(--section-py);
    }

    .eye {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      font-family: var(--display);
      font-size: var(--eye);
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ink-3);
      font-weight: 500;
    }

    .eye::before {
      content: '';
      display: inline-block;
      width: 14px;
      height: 1px;
      background: currentColor;
    }

    .eye.no-bullet::before {
      display: none;
    }

    /* ========== Buttons ========== */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 16px 28px;
      border-radius: 999px;
      font-family: var(--body);
      font-weight: 600;
      font-size: 15px;
      letter-spacing: .005em;
      transition: transform .25s ease, background .2s, color .2s, border-color .2s;
      border: var(--hairline) solid transparent;
      cursor: pointer;
      white-space: nowrap;
    }

    @keyframes btn-shimmer {
      0% {
        background-position: -200% center
      }

      60% {
        background-position: 200% center
      }

      100% {
        background-position: 200% center
      }
    }

    @keyframes btn-ring {

      0%,
      100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent)
      }

      60% {
        box-shadow: 0 0 0 14px transparent
      }
    }

    @keyframes arrow-bounce {

      0%,
      100% {
        transform: translateX(0)
      }

      50% {
        transform: translateX(5px)
      }
    }

    .btn-primary {
      background: linear-gradient(105deg, var(--accent) 35%, color-mix(in srgb, var(--accent) 55%, #fff) 50%, var(--accent) 65%);
      background-size: 300% 100%;
      color: var(--on-accent);
      position: relative;
      animation: btn-shimmer 3s ease-in-out infinite, btn-ring 2.8s 1.4s ease-out infinite
    }

    @media (max-width: 1024px) {
      .btn-primary { animation: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .btn-primary { animation: none; }
    }

    .btn-primary:hover {
      transform: translateY(-2px)
    }

    .btn-ghost {
      background: transparent;
      color: var(--ink);
      border-color: var(--line);
    }

    .btn-ghost:hover {
      border-color: var(--ink);
    }

    .btn-inv {
      background: var(--ink);
      color: var(--bg);
    }

    .btn-inv:hover {
      transform: translateY(-2px);
    }

    .btn-sm {
      padding: 10px 18px;
      font-size: 13px;
    }

    .btn .arrow {
      display: inline-block;
      transition: transform .25s ease;
    }

    .btn:hover .arrow {
      transform: translateX(4px);
    }

    .btn-primary .arrow {
      animation: arrow-bounce 1.4s ease-in-out infinite
    }

    .btn-primary:hover .arrow {
      animation: none;
      transform: translateX(4px)
    }

    /* ========== NAV ========== */
    .nav {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 80;
      padding: 16px var(--gutter);
      transition: background .3s, backdrop-filter .3s, border-color .3s;
      border-bottom: var(--hairline) solid transparent;
    }

    .nav.scrolled {
      background: color-mix(in srgb, var(--bg) 85%, transparent);
      backdrop-filter: blur(18px) saturate(1.2);
      -webkit-backdrop-filter: blur(18px) saturate(1.2);
      border-bottom-color: var(--line-2);
    }

    .nav-inner {
      max-width: 1440px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: var(--display);
      font-weight: 700;
      font-size: 17px;
      letter-spacing: -.02em;
    }

    .logo-mark {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--ink);
      color: var(--bg);
      display: grid;
      place-items: center;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: -.02em;
    }

    [data-theme="aqua"] .logo-mark {
      background: var(--accent);
      color: var(--on-accent);
    }

    @font-face {
      font-family: 'Horizon';
      src: url('elements/Horizon-Font/Horizon.woff2') format('woff2'), url('elements/Horizon-Font/Horizon.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    @keyframes logo-sweep {
      0% {
        background-position: -200% center
      }

      60% {
        background-position: 200% center
      }

      100% {
        background-position: 200% center
      }
    }

    .logo-text {
      font-family: 'Horizon', var(--display);
      font-size: 13px;
      font-weight: 400;
      letter-spacing: -0.025em;
      text-transform: uppercase;
      display: inline-block;
      background: linear-gradient(90deg, var(--ink) 20%, #fff 50%, var(--ink) 80%);
      background-size: 300% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 45%, transparent));
      animation: logo-sweep 6s ease-in-out infinite
    }

    .logo-clean {
      background: linear-gradient(90deg, var(--accent) 20%, color-mix(in srgb, var(--accent) 30%, #fff) 50%, var(--accent) 80%);
      background-size: 300% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: logo-sweep 6s ease-in-out infinite
    }

    .nav-links {
      display: flex;
      gap: 28px;
      list-style: none;
      padding: 0;
      margin: 0;
      font-size: 14px;
      color: var(--ink-2);
      font-weight: 500;
    }

    .nav-links a:hover {
      color: var(--ink);
    }

    @media (max-width:880px) {

      .nav-links,
      .nav .ph-link {
        display: none;
      }
    }

    /* ========== HERO ========== */
    .hero {
      min-height: 100vh;
      display: flex;
      align-items: flex-end;
      padding-top: 110px;
      padding-bottom: 60px;
      position: relative;
      overflow: hidden;
    }

    [data-theme="atelier"] .hero,
    [data-theme="aqua"] .hero {
      background: var(--bg);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: clamp(40px, 6vw, 90px);
      align-items: end;
      width: 100%;
    }

    @media (min-width:980px) {
      .hero-grid {
        grid-template-columns: 1.2fr 1fr;
      }
    }

    .hero-title {
      font-size: var(--title-1);
      letter-spacing: -.04em;
      line-height: .9;
    }

    [data-theme="atelier"] .hero-title em {
      font-style: italic;
      color: var(--accent);
      font-weight: 400;
    }

    [data-theme="aqua"] .hero-title em {
      font-style: normal;
      color: var(--accent);
      font-weight: 700;
    }

    .hero-sub {
      max-width: 480px;
      color: var(--ink-2);
      font-size: clamp(16px, 1.4vw, 20px);
      line-height: 1.55;
      margin-top: 32px;
    }

    .hero-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 36px;
    }

    .hero-aside {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .hero-photo {
      aspect-ratio: 4/5;
      border-radius: var(--r-lg);
      overflow: hidden;
      position: relative;
      background: var(--bg-2);
      border: var(--hairline) solid var(--line);
    }

    .hero-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hero-meta {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border: var(--hairline) solid var(--line);
      border-radius: var(--r-md);
      overflow: hidden;
      background: var(--surface);
    }

    .hero-meta-cell {
      padding: 18px 16px;
      border-right: var(--hairline) solid var(--line);
    }

    .hero-meta-cell:last-child {
      border-right: none;
    }

    .hero-meta-num {
      font-family: var(--display);
      font-size: 28px;
      font-weight: 700;
      color: var(--accent);
      letter-spacing: -.02em;
    }

    [data-theme="atelier"] .hero-meta-num {
      color: var(--ink);
    }

    .hero-meta-lbl {
      font-family: var(--mono);
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .14em;
      color: var(--ink-3);
      margin-top: 4px;
    }

    /* Marquee */
    .marquee {
      border-block: var(--hairline) solid var(--line);
      overflow: hidden;
      padding-block: 18px;
      background: var(--bg);
      width: 100%;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
    }

    .marquee-track {
      display: flex;
      gap: 64px;
      white-space: nowrap;
      will-change: transform;
      animation: marq 38s linear infinite;
      font-family: var(--display);
      font-size: 22px;
      letter-spacing: -.02em;
      color: var(--ink-2);
    }

    .marquee-track>span {
      display: inline-flex;
      align-items: center;
      gap: 64px;
    }

    .marquee-track svg {
      color: var(--accent);
    }

    @keyframes marq {
      from {
        transform: translateX(0)
      }

      to {
        transform: translateX(-50%)
      }
    }

    /* ========== Partners marquee ========== */
    .partners-marquee {
      padding-block: 28px;
    }

    .partners-marquee .marquee-track {
      gap: 0;
      font-size: 0;
      animation-duration: 40s;
    }

    .partners-marquee .marquee-track > span {
      display: inline-flex;
      align-items: center;
      gap: 20px;
      padding-inline: 10px;
    }

    .partner-card {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 160px;
      height: 90px;
      background: #fff;
      border: 1.5px solid #e4e4e4;
      border-radius: 10px;
      flex-shrink: 0;
      transition: border-color .25s, box-shadow .25s;
    }

    .partner-card:hover {
      border-color: var(--accent);
      box-shadow: 0 4px 18px rgba(0,0,0,.10);
    }

    .partner-card img {
      max-width: 120px;
      max-height: 58px;
      width: auto;
      height: auto;
      object-fit: contain;
      filter: grayscale(1);
      opacity: 0.55;
      transition: filter .25s, opacity .25s;
    }

    .partner-card:hover img {
      filter: grayscale(0);
      opacity: 1;
    }

    /* ========== Image placeholder (fallback) ========== */
    .img-ph {
      position: relative;
      width: 100%;
      height: 100%;
      background: repeating-linear-gradient(135deg, var(--bg-2) 0 12px, transparent 12px 24px), var(--surface);
      display: grid;
      place-items: center;
    }

    [data-theme="aqua"] .img-ph {
      background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 12px, transparent 12px 24px), var(--surface);
    }

    .img-ph-lbl {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ink-3);
      background: var(--bg);
      border: var(--hairline) solid var(--line);
      padding: 6px 10px;
      border-radius: 4px;
    }

    /* ========== Section header ========== */
    .sec-head {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      margin-bottom: clamp(40px, 5vw, 72px);
    }

    @media (min-width:880px) {
      .sec-head {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        align-items: end;
        gap: 64px;
      }
    }

    .sec-title {
      font-size: var(--title-2);
      letter-spacing: -.03em;
      line-height: .92;
    }

    [data-theme="atelier"] .sec-title em {
      font-style: italic;
      font-weight: 400;
      color: var(--accent);
    }

    [data-theme="aqua"] .sec-title em {
      font-style: normal;
      color: var(--accent);
    }

    .sec-lede {
      color: var(--ink-2);
      font-size: 17px;
      line-height: 1.55;
      max-width: 520px;
    }

    /* ========== Promise Strip ========== */
    .promise {
      background: var(--surface-inv);
      color: var(--bg);
    }

    .promise .container {
      padding-block: clamp(60px, 6vw, 90px);
    }

    .promise-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 0;
      border-top: var(--hairline) solid rgba(255, 255, 255, .1);
      border-bottom: var(--hairline) solid rgba(255, 255, 255, .1);
    }

    .promise-cell {
      padding: 32px 24px;
      border-right: var(--hairline) solid rgba(255, 255, 255, .1);
    }

    .promise-cell:last-child {
      border-right: none;
    }

    .promise-num {
      font-family: var(--display);
      font-size: 56px;
      font-weight: 600;
      color: var(--accent);
      line-height: 1;
      letter-spacing: -.03em;
    }

    [data-theme="atelier"] .promise-num em {
      font-style: italic;
      font-weight: 400;
    }

    .promise-lbl {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .5);
      margin-top: 12px;
    }

    .promise-txt {
      margin-top: 14px;
      font-size: 14px;
      color: rgba(255, 255, 255, .75);
      line-height: 1.5;
    }

    .promise-head {
      padding-block: 16px 32px;
    }

    .promise-head h2 {
      font-size: var(--title-3);
      max-width: 720px;
    }

    /* ========== Before/After ========== */
    .ba-slider {
      position: relative;
      overflow: hidden;
      border-radius: var(--r-lg);
      cursor: col-resize;
      user-select: none;
      aspect-ratio: 4/3;
      background: var(--bg-2);
      border: var(--hairline) solid var(--line);
    }

    .ba-before {
      position: absolute;
      inset: 0;
      overflow: hidden;
      width: 50%;
    }

    .ba-after,
    .ba-before-inner {
      position: absolute;
      inset: 0;
    }

    .ba-after img,
    .ba-before-inner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .ba-handle {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--accent);
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      pointer-events: none;
    }

    [data-glow="on"] .ba-handle {
      box-shadow: 0 0 14px var(--accent);
    }

    .ba-circle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 48px;
      height: 48px;
      background: var(--accent);
      color: var(--on-accent);
      border-radius: 50%;
      display: grid;
      place-items: center;
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
    }

    .ba-tag {
      position: absolute;
      bottom: 14px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      padding: 6px 10px;
      border-radius: 4px;
    }

    .ba-tag.before {
      left: 14px;
      background: rgba(0, 0, 0, .7);
      color: #fff;
    }

    .ba-tag.after {
      right: 14px;
      background: var(--accent);
      color: var(--on-accent);
    }

    /* ========== Cards ========== */
    .card {
      background: var(--surface);
      border: var(--hairline) solid var(--line);
      border-radius: var(--r-lg);
      padding: 28px;
      transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .25s, box-shadow .25s;
    }

    .card:hover {
      transform: translateY(-4px);
      border-color: var(--ink-3);
      box-shadow: var(--shadow-lg);
    }

    /* ========== Reviews ========== */
    .reviews-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 18px;
    }

    .reviews-carousel {
      position: relative;
      min-height: 300px;
    }

    .reviews-carousel .card {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: translateX(64px) scale(0.95);
      transition: opacity .5s ease-in-out, transform .5s ease-in-out;
      pointer-events: none;
    }

    .reviews-carousel .card.rev-active {
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }

    .reviews-carousel .card.rev-active:hover {
      transform: translateY(-4px);
    }

    .rev-dots {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-top: 24px;
    }

    .rev-dot {
      height: 10px;
      border-radius: 999px;
      background: var(--line);
      border: none;
      cursor: pointer;
      padding: 0;
      transition: width .3s ease, background .3s ease;
    }

    .rev-dot.active {
      width: 36px;
      background: var(--accent);
    }

    .rev-dot:not(.active) {
      width: 10px;
    }

    .review-quote {
      font-family: var(--display);
      font-size: 22px;
      line-height: 1.3;
      letter-spacing: -.015em;
      color: var(--ink);
      margin-bottom: 24px;
    }

    [data-theme="atelier"] .review-quote {
      font-weight: 400;
    }

    .review-stars {
      color: var(--accent);
      font-size: 14px;
      letter-spacing: 2px;
      margin-bottom: 18px;
    }

    .review-author {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-top: 18px;
      border-top: var(--hairline) solid var(--line);
    }

    .review-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--accent-soft);
      color: var(--accent);
      display: grid;
      place-items: center;
      font-weight: 600;
      font-size: 14px;
    }

    .review-name {
      font-weight: 600;
      font-size: 14px;
    }

    .review-meta {
      color: var(--ink-3);
      font-size: 12px;
      font-family: var(--mono);
    }

    /* ========== Process ========== */
    .process {
      display: grid;
      gap: 0;
    }

    .process-step {
      display: grid;
      grid-template-columns: 80px 1fr auto;
      gap: 32px;
      align-items: baseline;
      padding-block: 32px;
      border-top: var(--hairline) solid var(--line);
      transition: background .2s;
    }

    .process-step:last-child {
      border-bottom: var(--hairline) solid var(--line);
    }

    .process-step:hover {
      background: var(--bg-2);
    }

    .process-step:hover .process-num {
      color: var(--accent);
    }

    .process-num {
      font-family: var(--display);
      font-size: 48px;
      font-weight: 500;
      color: var(--ink-3);
      letter-spacing: -.03em;
      line-height: 1;
      transition: color .2s;
    }

    .process-body h3 {
      font-size: clamp(22px, 2.4vw, 32px);
      letter-spacing: -.02em;
      margin-bottom: 8px;
    }

    .process-body p {
      color: var(--ink-2);
      font-size: 15px;
      line-height: 1.55;
      margin: 0;
      max-width: 520px;
    }

    .process-time {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--ink-3);
      letter-spacing: .12em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    @media (max-width:720px) {
      .process-step {
        grid-template-columns: 56px 1fr
      }

      .process-num {
        font-size: 32px
      }

      .process-time {
        grid-column: 2
      }
    }

    /* ========== Formules ========== */
    .vehicle-select-mobile { display: none !important; }

    .vehicle-tabs {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 4px;
      padding: 5px;
      background: var(--surface);
      border: var(--hairline) solid var(--line);
      border-radius: 999px;
      margin-bottom: 40px;
    }

    .vehicle-tab {
      padding: 10px 18px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 500;
      color: var(--ink-2);
      background: transparent;
      border: none;
      transition: background .2s, color .2s;
    }

    .vehicle-tab.active {
      background: var(--ink);
      color: var(--bg);
    }

    [data-theme="aqua"] .vehicle-tab.active {
      background: var(--accent);
      color: var(--on-accent);
    }

    .formules-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 16px;
    }

    .formula {
      background: var(--surface);
      border: var(--hairline) solid var(--line);
      border-radius: var(--r-lg);
      padding: 32px;
      display: flex;
      flex-direction: column;
      position: relative;
      transition: border-color .25s, transform .35s;
    }

    .formula:hover {
      transform: translateY(-3px);
      border-color: var(--ink-3);
    }

    /* ========== GlowCard ========== */
    .formula[data-glow] {
      --gw-base: 192;
      --gw-spread: 15;
      --gw-spot: 300px;
      --gw-hue: calc(var(--gw-base) + (var(--gw-xp, 0) * var(--gw-spread)));
      background-image: radial-gradient(var(--gw-spot) var(--gw-spot) at calc(var(--gw-x, -9999) * 1px) calc(var(--gw-y, -9999) * 1px), hsl(var(--gw-hue) 76% 56% / .1), transparent);
      background-color: var(--surface);
      background-attachment: fixed;
      background-size: calc(100% + 2px) calc(100% + 2px);
      background-position: 50% 50%;
      border-color: rgba(240, 244, 245, .06);
    }

    .formula.featured[data-glow] {
      border-color: rgba(16, 175, 207, .25);
    }

    .formula[data-glow]::before,
    .formula[data-glow]::after {
      pointer-events: none;
      content: "";
      position: absolute;
      inset: -1px;
      border: 1px solid transparent;
      border-radius: var(--r-lg);
      background-attachment: fixed;
      background-size: calc(100% + 2px) calc(100% + 2px);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
      mask-clip: padding-box, border-box;
      mask-composite: intersect;
      -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
      -webkit-mask-clip: padding-box, border-box;
      -webkit-mask-composite: destination-in;
    }

    .formula[data-glow]::before {
      background-image: radial-gradient(calc(var(--gw-spot) * .75) calc(var(--gw-spot) * .75) at calc(var(--gw-x, -9999) * 1px) calc(var(--gw-y, -9999) * 1px), hsl(var(--gw-hue) 76% 50% / 1), transparent 100%);
      filter: brightness(2);
    }

    .formula[data-glow]::after {
      background-image: radial-gradient(calc(var(--gw-spot) * .5) calc(var(--gw-spot) * .5) at calc(var(--gw-x, -9999) * 1px) calc(var(--gw-y, -9999) * 1px), hsl(0 100% 100% / .7), transparent 100%);
    }

    .formula.featured {
      background: var(--surface-inv);
      color: var(--bg);
      border-color: var(--ink);
    }

    [data-theme="aqua"] .formula.featured {
      background: var(--surface);
      border-color: var(--accent);
    }

    .formula.featured .form-name,
    .formula.featured .form-tag,
    .formula.featured .form-price,
    .formula.featured .form-list,
    .formula.featured .form-list li {
      color: var(--bg);
    }

    [data-theme="aqua"] .formula.featured .form-name,
    [data-theme="aqua"] .formula.featured .form-tag,
    [data-theme="aqua"] .formula.featured .form-list,
    [data-theme="aqua"] .formula.featured .form-list li {
      color: var(--ink);
    }

    .formula.featured .form-tag-row,
    .formula.featured .form-price-cents,
    .formula.featured .form-sub {
      color: rgba(255, 255, 255, .65);
    }

    [data-theme="aqua"] .formula.featured .form-tag-row,
    [data-theme="aqua"] .formula.featured .form-price-cents,
    [data-theme="aqua"] .formula.featured .form-sub {
      color: var(--ink-2);
    }

    .form-popular-pill {
      position: absolute;
      top: -1px;
      right: 24px;
      transform: translateY(-50%);
      background: var(--accent);
      color: var(--on-accent);
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      padding: 6px 12px;
      border-radius: 999px;
      font-weight: 600;
    }

    .form-tag-row {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-bottom: 14px;
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .form-name {
      font-family: var(--display);
      font-size: 36px;
      letter-spacing: -.02em;
      font-weight: 600;
      margin-bottom: 6px;
    }

    [data-theme="atelier"] .form-name {
      font-style: italic;
      font-weight: 500;
    }

    .form-sub {
      color: var(--ink-2);
      font-size: 14px;
      margin-bottom: 24px;
    }

    .form-price {
      font-family: var(--display);
      font-size: 56px;
      font-weight: 600;
      letter-spacing: -.03em;
      line-height: 1;
      color: var(--ink);
    }

    .form-price-cents {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--ink-3);
      margin-top: 6px;
    }

    .form-list {
      list-style: none;
      padding: 0;
      margin: 28px 0;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .form-list li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      font-size: 14px;
      line-height: 1.5;
      color: var(--ink-2);
    }

    .form-list li::before {
      content: '';
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      margin-top: 4px;
      background: var(--accent-soft);
      border-radius: 50%;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4541d' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
      background-size: 12px;
      background-position: center;
      background-repeat: no-repeat;
    }

    [data-theme="aqua"] .form-list li::before {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310afcf' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
      background-color: rgba(16, 175, 207, .15);
    }

    .options-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 12px;
      margin-top: 24px;
      padding-top: 32px;
      border-top: var(--hairline) solid var(--line);
    }

    .option-card {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
      background: var(--surface);
      border: var(--hairline) solid var(--line);
      border-radius: var(--r-md);
    }

    .option-plus {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--accent-soft);
      color: var(--accent);
      display: grid;
      place-items: center;
      font-weight: 700;
      flex-shrink: 0;
    }

    .option-name {
      font-weight: 600;
      font-size: 14px;
    }

    .option-desc {
      color: var(--ink-3);
      font-size: 12px;
      margin-top: 2px;
    }

    .option-price {
      margin-left: auto;
      font-family: var(--mono);
      font-weight: 600;
      color: var(--accent);
    }

    /* ========== Quiz ========== */
    .quiz-card {
      background: var(--surface);
      border: var(--hairline) solid var(--line);
      border-radius: var(--r-xl);
      padding: clamp(32px, 4vw, 56px);
    }

    .quiz-progress {
      height: 2px;
      background: var(--line);
      border-radius: 999px;
      overflow: hidden;
      margin-bottom: 12px;
    }

    .quiz-progress>div {
      height: 100%;
      background: var(--accent);
      transition: width .5s cubic-bezier(.16, 1, .3, 1);
    }

    .quiz-step-lbl {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-bottom: 32px;
      display: flex;
      justify-content: space-between;
    }

    .quiz-q {
      font-family: var(--display);
      font-size: clamp(24px, 3vw, 36px);
      letter-spacing: -.02em;
      margin-bottom: 28px;
      line-height: 1.1;
    }

    [data-theme="atelier"] .quiz-q {
      font-style: italic;
      font-weight: 500;
    }

    .quiz-options {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .quiz-option {
      padding: 18px 20px;
      border: var(--hairline) solid var(--line);
      border-radius: var(--r-md);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 16px;
      transition: border-color .2s, background .2s, transform .2s;
    }

    .quiz-option:hover {
      border-color: var(--ink-3);
      background: var(--bg-2);
      transform: translateX(3px);
    }

    .quiz-option.selected {
      border-color: var(--accent);
      background: var(--accent-soft);
    }

    .quiz-option-glyph {
      width: 40px;
      height: 40px;
      border-radius: var(--r-sm);
      background: var(--bg-2);
      color: var(--ink);
      display: grid;
      place-items: center;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .08em;
      flex-shrink: 0;
      font-weight: 600;
    }

    .quiz-option-body {
      flex: 1;
    }

    .quiz-option-name {
      font-weight: 600;
      font-size: 15px;
    }

    .quiz-option-desc {
      color: var(--ink-3);
      font-size: 13px;
      margin-top: 2px;
    }

    .quiz-option-flag {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--accent);
      margin-top: 4px;
    }

    .quiz-result {
      text-align: center;
      padding: 16px 0;
    }

    .quiz-result-eye {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--ink-3);
    }

    .quiz-result-formula {
      font-family: var(--display);
      font-size: clamp(40px, 6vw, 72px);
      letter-spacing: -.03em;
      color: var(--accent);
      line-height: 1;
      margin: 12px 0;
    }

    [data-theme="atelier"] .quiz-result-formula {
      font-style: italic;
      font-weight: 500;
    }

    .quiz-result-price {
      font-family: var(--display);
      font-size: 56px;
      font-weight: 700;
      letter-spacing: -.03em;
      line-height: 1;
      margin: 16px 0 6px;
    }

    /* ========== Reservation form ========== */
    .rf-shell {
      background: var(--surface);
      border: var(--hairline) solid var(--line);
      border-radius: var(--r-xl);
      padding: clamp(28px, 4vw, 48px);
    }

    .rf-bar {
      height: 2px;
      background: var(--line);
      border-radius: 999px;
      overflow: hidden;
    }

    .rf-bar>div {
      height: 100%;
      background: var(--accent);
      transition: width .5s;
    }

    .rf-step-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      margin-bottom: 12px;
      color: var(--ink-3);
    }

    .rf-step-name {
      color: var(--accent);
      font-weight: 600;
    }

    .rf-dots {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 24px;
      margin-bottom: 36px;
    }

    .rf-dot {
      flex: 1;
      height: 4px;
      background: var(--line);
      border-radius: 2px;
      position: relative;
    }

    .rf-dot.done {
      background: var(--accent);
    }

    .rf-dot.current {
      background: var(--accent);
    }

    .rf-dot.current::after {
      content: '';
      position: absolute;
      top: -3px;
      right: -2px;
      width: 10px;
      height: 10px;
      background: var(--accent);
      border-radius: 50%;
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
    }

    .rf-h {
      font-family: var(--display);
      font-size: clamp(22px, 2.6vw, 32px);
      letter-spacing: -.02em;
      margin-bottom: 6px;
      line-height: 1.1;
    }

    [data-theme="atelier"] .rf-h {
      font-weight: 500;
      font-style: italic;
    }

    .rf-help {
      color: var(--ink-2);
      font-size: 14px;
      margin-bottom: 24px;
    }

    .rf-grid-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .rf-grid-1 {
      display: grid;
      gap: 10px;
    }

    .rf-opt {
      border: var(--hairline) solid var(--line);
      border-radius: var(--r-md);
      padding: 18px 20px;
      display: flex;
      align-items: center;
      gap: 14px;
      cursor: pointer;
      background: var(--bg);
      transition: border-color .2s, background .2s;
    }

    .rf-opt:hover {
      border-color: var(--ink-3);
    }

    .rf-opt.sel {
      border-color: var(--accent);
      background: var(--accent-soft);
    }

    .rf-opt-glyph {
      width: 36px;
      height: 36px;
      border-radius: var(--r-sm);
      background: var(--surface);
      border: var(--hairline) solid var(--line);
      color: var(--ink);
      display: grid;
      place-items: center;
      font-family: var(--mono);
      font-size: 11px;
      flex-shrink: 0;
      font-weight: 600;
    }

    .rf-opt.sel .rf-opt-glyph {
      background: var(--accent);
      color: var(--on-accent);
      border-color: var(--accent);
    }

    .rf-vehicle-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--ink-2);
      margin-bottom: 4px;
    }

    .rf-opt.sel .rf-vehicle-icon {
      color: var(--accent);
    }

    .quiz-option.selected .rf-vehicle-icon {
      color: var(--accent);
    }

    .rf-card-grid-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    /* Formula choice cards (step 2) */
    .rf-formula-card {
      border: var(--hairline) solid var(--line);
      border-radius: var(--r-lg);
      padding: 18px;
      cursor: pointer;
      background: var(--bg);
      transition: border-color .2s, background .2s;
      position: relative;
    }

    .rf-formula-card:hover {
      border-color: var(--ink-3);
    }

    .rf-formula-card.sel {
      border-color: var(--accent);
      background: var(--accent-soft);
    }

    .rf-formula-card.featured {
      border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    }

    .rf-fc-name {
      font-family: var(--display);
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -.02em;
      margin-bottom: 4px;
    }

    .rf-fc-price {
      color: var(--accent);
      font-weight: 700;
      font-family: var(--mono);
      font-size: 15px;
      margin-bottom: 12px;
    }

    .rf-fc-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .rf-fc-list li {
      font-size: 12px;
      color: var(--ink-2);
      padding-left: 13px;
      position: relative;
      line-height: 1.3;
    }

    .rf-fc-list li::before {
      content: '·';
      position: absolute;
      left: 0;
      color: var(--accent);
    }

    .rf-fc-badge {
      position: absolute;
      top: -10px;
      right: 10px;
      background: var(--accent);
      color: var(--on-accent);
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: .1em;
      padding: 3px 8px;
      border-radius: 999px;
      white-space: nowrap;
    }

    @media (max-width:580px) {
      #rf-formula-choice {
        grid-template-columns: 1fr !important;
      }
    }

    .rf-card-grid-2 .rf-opt {
      flex-direction: column;
      align-items: flex-start;
      padding: 20px;
    }

    .f-label {
      display: block;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-bottom: 8px;
    }

    .f-input {
      width: 100%;
      background: var(--bg);
      border: var(--hairline) solid var(--line);
      color: var(--ink);
      padding: 14px 16px;
      border-radius: var(--r-md);
      font-family: var(--body);
      font-size: 14px;
      outline: none;
      transition: border-color .2s;
    }

    .f-input:focus {
      border-color: var(--accent);
    }

    textarea.f-input {
      min-height: 90px;
      resize: vertical;
    }

    .toggle-row {
      display: flex;
      gap: 8px;
    }

    .toggle-pill {
      flex: 1;
      padding: 12px 14px;
      border: var(--hairline) solid var(--line);
      border-radius: var(--r-md);
      text-align: center;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      color: var(--ink-2);
      transition: all .2s;
    }

    .toggle-pill.sel {
      border-color: var(--accent);
      background: var(--accent-soft);
      color: var(--ink);
    }

    .recap {
      background: var(--bg-2);
      border: var(--hairline) solid var(--line);
      border-radius: var(--r-lg);
      padding: 24px;
      margin-bottom: 24px;
    }

    .recap-row {
      display: flex;
      justify-content: space-between;
      padding-block: 10px;
      font-size: 14px;
      color: var(--ink-2);
    }

    .recap-row.total {
      border-top: var(--hairline) solid var(--line);
      padding-top: 16px;
      margin-top: 8px;
      font-size: 16px;
    }

    .recap-row.total span:last-child {
      font-family: var(--display);
      font-size: 28px;
      font-weight: 700;
      color: var(--accent);
      letter-spacing: -.02em;
    }

    .price-readout {
      background: var(--surface-inv);
      color: var(--bg);
      border-radius: var(--r-lg);
      padding: 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
    }

    [data-theme="aqua"] .price-readout {
      background: var(--accent-soft);
      color: var(--ink);
      border: var(--hairline) solid var(--accent);
    }

    .price-readout-num {
      font-family: var(--display);
      font-size: 56px;
      font-weight: 700;
      letter-spacing: -.03em;
      color: var(--accent);
      line-height: 1;
    }

    /* ========== Fidélité ========== */
    .fidelite {
      background: var(--surface-inv);
      color: var(--bg);
    }

    .fidelite-card {
      max-width: 720px;
      margin: 0 auto;
      text-align: center;
    }

    .fidelite h2 {
      font-size: var(--title-2);
      letter-spacing: -.03em;
    }

    [data-theme="atelier"] .fidelite h2 em {
      font-style: italic;
      color: var(--accent);
    }

    .fidelite p {
      color: rgba(255, 255, 255, .7);
      font-size: 17px;
      line-height: 1.5;
      margin: 24px 0 32px;
    }

    .fidelite-pill {
      display: inline-flex;
      gap: 10px;
      align-items: center;
      padding: 12px 20px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .1);
      border: var(--hairline) solid rgba(255, 255, 255, .18);
      font-size: 13px;
      color: rgba(255, 255, 255, .9);
    }

    .fidelite-pill .dot {
      width: 8px;
      height: 8px;
      background: var(--accent);
      border-radius: 50%;
      animation: pulse-dot 2.4s infinite;
    }

    @keyframes pulse-dot {

      0%,
      100% {
        opacity: 1;
        transform: scale(1)
      }

      50% {
        opacity: .5;
        transform: scale(.8)
      }
    }

    /* ========== Footer ========== */
    .footer {
      background: var(--bg-2);
      padding-block: 80px 32px;
      border-top: var(--hairline) solid var(--line);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 64px;
      margin-bottom: 56px;
    }

    @media (max-width:720px) {
      .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px
      }
    }

    .footer h4 {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-3);
      margin-bottom: 18px;
    }

    .footer ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .footer ul a,
    .footer-info {
      font-size: 14px;
      color: var(--ink-2);
    }

    .footer ul a:hover {
      color: var(--accent);
    }

    .footer-bottom {
      padding-top: 32px;
      border-top: var(--hairline) solid var(--line);
      display: flex;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .08em;
      color: var(--ink-3);
    }

    .social-row {
      display: flex;
      gap: 8px;
      margin-top: 20px;
    }

    .social-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: var(--hairline) solid var(--line);
      display: grid;
      place-items: center;
      color: var(--ink-2);
      transition: border-color .2s, color .2s, background .2s;
    }

    .social-btn:hover {
      border-color: var(--ink);
      color: var(--ink);
      background: var(--surface);
    }

    /* WhatsApp float */
    .wa-float {
      position: fixed;
      bottom: 24px;
      right: 24px;
      width: 56px;
      height: 56px;
      background: #25d366;
      color: #fff;
      border-radius: 50%;
      display: grid;
      place-items: center;
      box-shadow: 0 4px 24px rgba(37, 211, 102, .4);
      z-index: 70;
      transition: transform .25s;
    }

    .wa-float:hover {
      transform: scale(1.1);
    }

    /* Reveal */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
    }

    .reveal.visible {
      opacity: 1;
      transform: none;
    }

    /* Form steps */
    .form-step {
      display: none;
    }

    .form-step.active {
      display: block;
      animation: rfIn .35s cubic-bezier(.16, 1, .3, 1);
    }

    @keyframes rfIn {
      from {
        opacity: 0;
        transform: translateX(12px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .hidden {
      display: none !important;
    }

    .quiz-question.hidden {
      display: none;
    }

    #tweaks-host {
      z-index: 100;
    }

    /* Hero video */
    .hero-video {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
    }

    .hero-video video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .45;
    }

    .hero-video::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(10, 22, 27, .55) 0%, rgba(10, 22, 27, .45) 50%, rgba(10, 22, 27, .85) 100%);
    }

    .hero-center {
      position: relative;
      z-index: 1;
      text-align: center;
      width: 100%;
    }

    /* BA gallery toggle */
    .ba-btn.active {
      background: var(--ink);
      color: var(--bg);
      border-color: var(--ink);
    }

    [data-theme="aqua"] .ba-btn.active {
      background: var(--accent);
      color: var(--on-accent);
      border-color: var(--accent);
    }

    /* Connected vertical timeline */
    .timeline {
      display: flex;
      flex-direction: column;
      position: relative;
      padding-left: 72px;
    }

    .timeline::before {
      content: '';
      position: absolute;
      left: 19px;
      top: 20px;
      bottom: 20px;
      width: 2px;
      background: linear-gradient(to bottom, var(--accent) 0%, var(--line) 100%);
    }

    .tl-item {
      position: relative;
      padding-bottom: 28px;
      cursor: pointer;
    }

    .tl-item:last-child {
      padding-bottom: 0;
    }

    .tl-num {
      position: absolute;
      left: -72px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-family: var(--display);
      font-size: 14px;
      font-weight: 700;
      border: 2px solid var(--line);
      background: var(--bg-2);
      color: var(--ink-3);
      transition: background .3s, color .3s, border-color .3s;
    }

    .tl-item.open .tl-num {
      background: var(--accent);
      color: var(--on-accent);
      border-color: var(--accent);
    }

    .tl-title {
      font-family: var(--display);
      font-size: clamp(20px, 2.2vw, 28px);
      letter-spacing: -.02em;
      margin-bottom: 0;
      font-weight: 600;
      padding-block: 4px 0;
    }

    .tl-body {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .4s cubic-bezier(.16, 1, .3, 1);
    }

    .tl-body>div {
      overflow: hidden;
    }

    .tl-item.open .tl-body {
      grid-template-rows: 1fr;
    }

    .tl-desc {
      color: var(--ink-2);
      font-size: 15px;
      line-height: 1.6;
      max-width: 540px;
      margin-top: 10px;
    }

    .tl-badge {
      display: inline-block;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--accent);
      background: var(--accent-soft);
      padding: 4px 12px;
      border-radius: 999px;
      margin-top: 12px;
      margin-bottom: 6px;
    }

    /* ── Mobile nav ── */
    .mobile-btn {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
      background: none;
      border: none;
    }

    .mobile-btn span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--ink);
      border-radius: 2px;
      transition: transform .3s, opacity .3s;
    }

    @media(max-width:880px) {
      .mobile-btn {
        display: flex;
      }
    }

    .mobile-btn.open span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    .mobile-btn.open span:nth-child(2) {
      opacity: 0;
    }

    .mobile-btn.open span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    .mnav {
      position: fixed;
      top: 69px;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--bg);
      z-index: 79;
      padding: 0 var(--gutter);
      flex-direction: column;
      display: none;
      border-top: 1px solid rgba(240, 244, 245, .12);
      overflow-y: auto;
    }

    .mnav.open {
      display: flex;
    }

    .mnav a {
      padding: 20px 0;
      border-bottom: 1px solid rgba(240, 244, 245, .12);
      font-family: var(--display);
      font-size: 20px;
      font-weight: 600;
      color: var(--ink);
      display: flex;
      justify-content: space-between;
      align-items: center;
      letter-spacing: -.02em;
    }

    .mnav a::after {
      content: '→';
      color: rgba(240, 244, 245, .4);
      font-size: 16px;
    }

    .mnav a.cta-link {
      color: var(--accent);
    }

    /* ── Mobile layout fixes ── */
    @media(max-width:580px) {
      .rf-card-grid-2 {
        grid-template-columns: 1fr;
      }
    }

    @media(max-width:640px) {
      .marquee-track {
        animation-duration: 18s;
      }
      .reviews-carousel {
        min-height: unset;
      }
      .reviews-carousel .card {
        position: relative;
        inset: unset;
        display: none;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        padding: 28px 20px;
      }
      .reviews-carousel .card.rev-active {
        display: block;
      }
      .review-quote {
        font-size: 16px;
        line-height: 1.55;
      }
    }

    /* FAQ accordion */
    .faq-item {
      border-bottom: var(--hairline) solid var(--line);
    }

    .faq-item summary {
      cursor: pointer;
      padding: 20px 0;
      font-weight: 600;
      font-size: 15px;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-item summary::after {
      content: '+';
      font-family: var(--mono);
      font-size: 18px;
      color: var(--accent);
      flex-shrink: 0;
      transition: transform .25s;
    }

    .faq-item[open] summary::after {
      transform: rotate(45deg);
    }

    .faq-item p {
      color: var(--ink-2);
      font-size: 14px;
      line-height: 1.65;
      margin: 0 0 20px;
    }

/* ========== Prestations — Formula Detail ========== */
.formula-detail { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media(min-width:880px) {
  .formula-detail { grid-template-columns: 1fr 1fr; gap: 72px; }
  .formula-detail.reverse { direction: rtl; }
  .formula-detail.reverse > * { direction: ltr; }
}
.fd-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.fd-title { font-family: var(--display); font-size: clamp(28px, 4vw, 48px); letter-spacing: -.025em; line-height: .95; margin-bottom: 18px; }
.fd-lede { color: var(--ink-2); font-size: 16px; line-height: 1.6; margin-bottom: 24px; }
.fd-list { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; }
.fd-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-2); }
.fd-list li::before { content: 'v'; color: var(--accent); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.fd-price { display: inline-flex; align-items: baseline; gap: 6px; margin-bottom: 24px; }
.fd-price-num { font-family: var(--display); font-size: 48px; font-weight: 700; letter-spacing: -.03em; color: var(--accent); }
.fd-price-label { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: var(--r-lg); overflow: hidden; max-width: 480px; }
.ig-cell { aspect-ratio: 1; background: var(--surface); display: grid; place-items: center; border: var(--hairline) solid var(--line); }
.ig-cell svg { color: var(--ink-3); }

/* ========== FAQ page ========== */
.faq-box { background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--r-lg); padding: 8px 28px; overflow: hidden; }
.faq-body { padding-bottom: 20px; color: var(--ink-2); font-size: 14px; line-height: 1.65; }
.faq-body strong { color: var(--ink); }
.faq-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.faq-cat { margin-bottom: 48px; }
.faq-cat-label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 20px; display: flex; align-items: center; gap: 14px; }
.faq-cat-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }
@media(max-width:640px) { .faq-box { padding: 4px 16px; } }

/* ========== Contact page ========== */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media(min-width:880px) { .contact-grid { grid-template-columns: 3fr 2fr; } }
.form-card { background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--r-xl); padding: 40px; }
@media(max-width:640px) { .form-card { padding: 24px 20px; } }
.f-label { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-bottom: 6px; display: block; letter-spacing: .04em; }
.f-input { background: rgba(240,244,245,.04); border: var(--hairline) solid var(--line); border-radius: var(--r-sm); color: var(--ink); padding: 12px 16px; width: 100%; transition: border-color .2s, background .2s; outline: none; font-family: var(--body); font-size: 14px; }
.f-input:focus { border-color: var(--accent); background: var(--accent-soft); }
.f-input::placeholder { color: var(--ink-3); }
textarea.f-input { resize: vertical; min-height: 120px; }
.f-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 0; }
@media(max-width:640px) { .f-row { grid-template-columns: 1fr; } }
.file-zone { border: 2px dashed var(--line); border-radius: var(--r-sm); transition: border-color .2s, background .2s; cursor: pointer; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.file-zone:hover { border-color: var(--accent); background: var(--accent-soft); }
.info-card { background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--r-lg); padding: 24px; margin-bottom: 16px; }
.info-card:last-child { margin-bottom: 0; }
.info-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.info-row:last-child { margin-bottom: 0; }
.info-icon { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--accent-soft); display: grid; place-items: center; flex-shrink: 0; color: var(--accent); }
.wa-card { background: rgba(37,211,102,.08); border: var(--hairline) solid rgba(37,211,102,.2); border-radius: var(--r-lg); padding: 24px; display: block; margin-bottom: 16px; transition: background .2s; }
.wa-card:hover { background: rgba(37,211,102,.12); }
#contact-success { display: none; }
.nav-links a.active { color: var(--accent); }