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

   Mêmes textes que la page 18, mot pour mot. Les six opérations
   deviennent six feuilles de calendrier, accrochées à une ligne du
   temps : trois au printemps, trois à l'automne, et l'été entre les
   deux, en pointillés. Sur chaque feuille, trente places dessinées, une
   par CSE : « 30 CSE par opération » se voit avant de se lire.
   À droite, l'annonceuse au mégaphone crie l'offre ; son mégaphone
   pointe le bouton. La note, avec son sablier, rappelle que les places
   sont comptées.

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

.p18b{ background:#f4f4f4; font-family:'Montserrat', sans-serif; }
.p18b-titre p{ line-height:56px; white-space:nowrap; }

/* ─────────────────────────────── Le décor ───────────────────────────── */
.p18b-nappe{ position:absolute; border-radius:50%; pointer-events:none; filter:blur(10px); }
.p18b-nappe--a{
  left:860px; top:20px; width:740px; height:740px;
  background:radial-gradient(closest-side, rgba(210,0,116,.11), rgba(210,0,116,0));
}
.p18b-nappe--b{
  left:-240px; top:120px; width:1100px; height:520px;
  background:radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0));
}

/* ─────────────────────────── La ligne du temps ──────────────────────── */
.p18b-ligne{ position:absolute; left:84px; top:432px; width:900px; height:20px; overflow:visible; }
.p18b-ligne-plein{ fill:none; stroke:url(#p18b-degrade-ligne); stroke-width:5; stroke-linecap:round; }
.p18b-ligne-ete{ fill:none; stroke:#c9c3bd; stroke-width:3; stroke-linecap:round; stroke-dasharray:2 9; }

.p18b-saut{ position:absolute; left:476px; top:308px; width:96px; height:70px; overflow:visible; }
.p18b-saut-trait{ fill:none; stroke:#cba12c; stroke-width:2.6; stroke-linecap:round; stroke-dasharray:5 6; }
.p18b-saut-pointe{ fill:none; stroke:#cba12c; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }

/* ─────────────────────────── Les feuilles ───────────────────────────── */
.p18b-feuille{
  position:absolute; top:200px; width:122px; height:196px;
  border-radius:16px; background:#fff;
  box-shadow:0 1px 0 rgba(20,30,60,.04), 0 18px 40px -12px rgba(20,30,60,.18);
}
/* L'en-tête de la feuille, de la couleur de l'opération. */
.p18b-feuille::before{
  content:""; position:absolute; left:0; right:0; top:0; height:30px; border-radius:16px 16px 0 0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c));
}
/* Les deux anneaux qui tiennent la feuille. */
.p18b-anneau{
  position:absolute; top:-9px; width:9px; height:22px; border-radius:999px;
  background:linear-gradient(90deg, #6f7484, #c7cad3 45%, #6f7484);
  box-shadow:0 2px 3px rgba(0,0,0,.25);
}
.p18b-anneau--a{ left:30px; }
.p18b-anneau--b{ left:83px; }

.p18b-date{
  position:absolute; left:0; right:0; top:34px; margin:0;
  display:flex; flex-direction:column; align-items:center;
}
.p18b-jour{
  font-size:50px; font-weight:800; line-height:52px; letter-spacing:-.03em; color:var(--c);
}
.p18b-mois{
  font-size:14px; font-weight:800; line-height:18px; letter-spacing:.09em; color:#232a3d;
}
.p18b-places{ position:absolute; left:22px; bottom:13px; width:77px; height:62px; overflow:visible; }
.p18b-places circle{
  fill:color-mix(in srgb, var(--c) 10%, #fff); stroke:var(--c); stroke-width:1.5;
  transform-box:fill-box; transform-origin:center;
}

/* Le numéro de l'opération, sur la ligne, relié à sa feuille. */
.p18b-noeud{
  position:absolute; top:420px; width:44px; height:44px; border-radius:50%; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:4px solid var(--c);
  box-shadow:0 1px 2px rgba(20,30,60,.06), 0 4px 12px -4px rgba(20,30,60,.14);
  font-family:'Poppins', sans-serif; font-size:17px; font-weight:700; color:#1d2236;
}
.p18b-noeud::before{
  content:""; position:absolute; left:50%; top:-28px; width:2px; height:24px; margin-left:-1px;
  background:var(--c); opacity:.55;
}

/* ─────────────────────────────── La note ────────────────────────────── */
.p18b-note{
  position:absolute; left:84px; top:536px; width:600px; height:150px; box-sizing:border-box;
  padding:24px 28px 0 96px; border-radius:24px;
  background:linear-gradient(135deg, #f7dce8, #ecc7d7);
  box-shadow:0 1px 0 rgba(20,30,60,.04), 0 18px 40px -12px rgba(20,30,60,.18);
}
.p18b-note::before{
  content:""; position:absolute; left:0; top:22px; bottom:22px; width:6px; border-radius:0 999px 999px 0; background:#d20074;
}
.p18b-note-txt{
  margin:0 0 6px; font-style:italic; font-size:17.5px; line-height:1.42; color:#2b3344; text-wrap:pretty;
}
.p18b-sablier{ position:absolute; left:32px; top:44px; width:40px; height:60px; overflow:visible; }
.p18b-sablier-verre{ fill:none; stroke:#243282; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.p18b-sable-haut, .p18b-sable-bas{ fill:#d20074; }
.p18b-filet{ stroke:#d20074; stroke-width:1.6; stroke-dasharray:2 3; }

/* ─────────────────────────── L'annonceuse ───────────────────────────── */
.p18b-offre{ justify-content:center; text-align:center; }
.p18b-offre-a{ font-size:30px; line-height:38px; color:#d20074; }
.p18b-offre-b{ font-size:27px; line-height:70px; color:#243282; white-space:nowrap; }
.p18b-trente{ display:inline-block; width:84px; text-align:center; font-size:70px; vertical-align:-6px; }

/* ─────────────────────────────── Le bouton ──────────────────────────── */
.p18b-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);
}
.p18b-cta{
  display:flex; align-items:center; justify-content:center;
  font-size:17.5px; font-weight:800; letter-spacing:.03em; color:#fff; white-space:nowrap;
}

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

/* Les trente places de chaque feuille éclosent, rang après rang. */
.js-anim :is(.est-active, .est-sortante) .p18b-places circle{
  animation:p18b-eclot 420ms var(--anim-ressort) calc(var(--d) + 380ms + var(--i) * 14ms) both;
}
@keyframes p18b-eclot{ from{ scale:0; } to{ scale:1; } }

/* La flèche de l'été se dessine avec son geste ; la pointe arrive après. */
.js-anim :is(.est-active, .est-sortante) .p18b-saut-pointe{
  animation:p18b-apparait 300ms ease-out calc(var(--d) + 700ms) both;
}
@keyframes p18b-apparait{ from{ opacity:0; } to{ opacity:1; } }

/* Le sable coule dans le sablier : le filet seul bouge en boucle. */
.js-anim :is(.est-active, .est-sortante) .p18b-filet{
  animation:p18b-coule 900ms linear calc(var(--d) + 600ms) infinite;
}
@keyframes p18b-coule{ from{ stroke-dashoffset:10; } to{ stroke-dashoffset:0; } }

/* Les nappes, la bulle et les éclats se posent sans boucler ensuite :
   les seules boucles de la page sont le sablier, le mégaphone et le
   bouton. */
.js-anim :is(.est-active, .est-sortante) .p18b-nappe[data-rv="halo"]{
  animation:rv-halo 1800ms ease-out var(--d) both;
}
.js-anim :is(.est-active, .est-sortante) .p18b-doodle{
  animation:rv-pastille 700ms var(--anim-ressort) var(--d) both;
}

/* Le mégaphone vibre. */
.js-anim :is(.est-active, .est-sortante) .p18b-voix{
  animation:rv-pastille 700ms var(--anim-ressort) var(--d) both,
            p18b-vibre 900ms ease-in-out calc(var(--d) + 700ms) infinite alternate;
}
@keyframes p18b-vibre{ from{ scale:1; opacity:1; } to{ scale:1.18; opacity:.6; } }

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