/*
  03-img.css — HERO (photos seulement)
  Portée : .section--hero et ses enfants (.hero-split, .half…)
  Ne touche PAS au bloc texte/bouton (CTA) ni aux autres sections.
  Idée : 2 images forment un losange coupé par une diagonale (BL→TR).
*/

/* ========================= Conteneur HERO ========================= */
.section--hero{ padding:0 }

.hero-split{
  /* ratio large, coins arrondis, anticrénelage propre */
  position:relative;
  aspect-ratio: 16 / 6.8;      /* était 16/7 → un peu plus haut */
  min-height: 280px;           /* était 260px */
  border-radius: var(--radius-lg, 25px);
  overflow:hidden;
  backface-visibility:hidden;
  transform:translateZ(0);      /* évite les coutures 1px sur certains GPU */

  /* Focales par défaut (recadrage des sujets) */
  --tl-x:55%; --tl-y:30%;       /* image haut-gauche (Inde) */
  --br-x:55%; --br-y:0%;        /* image bas-droit (Togo) */
}

/* Fallback si le navigateur n’a pas aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .hero-split::before{
    content:"";
    display:block;
    padding-top: calc(100% * 6.8 / 16); /* était 7/16 */
  }
}

/* ====================== Plans image triangulaires ====================== */
.half{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  will-change: clip-path, transform;
}

.half--tl{
  /* triangle haut-gauche ; diagonale de bas-gauche → haut-droit */
  clip-path: polygon(-1% 0, 101% 0, -1% 101%);
  object-position: var(--tl-x) var(--tl-y);
}
.half--br{
  /* triangle bas-droit ; même diagonale, côté opposé */
  clip-path: polygon(101% 101%, 101% -1%, -1% 101%);
  object-position: var(--br-x) var(--br-y);
}

/* ============================ Responsive ============================ */
@media (max-width: 900px){
  /* recentrer légèrement les sujets sur mobile */
  .hero-split{
    --tl-x:60%; --br-x:40%;
    aspect-ratio: 16 / 8;    /* très léger gain de hauteur sur mobile */
    min-height: 260px;
  }
}