/* Micro SaaS Lab — page de vente
   Polices hébergées localement (SIL Open Font License) : aucune requête vers Google. */

@font-face { font-family: "Archivo"; src: url("fonts/archivo-var.woff2") format("woff2-variations"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jbmono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jbmono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #0A0A0B;
  --bg-2: #0E0E10;
  --surface: #141416;
  --surface-2: #121214;
  --line: #26262A;
  --line-soft: #1F1F23;
  --text: #F2F2F0;
  --text-2: #C4C4CC;
  --muted: #A1A1AA;
  --dim: #8E8E96;
  --lime: #D4FF3F;
  --lime-shadow: #8FAE1C;
  --lav: #C9B8FF;
  --paper: #F2F2F0;
  --paper-line: #D6D6D2;
  --ink-2: #55555C;
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 28px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 17px; line-height: 1.6; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
a:hover { color: var(--lime); }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--lime); color: var(--bg); padding: 10px 16px; border-radius: 8px; font-weight: 700; z-index: 10; }
.skip:focus { left: 8px; }

/* Typo */
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.display { font-family: var(--display); font-weight: 900; font-stretch: 72%; text-transform: uppercase; line-height: .95; letter-spacing: -.01em; }
.h1 { font-size: clamp(44px, 6.4vw, 96px); line-height: .92; }
.h2 { font-size: clamp(34px, 4.6vw, 64px); }
.lime { color: var(--lime); }
.lav { color: var(--lav); }
.section-head { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.section-head p.intro { font-size: 18px; color: var(--text-2); }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 30px; border-radius: 12px; font-weight: 700; font-size: 17px; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.btn-primary { background: var(--lime); color: var(--bg); box-shadow: 0 5px 0 var(--lime-shadow); }
.btn-primary:hover { color: var(--bg); transform: translateY(2px); box-shadow: 0 3px 0 var(--lime-shadow); }
.btn-ghost { color: var(--lime); border: 2px solid var(--lime); }
.btn-ghost:hover { background: rgba(212,255,63,.08); }
.btn-block { display: flex; width: 100%; min-height: 60px; font-size: 18px; }

/* En-tête */
.site-header { border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; z-index: 5; background: rgba(10,10,11,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 14px; }
.logo { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 800; font-size: 17px; }
.logo:hover { color: var(--text); }
.logo-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--lime); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; }
.nav { display: flex; align-items: center; gap: 6px 26px; font-size: 14px; font-weight: 600; }
.nav a:not(.btn) { text-decoration: none; padding: 12px 0; }
.nav .btn { min-height: 44px; padding: 0 18px; font-size: 14px; border-radius: 10px; box-shadow: none; }
@media (max-width: 860px) { .nav a:not(.btn) { display: none; } }
@media (max-width: 420px) { .hide-xs { display: none; } }

