/* ══════════════════════════════════════════════════════════════════════
   Proposition : la page 11 en visuel (page ajoutée en fin, .p11b).

   Mêmes textes que la page 11, mot pour mot. Deux circuits côte à côte,
   deux colonnes, deux couleurs, lus de haut en bas :
     budget ASC (rose)               l'argent part de la carte bancaire du
                                     salarié et va droit aux activités ;
                                     le budget, en tête, n'est pas sur le
                                     chemin ;
     Budget de fonctionnement        l'argent part du budget et descend
     (marine)                        dans l'infrastructure : DuoPilot, le
                                     site, les tableaux de bord.
   Des points circulent sans fin sur chaque flèche. Le personnage assis
   sur l'euro, à droite, regarde les deux.

   Les états de départ ne vivent que dans les animations : sans script, à
   l'impression ou avec « réduire les animations », tout est posé.
   ══════════════════════════════════════════════════════════════════════ */

.p11b{ background:#f4f4f4; }

/* ─────────────────────────────── Le décor ───────────────────────────── */
.p11b-nappe{ position:absolute; border-radius:50%; pointer-events:none; filter:blur(10px); }
.p11b-nappe--rose{
  left:-300px; top:160px; width:900px; height:560px;
  background:radial-gradient(closest-side, rgba(210,0,116,.10), rgba(210,0,116,0));
}
.p11b-nappe--marine{
  left:860px; top:-260px; width:900px; height:640px;
  background:radial-gradient(closest-side, rgba(36,50,130,.10), rgba(36,50,130,0));
}

/* ─────────────────────────────── Le titre ───────────────────────────── */
.p11b-titre{ white-space:nowrap; line-height:56px; }

/* ─────────────────────────────── Les colonnes ───────────────────────── */
.p11b-colonne{
  position:absolute; top:190px; width:472px; height:524px; box-sizing:border-box;
  border-radius:32px; background:#fff; overflow:hidden;
  box-shadow:0 1px 0 rgba(20,30,60,.04), 0 18px 40px -12px rgba(20,30,60,.18);
}
.p11b-colonne::before{ content:""; position:absolute; left:0; right:0; top:0; height:7px; background:var(--c); }
.p11b-colonne::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:196px;
  background:var(--c2);
}
.p11b-colonne--rose  { --c:#d20074; --c2:#fbe5f0; }
.p11b-colonne--marine{ --c:#243282; --c2:#e6e9f5; width:480px; }

/* Les mains qui présentent chaque budget. */
.p11b-main{ background-size:contain; }

/* ─────────────────────────────── Les bulles ─────────────────────────── */
.p11b-bulle{
  position:absolute; box-sizing:border-box; padding:14px 18px 15px;
  border-radius:24px; color:#fff;
  font-family:'Montserrat', sans-serif; font-weight:600; font-size:16.5px; line-height:1.42;
  box-shadow:0 1px 0 rgba(20,30,60,.04), 0 18px 40px -12px rgba(20,30,60,.18);
}
.p11b-bulle p{ margin:0; }
.p11b-bulle--courte{ font-weight:700; font-size:19px; line-height:1.3; }
.p11b-bulle--rose  { background:#d20074; }
.p11b-bulle--marine{ background:#243282; }
/* La pointe, vers la gauche : vers ce dont la bulle parle. */
.p11b-bulle::after{
  content:""; position:absolute; left:-13px; top:26px;
  border-style:solid; border-width:10px 14px 10px 0;
  border-color:transparent var(--pointe) transparent transparent;
}
.p11b-bulle--rose  { --pointe:#d20074; }
.p11b-bulle--marine{ --pointe:#243282; }
.p11b-bulle--bas::after{ top:auto; bottom:44px; }

/* ─────────────────────────────── Les photos ─────────────────────────── */
.p11b-photo.o--img{
  background-size:cover; box-sizing:border-box;
  border:6px solid #fff; border-radius:10px;
  box-shadow:0 1px 0 rgba(20,30,60,.04), 0 18px 40px -12px rgba(20,30,60,.18);
}
.p11b-ecran.o--img{ background-position:top center; border-width:4px; }
.p11b-rond.o--img{
  background-size:cover; border-radius:50%; box-sizing:border-box;
  border:6px solid #fff; box-shadow:0 0 0 4px #d20074, 0 18px 40px -12px rgba(20,30,60,.18);
}
.p11b-logo.o--img{
  background-size:contain; background-color:#fff; border-radius:16px;
  box-shadow:0 1px 2px rgba(20,30,60,.06), 0 4px 12px -4px rgba(20,30,60,.14);
}

/* ─────────────────────────────── Les flux ───────────────────────────── */
.p11b-flux{
  position:absolute; left:0; top:0; width:1440px; height:600px;
  overflow:visible; pointer-events:none;
}
.p11b-voie{ fill:none; stroke-width:9; stroke-linecap:round; opacity:.22; }
.p11b-voie--rose  { stroke:#d20074; }
.p11b-voie--marine{ stroke:#243282; }
.p11b-marche{ fill:none; stroke-width:5.5; stroke-linecap:round; stroke-dasharray:.1 13; }
.p11b-marche--rose  { stroke:#d20074; }
.p11b-marche--marine{ stroke:#243282; }

/* ─────────────────────────────── Le personnage ──────────────────────── */
.p11b-perso.o--img{ background-size:cover; background-position:center; }
.p11b-socle{
  position:absolute; left:1110px; top:690px; width:300px; height:60px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(36,50,130,.22), rgba(36,50,130,0));
}

/* ══════════════════════════════ Le mouvement ══════════════════════════ */

/* Les voies se tracent dans le sens de l'argent, puis les points y
   circulent sans fin. */
.js-anim :is(.est-active, .est-sortante) .p11b-voie{
  stroke-dasharray:1 1;
  animation:p11b-trace 800ms var(--anim-douce) calc(var(--d) + var(--i) * 140ms) both;
}
@keyframes p11b-trace{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
.js-anim :is(.est-active, .est-sortante) .p11b-marche{
  animation:p11b-apparait 400ms ease-out calc(var(--d) + 700ms) both,
            p11b-circule 800ms linear calc(var(--d) + 700ms) infinite;
}
@keyframes p11b-apparait{ from{ opacity:0; } to{ opacity:1; } }
@keyframes p11b-circule{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-13.1; } }

/* La carte bancaire bat une fois quand l'argent part. */
.js-anim :is(.est-active, .est-sortante) .p11b-rond{
  animation:rv-pastille 700ms var(--anim-ressort) var(--d) both,
            p11b-bat 1200ms var(--anim-douce) calc(var(--d) + 500ms) 1;
}
@keyframes p11b-bat{ 0%, 100%{ scale:1; } 40%{ scale:1.08; } }


@media (prefers-reduced-motion:reduce){
  .js-anim .p11b *{ animation:none !important; }
}