/* GeniusClip — marketing landing
 *
 * Brand v0.4.0 — exactly the assets used by docs/brand/option-a.html
 * (brand splash) :
 *   • canvas indigo profond #0A0E1A + grille snow subtile en arrière-plan
 *   • mark C "Cut Frame" snow en silhouette (CSS mask)
 *   • wordmark "Genius" snow + "Clip" amber #E8C58A
 *   • fonts Inter Tight (display) + Inter (body) + JetBrains Mono
 *   • un seul accent amber, jamais de gradient, jamais de second serif
 *
 * Mirrors les tokens de styles.css (SPA) et design-tokens.json.
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* === Palette ================================================== */
  --bg:           #0A0E1A;
  --surface:      #11172A;
  --surface-2:    #161C32;
  --surface-3:    #1A2138;
  --border:       #232A42;
  --border-soft:  #1A2138;
  --line-strong:  #2D3650;

  --ink:          #F5F6FA;
  --ink-soft:     #C9D0E1;
  --muted:        #A8AEC2;
  --muted-2:      #6B7088;

  --accent:       #E8C58A;
  --accent-ink:   #0E1429;
  --accent-hover: #D9A155;
  --accent-tint:       rgba(232, 197, 138, 0.08);
  --accent-tint-2:     rgba(232, 197, 138, 0.14);
  --accent-border:     rgba(232, 197, 138, 0.28);

  --success: #7ED9A8;

  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-sans:    'Inter', 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --container: 1200px;
  --gutter-x: clamp(20px, 4vw, 40px);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* === Base ====================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter-x);
  padding-right: var(--gutter-x);
}

/* === Reveal-on-scroll ========================================== */
.reveal-on-scroll, .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal-on-scroll.is-visible, .reveal.is-visible {
  opacity: 1; transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll, .reveal { opacity: 1; transform: none; transition: none; }
}

/* === Buttons =================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition: background 180ms var(--ease), color 180ms var(--ease),
              border-color 180ms var(--ease), transform 120ms var(--ease);
  cursor: pointer;
  text-decoration: none;
}
.btn-sm { font-size: 14px; padding: 8px 14px; }
.btn-md { font-size: 15px; padding: 11px 18px; }
.btn-lg { font-size: 16px; padding: 14px 24px; border-radius: 8px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--ink-soft); }
.btn-ghost:hover { background: var(--surface-3); color: var(--ink); }
.btn-outline {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--border);
}
.btn-outline:hover { border-color: var(--line-strong); color: var(--ink); }

/* === Canonical Mark C "Cut Frame" ============================== */
.brand-mark, .gc-mark {
  width: 28px;
  height: 28px;
  flex: none;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M 32 18 L 68 18 L 68 42 L 50 60 L 68 60 L 68 82 L 32 82 Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M 32 18 L 68 18 L 68 42 L 50 60 L 68 60 L 68 82 L 32 82 Z'/></svg>");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  color: var(--ink);
}
.brand-mark.sm, .gc-mark.sm { width: 20px; height: 20px; }
.brand-mark.lg, .gc-mark.lg { width: 44px; height: 44px; }

/* === BETA pill ================================================= */
.beta-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px solid var(--accent-border);
  border-radius: 4px;
  line-height: 1;
  vertical-align: 2px;
}

/* === Language toggle =========================================== */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.lang-toggle button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--muted-2);
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
  font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit;
}
.lang-toggle button:hover { color: var(--ink-soft); }
.lang-toggle button.active { background: var(--accent); color: var(--accent-ink); }

/* === Topbar — static (scroll-away), pas de sticky, pas de backdrop-blur.
   Casse le pattern AI universel "sticky nav qui suit le scroll". */
.topbar {
  background: transparent;
  border-bottom: 1px solid var(--border);
}
.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 16px;
  min-width: 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
  min-width: 0;
  flex-shrink: 0;
}
/* Wordmark sans accent amber sur "Clip" — drop du highlight color
   sur partie de mot (AI-template wordmark move). Le mot est plein ink. */
