/* ---------------------------------------------------------------
   QHB — celebration « chantier acheve »

   Un overlay petrole qui couvre l'ecran deux secondes et demie.
   Voir public/assets/js/celebrate.js pour le quand et le pourquoi.
   --------------------------------------------------------------- */

.celebrate {
  position: fixed;
  inset: 0;
  z-index: 900;

  /* Plein ecran et CENTRE dans les deux sens. Sans ces trois lignes — et
     sans que la feuille soit chargee — la toile se posait en haut a gauche
     dans le flux de la page. C est ce qui se passait dans l app, qui ne
     chargeait pas ce fichier. */
  display: flex;
  align-items: center;
  justify-content: center;

  /* PETROLE OPAQUE, et pas un voile.
     La transparence laissait transparaitre l ecran de travail, qui est
     blanc : les braises orange sur fond clair rendaient mal, et le logo
     se noyait (signale par Jonathan le 05.10). Un feu se regarde dans le
     noir. On couvre donc entierement, deux secondes et demie — c est court,
     et le travail revient juste apres.
     #1e2c2d : le petrole de la charte, assombri pour que les braises
     portent. Le logo reste intouche, c est le fond qui change. */
  background: #1e2c2d;

  opacity: 0;
  transition: opacity 150ms ease-out;

  /* Un tap ferme, et rien d'autre ne reagit pendant ce temps. */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.celebrate-visible {
  opacity: 1;
}

.celebrate-toile {
  /* Les pixels restent des pixels, meme si le navigateur redimensionne. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Le texte est la pour les lecteurs d'ecran (aria-live) : l'animation
   dit « acheve » a ceux qui la voient, cette ligne le dit aux autres. */
.celebrate-texte {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Mouvement reduit : pas de transition, l'apparition se fait a plat.
   Le JS coupe deja les flammes ; ceci coupe le reste. */
@media (prefers-reduced-motion: reduce) {
  .celebrate {
    transition: none;
  }
}