/* ============================================================
   Variante hero « split » — titre à gauche, vidéo en carte à droite.
   Charge APRÈS styles.css et ne modifie que le hero + le header.
   ============================================================ */

/* Header lisible sur fond clair dès le haut (le split n'a pas d'image plein-cadre) */
.head{ background:var(--sand); color:var(--ink); border-bottom:1px solid var(--line) }

.hsplit{ min-height:100svh; background:var(--sand);
  display:grid; grid-template-columns:1.02fr 1fr; align-items:center;
  gap:clamp(2rem,5vw,5.5rem);
  padding:clamp(6rem,10vw,7.5rem) var(--pad) clamp(3rem,6vw,5rem) }

/* --- Colonne texte --- */
.hsplit__text{ max-width:40ch }
.hsplit__text .ovl{ display:block; margin-bottom:1.5rem }
.hsplit__title{ font-family:var(--serif); font-weight:300; color:var(--ink);
  font-size:clamp(3.2rem,7.2vw,6.6rem); line-height:.95; letter-spacing:.005em; margin-bottom:1.6rem }
.hsplit__title em{ font-style:italic }
.hsplit__lead{ color:var(--text); font-size:clamp(1.02rem,1.6vw,1.18rem);
  max-width:44ch; margin-bottom:2.4rem }
.hsplit__cta{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap }
.hsplit__link{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
  border-bottom:1px solid var(--line); padding-bottom:4px; transition:border-color .4s ease }
.hsplit__link:hover{ border-color:var(--ink) }

/* --- Carte média arrondie (contient le diaporama .cine) --- */
.hsplit__media{ position:relative; aspect-ratio:4/5; height:min(80svh, 42rem); width:auto;
  max-width:100%; justify-self:center; border-radius:18px;
  overflow:hidden; background:#2a2620; box-shadow:0 50px 90px -55px rgba(53,50,44,.6) }

/* overlays repositionnés dans la carte */
.hsplit__media .hero__grad{ z-index:2 }
.hsplit__media .hero__meta{ right:1.1rem; bottom:1.1rem; gap:.5rem }
.hsplit__media .hero__cat{ font-size:1.15rem }
.hsplit__media .hero__prog{ height:3px }

/* ============ MOBILE : vidéo en haut (moitié d'écran), titre dessous ============ */
@media (max-width:760px){
  .hsplit{ grid-template-columns:1fr; align-content:start; gap:1.8rem;
    padding-top:clamp(4.8rem,17vw,6rem); padding-bottom:clamp(2.5rem,8vw,4rem) }
  .hsplit__media{ order:-1; aspect-ratio:auto; height:46svh; width:100%; border-radius:14px }
  .hsplit__text{ max-width:none }
  .hsplit__title{ font-size:clamp(2.8rem,12vw,4rem) }
  .hsplit__lead{ margin-bottom:1.8rem }
  .hsplit__media .hero__meta{ bottom:1.1rem }
  .hsplit__media .hero__cat{ display:none }
}