/* Hero */
.hero { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding-block: 80px 104px; }
.hero-copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.hero-copy .lede { max-width: 560px; font-size: 19px; color: var(--text-2); }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { border: 1px solid #2A2A30; border-radius: 999px; padding: 8px 16px; font-size: 14px; color: var(--text-2); }
.chip strong { color: var(--lime); }

.hero-visual { flex: 1 1 460px; min-width: 0; position: relative; height: 560px; }
.cover { position: absolute; width: 46%; aspect-ratio: 210 / 297; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 30px 60px rgba(0,0,0,.55); }
.cover .meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; }
.cover .n { font-family: var(--display); font-weight: 900; font-stretch: 72%; font-size: clamp(48px, 6vw, 72px); line-height: .88; }
.cover .t { font-weight: 700; font-size: 17px; margin-top: 6px; }
.cover-a { right: 2%; top: 0; background: var(--lime); color: var(--bg); transform: rotate(6deg); }
.cover-b { right: 20%; top: 26px; background: #1A1A1D; border: 1px solid #2E2E34; transform: rotate(-3deg); }
.cover-b .meta { color: var(--muted); }
.cover-b .n, .cover-b .meta span:last-child { color: var(--lav); }
.chat { position: absolute; left: 0; bottom: 0; width: 82%; background: var(--surface-2); border: 1px solid #2E2E34; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.65); }
.win-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.dot { width: 10px; height: 10px; border-radius: 999px; flex: none; }
.dot.r { background: #FF6B5E; } .dot.y { background: var(--lime); } .dot.v { background: var(--lav); }
.win-title { flex: 1 1 auto; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--muted); margin-right: 44px; }
.chat-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.45; }
.bubble-user { align-self: flex-end; max-width: 85%; background: #26262A; border-radius: 14px 14px 4px 14px; padding: 10px 14px; }
.bubble-ai { max-width: 92%; background: #17170F; border: 1px solid #3A4416; border-radius: 14px 14px 14px 4px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.bubble-ai .skill { font-family: var(--mono); font-size: 11px; color: var(--lime); }
.bubble-ai .ok { display: flex; gap: 8px; align-items: center; }
.bubble-ai .ok svg { flex: none; }
.bubble-ai .next { color: var(--text-2); }
.zip-tag { position: absolute; right: 0; bottom: 44px; background: var(--lav); color: var(--bg); border-radius: 12px; padding: 10px 14px; font-family: var(--mono); font-size: 12px; font-weight: 700; box-shadow: 0 16px 32px rgba(0,0,0,.5); }
@media (max-width: 560px) {
  .hero { padding-block: 48px 72px; }
  .hero-visual { height: 470px; }
  .cover { width: 52%; }
  .chat { width: 100%; }
  .zip-tag { display: none; }
  .hero-visual { height: 440px; }
}

/* Sections claires */
.light { background: var(--paper); color: var(--bg); padding-block: 104px; }
.light .eyebrow { color: var(--ink-2); }
.light a:hover { color: var(--bg); }
.mark { background: var(--lime); padding: 0 8px; }

/* Avant / après */
.compare { margin-top: 44px; border: 1px solid var(--paper-line); border-radius: 18px; overflow: hidden; background: #fff; }
.compare-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); border-top: 1px solid #E4E4E0; }
.compare-row p { padding: 22px 24px; }
.compare-head { border-top: 0; background: var(--bg); font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.compare-head p { padding-block: 14px; color: var(--muted); }
.compare-head p + p { color: var(--lime); }
.compare .before { color: #6B6B72; }
.compare .before span { text-decoration: line-through; text-decoration-color: #C4C4C4; }
@media (max-width: 600px) {
  .compare-head { display: none; }
  .compare .before::before, .compare .after::before { display: block; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
  .compare .before::before { content: "Seul avec l'IA"; color: #6B6B72; }
  .compare .after::before { content: "Avec Micro SaaS Lab"; color: #5C7400; }
  .compare .after { border-top: 1px dashed #E4E4E0; }
}
.compare .after { font-weight: 600; background: #FAFFE6; }

/* Étapes */
.block { padding-block: 112px 96px; display: flex; flex-direction: column; gap: 48px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.card h3 { font-size: 20px; }
.card p { color: var(--muted); }
.step-top { display: flex; justify-content: space-between; align-items: center; }
.step-n { font-family: var(--display); font-weight: 900; font-stretch: 72%; font-size: 56px; line-height: 1; color: var(--lime); }
.pill { font-family: var(--mono); font-size: 11px; color: var(--muted); border: 1px solid #2E2E34; border-radius: 6px; padding: 3px 8px; }
.note { border: 1px dashed #3A3A42; border-radius: 14px; padding: 18px 22px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; color: var(--text-2); }
.note .eyebrow { color: var(--lav); font-size: 12px; letter-spacing: .12em; }

/* Dans la boîte */
.box-section { border-top: 1px solid var(--line-soft); background: var(--bg-2); }
.box-section .block { padding-block: 104px; gap: 40px; }
.product { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.product-cover { padding: 22px; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; }
.product-cover .meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; }
.product-cover .meta span:last-child { border: 1px solid currentColor; border-radius: 6px; padding: 2px 8px; font-weight: 700; }
.product-cover .big { font-family: var(--display); font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: 54px; line-height: .9; }
.pc-lime { background: var(--lime); color: var(--bg); }
.pc-lav { background: var(--lav); color: var(--bg); }
.pc-dark { background: #1E1E22; }
.pc-dark .meta { color: var(--muted); }
.product-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.product-body h3 { font-size: 18px; }
.product-body p { color: var(--muted); }
.courses-head { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; justify-content: space-between; padding-top: 16px; }
.courses-head h3 { font-size: 32px; line-height: 1; }
.courses-head p { font-family: var(--mono); font-size: 13px; color: var(--dim); }
.courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.course { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: space-between; }
.course .meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9px; color: var(--dim); }
.course .meta span:last-child { color: var(--lav); }
.course .n { font-family: var(--display); font-weight: 900; font-stretch: 72%; font-size: 48px; line-height: .9; color: var(--lime); }
.course .t { font-weight: 700; font-size: 14px; line-height: 1.25; margin-top: 6px; }
.course .p { font-family: var(--mono); font-size: 10px; color: var(--dim); margin-top: 4px; }
.course.hl { background: var(--lime); border-color: var(--lime); color: var(--bg); }
.course.hl .n, .course.hl .meta, .course.hl .meta span:last-child, .course.hl .p { color: var(--bg); }
@media (max-width: 420px) { .courses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Origine */
.badge { align-self: flex-start; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--bg); border-radius: 6px; padding: 3px 10px; }
.badge.lime { background: var(--lime); } .badge.lav { background: var(--lav); }
.card.lg { padding: 30px; }
.card.lg h3 { font-size: 22px; }
.lessons { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 30px; display: flex; flex-direction: column; gap: 18px; }
.lessons .eyebrow { font-size: 12px; letter-spacing: .12em; }
.lessons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.lessons-grid div { display: flex; flex-direction: column; gap: 6px; }
.lessons-grid strong { font-weight: 700; }
.lessons-grid span { color: var(--muted); font-size: 15px; }

/* Pour qui */
.fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.fit-card { background: #fff; border: 1px solid var(--paper-line); border-radius: 18px; padding: 34px; display: flex; flex-direction: column; gap: 20px; }
.fit-card.no { background: #E8E8E4; color: #3F3F46; }
.fit-card.no h2 { color: var(--ink-2); }
.fit-card h2 { font-size: 36px; line-height: 1; }
.list { display: flex; flex-direction: column; gap: 14px; }
.list li { display: flex; gap: 12px; align-items: flex-start; }
.list svg { flex: none; margin-top: 3px; }

/* Offre */
.offer-wrap { padding-block: 112px 96px; }
.offer { background: var(--surface-2); border: 1px solid var(--line); border-radius: 22px; padding: clamp(24px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.offer-info { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.offer-info .eyebrow { font-size: 12px; letter-spacing: .16em; }
.offer-info h2 { font-size: clamp(32px, 3.6vw, 48px); }
.offer .list { gap: 10px; }
.price-box { flex: 1 1 320px; min-width: 0; border: 2px solid var(--lime); border-radius: 18px; padding: 28px; background: #16180F; display: flex; flex-direction: column; gap: 18px; }
.price { display: flex; align-items: baseline; gap: 10px; }
.price strong { font-family: var(--display); font-weight: 900; font-stretch: 72%; font-size: 84px; line-height: .9; }
.price span { color: var(--muted); }
.price-box .sub { font-size: 14px; color: var(--text-2); }
.price-box .legal { font-size: 12px; line-height: 1.6; color: var(--dim); }

/* FAQ */
.faq { max-width: 860px; margin: 0 auto; padding: 0 var(--gutter) 104px; display: flex; flex-direction: column; gap: 12px; }
.faq .eyebrow, .faq h2 { text-align: center; }
.faq h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1; margin-bottom: 20px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 22px; }
.faq summary { display: flex; gap: 16px; align-items: center; justify-content: space-between; min-height: 60px; font-weight: 700; font-size: 17px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq .plus { color: var(--lav); font-size: 24px; font-weight: 400; transition: transform .2s ease; flex: none; }
.faq details[open] .plus { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding-bottom: 20px; }
.faq .more { margin-top: 12px; font-family: var(--mono); font-size: 13px; color: var(--dim); text-align: center; }
.faq .more a { color: var(--lime); }

/* Appel final */
.final { padding-bottom: 112px; }
.terminal { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.terminal .dot { width: 12px; height: 12px; }
.terminal .win-title { font-size: 14px; color: var(--text-2); margin-right: 52px; }
.terminal-body { padding: clamp(44px, 7vw, 80px) var(--gutter); display: flex; flex-direction: column; gap: 22px; align-items: center; text-align: center; }
.terminal-body h2 { font-size: clamp(34px, 4.6vw, 62px); }
.terminal-body p { color: var(--muted); }
.terminal-body .btn { min-height: 60px; padding: 0 36px; font-size: 18px; }

/* Pied de page */
.site-footer { border-top: 1px solid var(--line-soft); }
.site-footer .wrap { padding-block: 40px 44px; display: flex; flex-direction: column; gap: 24px; }
.wordmark { font-family: var(--display); font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: clamp(52px, 13vw, 190px); line-height: .85; color: transparent; -webkit-text-stroke: 1px #34343B; white-space: nowrap; }
.footer-row { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line-soft); padding-top: 20px; }
.footer-row p { font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--dim); max-width: 640px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 14px; }
.footer-links a { padding: 12px 0; color: var(--muted); }

/* ===== Animations : fluides et « tech » ===== */
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
:root { --ease: cubic-bezier(.16, 1, .3, 1); }

/* Barre de progression de lecture */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 20; pointer-events: none; }
.progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--lav), var(--lime)); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 12px rgba(212,255,63,.6); }

.site-header { transition: box-shadow .4s var(--ease), border-color .4s var(--ease); }
.site-header.scrolled { box-shadow: 0 10px 30px rgba(0,0,0,.35); border-bottom-color: #2A2A30; }

/* Fond du haut : lumière qui suit la souris */
.hero-zone { position: relative; isolation: isolate; --mx: 70%; --my: 30%; }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-bg .glow { position: absolute; inset: 0; background: radial-gradient(520px circle at var(--mx) var(--my), rgba(212,255,63,.12), transparent 60%), radial-gradient(700px circle at 85% 10%, rgba(201,184,255,.10), transparent 60%); transition: background-position .2s; }

/* Apparition : flou → net, glissement doux */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(8px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].in { opacity: 1; transform: none; filter: none; }
.js .hero-visual[data-reveal] { transform: translate3d(0, 28px, 0) scale(.96); }
.js .hero-visual[data-reveal].in { transform: none; }

/* Couvertures qui flottent */
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.cover-a { animation: float 6s ease-in-out infinite; }
.cover-b { animation: float 7s ease-in-out -2s infinite; }

/* Conversation */
.typed { white-space: pre-wrap; }
.js .chat-body { min-height: 262px; }
@media (max-width: 560px) { .js .chat-body { min-height: 278px; } }
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.2em; background: var(--lime); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.typed-done .caret { display: none; }
.js .bubble-user { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.chat-on .bubble-user { opacity: 1; transform: none; }
.thinking { display: none; gap: 5px; padding: 12px 14px; background: #17170F; border: 1px solid #3A4416; border-radius: 14px 14px 14px 4px; align-self: flex-start; }
.thinking i { width: 6px; height: 6px; border-radius: 999px; background: var(--lime); animation: think 1s ease-in-out infinite; }
.thinking i:nth-child(2) { animation-delay: .15s; } .thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes think { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.thinking-on .thinking { display: inline-flex; }
.js .bubble-ai { display: none; }
.answer-on .bubble-ai, html:not(.js) .bubble-ai { display: flex; animation: pop .45s var(--ease); }
.js .bubble-ai > * { opacity: 0; transform: translate3d(-6px, 0, 0); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.js .bubble-ai > .on { opacity: 1; transform: none; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.js .zip-tag { opacity: 0; transform: translateY(12px) rotate(-6deg) scale(.9); transition: opacity .6s var(--ease), transform .6s cubic-bezier(.3,1.4,.5,1); }
.tag-on .zip-tag { opacity: 1; transform: none; }

/* Avant / après : barre et surlignage */
.compare .after { background: linear-gradient(90deg, #F3FFC7, #FAFFE6) no-repeat left / 0% 100%, #FFFFFF; transition: background-size 1.1s var(--ease) calc(var(--d, 0ms) + 250ms); }
.compare-row.in .after, html:not(.js) .compare .after { background-size: 100% 100%, auto; }
.compare .before span { text-decoration-color: transparent; transition: text-decoration-color .6s ease calc(var(--d, 0ms) + 150ms); }
.compare-row.in .before span, html:not(.js) .compare .before span { text-decoration-color: #C4C4C4; }

/* Cartes : léger soulèvement */
.card, .product { transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease), box-shadow .4s var(--ease); transition-delay: var(--d, 0ms), var(--d, 0ms), var(--d, 0ms), 0s; }
.card.in:hover, .product.in:hover, html:not(.js) .card:hover, html:not(.js) .product:hover { transform: translate3d(0, -6px, 0); box-shadow: 0 24px 50px rgba(0,0,0,.45); transition-delay: 0s; }

/* Prix : liseré qui tourne */
.price-box { border-color: transparent; background: linear-gradient(#16180F, #16180F) padding-box, conic-gradient(from var(--angle), var(--lime), var(--lav), #2E2E34 40%, #2E2E34 60%, var(--lime)) border-box; animation: spin 6s linear infinite; }
@keyframes spin { to { --angle: 360deg; } }
.offer.in .price-box { box-shadow: 0 0 0 6px rgba(212,255,63,.05), 0 30px 80px rgba(212,255,63,.08); }

/* Reflet sur le bouton d'achat */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-120%); animation: shine 4s var(--ease) 1.5s infinite; }
@keyframes shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }


/* Terminal */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.terminal.in .dot.y { animation: blink 1.6s ease-in-out infinite; }
.terminal { position: relative; }
.terminal::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px); }

/* Nom en contour qui s'allume */
.wordmark { transition: opacity 1.4s var(--ease), transform 1.4s var(--ease), filter 1.4s var(--ease), -webkit-text-stroke-color 1.4s var(--ease); }
.wordmark.in { -webkit-text-stroke-color: #4A4A52; }

/* Accessibilité : mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .cover-a, .cover-b, .terminal .dot.y, .price-box, .caret { animation: none !important; }
  .btn-shine::after { display: none; }
  .compare .after { background-size: 100% 100%, auto; transition: none; }
  .compare .before span { text-decoration-color: #C4C4C4; transition: none; }
}

/* ===== Survol : boutons pixel, texte qui défile, flèche, soulignement ===== */
.btn { position: relative; isolation: isolate; background: none !important; box-shadow: none !important; border: 0 !important; gap: 10px; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); transition: filter .35s var(--ease), color .3s; }
.btn:hover { transform: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
.btn > .btn-bg { position: absolute; inset: 0; z-index: -1; border-radius: inherit; transition: transform .45s var(--ease); }
.btn-primary > .btn-bg { background: linear-gradient(180deg, #E2FF6E 0%, var(--lime) 55%, #BFE52E 100%); box-shadow: inset 0 .5px 0 rgba(255,255,255,.6), 0 0 0 1px rgba(0,0,0,.25); }
.btn-ghost > .btn-bg { background: rgba(212,255,63,.03); box-shadow: inset 0 0 0 2px var(--lime); }
.btn:hover > .btn-bg { transform: scale(.955); }
.btn:active > .btn-bg { transform: scale(.93); }
.btn canvas.px { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }
.btn-primary:hover { color: var(--bg); }
.btn-ghost:hover { background: none; color: var(--lime); }

/* Texte qui défile */
.roll { position: relative; display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3em; vertical-align: middle; }
.roll > span { display: block; white-space: nowrap; transition: transform .5s var(--ease); }
.roll > span + span { position: absolute; left: 0; top: 100%; }
a:hover .roll > span, summary:hover .roll > span { transform: translateY(-100%); }

/* Flèche en pixels */
.parw { position: relative; display: inline-block; width: 14px; height: 14px; overflow: hidden; flex: none; }
.parw > svg { position: absolute; inset: 0; transition: transform .38s var(--ease); }
.parw > svg + svg { transform: translate(-115%, 115%); }
a:hover .parw > svg:first-child { transform: translate(115%, -115%); }
a:hover .parw > svg + svg { transform: none; transition-delay: 60ms; }

/* Liens : soulignement tracé de gauche à droite */
.nav a:not(.btn), .footer-links a, .faq .more a, .logo {
  text-decoration: none; background: linear-gradient(currentColor, currentColor) 100% 100% / 0% 1px no-repeat; padding-bottom: 2px; transition: background-size .45s var(--ease), color .3s;
}
.nav a:not(.btn):hover, .footer-links a:hover, .faq .more a:hover { color: var(--text); background-position: 0% 100%; background-size: 100% 1px; }
.logo { background: none; }
.logo:hover .logo-mark { transform: rotate(-8deg) scale(1.06); }
.logo-mark { transition: transform .45s cubic-bezier(.3,1.5,.5,1); }

/* Cartes : montée et grande ombre douce, les voisines s'effacent */
.card.in:hover, .product.in:hover, .lessons:hover, html:not(.js) .card:hover, html:not(.js) .product:hover { transform: translate3d(0, -4px, 0); box-shadow: 0 30px 56px -26px rgba(0,0,0,.9), 0 0 0 1px #33333A; transition-delay: 0s; }
.product .product-cover { transition: transform .6s var(--ease); }
.product:hover .product-cover { transform: translateY(-4px); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .grid-3 > * { transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease), box-shadow .45s var(--ease); }
  .grid-3:has(> :hover) > .in:not(:hover) { filter: blur(2.5px); opacity: .6; }
}

/* FAQ : la question défile, le + tourne */
.faq summary { transition: color .3s; }
.faq summary:hover { color: var(--lime); }
.faq summary:hover .plus { transform: rotate(90deg); }
.faq details[open] summary:hover .plus { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .btn > .btn-bg, .roll > span, .parw > svg { transition: none !important; }
  a:hover .roll > span { transform: none; }
  a:hover .parw > svg:first-child { transform: none; }
  .btn canvas.px { display: none; }
}

/* ===== Nom géant en pixels (pied de page) ===== */
.pixel-mark { display: none; width: 100%; padding-block: 24px 0; }
.pixel-mark canvas { display: block; touch-action: pan-y; }
.js .pixel-mark { display: block; }
.js .wordmark { display: none; }

/* Mots du titre en pixels */
.px-word { position: relative; display: inline-block; }
.px-word.px-ready { color: transparent; }
.px-word .px-canvas { position: absolute; left: 0; top: 0; touch-action: pan-y; }
@media print { .px-canvas { display: none; } .px-word.px-ready { color: var(--lime); } }

/* ===== Page de remerciement ===== */
.thanks-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding-block: 88px 104px; }
.thanks-copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.thanks-copy .lede { max-width: 540px; font-size: 19px; color: var(--text-2); }
.download, .prompt-box, .tree { background: var(--surface-2); border: 1px solid #2E2E34; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.55); }
.download { flex: 1 1 400px; min-width: 0; max-width: 520px; }
.download-body { padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.file { display: flex; align-items: center; gap: 16px; }
.file-icon { flex: none; width: 56px; height: 68px; border-radius: 10px; background: var(--lime); color: var(--bg); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; font-family: var(--mono); font-weight: 700; font-size: 13px; clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%); }
.file-name { font-family: var(--mono); font-size: 14px; font-weight: 700; word-break: break-all; }
.file-meta { font-size: 14px; color: var(--muted); }
.download-note { font-size: 13px; line-height: 1.6; color: var(--dim); }

.prompt-box { box-shadow: none; }
.prompt-body { padding: 22px 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.prompt-text { flex: 1 1 420px; min-width: 0; font-family: var(--mono); font-size: 15px; line-height: 1.7; color: var(--text); }
.copy { flex: none; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid #3A3A42; background: #1A1A1D; color: var(--text); font: 600 14px var(--body); cursor: pointer; transition: border-color .3s, color .3s, background .3s; }
.copy:hover { border-color: var(--lime); color: var(--lime); }
.copy.done { border-color: var(--lime); background: var(--lime); color: var(--bg); }

.tree { box-shadow: none; }
.tree-list { padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 14px; }
.tree-list li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.tree-list .branch { color: #4A4A52; }
.tree-list .path { color: var(--text); font-weight: 700; }
.tree-list .what { color: var(--dim); }
.tree-list .what::before { content: "# "; color: #4A4A52; }
code { font-family: var(--mono); font-size: .88em; background: #1E1E22; border: 1px solid #2E2E34; border-radius: 6px; padding: 1px 6px; }
.card a { color: var(--lime); }
@media (max-width: 560px) { .thanks-hero { padding-block: 48px 72px; } .tree-list .what { flex-basis: 100%; padding-left: 36px; } }

/* Bouton de téléchargement inactif (page merci sans lien d'achat) */
.btn.is-disabled { opacity: .55; pointer-events: none; cursor: default; }

/* ===== Mobile : conversion ===== */
.reassure { font-size: 13px; color: var(--muted); }
.price-box .reassure { text-align: center; margin-top: -6px; }
.price-box .legal .cgv-link { text-decoration: underline; display: inline-block; padding: 6px 0; }
.faq .more a { display: inline-block; padding: 10px 2px; }
.footer-links a { min-height: 44px; display: inline-flex; align-items: center; }
.buybar { display: none; }
@media (max-width: 720px) {
  .nav .btn { display: none; }
  .buybar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(10,10,11,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid #2A2A30; transform: translateY(110%); transition: transform .45s var(--ease); }
  .buybar.show { transform: none; }
  .buybar-info { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
  .buybar-info strong { font-family: var(--display); font-weight: 900; font-stretch: 72%; font-size: 30px; color: var(--text); }
  .buybar-info span { font-size: 12px; color: var(--muted); white-space: nowrap; }
  .buybar .btn { min-height: 50px; padding: 0 20px; font-size: 16px; flex: none; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .price-box .legal { font-size: 13px; }
}
@media (max-width: 560px) {
  .hero { padding-block: 28px 56px; gap: 40px; }
  .hero-copy { gap: 18px; }
  .hero-copy .eyebrow { font-size: 11px; letter-spacing: .1em; }
  .hero-copy .lede { font-size: 17px; line-height: 1.5; }
  .actions { flex-direction: column; gap: 10px; }
  .actions .btn { width: 100%; }
  .actions .btn-ghost { min-height: 50px; font-size: 16px; }
  .chip { font-size: 13px; padding: 6px 12px; }
  .block { padding-block: 72px 64px; gap: 36px; }
  .light { padding-block: 72px; }
  .offer-wrap { padding-block: 72px 64px; }
  .faq { padding-bottom: 72px; }
  .offer { padding: 18px; gap: 28px; }
  .price-box { padding: 20px 18px; }
  .price strong { font-size: 72px; }
  .btn-block { padding: 0 16px; }
}
@media (max-width: 360px) {
  .buybar-info span { display: none; }
}