:root{

    --Blanc:#ffffff;

    --VertC:#0B8900; /* vert claire */

    --VertF:#006900; /* vert foncé */

    --CouleurSup:#009978;

}



body{

    /* background-color: #eafffc; */

    margin: 0px;

    font-family: "Kumbh Sans",'Arial Narrow', Arial, sans-serif;

    font-optical-sizing: auto;

    font-weight: 700; /* regular = 400 & Bold = 700 */

    font-style: normal;

    font-variation-settings: "YOPQ" 300;

    min-height: 100dvh;

    display: flex;

    flex-direction: column;

}



.erreur{

    background-color: #ff4415;

    margin: 50px 80px;

    padding: 10px 15px;

    border-radius: 22px;

    border: solid 4px #ffafaf;

}



.couleur{

    color: #000000;

}





header{

    display: flex;

    margin: 22px 80px;

    gap: 16px;

    align-items:flex-start;

}



.menu1{

    background-color: var(--VertC);

    display: flex;

    width: 100%;

    border-radius: 22px;

    color: var(--Blanc);

    align-items:center;

    padding: 13px 18px;

}



.menu1>div{

    font-family: "Kumbh Sans",'Arial Narrow', Arial,  sans-serif;

    font-optical-sizing: auto;

    font-weight: 700; /* regular = 400 & Bold = 700 */

    font-style: normal;

    font-variation-settings: "YOPQ" 300;

    font-size: 20px;

}



nav{

    margin: auto 0px auto auto;

}



nav>ul{

    display: flex;

}



.deroulant{

    display: flex;

    flex-direction: column;

    position: absolute;

    background-color:  var(--VertC);

    padding:15px 17px !important;

    border-radius: 0 0 20px 20px;

    gap: 0px;

    margin-left: -17px;

    padding-top: 35px;

    clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 0%);

    transform: scaleY(0.6) translateY(-20%);

    transition: 0.3s;

    z-index: 3;

}



.deroulant a{

    display: grid;

    grid-template-columns: 26px auto;

    gap: 15px;



    height: 48px;

    min-width: 48px;

    width: fit-content;

    align-items: center;

}



.deroulant div{

    align-self: center;

    font-weight: 500; /* regular = 400 & medium 500 & Bold = 700 */

    font-style: normal;

    font-variation-settings: "YOPQ" 300;

    font-size: 14px;

    width: fit-content;

    white-space: nowrap;

}



a{

    text-decoration: none; /* Supprimer le soulignement par défaut */

    color: inherit;

}



nav a{

    font-size: 16px;

}



ul, ol {

    list-style: none; /* Supprimer les puces ou les numéros de liste */

    padding: 0; /* Supprimer le remplissage par défaut */

    margin: 0; /* Supprimer les marges par défaut */

}



nav>ul{

    gap: 40px;

}



nav>ul>li{

    margin: auto;

    position: relative;

}



.souligne{

    height: 4px;

    width: 100%;

    background-color: var(--Blanc);

    border-radius: 4px;

    position:absolute;

    margin-top: 4px;

    transform: scaleX(0);

    z-index: 4;

    transition: 0.2s;

}



li:hover .souligne{

    transform: scaleX(1);

}



li:hover .deroulant{

    transform: scaleY(1);

    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

}



.tel img{

    transition: 0.2s;

}



.tel:hover img{

    transform: scale(1.2) rotate(7deg);

}



.tel>.deroulant{

    white-space: nowrap;

    right: -10px;

}



.tel a{

    display: flex;

}



.deroulant>a:hover{

    color: rgb(212, 212, 212);

}



.deroulant>li img, .deroulant>li div{

    transition: 0.2s;

}



.deroulant>li:hover img{

    transform: scale(1.2);

}



.deroulant>li:hover div{

    color: rgb(212, 212, 212);

}



.menu-burger{

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin: 0px 0px 0px auto;

    display: none;

}



.menu-burger div{

    background-color: var(--Blanc);

    height: 5px;

    width: 40px;

    border-radius: 3px;

}



.menu-mobile{

    position: absolute;

    background-color: var(--VertC);

    border-radius: 22px;

    color: var(--Blanc);

    padding: 30px 30px 50px;

    margin-left: 30px;

    right: 30px;

    box-shadow: -5px 5px 10px #00000025;

    z-index: 9;

    margin-top: 90px;

    min-width: 340px;

    display: none;

}









.deroule{

    display: flex !important;

}





/*****************textes****************/



h1{

    font-weight: 700; /* regular = 400 & medium 500 & Bold = 700 */

    font-style: normal;

    font-variation-settings: "YOPQ" 300;

    font-size: 40px;

}



h2{

    font-weight: 700; /* regular = 400 & medium 500 & Bold = 700 */

    font-style: normal;

    font-variation-settings: "YOPQ" 300;

    font-size: 40px;

}



h3{

    font-weight: 400; /* regular = 400 & medium 500 & Bold = 700 */

    font-style: normal;

    font-variation-settings: "YOPQ" 300;

    font-size: 24px;

}



h4, .pseudo{

    font-weight: 700; /* regular = 400 & medium 500 & Bold = 700 */

    font-style: normal;

    font-variation-settings: "YOPQ" 300;

    font-size: 20px;

    margin: 0px;

}







.paragraphe, p{

    /* 16px & regular */

    font-weight: 400; /* regular = 400 & medium 500 & Bold = 700 */

    font-style: normal;

    font-variation-settings: "YOPQ" 300;

    font-size: 16px;

}







/**********customisation de la barre de scroll*************/



.carousel-vertical::-webkit-scrollbar,.caroussel-horizontal::-webkit-scrollbar, body::-webkit-scrollbar, .realisations>div::-webkit-scrollbar,  .avis>div::-webkit-scrollbar, .zone::-webkit-scrollbar {

    width: 12px; /* width of the entire scrollbar */

}

  

.carousel-vertical::-webkit-scrollbar-track, body::-webkit-scrollbar-track, .realisations>div::-webkit-scrollbar-track,  .avis>div::-webkit-scrollbar-track, .zone::-webkit-scrollbar-track {

    width:4px;

    background-color: #aedba8; /* color of the scroll thumb */

    border-radius: 20px; /* roundness of the scroll thumb */

    border: 3.5px solid rgb(255, 255, 255); /* creates padding around scroll thumb */

}

  

.carousel-vertical::-webkit-scrollbar-thumb , body::-webkit-scrollbar-thumb, .realisations>div::-webkit-scrollbar-thumb,  .avis>div::-webkit-scrollbar-thumb, .zone::-webkit-scrollbar-thumb {

    width: 22px;

    background-color: var(--VertC); /* color of the scroll thumb */

    border-radius: 20px; /* roundness of the scroll thumb */

    margin: 1px;

}



.realisations>div::-webkit-scrollbar-track, .caroussel-horizontal::-webkit-scrollbar-track{

    width:4px;

    background-color: #aedba8; /* color of the scroll thumb */

    border-radius: 20px; /* roundness of the scroll thumb */

    border: 5px solid var(--VertC); /* creates padding around scroll thumb */

}



.realisations-Fond-Blanc>div::-webkit-scrollbar-track, .zone::-webkit-scrollbar-track{

    border: 3.5px solid rgb(255, 255, 255); /* creates padding around scroll thumb */

}

  

