/* ============================================================
   GROCERY HERO CAROUSEL — cohérence visuelle + flèches
   ============================================================ */

/* Hero section : hauteur globale augmentée */
.grocery-home .grocery-hero,
.grocery-home .grocery-hero__content,
.grocery-home .grocery-hero__carousel,
.grocery-home .grocery-hero__carousel .owl-stage-outer,
.grocery-home .grocery-hero__carousel .owl-stage,
.grocery-home .grocery-hero__carousel .owl-item {
    min-height: clamp(455px, 52vh, 585px) !important;
}

.grocery-home .grocery-hero__slide {
    min-height: 620px !important;
    padding: 0.5rem 0 !important;
}

/* Image : taille fixe identique sur tous les slides */
.grocery-home .grocery-hero__visual {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 600px !important;
}

.grocery-home .grocery-hero__visual-image {
    width: 100% !important;
    height: 100% !important;
    max-height: 600px !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Texte : hauteur minimum identique pour la colonne texte */
.grocery-home .grocery-hero__slide .col-12.col-lg-6.order-2 {
    min-height: 420px !important;
    display: flex !important;
    align-items: center !important;
}

/* Titre : taille uniforme sur tous les slides (h1 et h2) */
.grocery-home .grocery-hero__title {
    font-size: clamp(1.9rem, 3.5vw, 3rem) !important;
    line-height: 1.35 !important;
    min-height: 4.5rem !important;
    max-width: 18ch !important;
}

/* Lead : hauteur réservée pour éviter le décalage */
.grocery-home .grocery-hero__lead {
    min-height: 3.6rem !important;
}

/* ── Flèches du carousel ── */
.grocery-home .grocery-hero__carousel .owl-nav {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    justify-content: space-between !important;
    pointer-events: none !important;
    padding: 0 12px !important;
    z-index: 10 !important;
    display:none !important; /* Masquer les flèches par défaut */
}

.grocery-home .grocery-hero__carousel .owl-prev,
.grocery-home .grocery-hero__carousel .owl-next {
    pointer-events: all !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border: 2px solid rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
    color: #fff !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

.grocery-home .grocery-hero__carousel .owl-prev:hover,
.grocery-home .grocery-hero__carousel .owl-next:hover {
    background: rgba(255, 255, 255, 0.42) !important;
    transform: scale(1.1) !important;
}

.grocery-home .grocery-hero__carousel .owl-prev span,
.grocery-home .grocery-hero__carousel .owl-next span {
    display: block !important;
    line-height: 1 !important;
    font-size: 22px !important;
    color: #fff !important;
}

/* Assure que le carousel est en position relative pour les flèches absolues */
.grocery-home .grocery-hero__carousel {
    position: relative !important;
}

/* Hero carousel content : limiter la largeur du texte/image sur grands écrans */
.grocery-home .grocery-hero__content .grocery-hero__slide > .row {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================
   FEATURED BOXES — bande de réassurance améliorée
   ============================================================ */
.home-featured-boxes-section {
    padding: 0 !important;
    margin-top: 0 !important;
}

.home-featured-boxes {
    gap: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
}

.home-featured-boxes .featured-box-full {
    padding: 52px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: filter 0.22s ease, transform 0.22s ease !important;
    border-right: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 0 !important;
    min-height: 200px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

.home-featured-boxes .featured-box-full:last-child {
    border-right: none !important;
}

.home-featured-boxes .featured-box-full:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-3px) !important;
    z-index: 1 !important;
    position: relative !important;
}

/* Icône : cercle semi-transparent */
.home-featured-boxes .featured-box-full [class*="fa-"] {
    width: 50px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.18) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    margin-bottom: 10px !important;
    flex-shrink: 0 !important;
}

.home-featured-boxes .featured-box-full h4 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: #fff !important;
    line-height: 1.25 !important;
}

.home-featured-boxes .featured-box-full p {
    font-size: 0.83rem !important;
    opacity: 0.82 !important;
    margin: 0 !important;
    padding-top: 4px !important;
    color: rgba(255,255,255,0.88) !important;
}

/* Couleurs de fond légèrement distinguées */
.home-featured-boxes .bg-primary     { background: #125388 !important; }
.home-featured-boxes .bg-primary-100 { background: #0f6aac !important; }
.home-featured-boxes .bg-primary-200 { background: #0d7ec7 !important; }
.home-featured-boxes .bg-primary-300 { background: #0a8fd9 !important; }

/* ============================================================ */

/* Remove focus outline around Bootstrap modals to avoid the blue focus ring */
.modal,
.modal-dialog,
.modal-content {
    outline: none !important;
    box-shadow: none !important;
}
.modal.show {
    outline: none !important;
}
.modal .btn-close:focus,
.modal button:focus,
.modal a:focus {
    outline: none !important;
    box-shadow: none !important;
}