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

   Mêmes textes que la page 4, mot pour mot. Les deux derniers murs de
   logos, montés comme ceux de la page 3 (tuiles sur panneau, par
   secteur). Au centre, le groupe se tient dans une constellation de
   450 points, un par CSE partenaire : ils s'allument du centre vers le
   bord, par anneaux de 45, pendant que le compteur monte jusqu'à 450,
   puis la constellation respire doucement autour du groupe.

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

.p04b{ background:#ffffff; }

/* ─────────────────────────────── Le décor ───────────────────────────── */
.p04b-nappe{ position:absolute; border-radius:50%; pointer-events:none; filter:blur(10px); }
.p04b-nappe--a{
  left:420px; top:120px; width:600px; height:600px;
  background:radial-gradient(closest-side, rgba(210,0,116,.10), rgba(210,0,116,0));
}
.p04b-nappe--b{
  left:820px; top:-260px; width:900px; height:520px;
  background:radial-gradient(closest-side, rgba(0,90,155,.08), rgba(0,90,155,0));
}

.p04b-filet{ border-radius:999px; background-size:100% 460%; }

/* ─────────────────────────────── Les panneaux ───────────────────────── */
.p04b-panneau{
  position:absolute; border-radius:32px;
  background:linear-gradient(180deg, #fffaf0 0%, #fdf5e4 100%);
  border:1.5px solid rgba(203,161,44,.55);
  box-shadow:0 1px 0 rgba(20,30,60,.04), 0 18px 40px -12px rgba(20,30,60,.18);
}
.p04b-secteur{ display:flex; align-items:center; justify-content:center; gap:12px; }
.p04b-secteur p{ margin:0; white-space:nowrap; }
.p04b-secteur span + span{ margin-left:.1em; }
.p04b-icone{
  flex:none; width:40px; height:40px; padding:8px; border-radius:50%;
  background:#243282; overflow:visible;
  /* 24 px dessinés dans 32 unités : un trait de 2 px à l'écran. */
  fill:none; stroke:#fff; stroke-width:2.67; stroke-linejoin:round; stroke-linecap:round;
}

/* ─────────────────────────────── Le mur ─────────────────────────────── */
.p04b-mur{ position:absolute; perspective:1100px; }
.p04b-tuile{
  position:absolute; border-radius:16px; overflow:hidden;
  background:#fff;
  box-shadow:0 1px 2px rgba(20,30,60,.06), 0 4px 12px -4px rgba(20,30,60,.14);
  outline:1px solid rgba(36,50,130,.06);
  transition:box-shadow .35s var(--anim-courbe);
}
.p04b-tuile:hover{ box-shadow:0 2px 4px rgba(20,30,60,.06), 0 28px 56px -16px rgba(20,30,60,.30); }
.p04b-cote{ position:absolute; inset:0; pointer-events:none; }
.p04b-cote > *{ pointer-events:auto; }
.p04b-tuile .o--img{ background-repeat:no-repeat; }

/* ─────────────────────────────── Le centre ──────────────────────────── */
.p04b-socle{
  position:absolute; left:560px; top:542px; width:320px; height:64px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(36,50,130,.20), rgba(210,0,116,.07) 60%, rgba(210,0,116,0));
}
.p04b-phrase p{
  text-align:center; font-family:'Montserrat', sans-serif; font-weight:500;
  font-size:19px; line-height:1.4; color:#2b3344;
}
.p04b-fort{ display:block; font-size:23px; font-weight:800; color:#243282; margin-bottom:2px; }

/* La constellation : 450 points autour du groupe. */
.p04b-ciel{ position:absolute; left:520px; top:198px; width:400px; height:400px; pointer-events:none; }
.p04b-ciel svg{ width:100%; height:100%; overflow:visible; }
.p04b-pt--rose{ fill:#d20074; opacity:.75; }
.p04b-pt--marine{ fill:#243282; opacity:.7; }
.p04b-pt--bleu{ fill:#005a9b; opacity:.6; }
.p04b-pt--or{ fill:#cba12c; opacity:.9; }
.p04b-bande{ transform-box:view-box; transform-origin:0 0; }

/* Le total : « 450 » en héros, entre ses parenthèses. */
.p04b-total{
  display:flex; align-items:baseline; justify-content:center;
  font-family:'Montserrat', sans-serif; white-space:nowrap; color:#243282;
}
.p04b-par{ font-size:40px; font-weight:400; color:#9a7614; }
.p04b-nb{ font-size:62px; font-weight:800; letter-spacing:-.03em; color:#d20074; margin:0 2px; }
.p04b-mots{ font-size:22px; font-weight:700; white-space:pre; margin-right:4px; }

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

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

/* Trois boucles en tout : chaque mur flotte d'un bloc (en opposition),
   et la constellation respire. */

/* Les tuiles se retournent vers le spectateur, une à une. Le mur de
   gauche pivote d'un côté, celui de droite de l'autre. */
.js-anim :is(.est-active, .est-sortante) .p04b-mur .p04b-tuile{
  animation:p04b-tuile 820ms var(--anim-courbe) var(--d) both;
}
.js-anim :is(.est-active, .est-sortante) .p04b-mur--g .p04b-tuile{ --sens:-1; }
.js-anim :is(.est-active, .est-sortante) .p04b-mur--d .p04b-tuile{ --sens:1; }
@keyframes p04b-tuile{
  from{ opacity:0; rotate:y calc(var(--sens, 1) * 80deg); scale:.92; }
  40% { opacity:1; }
  to  { opacity:1; rotate:y 0deg; scale:1; }
}
.js-anim :is(.est-active, .est-sortante) .p04b-cote--g{
  animation:p04b-flotte 5s ease-in-out 3.2s infinite alternate;
}
.js-anim :is(.est-active, .est-sortante) .p04b-cote--d{
  animation:p04b-flotte 5s ease-in-out 3.2s infinite alternate-reverse;
}
@keyframes p04b-flotte{ from{ translate:0 0; } to{ translate:0 -4px; } }

/* Les points s'allument du centre vers le bord, par anneaux de 45 :
   dix animations au lieu de 450, chacune partie quand le compteur passe
   le rang de son premier point (--t, calculé sur la courbe du compteur). */
.js-anim :is(.est-active, .est-sortante) .p04b-bande{
  animation:p04b-allume 700ms var(--anim-ressort) calc(var(--d) + 150ms + var(--t)) both;
}
@keyframes p04b-allume{ from{ opacity:0; scale:.82; } to{ opacity:1; scale:1; } }

/* Puis la constellation respire : l'animation porte sur le SVG entier,
   qui se compose sans être redessiné. */
.js-anim :is(.est-active, .est-sortante) .p04b-ciel svg{
  animation:p04b-respire 4.4s ease-in-out calc(var(--d) + 1800ms) infinite alternate;
}
@keyframes p04b-respire{ from{ scale:1; opacity:1; } to{ scale:1.035; opacity:.82; } }

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