/* ==========================================================================
   STRUCTURE DE LA PAGE D'ACCUEIL
   ========================================================================== */

main {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* SECTION HERO (EFFET APPLE) */
.apple-hero {
    height: 500px; 
}

.sticky-wrapper {
    position: sticky;
    top: 60px; 
    height: 500px; 
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover; 
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-layer.on {
    z-index: 2;
    opacity: 0;
}

.sticky-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: #fff;
}

/* SECTION PRODUITS (PLACEMENT UNIQUEMENT) */
.featured-products {
    padding: 80px 20px;
    background: #fff;
}

.container {
    max-width: 1300px;
    margin: 0 auto;
}

.text-center { 
    text-align: center; 
    margin-bottom: 40px; 
}

/* LA GRILLE : On garde juste la structure */
.products-grid {
    display: grid;
    /* On utilise tes réglages de taille pour la grille ici */
    grid-template-columns: repeat(auto-fit, 250px);
    gap: 50px;
    justify-content: center;
}

/* NOTE : On ne définit PLUS .product-card ici pour éviter les conflits avec style.css */