@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url(./fonts/font-poppins/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* latin-ext */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url(./fonts/font-poppins/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url(./fonts/font-poppins/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body{

    background-color: #f0f0f0;
    min-height: 100vh;

}

/* Header */
.divHeader{

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: solid;
    border-width: 1.3vw;
    background-color: #415455;
    border-color: #96be2f;

}


.divAllBoutonHeader{

    margin: auto 0px;
    display: flex;
    flex-direction: row;

}

.divHeaderButton, #divHeaderLogo{

    margin: auto 0px;


}

#divHeaderLogo img{

    width: 19vw;

}

.ButtonHeader{

    background-color: #415455;
    color: white;
    padding: 1vw;
    margin: auto 1vw;
    vertical-align: middle;
    border: none;
    font-size: 1vw;
    font-family: 'Poppins', sans-serif;
    transition: background-color 0.2s;
    border-radius: 10vw;


}

.ButtonHeader:hover{

    background-color: #96be2f;
    cursor: pointer;

}

.ButtonHeaderIn{

    background-color: #96be2f;


}

.ButtonHeaderIn:hover{

    cursor: pointer;
    color: black;

}

#banniere img{

    width: 10.5vw;

}

#divAllButtonEssentiel{

    display: flex;
    flex-direction: column;
    margin: auto;
    justify-content: center;
    padding: 7.5vh 0;


}

#divButtonEssentielStay{

    display: flex; 
    flex-direction: row; 
    margin: auto;
    background-color: transparent;

}

#divStickyBG{

    display: none;

}

.divButtonEssentiel{

    margin: auto 1vw;


}

.ButtonEssentiel{

    background-color: transparent;
    color: black;
    padding: 1vh 2vw;
    margin: auto;
    vertical-align: middle;
    font-size: 1vw;
    font-family: 'Poppins', sans-serif;
    border: solid;
    border-radius: 1vw;
    border-width: 1px;
    border-color: black;
    transition: background-color 0.2s, border-color 0.2s;

}

.ButtonEssentielIn{

    background-color: #96be2f;
    border-color: #96be2f;
}

.ButtonEssentiel:hover, .ButtonEssentielIn:hover{

    background-color: #96be2f;
    cursor: pointer;
    border-color: #96be2f;

}


/* Fin header */

.divSeparateTwoColone{

    display: flex;
    flex-direction: row;
    width: 100%;
    margin: auto;

}

.divSommaireGauche{

    width: 20%;
    background-image: linear-gradient(150deg, #F0F0F0, #DADADA);
    text-align: center;

}

.divContentDroite{

    width: 80%;
    font-family: 'SFProText-Regular' ,sans-serif;
    line-height: 35px;
    overflow-wrap: break-word;
    word-spacing: 25%;
}

.divStickySommaireGauche{

    position: sticky;
    top: 35%;

}

.titreSommaire{

    margin: 1vw auto;
    font-family: 'Poppins', sans-serif;
    font-size: 1.8vw

}

.titreDivision{

    justify-content: center;
    display: flex;
    text-align: center;
    margin: 0px auto;
    font-size: 2.8vw;
    font-family: 'Poppins', sans-serif;

}

.divSeperateInfo{

    background-image: linear-gradient(#F0F0F0, #DADADA);
    width: 100%;
    padding: 5vh 0px;

}

.divContentDroite h3{

    text-align: left;
    margin-bottom: 30px;
    font-size: 210%;
    font-weight: bold;
    background-color: #415455;
    padding: 10px;
    width: max-content;
    max-width: 100%;
    color: white;

}

.divContentDroite h4{

    text-align: left;
    margin-bottom: 20px;
    font-size: 170%;
    font-weight: bold;
    width: max-content;
    max-width: 100%;
    text-decoration: underline #96be2f;

}

.divContentDroite h5{

    text-align: left;
    margin-bottom: 15px;
    font-size: 170%;
    width: max-content;
    max-width: 100%;
    font-weight: bold;

}

.divContentDroite ul{
    
    margin-bottom: 20px;
    width: max-content;
    max-width: 100%;

}

.divContentDroite li{
    
    list-style-type: disc;
    font-size: 150%;
    margin-left: 25px;
    width: max-content;
    overflow-wrap: break-word;
    max-width: 100%;

}


.divContentDroite p{

    text-align: left;
    margin-bottom: 7px;
    font-size: 150%;
    width: max-content;
    max-width: 100%;

}

#divAccueil{

    display: block;

}

#divServices, #divContrat, #divSociete, #divConnexion, .divProduitDetail, #divIACAPlus{



    display: none;


}

