@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Display:wght@700&display=swap');


:root {
  --jaune: #fcc955;
  --jaunetexte: #ffb306;
  --marron: #76513D;
  --marronfonce: #4B2D1C;
  --marronclair: #d9baa8;
  --jaunepaille:#fff9eb;
  --vert:#589E45;
  --oswald: 'Oswald', sans-serif;
  --stencil: 'Big Shoulders Stencil Display', cursive;
}


body{
    font-family: 'Poppins', sans-serif;
    font-weight:400;
    min-width:320px;
    color:#000;
    line-height:1.2;
    font-size:14px;
    background:#fff;
}

/*---------------------classes récurentes--------------------*/
.haut1,
.haut10,
.haut20,
.haut30,
.haut40,
.haut60{
	display:block;
}
.haut1{
	height:1px;
}
.haut10{
	height:10px;
}
.haut20{
	height:20px;
}
.haut30{
	height:30px;
}
.haut40{
	height:40px;
}
.haut60{
	height:60px;
}

a, a:hover, a:active, a:visited{
	text-decoration:none;
}
ul{
    list-style:none;
}
.img-resp img{
    max-width:100%;
    height:auto;
}

.visuel img{
    width:100%;
    height:auto;
}
.box img:hover{
    filter: brightness(0.6);
    cursor: zoom-in;
}

.relative{
    position:relative;
}
.bold{
    font-weight: bold;
}
.blanc{
    color:#fff;
}

.ombre{
	box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.16);
}
.ombre.img-resp img{
    max-height: 190px;
}
.fond-marron{
	background:var(--marron);
}
.fond-marron-fonce{
	background:var(--marronfonce);
}
.fond-marron-clair{
   background:var(--marronclair);
}
.fond-blanc{
	background:#fff;
}
.fond-jaune-paille{
	background:var(--jaunepaille);
}
.fond-jaune{
   background:var(--jaune);
}

.tabs--primary li{
    padding:3px 10px;
    border-top:1px solid #ccc;
    border-right:1px solid #ccc;
}
.tabs--primary li:first-child{
    border-left:1px solid #ccc;
}
.tabs--primary {
    margin-top:20px;
    margin-bottom:20px;
}
.oswald{
    font-family: var(--oswald);
}
.stencil{
    font-family: var(--stencil);
}
.font18{
    font-size: 18px;
}
.font22{
    font-size: 22px;
}
.lien a{
    font-size: 18px;
    color: var(--vert);
    
}

.lien:before{
    content:'\25B7';
    display: inline-block;
    margin-right: 10px;
    color: var(--vert);
    font-size: 20px;
}

.blazy .media--blazy img.media__element {
	margin: auto;
}

/*----------------------editeur-----------------------*/

.marron{
    color:var(--marron);
}
.marronfonce{
    color:var(--marronfonce);
}
.jaune{
    color:var(--jaune);
}
.vert{
    color:var(--vert);
}
h3, h4, .h3, .h4{
    font-family:var(--oswald);
    font-weight: 400;
}
.editeur ul{
    list-style:disc;
    list-style-position:outside;
}
.editeur li{
    margin-bottom: 4px;
}
.editeur a{
  color: var(--marron);
}
 .editeur a:hover{
    color: var(--jaune);
}

/*----------------------entete-----------------------*/


.slogan{
	font-family:var(--stencil);
	font-size:48px;
	color:var(--marron);
}
.pieces{
	font-family:var(--oswald);
	text-transform:uppercase;
	font-size:20px;
	color:var(--jaune);
}
.tel_entete{
	background:var(--marron);
	display:flex;
	align-self: stretch;
	align-items:center;
}

.tel_entete a{
	font-family: var(--oswald);
	font-size:18px;
	color:#fff;
}
.tel_entete:hover a{
	color:var(--jaune);
}
.tel_entete img{
	margin-right:8px;
}
.tel_entete:hover img{
	filter: invert(13%) sepia(94%) saturate(381%) hue-rotate(316deg) brightness(100%) contrast(99%);
}
.panier{
	background:var(--jaune);
	align-self: stretch;
}
.panier a{
	display:flex;
	flex-direction:column;
	flex-wrap: wrap;
	align-items:center;
	color:var(--marron);
}


