body {
  margin: 0;
  padding:0;
}

html, body {
  height: 100%;
  overflow-x: hidden; 
  font-family: 'Source Serif Pro', serif; 
}


@media (max-width: 768px) {
  .logo-desktop {
    width: 30vh; 
    margin-left:-30px;
  }

  .navbar-collapse {
    backdrop-filter: blur(15px);
    background-color:#726d5e28;
    text-align: center;   
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    padding-top: 180px; 
    z-index: 999;
  }
  .navbar-collapse.show {
    display: flex;
  }

  .navbar-nav {
    width: 100%;
    text-align: center;
  }

  .nav-item {
    margin: 1rem 0;
  }
  .navbar-collapse.collapsing,
  .navbar-collapse.show {
    display: block !important;
  }

  .navbar-toggler {
    position: fixed;
    top: 38px;
    right: 1rem;
    z-index: 1001; /* plus que .navbar-collapse */
  }

  .navbar-brand {
    position: fixed;
    top: -90px;
    left: 1rem;
    z-index: 1001;
  }
}


.navbar {
  overflow-x: hidden; 
  margin-top:-70px;
  width: 100%;
  max-width: 100%;
  z-index: 1050;
  font-family: 'Courier New', Courier, monospace;
  text-transform:uppercase;
  display: flex;
  align-items: flex-end;
}

.navbar-brand{
  margin-top:-20px;
}

.navbar-toggler{
 border:none !important;
}

.navbar-toggler:focus {
  outline: none !important; 
  box-shadow: none !important; 
}


.navbar-nav .nav-link {
  color: #333;
  font-weight: normal;
}

.navbar-nav .nav-link:hover {
  color: #000000;
  font-weight: bold;

}

.nav-item {
  font-family: 'Courier New', Courier, monospace;

}

.nav-item:hover {
  font-weight: bold;
}

.navbar-nav .nav-item .nav-link.active {
  font-weight: bold;
 
}





/* Style général */
.alert-container {
 
  background-color: #FEFBF5;
  color: #333;
  padding: 20px;
  max-width: 400px;
  margin: 150px auto;
  border-radius: 10px;
  text-align: center;
  position: relative;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  z-index:9999;
  font-family: 'Source Serif Pro', serif; 
  font-size: 1.2rem;
}

.alert-img{
  margin-top:-20px;
}

.alert-container p:first-of-type {
  margin-top:-20px;
}
.alert-container p:nth-of-type(3) {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  margin-top:30px;
}

/* Cacher la checkbox */
#dismiss-alert {
  display: none;
}

/* Quand la checkbox est cochée, on cache le container */
#dismiss-alert:checked + .alert-container {
  display: none;
}

.dismiss-button {
  margin-top:25px;
  margin-bottom:25px;
  padding: 10px 20px;
  background-color: #7ac1b1;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  text-align:center;
}

.dismiss-button:hover {
  background-color: #60a89a;
}

@media (max-width: 600px) {
  .alert-container p:nth-of-type(2), .alert-container p:nth-of-type(3) {
    display:none;
  }

.alert-container {
  max-width: 280px;
  margin: 100px auto;
}
  .dismiss-button {
    width: 100%;
    font-size: 1rem;
    padding: 12px;
  }
}





/* Loader */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFAF2!important;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0; 
}

/* Spinner avec l'image au centre */
.spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  border: 4px solid #c9cdb246; 
  border-top: 4px solid #AE9F9A; 
  border-radius: 50%;
  position: relative;
  animation: spin 1s linear infinite; 
}

/* Image centrée et fixe */
.loader-img {
  position: absolute; 
  width: 100px; 
  height: 100px; 
  z-index: 1;
  pointer-events: none; 
}

/* Animation de rotation pour le spinner */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}










/* Canvas plein écran */
canvas {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}


/* Overlay sombre pour le popup */
#popup-container {
  display: flex;
  justify-content: center; /* Centre le popup horizontalement */
  align-items: center;     /* Centre le popup verticalement */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000; /* Pour être sûr qu'il soit au-dessus des autres éléments */
}

.audio-player {
  display: flex;
  flex-direction: column;  /* Aligne les éléments du player en colonne */
  align-items: flex-start; /* Aligne le contenu à gauche par défaut */
}

#popup-content {
  display: flex;
  flex-direction: column;
  background: #FFFAF2;
  border-radius: 10px;
  overflow: auto;
  width: 400px;
  max-height: 800px;
  padding: 20px;
}

