/* ============================================================
   WEBCRAFT-SOLUTION — ecommerce-home.css
   Styles additionnels pour la page d'accueil de la boutique,
   pensés pour une place de marché généraliste (cours/livres
   aujourd'hui, téléphones/habits/chaussures demain).
   À charger APRÈS boutique.css, uniquement sur index.php.
   ============================================================ */

/* --- Barre de recherche géante façon marketplace (optionnelle, sous la navbar) --- */
.ec-hero-search {
    background: var(--blue-dark);
    padding: 0.9rem 0;
}

.ec-hero-search .input-group {
    border-radius: 999px;
    overflow: hidden;
}

.ec-hero-search select.form-select {
    max-width: 160px;
    border: none;
    background-color: #f3f4f6;
}

.ec-hero-search input.form-control {
    border: none;
}

.ec-hero-search button {
    background: var(--gold);
    border: none;
    color: var(--blue-dark);
    font-weight: 600;
    padding: 0 1.5rem;
}

/* --- Sidebar catégories (colonne gauche, style Alibaba/Amazon) --- */
.ec-cat-sidebar {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
}

.ec-cat-sidebar .ec-cat-sidebar-title {
    background: var(--blue-dark);
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.75rem 1rem;
}

.ec-cat-sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    max-height: 360px;
    overflow-y: auto;
}

.ec-cat-sidebar li a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 1rem;
    color: #374151;
    text-decoration: none;
    font-size: 0.88rem;
    border-left: 3px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ec-cat-sidebar li a i {
    width: 18px;
    text-align: center;
    color: var(--blue-dark);
}

.ec-cat-sidebar li a:hover {
    background: #f7f9fc;
    border-left-color: var(--gold);
    color: var(--blue-dark);
}

/* --- Carrousel principal --- */
.ec-hero-carousel {
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    min-height: 360px;
}

.ec-hero-carousel .carousel,
.ec-hero-carousel .carousel-inner,
.ec-hero-carousel .carousel-item {
    height: 100%;
    min-height: 360px;
}

.ec-hero-carousel .carousel-item {
    background: linear-gradient(135deg, var(--blue-dark) 0%, #0b2d52 100%);
    /* IMPORTANT : ne jamais forcer "display" ici — Bootstrap bascule lui-même
       .carousel-item entre display:none et display:block/active pour faire
       défiler les slides. Un display:flex ici affichait toutes les slides
       en même temps et bloquait le défilement. Le centrage vertical se fait
       via .ec-hero-slide-content ci-dessous à la place. */
}

.ec-hero-carousel .carousel-item.ec-slide-gold {
    background: linear-gradient(135deg, #7a5c00 0%, var(--gold) 100%);
}

.ec-hero-carousel .carousel-item.ec-slide-dark {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
}

/* Slide "photo produit" : image en fond + dégradé sombre pour lire le texte */
.ec-hero-carousel .carousel-item.ec-slide-photo {
    background-size: cover;
    background-position: center;
    position: relative;
}

.ec-hero-carousel .carousel-item.ec-slide-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 31, 63, 0.82) 0%, rgba(0, 31, 63, 0.35) 65%, rgba(0, 31, 63, 0.15) 100%);
}

.ec-hero-slide-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 2.5rem;
    max-width: 520px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ec-hero-slide-content .ec-eyebrow {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
}

.ec-hero-slide-content h2 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 0.6rem;
}

.ec-hero-carousel .carousel-control-prev,
.ec-hero-carousel .carousel-control-next {
    width: 5%;
}

.ec-hero-carousel .carousel-indicators {
    margin-bottom: 0.5rem;
}

/* --- Bandeau promo secondaire (2 vignettes sous le carrousel) --- */
.ec-promo-tile {
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 110px;
}

.ec-promo-tile.ec-tile-blue { background: var(--blue-dark); }
.ec-promo-tile.ec-tile-gold { background: linear-gradient(135deg, #b8912a, var(--gold)); color: #1f2937; }

.ec-promo-tile h6 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.ec-promo-tile p {
    font-size: 0.8rem;
    margin-bottom: 0;
    opacity: 0.9;
}

/* --- Grille de catégories (grandes tuiles avec icône) --- */
.ec-category-tile {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #374151;
}

.ec-category-tile .ec-tile-icon {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.6rem;
    font-size: 1.6rem;
    color: var(--blue-dark);
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.ec-category-tile:hover .ec-tile-icon {
    transform: translateY(-4px);
    background: var(--gold);
    color: #fff;
}

.ec-category-tile span {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
}

/* --- En-tête de section produits (titre + lien "voir tout") --- */
.ec-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ec-section-header h2 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    color: var(--blue-dark);
    font-size: 1.3rem;
    margin: 0;
}

.ec-section-header a {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--blue-dark);
    text-decoration: none;
}

.ec-section-header a:hover {
    color: var(--gold);
}

/* --- Badge "offre flash" --- */
.ec-flash-badge {
    background: #dc2626;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* --- Rangée de produits défilante horizontalement (mobile-friendly) --- */
.ec-scroll-row {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.ec-scroll-row::-webkit-scrollbar {
    height: 6px;
}

.ec-scroll-row::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 999px;
}

.ec-scroll-row > .ec-scroll-item {
    scroll-snap-align: start;
    flex: 0 0 250px;
}

@media (max-width: 767.98px) {
    .ec-scroll-row > .ec-scroll-item {
        flex-basis: 210px;
    }
    .ec-hero-slide-content {
        padding: 1.5rem;
    }
    .ec-hero-slide-content h2 {
        font-size: 1.35rem;
    }
}