.panier:hover a{
	color:#fff;
}
.panier:hover img{
	filter: grayscale(100%) brightness(300%);
}
.panier p{
	margin-top:3px;
	margin-bottom:0;
}
.panier img{
	margin-top:8px;
	position:relative;
}
.nombre{
	background:var(--marron);
	color:var(--jaune);
	border-radius:100%;
	height:25px;
	width:25px;
	display:flex;
	justify-content:center;
	align-items:center;
	position: absolute;
  	top: 26%;
	left: 63%;
  	transform: translate(-50%, -50%);
}
/*.contenu-slider{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	text-align:center;
}*/
h1.titre-slider, .pieces-slider{
	color:#fff;
	text-shadow: 2px 2px 3px rgba(30, 30, 30, 0.8);
	font-weight:700;
}
h1.titre-slider{
	font-family: var(--stencil);
	font-size: calc(2.2rem + 1.5vw);
	margin-bottom:0;
        text-align: center;
}
.pieces-slider{
	font-size:24px;
	font-family: var(--oswald);
}

/*.encart-promo{
	width:560px;
	max-width:90%;
	background:rgba(118, 81, 61, 0.8);
	margin:auto;
	padding:40px 30px 20px;
}*/
.titre-promo{
	font-family: var(--stencil);
	color:var(--jaune);
	font-size:60px;
}
.texte-promo{
	color:#fff;
	font-size:15px;
}
h2.lien-slider{
    font-size: calc(1.8rem + 0.5vw);
}
.lien-slider a,
.lien-promo{
	border:2px solid #fff;
	color:#fff;
	text-align:center;
	padding:10px;
	margin-top:10px;
	display:inline-block;
        background:var(--marronfonce);
        font-family: var(--oswald);
}
.lien-slider a:hover,
.lien-promo:hover{
	border:2px solid #fff;
	color:#fff;
	background:var(--vert);
}
.entete-page{
	height:338px;
	display:flex;
	align-items: center;
	justify-content: center;
        position: relative;
}

.slogan-bandeau{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	text-align:center;
}



