/* CSS Document */


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

.hidden {
  display: none;
}

/* Empecher surbrillance d'un input texte  */
input:focus, select:focus, textarea:focus, button:focus { outline: none; }


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

a:hover {
    text-decoration:underline;
}



@font-face {
  font-family: "jostLight";
  src: url("../fonts/Jost-Light.ttf") format("truetype");
}

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

@font-face {
  font-family: "jostMedium";
  src: url("../fonts/Jost-Medium.ttf") format("truetype");
}

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

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


.containerPrincipal {
    /* max-width: 1450px; */
    width: 95%;
    /* min-width:600px; */
    
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}
.headerLarge {
    width: 100%;
    height: 350px;
    background-color: #FFA900;
    background-image: url('../_composants/images/header-bardage.jpg');
    background-size:cover;
    background-repeat: no-repeat;
}
.headerMobile {
    width: 100%;
    height: auto;
    background-color: #FFA900;
}
.containerBas {
    border: 1px solid #e5e5e5;
    width: calc (100% - 2px);
    background-color: #FFF;
    height: auto;
}
.btnBox {
    color: #FFA900;
    background-color: #FFF;
    text-decoration: none;
}
.btnBox:hover {
    color: #FFF;
    background-color: #FFA900;
    text-decoration: none;
}
.boxSelection {
    width: 250px;
    flex: 0 0 250px;
}

.menuBloc {
    display: inline-block;
    
}


.essenceDetailLarge {
    visibility: visible;
    display: block;
}
.essenceDetailMobile {
    visibility: hidden;
    display: none;
}


/* *************************************************************** */
/* ECRAN LARGES */
/* *************************************************************** */
@media only screen and (min-width: 1200px) {
  
.essenceDetailLarge {
    visibility: visible;
    display: block;
    
}
.essenceDetailMobile {
    visibility: hidden;
    display: none;
}      
    
    .menuBloc {
    display: inline-block;
    
}
.containerPrincipal {
    width: 95%;
}
.headerLarge {
    visibility: visible;
    display: block;
}
.headerMobile {
    visibility: hidden;
    display: none;
}
.footerLarge {
    visibility: visible;
    display: block;
}
.footerTablette {
    visibility: hidden;
    display: none;
}
.footerMobile {
    visibility: hidden;
    display: none;
}
.boxSelection {
    width: 250px;
    flex: 0 0 250px;
}
}

/* *************************************************************** */
/* TABLETTE */
/* *************************************************************** */
@media only screen and (min-width: 601px) and (max-width : 1199px) {
  
    
.essenceDetailLarge {
    visibility: visible;
    display: block;
}
.essenceDetailMobile {
    visibility: hidden;
    display: none;
}    
    .menuBloc {
    display: inline-block;
    
}
.containerPrincipal {
    width: 100%;
    margin-top: 0px;
}
.headerLarge {
    visibility: visible;
    display: block;
}
.headerMobile {
    visibility: hidden;
    display: none;
}
.containerBas {
    border: 0px;
    width: 100%;
}
.footerLarge {
    visibility: hidden;
    display: none;
}
.footerTablette {
    visibility: visible;
    display: block;
}
.footerMobile {
    visibility: hidden;
    display: none;
}
.boxSelection {
    width: 250px;
    flex: 0 0 250px;
}
}

/* *************************************************************** */
/* MOBILE*/
/* *************************************************************** */
@media only screen and (max-width: 600px) {
    
    
.essenceDetailLarge {
    visibility: hidden;
    display: none;
}
.essenceDetailMobile {
    visibility: visible;
    display: block;
}    
.containerPrincipal {
    margin-top: 0px;
    width: 100%;
}
.headerLarge {
    visibility: hidden;
    display: none;
}
.headerMobile {
    visibility: visible;
    display: block;
    width: 100%;
    height: auto;
}
.containerBas {
    border: 0px;
    width: 100%;
}
.footerLarge {
    visibility: hidden;
    display: none;
}
.footerTablette {
    visibility: hidden;
    display: none;
}
.footerMobile {
    visibility: visible;
    display: block;
}
.boxSelection {
    width: 100%;
    flex: 0 0 95%;
}
    
    .menuBloc {
        width:100%;
    
}
}