/* Le logo de l'en-tête reste visible quoi qu'il arrive.
   La priorité CSS est nécessaire : le moteur de Framer réécrit l'opacité en
   style direct après chaque défilement, et laissait le logo à zéro. */
img[data-logo="visible"] { opacity: 1 !important; }

/* L'en-tête porte les deux logos empilés, décalés de quelques pixels. Sans
   cette règle, ils s'affichaient tous les deux et le sigle apparaissait
   dédoublé. */
img[data-logo="cache"] { opacity: 0 !important; }

/* Filet de sécurité. Le fond derrière l'en-tête dépend de l'état des
   animations et varie d'un chargement à l'autre : la carte des fonds ne peut
   pas être juste à tous les coups. Ce liseré ne se voit pas sur le fond
   attendu, une ombre noire sur du noir ne marque rien, mais il détache le
   logo les rares fois où le choix tombe à côté. */
img[data-variante="blanc"] {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .9))
          drop-shadow(0 0 4px rgba(0, 0, 0, .7))
          drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
}
img[data-variante="couleur"] {
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .95))
          drop-shadow(0 0 4px rgba(255, 255, 255, .75))
          drop-shadow(0 1px 3px rgba(255, 255, 255, .5));
}