#audio-play-pause { /* icône */
  display: flex;
  justify-content:flex-end; /* Aligne l'icône à droite dans le bouton */
  align-items: center;        /* Centré verticalement */
  background: none;           /* Pas de fond */
  border: none;               /* Pas de bordure */
  cursor: pointer;            /* Change le curseur en pointeur */
  width: 50px;                /* Taille du bouton */
  height: 50px;               /* Taille du bouton */
  margin-left:315px;
  color:black;
}

#audio-play-pause:hover {
  opacity: 1;
  color: #C7BBA5;
}

#audio-play-pause i {
  font-size: 32px;            /* Taille de l'icône */
}




/* Cibler la partie de la barre de progression */
#audio-progress {
  -webkit-appearance: none;  /* Désactive l'apparence par défaut dans Webkit */
  appearance: none;          /* Désactive l'apparence par défaut dans d'autres navigateurs */
  width: 100%;
  height: 10px;
  border-radius: 5px;
}

/* Style de la barre de progression lors du déplacement du curseur */
#audio-progress::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 5px;
  background:#c7bba5/* Couleur de la barre de progression */
 
}

/* Style du curseur (le "thumb") */
#audio-progress::-webkit-slider-thumb {
  -webkit-appearance: none;  /* Supprime l'apparence par défaut du curseur */
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top:-7px;
  background: black;  /* Couleur du curseur */
  cursor: pointer;
 
}

/* Firefox */
#audio-progress::-moz-range-track {
  height: 10px;
  border-radius: 5px;
  background: #c7bba583;  /* Couleur de la barre de progression */
}

#audio-progress::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: black;  /* Couleur du curseur */
  cursor: pointer;
}

/* Edge */
#audio-progress::-ms-track {
  height: 10px;
  border-radius: 5px;
  background: #27272745;  /* Couleur de la barre de progression */
  border-color: transparent;
  border-width: 0;
  color: transparent;
}

#audio-progress::-ms-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: black;  /* Couleur du curseur */
  cursor: pointer;
}







#audio-time {
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
 color:black;
  margin-top: 15px; 
 margin-left:321px;
}


#popup-title {
  font-family: 'Source Serif Pro', serif; 
  font-size: 3rem;
  font-weight: bold;
  color:black ;
  margin-left:15px;
}

#popup-text{
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  margin-top:50px;
  margin-bottom:0px;
  margin-left:15px;
}

#popup-image {
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
  width: 90%; 
  height: auto; 
}

#popup-audio-section {
  margin-top: 15px;
}

/* Lecteur audio dans le popup */
#popup-audio {
  width: 50%;
  height: 32px;
  margin-top: 10px;
}


.info-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index:9999;
}

#info {
  font-size: 28px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: #AE9F9A;
  opacity: 0.7;
}

.info-image {
  display: none;
  position: absolute;
  top: 40px; 
  left: -400px;
  border-radius: 10px;
  width: 310px;
  height: auto;
  z-index: 1000;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  opacity: 0.7;
  overflow: hidden;
}

.info-container:hover .info-image {
  display: block;
}

@media screen and (max-width: 768px) {
  #info {
    display: none;
  }
}


/* Bouton de musique flottant */
#music-toggle {
  font-size: 30px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0.7;
  color: #AE9F9A;
}

#music-toggle:hover {
  opacity: 1;
  color: #C9CDB2;
}






/* Réactive la popup et ajuste le contenu au redimensionnement */


@media (max-width: 768px) {
  #popup-content {
    width: 80%;  
  }

  #popup-title {
    font-size: 1.2rem; 
  }
  #popup-image, #popup-video {
    width: 80%; 
  }


  #audio-play-pause { 
    display: flex;
    justify-content:flex-end; /* Aligne l'icône à droite dans le bouton */
    align-items: center;        /* Centré verticalement */
    background: none;           /* Pas de fond */
    border: none;               /* Pas de bordure */
    cursor: pointer;            /* Change le curseur en pointeur */
    width: 30px;                /* Taille du bouton */
    height: 30px;               /* Taille du bouton */
    margin-left:235px;
    margin-bottom: 15px;
    color: #AE9F9A;
  }

  #audio-time {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
   color:#AE9F9A;
    margin-top: 15px; 
   margin-left:220px;
  }

}








/* HISTORIE */

body.histoire-page{
  background-color: #FFFAF2!important;
}

.text-mobile1, .text-mobile2, .text-mobile2-2, .text-mobile3, .text-mobile3-2, .text-mobile4, .text-mobile4-1 , .text-mobile5,.text-mobile5-1,.text-mobile6{
  display: none!important;  
}

