/* =========================================================================
   ALGO INDICATEUR — Couche « mouvement » (additive : se charge APRÈS algo.css)
   Aucune règle existante n'est modifiée : tout est opt-in par classes
   .am-* ou par ajout de décor sur les composants existants.
   Légère (CSS + un petit JS), coupée avec « réduire les animations ».
     1. Barre de progression de lecture
     2. Fond héros (image + Ken Burns + halo qui suit la souris)
     3. Téléphone du héros + pastilles flottantes
     4. Bandeau de marchés défilant
     5. Cartes : halo suivant le curseur, icônes vivantes
     6. Boutons : reflet lumineux
     7. Titres de section : soulignement animé
     8. Visuels (images Higgsfield) : flottement + halo
     9. CTA final avec fond image
    10. Apparition échelonnée
   ========================================================================= */


/* 0 ---------------------------------------------------------------- grands écrans : moins de vide sur les côtés */
@media (min-width: 1500px) { .algo-container { max-width: 1360px; } }
@media (min-width: 1800px) { .algo-container { max-width: 1560px; } }
/* ambiance de bords (statique, aucun coût) : grille néon + lueurs, visibles seulement sur les côtés */
body.algo::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(36vw 60vh at 0% 22%, rgba(59,141,255,.20), transparent 70%),
    radial-gradient(34vw 58vh at 100% 78%, rgba(52,211,153,.16), transparent 70%),
    radial-gradient(30vw 50vh at 100% 12%, rgba(41,224,255,.12), transparent 70%),
    linear-gradient(rgba(90,150,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,150,255,.10) 1px, transparent 1px);
  background-size: auto, auto, auto, 56px 56px, 56px 56px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.15) 22%, rgba(0,0,0,.15) 78%, #000 100%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.15) 22%, rgba(0,0,0,.15) 78%, #000 100%);
}
[data-theme="light"] body.algo::after {
  background-image:
    radial-gradient(36vw 60vh at 0% 22%, rgba(80,120,255,.16), transparent 70%),
    radial-gradient(34vw 58vh at 100% 78%, rgba(20,190,150,.14), transparent 70%),
    radial-gradient(30vw 50vh at 100% 12%, rgba(41,182,246,.12), transparent 70%),
    linear-gradient(rgba(43,59,224,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,59,224,.08) 1px, transparent 1px);
}
@media (max-width: 900px) { body.algo::after { display: none; } }

