/* Voile de chargement et de transition entre les pages.
   ------------------------------------------------------------------
   Le logo est découpé en tuiles : chacune montre un fragment de la même
   image, calé par `background-position`. À la sortie d'une page elles
   s'écartent, à l'arrivée elles se remettent en place. Le signe se
   disloque puis se recompose, sans qu'aucun dessin ne soit redessiné. */

.voile {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: grid;
  place-items: center;
  transition: opacity 0.4s var(--ease-sortie), visibility 0.4s;
}
.voile.est-masque {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Filet de sécurité. Le voile n'est retiré que par js/main.js : si le
   script ne s'exécute pas — JavaScript désactivé, fichier perdu en route,
   erreur au chargement — il recouvrait la page indéfiniment et bloquait
   les clics. La classe .no-js n'est levée qu'au démarrage du script ;
   tant qu'elle est là au bout de trois secondes, le voile s'efface seul.
   Quand le script tourne, cette règle ne s'applique jamais. */
.no-js .voile { animation: voile-secours 0.4s 3s forwards; }
@keyframes voile-secours {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.voile-inner {
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(240px, 62vw);
}

/* --- le signe en tuiles --------------------------------------------- */
.voile-signe {
  position: relative;
  width: 64px;
  aspect-ratio: 1;           /* vista-icone.svg est carrée */
  --duree-signe: 0.9s;
}

.voile-tuile {
  position: absolute;
  background-image: url("../assets/logo/vista-icone.svg");
  background-repeat: no-repeat;
  /* La tuile ne montre que sa part du logo : l'image est mise à l'échelle
     du signe entier, puis décalée sur la case voulue. */
  background-size: calc(100% * var(--cols)) calc(100% * var(--rangs));
  will-change: transform, opacity;
}

/* Arrivée : les fragments reviennent se poser. */
.voile-tuile {
  animation: tuile-retour var(--duree-signe) var(--ease-sortie) both;
  animation-delay: calc(var(--i) * 0.028s);
}

/* Sortie : ils s'écartent et s'effacent. */
.voile.est-sortie .voile-tuile {
  animation: tuile-eclat 0.6s var(--ease-doux) both;
  animation-delay: calc(var(--i) * 0.022s);
}

@keyframes tuile-retour {
  from {
    transform: translate3d(calc(var(--dx) * 1px), calc(var(--dy) * 1px), 0)
               rotate(calc(var(--rot) * 1deg)) scale(0.7);
    opacity: 0;
  }
  to { transform: none; opacity: 1; }
}

@keyframes tuile-eclat {
  from { transform: none; opacity: 1; }
  to {
    transform: translate3d(calc(var(--dx) * 1.2px), calc(var(--dy) * 1.2px), 0)
               rotate(calc(var(--rot) * -1deg)) scale(0.66);
    opacity: 0;
  }
}

/* Barre de progression : seulement à la toute première arrivée. */
.voile-barre {
  width: 100%;
  height: 2px;
  background: var(--trait);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s var(--ease-sortie);
}
.voile.est-intro .voile-barre { opacity: 1; }

.voile-barre-fill {
  height: 100%;
  width: 0;
  background: var(--orange);
  transition: width 0.2s linear;
}

/* Nom de la page visée : la transition dit vers où l'on part. */
.voile-cap {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--texte-doux);
  opacity: 0;
  transition: opacity 0.3s var(--ease-sortie);
  min-height: 1em;
}
.voile.est-sortie .voile-cap { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .voile-tuile,
  .voile.est-sortie .voile-tuile { animation: none; opacity: 1; transform: none; }
}