@charset "UTF-8";
/**
	Tant qu'il y aura des épices
	@author: Thomas Dixneuf
	@date: 2026-03-02
	@license: CreativeCommons
*/
/**** VARIABLES ****/
#text {
  display: none;
}

/**** MIXINS ****/
/* Font-face */
/**/
/*Break points*/
/**/
/*animations*/
/**/
/*Transitions*/
/*Clearfix*/
/**/
/**** GLOBALS ****/
/*styles used on all pages*/
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

@font-face {
  font-family: "dancingscript";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/DancingScript-Regular.otf") format("opentype");
}
@font-face {
  font-family: "glamor";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Glamor-Light.ttf") format("truetype");
}
@font-face {
  font-family: "glamormedium";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Glamor-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "roboto";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Roboto-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "robotoslab";
  font-style: normal;
  font-weight: bold;
  src: url("../fonts/RobotoSlab-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "boterastencil";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Botera-RegularStencil.otf") format("opentype");
}
@font-face {
  font-family: "canvas";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/TheSalvador-Condensed.otf") format("opentype");
}
html {
  font-family: "roboto", Arial, Helvetica, sans-serif;
  font-size: 1rem;
}
@media (max-width: 1200px) {
  html {
    font-size: 1rem;
  }
}
@media (max-width: 500px) {
  html {
    font-size: 0.9rem;
  }
}
html {
  letter-spacing: 1px;
  background-image: url("../imgs/motif35pourcent.png");
  background-color: rgb(18, 18, 18);
}

body {
  position: relative;
  margin: 0;
  padding: 0;
  z-index: 0;
  background: linear-gradient(to bottom right, rgb(18, 18, 18), rgba(18, 18, 18, 0.2));
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$bckgrd-body-clr', endColorstr='transparent',GradientType=1 );
}

/*LINKS*/
/**/
/*TITLES*/
header {
  width: 100%;
  margin-bottom: 0.5rem;
}
header h1 {
  padding: 5px 20px;
  margin: 0px;
  color: #f1ba7b;
}
@media (max-width: 767px) {
  header h1 {
    text-align: center;
    margin-top: 2rem !important;
  }
}
header h1 a {
  text-decoration: none;
}
header h1 a #sdme_logo {
  display: inline-block;
  width: 40%;
  max-width: 360px;
}
@media (max-width: 992px) {
  header h1 a #sdme_logo {
    width: 30%;
    max-width: 250px;
  }
}
@media (max-width: 767px) {
  header h1 a #sdme_logo {
    width: 40%;
    max-width: 250px;
  }
}
@media (max-width: 650px) {
  header h1 a #sdme_logo {
    width: 80%;
    max-width: 576px;
    margin: 0 auto;
  }
}
header h1 a #ampersand_logo {
  display: inline-block;
  width: 6%;
  max-width: 70px;
}
@media (max-width: 992px) {
  header h1 a #ampersand_logo {
    width: 6%;
    max-width: 40px;
  }
}
@media (max-width: 767px) {
  header h1 a #ampersand_logo {
    width: 6%;
    max-width: 30px;
  }
}
@media (max-width: 650px) {
  header h1 a #ampersand_logo {
    width: 10%;
    margin: 0 auto;
    max-width: 70px;
  }
}
header h1 a #tqiyade_logo {
  display: inline-block;
  width: 40%;
  max-width: 370px;
}
@media (max-width: 992px) {
  header h1 a #tqiyade_logo {
    width: 30%;
    max-width: 260px;
  }
}
@media (max-width: 767px) {
  header h1 a #tqiyade_logo {
    width: 40%;
    max-width: 260px;
  }
}
@media (max-width: 650px) {
  header h1 a #tqiyade_logo {
    width: 80%;
    max-width: 576px;
    margin: 0 auto;
  }
}
header .logo-slogan {
  color: #f1ba7b;
  font-style: italic;
  font-size: 1.2rem;
  margin-top: 0px;
  letter-spacing: normal;
}
@media (max-width: 767px) {
  header nav#socials {
    width: 100%;
    text-align: right;
  }
}

/**/
/*BOUTONS*/
.btn-std {
  border-radius: 1.2rem;
  line-height: 2rem;
}

.btn-std li a {
  line-height: auto;
  padding-right: 1rem;
  padding-left: 1rem;
}

/* special buttons of principal menu */
.btn-downloads-colors {
  height: 2rem;
  border-radius: 1.8rem;
  border-bottom: 2px solid #0D5177;
  background-color: #0D5177;
}
@media (max-width: 767px) {
  .btn-downloads-colors {
    display: contents;
  }
}
.btn-downloads-colors li {
  display: inline-block;
  margin: 0px;
  padding: 0 1rem;
  vertical-align: -webkit-baseline-middle;
}
.btn-downloads-colors li:first-child {
  color: #fff;
  background-image: linear-gradient(90deg, #0D5177 0%, #0D5177 50%, #943d0c 50%, #943d0c 100%);
  background-size: 200%;
  transition: background-position 0.3s cubic-bezier(0.47, 0.1, 1, 0.63), color 0.2s linear;
  transition-delay: 0s, 0.15s;
  border-radius: 1.8rem;
}
.btn-downloads-colors li:first-child:hover {
  color: #fff;
  cursor: pointer;
  background-position: -100% 100%;
}
.btn-downloads-colors li:last-child {
  background-image: linear-gradient(90deg, #f1ba7b 0%, #f1ba7b 50%, #943d0c 50%, #943d0c 100%);
  background-size: 200%;
  transition: background-position 0.3s cubic-bezier(0.47, 0.1, 1, 0.63), color 0.2s linear;
  transition-delay: 0s, 0.15s;
  border-bottom: 0px;
  border-radius: 1.2rem;
  margin-right: 0px !important;
}
.btn-downloads-colors li:last-child:hover {
  color: #fff;
  cursor: pointer;
  background-position: -100% 100%;
}
.btn-downloads-colors li:last-child img {
  position: relative;
  float: right;
  top: -19px;
  width: 3.5rem;
}

.special-event-container {
  position: absolute;
  top: 40%;
  z-index: 1900;
  left: 4%;
  display: block;
  width: 11%;
  min-width: 100px;
}
.special-event-container .special-event-button {
  width: 100%;
  background-image: url("../img/voir-cadeaux-noel-2021.png");
  background-size: contain;
  background-repeat: no-repeat;
}
.special-event-container .special-event-button:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

/**/
/*PAGES*/
.page {
  position: relative;
  z-index: 1;
}
@media (max-width: 767px) {
  .page {
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }
  .page h2, .page h3, .page p {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
.page {
  width: 80%;
  max-width: 1200px;
  background-color: #fff;
  margin: 0rem auto 2rem;
  padding: 1rem 2rem 5rem;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
}
.page h2 {
  font-size: 2.4rem;
}
.page h3 {
  font-size: 2rem;
  letter-spacing: 0px;
  padding-right: 250px;
}
@media (max-width: 767px) {
  .page h3 {
    padding-right: 0px;
  }
}

/* Page notre enseigne */
.enseigne h2, .enseigne h4 {
  font-family: "boterastencil", Verdana, Geneva, Tahoma, sans-serif;
  color: #292929;
}
.enseigne h3 {
  font-family: "canvas", "Courier New", Courier, monospace;
}
.enseigne h4 {
  font-size: 1.8rem;
}
.enseigne .resume p:first-child {
  font-family: "canvas", "Courier New", Courier, monospace;
  text-align: center;
}
.enseigne .resume .siege {
  padding: 0 3rem 2rem;
}
.enseigne .resume .shops {
  padding: 0 3rem 2rem;
  display: flex;
  flex-direction: row;
}
@media (max-width: 992px) {
  .enseigne .resume .shops {
    flex-direction: column-reverse;
  }
}
.enseigne .resume .shops .shop-one, .enseigne .resume .shops .shop-two {
  width: 45%;
}
.enseigne .resume .overlay {
  background: transparent;
  position: relative;
}
.enseigne .resume .overlay iframe {
  display: block;
  width: 100%;
}
.enseigne .resume small {
  display: block;
}

@media (max-width: 767px) {
  .liste {
    margin: 0 auto;
    width: 90%;
    padding: 1rem 10px 5rem;
  }
}

/**/
/*MENU RESEAUX SOCIAUX & CONTACT - HEADER*/
#socials {
  float: right;
}
@media (max-width: 767px) {
  #socials ul {
    padding: 0px 10px 20px 10px;
  }
}
#socials ul {
  padding: 5px 20px;
}
@media (max-width: 767px) {
  #socials ul li {
    margin-left: 5px;
  }
}
#socials ul li {
  display: inline-block;
  margin-left: 15px;
}
@media (max-width: 767px) {
  #socials ul li a #facebook {
    transform: scale(0.8);
  }
}
#socials ul li a #facebook {
  transition: transform ease 0.2s;
}
#socials ul li a #facebook:hover {
  -khtml-transform: rotate(20deg) scale(1.1);
  transform: rotate(20deg) scale(1.1);
}
@media (max-width: 767px) {
  #socials ul li a #mail-contact {
    transform: scale(0.8);
  }
}
#socials ul li a #mail-contact {
  transition: transform ease 0.2s;
}
#socials ul li a #mail-contact:hover {
  -khtml-transform: rotate(-20deg) scale(1.1);
  transform: rotate(-20deg) scale(1.1);
}

