:root {
  --color-bg: #05060B;
  --color-bg-alt: #090B14;
  --color-surface: #0E1120;
  --color-surface-2: #141830;
  --color-primary: #4F7BFF;
  --color-primary-dark: #2E4FD9;
  --color-cyan: #22E3D6;
  --color-violet: #A855F7;
  --color-lime: #B6F548;
  --color-text: #EEF1FA;
  --color-text-dim: #9AA3BF;
  --color-border: rgba(255, 255, 255, 0.09);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --grad-main: linear-gradient(100deg, #22E3D6 0%, #4F7BFF 45%, #A855F7 100%);
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --maxw: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 .6em; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.2rem, 4.6vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); font-weight: 700; }
h3 { font-size: 1.18rem; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 820px; }

.grad {
  background: var(--grad-main);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Background decor ---------- */
.bg-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}
.bg-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .32;
  pointer-events: none;
  z-index: 0;
}
.bg-glow-1 { width: 620px; height: 620px; top: -220px; left: -140px; background: #2E4FD9; }
.bg-glow-2 { width: 520px; height: 520px; top: -100px; right: -160px; background: #7C3AED; opacity: .26; }

main, .site-header, .site-footer { position: relative; z-index: 1; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(5, 6, 11, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 20px; }

.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--grad-main);
  box-shadow: 0 0 20px rgba(79, 123, 255, .55);
  flex: none;
}
.logo-text { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.03em; }

.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav a { font-size: .94rem; color: var(--color-text-dim); transition: color .18s; }
.main-nav a:hover { color: var(--color-text); }
.nav-cta {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text) !important;
  background: rgba(255,255,255,.04);
  transition: border-color .18s, background .18s;
}
.nav-cta:hover { border-color: var(--color-primary); background: rgba(79,123,255,.14); }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; }
.burger span { width: 22px; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform .22s, opacity .22s; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, background .18s, border-color .18s;
}
.btn-primary {
  background: var(--grad-main);
  color: #05060B;
  box-shadow: 0 10px 34px rgba(79, 123, 255, .34);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(79, 123, 255, .46); }
.btn-ghost { border-color: var(--color-border-strong); color: var(--color-text); background: rgba(255,255,255,.03); }
.btn-ghost:hover { border-color: var(--color-primary); background: rgba(79,123,255,.12); }
.btn-block { width: 100%; }

/* ---------- Hero ---------- */
.hero { padding: 96px 0 76px; }
.hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }

.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  background: rgba(255,255,255,.04);
  font-size: .82rem;
  color: var(--color-text-dim);
  margin-bottom: 26px;
}
.pill-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-cyan);
  box-shadow: 0 0 0 0 rgba(34, 227, 214, .6);
  animation: ping 2.2s ease-out infinite;
}
@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(34,227,214,.55); }
  70% { box-shadow: 0 0 0 9px rgba(34,227,214,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,227,214,0); }
}

.lead { font-size: 1.1rem; color: var(--color-text-dim); max-width: 33em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 26px; }

.hero-points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.hero-points li { position: relative; padding-left: 22px; font-size: .92rem; color: var(--color-text-dim); }
.hero-points li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 11px; height: 6px; border-left: 2px solid var(--color-lime); border-bottom: 2px solid var(--color-lime);
  transform: rotate(-45deg);
}

