@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

html, body {
    overflow-x: hidden; /* Utilisez-le temporairement si nécessaire */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


*, ::before ::after{
box-sizing: border-box;
outline: 1px solid red; /* Pour voir les limites de chaque élément */
}

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: var(--font);
    outline: none;

}
.stylesercive{
  padding: 5px 10px;
  background-color: #01507e;
  color: var(white);
  
}
body{
    max-width: 100vw;
}
:root{
    --gray: rgb(119, 119, 119);
    --black-1:rgb(36, 36, 36);
    --black-2:rgb(77, 77, 77);
    --black-3:rgb(114, 114, 114);
    --black-4:rgb(214, 211, 211);
    --hover: rgb(104, 104, 104);
    --color-footer:#1F2E40;
    --font: "Roboto", sans-serif;
    --colorOne: rgb(36, 60, 105);
    --colorOne-hover:  rgb(3, 129, 55);
    --hoverbleu: rgb(227, 235, 249);
    --colorTwo:rgb(247, 247, 247); 
    --white-1:rgb(243, 243, 243);
    --white-2:rgb(236, 234, 234);
    --white-3:rgb(187, 187, 187);
    --white-4:rgb(231, 231, 231);
    --blackDesign:  rgb(34, 38, 44);
    --devisElec:  #72195f;
    --devisReseau:rgb(48, 10, 85) ;
}


/* Header header  */
header{
    height: 140px;
    width: 100vw;
    /* background-color: aqua; */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
}
.error-main, .succes-main {
  height: 169px;
  width: 100vw;
  position: absolute;
  z-index: 10;
  /* background-color: #d6d6d6; */
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 1px;
}

#error-message{
  transition: opacity 1s ease-out; 
}

.erroraffichage, .succesaffichage{
  min-height: 50px;
  min-width: 400px;
  border-radius: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1; 


}



.erroraffichage{
  background-color: rgba(192, 37, 37, 0.8);


}
.succesaffichage{
  background-color: rgba(5, 112, 23, 0.8);
  text-align: center;
  font-size: 16px;
  color: var(--white-1);
}

.erroraffichage span, .succesaffichage span{
color: var(--white-1);
font-size: 15px;
}




header p {
  display: none;
}
#comment-2{
    display: none;
}
header img{
  height: 135px;
  width: 145px;
}
.line-coupe{
    height: 2px;
    width: 100vw;
   background-color:var(--gray);
}


/* Menu Menu Menu  */
.menu{
    height: 100px;
    width: 100vw;
    background-color: var(--colorOne);
    display: flex;
    justify-content: center;
}
.menu-dashboard{
    height: 30px;
    width: 100vw;
    background-color: var(--colorOne);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white-1);
}
.menu-childrent{
    height: 100%;
    width: 925px;
    /* background-color: blueviolet; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 17px;
}
.menu-connexion{
    height: 100%;
    width: 638px;
    /* background-color: blueviolet; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 17px;
}

.menu-contact-use{
    height: 100%;
    width: 925px;
    /* background-color: blueviolet; */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
}

.menu-connexion a:hover{
    color:var(--hover);
}
.menu-contact-use a:hover{
    color:var(--hover);
}
.menu-childrent a, .menu-contact-use a, .menu-connexion a{

color:var(--white-1);
font-weight: 400;
}
.menu-childrent a:hover{
color:var(--hover);
    }

    /* Main Main Main Main Main  */
    main{
        height:55rem;
    width: 100vw;
/* background-color: var(--colorTwo);  */
background-image: url(../img/f2.jpg);
background-size: cover;
margin-bottom: 3rem;
   }
   /* Main-1///////   Main-1///////   Main-1////// */
.main-1{
    height: 75%;
    width: 100%;
    /* background-color: antiquewhite; */
    display: flex;
}

.cardOne, .cardtwo{
    height: 100%;
    width: 48%;

}
.cardOne{
    /* background-color: antiquewhite; */
    display: flex;
    justify-content: right;
    padding-right: 20px;
}
.cardtwo{
    /* background-color: rgb(85, 31, 136); */
    display: flex;
    padding-left: 20px;
    display: flex;
    align-items: center;
}
.card-mains{
    height: 98%;
    width: 800px;
    background-color: var(--colorOne);
    border-radius: 7px;

}
.card-photo{
    height: 100%;
    display: flex;

}
.card-photo img{
    height: 100%;
    width: 100%;
    border-radius: 7px;
    object-fit:cover;

}
.grey{
    color: var(--gray);
}


