/* ===========================
   BANNIÈRE VIDÉO
   =========================== */

.video-banner {
    position: relative;
    width: 100%;
    height: 50vh; /* hauteur visible */
    overflow: hidden;
    background: white; /* ton choix */
    padding-top: 60px;  /* was 50 */
    box-sizing: border-box; /* important */
}
    /* Vidéo entièrement visible et centrée */
    .video-banner video {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 100%; /* priorité à la hauteur */
        width: auto; /* pas d’étirement horizontal */
        object-fit: contain; /* vidéo entière visible */
        filter: brightness(1.15) contrast(1.05) saturate(1.10);
    }
/*----- effet ZOOM ------------*/
    .video-banner video {
        transform: translate(-50%, -50%) scale(1.05);
        transition: transform 1.5s ease-out;
    }
/*--------effet PREMIUM -------*/
.video-banner {
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}
/*===========================
    FROM GEMINI
    ============================        
*/
/* On calme les ardeurs de la vidéo */
video, .video-container, .video-banner {
    position: relative;
    z-index: 1 !important;
    pointer-events: auto; /* Permet les clics sur la vidéo UNIQUEMENT si on ne touche pas au menu */
}

/* ===========================
   TEXTE SUR LA VIDÉO (DESKTOP)
   =========================== */

.video-text {
    position: absolute;
    top: 30%;
    left: 1%;
    transform: translateY(-50%);
    color: white;
    padding: 22px 32px;
    max-width: 450px;
    background: rgba(255, 255, 255, 0.00);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 14px;
    text-align: left;
    animation: fadeSlideIn 1.2s ease-out forwards;
    mix-blend-mode: normal;
}

/* ===========================
   VERSION MOBILE
   =========================== */

@media (max-width: 768px) {
    .video-banner {
        height: 40vh;
    }

    .video-text {
        top: auto;
        bottom: 5%;
        left: 50%;
        transform: translateX(-50%);
        max-width: 92%;
        padding: 16px 20px;
        border-radius: 12px;
        text-align: center;
        animation: fadeSlideIn 1s ease-out forwards;
    }
}

/* ===========================
   ANIMATION
   =========================== */

@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}