@media (max-width: 768px) {

  .text-desktop {
    display: none!important;
  }
.box{
display:none!important;
  }





  .text-mobile1 {
    display: block!important;
    transform: rotate(90deg) translateZ(-.2px) scale(0.8) translateX(-120vh) translateY(40vh) !important;
  }
  .text-mobile2 {
    display: block!important;
    transform: rotate(90deg) translateZ(-.3px) scale(0.85) translateX(-259vh) translateY(28vh) !important;
   
  }
  .text-mobile2-2 {
    display: block!important;
    transform: rotate(90deg) translateZ(-.3px) scale(0.8) translateX(-198vh) translateY(-20vh) !important;

  }

  .text-mobile3 {
    display: block!important;
    transform: rotate(90deg) translateZ(-.4px) scale(0.9) translateX(-295vh) translateY(13vh) !important;
  }

  .text-mobile3-2 {
    display: block!important;
    transform: rotate(90deg) translateZ(-.5px) scale(0.95) translateX(-430vh) translateY(60vh)!important;
  }
  .text-mobile4 {
    display: block!important;
    transform: rotate(90deg) translateZ(-.5px) scale(01) translateX(-410vh) translateY(-5vh)!important;
  }

  .text-mobile4-1 {
    display: block!important;
    transform: rotate(90deg) translateZ(-.4px) scale(0.9) translateX(-425vh) translateY(-22vh)!important;
  }
  .text-mobile5{
    display: block!important;
    transform: rotate(90deg) translateZ(-.3px) scale(0.9) translateX(-835vh) translateY(55vh)!important;
    
  }
  .text-mobile5-1{
    display: block!important;
    transform: rotate(90deg) translateZ(-.3px) scale(1.2) translateX(-603vh) translateY(13vh)!important;

  }
  .text-mobile6{
    display: block!important;
    transform: rotate(90deg) translateZ(-.3px) scale(0.9) translateX(-930vh) translateY(8vh)!important;
  }


  .scene1-0 {
    transform: rotate(90deg) translateZ(-.1px) scale(2) translateX(30vh) translateY(-11vh)!important;
  }
  
  .scene1-1 {
    transform: rotate(90deg) translateZ(-0.3px) scale(2) translateX(5vh) translateY(-2vh)!important;
  }
  .scene1-2 {
    transform: rotate(90deg) translateZ(-0.5px) scale(1) translateX(-170vh) translateY(-2vh)!important;
  }
  .scene1-3 {
    transform: rotate(90deg) translateZ(-.2px) scale(3) translateX(-45vh) translateY(17vh)!important;
  }
  

  .scene2-0 {
    transform: rotate(90deg) translateZ(-.6px) scale(2) translateX(-70vh) translateY(-15vh) !important;
  }
  .scene2-1 {
    transform: rotate(90deg) translateZ(-.4px) scale(0.5) translateX(-420vh) translateY(75vh) !important;
  }
  .scene2-2 {
    transform: rotate(90deg) translateZ(-.5px) scale(2) translateX(-155vh) translateY(5vh) !important;
  }
  .scene2-3 {
    transform: rotate(90deg) translateZ(-.3px) scale(2) translateX(-145vh) translateY(27vh) !important;
  }


  .scene3-0 {
    transform: rotate(90deg) translateZ(-.6px) scale(2) translateX(-160vh) translateY(-15vh) !important;
  }
  .scene3-1 {
    transform: rotate(90deg) translateZ(-.5px) scale(0.9) translateX(-365vh) translateY(25vh) !important;
  }
  .scene3-2 {
    transform: rotate(90deg) translateZ(-.3px) scale(1) translateX(-498vh) translateY(62vh) !important;
  }
  
  .scene3-3 {
    transform: rotate(90deg) translateZ(-.4px) scale(0.5) translateX(-880vh) translateY(60vh) !important;
  }
  .scene3-4 {
   display:none!important;
      background-color:red;
}
  

  .scene4-0 {
    /*transform: rotate(90deg) translateZ(-.3px) scale(1.9) translateX(-575%) translateY(13vh)!important;*/
    display: none!important; 
  }
  .scene4-1 {
    transform: rotate(90deg) translateZ(-.7px) scale(1.5) translateX(-390vh) translateY(-15vh)!important;
  }
  .scene4-2 {
    transform: rotate(90deg) translateZ(-.4px) scale(1.8) translateX(-305vh) translateY(30vh)!important;
  }
  .scene4-3 {
    transform: rotate(90deg) translateZ(-.2px) scale(1.2) translateX(-540vh) translateY(30vh)!important;
  }
  .scene4-4 {
    
    transform: rotate(90deg) translateZ(-.2px) scale(1) translateX(-635vh) translateY(15vh)!important;
  }

  .scene4-6 {
    transform: rotate(90deg) translateZ(-.3px) scale(1.7) translateX(-90vh) translateY(-8vh)!important;
  }
  .scene4-7 {
    transform: rotate(90deg) translateZ(-.3px) scale(1.3) translateX(-520vh) translateY(25vh)!important;
  }
  .scene4-8 {
    transform: rotate(90deg) translateZ(-.2px) scale(1.5) translateX(-418vh) translateY(24vh)!important;
  }
  .scene5-0 {
    transform: rotate(90deg) translateZ(-.5px) scale(1.5) translateX(-430vh) translateY(-10vh)!important;
  }
  .scene5-2 {
    transform: rotate(90deg) translateZ(-.5px) scale(1.9) translateX(-380vh) translateY(38vh)!important;
  }
  .scene5-3 {
    transform: rotate(90deg) translateZ(-.1px) scale(1) translateX(-870vh) translateY(-5vh)!important;
  }

  .scene6-1 {
   transform: rotate(90deg) translateZ(-.3px) scale(1.5) translateX(-520vh) translateY(-20vh)!important;
  }
  .scene6-2 {

    transform: rotate(90deg) translateZ(-.4px) scale(1.5) translateX(-588vh) translateY(31vh)!important;
  }
  .scene6-3 {
   /* transform: rotate(90deg) translateZ(-.2px) scale(1.3) translateX(-130%) translateY(18vh)!important;*/
   display: none!important;
  }
  .scene6-4{ 
    transform: rotate(90deg) translateZ(-.1px) scale(0.5) translateX(-1860vh) translateY(80vh)!important;
  }
  .scene6-5 {
    
    transform: rotate(90deg) translateZ(-.7px) scale(3) translateX(-295vh) translateY(24vh)!important;
  }


}




