*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    /*text-transform: capitalize;*/
    text-decoration: none;
}

body{
    
    min-height: 100vh;
    background: rgba(245, 237, 237, 0.1); /*url(../images/logo-SEEG-HD.jpg) no-repeat;*/
    background-size: cover;
    background-position: center;
}
a:link{
    text-decoration: none;
    color: #000000;
}
.swiper{
    width:850px; /*850px;*/
    /*border: 1px solid red;*/
}
.swiper-slide img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
   
}
header{
    position: fixed;
    width: 100%;
    top:30px; left:0; right:0;
    background: #ffffff;
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
    padding: 0px 1%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    height: 12vh;
    
}
header .navbar{
   /* margin-left: 10vw; /*65vw*/
    margin: auto;
    width: 70vw;
    /*border: 1px solid coral;*/
    align-items: center;
    align-content: center;
}
header .navbar-accueil{
    /* margin-left: 10vw; /*65vw*/
     margin: auto;
     width: 70vw;
     /*border: 1px solid rgb(217, 255, 80);*/
     align-items: center;
     align-content: center;
 }
header .espace-client{
    /*margin-left: 2vw; 65vw*/
    margin: auto;
    width: 60px;
    height: auto;
    display: flex;
    text-align: center;
    background-color: #b15a3f;
    color: #fff;
    /*border: 1px solid coral;*/
    align-items: center;
    align-content: center;
}
header .espace-client i{
    color: #fff;
    
}
.mon-panier{
    /*border: 1px solid coral;*/
    margin-left: 5px;
    font-size: 0.8em;
}
#modifier{
    color: #fff;
    background-color: rgb(0, 110, 255,0.35);
}
#supprimer{
    background-color: rgb(255, 51, 0,0.35);
    color: #fff;
}
#edition{
    color: #fff;
    background-color: rgb(0, 255, 255,0.35);
}
header .navbar a::after{
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #fff;
    bottom: -2px;
    transform: scale(0);
    transition: transform 0.5s;
}
header .navbar-accueil a::after{
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #fff;
    bottom: -2px;
    transform: scale(0);
    transition: transform 0.5s;
}
header .espace-client a::after{
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color:#fff;
    bottom: -2px;
    transform: scale(0);
    transition: transform 0.5s;
}
header .espace-client:hover{
    background-color:rgb(218, 75, 32);
}
/*header .connexion a::after{
    content: '';
    position: absolute;
    left: 0;
    width: 50%;
    height: 3px;
    background-color: #fff;
    bottom: -2px;
    transform: scale(0);
    transition: transform 0.5s;
}*/

header .navbar a:hover::after{
    transform: scale(1);
}
header .navbar-accueil a:hover::after{
    transform: scale(1);
}
header .espace-client a:hover::after{
    transform: scale(1);
}
/*header .connexion a:hover::after{
    transform: scale(1);
}*/
header .logo{
    display: flex;
    font-weight: bolder;
    font-size: 25px;
    color: #333;
    /*left: 10px;*/
    margin-left: 5px;
    padding: 3px;
    width: 180px;
    height: 75px;
    align-items: center;
    align-content: center;
    background: transparent;
    /*text-align: center;*/
    /*border: 1px solid rgb(8, 64, 138);*/
    border-radius: 50px;
    box-shadow: -3px -2px 5px 5px rgba(0,0,0,.2);
}

.logo .seeg{
    margin: auto;
    width: 45px;
    height:65px;
    align-items: center;
    align-content: center;
   /* border: 1px solid rgb(131, 173, 228);*/
   
}
.logo .cdm{
    margin: auto;
    width: 55px;
    height: 45px;
    align-items: center;
    align-content: center;
    /*border: 1px solid rgb(12, 184, 118);*/
    
}

/*header .btn-inscription{
    position: relative;
    left: 0.5vw;
    display: flex;
    margin: auto;
    height: 3.5vh;
    width: 7.5vw;
    text-align: center;
    background-color:#124982;
    border-radius: 25px;
}
.header button{
    text-align: center;
    color: #265;
}*/
header .connexion{
    margin-left: 5px;
    width: 120px;
    height: 50px;
    padding: 4px;
 /*   border: 1px solid coral;*/
    align-items: center;
    align-content: center;
    text-align: center;
    background-color: #124982;
    transition: 0.3s;
}
header .connexion:hover{
    background-color:rgb(10, 158, 226);
}
header .connexion a{
    color:#ffffff;
    font-size: 9px;
}
header .connexion i{
    margin-top: 3px;
    margin-bottom: 2px;
    color: #ffffff;
}

header .deconnexion{
    margin-left: 5px;
    width: 120px;
    height: 50px;
    padding: 4px;
 /*   border: 1px solid coral;*/
    align-items: center;
    align-content: center;
    text-align: center;
    background-color: #b15a3f;
    transition: 0.3s;
}
header .deconnexion:hover{
    background-color:rgb(218, 75, 32);
}
header .deconnexion a{
    color:#ffffff;
    font-size: 9px;
}
header .deconnexion i{
    margin-top: 3px;
    margin-bottom: 2px;
    color: #ffffff;
}


.clignote{
    color:rgb(75, 218, 40);
    animation: clignote 2s linear infinite;
}
@keyframes clignote {  
  50% { opacity: 0; }
}

header .btn-inscription{
    width: 95px;
    height: 30px;
    background: transparent;
    border: 2px solid #124982;
    padding: 4px 0 0 7px;
    border-radius: 6px;
    outline: none;
    cursor: pointer;    
    font-size: 1.1em;
    font-weight: 500;
    margin-left: 5px;
    color: #124982;
    transition: 0.5s;
}
header .btn-login{
    width: 95px;
    height: 30px;
    background: transparent;
    border: 2px solid #4cbbec;
    padding: 4px 0 0 7px;
    border-radius: 6px;
    outline: none;
    cursor: pointer;    
    font-size: 1.1em;
    font-weight: 500;
    margin-left: 15px;
    color: #4cbbec;
    transition: 0.5s;
}
header .btn-inscription a{
    color: #124982;
    outline: none;
    cursor: pointer;
    
}
header .btn-login a{
    color: #4cbbec;
    outline: none;
    cursor: pointer;
    
}
header .btn-inscription:hover{
    background-color: #124982;
    color: #fff;
    border: none;
}
header .btn-login:hover{
    background-color: #4cbbec;
    color: #fff;
    border: none;
}
header .btn-inscription a:hover{
    color:#fff;
}
header .btn-login a:hover{
    color:#fff;
}

header .navbar ul{
    list-style-type: none;
}
header .navbar-accueil ul{
    list-style-type: none;
}
header .espace-client ul{
    list-style-type: none;
}

header .connexion ul{
    list-style-type: none;
}
/*header .connexion ul:hover{
    
    display: block;
    /*border: 1px solid red;
}*/
header .navbar ul li{
    position: relative;
    float: left;
}
header .navbar-accueil ul li{
    position: relative;
    float: left;
}
header .espace-client ul li{
    position: relative;
    float: left;
}
header .connexion ul li{
    top:8px;
    position: relative;
    /*border: 1px solid red;*/
    height: 20px;
    /*display: none;*/
    
}
/*header .connexion ul li:hover{
    
    /*display: block;*/
    /*border: 1px solid red;*/
    
    /*color: #1250d4;*//*
}*/
header .navbar ul li a{
    font-style: bolder;
    font-size: 13px;
    padding:15px ;
    color: #333;
    display: block;
    transition: 0.7s;
}
header .navbar-accueil ul li a{
    font-style: bolder;
    font-size: 13px;
    padding:15px ;
    color: #333;
    display: block;
    transition: 0.7s;
}
header .espace-client ul li a{
    font-style: bolder;
    font-size: 12px;
    padding:10px ;
    color: #333;
    display: block;
    transition: 0.7s;
    align-content: center;
    align-items: center;
}
header .espace-client ul li a i{
    font-size: 20px;
    margin: auto 11px;
    color: #fff; 
    align-items: center;
    align-content: center;

}
header .connexion ul li a{
    font-style: bolder;
    font-size: 11px;
    padding:2px ;
    color: #333;
    display: block;
    transition: 0.7s;
    align-content: center;
    align-items: center;
}

header .navbar ul li a:hover{
    background: #124982;
    color:#fff; 
}
header .navbar-accueil ul li a:hover{
    background: #124982;
    color:#fff; 
}
header .espace-client ul li a:hover{/*-accueil*/
    background: #124982;
    color:#fff; 
}
header .connexion ul li a:hover{
    display: none;
    background: #124982;
    color:#fff;
}
header .navbar ul li ul{
    position: absolute;
    left: 0;
    width: 200px;
    background: #fff;
    display: none;    
}
header .navbar-accueil ul li ul{
    position: absolute;
    left: 0;
    width: 200px;
    background: #fff;
    display: none;    
}
header .espace-client ul li ul{
    position: absolute;
    left: 0;
    width: 100px;
    background: #fff;
    display: none;    
}
header .navbar ul li ul li{
    width: 100%;
    border-top: 1px solid rgba(0,0,0,.1);
}
header .navbar-accueil ul li ul li{
    width: 100%;
    border-top: 1px solid rgba(0,0,0,.1);
}
header .espace-client ul li ul li{
    width: 100%;
    border-top: 1px solid rgba(0,0,0,.1);
}
header .navbar ul li ul li ul{
    left:201px;
    top:0;
}
header .navbar-accueil ul li ul li ul{
    left:201px;
    top:0;
}

/*header .espace-client ul li ul li ul{
    left:201px;
    top:0;
}*/

header .navbar ul li:focus-within > ul,
header .navbar ul li:hover > ul{
    display: initial;
}
header .espace-client ul li:focus-within > ul,
header .espace-client ul li:hover > ul{
    display: initial;
}
header .navbar-accueil ul li:focus-within > ul,
header .navbar-accueil ul li:hover > ul{
    display: initial;
}

/*header .connexion ul li:hover > ul{
    display: initial;
}*/

.active {
    background-color: rgb(5, 64, 143,0.2);
    color:white;
    /*border:0.5px solid;*/
}
.btn-arrow{
    height: 50px;
    width: 50px;
    background: rgba(17, 69, 126);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position:fixed;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
    /*cursor: none;*/
}
.icone-arrow{
    width: 30px;
}
.menu-deroulant> a::after{
    content:" ▼";
    font-size: 10px;
}

#menu-bar{
    display: none;
}

header label{
    font-size: 25px;
    color: #333;
    cursor: pointer;
    display: none;
}
/*Le rajout*/
#contact-div{
    display: flex;
    top: 3px;
    position: absolute;
    width: 405px;
    height: 23px;
    left:8px;
    align-items: center;
    align-content: center;
    /*border:1px solid #124982;*/
}
#contact-div-accueil{
    display: flex;
    top: 3px;
    position: absolute;
    width: 605px;
    height: 23px;
    left:8px;
    align-items: center;
    align-content: center;
    font-size: 12px;
}

