/* ================================================================
   Clone Landing CSE — Equivalenza
   Fichier CSS autonome pour la page de landing non connectée.

   Architecture :
     1. Import Google Fonts (DM Sans + Cormorant Garamond)
     2. Import CSS original cse-sections.css (chemin relatif)
     3. Design tokens :root (requis par cse-sections.css)
     4. Base reset + overrides spécifiques au clone
   ================================================================ */

/* ── 1. FONTS (locales — voir assets/fonts/fonts.css) ── */
/* ── 2. SOURCE CSS ── */
/* ── 3. DESIGN TOKENS ── */
:root {
  /* Couleurs fondation */
  --eq-black:      #000000;
  --eq-dark:       #111111;
  --eq-white:      #ffffff;
  --eq-off-white:  #f5f5f5;

  /* Palette brand */
  --eq-green:       #A1EC8B;
  --eq-green-dark:  #1d7a2a;
  --eq-gold:        #A1EC8B;
  --eq-gold-dark:   #1d7a2a;
  --eq-gold-light:  #c5f5ae;
  --eq-gold-pale:   rgba(161,236,139,0.12);
  --eq-pink:        #F780E0;

  /* Typographie — DM Sans est le fallback gratuit d'Aktiv Grotesk */
  --eq-font-head:  'DM Sans', 'Montserrat', Arial, sans-serif;
  --eq-font-body:  'DM Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --eq-font-serif: 'Cormorant Garamond', 'Georgia', serif;
}

/* ── 4. BASE RESET ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--eq-font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.6;
  color: #050505;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

/* ── 5. NAVIGATION SUB (standalone) ── */
.cse-subnav {
  position: sticky;
  top: 0;
  z-index: 800;
  background: #050505;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 28px;
  height: 52px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cse-subnav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}
