/* ============================================================
   LAFONDA UAE — Banniere d'accueil (carrousel)
   ------------------------------------------------------------
   Porte depuis lafonda.ma (commits « Accueil : banniere reduite
   de 30 %, hauteur reglable par une variable » et suivants).

   La hauteur de la banniere n'est plus une valeur en dur : elle
   se calcule comme une PART de la hauteur visible sous l'en-tete.

       hauteur = (hauteur d'ecran - en-tete) x --lf-hero-scale

   1 = plein ecran sous l'en-tete, 0.7 = 30 % de moins. Une seule
   valeur a changer pour reajuster, sans toucher au calcul.

   --lf-header-h est mesuree au chargement par le composant
   d'en-tete (components/layouts/header/index.blade.php) : l'en-tete
   n'a pas de hauteur constante (bandeau defilant activable, nav sur
   une ou deux lignes). Les valeurs de secours vivent dans
   lafonda-header.css.

   100svh et non 100vh : sur mobile, 100vh compte les barres du
   navigateur et fait depasser la banniere sous la ligne de
   flottaison. Repli en 100vh pour les navigateurs anciens.

   Les visuels sont panoramiques (1530x700) : ils sont donc recadres
   sur les cotes, cadrage centre, jamais deformes (object-fit: cover).

   Chargee apres style.css : ses regles priment sur les hauteurs
   fixes (80vh / 750px en desktop, 30vh sous 1024px) qui y sont
   encore declarees.
   ============================================================ */

:root {
  /* Part de la hauteur visible occupee par la banniere. */
  --lf-hero-scale: 0.7;
}

.home_page_slider,
.home_page_slider.set_height_on_different_screen {
  height: calc((100vh - var(--lf-header-h, 146px)) * var(--lf-hero-scale)) !important;
  height: calc((100svh - var(--lf-header-h, 146px)) * var(--lf-hero-scale)) !important;
  max-height: none !important;
  aspect-ratio: auto !important;

  /* style.css ajoute « margin-top: 55px » sous 1024px : c'etait le decalage
     de l'ancien en-tete, pose directement sur la banniere. Le contenu est
     desormais decale globalement (padding-top sur main, cf. lafonda-header.css)
     et cette marge ne faisait plus qu'ouvrir un blanc au-dessus du visuel. */
  margin-top: 0 !important;
}

/* La piste (l'unique div enfant direct) aligne les diapositives cote a cote
   et se deplace en translateX : elle doit rester une rangee flex. Lui poser
   display:block empilait les diapositives verticalement, la piste retombait
   a la largeur du conteneur, et le premier translateX(-innerWidth) sortait
   tout le contenu du cadre : seule la premiere image restait visible, les
   suivantes ne laissaient qu'un blanc. */
.home_page_slider > div {
  display: inline-flex !important;
  height: 100% !important;
  max-height: none !important;
}

/* Chaque diapositive vaut exactement une largeur d'ecran, sans compression :
   c'est le pas dont le script decale la piste (currentIndex x innerWidth).
   Sans flex-shrink a 0, les diapositives se partageraient la largeur du
   conteneur et le decalage ne tomberait plus en face de la bonne image. */
.home_page_slider .category_carousel_home_page {
  flex: 0 0 100vw !important;
  width: 100vw !important;
  height: 100% !important;
  max-height: none !important;
}

/* Sans display:block, le lien reste une boite en ligne : une hauteur en
   pourcentage n'a plus de reference, le visuel s'effondre a zero et la
   banniere apparait vide. */
.home_page_slider .home_slider_image_grid,
.home_page_slider .home_slider_image_grid > a {
  display: block !important;
  height: 100% !important;
  max-height: none !important;
}

/* L'image remplit la diapositive sans jamais etre deformee. */
.home_page_slider .home_slider_image_grid_image {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Videos et iframes du carrousel : meme hauteur que le conteneur (les
   gabarits portent un style="height:100vh" en ligne, que ces regles
   neutralisent). */
.home_page_slider video,
.home_page_slider iframe,
.home_page_slider .slider_iframe {
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
}

/* Sous 1024px, style.css imposait 30vh. On garde une banniere de hauteur
   comparable, mais exprimee dans le meme systeme : (100svh - 98px) x 0.35
   vaut environ 30 % de l'ecran. Retirer 30 % d'un ecran deja etroit
   donnerait une bande trop basse pour rester lisible. */
@media (max-width: 1023px) {
  :root {
    --lf-hero-scale: 0.35;
  }

  /* Seule la valeur de secours de l'en-tete change ici : le calcul et les
     regles enfants restent ceux definis plus haut. */
  .home_page_slider,
  .home_page_slider.set_height_on_different_screen {
    height: calc((100vh - var(--lf-header-h, 98px)) * var(--lf-hero-scale)) !important;
    height: calc((100svh - var(--lf-header-h, 98px)) * var(--lf-hero-scale)) !important;
  }
}