.email-div{
    position: absolute;
    display: flex;
    left: 2px;
    margin-left: 5px;
    width: 20px;
    height: 20px;
    background: url('../images/email.png') no-repeat;
    background-size: cover;  
    
}
.email-div-accueil{
    position: absolute;
    display: flex;
    left: 2px;
    margin-left: 5px;
    width: 20px;
    height: 20px;
    background: url('../images/email.png') no-repeat;
    background-size: cover; 
    font-size: 12px; 
}
.phone-div{
    position: absolute;
    display: flex;
    top: 0;
    left: 227px ;
    width: 20px;
    height: 20px;
    background: url('../images/Phone-Icon.png') no-repeat;
    background-size: cover;
}
.phone-div-accueil{
    position: absolute;
    display: flex;
    top: 0;
    left: 227px ;
    width: 20px;
    height: 20px;
    background: url('../images/Phone-Icon.png') no-repeat;
    background-size: cover;
}
.phone-div-accueil h4{
    font-size: 5px;
}
#contact-div #mail{
    position: absolute;
    display: flex;
    top: 2px;
    left: 30px;
}
#contact-div #phone{
    position: absolute;
    display: flex;
    top: 2px;
    left: 250px;
}
#Recherche-div{
    top: 3px;
    position: absolute;
    display: flex;
    width: 20vw;
    height: 22px;
    left: 40%;
    /*border: 1px solid #124982;*/
}
#Recherche-div input{
    width: 340px;
    height: 22px;
    border: 1px solid black;
    border-radius: 8px;
    box-shadow: 5px 5px 10px rgba(0,0,0,.2);
    text-align: center;
}
.search-icon{
    position: absolute;
    top: 2.5px;
    width: 17px;
    height: 15px;
    margin-left: 315px;
    background: url('../images/loop.jpg') no-repeat;
    background-size: cover;
}
#Connexion-inscription{
    display: flex;
    top: 3px;
    position: absolute;
    width: 28vw;
    height: 22px;
    left: 70%;
    /*border: 1px solid #124982;*/
    
}
#espace-client-icon{
    position: absolute;
    display: flex;
    top: 0;
    left: 20%;
    width: 20px;
    height: 20px;
    background: url('../images/icon-login2.png') no-repeat;
    background-size: cover;
}

#Connexion-inscription #client-text{
    position: absolute;
    display: flex;
    top: 2px;
    left: 25%;
}
/*#Connexion-inscription #panier-text{
    position: absolute;
    display: flex;
    top: 2px;
    left: 46%;
}*/
.banniere-superieur{
    position: relative;
    top:0;
    height: 28px;
    left: 0;
    right: 0;
    background: #fff;
}
.banniere-superieur-accueil{
    position: relative;
    top:0;
    height: 28px;
    left: 0;
    right: 0;
    background: #fff;/*rgb(96, 125, 179);*/
}
.bande-sup{
    position: fixed;
    top:27px;
    left: 0;
    right: 0;
    height: 8.5vh;
    background:#124982;
}
.cadre-inferieur-banniere{
    
    top:125px;
    position: relative; /*absolute*/
    left: 0;
    right: 0;
    width: 100%;
    height: 48vh;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    border: 1px solid rgba(0,0,0,.2);


}
.cadre-inferieur-banniere-accueil{
    /*top:100px;*/
    position: relative;
    margin: 113px auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 80vh;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    border: 1px solid rgba(0,0,0,.2);
    background-color: rgb(145, 104, 28);
   
}
/*.cadre-inferieur-banniere-accueil{
    top:110px;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 50vh;
    background-color: rgb(145, 104, 28);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    border: 1px solid red;/*rgba(0,0,0,.2);*/

/*}*/
.banniere-inferieur{
    position: absolute;
    top:0px;
    width:70%;
    height: 47.8vh;
    margin-left: 15%;
    /*background: url('../images/banniere2.png');*/
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.banniere-inferieur-accueil{
    position: relative;
    margin: auto;
    top:0px;
    width:100%;
    height: 80vh;
    /*margin-left: 15%;*/
    /*background: url('../images/banniere2.png');*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /*border-radius: 8px 8px 0 0;*/
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    border: 1px solid orange;
    overflow: hidden;

}
.slider-accueil{
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
}
#slider-accueil-image{
    width: 100%;
    height: 100%;
}
.overlay-accueil{
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
    position: absolute;
    top: 0;
}

/*Pour la banniere de formation*/

/**/
#chemin-navigation{
    position: absolute;
    top: 40%;
    left: 2%;
    color: #124982;
    
    /*border: 1px solid #124982;*/
}
#chemin-navigation a{
    color: #262c33;
}
#legende-navigation{
    position: absolute;
    top: 40%;
    left: 65%;
    color: #124982;
    margin:auto;
    text-align: center;
    /*border: 1px solid #124982;*/
}
#legende-navigation h2{
    text-transform: uppercase;
    font-size: 1em;
}
.barre-navigation-banniere-inferieur{
    position: absolute;
    top: 75px;
    width: 60%;
    height: 11vh;
    left: 10%;
    background: rgba(237, 238, 238, 0.822);
    border-radius: 15px;
    z-index: 2;
}
.docoration-barre-inferieur{
    position: absolute;
    top: 68px;
    width: 25%;
    height: 13vh;
    left: 46%;
    background: rgba(44, 148, 233, 0.5);
    border-radius: 15px 15px 15px 15px;
    z-index:1;
}
/**************gestion du footer des pages****/
.footer{
    background-color: #262c33;
    padding: 70px 0;
}
.contain-footer{
    max-width: 1170px;
    /*background-color: red;*/
    margin: auto;
}
.contain-footer .row{
    display: flex;
    flex-wrap: wrap;
}
.contain-footer ul{
    list-style: none;
}
.row .footer-col{
    width: 25%;
    padding: 0 15px;
}
.row .footer-col h4{
    font-size: 18px;
    color: #ffffff;
    text-transform: capitalize;
    margin-bottom: 30px;
    font-weight: 500px;
    position: relative;
}
.footer-col h4::before{
    content:'';
    position: absolute;
    left: 0;
    bottom: -10px;
    background-color: #e91e63;
    height: 2px;
    box-sizing: border-box;
    width: 150px;
}
.footer-col ul li:not(:last-child){
    margin-bottom: 5px;
}
.footer-col ul li a{
    font-size: 16px;
    text-transform: capitalize;
    color: #ffffff;
    text-decoration: none;
    font-weight: 300;
    color: #bbbbbb;
    display: block;
    transition: all 0.3s ease;
}
.footer-col ul li a:hover{
    color: #ffffff;
    padding-left: 10px;
}
/********************    footer fin       *******************/
#MenuActive{
    background:#5995d6;
    color:white;
    border:0.5px solid;
    /*border-color: cornflowerblue;
    border-bottom: 4px solid;
    /*font-size: larger;*/
    border-radius:3px;
}
.body-containt{
    position: relative;
    width: 80%; /*80%*/
    margin:9% auto 20px auto; /*62vh auto 20px auto*/
    height: auto;

    padding: 0.2%;
    background-color: transparent; /*#ffffff;*/
    text-align: center;
    box-shadow: 0 5px 10px rgba(17, 86, 175, 0.2);
}
.body-containt h3{
    text-transform: uppercase;
    text-decoration: underline;
}
.body-containt hr{
    border:2px solid #0a6bda;
    width: 82%;
    margin: auto;
}
.formation-cadre{
    position: relative;
    max-width:1000px;
    width: 100%;
    background-color:#ffff;
    /*border: 3px solid #0a6bda;*/
    border-bottom: 3px solid #0a6bda;
    margin: auto;
}
.formation-cadre-qui-sommes-nous{
    position: relative;
    max-width:1000px;
    width: 100%;
    color: #124982;
    background-color:#ffff;
    /*border: 3px solid #0a6bda;*/
    border-bottom: 3px solid #0a6bda;
    margin: auto;
}
#div-qui-nous-sommes{
    position: relative;
    background:  #ffffff;
    width: 80%;
    padding: 0.4%;
    margin: 10px auto 25px auto;
    height: 10%;
    border: 1px solid #124982;
}
#div-qui-nous-sommes h3{
    list-style-type: none;
    text-align: center;
    color: #124982;
    font-size: 20px;
    text-decoration: none;
    margin: 5px;
}
#div-formation-entete{
    position: relative;
    background:  #ffffff;
    width: 80%;
    padding: 0.4%;
    margin: 10px auto 25px auto;
    height: 10%;
    border: 1px solid #124982;

}
#div-formation-entete h3{
    list-style-type: none;
    text-align: center;
    color: #124982;
    font-size: 20px;
    text-decoration: none;
    margin: 5px;
}
#div-formation1{
    position: relative;
    background:  #ffffff;
    width: 80%;
    padding: 0.4%;
    margin: auto;
    height: auto ; /*24vh;*/
    /*border: 1px solid coral;*/
}
#formation-sur-mesure{
    position: relative;
    background:  #ffffff;
    width: 80%;
    padding: 0.4%;
    margin: auto;
    height: auto ; /*24vh;*/
    /*border: 1px solid coral;*/
}
#formation-catalogue{
    position: relative;
    background:  #ffffff;
    width: 80%;
    padding: 0.4%;
    margin: auto;
    height: auto ; /*24vh;*/
}
#div-formation1 h2{
    list-style-type: none;
    text-align: center;
    color:#fff;/* #124982;*/
    font-size: 20px;
    text-decoration: none;
    margin: 5px;
    border: rgb(10, 125, 202);
    box-shadow: 10px 20px 25px 5px rgba(10, 125, 202, 0.3);
    background-color: #124982;
}
#formation-catalogue h2{
    list-style-type: none;
    text-align: center;
    color:#fff;/* #124982;*/
    font-size: 20px;
    text-decoration: none;
    margin: 5px;
    border: rgb(10, 125, 202);
    box-shadow: 10px 20px 25px 5px rgba(10, 125, 202, 0.3);
    background-color: #124982;
}
#formation-sur-mesure h2{
    list-style-type: none;
    text-align: center;
    color:#fff;/* #124982;*/
    font-size: 20px;
    text-decoration: none;
    margin: 5px;
    border: rgb(10, 125, 202);
    box-shadow: 10px 20px 25px 5px rgba(10, 125, 202, 0.3);
    background-color: #124982;
}
#formation-sur-mesure #sur-mesure{
    list-style-type: none;
    text-align: center;
    color:#fff;/* #124982;*/
    font-size: 20px;
    text-decoration: none;
    margin: 5px;
    border: rgb(10, 125, 202);
    box-shadow: 10px 20px 25px 5px rgba(221, 223, 111, 0.3);
    background-color: #a8b909;
}