.cse-subnav__link {
  font-family: var(--eq-font-head);
  font-size: .54rem;
  font-weight: 800;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  text-decoration: none;
  padding: 6px 14px;
  transition: color .15s ease;
  white-space: nowrap;
}
.cse-subnav__link:hover { color: #fff; }
.cse-subnav__logo {
  font-family: var(--eq-font-head);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  margin-right: 24px;
  white-space: nowrap;
}
.cse-subnav__right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cse-subnav__login {
  font-family: var(--eq-font-head);
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.12);
  transition: color .15s, border-color .15s;
}
.cse-subnav__login:hover { color: #fff; border-color: rgba(255,255,255,.4); }

@media (max-width: 680px) {
  .cse-subnav__links { display: none; }
}

/* ── 6. STICKY CTA BAR (scroll behavior géré en JS) ── */
.cse-sticky-cta {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: #fff;
  border-bottom: 1.5px solid rgba(0,0,0,.09);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 28px;
  transform: translateY(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.cse-sticky-cta--visible { transform: translateY(0); }
.cse-sticky-cta__label {
  font-family: var(--eq-font-head);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #050505;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cse-sticky-cta__label span { color: #050505; background: #A1EC8B; padding: 2px 8px; }
.cse-sticky-cta__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #A1EC8B;
  color: #050505;
  font-family: var(--eq-font-head);
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 11px 22px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease;
  box-shadow: 0 4px 16px rgba(161,236,139,.40);
}
.cse-sticky-cta__btn:hover { background: #7edf62; }

@media (max-width: 600px) {
  .cse-sticky-cta__label { display: none; }
  .cse-sticky-cta { justify-content: center; }
}

/* Marks utilitaires */
.mk-rose { background-color: #f780e0; color: #050505; display: inline; padding: 0; }
.mk-vert  { background-color: #A1EC8B; color: #050505; display: inline; padding: 0; }

/* ═══════════════════════════════════════════════════════════════════
   EQ-HERO — Section immersive Awwwards
   Grain · Glow orbs · Typo éditoriale · Tilt 3D · Floaters · Ticker
   ═══════════════════════════════════════════════════════════════════ */

/* ── Conteneur principal ── */
.eq-hero {
  position: relative;
  min-height: calc(100svh - 52px);
  background: #050505;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: none;
}
@media (hover: none) { .eq-hero { cursor: auto; } }

/* ── Fond atmosphérique ── */
.eq-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Texture grain animée */
.eq-hero__grain {
  position: absolute;
  inset: -150%;
  width: 400%;
  height: 400%;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  animation: grain-shift .7s steps(2) infinite;
}
@keyframes grain-shift {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-4%,-7%); }
  50%  { transform: translate(-8%,4%); }
  75%  { transform: translate(4%,-4%); }
  100% { transform: translate(0,0); }
}

/* Orbes de lumière ambiante */
.eq-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
}
.eq-hero__orb--a {
  width: 720px; height: 720px;
  background: var(--eq-green);
  opacity: .09;
  top: -220px; right: -80px;
  animation: orb-breathe 11s ease-in-out infinite alternate;
}
.eq-hero__orb--b {
  width: 520px; height: 520px;
  background: var(--eq-pink);
  opacity: .065;
  bottom: -160px; left: -60px;
  animation: orb-breathe 14s ease-in-out 4s infinite alternate;
}
.eq-hero__orb--c {
  width: 380px; height: 380px;
  background: var(--eq-green);
  opacity: .07;
  top: 50%; left: 48%;
  transform: translate(-50%,-50%);
  animation: orb-center 9s ease-in-out 2s infinite alternate;
}
@keyframes orb-breathe {
  from { opacity: .05; transform: scale(1); }
  to   { opacity: .16; transform: scale(1.18); }
}
@keyframes orb-center {
  from { opacity: .04; transform: translate(-50%,-50%) scale(.9); }
  to   { opacity: .11; transform: translate(-50%,-50%) scale(1.25); }
}

/* Ligne de lumière — fine ligne verte horizontale au centre */
.eq-hero__scanline {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--eq-green) 40%, var(--eq-green) 60%, transparent 100%);
  opacity: 0;
  animation: scanline-pass 1.6s cubic-bezier(.4,0,.2,1) .05s forwards;
  pointer-events: none;
  z-index: 55;
}
@keyframes scanline-pass {
  0%   { top: -2px;    opacity: .9; }
  80%  { opacity: .4; }
  100% { top: 102%;   opacity: 0; }
}

/* Rideau de révélation (wipe gauche → droite) */
.eq-hero__curtain {
  position: absolute;
  inset: 0;
  background: #050505;
  z-index: 54;
  transform-origin: right center;
  animation: curtain-open 1.05s cubic-bezier(.87,0,.13,1) .08s forwards;
}
@keyframes curtain-open {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ── Layout intérieur ── */
.eq-hero__inner {
  flex: 1;
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
  padding: 0 60px;
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* ── COLONNE GAUCHE — Copie ── */
.eq-hero__copy {
  padding: 88px 0 60px;
  display: flex;
  flex-direction: column;
}

/* Eyebrow pulsant */
.eq-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--eq-font-head);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.48);
  margin-bottom: 30px;
  opacity: 0;
  animation: hero-fadein .6s ease .95s forwards;
}
.eq-hero__eyebrow-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--eq-green);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(161,236,139,.7);
  animation: dot-pulse 2.2s ease infinite;
}
@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(161,236,139,.7); }
  60%  { box-shadow: 0 0 0 8px rgba(161,236,139,0); }
  100% { box-shadow: 0 0 0 0   rgba(161,236,139,0); }
}
@keyframes hero-fadein {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── H1 typographie éditoriale ── */
.eq-hero__h1 {
  display: flex;
  flex-direction: column;
  margin: 0 0 36px;
}

/* Chaque rangée = masque overflow + enfant qui monte */
.eq-h1-row {
  display: block;
  overflow: hidden;
  line-height: 1;
}
.eq-h1-row > * {
  display: block;
  transform: translateY(105%);
  animation: row-rise .95s cubic-bezier(.16,1,.3,1) forwards;
}
.eq-h1-row--a > * { animation-delay: 1.05s; }
.eq-h1-row--b > * { animation-delay: 1.20s; }
.eq-h1-row--c > * { animation-delay: 1.35s; }
.eq-h1-row--d > * { animation-delay: 1.50s; }
@keyframes row-rise { to { transform: translateY(0); } }

/* Ligne A — petit caps tracking, fond rose */
.eq-h1-row--a > span {
  font-family: var(--eq-font-head);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #050505;
  background: var(--eq-green);
  display: inline-block;
  padding: 6px 14px 5px;
  margin-bottom: 4px;
}
/* Ligne B — mot massif FitText */
.eq-h1-row--b > span {
  font-family: var(--eq-font-head);
  font-size: 9rem; /* sera recalculé par FitText JS */
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: .9;
  color: #fff;
  padding-bottom: 4px;
}
/* Ligne C — italic serif */
.eq-h1-row--c > em {
  font-family: var(--eq-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1.2;
  color: rgba(255,255,255,.72);
  padding: 6px 0 4px;
}
/* Ligne D — gras, dernier mot en vert */
.eq-h1-row--d > span {
  font-family: var(--eq-font-head);
  font-size: 1.65rem;
  font-weight: 800;
  color: rgba(255,255,255,.88);
  letter-spacing: -.01em;
}
.eq-accent-green { color: var(--eq-green); }
.eq-accent-dot   { color: var(--eq-green); }

/* ── Bloc tarifs ── */
.eq-hero__prices {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(255,255,255,.09);
  margin-bottom: 36px;
  opacity: 0;
  animation: hero-fadein .6s ease 1.8s forwards;
  overflow: hidden;
}
.eq-price-pill {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 22px;
  flex: 1;
}
.eq-price-pill + .eq-price-pill { border-left: 1px solid rgba(255,255,255,.09); }
.eq-price-pill__ml {
  font-family: var(--eq-font-head);
  font-size: .5rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
}
.eq-price-pill__was {
  font-size: .7rem;
  color: rgba(255,255,255,.28);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,.28);
}
.eq-price-pill__cse {
  font-family: var(--eq-font-head);
  font-size: 1.3rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.eq-price-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 14px 18px;
  border-left: 1px solid rgba(255,255,255,.09);
  background: rgba(161,236,139,.05);
  font-family: var(--eq-font-head);
  font-size: .46rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--eq-green);
}

