.ecran1 { position: fixed; inset: 0; z-index: 1000; overflow: hidden; background: var(--noir-salle); pointer-events: none; transition: opacity 220ms cubic-bezier(0.23, 1, 0.32, 1); }
.ecran1[data-fini] { opacity: 0; }
.ecran1::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, rgb(13 13 12 / 62%) 0, rgb(13 13 12 / 62%) var(--hauteur-entete), rgb(13 13 12 / 0%) var(--hauteur-entete), rgb(13 13 12 / 0%) calc(100% - var(--hauteur-barre)), rgb(13 13 12 / 72%) calc(100% - var(--hauteur-barre))); }
.ecran1::after { content: ""; position: absolute; inset: auto 0 var(--hauteur-barre); z-index: 1; height: 65%; background: linear-gradient(to top, rgb(13 13 12 / .92) 0%, rgb(13 13 12 / .74) 25%, rgb(13 13 12 / .46) 50%, rgb(13 13 12 / .2) 72%, rgb(13 13 12 / .06) 88%, rgb(13 13 12 / 0) 100%); }
.ecran1 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;  }
@media (max-width: 1099px) { .ecran1 img { object-position: 52.1% 50%; } }
@media (max-width: 759px) { .ecran1 img { object-position: 60.1% 50%; } }
@media (prefers-reduced-motion: reduce) { .ecran1 { display: none; } }