.brand .accent { color: inherit; }
.nav-links {
  display: none;
  gap: 28px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  min-width: 0;
}
.nav-links a:hover { color: var(--ink); }
@media (min-width: 880px) { .nav-links { display: inline-flex; } }
.topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* Mobile : the "Sign in" ghost button gets hidden so the primary CTA
   stays visible without overflowing on 360-430px viewports. */
@media (max-width: 600px) {
  .topbar-actions .btn-ghost { display: none; }
  .lang-toggle { display: none; }
  .brand { font-size: 18px; gap: 8px; }
  .topbar-row { gap: 12px; height: 56px; }
}

/* === Hero ====================================================== */
.hero {
  padding: 72px 0 64px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
}
.hero-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0 0 22px;
}
.hero-h1 .hl { color: var(--accent); }
.section-title {
  font-family: var(--font-display);
}
.hero-sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 56ch;
  margin: 0 0 32px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* === Hero extract — preuve produit textuelle ===================
   Remplace l'ancienne grille de fausses tuiles vidéo. Le visiteur
   voit immédiatement la sortie d'un job Studio : source réelle,
   3 clips choisis avec time-codes, contexte (compte cible, format,
   sous-titres, variante A/B), score, et un résumé en pied. */
.hero-extract {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  min-width: 0;
  box-shadow:
    inset 0 1px 0 rgba(245, 246, 250, 0.03),
    0 24px 48px -24px rgba(0, 0, 0, 0.55);
}
.hx-head {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.hx-source-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hx-source-meta { min-width: 0; }
.hx-source-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hx-source-stats {
  font-size: 11.5px;
  color: var(--muted-2);
  margin-top: 2px;
}
.hx-status {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--success);
  padding: 3px 8px;
  background: rgba(126, 217, 168, 0.10);
  border: 1px solid rgba(126, 217, 168, 0.32);
  border-radius: 4px;
}
.hx-clips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hx-clip {
  display: grid;
  grid-template-columns: 92px 1fr 40px;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
}
.hx-clip + .hx-clip { border-top: 1px solid var(--border-soft); }
.hx-clip-time {
  font-size: 11.5px;
  color: var(--muted-2);
  white-space: nowrap;
}
.hx-clip-body { min-width: 0; }
.hx-clip-body h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.hx-clip-meta {
  font-size: 11px;
  color: var(--muted-2);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hx-clip-score {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-align: right;
}
.hx-foot {
  font-size: 11px;
  color: var(--muted-2);
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
@media (max-width: 480px) {
  .hero-extract { padding: 14px 14px 12px; }
  .hx-clip { grid-template-columns: 78px 1fr 36px; gap: 10px; }
  .hx-clip-time { font-size: 11px; }
  .hx-clip-body h4 { font-size: 13.5px; }
}

/* === Section header ============================================ */
.section { padding: 96px 0; }
.section-title {
  font-weight: 800;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0 0 16px;
}

/* === Section head shared ======================================= */
.section { padding: 96px 0; position: relative; }
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.section-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* === Flow (3-step vertical timeline) ============================
   Remplace l'ancienne grille 3 cartes identiques. Une colonne unique,
   les étapes alignées sur un filet vertical, le numéro à gauche, le
   texte au centre, la meta technique à droite. Casse la symétrie
   typique des landings AI-générées. */
.flow {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 760px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.flow::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--border);
}
.flow-step {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 6px 0;
  position: relative;
}
.flow-num {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.flow-text h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 4px 0 6px;
}
.flow-text p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 52ch;
}
.flow-meta {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted-2);
  white-space: nowrap;
}
.mono { font-family: var(--font-mono); }
@media (max-width: 720px) {
  .flow-step {
    grid-template-columns: 32px 1fr;
    gap: 14px;
  }
  .flow-meta {
    grid-column: 2;
    align-self: start;
    margin-top: -4px;
  }
  .flow::before { left: 16px; }
  .flow-num { width: 32px; height: 32px; font-size: 13px; }
}

