/**** CSS DE BASES ****/
    body {
        background-color: #E7EBC5;;
    }
    
        /* Polices de bases*/
    .h1Noir {
        font-family:'Courier New', Courier, monospace;
    }
    .h1Blanc {
        font-family:'Courier New', Courier, monospace;
        color: white;
    
    }
    
    .policep1 {
        font-family:'Courier New', Courier, monospace;
        color: aliceblue;
    }
    
    .policep2 {
        font-family:'Courier New', Courier, monospace;
        color: black;
    }
    
    
    
    .margin-top1 {
        margin-top: 1em;
    }
    
    .margin-top2 {
        margin-top: 2em;
    }
    
    .margin-top3 {
        margin-top: 3em;
    }
    
    .margin-left1 {
        margin-left: 1em;
    }
        /****Centrer div ect...****/
    .center {
        display: flex;
        justify-content: center;
    }
    
    .wrapper {
        display: flex;
        align-items: center;
        
    }
    
    /* Autres*/

    .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;
    }

    .carreVertFoncé {
        background-color: #819848;
        height: 450px;
        width: 1122px;
        margin-left: 10%;
    }
    
    .fondH1 {
        background-color: #B0CB88; 
        height: 50px;
        width: 100%;    
        margin-left: -12px;
        padding: 20px;
    }
    
    .recettes {
        background-color: #B0CB88;
        height: 450px;
        width: 300px;
        margin: 32px;
        padding: 20px;
        border-radius: 25px;
    
    }
    
    .boutton {
        background-color: #B0CB88;
        padding: 20px; 
        margin: 1em;  
        border-radius: 25px; 
        font-family:'Courier New', Courier, monospace;
        color: aliceblue;
        box-shadow:black;
    }
    
    .input {
        height: 15px;
        width: 170px;    
        padding: 20px;
        border-radius: 16px; 
        font-family:'Courier New', Courier, monospace;
        color: black;
        box-shadow:black;
    }
    
    .image {
        margin: 2em;
        height: 320px;
        width: 320px;
        background-color: black;
    }



    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 {
        background-color: #fff;
        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 pour les recettes */
    .recipes-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* 4 colonnes max */
        gap: 20px; /* Espacement entre les cartes */
        padding: 80px;
    }

    /* Styles pour chaque carte */
    .card {
        background: #f4f4f4;
        padding: 15px;
        height: fit-content;
        text-align: center;
        border: 1px solid #ddd;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s, box-shadow 0.2s;
        display: flex;
        flex-direction: column; /* Aligne les éléments verticalement */
        justify-content: space-between; /* Espace adapté pour le contenu */
    }

    .card:hover {
        transform: scale(1.05); /* Agrandissement au survol */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }

    /* Image des cartes */
    .card-image img {
        max-width: 100%; /* S'adapte à la largeur de la carte */
        height: 150px; /* Conserve les proportions */
        width: 200px;
        border-radius: 5px;
    }

    /* Texte */
    .category {
        font-weight: bold;
        margin: 10px 0;
        color: #333;
    }

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