/* ==========================================================================
   AppFlow Digital — Animation « L'assistant en action » (copie dédiée LANDINGS)
   Copie autonome du fichier de la page d'accueil, rangée dans /lp-assets/.
   N'écrase AUCUN asset de la vitrine et ne partage aucun fichier avec elle.

   Autonomie : toutes les variables de charte utilisées par l'animation sont
   FIGÉES ici, scoping sur .aqa (mêmes valeurs que le :root de la vitrine), pour
   un rendu IDENTIQUE à l'accueil quel que soit le CSS des landings — zéro
   dépendance, zéro collision.
   Charte : navy #2A1A4A · cyan #26C0DD · bleu #4E6EF0 · vert succès #21B27A.
   Style FLAT : pas de dégradé, pas d'ombre, pas d'effet de lumière.
   Accessibilité : par défaut (et sous prefers-reduced-motion) = ÉTAT FINAL FIXE.
   ========================================================================== */

/* ---------- Habillage de la section dans « Comment ça marche » ---------- */
.aqa-block { margin-top: 2.75rem; }
.aqa-heading {
  text-align: center;
  font-weight: 800;
  color: #2A1A4A;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.7rem);
  line-height: 1.2;
  margin: 0 0 .5rem;
}
.aqa-sub {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 1.6rem;
  color: #5b5470;
  font-size: 1rem;
  line-height: 1.55;
}
.aqa-cta { margin-top: 1.75rem; text-align: center; }

/* ---------- Conteneur de l'animation (variables figées + mise en page) ---------- */
.aqa {
  /* charte figée (identique au :root de la vitrine) */
  --navy: #2A1A4A;
  --cyan: #26C0DD;
  --blue: #4E6EF0;
  --muted: #5b5470;
  --line: #e7e4f0;
  --bg-soft: #f6f5fb;
  --radius: 16px;

  --aqa-T: 19.3s;                 /* durée de la boucle complète (timeline maître) */
  max-width: 600px;
  margin-inline: auto;
  text-align: center;
}

/* ---------- Scène (panneau plat) ---------- */
.aqa__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 320 / 240;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.aqa__scene { position: absolute; inset: 0; display: none; }
.aqa__scene svg { width: 100%; height: 100%; display: block; }
/* État final fixe (par défaut + reduced-motion) : on montre le relais humain,
   passage de main achevé (assistant → membre de l'équipe). */
.aqa__scene--4 { display: block; }
/* Couleur pleine de la silhouette humaine par défaut (lue en reduced-motion) ;
   l'animation la fait passer du pâle au plein quand le relais s'active. */