/* ---------- Terminal visual ---------- */
.terminal {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-strong);
  background: linear-gradient(170deg, #10142A 0%, #080A14 100%);
  box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(79,123,255,.12) inset;
  overflow: hidden;
}
.terminal-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--color-border);
  background: rgba(255,255,255,.025);
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-r { background: #FF5F57; } .dot-y { background: #FEBC2E; } .dot-g { background: #28C840; }
.terminal-title { margin-left: 10px; font-size: .78rem; color: var(--color-text-dim); font-family: var(--font-display); }

.terminal-body { padding: 22px 20px 24px; font-size: .88rem; }
.line { display: flex; align-items: center; gap: 9px; margin: 0 0 11px; color: var(--color-text-dim); }
.prompt { color: var(--color-primary); font-weight: 700; }
.ok, .run { margin-left: auto; font-size: .74rem; padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.ok { color: var(--color-lime); background: rgba(182,245,72,.1); }
.run { color: var(--color-cyan); background: rgba(34,227,214,.12); }

.progress { height: 6px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; margin: 18px 0 14px; }
.progress-bar { height: 100%; width: 88%; border-radius: 999px; background: var(--grad-main); animation: fill 3.4s ease-in-out infinite alternate; }
@keyframes fill { from { width: 74%; } to { width: 96%; } }

.timer { display: flex; align-items: baseline; gap: 10px; margin: 0; }
#counter { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.timer-label { font-size: .76rem; color: var(--color-text-dim); }

/* ---------- Strip ---------- */
.strip { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: rgba(255,255,255,.015); }
.strip-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 34px 24px; }
.strip-item { display: flex; flex-direction: column; gap: 3px; }
.strip-item strong { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; }
.strip-item span { font-size: .86rem; color: var(--color-text-dim); }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section-alt { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.section-head { max-width: 720px; margin-bottom: 52px; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-cyan);
  margin-bottom: 14px;
}
.section-sub { color: var(--color-text-dim); font-size: 1.05rem; margin: 0; }

.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.card {
  padding: 30px 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(165deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.012) 100%);
  transition: border-color .22s, transform .22s;
}
.card:hover { border-color: var(--color-border-strong); transform: translateY(-3px); }
.card p { color: var(--color-text-dim); font-size: .95rem; margin: 0; }
.card-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: rgba(79,123,255,.14);
  border: 1px solid rgba(79,123,255,.3);
  font-size: 1.2rem;
  margin-bottom: 18px;
}

/* ---------- Steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: s; }
.step {
  display: flex; gap: 24px; align-items: flex-start;
  padding: 28px 30px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,.022);
}
.step-num {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  background: var(--grad-main);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  flex: none;
  min-width: 46px;
}
.step h3 { margin-bottom: .35em; }
.step p { color: var(--color-text-dim); font-size: .96rem; margin: 0; }

/* ---------- Pricing ---------- */
.pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.price-card {
  padding: 38px 34px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(79,123,255,.32);
  background: linear-gradient(170deg, rgba(79,123,255,.11) 0%, rgba(168,85,247,.05) 100%);
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
}
.price-tag { font-family: var(--font-display); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-cyan); }
.price-amount { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 26px; flex-wrap: wrap; }
.amount { font-family: var(--font-display); font-size: 3.1rem; font-weight: 800; letter-spacing: -0.03em; }
.unit { font-size: .9rem; color: var(--color-text-dim); }
.price-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 11px; }
.price-list li { position: relative; padding-left: 26px; font-size: .95rem; color: var(--color-text-dim); }
.price-list li::before {
  content: ""; position: absolute; left: 2px; top: .48em;
  width: 11px; height: 6px; border-left: 2px solid var(--color-lime); border-bottom: 2px solid var(--color-lime);
  transform: rotate(-45deg);
}
.price-note { font-size: .84rem; color: var(--color-text-dim); margin: 16px 0 0; line-height: 1.6; }
.price-note a { color: var(--color-cyan); text-decoration: underline; }
.price-note strong { color: var(--color-text); }

.price-card-sub {
  border-color: var(--color-border-strong);
  background: linear-gradient(170deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.015) 100%);
}
.price-intro { font-size: .95rem; color: var(--color-text-dim); margin: 0 0 22px; }
.price-list strong { color: var(--color-text); }
.ast { color: var(--color-cyan); font-weight: 700; }

.compare { padding: 10px 6px; }
.compare-full { grid-column: 1 / -1; padding-top: 26px; border-top: 1px solid var(--color-border); }
.compare-full p { max-width: 62em; }
.compare h3 { margin-bottom: .8em; }
.compare p { color: var(--color-text-dim); font-size: .97rem; }

