/* ════════════════════════════════════════════════════════════════════════
   FX-2026 — « Le schéma électrique vivant »
   Couche motion + profondeur partagée landing / pages SEO.
   Toute animation est gated derrière html.fx (posé par un snippet inline
   uniquement si prefers-reduced-motion: no-preference ET IntersectionObserver
   dispo). Sans JS / motion réduit : tout est visible, rien ne bouge.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. RÉVÉLATION AU SCROLL ─────────────────────────────────────────── */
html.fx .fade-section,
html.fx [data-fx] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.75s cubic-bezier(0.22, 0.65, 0.25, 1),
    transform 0.75s cubic-bezier(0.22, 0.65, 0.25, 1);
  transition-delay: var(--fx-d, 0s);
}
html.fx .fade-section.fx-in,
html.fx [data-fx].fx-in {
  opacity: 1;
  transform: none;
}

/* Stagger : le conteneur est observé, ses enfants directs cascadent */
html.fx .fx-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 0.65, 0.25, 1),
    transform 0.65s cubic-bezier(0.22, 0.65, 0.25, 1);
}
html.fx .fx-stagger.fx-in > * { opacity: 1; transform: none; }
html.fx .fx-stagger.fx-in > *:nth-child(1) { transition-delay: 0.06s; }
html.fx .fx-stagger.fx-in > *:nth-child(2) { transition-delay: 0.14s; }
html.fx .fx-stagger.fx-in > *:nth-child(3) { transition-delay: 0.22s; }
html.fx .fx-stagger.fx-in > *:nth-child(4) { transition-delay: 0.30s; }
html.fx .fx-stagger.fx-in > *:nth-child(5) { transition-delay: 0.38s; }
html.fx .fx-stagger.fx-in > *:nth-child(6) { transition-delay: 0.46s; }
html.fx .fx-stagger.fx-in > *:nth-child(7) { transition-delay: 0.54s; }
html.fx .fx-stagger.fx-in > *:nth-child(8) { transition-delay: 0.62s; }
/* Un conteneur stagger ne doit pas lui-même glisser (ses enfants le font) */
html.fx .fade-section.fx-stagger,
html.fx [data-fx].fx-stagger { transform: none; }

/* ── 2. ENTRÉE DU HERO (au chargement, séquence orchestrée) ──────────── */
@keyframes fxRiseIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fxWindowIn {
  from { opacity: 0; transform: translateY(44px) scale(0.975); }
  to   { opacity: 1; transform: none; }
}
/* Entrée par TRANSITIONS déclenchées par html.fx-ready (posé par un setTimeout
   inline ~60ms après le gate) : l'état final est GARANTI même si la timeline
   d'animation est gelée (headless, throttling) — leçon du bug menu vide. */
html.fx:not(.fx-ready) .land-hero .land-eyebrow,
html.fx:not(.fx-ready) .land-hero .hero-logo-mega,
html.fx:not(.fx-ready) .land-hero .land-lede,
html.fx:not(.fx-ready) .land-hero .land-cta,
html.fx:not(.fx-ready) .land-hero .land-meta,
html.fx:not(.fx-ready) .land-hero .hero-filmstrip {
  opacity: 0; transform: translateY(28px);
}
html.fx:not(.fx-ready) .land-hero .hero-window {
  opacity: 0; transform: perspective(1400px) rotateX(10deg) translateY(56px) scale(0.96);
}
html.fx .land-hero .land-eyebrow,
html.fx .land-hero .hero-logo-mega,
html.fx .land-hero .land-lede,
html.fx .land-hero .land-cta,
html.fx .land-hero .land-meta,
html.fx .land-hero .hero-window,
html.fx .land-hero .hero-filmstrip {
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.65, 0.25, 1),
    transform 0.9s cubic-bezier(0.22, 0.65, 0.25, 1);
}
html.fx .land-hero .land-eyebrow   { transition-delay: 0.05s; }
html.fx .land-hero .hero-logo-mega { transition-delay: 0.16s; }
html.fx .land-hero .land-lede      { transition-delay: 0.30s; }
html.fx .land-hero .land-cta       { transition-delay: 0.44s; }
html.fx .land-hero .land-meta      { transition-delay: 0.54s; }
html.fx .land-hero .hero-window    { transition-delay: 0.55s; }
html.fx .land-hero .hero-filmstrip { transition-delay: 0.85s; }
/* Le hero ne passe pas par l'observer (il est above the fold) */
html.fx .land-hero .land-hero-inner.fade-section { opacity: 1; transform: none; transition: none; }