/* ── Boutons ── */
.eq-hero__ctas {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 28px;
  opacity: 0;
  animation: hero-fadein .6s ease 1.95s forwards;
}

/* Bouton principal magnétique */
.eq-btn-magnetic {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--eq-green);
  color: #050505;
  font-family: var(--eq-font-head);
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
  padding: 18px 38px;
  text-decoration: none;
  will-change: transform;
  transition: box-shadow .3s ease;
  box-shadow: 0 10px 48px rgba(161,236,139,.28);
  overflow: hidden;
}
.eq-btn-magnetic::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #050505;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.eq-btn-magnetic:hover::before { transform: translateY(0); }
.eq-btn-magnetic:hover { box-shadow: 0 18px 64px rgba(161,236,139,.42); color: var(--eq-green); }
.eq-btn-magnetic span,
.eq-btn-magnetic svg { position: relative; z-index: 1; pointer-events: none; }
.eq-btn-magnetic svg { transition: transform .25s ease; flex-shrink: 0; }
.eq-btn-magnetic:hover svg { transform: translateX(5px); }

/* Lien secondaire */
.eq-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--eq-font-head);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  transition: color .2s, gap .2s;
}
.eq-btn-ghost:hover { color: #fff; gap: 12px; }

/* ── Garanties ── */
.eq-hero__guarantees {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  opacity: 0;
  animation: hero-fadein .6s ease 2.1s forwards;
}
.eq-hero__guarantees li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .7rem;
  color: rgba(255,255,255,.4);
  font-family: var(--eq-font-head);
  font-weight: 500;
}
.eq-hero__check {
  width: 17px; height: 17px;
  border-radius: 50%;
  background: rgba(161,236,139,.12);
  border: 1px solid rgba(161,236,139,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--eq-green);
}

/* ── COLONNE DROITE — Showcase ── */
.eq-hero__showcase {
  position: relative;
  height: 100%;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Stage central — produit principal */
.eq-hero__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
  opacity: 0;
  animation: hero-fadein .9s ease 1.3s forwards;
}