/* ---------- Accordion ---------- */
.accordion { display: grid; gap: 12px; }
.accordion-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: rgba(255,255,255,.022); overflow: hidden; }
.accordion-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 24px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  color: var(--color-text);
  text-align: left;
}
.chev { width: 10px; height: 10px; border-right: 2px solid var(--color-text-dim); border-bottom: 2px solid var(--color-text-dim); transform: rotate(45deg); transition: transform .22s; flex: none; margin-top: -4px; }
.accordion-trigger[aria-expanded="true"] .chev { transform: rotate(-135deg); margin-top: 4px; }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.accordion-panel p { padding: 0 24px 22px; margin: 0; color: var(--color-text-dim); font-size: .95rem; }

/* ---------- Form ---------- */
.form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field > span { font-size: .88rem; color: var(--color-text-dim); font-weight: 500; }
.field em { color: var(--color-cyan); font-style: normal; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: rgba(255,255,255,.035);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: .97rem;
  transition: border-color .18s, background .18s;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: rgba(79,123,255,.09);
}
.field select { appearance: none; cursor: pointer; }
.field select option { background: var(--color-surface); color: var(--color-text); }
.field ::placeholder { color: #5F6884; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .83rem; color: var(--color-text-dim); margin: 0; text-align: center; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--color-border); background: var(--color-bg-alt); padding: 56px 0 26px; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.logo-footer { margin-bottom: 14px; }
.footer-tag { color: var(--color-text-dim); font-size: .92rem; max-width: 30em; margin: 0; }
.footer-links { display: grid; gap: 10px; align-content: start; }
.footer-links a { color: var(--color-text-dim); font-size: .92rem; transition: color .18s; }
.footer-links a:hover { color: var(--color-text); }
.footer-contact { font-size: .92rem; color: var(--color-text-dim); display: grid; gap: 10px; align-content: start; }
.footer-contact a { color: var(--color-cyan); }
.footer-contact p { margin: 0; }
.footer-bottom { border-top: 1px solid var(--color-border); margin-top: 40px; padding-top: 22px; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.footer-bottom p { margin: 0; font-size: .84rem; color: var(--color-text-dim); }
.footer-legal a { color: var(--color-text-dim); text-decoration: underline; }
.footer-legal a:hover { color: var(--color-text); }

/* ---------- Pages légales ---------- */
.legal h1 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
.legal h2 {
  font-size: 1.35rem;
  margin: 48px 0 .7em;
  padding-top: 26px;
  border-top: 1px solid var(--color-border);
}
.legal h3 { font-size: 1.05rem; margin: 30px 0 .6em; color: var(--color-cyan); }
.legal p, .legal li { color: var(--color-text-dim); font-size: .96rem; }
.legal strong { color: var(--color-text); }
.legal ul { padding-left: 22px; display: grid; gap: 9px; margin: 0 0 1.2em; }
.legal a { color: var(--color-cyan); text-decoration: underline; }

.legal-warning {
  padding: 20px 22px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 190, 46, .34);
  background: rgba(255, 190, 46, .07);
  font-size: .92rem;
  color: var(--color-text-dim);
  margin-bottom: 12px;
}
.legal-warning strong { display: block; margin-bottom: 6px; color: #FFD37A; }

.legal-highlight {
  padding: 22px 24px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(79, 123, 255, .32);
  background: rgba(79, 123, 255, .08);
}
.legal-highlight p:last-child { margin-bottom: 0; }

.legal-sep { border: 0; border-top: 1px solid var(--color-border-strong); margin: 60px 0 0; }

/* ---------- Reveal ---------- */
.fade-in { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.fade-in.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .fade-in { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 46px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .pricing { grid-template-columns: 1fr; }
  .strip-inner { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .burger { display: flex; }
  .main-nav {
    position: fixed;
    top: 72px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 24px 22px;
    background: #05060B;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .8);
    border-bottom: 1px solid var(--color-border);
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 14px 0; border-bottom: 1px solid var(--color-border); font-size: 1rem; }
  .nav-cta { text-align: center; margin-top: 14px; border-bottom: 0 !important; }

  .hero { padding: 60px 0 54px; }
  .section { padding: 66px 0; }
  .grid-3 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .step { flex-direction: column; gap: 10px; padding: 24px 22px; }
  .price-card { padding: 30px 24px; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .btn { width: 100%; }
  .hero-actions { flex-direction: column; align-items: stretch; }
}

/* =========================================================
   v2 — Bandeau plein ecran et fond anime
   ========================================================= */

/* Sur ordinateur, le bandeau occupe toute la hauteur de l'ecran.
   Sur telephone on garde une hauteur libre : 100svh y pousserait
   tout le reste de la page sous la ligne de flottaison. */
@media (min-width: 761px) {
  .hero {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 110px 0 90px;
  }
}

/* Une seule colonne, centree : la demonstration a disparu du bandeau. */
.hero-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.hero-copy { max-width: 780px; }
.hero .lead { margin-left: auto; margin-right: auto; }
.hero-actions { justify-content: center; }
.hero-points { justify-content: center; }

/* Le mouvement : deux halos qui derivent lentement l'un vers l'autre.
   Ce sont des elements deja en place, on ne fait que les animer :
   aucune image, aucun octet supplementaire, et le navigateur les
   compose sur la carte graphique. */
.bg-glow-1 { animation: derive-1 28s ease-in-out infinite alternate; }
.bg-glow-2 { animation: derive-2 37s ease-in-out infinite alternate; }
@keyframes derive-1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(180px, 110px, 0) scale(1.28); }
}
@keyframes derive-2 {
  from { transform: translate3d(0, 0, 0) scale(1.12); }
  to   { transform: translate3d(-160px, 150px, 0) scale(.88); }
}

/* Un troisieme halo, plus bas, pour que le bandeau plein ecran
   ne se termine pas sur une zone morte. */
.bg-glow-3 {
  width: 560px; height: 560px;
  top: 340px; left: 44%;
  background: #22E3D6;
  opacity: .14;
  animation: derive-3 44s ease-in-out infinite alternate;
}
@keyframes derive-3 {
  from { transform: translate3d(-120px, 0, 0) scale(.9); }
  to   { transform: translate3d(140px, -90px, 0) scale(1.2); }
}

/* Le degrade du titre balaie le texte, lentement. */
.grad {
  background-size: 260% 100%;
  animation: balaye 11s ease-in-out infinite alternate;
}
@keyframes balaye {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@media (max-width: 760px) {
  .hero { padding: 60px 0 52px; }
  .hero-inner { text-align: left; justify-items: stretch; }
  .hero-points { justify-content: flex-start; }
  .bg-glow-3 { display: none; }
}

/* =========================================================
   v3 — Animation d'accueil
   Un maillage anime facon reseau de neurones dessine dans une
   balise <canvas> (une zone de dessin pilotee en JavaScript),
   un balayage lumineux qui traverse le bandeau une seule fois,
   et le texte qui se compose ligne par ligne.
   ========================================================= */

.hero { position: relative; overflow: hidden; }

/* La zone de dessin occupe tout le bandeau, derriere le texte.
   Le degrade de masque l'estompe sur les bords pour qu'elle se
   fonde dans le fond au lieu de s'arreter net. */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 78% 72% at 50% 45%, #000 42%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 45%, #000 42%, transparent 100%);
}

/* Le trait lumineux du balayage d'ouverture. */
.hero-scan {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 200px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(34, 227, 214, .10) 40%,
    rgba(255, 255, 255, .22) 50%,
    rgba(79, 123, 255, .10) 60%,
    transparent 100%);
}

.hero-inner { position: relative; z-index: 1; }

/* Toutes les animations d'entree sont enfermees ici, sous deux verrous.
   Premier verrou : si le visiteur a demande moins d'animations sur son
   appareil, le bloc entier est ignore. Second verrou : la classe
   « anime » est posee par le script sur la page. Sans JavaScript, ou si
   le script echoue, aucune de ces regles ne s'applique et le bandeau
   s'affiche complet et immobile. Sans cela, un titre masque en attendant
   son animation resterait invisible pour de bon. */
@media (prefers-reduced-motion: no-preference) {
  .anime .hero-copy > * {
    opacity: 0;
    animation: entree .75s cubic-bezier(.22, .7, .28, 1) forwards;
  }
  .anime .hero-copy > .pill { animation-delay: .10s; }
  .anime .hero-copy > h1 { animation-delay: .24s; }
  .anime .hero-copy > .lead { animation-delay: .52s; }
  .anime .hero-copy > .hero-actions { animation-delay: .68s; }
  .anime .hero-copy > .hero-points { animation-delay: .82s; }

  /* La ligne en couleur s'ecrit de gauche a droite, comme si elle
     etait generee. Les deux animations coexistent : « ecriture »
     une seule fois, « balaye » en boucle pour le degrade.
     Le passage en bloc en ligne est indispensable : sur un element
     en ligne qui se coupe sur deux lignes, le navigateur applique le
     decoupage a la premiere ligne seulement et fait disparaitre la
     seconde. */
  .anime .hero h1 .grad {
    display: inline-block;
    clip-path: inset(0 100% 0 0);
    animation:
      ecriture .95s .5s cubic-bezier(.22, .7, .28, 1) forwards,
      balaye 11s ease-in-out infinite alternate;
  }

  .anime .hero-scan { animation: balayage 1.7s .15s ease-out forwards; }
}

@keyframes entree {
  from { opacity: 0; transform: translate3d(0, 16px, 0); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes ecriture {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 -6% 0 0); }
}

@keyframes balayage {
  0%   { transform: translate3d(-220px, 0, 0); opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translate3d(100vw, 0, 0); opacity: 0; }
}

/* =========================================================
   v3 — Positionnement agence
   Nouveaux blocs : formule mise en avant, bandeau abonnement,
   tableau de comparaison marche, encarts, bloc agence.
   ========================================================= */

/* Texte reserve aux lecteurs d'ecran : present dans la page,
   invisible a l'oeil. Sert ici de legende au tableau. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Formule mise en avant ---------- */
.price-card-phare {
  position: relative;
  border-color: rgba(34, 227, 214, .42);
  background: linear-gradient(170deg, rgba(34, 227, 214, .12) 0%, rgba(79, 123, 255, .08) 55%, rgba(168, 85, 247, .06) 100%);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(34, 227, 214, .12) inset;
}
.price-ruban {
  position: absolute;
  top: -13px; right: 26px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--grad-main);
  color: #05060B;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(34, 227, 214, .3);
}
.price-list .price-plus { color: var(--color-text); }
.price-list .price-plus::before { border-color: var(--color-cyan); }

/* ---------- Bandeau abonnement ---------- */
.sub-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 40px;
  margin-top: 34px;
  padding: 34px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-strong);
  background: rgba(255, 255, 255, .028);
}
.sub-band .price-amount { margin-bottom: 18px; }
.sub-band .amount { font-size: 2.4rem; }
.sub-main .price-intro { margin-bottom: 22px; }
.sub-side .price-list { margin-bottom: 0; }
.sub-band .price-note { grid-column: 1 / -1; margin-top: 4px; padding-top: 20px; border-top: 1px solid var(--color-border); }