.buttonServices, .buttonSommaire{


    margin: 10px;
    padding: 10px 30px;
    background-color: #415455;
    color: white;
    border: none;
    font-size: 100%;
    font-family: 'Poppins', sans-serif;
    text-align: left;
    width: 75%;
    transition: background-color 0.2s, border-color 0.2s;


}

.buttonServices:hover, .buttonSommaire:hover{

    cursor: pointer;
    background-color: #96be2f;
    border-color: #96be2f;


}

.buttonServicesIn{

    margin: 10px;
    padding: 10px 30px;
    background-color: #96be2f;
    color: black;
    border: none;
    font-size: 100%;
    font-family: 'Poppins', sans-serif;
    width: 75%;
    text-align: left;
    transition: background-color 0.4s, border-color 0.4s;

}

.buttonServicesIn:hover{

    cursor: pointer;
    background-color: #96be2f;
    border-color: #96be2f;


}

.divButtonServices{

    text-align: left;

}

/*
 Div Accueil
*/
#divSlogan{

    text-align: left;
    font-family: 'Poppins', sans-serif;
    width: 60vw;
    margin: 1.5vh auto;


}

#divSlogan h1{

    font-size: 700%;


}

#divSlogan p{

    font-size: 130%;
    
}

.divContentInside{

    width: 70%;
    margin: auto;

}

#divTitreProduit{

    display: flex;
    justify-content: space-between;

}

#divProduitPhare{

    margin: auto;
    width: 100%;

}

#divProduitList{

    width: 90%;
    display: flex;
    flex-wrap: wrap;
    margin: auto;

}

.divProduit{

    width: 30%; 
    text-align: left;
    overflow-wrap: break-word;
    margin-right: 1.5%;
    margin-left: 1.5%;

}

.divProduit img{

    width: 100%;
    max-width: 100%;

}

.divProduitOut{

    display: none;
    width: 30%; 
    text-align: left;
    overflow-wrap: break-word;
    margin-right: 1.5%;
    margin-left: 1.5%;

}

#divIACA #pShowIACA {

  cursor: pointer;
  text-decoration: underline;
  width: max-content;
  padding: 5px;
  transition: background-color 0.1s, color 0.1s;

}

#divIACA #pShowIACA:hover{

    width: max-content;
    background-color: #415455;
    color: white;

}

#divIACAModule table{

    margin: auto;

}

#divIACAModule tr{

    margin: auto;
    text-align: center;
    border-bottom: solid;
    vertical-align: middle;



}

#divIACAModule td{

    margin: auto;
    text-align: center;
    vertical-align: middle;


}

#divIACAModule th{

    margin: auto;
    padding: 20px;
    font-size: 150%;
    border-right: solid;
    vertical-align: middle;

}

#divIACAModule .tdPres{

    border: none;

}

#divIACAModule a{

    display: flex;
    text-decoration: none;
    width: max-content;
    padding: 15px 50px;
    margin: auto;
    text-align: center;
    border-radius: 80px;
    color: black;
    font-size: 150%;
    transition: background-color 0.1s;

}

#divIACAModule a:hover{

    background-color: #96be2f;

}

