/* ============================================================
   ia.css - animations specifiques a /ia/
   Narratif : "Tout passe par un routeur. Pas de chemin de
   contournement." Le routeur est le coeur visuel.

   Skills appliques :
   - impeccable : art direction propre a la page (pas de pattern
     uniforme par type de bloc, identite narrative IA)
   - emil-design-eng : clip-path, blur-in, easings custom punchy,
     line-by-line code reveal, durees ≤ 1.1s
   - taste-skill : perpetual micro-interactions (packets routeur),
     anti-neon (glow subtil), status indicators

   Toutes les animations sont scopees a .page-ia pour ne pas
   impacter les autres pages.
   ============================================================ */

.page-ia {
  --ia-ease-out: cubic-bezier(.23, 1, .32, 1);
  --ia-ease-io: cubic-bezier(.77, 0, .175, 1);
}

/* ------------------------------------------------------------
   HERO - radar sweep perpetuel + barricade sur "n'envoie pas"
   ------------------------------------------------------------ */

/* Mesh du hero - rotation lente perpetuel (radar sweep) */
.page-ia .idx3-page-hero__mesh {
  animation: iaRadarSweep 24s linear infinite;
  transform-origin: center;
}
@keyframes iaRadarSweep {
  to { transform: rotate(360deg); }
}