/* ---------- Tableau de comparaison ---------- */
/* Le conteneur defile horizontalement sur petit ecran : c'est le
   tableau qui glisse, jamais la page entiere. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, .02);
}
.compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: .93rem;
}
.compare-table th,
.compare-table td {
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-dim);
  vertical-align: top;
}
.compare-table thead th {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text);
  background: rgba(255, 255, 255, .03);
  white-space: nowrap;
}
.compare-table tbody th {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table .col-sitiz {
  background: rgba(79, 123, 255, .1);
  color: var(--color-text);
  border-left: 1px solid rgba(79, 123, 255, .28);
  border-right: 1px solid rgba(79, 123, 255, .28);
}
.compare-table thead .col-sitiz {
  background: rgba(79, 123, 255, .2);
  color: var(--color-cyan);
  border-top: 1px solid rgba(79, 123, 255, .28);
}
.compare-table tbody tr:last-child .col-sitiz { border-bottom: 1px solid rgba(79, 123, 255, .28); }
.compare-table .col-sitiz strong { color: var(--color-text); }

.table-note {
  font-size: .84rem;
  color: var(--color-text-dim);
  margin: 16px 0 0;
  max-width: 62em;
  line-height: 1.6;
}

.raisons { margin-top: 46px; }

/* ---------- Encart ---------- */
.callout {
  margin-top: 34px;
  padding: 28px 30px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(79, 123, 255, .3);
  background: rgba(79, 123, 255, .07);
}
.callout h3 { margin-bottom: .6em; }
.callout p { color: var(--color-text-dim); font-size: .97rem; margin: 0; max-width: 62em; }
.callout-sobre {
  border-color: var(--color-border-strong);
  background: rgba(255, 255, 255, .025);
}

