/* ==========================================================
   ETAT DU DOCUMENT
   Pendant une transition, le contenu ne doit ni defiler ni
   recevoir de clic : cela evite qu'un second clic ne parte
   pendant que la page precedente est encore en train de se
   liberer.
========================================================== */

html.is-loading,
html:has(body.is-transitioning) {
  overflow: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================
   LOADER — LE FOND
   C'est la seule partie visible sur une navigation normale.
   Elle apparait et disparait a chaque transition et masque
   entierement le remplacement du contenu.
========================================================== */

.loader {
  position: fixed;
  inset: 0;
  z-index: 999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding-left: var(--page-padding);
  padding-right: var(--page-padding);

  background: #050505;

  opacity: 0;
  visibility: hidden;

  /* La visibilite bascule a la fin du fondu, pas pendant : sans ce
     delai le loader disparaitrait d'un coup au lieu de se fondre. */
  transition:
    opacity 0.6s ease,
    visibility 0s linear 0.6s;

  /* Promeut le loader sur sa propre couche : le fondu ne repeint
     alors plus le contenu situe dessous. */
  will-change: opacity;
}

html.is-loading .loader,
body.is-transitioning .loader {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

body.page-visible .loader {
  opacity: 0;
  visibility: hidden;
}

/* ==========================================================
   LOADER — LES SIGNAUX D'ATTENTE
   Phrase + spinner. Reserves aux chargements longs : c'est
   loader.js qui pose .visible sur .loader-status et
   .loader-phrase, et lui seul.
========================================================== */

/* Les durées d'apparition et de disparition sont dissociées :
   l'apparition est lente (on ne veut surtout pas que les signaux
   « sautent » à l'écran), la disparition est un peu plus rapide mais
   reste un vrai fondu. La constante FADE_OUT de loader.js doit rester
   supérieure ou égale à la plus longue des durées de sortie ci-dessous. */

.loader-phrase {
  opacity: 0;
  transition: opacity 700ms ease;
  padding: 0 2rem;
}

.loader-phrase.visible {
  opacity: 1;
  transition: opacity 1200ms ease;
}

.loader-status {
  opacity: 0;
  transition: opacity 700ms ease;
  width: fit-content;
  position: absolute;
  bottom: 2.5vw;
  right: 5vw;
}

.loader-status.visible {
  opacity: 1;
  transition: opacity 900ms ease;
}

/* Le spinner suit l'opacite de son parent .loader-status.
   Il avait auparavant son propre verrou d'opacite (.is-visible),
   pose par un script independant et jamais synchronise avec les
   timers du loader : le spinner n'apparaissait donc jamais. */
.spinner {
  width: 110px;
  height: 110px;
}

.spinner video {
  width: 100%;
  height: 100%;
}

/* ==========================================================
   ACCESSIBILITE
========================================================== */

@media (prefers-reduced-motion: reduce) {
  .loader,
  .loader-phrase,
  .loader-status {
    transition-duration: 0.01ms !important;
  }
}