/* Feuille commune du site www.overt.cc (09/10/2026) : servie à l'accueil
   (index.html), à /features et à /pricing. Jusque-là, tout vivait dans le
   <style> d'index.html et /extension en recopiait des blocs à la main ; avec
   plusieurs pages, une retouche de la DA se fait ici, une fois. La DA, la
   grille et les règles de voix sont décrites en tête d'index.html. ⚠️ Fichier
   servi tel quel : ses commentaires se lisent, rien sur la provenance des
   chiffres.
   ⚠️ THÈME SOMBRE EN PAUSE (10/10/2026, Romain : « mets en pause le black
   mode sur le site ») : les cinq pages portent `data-theme="light"` sur
   `<html>`, devant lequel tout le sombre cède (`:root:not([data-theme="light"])`),
   et leur `theme-color` sombre vaut le clair (#f7f7f6). Les règles du clair
   écrites pour un système en clair ont leur jumelle `:root[data-theme="light"]`.
   Les bandes NOIRES de la marque (In numbers, dernier appel, pied) restent
   noires : ce n'est pas le thème sombre. Pour le rouvrir : retirer l'attribut
   des cinq pages et remettre #0b0c0e au `theme-color` sombre. */
@font-face { font-family: 'Bruno Ace'; src: url('/fonts/BrunoAce-Regular.ttf') format('truetype'); font-weight: 400; font-display: block; }
@font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/IBMPlexSans-SemiBold-latin.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Source Code Pro'; src: url('/fonts/SourceCodePro-Regular-latin.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Source Code Pro'; src: url('/fonts/SourceCodePro-Semibold-latin.ttf') format('truetype'); font-weight: 600; font-display: swap; }

