/*
 * Mise en page spécifique à l'accueil.
 */

.home-hero {
    border-radius: var(--mr-r-xl);
    overflow: hidden;
    /* Couleur de fond de la page (pas --mr-ciel, le bleu ciel utilisé
       auparavant) : retour utilisateur, ce bleu restait visible derrière les
       visuels desktop (mêmes zones de bord/transparence qu'en mobile,
       cf. media query ci-dessous) — la même couleur neutre partout plutôt
       qu'une teinte propre au hero qui tranchait sur le reste de la page. */
    background: var(--mr-gris-fond);
    /* Swiper a besoin d'une hauteur définie sur son conteneur (pas dérivée
       du contenu comme un flux normal). Ratio des visuels DESKTOP du hero
       (slides.json, fichier) : 1626×497 et 1776×543 sont tous deux ≈3.27:1. */
    aspect-ratio: 1776 / 543;
}

.home-hero .swiper,
.home-hero .swiper-wrapper {
    width: 100%;
    height: 100%;
}

.home-hero .swiper-slide a,
.home-hero .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767px) {
    .home-hero {
        /* Les visuels MOBILE (slides.json, fichier_mobile) sont en portrait
           (458×603, ratio ≈0.76 — vérifié sur les fichiers réels), pas juste
           une variante recadrée en paysage. Garder le ratio desktop ici les
           aurait forcés (object-fit:cover) dans une boîte 3 fois trop large
           et beaucoup trop basse pour leur contenu : le résultat ne
           ressemblait plus du tout à l'image mobile prévue (retour
           utilisateur : "l'image format téléphone doit donner l'image
           format téléphone"), même si le bon fichier était bien chargé. */
        aspect-ratio: 458 / 603;
        /* background déjà --mr-gris-fond ci-dessus (partagé desktop/mobile,
           voir commentaire sur .home-hero) : les visuels mobile sont des PNG
           avec des zones transparentes (~8% de la surface) qui laissent voir
           cette couleur, aucune redéclaration nécessaire ici. */
    }
}

.home-arrow {
    display: flex;
    justify-content: flex-start;
    margin: 10px 0 -6px;
    padding-left: 36px;
}

.home-arrow img {
    width: 104px;
}

.two-up {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    margin-top: 18px;
    align-items: stretch;
}

.two-up__col {
    /* Grille, pas flex-direction:column : le titre ("En ce moment chez
       nous") prend sa hauteur naturelle (ligne "auto"), et .carousel
       reçoit tout le reste ("1fr") — exactement la hauteur stretchée par
       .two-up sur cette colonne (voir .two-up ci-dessus), donc toujours
       calée sur la colonne "Calendrier des événements" d'à côté, quel que
       soit le nombre d'événements/tuiles promo qui s'y trouvent. Un
       flex-grow équivalent ici ne récupère pas l'espace disponible de
       façon fiable dans ce contexte imbriqué (testé : reste bloqué à sa
       valeur plancher) — la grille, elle, s'en sort sans dépendre d'un
       calcul qui ne se déclenche pas. Remplace une ancienne hauteur fixe
       (520px/650px) qui pouvait dépasser la colonne de droite quand elle
       avait peu de contenu (retour utilisateur explicite, avec capture
       d'écran) ou, inversement, la sous-remplir. */
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    min-height: 0;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    padding: 26px;
}

.two-up__side {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
}

/* Conteneur posé par home.php autour du carrousel ET de sa nav
   (.carousel__controls, absente quand un seul contenu) : une grille en
   "1fr auto" fait exactement ce que faisait avant .moment-carousel--single
   à la main (l'image comble l'espace que la nav laisserait vide), mais
   pour n'importe quelle hauteur disponible plutôt qu'une valeur à
   650px codée en dur — voir .two-up__col ci-dessus, dont la ligne "1fr"
   fournit cette hauteur disponible. */
.carousel[data-carousel] {
    display: grid;
    grid-template-rows: 1fr auto;
    height: 100%;
    min-height: 0;
}

.moment-carousel {
    overflow: hidden;
    min-height: 0;
    width: 100%;
    display: flex;
}

.moment-carousel__track {
    display: flex;
    align-items: stretch;
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    will-change: transform;
    transition: transform var(--mr-duration-slide) var(--mr-ease-expressive);
}

.moment-carousel__slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    /* Grid, pas flex-direction:column : .moment-card__media (photo) a
       besoin de remplir tout l'espace restant une fois .moment-card__body
       (titre + texte) soustrait, et un flex-grow ici reste bloqué à son
       plancher (min-height) quelle que soit la place réellement libre —
       même famille de piège que .moment-carousel décrit plus haut, mais
       une ligne de grille en 1fr le résout ici sans dépendre d'un calcul
       qui ne se déclenche pas. */
    display: grid;
    grid-template-rows: 1fr auto;
    overflow: hidden;
}

.home-decor {
    position: absolute;
    top: -58px;
    /* -46px : position d'origine de la maquette, à ne pas changer — retour
       utilisateur explicite ("elle doit rester au même endroit"). Le
       rognage sur grand écran (bord droit dépassant de 22px celui de .wrap,
       mesuré à 1920px) est corrigé sans déplacer l'étoile : voir
       overflow-clip-margin sur .wrap dans base.css, qui autorise ce
       débordement précis sans jamais bouger cet élément. */
    right: -46px;
    width: 150px;
    height: auto;
    display: block;
    /* Valeur d'origine : l'étoile doit rester visuellement DERRIÈRE la
       carte calendrier (z-index:1 posé en style inline sur .hc-card,
       home.php) — seul son débordement au-delà du coin de la carte est
       censé se voir. */
    z-index: 0;
    pointer-events: none;
}

.banner-split {
    display: grid;
    grid-template-columns: 1fr 2.6fr;
    gap: 22px;
    margin-top: 44px;
}

@media (max-width: 1023px) {
    .two-up,
    .promo-grid,
    .banner-split {
        grid-template-columns: 1fr !important;
    }
}