/* SpeakPro — introduction animée (logo, cercle doré, bandes de photos).
   Source unique : accueil du site (index.html) et ouverture de l'application installée (espace.html). */
/* Introduction (refonte 18/10/2026, 2e version) : micro-animation de ~3,8 s.
   Des bandes de photos défilent en sens opposés derrière le vrai logo SpeakPro,
   entouré d'un cercle doré qui se trace. Mêmes règles qu'avant : une fois par
   session (sessionStorage), bouton Passer, touche Échap, fondu de sortie.
   Les photos ne sont téléchargées que si l'introduction s'affiche. */
#site-splash{position:fixed;inset:0;z-index:99999;overflow:hidden;background:#0D1C33;display:flex;align-items:center;justify-content:center;transition:opacity .55s ease, visibility .55s ease}
#site-splash-wall{position:absolute;left:-12%;right:-12%;top:-14%;bottom:-14%;display:flex;flex-direction:column;justify-content:center;gap:1.4vh;transform:rotate(-5deg);transition:transform .7s ease}
.spl-row{flex:1 1 0;min-height:0;overflow:hidden}
.spl-track{display:flex;gap:1.4vh;height:100%;width:max-content;will-change:transform;animation:spRowL var(--d,24s) linear infinite;animation-play-state:paused}
#site-splash-wall{opacity:0;transition:opacity .5s ease, transform .7s ease}
#site-splash.is-ready #site-splash-wall{opacity:1}
#site-splash.is-ready .spl-track{animation-play-state:running}
.spl-row.rev .spl-track{animation-name:spRowR}
.spl-track img{height:100%;width:auto;flex:0 0 auto;display:block;border-radius:10px;background:#1B2E4D;object-fit:cover;
  filter:saturate(.9) sepia(.1) brightness(1.06) contrast(1.02)}
@keyframes spRowL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes spRowR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
#site-splash-veil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 46% 52% at 50% 50%, rgba(13,28,51,.86) 0%, rgba(13,28,51,.58) 42%, rgba(13,28,51,.24) 100%),
             linear-gradient(180deg, rgba(13,28,51,.38), rgba(16,35,63,.1) 40%, rgba(16,35,63,.1) 60%, rgba(13,28,51,.5))}
#site-splash-center{position:relative;z-index:2;text-shadow:0 1px 3px rgba(13,28,51,.9),0 0 18px rgba(13,28,51,.85);display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px;
  opacity:0;transform:translateY(10px) scale(.96);animation:spIn .7s cubic-bezier(.2,.7,.2,1) .12s forwards}
@keyframes spIn{to{opacity:1;transform:none}}
#site-splash-mark{position:relative;width:168px;height:168px;display:flex;align-items:center;justify-content:center}
#site-splash-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
#site-splash-ring circle{fill:none;stroke-width:1.6}
.sp-ring-track{stroke:rgba(247,241,230,.16)}
.sp-ring-arc{stroke:#D7AE74;stroke-linecap:round;stroke-dasharray:352;stroke-dashoffset:352;animation:spRing 3.4s cubic-bezier(.45,.05,.25,1) .2s forwards;filter:drop-shadow(0 0 3px rgba(215,174,116,.55))}
@keyframes spRing{to{stroke-dashoffset:0}}
#site-splash-logo{width:140px;height:140px;border-radius:50%;object-fit:cover;background:transparent;box-shadow:0 10px 34px rgba(0,0,0,.35);opacity:0;transition:opacity .3s ease}
#site-splash-logo.ok{opacity:1;background:#FDFDFD}
#site-splash-name{margin-top:20px;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:28px;letter-spacing:.01em;color:#F7F1E6}
#site-splash-tagline{margin-top:8px;font-family:'Inter',system-ui,sans-serif;font-size:14.5px;letter-spacing:.02em;color:#D7AE74;
  opacity:0;animation:spFade .6s ease .55s forwards}
@keyframes spFade{to{opacity:1}}
#site-splash-skip{position:absolute;z-index:3;right:20px;bottom:calc(22px + env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:100px;
  border:1px solid rgba(247,241,230,.35);background:rgba(13,28,51,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#F7F1E6;font:600 13.5px/1 'Inter',system-ui,sans-serif;cursor:pointer;transition:background .2s ease,border-color .2s ease}
#site-splash-skip:hover{background:rgba(13,28,51,.8);border-color:#D7AE74}
#site-splash-skip:focus-visible{outline:2px solid #D7AE74;outline-offset:3px}
#site-splash.site-splash-hide{opacity:0;visibility:hidden;pointer-events:none}
#site-splash.site-splash-hide #site-splash-wall{transform:rotate(-5deg) scale(1.05)}
@media (max-width:640px){
  #site-splash-wall{gap:1.1vh;left:-30%;right:-30%}
  .spl-track{gap:1.1vh}
  #site-splash-mark{width:132px;height:132px}
  #site-splash-logo{width:110px;height:110px}
  #site-splash-name{font-size:23px;margin-top:16px}
  #site-splash-tagline{font-size:13px}
  #site-splash-skip{left:50%;right:auto;transform:translateX(-50%)}
}
@media (prefers-reduced-motion: reduce){
  .spl-track,.sp-ring-arc,#site-splash-center,#site-splash-tagline{animation:none}
  .sp-ring-arc{stroke-dashoffset:0}
  #site-splash-center,#site-splash-tagline{opacity:1;transform:none}
}

/* Protection contre les styles généraux des pages (ex. « Mon espace ») : les photos
   gardent leur taille et leur forme dans toutes les pages qui affichent l'introduction. */
#site-splash .spl-track img{height:100% !important;width:auto !important;max-width:none !important;max-height:none !important;margin:0 !important;border-radius:10px !important;aspect-ratio:auto;box-shadow:none}
#site-splash-logo{max-width:none !important}