* {
    padding: 0;
    margin: 0;
}

body {
    background-color: #F2F2F2;
}


@keyframes eyeturn {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* Affichage pour ordinateurs */
@media only screen and (min-width: 700px) {


    #menu_tendances {
        height: 0vh;
        pointer-events: none;
        width: 100vw;
        background-color: #202020;
        position: fixed;
        top: 0;
        left: 0;

        transition: 0.5s all ease;

        z-index: 5;
    }

    #menu_tendances_titres {
        width: 85%;
        opacity: 0;
        margin: auto;
        margin-top: 10vh;
        display: flex;
        justify-content: space-between;
    }

    #menu_tendances_titres h2 {
        color: white;
        font-size: 2.5vw;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        letter-spacing: 0.1vw;
        font-weight: 400;
    }

    #menu_tendances_titres img {
        width: 1.5vw;
    }

    #menu_tendances_titres img:hover {
        cursor: pointer;
    }

    #menu_tendances_liste {
        display: flex;
        opacity: 0;
        justify-content: center;
        align-items: center;
        height: 75vh;
        width: 100vw;
        position: absolute;
        bottom: 0;
    }

    #menu_tendances_liste_une {
        height: 100%;
        width: 50%;
        background: url('../img/pjcroce/photos/une.webp');
        background-position: center;
        background-size: cover;
        position: relative;
        transition: 0.8s all ease;
    }

    #menu_tendances_liste_deux {
        height: 100%;
        width: 50%;
        background: url('../img/pjcroce/projets/deux.png');
        background-position: center;
        background-size: cover;
        position: relative;
        transition: 0.8s all ease;
    }

    #menu_tendances_liste_trois {
        height: 100%;
        width: 50%;
        background: url('../img/pjcroce/projets/trois.png');
        background-position: center;
        background-size: cover;
        position: relative;
        transition: 0.8s all ease;
    }

    #menu_tendances_liste_quatre {
        height: 100%;
        width: 50%;
        background: url('../img/pjcroce/photos/dixsept.webp');
        background-position: center;
        background-size: cover;
        position: relative;
        transition: 0.8s all ease;
    }

    #menu_tendances_liste_une:hover,
    #menu_tendances_liste_deux:hover,
    #menu_tendances_liste_trois:hover,
    #menu_tendances_liste_quatre:hover {
        opacity: 1;
        width: 100%;
        cursor: pointer;
    }

    #menu_tendances_liste_une:hover .tendances_hover,
    #menu_tendances_liste_deux:hover .tendances_hover,
    #menu_tendances_liste_trois:hover .tendances_hover,
    #menu_tendances_liste_quatre:hover .tendances_hover {
        opacity: 1;
    }


    #menu_tendances_liste_une:hover .tendances_base h2,
    #menu_tendances_liste_deux:hover .tendances_base h2,
    #menu_tendances_liste_trois:hover .tendances_base h2,
    #menu_tendances_liste_quatre:hover .tendances_base h2 {
        opacity: 0;
    }

    #menu_tendances_liste_une:hover .tendances_base,
    #menu_tendances_liste_deux:hover .tendances_base,
    #menu_tendances_liste_trois:hover .tendances_base,
    #menu_tendances_liste_quatre:hover .tendances_base {
        background: linear-gradient(00deg, rgba(0, 0, 0, 0.603) 0%, rgba(255, 255, 255, 0) 100%);
    }



    .tendances_base {
        transition: 0.5s all ease;
        pointer-events: none;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.685)
    }


    .tendances_base h2 {
        color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        text-align: center;
        transform: translate(-50%, -50%);
        font-size: 2em;
        letter-spacing: 0.1vw;
    }

    .tendances_hover {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        position: absolute;

        pointer-events: none;
        transition: 0.3s all ease;

    }


    .tendances_hover h4 {
        color: #C5C5C5;

        text-transform: uppercase;

        width: 40vw;

        font-size: 2vw;
        letter-spacing: 0.2vw;
    }

    .tendances_hover h3 {
        color: #F1F1F1;

        text-transform: uppercase;
        left: 4.5vw;
        width: 45vw;

        line-height: 100%;

        font-size: 7vw;
    }

    .tendances_hover p {
        color: #CB6217;
        font-family: 'Battambang';


        width: 35vw;

        font-size: 1.8vw;
        letter-spacing: 0.1vw;
        line-height: 130%;
    }





    #top_home {
        background-image: url("../img/background_top_home.webp");
        background-position: center;
        background-size: cover;

        position: relative;

        height: 100vh;
        width: 100vw;
    }

    #top_project {
        background-image: url("../img/background_top_projets.png");
        background-position: center;
        background-size: cover;

        position: relative;

        height: 100vh;
        width: 100vw;
    }


    #top_video {
        background-image: url("../img/background_top_video.webp");
        background-position: center;
        background-size: cover;

        position: relative;

        height: 80vh;
        width: 100vw;
    }

    #top_contact {
        background-color: #f1f1f1;
        position: relative;

        height: 65vh;
        width: 100vw;
    }


    #top_materiel {
        background-image: url("../img/background_top_materiel.jpg");
        background-position: center;
        background-size: cover;

        position: relative;

        height: 80vh;
        width: 100vw;
    }


    #top_photos {
        background-image: url("../img/background_top_photos.jpg");
        background-position: center;
        background-size: cover;

        position: relative;

        height: 100vh;
        width: 100vw;
    }



    #nav-color-black {
        background-color: transparent;

        transition: all 0.2s ease;

        z-index: 2;

        top: 0 !important;

    }

    .navigation-container {

        max-width: 95%;
        margin: auto;
        transition: all 0.5s ease;
        margin-top: 5vh;
    }


    .navItem {
        margin-right: 1vw;
    }

    .navItem a {
        color: #595959 !important;
    }


    #white_nav a {
        color: #E3E3E3 !important;
    }

    .navItem a img {
        width: 10vw;
        transition: all 0.5s ease;
    }

    .navItem a:hover {
        color: #000000 !important;
        cursor: pointer;
    }

    #white_nav a:hover {
        color: white !important;
    }

    .navItem a h4 {
        font-weight: 400;
        font-size: 0.8vw;
    }

    .actual-nav-white h4 {
        font-weight: 700 !important;
    }

    .actual-nav-black h4 {
        font-weight: 700 !important;
    }


    .btn-cl {
        margin-left: 2vw;
        transition: all 1s ease;
    }

    .btn-cl a {
        background-color: #4F91F4;
        color: white !important;
        border-radius: 10px;
        font-size: 0.7vw !important;
        font-weight: 500 !important;
        transition: all 0.5s ease;

        padding-top: 2vh;
        padding-bottom: 2vh;
        padding-right: 2vw;
        padding-left: 2vw;
    }

    .btn-cl a:hover {
        background-color: #2e5692;
    }

    .btn-cl a h4 {
        color: white;

    }


    .btn-cl-white {
        margin-top: 4vh;
        margin-left: 0.4vw;

    }

    .btn-cl-white a {
        background-color: #ECECEB !important;
        color: rgb(2, 2, 2);
        border-radius: 10px;
        text-decoration: none;
        font-size: 0.70vw !important;
        font-weight: 500 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 9vw;
        transition: all 0.5s ease;

        padding-top: 2vh;
        padding-bottom: 2vh;
        padding-right: 1vw;
        padding-left: 1vw;
    }

    .btn-cl-white a img {
        width: 1.4vw;
        margin-left: 2vw;
        transition: 0.8s all ease;
    }

    .btn-cl-white a:hover {
        background-color: #9f9f9f !important;
    }

    .btn-cl-white a:hover img {
        margin-left: 3vw;
    }

    .btn-cl-white a h4 {
        color: rgb(2, 2, 2);

    }



    .btn-cl-black a {
        background-color: #1D1D1D !important;
        color: rgb(255, 255, 255);
        border-radius: 10px;
        text-decoration: none;
        font-size: 0.70vw !important;
        font-weight: 500 !important;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 7vw;
        transition: all 0.5s ease;

        padding-top: 2vh;
        padding-bottom: 2vh;
        padding-right: 2vw;
        padding-left: 2vw;
    }

    .btn-cl-black a img {
        width: 0.5vw;
        margin-left: 3vw;
        transition: 0.8s all ease;
    }

    .btn-cl-black a:hover {
        background-color: #9e9e9e !important;
    }

    .btn-cl-black a:hover img {
        margin-left: 4vw;
    }

    .btn-cl-black a h4 {
        color: rgb(255, 255, 255);

    }


    #top_home_txt {
        margin-left: 8vw;
        margin-top: 8vh;
    }

    #top_home_txt h1 {
        font-size: 6.5vw;
        color: #1F1E24;
        line-height: 105%;
    }

    #top_home_txt h1 span {
        color: #6B8EC1;
    }

    #top_home_txt h4 {
        font-size: 0.9vw;
        margin-top: 2vh;
        max-width: 27vw;
        margin-left: 0.4vw;

        line-height: 150%;

        font-weight: 400;
        color: #6D6D6D;
    }

    #top_home_txt h6 {
        font-size: 1.1vw;
        margin-top: 4vh;
        margin-left: 0.4vw;
        letter-spacing: 0.15vw;

        font-weight: 600;
        color: #CB6217;
    }


    #social_zone {
        display: flex;
        justify-content: space-between;
        width: 12vw;
        align-items: center;
        position: absolute;
        right: 5vw;
        bottom: 5vh;
    }


    #social_zone_vert {
        display: flex;
        min-height: 10vw;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        right: 5vw;
        bottom: 5vh;
    }

    .elem_social {
        background-color: #F6F6F6;
        border-radius: 100%;
        width: 3vw;
        height: 3vw;
        transition: all 0.5s ease;

        position: relative;
    }

    .elem_social_vert {
        background-color: #484848;
        border-radius: 100%;
        width: 3vw;
        height: 3vw;
        transition: all 0.5s ease;

        position: relative;
    }

    .elem_social:hover {
        background-color: #4f91f4;
    }

    .elem_social_vert:hover {
        background-color: #868686;
    }

    .elem_social_vert img {
        position: absolute;
        width: 50%;
        height: 50%;

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

    }

    .elem_social img {
        position: absolute;
        width: 50%;
        height: 50%;

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

    }

    #logo_pj_effect {
        position: relative;
        width: 10vw;
        display: block;
        transition: 2s all ease;
    }

    #logo-pj-back {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10vw;
    }

    #logo-pj-eye {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 2vw;
        transition: 2s all ease;
    }

    #logo-pj-eye img {
        width: 100%;
        animation-duration: 4s;
        animation-name: eyeturn;
        pointer-events: none;
    }



    #logo_pj_effect:hover #logo-pj-eye img {
        /*transform: rotate(180deg);*/

        animation-duration: 4s;
        /*animation-name: eyeturn;*/
    }











    #photos_home {
        margin-top: 15vh;
        overflow-y: hidden;

    }

    #vp_photos {
        text-align: center;
        color: #686868;
        font-size: 1vw;
        letter-spacing: 0.1vw;
    }

    #vp_photos:hover {
        margin: auto;
        text-align: center;
        color: #424242;
    }

    #titre_section {
        display: flex;
        width: 85%;
        margin: auto;
        justify-content: space-between;
        align-items: center;
    }

    #titre_section div h3 {
        font-size: 2vw;
        letter-spacing: 0.12vw;

        font-weight: 500;
    }

    #titre_section div h4 {
        color: #4086F0;
        font-size: 1vw;
        letter-spacing: 0.12vw;

        font-weight: 500;
    }

    #titre_section a {
        display: flex;
        justify-content: center;
        align-items: center;
        /* width: 12vw; */
        color: #4086F0;
    }

    #titre_section a:hover {
        text-decoration: underline;
        cursor: pointer;
    }

    #titre_section a img {
        margin-top: 0.6vh;
        margin-left: 1.5vw;
        width: 0.4vw;
    }

    #flo_photos {
        display: grid;

        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        width: 80%;
        margin: auto;
        margin-top: 10vh;
        column-gap: 2%;
    }

    #flo_photos section {
        width: 100%;
        height: 55vh;
        border-radius: 15px;
        background-color: #000000;

        transition: all 1s ease;

        margin: auto;
        margin-bottom: 4vh;
        object-fit: contain;
        overflow: hidden;
    }

    #flo_photos section div {
        width: 100%;
        height: 100%;

        transition: all 1s ease;

        background-position: center;
        background-size: cover;
        object-fit: contain;
    }

    #flo_photos section div:hover {
        transform: scale(1.3);
        cursor: pointer;
        opacity: 1;
    }

    #grille_presta {
        width: 75%;

        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        margin-top: 10vh;
    }

    .presta_elem {
        background-color: #141414;
        width: 18vw;
        padding-top: 7vh;
        padding-bottom: 4vh;
        padding-left: 2.7vw;
        padding-right: 2.7vw;
        /*height: 53vh !important;*/

        border-radius: 15px;
    }


    #prestation_home {
        background-image: url(../img/background_prestas.png);
        background-size: cover;
        background-position: center;

        padding-top: 10vh;
        padding-bottom: 15vh;
        margin-top: 5vh;
    }

    .presta_elem h2 {
        font-size: 1.9vw;
        font-weight: 700;
        margin-bottom: 4vh;
        color: #EEEEEE;
    }

    .presta_elem h3 {
        font-size: 0.7vw;
        font-weight: 400;
        margin-bottom: 5vh;
        line-height: 1.5;
        color: #FFFFFF !important;
    }

    .presta_elem p {
        font-size: 0.7vw;
        font-weight: 400;
        letter-spacing: 0.12vw;
        color: #E4E4E4 !important;
    }


    .argument_presta_elem {
        display: flex;
        align-items: center;
        justify-content: left;
        margin-top: 2vh;
        margin-bottom: 3vh;
    }

    .argument_presta_elem img {
        margin-right: 1vw;
    }














    #logiciels_materiel {

        padding-top: 5vh;
        padding-bottom: 5vh;
        margin-top: 0vh;
    }


    .logiciels_elem {
        width: 20vw;
        padding-top: 7vh;
        padding-bottom: 4vh;
        padding-left: 2.7vw;
        padding-right: 2.7vw;

        border-radius: 15px;
    }


    .logiciels_elem img {
        width: 100%;
        object-fit: cover;
        height: 18vw;
        border-radius: 15px;
        margin-bottom: 3vh;
    }


    .logiciels_elem h2 {
        font-size: 1.5vw;
        font-weight: 700;
        margin-bottom: 2vh;
        color: black;
    }

    .logiciels_elem h3 {
        font-size: 0.6vw;
        font-weight: 400;
        margin-bottom: 5vh;
        line-height: 1.5;
        color: black !important;
    }








    #materiel_home {
        height: 80vh;
        display: flex;
        padding-top: 5vh;

        background-color: #101010;
        color: #ECECEC;

        overflow: hidden;
    }

    #photos_materiel_home {
        width: 55%;
        position: relative;
    }

    #txt_materiel_home {
        width: 45%;
    }


    #photo_une_materiel_home,
    #photo_deux_materiel_home {
        margin: auto;
        position: absolute;
        border-radius: 15px 15px 0 0;
        bottom: 0;
        left: 7vw;
        object-fit: cover;
    }

    #photo_une_materiel_home {
        height: 90%;

        width: 68%;
    }

    #photo_deux_materiel_home {
        height: auto;
        width: 60%;

        left: 9.5vw;
        bottom: 0vh;
    }

    #txt_materiel_home {
        margin-top: 22vh;
    }

    #txt_materiel_home h3 {
        font-size: 3vw;
        font-weight: 500;
        letter-spacing: 0.15vw;
    }

    #txt_materiel_home p {
        color: #BFBFBF;
        width: 65%;
        margin-top: 4vh;
        line-height: 1.4;

        font-size: 0.8vw;
    }







    #rencontrer_pj {
        width: 100%;
        height: 43vw;
        background-color: #202020;
        display: flex;
    }



    #rencontrer_img {
        width: 42%;
    }

    #rencontrer_img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 0 -5vh;
    }

    #rencontrer_txt {
        width: 55%;
        color: white;

        margin-top: 14vh;
    }


    #rencontrer_txt h3 {
        font-size: 3vw;
        font-weight: 700;
        margin-left: 10vw;
        letter-spacing: 0.15vw;
        margin-top: -2vh;
    }

    #rencontrer_txt h6 {
        font-size: 1vw;
        font-weight: 600;
        margin-left: 14vw;

        letter-spacing: 0.15vw;
        color: #CB6217;
    }

    #rencontrer_txt p {
        width: 62%;
        margin-top: 4vh;
        margin-left: 10vw;
        line-height: 2;
        font-weight: 400;

        font-size: 0.7vw;
    }











    #meJoindre {
        width: 100%;
        margin-top: 12vh;
    }


    #joindre_titre_section {
        width: 34vw;
        margin: auto;
    }

    #joindre_titre_section h3 {
        font-size: 2.3vw;
        font-weight: 600;
        margin-left: 10vw;
        letter-spacing: 0.15vw;
    }

    #joindre_titre_section h6 {
        font-size: 1.1vw;
        font-weight: 600;
        margin-left: 14.5vw;

        margin-top: -0.5vh;

        letter-spacing: 0.2vw;
        color: #4086F0;
    }

    #joindre_block_section {
        display: flex;
        justify-content: space-between;
        width: 70%;
        margin: auto;
    }


    .contact_elem {
        background-color: #D9D9D9;
        border-radius: 15px;
        margin: auto;
        text-align: center;
        width: 28vw;
        padding-top: 5vh;
        padding-bottom: 7vh;

        margin-top: 10vh;
        margin-bottom: 15vh;
    }

    .contact_elem h4 {
        text-align: center;
        font-size: 1.3vw;
        letter-spacing: .1vw;
    }

    .contact_elem img {
        width: 5vh;
        height: 5vh;
        padding: 1.5vh;

        text-align: center;

        margin: auto;
        margin-bottom: 2vh;

        border-radius: 100%;
        background-color: #484848;
    }

    .contact_elem a {
        text-decoration: none;
        color: black;
    }

    .contact_elem a:hover {
        text-decoration: underline;
        color: black;
    }

    .contact_elem p,
    .contact_elem a p {
        text-decoration: none;
        text-align: center;
        color: black;

        font-size: 0.95vw;
        margin-top: 2vh;
        font-weight: 400;
        letter-spacing: .15vw;
    }






















    #decouvrir_pj_home {
        height: 100vh;
        padding-top: 5vh;
        padding-bottom: 5vh;
        display: flex;
    }

    #photos_pj_home {
        width: 53%;
        position: relative;
    }

    #txt_pj_home {
        width: 47%;
    }


    #txt_pj_home {
        margin-top: 32vh;
    }

    #txt_pj_home h3 {
        font-size: 3.5vw;
        font-weight: 700;
        margin-left: 10vw;
        letter-spacing: 0.15vw;
        margin-top: -2vh;
    }

    #txt_pj_home h6 {
        font-size: 1.2vw;
        font-weight: 600;
        margin-left: 14vw;

        letter-spacing: 0.15vw;
        color: #CB6217;
    }

    #txt_pj_home p {
        width: 62%;
        margin-top: 4vh;
        margin-left: 10vw;
        line-height: 1.7;

        font-size: 0.8vw;
    }

    #photos_pj_home {
        position: relative;
    }

    #photos_pj_home img {
        height: 80%;
        width: 70%;
        object-fit: cover;

        border-radius: 15px;

        position: absolute;

        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);
    }



















    #materielA73 {
        height: 75vh;
        padding-top: 10vh;
        padding-bottom: 10vh;
        display: flex;
    }

    #photos_a73 {
        width: 53%;
        position: relative;
    }

    #txt_a73 {
        width: 47%;
        margin-top: 25vh;
    }


    #txt_a73 h3 {
        font-size: 3.5vw;
        font-weight: 700;
        margin-left: 3vw;
        letter-spacing: 0.15vw;
    }

    #txt_a73 h6 {
        font-size: 1.2vw;
        font-weight: 600;
        margin-left: 3vw;

        letter-spacing: 0.15vw;
        color: #CB6217;
    }

    #txt_a73 p {
        width: 62%;
        margin-top: 4vh;
        margin-left: 3vw;
        line-height: 1.7;

        font-size: 0.8vw;
    }

    #photos_a73 {
        position: relative;
    }

    #photos_a73 img {
        height: 90%;
        width: 70%;
        object-fit: cover;

        border-radius: 15px;

        position: absolute;

        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);
    }






    .liste_vidéos {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 85%;
        margin: auto;
        margin-top: 5vh;
    }

    .liste_vidéos_courte {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 50%;
        margin: auto;
        margin-top: 5vh;
    }

    .liste_vidéos video,
    .liste_vidéos_courte video {
        width: 15vw;
        height: 50vh;
        border-radius: 15px;
    }



    .video_video {
        min-height: 75vh;
        padding-top: 5vh;
        padding-bottom: 5vh;
        display: flex;
    }

    #frame_video {
        width: 60%;
        position: relative;
    }

    #txt_video {
        width: 40%;
        margin-top: 15vh;
    }


    #txt_video h3 {
        font-size: 3.5vw;
        font-weight: 700;
        margin-left: 3vw;
        letter-spacing: 0.15vw;
    }

    #txt_video h6 {
        font-size: 1.2vw;
        font-weight: 600;
        margin-left: 3vw;

        letter-spacing: 0.15vw;
        color: #CB6217;
    }

    #txt_video h5 {
        font-size: 0.8vw;
        font-weight: 600;
        margin-left: 3vw;
        margin-top: 3vh;

        letter-spacing: 0.15vw;
    }


    #txt_video p {
        width: 62%;
        margin-top: 2vh;
        margin-left: 3vw;
        line-height: 1.7;

        font-size: 0.8vw;
    }

    #txt_video p i {
        font-weight: 400;
    }

    #frame_video {
        position: relative;
    }

    #frame_video iframe {
        height: 70%;
        width: 80%;
        object-fit: cover;

        border-radius: 15px;

        position: absolute;

        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);
    }





    #materielRonin {
        height: 75vh;
        padding-top: 7vh;
        padding-bottom: 7vh;
        display: flex;
        background-color: #E6E6E6;
    }

    #photos_ronin {
        width: 53%;
        position: relative;
    }

    #txt_ronin {
        width: 47%;
        margin-top: 25vh;
    }


    #txt_ronin h3 {
        font-size: 3.5vw;
        font-weight: 700;
        margin-left: 10vw;
        letter-spacing: 0.15vw;
    }

    #txt_ronin h6 {
        font-size: 1.2vw;
        font-weight: 600;
        margin-left: 10vw;

        letter-spacing: 0.15vw;
        color: #CB6217;
    }

    #txt_ronin p {
        width: 62%;
        margin-top: 4vh;
        margin-left: 10vw;
        line-height: 1.7;

        font-size: 0.8vw;
    }

    #photos_ronin {
        position: relative;
    }

    #photos_ronin img {
        height: 90%;
        width: 70%;
        object-fit: cover;

        border-radius: 15px;

        position: absolute;

        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);
    }











    #contact_global {
        background-color: #DEDEDE;
        padding-top: 15vh;
        padding-bottom: 10vh;
    }

    #contact_global section {
        width: 65%;
        margin: auto;
    }

    #contact_global section h3 {
        font-size: 2vw;
        color: #413E4B;
    }

    #contact_global section h6 {
        margin-top: 3vh;
        margin-bottom: 3vh;
        font-size: 0.9vw;
        font-weight: 500;
        color: #CB6217;
        text-align: right;
    }

    #contact_global section form p {
        margin-top: 4vh;
        color: #7C7C7C;
        max-width: 60%;
        font-size: 0.8vw;
    }

    input,
    textarea {
        width: 96%;
        margin-top: 2vh;

        height: 5vh;
        border: none;
        border-radius: 15px;
        padding: 0.5%;
        padding-left: 2vw;

        font-size: 0.8vw;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

        color: #9E9E9E;
    }

    textarea {
        padding-top: 3vh;
        resize: vertical;
    }


    input[type=submit] {
        background-color: #2c2c2c;
        color: #E3E3E3;
        width: 22vw;
        padding: 0;
        height: 7vh;
        transition: all 0.5s ease;
    }

    input[type=submit]:hover {
        background-color: #565656;
        cursor: pointer;
    }










    footer {
        background-color: #1e1e1e;
        color: white;
        padding-top: 10vh;

    }

    footer section {
        display: flex;
        justify-content: space-between;
        align-items: top;
        width: 70%;
        margin: auto;
    }


    footer section div p {
        color: #7C7C7C;
        margin-top: 3vh;
        font-size: 0.8vw;
    }

    footer section div h3 {
        font-size: 1vw !important;
        color: #B3B3B3 !important;
        margin-bottom: 5vh;
    }

    footer section div a {
        text-decoration: none;
    }

    footer section div a p {
        margin-bottom: 2vh !important;
        font-size: 0.8vw;
    }


    #foot_down {
        display: flex;
        width: 70%;
        justify-content: space-between;
        margin: auto;
        margin-top: 10vh;
        padding-bottom: 8vh;
    }

    .link-hov:hover {
        text-decoration: underline;
        color: #B3B3B3 !important;
    }

    .elem_social:hover {
        background-color: #a0a0a0 !important;
    }

    .mob-deact a {
        text-decoration: none;
    }

    .mob-deact a h3 {
        text-decoration: none;
        font-size: 1vw !important;
        color: #525252 !important;
    }










    .photo_photo {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: 15px 15px;
        width: 75%;
        margin: auto;
        height: 350vh;
        grid-auto-flow: row;
        margin-top: 8vh;
        margin-bottom: 10vh;
        grid-template-areas:
            "photoUne photoUne PhotoDeux"
            "PhotoTrois PhotoQuatre PhotoCinq"
            "PhotoSix PhotoSept PhotoHuit"
            "PhotoNeuf PhotoSept PhotoDix"
            "PhotoOnze PhotoDouze PhotoTreize"
            "PhotoQuatorze PhotoQuinze PhotoQuinze"
            "PhotoQuatorze PhotoSeize PhotoDixSept"
            "PhotoDixHuit PhotoDixHuitBis PhotoDixHuitBis";
    }

    .photoUne {
        grid-area: photoUne;
    }

    .PhotoDeux {
        grid-area: PhotoDeux;
    }

    .PhotoTrois {
        grid-area: PhotoTrois;
    }

    .PhotoQuatre {
        grid-area: PhotoQuatre;
    }

    .PhotoCinq {
        grid-area: PhotoCinq;
    }

    .PhotoSix {
        grid-area: PhotoSix;
    }

    .PhotoHuit {
        grid-area: PhotoHuit;
    }

    .PhotoSept {
        grid-area: PhotoSept;
    }

    .PhotoNeuf {
        grid-area: PhotoNeuf;
    }

    .PhotoDix {
        grid-area: PhotoDix;
    }

    .PhotoOnze {
        grid-area: PhotoOnze;
    }

    .PhotoDouze {
        grid-area: PhotoDouze;
    }

    .PhotoTreize {
        grid-area: PhotoTreize;
    }

    .PhotoQuatorze {
        grid-area: PhotoQuatorze;
    }

    .PhotoQuinze {
        grid-area: PhotoQuinze;
    }

    .PhotoSeize {
        grid-area: PhotoSeize;
    }

    .PhotoDixSept {
        grid-area: PhotoDixSept;
    }

    .PhotoDixHuit {
        grid-area: PhotoDixHuit;
    }

    .PhotoDixHuitBis {
        grid-area: PhotoDixHuitBis;
    }


    .photo_photo div {
        width: 100%;
        height: 100%;
        border-radius: 15px;
        background-color: #000000;

        transition: all 1s ease;

        margin: auto;
        margin-bottom: 4vh;
        object-fit: contain;
        overflow: hidden;
        position: relative;
    }


    .photo_photo div section {
        width: 100%;
        height: 100%;

        transition: all 1s ease;

        background-position: center;
        background-size: cover;
        object-fit: contain;

    }

    .photo_photo div h5 {
        position: absolute;
        color: white;
        letter-spacing: 0.05vw;
        font-size: 0.9vw;
        bottom: 3.5vh;
        left: 2.5vw;
        z-index: 1;
    }

    .photo_photo div section:hover {
        transform: scale(1.3);
        cursor: pointer;
    }


    #plein_ecran_img {
        width: 100vw;
        height: 100vh;
        position: fixed;
        display: none;

        background-color: #000000f3;
        z-index: 10;

        pointer-events: none;

    }


    #plein_ecran_img_elem {
        background: url(../img/pjcroce/home/one.webp);
        background-size: cover !important;
        background-position: center !important;

        height: 90%;

        object-fit: cover;
        border-radius: 1vw;

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

    }

    #logo_pj_img {
        position: absolute;
        top: 6vh;
        left: 3vw;
        z-index: 10;
    }


    #plein_ecran_img_close {
        background-color: #ffffff41;

        border-radius: 100%;

        position: absolute;
        transition: 0.5s all ease;

        width: 2.8vw;
        height: 2.8vw;

        top: 3vh;
        right: 4vw;

    }

    #plein_ecran_img_close:hover {
        background-color: #ffffffab;
        cursor: pointer;
    }

    #plein_ecran_img_close img {
        position: absolute;

        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);

        width: 1.1vw;
        height: 1.1vw;
    }



    #plein_ecran_img_left,
    #plein_ecran_img_right {
        background-color: #ffffff41;

        border-radius: 100%;

        position: absolute;
        transition: 0.5s all ease;

        width: 2.8vw;
        height: 2.8vw;

        top: 50%;

        transform: translate(0, -50%);

    }

    #plein_ecran_img_left {
        left: 4vw;
    }

    #plein_ecran_img_right {
        right: 4vw;
    }

    #plein_ecran_img_left:hover,
    #plein_ecran_img_right:hover {
        background-color: #ffffffab;
        cursor: pointer;
    }

    #plein_ecran_img_left img {
        transform: rotate(180deg) translate(50%, 50%) !important;
    }

    #plein_ecran_img_left img,
    #plein_ecran_img_right img {
        position: absolute;

        pointer-events: none;

        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);

        width: 1vw;
        height: 1vw;

    }

    #top_home_txt_h6:hover {
        color: green !important;
    }


    #fleche_top {
        position: absolute;

        top: 5vh;
        left: 3vw;

    }

    #logo_top {
        position: absolute;

        top: 50%;
        left: 3vw;

        transform: translate(0, -50%);

    }

    #contact_top {
        position: absolute;

        bottom: 0;
        left: 3vw;

    }

    #top_project_video {
        width: 42%;
        height: 45vh;

        position: absolute;

        top: 45%;
        left: 8vw;

        border-radius: 1vw;

        transform: translate(0, -50%);
    }

    #top_project_txt {
        width: 40%;

        position: absolute;

        top: 50%;
        left: 58vw;


        transform: translate(0, -50%);
    }

    #top_project_txt h3 {
        color: #CB6217;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 1.4vw;
        font-style: normal;
        font-weight: 800;
        line-height: 61.875%;
        /* 15.469px */
        letter-spacing: 2.75px;
        text-transform: uppercase;
        margin-left: 20%;
    }

    #top_project_txt h1 {
        color: #494949;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 4.5vw;
        font-style: normal;
        font-weight: 800;
        line-height: 61.875%;
        /* 15.469px */
        letter-spacing: 0.4vw;
        text-transform: uppercase;
        margin-top: 2.5vh;
    }

    #top_project_txt p {
        color: #323232;
        text-align: justify;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 0.85vw;
        font-style: normal;
        font-weight: 400;
        line-height: 161.773%;
        /* 27.501px */
        letter-spacing: 0.34px;
        margin-top: 3.5vh;
        max-width: 75%;
        margin-left: 1.8vw;
    }

    #top_project_txt p i {
        font-size: 0.9vw;
        line-height: 100% !important;
        /* 27.501px */

    }

    #top_project_stat {
        position: absolute;

        bottom: 16vh;
        left: 11vw;

        width: 35vw;

        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    #top_project_stat hr {
        background-color: #f0f0f0;
        height: 10vh;
        width: 0.1vw;

        border: none;
    }

    #top_project_stat div {
        text-align: center;
        color: #e9e9e9;
    }

    #top_project_stat div h3 {
        font-size: 2.8vw;
        letter-spacing: 0.1vw;
    }

    #top_project_stat div h5 {
        font-size: 0.7vw;
        margin-top: 1vh;
    }


    #material_utilises {
        height: 100vh;
        display: flex;
        align-items: center;
        margin: auto;
        width: 80%;
    }

    #material_utilises_img {
        width: 50%;
        height: 70vh;
    }

    #material_utilises_img img {
        width: 100%;
        height: 50%;

        border-radius: 1vw;

        object-fit: cover;
    }

    #material_utilises_img_hor {
        margin-top: 5%;
        height: 50%;
        display: flex;
        justify-content: space-between;
    }

    #material_utilises_img_hor img {
        width: 48%;
        height: 100%;
        border-radius: 1vw;

        object-fit: cover;
    }

    #material_utilises_txt {
        width: 45%;
        margin-left: 10%;
    }

    #material_utilises_txt h5 {
        color: #4086F0;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 1vw;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 5.1px;
    }

    #material_utilises_txt h3 {
        color: #000;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 2vw;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 7.425px;
    }

    #material_utilises_txt p {
        color: #000;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 0.8vw;
        font-style: normal;
        font-weight: 400;
        line-height: 165.008%;
        /* 29.701px */
        letter-spacing: 1.26px;
        margin-top: 4vh;

        text-align: justify;
    }

}




























