/**/
/*lOGO (text for now) & header*/
header {
  padding-top: 10px;
}

#header-title {
  text-align: left;
  margin-left: 20px;
}

/**/
/*MENU PRINCIPAL*/
section {
  position: relative;
  padding: 0 3rem;
  clear: both;
}
@media (max-width: 500px) {
  section {
    padding: none;
  }
}
section ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
section ul .slider {
  order: 1;
  position: relative;
  height: 400px;
  margin-bottom: 3rem;
}
@media (max-width: 767px) {
  section ul .slider {
    height: auto;
    margin-bottom: 2rem;
  }
}
@media (max-width: 500px) {
  section ul .slider {
    margin-bottom: 4rem;
  }
}
section ul .slider figure {
  width: 400vw;
  margin: 0;
  text-align: left;
}
@keyframes sliding {
  0% {
    -khtml-transform: translateX(37.5%);
    transform: translateX(37.5%);
  }
  20% {
    -khtml-transform: translateX(37.5%);
    transform: translateX(37.5%);
  }
  25% {
    -khtml-transform: translateX(12.5%);
    transform: translateX(12.5%);
  }
  45% {
    -khtml-transform: translateX(12.5%);
    transform: translateX(12.5%);
  }
  50% {
    -khtml-transform: translateX(-12.5%);
    transform: translateX(-12.5%);
  }
  70% {
    -khtml-transform: translateX(-12.5%);
    transform: translateX(-12.5%);
  }
  75% {
    -khtml-transform: translateX(12.5%);
    transform: translateX(12.5%);
  }
  95% {
    -khtml-transform: translateX(12.5%);
    transform: translateX(12.5%);
  }
  100% {
    -khtml-transform: translateX(37.5%);
    transform: translateX(37.5%);
  }
}
section ul .slider figure {
  animation: 20s sliding infinite;
}
section ul .slider figure .slide {
  width: 100vw;
  position: relative;
  display: inline-block;
  height: auto;
  text-align: center;
}
section ul .slider figure .slide h2 {
  position: absolute;
  z-index: 2;
}
@media (max-width: 500px) {
  section ul .slider figure .slide h2 {
    font-size: 0.5rem;
    line-height: 0.7rem;
  }
}
section ul .slider figure .slide img {
  position: relative;
  z-index: 1;
  width: auto;
}
@media (max-width: 767px) {
  section ul .slider figure .slide img {
    max-width: 100%;
    max-height: 300px;
  }
}
@media (max-width: 500px) {
  section ul .slider figure .slide img {
    width: 100%;
    height: auto;
    max-height: 200px;
  }
}
@media (max-width: 767px) {
  section ul .slider figure #products-category-1 h2 {
    font-size: 1.4rem;
    right: 0;
    text-align: center;
  }
}
@media (max-width: 500px) {
  section ul .slider figure #products-category-1 h2 {
    right: 0;
    font-size: 1.1rem;
  }
}
section ul .slider figure #products-category-1 h2 {
  font-family: "canvas", "Courier New", Courier, monospace;
  text-transform: uppercase;
  font-size: 4rem;
  color: rgb(255, 255, 255);
  top: 25px;
  right: 25%;
  -webkit-text-shadow: -2px 2px 0 #f1ba7b;
  -khtml-text-shadow: -2px 2px 0 #f1ba7b;
  -moz-text-shadow: -2px 2px 0 #f1ba7b;
  -ms-text-shadow: -2px 2px 0 #f1ba7b;
  -o-text-shadow: -2px 2px 0 #f1ba7b;
  text-shadow: -2px 2px 0 #f1ba7b;
}
@media (max-width: 767px) {
  section ul .slider figure #products-category-2 h2 {
    font-size: 1rem;
    right: 0;
    text-align: center;
  }
}
@media (max-width: 500px) {
  section ul .slider figure #products-category-2 h2 {
    right: 0;
    font-size: 2rem;
    line-height: 2.1rem;
  }
}
section ul .slider figure #products-category-2 h2 {
  font-family: "glamormedium", Georgia, "Times New Roman", Times, serif;
  font-size: 7rem;
  color: rgb(255, 255, 255);
  top: 25px;
  right: 15%;
  -webkit-text-shadow: -2px 2px 0 #f2df88;
  -khtml-text-shadow: -2px 2px 0 #f2df88;
  -moz-text-shadow: -2px 2px 0 #f2df88;
  -ms-text-shadow: -2px 2px 0 #f2df88;
  -o-text-shadow: -2px 2px 0 #f2df88;
  text-shadow: -2px 2px 0 #f2df88;
}
@media (max-width: 767px) {
  section ul .slider figure #products-category-3 h2 {
    font-size: 1rem;
    right: 0;
    text-align: center;
  }
}
@media (max-width: 500px) {
  section ul .slider figure #products-category-3 h2 {
    right: 0;
    font-size: 2rem;
  }
}
section ul .slider figure #products-category-3 h2 {
  font-family: "boterastencil", Verdana, Geneva, Tahoma, sans-serif;
  font-size: 8rem;
  color: rgb(255, 255, 255);
  top: 5px;
  right: 20%;
  -webkit-text-shadow: -2px 2px 0 #eaa868;
  -khtml-text-shadow: -2px 2px 0 #eaa868;
  -moz-text-shadow: -2px 2px 0 #eaa868;
  -ms-text-shadow: -2px 2px 0 #eaa868;
  -o-text-shadow: -2px 2px 0 #eaa868;
  text-shadow: -2px 2px 0 #eaa868;
}
section ul li {
  order: 2;
  margin-right: 0.2rem;
  margin-bottom: 1rem;
}
section ul li:hover {
  cursor: pointer;
}
section ul li ul {
  overflow: inherit;
  cursor: default;
}
@media (max-width: 767px) {
  section ul li ul {
    flex-direction: column;
  }
}
@media (max-width: 767px) {
  section ul li ul .std-links {
    text-align: center;
  }
}
section ul li ul .links {
  height: 2rem;
  line-height: 2rem;
}
section ul li ul .links a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  display: block;
  height: 2rem;
  text-transform: uppercase;
  padding-top: 1px;
}
section ul li ul .links .cta {
  color: #fafafa;
  position: relative;
  padding: 0px 15px;
}
section ul li ul .links .cta:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 24px;
  background: rgba(241, 186, 123, 0);
  width: 2rem;
  height: 2rem;
  transition: all 0.3s ease;
  z-index: -1;
}
section ul li ul .links .cta:after {
  content: "";
  display: block;
  height: 2px;
  margin: 0 auto;
  background: #f1ba7b;
}
section ul li ul .links .cta:hover span {
  display: block;
  height: auto;
  color: #fff;
}
section ul li ul .links .cta:hover:before {
  width: 100%;
  background: #f1ba7b;
}
section ul li ul .links .cta:hover:after {
  visibility: hidden;
}
section ul li ul .links .cta:hover:active {
  transform: scale(0.96);
}
section ul li ul #link-category-1 a:after {
  width: 0%;
}
section ul li ul #link-category-2 a:after {
  width: 0%;
}
section ul li ul #link-category-3 a:after {
  width: 0%;
}
section ul .btn-downloads-colors {
  order: 3;
}

