:root {
    /* --- Palette Canopée --- */
    --canopee-black-brown: #12100e;
    --canopee-dark-grey: #1e1b18;
    --canopee-beige: #f1e8d8;
    --canopee-beige-dark: #d1c0a5;
    --canopee-white-soft: #f8f9fa;
    --canopee-wood: #b5835a;
    
    /* --- Surcharge Bootstrap Variables --- */
    --bs-primary: var(--canopee-wood);
    --bs-primary-rgb: 181, 131, 90;
    
    --bs-info: var(--canopee-wood);
    --bs-info-rgb: 181, 131, 90; /* RGB de #b5835a */
    
    --bs-body-bg: var(--canopee-black-brown);
}

/* --- Styles de base --- */
body {
    padding-bottom: 70px;
    background-color: var(--canopee-black-brown);
    color: var(--canopee-beige);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* --- Titres & Textes --- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--canopee-beige);
}

/* On force le noir quand on est dans un conteneur beige (Card, Admin, etc.) */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.admin-page h1, .admin-page h2, .admin-page h3, .admin-page h4, .admin-page h5, .admin-page h6,
.modal-content h1, .modal-content h2, .modal-content h3, .modal-content h4, .modal-content h5, .modal-content h6,
.atelier-content h1, .atelier-content h2, .atelier-content h3, .atelier-content h4, .atelier-content h5, .atelier-content h6 {
    color: var(--canopee-black-brown);
}

.text-muted {
    color: rgba(241, 232, 216, 0.6) !important;
}

/* Force le noir pour les textes muted dans les blocs beiges */
.card .text-muted, 
.admin-page .text-muted, 
.modal-content .text-muted, 
.atelier-content .text-muted {
    color: rgba(18, 16, 14, 0.6) !important;
}

.text-muted i {
    color: inherit;
}

.card .text-muted, .admin-page .text-muted {
    color: rgba(18, 16, 14, 0.6) !important;
}

/* --- Navigation & Dropdowns --- */
nav.navbar.bg-primary {
    background-color: #000000 !important;
}

.navbar .navbar-brand {
    font-weight: 700;
    color: var(--canopee-beige);
}

.navbar .nav-link {
    color: rgba(241, 232, 216, 0.7);
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--canopee-beige);
}

/* Dropdown Menus (Saison 1, Admin, etc.) */
.dropdown-menu {
    background-color: var(--canopee-beige);
    border: 1px solid var(--canopee-beige-dark);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.dropdown-item {
    color: var(--canopee-black-brown);
    font-weight: 500;
    padding: 0.6rem 1.5rem;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--canopee-beige-dark);
    color: var(--canopee-black-brown);
}

.dropdown-divider {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* --- Proposition Cards --- */
.proposition-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background-color: var(--canopee-beige) !important;
}

.proposition-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
}

.proposition-card .card-title, 
.proposition-card .card-text,
.proposition-card .small {
    color: var(--canopee-black-brown);
}

.transition-all {
    transition: all 0.3s ease;
}

/* --- Boutons --- */
.btn-primary {
    background-color: var(--canopee-beige);
    border-color: var(--canopee-beige);
    color: var(--canopee-black-brown);
    font-weight: 600;
}

.btn-primary:hover {
    background-color: var(--canopee-white-soft);
    border-color: var(--canopee-white-soft);
    color: #000;
}

.btn-outline-primary {
    border-color: var(--canopee-wood);
    color: var(--canopee-wood);
}

.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active {
    background-color: var(--canopee-wood);
    border-color: var(--canopee-wood);
    color: var(--canopee-black-brown);
}

.btn-warning {
    background-color: var(--canopee-beige);
    border-color: var(--canopee-beige-dark);
    color: var(--canopee-black-brown);
}

/* --- Cartes & Listes (Le coeur du Beige) --- */
/* En ciblant .card on définit le style par défaut */
.card, 
.atelier-card,
.modal-content,
.list-group-item {
    background-color: var(--canopee-beige);
    color: var(--canopee-black-brown);
    border: 1px solid var(--canopee-beige-dark);
    border-radius: 12px;
    overflow: hidden; /* Coupe tout ce qui dépasse des coins arrondis */
}

/* Encart image exercice */
.exercice-img-header {
    border-top-left-radius: 11px; /* 1px de moins pour épouser l'intérieur de la bordure */
    border-top-right-radius: 11px;
}

/* On s'assure que tout le texte interne suit */
.card .card-body,
.card .card-title,
.card .card-text,
.card h1, .card h2, .card h3, .card h4, .card h5,
.card .form-label,
.card .form-text {
    color: var(--canopee-black-brown);
}

/* Cas particulier : Le contenu de l'atelier sur la page focus */
.atelier-content {
    background-color: var(--canopee-beige);
    color: var(--canopee-black-brown);
}

/* --- Tableaux --- */
.table {
    --bs-table-bg: var(--canopee-beige);
    --bs-table-color: var(--canopee-black-brown);
    --bs-table-border-color: var(--canopee-beige-dark);
    color: var(--canopee-black-brown);
}

.table thead th {
    background-color: var(--canopee-beige-dark);
    color: var(--canopee-black-brown);
    border-bottom: 2px solid var(--canopee-black-brown);
}

/* --- Alertes & Badges --- */
.alert-light, 
.alert-info, 
.badge.bg-light {
    background-color: var(--canopee-beige);
    border-color: var(--canopee-beige-dark);
    color: var(--canopee-black-brown);
}

/* Pour contrer les textes muted ou small dans les alertes */
.alert-light *, 
.alert-info * {
    color: var(--canopee-black-brown);
}

.alert-warning {
    background-color: #2c2519;
    border-color: #4a3f2a;
    color: var(--canopee-beige);
}

/* --- Séances --- */
.atelier-past {
    opacity: 0.9;
}

.atelier-future {
    border: 2px solid rgba(255, 193, 7, 0.5) !important;
    box-shadow: 0 0 20px rgba(255, 165, 0, 0.4) !important;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.atelier-future:hover {
    box-shadow: 0 0 30px rgba(255, 165, 0, 0.6) !important;
    transform: translateY(-5px) scale(1.02);
}

/* Badge "Prochainement" discret sur les futurs ateliers */
.atelier-future::before {
    content: "À VENIR";
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(45deg, #ff9800, #ffc107);
    color: #000;
    font-size: 0.6rem;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 20px;
    z-index: 10;
    letter-spacing: 1px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* --- Modales --- */
.modal-header {
    background-color: var(--canopee-black-brown);
    color: var(--canopee-beige);
}

.modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5, .modal-header h6,
.modal-header .modal-title {
    color: #ffffff !important;
}

.modal-header .btn-close {
    filter: invert(1) brightness(2);
}

/* --- Formulaires, Modales & Inputs --- */
.form-control, 
.form-select,
.admin-page .form-control, 
.admin-page .form-select,
.card .form-control,
.card .form-select,
.modal-body .form-control, 
.modal-body .form-select {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid var(--canopee-beige-dark);
}

.form-control:focus, 
.form-select:focus,
.admin-page .form-control:focus, 
.card .form-control:focus,
.modal-body .form-control:focus {
    background-color: #fff;
    color: #000;
    border-color: var(--canopee-black-brown);
    box-shadow: 0 0 0 0.25rem rgba(18, 16, 14, 0.1);
}

/* --- Pagination --- */
.pagination .page-link {
    background-color: transparent;
    border-color: #3a352f;
    color: var(--canopee-wood);
}

.pagination .page-item.active .page-link {
    background-color: var(--canopee-beige);
    color: var(--canopee-black-brown);
    border-color: var(--canopee-beige);
    font-weight: bold;
}

/* --- Couleurs Spécifiques --- */
.badge.bg-primary {
    background-color: #a2d149;
    color: #000;
}

.bg-purple {
    background-color: #5a2d91;
    color: #fff;
}

/* --- Footer --- */
.footer-canopee {
    background-color: #000;
    border-top: 1px solid #2a2621;
    color: var(--canopee-beige);
    padding: 30px 0;
    margin-top: 50px;
}

.footer-canopee a {
    color: var(--canopee-beige);
}

.footer-social-icons i {
    font-size: 1.5rem;
}

.extra-small {
    font-size: 0.75rem;
}

/* Classes Utilitaires */
.bg-wood {
    background-color: var(--canopee-wood) !important;
    color: var(--canopee-black-brown) !important;
}

/* Surcharge des composants Info pour le bois */
.btn-info {
    background-color: var(--canopee-wood) !important;
    border-color: var(--canopee-wood) !important;
    color: var(--canopee-black-brown) !important;
    font-weight: 600;
}

.btn-info:hover {
    background-color: var(--canopee-beige) !important;
    border-color: var(--canopee-beige) !important;
}

.alert-info {
    background-color: var(--canopee-beige) !important;
    border-color: var(--canopee-wood) !important;
    color: var(--canopee-black-brown) !important;
}

.bg-black-brown { background-color: var(--canopee-black-brown) !important; }
.bg-beige { background-color: var(--canopee-beige) !important; }

/* --- Correctifs Navigation & Homepage --- */
/* Forcer l'affichage des menus déroulants en noir sur beige */
.navbar .dropdown-menu {
    background-color: var(--canopee-beige) !important;
}

.navbar .dropdown-item {
    color: var(--canopee-black-brown) !important;
}

.navbar .dropdown-item:hover {
    background-color: var(--canopee-beige-dark) !important;
}

/* Label du filtre homepage */
label[for='filterSerie'] {
    color: var(--canopee-beige) !important;
    font-weight: 600;
}

/* Tooltips */
.tooltip-inner {
    background-color: var(--canopee-dark-grey) !important;
    color: var(--canopee-beige) !important;
    border: 1px solid var(--canopee-beige-dark);
}
.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--canopee-beige-dark) !important;
}
.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--canopee-beige-dark) !important;
}
.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: var(--canopee-beige-dark) !important;
}
.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: var(--canopee-beige-dark) !important;
}

/* Onglets du Profil */
#profileTabs .nav-link {
    color: var(--canopee-black-brown) !important;
    background-color: var(--canopee-beige);
    border: 1px solid var(--canopee-black-brown);
    margin-right: 5px;
    transition: all 0.2s ease;
}

#profileTabs .nav-link.active {
    color: white !important;
    background-color: var(--canopee-wood) !important;
    border-color: var(--canopee-black-brown);
    font-weight: bold;
}

#profileTabs .nav-link:hover:not(.active) {
    background-color: var(--canopee-beige-dark);
}

/* Custom Switch Black */
.custom-switch-black:checked {
    background-color: #000 !important;
    border-color: #000 !important;
}
.custom-switch-black {
    border-color: rgba(0,0,0,0.5);
}