:root {
  /* Marque (noir) — identique dans les deux thèmes. */
  --noir: #111216;
  --noir-2: #121418;
  --noir-panel: #1c1f26;
  --noir-line: rgba(255, 255, 255, .12);
  --grid-noir: rgba(255, 255, 255, .1);
  --on-noir: #ffffff;
  --on-noir-2: #c9ccd3;
  --on-noir-dim: #8a8f98;
  --neon-vert: #00e68a;
  --neon-cyan: #00c8ff;
  --neon-violet: #b18cff;

  /* Donnée (clair). */
  --bg: #f7f7f6;
  --card: #ffffff;
  --ink: #16181d;
  --muted: #5b6270;
  --warn: #b3261e;
  --line: rgba(22, 24, 29, .12);
  --line-soft: rgba(22, 24, 29, .07);
  --grid: rgba(22, 24, 29, .1);
  --a-green: #0a8a56;
  --a-blue: #2244cc;
  --a-violet: #6d28d9;
  --tag-bg: #16181d;
  --tag-ink: #ffffff;

  /* Ce qui vend Plus porte les couleurs de l'AUBE, celles du faisceau du fond
     (09/10/2026, D-103) : bleu ciel, lavande, rose — en dégradés continus,
     jamais en taches. Avant : le patchwork violet, bleu, orange, vert de Pro (D-97). */
  --pastel: linear-gradient(105deg, #dce8ff 0%, #e4ddfd 50%, #fcdbe9 100%);
  --pastel-hover: linear-gradient(105deg, #cfdfff 0%, #d9d0fc 50%, #f9cce0 100%);
  --pastel-ink: #16181d;
  --pastel-line: rgba(22, 24, 29, .12);
  --metal: linear-gradient(115deg, #2b2f36 0%, #636a75 30%, #1f2328 50%, #5c636e 72%, #33373e 100%);
  --pro-line: linear-gradient(115deg, rgba(43,47,54,.55), rgba(140,147,158,.35) 35%, rgba(31,35,40,.6) 55%, rgba(140,147,158,.3) 80%, rgba(43,47,54,.5));
  --aura-o: .75;
  --dawn-sky: rgba(140, 190, 248, .42);
  --dawn-lav: rgba(172, 158, 240, .40);
  --dawn-pink: rgba(255, 150, 178, .38);

  --logo: 'Bruno Ace', 'Helvetica Neue', Arial, sans-serif;
  --heading: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Source Code Pro', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Trame et verre (08/10/2026, D-89 de l'app) : valeurs recopiées de
     webapp/src/styles.css (« Surfaces — trame et verre »). La trame passe
     derrière les bandes CLAIRES ; les bandes noires la couvrent. */
  --field-dot: rgba(22, 24, 29, 0.075);
  --field-beam: rgba(255, 255, 255, 1);
  /* L'aube (09/10/2026, Romain) : en thème clair, la lueur du faisceau est
     peinte le long de son axe — bleu ciel en haut, lavande, rose au point
     chaud, lavande en bas ; les points blanchissent toujours. Écart du site,
     pas de l'app (field.js). */
  --field-glow: rgba(255, 150, 178, 0.55);
  --field-haze: rgba(172, 158, 240, 0.48);
  --field-sky: rgba(140, 190, 248, 0.45);
  --glass-fill: linear-gradient(160deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.24));
  --glass-flat: rgba(255, 255, 255, 0.45);
  --glass-solid: color-mix(in srgb, #fff 45%, var(--bg));
  --glass-line: rgba(255, 255, 255, 0.78);
  --glass-hi: rgba(255, 255, 255, 0.96);
  --glass-lift: 0 1px 2px rgba(22, 24, 29, 0.05), 0 18px 40px -18px rgba(22, 24, 29, 0.30);
  --glass-blur: blur(18px);

  --wrap: 1180px;
  --pad: 24px;
  color-scheme: light;
}
/* Thème sombre : les sections de DONNÉE passent au sombre, et les annotations
   deviennent les néons — sur fond sombre, et là seulement. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111216; --card: #17191e; --ink: #e8e9ec; --muted: #9aa1ad; --warn: #ff8a80;
    --line: rgba(232, 233, 236, .14); --line-soft: rgba(232, 233, 236, .07); --grid: rgba(232, 233, 236, .1);
    --a-green: #00e68a; --a-blue: #00c8ff; --a-violet: #b18cff;
    --tag-bg: #e8e9ec; --tag-ink: #101114;
    --pastel: linear-gradient(105deg, rgba(80,140,235,.34), rgba(130,110,235,.36) 50%, rgba(215,90,150,.32)), #1b1c21;
    --pastel-hover: linear-gradient(105deg, rgba(80,140,235,.48), rgba(130,110,235,.5) 50%, rgba(215,90,150,.46)), #202127;
    --pastel-ink: #e8e9ec; --pastel-line: rgba(255, 255, 255, .14);
    --metal: linear-gradient(115deg, #f7f8fa 0%, #b8bec8 28%, #eef0f3 46%, #9aa1ac 68%, #e4e7ec 86%, #c3c8d0 100%);
    --pro-line: linear-gradient(115deg, rgba(247,248,250,.55), rgba(154,161,172,.25) 35%, rgba(238,240,243,.6) 55%, rgba(154,161,172,.2) 80%, rgba(228,231,236,.5));
    --aura-o: .55;
    --dawn-sky: rgba(120, 180, 255, .40); --dawn-lav: rgba(172, 158, 250, .42); --dawn-pink: rgba(255, 140, 185, .36);
    --field-dot: rgba(255, 255, 255, 0.06); --field-beam: rgba(255, 255, 255, 0.3); --field-glow: rgba(255, 255, 255, 0.03); --field-haze: rgba(0, 0, 0, 0); --field-sky: rgba(0, 0, 0, 0);
    --glass-fill: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04));
    --glass-flat: rgba(255, 255, 255, 0.035); --glass-solid: color-mix(in srgb, #fff 3.5%, var(--bg));
    --glass-line: rgba(255, 255, 255, 0.14); --glass-hi: rgba(255, 255, 255, 0.24);
    --glass-lift: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px -18px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--ui); -webkit-font-smoothing: antialiased; }
/* La trame (backdrop.js) : une couche fixe sous toute la page, à z −1 dans le
   contexte racine — sous le contenu, sur le fond du body. Les bandes noires,
   opaques, la couvrent ; elle ne se voit que derrière les bandes claires.
   Plus large que l'écran d'un pas (18 px) : le script la décale pour qu'une
   colonne de points tombe sur le rail gauche de la colonne. 100lvh, pas
   `inset: 0` : au téléphone, la barre d'adresse la relaierait en plein
   défilement. */
.site-backdrop { position: fixed; top: 0; left: 0; width: calc(100vw + 18px); height: 100vh; height: 100lvh; z-index: -1; overflow: hidden; pointer-events: none; }
.site-backdrop canvas { display: block; width: 100%; height: 100%; }
@media print { .site-backdrop { display: none; } }
/* Les bandes NOIRES ont leur trame (10/10/2026, Romain : « les backgrounds
   noirs doivent aussi avoir la grille de points et le faisceau, faisceau du
   mode sombre ; et si on pouvait casser légèrement le noir ») : une couche
   par bande, posée par backdrop.js, aux encres du thème sombre (points blancs
   à 6 %, faisceau blanc), sous le contenu et au-dessus des rails. Le noir
   passe de #0b0c0e à #111216, le fond du thème sombre : cassé, pas grisé — les
   néons y gardent leur contraste. */
section.on-noir, footer { position: relative; isolation: isolate;
  --field-dot: rgba(255, 255, 255, 0.06); --field-beam: rgba(255, 255, 255, 0.3); --field-glow: rgba(255, 255, 255, 0.03);
  --field-haze: rgba(0, 0, 0, 0); --field-sky: rgba(0, 0, 0, 0); }
/* La couche d'une bande est FIXE et de la taille de l'écran, comme la claire
   (.site-backdrop) — même grille, même animation (backdrop.js, field.js) —,
   et sa bande n'en laisse voir que sa part : `clip-path` rogne aussi un
   descendant fixe, là où `overflow` le laisserait déborder. */
.band-field { position: absolute; inset: 0; z-index: 0; clip-path: inset(0); pointer-events: none; }
.band-field-in { position: fixed; top: 0; left: 0; width: calc(100vw + 18px); height: 100vh; height: 100lvh; overflow: hidden; }
.band-field-in canvas { display: block; width: 100%; height: 100%; }
section.on-noir > :not(.band-field), footer > :not(.band-field) { position: relative; z-index: 1; }
@media print { .band-field { display: none; } }
a { color: inherit; }
img, svg { display: block; }
h1, h2, h3 { font-family: var(--heading); font-weight: 600; margin: 0; letter-spacing: -.015em; text-wrap: balance; }
p { margin: 0; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.mono { font-family: var(--mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Boutons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 10px;
  font: 600 15px/1 var(--ui); text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn-pro { color: var(--pastel-ink); background: var(--pastel); border: 1px solid var(--pastel-line); }
.btn-pro:hover { background: var(--pastel-hover); }
/* Sur le noir de marque, le pastel prend sa version sombre dans les deux thèmes. */
.on-noir .btn-pro {
  color: #e8e9ec; border-color: rgba(255,255,255,.16);
  background: linear-gradient(105deg, rgba(80,140,235,.4), rgba(130,110,235,.42) 50%, rgba(215,90,150,.38)), #1b1c21;
}
.on-noir .btn-pro:hover { background: linear-gradient(105deg, rgba(80,140,235,.55), rgba(130,110,235,.58) 50%, rgba(215,90,150,.52)), #202127; }
.btn-ghost { color: var(--ink); border: 1px solid var(--line); background: transparent; }
.btn-ghost:hover { background: var(--line-soft); }
.on-noir .btn-ghost { color: #fff; border-color: rgba(255,255,255,.2); }
.on-noir .btn-ghost:hover { background: rgba(255,255,255,.06); }
.btn svg { width: 16px; height: 16px; }
/* ── Le CTA-logo (09/10/2026, Romain) : le carré noir et l'anneau du logo
   d'Overt (icônes de l'extension, `overt-*-128.png`). Au repos, un point GRIS
   qui clignote dans l'anneau ; quand le pointeur s'approche (ou, au toucher,
   quand le bouton arrive au milieu de l'écran), le point passe au VERT —
   l'état « trouvé » de l'icône —, puis l'anneau s'ouvre sur les côtés et
   découvre le texte ; quand il s'éloigne, tout se referme et le point
   reclignote (script 14). Le texte est toujours dans le lien : lu par les
   lecteurs d'écran, ouvert au clavier. Le néon vit sur le carré noir, dans
   les deux thèmes. */
/* Hauteur RÉSERVÉE à celle du bouton ouvert : l'anneau grandit dedans, rien
   ne bouge autour (Romain, 09/10/2026 : « il déplace légèrement le module du
   dessous »). */
.mk-cta { --mk-lw: 300px; display: inline-flex; align-items: center; justify-content: center; height: 46px; border-radius: 999px; color: #fff; text-decoration: none; }
/* Plus de carré noir autour (Romain, 09/10/2026 : « double bords », puis
   « retirer les bords noirs quand il n'est pas déplié ») : le bouton EST
   l'anneau du logo, rempli du noir de la marque — un seul bord, fermé comme
   ouvert. Fermé, une petite capsule grise ; ouvert, la même, élargie. */
.mk-ring { display: inline-flex; align-items: center; justify-content: center; gap: 0; height: 40px; box-sizing: border-box; min-width: 58px; padding: 0 14px;
  border: 4px solid #c9ccd3; border-radius: 999px; background: #0b0c0e;
  transition: border-color .25s ease, gap .4s cubic-bezier(.2, .7, .2, 1) .1s, padding .4s cubic-bezier(.2, .7, .2, 1) .1s, height .4s cubic-bezier(.2, .7, .2, 1) .1s; }
.mk-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #8a8f98; animation: mk-blink 1.4s ease-in-out infinite; transition: background-color .2s ease; }
.mk-label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; font: 600 15px/1 var(--ui); letter-spacing: .005em;
  transition: max-width .45s cubic-bezier(.2, .7, .2, 1) .1s, opacity .25s ease; }
@keyframes mk-blink { 0%, 100% { opacity: 1; } 50% { opacity: .18; } }
.mk-cta.is-near .mk-dot { background: #00e68a; animation: none; box-shadow: 0 0 10px rgba(0, 230, 138, .55); }
.mk-cta.is-near .mk-ring { border-color: #fff; }
.mk-cta.is-open .mk-ring { height: 46px; gap: 10px; padding: 0 18px 0 16px; }
.mk-cta.is-open .mk-label { max-width: var(--mk-lw); opacity: 1; transition: max-width .45s cubic-bezier(.2, .7, .2, 1), opacity .3s ease .2s; }
/* Sur le clair, le blanc de l'anneau ouvert se perdrait dans le fond : il prend
   le noir du remplissage — une pilule noire, toujours un seul bord. */
/* Thème clair (09/10/2026, Romain : « la barre nav doit être claire et le CTA
   aussi, bordures noires ») : le CTA du hero devient une capsule BLANCHE à
   l'anneau noir ; le vert y est celui des liens d'action (#0a8a56) — jamais le
   néon sur du clair. Le dernier appel, sur le noir de marque, garde l'anneau
   blanc et le néon. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero .mk-cta { color: #16181d; }
  :root:not([data-theme="dark"]) .hero .mk-ring { background: #fff; border-color: #16181d; box-shadow: 0 10px 24px -16px rgba(22, 24, 29, .35); }
  :root:not([data-theme="dark"]) .hero .mk-cta.is-near .mk-ring { border-color: #16181d; }
  :root:not([data-theme="dark"]) .hero .mk-cta.is-near .mk-dot { background: #0a8a56; box-shadow: 0 0 10px rgba(10, 138, 86, .45); }
  :root:not([data-theme="dark"]) .hero .mk-cta:hover .mk-dot { box-shadow: 0 0 14px rgba(10, 138, 86, .6); }
  :root:not([data-theme="dark"]) .hero .mk-cta:focus-visible { outline-color: #0a8a56; }
}
:root[data-theme="light"] .hero .mk-cta { color: #16181d; }
:root[data-theme="light"] .hero .mk-ring { background: #fff; border-color: #16181d; box-shadow: 0 10px 24px -16px rgba(22, 24, 29, .35); }
:root[data-theme="light"] .hero .mk-cta.is-near .mk-ring { border-color: #16181d; }
:root[data-theme="light"] .hero .mk-cta.is-near .mk-dot { background: #0a8a56; box-shadow: 0 0 10px rgba(10, 138, 86, .45); }
:root[data-theme="light"] .hero .mk-cta:hover .mk-dot { box-shadow: 0 0 14px rgba(10, 138, 86, .6); }
:root[data-theme="light"] .hero .mk-cta:focus-visible { outline-color: #0a8a56; }
.on-noir .mk-cta.is-near .mk-ring { border-color: #fff !important; }
.mk-cta:hover .mk-dot { box-shadow: 0 0 14px rgba(0, 230, 138, .8); }
.mk-cta:focus-visible { outline: 2px solid #00e68a; outline-offset: 3px; }
.hero-cta .mk-cta + .btn { height: 46px; border-radius: 999px; }
@media (max-width: 420px) { .mk-ring { border-width: 3px; } .mk-label { font-size: 13px; letter-spacing: 0; } .mk-cta.is-open .mk-ring { gap: 7px; padding: 0 12px 0 11px; } }
@media (max-width: 340px) { .mk-label { font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) { .mk-dot { animation: none; } .mk-ring, .mk-label, .mk-dot { transition: none !important; } }

.fine { font-size: 13px; color: var(--muted); }
.on-noir .fine { color: var(--on-noir-dim); }

/* ── Étiquettes à la TypeSafe : un bloc d'encre, du mono ─────────────── */
.tag {
  display: inline-block; padding: 3px 7px 2px; border-radius: 2px;
  font: 600 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  background: var(--tag-bg); color: var(--tag-ink);
  align-self: flex-start; justify-self: start; width: fit-content;
}
.on-noir .tag { background: #fff; color: #0b0c0e; }

/* ── Navigation ──────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08); color: #fff;
}
/* `.nav.on-noir` et pas `.nav` : `.on-noir`, déclarée après, peignait la barre
   d'un noir OPAQUE — son verre ne se voyait jamais. */
.nav.on-noir { background: rgba(11, 12, 14, .82); }
/* Trois colonnes (09/10/2026, Romain : « dans la nav sur desktop centre
   Product… FAQ ») : le logo à gauche, les liens au CENTRE de la page — pas
   au centre de la place qui reste —, la connexion à droite. Au téléphone, les
   liens partent derrière le burger : les colonnes restent, vides au milieu. */
.nav .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; height: 64px; }
.nav .wordmark { grid-column: 1; justify-self: start; }
.wordmark { font-family: var(--logo); font-size: 26px; letter-spacing: .05em; line-height: 1; text-decoration: none; color: #fff; }
.nav-links { grid-column: 2; display: flex; gap: 22px; }
.nav-links a { text-decoration: none; font-size: 14px; color: var(--on-noir-2); }
.nav-links a:hover { color: #fff; }
.nav-cta { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }
.nav-cta .signin { font-size: 14px; color: var(--on-noir-2); text-decoration: none; padding: 0 8px; }
.nav-cta .signin:hover { color: #fff; }
.nav-cta .btn { height: 36px; padding: 0 14px; font-size: 14px; }
/* Le BURGER (09/10/2026, Romain : « sur mobile il faut qu'on ait le burger en
   haut à droite dans la nav ») : sous 860 px, les liens de la barre se
   replient derrière trois traits, tout à droite ; ouverts, ils tombent sous la
   barre en panneau OPAQUE, du fond du thème — un verre n'y flouterait rien :
   la barre porte déjà son propre flou, et un `backdrop-filter` imbriqué ne
   voit pas la page (script du burger). Sans script, le bouton reste caché. */
.nav-burger { display: none; position: relative; flex: none; width: 40px; height: 40px; margin-right: -8px; padding: 0; border: 0; border-radius: 10px; background: none; color: inherit; cursor: pointer; }
.nav-burger[hidden] { display: none !important; }
.nav-burger span { position: absolute; left: 11px; right: 11px; height: 1.75px; border-radius: 1px; background: currentColor; transition: transform .25s ease, opacity .2s ease; }
.nav-burger span:nth-child(1) { top: 14px; }
.nav-burger span:nth-child(2) { top: 19.25px; }
.nav-burger span:nth-child(3) { top: 24.5px; }
.nav.is-open .nav-burger span:nth-child(1) { transform: translateY(5.25px) rotate(45deg); }
.nav.is-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-burger span:nth-child(3) { transform: translateY(-5.25px) rotate(-45deg); }
.nav-burger:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 860px) {
  .nav-burger { display: inline-block; }
  .nav.is-open .nav-links { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0;
    padding: 6px var(--pad) 14px; background: #0b0c0e; border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 24px 40px -24px rgba(0,0,0,.6);
    animation: nav-drop .22s ease both; }
  .nav.is-open .nav-links a { padding: 14px 0; font-size: 17px; color: #e8e9ec; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav.is-open .nav-links a:last-child { border-bottom: 0; }
  @keyframes nav-drop { from { opacity: 0; transform: translateY(-6px); } }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .nav.is-open .nav-links { animation: none; }
  .nav-burger span { transition: none; }
}
/* Thème clair (09/10/2026, Romain) : la barre suit le thème — verre clair, encre
   du thème —, comme la page qu'elle surmonte ; le noir de marque reste aux
   bandes noires. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .nav.on-noir { background: rgba(247, 247, 246, .82); color: var(--ink); border-bottom-color: var(--line); }
  :root:not([data-theme="dark"]) .nav .wordmark { color: var(--ink); }
  :root:not([data-theme="dark"]) .nav-links a, :root:not([data-theme="dark"]) .nav-cta .signin { color: var(--muted); }
  :root:not([data-theme="dark"]) .nav-links a:hover, :root:not([data-theme="dark"]) .nav-cta .signin:hover { color: var(--ink); }
  /* Le panneau du burger suit la barre : verre clair, encre du thème. */
  @media (max-width: 860px) {
    :root:not([data-theme="dark"]) .nav.is-open .nav-links { background: #f7f7f6; border-bottom-color: var(--line); box-shadow: 0 24px 40px -28px rgba(22, 24, 29, .35); }
    :root:not([data-theme="dark"]) .nav.is-open .nav-links a { color: var(--ink); border-bottom-color: var(--line); }
  }
}
:root[data-theme="light"] .nav.on-noir { background: rgba(247, 247, 246, .82); color: var(--ink); border-bottom-color: var(--line); }
:root[data-theme="light"] .nav .wordmark { color: var(--ink); }
:root[data-theme="light"] .nav-links a, :root[data-theme="light"] .nav-cta .signin { color: var(--muted); }
:root[data-theme="light"] .nav-links a:hover, :root[data-theme="light"] .nav-cta .signin:hover { color: var(--ink); }
/* Le panneau du burger suit la barre : verre clair, encre du thème. */
@media (max-width: 860px) {
  :root[data-theme="light"] .nav.is-open .nav-links { background: #f7f7f6; border-bottom-color: var(--line); box-shadow: 0 24px 40px -28px rgba(22, 24, 29, .35); }
  :root[data-theme="light"] .nav.is-open .nav-links a { color: var(--ink); border-bottom-color: var(--line); }
}

/* ── Hero : sur la trame (08/10/2026, demande de Romain) ─────────────── */
/* Noir uni du 28/09 au 08/10/2026 (plus de halos ni de lignes en dégradé —
   « c'est ringard ») ; depuis, le fond CLAIR de la donnée, et la trame de l'app
   avec ses faisceaux derrière (backdrop.js) : le hero n'a pas de fond, la page
   le donne. La réplique s'y pose comme l'app sur sa propre trame. */
.on-noir { background: var(--noir); color: var(--on-noir); }
/* `clip` et non `hidden` (09/10/2026) : `hidden` fait du hero un conteneur de
   défilement, et la vitrine y cherchait sa timeline de parallaxe (figée). */
.hero { position: relative; overflow: clip; padding: 112px 0 0; }
.hero .wrap { position: relative; }

/* Positionnement : depuis le 28/09/2026 (demande de Romain), la catégorie est
   le TITRE (h1), sans vert — le néon ne signe plus le titre —, et une seule
   phrase dessous, qui fond le slogan dans la description. Le hero est CENTRÉ
   depuis le 27/09/2026 : sur l'axe de la réplique de l'app, juste en dessous. */
.hero-intro { text-align: center; }
.hero-intro h1 { margin-left: auto; margin-right: auto; }
.hero-intro .hero-cta { justify-content: center; margin-top: 44px; }
.hero h1 { font-size: clamp(38px, 5.4vw, 68px); line-height: 1.04; letter-spacing: -.025em; max-width: 30ch; text-wrap: balance; }
/* Le titre (28/09/2026, demande de Romain) : la catégorie, puis le bénéfice
   — « to stay one step ahead » —, chacun sur sa ligne dès que la place le
   permet ; au téléphone, les deux s'enchaînent. Même titre au dernier appel. */
.t2 { display: block; }
/* La catégorie en SIGNATURE (09/10/2026, Romain) : « B2B AD INTELLIGENCE
   PLATFORM » en Plex SemiBold capitales, un bloc CENTRÉ dans la colonne du
   site — aligné sur la barre du haut, jamais au-delà —, sur deux lignes au
   bureau (« B2B AD INTELLIGENCE » / « PLATFORM »), interligne serré ; « THE »
   en petit, centré au-dessus ; le bénéfice dessous, plus petit ; puis le seul
   bouton. Tout est dans l'axe : c'est ce qui manquait à la ligne pleine
   largeur, « THE » au bord gauche et le reste centré (« désordonné »). Taille
   calculée sur la colonne (10,6 em pour « B2B AD INTELLIGENCE », mesurés), 120
   px au plus ; au téléphone, trois lignes (« INTELLIGENCE », 7 em). Archivo
   Black a été essayée d'abord : une police de plus, la cinquième du site —
   retirée, Plex reste la police des titres. */
.hero-intro { container-type: inline-size; }
.final .wrap { container-type: inline-size; }
#hero-h, #final-h { max-width: none; }
.h-cat { display: block; margin-inline: auto; font-family: var(--heading); font-weight: 600;
  font-size: min(calc((100cqi - 48px) / 10.6), 120px); line-height: .92; letter-spacing: -.02em; text-transform: uppercase; text-align: center; text-wrap: balance; }
.h-the { display: block; font-size: .2em; line-height: 1; letter-spacing: .14em; margin-bottom: .45em; color: var(--muted); }
.on-noir .h-the { color: var(--on-noir-2); }
.h-cat + .t2 { display: block; margin-top: .55em; font-size: clamp(20px, 2.4vw, 32px); line-height: 1.2; letter-spacing: -.01em; color: var(--muted); }
.on-noir .h-cat + .t2 { color: var(--on-noir-2); }
@media (max-width: 700px) { .h-cat { font-size: calc((100cqi - 32px) / 7); } }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.hero-cta .fine { width: 100%; }

/* ── Les régies, entre les boutons et la réplique (27/09/2026) ───────────
   Descendues sous le hero le 28/09 matin, remontées le soir (demande de
   Romain) : la bande sous la démonstration porte désormais la preuve
   sociale. Nommées par leur marque (usage nominatif) ; les trois que l'app
   mesure, sans Meta depuis le 08/10/2026. Une ligne au bureau, deux au
   téléphone. */
.platforms { margin-top: 64px; }

/* ── La preuve sociale (28/09/2026) : une ligne entre deux filets, à la place
   des logos clients de Profound. */
.libs { padding: 44px 0; text-align: center; }
.trusted { display: flex; align-items: center; gap: 24px; margin: 0; font: 400 clamp(16px, 1.7vw, 19px)/1.4 var(--ui); letter-spacing: 0; color: var(--muted); }
.trusted::before, .trusted::after { content: ""; flex: 1; min-width: 24px; height: 1px; background: var(--grid); }
.trusted span { flex: 0 1 auto; max-width: 80%; text-wrap: balance; }
.trusted b { font-weight: 600; color: var(--ink); }

/* ── Une annonce au format de l'app (08/10/2026) : AdEncart.jsx et ses
   styles (webapp/src/styles.css, « .ad-encart », « .li-ad--lib », « .g-ad »,
   « .ms-ad »), recopiés — jetons du site à la place de ceux de l'app. La carte
   est de verre ; l'annonce reste OPAQUE et blanche dans les deux thèmes,
   comme chez sa régie. Le visuel garde son format natif. */
/* Une mosaïque, comme l'onglet Ads de l'app : des colonnes où chaque annonce
   suit la précédente, à sa hauteur — jamais de grand vide sous une annonce
   courte (Romain, 08/10/2026 : « pas de grand vide entre les cards »). */
.ad-mosaic { column-count: 3; column-gap: 14px; }
.ad-mosaic > .ad-encart { break-inside: avoid; margin: 0 0 14px; }
.ad-mosaic-w { container-type: inline-size; }
@container (max-width: 520px) { .ad-mosaic { column-count: 2; } }
/* Plus qu'une colonne (téléphone) : la mosaïque devient une PILE (08/10/2026,
   Romain : « une seule ad perd son sens », puis « harmoniser les modules ») —
   une colonne coupée à hauteur fixe envoyait la deuxième annonce dans une
   colonne cachée et laissait un vide. Trois annonces, le haut de chacune
   lisible, la première devant et en entier (`--k`, posé par `overtPile`,
   script 4, qui réduit aussi la pile d'un bloc pour qu'elle tienne dans sa
   fenêtre, sans rien rogner). Même pile que la vitrine du hero (`.sc-deck`).
   Les cartes y sont opaques : une carte de verre laisserait voir la suivante. */
@container (max-width: 420px) {
  .ad-mosaic { column-count: auto; display: grid; justify-items: center; align-content: start; transform-origin: 50% 0; }
  .ad-mosaic > .ad-encart { grid-area: 1 / 1; width: 250px; max-width: 100%; margin: calc(var(--k, 0) * 78px) 0 0; z-index: calc(var(--k, 0) + 1);
    background: var(--glass-fill), var(--glass-solid); box-shadow: inset 0 1px 0 var(--glass-hi), 0 -6px 16px -10px rgba(22, 24, 29, .3), var(--glass-lift); }
  .ad-mosaic > .ad-encart:nth-child(n+4) { display: none; }
}
/* La fenêtre d'une pile : ni fondu en bas (la pile y tient entière), ni « Show more ». */
.ft-shot.is-pile { -webkit-mask-image: none; mask-image: none; }
.is-pile .rp-more { display: none; }
.ad-encart { position: relative; display: flex; flex-direction: column; padding: 8px; border: 1px solid var(--glass-line); border-radius: 12px;
  background: var(--glass-fill); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-lift); font: 400 12px/1.4 var(--ui); color: var(--x-ink); text-align: left;
  opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .25s ease, transform .25s ease; }
.ad-mosaic.show .ad-encart { opacity: 1; transform: none; transition-duration: .5s; transition-delay: calc(var(--i, 0) * 90ms + 60ms); }
.ad-encart-meta { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 2px 4px 6px; font-size: 11px; white-space: nowrap; color: var(--x-muted); font-variant-numeric: tabular-nums; }
.ad-encart-meta > svg { flex: none; width: 14px; height: 14px; }
.ad-meta-info { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ad-weeks { flex: none; margin-left: -3px; }
.ad-status { flex: none; display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-weight: 600; color: var(--x-ink); }
.ad-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--x-ink); box-sizing: border-box; }
.ad-status.off { color: var(--x-muted); }
.ad-status.off::before { background: transparent; border: 1.5px solid var(--x-muted); }
.ad-encart-ad { position: relative; min-width: 0; }
.li-ad { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(0, 0, 0, .12); border-radius: 10px; background: #fff; color: rgba(0, 0, 0, .9); font-family: var(--ui); container-type: inline-size; }
.li-ad--lib .li-ad-head { display: flex; align-items: center; gap: 3cqw; padding: 4cqw 4cqw 1cqw; margin: 0; }
.li-ad--lib .li-ad-logo { flex: none; width: 14cqw; height: 14cqw; border-radius: 2px; object-fit: contain; background: #fff; }
.li-ad-logo--empty { background: #eef0f2; }
.li-ad-actor { display: flex; flex-direction: column; min-width: 0; }
.li-ad--lib .li-ad-name { font-size: max(11px, 3.5cqw); font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-ad--lib .li-ad-promoted { font-size: max(10px, 3cqw); line-height: 1.3; color: rgba(0, 0, 0, .6); }
.li-ad--lib .li-ad-commentary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 2.5cqw 0 4.5cqw; padding: 0 4cqw; font-size: max(11px, 3.5cqw); line-height: 1.4; }
.li-ad-media { display: block; line-height: 0; }
.li-ad-media img { display: block; width: 100%; height: auto; }
.li-ad-media.is-video { position: relative; container-type: inline-size; }
.li-ad-article { padding: 3.5cqw 4cqw; background: #eef3f8; }
.li-ad--lib .li-ad-headline { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: max(11px, 3.5cqw); font-weight: 600; line-height: 1.35; }
.li-ad-play, .g-ad-play { position: absolute; left: 50%; top: 50%; width: 12cqw; height: 12cqw; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.li-ad-play::after, .g-ad-play::after { content: ""; position: absolute; left: 40%; top: 50%; transform: translateY(-50%); border-style: solid; border-width: 2.5cqw 0 2.5cqw 4cqw; border-color: transparent transparent transparent rgba(0, 0, 0, .8); }
/* La création d'une société fictive tient la place du visuel, au format d'une image LinkedIn (1,91 : 1). */
.li-ad-cr { line-height: normal; }
.li-ad-cr .cr { flex: none; aspect-ratio: 1.91; min-height: 0; border-radius: 0; }
/* Dans une carte LinkedIn, la création suit la LARGEUR de la carte (la carte est
   un conteneur, `cqw`), comme le texte de LinkedIn : large au téléphone, elle ne
   garde pas les corps d'une vignette. Planchers aux tailles de la vignette. */
.li-ad-cr .cr-brand { font-size: max(9px, 3.6cqw); gap: 1.6cqw; }
.li-ad-cr .cr-brand svg { width: max(12px, 4.6cqw); height: max(12px, 4.6cqw); }
.li-ad-cr .cr-h { font-size: max(12px, 5.2cqw); }
.li-ad-cr .cr-cta { font-size: max(7.5px, 3cqw); padding: .8cqw 2.8cqw; }
.li-ad-cr .cr-l { gap: max(4px, 1.6cqw); padding: max(8px, 3.4cqw) 0 max(8px, 3.4cqw) max(10px, 4cqw); }
.li-ad-cr .cr-ui { font-size: max(7.5px, 2.9cqw); padding: 2.6cqw 3cqw 3.2cqw; }
.li-ad-cr .cr-kpi { font-size: max(12px, 4.4cqw); }
.li-ad-cr .cr-ck, .li-ad-cr .cr-av { width: max(9px, 3.4cqw); height: max(9px, 3.4cqw); }
.li-ad-cr .cr-ln { height: max(3.5px, 1.3cqw); }
.li-ad-cr .cr-n { font-size: max(16px, 6.4cqw); }
.li-ad-cr .cr-next { font-size: max(16px, 6cqw); }
.li-ad-cr .cr-page .cr-h { font-size: max(11px, 4.4cqw); }
.li-ad-cr .cr-kick { font-size: max(6.5px, 2.5cqw); }
.g-ad { display: flex; justify-content: center; overflow: hidden; border-radius: 8px; background: #fff; }
.g-ad--image img { display: block; max-width: 100%; height: auto; }
.g-ad--video { flex-direction: column; justify-content: flex-start; }
.g-video-media { position: relative; display: block; width: 100%; overflow: hidden; container-type: inline-size; background: #0f0f0f; }
.g-video-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-video-time { position: absolute; right: 6px; bottom: 6px; padding: 1px 4px; border-radius: 4px; background: rgba(0, 0, 0, .8); color: #fff; font: 500 12px/1.4 Roboto, Arial, sans-serif; }
.g-video-text { padding: 8px 10px 10px; font-family: Roboto, Arial, var(--ui); }
.g-video-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 14px; line-height: 1.35; font-weight: 500; color: #0f0f0f; }
.g-video-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: #606060; }
/* L'annonce texte d'une société fictive : le dessin d'une annonce de recherche Google, tel que ses aperçus la rendent. */
.g-ad--text { justify-content: flex-start; }
.g-txt { width: 100%; padding: 12px 14px 14px; font-family: Roboto, Arial, var(--ui); color: #202124; }
.g-txt-site { display: flex; align-items: center; gap: 8px; }
.g-txt-site img { flex: none; width: 26px; height: 26px; border-radius: 50%; }
.g-txt-site span { display: flex; flex-direction: column; min-width: 0; font-size: 12px; line-height: 1.3; }
.g-txt-site b { font-weight: 400; color: #202124; }
.g-txt-site small { font-size: 11px; color: #4d5156; }
.g-txt-title { margin: 8px 0 4px; font-size: 16px; line-height: 1.3; color: #1a0dab; }
.g-txt-desc { margin: 0; font-size: 12.5px; line-height: 1.45; color: #4d5156; }
.ms-ad { padding: 12px; border-radius: 8px; background: #fff; color: #444; text-align: left; overflow-wrap: anywhere; font-family: 'Segoe UI', var(--ui), sans-serif; }
.ms-ad-site { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ms-ad-fav { flex: none; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: #f3f2ef; border: 1px solid #e5e5e5; }
.ms-ad-fav--empty { display: inline-block; }
.ms-ad-site-text { display: flex; flex-direction: column; min-width: 0; }
.ms-ad-name { font-size: 12px; line-height: 1.3; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-ad-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-size: 11px; line-height: 1.4; }
.ms-ad-label { flex: none; font-weight: 700; color: #444; }
.ms-ad-url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #006d21; }
.ms-ad-title { margin: 6px 0 2px; font-size: 14px; line-height: 1.3; color: #001ba0; }
.ms-ad-desc { margin: 0; font-size: 12px; line-height: 1.45; color: #505050; }
@media (prefers-reduced-motion: reduce) {
  .ad-encart, .ad-mosaic.show .ad-encart { transition: opacity .4s ease; transform: none; transition-delay: 0s; }
}

/* ── Sections de donnée ──────────────────────────────────────────────── */
section.band { padding: 104px 0; }
.sec-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; max-width: 760px; }
.sec-head h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; }
.sec-head p { font-size: 18px; color: var(--muted); max-width: 60ch; text-wrap: pretty; }
.on-noir .sec-head p { color: var(--on-noir-2); }

/* ── La réplique de l'app (24/09/2026) ────────────────────────────────────
   Une copie INTERACTIVE des écrans d'un compte Plus (08/10/2026) : l'index des
   sociétés (CompanyTableLaunch.jsx), l'Overview d'une société
   (overview/CompanyOverview.jsx) et ses annonces (ads/CompanyAdsTab.jsx), la
   galerie et la page d'une liste (ListCard.jsx, WatchlistDetail.jsx),
   Activity (Dashboard.jsx), Ad Library+ (AdLibrary.jsx). Tokens et règles recopiés de webapp/src/styles.css
   sous --x-* ; toute classe est préfixée rp- (la page a déjà ses .tag, .fine…).
   Un écart visible entre la copie et l'app est un bug de la copie.
   `.xt` porte les mêmes jetons sans la fenêtre : les fragments d'interface des
   sections plus bas (28/09/2026) parlent la langue de l'app. */
.rp, .xt {
  --x-bg: #f7f7f6; --x-card: #ffffff; --x-ink: #16181d; --x-muted: #5b6270; --x-grid: rgba(22, 24, 29, .12);
  --x-paper: #f7f7f6; --x-chrome: #ecedeb; --x-accent: #16181d; --x-up: #0a8a56; --x-down: #b3261e; --x-nodata: #9aa0ad;
  --x-link: #2244cc; --x-li: #2967b2; --x-go: #1e8e3e; --x-ms: #f25022;
  --x-act-bg: #d8f3e6; --x-act-bg-hover: #c9eedc; --x-act-ink: #075c3a; --x-act-line: rgba(10, 138, 86, .30);
  --x-brand-bg: #f7f7f6; --x-brand-ink: #16181d; --x-brand-dim: #5b6270; --x-brand-line: rgba(22, 24, 29, .10);
  --x-brand-hover: rgba(22, 24, 29, .05); --x-brand-active: rgba(22, 24, 29, .08);
  /* Trame et verre de l'app (D-89), sans flou dans la fenêtre : sa trame est
     IMMOBILE (CSS), un verre plus couvrant tient lieu du flou de l'app. */
  --x-dot: rgba(22, 24, 29, .075); --x-glass: rgba(255, 255, 255, .74); --x-glass-line: rgba(255, 255, 255, .85);
  --x-glass-hi: rgba(255, 255, 255, .96); --x-lift: 0 1px 2px rgba(22, 24, 29, .05), 0 14px 32px -18px rgba(22, 24, 29, .28);
  --x-shell: rgba(247, 247, 246, .62); --x-side: rgba(247, 247, 246, .5);
}
.rp {
  position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px;
  background: var(--x-bg); color: var(--x-ink); font: 400 14px/1.5 var(--ui);
  box-shadow: 0 48px 90px -56px rgba(11, 12, 14, .55);
}
/* :where() : la remise à zéro ne pèse aucune spécificité — sinon elle écrase le
   rembourrage, la bordure et le fond des composants-boutons. */
:where(.rp, .xt) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
:where(.rp) svg { display: inline-block; vertical-align: middle; }
.rp a { text-decoration: none; }
.rp button:focus-visible, .rp a:focus-visible, .rp select:focus-visible, .rp input:focus-visible { outline: 2px solid var(--x-link); outline-offset: -2px; }
.rp-chrome { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; background: var(--x-chrome); border-bottom: 1px solid var(--x-grid); }
.rp-dots { display: inline-flex; gap: 6px; flex: none; }
.rp-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--x-grid); }
.rp-url { flex: 1; min-width: 0; max-width: 520px; height: 26px; padding: 0 12px; border-radius: 13px; background: var(--x-card); border: 1px solid var(--x-grid); font: 400 12px/24px var(--mono); color: var(--x-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-url b { font-weight: 400; color: var(--x-ink); }
/* Rangée d'en-tête : la recherche à gauche, le décompte et les actions à droite. */
.rp-lt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 16px; }
.rp-lt input[type="search"] { width: 240px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--x-grid); border-radius: 10px; background: var(--x-card); color: var(--x-ink); font: inherit; font-size: 14px; }
.rp-lt input[type="search"]:focus { outline: none; border-color: var(--x-accent); }
.rp-lt input::placeholder { color: var(--x-nodata); }
.rp-acts { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.rp-meta { font-size: 12px; color: var(--x-muted); }
.rp-meta + .rp-acts { margin-left: 0; }
.rp-btn { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--x-grid); border-radius: 10px; background: var(--x-bg); color: var(--x-ink); font-size: 13px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.rp .rp-btn { padding: 6px 12px; border: 1px solid var(--x-grid); border-radius: 10px; background: var(--x-bg); }
.rp .rp-btn:hover:not(.off) { border-color: var(--x-accent); }
.rp .rp-btn.primary { background: var(--x-act-bg); color: var(--x-act-ink); border-color: var(--x-act-line); }
.rp .rp-btn.primary:hover { background: var(--x-act-bg-hover); border-color: var(--x-act-line); }
.rp .rp-btn.on { border-color: var(--x-accent); }
.rp-btn.off { cursor: default; }
.rp-btn select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.rp-btn svg { width: 14px; height: 14px; }
/* Tableaux (CompanyTableLaunch) */
.rp-tcard { overflow-x: auto; background: var(--x-glass); border: 1px solid var(--x-glass-line); border-radius: 16px; box-shadow: inset 0 1px 0 var(--x-glass-hi), var(--x-lift); }
.rp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rp-table th { padding: 10px 10px; border-bottom: 1px solid var(--x-grid); text-align: left; font: 500 11px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--x-muted); white-space: nowrap; }
.rp-table td { padding: 10px 10px; border-bottom: 1px solid var(--x-grid); vertical-align: middle; white-space: nowrap; }
.rp-table tbody tr:last-child td { border-bottom: 0; }
.rp-table tbody tr:hover { background: var(--x-brand-hover); }
.rp-table .ctr { text-align: center; }
.rp-table .num { text-align: right; }
.rp-table .mono { font-family: var(--mono); }
.rp-table .small { font-size: 12px; }
.rp-sort { display: inline-flex; align-items: center; gap: 5px; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.rp .rp-sort { font: inherit; }
.rp-sort:hover, .rp-sort.on { color: var(--x-ink); }
.rp-sort i { font-style: normal; font-size: 9px; }
.rp-thg { display: inline-flex; }
.rp-thg svg { width: 15px; height: 15px; }
.rp-adv { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rp-logo { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; overflow: hidden; background: var(--x-paper); border: 1px solid var(--x-grid); font: 600 12px/1 var(--ui); color: var(--x-muted); }
.rp-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rp-rowname { color: var(--x-ink); font-weight: 500; }
.rp-rowname:hover { text-decoration: underline; }
.rp-pair { display: inline-grid; grid-template-columns: 5.5ch 4.5ch; gap: 6px; align-items: baseline; }
.rp-pair .v { justify-self: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-cd { text-align: left; font: 400 12px var(--mono); white-space: nowrap; }
.rp-d { font-weight: 600; }
.rp-d.up { color: var(--x-up); }
.rp-d.dn { color: var(--x-down); }
.rp-d.na { color: var(--x-nodata); }
.rp-zero { color: var(--x-nodata); }
.rp-na { color: var(--x-nodata); font-style: italic; }
.rp-chip { display: inline-block; margin: 0 4px 4px 0; padding: 2px 8px; border: 1px solid var(--x-grid); border-radius: 999px; background: var(--x-card); font-size: 11px; color: var(--x-muted); white-space: nowrap; }
.rp-pdots { display: inline-flex; align-items: center; min-height: 22px; vertical-align: middle; }
.rp-pdot { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--x-card); border: 1px solid var(--x-grid); box-shadow: 0 0 0 2px var(--x-card); }
.rp-pdot + .rp-pdot { margin-left: -6px; }
.rp-pdot:nth-child(1) { z-index: 3; }
.rp-pdot:nth-child(2) { z-index: 2; }
.rp-pdot:nth-child(3) { z-index: 1; }
.rp-pdot svg { width: 12px; height: 12px; }
/* Fiche société (CompanyLaunch) */
.rp-chead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 8px 0 14px; }
.rp-ctitle { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rp-ctitle .rp-logo { width: 36px; height: 36px; border-radius: 8px; background: var(--x-card); font-size: 15px; }
.rp-ctitle h1 { margin: 0; font: 600 28px/1.15 var(--heading); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Faits de la société DISCRETS (28/09/2026, comme `.cl-chip` dans l'app) : ni
   bordure ni fond, texte gris et plus petit, le rang qui s'éclaire au survol ;
   la variation d'abonnés garde sa couleur, c'est une mesure. Les liens EXTERNES
   (site, page LinkedIn) ont quitté les faits : à droite du nom, juste avant
   Settings (`.rp-cacts`) ; au téléphone, en fin de ligne des faits. */
.rp-cchips { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 24px; }
.rp-cchip { display: inline-flex; align-items: center; gap: 6px; color: var(--x-muted); font-size: 12px; white-space: nowrap; }
.rp-cchip svg { width: 13px; height: 13px; color: currentColor; flex: none; }
/* La fenêtre est plus étroite que l'app : la table prend ce qu'il faut à ses
   trois colonnes, liens compris, et la courbe le reste. */
.rp-pl-dot { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--x-grid); background: var(--x-card); }
.rp-pl-dot svg { width: 14px; height: 14px; }
.rp-panel { display: flex; flex-direction: column; min-width: 0; padding: 16px 20px; background: var(--x-glass); border: 1px solid var(--x-glass-line); border-radius: 14px; box-shadow: inset 0 1px 0 var(--x-glass-hi), var(--x-lift); }
.rp-ph { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.rp-ph h2 { margin: 0; font: 600 15px/1.3 var(--heading); letter-spacing: 0; }
.rp-ph span { margin-left: auto; font-size: 12px; color: var(--x-muted); }
/* PlatformLines : un axe, un trou coupe la courbe, le survol lit la semaine. */
.rp-plines { position: relative; }
.rp-plines svg { display: block; width: 100%; overflow: visible; cursor: crosshair; touch-action: pan-y; }
.rp-ax { font: 400 10px var(--mono); fill: var(--x-muted); }
.rp-gl { stroke: var(--x-grid); stroke-width: 1; }
.rp-guide { stroke: var(--x-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.rp-dot { stroke: var(--x-card); stroke-width: 1.5; }
.rp-tip { position: absolute; top: 8px; z-index: 2; min-width: 170px; padding: 8px 12px; background: var(--x-card); border: 1px solid var(--x-grid); border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .10); font-size: 12px; pointer-events: none; transform: translateX(12px); }
.rp-tip.flip { transform: translateX(calc(-100% - 12px)); }
.rp-tip[hidden] { display: none; }
.rp-tip-w { margin-bottom: 4px; font: 400 11px var(--mono); color: var(--x-muted); }
.rp-tip-r { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; }
.rp-tip-r .mono { font-family: var(--mono); }
.rp-sw { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 2px; }
.rp-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: 12px; color: var(--x-muted); }
.rp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rp-legend .rp-sw { width: 12px; height: 12px; margin: 0; border-radius: 4px; }
.rp-empty { padding: 28px 0; text-align: center; font-size: 13px; color: var(--x-nodata); }
/* Activity (Dashboard.jsx, branche Free), pour les écrans figés du script 8 :
   les onglets de plateforme en cartouches, puis quatre tableaux de
   mouvements — More ads · Fewer ads · Started · Stopped. */
.rp-sub { margin: 4px 0 14px; font-size: 12.5px; color: var(--x-muted); }
@media (max-width: 900px) {
  .rp-lt input[type="search"] { flex: 1 1 100%; width: auto; }
}
@media (max-width: 700px) {
  .rp-dots { display: none; }
  .rp-table [data-pri="3"] { display: none; }
  .rp-table th, .rp-table td { padding-left: 8px; padding-right: 8px; }
  .rp-table th:first-child, .rp-table td:first-child { padding-left: 10px; width: 100%; max-width: 0; }
  .rp-table .rp-adv { gap: 8px; }
  .rp-table .rp-rowname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rp-table .rp-logo { width: 24px; height: 24px; }
  .rp-table th { letter-spacing: 0; }
  .rp-table .th-full { display: none; }
  .rp-pair { gap: 4px; }
  .rp-pair:not(.foll) { grid-template-columns: 5ch 4ch; }
  .rp-platcols .rp-pair { grid-template-columns: auto; }
  .rp-platcols .rp-cd { display: none; }
  .rp-ctitle h1 { font-size: 24px; }
  .rp-acts .th-full { display: none; }
}
.rp-table tr[hidden] { display: none; }

/* Thème sombre : la réplique prend les tokens sombres de l'app (le noir de
   marque pour la coque, les néons pour la tuile vedette). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.rp, .xt) {
    --x-bg: #101114; --x-card: #17181c; --x-ink: #e8e9ec; --x-muted: #9aa1ad; --x-grid: rgba(232, 233, 236, .14);
    --x-paper: #1c1e23; --x-chrome: #0b0c0e; --x-accent: #e8e9ec; --x-up: #2fbf82; --x-down: #e0655c; --x-nodata: #6f7683;
    --x-link: #8aa3ff;
    --x-act-bg: rgba(0, 230, 138, .13); --x-act-bg-hover: rgba(0, 230, 138, .21); --x-act-ink: #00e68a; --x-act-line: rgba(0, 230, 138, .35);
    --x-brand-bg: #0b0c0e; --x-brand-ink: #ffffff; --x-brand-dim: #8a8f98; --x-brand-line: rgba(255, 255, 255, .08);
    --x-brand-hover: rgba(255, 255, 255, .06); --x-brand-active: rgba(255, 255, 255, .08);
    --x-dot: rgba(255, 255, 255, .06); --x-glass: rgba(23, 24, 28, .86); --x-glass-line: rgba(255, 255, 255, .1);
    --x-glass-hi: rgba(255, 255, 255, .06); --x-lift: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 32px -18px rgba(0, 0, 0, .7);
    --x-shell: rgba(11, 12, 14, .62); --x-side: rgba(11, 12, 14, .55);
  }
}
/* ── La réplique, écrans de l'app d'octobre (08/10/2026) ────────────────
   L'en-tête des faits avec la semaine à droite ; l'Overview A7 — une carte
   par plateforme et la table de ses formats, les tuiles A/B tests et Longest
   running, la courbe — ; la colonne New ; la barre d'outils des annonces. */
.rp-newh, .rp-newc { color: var(--x-muted); }
.rp-week { flex: none; gap: 6px; }
.rp .rp-week { padding: 5px 10px; font-size: 12.5px; }
.rp-week svg { width: 13px; height: 13px; }
.rp-week .chev, .rp-fbtn .chev { position: static; width: 10px; height: 10px; color: var(--x-muted); }
.rp-ovgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.rp-ov { min-width: 0; padding: 14px 14px 10px; background: var(--x-glass); border: 1px solid var(--x-glass-line); border-radius: 14px; box-shadow: inset 0 1px 0 var(--x-glass-hi), var(--x-lift); }
.rp-ovh { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rp-ovt { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rp-ovt .rp-pl-dot { width: 24px; height: 24px; }
.rp-ovt .rp-pl-dot svg { width: 13px; height: 13px; }
.rp-ovt b { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; }
.rp-ovt small { display: block; font-size: 11px; color: var(--x-muted); white-space: nowrap; }
.rp-ovn { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.rp-ovn b { font: 400 24px/1 var(--mono); color: var(--x-link); font-variant-numeric: tabular-nums; }
.rp-ovn small { margin-top: 3px; font-size: 11px; color: var(--x-muted); white-space: nowrap; }
.rp-ov-none { padding: 6px 0 8px; font-size: 12px; color: var(--x-nodata); }
.rp-ov.is-empty .rp-ovh { margin-bottom: 4px; }
.rp-ovtable { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.rp-ovtable th { padding: 5px 4px; border-bottom: 1px solid var(--x-grid); text-align: left; font: 500 9.5px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--x-muted); }
.rp-ovtable td { padding: 4px 4px; border-bottom: 1px solid var(--x-grid); vertical-align: baseline; }
.rp-ovtable tr:last-child td { border-bottom: 0; }
.rp-ovtable .num { text-align: right; white-space: nowrap; font-family: var(--mono); }
.rp-ovtable tr.tot td { font-weight: 600; }
.rp-live { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 5px; }
.rp-live .rp-d { font-size: 10.5px; }
.rp-nl { font: inherit; color: var(--x-link); }
.rp .rp-lnk, .xt .rp-lnk { color: var(--x-link); }
.rp .rp-lnk:hover { text-decoration: underline; text-underline-offset: 2px; }
.rp-nl.rp-zero { color: var(--x-nodata); }
/* Un nombre qui ne mène nulle part n'a pas la couleur d'un lien. */
span.rp-nl:not(.rp-zero):not(.rp-lnk) { color: var(--x-ink); }
.rp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
/* La fiche tient dans la fenêtre sans défiler (08/10/2026, demande de Romain) :
   tests A/B, record de diffusion et courbe des semaines côte à côte. */
.rp-tiles.rp-tiles3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rp-tiles3 .rp-panel { padding: 12px 14px; }
.rp-tiles3 .rp-chart { margin-top: 0; }
.rp-tiles3 .rp-legend { margin-top: 2px; font-size: 11px; }
.rp-chead + .rp-cline { margin: -6px 0 14px; font-size: 12.5px; }
.rp-ovtable tr.oth td:first-child { color: var(--x-muted); }
.rp .rp-mi.off { opacity: .45; cursor: default; }
.rp .rp-mi.off:hover { background: none; }
.rp-tile { gap: 8px; }
.rp-tile .rp-ph span { display: inline-flex; align-items: center; gap: 5px; }
.rp-tile .rp-ph svg { width: 12px; height: 12px; }
.rp-bar { display: grid; grid-template-columns: 64px minmax(0, 1fr) 36px; align-items: center; gap: 10px; font-size: 12px; }
.rp-bar-k { display: inline-flex; align-items: center; color: var(--x-muted); }
.rp-bar-k svg { width: 14px; height: 14px; }
.rp-bar-t { height: 8px; border-radius: 4px; background: var(--x-grid); overflow: hidden; }
.rp-bar-t i { display: block; height: 100%; border-radius: 4px; }
.rp-bar-v { text-align: right; color: var(--x-link); }
.rp-tile-n { margin-top: 2px; font-size: 11.5px; color: var(--x-muted); }
.rp-chart { margin-top: 12px; }
.rp-adbar { gap: 8px; }
.rp-adbar .rp-acts { margin-left: auto; }
.rp .rp-fbtn b { font-weight: 600; }
/* Les menus de la barre des annonces (View · Platforms · Formats). */
.rp-dd { position: relative; display: inline-flex; }
.rp-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; display: flex; flex-direction: column; min-width: 210px; padding: 4px;
  border: 1px solid var(--x-grid); border-radius: 12px; background: var(--x-card); box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .28); }
.rp .rp-mi { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; color: var(--x-ink); white-space: nowrap; }
.rp .rp-mi:hover { background: var(--x-brand-hover); }
.rp .rp-mi.on { font-weight: 600; background: var(--x-brand-active); }
.rp-mi > span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.rp-mi svg { width: 13px; height: 13px; }
.rp-mi .n { font: 400 11.5px/1 var(--mono); color: var(--x-muted); }
.rp-fbtn .rp-fg + b { margin-left: 4px; }
/* Les vraies annonces de Figma : leur visuel, leur texte, à leur hauteur. */
.rp-more { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 12px; color: var(--x-muted); }
@media (max-width: 900px) {
  .rp-ovgrid, .rp-tiles, .rp-tiles.rp-tiles3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .rp-table [data-pri="2"] { display: none; }
}
/* Réduit (zoom .8), l'écran d'un chapitre en vaut 800 : trois cartes de front,
   jusqu'à ce que la page elle-même devienne étroite. */
@container (max-width: 600px) {
  .fx-win .ft-shot .rp-ovgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-win .ft-shot .rp-ov[data-pf="li"] { grid-column: 1 / -1; }
}
@container (max-width: 560px) {
  .ft-shot .rp-ovgrid, .ft-shot .rp-tiles, .ft-shot .rp-tiles.rp-tiles3 { grid-template-columns: minmax(0, 1fr); }
  /* Les trois cartes de plateforme en PILE, comme dans la vitrine du hero :
     Google Ads et Microsoft Ads montrent leur en-tête (régie, volume),
     LinkedIn Ads sa table entière (08/10/2026). */
  .ft-screen .ft-shot .rp-ovgrid { grid-template-columns: minmax(0, 1fr); }
  .ft-screen .ft-shot .rp-ovgrid > .rp-ov { grid-area: 1 / 1; margin-top: calc(var(--k, 0) * 66px); z-index: calc(var(--k, 0) + 1); background: var(--x-card); }
  .ft-shot .rp-ov[data-pf="go"] { --k: 0; }
  .ft-shot .rp-ov[data-pf="ms"] { --k: 1; }
  .ft-shot .rp-ov[data-pf="li"] { --k: 2; }
  /* Les barres d'outils sans retour à la ligne inutile : les menus disent leur
     valeur seule (« Library », « All formats »), la semaine sa date, le compte
     d'une liste part ; la recherche d'Ad Library+ prend sa ligne. */
  .ft-shot .rp-fl, .ft-shot .rp-meta { display: none; }
  .ft-shot .rp-fx { display: inline; }
  .ft-shot .rp-lsearch { flex: 1 1 100%; width: auto; }
}
.rp-fx { display: none; }

/* ── Rangées de cases à filet partagé (28/09/2026) ───────────────────────
   La « grille visible » que Romain retient de Profound (DA-30) : des cases
   collées, séparées d'un filet — le fond du conteneur est la couleur du
   filet, l'écart d'un pixel le dessine, quel que soit le nombre de rangées.
   Une rangée est toujours PLEINE (4, 3 ou 2 cases, ou une seule colonne) :
   une case manquante se lirait comme un aplat gris. */
.cells { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cells > * { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 26px 28px 28px; background: var(--card); }
.cells-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.on-noir .cells { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .12); }
.on-noir .cells > * { background: var(--noir); }
.on-noir .cells p { color: var(--on-noir-2); }
.on-noir .more { color: #8aa3ff; }
/* Les fragments d'interface d'une bande NOIRE (« Measured, never guessed. »,
   sombre depuis le 08/10/2026) prennent les jetons sombres de l'app, dans les
   deux thèmes : une carte blanche sur le noir y ferait un trou. */
.on-noir .xt {
  --x-bg: #101114; --x-card: #17181c; --x-ink: #e8e9ec; --x-muted: #9aa1ad; --x-grid: rgba(232, 233, 236, .14);
  --x-paper: #1c1e23; --x-chrome: #0b0c0e; --x-accent: #e8e9ec; --x-up: #2fbf82; --x-down: #e0655c; --x-nodata: #6f7683;
  --x-link: #8aa3ff;
  color: var(--x-ink);
}
.cells h3 { font-size: 19px; line-height: 1.25; letter-spacing: -.01em; }
.cells p { color: var(--muted); font-size: 15px; }
.cells h3 + p { margin-top: 8px; }
.more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px; font-size: 14.5px; font-weight: 600; color: var(--a-blue); text-decoration: none; }
.more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Les trois chapitres des fonctions (28/09/2026) ──────────────────────
   Un chapitre = un intitulé, deux ou trois fonctions, un grand visuel ; le
   visuel change de côté d'un chapitre à l'autre. Au téléphone, le texte
   puis le visuel. */
.fx { display: flex; flex-direction: column; }
.fx-ch { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line-soft); }
.fx-ch:first-child { padding-top: 8px; border-top: 0; }
.fx-ch.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.fx-ch.rev .fx-text { order: 2; }
.fx-k { font: 600 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--a-violet); }
.fx-text h3 { margin-top: 12px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.12; letter-spacing: -.02em; }
.fx-lede { margin-top: 12px; font-size: 16.5px; color: var(--muted); }
.fx-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; }
.fx-list li { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-top: 1px solid var(--line); }
.fx-list b { font: 600 15.5px/1.3 var(--heading); }
.fx-list span { font-size: 14.5px; color: var(--muted); }
/* Chaque point se replie (08/10/2026, Romain : « réduire le texte directement
   visible ») : le titre reste, la description s'ouvre au clic sur la ligne,
   signalée par un « + » cerclé qui pivote en « × », le geste de la FAQ.
   `<details>` : clavier et lecteurs d'écran sans script. */
.fx-list li:has(> .fx-more) { padding: 0; }
.fx-more summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.fx-more summary::-webkit-details-marker { display: none; }
.fx-more summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 6px; }
.fx-i { position: relative; flex: none; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); transition: transform .2s ease, border-color .2s, color .2s; }
.fx-i::before, .fx-i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%); }
.fx-i::after { transform: translate(-50%, -50%) rotate(90deg); }
.fx-more summary:hover .fx-i { border-color: var(--ink); color: var(--ink); }
.fx-more[open] .fx-i { transform: rotate(45deg); color: var(--ink); }
.fx-more p { margin: 0; padding: 0 38px 14px 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
/* L'ouverture glisse là où le navigateur sait animer une hauteur `auto`. */
.fx-more { interpolate-size: allow-keywords; }
.fx-more::details-content { height: 0; overflow: clip; transition: height .25s ease, content-visibility .25s allow-discrete; }
.fx-more[open]::details-content { height: auto; }
@media (prefers-reduced-motion: reduce) { .fx-more::details-content, .fx-i { transition: none; } }
/* Les cases de « Measured, never guessed » (08/10/2026, « ici aussi ») : le
   même volet, sous le fragment ; sur le noir, l'icône prend les tons du noir. */
.cells .fx-more summary { padding: 0; }
.cells .fx-more summary h3 { margin: 0; }
.cells .fx-more p { padding: 8px 38px 0 0; }
.cells .fx-more .more { margin-top: 0; padding-top: 12px; }
.on-noir .fx-i { border-color: rgba(255, 255, 255, .22); color: var(--on-noir-dim); }
.on-noir .fx-more summary:hover .fx-i, .on-noir .fx-more[open] .fx-i { border-color: var(--on-noir); color: var(--on-noir); }
.on-noir .fx-more summary:focus-visible { outline-color: var(--on-noir); }
.fx-vis { min-width: 0; margin: 0; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--x-paper); color: var(--x-ink); box-shadow: 0 48px 90px -60px rgba(11, 12, 14, .5); }
.fx-vis figcaption { margin-top: 12px; font: 400 12px/1.5 var(--mono); color: var(--x-muted); }
.fx-vis button { cursor: default; }

/* ── Pièces des créations fictives : lecture, durée, points du carrousel
   (noms hérités de la première vitrine Ad Library+, 28/09/2026). */
.lb-play { position: absolute; top: 42%; left: 50%; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #16181d; box-shadow: 0 4px 14px rgba(22, 24, 29, .18); transform: translate(-50%, -50%); }
.lb-play svg { margin-left: 2px; }
.lb-len { position: absolute; top: 8px; right: 8px; padding: 1px 6px; border-radius: 4px; background: rgba(22, 24, 29, .55); color: #fff; font: 500 10px var(--mono); }
.lb-dots { position: absolute; top: 10px; right: 10px; display: inline-flex; gap: 4px; }
.lb-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(22, 24, 29, .25); }
.lb-dots i.on { background: #16181d; }
/* ── Les créations des sociétés fictives (08/10/2026, Romain : « ça ne
   ressemble pas à de vrais ads ») : chaque marque a sa couleur, son accent,
   son pictogramme et son produit (KIT, script 4), et une annonce est composée
   comme une vraie création selon son format — image (l'accroche, la capture
   du produit qui déborde, le bouton), vidéo (le produit en démonstration, la
   légende, la lecture), carrousel (la première carte, la suivante qui
   dépasse), document (la couverture du rapport). Couleurs de la marque, hors
   des jetons du thème : ce sont les visuels des autres. */
.cr { position: relative; flex: 1; min-height: 92px; overflow: hidden; border-radius: 8px; background: var(--cr-bg); color: var(--cr-ink); font-family: var(--ui); letter-spacing: 0; text-align: left; }
.cr-brand { display: inline-flex; align-items: center; gap: 4px; font: 700 9px/1 var(--ui); letter-spacing: -.01em; white-space: nowrap; }
.cr-brand svg { flex: none; width: 12px; height: 12px; }
.cr-h { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font: 800 12.5px/1.08 var(--ui); letter-spacing: -.02em; }
.cr-h em { font-style: normal; color: var(--cr-ac); }
.cr-cta { align-self: flex-start; margin-top: auto; padding: 2px 7px; border-radius: 999px; background: var(--cr-ac); color: var(--cr-on); font: 700 7.5px/1.35 var(--ui); white-space: nowrap; }
.cr.img { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 6px; }
.cr.img .cr-h { -webkit-line-clamp: 4; font-size: 12px; }
.cr-l { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px 0 8px 10px; }
.cr-r { align-self: end; min-width: 0; padding-top: 16px; }
/* La capture du produit : une fenêtre blanche, comme dans les vraies créations SaaS. */
.cr-ui { position: relative; border-radius: 7px 0 0 0; background: #fff; color: #16181d; padding: 7px 8px 9px; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .5); font: 700 7.5px/1.3 var(--ui); white-space: nowrap; overflow: hidden; }
.cr-ui b { display: block; font-weight: 700; }
.cr-ui svg { display: block; width: 100%; height: auto; margin-top: 4px; }
.cr-mut { color: #8a909b; font-weight: 500; }
.cr-kpi { font: 800 12px/1.1 var(--ui); letter-spacing: -.02em; }
.cr-row { display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.cr-ln { height: 3.5px; border-radius: 2px; background: #e6e8ee; }
.cr-ck { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--cr-mk); }
.cr-ck::after { content: ""; position: absolute; left: 3px; top: 1.5px; width: 2px; height: 4px; border: solid #fff; border-width: 0 1.4px 1.4px 0; transform: rotate(45deg); }
.cr-av { flex: none; width: 11px; height: 11px; border-radius: 50%; }
.cr-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 3px; }
.cr-cols i { display: block; height: 11px; margin-top: 3px; border-radius: 3px; background: #f1f3f7; border-left: 2px solid var(--cr-mk); }
.cr-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-top: 4px; }
.cr-cal i { aspect-ratio: 1; border-radius: 2px; background: #eef0f4; }
.cr-cal i.on { background: var(--cr-mk); }
/* Vidéo : un carton titre — la marque, l'accroche, la lecture, la barre de progression. */
.cr.vid .cr-l { max-width: 72%; padding-bottom: 14px; }
.cr.vid .cr-h { font-size: 13px; -webkit-line-clamp: 3; }
.cr.vid .lb-play { top: auto; bottom: 10px; left: auto; right: 10px; transform: none; }
.cr-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .25); }
.cr-bar i { display: block; width: 34%; height: 100%; background: var(--cr-ac); }
/* Carrousel : la première carte, et la suivante qui dépasse. */
.cr.car { display: flex; }
.cr.car .cr-l { flex: 0 0 78%; padding-right: 10px; }
.cr-n { font: 800 16px/1 var(--ui); letter-spacing: -.03em; color: var(--cr-ac); }
.cr-next { flex: 1; display: grid; place-items: center; margin: 14px 0; border-radius: 7px 0 0 7px; background: var(--cr-ac); color: var(--cr-on); font: 800 16px/1 var(--ui); }
.cr .lb-dots i { background: var(--cr-ink); opacity: .3; }
.cr .lb-dots i.on { background: var(--cr-ink); opacity: 1; }
/* Document : la couverture du rapport, la page qui sort du cadre. */
.cr.doc { display: flex; padding: 10px 0 0 7%; }
.cr-page { display: flex; flex-direction: column; gap: 5px; width: 47%; min-height: 128%; padding: 0 11px 10px; border-top: 5px solid var(--cr-mk); border-radius: 3px 3px 0 0; background: #fff; color: #14161b; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5); }
.cr-kick { margin-top: 2px; font: 700 6.5px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #6b7280; }
.cr-page .cr-h { font-size: 11px; -webkit-line-clamp: 4; }
.cr-page .cr-h em { color: inherit; }
.cr-page .cr-brand { margin-top: 8px; color: #14161b; }
/* ── Ad Library+ du chapitre 4 (script 9, 08/10/2026) : la fenêtre des
   écrans, la barre de l'onglet Ads (`overtLib`, script 4), et un pointeur
   posé dans la fenêtre (`.rp`), hors du `zoom` de l'écran. */
.rp-lsearch { width: 200px; gap: 8px; color: var(--x-muted); font-weight: 400; }
.rp-lsearch svg { flex: none; width: 14px; height: 14px; }
.rp-lsearch b { flex: 1; min-width: 0; font-weight: 600; color: var(--x-ink); }
.rp-lsearch.on { border-color: var(--x-accent); }
.rp-lph { color: var(--x-nodata); }
.rp-lx { color: var(--x-muted); font-size: 14px; line-height: 1; }
.rp-lib .is-pressed { transform: scale(.95); box-shadow: 0 0 0 3px rgba(22, 24, 29, .10); }
.rp-lib .rp-btn, .rp-lib .rp-mi { transition: transform .15s ease, box-shadow .2s; }
@container (max-width: 560px) { .rp-dd-x { display: none; } }
.lb-cursor { position: absolute; top: 0; left: 0; z-index: 30; pointer-events: none; opacity: 0; transition: transform .75s cubic-bezier(.3, .7, .2, 1), opacity .3s; filter: drop-shadow(0 2px 4px rgba(22, 24, 29, .25)); }
.lb-cursor.on { opacity: 1; }
.lb-cursor svg { display: block; transition: transform .12s ease; transform-origin: 4px 3px; }
.lb-cursor.down svg { transform: scale(.82); }
/* L'onglet Ads d'une fiche, dans les écrans figés : Overview · Ads sur la
   ligne du nom, les vues en cartouches, les deux filtres. */
.rp-fbtn { gap: 6px; }
.rp-fg { display: inline-flex; gap: 3px; }
.rp-fg svg { width: 13px; height: 13px; }
.rp-fbtn .chev { position: static; width: 10px; height: 10px; color: var(--x-muted); }

/* ── En chiffres (08/10/2026, d'après Solve) : une ligne par chiffre, le
   libellé à gauche, la valeur mesurée à droite, en mono ; le « + » au vert
   de la marque, sur le noir seulement. */
.nums-note { margin-top: 18px; font: 400 12px/1.5 var(--mono); color: var(--on-noir-dim); }
/* La bande tient dans UN écran (09/10/2026, Romain : « la partie in numbers
   doit tenir sur tout l'écran en même temps, sur desktop comme mobile ») :
   elle prend la hauteur de l'écran sous la barre (64 px), et son contenu —
   marges, titre, lignes, chiffres — se règle sur cette hauteur (`svh` : la
   plus petite, barres du navigateur affichées) autant que sur la largeur. */
#scale { display: flex; flex-direction: column; justify-content: center; min-height: calc(100svh - 64px); padding-block: clamp(20px, 5svh, 72px); }
#scale > .wrap { width: 100%; }
#scale .sec-head { gap: clamp(8px, 1.4svh, 16px); margin-bottom: clamp(14px, 3.4svh, 40px); }
#scale .sec-head h2 { font-size: clamp(24px, min(4vw, 5svh), 46px); }
#scale .nums-note { margin-top: clamp(8px, 1.6svh, 18px); }
.ft-screen { margin: 0; container-type: inline-size; }
.ft-screen .rp { height: 500px; }
/* Les écrans des chapitres des fonctions montrent une PAGE entière (une fiche,
   ses annonces, une liste) : réduits, ils en montrent davantage — la fiche
   garde ses trois cartes de front et laisse voir ses tuiles. */
.fx-win .rp { height: 540px; }
.fx-win .ft-shot { zoom: .8; height: calc((100% - 42px) / .8); }
.ft-shot { height: calc(100% - 42px); overflow: hidden; padding: 16px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent); mask-image: linear-gradient(to bottom, #000 88%, transparent); }
.ft-screen figcaption { margin-top: 12px; font: 400 12px/1.5 var(--mono); color: var(--muted); }
/* L'écran est plus étroit que la fenêtre du hero : il garde les colonnes de
   chiffres et lâche ce qui ne tient pas (pays, date de mise à jour,
   libellés de colonne à côté du logo). */
.ft-shot .rp-table [data-pri="3"], .ft-shot .rp-table .th-full { display: none; }
.ft-shot .rp-lt input[type="search"] { width: 190px; }
@container (max-width: 560px) {
  /* L'en-tête d'une fiche garde le nom et ses onglets ; Settings, inerte ici, part. */
  .ft-shot .rp-ctitle h1 { font-size: 22px; }
}

/* Ce qui vend Plus (ex-Pro, D-97) : l'aura, le métal, le pastel. L'aura est
   un FAISCEAU d'aube qui traverse la carte en diagonale, comme ceux du fond
   (09/10/2026, Romain : « on a l'impression de taches colorées » — quatre
   halos ronds et flous, aux coins) : le long du faisceau, le ciel, la
   lavande, le rose ; en travers, un fondu (masque). Une brume très légère
   des mêmes couleurs teinte toute la carte. */
.aura { position: relative; isolation: isolate; overflow: hidden; border: 1px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--pro-line) border-box; }
.aura::before, .aura::after { content: ""; position: absolute; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--dawn-sky) 0%, var(--dawn-lav) 38%, var(--dawn-pink) 68%, var(--dawn-lav) 100%); }
.aura::after { inset: 0; opacity: calc(var(--aura-o) * .32); }
.aura::before { inset: -10% -40%; opacity: var(--aura-o);
  -webkit-mask-image: linear-gradient(112deg, transparent 30%, #000 46%, #000 54%, transparent 70%);
  mask-image: linear-gradient(112deg, transparent 30%, #000 46%, #000 54%, transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  .aura::before { animation: aura-drift 22s ease-in-out infinite alternate; }
  @keyframes aura-drift { from { transform: translate3d(-12%, 0, 0); } to { transform: translate3d(12%, 0, 0); } }
}
.pro-badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 8px; border-radius: 999px;
  font: 500 11.5px/1 var(--mono); color: var(--pastel-ink); background: var(--pastel); border: 1px solid var(--pastel-line); align-self: flex-start; }
.pro-badge svg { width: 10px; height: 10px; opacity: .7; }

/* Tarifs (08/10/2026) : les deux cartes de la page Plans de l'app, alignées
   ligne à ligne — Free en verre, Plus en aura (ce qui vend Plus porte le
   patchwork, D-97) —, puis le bandeau Custom. Le dessin d'un forfait est la
   trame de l'app, un point par société : 5 allumés pour Free, 25 pour Plus. */
:root { --plus-dot-1: #3f86ee; --plus-dot-2: #7c5ff0; --plus-dot-3: #e0559a; --plus-dot-4: #8a5ad8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --plus-dot-1: #8fbaf8; --plus-dot-2: #b3a0fb; --plus-dot-3: #f59ac0; --plus-dot-4: #c3a3f5; }
}
.pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { position: relative; border: 1px solid var(--line); border-radius: 16px; padding: 28px; background: var(--card); display: flex; flex-direction: column; gap: 18px; }
.plan-top { display: flex; align-items: flex-start; gap: 16px; }
.plan-mark { flex: none; color: var(--ink); }
.plan-mark .on { fill: currentColor; }
.plan-mark .off { fill: var(--grid); }
.plan-name { display: flex; align-items: center; gap: 10px; font-size: 24px; line-height: 1.15; }
.plan-name .pro-badge { font-size: 11px; }
.plan-pitch { margin-top: 4px; color: var(--muted); font-size: 15px; }
.price { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.price .v { font: 600 48px/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price .u { color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.plan-vol { display: flex; flex-direction: column; gap: 6px; min-height: 76px; }
.plan-vol-k { font: 500 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.plan-vol-row { display: flex; align-items: center; gap: 14px; }
.plan-vol-fixed { font: 600 22px/1 var(--mono); }
.plan-vol-num { width: 84px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: 600 16px/1 var(--mono); }
.plan-vol-num:focus { outline: 2px solid var(--a-violet); outline-offset: 1px; }
.plan-vol-range { flex: 1; min-width: 0; accent-color: var(--a-violet); }
.plan-vol-note { font-size: 13px; color: var(--muted); }
.plan-rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.plan-rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.plan-rows li:first-child { border-top-color: var(--line); }
.plan-row-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.plan-row-t b { font: 600 15px/1.3 var(--heading); }
.plan-row-t span { font-size: 13.5px; color: var(--muted); }
.plan-pf { flex: none; display: inline-flex; gap: 5px; }
.plan-pf svg { width: 15px; height: 15px; }
.plan-k { margin-top: 2px; font: 600 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.plan-also li { padding: 8px 0; }
.plan .btn { margin-top: auto; width: 100%; }
/* Les deux cartes alignées LIGNE À LIGNE, comme dans l'app : leurs sept
   blocs (en-tête, prix, volume, lignes, intitulé, fonctions, bouton) partagent
   les rangées de la grille. */
@supports (grid-template-rows: subgrid) {
  .plan { display: grid; grid-template-rows: subgrid; grid-row: span 7; align-content: start; }
  .plan .btn { align-self: end; }
}
.plan.aura { border-color: transparent; }
.plan.aura .plan-k { color: var(--a-violet); }
.custom { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) auto; align-items: center; gap: 20px 32px; margin-top: 16px; padding: 22px 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.custom-head h3 { font-size: 20px; }
.custom-head p { margin-top: 4px; font-size: 14.5px; color: var(--muted); }
.custom-rows { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; }
.custom-rows li { display: flex; flex-direction: column; gap: 2px; }
.custom-rows b { font: 600 14.5px/1.3 var(--heading); }
.custom-rows span { font-size: 13px; color: var(--muted); }
.pricing-note { margin-top: 18px; font-size: 13px; color: var(--muted); }
.pricing-note a { color: var(--a-blue); }

/* ── Le verre des bandes claires (08/10/2026, D-89 de l'app) ──────────────
   La trame passe derrière les bandes claires ; ce qui s'y pose devient du
   verre — une seule épaisseur : dans un visuel de verre, les cartes ne sont
   plus qu'un filet. Restent PLEINS : les fenêtres de l'app (elles ont leur
   propre trame), la grille de « Measured, never guessed. » (son cadre est
   peint sur un fond opaque), les annonces reproduites, les auras. */
.fx-vis, .plan:not(.aura), .custom, .fx-also {
  background: var(--glass-flat); border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-lift);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.plan:not(.aura) { background: var(--glass-fill); }
.fx-vis .rp-panel { background: transparent; border-color: var(--x-grid); box-shadow: none; }
@media (prefers-reduced-transparency: reduce) {
  .fx-vis, .plan:not(.aura), .custom, .fx-also { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fx-vis, .plan:not(.aura), .custom, .fx-also { background: var(--glass-solid); }
}

/* L'offre Custom en fenêtre (script 11) : un formulaire sur le fond de la
   donnée, la carte opaque — on y lit et on y écrit. */
.cm { width: min(640px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink); box-shadow: 0 48px 120px -40px rgba(0, 0, 0, .55); overflow: hidden; }
@supports (height: 100dvh) { .cm { max-height: calc(100dvh - 32px); } }
.cm[open] { display: flex; flex-direction: column; animation: xm-in .24s cubic-bezier(.2, .75, .2, 1); }
.cm::backdrop { background: rgba(5, 6, 8, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@media (prefers-reduced-motion: reduce) { .cm[open] { animation: none; } }
.cm-in { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.cm-head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 24px; border-bottom: 1px solid var(--line); }
.cm-head h2 { font-size: 18px; letter-spacing: -.01em; }
.cm-x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.cm-x:hover { background: var(--line-soft); color: var(--ink); }
.cm-x svg { width: 18px; height: 18px; }
.cm-form { display: flex; flex-direction: column; gap: 14px; padding: 20px 24px 22px; }
.cm-lede { font-size: 14.5px; color: var(--muted); }
.cm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.cm-wide { grid-column: 1 / -1; }
.cm-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cm-f > span, .cm-pf legend { font-size: 13px; color: var(--muted); }
.cm-f i { font-style: normal; opacity: .8; }
.cm-f input, .cm-f textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: 400 15px/1.4 var(--ui); }
.cm-f textarea { resize: vertical; min-height: 76px; }
.cm-f input:focus, .cm-f textarea:focus { outline: 2px solid var(--a-violet); outline-offset: 0; border-color: transparent; }
.cm-f input[aria-invalid="true"] { border-color: #b3261e; }
.cm-pf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0; padding: 0; border: 0; }
.cm-pf legend { float: left; width: 100%; margin-bottom: 6px; padding: 0; }
.cm-chk { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; cursor: pointer; }
.cm-chk svg { width: 16px; height: 16px; }
.cm-chk input { width: 16px; height: 16px; margin: 0; accent-color: var(--a-violet); }
.cm-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cm-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 4px; }
.cm-foot .btn { flex: none; }
.cm-foot .btn[disabled] { opacity: .55; cursor: default; }
.cm-msg { flex: 1 1 220px; font-size: 13px; color: var(--muted); }
.cm-msg.err { color: #b3261e; }
.cm-msg a { color: var(--a-blue); }
.cm-fine { font-size: 12.5px; color: var(--muted); }
.cm-fine a { color: var(--a-blue); }
.cm-sent { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px 24px; }
.cm-sent[hidden] { display: none; }
.cm-sent-t { font: 600 22px/1.2 var(--heading); }
.cm-sent p:not(.cm-sent-t) { color: var(--muted); }
.cm-sent .btn { margin-top: 8px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cm-f input[aria-invalid="true"] { border-color: #e0655c; }
  :root:not([data-theme="light"]) .cm-msg.err { color: #e0655c; }
}
@media (max-width: 560px) {
  .cm-grid { grid-template-columns: minmax(0, 1fr); }
  .cm-form { padding: 18px 18px 20px; }
}

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 300px 1fr; gap: 48px; }
.faq-side p { color: var(--muted); margin-top: 14px; }
.faq-side a { color: var(--a-blue); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font: 600 17px/1.35 var(--heading); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 20px/1 var(--mono); color: var(--muted); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 0 22px; color: var(--muted); max-width: 72ch; display: flex; flex-direction: column; gap: 10px; }
.faq .a a { color: var(--a-blue); }
.faq .a b { color: var(--ink); font-weight: 600; }

/* Dernier appel */
.final { position: relative; overflow: hidden; padding: 112px 0 120px; text-align: center; }
.final h2 { font-size: clamp(34px, 5vw, 60px); line-height: 1.04; max-width: 30ch; margin: 18px auto 0; text-wrap: balance; }
/* Le dernier appel reprend le hero : le titre, puis les boutons — ni phrase
   d'introduction ni petite ligne (09/10/2026, Romain). */
.final .hero-cta { justify-content: center; margin-top: 44px; }
/* Au téléphone, les deux l'un sous l'autre, chacun à sa largeur : côte à côte,
   le bouton ouvert ferait passer « Log in » à la ligne. */
@media (max-width: 560px) { .final .hero-cta { flex-direction: column; } .final .hero-cta .btn { width: auto; } }

/* Pied (10/10/2026, Romain, d'après celui de Semrush : « un Overt en gros tout
   en bas, et le CTA à gauche — pas le champ See their ads, un CTA classique
   comme Start free ») : l'appel à gauche, les trois colonnes de liens à droite,
   la ligne légale, puis le WORDMARK sur toute la largeur — Bruno Ace, le seul
   usage permis de cette police, aux couleurs de l'aube du faisceau. */
footer { background: var(--noir); color: var(--on-noir-2); padding: 72px 0 clamp(14px, 2vw, 28px); font-size: 14px; overflow: hidden; }
.foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; align-items: start; }
.foot-t { margin: 0; max-width: 16ch; font: 600 clamp(28px, 3vw, 40px)/1.05 var(--heading); letter-spacing: -.02em; text-transform: uppercase; color: #fff; }
.foot-sub { margin: 14px 0 0; font-size: 15px; color: var(--on-noir-2); }
.foot-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; margin-top: 26px; padding: 0 18px 0 20px; border-radius: 11px;
  background: #fff; color: #16181d; font: 600 15px/1 var(--ui); text-decoration: none; }
.foot-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.foot-btn:hover { opacity: .9; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot h4 { margin: 0 0 12px; font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-noir-dim); }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.foot-cols a { text-decoration: none; color: var(--on-noir-2); }
.foot-cols a:hover { color: #fff; }
/* Le wordmark : la largeur de l'écran (1 600 px au plus), posé sur le bord bas. */
.foot-mark { display: block; width: min(100% - 2 * var(--pad), 1600px); margin: 56px auto 0; text-decoration: none; text-align: center;
  font: 400 calc(min(100vw - 2 * var(--pad), 1600px) / 3.8)/.74 var(--logo); letter-spacing: .02em; }
.foot-mark span { display: inline-block; padding-top: .06em;
  background: linear-gradient(100deg, #8cbef8 0%, #ac9ef0 48%, #ff96b2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); font: 400 12px/1.5 var(--mono); color: var(--on-noir-dim); }

/* ── Adaptation ──────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .custom { grid-template-columns: minmax(0, 1fr) auto; }
  .custom-rows { grid-column: 1 / -1; grid-row: 2; }
}
/* ── La grille (28/09/2026, demande de Romain, d'après Profound) ─────────
   Des lignes discrètes qui disent la structure : deux RAILS verticaux aux
   bords de la colonne (1 180 px — 24 px en dehors du contenu, que le texte
   ne touche jamais) et des FILETS pleine largeur aux jonctions des sections.
   Comme chez Profound (relevé sur sa page) : les rails commencent sous le
   hero, passent DERRIÈRE le contenu, sont POINTILLÉS (6 px de trait, 6 de
   vide) là où la page respire, et PLEINS le long d'un bloc encadré de deux
   filets — la bande « Trusted by », et le dernier appel, suivi d'un
   intervalle pointillé jusqu'au pied de page (la capture envoyée par
   Romain). Un seul gris par fond : --grid (donnée), --grid-noir (marque),
   10 % de l'encre ou du blanc — le #232323 de Profound, sur notre noir.
   Sous 1 240 px, la colonne touche les bords : rails et intervalle
   s'effacent, les filets restent. */
.libs, section.band, .final { position: relative; isolation: isolate; }
/* La bande « Trusted by » est au CLAIR depuis le 08/10/2026, pied du hero :
   ses filets et rails prennent le gris de la donnée. Les bandes NOIRES — le
   problème, « Measured, never guessed. », le dernier appel — gardent le leur. */
.libs { border-top: 1px solid var(--grid); }
.final, footer, section.band.on-noir { border-top: 1px solid var(--grid-noir); }
section.band { border-top: 1px solid var(--grid); }
.final { --sp: 64px; padding-bottom: calc(120px + var(--sp)); }
/* Une boîte de la largeur de la colonne, dont on dessine les deux bords. */
.libs::before, section.band::before, .final::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; pointer-events: none;
  left: max(0px, calc(50% - var(--wrap) / 2)); right: max(0px, calc(50% - var(--wrap) / 2));
  --r: var(--grid);
  background:
    linear-gradient(var(--r) 50%, transparent 0) left top / 1px 12px repeat-y,
    linear-gradient(var(--r) 50%, transparent 0) right top / 1px 12px repeat-y;
}
.final::before, section.band.on-noir::before { --r: var(--grid-noir); }
/* Blocs encadrés : rails pleins. */
.libs::before {
  background:
    linear-gradient(var(--r), var(--r)) left top / 1px 100% no-repeat,
    linear-gradient(var(--r), var(--r)) right top / 1px 100% no-repeat;
}
.final::before {
  background:
    linear-gradient(var(--r), var(--r)) left top / 1px calc(100% - var(--sp)) no-repeat,
    linear-gradient(var(--r), var(--r)) right top / 1px calc(100% - var(--sp)) no-repeat,
    linear-gradient(var(--r) 50%, transparent 0) left bottom / 1px 12px repeat-y,
    linear-gradient(var(--r) 50%, transparent 0) right bottom / 1px 12px repeat-y;
}
/* Le filet qui ferme le dernier appel ; en dessous, l'intervalle pointillé. */
.final::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: var(--sp); border-top: 1px solid var(--grid-noir); pointer-events: none; }
@media (min-width: 1240px) {
  /* Les filets de « Trusted by » rejoignent les rails. */
  .libs .trusted { margin: 0 calc(-1 * var(--pad)); }
}
@media (max-width: 1239px) {
  .libs::before, section.band::before, .final::before, .final::after { display: none; }
  .final { --sp: 0px; }
}

/* ── Fenêtre de la page (script 11, l'offre Custom) ─────────────────────
   La page ne défile plus sous la fenêtre. Sans `scrollbar-gutter` : la place
   gardée à la barre de défilement échappe au voile et montre le fond clair
   de la page, en bande à droite (mesuré au rendu). L'entrée est celle de
   l'ancienne fenêtre de l'extension, retirée le 08/10/2026. */
html.xm-open { overflow: hidden; }
@keyframes xm-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }

@media (max-width: 860px) {
  :root { --pad: 20px; }
  .nav-links { display: none; }
  .nav .wrap { justify-content: space-between; }
  .libs { padding: 36px 0; }
  section.band { padding: 72px 0; }
  .faq-grid { grid-template-columns: 1fr; }
  .cells-3 { grid-template-columns: minmax(0, 1fr); }
  .cells > * { padding: 22px 20px 24px; }
  /* Les chapitres : le texte, puis le visuel. */
  .fx-ch, .fx-ch.rev { grid-template-columns: minmax(0, 1fr); padding: 40px 0; }
  .fx-ch.rev .fx-text { order: 0; }
  .fx-vis { padding: 14px; }
  .ft-screen .rp { height: auto; }
  .ft-shot { height: auto; max-height: 560px; padding: 12px 14px; }
  /* Les fenêtres des chapitres prennent la hauteur de leur écran, 700 × 0,8
     (le `zoom`) = 560 px au plus, celle de « Built for » — jamais de vide sous
     un écran court. Celle d'Ad Library+, animée, GARDE sa hauteur d'une scène à
     l'autre : sa pile s'y réduit au besoin (`overtPile`). */
  .fx-win .ft-shot { max-height: 700px; }
  .fx-win .ft-shot.rp-lib { height: 640px; max-height: 640px; }
  /* Une seule colonne : chaque fragment prend la hauteur de son contenu. */
  .foot { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 560px) {
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-cols > div:last-child { grid-column: 1 / -1; }
}
/* Les régies : au téléphone, trois colonnes, le logo au-dessus du nom —
   jamais une régie seule sur sa ligne (08/10/2026, Romain). */
@media (max-width: 560px) {
  /* « Matched » : trois lignes, la régie nommée, plutôt que deux puces et une
     troisième seule (08/10/2026). */
  .platforms { margin-top: 48px; }
  .t2 { display: inline; }
  /* La ligne de preuve se passe de ses filets : ils débordaient. */
  .trusted { justify-content: center; }
  .trusted::before, .trusted::after { display: none; }
  .trusted span { max-width: none; }
  /* La rangée d'une société garde son nom et son chiffre ; les pastilles partent. */
  .pricing { grid-template-columns: minmax(0, 1fr); }
  /* Cartes empilées : plus rien à aligner sur le curseur de Plus, et la première
     ligne de Free dit déjà « 5 companies » — le volume figé ferait doublon. */
  .plan-vol.is-fixed { display: none; }
  .plan { padding: 24px 20px; }
  .custom { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
  .custom-rows { grid-template-columns: minmax(0, 1fr); grid-row: auto; }
  .custom .btn { width: 100%; }
  .hero { padding-top: 72px; }
  .hero-cta .btn { width: 100%; }
}
/* ── Parallaxes (09/10/2026, audit demandé par Romain : « identifier les
   moments où l'on peut intégrer des parallax utiles et alignés avec la DA »).
   Trois règles : un parallaxe sépare des COUCHES qui existent déjà (trame ·
   verre · donnée), jamais un décor ajouté ; il déplace des cadres et des
   photos, jamais un chiffre en cours de lecture ; faible amplitude, des
   déplacements et des fondus seulement. Animations liées au défilement, en
   CSS (`animation-timeline`), sans script : un navigateur qui ne les connaît
   pas montre la page immobile, comme « réduire les animations ». Tarifs, FAQ
   et formulaires restent immobiles. */
:root { --px-hero: 64px; --px-win: 28px; --px-piece: 18px; --px-col: 18px; }
@media (max-width: 760px) { :root { --px-hero: 36px; --px-win: 14px; --px-piece: 10px; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* 1. En quittant le hero, le titre et le champ montent moins vite que la
       page et s'estompent. */
    .hero-intro { animation: px-promise linear both; animation-timeline: scroll(root); animation-range: 0 75vh; }
    @keyframes px-promise { to { transform: translateY(var(--px-hero)); opacity: .15; } }
    /* 2. Chaque écran des Features glisse contre son texte, et les pièces de
       la fiche (cartes de régie, tuiles) se posent l'une après l'autre en
       entrant — avant d'être lues. */
    .fx-ch .ft-screen { animation: px-window linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes px-window { from { transform: translateY(var(--px-win)); } to { transform: translateY(calc(var(--px-win) * -1)); } }
    /* La fenêtre coupe son contenu (un conteneur de défilement) : les pièces
       suivent la timeline de l'écran (`--screen`), décalées l'une après l'autre. */
    .fx-ch .ft-screen { view-timeline-name: --screen; }
    .fx-win .ft-shot :is(.rp-ov, .rp-tile) { --n: 0; animation: px-settle linear both; animation-timeline: --screen;
      animation-range: entry calc(15% + var(--n) * 12%) entry calc(65% + var(--n) * 12%); }
    .fx-win .ft-shot :is(.rp-ov, .rp-tile):nth-child(2) { --n: 1; }
    .fx-win .ft-shot :is(.rp-ov, .rp-tile):nth-child(3) { --n: 2; }
    .fx-win .ft-shot :is(.rp-ov, .rp-tile):nth-child(n+4) { --n: 3; }
    .fx-win .ft-shot .rp-tile { --n: 3; }
    .fx-win .ft-shot .rp-tile:nth-child(2) { --n: 4; }
    .fx-win .ft-shot .rp-tile:nth-child(n+3) { --n: 5; }
    @keyframes px-settle { from { transform: translateY(var(--px-piece)); opacity: .35; } to { transform: none; opacity: 1; } }
    /* 4. La mosaïque d'annonces des Features : ses colonnes glissent à des
       vitesses différentes (`--colk`, posé par le script 16). Au bureau
       seulement : au téléphone, la mosaïque est une pile. */
    @media (min-width: 901px) {
      .fx-win .ad-mosaic > .ad-encart { animation: px-col linear both; animation-timeline: --screen; animation-range: cover 0% cover 100%; }
      @keyframes px-col { from { translate: 0 calc(var(--colk, 0) * var(--px-col)); } to { translate: 0 calc(var(--colk, 0) * var(--px-col) * -1); } }
    }
  }
}
/* ── L'accueil allégé et ses pages (09/10/2026) ───────────────────────────
   Retour d'un lecteur de confiance, relayé par Romain : « très bon goût, mais
   super orienté détails, énormément de textes… ça me procure une sensation
   “ça va être compliqué”, alors que ton outil est simple ». L'accueil DIT et
   MONTRE (promesse, problème, trois étapes, quatre usages, preuve, prix) ;
   /features et /pricing détaillent. */

/* La page en cours, dans la barre. */
.nav-links a[aria-current="page"] { color: #fff; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .nav-links a[aria-current="page"] { color: var(--ink); }
}
:root[data-theme="light"] .nav-links a[aria-current="page"] { color: var(--ink); }


/* Les tarifs, en bref : quatre blocs par carte au lieu de sept. */
@supports (grid-template-rows: subgrid) {
  .pricing-lite .plan { grid-row: span 4; }
}
/* Sous les deux cartes : deux liens en rangées pleines, titre et sous-titre,
   la flèche à droite — côte à côte au bureau, empilés au téléphone. */
.pricing-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 20px; }
.pricing-more a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 2px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.pricing-more a > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pricing-more b { font-size: 15.5px; font-weight: 600; color: var(--a-blue); }
.pricing-more a > span > span { font-size: 14px; color: var(--muted); }
.pricing-more svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--a-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.pricing-more a:hover svg { transform: translateX(3px); }
.pricing-more a:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* L'en-tête d'une page dédiée : sur la trame, centré, sans bouton. */
section.band.page-head { padding: clamp(64px, 9vw, 120px) 0 clamp(8px, 2vw, 24px); border-top: 0; }
.page-head .sec-head { align-items: center; max-width: 820px; margin: 0 auto; text-align: center; }
.page-head h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.05; letter-spacing: -.025em; }
.page-head .tag { align-self: center; }
.page-head + section.band { border-top: 0; padding-top: clamp(32px, 4vw, 56px); }

/* Le renvoi vers /extension, au pied des chapitres de /features. */
.fx-also { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 24px; padding: 20px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.fx-also p { color: var(--muted); }
.fx-also b { color: var(--ink); }
.fx-also .more { margin: 0; padding: 0; }

/* ── L'accueil v3 (09/10/2026, maquette Figma « Site — v3 ») ───────────────
   Structure de Romain, d'après l'accueil de Semrush : un hero qui fait
   essayer (un champ), les quatre parties du produit en cartes à ouvrir, une
   bande pour les agences, six cas d'usage, la preuve en chiffres, quatre
   métiers. Teintes de l'aube pour les cartes (les mêmes que le faisceau et
   que Plus, D-103), en version sombre la nuit. */
:root {
  --tint-sky: #dce8ff; --tint-pink: #fcdbe9; --tint-lav: #e4ddfd; --tint-mint: #e6f4ee;
  --tint-dawn: linear-gradient(105deg, #dce8ff 0%, #e4ddfd 50%, #fcdbe9 100%);
  --ag-bg: linear-gradient(120deg, #2a3fb8 0%, #4436c2 55%, #6633c6 100%);
  --lift: 0 18px 40px -16px rgba(22, 24, 29, .18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tint-sky: #1a2232; --tint-pink: #2a1e27; --tint-lav: #221e34; --tint-mint: #18271f;
    --tint-dawn: linear-gradient(105deg, #1a2232 0%, #221e34 50%, #2a1e27 100%);
    --ag-bg: linear-gradient(120deg, #22338f 0%, #362b9b 55%, #4f289c 100%); --lift: 0 18px 40px -16px rgba(0, 0, 0, .6);
  }
}
:root[data-theme="dark"] {
  --warn: #ff8a80;
  --tint-sky: #1a2232; --tint-pink: #2a1e27; --tint-lav: #221e34; --tint-mint: #18271f;
  --tint-dawn: linear-gradient(105deg, #1a2232 0%, #221e34 50%, #2a1e27 100%);
  --ag-bg: linear-gradient(120deg, #22338f 0%, #362b9b 55%, #4f289c 100%); --lift: 0 18px 40px -16px rgba(0, 0, 0, .6);
}
.g1 { background: linear-gradient(135deg, var(--tint-sky), var(--tint-lav)); }
.g2 { background: linear-gradient(135deg, var(--tint-mint), var(--tint-sky)); }
.g3 { background: linear-gradient(135deg, var(--tint-pink), var(--tint-lav)); }
.gl { display: inline-block; flex: none; width: 15px; height: 15px; vertical-align: -2px; }
.d { font: 500 11.5px/1 var(--mono); white-space: nowrap; }
.d.up { color: var(--x-up, #0a8a56); }
.d.dn { color: var(--x-down, #b3261e); }
.d.na { color: var(--x-nodata, #9aa0ad); }

/* Le hero : le titre, puis le champ (« See their ads »). */
.hero { padding-bottom: 96px; }
.sf { display: flex; align-items: center; gap: 12px; width: min(600px, 100%); height: 64px; margin: 44px auto 0; padding: 8px 8px 8px 20px;
  background: var(--card); border: 1px solid rgba(22, 24, 29, .16); border-radius: 16px; box-shadow: 0 12px 32px -12px rgba(22, 24, 29, .14); text-align: left; }
.sf:focus-within { border-color: var(--a-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-blue) 22%, transparent), 0 12px 32px -12px rgba(22, 24, 29, .14); }
.sf-ic { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 1.6; }
.sf-in { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; color: var(--ink); font: 400 17px/1 var(--ui); outline: none; }
.sf-in::placeholder { color: var(--muted); opacity: 1; }
.sf-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 20px; border: 0; border-radius: 11px;
  background: var(--ink); color: var(--bg); font: 600 15px/1 var(--ui); cursor: pointer; }
.sf-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-btn:hover { opacity: .9; }
.hero-fine { margin-top: 14px; font-size: 14px; color: var(--muted); }
.on-noir .sf { background: #121418; border-color: rgba(255, 255, 255, .16); box-shadow: none; }
.on-noir .sf-in { color: #fff; }
.on-noir .sf-in::placeholder, .on-noir .sf-ic { color: #8a8f98; stroke: #8a8f98; }
.on-noir .sf-btn { background: #fff; color: #16181d; }
.final-login { margin-top: 18px; font-size: 14px; color: #8a8f98; }
.final-login a { color: #fff; font-weight: 600; text-decoration: none; }
@media (max-width: 560px) {
  .sf { flex-wrap: wrap; height: auto; padding: 8px; gap: 8px; }
  .sf-ic { margin-left: 10px; }
  .sf-in { flex: 1 1 calc(100% - 40px); }
  .sf-btn { flex: 1 1 100%; justify-content: center; }
}
/* Sous le champ, une ligne quand le texte n'est pas un site (script 19). */
.sf-note { width: min(600px, 100%); margin: 12px auto 0; font-size: 14.5px; color: var(--warn); text-align: center; }
.on-noir .sf-note { color: #ff8a80; }

/* ── Les cartes du produit (script 18) ── */
.pc-band { overflow-x: clip; padding-top: 24px; }
.pc-row { display: flex; gap: 16px; margin-right: max(calc(50% - 50vw), -160px); padding-right: 24px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.pc-row::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .pc-row { scroll-behavior: auto; } }
.pc { position: relative; flex: 0 0 calc((min(100vw, var(--wrap)) - 2 * var(--pad) - 32px) / 3); height: 426px; overflow: hidden; border-radius: 20px; cursor: pointer;
  transition: flex-basis .5s cubic-bezier(.3, .7, .2, 1); }
.pc.is-open { flex-basis: calc((min(100vw, var(--wrap)) - 2 * var(--pad) - 16px) * .655); cursor: default; }
.pc-row.has-open .pc:not(.is-open) { flex-basis: calc((min(100vw, var(--wrap)) - 2 * var(--pad) - 16px) * .345); }
.pc-sky { background: var(--tint-sky); } .pc-pink { background: var(--tint-pink); } .pc-lav { background: var(--tint-lav); } .pc-dawn { background: var(--tint-dawn); }
.pc-text { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; padding: 34px 36px 36px; }
.pc.is-open .pc-text { width: 330px; }
.pc-k { font: 600 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.pc h3 { margin-top: 14px; padding-right: 56px; font-size: 30px; line-height: 1.1; letter-spacing: -.015em; }
.pc.is-open h3 { font-size: 34px; padding-right: 0; }
.pc-p, .pc-cta { display: none; }
.pc.is-open .pc-p { display: block; margin-top: auto; font-size: 16px; line-height: 1.5; color: var(--muted); }
.pc.is-open .pc-cta { display: inline-flex; align-self: flex-start; margin-top: 20px; padding: 13px 22px; border-radius: 999px; background: var(--card); color: var(--ink); font: 600 15px/1 var(--ui); text-decoration: none; }
.pc-mini, .pc-full { position: absolute; transition: opacity .35s ease, transform .5s cubic-bezier(.3, .7, .2, 1); }
.pc-mini { left: 36px; right: 36px; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 18px; border-radius: 12px 12px 0 0; background: var(--x-card); border: 1px solid var(--x-grid); border-bottom: 0; box-shadow: var(--lift); color: var(--x-ink); font-size: 12px; }
.pc-full { left: 330px; right: 32px; top: 64px; opacity: 0; transform: translateX(24px); pointer-events: none; }
.pc.is-open .pc-mini { opacity: 0; transform: translateY(24px); }
.pc.is-open .pc-full { opacity: 1; transform: none; }
.pc-tog { position: absolute; z-index: 2; top: 24px; right: 24px; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--ink); background: color-mix(in srgb, var(--card) 55%, transparent); cursor: pointer; }
.pc-tog::before, .pc-tog::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; border-radius: 1px; background: var(--ink); transition: transform .3s ease; }
.pc-tog::after { transform: rotate(90deg); }
.pc.is-open .pc-tog::before { transform: rotate(45deg); }
.pc.is-open .pc-tog::after { transform: rotate(135deg); }
.pc-tog:focus-visible { outline: 3px solid var(--a-blue); outline-offset: 2px; }
.pc-dots { display: flex; gap: 8px; margin-top: 18px; }
.pc-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: var(--ink); opacity: .2; cursor: pointer; transition: width .3s ease, opacity .3s ease; }
.pc-dots button.on { width: 22px; opacity: 1; }
/* Les fragments d'app des cartes */
.pcm-r { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.pcm-r > span:not(.d):not(.rp-logo) { flex: 1; min-width: 0; font-weight: 600; }
.pcm-r .rp-logo, .uc-r .rp-logo { flex: none; width: 18px; height: 18px; font-size: 9px; }
.pcm-r > b { font: 600 12.5px/1 var(--mono); color: var(--x-link); }
.pcm-k { font: 500 10px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--x-muted); }
.pcm-s { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--x-grid); border-radius: 8px; background: var(--x-card); }
.pcm-s span { flex: 1; } .pcm-s span::before { content: "⌕"; margin-right: 8px; color: var(--x-muted); }
.pcm-s small { font: 400 10.5px/1 var(--mono); color: var(--x-muted); }
.mads { display: flex; gap: 8px; }
.mad { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 9px; border: 1px solid var(--x-grid); border-radius: 9px; background: var(--x-card); }
.mad-h { display: flex; align-items: center; gap: 5px; font-size: 10.5px; white-space: nowrap; overflow: hidden; }
.mad-h .rp-logo { width: 15px; height: 15px; border-radius: 4px; font-size: 8px; }
.mad-h span { color: var(--x-muted); font-size: 9.5px; }
.mad-v { position: relative; aspect-ratio: 1.9; border-radius: 6px; }
.mad > i { display: block; height: 5px; border-radius: 3px; background: var(--x-grid); }
.mad > i.s { width: 62%; }
.mad-b { position: absolute; left: 6px; top: 6px; padding: 2px 6px; border-radius: 4px; font: 600 8.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.mad-b.new { background: #0a8a56; } .mad-b.stopped { background: #b3261e; }
.pcw { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 18px; border-radius: 14px; background: var(--x-card); border: 1px solid var(--x-grid); box-shadow: var(--lift); color: var(--x-ink); font-size: 12px; }
.pcw-h { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.pcw-h b { font: 600 17px/1 var(--heading); }
.pcw-h .mono { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--x-muted); }
.pcw-wk { padding: 4px 8px; border: 1px solid var(--x-grid); border-radius: 6px; font-size: 11px; }
.pcw-pf { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.pcw-p { display: flex; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid var(--x-grid); border-radius: 10px; }
.pcw-pn { display: flex; align-items: center; gap: 5px; font-weight: 600; font-size: 11px; white-space: nowrap; }
.pcw-p small { font-size: 10px; color: var(--x-muted); }
.pcw-p > b { font: 600 22px/1.1 var(--mono); color: var(--x-link); }
.pcw-p > b .d { font-size: 11px; }
.pcw-ns { display: flex; gap: 12px; font-size: 9.5px; color: var(--x-muted); }
.pcw-ns b { display: block; font: 500 12px/1.3 var(--mono); color: var(--x-link); }
.pcw-t { width: 100%; border-collapse: collapse; }
.pcw-t td, .pcw-t th { padding: 7px 2px; border-top: 1px solid var(--x-grid); text-align: left; font-weight: 400; }
.pcw-t td:last-child, .pcw-mkt td { text-align: right; font-family: var(--mono); }
.pcw-mkt th { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.pcw-mkt th .rp-logo { width: 18px; height: 18px; font-size: 9px; }
.pcw-mkt tr:first-child td, .pcw-mkt tr:first-child th { border-top: 0; }
.pcw-tabs, .pcw-chips { display: flex; gap: 14px; font-size: 11.5px; color: var(--x-muted); }
.pcw-tabs b { color: var(--x-ink); }
.pcw-chips { gap: 6px; } .pcw-chips > * { padding: 4px 9px; border: 1px solid var(--x-grid); border-radius: 999px; font-weight: 400; }
.pcw-chips b { background: var(--x-ink); color: var(--x-card); border-color: var(--x-ink); }
.pcw .mads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcw .mads .mad:nth-child(4) { display: none; }

/* ── La bande des agences : l'app entière, qui déborde ── */
.ag { display: flex; align-items: stretch; gap: 28px; min-height: 426px; overflow: hidden; border-radius: 20px; background: var(--ag-bg); color: #fff; }
.ag-text { flex: 1 1 0; display: flex; flex-direction: column; padding: 48px 0 44px 44px; }
.ag-k { font: 600 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ag h2 { margin-top: 16px; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.08; color: #fff; }
.ag h2 .t2 { display: block; }
.ag p { margin: 18px 0 28px; max-width: 54ch; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
.ag-cta { align-self: flex-start; margin-top: auto; padding: 13px 22px; border-radius: 999px; background: #fff; color: #16181d; font: 600 15px/1 var(--ui); text-decoration: none; }
.ag-app { flex: 0 0 588px; display: flex; margin: 44px -150px 0 0; border-radius: 14px 0 0 0; background: var(--x-card); color: var(--x-ink); font-size: 12px; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .35); overflow: hidden; }
.ag-side { flex: 0 0 126px; display: flex; flex-direction: column; gap: 4px; padding: 16px 10px; background: var(--x-paper); border-right: 1px solid var(--x-grid); }
.ag-wm { margin-bottom: 10px; font: 400 15px/1 var(--logo); }
.ag-nav { display: flex; align-items: center; gap: 7px; white-space: nowrap; padding: 6px 8px; border-radius: 7px; color: var(--x-muted); font-size: 11.5px; font-weight: 500; }
.ag-nav i { width: 12px; height: 12px; border-radius: 3px; background: currentColor; opacity: .3; }
.ag-nav.on { background: var(--x-card); border: 1px solid var(--x-grid); color: var(--x-ink); font-weight: 600; }
.ag-nav.on i { opacity: .9; }
.ag-main { flex: 0 0 470px; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.ag-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; white-space: nowrap; }
.ag-h i { width: 9px; height: 9px; border-radius: 50%; background: var(--x-link); }
.ag-h b { font: 600 15px/1 var(--heading); }
.ag-h span { flex-basis: 100%; padding-left: 17px; font-size: 10.5px; color: var(--x-muted); }
.ag-tabs { display: flex; gap: 14px; font-size: 11px; color: var(--x-muted); }
.ag-tabs b { color: var(--x-ink); }
.ag-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ag-kpis > div { padding: 8px 10px; border: 1px solid var(--x-grid); border-radius: 8px; }
.ag-kpis small { display: block; font: 500 9px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--x-muted); }
.ag-kpis b { font: 600 16px/1.4 var(--mono); color: var(--x-link); }
.ag-kpis b .d { font-size: 10px; }
.ag-c { padding: 10px; border: 1px solid var(--x-grid); border-radius: 8px; }
.ag-ch { display: flex; align-items: center; gap: 6px; } .ag-ch b { flex: 1; font-size: 11px; }
.ag-chart { display: block; width: 100%; height: 64px; margin-top: 6px; fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ag-chart polyline { vector-effect: non-scaling-stroke; }

/* ── Solutions : six cas d'usage ── */
.uc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.uc { display: flex; flex-direction: column; padding: 12px 12px 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.uc-vis { display: flex; flex-direction: column; gap: 8px; height: 210px; padding: 16px; border-radius: 10px; background: var(--x-paper); color: var(--x-ink); font-size: 12px; overflow: hidden; }
.uc h3 { margin: 20px 8px 0; font-size: 20px; line-height: 1.25; }
.uc p { margin: 8px 8px 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.uc-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.uc-h b { font-size: 12.5px; } .uc-h span { font-size: 10.5px; color: var(--x-muted); }
.uc-r { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--x-card); }
.uc-r > span:not(.uc-bar):not(.uc-th):not(.d):not(.rp-logo) { flex: 1; min-width: 0; font-weight: 500; }
.uc-r > b { font: 500 11.5px/1 var(--mono); }
.uc-r small { font: 400 10.5px/1 var(--mono); color: var(--x-muted); }
.uc-n { flex: 0 0 74px !important; }
.uc-bar { flex: 1; height: 7px; } .uc-bar i { display: block; height: 100%; border-radius: 3px; background: var(--x-link); opacity: .75; }
.uc-bar .c-fabrikam { background: var(--x-ink); } .uc-bar .c-contoso { background: #6d4fd8; } .uc-bar .c-adatum { background: var(--x-muted); } .uc-bar .c-northwind { background: #2a7a5a; }
.uc-th { flex: 0 0 34px; height: 24px; border-radius: 4px; }
.uc-dot { width: 8px; height: 8px; border-radius: 50%; }
.uc-ex { padding: 4px 8px; border: 1px solid var(--x-grid); border-radius: 6px; background: var(--x-card); color: var(--x-ink) !important; font-weight: 500; }
.uc-thumbs { display: flex; gap: 8px; } .uc-thumbs i { flex: 1; height: 58px; border-radius: 6px; }

/* ── La preuve : chiffres et garanties ── */
#scale.v3 { display: block; min-height: 0; padding: 104px 0; }
.nums5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 8px 0 0; }
.nums5 > div { display: flex; flex-direction: column-reverse; gap: 8px; padding: 0 20px; border-left: 1px solid rgba(255, 255, 255, .12); }
.nums5 > div:first-child { padding-left: 0; border-left: 0; }
.nums5 dd { margin: 0; font: 600 clamp(36px, 3.8vw, 52px)/1 var(--mono); letter-spacing: -.03em; color: #fff; }
.nums5 dd i { font-style: normal; }
.nums5 dt { font-size: 15px; color: var(--on-noir-2); }
.gar { display: flex; flex-wrap: wrap; gap: 14px 48px; margin: 56px 0 0; padding: 40px 0 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .12); }
.gar li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: #fff; }
.gar-ic { width: 22px; height: 22px; fill: none; stroke: var(--neon-vert); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gar-pf { display: inline-flex; gap: 4px; margin-left: 4px; }
#scale.v3 .sec-head .nums-note { margin: 0; max-width: none; font: 400 13px/1.5 var(--mono); letter-spacing: 0; color: var(--on-noir-dim); }

/* ── Built for : quatre métiers ── */
.bf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bf { padding: 24px 22px 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.bf-ic { width: 28px; height: 28px; fill: none; stroke: var(--a-violet); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bf h3 { margin-top: 14px; font-size: 20px; line-height: 1.25; }
.bf p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* ── Adaptation ── */
@media (max-width: 1100px) {
  .ag-app { flex-basis: 520px; margin-right: -120px; } .ag-main { flex-basis: 394px; }
  .bf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Les cinq chiffres restent sur une ligne (une grille 3 + 2 paraissait en désordre), plus petits. */
  .nums5 > div { padding: 0 14px; }
  .nums5 dd { font-size: clamp(26px, 3.6vw, 40px); }
  .nums5 dt { font-size: 14px; }
}
@media (max-width: 960px) {
  .uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag { flex-direction: column; gap: 0; }
  .ag-text { padding: 40px 32px 0; }
  .ag-cta { margin-top: 28px; }
  .ag-app { flex: none; align-self: flex-end; width: calc(100% - 32px); height: 340px; margin: 12px 0 0; }
  .ag-main { flex: 1 1 auto; }
}
/* Au téléphone, les cartes du produit sont un carrousel : chacune son texte et son petit visuel. */
@media (max-width: 760px) {
  .pc-row { margin-right: calc(-1 * var(--pad)); padding-right: var(--pad); scroll-snap-type: x mandatory; }
  .pc, .pc.is-open, .pc-row.has-open .pc:not(.is-open) { flex: 0 0 86%; height: 460px; scroll-snap-align: start; cursor: default; }
  .pc-text, .pc.is-open .pc-text { width: 100%; padding: 28px 24px 0; height: auto; }
  .pc h3, .pc.is-open h3 { font-size: 28px; padding-right: 0; }
  .pc-p, .pc.is-open .pc-p { display: block; margin-top: 12px; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
  .pc-cta, .pc.is-open .pc-cta { display: none; }
  .pc-mini, .pc.is-open .pc-mini { left: 24px; right: 24px; opacity: 1; transform: none; }
  .pc-full, .pc-tog { display: none; }
  .pc-dots { justify-content: center; }
  .gar { flex-direction: column; }
}
@media (max-width: 640px) {
  .uc-grid, .bf-grid { grid-template-columns: minmax(0, 1fr); }
  .ag-text { padding: 32px 24px 0; }
  .ag-side { display: none; }
}

/* ── Accueil v3, deuxième passe (09/10/2026, Romain) ──────────────────────
   La barre ne mène qu'à des PAGES (« c'est soit l'un soit l'autre ») :
   /features, /solutions, /pricing, /faq, /extension. Sous le champ du hero,
   les régies mesurées. Les cas d'usage de l'accueil sur UNE ligne qui défile,
   des cartes plus grandes ; la bande agences en bleu-violet de la marque. */
.hero-pf { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; margin-top: 22px; font-size: 14px; color: var(--muted); }
.hero-pf .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-weight: 500; }
.hero-pf .chip svg { width: 16px; height: 16px; }
.hero-pf + .hero-fine { margin-top: 14px; }
.sec-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.sec-row .sec-head { margin-bottom: 48px; }
.row-nav { display: flex; gap: 10px; margin-bottom: 52px; }
.row-nav button { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1.5px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.row-nav button:disabled { opacity: .25; cursor: default; }
.row-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.uc-row { display: flex; gap: 16px; margin-right: max(calc(50% - 50vw), -160px); padding-right: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.uc-row::-webkit-scrollbar { display: none; }
/* Les ÉCRANS LARGES (10/10/2026, retour de Warren sur un grand angle : « pas
   du tout adapté ») : les deux rangées qui défilent débordaient de la colonne
   jusqu'au bord de la fenêtre — à 3 440 px, des cartes coupées à 1 000 px à
   droite d'une page centrée. Le débord est plafonné à 160 px au-delà de la
   colonne (à 1 440 px, il en fait 130 : rien ne change), s'y efface en fondu,
   et la fin du défilement aligne la dernière carte sur la colonne. */
@media (min-width: 1500px) {
  .pc-row, .uc-row { padding-right: 160px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 150px), transparent calc(100% - 10px));
    mask-image: linear-gradient(to right, #000 calc(100% - 150px), transparent calc(100% - 10px)); }
}
@media (prefers-reduced-motion: reduce) { .uc-row { scroll-behavior: auto; } }
.uc-row .uc { flex: 0 0 456px; scroll-snap-align: start; }
.uc-row .uc-vis, .uc-big .uc-vis { height: 270px; padding: 20px; gap: 10px; font-size: 13px; }
.uc-row .uc h3, .uc-big .uc h3 { font-size: 23px; }
.uc-row .uc p, .uc-big .uc p { font-size: 16px; }
.uc-row .uc-r, .uc-big .uc-r { padding: 9px 12px; }
.uc-row .uc-thumbs i, .uc-big .uc-thumbs i { height: 90px; }
.row-more { margin-top: 22px; }
.row-more .more { margin: 0; padding: 0; }
#solutions { overflow-x: clip; }
.uc-big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uc-big .uc .more { margin: 14px 8px 0; padding: 0; }
.ag-first { padding-top: clamp(24px, 3vw, 40px); }
@media (max-width: 760px) {
  .uc-row { margin-right: calc(-1 * var(--pad)); padding-right: var(--pad); }
  .uc-row .uc { flex-basis: 86%; }
  .row-nav { display: none; }
  .sec-row .sec-head { margin-bottom: 32px; }
}
@media (max-width: 640px) { .uc-big { grid-template-columns: minmax(0, 1fr); } }

/* ── Les visuels animés (09/10/2026, script 21) : à l'écran seulement. `.pre`
   cache SANS transition, son retrait révèle AVEC — d'où les transitions sur
   l'état de base. Mouvement réduit : le script ne pose rien. */
.mad { transition: opacity .45s ease, transform .45s cubic-bezier(.3, .7, .2, 1); }
.mad.pre { opacity: 0; transform: translateY(10px); transition: none; }
.mad-b { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1) .25s; }
.mad.pre .mad-b { transform: scale(0); transition: none; }
.ag-chart polyline { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.3, .7, .2, 1); }
.ag-chart.pre polyline { stroke-dashoffset: 1; transition: none; }
.pcw-t tr { transition: opacity .4s ease; }
.pcw-t tr:nth-child(2) { transition-delay: .08s; } .pcw-t tr:nth-child(3) { transition-delay: .16s; } .pcw-t tr:nth-child(4) { transition-delay: .24s; } .pcw-t tr:nth-child(5) { transition-delay: .32s; }
.pcw-t.pre tr { opacity: 0; transition: none; }
.typing::after { content: ""; display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -2px; background: currentColor; animation: how-caret 1s steps(1) infinite; }

/* ── Repasse téléphone (09/10/2026, Romain : « fais une repasse sur la
   version mobile ») ───────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* Le hero : les régies sous leur libellé, les trois sur une ligne ; moins de vide avant les cartes. */
  .hero { padding-bottom: 48px; }
  .hero-pf { gap: 8px 4px; }
  .hero-pf > span:first-child { flex-basis: 100%; }
  .hero-pf .chip { gap: 5px; padding: 5px 8px 5px 6px; font-size: 11.5px; }
  .hero-pf .chip svg { width: 13px; height: 13px; }
  .pc-band { padding-top: 8px; }
  /* Les cartes du produit : le visuel suit le texte, sans trou ; la carte prend sa hauteur. */
  .pc, .pc.is-open, .pc-row.has-open .pc:not(.is-open) { display: flex; flex-direction: column; height: auto; }
  .pc-text, .pc.is-open .pc-text { height: auto; padding: 26px 22px 22px; }
  .pc-mini, .pc.is-open .pc-mini { position: relative; left: auto; right: auto; bottom: auto; margin: auto 22px 0; }
  /* Les cas d'usage : un visuel à la hauteur de son contenu. */
  .uc-row .uc-vis, .uc-big .uc-vis, .uc-vis { height: auto; min-height: 200px; padding: 16px; }
  .uc-row .uc h3, .uc-big .uc h3 { font-size: 21px; }
}
@media (max-width: 380px) {
  .hero-pf .chip { font-size: 11px; padding: 4px 7px 4px 5px; gap: 4px; }
  .sf-in { font-size: 16px; }
}

/* ── Repasse téléphone, 2 (09/10/2026, Romain : « fais en sorte que les cards
   For agencies & consultants et In numbers tiennent sur l'écran ») ─────────
   Un écran d'iPhone, barres de Safari et nav ôtées, laisse ~600 px : chacune
   des deux bandes s'y tient entière. */
@media (max-width: 640px) {
  /* Agences : texte resserré, l'app réduite à son en-tête, ses chiffres et sa
     courbe — ses onglets partent, la courbe se tasse pour tenir entière. */
  .ag-text { padding: 26px 22px 0; }
  .ag-k { font-size: 11px; }
  .ag h2 { margin-top: 12px; font-size: 25px; line-height: 1.1; }
  .ag p { margin: 12px 0 0; font-size: 15px; line-height: 1.5; }
  .ag-cta { margin-top: 18px; padding: 12px 20px; font-size: 14.5px; }
  .ag-app { width: calc(100% - 22px); height: 206px; margin-top: 20px; }
  .ag-main { gap: 10px; padding: 14px; }
  .ag-tabs { display: none; }
  .ag-chart { height: 40px; }
  /* In numbers : une liste — le libellé à gauche, le chiffre à droite, les
     cinq au même corps (Romain : « les 5 chiffres comme ça, c'est désorganisé »). */
  #scale.v3 { padding: 48px 0 44px; }
  #scale.v3 .sec-head { gap: 10px; margin-bottom: 18px; }
  #scale.v3 .sec-head h2 { font-size: 25px; }
  .nums5 { display: block; margin: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .nums5 > div:nth-child(n) { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .nums5 dt { font-size: 15px; }
  .nums5 dd { font-size: 22px; }
  .gar { gap: 10px; margin-top: 22px; padding-top: 0; border-top: 0; }
  .gar li { gap: 10px; font-size: 15px; }
  .gar-ic { width: 20px; height: 20px; }
  .gar-pf { display: none; }
}
/* Sous les tarifs : les deux liens l'un sous l'autre, quand les cartes s'empilent. */
@media (max-width: 560px) {
  .pricing-more { grid-template-columns: minmax(0, 1fr); }
  .pricing-more a + a { border-top: 0; }
}

/* ── Le hero aéré, les cartes plus haut (10/10/2026, Romain : « augmente les
   gaps verticaux dans le hero et rehausse aussi la partie avec cards ») ──
   Au bureau : plus d'écart entre « The », le titre, sa promesse, le champ, les
   régies et « Free for 5… » (accueil seul, `.hero-home` : /extension garde
   son hero) ; moins de vide sous le hero et au-dessus des cartes — la bande des cartes prenait les 104 px de toute `section.band`
   (la règle `.pc-band`, moins précise, ne passait pas). Le téléphone garde
   ses réglages (« Repasse téléphone »). */
@media (min-width: 761px) {
  .hero-home .h-the { margin-bottom: .75em; }
  .hero-home .h-cat + .t2 { margin-top: .85em; }
  .hero-home .sf { margin-top: 60px; }
  .hero-home .hero-pf { margin-top: 30px; }
  .hero-home .hero-pf + .hero-fine { margin-top: 20px; }
  .hero.hero-home { padding-bottom: 56px; }
  section.band.pc-band { padding-top: 40px; }
}

/* ── L'ATMOSPHÈRE BRUMEUSE (10/10/2026, Romain : « nos cards ont perdu en
   design, plus de liquid glass ; les couleurs unies ne sont pas assez
   distinguées ; le bleu violet de For agencies & consultants, je n'y arrive
   pas ; se rapprocher de notre inspiration, les bleus brumeux ; un effet bleu
   brumeux en background à la place du blanc — recréer l'atmosphère de l'image
   du cavalier ») ─────────────────────────────────────────────────────────
   L'image : un château dans la brume, ciel pâle en haut, lavande, une lueur
   rose au cœur, un bleu plus soutenu au sol, et des contours dessinés en
   points blancs. Ici :
   - le FOND : une brume fixe derrière la page (sous la trame), aux mêmes
     tons ; la trame passe à un indigo léger, que le faisceau blanchit ;
   - les CARTES : du verre (blanc translucide, flou de ce qui passe dessous,
     liseré clair), une lueur de leur couleur dans un coin, et un semis de
     points blancs qui s'y fond — les contours pointillés de l'image ;
   - la bande des AGENCES : une brume de crépuscule (bleu nuit, lavande,
     lueur rose), le même semis ; le texte blanc y garde 6:1 au moins.
   `html:root` l'emporte sur les jetons recopiés dans le <style> d'extension.html. */
html:root {
  --bg: #e6e8f3;
  --field-dot: rgba(52, 62, 110, 0.13);
  --mist:
    radial-gradient(55% 45% at 72% 36%, rgba(244, 176, 198, .5) 0%, rgba(244, 176, 198, 0) 70%),
    radial-gradient(65% 50% at 16% 6%, rgba(166, 194, 238, .55) 0%, rgba(166, 194, 238, 0) 70%),
    radial-gradient(90% 55% at 50% 102%, rgba(140, 150, 206, .42) 0%, rgba(140, 150, 206, 0) 72%),
    linear-gradient(180deg, #e1e8f5 0%, #e7e4f3 52%, #e2e2f1 100%);
  --ag-bg:
    radial-gradient(55% 85% at 90% 6%, rgba(246, 166, 196, .5) 0%, rgba(246, 166, 196, 0) 62%),
    radial-gradient(70% 90% at 0% 100%, rgba(124, 158, 222, .45) 0%, rgba(124, 158, 222, 0) 62%),
    linear-gradient(160deg, #33416e 0%, #47518a 52%, #5f5d93 100%);
  --dots-white: radial-gradient(circle, rgba(255, 255, 255, .95) 1px, transparent 1.7px) 0 0 / 10px 10px;
}
.site-backdrop { background: var(--mist); }
html:root[data-theme="light"] .nav.on-noir { background: rgba(232, 236, 246, .7); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: rgba(52, 62, 110, .1); }

/* Les cartes du produit : du verre, une lueur, un semis. */
.pc.pc-sky, .pc.pc-pink, .pc.pc-lav, .pc.pc-dawn {
  background:
    radial-gradient(105% 75% at 100% 0%, var(--pc-glow) 0%, transparent 62%),
    radial-gradient(90% 70% at 0% 100%, var(--pc-glow-2, transparent) 0%, transparent 62%),
    linear-gradient(165deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, .32) 100%);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 28px 56px -32px rgba(44, 54, 104, .45);
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); }
.pc-sky { --pc-glow: rgba(140, 186, 246, .55); }
.pc-pink { --pc-glow: rgba(250, 154, 184, .5); }
.pc-lav { --pc-glow: rgba(168, 154, 240, .55); }
.pc-dawn { --pc-glow: rgba(250, 154, 184, .45); --pc-glow-2: rgba(140, 186, 246, .45); }
.pc::before { content: ""; position: absolute; top: 0; right: 0; width: 60%; height: 62%; pointer-events: none; background: var(--dots-white); opacity: .85;
  -webkit-mask-image: radial-gradient(80% 80% at 100% 0%, #000 0%, transparent 72%); mask-image: radial-gradient(80% 80% at 100% 0%, #000 0%, transparent 72%); }

/* La bande des agences : la brume du crépuscule, le même semis. */
.ag { position: relative; border: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 30px 60px -34px rgba(36, 44, 92, .55); }
.ag::before { content: ""; position: absolute; top: 0; right: 0; width: 55%; height: 75%; pointer-events: none; background: var(--dots-white); opacity: .32;
  -webkit-mask-image: radial-gradient(75% 75% at 100% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(75% 75% at 100% 0%, #000 0%, transparent 70%); }
.ag > * { position: relative; z-index: 1; }

/* Les cas d'usage : du verre. */
.uc { background: linear-gradient(165deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .4) 100%); border-color: rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 22px 44px -30px rgba(44, 54, 104, .4);
  -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25); }
@media (prefers-reduced-transparency: reduce) {
  .pc.pc-sky, .pc.pc-pink, .pc.pc-lav, .pc.pc-dawn, .uc { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: #f4f5fa; }
}
/* L'encart des cas d'usage passe du papier chaud à une brume froide : un beige
   sous du verre bleuté jurait. */
.uc .uc-vis { background: rgba(232, 236, 248, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
/* « See their ads » reste NOIR (Romain, 10/10/2026, après un essai en bleu du
   crépuscule puis en cobalt) ; seul son texte passe au blanc franc, `--bg`
   étant devenu la brume. */
.sf-btn { color: #fff; }

/* ── Le logo du hero revient (10/10/2026, Romain : « au-dessus du THE, remets
   le logo O d'Overt avec le gris clignotant au milieu qui devient vert quand
   le pointeur s'approche », puis : « ne place pas de message à l'intérieur,
   le point doit juste être vert lumineux quand le pointeur s'approche, et le
   fond du centre ne doit pas être blanc mais transparent »).
   L'anneau du CTA-logo (.mk-cta, script 14), réduit au signe : pas de lien,
   pas de texte (`aria-hidden`), il ne s'ouvre pas (`data-mk-still`). Le
   centre laisse voir la brume. À l'approche, le point prend le vert néon et
   sa lueur — à la demande de Romain, un écart assumé à « aucun néon sur
   clair » : un point de 10 px cerclé d'encre, sans texte à lire. Au toucher,
   il passe seul au vert une fois visible (`data-mk-auto`). Le hero remonte
   d'autant : les cartes restent à peu près où elles étaient. */
.hero-mk { margin-bottom: 26px; }
:root[data-theme="light"] .hero .hero-mk .mk-ring { background: transparent; box-shadow: none; }
:root[data-theme="light"] .hero .hero-mk.is-near .mk-dot,
:root[data-theme="light"] .hero .hero-mk:hover .mk-dot { background: #00e68a; box-shadow: 0 0 6px rgba(0, 230, 138, .9), 0 0 16px 3px rgba(0, 230, 138, .55); }
@media (min-width: 761px) { .hero.hero-home { padding-top: 64px; } }
@media (max-width: 760px) { .hero.hero-home { padding-top: 36px; } .hero-mk { margin-bottom: 18px; } }