#divMaintenanceSurSite #pShowContact{

    cursor: pointer;
    text-decoration: underline #96be2f;
    width: max-content;
    padding: 5px;
    transition: background-color 0.1s, color 0.1s;

}

#divMaintenanceSurSite #pShowContact:hover{

    width: max-content;
    background-color: #415455;
    color: white;

}

/*
 Div service
*/
.divServicesInfo{

    width: 70%;
    padding: 1vw;
    margin: 0 auto;

}

#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8{ /* div Serives */ 

    display: none;

}

/*
 Div contrat
*/
#divContrat{

    font-family: 'SFProText-Regular' ,sans-serif;

}

.divContratAll{


    width: 100%;
    padding: 40px 0px;
    background-image: linear-gradient(#F0F0F0, #DADADA);

}
.divContratAll span{

    font-weight: bold;

}

/*
 Div contact
*/
#divContact{
        
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;

}

#divContact #divContactIntermediare{

    display: flex;
    flex-direction: column;


}

#divContact #divContactInfo{

    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: 150%; 
    margin: 0 auto 50px auto;
    width: 100%;

}

#divContact #divContactPF{

    display: flex;
    justify-content: space-around;
    margin: 30px 0px;

}

#divContactMap{

    margin: auto;


}

#divContactA{

    margin: auto;
}

#clientTMF{

    display: flex;
    flex-direction: column;
    font-family: 'Poppins', sans-serif;
   

}

#clientTMF #clientProgressBar{

    display: flex;
    flex-direction: row;
    text-align: center;
    width: 70%;
    margin: 10px auto;
    justify-content: center;

}

#clientTMF #clientProgressBar #client75{

    width: 75%;
    background-color: #7a9b25;
    text-align: center;
    margin: auto;
    padding: 10px;

}

#clientTMF #clientProgressBar #client15{

    width: 15%;
    background-color: #96be2f;
    text-align: center;
    margin: auto;
    padding: 10px;

}

#clientTMF #clientProgressBar #client10{

    width: 10%;
    background-color: #b1e233;
    text-align: center;
    margin: auto;
    padding: 10px;

}

#clientTMF #clientDetails{

    margin: 10px auto;
    text-align: left;
    width: 70%;

}

#infoJuridique{

    display: flex;
    justify-content: center;
    flex-direction: column;
    font-family: 'Poppins', sans-serif;

}

#infoJuridique table{

    margin: 20px auto;
    width: 90%;

}

#infoJuridique tr {

    text-align: center;
    padding: 15px;
    border-bottom: solid;
    border-top: solid;
    border-width: 2px;
    margin: auto 10px;

}

#infoJuridique tr td{

    text-align: left;
    padding: 15px;
    width: 60%;


}

#infoJuridique tr th{

    text-align: left;
    padding: 15px 50px;
    width: 40%;


}

.thInfo{
    background-color: #96be2f;
}


/*
 Div connexion
*/

#formConn{

    display: flex;
    margin: auto;
    justify-content: center;
    text-align: left;
    flex-direction: column;
    width: 30%;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 150px;
    margin-top: 100px;

}

#h2Conn{

    justify-content: center;
    display: flex;
    text-align: center;
    margin: 20px auto;
    font-size: 300%;
    font-family: 'Poppins', sans-serif;

}

#formConn h2{

    font-size: 230%;
    margin-bottom: 20px;

}

#formConn label{

    font-size: 150%;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 20px;
    color: #494949;

}

#formConn input[type=text], #formConn input[type=password]{

    font-size: 150%;
    margin-bottom: 20px;
    border-radius: 80px;
    padding: 20px;
    border: solid;
    border-width: 3px;
    border-color: transparent;
    background-color: #dcdcdc; 
    transition: background-color 0.4s, border-color 0.4s;
    

}

#formConn input[type=text]:focus, #formConn input[type=password]:focus{


    border-color: #96be2f;
    background-color: #fff; 


}

