/* ==========================================================
   BASE
   ========================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #242424;
  color: #ffffff;
}


/* ==========================================================
   ORDINATEUR : FLIPBOOK
   ========================================================== */

#desktop-reader {
  min-height: 100vh;
  width: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#book {
  width: min(92vw, 1200px);
  height: min(82vh, 850px);
}

.desktop-toolbar,
.mobile-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;

  margin-top: 16px;

  font-size: 15px;
  font-weight: 600;
}

.desktop-toolbar button,
.mobile-toolbar button {
  width: 44px;
  height: 44px;

  border: 0;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;

  font-size: 24px;
  line-height: 1;

  cursor: pointer;
}

.desktop-toolbar button:hover {
  background: rgba(255, 255, 255, 0.25);
}


/* ==========================================================
   MOBILE : UNE PAGE HD
   ========================================================== */

#mobile-reader {
  display: none;
}


/* ==========================================================
   TÉLÉPHONE / TABLETTE ÉTROITE
   ========================================================== */

@media (max-width: 768px) {

  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  #desktop-reader {
    display: none;
  }

  #mobile-reader {
    display: flex;
    flex-direction: column;

    width: 100vw;
    height: 100dvh;

    padding:
      env(safe-area-inset-top)
      env(safe-area-inset-right)
      env(safe-area-inset-bottom)
      env(safe-area-inset-left);

    background: #181818;
  }

  #mobile-stage {
    position: relative;

    flex: 1 1 auto;
    min-height: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    /*
     * Autorise le navigateur à gérer le mouvement vertical,
     * tout en laissant le JS détecter les gestes horizontaux.
     */
    touch-action: pan-y;
  }

  #mobile-page {
    display: block;

    /*
     * L'image source reste chargée dans sa définition native.
     * CSS ne la redimensionne que visuellement.
     */
    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    image-rendering: auto;
  }

  /*
   * Deux zones invisibles couvrent chacune 28 % de la page.
   * Elles rendent la navigation fiable même si le swipe échoue.
   */
  .tap-zone {
    position: absolute;
    top: 0;
    bottom: 0;

    width: 28%;

    border: 0;
    padding: 0;

    background: transparent;

    z-index: 5;
  }

  .tap-left {
    left: 0;
  }

  .tap-right {
    right: 0;
  }

  .mobile-toolbar {
    flex: 0 0 auto;

    height: 58px;
    margin: 0;

    padding: 7px 12px;

    background: rgba(0, 0, 0, 0.45);

    /*
     * empêche un zoom involontaire du texte sur certains navigateurs
     */
    -webkit-text-size-adjust: 100%;
  }

  .mobile-toolbar button {
    width: 42px;
    height: 42px;

    background: rgba(255, 255, 255, 0.14);
  }

  #mobile-counter {
    min-width: 72px;
    text-align: center;
  }
}


/* ==========================================================
   TRÈS PETITS ÉCRANS
   ========================================================== */

@media (max-width: 380px) {

  .mobile-toolbar {
    height: 52px;
  }

  .mobile-toolbar button {
    width: 38px;
    height: 38px;
  }
}