.realisations>div::-webkit-scrollbar-thumb, .caroussel-horizontal::-webkit-scrollbar-thumb{

    width: 22px;

    background-color: var(--VertF); /* color of the scroll thumb */

    border-radius: 20px; /* roundness of the scroll thumb */

    margin: 1px;

}

  

  /* Pour Chrome, flèche de défilement vers le haut */

.carousel-vertical::-webkit-scrollbar-button:vertical:end:increment , body::-webkit-scrollbar-button:vertical:end:increment{

    background-color: transparent;

    background-image: url('../img/icone/scrollBas.svg');

    background-size: contain;

    background-repeat: no-repeat;

}

  

  /* Pour Chrome, flèche de défilement vers le bas */

.carousel-vertical::-webkit-scrollbar-button:vertical:start:decrement , body::-webkit-scrollbar-button:vertical:start:decrement{

    background-color: transparent;

    background-image: url('../img/icone/scrollHaut.svg');

    background-size: contain;

    background-repeat: no-repeat;

}



.realisations>div::-webkit-scrollbar-button:horizontal:end:increment, .caroussel-horizontal::-webkit-scrollbar-button:horizontal:end:increment,  .avis>div::-webkit-scrollbar-button:horizontal:end:increment , .zone::-webkit-scrollbar-button:horizontal:end:increment{

    background-color: transparent;

    background-image: url('../img/icone/scrollDroit.svg');

    background-size: contain;

    background-repeat: no-repeat;

}

  

  /* Pour Chrome, flèche de défilement vers le bas */

.realisations>div::-webkit-scrollbar-button:horizontal:start:decrement, .caroussel-horizontal::-webkit-scrollbar-button:horizontal:start:decrement, .avis>div::-webkit-scrollbar-button:horizontal:start:decrement, .zone::-webkit-scrollbar-button:horizontal:start:decrement {

    background-color: transparent;

    background-image: url('../img/icone/scrollGauche.svg');

    background-size: contain;

    background-repeat: no-repeat;

}





/*****************main****************/





main{

    font-family: "Kumbh Sans", 'Arial Narrow', Arial,  sans-serif;

    font-optical-sizing: auto;

    font-weight: 700; /* regular = 400 & Bold = 700 */

    font-style: normal;

    font-variation-settings: "YOPQ" 300;

    color: var(--Blanc);

}



/*               accueil             */



.accueil{

    display: grid;

    grid-template-columns: 1fr 1fr;

    margin: 30px 80px 8dvw;

    gap: 20px;

}



