/* ELEMENTS STANDARDS */
  
*, ::before, ::after {
  margin: 0;
  padding: 0;
}

html,
body {
  overflow-x: hidden; /* Prevent scroll on narrow devices */
}

body {
  /*font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;*/
  /*font-family: "OpenSansRegular",Helvetica,Arial,sans-serif;*/
  font-family: BebasNeue-Regular, sans-serif;
  background-color: white;
  color: #444444;
  /*background-image: linear-gradient(75deg, white 60%, black);*/
}

hr {
  /*border: 3px solid gainsboro;*/
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

pre {
  font-family: "OpenSansRegular",Helvetica,Arial,sans-serif;
  font-size: 0.9rem;
  font-weight: normal;
}

form {
  font-family: "OpenSansRegular",Helvetica,Arial,sans-serif;
}
/*
form label, form button {
  background-color: #212529;
  color: white;
  padding: 5px 10px;
  border-radius: 3px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover, form button:hover {
  background-color: #2D5BA3;
  color: white;
}

form label:active, form button:active {
  background-color: #0D3F8F;
  color: white;
}
#quantity{
  opacity: 0;
  width: 0px;
}*/

.form-connexion{
  max-width: 400px;
  margin: 0 auto;
}

  /* Mise en forme des liens */

a {
  color: #000;
}
a:link {

}
a:visited {

}
a:focus {

}
a:hover {
  color:#FF0000;
  text-decoration: none;
}
a:active {

}


  /* ENTETE */

header { }
#entete {
  /*background-color: #1E1E28;*/
  /*background-image: url(../images/site/ban.jpg) no-repeat top right;*/
  /*background: linear-gradient(to bottom, rgba(30, 30, 30, 0.5), rgba(255, 255, 255, 0.5));*/
  /*background: linear-gradient(45deg, white 20%, black);*/
  /*background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);*/
}
#entete a, #entete p{
  text-decoration: none;
}
#entete .btn{
  /*border: 0px;*/
}
#entete .badge {
  font-size: 0.8rem;
  font-weight: normal;
}


  /* CAROUSEL */
  
#myCarousel { /*max-height: 200px;*/ }  
#myCarousel .carousel-caption {
  font-family: BebasNeue-Regular, sans-serif;
  bottom: 3rem;
  z-index: 10;
}
#myCarousel .carousel-item img { /*max-height: 300px;*/ max-width: 100%; }
#myCarousel .carousel-caption h3 { }
#myCarousel .carousel-caption p { }



  /* MENU DE NAVIGATION */

#menu-principal {  }
#menu-principal .navbar-brand img { opacity: 0.55; }
#menu-principal .navbar-brand img:hover { opacity: 0.7; }
#menu-principal .nav-link {  }
#menu-principal .nav-link:hover {  }
#menu-principal .navbar { }
#menu-principal .navbar .dropdown-item{ }
#menu-principal .navbar-nav { margin: 0 auto; }



  /* INFO DE NAVIGATION */

#navbarInfo { /*background-color: white;*/ }
#navbarInfo .breadcrumb {
  font-family: "OpenSansRegular",Helvetica,Arial,sans-serif;
  font-size: 0.7rem;
  font-style: italic;
  letter-spacing: 0px;
  margin-bottom: 10px;
  /*text-shadow: -3px 3px 3px #08403b;*/
  /*border-top: 1px solid gray;*/
  /*border-bottom: 1px solid gray;*/
  /*padding-bottom: 10px;*/
}
#navbarInfo .breadcrumb-item { /*margin-top: 10px;*/ }
#navbarInfo .breadcrumb-item a { color: rgba(0,0,0,.55); text-decoration: none; }
#navbarInfo .breadcrumb-item a:hover { color: rgba(0,0,0,.7); }


  
  /* SECTIONS PRINCIPALES */

#contenu-principal {
  min-height: 300px;
}
section {
  display: flex;
  margin-bottom: 20px;
}
aside {
  flex: 1 auto;
  position: relative;
  font-size: 0.9em;
}
main {
  /*max-width: 980px;*/
  flex: 3 auto;
  max-width: 100%;
  margin: 0 auto;
}
footer {
  border-top: 1px dashed #000;
  min-height: 250px;
  width: 100%;
  background: #212529;
  color: #ccc;
}



  /* CONTENU DES PAGES */