#formConn input[type=submit]{

    font-size: 150%;
    margin-top: 30px;
    border-radius: 80px;
    padding: 20px;
    background-color: #96be2f;
    font-family: 'Poppins', sans-serif;
    border: solid;
    border-width: 3px;
    border-color: #96be2f;
    transition: background-color 0.4s, border-color 0.4s;

}

#formConn input[type=submit]:hover{

    
    background-color: #aedd36;
    border-color: #aedd36;
    cursor: pointer;


}


#divProduitPhare .pShowProduit{

    cursor: pointer;
    text-decoration: underline;
    width: max-content;
    padding: 5px;
    transition: background-color 0.1s, color 0.1s;

}

#divProduitPhare .pShowProduit:hover{

    width: max-content;
    background-color: #415455;
    color: white;

}



#divAddProduitForm{


    display: none;
}



#divDroiteProduit{

    display: flex;
    flex-direction: row;
    margin-bottom: 30px; 

}

.buttonForm{

    background-color: #415455; 
    padding: 15px 30px;
    border: solid;
    border-radius: 80px;
    color: white;
    border-width: 1px;
    margin: 0 10px;
    border-color: black;
    transition: color 0.15s, background-color 0.15s;
    font-family: poppins, sans-serif;

}

.buttonForm:hover{

    color: black;
    background-color: white;
    cursor: pointer;

}

.divButtonForm{

    margin: auto 0;

}

#formAddProd{

    display: flex;
    margin: auto;
    justify-content: center;
    text-align: left;
    flex-direction: column;
    width: 50%;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 45px;

}


#formAddProd label{

    font-size: 100%;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 20px;
    color: #494949;

}

#formAddProd input[type=text], #formAddProd textarea, #formAddProd input[type=file]{

    font-size: 100%;
    margin-bottom: 15px;
    border-radius: 20px;
    padding: 15px;
    border: solid;
    border-width: 3px;
    border-color: transparent;
    background-color: #dcdcdc; 
    transition: background-color 0.4s, border-color 0.4s;
    resize: none;
    

}

#formAddProd input[type=text]:focus, #formAddProd textarea:focus, #formAddProd input[type=file]:focus{


    border-color: #96be2f;
    background-color: #fff; 
    resize: none;


}



#formAddProd input[type=submit]{

    font-size: 100%;
    margin-top: 20px;
    border-radius: 80px;
    padding: 15px;
    background-color: #96be2f;
    font-family: 'Poppins', sans-serif;
    border: solid;
    border-width: 3px;
    border-color: #96be2f;
    transition: background-color 0.4s, border-color 0.4s;

}

#formAddProd input[type=submit]:hover{

    
    background-color: #aedd36;
    border-color: #aedd36;
    cursor: pointer;


}

#h2Prod{

    justify-content: center;
    display: flex;
    text-align: left;
    margin: 20px auto;
    font-size: 200%;
    font-family: 'Poppins', sans-serif;

}

.formBoutonSuprProd{
    display: none;
    position: absolute;
    font-size: 150%;
    font-family: 'Poppins', sans-serif; 
}

.bontouSuprProd{

    padding: 0px 15px;
    font-size: 150%;
    font-family: 'Poppins', sans-serif; 
    position: relative;
    top: 15px;
    left: 338px;
    border: solid;
    border-width: 1px;
    background-color: #FFF;
    border-radius: 80px;
    border-color: black;
    transition: background-color 0.15s, color 0.15s;
}

.bontouSuprProd:hover{

    cursor: pointer;
    background-color: black;
    color: white;

}


/*
 footer
*/
footer{

    width: 100%; 
    background-color: #415455;
    color: white;
    font-family: 'SFProText-Regular', sans-serif;

}

footer #divFooter{

    width: 70%;
    margin: auto;
    padding: 50px 0;
    display: flex;
    flex-direction: row;

}

footer #divFooterDroite{

    width: 40%;
    padding-left: 6%;


}