.accueil>div:first-child{

    background-color: var(--VertC);

    border-radius: 22px;

    padding: 45px;

    min-height: 30dvw;

    background: linear-gradient(135deg, #0B8900, #006b42);

/*     background: linear-gradient(135deg, #0B8900, #008854);

    background: linear-gradient(135deg, #0B8900, #008829);

    background: radial-gradient(circle, #0B8900 20%, #00be56);

    background: radial-gradient(circle, #0B8900 20%, #019c47); */

    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

}







.accueil>img{

    border-radius: 22px;

    object-position: center;

    object-fit: cover;

    width: 100%;

    height: 100%;



}



.imaginaire{

    font-size: 0px;

    height: 0px;

}





/*               points forts             */



.point-fort{

    background-color: var(--VertC);

    display: flex;

    justify-content: space-evenly;

    padding: 100px 80px;

    gap:10%;

}



.point-fort div{

    display: flex;

    flex-direction: column;

    align-items: center;

    gap:22px;

    max-width: 230px;

}



.point-fort h4, .point-fort p{

    text-align: center;

}



.point-fort p{

    margin: 0px;

}



.point-fort div>div{

    height: 102px;

}



.img-mesure, .img-artisan, .img-devis{

    width: 80px;

    margin: auto;

}



/*               prestation             */



.prestations-bento{

    margin: 80px 80px 150px;

}



.prestations-bento>div{

    display:flex; 

    flex-direction: column;

    gap: 20px;

}







.prestations-bento>h2{

    color: var(--VertF);

}



.ligneG{

    display: grid;

    grid-template-columns: 40% 1fr;

    gap: 20px;

}



.ligneD{

    display: grid;

    grid-template-columns: 1fr 40%;

    gap: 20px;

}



.ligneG>.contenu{

    background: linear-gradient(135deg, #0B8900, #006b42);

    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

}



.ligneD>.contenu{

    background: linear-gradient(-135deg, #0B8900, #006b42);

    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

}



.img1, .img2, .img3, .img4{

    border-radius: 22px;

    object-fit: cover;

    object-position: center;

    background-color: #575757;

    width: 100%;

    height: 100%;

}



.prestations-bento .contenu{

    background-color: var(--VertC);

    padding: 10px 45px 45px 45px;

    border-radius: 22px;

}



.contenu a{

    border: solid 3px var(--Blanc);

    border-radius: 22px;

    background-color: #ffffff00;

    padding: 20px 26px;

    display: block;

    width: fit-content;

    white-space: nowrap;

    margin-top: 50px;

    box-shadow: inset 0px 60px 0px 0px #ffffff00;

    transition: 0.2s;

}



.contenu a:hover{

    box-shadow: inset 0px 0px 0px 0px var(--VertC);

    background-color: var(--Blanc);

    color: var(--VertF);

}



/*               réalisations             */



.realisations{

    background-color: var(--VertC);

    padding: 100px 0px;

    gap:10%;

}


.realisations>h2{

    color: var(--Blanc);

    margin-left: 80px;

text-align: center;

}



.realisations>div{

    display: flex;

    gap: 15px;

    padding: 30px 0px;

    overflow-x: scroll;

    gap:70px;

}



.realisation{

    display: flex;

    flex-direction: column;

    width: 360px;

    gap: 15px;

}



.realisation:first-child{

    margin-left: 120px;

}



.realisation:last-child{

    margin-right: 50px;

}



.realisation>div{

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-bottom: 10px;

}



.realisation img{

    height: 210px;

    width: 360px;

    border-radius: 22px;

    object-fit: cover;

    box-shadow: 0px 0px 25px 0px #00000042;

    transition: 0.2s;

    background-color: #575757;

}



.realisation>div>div{

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-weight: 400; /* regular = 400 & medium 500 & Bold = 700 */

    font-size: 16px;

}



.realisation h4{

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    text-shadow: 0px 0px 5px #0000002c;

    transition: 0.2s;

}



.badge{

    background-color: var(--VertF);

    padding: 3px 8px 6px;

    border-radius: 60px;

    width: fit-content;

    box-shadow: 0px 0px 5px 0px #00000042;

    white-space: nowrap;

    transition: 0.2s;

}



.date{

    margin-right: 10px;

    text-shadow: 0px 0px 25px #000000ab;

    transition: 0.2s;

}



.realisation:hover img{

   box-shadow: 0px 0px 35px -10px #000000cb;

}



.realisation:hover .badge{

    box-shadow: 0px 0px 20px -8px #000000cb;

}



.realisation:hover h4{

    text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.603);

}



.realisation:hover .date{

    text-shadow: 0px 0px 15px #000000;

}



/*               page réalisations             */



.page-realisations{

    border-radius: 22px;

    margin: 20px 80px;

    padding: 80px 45px 100px;

}



.page-realisations>h2{

    width: fit-content;

    gap: 17px;

    margin: auto;

}



.page-realisations>div:nth-child(3){

    overflow-x: hidden;

    width: fit-content;

    gap: 17px;

    margin: auto;

    flex-wrap: wrap;

    justify-content: center;

}



.page-realisations>div:nth-child(4){

    overflow-x: visible;

    flex-wrap: wrap;

    justify-content: center;

}



.page-realisations .realisation{

    margin: 0px;

}



/*               blog             */



.blog{

    margin: 80px;

}



.blog>h2{

    color: var(--VertF);

}



.blog>div{

    display: grid;

    grid-template-columns: 1fr auto;

    gap: 40px;

}



.article{

    height: fit-content;

    width: calc(100dvw - 500px);

}



.article-dedier{

    width: calc(100dvw - 160px);

}



.article>img{

    object-fit: cover;

    height: 200px;

    width: 100%;

    border-radius: 22px 22px 0px 0px;

    z-index: 2;

    background-color: #575757;

}



.article>div{

    position: relative;

    background-color: var(--VertC);

    padding: 45px;

    border-radius: 22px;

    margin-top: -22px;

    z-index: 1;

}



.article p{

    margin-left: 5px;

}



.carousel-vertical{

    width: 320px;

    height: 100%;

    display: flex;

    flex-direction: column;

    overflow-y: scroll;

    gap:15px;

    border-radius: 22px;

}



.blog .realisation{

    width: 300px;

    gap: 15px;

    margin: 0px;

}



.blog .realisation>div{

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-bottom: 10px;

}



.blog .realisation img{

    height: 170px;

    width: 300px;

    border-radius: 22px;

    object-fit: cover;

    box-shadow: 0px 0px 0px 0px #00000000;

    background-color: #575757;

}



.realisation>div>div{

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-weight: 400; /* regular = 400 & medium 500 & Bold = 700 */

    font-size: 16px;

}



.blog .realisation h4{

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    color: var(--VertF);

    text-shadow: 0px 0px 0px #00000000;

}



.blog .carousel-vertical .date{

    color: var(--VertF);

    text-shadow: 0px 0px 0px #00000000;

}



.article>div>div>div, .realisation-dedier>div{

    display: flex;

    align-items: center;

    gap: 25px;

    font-weight: 400; /* regular = 400 & medium 500 & Bold = 700 */

    font-size: 16px;

}



.blog .badge, .realisation-dedier .badge{

    box-shadow: 0px 0px 0px #00000000;

}



.blog .article .date, .realisation-dedier .date{

    text-shadow: 0px 0px 0px #00000000;

}



.carousel-vertical .realisation:hover img, .realisations-Fond-Blanc .realisation:hover img{

    box-shadow: 0px 10px 35px -15px #000000;

 }



.realisations-Fond-Blanc .realisation:hover .badge,.realisations-Fond-Blanc  .realisation:hover h4,.realisations-Fond-Blanc  .realisation:hover .date{

    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);

    text-shadow: 0px 0px 0px #00000000;

}







/*               avis             */



.avis{

    margin: auto auto 130px;

}



.avis>h2{

    color: var(--VertF);

    width: fit-content;

    max-width: 680px;

    margin: 150px auto 70px;

}



.avis>div{

    display: flex;

    padding: 30px 0px;

    overflow-x: scroll;

    gap:20px;

    width: 100%;

    align-items: center;

}



.card-avis{

    display: grid;

    grid-template-columns: auto 1fr;

    grid-template-rows: 70px auto;

    background-color: var(--VertC);

    padding: 40px;

    width: 600px;

    height: 230px;

    border-radius: 22px;

    column-gap: 40px;

    transform: scale(0.8);

    transition: 0.2s;

}



.card-avis:first-child{

    margin: auto auto auto calc(50% - 340px);

}



.card-avis:last-child{

    margin: auto calc(50% - 340px) auto auto;

}



.card-avis>img{

    height: 65px;

    width: 65px;

    border: solid 3px var(--Blanc);

    border-radius: 50%;

    object-fit: cover;

    object-position: center;

}



.card-avis>div{

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.card-avis>div>div{

    display: flex;

    gap: 4px;

}



.card-avis p{

    grid-area: 2 / 2 ;

    width: 500px;

}



.etoile{

    background-color: var(--VertF);

    height: 20px;

    width: 20px;

    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

}



.jaune{

    background-color: #FFE500;

}



.visible{

    transform: scale(1);

}



.avis a{

    border: solid 3px var(--VertC);

    border-radius: 22px;

    background-color: var(--VertC);

    padding: 20px 26px;

    display: block;

    width: fit-content;

    white-space: nowrap;

    box-shadow: inset 0px 60px 0px 0px var(--Blanc);

    transition: 0.2s;

    color: var(--VertC);

    margin: 100px auto;

}



.avis a:hover{

    box-shadow: inset 0px 0px 0px 0px var(--VertC);

    text-shadow: rgb(0, 0, 0) 1px 0 10px;

    color: var(--Blanc);

}



.avis .btn{

    box-shadow: inset 0px 0px 0px 0px var(--VertC);

    text-shadow: rgb(0, 0, 0) 1px 0 10px;

    color: var(--Blanc);

    margin: auto 30px auto 50px;

}



.pop-up{

    position: fixed;

    margin: auto 20px;

}



.boutton-avis{

    grid-area: 3/1/span 1/ span 2;

    display: flex;

}



.boutton-avis .bouton{

    border: none;

    border-radius: 22px;

    background-color: var(--VertC);

    padding: 20px 26px;

    display: block;

    width: fit-content;

    white-space: nowrap;

    box-shadow: inset 0px 0px 0px 0px var(--Blanc);

    transition: 0.2s;

    color: var(--VertC);

    margin: auto auto 0px;

}







.boutton-avis .bouton:hover{

    box-shadow: inset 0px 60px 0px 0px var(--VertC);

    text-shadow: rgb(0, 0, 0) 1px 0 10px;

    color: var(--Blanc);

}



.boutton-avis  .orange, .boutton-avis  .rouge{

    background-color: var(--Blanc);

}



.boutton-avis  .orange:hover{

    box-shadow: inset 0px 60px 0px 0px #ff6600; 

}



.boutton-avis  .rouge:hover{

    box-shadow: inset 0px 60px 0px 0px #ff2212; 

}



.realisation:hover~div>.bouton{

    box-shadow: 0px 0px 25px 0px #00000042;

}





.article .caroussel-horizontal{

    margin-top: 50px;

}





/*               histoire             */



.histoire{

    background-color: var(--VertC);

    padding: 80px 190px;

    color: var(--VertF);

}



.histoire>div{

    display: flex;

    flex-direction: column;

    background-color: var(--Blanc);

    border-radius: 22px;

    padding: 45px 100px;

    gap: 15px;

}



.histoire h2{

    margin: 10px 0px 0px;

}



.histoire img{

    height: 110px;

    width: 110px;

    border-radius: 50%;

    border:solid 6px var(--VertC);  

    margin: 20px auto auto;

    object-fit: cover;

    object-position: center;

}



.histoire .pseudo{

    color: var(--VertF);

    width: fit-content;

    margin: auto;

    white-space: nowrap;

}



.liste{

    list-style-type: disc ;

    padding: 0px 0px 0px 45px;

}



.histoire span{

    font-weight: 600;

}



/*               equipe             */



.equipe{

    margin: 80px 80px 150px;

}



.equipe>h2{

    color: var(--VertF);

}



.equipe>div{

    display: flex;

    column-gap: 110px;

    row-gap: 30px;

    padding: 80px;

    margin: auto;

    background-color: var(--VertC);

    border-radius: 22px;

    justify-content: center;

    flex-wrap: wrap;

    margin: auto 5%;

}



.equipe img{

    height: 160px;

    width: 160px;

    border: solid 6px var(--Blanc);

    border-radius: 50%;

    object-fit: cover;

    object-position: center;

}



.employe{

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;

}



.employe p{

    width: fit-content;

    margin: 0px;

}



/*               action eco label            */



.actions {

    display: grid;

    grid-template-columns: 1fr 1fr;

    margin: 20px 80px 8dvw;

    gap: 20px;

}



.actions>div, .actions>h3, #artisan>.double{

    background-color: var(--VertC);

    border-radius: 22px;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding:20px;

}



.actions h4{

    text-align: center;

    margin: 15px auto 10px;

}



.actions>h3{

    grid-area: 1/1/ span 1/ span 2;

}



#eco{

    margin-bottom: 20px;

}