/* 1 ---------------------------------------------------------------- progression */
.am-progress {
  position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: 300;
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
  background: linear-gradient(90deg, #3B8DFF, #29B6F6, #34D399);
  box-shadow: 0 0 12px rgba(59,141,255,.6);
}
[dir="rtl"] .am-progress { transform-origin: 100% 50%; }

/* 2 ---------------------------------------------------------------- décor futuriste pleine largeur */
.am-stage { position: relative; isolation: isolate; overflow: clip; }
.am-scene {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  --am-c1: #3B8DFF; --am-c2: #29E0FF; --am-c3: #34D399; --am-node: 150,200,255; --am-grid: rgba(80,150,255,.22);
  background:
    radial-gradient(90% 70% at 78% 30%, rgba(40,90,220,.30), transparent 62%),
    radial-gradient(70% 60% at 12% 85%, rgba(20,160,140,.20), transparent 60%),
    linear-gradient(180deg, #050914 0%, #070d1c 55%, #060a14 100%);
}
[data-theme="light"] .am-scene {
  --am-c1: #2B3BE0; --am-c2: #0B7FC4; --am-c3: #0A9A62; --am-node: 43,59,224; --am-grid: rgba(43,59,224,.16);
  background:
    radial-gradient(90% 70% at 78% 30%, rgba(80,120,255,.22), transparent 62%),
    radial-gradient(70% 60% at 12% 85%, rgba(20,190,150,.16), transparent 60%),
    linear-gradient(180deg, #F4F7FF 0%, #EEF4FF 55%, #F2F9F6 100%);
}
.am-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* voile côté texte pour la lisibilité */
.am-scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--algo-bg) 94%, transparent) 0%, color-mix(in srgb, var(--algo-bg) 84%, transparent) 26%, transparent 40%);
}
[dir="rtl"] .am-scene::after { transform: scaleX(-1); }
.algo-section-head.center ~ * .am-scene::after, .am-stage:has(.algo-hero > .algo-section-head.center) .am-scene::after {
  background: radial-gradient(60% 80% at 50% 45%, color-mix(in srgb, var(--algo-bg) 78%, transparent), transparent 75%); transform: none;
}
/* téléphone / petite largeur : le graphique reste en fond, discret, pour que le texte se lise */
@media (max-width: 900px) {
  .am-canvas { opacity: .38; }
  .am-scene::after { background: linear-gradient(180deg, color-mix(in srgb, var(--algo-bg) 70%, transparent) 0%, color-mix(in srgb, var(--algo-bg) 45%, transparent) 100%); transform: none; }
}
/* aurore */
.am-aurora i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; mix-blend-mode: screen; will-change: transform; }
.am-aurora i:nth-child(1) { width: 46vw; height: 46vw; inset-inline-end: -8vw; inset-block-start: -14vw; background: radial-gradient(closest-side, rgba(59,141,255,.55), transparent); animation: am-drift-a 22s ease-in-out infinite alternate; }
.am-aurora i:nth-child(2) { width: 38vw; height: 38vw; inset-inline-start: -10vw; inset-block-end: -12vw; background: radial-gradient(closest-side, rgba(52,211,153,.42), transparent); animation: am-drift-b 26s ease-in-out infinite alternate; }
.am-aurora i:nth-child(3) { width: 30vw; height: 30vw; inset-inline-start: 38vw; inset-block-start: 18%; background: radial-gradient(closest-side, rgba(41,224,255,.30), transparent); animation: am-drift-c 30s ease-in-out infinite alternate; }
[data-theme="light"] .am-aurora i { mix-blend-mode: normal; opacity: .32; }
@keyframes am-drift-a { to { transform: translate3d(-6vw, 5vw, 0) scale(1.15); } }
@keyframes am-drift-b { to { transform: translate3d(7vw, -4vw, 0) scale(1.1); } }
@keyframes am-drift-c { to { transform: translate3d(-5vw, 6vw, 0) scale(.9); } }
/* grille néon en perspective (sol) */
.am-grid {
  position: absolute; inset-inline: -40%; inset-block-end: -6%; height: 48%;
  background-image: linear-gradient(var(--am-grid) 1px, transparent 1px), linear-gradient(90deg, var(--am-grid) 1px, transparent 1px);
  background-size: 64px 64px; transform: perspective(560px) rotateX(64deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%); mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
  animation: am-grid 6s linear infinite; opacity: .9;
}
@keyframes am-grid { to { background-position: 0 64px, 0 0; } }
.am-glow { /* halo qui suit la souris */
  position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--am-c2) 24%, transparent), transparent 70%);
  transform: translate(var(--gx, 60vw), var(--gy, 20vh)) translate(-50%, -50%);
  transition: transform .4s cubic-bezier(.2,.7,.2,1); mix-blend-mode: screen;
}
[data-theme="light"] .am-glow { mix-blend-mode: normal; opacity: .6; }

