html, body { margin: 0; background: #000; }
.site-attente { position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; background: #000; }
.site-attente span { width: 28px; height: 28px; border: 1px solid rgba(200, 142, 195, .18); border-top-color: rgba(200, 142, 195, .55); border-radius: 50%; animation: site-souffle 1.8s ease-in-out infinite; }
@keyframes site-souffle { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }
html.site-pret .site-attente { display: none; }
@media (prefers-reduced-motion: reduce) { .site-attente span { animation: none; opacity: .6; } }

.site-statique { max-width: 70ch; margin: auto; padding: 4rem 1.5rem; color: #f6eef8; background: #10061a; font: 1.125rem/1.65 Georgia, serif; }
.site-statique a { color: #ff9ad8; }
.site-statique h1 { font-size: 2.25rem; line-height: 1.2; }
.site-statique h2 { font-size: 1.5rem; }
.site-statique nav { margin-top: 3rem; }
/* Le texte de la page est dans le HTML pour les robots et les lecteurs sans script. Sous la scène animée il reste
   invisible (lecteur d'écran seulement) ; React le remplace au premier rendu. Sans JavaScript, sans-script.css le rend visible. */
.site-amorce { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }