@charset "UTF-8";
/*!
 * Theme Name: Mashvp
 * Theme URI: 
 * Author: Mashvp
 * Description: 
 * Version:      1.0
 */
/* Reset =================================================== */
html,
body,
body div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

article,
aside,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

/*
Pour se faciliter les calculs on utilise la propriété 
box-sizing sur tous les divs et éléments structurants (non supportée par IE6 et IE7)
Voir le cours : Boîtes > Taille de boîte 
*/
* {
  -webkit-box-sizing: border-box; /* iOS < 5 , Android < 4 */
  -moz-box-sizing: border-box; /* Firefox */
  box-sizing: border-box; /* Standard W3C */
}

/* Fix =================================================== */
.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

html, body {
  height: 100%;
  font-family: "Vollkorn";
  font-size: 18px;
  font-weight: 300;
  font-feature-settings: "lnum";
}

h1, h2, h3, h4 {
  font-weight: 600;
  text-transform: uppercase;
}

.fs1 {
  font-size: 25px;
  margin-bottom: 32px;
}

.fs2 {
  font-size: 25px;
}

.fsn {
  font-size: 16px;
}

.fss {
  font-size: 10px;
}

@media screen and (max-width: 900px) {
  .fs1 {
    font-size: 25px;
    margin-bottom: 17px;
  }
  .fs2 {
    font-size: 22px;
  }
  .fsn {
    font-size: 16px;
  }
}
a {
  font-family: "Vollkorn";
  text-decoration: none;
}

.gridCtn {
  margin: 0 auto;
  width: 100vw;
  max-width: calc(100% - 80px);
}

img {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.media {
  position: relative;
  display: block;
}
.media img, .media video {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

.btn, input[type=submit] {
  display: inline;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  text-transform: uppercase;
  padding: 22px 48px;
  width: 100%;
  min-width: 300px;
  box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.4);
  background-color: #ffffff;
  color: #000000;
  transition: background-color 0.6s, color 0.6s;
}
.btn:hover, input[type=submit]:hover {
  background-color: #000000;
  color: #ffffff !important;
}
@media screen and (max-width: 900px) {
  .btn, input[type=submit] {
    min-width: 200px;
    padding: 12px 40px;
  }
}

/* === === === === === === === === === === --> Form Inputs <-- === === === === === === === === === */
.selectCtn {
  position: relative;
  width: fit-content;
  display: flex;
  border: 1px solid #000;
  width: 100%;
  height: max-content;
  border-radius: 0px;
  text-align: center;
}
.selectCtn:after {
  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='30' height='30' xml:space='preserve'><polyline points='10 13 15 19 20 13' fill='rgb(27, 82, 66)' stroke-width='1' /></svg>");
  width: 30px;
  height: 30px;
  position: absolute;
  right: 8px;
  top: 0;
  bottom: 0;
  margin: auto;
  pointer-events: none;
}
.selectCtn span {
  display: block;
  width: 100%;
}
.selectCtn select {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  text-transform: uppercase;
  font-family: "Vollkorn";
  border: none;
  font-size: 16px;
  padding-right: 50px;
  padding: 0;
  padding: 14px 26px;
  cursor: pointer;
}

input[type=text], input[type=tel], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea, input[type=submit] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 14px 26px;
  outline: none;
  color: #000;
  font-weight: 100;
  border: 1px solid #000;
  font-family: "Vollkorn";
  resize: none;
  font-size: 16px;
  border-radius: 0px;
}
input[type=radio], input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border: 1px solid #000000;
  background-color: #ffffff;
  outline: none;
  vertical-align: middle !important;
  margin-right: 10px;
  margin-top: 5px !important;
  margin-left: 0 !important;
  flex: 0 0 auto;
}
input[type=radio]:checked, input[type=checkbox]:checked {
  background-color: #000000;
}

input[type=submit] {
  background-color: #000000;
  color: #ffffff;
  border: none;
  width: max-content;
  text-transform: initial;
}
input[type=submit]:disabled {
  opacity: 0.4;
}

