@charset "UTF-8";
@import 'fonts.css';

/*** Vars ***/
:root {
  --col-noir: #000000;
  --col-beige: #C6B497;
  --col-blanc: #d9d9d9;
  --rgb-noir: 0, 0, 0;
  --rgb-beige: 198, 180, 151;
  --rgb-blanc: 217, 217, 217;

  --break-point-1500: 1420px;

  --width-container: 1420px;

  --main-padding:  60px;
}
/*** Animations ***/
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0px, 50px, 0);
    transform: translate3d(0px, 50px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0px, 50px, 0);
    transform: translate3d(0px, 50px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes blurOut {
     0%       { filter:blur(10px); -webkit-filter:blur(10px);}
     100%     { filter:blur(0px); -webkit-filter:blur(0px);}
}
@-webkit-keyframes blurOut {
     0%       { filter:blur(10px); -webkit-filter:blur(10px);}
     100%     { filter:blur(0px); -webkit-filter:blur(0px);}
}
.blurOut {
  animation-name: blurOut;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: blurOut;
  -webkit-animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
}

/*** Règles ***/
html body {
  font-family: "Bricolage Grotesque", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:"wdth" 100;
	font-size:22px;
  color: var(--col-blanc);
  background-color: var(--col-noir);
}
.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}
* {
  -webkit-tap-highlight-color: transparent;
  word-break: keep-all !important;
  -webkit-hyphens: manual !important;
  -moz-hyphens: manual !important;
  -ms-hyphens: manual !important;
  -o-hyphens: manual !important;
  hyphens: manual !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width:1500px) {
  .container {
    max-width:var(--break-point-1500);
  }
}
.hidden, .wow {
  visibility: hidden;
}
img,
svg {
  max-width:100%;
  height:auto;
}
img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

a, a:hover, a:active, a:focus, object, embed, input, textarea, select, img {
  outline: none !important;
  -moz-outline-style: none !important;
  outline-style: none !important;
}
a {
  transition: all 450ms ease;
  text-decoration: none;
}

a:active {
  background: none;
}
.sitename {
  font-size: 0px;
}
body strong, body b, body mark {
  font-weight: 600;
}
body img {
  max-width: 100%;
  height: auto;
  width: auto;
}
h1 {
  font-size:70px;
  line-height:1.1em ;
}
h1 span {
  color:var(--col-beige);
}
.vertical-align-center {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;  
}
.vertical-align-top {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;  
}
.vertical-align-bottom {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;  
}
.main-content {
  display:flex;
  flex-direction:column;
  justify-content: space-between;
  height: 100dvh;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 20px 0 80px;
  position: relative;
  overflow: hidden;
}
.logo figure {
  max-width:172px;
  margin:0 auto;
}
figure.background {
  position: absolute;
  z-index: -1;
  width: 100%;
  margin-bottom: 0;
  top: 0px;
}
figure.background::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  background-color:rgba(var(--rgb-noir),0.5);
}
figure.background img {
  width: 100%;
}
@media only screen and (max-width: 1820px) {
}
@media only screen and (max-width: 1700px) {
}
@media only screen and (max-width: 1600px) {
}
@media only screen and (max-width: 1499px) {
}
@media only screen and (max-width: 1250px) {
}
@media only screen and (max-width: 1199px) {
  html body {
    height: auto;
    overflow: visible;
  }
  .logo figure img {
    width: 40%;
    min-width: 140px;
  }
}
@media only screen and (max-width: 991px) {
  html body {
    height: auto;
    overflow: visible;
  }
}
@media only screen and (max-width: 767px) {
  h1 {
    font-size:50px;
  }
  figure.background {
    height:100%;
    width:auto;
  }
  figure.background img {
    height:100%;
    width:auto;
  }
}
@media only screen and (max-width: 575px) {
  html body {
    font-size: 20px;
  }
  h1 {
    font-size:40px;
  }
  .main-content {
    min-height: 0;
  }
}
@media only screen and (max-width: 499px) {
  html body {
    font-size: 20px;
  }
}
@media only screen and (max-width: 399px) {
}