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

   Mêmes textes que la page 9, mot pour mot. Le modèle devient un seul
   flux, lu de gauche à droite :
     Achat Groupé Massif       une douzaine de CSE envoient chacun leur
                               demande ; les filets se rejoignent en un
                               ruban unique ;
     Opérations Flash          le ruban traverse une fenêtre de temps
                               courte où tout le volume se concentre ;
     Court-circuit Logistique  le ruban va droit au salarié, pendant que
                               le détour par les stocks et les API reste
                               en gris, barré.
   Les trois mains de la maquette (billets, chronomètre, pièce de puzzle)
   tiennent chacune leur étape.

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

.p09b{ background:#ffffff; }

/* ─────────────────────────────── Le décor ───────────────────────────── */
.p09b-nappe{ position:absolute; border-radius:50%; pointer-events:none; filter:blur(10px); }
.p09b-nappe--a{
  left:820px; top:-300px; width:900px; height:620px;
  background:radial-gradient(closest-side, rgba(210,0,116,.10), rgba(210,0,116,0));
}
.p09b-nappe--b{
  left:-300px; top:-200px; width:900px; height:560px;
  background:radial-gradient(closest-side, rgba(214,113,58,.10), rgba(214,113,58,0));
}

/* ─────────────────────────────── Le titre ───────────────────────────── */
.p09b-surtitre{
  font-family:'Montserrat', sans-serif; font-weight:800; font-size:24px;
  letter-spacing:.14em; color:#005a9b; line-height:32px;
}
.p09b-titre{
  font-family:'Montserrat', sans-serif; font-weight:800; font-size:70px;
  letter-spacing:-.02em; line-height:80px; white-space:nowrap;
}
.p09b-rose{ color:#d20074; }
.p09b-marine{ color:#243282; }
.p09b-sous-titre{
  font-family:'Montserrat', sans-serif; font-weight:500; font-size:29px;
  color:#2b3344; line-height:40px;
}

/* ─────────────────────────────── Les cartes ─────────────────────────── */
.p09b-carte{
  position:absolute; top:252px; width:368px; height:448px; box-sizing:border-box;
  border-radius:24px; background:#fff; overflow:hidden;
  box-shadow:0 1px 0 rgba(20,30,60,.04), 0 18px 40px -12px rgba(20,30,60,.18);
  font-family:'Montserrat', sans-serif;
}
/* Le haut de la carte, teinté : c'est là que se dessine l'étape. */
.p09b-carte::before{
  content:""; position:absolute; left:0; right:0; top:0; height:236px;
  background:var(--c2);
}
/* Un filet de la couleur de l'étape sépare l'image du texte. */
.p09b-carte::after{
  content:""; position:absolute; left:0; right:0; top:236px; height:5px; background:var(--c);
}
.p09b-texte{ position:absolute; left:28px; top:268px; width:316px; }
.p09b-nom{
  margin:0 0 12px; font-size:27px; font-weight:800; line-height:1.12;
  letter-spacing:-.01em; color:var(--t);
}
.p09b-para{ margin:0; font-size:17px; line-height:26px; color:#2b3344; }
.p09b-fort{ font-weight:800; color:#d20074; }

/* Les flèches de la maquette : retournées comme sur la page d'origine. */
.p09b-fleche{ transform:scaleY(-1); }

/* ─────────────────────────────── Le flux ────────────────────────────── */
.p09b-flux{
  position:absolute; left:0; top:0; width:1440px; height:504px;
  overflow:visible; pointer-events:none; z-index:2;
}
.p09b-flux *{ transform-box:fill-box; transform-origin:center; }

/* 1. Les CSE et leurs demandes. */
.p09b-cse{ fill:#d6713a; transform-box:view-box; }
.p09b-ruisseau{ fill:none; stroke:#d6713a; stroke-width:2.2; stroke-linecap:round; opacity:.55; }

/* 2. La fenêtre de temps. */
.p09b-fenetre{ fill:rgba(203,161,44,.16); stroke:#cba12c; stroke-width:2; stroke-dasharray:6 5; }
.p09b-axe{ fill:none; stroke:#c9c2ae; stroke-width:2; stroke-linecap:round; }
.p09b-barres rect{ fill:#d9d2bf; }
.p09b-barres .p09b-pic{ fill:#cba12c; }

/* 3. Le détour supprimé. */
.p09b-detour{ fill:none; stroke:#b9bfca; stroke-width:3; stroke-dasharray:7 7; stroke-linecap:round; }
.p09b-socle{ fill:#fff; stroke:#d5dae2; stroke-width:2; }
.p09b-picto{ fill:#8a93a3; }
.p09b-croix{ fill:none; stroke:#d20074; stroke-width:4; stroke-linecap:round; }

/* Le ruban et son entonnoir. */
.p09b-bande-ombre{ fill:none; stroke:rgba(36,50,130,.12); stroke-width:18; stroke-linecap:round; filter:blur(3px); }
.p09b-bande{ fill:none; stroke:url(#p09b-degrade); stroke-width:16; stroke-linecap:round; }
.p09b-marche{ fill:none; stroke:#fff; stroke-width:4; stroke-linecap:round; stroke-dasharray:1 17; opacity:.85; }
.p09b-pointe{ fill:#d20074; }
.p09b-entonnoir{ fill:#d6713a; stroke:#fff; stroke-width:4; }

/* Le salarié. */
.p09b-salarie{ fill:#d20074; transform-box:view-box; }
.p09b-onde{ fill:rgba(210,0,116,.12); }

/* ─────────────────────────────── Les mains ──────────────────────────── */
/* Une seule image porte les trois mains : chaque bloc en montre une. */
.p09b-main{ z-index:3; filter:drop-shadow(0 4px 12px rgba(20,30,60,.16)); }
.p09b-main.o--img{ background-repeat:no-repeat; }
.p09b-main--billets{ background-size:576px 384px; background-position:-21px -129px; }
.p09b-main--chrono { background-size:461px 307px; background-position:-343px -96px; }
.p09b-main--puzzle { background-size:430px 287px; background-position:-185px -96px; }

/* ══════════════════════════════ Le mouvement ══════════════════════════
   Chaque groupe du schéma porte son départ `--d` ; les dessins se
   construisent dans l'ordre du flux. */

/* 1. Les CSE éclosent, leurs demandes filent vers l'entonnoir. */
.js-anim :is(.est-active, .est-sortante) .p09b-cse{
  animation:p09b-eclot 600ms var(--anim-ressort) calc(var(--d) + var(--i) * 45ms) both;
}
@keyframes p09b-eclot{ from{ opacity:0; scale:0; } to{ opacity:1; scale:1; } }
.js-anim :is(.est-active, .est-sortante) .p09b-ruisseau{
  stroke-dasharray:1 1;
  animation:p09b-trace 700ms var(--anim-douce) calc(var(--d) + 300ms + var(--i) * 40ms) both;
}
@keyframes p09b-trace{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

/* Le ruban se trace de l'entonnoir au salarié, puis circule sans fin. */
.js-anim :is(.est-active, .est-sortante) .p09b-entonnoir{
  animation:p09b-eclot 600ms var(--anim-ressort) calc(var(--d) + 200ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p09b-bande{
  stroke-dasharray:1 1;
  animation:p09b-trace 1100ms var(--anim-douce) calc(var(--d) + 400ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p09b-bande-ombre{
  animation:p09b-apparait 600ms ease-out calc(var(--d) + 1300ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p09b-pointe{
  animation:p09b-eclot 500ms var(--anim-ressort) calc(var(--d) + 1450ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p09b-marche{
  animation:p09b-apparait-marche 500ms ease-out calc(var(--d) + 1500ms) both,
            p09b-circule 900ms linear calc(var(--d) + 1500ms) infinite;
}
@keyframes p09b-apparait{ from{ opacity:0; } to{ opacity:1; } }
@keyframes p09b-apparait-marche{ from{ opacity:0; } to{ opacity:.85; } }
@keyframes p09b-circule{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-18; } }

/* 2. La fenêtre s'ouvre, les barres montent : hautes dedans, basses dehors. */
.js-anim :is(.est-active, .est-sortante) .p09b-fenetre{
  animation:p09b-fenetre 700ms var(--anim-courbe) calc(var(--d) + 200ms) both;
}
@keyframes p09b-fenetre{ from{ opacity:0; scale:.2 1; } to{ opacity:1; scale:1 1; } }
.js-anim :is(.est-active, .est-sortante) .p09b-axe{
  animation:p09b-apparait 500ms ease-out var(--d) both;
}
.js-anim :is(.est-active, .est-sortante) .p09b-barres rect{
  transform-origin:bottom;
  animation:p09b-monte 600ms var(--anim-courbe) calc(var(--d) + 300ms + var(--i) * 30ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p09b-barres .p09b-pic{
  animation:p09b-monte 800ms var(--anim-ressort) calc(var(--d) + 700ms + (var(--i) - 9) * 90ms) both;
}
@keyframes p09b-monte{ from{ scale:1 0; } to{ scale:1 1; } }

/* 3. Le détour apparaît en gris, puis ses étapes sont barrées. */
.js-anim :is(.est-active, .est-sortante) .p09b-detour{
  animation:p09b-apparait 600ms ease-out var(--d) both;
}
.js-anim :is(.est-active, .est-sortante) .p09b-obstacle{
  animation:p09b-eclot 550ms var(--anim-ressort) calc(var(--d) + 150ms + var(--i, 0) * 120ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p09b-croix{
  stroke-dasharray:1 1;
  animation:p09b-trace 450ms var(--anim-douce) calc(var(--d) + 650ms + var(--i) * 160ms) both;
}

/* Le salarié éclot, une onde bat autour de lui. */
.js-anim :is(.est-active, .est-sortante) .p09b-salarie{
  animation:p09b-eclot 650ms var(--anim-ressort) var(--d) both;
}
.js-anim :is(.est-active, .est-sortante) .p09b-onde{
  animation:p09b-onde 2200ms ease-out calc(var(--d) + 300ms) infinite both;
}
@keyframes p09b-onde{
  0%  { opacity:0; scale:.5; }
  15% { opacity:1; }
  100%{ opacity:0; scale:1.3; }
}


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