@font-face {
  font-family: dahlia;
  src: url(../assets/fonts/Dahlia-Medium.otf);
}

@font-face {
  font-family: maaxReg;
  src: url(../assets/fonts/Maax\ -\ Regular-205TF.otf);
}
@font-face {
  font-family: maaxBold;
  src: url(../assets/fonts/Maax\ -\ Bold-205TF.otf);
}

:root {
  --global-color: #966b46;
  --global-blue-text: #0051ff;
  --global-artistes-color: #dd6808;
  --global-lightSand-color: #e6dfd7;
  --global-txtBlock-margin: 4vw;
  --global-h1: 3rem;
}

html,
body,
main {
  margin: 0;
}

body {
  font: 20px/1.1em arial, sans-serif;
  background: white;
  /* overflow: hidden; */
}

body::-webkit-scrollbar {
  display: none;
}

canvas {
  /* position: absolute;
  top: 40vh; */
  /* position: absolute; */
  position: sticky;
  top: 0;
  margin: auto;
  text-align: center;
  z-index: 9999;
  /* pointer-events: none;  */
}
#logo{
  /* display: none; */
}
#logoFixe {
  opacity: 0;
  display: block;
  /* display: none; */
  width: 87vw;
  left: 50%;
  margin: 0 auto;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  position: absolute;
}

.imgBg-section{
  height: 100%;
}
.imgBg-section > div > img{
  width: 100vw;
  height: 100vh;
  position: absolute;
  object-fit: cover;
}

.imgBg-section > p{
  color: red;
}
#scrollArrow {
  display: none;
  color: var(--global-lightSand-color);
  font-size: 3vw;
  position: fixed;
  top: 85%;
  left: 50%;
  z-index: 99999;
  cursor: pointer;
  transform: translateX(-50%, -50%) rotate(-90deg);
}

#scrollArrow{
  animation: bounce2 2s ease infinite;
}

@keyframes bounce2 {
	0%, 20%, 50%, 80%, 100% {transform: translate(-50%, -50%) rotate(-90deg);}
	40% {transform: translate(-50%, -30px) rotate(-90deg);}
	60% {transform: translate(-50%, -15px) rotate(-90deg);}
}

/* #odyssee-titre {
  display: none;
  height: 100vh;
  background-image: url(../assets/PART01_intro/01.jpg);
  background-repeat: no-repeat;
  background-position: center;
}

#odyssee-titre>p {
  margin-block-start: 0;
  margin-block-end: 0;
  font-family: dahlia;
  font-size: 23.5rem;
  color: var(--global-color);
  text-align: center;
  position: relative;
  top: 40vh;
} */

.main-div {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  /* margin-top: 24vh; */
  text-align: center;
  color: var(--global-color);
}

.main-div > .benWrapper{
  width: 100%;
  flex-shrink: 1;
  margin-top: 10vh;
}
.main-div  > .benWrapper > img { /* BEN DESSIN*/
  width: 70vw; /*100vw*/
  margin: auto;
  /* transform-origin: center; */
  /* transform: scale(2); */
  position: relative; 
  mix-blend-mode: multiply;
}
.text-content-div{
  display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    background: url(../assets/PART01_intro/05.png) 0% 0% no-repeat, url(../assets/PART01_intro/06.png) 0% 50% no-repeat, url(../assets/PART01_intro/07.png) 0% 100% no-repeat;
    background-size: contain;
}

.text-content-div > .bckImg{
  position: absolute;
  z-index: -9;
}
.text-content-div > .bckImg > img{ /* IMG FOND OPAC*/
  width: 100vw;
  margin-top: -16vh;
}

.main-div>.text-content-div > .titre-content >h1 {
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  font-family: dahlia;
  font-weight: 100;
  font-size: 7rem; /*10*/
}

.main-div>.text-content-div> .titre-content > h2 {
  font-family: dahlia;
  font-weight: 100;
  font-size: 2.5rem; /*3.5*/
}

.main-div>.text-content-div>.text-content{
  margin-bottom: 10vh;
  margin-top: 12vh;
}
.main-div>.text-content-div>.text-content>p {
  font-family: maaxReg;
  padding-left: 20vw;
  padding-right: 20vw;
  font-size: 1.5rem; /*2.3*/
  line-height: 1.7rem;
}

.main-div>.text-content-div>.text-content>p >strong{
  font-family: maaxBold;
}
.main-div > .text-content-div> .ctaWrapper{
  width: auto;
  margin: auto;
  margin-top: 9vh;
}

.main-div > .text-content-div> .ctaWrapper > h3  a {
  font-family: dahlia;
  font-size: 4rem;
  font-weight: 100;
  text-decoration: none;
  color: var(--global-color);
  cursor: pointer;
  transition: all 1s;
}
.main-div > .text-content-div> .ctaWrapper >h3{
  position: relative;
  bottom: 10vh;
  z-index: 9999;
  /* margin-block-start: 10vh; */
  border: 2pt solid var(--global-color);
  padding:2vw;
  transition: all 1s;
}
.main-div  > .text-content-div> .ctaWrapper > h3:hover{
  /* transform: scale(1.2);
  transition: all 1.5s; */
  border: 2pt solid var(--global-blue-text);
  transition: all 1s;
}
.main-div  > .text-content-div> .ctaWrapper > h3 > a:hover{
  color: var(--global-blue-text) !important;
  transition: all 1s;

}

.main-div > .text-content-div > .sablier{
  padding-bottom:10vh;
  /* padding-top: 2vh; */
}
.main-div > .text-content-div > .sablier > img{
  width: 15vw;
}

#para01, #para02, #para03, #para04, #para05{
  color: var(--global-color);
}

/* #CTA > a{
  color: white;
} */
#enterArrow{
  /* position: relative; */
  /* left: 5%; */
  font-size: 6rem;
  bottom: 2vh;
}
#enterArrow{
  animation: bounce2 2s ease infinite;
}

/*
                                     _           
 _ __ ___  ___ _ __   ___  _ __  ___(_)_   _____ 
| '__/ _ \/ __| '_ \ / _ \| '_ \/ __| \ \ / / _ \
| | |  __/\__ \ |_) | (_) | | | \__ \ |\ V /  __/
|_|  \___||___/ .__/ \___/|_| |_|___/_| \_/ \___|
             |_|                                
*/
/*RESSOURCES*/
/*
https://www.lambdatest.com/blog/media-queries-for-standard-devices/
https://www.geeksforgeeks.org/css3-media-query-for-all-devices/
https://media-queries.aliasdmc.fr/media-queries-live.php
https://openclassrooms.com/en/courses/5295881-create-web-page-layouts-with-css/5341491-set-media-queries-for-different-devices
https://dev.to/joanayebola/media-queries-crafting-responsive-and-mobile-friendly-website-1kpn
*/

/*::::::ALL SMARTPHONE:::::::::::*/

@media all and (max-device-width: 480px) {
  html, body{
  }

  .main-div>.text-content-div>.titre-content>h1 {
      font-size: 9rem;
    }
  
  .main-div>.text-content-div>.titre-content>h2 {
      font-size: 3.5rem;
    }

.main-div>.text-content-div>.text-content>p {
      padding-left: 5vw;
      padding-right: 5vw;
    }
        .main-div>.text-content-div>.sablier>img {
          width: 22vw;
          transform-origin: center;
        }
}