/* Conteneur pour la section avec l'image */
.image-section {
    /* On garde le tiers, mais on ajoute une hauteur minimale pour éviter que ça "casse" sur mobile */
    min-height: 33.33vh; 
    height: auto;
    
    /* Flexbox pour le centrage */
    display: flex;
    justify-content: center; 
    align-items: center;     
    overflow: hidden; 
    
    /* Optionnel : ajoute un peu de marge sur mobile pour ne pas coller aux bords */
    padding: 10px 0; 
}

/* L'image elle-même */
.image-section img {
    max-width: 95%;       /* Ne prend pas plus de 95% de la largeur (laisse une petite marge) */
    width: auto;          /* Largeur automatique */
    height: auto;         /* Hauteur automatique */
    
    /* C'est crucial : l'image garde son ratio mais s'adapte à la largeur disponible */
    max-height: 80vh;     /* L'image ne dépasse pas 80% de la hauteur de l'écran (utile sur mobile) */
    
    object-fit: contain;  /* Assure que toute l'image est visible sans déformation */
    
    /* Petit effet visuel pour le fond sombre */
    border-radius: 8px;   /* Coins arrondis (optionnel, mais moderne) */
}

/* --- SECTION BAS (Pour la vidéo 16/9) --- */
.bottom-section {
    height: auto; 
    min-height: 33.33vh; 
    
    display: flex;
    justify-content: center; 
    align-items: center;     
    overflow: hidden;        
}

/* --- STYLE DE LA VIDÉO (Format 16/9 - Taille réduite) --- */
.bottom-section video {
    max-width: 95%;         
    width: auto;            
    height: auto;           
    
    /* On divise la hauteur par deux environ pour la rendre plus petite */
    max-height: 45vh;       
    min-height: 25vh;       /* Ajusté en conséquence */
    
    object-fit: contain;    
    border-radius: 8px;     
}

/* Ajustement spécifique pour les écrans très petits (Smartphones) */
@media (max-width: 480px) {
    .image-section {
        min-height: 40vh; 
    }
    
    .image-section img {
        max-width: 90%;   
        max-height: 60vh; 
    }
    
    .bottom-section video {
        /* On réduit aussi sur mobile pour garder le même ratio de taille */
        max-height: 50vh;  
        min-height: 30vh; 
    }
}
/* Conteneur du lien vidéo */
.bottom-section a {
    display: block; /* Assure que le lien prend toute la place de la vidéo */
    position: relative; /* Permet de gérer la transformation */
    transition: transform 0.3s ease; /* Animation douce pour l'effet zoom */
    overflow: hidden; /* Coupe ce qui dépasse quand on zoome */
}

/* Effet au survol (PC uniquement) */
.bottom-section a:hover {
    transform: scale(1.05); /* Grossit la zone de 5% */
}

/* Sur mobile, on désactive l'effet car il n'y a pas de survol avec la souris */
@media (hover: none) and (pointer: coarse) {
    .bottom-section a:hover {
        transform: none;
    }
}

/* Assure que la vidéo reste propre à l'intérieur */
.bottom-section video {
    /* Garde tes styles existants, mais assure-toi que overflow est géré par le parent */
    transform: none; /* Important : ne pas zoomer la vidéo elle-même */
}