/* Ouverture du site (environ 4,4 s).
   1. Révélateur : sur le papier ivoire, le nom monte en densité comme un tirage dans le bain.
   2. Projection : le nom devient la fenêtre d'un projecteur ; 44 photos argentiques défilent très vite, puis image par image,
      jusqu'au coucher de soleil argentique ; la lampe s'éteint, l'image retombe dans l'encre.
   3. Le voile ivoire se lève : l'accueil apparaît, le nom est déjà à sa place.
   Le voile existe dès la première image (pseudo-élément de <html>), avant tout script. */
html.ouverture { overflow: hidden; }
html.ouverture::before {
  content: ""; position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: var(--voile, 1);
  background: radial-gradient(circle, rgb(28 26 23 / .07) 28%, transparent 31%) 0 0 / 5px 5px, var(--ivoire);
}
.ouverture__nom { position: fixed; inset: 0; z-index: 9002; pointer-events: none; }
.ouverture__nom > span {
  position: fixed; display: block; white-space: nowrap;
  background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text;
}
/* pas de flex : le découpage par le texte ne s'y applique pas. Chaque copie est posée sur ses lettres, alignée à gauche. */

/* pendant l'ouverture, l'accueil attend : le nom est déjà posé, le reste démarre après */
html.ouverture .lettre { animation: none; }
html.ouverture .collage-intro .sticker, html.ouverture .viseur i,
html.ouverture .intro__signature, html.ouverture .intro__ligne { animation-play-state: paused; }

/* pendant l'ouverture, seul « Nous contacter » reste visible et cliquable, au-dessus du voile */
html.ouverture .entete { z-index: 9003; background: none; }
html.ouverture .marque, html.ouverture .entete__nav > :not(.entete__contact) { visibility: hidden; }
html.ouverture .entete__nav { background: none; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }