@media only screen and (min-width: 360px) {
  .style3 {
    position: absolute;
  }
  #img_centrale_horizontale_1 {
    position: absolute;
    top: 29%;
    left: 20%;
    width: 60%;
    height: 50%;
  }
  #img_centrale_horizontale_2 {
    position: absolute;
    top: 29%;
    left: 20%;
    width: 60%;
    height: 50%;
  }
  #img_centrale_verticale_1 {
    position: absolute;
    top: 20%;
    left: 26%;
    width: 48%;
  }
   #img_centrale_carre_1 {
    position: absolute;
    top: 26%;
    left: 26%;
    width: 48%;
  }
  #img_centrale_verticale_2 {
    position: absolute;
    top: 20%;
    left: 26.5%;
    width: 48%;
    /* height: 65% */
  }
   #img_centrale_carre_2 {
    position: absolute;
    top: 25%;
    left: 26.5%;
    width: 48%;
    /* height: 65% */
  }

  #img_ambiance_horizontale1 {
    position: absolute;
    top: 14.5%;
    left: 45%;
    width: 12%;
    height: 15%;
  }
  #img_ambiance_verticale1 {
    position: absolute;
    top: 21%;
    left: 46%;
    width: 8.5%;
  }
    #img_ambiance_carre1 {
    position: absolute;
    top: 23%;
    left: 46%;
    width: 8.5%;
  }
}
html {
  min-height: 100%;
}
body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
}

main {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
}
a {
  color: black;
}
a:hover {
  text-decoration: none;
}
.selected {
  font-weight: bold;
}
.shadow {
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#logo2020 {
  height: 80px;
}
#nom_artiste {
  font-size: 18px;
}
#link_connect {
  font-size: 14px;
}
#link_panier {
  font-size: 14px;
}
.coeur {
  background-color: white;
  color: black;
  border: none;
  outline: none;
}

.coeur:hover .fa-heart-o:before {
  content: "\f004";
  color: black;
}
.delete {
  background-color: transparent;
  border: none;
  outline: none;
}
*:focus {
  outline: 0 !important;
}
.bg-light2 {
  background-color: white;
}

.bg-light3 {
  background-color: white;
  border-radius: 5px;
}

.navbar-light .navbar-toggler {
  background-color: white;
}
.txtgrey {
  color: #868e96;
}

