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

   Mêmes textes que la page 17, mot pour mot. La page se lit comme une
   chaîne, de gauche à droite :
     le CSE fixe son enveloppe : une jauge de carburant se remplit ;
     le moteur DuoPilot, un bloc sombre, s'allume : son cœur envoie le
     flux à ses quatre organes par des fils où le carburant circule ;
     les salariés en profitent : le cochon tirelire se prélasse.
   Dessous, trois exemples comme trois billets : la photo, le tarif en
   gros, le gain en vert, et l'indice CIL en barre (rapporté au plus
   grand des trois, 39,00). Puis le bouton vers le simulateur.

   Finitions du 06/11 : titre au système commun (46 px, deux lignes),
   textes remontés aux tailles minimales, grille 84 à 1356, entrée posée
   avant 3,6 s, trois sujets seulement bougent en boucle (le flux dans
   les fils, le cochon, le bouton).

   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é.
   ══════════════════════════════════════════════════════════════════════ */

.p17b{ background:#fffaf5; font-family:'Montserrat', sans-serif; }

/* ─────────────────────────────── Le décor ───────────────────────────── */
.p17b-nappe{ position:absolute; border-radius:50%; pointer-events:none; filter:blur(10px); }
.p17b-nappe--a{
  left:-280px; top:80px; width:820px; height:620px;
  background:radial-gradient(closest-side, rgba(203,161,44,.13), rgba(203,161,44,0));
}
.p17b-nappe--b{
  left:960px; top:-100px; width:760px; height:720px;
  background:radial-gradient(closest-side, rgba(210,0,116,.10), rgba(210,0,116,0));
}

.p17b-titre p{ line-height:56px; white-space:nowrap; }
.p17b-chapo{ font-size:16px; line-height:24px; font-weight:500; color:#2b3344; white-space:nowrap; }

/* ─────────────────────────────── Les macarons ───────────────────────── */
.p17b-macaron{ position:absolute; }
.p17b-macaron-txt{
  position:absolute; margin:0; text-align:center;
  font-weight:800; line-height:1.3; letter-spacing:.06em; color:#fff;
  text-shadow:0 1px 2px rgba(120,0,60,.35);
}
.p17b-legende{
  margin:0; text-align:center;
  font-family:'Poppins', sans-serif; font-size:14px; line-height:20px; color:#2b3344;
}

/* ─────────────────────────── 1. La jauge du CSE ─────────────────────── */
.p17b-jauge{ position:absolute; left:138px; top:336px; width:140px; height:84px; overflow:visible; }
.p17b-jauge-fond{ fill:none; stroke:#ece4da; stroke-width:12; stroke-linecap:round; }
.p17b-jauge-plein{ fill:none; stroke:url(#p17b-degrade-jauge); stroke-width:12; stroke-linecap:round; }
.p17b-jauge-graduations path{ fill:none; stroke:#c9bfb3; stroke-width:2; stroke-linecap:round; }
.p17b-pompe rect{ fill:#243282; }
.p17b-pompe path{ fill:none; stroke:#243282; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.p17b-pompe path:first-of-type{ stroke:#fff; }
/* L'aiguille tourne autour de son pivot, posée presque au plein. */
.p17b-aiguille{
  stroke:#d20074; stroke-width:4; stroke-linecap:round;
  transform-box:view-box; transform-origin:70px 72px; rotate:72deg;
}
.p17b-pivot{ fill:#d20074; stroke:#fff; stroke-width:2; }

/* ─────────────────────────────── 2. Le moteur ───────────────────────── */
.p17b-moteur{
  position:absolute; left:360px; top:190px; width:696px; height:292px;
  border-radius:32px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(0,90,155,.55), rgba(0,90,155,0) 60%),
    linear-gradient(160deg, #22307c 0%, #1b2566 55%, #141c4e 100%);
  box-shadow:0 2px 4px rgba(20,30,60,.06), 0 28px 56px -16px rgba(20,30,60,.30);
}
/* Le cœur : une lueur sous le logo. */
.p17b-coeur{
  position:absolute; left:24px; top:-14px; width:220px; height:170px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,.45) 55%, rgba(255,255,255,0));
}
.p17b-moteur-legende{
  position:absolute; left:16px; top:250px; width:224px; margin:0; text-align:center;
  font-family:'Poppins', sans-serif; font-size:13px; line-height:18px; color:rgba(255,255,255,.88);
}
.p17b-bus{ position:absolute; left:0; top:0; width:696px; height:292px; overflow:visible; }
.p17b-fil{ fill:none; stroke:rgba(203,161,44,.38); stroke-width:2.5; stroke-linecap:round; }
.p17b-flux{
  fill:none; stroke:#ffd45c; stroke-width:3.5; stroke-linecap:round;
  stroke-dasharray:6 22;
}

.p17b-organe{
  position:absolute; left:276px; width:404px; height:64px;
  padding-left:64px; box-sizing:border-box;
}
.p17b-pastille{
  position:absolute; left:0; top:0; width:48px; height:48px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #e0bb4f, #cba12c 60%, #a8841f);
  box-shadow:0 0 0 5px rgba(203,161,44,.16), 0 1px 2px rgba(0,0,0,.2), 0 4px 12px -4px rgba(0,0,0,.45);
}
.p17b-organe-titre{
  margin:0;
  font-size:17px; font-weight:700; line-height:22px; color:#fff;
}
.p17b-organe-txt{
  margin:2px 0 0;
  font-family:'Poppins', sans-serif; font-size:13px; line-height:18px; color:rgba(255,255,255,.8);
}

/* ─────────────────────────────── 3. Les salariés ────────────────────── */
.p17b-ombre{
  position:absolute; left:1150px; top:500px; width:160px; height:24px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(36,50,130,.22), rgba(36,50,130,0));
}

/* ─────────────────────────────── Les billets ────────────────────────── */
.p17b-billet{
  position:absolute; top:506px; width:296px; height:232px;
  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);
}
.p17b-photo{
  left:0; top:0; width:296px; height:88px;
  background-size:cover !important;
}
.p17b-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,20,50,0) 40%, rgba(10,20,50,.42));
}
.p17b-nom{
  position:absolute; left:16px; top:56px; margin:0; padding:5px 12px;
  border-radius:999px; background:#fff;
  font-size:11.5px; line-height:14px; font-weight:800; letter-spacing:.06em; color:#005b9c; white-space:nowrap;
  box-shadow:0 1px 2px rgba(20,30,60,.06), 0 4px 12px -4px rgba(20,30,60,.14);
}
.p17b-corps{ position:absolute; left:16px; right:16px; top:102px; bottom:14px; }
.p17b-tarif{ position:absolute; left:0; top:0; width:132px; margin:0; font-family:'Poppins', sans-serif; }
.p17b-tarif-lib{ display:block; font-size:13px; line-height:17px; color:#5b6476; }
.p17b-tarif-val{
  display:block; margin-top:2px;
  font-family:'Montserrat', sans-serif; font-size:34px; font-weight:800; line-height:38px; letter-spacing:-.02em; color:#243282;
}
.p17b-gain{
  position:absolute; right:0; top:0; width:128px; height:72px; margin:0; box-sizing:border-box;
  padding:10px 4px 0; border-radius:16px; text-align:center;
  background:#e3f5ec; color:#0f7c45;
  font-family:'Poppins', sans-serif;
}
.p17b-gain-lib{ display:block; font-size:13px; line-height:17px; font-weight:500; white-space:nowrap; }
.p17b-gain-val{ display:block; margin-top:2px; font-family:'Montserrat', sans-serif; font-size:22px; font-weight:800; line-height:26px; color:#0e8a4c; }
.p17b-cil{
  position:absolute; left:0; right:0; top:84px; margin:0;
  font-family:'Poppins', sans-serif; font-size:13px; line-height:18px; color:#2b3344;
}
.p17b-cil b{ font-weight:700; color:#8a6a10; }
.p17b-barre{
  position:absolute; left:0; right:0; top:108px; height:8px; border-radius:999px;
  background:#f1ebe2; overflow:hidden;
}
.p17b-barre i{
  position:absolute; left:0; top:0; bottom:0; width:var(--cil); border-radius:999px;
  background:linear-gradient(90deg, #cba12c, #d6713a);
  transform-origin:left;
}

/* ─────────────────────────────── Le bouton ──────────────────────────── */
.p17b-bouton{
  border-radius:16px;
  background:linear-gradient(180deg, #0d844c, #0a6f40);
  box-shadow:0 12px 26px -10px rgba(13,132,76,.7), inset 0 1px 0 rgba(255,255,255,.22);
}
.p17b-cta{
  display:flex; align-items:center; justify-content:center;
  font-size:19px; font-weight:800; letter-spacing:.04em; color:#fff;
}

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

/* Les nappes, les macarons et l'ombre se posent sans respirer ensuite :
   les seules boucles de la page sont le flux, le cochon et le bouton. */
.js-anim :is(.est-active, .est-sortante) .p17b-nappe[data-rv="halo"]{
  animation:rv-halo 1800ms ease-out var(--d) both;
}
.js-anim :is(.est-active, .est-sortante) .p17b-ombre[data-rv="halo"]{
  animation:rv-halo 900ms ease-out var(--d) both;
}
.js-anim :is(.est-active, .est-sortante) .p17b-macaron[data-rv="eclat"]{
  animation:rv-eclat 900ms var(--anim-ressort) var(--d) both;
}

/* La jauge : l'arc se remplit, l'aiguille monte au plein. */
.js-anim :is(.est-active, .est-sortante) .p17b-jauge-plein{
  stroke-dasharray:1 1;
  animation:p17b-trace 1000ms var(--anim-douce) calc(var(--d) + 200ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p17b-aiguille{
  animation:p17b-aiguille 1000ms var(--anim-douce) calc(var(--d) + 200ms) both;
}
@keyframes p17b-aiguille{ from{ rotate:-86deg; } 85%{ rotate:78deg; } to{ rotate:72deg; } }
@keyframes p17b-trace{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

/* Le cœur du moteur s'allume. */
.js-anim :is(.est-active, .est-sortante) .p17b-coeur{
  animation:p17b-allume 900ms var(--anim-courbe) calc(var(--d) + 200ms) both;
}
@keyframes p17b-allume{ from{ opacity:0; scale:.6; } to{ opacity:1; scale:1; } }

/* Les fils se tracent vers les organes, puis le carburant y circule. */
.js-anim :is(.est-active, .est-sortante) .p17b-fil{
  stroke-dasharray:1 1;
  animation:p17b-trace 700ms var(--anim-douce) calc(var(--d) + 600ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p17b-flux{
  animation:p17b-allume-flux 400ms ease-out calc(var(--d) + 1300ms) both,
            p17b-circule 1.6s linear calc(var(--d) + 1300ms) infinite;
}
@keyframes p17b-allume-flux{ from{ opacity:0; } to{ opacity:1; } }
@keyframes p17b-circule{ from{ stroke-dashoffset:28; } to{ stroke-dashoffset:0; } }

/* Les pastilles des organes éclosent avec leur ligne. */
.js-anim :is(.est-active, .est-sortante) .p17b-pastille{
  animation:p17b-eclot 600ms var(--anim-ressort) calc(var(--d) + 120ms) both;
}
@keyframes p17b-eclot{ from{ scale:0; } to{ scale:1; } }

/* Le cochon, posé, respire au soleil. */
.js-anim :is(.est-active, .est-sortante) .p17b-cochon{
  animation:rv-visuel 1000ms var(--anim-courbe) var(--d) both,
            p17b-prelasse 3.4s ease-in-out calc(var(--d) + 1000ms) infinite alternate;
}
@keyframes p17b-prelasse{ from{ translate:0 0; } to{ translate:0 -4px; } }

/* La barre CIL de chaque billet se remplit. */
.js-anim :is(.est-active, .est-sortante) .p17b-barre i{
  animation:p17b-remplit 800ms var(--anim-courbe) calc(var(--d) + 400ms) both;
}
@keyframes p17b-remplit{ from{ scale:0 1; } to{ scale:1 1; } }

/* Le gain apparaît, un peu après le tarif. */
.js-anim :is(.est-active, .est-sortante) .p17b-gain{
  animation:p17b-gain 600ms var(--anim-ressort) calc(var(--d) + 350ms) both;
}
@keyframes p17b-gain{ from{ opacity:0; scale:.7; } to{ opacity:1; scale:1; } }

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