/* Case Elastic, modèle v10 validé par Jordan le 04/11/2026 : hero vidéo
   en mockup, titre sur l'assise du canapé, visuels Figma, grille du design
   system, mosaïque de pages. Méthode : voir CHANTIER.md, section 5bis. */
.pj-cover--video { overflow: hidden; }
.pj-cover-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.pj-cover-veil { background: linear-gradient(20deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.14) 38%, rgba(0, 0, 0, 0) 62%); }
.pj-cover-content {
  align-items: flex-start;
  text-align: left;
  justify-content: flex-end;
  padding-left: clamp(24px, 3.5vw, 64px);
  padding-right: 40%;
  padding-bottom: clamp(32px, 6vh, 64px);
}
.pj-cover-content .pj-hero-cats { text-align: left; }
/* Figures : contenu composé ancré haut-gauche, la coupe mobile 4:3
   garde le haut-gauche (solution générale recadrages) */
.pj-fig img { object-position: left top; }
.pj-fig .plx-media { background-position: left top; }
/* Écrans mobiles centrés, largeur calée sur le cadre, nav
   au bord haut au repos. La parallaxe déplace le calque de 22 px au
   plus (data-plx) : il dépasse de 22 px en haut et en bas, l'image
   commence 22 px plus bas (padding + content-box) et la marge prend
   l'indigo de la nav, qui s'allonge à peine quand l'image bouge */
.pj-fig--ecran .plx-media {
  inset: auto 0;
  top: -22px;
  height: calc(100% + 44px);
  padding-top: 22px;
  box-sizing: border-box;
  background-size: 100% auto;
  background-position: center top;
  background-origin: content-box;
  background-color: #1a0f4d;
}
@media (max-width: 860px) {
  .pj-fig--ecran .pj-fig-btn { aspect-ratio: 4 / 5; }
}
/* Bande velours bleu : vidéo calée en bas, la base du MacBook
   remonte au-dessus de la citation */
.pj-band-media video { object-position: center 100%; }
@media (max-width: 860px) and (max-height: 780px) {
  .pj-band-media video { top: auto; height: 120%; }
}
@media (max-width: 860px) {
  .pj-cover-content { padding-right: 72px; }
  .pj-cover-video { object-position: 46% center; }
  /* La scène 4:3 remplit la hauteur : le seul canapé libre assez
     grand est l'assise sous le MacBook (17 % de la hauteur), tout
     en bas. padding-right : place du bouton pause */
  .pj-cover-content { padding-bottom: 16px; gap: 8px; }
}
@media (max-width: 860px) and (max-height: 720px) {
  /* Téléphones bas : scène agrandie depuis le bas pour remonter
     le MacBook et garder 20 px de canapé au-dessus du titre */
  .pj-cover-video { top: auto; height: 114%; }
}
@media (min-aspect-ratio: 19/10) {
  /* Écrans très larges : la scène remonte peu, le coin avant du
     clavier descend près du bas ; expertises en deux lignes
     courtes pour rester à sa gauche */
  .pj-cover-content .pj-hero-cats { max-width: 210px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .pj-cover-content { padding-left: 24px; padding-bottom: 16px; gap: 8px; }
  .pj-cover-content .pj-hero-cats { max-width: 210px; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 860px) {
  /* Téléphones en paysage : cadrage plus bas, le haut de l'écran
     passe sous l'en-tête */
  .pj-cover-video { top: 0; height: 100%; object-position: center 85%; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 860px) and (max-aspect-ratio: 9/5) {
  .pj-cover-video { object-position: center 100%; }
}
/* Cockpit : même calage que les écrans centrés, l'image
   s'arrête au bord droit du cadre, la marge prend le lavande du
   panneau. Mobile : 6:7, sinon le 4:3 perd le tableau */
.pj-fig--cockpit .plx-media {
  inset: auto 0;
  top: -22px;
  height: calc(100% + 44px);
  padding-top: 22px;
  box-sizing: border-box;
  background-size: 100% auto;
  background-position: center top;
  background-origin: content-box;
  background-color: #ecebff;
}
@media (max-width: 860px) {
  .pj-fig--cockpit .pj-fig-btn { aspect-ratio: 6 / 7; }
}
/* Image pleine (photo ou écran sans marge unie) : mêmes 22 px de parallaxe,
   l'image couvre le calque, ni bande de couleur ni perte sur les côtés */
.pj-fig--juste .plx-media {
  inset: auto 0;
  top: -22px;
  height: calc(100% + 44px);
  background-size: cover;
  background-position: center top;
}
@media (max-width: 860px) {
  .pj-fig--juste .pj-fig-btn { aspect-ratio: 6 / 7; }
}
/* Mobile : sous 768 px en portrait, l'iPhone photo
   ls.graphics plein cadre. Le film est déjà recadré sur le téléphone :
   on annule les calages de la scène MacBook */
@media (max-width: 767px) and (orientation: portrait) {
  .pj-cover-video, .pj-band-media video { top: 0; height: 100%; object-position: center; }
  /* coussin gris clair derrière l'en-tête de Quatre : voile haut pour
     le contraste, en plus du voile bas d'origine */
  .pj-band-veil {
    background: linear-gradient(180deg, rgba(26, 26, 26, 0.6) 0, rgba(26, 26, 26, 0) 130px),
      linear-gradient(180deg, rgba(26, 26, 26, 0) 45%, rgba(26, 26, 26, 0.55) 74%, var(--night) 100%);
  }
}
/* Mosaïque pleine largeur. Le calque de parallaxe fait 116 % :
   l'image est rendue à cette hauteur, sans zoom ni perte sur les côtés */
.pj-mosaic { height: auto; margin-block: var(--pj-gap); border-radius: 0; background-color: #120a36; }
.pj-mosaic .pj-fig-btn { height: auto; aspect-ratio: 1440 / 820; border-radius: 0; }
.pj-mosaic .plx-media { background-position: center; }
/* grille du design system : entière dans le cadre, marge indigo
   comprise. contain et pas de parallaxe : rien n'est rogné */
.pj-fig--grille .pj-fig-btn { background-color: #1a0f4d; }
.pj-fig--grille .plx-media { inset: 0; height: 100%; transform: none !important; background-size: contain; background-position: center; }
@media (max-width: 860px) {
  .pj-mosaic .pj-fig-btn { aspect-ratio: 3 / 4; }
  .pj-mosaic .plx-media { background-image: url('/assets/cases/elastic/mosaique-mobile.jpg') !important; }
  .pj-fig--grille .pj-fig-btn { aspect-ratio: 1 / 1; }
  /* le bouton reste dans la marge indigo autant que possible */
  .pj-fig--grille .pj-fig-zoom { right: 4px; bottom: 4px; transform: scale(.8); transform-origin: 100% 100%; }
}