/* ============================================================
   index3.css — Landing v3 (plan d'ouvrage, lecture d'instrument)
   Skills : impeccable, taste-skill, emil-design-eng, landing-page,
            motion-design, three-3d, ui-animate, ui-effects,
            css-3d, svg-animate, responsive
   Brand reference : navy de cartographie marine sur encre noire tintée,
                     accents en bleu-lumiere comme une LED d'appareil
                     de precision. Anti Linear/Stripe, anti editorial Klim.
   Color strategy  : Committed - le navy porte la masse, le lume est rare.
   ============================================================ */

.idx3 {
  /* Navy logo - couleur narrative principale */
  --navy-deep:  #152732;
  --navy:       #2D5F8C;
  --navy-soft:  rgba(45, 95, 140, .14);

  /* Bleu lumiere - accent rare (ex-or) */
  --lume-1:     #5891C7;
  --lume-2:     #2D5F8C;
  --lume-3:     #82AFD9;
  --lume-glow:  rgba(88, 145, 199, .22);

  /* Noirs tintes navy (chroma ~0.005 vers hue 220) */
  --noir-0: #06080A;
  --noir-1: #0C1014;
  --noir-2: #141A20;
  --noir-3: #1C242C;

  /* Encres - froides, pas neutres */
  --ink-1: #E8ECEF;
  --ink-2: #94A3B0;
  --ink-3: #7B8792; /* contraste AA : ~5.2:1 sur fond noir (etait #5B6975, 3.4:1) */

  --line: rgba(255,255,255,.06);
  --line-bright: rgba(88,145,199,.22);

  --radius: 4px;
  --radius-lg: 20px;

  /* Easings Emil - punchy, custom, jamais ease CSS plat */
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-out:  cubic-bezier(.23, 1, .32, 1);
  --ease-io:   cubic-bezier(.77, 0, .175, 1);

  --dur: 280ms;
  --dur-fast: 160ms;
  --dur-slow: 480ms;

  background: var(--noir-0);
  color: var(--ink-1);
  font-family: var(--font-body);
  overflow-x: hidden;
}

.idx3 .container { max-width: 1440px; }

/* Cursor custom (subtil) */
.idx3 a, .idx3 button, .idx3 [role="button"] { cursor: pointer; }

/* Scroll behavior */
html:has(.idx3) { scroll-behavior: smooth; }

/* ============================================================
   CUSTOM CURSOR — ring or magnetic + dot, glow lerp
   ============================================================ */
.idx3-cursor,
.idx3-cursor__dot,
.idx3-cursor__glow { pointer-events: none; position: fixed; top: 0; left: 0; z-index: 999; will-change: transform; }

.idx3-cursor {
  width: 32px; height: 32px;
  border: 1px solid var(--lume-1);
  border-radius: 50%;
  transition: width .35s var(--ease), height .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), opacity .25s var(--ease);
  opacity: 0;
}
.idx3-cursor.is-visible { opacity: 1; }
.idx3-cursor.is-magnetic {
  width: 56px; height: 56px;
  background: rgba(88,145,199,.08);
  border-color: var(--lume-3);
}
.idx3-cursor.is-text {
  width: 4px; height: 28px;
  border-radius: 0;
  border-width: 0;
  background: var(--lume-1);
  border-color: transparent;
}
.idx3-cursor__dot {
  width: 5px; height: 5px;
  background: var(--lume-1);
  border-radius: 50%;
  z-index: 1000;
  box-shadow: 0 0 8px var(--lume-glow);
}
.idx3-cursor__glow {
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(88,145,199,.08) 0%, transparent 65%);
  filter: blur(20px);
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .8s var(--ease);
}
.idx3.has-cursor .idx3-cursor__glow { opacity: 1; }

/* Hide native cursor on capable devices */
.idx3.has-cursor,
.idx3.has-cursor a,
.idx3.has-cursor button,
.idx3.has-cursor [role="button"] {
  cursor: none;
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .idx3-cursor, .idx3-cursor__dot, .idx3-cursor__glow { display: none !important; }
  .idx3.has-cursor, .idx3.has-cursor * { cursor: auto !important; }
}

/* ============================================================
   SPEC READING — signature brand : les emphases ne sont plus
   un mot italique colore (reflexe editorial), mais une "lecture
   d'instrument" : couleur lume + tick de graduation 1px en navy
   sous le mot, comme une mesure relevee sur un cadran.

   Usage  : <em class="spec">quinze ans</em>
            <em class="spec spec--num">~30 millions</em>
   ============================================================ */
.idx3 em.spec {
  font-style: normal;
  font-weight: 500;
  color: var(--lume-1);
  letter-spacing: -.005em;
  position: relative;
  padding-bottom: 3px;
  /* Tick de graduation - 1px navy avec un soupcon de lume tout au bout */
  background-image: linear-gradient(to right,
    var(--navy) 0%,
    var(--navy) 85%,
    var(--lume-1) 85%,
    var(--lume-1) 100%);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  transition: color var(--dur-fast) var(--ease-out),
              background-size var(--dur) var(--ease-out);
}
.idx3 em.spec:hover {
  color: var(--lume-3);
  /* aiguille qui se retire vers la gauche au hover, comme un cadran qui revient au zero */
  background-size: 100% 1px;
}

/* Variant : metrique numerique - mono tabulaire, comme un afficheur */
.idx3 em.spec--num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.02em;
  font-weight: 400;
}

/* ============================================================
   PAGE CURTAIN — reveal au load (5 bandes verticales qui partent)
   ============================================================ */
.idx3-curtain {
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.idx3-curtain span {
  background: var(--noir-0);
  border-right: 1px solid rgba(255,255,255,.02);
  transform-origin: bottom;
  animation: curtainOut 1.4s cubic-bezier(.7,0,.3,1) forwards;
}
.idx3-curtain span:nth-child(1) { animation-delay: 0ms; }
.idx3-curtain span:nth-child(2) { animation-delay: 80ms; }
.idx3-curtain span:nth-child(3) { animation-delay: 160ms; }
.idx3-curtain span:nth-child(4) { animation-delay: 240ms; }
.idx3-curtain span:nth-child(5) { animation-delay: 320ms; }
@keyframes curtainOut {
  0%   { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}
.idx3-curtain.is-done { display: none; }
@media (prefers-reduced-motion: reduce) {
  .idx3-curtain { display: none; }
}

/* Curtain logo flash : pour le moment de transition */
.idx3-curtain__mark {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  width: clamp(200px, 24vw, 360px);
  height: auto;
  opacity: 0;
  pointer-events: none;
  animation: curtainMark 1.4s cubic-bezier(.7,0,.3,1) forwards;
  filter: drop-shadow(0 0 24px rgba(88,145,199,.3));
}
@keyframes curtainMark {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}
.idx3-curtain.is-done + .idx3-curtain__mark { display: none; }

/* ============================================================
   NARRATIVE THREAD — ligne or fixe qui s'allonge au scroll
   ============================================================ */
.idx3-thread {
  position: fixed;
  top: 0;
  left: 32px;
  width: 1px;
  height: 100vh;
  z-index: 50;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(88,145,199,.18) 20%, rgba(88,145,199,.18) 80%, transparent 100%);
}
.idx3-thread__progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(180deg, transparent, var(--lume-1) 30%, var(--lume-1) 70%, transparent);
  height: var(--p, 0%);
  transition: height .1s linear;
  box-shadow: 0 0 8px var(--lume-glow);
}
.idx3-thread__dot {
  position: absolute;
  left: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lume-1);
  box-shadow: 0 0 12px var(--lume-glow);
  top: var(--p, 0%);
  transform: translateY(-50%);
  transition: top .1s linear;
}
@media (max-width: 980px) { .idx3-thread { display: none; } }

/* ============================================================
   CHAPTER INDICATOR — sticky en haut à droite
   ============================================================ */
.idx3-chapter {
  position: fixed;
  top: 96px;
  right: clamp(24px, 4vw, 56px);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.idx3-chapter.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.idx3-chapter__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--lume-1);
}
.idx3-chapter__name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  max-width: 220px;
  text-align: right;
}
@media (max-width: 980px) { .idx3-chapter { display: none; } }

/* ============================================================
   PULL QUOTE — citation monumentale entre sections
   ============================================================ */
.idx3-pull {
  padding: clamp(56px, 8vw, 110px) clamp(24px, 5vw, 80px);
  border-top: 1px solid var(--line);
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}
.idx3-pull::before {
  content: "";
  position: absolute;
  top: 32px;
  left: clamp(24px, 5vw, 80px);
  width: 48px;
  height: 1px;
  background: var(--lume-1);
}
.idx3-pull__caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--lume-1);
  margin-bottom: 32px;
}
.idx3-pull__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(28px, 4vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-1);
  margin: 0;
  max-width: 22ch;
}
.idx3-pull--right {
  text-align: right;
  margin-left: auto;
}
.idx3-pull--right .idx3-pull__text {
  margin-left: auto;
}
.idx3-pull--right::before {
  left: auto;
  right: clamp(24px, 5vw, 80px);
}
.idx3-pull__attr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.idx3-pull__attr::before {
  content: "—";
  color: var(--lume-1);
}

/* ============================================================
   TERMINAL panel (live status hero)
   ============================================================ */
.idx3-terminal {
  position: relative;
  border: 1px solid var(--line);
  background: rgba(14, 15, 17, .6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12px;
  max-width: 400px;
  width: 100%;
  isolation: isolate;
  box-shadow:
    0 28px 70px -28px rgba(0, 0, 0, .85),
    0 0 60px -20px rgba(88, 145, 199, .18);
}
.idx3-terminal::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, transparent 30%, var(--lume-1) 50%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .35;
  pointer-events: none;
}
.idx3-terminal__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.idx3-terminal__bar i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
}
.idx3-terminal__bar i:nth-child(1) { background: #6BBF8A; box-shadow: 0 0 6px #6BBF8A; }
.idx3-terminal__bar span { margin-left: auto; }
.idx3-terminal__body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.idx3-terminal__line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink-2);
}
.idx3-terminal__line strong {
  color: var(--ink-1);
  font-weight: 500;
}
.idx3-terminal__line em {
  font-style: normal;
  color: var(--lume-1);
}
.idx3-terminal__line--ok {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  color: var(--success);
}
.idx3-terminal__line--ok::before {
  content: "▸";
  color: var(--success);
  margin-right: 8px;
}
.idx3-terminal__line--blink em::after {
  content: "▍";
  margin-left: 2px;
  animation: blinkCursor 1s steps(2) infinite;
}
@keyframes blinkCursor { to { opacity: 0; } }

/* Hero asymétrie : type à gauche, terminal à droite */
.idx3-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.idx3-hero__layout-side {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 0;
}
@media (max-width: 980px) {
  .idx3-hero__layout { grid-template-columns: 1fr; gap: 48px; }
}

/* ============================================================
   YEAR BAND — bande horizontale 1995 → 2026
   ============================================================ */
.idx3-yearband {
  position: relative;
  padding: clamp(60px, 8vw, 100px) clamp(24px, 5vw, 80px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.idx3-yearband__line {
  position: relative;
  height: 2px;
  background: linear-gradient(90deg, var(--line) 0%, var(--lume-1) 50%, var(--line) 100%);
  margin: 56px 0 96px;
}
.idx3-yearband__marker {
  position: absolute;
  top: -4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--noir-0);
  border: 1.5px solid var(--lume-1);
  transform: translateX(-50%);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}
.idx3-yearband__marker--pulse { background: var(--lume-1); box-shadow: 0 0 12px var(--lume-glow); animation: lumePulse 2.4s ease-in-out infinite; }
@keyframes lumePulse { 50% { box-shadow: 0 0 20px var(--lume-glow); transform: translateX(-50%) scale(1.3); } }
.idx3-yearband__marker:hover { transform: translateX(-50%) scale(1.4); }
.idx3-yearband__label {
  position: absolute;
  top: 24px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-3);
  white-space: nowrap;
  max-width: 200px;
  text-align: center;
}
.idx3-yearband__label strong { color: var(--lume-1); display: block; font-weight: 500; }
/* (yearband__years retiré : redondant avec les markers) */

/* ============================================================
   NEWSPAPER — drop caps + marginalia (sur-mesure)
   ============================================================ */
.idx3-news {
  padding: clamp(80px, 12vw, 140px) clamp(24px, 5vw, 80px);
  border-top: 1px solid var(--line);
  position: relative;
}
@media (min-width: 1600px) {
  .idx3-news__columns { column-count: 4; }
}
.idx3-news__masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 24px;
  margin-bottom: clamp(48px, 6vw, 80px);
  border-bottom: 1px solid var(--lume-1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.idx3-news__masthead strong { color: var(--lume-1); }
.idx3-news__masthead em { font-style: normal; color: var(--ink-1); }
.idx3-news__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 96px);
  line-height: .98;
  letter-spacing: -0.03em;
  margin: 0 0 64px;
  max-width: 18ch;
}
.idx3-news__title em { font-style: italic; color: var(--lume-1); }

.idx3-news__columns {
  column-count: 3;
  column-gap: 48px;
  column-rule: 1px solid var(--line);
}
@media (max-width: 980px) { .idx3-news__columns { column-count: 1; } }

.idx3-news__article {
  break-inside: avoid;
  margin-bottom: 48px;
  display: block;
}
.idx3-news__cap {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 88px;
  line-height: .85;
  color: var(--lume-1);
  float: left;
  padding: 4px 12px 0 0;
  margin: 4px 0 -4px;
}
.idx3-news__art-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}
.idx3-news__art-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--ink-1);
}
.idx3-news__art-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 16px;
  text-align: justify;
  hyphens: auto;
}
.idx3-news__art-body em {
  color: var(--lume-3);
  font-style: italic;
  font-weight: 500;
}
.idx3-news__art-meta {
  padding-top: 12px;
  border-top: 1px dotted var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: .04em;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.idx3-news__art-meta strong { color: var(--lume-1); font-weight: 500; }

.idx3-news__margin {
  position: absolute;
  right: clamp(24px, 5vw, 80px);
  top: clamp(150px, 14vw, 230px);
  max-width: 240px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--ink-3);
  border-left: 1px solid var(--lume-1);
  padding-left: 16px;
  transform: rotate(.5deg);
}
.idx3-news__margin strong { color: var(--lume-1); display: block; margin-bottom: 4px; }
@media (max-width: 1280px) { .idx3-news__margin { display: none; } }

/* ============================================================
   CODE BLOCK — pour la section IA
   ============================================================ */