/* ---------- Bloc agence ---------- */
.agence-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.engagements,
.identite {
  padding: 32px 30px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: linear-gradient(165deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, .012) 100%);
}
.engagements h3,
.identite h3 { margin-bottom: 1em; }
.engagements .price-list { margin-bottom: 0; }
.identite p { color: var(--color-text-dim); font-size: .95rem; }
.identite strong { color: var(--color-text); }

.identite-list { margin: 22px 0; display: grid; gap: 10px; }
.identite-list > div {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}
.identite-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.identite-list dt { font-size: .88rem; color: var(--color-text-dim); }
.identite-list dd { margin: 0; font-size: .93rem; color: var(--color-text); font-weight: 500; }
.identite-list dd a { color: var(--color-cyan); }

.identite-note { font-size: .88rem; margin-bottom: 0; }
.identite-note a { color: var(--color-cyan); text-decoration: underline; }

/* ---------- Note de delai ---------- */
.note-delai {
  margin: 26px 0 0;
  padding: 22px 26px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: rgba(255, 255, 255, .025);
  font-size: .95rem;
  color: var(--color-text-dim);
  max-width: 62em;
}
.note-delai strong { color: var(--color-text); }

/* ---------- Indication de defilement du tableau ---------- */
/* Sur telephone le tableau se lit en le faisant glisser du doigt.
   Sans indication, le visiteur ne voit que les deux premieres colonnes
   et croit que la comparaison s'arrete la. */
