/* ============================================================================
   LE VOILE DE CHARGEMENT.

   LA RÈGLE QUI COMMANDE TOUT LE RESTE : un voile qui ne s'efface pas rend le
   site INVISIBLE. Il ne doit donc dépendre d'aucun script. Ici il s'efface par
   une animation CSS qui part dès le premier octet de style, et le script ne
   fait que l'accélérer quand la page est prête. Script en erreur, module non
   chargé, réseau qui tombe au milieu : le voile part quand même.

   CE QU'IL MASQUE VRAIMENT. Sur ce site les polices sont servies en local et
   les images en WebP : le temps de peinture est court, et un voile long serait
   une lenteur ajoutée, pas une lenteur cachée. Il dure donc le temps d'éviter
   le clignotement du fond et la police de repli, pas plus.

   `prefers-reduced-motion` : pas d'animation du signe, et le voile s'efface
   immédiatement. Quelqu'un qui demande moins de mouvement ne demande pas à
   attendre.
   ========================================================================== */

.voile {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--fond, #0A0E1A);
  animation: voile-part 1s cubic-bezier(.4, 0, .2, 1) 0.45s both;
}

/* Posée par le script dès que la page est prête : elle coupe l'attente. */
.voile.voile--pret { animation: voile-part .42s cubic-bezier(.4, 0, .2, 1) both; }

@keyframes voile-part {
  from { opacity: 1; visibility: visible; }
  99%  { opacity: 0; }
  to   { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* La croix de la marque, seule : c'est elle que porte l'enseigne, et à cette
   taille les lettres BATI+ ne se liraient pas mieux que sur un favicon. */
.voile-signe {
  width: clamp(52px, 8vw, 78px);
  height: auto;
  animation: voile-bat 1.5s ease-in-out infinite;
}

@keyframes voile-bat {
  0%, 100% { opacity: .38; transform: scale(.94); }
  50%      { opacity: 1;   transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .voile { animation: voile-part .01s linear both; }
  .voile-signe { animation: none; opacity: 1; }
}