.idx3-code {
  font-family: var(--font-mono);
  background: var(--noir-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 24px 28px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 640px;
  overflow-x: auto;
  position: relative;
  isolation: isolate;
}
.idx3-code::before {
  content: "router.cfc · ligne 42";
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.idx3-code .k { color: var(--lume-1); }
.idx3-code .s { color: var(--ink-1); }
.idx3-code .c { color: var(--ink-3); font-style: italic; }
.idx3-code .n { color: #E5B26B; }
.idx3-code .v { color: #6BBF8A; }

/* ============================================================
   SECTION HEADER scroll pin
   ============================================================ */
.idx3-pinhead {
  position: relative;
  min-height: 60vh;
  padding: clamp(80px, 12vw, 140px) clamp(24px, 5vw, 80px);
}
.idx3-pinhead__sticky {
  position: sticky;
  top: 25vh;
  transition: transform var(--dur) var(--ease);
}

/* Reveals : contenu toujours visible, polish via animation au scroll */
.idx3 .r { opacity: 1; }
.idx3.js-ready .r.in { animation: revealUp 1s var(--ease-out) backwards; }
.idx3.js-ready .r.in[data-d="1"] { animation-delay: 60ms; }
.idx3.js-ready .r.in[data-d="2"] { animation-delay: 120ms; }
.idx3.js-ready .r.in[data-d="3"] { animation-delay: 180ms; }
.idx3.js-ready .r.in[data-d="4"] { animation-delay: 240ms; }
.idx3.js-ready .r.in[data-d="5"] { animation-delay: 300ms; }
.idx3.js-ready .r.in[data-d="6"] { animation-delay: 360ms; }
@keyframes revealUp {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ============================================================
   SLIDE directionnels — sections entrent depuis gauche / droite
   ============================================================ */
.idx3 .slide-l,
.idx3 .slide-r,
.idx3 .slide-up-big { opacity: 1; }
.idx3.js-ready .slide-l.in { animation: slideL 1.2s var(--ease-out) backwards; }
.idx3.js-ready .slide-r.in { animation: slideR 1.2s var(--ease-out) backwards; }
.idx3.js-ready .slide-up-big.in { animation: slideUpBig 1.2s var(--ease-out) backwards; }
.idx3.js-ready .slide-l.in[data-d="1"],
.idx3.js-ready .slide-r.in[data-d="1"] { animation-delay: 80ms; }
.idx3.js-ready .slide-l.in[data-d="2"],
.idx3.js-ready .slide-r.in[data-d="2"] { animation-delay: 160ms; }
.idx3.js-ready .slide-l.in[data-d="3"],
.idx3.js-ready .slide-r.in[data-d="3"] { animation-delay: 240ms; }
.idx3.js-ready .slide-l.in[data-d="4"],
.idx3.js-ready .slide-r.in[data-d="4"] { animation-delay: 320ms; }
.idx3.js-ready .slide-l.in[data-d="5"],
.idx3.js-ready .slide-r.in[data-d="5"] { animation-delay: 400ms; }
@keyframes slideL {
  from { opacity: 0; transform: translate3d(-80px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes slideR {
  from { opacity: 0; transform: translate3d(80px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes slideUpBig {
  from { opacity: 0; transform: translate3d(0, 60px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Year band : ligne dessinée gauche→droite + markers cascadés */
.idx3-yearband__line { transform-origin: left center; transition: transform 1.8s var(--ease-out); }
.idx3.js-ready .idx3-yearband:not(.in) .idx3-yearband__line { transform: scaleX(0); }
.idx3-yearband__marker { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.idx3.js-ready .idx3-yearband:not(.in) .idx3-yearband__marker { opacity: 0; transform: translateX(-50%) translateY(10px); }
.idx3.js-ready .idx3-yearband.in .idx3-yearband__marker { transition-delay: var(--md, 0ms); }

/* ============================================================
   FRISE — couche cinematique : comete lumineuse, plant elastique,
   shockwave, connecteur, sweep ambiant continu apres reveal.
   Le temps qui se revele de gauche a droite, puis qui respire.
   ============================================================ */

/* On annule le scaleX de la ligne (qui clipperait markers et pseudos) */
.idx3.js-ready .idx3-yearband:not(.in) .idx3-yearband__line,
.idx3.js-ready .idx3-yearband.in .idx3-yearband__line {
  transform: none;
  transition: none;
  background: linear-gradient(90deg, rgba(180,200,230,0.10) 0%, rgba(180,200,230,0.16) 50%, rgba(180,200,230,0.10) 100%);
}

/* Le trait lumineux : revele de gauche a droite via clip-path */
.idx3-yearband__line::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(120,180,250,0.45) 18%, var(--lume-1) 50%, rgba(120,180,250,0.45) 82%, transparent 100%);
  background-size: 25% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: -25% 0, 0 0;
  filter: drop-shadow(0 0 6px var(--lume-glow));
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1800ms cubic-bezier(.55, 0, .15, 1) 200ms;
  pointer-events: none;
  z-index: 1;
}
.idx3.js-ready .idx3-yearband.in .idx3-yearband__line::before {
  clip-path: inset(0 0 0 0);
}
.idx3.js-ready .idx3-yearband.is-frise-landed .idx3-yearband__line::before {
  animation: friseAmbientSweep 5.5s linear infinite;
}
@keyframes friseAmbientSweep {
  0%   { background-position: -25% 0, 0 0; }
  100% { background-position: 130% 0, 0 0; }
}

/* Comete : tete lumineuse qui suit la pointe du trait */
.idx3-yearband__line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--lume-1) 32%, rgba(120,180,250,0.5) 58%, transparent 78%);
  filter: drop-shadow(0 0 12px var(--lume-glow)) drop-shadow(0 0 4px #fff);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  transition: left 1800ms cubic-bezier(.55, 0, .15, 1) 200ms, opacity 280ms ease;
}
.idx3.js-ready .idx3-yearband.in .idx3-yearband__line::after {
  left: 100%;
  opacity: 1;
}
.idx3.js-ready .idx3-yearband.is-frise-landed .idx3-yearband__line::after {
  opacity: 0;
  transition: opacity 700ms ease;
}

/* Plant elastique du marker : pop, depasse, atterrit. Override la base. */
.idx3.js-ready .idx3-yearband:not(.in) .idx3-yearband__marker {
  opacity: 0;
  transform: translateX(-50%) scale(0);
  transition: none;
}
.idx3.js-ready .idx3-yearband.in .idx3-yearband__marker {
  animation: friseMarkerPlant 700ms cubic-bezier(.34, 1.56, .5, 1) backwards var(--md, 0ms);
  transition: none;
  transform: translateX(-50%) scale(1);
  opacity: 1;
  z-index: 5;
}
@keyframes friseMarkerPlant {
  0%   { opacity: 0; transform: translateX(-50%) scale(0); }
  55%  { opacity: 1; transform: translateX(-50%) scale(1.55); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* Pulse marker : meme plant, mais lumePulse infinie prend le relais au landing */
.idx3.js-ready .idx3-yearband.in .idx3-yearband__marker--pulse {
  animation: friseMarkerPlant 700ms cubic-bezier(.34, 1.56, .5, 1) backwards var(--md, 0ms);
}
.idx3.js-ready .idx3-yearband.in.is-frise-landed .idx3-yearband__marker--pulse {
  animation: lumePulse 2.4s ease-in-out infinite;
}

/* Shockwave : anneau qui se dilate au moment du plant */
.idx3.js-ready .idx3-yearband .idx3-yearband__marker::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  border: 1.5px solid var(--lume-1);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
.idx3.js-ready .idx3-yearband.in .idx3-yearband__marker::before {
  animation: friseShockwave 950ms cubic-bezier(.2, .6, .3, 1) backwards calc(var(--md, 0ms) + 80ms);
}
@keyframes friseShockwave {
  0%   { opacity: 0.9; transform: scale(1); border-width: 1.5px; }
  100% { opacity: 0;   transform: scale(6); border-width: 0.3px; }
}

/* Connecteur vertical marker -> label : un fil qui se tire vers le bas */
.idx3-yearband__marker::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  width: 1px;
  height: 18px;
  margin-left: -0.5px;
  background: linear-gradient(180deg, var(--lume-1) 0%, transparent 100%);
  transform: scaleY(0);
  transform-origin: top center;
  opacity: 0.55;
  pointer-events: none;
}
.idx3.js-ready .idx3-yearband.in .idx3-yearband__marker::after {
  animation: friseConnectorDraw 420ms ease-out backwards calc(var(--md, 0ms) + 200ms);
  transform: scaleY(1);
}
@keyframes friseConnectorDraw {
  0%   { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

/* Label : monte apres le plant, fade in propre */
.idx3.js-ready .idx3-yearband:not(.in) .idx3-yearband__label {
  opacity: 0;
  transform: translateX(-50%) translateY(-6px);
}
.idx3.js-ready .idx3-yearband.in .idx3-yearband__label {
  animation: friseLabelRise 700ms cubic-bezier(.2, .8, .3, 1) backwards calc(var(--md, 0ms) + 280ms);
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@keyframes friseLabelRise {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Dernier marker (2026) : label cale a droite, pas centre */
.idx3.js-ready .idx3-yearband:not(.in) .idx3-yearband__marker--end .idx3-yearband__label {
  transform: translateY(-6px);
}
.idx3.js-ready .idx3-yearband.in .idx3-yearband__marker--end .idx3-yearband__label {
  animation: friseLabelRiseEnd 700ms cubic-bezier(.2, .8, .3, 1) backwards calc(var(--md, 0ms) + 280ms);
  transform: translateY(0);
}
@keyframes friseLabelRiseEnd {
  0%   { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Millesime : flash dore quand le label arrive */
.idx3-yearband__label strong { position: relative; }
.idx3.js-ready .idx3-yearband.in .idx3-yearband__label strong {
  animation: friseYearFlash 1.4s ease-out backwards calc(var(--md, 0ms) + 450ms);
}
@keyframes friseYearFlash {
  0%   { text-shadow: 0 0 0 transparent; color: #fff; }
  25%  { text-shadow: 0 0 14px var(--lume-glow), 0 0 4px #fff; color: #fff; }
  100% { text-shadow: 0 0 0 transparent; }
}

/* 2025 — present : pastille live qui respire a cote du millesime */
.idx3-yearband__marker--pulse .idx3-yearband__label strong::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-radius: 50%;
  background: var(--lume-1);
  box-shadow: 0 0 6px var(--lume-glow);
  vertical-align: middle;
  opacity: 0;
}
.idx3.js-ready .idx3-yearband.is-frise-landed .idx3-yearband__marker--pulse .idx3-yearband__label strong::after {
  opacity: 1;
  animation: friseLiveDot 1.8s ease-in-out infinite;
}
@keyframes friseLiveDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.65); }
}

/* Masthead chap.02 : reveal initial avec la frise */
.idx3-yearband .idx3-news__masthead { transition: opacity 700ms ease 100ms, transform 700ms ease 100ms; }
.idx3.js-ready .idx3-yearband:not(.in) .idx3-news__masthead {
  opacity: 0;
  transform: translateY(-6px);
}

/* Accessibilite : reduced motion, on coupe tout ce qui bouge */
@media (prefers-reduced-motion: reduce) {
  .idx3-yearband__line::before { transition: none !important; clip-path: inset(0 0 0 0) !important; animation: none !important; }
  .idx3-yearband__line::after { display: none !important; }
  .idx3.js-ready .idx3-yearband .idx3-yearband__marker,
  .idx3.js-ready .idx3-yearband .idx3-yearband__marker::before,
  .idx3.js-ready .idx3-yearband .idx3-yearband__marker::after,
  .idx3.js-ready .idx3-yearband .idx3-yearband__label,
  .idx3.js-ready .idx3-yearband .idx3-yearband__label strong,
  .idx3.js-ready .idx3-yearband.is-frise-landed .idx3-yearband__marker--pulse,
  .idx3.js-ready .idx3-yearband.is-frise-landed .idx3-yearband__marker--pulse .idx3-yearband__label strong::after {
    animation: none !important;
    opacity: 1 !important;
  }
  .idx3.js-ready .idx3-yearband .idx3-yearband__marker { transform: translateX(-50%) !important; }
}

/* Parallax horizontal scroll-driven : élément se décale latéralement selon sa position */
.idx3 [data-parallax-x] {
  transform: translate3d(var(--px, 0px), 0, 0);
  will-change: transform;
}

/* ============================================================
   CASCADES INTERNES — children animent en séquence quand la
   section parent obtient .in. Construction part par part.
   ============================================================ */

/* --- Pull quote internals --- */
.idx3-pull__caption,
.idx3-pull__text,
.idx3-pull__attr { opacity: 1; }
.idx3.js-ready .idx3-pull.in .idx3-pull__caption { animation: revealUp .7s var(--ease-out) 100ms backwards; }
.idx3.js-ready .idx3-pull.in .idx3-pull__text { animation: revealUp 1s var(--ease-out) 250ms backwards; }
.idx3.js-ready .idx3-pull.in .idx3-pull__attr { animation: revealUp .7s var(--ease-out) 600ms backwards; }
.idx3.js-ready .idx3-pull--right.in .idx3-pull__text { animation-name: slideR; }
.idx3.js-ready .idx3-pull:not(.idx3-pull--right).in .idx3-pull__text { animation-name: slideL; }

/* --- Principles internals : sub-cascades --- */
.idx3-principle__num,
.idx3-principle__title,
.idx3-principle__text,
.idx3-principle__bullets > li { opacity: 1; }
.idx3.js-ready .idx3-principle.in .idx3-principle__num {
  animation: slideL .7s var(--ease-out) 80ms backwards;
}
.idx3.js-ready .idx3-principle.in .idx3-principle__title {
  animation: slideL 1s var(--ease-out) 200ms backwards;
}
.idx3.js-ready .idx3-principle.in .idx3-principle__text {
  animation: revealUp .9s var(--ease-out) 380ms backwards;
}
.idx3.js-ready .idx3-principle.in .idx3-principle__bullets > li {
  animation: slideR .8s var(--ease-out) backwards;
}
.idx3.js-ready .idx3-principle.in .idx3-principle__bullets > li:nth-child(1) { animation-delay: 540ms; }
.idx3.js-ready .idx3-principle.in .idx3-principle__bullets > li:nth-child(2) { animation-delay: 640ms; }
.idx3.js-ready .idx3-principle.in .idx3-principle__bullets > li:nth-child(3) { animation-delay: 740ms; }

/* --- Stats : scale-in individuel + cascade --- */
.idx3-stat { opacity: 1; }
.idx3.js-ready .idx3-stat.in {
  animation: statBounce .9s var(--ease-out) backwards;
}
.idx3.js-ready .idx3-stat.in[data-d="1"] { animation-delay: 80ms; }
.idx3.js-ready .idx3-stat.in[data-d="2"] { animation-delay: 160ms; }
.idx3.js-ready .idx3-stat.in[data-d="3"] { animation-delay: 240ms; }
.idx3-stat:nth-child(5).in { animation-delay: 320ms; }
.idx3-stat:nth-child(6).in { animation-delay: 400ms; }
.idx3-stat:nth-child(7).in { animation-delay: 480ms; }
.idx3-stat:nth-child(8).in { animation-delay: 560ms; }
@keyframes statBounce {
  from { opacity: 0; transform: translate3d(0, 32px, 0) scale(.94); }
  60%  { opacity: 1; transform: translate3d(0, -4px, 0) scale(1.02); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
/* Le numéro lui-même fait un effet "compte" via JS data-count */

/* --- SaaS stack item : cascade children --- */
.idx3-stack__num,
.idx3-stack__name,
.idx3-stack__pitch,
.idx3-stack__desc,
.idx3-stack__features li,
.idx3-stack__cta,
.idx3-stack__viz { opacity: 1; }
.idx3.js-ready .idx3-stack__item.in .idx3-stack__num {
  animation: slideL .6s var(--ease-out) 80ms backwards;
}
.idx3.js-ready .idx3-stack__item.in .idx3-stack__name {
  animation: slideL .9s var(--ease-out) 180ms backwards;
}
.idx3.js-ready .idx3-stack__item.in .idx3-stack__pitch {
  animation: revealUp .7s var(--ease-out) 340ms backwards;
}
.idx3.js-ready .idx3-stack__item.in .idx3-stack__desc {
  animation: revealUp .9s var(--ease-out) 460ms backwards;
}
.idx3.js-ready .idx3-stack__item.in .idx3-stack__features li {
  animation: slideR .7s var(--ease-out) backwards;
}
.idx3.js-ready .idx3-stack__item.in .idx3-stack__features li:nth-child(1) { animation-delay: 620ms; }
.idx3.js-ready .idx3-stack__item.in .idx3-stack__features li:nth-child(2) { animation-delay: 700ms; }
.idx3.js-ready .idx3-stack__item.in .idx3-stack__features li:nth-child(3) { animation-delay: 780ms; }
.idx3.js-ready .idx3-stack__item.in .idx3-stack__features li:nth-child(4) { animation-delay: 860ms; }
.idx3.js-ready .idx3-stack__item.in .idx3-stack__cta {
  animation: revealUp .7s var(--ease-out) 1000ms backwards;
}
/* Cards impaires : inverse les directions des slides du texte */
.idx3.js-ready .idx3-stack__item:nth-child(odd).in .idx3-stack__num,
.idx3.js-ready .idx3-stack__item:nth-child(odd).in .idx3-stack__name { animation-name: slideR; }
.idx3.js-ready .idx3-stack__item:nth-child(odd).in .idx3-stack__features li { animation-name: slideL; }

/* --- AI facts : stagger horizontal --- */
.idx3-ai__fact { opacity: 1; }
.idx3.js-ready .idx3-ai__fact.in { animation: revealUp .9s var(--ease-out) backwards; }
.idx3.js-ready .idx3-ai__fact.in[data-d="1"] { animation-delay: 150ms; }
.idx3.js-ready .idx3-ai__fact.in[data-d="2"] { animation-delay: 300ms; }

/* --- Newspaper articles : cascade top → bottom --- */
.idx3-news__article { opacity: 1; }
.idx3.js-ready .idx3-news.in .idx3-news__article { animation: revealUp 1s var(--ease-out) backwards; }
.idx3.js-ready .idx3-news.in .idx3-news__article:nth-child(1) { animation-delay: 100ms; }
.idx3.js-ready .idx3-news.in .idx3-news__article:nth-child(2) { animation-delay: 250ms; }
.idx3.js-ready .idx3-news.in .idx3-news__article:nth-child(3) { animation-delay: 400ms; }
.idx3.js-ready .idx3-news.in .idx3-news__article:nth-child(4) { animation-delay: 550ms; }
.idx3.js-ready .idx3-news.in .idx3-news__article:nth-child(5) { animation-delay: 700ms; }

/* Drop cap "pop" : letter scales in */
.idx3-news__cap { opacity: 1; }
.idx3.js-ready .idx3-news.in .idx3-news__cap {
  animation: capPop 1s var(--ease-out) backwards;
}
@keyframes capPop {
  from { opacity: 0; transform: scale(.5) rotate(-8deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
.idx3.js-ready .idx3-news.in .idx3-news__article:nth-child(1) .idx3-news__cap { animation-delay: 300ms; }
.idx3.js-ready .idx3-news.in .idx3-news__article:nth-child(2) .idx3-news__cap { animation-delay: 450ms; }
.idx3.js-ready .idx3-news.in .idx3-news__article:nth-child(3) .idx3-news__cap { animation-delay: 600ms; }
.idx3.js-ready .idx3-news.in .idx3-news__article:nth-child(4) .idx3-news__cap { animation-delay: 750ms; }
.idx3.js-ready .idx3-news.in .idx3-news__article:nth-child(5) .idx3-news__cap { animation-delay: 900ms; }

/* --- Editorial paragraphs cascade --- */
.idx3-editorial__body > div { opacity: 1; }

/* --- Hero CTA buttons cascade --- */
.idx3-hero__cta .idx3-btn { opacity: 1; }
.idx3.js-ready .idx3-hero__cta .idx3-btn:nth-child(1) {
  animation: revealUp .9s var(--ease-out) 1000ms backwards;
}
.idx3.js-ready .idx3-hero__cta .idx3-btn:nth-child(2) {
  animation: revealUp .9s var(--ease-out) 1120ms backwards;
}
.idx3.js-ready .idx3-hero__sub {
  animation: revealUp .9s var(--ease-out) 800ms backwards;
}

/* --- Section header tags (eyebrow, tag, masthead) cascade --- */
.idx3-saas__tag,
.idx3-ai__tag { opacity: 1; }
.idx3.js-ready .idx3-saas__header.in .idx3-saas__tag {
  animation: slideL .7s var(--ease-out) backwards;
}
.idx3.js-ready .idx3-saas__header.in .idx3-saas__title {
  animation: slideL 1s var(--ease-out) 150ms backwards;
}
.idx3.js-ready .idx3-saas__header.in .idx3-saas__lead {
  animation: revealUp .9s var(--ease-out) 320ms backwards;
}
.idx3.js-ready .idx3-ai__header.in .idx3-ai__tag {
  animation: slideL .7s var(--ease-out) backwards;
}
.idx3.js-ready .idx3-ai__header.in .idx3-ai__lead {
  animation: revealUp .9s var(--ease-out) 350ms backwards;
}

/* --- News masthead cascade --- */
.idx3-news__masthead { opacity: 1; }
.idx3.js-ready .idx3-news.in .idx3-news__masthead {
  animation: slideR .9s var(--ease-out) 0ms backwards;
}
.idx3-news__title { opacity: 1; }
.idx3.js-ready .idx3-news.in .idx3-news__title {
  animation: slideL 1s var(--ease-out) 150ms backwards;
}

/* ============================================================
   3D TILT — SaaS card réagit au mouvement souris
   ============================================================ */
.idx3-stack__item {
  transform-style: preserve-3d;
  perspective: 1200px;
  transition: transform .6s var(--ease);
}
.idx3-stack__item .idx3-stack__viz {
  transform-style: preserve-3d;
  transition: transform .6s var(--ease);
}
.idx3-stack__item.is-tilted .idx3-stack__viz {
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateZ(20px);
}
.idx3-stack__item.is-tilted {
  transform: rotateX(calc(var(--tilt-x, 0deg) * 0.3)) rotateY(calc(var(--tilt-y, 0deg) * 0.3));
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .idx3-stack__item.is-tilted,
  .idx3-stack__item.is-tilted .idx3-stack__viz {
    transform: none;
  }
}

/* ============================================================
   STAT COUNTER FLASH — petit éclat quand le chiffre arrive
   ============================================================ */
.idx3-stat__num { position: relative; }
.idx3-stat__num.is-landed::after {
  content: "";
  position: absolute;
  inset: -8px;
  background: radial-gradient(ellipse at center, rgba(88,145,199,.4) 0%, transparent 60%);
  animation: statFlash .9s var(--ease-out) forwards;
  pointer-events: none;
  z-index: -1;
}
@keyframes statFlash {
  0%   { opacity: 0; transform: scale(.6); }
  50%  { opacity: 1; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(1.8); }
}

/* ============================================================
   CODE TYPING — le code s'écrit ligne par ligne
   ============================================================ */
.idx3-code .code-line {
  display: block;
  overflow: hidden;
  white-space: pre;
}
.idx3-code .code-line > span {
  display: inline-block;
}
.idx3.js-ready .idx3-code.is-typing .code-line > span {
  transform: translateY(110%);
  animation: codeReveal .7s var(--ease-out) forwards;
}
.idx3.js-ready .idx3-code.is-typing .code-line:nth-child(1) > span { animation-delay: 100ms; }
.idx3.js-ready .idx3-code.is-typing .code-line:nth-child(2) > span { animation-delay: 250ms; }
.idx3.js-ready .idx3-code.is-typing .code-line:nth-child(3) > span { animation-delay: 400ms; }
.idx3.js-ready .idx3-code.is-typing .code-line:nth-child(4) > span { animation-delay: 550ms; }
.idx3.js-ready .idx3-code.is-typing .code-line:nth-child(5) > span { animation-delay: 700ms; }
.idx3.js-ready .idx3-code.is-typing .code-line:nth-child(6) > span { animation-delay: 850ms; }
.idx3.js-ready .idx3-code.is-typing .code-line:nth-child(7) > span { animation-delay: 1000ms; }
.idx3.js-ready .idx3-code.is-typing .code-line:nth-child(8) > span { animation-delay: 1150ms; }
.idx3.js-ready .idx3-code.is-typing .code-line:nth-child(9) > span { animation-delay: 1300ms; }
.idx3.js-ready .idx3-code.is-typing .code-line:nth-child(10) > span { animation-delay: 1450ms; }
.idx3.js-ready .idx3-code.is-typing .code-line:nth-child(11) > span { animation-delay: 1600ms; }
.idx3.js-ready .idx3-code.is-typing .code-line:nth-child(12) > span { animation-delay: 1750ms; }
@keyframes codeReveal {
  to { transform: translateY(0); }
}

/* Caret clignotant en fin de code */
.idx3-code__caret {
  display: inline-block;
  width: 8px;
  height: 1em;
  background: var(--lume-1);
  margin-left: 4px;
  vertical-align: middle;
  animation: codeBlink 1s steps(2) infinite;
}
@keyframes codeBlink {
  to { opacity: 0; }
}

/* ============================================================
   SCRAMBLE TEXT — terminal lines lettres mélangées au reveal
   ============================================================ */
.idx3-scramble {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   MARQUEE scroll-velocity (boost lors d'un scroll rapide)
   ============================================================ */
.idx3-kinetic__row,
.idx3-kinetic__row--reverse {
  animation-duration: var(--marquee-dur, 60s);
}

/* ============================================================
   SVG BLOCK ANIMATIONS — chaque bloc dans une viz s'anime
   séparément quand la carte parent obtient .in.
   Classes : v-pop, v-fade, v-slide-l, v-slide-r, v-grow-h, v-draw
   Séquencement : attribut data-step="1..8" → delay incrémental
   ============================================================ */

.v-pop, .v-fade, .v-slide-l, .v-slide-r, .v-grow-h, .v-draw { opacity: 1; }

.idx3.js-ready .idx3-stack__item.in .v-pop {
  transform-box: fill-box;
  transform-origin: center;
  animation: vPop .8s var(--ease-out) backwards;
}
.idx3.js-ready .idx3-stack__item.in .v-fade {
  animation: vFade .7s var(--ease-out) backwards;
}
.idx3.js-ready .idx3-stack__item.in .v-slide-l {
  transform-box: fill-box;
  animation: vSlideLSvg .8s var(--ease-out) backwards;
}
.idx3.js-ready .idx3-stack__item.in .v-slide-r {
  transform-box: fill-box;
  animation: vSlideRSvg .8s var(--ease-out) backwards;
}
.idx3.js-ready .idx3-stack__item.in .v-grow-h {
  transform-box: fill-box;
  transform-origin: left center;
  animation: vGrowH 1s var(--ease-out) backwards;
}
.idx3.js-ready .idx3-stack__item.in .v-draw {
  stroke-dasharray: 800;
  animation: vDrawStroke 1.2s var(--ease-out) backwards;
}

/* Delays par data-step */
.idx3.js-ready .idx3-stack__item.in [data-step="1"] { animation-delay: 500ms; }
.idx3.js-ready .idx3-stack__item.in [data-step="2"] { animation-delay: 650ms; }
.idx3.js-ready .idx3-stack__item.in [data-step="3"] { animation-delay: 800ms; }
.idx3.js-ready .idx3-stack__item.in [data-step="4"] { animation-delay: 950ms; }
.idx3.js-ready .idx3-stack__item.in [data-step="5"] { animation-delay: 1100ms; }
.idx3.js-ready .idx3-stack__item.in [data-step="6"] { animation-delay: 1250ms; }
.idx3.js-ready .idx3-stack__item.in [data-step="7"] { animation-delay: 1400ms; }

@keyframes vPop {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes vFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes vSlideLSvg {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes vSlideRSvg {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes vGrowH {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes vDrawStroke {
  from { stroke-dashoffset: 800; }
  to   { stroke-dashoffset: 0; }
}

/* Container viz : juste fade in (le show vient des enfants) */
.idx3.js-ready .idx3-stack__item.in .idx3-stack__viz {
  animation: vFade .5s var(--ease-out) 200ms backwards;
}

/* SaaS stack : cards alternent côté hover */
.idx3-stack__item:nth-child(odd) .idx3-stack__viz { order: 2; }
.idx3-stack__item:nth-child(odd) > div:first-child { order: 1; }
@media (max-width: 980px) {
  .idx3-stack__item:nth-child(odd) .idx3-stack__viz,
  .idx3-stack__item:nth-child(odd) > div:first-child { order: 0; }
}

/* ============================================================
   1) HERO — WebGL particles + kinetic typography
   ============================================================ */
.idx3-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(24px, 5vw, 80px);
  isolation: isolate;
  overflow: hidden;
}

.idx3-hero__canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}

.idx3-hero__mesh {
  position: absolute;
  inset: -10%;
  z-index: -2;
  filter: blur(100px) saturate(120%);
  opacity: .58;
  animation: meshDrift 28s ease-in-out infinite alternate;
  pointer-events: none;
}
.idx3-hero__mesh::before,
.idx3-hero__mesh::after,
.idx3-hero__mesh > span {
  content: "";
  position: absolute;
  border-radius: 50%;
  display: block;
}
.idx3-hero__mesh::before {
  width: 62%; height: 66%;
  top: 16%; left: -8%;
  background: radial-gradient(circle, var(--lume-1) 0%, transparent 70%);
}
.idx3-hero__mesh::after {
  width: 45%; height: 45%;
  bottom: 0%; right: 0%;
  background: radial-gradient(circle, var(--lume-3) 0%, transparent 70%);
}
.idx3-hero__mesh > span {
  width: 35%; height: 35%;
  top: 40%; left: 45%;
  background: radial-gradient(circle, var(--lume-2) 0%, transparent 70%);
}
@keyframes meshDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-2%, 3%, 0) scale(1.05); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.02); }
}

.idx3-hero__vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 100%, transparent 0%, var(--noir-0) 92%),
    radial-gradient(ellipse at 50% 0%, transparent 12%, var(--noir-0) 96%);
  pointer-events: none;
}

.idx3-hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  pointer-events: none;
}

.idx3-hero__top {
  position: absolute;
  top: clamp(100px, 14vh, 160px);
  left: clamp(24px, 5vw, 80px);
  right: clamp(24px, 5vw, 80px);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  z-index: 1;
}
.idx3-hero__top span { display: block; }
.idx3-hero__top em { color: var(--lume-1); font-style: normal; }

.idx3-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 48px;
}
.idx3-hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px; height: 1px;
  background: var(--lume-1);
}

.idx3-hero__words {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.idx3-hero__word {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 8vw, 112px);
  line-height: .94;
  letter-spacing: -0.03em;
  color: var(--ink-1);
  white-space: nowrap;
  overflow: hidden;
}
.idx3-hero__word--accent {
  font-style: italic;
  color: var(--lume-1);
  /* L'italique a des ascenders plus hauts (f, l) qui étaient
     clippés par overflow:hidden + line-height:0.94.
     padding-top crée de l'espace, margin-top négatif préserve le rythme. */
  padding-top: 0.14em;
  margin-top: -0.14em;
}

.idx3-hero__word-mask {
  display: block;
  transform: translateY(120%);
  animation: heroWordReveal 1.4s var(--ease-out) forwards;
  will-change: transform;
}
.idx3-hero__word[data-d="1"] .idx3-hero__word-mask { animation-delay: 200ms; }
.idx3-hero__word[data-d="2"] .idx3-hero__word-mask { animation-delay: 400ms; }
.idx3-hero__word[data-d="3"] .idx3-hero__word-mask { animation-delay: 600ms; }
@keyframes heroWordReveal {
  to { transform: translateY(0%); }
}

.idx3-hero__sub {
  font-size: clamp(15px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
  margin-bottom: clamp(40px, 5vw, 64px);
  font-weight: 400;
}
.idx3-hero__sub strong,
.idx3-page-hero__lead strong {
  font-weight: 600;
  color: var(--ink-1);
}

.idx3-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.idx3-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
}
.idx3-btn--primary {
  background: var(--ink-1);
  color: var(--noir-0);
}
.idx3-btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, var(--lume-1), var(--lume-3));
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.idx3-btn--primary:hover { transform: translateY(-1px); color: var(--noir-0); }
.idx3-btn--primary:hover::before { opacity: 1; }

.idx3-btn--ghost {
  background: transparent;
  color: var(--ink-1);
  border-color: rgba(255,255,255,.18);
}
.idx3-btn--ghost:hover {
  border-color: var(--lume-1);
  color: var(--lume-3);
  transform: translateY(-1px);
}
.idx3-btn .arrow { transition: transform var(--dur-fast) var(--ease); display: inline-block; }
.idx3-btn:hover .arrow { transform: translateX(4px); }

.idx3-hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 12px;
}
.idx3-hero__scroll::after {
  content: "";
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, var(--lume-1), transparent);
  animation: scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50%      { opacity: .3; transform: translateY(8px); }
}

/* ============================================================
   2) KINETIC MARQUEE — bandes orthogonales
   ============================================================ */
.idx3-kinetic {
  position: relative;
  padding: clamp(48px, 7vw, 88px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: var(--noir-0);
}
.idx3-kinetic__row {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  width: max-content;
  animation: marqueeL 60s linear infinite;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.6vw, 56px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}
.idx3-kinetic__row--reverse {
  margin-top: 12px;
  animation: marqueeR 75s linear infinite;
  color: transparent;
  -webkit-text-stroke: 1px var(--lume-1);
  font-style: italic;
  font-size: clamp(22px, 3.2vw, 48px);
}
.idx3-kinetic__row span { display: inline-flex; align-items: center; }
.idx3-kinetic__row span::after {
  content: "·";
  color: var(--lume-1);
  margin: 0 24px;
  -webkit-text-stroke: 0;
}
@keyframes marqueeL { to { transform: translateX(-50%); } }
@keyframes marqueeR { to { transform: translateX(50%); } }

/* ============================================================
   3) MANIFESTE — 3 grandes cartes principes (full-screen)
   ============================================================ */
.idx3-principles {
  padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 12vw, 160px);
}
.idx3-principles__intro {
  padding: 0 clamp(24px, 5vw, 80px);
  max-width: 900px;
  margin: 0 auto clamp(80px, 10vw, 140px);
  text-align: center;
}
.idx3-principles__intro-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--lume-1);
  margin-bottom: 24px;
}
.idx3-principles__intro h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink-1);
}
.idx3-principles__intro h2 em {
  font-style: italic;
  color: var(--lume-1);
}

.idx3-principle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) clamp(24px, 5vw, 80px);
  border-top: 1px solid var(--line);
}
.idx3-principle:last-child { border-bottom: 1px solid var(--line); }
.idx3-principle__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .15em;
  color: var(--lume-1);
  margin-bottom: 32px;
}
.idx3-principle__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 32px;
}
.idx3-principle__title em {
  font-style: italic;
  color: var(--lume-1);
}
.idx3-principle__text {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 0 0 32px;
}
.idx3-principle__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.idx3-principle__bullets li {
  display: flex;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-2);
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.idx3-principle__bullets li::before {
  content: attr(data-mark);
  color: var(--lume-1);
  min-width: 60px;
  letter-spacing: .08em;
}
.idx3-principle:nth-child(odd) .idx3-principle__viz { order: 2; }

.idx3-principle__viz {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 480px;
  width: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.idx3-principle__viz svg {
  width: 100%;
  height: 100%;
}
.idx3-principle__viz svg .grow,
.idx3-principle__viz svg .draw,
.idx3-principle__viz svg .fade {
  /* visible par défaut, polish ajouté via .in si JS dispo */
}
.idx3.js-ready .idx3-principle.in .idx3-principle__viz svg .grow {
  animation: vizGrow 1.4s var(--ease-out) backwards;
  transform-box: fill-box;
  transform-origin: center;
}
.idx3.js-ready .idx3-principle.in .idx3-principle__viz svg .draw {
  animation: vizDraw 2.4s var(--ease-out) backwards;
  stroke-dasharray: 1200;
}
.idx3.js-ready .idx3-principle.in .idx3-principle__viz svg .fade {
  animation: vizFade 1.2s var(--ease-out) .6s backwards;
}
@keyframes vizGrow { from { transform: scale(0); } }
@keyframes vizDraw { from { stroke-dashoffset: 1200; } }
@keyframes vizFade { from { opacity: 0; } }

/* ============================================================
   VAULT viz (principe 02 · Souverain) — couche vivante :
   radar sweep, cipher disc en rotation, orbites, FR qui respire.
   Tous les transforms tournent autour du centre (200, 200) du viewBox.
   ============================================================ */
.idx3-principle__viz svg .idx3-vault-radar,
.idx3-principle__viz svg .idx3-vault-cipher,
.idx3-principle__viz svg .idx3-vault-orbit,
.idx3-principle__viz svg .idx3-vault-fr {
  transform-box: view-box;
  transform-origin: 200px 200px;
}

/* Radar : bras qui balaye l'anneau exterieur en 6s */
.idx3.js-ready .idx3-principle.in .idx3-principle__viz svg .idx3-vault-radar {
  animation: vaultRadar 6s linear infinite 1.2s;
}
@keyframes vaultRadar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Cipher disc : anneau pointille qui tourne lentement en sens inverse */
.idx3.js-ready .idx3-principle.in .idx3-principle__viz svg .idx3-vault-cipher {
  animation: vaultCipher 40s linear infinite 1.5s;
}
@keyframes vaultCipher {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* Orbites : 3 particules equidistantes, meme cycle 24s, demarrage decale */
.idx3.js-ready .idx3-principle.in .idx3-principle__viz svg .idx3-vault-orbit {
  animation: vaultOrbit 24s linear infinite 1.5s;
}
.idx3.js-ready .idx3-principle.in .idx3-principle__viz svg .idx3-vault-orbit--b {
  animation-delay: 0s;
}
.idx3.js-ready .idx3-principle.in .idx3-principle__viz svg .idx3-vault-orbit--c {
  animation-delay: 0.5s;
}
@keyframes vaultOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* FR au centre : respiration douce + glow autour */
.idx3.js-ready .idx3-principle.in .idx3-principle__viz svg .idx3-vault-fr {
  animation: vaultBreath 4s ease-in-out infinite 1.8s;
}
@keyframes vaultBreath {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 4px rgba(88, 145, 199, 0.35)); }
  50%      { transform: scale(1.06); filter: drop-shadow(0 0 14px rgba(88, 145, 199, 0.7)); }
}

/* Pulse du dot leading edge du radar : SMIL le gere deja (animate r). Aucun CSS supplementaire. */

/* Reduced motion : on coupe les boucles infinies */
@media (prefers-reduced-motion: reduce) {
  .idx3-principle__viz svg .idx3-vault-radar,
  .idx3-principle__viz svg .idx3-vault-cipher,
  .idx3-principle__viz svg .idx3-vault-orbit,
  .idx3-principle__viz svg .idx3-vault-fr {
    animation: none !important;
  }
}

/* ============================================================
   AI HYBRID viz (principe 03) — couche vivante :
   routeur qui respire, anneau anonymiseur qui tourne, packets
   qui circulent en SMIL le long des paths definis.
   ============================================================ */
.idx3-principle__viz svg .idx3-ai-router,
.idx3-principle__viz svg .idx3-ai-anon {
  transform-box: view-box;
  transform-origin: 200px 200px;
}
.idx3-principle__viz svg .idx3-ai-anon {
  transform-origin: 300px 100px;
}

/* Router : respiration douce (le hub decide en continu) */
.idx3.js-ready .idx3-principle.in .idx3-principle__viz svg .idx3-ai-router {
  animation: aiRouterBreath 3.2s ease-in-out infinite 1.6s;
}
@keyframes aiRouterBreath {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 4px rgba(88, 145, 199, 0.3)); }
  50%      { transform: scale(1.04); filter: drop-shadow(0 0 12px rgba(88, 145, 199, 0.6)); }
}

/* Anonymiseur : anneau dashed qui tourne sur lui-meme (chiffrement en marche) */
.idx3.js-ready .idx3-principle.in .idx3-principle__viz svg .idx3-ai-anon {
  animation: aiAnonRotate 22s linear infinite 1.5s;
}
@keyframes aiAnonRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Reduced motion : coupe tout sauf SMIL packet motion (lent par design, sous-seuil) */
@media (prefers-reduced-motion: reduce) {
  .idx3-principle__viz svg .idx3-ai-router,
  .idx3-principle__viz svg .idx3-ai-anon {
    animation: none !important;
  }
}

/* ============================================================
   4) STATS COUNTUP géant
   ============================================================ */
.idx3-stats {
  padding: clamp(80px, 12vw, 140px) max(clamp(24px, 5vw, 80px), calc((100% - 1600px) / 2));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(32px, 4vw, 64px) clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--noir-0) 0%, var(--noir-1) 30%, var(--noir-1) 70%, var(--noir-0) 100%);
  position: relative;
  overflow: hidden;
}
.idx3-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(88,145,199,.06) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(88,145,199,.04) 0%, transparent 60%);
  pointer-events: none;
}
.idx3-stat {
  position: relative;
  text-align: center;
}
.idx3-stat__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 96px);
  line-height: .9;
  letter-spacing: -0.035em;
  color: var(--ink-1);
  display: block;
  margin-bottom: 16px;
  white-space: nowrap;
}
.idx3-stat__num em {
  font-style: italic;
  background: linear-gradient(180deg, var(--lume-3), var(--lume-1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.idx3-stat__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.5;
}

/* ============================================================
   5) SAAS STACK — cards pinned scroll
   ============================================================ */
.idx3-saas {
  padding: clamp(80px, 12vw, 140px) 0;
  position: relative;
}
.idx3-saas__header {
  padding: 0 clamp(24px, 5vw, 80px);
  max-width: 900px;
  margin: 0 auto clamp(80px, 10vw, 140px);
  text-align: center;
}
.idx3-saas__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--lume-1);
  margin-bottom: 24px;
  display: inline-block;
}
.idx3-saas__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
}
.idx3-saas__title em { font-style: italic; color: var(--lume-1); }
.idx3-saas__lead {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 auto;
  max-width: 60ch;
}

