/* =====================================================================
   Accueil — refonte v2 : ce qui n'existe QUE sur l'accueil.

   - .home-canvas : posé sur l'image de fond gérée en back-office
     (Bannières › « Arrière-plan de l'accueil »), FIXE à l'écran ; sans
     image : fond #f1f1f2 ;
   - hero (menu catégories | slider | bannières) et réassurance.

   Le reste du design v2 (header, bande blanche des bulles, cartes de blocs,
   tuiles produits, jetons --home-*) est commun à tout le site :
   assets/css/site-v2.css, chargée par base.html.twig.
   Chargée uniquement par templates/home/index.html.twig.
   ===================================================================== */

/* ---------------------------------------------------------------------
   2. Canvas illustré
   Le décor est un calque position:fixed dans un parent clip-path:inset(0) :
   équivalent de background-attachment:fixed, mais qui marche aussi sur
   iOS Safari (où « fixed » est ignoré et l'image serait étirée sur toute
   la hauteur de la page).
   --------------------------------------------------------------------- */
.home-page .home-canvas {
    position: relative;
    z-index: 1;
    clip-path: inset(0);
    padding: 1.4rem 0 4.8rem;
    background: #f1f1f2;
}

.home-page .home-canvas::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Image définie en back-office (Bannières › Arrière-plan de l'accueil),
       transmise par le template via --home-canvas-image ; sans image active,
       simple fond gris clair. */
    background-color: #f1f1f2;
    background-image: var(--home-canvas-image, none);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.home-page .home-canvas > .container {
    padding-bottom: 0 !important;
    background: transparent;
}

/* ---------------------------------------------------------------------
   3. Hero : menu catégories | slider | 2 bannières
   --------------------------------------------------------------------- */
.home-page .home-canvas .intro-section {
    margin-bottom: 0 !important;
}

.home-page .home-canvas .intro-section > .row {
    align-items: stretch;
}

/* Écart menu | slider | bannières resserré : gouttière de 1.6rem au lieu des
   20px fixes du thème (et proportionnelle à l'écran, cf. desktop-scale.css). */
@media (min-width: 992px) {
    .home-page .home-canvas .intro-section > .row {
        margin-right: -.8rem;
        margin-left: -.8rem;
    }

    .home-page .home-canvas .intro-section > .row > * {
        padding-right: .8rem;
        padding-left: .8rem;
    }
}

.home-page .home-canvas .intro-category-wrapper,
.home-page .home-canvas .home-hero-slider,
.home-page .home-canvas .home-hero-banners {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 3a. Menu catégories : carte blanche */
.home-page .home-canvas .home-hero-menu {
    height: 100%;
    padding: .8rem 0;
    border-radius: var(--home-radius);
    background: #fff;
    /* box-shadow: var(--home-shadow); */
}

/* Pointe « bulle de dialogue » vers la bulle « Catégories » de la bande
   blanche (centre de la bulle 9rem = 4.5rem, moins la demi-pointe). Elle
   tient dans le padding haut du canvas (1.4rem), donc pas rognée par son
   clip-path. */
.home-page .home-canvas .home-hero-menu::before {
    content: "";
    top: -.9rem;
    left: 3.5rem;
    border-right: 1rem solid transparent;
    border-bottom: 1rem solid #fff;
    border-left: 1rem solid transparent;
    filter: drop-shadow(0 -.1rem .1rem rgba(23, 32, 64, .05));
}

.home-page .home-canvas .home-hero-menu .category-menu {
    padding: 0 2rem;
}

.home-page .home-canvas .home-hero-menu .category-menu > li > a {
    min-height: 4.4rem;
    padding: 1rem 0;
    color: var(--home-text);
    font-size: 1.35rem;
    font-weight: 500;
    transition: color .2s ease, padding-left .2s ease;
}

.home-page .home-canvas .home-hero-menu .category-menu > li:not(:last-child) > a {
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.home-page .home-canvas .home-hero-menu .category-menu > li > a:hover,
.home-page .home-canvas .home-hero-menu .category-menu > li:focus-within > a {
    padding-left: .4rem;
    color: var(--home-accent);
}

.home-page .home-canvas .home-hero-menu .category-menu > li > a:hover i,
.home-page .home-canvas .home-hero-menu .category-menu > li > a:hover .category-menu-icon-img {
    color: var(--home-accent);
}

.home-page .home-canvas .home-hero-menu .category-menu i {
    color: #5b6476;
}

.home-page .home-canvas .home-hero-menu .category-menu > li > a.view-all-cats {
    padding-left: 0;
    border-bottom: 0;
    color: var(--home-accent);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.home-page .home-canvas .home-hero-menu .vertical-menu > li > ul {
    border-radius: var(--home-radius);
    box-shadow: var(--home-shadow-hover);
}

/* 3b. Slider principal */
.home-page .home-canvas .home-hero-slider > .swiper-container,
.home-page .home-canvas .home-hero-slider > .intro-slide {
    border-radius: var(--home-radius-hero);
    overflow: hidden;
    box-shadow: var(--home-shadow);
}

.home-page .home-canvas .home-hero-slider .intro-slide {
    border-radius: 0;
}

.home-page .home-canvas .home-hero-slider > .intro-slide {
    border-radius: var(--home-radius-hero);
}

/* 3c. Bannières de droite */
.home-page .home-canvas .home-hero-banners .intro-banner {
    border-radius: var(--home-radius);
    overflow: hidden;
    box-shadow: var(--home-shadow);
}

.home-page .home-canvas .home-hero-banners .banner-media {
    border-radius: 0;
}

@media (min-width: 992px) {
    /* La hauteur de la rangée est celle du MENU (9 catégories + « voir
       toutes ») : contain:size retire au slider et aux bannières toute
       hauteur intrinsèque (images, min-height du thème), ils s'étirent
       simplement sur la hauteur du menu et recadrent leurs images en
       cover — quelle que soit la largeur d'écran, sans vide sous le menu. */
    .home-page .home-canvas .home-hero-slider,
    .home-page .home-canvas .home-hero-banners {
        contain: size;
    }

    .home-page .home-canvas .home-hero-menu {
        height: auto;
        min-height: 100%;
    }

    .home-page .home-canvas .home-hero-slider {
        display: flex;
        flex-direction: column;
    }

    .home-page .home-canvas .home-hero-slider > .swiper-container,
    .home-page .home-canvas .home-hero-slider > .intro-slide {
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .home-page .home-canvas .home-hero-slider > .swiper-container > .swiper-wrapper,
    .home-page .home-canvas .home-hero-slider > .swiper-container .swiper-slide {
        height: 100%;
    }

    .home-page .home-canvas .home-hero-slider .intro-slide {
        min-height: 0;
        background-size: cover;
        background-position: center;
    }

    .home-page .home-canvas .home-hero-banners {
        display: flex;
        flex-direction: column;
        gap: var(--home-gap);
    }

    .home-page .home-canvas .home-hero-banners .intro-banner {
        flex: 1 1 0;
        min-height: 0;
        margin: 0 !important;
    }

    .home-page .home-canvas .home-hero-banners .intro-banner > .swiper-wrapper,
    .home-page .home-canvas .home-hero-banners .intro-banner .swiper-slide,
    .home-page .home-canvas .home-hero-banners .banner-media {
        height: 100%;
    }

    .home-page .home-canvas .home-hero-banners .banner-media img,
    .home-page .home-canvas .home-hero-banners .intro-banner > img {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
    }
}

/* ---------------------------------------------------------------------
   4. Réassurance (livraison, paiement, garantie, support)
   --------------------------------------------------------------------- */
.home-page .home-canvas .icon-box-wrapper.br-sm {
    margin-top: var(--home-gap) !important;
    border: 0;
    border-radius: var(--home-radius);
    background: #fff;
    /* box-shadow: var(--home-shadow); */
}

.home-page .home-canvas .icon-box-wrapper.br-sm .icon-box-side {
    min-height: 8.8rem;
    padding: 2rem 2.8rem;
}

.home-page .home-canvas .icon-box-wrapper.br-sm .icon-box-side:not(:first-child)::before {
    height: 4rem;
    background: var(--home-line);
}

.home-page .home-canvas .icon-box-wrapper.br-sm .icon-box-icon i {
    color: var(--home-ink);
    font-size: 3.6rem;
}

.home-page .home-canvas .icon-box-wrapper.br-sm .icon-box-title {
    color: var(--home-ink);
    font-size: 1.5rem;
    font-weight: 700;
}

.home-page .home-canvas .icon-box-wrapper.br-sm .icon-box-content p {
    color: var(--home-muted);
}

/* Le pied de page reprend juste après le canvas. */
.home-page .footer {
    position: relative;
    z-index: 2;
}

/* ---------------------------------------------------------------------
   6. Tablette / mobile
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .home-page .home-canvas {
        padding: 1.4rem 0 3.2rem;
    }

    .home-page .home-canvas .home-hero-banners {
        margin-top: var(--home-gap) !important;
    }

    .home-page .home-canvas .home-hero-banners .intro-banner {
        margin-bottom: var(--home-gap) !important;
    }

    .home-page .home-canvas .home-hero-banners .intro-banner:last-child {
        margin-bottom: 0 !important;
    }

    .home-page .home-canvas .home-hero-slider > .swiper-container {
        overflow: hidden;
        background: transparent;
        box-shadow: none;
    }

    .home-page .home-canvas .home-hero-slider .intro-slide-media {
        border-radius: var(--home-radius-hero);
    }
}

/* Mobile : mêmes marges que les autres pages (site-v2.css) — bord 10px,
   marge intérieure des cartes 1.2rem. */
@media (max-width: 767.98px) {
    .home-page .home-canvas {
        --home-card-pad: 1.2rem;
    }

    .home-page .home-canvas > .container {
        padding-right: 10px;
        padding-left: 10px;
    }
}