/* ============================================================
   AGMediaPro · guides
   Deux choses pour qu'un visiteur ne se perde jamais :
   un fil qui montre ou il en est dans la page, et un assistant
   qui l'oriente vers la bonne offre en trois questions.
   ============================================================ */

/* ---------- Le fil de defilement ---------- */
.fil{position:fixed;right:1.4rem;top:50%;transform:translateY(-50%);z-index:60;display:none;flex-direction:column;gap:.1rem}
@media (min-width:1180px){.fil{display:flex}}
.fil a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:.7rem;padding:.3rem 0;color:var(--muted);font-size:.74rem;text-decoration:none}
.fil a span{opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s;white-space:nowrap;max-width:15ch;overflow:hidden;text-overflow:ellipsis}
.fil a i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:background .3s,transform .3s,box-shadow .3s}
.fil:hover a span{opacity:1;transform:none}
.fil a.on{color:var(--text)}
.fil a.on span{opacity:1;transform:none}
.fil a.on i{background:var(--violet-2);transform:scale(1.5);box-shadow:0 0 0 4px rgba(167,26,247,.16)}
.fil a:focus-visible span{opacity:1;transform:none}

/* ---------- L'assistant ---------- */
.aid{position:relative;overflow:hidden;padding:clamp(1.8rem,4vw,2.8rem);border-radius:26px;border:1px solid var(--line-2);
  background:linear-gradient(150deg,rgba(36,24,68,.8),rgba(14,10,28,.92));box-shadow:var(--shadow)}
.aid-tete{display:flex;flex-wrap:wrap;gap:1rem;align-items:baseline;justify-content:space-between;margin-bottom:1.4rem}
.aid-tete h3{font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.3}
.aid-pas{font-family:var(--font-display);font-size:.72rem;letter-spacing:.1em;color:var(--violet-2);white-space:nowrap}
.aid-q{font-size:1.02rem;margin-bottom:1.1rem;color:var(--text)}
.aid-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:.7rem}
.aid-opt{text-align:left;padding:.95rem 1.1rem;border-radius:14px;border:1px solid var(--line-2);background:rgba(10,7,20,.5);
  color:var(--text);font-size:.92rem;font-family:inherit;transition:border-color .28s,background .28s,transform .28s}
.aid-opt:hover,.aid-opt:focus-visible{border-color:var(--violet-2);background:rgba(167,26,247,.12);transform:translateY(-2px)}
.aid-opt small{display:block;margin-top:.25rem;font-size:.77rem;color:var(--muted);line-height:1.45}
.aid-barre{height:3px;border-radius:99px;background:var(--surface-2);margin-top:1.4rem;overflow:hidden}
.aid-barre i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--violet),var(--violet-2));width:0;transition:width .45s cubic-bezier(.16,1,.3,1)}
.aid-retour{margin-top:.9rem;background:none;border:0;color:var(--muted);font-size:.8rem;text-decoration:underline;padding:0;font-family:inherit}
.aid-res h4{font-size:clamp(1.2rem,2.6vw,1.6rem);margin-bottom:.6rem}
.aid-res p{color:var(--muted);font-size:.95rem;margin-bottom:1.2rem;max-width:62ch}
.aid-res ul{display:grid;gap:.5rem;margin-bottom:1.4rem}
.aid-res li{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem}
.aid-res li svg{flex:none;width:16px;height:16px;stroke:var(--wa);fill:none;margin-top:.22rem}
.aid-actions{display:flex;flex-wrap:wrap;gap:.7rem}

html.sans-mouvement .aid-opt, html.sans-mouvement .aid-barre i, html.sans-mouvement .fil a i, html.sans-mouvement .fil a span{transition:none}

/* ---------- L'interrupteur d'animations ---------- */
.mvt{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none;
  border:1px solid var(--line-2);background:rgba(24,18,46,.5);color:var(--lavender);transition:color .3s,border-color .3s,background .3s}
.mvt-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mvt:hover{color:var(--violet-2);border-color:var(--violet-2)}
.mvt svg{width:17px;height:17px}
.mvt .off1{display:none}
.mvt[aria-pressed="false"]{color:var(--muted)}
.mvt[aria-pressed="false"] .on1{display:none}
.mvt[aria-pressed="false"] .off1{display:block}
.mobile-menu .mvt{width:auto;height:44px;border-radius:999px;padding:0 1.1rem;grid-auto-flow:column;gap:.6rem}
.mobile-menu .mvt-txt{position:static;width:auto;height:auto;overflow:visible;clip-path:none;font-size:.95rem}
.mobile-menu .mvt svg{width:21px;height:21px}

/* Interrupteur flottant des demos : discret, loin du bouton de contact du client. */
.mvt-flot{position:fixed;left:16px;bottom:16px;z-index:120;width:44px;height:44px;
  background:rgba(12,10,20,.82);border-color:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(8px)}
.mvt-flot:hover{border-color:#fff}