/*-----------------------recherche-------------------*/
.formulaire{	
    width:100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.bordure-radius, .bordure-radius-detail{
    padding:20px 10px 10px;
    border-radius:6px;
    position:relative;
}
.bordure-radius-detail{
    padding:20px 20px 10px;
}

.recherche-libre{
    align-items:center;
    width:100%;
}
.recherche-libre label, .bordure-radius h2, .bordure-radius-detail h2{
    font-family:var(--oswald);
    color:var(--marronfonce);
    font-size:22px;
    text-transform:uppercase;
}
.recherche-libre input[type="text"]{
    border-radius:6px;
    border:1px solid #A5A5A5;
    width:100%;
    height:56px;
}
.recherche-libre label:after{
    content:'';
    display:inline-block;
    width:120px;
    height:2px;
    background:var(--marron);
    position:relative;
    top: -5px;
    margin-left:10px;
}
.recherche-libre input[type="submit"]{
    color:#fff;
    font-size:16px;
    border:2px solid var(--marron);
    background:var(--marron);
    text-align:center;
    height:54px;
    padding-left:50px;
    padding-right:50px;
}
.recherche-libre input[type="submit"]:hover{
    color:var(--marron);
    border:2px solid var(--marron);
    background:var(--jaune);
}

.bordure-radius h2,
.bordure-radius-detail h2{
    font-weight:400;
    background:#fff;
    display:inline-block;
    z-index:100;
    position: relative;
    padding-right:30px;
    z-index:10;
}

.trait{
    width:100%;
    height:2px;
    background: var(--marron);
    position: relative;
    margin-bottom:0;
    top: -20px;
    z-index: 1;
}
input.bt-savoir{
    background: transparent;
}
.bt-categorie, .bt-savoir, .bt-modif{
    color:var(--marron);
    padding:10px;
    border:2px solid var(--marron);
    margin:10px 0;
    font-size:16px;
}
.bt-categorie{
    min-height:60px;
    align-items:center;
    margin-bottom:0;
    display:flex;
    justify-content:center;
}
a:hover .bt-categorie,
.bt-detail:hover,
.bt-savoir:hover,
.bt-modif:hover{
	color:#fff;
	background:var(--marron);
}

.bt-modif{
    margin-top: 20px;
    display:inline-block;
}

.bt-vehicule p{
    margin-top: 10px;
}

.bt-vehicule a{
	color:var(--jaune);
        font-family: var(--oswald);
	font-size: 30px;
	text-transform: uppercase;
}
.bt-vehicule a:hover {
	color:var(--marron);
}

.bt-paiement{
    color:var(--marron);
    background: var(--jaune);
    font-size: 20px;
    border: 2px solid var(--marron);
    text-align: center;
    min-height: 50px;
    padding:10px;
    min-width: 206px;
    display: inline-block;
}
.bt-paiement:hover{
    color: #fff;
    background: var(--marron);
}
/*-----------------------produit vedette promo-------------------*/
.fond-vedette{
	background:url(../images/fond-vedette.jpg) no-repeat;
	background-size: contain;
	padding-top:40px;
	text-align:right;
}
.fond-promo{
	background:url(../images/fond-promo.jpg) no-repeat;
	background-size:  contain;
	padding-top:40px;
}
.titre-bloc-vedette, .titre-bloc-promo{
	font-family:var(--oswald);
	color:#fff;
	font-size:36px;
	text-transform:uppercase;
	margin-right:120px;
	margin-bottom:150px;
}
.titre-bloc-vedette a, .titre-bloc-promo a{
    color:#fff;
    border: 2px solid transparent;
    padding: 2px 10px;
}
.titre-bloc-vedette a:hover, .titre-bloc-promo a:hover{
    border: 2px solid #fff;
}
.titre-bloc-promo{
	margin-right:auto;
	margin-left:120px;
}
.nom-produit, .prix, .prix-detail{
    font-family: var(--oswald);
    font-size:20px;
    text-transform:uppercase;
    color:var(--marron);
}
.nom-produit{
    min-height: 72px;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}


.promotion_remise, 
.promotion_remise_tooltip {
    font-size: 16px;
    text-decoration:line-through;
    margin-left: 10px;
}
.promotion_remise_tooltip {
    font-size: 12px;
}

.bt-ajouter{
    background:var(--marron);
    color:#fff;
    border:2px solid var(--marron);
    white-space: break-spaces;
    padding:10px 5px;
}

.prix, .prix-detail{
    color:var(--marron);
    margin-top:10px;
    margin-bottom: 10px;
}
.prix-detail{
    font-size:26px;
    width:100%;
}
.prix-detail .prix_definitif,
.prix .prix_definitif{
    color: var(--vert);
}

.bt-detail{
	color:var(--marron);
	border:2px solid var(--marron);
	padding:10px 0;
}
.bt-detail, .bt-ajouter{
	height:100%;
	width:100%;
	display:flex;
	justify-content:center;
	align-items:center;
}
.bt-ajouter:hover{
	background: #fff;
	color: var(--marron);
}
.flexslider{
    border:none;
}


.estompe {
    opacity: 0.2;
}
.bt-grise{
    border: 2px solid var(--marronclair);
    padding: 12px;
    text-align: center;
    background: var(--marronclair);
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
    display: inline-block;
}
.avertissement{
    font-size: 18px;
}
/*-----------------------categories-------------------*/
.ariane{
	display:flex;
	flex-wrap: wrap;
}
.ariane-accueil, .ariane-select, .ariane-select2{
	padding:0 7px;
	border-right: 2px solid var(--jaune);
	text-transform: uppercase;
	font-family: var(--oswald);
	color: var(--marron);
	height:40px;
	display:flex;
}
.ariane-select2{
	border-right: 2px solid var(--marron);
	color:var(--jaune);
}
.ariane-accueil a{
	margin-bottom:0;
	align-self:center;
	color: var(--marron);
}
.ariane-accueil a:hover{
	color: var(--jaune);
}
.ariane-accueil:before{
	content:'';
	display:inline-block;
	height:20px;
	width:20px;
	background: var(--jaune);
	margin-right:8px;
	position:relative;
	top:9px;
}


.bouton-appliquer, .bouton-reinitialiser{
    background: var(--marronfonce); 
    height: 40px;
    padding:10px 9px;
    text-align: center;
    margin-left: 30px;
}
.bouton-appliquer a, .bouton-reinitialiser a{
    background: var(--marronfonce);
    color: #fff; 
    font-family: var(--oswald);
    text-transform: uppercase;
}

.renvoi{
    width:100%;
    height: 1px;
    margin-bottom: 10px;
    display: none;
}

.liste-lien {
    padding:0 5px;
    text-transform: uppercase;
    font-family: var(--oswald);
    color: var(--marron);
    height:40px;
    display:flex;
}
.liste-lien + .liste-lien {
	border-left: 2px solid var(--jaune);
}

.liste-lien a, .liste-lien span{
	margin-bottom:0;
	align-self:center;
	color: var(--marron);
}
.liste-lien a:hover{
	color: var(--jaune);
}
.liste-lien:before{
	content:'';
	display:inline-block;
	margin-right:3px;
	position:relative;
	top:9px;
}



.select-wrapper{
	display: flex;
	flex-direction:column;
	position:relative;
	width:28px;
	line-height: 2.9;
}

.select-wrapper select{
	border:none;
	background: var(--jaunepaille);
	text-transform: uppercase;
	font-family: var(--oswald);
	color: var(--marron);
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	outline: 0;
	box-shadow: none;
	margin: 0;
	cursor: pointer;
}


.select-wrapper::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 6px;
  bottom: 0;
  padding: 0 15px 0 0;
  background: url(../img/fleche-bas-fil-ariane.png) no-repeat right center;
  background-color: var(--jaunepaille);
  height:40px;
  display:inline-block;
  pointer-events: none;
}


