/* ===== Scène SEO : résultats Google où le site du client grimpe, puces Google Ads / Meta / trafic ===== */
.seo-viz{position:relative;width:100%;max-width:600px;justify-self:center;padding:46px 30px 70px}
.seo-viz::before{content:"";position:absolute;inset:10%;background:radial-gradient(circle at 40% 40%,rgba(139,92,246,.35),transparent 60%),radial-gradient(circle at 70% 70%,rgba(244,114,182,.25),transparent 55%);filter:blur(40px);z-index:-1}
.serp{position:relative;border-radius:20px;background:#fff;color:#202124;padding:20px 22px 18px;box-shadow:0 50px 100px -40px rgba(139,92,246,.8),0 0 0 1px rgba(255,255,255,.1);font-family:Arial,"Inter",sans-serif;animation:lapFloat 8s ease-in-out infinite}
.serp-top{display:flex;align-items:center;gap:14px}
.g-logo{width:30px;height:30px;flex:none}
.serp-q{flex:1;display:flex;align-items:center;gap:2px;min-height:40px;padding:0 18px;border-radius:99px;border:1px solid #dfe1e5;box-shadow:0 1px 6px rgba(32,33,36,.18);font-size:15px;color:#202124}
.serp-q i{width:1.5px;height:18px;background:#1a73e8;animation:blink 1s steps(1) infinite}
.serp-meta{display:block;margin:12px 0 6px 4px;font-size:12px;color:#70757a}
.serp-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.serp-list li{position:relative;padding:9px 12px;border-radius:12px;background:#fff;transition:background .4s,box-shadow .4s}
.serp-list span{display:block;font-size:12px;color:#4d5156}
.serp-list b{display:block;font-weight:400;font-size:16px;color:#1a0dab;line-height:1.3}
.serp-list p{margin:0;font-size:12.5px;color:#4d5156;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.serp-list li.you{z-index:1;background:linear-gradient(90deg,#f5f0ff,#fdf0f8);box-shadow:0 0 0 1.5px #c4a5ff,0 10px 26px -10px rgba(139,92,246,.6)}
.serp-list li.you b{color:#6d28d9;font-weight:600}
.serp-list li.you em{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:700 13px var(--body);font-style:normal;padding:5px 10px;border-radius:99px;color:#fff;background:linear-gradient(90deg,#8b5cf6,#f472b6);transition:transform .3s}
.serp-list li.you.top{box-shadow:0 0 0 2px #f472b6,0 14px 34px -8px rgba(244,114,182,.75)}
.serp-list li.you.top em{transform:translateY(-50%) scale(1.15)}

/* Puces flottantes en verre */
.seo-viz [class^="chip-"]{position:absolute;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:18px;color:var(--fg);
  border:1px solid rgba(255,255,255,.22);background:radial-gradient(ellipse at 30% 0%,rgba(255,255,255,.18),rgba(255,255,255,.05) 60%),rgba(19,14,27,.72);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:inset 0 1px 1px rgba(255,255,255,.35),0 24px 50px -20px rgba(0,0,0,.9)}
.seo-viz [class^="chip-"] > svg{width:32px;height:32px;flex:none}
.seo-viz [class^="chip-"] b{display:block;font-size:14px}
.seo-viz [class^="chip-"] small{display:block;font-size:12px;color:var(--fg-60)}
.seo-viz [class^="chip-"] strong{color:var(--ok);font-weight:600}
.chip-ads{top:0;left:-6px}
.chip-meta{top:38%;right:-22px}
.chip-traffic{bottom:0;left:4%;display:grid!important;gap:2px!important;width:180px}
.chip-traffic strong{font:700 24px var(--display)!important;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.chip-traffic svg{width:100%!important;height:46px!important}
.chip-traffic .line{stroke-dasharray:160;stroke-dashoffset:160;animation:drawLine 6s ease-in-out infinite}
.chip-traffic .area{opacity:0;animation:fadeArea 6s ease-in-out infinite}
@keyframes drawLine{0%{stroke-dashoffset:160}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes fadeArea{0%,20%{opacity:0}50%,85%{opacity:1}100%{opacity:0}}
.float1{animation:chipFloat 6s ease-in-out infinite}
.float2{animation:chipFloat 7s ease-in-out -2s infinite}
.float3{animation:chipFloat 6.5s ease-in-out -4s infinite}
@keyframes chipFloat{50%{transform:translateY(-12px)}}

@media (max-width:600px){
  .seo-viz{padding:56px 0 90px}
  .chip-ads{left:0}
  .chip-meta{right:0;top:auto;bottom:22px}
  .chip-traffic{display:none!important}
  .serp-list b{font-size:14.5px}
}
[dir="rtl"] .seo-viz .serp{direction:ltr;text-align:left}
@media (prefers-reduced-motion:reduce){.serp,.float1,.float2,.float3,.chip-traffic .line,.chip-traffic .area{animation:none}.chip-traffic .line{stroke-dashoffset:0}.chip-traffic .area{opacity:1}}

/* ===== Page IA : éditeur d'automatisation animé (message → agent IA → ERP / CRM / réponse) ===== */
.flow{width:100%;max-width:620px;justify-self:center;border-radius:18px;overflow:hidden;border:1px solid rgba(196,165,255,.22);background:#0d0914;box-shadow:0 50px 100px -40px rgba(139,92,246,.75);animation:lapFloat 8s ease-in-out infinite}
.flow-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:#17111f;border-bottom:1px solid var(--line);font-size:12px;color:var(--fg-60)}
.flow-bar>i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14)}
.flow-bar>i:first-child{background:var(--pink)}
.flow-bar span{margin-left:8px}
.flow-bar em{margin-left:auto;font-style:normal;display:inline-flex;align-items:center;gap:6px;color:var(--ok);font-size:11.5px;padding:3px 9px;border-radius:99px;background:rgba(94,230,168,.1)}
.flow-bar em b{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:blink 1.6s infinite}
.flow-canvas{position:relative;aspect-ratio:16/11;container-type:inline-size;background:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px) 0 0/18px 18px,radial-gradient(circle at 50% 50%,rgba(139,92,246,.14),transparent 60%)}
.flow-edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow-edges path{fill:none;stroke:rgba(196,165,255,.28);stroke-width:1.5px;vector-effect:non-scaling-stroke}
.flow-edges path.pulse{stroke:var(--pink);stroke-width:3px;stroke-linecap:round;stroke-dasharray:22 100;stroke-dashoffset:22;filter:drop-shadow(0 0 4px var(--pink));opacity:0}
.flow.run .pulse.e1{animation:pulse1 7s linear infinite}
.flow.run .pulse.e2,.flow.run .pulse.e3,.flow.run .pulse.e4{animation:pulse2 7s linear infinite}
@keyframes pulse1{0%,12%{stroke-dashoffset:22;opacity:0}13%{opacity:1}25%{stroke-dashoffset:-100;opacity:1}26%,100%{opacity:0}}
@keyframes pulse2{0%,45%{stroke-dashoffset:22;opacity:0}46%{opacity:1}60%{stroke-dashoffset:-100;opacity:1}61%,100%{opacity:0}}

.fnode{position:absolute;display:flex;align-items:center;gap:2cqw;padding:1.8cqw 2cqw;border-radius:2.2cqw;background:#1a1324;border:1px solid rgba(196,165,255,.2);box-shadow:0 1.6cqw 4cqw -1.6cqw rgba(0,0,0,.8);transition:border-color .4s,box-shadow .4s}
.fnode div{min-width:0;display:grid;gap:.3cqw}
.fnode small{font-size:1.6cqw;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-45)}
.fnode b{font-size:2.1cqw;font-weight:600;color:var(--fg);line-height:1.2}
.fnode .fmsg,.fnode .fthink{font-size:1.7cqw;color:var(--fg-60);line-height:1.3}
.fi{flex:none;width:5.6cqw;height:5.6cqw;border-radius:1.6cqw;display:grid;place-items:center;font:700 1.5cqw var(--body);font-style:normal;color:#fff}
.fi svg{width:60%;height:60%}
.fi.wa{background:#25d366}
.fi.ai{background:var(--grad);color:var(--bg)}
.fi.erp{background:#714b67}
.fi.crm{background:#ff7a59}
.fnode{transform:translateY(-50%)}
.n1{left:2%;top:50%;width:27%}
.n2{left:36%;top:50%;width:28%;border-color:rgba(244,114,182,.35)}
.n3{left:71%;top:16%;width:27%}
.n4{left:71%;top:50%;width:27%}
.n5{left:71%;top:84%;width:27%}
.fok{position:absolute;right:-1.4cqw;top:-1.4cqw;width:3.4cqw;height:3.4cqw;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:1.8cqw;font-weight:700;color:#06120c;background:var(--ok);box-shadow:0 0 1.6cqw rgba(94,230,168,.6);transform:scale(0)}
.fthink i{display:inline-block;width:.8cqw;height:.8cqw;border-radius:50%;background:var(--pink);margin-right:.2cqw;animation:waDot 1s infinite}
.fthink i:nth-child(2){animation-delay:.15s}.fthink i:nth-child(3){animation-delay:.3s}
.flow.run .n1{animation:nodeOn1 7s infinite}
.flow.run .n2{animation:nodeOn2 7s infinite}
.flow.run .n3,.flow.run .n4,.flow.run .n5{animation:nodeOn3 7s infinite}
.flow.run .n4{animation-delay:.25s}.flow.run .n5{animation-delay:.5s}
.flow.run .fok{animation:okPop 7s infinite}
.flow.run .n4 .fok{animation-delay:.25s}.flow.run .n5 .fok{animation-delay:.5s}
.flow.run .fmsg{animation:msgIn 7s infinite}
@keyframes nodeOn1{0%,2%,22%,100%{border-color:rgba(196,165,255,.2);box-shadow:0 1.6cqw 4cqw -1.6cqw rgba(0,0,0,.8)}5%,15%{border-color:#25d366;box-shadow:0 0 0 .5cqw rgba(37,211,102,.15),0 0 3cqw rgba(37,211,102,.35)}}
@keyframes nodeOn2{0%,24%,62%,100%{border-color:rgba(244,114,182,.35);box-shadow:0 1.6cqw 4cqw -1.6cqw rgba(0,0,0,.8)}28%,48%{border-color:var(--pink);box-shadow:0 0 0 .6cqw rgba(244,114,182,.15),0 0 4cqw rgba(244,114,182,.55)}}
@keyframes nodeOn3{0%,58%,95%,100%{border-color:rgba(196,165,255,.2)}62%,88%{border-color:var(--ok)}}
@keyframes okPop{0%,60%{transform:scale(0)}64%,90%{transform:scale(1)}95%,100%{transform:scale(0)}}
@keyframes msgIn{0%{opacity:0;transform:translateY(.6cqw)}6%,92%{opacity:1;transform:none}100%{opacity:0}}
.flow-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:11px 16px;border-top:1px solid var(--line);background:#120d1a;font-size:12px;color:var(--fg-45)}
.flow-foot b{color:var(--fg);font-weight:600;margin-left:4px;font-variant-numeric:tabular-nums}
[dir="rtl"] .flow{direction:ltr}
@media (prefers-reduced-motion:reduce){.flow{animation:none}.flow.run *{animation:none!important}.fok{transform:none}}