.actions>div>div>img{

    height: 100px;

    max-width: 150px;

    max-height: 100px;

}



.actions>div>div{

    height: 100px;

    align-items: center;

}





/*               labels             */



.ecoDefis-dedier{

    object-position: none !important;

    object-fit: contain !important;

    height: 60% !important;

    margin: auto;

}



.artisan-dedier{

    grid-area: 1 / 1 ;

    height: 50% !important;

}





/*               page dédier prestation             */



.prestation-dedierD, .prestation-dedierG{

    background-color: var(--VertC);

    border-radius: 22px;

    margin: 80px 150px 15dvw 80px;

    padding: 20px 45px;

}



.prestation-dedierD>h3, .prestation-dedierG>h3{

    padding: 0px 45px 0px;

}



.prestation-dedierD>div, .prestation-dedierG>div{

    display: grid;

    grid-template-columns: 1fr 1fr;

    padding: 20px 45px 50px;

    gap: 20px;

}



.prestation-dedierD>div>div, .prestation-dedierG>div>div{

    position: relative;

    grid-area: 1/2;

    align-self: end;

}



.prestation-dedierD .textImg, .prestation-dedierG .textImg{

        grid-area: 1/2;

        padding-bottom: 90px;

}



.prestation-dedierG .textImg, .prestation-dedierG>div{

    grid-area: 1/1;

}



.prestation-dedierD img, .prestation-dedierG img{

    position: absolute;

    object-position: center;

    object-fit: cover;

    width: 35dvw;

    height: 20dvw;

    border-radius: 22px;

    right: -120px;

    top: -100px;

}



.prestation-dedierD p, .prestation-dedierG p{

    margin: 0px 0px 20px;

}



.prestation-dedierD{

    background: linear-gradient(-135deg, #0B8900, #006b42);

    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

}





.prestation-dedierG{

    margin: 80px 80px 15dvw 150px;

    background: linear-gradient(135deg, #0B8900, #006b42);

    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

}



.prestation-dedierG>div>div{

    position: relative;

    grid-area: 1/1;

}



.prestation-dedierG img{

    left: -160px;

}



.prestation-dedierD p a, .prestation-dedierG p a{

    font-weight: 600;

}



.prestation-dedierD p a:hover, .prestation-dedierG p a:hover{

    color: rgb(212, 212, 212);

}





/*               page dédier réalisation             */



.realisation-dedier{

    border-radius: 22px;

    background-color: var(--VertC);

    margin: 80px;

    padding: 45px 100px 80px;

}



.caroussel-horizontal{

    display: flex;

    gap: 40px;

    width: auto;

    overflow-x: scroll ;

    border-radius: 22px;

}



.realisation-dedier img{

    border-radius: 22px;

    object-fit: cover;

    object-position: center;

    height: 30vw;

    width: 30dvw;

}



.realisation-dedier p{

    margin: 50px 0px;

}



/*                réalisations fond blanc             */



.realisations-Fond-Blanc{

    background-color: var(--Blanc);

}



.realisations-Fond-Blanc>h2{

    color: var(--VertF);

}



.realisations-Fond-Blanc .realisation img{

    box-shadow: 0px 0px 0px 0px #00000000;

}



.realisations-Fond-Blanc .realisation h4{

    color: var(--VertF);

    text-shadow: 0px 0px 0px #00000000;

}



.realisations-Fond-Blanc .date{

    color: var(--VertF);

    text-shadow: 0px 0px 0px #00000000;

}



.realisations-Fond-Blanc .badge{

    box-shadow: 0px 0px 0px #00000000;

}



/*                page article            */



.page-article>div{

    gap: 0;

}



/*                page contact            */



.page-contact{

    margin: 80px;

    display: flex;

    flex-direction: column;

}



.page-contact>h1{

    background-color: var(--VertC);

    border-radius: 22px;

    text-align: center;

    padding: 25px;

    margin: 0px;

    z-index: 2;

}



.page-contact>div{

    margin: -22px 0px 0px;

    display: grid;

    grid-template-columns: auto;

    grid-template-rows: auto;

}



.page-contact>div>img{

    object-position: center;

    object-fit: cover;

    width: 100%;

    height: 220px;

    grid-area: 1/1;

    border-radius: 0px 0px 22px 22px;

}



.page-contact>div>div{

    background-color: #0e0e0e9f;

    border-radius: 22px;

    padding: 20px 30px;

    margin: 40px auto 30px;

    backdrop-filter: blur(15px);

    display: flex;

    gap: 50px;

    align-items: flex-start;

    grid-area: 1/1;

    height: fit-content;

}



.page-contact>div>div>div{

    display: grid;

    grid-template-columns: auto 1fr;

    align-items: center;

    gap:10px;

}



.page-contact p{

    margin: 0px;

}



.page-contact>div>div>div>img{

    margin: auto;

}



.page-contact>div>div>div a{

    text-align: right;

}



.page-contact a{



}



.page-contact a>div{

    display: flex;

    align-items: center;

    gap:10px;

}



/*      page contact     */



.formulaire{

    background-color: var(--VertC);

    border-radius: 22px;

    margin: 20px 80px;

    padding: 10px 100px 100px;

}



.formulaire>h3{

    width: fit-content;

    margin: 24px auto;

    text-align: center;

}



.formulaire>form{

    display: grid;

    grid-template-columns: 1fr 1fr;

    row-gap: 35px;

    column-gap: 20px;

    margin: 50px auto;

}



.formulaire>form>div, #elementsContainer .paragraph, #elementsContainer .subtitle{

    display: flex;

    flex-direction: column;

    gap: 8px;

}



#elementsContainer .paragraph>div, #elementsContainer .subtitle>div{

    display: grid;

    grid-template-columns: 1fr 40px;

    gap: 8px;

    align-items: center;

}



#elementsContainer .paragraph>div>button, #elementsContainer .subtitle>div>button{

    height: 40px;

    width: 40px;

    background-image: url(../img/icone/croixBlanche.svg);

    background-position: center;

    background-size: 50%;

    background-repeat: no-repeat;

    background-color: #ec2727;

    stroke: none;

    border: none;

    border-radius: 50%;

    box-shadow: 0px 0px 30px -10px #000000d7;

    transition:0.2s;

}



#elementsContainer .paragraph>div>button:hover, #elementsContainer .subtitle>div>button:hover{

    box-shadow: 0px 0px 20px -10px #000000d7;

    transform: scale(1.1);

}



.formulaire>form>div>label, #elementsContainer label{

    margin-left: 23px;

}



.formulaire>form>div>input, .formulaire>form>div>select, #elementsContainer input{

    border-radius: 22px;

    height: 50px;

    border: none;

    padding: 0px 24px;

    color: #002900;

    font-size: 16px;

    width: auto;

}



