/* 1. Masque le conteneur de toutes les sources d'images et de vidéos
*/ #hiddenMediaSources { position: absolute !important; left: -9999px
!important; width: 1px !important; height: 1px !important; overflow: hidden
!important; opacity: 0 !important; pointer-events: none !important;
visibility: hidden !important; } /* 2. Styles pour le conteneur de la vidéo
Gumlet (#sunsetvideo_source) */ /* Ces règles sont cruciales pour nettoyer
les marges/paddings qui pourraient décaler le texte */ #sunsetvideo_source {
margin: 0 !important; padding: 0 !important; line-height: 0 !important; /*
Supprime l'espace vertical causé par la hauteur de ligne */ font-size:
0 !important; /* Supprime l'espace vertical causé par la taille de
police */ vertical-align: top !important; /* Aide à l'alignement pour
les éléments inline-block */ display: block !important; /* Assure qu'il
se comporte comme un bloc pour le flux */ /* Les propriétés comme position,
width, height, aspect-ratio sont gérées par le style inline de Gumlet */ }
/* 3. Styles pour l'iframe de la vidéo Gumlet elle-même */
#sunsetvideo_source iframe { margin: 0 !important; padding: 0 !important;
line-height: 0 !important; font-size: 0 !important; display: block
!important; /* Assure qu'elle se comporte comme un bloc */ /* Les
propriétés comme position, top, left, width, height sont gérées par le style
inline de Gumlet */ } /* 4. Styles pour le conteneur principal
#MediaContainer */ /* Assurez-vous qu'il permet à son contenu de
définir sa hauteur. */ #MediaContainer { display: flex; justify-content:
center; align-items: center; /* Important pour centrer l'image/vidéo
verticalement */ min-height: 0 !important; /* Laissez la hauteur du
conteneur s'adapter au contenu */ height: auto !important; /* La
hauteur s'adapte automatiquement */ /* Si vous voulez un peu
d'espace au-dessus et en dessous de l'image/vidéo, ajoutez ici un
padding */ /* padding-top: 20px; padding-bottom: 20px; */ } /* 5. Appliquez
ces styles aussi sur les écrans plus petits (Media Queries) */ /* C'est
essentiel pour écraser les styles par défaut de Webstudio sur
mobile/tablette. */ @media (max-width: 768px) { #sunsetvideo_source {
margin: 0 !important; padding: 0 !important; line-height: 0 !important;
font-size: 0 !important; vertical-align: top !important; display: block
!important; } #sunsetvideo_source iframe { margin: 0 !important; padding: 0
!important; line-height: 0 !important; font-size: 0 !important; display:
block !important; } #MediaContainer { min-height: 0 !important; height: auto
!important; } } @media (max-width: 480px) { #sunsetvideo_source { margin: 0
!important; padding: 0 !important; line-height: 0 !important; font-size: 0
!important; vertical-align: top !important; display: block !important; }
#sunsetvideo_source iframe { margin: 0 !important; padding: 0 !important;
line-height: 0 !important; font-size: 0 !important; display: block
!important; } #MediaContainer { min-height: 0 !important; height: auto
!important; } } /* Styles pour les icônes flottantes */ .floating-icon {
position: fixed !important; /* CLÉ : Positionne l'icône par rapport à
la fenêtre visible */ z-index: 9999 !important; /* CLÉ : Assure que
l'icône est au-dessus de tout le reste */ pointer-events: none
!important; /* CLÉ : Permet de cliquer à travers l'icône sur le contenu
en dessous */ user-select: none !important; /* Empêche la sélection de
l'icône avec la souris */ opacity: 0.8; /* Optionnel : Rend les icônes
légèrement transparentes */ /* Vous pouvez ajouter une transition si vous
voulez qu'elles apparaissent en douceur */ /* transition: opacity 0.5s
ease-in-out; */ }