/* CSS Document */


.bloc2et3 {
 width:400px; 
float:left;
height:auto;
margin:10px;
}


.titreMoyen {
color:#142C4A;
    font-size:20px;
    font-family:openSansExtraBold;
}

.texteNormal {
    color:#494949;
    font-size:14px;
    font-family:openSansRegular;
}

.texteBold {
    color:#494949;
    font-size:14px;
    font-family:openSansBold;
}

.selectInput
{
    
    padding: 17px;
    margin: 0;
    border: 0px solid #ccc;
    width: 100%;
    overflow: hidden;
    font-size:17px;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
     border-radius:5px;
    background-image: url('../images/fleche-vers-le-bas-pour-naviguer.svg');
  background-position: right;
  background-size: 15px 15px;
  background-repeat: no-repeat;
}


.selectInputCadre
{
    border-radius:5px;
    border:1px solid #CCC;
    padding-right:10px;
}

.HomeBlocInfo {
  width:150px;
    height:120px;
    border:1px solid #CCC;
    border-radius:5px;
    float:left;
    margin-right:40px;
    text-align:center;
    padding-top:30px;
    margin-top:40px ;
    background-color:#EEEEEE;
        
}



.lienTexteBouton {
    padding:2px;
    padding-left:15px;
    padding-right:15px;
    background-color:#4982f2;
    color:#FFF;
    border-radius:3px;
    display: inline-block;
    font-size:13px;
    text-decoration:none;
}

.titre-backoffice {
    font-family: poppinsBold;
    font-size:40px;
}

.sousTitre-backoffice {
   font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-size:15px;
    color:#A8A8A8;
}



.titreCouleur {
    font-family: poppinsBold;
    font-size:25px;
    color:#4982f2;
}

.Backoffice-Contenu-avecMenuGauche {
   float:left;
    height:300px;
    margin-top:45px;
    width:calc(100% - 305px); 
    margin-left:50px; 
}

.Backoffice-Contenu-sansMenuGauche {
   /*float:left;*/
    height:300px;
    margin-top:45px;
    width:80%; 
    margin-left:auto; 
    margin-right:auto; 
    max-width: 1500px;
}


.Frontoffice-Contenu {
   /*float:left;*/
    height:300px;
    margin-top:20px;
    width:90%; 
    margin-left:auto; 
    margin-right:auto; 
    max-width: 1500px;
}


.menu-vertical {
  list-style: none;
  margin: 0;
  padding: 0;
 /*margin-top:25px; */
}

.menu-vertical li {
  padding-top: 12px;
  padding-bottom: 12px;
  
}

.menu-vertical li:first-child  {
  padding-top: 60px;
  padding-bottom: 12px;
  
}


.menu-vertical a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
}

.menu-vertical .icone {
  margin-right: 5px;
}

.menu-vertical .icone {
 width:25px;
    height:25px;
    background-size: contain;
    background-repeat: no-repeat;
}

.menu-vertical .texte {
  flex: 1;
  line-height:25px;
    font-size:13px;
    margin-left:5px;
}


.menu-vertical .indicateur {
    width:13px;
    height:25px;
    margin-right:15px;
    border-radius: 0px 7px 7px 0px
    
}











body {
padding:0px;
margin:0px;
font-family: poppins;
    
}

.hidden {
  display: none;
}



/* CSS pour masquer afficher uun div */
.on {
    display: block;
}
 
.off {
    display: none;
}
/* Empecher surbrillance d'un input texte  */
input:focus, select:focus, textarea:focus, button:focus { outline: none; }


.ligneCentre{
    width:90%;
    max-width:400px;
    margin-right:auto;
    margin-left:auto;
}


.lignePleine
{
    
    width:100%;
    
}


a {
  text-decoration: none;
  color: #4982f2;
}

a:hover {
    text-decoration:underline;
}

.lienGris {

   color: #B1B1B1; 

}

.lienNoir {

   color: #000; 

}

.inputSUBMITcouleur {
   width:100%;
    height:50px;
   font-size:18px;
    border:1px solid #4982f2;
    border-radius:5px;
    background-color:#4982f2;
    text-align:center;
    line-height:35px;
    color:#FFF;

    
}

.inputTEXTE {
width:96%;
    background-color:#FFF;
    padding:10px;
    border:1px solid #BBB;
    border-radius:5px;
    font-size:15px;
    padding-left:2%;
    padding-right:2%;
    padding-top:15px;
    padding-bottom:15px;
}

.inputTEXTElibelle {
    
    color:#555555;
    font-size:15px;
}