form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 40px;
  /*@include small {
      grid-gap: 30px;
  }
  @include tablet {
      grid-gap: 20px;
  }*/
  max-width: 660px;
}
form .sp1 {
  grid-column: span 1;
}
form .sp2 {
  grid-column: span 2;
}
form .wpcf7-list-item {
  margin: 0;
}
form .wpcf7-response-output {
  margin: 0;
  grid-column: span 1;
}
form .wpcf7-acceptance label {
  display: flex;
}
form .wpcf7-spinner {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
@media screen and (max-width: 900px) {
  form {
    gap: 16px;
  }
  form .sp1 {
    grid-column: span 2;
    height: fit-content;
    position: relative;
  }
  form input[type=submit] {
    margin: auto;
  }
}

.wysiwyg h2 {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 25px;
}
.wysiwyg h3 {
  margin-top: 5px;
  margin-bottom: 15px;
  font-size: 18px;
}
.wysiwyg h4 {
  font-size: 18px;
  margin-bottom: 10px;
}
.wysiwyg p {
  margin-bottom: 10px;
  font-size: 16px;
}
.wysiwyg a {
  font-size: inherit;
  color: inherit;
  text-decoration: underline;
}
.wysiwyg ul, .wysiwyg ol {
  padding-left: 40px;
}

.bookCta {
  z-index: 10;
  position: fixed;
  right: 30px;
  bottom: 30px;
}
.bookCta .btn {
  box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.4);
}

[enter=txt] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: transform 0.6s 0s, opacity 0.4s 0s;
}
[enter=txt].outTxt {
  opacity: 0;
  transform: translate3d(0, 50px, 0);
  transition: none;
}

[enter=img] > * {
  clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
  transition: clip-path 0.6s 0s;
}
[enter=img].outImg > * {
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  transition: none;
}

#pageTransition {
  z-index: 200;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
#pageTransition .ctn1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: clip-path 0.8s 0.2s;
}
#pageTransition .ctn2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #F4F3E9;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: clip-path 0.8s;
}
#pageTransition.active .ctn1 {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition: clip-path 0.8s;
}
#pageTransition.active .ctn2 {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition: clip-path 0.8s 0.2s;
}

#preloader {
  z-index: 220;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
#preloader .animationCtn {
  z-index: 10;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  width: auto;
  margin: auto;
  opacity: 1;
  transition: opacity 0.6s 0.2s;
}
#preloader .ctn1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition: clip-path 0.8s 0.2s;
}
#preloader .ctn2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #F4F3E9;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  transition: clip-path 0.8s;
}
#preloader.hide .animationCtn {
  opacity: 0;
}
#preloader.hide .ctn1 {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
#preloader.hide .ctn2 {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

.landingSec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 40px;
  /*@include small {
      grid-gap: 30px;
  }
  @include tablet {
      grid-gap: 20px;
  }*/
}
.landingSec .m1 {
  grid-column: span 1;
  padding-top: 158%;
}
.landingSec .m2 {
  grid-column: span 2;
  padding-top: 66%;
}
@media screen and (max-width: 900px) {
  .landingSec {
    gap: 22px;
  }
  .landingSec .m1 {
    grid-column: span 2;
  }
}

.menuSec .txtCtn p {
  font-size: 16px;
  line-height: 1.4;
}
.menuSec .imgCtn {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-gap: 40px;
  /*@include small {
      grid-gap: 30px;
  }
  @include tablet {
      grid-gap: 20px;
  }*/
  margin-top: 42px;
}
.menuSec .imgCtn .media {
  z-index: 1;
  padding-top: 66%;
  grid-column: 1;
  grid-row: 1;
}
.menuSec .imgCtn .lnkCtn {
  z-index: 2;
  align-self: center;
  justify-self: center;
  grid-column: 1;
  grid-row: 1;
  width: max-content;
}
.menuSec .imgCtn .lnkCtn .btn + .btn {
  margin-top: 22px;
}