.idx3-stack {
  position: relative;
  padding: 0 clamp(24px, 5vw, 80px);
  max-width: 1280px;
  margin: 0 auto;
}
.idx3-stack__item {
  position: sticky;
  top: 80px;
  margin-bottom: 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(28,31,35,.85) 0%, rgba(14,15,17,.85) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  padding: clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  min-height: 60vh;
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
  transition: transform var(--dur) var(--ease);
}
.idx3-stack__item::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, transparent 30%, var(--lume-1) 50%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .25;
  pointer-events: none;
}

.idx3-stack__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--lume-1);
  margin-bottom: 24px;
}
.idx3-stack__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}
.idx3-stack__pitch {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lume-3);
  margin-bottom: 32px;
}
.idx3-stack__desc {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 32px;
  max-width: 50ch;
}
.idx3-stack__features {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.idx3-stack__features li {
  display: flex;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-2);
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.idx3-stack__features li::before {
  content: "→";
  color: var(--lume-1);
}
.idx3-stack__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-1);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.2);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  width: fit-content;
}
.idx3-stack__cta:hover {
  color: var(--lume-3);
  border-color: var(--lume-1);
}

/* Visualisation card SaaS (image stylisée) */
.idx3-stack__viz {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--noir-1);
  border: 1px solid var(--line);
}
.idx3-stack__viz::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(88,145,199,.18) 0%, transparent 50%);
  transition: opacity var(--dur) var(--ease);
}
.idx3-stack__viz svg {
  width: 75%;
  height: 75%;
}