/* === Bento (6 features, asymmetric) =============================
   1 hero card (large, 2 cols × 2 rows) + 2 medium (1×1) à droite +
   3 compact (1×1) en pied. Casse la grille 3×2 d'égales identiques. */
.features {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 720px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}
@media (min-width: 1024px) {
  .bento {
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
  }
  .bento-hero {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .bento-med {
    grid-column: span 1;
    grid-row: 1;
  }
  .bento-med:nth-of-type(2) { grid-column: 2; }
  .bento-med:nth-of-type(3) { grid-column: 3; }
  .bento-compact:nth-of-type(4) { grid-column: 2; grid-row: 2; }
  .bento-compact:nth-of-type(5) { grid-column: 3; grid-row: 2; }
  .bento-compact:nth-of-type(6) {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 18px;
    align-items: center;
  }
  .bento-compact:nth-of-type(6) .bento-icon { margin-bottom: 0; }
  .bento-compact:nth-of-type(6) h4 { margin: 0 0 4px; }
}
.bento-cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: border-color 220ms var(--ease), transform 220ms var(--ease);
  display: flex;
  flex-direction: column;
}
.bento-cell:hover { border-color: var(--accent-border); }
.bento-hero {
  padding: 32px;
  background: var(--surface);
  border-color: var(--accent-border);
}
.bento-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--accent-tint);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.bento-icon svg { width: 20px; height: 20px; }
.bento-hero .bento-icon { width: 48px; height: 48px; margin-bottom: 20px; }
.bento-hero .bento-icon svg { width: 24px; height: 24px; }
.bento-cell h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bento-hero h3 {
  font-size: 24px;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.bento-cell h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bento-cell p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.bento-hero p {
  font-size: 15px;
  color: var(--muted);
  max-width: 42ch;
}
.bento-illu {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.bento-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink-soft);
}
.bento-pill.viral { color: var(--accent); border-color: var(--accent-border); background: var(--accent-tint); }
.bento-pill.money { color: var(--success); border-color: rgba(126, 217, 168, 0.28); background: rgba(126, 217, 168, 0.08); }
.bento-link {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0;
  white-space: nowrap;
  margin-left: auto;
  text-decoration: none;
  transition: color 160ms var(--ease);
}
.bento-link:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.feat-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  line-height: 1.3;
  vertical-align: 1px;
}

/* === Proof blocs ================================================
   3 articles successifs : Pourquoi ce clip · Hooks proposés · Variantes
   par compte. Présentation éditoriale de la logique du Studio. */
.proof { padding: 96px 0; }
.proof .container { display: flex; flex-direction: column; gap: 28px; }
.proof-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px clamp(20px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
}
.proof-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.proof-block-head h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.proof-block-meta {
  font-size: 12px;
  color: var(--muted-2);
}
.proof-block-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  padding: 0;
}
.proof-block-foot {
  font-size: 12.5px;
  color: var(--muted-2);
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin: 0;
}
.proof-block-foot strong { color: var(--accent); font-weight: 600; }

/* Critères d'un clip choisi : 5 lignes (Hook / Autonomie / Tension /
   Payoff / Format) — label gauche + score + note explicative. */
.proof-criteria { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.proof-criteria li {
  display: grid;
  grid-template-columns: 110px 64px 1fr;
  gap: 16px;
  align-items: baseline;
}
@media (max-width: 600px) {
  .proof-criteria li { grid-template-columns: 90px 50px 1fr; gap: 10px; }
}
.proof-criteria .pc-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.proof-criteria .pc-value {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent);
}
.proof-criteria .pc-note {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}

/* Hooks proposés : 3 propositions A/B/C avec tag + phrase + note. */
.proof-hooks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.proof-hooks li { display: flex; flex-direction: column; gap: 6px; }
.proof-hooks .ph-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted-2);
}
.proof-hooks p {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  max-width: 56ch;
}
.proof-hooks .ph-note { font-size: 12.5px; color: var(--muted); }