.select-wrapper2{
    display: flex;
    flex-direction:column;
    position:relative;
    line-height: 2.9;
    min-width: 140px;
}


.select-wrapper2 select{
    border:none;
    background: var(--jaunepaille);
    text-transform: uppercase;
    font-family: var(--oswald);
    color: var(--marron);
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    outline: 0;
    box-shadow: none;
    margin: 0;
    cursor: pointer;
    height: 40px;
}

.select-wrapper2::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 6px;
  bottom: 0;
  padding: 0 15px 0 0;
  background: url(../img/fleche-bas.png) no-repeat right center;
  background-color: var(--jaunepaille);
  height:38px;
  display:inline-block;
  pointer-events: none;
}



.bt-filtrer{
    height:40px;
    background:var(--marronfonce);
    border:2px solid var(--marronfonce);
    width: 100%;
    padding:10px;
    color:#fff;
    font-size:18px;
    text-align:center;
    white-space: nowrap;
    font-family:var(--oswald);
}
.bt-filtrer:hover{
    background:var(--jaune);
    color:var(--marron);
    cursor:pointer;
}
h1.titre-categorie, h2.titre-categorie{
    font-weight:400;
    background:var(--jaunepaille);
    display:inline-block;
    position: relative;
    padding-right:30px;
    z-index:10;
    color:var(--jaunetexte);
    font-family:var(--oswald);
    font-size:32px;
    text-transform:uppercase;
}
h2.titre-categorie{
    color:var(--marronfonce);
    font-size:28px;
}
.feed-icon{
    display: none;
}
/*-----------------------page detail produit------------------*/
.fiche-produit{
	display:flex;
	align-content:space-between;;
	flex-wrap:wrap;
	height:100%;
	padding:20px 20px 15px;
}
.fiche-produit form{
	width:100%;
}
.bordure-haut-bas{
	border-top: 2px solid var(--marron);
	border-bottom: 2px solid var(--marron);
	padding: 15px 0 5px;
        width: 100%;
}
input[type="number"]{
	height:100%;
	width:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	border:1px solid var(--marron);
	padding:0 10px;
	font-size:16px;
}
.slick-arrow:before {
    color: var(--jaune);
}
.slick-arrow:hover::before { 
    color: var(--marronfonce);
}

