/* Exemple de personnalisation */
body {
    padding-top: 70px;
    background-color: #ffffff; /* Change la couleur de fond */
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; /* S'assure que la navbar occupe toute la largeur */
    z-index: 1000; /* Place la navbar au-dessus des autres éléments */
    background-color: #2e9251; /* Change la couleur de la barre de navigation */
    border-bottom: 7px solid #f9f9f9; /* Ajoute une bordure jaune */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    
}

/* h1 {
    color: #48aa2a;
    text-align: center;
    font-family: 'Zen Dots', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 3.5rem;
    font-display: swap;
} */

h1 {
    color: #48aa2a; /* Couleur verte foot */
    text-align: center;
    font-family: "Boldonse";
    /* text-transform: uppercase; */
    letter-spacing: 0.07em;
    font-size: 2.5rem;
    font-display: swap;
}



.btn-primary {
    background-color: #28a745; /* Change la couleur des boutons principaux */
    border-color: #218838;
}

.btn-primary:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

/* Style pour les titres */
h2 {
    color: #161f16; /* Bleu Bootstrap */
}

/* Style pour les cartes */
.card {
    border: 1px solid #ddd;
}

.card-:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Style pour les cartes */
.home-card {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}

.home-card:hover {
    transform: scale(1.05);
}

.card-header {
    font-family: 'Boldonse', Arial, sans-serif;
    font-weight: normal;
    font-size: 1rem;
    text-align: center;
}

.card-body {

    text-align: center;
}

.btn-tweeter {
    font-family: "Boldonse";
    border: 2px solid rgb(255, 255, 255); /* Bordure blanche */
    border-radius: 5px; /* Coins arrondis */
    padding: 10px 20px; /* Espacement interne */
    font-size: 14px; /* Taille du texte */
    font-weight: normal; /* Texte en gras */
    color: rgb(255, 255, 255); /* Couleur du texte */
    background-color: #28a745; /* Couleur de fond verte */
    transition: all 0.3s ease; /* Animation pour les interactions */
}

.btn-tweeter:hover {
    background-color: #218838; /* Couleur de fond plus sombre au survol */
    border-color: #ffffff; /* Bordure blanche au survol */
    color: #f9f9f9; /* Couleur du texte légèrement différente */
}

.match-link {
    color: #071c05; /* Couleur du lien */
    text-decoration: none; /* Supprime le soulignement */
    font-weight: bold; /* Met le texte en gras */
}

.match-link:hover {
    text-decoration: underline; /* Ajoute un soulignement au survol */
}

.team-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 50%;
    background-color: #fff;
    padding: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filters {
    margin-bottom: 20px;
}

.filter-group {
    margin-bottom: 15px;
}

.filter-label {
    font-weight: bold;
    margin-right: 10px;
}

.btn.active {
    background-color: #48aa2a; /* Couleur verte pour le filtre actif */
    color: white;
    border-color: #48aa2a;
}






/* Personnalisation de la barre de défilement pour la section des tweets */
.tweets-section {
    max-height: 600px; /* Limite la hauteur de la section */
    overflow-y: auto; /* Ajoute un défilement vertical */
    padding: 20px;
    background-color: #f9f9f9; /* Couleur de fond claire */
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    scroll-behavior: smooth; /* Rend le défilement fluide */
}

/* Style de la barre de défilement */
.tweets-section::-webkit-scrollbar {
    width: 8px; /* Largeur de la barre de défilement */
}

.tweets-section::-webkit-scrollbar-track {
    background: #e9ecef; /* Couleur de fond de la piste */
    border-radius: 10px; /* Coins arrondis */
}

.tweets-section::-webkit-scrollbar-thumb {
    background: #48aa2a; /* Couleur de la barre de défilement */
    border-radius: 10px; /* Coins arrondis */
}

.tweets-section::-webkit-scrollbar-thumb:hover {
    background: #3a8a25; /* Couleur plus sombre au survol */
}






/* Conteneur principal des tweets */
.tweet {
    background-color: #ffffff; /* Fond blanc */
    border: 1px solid #e0e0e0; /* Bordure légère */
    border-radius: 15px; /* Coins arrondis */
    padding: 20px; /* Espacement interne */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Animation fluide */
}

/* .tweet:hover {
    transform: translateY(-3px); 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); 
} */

/* En-tête du tweet */
.tweet-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