/* Tableau variantes : 4 colonnes, header neutre, lignes bordées. */
.proof-variants {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.proof-variants th,
.proof-variants td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.proof-variants thead th {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted-2);
  text-transform: none;
}
.proof-variants tbody tr:last-child td { border-bottom: 0; }
.proof-variants td { color: var(--ink-soft); line-height: 1.5; }
.proof-variants td strong { color: var(--ink); display: block; font-weight: 600; font-size: 14px; }
.proof-variants td .mono { font-size: 11px; color: var(--muted-2); }
@media (max-width: 760px) {
  .proof-variants { font-size: 12.5px; }
  .proof-variants th, .proof-variants td { padding: 10px 6px; }
}

/* === Statut produit (4 colonnes, matrice unique) ===============
   Une seule vérité produit visible depuis la landing : Disponible /
   Bêta limitée / En développement / Sur la feuille de route. */
.status-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 720px)  { .status-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .status-grid { grid-template-columns: repeat(4, 1fr); } }
.status-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.status-col header { display: flex; align-items: center; gap: 10px; }
.status-col header h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
.sc-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: none;
}
.sc-dot.sc-shipped  { background: var(--success); }
.sc-dot.sc-beta     { background: var(--accent); }
.sc-dot.sc-dev      { background: var(--warn); }
.sc-dot.sc-roadmap  { background: var(--muted-2); }
.status-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.status-col li {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  padding-left: 14px;
  position: relative;
}
.status-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 1px;
  background: var(--muted-2);
}
.sc-note {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--muted-2);
  line-height: 1.5;
}

/* === Pricing (asymmetric 1+2 layout) ============================
   Le plan recommandé occupe l'espace principal en colonne unique.
   Les deux autres plans s'empilent verticalement en colonne droite,
   plus compacts, comme des alternatives. Casse la grille
   "3 cartes identiques" typique des landings AI-générées. */
.pricing-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1040px;
  margin: 0 auto;
  align-items: start;
}
@media (min-width: 920px) {
  .pricing-layout {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 28px;
  }
}

.plan-featured {
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  min-height: 100%;
  transition: border-color 220ms var(--ease);
}
.plan-featured:hover { border-color: var(--accent); }
.plan-featured-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
}
.plan-featured-head .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.025em;
  color: var(--ink);
  display: block;
  margin-bottom: 6px;
}
.plan-featured-head .desc {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
  max-width: 42ch;
}
.plan-featured-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.plan-featured-price .amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
}
.plan-featured-price .per { font-size: 15px; color: var(--muted); }
.plan-featured-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 560px) {
  .plan-featured-list { grid-template-columns: repeat(2, 1fr); gap: 14px 24px; }
}
.plan-featured-list li {
  font-size: 14.5px;
  color: var(--ink-soft);
  padding-left: 26px;
  position: relative;
  line-height: 1.45;
}
.plan-featured-list li::before,
.plan-side ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 14px; height: 14px;
  background-color: var(--success);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8 L7 11.5 L13 5.5' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8 L7 11.5 L13 5.5' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.plan-featured-cta {
  align-self: stretch;
  justify-content: center;
}

.plan-side-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.plan-side {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 200ms var(--ease);
}
.plan-side:hover { border-color: var(--line-strong); }
.plan-side header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.plan-side .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.plan-side-price { display: inline-flex; align-items: baseline; gap: 4px; }
.plan-side-price .amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.plan-side-price .per { font-size: 12px; color: var(--muted-2); }
.plan-side .desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}
.plan-side ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-side ul li {
  font-size: 13px;
  color: var(--ink-soft);
  padding-left: 20px;
  position: relative;
  line-height: 1.45;
}
.plan-side-link {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent);
  text-decoration: none;
  align-self: flex-start;
}
.plan-side-link:hover { color: var(--accent-hover); }
.pricing-link {
  text-align: center;
  margin: 32px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
}
.pricing-link a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.pricing-link a:hover { color: var(--accent-hover); }