/* ============================================================
   STACK VIZ - EDIFLO PERPETUAL FLOW
   Signature : la facture voyage vers CII XML, le doc respire,
   la cible vit. Pas neon (taste), durees emil (~3-4s, pas ease
   plate). Le packet est en SMIL (cross-browser), le reste en CSS.

   Toutes les boucles perpetuelles sont gatées derriere
   .idx3-stack__item.in pour ne demarrer qu'apres le pop initial
   (sinon conflit transform avec vPop sur la cible).
   ============================================================ */

/* 4 canaux d'entree : chacun pulse pour signaler "actif et receptif",
   en cascade pour suggerer l'echelonnement des flux. */
.idx3.js-ready .idx3-stack__item.in .ediflo-channel rect {
  animation: edifloChannelPulse 3.6s var(--ease) infinite;
}
.idx3.js-ready .idx3-stack__item.in .ediflo-channel:nth-child(1) rect { animation-delay: 1600ms; }
.idx3.js-ready .idx3-stack__item.in .ediflo-channel:nth-child(2) rect { animation-delay: 2500ms; }
.idx3.js-ready .idx3-stack__item.in .ediflo-channel:nth-child(3) rect { animation-delay: 3400ms; }
.idx3.js-ready .idx3-stack__item.in .ediflo-channel:nth-child(4) rect { animation-delay: 4300ms; }
@keyframes edifloChannelPulse {
  0%, 100% { stroke-opacity: .55; }
  10%      { stroke-opacity: 1; }
  30%      { stroke-opacity: .65; }
}

/* Les lignes de l'entonnoir s'illuminent en cascade :
   le flux qui descend visuellement vers EDIFLO. */
.idx3.js-ready .idx3-stack__item.in .ediflo-funnel line {
  animation: edifloFunnelFlow 3.6s var(--ease) infinite;
}
.idx3.js-ready .idx3-stack__item.in .ediflo-funnel line:nth-child(1) { animation-delay: 1600ms; }
.idx3.js-ready .idx3-stack__item.in .ediflo-funnel line:nth-child(2) { animation-delay: 2500ms; }
.idx3.js-ready .idx3-stack__item.in .ediflo-funnel line:nth-child(3) { animation-delay: 3400ms; }
.idx3.js-ready .idx3-stack__item.in .ediflo-funnel line:nth-child(4) { animation-delay: 4300ms; }
@keyframes edifloFunnelFlow {
  0%, 100% { stroke-opacity: .35; }
  15%      { stroke-opacity: .9; }
  45%      { stroke-opacity: .35; }
}

/* EDIFLO pill : entree vPop, puis respiration continue */
.idx3.js-ready .idx3-stack__item.in .ediflo-pill {
  transform-box: fill-box;
  transform-origin: center;
  animation: vPop .8s var(--ease-out) backwards, edifloPillBreath 3.2s var(--ease) 2000ms infinite;
}
@keyframes edifloPillBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* Cible CII XML - "live status breathe", pas un pulse neon.
   Delay 2.4s = apres la fin du vPop (1100ms + 800ms = 1900ms)
   plus une petite respiration pour ne pas chevaucher */
.idx3.js-ready .idx3-stack__item.in .ediflo-target {
  transform-box: fill-box;
  transform-origin: center;
  animation: vPop .8s var(--ease-out) backwards, edifloTargetBreathe 4.4s var(--ease) 2400ms infinite;
}
@keyframes edifloTargetBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.018); }
}

/* Le ring de la cible "tend" subtilement quand le packet arrive
   (duree 2.8s = synchro packet, delay aligne) */
.idx3.js-ready .idx3-stack__item.in .ediflo-target__ring {
  animation: edifloRingTense 2.8s var(--ease-out) 2200ms infinite;
}
@keyframes edifloRingTense {
  0%, 70%, 100% { stroke-opacity: .85; stroke-width: 1; }
  82%           { stroke-opacity: 1;   stroke-width: 1.6; }
}

/* Hover sur l'article entier - on intensifie la cible
   (SMIL ne se hover pas, mais le ring CSS si) */
.idx3-stack__item:hover .ediflo-target__ring {
  stroke-opacity: 1;
  stroke-width: 1.4;
}
.idx3-stack__item:hover .ediflo-channel rect,
.idx3-stack__item:hover .ediflo-funnel line {
  stroke-opacity: 1;
}

/* Reduced motion : on coupe tout, les packets disparaissent,
   la cible reste statique mais visible */
@media (prefers-reduced-motion: reduce) {
  .idx3-stack__viz--ediflo .ediflo-channel rect,
  .idx3-stack__viz--ediflo .ediflo-funnel line,
  .idx3-stack__viz--ediflo .ediflo-pill,
  .idx3-stack__viz--ediflo .ediflo-target,
  .idx3-stack__viz--ediflo .ediflo-target__ring {
    animation: none !important;
  }
  .idx3-stack__viz--ediflo .ediflo-packet { display: none; }
}

/* ============================================================
   STACK VIZ - REEVIO LIVE CARD CYCLE
   La 3e card simule en boucle : avis qui arrive, etoiles qui
   s'allument une par une en or, badge IA fade-in, URGENT pop.
   Cycle 6s, cards 1/2/4 restent statiques en or.
   ============================================================ */

