/* Cases du modèle de référence (Saint-Christol, Happyscope) : ce que ces pages changent par
   rapport à projet.css, chargé sur elles seules pour ne pas toucher aux autres cases. */

/* Bouton play/pause : toujours en bas à droite, à gauche du badge d'agrandissement */
.pj-fig-play {
  top: auto;
  bottom: clamp(16px, 1.85vw, 32px);
  right: calc(clamp(16px, 1.85vw, 32px) + clamp(36px, 2.78vw, 48px) + 8px);
}

/* Hero vidéo : marge du titre, sur la ligne du titre */
.pj-cover-toggle {
  right: clamp(24px, 3.5vw, 64px);
  bottom: clamp(32px, 6vh, 64px);
  z-index: 5;
}

/* Bande vidéo : marge du contenu, sur la ligne de la citation */
.pj-band-toggle {
  right: 0;
  bottom: clamp(40px, 10vh, 128px);
  pointer-events: auto;
}

@media (max-width: 860px) {
  .pj-cover-toggle { right: 24px; bottom: 16px; }
  .pj-band-toggle { bottom: 16px; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .pj-cover-toggle { right: 24px; bottom: 16px; }
}

/* Bande : le média reste épinglé et se fond pendant que le chapitre suivant monte par-dessus */
.pj-band {
  height: 200vh;
  height: 200svh;
  margin-top: var(--pj-gap);
  margin-bottom: -100vh;
  margin-bottom: -100svh;
}

.pj-section:has(> .pj-band) + * {
  position: relative;
  padding-top: var(--pj-gap);
  background: linear-gradient(180deg, rgba(26, 26, 26, 0) 0, var(--night) 14vh);
}

@media (max-width: 860px) {
  .pj-section:has(> .pj-band) + * { padding-top: 13vh; }
}

/* Crédit avec lien retour */
a.pj-credit-name {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* carte prix : le nom du prix et sa plateforme sous le laurier */
.pj-out-card--prize .pj-out-prize-desc { margin: 14px auto 0; max-width: 300px; text-align: center; }

/* mobile : la tuile se recadre autour de son écran */
@media (max-width: 860px) {
  .pj-fig[style*="--ar-mobile"] .pj-fig-btn { aspect-ratio: var(--ar-mobile); }
}

/* fenêtre plus large que la vidéo : le haut et le bas sont rognés, on garde le mockup entier sous le menu */
@media (min-aspect-ratio: 17/10) {
  .pj-band-pin .pj-band-media video { top: 0; height: 100%; object-position: center 30%; }
}