.gallerySec .imgsCtn {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-gap: 40px;
  /*@include small {
      grid-gap: 30px;
  }
  @include tablet {
      grid-gap: 20px;
  }*/
}
.gallerySec .imgsCtn .sp6 {
  grid-column: span 6;
  padding-top: 53%;
}
.gallerySec .imgsCtn .sp3 {
  grid-column: span 3;
  padding-top: 134%;
}
.gallerySec .imgsCtn .sp2 {
  grid-column: span 2;
  padding-top: 134%;
}
@media screen and (max-width: 900px) {
  .gallerySec .imgsCtn {
    gap: 14px;
  }
}

.reservationSec .ctn {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-gap: 40px;
  /*@include small {
      grid-gap: 30px;
  }
  @include tablet {
      grid-gap: 20px;
  }*/
}
.reservationSec .ctn .imgCtn {
  grid-column: 1;
  grid-row: 1;
  padding-top: 66%;
}
.reservationSec .ctn .imgCtn:after {
  content: "";
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.56);
}
.reservationSec .ctn .txtCtn {
  z-index: 2;
  align-self: center;
  justify-self: center;
  grid-column: 1;
  grid-row: 1;
  text-align: center;
}
.reservationSec .ctn .txtCtn p, .reservationSec .ctn .txtCtn a {
  color: #ffffff;
}
.reservationSec .ctn .txtCtn .btn {
  color: #000000;
}
.reservationSec .ctn .txtCtn .top {
  margin-bottom: 40px;
}

.contactSec .wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 40px;
  /*@include small {
      grid-gap: 30px;
  }
  @include tablet {
      grid-gap: 20px;
  }*/
  gap: 40px;
  column-gap: 30px;
  max-width: 660px;
}
.contactSec .wrap h2 {
  grid-column: span 2;
  margin-bottom: 0;
}
.contactSec .wrap .contactForm {
  grid-column: span 2;
}
.contactSec map-ctn {
  display: block;
  margin-top: 40px;
  height: 600px;
}
@media screen and (max-width: 1400px) {
  .contactSec map-ctn {
    height: 66vw;
  }
}
@media screen and (max-width: 900px) {
  .contactSec {
    gap: 20px;
  }
  .contactSec h2 {
    margin: 0;
  }
  .contactSec .left {
    grid-column: span 2;
  }
  .contactSec .right {
    grid-column: span 2;
  }
}

.carriereArchiveSec h2 {
  margin-bottom: 30px;
}
.carriereArchiveSec .jobCtn {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 40px;
  /*@include small {
      grid-gap: 30px;
  }
  @include tablet {
      grid-gap: 20px;
  }*/
  gap: 40px;
}
.carriereArchiveSec .jobCtn article {
  background-color: #ffffff;
  border: 1px solid #000000;
  padding: 26px 18px;
}
.carriereArchiveSec .jobCtn article a {
  display: block;
  color: #000000;
}
.carriereArchiveSec .jobCtn article a h3 {
  margin-bottom: 20px;
}
@media screen and (max-width: 900px) {
  .carriereArchiveSec h2 {
    margin-bottom: 20px;
  }
  .carriereArchiveSec .jobCtn {
    gap: 15px;
  }
  .carriereArchiveSec .jobCtn article {
    grid-column: span 2;
  }
}

