@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');

/* anton-regular - latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/anton-v23-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/anton-v23-latin/anton-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/anton-v23-latin/anton-v23-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/anton-v23-latin/anton-v23-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/anton-v23-latin/anton-v23-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/anton-v23-latin/anton-v23-latin-regular.svg#Anton') format('svg'); /* Legacy iOS */
}

body {
  margin: 0px;
  font-size: 16px;
  font-family: 'Nunito', sans-serif;
  overflow: hidden;
  color: #333;
  line-height: 1.6em;
}
#viewport {
  --margin-viewport: 0px;
  --color-bg: #303c42;
  --color-bg-text: #e6d38f;
  /*--color-menu: #262627;*/
  --color-menu: #565739;
  --color-menu-text: #e6d38f;
  --color-menu-button: rgba(0,0,0,.1);
  --color-menu-button-hover: rgba(0,0,0,.1);
  --color-main: #6a2a1e;
  /*--color-main-text: #e6d38f;*/
  --color-main-text: #fff;
  /*--color-footer: #262627;*/
  --color-footer: #303c42;
  --color-footer-text: #e6d38f;
  /**/
  --max-width: 1000px;
  --height-menu: 60px;
  --height-banniere: 300px;
}
#viewport {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  height: calc(100% - var(--margin-viewport, 0px) - var(--margin-viewport, 0px));
  width: calc(100% - var(--margin-viewport, 0px) - var(--margin-viewport, 0px));
  left: 0px;
  top: 0px;
  overflow: auto;
  margin: 0px;
  margin: var(--margin-viewport, 0px);
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  background-color: #303c42;
  background-color: var(--color-bg, #303c42);
  color: #e6d38f;
  color: var(--color-bg-text, #e6d38f);
}
#viewport,
#viewport * {
  box-sizing: border-box;
}

/* MAX-WIDTH */
#menu,
#footer,
#container,
#banniere .parallax .calque_3d {
  position: relative;
  max-width: 1000px;
  max-width: var(--max-width, 1000px);
  margin: auto;
}


/* BANNIERE */
#viewport #banniere {
  position: relative;
  display: flex;
  height: 250px;
  height: var(--height-banniere, 250px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 10;
}
#viewport #banniere .title {
  order: 2;
  --top: 28px;
  --depth: -140;
}
#viewport #banniere .title .calque_3d img {
  position: absolute;
  height: 163px;
  top: -31px;
}
#viewport #banniere .subtitle {
  order: 1;
  margin: 0;
  --top: 14px;
  --depth: -100;
}
#viewport #banniere .btn_reserver {
  order: 3;
  /*--top: 84px;*/
  --top: 150px;
  --depth: -180;
}
/*#viewport #banniere .background {
  position: absolute;
  height: 100%;
  width: 100%;
  padding-bottom: 48px;
  margin-bottom: -48px;
  background-color: #ccc;
  box-sizing: content-box !important;
  --top: 0vh;
  --depth: -240;
}*/
/* BANNIERE PARALLAX */
#viewport {
  --perspective: 100;
}
#viewport {
  perspective: 10px;
  perspective: calc(var(--perspective, 1) * 1px);
  overflow-x: hidden;
  overflow-y: auto;
}
.parallax {
  top: 0 !important;
  left: 0 !important;
  /*--x: calc(-50vw + var(--left, 0));*/
  /*--y: calc(-50vh + var(--top, 0));*/
  /*--z: calc(var(--depth, 0) * 1px);*/
  --x: calc(-50vw + var(--left, 0) + var(--margin-viewport, 0px));
  --y: calc(-50vh + var(--top, 0) + var(--margin-viewport, 0px));
  --z: calc(var(--depth, 0) * 1px + calc(var(--margin-viewport, 0px) / 4));
  --scale: calc(1 + (var(--depth, 0) * -1) / var(--perspective, 1));
  transform: translate3d(50vw, 50vh, var(--z)) scale(var(--scale)) translateX(var(--x)) translateY(var(--y));
  transform-origin: top left;
}
#banniere .parallax {
  width: 100%;
  --top: 0px;
  --left: 0px;
  --depth: -1;
  will-change: transform;
}
#banniere .parallax .calque_3d {
  display: flex;
  align-items: center;
  justify-content: center;
}
#banniere .parallax .calque_3d > * {
  pointer-events: all;
}


/* BUTTON RESERVER */
.button_reserver {
  border: none;
  border-radius: 5px;
  padding: 0px 24px;
  height: 40px;
  line-height: 40px;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  font-weight: bold;
  /*background-color: rgba(0,0,0,.2);*/
  /* background-color: rgb(27, 125, 125); */
  /* color: #daca98; */
  background-color: rgb(15, 203, 203);
  color: #4e1803;
  cursor: pointer;

}


