/* ==========================================================================
   Animation d'arrivée « Le losange » (2,6 s) — pilotée par intro.js
   Sur le marine du site : le losange du logo se trace puis se remplit de bleu, les trois barres montent
   comme des murs qu'on élève, le nom LEADERPRO se dévoile ; puis l'écran se referme en losange sur la page.
   Jouée seulement si html.lpro-intro-on (script du <head>) : une fois par session, jamais si « réduire les animations ».
   ========================================================================== */
#lpro-intro{display:none}
.lpro-intro-on #lpro-intro{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#05152D;cursor:pointer;
  clip-path:polygon(50% -100%,200% 50%,50% 200%,-100% 50%);animation:lpro-ferme .7s cubic-bezier(.7,0,.3,1) 1.9s forwards}
.lpro-intro-lock,.lpro-intro-lock body{overflow:hidden}

.lpro-intro__scene{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3vh,30px);width:min(80vw,420px);
  animation:lpro-recul .7s cubic-bezier(.7,0,.3,1) 1.9s forwards}
.lpro-intro__losange{width:min(42vw,170px);height:auto;overflow:visible}
.lpro-intro__trait{fill:none;stroke:#1EA7FA;stroke-width:2.2;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:lpro-trace .7s cubic-bezier(.6,0,.3,1) .05s forwards}
.lpro-intro__fond{fill:#1EA7FA;opacity:0;animation:lpro-apparait .35s ease-out .6s forwards}
.lpro-intro__barre{fill:#fff;transform:translateY(80px);animation:lpro-monte .55s cubic-bezier(.2,.8,.2,1) forwards}
.lpro-intro__barre:nth-child(1){animation-delay:.82s}
.lpro-intro__barre:nth-child(2){animation-delay:.92s}
.lpro-intro__barre:nth-child(3){animation-delay:1.02s}
.lpro-intro__nom{width:100%;height:auto;clip-path:inset(0 100% 0 0);transform:translateY(10px);animation:lpro-devoile .6s cubic-bezier(.2,.8,.2,1) 1.1s forwards}

@keyframes lpro-trace{to{stroke-dashoffset:0}}
@keyframes lpro-apparait{to{opacity:1}}
@keyframes lpro-monte{to{transform:none}}
@keyframes lpro-devoile{to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes lpro-recul{to{transform:scale(.86);opacity:.15}}
@keyframes lpro-ferme{to{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}}

/* Entrée du hero, une fois le losange refermé (html.lpro-intro-revealed) */
.lpro-intro-hold .hero .surtitre,.lpro-intro-hold .hero .h1 span,.lpro-intro-hold .hero .lede,.lpro-intro-hold .hero .garanties,.lpro-intro-hold .hero .labels,.lpro-intro-hold .devis{opacity:0;transform:translateY(24px)}
.lpro-intro-revealed .hero .surtitre,.lpro-intro-revealed .hero .h1 span,.lpro-intro-revealed .hero .lede,.lpro-intro-revealed .hero .garanties,.lpro-intro-revealed .hero .labels,.lpro-intro-revealed .devis{
  transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.lpro-intro-revealed .hero .h1 span:first-child{transition-delay:.05s}
.lpro-intro-revealed .hero .h1 span:last-child{transition-delay:.12s}
.lpro-intro-revealed .hero .lede{transition-delay:.2s}
.lpro-intro-revealed .hero .garanties{transition-delay:.27s}
.lpro-intro-revealed .hero .labels{transition-delay:.34s}
.lpro-intro-revealed .devis{transition-delay:.16s}

@media (prefers-reduced-motion:reduce){#lpro-intro{display:none!important}}