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

   Mêmes textes que la page 10, mot pour mot. Le téléphone de la maquette
   devient un compteur : l'aiguille part haut et retombe à zéro, sous
   « COÛT POUR LE CSE = 0 € ». Les trois mains sortent de l'écran et
   tendent chacune un engagement, illustré par son image :
     Engagement au succès        des barres seulement les mois où l'outil
                                 sert, rien les autres ;
     Plafond Garanti             un bouclier qui se remplit sans jamais
                                 toucher la ligne du plafond ;
     Prestation de service       trois modules reliés : gestion,
     complète                    sécurisation, communication.

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

.p10b{ background:#f8f8f8; }

/* ─────────────────────────────── Le décor ───────────────────────────── */
.p10b-tache{ transform:rotate(-2.71deg); opacity:.85; }
.p10b-nappe{
  position:absolute; left:940px; top:300px; width:700px; height:440px; border-radius:50%;
  pointer-events:none; filter:blur(10px);
  background:radial-gradient(closest-side, rgba(36,50,130,.07), rgba(36,50,130,0));
}

/* ─────────────────────────────── Le téléphone ───────────────────────── */
.p10b-tel{ filter:drop-shadow(0 16px 22px rgba(20,30,60,.26)); }

/* Le titre, sur la colonne des cartes. */
.p10b-titre{ white-space:nowrap; line-height:56px; }
.p10b-ecran{
  position:absolute; left:171px; top:98px; width:279px; height:614px; box-sizing:border-box;
  border-radius:38px; overflow:hidden; background:#fff;
  text-align:center; font-family:'Montserrat', sans-serif;
}
.p10b-encoche{
  position:absolute; left:236px; top:97px; width:148px; height:25px;
  background:#0d0d10; border-radius:0 0 16px 16px;
}
.p10b-si{
  position:absolute; left:20px; right:20px; top:48px; margin:0;
  font-family:'Poppins', sans-serif; font-style:italic; font-weight:500;
  font-size:20px; line-height:1.15; color:#243282;
}
.p10b-jauge{ position:absolute; left:34.5px; top:112px; width:210px; height:116px; overflow:visible; }
.p10b-cout{
  position:absolute; left:10px; right:10px; top:236px; margin:0;
  font-weight:800; font-size:25px; line-height:1.1; letter-spacing:.05em; color:#d20074;
}
.p10b-zero-txt{
  display:block; margin-top:2px;
  font-size:86px; line-height:1; letter-spacing:-.02em;
}
/* Le macaron de la maquette, découpé dans l'image de l'écran. */
.p10b-badge.o--img{
  left:39.5px; top:392px; width:200px; height:147px;
  background-size:609px 431px; background-position:-198px -238px;
}
.p10b-logo.o--img{ left:22px; top:552px; width:94px; height:30px; }
.p10b-degrade{
  position:absolute; left:0; right:0; bottom:0; height:20px;
  background:linear-gradient(90deg, #d6713a, #d20074 35%, #9b4fa0 65%, #005a9b);
}

/* Le compteur. */
.p10b-jauge *{ transform-box:view-box; }
.p10b-piste{ fill:none; stroke:#eef0f5; stroke-width:16; stroke-linecap:round; }
.p10b-arc{ fill:none; stroke:url(#p10b-arc); stroke-width:16; stroke-linecap:round; opacity:.9; }
.p10b-graduations path{ fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; }
.p10b-zero{ fill:#d20074; stroke:#fff; stroke-width:3; transform-origin:26px 105px; }
.p10b-aiguille{ fill:#243282; transform-origin:105px 105px; }
.p10b-pivot{ fill:#243282; stroke:#fff; stroke-width:4; }

/* ─────────────────────────────── Les mains ──────────────────────────── */
.p10b-main{ filter:drop-shadow(0 4px 12px rgba(20,30,60,.16)); }
.p10b-main--miroir{ transform:scaleX(-1); }

/* ─────────────────────────────── Les engagements ────────────────────── */
.p10b-carte{
  position:absolute; left:640px; width:716px; height:150px; box-sizing:border-box;
  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;
}
.p10b-carte::before{
  content:""; position:absolute; left:16px; top:16px; width:168px; height:118px;
  border-radius:16px; background:#fbe1ee;
}
.p10b-vis{ position:absolute; left:25px; top:20px; width:150px; height:110px; overflow:visible; }
.p10b-vis *{ transform-box:fill-box; transform-origin:center; }
.p10b-texte{
  position:absolute; left:208px; top:0; bottom:0; width:484px;
  display:flex; flex-direction:column; justify-content:center;
}
.p10b-nom{
  margin:0 0 6px; font-size:25px; font-weight:800; line-height:1.15;
  letter-spacing:-.01em; color:#d20074;
}
.p10b-para{ margin:0; font-size:16.5px; line-height:1.45; color:#2b3344; }
.p10b-lead{ font-weight:700; color:#243282; }

/* 1. Les barres d'utilisation. */
.p10b-sol{ fill:none; stroke:#e7b6cf; stroke-width:2; stroke-linecap:round; }
.p10b-barre{ fill:#d20074; }
.p10b-vide{ fill:#c4a3b5; }

/* 2. Le bouclier. */
.p10b-bouclier-fond{ fill:#fff; }
.p10b-niveau{ fill:#d20074; opacity:.85; }
.p10b-bouclier{ fill:none; stroke:#243282; stroke-width:4; stroke-linejoin:round; }
.p10b-plafond{ fill:none; stroke:#243282; stroke-width:3; stroke-dasharray:.04 .03; stroke-linecap:round; }

/* 3. Les modules. */
.p10b-lien{ fill:none; stroke:#243282; stroke-width:4; stroke-linecap:round; }
.p10b-module > circle:first-child{ fill:#d20074; stroke:#fff; stroke-width:3; }
.p10b-plein{ fill:#fff; }

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

/* L'écran s'allume avec le téléphone ; l'aiguille part haut et retombe. */
.js-anim :is(.est-active, .est-sortante) .p10b-arc{
  stroke-dasharray:1 1;
  animation:p10b-trace 900ms var(--anim-douce) calc(var(--d) + 100ms) both;
}
@keyframes p10b-trace{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
.js-anim :is(.est-active, .est-sortante) .p10b-aiguille{
  animation:p10b-aiguille 1100ms var(--anim-ressort) calc(var(--d) + 300ms) both;
}
@keyframes p10b-aiguille{
  from{ rotate:150deg; }
  30% { rotate:150deg; }
  to  { rotate:0deg; }
}
.js-anim :is(.est-active, .est-sortante) .p10b-zero{
  animation:p10b-eclot 600ms var(--anim-ressort) calc(var(--d) + 1500ms) both,
            p10b-bat 2.4s ease-in-out calc(var(--d) + 2100ms) infinite;
}
@keyframes p10b-eclot{ from{ opacity:0; scale:0; } to{ opacity:1; scale:1; } }
@keyframes p10b-bat{ 0%, 100%{ scale:1; } 50%{ scale:1.3; } }
.js-anim :is(.est-active, .est-sortante) .p10b-zero-txt{
  --d:2350ms;
  animation:p10b-zero 800ms var(--anim-ressort) calc(var(--d) * var(--tempo, 1)) both;
}
@keyframes p10b-zero{ from{ opacity:0; scale:.4; } 50%{ opacity:1; } to{ opacity:1; scale:1; } }

/* Les mains tendent leur objet. */
.js-anim :is(.est-active, .est-sortante) .p10b-main{
  animation:rv-gauche 1100ms var(--anim-courbe) var(--d) both;
}

/* 1. Les barres montent, les mois vides restent à plat. */
.js-anim :is(.est-active, .est-sortante) .p10b-barre{
  transform-origin:bottom;
  animation:p10b-monte 650ms var(--anim-ressort) calc(var(--d) + 450ms + var(--i) * 80ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p10b-vide{
  animation:p10b-apparait 400ms ease-out calc(var(--d) + 450ms + var(--i) * 80ms) both;
}
@keyframes p10b-monte{ from{ scale:1 0; } to{ scale:1 1; } }
@keyframes p10b-apparait{ from{ opacity:0; } to{ opacity:1; } }

/* 2. Le plafond se trace, le bouclier se remplit et s'arrête dessous. */
.js-anim :is(.est-active, .est-sortante) .p10b-plafond{
  animation:p10b-apparait 500ms ease-out calc(var(--d) + 400ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p10b-niveau{
  transform-origin:bottom;
  animation:p10b-remplit 1000ms var(--anim-ressort) calc(var(--d) + 650ms) both;
}
@keyframes p10b-remplit{ from{ scale:1 0; } to{ scale:1 1; } }

/* 3. Le lien se trace, les trois modules s'allument l'un après l'autre. */
.js-anim :is(.est-active, .est-sortante) .p10b-lien{
  stroke-dasharray:1 1;
  animation:p10b-trace 700ms var(--anim-douce) calc(var(--d) + 400ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p10b-module{
  animation:p10b-eclot 600ms var(--anim-ressort) calc(var(--d) + 450ms + var(--i) * 220ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p10b-dents{
  animation:p10b-tourne 6s linear calc(var(--d) + 1200ms) infinite;
}
@keyframes p10b-tourne{ from{ rotate:0deg; } to{ rotate:360deg; } }

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