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

   Mêmes textes que la page 6, mot pour mot. L'idée :
     l'engagement par l'action. Le téléphone DUO PILOT de la maquette,
     agrandi et incliné, est posé sur un grand disque rose et marine ; le
     doigt touche l'écran, des ondes partent et les confettis éclatent :
     c'est l'action événementielle, qu'on voit avant de la lire.
   À droite, le logo, la phrase en grand, et la main de la maquette qui
   apporte la pièce de puzzle manquante, tout contre le logo.

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

.p06b{ background:#fff; }

/* ─────────────────────────────── Le décor ───────────────────────────── */
.p06b-nappe{
  position:absolute; left:640px; top:60px; width:900px; height:700px; border-radius:50%;
  pointer-events:none; filter:blur(12px);
  background:radial-gradient(closest-side, rgba(36,50,130,.08), rgba(36,50,130,0));
}
.p06b-disque{
  position:absolute; left:-24px; top:24px; width:700px; height:700px; border-radius:50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.28), rgba(255,255,255,0) 42%),
    linear-gradient(145deg, #e0288a 0%, #d20074 30%, #7d1f83 66%, #243282 100%);
  box-shadow:0 24px 48px -20px rgba(36,50,130,.40);
}
.p06b-cercle{ position:absolute; border-radius:50%; pointer-events:none; }
.p06b-cercle--a{ left:-46px; top:2px; width:744px; height:744px; border:2px solid rgba(210,0,116,.30); }
.p06b-cercle--b{ left:-76px; top:-22px; width:744px; height:744px; border:2px dashed rgba(36,50,130,.22); }

/* ─────────────────────────────── La phrase ──────────────────────────── */
/* Les deux lignes se centrent sous le logo, dans la marge de droite. */
.p06b-ligne1{ font-size:44px; line-height:1.3; white-space:nowrap; text-align:center; }
.p06b-ligne2{ font-size:52px; line-height:1.3; white-space:nowrap; text-align:center; }
.p06b-souligne{ overflow:visible; }

/* La main à la pièce de puzzle : son fond blanc se fond dans la page.
   Le fondu est porté par l'enveloppe, qui bouge elle-même : posé sur
   l'image qui s'anime, il serait isolé et laisserait un rectangle blanc. */
.p06b-piece{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply; }

/* ─────────────────────────────── Le téléphone ───────────────────────── */
/* Le bas des mains s'efface avant le pied de page : l'enveloppe
   s'arrête au-dessus de sa bande et coupe ce qui la dépasserait. */
.p06b-masque{
  position:absolute; left:0; top:0; width:1440px; height:760px; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 672px, transparent 752px);
          mask-image:linear-gradient(to bottom, #000 0, #000 672px, transparent 752px);
}
/* Le repère garde les coordonnées de la maquette : agrandi et incliné
   autour du centre de l'écran. */
.p06b-repere{
  position:absolute; left:0; top:0; width:1440px; height:810px;
  transform-origin:448px 340px;
  transform:translate(-122px, -6px) rotate(-6deg) scale(1.1);
}

.p06b-evenement{ position:absolute; inset:0; }
.p06b-evenement svg{ position:absolute; left:300px; top:60px; width:440px; height:500px; overflow:visible; }
.p06b-evenement svg *{ transform-box:fill-box; transform-origin:center; }
.p06b-onde{
  fill:none; stroke:#d20074; stroke-width:3;
  scale:calc(1 + var(--i) * .75); opacity:calc(.75 - var(--i) * .22);
}
.p06b-appui{ fill:rgba(255,255,255,.85); stroke:#d20074; stroke-width:3; }
.p06b-c--m{ fill:#cba12c; }
.p06b-c--o{ fill:#d6713a; }
.p06b-c--b{ fill:#fff; }

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

/* Trois boucles seulement une fois la page posée : les confettis (d'un
   bloc), les ondes (d'un bloc) et la main à la pièce. Le décor se pose
   et ne bouge plus. */
.js-anim :is(.est-active, .est-sortante) :is(.p06b-nappe, .p06b-cercle){
  animation:rv-halo 1100ms ease-out var(--d) both;
}

/* Les confettis jaillissent du point touché, puis dérivent ensemble. */
.js-anim :is(.est-active, .est-sortante) .p06b-c{
  animation:p06b-jaillit 900ms var(--anim-courbe) calc(var(--d) + 120ms + var(--i) * 22ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p06b-confettis{
  animation:p06b-derive 3.4s ease-in-out calc(var(--d) + 1400ms) infinite alternate;
}
@keyframes p06b-jaillit{
  from{ translate:var(--x) var(--y); scale:.2; opacity:0; }
  25% { opacity:1; }
  to  { translate:0 0; scale:1; opacity:1; }
}
@keyframes p06b-derive{ from{ translate:0 0; } to{ translate:0 6px; } }

/* Les ondes partent du doigt : les trois cercles s'ouvrent d'un bloc
   et s'effacent, sans fin. */
.js-anim :is(.est-active, .est-sortante) .p06b-ondes{
  animation:p06b-onde 2.4s ease-out var(--d) infinite both;
}
@keyframes p06b-onde{
  from{ scale:.55; opacity:1; }
  to  { scale:1.25; opacity:0; }
}
/* Le point d'appui se pose sous le doigt. */
.js-anim :is(.est-active, .est-sortante) .p06b-appui{
  animation:p06b-pose 450ms var(--anim-ressort) var(--d) both;
}
@keyframes p06b-pose{ from{ scale:0; opacity:0; } to{ scale:1; opacity:1; } }

/* La main pousse la pièce vers le logo, comme pour l'emboîter. */
.js-anim :is(.est-active, .est-sortante) .p06b-piece{
  animation:p06b-emboite 3.2s var(--anim-douce) 2.4s infinite alternate;
}
@keyframes p06b-emboite{ from{ translate:0 0; } to{ translate:-10px 5px; } }

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