/* ══════════════════════════════════════════════════════════════
   PROTOTYPE RESPONSIVE — CERTA+85
   - Horizontal / Landscape : certa85_com_H.pdf (21 planches),
     1 page visible à la fois, pleine hauteur (100dvh),
     marges de 10px en haut et en bas, bords blancs du même blanc
     pur que les pages (#ffffff sans ombre ni démarcation),
     écart de 15px entre les pages.
   - Vertical / Portrait : certa85_com_V.pdf (41 pages),
     1 page à la fois, visuel adapté à la largeur d'écran,
     écart de 15px entre les pages.
   - Tous les textes, icônes et éléments graphiques de la planche restent
     100% visibles et au premier plan (rendu natif de la page WebP).
   - Les images d'œuvres (JPG) sont positionnées en arrière-plan
     transparent, servant de cible native invisible pour le clic droit
     et le toucher prolongé tactile sans recouvrir le contenu graphique.
   - Aucun numéro de page affiché (suivi désactivé).
   ══════════════════════════════════════════════════════════════ */

.v-responsive {
  background: #ffffff;
  color: var(--ultra, #000055);
  min-height: 100vh;
  width: 100%;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}

/* ────────── HORIZONTAL / PAYSAGE ────────── */
@media (orientation: landscape) and (min-aspect-ratio: 1/1) {
  .v-responsive .resp-portrait {
    display: none;
  }

  .v-responsive .resp-landscape {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    width: 100%;
    /* Écart de 15px entre chaque page */
    gap: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .v-responsive .resp-h-slide {
    width: 100%;
    height: calc(100vh - 20px);
    height: calc(100dvh - 20px);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    position: relative;
    box-sizing: border-box;
    scroll-snap-align: center;
  }

  .v-responsive .resp-h-page-wrap {
    position: relative;
    /* Ratio InDesign 420mm x 297mm = 1190.55pt / 841.89pt = 1.41414 */
    aspect-ratio: 1190.55 / 841.89;
    height: calc(100vh - 20px);
    height: calc(100dvh - 20px);
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
    max-width: 100%;
    width: min(100%, calc((100vh - 20px) * (1190.55 / 841.89)));
    width: min(100%, calc((100dvh - 20px) * (1190.55 / 841.89)));
    background: #ffffff;
    /* Pas d'ombre portée pour garantir que les marges et bordures
       sont rigoureusement du même blanc pur (#ffffff) que les pages */
    box-shadow: none;
    border: none;
    outline: none;
    container-type: size;
  }

  .v-responsive .resp-h-page-wrap img.resp-page-bg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 1;
  }

  .v-responsive .resp-h-page-wrap .pdf-text-span {
    font-size: calc(var(--fs) * 1cqh);
  }
}

/* ────────── VERTICAL / PORTRAIT ────────── */
@media (orientation: portrait), (max-aspect-ratio: 1/1) {
  .v-responsive .resp-landscape {
    display: none;
  }

  .v-responsive .resp-portrait {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    width: 100%;
    max-width: 100vw;
    gap: 15px;
    padding-bottom: 5rem;
    overflow-x: hidden;
  }

  .v-responsive .resp-v-slide {
    width: 100%;
    max-width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    position: relative;
    overflow: hidden;
  }

  .v-responsive .resp-v-page-wrap {
    position: relative;
    aspect-ratio: 595.276 / 841.89;
    width: 100%;
    max-width: 100vw;
    height: auto;
    background: #ffffff;
    box-shadow: none;
    border: none;
    outline: none;
    container-type: inline-size;
  }

  .v-responsive .resp-v-page-wrap img.resp-page-bg {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    position: relative;
    z-index: 1;
  }

  .v-responsive .resp-v-page-wrap .pdf-text-span {
    font-size: calc(var(--fs) * 1.41427cqi);
  }
}

/* ────────── CALQUE DES VISUELS D'ŒUVRES (JPG EN ARRIÈRE-PLAN DU CONTENU) ────────── */
/* Placé au-dessus du fond WebP pour recevoir les événements natifs (clic droit / appui long),
   mais rendu totalement transparent (opacity: 0.001) afin de laisser 100% visibles
   tous les graphismes, textes, logos, titres et icônes intégrés à la planche ! */
.resp-artworks-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.resp-artwork-item {
  position: absolute;
  pointer-events: auto;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none;
  border: none;
}

.resp-artwork-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: auto;
  user-select: auto;
  -webkit-user-select: auto;
  -webkit-touch-callout: default;
  border-radius: 0;
  /* Opacité quasi-nulle : l'image reste présente dans le DOM et le layout
     afin que le clic droit natif et l'appui long mobile ciblent le fichier JPG,
     tout en garantissant que les éléments graphiques et textes de la page
     sont parfaitement visibles sans être recouverts */
  opacity: 0.001;
}

/* ────────── TEXT LAYER SÉLECTIONNABLE (AU-DESSUS DES IMAGES) ────────── */
.pdf-text-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.pdf-text-span {
  position: absolute;
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
  color: transparent;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1;
  font-family: var(--f-sans);
  background: transparent;
}

.pdf-text-span::selection {
  background: rgba(0, 0, 85, 0.22);
  color: transparent;
}
.pdf-text-span::-moz-selection {
  background: rgba(0, 0, 85, 0.22);
  color: transparent;
}

/* ────────── HYPERLIENS DANS LES ICÔNES (AU-DESSUS DU TOUT) ────────── */
.resp-hotspot {
  position: absolute;
  display: block;
  z-index: 10;
  cursor: pointer;
  border-radius: 4px;
  background: transparent;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s var(--eo);
}

.resp-hotspot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 8px;
  background: rgba(0, 0, 85, 0);
  transition: background 0.18s var(--eo), transform 0.18s var(--eo);
}

.resp-hotspot:hover::after,
.resp-hotspot:focus-visible::after {
  background: rgba(0, 0, 85, 0.08);
  box-shadow: 0 0 14px rgba(0, 0, 85, 0.22);
}

.resp-hotspot:active::after {
  background: rgba(0, 0, 85, 0.18);
  transform: scale(0.96);
}

.resp-hotspot[data-tip]::before {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px 9px;
  background: rgba(0, 0, 85, 0.94);
  color: #ffffff;
  font-family: var(--f-disp);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  white-space: nowrap;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s var(--eo), transform 0.18s var(--eo);
  z-index: 30;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.resp-hotspot:hover::before,
.resp-hotspot:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}