/* vlog.sh, page de lancement. Inspirée de pen.dev : graphite neutre, titres fins en deux tons (blanc puis gris),
   cartes plates à peine plus claires que le fond, bouton principal blanc. Le métal liquide (logo, médaille, carte de licence,
   logotype) et le verre (navigation, barre du lecteur, pastilles sur les vidéos) restent pour ce qui compte. Noir, gris et blanc ;
   l'or en métal liquide, rarement : la garantie (titre, médaille, tuile), le palier du moment, le trait du chapitre en cours. */
:root {
  color-scheme: dark;
  --bg: #161719;
  --bg-top: #060607;
  --ink: #ffffff;
  --text-2: rgba(255, 255, 255, 0.64);
  --dim: rgba(255, 255, 255, 0.5);
  --mute: rgba(255, 255, 255, 0.5);
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);
  --card: rgba(255, 255, 255, 0.035);
  --card-2: rgba(255, 255, 255, 0.06);
  /* L'or : une teinte pleine pour le texte, un dégradé de métal liquide pour les surfaces et les titres. */
  --gold: #e3c47e;
  --gold-metal: linear-gradient(105deg, #8c6a2c 0%, #e8c877 16%, #fff1c8 28%, #c6973f 44%, #f2d68e 60%, #96702e 78%, #e6c676 100%);
  --font: "Inter", "Inter Fallback", system-ui, -apple-system, sans-serif;
  --frame: 1280px;
  --pad: clamp(16px, 3vw, 40px);
  --nav-h: 60px;
  --r: 14px;
  /* Le verre : sombre, flouté, un reflet fin en haut et un liseré clair. */
  --glass-bg: rgba(30, 31, 33, 0.62);
  --glass-sh: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 18px 44px -18px rgba(0, 0, 0, 0.75);
}