#elementsContainer input{

    padding: 0px 5px 0px 24px;

    color: #002900;

    width: auto;

}



.formulaire>form input:focus-visible, .formulaire>form>div>select:focus-visible, .formulaire>form textarea:focus-visible{

    outline: solid 5px var(--VertF);

}



.formulaire>form>div>textarea, #elementsContainer textarea{

    border-radius: 22px;

    border: none;

    padding: 20px 24px;

    color: #002900;

    font-size: 16px;

    width: calc(100% - 48px);

    min-width: 0px;

}



.double{

    grid-column: span 2;

}



.frc-captcha{

    border-radius: 22px;

    margin: auto;

}

.frc-banner{

    right: 12px !important;

}



.formulaire h1{

    width: fit-content;

    margin: 20px auto;
	text-align: center;


}



.btn{

    font-weight: 700; /* regular = 400 & medium 500 & Bold = 700 */

    font-style: normal;

    font-variation-settings: "YOPQ" 300;

    font-size: 24px;

    width: fit-content;

    height: fit-content;

    margin: auto;

    grid-area: span 1 / span 2;

    color: var(--VertC);

    background-color: var(--Blanc);

    border-radius: 22px;

    padding: 10px 30px;

    stroke: none;

    border: none;

    box-shadow: 0px 0px 30px -10px #000000d7;

    transition: ease-in-out 0.2s;

}



.btn:hover{

    box-shadow: 0px 0px 20px -10px #000000d7;

    transform: scale(1.1);

}



/* note étoile */



.wrapper-rating {

    font-size: 3em;

    line-height: 0;

    margin: auto 0px auto auto;

  }

  .wrapper-rating label {

    cursor: pointer;

    background-color: #00000000;

    transition: cubic-bezier(0.4, 0, 0.2, 1) 0.2s;

  }

  .wrapper-rating input {

    position: absolute;

    opacity: 0;

  }

  .wrapper-rating input:checked ~ * label .etoile{

    background-color: var(--VertF);

    border-bottom: 2px solid transparent;

  }

  .wrapper-rating .star {

    display: flex;

    cursor: pointer;

  }

  .wrapper-rating .star .etoile {

    width: 40px;

    height: 40px;

    transition: .25s;

    background-color: #FFE500;

  }

  .wrapper-rating .star:hover>label>.etoile {

    background-color: #FFE500;

  }



  .wrapper-rating .star>label:hover {

    transform: scale(1.2);

  }



/*        map       */



.map{

    margin: 80px;

    width: calc(100% - 160px);

    border-radius: 22px;

    border: 0;

    box-shadow: 0px 0px 30px -10px  rgba(0, 0, 0, 0.596);

}



/*     caroussel    */



.caroussel-horizontal-contact{

    margin: 80px;

    border-radius: 22px;

    align-items: center;

}



.caroussel-horizontal-contact img, .caroussel-horizontal img{

    border-radius: 22px;

    object-fit: cover;

    object-position: center;

    height: 30vw;

    width: 30dvw;



}



.caroussel-horizontal-contact::-webkit-scrollbar-track{

    border: 3.5px solid var(--Blanc); /* creates padding around scroll thumb */

}



/* test */



/* .plus_de_photo {

    width: 50%;

    margin: 0 auto;

    text-align: center;

}



#files {

    margin: 20px 0;

}



#preview {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}

*/

#preview img {

    border-radius: 22px;

}





/* ajout img */