/* Halo derrière le produit */
.eq-hero__glow {
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(161,236,139,.15) 0%, transparent 68%);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
  transition: background .6s ease;
  animation: glow-breathe 7s ease-in-out infinite alternate;
}
@keyframes glow-breathe {
  from { transform: translate(-50%,-50%) scale(.9);  opacity: .7; }
  to   { transform: translate(-50%,-50%) scale(1.15); opacity: 1; }
}

/* Wrapper tilt 3D */
.eq-hero__tilt {
  transform-style: preserve-3d;
  transition: transform .06s linear;
  will-change: transform;
  position: relative;
}

/* Image produit principale */
.eq-hero__product-img {
  width: 260px; height: 320px;
  object-fit: contain;
  filter: drop-shadow(0 40px 70px rgba(0,0,0,.65));
  display: block;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, filter .5s ease;
}

/* Reflet de surface */
.eq-hero__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, rgba(255,255,255,.07) 0%, transparent 45%);
  pointer-events: none;
  border-radius: 4px;
}

/* Info produit sous l'image */
.eq-hero__product-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 18px;
  opacity: 0;
  animation: hero-fadein .5s ease 1.7s forwards;
}
.eq-hero__product-name {
  font-family: var(--eq-font-head);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  transition: opacity .22s ease;
}
.eq-hero__product-family {
  font-size: .62rem;
  color: rgba(255,255,255,.38);
  letter-spacing: .06em;
  transition: opacity .22s ease;
}

/* ── Floaters — miniatures orbitales ── */
.eq-floater {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--fs, 82px);
  height: var(--fs, 82px);
  transform: translate(calc(-50% + var(--fx,0px)), calc(-50% + var(--fy,0px))) rotate(var(--fr,0deg));
  cursor: pointer;
  overflow: hidden;
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
  animation: floater-drift var(--fa,5s) ease-in-out var(--fd,0s) infinite;
  opacity: 0;
  animation-fill-mode: both;
  transition: border-color .25s, box-shadow .25s, z-index 0s;
  z-index: 3;
}
@keyframes floater-drift {
  0%,100% { opacity: .68; transform: translate(calc(-50% + var(--fx,0px)), calc(-50% + var(--fy,0px))) rotate(var(--fr,0deg)) translateY(0); }
  15%     { opacity: .72; }
  50%     { opacity: .68; transform: translate(calc(-50% + var(--fx,0px)), calc(-50% + var(--fy,0px))) rotate(var(--fr,0deg)) translateY(-9px); }
}
.eq-floater:hover {
  filter: drop-shadow(0 4px 16px rgba(161,236,139,.3));
  z-index: 10;
}
.eq-floater.is-active {
  filter: drop-shadow(0 4px 20px rgba(161,236,139,.4));
  opacity: 1 !important;
}
.eq-floater img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* Compteur de références */
.eq-hero__count {
  position: absolute;
  bottom: 48px; right: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  opacity: 0;
  animation: hero-fadein .6s ease 1.9s forwards;
}
.eq-hero__count-num {
  font-family: var(--eq-font-head);
  font-size: 2.4rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -.03em;
}
.eq-hero__count-num sup {
  font-size: 1.1rem;
  color: var(--eq-green);
  vertical-align: super;
  font-weight: 900;
}
.eq-hero__count-lbl {
  font-family: var(--eq-font-head);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
}

/* ── Ticker bas de page ── */
.eq-hero__ticker {
  height: 50px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.018);
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 3;
  flex-shrink: 0;
}
.eq-hero__ticker-inner {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.eq-hero__ticker-track {
  display: flex;
  align-items: center;
  gap: 36px;
  white-space: nowrap;
  width: max-content;
  animation: ticker-roll 24s linear infinite;
}
.eq-hero__ticker-track span {
  font-family: var(--eq-font-head);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.32);
}
.eq-hero__ticker-track .eq-sep {
  color: var(--eq-green);
  font-size: .45rem;
  opacity: .8;
}
@keyframes ticker-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Curseur custom ── */
.eq-cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  mix-blend-mode: difference;
}
.eq-cursor__dot {
  position: absolute;
  width: 5px; height: 5px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: width .2s, height .2s;
}
.eq-cursor__ring {
  position: absolute;
  width: 38px; height: 38px;
  border: 1.5px solid rgba(255,255,255,.55);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: width .38s cubic-bezier(.16,1,.3,1), height .38s cubic-bezier(.16,1,.3,1), border-color .2s;
}
.eq-cursor--hover .eq-cursor__dot { width: 10px; height: 10px; }
.eq-cursor--hover .eq-cursor__ring { width: 64px; height: 64px; border-color: rgba(161,236,139,.55); }

