/* ══════════════════════════════════════════════════════════════════════
   Proposition : la page 1 (couverture) en visuel (page ajoutée en fin, .p01b).

   Mêmes textes que la page 1, mot pour mot. L'idée :
     une fenêtre en arche ouverte sur le ciel de la maquette, où la jeune
     femme tient son téléphone DUO PILOT ; de ce téléphone partent des
     lignes directes vers chaque univers dessiné dans le ciel (tongs,
     grande roue, haltère, lotus, billet). C'est la distribution
     directe, qu'on voit avant de la lire.
   La plateforme (ordinateur, mobile, liste d'offres) flotte au-dessus du
   ciel, et une flèche part du mot « directe » vers la fenêtre.

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

.p01b{ background:#fff; }

/* ─────────────────────────────── Le décor ───────────────────────────── */
.p01b-nappe{ position:absolute; border-radius:50%; pointer-events:none; filter:blur(12px); }
.p01b-nappe--a{
  left:-300px; top:-260px; width:980px; height:760px;
  background:radial-gradient(closest-side, rgba(210,0,116,.10), rgba(210,0,116,0));
}
.p01b-nappe--b{
  left:560px; top:120px; width:980px; height:640px;
  background:radial-gradient(closest-side, rgba(0,90,155,.12), rgba(0,90,155,0));
}

/* ─────────────────────────────── Le titre ───────────────────────────── */
.p01b-titre{ font-size:78px; line-height:1.08; white-space:nowrap; letter-spacing:-.005em; }

.p01b-fleche{ overflow:visible; }

