@charset "utf-8";
/* CSS Document ! */
h2 {
    font-size:100%;
    font-variant: normal !important;
    text-transform: none !important;
}
#shopheader {
    width:100%;
    display:flex; flex-flow:row nowrap; justify-content: space-between; align-items: center;
}
#shopheader #shoplogo {
	text-align:left;
	margin:0;
	float:left;
}
#shopnavtop {
    text-align: right;

}
#shopnavtop ul {
	list-style-type:none;
	padding:0;
	margin:0;
    width:auto;
	display:flex; flex-flow:row nowrap; justify-content: flex-end;
    gap:0 20px;
}
#shopnavtop ul li {
	background-color:#FFF;
	border:1px solid #ccc;
    display:inline;
    padding:5px;
}
/* own : articles presentations */
.articleslist { display:flex; gap:15px; flex-flow: row wrap; justify-content: space-evenly; align-items: stretch; align-content: flex-start; }
.articleslist a { text-decoration:none; }
.articleslist article.carded { box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2); text-align:left; position:relative; padding:0; }
.articleslist article.carded footer, .articleslist article.carded header { padding:auto; text-align:center; margin:0; }
.articleslist article.carded header { background-color:var(--primary); color:var(--text_light); }
.articleslist article.carded footer { background-color:var(--text_dark); }
.articleslist article.carded footer a, .articleslist article.carded header a { color:var(--text_light); }
.articleslist article.carded header h4, .articleslist article.carded footer h4 { text-align:center; padding:0; margin:0; }
.articleslist article.carded:hover { transform:scale(1.02); transition: all 200ms; }
.articleslist article.carded.promoted header, .articleslist article.carded.promoted footer { background-color:rgba(91,0,169,0.5); }
.articleslist article.carded.inactif header, .articleslist article.carded.inactif footer { background-color:rgba(0,0,0,0.5); }
.articleslist article.carded.promoted h3 { background-color:rgba(91,0,169,0.5); color:#FFF; text-align: center; transform:rotate(-30deg); position:relative; left:-50%; top:0;  width:auto; }
.articleslist article figcaption { color:var(--text_dark); font-size:100%; }
.articleslist article p, .articleslist article div { padding:0; text-align:center; margin:1%; }
.articleslist article figure { margin:1%; padding:0; text-align:center; }
/* Carousel */
.carousel {
color: #170724;
  --carousel-button-bg: #fff;
  --carousel-button-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);
  --carousel-button-svg-width: 20px;
  --carousel-button-svg-height: 20px;
  --carousel-button-svg-stroke-width: 2.5;
}
#mainCarousel .carousel__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin-right: 6px;
}
.carousel .carousel__button:focus {
  outline: none;
  box-shadow: 0 0 0 4px #A78BFA;
}
.carousel .carousel__button.is-prev {
  left: -1.5rem;
}
.carousel .carousel__button.is-next {
  right: -1.5rem;
}
#mainCarousel .carousel__button {
    display:none;
}
.carousel .carousel__dots {
  color: #7E22CE;
}

#mainCarousel .carousel__slide {
  width: 100%;
  padding: 0;
}
#thumbCarousel .carousel__slide {
  width: 88px;
  padding: 0.75rem;
}
#thumbCarousel .carousel__slide img {
  border-radius: 4px;
}
#thumbCarousel .carousel__slide.is-nav-selected img {
  box-shadow: 0 0 0 4px #A78BFA;
}  
/* Own, table like */
.tableline {
    display:flex; flex-flow:row nowrap; width:99%; gap:15px;
}
.tableline.bordered {
    border:1px solid #999;
}
.tableline.left {
    justify-content:flex-start;
}
.tableline.ecartement {
    justify-content:space-between;
}
.tableline.hcenter {
    justify-content:center;
}
.tableline.vcenter {
    align-items:center;
}
.tableline input, .tableline select, .tableline textarea {
    padding:10px;
    margin:10px; margin-bottom: -5px;
}
.tableline label {
    margin-left:10px;
}
ul.menucats {
    margin:0;
    text-align:center;
}
ul.menucats li {
    margin:0;
    padding:5px;
    background-color:var(--primary);
    color:var(--text_light);
    text-decoration:none;
    border-bottom:1px solid var(--text);
}
ul.menucats a {
    color:var(--text_light);
}
ul.menucats li:hover {
    background-color:var(--primary_light);
}
div.negatif input {
    background-color:rgba(200,0,0,0.15);
}
div.positif input {
    background-color:rgba(0,200,0,0.15)
}
/* Drop down menu */
.dropbtn { /* Le bouton à  cliquer */
        padding: 16px;
        border: none;
        cursor: pointer;
        background: var(--text);
        color: var(--primary);
        font-size: 0.9em;
}
.dropbtn:hover, .dropbtn:focus, .dropbtn:active {
    background-color: var(--primary_light);
    color: var(--text_dark);
}
.dropdown { /* le tout, la fonction */
    position: relative;
    display: inline-block;
    overflow: visible;
    word-break: keep-all;
    white-space: nowrap;
}
.dropdown-content { /* le menu qui se deroule */
    display: none;
    position: absolute;
    background-color: #FFF;
    /* min-width: 160px; */
    overflow: auto;
    z-index: 1;
    font-size: 1em;
}
.dropdown-content a {
    color: var(--text_light);
    padding: 12px 16px !important;
    display: block;
}
.dropdown a, .dropdown a:enabled {
    background-color: var(--primary);
    color: var(--text_light) !important;
}
.dropdown a:hover, .dropdown a:active, .dropdown a:focus {
    background-color: var(--primary_light);
    color: var(--text_light) !important;
}
.show { /* nécessaire pour le menu déroulant, doit être placé après les classes du menu */
    display:block;
}
.hide { /* nécessaire pour le menu déroulant, doit être placé après les classes du menu */
    display:none;
}
.temp {
    position:fixed;
    left:50%;
    top:25%;
    transform: translate(-50%, -50%);
    opacity:1;
    -moz-animation: anim 2s linear forwards 0.1s;
    -webkit-animation: anim 2s linear forwards 0.1s;
    -o-animation: anim 2s linear forwards 0.1s;
    -ms-animation: anim 2s linear forwards 0.1s;
    animation: anim 2s linear forwards 0.1s;
    z-index:10;
}
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
/* Chrome */
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button { 
	-webkit-appearance: none;
	margin:0;
}
/* Opéra*/
input::-o-inner-spin-button,
input::-o-outer-spin-button { 
	-o-appearance: none;
	margin:0
}
@-moz-keyframes anim {
   0%  {opacity:1;}
   100% {opacity:0;}
}
@-webkit-keyframes anim {
   0%  {opacity:1;}
   100% {opacity:0;}
}
@-o-keyframes anim {
   0%  {opacity:1;}
   100% {opacity:0;}
}
@-ms-keyframes anim {
   0%  {opacity:1;}
   100% {opacity:0;}
}
@keyframes anim {
   0%  {opacity:1;}
   100% {opacity:0;}
}