/* titre du héros : dégradé qui respire */
.am-shimmer {
  background: linear-gradient(100deg, var(--algo-accent) 20%, #29B6F6 45%, #34D399 60%, var(--algo-accent) 85%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: am-shimmer 7s linear infinite;
}
[data-theme="light"] .am-shimmer {
  background-image: linear-gradient(100deg, #2B3BE0 20%, #0B7FC4 45%, #0A9A62 60%, #2B3BE0 85%);
  background-size: 220% 100%;
}
@keyframes am-shimmer { to { background-position: -220% 0; } }
[data-theme="dark"] .algo-hero .algo-section-head h1, [data-theme="dark"] .algo-hero .algo-section-head .lead { text-shadow: 0 0 6px rgba(3,6,14,.9), 0 2px 26px rgba(3,6,14,.95); }

/* 2b --------------------------------------------------------------- en-tête compact des pages d'outils / données */
.algo-main { position: relative; }
.am-pagehead {
  position: absolute; inset-inline: 0; inset-block-start: 0; height: clamp(300px, 32vw, 440px); z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
}
.am-scene--compact { background: none; z-index: auto; opacity: .9; }
.am-scene--compact::after { background: linear-gradient(90deg, color-mix(in srgb, var(--algo-bg) 90%, transparent) 0%, color-mix(in srgb, var(--algo-bg) 70%, transparent) 30%, transparent 55%); }
[dir="rtl"] .am-scene--compact::after { transform: scaleX(-1); }
.am-scene--compact .am-aurora i:nth-child(1) { inset-block-start: -22vw; }
@media (max-width: 900px) { .am-pagehead { height: 260px; opacity: .6; } }

/* 3 ---------------------------------------------------------------- téléphone + pastilles */
.am-phone { position: relative; max-width: 340px; margin-inline: auto; }
.am-phone::before { /* halo derrière le téléphone */
  content: ""; position: absolute; inset: -12% -18%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--algo-accent) 38%, transparent), transparent 72%);
  filter: blur(6px); animation: am-breathe 5s ease-in-out infinite;
}
/* anneaux orbitaux holographiques */
.am-orbit { position: absolute; inset: -9% -22%; z-index: -1; pointer-events: none; }
.am-orbit i { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--am-c2, #29E0FF) 55%, transparent); animation: am-spin 34s linear infinite; }
.am-orbit i:nth-child(2) { inset: 9% 7%; border-style: solid; border-color: color-mix(in srgb, var(--algo-accent) 35%, transparent); animation-duration: 52s; animation-direction: reverse; }
.am-orbit i::after { content: ""; position: absolute; inset-block-start: -4px; inset-inline-start: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--algo-accent); box-shadow: 0 0 14px var(--algo-accent); }
@keyframes am-spin { to { transform: rotate(360deg); } }
@keyframes am-breathe { 0%,100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
.am-chip {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; font-weight: 800; font-size: .82rem; letter-spacing: .04em;
  background: color-mix(in srgb, var(--algo-surface) 82%, transparent);
  border: 1px solid var(--algo-border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--algo-shadow-md); animation: am-float 6s ease-in-out infinite;
}
.am-chip i { font-size: 1rem; }
.am-chip--buy  { color: var(--algo-positive); inset-block-start: 16%; inset-inline-start: -12%; }
.am-chip--sell { color: var(--algo-negative); inset-block-end: 22%; inset-inline-end: -10%; animation-delay: -2.2s; }
.am-chip--ai   { color: var(--algo-accent);   inset-block-end: 6%;  inset-inline-start: -6%;  animation-delay: -4s; }
@keyframes am-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 640px) { .am-chip--buy { inset-inline-start: -2%; } .am-chip--sell { inset-inline-end: -2%; } .am-chip--ai { display: none; } }

/* 4 ---------------------------------------------------------------- bandeau de marchés */
.am-marquee {
  overflow: hidden; border-block: 1px solid var(--algo-border); position: relative;
  background: color-mix(in srgb, var(--algo-surface) 55%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.am-marquee__track { display: flex; width: max-content; animation: am-scroll 38s linear infinite; }
.am-marquee:hover .am-marquee__track { animation-play-state: paused; }
.am-marquee__item {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; white-space: nowrap;
  font-family: var(--algo-font-display); font-weight: 600; font-size: .95rem; color: var(--algo-ink);
}
.am-marquee__item small { color: var(--algo-muted); font-weight: 500; }
.am-up   { color: var(--algo-positive); }
.am-down { color: var(--algo-negative); }
@keyframes am-scroll { to { transform: translateX(-50%); } }
[dir="rtl"] .am-marquee__track { animation-name: am-scroll-rtl; }
@keyframes am-scroll-rtl { to { transform: translateX(50%); } }

/* 5 ---------------------------------------------------------------- cartes */
.algo-card { position: relative; }
.algo-card.am-spot::before { /* halo qui suit le curseur */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--algo-accent) 20%, transparent), transparent 60%);
  transition: opacity .3s ease;
}
.algo-card.am-spot:hover::before { opacity: 1; }
.algo-card__icon { position: relative; transition: transform .45s cubic-bezier(.2,.9,.25,1.4); }
.algo-card__icon::after { /* anneau qui pulse */
  content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 1.5px solid var(--algo-accent);
  opacity: 0; transform: scale(.9); animation: am-ring 3.6s ease-out infinite;
}
.algo-card:nth-child(3n+2) .algo-card__icon::after { animation-delay: -1.2s; }
.algo-card:nth-child(3n)   .algo-card__icon::after { animation-delay: -2.4s; }
@keyframes am-ring { 0% { opacity: .55; transform: scale(.92); } 70%,100% { opacity: 0; transform: scale(1.35); } }
.algo-card:hover .algo-card__icon { transform: translateY(-3px) rotate(-6deg) scale(1.08); }
.algo-card__icon i { display: inline-block; animation: am-bob 4.5s ease-in-out infinite; }
@keyframes am-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px) scale(1.06); } }