/* Soulignement de l'em du H1 : trait qui se dessine comme au crayon */
.land-h1 em { position: relative; white-space: nowrap; }
.land-h1 em::after {
  content: "";
  position: absolute;
  left: 0.02em; right: 0.05em; bottom: -0.06em;
  height: 0.06em;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(1);
  transform-origin: left center;
  opacity: 0.85;
}
html.fx .land-h1 em::after {
  animation: fxDrawRule 0.9s cubic-bezier(0.6, 0, 0.2, 1) 1.05s both;
}
@keyframes fxDrawRule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── 3. FOND TECHNIQUE DU HERO : grille CAD + circuit animé + grain ──── */
.fx-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Grille millimétrée discrète, fondue vers le bas */
.fx-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(127, 138, 152, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127, 138, 152, 0.07) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 90% 72% at 50% 18%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 72% at 50% 18%, #000 35%, transparent 78%);
}
[data-theme="light"] .fx-hero-bg::before {
  background-image:
    linear-gradient(rgba(20, 18, 12, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 18, 12, 0.06) 1px, transparent 1px);
}
/* Halo rouge très sourd derrière le titre */
.fx-hero-bg::after {
  content: "";
  position: absolute;
  left: 50%; top: -28%;
  width: 1100px; height: 720px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(220, 38, 38, 0.07) 0%,
    rgba(220, 38, 38, 0.025) 42%,
    transparent 70%);
}
[data-theme="light"] .fx-hero-bg::after { opacity: 0.6; }

/* Schéma SVG : traces qui se dessinent + impulsions de courant */
.fx-circuit {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 620px; /* bande haute du hero seulement — jamais sur la fenêtre produit */
}
.fx-circuit svg { width: 100%; height: 100%; display: block; }
.fx-circuit .tr {
  fill: none;
  stroke: rgba(127, 138, 152, 0.20);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
[data-theme="light"] .fx-circuit .tr { stroke: rgba(20, 18, 12, 0.13); }
.fx-circuit .nd {
  fill: rgba(127, 138, 152, 0.30);
  stroke: none;
}
[data-theme="light"] .fx-circuit .nd { fill: rgba(20, 18, 12, 0.20); }
/* Traces qui se dessinent au chargement */
html.fx .fx-circuit .tr {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: fxTrace 2.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}
@keyframes fxTrace { to { stroke-dashoffset: 0; } }
/* Impulsion de courant : petit segment rouge qui parcourt la trace en boucle */
.fx-circuit .cu {
  fill: none;
  stroke: var(--accent, #DC2626);
  stroke-width: 1.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}
html.fx .fx-circuit .cu {
  opacity: 0.85;
  stroke-dasharray: 26 1174;
  stroke-dashoffset: 1200;
  animation: fxCurrent 7s linear 2.6s infinite;
}
html.fx .fx-circuit .cu.cu2 { animation-delay: 4.4s; animation-duration: 8.5s; }
html.fx .fx-circuit .cu.cu3 { animation-delay: 3.4s; animation-duration: 9.5s; }
@keyframes fxCurrent { to { stroke-dashoffset: 0; } }
/* Nœuds de jonction qui pulsent doucement */
html.fx .fx-circuit .nd-hot {
  fill: var(--accent, #DC2626);
  animation: fxNode 3.2s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes fxNode {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.95; }
}

/* Grain photographique très léger sur le hero (atmosphère, pas de banding) */
.fx-grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] .fx-grain { opacity: 0.035; }

/* ── 4. SÉPARATEURS « COTATION CAD » entre sections ──────────────────── */
.land-divider {
  display: block !important;
  position: relative;
  max-width: 1180px;
  height: 1px;
  margin: 0 auto;
  background: var(--rule);
}
.land-divider::before,
.land-divider::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 1px; height: 11px;
  background: var(--border-strong, rgba(127, 138, 152, 0.5));
}
.land-divider::before { left: 0; }
.land-divider::after { right: 0; }
@media (max-width: 1240px) { .land-divider { margin-left: 24px; margin-right: 24px; } }

/* ── 5. CARTES : élévation + coins de sélection CAD au survol ────────── */
.fx-card {
  position: relative;
  transition:
    transform 0.4s cubic-bezier(0.22, 0.65, 0.25, 1),
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}
.fx-card::before,
.fx-card::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 0 solid var(--border-strong, rgba(127, 138, 152, 0.5));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.fx-card::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.fx-card::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
@media (hover: hover) {
  .fx-card:hover {
    transform: translateY(-5px);
    border-color: var(--border-hover, rgba(127, 138, 152, 0.4));
    box-shadow:
      0 18px 44px rgba(5, 5, 6, 0.40),
      0 2px 8px rgba(5, 5, 6, 0.18);
  }
  [data-theme="light"] .fx-card:hover {
    box-shadow:
      0 18px 44px rgba(20, 18, 12, 0.14),
      0 2px 8px rgba(20, 18, 12, 0.08);
  }
  .fx-card:hover::before,
  .fx-card:hover::after { opacity: 0.9; }
}

/* (barre de progression retirée 2026-06-10) */

/* ── 7. BOUTONS : balayage lumineux au survol du CTA primaire ────────── */
html.fx .btn-primary {
  position: relative;
  overflow: hidden;
}
html.fx .btn-primary::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
@media (hover: hover) {
  html.fx .btn-primary:hover::after { left: 130%; }
}

/* ── 8. COMPTEURS — chiffres en tabular pour éviter le tremblement ───── */
.metric-val, .land-roi-num { font-variant-numeric: tabular-nums; }
html.fx .metric-val[data-count] { min-width: 2ch; display: inline-block; }

/* ── 9. PAGES SEO (shell) : révélation douce du contenu ──────────────── */
html.fx #app [data-fx] {
  transform: translateY(16px);
  transition-duration: 0.55s;
}