img.superpose {
  position: absolute;
  top: 0px;
  right: 0px;
}
img.superpose2 {
  position: absolute;
  top: -7px;
  right: 0px;
}
img.superpose3 {
  position: absolute;
  top: -2px;
  right: 5px;
}
.style4 {
  background-color: #c4fcb4;
  border-width: 5px;
  border-color: #262928;
  background-image: -webkit-gradient(linear, left bottom, left top, from(#c0f7c1), to(#f0ffe1));
  background-image: linear-gradient(0deg, #c0f7c1 0%, #f0ffe1 100%);
 padding: 0;
  font-size: 0.9rem;
}
.style6 {
  padding: 0;
 
}
@media (min-width: 576px) {
  .style3 {
    clear: none;
    float: none;
  }
  #img_centrale_horizontale_1 {
    position: absolute;
    top: 28%;
    left: 20%;
    width: 60%;
  }
  #img_centrale_horizontale_2 {
    position: absolute;
    top: 28%;
    left: 20%;
    width: 60%;
  }
  #img_centrale_verticale_1 {
    position: absolute;
    top: 21%;
    left: 30%;
    width: 41%;
  }
  #img_centrale_verticale_2 {
    position: absolute;
    top: 21%;
    left: 30%;
    width: 41%;
  }
   #img_centrale_carre_1 {
    position: absolute;
    top: 26%;
    left: 30%;
    width: 41%;
  }
  #img_centrale_carre_2 {
    position: absolute;
    top: 25%;
    left: 30%;
    width: 41%;
  }

  #img_ambiance_horizontale1 {
    position: absolute;
    top: 13.5%;
    left: 44%;
    width: 14%;
    height: 16%;
  }
  #img_ambiance_verticale1 {
    position: absolute;
    top: 22%;
    left: 46%;
    width: 8.5%;
  }
  #img_ambiance_carre1 {
    position: absolute;
    top: 23%;
    left: 46%;
    width: 8.5%;
  }
}
@media only screen and (min-width: 768px) {
  #logo2020 {
    height: 100px;
  }
  #nom_artiste {
    font-size: 20px;
  }
  #link_connect {
    font-size: 16px;
  }
  #link_panier {
    font-size: 16px;
  }
  .bg-light2 {
    background-color: white;
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  #img_centrale_horizontale_1 {
    position: absolute;
    top: 28%;
    left: 27%;
    width: 46%;
  }
  #img_centrale_horizontale_2 {
    position: absolute;
    top: 28%;
    left: 27%;
    width: 46%;
  }
  #img_centrale_verticale_1 {
    position: absolute;
    top: 20%;
    left: 34.5%;
    width: 31%;
  }
  #img_centrale_verticale_2 {
    position: absolute;
    top: 20%;
    left: 34.5%;
    width: 31%;
  }
   #img_centrale_carre_1 {
    position: absolute;
    top: 27%;
    left: 34.5%;
    width: 31%;
  }
  #img_centrale_carre_2 {
    position: absolute;
    top: 27%;
    left: 34.5%;
    width: 31%;
  }

  #img_ambiance_horizontale1 {
    position: absolute;
    top: 14%;
    left: 44.5%;
    width: 13%;
  }
  #img_ambiance_verticale1 {
    position: absolute;
    top: 22%;
    left: 46%;
    width: 8.5%;
  }
   #img_ambiance_carre1 {
    position: absolute;
    top: 24%;
    left: 46%;
    width: 8.5%;
  }
}
.bg-light {
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.style1 {
  text-transform: capitalize;
}
.style2 {
  text-transform: capitalize;
}
.style3 {
  position: absolute;
  bottom: 15px;
  left: 30px;
}
@media (min-width: 992px) {
  .style3 {
    clear: none;
    float: none;
  }
  #img_centrale_horizontale_1 {
    position: absolute;
    top: 28%;
    left: 20%;
    width: 60%;
  }
  #img_centrale_horizontale_2 {
    position: absolute;
    top: 28%;
    left: 20%;
    width: 60%;
  }
  #img_centrale_verticale_1 {
    position: absolute;
    top: 21%;
    left: 27%;
    width: 46%;
  }
  #img_centrale_verticale_2 {
    position: absolute;
    top: 21%;
    left: 27%;
    width: 46%;
  }
   #img_centrale_carre_1 {
    position: absolute;
    top: 26%;
    left: 27%;
    width: 46%;
  }
  #img_centrale_carre_2 {
    position: absolute;
    top: 25%;
    left: 27%;
    width: 46%;
  }

  #img_ambiance_horizontale1 {
    position: absolute;
    top: 14%;
    left: 44%;
    width: 14%;
  }
  #img_ambiance_verticale1 {
    position: absolute;
    top: 22%;
    left: 46%;
    width: 8.5%;
  }
   #img_ambiance_carre1 {
    position: absolute;
    top: 24%;
    left: 46%;
    width: 8.5%;
  }
}
@media (min-width: 1200px) {
  .style3 {
    position: absolute;
  }
  img.superpose {
    position: absolute;
    top: 0px;
    right: 0px;
  }
  img.superpose2 {
    position: absolute;
    top: -7px;
    right: 0px;
  }
  #img_centrale_horizontale_1 {
    position: absolute;
    top: 28%;
    left: 21%;
    width: 58%;
  }
  #img_centrale_horizontale_2 {
    position: absolute;
    top: 28%;
    left: 21%;
    width: 58%;
  }
  #img_centrale_verticale_1 {
    position: absolute;
    top: 21%;
    left: 30%;
    width: 40%;
  }
  #img_centrale_verticale_2 {
    position: absolute;
    top: 21%;
    left: 30%;
    width: 40%;
  }
  #img_centrale_carre_1 {
    position: absolute;
    top: 26%;
    left: 30%;
    width: 40%;
  }
  #img_centrale_carre_2 {
    position: absolute;
    top: 25%;
    left: 30%;
    width: 40%;
  }

  #img_ambiance_horizontale1 {
    position: absolute;
    top: 13.5%;
    left: 44.5%;
    width: 13%;
  }
  #img_ambiance_verticale1 {
    position: absolute;
    top: 21%;
    left: 46%;
    width: 8.5%;
  }
  #img_ambiance_carre1 {
    position: absolute;
    top: 24%;
    left: 46%;
    width: 8.5%;
  }
 
}
.style5 {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 5px;
  border-width: 1px;
  border-color: #343a40;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  bottom: 45px;
  background-image: url("../images/rond.png");
}
.style7 {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.wappler-temp {}
.style8 {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.style9 {
  margin-bottom: 0px;
  padding-top: 7px;
  padding-bottom: 6px;
  border-width: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.style10 {
  border-width: 0px;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  margin-bottom: 0px;
  padding-top: 10px;
  padding-bottom: 11px;
}
.style11 {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.style12 {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.style13 {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.style14 {
  z-index: 1000;
  position: absolute;
  background-repeat: repeat;
  background-image: url("../images/info_support/filigrane.png");
  background-size: auto;
  height: 100%;
  float: left;
  width: 100%;
  left: 0px;
}
.style15 {
  position: relative;
}
div.container {
}