/* === FAQ (accordion) ============================================= */
.faq-list { max-width: 780px; margin: 0 auto; }
details.faq {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 20px;
  margin-bottom: 10px;
  background: var(--surface);
  transition: border-color 200ms var(--ease);
}
details.faq[open] { border-color: var(--accent-border); }
details.faq > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--ink);
}
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary::after {
  content: "+";
  font-size: 20px;
  color: var(--accent);
  line-height: 1;
}
details.faq[open] > summary::after { content: "–"; }
details.faq .faq-body {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}
details.faq .faq-body strong { color: var(--ink); font-weight: 600; }

/* === Final CTA banner ============================================ */
.cta-final { padding: 96px 0 120px; }
.cta-banner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(40px, 6vw, 64px);
  text-align: center;
  position: relative;
}
.cta-banner h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 14px;
}
.cta-banner p {
  font-size: 17px;
  color: var(--muted);
  max-width: 540px;
  margin: 0 auto 28px;
  line-height: 1.55;
}
.cta-banner .micro {
  display: inline-flex;
  gap: 18px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted-2);
}

/* === Footer ==================================================== */
.footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 64px 0 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin-bottom: 40px;
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
}
.footer-grid-minimal { grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 760px) {
  .footer-grid-minimal { grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
}
.footer-col h5 {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
  margin: 0 0 14px;
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: var(--muted);
  padding: 4px 0;
  transition: color 160ms var(--ease);
}
.footer-col a:hover { color: var(--ink); }
.footer-tagline {
  font-size: 14px;
  color: var(--muted);
  margin: 14px 0;
  line-height: 1.55;
  max-width: 36ch;
}
.footer-legal {
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: var(--muted-2);
}

/* Footer slim — 2 colonnes au lieu de 4. Plus minimal, casse le
   pattern "produit / société / légal / brand" SaaS-template. */
.footer-slim {
  padding: 48px 0 32px;
}
.footer-slim-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.footer-slim-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 22px;
  font-size: 13.5px;
  color: var(--muted);
}
.footer-slim-links a { transition: color 160ms var(--ease); }
.footer-slim-links a:hover { color: var(--ink); }

.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px var(--gutter-x);
  border-top: 1px solid var(--border);
  color: var(--muted-2);
  font-size: 12.5px;
}
.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
}
.foot a {
  color: var(--muted);
  transition: color 160ms var(--ease);
}
.foot a:hover {
  color: var(--ink);
}
.foot-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.foot-brand-mark {
  opacity: 0.7;
}

/* === Mobile overrides ========================================== */
@media (max-width: 760px) {
  .hero { padding: 48px 0 40px; }
  .founder { padding: 56px 0 80px; }
}

/* === Operator Landing v0.6 =====================================
   La page d'accueil publique n'utilise plus le pattern hero + bento
   + pricing cards. Elle présente un atelier de production : sorties,
   décisions, comptes, pipeline. */
.operator-landing {
  position: relative;
  background:
    linear-gradient(180deg, rgba(17, 23, 42, 0.48), rgba(10, 14, 26, 0) 410px),
    linear-gradient(90deg, rgba(232, 197, 138, 0.035) 0 1px, transparent 1px 100%),
    var(--bg);
  background-size: auto, 96px 96px, auto;
}
.operator-landing::before {
  content: "";
  position: fixed;
  top: 92px;
  right: -84px;
  width: 360px;
  height: 360px;
  color: rgba(245, 246, 250, 0.028);
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M 32 18 L 68 18 L 68 42 L 50 60 L 68 60 L 68 82 L 32 82 Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M 32 18 L 68 18 L 68 42 L 50 60 L 68 60 L 68 82 L 32 82 Z'/></svg>");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
.operator-landing > * {
  position: relative;
  z-index: 1;
}
.operator-landing .topbar {
  background: rgba(10, 14, 26, 0.94);
}
.operator-landing .footer-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 840px) {
  .operator-landing .footer-grid {
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
  }
}
/* Hero centré — H1 + lede + URL form + alt-link centrés
   horizontalement. La preview vient juste après. */
