/* style.css complet extrait du code original */

html, body {
    overflow-x: hidden;
    width: 100vw;
    position: relative;
}

body { 
    background: rgb(175, 176, 179) !important; 
    font-family: 'Roboto', sans-serif; 
}

.container-fluid { 
    padding-left: 10px; 
    padding-right: 10px; 
}

/* 🔹 Navbar */
.navbar-custom { 
    background: linear-gradient(135deg, #001F3F, #003366); 
}
.navbar-brand { 
    font-size: 1.8em; 
    font-weight: bold; 
}
.navbar .btn { 
    font-size: 0.9em; 
    padding: 6px 14px; 
    border-radius: 20px; 
}

/* 🔹 Bandeau de drapeaux */
.country-banner { 
    margin: 15px 0; 
    text-align: center; 
}
.country-banner a { 
    font-size: 1.5em; 
    padding: 5px; 
    margin: 0 5px; 
    display: inline-block; 
    border: 2px solid transparent; 
    border-radius: 5px; 
}
.country-banner a.selected { 
    border: 3px solid red; 
}

/* 🔹 Filtre des thèmes */
.filter-section { 
    margin: 20px 0; 
}
.form-select { 
    border-radius: 30px; 
    padding: 10px 15px; 
    font-size: 1em; 
}

/* 🔹 Grille Responsive */
.custom-row { 
    display: flex; 
    flex-wrap: wrap; 
}
.news-col { 
    flex: 0 0 75%; 
    max-width: 75%; 
}
.chat-col { 
    flex: 0 0 25%; 
    max-width: 25%; 
    background-color: #f0f8ff; 
    padding: 10px; 
}
@media (max-width: 991px) {
    .news-col, .chat-col { 
        flex: 0 0 100%; 
        max-width: 100%; 
    }
}

/* 🔹 Cartes de news */
.card { 
    margin-bottom: 20px !important; 
    border: none; 
    border-radius: 15px; 
    background: #fff; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); 
    overflow: hidden; 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.card:hover { 
    transform: translateY(0); 
    box-shadow: 0 12px 30px rgba(0,0,0,0.15); 
}
.card-body { 
    padding: 20px; 
    position: relative; 
}
.card-title { 
    font-size: 1.2em; 
    font-weight: 700; 
    color: #003399; 
}
.card-text { 
    font-size: 0.95em; 
    color: #555; 
}
.btn-primary { 
    background: linear-gradient(135deg, #001F3F, #003366); 
    border: none; 
    border-radius: 20px; 
    padding: 8px 16px; 
    font-weight: bold; 
}

/* 🔹 Source de la news */
.news-source { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    font-size: 0.8em; 
    color: #777; 
}

.country-banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px; /* Réduit l'espacement entre les éléments */
    max-width: 500px;
    margin: 10px auto; /* Réduit l'espace vertical */
}

.country-banner a {
    text-decoration: none;
    font-size: 24px;
    padding: 3px 8px; /* Ajustement pour réduire la hauteur */
}

/* 🔥 Animation d’apparition */
.fadeIn { 
    animation: fadeIn 0.8s ease-in-out; 
}
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(20px); } 
    to { opacity: 1; transform: translateY(0); } 
}

/* 🔹 Bordure gauche + Fond dégradé dynamique */


.card-border {
    border-left: 5px solid var(--border-color);
    background: linear-gradient(to right, var(--border-color), #f0f0f0);
  }
  
  .news-actualites { --border-color: #D3D3D3; }
  .news-politique { --border-color: #B0E0E6; }
  .news-sport { --border-color: #C1E1C1; }
  .news-economie { --border-color: #FFFACD; }
  .news-culture { --border-color: #F4C2C2; }
  .news-international { --border-color: #A7C7E7; }
  .news-divertissement { --border-color: #FFDAB9; }
  .news-science { --border-color: #B0E0E6; }


/* 🔹 Espacement entre les news */
.news-card {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    padding: 10px;
}
@media (max-width: 991px) {
    .news-card {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 992px) {
    .card {
        margin-bottom: 15px !important;
    }
}

/* tailles plus grandes pour ecrns portables  */
@media (max-width: 991px) {
    .card-title {
        font-size: 1.4em !important; /* Titre confortable */
        color: #003399 !important;
    }
    .card-text {
        font-size: 1.1em !important; /* Texte clair et lisible */
        color: #555 !important;
    }
    .btn-primary {
        font-size: 1em !important; /* Bouton adapté aux doigts */
        padding: 10px 18px !important;
    }
    .news-type, .news-source {
        font-size: 1em !important; /* Légendes discrètes mais visibles */
        color: #777 !important;
    }
}