body, html {height: 100%;}
body {
background: url("../img/bg.jpg") #0f0f14;
font-size: 10pt;
font-family: sans-serif;
margin: 0;
color: #efefef;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

@media print {
  .noPrint {
      display:none;
  }
}
@media screen {
   .onlyPrint {
       display: none;
   }
}

.row, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {width: 100%;}
  

@media (min-width: 600px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
  }


.row::after {
  content: "";
  clear: both;
  display: table;
}

#title404 {font-size: 5em;}
#explication404{margin: 1.5%;}
#liens404 a {margin-right: 5%; /*text-decoration: underline;*/}
#liens404 {margin-top: 30px;}

.left {text-align: left;}
a,a:link,a:visited,a:active {text-decoration: none; color: #92bef3; cursor: pointer;}
a:hover {color: #9ecbff;}
.clear { clear: both; }
img { border: none; } .img40 {width: 40px; border: 1px solid #bbb;}
li {list-style-type: none;}

.rect-img-container {
  position: relative;
}

.rect-img-container::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.rect-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.square {
	margin: 10px; 
        width: 300px;
        height: 300px;
		text-align: center;
      }

h1, h2, h3, h4, h5, h6 {font-weight: normal;}
h1 {
/*background: #2e3438; color: #fefefe; text-transform: uppercase; 
font-size: 1.6em; font-weight: normal; margin: 0 0 40px 0 ; padding: 20px; border-bottom: 1px solid #ccc; */}

h2{margin: 20px ;  font-weight: normal; text-transform: uppercase;}
h2 li {list-style-type: square;} 
h3 { margin-top: 2em; font-size: 1.3em;}
h5 {margin: 5px 0 0 0; padding: 0; font-size: 1em; font-weight: bold;}

p, div {text-align: justify;}

.pied {	width: 1048px; margin : -10px auto 10px auto; padding: 0; font-size: 0.85em; text-align: center;}
.entete  {width: 1048px; margin : 0 auto -10px auto; padding: 0; font-size: 0.85em; text-align: right;}
.pied ul li, .entete ul li {display: inline-block;} .pied ul li a, .entete ul li a{margin : 0 20px 0 0;}


.erreur {color: #f75252; } .petit {font-size: 0.9em;} .annotation{font-size: 0.85em; color: #ccc;}
.ariane {font-size: 0.95em; margin: 0 0 1% 0;}
.ariane ul li, .ariane ul li {display: inline-block;} .ariane ul li a {margin : 0 20px 0 0;}
.liste-sc li {display: block;} .liste-sc li a{margin: 0;}

.centrer {text-align: center; margin: 0 auto 0 auto;}
.droite {float: right; margin-right: 5%;}
.moitie {float: left; position: relative; width: 40%;}
.encart  {background: #2e3438; padding: 7.5px; margin: 10px; width: 25%; float: left; position: relative; border: 1px solid #000;}
.encart h2{margin: 0 0 15px 0 ; background: #666;  padding: 10px;}
.encart ul li {padding: 0 0 0 5px; list-style-type: none;}

.tdb_encart  {background: #2e3438; padding: 2px 15px 7px 15px; border-left: 5px solid #0f0f14; border-bottom: 5px solid #0f0f14; font-size: 1.2em; text-align: left; min-height: 200px;}
.tdb_raye {background-image: repeating-linear-gradient(
  45deg,
  #2e3438,
  #2e3438 5px,
  #252525 5px,
  #252525 10px
  );
}

.pair {background-color: #252525;}
.impair {background-color: #2e3438;}

.etiquette {border-radius: 5px; padding: 3px 6px; color: #fefefe;}
.etiquette_rouge {background: #d00732;}
.etiquette_vert {background: /*#9dd53a;*/#0acf66;}
.etiquette_violet {background: /*#9dd53a;*/#a61697;}
.tdb_encart {border-collapse: separate; border-spacing: 4px;} 
.tdb_encart td {
padding: 4px; vertical-align: middle; 
border: 1px solid #333; padding: 15px; text-align: center;}

/*design d'un tableau */

.tableau {
width: 100%; 
padding: 1.2em;
margin-top: 2em;
border-spacing : 0px;
border-collapse : collapse;
 border-spacing: 4px;
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.tableau td {
vertical-align: middle; 
border: 1px solid #333; 
padding: 20px 15px; 
text-align: center;
font-size: 1.2em;
}

.tableau thead, .tableau thead tr td, .tableau_important {font-size: 1.2em; font-weight: 600; background: #3a3a3a; color: #999; border: 1px solid #666; }

 
/*.tableaucadre .tableau_c1 {background: #3a3a3a; color: #999;}

.tableau th td {font-size: 1.2em; font-weight: 600;}*/


.bloc-gauche{background: #202121; border-right: 5px solid #0f0f14; width: 100%;}
.bloc-droite{background: #2e3438; border-left: 5px solid #0f0f14; width: 100%;}

form {display: block;}
input, textarea, select, option  {padding: 10px; margin: 0 0 20px 0; } 
.input_neutre {background: none; padding: 0; margin: 0; color: #c4c4c4; border:0;outline:0;}
.input_ok {
margin: 10px 0 0 0; 
font-weight: bold;
padding: 10px;
border: 1px solid green; 
background: #9dd53a; /* Old browsers */
background: -moz-linear-gradient(top,  #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
background: linear-gradient(to bottom,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */
}
.input_ok_attente {
margin: 10px 0 0 0; 
font-weight: bold;
padding: 10px;
border: 1px solid grey; 
background: #f2f5f6; /* Old browsers */
background: -moz-linear-gradient(top,  #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); /* IE6-9 */

}
.input_ok_attente a {color: #666; font-weight: bold; text-decoration: none;}
.input_non {
margin: 10px 0 0 0; 
color: #000;
display: inline-block;
padding: 8px;
font-weight: bold;
border: 1px solid red; 
background: #f85032; /* Old browsers */
background: -moz-linear-gradient(top,  #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); /* IE6-9 */

}
.input_ok a, .input_non a {color: #000; font-weight: bold; text-decoration: none;}
#formulaire-contact input, .formulaire-creation input, #formulaire-contact select, .formulaire-creation select, 
.formulaire-creation option, #formulaire-contact textarea, .formulaire-creation textarea {width: 200px; color: #000;}
#formulaire-contact textarea, .formulaire-creation textarea {height: 100px;} #formulaire-contact .input_ok, .formulaire-creation .input_ok{width: auto;}
.checkbox , #formulaire-contact .checkbox, .formulaire-creation .checkbox{width: 20px; padding: 0; vertical-align: text-bottom;}

			.ontop {
				z-index: 999;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
				position: absolute;				
         		opacity: 1;
				filter: alpha(opacity = 100);
			}
		
/*		#popup {
			width: 300px; 
			height: 300px;
			    padding: 10px; 
box-shadow:2px 4px 4px 4px #C9C9C9;
-webkit-box-shadow:2px 4px 4px 4x #C9C9C9;
-moz-box-shadow:2px 4px 4px 4px #C9C9C9;
				position: absolute;
				color: #000000;
				background-color: #ffffff;
				top: 50%;
				left: 50%;
				margin-top: -100px;
				margin-left: -150px;
				*/
			}
/*#popup .inputtext {width: 95%} #popup #close {text-align: right; color: darkred; text-decoration: none;}*/


/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 100%;
  background-color: #fff;
  color: #000;
  /*border: 4px solid #0ACF66;*/
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 0;
  margin-left: -0px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

/*page login*/
.login-bloc {padding: 5%; width: 85%; margin: 20% auto 5% auto; background: #2e3438;}
.login-bloc h4 {padding: 0 0 10px 0; border-bottom : 1px solid #bdbdbd; }
.login-bloc .tableau, .login-bloc .tableau .td-input{width: 100%;} .login-bloc .tableau  td{text-align: left; vertical-align: top; }
.login-bloc .tableau .td-input input {width: 88%;}

/*carrousel*/
.simpleBlack {
    background: #2e3438;
    width: 80ex;
    margin: 0 auto;
    font-family: sans-serif;
}
dl {
    margin-left: 4ex;
}

    dl dt {
        font-size: 0.9em;
        font-weight: bold;
        color: #eee;
        font-family: monospace;
    }
        dl dd {
            margin-bottom: 1.5em;
            color: #ccc;
            font-size: 0.85em;
            line-height: 1.5em;
        }


ol {
}
    ol li {
        margin-bottom: 1em;
        line-height: 150%;
    }

ul {
}
    ul li {
        margin-bottom: 0;
    }
/* ------------------------------------------------------------------------- */

#title {
    margin: 0px auto;
}

#sponsor {
    position: absolute;
    right: 7%;
    font-size: 10px;
    height: 66px;
    line-height: 66px;
    padding: 0 20px;
}

div.maincontent {
	width: 1048px;
	height: 100%;
    margin: 20px auto 20px auto;
	padding: 20px;
background: /* url('../img/bg.gif') no-repeat*/ #0f0f14;
			-moz-box-shadow: 0 0 10px #666;
			-webkit-box-shadow: 0 0 10px #666;
			box-shadow: 0 0 10px #666;
display: table;
}

#menu {
    display: block;
    text-align: center;
    background: #222;
    padding: 1em;
    margin: 2em auto 4em auto;
}

    #menu li {
        display: inline;
        padding: 0px 20px;
    }

.totop {
    text-align: center;
    margin: 4em 10%;
    padding: 0.25em;
    background: #161616;
}
    .totop a {
        margin-right: 7%;
        color: silver;
    }


.block {
    display: none;
}


#browserComp {
    border-collapse: collapse;
    margin: 40px auto;
}
    #browserComp caption {
        text-align: center;
        margin: 20px auto;
        font-size: 1.1em;
        font-weight: bold;
    }
    #browserComp th {
        font-size: 10px;
        padding: 5px 10px;
        border-bottom: 1px solid silver;
    }
        #browserComp th img {
            width: 22px;
        }
        #browserComp td {
            text-align: center;
        }
            #browserComp th.feature,
            #browserComp td.feature {
                text-align: right;
                padding: 5px;
                padding-right: 10px;
                border-right: 1px solid silver;
            }

.addon {
    border: 1px solid #222;
    padding: 20px;
    margin-bottom: 20px;
    background: #222;
}
    .addon .flowBox {
        width: 500px;
        margin-right: 40px;
        float: left;
    }
    .addon .discription {
        margin-left: 540px;
    }
        .addon .title {
                line-height: 1.3em;
        }
            .addon .title h3 {
                margin: 0;
                display: inline;
            }
            .addon .title .by {
                margin-left: 2em;
                font-size: 0.8em;
                text-decoration: none;
            }
        .addon p {
            font-size: 0.9em;
        }
        .addon .comment {
            margin-top: 2em;
            font-style: italic;
        }
        .addon .download {
            font-size: 0.8em;
            float: right;
            margin: 0 0 2em 4em;
            line-height: 1.5em;
        }
            .addon .download a {
                font-weight: normal;
            }

#info { /* for example.php */
    /*display: none;*/
}

			.ontop {
				z-index: 999;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				display: none;
				position: absolute;				
         		opacity: 1;
				filter: alpha(opacity = 100);
			}
			#popupRecherche, #popupPlan {
			width: 300px; 
			height: 300px;
			    padding: 10px; 
box-shadow:2px 2px 10px 10px #C9C9C9;
-webkit-box-shadow:2px 2px 10px 10x #C9C9C9;
-moz-box-shadow:2px 2px 10px 10px #C9C9C9;
				position: absolute;
				color: #000000;
				background-color: #ffffff;
				/* To align popup window at the center of screen*/
				top: 50%;
				left: 50%;
				margin-top: -100px;
				margin-left: -150px;
			}
#popupRecherche .inputtext,  #popupPlan .inputtext {width: 95%} .close {text-align: right; color: darkred; text-decoration: none;}
/*accueil index*/
.welcome {height:100vh; height: 100%}
.bulle-vide a {padding: 10px;}

/*voir article article cadre et défilement*/

.defilement-haut {width: 60%; overflow: auto; height: 140px; margin: 0 20% 0 20%;}
.defilement-haut-int {width: 100%; margin: 0; padding: 0;}
.defilement-bas {width: 90%; overflow: auto; height: 140px; margin: 0 20% 0 10%;}
.defilement-bas-int {width: 100%; margin: 0; padding: 0;}
.article-defilant {width: 140px; height: 140px; text-align: center; background: url("../img/bulle-vide-taille1.png") no-repeat; background-size: cover;
float: left; position: relative; }
.article-defilant img {width: 60px; margin: 20px auto 0 auto;}
.article-dispo {text-align: center; margin: 2px 0 0 0;}

.article-cadre {margin: 0 auto 0 auto; height: 100%; width: 80%;}
#article-cadre-un {float: left; position: relative; width: 22%; height: 60%; text-align: center;}
#article-cadre-deux {float: left; position: relative; width: 26%;}
#article-cadre-trois {float: left; position: relative; width: 30%;}
#article-cadre-quatre {float: left; position: relative; width: auto;}
#article-cadre-cinq {float: left; position: relative; width: auto;}
.article-recherche {height: 50%; width: 100%;} .article-plan {height: 50%; width: 100%;}
.article-nom {margin: 25% 0 0 20%; font-size: 1.2em;}
#txtPrixChoisi {height: 60px;}
.article-reference {margin: 5% 0 0 20%; font-size: 0.9em; color: #ddd;}
.article-taille{margin: 10% 0 0 15%;}
.article-qte {margin: 0 0 0 15%;}
  
		.box-link { 
		position: absolute; 
		top: -10px; 
		left: 30px; 
		width: 43px; 
		height: 42px; 
		background-color: transparent;  }
		
/*voir article*/

#nav {margin: 10px 0 0 -40px; width: auto;}
#nav li { width: 38px; float: left; margin-right: 12px; list-style: none;}
#nav a { width: 38px; padding: 2px; display: block; border: 1px solid #ccc; }
#nav li.activeSlide a { background: yellow;}
#nav a:focus { outline: none; }
#nav img { border: none; display: block}
#defilement-photos img { display: none ;}
#defilement-photos img.first, #defilement-photos img.carrousel-miniature { display: block ;}
#defilement-photos img.first {max-width: 100%; margin: auto;}

.article-resume {
text-align: center;
padding: 0; background: url("../img/bulle-vide-taille1.png") 
no-repeat; background-size: contain; 
width: 200px; height: 200px; line-height: 100px; margin: auto 2em 0 0; overflow: hidden;
display: inline-block;}
.article-resume a {color: #efefef;}
.article-resume div {text-align: center;} .article-resume img {height: 60px; margin: auto;} .article-resume h5 {text-decoration: underline;}
.article-resume-nom {margin: 10px 0 0 0;} .article-resume-prix {margin: 10px 0 0 0; font-weight: bold;} .article-resume-prix a {color: yellow;}


/*livraison*/
.livraison_1 {background: #2e3438; width: 50%; border: 1px solid #aaa;}
.livraison_2 {width: 100%;}
.livraison_3 {text-align: right; padding: 0 1% 2% 1%; margin: 0 auto 0 2%;}
.livraison_4 {padding: 0 1% 2% 1%; width: 40%;}
.livraison_5 {width: 98%; text-align: right;}
.livraison_5 a {font-size: 0.8em; margin-right: 2%;}
.livraison_6 {padding: 0.5% 1% 2% 1%; width: 70%;}

.adresse_intitule {width: 100%; text-align: left; padding: 0 0 2% 0; border-bottom: 1px solid #ccc;}
.livraison_corrigee {margin: 1% 0 0 0;}
.livraison_bouton {background: transparent; margin: 1% 0 2% 0; border: transparent; color: #fff; outline: transparent; cursor: pointer;}

.livraison_total{text-align: center; padding: 1%; width: 30%; margin: 0 auto 0 2%; background: #2e3438; border: 1px solid #aaa;}
.livraison_total_p {text-align: center;}
a.livraison_total_detail {margin-left: 1%; font-size: 0.9em; font-weight: normal;}
.livraison_total_total {font-weight: bold; font-size: 1.25em;}

/*afficher boutiques */
.OuvrirAuClic .box {
  display:grid;
  overflow:hidden;
}

.OuvrirAuClic .box h5,input[type="checkbox"] {
  grid-row:1;
  grid-column:1;
  width:100%;
  height:100%;
  cursor: pointer;
}
.OuvrirAuClic input[type="checkbox"] {
  z-index:2;
  width:300%; /*big value to create the overflow*/
}
.OuvrirAuClic input:focus {
outline: none !important;
outline-width: 0;
}

/* show/hide the text*/
.OuvrirAuClic article {
  display: none;
 
}
.OuvrirAuClic input:checked ~ article {
  display: block;
}
.OuvrirAuClic article .col-3,  .OuvrirAuClic article .col-9, .OuvrirAuClic article .col-12 {
font-size: 1.2em;
}
/**/
.OuvrirAuClic h5 {

}

/* Change label text*/
.OuvrirAuClic input + h5::after {
  color: transparent;  text-shadow: 0 0 0 /*#0acf66 #c4c4c4*/#eaeaea; font-weight: bold; margin-left: 5px; font-size:: 1.2em;
  content: ' \002B ';
}
.OuvrirAuClic input:checked + h5::after {
  color: transparent;  text-shadow: 0 0 0 #d00732; font-weight: bold; margin-left: 5px; font-size:: 1.1em;
  content: ' \292B ';
}
/**/

.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}


/*cookie consent*/
.cookie-banner {background: rgb(180,183,175); font-size: 1.2em;
background: linear-gradient(0deg, rgba(180,183,175,1) 0%, rgba(218,220,212,1) 100%); color: #000; width: 100%; padding: 15px 32px 20px 32px;}
.cookie-banner button{
box-sizing: border-box;
display: inline-block;
min-width: 65px;
padding: 11px 13px;
border-radius: 2px;
border: 1px solid green; 
background: #9dd53a; /* Old browsers */
background: -moz-linear-gradient(top,  #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* IE10+ */
background: linear-gradient(to bottom,  #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */
color: #222;
text-decoration: none;
text-align: center;
font-weight: normal;
font-size: 16px;}

.cookie-banner button:hover{filter: saturate(135%); color: #000; border-radius: 3px;
}

/*page boutique*/
.cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(4, 1fr); }
}
.card {
  padding: 1rem;
}

/*page boutique */

.boutique-bandeau {margin: 2px 0 15px 0; width: 100%; position: relative; min-height: 175px;}
.boutique-bandeau-bg {width: 100%; height: 100%;top: 0; left: 0;}
.boutique-bandeau-bg-img {width: 100%; height: 235px; object-fit: cover; filter: blur(8px) brightness(0.2) grayscale(0.8);}
.boutique-bandeau .row:nth-child(1) {width: 100%; height: 100%;top: 0; left: 0;}
.boutique-bandeau .col-12:nth-child(1) {position: absolute; top: 0; left: 0; z-index: 2;}
.boutique-bandeau-logo {max-width: 100%; min-height: 175px; padding: 5px; max-height: 100%; object-fit: contain; }
.boutique-bandeau-nom {text-align: center; height: 175px; line-height: 175px; font-size: 3.5em; font-weight: bold; color: #fefefe;}
.boutique-sousbandeau {}
.boutique-sousbandeau .row:nth-child(1) p {padding: 0 0 10px 0;}
.boutique-descriptif{padding: 2em 1em; text-align: center; font-size: 2em;}
.boutique-descriptif p, .boutique-descriptif div, .boutique-descriptif span {text-align: center;}

.boutique-select {margin: 3em 0 3em 0;}
.article-previsualisation {background: #dedede; color: #000; border: 1px solid #cecece; text-align: center; padding: 20px 13px 15px 13px;}
.article-previsualisation div, .article-previsualisation p {text-align: center;}
.article-previsualisation-img {margin: 10px 0 10px 0; max-width: 100px; object-fit: contain;}
.article-previsualisation-img:hover {filter: saturate(120%);}
.article-previsualisation-nom {padding: 15px 0 15px 0; font-size: 1.1em;}
.article-previsualisation-prix {padding: 15px 0 0 0;} 
.article-previsualisation-prix .etiquette {display: inline-block; font-size: 1.2em; font-weight: 500; padding: 9px 11px; }
.article-previsualisation-prix-barre {margin: 30px 0 7px 0; color: #666; text-decoration: line-through;} 
.article-previsualisation-prix-pourcentage {padding: 0px 0 0px 0; color: #666;} 

/*bouton adresse boutique etc.*/
button#BoutonVoirPlus, button.bouton_neutre_bleu, input.bouton_neutre_bleu {background: none; outline: none; padding: 0px;  border: none;}
button#BoutonVoirPlus {font-size: 0.8em; color: #fefefe; font-weight: bold; padding: 0px 5px 0px 5px; }
button.bouton_neutre_bleu, input.bouton_neutre_bleu{color: #92bef3; margin-bottom: 5px;}

/*page article */
.article_presentation {padding: 20px 0 20px 0;}
.article_presentation .col-6:nth-child(1) {/*text-align: center;*/text-align: left;}
.article_presentation .col-6:nth-child(1) .article_nav ul li {float: left; padding-left: 3px; list-style: none;}

.article_nav {padding: 18px 0px 52px 0px;} 
.article_nav li div {display: inline-block; background-color: #3f67bf; text-align: center;
width: 30px; height: 30px;  vertical-align: middle; line-height: 30px;
-moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px;}
.article_nav li div:hover {background-color: #a61697;}
.article_nav li div:nth-child(1) {margin-right: 25px;}
.article_nav a {font-weight: 900; color: #fff; font-size: 1.3em;}
.item_image .article_image {border: 5px solid #fff; margin: 0 auto 0 auto;}
.article_presentation .col-6:nth-child(2)  {text-align: left;}

.article_presentation .col-6:nth-child(2) h5 {padding-top: 9px;}

.article-detaillage-prix {padding: 12px 0 12px 0;} 
.article-detaillage-prix-partir {padding-bottom: 9px;}
.article-detaillage-prix .etiquette {display: inline-block; font-size: 1.4em; font-weight: bold; padding: 9px 11px; }
.article-detaillage-prix-barre {margin: 45px 0 7px 0; font-size: 1.1em; text-decoration: line-through;} 
.article-detaillage-prix-pourcentage {margin: 45px 0 7px 0; font-size: 1.1em;} 
.article-detaillage-prix-pourcentage span {background: #dedede; border: 1px solid #cecece; color: #a61697; padding: 6px 4px; font-weight: bold; border-radius: 5px;}

.article-descriptif{padding: 2em 0 2em 0; text-align: left; font-size: 1.2em;}

.article-presentation-select {width: 100%; color: #000; }
.article-presentation-select option {padding: 20px; }

.article-recapitulation {width: 100%; margin: 0 0 20px 0.5px; border: 3px solid #fff; padding: 2px;}
.article-recapitulation-nom {font-size: 1.25em; font-weight: bold; margin-bottom: 7.5px;}

.article-recapitulation-prix .etiquette {display: inline-block; font-size: 1.25em; font-weight: bold; padding: 7px 9px; }
.article-recapitulation-prix-pourcentage {margin: 45px 0 7px 0; font-size: 0.8em;} 
.article-recapitulation-prix-pourcentage span {background: #dedede; border: 1px solid #cecece; color: #a61697; padding: 6px 4px; font-weight: bold; border-radius: 5px;}
.ajouter_panier button {display: block; width: 100%; font-weight: bold;}

/**************panier*/

.panier-vide, .panier-vide p {width: 100%; text-align: center;}
.panier-vide {padding: 20px;}
.panier-rebours {width: 100%; text-align: right; padding: 10px 5px 20px 0; font-size: 0.9em;}
.panier-commande-cadre 
{
padding: 1%;
margin-top: 30px;
background: #2e3438;
    /*border: 1px solid #aaa;*/
}
.panier-commande-titre h5 
{
letter-spacing: 2px;
  color: #3f67bf;
  margin-top: 4em;
  margin-bottom: 2em;
  font-size: 1.2em;
 font-weight:600;
}



/*chemin de commande*/
.simpleCart_cadre {float: left; position: relative; padding: 1%; width: 70%; margin: 0 auto 0 auto;}

/*panier*/

.panier_1 {background: #2e3438; border-left: 1px solid #aaa; border-right: 1px solid #aaa;}
.panier_2 {background: #2e3438; border-bottom: 1px solid #aaa; border-left: 1px solid #aaa; border-right: 1px solid #aaa;}
.panier_3 {background: #2e3438; border-left: 1px solid #aaa; border-right: 1px solid #aaa;}
.panier_4 {background: #2e3438; border-left: 1px solid #aaa; border-right: 1px solid #aaa; padding: 0 1% 2% 1%;}
.panier_5 {border-bottom: 1px solid #aaa; text-align: right; border-left: 1px solid #aaa; border-right: 1px solid #aaa; padding: 0.5% 1% 2% 1%; background: #2e3438;}

.panier-cadre {background: #2e3438;}
.panier_ligne_haut {border-top: 1px solid #aaa;}
.panier_ligne_gauche {border-left: 1px solid #aaa;}
.panier_ligne_droite {border-right: 1px solid #aaa;}
.panier_ligne_bas {border-bottom: 1px solid #aaa;}
.panier-reduction-ligne {padding: 20px 15px 20px 15px;border: 1px solid blue;}

.chemin_panier, .chemin_livraison, .chemin_paiement {float: left; position: relative; width: 30%; padding: 1%; text-align: left; background: #b211a3; color: #fff; margin: 0 1% 0 0;}
.chemin_exergue {background: grey;}
.panier_intitule {float: left; position: relative;}
.simpleCart_designation {text-align: center; border-right: 1px solid #aaa;}
.simpleCart_qte {text-align: center;  border-right: 1px solid #aaa;}
.simpleCart_sstotal{text-align: center;} 
.panier_items {float: left; position: relative; width: 100%;}
.panier_cgv {width: 40%; text-align: left;}
.panier_cgv a {font-size: 0.8em;}
.panier_total_titre {width: 42%; text-align: right; margin-right: 2%;}
.panier_total {border-left: 1px solid #aaa; width: 15%; text-align: center;}
.panier_offre_titre {width: 82%; text-align: right; margin-right: 2%;}
.panier_offre {width: 15%; text-align: center;}
.panier_annuler {width: 98%; text-align: right;}
.annuler_intitule {font-size: 0.8em; margin-right: 2%;}
a.panier_valider {background: #b211a3; padding: 2%;  color: #fff; font-weight: bold;}
.panier_continuer {width: 98%; text-align: right;}



/*livraison*/
.cadre-adresse{padding: 20px; display: inline-block;float: left;}
.cadre-adresse-autres {padding: 20px; cursor: pointer;}
.cadre-adresse:hover {  
background: #b211a3;
color: #fff;
}
cadre-adresse-autres:hover {color: #fff;}
.cadre-adresse-nouvelle:hover {background: none; color: #c4c4c4;}
.cadre-adresse-nouvelle:hover a {color: #c4c4c4;}
.cadre-adresse:hover a {color: #fff;}
.cadre-adresse a {color: #c4c4c4;}
.cadre-adresse-choisie {  background: #b211a3;/*background: #0acf66;*/color: #fff;}
.cadre-adresse-choisie::before {
    content: " \2713 "; 
    color: fff; 
	font-weight: bold; 
	padding-right: 3px;
    font-size: 1.2em;	
}
.cadre-adresse-choisie a {color: #fff;}
.livraison-recap {margin-left: 25px;}
.livraison-recap-nom {font-weight: bold;}
.livraison-recap-qte {padding-top: 5px;}
.livraison-recap-montant {font-size: 1.1em; padding-top: 5px; text-align: right; margin-right: 25px;}

/*fin commande*/

.qrcode_affiche {padding: 20px; text-align: center;}
.qrcode_affiche img {border: 20px solid #fff;}

@media (max-width: 400px) 
{
.qrcode_affiche img { width:95%;}
}

@media (min-width: 401px) and (max-width: 600px) 
{
.qrcode_affiche img { width:80%; }
}

@media (min-width: 601px) and (max-width: 800px) 
{
.qrcode_affiche img { width:70%; }
}

@media (min-width: 801px) 
{
.qrcode_affiche img { width:50%;}
}

/*messagerie interne*/

/* Style the ognette */
.ognette {
  overflow: hidden;
  color: #fff;
}

/* Style the buttons inside the ognette a61697 */
.ognette button {
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 12px;
  transition: 0.3s;
  font-size: 1.1em;
  margin: 0 10px 0 0;
}

.ognette button:nth-child(odd) 
{
background-color: #a61697;
}

.ognette button:nth-child(even) 
{
background-color: #8a117d;
}

/* Change background color of buttons on hover */
.ognette button:hover {
  background-color: #3f67bf;
}

/* Create an active/current ognettelink class */
.ognette button.active {
  background-color: #3f67bf;
}

/* Style the ognette content */
.ognettecontent {
  display: none;
  padding: 13px 0px;
  border-bottom: 1px solid #ccc;
  border-top: none;
}

.ognettecontent button {padding: 2.5px 5px 2.5px 5px;}
.ognettecontent button:focus{background-color: #3f67bf; color: #fff;      
     border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    -o-border-radius: 0.3em;}

.ognettecontent h5.objet {margin: 5px 0 2em 0;}
	
.messagerie-champ-texte {width: 100%;
    color: #000;
    outline: none;
    font-size: 17px;
    padding: 18px 16px;
    border: none;
    margin-bottom: 1em;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid rgba(153, 153, 153, 1);
    border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    -o-border-radius: 0.3em;}

.messagerie-champ-texte p, .messagerie-champ-texte div, .messagerie-champ-texte li, .messagerie-champ-texte span
, .who_are .messagerie-champ-texte p {color: #000;}