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

   Mêmes textes que la page 3, mot pour mot. Les logos clients ne sont
   plus semés sur la page : chacun est posé sur sa tuile, et les tuiles
   se montent en mur, rangée après rangée, sur un panneau par secteur.
   Au centre, le groupe sur son socle ; des fils partent de lui vers
   chaque rangée des deux murs : une même solution, quel que soit le
   secteur.

   Le mouvement : les panneaux s'ouvrent, puis les tuiles se retournent
   une à une, du groupe vers l'extérieur ; les fils se tracent ensuite
   et un courant les parcourt. Les états de départ ne vivent que dans
   les animations : sans script, à l'impression ou avec « réduire les
   animations », tout est simplement posé.
   ══════════════════════════════════════════════════════════════════════ */

.p03b{ background:#ffffff; }

/* ─────────────────────────────── Le décor ───────────────────────────── */
.p03b-nappe{ position:absolute; border-radius:50%; pointer-events:none; filter:blur(10px); }
.p03b-nappe--a{
  left:420px; top:120px; width:600px; height:600px;
  background:radial-gradient(closest-side, rgba(210,0,116,.10), rgba(210,0,116,0));
}
.p03b-nappe--b{
  left:820px; top:-260px; width:900px; height:520px;
  background:radial-gradient(closest-side, rgba(0,90,155,.08), rgba(0,90,155,0));
}

.p03b-filet{ border-radius:999px; background-size:100% 460%; }

/* ─────────────────────────────── Les panneaux ───────────────────────── */
.p03b-panneau{
  position:absolute; border-radius:32px;
  background:linear-gradient(180deg, #fffaf0 0%, #fdf5e4 100%);
  border:1.5px solid rgba(203,161,44,.55);
  box-shadow:0 1px 0 rgba(20,30,60,.04), 0 18px 40px -12px rgba(20,30,60,.18);
}
.p03b-secteur{ display:flex; align-items:center; justify-content:center; gap:12px; }
.p03b-secteur p{ margin:0; white-space:nowrap; }
.p03b-secteur span + span{ margin-left:.1em; }
.p03b-icone{
  flex:none; width:40px; height:40px; padding:8px; border-radius:50%;
  background:#243282; overflow:visible;
  /* 24 px dessinés dans 32 unités : un trait de 2 px à l'écran. */
  fill:none; stroke:#fff; stroke-width:2.67; stroke-linejoin:round; stroke-linecap:round;
}

/* ─────────────────────────────── Le mur ─────────────────────────────── */
.p03b-mur{ position:absolute; perspective:1100px; }
.p03b-tuile{
  position:absolute; border-radius:16px; overflow:hidden;
  background:#fff;
  box-shadow:0 1px 2px rgba(20,30,60,.06), 0 4px 12px -4px rgba(20,30,60,.14);
  outline:1px solid rgba(36,50,130,.06);
  transition:box-shadow .35s var(--anim-courbe);
}
.p03b-tuile:hover{ box-shadow:0 2px 4px rgba(20,30,60,.06), 0 28px 56px -16px rgba(20,30,60,.30); }
.p03b-tuile .o--img{ background-repeat:no-repeat; }

/* ─────────────────────────────── Le centre ──────────────────────────── */
.p03b-socle{
  position:absolute; left:560px; top:542px; width:320px; height:64px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(36,50,130,.20), rgba(210,0,116,.07) 60%, rgba(210,0,116,0));
}
.p03b-phrase p{
  text-align:center; font-family:'Montserrat', sans-serif; font-weight:500;
  font-size:19px; line-height:1.4; color:#2b3344;
}
.p03b-fort{ display:block; font-size:23px; font-weight:800; color:#243282; margin-bottom:2px; }

/* Les fils : pointillés doux, un nœud à l'arrivée sur chaque mur. */
.p03b-reseau{ position:absolute; left:0; top:0; width:1440px; height:810px; overflow:visible; pointer-events:none; }
.p03b-reseau *{ transform-box:fill-box; transform-origin:center; }
.p03b-fil{
  fill:none; stroke-width:2; stroke-linecap:round;
  stroke-dasharray:1.5 7; opacity:.5;
}
.p03b-noeud{ fill:#fff; stroke:#d20074; stroke-width:2.5; }
.p03b-noeud--d{ stroke:#005a9b; }
.p03b-cote{ position:absolute; inset:0; pointer-events:none; }
.p03b-cote > *{ pointer-events:auto; }

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

/* Les nappes et le socle se posent, sans respirer ensuite. */
.js-anim :is(.est-active, .est-sortante) :is(.p03b-nappe, .p03b-socle){
  animation:rv-halo 1100ms ease-out var(--d) both;
}

/* Trois boucles en tout : chaque mur flotte d'un bloc (en opposition),
   et un seul courant parcourt tous les fils. */

/* Les tuiles se retournent vers le spectateur, une à une. Le mur de
   gauche pivote d'un côté, celui de droite de l'autre. */
.js-anim :is(.est-active, .est-sortante) .p03b-mur .p03b-tuile{
  animation:p03b-tuile 820ms var(--anim-courbe) var(--d) both;
}
.js-anim :is(.est-active, .est-sortante) .p03b-mur--g .p03b-tuile{ --sens:-1; }
.js-anim :is(.est-active, .est-sortante) .p03b-mur--d .p03b-tuile{ --sens:1; }
@keyframes p03b-tuile{
  from{ opacity:0; rotate:y calc(var(--sens, 1) * 80deg); scale:.92; }
  40% { opacity:1; }
  to  { opacity:1; rotate:y 0deg; scale:1; }
}
.js-anim :is(.est-active, .est-sortante) .p03b-cote--g{
  animation:p03b-flotte 5s ease-in-out 3.2s infinite alternate;
}
.js-anim :is(.est-active, .est-sortante) .p03b-cote--d{
  animation:p03b-flotte 5s ease-in-out 3.2s infinite alternate-reverse;
}
@keyframes p03b-flotte{ from{ translate:0 0; } to{ translate:0 -4px; } }

/* Les fils se déroulent depuis le groupe, puis le courant les parcourt.
   Le courant reste linéaire : un débit constant, sans à-coups. */
.js-anim :is(.est-active, .est-sortante) .p03b-reseau{
  animation:p03b-ouvre 1000ms var(--anim-douce) var(--d) both;
}
@keyframes p03b-ouvre{
  from{ opacity:1; clip-path:inset(0 50% 0 50%); }
  to  { opacity:1; clip-path:inset(0 0 0 0); }
}
.js-anim :is(.est-active, .est-sortante) .p03b-fil{
  animation:p03b-courant 1.6s linear calc(var(--d) + 900ms) infinite;
}
@keyframes p03b-courant{ from{ stroke-dashoffset:0; } to{ stroke-dashoffset:-17; } }
.js-anim :is(.est-active, .est-sortante) .p03b-noeud{
  animation:p03b-eclot 520ms var(--anim-ressort) calc(var(--d) + 700ms + var(--i) * 40ms) both;
}
@keyframes p03b-eclot{ from{ scale:0; } to{ scale:1; } }

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