.produit .nav-tabs {
	border-bottom: 2px solid var(--marron);
	padding-bottom:30px;
}
#liste_onglets{
	display:flex;
}
#liste_onglets li{
	width: 15%;
	display:flex;
        margin:0 0.8%;
}


#liste_onglets a{
	color:var(--marronclair);
	text-transform:uppercase;
	font-family:var(--oswald);
	font-size:18px;
	border:2px solid var(--marronclair);
	padding:10px;
	width: 100%;
        text-align:center;
}
#liste_onglets a.active, #liste_onglets a:hover{
	color:var(--marron);
	border:2px solid var(--marron);
}

.bt-fichier{
    color:var(--marron);
    font-size: 20px;
    font-family: var(--oswald);
    display: inline-block;
    padding-left: 30px;
    background: url(../img/icone_telecharger.png) no-repeat;
}

.bt-fichier:hover{
    color:var(--jaune);
    background: url(../img/icone_telecharger_hover.png) no-repeat;
}

.image-detail-produit a {
   cursor: zoom-in;  
}

.btn-tooltip{
    background: var(--marronfonce);
    font-size: 20px;
    font-family: var(--oswald);
    color: #fff;
    border: none;
    border-radius: 100%;
    height: 26px;
    width: 26px;
    text-align: center;
    margin-left: 5px;
}
.tooltip-inner {
  color: var(--marronfonce);
  background-color: var(--jaune);
}
.bs-tooltip-end .tooltip-arrow::before, 
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
  border-right-color: var(--jaune);
}


.detail-quantity {
    width: 120px;
}

.nice-select {
    line-height: 37px !important;
}
.nice-select .current {
    background-position-y: 10px	!important;
}
/*-----------------------formulaires----------------------------*/
.captcha{
    margin: 10px auto;
}
input::placeholder,
textarea::placeholder{
    font-size: 16px;
    color: #444;
}

.formulaire input[type="text"],
.formulaire input[type="email"],
.formulaire input[type="tel"],
.formulaire input[type="password"],
.formulaire textarea,
.fieldset-wrapper select{
    width:98%;
    border:2px solid var(--marron);
    padding: 10px 8px;
    font-size: 16px;
    color: #000;
}
.fieldset-wrapper select{
    border-radius: 0;
}
.fieldset-wrapper .form-select:focus {
    border-color: var(--marron);
    outline: 0;
    box-shadow:none;
}

.formulaire .societe input[type="text"],
.formulaire textarea{
     width:99%;
}
.password-strength{
    width:98%; 
}
.password-strength__meter {
    height: 0.75em;
    margin-top: 0.6em;
    margin-bottom: 0.6em;
    background-color: var(--jaune);
}
.password-strength__indicator {
    background-color: var(--marron);
}
.password-suggestions {
    background: var(--jaune);
    padding: 10px 10px 3px;    
}
.password-suggestions ul{
    list-style: disc;
    margin-top:3px;
}
.formulaire input[type="text"],
.formulaire input[type="tel"]{
    text-transform: uppercase;
}


#user-login-form input[type="text"],
#edit-client-mot-de-passe{
    text-transform:none;
}

#form-client-sidentifier #edit-client-mot-de-passe {
    text-transform:none;
}

#form-client-crea-compte #edit-client-mot-de-passe-pass1, #form-client-crea-compte #edit-client-mot-de-passe-pass2 {
    text-transform:none;
}

.formulaire input[type="submit"], .formulaire input[type="button"]{
    border:2px solid var(--marron);
    min-width:140px;
    padding:12px;
    margin:auto;
    text-align:center;
    background:var(--marron);
    color:#fff;
    font-size: 16px;
}
.formulaire input[type="submit"]:hover, .formulaire input[type="button"]:hover{
    background-color:  var(--jaune);
    color: var(--marron);
}
.adresse-formulaire a{
    color:var(--marron);
}
.adresse-formulaire a:hover{
    color:var(--marronfonce);
}
.form-item-adresse-identique {
    position:relative;
}
#edit-adresse-identique{
    position:absolute;
    top:10px;
    left:0;
}
label[for="edit-adresse-identique"]{
    position:relative;
    top:-1px;
    left:20px;
}

