/*
    Project: Alexis
    Version: 1.1 (Optimisation Variables CSS)
    Author: El kalai Jamal 
*/

/* ==========================================================================
   1. STRUCTURE COMMUNE (Ne pas modifier pour les saisons)
   ========================================================================== */

   .hero-classique, .hero-shop, .hero-panier, .hero-contact {
    position: relative;
    width: 100%;
    height: 80vh;
    display: flex;
    align-items: flex-end; /* Par défaut aligné en bas (mobile) */
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    /* Utilisation des variables avec fallback (image vide par défaut) */
    background-image: var(--hero-bg); 
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0)
    );
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #ffffff;
    padding: 2rem 1rem;
    margin-bottom: 1rem;
    width: 100%;
}

.hero-title {
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    font-weight: 700;
    color: white;
}

.hero-cta, .hero-subtitle {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #2d2a23;
    color: #fff;
    border-radius: 0.25rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.hero-subtitle {
    background-color: rgba(45, 42, 35, 0.71); /* #2d2a23b5 */
}

.hero-cta:hover {
    background-color: #47423a;
    transform: translateY(-2px);
}

/* --- Adaptations Tablettes & Desktop --- */

@media (min-width: 768px) {
    .hero-content {
        padding: 4rem 2rem;
    }
}

@media (min-width: 1024px) {
    .hero-classique, .hero-shop, .hero-panier, .hero-contact {
        align-items: center; /* Centrage vertical sur grand écran */
    }
    .hero-content {
        max-width: 800px;
        text-align: left;
        padding: 0 3rem;
        margin-bottom: 0;
    }
    .hero-title {
        font-size: 3rem;
    }
}

/* ==========================================================================
   2. CONFIGURATION DES IMAGES (C'est ici que tu gères les saisons)
   ========================================================================== */

/* --- Valeurs par défaut (Mobile) --- */
.hero-classique { --hero-bg: url('../images/hero/mobile/hero-acceuil-mobile.jpg'); }
.hero-shop      { --hero-bg: url('../images/hero/mobile/banner-categories-mobile.jpg'); }
.hero-panier    { --hero-bg: url('../images/hero/mobile/banner-panier-mobile.jpg'); }
.hero-contact   { --hero-bg: url('../images/hero/mobile/banner-contact-mobile.jpg'); }

/* --- Saison Spécifique : GALETTES --- */
/* (Il suffit d'ajouter cette classe à ton <section> dans le HTML) */
.hero-galettes {
    --hero-bg: url('../images/hero/mobile/hero-mobile-galette.webp');
}

/* --- Saison Spécifique : NOEL --- */
.hero-noel {
    --hero-bg: url('../images/hero/mobile/hero-mobile-noel.webp');
}

/* --- Saison Spécifique : SAINT-VALENTIN --- */
.hero-st-valentin {
    --hero-bg: url('../images/hero/mobile/banniere-st-valentin-mobile.png');
}
.hero-st-valentin .hero-overlay {
    background: linear-gradient(
        to top,
        rgba(80, 8, 32, 0.75),
        rgba(0, 0, 0, 0)
    );
}
.hero-st-valentin .hero-cta {
    background-color: #a3123a;
}
.hero-st-valentin .hero-cta:hover {
    background-color: #c21f4c;
}

/* ===== Saint-Valentin: harmonisation couleurs boutons ===== */
.page-wrap--st-valentin .ps-btn,
.page-wrap--st-valentin .hero-cta {
    background-color: #c21f4c;
    color: #fff;
}
.page-wrap--st-valentin .ps-btn:hover,
.page-wrap--st-valentin .hero-cta:hover {
    background-color: #c21f4c;
}

/* --- Saison Spécifique : PAQUES --- */
.hero-paques {
    --hero-bg: url('../images/hero/mobile/banner-paques-mobile.png');
}


/* --- Saison Spécifique : FETE DES MERES --- */
.hero-fete-des-meres {
    --hero-bg: url('../images/banner/banner-fete-des-mere-mobile.jpg');
}
.hero-fete-des-meres .hero-overlay {
    background: linear-gradient(
        to top,
        rgba(64, 28, 37, 0.74),
        rgba(64, 28, 37, 0.08)
    );
}
.hero-fete-des-meres .hero-cta {
    background-color: #9c3f58;
}
.hero-fete-des-meres .hero-cta:hover {
    background-color: #b9506b;
}

/* ===== Fête des Mères: harmonisation couleurs boutons ===== */
.page-wrap--fete-des-meres .ps-btn,
.page-wrap--fete-des-meres .hero-cta {
    background-color: #9c3f58;
    color: #fff;
}
.page-wrap--fete-des-meres .ps-btn:hover,
.page-wrap--fete-des-meres .hero-cta:hover {
    background-color: #b9506b;
    color: #fff;
}

/* --- Media Queries pour changer les variables selon l'écran --- */

@media (min-width: 768px) {
    .hero-classique { --hero-bg: url('../images/hero/tablette/hero-acceuil-tablet.jpg'); }
    .hero-shop      { --hero-bg: url('../images/hero/tablette/banner-categories-tablet.jpg'); }
    /* Overrides saisonniers tablettes */
    .hero-galettes  { --hero-bg: url('../images/hero/tablette/hero-tablette-galette.webp'); }
    .hero-noel      { --hero-bg: url('../images/hero/desktop/banner-noel.webp'); }
    .hero-st-valentin { --hero-bg: url('../images/hero/tablette/banniere-st-valentin-tablette.png'); }
    .hero-paques { --hero-bg: url('../images/hero/tablette/banner-paques-tablette.png'); }
    .hero-fete-des-meres { --hero-bg: url('../images/banner/banner-fete-des-mere-tablette.jpg'); }
}

@media (min-width: 1024px) {
    .hero-classique { --hero-bg: url('../images/hero/desktop/hero-acceuil-desktop.jpg'); }
    .hero-shop      { --hero-bg: url('../images/hero/desktop/banner-categories-desktop.jpg'); }
    /* Overrides saisonniers desktop */
    .hero-galettes  { --hero-bg: url('../images/hero/desktop/hero-galette-desktop.webp'); }
    .hero-noel      { --hero-bg: url('../images/hero/desktop/banner-noel.webp'); }
    .hero-st-valentin { --hero-bg: url('../images/hero/desktop/banniere-st-valentin-desktop.png'); }
    .hero-paques { --hero-bg: url('../images/hero/desktop/banner-paques-desktop.png'); }
    .hero-fete-des-meres { --hero-bg: url('../images/banner/banner-fete-des-mere-desktop.jpg'); }
}