/**/
/*FOOTER*/
footer {
  width: 100%;
}
footer #footer-menu {
  margin-bottom: -3px;
  position: relative;
  z-index: 1;
  height: 6rem;
  /*background: linear-gradient(rgba(255, 129, 71, 0), #6cc4ff); //rgb(255, 129, 71));*/
}
footer #footer-menu img {
  position: absolute;
  bottom: 0;
  margin: 0;
  padding: 0;
  max-height: 7rem;
}
@media (max-width: 992px) {
  footer #footer-menu img {
    height: 6rem;
    max-height: 5rem;
  }
}
footer #footer-menu #hcm {
  right: 2rem;
}
@media (max-width: 500px) {
  footer #footer-menu #hcm {
    height: 4.2rem;
    right: 0.5rem;
  }
}
footer #footer-menu #mm {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  top: 0rem;
  right: 13rem;
  text-decoration: none;
  font-size: 0.8rem;
}
@media (max-width: 992px) {
  footer #footer-menu #mm {
    top: -1rem;
  }
}
@media (max-width: 767px) {
  footer #footer-menu #mm {
    top: -1rem;
    right: 10rem;
  }
}
@media (max-width: 500px) {
  footer #footer-menu #mm {
    top: 1rem;
    right: 5rem;
  }
}
footer #footer-menu #mm {
  transition: all 0.3s ease;
}
footer #footer-menu #mm img {
  height: 2em;
  display: block;
  position: relative;
  top: -1.3rem;
  left: 5rem;
}
footer #footer-menu #mm span {
  display: block;
  position: relative;
  top: 1.6rem;
  color: #f1ba7b;
  background-color: #0D5177;
  padding: 0.3rem 1rem;
  border-radius: 1rem;
  -ms-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.22);
  -o-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.22);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.22);
  transition: transform ease 0.2s;
}
footer #footer-menu #mm:hover {
  transform: scale(1.2) translateY(-5px);
}
footer #footer-menu #mm:hover span {
  text-decoration: underline;
}
footer #footer-menu #mmc {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  top: -1rem;
  right: 2rem;
  text-decoration: none;
  font-size: 0.8rem;
}
@media (max-width: 992px) {
  footer #footer-menu #mmc {
    top: -3rem;
    right: 1rem;
  }
}
@media (max-width: 767px) {
  footer #footer-menu #mmc {
    top: -3rem;
  }
}
@media (max-width: 500px) {
  footer #footer-menu #mmc {
    top: -2rem;
    right: 0rem;
  }
}
footer #footer-menu #mmc {
  transition: all 0.3s ease;
}
footer #footer-menu #mmc img {
  height: 2em;
  display: block;
  position: relative;
  top: -1.3rem;
  left: 5rem;
}
footer #footer-menu #mmc span {
  display: block;
  position: relative;
  top: 1.6rem;
  color: #f1ba7b;
  background-color: #0D5177;
  padding: 0.3rem 1rem;
  border-radius: 1rem;
  -ms-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.22);
  -o-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.22);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.22);
  transition: transform ease 0.2s;
}
footer #footer-menu #mmc:hover {
  transform: scale(1.2) translateY(-5px);
}
footer #footer-menu #mmc:hover span {
  text-decoration: underline;
}
footer #footer-menu #am {
  right: 16rem;
}
@media (max-width: 992px) {
  footer #footer-menu #am {
    right: 11rem;
  }
}
@media (max-width: 500px) {
  footer #footer-menu #am {
    height: 4rem;
    right: 8rem;
  }
}
footer #footer-menu #clock {
  height: 5.6rem;
  left: 20rem;
}
@media (max-width: 767px) {
  footer #footer-menu #clock {
    left: 10rem;
  }
}
@media (max-width: 500px) {
  footer #footer-menu #clock {
    left: 9rem;
  }
}
footer #footer-menu .boat {
  position: absolute;
}
footer #footer-menu .bleft {
  top: 0rem;
  height: 2.2rem;
  left: 25rem;
}
footer #footer-menu .bmid {
  top: 0.5rem;
  height: 3rem;
  left: 40rem;
}
footer #footer-menu .bright {
  top: -0.5rem;
  height: 1.8rem;
  right: 40rem;
}
@media (max-width: 500px) {
  footer #footer-menu #recettes {
    left: 0.5rem;
  }
}
footer #footer-menu #recettes {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  left: 2rem;
  bottom: -20px;
  transition: all 0.3s ease;
}
footer #footer-menu #recettes img {
  height: 7em;
}
footer #footer-menu #recettes #markpage {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 6px;
  height: 4px;
  background: red;
}
footer #footer-menu #recettes:hover {
  transform: scale(1.1) translateY(-20px) rotateZ(10deg);
}
footer #footer-menu #pfs {
  right: 26rem;
  height: 1.15rem;
}
footer #footer-menu #pff {
  right: 14rem;
  height: 1.15rem;
}
@media (max-width: 992px) {
  footer #footer-menu #pff {
    right: 11rem;
  }
}
footer #footer-menu #pfb {
  right: 16rem;
  height: 1.15rem;
}
@media (max-width: 992px) {
  footer #footer-menu #pfb {
    right: 18rem;
  }
}
footer #footer-menu #pfsurf {
  left: 17rem;
  height: 1.15rem;
}
@media (max-width: 767px) {
  footer #footer-menu #pfsurf {
    left: 14rem;
    height: 1rem;
  }
}
footer #footer-menu #pfv {
  right: 35rem;
  height: 1.15rem;
}
@media (max-width: 767px) {
  footer #footer-menu #pfv {
    right: 20rem;
    height: 1rem;
  }
}
@media (max-width: 1200px) {
  footer #footer-menu .bleft, footer #footer-menu .bright {
    display: none;
  }
  footer #footer-menu .bmid {
    left: 27rem;
  }
}
@media (max-width: 992px) {
  footer #footer-menu .bleft, footer #footer-menu .bmid, footer #footer-menu .bright {
    display: none;
  }
}
footer .remblai {
  position: relative;
  z-index: 2;
  border-top: 2px solid #eaa868;
  padding: 5px 0;
  background-color: #f1ba7b;
}
footer .remblai p {
  color: #943d0c;
  font-size: 0.6rem;
  font-weight: normal;
  width: 100%;
  text-align: center;
  margin: 0;
}
footer .remblai p a {
  text-decoration: none;
  color: #943d0c;
}
footer .remblai p a:hover {
  text-decoration: underline;
}
footer #upBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 0px;
  border: none;
  outline: none;
  width: 40px;
  height: 54px;
  /*background-color: #ff6810;*/
  background: url("../img/hot-air-balloon.png") transparent;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
  opacity: 0.7;
  transition: opacity ease 0.35s;
}
footer #upBtn:hover {
  /*background-color: rgb(54, 163, 20);*/
  opacity: 1;
}

