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

   Mêmes textes que la page 16, mot pour mot. La progression se voit
   avant de se lire :
     les quatre en-têtes forment un escalier, de Standard à Elite, que
     longe une flèche d'or ;
     le sourcing se compte en repères : aucun (la croix de la maquette),
     un, trois, puis une file qui se perd au loin ;
     chaque support « inclut » le précédent : une pastille de couches
     et un « + » entre les colonnes.
   Les trois lignes restent alignées d'une colonne à l'autre, avec leur
   intitulé et leur pictogramme à gauche : on compare d'un regard.

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

.p16b{ background:#fffaf5; }

/* ─────────────────────────────── Le décor ───────────────────────────── */
.p16b-nappe{
  position:absolute; left:820px; top:-240px; width:900px; height:640px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,90,155,.12), rgba(0,90,155,0));
  filter:blur(10px); pointer-events:none;
}
.p16b-titre{ font-size:46px; line-height:56px; white-space:nowrap; }

/* ─────────────────────────────── Les lignes ─────────────────────────── */
.p16b-ligne{
  position:absolute; left:84px; width:196px; box-sizing:border-box;
  display:flex; align-items:center; gap:10px;
  border-bottom:1.5px solid rgba(36,50,130,.16);
  font-family:'Montserrat', sans-serif; font-size:15px; font-weight:700; line-height:1.3; color:#243282;
}
.p16b-ligne--haut{ align-items:flex-start; padding-top:22px; border-bottom:none; }
.p16b-ligne p{ margin:0; }
.p16b-picto{
  flex:none; width:40px; height:40px; box-sizing:border-box; padding:9px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(20,30,60,.06), 0 4px 12px -4px rgba(20,30,60,.14);
  fill:#d20074; overflow:visible;
}
.p16b-picto-trait{ fill:none; stroke:#d20074; stroke-width:2; stroke-linecap:round; }
.p16b-picto-anneau{ fill:#d20074; }
.p16b-picto-blanc{ fill:none; stroke:#fff; stroke-width:2.6; }

/* ─────────────────────────────── L'escalier ─────────────────────────── */
/* Toutes les colonnes partent de la même ligne (y 112) ; l'en-tête
   commence plus ou moins bas (`--marche`), le corps à y 262 pour toutes,
   et toutes finissent à y 750. */
.p16b-col{
  position:absolute; top:112px; width:260px; height:638px;
  font-family:'Montserrat', sans-serif;
}
.p16b-tete{
  position:absolute; left:0; right:0; top:var(--marche); height:calc(150px - var(--marche));
  border-radius:24px 24px 0 0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff) 0, var(--c) 100%);
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:10px; box-sizing:border-box;
}
.p16b-pack{
  font-size:27px; font-weight:800; color:#fff; letter-spacing:-.01em; line-height:1;
  padding:7px 20px 8px; border:2.5px solid rgba(255,255,255,.85); border-radius:999px;
}
.p16b-corps{
  position:absolute; left:0; right:0; top:150px; bottom:0;
  border-radius:0 0 24px 24px; background:#fff;
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--c) 22%, #fff), 0 1px 0 rgba(20,30,60,.04), 0 18px 40px -12px rgba(20,30,60,.18);
}
.p16b-case{ position:absolute; left:0; right:0; box-sizing:border-box; padding:0 14px; }
.p16b-case--com{
  top:0; height:100px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; background:color-mix(in srgb, var(--c2) 70%, #fff);
  border-bottom:1.5px solid color-mix(in srgb, var(--c) 18%, #fff);
}
.p16b-case--src{
  top:100px; height:90px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  text-align:center;
  border-bottom:1.5px solid color-mix(in srgb, var(--c) 18%, #fff);
}
/* Le support remplit la colonne : la liste s'étire jusqu'au bas, et
   Standard garde la place d'une pastille « Inclus » absente, pour que
   les premières lignes des quatre listes s'alignent. */
.p16b-case--sup{ top:190px; bottom:0; padding-top:12px; padding-bottom:24px; display:flex; flex-direction:column; }
.p16b-case--sup:not(:has(.p16b-inclus)) .p16b-niv{ margin-bottom:38px; }
.p16b-case p{ margin:0; }

.p16b-niv{ font-size:17px; font-weight:800; color:var(--c); line-height:1.25; }
.p16b-case--sup .p16b-niv{ text-align:center; }
.p16b-desc{ margin-top:3px !important; font-size:14.5px; font-weight:500; line-height:1.32; color:#2b3344; }
.p16b-src{ font-size:15px; font-weight:700; line-height:1.28; color:var(--c); }
.p16b-insecable{ white-space:nowrap; }

/* Les repères du sourcing. */
.p16b-reperes{ height:30px; overflow:visible; flex:none; }
.p16b-reperes *{ transform-box:fill-box; transform-origin:50% 100%; }
.p16b-rep{ fill:var(--c); opacity:var(--o, 1); }
.p16b-croix{ border-radius:50%; box-shadow:0 1px 2px rgba(20,30,60,.06), 0 4px 12px -4px rgba(20,30,60,.14); }

/* « Inclus Pack … » : une pastille avec une pile de couches. */
.p16b-inclus{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin:6px auto 8px !important; width:max-content; padding:4px 12px 5px 9px; border-radius:999px;
  background:var(--c2); color:var(--c); font-size:13px; font-weight:700; line-height:1.2;
}
.p16b-inclus svg{ width:16px; height:16px; fill:var(--c); overflow:visible; }
.p16b-inclus-trait{ fill:none; stroke:var(--c); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* Les listes, coche de la couleur du pack. */
.p16b-liste{
  list-style:none; margin:6px 0 0; padding:0; flex:1;
  display:flex; flex-direction:column; justify-content:space-between; row-gap:5px;
}
.p16b-liste li{
  position:relative; padding-left:19px; text-wrap:pretty;
  font-size:14px; font-weight:500; line-height:1.3; color:#2b3344;
}
.p16b-liste li::before{
  content:""; position:absolute; left:1px; top:3.5px; width:12px; height:12px; border-radius:50%;
  background:var(--c);
}
.p16b-liste li::after{
  content:""; position:absolute; left:4.6px; top:6.3px; width:5px; height:2.6px;
  border-left:1.7px solid #fff; border-bottom:1.7px solid #fff; rotate:-45deg;
}

/* Elite, le haut de l'escalier : une lueur derrière, une étincelle. */
.p16b-lueur{
  position:absolute; left:1036px; top:70px; width:390px; height:300px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(203,161,44,.30), rgba(203,161,44,0));
  pointer-events:none;
}
.p16b-col--elite .p16b-corps{ box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--c) 30%, #fff), 0 26px 50px -20px rgba(0,90,155,.42); }
.p16b-etoile{ position:absolute; left:50%; top:20px; width:44px; height:44px; margin-left:-22px; fill:#f3d779; overflow:visible; }

/* La flèche d'or qui longe l'escalier. */
.p16b-montee{ position:absolute; left:296px; top:40px; width:1064px; height:140px; overflow:visible; pointer-events:none; }
.p16b-montee-trait{ fill:none; stroke:#cba12c; stroke-width:5; stroke-linecap:round; stroke-dasharray:2 12; }
.p16b-montee-pointe{ fill:none; stroke:#cba12c; stroke-width:5.5; stroke-linecap:round; stroke-linejoin:round; }

/* Les « + » entre les colonnes, à hauteur des pastilles « Inclus ». */
.p16b-plus{ position:absolute; top:493px; width:28px; height:28px; overflow:visible; }
.p16b-plus circle{ fill:#cba12c; stroke:#fffaf5; stroke-width:3; }
.p16b-plus path{ fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; }

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

/* Les repères se plantent un à un, quand leur colonne est montée. */
.js-anim :is(.est-active, .est-sortante) .p16b-rep{
  animation:p16b-plante 560ms var(--anim-ressort) calc(var(--d) + 650ms + var(--i) * 80ms) both;
}
@keyframes p16b-plante{ from{ opacity:0; translate:0 -14px; scale:.4; } to{ opacity:var(--o, 1); translate:0 0; scale:1; } }
.js-anim :is(.est-active, .est-sortante) .p16b-croix{
  animation:p16b-eclot 600ms var(--anim-ressort) calc(var(--d) + 650ms) both;
}
@keyframes p16b-eclot{ from{ opacity:0; scale:.3; } to{ opacity:1; scale:1; } }

/* L'en-tête se pose un souffle après le corps, comme une marche. */
.js-anim :is(.est-active, .est-sortante) .p16b-tete{
  animation:p16b-marche 700ms var(--anim-courbe) calc(var(--d) + 200ms) both;
}
@keyframes p16b-marche{ from{ clip-path:inset(100% 0 0 0 round 24px 24px 0 0); } to{ clip-path:inset(0 0 0 0 round 24px 24px 0 0); } }

/* La nappe se pose sans respirer ensuite : la page posée, seuls bougent
   la flèche d'or, la lueur d'Elite et son étincelle. */
.js-anim :is(.est-active, .est-sortante) .p16b-nappe[data-rv]{
  animation:rv-halo 1800ms ease-out var(--d) both;
}

/* L'étincelle d'Elite éclot puis scintille. */
.js-anim :is(.est-active, .est-sortante) .p16b-etoile{
  animation:p16b-eclot 700ms var(--anim-ressort) calc(var(--d) + 900ms) both,
            p16b-scintille 2.4s ease-in-out calc(var(--d) + 1600ms) infinite alternate;
}
@keyframes p16b-scintille{ from{ scale:1; rotate:0deg; } to{ scale:.7; rotate:45deg; } }

/* La lueur d'Elite respire. */
.js-anim :is(.est-active, .est-sortante) .p16b-lueur{
  animation:rv-halo 1400ms ease-out var(--d) both,
            p16b-respire 3.6s ease-in-out calc(var(--d) + 1400ms) infinite alternate;
}
@keyframes p16b-respire{ from{ opacity:1; scale:1; } to{ opacity:.6; scale:1.08; } }

/* La flèche d'or : ses pointillés filent vers le haut, sans fin. */
.js-anim :is(.est-active, .est-sortante) .p16b-montee-trait{
  animation:p16b-file 1.6s linear calc(var(--d) + 900ms) infinite;
}
@keyframes p16b-file{ from{ stroke-dashoffset:14; } to{ stroke-dashoffset:0; } }

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