.action-gaston,
.action-menu-plat,
.action-menu-categorie {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; // Espacement entre les formulaires
    gap: 1rem; // Espacement entre les blocs des formulaires
    padding: 1rem;

    // Assurer que les divs ont la même taille
    .ajouter-utilisateur,
    .modifier-utilisateur,
    .supprimer-utilisateur,
    .ajouter,
    .modifier,
    .supprimer,
    .ajouter-categorie,
    .modifier-categorie,
    .supprimer-categorie {
        flex: 1; // Chaque section prend une largeur égale
        background-color: #f8f8f8;
        border: 1px solid #DDAC17;
        border-radius: 8px;
        padding: 1.5rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        display: flex;
        flex-direction: column; // Aligne les enfants verticalement
        align-items: center; // Centre les éléments horizontalement
        justify-content: space-between; // Espace entre les champs et le bouton
        height: 500px; // Assure que les sections ont une hauteur fixe
        position: relative;

        form {
            display: flex;
            flex-direction: column;

            input[type="submit"] {
                background-color: #c79f26;
                color: #fff;
                border: none;
                padding: 0.5rem 1rem;
                border-radius: 4px;
                cursor: pointer;
                font-size: 1rem;
                width: 80%; // Même largeur que les autres champs de saisie
                align-self: center; // Centre le bouton horizontalement dans son conteneur
                margin-top: 1rem; // Espace au-dessus du bouton
                margin-left: 1.3rem;

                &:hover {
                    background-color: #DDAC17;;
                    color: #753612; 
                }
            }
        }

        // Largeur uniforme pour tous les éléments de formulaire
        label,
        select,
        input[type="text"],
        input[type="password"],
        input[type="file"] {
            width: 100%; // Largeur complète de la section
            max-width: 300px; // Largeur maximale des éléments
        }

        // Centrer le texte
        label {
            text-align: center;
            margin-bottom: 1rem;
            font-size: 1.2rem;
            color: #333;
        }

        select,
        input[type="text"],
        input[type="password"],
        input[type="file"] {
            margin-bottom: 1rem;
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
        }

        // Conteneur pour le bouton submit centré
        .button-container {
            display: flex;
            justify-content: center; // Centre le bouton horizontalement
            width: 100%;
        }

        
    }

    .supprimer,
    .supprimer-utilisateur,
    .supprimer-categorie {
        select {
            margin-bottom: 1rem;
        }
    }
}


.menu-utilisateurs {
    margin-top: 2rem;

       h1 {
            margin: 3rem 0 1rem;
            color: #D1D0CB;
        }

        h2 {
            margin: 2rem 0;
            color: #D1D0CB;
        }

        p {
            margin: 0.5rem 0;
            color: #D1D0CB;
        }

        .nom-menu {
            color: #DDAC17;
            transition: color 0.3s ease;

            &:hover {
                color: #ac4e18
            }
        }

        .prix {
            color: #ad8a21;
            font-weight: bold;
            margin-bottom: 2rem;
        }

        .separateur {
            width: 100%;
            height: 1px;
            background-color: #DDAC17;
            margin: 1.5rem 0;
        }

        .image-menu {
            display: none;
        }

        .plat {
            &:nth-of-type(odd) {
                background-color: #1d1d1d;
            }
        }

    h2 {
        margin-top: 2rem;
        color: #D1D0CB; // Couleur blanche comme les autres textes
        text-align: center; // Centre les titres
        font-size: 2rem; // Augmente la taille de la police
    }

    .menu-item {
        display: flex;
        align-items: center;
        margin: 2rem auto; // Centre les éléments horizontalement
        max-width: 900px; // Limite la largeur maximale pour éviter que les éléments ne s'étendent trop
        width: 100%;

        &.left {
            flex-direction: row;
        }

        &.right {
            flex-direction: row-reverse;
        }

        .separateur {
            width: 100%;
            height: 1px;
            background-color: #DDAC17;
            margin: 2rem 0;
        }

        .image-menu {
            width: 300px; 
            height: 200px; 
            object-fit: cover; 
            display: none;
            margin: 0 1rem; 
            border-radius: 8px; 
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
            align-self: center;
        }

        .menu-text {
            flex: 1;
            text-align: center;
            color: #D1D0CB;

            p {
                margin: 0.5rem 0;
            }
        }
    }
}

@media screen and (min-width: 1200px) {
    .utilisateurs {
        padding-top: 150px;

        .action-gaston {

            .ajouter-utilisateur,
            .modifier-utilisateur,
            .supprimer-utilisateur {
                height: auto;
            }
        }

        .menu-item {
            display: flex;
            align-items: center;
            margin: 2rem auto; // Centre les éléments horizontalement
            max-width: 900px; 
            width: 100%;

            &.left,
            &.right {
                .image-menu {
                    width: 200px; 
                    height: 150px; 
                    object-fit: cover; 
                    display: block;
                    margin: 3rem 1rem; 
                    border-radius: 8px; // Coins arrondis pour les images
                    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
                    align-self: center; 
                }

                .menu-text {
                    flex: 1; // Utilise l'espace restant pour le texte
                    text-align: center; 
                    color: #D1D0CB; // Couleur du texte
                    padding: 0 1rem; // Ajoute un léger padding autour du texte
                }
            }
        }
    }
}