/* Le tableau mesure 720 px au minimum et le cadre vaut la largeur de la
   fenetre moins 48 px de marges : il deborde donc exactement au-dessous
   de 768 px, et c'est la seule largeur ou l'indication a un sens. */
.table-hint { display: none; }
@media (max-width: 767px) {
  .table-hint {
    display: block;
    font-size: .84rem;
    color: var(--color-cyan);
    margin: 0 0 12px;
  }
}

/* ---------- Adaptations ---------- */

/* Le menu compte desormais six entrees plus le bouton : au-dessous de
   900 px il ne tient plus sur une ligne. On bascule donc sur le menu
   deroulant des 900 px, et non plus des 760 px. */
@media (max-width: 900px) {
  .burger { display: flex; }
  .main-nav {
    position: fixed;
    top: 72px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 24px 22px;
    background: #05060B;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .8);
    border-bottom: 1px solid var(--color-border);
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 14px 0; border-bottom: 1px solid var(--color-border); font-size: 1rem; }
  .nav-cta { text-align: center; margin-top: 14px; border-bottom: 0 !important; }
}

@media (max-width: 980px) {
  .sub-band { grid-template-columns: 1fr; }
  .agence-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .price-ruban { right: 18px; }
  .sub-band { padding: 26px 22px; }
  .engagements, .identite { padding: 26px 22px; }
  .callout { padding: 24px 22px; }
  .identite-list > div { grid-template-columns: 1fr; gap: 2px; }
  .table-wrap { border-radius: var(--radius-md); }
  .compare-table th, .compare-table td { padding: 13px 14px; }
}