/* ==========================================================================
   Animation d'arrivée « Le mur d'écrans » (2,6 s) — pilotée par intro.js
   Sur le bleu nuit du site : un mur de 9 écrans s'allume écran par écran, chacun avec son propre contenu, puis tous se
   synchronisent et affichent ensemble le logo SMART à travers les bords des écrans (« un clic, tous vos écrans ») ;
   enfin le mur s'agrandit et s'efface sur la page.
   Jouée seulement si html.sp-intro-on (script du <head>) : une fois par session, jamais si « réduire les animations ».
   ========================================================================== */
#sp-intro{display:none}
.sp-intro-on #sp-intro{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:radial-gradient(60% 50% at 50% 45%,rgba(0,52,213,.35),rgba(0,52,213,0) 70%),#000B2E;
  animation:sp-sort .7s cubic-bezier(.7,0,.3,1) 1.9s forwards}
.sp-intro-lock,.sp-intro-lock body{overflow:hidden}

.sp-intro__scene{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,3vh,26px);width:min(84vw,560px);
  animation:sp-avance .7s cubic-bezier(.7,0,.3,1) 1.9s forwards}
.sp-intro__mur{position:relative;width:100%;aspect-ratio:16/9;border:5px solid #02061A;border-radius:6px;box-shadow:0 30px 80px -20px rgba(0,52,213,.55);
  opacity:0;transform:scale(.94);animation:sp-pose .35s ease-out forwards}

/* Ce que diffusent les écrans une fois synchronisés : le logo sur un écran clair (ses lettres sont transparentes, il lui faut un fond clair) */
.sp-intro__contenu{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(70% 90% at 50% 40%,#FFFFFF 0%,#E3EAFF 100%)}
.sp-intro__contenu img{width:62%;height:auto;transform:scale(.88);opacity:0;animation:sp-logo .45s cubic-bezier(.2,.8,.2,1) 1.08s forwards}

/* Les 9 écrans : éteints, puis allumés un par un (flash blanc, puis leur propre couleur), puis transparents = synchronisés */
.sp-intro__ecrans{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}
.sp-intro__ecrans i{border:2.5px solid #02061A;background:#050A22;
  animation:sp-allume .26s ease-out forwards,sp-synchro .38s ease-in forwards}
.sp-intro__ecrans i:nth-child(1){--c:#0034D5;animation-delay:.18s,1.02s}
.sp-intro__ecrans i:nth-child(5){--c:#FF2D3D;animation-delay:.26s,1.04s}
.sp-intro__ecrans i:nth-child(9){--c:#567FFF;animation-delay:.34s,1.12s}
.sp-intro__ecrans i:nth-child(3){--c:#231680;animation-delay:.42s,1.06s}
.sp-intro__ecrans i:nth-child(7){--c:#0034D5;animation-delay:.5s,1.08s}
.sp-intro__ecrans i:nth-child(2){--c:#567FFF;animation-delay:.58s,1.04s}
.sp-intro__ecrans i:nth-child(8){--c:#231680;animation-delay:.66s,1.1s}
.sp-intro__ecrans i:nth-child(4){--c:#FF2D3D;animation-delay:.74s,1.06s}
.sp-intro__ecrans i:nth-child(6){--c:#0034D5;animation-delay:.82s,1.08s}

.sp-intro__legende{margin:0;font:600 .82rem/1.3 Poppins,"Segoe UI",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#C9D6FF;
  opacity:0;transform:translateY(8px);animation:sp-logo .45s ease-out 1.3s forwards}

@keyframes sp-pose{to{opacity:1;transform:none}}
@keyframes sp-allume{0%{background:#050A22}45%{background:#E9EEFF}100%{background:linear-gradient(160deg,var(--c),#0B1450)}}
@keyframes sp-synchro{to{background:transparent;border-color:rgba(2,6,26,.85)}}
@keyframes sp-logo{to{opacity:1;transform:none}}
@keyframes sp-avance{to{transform:scale(1.35);opacity:0}}
@keyframes sp-sort{to{opacity:0;visibility:hidden}}

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

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