#articleListSel{ } /*Liste des articles d'une catégorie catégorie sélectionnée.*/
#articleListAll{ } /*Tous les articles*/
#articleListNew { } /*Nouveaux articles*/
#promoListAll { } /*Articles en promotion*/
#bestdealList { } /*Meilleurs ventes*/
#bestdealList .bestdealList-header {
  /*border-top:6px solid #414141;*/
  /*border-bottom: 1px solid #414141;*/
  /*color: #FECE1A;*/
}

#articleListSel .card,
#articleListAll .card, 
#articleListNew .card,
#promoListAll .card,
#bestdealList .card 
{
  min-width: 200px;
  /*max-width: 200px;*/
  white-space: nowrap;
  overflow: hidden;
  border: 0px;
}
#promoListAll .badge{
  font-weight: normal;
}


/*Page détail d'un article*/
#articleDetail .description {
  font-family: "OpenSansRegular",Helvetica,Arial,sans-serif;
  /*font-size: 0.7rem*/
}
#articleDetail .prix span,
#articleDetail .stock span {
  color: green;
}
#articleDetail .prix-promo span{
  color: red;
}


  /* Galerie d'images de l'article sélectionné */

#articleDetail .container-galerie {
  /* Positionne le conteneur d'images (nécessaire pour positionner les flèches gauche et droite) */
  position: relative;
  text-align: center;
}
#articleDetail .mySlides {
  /* Cache les images par défaut */
  display: none;
}
#articleDetail .cursor {
  /* Ajoute un pointeur lors du survol des images miniatures */
  cursor: pointer;
}
#articleDetail .nav-btn {
  /* Element contenant les boutons suivant et précédent */
  position: absolute;
  top: 30%;
  width: 100%;
}
#articleDetail .prev1, #articleDetail .next1 {
  /* Boutons suivant et précédent */
  cursor: pointer;
  text-decoration: none;
  padding: 16px;
  color: Black;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}
#articleDetail .prev1:hover, #articleDetail .next1:hover {
  /* Au survol, ajoute une couleur de fond noire avec un peu de transparence */
  background-color: rgba(94, 94, 94, 0.2);
}
#articleDetail .numbertext {
  /* Texte de nombre (1/3 etc) */
  color: #414141;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
#articleDetail .caption-container {
  /* Conteneur pour le texte de l'image */
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  font-size: 0.8rem;
  color: white;
}
#articleDetail .nav-img {
  /* Ajoute un effet de transparence pour les images miniatures */
  opacity: 0.6;
}
#articleDetail .active, #articleDetail .nav-img:hover {
  opacity: 1;
}/*--- FIN Galerie d'images de l'article sélectionné ---*/



  /* ELEMENTS DE CONTENU */

/*Fiches des articles*/
.card { /*border-bottom: 1px solid grey;*/ }
.card-body { max-height: 210px; }
.card-img { padding: 1rem; max-height: 200px;}
.card .card-image {
  min-height: 200px;
  max-height: 200px;
  margin: 0 auto;
}
.card .miniature {
  margin: 0 auto;
  max-width: 100%;
  /*max-height: 100%;*/
  transition: transform .25s 0s cubic-bezier(.25, .8, .25, 1), -webkit-transform .25s 0s cubic-bezier(.25, .8, .25, 1);
}
.card .miniature:hover {
  transform: scale(1.05) translateZ(0);
}

/* général */
.card-body .prix,
.card-body .prix,
.card-body .prix,
.card-body .prix-promo,
.card-body .prix-promo,
.card-body .prix-promo {
  color:#fff;
  margin: 0px auto;
  padding:0.5rem ;
  border-radius:8px;
  min-height: 40px;
}

/* Prix normal */
.card-body .prix,
.card-body .prix,
.card-body .prix {
  background-color:green;
}

/* Prix promo */
.card-body .prix-promo,
.card-body .prix-promo,
.card-body .prix-promo {
  background-color:red;
}