/* Etoiles individuelles : pop scale + opacity, staggered */
.idx3.js-ready .idx3-stack__item.in .reevio-star {
  transform-box: fill-box;
  transform-origin: center;
  animation: reevioStarBeat 6s var(--ease-out) 900ms backwards infinite;
}
.idx3.js-ready .idx3-stack__item.in .reevio-star[data-i="1"] { animation-delay: 900ms;  }
.idx3.js-ready .idx3-stack__item.in .reevio-star[data-i="2"] { animation-delay: 1150ms; }
.idx3.js-ready .idx3-stack__item.in .reevio-star[data-i="3"] { animation-delay: 1400ms; }
.idx3.js-ready .idx3-stack__item.in .reevio-star[data-i="4"] { animation-delay: 1650ms; }
.idx3.js-ready .idx3-stack__item.in .reevio-star[data-i="5"] { animation-delay: 1900ms; }
@keyframes reevioStarBeat {
  0%   { opacity: 0; transform: scale(0.5); }
  4%   { opacity: 1; transform: scale(1.6); }
  9%   { opacity: 1; transform: scale(1);   }
  82%  { opacity: 1; transform: scale(1);   }
  92%  { opacity: 0; transform: scale(1);   }
  100% { opacity: 0; transform: scale(1);   }
}

/* Badge "· IA réponse prête" : slide from right + fade */
.idx3.js-ready .idx3-stack__item.in .reevio-ai-badge {
  animation: reevioFadeSlide 6s var(--ease-out) 2200ms backwards infinite;
}
@keyframes reevioFadeSlide {
  0%   { opacity: 0; transform: translateX(10px); }
  6%   { opacity: 1; transform: translateX(0);    }
  82%  { opacity: 1; transform: translateX(0);    }
  92%  { opacity: 0; transform: translateX(0);    }
  100% { opacity: 0; transform: translateX(10px); }
}

/* Tag URGENT : pop scale apres l'IA badge */
.idx3.js-ready .idx3-stack__item.in .reevio-urgent {
  transform-box: fill-box;
  transform-origin: center;
  animation: reevioUrgentPop 6s var(--ease-out) 2600ms backwards infinite;
}
@keyframes reevioUrgentPop {
  0%   { opacity: 0; transform: scale(0.3); }
  4%   { opacity: 1; transform: scale(1.25); }
  9%   { opacity: 1; transform: scale(1);    }
  82%  { opacity: 1; transform: scale(1);    }
  92%  { opacity: 0; transform: scale(1);    }
  100% { opacity: 0; transform: scale(1);    }
}

/* Frame de la live card : glow bref au moment de la generation IA (~46%) */
.idx3.js-ready .idx3-stack__item.in .reevio-card-frame {
  animation: reevioFrameGlow 6s var(--ease) 900ms infinite;
}
@keyframes reevioFrameGlow {
  0%, 45%, 100% { stroke-opacity: 0.9; filter: drop-shadow(0 0 0 transparent); }
  48%           { stroke-opacity: 1;   filter: drop-shadow(0 0 8px rgba(88, 145, 199, 0.55)); }
  55%           { stroke-opacity: 0.9; filter: drop-shadow(0 0 0 transparent); }
}

