/* ============================================================
   anim-automation.css
   Animation « Automatisation + IA » de la page /infinicy.html —
   pure SVG + CSS, 0 JS. Remplace l'animation Lottie #infinicy-automation
   (infinicy-automation.json) qui ne se déclenchait pas de façon fiable.

   Workflow façon n8n (paysage) : une pulsation verte de « succès » se
   propage nœud par nœud (bordure verte + coche ✓ + points verts), et les
   arêtes passent au vert au passage :
     Récupération des coordonnées → Création de la fiche contact
       → [haut] Ajout au CRM → Création du devis sur-mesure
       → [bas]  Vérification des disponibilités → Proposition de RDV
   Puis reset et boucle. Couleurs/tokens scopés sous .anim-automation.
   ============================================================ */

.anim-automation {
  --auto-violet: #634DFA;
  --auto-green: #1FA971;
  --auto-navy: #1D184E;
  --auto-white: #FFFFFF;
  --auto-label: rgba(255,255,255,0.92);

  --dur: 7s;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Wrapper (sans cadre, transparent) ---------- */
.anim-automation {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 900 / 400;
  background: transparent;
  overflow: visible;
}
.anim-automation__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* ---------- Overlays "done" (vert) par nœud ---------- */
.anim-automation .autodone { opacity: 0; }
.anim-automation .auto-done-1 { animation: autoDone1 var(--dur) infinite var(--ease-out); }
.anim-automation .auto-done-2 { animation: autoDone2 var(--dur) infinite var(--ease-out); }
.anim-automation .auto-done-3 { animation: autoDone3 var(--dur) infinite var(--ease-out); }
.anim-automation .auto-done-4 { animation: autoDone4 var(--dur) infinite var(--ease-out); }
.anim-automation .auto-done-5 { animation: autoDone5 var(--dur) infinite var(--ease-out); }
.anim-automation .auto-done-6 { animation: autoDone6 var(--dur) infinite var(--ease-out); }

@keyframes autoDone1 { 0%,3%{opacity:0} 6%{opacity:1} 85%{opacity:1} 90%,100%{opacity:0} }
@keyframes autoDone2 { 0%,13%{opacity:0} 16%{opacity:1} 85%{opacity:1} 90%,100%{opacity:0} }
@keyframes autoDone3 { 0%,24%{opacity:0} 27%{opacity:1} 85%{opacity:1} 90%,100%{opacity:0} }
@keyframes autoDone4 { 0%,35%{opacity:0} 38%{opacity:1} 85%{opacity:1} 90%,100%{opacity:0} }
@keyframes autoDone5 { 0%,46%{opacity:0} 49%{opacity:1} 85%{opacity:1} 90%,100%{opacity:0} }
@keyframes autoDone6 { 0%,57%{opacity:0} 60%{opacity:1} 85%{opacity:1} 90%,100%{opacity:0} }

/* ---------- Coche ✓ : petit "pop" à l'apparition ---------- */
.anim-automation .autocheck { transform-box: fill-box; transform-origin: center; }
.anim-automation .auto-done-1 .autocheck { animation: autoCheck1 var(--dur) infinite var(--ease-out); }
.anim-automation .auto-done-2 .autocheck { animation: autoCheck2 var(--dur) infinite var(--ease-out); }
.anim-automation .auto-done-3 .autocheck { animation: autoCheck3 var(--dur) infinite var(--ease-out); }
.anim-automation .auto-done-4 .autocheck { animation: autoCheck4 var(--dur) infinite var(--ease-out); }
.anim-automation .auto-done-5 .autocheck { animation: autoCheck5 var(--dur) infinite var(--ease-out); }
.anim-automation .auto-done-6 .autocheck { animation: autoCheck6 var(--dur) infinite var(--ease-out); }
@keyframes autoCheck1 { 0%,4%{transform:scale(0.2)} 7%{transform:scale(1.25)} 10%,100%{transform:scale(1)} }
@keyframes autoCheck2 { 0%,14%{transform:scale(0.2)} 17%{transform:scale(1.25)} 20%,100%{transform:scale(1)} }
@keyframes autoCheck3 { 0%,25%{transform:scale(0.2)} 28%{transform:scale(1.25)} 31%,100%{transform:scale(1)} }
@keyframes autoCheck4 { 0%,36%{transform:scale(0.2)} 39%{transform:scale(1.25)} 42%,100%{transform:scale(1)} }
@keyframes autoCheck5 { 0%,47%{transform:scale(0.2)} 50%{transform:scale(1.25)} 53%,100%{transform:scale(1)} }
@keyframes autoCheck6 { 0%,58%{transform:scale(0.2)} 61%{transform:scale(1.25)} 64%,100%{transform:scale(1)} }

/* ---------- Arêtes vertes : "draw" (dashoffset) puis fondu au reset ---------- */
.anim-automation .autoedge { stroke-dasharray: 1; stroke-dashoffset: 1; }
.anim-automation .auto-edge-12 { animation: autoEdge12 var(--dur) infinite var(--ease-out); }
.anim-automation .auto-edge-23 { animation: autoEdge23 var(--dur) infinite var(--ease-out); }
.anim-automation .auto-edge-34 { animation: autoEdge34 var(--dur) infinite var(--ease-out); }
.anim-automation .auto-edge-25 { animation: autoEdge25 var(--dur) infinite var(--ease-out); }
.anim-automation .auto-edge-56 { animation: autoEdge56 var(--dur) infinite var(--ease-out); }
@keyframes autoEdge12 { 0%,8%{stroke-dashoffset:1;opacity:1} 13%{stroke-dashoffset:0} 85%{stroke-dashoffset:0;opacity:1} 90%,100%{stroke-dashoffset:0;opacity:0} }
@keyframes autoEdge23 { 0%,18%{stroke-dashoffset:1;opacity:1} 23%{stroke-dashoffset:0} 85%{stroke-dashoffset:0;opacity:1} 90%,100%{stroke-dashoffset:0;opacity:0} }
@keyframes autoEdge34 { 0%,29%{stroke-dashoffset:1;opacity:1} 34%{stroke-dashoffset:0} 85%{stroke-dashoffset:0;opacity:1} 90%,100%{stroke-dashoffset:0;opacity:0} }
@keyframes autoEdge25 { 0%,40%{stroke-dashoffset:1;opacity:1} 45%{stroke-dashoffset:0} 85%{stroke-dashoffset:0;opacity:1} 90%,100%{stroke-dashoffset:0;opacity:0} }
@keyframes autoEdge56 { 0%,51%{stroke-dashoffset:1;opacity:1} 56%{stroke-dashoffset:0} 85%{stroke-dashoffset:0;opacity:1} 90%,100%{stroke-dashoffset:0;opacity:0} }

/* ---------- Accessibilité : réduction de mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
  .anim-automation .autodone { opacity: 1 !important; animation: none !important; }
  .anim-automation .autoedge { stroke-dashoffset: 0 !important; opacity: 1 !important; animation: none !important; }
  .anim-automation .autocheck { transform: scale(1) !important; animation: none !important; }
}