.op-hero {
  padding: 88px 0 32px;
}
.op-hero-center {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}
.op-hero-center h1 {
  margin: 0;
  max-width: 18ch;
  text-align: center;
}
.op-hero-center h1 .hl {
  color: var(--accent);
  font-weight: inherit;
}
.op-hero-center .op-lede {
  text-align: center;
  margin: 0 auto;
  max-width: 52ch;
}
.op-hero-center .op-paste {
  margin: 14px auto 0;
  width: 100%;
  max-width: 560px;
}
.op-hero-center .op-paste-alt {
  margin: 4px auto 0;
  text-align: center;
}
@media (max-width: 600px) {
  .op-hero { padding: 56px 0 24px; }
  .op-hero-center h1 { max-width: none; }
}
.op-kicker {
  margin: 0 0 14px;
  color: var(--accent);
  font: 600 13px/1.4 var(--font-sans);
  letter-spacing: 0;
}
.op-hero h1,
.op-section h2 {
  font-family: var(--font-display);
  letter-spacing: -0.035em;
  color: var(--ink);
}
.op-hero h1 {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(38px, 5.6vw, 64px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.op-lede {
  max-width: 58ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.55;
}
.op-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0 0;
}
/* URL paste form — un input large, un bouton ambré collé à droite,
   le tout dans un container hairline. */
.op-paste {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 32px 0 0;
  padding: 6px 6px 6px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  max-width: 620px;
  transition: border-color 200ms var(--ease);
}
.op-paste:focus-within {
  border-color: var(--accent-border);
}
.op-paste-input {
  flex: 1;
  min-width: 0;
  height: 48px;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ink);
  font: 15px/1.4 var(--font-sans);
  padding: 0 10px 0 0;
}
.op-paste-input::placeholder { color: var(--muted-2); }
.op-paste-btn {
  flex: none;
  height: 48px;
  padding: 0 22px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 8px;
  font: 600 14.5px/1 var(--font-sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 160ms var(--ease), transform 120ms var(--ease);
  white-space: nowrap;
}
.op-paste-btn:hover { background: var(--accent-hover); }
.op-paste-btn:active { transform: translateY(1px); }
.op-paste-alt {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--muted-2);
}
.op-paste-alt a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.op-paste-alt a:hover { color: var(--ink); }
@media (max-width: 600px) {
  .op-paste {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
  }
  .op-paste-input { height: 44px; padding: 0 6px; }
  .op-paste-btn { width: 100%; height: 44px; }
}
/* .op-signal-strip + .op-note removed — décorative strip retirée du hero. */

/* Video slot — cadre vidéo. Tant que la vidéo n'existe pas, on affiche
   un cadre avec un texte explicite ; sinon on remplace le contenu par
   <video>. */
.op-video-slot {
  margin: 0 auto;
  max-width: 1080px;
  padding: 0 clamp(16px, 4vw, 40px) 96px;
}
.op-video-slot-inner {
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 24px;
}
.op-video-slot-inner p {
  margin: 0;
  font-size: 16px;
  color: var(--muted);
  font-weight: 500;
}
.op-video-slot-sub {
  font-size: 13px !important;
  color: var(--muted-2) !important;
  max-width: 42ch;
}

/* .op-board, .op-preview, .op-platforms retirés. */

/* Padding rhythm — pas de métronome 78px. Quatre cadences mélangées
   selon le poids du contenu. La hiérarchie verticale n'est plus uniforme. */
.op-section {
  padding: 96px 0 88px;
  border-top: 1px solid var(--border);
}
.op-section.op-output { padding: 64px 0 56px; }           /* dense */
.op-section.op-multi { padding: 120px 0 96px; }           /* large */
.op-section.op-pricing-teaser { padding: 80px 0 96px; border-top: 0; }
.op-section#processing { padding: 88px 0 96px; }
.op-section#selection { padding: 104px 0 80px; }
.op-section-head {
  max-width: 680px;
}
.op-section-head.narrow {
  max-width: 760px;
}
/* Section sans kicker : la h2 démarre directement, plus brut et moins
   template SaaS répété. Une marge top supplémentaire compense le poids
   visuel du kicker manquant. */