.aqa-s4-human { fill: #4E6EF0; }

/* ---------- Étapes (puces de légende, toujours lisibles) ---------- */
.aqa__steps {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .5rem; margin: 1.1rem 0 0; padding: 0; list-style: none;
}
.aqa__step {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .85rem; font-weight: 600; color: var(--navy);
  background: var(--bg-soft); border: 1px solid var(--line);
  padding: .42rem .85rem; border-radius: 999px;
}
.aqa__num {
  display: grid; place-items: center;
  width: 19px; height: 19px; border-radius: 50%;
  border: 1.5px solid currentColor; color: inherit;
  font-size: .68rem; font-weight: 700; line-height: 1;
}

/* ---------- Bouton « Revoir » (masqué quand il n'y a rien à animer) ---------- */
.aqa__replay { display: none; }

/* ==========================================================================
   ANIMATIONS — uniquement si l'utilisateur n'a PAS réduit les animations
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Les 4 scènes se superposent et se fondent en boucle */
  .aqa__scene { display: block; opacity: 0; will-change: opacity, transform; }
  .aqa__scene--1 { animation: aqa-s1 var(--aqa-T) linear infinite; }
  .aqa__scene--2 { animation: aqa-s2 var(--aqa-T) linear infinite; }
  .aqa__scene--3 { animation: aqa-s3 var(--aqa-T) linear infinite; }
  .aqa__scene--4 { animation: aqa-s4 var(--aqa-T) linear infinite; }

  /* Scène 1 — joignable partout */
  .aqa-s1-node  { animation: aqa-n1 var(--aqa-T) linear infinite;
                  transform-box: fill-box; transform-origin: center; }
  .aqa-s1-conn  { animation: aqa-conn var(--aqa-T) linear infinite; }
  .aqa-s1-door  { animation: aqa-door var(--aqa-T) linear infinite; }
  .aqa-s1-door2 { animation-delay: calc(var(--aqa-T) * .012); }   /* léger décalage */
  .aqa-s1-door3 { animation-delay: calc(var(--aqa-T) * .024); }
  .aqa-s1-label { animation: aqa-plabel var(--aqa-T) linear infinite; }
  .aqa-s1-caption { animation: aqa-caption var(--aqa-T) linear infinite; }

  /* Scène 2 — il répond / explique */
  .aqa-s2-q1   { animation: aqa-q1 var(--aqa-T) linear infinite; }
  .aqa-s2-type { animation: aqa-type var(--aqa-T) linear infinite; }
  .aqa-s2-a1   { animation: aqa-a1 var(--aqa-T) linear infinite; }
  .aqa-s2-q2   { animation: aqa-q2 var(--aqa-T) linear infinite; }
  .aqa-s2-a2   { animation: aqa-a2 var(--aqa-T) linear infinite; }
  .aqa-typingdots circle {
    animation: aqa-typing .9s ease-in-out infinite;
    transform-box: fill-box; transform-origin: center;
  }
  .aqa-typingdots circle:nth-child(2) { animation-delay: .15s; }
  .aqa-typingdots circle:nth-child(3) { animation-delay: .30s; }

  /* Scène 3 — il prend le rendez-vous LUI-MÊME (cas courant, assistant seul) */
  .aqa-s3-node  { animation: aqa-n3 var(--aqa-T) linear infinite; }
  .aqa-s3-cal   { animation: aqa-cal var(--aqa-T) linear infinite; }
  .aqa-s3-label { animation: aqa-s3label var(--aqa-T) linear infinite; }

  /* Scène 4 — RELAIS vers un humain : passage de main explicite */
  .aqa-s4-node    { animation: aqa-s4node var(--aqa-T) linear infinite; }
  .aqa-s4-arrow   { animation: aqa-s4arrow var(--aqa-T) linear infinite; }
  .aqa-s4-ticket  { animation: aqa-s4ticket var(--aqa-T) linear infinite; }
  .aqa-s4-human   { animation: aqa-s4human var(--aqa-T) linear infinite; }
  .aqa-s4-phrase  { animation: aqa-s4phrase var(--aqa-T) linear infinite; }

  /* Surbrillance synchronisée des étapes */
  .aqa__step--1 { animation: aqa-pill1 var(--aqa-T) linear infinite; }
  .aqa__step--2 { animation: aqa-pill2 var(--aqa-T) linear infinite; }
  .aqa__step--3 { animation: aqa-pill3 var(--aqa-T) linear infinite; }
  .aqa__step--4 { animation: aqa-pill4 var(--aqa-T) linear infinite; }

  /* Pause hors écran (géré en JS via IntersectionObserver) */
  .aqa.is-paused .aqa__stage *,
  .aqa.is-paused .aqa__step { animation-play-state: paused; }

  /* Redémarrage propre pour le bouton « Revoir » */
  .aqa--reset .aqa__stage *,
  .aqa--reset .aqa__step { animation: none !important; }

  /* Bouton « Revoir » visible seulement quand ça s'anime */
  .aqa__replay {
    display: inline-flex; align-items: center; gap: .4rem;
    margin-top: 1rem; cursor: pointer;
    background: transparent; border: 1px solid var(--line);
    color: var(--muted); font-family: inherit; font-weight: 600; font-size: .85rem;
    padding: .45rem .95rem; border-radius: 999px;
    transition: border-color .15s ease, color .15s ease;
  }
  .aqa__replay:hover { border-color: var(--blue); color: var(--blue); }
  .aqa__replay:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
  .aqa__replay svg { width: 15px; height: 15px; }

  /* ---------- Keyframes : fondu des 4 scènes (timeline maître) ---------- */
  @keyframes aqa-s1 {
    0%   { opacity: 0; transform: translateY(6px); }
    1.87%   { opacity: 1; transform: translateY(0); }
    21%  { opacity: 1; transform: translateY(0); }
    22.59%  { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 0; transform: translateY(-6px); }
  }
  @keyframes aqa-s2 {
    0%, 22.59% { opacity: 0; transform: translateY(6px); }
    25.39%  { opacity: 1; transform: translateY(0); }
    55.23%  { opacity: 1; transform: translateY(0); }
    58.03%  { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 0; transform: translateY(-6px); }
  }
  @keyframes aqa-s3 {
    0%, 58.03% { opacity: 0; transform: translateY(6px); }
    60.83%  { opacity: 1; transform: translateY(0); }
    74.82%  { opacity: 1; transform: translateY(0); }
    77.62%  { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 0; transform: translateY(-6px); }
  }
  @keyframes aqa-s4 {
    0%, 77.62% { opacity: 0; transform: translateY(6px); }
    80.41%  { opacity: 1; transform: translateY(0); }
    98.13%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-6px); }
  }

  /* ---------- Scène 1 ---------- */
  @keyframes aqa-n1 {
    0%, 1.87% { opacity: 0; transform: scale(.6); }
    4.66%   { opacity: 1; transform: scale(1); }
    7.46%   { transform: scale(1.05); }
    9.33%  { transform: scale(1); }
    21%  { opacity: 1; transform: scale(1); }
    22.59%  { opacity: 0; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
  }
  @keyframes aqa-conn {
    0%, 3.73% { opacity: 0; }
    6.53%   { opacity: .55; }
    21%  { opacity: .55; }
    22.59%  { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes aqa-door {
    0%, 5.6% { opacity: 0; transform: translateY(7px); }
    8.39%   { opacity: 1; transform: translateY(0); }
    21%  { opacity: 1; transform: translateY(0); }
    22.59%  { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes aqa-plabel {
    0%, 8.39% { opacity: 0; transform: translateY(3px); }
    11.19%  { opacity: 1; transform: translateY(0); }
    21%  { opacity: 1; transform: translateY(0); }
    22.59%  { opacity: 0; }
    100% { opacity: 0; }
  }
  /* Caption « Parler à l'assistant » : apparaît APRÈS les 3 cartes et reste ~1 s de plus avant la transition */
  @keyframes aqa-caption {
    0%, 14% { opacity: 0; transform: translateY(3px); }
    16%  { opacity: 1; transform: translateY(0); }
    21%  { opacity: 1; transform: translateY(0); }
    22.6% { opacity: 0; }
    100% { opacity: 0; }
  }


  /* ---------- Scène 2 (bulles abstraites une par une) ---------- */
  @keyframes aqa-q1 {
    0%, 28.19% { opacity: 0; transform: translateY(7px); }
    30.98%  { opacity: 1; transform: translateY(0); }
    54.3%  { opacity: 1; transform: translateY(0); }
    57.1%  { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes aqa-type {
    0%, 32.85% { opacity: 0; transform: translateY(7px); }
    34.72%  { opacity: 1; transform: translateY(0); }
    37.51%  { opacity: 1; transform: translateY(0); }
    39.38%  { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes aqa-a1 {
    0%, 37.51% { opacity: 0; transform: translateY(7px); }
    40.31%  { opacity: 1; transform: translateY(0); }
    54.3%  { opacity: 1; transform: translateY(0); }
    57.1%  { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes aqa-q2 {
    0%, 43.11% { opacity: 0; transform: translateY(7px); }
    45.91%  { opacity: 1; transform: translateY(0); }
    54.3%  { opacity: 1; transform: translateY(0); }
    57.1%  { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes aqa-a2 {
    0%, 47.77% { opacity: 0; transform: translateY(7px); }
    50.57%  { opacity: 1; transform: translateY(0); }
    54.3%  { opacity: 1; transform: translateY(0); }
    57.1%  { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes aqa-typing {
    0%, 80%, 100% { transform: translateY(0); opacity: .55; }
    40% { transform: translateY(-3px); opacity: 1; }
  }

  /* ---------- Scène 3 (RDV pris par l'assistant seul) ---------- */
  @keyframes aqa-n3 {
    0%, 59.9% { opacity: 0; transform: translateY(6px); }
    62.69%  { opacity: 1; transform: translateY(0); }
    74.82%  { opacity: 1; transform: translateY(0); }
    77.62%  { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes aqa-cal {
    0%, 62.69% { opacity: 0; transform: translateY(8px); }
    66.42%  { opacity: 1; transform: translateY(0); }
    74.82%  { opacity: 1; transform: translateY(0); }
    77.62%  { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes aqa-s3label {
    0%, 68.29% { opacity: 0; transform: translateY(5px); }
    72.02%  { opacity: 1; transform: translateY(0); }
    74.82%  { opacity: 1; transform: translateY(0); }
    77.62%  { opacity: 0; }
    100% { opacity: 0; }
  }

  /* ---------- Scène 4 (RELAIS : passage de main assistant → humain) ---------- */
  /* Assistant (gauche) : présent dès le début de la scène */
  @keyframes aqa-s4node {
    0%, 78.55% { opacity: 0; transform: translateY(6px); }
    81.35%  { opacity: 1; transform: translateY(0); }
    98.13%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; }
  }
  /* Flèche de transfert : apparaît, indique la direction vers l'humain */
  @keyframes aqa-s4arrow {
    0%, 82.28% { opacity: 0; }
    86.01%  { opacity: 1; }
    98.13%  { opacity: 1; }
    100% { opacity: 0; }
  }
  /* La conversation (bulle/ticket) glisse de l'assistant vers l'humain */
  @keyframes aqa-s4ticket {
    0%, 84.15% { opacity: 0; transform: translateX(-96px); }
    86.01%  { opacity: 1; transform: translateX(-96px); }
    90.67%  { opacity: 1; transform: translateX(0); }
    98.13%  { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(0); }
  }
  /* L'humain (droite) apparaît en pâle puis s'illumine quand le ticket arrive */
  @keyframes aqa-s4human {
    0%, 80.41% { opacity: 0; fill: #cdd6f7; transform: translateY(6px); }
    83.21%  { opacity: 1; fill: #cdd6f7; transform: translateY(0); }
    89.74%  { opacity: 1; fill: #cdd6f7; transform: translateY(0); }
    93.47%  { opacity: 1; fill: #4E6EF0; transform: translateY(0); }
    98.13%  { opacity: 1; fill: #4E6EF0; transform: translateY(0); }
    100% { opacity: 0; fill: #4E6EF0; }
  }
  /* Phrase du transfert : « Un collègue humain prend le relais » */
  @keyframes aqa-s4phrase {
    0%, 88.81% { opacity: 0; transform: translateY(5px); }
    92.54%  { opacity: 1; transform: translateY(0); }
    98.13%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; }
  }

  /* ---------- Surbrillance des étapes (couleur suivie par .aqa__num) ---------- */
  @keyframes aqa-pill1 {
    0%   { background: var(--blue); border-color: var(--blue); color: #fff; }
    19.79%  { background: var(--blue); border-color: var(--blue); color: #fff; }
    21.66%  { background: var(--bg-soft); border-color: var(--line); color: var(--navy); }
    100% { background: var(--bg-soft); border-color: var(--line); color: var(--navy); }
  }
  @keyframes aqa-pill2 {
    0%, 23.52% { background: var(--bg-soft); border-color: var(--line); color: var(--navy); }
    25.39%  { background: var(--blue); border-color: var(--blue); color: #fff; }
    55.23%  { background: var(--blue); border-color: var(--blue); color: #fff; }
    57.1%  { background: var(--bg-soft); border-color: var(--line); color: var(--navy); }
    100% { background: var(--bg-soft); border-color: var(--line); color: var(--navy); }
  }
  @keyframes aqa-pill3 {
    0%, 58.03% { background: var(--bg-soft); border-color: var(--line); color: var(--navy); }
    60.83%  { background: var(--blue); border-color: var(--blue); color: #fff; }
    74.82%  { background: var(--blue); border-color: var(--blue); color: #fff; }
    77.62%  { background: var(--bg-soft); border-color: var(--line); color: var(--navy); }
    100% { background: var(--bg-soft); border-color: var(--line); color: var(--navy); }
  }
  @keyframes aqa-pill4 {
    0%, 77.62% { background: var(--bg-soft); border-color: var(--line); color: var(--navy); }
    80.41%  { background: var(--blue); border-color: var(--blue); color: #fff; }
    98.13%  { background: var(--blue); border-color: var(--blue); color: #fff; }
    100% { background: var(--bg-soft); border-color: var(--line); color: var(--navy); }
  }
}

/* Sécurité : sur très petits écrans, on resserre les puces d'étapes */
@media (max-width: 420px) {
  .aqa__step { font-size: .78rem; padding: .38rem .7rem; }
}