/* Mobile : le circuit et le grain sortent (lisibilité + batterie) */
@media (max-width: 767px) {
  .fx-circuit, .fx-grain { display: none; }
}

/* ── 10. SÉCURITÉ : impression et motion réduit = tout visible ───────── */
@media print {
  html.fx .fade-section, html.fx [data-fx], html.fx .fx-stagger > * {
    opacity: 1 !important; transform: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.fx .fade-section, html.fx [data-fx], html.fx .fx-stagger > *,
  html.fx .land-hero .land-eyebrow, html.fx .land-hero .land-h1,
  html.fx .land-hero .land-lede, html.fx .land-hero .land-cta,
  html.fx .land-hero .land-meta, html.fx .land-hero .hero-window,
  html.fx .land-hero .hero-filmstrip {
    opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important;
  }
  html.fx .fx-circuit .tr { animation: none !important; stroke-dashoffset: 0 !important; }
  html.fx .fx-circuit .cu, html.fx .fx-circuit .nd-hot { animation: none !important; }
  html.fx .fx-circuit .cu { opacity: 0 !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   DISPLAY-2026 — refonte typographique & composition
   Grotesk suisse expansée (Archivo variable), ZÉRO italique dans les titres,
   hero asymétrique, fenêtre 3D + chips, bento modules, métriques géantes.
   ════════════════════════════════════════════════════════════════════════ */

/* ── A. MORT DE L'ITALIQUE (tous les titres, tout le site) ───────────── */
h1 em, h2 em, h3 em,
.land-h1 em, .sec-title em, .land-cta-fin h2 em {
  font-family: 'Archivo', 'Inter', sans-serif !important;
  font-style: normal !important;
  font-weight: 880;
  font-stretch: 120%;
  letter-spacing: -0.018em;
  color: var(--accent);
}
[data-theme="light"] h1 em, [data-theme="light"] h2 em, [data-theme="light"] h3 em {
  color: var(--accent-deep, #991B1B);
}
/* Le soulignement « crayon » du H1 disparaît (le rouge gras suffit) */
.land-h1 em::after { display: none !important; }
.land-h1 em { white-space: normal; }

/* ── B. ÉCHELLE DISPLAY ──────────────────────────────────────────────── */
.land-h1 {
  font-family: 'Archivo', 'Inter', sans-serif !important;
  font-stretch: 112%;
  font-weight: 830;
  font-size: clamp(3rem, 6.4vw, 5.6rem) !important;
  line-height: 0.97 !important;
  letter-spacing: -0.03em !important;
  text-wrap: balance;
}
.sec-title {
  font-family: 'Archivo', 'Inter', sans-serif !important;
  font-stretch: 110%;
  font-weight: 800;
  font-size: clamp(2.1rem, 3.9vw, 3.2rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.024em !important;
  text-wrap: balance;
}
.land-cta-fin h2 {
  font-family: 'Archivo', 'Inter', sans-serif !important;
  font-stretch: 112%;
  font-weight: 830;
  font-size: clamp(2.4rem, 4.6vw, 3.8rem) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.026em !important;
}

/* ── C. HERO : wordmark ElectroCAD géant centré (choix du propriétaire) ─ */
.land-hero .hero-logo-mega {
  font-size: clamp(56px, 9.5vw, 132px);
}

/* ── D. FENÊTRE PRODUIT : entrée 3D + chips flottants ────────────────── */
.fx-window-wrap {
  position: relative;
  max-width: 1080px;
  margin: 56px auto 0;
}
.fx-window-wrap .hero-window { margin: 0 auto; }
/* (entrée 3D de la fenêtre : transitions §2, état initial rotateX(10deg)) */
.fx-chip {
  position: absolute;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  background: color-mix(in srgb, var(--surface-raised, #17171A) 78%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 10px 30px rgba(5, 5, 6, 0.35);
}
[data-theme="light"] .fx-chip {
  background: color-mix(in srgb, #FFFEF8 82%, transparent);
  box-shadow: 0 10px 30px rgba(20, 18, 12, 0.12);
}
.fx-chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.fx-chip-1 { top: -16px; right: -36px; }
.fx-chip-2 { bottom: 110px; left: -52px; }
.fx-chip-3 { bottom: -14px; right: 64px; }
/* Entrée des chips par transition (robuste), flottement par animation ensuite */
html.fx:not(.fx-ready) .fx-chip { opacity: 0; transform: translateY(18px); }
html.fx .fx-chip {
  transition: opacity 0.7s cubic-bezier(0.22, 0.65, 0.25, 1), transform 0.7s cubic-bezier(0.22, 0.65, 0.25, 1);
}
html.fx .fx-chip-1 { transition-delay: 1.15s; }
html.fx .fx-chip-2 { transition-delay: 1.35s; }
html.fx .fx-chip-3 { transition-delay: 1.55s; }
html.fx.fx-ready .fx-chip { animation: fxFloat 7s ease-in-out infinite; }
html.fx.fx-ready .fx-chip-1 { animation-delay: 3.6s; }
html.fx.fx-ready .fx-chip-2 { animation-delay: 4.4s; }
html.fx.fx-ready .fx-chip-3 { animation-delay: 5.1s; }
@keyframes fxFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@media (max-width: 1180px) { .fx-chip { display: none; } }

/* ── E. MÉTRIQUES GÉANTES ────────────────────────────────────────────── */
.metric-val {
  font-family: 'Archivo', 'Inter', sans-serif !important;
  font-stretch: 122%;
  font-weight: 880 !important;
  font-size: clamp(2.7rem, 4.8vw, 4.2rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}
.land-roi-num {
  font-family: 'Archivo', 'Inter', sans-serif !important;
  font-stretch: 122%;
  font-weight: 880 !important;
  letter-spacing: -0.02em !important;
}

/* ── F. MODULES EN BENTO (desktop) ───────────────────────────────────── */
@media (min-width: 961px) {
  .mod-grid { grid-template-columns: 1fr 1fr !important; }
  .mod-grid > .mod:first-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(300px, 0.85fr) 1.35fr;
    column-gap: 56px;
    border-bottom: 1px solid var(--rule);
  }
  .mod-grid > .mod:first-child > * { grid-column: 1; }
  .mod-grid > .mod:first-child > .mod-list {
    grid-column: 2;
    grid-row: 1 / span 8;
    align-self: center;
    columns: 2;
    column-gap: 40px;
  }
  .mod-grid > .mod:first-child > .mod-list li { break-inside: avoid; }
  .mod-grid > .mod:nth-child(2) { border-right: 1px solid var(--rule); }
}

/* ── G. NAV VERRE (profondeur au scroll) ─────────────────────────────── */
#nav > div:first-child {
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
}

/* ── H. CTA FINALE : projecteur ──────────────────────────────────────── */
.land-cta-fin { position: relative; overflow: hidden; }
.land-cta-fin::before {
  content: "";
  position: absolute;
  left: 50%; top: -40%;
  width: 900px; height: 600px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(220, 38, 38, 0.10) 0%,
    rgba(220, 38, 38, 0.03) 45%,
    transparent 70%);
  pointer-events: none;
}
.land-cta-fin > * { position: relative; }