/* MENU */
#viewport #menu {
  position: sticky;
  display: flex;
  flex-direction: row;
  top: 0px;
  height: 60px;
  padding: 0 1px;
  background-color: #565739;
  background-color: var(--color-menu, #565739);
  color: #e6d38f;
  color: var(--color-menu-text, #e6d38f);
  border-radius: 20px 20px 0 0;
  z-index: 100;
}
#viewport #menu a {
  display: flex;
  /*width: 140px;*/
  flex: 1;
  margin: 2px 1px;
  align-items: center;
  justify-content: center;
  background-color: rgba(0,0,0,.1);
  background-color: var(--color-menu-button, rgba(0,0,0,.1));
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
#viewport #menu a:first-child {
  border-top-left-radius: inherit;
}
#viewport #menu a:last-child {
  border-top-right-radius: inherit;
}
#viewport #menu a svg,
#viewport #menu a .icon {
  height: 18px;
  width: 18px;
  fill: currentColor;
  margin-right: 10px;
}
#viewport #menu a.selected {
  font-weight: bold;
  cursor: default;
}
#viewport #menu .filled {
  flex: 1;
}

/* PAGE */
#viewport #container {
  padding: 60px;
  background-color: #6a2a1e;
  background-color: var(--color-main, #6a2a1e);
  color: #e6d38f;
  color: var(--color-main-text, #e6d38f);
  box-shadow: 0px -5px 20px #000;
  background-image: url(../img/bg_main.jpg);
  background-size: 100% auto;
  background-position: center;
  margin-top: -14px;
  border-radius: 15px 15px 25px 25px;
  margin-bottom: -20px;
  z-index: 50;
}
#viewport #container:after,
#viewport #container:before {
  position: absolute;
  content: '';
  width: 250px;
  width: calc(calc(100vw - 100%) / 2);
  height: calc(100% - 250px);
  top: 250px;
  background-color: #303c42;
  background-color: var(--color-bg, #303c42);
  opacity: .8;
}
@supports (backdrop-filter: blur(10px)) {
  #viewport #container:after,
  #viewport #container:before {
    background: none;
    backdrop-filter: blur(10px);
    opacity: 1;
  }
}
#viewport #container:after {
  height: calc(100% - 190px);
  top: 190px;
  left: 100%;
}
#viewport #container:before {
  right: 100%;
}
section {
  margin: 0px 0px 45px;
  padding: 30px 35px;
  border-radius: 20px;
}
.row {
  display: flex;
  flex-direction: row;
}
.row > section {
  flex: 1;
}
.row > section:not(:last-child) {
  margin-right: 40px;
}


/* FOOTER */
#viewport #footer {
  position: sticky;
  bottom: 0px;
  display: flex;
  flex-direction: row;
  height: auto;
  padding: 60px 80px;
  background-color: #262627;
  background-color: var(--color-footer, #262627);
  color: #e6d38f;
  color: var(--color-footer-text, #e6d38f);
  z-index: 5;
}
#viewport #footer section {
  flex: 1;
  /*padding: 0px 10px 40px;*/
  padding: 0px;
  margin: 0px;
}
#viewport #footer section a {
}


/* RESERVATION */
#container_reservation {
  position: fixed;
  display: flex;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  align-items: center;
  justify-content: center;
  transition: .5s;
  z-index: 1000;
}
#container_reservation .form_reservation {
  position: relative;
  padding: 50px 80px;
  background-color: rgba(255,255,255,.8);
}
#container_reservation .form_reservation .button_close {
  position: absolute;
  display: block;
  height: 40px;
  width: 40px;
  right: 0px;
  top: 0px;
  background-color: rgba(0,0,0,.1);
  text-decoration: none;
}
#container_reservation .bg_close {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  border: 0;
  text-decoration: none;
  cursor: pointer;
}

/* TARGET */
#reservation {
  display: none;
}
#reservation:not(:target) ~ #container_reservation {
  pointer-events: none;
  transform: scale(1.07) rotate(-2deg);
  opacity: 0;
}
#viewport {
  transition: .5s;
}
#reservation:target ~ #viewport {
  filter: blur(10px);
  transform: scale(1.02);
}
#reservation:target ~ #container_reservation {
  pointer-events: block;
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

/* BG BACKDROP */
.backdrop {
  position: relative;
}
.backdrop:before {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  border-radius: inherit;
  z-index: -1;
}
@supports (backdrop-filter: blur(20px)) {
  .backdrop:before {
    background: none;
    backdrop-filter: blur(20px);
    opacity: 1;
  }
}
@supports (backdrop-filter: blur(10px)) {
  .backdrop-light:before {
    backdrop-filter: blur(10px);
  }
}

.filling {
  flex: 1;
}


/*
  
  RESPONSIVE

*/
@media screen and (max-width: 640px) {
  #viewport #container {
    padding: 30px 15px;
  }
  #viewport #container section {
    padding: 20px 25px;
  }
  #viewport #container .row {
    flex-direction: column;
  }
  #viewport #container .row > section:not(:last-child) {
    margin-right: 0px;
  }

  /* PROG */
  #viewport #container section#list_prog {
    padding: 10px 0 0 0;
    margin: 0px;
  }

  /* MENU */
  #viewport #menu a svg, #viewport #menu a .icon {
    display: none;
  }

  /* CONTACT */
  #viewport #container.container_contact {
    flex-direction: column;
  }
  #viewport #container #form_contact {
    width: 100%;
    margin-right: 0px;
  }
  #viewport #container #form_contact > form > div {
    flex-direction: column;
  }
}