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

   Mêmes textes que la page 2, mot pour mot. L'ancienneté devient un
   sceau, et chaque chiffre devient une image derrière son héroïne :
     DEPUIS 2013     un sceau festonné, treize perles (treize ans) ;
     250 k salariés  une foule de points qui rayonne depuis le centre ;
     90 % fidélité   un anneau aux neuf dixièmes, fermé d'une flèche :
                     le renouvellement ;
     98 % satisf.    une jauge presque pleine, et des éclats de joie
                     autour de l'héroïne qui saute.
   Les nombres montent (data-count) au rythme où leur image se remplit.

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

.p02b{ background:#f4f4f4; }

/* ─────────────────────────────── Le décor ───────────────────────────── */
.p02b-nappe{ position:absolute; border-radius:50%; pointer-events:none; filter:blur(10px); }
.p02b-nappe--a{
  left:560px; top:-300px; width:1000px; height:700px;
  background:radial-gradient(closest-side, rgba(210,0,116,.10), rgba(210,0,116,0));
}
.p02b-nappe--b{
  left:-300px; top:200px; width:820px; height:560px;
  background:radial-gradient(closest-side, rgba(203,161,44,.16), rgba(203,161,44,0));
}

/* ─────────────────────────────── Le sceau ───────────────────────────── */
.p02b-sceau{ position:absolute; width:300px; height:300px; }
.p02b-sceau svg{ width:100%; height:100%; overflow:visible; }
.p02b-sceau svg *{ transform-box:fill-box; transform-origin:center; }
.p02b-feston{
  fill:url(#p02b-g-sceau); stroke:#cba12c; stroke-width:2;
  filter:drop-shadow(0 16px 22px rgba(36,50,130,.16));
}
.p02b-filet{ fill:none; stroke:#cba12c; stroke-width:1.6; opacity:.75; }
.p02b-filet--fin{ stroke-dasharray:2 5; stroke-linecap:round; opacity:.6; }
.p02b-perle{ fill:#cba12c; }
.p02b-perle:last-of-type{ fill:#d20074; }
.p02b-laurier ellipse{ fill:#cba12c; opacity:.9; }
.p02b-tige{ fill:none; stroke:#cba12c; stroke-width:1.6; stroke-linecap:round; }

.p02b-depuis p{
  text-align:center; font-family:'Montserrat', sans-serif; font-weight:800;
  font-size:21px; letter-spacing:.32em; padding-left:.32em; color:#243282;
}
.p02b-annee p{
  text-align:center; font-family:'Montserrat', sans-serif; font-weight:800;
  font-size:82px; line-height:92px; letter-spacing:-.03em; color:#d20074;
}
.p02b-ans p{
  text-align:center; font-family:'Montserrat', sans-serif; font-weight:500;
  font-size:19.5px; line-height:1.42; color:#2b3344;
}

/* ─────────────────────────────── Les chiffres ───────────────────────── */
.p02b-chiffre{
  display:flex; align-items:baseline; justify-content:center; gap:6px;
  font-family:'Montserrat', sans-serif; white-space:nowrap;
}
.p02b-plus{ font-size:46px; font-weight:500; color:#9a7614; line-height:1; translate:0 -4px; }
.p02b-nombre{ font-size:74px; font-weight:800; line-height:1; letter-spacing:-.035em; color:#d20074; }
.p02b-label p{
  text-align:center; font-family:'Montserrat', sans-serif; font-weight:700;
  font-size:20px; color:#243282; white-space:nowrap;
}
.p02b-legende p{
  text-align:center; font-family:'Montserrat', sans-serif; font-weight:500;
  font-size:18px; line-height:1.36; color:#2b3344;
}

/* ─────────────────────────────── Les images ─────────────────────────── */
.p02b-vis{ position:absolute; width:300px; height:300px; }
.p02b-vis svg{ width:100%; height:100%; overflow:visible; }
.p02b-vis svg *{ transform-box:fill-box; transform-origin:center; }

/* Le sol : une ombre douce sous chaque héroïne. */
.p02b-sol{
  position:absolute; height:26px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(36,50,130,.22), rgba(36,50,130,0));
}

/* 1. La foule. */
.p02b-fond-foule{ fill:#fff; stroke:#e9e3cf; stroke-width:1.5; }
.p02b-pt{ fill:#243282; }
.p02b-onde:nth-child(n+5) .p02b-pt{ opacity:.78; }
.p02b-onde:nth-child(n+7) .p02b-pt{ opacity:.55; }
.p02b-onde:nth-child(n+9) .p02b-pt{ opacity:.4; }
.p02b-pt.p02b-pt--rose{ fill:#d20074; opacity:.9; }
.p02b-pt.p02b-pt--or{ fill:#cba12c; opacity:.95; }

/* 2 et 3. Les anneaux. */
.p02b-disque{ fill:#fff; }
.p02b-piste{ fill:none; stroke:#dce5ef; stroke-width:18; }
.p02b-piste--rose{ stroke:#f6dbe8; }
.p02b-arc{ fill:none; stroke-width:18; stroke-linecap:round; rotate:-90deg; }
.p02b-arc--90{ stroke-dasharray:90 100; }
.p02b-arc--98{ stroke-dasharray:98 100; }
.p02b-pointe{ fill:#243282; }
.p02b-eclat{ opacity:.95; }

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

/* Les nappes et les ombres au sol se posent, sans respirer ensuite. */
.js-anim :is(.est-active, .est-sortante) :is(.p02b-nappe, .p02b-sol){
  animation:rv-halo 1100ms ease-out var(--d) both;
}

/* Trois boucles en tout, une par image : le bord du sceau oscille, la
   foule respire d'un bloc, les éclats de joie scintillent ensemble. */

/* Le bord du sceau pivote très lentement ; les perles s'allument une à
   une, comme on compte les années ; puis le laurier pousse. */
.js-anim :is(.est-active, .est-sortante) .p02b-feston{
  animation:p02b-oscille 14s ease-in-out calc(var(--d) + 600ms) infinite alternate;
}
@keyframes p02b-oscille{ from{ rotate:0deg; } to{ rotate:12deg; } }
.js-anim :is(.est-active, .est-sortante) .p02b-perle{
  animation:p02b-eclot 520ms var(--anim-ressort) calc(var(--d) + 480ms + var(--i) * 70ms) both;
}
@keyframes p02b-eclot{ from{ scale:0; opacity:0; } to{ scale:1; opacity:1; } }
.js-anim :is(.est-active, .est-sortante) .p02b-laurier{
  animation:p02b-pousse 800ms var(--anim-courbe) calc(var(--d) + 1250ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p02b-laurier--g{ transform-origin:right bottom; }
.js-anim :is(.est-active, .est-sortante) .p02b-laurier--d{ transform-origin:left bottom; }
@keyframes p02b-pousse{ from{ opacity:0; scale:.4; } to{ opacity:1; scale:1; } }

/* La foule : les cercles de points éclosent du centre vers le bord, au
   rythme du compteur, puis la foule entière respire d'un bloc. */
.js-anim :is(.est-active, .est-sortante) .p02b-onde{
  animation:p02b-eclot 600ms var(--anim-ressort) calc(var(--d) + 150ms + var(--i) * 100ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p02b-foule{
  transform-box:view-box; transform-origin:150px 150px;
  animation:p02b-respire 3.2s ease-in-out calc(var(--d) + 1800ms) infinite alternate;
}
@keyframes p02b-respire{ from{ scale:1; opacity:1; } to{ scale:1.035; opacity:.8; } }

/* Les anneaux se remplissent au rythme du compteur. */
.js-anim :is(.est-active, .est-sortante) .p02b-arc--90{
  animation:p02b-remplit-90 1100ms cubic-bezier(.25,1,.5,1) calc(var(--d) + 150ms) both;
}
@keyframes p02b-remplit-90{ from{ stroke-dashoffset:90; } to{ stroke-dashoffset:0; } }
.js-anim :is(.est-active, .est-sortante) .p02b-arc--98{
  animation:p02b-remplit-98 1100ms cubic-bezier(.25,1,.5,1) calc(var(--d) + 150ms) both;
}
@keyframes p02b-remplit-98{ from{ stroke-dashoffset:98; } to{ stroke-dashoffset:0; } }

/* La flèche du renouvellement se pose au bout de l'anneau. */
.js-anim :is(.est-active, .est-sortante) .p02b-pointe{
  animation:p02b-eclot 520ms var(--anim-ressort) calc(var(--d) + 1100ms) both;
}

/* Les éclats de joie jaillissent du centre quand la jauge arrive, puis
   scintillent ensemble. */
.js-anim :is(.est-active, .est-sortante) .p02b-eclat{
  animation:p02b-jaillit 800ms var(--anim-courbe) calc(var(--d) + 900ms + var(--i) * 20ms) both;
}
@keyframes p02b-jaillit{
  from{ opacity:0; translate:var(--dx) var(--dy); scale:.3; }
  60% { opacity:1; }
  to  { opacity:.95; translate:0 0; scale:1; }
}
.js-anim :is(.est-active, .est-sortante) .p02b-eclats{
  transform-box:view-box; transform-origin:150px 150px;
  animation:p02b-scintille 2.6s ease-in-out calc(var(--d) + 2000ms) infinite alternate;
}
@keyframes p02b-scintille{ from{ scale:1; opacity:1; rotate:0deg; } to{ scale:1.03; opacity:.55; rotate:6deg; } }

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