/* hide scrollbar */
body.histoire-page {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.external {
  height: 100vh;
  overflow: hidden; 
  width: 100vw; 
}

.external p{
font-family: 'Source Serif Pro', serif; 
font-size: 1.5em;
}

.horizontal-scroll-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vh;
  transform: rotate(-90deg) translate3d(0,-100vh,0);
  transform-origin: right top;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  height: 210vw;
  perspective: 1px;
	transform-style: preserve-3d;
  padding-bottom: -10rem;
  margin-left:-300px;
}

.img-wrapper {
  transform: rotate(90deg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  transform-origin: 50% 50%;
  transform: rotate(90deg) translateZ(.1px) scale(0.9) translateX(0px) translateY(-3vh);
  transition: 1s;
}


.box{
  transform: scaleY(-1) rotate(-90deg) translateZ(.2px) scale(1.5) translateX(25vh) translateY(-80vh) ;
 
}

.box span {
display: block;
width: 50px;
height: 50px;
border-bottom: 3px solid #AE9F9A;
border-right: 3px solid #AE9F9A;
margin: -10px;
animation: animate 2s infinite;
}
.box span:nth-child(2){
  animation-delay: -0.2s;

}
.box span:nth-child(3){
  animation-delay: -0.4s;
}
@keyframes animate{

  0%
  {
    opacity: 0;
    transform: rotate(45deg) translate(-20px, -20px);

  }
  50%
  {
    opacity: 1;
  }
  100%
  {
    opacity: 0;
    transform: rotate(45deg) translate(20px, 20px);

  }
}


.text1 {
  transform: rotate(90deg) translateZ(-.3px) scale(1.3) translateX(15%) translateY(21vh) ;

}
.text2 {
  transform: rotate(90deg) translateZ(-.3px) scale(1.35) translateX(-78vh) translateY(8vh);
}
.text2-2 {
  transform: rotate(90deg) translateZ(-.3px) scale(1.3) translateX(15vh) translateY(-5vh);
}

.text3 {
  transform: rotate(90deg) translateZ(-.5px) scale(1.65) translateX(-25vh) translateY(23vh);
}
.text3-2 {
  transform: rotate(90deg) translateZ(-.4px) scale(1.45) translateX(-115vh) translateY(-20vh);
}
.text4-1 {
  transform: rotate(90deg) translateZ(-.4px) scale(1.6) translateX(-70vh) translateY(-15vh);
}
.text4-2 {
  transform: rotate(90deg) translateZ(-.4px) scale(1.5) translateX(70vh) translateY(-10vh);
}
.text5-1 {
  transform: rotate(90deg) translateZ(-.3px) scale(1.3) translateX(-105vh) translateY(-10vh);
}

.text6-0 {
  transform: rotate(90deg) translateZ(-.4px) scale(1.4) translateX(-95vh) translateY(15vh);
}




.scene1-0 {
  transform: rotate(90deg) translateZ(-.1px) scale(3) translateX(50%) translateY(-5vh);
}

.scene1-1 {
  transform: rotate(90deg) translateZ(-0.3px) scale(3) translateX(20vh) translateY(2vh);
}
.scene1-2 {
  transform: rotate(90deg) translateZ(-0.5px) scale(2) translateX(-112vh) translateY(8vh);
}
.scene1-3 {
  transform: rotate(90deg) translateZ(-.2px) scale(3) translateX(-25vh) translateY(17vh) ;
}



.scene2-0 {
  transform: rotate(90deg) translateZ(-.6px) scale(3) translateX(-20vh) translateY(-10vh) ;
}
.scene2-1 {
  transform: rotate(90deg) translateZ(-.6px) scale(0.8) translateX(-150vh) translateY(50vh) ;
}
.scene2-2 {
  transform: rotate(90deg) translateZ(-.3px) scale(2) translateX(-95vh) translateY(5vh) ;
}
.scene2-3 {
  transform: rotate(90deg) translateZ(-.4px) scale(3) translateX(-40vh) translateY(18vh) ;
}


.scene3-0 {
  transform: rotate(90deg) translateZ(-.6px) scale(4) translateX(-20vh) translateY(-2vh);
}
.scene3-1 {
  transform: rotate(90deg) translateZ(-.2px) scale(1.5) translateX(30vh) translateY(4vh);
}
.scene3-2 {
  transform: rotate(90deg) translateZ(-.3px) scale(2) translateX(-110vh) translateY(30vh);
}

.scene3-3 {
  transform: rotate(90deg) translateZ(-.4px) scale(0.8) translateX(-100vh) translateY(27vh);
}
.scene3-4 {
  transform: rotate(90deg) translateZ(-.1px) scale(0.8) translateX(-300vh) translateY(60vh);
}



.scene4-0 {
  transform: rotate(90deg) translateZ(-.3px) scale(3) translateX(-30vh) translateY(-04vh);
}
.scene4-1 {
  transform: rotate(90deg) translateZ(-.1px) scale(1.4) translateX(-210vh) translateY(15vh);
}
.scene4-2 {
  transform: rotate(90deg) translateZ(-.6px) scale(3) translateX(-70vh) translateY(17vh);
}
.scene4-3 {
  transform: rotate(90deg) translateZ(-.2px) scale(1.5) translateX(-210vh) translateY(18vh);
}
.scene4-4 {
  transform: rotate(90deg) translateZ(-.5px) scale(1.5) translateX(-160vh) translateY(13vh);
}
.scene4-5 {
  transform: rotate(90deg) translateZ(-.1px) scale(2) translateX(-80vh) translateY(-8vh);
}
.scene4-6 {
  transform: rotate(90deg) translateZ(-.3px) scale(1.7) translateX(-90vh) translateY(-8vh);
}
.scene4-7 {
  transform: rotate(90deg) translateZ(-.3px) scale(2) translateX(-115vh) translateY(19vh);
}
.scene4-8 {
  transform: rotate(90deg) translateZ(-.2px) scale(3) translateX(-55vh) translateY(16vh);
}

.scene5-0 {
  transform: rotate(90deg) translateZ(-.5px) scale(1.5) translateX(-110vh) translateY(-10vh);
}
.scene5-2 {
  transform: rotate(90deg) translateZ(-.5px) scale(3) translateX(-60vh) translateY(20vh);
}
.scene5-3 {
  transform: rotate(90deg) translateZ(-.1px) scale(1.1) translateX(-300vh) translateY(5vh);
}
.scene5-4 {
  transform: rotate(90deg) translateZ(-.3px) scale(1.5) translateX(-130vh) translateY(30vh);
}

.scene6-1 {
  transform: rotate(90deg) translateZ(-.3px) scale(3) translateX(-30vh) translateY(-8vh);
}
.scene6-2 {
  transform: rotate(90deg) translateZ(-.4px) scale(2) translateX(-105vh) translateY(19vh);
}
.scene6-3 {
  transform: rotate(90deg) translateZ(-.2px) scale(1.8) translateX(-30vh) translateY(-4vh);
}
.scene6-4 {
  transform: rotate(90deg) translateZ(-.1px) scale(0.8) translateX(-240vh) translateY(50vh);
}
.scene6-5 {
  transform: rotate(90deg) translateZ(-.3px) scale(3) translateX(-50vh) translateY(18vh);
}


.img-wrapper img {
  max-width: 45vh;
  max-height: 50vh;
  transition: .5s;
  vertical-align: top;
  filter: saturate(40%) sepia(30%) hue-rotate(5deg);
}