/**/
/**** GLOBALS END ****/
/**** HOMEPAGE ****/
#homepage {
  height: 100vh;
  /*MENU RESEAUX SOCIAUX & CONTACT - HEADER*/
}
#homepage header {
  position: fixed;
  top: 0px;
  z-index: 19;
}
@media (max-width: 767px) {
  #homepage header {
    position: static;
  }
}
@media (max-width: 767px) {
  #homepage header #socials ul {
    padding: 0px 10px 5px 10px;
  }
}
#homepage {
  /* Menu principal */
}
#homepage section {
  position: relative;
  z-index: 9;
  top: 6rem;
  clear: both;
  padding: 0px;
  height: calc(100% - 17rem);
}
@media (max-width: 767px) {
  #homepage section {
    position: static;
    top: 0px;
    height: auto;
    margin-bottom: 7rem;
  }
}
#homepage section > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 100%;
  overflow: hidden;
}
@media (max-width: 767px) {
  #homepage section > ul {
    height: auto;
  }
}
#homepage section > ul .slider {
  order: 1;
  position: relative;
  z-index: 1;
  height: calc(100% - 8rem);
  margin-bottom: 2rem;
}
@media (max-width: 767px) {
  #homepage section > ul .slider {
    height: auto;
    min-height: 200px;
    margin-bottom: 2rem;
  }
}
#homepage section > ul .slider figure {
  width: 400vw;
  height: 100%;
  margin: 0px !important;
  text-align: left;
}
@keyframes sliding {
  0% {
    -khtml-transform: translateX(37.5%);
    transform: translateX(37.5%);
  }
  20% {
    -khtml-transform: translateX(37.5%);
    transform: translateX(37.5%);
  }
  25% {
    -khtml-transform: translateX(12.5%);
    transform: translateX(12.5%);
  }
  45% {
    -khtml-transform: translateX(12.5%);
    transform: translateX(12.5%);
  }
  50% {
    -khtml-transform: translateX(-12.5%);
    transform: translateX(-12.5%);
  }
  70% {
    -khtml-transform: translateX(-12.5%);
    transform: translateX(-12.5%);
  }
  75% {
    -khtml-transform: translateX(12.5%);
    transform: translateX(12.5%);
  }
  95% {
    -khtml-transform: translateX(12.5%);
    transform: translateX(12.5%);
  }
  100% {
    -khtml-transform: translateX(37.5%);
    transform: translateX(37.5%);
  }
}
#homepage section > ul .slider figure {
  animation: 20s sliding infinite;
}
#homepage section > ul .slider figure .slide {
  width: 100vw;
  position: relative;
  display: inline-block;
  height: 100%;
}
#homepage section > ul .slider figure .slide h2 {
  position: absolute;
  z-index: 2;
}
#homepage section > ul .slider figure .slide img {
  position: relative;
  z-index: 1;
  width: auto;
  height: 100%;
}
#homepage section > ul .slider figure #products-category-1 h2 {
  font-family: "canvas", "Courier New", Courier, monospace;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  right: 17%;
  font-size: 5vw;
  margin: 8% 0px 0px;
  -webkit-text-shadow: -2px 2px 0 #f1ba7b;
  -khtml-text-shadow: -2px 2px 0 #f1ba7b;
  -moz-text-shadow: -2px 2px 0 #f1ba7b;
  -ms-text-shadow: -2px 2px 0 #f1ba7b;
  -o-text-shadow: -2px 2px 0 #f1ba7b;
  text-shadow: -2px 2px 0 #f1ba7b;
}
#homepage section > ul .slider figure #products-category-2 h2 {
  font-family: "glamormedium", Georgia, "Times New Roman", Times, serif;
  color: rgb(255, 255, 255);
  right: 8%;
  font-size: 8vw;
  margin: 5% 0px 0px;
  -webkit-text-shadow: -2px 2px 0 #f2df88;
  -khtml-text-shadow: -2px 2px 0 #f2df88;
  -moz-text-shadow: -2px 2px 0 #f2df88;
  -ms-text-shadow: -2px 2px 0 #f2df88;
  -o-text-shadow: -2px 2px 0 #f2df88;
  text-shadow: -2px 2px 0 #f2df88;
}
#homepage section > ul .slider figure #products-category-3 h2 {
  font-family: "boterastencil", Verdana, Geneva, Tahoma, sans-serif;
  color: rgb(255, 255, 255);
  right: 11%;
  font-size: 8vw;
  margin: 5% 0px 0px;
  -webkit-text-shadow: -2px 2px 0 #eaa868;
  -khtml-text-shadow: -2px 2px 0 #eaa868;
  -moz-text-shadow: -2px 2px 0 #eaa868;
  -ms-text-shadow: -2px 2px 0 #eaa868;
  -o-text-shadow: -2px 2px 0 #eaa868;
  text-shadow: -2px 2px 0 #eaa868;
}
#homepage section > ul > li {
  order: 2;
  z-index: 2;
  margin-right: 0.2rem;
  margin-bottom: 1rem;
}
@media (max-width: 767px) {
  #homepage section > ul > li {
    margin-bottom: 7rem;
  }
}
#homepage section > ul > li:hover {
  cursor: pointer;
}
@media (max-width: 767px) {
  #homepage section > ul > li ul {
    flex-direction: column;
  }
}
@media (max-width: 767px) {
  #homepage section > ul > li ul .std-links {
    text-align: center;
  }
}
#homepage section > ul > li ul .links {
  height: 2rem;
  line-height: 2rem;
}
#homepage section > ul > li ul .links a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  display: block;
  height: 2rem;
  text-transform: uppercase;
  padding-top: 1px;
}
#homepage section > ul > li ul .links .cta {
  color: #fafafa;
  position: relative;
  padding: 0px 15px;
}
#homepage section > ul > li ul .links .cta:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 24px;
  background: rgba(241, 186, 123, 0);
  width: 2rem;
  height: 2rem;
  transition: all 0.3s ease;
  z-index: -1;
}
#homepage section > ul > li ul .links .cta:after {
  content: "";
  display: block;
  height: 2px;
  margin: 0 auto;
  background: #f1ba7b;
}
#homepage section > ul > li ul .links .cta:hover span {
  display: block;
  height: auto;
  color: #fff;
}
#homepage section > ul > li ul .links .cta:hover:before {
  width: 100%;
  background: #f1ba7b;
}
#homepage section > ul > li ul .links .cta:hover:after {
  visibility: hidden;
}
#homepage section > ul > li ul .links .cta:hover:active {
  transform: scale(0.96);
}
#homepage section > ul > li ul #link-category-1 a {
  color: #f1ba7b;
}
@keyframes btn1-menu-anim {
  20% {
    color: #f1ba7b;
  }
  22% {
    color: #fafafa;
  }
  98% {
    color: #fafafa;
  }
  100% {
    color: #f1ba7b;
  }
}
#homepage section > ul > li ul #link-category-1 a {
  animation: 20s btn1-menu-anim infinite;
}
#homepage section > ul > li ul #link-category-1 a:after {
  width: 55%;
  animation: 20s line-btn1-menu-anim infinite;
}
@keyframes line-btn1-menu-anim {
  20% {
    width: 55%;
  }
  22% {
    width: 0%;
  }
  98% {
    width: 0%;
  }
  100% {
    width: 55%;
  }
}
@keyframes btn2-menu-anim {
  23% {
    color: #fafafa;
  }
  25% {
    color: #f1ba7b;
  }
  45% {
    color: #f1ba7b;
  }
  47% {
    color: #fafafa;
  }
  73% {
    color: #fafafa;
  }
  75% {
    color: #f1ba7b;
  }
  95% {
    color: #f1ba7b;
  }
  97% {
    color: #fafafa;
  }
}
#homepage section > ul > li ul #link-category-2 a {
  animation: 20s btn2-menu-anim infinite;
}
#homepage section > ul > li ul #link-category-2 a:after {
  width: 0%;
  animation: 20s line-btn2-menu-anim infinite;
}
@keyframes line-btn2-menu-anim {
  23% {
    width: 0%;
  }
  25% {
    width: 55%;
  }
  45% {
    width: 55%;
  }
  47% {
    width: 0%;
  }
  73% {
    width: 0%;
  }
  75% {
    width: 55%;
  }
  95% {
    width: 55%;
  }
  97% {
    width: 0%;
  }
}
@keyframes btn3-menu-anim {
  48% {
    color: #fafafa;
  }
  50% {
    color: #f1ba7b;
  }
  70% {
    color: #f1ba7b;
  }
  72% {
    color: #fafafa;
  }
}
#homepage section > ul > li ul #link-category-3 a {
  animation: 20s btn3-menu-anim infinite;
}
#homepage section > ul > li ul #link-category-3 a:after {
  width: 0%;
  animation: 20s line-btn3-menu-anim infinite;
}
@keyframes line-btn3-menu-anim {
  48% {
    width: 0%;
  }
  50% {
    width: 55%;
  }
  70% {
    width: 55%;
  }
  72% {
    width: 0%;
  }
}
#homepage section > ul .btn-downloads-colors {
  order: 3;
}
@media (max-width: 767px) {
  #homepage section > ul .btn-downloads-colors li {
    margin-bottom: 1rem;
  }
}
#homepage {
  /**/
  /*FOOTER*/
}
#homepage footer {
  display: block;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 3;
}
#homepage {
  /**/
}

