: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;
}