/* 6 ---------------------------------------------------------------- boutons */
.algo .algo-btn:not(.algo-btn--ghost) { position: relative; overflow: hidden; }
.algo .algo-btn:not(.algo-btn--ghost)::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); animation: am-shine 5.5s ease-in-out infinite; pointer-events: none;
}
@keyframes am-shine { 0%, 62% { inset-inline-start: -60%; } 100% { inset-inline-start: 140%; } }

/* 7 ---------------------------------------------------------------- titres */
.algo-section-head h2 { position: relative; }
.algo-section-head.is-in h2::after, .algo-section-head h2.am-line::after {
  content: ""; display: block; width: 64px; height: 3px; border-radius: 3px; margin-top: 14px;
  background: linear-gradient(90deg, var(--algo-accent), #34D399);
  transform-origin: 0 50%; animation: am-grow .9s .2s cubic-bezier(.2,.8,.2,1) both;
}
.algo-section-head.center h2::after { margin-inline: auto; }
@keyframes am-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 8 ---------------------------------------------------------------- visuels Higgsfield */
.am-visual { position: relative; display: block; width: 100%; }
.am-visual img {
  width: 100%; height: auto; display: block; border-radius: 18px; border: 1px solid var(--algo-border);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--algo-accent) 22%, transparent), var(--algo-shadow-md);
  animation: am-float 8s ease-in-out infinite;
}
.am-visual::after { /* scintillement lumineux qui traverse l'image */
  content: ""; position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%);
  background-size: 250% 100%; animation: am-sweep 6.5s ease-in-out infinite;
}
@keyframes am-sweep { 0% { background-position: 130% 0; } 60%,100% { background-position: -130% 0; } }
.am-card-media { padding: 0 !important; background: transparent !important; }
.am-card-media .am-visual img { border-radius: 0; border: 0; box-shadow: none; animation: none; height: 100%; object-fit: cover; }

/* cartes « Signaux » avec visuel en tête */
.am-topimg { margin: -24px -24px 18px; border-radius: var(--algo-radius-card) var(--algo-radius-card) 0 0; overflow: hidden; position: relative; }
.am-topimg img { width: 100%; height: 170px; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.algo-card:hover .am-topimg img { transform: scale(1.07); }
.am-topimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, var(--algo-surface)); }

/* 9 ---------------------------------------------------------------- CTA final */
.am-cta { position: relative; overflow: hidden; isolation: isolate; }
.am-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--am-cta-img) center / cover no-repeat; opacity: .5; animation: am-kenburns 30s ease-in-out infinite alternate;
}
.am-cta::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 90% at 50% 50%, color-mix(in srgb, var(--algo-surface) 55%, transparent), color-mix(in srgb, var(--algo-surface) 88%, transparent)); }

[data-theme="light"] .am-cta::before { opacity: .9; filter: saturate(.9) brightness(1.25); }
[data-theme="light"] .am-cta::after { background: radial-gradient(70% 90% at 50% 50%, color-mix(in srgb, var(--algo-surface) 82%, transparent), color-mix(in srgb, var(--algo-surface) 45%, transparent)); }

/* 10 --------------------------------------------------------------- apparition échelonnée */
html.algo-anim .algo-grid > .algo-reveal:nth-child(2) { transition-delay: .08s; }
html.algo-anim .algo-grid > .algo-reveal:nth-child(3) { transition-delay: .16s; }
html.algo-anim .algo-grid > .algo-reveal:nth-child(4) { transition-delay: .24s; }
html.algo-anim .algo-grid > .algo-reveal:nth-child(5) { transition-delay: .32s; }
html.algo-anim .algo-grid > .algo-reveal:nth-child(6) { transition-delay: .40s; }

/* ------------------------------------------------------------------ réduire les animations */
@media (prefers-reduced-motion: reduce) {
  .am-aurora i, .am-grid, .am-orbit i, .am-shimmer, .am-phone::before, .am-chip, .am-marquee__track, .algo-card__icon::after,
  .algo-card__icon i, .algo .algo-btn::after, .am-visual img, .am-visual::after, .am-cta::before,
  .algo-section-head h2::after { animation: none !important; }
  .am-shimmer { -webkit-text-fill-color: currentColor; color: var(--algo-accent); background: none; }
  .am-glow, .am-progress { display: none; }
  .am-grid { animation: none !important; }
}