/* ─────────────────────────────────────────────────────────────────────────
   Pipelis — site vitrine
   Thème sombre, aligné sur l'application : fond presque noir, accent bleu,
   surfaces qui s'éclaircissent par paliers plutôt que par des ombres.
   Aucune dépendance externe : polices système, zéro CDN.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --bg: #0b0b0d;            /* un cran plus profond : les cartes se détachent mieux */
  --bg-soft: #131316;
  --card: #17171a;
  --card-2: #1c1c20;
  --border: #26262b;
  --border-soft: #1e1e22;
  --text: #f5f5f7;
  --text-2: #a6a6ad;
  --text-3: #74747c;
  --accent: #0a84ff;
  --accent-clair: #5ac8fa;
  --accent-soft: rgba(10, 132, 255, 0.12);
  --green: #32d74b;
  --orange: #ff9f0a;
  --radius: 16px;
  --radius-sm: 10px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable",
          "Segoe UI", Inter, Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(10, 132, 255, 0.35); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }

a { color: inherit; text-decoration: none; }

/* ─── Boutons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: 12px;
  font-size: 15px; font-weight: 600; font-family: var(--font);
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #3899ff; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--bg-soft); border-color: #3a3a40; }
.btn-sm { height: 38px; padding: 0 16px; font-size: 13.5px; border-radius: 10px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ─── Nav ─────────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(14, 14, 16, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.logo-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, #0a84ff, #5ac8fa);
  display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 800;
}
.nav-links { display: flex; gap: 26px; font-size: 14px; color: var(--text-2); }
.nav-links a:hover { color: var(--text); }
@media (max-width: 720px) { .nav-links { display: none; } }

/* ─── Hero ────────────────────────────────────────────────────────────── */