/* ── Hero Subtitle ── */
.eq-hero__subtitle {
  font-size: .88rem;
  color: rgba(255,255,255,.48);
  line-height: 1.75;
  margin-bottom: 28px;
  max-width: 480px;
  opacity: 0;
  animation: hero-fadein .6s ease 1.65s forwards;
}

/* ── Hero Mini Lead Form ── */
.eq-hero__lead-box {
  margin-bottom: 30px;
  opacity: 0;
  animation: hero-fadein .6s ease 1.95s forwards;
}
.eq-lead-form__row {
  display: flex;
  border: 1.5px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition: border-color .25s ease;
}
.eq-lead-form__row:focus-within {
  border-color: rgba(161,236,139,.35);
}
.eq-lead-form__field {
  flex: 1;
  min-width: 0;
}
.eq-lead-form__field + .eq-lead-form__field {
  border-left: 1px solid rgba(255,255,255,.08);
}
.eq-lead-form__field input {
  width: 100%;
  padding: 17px 18px;
  border: none;
  background: transparent;
  color: #fff;
  font-family: var(--eq-font-body);
  font-size: .82rem;
  outline: none;
}
.eq-lead-form__field input::placeholder {
  color: rgba(255,255,255,.28);
  font-size: .78rem;
}
.eq-lead-form__field input:focus {
  background: rgba(255,255,255,.03);
}
.eq-lead-form__field input.eq-input-err {
  background: rgba(217,64,64,.06);
}
.eq-lead-form__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--eq-green);
  color: #050505;
  font-family: var(--eq-font-head);
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 17px 30px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  transition: box-shadow .3s ease;
  box-shadow: 0 8px 32px rgba(161,236,139,.22);
}
.eq-lead-form__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #050505;
  transform: translateY(101%);
  transition: transform .32s cubic-bezier(.16,1,.3,1);
}
.eq-lead-form__btn:hover::before { transform: translateY(0); }
.eq-lead-form__btn:hover { color: var(--eq-green); box-shadow: 0 14px 48px rgba(161,236,139,.35); }
.eq-lead-form__btn span,
.eq-lead-form__btn svg { position: relative; z-index: 1; pointer-events: none; }
.eq-lead-form__btn svg { transition: transform .22s ease; }
.eq-lead-form__btn:hover svg { transform: translateX(4px); }

.eq-lead-form__err {
  display: none;
  background: rgba(217,64,64,.1);
  border: 1px solid rgba(217,64,64,.25);
  color: #ff6b6b;
  font-size: .75rem;
  padding: 8px 14px;
  margin-top: 8px;
}

.eq-lead-form__under {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.eq-lead-form__under span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .65rem;
  color: rgba(255,255,255,.35);
  font-family: var(--eq-font-head);
  font-weight: 500;
}
.eq-lead-form__under svg {
  color: var(--eq-green);
  flex-shrink: 0;
}

.eq-lead-form__preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  color: rgba(255,255,255,.32);
  text-decoration: none;
  transition: color .2s, gap .2s;
  margin-top: 12px;
}
.eq-lead-form__preview:hover { color: rgba(255,255,255,.65); gap: 10px; }