/* Reduced motion : tout statique, on garde l'etat final visible */
@media (prefers-reduced-motion: reduce) {
  .idx3-stack__viz--reevio .reevio-star,
  .idx3-stack__viz--reevio .reevio-ai-badge,
  .idx3-stack__viz--reevio .reevio-urgent,
  .idx3-stack__viz--reevio .reevio-card-frame {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   STACK VIZ - NUDGI CADENCE SIMULATION
   L'enveloppe (en SMIL animateMotion) voyage le long de la
   timeline. Aux moments d'arrivee (1.5s R1, 3s R2, 4.5s ESCALADE),
   les milestones pulsent, les labels s'allument, le ✓ envoye
   apparait. Cycle global 6.5s.
   ============================================================ */

/* Pulse du milestone : passe d'unvisited (dim) a visited (bright) au moment du touch */
.idx3.js-ready .idx3-stack__item.in .nudgi-milestone--r1       { animation: nudgiMilestonePulse 6.5s var(--ease-out) 1495ms infinite; }
.idx3.js-ready .idx3-stack__item.in .nudgi-milestone--r2       { animation: nudgiMilestonePulse 6.5s var(--ease-out) 2990ms infinite; }
.idx3.js-ready .idx3-stack__item.in .nudgi-milestone--escalade { animation: nudgiMilestonePulse 6.5s var(--ease-out) 4485ms infinite; }
@keyframes nudgiMilestonePulse {
  0%   { r: 5; fill-opacity: 0.25; stroke-width: 1.2; }
  3%   { r: 8; fill-opacity: 0.9;  stroke-width: 2;   }
  10%  { r: 5; fill-opacity: 0.75; stroke-width: 1.2; }
  85%  { r: 5; fill-opacity: 0.75; stroke-width: 1.2; }
  95%  { r: 5; fill-opacity: 0.25; stroke-width: 1.2; }
  100% { r: 5; fill-opacity: 0.25; stroke-width: 1.2; }
}

/* Escalade : pulse legerement plus marquee (orange-tinted) */
.idx3.js-ready .idx3-stack__item.in .nudgi-milestone--escalade {
  animation: nudgiMilestoneEscalade 6.5s var(--ease-out) 4485ms infinite;
}
@keyframes nudgiMilestoneEscalade {
  0%   { r: 5;  fill: ##5891C7; fill-opacity: 0.25; stroke: ##5891C7; stroke-width: 1.2; }
  3%   { r: 10; fill: ##F5A66B; fill-opacity: 0.9;  stroke: ##F5A66B; stroke-width: 2;   }
  10%  { r: 6;  fill: ##F5A66B; fill-opacity: 0.7;  stroke: ##F5A66B; stroke-width: 1.4; }
  85%  { r: 6;  fill: ##F5A66B; fill-opacity: 0.7;  stroke: ##F5A66B; stroke-width: 1.4; }
  95%  { r: 5;  fill: ##5891C7; fill-opacity: 0.25; stroke: ##5891C7; stroke-width: 1.2; }
  100% { r: 5;  fill: ##5891C7; fill-opacity: 0.25; stroke: ##5891C7; stroke-width: 1.2; }
}

/* Labels (FACTURE/R1/R2/ESCALADE) s'allument quand l'enveloppe passe */
.idx3.js-ready .idx3-stack__item.in .nudgi-label--r1       { animation: nudgiLabelLight 6.5s var(--ease-out) 1495ms infinite; }
.idx3.js-ready .idx3-stack__item.in .nudgi-label--r2       { animation: nudgiLabelLight 6.5s var(--ease-out) 2990ms infinite; }
.idx3.js-ready .idx3-stack__item.in .nudgi-label--escalade { animation: nudgiLabelEscalade 6.5s var(--ease-out) 4485ms infinite; }
@keyframes nudgiLabelLight {
  0%   { fill: ##6B6F78; }
  4%   { fill: ##ECECEC; }
  85%  { fill: ##ECECEC; }
  95%  { fill: ##6B6F78; }
  100% { fill: ##6B6F78; }
}
@keyframes nudgiLabelEscalade {
  0%   { fill: ##6B6F78; }
  4%   { fill: ##F5A66B; }
  85%  { fill: ##F5A66B; }
  95%  { fill: ##6B6F78; }
  100% { fill: ##6B6F78; }
}

/* Dates (J+7, J+21, J+45) : passent de fill-opacity .5 a 1 quand actives */
.idx3.js-ready .idx3-stack__item.in .nudgi-date--r1       { animation: nudgiDateLight 6.5s var(--ease-out) 1495ms infinite; }
.idx3.js-ready .idx3-stack__item.in .nudgi-date--r2       { animation: nudgiDateLight 6.5s var(--ease-out) 2990ms infinite; }
.idx3.js-ready .idx3-stack__item.in .nudgi-date--escalade { animation: nudgiDateLight 6.5s var(--ease-out) 4485ms infinite; }
@keyframes nudgiDateLight {
  0%, 100% { fill-opacity: 0.5; }
  4%, 85%  { fill-opacity: 1;   }
  95%      { fill-opacity: 0.5; }
}

/* "✓ envoyé" / "↯ HUISSIER" : fade in depuis le bas, hold, fade out */
.idx3.js-ready .idx3-stack__item.in .nudgi-sent--r1       { animation: nudgiSentReveal 6.5s var(--ease-out) 1495ms infinite; }
.idx3.js-ready .idx3-stack__item.in .nudgi-sent--r2       { animation: nudgiSentReveal 6.5s var(--ease-out) 2990ms infinite; }
.idx3.js-ready .idx3-stack__item.in .nudgi-sent--escalade { animation: nudgiSentReveal 6.5s var(--ease-out) 4485ms infinite; }
.idx3-stack__viz--nudgi .nudgi-sent {
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes nudgiSentReveal {
  0%   { opacity: 0; transform: translateY(4px); }
  5%   { opacity: 1; transform: translateY(0);   }
  82%  { opacity: 1; transform: translateY(0);   }
  92%  { opacity: 0; transform: translateY(0);   }
  100% { opacity: 0; transform: translateY(4px); }
}

/* Reduced motion : tout statique */
@media (prefers-reduced-motion: reduce) {
  .idx3-stack__viz--nudgi .nudgi-milestone,
  .idx3-stack__viz--nudgi .nudgi-label,
  .idx3-stack__viz--nudgi .nudgi-date,
  .idx3-stack__viz--nudgi .nudgi-sent {
    animation: none !important;
  }
  .idx3-stack__viz--nudgi .nudgi-sent { opacity: 1 !important; transform: none !important; }
  .idx3-stack__viz--nudgi .nudgi-envelope,
  .idx3-stack__viz--nudgi .nudgi-progress { display: none; }
}

/* ============================================================
   STACK VIZ - REEKIA
   COACH genere un WOD par IA en direct, cycle 8s.
   Tous les elements partagent le meme cycle 8s, chacun encode
   sa propre fenetre de visibilite dans ses keyframes.
   BACK et MEMBRE respirent doucement.
   ============================================================ */

/* Pulse soft sur les pastilles BACK et MEMBRE */
.idx3.js-ready .idx3-stack__item.in .idx3-stack__viz--reekia .reekia-pulse-soft {
  transform-box: fill-box;
  transform-origin: center;
  animation: reekiaPulseSoft 3.4s var(--ease) infinite;
}
@keyframes reekiaPulseSoft {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.06); }
}

/* Tous les elements de la card COACH partagent ce timing 8s */
.idx3.js-ready .idx3-stack__item.in .reekia-loading,
.idx3.js-ready .idx3-stack__item.in .reekia-wod,
.idx3.js-ready .idx3-stack__item.in .reekia-divider,
.idx3.js-ready .idx3-stack__item.in .reekia-equip,
.idx3.js-ready .idx3-stack__item.in .reekia-ready-badge {
  animation-duration: 8s;
  animation-iteration-count: infinite;
  animation-timing-function: var(--ease-out);
}
.idx3.js-ready .idx3-stack__item.in .reekia-wod,
.idx3.js-ready .idx3-stack__item.in .reekia-equip,
.idx3.js-ready .idx3-stack__item.in .reekia-ready-badge {
  transform-box: fill-box;
  transform-origin: center;
}

/* Loading "IA · génération..." : visible 8% à 38% (640ms → 3040ms) */
.idx3.js-ready .idx3-stack__item.in .reekia-loading { animation-name: reekiaLoadingCycle; }
@keyframes reekiaLoadingCycle {
  0%, 5%, 42%, 100% { opacity: 0; }
  10%, 38%          { opacity: 1; }
}

/* WOD line 1 : 34% → 88% (2720ms → 7040ms) */
.idx3.js-ready .idx3-stack__item.in .reekia-wod--1 { animation-name: reekiaWod1; }
@keyframes reekiaWod1 {
  0%, 32%   { opacity: 0; transform: translateY(4px); }
  36%, 88%  { opacity: 1; transform: translateY(0);   }
  92%, 100% { opacity: 0; transform: translateY(0);   }
}

/* WOD line 2 : 39% → 88% */
.idx3.js-ready .idx3-stack__item.in .reekia-wod--2 { animation-name: reekiaWod2; }
@keyframes reekiaWod2 {
  0%, 37%   { opacity: 0; transform: translateY(4px); }
  41%, 88%  { opacity: 1; transform: translateY(0);   }
  92%, 100% { opacity: 0; transform: translateY(0);   }
}

/* WOD line 3 : 44% → 88% */
.idx3.js-ready .idx3-stack__item.in .reekia-wod--3 { animation-name: reekiaWod3; }
@keyframes reekiaWod3 {
  0%, 42%   { opacity: 0; transform: translateY(4px); }
  46%, 88%  { opacity: 1; transform: translateY(0);   }
  92%, 100% { opacity: 0; transform: translateY(0);   }
}

/* WOD line 4 : 49% → 88% */
.idx3.js-ready .idx3-stack__item.in .reekia-wod--4 { animation-name: reekiaWod4; }
@keyframes reekiaWod4 {
  0%, 47%   { opacity: 0; transform: translateY(4px); }
  51%, 88%  { opacity: 1; transform: translateY(0);   }
  92%, 100% { opacity: 0; transform: translateY(0);   }
}

/* Divider : 53% → 88% */
.idx3.js-ready .idx3-stack__item.in .reekia-divider { animation-name: reekiaDividerCycle; }
@keyframes reekiaDividerCycle {
  0%, 51%, 92%, 100% { opacity: 0; }
  55%, 88%           { opacity: 1; }
}

/* Equipement KB : 56% (pop scale puis hold) */
.idx3.js-ready .idx3-stack__item.in .reekia-equip--kb { animation-name: reekiaKb; }
@keyframes reekiaKb {
  0%, 54%   { opacity: 0; transform: scale(0.5); }
  58%       { opacity: 1; transform: scale(1.35); }
  62%, 88%  { opacity: 1; transform: scale(1);   }
  92%, 100% { opacity: 0; transform: scale(1);   }
}

/* Equipement BOX : 59% */
.idx3.js-ready .idx3-stack__item.in .reekia-equip--box { animation-name: reekiaBox; }
@keyframes reekiaBox {
  0%, 57%   { opacity: 0; transform: scale(0.5); }
  61%       { opacity: 1; transform: scale(1.35); }
  65%, 88%  { opacity: 1; transform: scale(1);   }
  92%, 100% { opacity: 0; transform: scale(1);   }
}

/* Equipement ROPE : 62% */
.idx3.js-ready .idx3-stack__item.in .reekia-equip--rope { animation-name: reekiaRope; }
@keyframes reekiaRope {
  0%, 60%   { opacity: 0; transform: scale(0.5); }
  64%       { opacity: 1; transform: scale(1.35); }
  68%, 88%  { opacity: 1; transform: scale(1);   }
  92%, 100% { opacity: 0; transform: scale(1);   }
}

/* "✓ PRÊT" badge : 66% (apparition fin de cycle, hold long) */
.idx3.js-ready .idx3-stack__item.in .reekia-ready-badge { animation-name: reekiaReady; }
@keyframes reekiaReady {
  0%, 64%   { opacity: 0; transform: scale(0.5); }
  68%       { opacity: 1; transform: scale(1.4); }
  72%, 88%  { opacity: 1; transform: scale(1);   }
  92%, 100% { opacity: 0; transform: scale(1);   }
}

/* Reduced motion : tout figé */
@media (prefers-reduced-motion: reduce) {
  .idx3-stack__viz--reekia .reekia-pulse-soft,
  .idx3-stack__viz--reekia .reekia-loading,
  .idx3-stack__viz--reekia .reekia-wod,
  .idx3-stack__viz--reekia .reekia-divider,
  .idx3-stack__viz--reekia .reekia-equip,
  .idx3-stack__viz--reekia .reekia-ready-badge {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   STACK VIZ - FIABLI
   Trois enveloppes traversent le pipeline d'analyse en boucle
   (cycles 6s, decalees de 2s). A chaque passage les 3 boxes
   d'analyse pulsent, et le verdict correspondant (LEGIT, SPAM,
   PHISHING) s'allume a l'arrivee.
   ============================================================ */

/* Funnel : pulse stroke continue */
.idx3.js-ready .idx3-stack__item.in .fiabli-funnel {
  animation: fiabliFunnelGlow 2s var(--ease-out) infinite;
}
@keyframes fiabliFunnelGlow {
  0%, 100% { stroke-opacity: 0.55; }
  25%      { stroke-opacity: 1;    }
  50%      { stroke-opacity: 0.55; }
}

/* Boxes d'analyse : pulsent à chaque envelope qui passe (cycle 2s) */
.idx3.js-ready .idx3-stack__item.in .fiabli-box {
  transform-box: fill-box;
  transform-origin: center;
  animation: fiabliBoxBeat 2s var(--ease-out) infinite;
}
.idx3.js-ready .idx3-stack__item.in .fiabli-box--header { animation-delay: 0ms;   }
.idx3.js-ready .idx3-stack__item.in .fiabli-box--claude { animation-delay: 120ms; }
.idx3.js-ready .idx3-stack__item.in .fiabli-box--url    { animation-delay: 240ms; }
@keyframes fiabliBoxBeat {
  0%, 100% { transform: scale(1);    }
  20%      { transform: scale(1.06); filter: drop-shadow(0 0 6px rgba(88, 145, 199, 0.5)); }
  35%      { transform: scale(1);    filter: drop-shadow(0 0 0 transparent); }
}

/* Verdict chips : dim par defaut, pulse a l'arrivee de l'enveloppe
   correspondante. Cycle 6s, peak ~28% (1.68s = arrivee).
   - LEGIT : begin 0s   → peak a 1.68s
   - SPAM  : begin 2s   → peak a 3.68s
   - PHISH : begin 4s   → peak a 5.68s
*/
.idx3.js-ready .idx3-stack__item.in .fiabli-verdict {
  transform-box: fill-box;
  transform-origin: center;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: var(--ease-out);
}
.idx3.js-ready .idx3-stack__item.in .fiabli-verdict--legit { animation-name: fiabliVerdictPulse; animation-delay: 0s; }
.idx3.js-ready .idx3-stack__item.in .fiabli-verdict--spam  { animation-name: fiabliVerdictPulse; animation-delay: 2s; }
.idx3.js-ready .idx3-stack__item.in .fiabli-verdict--phish { animation-name: fiabliVerdictPulse; animation-delay: 4s; }
@keyframes fiabliVerdictPulse {
  0%, 25%  { transform: scale(1); }
  29%      { transform: scale(1.15); }
  35%, 60% { transform: scale(1.02); }
  72%      { transform: scale(1); }
  100%     { transform: scale(1); }
}

/* Le rect du verdict : remplissage qui s'eclaire au passage */
.idx3.js-ready .idx3-stack__item.in .fiabli-verdict rect {
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: var(--ease-out);
}
.idx3.js-ready .idx3-stack__item.in .fiabli-verdict--legit rect { animation-name: fiabliVerdictRectGreen;  animation-delay: 0s; }
.idx3.js-ready .idx3-stack__item.in .fiabli-verdict--spam rect  { animation-name: fiabliVerdictRectOrange; animation-delay: 2s; }
.idx3.js-ready .idx3-stack__item.in .fiabli-verdict--phish rect { animation-name: fiabliVerdictRectRed;    animation-delay: 4s; }
@keyframes fiabliVerdictRectGreen {
  0%, 25%, 75%, 100% { fill-opacity: 0.08; stroke-opacity: 0.5; }
  29%                { fill-opacity: 0.4;  stroke-opacity: 1;   }
  45%, 65%           { fill-opacity: 0.2;  stroke-opacity: 0.85; }
}
@keyframes fiabliVerdictRectOrange {
  0%, 25%, 75%, 100% { fill-opacity: 0.08; stroke-opacity: 0.5; }
  29%                { fill-opacity: 0.4;  stroke-opacity: 1;   }
  45%, 65%           { fill-opacity: 0.2;  stroke-opacity: 0.85; }
}
@keyframes fiabliVerdictRectRed {
  0%, 25%, 75%, 100% { fill-opacity: 0.08; stroke-opacity: 0.5; }
  29%                { fill-opacity: 0.5;  stroke-opacity: 1;   }
  45%, 65%           { fill-opacity: 0.25; stroke-opacity: 0.85; }
}

/* Reduced motion : tout figé */
@media (prefers-reduced-motion: reduce) {
  .idx3-stack__viz--fiabli .fiabli-funnel,
  .idx3-stack__viz--fiabli .fiabli-box,
  .idx3-stack__viz--fiabli .fiabli-verdict,
  .idx3-stack__viz--fiabli .fiabli-verdict rect {
    animation: none !important;
    transform: none !important;
  }
  .idx3-stack__viz--fiabli .fiabli-mail { display: none; }
}

/* ============================================================
   6) SUR-MESURE EDITORIAL — magazine-style asymmetric
   ============================================================ */
.idx3-bespoke {
  padding: clamp(80px, 12vw, 160px) clamp(24px, 5vw, 80px);
  border-top: 1px solid var(--line);
  position: relative;
}
.idx3-bespoke__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(80px, 10vw, 140px);
}
.idx3-bespoke__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 120px);
  line-height: .95;
  letter-spacing: -0.03em;
  margin: 0;
}
.idx3-bespoke__title em {
  font-style: italic;
  color: var(--lume-1);
}
.idx3-bespoke__intro {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 50ch;
}
.idx3-bespoke__intro .tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--lume-1);
  margin-bottom: 20px;
}

.idx3-bespoke__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  row-gap: 80px;
}

.idx3-sector {
  position: relative;
  border-top: 1px solid var(--line);
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.idx3-sector--lg { grid-column: span 7; }
.idx3-sector--md { grid-column: span 5; }
.idx3-sector--sm { grid-column: span 4; }

.idx3-sector__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--lume-1);
}
.idx3-sector__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink-1);
}
.idx3-sector__desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.idx3-sector__numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
  margin-top: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.idx3-sector__numbers > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.idx3-sector__numbers strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 28px);
  color: var(--lume-1);
}
.idx3-sector__numbers span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.idx3-sector__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.idx3-sector__tags span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* ============================================================
   7) AI ARCHITECTURE — diagramme SVG complexe scroll-reveal
   ============================================================ */
.idx3-ai {
  padding: clamp(80px, 12vw, 140px) clamp(24px, 5vw, 80px);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--noir-0) 0%, var(--noir-1) 30%, var(--noir-1) 70%, var(--noir-0) 100%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.idx3-ai::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 50%, rgba(88,145,199,.05) 0%, transparent 60%);
}
.idx3-ai__header {
  text-align: center;
  margin-bottom: clamp(64px, 8vw, 100px);
}
.idx3-ai__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--lume-1);
  margin-bottom: 24px;
  display: inline-block;
}
.idx3-ai__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 88px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
}
.idx3-ai__title em { font-style: italic; color: var(--lume-1); }
.idx3-ai__lead {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 64ch;
  margin: 0 auto;
}

.idx3-ai__diagram {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16 / 10;
}
.idx3-ai__diagram svg {
  width: 100%;
  height: 100%;
}
.idx3-ai__diagram .node-box {
  transform-box: fill-box;
  transform-origin: center;
}
.idx3.js-ready .idx3-ai__diagram.in .node-box { animation: aiNode 1s var(--ease-out) backwards; }
@keyframes aiNode {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.idx3-ai__diagram.in .node-box[data-step="1"] { transition-delay: 100ms; }
.idx3-ai__diagram.in .node-box[data-step="2"] { transition-delay: 300ms; }
.idx3-ai__diagram.in .node-box[data-step="3"] { transition-delay: 500ms; }
.idx3-ai__diagram.in .node-box[data-step="4"] { transition-delay: 700ms; }
.idx3-ai__diagram.in .node-box[data-step="5"] { transition-delay: 900ms; }
.idx3-ai__diagram.in .node-box[data-step="6"] { transition-delay: 1100ms; }
.idx3-ai__diagram.in .node-box[data-step="7"] { transition-delay: 1300ms; }

.idx3-ai__diagram .edge { /* visible par défaut */ }
.idx3.js-ready .idx3-ai__diagram.in .edge { animation: aiEdge 1.5s var(--ease-out) backwards; stroke-dasharray: 800; }
@keyframes aiEdge { from { stroke-dashoffset: 800; } to { stroke-dashoffset: 0; } }
.idx3-ai__diagram.in .edge[data-step="1"] { transition-delay: 200ms; }
.idx3-ai__diagram.in .edge[data-step="2"] { transition-delay: 400ms; }
.idx3-ai__diagram.in .edge[data-step="3"] { transition-delay: 600ms; }
.idx3-ai__diagram.in .edge[data-step="4"] { transition-delay: 800ms; }
.idx3-ai__diagram.in .edge[data-step="5"] { transition-delay: 1000ms; }
.idx3-ai__diagram.in .edge[data-step="6"] { transition-delay: 1200ms; }

.idx3-ai__diagram .data-flow {
  animation: dataFlow 3s linear infinite;
  opacity: 0;
}
.idx3-ai__diagram.in .data-flow { opacity: 1; }
@keyframes dataFlow {
  to { stroke-dashoffset: -100; }
}

/* ------------------------------------------------------------
   Diagramme pleine largeur : routeur IA (remplace le bloc code)
   ------------------------------------------------------------ */
.idx3-ai__diagram--wide {
  max-width: 1280px;
  aspect-ratio: 1400 / 680;
  margin: 0 auto clamp(64px, 8vw, 100px);
  padding: 0 clamp(0px, 2vw, 24px);
}

/* zones (LAN, internet) — révèlent en fondu */
.idx3-ai__diagram--wide .idx3-ai__zone rect,
.idx3-ai__diagram--wide .idx3-ai__zone text {
  opacity: 0;
}
.idx3.js-ready .idx3-ai__diagram--wide.in .idx3-ai__zone rect,
.idx3.js-ready .idx3-ai__diagram--wide.in .idx3-ai__zone text {
  animation: aiFade 1.2s var(--ease-out) forwards;
}
.idx3.js-ready .idx3-ai__diagram--wide.in .idx3-ai__zone:nth-of-type(1) rect,
.idx3.js-ready .idx3-ai__diagram--wide.in .idx3-ai__zone:nth-of-type(1) text { animation-delay: 60ms; }
.idx3.js-ready .idx3-ai__diagram--wide.in .idx3-ai__zone:nth-of-type(2) rect,
.idx3.js-ready .idx3-ai__diagram--wide.in .idx3-ai__zone:nth-of-type(2) text { animation-delay: 240ms; }

/* nodes — fix du staggering : animation-delay (et non transition-delay) */
.idx3.js-ready .idx3-ai__diagram--wide.in .node-box[data-step="1"] { animation-delay: 320ms; }
.idx3.js-ready .idx3-ai__diagram--wide.in .node-box[data-step="2"] { animation-delay: 480ms; }
.idx3.js-ready .idx3-ai__diagram--wide.in .node-box[data-step="3"] { animation-delay: 720ms; }
.idx3.js-ready .idx3-ai__diagram--wide.in .node-box[data-step="4"] { animation-delay: 880ms; }
.idx3.js-ready .idx3-ai__diagram--wide.in .node-box[data-step="5"] { animation-delay: 1040ms; }
.idx3.js-ready .idx3-ai__diagram--wide.in .node-box[data-step="6"] { animation-delay: 1200ms; }

/* arcs : tracé progressif */
.idx3-ai__diagram--wide .idx3-ai__edge {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
.idx3.js-ready .idx3-ai__diagram--wide.in .idx3-ai__edge {
  animation: aiDraw 1.1s var(--ease-out) forwards;
}
@keyframes aiDraw { to { stroke-dashoffset: 0; } }
.idx3.js-ready .idx3-ai__diagram--wide.in .idx3-ai__edge[data-step="1"] { animation-delay: 420ms; }
.idx3.js-ready .idx3-ai__diagram--wide.in .idx3-ai__edge[data-step="2"] { animation-delay: 800ms; }
.idx3.js-ready .idx3-ai__diagram--wide.in .idx3-ai__edge[data-step="3"] { animation-delay: 960ms; }
.idx3.js-ready .idx3-ai__diagram--wide.in .idx3-ai__edge[data-step="4"] { animation-delay: 1280ms; }
.idx3.js-ready .idx3-ai__diagram--wide.in .idx3-ai__edge[data-step="5"] { animation-delay: 1120ms; }

/* étiquettes des arcs : apparaissent une fois le tracé fait */
.idx3-ai__diagram--wide g[font-family] text { opacity: 0; }
.idx3.js-ready .idx3-ai__diagram--wide.in g[font-family] text {
  animation: aiFade 0.9s var(--ease-out) 1500ms forwards;
}

/* ligne d'audit */
.idx3-ai__diagram--wide .idx3-ai__audit line,
.idx3-ai__diagram--wide .idx3-ai__audit text { opacity: 0; }
.idx3.js-ready .idx3-ai__diagram--wide.in .idx3-ai__audit line,
.idx3.js-ready .idx3-ai__diagram--wide.in .idx3-ai__audit text {
  animation: aiFade 1.2s var(--ease-out) 1800ms forwards;
}

/* packets : restent invisibles tant que la révélation n'est pas faite */
.idx3-ai__diagram--wide .idx3-ai__packets { opacity: 0; transition: opacity 0.6s var(--ease-out) 1.4s; }
.idx3-ai__diagram--wide.in .idx3-ai__packets { opacity: 1; }

@keyframes aiFade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .idx3-ai__diagram--wide .idx3-ai__zone rect,
  .idx3-ai__diagram--wide .idx3-ai__zone text,
  .idx3-ai__diagram--wide g[font-family] text,
  .idx3-ai__diagram--wide .idx3-ai__audit line,
  .idx3-ai__diagram--wide .idx3-ai__audit text { opacity: 1; animation: none; }
  .idx3-ai__diagram--wide .idx3-ai__edge { stroke-dashoffset: 0; animation: none; }
  .idx3-ai__diagram--wide .idx3-ai__packets { opacity: 1; }
  .idx3-ai__diagram--wide .idx3-ai__packets circle animateMotion { display: none; }
}

@media (max-width: 900px) {
  .idx3-ai__diagram--wide { aspect-ratio: 1400 / 800; }
}

.idx3-ai__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  max-width: 1280px;
  margin: clamp(64px, 8vw, 100px) auto 0;
}
.idx3-ai__fact {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(28,31,35,.4);
  backdrop-filter: blur(10px);
}
.idx3-ai__fact-num {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1;
  font-weight: 400;
  color: var(--lume-1);
  margin-bottom: 16px;
}
.idx3-ai__fact-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.idx3-ai__fact-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* ============================================================
   8) EDITORIAL "POURQUOI" — long-form typographique
   ============================================================ */
