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

   Mêmes textes que la page 5, mot pour mot. Chaque constat devient une
   image qu'on comprend avant de lire :
     Usage Fantôme       vingt salariés, deux ou trois en couleur, les
                         autres en fantômes qui flottent ;
     Remises Invisibles  un prix entier, dont la remise n'est qu'un mince
                         quartier qu'il faut une loupe pour voir ;
     Inertie du Mandat   le coût, plat et verrouillé mois après mois,
                         sous l'intérêt des salariés qui monte et descend ;
     Inertie budgétaire  un moniteur : deux battements, puis plus rien.
   Un enquêteur, loupe en main, se penche sur les quatre.

   Le mouvement suit la grammaire de la présentation (css/anim.css) : la
   carte entre, puis son image se construit. Les états de départ ne
   vivent que dans les animations : sans script, à l'impression ou avec
   « réduire les animations », tout est simplement posé.
   ══════════════════════════════════════════════════════════════════════ */

.p5b{ background:#f4f4f4; }

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

/* L'enquêteur est retourné : sur la page 5 il regardait une photo à sa
   droite, ici il se penche vers les constats, à sa gauche. */
.p5b-enqueteur{ transform:scaleX(-1); }

/* Une lueur derrière la loupe : c'est là que le regard se pose. */
.p5b-lueur{
  position:absolute; left:1022px; top:281px; width:150px; height:150px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.55) 45%, rgba(210,0,116,.10) 70%, rgba(210,0,116,0));
}

/* ─────────────────────────────── Les cartes ─────────────────────────── */
.p5b-carte{
  position:absolute; width:468px; height:256px; box-sizing:border-box;
  padding:24px 0 0 28px; border-radius:24px;
  background:#fff;
  box-shadow:0 1px 0 rgba(20,30,60,.04), 0 18px 40px -12px rgba(20,30,60,.18);
  font-family:'Montserrat', sans-serif;
  overflow:hidden;
  transition:box-shadow .35s cubic-bezier(.16,1,.3,1);
}
/* Un filet de la couleur du constat, et un aplat très pâle sous l'image. */
.p5b-carte::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:7px; background:var(--c);
}
.p5b-carte::after{
  content:""; position:absolute; right:-40px; top:-40px; width:270px; height:346px;
  border-radius:50%; background:var(--c2); opacity:.55; z-index:0;
}
.p5b-carte:hover{ box-shadow:0 2px 4px rgba(20,30,60,.06), 0 28px 56px -16px rgba(20,30,60,.30); }
.p5b-carte > *{ position:relative; z-index:1; }

.p5b-tag{
  display:inline-block; padding:6px 14px 7px; border-radius:999px;
  background:var(--t); color:#fff;
  font-size:17px; font-weight:700; letter-spacing:.005em; white-space:nowrap;
}
.p5b-chiffre{
  margin:16px 0 8px; width:236px;
  font-size:39px; font-weight:800; line-height:1.05; letter-spacing:-.02em;
  color:var(--t); white-space:nowrap;
}
.p5b-chiffre .p5b-zero{ font-size:58px; line-height:.9; vertical-align:-6px; }
.p5b-carte--social .p5b-chiffre{ font-size:25px; }
.p5b-texte{
  margin:0; width:232px; text-wrap:pretty;
  font-size:15.5px; line-height:1.42; color:#2b3344;
}

/* L'image du constat, à droite de la carte. */
.p5b-vis{
  position:absolute !important; right:16px; top:20px; width:178px; height:216px; overflow:visible;
}
.p5b-vis *{ transform-box:fill-box; transform-origin:center; }

/* ── 1. Usage Fantôme ── */
.p5b-sil{ stroke-linejoin:round; }
.p5b-sil--vu{ fill:var(--c); }
.p5b-sil--mi{ fill:var(--c); opacity:.45; }
.p5b-sil--fantome{
  fill:rgba(255,255,255,.6); stroke:#a9b3c3; stroke-width:1.4; stroke-dasharray:2.6 2.2;
  opacity:.75;
}