.hero { position: relative; padding: 88px 0 60px; text-align: center; }
.hero::before {
  content: ""; position: absolute; inset: -120px 0 auto; height: 480px;
  background: radial-gradient(600px 300px at 50% 0%, rgba(10, 132, 255, 0.16), transparent 70%);
  pointer-events: none;
}
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid rgba(10, 132, 255, 0.25);
  color: #6db8ff; font-size: 13px; font-weight: 500;
}
.hero h1 {
  margin: 22px auto 0; max-width: 780px;
  font-size: clamp(34px, 6vw, 58px);
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .sub {
  margin: 20px auto 0; max-width: 640px;
  font-size: clamp(15px, 2.2vw, 18px); color: var(--text-2);
}
.hero-ctas { margin-top: 32px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 14px; font-size: 13px; color: var(--text-3); }

/* ─── Maquette de l'app ───────────────────────────────────────────────── */

.mock {
  margin: 56px auto 0; max-width: 880px;
  background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.02) inset;
  overflow: hidden; text-align: left;
}
.mock-bar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); }
.mock-bar span { width: 10px; height: 10px; border-radius: 50%; background: #333338; }
.mock-bar span:first-child { background: #ff5f57; } .mock-bar span:nth-child(2) { background: #febc2e; } .mock-bar span:nth-child(3) { background: #28c840; }
.mock-body { display: flex; min-height: 330px; }
.mock-side { width: 168px; border-right: 1px solid var(--border-soft); padding: 14px 10px; flex-shrink: 0; }
.mock-side .it { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 12px; color: var(--text-2); }
.mock-side .it.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.mock-side .dot { width: 6px; height: 6px; border-radius: 2px; background: currentColor; opacity: 0.7; }
.mock-main { flex: 1; padding: 16px 18px; min-width: 0; }
.mock-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.mock-sub { font-size: 11px; color: var(--text-3); margin-bottom: 14px; }
.mock-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--border-soft);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 8px;
}
.mock-ava { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #2b2b31, #3a3a42); display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: var(--text-2); }
.mock-row .who { min-width: 0; }
.mock-row .who b { display: block; font-size: 12.5px; font-weight: 600; }
.mock-row .who i { font-style: normal; font-size: 11px; color: var(--text-3); }
.mock-tag { font-size: 10px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.tag-hot { background: rgba(50, 215, 75, 0.12); color: var(--green); border: 1px solid rgba(50, 215, 75, 0.3); }
.tag-warm { background: rgba(255, 159, 10, 0.12); color: var(--orange); border: 1px solid rgba(255, 159, 10, 0.3); }
.mock-score { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mock-score .bar { width: 64px; height: 4px; border-radius: 4px; background: var(--border); overflow: hidden; }
.mock-score .bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #0a84ff, #5ac8fa); }
.mock-score b { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--accent); }
@media (max-width: 640px) { .mock-side { display: none; } }

/* ─── Sections ────────────────────────────────────────────────────────── */

section { padding: 84px 0; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.sec-title { font-size: clamp(26px, 4vw, 38px); margin-top: 10px; max-width: 640px; }
.sec-sub { margin-top: 14px; color: var(--text-2); max-width: 560px; font-size: 16px; }
.center { text-align: center; }
.center .sec-title, .center .sec-sub { margin-left: auto; margin-right: auto; }

/* Douleurs */
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.pain {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 24px;
}
.pain .ico { font-size: 22px; }
.pain h3 { font-size: 17px; margin-top: 14px; }
.pain p { font-size: 14px; color: var(--text-2); margin-top: 8px; }
@media (max-width: 820px) { .pains { grid-template-columns: 1fr; } }

/* Étapes */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; }
.step { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 22px; }
.step .num {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 14px;
}
.step h3 { font-size: 16px; margin-top: 14px; }
.step p { font-size: 13.5px; color: var(--text-2); margin-top: 7px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* Fonctionnalités */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.feat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 22px; transition: border-color 0.2s; }
.feat:hover { border-color: rgba(10, 132, 255, 0.35); }
.feat .ico {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-soft); font-size: 17px;
}
.feat h3 { font-size: 16px; margin-top: 14px; }
.feat p { font-size: 13.5px; color: var(--text-2); margin-top: 7px; }
@media (max-width: 900px) { .feats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feats { grid-template-columns: 1fr; } }

/* Bande "local first" */
.local {
  margin-top: 0; background: linear-gradient(180deg, rgba(10,132,255,0.08), rgba(10,132,255,0.02));
  border: 1px solid rgba(10, 132, 255, 0.22); border-radius: 20px; padding: 40px 36px;
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
.local .txt { flex: 1; min-width: 260px; }
.local h3 { font-size: 22px; }
.local p { color: var(--text-2); font-size: 14.5px; margin-top: 10px; }
.local .badges { display: flex; flex-direction: column; gap: 10px; }
.local .badge {
  display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text);
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 10px 16px;
}
.local .badge b { color: var(--green); }

/* ─── Tarifs ──────────────────────────────────────────────────────────── */

.toggle {
  margin: 34px auto 0; display: inline-flex; gap: 4px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 4px;
}
.toggle button {
  height: 36px; padding: 0 18px; border-radius: 9px; border: none; cursor: pointer;
  background: transparent; color: var(--text-2); font-family: var(--font); font-size: 13.5px; font-weight: 600;
}
.toggle button.on { background: var(--accent); color: #fff; }
.toggle .save { color: var(--green); font-weight: 700; }
.toggle button.on .save { color: #d3ffdb; }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; text-align: left; }
.plan {
  position: relative; background: var(--card); border: 1px solid var(--border);
  border-radius: 20px; padding: 30px 26px; display: flex; flex-direction: column;
}
.plan.hot { border-color: rgba(10, 132, 255, 0.55); background: linear-gradient(180deg, rgba(10,132,255,0.07), var(--card) 45%); }
.plan .flag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; letter-spacing: 0.03em; white-space: nowrap;
}
.plan h3 { font-size: 17px; }
.plan .who { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.plan .price { margin-top: 18px; display: flex; align-items: baseline; gap: 6px; }
.plan .price b { font-size: 40px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan .price span { color: var(--text-3); font-size: 14px; }
.plan .yearly-note { font-size: 12px; color: var(--green); margin-top: 4px; min-height: 18px; }
.plan ul { list-style: none; margin: 20px 0 26px; display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; font-size: 13.5px; color: var(--text-2); }
.plan li::before { content: "✓"; color: var(--green); font-weight: 700; flex-shrink: 0; }
.plan li.no { color: var(--text-3); }
.plan li.no::before { content: "—"; color: var(--text-3); }
.plan .btn { margin-top: auto; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } }

.pay-note { margin-top: 18px; font-size: 12.5px; color: var(--text-3); }

/* ─── FAQ ─────────────────────────────────────────────────────────────── */

.faq { max-width: 720px; margin: 40px auto 0; display: grid; gap: 10px; }
.faq details {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 0 22px; overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 0;
  font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-3); font-size: 20px; font-weight: 400; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; font-size: 14px; color: var(--text-2); }

/* ─── CTA finale + footer ─────────────────────────────────────────────── */

.final {
  text-align: center; border: 1px solid var(--border); border-radius: 24px;
  padding: 64px 30px; background:
    radial-gradient(420px 200px at 50% 0%, rgba(10, 132, 255, 0.14), transparent 70%), var(--card);
}
.final h2 { font-size: clamp(26px, 4vw, 36px); max-width: 560px; margin: 0 auto; }
.final p { color: var(--text-2); margin: 14px auto 0; max-width: 480px; font-size: 15px; }

footer { border-top: 1px solid var(--border-soft); padding: 36px 0 46px; margin-top: 84px; }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--text-3); }
.foot a:hover { color: var(--text-2); }
.foot .links { display: flex; gap: 18px; flex-wrap: wrap; }

/* ─── Animations d'apparition ─────────────────────────────────────────── */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Révélation en cascade : les enfants entrent l'un après l'autre. */
.reveal-group > * { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal-group.in > * { opacity: 1; transform: none; }
.reveal-group.in > *:nth-child(2) { transition-delay: 70ms; }
.reveal-group.in > *:nth-child(3) { transition-delay: 140ms; }
.reveal-group.in > *:nth-child(4) { transition-delay: 210ms; }
.reveal-group.in > *:nth-child(5) { transition-delay: 280ms; }
.reveal-group.in > *:nth-child(6) { transition-delay: 350ms; }

/* ─── Halo respirant + grille de points du hero ───────────────────────── */

.hero::before { animation: breathe 9s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

.hero::after {
  content: ""; position: absolute; inset: -120px 0 auto; height: 520px; z-index: -1;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.07) 1px, transparent 0);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 8%, #000 35%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 55% at 50% 8%, #000 35%, transparent 72%);
  pointer-events: none;
}

/* ─── Spotlight : halo qui suit le curseur (inspiré de 21st.dev) ───────── */