.idx3-editorial {
  padding: clamp(80px, 12vw, 140px) clamp(24px, 5vw, 80px);
  border-top: 1px solid var(--line);
  max-width: 1280px;
  margin: 0 auto;
}
.idx3-editorial__pre {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--lume-1);
  margin-bottom: 48px;
}
.idx3-editorial__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 80px;
  max-width: 18ch;
}
.idx3-editorial__title em { font-style: italic; color: var(--lume-1); }
.idx3-editorial__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
}
.idx3-editorial__body p {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.55;
  color: var(--ink-1);
  margin: 0 0 32px;
}
.idx3-editorial__body p:last-child { margin-bottom: 0; }
.idx3-editorial__body em {
  font-style: italic;
  color: var(--lume-3);
}
.idx3-editorial__body strong {
  font-weight: 500;
  color: var(--ink-1);
  border-bottom: 1px solid var(--lume-1);
}

/* ============================================================
   9) FINAL CTA — bloc dramatique
   ============================================================ */
.idx3-finalcta {
  position: relative;
  padding: clamp(80px, 12vw, 140px) clamp(24px, 5vw, 80px);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--noir-0) 0%, var(--noir-1) 30%, var(--noir-1) 70%, var(--noir-0) 100%);
}
.idx3-finalcta::before {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: -1;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    var(--lume-2) 20%,
    var(--lume-1) 30%,
    var(--lume-3) 40%,
    transparent 50%,
    transparent 100%
  );
  opacity: .12;
  filter: blur(100px);
  animation: spinSlow 40s linear infinite;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }
.idx3-finalcta__pre {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--lume-1);
  margin-bottom: 40px;
}
.idx3-finalcta__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 auto 40px;
  max-width: 22ch;
}
.idx3-finalcta__title em {
  font-style: italic;
  background: linear-gradient(180deg, var(--lume-3), var(--lume-1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.idx3-finalcta__lead {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 54ch;
  margin: 0 auto 56px;
}
.idx3-finalcta__cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .idx3-principle { grid-template-columns: 1fr; gap: 48px; }
  .idx3-principle:nth-child(odd) .idx3-principle__viz { order: 0; }
  .idx3-stats { grid-template-columns: repeat(2, 1fr); }
  .idx3-stack__item { grid-template-columns: 1fr; padding: 32px; min-height: auto; }
  .idx3-bespoke__header { grid-template-columns: 1fr; gap: 24px; }
  .idx3-bespoke__grid { grid-template-columns: 1fr; gap: 48px; }
  .idx3-sector--lg, .idx3-sector--md, .idx3-sector--sm { grid-column: 1; }
  .idx3-ai__facts { grid-template-columns: 1fr; }
  .idx3-editorial__body { grid-template-columns: 1fr; gap: 24px; }
  .idx3-hero__top { display: none; }
}

@media (max-width: 640px) {
  .idx3-stats { grid-template-columns: 1fr; }
  .idx3-hero__word { font-size: clamp(48px, 14vw, 88px); }
}

@media (prefers-reduced-motion: reduce) {
  .idx3 *,
  .idx3 *::before,
  .idx3 *::after {
    animation: none !important;
    transition: none !important;
  }
  .idx3 .r { opacity: 1; transform: none; }
  .idx3-hero__word-mask { transform: none; }
}

/* ============================================================
   RESPONSIVE GRIDS (mobile stack)
   Override des styles inline `grid-template-columns` quand
   l'écran est trop étroit pour 2 colonnes lisibles.
   ============================================================ */
@media (max-width: 768px) {
  /* Sections "01 · Positionnement" SaaS (texte | tableau, 1.4fr 1fr)
     → 1 colonne, tableau (aside) au-dessus du texte */
  .idx3-page-section__body > div[style*="1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .idx3-page-section__body > div[style*="1.4fr 1fr"] > aside {
    order: -1;
  }

  /* Contact (aside coordonnées | formulaire, 1fr 1.4fr)
     → 1 colonne, ordre HTML naturel */
  .idx3-page-section__body > div[style*="1fr 1.4fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Sections SaaS 2 colonnes égales (stack technique, métriques) */
  .idx3-page-section__body[style*="1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* index.cfm : bloc code routeur 2 colonnes (1fr 1fr, max 1280px) */
  .idx3-ai > div[style*="1fr 1fr"][style*="1280px"] {
    grid-template-columns: 1fr !important;
  }

  /* Le tableau de comparaison reekia/reevio peut déborder horizontalement */
  .idx3-compare {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* En très petit écran, les rows du stack-panel (200px + 1fr) débordent.
   On passe sur 1 colonne : la clef au-dessus de la valeur. */
@media (max-width: 540px) {
  .idx3-stack-panel__row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 14px 20px !important;
  }
}

/* ============================================================
   FRISE 1995 → 2026 — version mobile (timeline verticale)
   La version desktop place 7 markers en `left: X%` avec
   labels en absolute, illisibles en mobile (chevauchements).
   On bascule en liste verticale alignée sur une barre gauche.
   Le dot devient un ::before, le label revient en flow.
   ============================================================ */
@media (max-width: 768px) {
  .idx3-yearband__line {
    height: auto !important;
    background: none !important;
    margin: 32px 12px 16px !important;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 8px 0 8px 24px;
    border-left: 1.5px solid var(--lume-1);
    transform: none !important;
    transition: none !important;
  }
  .idx3-yearband__marker {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    width: auto;
    height: auto;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    cursor: default;
    padding-left: 6px;
  }
  .idx3-yearband__marker::before {
    content: "";
    position: absolute;
    top: 5px;
    left: -29px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--noir-0);
    border: 1.5px solid var(--lume-1);
  }
  .idx3-yearband__marker--pulse::before {
    background: var(--lume-1);
    box-shadow: 0 0 8px var(--lume-glow);
  }
  .idx3-yearband__marker--pulse { animation: none !important; }
  .idx3-yearband__marker:hover { transform: none !important; }
  .idx3-yearband__label {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    text-align: left !important;
    white-space: normal;
    max-width: none;
    font-size: 13px;
    line-height: 1.5;
  }
  .idx3-yearband__label strong {
    display: inline;
    margin-right: 10px;
  }
  .idx3-yearband__label br { display: none; }
  /* Override de l'animation desktop (scaleX horizontal) */
  .idx3.js-ready .idx3-yearband:not(.in) .idx3-yearband__line,
  .idx3.js-ready .idx3-yearband:not(.in) .idx3-yearband__marker {
    transform: none !important;
    opacity: 1 !important;
  }
  /* Couche cinematique desktop : on coupe tout en mobile */
  .idx3-yearband__line::before,
  .idx3-yearband__line::after { display: none !important; }
  .idx3-yearband__marker::before {
    animation: none !important;
    /* on reaffirme le dot mobile (pas le shockwave desktop) */
    z-index: auto !important;
  }
  .idx3-yearband__marker::after {
    display: none !important;
  }
  .idx3.js-ready .idx3-yearband.in .idx3-yearband__marker,
  .idx3.js-ready .idx3-yearband.in .idx3-yearband__marker--pulse,
  .idx3.js-ready .idx3-yearband.in .idx3-yearband__label,
  .idx3.js-ready .idx3-yearband.in .idx3-yearband__label strong,
  .idx3-yearband.is-frise-landed .idx3-yearband__line::before,
  .idx3-yearband.is-frise-landed .idx3-yearband__marker--pulse,
  .idx3-yearband.is-frise-landed .idx3-yearband__marker--pulse .idx3-yearband__label strong::after {
    animation: none !important;
    opacity: 1 !important;
  }
  .idx3-yearband__marker--pulse .idx3-yearband__label strong::after { display: none !important; }
}