Ajoutez les media queries suivantes à votre fichier CSS :

css
Copier le code
/* Pour les écrans de 320px à 767px */
@media (min-width: 320px) and (max-width: 767px) {
.search-bar {
width: 85%;
margin: 0 auto; /* Centrer horizontalement */
}
}
Cela devrait être ajouté en bas de votre fichier CSS. Voici le code CSS complet avec les media queries :

css
Copier le code
.bouton-recherche {
width: 49px; /* Ajuste la largeur du bouton */
padding: 0; /* Supprime le padding */
border-radius: 15px;
}

.bouton-recherche .search-text {
display: none; /* Cache le texte "Rechercher" */
}

.bouton-recherche i {
display: inline; /* Affiche l'icône */
font-size: 18px; /* Ajuste la taille de l'icône */
}

.label-recherche {
padding-left: 20px;
}

.texte-recherche {
width: 185px;
min-width: 185px;
border-right: none;
}

.search-bar {
display: flex;
justify-content: center;
margin-bottom: 15px;
}

/* Media Queries pour les écrans de 320px à 767px */
@media (min-width: 320px) and (max-width: 767px) {
.search-bar {
width: 85%;
margin: 0 auto; /* Centrer horizontalement */
}
}
Avec cette media query, la barre de recherche prendra 85% de la largeur de l'écran pour les tailles d'écran comprises entre 320px et 767px.