/* La promesse : la première phrase affirme, la seconde porte le but. */
.p01b-promesse{ font-family:'Montserrat', sans-serif; color:#2b3344; }
.p01b-promesse-1{ font-size:20px; line-height:1.4; font-weight:700; color:#243282; }
.p01b-promesse-2{ font-size:20px; line-height:1.45; font-weight:400; }
.p01b-promesse-2 strong{ font-weight:800; color:#d20074; white-space:nowrap; }

/* Les labels du pied de l'image d'origine (applications, fabrication,
   French Tech, Pépites Tech), découpés dans la même image. */
.p01b-labels{
  background-size:597.6px 819.2px !important;
  background-position:-236.8px -729.6px !important;
  mix-blend-mode:multiply;
}

/* ─────────────────────────────── La fenêtre ─────────────────────────── */
.p01b-arche{
  background-size:644.7px 883.1px !important;
  background-position:-10px 0 !important;
  border-radius:210px 210px 32px 32px;
  /* Ombre colorée de l'élément héros, resserrée : elle s'éteint avant
     la bande du pied de page. */
  box-shadow:0 2px 4px rgba(36,50,130,.06), 0 12px 36px -20px rgba(36,50,130,.40), 0 0 32px -8px rgba(36,50,130,.14);
}
/* Un second contour, décalé : la fenêtre prend du relief. */
.p01b-contour{
  position:absolute; left:808px; top:6px; width:614px; height:724px;
  border:2px solid rgba(210,0,116,.55); border-radius:210px 210px 32px 32px;
  pointer-events:none;
}

/* L'écran DUO PILOT posé sur le petit téléphone de l'image. */
.p01b-ecran{ position:absolute; left:1078.2px; top:443.6px; width:37.4px; height:81.3px; }
.p01b-ecran-fond{ position:absolute; inset:0; border-radius:999px; background:#fffefc; }

/* ─────────────────────────────── Le réseau ──────────────────────────── */
/* Le réseau suit l'image de la fenêtre, remontée de 10 px. */
.p01b-reseau{ position:absolute; left:0; top:-10px; width:1440px; height:810px; pointer-events:none; }
.p01b-reseau svg{ position:absolute; inset:0; width:1440px; height:810px; overflow:visible; }
.p01b-reseau svg *{ transform-box:fill-box; transform-origin:center; }
.p01b-ligne{
  fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; opacity:.95;
  filter:drop-shadow(0 1px 2px rgba(36,50,130,.35));
}
/* L'onde rose recouvre les lignes blanches ; au repos elle est éteinte. */
.p01b-onde{ position:absolute; inset:0; opacity:0; }
.p01b-onde path{ fill:none; stroke:#d20074; stroke-width:3.5; stroke-linecap:round; }
.p01b-cible{ fill:rgba(255,255,255,.22); stroke:#fff; stroke-width:2.2; }
.p01b-source{ fill:#d20074; stroke:#fff; stroke-width:3; }

/* ─────────────────────────────── La plateforme ──────────────────────── */
.p01b-flotte{ position:absolute; inset:0; pointer-events:none; }
.p01b-flotte--a{ filter:drop-shadow(0 22px 26px rgba(20,30,60,.22)); }
.p01b-flotte--b{ filter:drop-shadow(0 16px 18px rgba(20,30,60,.30)); }
.p01b-flotte--c{ filter:drop-shadow(0 18px 22px rgba(20,30,60,.28)); }
/* La liste d'offres : la colonne de droite de l'image, en carte. */
.p01b-offres{
  background-size:213% 130.1% !important;
  background-position:100% 0 !important;
  border-radius:16px;
  outline:5px solid #fff;
}

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

/* Les nappes se posent sans respirer ensuite : le décor reste immobile. */
.js-anim :is(.est-active, .est-sortante) .p01b-nappe{
  animation:rv-halo 1100ms ease-out var(--d) both;
}
/* Le contour et les pièces qui entrent par un bord gardent un geste
   d'au plus 1,1 s. */
.js-anim :is(.est-active, .est-sortante) .p01b-contour{ animation-duration:1100ms; }
.js-anim :is(.est-active, .est-sortante) .p01b-plateforme [data-rv]{ animation-duration:1100ms; }

/* Les lignes partent du téléphone, l'une après l'autre. */
.js-anim :is(.est-active, .est-sortante) .p01b-ligne{
  stroke-dasharray:1 1;
  animation:p01b-trace 800ms var(--anim-douce) calc(var(--d) + var(--i) * 110ms) both;
}
@keyframes p01b-trace{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }

/* Chaque cible s'allume quand sa ligne l'atteint. */
.js-anim :is(.est-active, .est-sortante) .p01b-cible{
  animation:p01b-eclot 650ms var(--anim-ressort) calc(var(--d) + 650ms + var(--i) * 110ms) both;
}
@keyframes p01b-eclot{ from{ scale:0; opacity:0; } to{ scale:1; opacity:1; } }

/* Le point de départ éclot, puis bat au rythme de l'onde qu'il envoie
   (trois boucles en tout : le point, l'onde, la plateforme). */
.js-anim :is(.est-active, .est-sortante) .p01b-source{
  animation:p01b-eclot 600ms var(--anim-ressort) var(--d) both,
            p01b-bat 3s ease-in-out calc(var(--d) + 1900ms) infinite;
}
@keyframes p01b-bat{ 0%, 24%, 100%{ scale:1; } 10%{ scale:1.4; } }

/* L'onde : un cercle qui grandit depuis le téléphone révèle les lignes
   en rose jusqu'aux univers, puis tout s'efface. */
.js-anim :is(.est-active, .est-sortante) .p01b-onde{
  animation:p01b-onde 3s ease-in-out calc(var(--d) + 1900ms) infinite both;
}
@keyframes p01b-onde{
  0%  { opacity:1; clip-path:circle(0px at 1097px 452px); }
  55% { opacity:1; clip-path:circle(370px at 1097px 452px); }
  80% { opacity:0; clip-path:circle(370px at 1097px 452px); }
  100%{ opacity:0; clip-path:circle(370px at 1097px 452px); }
}

/* La plateforme flotte d'un bloc, doucement. */
.js-anim :is(.est-active, .est-sortante) .p01b-plateforme{
  animation:p01b-flotte 5.6s ease-in-out 2.6s infinite alternate;
}
.p01b-plateforme{ position:absolute; inset:0; pointer-events:none; }
@keyframes p01b-flotte{ from{ translate:0 0; } to{ translate:0 -8px; } }

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

/* ── Les deux activités dessinées (grande roue, lotus) ──
   Même trait que les icônes de l'illustration : épais, bouts ronds, bleu
   ardoise. Elles éclosent juste après leur cercle, sans boucle ensuite. */
.p01b-picto{
  fill:none; stroke:#535f9c; stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round;
  transform-box:fill-box; transform-origin:center;
}
.p01b-nacelles circle{ fill:#535f9c; stroke:none; }
.js-anim :is(.est-active, .est-sortante) .p01b-picto{
  animation:p01b-eclot 650ms var(--anim-ressort) calc(var(--d) + 770ms + var(--i) * 110ms) both;
}