/* Feuille de styles CSS de la page "Présentation" */

/* Notre atelier */

#notre-atelier {
    display: flex;
    justify-content: space-between;
    gap: 25px;
}
#notre-atelier .introduction {
    margin-top: 0;
}
#notre-atelier .video-atelier {
    width: 35%;
    border-radius: 5px;
    overflow: hidden;
}
@media screen and (max-width: 1080px) {
    #notre-atelier {
        flex-direction: column;
    }
    #notre-atelier .video-atelier {
        width: 100%;
    }
}

/* Carrousel de photos */

#carrousel-photos-atelier {
    margin-top: 100px;
}
#carrousel-photos-atelier .slick-list {
    border-radius: 5px;
}
#carrousel-photos-atelier .slick-list.draggable {
    cursor: grab;
}
#carrousel-photos-atelier .slick-list.draggable:active {
    cursor: grabbing;
}
#carrousel-photos-atelier .slick-dots button::before {
    transition: opacity 0.3s ease;
}
#carrousel-photos-atelier img {
    overflow-clip-margin: unset;
}

/* Maîtrise du processus */

#maitrise-processus #equipements {
    margin-top: 100px;
    display: flex;
    gap: 50px;
}
#maitrise-processus #equipements .equipement {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 1;
}
#maitrise-processus #equipements .equipement * {
    margin: 0;
}
#maitrise-processus #equipements .equipement h3 {
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-size: 18px;
}
#maitrise-processus #equipements .equipement h3::before {
    font-family: "tabler-icons";
    font-size: 25px;
    font-weight: 400;
}
#maitrise-processus #equipements .equipement:nth-child(1) h3::before {
    content: "\fc12";
}
#maitrise-processus #equipements .equipement:nth-child(2) h3::before {
    content: "\f1f9";
}
#maitrise-processus #equipements .equipement:nth-child(3) h3::before {
    content: "\ebe3";
}
#maitrise-processus #equipements .equipement:nth-child(4) h3::before {
    content: "\101f0";
}
#maitrise-processus #equipements .equipement:nth-child(5) h3::before {
    content: "\eaff";
}
#maitrise-processus #equipements .equipement p {
    font-size: 13px;
}
@media screen and (max-width: 1180px) and (min-width: 950px) {
    #maitrise-processus #equipements {
        flex-wrap: wrap;
        gap: 50px;
    }
    #maitrise-processus #equipements .equipement {
        min-width: 400px;
    }
}
@media screen and (max-width: 950px) {
    #maitrise-processus #equipements {
        flex-direction: column;
        gap: 50px;
    }
    #maitrise-processus #equipements .equipement {
        max-width: 400px;
    }
}

/* Déroulement d'un projet */

#deroulement-projet {
    margin-top: 150px;
}