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

   Mêmes textes que la page 12, mot pour mot. Trois témoignages qui
   inspirent confiance :
     un grand portrait, cerclé de la couleur de la personne, avec une
     pastille de guillemets ;
     une grande citation, dont les chiffres ressortent ;
     des étoiles qui s'allument une à une (cinq, quatre, cinq, comme
     sur la maquette).
   À gauche, le groupe de la maquette discute dans un disque de lumière,
   entouré d'étincelles.

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

.p12b{ background:#f8f8f8; }

/* ─────────────────────────────── Le décor ───────────────────────────── */
.p12b-nappe{ position:absolute; border-radius:50%; pointer-events:none; filter:blur(12px); }
.p12b-nappe--a{
  left:-220px; top:-260px; width:760px; height:620px;
  background:radial-gradient(closest-side, rgba(214,113,58,.22), rgba(210,0,116,.08) 60%, rgba(210,0,116,0));
}
.p12b-nappe--b{
  left:1240px; top:470px; width:560px; height:520px;
  background:radial-gradient(closest-side, rgba(210,0,116,.16), rgba(214,113,58,.07) 60%, rgba(214,113,58,0));
}

/* ─────────────────────────────── Le titre ───────────────────────────── */
.p12b-titre{ font-size:46px; line-height:56px; white-space:nowrap; }
/* Deux traits d'or sous « succès. », comme à la main. */
.p12b-souligne{ position:absolute; left:779px; top:113px; width:200px; height:24px; overflow:visible; }
.p12b-souligne path{ fill:none; stroke:#cba12c; stroke-width:4.5; stroke-linecap:round; }
.p12b-souligne path + path{ stroke-width:3; opacity:.7; }

/* ─────────────────────────────── Le groupe ──────────────────────────── */
/* Un disque de lumière derrière eux : ce sont eux qui parlent. */
.p12b-scene{
  position:absolute; left:20px; top:236px; width:520px; height:520px; border-radius:50%;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.96), rgba(255,255,255,.7) 52%, rgba(255,255,255,0) 100%),
    radial-gradient(closest-side, rgba(210,0,116,.16), rgba(214,113,58,.14) 70%, rgba(214,113,58,0));
}
/* La photo de la maquette est large et vide sur ses bords : on la
   recadre sur les quatre personnages, sans la déformer. */
