/* Conteneur principal du menu */
.menu-container {
    display: flex; /* Mode flex pour l'alignement */
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    position: relative; /* Ajoute un contexte de positionnement pour la barre de recherche */
}

/* Menu */
.menu-container ul {
    display: flex; /* Mode flex pour les éléments du menu */
    list-style-type: none; /* Retirer les puces */
    margin: 0;
    padding: 0;
    align-items: center; /* Assure que le menu est centré verticalement */
}

/* Conteneur de la barre de recherche */
.search-container {
    display: flex;
    align-items: center;
    position: absolute; /* Position absolue */
    right: 10px; /* Pousse la barre de recherche à droite */
    top: 7.5px; /* Ajuste la distance par rapport au haut du menu */
}

/* Formulaire de la barre de recherche */
.search-container form {
    display: flex;
    align-items: center;
    border: 2px solid white; /* Bordure blanche */
    border-radius: 20px; /* Coins arrondis */
    background-color: white;
    overflow: hidden;
    width: 220px; /* Largeur ajustée */
    height: 35px; /* Hauteur ajustée pour ne pas affecter le menu */
}

/* Champ de texte */
.search-input {
    border: none;
    outline: none;
    padding: 5px 10px; /* Réduit le padding */
    font-size: 14px; /* Texte plus petit */
    color: #333;
    flex: 1; /* Permet au champ de texte de s'étendre */
}

/* Bouton de recherche */
.search-button {
    background-color: #ffde59; /* Jaune citron */
    border: none;
    color: white;
    font-size: 0; /* Cache le texte */
    padding: 0;
    cursor: pointer;
    width: 35px; /* Ajuste la largeur */
    height: 35px; /* Ajuste la hauteur */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 20px 20px 0; /* Coins arrondis uniquement à droite */
    transition: background-color 0.3s ease;
    background-image: url('../images/search_button.png'); /* Chemin relatif vers l'image */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%; /* Ajuste la taille de l'icône */
}

.search-button:hover {
    background-color: #ffd633; /* Jaune citron plus clair */
    transform: scale(1.05); /* Légère animation au survol */
}

/* Ombre subtile */
.search-container form {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre discrète */
}

/* Cacher l'icône de recherche sur la version ordinateur */
.search-toggle-btn {
    display: none;  /* Masquer l'icône sur la version bureau */
}

/* Afficher l'icône de recherche uniquement sur mobile */
@media screen and (max-width: 768px) {
    .search-toggle-btn {
        display: block;  /* Afficher l'icône sur mobile */
        background: none; /* Retirer le fond si nécessaire */
        border: none; /* Retirer la bordure si nécessaire */
        cursor: pointer; /* Ajouter un curseur pour interactivité */
        padding: 10px; /* Ajouter un peu de padding si besoin */
    }

    /* Cacher la barre de recherche par défaut sur mobile */
    .search-container {
        display: none;  /* Masquer la barre de recherche par défaut */
    }

    /* Afficher la barre de recherche quand le bouton est cliqué */
    .search-container.show {
        display: flex; /* Afficher la barre de recherche */
    }
}