/* Case Topkapi (AREAL) : réglages propres à la case, chargés après case-tuiles.css. */
.pj-mosaic { background-color: #00806f; }
.pj-mosaic .pj-fig-btn { aspect-ratio: 1440 / 900; }
/* téléphone en portrait : deux colonnes d'écrans. Boutons dans la bande de fond laissée en bas */
@media (max-width: 767px) and (orientation: portrait) {
  .pj-mosaic .pj-fig-btn { aspect-ratio: 390 / 786; }
  .pj-mosaic .pj-fig-zoom { right: 12px; bottom: 12px; transform: scale(.75); transform-origin: 100% 100%; }
  .pj-mosaic .pj-fig-play { right: 52px; bottom: 12px; transform: scale(.75); transform-origin: 100% 100%; }
}
/* bandes d'écrans : le voile ne descend qu'en bas, pour garder les interfaces claires et la citation lisible */
.pj-band-pin:has(video[data-src*="areal/bande"], video[src*="areal/bande"]) .pj-band-veil {
  background: linear-gradient(180deg, rgba(26, 26, 26, 0.4) 0, rgba(26, 26, 26, 0) 130px, rgba(26, 26, 26, 0) 58%, rgba(26, 26, 26, 0.72) 80%, var(--night) 100%);
}
/* bandes sur fond plein : la citation se lit sans voile, seul le bas rejoint la page */
.pj-band-pin:has(video[data-src*="areal/bande-2-v3"], video[src*="areal/bande-2-v3"], video[data-src*="areal/bande-3-v3"], video[src*="areal/bande-3-v3"]) .pj-band-veil {
  background: linear-gradient(180deg, rgba(26, 26, 26, 0) 84%, var(--night) 100%);
}

/* bandes v5 : l'écran entier, sous le menu, jamais rogné, quelle que soit la largeur de fenêtre */
@media (min-width: 768px), (orientation: landscape) {
  .pj-band-media video[src*="areal/bande"], .pj-band-media video[data-src*="areal/bande"] { top: clamp(72px, 9.5vh, 96px); bottom: auto; height: calc(100% - clamp(72px, 9.5vh, 96px)); object-fit: contain; object-position: center top; }
  .pj-band-pin:has(video[src*="areal/bande"], video[data-src*="areal/bande"]) .pj-band-veil { background: linear-gradient(180deg, rgba(26, 26, 26, 0) 66%, rgba(26, 26, 26, 0.78) 86%, var(--night) 100%); }
  .pj-band-media:has(video[src*="areal/bande-v"], video[data-src*="areal/bande-v"]) { background-color: #96d3e6; }
  .pj-band-media:has(video[src*="areal/bande-2-v"], video[data-src*="areal/bande-2-v"]) { background-color: #00806f; }
  .pj-band-media:has(video[src*="areal/bande-3-v"], video[data-src*="areal/bande-3-v"]) { background-color: #1f2a28; }
}