.logo-paiement{
    margin: 20px 0;
}
.logo-paiement img{
    border: 1px solid var(--marron);
}
.logo-paiement img.inactive{
    filter:opacity(40%);
}

/*-----------------------compte client-------------------*/

.form-client-sidentifier input{
    margin:10px 0;
}
.formulaire legend, .formulaire label{
    margin-top: 10px;
    margin-bottom: 5px;
}

.le-message-error, .le-message-status{
    font-size: 20px;
    color : #fff;
    background: #E50614;
    padding:8px 0;
    
}
.le-message-status{
    background: var(--vert);
}
.formulaire .description, .password-confirm-message, .password-strength__title{
    margin: 8px 0 12px;
    font-style: italic;
    color:var(--marron);
}
.le-message-error a{
    color:var(--jaune);
}
/*-----------------------footer-------------------*/
footer{
    background:var(--marron);
    padding-top:30px;
}
.menu-footer {
    display: block;
    margin: 20px auto 15px;
}
.menu-footer li{
    display:inline-block;
    padding: 0 10px;
    border-right:1px solid #fff;
    margin-bottom:10px;
}
.menu-footer li:last-child{
    border-right:none;
}
.menu-footer a{
    font-size:16px;
    color:#fff;
}
.menu-footer a:hover{
    color:var(--jaune);
}
.adresse{
    margin-bottom:30px;
}
.adresse .h4, .adresse .h5{
    color:var(--jaune);
    font-family: var(--stencil);
    font-size:36px;
    margin-bottom:0;
}
.adresse .h5{
    font-size:24px;
    margin-bottom:20px;
}
.adresse p{
    color:#fff;
    margin-bottom:0;
    font-size:16px;
}
footer a{
    color:#fff;
}
footer a:hover{
    color:var(--jaune);
}
.paiement{
    text-align:center;
}
.paiement img {
    width: 90px;
    height: auto;
    max-width: 100%;
    margin-left: 2px;
    margin-right: 2px;
}
.nom-contact{
    font-size:20px;
}
.lien-mentions{
    padding: 15px 0 0;
}
.lien-mentions li{
    display: inline-block;
    margin-bottom: 8px;
}
.lien-mentions li:after{
    content:' - ';   
}
.lien-mentions li:last-child:after{
    content:'';   
}
.lien-mentions li a{
    color: var(--marronfonce);
}
.lien-mentions li a:hover{
    color: #fff;
}

/*-----------------------responsive-------------------*/
@media (max-width: 1399px) {

	/*-----------------------entete 1399-------------------*/
	.entete-page{
            height:300px;
	}
	.slogan {
            font-size: 40px;
	}
	.fiche-produit {
            padding: 10px 10px 15px;
	}

       .paiement img {
            width: 77px;
        }
        
        .ombre.img-resp img{
            max-height: 160px;
        }

}




@media (max-width: 1199px) {

	/*-----------------------entete 1199-------------------*/
	.entete-page{
		height:280px;
	}
	.slogan {
		font-size: 32px;
	}

	.nombre{
		left: 60%;
	}
	/*-----------------------recherche 1199-------------------*/

	.recherche-libre label:after{
		display:none;
	}
	.fiche-produit {
		padding: 0px 0 15px;
	}
        .renvoi{
            display: block;
        }
        .bouton-appliquer{
            margin-left: 0;   
        }
	/*-----------------------slider 1199------------------*/

	/*.contenu-slider{
		top:40%;
	}*/


	/*-----------------------page d'accueil 1199-------------------*/
	.fond-vedette{
		text-align:left;
	}
	.titre-bloc-vedette, .titre-bloc-promo{
		font-size:36px;
		margin-right:auto;
		margin-bottom:100px;
		margin-left:20px;
	}
        
        .ombre.img-resp img{
            max-height: 190px;
        }
	/*-----------------------page detail produit 1199-------------------*/

        #liste_onglets li{
		width: 30%;
		margin-bottom:10px;
                margin:0 1.5% 10px;
	}
	#liste_onglets a{
		padding:10px 0;
	}
	/*-----------------------footer 1199-------------------*/
	.menu-footer li{
            padding: 0 5px;
        }
       .adresse, .tel-contact{
		text-align:center;
	}


}