/* ── 2. Remises Invisibles ── */
.p5b-anneau{ fill:none; stroke:#c3d1e2; stroke-width:24; }
/* Le cercle commence en haut. Rotation en CSS, autour de son propre
   centre : un rotate() en attribut SVG se combinerait mal avec
   transform-box et partirait hors de la carte. */
.p5b-anneau, .p5b-quartier{ rotate:-90deg; }
.p5b-quartier{ fill:none; stroke-width:24; }
.p5b-quartier--plein{ stroke:var(--c); stroke-dasharray:5 95; }
.p5b-quartier--clair{ stroke:var(--c); opacity:.4; stroke-dasharray:3 97; stroke-dashoffset:-5; }
.p5b-loupe circle{ fill:rgba(255,255,255,.55); stroke:#243282; stroke-width:6; }
.p5b-loupe line{ stroke:#243282; stroke-width:10; stroke-linecap:round; }
.p5b-reflet{ fill:none; stroke:#fff; stroke-width:4; stroke-linecap:round; opacity:.9; }

/* ── 3. Inertie du Mandat ── */
.p5b-interesse{ fill:#7f8ba1; }
.p5b-vague{ fill:none; stroke:#9aa5b8; stroke-width:3; stroke-linecap:round; stroke-dasharray:1; }
.p5b-plat{ fill:none; stroke:var(--c); stroke-width:4; stroke-linecap:round; }
.p5b-barres rect{ fill:var(--c); }
.p5b-barres rect:nth-child(odd){ opacity:.85; }
.p5b-cadenas path{ fill:none; stroke:#243282; stroke-width:3.5; stroke-linecap:round; }
.p5b-cadenas rect{ fill:#243282; }

/* ── 4. Inertie budgétaire ── */
.p5b-ecran{ fill:#fff7fb; stroke:#f0c7db; stroke-width:2; }
.p5b-grille path{ fill:none; stroke:#f4d9e7; stroke-width:1; }
.p5b-coeur{ fill:#c9cfd9; }
.p5b-pouls{ fill:none; stroke:var(--c); stroke-width:3.5; stroke-linejoin:round; stroke-linecap:round; }
.p5b-point{ fill:var(--c); }

/* ══════════════════════════════ Le mouvement ══════════════════════════
   `--d` est le départ de la carte (css/anim.css) ; l'image se construit
   juste après, quand la carte est posée. */
.js-anim :is(.est-active, .est-sortante).p5b{ --apres: calc(var(--d, 0ms) + 420ms); }

/* Les nappes se posent et ne bougent plus : la page garde ses trois
   seules boucles pour les fantômes, la loupe et le point du moniteur. */
.js-anim :is(.est-active, .est-sortante) .p5b-nappe{
  animation:rv-halo 1100ms ease-out var(--d) both;
}

/* La lueur éclot derrière la loupe, puis reste. */
.js-anim :is(.est-active, .est-sortante) .p5b-lueur{
  animation:rv-pastille 900ms var(--anim-ressort) var(--d) both;
}

/* 1. Les salariés présents éclosent, puis les fantômes apparaissent ;
      ensuite ils flottent ensemble, d'un seul bloc. */
.js-anim :is(.est-active, .est-sortante) .p5b-sil--vu,
.js-anim :is(.est-active, .est-sortante) .p5b-sil--mi{
  animation:p5b-leve 700ms var(--anim-ressort) calc(var(--d) + 420ms + var(--i) * 110ms) both;
}
/* Pas d'échelle sur un <use> : son centre de transformation ignore ses
   x / y et il grossirait depuis le coin de l'image. On le fait monter. */
@keyframes p5b-leve{
  from{ translate:0 14px; filter:opacity(0); }
  to  { translate:0 0;    filter:opacity(1); }
}
@keyframes p5b-eclot{ from{ scale:0; } to{ scale:1; } }
.js-anim :is(.est-active, .est-sortante) .p5b-sil--fantome{
  animation:p5b-fantome 600ms ease-out calc(var(--d) + 600ms + var(--i) * 30ms) both;
}
@keyframes p5b-fantome{ from{ opacity:0; translate:0 6px; } to{ opacity:.75; translate:0 0; } }
.js-anim :is(.est-active, .est-sortante) .p5b-fantomes{
  animation:p5b-flotte 3.4s ease-in-out calc(var(--d) + 1800ms) infinite alternate;
}
@keyframes p5b-flotte{
  from{ translate:0 0; opacity:1; }
  to  { translate:0 -4px; opacity:.6; }
}

/* 2. Le prix se trace en entier, la remise apparaît à peine, la loupe
      vient se poser dessus. */
.js-anim :is(.est-active, .est-sortante) .p5b-anneau{
  stroke-dasharray:100 100;
  animation:p5b-trace-cercle 1000ms var(--anim-douce) calc(var(--d) + 380ms) both;
}
@keyframes p5b-trace-cercle{ from{ stroke-dashoffset:100; } to{ stroke-dashoffset:0; } }
.js-anim :is(.est-active, .est-sortante) .p5b-quartier{
  animation:p5b-apparait 500ms ease-out calc(var(--d) + 1250ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p5b-quartier--clair{
  animation:p5b-apparait-clair 500ms ease-out calc(var(--d) + 1400ms) both;
}
@keyframes p5b-apparait{ from{ opacity:0; } to{ opacity:1; } }
@keyframes p5b-apparait-clair{ from{ opacity:0; } to{ opacity:.4; } }
.js-anim :is(.est-active, .est-sortante) .p5b-loupe{
  animation:p5b-loupe 900ms var(--anim-courbe) calc(var(--d) + 1450ms) both,
            p5b-scrute 3s ease-in-out calc(var(--d) + 2350ms) infinite alternate;
}
@keyframes p5b-loupe{
  from{ opacity:0; translate:40px 44px; rotate:12deg; }
  to  { opacity:1; translate:0 0; rotate:0deg; }
}
@keyframes p5b-scrute{ from{ translate:0 0; } to{ translate:-5px 3px; } }

/* 3. Les mois s'alignent à la même hauteur, le plafond se trace et se
      verrouille ; au-dessus, l'intérêt des salariés monte et descend. */
.js-anim :is(.est-active, .est-sortante) .p5b-barres rect{
  transform-origin:bottom;
  animation:p5b-monte 600ms var(--anim-courbe) calc(var(--d) + 400ms + var(--i) * 55ms) both;
}
@keyframes p5b-monte{ from{ scale:1 0; } to{ scale:1 1; } }
.js-anim :is(.est-active, .est-sortante) .p5b-plat{
  stroke-dasharray:1 1;
  animation:p5b-trace 600ms var(--anim-douce) calc(var(--d) + 950ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p5b-cadenas{
  animation:p5b-eclot 500ms var(--anim-ressort) calc(var(--d) + 1400ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p5b-interesse{
  animation:p5b-apparait 400ms ease-out calc(var(--d) + 1450ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p5b-vague{
  stroke-dasharray:1 1;
  animation:p5b-trace 1000ms var(--anim-douce) calc(var(--d) + 1550ms) both;
}
@keyframes p5b-trace{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

/* 4. Le moniteur s'allume, le pouls se trace : deux battements de plus en
      plus faibles, puis la ligne plate. Le cœur, rose, pâlit. Un point
      continue de courir sur la ligne, sans rien rencontrer. */
.js-anim :is(.est-active, .est-sortante) .p5b-pouls{
  stroke-dasharray:1 1;
  animation:p5b-trace 1100ms linear calc(var(--d) + 450ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p5b-coeur{
  animation:p5b-bat 1100ms ease-in-out calc(var(--d) + 450ms) both;
}
@keyframes p5b-bat{
  0%  { fill:#d20074; scale:1; }
  14% { fill:#d20074; scale:1.22; }
  24% { scale:1; }
  40% { fill:#e05a9c; scale:1.1; }
  52% { scale:1; }
  100%{ fill:#c9cfd9; scale:1; }
}
.js-anim :is(.est-active, .est-sortante) .p5b-point{
  animation:p5b-apparait 400ms ease-out calc(var(--d) + 1500ms) both,
            p5b-court 2.6s ease-in-out calc(var(--d) + 1500ms) infinite;
}
@keyframes p5b-court{
  0%  { translate:0 0; opacity:1; }
  85% { translate:70px 0; opacity:1; }
  100%{ translate:70px 0; opacity:0; }
}

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