.page-fade{
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  z-index: 9999;
}

.page-fade.is-visible{
  opacity: 1;
  pointer-events: all;
}

/* =========================
   CHARGEUR VIDÉO (injectée en JS)
========================= */
.page-fade .page-loader-video{
  position: fixed;
  right: 20px;
  bottom: 20px;

  width: 200px;
  height: 200px;
  object-fit: contain;

  opacity: 0;
  transition: opacity 1s ease;

  pointer-events: none;
  z-index: 1;
}

/* visible uniquement pendant le fondu */
.page-fade.is-visible .page-loader-video{
  opacity: 1;
}

/* =========================
   3 POINTS QUI SAUTENT
========================= */
.page-fade::after{
  content: "●";
  position: fixed;
  right: 20px;
  bottom: 20px;

  transform: translateX(215px);

  font-size: 16px;
  line-height: 1;
  color: rgba(255,255,255,.9);

  text-shadow:
    10px 0 rgba(255,255,255,.6),
    20px 0 rgba(255,255,255,.4);

  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

.page-fade.is-visible::after{
  opacity: 1;
  animation:
    dotJump 1.2s infinite ease-in-out,
    dotJump2 1.2s infinite ease-in-out .2s,
    dotJump3 1.2s infinite ease-in-out .4s;
}

/* =========================
   Anti-flash au chargement
========================= */
html.is-loading .page-fade{
  opacity: 1 !important;
  pointer-events: all;
}

html.is-loading{
  overflow: hidden;
}