.spot { position: relative; }
.spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%),
              rgba(10, 132, 255, 0.13), transparent 65%);
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.spot:hover::before { opacity: 1; }
/* Le contenu doit passer au-dessus du halo. */
.spot > * { position: relative; z-index: 1; }

/* ─── Bordure lumineuse tournante du plan mis en avant ────────────────── */

@property --beam-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.beam::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--beam-a), transparent 0 62%, var(--accent) 80%, transparent 92%);
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: beam-spin 5s linear infinite;
  pointer-events: none;
}
@keyframes beam-spin { to { --beam-a: 360deg; } }

/* ─── Défilement infini des canaux ────────────────────────────────────── */

.marquee {
  overflow: hidden; margin-top: 36px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; gap: 12px; width: max-content; animation: marquee-slide 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-slide { to { transform: translateX(-50%); } }
.chan {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: 9px 18px; font-size: 13.5px; color: var(--text-2);
}
.chan i { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* ─── Barres de score du mock : se remplissent à l'apparition ─────────── */

.mock-score .bar i { width: 0; transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.25s; }

/* ─── Compteurs et micro-interactions ─────────────────────────────────── */

.count { font-variant-numeric: tabular-nums; }

.feat, .pain, .step, .plan { transition: border-color 0.25s ease, transform 0.25s ease; }
.feat:hover, .pain:hover, .step:hover { transform: translateY(-3px); }
.plan:hover { transform: translateY(-4px); }

.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
  transform: translateX(-120%);
}
.btn-primary:hover::after { animation: sheen 0.75s ease; }
@keyframes sheen { to { transform: translateX(120%); } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .reveal-group > * { opacity: 1; transform: none; transition: none; }
  .hero::before, .marquee-track, .beam::after { animation: none; }
  .mock-score .bar i { transition: none; }
  .feat:hover, .pain:hover, .step:hover, .plan:hover { transform: none; }
  .btn-primary:hover::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* ─── Page merci / légal ──────────────────────────────────────────────── */

.narrow { max-width: 640px; margin: 0 auto; padding: 70px 24px; }
.key-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 20px;
  padding: 36px 30px; text-align: center; margin-top: 28px;
}
.key-value {
  font-family: var(--mono); font-size: clamp(17px, 3.4vw, 24px); letter-spacing: 0.04em;
  background: var(--bg-soft); border: 1px dashed rgba(10, 132, 255, 0.4);
  border-radius: 12px; padding: 16px 12px; margin: 18px 0; user-select: all; word-break: break-all;
}
.steps-mini { text-align: left; margin-top: 26px; display: grid; gap: 12px; }
.steps-mini .s { display: flex; gap: 12px; font-size: 14px; color: var(--text-2); }
.steps-mini .s b {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: 12.5px;
}
.spinner {
  width: 26px; height: 26px; margin: 0 auto; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.legal h1 { font-size: 30px; margin-bottom: 8px; }
.legal h2 { font-size: 20px; margin: 38px 0 10px; }
.legal p, .legal li { font-size: 14.5px; color: var(--text-2); margin-top: 8px; }
.legal ul { padding-left: 20px; }
.todo { color: var(--orange); font-weight: 600; }

/* ═════════════════════════════════════════════════════════════════════════
   COUCHE PREMIUM
   Raffinement visuel inspiré des bibliothèques de composants modernes
   (Refero, 21st.dev, Kokonut, Aceternity, Motion).

   Principe directeur : le « premium » vient de la RETENUE, pas de l'effet.
   On ajoute donc de la matière (grain, filets, dégradés d'un pour cent) et
   du rythme — jamais de dégradé violet ni de halo coloré, qui sont
   précisément la signature des pages générées.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* Échelle typographique modulaire (ratio 1,25) — remplace les tailles ad hoc */
  --pas-1: 13px;  --pas-2: 15px;  --pas-3: 17px;
  --pas-4: 21px;  --pas-5: 27px;  --pas-6: 34px;
  --pas-7: 44px;  --pas-8: 56px;  --pas-9: 72px;

  /* Rythme vertical : une seule unité, déclinée */
  --espace: 8px;

  /* Une courbe unique pour toute l'interface : l'incohérence des transitions
     est ce qui fait « bricolé » avant même qu'on sache pourquoi. */
  --ressort: cubic-bezier(0.22, 1, 0.36, 1);

  --filet: rgba(255, 255, 255, 0.06);
  --lueur-haut: rgba(255, 255, 255, 0.045);
}

/* ─── Matière : un grain imperceptible ────────────────────────────────────
   Une surface parfaitement plate paraît synthétique. Un bruit à 2 % suffit à
   donner de la profondeur, sans qu'on puisse le nommer en regardant. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

/* ─── Typographie ─────────────────────────────────────────────────────── */

.hero h1 {
  font-size: clamp(var(--pas-7), 6.4vw, var(--pas-9));
  letter-spacing: -0.033em;
  line-height: 1.04;
  font-weight: 700;
}
.hero .sub {
  font-size: clamp(var(--pas-3), 1.9vw, var(--pas-4));
  line-height: 1.55;
  color: var(--text-2);
  max-width: 34ch;              /* mesure courte : on lit par blocs, pas en travers */
}
.hero-ctas { margin-top: calc(var(--espace) * 5); }

section h2 {
  font-size: clamp(var(--pas-5), 3.4vw, var(--pas-7));
  letter-spacing: -0.028em;
  line-height: 1.1;
}

/* L'œil de bœuf en capitales : filet + interlettrage, repris de l'app */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.55;
}