.miniature label,  .plus_de_photo label{

    margin: 0px !important;

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.miniature label span,  .plus_de_photo label span{

    margin: auto auto auto 23px;

}





.ajout_miniature, .ajout_photos{

    width: 100%;

    height: 20vw;

    min-width: 200px; /* à vérifié */

    min-height: 160px;

    max-width: 400px;

    max-height: 220px;

    display: block;

    color: #3b3a4000;

    border-radius: 22px;

    -webkit-appearance: none;

    appearance: none;

    background:  url("../img/icone/grand_plus.svg") no-repeat center , #AEDBA8;

    background-size: 60%;

    transition: 0.2s;

    

}



.has-background{

    background-size: cover;

    transition: 0.2s;

}



.ajout_miniature:hover, .ajout_photos:hover {

    background-size: 70%;



}



.has-background:hover{

    background-size: 110%;

}



.formulaire>form>.miniature>input, .formulaire>form>.plus_de_photo>input {

    /* display: none; */

    height: 1px !important;

    opacity: 0;

    padding: 0px ;

    min-width: 48px;

    width: 50%;

}



.sousbtn>button{

    border-radius: 10px ;

    font-size: 14px;

}



/*        Page admin         */



.vert{

    color: var(--VertF);

    width: fit-content;

    margin: auto;

}



.menuAdmin{



    display: flex;

    /* flex-wrap: wrap; */

    gap: 5px;



    margin: auto 80px 20px;



}



.menuAdmin a{

    border: solid 3px var(--Blanc);

    border-radius: 22px;

    background-color: var(--Blanc);

    padding: 15px 26px;

    display: block;

    width: 100%;

    text-align: center;

    white-space: nowrap;

    box-shadow: inset 0px 60px 0px 0px var(--VertC);

    transition: 0.2s;

}



.menuAdmin a:hover{

    box-shadow: inset 0px 0px 0px 0px var(--VertC);

    border: solid 3px var(--VertC);

    color: var(--VertF);

}



.onPage{

    box-shadow: inset 0px 0px 0px 0px var(--VertC)!important;

    border: solid 3px var(--VertC) !important;

    color: var(--VertF);

}



.btn-carroussel{

    margin: 80px auto;

    white-space: nowrap;

}



.infoAction{

    background-color: #2b311c9f;

    border-radius: 15px;

    padding: 10px 20px;

    backdrop-filter: blur(15px);

    top: 36%;

    left:50%;

    transform: translate(-50%);

    position: fixed;

    animation: 2.5s ease-in-out animInfoAction forwards;

    z-index: 9;

}



.infoAction .pseudo{

    font-size: 16px;

    font-weight: 400;

}



@keyframes animInfoAction {

    0% {

        display: none;

        opacity: 0;

    }

    1%{

        display:block;

        opacity:0;

        transform: translateY(-50%) translateX(-50%);

    }

    30%, 70% {

        opacity: 1;

        transform: translateY(0%) translateX(-50%);

    }

    99% {

        opacity: 0;

        transform: translateY(50%) translateX(-50%);

    }

    100% {

        display: none;

        opacity: 0;

    }

}



.non-connecter{

    display: none;

}



.page-vide{

    color: var(--VertF);

    margin: 80px;

}



.deco{

    display: block;

    background-color: var(--VertC); 

    padding: 10px 20px;

    width: fit-content;

    border-radius: 15px;

    margin: 0px 80px 20px auto;

    transition:0.2s;

}



.deco:hover{

    transform: scale(1.1);

}



.zonetitre{

    color: var(--Blanc);

    font-weight: 700;

}



.zonepara{

    color: var(--Blanc);

    font-weight: 500;

    margin: 20px auto 30px;

}



.zone{

    padding: 10px 80px;

    border-radius: 0px;

    margin: 20px auto 20px;

    /* gap: 8px; */

    display: flex;

    justify-content: space-between;

    max-width: 1300px;

}



.zonetexte{

    background-color: var(--VertC);

    border-radius: 22px;

    margin: auto 80px;

    padding:  10px 37px 1px;

    display: grid;

    grid-template-columns: auto 1fr;

    align-items: center;

    justify-items: end;

    gap: 20px;

}



.presse{

    margin: auto 80px 40px;

}



.presse>h2{

    color: var(--VertF);

}



.presse>div{

    display: grid;

    grid-template-columns: 1fr 55%;

    gap:40px;

}



.presse>div>img:first-child{

    grid-area: 1/1/ span 1/ span 2;

}



.presse>div>img{

    width: 100%;

    max-width: 1300px;

    margin: auto;

    box-shadow: 0px 0px 20px -10px #000000;

    border-radius: 22px;

}



.other-site{

    display: flex;

    flex-direction: column;

    gap:10px;

}



.other-site>a{

    background-color: var(--VertC);

    border-radius: 22px;

    display: flex;

    padding: 10px;

    gap: 15px;

    box-shadow: 0px 0px 10px -5px #000000;

    transition: 0.2s;

}

.other-site>a:hover{

    transform: scale(1.05);

    box-shadow: 0px 0px 20px -10px #000000;

}



.other-site>a>img{

    object-fit: cover;

    object-position: center;

    height: 85px;

    width: 90px;

    border-radius: 13px;

}



.other-site>a>div{

    display: flex;

    flex-direction: column;

    justify-content: space-around;

}



.other-site>a>div>div{

    display: flex;

    justify-content: space-between;

    font-size: 20px;

}



.other-site>a>div>div>div{

    font-size: 16px;

    font-weight: 400;

}



/*          filtre réalisation          */





.filtre{

    display: block;

}



.hide{

        display: none;

}



.blockfiltre{

    display: flex;

    gap: 17px;

    flex-wrap: wrap;

    justify-content: center

}



.blockfiltre>label{

    background-color: var(--Blanc);

    color: var(--VertF);

}



.blockfiltre>input:checked+label{

    background-color: var(--VertF);

    color: var(--Blanc);

}



.blockfiltre>label:hover{

    cursor: pointer;

}



.blockfiltre>input{

    display: none;

}



.realisations>h2 > div {

    display: flex;

    align-items: center;

    text-align: center;

}



/*           connexion             */



.chargement{

    height: 50px;

    width: 50px;

    border-radius: 50%;

    background: radial-gradient(at 30% 30%, #02ff63 10px, #9dffc2 50%);

    /* border: solid 3px var(--VertF); */

    margin: auto;

    animation: 1s cubic-bezier(0.23, 0.08, 0.81, 0.96) 0s infinite tourne;

}



@keyframes tourne{

    from {

      transform: rotate(0deg);

    }

    to {

      transform: rotate(360deg);

    }

  }



/*         Pages Juridique       */



.juridique{

    color: var(--VertF);

    margin: auto 80px 100px;

}



.juridique ul{

    list-style: disc;

    font-weight: 400;

}



/*   zoom image (doit rester à la fin)  */



.grande-img{

    position: fixed;

    height: auto;

    width: auto;

    top: 0px;

    right: 0px;

    bottom: 0px;

    left: 0px;

    z-index: 8;

    border-radius: 0px;

    background-color: #000000d2;

    backdrop-filter: blur(20px);

    margin: 0px !important;

}



.grande-img img{

    height: auto !important;

    width: 100% !important;

    max-width: 1000px !important;

    max-height: 100% !important;

    object-fit: contain;

    

}



.grande-img::-webkit-scrollbar-track{

    border: 3.5px solid #000000d2; /* creates padding around scroll thumb */

}





/*****************footer****************/



footer{

    background-color: var(--VertC);

    color: var(--Blanc);

    margin: auto 0px 0px 0px;

    padding: 40px 80px;

}



footer>div:first-child{

    display: grid;

    grid-template-columns: 1fr 1fr 1fr 18%;

    width: 100%;

    justify-content: space-between;

    align-items: center;
    gap: 25px;

}



.logo-footer{

    display: flex;

    align-items: center;

    gap: 25px;

    font-size: 20px;

}



.logo-footer>a{

    transform: translateY(4px);

}



.contact-footer{

    display: flex;

    flex-direction: column;

    gap: 50px;

}



/* 142px */

footer nav>ul{

    flex-direction: column;

    gap: 6px;

}



footer nav>ul li{

    margin: 0px;

}



.legal{

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    height: 130px;

    padding-top: 8px;

}



.legal>ul{

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.legal>a{

    display: flex;

    align-items: center;

    gap: 13px;

    

}



footer a{

    transition: 0.2s;

}



footer a:hover, .page-contact a:hover{

    color: rgb(212, 212, 212);

}



.legal>a img{

    transition: 0.2s;

}



.legal>a:hover img{

    transform: scale(1.1);

}



footer>div>div:nth-child(2)>nav, footer>div>div:nth-child(3)>.legal{

    width: fit-content;

    margin: auto;

}



footer .contact-footer>.paragraphe>a{

    display: inline-flex;

    height: 24px;

    margin: 0px;

    align-items:center;

}





.logos-footer{

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 15px;

}



.ecoDefis{

    height: 100px;

    width: 100px;

    background-color: var(--Blanc);

    border-radius: 50% 2px 50% 50%;

    display: flex;

}



.ecoDefis>img{

    width: 80px;

    margin: auto;

}



.ecoDefis>a, .maitreArtisan>a{

    display: block;

}



.maitreArtisan{

    height: 100px;

    width: 100px;

    background-color: var(--Blanc);

    border-radius: 50%;

    display: flex;

}



.maitreArtisan>img{

    width: 90px;

    height: 56px;

    margin: auto;

}









footer>div:last-child{

    margin-top: 6%;

    text-align: center;

}







@media screen and (min-width: 1400px) {



        /*       presse     */



        .presse{

            margin:20px 30px;

        }

    

        .presse>div{

            grid-template-columns: 60% 1fr;

            gap:40px;

        }

        

        .presse>div>img:first-child{

            grid-area: 1/1/ span 1/ span 1;

            margin: 0px auto;

        }



        .presse>div>img:last-child{

            grid-area: 1/2/ span 2/ span 1;

        }



}







@media screen and (max-width: 1070px) {

    header{

        margin: 22px 30px;

    }



    .menu1 nav{

        display:none;

    }



    .menu-burger{

        display: flex;

    }



    .menu-visible{

        display: block;

        animation: 0.2s ease-in-out apparition forwards;

    }



    .menu-mobile>ul{

        flex-direction: column;

        gap: 2px;

    }

    

    .menu-mobile>ul>li{

        margin: 0px;

    }

    

    .menu-mobile .deroulant{

        position: static;

        display: none;

    }

    

    .menu-mobile .deroulant div{

        white-space: wrap;

    }

    

    .menu-mobile li .deroulant{

        transform: scaleY(1);

        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

    }

    

    .menu-mobile .tel{

        display: flex;

        align-items: center;

        gap: 10px;

    }

    

    .menu-mobile .tel .deroulant{

        padding: 0px !important;

        width: fit-content;

    }

    

    .menu-mobile .tel img{

        padding: 11px 24px 11px 0px ;

    }

    

    .menu-mobile>ul>li>a, .menu-mobile .prestation-mobile{

        display: flex;

        height: 48px;

        min-width: 48px;

        width: fit-content;

        align-items: center;

    }

    

    .menu-mobile .prestation-mobile{

        gap: 20px;

    }

    

    .menu-mobile .prestation-mobile>img{

        width: 15px;

        transform: rotate(180deg);

        transition: 0.2s;

    }

    

    .menu-mobile .prestation-mobile>.directionhaut{

        transform: rotate(0deg);

    }

    

    .menu-mobile .deroulant{

        gap: 0px;

    }



    .menuAdmin{

        margin: auto 30px 20px;

    }

    

    @keyframes apparition {

        0% {

            opacity: 0;

            transform: scale(0.5) translateY(-30%);

            clip-path: ellipse(51% 0% at 51% 0%);

        }

        100% {

            opacity: 1;

            transform: scale(1);

            clip-path: ellipse(99% 100% at 50% 26%);

        }

    }



    .deco{

        margin: 0px 30px 20px auto;

    }



/*******************main**********************/



.erreur{

    margin: 50px 30px;

}





    .ligneG, .ligneD{

        display: flex;

        flex-direction: column;

    }



    .ligneD{

        flex-direction: column-reverse;

    }



    .img1, .img2, .img3, .img4{

        height: 350px;

    }



    .blog>div{

        display: flex;

        flex-direction: column;

        height: auto !important;

    }



    .carousel-vertical{

        width: 100%;

        flex-direction: row;

        gap:35px;

    }



    .article{

        width: auto;

    }



    .carousel-vertical .btn-carroussel{

        margin: 80px 80px 80px auto;

        white-space: nowrap;

    }



    /*               page dédier prestation             */



    .prestation-dedierD, .prestation-dedierG{

        margin: 20px 100px 20dvw 30px;

        padding: 20px 45px;

    }



    .prestation-dedierD>div, .prestation-dedierG>div{

        grid-template-columns: 1fr;

        padding: 20px 45px 50px;

    }



    .prestation-dedierD img, .prestation-dedierG img{

        width: 45dvw;

        height: 25dvw;

        right: -160px;

        bottom: -180;

    }



    .prestation-dedierG{

        margin: 20px 30px 20dvw 100px;

    }



    .prestation-dedierG img{

        left: -160px;

    }



    .prestation-dedierG>div>div{

        grid-area: 2/1;

    }



    .prestation-dedierD>div>div{

        grid-area: 2/1;

    }



    .prestation-dedierD p, .prestation-dedierG p{

        padding-bottom: 0px;

}



    .prestation-dedierG p{

        grid-area: 2/1;

        padding-bottom: 90px;

    }

    

    .prestation-dedierG .textImg{

            grid-area: 1/1;

            padding-bottom: 0px;

    }



    .prestation-dedierD .textImg{

        grid-area: 2/1;

        padding-bottom: 90px;

    }





    /*             zone d'intervention             */



    .zone{

        gap: 17px;

        display: flex;

        overflow-x: scroll;

        padding: 20px 30px;

    }



    .zonetexte{

        margin: 80px 30px auto;

    }





    /*               page réalisations             */



.page-realisations{

    border-radius: 22px;

    margin: 20px 50px;

    padding: 80px 45px 100px;

}



.page-realisations>div:nth-child(3){

    column-gap: 17px;

    row-gap: 30px;

}



/*   l'entreprise   */



.fourguon{

    object-position: 17% 50% !important;

}





/******************scroll barra********************/



.carousel-vertical::-webkit-scrollbar{

    width: 0px; /* width of the entire scrollbar */

}

  

.carousel-vertical::-webkit-scrollbar-track{

    width:4px;

    background-color: #aedba8; /* color of the scroll thumb */

    border-radius: 20px; /* roundness of the scroll thumb */

    border: 3.5px solid rgb(255, 255, 255); /* creates padding around scroll thumb */

}

  

.carousel-vertical::-webkit-scrollbar-thumb {

    width: 22px;

    background-color: var(--VertC); /* color of the scroll thumb */

    border-radius: 20px; /* roundness of the scroll thumb */

    margin: 1px;

}

  

  /* Pour Chrome, flèche de défilement vers le haut */

.carousel-vertical::-webkit-scrollbar-button:vertical:end:increment, .carousel-vertical::-webkit-scrollbar-button:vertical:start:decrement{

    display: none;

}





/******************footer**************************/



    footer>div:first-child{

        grid-template-columns: 1fr 1fr 1fr;

    }



    .logos-footer {

        flex-direction: row;

        margin: auto;

        grid-area: 2 / 1 / span 1 / span 3;

        gap: 50px;

    }





  }







  @media screen and (max-width: 930px) {



/*******************main***************************/



    .prestations-bento, .caroussel-horizontal-contact, .accueil, .blog, .realisation-dedier, .page-contact, .formulaire, .map{

        margin: 22px 30px;

    }



    .accueil{

        display: flex;

        flex-direction: column;

    }



    .accueil>img{

        height:350px;

    }



    .point-fort, .realisations{

        padding: 100px 30px ;

    }



    .realisations{

        padding: 50px 0px ;

    }



    .avis>div{

        gap: 0px;

    }



    .card-avis{

        height: auto;

    }



    .card-avis p{

        grid-area: 2/1/1 span / 2 span;

        width: 450px;

        height: auto;

    }



    .avis>h2{

        max-width: 70%;

        margin: 150px auto 70px;

    }



    /*               labels             */



    .ecoDefis-dedier{

        width: 60% !important;

        margin: 5% auto;

    }



    .actions {

        margin: 20px 30px;

    }





    /*               histoire             */



.histoire, .realisation-dedier{

    padding: 80px 80px;

}



.histoire>div{

    padding: 45px 80px;

}



/*               equipe             */



.equipe{

    margin: 20px 80px;

}



.equipe>div{

    padding: 30px;

    margin: 0px;

}



    /*               page dédier prestation             */



    .prestation-dedierD, .prestation-dedierG{

        margin: 20px 30px 20dvw 30px;

        padding: 20px 25px;

    }



    .prestation-dedierD>div, .prestation-dedierG>div, .prestation-dedierD>h3, .prestation-dedierG>h3{

        display: block;

        padding: 0px 0px 0px 10px;

    }



    .prestation-dedierD img, .prestation-dedierG img{

        position: static;

        width: 100%;

        height: 40dvw;

    }



    .prestation-dedierG{

        margin: 20px 30px 20dvw 30px;

    }



    .prestation-dedierG img{

        left: -160px;

    }



    .prestation-dedierD .textImg, .prestation-dedierG .textImg, .prestation-dedierG p, .prestation-dedierD p{

        padding-bottom: 0px;

    }



        /*               page réalisations             */



    .page-realisations{

        border-radius: 22px;

        margin: 20px 30px;

        padding: 80px 45px 100px;

    }



    .page-realisations>div:nth-child(3){

        column-gap: 30px;

        row-gap: 30px;

    }



    .page-realisations .realisation{

        margin: 0px;

    }



    .page-realisations .realisation img{

        width:270px;

        height: 160px;

    }



    .page-realisations  .realisation{

        width:270px;

    }



    /*           realisation dedier          */



    .caroussel-horizontal-contact img{

        height: 40vw;

        width: 40vw;

    }



    /*           map        */



    .map{

        width: calc(100% - 60px);

    }



    /*     formulaire      */



    .formulaire{

        padding: 10px 5% 100px;

    }



    /*       presse     */



    .presse{

        margin:20px 30px;

    }



    .presse>div{

        grid-template-columns: 1fr;

        gap:40px;

    }

    

    .presse>div>img:first-child{

        grid-area: 1/1/ span 1/ span 1;

    }



    /*   l'entreprise   */



    .fourguon{

        object-position:50% 70% !important;

    }







/******************footer**************************/



    footer>div:first-child{

        grid-template-columns: 1fr 1fr;

    }



    .logos-footer {

        grid-area: 1 / 2;

    }



    footer>div>div:nth-child(2)>nav{

        margin: auto auto auto 0px ;

    }



  }







  @media screen and (max-width: 700px) {



    /*******************header***************************/



    .menu-mobile{

        max-width: 400px;

        width: auto;

        min-width: 250px;



    }





    /*******************main***************************/



    .point-fort{

        flex-direction: column;

        align-items: center;

        gap:45px;

    }



    .point-fort>div{

        gap:10px;

    }



    .prestations-bento .contenu, .realisation-dedier{

        padding: 10px 25px 25px;

    }



    .article>div{

        padding: 25px;

    }



    .realisations>div{

        gap: 20px;

    }



    .realisations>h2{

        margin: 10px 30px;

    }



    .realisations .realisation:first-child{

        margin-left: 50px;

    }



    .carousel-vertical .realisation img,  .realisation img{

        width:250px;

        height: 150px;

    }



    .carousel-vertical .realisation,  .realisation{

        width:250px;

    }





    .avis>div{

        gap: 20px;

    }



    .card-avis{

        height: auto;

        gap: 8px;

        transform: scale(1);

        padding: 30px;

    }



    .card-avis:first-child{

        margin: auto auto auto calc(50% - 180px);

    }

    

    .card-avis:last-child{

        margin: auto calc(50% - 180px) auto auto;

    }



    .card-avis p{

        grid-area: 2/1/1 span / 2 span;

        width: 300px;

        height: auto;

    }



        /*               histoire             */



    .histoire{

        padding: 80px 30px;

    }



    .histoire>div{

        padding: 45px 25px;

    }



    .histoire ul{

        padding: 0px 0px 0px 20px;

    }



    /*               equipe             */



    .equipe{

        margin: 20px 30px;

    }



    .equipe>div{

        padding: 25px;

        column-gap: 40px;

    }



    .equipe img{

        height: 120px;

        width: 120px;

        border: solid 6px var(--Blanc);

        border-radius: 50%;

        object-fit: cover;

        object-position: center;

    }





    .actions {

        grid-template-columns: 1fr;

    }

    

    .actions>h3{

        grid-area: 1/1/ span 1/ span 1;

    }



     /*               page réalisations             */



     .page-realisations{

        border-radius: 22px;

        margin: 20px 30px 100px;

        padding: 25px;

    }



    .page-realisations h2{

        margin:  10px auto;

    }



    .page-realisations>div:nth-child(3){

        column-gap: 17px;

        row-gap: 30px;

    }



    .page-realisations .realisation{

        margin: 0px !important;

    }



    /*           realisation dedier          */



    .caroussel-horizontal-contact img{

        height: 60vw;

        width: 60vw;

    }



    .caroussel-horizontal img{

        height: 50vw;

        width: 50vw;

    }



    /*           contact          */



    .page-contact>div{

        width: 100%;

    }



    .page-contact>div>img{

        height: 350px;

    }



    .page-contact>div>div{

        flex-wrap: wrap;

        justify-content: center;

        gap:50px;

        margin: 10% 5%;

        padding: 4%;

        width: 82%;

    }



    .page-contact>div>div>div{

        grid-template-columns: auto 1fr;

    }



    .page-contact p{

        overflow-wrap: break-word;

    }



    /*      page contact     */



    .formulaire{

        background-color: var(--VertC);

        border-radius: 22px;

        padding: 10px 5% 30px;

    }



    .formulaire>h3{

        width: fit-content;

        margin: 24px auto;

    }



    .formulaire>form{

        display: grid;

        grid-template-columns: 1fr;

        row-gap: 20px;

        column-gap: 20px;

        margin: 50px auto;

    }





    .double{

        grid-column: span 1;

    }



    .btn{

        grid-area: span 1 / span 1;

    }



    .formulaire>form>.plus_de_photo>.espace{

        height: calc(50vw + 20px);

        width: 0px;

    }



    .formulaire>form>.plus_de_photo>.espace>.caroussel-horizontal{

        position: absolute;

        width: calc(100vw - 60px - 10%);

        margin-top: 0px;

        height: calc(50vw + 20px);

    }



    /*      étoile     */



    .wrapper-rating {

        margin: auto;

      }



    /*      page juridique      */

    .juridique{

        margin: auto 30px 100px;

    }





    /*       zone d'intervention      */



    .zonetexte{

        grid-template-columns: 1fr;

        justify-items: center;

        gap: 0px;

    }



    .zonetexte>img{

        grid-area:1/1;

        margin-top: 20px;

    }





     /*   zoom image (doit rester à la fin)  */



.grande-img{

    position: fixed !important;

    height: auto !important;

    width: auto !important;

    top: 0px;

    right: 0px;

    bottom: 0px;

    left: 0px;

    z-index: 8;

    border-radius: 0px;

    background-color: #000000d2;

    backdrop-filter: blur(20px);

    margin: 0px !important;

}



    /********************texte***********************/



    h1{

        font-size: 28px;

    }



    h2{

        font-size: 24px;

    }



    h3{

        font-size: 22px;

    }



    .page-vide{

        margin: 80px 30px;

    }



    /******************footer**************************/

    

        footer>div:first-child{

            grid-template-columns: 1fr;

        }

    

        .logos-footer {

            grid-area: 4 / 1 ;

            margin: 40px auto 20px

        }

    

        footer>div>div:nth-child(2)>nav{

            margin: auto auto auto 0px ;

        }



        footer>.contact-footer>.paragraphe,  footer>div>div:nth-child(2),footer>div>div:nth-child(3), footer>div:nth-child(1){

            width: fit-content;

        }



        footer>div:nth-child(1){

            margin: auto;

            gap: 0px;

        }



        footer{

            padding: 10%;

        }







        .contact-footer{

            gap: 25px;

            margin-bottom: 40px;

        }



        footer nav>ul, footer .legal>ul{

            gap: 0px;

        }



        footer .legal{

            padding: 0px;

        }



        footer ul a{

            display: flex;

            height: 48px ;

            min-width: 48px;

            align-items: center;

        }



        footer .legal>a>div{

            display: flex;

            height: 48px;

            min-width: 48px;

            align-items: center;

        }



        footer .legal>a{

            margin-top: 30px;

        }



        footer .legal{

            height: fit-content;

        }

    

      }





      @media screen and (max-width:450px){

        

    .menu-mobile .deroulant div {

        white-space: normal;

    }



        .menuAdmin{

            flex-wrap: wrap;

            gap: 5px;

            margin: auto 30px 20px;

        

        }



        .article>div>div>div{

            justify-content: space-between;

            gap: 15px ;

        }



        .article>div>div>div .date{

            margin: 0;

        }

        

        .article>div>div>div .badge{

            border-radius: 15px;

            white-space: wrap; 

            width: min-content;

            text-align: center;

        }

        

        /*           contact          */



        .page-contact>div>div>div{

            width: 100%;

        }



        .page-contact>div>img{

            height: 300px;

        }



        .page-contact p{

            width: 90%;

        }



            /*     bento     */



        .img1, .img2, .img3, .img4{

            height: 250px;

        }



        /*   l'entreprise   */



        .fourguon{

            object-position: 30% 50% !important;

        }



      }