/* ================================================================
   ERdigIA — Animations "vivantes"
   Cahier des charges animations du 17/09/2026.
   Toutes les animations continues (néon, rotation 3D, flottement,
   pulsation, parallaxe) sont désactivées sous prefers-reduced-motion
   — voir le bloc dédié en toute fin de fichier.
   ================================================================ */

/* ────────────────────────────────────────────────────────────────
   1. NÉON ORANGE QUI LONGE LES BORDS DE L'ÉCRAN (toutes les pages)
   ──────────────────────────────────────────────────────────────── */
.er-neon-border {
  position: fixed;
  inset: 0;
  pointer-events: none; /* ne bloque jamais un clic */
  z-index: 999999;
}
.er-neon-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px; /* épaisseur du trait */
  border-radius: inherit;
  background: conic-gradient(
    from var(--er-neon-angle, 0deg),
    transparent 0%,
    #f79d1e 8%,
    #ff410d 12%,
    transparent 20%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: er-neon-rotate 12s linear infinite;
  filter: drop-shadow(0 0 6px rgba(247,157,30,.55));
}
@property --er-neon-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes er-neon-rotate { to { --er-neon-angle: 360deg; } }
/* Navigateurs sans @property (le trait reste alors fixe, non animé —
   dégradation propre, aucune erreur, aucun script requis) */

/* ────────────────────────────────────────────────────────────────
   2. HERO 3D — conteneur canvas + image de repli
   ──────────────────────────────────────────────────────────────── */
.er-hero-3d-wrap { position: absolute; inset: 0; }
#er-hero-3d-canvas,
.er-hero-3d-fallback {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
#er-hero-3d-canvas {
  opacity: 0;
  transition: opacity .7s ease;
}
#er-hero-3d-canvas.er-3d-ready { opacity: 1; }
.er-hero-3d-fallback {
  opacity: .55; /* discrète tant que la 3D n'a pas pris le relais */
  transition: opacity .7s ease;
  background: linear-gradient(135deg, rgba(10,110,234,.15), rgba(0,212,255,.06));
}
.er-hero-3d-fallback.er-3d-hide { opacity: 0; }

/* Badges "PERFORMANCE 100%" / "LIVRAISON" — entrée 3D en bascule */
.er-hero-stat-badge {
  position: absolute;
  background: rgba(11,20,32,.96);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  opacity: 0;
  transform: perspective(600px) rotateY(90deg) translateZ(-40px);
  transition: opacity .8s ease, transform .8s ease;
}
.er-hero-stat-badge.er-badge-visible {
  opacity: 1;
  transform: perspective(600px) rotateY(0) translateZ(0);
}
.er-hero-stat--perf {
  top: 70px; right: -20px;
  border: 1px solid rgba(0,212,255,.35);
  padding: 14px 20px;
}
.er-hero-stat--livraison {
  bottom: 60px; left: -20px;
  border: 1px solid rgba(0,212,255,.25);
  padding: 12px 18px;
  display: flex; align-items: center; gap: 12px;
}

/* Flottement doux et continu des 3 stats du hero (compteur conservé) */
@keyframes er-hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.er-hero-stats .er-hero-stat { animation: er-hero-float 4s ease-in-out infinite; }
.er-hero-stats .er-hero-stat:nth-child(2) { animation-delay: .5s; }
.er-hero-stats .er-hero-stat:nth-child(3) { animation-delay: 1s; }

/* ────────────────────────────────────────────────────────────────
   3. ÉTAPES DU PROCESSUS — reveal 3D au scroll, une par une
   ──────────────────────────────────────────────────────────────── */
.er-process-step[data-erdigia-animate] {
  opacity: 0;
  transform: perspective(800px) rotateX(35deg) translateY(40px) scale(.92);
  transition: opacity .7s var(--ease, ease), transform .7s var(--ease, ease);
}
.er-process-step[data-erdigia-animate].visible,
.er-process-step[data-erdigia-animate].er-visible {
  opacity: 1;
  transform: perspective(800px) rotateX(0) translateY(0) scale(1);
}
/* Le mot "ÉTAPE" en relief 3D, dans le cyan/bleu déjà utilisé pour cette section */
.er-process-step .step-label {
  text-shadow:
    0 1px 0 #0a6eea,
    0 2px 0 #085bc4,
    0 3px 6px rgba(0,212,255,.5);
}

