plein écran, fond doux, logo/texte qui apparaît puis disparaît automatiquement à la fin du chargement (ou au bout de 2,5 s en fallback). Respecte prefers-reduced-motion.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Splash propre</title>
<style>
:root{ --hide-delay: 1000ms; }
body{ margin:0; font-family: system-ui,-apple-system,"SF Pro Display",Segoe UI,Roboto,Helvetica,Arial }
/* Splash overlay */
#splash{
position:fixed; inset:0; display:grid; place-items:center; z-index:9999;
background:
radial-gradient(120% 100% at 10% 10%, #eaf1ff 0%, #ffffff 40%) no-repeat #fff;
animation: splash-out var(--hide-delay) ease forwards;
}
#splash .logo{
font-weight:800; font-size:clamp(28px,6vw,48px); letter-spacing:.3px; color:#0a84ff;
transform: scale(.96); opacity:0;
text-shadow: 0 12px 32px rgba(10,132,255,.25);
animation: splash-in 800ms ease forwards;
}
@keyframes splash-in{ to{ transform:scale(1); opacity:1 } }
@keyframes splash-out{ 75%{ opacity:1 } 100%{ opacity:0; visibility:hidden } }
@media (prefers-reduced-motion: reduce){
#splash, #splash .logo{ animation:none }
#splash{ opacity:0; visibility:hidden }
}
/* Demo content */
main{ padding:40px 20px; max-width:840px; margin:auto }
h1{ margin:0 0 12px }
p{ color:#333; line-height:1.55 }
</style>
</head>
<body>
<div id="splash" aria-hidden="true">
<div class="logo">Your Logo</div>
</div>
<main>
<h1>Page</h1>
<p>Contenu visible après la disparition du splash…</p>
</main>
<script>
// Cache proprement le splash dès que la page est vraiment chargée
window.addEventListener('load', () => {
const s = document.getElementById('splash');
if (matchMedia('(prefers-reduced-motion: reduce)').matches) { s.remove(); return; }
s.style.animation = 'splash-out 800ms ease forwards';
setTimeout(() => s.remove(), 10000);
});
// Fallback: si 'load' tarde, l’animation CSS par défaut (2,5 s) masque déjà le splash.
</script>
</body>
</html>