/* Feuille de style de la page d'accueil BeautyGo — SOURCE UNIQUE.
 *
 * Elle était en ligne dans chacune des 4 copies de la page (fr, en, pt, es),
 * soit ~57 Ko × 4 à tenir alignés à la main. Cette duplication est la cause
 * MÉCANIQUE des dérives constatées (mode quirks, section carte absente des
 * traductions, bandeau désynchronisé, règle `.device-iframe` perdue en cours
 * de propagation) : rien ne peut garantir que quatre copies éditées à la main
 * restent identiques, et elles ne l'étaient plus.
 *
 * Les deux blocs <style> d'origine sont concaténés dans leur ORDRE d'origine —
 * la position d'une feuille dans le document n'influe pas sur la cascade, mais
 * l'ordre entre feuilles, si.
 *
 * ⚠️ Ne pas remettre de CSS en ligne dans index.html : ce serait rouvrir
 * exactement le problème qu'on vient de fermer.
 */

    /* ============================ RESET & BASE ============================ */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
    :root {
      --primary: #E91E63;
      --primary-deep: #AD1457;
      --primary-soft: #FCE4EC;
      --accent: #F472B6;
      --gold: #F5C16C;
      --ink: #18181B;
      --ink-2: #27272A;
      --muted: #71717A;
      --line: rgba(24, 24, 27, 0.08);
      --bg: #FAFAF9;
      --surface: #FFFFFF;
      --shadow-sm: 0 1px 2px rgba(24,24,27,0.04), 0 1px 3px rgba(24,24,27,0.06);
      --shadow-md: 0 4px 16px rgba(24,24,27,0.06), 0 12px 32px rgba(24,24,27,0.04);
      --shadow-lg: 0 24px 60px rgba(233,30,99,0.18), 0 8px 24px rgba(24,24,27,0.08);
      --shadow-glow: 0 30px 80px rgba(233,30,99,0.25);
      --radius-sm: 10px;
      --radius: 16px;
      --radius-lg: 28px;
      --max: 1240px;
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
    }
    body {
      font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
      color: var(--ink);
      background: var(--bg);
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      /* 🔴 `clip`, PAS `hidden`. `overflow-x: hidden` fait calculer
         `overflow: hidden auto` sur le body, qui devient alors le conteneur de
         défilement à la place du viewport — `window.scrollY` reste à 0, et
         toute timeline de vue (`animation-timeline: view()`) cesse de
         progresser puisqu'elle traque la position dans un scrollport qui ne
         bouge pas. `clip` contient le débordement horizontal SANS créer de
         scroller : le viewport reste le scrollport, les animations au
         défilement fonctionnent. Vérifié au navigateur : `overflow-x: hidden`
         → le body scrolle ; `clip` → le viewport scrolle. */
      overflow-x: clip;
    }
    a { text-decoration: none; color: inherit; }
    img { display: block; max-width: 100%; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }
    .serif { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; }

    /* Reveal-on-scroll */
    .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
    .reveal.in { opacity: 1; transform: translateY(0); }
    /* 🔴 RÉPARATION DU LCP, et fin du fondu-montée sur les titres.
       `index.html:189` porte `<div class="hero-visual reveal reveal-delay-2">`.
       Or `.reveal` part à `opacity: 0` — **l'image du héros, qui EST le plus
       grand élément peint, démarre donc invisible**, avec 160 ms de délai puis
       700 ms de transition. Un élément à opacité 0 n'est pas comptabilisé comme
       LCP tant qu'il n'est pas peint : on retardait volontairement la mesure
       même que l'on soigne par ailleurs (`fetchpriority="high"`, dimensions
       réservées). Ce n'était pas un choix, c'était une régression.

       Neutralisé ICI plutôt qu'en retirant la classe dans les 4 HTML : la
       duplication ×4 est la cause mécanique des dérives de ce dossier, on ne
       la nourrit pas pour une classe.

       Au passage, les TITRES cessent de monter. Le fondu-montée sur 49
       éléments est ce qui rendait la page générique ; le mouvement doit être
       l'exception, pas le protocole d'apparition de tout. */
    h1.reveal, .hero-eyebrow.reveal, .hero-sub.reveal, .hero-cta-group.reveal,
    .hero-proof.reveal, .hero-visual.reveal,
    .section-eyebrow.reveal, .section-title.reveal, .section-sub.reveal,
    .cta-section.reveal {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .reveal-delay-1,
    .reveal-delay-2,
    .reveal-delay-3 { transition-delay: 0s; }
    .reveal-delay-2 { transition-delay: 160ms; }
    .reveal-delay-3 { transition-delay: 240ms; }
    /* Respect du réglage système « réduire les animations ».
       Ce bloc ne couvrait QUE `.reveal` — 12 animations continuent de tourner
       en pratique (mesuré au navigateur : float, hero-float, sparkle, pulse-dot,
       marquee, spin), plus le défilement fluide. Pour quelqu'un sujet au mal des
       transports ou à des troubles vestibulaires, c'est le contraire de ce qu'il
       a demandé à son système. C'est aussi le prérequis avant d'ajouter la
       moindre animation : sinon on en ajoute par-dessus une garde qui ne garde
       rien. */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }

      /* 🔴 Une animation dont `animation-timeline` n'est pas `auto` IGNORE sa
         durée : le `animation-duration: 0.001ms` ci-dessous ne garde donc rien
         contre les animations pilotées par le défilement. On les remet d'abord
         sur l'horloge du document — `auto`, et non `none` : `auto` laisse le
         `0.001ms` + `fill: both` les terminer instantanément sur leur dernière
         image-clé, donc sur l'état accompli. `none` les laisserait sans
         horloge du tout. */
      *, *::before, *::after { animation-timeline: auto !important; }

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

      /* Tout ce qui bouge en boucle s'arrête. `!important` assumé : ces
         animations sont déclarées sur des sélecteurs plus spécifiques, et il
         n'y a pas de cas où l'on voudrait les rejouer sous ce réglage. */
      *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        /* Les DÉLAIS comptent autant que les durées : un élément en attente de
           son `animation-delay` reste « en cours » pour le navigateur. Mesuré
           ici — 3 étincelles du héros (délais 0,6 / 1,2 / 1,8 s) survivaient à
           une garde qui ne remettait à zéro que la durée. */
        animation-delay: 0s !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
      }

      /* EXCEPTION — le spinner de chargement. Le figer transformerait un
         indicateur d'activité en écran qui a l'air planté : on informe moins
         bien qu'avant. Il tourne donc encore, simplement plus lentement. */
      .spinner {
        animation-duration: 2.4s !important;
        animation-iteration-count: infinite !important;
      }

      /* Le bandeau défilant s'immobilise plutôt que de sauter à sa fin. */
      .marquee-track { animation: none !important; transform: none !important; }
    }

    /* WCAG 2.2.2 — tout mouvement automatique de plus de 5 s doit pouvoir être
       arrêté. Le bandeau tourne en boucle de 35 s : le survol et le focus
       clavier le mettent en pause, ce qui rend aussi ses liens cliquables. */
    .marquee:hover .marquee-track,
    .marquee:focus-within .marquee-track { animation-play-state: paused; }

    /* ═══════════════════════════════════════════════════════════════════
       LUMIÈRE RASANTE — la grammaire d'animation de cette page.

       Principe unique : il n'y a qu'UNE source de lumière, et c'est le
       défilement. Rien n'apparaît en montant ; la matière PREND au passage de
       la lumière. « Lumière rasante » est le terme de métier de la photo
       beauté — l'éclairage de biais qui révèle le grain d'une peau, le fondu
       d'un teint, le glacis d'un vernis. C'est ce que font les stylistes ;
       une page où des boîtes glissent parle de logiciel.

       Les lois, opposables en relecture de diff :
        L1 — aucune apparition par `translateY`.
        L2 — le décalage est GÉOMÉTRIQUE (position en X), jamais décrété en ms.
        L3 — toute animation SE TERMINE. Aucune boucle ajoutée.
        L4 — l'état au repos EST l'état final : les `@keyframes` n'ont qu'un
             `from`, le `to` implicite est la valeur naturelle. Sans JS, sans
             support, sous `reduced-motion` : la page est accomplie.
        L5 — le texte à lire n'est JAMAIS dégradé (ni sous-contrasté, ni
             masqué, ni déplacé). Le pigment ne touche que du décoratif.
        L6 — sur le chemin du défilement : `transform` et `opacity`, rien
             d'autre. Pas de `filter`, pas de `mask`, pas de `box-shadow`.
        L7 — rien au-dessus d'une iframe qui ne soit RETIRÉ du DOM à la fin.
       ═══════════════════════════════════════════════════════════════════ */

    :root {
      --ease-glacis: cubic-bezier(.30,.05,.25,1);
      --glacis-a: .14;
    }

    /* ① LE GLACIS — la bande de lumière qui traverse une surface.
       `transform` pur sur un calque de dégradé : zéro repaint, ~0,2 ms par
       image. C'est 80 % de la direction, et c'est la primitive la moins chère
       du lot. */
    .lum-glacis { position: relative; }
    .lum-glacis::after {
      content: '';
      position: absolute; inset: 0; z-index: 3;
      pointer-events: none;
      border-radius: inherit;
      background: linear-gradient(105deg,
          transparent 34%,
          rgba(255,255,255,var(--glacis-a)) 47%,
          rgba(252,228,236,calc(var(--glacis-a) * .6)) 53%,
          transparent 66%);
      transform: translateX(-130%);
    }
    /* `from` seul : le `to` implicite est la position naturelle du calque,
       hors champ à droite. C'est la loi L4 en pratique. */
    @keyframes lum-glacis {
      from { transform: translateX(-130%); }
      to   { transform: translateX(130%); }
    }

    /* CHEMIN B — repli universel ET tout le mobile. Déclaré EN PREMIER. */
    html.js .lum-glacis.is-lit::after {
      animation: lum-glacis 720ms var(--ease-glacis) both;
    }

    /* CHEMIN A — desktop moderne, scrubbé par le défilement lui-même.
       Déclaré APRÈS : à spécificité égale, il gagne par l'ordre de source.
       Le mobile garde donc LE GESTE et ne perd que le scrubbing — ce n'est
       pas « Paris a le spectacle, Lomé a un fondu ». */
    @supports (animation-timeline: view()) {
      @media (prefers-reduced-motion: no-preference) and (min-width: 821px) {
        .lum-glacis::after {
          animation: lum-glacis linear both;
          animation-timeline: view();
          animation-range: entry 30% cover 60%;
        }
      }
    }

    /* ② LE PIGMENT — RETIRÉ pour l'instant, volontairement.
       L'idée : les pastilles d'icône arrivent en gris et prennent leur couleur
       au passage de la lumière. Elle repose sur `filter: grayscale()`, que les
       lois de cette grammaire n'autorisent qu'en one-shot fini sur petite
       surface (L6) — et je n'ai pas su établir au banc d'essai pourquoi la
       valeur calculée restait à `grayscale(0)` alors que la règle s'applique.
       Livrer un effet dont je ne comprends pas le comportement, c'est risquer
       des icônes désaturées en production si l'un des deux chemins échoue.
       Le glacis, lui, est vérifié (ViewTimeline active, transform pur).
       À reprendre en isolant le cas dans une page de test. */

    /* ============================ NAV ============================ */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      background: rgba(250, 250, 249, 0.72);
      backdrop-filter: saturate(180%) blur(18px);
      -webkit-backdrop-filter: saturate(180%) blur(18px);
      border-bottom: 1px solid transparent;
      transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
    }
    nav.scrolled { border-bottom-color: var(--line); background: rgba(255,255,255,0.86); }
    .nav-inner {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 28px;
      height: 68px;
      display: flex; align-items: center; justify-content: space-between;
    }
    .nav-brand {
      font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em;
      color: var(--ink);
      display: flex; align-items: center; gap: 8px;
    }
    .nav-brand-dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
      box-shadow: 0 0 0 4px rgba(233,30,99,0.12);
    }
    .nav-links { display: flex; gap: 30px; align-items: center; }
    .nav-links a { font-size: 0.93rem; color: var(--ink-2); font-weight: 500; transition: color 0.2s; }
    .nav-links a:hover { color: var(--primary); }
    .nav-cta {
      padding: 0.6rem 1.25rem; border-radius: 999px;
      background: var(--ink); color: var(--surface) !important;
      font-size: 0.88rem; font-weight: 600;
      transition: transform 0.2s var(--ease), background 0.2s;
    }
    .nav-cta:hover { background: var(--primary); transform: translateY(-1px); }
    .nav-burger {
      display: none;
      width: 42px; height: 42px;
      border-radius: 12px;
      align-items: center; justify-content: center;
      background: var(--surface);
      border: 1px solid var(--line);
      color: var(--ink);
      transition: background 0.2s;
    }
    .nav-burger:hover { background: var(--primary-soft); }
    .nav-burger svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    /* Compact app CTA shown next to the burger on mobile, so the invitation to
       open the web app is visible WITHOUT opening the drawer. Desktop keeps the
       full .nav-cta inside .nav-links; this variant is hidden there. */
    .nav-cta-mobile { display: none; }
    .mobile-drawer {
      position: fixed; inset: 0;
      background: rgba(24,24,27,0.4);
      backdrop-filter: blur(8px);
      z-index: 110;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s var(--ease);
    }
    .mobile-drawer.open { opacity: 1; pointer-events: auto; }
    .mobile-drawer-panel {
      position: absolute; top: 0; right: 0;
      width: min(82vw, 340px); height: 100%;
      background: var(--surface);
      padding: 80px 28px 28px;
      display: flex; flex-direction: column;
      gap: 4px;
      transform: translateX(100%);
      transition: transform 0.35s var(--ease);
      box-shadow: -20px 0 60px rgba(24,24,27,0.18);
    }
    .mobile-drawer.open .mobile-drawer-panel { transform: translateX(0); }
    .mobile-drawer-panel a {
      padding: 14px 0;
      font-size: 1.05rem; font-weight: 600;
      color: var(--ink);
      border-bottom: 1px solid var(--line);
      display: flex; align-items: center; justify-content: space-between;
    }
    .mobile-drawer-panel a:last-child { border-bottom: none; }
    .mobile-drawer-panel a svg { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .mobile-drawer-cta {
      margin-top: 20px;
      background: var(--ink);
      color: var(--surface) !important;
      padding: 14px 20px !important;
      border-radius: 999px !important;
      justify-content: center !important;
      border-bottom: none !important;
    }
    .mobile-drawer-close {
      position: absolute; top: 18px; right: 18px;
      width: 36px; height: 36px;
      border-radius: 50%;
      background: var(--bg);
      color: var(--ink);
      display: flex; align-items: center; justify-content: center;
    }
    .mobile-drawer-close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; }

    /* ============================ HERO ============================ */
    .hero {
      position: relative;
      padding: 130px 28px 80px;
      overflow: hidden;
      overflow: clip;
      min-height: 100vh;
      display: flex; align-items: center;
    }
    .hero-bg {
      position: absolute; inset: 0;
      background:
        radial-gradient(60% 80% at 100% 0%, rgba(244,114,182,0.30) 0%, transparent 60%),
        radial-gradient(50% 70% at 0% 100%, rgba(245,193,108,0.18) 0%, transparent 55%),
        radial-gradient(40% 60% at 50% 50%, rgba(252,228,236,0.5) 0%, transparent 70%),
        linear-gradient(180deg, #FFF 0%, #FAFAF9 100%);
      z-index: -1;
    }
    .hero-mesh {
      position: absolute; inset: -10%;
      z-index: -1;
      filter: blur(80px);
      opacity: 0.85;
    }
    .hero-mesh::before,
    .hero-mesh::after {
      content: '';
      position: absolute;
      width: 520px; height: 520px;
      border-radius: 50%;
      /* Héros statique — les halos du fond ne flottent plus non plus. */
    }
    .hero-mesh::before {
      top: -10%; right: -8%;
      background: radial-gradient(circle, #F472B6 0%, transparent 70%);
    }
    .hero-mesh::after {
      bottom: -15%; left: -10%;
      width: 600px; height: 600px;
      background: radial-gradient(circle, #FBCFE8 0%, transparent 70%);
      animation-delay: -7s;
    }
    @keyframes float {
      0%, 100% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(40px, -30px) scale(1.08); }
    }
    .hero-inner {
      max-width: var(--max);
      margin: 0 auto;
      width: 100%;
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: 64px;
      align-items: center;
    }
    .hero-eyebrow {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 0.45rem 1rem;
      background: rgba(255,255,255,0.7);
      backdrop-filter: blur(10px);
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: 0.82rem; font-weight: 600;
      color: var(--ink-2);
      box-shadow: var(--shadow-sm);
      margin-bottom: 28px;
    }
    .hero-eyebrow .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px rgba(233,30,99,0.18); animation: pulse-dot 2.4s infinite; }
    @keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.7; } }

    .hero h1 {
      font-size: clamp(2.6rem, 6.2vw, 4.6rem);
      font-weight: 800;
      line-height: 1.02;
      letter-spacing: -0.035em;
      margin-bottom: 22px;
      color: var(--ink);
    }
    .hero h1 .pink {
      background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 70%, var(--gold) 110%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .hero h1 .serif { display: inline-block; padding: 0 0.08em; color: var(--primary); }

    .hero-sub {
      font-size: clamp(1.05rem, 1.5vw, 1.2rem);
      color: var(--muted);
      max-width: 540px;
      margin-bottom: 36px;
      line-height: 1.55;
    }
    .hero-cta-group { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 0.95rem 1.65rem;
      border-radius: 999px;
      font-size: 0.97rem; font-weight: 600;
      transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s;
      white-space: nowrap;
    }
    .btn svg { width: 18px; height: 18px; }
    .btn-primary {
      background: var(--ink); color: var(--surface);
      box-shadow: 0 6px 20px rgba(24,24,27,0.18);
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(233,30,99,0.35); background: var(--primary); }
    .btn-ghost {
      background: rgba(255,255,255,0.7);
      backdrop-filter: blur(10px);
      color: var(--ink);
      border: 1px solid var(--line);
    }
    .btn-ghost:hover { background: var(--surface); transform: translateY(-2px); box-shadow: var(--shadow-md); }

    .hero-proof {
      display: flex; gap: 30px; align-items: center; flex-wrap: wrap;
      padding-top: 28px; border-top: 1px solid var(--line);
    }
    .hero-proof-item { display: flex; flex-direction: column; gap: 2px; }
    .hero-proof-item strong {
      font-size: 1.5rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em;
    }
    .hero-proof-item span { font-size: 0.82rem; color: var(--muted); }
    .hero-proof-divider { width: 1px; height: 32px; background: var(--line); }

    .hero-visual {
      position: relative;
      display: flex; align-items: center; justify-content: center;
    }
    .hero-visual img {
      width: 100%;
      max-width: 640px;
      /* height: auto is critical — without it the HTML height="400" attr
         stays fixed while width scales down on mobile → stretched image. */
      height: auto;
      filter: drop-shadow(0 30px 60px rgba(233,30,99,0.18));
      /* Héros statique — aucune animation (fondateur). L'image ne flotte plus. */
    }
    .hero-sparkles { position: absolute; inset: 0; pointer-events: none; }
    .sparkle {
      position: absolute;
      width: 14px; height: 14px;
      color: var(--primary);
      opacity: 0.7;
      animation: sparkle 3.2s ease-in-out infinite;
    }
    .sparkle:nth-child(1) { top: 8%; left: 18%; animation-delay: 0s; }
    .sparkle:nth-child(2) { top: 22%; right: 14%; animation-delay: 0.6s; width: 18px; height: 18px; }
    .sparkle:nth-child(3) { bottom: 26%; left: 8%; animation-delay: 1.2s; width: 10px; height: 10px; }
    .sparkle:nth-child(4) { bottom: 12%; right: 22%; animation-delay: 1.8s; width: 16px; height: 16px; }
    @keyframes sparkle {
      0%, 100% { transform: scale(0.6) rotate(0); opacity: 0.4; }
      50% { transform: scale(1.1) rotate(180deg); opacity: 1; }
    }

    /* ============================ MARQUEE BAR ============================ */
    .marquee {
      padding: 24px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--surface);
      overflow: hidden;
      overflow: clip;
      white-space: nowrap;
    }
    .marquee-track {
      display: inline-flex;
      gap: 60px;
      animation: marquee 35s linear infinite;
      align-items: center;
    }
    .marquee-item {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 0.95rem; font-weight: 600;
      color: var(--ink-2);
      letter-spacing: -0.01em;
    }
    .marquee-item svg { width: 18px; height: 18px; color: var(--primary); }
    .marquee-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); }
    @keyframes marquee {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    /* ============================ SECTIONS ============================ */
    .section {
      padding: 110px 28px;
      max-width: var(--max);
      margin: 0 auto;
    }
    .section-eyebrow {
      display: inline-block;
      padding: 0.35rem 0.85rem;
      background: var(--primary-soft);
      color: var(--primary-deep);
      border-radius: 999px;
      font-size: 0.78rem; font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }
    .section-title {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.05;
      margin-bottom: 18px;
      max-width: 700px;
    }
    .section-sub {
      font-size: 1.1rem; color: var(--muted);
      max-width: 600px;
      margin-bottom: 60px;
    }
    .section-head { margin-bottom: 60px; }
    .section-head-center { text-align: center; }
    .section-head-center .section-title,
    .section-head-center .section-sub { margin-left: auto; margin-right: auto; }

    /* ============================ FEATURES (BENTO) ============================ */
    .bento {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: minmax(180px, auto);
      gap: 20px;
    }
    .bento-card {
      background: var(--surface);
      border-radius: var(--radius);
      padding: 28px;
      border: 1px solid var(--line);
      position: relative;
      overflow: hidden;
      overflow: clip;
      transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
      display: flex; flex-direction: column;
    }
    .bento-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(233,30,99,0.18); }
    .bento-card.dark {
      background: var(--ink);
      color: var(--surface);
      border-color: transparent;
    }
    .bento-card.dark h3 { color: var(--surface); }
    .bento-card.dark p { color: rgba(255,255,255,0.7); }
    .bento-card.gradient {
      background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
      color: var(--surface);
      border-color: transparent;
    }
    .bento-card.gradient h3 { color: var(--surface); }
    .bento-card.gradient p { color: rgba(255,255,255,0.92); }

    .b-icon {
      width: 48px; height: 48px;
      border-radius: 14px;
      background: var(--primary-soft);
      color: var(--primary);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 20px;
    }
    .b-icon svg { width: 24px; height: 24px; stroke-width: 2; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .bento-card.dark .b-icon, .bento-card.gradient .b-icon { background: rgba(255,255,255,0.16); color: var(--surface); }
    .bento-card h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; color: var(--ink); }
    .bento-card p { font-size: 0.95rem; color: var(--muted); line-height: 1.55; }
    .bento-card-bg {
      position: absolute;
      right: -40px; bottom: -40px;
      width: 200px; height: 200px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(244,114,182,0.18) 0%, transparent 70%);
      pointer-events: none;
    }

    /* Bento layout */
    .bento .c-1 { grid-column: span 4; }
    .bento .c-2 { grid-column: span 4; }
    .bento .c-3 { grid-column: span 4; }
    .bento .c-4 { grid-column: span 6; }
    .bento .c-5 { grid-column: span 3; }
    .bento .c-6 { grid-column: span 3; }

    /* mini map preview inside bento */
    .map-preview {
      margin-top: auto;
      height: 130px;
      border-radius: 12px;
      background:
        radial-gradient(circle at 30% 40%, rgba(233,30,99,0.8) 0%, rgba(233,30,99,0.3) 6%, transparent 8%),
        radial-gradient(circle at 65% 60%, rgba(233,30,99,0.8) 0%, rgba(233,30,99,0.3) 6%, transparent 8%),
        radial-gradient(circle at 80% 30%, rgba(233,30,99,0.8) 0%, rgba(233,30,99,0.3) 6%, transparent 8%),
        radial-gradient(circle at 20% 75%, rgba(233,30,99,0.8) 0%, rgba(233,30,99,0.3) 6%, transparent 8%),
        linear-gradient(135deg, #1F1B2E 0%, #2D2438 100%);
      position: relative; overflow: hidden; overflow: clip;
    }
    .map-preview::after {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 20px 20px;
    }

    /* mini calendar preview */
    .cal-preview {
      margin-top: auto;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
    }
    .cal-cell {
      aspect-ratio: 1;
      border-radius: 6px;
      background: rgba(255,255,255,0.06);
      font-size: 0.7rem;
      color: rgba(255,255,255,0.5);
      display: flex; align-items: center; justify-content: center;
    }
    .cal-cell.active { background: var(--surface); color: var(--ink); font-weight: 700; }
    .cal-cell.booked { background: rgba(244,114,182,0.4); color: var(--surface); }

    /* chat preview */
    .chat-preview {
      margin-top: auto;
      display: flex; flex-direction: column; gap: 8px;
    }
    .chat-bubble {
      max-width: 80%;
      padding: 8px 12px;
      border-radius: 14px;
      font-size: 0.83rem;
      line-height: 1.4;
    }
    .chat-bubble.them { background: rgba(255,255,255,0.1); color: var(--surface); align-self: flex-start; border-bottom-left-radius: 4px; }
    .chat-bubble.me { background: var(--surface); color: var(--ink); align-self: flex-end; border-bottom-right-radius: 4px; }

    /* star rating preview */
    .stars-preview { display: flex; gap: 4px; margin-top: auto; }
    .stars-preview svg { width: 22px; height: 22px; color: var(--gold); fill: currentColor; }
    .stars-preview .empty { color: var(--line); }

    /* ============================ APPS SHOWCASE ============================ */
    .apps-bg {
      background: linear-gradient(180deg, #FAFAF9 0%, #F5F5F4 100%);
      padding-top: 110px;
      padding-bottom: 110px;
      position: relative;
      overflow: hidden;
      overflow: clip;
    }
    .apps-bg::before {
      content: '';
      position: absolute;
      top: -10%; right: -10%;
      width: 500px; height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(244,114,182,0.12) 0%, transparent 70%);
      filter: blur(40px);
    }
    .apps-inner { max-width: var(--max); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }

    .advice-banner {
      max-width: 880px;
      margin: 0 auto 70px;
      padding: 24px 28px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: 20px;
      align-items: center;
    }
    .advice-icon {
      width: 56px; height: 56px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
      display: flex; align-items: center; justify-content: center;
      color: var(--surface);
    }
    .advice-icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .advice-banner p { font-size: 0.94rem; color: var(--ink-2); line-height: 1.55; }
    .advice-banner strong { color: var(--ink); font-weight: 700; }

    .app-row {
      display: grid;
      grid-template-columns: 0.85fr 1.15fr;
      gap: 70px;
      align-items: center;
      margin-bottom: 110px;
    }
    .app-row:last-child { margin-bottom: 0; }
    .app-row.reverse .app-info { order: 2; }
    .app-row.reverse .app-preview { order: 1; }

    .app-badge {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 0.4rem 0.95rem;
      background: var(--primary-soft);
      color: var(--primary-deep);
      border-radius: 999px;
      font-size: 0.8rem; font-weight: 600;
      letter-spacing: 0.02em;
      margin-bottom: 18px;
    }
    .app-badge svg { width: 14px; height: 14px; }
    .app-row h3 {
      font-size: clamp(1.8rem, 3vw, 2.4rem);
      font-weight: 800;
      letter-spacing: -0.025em;
      line-height: 1.1;
      margin-bottom: 14px;
      color: var(--ink);
    }
    .app-row .app-sub {
      font-size: 1.05rem; color: var(--muted);
      margin-bottom: 28px;
      max-width: 480px;
    }
    .app-features {
      list-style: none;
      display: grid;
      gap: 10px;
      margin-bottom: 32px;
      max-width: 460px;
    }
    .app-features li {
      display: grid;
      grid-template-columns: 24px 1fr;
      gap: 12px;
      align-items: flex-start;
      font-size: 0.95rem;
      color: var(--ink-2);
    }
    .app-features li::before {
      content: '';
      width: 22px; height: 22px;
      margin-top: 2px;
      border-radius: 50%;
      background: var(--primary-soft) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23E91E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
    }
    .app-actions { display: flex; gap: 10px; flex-wrap: wrap; }
    .app-actions .btn { padding: 0.78rem 1.4rem; font-size: 0.9rem; }
    .store-badge {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 0.55rem 1.1rem;
      background: var(--ink);
      color: var(--surface);
      border-radius: 12px;
      font-size: 0.88rem; font-weight: 600;
      transition: transform 0.2s var(--ease), background 0.2s;
    }
    .store-badge:hover { background: var(--primary); transform: translateY(-2px); }
    .store-badge svg { width: 22px; height: 22px; }
    .store-badge .store-line-1 { font-size: 0.65rem; font-weight: 500; opacity: 0.75; display: block; }
    .store-badge .store-line-2 { font-size: 0.92rem; font-weight: 700; }

    /* ============================ DEVICE PREVIEW (Web/Tablet/Mobile switcher) ============================ */
    .preview-wrap {
      position: relative;
      display: flex; flex-direction: column;
      align-items: center;
      gap: 22px;
    }

    .device-switcher {
      display: inline-flex;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 4px;
      box-shadow: var(--shadow-sm);
      gap: 2px;
    }
    .device-switcher button {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 0.5rem 0.95rem;
      border-radius: 999px;
      font-size: 0.83rem; font-weight: 600;
      color: var(--muted);
      transition: background 0.2s, color 0.2s;
    }
    .device-switcher button svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .device-switcher button:hover { color: var(--ink); }
    .device-switcher button.active {
      background: var(--ink); color: var(--surface);
    }

    .device-stage {
      position: relative;
      width: 100%;
      display: flex; align-items: center; justify-content: center;
      min-height: 620px;
    }

    /* generic frame */
    .device-frame {
      position: relative;
      background: #0a0a0a;
      box-shadow: var(--shadow-lg), 0 60px 100px -40px rgba(233,30,99,0.25);
      transition: width 0.5s var(--ease), height 0.5s var(--ease), border-radius 0.5s var(--ease), padding 0.5s var(--ease);
      overflow: hidden;
      overflow: clip;
    }

    /* Mobile frame */
    .device-frame.is-mobile {
      width: 280px; height: 580px;
      border-radius: 44px;
      border: 8px solid #1a1a1a;
      padding: 0;
    }
    .device-frame.is-mobile .device-notch {
      position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      width: 130px; height: 24px;
      background: #0a0a0a; border-radius: 0 0 16px 16px;
      z-index: 5;
    }
    .device-frame.is-mobile .device-screen { width: 100%; height: 100%; border-radius: 36px; }

    /* Tablet frame */
    .device-frame.is-tablet {
      width: 520px; height: 700px;
      border-radius: 36px;
      border: 12px solid #1a1a1a;
      padding: 0;
    }
    .device-frame.is-tablet .device-notch { display: none; }
    .device-frame.is-tablet .device-screen { width: 100%; height: 100%; border-radius: 24px; }

    /* Web (laptop) frame */
    .device-frame.is-web {
      width: 100%; max-width: 920px;
      height: 600px;
      border-radius: 14px;
      border: 1px solid #2a2a2a;
      padding: 0;
      background: #1a1a1a;
    }
    .device-frame.is-web .device-notch { display: none; }
    .device-frame.is-web .device-titlebar {
      position: absolute; top: 0; left: 0; right: 0;
      height: 32px;
      background: #2a2a2a;
      display: flex; align-items: center;
      padding: 0 14px;
      gap: 8px;
      z-index: 5;
    }
    .device-frame.is-web .device-titlebar .dot { width: 11px; height: 11px; border-radius: 50%; }
    .device-frame.is-web .device-titlebar .dot.r { background: #FF5F57; }
    .device-frame.is-web .device-titlebar .dot.y { background: #FEBC2E; }
    .device-frame.is-web .device-titlebar .dot.g { background: #28C840; }
    .device-frame.is-web .device-titlebar .url {
      flex: 1; height: 22px; margin-left: 30px; margin-right: 30px;
      background: #3a3a3a; border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.72rem; color: rgba(255,255,255,0.6);
    }
    .device-frame.is-web .device-screen {
      position: absolute; top: 32px; left: 0; right: 0; bottom: 0;
      width: 100%; height: calc(100% - 32px);
      border-radius: 0 0 13px 13px;
    }
    .device-frame.is-web .device-titlebar { display: flex; }
    .device-frame:not(.is-web) .device-titlebar { display: none; }
    .device-frame:not(.is-mobile) .device-notch { display: none; }

    /* screen content */
    .device-screen {
      background: var(--surface);
      position: relative; overflow: hidden; overflow: clip;
    }
    .device-placeholder {
      width: 100%; height: 100%;
      position: relative;
      cursor: pointer;
      overflow: hidden;
      overflow: clip;
      background: linear-gradient(160deg, #FCE4EC 0%, #F8BBD0 100%);
    }
    .device-shot {
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: top center;
      display: block;
    }
    /* ── Diaporama des captures ────────────────────────────────────────
       Les diapos sont EMPILÉES et fondues à l'opacité, jamais déplacées :
       `opacity` se compose sur le GPU, alors qu'un défilement horizontal
       ferait travailler la mise en page à chaque image — sur huit captures et
       deux maquettes, c'est ce qui se paierait sur un téléphone modeste. */
    .device-slides { position: absolute; inset: 0; }
    .device-slides .device-shot {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; object-position: top center;
      opacity: 0;
      transition: opacity 0.9s var(--ease);
    }
    .device-slides .device-shot.is-current { opacity: 1; }

    .device-dots {
      position: absolute; left: 0; right: 0; bottom: 12px;
      display: flex; justify-content: center; gap: 6px;
      z-index: 6;
    }
    .device-dot {
      width: 6px; height: 6px; padding: 0; border: 0;
      border-radius: 999px;
      background: rgba(255,255,255,0.45);
      cursor: pointer;
      transition: background 0.3s var(--ease), width 0.3s var(--ease);
      /* Cible tactile honnête sans grossir la pastille : la zone cliquable
         déborde de 8 px tout autour. */
      box-shadow: 0 0 0 8px transparent;
    }
    .device-dot:hover { background: rgba(255,255,255,0.8); }
    .device-dot.is-current { background: #fff; width: 18px; }
    .device-dot:focus-visible {
      outline: 2px solid #fff; outline-offset: 3px;
    }

    .device-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%);
      display: flex; flex-direction: column;
      align-items: center; justify-content: flex-end;
      padding-bottom: 34px; /* dégage les pastilles du diaporama */
      opacity: 0;
      transition: opacity 0.3s var(--ease);
    }
    .device-placeholder:hover .device-overlay { opacity: 1; }
    .device-overlay-cta {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 0.55rem 1.1rem;
      border-radius: 999px;
      background: var(--surface);
      color: var(--ink);
      font-size: 0.82rem; font-weight: 700;
      box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    }
    .device-overlay-cta svg { width: 14px; height: 14px; fill: currentColor; }
    .live-tag {
      position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
      display: inline-flex; align-items: center; gap: 6px;
      padding: 0.3rem 0.8rem; border-radius: 999px;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(8px);
      font-size: 0.72rem; font-weight: 600; color: var(--ink);
      box-shadow: var(--shadow-sm);
      z-index: 4;
    }
    .live-tag .pulse { width: 6px; height: 6px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 3px rgba(22,163,74,0.25); animation: pulse-dot 2s infinite; }
    /* When the device is in "web" (laptop) frame, the screenshot of the desktop app
       should fit-letterbox rather than cover, to show the full UI without cropping. */
    .device-frame.is-web .device-shot {
      object-fit: cover;
      object-position: top left;
    }
    .device-frame.is-mobile .live-tag,
    .device-frame.is-tablet .live-tag { top: 30px; }

    /* L'encoche (.device-notch, 24px, z-index 5) recouvre le haut de l'écran.
       Ce qui est dessous doit donc commencer PLUS BAS, sinon le contenu de
       l'app est masqué.

       La compensation vit sur .device-screen, PAS sur .device-shot : l'écran
       accueille deux contenus — la capture (<img>) et l'app en direct
       (<iframe>, injectée au clic sur « Lancer »). La version de mai ne
       poussait que la capture ; l'iframe restait à y=0, l'encoche mangeait le
       haut de l'app en direct, et le fondateur a signalé le 11/08 que
       l'encoche « ne met TOUJOURS pas le padding nécessaire ». Poser la règle
       un cran plus haut couvre les deux d'un coup, et tout contenu futur.

       Fonctionne grâce au `box-sizing: border-box` global : les enfants en
       `height: 100%` remplissent la boîte de contenu, déjà amputée du padding. */
    /* ⚠️ Le bandeau réservé et l'encoche dessinée ne valent QUE pour la démo
       en direct. L'app web n'a pas de barre d'état : la maquette la simule.
       Les captures, elles, sont de VRAIES captures d'appareil et portent déjà
       leur barre d'état et leur Dynamic Island — leur superposer l'encoche de
       la maquette ferait deux encoches l'une sur l'autre. */
    .device-frame.is-mobile.is-live .device-screen {
      padding-top: 26px;
      background: #000; /* la bande libérée se fond avec l'encoche */
    }
    .device-frame.is-mobile:not(.is-live) .device-notch { display: none; }
    .device-frame.is-mobile .device-placeholder { background: #000; }

    /* Desktop (laptop) frame: resizable by the user so they can see the app
       UI at a more spacious width if they want. min = current default, max = reasonable. */
    .device-frame.is-web {
      resize: both;
      overflow: auto;
      min-width: 920px;
      min-height: 600px;
      max-width: 1280px;
      max-height: 820px;
    }
    /* The native resize handle is hard to see on a dark frame — add a hint. */
    .device-frame.is-web::after {
      content: '';
      position: absolute;
      right: 4px; bottom: 4px;
      width: 14px; height: 14px;
      background:
        linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.35) 60%, transparent 60%, transparent 75%, rgba(255,255,255,0.35) 75%, rgba(255,255,255,0.35) 85%, transparent 85%);
      pointer-events: none;
      z-index: 6;
      border-bottom-right-radius: 13px;
    }

    /* 🔴 L'app embarquée doit voir un viewport RÉEL, puis être réduite.
       Sinon elle se met en page pour la taille de la maquette — 264 px de
       large sur mobile, plus étroit que n'importe quel téléphone — et son
       texte, ses icônes et ses marges, qui gardent leur taille absolue,
       paraissent énormes. C'est le « les contenus ont l'air zoomés au lieu
       de s'adapter » du fondateur.

       Les dimensions et le `transform: scale()` sont posés par `fitDeviceIframe()`
       en JS : le cadre portable est redimensionnable, l'échelle ne peut donc
       pas être écrite en dur. `transform-origin: top left` pour que la
       réduction parte du coin de l'écran et non de son centre. */
    .device-iframe { border: none; display: block; transform-origin: top left; }
    .device-loading {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      background: var(--surface);
      z-index: 8;
      transition: opacity 0.5s;
    }
    .device-loading.hidden { opacity: 0; pointer-events: none; }
    .spinner {
      width: 36px; height: 36px;
      border: 3px solid var(--line);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin-bottom: 12px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .device-loading span { color: var(--muted); font-size: 0.85rem; }

    .device-close {
      position: absolute; top: 12px; right: 12px;
      z-index: 10;
      width: 32px; height: 32px;
      border-radius: 50%;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(8px);
      color: var(--surface);
      display: flex; align-items: center; justify-content: center;
      transition: background 0.2s;
    }
    .device-close:hover { background: rgba(0,0,0,0.85); }
    .device-close svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; }

    /* Mobile-only: scroll-trap protection overlay before iframe is active */
    .scroll-protector {
      position: absolute; inset: 0;
      z-index: 9;
      background: rgba(255,255,255,0.02);
      cursor: pointer;
      display: flex; align-items: flex-end; justify-content: center;
      padding-bottom: 18px;
      pointer-events: auto;
      transition: opacity 0.3s;
    }
    .scroll-protector.hidden { opacity: 0; pointer-events: none; }
    .scroll-protector span {
      padding: 0.4rem 0.9rem;
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(8px);
      color: var(--surface);
      border-radius: 999px;
      font-size: 0.74rem; font-weight: 600;
      display: flex; align-items: center; gap: 6px;
    }
    .scroll-protector span svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    /* ============================ POUR QUI ============================ */
    .for-who-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    .who-card {
      padding: 36px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--line);
      background: var(--surface);
      position: relative;
      overflow: hidden;
      overflow: clip;
      transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
    }
    .who-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
    .who-card.dark { background: var(--ink); color: var(--surface); }
    .who-card .who-icon {
      width: 64px; height: 64px;
      border-radius: 18px;
      background: var(--primary-soft);
      color: var(--primary);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 24px;
    }
    .who-card.dark .who-icon { background: rgba(255,255,255,0.1); color: var(--surface); }
    .who-card .who-icon svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .who-card h3 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
    .who-card > p { font-size: 1rem; margin-bottom: 24px; opacity: 0.7; }
    .who-card.dark > p { opacity: 0.75; }
    .who-list { list-style: none; display: grid; gap: 12px; margin-bottom: 28px; }
    .who-list li {
      display: grid; grid-template-columns: 24px 1fr; gap: 12px;
      align-items: flex-start;
      font-size: 0.95rem;
    }
    .who-list li::before {
      content: '';
      width: 22px; height: 22px;
      margin-top: 2px;
      border-radius: 50%;
      background: var(--primary-soft) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23E91E63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
    }
    .who-card.dark .who-list li::before {
      background: rgba(255,255,255,0.12) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
    }

    /* ============================ SEO / GOOGLE ============================ */
    .seo-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      margin-bottom: 48px;
    }
    .seo-card {
      padding: 28px 22px;
      border-radius: var(--radius-lg);
      border: 1px solid var(--line);
      background: var(--surface);
      transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
    }
    .seo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
    /* Icône SVG en badge soft — même pattern que .who-icon pour cohérence
       visuelle avec le reste de la page (vs emoji qui rendait inégal). */
    .seo-card .seo-icon {
      width: 48px; height: 48px;
      border-radius: 14px;
      background: var(--primary-soft);
      color: var(--primary);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 16px;
    }
    .seo-card .seo-icon svg {
      width: 24px; height: 24px;
      stroke: currentColor; fill: none;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    }
    .seo-card h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; }
    .seo-card p { font-size: 0.92rem; opacity: 0.72; line-height: 1.55; }
    .seo-card p code {
      font-family: ui-monospace, "SF Mono", Menlo, monospace;
      font-size: 0.82rem;
      background: var(--primary-soft);
      color: var(--primary);
      padding: 1px 6px;
      border-radius: 4px;
      letter-spacing: 0;
    }

    .seo-serp-mock {
      max-width: 680px;
      margin: 0 auto 36px;
      background: var(--surface);
      border-radius: 14px;
      border: 1px solid var(--line);
      padding: 22px 26px;
      box-shadow: var(--shadow-md);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }
    .seo-serp-mock .serp-label {
      display: inline-block;
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--ink);
      opacity: 0.5;
      margin-bottom: 14px;
    }
    .seo-serp-mock .serp-url {
      font-size: 0.82rem;
      color: #5f6368;
      margin-bottom: 4px;
    }
    .seo-serp-mock .serp-title {
      font-size: 1.25rem;
      color: #1a0dab;
      font-weight: 400;
      margin-bottom: 4px;
      letter-spacing: 0;
    }
    .seo-serp-mock .serp-meta {
      font-size: 0.86rem;
      color: #4d5156;
      margin-bottom: 6px;
    }
    .seo-serp-mock .serp-stars {
      color: #fbbc04;
      letter-spacing: 1px;
      margin-right: 4px;
    }
    .seo-serp-mock .serp-desc {
      font-size: 0.86rem;
      color: #4d5156;
      line-height: 1.55;
    }

    .seo-example {
      text-align: center;
    }
    .seo-example-link {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 22px;
      border-radius: 99px;
      background: var(--primary-soft);
      color: var(--primary);
      font-weight: 600;
      font-family: ui-monospace, "SF Mono", Menlo, monospace;
      font-size: 0.92rem;
      text-decoration: none;
      transition: transform 0.3s var(--ease);
      letter-spacing: 0;
    }
    .seo-example-link:hover { transform: scale(1.03); }
    .seo-example-arrow { font-size: 1.1rem; }
    .seo-example-note {
      font-size: 0.88rem;
      opacity: 0.6;
      margin-top: 14px;
    }

    /* ============================ TESTIMONIALS ============================ */
    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }
    .testi-card {
      padding: 28px;
      border-radius: var(--radius);
      background: var(--surface);
      border: 1px solid var(--line);
      transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
      display: flex; flex-direction: column; gap: 18px;
    }
    .testi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
    .testi-stars { display: flex; gap: 2px; color: var(--gold); }
    .testi-stars svg { width: 16px; height: 16px; fill: currentColor; }
    .testi-card blockquote {
      font-size: 1rem; line-height: 1.55; color: var(--ink-2);
      flex: 1;
    }
    .testi-card blockquote::before { content: '« '; color: var(--primary); font-family: 'Instrument Serif', serif; font-style: italic; font-size: 1.3rem; }
    .testi-card blockquote::after { content: ' »'; color: var(--primary); font-family: 'Instrument Serif', serif; font-style: italic; font-size: 1.3rem; }
    .testi-author { display: flex; align-items: center; gap: 12px; }
    .testi-avatar {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--primary), var(--accent));
      color: var(--surface);
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 0.9rem;
    }
    .testi-name { font-weight: 700; font-size: 0.92rem; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
    .testi-flag { font-size: 0.95em; line-height: 1; filter: saturate(1.1); }
    .testi-role { font-size: 0.8rem; color: var(--muted); }

    /* ============================ CTA SECTION ============================ */
    .cta-section {
      margin: 0 28px 80px;
      max-width: var(--max);
      margin-left: auto; margin-right: auto;
      border-radius: var(--radius-lg);
      padding: 90px 40px;
      background: radial-gradient(80% 100% at 50% 0%, rgba(244,114,182,0.25) 0%, transparent 60%), linear-gradient(135deg, #18181B 0%, #2D1B2E 60%, #4A1F3A 100%);
      color: var(--surface);
      text-align: center;
      position: relative;
      overflow: hidden;
      overflow: clip;
    }
    .cta-section::before {
      content: '';
      position: absolute;
      top: -50%; left: 50%; transform: translateX(-50%);
      width: 800px; height: 800px;
      background: radial-gradient(circle, rgba(244,114,182,0.18) 0%, transparent 60%);
      filter: blur(40px);
    }
    .cta-section h2 {
      font-size: clamp(2rem, 4.5vw, 3.4rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.05;
      margin-bottom: 20px;
      max-width: 720px;
      margin-left: auto; margin-right: auto;
      position: relative;
    }
    .cta-section h2 .pink {
      background: linear-gradient(135deg, var(--accent) 0%, var(--gold) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .cta-section p {
      font-size: 1.1rem; opacity: 0.78;
      max-width: 540px;
      margin: 0 auto 36px;
      position: relative;
    }
    .cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }
    .btn-white { background: var(--surface); color: var(--ink); }
    .btn-white:hover { background: var(--primary); color: var(--surface); transform: translateY(-2px); }
    .btn-outline-light {
      background: transparent;
      border: 1px solid rgba(255,255,255,0.25);
      color: var(--surface);
    }
    .btn-outline-light:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.4); }

    /* ============================ FOOTER ============================ */
    footer {
      padding: 60px 28px 30px;
      background: var(--ink);
      color: rgba(255,255,255,0.65);
    }
    .footer-inner { max-width: var(--max); margin: 0 auto; }
    .footer-top {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr 1fr;
      gap: 40px;
      padding-bottom: 40px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .footer-brand-block .footer-brand {
      font-size: 1.5rem; font-weight: 800; color: var(--surface);
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 16px;
    }
    .footer-brand-block p { font-size: 0.92rem; max-width: 320px; }
    .footer-col h5 {
      font-size: 0.84rem; font-weight: 700;
      color: var(--surface);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 18px;
    }
    .footer-col ul { list-style: none; display: grid; gap: 10px; }
    .footer-col a { font-size: 0.92rem; transition: color 0.2s; }
    .footer-col a:hover { color: var(--surface); }
    .footer-bottom {
      padding-top: 24px;
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 16px;
      font-size: 0.85rem;
    }
    .footer-social { display: flex; gap: 12px; }
    .footer-social a {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: rgba(255,255,255,0.06);
      display: flex; align-items: center; justify-content: center;
      transition: background 0.2s, color 0.2s;
    }
    .footer-social a:hover { background: var(--primary); color: var(--surface); }
    .footer-social svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    /* ============================ RESPONSIVE ============================ */
    @media (max-width: 1024px) {
      .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 40px; }
      .hero-sub, .hero-proof { margin-left: auto; margin-right: auto; }
      .hero-cta-group { justify-content: center; }
      .hero-proof { justify-content: center; }
      .hero-visual img { max-width: 480px; }
      .bento .c-1, .bento .c-2, .bento .c-3 { grid-column: span 6; }
      .bento .c-4 { grid-column: span 6; }
      .bento .c-5, .bento .c-6 { grid-column: span 6; }
      .app-row { grid-template-columns: 1fr; gap: 50px; text-align: center; }
      .app-row.reverse .app-info { order: 1; }
      .app-row.reverse .app-preview { order: 2; }
      .app-features { margin-left: auto; margin-right: auto; }
      .app-actions { justify-content: center; }
      .device-frame.is-tablet { width: min(480px, 88vw); height: 640px; }
      /* Disable resize on narrow viewports — the laptop frame fits in available space. */
      .device-frame.is-web {
        resize: none;
        overflow: hidden;
        overflow: clip;
        min-width: 0; min-height: 0;
        max-width: min(760px, 92vw); height: 500px;
      }
      .device-frame.is-web::after { display: none; }
    }
    @media (max-width: 640px) {
      /* Hide hero illustration on narrow phones — it takes up half the
         viewport below the text, pushing the CTA buttons off-screen.
         The text headline + CTAs + proof stats are sufficient on mobile.
         The cursor-follow JS is already guarded by isMobileViewport(). */
      .hero-visual { display: none; }
    }
    @media (max-width: 768px) {
      .nav-links a:not(.nav-cta) { display: none; }
      .nav-links .nav-cta { display: none; }
      .nav-burger { display: flex; }
      .nav-cta-mobile {
        display: inline-flex; align-items: center;
        margin-left: auto; margin-right: 10px;
        padding: 0.5rem 0.9rem; border-radius: 999px;
        background: var(--ink); color: var(--surface) !important;
        font-size: 0.82rem; font-weight: 600; white-space: nowrap;
        transition: transform 0.2s var(--ease), background 0.2s;
      }
      .nav-cta-mobile:hover { background: var(--primary); transform: translateY(-1px); }
      .section { padding: 80px 22px; }
      .hero { padding: 110px 22px 60px; min-height: auto; }
      .hero h1 { line-height: 1.05; }
      .hero h1 br { display: none; } /* let the title flow naturally on small screens */
      .hero-proof { gap: 18px; }
      .hero-proof-divider { display: none; }
      .footer-top { grid-template-columns: 1fr 1fr; gap: 30px; }
      .footer-brand-block { grid-column: span 2; }
      .testimonials-grid { grid-template-columns: 1fr; }
      .for-who-grid { grid-template-columns: 1fr; }
      .seo-grid { grid-template-columns: 1fr 1fr; }
      .bento .c-1, .bento .c-2, .bento .c-3, .bento .c-4, .bento .c-5, .bento .c-6 { grid-column: span 12; }
      .bento-card { padding: 24px; }
      .advice-banner { grid-template-columns: 1fr; text-align: center; padding: 22px; }
      .advice-icon { margin: 0 auto; }
      .cta-section { margin: 0 16px 60px; padding: 60px 24px; border-radius: 22px; }
      .cta-section h2 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
      .device-stage { min-height: 560px; }
      /* keep mobile frame compact so page-scroll keeps free gutters */
      .device-frame.is-mobile { width: 260px; height: 540px; border-width: 7px; }
      .device-switcher { display: none; } /* mobile: hide switcher, only mobile format shown */
      .preview-wrap { gap: 12px; }
      .app-row h3 { font-size: clamp(1.6rem, 6vw, 2rem); }
      .who-card { padding: 28px; }
      .who-card h3 { font-size: 1.4rem; }
      .section-title { font-size: clamp(1.8rem, 6vw, 2.4rem); }
      .nav-inner { padding: 0 20px; }
    }
    @media (max-width: 480px) {
      .footer-top { grid-template-columns: 1fr; gap: 28px; }
      .footer-brand-block { grid-column: span 1; }
      .seo-grid { grid-template-columns: 1fr; }
      .seo-serp-mock { padding: 18px 20px; }
      .seo-serp-mock .serp-title { font-size: 1.05rem; }
      .seo-example-link { font-size: 0.78rem; padding: 12px 16px; }
      .footer-bottom { justify-content: center; text-align: center; }
      .hero-eyebrow { font-size: 0.76rem; padding: 0.4rem 0.85rem; }
      .hero-proof-item strong { font-size: 1.3rem; }
      .hero-cta-group .btn { padding: 0.85rem 1.35rem; font-size: 0.92rem; }
      .app-actions .store-badge { padding: 0.5rem 0.9rem; }
      .app-actions .store-badge .store-line-1 { font-size: 0.6rem; }
      .app-actions .store-badge .store-line-2 { font-size: 0.85rem; }
      .testi-card { padding: 22px; }
    }
    @media (max-width: 420px) {
      .device-frame.is-mobile { width: 232px; height: 480px; }
      .device-stage { min-height: 500px; }
      .hero h1 { font-size: 2.2rem; }
      .section { padding: 64px 18px; }
      .hero { padding: 100px 18px 50px; }
      .bento-card { padding: 22px; }
      .map-preview, .cal-preview, .chat-preview { display: none; } /* on very small screens, kill the previews to keep cards compact */
      .marquee-track { gap: 36px; }
    }

    /* Disable scroll-protector usage on desktop (it's a mobile-only fix) */
    @media (min-width: 769px) {
      .scroll-protector { display: none; }
    }
  
  .lang-switcher {
    position: relative;
    margin-right: 8px;
  }
  .lang-current {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
  }
  .lang-current:hover { border-color: var(--primary); color: var(--primary); }
  .lang-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(0,0,0,0.08);
    min-width: 180px;
    padding: 6px;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 50;
  }
  .lang-switcher[data-open="1"] .lang-dropdown {
    opacity: 1; transform: translateY(0); pointer-events: auto;
  }
  .lang-dropdown a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.88rem;
  }
  .lang-dropdown a:hover { background: rgba(233,30,99,0.08); color: var(--primary); }
  .lang-dropdown a[aria-current="page"] { background: rgba(233,30,99,0.12); font-weight: 700; color: var(--primary); }
  @media (max-width: 768px) {
    .lang-switcher { display: none; }
    .nav-burger-menu .lang-switcher-mobile {
      display: flex; flex-wrap: wrap; gap: 6px;
      padding: 12px 16px;
      border-top: 1px solid var(--line);
      margin-top: 8px;
    }
    .nav-burger-menu .lang-switcher-mobile a {
      padding: 6px 10px;
      border: 1px solid var(--line);
      border-radius: 99px;
      color: var(--ink);
      text-decoration: none;
      font-size: 0.85rem;
    }
    .nav-burger-menu .lang-switcher-mobile a[aria-current="page"] {
      background: var(--primary); color: var(--surface); border-color: var(--primary);
    }
  }

  /* Auto-detect banner */
  .lang-suggest-banner {
    position: fixed; bottom: 20px; left: 50%;
    transform: translateX(-50%);
    background: var(--ink); color: var(--surface);
    padding: 12px 18px;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.18);
    display: none; align-items: center; gap: 14px;
    font-size: 0.9rem;
    z-index: 100;
    max-width: 92vw;
  }
  .lang-suggest-banner.show { display: flex; }
  .lang-suggest-banner a { color: #f9bccd; font-weight: 700; text-decoration: underline; }
  .lang-suggest-banner button {
    background: transparent; color: var(--surface); border: 0;
    font-size: 1.2rem; cursor: pointer; opacity: 0.7;
    padding: 0; line-height: 1;
  }

  .perso-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 48px;
  }
  @media (max-width: 1024px) {
    .perso-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) {
    .perso-grid { grid-template-columns: 1fr; }
  }
  .perso-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 26px 24px;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .perso-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(233,30,99,0.08);
  }
  .perso-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(233,30,99,0.08);
    color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
  }
  .perso-icon svg { width: 22px; height: 22px; }
  .perso-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--ink);
  }
  .perso-card p {
    font-size: 0.92rem;
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
  }
  .perso-langs {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 16px;
  }
  .perso-flag {
    font-size: 0.78rem;
    padding: 4px 10px;
    background: rgba(233,30,99,0.06);
    border-radius: 99px;
    color: var(--ink);
    border: 1px solid rgba(233,30,99,0.12);
  }
  .perso-themes {
    display: flex; gap: 10px;
    margin-bottom: 16px;
  }
  .theme-dot {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 1px var(--line);
  }
  .theme-pink    { background: linear-gradient(135deg,#fff,#f7a8c2); }
  .theme-blue    { background: linear-gradient(135deg,#dde9ff,#3d6bd6); }
  .theme-neutral { background: linear-gradient(135deg,#f2efe9,#9b8c70); }
  .theme-gold    { background: linear-gradient(135deg,#fef3d3,#c89a3d); }

    /* ═══════════ TOUR — l'app au défilement, façon page produit Apple ═══════
       Un conteneur haut (`--tour-len`) crée l'espace temporel ; la scène
       s'épingle (`position: sticky`, BORNÉE par le conteneur — leçon du
       revert 4051bf70 : un sticky non borné reste collé jusqu'en bas de
       page) ; le JS partagé (tourInit) mappe la progression du défilement
       aux écrans réels de l'app, aux légendes et au rail.

       Sans JS (`html:not(.js)`) ou sous `prefers-reduced-motion`, la section
       est MASQUÉE : la démo live (#apps) juste dessous montre déjà tout —
       on ne duplique pas l'information en version dégradée. */
    :root { --tour-len: 560vh; }
    .tour {
      position: relative;
      height: var(--tour-len);
      background:
        radial-gradient(40% 40% at 70% 30%, rgba(233,30,99,.14) 0%, transparent 70%),
        linear-gradient(180deg, #0B0710 0%, #150A16 55%, #0B0710 100%);
    }
    html:not(.js) .tour { display: none; }
    @media (prefers-reduced-motion: reduce) { .tour { display: none; } }

    .tour-scene {
      position: sticky; top: 0;
      height: 100vh;
      height: 100dvh;  /* 🔴 dvh, PAS vh : sur mobile la barre d'URL se masque
         au scroll vers le bas → le viewport grandit → une scène en `vh` (figée
         quand la barre était visible) devient plus courte que l'écran et laisse
         un TROU sous elle (« structure bizarre » signalée). `dvh` suit la barre
         et la scène remplit toujours le viewport. */
      overflow: hidden; /* pas de clip requis : rien ne s'anime par timeline ici */
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      align-items: center;
      color: #F7F2F4;
    }
    .tour-glow {
      position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(36% 44% at 68% 50%, rgba(233,30,99,.20) 0%, transparent 70%);
    }
    .tour-caps { grid-column: 1; position: relative; height: 100vh; z-index: 3; }
    .tour-cap {
      position: absolute; top: 50%; transform: translateY(-50%);
      left: 0; right: 0;
      padding-left: clamp(32px, 8vw, 120px);
      padding-right: clamp(20px, 3vw, 44px);
      opacity: 0;
    }
    .tour-cap .tour-idx {
      font-size: .78rem; letter-spacing: .22em; font-weight: 600;
      color: #FF7AA5; display: block; margin-bottom: 18px;
    }
    .tour-cap h3 {
      font-size: clamp(2rem, 4.4vw, 3.4rem);
      font-weight: 800; letter-spacing: -.03em; line-height: 1.04;
      margin-bottom: 18px; max-width: 14ch;
    }
    .tour-cap p {
      font-size: clamp(1rem, 1.5vw, 1.28rem);
      color: #CFC4CB; line-height: 1.5; max-width: 34ch;
    }
    .tour-stage {
      grid-column: 2; position: relative; height: 100vh;
      display: flex; align-items: center; justify-content: center; z-index: 2;
    }
    /* Le tour RÉUTILISE le vrai cadre `.device-frame.is-mobile` de la section
       apps → encoche identique (fondateur : « pas la même encoche que la partie
       apps »). On ne surcharge que la TAILLE (le cadre fait 280×580 par défaut)
       et l'ombre, plus le halo rose de la scène. */
    .tour-stage .tour-device {
      width: min(300px, 66vw);
      height: auto;
      aspect-ratio: 280 / 580;
      box-shadow: 0 44px 130px -30px rgba(233,30,99,.5),
        0 0 0 1.5px rgba(255,255,255,.06) inset;
      transition: none;           /* pas la transition de format des apps ici */
      will-change: transform;
    }
    .tour-device .device-screen img {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; object-position: top center; opacity: 0;
    }
    .tour-rail {
      position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
      display: flex; gap: 9px; z-index: 4;
    }
    .tour-rail i {
      width: 26px; height: 3px; border-radius: 2px;
      background: rgba(255,255,255,.16); overflow: hidden; position: relative;
    }
    .tour-rail i b {
      position: absolute; inset: 0; background: #E91E63;
      transform: scaleX(0); transform-origin: left;
    }
    @media (max-width: 820px) {
      :root { --tour-len: 500vh; }
      /* téléphone dans SA zone en haut, légende dans LA sienne dessous —
         zones disjointes, zéro chevauchement (bug corrigé sur la démo). */
      .tour-scene { display: flex; flex-direction: column; align-items: stretch; padding-top: 2.5vh; }
      /* dvh ici aussi : le stage est une fraction de la scène, il doit suivre
         le même viewport dynamique (sinon léger décalage quand la barre bouge).
         60dvh (au lieu de 46) : on récupère l'espace mort autour du téléphone —
         le cadre était trop petit (fondateur 08-13 « on a de l'espace, il faut
         augmenter la taille »). La légende garde ~35dvh dessous, large pour le
         titre + le paragraphe + le rail épinglé en bas. */
      .tour-stage { order: 1; flex: 0 0 auto; height: 60vh; height: 60dvh; }
      /* height pilote la taille (aspect-ratio 280/580 dérive la largeur) ; le
         max-width borne le cas écran court/large pour ne jamais déborder. */
      .tour-stage .tour-device { width: auto; height: 100%; max-width: 88vw; }
      .tour-caps { order: 2; flex: 1 1 auto; height: auto; }
      /* La légende est CENTRÉE dans sa zone (au lieu de collée en haut) : sinon
         le texte reste tout en haut et laisse un grand vide au-dessus du rail
         épinglé en bas — ça faisait « mal fini ». */
      .tour-cap {
        position: absolute; inset: 0; transform: none; text-align: center;
        padding: 16px 26px 44px;
        display: flex; flex-direction: column; justify-content: center;
      }
      .tour-cap h3 { max-width: none; margin-inline: auto; font-size: clamp(1.5rem, 6.2vw, 2rem); }
      .tour-cap p { max-width: 30ch; margin-inline: auto; }
      .tour-rail { bottom: 16px; }
    }