footer #divFooterGauche{

    width: 60%;
    display: flex;
    flex-direction: row;
    border-right: solid;
    border-color: grey;
    padding-right: 6%;
    
}

footer ul{

    padding: 10px;
    width: max-content


}

footer li{

    padding: 10px;
    text-decoration: underline;
    text-decoration-color: transparent;

}

footer li:hover{

    background-color: white;
    color: black;
    cursor: pointer;
    text-decoration: underline;


}

footer #liNo:hover{

    background-color: transparent;
    color: transparent;
    cursor: auto;

}

footer span{

    font-weight: bold;
    border-bottom: solid;
    border-width: 1px;


}

#formConnFooter {

    display: flex;
    flex-direction: column;

}

#formConnFooter label {

    margin: 5px 0;

}

#formConnFooter input {

    width: 90%;

}

#formConnFooterLi{

    display: none;
    padding: 0;

}

#formConnFooterLi:hover{

    background-color: transparent;
    text-decoration: none;
    color: white;



    
}

#formConnFooter input[type=submit]{

    width: 95%;
    background-color: transparent;
    color: white;
    border: solid;
    border-width: 1px;
    border-color: white;
    transition: background-color 0.1s, color 0.1s;
    margin: 5px 0;

}

#formConnFooter input[type=submit]:hover{

    background-color: white;
    color: black;


}

#formConnFooter li{

    
    text-align: left;
    padding: 5px 0px;


}

#formConnFooter li:hover{

    background-color: transparent;
    color: white;
    cursor: auto;
    text-decoration: none;

}

footer #inputDeconnxion{

    border: none;
    background-color: transparent;
    cursor: pointer;
    color: white;
    font-size: 100%;
    font-weight: bold;
    padding: 0;


}



footer #inputDeconnxion:hover{

    background-color: white;
    color: black;
    cursor: pointer;
    text-decoration: underline;


}

/*
 fin footer
*/

/*
cookie
*/
#divCookie{

    display: none;
    position: fixed;
    width: 100%;
    background-color: rgb(255, 165, 0);
    color: rgb(0, 0, 0);
    margin: 0px;
    left: 0px;
    bottom: 0px;
    padding: 4px;
    z-index: 1000;
    text-align: center;

}

#divCookie a{

    margin-left: 10px;

}

#carteGoogle{

    width: 600px;
    height: 400px;

}

/*
fin cookie
*/

/*
mobile
*/
#divButtonBurger{

     display: none;

}

#divAbsolute{

        display: none;


    }

#divSticky{

    display: block;

}

#divButtonBurger1, #divButtonBurger2, #divButtonBurger3, #divButtonBurger4,{

    display: none;

} 
/*
fin mobile
*/



