@font-face {
  font-family: "Edo";
  src: url("../fonts/Edo.eot");
  src:
    url("../fonts/Edo.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Edo.woff2") format("woff2"),
    url("../fonts/Edo.woff") format("woff"),
    url("../fonts/Edo.ttf") format("truetype"),
    url("../fonts/Edo.svg#Edo") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Potra";
  src: url("../fonts/Potra.eot");
  src:
    url("../fonts/Potra.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Potra.woff2") format("woff2"),
    url("../fonts/Potra.woff") format("woff"),
    url("../fonts/Potra.ttf") format("truetype"),
    url("../fonts/Potra.svg#Potra") format("svg");
  font-weight: 300;
  font-style: normal;
}

/*********************************************/
/*******************General*******************/
/*********************************************/
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Montserrat", sans-serif;
  color: #000;
}
ul {
  list-style: none;
  margin: 0;
  padding: 10px 0;
}
a {
  text-decoration: none;
  color: #000;
}
img {
  width: 100%;
  height: auto;
}
figure {
  margin: 0;
}
/****** Commun ******/
h1,
h2,
figcaption {
  font-family: "Potra", sans-serif;
  font-weight: normal;
}
h3,
.price {
  font-family: "Edo", sans-serif;
}
h3,
.big {
  font-size: 2.5rem;
  font-weight: normal;
}
h3:after {
  display: block;
  margin-top: -16px;
  border-top: 2px solid #929292;
  content: "";
}
h3 span {
  background-color: #fff;
  padding-left: 15px;
}
p,
li {
  font-size: 1.3rem;
}
.container {
  max-width: 85%;
  margin: 0 auto;
}
.bold {
  font-weight: bold;
}
.right {
  text-align: right;
}
.flex {
  display: flex;
  justify-content: space-between;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.hidden {
  display: none;
}
/***** Overlays ******/
.wrap-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 100%;
  left: 0;
  z-index: 9999;
  background-color: rgba(255, 255, 255, 0.9);

  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.main-overlay {
  display: none;
  width: 100vw;
  height: 100vh;
  padding: 50px;
  overflow: hidden;
}
/****** Images fond ********/
.image-fond > img {
  width: 100%;
  height: 100%;
  position: absolute;
}
/* 1. Pas de support d'object-fit */
@media (min-aspect-ratio: 16/9) {
  .image-fond > img {
    height: 300%;
    top: -100%;
  }
}
@media (max-aspect-ratio: 16/9) {
  .image-fond > img {
    width: 300%;
    left: -100%;
  }
}
/* 2. En cas de support d'object-fit, écrase les règles en (1) */
@supports (object-fit: cover) {
  .image-fond > img {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
  }
}
/*** Video  fond ****/
.video-fond > video {
  z-index: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
/* 1. Pas de support d'object-fit */
@media (min-aspect-ratio: 16/9) {
  .video-fond > video {
    height: 300%;
    top: -100%;
  }
}
@media (max-aspect-ratio: 16/9) {
  .video-fond > video {
    width: 300%;
    left: -100%;
  }
}
/* 2. En cas de support d'object-fit, écrase les règles en (1) */
@supports (object-fit: cover) {
  .video-fond > video {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
  }
}