.op-section-head.no-kicker {
  padding-top: 8px;
}
.op-section-head.no-kicker h2 {
  font-weight: 700;
}
.op-section h2 {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.03;
}
.op-section-head p:not(.op-kicker),
.op-pricing p,
.op-faq-list p {
  color: var(--muted);
  line-height: 1.65;
  font-size: 16px;
}
.op-two-col {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 76px);
  align-items: start;
}

/* Op-output en prose libre : trois paragraphes éditoriaux qui
   décrivent ce qu'on récupère. */
.op-output-prose {
  margin-top: 28px;
  max-width: 64ch;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.op-output-prose p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.op-output-prose p em {
  font-style: italic;
  color: var(--ink);
}

/* Boxes : seuls les blocs primaires gardent le pattern border + bg + radius.
   Le multi-comptes, output, capability vivent en prose libre. */
.op-price-row,
.op-faq-list details {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
}
/* Orphans op-output-main/grid/copy/side/phone retirés — la sortie d'un
   job est décrite en prose dans .op-output-prose. */

/* .op-rubric (5-row table) converti en prose .op-rubric-prose.
   Plus de grille ultra-parallèle, juste 4 paragraphes éditoriaux. */
.op-rubric-prose {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 64ch;
}
.op-rubric-prose p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* op-account-table converti en prose .op-multi-prose. */
.op-multi-prose {
  max-width: 64ch;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.op-multi-prose h2 {
  margin: 0;
}
.op-multi-prose p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Capability list — prose-like, plus de box, juste des paragraphes
   avec label en gras intégré. Casse le pattern "6 cards parallèles". */
.op-capability-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 760px) {
  .op-capability-list { grid-template-columns: 1fr 1fr; gap: 22px 56px; }
}
.op-capability-list li {
  display: block;
  padding: 0;
  border: 0;
}
.op-capability-list strong {
  display: inline;
  color: var(--ink);
  font-weight: 600;
}
.op-capability-list strong::after {
  content: ". ";
}
.op-capability-list span {
  display: inline;
  color: var(--muted);
  line-height: 1.65;
  font-size: 15px;
}

/* .op-status-strip + .op-status-line retirés — la matrice 3-col à
   dots colorés est un AI default. Le contenu est dans about.html. */

/* === Pricing teaser (slim, anti-template) =====================
   Une seule ligne : phrase de positionnement + 2 CTA. Le détail
   des plans vit sur /tarifs. */
.op-pricing-teaser {
  padding-top: 0;
}
.op-pricing-line {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: end;
  padding: 36px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 880px) {
  .op-pricing-line { grid-template-columns: 1.4fr auto; gap: 40px; }
}
.op-pricing-line h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 10px;
  max-width: 22ch;
}
.op-pricing-line p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 56ch;
}
.op-pricing-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.op-faq-list {
  display: grid;
  gap: 10px;
}
.op-faq-list details {
  padding: 18px 20px;
}
.op-faq-list summary {
  color: var(--ink);
  font-weight: 650;
  cursor: pointer;
}
.op-faq-list p {
  margin: 12px 0 0;
}

/* .op-final removed — pas de banner CTA terminal, le footer prend le relais. */
.op-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.op-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1080px) {
  .op-two-col {
    grid-template-columns: 1fr;
  }
  .op-board { max-width: 760px; }
}
@media (max-width: 740px) {
  .op-hero { padding: 52px 0 48px; }
  .op-section { padding: 56px 0; }
  .op-hero h1 { font-size: clamp(40px, 12vw, 58px); }
  .op-rubric > div,
  .op-capability-list {
    grid-template-columns: 1fr;
  }
  .op-board-clips li {
    grid-template-columns: 1fr 34px;
  }
  .op-board-clips .op-time {
    grid-column: 1 / -1;
  }
  .op-board-source,
  .op-board-top,
  .op-board-export {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  .op-reveal { opacity: 1; transform: none; transition: none; }
}

/* Skip-link partagé (a11y) : hors écran, visible uniquement au focus clavier. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #F7C204;
  color: #14161C;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 700;
  z-index: 100;
}
.skip-link:focus { left: 16px; top: 16px; }