body {
    background-color: rgba(250, 246, 240, 0.7);
}

/* État Initial (Par défaut) */
.card-hover-effect {
    /* Assure que l'image de fond peut être atténuée */
    transition: filter 0.3s ease-in-out;
}

.card-info-overlay {
    /* 1. Masquer l'overlay d'informations par défaut */
    opacity: 0;
    visibility: hidden;

    /* 2. Positionnement absolu pour couvrir la carte */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* 3. Ajouter un fond sombre pour la lisibilité */
    background-color: rgba(0, 0, 0, 0.7);

    /* 4. Animation douce pour l'apparition */
    transition: opacity 0.3s ease-in-out;
}

/* --- EFFET DE SURVOL : HOVER --- */

.card-hover-effect:hover {
    /* 1. Atténuer l'image de fond */
    /* Le filtre 'brightness' assombrit l'image pour la rendre "atténuée" */
    filter: brightness(0.5);
}

.card-hover-effect:hover .card-info-overlay {
    /* 2. Afficher les informations */
    opacity: 1;
    visibility: visible;
}

/* Classe d'utilité pour la lisibilité sur l'image */
.text-shadow {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.product-card-flex {
    /* La largeur totale est 100%. Nous voulons 4 éléments + 3 espaces de 'gap'. */
    /* calc(100% / 4) - gap_space */
    /* La taille 23.5% est un bon compromis pour 4 cartes avec gap-3 */
    flex-basis: 23.5%;
    /*min-width: 100px;  Optionnel : pour éviter qu'elles ne deviennent trop petites */
}

#main-navbar {
    background-color: #FAF6F0;
}

#main-nlink {
    text-align: left;
    font-family: Raleway, serif;
    color: #cdb096;
}

#main-navbar ul {
    border-bottom: none;
}