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

   Mêmes textes que la page 14, mot pour mot. L'idée :
     un plafond, pas un prix fixe. Une ligne de plafond hachurée, tenue
     au bout par la main au dièse de la maquette ; dessous, des montants
     qui montent et descendent sans jamais la franchir.
   À gauche, le téléphone DUO PILOT sur un grand disque marine : la
   notification RAPPEL en sort, la cloche sonne, le soleil rayonne, et
   les quatre engagements se cochent un à un.

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

.p14b{ background:#fff; }

/* ─────────────────────────────── Le décor ───────────────────────────── */
.p14b-nappe{
  position:absolute; left:640px; top:-160px; width:960px; height:720px; border-radius:50%;
  pointer-events:none; filter:blur(12px);
  background:radial-gradient(closest-side, rgba(210,0,116,.09), rgba(210,0,116,0));
}
.p14b-disque{
  position:absolute; left:0; top:60px; width:680px; height:680px; border-radius:50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.20), rgba(255,255,255,0) 44%),
    linear-gradient(150deg, #0a6db5 0%, #005a9b 34%, #243282 78%, #1b2468 100%);
  box-shadow:0 1px 0 rgba(20,30,60,.04), 0 18px 40px -12px rgba(20,30,60,.18);
}
.p14b-cercle{ position:absolute; border-radius:50%; pointer-events:none; }
.p14b-cercle--a{ left:-22px; top:38px; width:724px; height:724px; border:2px solid rgba(203,161,44,.55); }
.p14b-cercle--b{ left:-52px; top:14px; width:724px; height:724px; border:2px dashed rgba(210,0,116,.28); }

/* ─────────────────────────────── Le titre ───────────────────────────── */
.p14b-titre{ font-size:50px; line-height:1.24; white-space:nowrap; }
.p14b-titre p{ display:flex; align-items:baseline; }
.p14b-mot{ font-size:76px; line-height:1; margin-left:.12em; }

