/* =========================================
   CONTENEUR PRINCIPAL DE LA PAGE (.video-project-page)
   ========================================= */
.video-project-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
}

/* =========================================
   BLOC PROJET VIDÉO (.video-project)
   ========================================= */
.video-project {
    display: flex;
    flex-direction: row;
    /* "stretch" force la colonne texte à faire la même hauteur que la vidéo */
    align-items: stretch; 
    justify-content: space-between;
    box-sizing: border-box;
    gap: 50px;
    margin-top: 175px; /* Décalage pour le header fixe */
    padding: 0 6%;
    width: 100%;
}

/* =========================================
   INFORMATIONS (TEXTE & BOUTON) (.video-project__info)
   ========================================= */
.video-project__info {
    display: flex;
    flex-direction: column;
    width: 40%; /* 40% de la largeur pour le texte */
}

/* Titre */
.video-project__title {
    font-size: 3rem;
    line-height: 1; 
    margin-top: 0;  
    margin-bottom: 0;
}

/* Description */
.video-project__description {
    font-size: 20px; /* Harmonisation avec l'ancienne règle dupliquée */
    line-height: 1.8rem;
    letter-spacing: 2%;
    width: 100%; 
    margin-top: 20px; 
}

/* Bouton Contact (hérite aussi de .btn globalement) */
.video-project__contact-btn {
    /* "margin-top: auto" pousse le bouton tout en bas du conteneur flex parent */
    margin-top: auto; 
    align-self: flex-start;
    margin-bottom: 10px; 
    font-size: 20px;
}

/* =========================================
   LECTEUR VIDÉO (.video-project__player)
   ========================================= */
.video-project__player {
    width: 60%; /* 60% de la largeur pour la vidéo */
}

/* On force l'iframe à garder le ratio 16/9 */
.video-project__iframe {
    width: 100%;
    height: 100%; 
    aspect-ratio: 16 / 9; 
    border-radius: 30px;
}

/* =========================================
    RESPONSIVE MOBILE
   ========================================= */
@media (max-width: 1000px) {
    .video-project {
        flex-direction: column;
        padding: 0 10px;
    }

    /* 1. On "efface" visuellement le conteneur info pour gérer ses enfants individuellement */
    .video-project__info {
        display: contents;
    }

    /* 2. Ordre 1 : Le titre en premier */
    .video-project__title {
        order: 1;
        font-size: 2rem;
    }

    /* 3. Ordre 2 : La description en deuxième */
    .video-project__description {
        order: 2;
        margin-top: -30px;
        font-size: 15px;
        line-height: 20px;
    }

    /* 4. Ordre 3 : La vidéo vient s'intercaler ici */
    .video-project__player {
        order: 3;
        width: 100%;
        margin-top: -30px;
        margin-bottom: 30px; /* Ajoute de l'espace sous la vidéo */
    }

    /* 5. Ordre 4 : Le bouton de contact passe tout en bas */
    .video-project__contact-btn {
        order: 4;
        margin-top: 0; /* Annule le "margin-top: auto" de la version ordinateur */
        align-self: flex-start; /* Garde le bouton aligné à gauche, ou mets "center" pour le centrer */
    }
}