/* ────────────────────────────────────────────────────────────────
   4. MICRO-ANIMATIONS GÉNÉRALES
   ──────────────────────────────────────────────────────────────── */

/* Pulsation douce sur les icônes (cartes prestations + "Pourquoi ERdigIA") */
@keyframes er-icon-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
.er-icon-pulse { animation: er-icon-pulse 3.2s ease-in-out infinite; }

/* Halo lumineux progressif au survol — cartes prestations + "Pourquoi ERdigIA" */
.er-svc-card, .er-why-card { position: relative; }
.er-svc-card::after, .er-why-card::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, rgba(0,212,255,.18), transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.er-svc-card:hover::after, .er-why-card:hover::after { opacity: 1; }
.er-why-card:hover {
  border-color: rgba(0,212,255,.35) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.35), 0 0 24px rgba(0,212,255,.12);
}

/* Parallaxe léger sur les halos de fond (voir initParallax() dans erdigia-main.js) */
[data-parallax] { will-change: transform; }

/* ────────────────────────────────────────────────────────────────
   5. CURSEUR PERSONNALISÉ — rond orange néon (desktop uniquement)
   Piloté par js/erdigia-main.js (initCursor()). N'est injecté/activé
   que sous (hover:hover) and (pointer:fine) — jamais sur tactile.
   ──────────────────────────────────────────────────────────────── */
.er-cursor {
  /* Repositionné en JS via transform:translate3d(x,y,0) à chaque mousemove
     (voir initCursor() dans erdigia-main.js) — jamais via top/left, qui
     forcerait un recalcul de mise en page à chaque frame. Seule la
     transition width/height reste animée : la position, elle, ne l'est
     jamais, pour ne réintroduire aucun retard. */
  position: fixed;
  top: 0; left: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle, #f79d1e 0%, #ff410d 100%);
  box-shadow: 0 0 10px 3px rgba(247,157,30,.7), 0 0 18px 6px rgba(255,65,13,.3);
  pointer-events: none;
  z-index: 999998; /* sous le néon de bord (999999), au-dessus de tout le reste */
  will-change: transform;
  transform: translate3d(-50%, -50%, 0);
  transition: width .15s ease-out, height .15s ease-out;
  opacity: 0; /* affiché uniquement une fois la première position connue */
}
.er-cursor.er-cursor-active { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  body.er-custom-cursor,
  body.er-custom-cursor a,
  body.er-custom-cursor button,
  body.er-custom-cursor [role="button"],
  body.er-custom-cursor .sim-opt,
  body.er-custom-cursor input,
  body.er-custom-cursor select,
  body.er-custom-cursor textarea { cursor: none; }
}

/* ────────────────────────────────────────────────────────────────
   6. BRAINSTORM TRON v2 — rééquilibrage orange (validé Emerick)
   Règle : le cyan reste la couleur du décor, l'orange devient la
   couleur de l'action (tout ce qu'on déclenche ou qui pousse à agir).
   ──────────────────────────────────────────────────────────────── */

/* 6.1 — Séparateurs de section en ligne de circuit */
.er-circuit-divider {
  position: relative;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00d4ff 20%, #00d4ff 80%, transparent);
  margin: 0;
  overflow: visible;
}
.er-circuit-divider::after {
  content: "";
  position: absolute;
  top: 50%; left: -6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle, #f79d1e 0%, #ff410d 100%);
  box-shadow: 0 0 10px 3px rgba(247,157,30,.7);
  transform: translateY(-50%);
  animation: er-circuit-pulse 6s linear infinite;
}
@keyframes er-circuit-pulse {
  0%   { left: -6px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: calc(100% - 6px); opacity: 0; }
}

/* 6.2 — FAQ : le disque d'identité orange lui-même vit dans functions.php
   (erdigia_faq_section) — rien à dupliquer ici. */

