/* ═══════════════════════════════════════════════════════════════════════════
   HERO REFONTE — D.252 (AUDIT-FRONTEND : la photo stock cassait l'identité
   dark-futuriste du reste du site + sous-titre illisible + chips éparpillées).
   Couche d'override chargée APRÈS styles.min.css (même pattern de layering que
   critical.css / ultra-investors.css). Tokens du design system (critical.css
   :root) avec fallback. Direction : futuriste, sobre, puissant — zéro photo,
   profondeur par lumière (mesh radial), hiérarchie typographique nette,
   bande de stats structurée.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Scène : plein cadre, photo stock éliminée ───────────────────────── */
.hero-ultra {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-visual,
.hero-float-cards {
  display: none; /* photo stock + chips éparpillées retirées (markup supprimé, garde anti-résidu) */
}

.hero-mesh-bg {
  /* remplace assets/hero-bg.webp : lumière radiale pure CSS sur la navy du système */
  background-image:
    radial-gradient(ellipse 90% 55% at 50% -12%, rgba(79, 186, 241, 0.16), transparent 62%),
    radial-gradient(ellipse 55% 42% at 88% 112%, rgba(43, 102, 133, 0.22), transparent 58%),
    radial-gradient(ellipse 40% 30% at 8% 95%, rgba(79, 186, 241, 0.07), transparent 55%),
    linear-gradient(180deg, #0a0e1f 0%, var(--secondary, #191E35) 58%, #0c1126 100%);
  background-size: auto;
}

.mesh-orb { opacity: 0.32; }

.hero-grid-lines {
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
}

/* ── 2. Hiérarchie typographique (lisible sur fond propre, plus de glass-box) */
.hero-ultra .hero-tag {
  border: 1px solid rgba(79, 186, 241, 0.35);
  background: rgba(79, 186, 241, 0.06);
  backdrop-filter: none;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.hero-ultra .hero-title {
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -0.022em;
}

.hero-ultra .hero-title .title-line {
  display: block;
}

.hero-ultra .hero-title .gradient-text {
  /* Bug de lisibilité : fill transparent + text-shadow hérité = texte « embossé »
     sombre illisible (le shadow peint SOUS le texte transparent). */
  text-shadow: none;
  background: linear-gradient(110deg, #5EC8F7 0%, #9bdcff 48%, #34D399 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* NE PAS toucher à animation : kineticReveal révèle l'élément depuis
     opacity:0 (styles.min) — l'annuler le rend invisible à jamais. */
}

@media (prefers-reduced-motion: reduce) {
  /* si les animations sont coupées, l'élément ne doit pas rester à opacity:0 */
  .hero-title.kinetic-type .title-line { opacity: 1 !important; }
}

.hero-ultra .hero-description,
.hero-ultra .hero-desc-readable {
  /* le panneau glass servait à survivre à la photo — inutile sur fond propre */
  background: none;
  backdrop-filter: none;
  box-shadow: none;
  border: none;
  padding: 0;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
  color: rgba(226, 232, 240, 0.88);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.65;
}

.hero-ultra .hero-description strong {
  color: #fff;
}

/* ── 3. Bande de stats structurée (remplace les 4 chips flottantes) ─────── */
.hero-stats-ultra {
  margin-top: 2.6rem;
  padding-top: 1.8rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(1.2rem, 4vw, 3.2rem);
}

.hero-stats-ultra::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 86%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 186, 241, 0.45), transparent);
}

.hero-stats-ultra .stat-number-ultra {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: #fff;
  text-shadow: 0 0 24px rgba(79, 186, 241, 0.35);
}

.hero-stats-ultra .stat-label-ultra {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.95);
}

.hero-stats-ultra .stat-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent, rgba(79, 186, 241, 0.30), transparent);
}

/* ── 4. Trust bar : présence discrète ───────────────────────────────────── */
.hero-trust-bar {
  margin-top: 2.4rem;
}

.hero-trust-bar .trust-logo {
  opacity: 0.72;
  transition: opacity 0.25s ease;
}

.hero-trust-bar .trust-logo:hover {
  opacity: 1;
}

/* ── 5. Accessibilité & mobile ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mesh-orb,
  .hero-ultra .gradient-text,
  .hero-grid-lines {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .hero-ultra { min-height: 88vh; }
  .hero-stats-ultra {
    flex-wrap: wrap;
    gap: 1.1rem 1.6rem;
  }
  .hero-stats-ultra .stat-divider { display: none; }
}

/* RTL : la bande de stats et la typographie sont symétriques — rien à forcer,
   dir=rtl du document gère l'ordre. */