/* ============================================================
   MDTP Banner Block - Style Frontend
   ============================================================ */

.mdtp-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
}

/* ---- Conteneur iframe video -------------------------------- */
.mdtp-banner__video-container {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    /* Cache la video sur mobile : YouTube bloque l'autoplay iframe */
    display: none;
}

@media ( min-width: 768px ) {
    .mdtp-banner__video-container {
        display: block;
    }
}

/* Technique du ratio 16:9 inverse pour couvrir le conteneur */
.mdtp-banner__video-embed {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* On surpasse les dimensions du conteneur pour eviter les bandes */
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    /* Ratio : on force via padding-trick en JS ou on utilise des min-dimensions */
    pointer-events: none;
    border: 0;
}

/* Fallback : si le conteneur a un ratio connu (16:9),
   on peut forcer les dimensions absolues */
@media ( min-width: 768px ) {
    /*.mdtp-banner__video-embed {
        width: 177.78vh;   100vh * 16/9 
        height: 56.25vw;   100vw * 9/16 
        min-width: 100%;
        min-height: 100%;
    }*/
	
	.mdtp-banner__video-embed {
		top: 50%;
    	left: 50%;
		width: 1920px !important;
		height: 1080px !important;
		min-width: 1920px !important;
		min-height: 1080px !important;
		transform-origin: center center;
		
		/* 
		   Version sans max() : 
		   On utilise un scale uniforme qui garantit que la vidéo 
		   couvre TOUJOURS tout le conteneur
		   
		   Pour un effet "cover" on utilise le scale le plus grand
		   On simule max(scaleX, scaleY) avec deux transforms
		*/
		transform: translate(-50%, -50%) scale(
			max(calc(177.78vh / 1920px), calc(56.25vw / 1080px))
		);
		
		/* --- EFFET FONDU --- */
		opacity: 0;
		animation: videoFadeIn 2s ease forwards;
		animation-delay: 0.75s;
	}
}

@keyframes videoFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* ---- Overlay ---------------------------------------------- */
.mdtp-banner__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* ---- Contenu ---------------------------------------------- */
.mdtp-banner__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 60px 40px;
    box-sizing: border-box;
}

.mdtp-banner__content--left   { text-align: left;   }
.mdtp-banner__content--center { text-align: center; }
.mdtp-banner__content--right  { text-align: right;  }

/* Securite : texte lisible sur fond video */
.mdtp-banner__content h1,
.mdtp-banner__content h2,
.mdtp-banner__content h3,
.mdtp-banner__content p {
    color: #ffffff;
}

/* ---- Responsive ------------------------------------------- */
@media ( max-width: 767px ) {
    .mdtp-banner__content {
        padding: 40px 20px;
    }
}