/**** END HOMEPAGE ****/
/**** PAGE RECETTES ****/
#recettes .page-bckgrd1 {
  width: 80%;
  max-width: 1200px;
  background-color: #a4d5ed;
  margin: 0rem auto 2rem;
  transform: rotateZ(-2deg);
}
#recettes .page-bckgrd1 .page-bckgrd2 {
  width: 100%;
  max-width: 1200px;
  background-color: #efefef;
  margin: 0px;
  transform: rotateZ(-1deg);
}
#recettes .page-bckgrd1 .page-bckgrd2 .page {
  width: 100%;
  margin: 0px;
  transform: rotateZ(3deg);
}
#recettes .page-bckgrd1 .page-bckgrd2 .page .recette-title h2 {
  font-family: "dancingscript", Georgia, "Times New Roman", Times, serif;
  font-size: 3.5em;
  top: 3rem;
  right: 3rem;
  width: 90%;
  text-align: center;
  line-height: 3.5rem;
  color: rgb(230, 149, 0);
}
#recettes .page-bckgrd1 .page-bckgrd2 .page .recettes-list {
  display: flex;
  justify-content: space-around;
  flex-flow: row wrap;
}
#recettes .page-bckgrd1 .page-bckgrd2 .page .recettes-list > li {
  width: 46%;
  flex-flow: row nowrap;
}
@media (max-width: 680px) {
  #recettes .page-bckgrd1 .page-bckgrd2 .page .recettes-list {
    display: block;
  }
  #recettes .page-bckgrd1 .page-bckgrd2 .page .recettes-list li {
    width: 90%;
    margin: 0 0 25px 20px;
  }
}
#recettes .page-bckgrd1 .page-bckgrd2 .page ul {
  margin: 3rem 0rem;
}
#recettes .page-bckgrd1 .page-bckgrd2 .page ul li {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 0.5rem 0.5rem 0rem;
  margin-bottom: 2rem;
}
#recettes .page-bckgrd1 .page-bckgrd2 .page ul li img {
  width: 100px;
  height: auto;
  border: 1px solid lightgrey;
  margin-right: 1rem;
}
#recettes .page-bckgrd1 .page-bckgrd2 .page ul li .infos {
  display: flex;
  flex-direction: column;
}
#recettes .page-bckgrd1 .page-bckgrd2 .page ul li .infos span {
  font-size: 0.8rem;
  font-weight: 700;
}
#recettes .page-bckgrd1 .page-bckgrd2 .page ul li .infos a {
  font-size: 1.4rem;
  color: #fafafa;
  text-decoration: none;
  overflow-wrap: break-word;
}
#recettes .page-bckgrd1 .page-bckgrd2 .page ul li .infos a:hover {
  color: #eaa868;
  text-decoration: underline;
}
@media (max-width: 767px) {
  #recettes .page-bckgrd1 .page-bckgrd2 .page ul li .infos p {
    padding: 0px;
  }
}
#recettes .page-bckgrd1 .page-bckgrd2 .page .separator {
  text-align: center;
}
#recettes .page-bckgrd1 .page-bckgrd2 .page .separator img {
  max-height: 50px;
  width: auto;
}
#recettes {
  /*FOOTER*/
}
#recettes footer {
  display: block;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 3;
}
#recettes {
  /**/
}