#div-formation1 h3{
    list-style-type: none;
    text-align: center;
    color: #124982;
    font-size: 20px;
    text-decoration: none;
    margin: 5px;
}
#div-formation1 .content-formation1{
    margin: 15px 5px 2px 2px;
    padding: 5px;
    color: #124982;
    text-align: justify;
}
#formation-catalogue .content-formation1{
    margin: 15px 5px 2px 2px;
    padding: 5px;
    color: #124982;
    text-align: justify;
}

#formation-sur-mesure .content-formation1{
    margin: 15px 5px 2px 2px;
    padding: 5px;
    color: #124982;
    text-align: justify;
}

#div-formation2{
    position: relative;
    background:  #ffffff;
    width: 80%;
    padding: 0.4%;
    margin: auto;
    height: auto /*20vh;*/
}
#div-formation2-thematique{
    position: relative;
    background:  #ffffff;
    width: 80%;
    padding: 4px;
    margin: auto auto 10px auto;
    height: auto; /*20vh;*/
    /*background-color: transparent;*/
    background-color: rgba(155, 195, 219, 0.1);
    border:1px solid rgba(17, 86, 175, 0.2);
    border-radius: 5px;
}
#div-formation2 h4{
    list-style-type: none;
    text-align: center;
    color: #a33104;
    font-size: 20px;
    text-decoration: none;
    margin: 5px;
    text-transform: uppercase;
}
#div-formation2-thematique h4{
    list-style-type: none;
    text-align: center;
    color: #a33104;
    font-size: 20px;
    text-decoration: none;
    margin: 5px;
    text-transform: uppercase;
}
#div-formation2-thematique ul{
    margin-left: 10px;
    text-align: left;
    color: #124982;
    background-color: rgba(109, 165, 202, 0.1);
    /*border: 1px solid #639bd6;*/
    border-radius: 3px;
}
#div-formation2 h3{
    list-style-type: none;
    text-align: center;
    color: #124982;
    font-size: 20px;
    text-decoration: none;
    margin: 5px;
    text-transform: uppercase;
}
#div-formation2 .content-formation1{
    margin: 15px 5px 2px 2px;
    padding: 5px;
    color: #124982;
    text-align: justify;
    font-size: 16px;
}
#div-formation2-thematique .content-formation1{
    margin: 15px 5px 2px 2px;
    padding: 5px;
    color: #124982;
    text-align: justify;
    font-size: 16px;
}
#recherche-formation{
    position: relative;
    max-width:65vw;
    width: 100%;
    background:  rgba(213, 215, 216, 0.2);
    padding: 1.8% 10px;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 25px;
    padding: auto;
    height: 10vh;
    box-shadow: 0 5px 5px 5px rgba(5, 55, 121, 0.2);
    /*border: 1px solid coral;*/
}
#recherche-formation #search h3{
   /* text-align: left;*/
   font-style: italic;
    font-size: 0.78rem;
    text-decoration:none;
    color: #124982;

}
#search{
    top:20px;
    display: flex;
    align-items: center;
}
#search input[type="search"]{
    width: 42vw;
    height: 4vh;
    border-radius: 15px 0 0 15px;
    border: 2px solid #0a6bda;
    text-align: center;
    box-shadow: 10px 10px 10px rgba(17, 86, 175, 0.2);
    background: #feffeffe;
    
}
#search input[type="search"]:active{
    border: 2px solid #0a6bda;
}
#search input[type="submit"]{
    left: -8px;
    width: 8vw;
    height: 4vh;
    text-align: center;
    color: white;
    border: none;
    border-radius: 0 15px 15px 0;
    background: #0a6bda;
    outline: none;
    cursor: pointer;
}
#search input[type="submit"]:hover{
    width: 110px;
    box-shadow: 0 10px 10px rgba(17, 86, 175, 0.2);
    transition: all .3s ease;
}

/*#form_entreprise1 input[type="submit"]{
    width: 25vw;
    height: 40px;
    font-size: 20;
    background-color: #8ba7e2;
    align-items: center;
    align-content: center;
    border-radius: 5px;
    color: #fff;

}*/
.contenaire_panier{
    width: 80%;
    height: auto;
    /*border: 1px solid #1884a5;*/
    margin:auto;
   

}
.entete-panier{
    width: 60%;
    height: 30px;
    font-size: 1rem;
    text-transform: uppercase;
    margin: 10px auto 10px auto;
    border:1px solid #124982;
    margin:auto;
    text-align: center;
    
}
.recap-panier{
    width: 80%;
    display:flex;
    justify-content: space-around;
    margin:30px auto 15px auto;
    
}
.icon-user-panier{
    /*border:1px solid #090781;*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #124982;
    height: 80px;
    width: 24%;
    border-radius: 5px;
    background-color: rgb(114, 188, 231,.15);
    box-shadow: -5px 5px -5px 5px  rgba(213, 215, 216, 0.2);
    cursor: pointer;
}
.formation-en-commande{
   /* border:1px solid #274a7e;*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: larger;
    color: #124982;
    height: 80px;
    width: 24%;
    border-radius: 5px;
    background-color: rgb(114, 188, 231,.15);
    box-shadow: -5px 5px -5px 5px  rgba(213, 215, 216, 0.2);
    cursor: pointer;

}
.formation-suivie{
    /*border:1px solid #a33104;*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: larger;
    color: #124982;
    height: 80px;
    width: 24%;
    border-radius: 5px;
    background-color: rgb(114, 188, 231,.15);
    box-shadow: -5px 5px -5px 5px  rgba(213, 215, 216, 0.2);
    cursor: pointer;
}
.formation-annulee{
    /*border:1px solid #a33104;*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: larger;
    color: #124982;
    width: 24%;
    height: 80px;
    border-radius: 5px;
    background-color: rgb(114, 188, 231,.15);
    box-shadow: -5px 5px -5px 5px  rgba(213, 215, 216, 0.2);
    cursor: pointer;
}
th{
    border: 0px solid #555;
    color: #124982;
}
tr{
    border: 0px solid rgb(189, 186, 186);
    background-color: #e0e6ee;
    text-align: center;
    font-size: 14px;
}
.filtre-panier{
    height: 100px;
    width: 100px;
    border:1px solid #04a311;
}
.table-panier{
    width:auto;
    margin:auto;
    border:1px solid #a33104;
}
#Catalogue-formation{
    position: relative;
    margin: 1% auto;
   
    width: 70%;
    height: 30px;
    /*border: 1px solid rgba(210, 219, 210, 0.333);*/
    /*border-radius: 25px;*/
    /*box-shadow: 0 5px 10px rgba(17, 86, 175, 0.2);*/

}
#Catalogue-formation #cat1{
    position: absolute;
    color: wheat;
    right: 2px;
    width: 45%;
    height: 25px;
    /*background-color: rgb(43, 110, 43,.9);*/
    background: transparent;
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 0.7rem;
    text-align: center;
    color:#000;
    border: 2px solid rgb(51, 197, 32);
    transition: 0.5s;
    outline: none;
    cursor: pointer;
    /*border-radius: 20px;*/
}
#Catalogue-formation #cat2{
    position: absolute;
    left: 2px;
    width: 45%;
    height: 25px;
    font-weight: bolder;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #000;
    /*background-color: rgb(5, 72, 216,.8);*/
    background: transparent;
    text-align: center;
    border:2px solid #124982;
    /*border-radius: 20px;*/
    transition: 0.5s;
    outline: none;
    cursor: pointer;
}
#Catalogue-formation a:hover{
    color:#fff;
}
#Catalogue-formation #cat2 a{
    color: #000;;
    text-transform: uppercase;
}
#Catalogue-formation #cat1 a{
    color: #000;;
    text-transform: uppercase;
}
#Catalogue-formation #cat1:hover{
    color: #fff;
    text-transform: uppercase;
    background-color: rgb(51, 197, 32);
}
#Catalogue-formation #cat1 a:hover{
    color: #fff;
    text-transform: uppercase;
}
#Catalogue-formation #cat2:hover{
    color: #fff;
    text-transform: uppercase;
    background-color: #124982;
}
#Catalogue-formation #cat2 a:hover{
    color: #fff;
    text-transform: uppercase;
}
.formation-metier{
    display: none;
    top: 5px;
    background-color: #8ecdf1;
    /*border: 2p/x solid #124982;*/
    margin: 10px;
    /*background: transparent;*/
    border-radius: 20px;
    box-shadow: 0 5px 10px rgba(8, 74, 117, 0.1);
}
.formation-metier h4{
    text-transform: uppercase;
    text-align: center;
    color: #062aa1;
}
.slide-container{
    max-width:1300px;
    width: 100%;
    background-color:#ffff;
    /*padding: 20px 0;
    margin: 10px auto;*/
}
.formation-metier .slide-container{
    max-width:1300px;
    width: 100%;
    background:transparent;
    box-shadow: 0 15px 15px rgba(8, 136, 221, 0.1);
    /*padding: 20px 0;
    margin: 10px auto;*/
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    
  }

.slide-content{
    margin:0 0;/*4px;*/
    /*border: 1px solid orange;*/
}
.formation-metier hr{
    top: 10px;
    width: 800px;
    border: 2px solid #0a6bda;
    margin: auto;
    font-size: 10px;
    font-weight: 9px;
    border-radius: 25px;

}
.formation-metier hr:hover{
    width: 850px;
    border: 2.5px solid #9ab1cc;
    box-shadow: 0 5px 10px rgb(1, 106, 175,0.1);
    transition:all 0.3s ease ;
}
.card{
    width: 300px; /*300*/
    height: 410px;
    border-radius: 25px;
    background-color: #ffee;
    margin-bottom: 10px;
    margin: 10px;
    position: relative;
    display:inline-block;
    box-shadow: 0 8px 12px rgb(20, 92, 185,0.3);
    /*border: 1px solid red;*/
}
.card-fm{
    width: 285px;
    height: 310px;
    border-radius: 25px;
    background-color: #fff;
    margin-bottom: 10px;
    margin: 10px;
    position: relative;
    display:inline-block;
    box-shadow: -4px -4px -4px -4px rgb(20, 92, 185,0.3);
    /*border:1px solid #000;*/
}
.card:hover{
    width: 308px;
    height: 418px;
    border-radius: 25px;
    transition: all .3s ease;
    box-shadow: 0 8px 12px rgb(20, 92, 185,0.3);
    /*transition: all 0.2s ease;*/
}
/*.card-fm:hover{
    width: 338px;
    height: 315px;
    border-radius: 40px;
    transition: all .3s ease;
    /*box-shadow: 0 8px 12px rgb(20, 92, 185,0.3);*/