/* Article nos solutions///Article nos solutions/// */
.title-solution{
    height: 7rem;
    width: 100vw;
    /* background-color: aqua; */
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.title-solution h2{
    color: var(--black-1);
}

.solution{
    min-height: 30rem;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #1F2E40; */
}
.solution-main{
    min-height: 225px;
    width: 80%;
    /* background-color: #4CAF50; */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-one-solution{
    height: 250px;
    width: 700px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    display: flex;

}

.cardSolution-left{
    min-height: 250px;
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    /* background: rgb(31,46,64);
background: linear-gradient(243deg, rgba(31,46,64,1) 26%, rgba(50,17,99,1) 35%, rgba(15,56,130,1) 100%);  */
}
.cardSolution-right{
    min-height: 250px;
    width: 60%;
    background-color: #1F2E40;
}
.cardS-top{
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #4CAF50; */
}
.cardS-mid{
    min-height: 100px;
    width: 100%;
    display: flex;
    justify-content: center;
    /* background-color: #4CAF50; */
}
.cardSs-btn{
    min-height: 100px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* background-color: #af6b4c; */
}
.cardSs-btn a{
    display: flex;
    height: 60px;
    width: 200px;
    display: flex;
    position: absolute;
    z-index: 20;
    justify-content: center;
    align-items: center;
    background-color:var(--white-1);
    font-size: 18px;
    color: #1F2E40;
    border-radius: 25px;
    cursor: pointer;
    
}

.cardSs-btn a:hover{
    background-color:green;
    color: var(--white-1);
}
.cardS-mid p{
color: var(--white-3);
padding: 7px;
text-align: justify;
line-height: 1.5;
}
.cardS-top h4{
color: var(--white-2);
}
.wifi {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wifi video{
    width: 105px;
    height: 105px;

}

/* Le point au centre */






/* Slider////Slider////Slider////Slider////Slider//// */

.cardB{
    height: 651px;
    width: 550px;
    /* background-color: rgb(42, 91, 165); */
    border-radius: 7px;
}
.cbone{
    height: 15%;
    width: 100%;
    /* background-color: rgba(157, 228, 26, 0.897); */
    display: flex;
    align-items: center;
}
.cbone img{
    height: 35px;
    width: 40px;
}


.ztext span{
padding: 9px 7px;
    background-color: var(--colorTwo);
    border-radius: 7px;
    font-weight: bold;
    color: black;

}
.slogan{
    height: 55%;
    width: 100%;
    /* background-color: aliceblue; */
    display: flex;
    align-items: center;
    padding-left: 10px;
    font-size: 20px;
    line-height: 1.5;
    color: var(--black-1);
}

.yourproject{
    height: 30%;
    width: 100%;
    /* background-color: rgb(19, 128, 28); */
    color:black;
}
.you-title{
    height: 40%;
    width: 100%;
    display: flex;
    align-items: center;
}
.you-title h2{
font-size: 35px;
color: var(--black-1);
}
.inputquestion{
    height: 60%;
    width: 100%;
    /* background-color: rgb(128, 112, 19); */
    display: flex;
}

.inputquestion input{
    display: block;
    height: 64px;
    width: 443px;
    padding-right: 40px;
    padding-left: 10px;
    outline: none;
    border-radius: 7px;
    border:none;
    cursor: pointer;
    color: var(--colorOne);
    font-weight: 500;
    font-size: 15px

}
.form-projet{
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 10;
}
.inputquestion i {
    position: relative;
    top: -31.4px;
    right: -434px;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--white-1);
    pointer-events: none;
    background-color: var(--colorOne);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    height: 64px;
    width: 60px;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}


.dropdown-list {
    position: absolute;
    top:67px;
    left: 2px;
    right: 0;
    background-color: white;
    border-radius: 7px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    min-height: 209px;
    width: 491px;
    overflow-y: auto;
    display: none;
    z-index: 1000;

}
.dropdown-list a{
    display: flex;
    flex-direction: column;
    padding: 25px;
    cursor: pointer;
    color: var(--colorOne);
    font-weight: 500;
}
.dropdown-list a:hover {
    background-color:var(--hoverbleu);
}
.inputquestion input::placeholder{
font-size: 16px;
}

#slogan2{
    display: none;
}
nav{
    display: none;
}
.burger{
    display: none;
}
@media only screen and (max-width:1157px){
    main {
        height: 55rem;
        width: 100vw;
        background-color: var(--colorTwo);
        background-image: url(../img/f2.jpg);
        background-size: cover;
        margin-bottom: 3rem;
      }
      .cardtwo {
    display: none;
      }
      #slogan1{
        display: none;
      }
      #slogan2{
        display: flex;
        width: 100%;
        /* background-color: rebeccapurple; */
      }
      .main-1 {
        height: 75%;
        width: 100%;
        /* background-color: antiquewhite; */
        display: flex;
        justify-content: center;
      }
      .cardB {
        height: 651px;
        width: 100%;
        /* background-color: rgb(42, 91, 165); */
        border-radius: 7px;
        text-align: center;
      }
      .cardOne {
        /* background-color: #ea8703; */
        display: flex;
        justify-content: center;
        padding-right: 20px;
        width: 80%;
      }

      .cbone {
        height: 15%;
        width: 100%;
        /* background-color: rgba(157, 228, 26, 0.897); */
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .you-title {
        height: 40%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .inputquestion {
        height: 60%;
        width: 100%;
        /* background-color: rgb(128, 112, 19); */
        display: flex;

      }
      .inputquestion input {
        width: 100%; /* Occupe toute la largeur possible */
        max-width: 100%; /* Par exemple, si vous voulez limiter la largeur */
        height: 64px;
        padding-left: 10px;
        padding-right: 60px; /* Compense la largeur de l'icône */
        border-radius: 7px;
        border: none;
        font-size: 15px;
        box-sizing: border-box; /* Pour que le padding soit inclus dans la largeur totale */
     }
     
      .inputquestion i {
        position: absolute;
        right: 0px;
        top: 58px;
        background-color: var(--colorOne);
        display: flex;
        justify-content: center;
        align-items: center;
        border-top-right-radius: 7px;
        border-bottom-right-radius: 7px;
     }
     .dropdown-list {
        position: absolute;
        top: 78%; /* Positionne juste en dessous de l'input */
        left: 0;
        width: 100%; /* Prend la même largeur que l'input */
        background-color: white;
        border-radius: 7px;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
        max-height: 209px;
        overflow-y: auto;
        display: none;
        z-index: 50;
        text-align: left;
     }
    
     .form-projet {
        position: relative; /* Assurez-vous que le parent est positionné */
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
     }




}
/* Main-2/////Main-2/////Main-2/////Main-2///// */
.main-2{
    height: 25%;
    width: 100%;
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: center;

}

.main2-chil{
    height: 100%;
    width: 79%;
    /* background-color: blueviolet; */
    display: flex;
    justify-content: center;
}
.main-2-cont{
    height: 100%;
    width: 90%;
    /* background-color: rgb(43, 116, 226); */
    display: flex;
    justify-content: center;
    align-items: flex-end;

}
.main-2-card{
    height: 50%;
    width: 245px;
    /* background-color: blanchedalmond; */
    margin: 0 95px;
    display: flex;
}
.m2lef{
    height:50%;
    width:2px;
background-color: var(--colorOne);
}
.m2right{
    height:100%;
    width:97%;
    /* background-color: aliceblue; */
    display: flex;
    justify-content: center;
flex-direction: column;
padding-left: 10px;
line-height: 33px;
}
.m2right b {
    font-size: 26px;
    color: var(--black-1);
  }

.mob-another-main{
    display: none;
}



/* Besoin-de///Besoin-de///Besoin-de///Besoin-de///Besoin-de/// */

.besoin-de{
    min-height: 45rem;
    width: 100vw;
    /* background-color: #4CAF50; */
    display: flex;
    justify-content: center;
    margin-bottom: 5rem;

}
.besoin-de-left{
    min-height: 720px;
    width: 85%;
    /* background-color: bisque; */
    display: flex;
}


.Title-all-s{
    height: 15rem;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* background-color: #8a6727; */
    line-height: 2;
    text-align: center;
}
.Title-all-s p{
font-size: 35px;
font-weight: bold;
color: var(--black-1);
}
.smob, .smob2{
    display: none;
}
.sweb{
    font-size: 16px;
    color: var(--black-1);
    }
.bl-left-top{
    height: 40%;
    width: 100%;
    /* background-color: aqua; */
    display: flex;
}

.bl-left-bottom{
    min-height: 180px;
    width: 100%;
    /* background-color: aqua; */
    display: flex;
    color: var(--black-2);
    font-size: 17px;
    line-height: 1.5;
    padding: 15px;
    text-align: justify;
}
.blt-left{
    height: 80%;
    width: 1%;
    background-color: var(--colorOne);
}

.blt-right{
    height: 100%;
    width: 99%;
    /* background-color: var(--white-1); */
    text-align: left;
    padding-left: 10px;
}
.blt-right p{
color: var(--black-1);
font-size: 30px;
font-weight: 500;
}
.b-right{
    height: 100%;
    width:817px;
    /* background-color: #4f8a27; */
    display: flex;
    justify-content: center;
    /* align-items: center; */
}

.bright-picture{
    height: 600px;
    width: 600px;
background-image: url(../img/All\ servcice.png);
background-size: cover;
background-position: center;
}


.b-left{
    min-height: 341px;
    width: 50%;
    /* background-color: #275f8a; */
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.b-left-card{
    min-height: 220px;
    width: 95%;
    display: flex;
    flex-direction: column;
    margin: 15px 0;
    /* background-color: #4CAF50; */
}

/* 
Sec-one////Sec-one////Sec-one////Sec-one////Sec-one//// */

.Sec-one{
    height: 35rem;
    width: 100vw;
    /* background-color: var(--colorOne); */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sec-one-title{
    height: 15%;
    width: 100%;
    /* background-color: #4CAF50; */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 40px;
    color: var(--black-1)
}
.sec-one-icone{
    height: 65%;
    width: 1318px;
    /* background-color: aqua; */
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.sec-one-icone-card{
    height: 80%;
    width: 400px;
    /* background-color: rgb(43, 255, 0); */
}

.sec-one-icone-card-bot{
    height: 40%;
width: 100%;
/* background-color: rgb(146, 28, 107); */
text-align: center;
}

.sec-one-icone-card-bot b{
font-size: 20px;
color: var(--black-2);
}
.sec-one-icone-card-bot span{
color: var(--colorOne);
}

.sec-one-icone-card-top{
    height: 60%;
    width: 100%;
    /* background-color: blueviolet; */
    display: flex;
    justify-content: center;
    align-items: center;
    }
.cercle-sec-one{
    height: 220px;
    width: 220px;
    /* background-color: #4CAF50; */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cercle-sec-one img{
    height: 100%;
    width: 100%;
    border-radius: 50%;
    object-fit: cover;

}
.more-details{
    height: 20%;
    width: 70%;
    /* background-color: antiquewhite; */
    display: flex;
    justify-content:center;
    align-items:center;
}
.more-details a{
    height: 73px;
    width: 270px;
border: solid 1px var(--colorOne);
    display: flex;
    justify-content:center;
    align-items:center;
    font-weight: bold;
    font-size: 17px;
    color: var(--black-1);
    border-radius: 4px;
}

.more-details a:hover{
background-color: var(--colorOne);
color: white;
}
/* Sec-two/// Sec-two/// Sec-two/// Sec-two/// Sec-two/// Sec-two///  */

.sec-two{
    min-height: 40rem;
    width: 100vw;
    /* background-color: #4CAF50; */
    display: flex;
align-items: center;
    flex-direction: column;
}
.sec-two-top-title{
    height: 72px;
    width: 70%;
    /* background-color: blueviolet; */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black-1);
    font-size: 25px;
    padding-left: 66px;

}


.mlmonileBas h6{
  color: var(--black-4);
  font-size: 9px;
}
.choix-services{
    height: 10%;
    width: 70%;
    /* background-color: aqua; */
    display: flex;
    /* justify-content: space-between; */
    align-items:center
}
.serv{
    height: 54px;
    width: 188px;
    background-color: var(--colorTwo);
    display: flex;
    justify-content: center;
    margin: 0 30px;
    align-items:center;
    border-radius: 5px;
    color: black;
    cursor: pointer;
}

.choix-card-a1{
    height: 80%;
    width: 100%;
    /* background-color:rgb(243, 243, 243); */
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    /* display: none; */
}

.choix-card-a1-top {
    min-height: 327px;
    width: 98%;
    /* background-color: rgb(107, 41, 41); */
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
.plus-serv{
    height: 120px;
    width: 70%;
    /* background-color: blueviolet; */
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.choix-card-a1 a{
    height: 263px;
    width: 345px;
    display: block;
    background-color: var(--white-1);
    box-shadow: 5px 10px 15px rgba(143, 143, 143, 0.3);
    border-radius: 7px;
    margin: 0 30px;
}

.plus-serv a{
    height: 73px;
    width: 270px;
    background-color: var(--colorOne);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white-1);
    font-size: 17px;
}
.plus-serv a:hover{

    background-color: var(--black-1);
    color:var(--white-1);

}

.a1-top1,.a1-top2, .a1-top3, .a1-top4, .a1-top5, .a1-top6, 
.a1-top7, .a1-top8, .a1-top9{
    height: 70%;
    width: 100%;
background-size: cover;
    display: flex;
    justify-content:center;
    align-items:center;
}
.a1-top1{
    background-image: url(../img/fibre\ optique.PNG);
}.a1-top2{
    background-image: url(../img/r2.PNG);
}

.a1-top3{
    background-image: url(../img/5g.PNG);
}
.a1-top4{
    background-image: url(../img/elec.PNG);
}
.a1-top5{
    background-image: url(../img/elec\ entreprise.PNG);
}
.a1-top6{
    background-image: url(../img/elec\ chantier.PNG);
}
.a1-top7{
    background-image: url(../img/menage\ entreprie.PNG);
    background-position-y: -50px;
}
.a1-top8{
    background-image: url(../img/menage\ couloir.PNG);

}
.a1-top9{
    background-image: url(../img/chambre2.PNG);

}
.a1-bott{
    height: 30%;
    width: 100%;
/* background-color: var(--colorOne); */
text-align: center;
line-height: 1.5;
}
.a1-bott b{
color: var(--black-1);
font-size: 25px;
}
.a1-bott span{
    color: var(--black-2);
    font-size: 15px;
    }



.sec-savoir{
  min-height: 25rem;
  width: 100vw;
  /* background-color: #f44336; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.sec-savoir-main{
  min-height:100%;
  width: 100%;
  /* background-color: #1F2E40; */
  display: flex;
  justify-content: space-around;
}


.card-savoir{
  height: 300px;
  width: 400px;
  /* background-color: #4CAF50; */
  border-radius: 5px;
  /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); */
}
.card-stop{
  height: 70%;
  width: 100%;
  /* background-color: antiquewhite; */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card-stop h2{
color: var(--black-1);
}
.card-stop p{
margin-top: 10px;
color: var(--black-3);
line-height: 1.5;
font-size: 18px;
text-align: justify;
}
@media only screen and (max-width:1689px){
  .card-savoir {
    height: 340px;
    width: 292px;

  }
}

@media only screen and (max-width:1309px){
  .card-savoir {
    height: 381px;
    width: 243px;
  }
}

@media only screen and (max-width:1113px){
  .card-savoir {
    height: 458px;
    width: 201px;
  }
}
@media only screen and (max-width:991px){
  .sec-savoir-main {
    min-height: 100%;
    width: 100%;
    /* background-color: #d5e8ff; */
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .card-savoir {
    height: 329px;
    width: 335px;
    margin: 20px 0;
  }
  .sec-savoir {
    margin-top: 4rem;
  }
}


@media only screen and (max-width:747px){
  .card-savoir {
    height: 384px;
    width: 268px;

  }
}
.card-bottom{
  height: 30%;
  width: 100%;
  /* background-color: rgb(121, 74, 13); */
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-bottom i{
font-size: 50px;
}


@media only screen and (max-width:620px){
  .card-savoir {
    height: 140px;
    width: 80%;
    margin: 20px 0;
  }
  .card-stop h2 {
    color: var(--black-1);
    font-size: 17px;
  }
  .card-stop p {
    margin-top: 10px;
    color: var(--black-3);
    line-height: 1.5;
    font-size: 12px;
    text-align: justify;
  }
  .card-bottom i{
    font-size: 17px;
    }
    


}

.DEentete{
  background-color: var(--blackDesign);
}

@media only screen and (max-width:496px){
  .card-stop p {
    margin-top: 10px;
    color: var(--black-3);
    line-height: 1.5;
    font-size: 11px;
    text-align: justify;
  }
  .card-stop h2 {
    color: var(--black-1);
    font-size: 13px;
  }
 
  .sec-savoir {
    margin-top: 2rem;
  }
}



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

}










/* Sec-three///Sec-three///Sec-three///Sec-three///Sec-three///Sec-three/// */
.sec-three{
    min-height: 20rem;
    width: 100vw;
    /* background-color: #4CAF50; */
    display: flex;
    flex-direction: column;
align-items: center;

}

.product-title{
    height: 100px;
    width: 70%;
    /* background-color: #275f8a; */
    color: var(--black-1);
  font-size: 25px;
  padding-left: 66px;
  display: flex;
}

.main-card-produit{
    min-height: 321px;
    width: 75%;
    box-shadow: 5px 10px 15px rgba(143, 143, 143, 0.3);
    /* background-color: #275f8a; */
    display: flex;
    flex-wrap: wrap;
    border-radius: 7px;
    justify-content: space-around;
    align-items:center;
}
.product-card {
  height: 379px;
  width: 267px;
  background-color: white;
  border-radius: 7px;
  margin: 20px 0;
  border:  solid 0.5px var(--white-2);
  box-shadow: 5px 10px 15px rgba(241, 241, 241, 0.555);
}

.product-card:hover{
 border:solid 1px var(--colorOne);
}
.product-img {
  height: 60%;
  width: 100%;
  /* background-color: #4CAF50; */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.product-img img{
    height: 130px;
    width: 130px;
    position: absolute;
    z-index: 0;
    object-fit: contain;
    }

    .product-img i {
      height: 21%;
      width: 23%;
      position: absolute;
      z-index: 1;
      left: 206px;
      top: 2px;
      font-size: 21px;
      color: var(--colorOne);
      cursor: pointer;
      /* background-color: #72195f; */
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .product-infos {
      height: 40%;
      width: 100%;
      box-shadow: 5px 10px 15px rgba(241, 241, 241, 0.555);
      display: flex;
      align-items: center;
      line-height: 1;
      flex-direction: column;
    }

    .product-infos p{
      text-align: center;
color:var(--black-2);
font-size: 20px;
        }
    

        .product-infos span{
            color:var(--colorOne);
            font-size: 20px;
                    }
                    .product-infos span i{
                        font-size: 15px;
                                }


.all-product{
    height: 180px;
    width: 100vw;
    /* background-color: #275f8a; */
    display: flex;
justify-content: center;
align-items: center;
margin-bottom: 3rem;
}
.all-product a{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 73px;
    width: 270px;
    font-size: 18px;
    border-radius: 7px;
    background-color: var(--colorOne);
    color: var(--white-1);
}
.all-product a:hover{

    background-color: var(--black-1);

}

.npordi{
  height: 50%;
width: 100%;
/* background-color: #0d5252; */
display: flex;
justify-content: center;
align-items: center;
}

.npmob{
height: 50%;
width: 100%;
/* background-color: #353636; */
display: none;
justify-content: center;
align-items: center;
}

.prixProduitNew{
  height: 50%;
  width: 100%;
  /* background-color: var(--colorOne); */
  justify-content: center;
align-items: center;
display: flex;
}
.prixProduitNew span{
color: var(--colorOne);
font-weight: bold;
}





/* Section-four///Section-four///Section-four///Section-four/// */
.sec-four{
    min-height: 20rem;
    width:100vw;
    /* background-color: black; */
    display:flex;
    align-items: center;
    flex-direction:column;
    margin-bottom: 3rem;
}
.secfour-title{
    height: 100px;
    width:70%;
    /* background-color:rgb(41, 122, 122); */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    color:var(--black-1);
font-weight: 500;
}
.interv-img{
   display: none;     
}
@media only screen and (max-width:1231px){
    .choix-card-a1-top {
        min-height: 327px;
        width: 98%;
        /* background-color: rgb(107, 41, 41); */
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }

      .choix-card-a1 {
        min-height: 520px;
        width: 100%;
        /* background-color: rgb(219, 13, 13); */
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
        display: none;
      }
      .choix-card-a1 a {
        margin: 30px 0;
      }



}
.client-confiant {
    min-height: 120px;
    width: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 7px;
    flex-wrap: wrap;
  }
.card-client{
    height: 79px;
    width: 227px;
    background-color: white;
    border-radius: 7px;
    display: flex;
    margin: 20px;
    justify-content: center;
    align-items: center;
}
.card-client img{
    height: 60%;
    width: 50%;
    border-radius: 7px;
    object-fit: cover;
}
@media only screen and (max-width:927px){

    .menu-childrent {
        height: 100%;
        width: 727px;
        /* background-color: blueviolet; */
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 17px;
      }

      .main-2-cont {
        height: 100%;
        width: 100%;
        /* background-color: rgb(43, 116, 226); */
        display: flex;
        justify-content: center;
        align-items: flex-end;
      }
      .main-2-card {
        height: 50%;
        width: 245px;
        /* background-color: brown; */
        margin: 0;
        display: flex;
      }
      .secfour-title {
        font-size: 20px;
      }
      .sec-one-title {    
        font-size: 30px;
      }




}

@media only screen and (max-width:622px){
  .sec-one-title {
    font-size: 21px;
  }
}



@media only screen and (max-width:1043px){
    .besoin-de {
        min-height: 45rem;
        width: 100vw;
        /* background-color: #4CAF50; */
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 5rem;
      }
    .bright-picture {
 display: none;
      }
.b-right{
    display: flex;
    flex-direction: column;
    /* background-color: #4CAF50; */
    align-items:end;

}
      .interv-img{
        display: flex;
        height: 450px;
        width: 90%;
        background-color: #f44336;
        margin: 30px 0;
        align-items: center;
        border-radius: 7px;

      }
      .interv-img img{
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 7px;

      }
      .sec-two-top-title {
        height: 100px;
        width: 70%;
        /* background-color: aqua; */
      }
      .choix-services {
        height: 100px;
        width: 70%;
        /* background-color: aqua; */
  
      }
}








/* Comments///Comments///Comments///Comments/// */

.coments{
    min-height: 35rem;
    width:100vw; 
    /* background-color: antiquewhite; */
    display: flex;
align-items: center;
flex-direction: column;
margin-bottom: 10rem;
}
.comment-title{
    height: 100px;
    width: 1536px;
    /* background-color: rgb(77, 170, 150); */
    display: flex;
    justify-content: center;
    align-items: center;
    color:var(--black-1);
    font-size:25px;
    font-weight: 500;

}

.cardmain-comments{
    min-height: 386px;
    width: 95%;
    /* background-color: #4CAF50; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;

}

.card-comment{
    height: 287px;
    width: 388px;
    /* background-color: rgb(133, 91, 36); */
    border-radius: 7px;
    border: solid 1px var(--colorOne);
    margin: 10px;
}

.card-c-top{
    height:30%;
    width:100%;
    /* background-color: aqua; */
}

.cct-title{
    height: 60%;
    width: 100%;
    margin-left: 5px;
    /* background-color: aliceblue; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--black-1);
    font-size: 18px;
}

.cct-likes{
    height: 40%;
    width: 100%;
    /* background-color: rgb(255, 247, 240); */
    display: flex;
    justify-content: center;
    align-items: center;
}.add-commentaire{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    flex-direction: column;
    width: 100%;
    line-height: 5;
    /* background-color: #1F2E40; */
}

.add-commentaire a{
display: flex;
justify-content: center;
align-items: center;
height: 60px;
width: 180px;
background-color: var(--colorOne);
color: var(--white-1);
border-radius: 5px;
transition: 0.2s;
}

.add-commentaire a:hover{
background-color: #1F2E40;
    }   




.add-commentaire span{
color: var(--black-3);
    }




.cct-likes i{
   color:var(--colorOne);
   font-size: 20px;
}

.card-c-milieu{
    height: 50%;
    width: 100%;
    /* background-color: var(--white-2) ; */
    display: flex;
    justify-content: center;
    text-align: center;
   

}

.card-c-milieu p{
   color: var(--black-3);
   font-size: 17px;
   line-height: 1.5;
}

.card-c-name{
    height: 20%;
    width: 100%;
background-color: var(--colorOne);
display: flex;
align-items: center;

}
.card-c-name p{
color: var(--white-2);
margin-left: 10px;


}
.switch{
    height: 25%;
    width: 100%;
    /* background-color: aquamarine; */
    display: flex;
    justify-content:center;
    margin-top: 80px;

}
.btn-switch{
    height:40px;
    width:60px;
border: solid 1px var(--colorOne);
border-radius:5px;
color:var(--black-1);
margin: 0 20px;
display: flex;
justify-content:center;
align-items: center;
cursor: pointer;
}

@media only screen and (max-width:863px){
    .card-comment {
        height: 187px;
        width: 288px;
        /* background-color: rgb(133, 91, 36); */
        border-radius: 7px;
        border: solid 1px var(--colorOne);
        margin: 10px;
      }
      .card-c-milieu p {
        color: var(--black-3);
        font-size: 14px;
        line-height: 1.5;
      }
      .card-c-milieu {
        height: 50%;
        width: 100%;
        /* background-color: var(--white-2); */
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
      }

      .cct-likes i {
        color: var(--colorOne);
        font-size: 17px;
      }

 









}

/* footer///footer///footer///footer/// */
footer{
    min-height: 30rem;
    width: 100vw;
    /* background-color: var(--colorOne); */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 5rem;
}
.footer-container{
    min-height: 396px;
    width: 100%;
    background-color: var(--color-footer);
    display: flex;
}

.fc-left{
    height: 100%;
    width: 30%;
    /* background-color: #f44336; */
}
.logo-ftl{
    height: 50%;
    width: 100%;
    /* background-color: aqua; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-ftl img{
  height: 150px;
  width: 160px;
}
.fc-text{
    height: 50%;
    width: 100%;

}
.fc-text p {
  color: var(--white-1);
  font-size: 17px;
  text-align: justify;
  line-height: 1.7;

}




.fc-text p{
    color: var(--white-1);
    font-size: 17px;
    text-align: justify;
    line-height: 1.7;
    padding: 15px;
}



.fc-right{
    min-height: 236px;
    width: 70%;
    /* background-color: #aa807d; */
    display: flex;
    justify-content: space-between;
}
.droiteone{
    height: 100%;
    width: 32%;
    /* background-color: #4CAF50; */
}

.droite-top{
    height: 70%;
    word-wrap: 100%;
    /* background-color: #e99432; */
}

.dt-title{
    height: 15%;
    width: 100%;
    /* background-color:var(--colorOne); */
    display: flex;
    justify-content: center;
    align-items: center;
}

.dt-title h3{
   color: var(--white-1);
}

.dt-liste{
    height: 85%;
    width: 100%;
    /* background-color: aqua; */
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.NavUserConnectgauche{
  /* background-color: #72195f; */
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 17px;
  position: relative;
}
.NavUserConnectgauche span {
  position: relative;
  padding: 2px 5px;
  background-color: rgb(163, 21, 21);
  color: wheat;
  font-size: 11px;
  border-radius: 50%;
  right: -43px;
  top: -15px;
}
.NavUserConnectgauche a:nth-child(8){
  color: #b3ccfc;
}
.NavUserConnectgauche a:nth-child(8):hover{
  color: #636363;
}
.NavUserConnectgauche a{
margin: 0 20px;
}
.NavUserConnectdroit{
  background-color: #724819;
  height: 100%;
  width: 20%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 17px;
}









.dt-liste a{
color: var(--white-3);
font-size: 17px;
}
.dt-liste a:hover{
padding: 10px 50px ;
border-radius: 5px;
background-color: var(--white-1);
color: var(--colorOne);
    }
.droite-bottom{
    height: 30%;
    width: 100%;
/* background-color: #f44336; */
display: flex;
justify-content: center;
align-items: center;
}

.droite-bottom{
    height: 30%;
    width: 100%;
/* background-color: #f44336; */
display: flex;
justify-content: center;
align-items: center;
}

.droite-bottom a{
display: flex;
height: 60px;
width: 250px;
background-color: var(--white-1);
align-items: center;
justify-content: center;
color: var(--colorOne);
border-radius: 5PX;

}
.droite-bottom a:hover{
    background-color: var(--colorOne);
    color: var(--white-1);
    }
    
.siege{
    min-height: 60%;
    width: 100%;
    /* background-color: #36a794; */
    padding-left: 7px;
    display: flex;
    align-items: center;
    color: var(--white-1);
    font-size: 17px;
    line-height: 2;
}

.follow-title{
    height: 20%;
    width: 100%;
    /* background-color: #4CAF50; */
    display: flex;
align-items: center;
    justify-content: center;
    color: var(--white-1);
}

.droite-bottom2{
    height: 30%;
    width: 100%;
/* background-color: #f44336; */
display: flex;
justify-content: center;
align-items: center;
}
.droite-bottom2 a{
  color: var(--white-1);
  font-size: 20px;
  margin: 0 25px;
  cursor: pointer;
}







/* Page netoyage.html///Page netoyage.html///Page netoyage.html/// */

.project-indique{
    min-height: 40rem;
    width: 100vw;
    /* background-color: antiquewhite; */
    display: flex;
    justify-content: center;

}
.form-container {
    overflow: hidden;
    min-width: 930px;
    min-height: 394px;
    margin: 0 auto;
    padding: 10px;
    box-shadow: 5px 10px 15px 2px rgba(216, 216, 216, 0.3);
    position: relative;
}

.progress-bar {
    position: relative;
    margin-bottom: 20px;
    height: 6%;
    width: 100%;
    /* background-color: #462020; */
}

.form-step1, .form-step2{
    height: 80%;
    width: 100%;
    /* background-color:#f44336 ; */
}


.infos-stape1{
    height: 50%;
    width: 100%;
    /* background-color: aquamarine; */
    display: flex;
    justify-content: space-between;
}


.infos-stape1-left{
    height: 100%;
    width: 50%;
    /* background-color: rgb(189, 255, 127); */
    display: flex;
    justify-content: center;
    flex-direction: column;

}
@media only screen and (max-width:1255px){
    
    .droite-top {
        height: 70%;
        /* background-color: #e99432; */
        width: 98%;
      }
      .droite-bottom {
        height: 30%;
        width: 100%;
        /* background-color: #f44336; */
        display: flex;
        justify-content: left;
        align-items: center;
      }
    .dt-liste {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items:start;
      }
      .fc-text {
        height: 50%;
        width: 86%;
      }
      .dt-title {
        height: 15%;
        width: 100%;
        /* background-color: var(--colorOne); */
        display: flex;
        justify-content: left;
        align-items: center;
      }
      .droite-bottom a {
        display: flex;
        height: 60px;
        width: 167px;
        background-color: var(--white-1);
        align-items: center;
        justify-content: center;
        color: var(--colorOne);
        border-radius: 5PX;
      }
}












.infos-stape1-right{
    height: 100%;
    width: 50%;
    /* padding-top: 36px; */
    /* background-color: rgb(255, 246, 127); */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.infoss1-top{
    height: 45%;
    width: 100%;
    /* background-color: #2196F3; */
    display: flex;
    align-items: flex-end;
    padding-bottom: 10px;
    padding-left: 18px;
    color: var(--black-1);
}
.infoss1-bottom{
    height: 55%;
    width: 100%;
    /* background-color: #75f321; */
    display: flex;

    align-items: flex-start;
}
.suivant-space{
    height: 20%;
    width: 100%;
    /* background-color: #4CAF50; */
    display: flex;
    justify-content: center;
    align-items: flex-end;
}



.red{
    color: rgb(211, 18, 18);
}
.infos-stape1-left input{
    margin-top: 10px;
    display: block;
    height: 55px;
    width: 350px;
    border-radius: 7px;
    border: none;
    cursor: pointer;
    font-size: 17px;
    padding-left: 10px;
    background-color: var(--colorOne);
    color: var(--white-1);

}
.infos-stape1-left label{
    color: var(--black-1);

}



/* Stape-2///Stape-2///Stape-2///Stape-2///Stape-2/// */
.Infos-inputs-clients{
    height: 70%;
    width: 100%;
    /* background-color: #2196F3; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.suivant-space2{
    height: 20%;
    width: 100%;
    /* background-color: #4CAF50; */
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.infos-client-left, .infos-client-right{
    height: 100%;
    width: 50%;
    /* background-color: #4CAF50; */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    

}

.infos-client-left input, .infos-client-right input{
height: 60px;
width: 370px;
padding-left: 7px;
border-radius: 7px;
border: 1px solid var(--black-4);
color: var(--black-1);
font-size: 15px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
.infos-client-left label, .infos-client-right label{
 color: var(--black-1);
 font-size: 17px;
 margin-top: 70px;

    }


/* Autres-footer///Autres-footer///Autres-footer/// */

.autre-footer{
min-height: 3rem;
width: 100vw;
/* background-color: #4CAF50; */
display: flex;
justify-content: center;
align-items: center;
}
.autre-footer a{
color: var(--black-3);
margin: 0 15px;
    }
    
@media only screen and (max-width:1291px){
    .solution-main {
        min-height: 225px;
        width: 80%;
        /* background-color: #4CAF50; */
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
      }
      .card-one-solution {
        margin: 20px 0;
      }

      .sec-one-icone {
        height: 65%;
        width: 1318px;
        /* background-color: aqua; */
        display: flex;
        justify-content: center;
        align-items: flex-end;
      }
      .sec-one-icone-card {
        height:70%;
        width: 280px;
        /* background-color: rgb(43, 255, 0); */
        margin: 0 60px;
      }
      .sec-one-icone-card-bot b {
        font-size: 16px;
        color: var(--black-2);
      }
}



@media only screen and (max-width:1043px){
    .sec-one-icone-card {
        height: 70%;
        width: 207px;
        /* background-color: rgb(43, 255, 0); */
        margin: 0 60px;
      }
      .cercle-sec-one {
        height: 150px;
        width: 150px;
      }
}

@media only screen and (max-width:927px){
    .sec-one-icone {
        height: 65%;
        width: 1318px;
        /* background-color: aqua; */
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .Sec-one {
        height: 46rem;
        width: 100vw;
        /* background-color: var(--colorOne); */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      
}




  .besoin-de-left {
 display: none;
  }

.mob-another-main{
    display: flex;
    min-height: 100px;
    /* background-color: #e04343; */
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.mob-card{
    min-height: 300px;
    width: 90%;
    /* background-color: #4CAF50; */
    margin: 20px 0;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
.mob-top{
    height: 15%;
    width: 100%;
    /* background-color: #f44336; */
    display: flex;
}
.mob-bottom1,.mob-bottom2, .mob-bottom3{
    height: 85%;
    width: 100%;
    display: flex;
    align-items: center;
    /* background-color: #683796; */
}
.mob-bott-left1, .mob-bott-left2, .mob-bott-left3{
    height: 100%;
    width: 70%;
    display: flex;
    align-items: center;
    /* background-color: #1F2E40; */
}
.mob-bott-right1, .mob-bott-right2, .mob-bott-right3{
    height: 185px;
    width: 250px;
    display: flex;
    align-self: flex-end;
    background-color: #31b94f;
border-top-left-radius: 90px;
}



.mob-bott-left1 p,.mob-bott-left2 p,.mob-bott-left3 p{
color: var(--black-3);
line-height: 1.7;
font-size: 17px;
padding: 7px;
text-align: justify;
}
.mob-bott-right1{
background-image: url(../img/Prou1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.mob-bott-right2{
    background-image: url(../img/5g.PNG);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    }

    .mob-bott-right3{
        background-image: url(../img/fusible.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        }
.top-left{
height: 100%;
width: 5px;
background-color: var(--colorOne);
}
.top-right{
    height: 100%;
    width: 99.5%;
  /* background-color: #4CAF50; */
  padding-left: 7px;
  font-size: 30px;
  font-weight: bold;
  color: var(--black-1);
  display: flex;
  align-items: center;
    }
    .footer-container {
        min-height: 396px;
        width: 100%;
        background-color: var(--color-footer);
        display: flex;
        flex-direction: column;
      }
      .fc-left {
        height: 100%;
        width: 100%;
        /* background-color: #f44336; */
        margin-bottom: 2rem;
      }
      .fc-right {
        min-height: 236px;
        width: 100%;
        /* background-color: #aa807d; */
        display: flex;
        justify-content: space-between;
      }
      .fc-text {
        height: 50%;
        width: 100%;
      }
      .droiteone {
        height: 100%;
        width: 32%;
        /* background-color: #4CAF50; */
        padding: 15px;
      }
      .droite-bottom a {
        margin-top: 15px;
      }











}

@media only screen and (max-width:863px){
    .sec-one-icone-card {
        height: 70%;
        width: 207px;
        /* background-color: rgb(43, 255, 0); */
        margin: 0 20px;
      }
      .Title-all-s p {
        font-size: 30px;
        font-weight: bold;
        color: var(--black-1);
      }
      .sweb{
        display: none;
      }
      .smob{
        display: block;
        font-size: 15px;
  color: var(--black-1);
      }
      .choix-services {
        height: 100px;
        width: 100%;
        /* background-color: aqua; */
        display: flex;
        justify-content: space-evenly;
      }
      .serv {
        height: 54px;
        width: 188px;
        display: flex;
        justify-content: center;
        margin: 0 ;
        align-items: center;
        border-radius: 5px;

      }

      .main-card-produit {
        min-height: 585px;
        width: 96%;
        /* background-color: #275f8a; */
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
      }
      .product-img i {
        left: 184px;
        top: 4px;
        font-size: 22px;
        /* background-color: #72195f; */
      }
      .product-card {
        height: 333px;
        width: 231px;
        background-color: white;
        border-radius: 7px;
        margin: 20px 0;
        box-shadow: 5px 10px 15px rgba(143, 143, 143, 0.3);
      }
      .product-infos p {
        color: var(--black-1);
        font-size: 14px;
      }
      .product-infos span {
        color: var(--colorOne);
        font-size: 15px;
      }
      .Sec-one {
        height: 39rem;
        width: 100vw;
        /* background-color: var(--colorOne); */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .product-title {
        height: 70px;
        width: 70%;
        /* background-color: #275f8a; */
        color: var(--black-1);
        font-size: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
}




@media only screen and (max-width:871px){
  .product-img img {
    height: 100px;
    width: 100px;
  }

  .product-card {
    height: 263px;
    width: 205px;
    background-color: white;
  }
  .product-img i {
    left: 164px;
    top: 0px;
    font-size: 22px;
    /* background-color: #72195f; */
  }
.npordi{
  display: none;
}
.npmob{
  display: flex;
}
    .fc-right {
        min-height: 236px;
        width: 100%;
        /* background-color: #aa807d; */
        display: flex;
        justify-content: space-between;
        flex-direction: column;
      }  
      .droiteone {
        height: 20%;
        width: 100%;
        /* background-color: #4CAF50; */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 10px 0;
      }
      .dt-liste a {
        color: var(--white-3);
        font-size: 17px;
        margin: 10px 0;
      }
      .droite-bottom2 {
        height: 100px;
      }
     header{
        display: none;
     }
     .menu{
        display: none;
     }
     nav{
        position: absolute;
        z-index: 1;
        height: 5rem;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: var(--colorOne);
     }
     .navNonConfirm{
      position: absolute;
      z-index: 1;
      height: 5rem;
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--colorOne);
     }

     nav img{
      height: 50px;
      width: 55px;
      margin-right: 15px;
     }
     nav i{
  font-size: 40px;
  color: var(--white-1);
  margin-left: 10px;
  cursor: pointer;
     }
     .burger {
        min-height: 100vh;
        width: 70vw;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 11;
        display: flex;
        flex-direction: column;
        background-color: var(--colorOne); /* Couleur avec transparence */
        backdrop-filter: blur(10px); /* Ajoute un flou à l'arrière-plan */
        transform: translateX(-100%); /* Hors de l'écran par défaut */
        transition: transform 0.5s ease; /* Animation de glissement fluide */
    }
    
    .burger.open {
        transform: translateX(0); 
    }
    
     .burger-top1{
        height: 80px;
        width: 100%;
        background-color: #1F2E40;
        display: flex;
     }

.bt-gauche{
    height: 100%;
    width: 70%;
    /* background-color: #f44336; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.bt-gauche h4{
color: var(--white-1);
}
.bt-droit{
    height: 100%;
    width: 30%;
    /* background-color: #3b8b53; */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.bt-droit i{
font-size: 30px;
color: var(--white-3);
}
.burgerNameUser{
    height: 80px;
    width: 100%;
    /* background-color: #f44336; */
    display: flex;
    align-items: center;
    justify-content: center;
}
.burgerNameUser p{
color: var(--white-1);
font-size: 20px;
font-weight: bold;
}
.tous-products {
  margin-top: 6rem;
}
.list-menu{
    height: 500px;
    width: 100%;
    /* background-color: #f44336; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.list-menu a{
display: flex;
justify-content: center;
align-items: center;
height: 15%;
color: var(--white-1);
font-size: 17px;
}






.main-container {
  margin-top: 7rem;
}
.list-menu a:hover{
    position: absolute;
 color: var(--colorOne);
    }
    
.disconnect{
    height: 100px;
    width: 100%;
    /* background-color: #f44336; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.disconnect a{
color: var(--white-1);
font-size: 17px;
}
.solution-main {
    min-height: 225px;
    width: 100%;
    /* background-color: #4CAF50; */
  }
  .card-one-solution {
    height: 259px;
    width: 95%;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    display: flex;
  }
  .main-2-cont {
    height: 100%;
    width: 100%;
    /* background-color: rgb(43, 116, 226); */
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  main {
    min-height: 30rem;
    margin-bottom: 0rem;
  }
  .title-solution {
    height: 7rem;
    width: 100vw;
    /* background-color: aqua; */
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
}


@media only screen and (max-width:660px){
  .product-card {
    height: 218px;
    width: 181px;
    background-color: white;
  }

  .product-img i {
    left: 141px;
    top: 0px;
    font-size: 22px;
    /* background-color: #72195f; */
    font-size: 17px;
  }
  .tous-products h1{
  font-size: 25px;
  color: var(--black-2);
  }

}


@media only screen and (max-width:585px){
  .product-card {
    height: 299px;
    width: 232px;
    background-color: white;
  }
  .product-img i {
    left: 183px;
    top: 0px;
    font-size: 20px;
  }
  .product-img img {
    height: 120px;
    width: 120px;
  }







}








@media only screen and (max-width:510px){
  nav img {
    height: 30px;
    width: 35px;
    margin-right: 15px;
  }
  nav i {
    font-size: 27px;
    color: var(--white-1);
    margin-left: 10px;
    cursor: pointer;
  }
}
@media only screen and (max-width:553px){
    .slogan {
        font-size: 14px;
        line-height: 1.5;
        color: var(--black-1);
        text-align: center;
      }
      .Title-all-s p {
        font-size: 26px;
        font-weight: bold;
        color: var(--black-1);
      }
      .smob {
        display: block;
        font-size: 12px;
        color: var(--black-1);
      }
      .mob-bott-left1 p, .mob-bott-left2 p, .mob-bott-left3 p {
        color: var(--black-3);
        line-height: 1.5;
        font-size: 14px;
        padding: 7px;
        text-align: justify;
      }
      .cardSs-btn a {
        height: 44px;
        width: 168px;
      }
      .top-right {
        font-size: 21px;

      }
      .main2-chil {
        height: 100%;
        width: 100%;
        /* background-color: blueviolet; */
        display: flex;
        justify-content: center;
      }
      .main-2-card {
        height: 50%;
        width: 245px;
        /* background-color: brown; */
        margin: 0 10px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .m2right b {
        font-size: 19px;
        color: var(--black-3);
    }
      .m2right {
        height: 100%;
        width: 97%;
        /* background-color: aliceblue; */
        display: flex;
        justify-content: center;
        flex-direction: column;
        line-height: 33px;
        text-align: center;
      }
      .Sec-one {
        min-height: 39rem;
        width: 100vw;

      }
      .serv {
        height: 54px;
        width: 120px;
        display: flex;
        justify-content: center;
        margin: 0;
        align-items: center;
        border-radius: 5px;
        font-size: 12px;
      }
      .sec-one-title {
        font-size: 22px;
      }
      .sec-one-icone {
        min-height: 405px;
        width: 100%;
        /* background-color: aqua; */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
      }

}

@media only screen and (max-width:703px){
    .sec-one-icone-card {
        height: 70%;
        width: 152px;
        /* background-color: rgb(43, 255, 0); */
        margin: 0 20px;
      }
      .sec-one-icone-card-bot b {
        font-size: 14px;
        color: var(--black-3);
      }
      .Title-all-s p {
        font-size: 26px;
        font-weight: bold;
        color: var(--black-1);
      }
}

@media only screen and (max-width:553px){
    .sec-one-icone {
        height: 1539px;
        width: 100%;
        /* background-color: aqua; */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
      }
      .sec-one-title {
        font-size: 22px;
        height: 190px;
        width: 100%;
        /* background-color: rebeccapurple; */
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .sec-one-icone-card {
        height: 283px;
        width: 40%;
        /* background-color: rgb(43, 255, 0); */
        margin: 0 20px;
      }
      .secfour-title {
        height: 60px;
        width: 90%;
        /* background-color: rgb(41, 122, 122); */
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        color: var(--black-1);
        font-weight: 500;
      }
      .card-client {
        height: 79px;
        width: 227px;
        background-color: white;
        border-radius: 7px;
        display: flex;
        margin: 0;
        justify-content: center;
        align-items: center;
      }

    }
  













@media only screen and (max-width:652px){
    .cardmain-comments {
        min-height: 386px;
        width: 95%;
        /* background-color: #4CAF50; */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
      }
    .card-comment {
        height: 229px;
        width: 228px;
        /* background-color: rgb(133, 91, 36); */
        border-radius: 7px;
        border: solid 1px var(--colorOne);
        margin: 10px;
      }
      .secfour-title {
        font-size: 16px;
      }
      .cct-title {
        height: 60%;
        width: 100%;
        margin-left: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--black-1);
        font-size: 14px;
      }
}

@media only screen and (max-width: 421px) {
    .slogan {
      font-size: 15px;
      line-height: 1.5;
      color: var(--black-1);
      text-align: left;
    }
    .you-title h2 {
        font-size: 31px;
        color: var(--black-1);
      }
      
      .cardSs-btn {
        min-height: 80px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        /* background-color: #af6b4c; */
      }
      .card-one-solution {
        height: 293px;
        width: 90%;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        display: flex;
      }
      .sec-one-title {
        font-size: 17px;
      }
  }
@media only screen and (max-width:526px){
    .cardmain-comments {
        min-height: 386px;
        width: 100%;
        /* background-color: #4CAF50; */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
      }

      .card-comment {
        height: 277px;
        width: 146px;
        /* background-color: rgb(133, 91, 36); */
        border-radius: 7px;
        border: solid 1px var(--colorOne);
        margin: 10px;
      }
      
      .product-card {
        height: 207px;
        width: 134px;
        /* background-color: white; */
        border-radius: 7px;
        margin: 20px 0;
        box-shadow: 5px 10px 15px rgba(143, 143, 143, 0.3);
      }
      .product-img {
        height: 60%;
        width: 100%;
        /* background-color: #4CAF50; */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
      }
      .product-img img {
        height: 75px;
        width: 75px;
      }
      .product-infos {
        height: 40%;
        width: 100%;
        box-shadow: 5px 10px 15px rgba(238, 238, 238, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1.5;
        flex-direction: column;
      }
      .product-img i {
        left: 99px;
        top: 0px;
        font-size: 15px;
      }
      
      .product-infos p {
        color: var(--black-1);
        font-size: 11px;
        font-weight: bold;
        /* margin-bottom: 10px; */
      }
      .card-one-solution {
        min-height: 559px;
        width: 85%;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        display: flex;
        /* background-color: rebeccapurple; */
        flex-direction: column;
      }
      .solution-main {
        min-height: 225px;
        width: 100%;
        /* background-color: #4CAF50; */
      }
      .main-2-card {
        height: 50%;
        width: 125px;
        /* background-color: brown; */
        margin: 0 10px;
        display: flex;
        justify-content: center;
        align-items: center;
      } 
      .m2lef {
        height: 50%;
        width: 3px;
        background-color: var(--colorOne);
      }
      .m2right b {
        font-size: 18px;
        color: var(--black-3);
      }
.cardSolution-left {
  min-height: 50%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
.mob-card {
    min-height: 451px;
    width: 90%;
    /* background-color: #4CAF50; */
    padding: 20px 0;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  }
.cardSolution-right {
    min-height: 50%;
    width: 100%;
    background-color: #1F2E40;
  }
  .mob-bottom1, .mob-bottom2, .mob-bottom3 {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    /* background-color: #683796; */
    flex-direction: column;
  }
  .mob-bott-left1 p, .mob-bott-left2 p, .mob-bott-left3 p {
    color: var(--black-3);
    line-height: 1.5;
    font-size: 14px;
    padding: 0 10px;
    text-align: justify;
  }
  .mob-bott-left1, .mob-bott-left2, .mob-bott-left3 {
    height: 40%;
    width: 100%;
    display: flex;
    align-items: center;
    /* background-color: #1F2E40; */
  }
  .mob-top {
    height: 10%;
    width: 100%;
    /* background-color: #f44336; */
    display: flex;

  }

  .mob-bott-right1, .mob-bott-right2, .mob-bott-right3 {
    height: 60%;
    width: 100%;
    display: flex;
    align-self: flex-end;
    /* background-color: #31b94f; */
    border-top-left-radius: 0;
  }

  .mob-bott-right3 {
    background-image: url(../img/tableau.png);
    background-position: center;
    background-size: cover;
  }
  .choix-card-a1 a {
    height: 166px;
    width: 189px;
    display: block;
    /* background-color: var(--white-1); */
    box-shadow: 5px 10px 15px rgba(143, 143, 143, 0.3);
    border-radius: 7px;
  }
  .plus-serv a {
    height: 65px;
    width: 250px;
    background-color: var(--colorOne);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white-1);
    font-size: 17px;
  }
  .a1-bott b {
    color: var(--black-1);
    font-size:12px;
    
  }
  .a1-bott span {
    color: var(--black-3);
    font-size: 10px;
    font-weight: bold;
  }
  .autre-footer a {
    color: var(--black-3);
    margin: 0 10px;
    text-align: center;
    font-size: 12px;
  }
  .cercle-sec-one {
    height: 120px;
    width: 120px;
  }
  .sec-one-icone-card-bot b {
    font-size: 11px;
    color: var(--black-3);
  }
  .card-comment {
    height: 277px;
    width: 199px;
    /* background-color: rgb(133, 91, 36); */
    border-radius: 7px;
    border: solid 1px var(--colorOne);
    margin: 10px;
  }
  .card-c-milieu p {
    color: var(--black-3);
    font-size: 14px;
    line-height: 1.5;
    padding: 0 2px;
  }

}

@media only screen and (max-width:447px){
  .product-card {
    height: 232px;
    width: 186px;
  }
  .product-img i {
    left: 149px;
    top: 0px;
    font-size: 15px;
  }
  .tous-products h1 {
    font-size: 20px;
    color: var(--black-2);
  }
}

@media only screen and (max-width:409px){
  .product-card {
    height: 232px;
    width: 170px;
  }
  .product-img i {
    left: 132px;
    top: 0px;
    font-size: 15px;
  }

}

@media only screen and (max-width:373px){
  .product-card {
    height: 195px;
    width: 147px;
  }
  .product-img i {
    left: 116px;
    top: 0px;
    font-size: 15px;
  }
  .product-img img {
    height: 65px;
    width: 65px;
  }
}

@media only screen and (max-width:317px){
  .product-card {
    height: 153px;
    width: 126px;
  }

  .product-img i {
    left: 97px;
    top: 4px;
    font-size: 15px;
  }

  .product-img img {
    height: 60px;
    width: 60px;
  }



}













@media only screen and (max-width:480px){
    .Title-all-s p {
        font-size: 17px;
        font-weight: bold;
        color: var(--black-1);
      }
      .sec-one-title {
        font-size: 17px;
      }
      .mob-bott-left1, .mob-bott-left2, .mob-bott-left3 {
        height: 60%;
        width: 100%;
        display: flex;
        align-items: center;
        /* background-color: #1F2E40; */
      }
      .mob-bottom1, .mob-bottom2, .mob-bottom3 {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        /* background-color: #683796; */
        flex-direction: column;
        justify-content: end;
      }
      .mob-bott-right1, .mob-bott-right2, .mob-bott-right3 {
        height: 60%;
        width: 100%;
        display: flex;
        align-self: flex-end;
        align-self: start;
      }
      .mob-bott-right2,     .mob-bott-right3,     .mob-bott-right1 {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
      }
      .mob-top {
        margin-bottom: 12px;
      }
  
      .m2right b {
        font-size: 15px;
        color: var(--black-3);
      }
      .choix-card-a1 a {
        height: 143px;
        width: 165px;
        display: block;
        background-color: var(--white-1);
        box-shadow: 5px 10px 15px rgba(143, 143, 143, 0.3);
        border-radius: 7px;
      }
      .plus-serv a {
        height: 63px;
        width: 200px;
        background-color: var(--colorOne);
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--white-1);
        font-size: 17px;
      }
      .a1-bott {
        height: 30%;
        width: 100%;
        text-align: center;
        line-height: 0.85;
      }
      .product-title {
        height: 70px;
        width: 70%;
        /* background-color: #275f8a; */
        color: var(--black-1);
        font-size: 25px;
        padding-left: 0;
        display: flex;
        align-items: flex-end;
      }
}

@media only screen and (max-width:416px){
    .sec-four {
        min-height: 16rem;
        width: 100vw;
        /* background-color: black; */
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-bottom: 3rem;
      }
    .slogan {
        font-size: 13px;
        line-height: 1.5;
        color: var(--black-1);
        text-align: center;
      }
      .client-confiant {
        min-height: 200px;
        width: 90%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
        border-radius: 7px;
        flex-wrap: wrap;
        /* background-color: rebeccapurple; */
    }
      .card-client {
        height: 40px;
        width: 96px;
        /* background-color: white; */
        border-radius: 7px;
        display: flex;
        margin: 5px;
        justify-content: center;
        align-items: center;
      }
      
      .sec-four {
 
        margin-bottom: 0;
      }
      .card-c-name {
        height: 20%;
        width: 100%;
        background-color: var(--colorOne);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .all-product a {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 66px;
        width: 169px;
        font-size: 18px;
        border-radius: 7px;
        background-color: var(--colorOne);
        color: var(--white-1);
        text-align: center;
      }
      .card-comment {
        height: 277px;
        width: 151px;
        /* background-color: rgb(133, 91, 36); */
        border-radius: 7px;
        border: solid 1px var(--colorOne);
        margin: 10px;
      }
      .cct-title {
        height: 60%;
        width: 100%;
        margin-left: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--black-1);
        font-size: 11px;
      }
      .all-product a {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 66px;
        width: 169px;
        font-size: 14px;
        border-radius: 7px;
        background-color: var(--colorOne);
        color: var(--white-1);
        text-align: center;
      }
      .comment-title {
        height: 100px;
        width: 1536px;
        /* background-color: rgb(77, 170, 150); */
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--black-1);
        font-size: 20px;
        font-weight: 500;
      }
}
@media only screen and (max-width:691px){
  .m2right b {
    font-size: 19px;
    color: var(--black-1);
  }
}

@media only screen and (max-width:431px){
  .m2right b {
    font-size: 17px;
    color: var(--black-1);
  }
}





@media only screen and (max-width:399px){
        .serv {
          height: 42px;
          width: 74px;
          display: flex;
          justify-content: center;
          margin: 0;
          align-items: center;
          border-radius: 5px;
          font-size: 12px;
          
        }
        .secfour-title {
            font-size: 12px;
          }
        .serv {
            height: 42px;
            width: 74px;
            display: flex;
            justify-content: center;
            margin: 0;
            align-items: center;
            border-radius: 5px;
            font-size: 8px;
            text-align: center;
            font-weight: bold;
          }
          .sec-one-icone-card {
            height: 245px;
            width: 20%;
            /* background-color: rgb(43, 255, 0); */
            margin: 0 20px;
          }
          .sec-one-icone-card-top {
            height: 30%;
            width: 100%;
            /* background-color: blueviolet; */
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .cercle-sec-one {
            height: 60px;
            width: 60px;
          }
          .sec-one-icone {
            height: 327px;
            width: 100%;
            /* background-color: aqua; */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
          }
}

@media only screen and (max-width:396px){
  .m2right b {
    font-size: 15px;
    color: var(--black-3);line-height: 1;
  }
}
@media only screen and (max-width:363px){
 
      
      .smob {
        display: none;
  
      }
      .smob2 {
        display: block;
        font-size: 12px;
        color: var(--black-1);
        padding: 0 10px;
      }
      .sec-one-title {
        font-size: 22px;
        height: 27px;
        width: 100%;
        /* background-color: rebeccapurple; */
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .sec-one-title {
        font-size: 14px;
      }
}

@media only screen and (max-width:963px){
    .form-container {
        /* overflow-y: hidden; */
        min-width: 90%;
        min-height: 394px;
        margin: 0 auto;
        padding: 10px;
        box-shadow: 5px 10px 15px 2px rgba(216, 216, 216, 0.3);
        position: relative;
      }
}




    /* Step-7///    Step-7///    Step-7/// */

.step7-title{
    height: 60px;
    width: 100%;
    /* background-color: #4CAF50; */
    line-height: 1.5;
}
.step7-title h2{
 color: var(--black-1);
}
.step7-title span{
    color: var(--black-3);
   }
.area{
    height: 250px;
    width: 100%;
    /* background-color: #4CAF50; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.area textarea{
resize: none;
display: flex;
color: var(--black-2);
width: 90%;
height: 200px;
padding: 7px;
border-radius: 7px;
border: 1px solid var(--black-4);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
.autres-infos{
    height: 100px;
    width: 100%;
    /* background-color: #4CAF50; */
    display: flex;
    justify-content: center;
}
.autres-infos-left{
    height: 100%;
    width: 45%;
    /* background-color: #f44336; */
    display: flex;
    flex-direction: column;
}
.autres-infos-left input[type="text"]{
    height: 60px;
    width: 350px;
    border: 1px solid var(--black-4);
    border-radius: 5px;
    margin-top: 7px;
    font-size: 16px;
    color: var(--black-2);
    padding-left: 7px;
}

.autres-infos-left label{
    color: var(--black-1);
}

.autres-infos-right{
    height: 100%;
    width: 45%;
    /* background-color: aqua; */
    display: flex;
    justify-content: space-between;
}



/* Step-3///Step-3///Step-3///Step-3///Step-3/// */

.form-step3, .form-step4, .form-step5, .form-step6, .form-step7{
    min-height: 450px;
    width: 1000px;
    /* background-color:#a51308 ; */
}
.fs1-title3{
    height: 90px;
    width: 100% ;
    /* background-color: #4CAF50; */
    display: flex;
    flex-direction: column;
    line-height: 1.5;

}

.fs1-title3 p {
    color: var(--black-1);
    font-size: 25px;
    font-weight: 500;
  }
  .fs1-title3 span{
    color: var(--black-1);
    font-size: 15px;
  }
.main-card-prestation{
    height: 355px;
    width: 95%;
    /* background-color: rgb(172, 98, 1); */
    display: flex;
    /* justify-content: center; */
}
.formule-prestation{
    height: 100%;
    width: 32%;
    background-color: #4CAF50;
}

/* Step-5///Step-5///Step-5///Step-5///Step-5/// */

.Infos-inputs-s5{
    height: 107px;
    width: 100%;
    /* background-color: #2196F3; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.group-inputlabel{
    height: 100%;
    width: 35%;
    /* background-color: #4c98af; */
    display: flex;
    flex-direction: column;

    justify-content: center;
}
.suivant-space2{
    height: 20%;
    width: 100%;
    /* background-color: #4CAF50; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.Infos-inputs-s5 input{
height: 60px;
width: 270px;
padding-left: 7px;
border-radius: 7px;
border: 1px solid var(--black-4);
color: var(--black-1);
font-size: 15px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
margin-top: 7px;
}
.Infos-inputs-s5 label{
 color: var(--black-1);
 font-size: 17px;


    }
/* Etat de piece///Etat de piece///Etat de piece///Etat de piece/// */

.etat-piece{
    height: 270px;
    width: 100%;
    /* background-color: #4c98af; */
}

.etat-title{
    display: flex;
    height: 30%;
    width: 100%;
    /* background-color: #aaf321; */
    display: flex;
    flex-direction: column;
    justify-content: end;
}


.etat-title h2{
  color: var(--black-1);
}
.etat-descript{
    height: 70%;
    width: 100%;
    /* background-color: #afa04c; */
    display: flex;
    justify-content: space-between;
}

.etat-title span{
    font-size: 16px;
    color: var(--black-1);
    }
/* Card-choix-formule///Card-choix-formule///Card-choix-formule/// */

.card-container {
    display: flex;
flex-wrap: wrap;
justify-content: space-between;
    min-height: 40%;
    width: 95%;
/* background-color: #4CAF50; */
    padding: 20px;
    box-sizing: border-box;
}


.card-container-3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  min-height: 313px;
  width: 95%;
  /* background-color: #4CAF50; */
  padding: 20px;
  box-sizing: border-box;
}
.card-container-elec {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  min-height: 313px;
  width: 100%;
  /* background-color: #4CAF50; */
  padding: 20px;
  box-sizing: border-box;
}
@media only screen and (max-width:953px){
  .card-container-elec {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    min-height: 513px;
    width: 100%;
    /* background-color: #4CAF50; */
    padding: 20px;
    box-sizing: border-box;
  }
}
@media only screen and (max-width:573px){
  .card-container-elec {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    min-height: 613px;
    width: 100%;
    /* background-color: #4CAF50; */
    padding: 20px;
    box-sizing: border-box;
  }
}

@media only screen and (max-width:473px){
  .card-container-elec {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    min-height: 670px;
    width: 100%;
    /* background-color: #4CAF50; */
    /* padding: 20px; */
    box-sizing: border-box;
  }



}

.card-container-4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 200px;
  width: 95%;
  /* background-color: #4CAF50; */
  padding: 20px;
  box-sizing: border-box;
}


.card-container-nettoyage {
    display: flex;
flex-wrap: wrap;
justify-content: left;
    min-height: 40%;
    width: 95%;
/* background-color: #afa04c; */
    /* padding: 20px; */
    box-sizing: border-box;
}
.card-container-nettoyage-2 {
  display: flex;
flex-wrap: wrap;
justify-content: left;
  min-height: 100%;
  width: 95%;
/* background-color: #7a4caf; */
  /* padding: 20px; */
  box-sizing: border-box;
}

@media only screen and (max-width:431px){
  .etat-title span {
    font-size: 13px;
    color: var(--black-1);
  }
  .fs1-title3 span {
    color: var(--black-1);
    font-size: 13px;
  }
  .fs1-title3 p {
    color: var(--black-1);
    font-size: 17px;
    font-weight: 500;
  }

  .etat-title h2{
    color: var(--black-1);
    font-size: 17px;
  }
}
@media only screen and (max-width: 349px) {
  .etat-title span {
    font-size: 11px;
    color: var(--black-1);
  }
  .fs1-title3 span {
    color: var(--black-1);
    font-size: 11px;
  }
}



.radio-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
}

.radio-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.radio-item label {
    border: 1px solid var(--black-4);
    padding: 15px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    background-color: #fff;
    transition: background-color 0.3s, padding-left 0.3s;
}

.radio-item input[type="checkbox"]:checked + label {
    background-color:var(--colorOne);
    color: var(--white-1);
    padding-left: 35px; /* Augmente la taille pour faire de la place pour le symbole */
}

.radio-item input[type="checkbox"]:checked + label::before {
    content: "✔";
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: white;
    font-size: 20px; /* Agrandit le symbole */
}




.radio-item {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    position: relative;
    margin: 0 5px;
  }



/* CONNEXION-FORMS */

.connect-container{
    min-height: 40rem;
    width: 100vw;
    /* background-color: #4CAF50; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5rem;
}

.cart-forms{
    min-height: 300px;
    width: 800px;
    /* background-color: #f44336; */
}
.forms-title{
    height: 116px;
    width: 100%;
    /* background-color: aqua; */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black-2);
}
.container-forms{
    /* height: 50%; */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
    /* background-color: bisque; */

}
.container-forms input[type="text"],.container-forms input[type="password"] {
height: 75px;
width: 450px;
margin: 15px 0;
padding-left:10px ;
color: var(--black-1);
font-size: 16px;
outline: none;
border-radius: 7px;
border: 1px solid var(--black-4);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
.btn-go{
    height: 15%;
    width: 100%;
    /* background-color: brown; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-go input[type="submit"]{
height: 60px;
width: 250px;
border: none;
outline: none;
color: var(--white-1);
font-size: 17px;
cursor: pointer;
border-radius: 4px;
background-color: var(--black-1);
}
.btn-go input[type="submit"]:hover{
    color: var(--white-1);
    background-color: var(--colorOne);
    }
    
.mdp-oublie{
    height: 90px;
    width: 100%;
    /* background-color: #4CAF50; */
    display: flex;
    justify-content: center;

}
    
.mdp-oublie-card{
    height: 100%;
    width: 450px;
    /* background-color: #91af4c; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mdp-oublie-card a{
color: var(--black-1);
}
.desc{
    font-size: 13px;

}
.card input[type="checkbox"]:checked + .card-content {
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.2);
    transform: scale(1.01);
    height: 100%;
    /* border: solid 1px rgb(0, 255, 110); */
}

.card h3 {
color: var(--white-1);
    font-size: 20px;
}
.card span{
    color: rgb(177, 177, 177);


}
.card ul {
margin-top: 20px;
color: rgb(153, 123, 111);
}

.card ul li {
    margin-bottom: 5px;
    font-size: 16px;
}

.card ul li i{
color:var(--gray);
}










@media only screen and (max-width:871px){
  .cart-forms {
    min-height: 300px;
    width: 800px;
    /* background-color: #f44336; */
    margin-top: 5rem;
  }
}

@media only screen and (max-width:496px){
  .forms-title {
    height: 100px;
    width: 100%;
    /* background-color: aqua; */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black-2);
  }
  .forms-title h1{
   font-size: 20px;
  }

  .container-forms input[type="text"], .container-forms input[type="password"] {
    height: 65px;
    width: 90%;
   
  }
  .mdp-oublie-card a {
    color: var(--black-3);
  }
  .mdp-oublie-card {
    height: 100%;
    width: 90%;
  }
}

@media only screen and (max-width:373px){
  .mdp-oublie-card a {
    color: var(--black-3);
    font-size: 13px;
  }
}




/* Input radio///Input radio///Input radio///Input radio/// */


.radio-option {
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.radio-option input[type="radio"] {
    display: none; 

}

.radio-option label {
    position: relative;
    /* padding-left: 30px; */
    cursor: pointer;
    font-size: 16px;
    line-height: 22px;

    background-color: #f4f4f4;
    border: 1px solid var(--colorOne);
    border-radius: 4px;
    padding: 15px;
    display: inline-block;
    transition: background-color 0.3s, border-color 0.3s;
}

/* Styles du bouton radio personnalisé */
.radio-option input[type="radio"]:checked + label {
    background-color: var(--colorOne);
border: none;
    color: #fff;
    padding: 16px;
    border: none;
}

@media only screen and (max-width:480px){
  .radio-item input[type="checkbox"]:checked + label {
    background-color: var(--colorOne);
    color: var(--white-1);
    padding-left: 28px;
  }
  .fs1-title3 {
    height: 71px;
    width: 100%;
    /* background-color: #4CAF50; */
    display: flex;
    flex-direction: column;
    line-height: 1.5;
  }

  .radio-item label {
    font-size: 15px;
  }



}


@media only screen and (max-width:442px){
  .radio-item {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    position: relative;
    margin:0;
  
}
.radio-item input[type="checkbox"]:checked + label {
  background-color: var(--colorOne);
  color: var(--white-1);
  padding-left: 3px;
}
.radio-item label {
  font-size: 13px;
}

.radio-item input[type="checkbox"]:checked + label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 111px;
  transform: translateY(-50%);
  color: white;
  font-size: 13px;
}

.card-container-nettoyage {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 544px;
  width: 100%;
  /* background-color: #afa04c; */
  padding: 20px;
  box-sizing: border-box;
}
}



/* Création du cercle personnalisé */
.radio-option label::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 47%;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: #fff;
    transition: background-color 0.3s;
    text-align: center;
  }

/* Cercle intérieur lorsqu'il est sélectionné */
.radio-option input[type="radio"]:checked + label::before {
    background-color: var(--white-1);


}
@media only screen and (max-width:833px){
    .radio-option label {
        position: relative;
        padding-left: 30px;
        cursor: pointer;
        font-size: 16px;
        line-height: 22px;
        /* background-color: #f4f4f4; */
        border: 1px solid var(--colorOne);
        border-radius: 4px;
        padding: 15px;
        display: inline-block;
        transition: background-color 0.3s, border-color 0.3s;
        font-size: 15px;
      }
      .infos-stape1 {
        height: 50%;
        width: 100%;
        /* background-color: aquamarine; */
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;

      }
      .infoss1-top {
        height: 45%;
        width: 100%;
        /* background-color: #2196F3; */
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 10px;
        padding-left: 0;
        color: var(--black-1);
      }
      .radio-option {
        display: flex;
        align-items: center;
        padding: 0;
      }
      .infoss1-bottom {
        height: 55%;
        width: 360px;
        /* background-color: #75f321; */
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
      }
}

@media only screen and (max-width:871px){
    .progress-bar {
        position: relative;
        margin-bottom: 20px;
        height: 6%;
        width: 100%;
        /* background-color: #462020; */
        margin-top: 5rem;
      }
      .headerAdmin{
        display: flex;
      }
}

@media only screen and (max-width:703px){
    .infos-stape1-right {
        height: 60%;
        width: 100%;
        /* background-color: rgb(255, 246, 127); */
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .infos-stape1-left {
        height: 100%;
        width: 100%;
        /* background-color: rgb(189, 255, 127); */
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
      }
      .infoss1-bottom {
        height: 55%;
        width: 100%;
        /* background-color: #75f321; */
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
      }
      .fs1-title p {
        color: var(--black-2);
        font-size: 20px;
        font-weight: 500;
      }
      .infos-stape1-left label {
        color: var(--black-1);
        display: none;
      }
    
}
/* Éviter que le texte du label dépasse */
.radio-option label {
    overflow: hidden;
}


.fs1-title{
    display: flex;
align-items: flex-end;
    height: 10%;
    width: 100%;
    /* background-color: #2196F3; */
}
.fs1-title p{
  color: var(--black-1);
  font-size: 25px;
  font-weight: 500;
}
.progress {
    margin-top: 2rem;
    margin-bottom: 1rem;
    width: 0;
    height: 5px;
    background-color:var(--colorOne);
    transition: width 0.3s;
}

.step-indicators {
    display: flex;
    justify-content: space-between;
}

.step {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ddd;
    color: #fff;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
    font-weight: bold;
}

.step.active {
    background-color: #4CAF50;
}

.form-step{
    display: none;
}

.form-step.active {
    display: block;
}
@media only screen and (max-width:833px){
}
.fs1-title p {
  color: var(--black-2);
  font-size: 25px;
  font-weight: 500;
}
button {
    padding: 20px 90px;
    margin: 10px;
    border: none;
    border-radius: 5px;
    color:var(--white-1);
    font-size: 17px;
    background-color: var(--colorOne);
    cursor: pointer;
}
button:hover {
    background-color: var(--colorOne-hover);

}
button.prev-btn {
    background-color: var(--black-1);
}
button.prev-btn:hover{
    background-color:#f44336;
}

button.submit-btn {
    background-color: green;
}

button:disabled {
    background-color: #ddd;
    cursor: not-allowed;
}
@media only screen and (max-width:651px){
    .fs1-title p {
        color: var(--black-2);
        font-size: 20px;
        font-weight: 500;
      }
      .fs1-title {
        display: flex;
        align-items: flex-end;
        height: 10%;
        width: 100%;
        /* background-color: #2196F3; */
        justify-content: center;
      }
}


@media only screen and (max-width:715px){
    button {
        padding: 20px 30px;
        margin: 0 60px;
        border: none;
        border-radius: 5px;
        color: var(--white-1);
        font-size: 17px;
        background-color: var(--colorOne);
        cursor: pointer;
      }
      .suivant-space2 {
        height: 20%;
        width: 100%;
        /* background-color: #4CAF50; */
        display: flex;
        justify-content: center;
        align-items: center;
      }
}


@media only screen and (max-width:507px){
    .fs1-title p {
        color: var(--black-2);
        font-size: 17px;
        font-weight: 500;
      }
 
}
@media only screen and (max-width:434px){
    .fs1-title p {
        color: var(--black-2);
        font-size: 15px;
        font-weight: 500;
      }
 
}
@media only screen and (max-width:385px){
    .fs1-title p {
        color: var(--black-2);
        font-size: 13px;
        font-weight: 500;
      }
      .infos-stape1-left input {
        margin-top: 10px;
        display: block;
        height: 55px;
        width: 268px;
        border-radius: 7px;
        border: none;
        cursor: pointer;
        font-size: 17px;
        padding-left: 10px;
        background-color: var(--colorOne);
        color: var(--white-1);
      }
      .radio-option label {
        position: relative;
        padding-left: 30px;
        cursor: pointer;
        font-size: 16px;
        line-height: 22px;
        background-color: #f4f4f4;
        border: 1px solid var(--colorOne);
        border-radius: 4px;
        padding: 15px;
        display: inline-block;
        transition: background-color 0.3s, border-color 0.3s;
        font-size: 11px;
      }
      button {
        padding: 15px 50px;
        margin: 10px;
        border: none;
        border-radius: 5px;
        color: var(--white-1);
        font-size: 17px;
        background-color: var(--colorOne);
        cursor: pointer;
      }
}

@media only screen and (max-width:861px){
    .Infos-inputs-clients {
        height: 70%;
        width: 100%;
        /* background-color: #2196F3; */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
      .infos-client-left, .infos-client-right {
        height: 50%;
        width: 386px;
        /* background-color: #4CAF50; */
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: left;

      }
      .infos-client-left label, .infos-client-right label {
        color: var(--black-2);
        font-size: 17px;
        margin-top: 40px;
    
    }
    
    .infos-client-left{
        /* background-color: #f44336; */
      }

      .fs1-title {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 10%;
        width: 100%;
        /* background-color: #2196F3; */
      }

      .infos-client-left input, .infos-client-right input {
        height: 112px;
        width: 370px;
        padding-left: 7px;
        border-radius: 7px;
        margin-top: 5px;
        border: 1px solid var(--black-4);
        color: var(--black-1);
        font-size: 15px;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
      }


      @media only screen and (max-width:403px){
        .infos-client-left input, .infos-client-right input {
            height: 85px;
            width: 292px;
            padding-left: 7px;
            border-radius: 7px;
            margin-top: 5px;
            border: 1px solid var(--black-4);
            color: var(--black-1);
            font-size: 15px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
          }
          .infos-client-left, .infos-client-right {
            height: 50%;
            width: 386px;
            /* background-color: #4CAF50; */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: left;
            align-items: center;
          }
          button {
            padding: 12px 30px;
            margin: 0 20px;
            border: none;
            border-radius: 5px;
            color: var(--white-1);
            font-size: 17px;
            background-color: var(--colorOne);
            cursor: pointer;
          }
          .fs1-title p {
            color: var(--black-2);
            font-size: 21px;
            font-weight: 500;
          }
    }



}

  


/* Step4///Step4///Step4///Step4///Step4///Step4///Step4///Step4/// */
/* 
Nous-contacter///Nous-contacter///Nous-contacter/// */
.main-container{
    min-height: 62rem;
    width: 100vw;
    /* background-color: #4CAF50; */
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    padding-top: 30px;
}

.mid-container{
    height: 900px;
    width: 600px;
    /* background-color: #f44336; */
}
.mid-top{
    height: 5%;
    width: 100%;
    /* background-color: aqua; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.mid-top h2{
 color: var(--black-1);
}
.mid-top h2 i{
    color: var(--black-1);
    font-size: 15px;
   }
.mid-desc{
    height: 14%;
    width: 100%;
    /* background-color: #4CAF50; */
    color: var(--black-2);
    text-align: justify;
    font-size: 16px;
    line-height: 1.5;
}

.fullName{
    height: 10%;
    width: 100%;
    /* background-color: aquamarine; */
}
.name-title{
    height: 35%;
    width: 100%;
    /* background-color: bisque; */

display: flex;
align-items: flex-end;

}



@media only screen and (max-width:1051px){
    .form-nettoyage{
        /* background-color: #f44336; */
        min-height: 850px;
  width: 90%;
    }

    .form-step3, .form-step4, .form-step5, .form-step6, .form-step7 {
      min-height: 100%;
      width: 100%;
      /* background-color: #a51308; */
    }

    .card-container-nettoyage {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      height: 500px;
      width: 100%;
      /* background-color: #afa04c; */
      /* padding: 20px; */
      box-sizing: border-box;
    }


    .card-container-nettoyage-2{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      height: 500px;
      width: 100%;
      /* background-color: #afa04c; */
      /* padding: 20px; */
      box-sizing: border-box;
    }


    .main-card-prestation {
      height: 100%;
      width: 100%;
      /* background-color: rgb(172, 98, 1); */
      display: flex;
      justify-content: center;
    }
}


@media only screen and (max-width:871px){
  .mid-top {
    height: 12%;
  }
  
}
@media only screen and (max-width:609px){
  .card-container-nettoyage-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 714px;
    width: 100%;
    /* background-color: #afa04c; */
    padding: 20px;
    box-sizing: border-box;
  }

  .fs1-title3 {
    min-height: 55px;
    width: 100%;
    /* background-color: #4CAF50; */
    display: flex;
    flex-direction: column;
    line-height: 1.5;
  }
  .card-container-nettoyage-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 714px;
    width: 100%;
    /* background-color: #afa04c; */
    padding: 0px;
    box-sizing: border-box;
  }


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

  .fs1-title3 {
    min-height: 60px;
    width: 100%;
    /* background-color: #4CAF50; */
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }
}
}









@media only screen and (max-width:442px){
  .card-container-nettoyage {
    padding: 0px;

  }
}























.name-title h3{
color: var(--black-1);

}
.input-name-completed{
    height: 65%;
    width: 100%;
    /* background-color: blueviolet; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.input-name-completed input[type="text"]{
    height: 55px;
    width: 276px;
    padding-left: 12px;
    border: 1px solid var(--black-4);
    border-radius: 5px;
    color: var(--black-1);
    font-size: 17px;

}

@media only screen and (max-width: 406px) {
  .fs1-title p {
    color: var(--black-2);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
  }
}
.adresse-contact-main{
    height: 17%;
    width: 100%;
    /* background-color: #4CAF50; */
}
.adresse-title{
    height: 17%;
    width: 100%;
    /* background-color: #ddd; */
    display: flex;
    align-items: flex-end;
}
.adresse-title h3, .infos-contact-title h3, .objet-title h3{
   
color: var(--black-1);
}
.grand-intput{
    height: 40%;
    width: 100%;
    /* background-color: aqua; */
    display: flex;
    align-items: flex-end;
}
.grand-intput input[type="text"]{
    height: 60px;
    width: 100%;
    padding-left: 12px;
    border: 1px solid var(--black-4);
    border-radius: 5px;
    color: var(--black-1);
    font-size: 17px;
}
.group-inputs-three{
    height: 43%;
    width: 100%;
    /* background-color: aqua; */
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.group-inputs-three input[type="text"]{
 padding-left: 12px;
 width: 185px;
 height: 55px;
 border: 1px solid var(--black-4);
 border-radius: 5px;
 color: var(--black-1);
 font-size: 17px;
}
.information-contact{
    height: 12%;
    width: 100%;
    /* background-color: #4CAF50; */
}
.infos-contact-title{
    height: 35%;
    width: 100%;
    /* background-color: antiquewhite; */
    display: flex;
    align-items: flex-end;
}
.input-infos-contact{
    height: 65%;
    width: 100%;
    /* background-color: aquamarine; */
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.input-infos-contact input[type="text"]{
    height: 55px;
    width: 276px;
    padding-left: 12px;
    border: 1px solid var(--black-4);
    border-radius: 5px;
    color: var(--black-1);
    font-size: 17px;
}
.object-contact{
    height: 30%;
    width: 100%;
    /* background-color: #4CAF50; */
}
.objet-title{
    height: 15%;
    width: 100%;
    /* background-color: #ddd; */
    display: flex;
    align-items: flex-end;
}
.text-area-contact-use{
    height: 85%;
    width: 100%;
    /* background-color: aqua; */
    display: flex;
    align-items: flex-end;
}
.text-area-contact-use textarea{
    height: 200px;
    width: 100%;
    resize: none;
    border-radius: 5px;
    outline: none;
    color: var(--black-1);
    font-size: 17px;
    border: solid 1px var(--black-4);
    padding: 7px;

}

.send{
    height: 12%;
    width: 100%;
    /* background-color: #4CAF50; */
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.send input[type="submit"]{
  height: 64px;
  width: 594px;
border: none;
outline: none;
color: var(--white-1);
background-color: var(--colorOne);
border-radius: 5px;
cursor: pointer;
font-size: 18px;
}
.send input[type="submit"]:hover{
color: var(--white-1);
background-color:#1F2E40

}
.vidangeMarge{
  height: 3rem;
  width: 100vw;
}


.bbleu{
    color: var(--colorOne);
}






.copy{
    height: 10rem;
    width: 100vw;
    /* background-color: #4CAF50; */
    display:flex;
    justify-content:center;
    align-items:center;
    color: var(--black-3);
}

/* Solution fibre optique///Solution fibre optique/// */
.fibreOne{
    height: 30rem;
    width: 100vw;
/* background-image: url(../img/En-tête.jpg); */
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider-container{
    height: 100%;
    width: 100%;
    display: flex;
    /* background-color: #f44336; */
}
/* .slider{
    height: 100%;
    width: 100%;
} */
.slider-1 {
  width: 100%;
  height: 100%;
  margin: 100px auto;
  overflow: hidden;



}
.slider-1 .slider {
  animation: slider-1 15s infinite ease-in-out;
  display: flex;

  /* Si on veut faire glisser vers la droite */
  /* Il faut aussi changer l'animation(transform) en valeurs positives */
  /* flex-direction: row-reverse; */
}
.slider-1 img {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 45px;
  color: #f1f1f1;
  object-fit: cover;
}



@media only screen and (max-width:774px){
  .fibreOne {
    height: 16rem;
    width: 100vw;
  }
}









@media only screen and (max-width:1051px){
  .suivant-space2 {
    height: 20%;
    width: 100%;
    /* background-color: #4CAF50; */
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .Infos-inputs-s5 input {
    height: 60px;
    width: 90%;
    padding-left: 7px;
    border-radius: 7px;
    border: 1px solid var(--black-4);
    color: var(--black-1);
    font-size: 15px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    margin-top: 7px;
  }
}
@media only screen and (max-width:524px){

  .suivant-space2 {
    height: 20%;
    width: 100%;
    /* background-color: #4CAF50; */
    display: flex;
    justify-content: center;
    align-items: center;
  }





}

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

  .suivant-space2 {
    height: 20%;
    width: 100%;
    /* background-color: #4CAF50; */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .Infos-inputs-s5 {
    min-height: 300px;
    width: 100%;
    /* background-color: #2196F3; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
  }
  .Infos-inputs-s5 label {
    color: var(--black-1);
    font-size:12px;
  }

  .group-inputlabel {
    height: 30%;
    width: 100%;
    /* background-color: #4c98af; */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .etat {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    position: relative;
    margin: 10px;
  }
  .etat-descript {
    height: 70%;
    width: 100%;
    /* background-color: #afa04c; */
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
@media only screen and (max-width:963px){
  .autres-infos {
    min-height: 270px;
    width: 100%;
    /* background-color: #C9FF33; */
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  .autres-infos-left {
    height: 55%;
    width: 100%;
    /* background-color: #f44336; */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .autres-infos-left input[type="text"] {
    height: 69px;
    width: 90%;
    border: 1px solid var(--black-4);
    border-radius: 5px;
    margin-top: 7px;
    font-size: 16px;
    color: var(--black-2);
    padding-left: 7px;
  }
  .autres-infos-right {
    height: 45%;
    width: 100%;
    /* background-color: aqua; */
    display: flex;
    align-items: start;
    justify-content: space-between;
  }
}
@media only screen and (max-width:481px){
  .step7-title span {
    color: var(--black-3);
    font-size: 12px;
  }
  .step7-title h2 {
    color: var(--black-1);
    font-size: 17px;
  }
}
@media only screen and (max-width:450px){

}
@media only screen and (max-width:619px){
  .step7-title {
    min-height: 85px;
    width: 100%;
    /* background-color: #4CAF50; */
    line-height: 1.5;
  
}
}












/* 
   5% par transition, nombre choisi arbitrairement.

   reste divisé par nb de pauses
   80(%) / 4 = 20(%) par pause
*/

@keyframes slider-1 {
  0%,
  20% {
    transform: translateX(0);
  }
  25%,
  45% {
    transform: translateX(-100%);
  }
  50%,
  70% {
    transform: translateX(-200%);
  }
  75%,
  95% {
    transform: translateX(-300%);
  }
  100% {
    transform: translateX(-400%);
  }
} 
.titre-reseau{
    height: 8rem;
    width: 100vw;
    /* background-color: #4CAF50; */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 35px;
}
.titre-reseau h1{
color: var(--black-1);
font-size: 30px;
text-align: center;
}
.titre-reseau h1 i{
    color: rgb(255, 123, 0);

    }
.titre-reseau h1 span{
   padding: 10px 30px;
   color: var(--white-1);
   background-color: #1F2E40;
   border-radius: 4px;
    }
    .article-synthese{
        min-height: 10rem;
        width: 100vw;
        /* background-color: #badaf5; */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .af{
        height: 100%;
        width: 960px;
        /* background-color: #1F2E40; */
        line-height: 1.5;
        text-align: center;
    }
    .af p{
color: var(--black-3);
    }


    .af h3{
   color: var(--black-1);
    }












.fibre{
        min-height: 30rem;
        width: 100vw;
        /* background-color: #4CAF50; */
        display: flex;
     align-items: center;
     flex-direction: column;
     margin-top: 40px;


    }
    .sec-fibre{
        min-height: 400px;
        width: 960px;
        /* background-color: #f44336; */
        margin: 15px 0;
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
    }
    .sec-ftitle{
        height: 70px;
        width: 100%;
        background-color:#1F2E40;
        display: flex;
        align-items: center;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    .sec-ftitle h2{
        color: var(--white-1);
    }
    .sec-ftitle i{
        color: rgb(253, 182, 28);
        font-size: 20px;

    }
  
    .sec-descript{
        height: 60%;
        width: 100%;
        /* background-color: aquamarine; */
        text-align: justify;
    }
    .sec-descript p{
    padding: 7px;
    line-height: 1.5;
    color: var(--black-3);
    }
    .sec-descript h4{
        padding: 7px;
        color: var(--colorOne);

        }


        @media only screen and (max-width:403px){
          .suivant-space2 {
            height: 90px;
            width: 100%;
            /* background-color: #4CAF50; */
            display: flex;
            justify-content: center;
            align-items: center;
          }
    
        }

        @media only screen and (max-width:385px){
          .radio-item label {
            border: 1px solid var(--black-4);
            padding: 15px 10px;
            border-radius: 5px;
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            position: relative;
            background-color: #fff;
            transition: background-color 0.3s, padding-left 0.3s;
          }
  
      
        }
   















    .sec-btnn{
        height: 25%;
        width: 100%;
        /* background-color: #1F2E40; */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .sec-btnn a{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    width: 200px;
    background-color: #1F2E40;
    color: var(--white-1);
    border-radius: 5px;
    margin-top: 15px;
    margin-bottom: 15px;
    font-size: 20px;
    }
    .sec-btnn a:hover{
        background-color: var(--colorOne);
        color: var(--white-1);
        }

.faite-nous{
    height: 120px;
    width: 100%;
    /* background-color: #1F2E40; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--black-3);
}
.conc-elec{
    min-height: 30rem;
    width: 100vw;
    /* background-color: #4CAF50; */
    display: flex;
    justify-content: center;
   
}
.conc-card{
    min-height: 480px;
    width: 960px;
    /* background-color: #1F2E40; */
}
.conc-card-title{
    height: 100px;
    width: 100%;
    /* background-color: #4CAF50; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.4;
}
.conc-card-title h2{
color: var(--colorOne);
}
.conc-card-title p{
    color: var(--black-1);
    }

    .conc-card-descript{
        min-height: 400px;
        width: 100%;
        /* background-color: #f44336; */
        line-height: 1.5;
        color: var(--black-3);
    }

    .conc-card-descript p{
    padding: 7px;
    text-align: justify;
    }
    .elec-main-photo{
        height: 270px;
        width: 100%;
        /* background-color: #1F2E40; */
        display: flex;
        justify-content: space-between;
        align-items: center;

    }
    .elec-card{
        height: 95%;
        width: 30%;
        /* background-color: #4CAF50; */
    }
    .sc-top{
        height: 80%;
        width: 100%;
        background-color: #f44336;
    }
.sc-top img{
        height: 100%;
        width: 100%;
        object-fit: cover;
    
    }
    .sc-bott{
        height: 20%;
        width: 100%;
        background-color: var(--colorOne);
        display: flex;
        justify-content: center;
        align-items: center;

    }
    .sc-bott h2{
    color: var(--white-2);
    }
    .devis-d{
        height: 100px;
        width: 100%;
        /* background-color: #1F2E40; */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .devis-d a{
        height: 70px;
        width: 220px;
        background-color: var(--colorOne);
        color: var(--white-1);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
    }
    .devis-d a:hover{
        background-color:#1F2E40;
        color: var (--white-1);
     
    }


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

      .af {
        height: 100%;
        width: 95%;
    
      }
    
      .sec-fibre {
        min-height: 332px;
        width: 95%;
        /* background-color: #f44336; */
    
    
    }
        
    }
    
@media only screen and (max-width:818px){
  .sc-bott h2 {
    color: var(--white-2);
    font-size: 17px;
  }
}




    @media only screen and (max-width:622px){
      .titre-reseau {
        height: 4rem;

      }
      .titre-reseau h1 {
        color: var(--black-1);
        font-size:17px;
        text-align: center;
      }
      .af h3 {
        color: var(--black-1);
        font-size: 15px;
      }
      .af p {
        color: var(--black-3);
        font-size: 13px;
      }
      .sec-descript p {
        padding: 7px;
        line-height: 1.5;
        color: var(--black-3);
        font-size: 13px;
      }
      .sec-descript h4 {
        padding: 7px;
        color: var(--colorOne);
        font-size: 13px;
      }
      .sec-ftitle h2 {
        color: var(--white-1);
        font-size: 17px;
      }
    }
    








    @media only screen and (max-width:860px){
      .elec-card {
        height: 197px;
        width: 222px;
        background-color: #4CAF50;
      }
      .sc-bott h2 {
        color: var(--white-2);
        font-size: 18px;
      }
      .af p {
        color: var(--black-3);
        text-align: justify;
      }
    }
    

    @media only screen and (max-width:729px){
      .elec-card {
        height: 143px;
        width: 195px;
        background-color: #4CAF50;
      }
      .sc-bott h2 {
        color: var(--white-2);
        font-size: 14px;
      }

      .sec-ftitle h2 {
        color: var(--white-1);
        font-size: 17px;
      }
      .logo-ftl img {
        height: 110px;
        width: 120px;
      }
    }
    



    @media only screen and (max-width:650px){
      .elec-main-photo {
        height: 161px;
        width: 100%;
        /* background-color: #1F2E40; */
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .logo-ftl img {
        height: 100px;
        width: 110px;
      }
      .elec-card {
        height: 121px;
        width: 145px;
        background-color: #4CAF50;
      }
      .sec-descript h4 {
        padding: 7px;
        color: var(--colorOne);
        font-size: 13px;
      }
      .sec-btnn a {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 54px;
        width:206px;
        background-color: #1F2E40;
        color: var(--white-1);
        border-radius: 5px;
        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 20px;
      }
      .faite-nous {
        height: 47px;
        width: 100%;
        /* background-color: #1F2E40; */
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--black-3);
      }

      .sec-btnn {
        margin-bottom: 3rem;
      }

      .conc-card-descript p {
        padding: 7px;
        text-align: justify;
        font-size: 12px;
      }
      .devis-d a {
        height: 55px;
        width:180px;
        background-color: var(--colorOne);
        color: var(--white-1);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
      }
    }
    
@media only screen and (max-width:560px){

  .conc-card-title h2 {
    color: var(--colorOne);
    font-size: 19px;
  }
  .elec-main-photo {
    height: 166px;
    width: 100%;
    /* background-color: #1F2E40; */
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .sc-bott h2 {
    color: var(--white-2);
    font-size: 11px;
  }
  .sec-ftitle h2 {
    color: var(--white-1);
    font-size: 14px;
  }
  .sec-ftitle {
    height: 41px;
  }
  .sec-btnn a {
    height: 56px;
    width: 150px;
    font-size: 15px;
  }
  .fc-text p {
    color: var(--white-1);
    font-size: 14px;
    text-align: justify;
    line-height: 1.7;
    padding: 15px;
  }
  .logo-ftl img {
    height: 65px;
    width: 78px;
  }

  .droite-bottom a {
    display: flex;
    height: 42px;
    width: 127px;
    background-color: var(--white-1);
    align-items: center;
    justify-content: center;
    color: var(--colorOne);
    border-radius: 5PX;
    font-size: 12px;
  }
  .logo-ftl {
    height: 102px;
    width: 100%;
    /* background-color: aqua; */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .follow-title {
    color: var(--white-1);
    font-size: 12px;
  }
}



@media only screen and (max-width:510px){
  .sec-descript h4 {
    padding: 7px;
    color: var(--colorOne);
    font-size: 13px;
    text-align: left;
  }
  .elec-main-photo {
    height: 161px;
    width: 100%;
    /* background-color: #1F2E40; */
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .faite-nous {
    font-size: 12px;
  }
}

.sec-descript h4 {
  padding: 7px;
  color: var(--colorOne);
  font-size: 13px;
  text-align: left;
}


@media only screen and (max-width:470px){
  .elec-card {
    height: 90px;
    width: 122px;
    background-color: #4CAF50;
  }
  .sc-bott h2 {
    color: var(--white-2);
    font-size: 9px;
    font-weight: 450;
  }
  .sec-descript h4 {
    padding: 7px;
    color: var(--colorOne);
    font-size: 10px;
    text-align: left;
  }
  .sec-ftitle h2 {
    color: var(--white-1);
    font-size: 12px;
  }
  .sec-descript p {
    padding: 7px;
    line-height: 1.5;
    color: var(--black-3);
    font-size: 11px;
  }

  .elec-main-photo {
    height: 130px;
    width: 100%;
    /* background-color: #1F2E40; */
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .sec-btnn a {
    height:52px;
    width: 127px;
    font-size: 12px;
  }

  .af p {
    color: var(--black-3);
    text-align: justify;
    font-size: 11px;
  }

  .siege {
    min-height: 60%;
    width: 100%;
    padding-left: 7px;
    display: flex;
    align-items: center;
    color: var(--white-1);
    font-size: 16px;
    line-height: 2;
    margin-bottom: 2rem;
  }
  .conc-card-title p {
    color: var(--black-1);
    font-size: 12px;
    padding-left: 7px;
  }
}

@media only screen and (max-width:400px){
  .elec-card {
    height: 73px;
    width: 88px;
    background-color: #4CAF50;
  }
  .sec-ftitle h2 {
    color: var(--white-1);
    font-size: 10px;
  }

}






@media only screen and (max-width:448px){
  .conc-card-title h2 {
    color: var(--colorOne);
    font-size: 15px;
  }
}
@media only screen and (max-width:352px){
  .conc-card-title h2 {
    color: var(--colorOne);
    font-size: 13px;
  }
}






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

  .af h3 {
    color: var(--black-1);
    font-size: 12px;
  }
  .titre-reseau h1 {
    color: var(--black-1);
    font-size: 13px;
    text-align: center;
  }
  .titre-reseau h1 span {
    padding: 1.5px 15px;
    color: var(--white-1);
    background-color: #1F2E40;
    border-radius: 4px;
  }
  .droite-bottom a {
    display: flex;
    height: 46px;
    width: 150px;
    background-color: var(--white-1);
    align-items: center;
    justify-content: center;
    color: var(--colorOne);
    border-radius: 5PX;
    font-size: 12px;
  }
  .fc-text p {
    color: var(--white-1);
    font-size: 12px;
    text-align: justify;
    line-height: 1.7;
    padding: 15px;
  }
  .dt-liste a {
    color: var(--white-3);
    font-size: 12px;
    margin: 10px 0;
  }
  .dt-title h3 {
    color: var(--white-1);
    font-size: 13px;
  }
}







@media only screen and (max-width:348px){
  .titre-reseau h1 {
    color: var(--black-1);
    font-size: 11px;
    text-align: center;
  }


  .af h3 {
    color: var(--black-1);
    font-size: 10px;
  

  }




}

@media only screen and (max-width:320px){
  .sc-bott h2 {
    color: var(--white-2);
    font-size: 7px;
    font-weight: 450;
  }
}




/* DASHBOARD///DASHBOARD///DASHBOARD///DASHBOARD/// */
    .card-generale{
        min-height: 400px;
        /* background-color: #1F2E40; */
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 50px;
    }
    .dash-card{
        min-height: 300px;
        width: 1500px;
        /* background-color: #f44336; */
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    }
    .admin-infos{
        min-height: 230px;
        /* background-color: #4CAF50; */
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    .findash{
        height: 5rem;
        /* background-color:var(--colorOne); */
        color: var(--black-3);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .img-admin{
        height: 150px;
        width: 150px;
        background-color: #1F2E40;
        border-radius: 50%;
    }
    .img-admin img{
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 50%;
    }
    .admin-infos p{
color: var(--colorOne);
margin-top: 10px;
    }
    .admin-infos span{
        color: green;
            }
.admin-infos i{
    color: var(--colorOne);
    margin-top: 10px;
}
.line{
    height: 1px;
    width: 100%;
    background-color: var(--white-1);
    margin-top: 5px;
}
.dash-space{
    min-height: 200px;
    width: 100%;
    /* background-color: #1F2E40; */
    display: flex;
flex-wrap: wrap;
justify-content: center
}

.dash-space a{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: var(--color-footer);
    height: 205px;
    width: 214px;
    text-align: center;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    /* background-color: #1F2E40; */
    margin: 20px 30px;
    border-radius: 5px;
    font-size: 19px;
}

.dash-space a span{
color: green;
font-size: 25px;
font-weight: bold;
}
.historique{
    height: 40px;
    width: 100%;
    background-color: var(--colorOne);
    display: flex;
    justify-content: center;
    align-items: center;
}
.historique h3{
color: var(--white-1);
}

.project-reel{
    min-height: 200px;
    width: 100;
    background-color: #1F2E40;

}
#rel{
    color:rgb(165, 22, 22);
}
.historiqueArchives{
  background-color:rgb(165, 22, 22); ;
}
.add-space{
    height: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    /* background-color: #4CAF50; */
}


.aucunMessage{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.aucunMessage p{
color: var(--colorOne);
font-size: 15px;
}
.add-space a{
    display: flex;
    height: 40px;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    color: var(--black-1);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    /* background-color: #4CAF50; */
}

.add-space a:nth-child(1){
background-color: #31b94f;
color: var(--white-1);
}

.add-space a:nth-child(2){
  background-color: #7d0388;
  color: var(--white-1);
  }
  .add-space a:nth-child(3){
    background-color: #08a8c4;
    color: var(--white-1);
    }
    
    
    .dash-space a:hover{
  background-color: var(--colorOne);
  color: var(--white-1);
    }
    
    .dash-space a:hover span{
      color: var(--white-1);
        }
    
        .dash-space a:hover #rel{
          color: var(--white-1);
            }
  @media  only screen and (max-width:1500px){
    .dash-card {
      min-height: 300px;
      width: 95%;
    }
  }    




.add-space a:hover{
color: var(--white-1);
background-color: var(--colorOne);
}

/* Message Liste Meage Liste Message Liste */
.mainCard-messageList{
  min-height: 446px;
  width: 100vw;
  /* background-color: #1F2E40; */
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.List-Title{
  height: 60px;
  width: 100vw;
  /* background-color: #f44336; */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black-1);
}
.List-Title h1{
font-size: 20px;
}
.mc-left {
  min-height: 100px;
  width: 100%;
  background-color: var(--colorOne);
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  display: flex;
}
.devisEelec{
background-color: var(--devisElec)
}
.typelieu{
  min-height: 80px;
  width: 100%;
  /* background-color: #f44336; */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.typelieu p{
  min-height: 30px;
  min-width: 50px;
  background-color: var(--devisElec);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  color: var(--white-2);
  border-radius: 5px;
  margin: 10px;
}

.devisEntretien p{
background-color: var(--blackDesign);
}

.RRseaux p{
  background-color: var(--devisReseau);
}

.natureTitleBot{
  margin-top: 30px;
}
.natureTitle{
  height: 40px;
  width: 100%;
  /* background-color: #08a8c4; */
  display: flex;
  justify-content: center;
  align-items: center;
}
#ntelec{
  background-color: var(--devisElec);
  margin-top: 20px;
}
#TypeElec{
  background-color: var(--devisElec);
}
#TypeReseau{
  background-color: var(--devisReseau);
  margin-top: 20px;
}
#AllTypeReseau{
  background-color: var(--devisReseau);
  margin-top: 20px;
}
.natureTitle h4{
color: var(--white-1);
font-size: 15px;
}  


  @media only screen and (max-width: 585px){
    .typelieu p{
      min-height: 30px;
      min-width: 50px;
      font-size: 12px;
    }

  }

  @media only screen and (max-width: 425px){
    .typelieu p{
      min-height: 20px;
      min-width: 50px;
      font-size: 10px;
    }

  }

.mcl-gaucheX{
  height: 100%;
  width: 70%;
  /* background-color: #f44336; */
}
.mcl-gaucheD{
  height: 138px;
  width: 30%;
  /* background-color: aqua; */
}
.mclOnetop, .mclOnebot{
  height: 50%;
  width: 100%;
  /* background-color: blanchedalmond; */
}
.mclOnebot{
/* background-color: aquamarine; */
display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 61px;
  margin-top: 76px;
}
.mclOnetop p{
color: var(--white-1);
text-align: right;
padding-right: 10px;

}


@media only screen and (max-width:455px){
  .add-space a {
    display: flex;
    height: 40px;
    width: 71px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    color: var(--black-1);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    font-size: 13px;
  }
}











.mc-left h2{
color: var(--white-1);
font-size: 17px;
padding: 7px;
}

.mc-left h3{
  color: var(--white-1);
  font-size: 16px;
  font-weight: 400;
  }

  .mc-left span{
    color: var(--white-2);
    font-size: 16px;
    }
.mc-left p{
  color: var(--white-2);
  font-size: 16px;
  }

  .List-Title h2, h3, p, span{
padding:5px 7px;
    }

.enteteMessage{
  height:100px;
  width: 100vw;
  /* background-color: #4CAF50; */
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.MessageEnteteC{
  height: 62%;
  width: 1202px;
  background-color: rgb(245, 248, 252);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 7px;
}
.MessageEnteteC p, .MessageEnteteC span, .MessageEnteteC a{
color: var(--black-1);
font-size: 16px;
font-weight: 500;

}
.MessageEnteteC p{
  padding-left: 20px;
}
.MessageEnteteC span{
  padding-right: 20px;
}
.mc-right{
  min-height: 100px;
  width: 100%;
/* background-color: #46f436; */
display: flex;
flex-direction: column;
align-items: center;
}

.mc-right p{
color: var(--black-2);
padding: 20px 7px;
text-align: left;
line-height: 1.7;
font-size: 15px;
}
.mesmobile{
  display: none;
}

.partieOne{
  min-height: 200px;
  width: 100%;
  display: flex;
  background-color: #724819;
}
.partieTwo{
  min-height: 100px;
  width: 100%;
/* background-color: #08a8c4; */
margin-bottom: 30px;
}

.List-card{
  min-height:100px;
  width: 1200px;
  /* background-color: #31b94f; */
  display: flex;
  flex-direction: column;
}
.List-card a{
  display: flex;
  flex-direction: column;
min-height: 1px;
width: 100%;
/* background-color: #f44336; */
border-radius: 7px;

/* box-shadow: 10px 10px 10px rgb(244, 245, 255); */
}
#mlmobile{
  display: none;
}
.mclOnebot a {
  display: flex;
  min-height: 100%;
  /* background-color: #01507e; */
}
.finMessage{
  height: 50px;
  width: 100vw;
  background-color: #1F2E40;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white-1);
  margin-bottom: 1em;
}
.finMessage a{
  height: 30px;
  width: 40px;
  background-color:var(--white-1);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--colorOne);
  border-radius: 4px;
}

.mc-right a{
  display: flex;
  height: 40px;
  /* background-color: #d66800; */
  width: 70px;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  }
.messageCard{
  min-height: 400px;
  width: 100%;
 box-shadow: 0px 2px 5px rgba(216, 216, 216, 0.808);
 margin-bottom: 30px;
}
  .mc-right a:nth-child(1){
color: var(--white-1);
background-color: rgb(6, 83, 172);
    }
  
        
          .mc-right a:nth-child(2){
            color: white;
            background-color: rgb(155, 36, 36);
                }
              



@media only screen and (max-width:419px){
    .dash-space a {
        height: 120px;
        width: 120px;
        font-size: 13px;
      }
      .historique {
        margin-bottom: 20px;
      }
      .img-admin {
        height: 120px;
        width: 120px;
        background-color: #1F2E40;
        border-radius: 50%;
      }
      .card-generale {
     
        margin-top: 10px;
      }


.enteteMessage {
  height: 100px;
  width: 100vw;
  /* background-color: #4CAF50; */
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: 47px;
}
.mc-left h2 {
  color: var(--white-1);
  font-size: 7px;
  padding: 7px;
}
.mlmonileHaut h4 {
  color: var(--white-1);
  font-weight: 500;
  font-size: 10px;
}
.mlmonileHaut b {
  color: var(--white-1);
  font-weight: 500;
  padding-left: 15px;
  font-size: 10px;
}
.mlmonileBas span, .mlmonileBas p {
  color: var(--white-2);
  font-size: 7px;
}
.mlmonileBas h6 {
  color: var(--black-4);
  font-size: 7px;
}
.mc-left p {
  color: var(--white-2);
  font-size: 9px;
}
.mc-left p {
  color: var(--white-2);
  font-size: 7px;
}

.mc-right p {
  color: var(--black-2);
  padding-left: 7px;
  text-align: left;
  line-height: 1.7;
  font-size: 9px;
}

.mc-right {
  min-height: 45px;
  width: 100%;
  display: flex;
  align-items: center;
  /* background-color: tomato; */
}

.List-card a {
  display: flex;
  min-height: 130px;
  width: 100%;
  flex-direction: column;
  margin: 20px 0;
}






  header p{
 color: var(--black-1);
 font-weight: bold;
 margin-right: 10px;
  }
header img {
    height: 100px;
    width: 100px;
    /* background-color: rebeccapurple; */
  }

  .line-coupe {
    height: 1px;
    width: 100vw;
    background-color: var(--white-1);
  }
}
















.head-infosProduit{
  height: 60px;
  width: 100%;
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.head-infosProduit a{
color: var(--black-3);
font-size: 16px;
padding: 0 20px;
}
/* Formulaire ajouter produits */
.addProduits{
  min-height: 200px;
  width: 100%;
  /* background-color: #01507e; */
}

.nameProduct{
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: #049228; */
}

.nameProduct input[type="text"]{
margin:  0 5px;
display: block;
height: 64px;
width: 143px;
padding-right: 40px;
padding-left: 10px;
outline: none;
border-radius: 7px;
border:1px solid var(--black-4);
color: var(--colorOne);
box-shadow: 10px 10px 10px  rgba(194, 194, 194, 0.5);
font-weight: 500;
font-size: 17px
}

.categorieProduct{
  height: 80px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: #049228; */
}
.categorieProduct select{
height: 60px;
width: 98%;
cursor: pointer;
appearance: none; 
background-color: var(--colorOne);
color: var(--white-1);
font-size: 18px;
border: none;
border-radius: 7px;
padding: 0 10px;
}

.filesProduct{
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* background-color: #049228; */

}
.filesProduct input[type="file"]{
display: none;
}
.filesProduct label{
  height: 50px;
  width: 120px;
  background-color: var(--colorOne);
display: flex;
justify-content: center;
align-items: center;
border-radius: 7px;
color: var(--white-1);
cursor: pointer;

  }
  
.descriptionProduct{
  min-height: 150px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* background-color: #049228; */
}
.descriptionProduct textarea{
  height: 150px;
  width: 94%;
  border-radius: 7px;
  resize: none;
  border: 1px solid var(--black-4);
  box-shadow: 10px 10px 10px  rgba(219, 219, 219, 0.5);
  color: var(--black-2);
  padding: 15px;
}
.descriptionProduct p{
  padding: 20px ;
  resize: none;
  font-size: 17px;
  color: var(--black-2);
}
.ajouterProduit{
  height: 100px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* background-color: #049228; */
}

@media only screen and (max-width:359px){
    .img-admin {
        height: 100px;
        width: 100px;
        background-color: #1F2E40;
        border-radius: 50%;
      }
      .admin-infos p {
        color: var(--colorOne);
        margin-top: 7px;
        font-size: 12px;
      }
      .dash-space a {
        height: 100px;
        width: 100px;
        font-size: 13px;
      }

      }
    

@media only screen and (max-width:419px){
  .admin-infos {
    min-height: 230px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 5rem;
  }
}


@media only screen and (max-width:319px){
    .img-admin {
        height: 100px;
        width: 100px;
        background-color: #1F2E40;
        border-radius: 50%;
      }
      .admin-infos p {
        color: var(--colorOne);
        margin-top: 7px;
        font-size: 12px;
      }

      .add-space a {
        height: 40px;
        width: 75px;
        border-radius: 5px;
        font-size: 12px;
      
      }
      .dash-space a {
        height: 80px;
        width: 80px;
        font-size: 13px;
        font-size: 10px;
      }
}
@media only screen and (max-width:537px){
  .fs1-title3 span {
    color: var(--black-1);
    font-size: 12px;
  }
  .fs1-title3 p {
    color: var(--black-1);
    font-size: 17px;
    font-weight: 500;
  }
  .etat-title h2 {
    color: var(--black-1);
    font-size: 17px;
  }
  .etat-title span {
    font-size: 12px;
    color: var(--black-1);
  }
}
.mode {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  position: relative;
  margin: 0 15px;
  margin-top: 0px;
  margin-right: 15px;
  margin-bottom: 0px;
  margin-left: 15px;
}
/* PAGE CONFIRMATION EMAILPAGE CONFIRMATION EMAILPAGE CONFIRMATION EMAIL */
.mail_confirm{
  height: 700px;
  width: 100vw;
  /* background-color: #08a8c4; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.main_confirm, .link_expire{
  height: 450px;
  width: 400px;
  /* background-color: var(--colorOne); */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.link_asowm{
  height: 30%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: #08a8c4; */
}
.rond-link-expire, .rond-link-actif, .rond-link-notok{
  height: 110px;
  width: 110px;
  border-radius: 50%;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;

}
.rond-link-expire i, .rond-link-notok i, .rond-link-notok i{
  
}
.rond-link-expire i{
color: #f44336;
font-size: 50px;
}
.rond-link-actif i{
  color: #049228;
font-size: 50px;
}
.rond-link-notok i{
  color: #d66800;
font-size: 50px;
}

.link_txt{
  height: 20%;
  /* background-color: #08a8c4; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.link_txt p{
color: var(--black-1);
padding: 7px;
line-height: 1.5;
text-align: center;
}

.btn-ressend{
  height: 45%;
  width: 100%;
  /* background-color: #08a8c4; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-ressend a{
display: flex;
justify-content: center;
align-items: center;height: 30px;
height: 60px;
width: 170px;
background-color: var(--colorOne);
color: var(--white-1);
font-size: 16px;
border-radius: 5px;
}

.btn-ressend a:hover{
opacity: 0.9;
  }
  
  
  



















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

  .MessageEnteteC {
    height: 62%;
    width: 90%;
    background-color: rgb(245, 248, 252);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 7px;
  }
  .List-card {
    min-height: 100px;
    width: 98%;
    /* background-color: #31b94f; */
    display: flex;
    flex-direction: column;
  }
}


@media only screen and (max-width:831px){
  .mcl-gaucheD {
    height: 138px;
    width: 50%;
    /* background-color: aqua; */
  }
  .mcl-gaucheX {
    height: 100%;
    width: 50%;
    /* background-color: #f44336; */
  }
  .mc-left h2 {
    color: var(--white-1);
    font-size: 12px;
    padding: 7px;
  }
  .mc-left p {
    color: var(--white-2);
    font-size: 13px;
  }
  .mc-left h3 {
    color: var(--white-1);
    font-size: 12px;
    font-weight: 400;
  }

  .mc-left h3 {
    color: var(--white-1);
    font-size: 12px;
    font-weight: 400;
  }
  .mc-left span {
    color: var(--white-2);
    font-size: 12px;
  }

  .mc-left p {
    color: var(--white-2);
    font-size: 12px;
  }
  .confirm, .noconfirm{
    height: 25px;
    width: 25px;
  }
 .noconfirm i, .confirm i{
font-size: 12px;
  }
}
.devisReseau{
  background-color:var(--devisReseau);
}
.devisE{
  background-color: var(--blackDesign);
}

@media only screen and (max-width:505px){
  .MessageEnteteC p, .MessageEnteteC span, .MessageEnteteC a {
    color: var(--black-1);
    font-size: 12px;
    font-weight: 500;
  }
}
@media only screen and (max-width:449px){
  .mc-left {
    min-height: 100px;
    width: 100%;
    background-color: var(--colorOne);
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    display: flex;
    flex-direction: column;
  }
  .devisEelec{
    background-color: var(--devisElec);
  }
  .devisReseau{
    background-color:var(--devisReseau);
  }
  /* .devisEntretien{
    background-color: var(--blackDesign);
  } */
  .DEentete{
    background-color: var(--blackDesign);
  }
  .mcl-gaucheX {
    height: 100%;
    width: 100%;
    /* background-color: #f44336; */
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
  .MessageEnteteC {
    height: 39%;
    width: 90%;
  }
  .mcl-gaucheD {
    height: 50%;
    width: 100%;
    background-color: var(--blackDesign);
  }
  .confirm, .noconfirm {
    height: 18px;
    width: 18px;
  }
  .mc-left p {
    color: var(--white-2);
    font-size: 10px;
  }

  .mclOnetop, .mclOnebot {
    height: 25px;
    width: 100%;
    /* background-color: blanchedalmond; */
  }
  
}













@media only screen and (max-width:363px){
  .card-container-nettoyage {
    display: flex;
flex-wrap: wrap;
justify-content: left;
    min-height: 700px;
    width: 95%;
/* background-color: #afa04c; */
    /* padding: 20px; */
    box-sizing: border-box;
}


.radio-item {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  position: relative;
  margin: 5px;
}
}

@media only screen and (max-width:755px){
  .mail_confirm {
    height: 80vh;
    width: 100vw;
    /* background-color: #08a8c4; */
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
}

@media only screen and (max-width:559px){
  .main_confirm, .link_expire {
    height: 450px;
    width: 80%;
    /* background-color: var(--colorOne); */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
  }
  .rond-link-expire, .rond-link-actif, .rond-link-notok {
    height: 80px;
    width: 80px;
    border-radius: 50%;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .rond-link-expire i{
    color: #f44336;
    font-size: 40px;
    }
    .rond-link-actif i{
      color: #049228;
    font-size: 40px;
    }
    .rond-link-notok i{
      color: #d66800;
    font-size: 40px;
    }
}

.copy{
  height: 60px;
  width: 100vw;
  /* background-color: #049228; */
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--black-3);
  font-size: 17px;
}

@media  only screen and (max-width:871px){
  .nameProduct {
    min-height: 300px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
  }
  .nameProduct input[type="text"] {
  
    height: 64px;
    width: 90%;
   
  }
  .dash-card {
    margin-top: 3rem;
  }

 .ajouterProduit button {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 64px;
    width: 90%;
    border: none;
    border-radius: 5px;
    color: var(--white-1);
    font-size: 17px;
    background-color: var(--colorOne);
    cursor: pointer;
  }
} 











@media  only screen and (max-width:650px){
  .nameProduct input[type="text"] {
  
    height: 64px;
    width: 86%;
  }
  .categorieProduct select {
    height: 60px;
    width: 100%;
  }
  .descriptionProduct textarea {
    height: 150px;
    width: 88%;
  }
}
@media  only screen and (max-width:419px){
  .filesProduct {
    height: 100px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .filesProduct label {
    height: 50px;
    width: 90px;
  }
}






@media only screen and (max-width:659px){
  .radioreseau {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    position: relative;
    margin: 5px;
  }

}
@media only screen and (max-width:575px){

  .card-type {
    display: flex;
flex-wrap: wrap;
justify-content: space-between;
    min-height: 700px;
    width: 95%;
/* background-color: #afa04c; */
    /* padding: 20px; */
    box-sizing: border-box;
}
}

@media only screen and (max-width:442px){
  .radiotype {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    position: relative;
    margin: 5px;
  }

}

@media only screen and (max-width:386px){
  .card-type {
    display: flex;
flex-wrap: wrap;

    min-height: 850px;
    width: 95%;
/* background-color: #afa04c; */
    /* padding: 20px; */
    box-sizing: border-box;
}

}


@media only screen and (max-width:871px){
  .main-container {
    min-height: 43rem;
    width: 100vw;
    /* background-color: #4CAF50; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
  }
  .fibreOne {
    height: 16rem;
    width: 100vw;
    margin-top: 4.5rem;
  }
}
@media only screen and (max-width:629px){
  .mid-container {
    height: 900px;
    width: 95%;
    /* background-color: #f44336; */
  }

  .mid-desc {
    min-height: 125px;
    width: 100%;
    /* background-color: #4CAF50; */
    color: var(--black-2);
    text-align: justify;
    font-size: 16px;
    line-height: 1.5;
  }

  .fullName {
    min-height: 200px;
    width: 100%;
    /* background-color: aquamarine; */
    
  }
  .input-name-completed input[type="text"] {
    height: 55px;
    width: 46%;
    padding-left: 12px;
    border: 1px solid var(--black-4);
    border-radius: 5px;
    color: var(--black-1);
    font-size: 17px;
  }

  .adresse-contact-main {
    min-height: 157px;
    width: 100%;
    /* background-color: #4CAF50; */
  }

  .group-inputs-three input[type="text"] {
    padding-left: 12px;
    width: 30%;
    height: 55px;
    border: 1px solid var(--black-4);
    border-radius: 5px;
    color: var(--black-1);
    font-size: 17px;
  }
  .information-contact {
    min-height: 90px;
    width: 100%;
    /* background-color: #4CAF50; */
  }
  .input-infos-contact input[type="text"] {
    height: 55px;
    width: 46%;
    padding-left: 12px;
    border: 1px solid var(--black-4);
    border-radius: 5px;
    color: var(--black-1);
    font-size: 17px;
  }
}

@media only screen and (max-width:583px){
  .mid-container {
    min-height: 1038px;
    width: 95%;
    /* background-color: #f44336; */
    margin-bottom: 4rem;
  }

  .group-inputs-three {
    min-height: 240px;
    width: 100%;
    /* background-color: aqua; */
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-direction: column;

  }

  .group-inputs-three input[type="text"] {
    padding-left: 12px;
    width: 97%;
    height: 60px;
    border: 1px solid var(--black-4);
    border-radius: 5px;
    color: var(--black-1);
    font-size: 17px;
    margin: 10px 0;
  }
  .information-contact {
    min-height: 108px;
    width: 100%;
    /* background-color: #4CAF50; */
    margin-top: 10rem;

  }

  .input-infos-contact {
    min-height: 140px;
    width: 100%;
    /* background-color: aquamarine; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;

  }


  .input-infos-contact input[type="text"] {
    height: 60px;
    width: 97%;
    padding-left: 12px;
    border: 1px solid var(--black-4);
    border-radius: 5px;
    color: var(--black-1);
    font-size: 17px;
    margin: 5px 0;
  }

  .object-contact {
    height: 30%;
    width: 100%;
    /* background-color: #4CAF50; */
    margin-top: 5rem;
  }

}

@media only screen and (max-width:481px){
  .mid-container {
    min-height: 1194px;
    width: 95%;
    /* background-color: #f44336; */
    margin-bottom: 4rem;
  }

  .input-name-completed {
    min-height:150px;
    width: 100%;
    /* background-color: blueviolet; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;

  }
  .input-name-completed input[type="text"] {
    height: 65px;
    width: 97%;
    padding-left: 12px;
    border: 1px solid var(--black-4);
    border-radius: 5px;
    color: var(--black-1);
    font-size: 17px;
  }

  .adresse-contact-main {
    min-height: 157px;
    width: 100%;
    /* background-color: #4CAF50; */
    margin-top: 5rem;
  }

  .text-area-contact-use {
    height: 216px;
    width: 100%;
    /* background-color: aqua; */
    display: flex;
    align-items: flex-end;
  }

  .objet-title {
    height: 25px;
    width: 100%;
    /* background-color: #ddd; */
    display: flex;
    align-items: flex-end;
  }
  .copy {
    height: 5rem;
    width: 100vw;
    /* background-color: #4CAF50; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--black-3);
  }
  .send {
    height: 12%;
    width: 100%;
    /* background-color: #4CAF50; */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 2rem;
  }

  .send input[type="submit"] {
    height: 67px;
    width: 100%;
    border: none;
    outline: none;
    color: var(--white-1);
    background-color: var(--colorOne);
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
  }
  .mid-desc {
    min-height: 125px;
    width: 100%;
    /* background-color: #4CAF50; */
    color: var(--black-2);
    text-align: justify;
    font-size: 14px;
    line-height: 1.5;
  }
}


@media only screen and (max-width:755px){
  .m2lef {
    height: 50%;
    width: 2px;
    background-color: var(--colorOne);
    display: flex;
    align-self: center;
  }
}




@media only screen and (max-width:321px){
  .mid-desc {
    min-height: 125px;
    width: 100%;
    /* background-color: #4CAF50; */
    color: var(--black-2);
    text-align: justify;
    font-size: 13px;
    line-height: 1.5;
  }
}



/* SECTION TOUS LES PRODUITS SECTIONS TOUS LES PRODUITS  */
.tous-products{
  height: 150px;
  width: 100vw;
  /* background-color: #f44336; */
  color: var(--black-1);
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.container-produits{
  min-height: 200px;
  width: 100vw;
  /* background-color: #1F2E40; */
  display: flex;
  justify-content: center;
  align-content:center;
  margin-bottom: 15rem;
}
.cardcontainer-produits{
  min-height: 200px;
  width: 1600px;
  /* background-color: #31b94f; */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.tousProduits{

}
@media only screen and (max-width:871px){
  .tous-products{
margin-top: 4rem;
    
  }
}
@media only screen and (max-width:644px){
.tousProduits{
  height: 240px;
    width: 269px;
}
}
@media only screen and (max-width:588px){
  .tousProduits{
    height: 279px;
    width: 253px;
  }
  }
  @media only screen and (max-width:536px){
    .tousProduits{
      height: 198px;
      width: 207px;
    }
    .tousI i {
      height: 60%;
      width: 60%;
      position: absolute;
      z-index: 1;
      left: 180px;
      top: 7px;
      font-size: 16px;
      cursor: pointer;
    }
    .tous-products {

      font-size: 13px;
    }
    }

    @media only screen and (max-width:445px){
      .tousProduits {
        height: 198px;
        width: 167px;
      }
      .tousI i {
        height: 60%;
        width: 60%;
        position: absolute;
        z-index: 1;
        left: 145px;
        top: 5px;
        font-size: 16px;
        cursor: pointer;
      }
    }

    
    @media only screen and (max-width:355px){
      .tousProduits {
        height: 141px;
        width: 140px;
      }

      .tousI i {
        height: 60%;
        width: 60%;
        position: absolute;
        z-index: 1;
        left: 115px;
        top: 5px;
        font-size: 14px;
        cursor: pointer;
      }
    }
/* DESCRIPTION PRODUITS DESCRIPTION PRODUITS DESCRIPTION PRODUITS  */
.title-descritpion{
  height: 5rem;
  width: 100vw;
  /* background-color: #f44336; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.title-descritpion h1{
color: var(--black-1);
font-size: 20px;
}



.produitDescriptMain{
  min-height: 500px;
  width: 100vw;
  /* background-color: #1F2E40; */
  display: flex;
  justify-content: center;
  align-items: center;
}





.card-description{
  min-height: 600px;
  width: 1400px;
  /* background-color: #31b94f; */
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 7px;
}

.title-products-descript{
  height: 70px;
  width: 100%;
  /* background-color: rgb(229, 127, 255); */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 6rem;
}
.title-products-descript h2{
color: var(--black-1);
font-weight: 400;
}

.zone-description{
  min-height: 441px;
  width: 100%;
  /* background-color: blueviolet; */
  display: flex;
}




.description-lef{
  height: 400px;
  width: 60%;
  /* background-color: aqua; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

}


.dleftPhoto{
  height: 401px;
  width: 97%;
  /* background-color: #be40b4; */
  display: flex;
  align-items: center;
}

.bigView{
  height: 357px;
  width: 552px;
  border-radius: 7px;
  margin-right: 31px;
  /* background-color: #1F2E40; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.bigView img {
  height: 317px;
  width: 292px;
  object-fit: contain;
  border-radius: 7px;
  margin-right: 31px;
}


.selectionPicture{
  height: 98%;
  width: 140px;
  background-color: #f8fcff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;


}

.imageChoix{
  height: 75px;
  width: 73%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border-radius: 7px;
  cursor: pointer;
}
.imageChoix img{
  height: 90%;
  width: 60%;
  object-fit: contain;

}





.livraisonMode{
  height: 10%;
  width: 100%;
  /* background-color: #f44336; */
  display: none;
align-items: center;
}


.livraisonMode p{
color: var(--black-1);
font-size: 20px;
padding-left: 15px;

}
.livraisonMode p i{
  color: var(--colorOne);
  }
  





.description-right{
  min-height: 400px;
  width: 40%;
  /* background-color: rgb(177, 167, 25); */
  border: 1px solid var(--white-2);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}


.textDescript{
  min-height: 80px;
  width: 100%;
  /* background-color: #1F2E40; */
}

.textDescript p{
  color: var(--black-2);
  font-size: 16px;
  line-height: 2;
  padding: 30px 5px;
  }
  .price{
    height: 30px;
    width: 100%;
    /* background-color: #f44336; */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .price p{
color: var(--black-1);
font-size: 25px;
font-weight: 500;

  }
  .price p i{
font-size: 20px;
    
      }
    
    .btn-adProduitPanier{
      height: 85px;
      width: 100%;
      /* background-color: #f44336; */
      display: flex;
      /* flex-direction: column; */
      align-items: center;
      justify-content: center;
    }
    .btn-adProduitPanier button{
      height: 49px;
      width: 176px;
        padding:0;

    }
    .btn-adProduitPanier select{
height: 49px;
width: 80px;
background-color: var(--black-1);
color: white;
display: flex;
justify-content: center;
align-items: center;
appearance: none;
font-size: 16px;
padding-left: 15px;
cursor: pointer;
border: none;
border-radius: 7px;
    }
    .bt
    .btn-adProduitPanier button:nth-child(1){
    background-color: black;

  }


    .mots{
      min-height: 100px;
      width: 100%;
      /* background-color: #f44336; */
    }

    .mots p{
      font-size: 15px;
      line-height: 1.5;
      color: var(--black-3);
      padding: 15px;
      text-align: justify;
    }
    .imageChoix {
      transition: border 0.2s;
  }

    .imageChoix.selected {
      border: 1px solid rgb(36, 60, 105); /* Bordure pour le div sélectionné */
  }





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

    .description-lef {
      min-height: 583px;
      width: 658px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }
    .description-right {
      height: 440px;
      width: 500px;
      border: 1px solid var(--white-2);
      box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    }
    .zone-description {
      min-height: 441px;
      width: 100%;
      display: flex;
      justify-content: center;
    }
  
  
  }




  @media only screen and (max-width:1181px){
    .description-lef {
      min-height: 583px;
      width: 90%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    }
    .zone-description {
      min-height: 441px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .dleftPhoto {
      min-height: 550px;
      width: 97%;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-between;
    }
    .selectionPicture {
      height: 133px;
      width: 520px;
      display: flex;
      align-items: flex-end;
      flex-direction: row;
      justify-content: space-between;
    }

    .imageChoix {
      height: 113px;
      width: 114px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      justify-content: center;
      align-items: center;
      background-color: #ffffff;
      border-radius: 7px;
      cursor: pointer;
    }
    .imageChoix img {
      height: 62px;
      width: 61px;
    }
    .bigView {
      height: 416px;
      width: 520px;
      border-radius: 7px;
      margin-right: 0px;
      display: flex;
      justify-content: center;
      align-items: center;

    }
    .bigView img {
      height: 100%;
      width: 376.5px;
      border-radius: 7px;
      margin-right: 0;
    }
    .description-right {
      min-height: 440px;
      width: 90%;

      border: 1px solid var(--white-2);
      box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    }
  }


@media only screen and (max-width:583px){
  .bigView {
    height: 294px;
    width: 72%;
    border-radius: 7px;
    margin-right: 0px;
    /* background-color: #1F2E40; */
    display: flex;
    justify-content: center;
    align-items: center;
  }






  .selectionPicture {
    height: 133px;
    width: 100%;
    /* background-color: #2086d4; */
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    justify-content: space-between;
  }

  .dleftPhoto {
    min-height: 456px;
    width: 100%;

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
  }
  .description-lef {
    min-height: 458px;
    width: 90%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }


  .title-products-descript {
    height: 70px;
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    margin-top: 2rem;
  }
  .title-products-descript h2 {
    color: var(--black-1);
    font-weight: 400;
    font-size: 20px;
  }
  .btn-adProduitPanier button {
    height: 62px;
    width: 197px;
    padding: 0;
    margin: 5px;
      margin-top: 5px;
    margin-top: 15px;
  }
}




@media only screen and (max-width:487px){
  .mots p {
    font-size: 12px;
    line-height: 1.5;
    color: var(--black-3);
    padding: 0px;
    text-align: justify;
    padding: 7px;
  }


  .btn-adProduitPanier {
    height: 85px;
    width: 100%;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .btn-adProduitPanier button {
    height: 62px;
    width: 143px;
    font-size: 14px;
    padding: 0;
    margin: 0px;

  }
  .imageChoix {
    height: 88px;
    width: 97px;

  }
  .price {
    height: 59px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .textDescript p {
    color: var(--black-2);
    font-size: 16px;
    line-height: 2;
    padding: 10px 0;
    text-align: left;
  }
}
.rsadd input[type="text"]{
  width: 100%;
}

@media only screen and (max-width:417px){
  .textDescript p {
    color: var(--black-2);
    font-size: 12px;
    padding: 7px;
    text-align: justify;
  }
  .price {
    height: 45px;
    width: 100%;
    /* background-color: #f44336; */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bigView img {
    height: 174px;
    width: 211.5px;
    border-radius: 7px;
    margin-right: 0;
  }
  .bigView {
    height: 286px;
    width: 354.5px;
  }
  .selectionPicture {
    height: 99px;
    width: 100%;
  }

  .dleftPhoto {
    min-height: 402px;
    width: 100%;
    
}


.description-lef {
  min-height: 403px;
  width: 90%;
}

.mots {
  height: 116px;
  width: 100%;
  /* background-color: #f44336; */
}

.description-right {
  min-height: 377px;
  width: 90%;
  /* background-color: rgb(177, 167, 25); */
  border: 1px solid var(--white-2);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}



.btn-adProduitPanier button {
  height: 43px;
  width: 115px;
  font-size: 12px;
  padding: 0;
  margin: 0px;
}
.btn-adProduitPanier {
  height: 85px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}



}





















.livraison{
  min-height: 91px;
  width: 100vw;
}


/* SECTION AUTRES PRODUITS SECTION AUTRES PRODUITS */

.autres-produits{
  min-height: 200px;
  width: 100vw;
  /* background-color:#f44336; */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3rem;
}

.autresPTitle{
  height: 70px;
  width: 800px;
  /* background-color: #1F2E40; */
  display: flex;
  justify-content: center;
  align-items: center;

}
.autresPTitle p{
color: var(--black-1);

}

.card-asso{
  min-height: 400px;
  width: 1500px;
  /* background-color: #31b94f; */
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  
}

@media only screen and (max-width:1527px){
  .card-asso {
    min-height: 400px;
    width: 95%;
    /* background-color: #31b94f; */
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}

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

  .description-right {
    height: 357px;
    width: 90%;
  
  }
  
}


/* AFFICHAGE DES MEMBRES DASHBOARD */
.membre-bigMain{
  min-height: 300px;
  width: 100vw;
  /* background-color: #08a8c4; */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.membreTitle{
  height: 70px;
  width: 100vw;
  /* background-color: #dce4ad; */
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}

.membreTitle h3, .membreTitle a{
color: var(--black-1);
font-size: 18px;
}
.cardUser{
  height: 192px;
  width: 1000px;
  background-color: var(--colorOne);
  box-shadow: 10px 10px 10px rgb(233, 233, 233, 0.5);
  margin: 20px;

}
.chearchUser{
  height: 100px;
  width: 100vw;
  /* background-color: #72195f; */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chearchUser input[type="search"]{
  height: 60px;
  width: 500px;
  border: solid 1px var(--colorOne);
  border-radius: 7px;
  padding-left: 10px;
  font-size: 17px;
  position: relative;
  z-index: 1;
}
.chearchUser input[type="submit"]{
  height: 60px;
  width: 70px;
 background-color: var(--colorOne);
 color: var(--white-1);
 outline: none;
 border: none;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
  padding-left: 10px;
  font-size: 17px;
  position: relative;
  z-index: 2;
  cursor: pointer;
  right: 17px;
}

@media only screen and (max-width:630px){
  .chearchUser input[type="search"]{
    height: 60px;
    width: 80%;

  }
  .chearchUser input[type="submit"]{
    height: 60px;
    width: 70px;
   background-color: var(--colorOne);
   color: var(--white-1);
   outline: none;
   border: none;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
    padding-left: 10px;
    font-size: 17px;
    position: relative;
    z-index: 2;
    cursor: pointer;
    right: 5px;
  }
}
@media only screen and (max-width: 501px){
  .chearchUser input[type="search"]{
    height: 40px;
    width: 70%;

  }
  .chearchUser input[type="submit"]{
    height: 40px;
    width: 70px;
   background-color: var(--colorOne);
   color: var(--white-1);
   outline: none;
   border: none;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
    padding-left: 10px;
    font-size: 17px;
    position: relative;
    z-index: 2;
    cursor: pointer;
    right: 5px;
  }
  .membreTitle {
    height: 70px;
    width: 100vw;
    display: flex;
    /* background-color: #4CAF50; */
    justify-content: space-between;
    align-items: flex-end;
  }
  .membreTitle h3, .membreTitle a {
    color: var(--black-1);
    font-size: 14px;
  padding: 0 30px;
  }

}
@media only screen and (max-width: 871px){
  .card-generale {
    margin-top: 0;
  }
  .img-admin {
    height: 100px;
    width: 100px;
  }

  .admin-infos {
    min-height: 201px;
  }
  .historique {
    height: 40px;
    width: 95%;
    margin-bottom: 25px;
    border-radius: 25px;
  }
  .dash-space a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: var(--color-footer);
    height: 155px;
    width: 23%;
    text-align: center;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    margin: 20px 30px;
    border-radius: 5px;
    font-size: 19px;
  }
}
@media only screen and (max-width: 655px){
  .dash-space a {

    font-size: 16px;
  }
}
@media only screen and (max-width:572px){
  .dash-space a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: var(--color-footer);
    height: 132px;
    width: 22%;
    text-align: center;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    margin: 20px 30px;
    border-radius: 5px;
    font-size: 15px;
  }
}

@media only screen and (max-width:529px){
  .dash-space a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: var(--color-footer);
    height: 132px;
    width: 27%;
    text-align: center;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    margin: 20px 10px;
    border-radius: 5px;
    font-size: 15px;
  }
  .admin-infos {

    margin-top: 20px;
  }
}
@media only screen and (max-width:450px){
  .dash-space a {
    font-size: 13px;
    font-weight: 400;
  }


  }

  @media only screen and (max-width:395px){
    .dash-space a {
      width: 37%;
      font-size: 15px;
    }
  
    }
  




.fuserTop{
  height: 45px;
  width: 100%;
  /* background-color: #b3ccfc; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fuserTop p{
color: var(--white-1);
font-size: 16px;
padding: 0 10px;
}
.p_id{
height: 100%;
min-width:30px ;
background-color: var(--white-1);
display: flex;
align-items: center;
border-bottom-right-radius: 7px;
}
.p_id p{
color: var(--black-1);
font-size: 16px;
  }

.MembrePhonrW{
  display: none;
}
  
.actionUse{
  height: 56.5px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
}
.actionUse a{
  height: 30px;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 17px;
}

.actionUse a:nth-child(1){
background-color: green;
color: var(--white-1);
}
.actionUse a:nth-child(2){
  background-color: var(--white-1);
  color: var(--black-1);
  }
.actionUse a:nth-child(3){
    background-color: rgb(165, 22, 22);
    color: var(--white-1);
    }
    
  

@media only screen and (max-width:2080px){
  .cardUser {
    height: 192px;
    width: 45%;
    background-color: var(--colorOne);
    box-shadow: 10px 10px 10px rgb(233, 233, 233, 0.5);
    margin: 20px;
  }
}

@media only screen and (max-width:1350px){
  .membre-bigMain {
    /* background-color: #08a8c4; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
  }

  .cardUser {
    height: 192px;
    width: 90%;
    background-color: var(--colorOne);
    box-shadow: 10px 10px 10px rgb(233, 233, 233, 0.5);
    margin: 20px;
  }

}
@media only screen and (max-width:755px){
  
  .membreTitle{
    margin-top: 100px;
  }
}


@media only screen and (max-width:650px){
  .fuserTop p {
    padding: 0 3px;

  }
  .fuserTop p {
    color: var(--white-1);
    font-size: 12px;
    padding: 0 10px;
  }

  .fuserTop {
    height: 30px;
    width: 100%;
  }
  .cardUser {
    height: 188px;
    width: 90%;
  }
  .fuserTop p {
    color: var(--white-1);
    font-size: 13px;
    padding: 0 10px;
  }
  .p_id p{
    color: var(--black-1);
  }

  .adresseRaison, .emailNum, .MembrePC{
    display: none;
    }
    .MembrePhonrW{
      margin-top: 5px;
      min-height: 120px;
      width: 100%;
      /* background-color: #7d0388; */
      display: flex;
      flex-direction: column;
      justify-content:space-between;
      align-items: start;

    }
    .actionUse {
      height: 27.5px;
      width: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: space-around;
      /* background-color: aliceblue; */
    }

    .actionUse a {
      height: 26px;
      width: 47px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 15px;
      border-radius: 25px;
    }
    .fuserTop p {
      font-size: 11px;
      padding: 0 10px;
    }
   
}



@media only screen and (max-width:501px){
  .membreTitle h3{
    color: var(--black-1);
    font-size: 14px;
  }
  .fuserTop {
    height: 20px;
    width: 100%;
  }
  .actionUse {
    height: 37.5px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    /* background-color: aliceblue; */
  }
}

/* DEVIS CHOIX INDIVIDUEL  */
.selectDevis{
  min-height: 600px;
  width: 100vw;
  /* background-color: #01507e; */
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.selectDevis h1{
margin-bottom: 50px;
margin-top: 50px;
color: var(--black-2);
}




.selectDevisCard{
  min-height: 200px;
  width: 800px;
  display: flex;
  justify-content:space-between;
  align-items: center;
  /* background-color: #d66800; */
}
/* .selectDevisCard a{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content:space-between;
  align-items: center;
  background-color: #72195f;
} */
.selectDevisCard input[type="radio"]{
  display: none;
}
.selectDevisCard label{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 90px;
  width: 220px;
  color: var(--colorOne);
  font-size: 17px;
  border: 1px solid var(--colorOne);
  border-radius: 7px;
  cursor: pointer;

}


.selectDevisCard input[type="radio"]:checked + label{
  background-color: var(--colorOne);
  color: var(--white-1);
}

.selectRedirection{
  min-height: 100px;
  width: 100vw;
  display: flex;
  align-items: center;
justify-content: center;
  /* background-color: #01507e; */
  margin-top: 30px;
}

.selectRedirection a{
border-left: none;
border-right: none;
border-top: none;
padding: 10px 0;
border-bottom: solid  2px var(--colorOne);
color: var(--colorOne);
font-size: 17px;
display: none;
}


@media only screen and (max-width: 821px){
  .selectDevis h1 {
    margin-bottom: 50px;
    margin-top: 50px;
    color: var(--black-2);
    font-size: 25px;
  }
  .selectDevisCard {
    min-height: 300px;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: #d66800; */
    flex-direction: column;
    margin-top: 5rem;
  }
  .selectDevisCard label {
    height: 75px;
    width: 95%;
  }

}

@media only screen and (max-width: 821px){
  .selectDevis h1 {
    margin-bottom: 50px;
    margin-top: 12rem;
    color: var(--black-2);
    font-size: 25px;
  }

}

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

  .selectDevis h1 {
    margin-bottom: 15px;
    margin-top: 10rem;
    color: var(--black-2);
    font-size: 20px;
  }
  .selectDevisCard label {
    height: 64px;
    width: 88%;
  }
}

@media only screen and (max-width: 437px){
  .selectDevis h1 {
    font-size: 16px;
  }
}
@media only screen and (max-width: 361px){
  .selectDevis h1 {
    font-size: 14px;
  }
}


/* PANIER PANIER PANIER PANIER PANIER PANIER PANIER */
.panierForm{
  min-height: 700px;
  width: 100vw;
  /* background-color: #049228; */
  display: flex;
  flex-direction: column;
align-items: center;
}
.panierForm h1{
color: var(--black-2);
font-size: 20px;
margin-top: 50px;
margin-bottom: 50px;
}
.cardPanierProduit{
  height: 100px;
  width: 800px;
box-shadow: 10px 10px 10px rgb(230, 230, 230, 0.5);
border:  0.5px solid rgb(230, 230, 230, 0.5);
display: flex;
margin: 15px 0;
border-radius: 10px;
}
.cardPanierProduitLeft{
  height: 100%;
  width: 15%;
  /* background-color: #2a2f31; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.lineImg{
  height: 100%;
  width: 1px;
  background-color:rgba(209, 209, 209, 0.5);
}
.cardPanierProduitLeft img{
  height: 60px;
  width: 60px;
  object-fit: cover;

}

.cardPanierProduitRight{
  height: 100%;
  width: 85%;
}

.titreProduit{
  height: 25%;
  width: 100%;
  /* background-color: #01507e; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.titreProduit h2{
font-size: 15px;
color: var(--black-1);
}
.DescProuitPanier{
  height: 75%;
  width: 100%;
  display: flex;
}
.quantitePpanier{
  height: 100%;
  width: 80%;
  /* background-color: #01507e; */
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.quantitePpanier input[type="number"]{
height: 35px;
width: 100px;
border-radius: 7px;
border:  solid 0.5px rgba(209, 209, 209, 0.5);
text-align: center;
font-size: 17px;
appearance: none; /* Supprime l'apparence par défaut */
-moz-appearance: textfield;

}
.quantitePpanier span{
  height: 35px;
  width: 100px;
  display: flex;
  color: var(--black-1);
  justify-content: center;
  align-items: center;
  border-radius: 7px;
  font-size: 17px;
  }
  .quantitePpanier span i{
font-size: 13px;
color: var(--black-1);
    }
    

.PrixPpanier{
  height: 100%;
  width: 20%;
  /* background-color: #61017e; */
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.PrixPpanier label i{
  color: #049228;
  font-size: 17px;
  cursor: pointer;
}
.PrixPpanier a{
color:rgb(185, 35, 35);
font-size: 17px;
}

.smallForm{
  height: 30px;
  width: 100px;
  background-color: #049228;
}

.quantitePpanier button{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35px;
  width: 80px;
  padding: 0;
  margin: 0;
  background-color: var(--colorOne);
  color: var(--white-1);
  outline: none;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;

}
.PrixPpanier input[type="submit"]:hover{
  background-color: var(--black-1);

}

.commander{
  height: 100px;
  width: 800px;
  /* background-color: #01507e; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.commander input[type="submit"]{
  height: 60px;
  width: 200px;
  background-color: var(--colorOne);
  color: var(--white-1);
  font-size: 17px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 7px;
}
.commander input[type="submit"]:hover{
  background-color: var(--black-1);
}
/* PANIER VIDE PANIER VIDE PANIER VIDE PANIER VIDE PANIER VIDE PANIER VIDE */
.PanierVide{
  height: 600px;
  width: 100vw;
  /* background-color: #01507e; */
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--colorOne);
  font-size: 16px;
}


/* ADRESSE DE LIVRAISON ADRRESSE DE LIVRAISON ADRESSE DE LIVRISON */

.containerAdresse{
  min-height: 670px;
  width: 100vw;
  /* background-color: #049228; */
  display: flex;
  justify-content: center;
}
.AdresseCard{
min-height: 670px ;
width: 600px;
/* background-color: #08a8c4; */
}

.AdresseTitle{
  height: 12%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: #7d0388; */
}
.AdresseTitle h3{
font-size: 20px;
color: var(--black-2);
}

.ad_codeP{
  height: 12%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: #7d0388; */
}
.add, .code_cp{
height: 100%;
width: 45%;
display: flex;
flex-direction: column;
/* background-color: #ca6a0f; */
justify-content: space-evenly;
margin-bottom: 2px;

}
.code_cp{
  /* background-color: #31b94f; */
}
.add input[type="text"], .code_cp input[type="text"]{
  height: 52px;
  width: 250px;
  border-radius: 4px;
  color: var(--black-1);
  outline: none;
  font-size: 14px;
  border:  0.5px solid var(--white-4);
  padding-left: 7px;
}
.add label, .code_cp label, .ville label{
  font-size: 16px;
  color: var(--black-1);

}
.ville {
  height: 15%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content:space-around;
  /* background-color: #7d0388; */
  margin-bottom: 10px;
}
.ville input[type="text"]{
  height: 52px;
  width: 577px;
  border-radius: 4px;
  color: var(--black-1);
  outline: none;
  font-size: 14px;
  border:  0.5px solid var(--white-4);
  padding-left: 7px;
}

.montant{
  height: 5%;
  width: 100%;
  /* background-color: #7d0388; */
  display: flex;
  justify-content: center;
  align-items: center;

}
.montant p{
font-size: 16px;
color: var(--colorOne);
}
.btnCommandeNext{
  height: 11%;
  width: 100%;
  /* background-color: #7d0388; */
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.btnCommandeNext input[type="submit"]{
height: 52px;
width: 200px;
background-color: var(--colorOne);
color: var(--white-1);
font-size: 17px;
cursor: pointer;
outline: none;
border: none;
border-radius: 5px;

}
@media only screen and (max-width:871px){
.containerAdresse{
  margin-top: 5rem;
}

}

@media only screen and (max-width:623px){
  .AdresseCard {
    height: 670px;
    width: 95%;
    /* background-color: #08a8c4; */
  }

  .ville input[type="text"] {
    height: 52px;
    width: 98%;
    border-radius: 4px;
    color: var(--black-1);
    outline: none;
    font-size: 14px;
    border: 0.5px solid var(--white-4);
    padding-left: 7px;
  }
  .add input[type="text"], .code_cp input[type="text"] {
    height: 52px;
    width: 96%;
    border-radius: 4px;
    color: var(--black-1);
    outline: none;
    font-size: 14px;
    border: 0.5px solid var(--white-4);
    padding-left: 7px;
  }
  }

  @media only screen and (max-width:430px){
   
    .add label, .code_cp label, .ville label{
      font-size: 14px;
      color: var(--black-1);
    }
    .AdresseTitle h3 {
      font-size: 16px;
      color: var(--black-2);
    }
    .AdresseCard {
      height: 670px;
      width: 90%;
      /* background-color: #08a8c4; */
    }

    .ville input[type="text"] {
      height: 45px;
      width: 98%;
      border-radius: 4px;
      color: var(--black-1);
      outline: none;
      font-size: 14px;
      border: 0.5px solid var(--white-4);
      padding-left: 7px;
    }
  }
  .panier_title{
    height: 100px;
    width: 100vw;
    /* background-color: #01507e; */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .panier_title h3{
color: var(--black-2);
font-size: 20px;
  }
  .panier_title h3 i{
    font-size: 16px;
      }
    
@media only screen and (max-width:871px){
  .cardPanierProduit {
    height: 100px;
    width: 90%;
  }
  .panier_title{
    margin-top: 7rem;
  }
  .titreProduit h2 {
    font-size: 15px;
    color: var(--colorOne);
  }
  .quantitePpanier {
    height: 100%;
    width: 80%;
  }
  .cardPanierProduitLeft {
    height: 100%;
    width: 35%;
  }
  .PrixPpanier {
    height: 100%;
    width: 23%;
  }
}

@media only screen and (max-width:614px){
  .ad_codeP {
    height: 180px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: revert;
    /* background-color: #7d0388; */
    flex-direction: column;
  }
  .add, .code_cp {
    height: 48%;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* background-color: #ca6a0f; */
    justify-content: space-evenly;
    margin-bottom: 2px;
  }
}











/* AFFICHAGE DES COMMANDES COTE ADMINISTRATEUR */
.container_forms_commande{
  min-height: 600px;
  width: 100vw;
  /* background-color: #6b8492; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.titleCommande{
  height: 60px;
  width: 100vw;
  /* background-color: #4CAF50; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.titleCommande h2{
color: var(--black-2);
}
.returnDiv{
  height: 45px;
  width: 1300px;
  /* background-color: #01507e; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.returnDiv a{
color: var(--black-2);
font-size: 17px;
}

.formcommande{
min-height: 250px;
width: 95%;
/* background-color: #08a8c4; */
margin-top: 25px;
border-radius: 10px;
border: solid 1px rgb(232, 232, 232);
box-shadow: 10px 10px 10px rgb(233, 233,233, 0.5);
}
.infoSub{
  color: var(--black-3);
}
.topCommande, .topCommande2{
  min-height: 45px;
  display: flex;
  /* background-color: rgb(53, 53, 53); */
  background-color: rgb(238, 238, 238);
  justify-content: space-between;
  align-items: center;

}
.topCommande{
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.topCommande2{
  margin-top: 15px;
  /* background-color: #72195f; */
}
.topCommande,  .topCommande2 p{
color: var(--colorOne);
font-size: 17px;
padding:  0 10px;
font-weight: bold;
font-weight: 500;
}

.infosCommande{
  min-height: 35px;
  width: 100%;
  display: flex;
  /* background-color: #01507e; */
  justify-content: space-between;
  align-items: center;
}
.infosCommande p{
color: var(--black-1);
font-size: 17px;
padding:  0 10px;
}
.infosCommande p i{
  font-size: 15px;
  }
  .titreStatutAll{
    min-height: 35px;
    width: 100%;
    display: flex;
    /* background-color: #677e01; */
    justify-content: space-between;
    align-items: flex-end;
  }
  
  .titreStatutAll p{
padding: 0 10px;
color: var(--black-1);
  }

  .statutCommande{
    min-height: 21px;
    width: 100%;
    display: flex;
    /* background-color: #01507e; */
    justify-content: space-between;
    align-items: center;
  }

  .infosProduit{
    min-height: 40px;
display: flex;
justify-content: space-between;

  }

  .infosProduit a,   .infosProduit p{
    color: var(--black-1);
    padding: 0 10px;
      }

      .infosProduit a{
        color: var(--colorOne);
      }
      .infosProduit a b{
        color: var(--black-1);
      }
.mainAndPhoneModule, .interAndEtageModule, .infs2{
  display: none;
}
  .statutCommande select{
  height: 35px;
  width: 200px;
  background-color: var(--colorOne);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  border-radius: 3px;
  color: var(--white-1);
  font-size: 17px;
  margin: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding-left: 10px;

  }
.statut label{
display: none;
}
  .btn_actions{
    height: 70px;

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

  .btn_actions a{

  }
  .btn_actions button[type="submit"],   .btn_actions a {
    padding:0;
    height: 45px;
    width: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 5px;
    color: var(--white-1);
    font-size: 17px;
    background-color: var(--colorOne);
    cursor: pointer;
  }

.btn_actions a:nth-child(1){
background-color: rgb(173, 16, 16);
  }
  
.btn_actions a:nth-child(2){
  background-color: rgb(0, 0, 0);
    }

    .btn_actions button[type="submit"] {
background-color: #049228;


      }
      
    .userScreen{
      height: 60vh;
      width: 100vw;
      /* background-color: #01507e; */
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .userScreen p{
      height: 40px;
      min-width: 300px;
      display: flex;
padding-left: 5px;
      align-items: center;
      background-color: #242531;
      color: white;

    }

@media only screen and (max-width: 850px){
  .infosCommande {
    min-height: 100px;
    width: 100%;
    display: flex;
    /* background-color: #01507e; */
    align-items: start;
    flex-direction: column;
    margin-top: 10px;
  }
  .emailModule, .phoneModule{
    display: none;
  }
  .mainAndPhoneModule, .interAndEtageModule, .infs2{
    display: flex;
  }

  .intermodule, .etagemodule, .titreStatutAll, .infs1, .prixProduitCommandescript{
    display: none;
  }
  .statut{
    min-height: 200px;
    display: flex;
    flex-direction: column;

  }
  .statut label{
    display: block;
  margin-top: 10px
    
  }

  .statutCommande select {
    height: 55px;
    width: 100%;

  }


}

@media only screen and (max-width:871px){
  .titleCommande{
margin-top: 5rem;
  }
  .titleCommande h2 {
    color: var(--black-2);
    font-size: 17px;
  }

.btn_actions button[type="submit"]{
  margin: 0;
}
}

@media only screen and (max-width:550px){
  .statutCommande {
    min-height: 21px;
    width: 100%;
    display: flex;
    /* background-color: #01507e; */
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
  }


  .statutCommande select {
    height: 55px;
    width: 98%;
  }
  .statut label {
    display: block;
    margin-top: 10px;
    margin-left: 10px;
  }

  .btn_actions button[type="submit"], .btn_actions a {
    padding: 0;
    height: 45px;
    width: 84px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 5px;
    color: var(--white-1);
    font-size: 11px;
    cursor: pointer;
  }
  .infosProduit a {
    color: var(--colorOne);
    font-size: 14px;
  }
  .topCommande, .topCommande2 {
    min-height: 45px;
    display: flex;
    background-color: rgb(53, 53, 53);
    background-color: rgb(238, 238, 238);
    justify-content: space-between;
    align-items: center;
    width: 97.7%;
    margin-left: 10px;
  }

}

@media only screen and (max-width:400px){
  .topCommande, .topCommande2 p {
    color: var(--colorOne);
    font-size: 14px;
    font-weight: bold;
    font-weight: 500;
  }
  .List-Title h2, h3, p, span {


  }
}
/* 
ContainerCommandeLises ContainerCommandeLises */
.containerCommandeListeTitle{
  height: 130px;
  width: 100vw;
  /* background-color: #01507e; */
  display: flex;
  justify-content: center;
  align-items: center;

}

.containerCommandeListeTitle h1{
color: var(--black-1);
font-size: 20px;
  
}
.triageCommandes{
  min-height: 60px;
  width: 100vw;
  /* background-color:blueviolet ; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.triageCommandes a{
display: flex;
justify-content: center;
align-items: center;
height: 45px;
padding: 0 10px;
border-radius: 7px;
min-width: 60px;
margin: 0 60px;
color: var(--black-1);
background-color: var(--white-2);
}

.triageCommandes a:hover{
  color: var(--white-1);
  background-color: var(--colorOne);
  }


 .triageCommandes .tousCommandes{
    color: var(--white-1);
    background-color: var(--colorOne);
  }

.containerCommandeListe{
  min-height: 219px;
  width: 100vw;
  /* background-color: #01507e; */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.cardCommandeList{
  height: 150px;
  width: 800px;
  display: flex;
flex-direction: column;
  border-radius: 7px;
  margin: 20px 0;
  border: solid 0.5px rgb(233, 233, 233);
box-shadow: 10px 10px 10px rgb(233, 233, 233, 0.5);
}

.cardCommandeList a{
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
border-radius: 7px;
margin: 20px 0;
}
.num-dateC{
  height: 35px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--colorOne);
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

.num-dateC p{
color: var(--white-1);
font-size: 16px;
padding: 0 10px;
}

.ProduitsC{
  height: 31px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

}
.ProduitsC p{
  color: var(--black-1);
  font-size: 16px;
  padding: 0 10px;

}
.searchCommandeAdmin{
  height: 100px;
  width: 100vw;
  /* background-color: #01507e; */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.searchCommandeAdmin input[type="search"]{
height: 55px;
width: 735px;
padding-left: 50px;
color: var(--black-2);
font-size: 16px;
border-radius: 7px;
outline: none;
border: solid 0.5px rgb(233,233,233);
position: relative;
z-index: 1;
}

.searchCommandeAdmin i{
position: relative;
left: 37px;
z-index: 2;
font-size: 20px;
color: var(--black-3);
  }

  .searchCommandeAdmin input[type="submit"]{
    height: 55px;
    z-index: 2;
    width: 80px;position: relative;
    right:18px;
    background-color: var(--colorOne);
    border: none;
    outline: none;
    color: var(--white-1);
    font-size: 17px;
    border-top-right-radius:7px;
    cursor: pointer;
    border-bottom-right-radius:7px
      }


      /* ESPACE ADMIN MODIFICATIONS D'INFORMATIONS */

    .TitleInfosPersoAdmin{
        height: 70px;
        width: 100vw;
        /* background-color: #01507e; */
        display: flex;
        justify-content: center;
        align-items: flex-end;
      }

.PicturAdmin{
  height: 100px;
  width: 100%;
  /* background-color: #b3ccfc; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.picturAdimncercle{
  height: 90px;
  width: 90px;
  border-radius: 50%;
  background-color: #01507e;
  position: relative;
  z-index: 0;
}
.picturAdimncercle img{
  height: 100%;
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
position: absolute;
z-index: 1;


}
.labelCercle{
  height: 100%;
  width: 100%;
  /* background-color: #72195f; */
  position: absolute;
  z-index: 4;
  border-radius: 50%;
  display: flex;
  align-items: flex-end;
}
.picturAdimncercle input[type="file"]{
  display: none;
}
.picturAdimncercle label{

height: 40%;
width: 100%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;

}


      .TitleInfosPersoAdmin h2{
 color: var(--black-2);
      }

      .adminContainere{
        min-height: 400px;
        width: 100vw;
        /* background-color: #01507e; */

        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

  .formAdmin{
    min-height: 300px;
    width: 800px;
    background-color: #f5f5f5;
    border-radius: 7px;
border: solid 0.5px #e7e7e7;
margin-top: 20px;

  }
  .nameZoneOne{
    height: 80px;
    width: 100%;
    /* background-color: #01507e; */
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
  }
  .formName{
    height: 100%;
    width: 47%;
    /* background-color: #724819; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .formName input[type="text"]{ 
    height: 50px;
    width: 96%;
    column-rule: var(--black-2);
    font-size: 17px;
    border: 0.5px solid rgb(221, 221, 221);
    padding-left: 10px ;
  }
  .formName label{
    font-size: 17px;
    color: var(--black-1);
    padding-left: 5px;
  }
  .formNameAdresse{
    height: 100%;
    width: 100%;
    /* background-color: #724819; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .formNameupdateMdp{
    height: 100%;
    width: 100%;
    /* background-color: #724819; */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .formNameupdateMdp a{
color: var(--colorOne);
font-weight: bold;
padding: 20px 0;
  }
  .formNameAdresse input{
    height: 50px;
    width: 98%;
    column-rule: var(--black-2);
    font-size: 17px;
    padding-left: 10px ;
    border: 0.5px solid rgb(221, 221, 221);
    margin-bottom: 10px;
  }

  .formNamemdp input{
    height: 50px;
    width: 98%;
    column-rule: var(--black-2);
    font-size: 17px;
    padding-left: 10px ;
    border: 0.5px solid rgb(221, 221, 221);
    margin-top: 5px;
  }
  

.formName input[type="file"]{
  display: none;
  }


  


.submitupdat{
  height: 80px;
  width: 100%;
  /* background-color: #01507e; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.submitupdat input[type="submit"]{
  height: 55px;
  width: 160px;
  background-color: var(--colorOne);
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  color: var(--white-1);
  font-size: 17px;
  border-radius: 5px;
  cursor: pointer;
}

.retourDash{
  height: 55px;
  width: 100vw;
  /* background-color: var(--colorOne); */
  display: flex;
  justify-content: center;
  align-items: center;
}
.retourDashCenter{
  height: 100%;
  width: 800px;
  /* background-color: var(--colorOne); */
  display: flex;
  justify-content: left;
  align-items: center;
}
.retourDash a{
 color: var(--black-2);
 margin-left: 7px;
}

@media only screen and (max-width:853px){
  .formAdmin {
    min-height: 300px;
    width: 90%;
    background-color: #f3f3f3;
    border-radius: 7px;
    border: solid 0.5px #e7e7e7;
  }
  .retourDashCenter {
    height: 100%;
    width: 90%;
  }
}

@media only screen and (max-width:871px){
  .TitleInfosPersoAdmin {
    height: 100px;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4rem;
  }

}
@media only screen and (max-width:659px){
  .formName input[type="text"] {
    height: 50px;
    width: 96%;
    column-rule: var(--black-2);
    font-size: 13px;
    border: 0.5px solid rgb(221, 221, 221);
    padding-left: 10px;
  }

  .formNameAdresse input[type="text"] {
    height: 50px;
    width: 98%;
    column-rule: var(--black-2);
    font-size: 13px;
    padding-left: 10px;
    border: 0.5px solid rgb(221, 221, 221);
  }
  .TitleInfosPersoAdmin h2 {
    color: var(--black-2);
    font-size: 20px;
  }
}

@media only screen and (max-width:659px){
  .formName input[type="text"] {
    height: 50px;
    width: 92%;
    column-rule: var(--black-2);
    font-size: 13px;
    border: 0.5px solid rgb(221, 221, 221);
    padding-left: 10px;
  }
  .formNameAdresse input[type="text"] {
    height: 50px;
    width: 95.5%;
    column-rule: var(--black-2);
    font-size: 13px;
    padding-left: 10px;
    border: 0.5px solid rgb(221, 221, 221);
  }
  .formNamemdp input {
    height: 50px;
    width: 95.5%;
    column-rule: var(--black-2);
    font-size: 11px;
    padding-left: 10px;
    border: 0.5px solid rgb(221, 221, 221);
    margin-top: 5px;
  }
}

@media only screen and (max-width:516px){
  .formNameAdresse input[type="text"] {
    font-size: 11px;
  }
  .formName input[type="text"] {
    font-size: 11px;
  }
  .formName label {
    font-size: 14px;
    color: var(--black-1);
  }
  .TitleInfosPersoAdmin h2 {
    color: var(--black-2);
    font-size: 15px;
  }

}
@media only screen and (max-width:460px){
  .formNameAdresse input[type="text"] {
    font-size: 9px;
  }
  .formName input[type="text"] {
    font-size: 9px;
  }

}
@media only screen and (max-width:444px){
  .formName label {
    font-size: 11px;
  }
}



@media only screen and (max-width:700px){
  .nameZoneOne {
    height: 190px;
    width: 100%;
    /* background-color: #01507e; */
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
    flex-direction: column;
  }

  .formName {
    height: 48%;
    width: 100%;
    /* background-color: #724819; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .formName input[type="text"] {
    height: 55px;
    width: 98%;
    border-radius: 7px;
  }
}





















/* UODATE MDP UODATE MDP UODATE MDP UODATE MDP UODATE MDP UODATE MDP UODATE MDP  */
.updateMdoContainer{
  height: 800px;
  width: 100vw;
  /* background-color: #b3ccfc; */
  display: flex;
align-items: center;
  flex-direction: column;

}

.mdpupdateTitle{
  height: 150px;
  width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: #01507e; */
}
.mdpupdateTitle h3{
color: var(--black-1);
}

.cardContainteMDP{
height: 60%;
width: 550px;
background-color: rgb(243, 243, 243);
border-radius: 7px;
display: flex;
flex-direction: column;
align-items: center;
}
.mdpform1{
  height: 150px;
  width: 95%;
  display: flex;
  flex-direction: column;
  /* background-color: #724819; */
  margin: 5px 0;
}
.mdpform1 label, .mdpform1 input[type="password"]{
  margin: 10px 0;
}
.mdpform1 input[type="password"]{
height: 70px;
width: 98%;
border: 0.5px solid rgb(235, 235, 235);
color: var(--black-1);
font-size: 16px;
padding-left: 10px;
/* background-color: #01507e; */
border-radius: 8px;
}

.cardContainteMDP a{
  display: flex;
  align-self: self-end;
  padding: 10px 20px;
  color: var(--black-1);
}


.mdpform1 input[type="submit"]{
height: 70px;
width: 98%;
background-color: var(--colorOne);
color: var(--white-1);
font-size: 17px;
border-radius: 10px;
border: none;
cursor: pointer;
}

@media only screen and (max-width:755px){
  .mdpupdateTitle {
    margin-top: 3rem;
  }
}

@media only screen and (max-width:575px){
  .cardContainteMDP {
    height: 60%;
    width: 90%;
    background-color: rgb(243, 243, 243);
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.userSpaceTitle{

  height: 90px;
  width: 100vw;
  /* background-color: #01507e; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.userSpaceTitle h1{
  color: var(--black-1);
  font-size: 26px;
}
.userSpace{
  height: 60px;
  width: 100vw;
  /* background-color: #01507e; */
  display: flex;
  justify-content: center;
  align-items: center;
}


.userSpace .perso, 
.userSpace .commande
{
height: 80%;
width: 350px;
margin: 0 30px;
background-color: var(--white-1);
border-radius: 5px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
color: var(--black-1);
font-size: 20px;
}




.UserSpaceContainer{
  min-height: 750px;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: #01507e; */
}
.userInfosCompte{
  min-height: 700px;
  width: 800px;
  background-color: var(--white-1);
  border-radius: 7px;
}

.userSpace .perso{
  color: var(--white-1);
  background-color: var(--colorOne);
}


.userInfosCommande{
  background-color: #b0d317;
  display: none;
  min-height: 700px;
  width: 800px;
  border-radius: 7px;
}

.u_spaceName{
  height: 70px;
  width: 100%;
  /* background-color: #01507e; */
  display: flex;
  align-items: center;
  justify-content: center;

}
.u_nameTitle{
  height: 50px;
  width: 100%;
  /* background-color: #41e272; */
  display: flex;
  align-items: center;
  justify-content: center;
}
.u_nameTitle p{
  margin: 100px;
  font-size: 17px;
  font-weight: 500;
color: var(--black-1);
}




.u_spaceName .u_name{
  height: 50px;
  width: 30%;
border: solid 0.1px var(--colorOne);
font-size: 17px;
color: var(--black-1);
display: flex;
justify-content: center;
align-items: center;
border-radius: 7px;
margin: 20px;
}

.contactName{
  display: flex;
  justify-content: space-between;
}
.u_nameInput{
  /* background-color: #08a8c4; */
  height: 50px;
  display: flex;
  justify-content: space-around;

}
.u_spaceName input[type="text"],
.u_spaceName input[type="password"]{
height: 90%;
width: 360px;
border-radius: 5px;
font-size: 16px;
color: var(--black-1);
padding-left: 10px;
border: solid 0.1px var(--colorOne);
}

.confirmationMDP input[type="text"]{
  height: 90%;
width: 95%;
border-radius: 5px;
font-size: 16px;
color: var(--black-1);
padding-left: 10px;
border: solid 0.1px var(--colorOne);
}
.confirmationMDP input[type="submit"]{
  height: 82%;
width: 95%;
border-radius: 5px;
font-size: 16px;
color: var(--black-1);
padding-left: 10px;
border: none;
background-color: var(--colorOne);
color: var(--white-1);
font-size: 20px;
cursor: pointer;
margin-top: 0;
}
.deleteCount{
  height: 80px;
  width: 100%;
  /* background-color: #636363; */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.deleteCount a{
color: rgb(167, 3, 3);
font-size: 16px;
}

.mailAllContainer{
  height: 100vh;
  width: 100vw;
  /* background-color: rgb(72, 204, 101); */
  display: flex;
  justify-content: center;
  align-items: center;
}
.emailContainer{
  height: 98%;
  width: 98%;
  background-color: var(--colorOne);
}

.corpsLogo{
height: 10%;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
/* background-color: #828ce4; */
}
.corpsLogo img{
  height: 40px;
  width: 40px;
  object-fit: cover;
  
  }
  .corpsLogo h2{
  color:var(--white-2) ;
    
    }
  .corpsLogo img,  .corpsLogo h2{
   margin:  0 70px;
    
    }

    .corpsMessages{
      height: 45%;
      width: 100%;
      background-color: white;
    }
    .corpsMessages p{
      height: 45%;
      width: 100%;
      background-color: white;
      color: var(--black-1);
      font-size: 15px;
      
    }
    .corpsMessages p .bonjourChersUser{
      color: var(--colorOne);
      font-size: 17px;
      line-height: 0.7;
    }

    @media only screen and (max-width:871px){
      .userSpaceTitle {
        margin-top: 7rem;
      } 
      .confirmationMDP input[type="submit"] {
        height: 95%;
      }
    }
    
    
    @media only screen and (max-width:828px){
      .userInfosCompte {
        min-height: 700px;
        width: 95%;
      }

   
    }
    .u_spaceName .u_name b,  .u_spaceName .u_name p, .u_nameInput i{
      display: none;
  }
    @media only screen and (max-width: 809px){
      .u_spaceName {
        height: 70px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }
      .u_nameTitle{
    display: none;
       }
       .u_spaceName {
        height: 306px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
      }
      .u_spaceName .u_name {
        height: 50px;
        width: 95%;
        border: solid 0.1px var(--colorOne);
        font-size: 17px;
        color: var(--black-1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 7px;
        margin: 0;
      }
      .u_spaceName .u_name b,  .u_spaceName .u_name p, .u_nameInput i{
        display: block;
    }
      .u_spaceName .u_name b{
          padding-left: 7px;
      }


      .u_spaceName input[type="text"], .u_spaceName input[type="password"] {
        height: 20%;
        width: 98%;
        border-radius: 5px;
        font-size: 16px;
        color: var(--black-1);
        padding-left: 10px;
        border: solid 0.1px var(--colorOne);
      }
      .userSpace {
        margin-bottom: 2rem;
      }

.u_nameInput{
  height: 145px;
    width: 100%;
    margin-bottom: 3rem;
    display: flex;
    justify-content: space-between;
    position: relative;
}
.u_spaceName input[type="text"], .u_spaceName input[type="password"] {
  height: 50px;
  width: 89%;
  border-radius: 5px;
  font-size: 16px;
  color: var(--black-1);
  padding-left: 50px;
  border: solid 0.1px var(--colorOne);
  margin: 0;
}
.u_nameInput i:nth-child(1) {
  position: absolute;
 top: 17px;
    left: 25px;
}
.u_nameInput i:nth-child(2) {
  position: absolute;
  top: 112px;
  left: 25px;
}
    }
@media only screen and (max-width:571px){
  .userSpace .perso {
    color: var(--white-1);
    background-color: var(--colorOne);
    font-size: 15px;
  }
  .userSpace .perso, .userSpace .commande {
    height: 80%;
    width: 350px;
    margin: 0 30px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 15px;
  }


}

@media only screen and (max-width:567px){
  .u_spaceName input[type="text"], .u_spaceName input[type="password"] {
    height: 50px;
    width: 85%;
  }
}

@media only screen and (max-width:461px){
  .u_spaceName input[type="text"], .u_spaceName input[type="password"] {
    height: 50px;
    width: 83%;
  }
}

@media only screen and (max-width:381px){
  .u_spaceName input[type="text"], .u_spaceName input[type="password"] {
    height: 50px;
    width: 81%;
  }
}
@media only screen and (max-width:871px){
  .dernier {
    height: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
  }

  .avantd{
    height: 67px;
  }
}