/**** END PAGE RECETTES ****/
/**** PAGE RECETTE ****/
#recette img.illu {
  display: inline;
  border: 15px solid #fff;
  width: 45%;
  max-width: 360px;
  margin-left: -30px;
  margin-top: -10px;
  margin-bottom: 5rem;
  transform: rotateZ(-7deg);
  box-shadow: 0px 10px 13px -7px #000000, 0px -4px 16px -1px rgba(0, 0, 0, 0);
}
@media (max-width: 767px) {
  #recette img.illu {
    margin-bottom: 2rem;
  }
}
#recette h2, #recette .date {
  position: absolute;
  margin: 0 auto;
}
#recette h2 {
  font-family: "dancingscript", Georgia, "Times New Roman", Times, serif;
  letter-spacing: -0.4;
  color: rgb(230, 149, 0);
  top: 3rem;
  font-size: 3.5em;
  width: 90%;
  text-align: center;
  line-height: 3.5rem;
}
#recette .date {
  top: 1rem;
  right: 3rem;
}
#recette .infos {
  float: right;
  width: 45%;
  margin-top: 160px;
}
#recette .infos h3 {
  font-family: "dancingscript", Georgia, "Times New Roman", Times, serif;
  color: rgb(3, 95, 64);
  padding-right: 0px;
}
@media (max-width: 767px) {
  #recette .infos {
    margin-top: 0px;
    width: 90%;
    margin-left: 2rem;
  }
}
#recette .ingredients h3, #recette .steps h3 {
  font-family: "dancingscript", Georgia, "Times New Roman", Times, serif;
  color: rgb(3, 95, 64);
  padding-right: 0px;
}
#recette .ingredients, #recette .steps {
  padding: 0 2rem;
  margin-bottom: 4rem;
}
#recette .ingredients ul {
  list-style-type: square;
  margin-left: 2rem;
}
@media (max-width: 767px) {
  #recette .ingredients {
    margin-top: 13rem;
  }
}
#recette .steps p b {
  font-size: 1.8rem;
  font-family: "dancingscript", Georgia, "Times New Roman", Times, serif;
  color: rgb(3, 95, 64);
}
#recette .separator {
  text-align: center;
}
#recette .separator img {
  max-height: 50px;
  width: auto;
}

/**** END PAGE RECETTE ****/
/**** PAGE CONDITIONNEMENTS & PAGE PRODUITS - LISTE ****/
.txt-menu1 {
  font-family: "canvas", "Courier New", Courier, monospace;
}

.txt-menu2 {
  font-family: "glamormedium", Georgia, "Times New Roman", Times, serif;
}

.txt-menu3 {
  font-family: "boterastencil", Verdana, Geneva, Tahoma, sans-serif;
}

#products #list_products .category-title-illustration, #products #list_conditionnements .category-title-illustration {
  width: 100%;
  height: 20%;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}
