body {
  background: #111;
  margin: 0;
  font-family: Arial, sans-serif;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}

.viewer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 100vw;
  max-height: 100vh;
  padding: 10px;
}

.viewer-header {
  width: 100%;
  position: relative;
}

#fullscreenBtn {
  position: fixed;
  top: 20px;        
  right: 20px;      
  z-index: 10;

  background: #222;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}



.audio-button {
  background: white;
  border: 1px solid #999;
  border-radius: 50%;
  padding: 8px;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}
.audio-button:hover {
  transform: scale(1.2);
}






#fullscreenBtn svg {
	position: fixed;
  stroke: white;
  width: 24px;
  height: 24px;
}

#scrollModeBtn {
  position: fixed;
  top: 20px;        
  right: 70px; 
  z-index: 10;
  font-family: Helvetica, sans-serif;

  background: #222;
  border: none;
  cursor: pointer;
  padding: 9.5px 10px;
  border-radius: 4px;
  display: flex;
  font-size: 1rem;
  color: white;
}

.nav-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.pages {
  display: flex;
  flex-direction: row-reverse;
  gap: 10px;
  overflow: hidden;
}

canvas {
   display: block;
  background: white;
  margin: 0 auto;
  padding: 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

  width: 100% !important;
  height: auto !important;
  max-width: 100vw;
  max-height: 90vh;
  object-fit: contain;
}

button {
  background-color: #222;
  color: white;
  border: none;
  font-size: 2rem;
  padding: 10px 20px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #555;
}

#next.start-mode {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: Helvetica, sans-serif;
  font-size: 1.5em;
  padding: 0.5em 1em;
    margin-left: -50px;
}

#next.start-mode .arrow {
  font-size: 1.5em; 
}

#next.start-mode .label {
  font-size: 0.75em; 
  color: #fff;        
  opacity: 0.8;
   margin-top: 0.3em; /* décale légèrement le texte vers le bas */
}

@media (max-width: 768px) {
  #next, #prev,
  #fullscreenBtn {
    display: none;
  }
  #scrollModeBtn {
  display: none;
}

  .pages {
    flex-direction: column !important;
    overflow-y: auto;
    max-height: 90vh;
    width: 100vw;
  }

   canvas {
    max-width: 100vw !important;
    max-height: none !important;
    margin: none;
    box-shadow: none;
    background: white;
	 image-rendering: auto;
  }
}

html:fullscreen,
body:fullscreen {
  background-color: #111 !important;
}


.viewer.fullscreen canvas {
  width: 100vw;         
  height: auto;          
  max-height: 100vh;     
  object-fit: contain;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none;
  display: block;
}


.viewer.fullscreen .pages {
  gap: 0;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.page-animation {
  animation: pageFlip 0.6s ease forwards;
}

@keyframes pageFlip {
  0% {
    opacity: 0;
    transform: rotateY(10deg) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: rotateY(0) scale(1);
  }
}

.hidden {
  display: none;
}


.page-wrapper {
  perspective: 1200px;
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-inner {
  transform-origin: left center;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.page-turn-right {
	 transform-origin: right center;
  animation: turnPageRight 0.8s ease forwards;
}

.page-turn-left {
  transform-origin: left center;
  animation: turnPageLeft 0.8s ease forwards;
}

@keyframes turnPageRight {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(120deg); }
}

@keyframes turnPageLeft {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(-120deg); }
}