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

   Mêmes textes que la page 15, mot pour mot. Une grille de tarifs :
     à gauche, les huit critères, chacun avec son pictogramme ;
     en colonnes, les quatre packs, le budget en tête (il monte), la
     taille d'entreprise dessous, puis une coche, une croix ou un niveau
     par critère ;
     l'offre Expert, au centre du choix, plus haute, en couleur pleine,
     marquée d'une étoile.
   Les niveaux de support se lisent comme une jauge à quatre barres, les
   sourcings comme trois points : l'un et l'autre suivent seulement
   l'ordre des colonnes, sans rien ajouter.

   Le mouvement suit la grammaire de la présentation (css/anim.css) : la
   carte monte, puis ses coches se tracent de haut en bas. 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é.
   ══════════════════════════════════════════════════════════════════════ */

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

/* ─────────────────────────────── Le décor ───────────────────────────── */
.p15b-nappe{ position:absolute; border-radius:50%; pointer-events:none; filter:blur(10px); }
.p15b-nappe--a{
  left:640px; top:-300px; width:1000px; height:620px;
  background:radial-gradient(closest-side, rgba(0,90,155,.10), rgba(0,90,155,0));
}
.p15b-nappe--b{
  left:-300px; top:360px; width:900px; height:640px;
  background:radial-gradient(closest-side, rgba(214,113,58,.10), rgba(214,113,58,0));
}
.p15b-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* ───────────────────────── La colonne des critères ──────────────────── */
/* La jauge du budget : quatre secteurs aux couleurs des packs. */
.p15b-compteur{ position:absolute; left:84px; top:184px; width:160px; height:96px; }
.p15b-compteur svg{ display:block; width:160px; height:96px; overflow:visible; }
.p15b-cadran{ fill:none; stroke:#efe8e1; stroke-width:20; }
.p15b-secteur{ fill:none; stroke-width:12; }
.p15b-aiguille{ transform-box:view-box; transform-origin:80px 84px; rotate:-24deg; }
.p15b-aiguille path{ fill:none; stroke:#243282; stroke-width:4; stroke-linecap:round; }
.p15b-moyeu{ fill:#243282; }
.p15b-moyeu-coeur{ fill:#fff; }

.p15b-cil{
  position:absolute; left:268px; top:220px; width:228px; height:48px;
  display:flex; align-items:center; gap:14px;
}
.p15b-cil-txt{
  font-size:30px; font-weight:800; letter-spacing:-.01em; white-space:nowrap;
  background:linear-gradient(90deg, #d20074, #ae4687);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.p15b-cil-fleche{ flex:none; width:88px; height:20px; overflow:visible; }
.p15b-cil-trait{ fill:none; stroke:#d9a3c4; stroke-width:2; stroke-dasharray:.05 .05; stroke-linecap:round; }
.p15b-cil-pointe{ fill:none; stroke:#ae4687; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

.p15b-crit{
  position:absolute; left:84px; width:416px; height:46px;
  display:flex; align-items:center; gap:13px;
  border-bottom:1px solid #e6dfd7;
  font-size:15.5px; font-weight:500; color:#2b3344; white-space:nowrap;
}
.p15b-picto{
  flex:none; width:22px; height:22px;
  fill:none; stroke:#243282; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

/* ─────────────────────────────── Les cartes ─────────────────────────── */
.p15b-carte{
  position:absolute; width:196px; box-sizing:border-box;
  padding-bottom:16px; border-radius:24px;
  background:#fff;
  box-shadow:0 1px 0 rgba(20,30,60,.04), 0 18px 40px -12px rgba(20,30,60,.18);
  overflow:hidden;
  transition:box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.p15b-carte:hover{ box-shadow:0 2px 4px rgba(20,30,60,.06), 0 28px 56px -16px rgba(20,30,60,.30); }
/* Un filet de la couleur du pack, en haut. */
.p15b-carte::before{
  content:""; position:absolute; left:0; right:0; top:0; height:6px; background:var(--c);
}

.p15b-tete{
  height:192px; box-sizing:border-box; padding-top:24px;
  display:flex; flex-direction:column; align-items:center;
  background:linear-gradient(180deg, var(--c2), rgba(255,255,255,0) 92%);
  border-bottom:1px solid #eee8e1;
}
.p15b-nom{
  font-size:24px; font-weight:800; letter-spacing:-.005em; line-height:30px;
  color:var(--c);
}
.p15b-prix{
  margin-top:14px; height:52px; line-height:52px;
  font-size:42px; font-weight:800; letter-spacing:-.035em; white-space:nowrap;
  color:#141b33;
}
/* Le symbole de l'euro, plus petit, posé en exposant : le nombre domine. */
.p15b-eur{ font-size:.6em; font-weight:700; margin-left:3px; vertical-align:.52em; line-height:0; }
.p15b-taille{
  margin-top:14px; height:30px; padding:0 12px; border-radius:999px;
  display:flex; align-items:center; gap:7px;
  background:#fff; box-shadow:inset 0 0 0 1px #e8e1d9;
  font-size:13.5px; font-weight:600; color:#4a5268; white-space:nowrap;
}
.p15b-taille svg{ width:20px; height:14px; fill:var(--c); }

.p15b-cases{ display:flex; flex-direction:column; }
.p15b-case{
  height:46px; display:flex; align-items:center; justify-content:center; gap:9px;
  border-bottom:1px solid #f1ece6;
}
.p15b-case:last-child{ border-bottom:0; }

/* La coche : un disque de la couleur du pack, la coche en blanc. */
.p15b-oui, .p15b-non{ width:27px; height:27px; overflow:visible; }
.p15b-oui circle{ fill:var(--c); }
.p15b-oui path{ fill:none; stroke:#fff; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
/* La croix : grise, discrète, pour que l'œil compte les coches. */
.p15b-non circle{ fill:#f1eeea; }
.p15b-non path{ fill:none; stroke:#aeb3bf; stroke-width:2.4; stroke-linecap:round; }

.p15b-niv{
  font-size:15px; font-weight:600; color:#2a3146; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
}
.p15b-niv--plus{
  padding:5px 12px 5px 10px; border-radius:999px;
  background:linear-gradient(90deg, #243282, #005a9b); color:#fff;
}
.p15b-eclat{ width:13px; height:13px; fill:#cba12c; }

.p15b-jauge{ width:20px; height:15px; flex:none; }
.p15b-jauge rect{ fill:#e7e2dc; }
.p15b-jauge rect.on{ fill:var(--c); }
.p15b-points{ width:30px; height:9px; flex:none; }
.p15b-points circle{ fill:#e7e2dc; }
.p15b-points circle.on{ fill:var(--c); }

/* ── La colonne mise en avant ── */
.p15b-halo{
  position:absolute; left:872px; top:120px; width:316px; height:640px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,90,155,.22), rgba(0,90,155,0));
  filter:blur(6px); pointer-events:none;
}
.p15b-carte--vedette{
  z-index:2; padding-bottom:36px;
  background:linear-gradient(165deg, #0a6bb0 0%, #005a9b 38%, #243282 100%);
  box-shadow:0 2px 0 rgba(20,30,60,.05), 0 30px 60px -18px rgba(0,60,120,.55);
}
.p15b-carte--vedette::before{ background:#cba12c; }
.p15b-carte--vedette::after{
  /* Un reflet qui traverse la carte de temps en temps. */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 65%);
  translate:-120% 0;
}
.p15b-carte--vedette .p15b-tete{
  height:212px; padding-top:44px;
  background:none; border-bottom-color:rgba(255,255,255,.16);
}
.p15b-carte--vedette .p15b-nom{ color:#fff; }
.p15b-carte--vedette .p15b-prix{ color:#fff; }
.p15b-carte--vedette .p15b-taille{ background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); color:#fff; }
.p15b-carte--vedette .p15b-taille svg{ fill:#cba12c; }
.p15b-carte--vedette .p15b-case{ border-bottom-color:rgba(255,255,255,.12); }
.p15b-carte--vedette .p15b-oui circle{ fill:#fff; }
.p15b-carte--vedette .p15b-oui path{ stroke:#005a9b; }
.p15b-carte--vedette .p15b-niv{ color:#fff; }
.p15b-carte--vedette .p15b-jauge rect,
.p15b-carte--vedette .p15b-points circle{ fill:rgba(255,255,255,.22); }
.p15b-carte--vedette .p15b-jauge rect.on,
.p15b-carte--vedette .p15b-points circle.on{ fill:#cba12c; }
.p15b-etoile{
  position:absolute; left:84px; top:16px; width:28px; height:28px;
  fill:#cba12c; filter:drop-shadow(0 2px 6px rgba(203,161,44,.55));
}

/* ══════════════════════════════ Le mouvement ══════════════════════════
   `--d` est le départ de la carte (css/anim.css) ; ses cases se posent
   juste après, de haut en bas. */

/* Les coches éclosent, puis se tracent. */
.js-anim :is(.est-active, .est-sortante) .p15b-oui circle,
.js-anim :is(.est-active, .est-sortante) .p15b-non circle{
  transform-box:fill-box; transform-origin:center;
  animation:p15b-eclot 520ms var(--anim-ressort) calc(var(--d) + 420ms + var(--i) * 70ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p15b-oui path,
.js-anim :is(.est-active, .est-sortante) .p15b-non path{
  stroke-dasharray:1 1;
  animation:p15b-trace 420ms var(--anim-douce) calc(var(--d) + 640ms + var(--i) * 70ms) both;
}
@keyframes p15b-eclot{ from{ scale:0; } to{ scale:1; } }
@keyframes p15b-trace{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

/* Les niveaux se posent avec les coches, les barres montent une à une. */
.js-anim :is(.est-active, .est-sortante) .p15b-niv{
  animation:p15b-pose 520ms var(--anim-courbe) calc(var(--d) + 480ms + var(--i) * 70ms) both;
}
@keyframes p15b-pose{ from{ opacity:0; translate:0 8px; } to{ opacity:1; translate:0 0; } }
.js-anim :is(.est-active, .est-sortante) .p15b-jauge rect{
  transform-box:fill-box; transform-origin:bottom;
  animation:p15b-monte 460ms var(--anim-courbe) calc(var(--d) + 900ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p15b-jauge rect:nth-child(2){ animation-delay:calc(var(--d) + 980ms); }
.js-anim :is(.est-active, .est-sortante) .p15b-jauge rect:nth-child(3){ animation-delay:calc(var(--d) + 1060ms); }
.js-anim :is(.est-active, .est-sortante) .p15b-jauge rect:nth-child(4){ animation-delay:calc(var(--d) + 1140ms); }
@keyframes p15b-monte{ from{ scale:1 0; } to{ scale:1 1; } }
.js-anim :is(.est-active, .est-sortante) .p15b-points circle{
  transform-box:fill-box; transform-origin:center;
  animation:p15b-eclot 420ms var(--anim-ressort) calc(var(--d) + 860ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p15b-points circle:nth-child(2){ animation-delay:calc(var(--d) + 940ms); }
.js-anim :is(.est-active, .est-sortante) .p15b-points circle:nth-child(3){ animation-delay:calc(var(--d) + 1020ms); }

/* Les nappes et le halo se posent sans respirer ensuite : la page posée,
   seuls bougent l'aiguille de la jauge et l'étoile avec son reflet. */
.js-anim :is(.est-active, .est-sortante) :is(.p15b-nappe, .p15b-halo)[data-rv]{
  animation:rv-halo 1800ms ease-out var(--d) both;
}

/* La jauge : ses secteurs se tracent dans l'ordre des packs, l'aiguille
   monte jusqu'en haut, puis frémit, à peine. */
.js-anim :is(.est-active, .est-sortante) .p15b-secteur{
  stroke-dasharray:1 1;
  animation:p15b-trace 420ms var(--anim-douce) calc(var(--d) + 200ms + var(--i) * 140ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p15b-aiguille{
  animation:p15b-aiguille 1000ms var(--anim-ressort) calc(var(--d) + 300ms) both,
            p15b-fremit 2.6s ease-in-out calc(var(--d) + 1300ms) infinite alternate;
}
@keyframes p15b-aiguille{ from{ rotate:-180deg; } to{ rotate:-24deg; } }
@keyframes p15b-fremit{ from{ rotate:-24deg; } to{ rotate:-17deg; } }

/* La flèche du budget se trace vers les prix. */
.js-anim :is(.est-active, .est-sortante) .p15b-cil-trait{
  animation:p15b-pointilles 900ms var(--anim-douce) calc(var(--d) + 300ms) both;
}
@keyframes p15b-pointilles{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
.js-anim :is(.est-active, .est-sortante) .p15b-cil-pointe{
  animation:p15b-apparait 300ms ease-out calc(var(--d) + 1100ms) both;
}
@keyframes p15b-apparait{ from{ opacity:0; } to{ opacity:1; } }

/* L'étoile de la vedette éclot en tournant, puis le reflet passe. */
.js-anim :is(.est-active, .est-sortante) .p15b-etoile{
  animation:p15b-etoile 800ms var(--anim-ressort) calc(var(--d) + 700ms) both,
            p15b-scintille 2.8s ease-in-out calc(var(--d) + 1500ms) infinite alternate;
}
@keyframes p15b-etoile{ from{ opacity:0; scale:0; rotate:-120deg; } to{ opacity:1; scale:1; rotate:0deg; } }
@keyframes p15b-scintille{ from{ scale:1; } to{ scale:1.14; } }
.js-anim :is(.est-active, .est-sortante) .p15b-carte--vedette::after{
  animation:p15b-reflet 5.5s var(--anim-douce) calc(var(--d) + 1800ms) infinite;
}
@keyframes p15b-reflet{
  0%   { translate:-120% 0; }
  30%  { translate:120% 0; }
  100% { translate:120% 0; }
}

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