/* ─── Profondeur : filet clair en haut, comme une arête éclairée ──────── */
.feat, .plan, .key-card, .faq details, .mock {
  position: relative;
  background-image: linear-gradient(to bottom, var(--lueur-haut), transparent 42%);
  transition: border-color 0.35s var(--ressort), transform 0.35s var(--ressort);
}
.feat:hover, .plan:hover, .key-card:hover { border-color: #34343c; }

/* La maquette produit mérite d'être posée, pas collée au fond. */
.mock {
  box-shadow: 0 1px 0 var(--filet) inset, 0 40px 90px -40px rgba(0, 0, 0, 0.85);
}

/* ─── Boutons : le détail qui se sent sans se voir ────────────────────── */
.btn {
  transition: background-color 0.25s var(--ressort), border-color 0.25s var(--ressort),
              transform 0.25s var(--ressort), box-shadow 0.25s var(--ressort);
}
.btn-primary {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
              0 10px 24px -12px rgba(10, 132, 255, 0.7);
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost:hover { border-color: #3a3a42; background: rgba(255, 255, 255, 0.028); }

/* Accessibilité : un anneau visible, jamais le contour par défaut du système. */
a:focus-visible, button:focus-visible, details summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px;
}

/* ─── Mouvement : révélation à l'arrivée dans l'écran ─────────────────── */
/* Le site révèle déjà via la classe « in » : on ne change que la courbe et la
   distance, pour un mouvement qui décélère au lieu de s'arrêter net. */
.reveal, .reveal-group > * {
  transition-timing-function: var(--ressort);
  transition-duration: 0.72s;
}
.reveal { transform: translateY(16px); }
.reveal-group > * { transform: translateY(12px); }

/* Respecte le réglage système : une animation imposée peut donner la nausée
   à certaines personnes, et c'est un critère d'accessibilité, pas un détail. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-group > * { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
  .marquee-track { animation: none; }
}

/* ─── Offre d'entrée ──────────────────────────────────────────────────── */

.btn-offre {
  height: 58px; padding: 0 30px; font-size: var(--pas-3); letter-spacing: -0.01em;
}

/* La garantie est le second argument après le prix : elle mérite un
   traitement à elle, ni bandeau criard ni note de bas de page. */
.garantie {
  display: inline-flex; align-items: center; gap: 11px;
  margin-top: calc(var(--espace) * 2.5);
  padding: 11px 18px 11px 14px;
  border: 1px solid var(--border); border-radius: 999px;
  background: rgba(50, 215, 75, 0.05);
  font-size: var(--pas-2); color: var(--text);
}
.garantie-marque {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 4px rgba(50, 215, 75, 0.16);
  flex: none;
}

.hero-note sup { font-size: 0.7em; }

@media (max-width: 640px) {
  .btn-offre { width: 100%; height: 54px; padding: 0 18px; font-size: var(--pas-2); }
  .garantie { align-items: flex-start; border-radius: 16px; line-height: 1.45; }
  .garantie-marque { margin-top: 6px; }
}

/* ─── Accroche : mise en page éditoriale ──────────────────────────────────
   Le centrage systématique est la signature visuelle des pages générées :
   tout est sur un axe, rien ne hiérarchise. Un bloc calé à gauche, sur une
   colonne étroite, se lit plus vite et fait immédiatement moins « gabarit ». */

@media (min-width: 900px) {
  .hero { text-align: left; padding-top: 104px; }
  .hero h1 { margin-left: 0; max-width: 15ch; }
  .hero .sub { margin-left: 0; max-width: 46ch; }
  .hero-ctas { justify-content: flex-start; align-items: center; }

  /* La lueur suit le texte au lieu d'auréoler le centre de l'écran. */
  .hero::before {
    background: radial-gradient(520px 280px at 18% 0%, rgba(10, 132, 255, 0.14), transparent 72%);
  }
}

/* ─── Aperçu produit ──────────────────────────────────────────────────────
   Sur grand écran, l'illustration occupe la colonne droite de l'accroche :
   le texte convainc, l'image prouve. Sous 1100 px elle repasse dessous, à
   pleine largeur — une capture d'interface réduite de moitié est illisible. */

.apercu { margin: 56px 0 0; }
.apercu img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.7));
}