/* Police de secours calée sur Inter : pas de saut de mise en page au chargement. */
@font-face { font-family: "Inter Fallback"; src: local("Arial"); ascent-override: 90.49%; descent-override: 22.56%; line-gap-override: 0%; size-adjust: 107.06%; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; color: var(--ink); background: var(--bg);
  font-family: var(--font); font-size: 16px; line-height: 1.55; font-weight: 400; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 60; background: #fff; color: #000; padding: 10px 14px; border-radius: 10px; font-weight: 500; }
.skip:focus { top: 12px; }

.in { width: 100%; max-width: var(--frame); margin: 0 auto; padding-inline: var(--pad); }
.band { position: relative; }
section.band { padding-block: clamp(60px, 7vw, 100px); }

/* Les cartes : plates, à peine plus claires que le fond, un reflet d'un pixel en haut. */
.cells { max-width: var(--frame); margin: clamp(32px, 4vw, 48px) auto 0; padding-inline: var(--pad); display: grid; gap: 12px; }
.cell {
  position: relative; isolation: isolate; min-width: 0; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r);
  background: var(--card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}
.cells-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cells-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Typographie : Inter, en Display aux grandes tailles (axe optique). Titres fins et serrés, la suite du titre en gris. */
h1, h2 { font-weight: 400; text-wrap: balance; }
h1 { font-size: clamp(34px, 3.8vw, 54px); line-height: 1.05; letter-spacing: -0.032em; }
h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1.1; letter-spacing: -0.026em; }
h3 { font-size: 16px; line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; }
.dim { color: var(--dim); }
/* La suite du titre, en gris, sur sa propre ligne et équilibrée. */
h1 .dim, h2 .dim, h3 .dim { display: block; text-wrap: balance; }
.t2 { color: var(--dim); }
.head { width: 100%; }
.head-center { text-align: center; }
.section-lede { margin-top: 20px; max-width: 40em; font-size: 17px; line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.section-lede b { font-weight: 500; color: #fff; }
.head-center .section-lede { margin-inline: auto; }

/* Boutons en capsule : blanc pour l'action principale. */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px;
  font-size: 16px; font-weight: 500; letter-spacing: -0.012em; text-decoration: none; white-space: nowrap; transition: background 0.2s ease, transform 0.15s ease;
}
.pill:active { transform: translateY(1px); }
.pill-primary { background: #fff; color: #0d0d0d; }
.pill-primary:hover { background: #e8e8e9; }
/* Le premier bouton : la pilule blanche, entourée d'un anneau de métal liquide (metal.js). L'anneau et le halo passent sous
   la pilule (pas sur son fond) : la rangée du bouton porte la pile, pas le bouton. */
.pill[data-metal="ring"] { isolation: auto; }
.hero-head .cta-row { isolation: isolate; }
.pill-sm { min-height: 36px; padding: 0 15px; font-size: 14px; }
.pill-wide { width: 100%; }
.pill .ico { width: 17px; height: 17px; margin-top: -3px; }
.pill-sm .ico { width: 15px; height: 15px; }
.cta-price { margin-left: 4px; padding-left: 12px; border-left: 1px solid rgba(13, 13, 13, 0.16); color: rgba(13, 13, 13, 0.62); font-variant-numeric: tabular-nums; }
.link { color: var(--ink); text-underline-offset: 5px; text-decoration-color: var(--line-2); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-note { margin-top: 16px; font-size: 14px; color: var(--dim); }

/* Logos de marque : planche SVG en ligne (currentColor) et icônes de site en image. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: -0.14em; flex: none; }
.ico-img { display: inline-block; width: 1em; height: 1em; border-radius: 0.24em; vertical-align: -0.14em; object-fit: cover; flex: none; }

/* La barre du haut, noire et cliquable en entier : le prix de lancement et les places qui restent, un point par place. */
.announce {
  display: flex; align-items: center; justify-content: center; gap: 6px 16px; flex-wrap: wrap;
  min-height: 40px; padding: 7px 16px; background: #000; color: rgba(255, 255, 255, 0.86); font-size: 13.5px; text-align: center; text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--line);
}
.announce:hover { color: #fff; }
.announce:focus-visible { outline-offset: -4px; border-radius: 0; }
.an-main, .an-count { display: inline-flex; align-items: center; gap: 10px; }
.announce b { font-weight: 500; color: #fff; }
.an-dots { display: inline-flex; gap: 3px; }
.an-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.86); }
.an-dots i.sold { background: rgba(255, 255, 255, 0.18); }
.an-count b { font-variant-numeric: tabular-nums; }
.announce .arr { flex: none; opacity: 0.6; transition: transform 0.2s ease; }
.announce:hover .arr { transform: translate(2px, -2px); }

/* Navigation : transparente en haut, barre de verre dès qu'on défile. */
.nav { position: sticky; top: 0; z-index: 40; height: var(--nav-h); margin-bottom: calc(var(--nav-h) * -1); transition: background 0.3s ease, box-shadow 0.3s ease; }
.nav.scrolled { background: rgba(18, 19, 21, 0.72); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: 0 1px 0 var(--line); }
.nav-in { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-size: 16px; font-weight: 500; letter-spacing: -0.02em; }
.brand img { border-radius: 6px; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { color: var(--dim); text-decoration: none; font-size: 14px; transition: color 0.2s ease; }
.nav-links a:hover { color: #fff; }
.nav .pill { justify-self: end; }

/* 1. Hero */
section.hero { padding-top: calc(var(--nav-h) + clamp(40px, 5.5vw, 76px)); padding-bottom: clamp(72px, 9vw, 120px); background: linear-gradient(180deg, var(--bg-top), var(--bg) 720px); }
.hero-head { display: grid; justify-items: center; text-align: center; }
/* Le logo en métal liquide : le trombone en chrome (dégradé et relief SVG), posé sur une ombre douce. */
.hero-mark { position: relative; display: inline-block; margin-bottom: 24px; }
.hero-logo { width: 76px; height: 76px; overflow: visible; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.7)); }
.hero-sub { margin-top: 20px; max-width: 30em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; letter-spacing: -0.012em; color: var(--dim); text-wrap: balance; }
.hero-head .cta-row { margin-top: 32px; justify-content: center; }
.hero-guarantee { margin-top: 14px; font-size: 14px; color: var(--dim); text-decoration: none; transition: color 0.2s ease; }
.hero-guarantee:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.works { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; font-size: 14px; color: var(--dim); }
.works span { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, 0.8); }
.works .ico { width: 15px; height: 15px; }

/* Comment ça marche : la vidéo de 20 s dans une fenêtre d'app. Barre du haut : deux capsules de verre,
   l'app à gauche, les chapitres à droite ; le chapitre en cours s'éclaire et un trait citron avance sous son nom. */
.player { margin-top: clamp(40px, 5vw, 64px); display: grid; justify-items: center; gap: 18px; }
.win { width: 100%; max-width: 1180px; padding: 8px; border-radius: 20px; background: #1c1d1f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 60px 120px -50px rgba(0, 0, 0, 0.9); }
.win-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; }
.win-id, .chapters { height: 44px; border-radius: 999px; background: rgba(255, 255, 255, 0.035); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.win-id { display: inline-flex; align-items: center; gap: 10px; padding: 0 18px 0 16px; font-size: 14px; white-space: nowrap; }
.win-dots { display: inline-flex; gap: 7px; margin-right: 6px; }
.win-dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.win-id b { font-weight: 500; }
.win-id > span:last-child { color: var(--dim); }
.chapters { display: flex; gap: 2px; padding: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.chapters::-webkit-scrollbar { display: none; }
.chapters button {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--dim); transition: color 0.2s ease, background 0.2s ease;
}
.chapters button svg { width: 15px; height: 15px; }
.chapters button:hover { color: #fff; }
.chapters button[aria-pressed="true"] { color: #fff; background: rgba(255, 255, 255, 0.1); }
.chapters button i { position: absolute; left: 15px; bottom: 5px; height: 2px; width: calc((100% - 30px) * var(--p, 0)); border-radius: 2px; background: var(--gold-metal); pointer-events: none; }
.chapters button:not([aria-pressed="true"]) i { display: none; }
.player-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 13px; background: #050506; }
.player-frame video { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.player-desc { min-height: 3em; max-width: 40em; text-align: center; font-size: 15px; line-height: 1.5; color: var(--dim); }

/* 2. Exemples : les métiers en onglets, de vraies vidéos à prendre comme style, puis les plateformes. */
.hero-for { margin-top: 32px; display: flex; }
.for-tabs { position: relative; display: flex; align-items: center; gap: 2px; max-width: 100%; padding: 4px; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.for-tabs::-webkit-scrollbar { display: none; }
.for-label { flex: none; padding: 0 10px 0 12px; font-size: 13px; color: var(--dim); }
.for-tabs button { position: relative; z-index: 1; flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--dim); transition: color 0.25s ease; }
.for-tabs button:hover, .for-tabs button[aria-pressed="true"] { color: #fff; }
/* La pastille glisse jusqu'au métier choisi. */
.for-ink { position: absolute; left: 0; top: 4px; width: var(--w, 0); height: 34px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); transform: translateX(var(--x, 0)); transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.2, 1), width 0.45s cubic-bezier(0.2, 0.9, 0.2, 1); }
.reel2 { margin-top: 20px; display: flex; align-items: flex-start; gap: 12px; }
.rv { flex: 0 0 calc((100% - 48px) / 5); min-width: 0; margin: 0; }
.rv-you { order: 9; }
.rv.rv-show { animation: rv-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes rv-in { from { opacity: 0; transform: translateY(8px); } }
.rv-media { position: relative; overflow: hidden; aspect-ratio: 9 / 16; border-radius: var(--r); background: #0e0f10; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }
.rv-media video { width: 100%; height: 100%; object-fit: cover; }
.rv-style { position: absolute; left: 10px; top: 10px; height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: rgba(20, 21, 23, 0.5); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.1); font-size: 12px; font-weight: 500; color: #fff; }
/* Le bas de la vidéo : les vues, puis au survol le titre, le style et le bouton (toujours visibles sans survol, au clavier aussi). */
.rv-over { position: absolute; left: 0; right: 0; bottom: 0; display: grid; padding: 56px 12px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8) 62%); }
.rv-views { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: #fff; }
.rv-views .ico { width: 12px; height: 12px; }
.rv-more { display: grid; gap: 10px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease; }
.rv:hover .rv-more, .rv:focus-within .rv-more { max-height: 160px; margin-top: 8px; opacity: 1; }
@media (hover: none) { .rv-more { max-height: none; margin-top: 8px; opacity: 1; }}
.rv-brand { gap: 6px; }
.rv-brand .ico { width: 12px; height: 12px; }
.rv-cap b { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; color: #fff; }
.rv-cap span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, 0.7); }
.rv-cta { height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); font-size: 13.5px; font-weight: 500; color: #fff; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; }
.rv-cta:hover, .rv-cta-on { background: #fff; color: #0d0d0d; box-shadow: none; }
.rv-empty { display: grid; place-content: center; justify-items: center; gap: 14px; padding: 16px; text-align: center; color: var(--dim); background: var(--card); box-shadow: none; border: 1px dashed rgba(255, 255, 255, 0.2); }
.rv-empty > .ico { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.rv-empty:hover { border-color: rgba(255, 255, 255, 0.4); }
/* Les plateformes : une rangée de logos, comme des partenaires. */
.platforms { margin-top: 40px; padding-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; border-top: 1px solid var(--line); }
.plat-label { font-size: 14px; color: var(--dim); }
.plat-list { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.plat-list li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: rgba(255, 255, 255, 0.82); }
.plat-list .ico { width: 18px; height: 18px; }

/* Les éléments d'app dans les cartes : mêmes jetons que Kit.swift, en taille réelle. */
.app-ui {
  --af: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --am: ui-monospace, "SF Mono", Menlo, monospace;
  --x2: rgba(255, 255, 255, 0.62); --x3: rgba(255, 255, 255, 0.52);
  --xf1: rgba(255, 255, 255, 0.06); --xf2: rgba(255, 255, 255, 0.1); --xb1: rgba(255, 255, 255, 0.1); --xb2: rgba(255, 255, 255, 0.18);
  font-family: var(--af); font-size: 13px; line-height: 1.3; letter-spacing: 0; color: #fff; text-align: left; -webkit-font-smoothing: antialiased;
}

/* 3. Pourquoi : l'œil en ASCII au-dessus du titre, puis ce que chaque fondateur reconnaît d'un coup d'œil. */
section.face { padding-top: 0; }
.eye-stage { position: relative; isolation: isolate; overflow: hidden; padding: clamp(250px, 26vw, 370px) 0 clamp(40px, 4vw, 56px); }
.eye-bg {
  position: absolute; inset: 0; z-index: -1;
  -webkit-mask-image: radial-gradient(var(--eye-w, 520px) var(--eye-h, 240px) at 50% var(--eye-y, 30%), #000 64%, rgba(0, 0, 0, 0.55) 86%, transparent 100%),
    linear-gradient(transparent, #000 6%, #000 calc(var(--eye-y, 30%) + 6%), rgba(0, 0, 0, 0.2) calc(var(--text-y, 50%) + 2%), transparent calc(var(--text-y, 50%) + 9%));
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(var(--eye-w, 520px) var(--eye-h, 240px) at 50% var(--eye-y, 30%), #000 64%, rgba(0, 0, 0, 0.55) 86%, transparent 100%),
    linear-gradient(transparent, #000 6%, #000 calc(var(--eye-y, 30%) + 6%), rgba(0, 0, 0, 0.2) calc(var(--text-y, 50%) + 2%), transparent calc(var(--text-y, 50%) + 9%));
  mask-composite: intersect;
}
.eye-bg canvas { position: absolute; left: 0; top: 0; display: block; }
.eye-bg .eye-real { display: none; }
.eye-stage .head-center h2, .eye-stage .head-center .section-lede { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.9); }
.club { margin-bottom: 14px; font-size: 13px; letter-spacing: 0.02em; color: var(--dim); }

/* Avis : clip 16:9 de Pieter, citations avec photo. */
.quote-vid { margin-top: clamp(36px, 4.5vw, 56px); display: grid; justify-items: center; gap: 16px; }
.quote-vid .player-frame { width: 100%; max-width: 960px; }
.quote-vid .q-sound {
  position: absolute; left: 14px; bottom: 14px; z-index: 2; min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px;
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.quote-vid .q-sound[hidden] { display: none !important; }
.q-cards { align-items: stretch; }
.q-card { display: flex; flex-direction: column; gap: 16px; }
.q-av { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
.q-card blockquote { font-size: 16px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.q-card blockquote b { font-weight: 500; color: #fff; }
.q-who { margin-top: auto; padding-top: 4px; }
.q-who b { display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.015em; }
.q-who span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--dim); }
.eye-stage .section-lede { max-width: 34em; }

.why-cells { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.wc { grid-column: span 2; display: flex; flex-direction: column; }
.wc-half { grid-column: span 3; }
.wc .wv { flex: none; height: 214px; display: grid; align-content: start; }
.wc-half .wv { height: 180px; }
.wc h3 { margin-top: 22px; }
.wc > p { margin-top: 6px; max-width: 32em; font-size: 15px; color: var(--text-2); }
.wc > p.wc-big { margin-top: 18px; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.35; letter-spacing: -0.015em; color: #fff; }

/* Le graphe de contributions : 52 semaines, presque toutes pleines (en blanc, du plus pâle au plus franc). */
.gh { gap: 8px; }
.gh-head { font-size: 13px; color: var(--x2); }
.gh-head b { font-weight: 600; color: #fff; }
.gh-months { display: flex; justify-content: space-between; padding-right: 3%; font-size: 10px; color: var(--x3); }
.gh-grid { display: grid; grid-template-rows: repeat(7, auto); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
.gh-grid i { aspect-ratio: 1; border-radius: 2px; }
.gh .l0 { background: rgba(255, 255, 255, 0.06); }
.gh .l1 { background: rgba(255, 255, 255, 0.18); }
.gh .l2 { background: rgba(255, 255, 255, 0.36); }
.gh .l3 { background: rgba(255, 255, 255, 0.6); }
.gh .l4 { background: rgba(255, 255, 255, 0.9); }
.gh-legend { display: flex; align-items: center; justify-content: flex-end; gap: 3px; font-size: 10px; color: var(--x3); }
.gh-legend i { width: 9px; height: 9px; border-radius: 2px; }
.gh-legend i:first-of-type { margin-left: 5px; }
.gh-legend i:last-of-type { margin-right: 5px; }

/* Le profil vidéo : vide, puis rempli. */
.pf-top { display: flex; align-items: center; gap: 12px; }
.pf-av { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; object-fit: cover; background: var(--xf2); box-shadow: inset 0 0 0 1px var(--xb1); font-size: 16px; font-weight: 600; color: var(--x2); }
.pf-top b { font-size: 13px; font-weight: 600; }
.pf-top p { margin-top: 2px; font-size: 12px; color: var(--x2); }
.pf-top p b { font-size: 12px; color: #fff; }
.pf-top p i { font-style: normal; color: var(--x3); }
.pf-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.pf-grid span { aspect-ratio: 3 / 4; border-radius: 6px; background: rgba(255, 255, 255, 0.02); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.pf-grid .pf-add { grid-column: span 2; aspect-ratio: auto; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 8px; text-align: center; font-size: 11.5px; font-weight: 500; color: var(--x2); background: none; box-shadow: none; border: 1px dashed rgba(255, 255, 255, 0.25); }
.pf-add .ai { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.pf-full .pf-av { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
.pf-posted { margin-top: 12px; overflow: hidden; aspect-ratio: 540 / 230; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
.pf-posted img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* La pellicule : huit vraies prises abandonnées, aucune au-delà de cinq secondes. */
.roll-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.roll-head b { font-size: 15px; font-weight: 700; }
.roll-head span { font-size: 12px; color: var(--x3); }
.roll-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; aspect-ratio: 2 / 1; border-radius: 8px; background: url(/assets/takes.jpg) center / 100% 100%; }
.roll-grid span { display: flex; align-items: flex-end; justify-content: flex-end; padding: 4px 6px; box-shadow: 0 0 0 1px var(--bg); font-size: 10.5px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }

/* L'écart : 2,1 millions de vues pour un avatar IA, 12 pour ton lancement. */
.b2 { gap: 18px; padding-top: 4px; }
.b2-row p { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.b2-row p b { font-weight: 600; }
.b2-row p span { font-size: 12px; color: var(--x3); }
.b2-row i { display: block; height: 22px; margin-top: 8px; border-radius: 4px; }
.b2-ai { width: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.32)); }
.b2-you { width: 3px; background: #fff; }
.b2-row em { display: block; margin-top: 6px; font: 600 12px var(--am); font-style: normal; color: #fff; }
.b2-row + .b2-row em { color: var(--x2); }

/* 4. Prix : ce qui est inclus à gauche, la carte de licence en métal, les paliers et le bouton à droite, puis la garantie. */
.price-cells { margin-top: clamp(32px, 4vw, 48px); }
.incl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.incl-head h3 { font-size: 18px; }
.incl-tag { font-size: 13px; color: var(--dim); }
.incl { display: grid; gap: 18px; }
.incl li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 14px; }
.ck { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #fff; background: var(--card-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.ck svg { width: 18px; height: 18px; }
.ck .ico { width: 17px; height: 17px; }
.ck-claude { background: linear-gradient(165deg, #e2906d, #c8633f 60%, #9f4429); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.incl b { display: block; font-size: 15.5px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: #fff; }
.incl p > span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--dim); }
.incl p > span .ico, .incl p > span .ico-img { width: 13px; height: 13px; }
.incl a { color: #fff; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.incl-plus { display: flex; align-items: center; gap: 14px; margin: 26px 0 18px; font-size: 13px; color: var(--dim); }
.incl-plus::before, .incl-plus::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* La garantie dans la liste : sa tuile en or poli. */
.incl-bonus .ck { color: #3a2a0c; background: linear-gradient(140deg, #fff1c8, #d6aa52 38%, #f6dc98 58%, #9a7430 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 6px 14px -8px rgba(0, 0, 0, 0.8); }
.incl-bonus .ck .ico { width: 20px; height: 20px; }

.buy { display: flex; flex-direction: column; }
/* La carte de licence : aluminium brossé (stries fines et horizontales), biseau net sur les quatre bords, texte gravé, logo Apple
   en relief. Calme : un reflet doux la traverse toutes les 10 s (transformation seule), un autre suit la souris. */
.member { position: relative; isolation: isolate; overflow: hidden; flex: 1; min-height: 196px; padding: 24px 26px; display: flex; flex-direction: column; border-radius: 12px; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.metal {
  color: #161b1e;
  background:
    radial-gradient(260px circle at var(--mx, 78%) var(--my, 18%), rgba(255, 255, 255, 0.55), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='600' height='300' filter='url(%23b)'/%3E%3C/svg%3E") 0 0 / 600px 300px,
    linear-gradient(172deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0.1)),
    linear-gradient(112deg, #a4adb2 0%, #e9edef 20%, #b7bfc3 38%, #f4f6f7 52%, #a9b2b7 70%, #d8dde0 86%, #b0b9bd 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(0, 0, 0, 0.32), inset 1px 0 0 rgba(255, 255, 255, 0.55), inset -1px 0 0 rgba(0, 0, 0, 0.16),
    inset 0 0 0 2px rgba(255, 255, 255, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.55), 0 30px 60px -28px rgba(0, 0, 0, 0.95);
}
.metal::before {
  content: ""; position: absolute; z-index: -1; top: -60%; bottom: -60%; left: -40%; width: 34%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38) 50%, transparent);
  transform: translateX(0) rotate(14deg); animation: metal-sheen 10s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
@keyframes metal-sheen { 0%, 55% { transform: translateX(0) rotate(14deg); } 100% { transform: translateX(480%) rotate(14deg); } }
.metal::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 35%, rgba(0, 0, 0, 0.08)); }
.member-name { font-size: 20px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65); }
.member-name .t2 { display: block; color: #4f5a5f; font-weight: 500; }
.member-mark { position: absolute; top: 24px; right: 26px; width: 24px; height: 24px; fill: #1d2326; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7)); }
.member-price { margin-top: auto; padding-top: 18px; font-size: clamp(54px, 5.2vw, 72px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; color: #11161a; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(0, 0, 0, 0.15); }
.member-price small { margin-left: 10px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: #46525a; text-shadow: none; }
.member-left { margin-top: 8px; font-size: 14px; font-weight: 500; color: #2c3438; }
/* Les paliers, en une ligne : le palier du moment éclairé, ce qui reste en or et la barre des ventes. */
.ladder { margin-top: 12px; display: flex; gap: 4px; }
.ladder li { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 8px; overflow: hidden; border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.ladder .t-price { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--dim); }
.ladder li.now { flex: 2.4; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.ladder li.now .t-price { color: #fff; }
.ladder .t-state { font-size: 12.5px; font-weight: 500; color: var(--gold); }
.ladder .t-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.08); }
.ladder .t-bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--sold, 0%); background: var(--gold-metal); }
.ladder li.gone { opacity: 0.45; }
.ladder li.gone .t-price { text-decoration: line-through; }
.ladder-note { margin: 8px 0 18px; font-size: 13px; color: var(--dim); }
.buy-req { margin-top: 12px; font-size: 13px; color: var(--dim); text-align: center; }

/* La garantie, en carte sous le prix : la médaille en chrome liquide (seal.js), un liseré de métal dont le reflet
   suit la souris, le titre et le lien vers le calcul. Seule la médaille s'anime en continu. */
.guarantee-cells { margin-top: 12px; }
.guarantee { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 36px); padding-block: clamp(20px, 2.4vw, 28px); overflow: hidden; will-change: transform; transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.guarantee::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--rim-a, 200deg), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.06) 14%, rgba(255, 255, 255, 0.02) 30%, rgba(255, 255, 255, 0.35) 48%, rgba(255, 255, 255, 0.04) 66%, rgba(255, 255, 255, 0.12) 84%, rgba(255, 255, 255, 0.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.guarantee::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.4s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.06), transparent 60%);
}
.guarantee:hover::before { opacity: 1; }
.g-medal { position: relative; flex: none; width: clamp(132px, 13vw, 176px); aspect-ratio: 1; }
.g-medal::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -6%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.6), transparent); }
.g-medal canvas { position: absolute; z-index: 1; inset: -16%; width: 132%; height: 132%; }
.g-seal { position: absolute; z-index: 1; inset: 14%; width: 72%; height: 72%; color: var(--gold); }
.gl-ok .g-seal { display: none; }
.g-body h3 { font-size: clamp(22px, 2.3vw, 30px); font-weight: 400; line-height: 1.15; letter-spacing: -0.024em; }
/* Le titre en or liquide : un dégradé de métal, et un reflet qui le traverse lentement. */
.gold-text {
  background: linear-gradient(100deg, #b98b3a 0%, #f3d68f 18%, #fff3cf 27%, #d2a650 40%, #f6dc98 56%, #a87f34 72%, #ecca7c 100%) 0 0 / 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: gold-sheen 7s ease-in-out infinite;
}
@keyframes gold-sheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
.g-body p { margin-top: 12px; max-width: 46em; font-size: 15.5px; color: var(--text-2); }
.g-link { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 500; color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 4px; }
.g-link:hover { text-decoration-color: #fff; }

/* Le calcul, dans une modale : trois réglages à gauche, l'entonnoir à droite. */
.roi-modal {
  width: min(1040px, calc(100vw - 32px)); max-height: calc(100svh - 32px); padding: clamp(22px, 3vw, 36px); border: 0; border-radius: 18px; overflow: auto; color: var(--ink);
  background: #1b1c1e; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 60px 140px -30px rgba(0, 0, 0, 0.95);
}
.roi-modal::backdrop { background: rgba(6, 6, 7, 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.roi-modal[open] { animation: roi-in 0.3s cubic-bezier(0.2, 0.9, 0.2, 1); }
@keyframes roi-in { from { opacity: 0; transform: translateY(12px); } }
.roi-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(20px, 2.6vw, 28px); }
.roi-head h2 { font-size: clamp(24px, 2.6vw, 32px); }
.roi-close { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line); color: #fff; cursor: pointer; }
.roi-close svg { width: 15px; height: 15px; }
.roi-close:hover { background: rgba(255, 255, 255, 0.1); }
.roi { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.roi-in { display: grid; gap: clamp(22px, 2.6vw, 30px); align-content: start; }
.roi-q { margin: 0; padding: 0; border: 0; min-width: 0; }
.roi-q legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 12px; font-size: 16px; font-weight: 500; color: #fff; }
.roi-q legend i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line-2); font-style: normal; font-size: 12px; font-weight: 500; color: var(--text-2); }
.rchips { display: flex; flex-wrap: wrap; gap: 6px; }
.rchip { position: relative; cursor: pointer; }
.rchip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rchip > span {
  display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--text-2);
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.rchip > span small { font-size: 12.5px; font-weight: 400; opacity: 0.7; }
.rchip > span .ico { width: 15px; height: 15px; }
.rchip:hover > span { color: #fff; background: var(--card-2); }
.rchip input:checked + span { color: #0d0d0d; background: #fff; box-shadow: none; }
.rchip input:focus-visible + span { outline: 2px solid #fff; outline-offset: 3px; }
.rrange { margin-top: 16px; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px 12px; font-size: 14px; color: var(--text-2); }
.rrange output { font-size: 15px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.rrange input { grid-column: 1 / -1; width: 100%; height: 24px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.rrange input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #fff var(--fill, 50%), rgba(255, 255, 255, 0.12) var(--fill, 50%)); }
.rrange input::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #fff var(--fill, 50%), rgba(255, 255, 255, 0.12) var(--fill, 50%)); }
.rrange input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.rrange input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.rrange input:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }
.rprice { margin-top: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; font-size: 14px; color: var(--text-2); }
.rprice-box { display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 16px; font-weight: 600; color: #fff; }
.rprice-box:focus-within { box-shadow: inset 0 0 0 1px #fff; }
.rprice-box input { width: 5.5ch; border: 0; background: none; color: inherit; font: inherit; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.rprice-box input:focus { outline: none; }
.rprice-box input::-webkit-inner-spin-button, .rprice-box input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.roi-out { display: flex; flex-direction: column; padding: clamp(20px, 2.4vw, 28px); border-radius: 14px; background: var(--card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 0 1px var(--line); }
.roi-views { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 14px; color: var(--dim); }
.vpill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line-2); color: #fff; font-size: 15px; font-weight: 500; }
.vpill .ico { width: 16px; height: 16px; }
.roi-funnel { margin-top: clamp(18px, 2.2vw, 26px); display: grid; }
.roi-funnel li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.roi-funnel b { font-size: clamp(30px, 3vw, 40px); font-weight: 400; line-height: 1.05; letter-spacing: -0.035em; color: #fff; font-variant-numeric: tabular-nums; }
.roi-funnel span { font-size: 15px; color: var(--text-2); }
.roi-funnel .roi-rev { border-bottom: 0; }
.roi-funnel .roi-rev b { font-size: clamp(44px, 4.6vw, 64px); }
.roi-x { margin: 4px 0 22px; font-size: 15px; color: var(--text-2); }
.roi-x b { font-size: 18px; font-weight: 600; color: #fff; }
.roi-out .pill { margin-top: auto; }
.roi-note { margin-top: 12px; text-align: center; font-size: 13px; color: var(--dim); }

/* 5. Avant, après : ce que ça remplace, puis trois façons de faire aujourd'hui et vlog.sh, colonne éclairée. */
.repl { padding: 18px 22px; border-radius: var(--r); background: var(--card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), inset 0 0 0 1px rgba(255, 255, 255, 0.035); }
.repl-wide { margin-top: clamp(32px, 4vw, 48px); }
.repl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; font-size: 14px; color: var(--dim); }
.repl-head > span:first-child { color: #fff; font-weight: 500; }
.repl-head b { font-size: 15px; font-weight: 500; color: #fff; }
.repl ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 22px; }
.repl li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 14px; }
.repl li > img, .repl li > span { width: 22px; height: 22px; border-radius: 6px; }
.repl li b { overflow: hidden; font-weight: 400; color: var(--text-2); white-space: nowrap; text-overflow: ellipsis; }
.repl li s { font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
.lg-pr, .lg-ae { display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: -0.02em; }
.lg-pr { background: #00005b; color: #9999ff; box-shadow: inset 0 0 0 1.5px #9999ff; }
.lg-ae { background: #1f0040; color: #d291ff; box-shadow: inset 0 0 0 1.5px #d291ff; }
.vs-table { margin-top: 12px; overflow-x: auto; border-radius: var(--r); background: var(--card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), inset 0 0 0 1px rgba(255, 255, 255, 0.035); }
.vs-table table { width: 100%; min-width: 1040px; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.vs-table th, .vs-table td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.vs-table thead th { vertical-align: bottom; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.vs-table thead small { display: block; margin-top: 2px; color: var(--dim); font-size: 12.5px; font-weight: 400; letter-spacing: 0; }
.vs-table tbody th { width: 12%; color: #fff; font-weight: 500; }
.vs-table td { width: 20%; color: var(--dim); }
.vs-table td .ico-img { width: 14px; height: 14px; margin-right: 2px; vertical-align: -0.16em; }
.vs-table .us { width: 28%; background: rgba(255, 255, 255, 0.045); color: #fff; }
.vs-table tbody tr:last-child th, .vs-table tbody tr:last-child td { border-bottom: 0; }
.vs-table tbody tr:hover th, .vs-table tbody tr:hover td:not(.us) { background: rgba(255, 255, 255, 0.02); }
/* La ligne Before / After au-dessus des colonnes. */
.vs-group th { padding-block: 16px 0; border-bottom: 0; font-size: 12.5px; font-weight: 400; color: var(--dim); }
.vs-group .g-before::after, .vs-group .g-after::after { content: ""; display: block; height: 1px; margin-top: 10px; background: var(--line-2); }
.vs-group .g-after { color: #fff; }
.vs-group .g-after::after { background: rgba(255, 255, 255, 0.45); }
/* Les logos des outils de chaque colonne, en pile. */
.vs-logos { display: flex; align-items: center; margin-bottom: 10px; }
.vs-logos > * { width: 22px; height: 22px; border-radius: 6px; box-shadow: 0 0 0 2px #1d1e20; }
.vs-logos > * + * { margin-left: -5px; }
.vs-logos .ico { padding: 2px; border-radius: 6px; background: #26272a; }
.vs-logos .lg-pr { box-shadow: 0 0 0 2px #1d1e20, inset 0 0 0 1.5px #9999ff; }
.source { margin-top: 16px; font-size: 13px; color: var(--dim); }

/* 6. FAQ : les catégories à gauche, les questions à droite. */
.faq-cells { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); }
.faq-nav.cell { position: sticky; top: calc(var(--nav-h) + 16px); align-self: start; display: flex; flex-direction: column; gap: 2px; padding: 0; background: none; box-shadow: none; }
.faq-cat { text-align: left; background: none; border: 0; border-radius: 999px; padding: 9px 14px; color: var(--dim); font-size: 14.5px; font-weight: 500; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.faq-cat:hover { color: #fff; }
.faq-cat[aria-pressed="true"] { color: #fff; background: rgba(255, 255, 255, 0.08); }
.faq-list { padding-block: 4px; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:last-of-type { border-bottom: 0; }
.faq-list summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-size: 16.5px; font-weight: 500; letter-spacing: -0.01em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .ico, .faq-list summary .ico-img { width: 15px; height: 15px; }
.faq-list summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: linear-gradient(var(--dim), var(--dim)) center / 12px 1.5px no-repeat, linear-gradient(var(--dim), var(--dim)) center / 1.5px 12px no-repeat; transition: transform 0.2s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 40px 20px 0; max-width: 40em; font-size: 15.5px; color: var(--text-2); }
.faq-list details p .ico, .faq-list details p .ico-img { width: 14px; height: 14px; }
.faq-list .faq-logos { display: flex; gap: 14px; margin-top: -8px; color: var(--dim); }
.faq-logos .ico { width: 17px; height: 17px; }

/* 7. Appel final : le logo en métal, le titre, le bouton, puis trois rappels. */
section.final { padding-top: clamp(96px, 12vw, 176px); padding-bottom: 0; }
.final-in { display: grid; justify-items: center; text-align: center; }
.final h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.06; letter-spacing: -0.03em; }
.final .cta-row { margin-top: 32px; justify-content: center; }
.final-cards { margin-top: clamp(64px, 8vw, 104px); }
.final-cards p { margin-top: 6px; font-size: 15px; color: var(--text-2); }

/* Pied de page et logotype géant en métal. */
.foot { padding-top: clamp(56px, 7vw, 96px); overflow: hidden; }
.foot-cells { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); margin-top: 0; gap: 24px; }
.foot-cells .cell { padding: 32px 0; background: none; box-shadow: none; border-top: 1px solid var(--line); border-radius: 0; }
.foot-label { margin-bottom: 14px; font-size: 13px; color: var(--dim); }
.foot-line { font-size: 15px; }
.foot-disc-label { margin-top: 32px; }
.foot-disc { font-size: 13px; color: var(--dim); max-width: 34em; }
.foot-links { display: grid; gap: 10px; }
.foot-links a { font-size: 14.5px; color: var(--text-2); text-decoration: none; }
.foot-links a:hover { color: #fff; }
.foot-runs { display: grid; gap: 10px; font-size: 14.5px; color: var(--text-2); }
.foot-runs li { display: flex; align-items: center; gap: 8px; }
.foot-runs .ico, .foot-runs .ico-img { width: 15px; height: 15px; }
.wordmark {
  margin: 0 auto; max-width: var(--frame); padding: 2vw var(--pad) 0; text-align: center;
  font-size: clamp(110px, 24vw, 320px); font-weight: 500; letter-spacing: -0.06em; line-height: 0.82;
  background: linear-gradient(100deg, #2a2e30 0%, #9aa4a8 16%, #3b4447 32%, #8a989d 50%, #23292b 66%, #9aa8ac 82%, #343d40 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: calc(env(safe-area-inset-bottom) + 6px);
}

/* Le métal liquide (metal.js : le shader Liquid Metal de Paper Shaders) : le canvas se pose sous le contenu de l'élément ;
   ce que la page dessinait en CSS (liseré, SVG chromé) reste en secours et s'efface quand le métal est prêt. */
[data-metal="fill"], [data-metal="ring"] { position: relative; isolation: isolate; }
.metal-cv { position: absolute; display: block; pointer-events: none; }
.metal-fill, .metal-ring { z-index: -1; }
.metal-logo { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.7)); }
.hero-mark.metal-on svg { opacity: 0; }
.guarantee.metal-on::after { content: none; }
/* Le halo qui erre autour des boutons d'achat du hero et de la fin : une lueur blanche floue qui fait le tour du bouton. */
@property --halo { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.metal-halo::before {
  content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; width: 34%; height: 80%; border-radius: 50%; pointer-events: none;
  background: rgba(255, 255, 255, 0.3); filter: blur(14px);
  transform: translate(-50%, -50%) translate(calc(cos(var(--halo)) * 150%), calc(sin(var(--halo)) * 62%));
  animation: halo 11s linear infinite;
}
@keyframes halo { to { --halo: 360deg; } }

/* Barre d'achat fixe sur mobile, en verre. */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(18, 19, 21, 0.78); box-shadow: 0 -1px 0 var(--line); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  transform: translateY(110%); transition: transform 0.25s ease;
}
.sticky-cta.show { transform: none; }
.sticky-cta p { margin-top: 6px; text-align: center; font-size: 13px; color: var(--dim); }
@media (min-width: 761px) { .sticky-cta { display: none; }}

/* Pages simples : paiement, merci, 404 */
.simple { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-top: 48px; padding-bottom: 48px; max-width: 760px; }
.simple .brand { margin-bottom: 48px; }
.simple-title { font-size: clamp(36px, 5vw, 56px); }
.simple-steps { margin-top: 32px; display: grid; gap: 14px; counter-reset: s; }
.simple-steps li { counter-increment: s; display: flex; align-items: center; gap: 14px; color: var(--text-2); font-size: 17px; }
.simple-steps li::before { content: counter(s); flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line-2); color: #fff; font-size: 13px; }
.simple-steps b { color: #fff; font-weight: 500; }
.simple-actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }

/* Tablette */
@media (max-width: 1100px) {
  .repl ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv { flex-basis: calc((100% - 48px) / 5); }
  .why-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wc, .wc-half { grid-column: span 1; }
  .wc-yes { grid-column: span 2; }
  .wc-yes .wv { max-width: 380px; }
  .win-id > span:last-child { display: none; }}

/* Téléphone */
@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .announce { font-size: 12.5px; gap: 4px 12px; }
  .announce .arr { display: none; }
  .nav-in { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  .hero-mark { margin-bottom: 22px; }
  .hero-logo { width: 64px; height: 64px; }
  /* La fenêtre : plus de nom d'app, les cinq chapitres tiennent sur la largeur, sans icônes. */
  .win { padding: 5px; border-radius: 16px; }
  .win-bar { padding-bottom: 5px; }
  .win-id { display: none; }
  .chapters { width: 100%; height: 40px; }
  .chapters button { flex: 1; justify-content: center; height: 32px; padding: 0 4px; font-size: 13px; }
  .chapters button svg { display: none; }
  .chapters button i { left: 10px; width: calc((100% - 20px) * var(--p, 0)); bottom: 4px; }
  .player-frame { border-radius: 11px; }
  .repl ul { grid-template-columns: 1fr; }
  .roi { grid-template-columns: 1fr; }
  .roi-out { order: -1; }
  .roi-out .pill { margin-top: 4px; }
  .guarantee { flex-direction: column; align-items: flex-start; gap: 10px; }
  .g-medal { width: 140px; }
  .rchip > span { min-height: 36px; padding: 0 12px; font-size: 13.5px; }
  .platforms { flex-direction: column; align-items: flex-start; }
  .plat-list { gap: 12px 20px; }
  .reel2 { display: grid; grid-auto-flow: column; grid-auto-columns: 64vw; justify-content: start; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; }
  .reel2::-webkit-scrollbar { display: none; }
  .rv { scroll-snap-align: start; }
  .why-cells { grid-template-columns: 1fr; }
  .wc, .wc-half, .wc-yes { grid-column: auto; }
  .wc .wv, .wc-half .wv { height: auto; }
  .wc h3 { margin-top: 16px; }
  .gh-grid i:nth-child(-n+182), .gh-months span:nth-child(-n+6) { display: none; }
  .cells-2, .cells-3, .faq-cells, .foot-cells { grid-template-columns: 1fr; }
  .foot-cells { gap: 0; }
  /* Sur téléphone, le tableau défile à l'horizontale ; les étapes restent collées à gauche. */
  .vs-table tbody th, .vs-group th:first-child { position: sticky; left: 0; z-index: 1; width: 112px; min-width: 112px; background: #1d1e20; }
  .vs-table table { min-width: 900px; font-size: 13.5px; }
  .vs-table th, .vs-table td { padding: 14px; }
  .ladder li:nth-child(n+4) { display: none; }
  .faq-nav.cell { position: static; flex-direction: row; overflow-x: auto; gap: 2px; scrollbar-width: none; }
  .faq-cat { flex: none; padding: 8px 13px; font-size: 14px; }
  .faq-list summary { font-size: 16px; }
  .foot { padding-bottom: 96px; }}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .rv-you { order: 9; }
.rv.rv-show { animation: none; }
  .for-ink { transition: none; }}