#products #list_products .category-title-illustration h2, #products #list_conditionnements .category-title-illustration h2 {
  text-shadow: -3px 3px 3px rgb(179, 95, 1);
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 5rem;
}
#products #list_products .category-title-illustration .txt-menu1, #products #list_conditionnements .category-title-illustration .txt-menu1 {
  font-size: 5rem;
  color: #fff;
}
@media (max-width: 767px) {
  #products #list_products .category-title-illustration .txt-menu1, #products #list_conditionnements .category-title-illustration .txt-menu1 {
    font-size: 3rem;
  }
}
@media (max-width: 500px) {
  #products #list_products .category-title-illustration .txt-menu1, #products #list_conditionnements .category-title-illustration .txt-menu1 {
    font-size: 2.8rem;
  }
}
#products #list_products .category-title-illustration .txt-menu2, #products #list_conditionnements .category-title-illustration .txt-menu2 {
  font-size: 6rem;
  line-height: 6rem;
  color: #fff;
}
@media (max-width: 767px) {
  #products #list_products .category-title-illustration .txt-menu2, #products #list_conditionnements .category-title-illustration .txt-menu2 {
    font-size: 6rem;
  }
}
@media (max-width: 500px) {
  #products #list_products .category-title-illustration .txt-menu2, #products #list_conditionnements .category-title-illustration .txt-menu2 {
    font-size: 4rem;
  }
}
#products #list_products .category-title-illustration .txt-menu3, #products #list_conditionnements .category-title-illustration .txt-menu3 {
  font-size: 6rem;
  color: #fff;
}
@media (max-width: 767px) {
  #products #list_products .category-title-illustration .txt-menu3, #products #list_conditionnements .category-title-illustration .txt-menu3 {
    font-size: 5rem;
  }
}
@media (max-width: 500px) {
  #products #list_products .category-title-illustration .txt-menu3, #products #list_conditionnements .category-title-illustration .txt-menu3 {
    font-size: 4rem;
  }
}
#products #list_products .img-menu1, #products #list_conditionnements .img-menu1 {
  background-image: url("../img/tantquilyauradesepices_2.png");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: 10% 0;
}
#products #list_products .img-menu2, #products #list_conditionnements .img-menu2 {
  background-image: url("../img/saveurs-du-monde-thes-infusions_5.png");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: 10% 0;
}
#products #list_products .img-menu3, #products #list_conditionnements .img-menu3 {
  background-image: url("../img/saveurs-du-monde-accessoires_2.png");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: 10% 0;
}
#products #list_products .page #page-menu, #products #list_conditionnements .page #page-menu {
  margin-bottom: 1rem;
  display: flex;
  flex-flow: row nowrap;
}
#products #list_products .page #page-menu .others-categories, #products #list_products .page #page-menu .special, #products #list_conditionnements .page #page-menu .others-categories, #products #list_conditionnements .page #page-menu .special {
  display: inline-block;
}
#products #list_products .page #page-menu .others-categories li, #products #list_products .page #page-menu .special li, #products #list_conditionnements .page #page-menu .others-categories li, #products #list_conditionnements .page #page-menu .special li {
  display: inline-block;
  background-image: url("//tantquilyauradesepices.fr/img/coup-pinceau-gris.png");
  background-size: 100% 100%;
}
#products #list_products .page #page-menu .others-categories li:hover, #products #list_products .page #page-menu .special li:hover, #products #list_conditionnements .page #page-menu .others-categories li:hover, #products #list_conditionnements .page #page-menu .special li:hover {
  background-image: url("//tantquilyauradesepices.fr/img/coup-pinceau.png");
  background-size: 100% 100%;
}
#products #list_products .page #page-menu .others-categories li:hover > a, #products #list_products .page #page-menu .special li:hover > a, #products #list_conditionnements .page #page-menu .others-categories li:hover > a, #products #list_conditionnements .page #page-menu .special li:hover > a {
  color: rgb(230, 149, 0);
}
#products #list_products .page #page-menu .others-categories li a, #products #list_products .page #page-menu .special li a, #products #list_conditionnements .page #page-menu .others-categories li a, #products #list_conditionnements .page #page-menu .special li a {
  font-family: "canvas", "Courier New", Courier, monospace;
  color: #292929;
  text-decoration: none;
}
#products #list_products .page #page-menu .others-categories, #products #list_conditionnements .page #page-menu .others-categories {
  flex-grow: 2;
}
#products #list_products .page #page-menu .others-categories li, #products #list_conditionnements .page #page-menu .others-categories li {
  margin-bottom: 0.4rem;
  margin-right: 0.2rem;
  padding-right: 0.8rem;
  padding-left: 0.8rem;
  line-height: 2rem;
  /*border-radius: 1.2rem;*/
}
#products #list_products .page #page-menu .special, #products #list_conditionnements .page #page-menu .special {
  margin-left: 1rem;
}
@media (max-width: 767px) {
  #products #list_products .page #page-menu .special, #products #list_conditionnements .page #page-menu .special {
    margin-left: 0;
  }
}
#products #list_products .page #page-menu .special li, #products #list_conditionnements .page #page-menu .special li {
  padding-right: 2rem;
  padding-left: 2rem;
  line-height: 2rem;
}
#products #list_products .page .page-title, #products #list_conditionnements .page .page-title {
  margin-top: 2rem;
  margin-bottom: 4rem;
  text-align: center;
  font-size: 1.6rem;
}
#products #list_products .page .page-title h3, #products #list_conditionnements .page .page-title h3 {
  display: inline-block;
}
#products #list_products .page .page-title .txt-tea, #products #list_conditionnements .page .page-title .txt-tea {
  font-family: "glamormedium", Georgia, "Times New Roman", Times, serif;
  font-size: 3.8rem;
}
@media (max-width: 767px) {
  #products #list_products .page .page-title .txt-tea, #products #list_conditionnements .page .page-title .txt-tea {
    font-size: 2rem;
  }
}
@media (max-width: 500px) {
  #products #list_products .page .page-title .txt-tea, #products #list_conditionnements .page .page-title .txt-tea {
    font-size: 1rem;
  }
}
#products #list_products .page .prices-banner, #products #list_conditionnements .page .prices-banner {
  display: inline-block;
  width: 100%;
  height: 3.9rem;
  margin-top: -5rem;
  margin-bottom: 1rem;
}
#products #list_products .page .prices-banner .prices, #products #list_conditionnements .page .prices-banner .prices {
  float: right;
  margin-right: -3rem;
  background-color: #0D5177;
  border-bottom: 2px solid #142d51;
}
#products #list_products .page .prices-banner .prices .triangle, #products #list_conditionnements .page .prices-banner .prices .triangle {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 2rem solid transparent;
  border-bottom: 1.9rem solid transparent;
  border-left: 1.4rem solid #fff;
  margin-right: 1.9rem;
}
#products #list_products .page .prices-banner .prices p, #products #list_conditionnements .page .prices-banner .prices p {
  color: #fff;
  display: inline-block;
  margin-right: 2rem;
  font-size: 1.1rem;
  font-weight: 400;
  vertical-align: top;
}
#products #list_products .page .prices-banner .prices p span, #products #list_conditionnements .page .prices-banner .prices p span {
  font-size: 1.4rem;
  font-weight: 900;
}
@media (max-width: 767px) {
  #products #list_products .page .prices-banner, #products #list_conditionnements .page .prices-banner {
    margin-top: 0px;
  }
}
#products #list_products .page .illu, #products #list_conditionnements .page .illu {
  display: block;
}
#products #list_products .page .illu:hover, #products #list_conditionnements .page .illu:hover {
  background-color: #fff;
}
#products #list_products .page .illu img, #products #list_conditionnements .page .illu img {
  max-width: 100%;
  max-height: 350px;
}
@media (max-width: 992px) {
  #products #list_products .page .illu img, #products #list_conditionnements .page .illu img {
    max-height: 280px;
  }
}
@media (max-width: 767px) {
  #products #list_products .page .illu img, #products #list_conditionnements .page .illu img {
    max-height: 240px;
  }
}
#products #list_products .page .illu .illu-container, #products #list_conditionnements .page .illu .illu-container {
  padding: 1rem 0rem;
}
#products #list_products .page .gauche .illu-container, #products #list_conditionnements .page .gauche .illu-container {
  text-align: left;
}
@media (max-width: 767px) {
  #products #list_products .page .gauche .illu-container, #products #list_conditionnements .page .gauche .illu-container {
    text-align: center;
  }
}
#products #list_products .page .droite .illu-container, #products #list_conditionnements .page .droite .illu-container {
  text-align: right;
}
@media (max-width: 767px) {
  #products #list_products .page .droite .illu-container, #products #list_conditionnements .page .droite .illu-container {
    text-align: center;
  }
}
#products #list_products .page .list-description, #products #list_conditionnements .page .list-description {
  padding: 1em 3em;
}
#products #list_products .page .products-list, #products #list_conditionnements .page .products-list {
  margin-bottom: 3rem;
  margin-top: 2rem;
  width: 100%;
}
@media (max-width: 767px) {
  #products #list_products .page .products-list, #products #list_conditionnements .page .products-list {
    display: block;
    width: 100%;
  }
}
#products #list_products .page .products-list li, #products #list_conditionnements .page .products-list li {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
}
#products #list_products .page .products-list li:hover, #products #list_conditionnements .page .products-list li:hover {
  background-color: #f7f7f7;
}
#products #list_products .page .products-list li:hover + .illu, #products #list_conditionnements .page .products-list li:hover + .illu {
  background-color: #f7f7f7;
}
#products #list_products .page .products-list li .product-name, #products #list_conditionnements .page .products-list li .product-name {
  font-family: "robotoslab", Arial, Helvetica, sans-serif;
  font-weight: bold;
  padding-left: 5px;
  line-height: 1.6rem;
}
#products #list_products .page .products-list li .with-description::before, #products #list_conditionnements .page .products-list li .with-description::before {
  content: "✿";
  margin-right: 1rem;
}
#products #list_products .page .products-list li .product-description, #products #list_conditionnements .page .products-list li .product-description {
  flex-grow: 3;
  overflow-wrap: break-word;
  padding-left: 2rem;
}
#products #list_products .page .products-list li .tarif-spe, #products #list_conditionnements .page .products-list li .tarif-spe {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  background-color: #f1ba7b;
  margin-left: 1rem;
}
#products #list_products .page .products-list li .tarif-spe .triangle, #products #list_conditionnements .page .products-list li .tarif-spe .triangle {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 0.8rem solid transparent;
  border-bottom: 0.8rem solid transparent;
  border-left: 0.8rem solid #fff;
}
#products #list_products .page .products-list li .tarif-spe b, #products #list_conditionnements .page .products-list li .tarif-spe b {
  color: #fff;
  padding: 0px 15px;
  white-space: nowrap;
  vertical-align: top;
  line-height: 1.6rem;
}
@media (max-width: 500px) {
  #products #list_products .page .products-list li .tarif-spe, #products #list_conditionnements .page .products-list li .tarif-spe {
    display: block;
  }
}
#products #list_products .page .products-list .illu, #products #list_conditionnements .page .products-list .illu {
  display: block;
}
#products #list_products .page .products-list .illu:hover, #products #list_conditionnements .page .products-list .illu:hover {
  background-color: #fff;
}
#products #list_products .page .products-list .illu img, #products #list_conditionnements .page .products-list .illu img {
  max-height: 350px;
  max-width: 100%;
}
@media (max-width: 992px) {
  #products #list_products .page .products-list .illu img, #products #list_conditionnements .page .products-list .illu img {
    max-height: 280px;
  }
}
@media (max-width: 767px) {
  #products #list_products .page .products-list .illu img, #products #list_conditionnements .page .products-list .illu img {
    max-height: 240px;
  }
}
#products #list_products .page .products-list .illu .illu-container, #products #list_conditionnements .page .products-list .illu .illu-container {
  padding: 1rem 2rem 2rem;
}
#products #list_products .page .products-list .gauche .illu-container, #products #list_conditionnements .page .products-list .gauche .illu-container {
  text-align: left;
}
@media (max-width: 767px) {
  #products #list_products .page .products-list .gauche .illu-container, #products #list_conditionnements .page .products-list .gauche .illu-container {
    text-align: center;
  }
}
#products #list_products .page .products-list .droite .illu-container, #products #list_conditionnements .page .products-list .droite .illu-container {
  text-align: right;
}
@media (max-width: 767px) {
  #products #list_products .page .products-list .droite .illu-container, #products #list_conditionnements .page .products-list .droite .illu-container {
    text-align: center;
  }
}
#products #list_products .page .products-list .spacer, #products #list_conditionnements .page .products-list .spacer {
  height: 1rem;
  width: 100%;
}
#products #list_products .page .separator, #products #list_conditionnements .page .separator {
  text-align: center;
}
#products #list_products .page .separator img, #products #list_conditionnements .page .separator img {
  max-height: 50px;
  width: auto;
}
#products footer {
  position: fixed;
  bottom: 0;
  z-index: 20;
}
#products #list_conditionnements .category-title {
  width: 100%;
  height: 11%;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}
