:root {
    /* ── Palette Beeye ── */
    --orange: #F27633;
    --orange-hover: #D45E24;
    --orange-500: #FB8C3F;
    --orange-400: #FCA264;
    --orange-100: #FFF3E2;
    --orange-50: #FFF9F2;
    --slate-950: #1F1F30;
    --slate-900: #272740;
    --slate-800: #34344B;
    --slate-700: #484868;
    --slate-500: #686985;
    --slate-400: #8E8FA8;
    --slate-300: #B7BAD6;
    --slate-200: #D4D5E5;
    --slate-100: #E8E8F0;
    --slate-50: #F1F0FA;
    --slate-25: #F7F7FC;

    /* ── Accents produit (piliers) · enrichissement v16 ── */
    --plan: #F27633;  --plan-text: #B5521A;  --plan-tint: #FFF3E2;
    --temps: #5B63D6; --temps-text: #3A41A8; --temps-tint: #EEF0FB;
    --renta: #1AA179; --renta-text: #0E7355; --renta-tint: #E6F5EF;

    /* ── Sémantique : thème clair (défaut) ── */
    --bg: #FFFFFF;
    --bg-subtle: var(--slate-25);
    --bg-muted: var(--slate-50);
    --bg-accent: var(--orange-50);
    --surface: #FFFFFF;
    --fg: var(--slate-950);
    --fg-2: var(--slate-800);
    --fg-muted: var(--slate-500);
    --fg-subtle: var(--slate-400);
    --accent-text: #B5521A;
    --line: var(--slate-100);
    --line-2: var(--slate-200);
    --line-accent-soft: rgba(242,118,51,0.15);
    --dot: var(--slate-200);
    --header-bg: rgba(255,255,255,0.55); /* v20 : verre dépoli, la page se devine à travers la barre flottante */
    --btn-primary-ink: #FFFFFF; /* v21 : texte blanc sur les boutons orange (lisibilité).
       NOTE AA pour David : blanc sur #F27633 = 2.8:1 — exception de marque à documenter,
       ou assombrir l'orange des boutons (#C9520C atteint 4.5:1). */
    --bubble-user-bg: var(--orange-50);
    --bubble-user-line: var(--orange-100);
    --chip-line: var(--slate-200);
    --dark-panel: var(--slate-950);
    --dark-panel-line: transparent;
    /* Signalétique rentabilité (mêmes teintes en clair/sombre, contrastées AA) */
    --sig-ok: #1E7A55;
    --sig-ok-bg: #E5F3EC;
    --sig-warn: #9A6300;
    --sig-warn-bg: #FBEFD6;
    --sig-over: #B42318;
    --sig-over-bg: #FBE7E5;
    --elevation-1: 0 1px 3px rgba(31,31,48,0.04), 0 1px 2px rgba(31,31,48,0.02);
    --elevation-2: 0 2px 8px rgba(31,31,48,0.05), 0 4px 16px rgba(31,31,48,0.04);
    --elevation-3: 0 4px 16px rgba(31,31,48,0.06), 0 12px 40px rgba(31,31,48,0.08);

    /* ── Layout, type, motion ── */
    --content-width: 1120px;
    --sp-1: 8px;  --sp-2: 16px;  --sp-3: 24px;  --sp-4: 32px;
    --sp-5: 40px; --sp-6: 48px;  --sp-8: 64px;  --sp-10: 80px;
    --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-condensed: 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif;
    --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
    --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --dur: 200ms;
  }

  [data-theme="dark"] {
    --bg: #1F1F30;
    --bg-subtle: #23233A;
    --bg-muted: #24243A;
    --bg-accent: #2A2438;
    --surface: #272740;
    --fg: var(--slate-100);
    --fg-2: var(--slate-200);
    --fg-muted: var(--slate-300);
    --fg-subtle: var(--slate-400);
    --accent-text: var(--orange-500);
    --line: rgba(255,255,255,0.08);
    --line-2: rgba(255,255,255,0.14);
    --line-accent-soft: rgba(242,118,51,0.28);
    --dot: rgba(255,255,255,0.10);
    --header-bg: rgba(31,31,48,0.52);
    --bubble-user-bg: rgba(242,118,51,0.12);
    --bubble-user-line: rgba(242,118,51,0.32);
    --chip-line: rgba(255,255,255,0.14);
    --dark-panel: #272740;
    --dark-panel-line: rgba(255,255,255,0.08);
    /* Signalétique rentabilité : teintes plus claires sur fond sombre, fonds voilés */
    --sig-ok: #57C892;
    --sig-ok-bg: rgba(87,200,146,0.14);
    --sig-warn: #E6A93B;
    --sig-warn-bg: rgba(230,169,59,0.16);
    --sig-over: #F1746A;
    --sig-over-bg: rgba(241,116,106,0.16);
    /* Accents produit : teintes éclaircies pour rester AA sur fond sombre, pastilles voilées */
    --plan: var(--orange); --plan-text: var(--orange-500); --plan-tint: rgba(242,118,51,0.14);
    --temps: #8B92E8; --temps-text: #A6ABEF; --temps-tint: rgba(91,99,214,0.16);
    --renta: #57C892; --renta-text: #6BD3A2; --renta-tint: rgba(26,161,121,0.16);
    /* Pas d'ombres sur fond sombre : le contraste vient des bordures */
    --elevation-1: none;
    --elevation-2: none;
    --elevation-3: none;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--fg-2);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  ::selection { background: rgba(242,118,51,0.2); color: inherit; }
  :focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
  img { max-width: 100%; display: block; }
  a { color: var(--accent-text); }

  .skip {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--orange); color: #FFFFFF;
    font-weight: 700; padding: 10px 18px; text-decoration: none;
  }
  .skip:focus { left: 0; }

  h1, h2, h3 {
    font-family: var(--font-condensed);
    color: var(--fg);
    font-feature-settings: 'kern' 1, 'liga' 1;
  }
  h1 { font-size: 2.75rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.04em; }
  h2 { font-size: 1.75rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
  h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; }

  .container { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--sp-3); }

  /* ══════════════ TYPOGRAPHIE : VEUVES & ORPHELINES ══════════════
     À l'écran, ce sont les propriétés text-wrap qui font ce travail (widows/orphans
     ne s'appliquent qu'à la fragmentation print) :
     - balance sur les titres et intitulés courts : lignes équilibrées, pas de mot esseulé ;
     - pretty sur le texte courant : évite le mot seul en dernière ligne (Chrome 117+,
       dégradation silencieuse ailleurs). */
  h1, h2, h3, h4,
  .results__axis, .results__label,
  .hw-note, .logo-bar__label { text-wrap: balance; }
  p, li, blockquote, figcaption, dt, dd { text-wrap: pretty; }

  .label {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-muted);
  }
  .label--orange { color: var(--accent-text); }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .btn--primary { background: var(--orange); color: var(--btn-primary-ink); font-weight: 700; }
  .btn--primary:hover { background: var(--orange-500); transform: translateY(-1px); }
  .btn--ghost { background: transparent; color: var(--fg); border-color: var(--line-2); }
  .btn--ghost:hover { border-color: var(--fg-subtle); transform: translateY(-1px); }
  .btn--ghost-dark { background: transparent; color: #FFFFFF; border-color: var(--slate-700); }
  .btn--ghost-dark:hover { border-color: var(--slate-400); transform: translateY(-1px); }

  .divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, var(--line-accent-soft) 50%, transparent 95%);
  }

  .section-head { text-align: center; max-width: 680px; margin: 0 auto var(--sp-6); }
  .section-head .label { display: block; margin-bottom: var(--sp-2); }
  .section-head h2 { margin-bottom: var(--sp-2); text-wrap: balance; }
  .section-head p { color: var(--fg-muted); }

  /* Scroll reveal */
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    /* Décalage en cascade pour les groupes de frères (--rd = index posé en JS ; 0 par défaut) */
    transition-delay: calc(var(--rd, 0) * 70ms);
  }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
  }

  /* ══════════════ HEADER ══════════════
     v20 : barre FLOTTANTE façon Raycast (retour Antoine 2026-07-09) : détachée du bord,
     verre dépoli traversant (blur + saturation), bord doux, ombre qui se renforce au scroll.
     NOTE brand pour David : radius 12px, entorse assumée à la règle des angles nets
     (précédent existant : le burger est déjà arrondi à 4px, les avatars à 50 %). */
  .header {
    position: fixed; /* overlay pur, comme Raycast : aucun emplacement réservé dans le flux,
                        le hero commence au premier pixel et se devine sous le verre */
    top: 12px;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 0 var(--sp-2);
    background: transparent;
    pointer-events: none; /* seuls la barre et le menu sont cliquables, pas la bande pleine largeur */
  }
  .header__inner,
  .header .mobile-menu { pointer-events: auto; }
  .header__inner {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* nav rattachée au logo à gauche, actions repoussées à droite */
    gap: var(--sp-3);
    height: 56px;
    max-width: 1024px; /* plus étroite que le contenu : elle flotte, elle ne borde pas */
    padding: 0 14px 0 20px; /* respiration interne (retour Antoine) */
    background: var(--header-bg);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border: 1px solid var(--line);
    border-radius: 12px;
    /* Reflet supérieur « liquid glass » + ombre portée */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), var(--elevation-1);
    transition: box-shadow var(--dur) var(--ease);
  }
  .header.is-scrolled .header__inner { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), var(--elevation-3); }
  [data-theme="dark"] .header__inner {
    border-color: var(--line-2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--elevation-1);
  }
  [data-theme="dark"] .header.is-scrolled .header__inner { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--elevation-3); }
  /* Le header étant en overlay, les ancres doivent s'arrêter sous la barre */
  #produit, #assistant, #integrations, #securite, #demarrer, #faq, #demo { scroll-margin-top: 92px; }
  .header__logo { display: flex; align-items: center; text-decoration: none; }
  .header__logo img { height: 30px; width: auto; }
  .logo-light-theme { display: block; }
  .logo-dark-theme { display: none; }
  [data-theme="dark"] .logo-light-theme { display: none; }
  [data-theme="dark"] .logo-dark-theme { display: block; }
  .header__nav { display: flex; align-items: center; gap: var(--sp-3); margin-left: var(--sp-2); }
  .header__nav a {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--fg-2);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
  }
  .header__nav a:hover { color: var(--fg); }
  .header__actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
  .header__login { font-size: 0.9375rem; font-weight: 500; color: var(--fg-2); text-decoration: none; }
  .header__login:hover { color: var(--fg); }
  .header__lang {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--fg-muted);
    text-decoration: none;
  }
  .header__lang:hover { color: var(--fg); }
  .btn--nav { padding: 8px 16px; font-size: 0.9375rem; }
  .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--line-2);
    border-radius: 4px;
    color: var(--fg-2);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .theme-toggle:hover { border-color: var(--fg-subtle); color: var(--fg); transform: translateY(-1px); }
  .theme-toggle svg { width: 16px; height: 16px; }
  .theme-toggle .icon-sun { display: none; }
  [data-theme="dark"] .theme-toggle .icon-sun { display: block; }
  [data-theme="dark"] .theme-toggle .icon-moon { display: none; }

  .burger {
    display: none;
    background: none;
    border: 1px solid var(--line-2);
    border-radius: 4px;
    width: 40px; height: 36px;
    cursor: pointer;
    position: relative;
  }
  .burger span, .burger span::before, .burger span::after {
    content: "";
    position: absolute; left: 9px;
    width: 20px; height: 2px;
    background: var(--fg);
    transition: transform var(--dur) var(--ease);
  }
  .burger span { top: 16px; }
  .burger span::before { top: -6px; left: 0; }
  .burger span::after { top: 6px; left: 0; }
  .burger[aria-expanded="true"] span { background: transparent; }
  .burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); background: var(--fg); }
  .burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); background: var(--fg); }
  /* Menu mobile : panneau flottant assorti à la barre (verre dépoli, mêmes angles) */
  .mobile-menu {
    display: none;
    max-width: 1024px;
    margin: 8px auto 0;
    background: var(--header-bg);
    backdrop-filter: blur(16px) saturate(1.5);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--elevation-3);
    padding: var(--sp-2) var(--sp-3) var(--sp-3);
  }
  .mobile-menu.open { display: block; }
  .mobile-menu ul { list-style: none; }
  .mobile-menu a { display: block; padding: 12px 4px; color: var(--fg); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line); }
  .mobile-menu .btn { width: 100%; margin-top: var(--sp-2); }
  @media (max-width: 960px) {
    .header__nav, .header__login, .header__lang, .header__actions .btn--nav { display: none; }
    .burger { display: block; }
  }

  /* ══════════════ HERO ══════════════ */
  .hero {
    background: var(--bg-subtle);
    position: relative;
    /* Le header est en overlay fixe : le hero commence sous la barre (12 + 56 + respiration) */
    padding: calc(var(--sp-8) + 84px) 0 var(--sp-10);
  }
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.4;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 70%);
            mask-image: linear-gradient(to bottom, black, transparent 70%);
  }
  /* v20 · halo lumineux derrière la composition (réf. fond dégradé du hero Agendrix),
     construit sur les teintes Beeye : orange, vert rentabilité, violet de maquette */
  .hero::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 46%;
    width: min(1200px, 94%);
    height: 560px;
    transform: translateX(-50%);
    background:
      radial-gradient(42% 55% at 28% 42%, rgba(242, 118, 51, 0.17), transparent 70%),
      radial-gradient(40% 52% at 74% 58%, rgba(26, 161, 121, 0.15), transparent 70%),
      radial-gradient(32% 42% at 55% 18%, rgba(139, 124, 246, 0.11), transparent 70%);
    filter: blur(46px);
    pointer-events: none;
  }
  [data-theme="dark"] .hero::after { opacity: 0.55; }
  /* v21 : halo et points en ARRIÈRE-PLAN du contenu */
  .hero::before, .hero::after { z-index: 0; }
  .hero .container { position: relative; z-index: 1; }
  .hero__head {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
  }
  .hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--fg-muted);
    margin-bottom: var(--sp-2);
  }
  .hero__eyebrow::before {
    content: '';
    width: 8px; height: 8px;
    background: var(--orange);
    flex-shrink: 0;
  }
  .hero__title { margin-bottom: var(--sp-3); text-wrap: balance; font-size: 3.25rem; }
  .hero__sub {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--fg-muted);
    max-width: 620px;
    margin: 0 auto var(--sp-4);
  }
  .hero__ctas { display: flex; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; }
  .hero__assure {
    list-style: none;
    margin: var(--sp-3) 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
  }
  .hero__assure li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8125rem;
    color: var(--fg-muted);
  }
  .hero__assure li svg {
    width: 14px; height: 14px; flex-shrink: 0;
    color: var(--fg-subtle);
    stroke: currentColor; fill: none;
    stroke-width: 1.6; stroke-linecap: butt; stroke-linejoin: miter;
  }

  /* ── Fenêtre produit animée : plan de charge mensuel + assistant externe ──
     v20 : composition en couches (réf. Agendrix + schémas du site actuel) :
     la fenêtre Beeye montre le MOIS (cartes multi-jours) ; l'assistant est une
     fenêtre SÉPARÉE qui chevauche le coin — c'est une app externe (Claude /
     Copilot / ChatGPT) reliée à Beeye, pas un module de la plateforme. */
  .hero-window {
    position: relative;
    max-width: 1060px;
    margin: var(--sp-6) auto 104px; /* réserve le débord bas de la fenêtre assistant et du chip résolu */
    background: var(--surface);
    border: 1px solid var(--line-2);
    box-shadow: var(--elevation-3);
    text-align: left;
  }
  .hw-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px var(--sp-2);
    border-bottom: 1px solid var(--line);
    background: var(--bg-subtle);
  }
  .hw-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
  .hw-bar .hw-url {
    margin-left: var(--sp-1);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--fg-muted);
  }
  /* Couleurs de maquette (types de mission), comme les schémas multicolores du site actuel.
     Hors palette UI : réservées aux illustrations produit. */
  .hero-window {
    --hw-gold: #D9A514;   --hw-gold-bg: rgba(217, 165, 20, 0.12);
    --hw-violet: #8B7CF6; --hw-violet-bg: rgba(139, 124, 246, 0.12);
    --hw-green: #1AA179;  --hw-green-bg: rgba(26, 161, 121, 0.11);
    --hw-red: #D64545;
  }
  .hw-body { display: grid; grid-template-columns: 46px 1fr; min-height: 340px; }

  /* Rail d'icônes discret (réf. Agendrix) : l'app existe, mais le menu ne vole pas la vedette */
  .hw-rail { border-right: 1px solid var(--line); padding: var(--sp-2) 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .hw-rail svg { width: 16px; height: 16px; color: var(--fg-subtle); stroke: currentColor; fill: none; stroke-width: 1.7; }
  .hw-rail .on svg { color: var(--orange); }
  .hw-rail span { display: grid; place-items: center; width: 28px; height: 28px; }
  .hw-rail .on { background: var(--orange-100); }
  [data-theme="dark"] .hw-rail .on { background: rgba(242,118,51,0.16); }

  .hw-board { padding: var(--sp-2) var(--sp-3) var(--sp-3); min-width: 0; }
  .hw-board-head { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-2); gap: 10px; }
  .hw-board-head b { font-family: var(--font-condensed); font-weight: 600; color: var(--fg); font-size: 0.9375rem; margin-right: auto; }
  .hw-pill {
    font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--fg-muted); border: 1px solid var(--line-2); padding: 3px 9px;
  }
  .hw-pill.on { color: var(--fg); background: var(--bg-muted); }
  .hw-cta {
    font-family: var(--font-sans); font-size: 0.72rem; font-weight: 700;
    color: #FFFFFF; background: var(--orange); padding: 4px 11px;
  }
  /* Vue MOIS : 4 semaines × 5 jours ouvrés = 20 colonnes-jour ; cartes multi-jours
     placées explicitement (grid-column / grid-row en inline, c'est une maquette). */
  .hw-grid { display: grid; grid-template-columns: 92px repeat(20, 1fr); grid-auto-rows: minmax(46px, auto); gap: 5px 3px; align-items: stretch; font-size: 0.72rem; }
  .hw-wk {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-subtle);
    padding: 3px 0 5px 6px;
    border-bottom: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }
  .hw-grid .hd {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-subtle);
    text-align: center;
    padding: 3px 0 5px;
    border-bottom: 1px solid var(--line);
  }
  .hw-grid .hd:first-child { text-align: left; }
  .hw-who { display: flex; align-items: center; gap: 7px; color: var(--fg-2); font-weight: 500; min-width: 0; }
  .hw-who-txt { min-width: 0; display: block; }
  /* Sophie occupe deux lignes : son avatar s'aligne sur la première ligne de cartes */
  .hw-who--top { align-self: start; padding-top: 5px; }
  .hw-who .nm { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hw-who small { display: block; font-family: var(--font-mono); font-size: 0.5625rem; color: var(--fg-subtle); letter-spacing: 0.03em; }
  .hw-av {
    width: 24px; height: 24px; flex: none;
    display: grid; place-items: center;
    background: var(--bg-muted);
    color: var(--fg-2);
    border-radius: 50%; /* seul arrondi de la page : un avatar est un portrait */
    overflow: hidden;
  }
  /* Icône Font Awesome (fa-solid fa-user) : tracé officiel FA Free, incrusté pour le rendu hors-ligne */
  .hw-av svg { width: 52%; height: 52%; fill: currentColor; }
  /* Avatars teintés : un peu de couleur par personne (réf. avatars photo Agendrix) */
  .hw-av.av-a { background: var(--orange-100); color: var(--slate-950); }
  .hw-av.av-b { background: var(--hw-violet-bg); color: var(--hw-violet); }
  .hw-av.av-c { background: var(--hw-green-bg); color: var(--hw-green); }
  .hw-av.av-d { background: var(--hw-gold-bg); color: var(--hw-gold); }
  [data-theme="dark"] .hw-av.av-a { background: rgba(242,118,51,0.2); color: var(--slate-100); }
  /* Cartes façon Agendrix : fond blanc, liseré coloré par type de mission, ombre légère */
  .hw-cell {
    position: relative;
    padding: 5px 7px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--fg);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--slate-400);
    box-shadow: 0 1px 2px rgba(15, 17, 34, 0.06);
    min-height: 38px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .hw-cell small { display: block; color: var(--fg-muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
  .hw-cell.c-orange { border-left-color: var(--orange); }
  .hw-cell.c-blue   { border-left-color: var(--slate-500); }
  .hw-cell.c-gold   { border-left-color: var(--hw-gold); }
  .hw-cell.c-violet { border-left-color: var(--hw-violet); }
  .hw-cell.c-green  { border-left-color: var(--hw-green); }
  /* Congé / absence : carte pleine douce, sans liseré (réf. cartes congé Agendrix) */
  .hw-cell.c-off {
    background: var(--bg-muted);
    border: 1px solid var(--line);
    color: var(--fg-muted);
    font-weight: 400;
  }
  .hw-cell.c-free {
    background: transparent;
    border: 1px dashed var(--line-2);
    border-left: 1px dashed var(--line-2);
    box-shadow: none;
    color: var(--fg-muted);
    font-weight: 400;
    display: grid;
    place-items: center;
    text-align: center;
  }
  /* Badge de conflit sur une carte (souligné rouge + étiquette), résolu par la séquence */
  .hw-cell.has-flag { border-bottom: 2px solid var(--hw-red); }
  .hw-flag {
    position: absolute;
    top: 3px; right: 3px;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--hw-red);
    padding: 1px 5px;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  }
  .hw-flag.on { opacity: 1; transform: scale(1); }
  /* Carte « libérée » : la mission vient d'être déplacée ailleurs */
  .hw-cell.ghosted { opacity: 0.32; transition: opacity 0.6s var(--ease); }
  .hw-cell.ghosted .hw-flag { opacity: 0; }
  /* Surlignage piloté par l'assistant : calque opacité uniquement */
  .hw-cell::after {
    content: '';
    position: absolute;
    inset: -1px;
    background: rgba(242,118,51,0.14);
    box-shadow: inset 0 0 0 2px var(--orange);
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    pointer-events: none;
  }
  .hw-cell.hit::after { opacity: 1; }
  /* Bloc proposition : superposé à la cellule libre de Marc */
  .hw-prop {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 4px 7px;
    background: var(--bg-accent);
    border: 1px dashed var(--orange);
    color: var(--fg);
    font-weight: 500;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  }
  .hw-prop .tag {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-text);
    border: 1px solid var(--line-accent-soft);
    border-radius: 4px;
    padding: 0 4px;
  }
  .hw-prop.on { opacity: 1; transform: scale(1); }
  /* Proposition validée par un responsable : la carte se solidifie */
  .hw-prop.ok { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--hw-violet); box-shadow: 0 1px 2px rgba(15,17,34,0.06); }
  .hw-prop.ok .tag { color: var(--renta-text); border-color: var(--renta); }
  /* Légende sous le schéma : posée SOUS le cadre, centrée entre le chip résolu (gauche)
     et la fenêtre assistant (droite), enfant absolu de la fenêtre pour garder l'animation */
  .hw-note {
    position: absolute;
    top: calc(100% + 30px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(420px, 80vw);
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--accent-text);
    opacity: 0;
    transition: opacity 0.5s var(--ease);
  }
  .hw-note.on { opacity: 1; }
  @media (max-width: 800px) {
    /* Assistant repassé dans le flux : la légende suit sous la fenêtre, en statique */
    .hw-note { position: static; transform: none; width: auto; max-width: none; margin: 12px auto 0; padding: 0 var(--sp-2); }
  }

  /* ── Fenêtre assistant SÉPARÉE : une app externe (Claude / Copilot / ChatGPT)
     avec son propre chrome de fenêtre, qui chevauche le coin de la fenêtre Beeye.
     Le lien avec Beeye passe par le chip « Appel de l'outil » dans les réponses. ── */
  .hw-assist {
    position: absolute;
    right: -20px;
    bottom: -60px; /* conversation raccourcie (1 échange) : la fenêtre reste plus basse que la fenêtre Beeye, aucun débord au-dessus */
    z-index: 4;
    width: 316px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line-2);
    box-shadow: 0 20px 48px rgba(15, 17, 34, 0.18), var(--elevation-3);
    transition: background 0.5s var(--ease);
    /* Fenêtre d'un AUTRE produit : elle garde son thème clair quel que soit le thème du site.
       Les tokens sont redéfinis localement, tout le contenu hérite. */
    --surface: #FFFFFF;
    --fg: #1F1F28;
    --fg-2: #3C3C49;
    --fg-muted: #71717D;
    --fg-subtle: #9A9AA5;
    --accent-text: #B4511E;          /* le chip « Appel de l'outil Beeye » reste orange Beeye */
    --line-accent-soft: #EAC7B3;
    --bubble-user-bg: #FFFFFF;
    --bubble-user-line: var(--line-2);
  }
  /* Thème par marque : fond, filets et logo aux couleurs officielles du produit */
  .hw-assist[data-ai="claude"]  { background: #F0EBE1; --line: #E4DDD0; --line-2: #D7CFBF; --bg-muted: #E9E2D5; --hw-ai: #D97757; }
  .hw-assist[data-ai="copilot"] { background: #F3F8FE; --line: #DDE8F5; --line-2: #C9DCF0; --bg-muted: #E7F0FB; --hw-ai: #0078D4; }
  .hw-assist[data-ai="chatgpt"] { background: #F7F7F8; --line: #E5E5E8; --line-2: #D5D5DA; --bg-muted: #ECECEF; --hw-ai: #0D0D0D; }
  .hw-assist-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-muted);
  }
  .hw-assist-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); flex: none; }
  /* Marque de l'outil affichée dans la barre : une seule visible, rotation à chaque boucle */
  .hw-brand { display: none; align-items: center; gap: 7px; margin-left: 6px; }
  .hw-brand.on { display: inline-flex; }
  .hw-brand-ico { width: 14px; height: 14px; flex: none; fill: var(--hw-ai); }
  .hw-brand b { font-size: 0.72rem; font-weight: 600; color: var(--fg); }

  /* ── Éléments flottants (réf. schémas du site actuel : carte en cours de dépôt, alerte KPI).
     Propriétés transform individuelles (rotate/translate) : navigateurs modernes. ── */
  .hw-float { position: absolute; z-index: 3; pointer-events: none; }
  .hf-drag {
    top: -16px; /* casse le cadre en haut à gauche, comme la carte en déplacement du schéma actuel */
    left: -16px;
    width: 158px;
    padding: 6px 9px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-left: 3px solid var(--hw-green);
    box-shadow: 0 16px 34px rgba(15, 17, 34, 0.2);
    rotate: -3deg;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--fg);
  }
  .hf-drag small { display: block; color: var(--fg-muted); font-weight: 400; }
  /* Chip « conflit résolu » : équilibre le coin bas-gauche, pop dans la séquence */
  .hf-resolved {
    bottom: -46px; /* posé sous le cadre : ne recouvre plus la note « Rien n'est affecté sans l'accord d'un responsable » */
    left: -16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-left: 3px solid var(--hw-green);
    box-shadow: 0 14px 30px rgba(15, 17, 34, 0.16);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  }
  .hf-resolved.on { opacity: 1; transform: scale(1); }
  .hf-resolved b { font-family: var(--font-condensed); font-weight: 700; font-size: 0.9375rem; color: var(--renta-text); }
  .hf-resolved span {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fg-muted);
  }
  /* Notification budget (retour Antoine : pas une carte de planning, une notification système).
     Elle tombe pendant la séquence, juste avant que l'utilisateur pose sa question sur ce dossier. */
  .hf-notif {
    top: -20px;
    right: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 13px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    box-shadow: 0 14px 30px rgba(15, 17, 34, 0.16);
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  }
  .hf-notif.on { opacity: 1; transform: translateY(0); }
  .hf-notif .bell {
    width: 26px; height: 26px; flex: none;
    display: grid; place-items: center;
    background: var(--orange-100);
    color: var(--accent-text);
  }
  [data-theme="dark"] .hf-notif .bell { background: rgba(242,118,51,0.18); }
  .hf-notif .bell svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; }
  .hf-notif b { display: block; font-family: var(--font-condensed); font-weight: 700; font-size: 0.875rem; color: var(--fg); line-height: 1.2; }
  .hf-notif span {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-top: 2px;
  }
  @keyframes hfFloat { from { translate: 0 0; } to { translate: 0 -8px; } }
  @media (prefers-reduced-motion: no-preference) {
    .hf-drag { animation: hfFloat 7s ease-in-out infinite alternate; }
  }
  .hw-msgs { padding: var(--sp-2); display: flex; flex-direction: column; gap: 9px; font-size: 0.78rem; flex: 1; }
  .hw-msg {
    max-width: 92%;
    padding: 8px 11px;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  }
  .hw-msg.on { opacity: 1; transform: none; }
  .hw-msg.user {
    align-self: flex-end;
    background: var(--bubble-user-bg);
    border: 1px solid var(--bubble-user-line);
    color: var(--fg);
  }
  .hw-msg.bot {
    align-self: flex-start;
    background: var(--surface);
    border: 1px solid var(--line-2);
    color: var(--fg-2);
  }
  .hw-msg.bot b { color: var(--fg); font-weight: 600; }
  .hw-tool {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-text);
    border: 1px solid var(--line-accent-soft);
    border-radius: 4px;
    padding: 2px 7px;
    margin-bottom: 6px;
  }
  .hw-tool::before { content: ''; width: 5px; height: 5px; background: var(--orange); flex: none; }
  .hw-msg.bot ul { list-style: none; margin: 5px 0 0; }
  .hw-msg.bot li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
  .hw-msg.bot li b { font-weight: 500; }
  .hw-msg.bot li span { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-text); white-space: nowrap; }
  .hw-msg .fin { display: block; margin-top: 5px; font-size: 0.75rem; color: var(--fg-muted); }
  .hw-caret {
    display: inline-block;
    width: 1px; height: 12px;
    background: var(--orange);
    vertical-align: -2px;
    animation: hwblink 1.1s steps(1) infinite;
  }
  @keyframes hwblink { 50% { opacity: 0; } }
  .hw-input {
    margin: 0 var(--sp-2) var(--sp-2);
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--line-2);
    border-radius: 4px;
    padding: 8px 11px;
    font-size: 0.75rem;
    color: var(--fg-muted);
    background: var(--surface);
  }
  /* Fondu de fin de boucle */
  .hero-window.fading .hw-msg,
  .hero-window.fading .hw-prop,
  .hero-window.fading .hw-input,
  .hero-window.fading .hw-flag,
  .hero-window.fading .hf-resolved,
  .hero-window.fading .hf-notif,
  .hero-window.fading .hw-note { opacity: 0; transition: opacity 0.8s var(--ease); }
  .hero-window.fading .hw-cell::after { opacity: 0; transition: opacity 0.8s var(--ease); }
  .hero-window.fading .hw-cell.ghosted { opacity: 1; transition: opacity 0.8s var(--ease); }
  .hero-window.resetting .hw-msg,
  .hero-window.resetting .hw-prop,
  .hero-window.resetting .hw-input,
  .hero-window.resetting .hw-flag,
  .hero-window.resetting .hf-resolved,
  .hero-window.resetting .hf-notif,
  .hero-window.resetting .hw-note,
  .hero-window.resetting .hw-cell.ghosted,
  .hero-window.resetting .hw-cell::after { transition: none; }
  /* État statique complet : sans JS ou avec reduced-motion, la scène est montrée résolue */
  .hero-window:not(.anim) .hw-msg { opacity: 1; transform: none; }
  .hero-window:not(.anim) .hw-prop { display: flex; opacity: 1; transform: none; }
  .hero-window:not(.anim) .hw-note { opacity: 1; }
  .hero-window:not(.anim) .hw-cell.hit-static::after { opacity: 1; }
  .hero-window:not(.anim) .hw-src { opacity: 0.32; }
  .hero-window:not(.anim) .hf-resolved { opacity: 1; transform: none; }
  .hero-window:not(.anim) .hf-notif { opacity: 1; transform: none; }
  .hero-window:not(.anim) .hw-caret { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .hw-caret { animation: none; }
  }

  @media (max-width: 1020px) {
    .hw-body { grid-template-columns: 1fr; }
    .hw-rail { display: none; }
  }
  @media (max-width: 800px) {
    /* L'assistant repasse dans le flux, sous la fenêtre Beeye ; les flottants disparaissent */
    .hw-assist { position: static; width: auto; border: none; border-top: 1px solid var(--line); box-shadow: none; }
    .hero-window { margin-bottom: 0; }
    .hw-float { display: none; }
    .hw-msgs { min-height: 0; }
  }
  @media (max-width: 560px) {
    .hero__title { font-size: 2.25rem; }
    /* Vue mois : défilement horizontal plutôt que d'amputer des semaines,
       la proposition en S38 reste atteignable */
    .hw-board { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .hw-grid { min-width: 640px; }
  }

  /* ══════════════ LOGO MARQUEE ══════════════ */
  .logo-bar { background: var(--bg); padding: var(--sp-6) 0; }
  .logo-bar__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--fg-muted);
    text-align: center;
  }
  .logo-bar__label::before,
  .logo-bar__label::after {
    content: '';
    display: block;
    width: 48px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--line-2), transparent);
  }
  .logo-bar__marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  }
  .logo-bar__track {
    display: flex;
    align-items: center;
    gap: 72px;
    width: max-content;
    animation: scrollLogos 42s linear infinite;
    will-change: transform;
  }
  /* v20 : deuxième ligne en sens inverse, vitesse légèrement différente pour un défilé organique */
  .logo-bar__marquee--rev { margin-top: 26px; }
  .logo-bar__track--rev { animation-direction: reverse; animation-duration: 36s; }
  .logo-bar__marquee:hover .logo-bar__track,
  .logo-bar__marquee:focus-within .logo-bar__track {
    animation-play-state: paused;
  }
  @keyframes scrollLogos {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .logo-bar__item { flex-shrink: 0; }
  .logo-bar__item img {
    display: block;
    width: auto;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter 300ms var(--ease), opacity 300ms var(--ease);
  }
  .logo-bar__item:hover img { filter: grayscale(0); opacity: 1; }
  /* Taille perçue normalisée : hauteur ajustée par logo selon son ratio.
     Wordmarks larges → plus courts (~24-26px), sigles compacts → plus hauts (~38-40px). */
  .lg-cerfrance img { height: 25px; }
  .lg-sthonore img { height: 30px; }
  .lg-crowe img { height: 28px; }
  .lg-keobiz img { height: 26px; }
  .lg-pkf img { height: 32px; }
  /* v20 : équilibrage au POIDS VISUEL, pas au pixel (retour Antoine) : les logos gras/denses
     (Fidens, Keobiz, Moore) descendent, les logos fins (Denjean, Saint-Honoré, Fleuret) montent.
     À affiner à l'œil sur le rendu. */
  .lg-denjean img { height: 42px; }
  .lg-dba img { height: 40px; }
  .lg-fidu { display: none; }
  .lg-fidu img { height: 30px; }
  /* Nouveaux logos (perceived-size normalisé) */
  .lg-forvis img { height: 34px; }
  .lg-gt img { height: 23px; }
  .lg-moore img { height: 24px; }
  .lg-apl img { height: 40px; }
  .lg-fidens img { height: 19px; }
  .lg-fleuret img { height: 26px; }
  .lg-retout img { height: 34px; }
  .lg-sinergys img { height: 26px; }
  .lg-sofradec img { height: 23px; }
  /* PKF Arsilon : SVG blanc, rendu sombre sur thème clair */
  .lg-pkf img { filter: grayscale(1) brightness(0); }
  .lg-pkf:hover img { filter: grayscale(1) brightness(0); opacity: 0.85; }
  /* Thème sombre : logos passés en blanc (fonds transparents nettoyés) */
  [data-theme="dark"] .logo-bar__item img,
  [data-theme="dark"] .lg-pkf img {
    filter: grayscale(1) brightness(0) invert(1);
    opacity: 0.7;
  }
  [data-theme="dark"] .logo-bar__item:hover img { opacity: 1; }
  [data-theme="dark"] .lg-fidu { display: block; }
  @media (max-width: 768px) {
    .logo-bar__track { gap: 48px; animation-duration: 32s; }
  }
  @media (prefers-reduced-motion: reduce) {
    .logo-bar__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; row-gap: var(--sp-3); }
    .logo-bar__track .logo-bar__item[aria-hidden="true"] { display: none; }
    .logo-bar__marquee { -webkit-mask-image: none; mask-image: none; }
  }

  /* ══════════════ PRODUIT : SÉLECTEUR D'ÉQUIPE + MOCKUPS ══════════════ */
  .product { background: var(--bg-muted); padding: var(--sp-10) 0; }

  /* Onglets de sélection d'équipe */
  .team-tabs {
    display: inline-flex;
    gap: 4px;
    margin: 0 auto var(--sp-6);
    padding: 4px;
    border: 1px solid var(--line-2);
    background: var(--surface);
    box-shadow: var(--elevation-1);
  }
  .team-tabs__wrap { display: flex; justify-content: center; }
  .team-tab {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--fg-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 8px 18px;
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
    white-space: nowrap;
  }
  .team-tab:hover { color: var(--fg); }
  @media (max-width: 560px) {
    .team-tabs__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; }
    .team-tab { padding: 8px 12px; font-size: 0.875rem; }
  }
  .team-tab[aria-selected="true"] {
    background: var(--orange);
    color: #FFFFFF;
  }

  .product__intro {
    text-align: center;
    min-height: 3.5em; /* réserve 2 lignes : le visuel ne saute pas en changeant d'équipe */
    max-width: 620px;
    margin: 0 auto var(--sp-6);
    color: var(--fg-muted);
    font-size: 1.0625rem;
    min-height: 3.4em;
  }
  .product__intro b { color: var(--fg); font-weight: 600; }

  /* ── Section produit : P3 (exploration product-section-attio-nav) ──
     Copie qui défile au centre, capture ÉPINGLÉE à droite qui bascule en fondu,
     et menu des piliers HORS layout : posé dans la marge gauche de la page pour que
     les deux colonnes de contenu restent alignées avec les sections voisines.
     Le menu n'apparaît que si la marge existe (≥ 1400 px) et disparaît en mobile. */
  .pseq3 { position: relative; display: grid; grid-template-columns: 0.95fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
  .pseq3__navwrap {
    position: absolute;
    top: 0; bottom: 0;
    right: calc(100% + clamp(24px, 3vw, 48px)); /* dans la gouttière, hors de la grille de contenu */
    width: 156px;
    display: none;
  }
  @media (min-width: 1400px) { .pseq3__navwrap { display: block; } }
  .pseq3__nav { position: sticky; top: 150px; list-style: none; text-align: right; }
  .pseq3__nav button {
    display: block; width: 100%;
    background: none; border: none; cursor: pointer;
    text-align: right;
    font-family: var(--font-condensed); font-weight: 600; font-size: 0.9375rem;
    color: var(--fg-subtle);
    padding: 9px 12px 9px 0;
    border-right: 2px solid var(--line-2);
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
  }
  .pseq3__nav li.on button { color: var(--fg); border-right-color: var(--orange); }
  .pseq3__flow { display: flex; flex-direction: column; gap: clamp(84px, 14vh, 150px); padding: 6px 0 30px; min-width: 0; }
  .pseq3__block { max-width: 46ch; }
  .pseq3__stage { position: sticky; top: 120px; min-width: 0; }
  .pseq3__shot {
    position: absolute; inset: 0;
    opacity: 0; transform: translateY(12px);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
    pointer-events: none;
  }
  .pseq3__shot.on { position: relative; opacity: 1; transform: none; pointer-events: auto; }
  @media (max-width: 900px) {
    /* Nav absente, capture dans le flux : copies puis captures, tout visible */
    .pseq3 { grid-template-columns: 1fr; }
    .pseq3__stage { position: static; }
    .pseq3__shot { position: relative; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 28px; }
    .pseq3__flow { gap: 36px; }
    .pseq3__block { max-width: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pseq3__shot { transition: none; position: relative; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 28px; }
    .pseq3__stage { position: static; }
  }

  /* Sous-sections produit : Planning / Temps / Rentabilité */
  /* v21 : rangée .prod-block supprimée (layout P3) ; seuls les styles de texte restent */
  .prod-block__label { display: block; margin-bottom: var(--sp-2); }
  .prod-block__text h3 { font-size: 1.5rem; margin-bottom: var(--sp-2); }
  .prod-block__text p { font-size: 0.9375rem; line-height: 1.65; color: var(--fg-2); margin-bottom: var(--sp-2); }
  /* Note honnête : purement typographique (retour Antoine v21) — italique,
     teinte légèrement réchauffée, aucun trait ni boîte */
  .prod-block__honest {
    font-size: 0.875rem;
    line-height: 1.55;
    font-style: italic;
    color: var(--fg-muted);
    color: color-mix(in srgb, var(--accent-text) 36%, var(--fg-muted));
    margin-top: var(--sp-2);
  }

  /* Cadre de mockup commun */
  .mock {
    background: var(--surface);
    border: 1px solid var(--line-2);
    box-shadow: var(--elevation-2);
    overflow: hidden;
  }
  .mock__bar {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
    padding: 9px var(--sp-2);
    border-bottom: 1px solid var(--line);
    background: var(--bg-subtle);
  }
  .mock__bar b { font-family: var(--font-condensed); font-weight: 600; color: var(--fg); font-size: 0.875rem; }
  .mock__bar span {
    font-family: var(--font-mono);
    font-size: 0.5625rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--fg-muted);
  }

  /* --- Mockup PLANNING --- */
  .mplan { padding: var(--sp-2); }
  .mplan__grid { display: grid; gap: 4px; font-size: 0.6875rem; }
  .mplan__grid .col-h,
  .mplan__grid .row-h {
    font-family: var(--font-mono);
    font-size: 0.5rem; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--fg-subtle);
    padding: 2px 3px;
    align-self: center;
  }
  .mplan__grid .row-h { color: var(--fg-2); font-weight: 500; white-space: nowrap; }
  .mplan__grid .col-h { text-align: center; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
  /* v20 · cartes des mockups produit alignées sur le hero : fond blanc,
     liseré coloré par type de mission, ombre légère */
  .mtask {
    padding: 4px 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--slate-400);
    box-shadow: 0 1px 2px rgba(15, 17, 34, 0.06);
    color: var(--fg);
    font-weight: 500;
    line-height: 1.3;
    min-height: 24px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .mtask small { display: block; font-weight: 400; color: var(--fg-muted); font-size: 0.9em; overflow: hidden; text-overflow: ellipsis; }
  /* v20 · en-tête de semaine pour les vues mois à colonnes-jour (planning EC) */
  .mplan__grid .wk-h { text-align: left; padding-left: 5px; border-left: 1px solid var(--line); }
  /* Mobile : la vue mois à 20 colonnes défile horizontalement au lieu de s'écraser */
  @media (max-width: 560px) {
    .mplan { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .mplan__grid--days { min-width: 540px; }
  }
  .mtask.t-orange { border-left-color: var(--orange); }
  .mtask.t-blue   { border-left-color: var(--slate-500); }
  .mtask.t-gold   { border-left-color: #D9A514; }
  .mtask.t-violet { border-left-color: #8B7CF6; }
  .mtask.t-green  { border-left-color: #1AA179; }
  .mtask.t-off    { background: var(--bg-muted); border: 1px solid var(--line); box-shadow: none; color: var(--fg-muted); font-weight: 400; }
  .mtask.t-span { grid-column: span 2; }
  .mtask.t-span3 { grid-column: span 3; }
  .mtask.t-span5 { grid-column: span 5; }
  .mtask.t-empty { background: transparent; border: 1px dashed var(--line-2); border-left: 1px dashed var(--line-2); box-shadow: none; color: var(--fg-subtle); font-weight: 400; }
  /* Proposition en boucle dans une plage Dispo : le planning « vit », comme le hero.
     Beeye propose (étiquette), l'humain arbitre : la carte reste en pointillé. */
  .mtask.has-prop { position: relative; overflow: visible; }
  .mprop {
    position: absolute;
    inset: -1px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3px 6px;
    background: var(--bg-accent);
    border: 1px dashed var(--orange);
    color: var(--fg);
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    animation: mpropLoop 8s var(--ease) infinite;
  }
  .mprop small { display: block; font-weight: 400; color: var(--fg-muted); font-size: 0.9em; }
  .mprop .tag {
    position: absolute;
    top: 2px; right: 3px;
    font-family: var(--font-mono);
    font-size: 0.45rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent-text);
  }
  @keyframes mpropLoop {
    0%, 14%  { opacity: 0; transform: scale(0.96); }
    24%, 82% { opacity: 1; transform: scale(1); }
    94%, 100% { opacity: 0; transform: scale(0.96); }
  }
  @media (prefers-reduced-motion: reduce) {
    .mprop { animation: none; }
  }

  /* --- Mockup TIMESHEET --- */
  .mts { padding: var(--sp-2); }
  .mts__day { border-top: 1px solid var(--line); padding: var(--sp-1) 0; }
  .mts__day:first-child { border-top: none; }
  .mts__dayhead {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--fg-muted); margin-bottom: 5px;
  }
  .mts__dayhead b { color: var(--fg); font-weight: 500; }
  .mts__row {
    display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2);
    padding: 4px 8px; margin-bottom: 3px;
    background: var(--bg-muted);
    border-left: 2px solid var(--slate-400);
    font-size: 0.75rem;
  }
  .mts__row.r-orange { border-left-color: var(--orange); }
  .mts__row.r-confirm { border-left-color: var(--slate-500); }
  .mts__row span { color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mts__row b { font-family: var(--font-mono); font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mts__chip {
    font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--accent-text); border: 1px solid var(--line-accent-soft); border-radius: 4px; padding: 1px 5px; white-space: nowrap;
  }
  .mts__foot { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--sp-1); margin-top: 4px; border-top: 1px solid var(--line-2); font-size: 0.75rem; }
  .mts__foot b { font-family: var(--font-mono); color: var(--fg); font-variant-numeric: tabular-nums; }

  /* --- Mockup RENTABILITÉ (page projet) --- */
  .mprof { padding: var(--sp-2) var(--sp-2) var(--sp-3); }
  .mprof__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-2); }
  .mprof__title { font-family: var(--font-condensed); font-weight: 600; color: var(--fg); font-size: 1rem; }
  .mprof__title small { display: block; font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); font-weight: 400; margin-top: 2px; }
  .sig {
    font-family: var(--font-mono); font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
    border-radius: 4px; padding: 3px 8px; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 5px;
  }
  .sig::before { content: ''; width: 6px; height: 6px; flex: none; }
  .sig--ok { color: var(--sig-ok); background: var(--sig-ok-bg); }
  .sig--ok::before { background: var(--sig-ok); }
  .sig--warn { color: var(--sig-warn); background: var(--sig-warn-bg); }
  .sig--warn::before { background: var(--sig-warn); }
  .sig--over { color: var(--sig-over); background: var(--sig-over-bg); }
  .sig--over::before { background: var(--sig-over); }
  .mprof__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: var(--sp-2); }
  .mprof__metric { background: var(--surface); padding: 8px 10px; }
  .mprof__metric .k { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-muted); display: block; margin-bottom: 2px; }
  .mprof__metric .v { font-family: var(--font-condensed); font-weight: 600; color: var(--fg); font-size: 1rem; font-variant-numeric: tabular-nums; }
  .mprof__metric .v.over { color: var(--sig-over); }
  .mprof__metric .v.warn { color: var(--sig-warn); }
  .mprof__metric .v.ok { color: var(--sig-ok); }
  .mprof__bar { height: 8px; background: var(--bg-muted); position: relative; margin: 3px 0 2px; border: 1px solid var(--line); }
  .mprof__bar i { position: absolute; inset: 0 auto 0 0; background: var(--slate-400); }
  .mprof__bar i.fill-ok { background: var(--sig-ok); }
  .mprof__bar i.fill-warn { background: var(--sig-warn); }
  .mprof__bar i.fill-over { background: var(--sig-over); }
  .mprof__bar .mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--fg); opacity: 0.55; }
  .mprof__barrow { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.5625rem; color: var(--fg-muted); }
  .mprof__phases { margin-top: var(--sp-2); }
  .mprof__phase { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--sp-2); align-items: center; padding: 5px 0; border-top: 1px solid var(--line); font-size: 0.75rem; }
  .mprof__phase:first-child { border-top: none; }
  .mprof__phase .pn { color: var(--fg-2); }
  .mprof__phase .pv { font-family: var(--font-mono); color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mprof__phasebar { grid-column: 1 / -1; }

  /* --- carte enfant mode métier : layer visibility --- */
  .team-view { display: none; }
  .team-view.active { display: block; }

  /* ══════════════ ASSISTANT IA ══════════════ */
  .assistant { background: var(--bg); padding: var(--sp-10) 0; }
  .assistant__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-8); align-items: center; }
  .assistant__lead { font-size: 1.0625rem; color: var(--fg-2); margin: var(--sp-2) 0 var(--sp-4); max-width: 540px; }
  .assistant__minis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); }
  .assistant__minis > div { border-top: 1px solid var(--line); padding-top: var(--sp-2); }
  .assistant__minis h3 { font-size: 1.0625rem; margin-bottom: 4px; }
  .assistant__minis p { font-size: 0.875rem; line-height: 1.6; color: var(--fg-muted); }
  .assistant__strip { margin-top: var(--sp-4); display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
  .assistant__strip .strip-note { flex-basis: 100%; font-size: 0.875rem; color: var(--fg-muted); margin-bottom: 4px; }
  .ai-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--fg-2);
    border: 1px solid var(--chip-line);
    border-radius: 4px;
    padding: 6px 14px;
    background: var(--surface);
  }
  .ai-ico { flex-shrink: 0; }
  /* Fenêtre d'assistant : chrome du produit tiers (marque rotative posée dans l'en-tête) */
  .chatbox {
    background: var(--surface);
    border: 1px solid var(--line-2);
    box-shadow: var(--elevation-3);
  }
  .chatbox__head {
    display: flex; align-items: center; gap: 9px;
    padding: 12px var(--sp-2);
    border-bottom: 1px solid var(--line);
    font-size: 0.78rem;
    color: var(--fg-muted);
  }
  .chatbox__head b { color: var(--fg); font-weight: 600; }
  .chatbox__dots { margin-left: auto; display: flex; gap: 5px; }
  .chatbox__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
  /* v20 : fenêtre d'un AUTRE produit, comme dans le hero — thème clair forcé quel que soit
     le thème du site, marque (logo officiel + fond) qui alterne Claude / Copilot / ChatGPT */
  .chatbox {
    --surface: #FFFFFF;
    --fg: #1F1F28;
    --fg-2: #3C3C49;
    --fg-muted: #71717D;
    --fg-subtle: #9A9AA5;
    --bg-subtle: #FFFFFF;
    --accent-text: #B4511E;          /* l'appel de l'outil Beeye reste orange Beeye */
    --line-accent-soft: #EAC7B3;
    --bubble-user-bg: #FFFFFF;
    --bubble-user-line: var(--line-2);
    transition: background 0.5s var(--ease);
  }
  .chatbox[data-ai="claude"]  { background: #F0EBE1; --line: #E4DDD0; --line-2: #D7CFBF; --bg-muted: #E9E2D5; --hw-ai: #D97757; }
  .chatbox[data-ai="copilot"] { background: #F3F8FE; --line: #DDE8F5; --line-2: #C9DCF0; --bg-muted: #E7F0FB; --hw-ai: #0078D4; }
  .chatbox[data-ai="chatgpt"] { background: #F7F7F8; --line: #E5E5E8; --line-2: #D5D5DA; --bg-muted: #ECECEF; --hw-ai: #0D0D0D; }
  .cb-brand { display: none; align-items: center; gap: 7px; }
  .cb-brand.on { display: inline-flex; }
  .cb-brand svg { width: 15px; height: 15px; flex: none; fill: var(--hw-ai); }
  .cb-brand b { color: var(--fg); font-weight: 600; }
  .chatbox__body { padding: var(--sp-2); display: grid; gap: 10px; font-size: 0.84rem; }
  .chatbox .msg { max-width: 90%; padding: 10px 13px; line-height: 1.55; }
  .chatbox .msg.user { margin-left: auto; background: var(--bubble-user-bg); border: 1px solid var(--bubble-user-line); color: var(--fg); }
  .chatbox .msg.bot { background: var(--bg-subtle); border: 1px solid var(--line); color: var(--fg-2); }
  .chatbox .msg.bot b { color: var(--fg); font-weight: 600; }
  .chatbox .msg.bot .num { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-text); }
  /* Bandeau d'appel d'outil : l'assistant atteint Beeye */
  .chatbox__toolcall {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.625rem; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--accent-text);
    background: var(--bg-accent);
    border: 1px dashed var(--orange);
    border-radius: 4px;
    padding: 7px 11px;
  }
  .chatbox__toolcall::before {
    content: ''; width: 7px; height: 7px; background: var(--orange); flex: none;
  }
  .chatbox__toolcall span { color: var(--fg-muted); text-transform: none; letter-spacing: 0.01em; }
  .chatbox__toolcall b { color: var(--fg); font-weight: 600; text-transform: none; letter-spacing: 0.01em; }
  .chatbox .act { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
  .chatbox .act span {
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--line-2);
    border-radius: 4px;
    padding: 4px 11px;
    color: var(--fg);
  }
  .chatbox .act .go { background: var(--orange); color: #FFFFFF; border-color: transparent; }
  .chatbox__input {
    margin: 4px var(--sp-2) var(--sp-2);
    display: flex; align-items: center; gap: 9px;
    border: 1px solid var(--line-2);
    border-radius: 4px;
    padding: 9px 13px;
    color: var(--fg-muted);
    font-size: 0.8125rem;
    background: var(--bg-subtle);
  }
  @media (max-width: 900px) {
    .assistant__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  }
  @media (max-width: 560px) {
    .assistant__minis { grid-template-columns: 1fr; }
  }

  /* ══════════════ EXCEL : AVANT / APRÈS ══════════════
     Variante 1 (excel-section-variations) : deux colonnes, filets seuls, colonne Excel
     estompée / colonne Beeye en encre. + flèches orange par ligne (empruntées à la V2).
     Sous-titre Excel supprimé (retour Antoine : ne pas vanter Excel). */
  .compare { background: var(--bg-muted); padding: var(--sp-10) 0; }
  .compare__head { max-width: 680px; margin-bottom: var(--sp-5); }
  .compare__head h2 { margin-bottom: var(--sp-2); }
  .xv { max-width: 1020px; }
  .xv__grid { display: grid; grid-template-columns: 180px 1fr 26px 1fr; column-gap: clamp(14px, 2.5vw, 28px); }
  .xv__ch { padding-bottom: 14px; }
  .xv__mark {
    position: relative; display: block;
    font-family: var(--font-condensed); font-weight: 700;
    font-size: 1.0625rem; letter-spacing: -0.01em;
  }
  .xv__ico { position: absolute; left: -26px; top: 0.05em; width: 17px; height: 17px; flex: none; }
  .xv__mark--excel { color: var(--fg-muted); }
  .xv__mark--beeye { color: var(--fg); }
  .xv__sub { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--accent-text); margin-top: 6px; }
  .xv__row {
    display: grid; grid-template-columns: subgrid; grid-column: 1 / -1;
    border-top: 1px solid var(--line);
    padding: 15px 0;
    align-items: start;
  }
  .xv__topic {
    font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
    letter-spacing: 0.01em; color: var(--fg-2);
    padding-right: 16px; padding-top: 2px;
  }
  .xv__excel { color: var(--fg-muted); font-size: 0.9375rem; line-height: 1.55; }
  .xv__arrow { width: 20px; height: 20px; flex: none; color: var(--orange); align-self: center; justify-self: center; }
  .xv__beeye { color: var(--fg); font-size: 0.9375rem; line-height: 1.55; font-weight: 500; }
  @media (max-width: 820px) {
    .xv__grid { grid-template-columns: 1fr; }
    .xv__ch--gap, .xv__ch--topic { display: none; }
    .xv__ch { padding-bottom: 8px; }
    .xv__mark { display: inline-flex; align-items: center; gap: 8px; }
    .xv__ico { position: static; }
    .xv__row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
    .xv__arrow { transform: rotate(90deg); justify-self: start; margin-left: 2px; }
  }

  /* ══════════════ TÉMOIGNAGES (POIVRÉS) ══════════════ */
  /* Cinq traitements de témoignage semés au fil de la page. Chaque bloc forme une bande
     distincte : le tint est alterné par rapport aux sections voisines. Tokens Beeye,
     angles nets, thèmes clair et sombre volontaires. */
  /* ══════════════ PERFORMANCE ══════════════
     Rendu différé des sections sous la ligne de flottaison : le navigateur ne met en page
     ces blocs qu'à l'approche du viewport (gros gain sur une page longue à 9 mockups).
     Sans effet sur les ancres ni sur les animations reveal (IntersectionObserver). */
  .product, .assistant, .compare, .integrations, .security, .onboarding, .faq, .tmb, .cta-final {
    content-visibility: auto;
    contain-intrinsic-size: auto 720px;
  }

  .tmb { padding: var(--sp-10) 0; }
  .tmb--plain  { background: var(--bg); }
  .tmb--subtle { background: var(--bg-subtle); }
  .tmb--muted  { background: var(--bg-muted); }
  .tmb--accent { background: var(--bg-accent); }

  .eyebrow {
    font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-text);
  }

  /* V1 · le logo en ancre, sans photo */
  .v1 { max-width: 780px; margin: 0 auto; text-align: center; }
  .v1__logo { height: 38px; width: auto; margin: 0 auto var(--sp-4); display: block; }
  .v1__quote {
    font-family: var(--font-condensed); font-weight: 600;
    font-size: clamp(1.6rem, 3.4vw, 2.35rem); line-height: 1.4; letter-spacing: -0.02em;
    color: var(--fg); margin: 0 0 var(--sp-4); text-wrap: balance;
  }
  .v1__quote b { color: var(--accent-text); font-weight: 700; }
  .v1__by {
    display: inline-flex; align-items: center; gap: 12px;
    padding-top: 20px; border-top: 1px solid var(--line-2);
  }
  .v1__name { font-family: var(--font-condensed); font-weight: 600; font-size: 1rem; color: var(--fg); letter-spacing: -0.01em; }
  .v1__role { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.01em; color: var(--fg-muted); }
  .v1__sep { width: 1px; height: 26px; background: var(--line-2); }

  /* V2 · pull-quote éditoriale (allégée, sans guillemets) */
  .v2 { max-width: 900px; margin: 0 auto; background: var(--bg-accent); padding: 56px clamp(28px,5vw,72px); }
  .v2__logo { display: block; height: 32px; width: auto; margin-bottom: var(--sp-3); }
  /* v21 : interligne resserré, respiration accrue sous les guillemets */
  .v2__glyph { display: block; color: var(--orange); opacity: 0.9; margin-bottom: 18px; }
  .v2__quote {
    font-family: var(--font-condensed); font-weight: 500;
    font-size: clamp(2rem, 4.6vw, 3.15rem); line-height: 1.22; letter-spacing: -0.03em;
    color: var(--fg); margin: 0 0 36px; text-wrap: balance;
  }
  .v2__quote b { color: var(--accent-text); font-weight: 700; }
  .v2__by { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .v2__name { font-family: var(--font-condensed); font-weight: 600; font-size: 1.0625rem; color: var(--fg); letter-spacing: -0.01em; }
  .v2__role { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--fg-muted); }

  /* V3 · photo en bichromie + grain */
  .v3 {
    display: grid; grid-template-columns: 260px 1fr;
    max-width: 860px; margin: 0 auto; background: var(--surface);
    border: 1px solid var(--line); box-shadow: var(--elevation-3); overflow: hidden;
  }
  .v3__photo { position: relative; background: var(--orange); overflow: hidden; }
  .v3__photo img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
    display: block; filter: url(#duo-slate-orange) contrast(1.04);
  }
  .v3__grain {
    position: absolute; inset: 0; pointer-events: none; opacity: 0.14; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .v3__panel { padding: 36px 36px 32px; display: flex; flex-direction: column; }
  .v3__quote {
    font-family: var(--font-condensed); font-weight: 500;
    font-size: 1.3125rem; line-height: 1.36; letter-spacing: -0.01em; color: var(--fg);
    margin: 14px 0 auto; text-wrap: balance;
  }
  .v3__quote b { color: var(--accent-text); font-weight: 700; }
  .v3__by { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .v3__name { font-family: var(--font-condensed); font-weight: 600; font-size: 1.0625rem; color: var(--fg); letter-spacing: -0.01em; }
  .v3__role { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.01em; color: var(--fg-muted); margin-top: 3px; }
  .v3__logo { height: 26px; width: auto; flex-shrink: 0; opacity: 0.8; }

  /* V4 · citation + résultat chiffré (trois tuiles de preuve d'échelle) */
  .v4 {
    display: grid; grid-template-columns: 300px 1fr; align-items: stretch;
    max-width: 900px; margin: 0 auto; background: var(--surface);
    border: 1px solid var(--line); box-shadow: var(--elevation-3); overflow: hidden;
  }
  .v4__stat { background: var(--renta-tint); padding: 36px 32px; display: flex; flex-direction: column; justify-content: center; gap: 22px; border-right: 1px solid var(--line); }
  .v4__tile { display: flex; flex-direction: column; }
  .v4__num { font-family: var(--font-condensed); font-weight: 700; font-size: clamp(2.4rem,5vw,3rem); line-height: 0.92; letter-spacing: -0.04em; color: var(--renta-text); font-variant-numeric: tabular-nums; }
  .v4__num .unit { color: var(--renta); font-size: 0.62em; }
  .v4__tlabel { font-family: var(--font-condensed); font-weight: 600; font-size: 0.95rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--fg-2); margin-top: 6px; }
  .v4__logo { height: 26px; width: auto; align-self: flex-start; margin-bottom: 2px; filter: grayscale(1) brightness(0); opacity: 0.85; }
  [data-theme="dark"] .v4__logo { filter: brightness(0) invert(1); opacity: 0.9; }
  .v4__panel { padding: 36px 36px 32px; display: flex; flex-direction: column; }
  .v4__quote { font-family: var(--font-condensed); font-weight: 500; font-size: 1.25rem; line-height: 1.4; letter-spacing: -0.01em; color: var(--fg); margin: 12px 0 auto; text-wrap: balance; }
  .v4__quote b { color: var(--accent-text); font-weight: 700; }
  .v4__by { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); }
  .v4__name { font-family: var(--font-condensed); font-weight: 600; font-size: 1rem; color: var(--fg); letter-spacing: -0.01em; }
  .v4__role { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.01em; color: var(--fg-muted); margin-top: 2px; }

  /* V5 · mur de citations (breadth, logos) */
  .v5 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1040px; margin: 0 auto; }
  .v5__card { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--elevation-2); padding: 26px 26px 22px; display: flex; flex-direction: column; }
  .v5__wordmark { font-family: var(--font-condensed); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--fg-2); margin-bottom: 18px; }
  .v5__logo { height: 26px; width: auto; margin-bottom: 18px; align-self: flex-start; opacity: 0.82; }
  .v5__quote { font-size: 0.9375rem; line-height: 1.5; color: var(--fg-2); margin: 0 0 auto; }
  .v5__quote b { color: var(--accent-text); font-weight: 600; }
  .v5__by { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
  .v5__name { font-family: var(--font-condensed); font-weight: 600; font-size: 0.9375rem; color: var(--fg); letter-spacing: -0.01em; }
  .v5__role { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.01em; color: var(--fg-muted); margin-top: 2px; }

  /* v20 · métadonnées de taille de cabinet sous les signatures (faits vérifiés uniquement) */
  .v1__by { flex-wrap: wrap; justify-content: center; }
  .v5__meta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.02em; color: var(--fg-muted); margin-top: 4px; }

  /* ══════════════ RÉSULTATS CONSTATÉS (v20) ══════════════
     Preuve d'impact sourcée client par client, placée après le bandeau logos.
     Règle anti-survente (decisions.md #2) : chaque chiffre est attribué, aucune moyenne inventée. */
  .results { background: var(--bg-subtle); padding: var(--sp-8) 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
  .results__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 44px); max-width: 1120px; margin: 0 auto; }
  @media (max-width: 1020px) { .results__grid { grid-template-columns: repeat(2, 1fr); } }
  .results__tile { display: flex; flex-direction: column; align-items: center; text-align: center; }
  /* Quatre axes de résultat, chacun avec son indicateur en très gras (retour Antoine) */
  .results__axis {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fg);
  }
  .results__axis.ax-renta { color: var(--renta-text); }
  .results__axis.ax-charge { color: var(--accent-text); }
  .results__axis.ax-auto { color: #8B7CF6; } /* violet des maquettes produit (planification) */
  [data-theme="dark"] .results__axis.ax-auto { color: #A79BFF; }
  .results__num {
    font-family: var(--font-condensed);
    font-weight: 700;
    font-size: clamp(2.3rem, 4.4vw, 3rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
    margin-top: 10px;
  }
  .results__num .unit { font-size: 0.55em; letter-spacing: -0.01em; }
  .results__tile:nth-child(1) .results__num { color: var(--renta-text); }
  .results__tile:nth-child(2) .results__num { color: var(--accent-text); }
  .results__tile:nth-child(4) .results__num { color: #8B7CF6; }
  [data-theme="dark"] .results__tile:nth-child(4) .results__num { color: #A79BFF; }
  .results__label { font-family: var(--font-condensed); font-weight: 600; font-size: 0.9875rem; line-height: 1.35; letter-spacing: -0.01em; color: var(--fg-2); margin-top: 8px; max-width: 26ch; }
  .results__label b { color: var(--fg); font-weight: 700; }
  .results__src { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.02em; color: var(--fg-muted); margin-top: 10px; }
  @media (max-width: 760px) {
    .results__grid { grid-template-columns: 1fr; gap: 28px; }
    .results__label { max-width: none; }
  }

  /* Logos posés sur carte : rester lisibles sur surface sombre (même parti pris que le bandeau logos) */
  [data-theme="dark"] .v1__logo,
  [data-theme="dark"] .v2__logo,
  [data-theme="dark"] .v3__logo,
  [data-theme="dark"] .v5__logo { filter: brightness(0) invert(1); opacity: 0.85; }

  @media (max-width: 760px) {
    .v3, .v4 { grid-template-columns: 1fr; }
    .v3__photo { aspect-ratio: 16/9; }
    .v4__stat { border-right: none; border-bottom: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; gap: 20px 28px; }
    .v5 { grid-template-columns: 1fr; }
    .v2 { padding: 36px 24px; }
  }

  /* ══════════════ INTÉGRATIONS ══════════════ */
  .integrations { background: var(--bg); padding: var(--sp-10) 0; }
  /* ── v21 · Flux du devis à la facture (concept Stripe « Connect to existing systems ») ──
     Le cycle de vie traverse la section : le devis ENTRE depuis l'outil de gestion,
     Beeye planifie / réalise / mesure, la facture SORT vers l'outil de facturation.
     Points animés le long des connecteurs pointillés, comme les schémas Stripe. */
  .flow { max-width: 1080px; margin: 0 auto var(--sp-6); }
  .flow__lane { display: grid; grid-template-columns: 170px 1fr minmax(300px, 380px) 1fr 170px; align-items: center; }
  .flow__node {
    background: var(--surface);
    border: 1px solid var(--line-2);
    box-shadow: var(--elevation-1);
    padding: 14px 16px;
    text-align: center;
  }
  .flow__node b { display: block; font-family: var(--font-condensed); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--fg); }
  .flow__node small { display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-muted); margin-top: 5px; }
  .flow__node .ico { width: 18px; height: 18px; color: var(--fg-muted); stroke: currentColor; fill: none; stroke-width: 1.7; margin-bottom: 6px; }
  .flow__link { position: relative; height: 46px; }
  .flow__link::before {
    content: '';
    position: absolute; left: 6px; right: 6px; top: 50%;
    border-top: 2px dotted var(--line-2);
  }
  .flow__link .dot {
    position: absolute; top: 50%; left: 6px;
    width: 7px; height: 7px; margin-top: -3.5px;
    border-radius: 50%;
    background: var(--orange);
    animation: flowDot 2.8s linear infinite;
  }
  .flow__link span {
    position: absolute; left: 50%; top: calc(50% + 10px);
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.04em;
    color: var(--fg-muted);
  }
  @keyframes flowDot { from { left: 6px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { left: calc(100% - 12px); opacity: 0; } }
  .flow__core {
    background: var(--bg-accent);
    border: 1px solid var(--line-accent-soft);
    box-shadow: var(--elevation-2);
    padding: 16px;
  }
  /* v21 : logo Beeye centré, « Plan de charge » dessous */
  .flow__corehead { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-bottom: 12px; }
  .flow__corehead img { height: 20px; width: auto; }
  .flow__corehead span { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-text); }
  .flow__steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 6px; }
  .flow__step { background: var(--surface); border: 1px solid var(--line); padding: 9px 8px; text-align: center; }
  .flow__step b { display: block; font-family: var(--font-condensed); font-weight: 600; font-size: 0.84rem; letter-spacing: -0.01em; color: var(--fg); }
  .flow__step small { display: block; font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--fg-muted); margin-top: 3px; }
  .flow__chev { align-self: center; width: 12px; height: 12px; color: var(--orange); stroke: currentColor; fill: none; stroke-width: 2; }
  .flow__branches { display: flex; justify-content: center; gap: clamp(14px, 3vw, 36px); flex-wrap: wrap; margin-top: 18px; }
  .flow__branch {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.03em;
    color: var(--fg-muted);
    border: 1px dashed var(--line-2);
    padding: 6px 11px;
  }
  .flow__branch i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); opacity: 0.7; flex: none; }
  @media (max-width: 860px) {
    /* Le cycle passe en vertical : nœud, connecteur vertical animé, cœur, connecteur, nœud */
    .flow__lane { grid-template-columns: 1fr; justify-items: center; }
    .flow__node { width: min(320px, 100%); }
    .flow__link { width: 2px; height: 52px; }
    .flow__link::before { left: 50%; right: auto; top: 8px; bottom: 8px; border-top: none; border-left: 2px dotted var(--line-2); }
    .flow__link .dot { left: 50%; top: 8px; margin: 0 0 0 -2.5px; animation: flowDotV 2.4s linear infinite; }
    .flow__link span { left: calc(50% + 12px); top: 50%; transform: translateY(-50%); }
    .flow__core { width: 100%; }
    .flow__steps { grid-template-columns: 1fr; }
    .flow__chev { transform: rotate(90deg); justify-self: center; }
  }
  @keyframes flowDotV { from { top: 8px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { top: calc(100% - 14px); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .flow__link .dot { animation: none; opacity: 0.7; left: 50%; } }
  /* v21 : cartes-logos (vrais logos éditeurs) à la place des badges texte,
     redondants avec le schéma de flux au-dessus. Kicker mono au-dessus du mur. */
  .integrations__kicker {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin: var(--sp-5) auto var(--sp-3);
  }
  .integrations__wall {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 880px;
    margin: 0 auto var(--sp-4);
  }
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-condensed);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: -0.005em;
    color: var(--fg);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--elevation-1);
    padding: 8px 14px;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .chip:hover { border-color: var(--orange); transform: translateY(-1px); }
  .chip img, .chip svg.ilogo { width: 20px; height: 20px; flex: none; object-fit: contain; }
  /* Notes qualité logos : Lucca 33px / Pennylane 48px (favicons) — remplacer par les
     press kits éditeurs à la mise en ligne HubSpot */
  .integrations__note {
    max-width: 680px;
    margin: 0 auto var(--sp-3);
    text-align: center;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--fg-muted);
  }
  .integrations__note strong { font-weight: 600; color: var(--fg-2); }

  /* ══════════════ SÉCURITÉ & CONFORMITÉ ══════════════ */
  .security {
    background: var(--bg-accent);
    border-top: 1px solid var(--line-accent-soft);
    border-bottom: 1px solid var(--line-accent-soft);
    padding: var(--sp-10) 0;
  }
  .security__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
  .scell {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 2px solid var(--orange);
    padding: var(--sp-3) var(--sp-4);
    box-shadow: var(--elevation-1);
  }
  .scell__badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.6875rem; font-weight: 500;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--accent-text);
    border: 1px solid var(--line-accent-soft);
    border-radius: 4px;
    padding: 3px 9px;
    margin-bottom: var(--sp-2);
  }
  .scell h3 { font-size: 1.0625rem; margin-bottom: 4px; }
  .scell p { font-size: 0.9375rem; line-height: 1.6; color: var(--fg-2); }
  .security__certs { margin-top: var(--sp-4); display: flex; justify-content: center; gap: var(--sp-1); flex-wrap: wrap; }
  .security__certs span {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    border: 1px solid var(--chip-line);
    border-radius: 4px;
    background: var(--surface);
    padding: 5px 13px;
    color: var(--fg-muted);
  }
  @media (max-width: 860px) { .security__grid { grid-template-columns: 1fr; } }

  /* ══════════════ PLAN DE MATCH (DÉMARRER) · timeline horizontale ══════════════ */
  .onboarding { background: var(--bg); padding: var(--sp-10) 0; }
  .pm-intro { max-width: 56ch; margin: 0 auto; text-align: center; }
  .pm-intro p { font-size: 1.0625rem; line-height: 1.65; color: var(--fg-2); }
  .pm-intro strong { font-weight: 600; color: var(--fg); }

  /* ── v21 · Option D (onboarding-parallel-variations) : colonne vertébrale centrale,
     branches technique (gauche, indigo) / humaine (droite, orange). Jalons communs
     Kickoff / Autonomie en TEXTE NU sur l'axe (retour Antoine : pas de boîte), trait 1px. */
  .onb-legend { display: flex; justify-content: center; gap: 22px; margin: var(--sp-5) 0 var(--sp-2); font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); }
  .onb-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
  .onb-spine { max-width: 940px; margin: 0 auto; position: relative; }
  .onb-spine__line {
    position: absolute; left: 50%; top: 10px; bottom: 10px;
    width: 1px; margin-left: -0.5px;
    background: repeating-linear-gradient(to bottom, var(--line-2) 0 4px, transparent 4px 9px);
  }
  .onb-row { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; }
  .onb-node {
    grid-column: 2; justify-self: center;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--surface); border: 2px solid var(--fg-subtle);
    position: relative; z-index: 1;
  }
  .onb-row--tech .onb-node { border-color: var(--temps); }
  .onb-row--team .onb-node { border-color: var(--orange); }
  .onb-card {
    border: 1px solid var(--line); background: var(--surface); box-shadow: var(--elevation-1);
    padding: 10px 13px; margin: 8px 0; max-width: 360px;
    font-size: 0.875rem; font-weight: 500; color: var(--fg);
  }
  .onb-card small { display: block; font-weight: 400; color: var(--fg-muted); font-size: 0.78rem; margin-top: 2px; }
  .onb-row--tech .onb-card { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; border-right: 3px solid var(--temps); }
  .onb-row--team .onb-card { grid-column: 3; grid-row: 1; justify-self: start; border-left: 3px solid var(--orange); }
  .onb-row--tech .onb-node, .onb-row--team .onb-node { grid-row: 1; }
  /* Jalons communs : texte nu, le fond de section masque l'axe derrière */
  .onb-milestone { grid-column: 1 / -1; justify-self: center; text-align: center; position: relative; z-index: 1; background: var(--bg); padding: 12px 20px; margin: 4px 0; }
  .onb-milestone b { display: block; font-family: var(--font-condensed); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--fg); }
  .onb-milestone small { display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); margin-top: 3px; }
  @media (max-width: 760px) {
    .onb-spine__line { left: 9px; margin: 0; }
    .onb-row { grid-template-columns: 20px 1fr; }
    .onb-node { grid-column: 1; }
    .onb-row--tech .onb-card, .onb-row--team .onb-card { grid-column: 2; justify-self: start; text-align: left; max-width: none; border-right: none; }
    .onb-row--tech .onb-card { border-left: 3px solid var(--temps); }
    .onb-milestone { grid-column: 1 / -1; justify-self: start; text-align: left; padding: 12px 0 12px 32px; }
  }

  /* ── v21 · Prérequis restructurés : deux cartes (référent / données) + la ligne franche ── */
  .prereq { max-width: 880px; margin: var(--sp-6) auto 0; }
  .prereq__kicker { text-align: center; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--sp-3); }
  .prereq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .prereq__card {
    border: 1px solid var(--line); background: var(--bg-subtle);
    padding: 18px 20px;
    display: grid; grid-template-columns: 32px 1fr; gap: 13px; align-items: start;
  }
  .prereq__card .ico { width: 20px; height: 20px; color: var(--accent-text); stroke: currentColor; fill: none; stroke-width: 1.7; margin-top: 2px; }
  .prereq__card b { display: block; font-family: var(--font-condensed); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--fg); margin-bottom: 4px; }
  .prereq__card p { font-size: 0.9rem; line-height: 1.6; color: var(--fg-2); }
  .prereq__foot { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: 18px; }
  .prereq__foot p {
    flex: 1; min-width: 280px;
    font-size: 0.9rem; line-height: 1.6; font-style: italic;
    color: var(--fg-muted);
    color: color-mix(in srgb, var(--accent-text) 36%, var(--fg-muted));
  }
  @media (max-width: 760px) { .prereq__grid { grid-template-columns: 1fr; } }

  /* ══════════════ FAQ ══════════════ */
  .faq { background: var(--bg-subtle); padding: var(--sp-10) 0; }
  .faq__list { max-width: 720px; margin: 0 auto; }
  .faq__item { border-bottom: 1px solid var(--line-2); }
  .faq__item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-3) 0;
    font-family: var(--font-condensed);
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fg);
    transition: color var(--dur) var(--ease);
  }
  .faq__item summary::-webkit-details-marker { display: none; }
  .faq__item summary:hover { color: var(--accent-text); }
  .faq__item summary::after {
    content: '+';
    font-family: var(--font-mono);
    font-size: 1.125rem;
    color: var(--fg-muted);
    flex-shrink: 0;
    transition: color var(--dur) var(--ease);
  }
  .faq__item[open] summary::after { content: '\2212'; color: var(--accent-text); }
  .faq__answer { padding: 0 0 var(--sp-3); font-size: 0.9375rem; line-height: 1.7; color: var(--fg-2); max-width: 620px; }
  .faq__answer strong { font-weight: 600; color: var(--fg); }

  /* ══════════════ CTA FINAL ══════════════ */
  .cta-final { background: var(--dark-panel); border-top: 1px solid var(--dark-panel-line); padding: var(--sp-10) 0; position: relative; overflow: hidden; }
  .cta-final::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 130%, rgba(242,118,51,0.16), transparent 62%);
    pointer-events: none;
  }
  .cta-final__inner { position: relative; text-align: center; max-width: 680px; margin: 0 auto; }
  .cta-final__kicker { color: var(--orange); display: block; margin-bottom: var(--sp-2); letter-spacing: 0.05em; }
  .cta-final__title { color: #FFFFFF; margin-bottom: var(--sp-2); font-size: 2.25rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
  .cta-final__sub { color: var(--slate-300); max-width: 560px; margin: 0 auto var(--sp-4); }
  .cta-final__actions { display: flex; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
  .cta-final__secondary { font-size: 0.9375rem; color: var(--slate-400); }
  .cta-final__secondary a { color: var(--slate-300); }
  .cta-final__secondary a:hover { color: #FFFFFF; }

  /* ══════════════ FOOTER ══════════════ */
  .footer { background: var(--bg); border-top: 1px solid var(--line); padding: var(--sp-8) 0 var(--sp-5); }
  .footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr; /* v21 : colonnes Produit et Cabinet supprimées */
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
  }
  .footer__brand .header__logo img { height: 28px; }
  .footer__brand p { font-size: 0.875rem; color: var(--fg-muted); max-width: 260px; margin-top: var(--sp-2); }
  .footer__col h3 {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-bottom: var(--sp-2);
  }
  .footer__col ul { list-style: none; }
  .footer__col li { margin-bottom: var(--sp-1); }
  .footer__col a { font-size: 0.9375rem; color: var(--fg-2); text-decoration: none; }
  .footer__col a:hover { color: var(--fg); }
  .footer__legal {
    border-top: 1px solid var(--line);
    padding-top: var(--sp-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--fg-muted);
  }
  .footer__legal-links { display: flex; gap: var(--sp-3); }
  .footer__legal a { color: var(--fg-muted); text-decoration: none; }
  .footer__legal a:hover { color: var(--fg); }
  @media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }

  @media (max-width: 720px) {
    h1 { font-size: 2.125rem; }
    h2 { font-size: 1.5rem; }
    /* v21 : la nav flottante (68 px) impose de garder le dégagement haut en mobile */
    .hero { padding: calc(var(--sp-6) + 84px) 0 var(--sp-8); }
    .cta-final__title { font-size: 1.75rem; }
    .team-tabs { width: 100%; }
    .team-tab { flex: 1; padding: 8px 10px; font-size: 0.875rem; }
  }

  /* ══════════════ COULEURS & ICÔNES · ENRICHISSEMENT v16 ══════════════
     La couleur ponctue (icône, libellé, filet, état de maquette), jamais seule :
     toujours doublée d'un libellé ou d'une icône. Coins nets conservés.
     Icônes FontAwesome décoratives (aria-hidden). Si le kit échoue, le <i> reste
     vide → masqué, la mise en page tient. */
  .pillar-ico:empty, .team-tab__ico:empty, .scell__ico:empty, .btn i:empty { display: none; }
  svg.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex-shrink: 0; }
  .scell__ico.ico { width: 1.35em; height: 1.35em; display: block; }

  /* 1 · Piliers produit : libellé + icône dans la teinte, filet 2px sur la maquette */
  .pillar-ico { margin-right: 8px; font-size: 1.2rem; vertical-align: -2px; color: inherit; }
  .prod-block .prod-block__label--plan  { color: var(--plan-text); }
  .prod-block .prod-block__label--temps { color: var(--temps-text); }
  .prod-block .prod-block__label--renta { color: var(--renta-text); }
  .mock:has(.mplan) { border-top: 2px solid var(--plan); }
  .mock:has(.mts)   { border-top: 2px solid var(--temps); }
  .mock:has(.mprof) { border-top: 2px solid var(--renta); }
  /* État confirmé de la feuille de temps : indigo (signal du pilier Suivi des temps) */
  .mts__row.r-confirm { border-left-color: var(--temps); }

  /* 2 · Onglets métier : glyphe discret ; état actif orange (marque) inchangé */
  .team-tab { display: inline-flex; align-items: center; gap: 8px; }
  .team-tab__ico { font-size: 0.9rem; }

  /* 3 · Sécurité : une icône par carte, coche/sceau en vert, le reste en gris */
  .scell__ico { display: block; font-size: 1.35rem; line-height: 1; color: var(--fg-muted); margin-bottom: var(--sp-1); }
  .scell__ico--check { color: var(--renta-text); }


  /* 5 · Excel avant/après : marqueur ambre (limite) vs coche verte (Beeye) */
  /* v20 : icônes attention/check retirées des lignes du tableau (répétition) ;
     le contraste passe par les colonnes elles-mêmes */

  /* ══════════════ MOTION LEVER 4 (ajouts sobres) ══════════════
     Règle de marque : on n'anime que transform et opacity, jamais la mise en page.
     Tout est neutralisé sous prefers-reduced-motion (bloc dédié en fin de section).
     Les états initiaux masqués sont révélés via la classe .is-visible que le
     système .reveal existant pose déjà (même profil de dépendance au JS). */

  /* Cartes tactiles : léger soulèvement + ombre teintée au survol (transform/ombre uniquement).
     Le décalage --rd (index) ne s'applique qu'à l'opacité d'entrée, jamais au survol. */
  .scell, .v5__card, .v4 {
    transition-property: opacity, transform, box-shadow;
    transition-duration: 0.55s, 0.2s, 0.2s;
    transition-timing-function: var(--ease);
    will-change: transform;
  }
  .scell, .v5__card { transition-delay: calc(var(--rd, 0) * 60ms), 0s, 0s; }
  .v4 { transition-delay: 0s, 0s, 0s; }
  .scell:hover, .v5__card:hover, .v4:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(242,118,51,0.12), 0 2px 8px rgba(31,31,48,0.06);
  }

  /* Mur de témoignages : les cartes apparaissent en fondu décalé quand le bloc entre en vue */
  .v5__card { opacity: 0; }
  .v5.is-visible .v5__card { opacity: 1; }

  /* Chips d'intégration : fondu décalé à l'entrée, survol existant conservé */
  .integrations__wall .chip {
    opacity: 0;
    transition-property: opacity, border-color, transform;
    transition-duration: 0.45s, 0.2s, 0.2s;
    transition-timing-function: var(--ease);
    transition-delay: calc(var(--rd, 0) * 45ms), 0s, 0s;
  }
  .integrations__wall.is-visible .chip { opacity: 1; }

  /* Maquette produit : les cellules se posent en cascade rapide à l'entrée du bloc.
     --md (index) posé en JS ; transform/opacity uniquement, aucun décalage de mise en page. */
  .product .mock .mtask,
  .product .mock .mts__row,
  .product .mock .mprof__metric {
    opacity: 0;
    transform: translateY(4px) scale(0.99);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
    transition-delay: calc(var(--md, 0) * 30ms);
  }
  /* v21 : la cascade suit la capture ACTIVE de la séquence P3 (correctif : l'ancien
     sélecteur .prod-block.is-visible ne matchait plus rien, cartes invisibles) */
  .product .pseq3__shot.on .mock .mtask,
  .product .pseq3__shot.on .mock .mts__row,
  .product .pseq3__shot.on .mock .mprof__metric {
    opacity: 1;
    transform: none;
  }
  @media (max-width: 900px) {
    /* Captures toutes visibles dans le flux : aucune cascade conditionnée à .on */
    .product .mock .mtask,
    .product .mock .mts__row,
    .product .mock .mprof__metric { opacity: 1; transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .scell, .v5__card, .v4,
    .integrations__wall .chip,
    .product .mock .mtask,
    .product .mock .mts__row,
    .product .mock .mprof__metric {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
  }

  /* ── Sécurité v2 : certifications (logos) + faits, grille stricte partagée 44px ── */
  /* v21 : Variante 3 — titre à gauche / liste à droite */
  .s3 { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(32px, 5vw, 56px); max-width: 1020px; margin: 0 auto; }
  .s3__left { display: flex; flex-direction: column; }
  .s3__left h2 { margin-bottom: 0; text-align: left; }
  .s3__claim { margin: 18px 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--fg-2); max-width: 34ch; }
  .s3__logos { display: flex; align-items: center; gap: 28px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
  .s3__logos .soc img { height: 62px; width: auto; }
  .s3__logos .bcorp img { height: 62px; width: auto; }
  .s3__logocap { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.02em; line-height: 1.5; color: var(--fg-muted); max-width: 22ch; }
  .s3__list { min-width: 0; display: flex; flex-direction: column; }
  .s3__item { display: grid; grid-template-columns: 22px 1fr; gap: 15px; align-items: start; padding: 20px 0; }
  .s3__item + .s3__item { border-top: 1px solid var(--line); }
  .s3__item:first-child { padding-top: 0; }
  .s3__item .glyph--check { width: 18px; height: 18px; margin-top: 3px; color: var(--renta-text); }
  .s3__item b { display: block; font-family: var(--font-condensed); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--fg); margin-bottom: 3px; }
  .s3__item span { font-size: 0.9375rem; line-height: 1.5; color: var(--fg-2); }
  .s3__dsi { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--fg-muted); }
  @media (max-width: 860px) { .s3 { grid-template-columns: 1fr; gap: 32px; } }
  [data-