:root {
    --orange: #ff3c00;
    --orange-light: #ff7043;
    --orange-pale: #ffe5d4;
    --brown: #311d00;
    --brown-light: #5c3d2e;
    --brown-sand: #a97463;
    --gray-light: #f4f4f4;
    --gray: #777;
    --black: #000;
    --white: #fff;
}

.text-orange {
    color: var(--orange) !important;
}

.text-brown {
    color: var(--brown) !important;
}

body {
    background-color: var(--gray-light);
    font-family: Arial, sans-serif;
    min-height: 100vh; /* Important: Assure que le corps prend au moins toute la hauteur de la fenêtre */
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

header.navbar {
    background-color: var(--brown);
}
header .nav-link {
    color: var(--white) !important;
}
header .nav-link.active,
header .nav-link:hover {
    color: var(--orange) !important;
}

.article-card {
    border: none;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.article-card:hover {
    transform: translateY(-4px);
}
.article-card img {
    height: 180px;
    object-fit: cover;
}
.article-card .card-title {
    color: var(--brown);
}
.article-card .btn {
    background-color: var(--orange);
    color: var(--white);
    border: none;
}
.article-card .btn:hover {
    background-color: var(--orange-light);
}

footer {
    background-color: var(--brown);
    color: var(--white);
    padding: 20px 0;
}
footer a {
    color: var(--orange);
    text-decoration: none;
}
footer a:hover {
    color: var(--orange-light);
}

.badge {
    background-color: var(--orange);
}

.btn-outline-secondary {
    --bs-btn-color: var(--orange);
    --bs-btn-border-color: var(--orange);
    --bs-btn-hover-color: var(--white);
    --bs-btn-hover-bg: var(--orange-light);
    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--orange);
    --bs-btn-active-border-color: var(--orange);
    --bs-btn-hover-border-color: var(--orange-light);
}

.btn-outline-secondary {
    --bs-btn-color: var(--brown);
    --bs-btn-border-color: var(--brown);
    --bs-btn-hover-color: var(--white);
    --bs-btn-hover-bg: var(--brown-light);
    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--brown);
    --bs-btn-active-border-color: var(--brown);
    --bs-btn-hover-border-color: var(--brown-light);
}

.article-card .btn {
    background-color: var(--orange);
    color: var(--white);
    border: none;
    --bs-btn-hover-bg: var(--orange-light);
    --bs-btn-hover-border-color: var(--orange-light);
    --bs-btn-focus-shadow-rgb: 255, 60, 0; /* Évite la bordure bleue au focus */
}

.badge.bg-secondary {
    background-color: var(--brown-light) !important;
}

.pagination {
    --bs-pagination-color: var(--brown);
    --bs-pagination-bg: var(--white);
    --bs-pagination-border-color: var(--brown);
    --bs-pagination-hover-color: var(--white);
    --bs-pagination-hover-bg: var(--brown-light);
    --bs-pagination-hover-border-color: var(--brown-light);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(49, 29, 0, 0.25);
    --bs-pagination-active-color: var(--white);
    --bs-pagination-active-bg: var(--brown);
    --bs-pagination-active-border-color: var(--brown);
    --bs-pagination-disabled-color: var(--gray);
    --bs-pagination-disabled-bg: var(--gray-light);
    --bs-pagination-disabled-border-color: var(--gray);
}

/* Specific styles for the "Next Match" card */
.next-match-card {
    background-color: var(--brown); /* Couleur de fond pour la carte du match */
    color: var(--white); /* Texte blanc */
    border-color: var(--orange); /* Bordure orange */
}

.next-match-card .card-title {
    color: var(--orange); /* Titre du match en orange */
}

.next-match-card p {
    color: var(--white); /* Assure que le texte du match est blanc */
}

.next-match-card .text-muted {
    color: var(--orange-light) !important; /* Date/Heure en orange clair */
}

.card {
    border: 1px solid var(--brown-sand);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Légère ombre pour la profondeur */
}

.navbar .navbar-collapse {
    overflow: visible;
}

.navbar .dropdown-menu {
    z-index: 1000;
}

/* --- Ajustements Sidebar --- */

/* Bloc Matchs compact */
.match-section {
    background-color: var(--brown);
    border: 1px solid var(--orange);
    border-radius: 8px;
    overflow: hidden;
}

.match-divider {
    border-top: 1px solid var(--brown-light);
}

/* Édito minimaliste et cliquable */
.edito-bar {
    border-left: 4px solid var(--orange) !important;
    transition: all 0.2s ease-in-out;
    text-decoration: none !important;
    background-color: var(--white);
}

.edito-bar:hover {
    background-color: var(--orange-pale);
    transform: translateX(5px);
}

.edito-label {
    color: var(--orange);
    font-weight: bold;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.edito-title {
    color: var(--brown);
    font-weight: 600;
}

@media (max-width: 576px) {
    /* Réduire la taille de l'avatar sur mobile */
    .comment-wrapper img.rounded-circle {
        width: 32px !important;
        height: 32px !important;
    }
    
    /* Réduire le padding de la bulle de commentaire */
    .comment-wrapper .flex-grow-1.ms-3 {
        margin-left: 0.5rem !important; /* On rapproche la bulle de l'avatar */
        padding: 0.75rem !important; /* On réduit le padding interne */
    }

    /* Optionnel : cacher la ligne verticale au 3ème niveau pour gagner de la place */
    .comment-wrapper .comment-wrapper .comment-wrapper .replies-container {
        border-left: none !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
}

.btn-xs {
    padding: 0.1rem 0.3rem;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .7; }
}

@keyframes live-pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* Hover effect sur le bandeau */
.alert[style*="background-color: #311d00"] {
    transition: transform 0.2s ease-in-out, background-color 0.2s;
}
.alert[style*="background-color: #311d00"]:hover {
    background-color: #3d2500 !important;
    transform: translateY(-2px);
}