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

   Mêmes textes que la page 13, mot pour mot. Un cycle qu'on lit d'un
   regard : une orbite autour du cœur rose « ZÉRO GESTION POUR LE CSE »,
   quatre stations, quatre arcs d'or fléchés qui se tracent l'un après
   l'autre dans le sens des aiguilles d'une montre, puis une lueur qui
   tourne sans fin sur la piste.
   Les deux couleurs du titre font la carte : à gauche, en rose, ce qui
   est simple pour vous ; à droite, en marine, ce qui est fluide pour eux.

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

.p13b{ background:#fffaf5; }

/* ─────────────────────────────── Le décor ───────────────────────────── */
.p13b-nappe{ position:absolute; border-radius:50%; pointer-events:none; filter:blur(12px); }
.p13b-nappe--vous{
  left:-200px; top:150px; width:820px; height:610px;
  background:radial-gradient(closest-side, rgba(210,0,116,.09), rgba(210,0,116,0));
}
.p13b-nappe--eux{
  left:820px; top:80px; width:820px; height:680px;
  background:radial-gradient(closest-side, rgba(0,90,155,.09), rgba(0,90,155,0));
}

.p13b-titre{ font-size:46px; line-height:56px; white-space:nowrap; }

/* ─────────────────────────────── L'orbite ───────────────────────────── */
.p13b-orbite{ position:absolute; left:440px; top:268px; width:560px; height:392px; overflow:visible; pointer-events:none; }
.p13b-orbite *{ transform-box:fill-box; transform-origin:center; }
/* La piste : un large ruban très pâle, du rose au marine. */
.p13b-piste{ fill:none; stroke:url(#p13b-piste-degrade); stroke-width:30; opacity:.07; }
.p13b-piste-pointillee{ fill:none; stroke:#cba12c; stroke-width:2; stroke-dasharray:.6 1.4; stroke-linecap:round; opacity:.55; }
/* Les arcs d'or et leurs pointes. */
.p13b-arc{ fill:none; stroke:#cba12c; stroke-width:7; stroke-linecap:round; }
.p13b-pointe{ fill:none; stroke:#cba12c; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; }
/* La lueur qui circule : un court trait clair qui file sur la piste. */
.p13b-lueur{
  fill:none; stroke:#fff; stroke-width:4; stroke-linecap:round;
  stroke-dasharray:4 96;
  filter:drop-shadow(0 0 4px rgba(203,161,44,.9));
}
/* Les stations. */
.p13b-station{ fill:#fff; stroke-width:6; }
.p13b-station--vous{ stroke:#d20074; }
.p13b-station--eux{ stroke:#243282; }

/* ─────────────────────────────── Les étapes ─────────────────────────── */
.p13b-etape{ font-family:'Montserrat', sans-serif; font-size:16.5px; line-height:1.4; color:#2b3344; }
.p13b-etape p{ margin:0; text-wrap:balance; }
.p13b-etape .p13b-fort{ font-size:19.5px; font-weight:800; line-height:1.3; margin-bottom:3px; letter-spacing:-.005em; }
.p13b-etape--vous .p13b-fort{ color:#d20074; }
.p13b-etape--eux .p13b-fort{ color:#243282; }

/* Les images, recadrées sur leur sujet, sans déformation. */
.p13b-fusee{ background-size:433px 243px !important; background-position:-48px -26px !important; }
.p13b-cabine{
  background-size:134.5% 124.2% !important; background-position:0 0 !important;
  border-radius:24px; box-shadow:0 1px 0 rgba(20,30,60,.04), 0 18px 40px -12px rgba(20,30,60,.18);
  outline:4px solid #fff;
}
.p13b-borne{ background-size:138px 207px !important; background-position:-11.5px -9.6px !important; }
.p13b-bureau{ background-size:337px 225px !important; background-position:-21px -22px !important; }

/* DUOPilot : une tuile blanche, le logo et un petit tableau de bord vivant. */
.p13b-tuile{
  position:absolute; width:356px; height:156px; border-radius:24px; background:#fff;
  box-shadow:0 1px 0 rgba(20,30,60,.04), 0 18px 40px -12px rgba(20,30,60,.18);
}
.p13b-logo{ background-size:302px 145px !important; background-position:-50px -13px !important; }
.p13b-direct{ position:absolute; left:222px; top:18px; width:120px; height:120px; overflow:visible; }
.p13b-direct *{ transform-box:fill-box; transform-origin:center; }
.p13b-ecran{ fill:#f1f5fb; stroke:#dbe4f0; stroke-width:1.5; }
.p13b-courbe{ fill:none; stroke:#005a9b; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
.p13b-barre{ fill:#243282; opacity:.22; }
.p13b-barre:last-of-type{ opacity:.35; }
.p13b-direct-point{ fill:#1fa463; }
.p13b-direct-onde{ fill:#1fa463; opacity:0; }

/* ─────────────────────────────── Le cœur ────────────────────────────── */
.p13b-pouls{
  position:absolute; left:545px; top:300px; width:350px; height:330px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(210,0,116,.22), rgba(210,0,116,.08) 55%, rgba(210,0,116,0));
}
.p13b-eclat{ filter:drop-shadow(0 16px 26px rgba(210,0,116,.30)); }
.p13b-coeur{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:'Montserrat', sans-serif; color:#fff; text-align:center;
}
.p13b-coeur p{ margin:0; white-space:nowrap; }
.p13b-zero{ font-size:35px; font-weight:800; line-height:1.02; letter-spacing:.01em; }
.p13b-cse{ margin-top:7px !important; font-size:18px; font-weight:700; letter-spacing:.14em; }

/* ══════════════════════════════ Le mouvement ══════════════════════════
   L'orbite part à 300 ms ; chaque pièce s'y place à `--t` après. */

/* Chaque station s'allume quand son étape arrive. */
.js-anim :is(.est-active, .est-sortante) .p13b-station{
  animation:p13b-eclot 650ms var(--anim-ressort) calc(var(--d) + var(--t)) both;
}
@keyframes p13b-eclot{ from{ scale:0; opacity:0; } to{ scale:1; opacity:1; } }

/* Chaque arc se trace vers l'étape suivante, puis sa pointe se pose. */
.js-anim :is(.est-active, .est-sortante) .p13b-arc{
  stroke-dasharray:1 1;
  animation:p13b-trace 650ms var(--anim-douce) calc(var(--d) + var(--t)) both;
}
@keyframes p13b-trace{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
.js-anim :is(.est-active, .est-sortante) .p13b-pointe{
  animation:p13b-pointe 380ms var(--anim-ressort) calc(var(--d) + var(--t) + 560ms) both;
}
@keyframes p13b-pointe{ from{ opacity:0; scale:.3; } to{ opacity:1; scale:1; } }

/* La lueur ne part qu'une fois le cycle bouclé, et ne s'arrête plus. */
.js-anim :is(.est-active, .est-sortante) .p13b-lueur{
  animation:p13b-apparait 400ms ease-out calc(var(--d) + 2800ms) both,
            p13b-circule 4.8s linear calc(var(--d) + 2800ms) infinite;
}
@keyframes p13b-apparait{ from{ opacity:0; } to{ opacity:1; } }
@keyframes p13b-circule{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-100; } }

/* Le petit tableau de bord : la courbe se trace, les barres montent, le
   point « en direct » bat. */
.js-anim :is(.est-active, .est-sortante) .p13b-courbe{
  stroke-dasharray:1 1;
  animation:p13b-trace 900ms var(--anim-douce) calc(var(--d) + 500ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p13b-barre{
  transform-origin:bottom;
  animation:p13b-monte 600ms var(--anim-courbe) calc(var(--d) + 400ms + var(--i) * 70ms) both;
}
@keyframes p13b-monte{ from{ scale:1 0; } to{ scale:1 1; } }
.js-anim :is(.est-active, .est-sortante) .p13b-direct-onde{
  animation:p13b-onde 1.8s ease-out calc(var(--d) + 1100ms) infinite;
}
@keyframes p13b-onde{ from{ scale:1; opacity:.55; } to{ scale:2.6; opacity:0; } }

/* Les nappes et l'orbite se posent sans respirer ensuite : trois sujets
   bougent seuls une fois la page posée (le cœur, la lueur, le direct). */
.js-anim :is(.est-active, .est-sortante) :is(.p13b-nappe, .p13b-orbite)[data-rv]{
  animation:rv-halo 1800ms ease-out var(--d) both;
}

/* Le cœur bat doucement derrière l'éclat. */
.js-anim :is(.est-active, .est-sortante) .p13b-pouls{
  animation:rv-pastille 800ms var(--anim-ressort) var(--d) both,
            p13b-bat 2.4s ease-in-out calc(var(--d) + 800ms) infinite;
}
@keyframes p13b-bat{
  0%, 100%{ scale:1; opacity:1; }
  18%     { scale:1.08; opacity:.85; }
  36%     { scale:1; opacity:1; }
}

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