@media (min-width: 1100px) {
  .hero .wrap {
    display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    column-gap: 48px; align-items: center;
  }
  .hero .pill, .hero h1, .hero .sub, .hero-ctas, .hero-note, .garantie { grid-column: 1; }
  .apercu {
    grid-column: 2; grid-row: 1 / span 6;
    margin: 0; align-self: center;
  }
  /* Elle déborde légèrement vers la droite : le cadrage serré donne
     l'impression d'une fenêtre réelle, pas d'une vignette posée. */
  .apercu img { width: 112%; max-width: none; }
  .hero .marquee, .hero .hero-note:last-of-type { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOUVEMENT — seconde couche
   ═══════════════════════════════════════════════════════════════════════════
   Tout ce qui bouge ici n'anime que `transform`, `opacity`, `filter` ou une
   ombre : le navigateur repeint sans jamais recalculer la mise en page, et la
   page reste fluide même sur un portable qui rame.

   Règle tenue partout : le mouvement souligne une information (le prix change,
   l'offre est là, tu as lu 40 % de la page) — il ne décore pas du vide.
   Tout est désactivé plus bas si le système demande moins d'animations.
   ═══════════════════════════════════════════════════════════════════════════ */

@property --flot { syntax: '<length>'; initial-value: 0px; inherits: false; }

/* ─── Accroche : les mots arrivent l'un après l'autre ──────────────────── */
/* Le titre est découpé en mots par le script. Sans lui, rien ne casse : les
   mots restent des mots et le titre s'affiche normalement. */

.hero h1 { perspective: 800px; }

.hero h1 .mot {
  display: inline-block;
  opacity: 0;
  filter: blur(12px);
  transform: translateY(0.45em) rotateX(-35deg);
  animation: mot-entre 0.9s var(--ressort) forwards;
  /* Chaque mot part 55 ms après le précédent : assez pour qu'on lise une
     vague, trop peu pour qu'on attende. */
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes mot-entre {
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* La promesse du titre mérite d'être la seule chose colorée de l'écran —
   mais en aplat, pas en dégradé.
   Un texte en dégradé bleu-violet est LE marqueur de la page générée : c'est le
   premier interdit de notre propre brief. Le relief vient d'ailleurs — un trait
   qui se dessine sous le mot, une fois, à l'arrivée. */
/* Le trait est un fond, pas un pseudo-élément posé par-dessus : un ::after
   en position absolue se cale sur le PREMIER fragment de ligne, donc dès que
   « dans tes followers » passe sur deux lignes — ce qui arrive en grand écran —
   le trait se retrouve à côté du texte. Un background se recoupe proprement
   ligne par ligne, et il s'anime tout aussi bien. */
.hero h1 em {
  color: var(--accent);
  background-image: linear-gradient(rgba(10, 132, 255, 0.32), rgba(10, 132, 255, 0.32));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 0.04em);
  background-size: 0% 2px;
  animation: trait-se-dessine 0.9s var(--ressort) 0.75s forwards;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@keyframes trait-se-dessine { to { background-size: 100% 2px; } }

/* ─── La grille de points dérive lentement ────────────────────────────── */
/* Un décalage d'exactement une tuile (24 px) : la boucle est invisible. */

.hero::after { animation: grille-derive 26s linear infinite; }
@keyframes grille-derive { to { background-position: 24px 24px; } }

/* ─── Le bouton de l'offre respire ────────────────────────────────────── */
/* Une ombre, pas un pseudo-élément : `.btn-primary` est en `overflow: hidden`
   et rognerait n'importe quel halo dessiné en dehors du bouton. */

.btn-offre {
  animation: offre-halo 2.9s ease-in-out infinite;
}
@keyframes offre-halo {
  0% {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
                0 10px 24px -12px rgba(10, 132, 255, 0.7),
                0 0 0 0 rgba(10, 132, 255, 0.42);
  }
  /* L'anneau s'écarte et s'efface… */
  70% {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
                0 14px 32px -12px rgba(10, 132, 255, 0.9),
                0 0 0 14px rgba(10, 132, 255, 0);
  }
  /* …puis revient à zéro pendant qu'il est invisible : la boucle ne saute pas. */
  100% {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
                0 10px 24px -12px rgba(10, 132, 255, 0.7),
                0 0 0 0 rgba(10, 132, 255, 0);
  }
}

/* Le reflet repasse tout seul de temps en temps — au survol, `.btn-primary`
   reprend la main avec son propre reflet, plus rapide. */
.btn-offre::after { animation: sheen-boucle 5.5s ease-in-out infinite; }
@keyframes sheen-boucle {
  0%, 64%   { transform: translateX(-120%); }
  88%, 100% { transform: translateX(120%); }
}

/* Le point vert de la garantie bat doucement. */
.garantie-marque { animation: point-bat 2.4s ease-in-out infinite; }
@keyframes point-bat {
  0%, 100% { box-shadow: 0 0 0 4px rgba(50, 215, 75, 0.16); }
  50%      { box-shadow: 0 0 0 7px rgba(50, 215, 75, 0.04); }
}

/* ─── Cartes : elles s'inclinent vers le curseur ──────────────────────── */
/* L'inclinaison reste minuscule (3°). Au-delà, ça fait vitrine de casino et
   le texte devient pénible à lire. */

.feat, .pain, .step, .plan {
  transform: perspective(900px)
             rotateX(var(--incl-x, 0deg))
             rotateY(var(--incl-y, 0deg))
             translateY(var(--leve, 0px));
}
.feat:hover, .pain:hover, .step:hover { --leve: -3px; }
.plan:hover { --leve: -4px; }

/* Pendant le survol, le mouvement doit coller au curseur ; en partant, il
   revient en douceur avec la transition d'origine. */
.incline { transition-property: transform; transition-duration: 0.09s; }

/* ─── Aperçu produit : parallaxe + flottement ─────────────────────────── */
/* La parallaxe est posée par le script (`--para`), le flottement par
   l'animation. Les deux s'additionnent dans la même transformation. */

.apercu img {
  transform: translateY(calc(var(--para, 0px) + var(--flot)));
  animation: flotte 7.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes flotte {
  0%, 100% { --flot: 0px; }
  50%      { --flot: -11px; }
}

/* ─── Barre de progression de lecture ─────────────────────────────────── */

.progres {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  overflow: hidden; pointer-events: none;
}
.progres i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), #5ac8fa);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}

/* La barre du haut se resserre dès qu'on quitte l'accroche : plus discrète
   quand on lit, et on sent qu'on a décollé du haut de page. */
.nav-inner { transition: height 0.32s var(--ressort); }
.nav { transition: background 0.32s ease, box-shadow 0.32s ease; }
.nav.compacte {
  background: rgba(14, 14, 16, 0.93);
  box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.9);
}
.nav.compacte .nav-inner { height: 54px; }

/* ─── Prix : le chiffre bascule quand on change de période ────────────── */
/* Sans ça, mensuel → annuel remplace « 19 » par « 15,83 » sans que l'œil
   remarque quoi que ce soit — et c'est justement l'argument. */

.plan .price b { display: inline-block; }
.plan .price b.bascule { animation: prix-bascule 0.46s var(--ressort); }
@keyframes prix-bascule {
  0%   { transform: translateY(0);     opacity: 1; }
  44%  { transform: translateY(-65%);  opacity: 0; }
  56%  { transform: translateY(65%);   opacity: 0; }
  100% { transform: translateY(0);     opacity: 1; }
}

/* La note « 190 € facturés une fois par an » arrive juste après. */
.yearly-note:not(:empty) { animation: note-entre 0.42s var(--ressort) 0.1s backwards; }
@keyframes note-entre {
  from { opacity: 0; transform: translateY(-5px); }
}

/* ─── FAQ : la réponse se déplie ──────────────────────────────────────── */
/* `details` n'anime rien nativement. On anime le paragraphe à l'ouverture —
   la fermeture reste instantanée, ce que personne ne remarque. */

.faq details[open] p { animation: reponse-ouvre 0.42s var(--ressort); }
@keyframes reponse-ouvre {
  from { opacity: 0; transform: translateY(-8px); }
}
/* Le « + » qui devient « × » existait déjà : on ne change que sa courbe. */
.faq summary::after { transition: transform 0.3s var(--ressort); }

/* ─── Révélation au scroll : un poil plus matière ─────────────────────── */
/* Le flou qui se dissipe donne l'impression que le bloc se met au point,
   au lieu de simplement monter. */

.reveal, .reveal-group > * { filter: blur(6px); }
.reveal.in, .reveal-group.in > * { filter: blur(0); }
.reveal, .reveal-group > * { transition-property: opacity, transform, filter; }

/* ─── Moins d'animations : on coupe tout ce qui est ajouté ci-dessus ───── */

@media (prefers-reduced-motion: reduce) {
  .hero h1 .mot { opacity: 1; filter: none; transform: none; animation: none; }
  .hero h1 em { animation: none; }
  .hero::after, .btn-offre, .btn-offre::after, .garantie-marque { animation: none; }
  .apercu img { animation: none; transform: none; }
  .feat, .pain, .step, .plan { transform: none; }
  .plan .price b.bascule, .yearly-note:not(:empty),
  .faq details[open] p { animation: none; }
  .nav-inner { transition: none; }
  .reveal, .reveal-group > * { filter: none; }
}

/* ─── Icônes en trait fin (Lucide, intégrées en SVG) ──────────────────── */
/* Les emoji ont disparu : ils trahissent une page générée, et ils changent
   de dessin d'un système à l'autre. Un jeu uniforme règle les deux. */

.ico svg, .ico-en-ligne {
  width: 20px; height: 20px; display: block; flex: none;
  stroke-width: 1.5; vector-effect: non-scaling-stroke;
}

/* Le nuage de la pastille et du bloc « te suit partout » : posé dans le texte. */
.ico-en-ligne {
  display: inline-block; vertical-align: -0.18em;
  width: 17px; height: 17px; margin-right: 2px;
}

/* Deux traitements différents, volontairement.
   Les douleurs sont des constats : icône nue, discrète, sans tuile.
   Les fonctionnalités sont des promesses : icône posée dans une tuile bleue.
   Trois sections construites sur le même gabarit, c'est ce qui donne
   l'impression de gabarit, justement. */
.pain .ico { color: var(--text-3); }
.pain .ico svg { width: 22px; height: 22px; }
.pain:hover .ico { color: var(--text-2); }
.pain .ico, .feat .ico { transition: color 0.25s var(--ressort); }

.feat .ico { color: var(--accent); }

/* ─── Cartes d'un même groupe : celle qu'on survole prend le dessus ───── */
/* Emprunté au « card hover effect » d'Aceternity, mais sans halo ni dégradé :
   les voisines s'effacent légèrement, la survolée reste nette. L'œil sait
   immédiatement où il est, et la grille cesse d'être un mur uniforme. */

@media (hover: hover) {
  .pains:hover .pain:not(:hover),
  .feats:hover .feat:not(:hover),
  .steps:hover .step:not(:hover) {
    opacity: 0.55;
    border-color: var(--border-soft);
  }
  .pain, .feat, .step { transition: opacity 0.3s var(--ressort), border-color 0.3s var(--ressort); }
}

/* ─── L'aperçu se redresse quand on descend ───────────────────────────── */
/* Le « container scroll » d'Aceternity : la maquette est d'abord inclinée,
   comme posée sur un bureau, puis se redresse à mesure qu'on la regarde.
   L'angle est piloté par le script (--pivot), la valeur reste petite : à
   plus de 12°, l'interface devient illisible et l'effet se voit trop. */

.apercu { perspective: 1400px; }
.apercu img {
  transform: perspective(1400px)
             rotateX(var(--pivot, 0deg))
             translateY(calc(var(--para, 0px) + var(--flot)));
  transform-origin: 50% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 em { animation: none; background-size: 100% 2px; }
  .pains:hover .pain:not(:hover),
  .feats:hover .feat:not(:hover),
  .steps:hover .step:not(:hover) { opacity: 1; }
  .apercu img { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SOMBRE PREMIUM — dernière couche
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Correctif du panneau 3D ─────────────────────────────────────────── */
/*
   Il était cassé pour trois raisons qui se cumulaient :

   1. DOUBLE PERSPECTIVE — `.apercu` portait `perspective: 1400px` ET l'image
      appliquait `perspective(1400px)` dans sa propre transformation. Les deux
      se composent : la déformation double et le point de fuite part ailleurs.
      Une seule source de perspective, désormais : celle de l'image.

   2. DEUX RÈGLES `transform` CONCURRENTES sur `.apercu img`, écrites à deux
      endroits du fichier. La dernière gagnait, mais toute retouche de l'autre
      donnait l'impression que le correctif « ne prenait pas ».

   3. LE FLOU DU REVEAL — `.apercu` est un `.reveal`, donc il portait
      `filter: blur(6px)`. Un `filter` sur un parent APLATIT le contexte 3D de
      ses enfants : pendant toute la transition d'apparition, l'inclinaison se
      calculait à plat puis sautait. C'est ce saut qu'on voyait.
*/

.apercu { perspective: none; }

/* Le cadre apparaît en fondu et en glissant, mais sans flou : c'est le flou
   qui cassait la 3D. Les autres blocs le gardent. */
.apercu.reveal, .apercu.reveal.in { filter: none; }

.apercu img {
  transform: perspective(1600px)
             rotateX(var(--pivot, 0deg))
             translateY(calc(var(--para, 0px) + var(--flot)));
  transform-origin: 50% 92%;
  will-change: transform;
}

/* ─── Fonctionnalités en bento : on casse la grille 3 × 2 ─────────────── */
/* Six cartes identiques alignées au cordeau, c'est la signature d'un gabarit.
   En faisant respirer deux cartes sur toute la largeur et en laissant les
   autres en triptyque, la section prend un rythme au lieu d'un quadrillage. */

@media (min-width: 901px) {
  .feats { grid-template-columns: repeat(6, 1fr); }
  .feat:nth-child(1) { grid-column: span 3; }
  .feat:nth-child(2) { grid-column: span 3; }
  .feat:nth-child(3),
  .feat:nth-child(4),
  .feat:nth-child(5) { grid-column: span 2; }
  .feat:nth-child(6) { grid-column: span 6; }

  /* Les deux grandes cartes posent leur texte à côté de l'icône, pas dessous :
     même composant, deux mises en page, zéro carte en double.
     Texte aligné à gauche : la section entière est centrée, mais un titre
     centré au-dessus d'un paragraphe qui démarre à côté d'une icône à gauche
     ne s'aligne sur rien. Sur la carte pleine largeur, c'était criant. */
  .feat:nth-child(1), .feat:nth-child(2), .feat:nth-child(6) {
    display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; align-items: start;
    text-align: left;
  }
  .feat:nth-child(1) .ico, .feat:nth-child(2) .ico, .feat:nth-child(6) .ico {
    grid-row: span 2;
  }
  .feat:nth-child(1) h3, .feat:nth-child(2) h3, .feat:nth-child(6) h3 { margin-top: 0; }
  .feat:nth-child(1) p, .feat:nth-child(2) p, .feat:nth-child(6) p { margin-top: 4px; }
}

/* ─── Filet lumineux qui suit le curseur (façon « glow card ») ────────── */
/* Repris du Spotlight Card de 21st.dev, mais en bordure seulement : le halo
   plein débordait sur le texte et faisait « template ». Ici seul le contour
   s'allume, du côté où se trouve le curseur.
   `:not(.beam)` : la carte mise en avant a déjà sa bordure animée, et les deux
   se disputeraient le même ::after. */

.spot:not(.beam)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              rgba(90, 200, 250, 0.55), rgba(10, 132, 255, 0.12) 40%, transparent 70%);
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity 0.35s ease;
}
.spot:not(.beam):hover::after { opacity: 1; }

/* ─── Surfaces : un dégradé très court en haut de carte ───────────────── */
/* Une arête éclairée d'un pixel suffit à décoller la carte du fond. C'est ce
   qui remplace les ombres portées, invisibles sur un fond presque noir. */

.feat, .pain, .step, .plan, .faq details {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.035), transparent 38%);
}

/* ─── Titres : un cran plus léger que le gras d'origine ───────────────── */
/* 700 sur fond sombre s'empâte. 600 garde l'autorité sans la lourdeur. */

.hero h1, .sec-title, section h2 { font-weight: 600; letter-spacing: -0.026em; }
.hero h1 { line-height: 1.02; }

/* Le titre reprend l'accent, sans dégradé : le texte en dégradé bleu-violet
   est le marqueur le plus reconnaissable d'une page générée. */
.hero h1 em {
  color: var(--accent-clair);
  background-image: linear-gradient(rgba(90, 200, 250, 0.3), rgba(90, 200, 250, 0.3));
}

@media (prefers-reduced-motion: reduce) {
  .spot:not(.beam):hover::after { opacity: 0; }
  .apercu img { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PORTAGE DU « hero-section-1 » (21st.dev / Tailark)
   ═══════════════════════════════════════════════════════════════════════════
   Le composant d'origine est en React + framer-motion + Tailwind. Le site est
   statique et s'interdit toute dépendance : ce qui suit reproduit ses quatre
   gestes caractéristiques en CSS natif.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Faisceaux obliques ───────────────────────────────────────────── */
/* Trois dégradés radiaux inclinés à −45°, achromatiques et très faibles
   (6 à 8 %). C'est une fuite de lumière rasante, pas un halo coloré : ça
   creuse le fond sans virer au « blob flou » que le brief proscrit.
   Sous 1024 px on ne les affiche pas — ils n'apportent rien sur un écran
   étroit et coûtent de la peinture. */

.faisceaux { display: none; }

@media (min-width: 1024px) {
  .faisceaux {
    display: block; position: absolute; inset: 0;
    pointer-events: none; isolation: isolate; opacity: 0.5;
    overflow: hidden; z-index: 0;
  }
  .faisceaux > div { position: absolute; left: 0; top: 0; transform: rotate(-45deg); }
  .faisceaux > div:nth-child(1) {
    width: 35rem; height: 80rem; border-radius: 999px;
    translate: 0 -350px;
    background: radial-gradient(68.54% 68.72% at 55.02% 31.46%,
                rgba(217, 217, 217, 0.08) 0, rgba(140, 140, 140, 0.02) 50%, transparent 80%);
  }
  .faisceaux > div:nth-child(2) {
    width: 14rem; height: 80rem; border-radius: 999px;
    translate: 5% -50%;
    background: radial-gradient(50% 50% at 50% 50%,
                rgba(217, 217, 217, 0.06) 0, rgba(115, 115, 115, 0.02) 80%, transparent 100%);
  }
  .faisceaux > div:nth-child(3) {
    width: 14rem; height: 80rem;
    translate: 0 -350px;
    background: radial-gradient(50% 50% at 50% 50%,
                rgba(217, 217, 217, 0.04) 0, rgba(115, 115, 115, 0.02) 80%, transparent 100%);
  }
  /* Le contenu de l'accroche doit passer au-dessus. */
  .hero .wrap { position: relative; z-index: 1; }
}

/* ─── 2. Pastille-lien à chevron glissant ─────────────────────────────── */
/* Deux chevrons côte à côte dans une fenêtre de la largeur d'un seul : au
   survol la paire coulisse, le premier sort, le second prend sa place. Un
   seul chevron qui se translate laisserait un vide pendant le mouvement. */

.pill-lien {
  gap: 10px; padding: 5px 5px 5px 14px;
  transition: background-color 0.3s var(--ressort), border-color 0.3s var(--ressort);
}
.pill-lien:hover { background: rgba(10, 132, 255, 0.18); border-color: rgba(10, 132, 255, 0.4); }

.pill-filet {
  width: 1px; height: 16px; background: currentColor; opacity: 0.3; flex: none;
}

.pill-fleche {
  width: 22px; height: 22px; border-radius: 999px; overflow: hidden; flex: none;
  background: rgba(255, 255, 255, 0.08);
  display: grid; place-items: center;
}
.pill-fleche > span {
  display: flex; width: 44px;
  transform: translateX(-50%);
  transition: transform 0.5s ease-in-out;
}
.pill-lien:hover .pill-fleche > span { transform: translateX(0); }
.pill-fleche svg { width: 22px; height: 22px; padding: 5px; flex: none; }

/* ─── 3. Nav qui se replie en barre flottante ─────────────────────────── */
/* Au repos elle occupe toute la largeur ; passé 40 px de défilement elle se
   resserre, s'arrondit et se détache du haut de l'écran. C'est le geste le
   plus reconnaissable du composant d'origine. */

.nav { border-bottom-color: transparent; transition: border-color 0.35s var(--ressort); }
.nav .nav-inner {
  transition: max-width 0.4s var(--ressort), background-color 0.4s var(--ressort),
              border-color 0.4s var(--ressort), border-radius 0.4s var(--ressort),
              padding 0.4s var(--ressort), margin-top 0.4s var(--ressort);
  border: 1px solid transparent;
}
.nav.compacte { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.nav.compacte .nav-inner {
  max-width: 880px; margin-top: 8px;
  padding-left: 20px; padding-right: 14px;
  border-radius: 18px;
  border-color: var(--border);
  background: rgba(17, 17, 20, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ─── 4. Bande de preuve : elle s'efface pour laisser parler ──────────── */

.preuve { position: relative; }
.preuve-mot {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  margin: 0; font-size: 13.5px; color: var(--text-2);
  opacity: 0; transform: scale(0.96);
  transition: opacity 0.5s var(--ressort), transform 0.5s var(--ressort);
  pointer-events: none;
}
.preuve .marquee {
  transition: opacity 0.5s var(--ressort), filter 0.5s var(--ressort);
}

@media (hover: hover) {
  .preuve:hover .preuve-mot { opacity: 1; transform: scale(1); }
  .preuve:hover .marquee { opacity: 0.45; filter: blur(2px); }
}

/* Sans survol possible (tactile), la phrase reste lisible en permanence :
   sinon l'information n'existe tout simplement pas sur téléphone. */
@media (hover: none) {
  .preuve-mot { position: static; opacity: 1; transform: none; margin-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .faisceaux { display: none; }
  .pill-fleche > span { transition: none; }
  .nav .nav-inner { transition: none; }
  .preuve-mot, .preuve .marquee { transition: none; }
}