body {

    background-image: url(assets/images/pyramid-background.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;


}


* { margin:0; padding:0; box-sizing:border-box; }

#lang-btn {

  background-color: #e2d799;
  font-size: 2.7rem;
  color: #a97745;
  border-color: #a97745;
  border-width: 7px;
  border-radius: 15px;
}

.accueil {
  
  position: relative;
  width: 900px;
  max-width: 120%;
  margin: 0 auto;
  background-image: url('assets/images/stone-background-reversed.webp');
  background-size: cover;
  background-position: center;
}

p {

  font-family: "Irish Grover", system-ui;
  color: white;
  -webkit-text-stroke: 0.3px black;
  font-size: 1.75rem;


}

.accueil h1 {

  font-family: "Irish Grover", system-ui;
  color: white;
  text-align: center;
  font-size: 1.95rem;
  -webkit-text-stroke: 0.8px #A97644;

}

.accueil button {

margin: 0 auto;
margin-top: 90px;


}


.diagonalText {

  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 40vh;
  padding: clamp(20px, 5vw, 10px);
}

.text-block {
  max-width: 470px;
}

.text-block.left {
  justify-self: start;
  align-self: start;
}

.text-block.right {
  justify-self: end;
  align-self: end;
  text-align: right;
}


.lang-toggle {
  position: fixed;  /* ← reste visible même en scrollant */
  top: 20px;
  right: 20px;
  z-index: 1000;    /* ← reste au-dessus de tout le reste */
}

/* ── STICKY SCENE ── */
.scene {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: flex-start;  /* ← plus center */
  justify-content: center;
  overflow: hidden;
}

.gallery {

  display: grid;
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr;    
  gap: 10px; 
}



.gallery img {

  width: 100%;
  height: 100%;
  object-fit: cover;

}
.button_main {
  
  font-family: "Irish Grover", system-ui;
  margin: 15px auto;
  

  display: block;
  width: 300px;
  padding: 18px 0;
  background-color: #DA8700;
  border: 1.5px solid white;
  border-radius: 2px;
  color: #fff8e8;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.18),
    0 4px 10px rgba(100, 50, 0, 0.35);
  transition: background-color 0.18s, transform 0.1s;

}

.button_main:hover {

  
  background-image: url(assets/images/button-hover.webp);
  transform: scale(1.2);
  
}


.container {
  position: relative;
  width: 900px;
  max-width: 120%;
  margin: 0 auto;
  min-height: 100vh;
  height: 1500px;
  background-image: url('assets/images/stone-background.webp');
  background-size: cover;
  background-position: center;
}

#gameCanvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 4px;
  /* Optionnel : légère ombre pour l'intégrer visuellement */
  box-shadow: inset 0 0 20px rgba(80, 40, 0, 1);
}




/* ── WRAPPER ── */
.scroll-wrapper {
  position: relative;
  width: 90%;
  max-width: 1000px;
  margin-top: 0;        /* ← colle en haut */
}

/* ── ROULEAU HAUT : parchemin fermé ──
   Image 500×324px, mais seulement les 88 premiers px sont non-transparents.
   On coupe à exactement 88px pour qu'il colle parfaitement sur le inner.
*/
.roll-closed {
  width: 100%;
  height: 88px;          /* hauteur exacte de la partie visible */
  overflow: hidden;
  position: relative;
  z-index: 10;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.7));
}
.roll-closed img {
  width: 100%;
  display: block;
  /* On affiche l'image depuis le haut */
  margin-top: 0;
}

/* ── CORPS DU PARCHEMIN qui se déroule ──
   Colle juste en dessous du rouleau haut.
   overflow:hidden → on ne voit que la hauteur définie par JS.
*/
.parchment-body {
  width: 100%;
  overflow: hidden;
  height: 0;             /* part de 0, JS agrandit */
  position: relative;
  z-index: 5;
  /* Pas de margin négatif : on colle directement sous roll-closed */
}

/* L'image inner est décalée vers le haut de 71px pour masquer son propre rouleau haut
   (déjà affiché par roll-closed) */
.parchment-body img {
  width: 100%;
  display: block;
  margin-top: -71px;     /* cache le rouleau haut du inner */
  /* L'image totale fait 573px, moins 71px = 502px de corps visible au max */
}

/* ── CONTENU ── */
.content {
  position: absolute;
  /* Zone sûre calculée pixel par pixel :
     top 50px = sous le rouleau haut, bottom 192px = au-dessus du rouleau bas */
  top: 50px;
  bottom: 192px;
  left: 12%;
  right: 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
  text-align: center;
  color: #3b2208;
  max-height: 540px;

}
.content.visible {
  opacity: 1;
  transform: translateY(0);
}
.content h1 {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #2e1a06;
}
.content .divider {
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #8a6030, transparent);
  margin: 0.8rem auto;
}
.content p {
  font-family: "Irish Grover", system-ui;
  font-size: 1.3rem;
  line-height: 1.8;
  color: #4a3010;
}
.content .ornament {
  font-size: 1.3rem;
  color: #8a6030;
  margin: 0.4rem 0;
}

@keyframes bounce {
  0%,100% { transform: rotate(45deg) translateY(0); }
  50%      { transform: rotate(45deg) translateY(5px); }
}

@media (max-width: 768px) {
  















}