/*}*/
.image-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 14px;
}
.image-content-fm{
    top:10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 5px;
    /*border:1px solid rgb(192, 87, 87);*/
    height: 100px;
}
.card-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 10px;
}
.card-content-fm{
    top: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 5px;
    /*border:1px solid rgb(20, 168, 27);*/
    height:200px ;
}
.card-content{
    top: 8px;
}
.card-image{
    position: relative;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background: #fff;
    padding: 3px;
}
.image-content{
    position: relative;
    row-gap: 5px;
    padding: 20px 0;
    
}
.overlay{
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color:#124982;
    border-radius: 25px 25px 0 25px;
}
.overlay-1{
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color:#d41407; /*#124982;*/
    border-radius: 25px 25px 0 25px;
}
.overlay-2{
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color:#ce3506; /*#124982;*/
    border-radius: 25px 25px 0 25px;
}
.overlay-3{
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color:#cf5d55; /*#124982;*/
    border-radius: 25px 25px 0 25px;
}
.overlay4{
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color:#1250d4; /*#124982;*/
    border-radius: 25px 25px 0 25px;
}
.overlay5{
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color:#048b0f; /*#124982;*/
    border-radius: 25px 25px 0 25px;
}
.overlay::before,
.overlay::after{
    content: '';
    position: absolute;
    right: 0;
    bottom: -40px;
    height: 40px;
    width: 10px;
    background-color: #124982;
}
.overlay::after{
    border-radius: 0 25px 0 0;
    background-color: #fff;
}
.card-image .card-img{
    height: 100%;
    width: 100%;
    /*object-fit: cover;*/
    border-radius: 50%;
    border: 4px solid #124982;
}
.name{
    font-size: 14px;
    /*font-weight: 6px;*/
    background-color: #0a6bda;
    color: #ffffff;
    margin: 2px;
    border: none;/*1px solid #262c33;*/
    border-radius: 12px;
    padding: 5px;

}
.card-image-fm{
    margin-left: 10px ;
    font-size: 16px;
    /*font-weight: 6px;*/
    background-color: #1884a5;
    color: #ffffff;
    padding: 3px;
    
    /*border: 1px solid #262c33;*/
    border-radius: 12px;
}

.if_fm h2{
    font-size: 14px;
    text-align: center;
}
.duree_fm{
    margin-top: 15px;
    margin-left: 2px;
    
}
.description{
    font-size: 14px;
    color:#000;
    text-align:justify;
}
.card-content .definition{
    /*height: 85px;*/
    width: 280px;
    /*text-align: justify;*/
    color: #000;
    font-size: 1rem;
    margin-top: 5px;
    background-color: rgba(8, 74, 117, 0.1);
    align-content: center;
    align-items: center;
    /*border: 1px solid red;*/
    border-top: 1.8px solid rgb(34, 65, 202);
    border-radius: 3px;
    padding: auto;
    
}
.card-content .contenue-card{
    height: 168px;
    /*border:1px solid rgb(55, 0, 255);*/
    margin-bottom: 0px;
}
.if_fm{
    height: 100px;
    width: 100%;
    margin: 5px auto 10px auto;
    border:1px solid #1884a5;
    border-radius: 15px 15px 5px 5px;
    font-size: 12px;
    align-items: center;
    align-content: center;
    display: flex;
    background-color:  rgb(130, 106, 153,0.1);;

}

.objectif-fm{
    margin: 0;
    padding: 2px;
    height: 120px;
    width: 100%;
    font-size: 12px;
    background-color: rgb(130, 106, 153,0.2);
    /*border:1px solid #062aa1;*/
}
.duree_fm{
    top:2px;
    width: 100%;
    height: 50px;
    font-size: 12px;
}
.poisit-button{
    margin: 0;
    padding: 0;
    margin-top: 10px;
    width: 100%;
    font-size: 12px;
    /*border: 1px solid red;*/
}

.button1{
    background-color: #0a6bda;
    font-size: 12px;
    padding: 6px 14px;
    position: relative;
    width: 45%;
    color: white;
    border: none;
    border-radius: 6px;
    margin-right:15px;
    display:inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
}
.button1-fiche_technique{
    /*background-color: #0a6bda;*/
    background: transparent;
    font-size: 16px;
    /*padding: 6px 14px;*/
    position: relative;
    color:#124982;
    width: 30px;
    height: 30px;
    /*color: white;*/
    /*border: none;*/
    border: 1px solid #124982;
    border-radius: 50%;
    /*margin-right:2px;*/
    display:inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
}
.button1-fiche_technique i{
    color:#124982;
}
.button2-commander{
    background-color:transparent;
    font-size: 16px;
    /*padding: 6px 14px;*/
    width: 30px;
    height: 30px;
    position: relative;
    color: #265;
    border: 1px solid #265;
    border-radius: 50%;
   /* margin-left:5px;*/
    display:inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
}
.button1-fiche_technique:hover, .button1-fiche_technique i:hover{
    background: #124982;
    color: #fff;
}
.button2-commander:hover{
    background: #265;
    color: #fff;
}
.poisit-button a{
    text-decoration: none;
    color: white;
}
.button2{
    background-color: #0a6bda;
    font-size: 12px;
    padding: 6px 14px;
    width: 45%;
    position: relative;
    color: white;
    border: none;
    border-radius: 6px;
    margin-left:5px;
    display:inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
}
.button2:hover, .button1:hover{
    background: #265;
    color: #fff;
}
/***************************gestion des formulaire insciption et connexion************/
.first-body-containt-form{
    position: relative;
    display: flex;
    width: 70%;
    margin: 31% auto 20px auto;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #ffffff;
    box-shadow: 10px 10px 10px 10px rgba(17, 86, 175, 0.2);
}
.first-body-containt-mon-compte{
    position: relative;
    width: 70%;
    margin: 10% auto 20px auto;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #ffffff;
    box-shadow: 10px 10px 10px 10px rgba(17, 86, 175, 0.2);
}
.containt1{
    display: flex;
    margin:auto;
}
.containt2{
    display: flex;
    margin:auto;
}

.body-containt-form{
    position: relative;
    width: 470px;
    margin:  1.5% auto 1.5% auto;
    height: auto;
    padding: 0.18%;
    background-color: transparent; /*#ffffff;*/
    /*text-align: center;*/
    border-radius: 5px;
    box-shadow: 10px 10px 10px 10px rgba(17, 86, 175, 0.2);
    transition: all 0.3s ease;
}
.info_login{
    border: 1px solid #2bdeeb;
    width: 470px;
    height: 250px;
    left: 10px;
    background-color: #333;
    box-shadow: #124982;
    margin-left: 10px;
}
.body-containt-form-log{
    position: relative;
    width: 470px;
    margin: 1.5% auto 1.5% auto;
    height: auto;
    padding: 0.18%;
    background-color: transparent; /*#ffffff;*/
    /*text-align: center;*/
    border-radius: 5px;
    box-shadow: 10px 10px 10px 10px rgba(17, 86, 175, 0.2);
    transition: all 0.3s ease;
}
.body-containt-form:hover{
    box-shadow: 15px 10px 15px 15px rgba(17, 86, 175, 0.2);
    margin: 1% auto 20px auto;
}
.body-containt-form-log:hover{
    box-shadow: 15px 10px 15px 15px rgba(17, 86, 175, 0.2);
    margin: 1% auto 20px auto;
}
.body-containt-form .form_register{
    position: relative;
    width: 450px;
    height: 500px;
    background-color:#124982;/*rgba(17, 86, 175);/* rgba(44, 148, 233, 0.5);*/
    color: #fff;
    /*color: #124982;*/
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px;
    border-radius: 5px;
    border-top: 5px solid #4cbbec;
    border-bottom: 10px solid #4cbbec;
    box-shadow: 0 0 10px #000;
}
.body-containt-form-log .form_login{
    position: relative;
    width: 450px;
    height: 340px;
    background-color:#4cbbec;/*rgba(17, 86, 175);/* rgba(44, 148, 233, 0.5);*/
    color: #04284e;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px;
    border-radius: 5px;
    border-top: 5px solid #124982;
    border-bottom: 10px solid #124982;
    box-shadow: 0 0 10px #000;
}
.form_text_titre_R{
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    padding-bottom: 30px;
}
.form_text_titre_log{
    color: #04284e;
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
    border: 2px solid #fff;
}

.form-saisie  span{
    font-size: 14px;
    font-weight: bold;
}
.saisie-form-log span{
    font-size: 14px;
    font-weight: bolder;
}
.form-saisie input{
    width: 100%;
    font-size: 16px;
    outline: none;
    background-color: #fff;
    color: black;
    margin: 10px 0;
    padding:10px ;
    border: 1PX solid #fff;
    border-radius: 5px;
}
.saisie-form-log input{
    width: 100%;
    font-size: 16px;
    outline: none;
    background-color: #fff;
    color: black;
    margin: 5px 0;
    padding:5px ;
    border: 1PX solid #fff;
    border-radius: 5px;
}
.form-saisie input[type="submit"].btn-inscrire{
    width: 100%;
    font-size: 18px;
    background-color: #4cbbec;
    color: #fff;
    margin: 209x 0;
    padding: 10px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2 ease;
    margin-bottom: 15px;
}
.saisie-form-log input[type="submit"].btn-login{
    width: 100%;
    font-size: 18px;
    background-color: #124982;
    color: #fff;
    margin: 20px auto;
    padding: 10px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2 ease;
    margin-bottom: 20px;
}
.checkbox{
    display: block;
    border: 1px solid red;

}
.checkbox input{
   width: 10px;
   height: 10px;
   
   color:blue;

}
.form-saisie input[type="submit"].btn-inscrire:hover{
    background-color: #067fb3;
}
.saisie-form-log input[type="submit"].btn-login:hover{
    background-color: #04284e;

}
.form-saisie a{
    font-style: italic;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
}
.saisie-form-log a{
    margin: auto;
    font-style: italic;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
}