/* ── Hero Social Proof ── */
.eq-hero__social-proof {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(255,255,255,.08);
  opacity: 0;
  animation: hero-fadein .6s ease 2.15s forwards;
}
.eq-proof {
  flex: 1;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.eq-proof + .eq-proof {
  border-left: 1px solid rgba(255,255,255,.08);
}
.eq-proof strong {
  font-family: var(--eq-font-head);
  font-size: 1.5rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -.02em;
}
.eq-proof strong sup {
  font-size: .7rem;
  color: var(--eq-green);
  vertical-align: super;
}
.eq-proof__sub {
  font-size: .85rem;
  color: rgba(255,255,255,.38);
  font-weight: 500;
}
.eq-proof__icon {
  margin-bottom: 2px;
}
.eq-proof > span:last-child {
  font-family: var(--eq-font-head);
  font-size: .46rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .eq-hero__inner { grid-template-columns: 1fr; padding: 0 36px; }
  .eq-hero__showcase { display: none; }
  .eq-hero__copy { padding: 80px 0 48px; }
}
@media (max-width: 600px) {
  .eq-hero__inner { padding: 0 22px; }
  .eq-h1-row--b > span { font-size: 5.5rem; }
  .eq-h1-row--c > em   { font-size: 1.9rem; }
  .eq-h1-row--d > span { font-size: 1.3rem; }
  .eq-lead-form__row { flex-direction: column; }
  .eq-lead-form__field + .eq-lead-form__field { border-left: none; border-top: 1px solid rgba(255,255,255,.08); }
  .eq-lead-form__btn { width: 100%; justify-content: center; padding: 16px; }
  .eq-lead-form__under { gap: 10px; }
  .eq-hero__social-proof { flex-wrap: wrap; }
  .eq-proof { min-width: calc(50% - 1px); padding: 12px 16px; }
  .eq-proof:last-child { border-top: 1px solid rgba(255,255,255,.08); }
}

/* ═══════════════════════════════════════════════════════════════
   STEPPER FORM — Indicateur 3 étapes
   ═══════════════════════════════════════════════════════════════ */

/* ── Barre de progression ── */
.eq-steps-track {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
  padding: 0 2px;
  list-style: none;
}

.eq-step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.eq-step-node__circle {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color .4s ease, background .4s ease, box-shadow .4s ease;
}
.eq-step-node__num {
  font-family: var(--eq-font-head);
  font-size: .72rem;
  font-weight: 900;
  color: rgba(255,255,255,.22);
  line-height: 1;
  transition: opacity .25s ease, color .25s ease;
}
.eq-step-node__check {
  position: absolute;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
  color: #050505;
  stroke: #050505;
}
.eq-step-node__label {
  font-family: var(--eq-font-head);
  font-size: .44rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.2);
  white-space: nowrap;
  transition: color .35s ease;
}

/* Actif */
.eq-step-node--active .eq-step-node__circle {
  border-color: var(--eq-green);
  background: rgba(161,236,139,.08);
  box-shadow: 0 0 0 5px rgba(161,236,139,.07);
}
.eq-step-node--active .eq-step-node__num { color: var(--eq-green); }
.eq-step-node--active .eq-step-node__label { color: rgba(255,255,255,.75); }

/* Terminé */
.eq-step-node--done .eq-step-node__circle {
  border-color: var(--eq-green);
  background: var(--eq-green);
  box-shadow: 0 0 0 5px rgba(161,236,139,.1);
}
.eq-step-node--done .eq-step-node__num { opacity: 0; }
.eq-step-node--done .eq-step-node__check { opacity: 1; transform: scale(1); }
.eq-step-node--done .eq-step-node__label { color: var(--eq-green); }

/* Connecteur */
.eq-step-connector {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 0 8px 24px;
  position: relative;
  overflow: hidden;
}
.eq-step-connector__fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: var(--eq-green);
  transition: width .55s cubic-bezier(.16,1,.3,1);
}

/* ── Panneau de chaque étape ── */
.eq-step-panel {
  display: none;
}
.eq-step-panel--active {
  display: block;
  animation: step-in .38s cubic-bezier(.16,1,.3,1) both;
}
.eq-step-panel--exit {
  display: block;
  animation: step-out .26s ease both;
}
.eq-step-panel--enter-back {
  display: block;
  animation: step-in-back .38s cubic-bezier(.16,1,.3,1) both;
}
.eq-step-panel--exit-back {
  display: block;
  animation: step-out-back .26s ease both;
}
@keyframes step-in       { from { opacity:0; transform:translateX(26px)  } to { opacity:1; transform:translateX(0) } }
@keyframes step-out      { from { opacity:1; transform:translateX(0)      } to { opacity:0; transform:translateX(-20px) } }
@keyframes step-in-back  { from { opacity:0; transform:translateX(-26px) } to { opacity:1; transform:translateX(0) } }
@keyframes step-out-back { from { opacity:1; transform:translateX(0)      } to { opacity:0; transform:translateX(20px) } }

