/* Home publique — feuille autonome, reprise telle quelle du mockup.
   Chargée UNIQUEMENT par layouts/public.html.erb : elle ne croise donc
   jamais application.css. C'est ce qui autorise ses sélecteurs très
   génériques (.main, .shell, .panel, .scene) sans risque de collision. */

  :root {
    --ground:      #1C1C1C;
    --dot:         rgba(255, 255, 255, 0.07);
    --dot-size:    24px;

    --rail:        #141414;                  /* fond du footer */
    --card:        #242424;
    --hairline:    rgba(255, 255, 255, 0.06);
    --hairline-2:  rgba(255, 255, 255, 0.12);

    --ink:         #E6E6E6;
    --ink-muted:   rgba(230, 230, 230, 0.52);
    --ink-faint:   rgba(230, 230, 230, 0.30);
    --accent:      #EC5935;
    --ok:          #7DCB9A;   /* réussite — même famille que la sauge du pricing */

    --gutter:      44px;
    --radius:      20px;
    --header-h:    100vh;                    /* espace au-dessus de la carte */
    --content-w:   1180px;                   /* largeur commune des écrans */
    --ground-blur: rgba(28, 28, 28, 0.82);   /* --ground translucide, barre figée */
    --footer-h:    276px;
    --footer-w:    min(1320px, calc(100% - var(--gutter) * 5));
    /* Bandeau vidéo, borné à la fenêtre : épinglé par le bas, au-delà
       son haut passerait hors champ. */
    --testi-h:     min(1104px, 86vh);
    --testi-gap:   16px;
    --testi-dur:   25s;                      /* vitesse du ruban (+50%) */
    /* Hauteur réservée autour de la vidéo de l'écran 3 : padding du
       panneau (90+90) + titre (~62) + sous-titre (~67) + texte de fin
       et gaps (~62). La marge restante absorbe un sous-titre qui
       passerait sur deux lignes. */
    --demo-reserve: 440px;
    /* Séquence d'ouverture : nombre de plans et défilement nécessaire
       pour passer de l'un au suivant. --scene-run règle toute la
       nervosité de la séquence. */
    --scene-count: 8;
    --scene-run:   120vh;
    /* Recouvrement final : distance sur laquelle la carte glisse
       par-dessus le dernier plan, resté épinglé. Miroir exact du bas
       de page, où la carte glisse par-dessus les témoignages. */
    --hero-cover:  100vh;

    --sans: 'Sora', 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Space Mono', Menlo, monospace;
  }

  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
  }

  .shell { position: fixed; inset: 0; display: flex; flex-direction: row; overflow: hidden; }

  /* ── Barre haute : marque + navigation ──
     Fixée au viewport : elle ne disparaît jamais. Au repos elle est
     posée sur le header, sans fond ; dès qu'on scrolle elle se
     compacte et prend un fond flouté. */
  .topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 31;
    padding: 24px var(--gutter);
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: padding 0.22s ease, background 0.22s ease,
                border-color 0.22s ease, transform 0.34s ease;
  }
  /* Masquée en descendant, ramenée en remontant */
  .topbar.is-hidden { transform: translateY(-100%); }
  /* Le fond reste pleine largeur ; seuls les items sont resserrés
     (85% = 15% de moins), et centrés. */
  .topbar-inner {
    width: 85%;
    margin: 0 auto;
    display: flex; align-items: center; gap: 44px;
  }
  .topbar.is-stuck {
    padding: 12px var(--gutter);
    background: var(--ground-blur);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: var(--hairline);
  }

  .brandmark {
    display: flex; align-items: center; gap: 10px;
    height: 32px;
    flex-shrink: 0;
    text-decoration: none;
    color: #FFFFFF;
  }
  .brandmark img { width: 32px; height: 32px; border-radius: 7px; display: block; }
  .brandmark span { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
  .brandmark:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }

  .topbar-nav { display: flex; align-items: center; gap: 22px; }
  .topbar-nav a {
    font-size: 13.5px;
    color: var(--ink-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.14s ease;
  }
  .topbar-nav a:hover { color: #FFFFFF; }
  .topbar-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 3px; }

  /* Actions poussées à droite — traitement neutre, sans orange :
     le CTA se distingue par son contour, pas par la couleur. */
  .topbar-actions {
    margin-left: auto;
    display: flex; align-items: center; gap: 16px;
    flex-shrink: 0;
  }
  .topbar-login {
    font-size: 13.5px;
    color: var(--ink-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.14s ease;
  }
  .topbar-login:hover { color: #FFFFFF; }
  .topbar-cta {
    position: relative;              /* ancre du point de notification */
    height: 34px; padding: 0 16px;
    display: inline-flex; align-items: center;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.04);
    color: #FFFFFF;
    font-size: 13px; font-weight: 600;
    text-decoration: none; white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .topbar-cta:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.34);
  }
  /* Pastille de notification, angle supérieur droit */
  .topbar-cta::after {
    content: "";
    position: absolute;
    top: -3px; right: -3px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2px rgba(28, 28, 28, 0.55);
  }
  .topbar-login:focus-visible,
  .topbar-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }



  /* ── Zone principale = conteneur de scroll ── */
  .main {
    flex: 1; min-width: 0; height: 100%;
    overflow-y: auto; overflow-x: hidden;
    position: relative;
    background-color: var(--ground);
    background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px);
    background-size: var(--dot-size) var(--dot-size);
  }
  .main::-webkit-scrollbar { width: 10px; }
  .main::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08); border-radius: 99px;
    border: 3px solid transparent; background-clip: content-box;
  }

  /* ── Header : figé en haut, DERRIÈRE la carte (z-index 1) ──
     Miroir exact du footer. Il occupe 75vh ; la carte (z-index 2,
     fond opaque) démarre juste après, donc au repos on n'en voit
     que la lisière basse — puis elle remonte et le recouvre. */
  .site-header {
    position: sticky; top: 0; z-index: 2;
    height: var(--header-h);
    /* Fond OPAQUE (même teinte + mêmes points que .main) : c'est lui
       qui masque le footer tant qu'on n'est pas arrivé en bas. Sans ça
       le footer, collé au bas du viewport, dépasse au-dessus de la
       carte et se voit dès le chargement. */
    background-color: var(--ground);
    background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px);
    background-size: var(--dot-size) var(--dot-size);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Haut : dégage la barre fixe, et sert de réglage fin — l'espace
       libre restant est divisé en deux par le `margin: auto 0` du bloc
       central, donc augmenter cette valeur resserre l'écart entre
       l'accroche et la note SANS déplacer la note, dont la position
       ne dépend que de la marge basse. */
    padding: 134px var(--gutter) 94px;
  }

  /* Bloc central : brain + eyebrow + accroche */
  .header-center {
    margin: auto 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* Inversé : la marque passe en petit et transparent, la promesse
     devient le gros titre pleinement opaque. */
  /* Eyebrow — calqué sur .af-welcome-eyebrow de l'app :
     mono, 10-11px, interlettrage large, majuscules, préfixe "//". */
  .header-title {
    margin: 0 0 12px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.4;
    color: #FFFFFF;
    /* Apparaît en fondu au démarrage de la frappe */
    opacity: 0;
    transition: opacity 0.9s ease;
  }
  .header-title.is-in { opacity: 0.72; }

  @media (prefers-reduced-motion: reduce) {
    .header-title { opacity: 0.72; transition: none; }
  }

  /* ── Accroche + machine à écrire ──
     Deux couches superposées :
     · le fantôme porte le texte complet en `visibility: hidden` — il
       réserve exactement la largeur, la coupe et les deux lignes ;
     · la couche vivante est en absolu par-dessus (inset: 0), donc sa
       boîte ne change JAMAIS de taille pendant la frappe.
     Le dégradé est porté par la couche vivante et non par le parent :
     appliqué au parent, un `background-clip: text` ne traverse pas des
     enfants qui ont leur propre opacité — c'est ce qui rendait le
     titre invisible. */
  .header-sub {
    position: relative;
    display: inline-block;
    margin: 0;
    max-width: 20ch;
    font-size: clamp(30px, 3.9vw, 51px);   /* +15% */
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
  }
  .hs-ghost { visibility: hidden; }
  .hs-live {
    position: absolute;
    inset: 0;
    /* La couche vivante est en blanc : seule la partie accentuée
       porte le dégradé, via .hs-accent. */
    color: #FFFFFF;
  }

  /* Dégradé orange — le même que le 6K et le « 14 days ». Porté
     ici par la SECONDE ligne, c'est elle qui conclut la promesse. */
  .hs-accent {
    background: linear-gradient(120deg, #FFD9CB 0%, #F7A183 52%, #EC5935 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  /* Métal brossé — porté par la première ligne, en amorce */
  .hs-metal {
    background: linear-gradient(120deg, #FFFFFF 0%, #B0B0B0 50%, #FFFFFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  /* Mention en bas à droite de la zone header, calée sur le bord
     droit de la carte et posée juste au-dessus de son arête haute. */
  .header-badge {
    position: absolute;
    bottom: 14px;
    right: calc(var(--gutter) + 34px);
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--ink);
    opacity: 0.38;
    white-space: nowrap;
  }
  /* ── Note en bas de la zone header ──
     Dans le flux, en fin de colonne : c'est elle qui borne le bas,
     et le bloc central se centre dans ce qui reste. */
  .header-note {
    margin: 0 auto;
    width: min(680px, 100%);
    font-size: 14.2px;
    line-height: 1.65;
    text-align: center;
    color: #FFFFFF;
    /* Apparaît en fondu une fois la frappe terminée */
    opacity: 0;
    transition: opacity 0.9s ease;
  }
  .header-note.is-in { opacity: 0.86; }

  /* ── Les deux entrées, sous la note ──
     L'app posée sur le bureau d'abord, en plein blanc ; l'inscription
     ensuite, en gris de surface. Deux poids, deux gestes. */
  .header-cta {
    margin: 22px auto 0;
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 12px;
    /* Entre en même temps que la note */
    opacity: 0;
    transition: opacity 0.9s ease;
  }
  .header-cta.is-in { opacity: 1; }
  .hcta {
    height: 46px;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 0 22px;
    border-radius: 11px;
    font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
    text-decoration: none; white-space: nowrap;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
  }
  .hcta[hidden] { display: none; }
  .hcta:active { transform: translateY(1px); }
  .hcta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  /* La pomme n'est pas une image : elle prend l'encre du bouton. */
  .hcta svg { width: 17px; height: 17px; margin-top: -2px; }
  .hcta--mac { background: #FFFFFF; color: #101010; border: 1px solid #FFFFFF; }
  .hcta--mac:hover { background: #ECECEC; border-color: #ECECEC; }
  .hcta--start {
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid var(--hairline-2);
    color: var(--ink);
    font-weight: 500;
  }
  .hcta--start:hover { background: rgba(255, 255, 255, 0.17); border-color: rgba(255, 255, 255, 0.24); }

  @media (prefers-reduced-motion: reduce) {
    .header-note { opacity: 0.86; transition: none; }
    .header-cta { opacity: 1; transition: none; }
  }

  /* ── Layout deux colonnes du plan 1 ──
     Gauche : le bloc existant (brain + accroche + note + CTA), aligné à
     gauche plutôt que centré — layout "classique" à deux colonnes.
     Droite : réservée à la nouvelle animation (voir artefact) ; vide
     pour l'instant, branchée dans une passe séparée. */
  .header-grid {
    /* Bas fixe plutôt que "auto" des deux côtés : garantit un espace
       constant avant le pied "For those...", même sur les petites
       hauteurs de viewport où l'espace libre se resserre. */
    margin: auto 0 44px;
    width: min(var(--content-w), 100%);
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 64px;
    align-items: center;
  }
  .header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .header-left .header-center { align-items: flex-start; text-align: left; }
  /* Alignement explicite sur chaque enfant : ne dépend plus seulement
     du `align-items` du parent, au cas où l'un d'eux ait sa propre
     largeur stretchée. Le brain, notamment, doit démarrer pile au
     même bord gauche que le "// meet autofunnel" au-dessus de lui. */
  .header-left .brain-wrap,
  .header-left .header-title,
  .header-left .header-sub { align-self: flex-start; }
  .header-left .header-note { margin: 0; text-align: left; }
  .header-left .header-cta { margin: 22px 0 0; justify-content: flex-start; }
  .header-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  /* Vidéo 1:1 — bords arrondis assortis à la carte de la séquence. */
  .col2-stage {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    background: #050505;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
  }
  .col2-video { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Légende sous la vidéo — un spinner fixe en tête, le texte seul
     traverse en fondu d'une étape à l'autre. */
  .col2-caption {
    margin: 18px 0 0;
    width: 100%;
    max-width: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
  }
  .col2-caption-spinner {
    width: 12px; height: 12px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-top-color: rgba(255, 255, 255, 0.85);
    animation: col2-spin 0.8s linear infinite;
  }
  @keyframes col2-spin { to { transform: rotate(360deg); } }
  .col2-caption-text { opacity: 0; transition: opacity 0.25s ease; }

  @media (prefers-reduced-motion: reduce) {
    .col2-caption-spinner { animation: none; }
  }

  @media (max-width: 820px) {
    .header-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .header-right { display: none; }
  }

  /* Pied du header : le même widget "For those..." que celui en bas de
     la section bénéfices (voir .bene-for plus bas), plaqué en bas à
     gauche sur toute la largeur, en version réduite. */
  .bene-for--hero {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    margin: 0;
    width: auto;
    max-width: none;
    justify-content: flex-start;
  }
  .bene-for--hero .bene-for-lead { font-size: 10.5px; }
  .bene-for--hero .bene-for-slot { font-size: 14px; height: 1.3em; }
  /* Sous cette hauteur, le bloc brain + texte + CTA remplit déjà
     presque tout le header (contrainte préexistante) : le pied
     "For those..." se retire plutôt que chevaucher le CTA. */
  @media (max-height: 820px) {
    .bene-for.bene-for--hero { display: none; }
  }

  /* Conteneur header + carte : il borne la portée du sticky du header.
     Une fois la carte terminée, le header cesse d'être épinglé et
     libère le bas de l'écran pour le footer. Volontairement sans
     position ni z-index — il ne doit PAS créer de contexte
     d'empilement, sinon header/carte ne se compareraient plus au
     footer qui est son frère. */
  .stage { }

  /* ══════════════════════════════════════════════════════════════
     SÉQUENCE D'OUVERTURE — méthode Apple / Scale
     La piste est un bloc haut ; le header y est épinglé et occupe
     l'écran. Le scroll n'est JAMAIS intercepté : c'est sa position
     dans la piste qui pilote l'avancement. Le geste joue la séquence
     image par image, on peut s'arrêter au milieu ou revenir.
     ══════════════════════════════════════════════════════════════ */
  .hero-runway {
    /* 1 plan + (n-1) transitions + le recouvrement final, qui prolonge
       l'épinglage du header le temps que la carte lui passe dessus. */
    height: calc(100vh + var(--scene-run) * (var(--scene-count) - 1) + var(--hero-cover));
    position: relative;
  }

  /* Les plans sont superposés dans le header, un seul visible.
     Chacun porte sa propre transition — voir plus bas. */
  /* Le plan occupe la boîte du header, avec ses marges d'origine.
     Surtout ne rien imposer en JS ici : c'est ce qui décalait tout. */
  .scene {
    position: absolute;
    inset: 134px var(--gutter) 94px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    will-change: opacity, transform, filter, clip-path;
    pointer-events: none;
  }
  .scene.is-live { pointer-events: auto; }

  /* ══════════════════════════════════════════════════════════════
     COUCHE VIDÉO
     Le wrapper porte la perspective et ne bouge pas ; c'est la boîte
     intérieure qui est transformée. Séparer les deux évite que
     l'échelle vienne écraser l'effet de fuite.
     ══════════════════════════════════════════════════════════════ */
  .hero-video {
    position: absolute; inset: 0;
    z-index: 0;
    perspective: 1800px;
    pointer-events: none;
    overflow: hidden;
  }
  /* Le groupe porte la pose ; les deux plaques ne portent que leur
     recul. preserve-3d est indispensable : sans lui l'axe Z est écrasé
     et le décalage redeviendrait un simple déplacement à plat, faux dès
     que le cadre tourne. */
  .hero-video-stage {
    position: absolute; inset: 0;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    will-change: transform, opacity;
  }
  .hero-video-inner {
    position: absolute; inset: 0;
    overflow: hidden;
    backface-visibility: hidden;
    /* Contre-échelle : sans elle le rayon rétrécirait avec la boîte et
       l'encart redeviendrait carré sur les derniers plans. */
    border-radius: calc(26px * var(--hv-inv, 1));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55);
  }
  /* Même boîte que la vidéo. Le décalage est posé par le JS : il suit le
     signe de la rotation, sinon l'éventail partirait du mauvais côté dès
     que le cadre se retourne. */
  .hero-layer {
    position: absolute; inset: 0;
    overflow: hidden;
    border-radius: calc(26px * var(--hv-inv, 1));
    border: 1px solid rgba(255, 255, 255, 0.11);
    /* À peine teintées : le motif doit sembler traverser des vitres,
       pas s'afficher sur des panneaux. */
    background: rgba(255, 255, 255, 0.018);
  }
  /* Plus la couche est loin, plus elle s'efface. */
  .hero-layer[data-depth="1"] { opacity: 1; }
  .hero-layer[data-depth="2"] { opacity: 0.72; }
  /* Devant la vidéo : elle ne doit rien masquer. Fond quasi nul,
     liseré aussi net que celui des plaques du fond. */
  .hero-layer--front {
    background: rgba(255, 255, 255, 0.006);
    border-color: rgba(255, 255, 255, 0.13);
  }
  .hero-layer canvas { width: 100%; height: 100%; display: block; }
  /* Voile de lisibilité : il ne sert qu'au plan 1, quand le texte
     flotte sur l'image en pied de cadre à gauche. Son opacité est
     pilotée par le JS et retombe dès que la vidéo rétrécit. */
  .hero-video-inner::after {
    content: '';
    position: absolute; inset: 0;
    background:
      linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.25) 38%, transparent 62%),
      linear-gradient(to right, rgba(0, 0, 0, 0.55) 0%, transparent 46%);
    opacity: var(--hv-scrim, 0);
  }
  .scene { z-index: 1; }

  /* Bouchon : la place et le format du futur film. Le dégradé dérive
     lentement pour qu'on voie que la couche est vivante. */
  .hero-shots { position: absolute; inset: 0; }
  /* Les cinq plans se superposent dans le cadre ; le JS ne fait varier
     que leur opacité. Aucune ne déplace ni ne redimensionne quoi que ce
     soit — la géométrie du cadre est intacte. */
  .hero-shot {
    position: absolute; inset: 0;
    opacity: 0;
    background-size: 260% 260%;
    animation: hv-drift 24s ease-in-out infinite;
  }
  /* Un plan qui porte sa vraie vidéo n'a plus besoin du dégradé animé
     dessous : il resterait invisible et coûterait une animation. */
  .hero-shot.has-video { animation: none; }
  .hero-shot video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hero-shot[data-plan="1"] { background-image: linear-gradient(118deg, #4A403A 0%, #26303A 26%, #4C3A44 52%, #27362E 78%, #443A30 100%); }
  .hero-shot[data-plan="2"] { background-image: linear-gradient(118deg, #2C3A48 0%, #3E4A3A 30%, #26323E 58%, #45403A 100%); }
  .hero-shot[data-plan="3"] { background-image: linear-gradient(118deg, #453040 0%, #2A3742 34%, #4A3A32 66%, #2E3A34 100%); }
  .hero-shot[data-plan="4"] { background-image: linear-gradient(118deg, #3A4636 0%, #46353E 32%, #29343F 64%, #47412F 100%); }
  .hero-shot[data-plan="5"] { background-image: linear-gradient(118deg, #2F3541 0%, #4A3B35 30%, #33453C 62%, #3F3044 100%); }
  .hero-shot[data-plan="6"] { background-image: linear-gradient(118deg, #38424A 0%, #4A3E36 30%, #2D3C36 60%, #443646 100%); }
  .hero-shot[data-plan="7"] { background-image: linear-gradient(118deg, #463B32 0%, #2E3945 34%, #40463A 66%, #34303F 100%); }
  .hero-shot[data-plan="8"] { background-image: linear-gradient(118deg, #2A3B3E 0%, #453343 30%, #3E4738 62%, #2F3640 100%); }
  @keyframes hv-drift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }
  .hero-video-tag {
    position: absolute;
    left: 50%; top: 50%;
    /* Contre-échelle posée par le JS : l'étiquette garde sa taille
       quand la boîte rétrécit. */
    transform: translate(-50%, -50%) scale(var(--hv-inv, 1));
    font-family: var(--mono);
    font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
    color: #FFFFFF; opacity: 0.5;
    white-space: nowrap;
  }
  .hero-video-tag b { font-weight: 400; opacity: 0.8; }

  /* Variante resserrée : les trois plans qui doivent laisser la place
     à la vidéo. */
  .scene--tight .scene-title { font-size: clamp(19px, 1.9vw, 26px); max-width: 20ch; }
  .scene--tight .scene-note  { font-size: 12.8px; max-width: 42ch; }
  .scene--tight .scene-body  { width: min(42ch, 100%); gap: 10px; }
  .scene--right.scene--tight .scene-body { margin-left: auto; margin-right: 0; }
  .scene--frame.scene--right .scene-body { width: min(44ch, 100%); }

  /* Bloc de contenu — `margin: auto 0` le centre dans l'espace libre,
     exactement comme le faisait .header-center à l'origine. */
  .scene-body {
    margin: auto 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
    width: min(52ch, 100%);
  }

  /* ── Variantes de composition ──
     C'est ce qui fait que chaque plan a sa propre géométrie plutôt
     que d'être un texte de plus au même endroit. */
  /* Les deux mentions du dernier plan : le fractionnement et la
     rétractation. Un cran sous la note — ce sont des conditions, pas
     l'argument. */
  /* Invite de lecture, posée tout en bas du plan : c'est le moment où
     le récit passe la main au visiteur. Traitement de l'accroche, pour
     qu'elle se lise comme une indication et non comme du texte de plan. */
  .scene-cue {
    margin: auto 0;
    font-family: var(--mono);
    font-size: 11px; font-weight: 400;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: #FFFFFF; opacity: 0.42;
  }

  .scene-meta {
    margin: 12px 0 0; padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: 6px;
    font-size: 12.4px; line-height: 1.5;
    color: #FFFFFF; opacity: 0.66;
  }
  .scene-meta b {
    margin-right: 9px;
    font-family: var(--mono); font-size: 10px; font-weight: 400;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--accent); opacity: 0.95;
  }

  .scene--left  { align-items: flex-start; }
  .scene--right { align-items: flex-end; }

  /* Contenu poussé vers le bas plutôt que centré */
  .scene--low .scene-body { margin: auto 0 0; padding-bottom: 6vh; }
  /* Plan 3 : le texte partage l'écran avec la vidéo, il va au ras. */
  .scene--low.scene--tight .scene-body { padding-bottom: 0; }
  /* Contenu poussé vers le haut */
  .scene--high .scene-body { margin: 0 0 auto; padding-top: 4vh; }

  /* Deux colonnes : libellé d'un côté, énoncé de l'autre */
  .scene--split .scene-body {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 40px;
    align-items: center;
    max-width: var(--content-w);
    width: 100%;
    text-align: left;
  }

  /* Plan encadré : les autres déplacent le texte, celui-ci le contient */
  /* Plus de cadre sur le dernier plan : le texte se tient seul, face à
     la vidéo. Les équerres partent avec, elles n'ancraient qu'un cadre. */
  /* Le texte se rapproche du cadre quand la vidéo s'écarte franchement :
     un bloc étroit collé à la gouttière laisserait près de 300px de vide
     entre les deux, et les deux objets cesseraient de se parler. */
  .scene--right.scene--tight .scene-body { margin-right: 11vw; }
  .scene--left.scene--high .scene-body   { margin-left: 4vw; }

  .scene--frame .scene-body {
    position: relative;
    width: 100%;
    max-width: 760px;
  }
  .scene--frame .scene-body::before,
  .scene--frame .scene-body::after { display: none; }
  .scene--frame .scene-title { max-width: 22ch; }
  .scene--frame .scene-note  { max-width: 54ch; }
  /* équerres d'angle */
  .scene--frame .scene-body::before,
  .scene--frame .scene-body::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border: 1px solid var(--accent);
    opacity: 0.55;
  }
  .scene--frame .scene-body::before {
    top: -1px; left: -1px;
    border-right: 0; border-bottom: 0;
    border-top-left-radius: var(--radius);
  }
  .scene--frame .scene-body::after {
    bottom: -1px; right: -1px;
    border-left: 0; border-top: 0;
    border-bottom-right-radius: var(--radius);
  }

  /* Grand format, pour un plan qui doit peser plus que les autres */
  .scene--big .scene-title { font-size: clamp(38px, 5.6vw, 76px); max-width: 16ch; }

  /* Le marqueur est dans le CSS, pas dans le texte : une seule place,
     au début de l'accroche, comme partout ailleurs. */
  .scene-eyebrow::before { content: '// '; }
  .scene-eyebrow {
    margin: 0;
    font-family: var(--mono);
    font-size: 11px; font-weight: 400;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: #FFFFFF; opacity: 0.72;
  }
  .scene-title {
    margin: 0;
    max-width: 20ch;
    font-size: clamp(23px, 2.7vw, 35px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.12;
    background: linear-gradient(120deg, #FFFFFF 0%, #B0B0B0 50%, #FFFFFF 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
  /* Plans 01 et 02 — seuls à poser leur texte sur la vidéo. Le blanc s'y
     dissout dès que l'image passe au clair : un voile sombre et flou vient
     donc se glisser derrière le bloc, et lui seul. En pseudo-élément à
     z-index négatif, il reste sous le texte et au-dessus de la vidéo. */
  [data-scene="1"] .scene-body,
  [data-scene="2"] .scene-body { position: relative; }
  [data-scene="1"] .scene-body::before,
  [data-scene="2"] .scene-body::before {
    content: '';
    position: absolute;
    inset: -24px -30px;
    z-index: -1;
    border-radius: 20px;
    background: rgba(4, 4, 4, 0.68);
    backdrop-filter: blur(22px) saturate(0.85);
    -webkit-backdrop-filter: blur(22px) saturate(0.85);
  }

  .scene-note {
    margin: 6px 0 0;
    max-width: 62ch;
    font-size: 13.6px; line-height: 1.6;
    color: #FFFFFF; opacity: 0.84;
  }

  /* Le brain traverse toute la séquence : il vit hors des plans et
     n'est jamais démonté. Sa position et son échelle sont pilotées
     par le JS au fil de la progression. */

  /* Repli : sans animation, les plans s'empilent et se lisent en
     défilant normalement — sinon on resterait bloqué sur le plan 1. */
  @media (prefers-reduced-motion: reduce) {
    .hero-runway { height: auto; }
    .site-header { position: static; height: auto; }
    /* Sans piste, plus de recouvrement à compenser : la carte
       remonterait par-dessus le dernier plan resté en flux. */
    .page-card { margin-top: 0; }
    /* Idem pour le recouvrement de l'écran 2 par l'écran 3. */
    #stats-panel { position: relative; }
    .scene {
      position: static;
      inset: auto;
      opacity: 1 !important;
      transform: none !important;
      filter: none !important;
      clip-path: none !important;
      min-height: 100vh;
      pointer-events: auto;
    }
  }

  /* La carte n'est plus qu'un conteneur : ce sont les panneaux qui
     portent le fond et les rayons. C'est ce qui permet à un écran de
     rompre la continuité — fond différent, débordement latéral — et
     aux écrans voisins de se refermer par un rayon.
     Pas d'overflow: hidden, sinon le débordement serait rogné. */
  .page-card {
    position: relative; z-index: 3;
    background: transparent;
    margin: 0 var(--gutter);
    /* Compense --hero-cover : la carte entre pendant que le header est
       encore épinglé. Hauteur totale de la page inchangée. */
    margin-top: calc(var(--hero-cover) * -1);
  }

  /* Rayons de la carte, reportés sur le premier et le dernier écran :
     le haut sert à la lisière sous le header, le bas au dévoilement
     du footer. */
  /* Propriétés longues et non le raccourci : un même écran peut être
     à la fois premier (rayon haut) ET voisin de l'écran hors carte
     (rayon bas). Le raccourci ferait s'annuler les deux règles. */
  .panel:first-child {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
  }
  .panel:last-child {
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
  }

  /* ══════════════════════════════════════════════════════════════
     TÉMOIGNAGES — prennent la place et le comportement de l'ancien
     footer : sticky bottom, découverts par la carte qui remonte.
     Comme du contenu les suit (le footer), le sticky se libère de
     lui-même et la zone défile ensuite normalement.
     Aucun fond : les cards flottent sur la trame de points.
     ══════════════════════════════════════════════════════════════ */
  /* Caché : rendu sous le fond (bug de stacking jamais corrigé), le
     scroll va donc direct du stage au footer. Meme mecanique que
     .hcta[hidden] / .footer-drop[hidden] plus haut. */
  .testimonials[hidden] { display: none; }
  .testimonials {
    position: sticky; bottom: 0; z-index: 1;
    height: var(--testi-h);
    width: var(--footer-w);
    margin: 0 auto;
    overflow: hidden;                 /* borne le défilement du ruban */
    /* dégradé de fondu en haut et en bas : les cards entrent et
       sortent sans couper net */
    /* fondus en px : proportionnels, ils grandiraient avec la bande */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 58px, #000 calc(100% - 58px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 58px, #000 calc(100% - 58px), transparent 100%);
  }

  /* Le ruban qui défile — il contient les rangées en double pour
     que la boucle soit invisible */
  /* Translation posée par le JS : la même valeur sert le défilement
     automatique et la molette. */
  .testi-track {
    display: flex;
    flex-direction: column;
    gap: var(--testi-gap);
    will-change: transform;
  }

  .testi-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--testi-gap);
    align-items: start;
  }
  /* Quinconce : une card sur deux est décalée vers le bas */
  .testi-row .testi-card:nth-child(even) { margin-top: 26px; }
  /* La seconde rangée décale en sens inverse, pour casser l'alignement */
  .testi-row--alt .testi-card:nth-child(odd) { margin-top: 26px; }
  .testi-row--alt .testi-card:nth-child(even) { margin-top: 0; }

  .testi-card {
    background: var(--card);
    border: 1px solid var(--hairline-2);
    border-radius: 14px;
    padding: 14px 14px 16px;
    display: flex; flex-direction: column; gap: 13px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    /* Chaque avis est une vidéo : la card entière est le lien. */
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease,
                box-shadow 0.18s ease;
  }
  .testi-card:hover,
  .testi-card:focus-visible {
    border-color: rgba(255, 255, 255, 0.24);
    transform: translateY(-3px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48);
  }
  .testi-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  /* ── L'image de la vidéo ─────────────────────────────────────────
     4:5, le format de tournage UGC. Fond en dégradé et non en image :
     le mockup reste autonome. */
  .testi-shot {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(165deg, #2A2A2A 0%, #0D0D0D 100%);
  }
  /* assombrit le bas pour la durée */
  .testi-shot::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 42%);
  }
  /* Durée, lue sur l'attribut : pas de balise en plus par card. */
  .testi-shot::after {
    content: attr(data-dur);
    position: absolute;
    right: 8px; bottom: 7px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: #FFFFFF;
    opacity: 0.85;
  }
  .testi-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;

    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    transition: background 0.18s ease, transform 0.18s ease;
  }
  .testi-play svg { width: 20px; height: 20px; margin-left: 2px; }
  .testi-card:hover .testi-play,
  .testi-card:focus-visible .testi-play {
    background: rgba(255, 255, 255, 0.92);
    color: #141414;
    transform: translate(-50%, -50%) scale(1.08);
  }

  /* Huit ambiances, quatre par rangée */
  .testi-row .testi-card:nth-child(1) .testi-shot { background-image: radial-gradient(ellipse 72% 54% at 50% 33%, #4A3A34, transparent 62%), linear-gradient(165deg, #1A1512, #0D0D0D); }
  .testi-row .testi-card:nth-child(2) .testi-shot { background-image: radial-gradient(ellipse 72% 54% at 50% 33%, #33403F, transparent 62%), linear-gradient(165deg, #131917, #0D0D0D); }
  .testi-row .testi-card:nth-child(3) .testi-shot { background-image: radial-gradient(ellipse 72% 54% at 50% 33%, #453A46, transparent 62%), linear-gradient(165deg, #17131A, #0D0D0D); }
  .testi-row .testi-card:nth-child(4) .testi-shot { background-image: radial-gradient(ellipse 72% 54% at 50% 33%, #3E4433, transparent 62%), linear-gradient(165deg, #161911, #0D0D0D); }
  .testi-row--alt .testi-card:nth-child(1) .testi-shot { background-image: radial-gradient(ellipse 72% 54% at 50% 33%, #4A3B2E, transparent 62%), linear-gradient(165deg, #1A140F, #0D0D0D); }
  .testi-row--alt .testi-card:nth-child(2) .testi-shot { background-image: radial-gradient(ellipse 72% 54% at 50% 33%, #2F3A47, transparent 62%), linear-gradient(165deg, #121619, #0D0D0D); }
  .testi-row--alt .testi-card:nth-child(3) .testi-shot { background-image: radial-gradient(ellipse 72% 54% at 50% 33%, #46353A, transparent 62%), linear-gradient(165deg, #191214, #0D0D0D); }
  .testi-row--alt .testi-card:nth-child(4) .testi-shot { background-image: radial-gradient(ellipse 72% 54% at 50% 33%, #37423A, transparent 62%), linear-gradient(165deg, #141814, #0D0D0D); }

  .testi-quote {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.62;
    color: var(--ink);
    opacity: 0.82;
    /* 3 lignes max : hauteur de card constante */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .testi-who { display: flex; align-items: center; gap: 10px; }
  .testi-avatar {
    width: 30px; height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid var(--hairline-2);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink);
    opacity: 0.75;
  }
  .testi-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
  .testi-role {
    font-size: 11.5px; line-height: 1.3;
    color: var(--ink); opacity: 0.45;
  }

  @media (prefers-reduced-motion: reduce) {
  }

  /* ── Footer : pleine largeur, sous les témoignages ── */
  .site-footer {
    position: relative;              /* repère du volet des features */
    width: 100%;
    min-height: var(--footer-h);
    background: var(--rail);
    border-top: 1px solid var(--hairline);
    padding: 46px var(--gutter) 28px;
    display: flex; flex-direction: column; gap: 34px;
  }

  /* ══════════════════════════════════════════════════════════════
     FOOTER — trois bandes empilées
     bandeau newsletter | marque + colonnes | mentions
     ══════════════════════════════════════════════════════════════ */

  /* ── Bande 1 : le bandeau ─────────────────────────────────────── */
  .footer-promo {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.9fr);
    gap: 24px 52px;
    align-items: center;
    padding: 30px 34px;
    border: 1px solid var(--hairline-2);
    border-radius: 18px;
    overflow: hidden;
    background-color: rgba(30, 30, 30, 0.7);
    background-image:
      linear-gradient(120deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 58%),
      radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: auto, var(--dot-size) var(--dot-size);
  }
  .promo-text, .promo-form { position: relative; z-index: 1; }
  .promo-text { display: flex; flex-direction: column; gap: 11px; }
  .promo-form { display: flex; flex-direction: column; gap: 9px; }

  .news-kicker {
    font-family: var(--mono);
    font-size: 10px; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent); opacity: 0.85;
  }
  .news-title {
    margin: 0;
    font-size: 19px; font-weight: 600;
    letter-spacing: -0.02em; line-height: 1.3;
    color: var(--ink);
  }
  .news-list {
    margin: 0; padding: 0;
    list-style: none;
    display: flex; flex-direction: column; gap: 7px;
  }
  .news-list li {
    display: flex; align-items: baseline; gap: 10px;
    font-size: 13px; line-height: 1.5;
    color: var(--ink); opacity: 0.72;
  }
  .news-list svg {
    width: 13px; height: 13px; flex-shrink: 0;
    color: var(--accent); opacity: 0.6;
    transform: translateY(2px);
  }
  .news-foot { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); }
  .news-form { display: flex; gap: 9px; }
  .news-input {
    flex: 1; min-width: 0; height: 44px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--hairline-2);
    background: rgba(0, 0, 0, 0.3);
    color: var(--ink);
    font-family: inherit; font-size: 13px;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .news-input::placeholder { color: var(--ink-faint); }
  .news-input:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(0, 0, 0, 0.42);
  }
  .news-btn {
    flex-shrink: 0; height: 44px; padding: 0 20px;
    border-radius: 8px; border: 1px solid transparent;
    background: var(--accent); color: #fff;
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease;
  }
  .news-btn:hover { filter: brightness(1.1); }
  .news-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .news-msg { margin: 0; font-size: 12px; color: var(--ink-faint); }
  .news-msg.is-ok { color: #4ade80; }
  .news-msg.is-err { color: #f87171; }

  /* ── Bande 2 : la marque, puis les cinq colonnes ──────────────── */
  .footer-body {
    display: grid;
    grid-template-columns: minmax(200px, 0.9fr) minmax(0, 3.1fr);
    gap: 34px 60px;
    align-items: start;
    padding-top: 34px;
    border-top: 1px solid var(--hairline);
  }
  .footer-brand { display: flex; flex-direction: column; gap: 12px; }
  .fb-lockup { display: flex; align-items: center; gap: 10px; }
  .fb-lockup img { width: 24px; height: 24px; border-radius: 6px; display: block; }
  .fb-name {
    font-size: 16px; font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .fb-slogan {
    margin: 0; max-width: 26ch;
    font-size: 13.5px; line-height: 1.6;
    color: var(--ink-muted);
  }

  .footer-cols {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-content: start;
    gap: 28px 24px;
  }
  .footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
  .footer-col h4 {
    margin: 0 0 3px; font-family: var(--mono);
    font-size: 10px; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-faint);
  }
  .footer-col a { font-size: 13.5px; color: var(--ink-muted); text-decoration: none; transition: color 0.14s ease; }
  .footer-col a:hover { color: var(--ink); }
  .footer-col a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

  /* Bouton remis à plat pour se lire comme le <a> voisin ; seul le
     chevron le distingue. */
  .footer-drop-btn {
    display: inline-flex; align-items: center; gap: 5px;
    margin: 0; padding: 0;
    border: 0; background: none;
    font-family: inherit; font-size: 13.5px; line-height: inherit;
    color: var(--ink-muted);
    text-align: left; cursor: pointer;
    transition: color 0.14s ease;
  }
  .footer-drop-btn:hover,
  .footer-drop-btn[aria-expanded="true"] { color: var(--ink); }
  .footer-drop-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
  .drop-chevron { width: 12px; height: 12px; opacity: 0.55; transition: transform 0.2s ease; }
  .footer-drop-btn[aria-expanded="true"] .drop-chevron { transform: rotate(90deg); }

  /* Volet ancré à son bouton, ouvert vers le bas */
  .footer-drop-wrap { position: relative; }
  .footer-drop {
    position: absolute;
    bottom: calc(100% + 10px); left: 0;
    z-index: 6;
    width: 620px; max-width: calc(100vw - var(--gutter) * 2);
    padding: 16px 18px 18px;
    border: 1px solid var(--hairline-2);
    border-radius: 14px;
    background: rgba(20, 20, 20, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    display: flex; flex-direction: column; gap: 12px;
    transform-origin: bottom left;
    animation: drop-in 0.16s ease-out;
  }
  .footer-drop[hidden] { display: none; }
  @keyframes drop-in {
    from { opacity: 0; transform: translateY(6px) scale(0.985); }
    to   { opacity: 1; transform: none; }
  }
  .drop-head {
    font-family: var(--mono);
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-faint);
  }
  .drop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 2px 10px;
  }
  .drop-item {
    display: flex; flex-direction: column; gap: 1px;
    padding: 7px 9px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.13s ease;
  }
  .drop-item:hover { background: rgba(255, 255, 255, 0.06); }
  .drop-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .drop-item-name { font-size: 13px; color: var(--ink); }
  .drop-item-note { font-size: 11.5px; color: var(--ink-faint); }

  /* ── Ligne 3 ─ 1fr auto 1fr : les réseaux tombent au centre exact ── */
  .footer-base {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    margin-top: auto;                /* toujours collée en bas */
    padding-top: 20px;
    border-top: 1px solid var(--hairline);
    font-size: 12px; color: var(--ink-faint);
  }
  .footer-base-end { text-align: right; }
  .footer-social { display: flex; align-items: center; gap: 6px; }
  .footer-social a {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    color: var(--ink-faint);
    transition: color 0.14s ease, background 0.14s ease;
  }
  .footer-social a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
  .footer-social a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .footer-social svg { width: 17px; height: 17px; }

  .sr-only {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }

  /* ── Tableaux : un écran = un panneau ── */
  .panel {
    /* un écran = le viewport plein, la carte le recouvrant entièrement */
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 16px; text-align: center; padding: 40px;
    position: relative;
    background: var(--card);
  }
  /* Séparateur entre écrans — sauf autour de l'écran hors carte, où
     c'est le changement de fond qui fait la rupture. L'exclusion est
     portée par le sélecteur lui-même : un `border-top: none` posé
     ailleurs serait écrasé, `.panel + .panel` étant plus spécifique. */
  .panel + .panel:not(.panel--out):not(.panel--round-t) {
    border-top: 1px solid var(--hairline);
  }

  /* ── Écran des bénéfices ──────────────────────────────────────
     Le panneau prend le sol de la page, trame comprise, au lieu du gris
     de la carte : les cards semblent posées sur les points, sans qu'un
     aplat les réunisse. Il reste opaque, et c'est ce qui compte — c'est
     lui qui masque le header pendant que la carte le recouvre. */
  .panel--ground {
    background-color: var(--ground);
    background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px);
    background-size: var(--dot-size) var(--dot-size);
  }
  /* La grille prend toute la place que le panneau lui laisse : deux
     rangées à part égale, et une largeur plafonnée seulement pour ne
     pas devenir absurde sur un très grand écran. Les quatre cards
     tiennent donc dans un écran sans jamais le dépasser. */
  .bene-grid {
    width: 100%;
    max-width: 1400px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Hauteur de rangée FIGÉE sur ce qu'une demi-fenêtre laisse : les deux
       premières rangées remplissent l'écran exactement comme avant, et la
       troisième se découvre au scroll au lieu d'écraser les autres. */
    grid-auto-rows: calc((100vh - 58px - 42px - 24px) / 2);
    gap: 24px;
  }
  /* Un peu d'air en haut : c'est l'écran sur lequel on atterrit, et la
     barre haute peut y être visible. */
  .panel--ground { padding: 58px var(--gutter) 42px; }
  .bene-card {
    display: flex; flex-direction: column; gap: 9px;
    padding: 26px 26px 24px;
    border: 1px solid var(--hairline-2);
    border-radius: 18px;
    background: var(--card);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
    text-align: left;
  }
  /* Verre translucide — même vocabulaire que la plaque posée devant la
     vidéo : on doit voir la trame au travers. */
  .bene-card--glass {
    background: rgba(255, 255, 255, 0.012);
    border-color: rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(10px) saturate(1.05);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    box-shadow: none;
  }
  /* Ni fond ni contour : posée à même la trame, et centrée en plein cœur
     de sa case — elle ne se lit pas comme une card de plus, elle conclut. */
  .bene-card--bare {
    background: none;
    border-color: transparent;
    box-shadow: none;
    align-items: center; justify-content: center;
    text-align: center;
    padding: 26px 6%;
  }
  /* Trois garanties, une par ligne, l'intitulé en mono orange — même
     traitement que les mentions du dernier plan de la séquence. */
  .bene-proof {
    margin: 14px 0 0; padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: 9px;
    font-size: 13.8px; line-height: 1.5;
    color: var(--ink); opacity: 0.78;
  }
  .bene-proof b {
    margin-right: 9px;
    font-family: var(--mono); font-size: 10.5px; font-weight: 400;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--accent);
  }
  /* Seul titre en dégradé chaud de l'écran : c'est lui qui doit sortir. */
  .bene-card--bare .bene-title {
    font-size: clamp(19px, 1.9vw, 24px);
    background-image: linear-gradient(120deg, #FFD9CB 0%, #F7A183 52%, #EC5935 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }

  .bene-title {
    margin: 0;
    font-size: clamp(15px, 1.3vw, 17px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #FFFFFF;
  }
  .bene-text {
    margin: 0; max-width: 46ch;
    font-size: 13.8px; line-height: 1.6;
    color: var(--ink); opacity: 0.66;
  }
  /* L'encart prend la hauteur qui reste : pas de rapport fixe, sinon la
     card déborde ou laisse un trou selon la longueur du texte. */
  .bene-media {
    position: relative;
    flex: 1; min-height: 150px;
    /* Elle garde la gouttière de la card sur les côtés et ne déborde
       que par le bas, jusqu'à son arête : l'encart passe par-dessus son
       cadre au lieu de s'y ranger. Pas de filet en bas — c'est celui de
       la card qui le referme. */
    margin: 12px 0 -24px;
    border: 1px solid var(--hairline-2); border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: rgba(255, 255, 255, 0.022);
    overflow: hidden;
  }
  .bene-media video,
  .bene-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .bene-ph {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono);
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-faint);
  }

  /* Ligne de pied de l'écran des bénéfices — l'amorce reste, la situation
     défile. Hauteur figée sur une ligne pour que rien ne bouge autour. */
  .bene-for {
    width: 100%; max-width: 1400px;
    margin: 38px auto 0;
    /* Centrage sur la hauteur, pas sur la ligne de base : le créneau de
       droite n'a aucune ligne dans son flux (son contenu est en absolu),
       sa base tombe donc sur son bord bas et les deux textes se
       décalaient. */
    display: flex; align-items: center;
    gap: 16px;
    white-space: nowrap;
  }
  .bene-for-lead {
    font-family: var(--mono);
    font-size: clamp(13px, 1.1vw, 15px); letter-spacing: 0.16em; text-transform: uppercase;
    flex-shrink: 0;
    background-image: linear-gradient(120deg, #FFD9CB 0%, #F7A183 52%, #EC5935 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
  .bene-for-slot {
    position: relative;
    display: block; flex: 1; min-width: 0;
    font-size: clamp(19px, 2.1vw, 28px);
    height: 1.4em;
  }
  .bene-for-line {
    position: absolute; inset: 0;
    display: flex; align-items: center;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    font-weight: 500; letter-spacing: -0.015em;
    color: #FFFFFF; opacity: 0;
    transform: translateY(-11px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  /* Entre par le haut, sort par le bas : la ligne se remplace, elle ne
     clignote pas. */
  .bene-for-line.is-in { opacity: 1; transform: translateY(0); }
  .bene-for-line.is-out { opacity: 0; transform: translateY(11px); }

  @media (prefers-reduced-motion: reduce) {
    .bene-for-line { transition: none; }
  }

  /* ── Mini demos des 4 premières cards de bénéfices ──
     Chaque .bene-media héberge une boucle animée qui rejoue en continu
     tant que la card est visible à l'écran (IntersectionObserver dans
     af_home_bene_controller.js) — pas besoin de survoler. Repris à
     l'identique du prototype : un fond (.wp, même vocabulaire dégradé que
     .hero-shot/.testi-shot ailleurs sur cette page — pas de photo, une
     lueur chaude) et une fenêtre navigateur (.win) posée dessus, coupée à
     l'arête basse de la card. */
  .wp { position: absolute; inset: 0; background: linear-gradient(165deg, #2A2A2A 0%, #0D0D0D 100%); }
  .bene-media[data-demo="1"] .wp { background-image: radial-gradient(ellipse 70% 55% at 28% 22%, #4A3A2E, transparent 60%), linear-gradient(165deg, #241C16, #0D0D0D); }
  .bene-media[data-demo="2"] .wp { background-image: radial-gradient(ellipse 70% 55% at 72% 22%, #33403F, transparent 60%), linear-gradient(165deg, #131917, #0D0D0D); }
  .bene-media[data-demo="3"] .wp { background-image: radial-gradient(ellipse 70% 55% at 28% 78%, #453A46, transparent 60%), linear-gradient(165deg, #17131A, #0D0D0D); }
  .bene-media[data-demo="4"] .wp { background-image: radial-gradient(ellipse 70% 55% at 72% 78%, #3E4738, transparent 60%), linear-gradient(165deg, #16190F, #0D0D0D); }
  .bene-media[data-demo="5"] .wp { background-image: radial-gradient(ellipse 70% 55% at 50% 30%, #2F3A47, transparent 60%), linear-gradient(165deg, #121619, #0D0D0D); }
  .win {
    position: absolute; left: 50%; transform: translateX(-50%);
    top: 11%; bottom: -1px; width: 64%; min-width: 262px;
    background: #1b1b1e; border: 1px solid rgba(255,255,255,.14); border-bottom: 0;
    border-radius: 9px 9px 0 0; overflow: hidden;
    box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
    display: flex; flex-direction: column;
  }
  .win-bar {
    height: 19px; flex-shrink: 0; display: flex; align-items: center; gap: 5px; padding: 0 8px;
    background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .win-bar i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.22); flex-shrink: 0; }
  .win-url { margin-left: 6px; height: 8px; flex: 1; max-width: 96px; border-radius: 99px; background: rgba(255,255,255,.07); }
  .bene-demo { flex: 1; padding: 12px 12px 14px; overflow: hidden; position: relative; }
  .sk {
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(255,255,255,.075) 25%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.075) 75%);
    background-size: 420px 100%; animation: bene-shim 1.5s linear infinite;
  }
  @keyframes bene-shim { 0% { background-position: -210px 0; } 100% { background-position: 210px 0; } }
  @media (prefers-reduced-motion: reduce) {
    .bene-media * { animation: none !important; transition: none !important; }
  }

  /* ═══ 01 — It learns you : une source balayée à gauche → une couche qui
     rejoint la pile à droite. Quatre motifs de lecture (lignes, cards,
     radar, tags) qui tournent au fil des passages — la variété dit "il
     étudie plein de choses", pas un unique squelette répété. ═══ */
  .d1 { position: relative; display: flex; gap: 0; height: 100%; align-items: center; }
  .d1-col { flex: 1; min-width: 0; position: relative; height: 100%; display: flex; align-items: center; }
  .d1-src { width: 100%; position: relative; transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .35s ease; }
  .d1-src.gone { transform: scale(.55); opacity: 0; }

  .d1-src.d1-lines { display: flex; flex-direction: column; gap: 7px; }
  .d1-line { height: 6px; border-radius: 3px; background: rgba(255,255,255,.11); transition: background .32s ease, box-shadow .32s ease; }
  .d1-line.seen { background: rgba(255,255,255,.4); box-shadow: 0 0 7px rgba(236,89,53,.28); }
  .d1-scan {
    position: absolute; left: -7%; right: -7%; height: 13px; border-radius: 4px;
    background: linear-gradient(90deg, transparent, rgba(236,89,53,.42), transparent);
    opacity: 0; transition: top .3s cubic-bezier(.4,0,.2,1), opacity .25s ease; pointer-events: none;
  }
  .d1-scan.on { opacity: 1; }
  .d1-scan::after {
    content: ""; position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
    width: 8px; height: 8px; border-radius: 50%;
    border: 1.3px solid rgba(236,89,53,.8); background: rgba(236,89,53,.18);
  }

  .d1-src.d1-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .d1-cardmini {
    display: flex; align-items: center; gap: 5px; padding: 6px 7px; border-radius: 6px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
    opacity: .42; transition: opacity .3s ease, border-color .3s ease, background .3s ease;
  }
  .d1-cardmini i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.16); flex-shrink: 0; }
  .d1-cardmini b { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.14); }
  .d1-cardmini.on { opacity: 1; border-color: rgba(236,89,53,.5); background: rgba(236,89,53,.07); }

  .d1-src.d1-radar { width: 74px; height: 74px; margin: 0 auto; }
  .d1-src.d1-radar .ring { position: absolute; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; }
  .d1-src.d1-radar .ring.r1 { inset: 0; }
  .d1-src.d1-radar .ring.r2 { inset: 13px; }
  .d1-src.d1-radar .ring.r3 { inset: 26px; }
  .d1-src.d1-radar .sweep {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(236,89,53,.5), transparent 32%);
    opacity: 0; transition: opacity .25s ease; animation: d1-radar-spin 1.7s linear infinite;
  }
  .d1-src.d1-radar .sweep.on { opacity: 1; }
  @keyframes d1-radar-spin { to { transform: rotate(360deg); } }
  .d1-src.d1-radar .dot {
    position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
    background: var(--accent); opacity: 0; transform: scale(.3);
    transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  .d1-src.d1-radar .dot.on { opacity: 1; transform: scale(1); }

  .d1-src.d1-tags { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
  .d1-pill {
    height: 14px; border-radius: 99px; background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12); opacity: 0; transform: scale(.6);
    transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1), border-color .3s ease, background .3s ease;
  }
  .d1-pill.on { opacity: 1; transform: scale(1); border-color: rgba(236,89,53,.55); background: rgba(236,89,53,.09); }

  .d1-flyer {
    position: absolute; left: 26%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
    border-radius: 4px; opacity: 0; transform: rotate(45deg) scale(.4); z-index: 3;
    transition: left .6s cubic-bezier(.4,0,.2,1), top .6s cubic-bezier(.4,0,.2,1),
                transform .6s cubic-bezier(.4,0,.2,1), opacity .25s ease;
  }
  .d1-flyer, .d1-tile {
    background: linear-gradient(150deg, #2b2b30, #1f1f24);
    border: 1px solid rgba(236,89,53,.8); box-shadow: 0 -2px 7px rgba(0,0,0,.45);
  }
  .d1-stack { position: absolute; left: 74%; top: 50%; transform: translate(-50%,-50%); width: 44px; height: 62px; }
  .d1-tile {
    position: absolute; left: 50%; margin-left: -11px; width: 22px; height: 22px; border-radius: 4px;
    transform: rotate(45deg) scale(.4); opacity: 0;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  }
  .d1-tile.on { opacity: 1; transform: rotate(45deg) scale(1); }

  /* ═══ 02 — It creates and publishes : des formats DIFFÉRENTS qui défilent,
     validés (voile vert) puis glissés hors champ. ═══ */
  .d2 { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
  .d2-card {
    position: absolute; width: 80%; max-width: 158px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 5px;
    transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .4s ease;
  }
  .d2-card.out { transform: translateX(165%) rotate(11deg); opacity: 0; }
  .d2-card.next { transform: translateY(10px) scale(.93); opacity: .4; }

  .d2-tag {
    font-family: var(--mono); font-size: 7px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-faint); margin-bottom: 1px;
  }
  .d2-l { height: 5px; border-radius: 3px; }
  .d2-l.s { width: 56%; }
  .d2-l.m { width: 76%; }
  .d2-meta { display: flex; gap: 5px; margin-top: 2px; }
  .d2-meta b { width: 13px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); }
  .d2-sq { aspect-ratio: 1; border-radius: 5px; }
  .d2-hero { height: 30px; border-radius: 5px; }
  .d2-cta { height: 13px; width: 46%; border-radius: 4px; }
  .d2-cols { display: flex; gap: 5px; }
  .d2-cols b { flex: 1; height: 18px; border-radius: 4px; }
  .d2-head { display: flex; gap: 6px; align-items: center; }
  .d2-av { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
  .d2-hl { flex: 1; display: flex; flex-direction: column; gap: 3px; }
  .d2-hl b { height: 4px; border-radius: 2px; }
  .d2-hl b.s { width: 48%; }
  .d2-vert {
    aspect-ratio: 9/16; max-height: 86px; margin: 0 auto; width: auto; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
  }
  .d2-vert svg { width: 15px; height: 15px; opacity: .5; fill: rgba(255,255,255,.65); }

  .d2-ok {
    position: absolute; inset: 0; border-radius: 8px;
    background: rgba(125,203,154,.2); border: 1px solid rgba(125,203,154,.55);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .16s ease; pointer-events: none;
  }
  .d2-ok.on { opacity: 1; }
  .d2-ok span {
    width: 22px; height: 22px; border-radius: 50%; background: rgba(125,203,154,.9);
    display: flex; align-items: center; justify-content: center;
  }
  .d2-ok svg { width: 12px; height: 12px; fill: none; stroke: #14301f; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

  /* ═══ 03 — It analyses and iterates : deux variantes en A/B, celle qui
     gagne prend la place. Jetons de couleur locaux (--d3-*) portés depuis
     --ink/--ok/--accent ; scène mise à l'échelle en JS (voir demo3) pour
     tenir dans la fenêtre — dimensions internes jamais raccourcies à la
     main, donc les proportions restent fidèles une fois réduites. ═══ */
  .d3 { position: relative; height: 100%; }
  .d3-scene {
    --d3-surface: rgba(255,255,255,.09);
    --d3-ink: var(--ink);
    --d3-ink-3: var(--ink-faint);
    --d3-line: rgba(255,255,255,.16);
    --d3-kpi-line: rgba(255,255,255,.14);
    --d3-kpi-sep: rgba(255,255,255,.1);
    --d3-track: rgba(255,255,255,.13);
    --d3-up: var(--ok);
    --d3-down: var(--accent);
    --d3-crit: #f87171;
    position: absolute; left: 50%; top: 50%; width: 754px; height: 560px;
    transform-origin: center center;
    /* Filet de sécurité : le JS pose translate(-50%,-50%) scale(s) au
       montage, mais tant qu'il n'a pas tourné la scène sans ce translate
       déborderait hors du cadre. Cette valeur par défaut la garde
       toujours centrée, JS ou pas. */
    transform: translate(-50%,-50%) scale(.4);
  }
  .d3-variant {
    position: absolute; left: 50%; top: 36%; transform: translate(-50%,-50%);
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    transition: transform .95s cubic-bezier(.4,0,.2,1), opacity .6s ease; will-change: transform;
  }
  .d3-variant.is-left { transform: translate(calc(-50% - 232px),-50%); }
  .d3-variant.is-right { transform: translate(calc(-50% + 232px),-50%); }
  .d3-variant.is-out { transform: translate(calc(-50% - 232px),-50%) scale(.7); opacity: 0; }
  .d3-variant.is-hidden { opacity: 0; transform: translate(calc(-50% + 232px),-50%) scale(.94); }

  /* is-win (pas "win") : la classe .win est déjà prise par la fenêtre
     navigateur du reste du site — un même nom aurait fait hériter au tag
     tout son style de fenêtre (fond quasi noir, position absolue en plein
     écran de la card). */
  .d3-tag {
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--d3-ink-3); opacity: 0; transition: opacity .5s ease, color .5s ease;
  }
  .d3-tag.on { opacity: 1; }
  .d3-tag.is-win { color: var(--d3-up); }

  .d3-tpl {
    width: 290px; height: 254px; background: var(--d3-surface);
    border: 1px solid var(--d3-line); border-radius: 14px; padding: 13px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .d3-tpl b {
    display: block; border-radius: 6px;
    background: linear-gradient(90deg, var(--d3-track) 25%, rgba(255,255,255,.26) 50%, var(--d3-track) 75%);
    background-size: 600px 100%; animation: bene-shim 1.7s linear infinite;
  }
  .d3-tpl .hero { height: 70px; }
  .d3-tpl .line { height: 10px; }
  .d3-tpl .line.short { width: 58%; }
  .d3-tpl .cta { height: 26px; width: 42%; margin-top: auto; border-radius: 8px; }
  .d3-tpl-b .hero { height: 40px; }
  .d3-tpl-b .cta { margin-top: 0; width: 56%; height: 28px; }
  .d3-tpl-b .split { display: flex; gap: 8px; }
  .d3-tpl-b .split b { flex: 1; height: 52px; border-radius: 8px; }
  .d3-tpl-b .proof { display: flex; gap: 6px; margin-top: auto; }
  .d3-tpl-b .proof b { flex: 1; height: 18px; border-radius: 5px; }

  .d3-kpi {
    width: 290px; display: flex; align-items: stretch; gap: 0; padding: 12px 14px;
    border-radius: 10px; border: 1px solid var(--d3-kpi-line); background: var(--d3-surface);
    transition: border-color .6s ease, box-shadow .6s ease;
  }
  .d3-kpi.bad { border-color: rgba(248,113,113,.5); box-shadow: 0 0 0 3px rgba(248,113,113,.1); }
  .d3-kpi.good { border-color: rgba(125,203,154,.55); box-shadow: 0 0 0 3px rgba(125,203,154,.12); }
  .d3-kpi-leads { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; padding-right: 14px; }
  .d3-kpi-num {
    font-size: 22px; font-weight: 800; font-family: var(--mono); color: var(--d3-ink); line-height: 1;
    font-variant-numeric: tabular-nums; transition: color .6s ease;
  }
  .d3-kpi.bad .d3-kpi-num { color: var(--d3-crit); }
  .d3-kpi.good .d3-kpi-num { color: var(--d3-up); }
  .d3-kpi-lbl { font-size: 10px; color: var(--d3-ink-3); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
  .d3-kpi-chart { flex: 1 1 auto; min-width: 100px; border-left: 1px solid var(--d3-kpi-sep); padding: 0 14px; display: flex; align-items: center; }
  .d3-kpi-chart svg { display: block; width: 100%; height: 46px; overflow: visible; }
  .d3-kpi-since { flex: 0 0 auto; border-left: 1px solid var(--d3-kpi-sep); padding-left: 14px; display: flex; flex-direction: column; justify-content: center; }
  .d3-kpi-since-val { font-size: 18px; font-weight: 800; font-family: var(--mono); color: var(--d3-ink); line-height: 1; white-space: nowrap; }

  .d3-stats { width: 290px; display: flex; align-items: center; justify-content: space-between; padding: 0 6px; }
  .d3-stat { display: inline-flex; align-items: center; gap: 5px; }
  .d3-stat svg { width: 13px; height: 13px; flex-shrink: 0; opacity: .55; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .d3-stat b { font-family: var(--mono); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
  .d3-stats--a { color: var(--ink-muted); }
  .d3-stats--b { color: var(--d3-up); }

  .d3-spin {
    position: absolute; left: 50%; top: 36%; transform: translate(-50%,-50%);
    display: flex; flex-direction: column; align-items: center; gap: 9px; z-index: 5;
    opacity: 0; transition: opacity .45s ease; pointer-events: none;
  }
  .d3-spin.on { opacity: 1; }
  .d3-spin span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--d3-down); }
  .d3-ring {
    width: 42px; height: 42px; border-radius: 50%;
    border: 2.5px solid rgba(236,89,53,.2); border-top-color: var(--d3-down);
    animation: d3-spin-rot .85s linear infinite;
  }
  @keyframes d3-spin-rot { to { transform: rotate(360deg); } }

  .d3-done {
    position: absolute; left: 50%; bottom: 14px; transform: translate(-50%,10px);
    display: flex; flex-direction: column; align-items: center; gap: 9px; z-index: 6;
    opacity: 0; transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
  }
  .d3-done.on { opacity: 1; transform: translate(-50%,0); }
  .d3-check {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(125,203,154,.12); border: 1.5px solid rgba(125,203,154,.45);
    display: flex; align-items: center; justify-content: center;
  }
  .d3-check svg { width: 22px; height: 22px; }
  .d3-check path { fill: none; stroke: var(--d3-up); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .d3-done-title { font-size: 13.5px; font-weight: 600; color: var(--d3-up); letter-spacing: -.01em; }
  .d3-done-sub {
    font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--d3-ink-3); opacity: 0; transition: opacity .4s ease;
  }
  .d3-done-sub.on { opacity: 1; animation: d3-breathe 1.5s ease-in-out infinite; }
  @keyframes d3-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

  /* ═══ 04 — Compounded intelligence : jauges weaken/reinforce + brain ═══ */
  .d4 { display: flex; gap: 10px; height: 100%; align-items: center; }
  .d4-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
  .d4-item { display: flex; flex-direction: column; gap: 3px; }
  .d4-cap { height: 3px; width: 26%; border-radius: 2px; background: rgba(255,255,255,.09); }
  .d4-track { height: 3px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
  /* Pas de `display` par défaut sur un <i> : sans display:block explicite,
     width/height n'ont aucun effet sur un élément inline. */
  .d4-fill { display: block; height: 100%; width: 10%; border-radius: 99px; background: var(--ink-muted); opacity: .85; }
  .d4-fill.up { background: var(--ok); opacity: .6; }
  .d4-fill.down { background: var(--accent); opacity: .55; }
  .d4-tag {
    align-self: flex-start; margin-top: 1px; font-family: var(--mono); font-size: 7px;
    letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .3s ease;
  }
  .d4-tag.on { opacity: 1; }
  .d4-tag.up { color: var(--ok); }
  .d4-tag.down { color: var(--accent); }
  /* Pas de `transition` sur .d4-fill : sa largeur est pilotée image par
     image en JS (voir demo4) — une transition CSS en plus se battrait
     avec chaque nouvelle valeur posée à chaque frame. */
  .d4-brain { width: 74px; height: 74px; flex-shrink: 0; }
  .d4-brain canvas { display: block; }

  /* ═══ 05 — BYOK : les clés se saisissent puis se valident, puis un
     configurateur de prix (curseur qui se déplace, prix qui compte en
     rythme), puis "good to go". ═══ */
  .d5 { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 7px; position: relative; }
  .d5-form { display: flex; flex-direction: column; gap: 6px; transition: opacity .55s ease, transform .55s ease; }
  .d5-form.gone { opacity: 0; transform: scale(.96); }
  .d5-field { display: flex; align-items: center; gap: 7px; }
  .d5-logo {
    width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0; overflow: hidden;
    background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center;
  }
  .d5-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .d5-field-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .d5-cap { height: 4px; width: 34%; border-radius: 2px; background: rgba(255,255,255,.14); }
  .d5-in {
    height: 15px; border-radius: 4px; background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; padding: 0 6px;
    font-family: var(--mono); font-size: 9px; letter-spacing: .16em; color: var(--ink-muted);
    overflow: hidden; white-space: nowrap; transition: border-color .4s ease;
  }
  .d5-in.ok { border-color: rgba(125,203,154,.5); }
  .d5-sim {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    opacity: 0; transform: scale(.94); transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
  }
  .d5-sim.on { opacity: 1; transform: scale(1); }
  .d5-price { font-family: var(--mono); font-size: 23px; font-weight: 800; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
  .d5-price-lbl { font-family: var(--mono); font-size: 7.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin-top: -2px; }
  .d5-slider { width: 72%; position: relative; height: 14px; margin-top: 4px; }
  .d5-strack { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
  .d5-sfill { position: absolute; left: 0; top: 0; bottom: 0; width: 18%; background: var(--accent); opacity: .75; border-radius: 99px; }
  .d5-thumb {
    position: absolute; top: 50%; left: 18%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.45), 0 0 0 3px rgba(236,89,53,.2);
  }
  .d5-done {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    opacity: 0; transform: scale(.9); transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
    pointer-events: none;
  }
  .d5-done.on { opacity: 1; transform: scale(1); }
  .d5-ring {
    width: 30px; height: 30px; border-radius: 50%; background: rgba(125,203,154,.12);
    border: 1px solid rgba(125,203,154,.45); display: flex; align-items: center; justify-content: center;
  }
  .d5-ring svg { width: 15px; height: 15px; }
  .d5-ring path { fill: none; stroke: var(--ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
  .d5-txt { font-family: var(--mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--ok); }

  /* ── Écran présenté HORS carte ──
     Reprend le fond de la page (teinte + trame de points) et déborde
     de la gouttière pour aller d'un bord à l'autre : la carte semble
     s'interrompre. Il reste opaque — indispensable, car c'est lui qui
     continue de masquer le header et le footer à cet endroit. */
  .panel--out {
    background-color: var(--ground);
    background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px);
    background-size: var(--dot-size) var(--dot-size);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: calc(var(--gutter) * 2);
  }
  /* Écran 1 : plus court que les autres */
  /* Les quatre cards doivent tenir ensemble dans le viewport ;
     95 vh leur donne le maximum sans jamais le dépasser. */
  #steps-panel { min-height: 100vh; justify-content: flex-start; }

  /* Les écrans qui l'encadrent se referment par un rayon */
  .panel--round-b {
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
  }
  .panel--round-t {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
  }

  /* Titre d'écran — en absolu pour ne pas perturber le centrage du
     contenu, mais dans un bloc de MÊME largeur que ce contenu et
     centré comme lui : son bord gauche tombe donc exactement sur
     celui des colonnes en dessous. */
  .panel-head {
    position: absolute;
    top: 58px; left: 0; right: 0;
    margin: 0 auto;
    width: min(var(--content-w), calc(100% - var(--gutter) * 2));
    font-size: clamp(34px, 3.8vw, 48px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--ink);
  }

  /* ── Écran chiffres ── */
  .stats-wrap {
    width: 100%;
    max-width: var(--content-w);
    display: flex;
    flex-direction: column;
    gap: 42px;
    text-align: left;
  }
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 44px 36px;
  }
  .stat-cell { display: flex; flex-direction: column; gap: 8px; }
  .stat-num {
    font-size: clamp(40px, 6vw, 82px);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    /* même gradient métallique que l'accroche du header */
    background: linear-gradient(120deg, #FFFFFF 0%, #8A8A8A 50%, #FFFFFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  /* Un chiffre mis en avant — dégradé chaud dérivé de l'accent
     #EC5935. Contraste conservé : 13,0:1 puis 8,4:1, et 4,9:1 sur
     la fin la plus saturée. */
  .stat-num--accent {
    background: linear-gradient(120deg, #FFD9CB 0%, #F7A183 52%, #EC5935 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }

  .stat-label {
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--ink);
    opacity: 0.55;
  }
  .stats-tail {
    margin: 0;
    padding-top: 26px;
    border-top: 1px solid var(--hairline);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--ink);
    opacity: 0.45;
  }
  .stats-tail strong { font-weight: 400; opacity: 1; color: var(--ink); }

  /* Écran 2 : tout est centré, titre compris.
     Le titre repasse DANS LE FLUX (les autres écrans le gardent en
     absolu) : sinon il ne compte pas dans la hauteur, le contenu se
     centre sans lui et le titre reste seul en haut. Ici titre et
     contenu forment un seul bloc, centré, donc autant d'espace
     au-dessus qu'en dessous. */
  /* Miroir de la tête de page : l'écran se fige et l'écran 3 lui glisse
     dessus. Les suivants sont opaques et jointifs, il reste couvert. */
  #stats-panel { position: sticky; top: 0; }

  #stats-panel .panel-head {
    position: static;
    width: 100%;
    max-width: var(--content-w);
    margin: 0 0 44px;
    text-align: center;
  }
  #stats-panel .stats-wrap { align-items: center; text-align: center; }
  #stats-panel .stats-grid { width: 100%; }
  #stats-panel .stat-cell  { align-items: center; }

  /* ── Indicateur « en direct » ──
     Flottant en bas à droite de l'écran, comme les autres boutons
     de la page. Le rouge est la convention du direct (le témoin
     d'enregistrement) — vif mais minuscule, il signale sans peser.
     Il est distinct du rouge négatif du pricing : celui-ci est plus
     saturé et plus lumineux, on ne les croise jamais sur un même
     écran. */
  .live-badge.is-watching .live-dot::after { animation-play-state: running; }
  .live-badge {
    position: absolute;
    right: calc(var(--gutter) * 2);
    bottom: var(--gutter);
    z-index: 4;
    display: inline-flex; align-items: center; gap: 9px;
    /* Ni fond ni contour : le point et la couleur du libellé
       suffisent à dire le direct. La pastille en faisait un
       composant, alors que c'est une mention. */
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.4;
    color: #FF8A8A;
  }
  .live-dot {
    position: relative;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #FF4A4A;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(255, 74, 74, 0.55);
  }
  .live-dot::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    background: #FF4A4A;
    animation: live-pulse 2.2s ease-out infinite;
    animation-play-state: paused;
  }
  @keyframes live-pulse {
    0%   { transform: scale(1);   opacity: 0.6; }
    70%  { transform: scale(3.4); opacity: 0; }
    100% { transform: scale(3.4); opacity: 0; }
  }
  /* L'horodatage reste neutre : c'est une donnée, pas un signal */
  .live-since { color: var(--ink); opacity: 0.5; letter-spacing: 0.08em; }

  /* Bref éclat quand un chiffre s'incrémente */
  .stat-cell.is-bumped .stat-num { filter: brightness(1.45); }
  .stat-num { transition: filter 0.5s ease; }

  @media (prefers-reduced-motion: reduce) {
    .live-dot::after { animation: none; }
  }

  /* ══════════════════════════════════════════════════════════════
     ÉCRAN FAQ — deux colonnes
     Gauche : icône + titre, immuable.
     Droite : les accordéons, et par-dessus une card de verre qui
     contient le chat. Les accordéons ne disparaissent jamais : ils
     restent derrière et deviennent la matière que le flou travaille.
     ══════════════════════════════════════════════════════════════ */
  .faq-panel { padding: 90px var(--gutter); }

  .faq-grid {
    width: 100%;
    max-width: var(--content-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 64px;
    align-items: center;
    text-align: left;
  }

  /* ── Colonne gauche ── */
  .faq-left { display: flex; flex-direction: column; gap: 22px; }
  .faq-bubble {
    width: 46px; height: 46px;
    border-radius: 13px;
    border: 1px solid var(--hairline-2);
    background: rgba(255, 255, 255, 0.04);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink);
  }
  .faq-bubble svg { width: 21px; height: 21px; opacity: 0.8; }
  .faq-title {
    margin: 0;
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.08;
    max-width: 11ch;
  }
  .faq-sub {
    margin: 0;
    max-width: 34ch;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
    opacity: 0.5;
  }

  /* ── Colonne droite : la pile ── */
  .faq-stack { position: relative; }

  .faq-item { border-top: 1px solid var(--hairline); }
  .faq-item:first-child { border-top: none; }

  .faq-q {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    gap: 22px;
    padding: 19px 2px;
    background: none; border: 0;
    color: var(--ink);
    font-family: inherit;
    font-size: clamp(14.5px, 1.45vw, 16.5px);
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    transition: color 0.15s ease;
  }
  .faq-q:hover { color: #FFFFFF; }
  .faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }

  /* le "+" pivote en croix à l'ouverture */
  .faq-icon {
    position: relative;
    width: 13px; height: 13px;
    flex-shrink: 0;
    opacity: 0.4;
    transition: transform 0.3s ease, opacity 0.2s ease;
  }
  .faq-icon::before,
  .faq-icon::after {
    content: "";
    position: absolute; left: 50%; top: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
  }
  .faq-icon::before { width: 13px; height: 1.5px; }
  .faq-icon::after  { width: 1.5px; height: 13px; }
  .faq-item.is-open .faq-icon { transform: rotate(45deg); opacity: 0.85; }

  .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
  .faq-item.is-open .faq-a { max-height: 260px; }
  .faq-a p {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink);
    opacity: 0.58;
  }

  /* ── Relance vers l'agent, sous les accordéons ── */
  .faq-ask { margin-top: 26px; display: flex; flex-direction: column; gap: 11px; }
  .faq-ask-label {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink);
    opacity: 0.5;
  }
  .ask-row { display: flex; gap: 8px; }
  .ask-input {
    flex: 1; min-width: 0; height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--hairline-2);
    background: rgba(255, 255, 255, 0.03);
    color: var(--ink);
    font-family: inherit; font-size: 14px;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .ask-input::placeholder { color: var(--ink-faint); }
  .ask-input:focus {
    outline: none;
    border-color: rgba(236, 89, 53, 0.55);   /* l'accent reprend la main au focus */
    background: rgba(255, 255, 255, 0.05);
  }
  /* Bouton d'envoi — seul élément coloré plein de la FAQ.
     Dégradé sur toute la diagonale, du pâle au soutenu, comme les
     textes de la page. L'icône passe en foncé (et non en blanc) :
     sur l'extrémité claire, du blanc tomberait à 1,3:1. */
  .ask-send {
    flex-shrink: 0; width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    border: 0;
    background: linear-gradient(135deg, #FFD9CB 0%, #F7A183 52%, #EC5935 100%);
    color: #3A1206;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    transition: filter 0.15s ease, transform 0.15s ease;
  }
  .ask-send:hover { filter: brightness(1.08); transform: translateY(-1px); }
  .ask-send svg { width: 16px; height: 16px; }
  .ask-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* ── La card de verre : elle se pose PAR-DESSUS les accordéons ──
     Le flou porte donc sur eux, c'est ce qui donne l'effet de verre.
     Transition sans retour : une fois ouverte, elle reste. */
  .chat-card {
    position: absolute;
    inset: -18px -18px -18px -18px;
    z-index: 2;
    display: flex; flex-direction: column;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(20px) saturate(135%);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    box-shadow:
      0 28px 70px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.11);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.985);
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
  }
  .faq-stack.is-chat .chat-card {
    opacity: 1; visibility: visible; transform: none;
  }
  /* les accordéons derrière ne sont plus manipulables */
  .faq-stack.is-chat .faq-list,
  .faq-stack.is-chat .faq-ask { pointer-events: none; }

  .chat-head {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.6;
  }
  .chat-head .live-dot { background: var(--ink); }

  .chat-log {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .chat-log::-webkit-scrollbar { width: 6px; }
  .chat-log::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 99px; }

  .msg {
    max-width: 86%;
    padding: 11px 14px;
    border-radius: 13px;
    font-size: 14px;
    line-height: 1.6;
  }
  .msg--user {
    align-self: flex-end;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
  }
  .msg--bot {
    align-self: flex-start;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--ink);
  }
  .msg--typing { display: flex; gap: 4px; align-items: center; }
  .msg--typing i {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--ink); opacity: 0.5;
    animation: chat-blink 1.2s infinite;
  }
  .msg--typing i:nth-child(2) { animation-delay: 0.18s; }
  .msg--typing i:nth-child(3) { animation-delay: 0.36s; }
  @keyframes chat-blink { 0%, 60%, 100% { opacity: 0.25 } 30% { opacity: 0.9 } }

  .chat-foot {
    padding: 14px 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
  }

  @media (prefers-reduced-motion: reduce) {
    .chat-card, .faq-a, .faq-icon { transition: none; }
    .msg--typing i { animation: none; }
  }

  /* ── Écran en deux colonnes : média à gauche, encart à droite ── */
  .panel--split {
    justify-content: center;
    padding: 90px var(--gutter);
    text-align: left;
  }
  .split {
    width: 100%;
    max-width: var(--content-w);
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
    align-items: center;
  }
  /* ── Média : les vidéos sont superposées, une seule visible ──
     Toutes en absolu dans le même cadre, l'active passe à
     l'opacité 1 : c'est ce qui donne le fondu d'une étape à
     l'autre plutôt qu'un remplacement sec. */
  .steps-media {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    border: 1px solid var(--hairline-2);
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
  }
  .video-frame {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.55s ease;
    pointer-events: none;
  }
  .video-frame.is-active { opacity: 1; }
  .video-frame video,
  .video-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .video-ph {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .video-ph svg { width: 26px; height: 26px; opacity: 0.5; }

  /* ── Cards empilées, une active à la fois ── */
  .steps-list { display: flex; flex-direction: column; gap: 8px; }

  .step-card {
    position: relative;
    display: flex; flex-direction: column; gap: 7px;
    width: 100%;
    text-align: left;
    padding: 16px 18px 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  }
  .step-card:hover { opacity: 0.72; }
  .step-card.is-active {
    opacity: 1;
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--hairline-2);
  }
  .step-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .step-num {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.55;
  }
  .step-title {
    margin: 0;
    font-size: clamp(16px, 1.5vw, 19px);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
  }
  /* Le détail ne se déplie que sur l'étape active */
  .step-text {
    margin: 0;
    font-size: 13.6px;
    line-height: 1.6;
    opacity: 0.62;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, margin-top 0.35s ease;
  }
  .step-card.is-active .step-text { max-height: 120px; margin-top: 1px; }

  /* Jauge de progression — matérialise la durée de l'étape */
  .step-progress {
    position: absolute;
    left: 0; bottom: 0;
    height: 2px; width: 100%;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .step-card.is-active .step-progress { opacity: 1; }
  /* Remplissage nettement assombri : il rendait à ~#919191, soit
     4,6:1 sur la card — plus contrasté que bien des textes, l'œil y
     allait en premier. À 0,22 il rend #535353, encore net contre sa
     piste (1,55:1) mais il se fond dans la card. */
  .step-progress i { display: block; height: 100%; width: 0; background: var(--ink); opacity: 0.22; }
  .step-card.is-active .step-progress i { animation: step-fill var(--step-ms, 5200ms) linear forwards; }
  @keyframes step-fill { from { width: 0 } to { width: 100% } }

  @media (prefers-reduced-motion: reduce) {
    .step-progress { display: none; }
    .step-text { max-height: 120px; }
  }
  .panel-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--accent); }
  .panel-label { margin: 0; font-size: clamp(22px, 3vw, 32px); font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
  .stub-note { margin: 0; font-size: 14px; color: var(--ink-muted); max-width: 46ch; line-height: 1.6; }

  /* ── Écran démo : la masterclass ──
     Reprend le vocabulaire de .steps-media (rayon, bordure, fond) sans la
     réutiliser : celle-ci est dimensionnée par la grille .split et ne peut
     pas servir en pleine largeur.
     La largeur est plafonnée par la hauteur DISPONIBLE, pas seulement par
     --content-w : en 16/9 sur 1180px l'encart ferait 664px de haut et
     viendrait buter sous le titre (.panel-head est en absolu à 58px) dès
     que la fenêtre est courte. Les 330px réservés couvrent le titre, la
     ligne de contexte et les respirations ; la vidéo reste 16/9 et tient
     toujours dans l'écran, sans passer par une media query. */
  /* Tout centré, titre compris — même parti que l'écran 2. */
  .demo-wrap {
    width: 100%;
    max-width: var(--content-w);
    display: flex; flex-direction: column;
    align-items: center; gap: 18px;
    text-align: center;
  }

  /* Le titre repasse dans le flux et se centre : en absolu il restait
     calé en haut à gauche pendant que le contenu était centré. */
  /* ── Titre de l'écran 3 : guillemets calligraphiques en diagonale ──
     Deux pseudo-éléments en serif, posés hors du texte (angle haut
     gauche et angle bas droit). Ils sont en absolu, donc ils ne
     comptent ni dans la largeur ni dans la hauteur. */
  .demo-title {
    position: relative;
    display: inline-block;
    margin: 0 0 12px;
  }
  #demo-panel .panel-head {
    position: static;
    width: auto;
    max-width: none;
    margin: 0;
    text-align: center;
  }
  .demo-title::before,
  .demo-title::after {
    position: absolute;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2.4em;
    line-height: 1;
    color: var(--ink);
    opacity: 0.16;
    pointer-events: none;
    user-select: none;
  }
  .demo-title::before { content: "\201C"; left: -0.42em;  top: -0.30em; }
  .demo-title::after  { content: "\201D"; right: -0.42em; bottom: -0.62em; }

  /* Label incliné, accroché à la fin du titre */
  .demo-label {
    position: absolute;
    left: 100%;
    bottom: 0.22em;
    margin-left: 10px;
    transform: rotate(-6deg);
    transform-origin: left bottom;
    white-space: nowrap;
    padding: 4px 10px;
    border: 1px solid var(--hairline-2);
    border-radius: 6px;
    background: var(--card);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.85;
  }

  /* Sous-titre : nettement plus petit que le titre, mais assez présent
     pour se lire d'emblée — pas une mention. */
  .demo-sub {
    margin: 0 0 38px;
    max-width: 62ch;
    font-size: clamp(15px, 1.5vw, 19px);
    line-height: 1.5;
    text-align: center;
    color: var(--ink);
    opacity: 0.62;
  }
  /* La vidéo est contrainte par la HAUTEUR, pas par la largeur : en
     16/9, une colonne de 1180px ferait 664px de haut et déborderait
     de l'écran en chevauchant le titre. On part donc de la hauteur
     restante une fois le titre, le texte et les marges déduits, et
     on en dérive la largeur. */
  .demo-media {
    position: relative;
    width: min(100%, calc((100vh - var(--demo-reserve)) * 16 / 9));
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    border: 1px solid var(--hairline-2);
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
  }
  .demo-media video,
  .demo-media iframe,
  .demo-media img {
    width: 100%; height: 100%;
    object-fit: cover; display: block; border: 0;
  }

  /* Lecture explicite : une masterclass de 25 min ne s'autoplay pas,
     contrairement aux clips muets en boucle de « How it works ». */
  /* Traitement neutre — même parti que le CTA de la barre haute :
     c'est le contour et le verre qui portent le bouton, pas la
     couleur. L'orange en aplat était le seul élément saturé de la
     page et cassait la palette. */
  .demo-play {
    position: absolute; inset: 0; margin: auto;
    width: 74px; height: 74px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #FFFFFF;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  }
  .demo-media:hover .demo-play {
    transform: scale(1.06);
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.38);
  }
  .demo-play:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
  /* Décalage optique : un triangle centré géométriquement paraît à gauche */
  .demo-play svg { width: 26px; height: 26px; margin-left: 3px; }

  .demo-time {
    position: absolute; right: 14px; bottom: 14px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
    padding: 5px 9px; border-radius: 6px;
    background: rgba(0, 0, 0, 0.55); color: var(--ink);
    backdrop-filter: blur(4px);
  }

  .demo-tail { margin: 0; font-size: 14px; color: var(--ink-muted); max-width: 52ch; line-height: 1.6; text-align: center; }

  /* ══════════════════════════════════════════════════════════════
     ÉCRAN PRICING
     Pas un tableau à déchiffrer : deux piles qu'on compare d'un
     regard. Celle de gauche est volontairement lourde — six lignes,
     six additions — celle de droite tient en un chiffre. C'est
     l'asymétrie visuelle qui porte l'argument, pas les nombres.
     ══════════════════════════════════════════════════════════════ */
  .pricing-panel { padding: 76px var(--gutter); }

  .pricing-wrap {
    width: 100%;
    max-width: var(--content-w);
    margin: 0 auto;
    display: flex; flex-direction: column;
    gap: 26px;
    text-align: left;
  }
  /* Deux lignes empilées, très inégales : le prix réel porte la
     couleur, la mise en perspective s'efface. C'est l'écart entre
     les deux qui fait la hiérarchie — l'ancien sous-titre
     descriptif a été retiré, il chargeait l'écran sans rien dire
     que les colonnes ne disent déjà. */
  .pricing-head { text-align: center; }
  .pricing-head h2 {
    margin: 0;
    display: flex; flex-direction: column; gap: 2px;
    letter-spacing: -0.03em;
    line-height: 1.1;
  }
  .ph-main {
    position: relative;
    align-self: center;           /* se réduit à son texte : sans ça les
                                     guillemets se caleraient sur toute
                                     la largeur du bloc */
    font-size: clamp(30px, 3.5vw, 44px);
    font-weight: 600;
    color: #FFFFFF;
  }
  /* Mêmes guillemets que le titre du Masterclass — même serif, mêmes
     proportions, même calage — mais assumés et non fondus au fond. */
  .ph-main::before,
  .ph-main::after {
    position: absolute;
    font-family: Georgia, 'Times New Roman', serif;
    /* 38,4px : exactement la taille des guillemets du Masterclass. En
       `em` ils suivaient un titre 2,75× plus gros et devenaient énormes. */
    font-size: 38.4px;
    line-height: 1;
    color: var(--ink);
    opacity: 0.28;
    pointer-events: none;
    user-select: none;
  }
  /* Calés sur les bords de la boîte (right/left: 100%) et non par un
     retrait négatif : un décalage en em dépend de la chasse du glyphe
     et finit toujours par mordre sur le texte. Même `top` pour les
     deux, ils doivent être à la même hauteur. */
  .ph-main::before { content: "\201C"; right: 100%; margin-right: 8px; top: 0.08em; }
  .ph-main::after  { content: "\201D"; left: 100%;  margin-left: 8px;  top: 0.08em; }

  .ph-sub {
    font-size: clamp(17px, 1.9vw, 23px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
    opacity: 0.3;                 /* se fond dans le fond */
  }

  /* La taille comme hiérarchie : la colonne « sans » est la plus
     étroite, et elle est en plus rentrée verticalement — elle est
     donc plus petite dans les deux dimensions. Le rapport était
     auparavant inversé (1.1 / 0.9), ce qui donnait le plus de place
     à ce qu'on veut dévaloriser. */
  /* Moitiés égales : l'axe de jonction tombe au centre. Les cartes ne
     remplissent pas leur colonne, chacune s'arrête à son contenu. */
  .pricing-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: stretch;
    width: 100%;
  }
  .price-alt { justify-self: end;   width: 100%; max-width: 380px; }
  .price-af  { justify-self: start; width: 100%; max-width: 460px; }

  /* ── Colonne « sans » : dense et en retrait ── */
  /* Colonne « sans » : CREUSÉE dans le panneau. C'est la profondeur
     qui porte la hiérarchie, pas la teinte — une couleur ici
     concurrencerait l'orange. Les deux fonds étaient auparavant à
     0,015 et 0,05 de blanc : quasi identiques, d'où le bloc unique
     illisible. */
  .price-alt {
    position: relative;
    overflow: hidden;                 /* la vidéo respecte les coins arrondis */
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 14px;
    padding: 0;                       /* la vidéo prend toute la carte, bord à bord */
    margin: 14px 0;                   /* rentrée : moins haute que sa voisine */
    background: rgba(0, 0, 0, 0.26);
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.35);
  }
  .price-tag {
    font-family: var(--mono);
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink); opacity: 0.42;
    margin-bottom: 14px;
  }
  .alt-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  }
  .alt-name { font-size: 13.5px; color: var(--ink); opacity: 0.78; }
  .alt-time {
    display: block;
    font-family: var(--mono);
    font-size: 10.5px; letter-spacing: 0.04em;
    color: var(--ink); opacity: 0.38;
    margin-top: 2px;
  }
  /* Coûts par poste : NEUTRES. Colorer chaque ligne saturait la
     colonne ; seuls les totaux portent le signal négatif. */
  .alt-cost {
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
    color: var(--ink); opacity: 0.62;
    white-space: nowrap;
  }
  /* ── Deux totaux de poids égal : l'argent ET le temps ──
     Le temps était en 10px sous chaque poste, donc invisible — alors
     que c'est l'argument le plus fort. Ici les deux se lisent d'un
     coup, et la colonne de droite répond dans la même grille. */
  .price-totals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
  }
  .total-cell { display: flex; flex-direction: column; gap: 3px; }
  .total-fig {
    font-size: clamp(19px, 2vw, 25px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
  }
  .total-cap {
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--ink);
    opacity: 0.5;
  }
  /* Côté « sans » : dégradé ROUGE, seul endroit coloré de la colonne.
     Teinte à 355°, où le bleu égale le vert — c'est ce qui la fait
     lire comme du rouge. L'orange de la page est à 12°, avec un bleu
     bien inférieur au vert : d'où sa lecture chaude. Mon précédent
     rose était à 8°, donc le même orange en plus terne — il brouillait
     le signal au lieu de l'opposer. */
  .price-alt .total-fig {
    font-size: clamp(16px, 1.7vw, 21px);   /* un cran sous la carte de droite */
    background: linear-gradient(120deg, #C99EA1 0%, #BC8890 55%, #AE757F 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    opacity: 0.85;
  }

  /* Contenu de la card « sans » repensé : vidéo plein cadre (remplace
     l'ancien comparatif de coûts) + accroche flottante en haut à
     gauche. Le "14 jours..." n'est pas répété ici, il est déjà sous
     les deux cards (.pricing-punch) — la vidéo seule suffit. */
  .alt-guarantee-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .alt-guarantee-hook {
    position: absolute;
    top: 18px; left: 20px;
    z-index: 2;
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    /* Même dégradé orange que .price-fig, pour rester dans la même
       famille visuelle que le prix de la carte voisine. */
    background: linear-gradient(120deg, #FFD9CB 0%, #F7A183 14%, #EC5935 52%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.55));
  }

  /* ── Bloc prix de la carte de droite ──
     Un seul chiffre, seul et grand. La carte accumulait auparavant
     deux totaux, une légende, une ligne de preuve et quatre coches :
     trop d'informations pour un objet dont le rôle est de dire un
     prix. Tout ce qui relève du temps est passé dans la liste. */
  .price-headline {
    display: flex; flex-direction: column; gap: 3px;
    margin: 2px 0 4px;
  }
  .price-fig {
    font-size: clamp(34px, 4vw, 50px);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    /* Mêmes couleurs que le « 14 days », paliers resserrés : à cette
       taille un dégradé étalé vire au saumon. */
    background: linear-gradient(120deg, #FFD9CB 0%, #F7A183 14%, #EC5935 52%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .price-cap {
    font-size: 13px;
    color: var(--ink);
    opacity: 0.5;
  }
  /* N'apparaît qu'en paiement fractionné — vide en paiement unique,
     pour ne pas laisser une ligne morte sous le prix. */
  .price-proof {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--ink);
    opacity: 0.55;
    min-height: 0;
  }
  .price-proof:empty { display: none; }

  /* ── Colonne « avec » : légère et mise en avant ── */
  /* Colonne « avec » : SURÉLEVÉE — plus claire, ombre portée plus
     franche. L'écart de luminance avec la colonne creusée fait la
     lecture immédiate. */
  /* Trois couches empilées, toutes neutres — aucune teinte ajoutée :
     1. un dégradé en diagonale qui éclaire l'angle haut gauche et
        s'éteint vers le bas, ce qui suffit à donner du relief ;
     2. la trame de points de la page, reprise ici pour rattacher la
        carte au fond du site ;
     3. une base légèrement plus claire que le panneau.
     C'est la lumière qui fait le premium, pas la couleur. */
  .price-af {
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 16px;
    padding: 22px 24px 22px;
    display: flex; flex-direction: column; gap: 14px;
    background-color: #2A2A2A;
    background-image:
      linear-gradient(155deg,
        rgba(255, 255, 255, 0.09) 0%,
        rgba(255, 255, 255, 0.03) 42%,
        rgba(255, 255, 255, 0) 78%),
      radial-gradient(circle, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: auto, var(--dot-size) var(--dot-size);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
  .price-af .price-tag { opacity: 0.7; margin-bottom: 0; }

  /* ── Coloration des deux en-têtes ──
     Teintes DÉSATURÉES : elles orientent le regard sans devenir un
     argument visuel. Le « 14 days » en bas garde la main parce qu'il
     est trois fois plus grand et en dégradé — ici ce sont deux
     libellés de 10px en monospace, la hiérarchie tient toute seule.
     Un point coloré renforce la lecture sans ajouter de contraste
     sur le texte lui-même. */
  .price-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .price-tag::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    opacity: 0.85;
  }
  /* Le titre « sans » était resté sur mon ancien rose à 8° de teinte,
     donc lu comme de l'orange — c'était une erreur, il envoyait le
     signal positif. Il passe dans la même famille rouge que les
     totaux (350°), désaturé. */
  .price-alt .price-tag { color: #B0868C; opacity: 0.8; }   /* sans — rouge terni */
  .price-af  .price-tag { color: #8CBF9C; opacity: 0.9; }   /* avec — sauge */

  /* Sélecteur de paiement */
  .pay-switch {
    display: inline-flex;
    padding: 3px;
    border-radius: 9px;
    border: 1px solid var(--hairline-2);
    background: rgba(0, 0, 0, 0.22);
  }
  .pay-opt {
    padding: 6px 13px;
    border: 0; border-radius: 7px;
    background: transparent;
    color: var(--ink);
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
    cursor: pointer; opacity: 0.5;
    transition: background 0.18s ease, opacity 0.18s ease;
  }
  .pay-opt:hover { opacity: 0.8; }
  .pay-opt.is-on { background: rgba(255, 255, 255, 0.13); opacity: 1; }
  .pay-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .pay-row { display: flex; align-items: center; gap: 10px; align-self: flex-start; }

  /* Même discrétion que la mention Klarna : gris, en retrait du chiffre. */
  .price-crumbs { font-size: 11px; color: var(--ink-faint); }


  .price-af-rows { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
  .price-af-row {
    display: flex; align-items: center; gap: 9px;
    font-size: 13.5px; color: var(--ink); opacity: 0.8;
  }
  .price-af-row svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.6; }

  .af-tag {
    display: inline-block;
    margin-right: 7px;
    padding: 1px 6px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    font-family: var(--mono);
    font-size: 9.5px; font-weight: 500; letter-spacing: 0.1em;
    color: var(--ink); opacity: 0.9;
    vertical-align: 1px;
  }

  /* Action principale de la page : le dégradé complet, comme le
     bouton d'envoi de la FAQ. Encre foncée et non blanche — sur
     l'extrémité pâle du dégradé, du blanc tomberait à 1,3:1 ; le
     brun tient 12,6:1 au clair et 4,8:1 au soutenu. */
  .price-cta {
    margin-top: auto;
    height: 46px;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    border-radius: 11px;
    border: 0;
    /* Métal brossé : le rebond clair/gris/clair fait la réflexion */
    background: linear-gradient(160deg,
      #FDFDFD 0%,
      #FFFFFF 17%,
      #D7D7D7 51%,
      #EDEDED 73%,
      #B9B9B9 100%);
    color: #1C1C1C;
    font-family: inherit; font-size: 14.5px; font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none; cursor: pointer;

    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42),
                inset 0 1px 0 rgba(255, 255, 255, 0.9),
                inset 0 -1px 0 rgba(0, 0, 0, 0.12);
    transition: filter 0.15s ease, transform 0.15s ease;
  }
  /* contrast et non brightness : sur du quasi-blanc, éclaircir écrête */
  .price-cta:hover { filter: contrast(1.08); transform: translateY(-1px); }
  .price-cta svg { width: 16px; height: 16px; }
  .price-guarantee {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 12px; color: var(--ink); opacity: 0.45;
  }
  .price-guarantee svg { width: 13px; height: 13px; }

  /* ── La phrase qui conclut ── */
  .pricing-punch {
    margin: 0;
    text-align: center;
    font-size: clamp(16px, 1.8vw, 22px);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--ink);
  }
  .pricing-punch strong {
    font-weight: 600;
    /* même dégradé chaud que l'accroche du header et le chiffre mis
       en avant — les trois points où la page prend la parole */
    background: linear-gradient(120deg, #FFD9CB 0%, #F7A183 52%, #EC5935 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }

  /* ══════════════════════════════════════════════════════════════
     BOUTON WHATSAPP — même mécanique que « Request a demo » :
     flottant en bas à droite, ouvre un volet qui se déplie depuis
     le bouton. Seule exception chromatique de la page : le vert
     #26D367 est celui de l'icône officielle, échantillonné dessus.
     ══════════════════════════════════════════════════════════════ */
  .wa-cta {
    position: absolute;
    right: var(--gutter);
    bottom: var(--gutter);
    z-index: 4;
  }

  /* Au repos : un simple rond au logo. Au survol, le libellé se
     déploie et le bouton s'allonge. L'ombre reste NEUTRE — l'ombre
     verte d'origine projetait un halo qui faisait néon. */
  .wa-btn {
    height: 56px; padding: 0 13px;
    display: inline-flex; align-items: center;
    border: 0; border-radius: 999px;
    background: #26D367;
    color: #FFFFFF;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
    /* Repli : plus court que l'ouverture, pour ne pas traîner */
    transition: padding 0.34s ease, transform 0.22s ease;
  }
  .wa-btn:hover, .wa-btn:focus-visible {
    padding-right: 22px;
    transform: translateY(-1px);
    /* Ouverture en crescendo : départ retenu (0.34, 0), puis le
       mouvement prend de l'ampleur et se pose en douceur. */
    transition: padding 0.62s cubic-bezier(0.34, 0, 0.16, 1),
                transform 0.3s ease;
  }
  .wa-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
  .wa-btn img { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: block; }

  /* Le libellé est replié : c'est sa largeur qui s'anime, pas celle
     du bouton — `width: auto` ne se transitionne pas. */
  .wa-btn span {
    max-width: 0;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* Repli : le texte s'efface d'abord, la largeur suit */
    transition: max-width 0.34s ease,
                margin-left 0.34s ease,
                opacity 0.18s ease;
  }
  .wa-btn:hover span,
  .wa-btn:focus-visible span {
    max-width: 280px;
    margin-left: 12px;
    opacity: 1;
    /* Même crescendo que le bouton, et le texte n'apparaît qu'une
       fois la largeur amorcée — sinon il surgit avant d'avoir la
       place, ce qui donnait l'effet brutal. */
    transition: max-width 0.62s cubic-bezier(0.34, 0, 0.16, 1),
                margin-left 0.62s cubic-bezier(0.34, 0, 0.16, 1),
                opacity 0.4s ease 0.16s;
  }
  .wa-cta.is-open .wa-btn { opacity: 0; pointer-events: none; }

  @media (prefers-reduced-motion: reduce) {
    .wa-btn, .wa-btn span { transition: none; }
  }


  /* ── Lecture : l'encart prend tout le panneau ──────────────────────
     Pas de plein écran au sens du viewport : l'encart occupe la boîte
     du panneau, qui est déjà `position: relative`. Rien ne sort de la
     carte, la barre haute reste intacte, et le scroll n'a pas à être
     bloqué — l'écran suivant arrive normalement. */
  .demo-panel-playing .demo-title,
  .demo-panel-playing .demo-sub,
  .demo-panel-playing .demo-tail {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }
  .demo-title, .demo-sub, .demo-tail {
    transition: opacity 0.42s ease, transform 0.42s ease;
  }

  /* Le wrapper s'efface pour ne pas contraindre l'encart, mais il garde
     sa place : sans lui la hauteur du panneau s'effondrerait le temps de
     la transition. */
  .demo-wrap { transition: opacity 0.3s ease; }
  .demo-panel-playing .demo-wrap { opacity: 0; }

  /* L'encart est sorti du wrapper par le JS le temps de la lecture :
     il ne peut pas s'étendre au panneau tant qu'il est enfant d'un bloc
     centré et limité en largeur. */
  .demo-media {
    transition: inset 0.55s cubic-bezier(0.34, 0, 0.16, 1),
                border-radius 0.55s cubic-bezier(0.34, 0, 0.16, 1),
                border-color 0.4s ease;
  }
  .demo-media.is-playing {
    position: absolute;
    /* Pas de marge fixe ici : le ratio 16:9 (même proportions qu'à l'état
       fermé, juste plus grand) est calculé en JS à l'ouverture — voir
       af_home_hero_controller.js — et posé en inline sur `inset`, faute de
       quoi une marge fixe en % déforme le cadre selon la forme du panneau. */
    width: auto; height: auto;
    aspect-ratio: auto;
    border-radius: 18px;
    z-index: 3;
    opacity: 1;
  }
  /* Le bouton de lecture laisse la place au contenu. */
  .demo-media.is-playing .demo-play { opacity: 0; pointer-events: none; }
  .demo-play { transition: transform 0.2s ease, background 0.2s ease,
                           border-color 0.2s ease, opacity 0.3s ease; }

  /* Fermeture, en haut à droite de l'encart. */
  .demo-close {
    position: absolute;
    top: 16px; right: 16px;
    z-index: 5;
    width: 38px; height: 38px;
    display: none; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #FFFFFF;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease;
  }
  .demo-media.is-playing .demo-close { display: flex; }
  .demo-close:hover { background: rgba(0, 0, 0, 0.7); border-color: rgba(255, 255, 255, 0.4); }
  .demo-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .demo-close svg { width: 16px; height: 16px; }

  /* Son + PiP — seuls contrôles gardés en plus du gros bouton play/pause
     (voir demande explicite : plus de barre native). Bas-gauche, visibles
     en permanence pendant la lecture (pas juste au survol, pour le PiP
     notamment — voir demande explicite "le bouton est visible"). */
  .demo-bar {
    position: absolute;
    left: 16px; bottom: 16px;
    z-index: 5;
    display: none; gap: 8px;
  }
  .demo-media.is-playing .demo-bar { display: flex; }
  .demo-mute, .demo-pip {
    position: relative;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #FFFFFF;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease;
  }
  .demo-mute:hover, .demo-pip:hover { background: rgba(0, 0, 0, 0.7); border-color: rgba(255, 255, 255, 0.4); }
  .demo-mute:focus-visible, .demo-pip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .demo-mute svg, .demo-pip svg { position: absolute; width: 15px; height: 15px; }
  .demo-mute .icon-muted { opacity: 0; }
  .demo-mute.is-muted .icon-unmuted { opacity: 0; }
  .demo-mute.is-muted .icon-muted { opacity: 1; }

  /* Timeline — trait qui se consume avec la lecture, calé en bas du
     lecteur (voir demande explicite). .demo-media a déjà overflow:hidden
     + border-radius : reste dans le cadre arrondi sans rien de plus. */
  .demo-progress {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.16);
    z-index: 4;
    display: none;
  }
  .demo-media.is-playing .demo-progress { display: block; }
  .demo-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #FF9D5C 0%, #EC5935 100%);
  }

  /* Pause/reprise au survol pendant la lecture (voir demande explicite) —
     invisible tant qu'on ne survole pas, contrairement à la fermeture qui
     reste toujours visible. */
  .demo-pause {
    position: absolute; inset: 0; margin: auto;
    width: 64px; height: 64px; z-index: 4;
    display: none; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #FFFFFF;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
  }
  .demo-media.is-playing .demo-pause { display: flex; }
  .demo-media.is-playing:hover .demo-pause,
  .demo-pause:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .demo-pause:hover { background: rgba(0, 0, 0, 0.65); transform: scale(1.05); }
  .demo-pause:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .demo-pause svg { position: absolute; width: 22px; height: 22px; transition: opacity 0.15s ease; }
  .demo-pause .icon-play { opacity: 0; margin-left: 2px; }
  .demo-pause.is-paused .icon-pause { opacity: 0; }
  .demo-pause.is-paused .icon-play { opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    .demo-title, .demo-sub, .demo-tail, .demo-wrap, .demo-media { transition: none; }
  }

  /* ── Bouton flottant + volet de prise de rendez-vous ──
     Le volet s'ouvre depuis le coin bas-droit du bouton
     (transform-origin) et le bouton s'efface au même instant :
     il se lit comme le bouton qui se déplie, pas comme deux
     éléments distincts. */
  /* Au repos le bouton reste dans le flux, donc centré en pied de
     panneau. Il ne passe en bas à droite que pendant la lecture, quand
     l'encart occupe la place. */
  .demo-cta {
    position: relative;
    z-index: 4;
  }
  .demo-panel-playing .demo-cta {
    position: absolute;
    right: var(--gutter);
    bottom: var(--gutter);
    z-index: 6;
  }

  .demo-cta-btn {
    height: 40px; padding: 0 18px;
    display: inline-flex; align-items: center; gap: 9px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #FFFFFF;
    font-family: inherit; font-size: 13.5px; font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    transition: opacity 0.25s ease, background 0.15s ease, border-color 0.15s ease;
  }
  .demo-cta-btn:hover {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.36);
  }
  .demo-cta-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .demo-cta-btn svg { width: 15px; height: 15px; opacity: 0.8; }
  .demo-cta.is-open .demo-cta-btn { opacity: 0; pointer-events: none; }

  /* Glow pendant la fenêtre 9:20-9:22 de la vidéo masterclass (voir
     af_home_hero_controller.js — calé sur video.currentTime, pas un
     minuteur fixe : la classe suit l'horloge vidéo elle-même). */
  .demo-cta-btn.is-pulsing {
    animation: demo-cta-glow 0.9s ease-in-out infinite;
  }
  @keyframes demo-cta-glow {
    0%, 100% { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); border-color: rgba(255, 255, 255, 0.20); }
    50% { box-shadow: 0 10px 32px rgba(236, 89, 53, 0.65), 0 0 0 4px rgba(236, 89, 53, 0.18); border-color: rgba(236, 89, 53, 0.7); }
  }
  @media (prefers-reduced-motion: reduce) {
    .demo-cta-btn.is-pulsing { animation: none; }
  }

  /* ══════════════════════════════════════════════════════════════
     Card promo d'urgence — même gabarit que la card ticket de l'app
     (dégradé orange, coins arrondis, close en haut à droite), recréé ici
     car cette feuille est indépendante de brand_hub.css (home publique).
     Ancrée bas-droite en position:fixed, ne disparaît jamais complètement
     une fois apparue (voir demande explicite) : le X réduit en mini-barre,
     avec un volet pour rouvrir.
     ══════════════════════════════════════════════════════════════ */
  .promo-widget {
    position: fixed;
    right: 24px; bottom: 24px;
    z-index: 40;
  }

  .promo-card {
    position: relative;
    width: 340px;
    max-width: calc(100vw - 48px);
    background: linear-gradient(160deg, #FF9D5C 0%, #EC5935 100%);
    border-radius: 20px;
    padding: 22px 22px 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    font-family: var(--sans);
    animation: promo-card-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes promo-card-in {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .promo-widget.is-mini .promo-card { display: none; }

  .promo-close {
    position: absolute; top: -8px; right: -8px; z-index: 2;
    width: 26px; height: 26px; border-radius: 50%;
    background: #fff; color: #6B7280; border: none;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    cursor: pointer; transition: color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  }
  .promo-close:hover { color: #111827; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); transform: scale(1.06); }

  .promo-timer-lab {
    font-family: var(--mono);
    font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
  }
  .promo-timer {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 34px; font-weight: 700; letter-spacing: 0.02em;
    color: #fff; line-height: 1;
    margin-bottom: 16px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
  }
  .promo-timer.is-urgent, .promo-mini-timer.is-urgent {
    color: #FFE1D8 !important;
    animation: promo-timer-pulse 1s ease-in-out infinite;
  }
  @keyframes promo-timer-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

  .promo-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 5px 13px;
    font-family: var(--mono);
    font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
    color: #fff;
    margin-bottom: 16px;
  }
  .promo-badge svg { width: 12px; height: 12px; }

  .promo-code-row { display: flex; align-items: stretch; gap: 8px; width: 100%; margin-bottom: 18px; }
  .promo-code {
    flex: 1;
    background: rgba(0, 0, 0, 0.22);
    border: 1.5px dashed rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    padding: 11px 4px;
    font-family: var(--mono);
    font-size: 16px; font-weight: 700; letter-spacing: 0.12em;
    color: #fff;
  }
  .promo-copy {
    position: relative;
    flex-shrink: 0;
    width: 42px;
    background: #fff;
    border: none;
    border-radius: 10px;
    color: #EC5935;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .promo-copy:hover { transform: scale(1.05); }
  .promo-copy.is-copied { background: #22C55E; }
  .promo-copy .icon-copy, .promo-copy .icon-check {
    position: absolute;
    width: 17px; height: 17px;
    transition: opacity 0.18s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .promo-copy .icon-check { color: #fff; opacity: 0; transform: scale(0.3) rotate(-20deg); }
  .promo-copy .icon-copy { opacity: 1; transform: scale(1) rotate(0); }
  .promo-copy.is-copied .icon-copy { opacity: 0; transform: scale(0.3) rotate(20deg); }
  .promo-copy.is-copied .icon-check { opacity: 1; transform: scale(1) rotate(0); }
  .promo-copy-tip {
    position: absolute;
    bottom: calc(100% + 9px); left: 50%;
    background: #111827; color: #fff;
    font-family: var(--sans);
    font-size: 11px; font-weight: 700;
    padding: 5px 10px; border-radius: 7px;
    white-space: nowrap; pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 4px) scale(0.9);
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .promo-copy-tip::after {
    content: "";
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #111827;
  }
  .promo-copy.is-copied .promo-copy-tip { opacity: 1; transform: translate(-50%, 0) scale(1); }

  .promo-price-row { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin-bottom: 4px; }
  .promo-price-old {
    font-size: 18px; font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: line-through; text-decoration-thickness: 1.5px;
  }
  .promo-price-split { display: inline-flex; align-items: baseline; gap: 5px; }
  .promo-price-x { font-family: var(--mono); font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }
  .promo-price-new { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
  .promo-price-cap { font-size: 11px; color: rgba(255, 255, 255, 0.7); margin: 0 0 16px; }

  .promo-plan-tool { position: relative; width: 100%; margin-bottom: 14px; }

  .promo-cta {
    width: 100%;
    border: none; border-radius: 12px;
    padding: 13px;
    background: #fff; color: #C2410C;
    font-family: var(--sans);
    font-size: 14px; font-weight: 700;
    cursor: pointer; text-decoration: none;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .promo-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }
  .promo-cta svg { width: 15px; height: 15px; transition: transform 0.2s ease; }
  .promo-plan-tool.is-open .promo-cta svg { transform: rotate(90deg); }

  /* Volet de choix du plan — même famille que le menu cascadé "Traiter"
     de l'app en thème sombre (.af-rp-menu, is-dark), recréé ici (feuille
     de style séparée de la home publique). S'ouvre vers le haut : la card
     est ancrée en bas d'écran, pas de place en dessous. */
  .promo-plan-flyout {
    position: absolute;
    left: 0; right: 0;
    bottom: calc(100% + 10px);
    z-index: 5;
    background: rgba(24, 22, 20, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
    padding: 6px;
    opacity: 0;
    transform: scale(0.97) translateY(4px);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
  }
  .promo-plan-tool.is-open .promo-plan-flyout {
    opacity: 1; transform: scale(1) translateY(0); pointer-events: auto;
  }
  .promo-plan-reassure {
    margin: 5px 8px 9px;
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
    background: linear-gradient(120deg, #FFD9CB 0%, #F7A183 52%, #EC5935 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
  .promo-plan-sep { height: 1px; background: rgba(255, 255, 255, 0.12); margin: 0 0 6px; }
  .promo-plan-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    color: #fff;
    text-decoration: none;
    font-family: var(--sans);
    font-size: 13px; font-weight: 600;
    transition: background 0.12s ease;
  }
  .promo-plan-row:hover, .promo-plan-row:focus-visible { background: rgba(255, 255, 255, 0.1); }
  .promo-plan-label { color: rgba(255, 255, 255, 0.85); }
  .promo-plan-price {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    color: #fff;
  }
  .promo-plan-price small { font-size: 10px; font-weight: 500; color: rgba(255, 255, 255, 0.55); margin-left: 2px; }

  .promo-reassure { display: flex; flex-direction: column; gap: 4px; }
  .promo-reassure-row {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.82);
  }
  .promo-reassure-row svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.85; }
  .promo-reassure-row b { font-weight: 700; color: #fff; }

  /* ── Mini card repliée, avec volet pour rouvrir ── */
  .promo-mini {
    display: none;
    align-items: center; gap: 12px;
    background: linear-gradient(160deg, #FF9D5C 0%, #EC5935 100%);
    border: none; border-radius: 14px;
    padding: 10px 14px 10px 16px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    font-family: var(--sans);
    color: #fff;
    animation: promo-card-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .promo-widget.is-mini .promo-mini { display: flex; }
  .promo-mini:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
  .promo-mini-timer { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; }
  .promo-mini-sep { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.32); flex-shrink: 0; }
  .promo-mini-code { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; }
  .promo-mini-chevron {
    display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }
  .promo-mini-chevron svg { width: 11px; height: 11px; }
  .promo-mini:hover .promo-mini-chevron { transform: translateY(-1px); }

  @media (max-width: 480px) {
    .promo-widget { right: 12px; bottom: 12px; }
    .promo-card { width: calc(100vw - 24px); }
  }

  .demo-cal {
    /* Fixe à l'écran plutôt qu'ancré au bouton : s'ouvre toujours au même
       endroit (bord droit, centré verticalement), peu importe où le
       bouton se trouve dans la page au moment du clic. */
    position: fixed;
    right: var(--gutter);
    top: 50%;
    z-index: 50;
    width: 420px;
    height: 640px;
    max-height: calc(100vh - 120px);
    display: flex; flex-direction: column;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(20px) saturate(135%);
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    box-shadow:
      0 28px 70px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.11);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) scale(0.94);
    transform-origin: right center;
    transition: opacity 0.32s ease, transform 0.32s ease, visibility 0.32s;
  }
  .demo-cta.is-open .demo-cal {
    opacity: 1; visibility: visible;
    transform: translateY(-50%) scale(1);
  }

  /* Flotte au-dessus de l'iframe plutôt que dans une barre de titre —
     "juste le calendly", pas besoin d'un en-tête dédié. */
  .demo-cal-close {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 2;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 7px;
    background: rgba(20, 20, 20, 0.55);
    backdrop-filter: blur(6px);
    color: var(--ink);
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .demo-cal-close:hover { background: rgba(20, 20, 20, 0.8); }
  .demo-cal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .demo-cal-close svg { width: 13px; height: 13px; }

  /* Emplacement du calendrier — y déposer l'iframe Calendly */
  .demo-cal-body { flex: 1; min-height: 0; padding: 8px; }
  .demo-cal-body iframe { width: 100%; height: 100%; border: 0; display: block; border-radius: 10px; }
  .demo-cal-ph {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 9px;
    border: 1px dashed var(--hairline-2);
    border-radius: 10px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    text-align: center;
  }
  .demo-cal-ph svg { width: 22px; height: 22px; opacity: 0.5; }

  @media (prefers-reduced-motion: reduce) {
    .demo-cal, .demo-cta-btn { transition: none; }
  }

  /* ── Écran 01 : le brain ── */
  /* Marges NÉGATIVES volontaires : la sphère ne remplit pas son canvas
     (mesuré en pixels réels sur le canvas : contenu visible entre 99px
     et 230px sur les deux axes, pour une boîte de 330px — donc ~99px de
     vide de chaque côté). En layout centré, seul le vide du BAS comptait
     (le vide gauche/droite s'annulait par symétrie) : d'où le seul
     margin-bottom historique. Depuis le passage en deux colonnes
     alignées à gauche, le vide de GAUCHE devient visible à son tour —
     la sphère semblait débuter ~100px trop à droite du texte au-dessus
     d'elle. Même logique, même remède, sur l'axe qui manquait. */
  .brain-wrap { width: 330px; height: 330px; margin-bottom: -46px; margin-left: -99px; flex-shrink: 0; }
  .brain-wrap canvas { width: 100%; height: 100%; display: block; }

  .scroll-cue {
    margin: 6px 0 0; font-family: var(--mono); font-size: 11.5px;
    color: var(--ink-faint); display: flex; align-items: center; gap: 9px;
  }
  .scroll-cue svg { flex-shrink: 0; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }
  /* La newsletter passe sous les liens, la marque reste en tête de ligne */
  @media (max-width: 1180px) {
    .footer-promo { grid-template-columns: minmax(0, 1fr); }
    .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @media (max-width: 820px) {
    :root { --gutter: 20px; --footer-w: 92%; }
    .topbar { padding: 16px var(--gutter); }
    .topbar.is-stuck { padding: 10px var(--gutter); }
    .topbar-inner { width: 100%; gap: 20px; }
    /* deux colonnes → empilées */
    .split { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    /* Une seule colonne : plus d'axe central à respecter, les cartes
       reprennent toute la largeur disponible. */
    .pricing-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .price-alt, .price-af { justify-self: stretch; max-width: none; }
    .pricing-panel { padding: 60px var(--gutter); }
    /* Écran 3 : le label repasse sous le titre, il n'y a plus la place
       de le laisser dépasser à droite. */
    .demo-label {
      position: static;
      display: inline-block;
      margin: 10px 0 0;
      transform: rotate(-4deg);
    }
    .demo-title::before { left: -0.30em; }
    .demo-title::after  { right: -0.30em; }
    /* témoignages : 4 colonnes deviennent 2, et le bloc se raccourcit */
    :root { --testi-h: min(760px, 82vh); }
    .testi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .faq-title { max-width: none; }
    .faq-panel { padding: 70px var(--gutter); }
    .chat-card { inset: -12px; }
    .panel--split { padding: 70px var(--gutter); }
    .topbar-nav { gap: 16px; overflow-x: auto; scrollbar-width: none; }
    .topbar-nav::-webkit-scrollbar { display: none; }
    .topbar-nav a { font-size: 13px; }
    .site-footer { padding: 30px 24px 22px; gap: 24px; }
    .footer-body { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
    .footer-drop { width: min(620px, calc(100vw - 48px)); }
    .drop-grid { grid-template-columns: minmax(0, 1fr); }
    /* Les réseaux passent sous les mentions plutôt que de les écraser. */
    .footer-base { grid-template-columns: 1fr auto; row-gap: 14px; }
    .footer-social { grid-row: 2; grid-column: 1 / -1; justify-content: center; }
    /* même logique, proportionnelle au canvas réduit */
    .brain-wrap { width: 260px; height: 260px; margin-bottom: -36px; }
  }

  @media (max-width: 480px) {
    .footer-cols { grid-template-columns: minmax(0, 1fr); }
    .news-form { flex-wrap: wrap; }
    .news-btn { width: 100%; }
  }
  /* ══════════════════════════════════════════════════════════════
     ÉCRAN — CE QUE L'OUTIL A CONSTRUIT, MARQUE PAR MARQUE
     Le résultat à gauche, puis les étapes, chacune en mosaïque. Les
     carreaux sont plafonnés à 52px : c'est leur NOMBRE qui porte
     l'information, il doit rester comparable d'une étape et d'une
     marque à l'autre. La ligne a une hauteur fixe pour que changer
     de marque ne fasse pas sauter l'écran.
     ══════════════════════════════════════════════════════════════ */
  #funnels-panel { padding: 64px var(--gutter) 48px; }
  .fn-wrap {
    width: min(var(--content-w), 100%);
    display: flex; flex-direction: column;
    text-align: left;
  }

  .fn-head { text-align: center; }
  .fn-head h2 {
    margin: 0;
    font-size: clamp(34px, 3.8vw, 48px);
    font-weight: 600; letter-spacing: -0.03em; line-height: 1.1;
    color: var(--ink); text-wrap: balance;
  }
  .fn-h-brand {
    background: linear-gradient(120deg, #FFD9CB 0%, #F7A183 52%, #EC5935 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
  .fn-lead {
    margin: 14px auto 0; max-width: 58ch;
    font-size: clamp(15px, 1.5vw, 19px); line-height: 1.5;
    color: var(--ink-muted);
  }
  .fn-lead b { font-weight: 600; color: var(--ink); }


  /* La ligne d'identité EST la bascule : la marque en cours à gauche,
     les autres sur le reste de la ligne. Un seul objet, pas un onglet
     au-dessus d'un titre qui répète la même chose. */
  .fn-ident {
    display: flex; align-items: center; flex-wrap: wrap; gap: 20px;
    margin-top: 54px; padding-bottom: 16px;
  }
  .fn-brand {
    display: flex; align-items: center; gap: 12px;
    padding: 0; border: 0; background: none; text-align: left;
    color: inherit; font-family: var(--sans); cursor: pointer;
  }
  .fn-brand--on { cursor: default; }
  .fn-others { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-left: auto; }
  .fn-others .fn-brand { opacity: 0.42; transition: opacity 0.16s ease; }
  .fn-others .fn-brand:hover { opacity: 0.85; }
  .fn-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 10px; }

  .fn-logo {
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--hairline-2);
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.03));
    font-family: var(--mono); font-size: 12px; color: var(--ink-muted);
  }
  .fn-others .fn-logo { width: 24px; height: 24px; border-radius: 7px; font-size: 10px; }
  .fn-id-txt { display: flex; flex-direction: column; gap: 3px; }
  .fn-bname { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: #FFFFFF; }
  .fn-others .fn-bname { font-size: 14.5px; font-weight: 500; color: var(--ink); }
  .fn-meta {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-faint);
  }
  .fn-meta i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: 0.75; }

  .fn-sep {
    height: 1px; border: 0; margin: 0;
    background: linear-gradient(to right, transparent, var(--hairline-2) 18%, var(--hairline-2) 82%, transparent);
  }

  /* La ligne elle-même */
  .fn-flow { height: 318px; display: flex; align-items: stretch; padding: 26px 0 14px; overflow: hidden; }
  .fn-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 9px; padding: 0 22px; }
  .fn-step + .fn-step { border-left: 1px solid var(--hairline); }
  .fn-step-head { display: flex; align-items: baseline; gap: 8px; }
  .fn-step-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--accent); }
  .fn-step-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: #FFFFFF; }
  .fn-step-qty { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
  /* Ce que l'étape apporte, avant de montrer ce qu'elle a produit */
  .fn-step-why { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-muted); min-height: 3em; }

  .fn-mosaic {
    display: grid; gap: 5px; align-content: start; min-height: 0;
    grid-template-columns: repeat(var(--c), minmax(0, 1fr));
    max-width: calc(var(--c) * 46px + (var(--c) - 1) * 5px);
  }
  .fn-tile {
    position: relative; aspect-ratio: 1; padding: 0; cursor: pointer; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--hairline-2); border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.16s ease, transform 0.16s ease;
  }
  .fn-tile:hover, .fn-tile:focus-visible {
    border-color: rgba(255, 255, 255, 0.38); transform: translateY(-2px); outline: none;
  }
  .fn-tile::after {
    content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.16s ease;
    background: rgba(0, 0, 0, 0.58) center / 17px 17px no-repeat
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.8"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg>');
  }
  .fn-tile:hover::after, .fn-tile:focus-visible::after { opacity: 1; }
  .fn-brand-logo { width: 24px; height: 24px; object-fit: contain; display: block; }

  /* Dernière case : ce qu'on montre n'est qu'un aperçu */
  .fn-more {
    aspect-ratio: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    border: 1px dashed var(--hairline-2); border-radius: 7px;
    background: rgba(255, 255, 255, 0.015); color: var(--ink-faint);
  }
  .fn-more svg { width: 15px; height: 15px; opacity: 0.7; }
  .fn-more b { font-family: var(--mono); font-size: 9px; font-weight: 400; letter-spacing: 0.06em; }

  /* Card de résultat, en tête de ligne */
  .fn-result {
    flex: 0 0 clamp(210px, 19%, 268px);
    display: flex; flex-direction: column; gap: 8px;
    margin-right: 22px; padding: 17px 19px 15px;
    border: 1px solid var(--hairline-2); border-radius: 14px;
    background: linear-gradient(150deg, rgba(125, 203, 154, 0.11), rgba(255, 255, 255, 0) 64%), rgba(255, 255, 255, 0.03);
  }
  .fn-result-lab {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ok);
  }
  .fn-result-fig {
    font-size: clamp(26px, 2.6vw, 36px); font-weight: 600;
    letter-spacing: -0.045em; line-height: 1; color: #FFFFFF;
    font-variant-numeric: tabular-nums;
  }
  .fn-result-sub { font-size: 13.5px; color: var(--ink); opacity: 0.55; }
  .fn-result-why { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-muted); }
  .fn-chart { margin-top: auto; width: 100%; height: 58px; display: block; }

  /* Glyphes de format — mêmes mockups que l'écran d'accueil de l'app */
  .fn-gl { position: relative; width: 30px; height: 30px; border-radius: 7px; overflow: hidden; flex-shrink: 0; }
  .fn-gl-post { background: linear-gradient(160deg, #60A5FA 0%, #3B82F6 55%, #1D4ED8 100%); }
  .fn-gl-post::before {
    content: ""; position: absolute; left: 5px; right: 5px; bottom: 5px; height: 11px;
    background: #1E293B; opacity: 0.55; border-radius: 2px 2px 0 0;
    clip-path: polygon(0 100%, 30% 20%, 55% 60%, 75% 10%, 100% 100%);
  }
  .fn-gl-post::after { content: ""; position: absolute; top: 5px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: #FDE68A; }
  .fn-gl-reel { background: linear-gradient(200deg, #27272A 0%, #09090B 100%); }
  .fn-gl-reel::before {
    content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
    border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent #FFFFFF;
  }
  .fn-gl-reel::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 2px; background: rgba(255, 255, 255, 0.35); border-radius: 2px; }
  .fn-gl-landing { background: #FFFFFF; }
  .fn-gl-landing .chrome { position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--accent); }
  .fn-gl-landing .hero { position: absolute; left: 5px; right: 5px; top: 11px; height: 8px; background: #FED7AA; border-radius: 2px; }
  .fn-gl-landing .cta { position: absolute; left: 5px; bottom: 5px; width: 14px; height: 5px; background: var(--accent); border-radius: 3px; }
  .fn-gl-email { background: transparent; }
  .fn-gl-email .e { position: absolute; left: 3px; right: 3px; height: 16px; border-radius: 3px; background: linear-gradient(160deg, #FDBA74, #EC5935); }
  .fn-gl-email .e1 { top: 4px; transform: rotate(-6deg); opacity: 0.5; }
  .fn-gl-email .e2 { top: 8px; }
  .fn-gl-email .e2::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 9px;
    background: linear-gradient(160deg, #FED7AA, #FDBA74);
    clip-path: polygon(0 0, 50% 65%, 100% 0);
  }
  .fn-gl-nurture { background: #FFFFFF; }
  .fn-gl-nurture::before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; height: 5px; background: var(--accent); border-radius: 1px; }
  .fn-gl-nurture::after {
    content: ""; position: absolute; top: 13px; left: 5px; right: 9px; height: 9px;
    background-image: repeating-linear-gradient(#FDBA74 0, #FDBA74 1.5px, transparent 1.5px, transparent 4.5px);
  }

  /* ── Volet de lecture ──────────────────────────────────────────
     Pas de titre ni de légende : on sait de quelle marque et de quelle
     étape il s'agit, et on voit la pièce. La barre d'espace fait
     défiler tout ce qui a été produit, pièce après pièce, étape après
     étape, marque après marque, sans jamais refermer. */
  .fn-veil {
    position: fixed; inset: 0; z-index: 60; display: none;
    align-items: center; justify-content: center; padding: 4vh 4vw;
    background: rgba(8, 8, 8, 0.86); backdrop-filter: blur(12px);
  }
  .fn-veil.is-open { display: flex; }
  .fn-veil-box {
    position: relative; width: min(880px, 100%);
    display: flex; flex-direction: column; align-items: center; gap: 26px;
  }
  .fn-veil-head {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center;
  }
  .fn-veil-who, .fn-veil-what { display: flex; align-items: center; gap: 10px; }
  .fn-veil-who .fn-bname { font-size: 15px; }
  .fn-veil-who .fn-logo { width: 26px; height: 26px; border-radius: 8px; font-size: 10px; }
  .fn-veil-rule { width: 1px; height: 18px; background: var(--hairline-2); }
  .fn-veil-what {
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-muted);
  }
  .fn-veil-what .fn-brand-logo { width: 18px; height: 18px; }
  .fn-veil-what .fn-gl { transform: scale(0.72); transform-origin: center; margin: -5px -4px; }

  .fn-veil-stage { display: flex; align-items: center; justify-content: center; min-height: 430px; }
  .fn-veil-foot {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-faint);
  }
  .fn-veil-foot kbd {
    padding: 4px 12px; border-radius: 6px;
    border: 1px solid var(--hairline-2); background: rgba(255, 255, 255, 0.05);
    font-family: var(--mono); font-size: 11px; color: var(--ink);
  }
  .fn-veil-x {
    position: fixed; top: 22px; right: 22px;
    width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--hairline-2); background: rgba(255, 255, 255, 0.05);
    color: var(--ink-muted); font-size: 14px; line-height: 1;
  }
  .fn-veil-x:hover { background: rgba(255, 255, 255, 0.12); color: #FFFFFF; }

  /* ── Maquettes de contenu ──────────────────────────────────────
     Même vocabulaire que les mockups de l'app : une carcasse sombre,
     des barres grises à la place du texte, un seul aplat d'accent pour
     l'action. On lit la forme du contenu, pas son contenu. */
  .fn-mk {
    background: #1C1C1C; border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
  }
  .fn-mk i { display: block; border-radius: 2px; background: rgba(255, 255, 255, 0.26); }
  .fn-mk i.d { background: rgba(255, 255, 255, 0.12); }
  .fn-mk .media {
    background:
      radial-gradient(120% 100% at 30% 20%, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 62%),
      rgba(255, 255, 255, 0.05);
    border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  }
  .fn-mk .cta { background: var(--accent); border-radius: 6px; }
  .fn-mk .av { border-radius: 50%; background: rgba(255, 255, 255, 0.2); flex-shrink: 0; }
  .fn-mk .row { display: flex; align-items: center; }
  .fn-mk .col { display: flex; flex-direction: column; }

  /* publication de flux */
  .fn-mk-post { width: 320px; }
  .fn-mk-post .hd { gap: 9px; padding: 13px 15px; }
  .fn-mk-post .av { width: 28px; height: 28px; }
  .fn-mk-post .media { aspect-ratio: 1; }
  .fn-mk-post .acts { gap: 11px; padding: 13px 15px 8px; }
  .fn-mk-post .acts span { width: 15px; height: 15px; border-radius: 4px; background: rgba(255, 255, 255, 0.2); }
  .fn-mk-post .cap { gap: 5px; padding: 0 15px 16px; }

  /* format vertical */
  .fn-mk-vert { width: 248px; height: 430px; position: relative; }
  .fn-mk-vert .media { position: absolute; inset: 0; border: 0; }
  .fn-mk-vert .side { position: absolute; right: 12px; bottom: 96px; gap: 16px; align-items: center; }
  .fn-mk-vert .side span { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); display: block; }
  .fn-mk-vert .btm { position: absolute; left: 0; right: 0; bottom: 0; gap: 7px; padding: 16px 16px 18px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); }
  .fn-mk-vert .play {
    position: absolute; inset: 0; margin: auto; width: 0; height: 0;
    border-style: solid; border-width: 13px 0 13px 21px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.5);
  }

  /* message court */
  .fn-mk-tweet { width: 420px; padding: 20px 22px; }
  .fn-mk-tweet .av { width: 34px; height: 34px; }
  .fn-mk-tweet .acts { gap: 42px; padding-top: 14px; }
  .fn-mk-tweet .acts span { width: 13px; height: 13px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }

  /* page */
  .fn-mk-page { width: 460px; }
  .fn-mk-page .chrome { gap: 5px; padding: 9px 12px; background: rgba(0, 0, 0, 0.35); border-bottom: 1px solid var(--hairline); }
  .fn-mk-page .chrome b { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
  .fn-mk-page .chrome i { flex: 1; height: 9px; margin-left: 8px; border-radius: 5px; }
  .fn-mk-page .nav { padding: 11px 16px; border-bottom: 1px solid var(--hairline); gap: 10px; }
  .fn-mk-page .hero { gap: 9px; padding: 22px 16px 18px; align-items: center; }
  .fn-mk-page .media { height: 112px; }
  .fn-mk-page .cards { gap: 9px; padding: 16px; }
  .fn-mk-page .cards div { flex: 1; height: 52px; border-radius: 7px; background: rgba(255, 255, 255, 0.04); }

  /* email */
  .fn-mk-mail { width: 430px; }
  .fn-mk-mail .hd { gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--hairline); }
  .fn-mk-mail .av { width: 30px; height: 30px; border-radius: 8px; }
  .fn-mk-mail .body { gap: 8px; padding: 20px 18px 8px; }
  .fn-mk-mail .foot { gap: 7px; padding: 14px 18px 20px; align-items: center; }

  /* annonce */
  .fn-mk-ad { width: 340px; }
  .fn-mk-ad .tag { padding: 12px 15px 10px; }
  .fn-mk-ad .tag i { width: 58px; height: 8px; border-radius: 4px; background: rgba(236, 89, 53, 0.55); }
  .fn-mk-ad .media { aspect-ratio: 4 / 3; }
  .fn-mk-ad .body { gap: 7px; padding: 14px 15px 16px; }

  /* lecteur vidéo */
  .fn-mk-video { width: 560px; }
  .fn-mk-video .media { aspect-ratio: 16 / 9; position: relative; border-top: 0; }
  .fn-mk-video .play {
    position: absolute; inset: 0; margin: auto; width: 0; height: 0;
    border-style: solid; border-width: 16px 0 16px 26px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.55);
  }
  .fn-mk-video .bar-wrap { padding: 14px 16px 16px; gap: 10px; }
  .fn-mk-video .track { flex: 1; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
  .fn-mk-video .track b { display: block; width: 38%; height: 100%; background: var(--accent); }

  /* avis */
  .fn-mk-review { width: 420px; padding: 22px 24px 24px; }
  .fn-mk-review .stars { gap: 6px; padding-bottom: 14px; }
  .fn-mk-review .stars b {
    width: 14px; height: 14px; background: var(--accent); opacity: 0.85;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }
  .fn-mk-review .txt { gap: 8px; padding-bottom: 18px; }
  .fn-mk-review .who { gap: 10px; }
  .fn-mk-review .av { width: 26px; height: 26px; }