.body-containt-selector-rs{
    position: relative;
    width: 45%;
    margin: 1.5% auto 1.5% auto;
    height: 35%;
    padding: 2%;
    background-color: transparent; /*#ffffff;*/
    /*text-align: center;*/
    border-radius: 5px;
    border: 1px solid rgba(17, 86, 175, 0.2);
    /*box-shadow: 10px 10px 10px 10px rgba(17, 86, 175, 0.2);*/
    transition: all 0.3s ease;
    display: block;
    align-content: center;
    align-items: center;
    color: #124982;
    font-size: 24px;
    font-weight: 600;
}
.body-containt-selector-panier{
    width: 90%;
    background-color: rgb(187, 87, 87);
    border: none;
    height: 22px;
    border-radius: 2px;
}
.body-containt-selector-panier i{
    font-size: 14px;
    color: #fff;
}
.body-containt-selector-rs i, h3{
    text-align: center;
    color: #124982;
    border: 1pix solid red;
    margin: auto;
    font-size: 80%;
}
.body-containt-selector-rs img{
    align-items: center;
    width:32px; 
    height:32px; 
    color:blue; 
    /*border:1px solid red;*/

}
.first-body-containt-mon-compte h1{
    width: 200px;
    margin-left: 10px;
    margin-top: 5px;
    font-size: 25px;
    /*background-color: royalblue;
    color: #fff;
    border: 1px solid yellow;*/
}
.first-body-containt-mon-compte hr{
    width: 70%;
    color: #124982;
    border: 1.5px solid;
    margin:auto;
}
.body-containt-selector-rs:hover{
    background-color: rgba(8, 74, 117, 0.1);
}
.pawd_forgot{
    padding-left: 1.3vw;
    /*text-align: left;*/
}
.pawd_forgot a{
    color: rgb(10, 125, 202);
    font-size:1rem;
    font-style: italic;
    font-weight: 300;
}
.pawd_forgot a:hover{
    font-size: 1.1rem;
    color: #124982; 
    box-shadow:0 0 0 rgb(10, 158, 226);
}
/**********************************fin gestion inscription et connexion***************/

/*********************************gestion gabarit fiche technique********************/
.first-body-containt-fiche-technique{
    position: relative;
    width: 70%;
    margin: 10% auto 20px auto;
    height: auto;
    padding-top: 15px;
    padding-bottom: 10px;
    background-color: #ffffff;
    box-shadow: 10px 10px 10px 10px rgba(17, 86, 175, 0.2);
}
.Tete_ft{
    width: auto;
    position: relative;
    display: flex;
}
.header_ft-domaine{
    position:relative;
    text-transform: uppercase;
    text-align: center;
    width: 300px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    /*padding: 15px 0 15px 0;*/
}
.btn_ft{
    width: auto;
    height: auto;
    padding: 10px;
    align-items: center;
    align-content: center;
    margin-left:20% ;
    display: flex;
    
}
.btn_ft_buy{
    margin:5px;
    height: 25px;
    width: 130px;
    background: transparent;
    border: 2px solid #299e3c;/*#e5eaec;*/
    transition: 0.5s;
    outline: none;
    cursor: pointer;
}
.btn_ft_buy:hover{
    background-color: #299e3c;
    color: #fff;
    border: none;
}
.btn_ft_download{
    margin:5px;
    height: 25px;
    width: 130px;
    background: transparent;
    border: 2px solid #c73f09;/*#dce0e4;*/
    transition: 0.5s;
    outline: none;
    cursor: pointer;
    text-decoration: none;
}
.btn_ft_download a{
    color: #000;
}
.btn_ft_download a:hover{
    color: #fff;
}
.btn_ft_download:hover{
    background-color: #c73f09;
    color: #fff;
    border: none;
}
.header_ft{
    position: relative;
    background-color: #d9eaf1;
    color:#04284e; /* #fff;*/
    width: 90%;
    height: 80px;
    left: 5px;
    margin-bottom: 10px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}