@media (max-width: 991px) {

	/*-----------------------entete 991-------------------*/
	.entete-page{
		height:240px;
	}
	.nombre{
		left: 58%;
	}
	/*-----------------------categories 991-------------------*/
	.ariane-accueil, liste-lien{
		width:80px;
	}

        /*-----------------------formulaire 991-------------------*/

        .formulaire input[type="text"],
        .formulaire input[type="email"],
        .formulaire input[type="tel"],
        .formulaire input[type="password"],
        .formulaire textarea,
        .fieldset-wrapper select,
        .formulaire .societe input[type="text"],
        .password-strength{
            width:100%;
        }

	/*-----------------------footer 991-------------------*/
        .menu-footer li{
            padding: 0 10px;
        }
	.menu-footer li:nth-child(3){
		border-right:none;
	}
	.menu-footer li:nth-child(5){
		border-right:1px solid #fff;
	}
	
        /*-----------------page detail produit 991-----------*/
	
	.fiche-produit {
		padding: 20px 0 15px;
	}
        
        .ombre.img-resp img{
            max-height: 210px;
        }



}

@media (max-width: 767px) {
	/*-----------------------entete 767-------------------*/
	.entete-page{
		height:200px;
	}
	/*-----------------------recherche 767-------------------*/
	.recherche-libre {
		display: inline-block;
	}
	.recherche-libre label:after{
		display:inherit;
		width: 140px;
	}
        
        /*-----------------------page detail produit 767-----------*/
	#liste_onglets li{
		width: 48%;
                margin:0 1% 10px;
	}
	#liste_onglets a{
		padding:10px 0;
		text-align:center;
	}
        .ombre.img-resp img{
            max-height: 150px;
        }

	/*-----------------------slider 767-------------------*/

	/*.contenu-slider{
		top:35%;
	}*/

	/*-----------------------page d'accueil 767-------------------*/

	.titre-bloc-vedette, .titre-bloc-promo{
		font-size:32px;
		margin-bottom:60px;
	}

	/*-----------------------footer 767-------------------*/
        .menu-footer li:nth-child(3){
		border-right:1px solid #fff;
	}
	.menu-footer li:nth-child(2),
	.menu-footer li:nth-child(4){
		border-right:none;
	}
	.lien-mentions li:nth-child(2):after{
            content:'';   
        }

}



@media (max-width: 575px) {

	/*-----------------------entete 575-------------------*/
	.mail_entete, .tel_entete, .slogan{
		padding: 10px 5px;
	}
	 .panier{
		padding: 5px;
	}
	.nombre{
		left: 55%;
	}
	.entete-page{
		height:180px;
	}
	/*-----------------------slider 575-------------------*/
	/*.contenu-slider{
		top:40%;
	}*/
        h1.titre-slider{
            white-space: normal;
        }
	/*-----------------------recherche 575-------------------*/
	.recherche-libre label:after{
            display:none;
	}
	#liste_onglets a{
            font-size:16px;

	}
        h1.titre-categorie{
            font-size: 28px
        }
        h2.titre-categorie{
            font-size: 24px;
        }
	/*-----------------------page d'accueil 575-------------------*/
	.titre-bloc-vedette, .titre-bloc-promo{
		margin-bottom:20px;
                font-size: 28px;
	}
        .ombre.img-resp img{
            max-height:none;
        }

	/*-----------------------footer 575-------------------*/
	.menu-footer li,
	.menu-footer li:nth-child(3),
        .menu-footer li:nth-child(5){
		display:block;
		border-right:none;
	}
        .tel-contact{
            text-align: center;
        }
        .lien-mentions li{
            display: block;
            margin-bottom: 8px;
        }
        .lien-mentions li:after{
            content:'';   
        }
}

