/* ==========================================================================
   Visionneuse de document — plaquettes et programmes des formations.
   Une seule page pour les quinze PDF : l'identité du document vient de
   includes/documents.php, la mise en page est la même pour tous. Un gabarit
   plutôt qu'une page par fichier — quinze pages à maintenir en parallèle
   auraient divergé au premier changement de charte.
   La page ne porte aucun bouton : le document occupe toute la largeur, et la
   visionneuse du navigateur apporte déjà ses propres commandes — pages,
   agrandissement, impression, enregistrement. En doubler une partie en haut de
   page n'aurait fait qu'encombrer la lecture.
   ========================================================================== */

.document {
  padding: var(--u12) 0 var(--u16);
  background: var(--black);
}

.document__tete {
  margin-bottom: var(--u6);
}

.document__titre {
  margin: var(--u2) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: none;
  color: var(--white);
}

.document__titre::after {
  content: "";
  display: block;
  width: 80px;
  height: 2px;
  margin-top: var(--u4);
  background: var(--red);
}

/* --------------------------------------------------------------------------
   L'aperçu, pleine largeur.
   -------------------------------------------------------------------------- */

.document__cadre {
  overflow: hidden;
  height: min(82svh, 1000px);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-media);
  background: var(--surface);
}

@supports not (height: 100svh) {
  .document__cadre { height: min(82vh, 1000px); }
}

.document__apercu {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.document__secours {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--u6);
}

.document__secours p {
  margin: 0;
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.8;
  text-align: center;
  color: var(--beige);
}

.document__secours a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: var(--cursor-pointer);
}

.document__secours a:hover,
.document__secours a:focus-visible {
  color: var(--beige);
}

.document__retour {
  margin: var(--u6) 0 0;
}

@media (max-width: 767px) {
  .document {
    padding-top: var(--u8);
  }
  .document__cadre {
    height: min(72svh, 640px);
  }
}