/* Titre : clip-path reveal du HAUT vers le bas (curtain descend) */
.page-ia .idx3-page-hero__title {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  animation: iaTitleReveal 1.1s var(--ia-ease-out) 200ms forwards;
}
@keyframes iaTitleReveal {
  0%   { clip-path: inset(0 0 100% 0); opacity: 0; }
  15%  { opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* Em "n'envoie pas" - effet barricade : un trait barre se trace
   par dessus comme un sceau "non". Decale -3deg pour casser
   l'horizontale, signature non-AI-slop. */
.page-ia .idx3-page-hero__title em {
  position: relative;
  display: inline-block;
}
.page-ia .idx3-page-hero__title em::after {
  content: "";
  position: absolute;
  left: 0; top: 52%;
  width: 0;
  height: 2px;
  background: var(--lume-1);
  transform: rotate(-3deg);
  transform-origin: left center;
  animation: iaBarricade .65s var(--ia-ease-out) 1400ms forwards;
}
@keyframes iaBarricade {
  to { width: 108%; }
}

/* Lead : blur-in apres le titre */
.page-ia .idx3-page-hero__lead {
  opacity: 0;
  filter: blur(6px);
  animation: iaLeadBlur .9s var(--ia-ease-out) 800ms forwards;
}
@keyframes iaLeadBlur {
  to { opacity: 1; filter: blur(0); }
}

/* Meta items : style HUD - slide depuis la droite en cascade
   apres le lead (effet console de cockpit qui s'allume) */
.page-ia .idx3-page-hero__meta > div {
  opacity: 0;
  transform: translateX(20px);
  animation: iaMetaIn .55s var(--ia-ease-out) forwards;
}
.page-ia .idx3-page-hero__meta > div:nth-child(1) { animation-delay: 1100ms; }
.page-ia .idx3-page-hero__meta > div:nth-child(2) { animation-delay: 1180ms; }
.page-ia .idx3-page-hero__meta > div:nth-child(3) { animation-delay: 1260ms; }
.page-ia .idx3-page-hero__meta > div:nth-child(4) { animation-delay: 1340ms; }
.page-ia .idx3-page-hero__meta > div:nth-child(5) { animation-delay: 1420ms; }
@keyframes iaMetaIn {
  to { opacity: 1; transform: translateX(0); }
}

/* ------------------------------------------------------------
   FACTS ROW - chiffres en stagger scale + count-up feel
   ------------------------------------------------------------ */
.page-ia .idx3-facts-row > div {
  opacity: 0;
  transform: scale(.9);
  transition:
    opacity .55s var(--ia-ease-out),
    transform .55s var(--ia-ease-out);
}
.page-ia .idx3-facts-row.in > div { opacity: 1; transform: scale(1); }
.page-ia .idx3-facts-row.in > div:nth-child(1) { transition-delay: 100ms; }
.page-ia .idx3-facts-row.in > div:nth-child(2) { transition-delay: 200ms; }
.page-ia .idx3-facts-row.in > div:nth-child(3) { transition-delay: 300ms; }
.page-ia .idx3-facts-row.in > div:nth-child(4) { transition-delay: 400ms; }
.page-ia .idx3-facts-row.in > div:nth-child(5) { transition-delay: 500ms; }

/* ------------------------------------------------------------
   ARCHITECTURE STAGE — prose à gauche, schéma compact à droite
   ------------------------------------------------------------ */
.page-ia .ia-archi-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
  margin-bottom: clamp(64px, 8vw, 96px);
}
@media (max-width: 880px) {
  .page-ia .ia-archi-stage { grid-template-columns: 1fr; gap: 48px; }
}

.page-ia .ia-archi-stage__text { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.page-ia .ia-archi-stage__text p { margin: 0 0 20px; }
.page-ia .ia-archi-stage__text p:last-child { margin-bottom: 0; }
.page-ia .ia-archi-stage__text strong { color: var(--ink-1); font-weight: 500; }
.page-ia .ia-archi-stage__text em { color: var(--lume-3); font-style: italic; }
.page-ia .ia-archi-stage__text ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-ia .ia-archi-stage__text li {
  padding: 14px 16px;
  border-left: 2px solid var(--line);
  font-size: 15px;
  line-height: 1.6;
}
.page-ia .ia-archi-stage__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: 1px;
}
.page-ia .ia-archi-stage__tag--green {
  background: rgba(107,191,138,0.12);
  color: #6BBF8A;
  border: 1px solid rgba(107,191,138,0.4);
}
.page-ia .ia-archi-stage__tag--amber {
  background: rgba(229,178,107,0.12);
  color: #E5B26B;
  border: 1px solid rgba(229,178,107,0.4);
}
.page-ia .ia-archi-stage__tag--blue {
  background: rgba(88,145,199,0.12);
  color: var(--lume-1);
  border: 1px solid rgba(88,145,199,0.4);
}

.page-ia .ia-archi-stage__diagram {
  max-width: 440px;
  width: 100%;
  margin-left: auto;
}
.page-ia .ia-archi-stage__diagram svg {
  display: block;
  width: 100%;
  height: auto;
}
.page-ia .ia-archi__routeur circle {
  transform-origin: 300px 200px;
  transform-box: view-box;
  animation: iaRouteurPulse 3.6s var(--ia-ease-io) infinite;
}

/* Reveal du stage : prose slide-in left, schéma fade-in right */
.page-ia .idx3-page-section.reveal .ia-archi-stage__text {
  opacity: 0; transform: translateX(-16px);
  transition: opacity .7s var(--ia-ease-out), transform .7s var(--ia-ease-out);
}
.page-ia .idx3-page-section.reveal .ia-archi-stage__diagram {
  opacity: 0; transform: translateY(20px);
  transition: opacity .9s var(--ia-ease-out) .2s, transform .9s var(--ia-ease-out) .2s;
}
.page-ia .idx3-page-section.reveal.in .ia-archi-stage__text,
.page-ia .idx3-page-section.reveal.in .ia-archi-stage__diagram {
  opacity: 1; transform: none;
}

/* ------------------------------------------------------------
   3 règles cards sous le stage
   ------------------------------------------------------------ */
.page-ia .ia-archi-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 880px) {
  .page-ia .ia-archi-rules { grid-template-columns: 1fr; }
}
.page-ia .ia-archi-rules li {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(28,31,35,.4);
  position: relative;
  isolation: isolate;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.page-ia .ia-archi-rules li:hover {
  border-color: rgba(88,145,199,.4);
  background: rgba(88,145,199,.04);
}
.page-ia .ia-archi-rules__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--lume-1);
  margin-bottom: 12px;
}
.page-ia .ia-archi-rules h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.25;
  margin: 0 0 12px;
  color: var(--ink-1);
}
.page-ia .ia-archi-rules p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

/* ------------------------------------------------------------
   SCHEMA ROUTEUR SVG - signature visuelle de la page
   ------------------------------------------------------------ */