@media (max-width: 360px) {

	.entete-page{
		height:150px;
	}
	.nombre{
		left: 57%;
	}
	/*-----------------------slider 360-------------------*/
	/*.contenu-slider{
		top:35%;
	}*/
	/*-----------------------page d'accueil 360-------------------*/
	.titre-bloc-vedette, .titre-bloc-promo{
		margin-bottom:10px;
                font-size: 26px;
	}

	/*-----------------------categories 360-------------------*/
	/*.ariane{
		display:block;
	}*/
	.ariane-accueil, liste-lien,
	.select-wrapper{
		display: flex;
	}


        #liste_onglets li{
		width: 100%;
	}
        .bouton-appliquer, .bouton-reinitialiser{
            margin-left: auto; 
            margin-right: auto;
        }

}


/*------------------------ scroll up-----------------------------*/

#scroll-up {
    position: fixed;
    z-index: 8000;
    bottom: 20px;
    right: 15px;
    display: none;
    width: 52px;
    height: 52px;
    font-size: 18px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    background-color: var(--jaunepaille);
    color:#fff;
    border-radius: 100%;
    cursor: pointer;
    border:2px solid var(--marron);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    color: var(--marron);
}



#scroll-up:after{
    content:'\25B2';
    font-size: 25px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    transition:all 0.5s;
}

#scroll-up:hover {
    background-color: var(--marronfonce);
    color: var(--jaunepaille);
}



/* color box */
#cboxSlideshow {visibility: hidden}





/* page contenu du panier panier */



/* tableau panier */

.table-panier {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.table-panier thead,
.table-panier tfoot {
    background-color: var(--marron);
    color: #fff;
}

.table-panier tbody {
    background-color: #fff;
}

.table-panier caption {
    padding: 10px;
    caption-side: bottom;
}

.table-panier table {
    border-collapse: collapse;
    border: 2px solid rgb(200, 200, 200);
    letter-spacing: 1px;
    font-family: sans-serif;
    font-size: .8rem;
    
}

.table-panier td,
.table-panier th {
    border: 1px solid rgb(190, 190, 190);
    padding: 6px 10px;
}

.table-panier th.centrer, 
.table-panier td.centrer {
    text-align: center;
}

.table-panier td.adroite {
    text-align: right;
}
.table-panier td.agauche {
    text-align: left;
}


.table-panier td img {
   width: 100px;
   max-width: 100%
}

.table-panier tr th.totaux-libelle  {
    text-align: right;
    vertical-align: top;
}

.table-panier tr th.totaux-libelle .reduit,
.table-panier tr td.totaux-libelle .reduit{
    text-align: right;
    vertical-align: top;
    font-size: 11px;
}


.table-panier tr th.totaux-montant  {
    text-align: right;
    vertical-align: top;
}

.table-panier tr th.totaux-montant .reduit  {
    text-align: right;
    vertical-align: top;
    font-size: 11px;
}

.table-panier .les-tvas {
    font-weight: normal;
    font-size: 11px;
}
.panier-vide{
    margin-top: 30px;
    text-align: center;
    font-size: 22px;
}

#prix_non_prix_en_charge {
    margin-top: 20px;
    font-weight: normal;
    color: #8b0000;
    text-align: center;
}

/*------------------------ user login-----------------------------*/
#user-login-form label{
    display: block;
}
#user-login-form input{
    margin:10px 0 15px;
}

/*----------------------pager----------------------*/
.pager a{
    border: 1px solid var(--marron);
    padding: 2px;
    width: 22px;
    margin: 10px 4px;
    display: inline-block;
    color: var(--marron);
    font-family: var(--oswald);
    font-size: 16px;
    text-align: center;
}
.pager a.actif{
    background: var(--marronfonce);
    color:#fff;
}

.pager a:hover{
    background: var(--jaune);
    color:var(--marronfonce);
}