/* Affichage pour téléphone */
@media only screen and (max-width: 700px) {

    #top_home {
        background-image: url("../img/background_top_home_mobile.png");
        background-position: center;
        background-size: cover;

        position: relative;

        height: 100vh;
        width: 100vw;
    }


    #top_video {
        background-image: url("../img/background_top_video.webp");
        background-position: center;
        background-size: cover;

        position: relative;

        height: 80vh;
        width: 100vw;
    }

    #top_contact {
        background-color: #f1f1f1;
        position: relative;

        height: 85vh;
        width: 100vw;
    }


    #top_materiel {
        background-image: url("../img/background_top_materiel.jpg");
        background-position: center;
        background-size: cover;

        position: relative;

        height: 100vh;
        width: 100vw;
    }


    #top_photos {
        background-position: center;
        background-size: cover;

        position: relative;

        height: 100vh;
        width: 100vw;
    }



    #nav-color-black {
        background-color: transparent;

        transition: all 0.2s ease;

        z-index: 2;

        top: 0 !important;

    }

    .navigation-container {

        max-width: 95%;
        margin: auto;
        transition: all 0.5s ease;
        margin-top: 5vh;
    }


    .navItem {
        margin-right: 1vw;
    }

    .navItem a {
        color: #595959 !important;
    }

    #white_nav a {
        color: #E3E3E3 !important;
    }

    .navItem a img {
        width: 10vw;
        transition: all 0.5s ease;
    }

    .navItem a:hover {
        color: #000000 !important;
    }

    #white_nav a:hover {
        color: white !important;
    }

    .navItem a h4 {
        font-weight: 400;
        font-size: 0.8vw;
    }

    .actual-nav-white h4 {
        font-weight: 700 !important;
    }

    .actual-nav-black h4 {
        font-weight: 700 !important;
    }


    .btn-cl {
        margin-left: 2vw;
        transition: all 1s ease;
    }

    .btn-cl a {
        background-color: #4F91F4;
        color: white !important;
        border-radius: 10px;
        font-size: 3vw !important;
        font-weight: 500 !important;
        transition: all 0.5s ease;

        padding-top: 2vh;
        padding-bottom: 2vh;
        padding-right: 5vw;
        padding-left: 5vw;
    }

    .btn-cl a:hover {
        background-color: #2e5692;
    }

    .btn-cl a h4 {
        color: white;

    }


    .btn-cl-white {
        margin-top: 4vh;
        margin-left: 0.4vw;

    }

    .btn-cl-white a {
        background-color: #ECECEB !important;
        color: rgb(2, 2, 2);
        border-radius: 10px;
        text-decoration: none;
        font-size: 3vw !important;
        font-weight: 500 !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 30vw;
        transition: all 0.5s ease;

        padding-top: 2vh;
        padding-bottom: 2vh;
        padding-right: 5vw;
        padding-left: 5vw;
    }

    .btn-cl-white a img {
        width: 6vw;
    }

    .btn-cl-white a:hover {
        background-color: #9f9f9f !important;
    }

    .btn-cl-white a h4 {
        color: rgb(2, 2, 2);

    }



    .btn-cl-black a {
        background-color: #1D1D1D !important;
        color: rgb(255, 255, 255);
        border-radius: 10px;
        text-decoration: none;
        font-size: 3vw !important;
        font-weight: 500 !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 35vw;
        transition: all 0.5s ease;

        padding-top: 2.5vh;
        padding-bottom: 2.5vh;
        padding-right: 5vw;
        padding-left: 5vw;
    }

    .btn-cl-black a img {
        width: 2vw;
    }

    .btn-cl-black a:hover {
        background-color: #9e9e9e !important;
    }

    .btn-cl-black a h4 {
        color: rgb(255, 255, 255);

    }


    #top_home_txt {
        margin-left: 8vw;
        margin-top: 8vh;
    }

    #top_home_txt h1 {
        font-size: 14vw;
        color: #1F1E24;
        line-height: 105%;
        max-width: 70%;
    }

    #top_home_txt h1 span {
        color: #6B8EC1;
    }

    #top_home_txt h4 {
        font-size: 4vw;
        margin-top: 2vh;
        max-width: 95% !important;
        margin-left: 0.4vw;

        line-height: 150%;

        font-weight: 400;
        color: #6D6D6D;
    }

    #top_home_txt h6 {
        font-size: 4.5vw;
        margin-top: 4vh;
        margin-left: 0.4vw;
        letter-spacing: 0.15vw;

        font-weight: 600;
        color: #CB6217;
    }


    #social_zone {
        display: flex;
        justify-content: space-between;
        width: 50vw;
        align-items: center;
        position: absolute;
        right: 5vw;
        bottom: 5vh;
    }


    #social_zone_vert {
        display: flex;
        height: 25vh;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        right: 5vw;
        bottom: 5vh;
    }

    .elem_social {
        background-color: #F6F6F6;
        border-radius: 100%;
        width: 14vw;
        height: 14vw;
        transition: all 0.5s ease;

        position: relative;
    }

    .elem_social_vert {
        background-color: #484848;
        border-radius: 100%;
        width: 14vw;
        height: 14vw;
        transition: all 0.5s ease;

        position: relative;
    }

    .elem_social:hover {
        background-color: #4f91f4;
    }

    .elem_social_vert:hover {
        background-color: #868686;
    }

    .elem_social_vert img {
        position: absolute;
        width: 50%;
        height: 50%;

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

    }

    .elem_social img {
        position: absolute;
        width: 50%;
        height: 50%;

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

    }














    #photos_home {
        margin-top: 15vh;
        overflow-y: hidden;

    }

    #vp_photos {
        text-align: center;
        color: #686868;
        font-size: 4vw;
        letter-spacing: 0.1vw;
    }

    #vp_photos:hover {
        margin: auto;
        text-align: center;
        color: #424242;
    }

    #titre_section {
        display: flex;
        width: 85%;
        margin: auto;
        justify-content: space-between;
        align-items: center;
    }

    #titre_section div h3 {
        font-size: 8vw;
        letter-spacing: 0.12vw;

        font-weight: 500;
    }

    #titre_section div h4 {
        color: #4086F0;
        font-size: 5vw;
        letter-spacing: 0.12vw;

        font-weight: 500;
    }

    #titre_section a {
        display: none;
        justify-content: center;
        align-items: center;
        width: 12vw;
        color: #4086F0;
    }

    #titre_section a:hover {
        text-decoration: underline;
        cursor: pointer;
    }

    #titre_section a img {
        margin-top: 0.6vh;
        margin-left: 1.5vw;
        width: 0.4vw;
    }

    #flo_photos {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        width: 90%;
        margin: auto;
        margin-top: 10vh;
        column-gap: 2%;
    }

    #flo_photos section {
        width: 100%;
        height: 55vh;
        border-radius: 15px;
        background-color: #000000;

        transition: all 1s ease;

        margin: auto;
        margin-bottom: 4vh;
        object-fit: contain;
        overflow: hidden;
    }

    #flo_photos section div {
        width: 100%;
        height: 100%;

        transition: all 1s ease;

        background-position: center;
        background-size: cover;
        object-fit: contain;
    }

    #flo_photos section div:hover {
        transform: scale(1.3);
        cursor: pointer;
        opacity: 1;
    }

    #grille_presta {
        width: 75% !important;

        margin: auto;
        margin-top: 10vh;
    }

    .presta_elem {
        background-color: #141414;
        width: 100%;
        padding-top: 7vh;
        padding-bottom: 2vh;
        border-radius: 15px;
        padding-right: 7vw;
        padding-left: 3vw;
        margin-left: -5vw;
        margin-bottom: 5vh;
    }


    #prestation_home {
        background-image: url(../img/background_prestas.png);
        background-size: cover;
        background-position: center;

        padding-top: 10vh;
        padding-bottom: 15vh;
        margin-top: 5vh;
    }

    .presta_elem h2 {
        font-size: 7vw;
        margin-left: 5vw;
        font-weight: 700;
        margin-bottom: 4vh;
        color: #EEEEEE;
    }

    .presta_elem h3 {
        font-size: 3.5vw;
        margin-left: 5vw;
        font-weight: 400;
        margin-bottom: 5vh;
        line-height: 1.5;
        color: #FFFFFF !important;
    }

    .presta_elem p {
        font-size: 3vw;
        margin-left: 5vw;
        font-weight: 400;
        letter-spacing: 0.12vw;
        color: #E4E4E4 !important;
    }


    .argument_presta_elem {
        display: flex;
        align-items: center;
        justify-content: left;
        margin-top: 2vh;
        margin-bottom: 3vh;
        margin-left: 5vw;
    }

    .argument_presta_elem img {
        margin-right: 1vw;
    }














    #logiciels_materiel {

        padding-top: 5vh;
        padding-bottom: 5vh;
        margin-top: 5vh;
    }


    .logiciels_elem {
        width: 100%;
        padding-top: 5vh;

        border-radius: 15px;
    }


    .logiciels_elem img {
        width: 100%;
        object-fit: cover;
        height: 75vw;
        border-radius: 15px;
        margin-bottom: 3vh;
    }


    .logiciels_elem h2 {
        font-size: 7vw;
        font-weight: 700;
        margin-bottom: 2vh;
        color: black;
    }

    .logiciels_elem h3 {
        font-size: 3vw;
        font-weight: 400;
        margin-bottom: 5vh;
        line-height: 1.5;
        color: black !important;
    }








    #materiel_home {
        height: 70vh;
        display: flex;

        background-color: #101010;
        color: #ECECEC;

        overflow: hidden;
    }

    #photos_materiel_home {
        display: none;
    }


    #photo_une_materiel_home,
    #photo_deux_materiel_home {
        margin: auto;
        position: absolute;
        border-radius: 15px 15px 0 0;
        bottom: 0;
        left: 7vw;
        object-fit: cover;
    }

    #photo_une_materiel_home {
        height: 95%;

        width: 68%;
    }

    #photo_deux_materiel_home {
        height: 65%;
        width: 40%;

        left: 9.5vw;
    }

    #txt_materiel_home {
        width: 85%;
        margin: auto;
    }

    #txt_materiel_home h3 {
        font-size: 10vw;
        font-weight: 500;
        letter-spacing: 0.15vw;
    }

    #txt_materiel_home p {
        color: #BFBFBF;
        width: 100%;
        margin-top: 4vh;
        line-height: 200%;

        font-size: 4vw;
        text-align: justify;
    }







    #rencontrer_pj {
        width: 100%;
        background-color: #202020;
        display: flex;
        flex-direction: column-reverse;
    }



    #rencontrer_img {
        width: 100%;
    }

    #rencontrer_img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 0 -5vh;
    }

    #rencontrer_txt {
        width: 85%;
        color: white;
        margin: auto;
        margin-top: 10vh;
        margin-bottom: 10vh;
    }


    #rencontrer_txt h3 {
        font-size: 7vw;
        font-weight: 700;
        margin-left: 10vw;
        letter-spacing: 0.15vw;
    }

    #rencontrer_txt h6 {
        font-size: 5vw;
        font-weight: 600;
        margin-left: 14vw;

        letter-spacing: 0.15vw;
        color: #CB6217;
    }

    #rencontrer_txt p {
        width: 80%;
        margin-top: 4vh;
        margin-left: 10vw;
        line-height: 2;
        font-weight: 400;
        text-align: justify;

        font-size: 3vw;
    }











    #meJoindre {
        width: 100%;
        margin-top: 7vh;
        padding-bottom: 5vh;
    }


    #joindre_titre_section {
        width: 60vw;
        margin: auto;
    }

    #joindre_titre_section h3 {
        font-size: 7vw;
        font-weight: 600;
        /* margin-left: 10vw; */
        text-align: center;
        letter-spacing: 0.15vw;
    }

    #joindre_titre_section h6 {
        font-size: 5vw;
        font-weight: 600;
        margin-left: 14.5vw;
        margin-top: -0.5vh;
        letter-spacing: 0.2vw;
        color: #4086F0;
        text-align: center;
    }

    #joindre_block_section {
        /* display: flex; */
        justify-content: space-between;
        width: 90%;
        margin: auto;
        margin-top: 5vh;
    }


    .contact_elem {
        background-color: #D9D9D9;
        border-radius: 15px;
        margin: auto;
        text-align: center;
        width: 100%;
        padding-top: 5vh;
        padding-bottom: 7vh;
        margin-top: 2vh;
        margin-bottom: 2vh;
    }

    .contact_elem h4 {
        text-align: center;
        font-size: 5vw;
        letter-spacing: .1vw;
    }

    .contact_elem img {
        width: 8vh;
        height: 8vh;
        padding: 1.5vh;
        text-align: center;
        margin: auto;
        margin-bottom: 2vh;
        border-radius: 100%;
        background-color: #484848;
    }

    .contact_elem a {
        text-decoration: none;
        color: black;
    }

    .contact_elem a:hover {
        text-decoration: underline;
        color: black;
    }

    .contact_elem p,
    .contact_elem a p {
        text-decoration: none;
        text-align: center;
        color: black;
        font-size: 3vw;
        margin-top: 2vh;
        font-weight: 400;
        letter-spacing: .15vw;
    }






















    #decouvrir_pj_home {
        height: 100vh;
        padding-top: 5vh;
        padding-bottom: 15vh;
        display: flex;
        flex-direction: column-reverse;
    }

    #photos_pj_home {
        width: 100%;
        position: relative;
    }

    #txt_pj_home {
        width: 100%;
    }

    #txt_pj_home h3 {
        font-size: 8vw;
        font-weight: 700;
        margin-left: 10vw;
        letter-spacing: 0.15vw;
    }

    #txt_pj_home h6 {
        font-size: 5vw;
        font-weight: 600;
        margin-left: 14vw;

        letter-spacing: 0.15vw;
        color: #CB6217;
    }

    #txt_pj_home p {
        width: 80%;
        margin-top: 4vh;
        margin-left: 10vw;
        line-height: 1.7;

        font-size: 3vw;
    }

    #photos_pj_home {
        position: relative;
        height: 100%;
    }

    #photos_pj_home img {
        height: 80%;
        width: 80%;
        object-fit: cover;

        border-radius: 15px;

        position: absolute;

        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);
    }



















    #materielA73 {
        height: 80vh;
        padding-top: 10vh;
        padding-bottom: 10vh;
        /* display: flex; */
    }

    #photos_a73 {
        width: 85%;
        margin: auto;
        position: relative;
    }

    #txt_a73 {
        width: 85%;
        margin: auto;
        margin-top: 5vh;
    }


    #txt_a73 h3 {
        font-size: 8vw;
        font-weight: 700;
        margin-left: 3vw;
        letter-spacing: 0.15vw;
    }

    #txt_a73 h6 {
        font-size: 5vw;
        font-weight: 600;
        margin-left: 3vw;

        letter-spacing: 0.15vw;
        color: #CB6217;
    }

    #txt_a73 p {
        width: 90%;
        margin-top: 4vh;
        margin-left: 3vw;
        line-height: 1.7;
        text-align: justify;
        font-size: 4vw;
    }

    #photos_a73 {
        position: relative;
    }

    #photos_a73 img {
        height: 35vh;
        width: 100%;
        object-fit: cover;
        border-radius: 15px;
    }




    .liste_vidéos {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 95%;
        margin: auto;
    }

    .liste_vidéos_courte {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-between;
        width: 95%;
        margin: auto;
    }

    .liste_vidéos video,
    .liste_vidéos_courte video {
        width: 100%;
        height: 60vh;
        border-radius: 15px;
        margin-top: 2vh;
    }


    .video_video {
        height: 100vh;
        padding-top: 5vh;
        padding-bottom: 5vh;
        display: flex;
        width: 100%;
        flex-direction: column;
    }

    #frame_video {
        width: 95%;
        margin: auto;
    }

    #txt_video {
        width: 90%;
        margin: auto;
        margin-top: 0vh;
    }


    #txt_video h3 {
        font-size: 10vw;
        font-weight: 700;
        margin-left: 3vw !important;
        letter-spacing: 0.15vw;
    }

    #txt_video h6 {
        font-size: 5vw;
        font-weight: 600;
        margin-left: 5vw !important;

        letter-spacing: 0.15vw;
        color: #CB6217;
    }

    #txt_video h5 {
        font-size: 5vw;
        font-weight: 600;
        margin-left: 2vw !important;
        margin-top: 3vh;
        letter-spacing: 0.15vw;
    }

    #video_invert_pipi {
        flex-direction: column-reverse !important;
    }


    #txt_video p {
        width: 95%;
        margin-top: 2vh;
        margin-left: 2vw !important;
        line-height: 1.7;
        text-align: justify;
        font-size: 4vw;
    }

    #txt_video p i {
        font-weight: 400;
    }

    #frame_video {
        position: relative;
    }

    #frame_video iframe {
        height: 30vh;
        width: 100%;
        object-fit: cover;
        border-radius: 15px;
        /* position: absolute; */
        /* top: 50%; */
        /* left: 50%; */
        /* transform: translate(-50%, -50%); */

    }





    #materielRonin {
        height: 75vh;
        padding-top: 10vh;
        padding-bottom: 7vh;
        display: flex;
        flex-direction: column-reverse;
        background-color: #E6E6E6;
    }

    #photos_ronin {
        width: 85%;
        margin: auto;
        position: relative;
    }

    #txt_ronin {
        width: 85%;
        margin: auto;
        margin-top: 5vh;
    }


    #txt_ronin h3 {
        font-size: 8vw;
        font-weight: 700;
        letter-spacing: 0.15vw;
    }

    #txt_ronin h6 {
        font-size: 5vw;
        font-weight: 600;

        letter-spacing: 0.15vw;
        color: #CB6217;
    }

    #txt_ronin p {
        width: 90%;
        margin-top: 4vh;
        line-height: 1.7;

        font-size: 4vw;
    }

    #photos_ronin {
        position: relative;
    }

    #photos_ronin img {
        height: 35vh;
        width: 100%;
        object-fit: cover;

        border-radius: 15px;

    }











    #contact_global {
        background-color: #DEDEDE;
        padding-top: 8vh;
        padding-bottom: 8vh;
    }

    #contact_global section {
        width: 85%;
        margin: auto;
    }

    #contact_global div {
        flex-direction: column;
        width: 100%;
    }

    #contact_global div input {
        width: 96% !important;
    }

    #contact_global section h3 {
        font-size: 8vw;
        color: #413E4B;
    }

    #contact_global section h6 {
        margin-top: 3vh;
        margin-bottom: 3vh;
        font-size: 3vw;
        font-weight: 500;
        color: #CB6217;
        text-align: left;
    }

    #contact_global section form p {
        margin-top: 1vh;
        color: #7C7C7C;
        max-width: 100%;
        font-size: 3vw;
    }

    input,
    textarea {
        width: 96%;
        margin-top: 2vh;

        height: 5vh;
        border: none;
        border-radius: 15px;
        padding: 0.5%;
        padding-left: 2vw;

        font-size: 3.5vw;
        letter-spacing: 0.15vw;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

        color: #9E9E9E;
    }

    input::placeholder,
    textarea::placeholder {
        padding-left: 3vw;
    }

    textarea {
        padding-top: 3vh;
        resize: vertical;
    }


    input[type=submit] {
        background-color: #2c2c2c;
        color: #E3E3E3;
        width: 22vw;
        padding: 0;
        height: 7vh;
        transition: all 0.5s ease;
    }

    input[type=submit]:hover {
        background-color: #565656;
        cursor: pointer;
    }










    footer {
        background-color: #1e1e1e;
        color: white;
        padding-top: 10vh;

    }

    footer section {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: top;
        width: 85%;
        margin: auto;
        padding-bottom: 5vh;
    }

    footer section div {
        flex-direction: column;
        max-width: 100% !important;
        width: 85% !important;
        margin: auto;
    }


    footer section div p {
        color: #7C7C7C;
        margin-top: 3vh;
        font-size: 3.5vw;
    }

    footer section div h3 {
        font-size: 5vw !important;
        color: #B3B3B3 !important;
        margin-bottom: 5vh;
        margin-top: 5vh;
        width: 100% !important;
    }

    footer section div img {
        width: 35vw !important;
    }

    footer section div a {
        text-decoration: none;
    }

    footer section div a p {
        margin-bottom: 2vh !important;
        font-size: 4vw;
    }


    #foot_down {
        display: none;
    }

    .link-hov:hover {
        text-decoration: underline;
        color: #B3B3B3 !important;
    }

    .elem_social:hover {
        background-color: #a0a0a0 !important;
    }

    .mob-deact a {
        text-decoration: none;
    }

    .mob-deact a h3 {
        text-decoration: none;
        font-size: 5vw !important;
        color: #525252 !important;
    }










    .photo_photo {
        display: block;
        gap: 15px 15px;
        width: 85%;
        margin: auto;
        height: 930vh;
        grid-auto-flow: row;
        margin-top: 8vh;
        margin-bottom: 10vh;
    }

    .photoUne {
        grid-area: photoUne;
    }

    .PhotoDeux {
        grid-area: PhotoDeux;
    }

    .PhotoTrois {
        grid-area: PhotoTrois;
    }

    .PhotoQuatre {
        grid-area: PhotoQuatre;
    }

    .PhotoCinq {
        grid-area: PhotoCinq;
    }

    .PhotoSix {
        grid-area: PhotoSix;
    }

    .PhotoHuit {
        grid-area: PhotoHuit;
    }

    .PhotoSept {
        grid-area: PhotoSept;
    }

    .PhotoNeuf {
        grid-area: PhotoNeuf;
    }

    .PhotoDix {
        grid-area: PhotoDix;
    }

    .PhotoOnze {
        grid-area: PhotoOnze;
    }

    .PhotoDouze {
        grid-area: PhotoDouze;
    }

    .PhotoTreize {
        grid-area: PhotoTreize;
    }

    .PhotoQuatorze {
        grid-area: PhotoQuatorze;
    }

    .PhotoQuinze {
        grid-area: PhotoQuinze;
    }

    .PhotoSeize {
        grid-area: PhotoSeize;
    }

    .PhotoDixSept {
        grid-area: PhotoDixSept;
    }

    .PhotoDixHuit {
        grid-area: PhotoDixHuit;
    }

    .PhotoDixHuitBis {
        grid-area: PhotoDixHuitBis;
    }


    .photo_photo div {
        width: 100%;
        height: 45vh;
        border-radius: 15px;
        background-color: #000000;

        transition: all 1s ease;

        margin: auto;
        margin-bottom: 4vh;
        object-fit: contain;
        overflow: hidden;
        position: relative;
    }


    .photo_photo div section {
        width: 100%;
        height: 100%;
        transition: all 1s ease;
        background-position: center;
        background-size: cover;
        object-fit: contain;

    }

    .photo_photo div h5 {
        position: absolute;
        color: white;
        letter-spacing: 0.05vw;
        font-size: 3vw;
        bottom: 3.5vh;
        left: 5vw;
        z-index: 1;
        display: none;
    }

    .photo_photo div section:hover {
        transform: scale(1.3);
        cursor: pointer;
    }


    #menu_tendances {
        height: 0vh;
        pointer-events: none;
        width: 100vw;
        background-color: #202020;
        position: fixed;
        top: 0;
        left: 0;

        transition: 0.5s all ease;

        z-index: 5;
    }

    #menu_tendances_liste {
        display: flex;
        flex-direction: column;
        opacity: 0;
        justify-content: center;
        align-items: center;
        height: 75vh;
        width: 100vw;
        position: absolute;
        bottom: 0;
    }

    #menu_tendances_titres {
        display: flex;

        justify-content: space-between;
        opacity: 0;
        width: 80%;
        margin: auto;
        padding-top: 5vh;
    }

    #menu_tendances_titres h2 {
        color: #F1F1F1;
        max-width: 40%;

    }

    #menu_tendances_liste_une {
        height: 100%;
        width: 100%;
        background: url('../img/pjcroce/photos/une.webp');
        background-position: center;
        background-size: cover;
        position: relative;
        transition: 0.8s all ease;

        text-decoration: none;
    }

    #menu_tendances_liste_deux {
        height: 100%;
        width: 100%;
        background: url('../img/pjcroce/projets/deux.png');
        background-position: center;
        background-size: cover;
        position: relative;
        transition: 0.8s all ease;

        text-decoration: none;
    }

    #menu_tendances_liste_trois {
        height: 100%;
        width: 100%;
        background: url('../img/pjcroce/projets/trois.png');
        background-position: center;
        background-size: cover;
        position: relative;
        transition: 0.8s all ease;
    }

    #menu_tendances_liste_quatre {
        height: 100%;
        width: 25%;
        background: url('../img/pjcroce/photos/dixsept.webp');
        background-position: center;
        background-size: cover;
        position: relative;
        transition: 0.8s all ease;
    }

    #menu_tendances_liste_une_base h2,
    #menu_tendances_liste_une_base h2 {
        font-size: 8vw;
        color: #C5C5C5;

        position: absolute;

        top: 50%;

        transform: translate(0, -50%);

        width: 100%;
        text-align: center;

    }

    .tendances_base {
        background-color: #0000009d;
        width: 100%;
        height: 100%;

        position: relative;
    }

    .tendances_hover {
        display: none;
    }

    #plein_ecran_img {
        display: none;
        height: 0;
        opacity: 0;

        z-index: -4000;
    }


    #logo_pj_effect {
        position: relative;
        width: 10vw;
        display: block;
        transition: 2s all ease;
    }

    #logo-pj-back {
        position: absolute;
        top: 50%;
        left: 100%;
        transform: translate(-50%, -50%);
        width: 30vw;
    }

    #logo-pj-eye {
        position: absolute;
        top: 50%;
        left: 100%;
        transform: translate(-50%, -50%);
        width: 6vw;
        transition: 2s all ease;
    }

    #logo-pj-eye img {
        width: 100%;
        animation-duration: 4s;
        animation-name: eyeturn;
        pointer-events: none;
    }



    #logo_pj_effect:hover #logo-pj-eye img {
        /*transform: rotate(180deg);*/

        animation-duration: 4s;
        /*animation-name: eyeturn;*/
    }

    #links {
        display: none;
        position: absolute;
        height: 45vh;
        /* margin-top: 5vh; */
        background-color: #cfcfcf;
        width: 105%;
        top: 0vh;
        padding-top: 12vh;
        left: -1vh;
        border-bottom: 2px solid grey;
        transition: 1s all ease;
        z-index: 1;
    }

    #prout {
        z-index: 2;
    }

    .navItem a h4 {
        font-size: 5vw;
        background-color: #dbdbdb;
        padding: 5vw;
        border-radius: 3vw;
        text-align: center;
    }

    #logo_caca img {
        width: 30vw !important;
        margin-left: 0 !important;
    }

    #btn_mobile {
        text-align: center;
        margin-left: 0 !important;
    }

    #btn_mobile a {
        font-size: 5vw !important;
        background-color: #dbdbdb !important;
        padding: 5vw;
        border-radius: 3vw;
        text-align: center;
        color: #595959 !important;
        font-weight: 400 !important;
        width: 83%;
    }

    .links_black {
        background-color: #1e1e1e !important;
    }

    #white_nav h4 {
        background-color: #232323 !important;
    }

    #fleche_top {
        position: absolute;
        top: 5vh;
        left: 12vw;
        transform: rotate(-90deg);

    }

    #logo_top {
        position: absolute;
        top: 20vw;
        right: 20vw;
        transform: translate(0, -50%) rotate(90deg);

    }

    #contact_top {
        display: none;

    }

    #top_project_video {
        width: 95vw;
        height: 25vh;
        /* position: absolute; */
        top: 50%;
        margin: auto;
        margin-top: 20vh;
        left: 18vw;
        text-align: center;
        border-radius: 3vw;
        margin-left: 2.5vw;
        /* transform: translate(0, -50%); */
    }

    #top_project_txt {
        width: 85%;
        /* position: absolute; */
        margin: auto;
        top: 50%;
        left: 58vw;
        /* transform: translate(0, -50%); */
    }

    #top_project_txt h3 {
        color: #CB6217;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 5vw;
        font-style: normal;
        font-weight: 800;
        letter-spacing: 2.75px;
        text-transform: uppercase;
        /* margin-left: 20%; */
        margin-top: 5vh;
    }

    #top_project_txt h1 {
        color: #ffffff;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 7vw;
        font-style: normal;
        font-weight: 800;
        line-height: 61.875%;
        letter-spacing: 0.4vw;
        text-transform: uppercase;
        margin-top: 2.5vh;
    }

    #top_project_txt p {
        color: #e5e5e5;
        text-align: justify;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 4vw;
        font-style: normal;
        font-weight: 400;
        line-height: 161.773%;
        letter-spacing: 0.34px;
        margin-top: 3.5vh;
        max-width: 95%;
    }

    #top_project_txt p i {
        font-size: 3vw;
        line-height: 100% !important;

    }

    #top_project_stat {
        display: none;
    }


    #material_utilises {
        height: 160vh;
        display: flex;
        align-items: center;
        margin: auto;
        width: 80%;
        flex-direction: column-reverse;
    }

    #material_utilises_img {
        height: 70vh;
        width: 100%;
    }

    #material_utilises_img img {
        width: 100%;
        height: 50%;

        border-radius: 1vw;

        object-fit: cover;
    }

    #material_utilises_img_hor {
        margin-top: 5%;
        height: 30%;
        display: flex;
        justify-content: space-between;
    }

    #material_utilises_img_hor img {
        width: 48%;
        height: 100%;
        border-radius: 1vw;

        object-fit: cover;
    }

    #material_utilises_txt {
        width: 85%;
        margin: auto;
        /* margin-left: 10%; */
        margin-bottom: 10vh;
    }

    #material_utilises_txt h5 {
        color: #4086F0;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 5vw;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 5.1px;
    }

    #material_utilises_txt h3 {
        color: #000;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 7vw;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 7.425px;
    }

    #material_utilises_txt p {
        color: #000;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 3vw;
        font-style: normal;
        font-weight: 400;
        line-height: 165.008%;
        letter-spacing: 1.26px;
        margin-top: 4vh;
        text-align: justify;
    }

    #top_project {
        background-color: #353535;
        position: relative;
        height: 115vh;
        width: 100vw;
    }
}