/* ─────────────────────────────── Le plafond ─────────────────────────── */
.p14b-plafond{ position:absolute; left:722px; top:334px; width:560px; height:400px; }
.p14b-plafond svg{ position:absolute; inset:0; width:560px; height:400px; overflow:visible; }
.p14b-plafond svg *{ transform-box:fill-box; transform-origin:center; }
.p14b-case{ fill:rgba(0,90,155,.05); stroke:rgba(36,50,130,.28); stroke-width:1.5; stroke-dasharray:5 5; }
.p14b-hachure{ fill:url(#p14b-hachures); opacity:.55; }
.p14b-ligne{ fill:none; stroke:#d20074; stroke-width:7; stroke-linecap:round; }
.p14b-plafond svg .p14b-barre{ fill:url(#p14b-degrade-barre); transform-origin:bottom; }
.p14b-barre:nth-child(odd){ opacity:.88; }
.p14b-socle{ fill:none; stroke:#243282; stroke-width:2; opacity:.35; }

/* La main au dièse : son fond blanc se fond dans la page (porté par
   l'enveloppe, qui ne s'anime pas). */
.p14b-tient{ position:absolute; left:960px; top:180px; width:480px; height:420px; pointer-events:none; mix-blend-mode:multiply; }

/* ─────────────────────────────── Le téléphone ───────────────────────── */
/* La main est coupée et fondue dans son propre repère (incliné avec
   elle) : rien ne descend dans la bande du pied de page. */
.p14b-masque{ position:absolute; left:0; top:0; width:1440px; height:766px; pointer-events:none; }
.p14b-main{
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 592px, transparent 672px);
          mask-image:linear-gradient(to bottom, #000 0, #000 592px, transparent 672px);
}
.p14b-repere{
  position:absolute; left:0; top:0; width:1440px; height:672px;
  transform-origin:425px 340px;
  transform:translate(-110px, 24px) rotate(-5deg) scale(1.05);
}

/* ─────────────────────────────── Le RAPPEL ──────────────────────────── */
.p14b-carte{
  position:absolute; left:150px; top:300px; width:480px; height:296px;
  padding:24px 30px 0 40px; border-radius:32px;
  background:linear-gradient(172deg, #fcf8fa 0%, #f6eff3 100%);
  box-shadow:0 2px 0 rgba(255,255,255,.9) inset, 0 2px 4px rgba(20,30,60,.06), 0 28px 56px -16px rgba(20,30,60,.30);
  font-family:'Montserrat', sans-serif;
}
.p14b-rappel{
  text-align:center; font-size:33px; font-weight:800; letter-spacing:.14em; color:#d20074;
  line-height:1;
}
.p14b-filet{
  height:2px; margin:14px 0 14px;
  background:linear-gradient(90deg, rgba(210,0,116,0), #d20074 20%, #243282 80%, rgba(36,50,130,0));
}
.p14b-liste{ list-style:none; margin:0; padding:0; }
.p14b-liste li{
  display:flex; align-items:center; gap:14px; height:45px; padding-left:26px;
  font-size:19.5px; font-weight:600; color:#1a2766; white-space:nowrap;
}
.p14b-coche{ width:28px; height:28px; flex:none; }
.p14b-coche circle{ fill:#d20074; }
.p14b-coche path{ fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }

/* La cloche et le soleil : deux découpes de l'image de la maquette.
   Elles sont détourées au plus près (le soleil rayon par rayon, la
   cloche ligne à ligne, sa pastille en cercle) : le coin de la carte de
   l'image, pris entre leurs formes, ne doit pas paraître. */
.p14b-cloche-env{ position:absolute; pointer-events:none; filter:drop-shadow(-6px 10px 10px rgba(120,60,20,.28)); }
.p14b-cloche{
  background-size:807px 537.75px !important; background-position:-517.5px -67.5px !important;
  clip-path:path('M101.2 3.8 L101.2 4.5 L107.2 6.8 L109.5 9.0 L111.0 11.2 L111.8 13.5 L111.8 15.8 L111.8 18.0 L111.0 20.2 L111.0 22.5 L113.2 24.8 L114.8 27.0 L113.2 29.2 L111.8 31.5 L108.8 33.8 L108.8 36.0 L108.0 38.2 L108.8 40.5 L108.8 42.8 L108.8 45.0 L109.5 47.2 L110.2 49.5 L111.0 51.8 L112.5 54.0 L114.0 56.2 L116.2 58.5 L119.2 60.8 L121.5 63.0 L121.5 65.2 L121.5 67.5 L120.8 69.8 L120.0 72.0 L119.2 74.2 L118.5 76.5 L117.8 78.8 L117.0 81.0 L115.5 83.2 L114.8 85.5 L114.0 87.8 L112.5 90.0 L112.5 92.2 L112.5 94.5 L112.5 96.8 L112.5 99.0 L112.5 101.2 L113.2 103.5 L113.2 105.8 L114.0 108.0 L115.5 110.2 L116.2 112.5 L117.0 114.8 L117.8 117.0 L117.8 119.2 L117.0 121.5 L116.2 123.8 L113.2 126.0 L110.2 128.2 L110.2 129.8 L110.2 130.5 L96.8 130.5 L96.8 129.8 L52.5 128.2 L48.0 126.0 L45.0 123.8 L42.8 121.5 L41.2 119.2 L40.5 117.0 L39.8 114.8 L37.5 112.5 L39.0 110.2 L33.0 108.0 L27.0 105.8 L22.5 103.5 L17.2 101.2 L14.2 99.0 L11.2 96.8 L9.8 94.5 L8.2 92.2 L6.8 90.0 L6.8 87.8 L6.8 85.5 L7.5 83.2 L8.2 81.0 L10.5 78.8 L12.8 76.5 L16.5 74.2 L21.0 72.0 L24.8 69.8 L27.8 67.5 L30.8 65.2 L33.0 63.0 L34.5 60.8 L36.0 58.5 L37.5 56.2 L39.0 54.0 L39.8 51.8 L41.2 49.5 L42.0 47.2 L42.8 45.0 L43.5 42.8 L45.0 40.5 L45.8 38.2 L47.2 36.0 L48.8 33.8 L50.2 31.5 L51.8 29.2 L54.0 27.0 L56.2 24.8 L59.2 22.5 L62.2 20.2 L66.8 18.0 L74.2 15.8 L86.2 13.5 L87.0 11.2 L88.5 9.0 L90.8 6.8 L97.5 4.5 L97.5 3.8 Z M108.4 42.0 a21.0 21.0 0 1 1 42.0 0 a21.0 21.0 0 1 1 -42.0 0 Z');
  transform-origin:63% 5%;
}
.p14b-soleil-env{ position:absolute; pointer-events:none; filter:drop-shadow(0 8px 12px rgba(180,120,0,.25)); }
.p14b-soleil{
  background-size:807px 537.75px !important; background-position:-135px -328.5px !important;
  clip-path:path('M73.5 8.3 L75.9 6.0 L79.2 6.0 L80.8 6.8 L81.7 7.5 L82.5 9.1 L82.7 28.4 L81.8 29.9 L80.1 31.5 L78.4 32.2 L76.7 32.2 L75.1 31.5 L74.2 30.7 L73.3 29.1 Z M30.3 24.4 L31.9 22.7 L36.7 22.6 L38.3 24.0 L50.2 37.5 L50.9 39.1 L50.8 41.5 L49.9 43.2 L49.1 44.0 L47.5 44.8 L44.2 45.0 L38.0 39.6 L30.9 29.9 L30.1 28.3 Z M105.9 38.4 L107.3 35.2 L116.7 24.0 L117.6 23.3 L119.2 22.6 L121.7 22.6 L123.3 23.5 L124.2 24.3 L125.0 25.9 L125.1 27.6 L123.7 30.8 L121.5 34.4 L114.2 42.7 L111.7 44.2 L109.3 44.1 L107.7 43.3 L106.9 42.4 L106.0 40.8 Z M36.0 70.0 L42.8 59.9 L47.4 53.8 L52.0 49.1 L55.1 46.8 L57.4 45.3 L63.6 42.1 L68.2 40.6 L72.1 39.8 L86.0 39.8 L89.1 40.5 L92.9 42.0 L97.6 44.3 L99.9 45.9 L103.8 49.0 L105.4 50.5 L108.5 54.4 L110.8 57.5 L112.3 59.8 L113.1 61.4 L115.4 66.8 L116.2 69.1 L117.0 73.0 L117.7 77.6 L117.7 86.2 L116.2 91.6 L115.4 93.9 L113.8 97.8 L111.5 101.6 L109.1 104.7 L103.7 110.1 L100.6 112.4 L98.3 113.9 L92.1 117.0 L86.0 118.5 L69.8 118.4 L63.6 116.9 L56.0 113.0 L53.6 111.5 L46.0 103.8 L44.4 101.5 L42.1 97.6 L40.6 93.8 L39.0 89.2 L38.3 86.1 Z M6.8 67.7 L7.6 66.0 L9.1 64.3 L10.7 63.4 L12.3 63.3 L26.9 65.9 L29.2 66.8 L30.7 67.7 L32.2 69.3 L32.2 72.6 L31.4 74.2 L30.7 75.1 L29.1 76.0 L26.8 76.1 L18.2 75.0 L14.5 73.9 L9.8 71.9 L8.3 71.0 L7.5 70.1 L6.8 68.5 Z M123.0 71.0 L123.8 69.3 L125.3 67.7 L128.3 66.7 L132.4 65.5 L142.2 64.1 L146.9 64.4 L148.5 66.1 L149.2 67.7 L149.2 70.2 L146.2 73.5 L142.3 74.6 L132.6 76.4 L125.4 75.9 L123.0 73.4 Z M15.0 112.4 L15.8 111.7 L22.6 106.5 L27.2 103.5 L32.5 101.4 L34.9 100.8 L37.3 101.7 L38.1 102.5 L38.9 104.2 L38.9 105.0 L38.2 106.7 L35.2 110.1 L22.3 117.6 L19.9 118.2 L16.7 117.3 L15.1 115.7 Z M114.8 105.8 L115.6 103.4 L117.2 101.7 L118.8 100.8 L119.6 100.8 L122.0 101.4 L125.3 102.8 L133.5 107.3 L137.2 110.0 L139.5 112.4 L139.4 114.9 L138.6 116.5 L137.8 117.3 L136.2 118.2 L133.8 118.3 L125.3 114.7 L117.8 110.0 L114.8 106.7 Z M49.8 141.4 L54.9 126.0 L55.7 124.5 L58.2 122.3 L61.5 122.3 L63.1 123.1 L64.8 124.7 L65.0 127.9 L61.1 140.0 L59.1 144.0 L55.8 147.0 L53.3 147.0 L51.6 146.1 L50.8 145.3 L49.9 143.8 Z M90.5 124.7 L92.1 123.1 L93.8 122.3 L96.3 122.3 L98.8 124.5 L99.8 126.1 L101.8 130.2 L104.7 140.6 L104.5 145.3 L102.8 146.9 L97.9 147.0 L96.3 145.5 L95.5 144.0 L90.8 131.2 L90.3 127.9 Z');
}

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

/* Le plafond se trace, ses hachures se posent ; sous lui, des cases
   vides jusqu'au plafond ; les montants y montent l'un après l'autre,
   puis varient sans fin, toujours dessous. */
.js-anim :is(.est-active, .est-sortante) .p14b-ligne{
  stroke-dasharray:1 1;
  animation:p14b-trace 800ms var(--anim-douce) var(--d) both;
}
@keyframes p14b-trace{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
.js-anim :is(.est-active, .est-sortante) .p14b-hachure{
  animation:p14b-hachure 700ms ease-out calc(var(--d) + 500ms) both;
}
@keyframes p14b-hachure{ from{ opacity:0; translate:0 -8px; } to{ opacity:.55; translate:0 0; } }
.js-anim :is(.est-active, .est-sortante) .p14b-case{
  animation:p14b-apparait 700ms ease-out calc(var(--d) + 250ms + var(--i) * 50ms) both;
}
@keyframes p14b-apparait{ from{ opacity:0; } to{ opacity:1; } }
.js-anim :is(.est-active, .est-sortante) .p14b-barre{
  animation:p14b-monte 900ms var(--anim-courbe) calc(var(--d) + 450ms + var(--i) * 70ms) both,
            p14b-varie 3.2s ease-in-out calc(var(--d) + 1500ms + var(--i) * 70ms) infinite alternate;
}
@keyframes p14b-monte{ from{ scale:1 0; } to{ scale:1 1; } }
@keyframes p14b-varie{ from{ scale:1 1; } to{ scale:1 var(--b); } }

/* La cloche sonne trois coups, puis se tait, puis recommence. */
.js-anim :is(.est-active, .est-sortante) .p14b-cloche{
  animation:p14b-sonne 3.4s ease-in-out calc(var(--d) + 500ms) infinite;
}
@keyframes p14b-sonne{
  0%, 34%, 100%{ rotate:0deg; }
  5% { rotate:14deg; }
  11%{ rotate:-12deg; }
  17%{ rotate:9deg; }
  23%{ rotate:-6deg; }
  29%{ rotate:3deg; }
}
/* Le décor se pose sans respirer ensuite, le soleil ne garde qu'un
   souffle : trois sujets bougent une fois la page posée (les montants,
   d'un même mouvement de vague, la cloche, le soleil). */
.js-anim :is(.est-active, .est-sortante) :is(.p14b-nappe, .p14b-cercle)[data-rv]{
  animation:rv-halo 1800ms ease-out var(--d) both;
}
.js-anim :is(.est-active, .est-sortante) .p14b-soleil-env[data-rv]{
  animation:rv-eclat 900ms var(--anim-ressort) var(--d) both;
}
/* Le soleil respire. */
.js-anim :is(.est-active, .est-sortante) .p14b-soleil{
  animation:p14b-rayonne 2.8s ease-in-out calc(var(--d) + 900ms) infinite alternate;
}
@keyframes p14b-rayonne{ from{ scale:1; } to{ scale:1.07; } }

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