.p12b-groupe{ background-size:1103px 621px !important; background-position:-299px -63px !important; }
.p12b-sol{
  position:absolute; left:110px; top:722px; width:360px; height:34px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(36,50,130,.20), rgba(36,50,130,0));
}
.p12b-etincelles{ position:absolute; left:20px; top:200px; width:520px; height:540px; overflow:visible; pointer-events:none; }
.p12b-etincelles *{ transform-box:fill-box; transform-origin:center; }
.p12b-scintille--or{ fill:#cba12c; }
.p12b-scintille--rose{ fill:#d20074; }
.p12b-scintille--bleu{ fill:#005a9b; }

/* ─────────────────────────────── Les cartes ─────────────────────────── */
.p12b-carte{
  position:absolute; width:760px; height:168px; box-sizing:border-box;
  border-radius:24px; background:#fff;
  box-shadow:0 1px 0 rgba(20,30,60,.04), 0 18px 40px -12px rgba(20,30,60,.18);
  font-family:'Montserrat', sans-serif;
  transition:box-shadow .35s cubic-bezier(.16,1,.3,1), translate .35s cubic-bezier(.16,1,.3,1);
}
.p12b-carte:hover{ box-shadow:0 2px 4px rgba(20,30,60,.06), 0 28px 56px -16px rgba(20,30,60,.30); }
/* Un liseré pâle de la couleur de la personne, côté portrait. */
.p12b-carte::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(90deg, var(--c2) 0, rgba(255,255,255,0) 34%);
}
.p12b-carte--d::before{ background:linear-gradient(270deg, var(--c2) 0, rgba(255,255,255,0) 34%); }

/* De grands guillemets en filigrane. */
.p12b-filigrane{ position:absolute; right:30px; bottom:18px; width:92px; height:69px; fill:var(--c); opacity:.07; }
.p12b-carte--d .p12b-filigrane{ right:auto; left:30px; }

/* Le portrait, grand, déborde de la carte. */
.p12b-portrait{
  position:absolute; top:10px; width:148px; height:148px; border-radius:50%;
  background:conic-gradient(from 200deg, var(--c), var(--c2) 45%, var(--c) 100%);
  box-shadow:0 1px 0 rgba(20,30,60,.04), 0 18px 40px -12px rgba(20,30,60,.18);
}
.p12b-portrait::before{ content:""; position:absolute; inset:5px; border-radius:50%; background:#fff; }
.p12b-portrait--g{ left:-50px; }
.p12b-portrait--d{ right:-50px; }
.p12b-photo{ border-radius:50%; background-size:106% 106% !important; }
.p12b-photo--zoom{ background-size:120% 120% !important; background-position:50% 46% !important; }
.p12b-badge{
  position:absolute; right:-2px; bottom:4px; width:42px; height:42px; border-radius:50%;
  background:var(--c); border:3px solid #fff; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(20,30,60,.06), 0 4px 12px -4px rgba(20,30,60,.14);
}
.p12b-portrait--d .p12b-badge{ right:auto; left:-2px; }
.p12b-badge svg{ width:20px; height:15px; fill:#fff; }

/* Le texte. */
.p12b-corps{
  position:absolute; top:0; bottom:0; left:128px; right:32px;
  display:flex; flex-direction:column; justify-content:center;
}
.p12b-carte--d .p12b-corps{ left:40px; right:128px; }
.p12b-entete{ display:flex; align-items:center; gap:12px; height:30px; }
.p12b-nom{ font-size:21px; font-weight:800; color:#243282; letter-spacing:-.01em; white-space:nowrap; }
.p12b-role{
  padding:5px 12px 6px; border-radius:999px; background:var(--pill); color:var(--t);
  font-size:13.5px; font-weight:700; white-space:nowrap;
}
.p12b-etoiles{ margin-left:auto; width:136px; height:24px; overflow:visible; flex:none; }
.p12b-etoiles *{ transform-box:fill-box; transform-origin:center; }
.p12b-et-fond{ fill:#e4e7ee; }
.p12b-et{ fill:#cba12c; }
.p12b-et-vide{ fill:#fff; stroke:#cba12c; stroke-width:1.6; stroke-linejoin:round; }

.p12b-citation{
  margin:12px 0 0; font-size:18px; line-height:26px; color:#1e2640;
  font-style:italic; font-weight:400;
}
.p12b-citation strong{ font-style:normal; font-weight:800; color:var(--t); }
.p12b-citation s{ color:#5b6476; text-decoration-thickness:2px; text-decoration-color:var(--c); }

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

/* Le portrait s'ouvre du centre, juste après sa carte ; la pastille de
   guillemets éclot ensuite. */
.js-anim :is(.est-active, .est-sortante) .p12b-photo{
  animation:p12b-ouvre 900ms var(--anim-courbe) calc(var(--d) + 180ms) both;
}
@keyframes p12b-ouvre{
  from{ clip-path:circle(0% at 50% 50%); scale:1.12; }
  to  { clip-path:circle(50% at 50% 50%); scale:1; }
}
.js-anim :is(.est-active, .est-sortante) .p12b-portrait{
  animation:p12b-tourne 1100ms var(--anim-courbe) calc(var(--d) + 80ms) both;
}
@keyframes p12b-tourne{ from{ rotate:-70deg; } to{ rotate:0deg; } }
.js-anim :is(.est-active, .est-sortante) .p12b-portrait > *{
  animation:p12b-detourne 1100ms var(--anim-courbe) calc(var(--d) + 80ms) both;
}
@keyframes p12b-detourne{ from{ rotate:70deg; } to{ rotate:0deg; } }
.js-anim :is(.est-active, .est-sortante) .p12b-portrait .p12b-photo{
  animation:p12b-ouvre 900ms var(--anim-courbe) calc(var(--d) + 180ms) both,
            p12b-detourne 1100ms var(--anim-courbe) calc(var(--d) + 80ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p12b-badge{
  animation:p12b-eclot 650ms var(--anim-ressort) calc(var(--d) + 700ms) both;
}
@keyframes p12b-eclot{ from{ scale:0; opacity:0; } to{ scale:1; opacity:1; } }

/* Les étoiles s'allument une à une, avec un petit éclat. */
.js-anim :is(.est-active, .est-sortante) .p12b-et{
  animation:p12b-allume 620ms var(--anim-ressort) calc(var(--d) + 520ms + var(--i) * 120ms) both;
}
@keyframes p12b-allume{
  from{ scale:0; rotate:-90deg; opacity:0; filter:brightness(1.6); }
  60% { opacity:1; filter:brightness(1.35) drop-shadow(0 0 5px rgba(203,161,44,.85)); }
  to  { scale:1; rotate:0deg; opacity:1; filter:none; }
}
.js-anim :is(.est-active, .est-sortante) .p12b-et-vide{
  animation:p12b-eclot 500ms ease-out calc(var(--d) + 1000ms) both;
}

/* Le texte de la citation arrive un souffle après la carte. */
.js-anim :is(.est-active, .est-sortante) .p12b-citation{
  animation:p12b-monte 800ms var(--anim-courbe) calc(var(--d) + 260ms) both;
}
@keyframes p12b-monte{ from{ opacity:0; translate:0 10px; } to{ opacity:1; translate:0 0; } }

/* Les étincelles autour du groupe éclosent une à une, puis scintillent
   ensemble : une seule boucle, sur le groupe. */
.js-anim :is(.est-active, .est-sortante) .p12b-scintille{
  animation:p12b-eclot 600ms var(--anim-ressort) calc(var(--d) + var(--i) * 140ms) both;
}
.js-anim :is(.est-active, .est-sortante) .p12b-scintillement{
  animation:p12b-scintille 2.6s ease-in-out calc(var(--d) + 1300ms) infinite alternate;
}
@keyframes p12b-scintille{
  from{ opacity:1; scale:1; }
  to  { opacity:.55; scale:.97; }
}

/* Le disque de lumière se pose. */
.js-anim :is(.est-active, .est-sortante) .p12b-scene{
  animation:rv-pastille 1000ms var(--anim-courbe) var(--d) both;
}

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