/* Avatar utilisateur */
.tweet-avatar {
    width: 50px;
    height: 50px;
    border: 2px solid #48aa2a; /* Bordure verte autour de l'avatar */
    padding: 1.5px;
    object-fit: cover;
}

/* Nom d'utilisateur */
.tweet-username {
    font-size: 1.1rem;
    color: #333;
    font-weight: bold;
}

/* Contenu du tweet */
.tweet-content p {
    margin: 0;
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
}

/* Informations sur le match */
.tweet-match {
    background-color: #f8f9fa; /* Fond gris clair */
    border: 1px solid #e0e0e0; /* Bordure légère */
    border-radius: 10px; /* Coins arrondis */
    padding: 10px; /* Espacement interne */
    font-size: 0.9rem;
    color: #444;
}

.tweet-match strong {
    color: #000; /* Texte en noir */
}

.tweet-match a {
    color: #007bff; /* Lien bleu */
    text-decoration: none;
}

.tweet-match:hover {
    transform: translateY(-2px); /* Légère élévation au survol */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Ombre plus marquée */
    text-decoration: underline; /* Soulignement au survol */
}

.tweet .btn-outline-primary {
    font-size: 0.85em;
    padding: 5px 10px;
    border-radius: 5px;
}





/* Style général pour les filtres */
.filters {
    background-color: #f8f9fa; /* Fond clair */
    border: 1px solid #e0e0e0; /* Bordure légère */
    border-radius: 10px; /* Coins arrondis */
    padding: 15px; /* Espacement interne */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Légère ombre */
}

/* Labels des filtres */
.filter-label {
    font-size: 0.9rem;
    color: #6c757d; /* Couleur grise discrète */
    margin-bottom: 6px;
    display: block;
}

/* Boutons des filtres */
.btn-filter {
    background-color: #ffffff; /* Fond blanc */
    color: #6d7d6c; /* Texte gris */
    border: 1.5px solid #b8d1b1; /* Bordure légère */
    border-radius: 50px; /* Coins complètement arrondis */
    padding: 8px 10px; /* Espacement interne */
    font-size: 0.9rem; /* Taille du texte */
    transition: all 0.3s ease-in-out; /* Animation fluide */
    margin: 2px; /* Ajoute un espacement entre chaque bouton */
    display: inline-flex; /* Aligne le contenu horizontalement */
    align-items: center; /* Centre verticalement le contenu */
}

.btn-filter img {
    margin-right: 8px; /* Ajoute un espace entre l'image et le texte */
}

.btn-filter:hover {
    background-color: #cdeac9; /* Fond gris clair au survol */
    color: #495057; /* Texte plus sombre au survol */
    border-color: #adb5bd; /* Bordure plus marquée */
}

.btn-filter.active {
    background-color: #48aa2a; /* Fond vert pour l'état actif */
    color: #ffffff; /* Texte blanc */
    border-color: #48aa2a; /* Bordure verte */
}

.btn-filter.active:hover {
    background-color: #3a8a25; /* Fond vert foncé au survol */
    border-color: #3a8a25; /* Bordure verte foncée */
}




/* Style pour cacher le formulaire au départ */
.search-container #search-form {
    transition: all 0.3s ease-in-out;
    opacity: 0;
    width: 0;
    overflow: hidden;
}

/* Style pour afficher le formulaire lorsqu'il est actif */
.search-container #search-form.active {
    display: flex;
    opacity: 1;
    width: auto;
}

/* Conteneur de recherche */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

/* Formulaire de recherche caché par défaut */
#search-form {
    transition: all 0.3s ease-in-out;
    opacity: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
}

/* Formulaire de recherche lorsqu'il est actif */
#search-form.active {
    opacity: 1;
    width: 200px; /* Ajustez la largeur selon vos besoins */
    margin-left: 10px;
}

/* Icône de recherche */
#search-icon {
    cursor: pointer;
}


/* Style pour les hashtags */
a.hashtag-link {
    color: #499715; /* Couleur personnalisée pour les hashtags */
    font-weight: bold; /* Met en gras */
    text-decoration: none; /* Supprime le soulignement */
    transition: color 0.3s ease; /* Animation fluide pour le changement de couleur */
}

a.hashtag-link:hover {
    color: #086b25; /* Couleur plus foncée au survol */
    text-decoration: underline; /* Ajoute un soulignement au survol */
}