/* DEBUT | Commun */
body {
  font-family: arial;
  font-size: 100%;
  background-color: #fff;
  /*padding: 0px 20px 20px 20px;*/
  margin-top: 0px;
}

.home {
  background-repeat: no-repeat;
}
.produits {
  background-repeat: no-repeat;
  background-size: 25px 25px;
}
.contact {
  background-repeat: no-repeat;
  background-size: 25px 25px;
}

#header {
  /*overflow:hidden;*/
  /*width: 75%;*/
  margin: auto;
}
/* FIN | Commun */

/* DEBUT | Logo */
#logo {
  float: left;
  position: relative;
  top: 23px;
}
#logo .cercle {
  height: 75px;
}
#logo .slogan {
  width: 75px;
  display: block;
}
/* FIN | Logo */

/* DEBUT | Langage */
#langue {
  float: right;
}
/* FIN | Langage */

/* DEBUT | Bandeau */
#bandeau {
  clear: both;
  padding-left: 20%;
  padding-right: 20%;
}
/* FIN | Bandeau */

/* DEBUT | Menu */

#menu ul {
  width: 92%;
  margin: auto;
  position: relative;
}
#menu ul,
ul.sous-menu {
  list-style: none;
}
#menu ul li {
  float: left;
  width: 16%;
  color: #fff;
  background-color: #66c22e;
  font-size: 100%;
  text-align: center;
  margin-right: 4px;
  box-shadow: 0 1px 0 rgba(000, 000, 000, 0.6);
  text-indent: -3px;
}

#menu li:hover {
  background-color: #57a825;
}

#menu li a {
  display: block;
  color: #fff;
  text-decoration: none;
  width: 100%;
  padding: 8% 0%;
}

#menu ul.sous_menu {
  display: none;
  width: auto;
}
#menu ul li:hover > ul {
  display: block; /*
	position:absolute;
	left:182px;
	top:44px;*/
}

#menu ul li ul.sous_menu li {
  float: none;
  width: 100%;
  border-radius: 0px;
  border-bottom: 1px #fff solid;
}

/* responsive */
/* Hide the link that should open and close the topnav on small screens */
.top .icon {
  display: none;
}

/* When the screen is less than 853 pixels wide, hide all links, except for the first one ("Home"). Show the link that should open and close the topnav (.icon) */

@media screen and (max-width: 980px) {
  .top li:not(:first-child) {display: none;}
  .top li.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 980px) {
  .top.responsive {position: relative;}
  .top.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul#myTop.top.responsive li{
    float: none;
    display: block;
    margin-bottom: 4px;
    width: 25%;
  }
}

/* FIN | Menu */

/* DEBUT | Rechercher */
#recherche {
  clear: right;
  float: right;
}
/* FIN | Rechercher */

/* DEBUT | Contenu */
#contenu {
  clear: both;
  padding-top: 16px;
  width: 75%;
  margin: auto;
  position: relative;
}

#contenu fieldset {
  border-color: #b9c2a1;
  color: #b9c2a1;
}
#contenu fieldset legend {
  color: #63665a;
}

#contenu p {
  text-align: justify;
}

#contenu div#cadre {
  float: left;
  width: 607px;
  height: 237px;
  border: solid 2px;
  margin-right: 15px;
  padding: 0px 10px;
}

#contenu /*div#cadre*/ h1 {
  text-align: center;
}

#contenu /*div#cadre*/ h2 {
  text-align: justify;
  font-size: 1.2rem;
}
#contenu /*div#cadre*/ h3 {
  text-decoration: underline;
  font-weight: lighter;
  /*text-align:center;*/
}
#contenu /*div#cadre*/ h4 {
  text-decoration: underline;
}
#contenu p#legende {
  font-family: cursive;
  text-align: justify;
}
#contenu /*#panier*/ table {
  border: 1px solid #dddddd;
  width: 100%;
  text-align: center;
}
#contenu /*#panier*/ table tr.t�te th {
  border-bottom: 1px solid #dddddd;
}
#contenu p {
  width: 50%;
}
div#description {
  color: #000;
  position: absolute;
  display: none;
  border: 1px solid #000;
  padding: 1%;
  left: 38%;
  top: 0px;
  width: auto;
}

ul#produits li {
  color: #7bca3d;
  width: 50%;
  margin-bottom: 1em;
  position: relative;
  font-size: 1.3em;
}
ul#produits li:hover {
  font-style: italic;
  font-weight: bolder;
}
ul#produits li a {
  color: #996c71;
}
ul#produits li a:hover {
  background-color: pink;
}
ul#produits li:hover > div {
  display: block;
  float: right;
  margin-left: 1.5rem;
}
div#mise_avant {
  width: 42%;
  float: right;
  margin: 40px auto auto auto;
}
div#mise_avant ul {
  padding: 0;
}
div#mise_avant ul li {
  padding: 0;
  margin-bottom: 18px;
  text-align: justify;
}

b.titre {
  font-size: 180%;
}
p#intro_specialites {
  font-style: italic;
  font-weight: bold;
}
div.contact_margin {
    margin-bottom: 1rem;
}
/* FIN | Contenu */

/*DEBUT Carroussel*/
.carousel {
  width: 100%;
  overflow: hidden;
}

.carousel-container {
  display: flex;
  width: calc(100% * 5);
  transition: transform 0.5s ease-in-out;
}

.carousel-slide {
  width: calc(100% / 5);
}

.carousel-slide img {
  width: 100%;
  height: auto;
}


/*FIN Carroussel*/

/* DEBUT | Footer */
div#footer {
  width: 75%;
  display: block;
  /*position: absolute;*/
  margin: 50px auto 10px auto;
  /*bottom: 1px;*/
}
#footer p {
  font-size: 70%;
  text-align: center;
  margin-bottom: 0px;
  margin-top: 0px;
}
/* FIN | Footer */