#products #list_conditionnements .category-title h2 {
  text-shadow: -3px 3px 3px rgb(179, 95, 1);
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
#products #list_conditionnements .category-title .txt-menu3 {
  font-size: 4rem;
  color: #fff;
}
@media (max-width: 767px) {
  #products #list_conditionnements .category-title .txt-menu3 {
    font-size: 3rem;
  }
}
@media (max-width: 500px) {
  #products #list_conditionnements .category-title .txt-menu3 {
    font-size: 2.5rem;
  }
}

/**** END - PAGE PRODUITS - LISTE ****/
/*Menu mobile*/
@media (max-width: 767px) {
  #mobilemenu {
    position: fixed;
    top: 20px;
    left: 30px;
    z-index: 2;
  }
}

#menuToggle input {
  display: none;
}

@media (max-width: 767px) {
  #menuToggle {
    display: block;
    position: relative;
    top: 0px;
    left: -50%;
    z-index: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
    z-index: 999999;
    text-align: center;
  }
  #menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;
  }
  /* ust a quick hamburger */
  #menuToggle > span {
    display: block;
    width: 28px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: #f1ba7b;
    border-radius: 3px;
    z-index: 1;
    transform-origin: -1px 1px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
  }
  #menuToggle span:first-child {
    transform-origin: 0% 0%;
  }
  #menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
  }
  /* Transform all the slices of hamburger into a crossmark. */
  #menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #fff;
  }
  #menuToggle input:checked ~ span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }
  #menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0px, -1px);
  }
  /* Make this absolute positioned at the top left of the screen */
  #menu {
    cursor: default;
    position: fixed;
    width: 90%;
    max-width: 300px;
    display: block;
    margin: -50px 0 0 -50px;
    padding: 50px;
    padding-top: 50px;
    background: rgba(0, 0, 0, 0.5);
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  }
  #menu li a {
    color: #fff;
  }
  #menu div li {
    display: block;
    text-align: center;
    margin-bottom: 1rem;
  }
  /* And let's slide it in from the left */
  #menuToggle input:checked ~ ul#menu {
    transform: translate(0%, 0);
  }
}
/**** Page 404 ****/
#error_page {
  margin: 0px;
  padding: 0px;
  text-align: center;
  background-image: url("../imgs/bckgrd4040.jpg");
}

/**** Mentions légales ****/
#legales, #cookies, #contact {
  padding: 2rem 4rem 5rem;
}
@media (max-width: 767px) {
  #legales, #cookies, #contact {
    padding: 1rem 3rem 5rem;
    width: 80%;
    margin: 0 auto;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
  }
}
@media (max-width: 500px) {
  #legales, #cookies, #contact {
    padding: 1rem 1rem 5rem;
    width: auto !important;
  }
}
#legales h2, #cookies h2, #contact h2 {
  text-align: center;
}
#legales .ps, #cookies .ps, #contact .ps {
  display: none;
}

#contact {
  margin-top: 2rem;
}

/**** Page contact ****/
#contact-form {
  width: 600px;
  margin: 0 auto;
}
#contact-form input, #contact-form textarea {
  padding-left: 10px;
  width: 100%;
  border: 1px solid #943d0c;
  border-radius: 5px;
  height: 2rem;
}
#contact-form label {
  font-style: oblique;
  color: #943d0c;
  font-size: 0.9rem;
}
#contact-form textarea {
  min-height: 120px;
  padding: 5px 10px;
}
#contact-form input[type=text] {
  width: 60%;
}
#contact-form #subject {
  width: 100%;
}
#contact-form input[type=submit] {
  cursor: pointer;
  width: 120px;
  float: right;
  border-radius: 1.2rem;
  border: none;
  border-bottom: 2px solid #943d0c;
  color: #fff;
  background-color: #f1ba7b;
  height: 2rem;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}
#contact-form input[type=submit]:hover {
  border-bottom: 1px solid #f2df88;
  background-color: #943d0c;
}
#contact-form .hide-robot {
  visibility: hidden;
}
@media (max-width: 767px) {
  #contact-form {
    width: 350px;
  }
  #contact-form input[type=text] {
    width: 100%;
  }
}
@media (max-width: 500px) {
  #contact-form {
    width: 290px;
  }
}/*# sourceMappingURL=style.css.map */