.prix-formation{
    position: absolute;
    width: 250px;
    height: 40px;
    border: 1px solid #067fb3;
    top:63px;
    align-items: center;
    display: flex;
    right: 27px;
    border: none;
}
.prix-formation h2{
    text-align: center;
    background-color: rgba(224, 221, 7, 0.3);
    font-size: 1.5em;
    width: 230px;
    color: #124982;
    border-radius: 5px 0 0 5px;
    transition: 0.2s;
}
.prix-formation h2:hover{
    color: #fff;
    background-color: #299e3c;
}
.header_ft-imag{
    width: 700px;
    height: 1200px;
    overflow: hidden;
}
.header_ft-imag img{
    object-fit: cover;
}
.header_ft-pdf{
    width: 78%;
    height: 935px;
    overflow: hidden;
    
    margin:20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header_ft-imag embed{
    object-fit: cover;
}
.ft-parent{
    position: relative;
    width: 100%;
    display: flex;
    margin: auto;
}
.palier-left{
    width: 28%;
    background-color: #2bdeeb;
    margin-left: 5px;
}
.palier-right{
    width: 70%;
    background-color: #d41407;
    margin-left: 5px;
}
/****************************Gabarit du bon de commande******************************/
.first-body-containt-bon-commande{
    position: relative;
    width: 800px;
    margin: 1.5% auto 20px auto;
    height: 1300px;
    padding-top: 15px;
    padding-bottom: 10px;
    background-color: #ffffff;
    border: 1px solid #124982;
    box-shadow: 5px 5px 5px 5px rgba(17, 86, 175, 0.2);
}
/*********************************panier ********************************************/
.first-body-containt-panier{
    position: relative;
    width: 80%;
    margin: 10% auto 20px auto;
    height: auto;
    padding-top: 15px;
    padding-bottom: 10px;
    background-color: #ffffff;
    box-shadow: 2px 1px 2px 1px rgba(17, 86, 175, 0.2);
}
/*************************************fin fiche technique ***************************/

/*****************************debut gestion des l'interface utilisateur**************/

.first-body-containt-user{
    position: relative;
    width: 95%;
    margin: 31% auto 20px auto;
    height: auto;
    padding-top: 15px;
    padding-bottom: 10px;
    background-color: #ffffff;
    box-shadow: 2px 1px 2px 1px rgba(17, 86, 175, 0.2);
}

/**********************gestion poppop user register et connexion**********/
.containt3{
    position: relative;
    display: block;
    margin:auto;
    padding: 5px;
    width: 800px;
    height: auto;
    /*background-color: rgb(2,137,108);*/
    display: none;
    
}
.containt4{
    top:10px;
    position: relative;
    /*display: block;*/
    margin:auto;
    padding: 5px;
    width: 60%;
    height: auto;
    /*background-color: rgb(2,137,108);*/
    display: none;
    
}
.containt5{
    top:10px;
    position: relative;
    display: block;
    margin:auto;
    padding: 5px;
    width: 800px;
    height: auto;
    /*background-color: rgb(2,137,108);*/
    display: none;
}
.containt6{
    top:10px;
    position: relative;
    /*display: block;*/
    margin:auto;
    padding: 5px;
    width: 60%;
    height: auto;
    /*background-color: rgb(2,137,108);*/
    display: none;
}
.containt7{
    position: relative;
    display: block;
    margin:auto;
    padding: 5px;
    width: 800px;
    height: auto;
    /*background-color: rgb(2,137,108);*/
    display: none;
}
.containt8{
    position: relative;
    display: block;
    margin:auto;
    padding: 5px;
    width: 800px;
    height: auto;
    /*background-color: rgb(2,137,108);*/
    display: none;
}
.login{
    position: relative;
    /*display: block;
    /*top: 20px;*/
    width:700px;
    height: 400px;
    /*border:1px solid red;*/
    margin: auto;
}
.login-1{
    /*position: relative;*/
    /*width:700px;
    height: 400px;*/
    width: 100%;
    height:auto;
    margin: auto;
    /*background-color: yellow;*/
}

.login-2{
    position: relative;
    width:700px;
    height:400px;
    margin: auto;
}

.login-3{
   /* position: relative;
    width:700px;
    height: 400px;
    margin: auto;*/
    width: 100%;
    height:auto;
    margin: auto;
}
.login-4{
    position: relative;
    width:700px;
    height: 400px;
    margin: auto;
}

.singup{
    /*position: relative;
    /*display: block;*/
    /*top: 20px;*/
    width:700px;
    height: auto;
    margin: auto;
    /*border:1px solid rgb(55, 0, 255);*/
    display: none;
}
.singup-1{
    /*position: relative;
    width:700px;
    height: auto;
    margin: auto;
    display: none;*/
    width: 100%;
    height:auto;
    margin: auto;
    /*background-color:rgb(55, 0, 255);*/
}
.singup-2{
    position: relative;
    width:700px;
    height: auto;
    margin: auto;
    display: none;
    background-color:rgb(55, 0, 255);
}
.singup-3{
    /*position: relative;*/
    width:100%;
    height: auto;
    margin: auto;
    /*display: none;*/
    /*background-color:rgb(55, 0, 255);*/
}
.singup-4{
    position: relative;
    width:700px;
    height: auto;
    margin: auto;
    display: none;
    background-color:rgb(55, 0, 255);
}
/*.view-user-rien{
    /*display: flex;
    margin: auto;
    background-color:blue;
    height: 25vh;
}
.view-user-reg-rien, .view-user-reg-2-rien{
    display: flex;
    margin: auto;
}*/
.box{
    position: relative;
    border-radius: 10px 0 0 10px;
    /*top:2px;*/
    
    width: 65%;
    /*margin:auto;*/
    text-align: center;
    padding: 18px;
    background-color: #ece9e9;
    display: block;
    cursor: pointer;
    background-color: tomato;
    /*transform: translate(-50%,-280px);*/
    /*z-index: 100;*/
}
.box-Particulier{
    position: relative;
    border-radius: 10px;
    margin: auto;
    /*top:2px;*/
    width: 65%;
    /*margin:auto;*/
    text-align: center;
    padding: 18px;
    background-color:#ffff ;/*rgb(1, 106, 175,0.1);*/
    display: block;
    cursor: pointer;
    /*background-color:orange;*/
    /*transform: translate(-50%,-280px);*/
    /*z-index: 100;*/
}
.box-Entreprise{
    position: relative;
    border-radius: 10px;
    margin: auto;
    width: 65%;
    text-align: center;
    padding: 18px;
    background-color:#ffff ;/*rgb(1, 106, 175,0.1);*/
    display: block;
    cursor: pointer;
    
}
.box-register, .box-register-2, .box-register-4{
    position: relative;
    border-radius: 10px 0 0 10px;
    width: 65%;
    /*margin:auto;*/
    text-align: center;
    padding: 18px;
    background-color: #19afeb;
    display: none;
    cursor: pointer;
}
.box-register-1{
    position: relative;
    border-radius: 10px;
    width: 85%;
    margin:auto auto 50px auto;
    text-align: center;
    padding: 18px;
    /*background-color: #19afeb;*/
    /*background-color: rgb(27, 171, 228);*/
    background-color:rgba(44, 148, 233, 0.5);
    display: none;
    cursor: pointer;
}
.box-register-3{
    position: relative;
    border-radius: 10px;
    width: 85%;
    margin:auto auto 50px auto;
    text-align: center;
    padding: 18px;
    background-color: #124982;
    /*background-color: rgb(27, 171, 228);*/
    /*background-color:rgba(44, 148, 233, 0.5);*/
    display: none;
    cursor: pointer;
}
.info-login{
    position: right;
    border-radius: 0 10px 10px 0;
    /*top:2px;*/
    width: 35%;
    right: 0;
    height: 405px;
    /*margin:auto;*/
    text-align: center;
    /*margin-left:2px;*/
    padding: 18px;
    background-color: #fff;
    /*display: none;*/
    cursor: pointer;
}
.info-login-1{
    position: right;
    border-radius: 0 10px 10px 0;
    /*top:2px;*/
    width: 35%;
    right: 0;
    height: 405px;
    /*margin:auto;*/
    text-align: center;
    /*margin-left:2px;*/
    padding: 18px;
    background-color: #fff;
    /*display: none;*/
    cursor: pointer;
    display: none;
}
.info-login-2{
    position: right;
    border-radius: 0 10px 10px 0;
    /*top:2px;*/
    width: 35%;
    right: 0;
    height: 405px;
    /*margin:auto;*/
    text-align: center;
    /*margin-left:2px;*/
    padding: 18px;
    background-color: #fff;
    display: none;
    cursor: pointer;
}
.info-login-3{
    position: right;
    border-radius: 0 10px 10px 0;
    /*top:2px;*/
    width: 35%;
    right: 0;
    height: 405px;
    /*margin:auto;*/
    text-align: center;
    /*margin-left:2px;*/
    padding: 18px;
    background-color: #fff;
    display: none;
    cursor: pointer;
}
.info-login-4{
    position: right;
    border-radius: 0 10px 10px 0;
    /*top:2px;*/
    width: 35%;
    right: 0;
    height: 405px;
    /*margin:auto;*/
    text-align: center;
    /*margin-left:2px;*/
    padding: 18px;
    background-color: rgb(62, 109, 163);
    display: none;
    cursor: pointer;
}
.tete-form{
    position: relative;
    display: flex;
    width: 38%;
    height: 35px;
    /*left:30%;*/
    margin: auto;
    top:5px;
    border: 1px solid #fff;
    border-radius: 5px;
    background-color: #fff;
    /*margin: 2px 0 10px 50px;*/
    flex-direction: row;
    justify-content: space-around;
}
.tete-form button i{
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: normal;
    
}
.formulaire{
    position: relative;
    top:80px;
    left:-33%;
    margin: auto;
    width: 100%;
    height: auto;
    display: none;
    background-color: rgb(41, 20, 20);
}
.formulaire-Institution{
    position: relative;
    top:80px;
    left:-33%;
    margin: auto;
    width: 100%;
    height: auto;
    display: none;
    background-color: rgb(196, 69, 69);
}
.formulaire-agent{
    position: relative;
    top:80px;
    left:-33%;
    margin: auto;
    width: 100%;
    height: auto;
    display: none;
    background-color: rgb(1, 69, 69);
}
.formulaire-particulier{
    position: relative;
    top:15px;
    /*left:-33%;*/
    margin: auto;
    width: 100%;
    height: auto;
    /*border: 1px solid rgb(10, 125, 202);*/
    display: block;
    /*background-color: rgb(1, 69, 69);*/
}
.formulaire-entreprise{
    position: relative;
    top:15px;
    /*left:-33%;*/
    margin: auto;
    width: 100%;
    height: auto;
    display: block;
    /*background-color: rgb(1, 69, 69);*/
}
.formulaire-organisation{
    position: relative;
    top:80px;
    left:-33%;
    margin: auto;
    width: 100%;
    height: auto;
    display: none;
    background-color: rgb(1, 69, 69);
}
.formulaire-etablissement{
    position: relative;
    top:80px;
    left:-33%;
    margin: auto;
    width: 100%;
    height: auto;
    display: none;
    background-color: rgb(1, 69, 69);
}
.creer-compte, .se-connecter{
    width: 150px;
    height: 34px;
    font-size: larger;
    /*color: #fff;*/
    /*background-color: #0a6bda;*/
    border: 0.5px solid #fff;
    cursor: pointer;
    /*border: 0.25px solid #fff;*/
    /*border-radius: 5px;*/
}
.creer-compte-1, .se-connecter-1{
    display:inline-flex;
    width: 10.8vw;
    height: 98%;
    font-size: larger;
    border: 0.5px solid #fff;
    cursor: pointer;
    font-size: 1.36vw;
    justify-content: center;
    align-items: center;
    /*padding: 6px 0 6px 0;*/
}
.se-connecter-1{
    margin-left: 0;
}
.creer-compte-2, .se-connecter-2{
    display:inline-flex;
    width: 10.8vw;
    height: 98%;
    font-size: larger;
    border: 0.5px solid #fff;
    cursor: pointer;
    font-size: 1.36vw;
    justify-content: center;
    align-items: center;
}
.creer-compte-3, .se-connecter-3{
    display:inline-flex;
    width: 10.8vw;
    height: 98%;
    font-size: larger;
    border: 0.5px solid #fff;
    cursor: pointer;
    font-size: 1.36vw;
    justify-content: center;
    align-items: center;
}
.connexion-entreprise{
    border: 0.5px solid #fff;
    width: 10.8vw;
    font-size: 1vw;
    justify-content: center;
    align-items: center;
    background-color: #ece9e9;
}
.register-box-entreprise .se-connecter-entreprise{
    position: relative;
    margin: 10px auto auto auto;
    display: flex;
    /*background-color: #ece9e9;*/
    height: 30px;
    width: 70%;
    align-items: center;
    align-content: center;
    font-size: 1rem;
}
.register-box-particulier .se-connecter-entreprise{
    position: relative;
    margin: 10px auto auto auto;
    display: flex;
    /*background-color: #ece9e9;*/
    height: 30px;
    width: 70%;
    align-items: center;
    align-content: center;
    font-size: 1rem;
}
.se-connecter-entreprise{
    position: relative;
    margin: 10px auto auto auto;
    display: flex;
    /*background-color: #ece9e9;*/
    height: 30px;
    width: 50%;
    align-items: center;
    align-content: center;
}
.register-box-entreprise .se-connecter-entreprise button{
    margin-top: 0px;
    margin-left: 3px;
    padding: 2px;
    background-color: #fff;
    color: #124982;
    font-size: 1rem;
    padding: 0.15px;
    width: 145px;
    height: 20px;
    border: 1px solid  rgb(1,170,189);
    transition: 0.3s;
    display: flex;
    align-items: center;
    align-content: center;
}
.register-box-particulier .se-connecter-entreprise button{
    margin-top: 0px;
    margin-left: 3px;
    padding: 2px;
    background-color: #fff;
    color: #124982;
    font-size: 1rem;
    padding: 0.15px;
    width: 145px;
    height: 20px;
    border: 1px solid  rgb(1,170,189);
    transition: 0.3s;
    display: flex;
    align-items: center;
    align-content: center;
}
.box-register-3 .se-connecter-entreprise button{
    margin-top: 0px;
    margin-left: 3px;
    padding: 0px;
    background-color: #ece9e9;
    color: #124982;
    font-size: 1rem;
    width: 125px;
    height: 20px;
    border: 1px solid  rgb(1,170,189);
    transition: 0.3s;
}
.box-register-3 .se-connecter-entreprise .text-entreprise-se-connecter{
    color: #fff;
    font-size: 1rem;
    text-transform: none;
    /*border: 1px solid #124982;*/
    height: 20px;
}
.box-register-3 .se-connecter-entreprise button:hover, .box-register-3 .se-connecter-entreprise button:focus{
    border:1px solid rgb(220, 227, 231, 0.5);
    background-color: #19afeb;
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.15px;
    height: 23px;
    box-shadow: 0px 2px 3px 2px  rgb(72, 83, 90,0.4);
}
.register-box-entreprise .se-connecter-entreprise button:hover, .register-box-entreprise .se-connecter-entreprise button:focus{
    border:1px solid rgb(220, 227, 231, 0.5);
    background-color: rgb(1,170,189,0.2);
    color: #124982;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.15px;
    height: 23px;
    box-shadow: 0px 2px 3px 2px  rgb(72, 83, 90,0.4);
}
.register-box-particulier .se-connecter-entreprise button:hover, .register-box-particulier .se-connecter-entreprise button:focus{
    border:1px solid rgb(220, 227, 231, 0.5);
    background-color: rgb(1,170,189,0.1);
    color: #124982;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.15px;
    height: 23px;
    box-shadow: 0px 2px 3px 2px  rgb(72, 83, 90,0.4);
}

.creer-compte-4, .se-connecter-4{
    display:inline-flex;
    width: 10.8vw;
    height: 98%;
    font-size: larger;
    border: 0.5px solid #fff;
    cursor: pointer;
    font-size: 1.36vw;
    justify-content: center;
    align-items: center;
}
.creer-compte-5, .se-connecter-5{
    width: 150px;
    height: 34px;
    font-size: larger;
    border: 0.5px solid #fff;
    cursor: pointer;
}
.se-connecter{
    background-color: rgb(1,170,133);
    color: #fff;
    border-radius: 0 5px 5px 0;
}
.creer-compte{
    background-color: #fff;
    color: rgb(10, 125, 202);
    border-radius: 5px 0 0 5px;
}
.se-connecter-1{
    background-color: rgb(1,170,133);
    color: #fff;
    border-radius: 0 5px 5px 0;
}
.se-connecter-2{
    background-color: rgb(1,170,189);
    color: #fff;
    border-radius: 0 5px 5px 0;
}
.se-connecter-3{
    background-color: rgb(1,170,189);
    color: #fff;
    border-radius: 0 5px 5px 0;
}
.connexion-entreprise{
    color: #fff;
    border-radius: 0 5px 5px 0;
}
.se-connecter-4{
    background-color: rgb(1,170,189);
    color: #fff;
    border-radius: 0 5px 5px 0;
}
.se-connecter-5{
    background-color: rgb(1,170,189);
    color: #fff;
    border-radius: 0 5px 5px 0;
}
.creer-compte-1{
    background-color: #fff;
    color: rgb(64, 66, 64, 0.25);
    border-radius: 5px 0 0 5px;
}
.creer-compte-2{
    background-color: #fff;
    color: rgb(51, 54, 52);
    border-radius: 5px 0 0 5px;
}
.creer-compte-3{
    background-color: #fff;
    color: rgb(64, 66, 64, 0.25);
    border-radius: 5px 0 0 5px;
}
.creer-compte-4{
    background-color: #fff;
    color: rgb(10, 125, 20);
    border-radius: 5px 0 0 5px;
}
.creer-compte-5{
    background-color: #fff;
    color: rgb(10, 125, 20);
    border-radius: 5px 0 0 5px;
}
/*head part of user icon*/
.cicle .register-head{
    display: inline-block;
    width: 18px;
    height: 20px;
    margin: 0 auto;
    margin-top:6px;
    border-radius: 50%;
    left: 0;
    right: 0;
    background-color: #fff;
}
.cicle-register .register-head-reg{
    display: inline-block;
    width: 18px;
    height: 20px;
    margin: 0 auto;
    margin-top:6px;
    border-radius: 50%;
    left: 0;
    right: 0;
    background-color: #fff;
}
/* body part od user icon   **/
.cicle .register-body{
    display: inline-block;
    width: 35px;
    height: 25px;
    margin: 0 auto;
    margin-top:26px;
    border-radius: 50%;
    left: 0;
    right: 0;
    background-color: #fff;
}
.cicle-register .register-body-reg{
    display: inline-block;
    width: 35px;
    height: 25px;
    margin: 0 auto;
    margin-top:26px;
    border-radius: 50%;
    left: 0;
    right: 0;
    background-color: #fff;
}
.closeInstitution{
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0;
    right: 0;
    color: tomato;
    font-size: 34px;
}
.closeParticulier{
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0;
    right: 0;
    color: tomato;
    font-size: 34px;
}
.closeAgent{
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0;
    right: 0;
    color: tomato;
    font-size: 34px;
}
.closeEntreprise{
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0;
    right: 0;
    color: tomato;
    font-size: 34px;
}
.closeOrganisation{
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0;
    right: 0;
    color: tomato;
    font-size: 34px;
}
.closeEtablissement{
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0;
    right: 0;
    color: tomato;
    font-size: 34px;
}
/*////////////////////*/
.close-register{
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0;
    right: 0;
    color: tomato;
    font-size: 34px;
}
.close-register-particulier{
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0;
    right: 0;
    color: tomato;
    font-size: 34px;
}
.close-register-agent{
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0;
    right: 0;
    color: tomato;
    font-size: 34px;
}
.close-register-entreprise{
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0;
    right: 0;
    color: tomato;
    font-size: 34px;
}
.close-register-organisation{
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0;
    right: 0;
    color: tomato;
    font-size: 34px;
}
.close-register-etablissement{
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0;
    right: 0;
    color: tomato;
    font-size: 34px;
}
.msgError{
    display: block;
    position: relative;
    height: 20px;
    width: auto;
    top: 40px;
    margin:auto;
    font-size: 1em;
    font-weight: 300;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: orangered;
    /*border: 1px solid olive;*/
}
.closeInstitution:hover, .close-register:hover{
    background-color: red;
    border-radius: 50%;
    color: #fcfcfc;
    cursor: pointer;
}
.closeParticulier:hover, .close-register-particulier:hover{
    background-color: red;
    border-radius: 50%;
    color: #fcfcfc;
    cursor: pointer;
}
.closeAgent:hover, .close-register-agent:hover{
    background-color: red;
    border-radius: 50%;
    color: #fcfcfc;
    cursor: pointer;
}
.closeEntreprise:hover, .close-register-entreprise:hover{
    background-color: red;
    border-radius: 50%;
    color: #fcfcfc;
    cursor: pointer;
}
.closeOrganisation:hover, .close-register-organisation:hover{
    background-color: red;
    border-radius: 50%;
    color: #fcfcfc;
    cursor: pointer;
}
.closeEtablissement:hover, .close-register-etablissement:hover{
    background-color: red;
    border-radius: 50%;
    color: #fcfcfc;
    cursor: pointer;
}
.register-box{
    margin-top: 20px;
}
.register-box-particulier{
    margin-top: 40px;
}
.register-box-entreprise{
    margin-top: 40px;
}
.register-box-reg{
    margin-top: 48px;
}
.register-box-reg-Particulier{
    margin-top: 40px;
}
.register-box-reg-Entreprise{
    margin-top: 40px;
}

.register-box label{
    display: block;
    position: absolute;
    font-size: 18px;
    color: rgb(169,171,170);
    margin-top: -62px;
    text-align: left;
    pointer-events: none;
    transition: .4s;
    padding-left: 30px ;
}
.register-box-particulier label{
    display: block;
    position: absolute;
    font-size: 18px;
    color: rgb(169,171,170);
    margin-top: 8px;
    text-align: left;
    pointer-events: none;
    transition: .4s;
    padding-left: 15%;
}
.register-box-entreprise label{
    display: block;
    position: absolute;
    font-size: 18px;
    color: rgb(169,171,170);
    margin-top: 8px;
    text-align: left;
    pointer-events: none;
    transition: .4s;
    padding-left: 15%;
}
.register-box-reg label{
    display: block;
    position: absolute;
    font-size: 18px;
    color: rgb(169,171,170);
    margin-top: -62px;
    text-align: left;
    pointer-events: none;
    transition: .4s;
    padding-left: 8px ;
}
.register-box-reg-Particulier label{
    display: block;
    position: absolute;
    font-size: 1rem;
    color: rgb(169,171,170);
    margin-top: 8px;
    text-align: left;
    pointer-events: none;
    transition: .4s;
    padding-left: 15% ;
}
.register-box-reg-Entreprise label{
    display: block;
    position: absolute;
    font-size: 1rem;
    color: rgb(169,171,170);
    margin-top: 8px;
    text-align: left;
    pointer-events: none;
    transition: .4s;
    padding-left: 15% ;
}
.register-box input, .register-box-reg input, .register-box-reg select{
    width: 90%;
    height: 40px;
    margin: 10px 1px 28px 1px;
    padding: 9px;
    font-size: 18px;
    color:#555;
    border:1px solid rgb(1,170,133);
    outline: none;
    border-radius: 5px;
}
.register-box-particulier input, .register-box-particulier select{
    width: 90%;
    height: 40px;
    /*margin: 10px 1px 28px 1px;*/
    padding: 9px;
    font-size: 18px;
    color:#555;
    border:1px solid rgb(1,170,133);
    outline: none;
    border-radius: 0 5px 5px 0 ;
}
.register-box-entreprise input, .register-box-entreprise select{
    width: 90%;
    height: 40px;
    /*margin: 10px 1px 28px 1px;*/
    padding: 9px;
    font-size: 18px;
    color:#555;
    border:1px solid rgb(1,170,133);
    outline: none;
    border-radius: 0 5px 5px 0 ;
}
.register-box-particulier .saisie-Particulier{
    width: 80%;
    position: relative;
    display: flex;
    /*border: 1px solid #e91e63;*/
    /*margin: 10px 1px 28px 1px;*/
    margin: 20px auto 28px auto;
    
}
.register-box-entreprise .saisie-Entreprise{
    width: 80%;
    position: relative;
    display: flex;
    /*border: 1px solid #e91e63;*/
    /*margin: 10px 1px 28px 1px;*/
    margin: 20px auto 28px auto;
}
.register-box-reg-Particulier .contenaire_reg_Particulier{
    width: 80%;
    /*position: relative;
    display: flex;
    /*border: 1px solid #e91e63;*/
    /*margin: 10px 1px 28px 1px;*/
    margin: 20px auto 28px auto;
    
}

.register-box-reg-Particulier .contenaire_reg_Particulier .saisie-reg-Particulier{
    width: 100%;
    position: relative;
    display: flex;
    /*border: 1px solid #e91e63;*/
    /*margin: 10px 1px 28px 1px;*/
    margin: 5px auto 5px auto;
    
}
.register-box-reg-Particulier .saisie-reg-Particulier{
    width: 80%;
    position: relative;
    display: flex;
    /*border: 1px solid #e91e63;*/
    /*margin: 10px 1px 28px 1px;*/
    margin: 20px auto 28px auto;
    
}

.register-box-reg-Entreprise .contenaire_reg_entreprise{
    width: 80%;
    /*position: relative;
    display: flex;*/
    /*border: 1px solid #e91e63;
    /*margin: 10px 1px 28px 1px;*/
    margin: 20px auto 28px auto;
}
.register-box-reg-Entreprise .saisie-reg-Entreprise{
    width: 80%;
    position: relative;
    display: flex;
    /*border: 1px solid #e91e63;*/
    /*margin: 10px 1px 28px 1px;*/
    margin: 20px auto 28px auto;
}
.register-box-reg-Entreprise .contenaire_reg_entreprise .saisie-reg-Entreprise{
    width: 100%;
    position: relative;
    display: flex;
    /*border: 1px solid #e91e63;*/
    /*margin: 10px 1px 28px 1px;*/
    margin: 5px auto 5px auto;
    
}
.register-box-particulier .saisie-Particulier .mail-icon{
    width: 10%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgb(1,170,133);
    background-color:rgb(233, 227, 227,0.6);
    color: #124982;
    border-radius: 5px 0 0 5px;
}
.register-box-entreprise .saisie-Entreprise .mail-icon{
    width: 10%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgb(1,170,133);
    background-color:rgb(233, 227, 227,0.6);
    color: #124982;
    border-radius: 5px 0 0 5px;
}
.register-box-reg-Particulier .saisie-reg-Particulier .mail-icon{
    width: 10%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgb(5, 116, 207);
    background-color:rgb(233, 227, 227,0.6);
    color: #124982;
    border-radius: 5px 0 0 5px;
}
.register-box-reg-Entreprise .saisie-reg-Entreprise .mail-icon{
    width: 10%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgb(5, 116, 207);
    background-color:rgb(233, 227, 227,0.6);
    color: #124982;
    border-radius: 5px 0 0 5px;
}
fieldset .saisie-reg-Particulier .mail-icon i{
    color:#124982;
    font-size: 1rem;
    border: none;
}
fieldset .saisie-reg-Entreprise .mail-icon i{
    color:#124982;
    font-size: 1rem;
    border: none;
}
.register-box-particulier .saisie-Particulier .mail-text{
    /*display: flex;*/
    /*width: 92%;*/
    height: auto;
    border: 1px solid #000;
    /*background-color: #299e3c;*/
    margin: auto;
}
.register-box-entreprise .saisie-Entreprise .mail-text{
    height: auto;
    border: 1px solid #000;
    /*background-color: #299e3c;*/
    margin: auto;
}
.register-box-reg-Particulier .saisie-reg-Particulier .mail-text{
    /*display: flex;*/
    /*width: 92%;*/
    height: auto;
    /*border: 1px solid rgba(161, 158, 158, 0.2);*/
    /*background-color: #299e3c;*/
    margin: auto;
}
.register-box-reg-Entreprise .saisie-reg-Entreprise .mail-text{
    height: auto;
    /*border: 1px solid rgba(161, 158, 158, 0.2);*/
    /*background-color: #299e3c;*/
    margin: auto;
}

.register-box-reg-Particulier input, .register-box-reg-Particulier select {
    width: 90%;
    height: 40px;
    margin: 10px 1px 28px 1px;
    padding: 9px;
    font-size: 18px;
    color:#555;
    border:1px solid rgb(5, 116, 207,0.2);
    outline: none;
    border-radius: 0 5px 5px 0;
}
.register-box-reg-Entreprise input, .register-box-reg-Entreprise select {
    width: 90%;
    height: 40px;
    /*margin: 10px 1px 28px 1px;*/
    padding: 9px;
    font-size: 18px;
    color:#555;
    border:1px solid rgb(5, 116, 207,0.2);
    outline: none;
    border-radius: 0 5px 5px 0;
}
.register-box-particulier input:focus, .register-box-particulier input:hover{
    border:1px solid #299e3c;
}
.register-box-entreprise input:focus, .register-box-entreprise input:hover{
    border:1px solid #299e3c;
}
.register-box-reg-Particulier input:focus, .register-box-reg-Particulier input:hover{
    border:1px solid rgb(4, 79, 141);
}
.register-box-reg-Entreprise input:focus, .register-box-reg-Entreprise input:hover{
    border:1px solid rgb(4, 79, 141);
}
.register-box-reg-Particulier input:valid{
    background-color: rgba(35, 226, 10, 0.1);
    border:1px solid rgb(4, 79, 141);
}
.register-box-reg-Entreprise input:valid{
    background-color: rgba(35, 226, 10, 0.1);
    border:1px solid rgb(4, 79, 141);
}

.register-box-particulier input:valid{
    background-color: rgb(10, 158, 226, 0.3);
}
.register-box-entreprise input:valid{
    background-color: rgb(10, 158, 226, 0.3);
}
.register-box input:focus~label,
.register-box-reg input:focus~label,
.register-box input:valid~label,
.register-box-reg input:valid~label{
    margin-top: -95px;
    padding-left: 30px;
    color: #124982;
}

.register-box-particulier input:focus~label,
.register-box-particulier input:valid~label,
.register-box-reg-Particulier input:focus~label,
.register-box-reg-Particulier input:valid~label{
    margin-top: -20px;
    padding-left: 20px;
    color: #124982;
}
.register-box-entreprise input:focus~label,
.register-box-entreprise input:valid~label,
.register-box-reg-Entreprise input:focus~label,
.register-box-reg-Entreprise input:valid~label{
    margin-top: -20px;
    padding-left: 20px;
    color: #124982;
}
.register-box-entreprise select:focus~label,
.register-box-entreprise select:valid~label,
.register-box-reg-Entreprise select:focus~label,
.register-box-reg-Entreprise select:valid~label{
    margin-top: -20px;
    padding-left: 20px;
    color: #124982;
}


.box h1, .box-register h1, .box-register-1 h1, .box-register-2 h1, .box-register-3 h1, .box-register-4 h1, .box-register-5 h1{
    margin-top:28px;
    margin-bottom: 28px;
    font-size: 21px;
    font-weight: 300;
}
/*.box-Particulier h1{
    margin-top:28px;
    margin-bottom: 28px;
    font-size: 21px;
    font-weight: 300;
}*/
.box-Particulier .cicle{
    position: absolute;
    margin: 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    top: -10px;
    right: 0;
    left: 0;
    background-color: rgb(1,170,133);
    border: 2px solid #fff;
}
.box-Entreprise .cicle{
    position: absolute;
    margin: 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    top: -10px;
    right: 0;
    left: 0;
    background-color: rgb(1,170,133);
    border: 2px solid #fff;
}
.box .cicle{
    position: absolute;
    margin: 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    top: -30px;
    right: 0;
    left: 0;
    background-color: rgb(1,170,133);
    border: 2px solid #fff;
}
.box-register .cicle-register,.box-register-2 .cicle-register, .box-register-4 .cicle-register, .box-register-5 .cicle-register{
    position: absolute;
    margin: 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    top: -30px;
    right: 0;
    left: 0;
    background-color: rgb(10, 125, 202);
    border: 2px solid #fff;
}
.box-register-1 .cicle-register{
    position: absolute;
    margin: 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    top: -10px;
    right: 0;
    left: 0;
    background-color: rgb(10, 125, 202);
    border: 2px solid #fff;
}
.box-register-3 .cicle-register{
    position: absolute;
    margin: 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    top: -10px;
    right: 0;
    left: 0;
    background-color: rgb(10, 125, 202);
    border: 2px solid #fff;
}

.box .cicle, .box span, .box-Particulier .cicle, .box-Particulier span, .box-Entreprise .cicle, .box-Entreprise span{
    display: inline-block;
    position: absolute;
}
.box-register .cicle-register, .box-register span{
    display: inline-block;
    position: absolute;
}
.box-register-1 .cicle-register, .box-register-1 span{
    display: inline-block;
    position: absolute;
}
.box-register-2 .cicle-register, .box-register-2 span{
    display: inline-block;
    position: absolute;
}
.box-register-3 .cicle-register, .box-register-3 span{
    display: inline-block;
    position: absolute;
}
.box-register-4 .cicle-register, .box-register-4 span{
    display: inline-block;
    position: absolute;
}
.box-register-5 .cicle-register, .box-register-5 span{
    display: inline-block;
    position: absolute;
}
/*POUR LA GESTION DES MESSAGE D'ERREURS CHAMPS SAISIE*/
#tel_bureau_e, #date_naiss_e, #adress_mail_e1,#tel_mobile_e, #adress_mail_e2, #adress_pwd1_e, #adress_pwd2_e{
    margin-top:3px;
    padding-left: 10%;
    /*border: 1px solid #8b299e;*/
    text-align: left;
    color: rgb(238, 37, 37);
}
#validation_datenais_p, #date_nais_p, #tel_mobile_p, #email_p, #tel_bureau_p, #mail_compte_p, #pwd1_p, #pwd2_p, #email_perso_p {
    margin-top:3px;
    padding-left: 10%;
    /*border: 1px solid #8b299e;*/
    text-align: left;
    color: rgb(238, 37, 37);
}