/* ── En-tête de chaque étape ── */
.eq-step-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.eq-step-head__num {
  font-family: var(--eq-font-head);
  font-size: 2.6rem;
  font-weight: 900;
  color: rgba(255,255,255,.055);
  line-height: 1;
  letter-spacing: -.03em;
  flex-shrink: 0;
}
.eq-step-head__title {
  font-family: var(--eq-font-head);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 3px;
}
.eq-step-head__desc {
  font-size: .62rem;
  color: rgba(255,255,255,.35);
  margin: 0;
  letter-spacing: .03em;
}

/* ── Recap chips ── */
.eq-step-recap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  min-height: 0;
}
.eq-step-recap:empty { display: none; }
.eq-recap-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  background: rgba(161,236,139,.06);
  border: 1px solid rgba(161,236,139,.18);
  font-family: var(--eq-font-head);
  font-size: .48rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--eq-green);
}
.eq-recap-chip svg { flex-shrink: 0; opacity: .7; }

/* ── Navigation entre étapes ── */
.eq-step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
}

/* Bouton Continuer / Envoyer */
.eq-step-next {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--eq-green);
  color: #050505;
  font-family: var(--eq-font-head);
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: box-shadow .3s ease;
  box-shadow: 0 8px 32px rgba(161,236,139,.18);
  flex-shrink: 0;
}
.eq-step-next::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #050505;
  transform: translateY(101%);
  transition: transform .32s cubic-bezier(.16,1,.3,1);
}
.eq-step-next:hover::before { transform: translateY(0); }
.eq-step-next:hover { color: var(--eq-green); box-shadow: 0 14px 48px rgba(161,236,139,.28); }
.eq-step-next:disabled { opacity: .55; pointer-events: none; }
.eq-step-next span,
.eq-step-next svg { position: relative; z-index: 1; pointer-events: none; }
.eq-step-next svg { transition: transform .22s ease; }
.eq-step-next:hover svg { transform: translateX(4px); }

/* Bouton Retour */
.eq-step-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--eq-font-head);
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
  padding: 0;
  transition: color .2s;
}
.eq-step-back:hover { color: rgba(255,255,255,.65); }
.eq-step-back svg { transition: transform .2s; }
.eq-step-back:hover svg { transform: translateX(-3px); }

/* Erreur inline par étape */
.eq-step-err {
  margin-top: 12px;
}

/* Label requis */
.eq-req {
  color: var(--eq-green);
  text-decoration: none;
  font-style: normal;
  margin-left: 2px;
}

/* Bouton submit spécifique */
.eq-step-submit {
  box-shadow: 0 10px 40px rgba(161,236,139,.25);
}
.eq-step-submit:hover {
  box-shadow: 0 16px 56px rgba(161,236,139,.36);
}

/* ── Form box dark override ── */
.cse-form-box {
  background: #0c0c0c;
  border: 1px solid rgba(255,255,255,.06);
  padding: 40px 36px;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.cse-form-box__title { color: #fff; }
.cse-form-box__sub { color: rgba(255,255,255,.4); }
.cse-field label { color: rgba(255,255,255,.5); }
.cse-field input,
.cse-field select,
.cse-field textarea {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
  color: #fff;
}
.cse-field input::placeholder,
.cse-field select option,
.cse-field textarea::placeholder { color: rgba(255,255,255,.25); }
.cse-field input:focus,
.cse-field select:focus,
.cse-field textarea:focus {
  border-color: var(--eq-green);
  box-shadow: 0 0 0 3px rgba(161,236,139,.1);
}
.cse-field__opt { color: rgba(255,255,255,.25) !important; }
.cse-form-note { color: rgba(255,255,255,.3); }
.cse-form-ok h4 { color: #fff; }
.cse-form-ok p { color: rgba(255,255,255,.5); }
