:root{
    --bg: oklch(97% 0.004 260);
    --surface: oklch(100% 0 0);
    --surface-alt: oklch(93.5% 0.006 260);
    --border: oklch(87% 0.008 260);
    --text: oklch(19% 0.012 260);
    --text-2: oklch(42% 0.012 260);
    --text-3: oklch(60% 0.01 260);
    --accent: oklch(58% 0.16 40);
    --accent-ink: oklch(99% 0.01 40);
    --accent-2: oklch(93% 0.035 40);
    --line: oklch(80% 0.012 260);
    --green: oklch(48% 0.1 148);
    --shadow: 0 20px 40px -18px oklch(20% 0.02 260 / 0.18), 0 4px 12px -4px oklch(20% 0.02 260 / 0.12);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg: oklch(16.5% 0.009 260);
      --surface: oklch(20.5% 0.01 260);
      --surface-alt: oklch(24% 0.011 260);
      --border: oklch(30% 0.013 260);
      --text: oklch(93% 0.006 260);
      --text-2: oklch(74% 0.009 260);
      --text-3: oklch(55% 0.011 260);
      --accent: oklch(72% 0.15 40);
      --accent-ink: oklch(14% 0.02 40);
      --accent-2: oklch(27% 0.05 40);
      --line: oklch(32% 0.013 260);
      --green: oklch(74% 0.11 148);
      --shadow: 0 20px 40px -18px oklch(0% 0 0 / 0.5), 0 4px 12px -4px oklch(0% 0 0 / 0.35);
    }
  }
  :root[data-theme="dark"]{
    --bg: oklch(16.5% 0.009 260);
    --surface: oklch(20.5% 0.01 260);
    --surface-alt: oklch(24% 0.011 260);
    --border: oklch(30% 0.013 260);
    --text: oklch(93% 0.006 260);
    --text-2: oklch(74% 0.009 260);
    --text-3: oklch(55% 0.011 260);
    --accent: oklch(72% 0.15 40);
    --accent-ink: oklch(14% 0.02 40);
    --accent-2: oklch(27% 0.05 40);
    --line: oklch(32% 0.013 260);
    --green: oklch(74% 0.11 148);
    --shadow: 0 20px 40px -18px oklch(0% 0 0 / 0.5), 0 4px 12px -4px oklch(0% 0 0 / 0.35);
  }

  /* ---- Revver product scope: its own palette, nested inside the Sisyphe shell ---- */
  .product-revver{
    --bg: oklch(98% 0.005 85);
    --surface: oklch(100% 0 0);
    --surface-alt: oklch(96% 0.007 85);
    --border: oklch(90% 0.006 85);
    --text: oklch(22% 0.012 260);
    --text-2: oklch(46% 0.012 260);
    --text-3: oklch(64% 0.01 260);
    --accent: oklch(48% 0.11 258);
    --accent-ink: oklch(98% 0.01 258);
    --accent-2: oklch(94% 0.025 258);
    --amber: oklch(58% 0.14 65);
    --amber-2: oklch(96% 0.035 70);
    --rust: oklch(56% 0.15 35);
    --rust-2: oklch(95% 0.03 30);
    --green: oklch(48% 0.1 148);
    --green-2: oklch(95% 0.03 148);
    --shadow: 0 16px 32px -14px oklch(20% 0.02 260 / 0.16), 0 3px 10px -4px oklch(20% 0.02 260 / 0.1);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .product-revver{
      --bg: oklch(19% 0.011 260);
      --surface: oklch(23.5% 0.012 260);
      --surface-alt: oklch(27% 0.013 260);
      --border: oklch(33% 0.015 260);
      --text: oklch(94% 0.006 85);
      --text-2: oklch(76% 0.009 85);
      --text-3: oklch(58% 0.011 85);
      --accent: oklch(76% 0.1 258);
      --accent-ink: oklch(16% 0.03 258);
      --accent-2: oklch(31% 0.05 258);
      --amber: oklch(78% 0.13 70);
      --amber-2: oklch(32% 0.06 70);
      --rust: oklch(72% 0.14 35);
      --rust-2: oklch(32% 0.07 30);
      --green: oklch(74% 0.11 148);
      --green-2: oklch(29% 0.06 148);
      --shadow: 0 16px 32px -14px oklch(0% 0 0 / 0.45), 0 3px 10px -4px oklch(0% 0 0 / 0.3);
    }
  }
  :root[data-theme="dark"] .product-revver{
    --bg: oklch(19% 0.011 260);
    --surface: oklch(23.5% 0.012 260);
    --surface-alt: oklch(27% 0.013 260);
    --border: oklch(33% 0.015 260);
    --text: oklch(94% 0.006 85);
    --text-2: oklch(76% 0.009 85);
    --text-3: oklch(58% 0.011 85);
    --accent: oklch(76% 0.1 258);
    --accent-ink: oklch(16% 0.03 258);
    --accent-2: oklch(31% 0.05 258);
    --amber: oklch(78% 0.13 70);
    --amber-2: oklch(32% 0.06 70);
    --rust: oklch(72% 0.14 35);
    --rust-2: oklch(32% 0.07 30);
    --green: oklch(74% 0.11 148);
    --green-2: oklch(29% 0.06 148);
    --shadow: 0 16px 32px -14px oklch(0% 0 0 / 0.45), 0 3px 10px -4px oklch(0% 0 0 / 0.3);
  }

  /* ---- Toolbox product scope: its own palette, nested inside the Sisyphe shell ---- */
  .product-toolbox{
    --bg: oklch(97% 0.014 155);
    --surface: oklch(100% 0 0);
    --surface-alt: oklch(95% 0.016 155);
    --border: oklch(88% 0.015 155);
    --text: oklch(22% 0.012 260);
    --text-2: oklch(46% 0.012 260);
    --text-3: oklch(64% 0.01 260);
    --accent: oklch(52% 0.14 155);
    --accent-ink: oklch(99% 0.01 155);
    --accent-2: oklch(93% 0.03 155);
    --shadow: 0 16px 32px -14px oklch(20% 0.02 260 / 0.16), 0 3px 10px -4px oklch(20% 0.02 260 / 0.1);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .product-toolbox{
      --bg: oklch(17% 0.015 155);
      --surface: oklch(21.5% 0.016 155);
      --surface-alt: oklch(25% 0.017 155);
      --border: oklch(31% 0.018 155);
      --text: oklch(94% 0.006 85);
      --text-2: oklch(76% 0.009 85);
      --text-3: oklch(58% 0.011 85);
      --accent: oklch(74% 0.13 155);
      --accent-ink: oklch(15% 0.02 155);
      --accent-2: oklch(30% 0.05 155);
      --shadow: 0 16px 32px -14px oklch(0% 0 0 / 0.45), 0 3px 10px -4px oklch(0% 0 0 / 0.3);
    }
  }
  :root[data-theme="dark"] .product-toolbox{
    --bg: oklch(17% 0.015 155);
    --surface: oklch(21.5% 0.016 155);
    --surface-alt: oklch(25% 0.017 155);
    --border: oklch(31% 0.018 155);
    --text: oklch(94% 0.006 85);
    --text-2: oklch(76% 0.009 85);
    --text-3: oklch(58% 0.011 85);
    --accent: oklch(74% 0.13 155);
    --accent-ink: oklch(15% 0.02 155);
    --accent-2: oklch(30% 0.05 155);
    --shadow: 0 16px 32px -14px oklch(0% 0 0 / 0.45), 0 3px 10px -4px oklch(0% 0 0 / 0.3);
  }

  /* ---- MotoLean product scope: its own palette, nested inside the Sisyphe shell ----
     Orange de l'icône, et en sombre le bleu nuit de l'interface de l'app. */
  .product-motolean{
    --bg: oklch(97.5% 0.006 45);
    --surface: oklch(100% 0 0);
    --surface-alt: oklch(95.5% 0.01 45);
    --border: oklch(89% 0.012 45);
    --text: oklch(20% 0.02 265);
    --text-2: oklch(45% 0.016 265);
    --text-3: oklch(62% 0.012 265);
    --accent: oklch(56% 0.17 42);
    --accent-ink: oklch(99% 0.01 42);
    --accent-2: oklch(94% 0.035 45);
    --amber: oklch(58% 0.14 65);
    --amber-2: oklch(96% 0.035 70);
    --green: oklch(48% 0.1 160);
    --green-2: oklch(95% 0.03 160);
    --shadow: 0 16px 32px -14px oklch(20% 0.02 265 / 0.16), 0 3px 10px -4px oklch(20% 0.02 265 / 0.1);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .product-motolean{
      --bg: oklch(15% 0.022 272);
      --surface: oklch(19.5% 0.024 272);
      --surface-alt: oklch(23% 0.026 272);
      --border: oklch(30% 0.028 272);
      --text: oklch(95% 0.012 272);
      --text-2: oklch(76% 0.03 272);
      --text-3: oklch(58% 0.035 272);
      --accent: oklch(72% 0.17 45);
      --accent-ink: oklch(15% 0.02 45);
      --accent-2: oklch(28% 0.07 45);
      --amber: oklch(78% 0.13 70);
      --amber-2: oklch(32% 0.06 70);
      --green: oklch(80% 0.14 160);
      --green-2: oklch(29% 0.06 160);
      --shadow: 0 16px 32px -14px oklch(0% 0 0 / 0.5), 0 3px 10px -4px oklch(0% 0 0 / 0.35);
    }
  }
  :root[data-theme="dark"] .product-motolean{
    --bg: oklch(15% 0.022 272);
    --surface: oklch(19.5% 0.024 272);
    --surface-alt: oklch(23% 0.026 272);
    --border: oklch(30% 0.028 272);
    --text: oklch(95% 0.012 272);
    --text-2: oklch(76% 0.03 272);
    --text-3: oklch(58% 0.035 272);
    --accent: oklch(72% 0.17 45);
    --accent-ink: oklch(15% 0.02 45);
    --accent-2: oklch(28% 0.07 45);
    --amber: oklch(78% 0.13 70);
    --amber-2: oklch(32% 0.06 70);
    --green: oklch(80% 0.14 160);
    --green-2: oklch(29% 0.06 160);
    --shadow: 0 16px 32px -14px oklch(0% 0 0 / 0.5), 0 3px 10px -4px oklch(0% 0 0 / 0.35);
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }
  body{
    margin:0; background: var(--bg); color: var(--text);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    transition: background .25s ease;
  }
  h1,h2,h3,p,ul{ margin:0; }
  ul{ padding:0; list-style:none; }
  a{ color: inherit; text-decoration: none; }
  img,svg{ display:block; max-width:100%; }
  button{ font: inherit; background:none; border:none; cursor:pointer; color: inherit; }

  .mono{ font-family: 'IBM Plex Mono', ui-monospace, monospace; }
  .serif{ font-family: 'Fraunces', ui-serif, Georgia, serif; }
  .display{ font-family: 'Space Grotesk', system-ui, sans-serif; }

  .wrap{ max-width: 1120px; margin: 0 auto; padding: 0 28px; }
  section{ overflow-x: hidden; }

  /* ---------------- nav ---------------- */
  header.nav{
    position: sticky; top:0; z-index: 50;
    background: color-mix(in oklch, var(--bg) 86%, transparent);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border-bottom: 1px solid var(--border);
  }
  .nav-row{ display:flex; align-items:center; justify-content: space-between; height: 68px; }
  .brand{ display:flex; align-items:center; }
  /* Wordmark « point rocher » : le point du i est le rocher. Coordonnées
     calées sur les métriques de Space Grotesk 600 (fût du ı centré à x=63). */
  .wordmark{ display:block; height: 26px; width:auto; overflow: visible; }
  .wordmark text{ font-family:'Space Grotesk', system-ui, sans-serif; font-weight:600; font-size:100px; letter-spacing:-2.5px; fill: var(--text); }
  .wordmark circle{ fill: var(--accent); }
  .nav-end{ display:flex; align-items:center; gap: 24px; }
  .nav-links{ display:flex; align-items:center; gap: 28px; }
  .nav-links a{ font-size: 13.5px; font-weight: 600; color: var(--text-2); }
  .nav-links a:hover, .nav-links a.active{ color: var(--text); }
  .nav-cta{ font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 100px; background: var(--accent); color: var(--accent-ink); white-space:nowrap; }
  @media (max-width: 720px){ .nav-links{ display:none; } }


  .eyebrow{ font-family:'IBM Plex Mono'; font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); display:flex; align-items:center; gap:8px; }
  .eyebrow::before{ content:""; width:14px; height:1.5px; background: var(--accent); flex-shrink:0; }

  .reveal{ opacity:0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
  .reveal.in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

  section.band{ padding: 88px 0; }
  section.band.alt{ background: var(--surface-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .section-head{ max-width: 620px; margin: 0 0 44px; }
  .section-head .section-title{ font-family:'Fraunces'; font-weight:600; font-size: clamp(26px,3vw,34px); letter-spacing:-0.01em; margin-top:14px; text-wrap: balance; }
  .section-sub{ font-size:15px; color: var(--text-2); margin-top:12px; line-height:1.6; max-width: 56ch; }

  /* ---------------- accueil hero ---------------- */
  .hero{ position:relative; padding: 88px 0 60px; overflow: hidden; }
  .hero-ridge{ position:absolute; inset: 0; pointer-events:none; z-index:0; }
  .hero-ridge svg{ width:100%; height:100%; }
  .hero-inner{ position:relative; z-index:1; max-width: 760px; }
  .hero-title{ font-family:'Fraunces'; font-weight:600; font-size: clamp(38px, 5.6vw, 62px); line-height: 1.05; letter-spacing: -0.015em; margin-top: 18px; text-wrap: balance; }
  .hero-title em{ font-style: italic; color: var(--accent); }
  .hero-sub{ font-size: 17px; line-height: 1.65; color: var(--text-2); max-width: 52ch; margin-top: 20px; }
  .hero-actions{ display:flex; align-items:center; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
  .btn-primary{ font-size: 14.5px; font-weight: 600; padding: 13px 22px; border-radius: 100px; background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); }
  .btn-secondary{ font-size: 14.5px; font-weight: 600; color: var(--text-2); display:flex; align-items:center; gap:6px; padding: 13px 4px; }
  .btn-secondary:hover{ color: var(--text); }
  .hero-pillrow{ display:flex; gap: 10px; margin-top: 40px; flex-wrap: wrap; }
  .pill{ font-size: 12.5px; font-weight: 500; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); padding: 8px 14px; border-radius: 100px; display:flex; align-items:center; gap:7px; }
  .pill svg{ width:14px; height:14px; color: var(--accent); }

  /* climbing dot on a ridge line */
  .climb-dot{ offset-path: path("M 40 210 C 160 170, 230 90, 340 130 S 520 220, 620 120"); offset-rotate: 0deg; animation: climb 9s ease-in-out infinite alternate; }
  @keyframes climb{ from{ offset-distance: 2%; } to{ offset-distance: 98%; } }
  @media (prefers-reduced-motion: reduce){ .climb-dot{ animation: none; offset-distance: 40%; } }

  /* ---------------- services ---------------- */
  .service-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  @media (max-width: 960px){ .service-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px){ .service-grid{ grid-template-columns: 1fr; } }
  .service-card{ background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px 22px; display:flex; flex-direction:column; gap: 14px; }
  .service-icon{ width: 38px; height:38px; border-radius:10px; background: var(--accent-2); color: var(--accent); display:flex; align-items:center; justify-content:center; }
  .service-icon svg{ width:18px; height:18px; }
  .service-name{ font-weight:600; font-size: 15px; }
  .service-desc{ font-size: 13px; color: var(--text-2); line-height: 1.55; }

  /* ---------------- portfolio ---------------- */
  .port-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  @media (max-width: 860px){ .port-grid{ grid-template-columns: 1fr; max-width: 460px; } }
  .port-card{ background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 26px; display:flex; flex-direction:column; gap: 18px; text-align:left; text-decoration:none; transition: border-color .2s ease, transform .2s ease; }
  a.port-card:hover{ border-color: var(--accent); transform: translateY(-2px); }
  .port-mark{ width: 52px; height:52px; border-radius: 15px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .port-mark svg{ width:24px; height:24px; }
  .port-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
  /* Icônes fournies sur fond transparent (pas de couleur bord à bord comme
     revver-icon.png) : on les fait flotter, contenues, sur le fond teinté du
     conteneur plutôt que de les étirer en couvrant tout le carré. */
  .port-mark img.icon-pad, .rv-app-mark img.icon-pad{ width:64%; height:64%; object-fit:contain; }
  .port-tag{ font-family:'IBM Plex Mono'; font-size: 11px; color: var(--text-3); letter-spacing: 0.03em; }
  .port-name{ font-family:'Fraunces'; font-weight:600; font-size: 20px; margin-top: 2px; }
  .port-desc{ font-size: 13.5px; color: var(--text-2); line-height:1.55; flex:1; }
  .port-link{ font-size: 13px; font-weight:600; color: var(--accent); display:flex; align-items:center; gap:5px; }
  .port-card.placeholder{ border-style: dashed; opacity: .72; }
  .port-card.placeholder .port-mark{ background: var(--surface-alt); color: var(--text-3); }
  .port-card.placeholder .port-name{ color: var(--text-2); }

  /* ---------------- footer ---------------- */
  footer.site-foot{ padding: 46px 0 40px; border-top: 1px solid var(--border); }
  .foot-row{ display:flex; align-items:flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
  .foot-brand{ display:flex; align-items:center; }
  .foot-brand .wordmark{ height: 21px; }
  .foot-meta{ font-size: 12.5px; color: var(--text-3); margin-top:8px; }
  .foot-links{ display:flex; gap: 18px; }
  .foot-links a{ font-size: 12.5px; color: var(--text-3); }
  .foot-links a:hover{ color: var(--text-2); }

  /* ================= Revver product page ================= */
  .back-link{ display:inline-flex; align-items:center; gap:7px; font-size: 13px; font-weight:600; color: var(--text-2); padding: 22px 0 0; }
  .back-link:hover{ color: var(--accent); }
  .back-link svg{ width:14px; height:14px; }

  .rv-hero{ padding: 40px 0 40px; }
  .rv-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: center; }
  @media (max-width: 900px){ .rv-grid{ grid-template-columns: 1fr; } }
  .rv-eyebrow-row{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
  .rv-app-mark{ width:26px; height:26px; border-radius:8px; background: var(--accent); color: var(--accent-ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
  .rv-app-mark svg{ width:14px; height:14px; }
  .rv-app-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
  .rv-title{ font-family:'Space Grotesk'; font-weight: 700; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.06; letter-spacing: -0.015em; margin-top: 14px; text-wrap: balance; }
  .rv-title .accent{ color: var(--accent); }
  .rv-sub{ font-size: 16px; line-height: 1.6; color: var(--text-2); max-width: 48ch; margin-top: 16px; }

  .store-row{ display:flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
  .store-badge{ display:flex; align-items:center; gap:10px; padding: 10px 16px; border-radius: 12px; background: var(--surface); border: 1px dashed var(--border); position:relative; user-select:none; }
  .store-badge svg{ width: 22px; height:22px; color: var(--text-3); flex-shrink:0; }
  .store-badge-text{ display:flex; flex-direction:column; }
  .store-badge-eyebrow{ font-size: 9px; color: var(--text-3); letter-spacing:0.03em; text-transform: uppercase; }
  .store-badge-name{ font-size: 13.5px; font-weight:600; color: var(--text-2); }
  .store-soon{ position:absolute; top:-9px; right:-8px; background: var(--amber-2); color: oklch(38% 0.1 60); font-size: 9px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; padding: 3px 8px; border-radius: 100px; border: 1px solid var(--surface); }
  .store-badge-live{ border-style:solid; border-color: var(--border); transition: border-color .15s ease, transform .15s ease; }
  .store-badge-live svg{ color: var(--text-2); }
  .store-badge-live:hover{ border-color: var(--accent); transform: translateY(-1px); }
  .store-note{ font-size: 12px; color: var(--text-3); margin-top: 14px; }

  .rv-meta{ display:flex; gap: 22px; margin-top: 34px; flex-wrap: wrap; }
  .rv-meta-item{ display:flex; flex-direction:column; gap:2px; }
  .rv-meta-num{ font-family:'Space Grotesk'; font-weight:700; font-size: 20px; }
  .rv-meta-label{ font-size: 11.5px; color: var(--text-3); }

  .phone-stage{ display:flex; justify-content:center; position:relative; }
  .phone-stage::before{ content:""; position:absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, var(--accent-2), transparent 70%); filter: blur(6px); z-index:0; opacity:.9; }
  .phone{ position: relative; z-index:1; width: 290px; height: 592px; border-radius: 40px; background: var(--bg); border: 10px solid var(--surface); outline: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; display:flex; flex-direction:column; transform: rotate(-2deg); }
  .phone-notch{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:86px; height:20px; border-radius:11px; background: var(--surface); z-index:3; }
  .phone-content{ flex:1; overflow:hidden; padding: 32px 14px 0; display:flex; flex-direction:column; gap:13px; }
  .ph-eyebrow{ font-size:9.5px; color: var(--text-3); font-weight:500; }
  .ph-title{ font-family:'Space Grotesk'; font-weight:600; font-size:18px; margin-top:1px; }
  .ph-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap:7px; margin-top: 4px; }
  .ph-stat{ background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:9px 8px; }
  .ph-stat-num{ font-family:'Space Grotesk'; font-weight:600; font-size:12.5px; }
  .ph-stat-label{ font-size:8.3px; color: var(--text-3); margin-top:3px; line-height:1.25; }
  .ph-section{ font-family:'Space Grotesk'; font-weight:600; font-size:11.5px; margin-top:5px; }
  .ph-card{ background: var(--surface); border:1px solid var(--border); border-radius:13px; padding:9px; display:flex; gap:9px; align-items:center; }
  .ph-thumb{ width:34px; height:34px; border-radius:9px; background: var(--accent-2); color: var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .ph-thumb svg{ width:16px; height:16px; }
  .ph-name{ font-weight:600; font-size:11px; }
  .ph-sub{ font-size:8.5px; color: var(--text-3); margin-top:2px; }
  .ph-chip{ display:inline-flex; align-items:center; padding:3px 7px; border-radius:100px; font-size:8px; font-weight:600; margin-top:5px; }
  .ph-chip-amber{ background: var(--amber-2); color: var(--amber); }
  .ph-chip-green{ background: var(--green-2); color: var(--green); }
  .ph-tabbar{ margin: auto 10px 12px; height:42px; border-radius:17px; background: color-mix(in oklch, var(--surface) 80%, transparent); backdrop-filter: blur(20px); border:1px solid var(--border); display:flex; align-items:center; padding: 0 4px; }
  .ph-tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; }
  .ph-tab svg{ width:13px; height:13px; }
  .ph-tab-label{ font-size:6.5px; font-weight:600; }

  .feat-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  @media (max-width: 900px){ .feat-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px){ .feat-grid{ grid-template-columns: 1fr; } }
  .feat-card{ background: var(--surface); border:1px solid var(--border); border-radius: 18px; padding: 22px 20px; display:flex; flex-direction:column; gap: 14px; }
  .feat-icon{ width: 40px; height:40px; border-radius:12px; background: var(--accent-2); color: var(--accent); display:flex; align-items:center; justify-content:center; }
  .feat-icon svg{ width:19px; height:19px; }
  .feat-name{ font-weight:600; font-size: 14.5px; }
  .feat-desc{ font-size: 13px; color: var(--text-2); line-height: 1.55; }

  .spec-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border:1px solid var(--border); border-radius: 18px; overflow:hidden; }
  @media (max-width: 760px){ .spec-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px){ .spec-grid{ grid-template-columns: 1fr; } }
  .spec-cell{ background: var(--surface); padding: 22px 20px; display:flex; flex-direction:column; gap:8px; }
  .spec-label{ font-size: 11px; color: var(--text-3); text-transform:uppercase; letter-spacing:0.05em; font-weight:600; }
  .spec-val{ font-family:'IBM Plex Mono'; font-size: 14px; }

  .price-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
  @media (max-width: 860px){ .price-grid{ grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }
  .price-card{ background: var(--surface); border:1px solid var(--border); border-radius: 20px; padding: 26px 24px; display:flex; flex-direction:column; gap: 16px; position:relative; }
  .price-card.hi{ border-color: var(--accent); box-shadow: var(--shadow); }
  .price-badge{ position:absolute; top:-11px; right: 22px; background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight:700; letter-spacing:0.03em; text-transform:uppercase; padding: 5px 11px; border-radius: 100px; }
  .price-tier{ font-family:'Space Grotesk'; font-weight:600; font-size: 17px; }
  .price-target{ font-size:12px; color: var(--text-3); }
  .price-amount{ font-family:'Space Grotesk'; font-weight:700; font-size: 30px; margin-top: 4px; }
  .price-amount span{ font-size: 13px; font-weight:500; color: var(--text-3); }
  .price-alt{ font-size: 12.5px; color: var(--text-2); font-family:'IBM Plex Mono'; }
  .price-list{ display:flex; flex-direction:column; gap: 9px; margin-top: 4px; flex:1; }
  .price-list li{ display:flex; gap:9px; font-size: 13px; color: var(--text-2); line-height:1.4; }
  .price-list svg{ width:14px; height:14px; color: var(--green); flex-shrink:0; margin-top:2px; }
  /* Ligne informative et non avantageuse (ex. « Avec publicités ») : puce neutre. */
  .price-list li.off{ color: var(--text-3); }
  .price-list li.off svg{ color: var(--text-3); }

  .rv-cta{ text-align:center; padding: 80px 0 90px; }
  .rv-cta .section-title{ margin: 0 auto; }
  .rv-cta .store-row{ justify-content:center; margin-top: 26px; }
  .rv-cta .store-note{ text-align:center; }

  /* ---------------- Revver : version Android / Google Play ---------------- */
  .and-head{ display:flex; align-items:center; gap:14px; }
  .and-logo{ width:44px; height:44px; border-radius:13px; background: var(--green-2); color: var(--green); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .and-logo svg{ width:22px; height:22px; }
  .and-cols{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 34px; align-items:start; margin-top: 34px; }
  @media (max-width: 900px){ .and-cols{ grid-template-columns: 1fr; } }
  .status-card{ background: var(--surface); border:1px solid var(--border); border-radius: 18px; padding: 24px 22px; }
  .status-title{ font-family:'Space Grotesk'; font-weight:600; font-size: 15px; }
  .status-sub{ font-size: 12.5px; color: var(--text-3); margin-top:4px; line-height:1.5; }
  .status-list{ display:flex; flex-direction:column; gap: 12px; margin-top: 18px; }
  .status-list li{ display:flex; gap: 11px; font-size: 13px; color: var(--text-2); line-height:1.45; align-items:flex-start; }
  .status-dot{ width:15px; height:15px; border-radius:50%; flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; }
  .status-dot svg{ width:9px; height:9px; }
  .status-dot.done{ background: var(--green-2); color: var(--green); }
  .status-dot.todo{ background: var(--amber-2); color: var(--amber); }
  .status-foot{ font-size: 12px; color: var(--text-3); margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); line-height:1.55; }
  .safety-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border:1px solid var(--border); border-radius: 18px; overflow:hidden; }
  @media (max-width: 560px){ .safety-grid{ grid-template-columns: 1fr; } }
  .safety-cell{ background: var(--surface); padding: 18px 20px; }
  .safety-q{ font-size: 12.5px; color: var(--text-3); }
  .safety-a{ font-size: 13.5px; font-weight:600; margin-top:5px; line-height:1.45; }
  .inline-link{ color: var(--accent); font-weight:600; padding:0; vertical-align: baseline; text-align:left; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  .inline-link:hover{ text-decoration-thickness: 2px; }

  /* ================= Toolbox product page ================= */
  /* Aperçu du dashboard dans le hero, en remplacement du mockup de téléphone de
     Revver — Toolbox est un outil web, pas une appli mobile. */
  .tbx-mock{ background: var(--surface); border:1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); overflow:hidden; }
  .tbx-mock-bar{ display:flex; align-items:center; gap:14px; padding: 14px 18px; border-bottom:1px solid var(--border); }
  .tbx-mock-dots{ display:flex; gap:6px; flex-shrink:0; }
  .tbx-mock-dots span{ width:9px; height:9px; border-radius:50%; background: var(--border); }
  .tbx-mock-url{ flex:1; background: var(--bg); border-radius:100px; padding:6px 14px; font-family:'IBM Plex Mono'; font-size:11.5px; color: var(--text-3); }
  .tbx-mock-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1px; background: var(--border); }
  .tbx-mock-chip{ background: var(--surface); padding: 18px 16px; display:flex; flex-direction:column; gap:10px; }
  .tbx-mock-chip-icon{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
  .tbx-mock-chip-icon svg{ width:15px; height:15px; }
  .tbx-mock-chip-label{ font-size:12.5px; font-weight:600; }
  .tbx-mock-chip-cat{ font-family:'IBM Plex Mono'; font-size:10px; color: var(--text-3); text-transform:uppercase; letter-spacing:0.04em; }

  /* ---------------- contact ---------------- */
  .contact-cols{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items:start; }
  @media (max-width: 860px){ .contact-cols{ grid-template-columns: 1fr; gap: 34px; } }
  .form-card{ background: var(--surface); border:1px solid var(--border); border-radius: 20px; padding: 28px 26px; box-shadow: var(--shadow); }
  @media (max-width: 480px){ .form-card{ padding: 22px 18px; } }
  .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 560px){ .form-row{ grid-template-columns: 1fr; } }
  .field{ display:flex; flex-direction:column; gap:7px; margin-bottom: 16px; }
  .field label{ font-size: 12.5px; font-weight:600; color: var(--text-2); }
  .field .req{ color: var(--accent); }
  .field input, .field select, .field textarea{
    font: inherit; font-size: 14px; color: var(--text);
    background: var(--bg); border: 1px solid var(--border); border-radius: 11px;
    padding: 11px 13px; width: 100%; transition: border-color .16s ease, box-shadow .16s ease;
  }
  .field textarea{ resize: vertical; min-height: 132px; line-height:1.55; }
  .field select{ appearance:none; -webkit-appearance:none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-2); }
  .field input:invalid:not(:placeholder-shown){ border-color: var(--rust, oklch(56% 0.15 35)); }
  .field .hint{ font-size: 11.5px; color: var(--text-3); }
  .btn-submit{ font-size: 14.5px; font-weight:600; padding: 13px 24px; border-radius: 100px; background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); display:inline-flex; align-items:center; gap:8px; }
  .btn-submit svg{ width:15px; height:15px; }
  .form-foot{ display:flex; align-items:center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
  .form-note{ font-size: 11.5px; color: var(--text-3); line-height:1.55; margin-top: 16px; }
  .form-status{ font-size: 13px; font-weight:600; border-radius: 11px; padding: 11px 14px; margin-top: 16px; line-height:1.5; }
  .form-status[hidden]{ display:none !important; }
  .form-status.ok{ background: var(--green-2, oklch(95% 0.03 148)); color: var(--green); }
  .form-status.err{ background: var(--accent-2); color: var(--accent); }
  .contact-side{ display:flex; flex-direction:column; gap: 14px; }
  .side-card{ background: var(--surface); border:1px solid var(--border); border-radius: 18px; padding: 22px 20px; }
  .side-label{ font-family:'IBM Plex Mono'; font-size: 11px; letter-spacing:0.05em; text-transform:uppercase; color: var(--text-3); }
  .side-value{ font-size: 15px; font-weight:600; margin-top:8px; word-break: break-all; }
  .side-desc{ font-size: 12.5px; color: var(--text-2); line-height:1.55; margin-top:8px; }
  .copy-btn{ font-size: 12px; font-weight:600; color: var(--accent); display:inline-flex; align-items:center; gap:6px; margin-top: 12px; }
  .copy-btn svg{ width:13px; height:13px; }

  /* ---------------- page légale ---------------- */
  .legal-wrap{ max-width: 720px; }
  .legal-meta{ font-family:'IBM Plex Mono'; font-size: 12px; color: var(--text-3); margin-top: 14px; }
  .legal-toc{ display:flex; flex-wrap:wrap; gap: 8px; margin: 28px 0 8px; }
  .legal-toc a{ font-size: 12px; color: var(--text-2); background: var(--surface); border:1px solid var(--border); border-radius: 100px; padding: 6px 13px; }
  .legal-toc a:hover{ border-color: var(--accent); color: var(--accent); }
  .legal-block{ margin-top: 40px; scroll-margin-top: 90px; }
  .legal-h{ font-family:'Space Grotesk'; font-weight:600; font-size: 18px; letter-spacing:-0.005em; }
  .legal-p{ font-size: 14.5px; line-height: 1.7; color: var(--text-2); margin-top: 12px; }
  .legal-list{ margin-top: 14px; }
  /* Volontairement en flux inline (pas en flex) : les puces contiennent des badges
     iOS/Android qui doivent rester dans le texte, pas devenir des éléments flex. */
  .legal-list li{ position: relative; padding-left: 17px; margin-top: 10px; font-size: 14.5px; line-height:1.7; color: var(--text-2); }
  .legal-list li::before{ content:""; position:absolute; left:0; top:10px; width:5px; height:5px; border-radius:50%; background: var(--accent); }
  .legal-strong{ font-size: 15px; font-weight:600; color: var(--text); margin-top: 14px; }
  .plat-tag{ display:inline-flex; align-items:center; gap:5px; font-family:'IBM Plex Mono'; font-size: 10.5px; font-weight:500; letter-spacing:0.03em; text-transform:uppercase; padding: 3px 9px; border-radius: 100px; background: var(--surface-alt); color: var(--text-3); border:1px solid var(--border); margin-right: 6px; vertical-align: 2px; }
  /* ---------------- portée produit ----------------
     Chaque application a sa propre palette, appliquée sur le <main> de ses pages :
     <main class="product product-revver">. Le shell Sisyphe (nav + pied de page)
     garde la sienne. Ajouter une application = ajouter un bloc .product-<nom>
     sur le modèle de .product-revver ci-dessus, rien d'autre à toucher ici. */
  .product{ background: var(--bg); color: var(--text); }

  /* Le contenu doit rester lisible sans JavaScript : les robots d'indexation de
     Google Play et de l'App Store lisent la page telle quelle. Le repli est un
     <noscript><style> dans chaque page — pas de script inline, ce qui permet une
     CSP sans 'unsafe-inline' pour les scripts. */

  /* ---------------- galerie de captures d'écran (page Revver) ----------------
     Les images sont déjà des compositions complètes (titre, cadre de téléphone,
     fond) exportées depuis les artboards App Store Connect — aucune légende
     n'est nécessaire par-dessus, juste un cadre et une ombre. */
  .shot-strip{
    display:flex; gap:18px; overflow-x:auto; padding: 4px 4px 14px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  .shot-strip::-webkit-scrollbar{ height:6px; }
  .shot-strip::-webkit-scrollbar-thumb{ background: var(--border); border-radius:100px; }
  .shot-card{
    flex: 0 0 auto; width: 210px; margin:0; scroll-snap-align: start;
    border-radius: 20px; overflow:hidden; box-shadow: var(--shadow);
  }
  .shot-card img{ display:block; width:100%; height:auto; }
  @media (min-width: 720px){ .shot-card{ width: 246px; } }

  /* ---------------- bandeau de consentement (assets/js/site.js) ---------------- */
  .consent-banner{
    position: fixed; left:0; right:0; bottom:0; z-index: 200;
    background: var(--surface); border-top: 1px solid var(--border); box-shadow: var(--shadow);
  }
  .consent-inner{
    max-width: 1120px; margin: 0 auto; padding: 16px 28px;
    display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  }
  .consent-text{ font-size: 13.5px; line-height:1.55; color: var(--text-2); flex: 1 1 320px; margin:0; }
  .consent-actions{ display:flex; gap:10px; flex-shrink:0; }
  .consent-btn{ font-size: 13px; font-weight:600; padding: 9px 18px; border-radius:100px; border:1px solid var(--border); background: var(--surface); color: var(--text); cursor:pointer; font-family: inherit; }
  .consent-btn:hover{ background: var(--surface-alt); }
  .consent-btn.consent-accept{ background: var(--accent); color: var(--accent-ink); border-color: transparent; }
  .consent-btn.consent-accept:hover{ opacity: 0.9; background: var(--accent); }
  @media (max-width: 560px){
    .consent-inner{ padding: 14px 20px; }
    .consent-actions{ width:100%; }
    .consent-btn{ flex:1; }
  }

  /* ---------------- MotoLean : écran de conduite dans le mockup de téléphone ----------------
     Reprend le thème « Néon Nuit » de l'app (toujours sombre, quel que soit le thème
     du site) : fond bleu nuit, tracé cyan, virages ambre/magenta. Couleurs en dur
     volontairement — c'est une capture stylisée de l'app, pas un élément du site. */
  .phone.ml-phone{ background:#05060F; }
  .ml-hud{ position:relative; flex:1; overflow:hidden; background:
      radial-gradient(420px 420px at 15% 0%, #1A104A, transparent 70%),
      radial-gradient(380px 380px at 100% 32%, #002A38, transparent 70%), #05060F; color:#F2F5FF; }
  .ml-map{ position:absolute; inset:0; width:100%; height:100%; }
  .ml-top{ position:absolute; top:34px; left:12px; right:12px; display:flex; justify-content:space-between; align-items:flex-start; }
  .ml-zone{ background: rgba(255,47,208,0.14); border:1px solid rgba(255,47,208,0.55); border-radius:12px; padding:7px 10px; }
  .ml-zone-t{ font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#FF2FD0; }
  .ml-zone-s{ font-size:8.5px; color:#9BA3C7; margin-top:2px; font-family:'IBM Plex Mono'; }
  .ml-sign{ width:40px; height:40px; border-radius:50%; background:#fff; border:5px solid #FF2B2B; color:#05060F; display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:700; font-size:14px; flex-shrink:0; }
  .ml-pump{ position:absolute; width:24px; height:24px; border-radius:50%; background:#FFA51B; border:2px solid #fff; color:#05060F; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 4px rgba(0,0,0,.5); }
  .ml-pump svg{ width:12px; height:12px; }
  .ml-panel{ position:absolute; left:10px; right:10px; bottom:12px; display:grid; grid-template-columns: 1fr 1fr; gap:7px; }
  .ml-card{ background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:14px; padding:9px 10px; backdrop-filter: blur(10px); }
  .ml-label{ font-size:7.5px; font-weight:700; letter-spacing:.06em; color:#5D6488; text-transform:uppercase; }
  .ml-big{ font-family:'Space Grotesk'; font-weight:700; font-size:30px; line-height:1; margin-top:4px; }
  .ml-big small{ font-size:9px; font-weight:600; color:#9BA3C7; margin-left:3px; letter-spacing:.04em; }
  .ml-lean{ color:#00E5FF; text-shadow: 0 0 10px rgba(0,229,255,.55); }
  .ml-gauge{ display:block; width:100%; height:18px; margin-top:6px; }
  .ml-wide{ grid-column: 1 / -1; display:flex; justify-content:space-between; align-items:center; }
  .ml-wide-val{ font-family:'IBM Plex Mono'; font-size:11px; font-weight:600; margin-top:3px; }
  .ml-stop{ width:34px; height:34px; border-radius:50%; border:2px solid #FF2FD0; display:flex; align-items:center; justify-content:center; }
  .ml-stop span{ width:11px; height:11px; border-radius:3px; background:#FF2FD0; }
  /* Légende des couleurs de virage, sous les fonctionnalités. */
  .ml-legend{ display:flex; gap:10px 22px; flex-wrap:wrap; margin-top:22px; font-size:13px; color: var(--text-2); }
  .ml-legend span{ display:inline-flex; align-items:center; gap:8px; }
  .ml-legend i{ width:22px; height:5px; border-radius:3px; display:inline-block; }

  /* ================= Accueil v2 : trois applications à égalité ================= */
  /* Raccourcis vers les applications dans la barre de navigation. Contrairement
     aux liens texte, ils restent visibles sur mobile (icônes seules). */
  .nav-apps{ display:flex; align-items:center; gap: 6px; padding-right: 18px; margin-right: 2px; border-right: 1px solid var(--border); }
  .nav-app{ display:flex; align-items:center; gap:7px; font-size: 13px; font-weight:600; color: var(--text-2); padding: 5px 9px 5px 5px; border-radius: 100px; transition: background .15s ease, color .15s ease; }
  .nav-app:hover, .nav-app.active{ background: var(--surface-alt); color: var(--text); }
  .nav-app img{ width:22px; height:22px; border-radius:6px; flex-shrink:0; }
  .nav-app .icon-pad{ padding:3px; background: oklch(93% 0.03 155); }
  @media (max-width: 960px){ .nav-app span{ display:none; } .nav-app{ padding:5px; } }
  @media (max-width: 720px){ .nav-apps{ border-right:none; padding-right:0; } .nav-end{ gap: 12px; } }
  @media (max-width: 420px){ .nav-cta{ display:none; } }

  /* Hero : texte à gauche, les trois applications posées sur l'arête à droite. */
  .hero2{ position:relative; padding: 72px 0 64px; overflow:hidden; }
  .hero2-grid{ display:grid; grid-template-columns: 1fr 0.95fr; gap: 40px; align-items:center; }
  @media (max-width: 900px){ .hero2-grid{ grid-template-columns: 1fr; gap: 28px; } }
  .hero2 .hero-title{ font-size: clamp(38px, 5vw, 58px); }
  .hero-stats{ display:flex; gap: 28px; margin-top: 36px; flex-wrap: wrap; }
  .hero-stat{ display:flex; flex-direction:column; gap:3px; }
  .hero-stat b{ font-family:'Fraunces'; font-weight:600; font-size: 26px; line-height:1; }
  .hero-stat span{ font-size: 12px; color: var(--text-3); }

  /* Trois tuiles « vivantes » à droite du hero : chaque application dans sa
     palette, avec un aperçu animé de ce qu'elle fait. Animations purement CSS,
     coupées si l'utilisateur préfère réduire les mouvements. */
  .hero-apps{ display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 14px; width:100%; max-width: 520px; justify-self:end; }
  @media (max-width: 900px){ .hero-apps{ justify-self:stretch; max-width:none; } }
  @media (max-width: 480px){ .hero-apps{ grid-template-columns: 1fr; } .ha-moto{ grid-row:auto !important; grid-column:auto !important; } }
  .ha{ background: var(--surface); color: var(--text); border:1px solid var(--border); border-radius: 22px; padding: 16px; display:flex; flex-direction:column; gap: 14px; box-shadow: var(--shadow); transition: transform .2s ease, border-color .2s ease; }
  .ha:hover{ transform: translateY(-3px); border-color: var(--accent); }
  .ha:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
  .ha-revver{ grid-column:1; grid-row:1; }
  .ha-tbx{ grid-column:1; grid-row:2; }
  .ha-moto{ grid-column:2; grid-row: 1 / span 2; }
  .ha-head{ display:flex; align-items:center; gap:10px; }
  .ha-icon{ width:36px; height:36px; border-radius:10px; overflow:hidden; flex-shrink:0; }
  .ha-icon img{ width:100%; height:100%; object-fit:cover; }
  .ha-icon.pad{ background: var(--accent-2); display:flex; align-items:center; justify-content:center; }
  .ha-icon.pad img{ width:64%; height:64%; object-fit:contain; }
  .ha-name{ font-family:'Space Grotesk'; font-weight:700; font-size: 15px; line-height:1.1; }
  .ha-state{ font-family:'IBM Plex Mono'; font-size: 10px; letter-spacing:.04em; text-transform:uppercase; color: var(--text-3); margin-top:2px; }
  .ha-go{ margin-left:auto; width:14px; height:14px; color: var(--text-3); flex-shrink:0; }
  .ha:hover .ha-go{ color: var(--accent); }
  .ha-row{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size: 12px; color: var(--text-2); }
  .ha-row b{ font-family:'IBM Plex Mono'; font-weight:600; color: var(--text); font-variant-numeric: tabular-nums; }
  .ha-bar{ height:6px; border-radius:100px; background: var(--surface-alt); overflow:hidden; }
  .ha-bar i{ display:block; height:100%; border-radius:inherit; background: var(--accent); }
  .ha-panel{ background: var(--bg); border:1px solid var(--border); border-radius: 14px; padding: 11px 12px; display:flex; flex-direction:column; gap: 8px; }

  /* Revver : jauge d'entretien qui se remplit. */
  .ha-revver .ha-bar i{ width: 78%; animation: ha-fill 1.6s cubic-bezier(.2,.7,.2,1) .3s both; }
  @keyframes ha-fill{ from{ width:0; } }

  /* Toolbox : conversion de fichier en boucle. */
  .ha-file{ display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono'; font-size: 11.5px; }
  .ha-file span{ padding: 3px 7px; border-radius: 6px; background: var(--surface-alt); }
  .ha-file span.out{ background: var(--accent-2); color: var(--accent); font-weight:600; }
  .ha-file svg{ width:12px; height:12px; color: var(--text-3); flex-shrink:0; }
  .ha-tbx .ha-bar i{ animation: ha-convert 3.2s ease-in-out infinite; }
  @keyframes ha-convert{ 0%{ width:0; } 70%, 100%{ width:100%; } }

  /* MotoLean : inclinomètre dont l'aiguille balance d'un virage à l'autre.
     Toujours sombre, comme l'app en conduite. */
  .ha-moto{ background: #05060F; border-color: #1B2140; color:#F2F5FF; }
  .ha-moto .ha-state{ color:#9BA3C7; }
  .ha-moto .ha-go{ color:#5D6488; }
  .ha-moto:hover{ border-color: #00E5FF; }
  .ha-dial{ position:relative; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 6px; min-height: 180px;
    background: radial-gradient(160px 120px at 50% 70%, rgba(0,229,255,.12), transparent 70%); border-radius: 14px; }
  .ha-dial svg{ width:100%; max-width: 210px; overflow:visible; }
  .ha-needle{ transform-origin: 100px 100px; animation: ha-lean 4.8s ease-in-out infinite; }
  @keyframes ha-lean{ 0%,100%{ transform: rotate(-34deg); } 45%,55%{ transform: rotate(38deg); } }
  .ha-lean-label{ font-size: 9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#5D6488; }
  .ha-lean-max{ display:flex; gap: 14px; font-family:'IBM Plex Mono'; font-size: 11px; color:#9BA3C7; }
  .ha-lean-max b{ color:#00E5FF; font-weight:600; }
  .ha-moto-foot{ display:flex; gap:6px; flex-wrap:wrap; }
  .ha-chip{ font-size: 10px; font-weight:600; padding: 4px 8px; border-radius:100px; border:1px solid; }
  @media (prefers-reduced-motion: reduce){
    .ha-revver .ha-bar i, .ha-tbx .ha-bar i{ animation:none; }
    .ha-tbx .ha-bar i{ width: 64%; }
    .ha-needle{ animation:none; transform: rotate(-24deg); }
  }

  /* Vitrines : une par application, chacune dans sa propre palette grâce aux
     blocs .product-<nom> déjà définis plus haut. */
  .show-list{ display:flex; flex-direction:column; gap: 22px; }
  .show{ background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 28px; overflow:hidden; display:grid; grid-template-columns: 1fr 1fr; min-height: 440px; }
  .show.flip .show-text{ order:2; }
  @media (max-width: 860px){ .show{ grid-template-columns: 1fr; min-height:0; } .show.flip .show-text{ order:0; } }
  .show-text{ padding: 44px 44px 40px; display:flex; flex-direction:column; gap: 16px; }
  @media (max-width: 560px){ .show-text{ padding: 28px 22px 26px; } }
  .show-head{ display:flex; align-items:center; gap: 14px; }
  .show-icon{ width:56px; height:56px; border-radius:16px; overflow:hidden; flex-shrink:0; box-shadow: var(--shadow); }
  .show-icon img{ width:100%; height:100%; object-fit:cover; }
  .show-icon.pad{ background: var(--accent-2); display:flex; align-items:center; justify-content:center; }
  .show-icon.pad img{ width:64%; height:64%; object-fit:contain; }
  .show-tag{ font-family:'IBM Plex Mono'; font-size: 11px; color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; }
  .show-name{ font-family:'Space Grotesk'; font-weight:700; font-size: 28px; letter-spacing:-0.01em; line-height:1.1; }
  .show-pitch{ font-size: 17px; line-height:1.5; font-weight:500; text-wrap: balance; margin-top: 6px; }
  .show-points{ display:flex; flex-direction:column; gap: 9px; }
  .show-points li{ display:flex; gap:10px; font-size: 14px; color: var(--text-2); line-height:1.45; }
  .show-points li::before{ content:""; width:6px; height:6px; border-radius:50%; background: var(--accent); flex-shrink:0; margin-top:7px; }
  .show-status{ display:inline-flex; align-self:flex-start; align-items:center; gap:7px; font-size: 12px; font-weight:600; padding: 5px 11px; border-radius: 100px; background: var(--accent-2); color: var(--accent); }
  .show-status::before{ content:""; width:7px; height:7px; border-radius:50%; background: currentColor; }
  .show-status.soon{ background: var(--amber-2, var(--accent-2)); color: var(--amber, var(--accent)); }
  .show-actions{ display:flex; align-items:center; gap: 18px; flex-wrap:wrap; margin-top: auto; padding-top: 10px; }
  .show-btn{ font-size: 14px; font-weight:600; padding: 11px 20px; border-radius:100px; background: var(--accent); color: var(--accent-ink); display:inline-flex; align-items:center; gap:7px; }
  .show-btn svg{ width:13px; height:13px; }
  .show-sub{ font-size: 13px; font-weight:600; color: var(--text-2); }
  .show-sub:hover{ color: var(--accent); }

  /* Visuel : l'aperçu « sort » du bord bas du panneau. */
  .show-visual{ position:relative; overflow:hidden; background: var(--surface-alt); border-left: 1px solid var(--border); display:flex; align-items:flex-end; justify-content:center; padding: 44px 28px 0; min-height: 360px; }
  .show.flip .show-visual{ border-left:none; border-right: 1px solid var(--border); }
  @media (max-width: 860px){ .show-visual, .show.flip .show-visual{ border-left:none; border-right:none; border-top: 1px solid var(--border); min-height: 320px; } }
  .show-visual::before{ content:""; position:absolute; width: 380px; height: 380px; left:50%; top: 55%; transform: translate(-50%,-50%); border-radius:50%; background: radial-gradient(circle, var(--accent-2), transparent 70%); }
  .show-shots{ position:relative; display:flex; align-items:flex-end; gap: 0; height: 100%; }
  .show-shot{ width: 188px; border-radius: 22px 22px 0 0; overflow:hidden; box-shadow: var(--shadow); margin-bottom: -60px; }
  .show-shot img{ width:100%; height:auto; display:block; }
  .show-shot + .show-shot{ margin-left: -34px; transform: translateY(40px) rotate(4deg); }
  .show-shot:first-child{ transform: rotate(-3deg); z-index:1; }
  @media (max-width: 560px){ .show-shot{ width: 150px; } }
  .show-visual .phone{ transform: none; width: 262px; height: 480px; margin-bottom: -80px; }
  .show-visual .tbx-mock{ position:relative; width: 100%; max-width: 440px; margin-bottom: -24px; border-bottom-left-radius:0; border-bottom-right-radius:0; }

  /* Bandeau d'appel au contact, sous les services. */
  .cta-band{ padding: 0 0 88px; }
  .cta-card{ background: var(--text); color: var(--bg); border-radius: 28px; padding: 44px 44px; display:flex; align-items:center; justify-content:space-between; gap: 28px; flex-wrap:wrap; position:relative; overflow:hidden; }
  .cta-card h2{ font-family:'Fraunces'; font-weight:600; font-size: clamp(24px, 3vw, 32px); letter-spacing:-0.01em; max-width: 22ch; text-wrap: balance; }
  .cta-card p{ font-size: 15px; opacity: .72; margin-top: 10px; max-width: 48ch; line-height:1.55; }
  .cta-card .btn-primary{ box-shadow:none; }
  @media (max-width: 560px){ .cta-card{ padding: 30px 24px; } }

  /* Pied de page en colonnes : chaque application garde ses liens de support et de
     confidentialité à portée de clic (URLs déclarées aux stores). */
  .foot-cols{ display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
  @media (max-width: 760px){ .foot-cols{ grid-template-columns: 1fr 1fr; } .foot-cols > :first-child{ grid-column: 1 / -1; } }
  .foot-col-title{ font-family:'IBM Plex Mono'; font-size: 11px; letter-spacing:.05em; text-transform:uppercase; color: var(--text-3); margin-bottom: 12px; }
  .foot-col a{ display:block; font-size: 13px; color: var(--text-2); padding: 4px 0; }
  .foot-col a:hover{ color: var(--accent); }