.texteRemarque {
    
    /*color:#B1B1B1;*/
    color:#000;
    font-size:12px;
}


.cadreAvecOmbre{
    
    background-color:#FFF;
    width:480px;height:auto;
    border:1px solid #f7f7f7;
    margin-left:auto;
    margin-right:auto;
    border-radius:10px;
    box-shadow: 5px 5px 5px 0px #d7d7d7;
    margin-top:50px; 
    
    
}




.selectInput2 {
    
 -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding:8px;
     border:2px solid black;                                         
   background-image: url('../_composants/images/fleche-vers-le-bas-pour-naviguer.svg');
  background-position: center right 10px;
  background-size: 15px 15px;
  background-repeat: no-repeat;
    appearance: none;
    width:200px;
    outline: none;
    height:40px;
    font-size:14px;   
}


.selectInput
{
    
    padding: 17px;
    margin: 0;
    border: 0px solid #ccc;
    width: 100%;
    overflow: hidden;
    font-size:17px;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
     border-radius:5px;
    background-image: url('../images/fleche-vers-le-bas-pour-naviguer.svg');
  background-position: right;
  background-size: 15px 15px;
  background-repeat: no-repeat;
}


.selectInputCadre
{
    border-radius:5px;
    border:1px solid #CCC;
    padding-right:10px;
}


@font-face {
  font-family: "poppins";
  src: url("../fonts/Poppins-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "poppinsBold";
  src: url("../fonts/Poppins-Bold.ttf") format("truetype");
}


@font-face {
  font-family: "openSansRegular";
  src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "openSansExtraBold";
  src: url("../fonts/OpenSans_Condensed-ExtraBold.ttf") format("truetype");
}

@font-face {
  font-family: "openSansBold";
  src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "openSansSemiBold";
  src: url("../fonts/OpenSans-SemiBold.ttf") format("truetype");
}

.boutonOn{
 margin-left:auto;
    margin-right:auto;
    width:250px;
    background-color:#1A2B49;
    color:#FFF;font-size:13px;
    font-family: openSansBold;
    text-align:center;
    padding:10px;
    border-radius:50px;
    margin-top:15px;
    margin-bottom:15px;
    border:1px solid #1A2B49   
}

.boutonOff {
    margin-left:auto;
    margin-right:auto;
    width:250px;
    background-color:#F7F7F7;
    color:#1A2B49;font-size:13px;
    font-family: openSansBold;
    text-align:center;
    padding:10px;
    border-radius:50px;
    margin-top:15px;
    margin-bottom:15px;
    border:1px solid #1A2B49
}

.cadreBoutonPrincipal{
  width:600px;
    margin-left:auto;
    margin-right:auto;
    height:auto;  
}

.cadreBoutonGauche {
    float:left;
    width:47%;
    
}

.cadreBoutonDroit {
    float:right;
    width:47%;
    
}

.bloc1sur2 {
 width:48%   
}

/* *************************************************************** */
/* ECRAN LARGES */
/* *************************************************************** */
@media only screen and (min-width: 1200px) {
  .bloc1sur2 {
 width:48%   
}  
    
    .bloc2et3 {
 width:400px;   
}

    
.cadreBoutonPrincipal{
  width:600px;
    margin-left:auto;
    margin-right:auto;
    height:auto;  
}

.cadreBoutonGauche {
    float:left;
    width:47%;
    
}

.cadreBoutonDroit {
    float:right;
    width:47%;
    
}
}
/* *************************************************************** */
/* TABLETTE */
/* *************************************************************** */
@media only screen and (min-width: 601px) and (max-width : 1199px) {
 .bloc1sur2 {
 width:48%   
}   
    
    .bloc2et3 {
 width:400px;   
}


    .cadreBoutonPrincipal{
  width:600px;
    margin-left:auto;
    margin-right:auto;
    height:auto;  
}
    
.cadreBoutonGauche {
    float:left;
    width:47%;
    
}

.cadreBoutonDroit {
    float:right;
    width:47%;
    
}}
/* *************************************************************** */
/* MOBILE*/
/* *************************************************************** */
@media only screen and (max-width: 600px) {
  
    .bloc1sur2 {
 width:100%;   
}
    
    .bloc2et3 {
 width:100%;   
}


.cadreBoutonPrincipal{
  width:100%;
    height:auto;  
}
    
    
.cadreBoutonGauche {
    float:left;
    width:100%;
    
}

.cadreBoutonDroit {
    float:right;
    width:100%;
    
}
}