/* Styles pour la barre de recherche */
#search-wrapper {
    display: flex; /* Alignement horizontal pour le champ */
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    width: 100%; /* Largeur totale du conteneur */
    margin: 20px 0; /* Espacement extérieur */
    position: relative; /* Positionnement relatif pour l'icône */
    margin-top: 30px;
    z-index: 999; /* Assurez-vous que la barre de recherche est en dessous de la navbar */
}

/* Style du champ de recherche */
#search {
    padding: 10px 15px; /* Espacement interne pour le texte */
    border: 2px solid #ccc; /* Bordure grise */
    border-radius: 25px; /* Coins arrondis */
    outline: none; /* Retirer le contour bleu par défaut */
    font-size: 16px; /* Taille du texte */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Animation pour les interactions */
    max-width: 440px; /* Largeur maximale de la barre de recherche */
    width: 100%; /* Prendre toute la largeur disponible */
    padding-right: 40px; /* Espace pour l'icône */
}

/* Effet visuel lorsqu'on clique dans le champ */
#search:focus {
    border-color: #0f1823; /* Bordure bleue au focus */
    box-shadow: 0 0 10px #0c1826; /* Effet de lueur bleue */
}

/* Style de l'icône de recherche */
.search-icon {
    position: absolute; /* Positionnement absolu pour l'icône */
    right: 15px; /* Distance par rapport au bord droit */
    font-size: 20px; /* Taille de l'icône */
    color: #ccc; /* Couleur de l'icône */
    pointer-events: none; /* Empêche l'icône d'interférer avec les clics */
}