.header-animation { background-color: #9EDDEB !important; } /* ============================ 1) Style global du ============================ */ body { margin: 0; padding: 0; /* La vidéo sert de fond par défaut sur desktop */ } /* ============================ 2) Vidéo de fond ============================ */ #video-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* Remplit tout l’écran sans déformation */ z-index: -1; /* Derrière tout le contenu */ } /* ============================ 3) Contenu ============================ */ .content-wrapper { position: relative; /* Sur Desktop, on laisse fond transparent pour voir la vidéo derrière */ background: none; } /* ============================ 4) Fallback sur mobile ============================ */ @media (max-width: 768px) { /* On masque la vidéo pour réduire la consommation de data */ #video-bg { display: none; } /* Sur mobile, on affiche l'image en fond, centrée et en cover (pas de mosaïque) */ .content-wrapper { background-image: url('/images/snailbackground1.png'); background-repeat: no-repeat; background-position: center; background-size: cover; } }