/* Réduction du border-radius de l'en-tête */
.header {
    background-color: #2c338f !important; /* Applique la Couleur de fond */
    border-radius: 20px !important; /* Diminue le rayon des coins */
}



/* Style du texte dans la div .search-form */
.search-form {
    font-size: 14px; /* Taille du texte */
    font-weight: bold; /* Gras pour le texte */
    color: #414086; /* Couleur personnalisée */
    background-color: #f0f4f8; /* Couleur de fond claire pour contraste */
    border-radius: 10px; /* Coins arrondis */
    padding: 6px 12px; /* Espacement autour du texte */
    display: inline-block; /* Permet de l'afficher comme un bloc mais sans prendre toute la largeur */
    max-width: 180px; /* Largeur maximale de la bulle */
    text-overflow: ellipsis; /* Ajoute des points de suspension si le texte est trop long */
    white-space: nowrap; /* Empêche le texte de se couper en plusieurs lignes */
    overflow: hidden; /* Cache le texte excédentaire */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre légère pour plus de relief */
    transition: all 0.3s ease; /* Transition fluide */
}

/* Effet au survol */
.search-form:hover {
    background-color: #e0e8f3; /* Changement de fond au survol */
    color: #3359db; /* Changement de couleur du texte */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre plus marquée au survol */
}

/* Rendre le texte plus espacé sur de grandes tailles d'écran */
@media (min-width: 768px) {
    .search-form {
        font-size: 16px; /* Augmenter la taille du texte sur les grands écrans */
    }
}