@media (max-width: 980px){

    .divHeader{

        justify-content: start;

    }

    #banniere{

        display: none;

    }

    #divHeaderLogo img{

        width: 24vw;

    }

    .ButtonHeader{

        font-size: 3vw;
        border-radius: 5vw;
        margin: 0;
        padding: 1vh 1vw;


    }

    #divAllButtonEssentiel{

        padding: 1.5vh 0 ;
        width: 100vw;

    }

    .divButtonEssentiel {
        margin: auto 0.5vw;
    }

    .ButtonEssentiel{

        font-size: 2.3vw;

    }

    .divSeparateTwoColone{

        width: 100vw;
        padding-top: 3vh;

    }

    .divSommaireGauche{

        display: none;

    }

    .divContentDroite{

        width: 100vw;

    }

    .divContratAll{

        padding: 0;

    }

    .titreDivision{

        font-size: 7vw;
        max-width: 100vw;

    }

    .divContentDroite h3{

        font-size: 5vw;
        padding: 1vh;
        margin-bottom: 3vh;
        max-width: 95%;
        line-height: 5.5vw;

    }

    .divContentDroite h4, .divContentDroite h5{

        font-size: 5vw;
        margin-bottom: 2vh;
        line-height: 5.5vw;
        max-width: 95%;

    }

    .divContentDroite p{

        font-size: 5vw;
        margin-bottom: 0.7vh;
        max-width: 100%;
        line-height: 5.5vw;

    }

    .divContentInside{

        width: 95vw;
        padding-bottom: 3vh;

    }

    .divSeperateInfo {

        padding: 2vh 0px;

    }

    #divSlogan{

        width: 95vw;

    }

    #divSlogan h1{

        font-size: 11vw;

    }

    #divSlogan p{

        font-size: 5vw;

    }

    .divProduit{

        width: 45%;
        margin: auto;

    }


    .divServicesInfo{

        width: 95vw;
        padding: 0;
        margin: auto;


    }

    .divContentDroite li{

        font-size: 5vw;
        line-height: 5.5vw;
        max-width: 88vw;
        margin-left: 5vw;

    }

    .divContentDroite ul{

        margin-bottom: 2vh;

    }

    #carteGoogle{

        width: 100%;
        height: 100%;

    }

    #divContactMap{

        margin: auto;
        width: 80vw;
        height: 40vh;
    }

    #divContact #divContactInfo{

        margin-bottom: 3vh; 

    }
    

    #clientTMF #clientProgressBar{

        width: 100%;

    }

    #clientTMF #clientDetails{

        width: 90%;

    }

    footer{

        width: 100vw;

    }


    footer #divFooter{

        width: 95%;
        flex-direction: column-reverse;
        padding: 0;

    }

    footer #divFooterDroite{

        width: 100%;
        padding: 0;

    }

    footer #divFooterGauche{

        width: 100%;
        padding: 0;
        flex-wrap: wrap;
        border-right: none;
        border-top: solid grey;

    }

    footer ul{

        padding: 0;
        margin: auto;
        text-align: left;

    }

    footer #divFooterDroiteAll{

        text-align: center;
        display: flex;
        flex-wrap: wrap;

    }

    footer img{

        margin: auto;

    }

    footer #divFooterGauche ul{

        margin:0 ;
        text-align: left;
        padding-bottom: 3vh;

    }


    #divIACAModule tr{

        font-size: 3vw;
        padding: 0.5vh;
        border-width: 2px;
        line-height: 2vh;


    }

    #divIACAModule th{

        font-size: 3vw;
        padding: 0.5vh;
        border-width: 2px;
        line-height: 3.5vh;
        width: 35%;


    }



    #divIACAModule a
    {

        padding: 1vh;
        margin: 0;
        font-size: 3vw;
        margin: auto;

    }

    #infoJuridique table{

        width: 100%;
        margin: auto;

    }

    #infoJuridique tr{

        font-size: 3vw;
        padding: 0.5vh;
        border-width: 2px;
        line-height: 4vw;


    }

    #infoJuridique tr th{

        font-size: 3vw;
        padding: 1.2vh;
        border-width: 2px;
        line-height: 4vw;
        width: 35%;

    }

    #infoJuridique tr td{

        font-size: 3vw;
        padding: 0.5vh;
        border-width: 2px;
        line-height: 4vw;

    }

    #h2Conn{

        margin: auto;
        font-size: 7vw;

    }

    #formConn{

        width: 90%;
        margin: 2vh auto;

    }

    #formConn h2{

        font-size: 5vw;

    }

    #divConnexion{

        width: 100vw;
        margin: 5vh auto;

    }

    #formConn input[type="text"], #formConn input[type="password"], #formConn input[type="submit"]{

        padding: 2vh;

    }


}

@media (max-width: 1220px){

    footer #divFooter{

        width: 90vw;


    }

}



/*
 Index    : divDroiteIndex -> 100% , divGaucheindex -> 0%;
 Services : divServiceContenu -> 100%, divAllButtonServices -> 0%;
 Contrat  : divdroiteContrat -> 100%, divGaucheContrat -> 0%;
 societe  : divDroiteInfo -> 100%, divGaucheSommaire -> 0%;
*/