/* Tous les containers de la section approche */
.approche {
    position: relative;
    display: flex;
    flex-direction: row;
    padding: 1%;
    height: 500px;
    background-color:var(--FondColor2);
    border-radius: 15px;
    z-index: 2;
    overflow: hidden;
    text-shadow: 0px 0px 10px black ;
}


.approche::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;


    background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),
    url('images/discution.webp');
    background-size: cover; /* Ajuste l'image pour qu'elle couvre tout le bloc */
    background-position: center; /* Centre l'image */
    background-repeat: no-repeat; /* Empêche la répétition */
    background-attachment: fixed;

    
    background-attachment: fixed;

    filter: blur(10px);
    opacity: var(--Opacity); 
    
    z-index: -1;
}


.bloc-gauche {
    display: flex;
    flex-direction: column;
    flex : 1;
    padding: 1%;

    justify-content: center; /* Centre les éléments horizontalement */
    text-align: left; /* Centre le texte à l'intérieur des éléments */
}

.bloc-droit {
    display: flex;
    flex-direction: column;
    flex: 3;
    padding: 1%;
}

.haut {
    display: flex;
    flex-direction: row;
    flex: 1;
    padding: 2%;
}

.bas {
    display: flex;
    flex-direction: row;
    flex: 1;
    padding: 2%;
}

.bloc {
    flex : 1;

    position: relative;
    width: 100%;
    height: 100%;
    margin: 1px;
    margin-left: 3%;
    margin-right: 3%;

    text-align: center;
    overflow: hidden;
    background-color: var(--FondBlocs);
    border-radius: 15px;
    transition:  0.3s ease-in-out;
    
}

.bloc:hover {
    box-shadow: 0px 0px 20px #e0e0e030;
}


.bloc h3 {
    
    transition: opacity 0.3s ease-in-out;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

.bloc p {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center;

}

.bloc:hover p {
    opacity: 1;
}

.bloc:hover h3 {
    opacity: 0;
}
    
/* tout les container de la section Mes services */

.services, .equipment {
    display: flex;
    flex-direction: column;

    background-color: var(--FondColor2);
    color: var(--TextColor2);
    margin-top: 25px;
    margin-bottom: 25px;
    border-radius: 15px;
    padding: 2%;
}

.intro {
    display: block;
    text-align: left;

}

.services-blocs {
    display: flex;
    flex-direction: row;
    color: var(--TextColor);
}

/* Image de fond et animations */
.service-photo, .service-video, .service-post-prod, .service-edit {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin: 1%;
    text-align: center;
    transition:  0.5s ease-in-out;
    opacity: var(--Opacity);
    border-radius: 15px;
    transform: scale(1.0);
    text-shadow: 0px 0px 10px rgb(0, 0, 0);
    
    padding:1%;
    z-index: 5;

}

/* paramètres pour l'animation et le fond quand survole */
.service-photo:hover, .service-video:hover, .service-post-prod:hover, .service-edit:hover {
    opacity: 1;
    transition:  0.3s ease-in-out;
    border-radius: 20px;
    transform: scale(1.1);
    
    background-size:280%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    text-shadow: 0px 0px 10px rgb(0, 0, 0);
    
    z-index: 6;
}

/* ajout de l'image */
.service-photo {
    
    background: linear-gradient(rgba(0, 0, 0, 0.400),rgba(0, 0, 0, 0.400)),
    url('images/canon.webp');
    
    background-size: 700%;
    background-position: 40% 50%;
    background-repeat: no-repeat;
}

.service-video {
    background: linear-gradient(rgba(0, 0, 0, 0.400),rgba(0, 0, 0, 0.400)), 
    url('images/cine.webp');

    background-size: 700%;
    background-position: 30% 20%;
    background-repeat: no-repeat;
}

.service-post-prod {
    background: linear-gradient(rgba(0, 0, 0, 0.600),rgba(0, 0, 0, 0.600)), 
    url('images/Davinci.webp');

    background-size: 500%;
    background-position: 100% 100%;
    background-repeat: no-repeat;
}

.service-edit {
    background: linear-gradient(rgba(0, 0, 0, 0.600),rgba(0, 0, 0, 0.500)), 
    url('images/CG.webp');

    background-size: 500%;
    background-position: 30% 60%;
    background-repeat: no-repeat;
}



.bienvenue {
    display :block;
    text-align: center;
    background: linear-gradient(rgba(0, 0, 0, 0.503),rgba(0, 0, 0, 0.526)), 
    url('images/Audiovisuel.webp');

    background-size:cover; /* Ajuste l'image pour qu'elle couvre tout le bloc */
    background-position: center; /* Centre l'image */
    background-repeat: no-repeat; /* Empêche la répétition */
    background-attachment: fixed;
    opacity: var(--Opacity);
    
    border-radius: 20px;
}





.contact {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
    padding: 2%;
    
    background-color:var(--FondColor2);
    border-radius: 15px;
    
    overflow: hidden;
    text-shadow: 0px 0px 10px black ;
    z-index: 2;
    align-items: center;
}

.contact a {
    color: var(--TextColor);
    text-decoration: none;
}

.coordonnees {
    padding-top: 2%;
}


.contact::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),
    url('images/contact_50.webp');
    background-size: cover; /* Ajuste l'image pour qu'elle couvre tout le bloc */
    background-position: center; /* Centre l'image */
    background-repeat: no-repeat; /* Empêche la répétition */
    background-attachment: fixed;
    
    background-attachment:scroll;

    opacity: var(--Opacity); 
    z-index: -1;
}

