/* Deux réglages de confort de navigation, à l'échelle du site.
 *
 * Le reste du mouvement appartient au thème; ce fichier ne fait que
 * corriger ce qui gêne la lecture. La vitesse des animations, elle, est
 * dans site-motion.js — c'est GSAP qui les pilote, pas la CSS.
 */

/* 1. Le pied de page ne doit plus changer la hauteur de la page en cours
 *    de défilement.
 *
 * WP Rocket marque <footer> avec data-wpr-lazyrender et lui applique
 * content-visibility:auto, sans contain-intrinsic-size. Le navigateur lui
 * réserve donc une hauteur d'environ 140 px tant qu'il est hors écran, puis
 * la remplace par sa hauteur réelle (~715 px) au moment où il approche. La
 * page grandit d'un coup de près de 580 px pendant qu'on descend : la
 * barre de défilement saute, et l'inertie du défilement doux se rattrape en
 * cours de route. C'est ce qui donne l'impression que la page se
 * restructure sous les yeux.
 *
 * Le pied de page est un seul bloc en toute fin de document : ne pas
 * dessiner son contenu ne fait gagner presque rien, alors que la hauteur
 * fausse coûte à chaque défilement. On rend donc le rendu inconditionnel. */
.c-footer[data-wpr-lazyrender],
[data-wpr-lazyrender] {
  content-visibility: visible;
}

/* 2. Un signe de vie pendant le chargement.
 *
 * Le thème garde body, main et footer à opacity:0 jusqu'à son animation
 * d'entrée : on ne voit donc jamais une page à moitié construite, mais on
 * ne voit rien du tout non plus — juste le fond crème de <html>. Sur une
 * connexion lente, cette attente muette ressemble à une page cassée.
 *
 * L'anneau vit sur html::after, pas sur un élément ajouté par script : il
 * s'affiche dès que cette feuille est lue, sans attendre la fin du HTML ni
 * l'exécution du moindre JS — c'est-à-dire précisément pendant la fenêtre
 * qu'il doit couvrir.
 *
 * Il n'apparaît qu'après 450 ms d'attente, pour qu'un chargement rapide ne
 * produise pas un clignotement; et le :not(.first-load-anim-completed)
 * garantit qu'il ne peut jamais revenir lors d'une navigation interne, même
 * si le thème retirait .page-loaded en cours de route. */
html:not(.page-loaded):not(.first-load-anim-completed)::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: 2.8rem;
  height: 2.8rem;
  margin: -1.4rem 0 0 -1.4rem;
  border: 3px solid rgba(6, 44, 82, 0.16);
  border-top-color: #f9ba00;
  border-radius: 50%;
  z-index: 9999;
  pointer-events: none;
  animation:
    ff-boot-spin 0.8s linear infinite,
    ff-boot-in 0.25s ease-out 0.45s both;
}

@keyframes ff-boot-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ff-boot-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Quelqu'un qui a demandé moins de mouvement ne veut pas d'un anneau qui
   tourne — le fondu d'apparition suffit à dire « ça travaille ». */
@media (prefers-reduced-motion: reduce) {
  html:not(.page-loaded):not(.first-load-anim-completed)::after {
    animation: ff-boot-in 0.25s ease-out 0.45s both;
  }
}