/**** CSS DE BASES ****/
body {
    background-color: #E7EBC5;;
}

    /* Polices de bases*/
.h1Noir {
    font-family:'Quicksand', Courier, monospace;
    font-size: 2.5rem;
}
.h1Blanc {
    margin: 0;
    font-size: 2.5rem;
    font-family:'Quicksand', Courier, monospace;
    color: white;

}

.policep1 {
    padding-bottom: 1rem;
    font-size: 1.5rem;
    font-family:'Montserrat', sans-serif;
    color: aliceblue;
}

.policep2 {
    font-size: 1.5rem;
    color: black;
}

.margin-top1 {
    margin-top: 1em;
}

.margin-top2 {
    margin-top: 2em;
}

.margin-top3 {
    margin-top: 3em;
}

.section {
    margin: 6rem;
}

.section:last-child {
    margin: 2rem;
}

    /****Centrer div ect...****/
.hero-banner {
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("/public/media/vegan_vs_vegetarian_d_1200x630-1.png");
    background-size: 125%;
    background-repeat: no-repeat;
    background-position: 50%;
    padding: 8rem;
    padding-top: 12rem;
    padding-bottom: 12rem;
}
    

.center {
    display: flex;
    justify-content: center;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}

/* Autres*/

.psmall {
    font-size: 0.8rem;
}

.article {
    margin: 3rem;
}

.carreVertFoncé {
    background-color: #819848;
    margin: 8rem;
    margin-top: 4rem;
}

.fondH1 {
    background-color: #B0CB88;
    width: 1fr;
    margin-left: -12px;
    padding: 20px;
}

h1 h2 h3 h4 h5 h6 {
    margin: 0;
}

h3 {
    padding-top: 1.5rem;
}

.recettes {
    background-color: #B0CB88; 
    margin: 32px;  
    border-radius: 25px;
}

.image {
    width: 331px;
    height: 284px;
}

.boutton {
    background-color: #B0CB88;
    height: 100px;
    width: 300px;
    padding: 20px;
    border-radius: 25px;
    font-family:'Montserrat', Courier, monospace;
    color: aliceblue;
    box-shadow:black;
}

.boutton:hover {
    background-color: #97b155;
    transition-duration: 100ms;
}

h1 {
    margin: 0;
}



    body {
        background-color: #E7EBC5;
    }


    h3 {
        text-align: center;
        padding-top: 1em;
        display: grid;
        grid-column: 1/3;
    }

    p {
        font-weight: bold;
        font-size: 1em;
    }

    div.Supercontainer {
        display: flex;
        justify-content: center;
    }

    div.container {
        margin-top: 4em;
        padding-bottom: 1em;
        height: auto;
        background-color: #B0CB88;
        border-radius: 30px;
        width: 90%;
        display: grid;
        grid-template-columns: 1fr;
        margin-inline: auto;
    }

    .containerinfo {
        display: grid;
        grid-template-columns: 1fr 1fr;
        place-items: center;
        gap: 1em;
    }

    button {
        font-size: 1.3em;
        width: 100%;
        border-radius: 10px;
        border: none;
        text-align: center;
        cursor: pointer;
        padding: 0.5em;
        transition: background-color 0.3s;
    }

    button:hover {
        background-color: #3a412c;
        color: white;
    }

    div.button {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column: 1/3;
        place-items: center;
        margin-inline: auto;
        gap: 1em;
    }

    @media (max-width: 768px) {
        div.container {
            grid-template-columns: 1fr;
            width: 80%;
            margin-inline: 0;
            padding: 1em;
            justify-content: space-between;
        }

        .containerinfo {
            grid-template-columns: 1fr;
        }

        div.button {
            grid-template-columns: 1fr;
            gap: 0.5em;
            margin-inline: 0;
        }

        button {
            width: 80%;
            font-size: 1em;
        }

        h3 {
            font-size: 1.5em;
        }

        p {
            font-size: 0.9em;
        }
    }



    /* Conteneur principal */
    .carrousel-container {
        width: 90%;
        margin: 50px auto;
        overflow: hidden;
        border: none;

    }

    /* Carrousel horizontal */
    .carrousel {
        display: flex;
        gap: 20px; /* Espacement entre les cartes */
        overflow-x: auto;
        scroll-behavior: smooth;
        padding: 20px;
    }

    /* Cache la scrollbar */
    .carrousel::-webkit-scrollbar {
        display: none;
    }

    /* Style des cartes */
    .card {
        min-width: 200px;
        height: 250px;
        background: white;
        padding: 1em;
        border-radius: 8px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
        flex-shrink: 0;
        text-align: center;
    }

    .card-image img {
        background-color: rgb(220, 220, 220);
        width: 200px;
        height: 150px;
        border-radius: 6px;
        margin-bottom: 10px;
    }


    .card {
        position: relative; /* Position relative pour que les éléments absolus se réfèrent à ce conteneur */
        width: 190px;
        background: white;
        padding: .4em;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .heart-button {
        font-size: 1.5em;
        color: #ccc; /* Couleur par défaut */
        cursor: pointer;
        transition: color 0.3s ease, transform 0.3s ease;
        position: absolute; /* Position absolue pour placement précis */
        bottom: 10px; /* Décalage par rapport au bas */
        right: 10px; /* Décalage par rapport à la droite */
        text-align: center;
    }

    /* Cœur rempli lorsqu'il est actif */
    .heart-button.active {
        color: #e74c3c; /* Rouge pour cœur rempli */
    }


    /* enlever les couleurs des liens des cards*/
    a{
        text-decoration: none;
        color: black;
    }