/* 6.3 — Footer : ligne de circuit + halo orange au survol */
.er-footer-top-line {
  height: 2px;
  background: linear-gradient(90deg, #00d4ff, #f79d1e);
}
.er-footer a:hover,
.er-footer .er-social-link:hover {
  color: #f79d1e !important;
  filter: drop-shadow(0 0 6px rgba(247,157,30,.6));
}
.er-footer .er-social-link:hover svg { stroke: #f79d1e !important; }

/* 6.4 — Cartes "fonctionnalité incluse" : bordure cyan + halo orange au survol
   (même traitement que le haut des cartes de tarifs) */
.er-feature-card { border-top: 2px solid #00d4ff; transition: box-shadow .3s ease, border-color .3s ease; }
.er-feature-card:hover { box-shadow: 0 8px 30px rgba(247,157,30,.35); }

/* 6.5 — Champs de formulaire : fine bordure cyan permanente, même au repos.
   !important nécessaire : de nombreux champs ont déjà une bordure inline
   légèrement différente (.1-.15 d'opacité) qu'on veut homogénéiser partout
   sans reprendre un par un chaque fichier de simulateur. Le halo au focus,
   géré par chaque champ individuellement, n'est pas affecté. */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
textarea, select {
  border: 1px solid rgba(0,212,255,.25) !important;
}

/* 6.6 — Bouton "Retour" du simulateur : aucun changement, reste en cyan.
   Décision assumée : l'orange reste réservé à l'action principale
   ("Suivant"), pour ne pas brouiller la hiérarchie des deux boutons. */

/* 6.7 — Transition entre étapes du simulateur : balayage orange
   Déclenché par window.erStepSweep() (js/erdigia-main.js), remplace
   l'ancien flash noir au changement d'étape. */
.er-step-transition {
  position: fixed;
  inset: 0;
  background: linear-gradient(90deg, transparent, #f79d1e, #ff410d, transparent);
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  z-index: 999997;
}
.er-step-transition.active { animation: er-sweep .5s ease-in-out; }
@keyframes er-sweep {
  0%   { transform: translateX(-100%); opacity: 0; }
  50%  { opacity: .85; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* 6.8 — Barre de progression du simulateur : pointe lumineuse cyan.
   Reste en cyan (indicateur d'état, pas une action). */
.er-progress-fill { position: relative; }
.er-progress-fill::after {
  content: "";
  position: absolute;
  top: 50%; right: -4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #00d4ff;
  box-shadow: 0 0 8px 3px rgba(0,212,255,.7);
  transform: translateY(-50%);
}

/* 6.9 — Nos Réalisations : nœuds lumineux cyan/orange dans la grille de fond */
@keyframes er-node-pulse {
  0%, 100% { opacity: .25; }
  50%      { opacity: .8; }
}
.er-grid-node {
  position: absolute;
  border-radius: 50%;
  animation: er-node-pulse 3s ease-in-out infinite;
  pointer-events: none;
}

/* 6.10 — Statistiques du hero : flash orange bref quand le compteur se stabilise
   (classe ajoutée une fois par js/erdigia-main.js → initCounters()) */
@keyframes er-stat-lock {
  0%   { color: #00d4ff; text-shadow: none; }
  50%  { color: #f79d1e; text-shadow: 0 0 12px rgba(247,157,30,.8); }
  100% { color: #00d4ff; text-shadow: none; }
}
.er-hero-stat-num.er-locked { animation: er-stat-lock .6s ease-out; }

/* 6.11 — Badge "recommandé", même style que le badge ★ Populaire des
   cartes de tarifs, réutilisable sur une réalisation phare ou un article
   de blog à la une. */
.er-badge-recommended {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, #f79d1e, #ff410d);
  color: #05070d;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ────────────────────────────────────────────────────────────────
   ACCESSIBILITÉ — prefers-reduced-motion : on coupe tout mouvement
   continu, on garde un affichage instantané et lisible.
   ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .er-neon-border::before { animation: none !important; }
  .er-hero-stats .er-hero-stat { animation: none !important; }
  .er-icon-pulse { animation: none !important; }
  .er-process-step[data-erdigia-animate] {
    transition: opacity .3s ease !important;
    transform: none !important;
  }
  .er-hero-stat-badge {
    transition: opacity .3s ease !important;
    transform: none !important;
  }
  #er-hero-3d-canvas { display: none !important; }
  .er-hero-3d-fallback { opacity: 1 !important; }
}