.box span, .box-Particulier span{
    height: 2px;
    background-color: rgb(1,170,133);
}
.box-register span, .box-register-1 span, .box-register-2 span, .box-register-3 span, .box-register-4 span, .box-register-5 span{
    height: 2px;
    background-color: rgb(10, 125, 202);
}
.saisie-reg-Entreprise span {
    display:block;
    position: relative;
    background-color: #299e3c;
}
.TextLoginParticulier{
    margin: 8% auto auto auto;
    /*padding-left: 25px;*/
    width: 80%;
    text-align: justify; 
    font-size: 12px;

}
.TextLoginEntreprise{
    margin: 12% auto auto auto;
    /*padding-left: 25px;*/
    width: 80%;
    text-align: justify; 
    font-size: 12px;
    color: #fff;
}
.TextLoginEntreprise h2{
    text-align: center;
    color: #fff;
}
.TextLoginParticulier h2{
    text-align: center;
}
.body-text{
    font-size: 17px;
    line-height: 25px;
}
.box p, .box-Particulier p, .box-register p, .box-register-1 p, .box-register-2 p, .box-register-3 p, .box-register-4 p, .box-register-5 p{
    margin-top: 28px;
    font-size: 22px;
}
.box button, .box-Particulier button, .box-Entreprise button{
    display: block;
    margin:0 auto;
    margin-top: 20px;
    padding: 10px 43px 10px 43px;
    border: none;
    border-radius: 32px;
    background-color: rgb(1,170,133);
    color: #fcfcfc;
}
.box-register button, .box-register-1 button, .box-register-2 button, .box-register-3 button, .box-register-4 button, .box-register-5 button{
    display: block;
    margin:0 auto;
    margin-top: 20px;
    padding: 10px 43px 10px 43px;
    border: none;
    border-radius: 32px;
    background-color: rgb(10, 125, 202);
    color: #fcfcfc;
    transition: 0.2s;
}
.box button:hover, .box button:focus {
    background-color: rgb(3,145,133);
    outline: rgb(2,137,108);
    cursor: pointer;
}
.box-Particulier button:hover, .box-Particulier button:focus {
    background-color: rgb(3,145,133);
    outline: rgb(2,137,108);
    cursor: pointer;
}
.box-Entreprise button:hover, .box-Entreprise button:focus {
    background-color: rgb(3,145,133);
    outline: rgb(2,137,108);
    cursor: pointer;
}
.box-register button:hover, .box-register button:focus{
    background-color: rgb(13, 128, 202);
    outline: rgb(8, 125, 202);
    cursor: pointer;
}
.box-register-1 button:hover, .box-register-1 button:focus{
    background-color: rgb(3, 86, 138);
    /*outline: rgb(8, 125, 202);*/
    padding: 13px 46px 13px 46px;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0px 4px 8px 4px  rgb(72, 83, 90,0.4);
}
.box-register-2 button:hover, .box-register-2 button:focus{
    background-color: rgb(13, 128, 202);
    outline: rgb(8, 125, 202);
    cursor: pointer;
}
.box-register-3 button:hover, .box-register-3 button:focus{
    background-color: rgb(3, 86, 138);
    padding: 13px 46px 13px 46px;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0px 4px 8px 4px  rgb(72, 83, 90,0.4);
}

