/* =========================================
   1. WRAPPER & HEADER ACCUEIL
   ========================================= */

/* Fond beige clair et arrondi typique de l'accueil */
.home-top-wrapper {
    background-color: var(--beige-bg);
    border-radius: 0 0 50px 50px;
    position: relative; 
}

html {
    background-color: var(--beige-bg); 
    overflow-x: hidden;
}
body {
    background-color: #ffffff;
    overflow-x: hidden;
    width: 100%;
}

/* =========================================
   SURCHARGE NAVBAR
   ========================================= */

.main-header {
    background-color: var(--bg-color, #ffffff);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}
.nav-link-main:hover,
.nav-item-dropdown:hover .nav-link-main {
    background-color: var(--purple-light, #F8F2FB);
    color: var(--purple-text, #8A4BAF);
}

.search-wrapper:hover .search-input,
.search-input:focus {
    width: 200px;
    opacity: 1;
    padding: 8px 18px; 
    margin-right: 10px;
    background-color: var(--purple-light); 
}

/* =========================================
   STYLE UNIFIÉ (CATÉGORIES, SOUS-CATÉGORIES & RECETTES)
   ========================================= */

.col-6, .col-12 {
    animation: fadeUp 0.4s ease-out forwards;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   VARIANTE : SOUS-CATÉGORIES (Design Dossier)
   ========================================= */
.subcategory-folder {
    background-color: var(--purple-light); 
}
.subcategory-folder .btn-category {
    background-color: white !important; 
    color: var(--purple-text) !important;
    border: 1px solid var(--purple-mid);
}
.subcategory-folder:hover .btn-category {
    background-color: var(--purple-dark) !important;
    color: white !important;
    border-color: var(--purple-dark) !important;
}