.page-ia .ia-routeur {
  display: block;
  width: 100%;
  max-width: 760px;
  margin: 0 auto 64px;
  aspect-ratio: 16 / 8;
  background: var(--noir-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  padding: 16px;
  isolation: isolate;
}
.page-ia .ia-routeur::before {
  content: "ARCHITECTURE · ROUTEUR";
  position: absolute;
  top: 16px; left: 20px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .15em;
  color: var(--ink-3);
  z-index: 2;
}
.page-ia .ia-routeur::after {
  content: "LIVE";
  position: absolute;
  top: 16px; right: 20px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .15em;
  color: var(--lume-1);
  z-index: 2;
}
.page-ia .ia-routeur svg { display: block; width: 100%; height: 100%; }

/* Le cercle central du routeur pulse perpetuel */
.page-ia .ia-routeur__core circle {
  transform-origin: 400px 180px;
  transform-box: view-box;
  animation: iaRouteurPulse 3.6s var(--ia-ease-io) infinite;
}
@keyframes iaRouteurPulse {
  0%, 100% { transform: scale(1); opacity: .95; }
  50%      { transform: scale(1.04); opacity: 1; }
}

/* Apparition du schema entier au scroll */
.page-ia .idx3-page-section.reveal .ia-routeur {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .8s var(--ia-ease-out),
    transform .8s var(--ia-ease-out);
}
.page-ia .idx3-page-section.reveal.in .ia-routeur {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
   CODE BLOCK - line-by-line reveal au scroll + curseur blink
   ------------------------------------------------------------ */
.page-ia .idx3-code {
  position: relative;
  font-family: var(--font-mono);
}
.page-ia .idx3-prose.reveal .idx3-code {
  clip-path: inset(0 0 100% 0);
}
.page-ia .idx3-prose.reveal.in .idx3-code {
  animation: iaCodeBoot 1.2s steps(12, end) 400ms forwards;
}
@keyframes iaCodeBoot {
  to { clip-path: inset(0 0 0 0); }
}

/* Curseur blink a la fin du code (apparait apres le boot) */
.page-ia .idx3-prose.reveal.in .idx3-code::after {
  content: "_";
  display: inline-block;
  color: var(--lume-1);
  margin-left: 4px;
  animation: iaCursorBlink 1.1s steps(2) 1700ms infinite backwards;
}
@keyframes iaCursorBlink {
  0%, 50%    { opacity: 1; }
  51%, 100%  { opacity: 0; }
}

/* ------------------------------------------------------------
   MODULES (cards de modeles IA) - "system check" stagger
   chaque card s'allume sequentiellement, status dot pulse
   ------------------------------------------------------------ */
/* Arrivée "aléatoire" : chaque card part d'une direction/rotation distincte
   et avec un délai non-séquentiel — effet de cartes lancées sur une table.
   Distances volontairement amples (~130-200px) pour qu'on sente vraiment
   le déplacement, sans clipping pour qu'on voie tout le trajet. */
.page-ia { overflow-x: clip; }
.page-ia .idx3-page-section.reveal .idx3-modules > .idx3-module {
  opacity: 0;
  transform: var(--ia-mod-from, translateY(120px));
  filter: blur(6px);
  transition:
    opacity 1s var(--ia-ease-out),
    transform 1.15s var(--ia-ease-out),
    filter .9s var(--ia-ease-out);
}
.page-ia .idx3-page-section.reveal.in .idx3-modules > .idx3-module {
  opacity: 1;
  transform: translate(0, 0) rotate(0);
  filter: blur(0);
}
/* 6 cards : départs lointains, rotations marquées, délais désynchronisés */
.page-ia .idx3-modules > .idx3-module:nth-child(1) { --ia-mod-from: translate(-180px, -120px) rotate(-9deg);  transition-delay:  80ms; }
.page-ia .idx3-modules > .idx3-module:nth-child(2) { --ia-mod-from: translate( 160px, -160px) rotate( 11deg); transition-delay: 360ms; }
.page-ia .idx3-modules > .idx3-module:nth-child(3) { --ia-mod-from: translate(-140px,  180px) rotate( 7deg);  transition-delay: 180ms; }
.page-ia .idx3-modules > .idx3-module:nth-child(4) { --ia-mod-from: translate( 170px,  150px) rotate(-10deg); transition-delay: 540ms; }
.page-ia .idx3-modules > .idx3-module:nth-child(5) { --ia-mod-from: translate(-200px,  -40px) rotate(-6deg);  transition-delay: 260ms; }
.page-ia .idx3-modules > .idx3-module:nth-child(6) { --ia-mod-from: translate( 130px,  200px) rotate( 12deg); transition-delay: 440ms; }

@media (prefers-reduced-motion: reduce) {
  .page-ia .idx3-page-section.reveal .idx3-modules > .idx3-module,
  .page-ia .idx3-page-section.reveal.in .idx3-modules > .idx3-module {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* Status indicator (dot lume) avant le tag - signale "ONLINE" */
.page-ia .idx3-module__tag::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lume-1);
  margin-right: 6px;
  vertical-align: middle;
  opacity: 0;
  transform: scale(.4);
  transition:
    opacity .35s var(--ia-ease-out),
    transform .35s var(--ia-ease-out);
}
.page-ia .idx3-page-section.reveal.in .idx3-modules > .idx3-module .idx3-module__tag::before {
  opacity: 1;
  transform: scale(1);
}
.page-ia .idx3-page-section.reveal.in .idx3-modules > .idx3-module:nth-child(1) .idx3-module__tag::before { transition-delay: 600ms; }
.page-ia .idx3-page-section.reveal.in .idx3-modules > .idx3-module:nth-child(2) .idx3-module__tag::before { transition-delay: 680ms; }
.page-ia .idx3-page-section.reveal.in .idx3-modules > .idx3-module:nth-child(3) .idx3-module__tag::before { transition-delay: 760ms; }
.page-ia .idx3-page-section.reveal.in .idx3-modules > .idx3-module:nth-child(4) .idx3-module__tag::before { transition-delay: 840ms; }
.page-ia .idx3-page-section.reveal.in .idx3-modules > .idx3-module:nth-child(5) .idx3-module__tag::before { transition-delay: 920ms; }
.page-ia .idx3-page-section.reveal.in .idx3-modules > .idx3-module:nth-child(6) .idx3-module__tag::before { transition-delay: 1000ms; }
.page-ia .idx3-page-section.reveal.in .idx3-modules > .idx3-module:nth-child(7) .idx3-module__tag::before { transition-delay: 1080ms; }

/* ------------------------------------------------------------
   WORKFLOWS (3 regles non negociables)
   Tag R1/R2/R3 - clip-path inscribe (effet "gravure char par
   char"), puis underline lume scelle sous le titre
   ------------------------------------------------------------ */
.page-ia .idx3-page-section.reveal .idx3-workflow {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .7s var(--ia-ease-out),
    transform .7s var(--ia-ease-out);
}
.page-ia .idx3-page-section.reveal.in .idx3-workflow {
  opacity: 1;
  transform: translateY(0);
}
.page-ia .idx3-page-section.reveal.in .idx3-workflow:nth-child(1) { transition-delay: 100ms; }
.page-ia .idx3-page-section.reveal.in .idx3-workflow:nth-child(2) { transition-delay: 320ms; }
.page-ia .idx3-page-section.reveal.in .idx3-workflow:nth-child(3) { transition-delay: 540ms; }

/* Le tag R1/R2/R3 - clip-path inscribe (gauche -> droite) */
.page-ia .idx3-workflow__num {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
}
.page-ia .idx3-page-section.reveal.in .idx3-workflow:nth-child(1) .idx3-workflow__num {
  animation: iaTagInscribe .55s steps(3, end) 600ms forwards;
}
.page-ia .idx3-page-section.reveal.in .idx3-workflow:nth-child(2) .idx3-workflow__num {
  animation: iaTagInscribe .55s steps(3, end) 820ms forwards;
}
.page-ia .idx3-page-section.reveal.in .idx3-workflow:nth-child(3) .idx3-workflow__num {
  animation: iaTagInscribe .55s steps(3, end) 1040ms forwards;
}
@keyframes iaTagInscribe {
  to { clip-path: inset(0 0 0 0); }
}

/* Underline scelle sous le titre h3 de chaque regle */
.page-ia .idx3-workflow__body h3 {
  position: relative;
  display: inline-block;
}
.page-ia .idx3-workflow__body h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 1px;
  background: var(--lume-1);
}
.page-ia .idx3-page-section.reveal.in .idx3-workflow:nth-child(1) .idx3-workflow__body h3::after {
  animation: iaRuleSeal .6s var(--ia-ease-out) 1000ms forwards;
}
.page-ia .idx3-page-section.reveal.in .idx3-workflow:nth-child(2) .idx3-workflow__body h3::after {
  animation: iaRuleSeal .6s var(--ia-ease-out) 1220ms forwards;
}
.page-ia .idx3-page-section.reveal.in .idx3-workflow:nth-child(3) .idx3-workflow__body h3::after {
  animation: iaRuleSeal .6s var(--ia-ease-out) 1440ms forwards;
}
@keyframes iaRuleSeal {
  to { width: 100%; }
}

/* ------------------------------------------------------------
   PROSE - blur-in stagger sur les paragraphes, slide sur les
   listes (li sont des points cles, slide depuis la gauche)
   ------------------------------------------------------------ */
.page-ia .idx3-prose.reveal > p {
  opacity: 0;
  filter: blur(4px);
  transition:
    opacity .55s var(--ia-ease-out),
    filter .55s var(--ia-ease-out);
}
.page-ia .idx3-prose.reveal.in > p { opacity: 1; filter: blur(0); }
.page-ia .idx3-prose.reveal.in > p:nth-child(1) { transition-delay: 60ms; }
.page-ia .idx3-prose.reveal.in > p:nth-child(2) { transition-delay: 140ms; }
.page-ia .idx3-prose.reveal.in > p:nth-child(n+3) { transition-delay: 220ms; }

.page-ia .idx3-prose.reveal > ul > li {
  opacity: 0;
  transform: translateX(-10px);
  transition:
    opacity .5s var(--ia-ease-out),
    transform .5s var(--ia-ease-out);
}
.page-ia .idx3-prose.reveal.in > ul > li { opacity: 1; transform: translateX(0); }
.page-ia .idx3-prose.reveal.in > ul > li:nth-child(1) { transition-delay: 200ms; }
.page-ia .idx3-prose.reveal.in > ul > li:nth-child(2) { transition-delay: 280ms; }
.page-ia .idx3-prose.reveal.in > ul > li:nth-child(3) { transition-delay: 360ms; }

.page-ia .idx3-prose.reveal > h3 {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity .55s var(--ia-ease-out),
    transform .55s var(--ia-ease-out);
}
.page-ia .idx3-prose.reveal.in > h3 { opacity: 1; transform: translateY(0); transition-delay: 460ms; }

/* ------------------------------------------------------------
   SECTION TITLE + NUM - reveal simple, num descend, titre fade
   ------------------------------------------------------------ */
.page-ia .idx3-page-section.reveal .idx3-page-section__num {
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity .5s var(--ia-ease-out),
    transform .5s var(--ia-ease-out);
}
.page-ia .idx3-page-section.reveal.in .idx3-page-section__num {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 50ms;
}

.page-ia .idx3-page-section.reveal .idx3-page-section__title {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .65s var(--ia-ease-out),
    transform .65s var(--ia-ease-out);
}
.page-ia .idx3-page-section.reveal.in .idx3-page-section__title {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 150ms;
}

.page-ia .idx3-page-section.reveal .idx3-page-section__lead {
  opacity: 0;
  transition: opacity .6s var(--ia-ease-out);
}
.page-ia .idx3-page-section.reveal.in .idx3-page-section__lead {
  opacity: 1;
  transition-delay: 280ms;
}

/* ------------------------------------------------------------
   FINAL CTA - scale-in subtle
   ------------------------------------------------------------ */
.page-ia .idx3-finalcta.reveal {
  opacity: 0;
  transform: scale(.97);
  transition:
    opacity .8s var(--ia-ease-out),
    transform .8s var(--ia-ease-out);
}
.page-ia .idx3-finalcta.reveal.in {
  opacity: 1;
  transform: scale(1);
}

/* ------------------------------------------------------------
   REDUCED MOTION - tout statique, packets routeur disparaissent
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .page-ia *,
  .page-ia *::before,
  .page-ia *::after {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .page-ia .idx3-page-hero__title em::after,
  .page-ia .idx3-workflow__body h3::after { display: none !important; }
  .page-ia .ia-routeur circle[r="4"] { display: none !important; }
}