/* Ancien prix */
.card-body .ancien_prix,
.card-body .ancien_prix,
.card-body .ancien_prix {
  text-decoration: line-through;
  font-size: 0.8rem;
  font-weight: normal;
  transform: rotate(0.08turn) !important;
}
.card-body a {
  text-decoration: none;
  color: rgba(0,0,0,.55);  
}
.card-body a:hover {
  /*color: black;*/
  color: rgba(0,0,0,.7);  
}

.card-body a img {
  opacity: 0.7;
}

/* Position des badges */
.start-badge {
  left: 75% !important;
}
.top-badge {
  top: 0% !important;
}
.top-75{
    top: 75% !important;
}
.start-75{
    left: 75% !important;
}

/* Vignettes, menu images miniatures
-------------------------------------*/
#vignettes {
  font-family: BebasNeue-Regular, sans-serif;
  /*margin: 0 auto;*/
}
#vignettes .vignettes-header {
  border-top:6px solid #414141;
  /*border-bottom: 1px solid #414141;*/
  /*color: #FECE1A;*/
}

#vignettes a {
  text-decoration: none;
  color: rgba(0,0,0,.55);  
}
#vignettes a:hover {
  /*color: black;*/
  color: rgba(0,0,0,.7);  
}

#vignettes p.card-text {
  font-family: "OpenSansRegular",Helvetica,Arial,sans-serif;
  
}
#vignettes img {
  margin: 0 auto;
  border: 1px;
}


  /* ELEMENTS DIVERS */

.sticky-top2 {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    z-index: 1020;
}
.sticky-top3 {
    position: -webkit-sticky;
    position: sticky;
    top: 37px;
    z-index: 1020;
}
#legende {
  font-size: .7rem;
}



/* PAGES CONTACT, A PROPOS, ...
-------------------------------------------------- */
#about p {
  font-family: "OpenSansRegular",Helvetica,Arial,sans-serif;
}
#map{
		/*float:right;*/
		border: 0px red inset;
		margin-top: 30px;
	}
  /* MEDIA QUERY RESPONSIVE */
#contact h3 {
  margin: 0 auto;
}
/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }
}

/* Petit appareils X-Small (téléphones portrait, moins de 576 pixels) */
@media (max-width: 576px) {
  /* Pas de requête multimédia pour `xs` puisque c'est la valeur par défaut dans Bootstrap */
	/* petit appareils - largeur d'écran égale ou inférieur à 576 pixels */
  #articleListAll .card {
    min-width: 100%;
    max-width: 100%;
  }
}

/* Petits appareils (téléphones paysage, 576px et plus) */
@media (min-width: 576px) {
  /*...*/
}


@media (min-width: 576px) and (max-width: 768px) {
  #entete {
    /*display: none;*/
  }
}


/** Appareil moyens (mobile pad, smartphone..., 768px et moins **/
@media (max-width: 767.98px) {
  aside { display: none; }
  /*.carousel-item img { max-height: 100%; max-width: 100%; }*/
  .carousel-caption {
    top: 0.1rem;
  }
  #vignettes img {
    border-radius: 0rem !important;
    border-top-right-radius: 0.25rem !important;
    border-top-left-radius: 0.25rem !important;
    }  
}


/* Appareils moyens (tablettes, 768px et plus) */
@media (min-width: 768px) {  /*...*/ }


/* Grands appareils (ordinateurs de bureau, 992px et moins) */
@media all and (max-width: 991.98px) {
  /*.popup{ display: none; }*/
  #articleListSel .card {
    max-width: 100%;
  }
  
  .logo { display: none; }
  
  /*#vignettes p.card-text {
    line-height: 0.7;
  }*/
}


/* Grands appareils (ordinateurs de bureau, 992px et plus) */
@media (min-width: 992px) { /*...*/ }


/* Appareils X-Large (grands ordinateurs de bureau, 1200px et plus) */
@media (min-width: 1200px) { /*...*/ }


/* Appareils XX-Large (ordinateurs de bureau plus grands, 1400px et plus) */
@media (min-width: 1400px) { /*...*/ }