.box-register-4 button:hover, .box-register-4 button:focus{
    background-color: rgb(13, 128, 202);
    outline: rgb(8, 125, 202);
    cursor: pointer;
}
.box-register-5 button:hover, .box-register-5 button:focus{
    background-color: rgb(13, 128, 202);
    outline: rgb(8, 125, 202);
    cursor: pointer;
}
.register-box-reg-Particulier fieldset{
    
    background-color: #ffff;
    border: rgb(1, 106, 175,0.1);
    border-radius: 10px;
    margin:8px 0 10px 0;
    padding-top: 13px;
}
.register-box-reg-Entreprise fieldset{
    background-color: #ffff;
    border: rgb(1, 106, 175,0.1);
    border-radius: 10px;
    margin:8px 0 10px 0;
    padding-top: 13px;
}
.register-box-reg-Particulier i{
    color:#ffff;
    text-align: left;
    /*border: 1px solid #dddd;*/
    font-size: larger;
    font-style: normal;
    text-transform: uppercase;
}
.register-box-reg-Entreprise i{
    color:#ffff;
    text-align: left;
    /*border: 1px solid #dddd;*/
    font-size: larger;
    font-style: normal;
    text-transform: uppercase;
}
/*********************************fin gestion utilisateur*****************************/


/* gestion de la partie responsive*/

@media(max-width:1060px){
    header{
        padding:15px;
        /*background: rgba(31, 115, 240, 0.1);*/
    }
    header label{
        display: initial;
    }

    header .navbar{
        position: absolute;
        top: 100%; left: 0; right: 0;
        /*background: rgb(196, 69, 69);*/
        border-top: 1px solid rgba(0,0,0,.1);
        display: none;
    }

    header .navbar ul li{
        width: 80%;
    }
    header .navbar ul li ul{
       position: relative;
       width: 80%; 
    }
    header .navbar ul li ul li{
        background: #eee;
    }
    header .navbar ul li ul li ul{
        width: 60%;
        left: 0;
    }

    #menu-bar:checked ~ .navbar{
        display: initial;
    }


    .swiper-button-next {
        right: 20px;
        transform: rotate(90deg);
    }
  
    .swiper-button-prev {
        left: 20px;
        transform: rotate(90deg);
    }

}

/*for small device case register user*/
@media(max-width:350px){
    .box{
        width: 90%;
    }

}