.carriereSingleSec h2 {
  margin-bottom: 50px;
}
.carriereSingleSec article .ctn {
  background-color: #ffffff;
  border: 1px solid #000000;
  padding: 26px 18px;
  margin-bottom: 30px;
  color: #000000;
}
.carriereSingleSec article .ctn h3 {
  margin-bottom: 20px;
}
.sym_404 .griCtn {
  height: 100vh;
}
.sym_404 .griCtn h1 {
  margin-top: 40px;
  grid-column: 1/13;
}
.sym_404 .griCtn .btnCtn {
  grid-column: 1/13;
  width: 90%;
  max-width: 480px;
  margin-bottom: 40px;
}
.sym_404 .griCtn .imCtn {
  max-width: 480px;
  width: 90%;
}
.sym_404 .griCtn .imCtn video {
  width: 100%;
  height: auto;
}
body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 40px;
  /*@include small {
      grid-gap: 30px;
  }
  @include tablet {
      grid-gap: 20px;
  }*/
  gap: 0;
  row-gap: 40px;
  grid-template-rows: max-content auto;
  grid-template-columns: min-content auto;
  background-color: #F4F3E9;
}
body .headerTop {
  grid-column: 1/3;
  grid-row: 1;
  background-color: #ffffff;
  width: 100vw;
}
body .headerTop .gridCtn {
  padding: 10px 0px;
  display: grid;
  grid-template-columns: min-content auto;
}
body .headerTop .logoBoudon {
  display: block;
  width: 52px;
}
body .headerTop .logoBoudon svg {
  width: 100%;
}
body .headerTop .langCtn {
  grid-column: 9/13;
  justify-self: end;
  align-self: center;
}
body .headerTop .langCtn span, body .headerTop .langCtn a {
  box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.4);
  background-color: #ffffff;
  padding: 10px 12px;
  text-transform: uppercase;
  color: #000000;
}
body .headerTop .langCtn span + a, body .headerTop .langCtn a + a {
  margin-left: 10px;
}
body .mainWrap {
  width: 100vw;
  grid-column: 1/3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 40px;
  /*@include small {
      grid-gap: 30px;
  }
  @include tablet {
      grid-gap: 20px;
  }*/
  gap: 0;
  row-gap: 28px;
  grid-template-rows: max-content auto;
  grid-template-columns: min-content auto;
}
body .mainWrap .headerLeft {
  z-index: 100;
  grid-column: 1;
  grid-row: 1;
  padding-right: 30px;
}
body .mainWrap .headerLeft .ctn {
  position: sticky;
  top: 30px;
  left: 0;
}
body .mainWrap .headerLeft .ctn h1 {
  width: 280px;
}
@media screen and (max-width: 1400px) {
  body .mainWrap .headerLeft .ctn h1 {
    width: 20vw;
  }
}
@media screen and (max-width: 900px) {
  body .mainWrap .headerLeft .ctn h1 {
    width: 70%;
    max-width: 240px;
  }
}
body .mainWrap .headerLeft .ctn h1 a {
  display: block;
  width: fit-content;
}
body .mainWrap .headerLeft .ctn h1 a svg {
  width: 100%;
}
body .mainWrap .headerLeft .ctn .callNav {
  cursor: pointer;
  margin: 10px 0;
  width: 45px;
}
body .mainWrap .headerLeft .ctn nav {
  pointer-events: none;
  height: 0px;
  transition: height 0.8s 0.4s;
}
body .mainWrap .headerLeft .ctn nav ul {
  height: fit-content;
  list-style: none;
}
body .mainWrap .headerLeft .ctn nav ul li {
  opacity: 0;
}
body .mainWrap .headerLeft .ctn nav ul li:nth-child(1) {
  transition: opacity 0.4s 0s;
}
body .mainWrap .headerLeft .ctn nav ul li:nth-child(2) {
  transition: opacity 0.4s 0s;
}
body .mainWrap .headerLeft .ctn nav ul li:nth-child(3) {
  transition: opacity 0.4s 0s;
}
body .mainWrap .headerLeft .ctn nav ul li:nth-child(4) {
  transition: opacity 0.4s 0s;
}
body .mainWrap .headerLeft .ctn nav ul li:nth-child(5) {
  transition: opacity 0.4s 0s;
}
body .mainWrap .headerLeft .ctn nav ul li:nth-child(6) {
  transition: opacity 0.4s 0s;
}
body .mainWrap .headerLeft .ctn nav ul li:nth-child(7) {
  transition: opacity 0.4s 0s;
}
body .mainWrap .headerLeft .ctn nav ul li:nth-child(8) {
  transition: opacity 0.4s 0s;
}
body .mainWrap .headerLeft .ctn nav ul li:nth-child(9) {
  transition: opacity 0.4s 0s;
}
body .mainWrap .headerLeft .ctn nav ul li + li {
  margin-top: 12px;
}
body .mainWrap .headerLeft .ctn nav ul li a {
  color: #000000;
  text-transform: uppercase;
  font-size: 18px;
}
body .mainWrap .headerLeft .ctn nav.active {
  transition: height 0.8s;
  pointer-events: initial;
}
body .mainWrap .headerLeft .ctn nav.active ul li {
  opacity: 1;
}
body .mainWrap .headerLeft .ctn nav.active ul li:nth-child(1) {
  transition: opacity 0.4s 0.2s;
}
body .mainWrap .headerLeft .ctn nav.active ul li:nth-child(2) {
  transition: opacity 0.4s 0.4s;
}
body .mainWrap .headerLeft .ctn nav.active ul li:nth-child(3) {
  transition: opacity 0.4s 0.6s;
}
body .mainWrap .headerLeft .ctn nav.active ul li:nth-child(4) {
  transition: opacity 0.4s 0.8s;
}
body .mainWrap .headerLeft .ctn nav.active ul li:nth-child(5) {
  transition: opacity 0.4s 1s;
}
body .mainWrap .headerLeft .ctn nav.active ul li:nth-child(6) {
  transition: opacity 0.4s 1.2s;
}
body .mainWrap .headerLeft .ctn nav.active ul li:nth-child(7) {
  transition: opacity 0.4s 1.4s;
}
body .mainWrap .headerLeft .ctn nav.active ul li:nth-child(8) {
  transition: opacity 0.4s 1.6s;
}
body .mainWrap .headerLeft .ctn nav.active ul li:nth-child(9) {
  transition: opacity 0.4s 1.8s;
}
body .mainWrap main {
  width: 100%;
  grid-column: 2;
  grid-row: 1;
}
body .mainWrap main section {
  margin-bottom: 65px;
  width: 100%;
}
@media screen and (max-width: 900px) {
  body .mainWrap .headerLeft {
    grid-column: 1/3;
    grid-row: 1/3;
    padding: 0;
    pointer-events: none;
  }
  body .mainWrap .headerLeft .ctn {
    background-color: #F4F3E9;
    top: 0;
    padding: 0;
    padding-top: 20px;
    display: grid;
    grid-template-columns: max-content auto;
    pointer-events: initial;
  }
  body .mainWrap .headerLeft .ctn .callNav {
    text-align: right;
    justify-self: end;
  }
  body .mainWrap .headerLeft .ctn nav {
    grid-column: span 2;
  }
  body .mainWrap main {
    margin-top: 20px;
    grid-column: 1/3;
    grid-row: 2;
    padding-right: 0;
  }
  body .mainWrap main section {
    margin-bottom: 30px;
  }
}

footer {
  position: relative;
  z-index: 20;
  background-color: #ffffff;
  grid-column: 1/3;
  width: 100vw;
}
footer .gridCtn {
  height: max-content;
  padding: 16px 0px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 40px;
  /*@include small {
      grid-gap: 30px;
  }
  @include tablet {
      grid-gap: 20px;
  }*/
}
footer .gridCtn .left {
  width: 80px;
}
footer .gridCtn .right {
  justify-self: flex-end;
}
footer .gridCtn .right nav ul li {
  list-style: none;
  margin-bottom: 12px;
}
footer .gridCtn .right nav ul li a {
  color: #000000;
}
footer .gridCtn .right svg {
  width: 20px;
}
@media screen and (max-width: 900px) {
  footer .gridCtn .left {
    width: 60px;
  }
}

/*# sourceMappingURL=style.css.map */