#contactBouton {
    padding: 12px;
    margin-top: 2%;
    margin-bottom:2%;
    font-family: var(--PoliceText);
    
    background: #007bff;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.1s ease-in-out;
}


#contactBouton:hover {
    background: #0056b3;
    
}



    
@media screen and (max-width: 900px) {
    .approche {
        flex-direction: column;
        height: auto;
        padding: 3%;
    }

    
    .bloc-gauche, .bloc-droit {
        flex: none;
        width: 100%;
        text-align: center;
        align-items: center;
        padding: 2%;
    }

    .bloc-gauche {
        order: 1; /* Assure que le bloc gauche passe en premier */
    }

    .bloc-droit {
        order: 2; /* Passe en dessous */
        padding-left: 0;
        padding-right: 0;
    }

    .haut, .bas {
        flex-direction: column;
        padding: 0;
    }

    .bloc {
        flex: none;
        width: 90%;
        min-height: 150px; /* Assure une visibilité correcte */
        margin: 10px auto; /* Centre les blocs */
    }

    .bloc h3, .bloc p {
        position: static;
        transform: none;
        text-align: center;
        width: 100%;
    }

    .bloc p, .bloc h3{
        opacity: 1; /* Toujours visible sur mobile */
    }

    .bloc:hover h3 {
        opacity: 1; /* Garde le titre visible */
    }
    

    .services-blocs {
        flex-direction: column;
    }

    .service-photo, .service-video, .service-post-prod, .service-edit {
        margin: 10px 0;
    }

    .service-photo {
    
        background: linear-gradient(rgba(0, 0, 0, 0.400),rgba(0, 0, 0, 0.400)),
        url('images/canon_50.webp');
        
        background-size: 500%;
        background-position: 40% 50%;
        background-repeat: no-repeat;
    }

    .service-video {
        background: linear-gradient(rgba(0, 0, 0, 0.400),rgba(0, 0, 0, 0.400)), 
        url('images/cine_50.webp');
    
        background-size: 500%;
        background-position: 30% 20%;
        background-repeat: no-repeat;
    }

    .service-post-prod {
        background: linear-gradient(rgba(0, 0, 0, 0.600),rgba(0, 0, 0, 0.600)), 
        url('images/Davinci_50.webp');

        background-size: 300%;
        background-position: 100% 100%;
        background-repeat: no-repeat;
    }

    .service-edit {
        background: linear-gradient(rgba(0, 0, 0, 0.600),rgba(0, 0, 0, 0.500)), 
        url('images/CG_50.webp');

        background-size: 300%;
        background-position: 10% 70%;
        background-repeat: no-repeat;
    }


    .bienvenue {
        /*background-attachment: scroll;*/
        background: linear-gradient(rgba(0, 0, 0, 0.503),rgba(0, 0, 0, 0.526)), 
    url('images/Audiovisuel_50.webp');

    background-size:cover; /* Ajuste l'image pour qu'elle couvre tout le bloc */
    background-position: center; /* Centre l'image */
    background-repeat: no-repeat; /* Empêche la répétition */
    background-attachment: scroll;
        padding: 5%;
    }

    .contact {
        flex-direction: column;
        text-align: center;
        padding: 3%;
        padding-bottom: 5%;
    }

}