:root {
    --expobms-blue: #003366;
    --expobms-gold: #D4AF37;
}

body {
    background-color: #f8f9fa;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.navbar {
    background-color: var(--expobms-blue) !important;
    border-bottom: 3px solid var(--expobms-gold);
    padding: 0.8rem 1rem;
}

/* Forcer l'icône burger blanche */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3Base path stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

.navbar-brand, .nav-link {
    color: #ffffff !important;
}

.nav-link:hover {
    color: var(--expobms-gold) !important;
}

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

/* Style pour le lien actif dans la navbar */
.navbar-nav .nav-link.active-custom {
    color: var(--expobms-gold) !important; /* Ta couleur dorée */
    font-weight: bold;
    border-bottom: 2px solid var(--expobms-gold);
}

/* Optionnel : effet au survol pour les autres */
.navbar-nav .nav-link:hover {
    color: #f8f9fa;
    opacity: 0.8;
}

.hero-section {
    /* On réduit le padding au minimum */
    padding: 2rem 0; 
    
    /* Optionnel : on force une hauteur max si besoin */
    min-height: auto; 
    
    /* Pour s'assurer que le contenu est bien centré */
    display: flex;
    flex-direction: column;
    justify-content: center;

    color: #ffffff !important;
    
    background-color: #003366; /* Ta couleur de fond */
}

.hero-section h1 {
    font-size: 1.8rem; /* On réduit aussi la taille du titre si besoin */
    margin-bottom: 0.2rem;
}

.hero-section p {
    font-size: 1rem;
    margin-bottom: 0;
}

.btn-expobms {
    background-color: var(--expobms-blue);
    color: white;
    border: none;
}

.btn-expobms:hover {
    background-color: var(--expobms-gold);
    color: black;
    border: none;
}

/* --- BOUTON DE RECHERCHE (Action Principale) --- */
/* On utilise le doré pour qu'il "saute aux yeux" sur le fond bleu */
.btn-expobms-primary {
    background-color: var(--expobms-gold) !important;
    border-color: #d4a017 !important; /* Un doré un peu plus sombre pour la bordure */
    color: #000000 !important;       /* Texte noir pour une lisibilité maximale sur le jaune/or */
    font-weight: bold !important;
   
}

.btn-expobms-primary:hover {
    background-color: #ffcf40 !important; /* Plus lumineux au survol */
    border-color: var(--expobms-gold) !important;
    color: #000000 !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

/* --- BOUTON EFFACER (Action Secondaire) --- */
/* On garde le Bordeaux, il tranche bien avec le doré */
.btn-expobms-secondary {
    background-color: #8b0000 !important;
    border-color: #660000 !important;
    color: #ffffff !important;
}

.btn-expobms-secondary:hover {
    background-color: #a00000 !important;
    color: #ffffff !important;
}


/* On force l'icône du hamburger à devenir blanche */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3%3C/svg%3") !important;
}

/* On change aussi la couleur de la bordure du carré pour qu'elle soit visible */
.navbar-toggler {
    border: none !important; /* Supprime le cadre autour des traits */
    outline: none !important;
    box-shadow: none !important; /* Supprime l'effet de clic bleu/gris */
}

footer {
    margin-top: auto;
    background: #fff;
    padding: 20px;
    border-top: 1px solid #ddd;
    text-align: center;
}



/* Alphabet de recherche */
.alphabet-container {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.alphabet-wrapper {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-overflow-scrolling: touch;
    padding: 5px 10px;
    scrollbar-width: none;
}

.alphabet-wrapper::-webkit-scrollbar { display: none; }

.alphabet-wrapper .pagination {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    margin: 0;
}


/* Couleur du bouton alphabétique sélectionné (Active) */
.alphabet-wrapper .page-item.active .page-link {
    background-color: var(--expobms-blue) !important;
    border-color: var(--expobms-blue) !important;
    color: #ffffff !important; /* Texte en blanc */
}

/* Style par défaut des liens non sélectionnés pour harmoniser */
.alphabet-wrapper .page-link {
    color: var(--expobms-blue); /* Texte bleu au lieu du bleu Bootstrap par défaut */
    border-color: #dee2e6;
}

/* Style au survol (Hover) des liens non sélectionnés */
.alphabet-wrapper .page-item:not(.active) .page-link:hover {
    background-color: #e9ecef;
    color: var(--expobms-blue);
    border-color: #dee2e6;
}

/* Optionnel : si tu veux que le bouton "Tous" ou les lettres 
   aient une bordure dorée quand ils sont actifs pour rappeler la navbar */
.alphabet-wrapper .page-item.active .page-link {
    border-bottom: 3px solid var(--expobms-gold) !important;
}

/* Ciblage direct des cellules pour forcer le background */
thead th, 
tfoot th, 
tfoot td {
    background-color: var(--expobms-blue) !important;
    color: #ffffff !important;
    font-weight: bold !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Optionnel : Rappel de la bordure dorée pour le style ExpoBMS */
thead tr:first-child th {
    border-top: 3px solid var(--expobms-gold) !important;
}

/* --- Remplaçant pour bg-primary (Le Bleu Institutionnel) --- */
/* Un bleu plus profond, type "Bleu de France" ou Marine ancien */
.bg-expobms-dark {
    background-color: #1b3a5a !important; 
    color: #ffffff !important;
}

/* --- Remplaçant pour bg-info (Le Ton Neutre / Papier) --- */
/* Un beige/crème rappelant le vieux papier ou le parchemin */
/* Idéal pour les alertes ou les petits encarts d'info */
.bg-expobms-paper {
    background-color: #f4ece1 !important;
    border: 1px solid #dcd0ba !important;
    color: #5d4037 !important; /* Texte marron foncé pour le contraste */
}

/* Optionnel : Une version "Lapis-Lazuli" plus vive si tu veux du peps */
.bg-expobms-royal {
    background-color: #2a5298 !important;
    color: #ffffff !important;
}

/* --- Style des pastilles (Pills) --- */
.nav-pills .nav-link1 {
    background-color: #f8f9fa !important;
    color: var(--expobms-blue) !important;
    border: 1px solid var(--expobms-blue) !important;
    margin-right: 5px;
    transition: all 0.3s ease;
    border-radius: 50px; /* Forme pilule */
    padding: 8px 20px;
    /* Supprime le soulignement par défaut */
    text-decoration: none !important;
}

/* --- Pastille au survol --- */
.nav-pills .nav-link1:hover {
    background-color: #e9ecef !important;
    border-color: var(--expobms-gold) !important;
}

/* --- Pastille ACTIVE (L'onglet sélectionné) --- */
.nav-pills .nav-link1.active {
    background-color: var(--expobms-blue) !important;
    color: var(--expobms-gold) !important; /* Texte doré sur fond bleu */
    border-color: var(--expobms-gold) !important;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Positionnement et style du bouton */

    #scrollToTop {
        /* POSITIONNEMENT CRUCIAL */
        position: fixed !important;
        bottom: 25px !important;
        right: 25px !important;
        left: auto !important; /* Force l'annulation d'un éventuel left:0 */
        
        /* DIMENSIONS FIXES (Anti-barre large) */
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important; /* Sécurité supplémentaire */
        
        /* APPARENCE */
        background-color: var(--expobms-blue) !important;
        color: white !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
        
        /* AFFICHAGE ET CENTRAGE */
        display: none; /* Changé en 'flex' par le JS */
        align-items: center !important;
        justify-content: center !important;
        
        /* INTERACTION */
        cursor: pointer !important;
        z-index: 999999 !important;
        transition: transform 0.2s ease, opacity 0.3s !important;
        border: none !important;
    }

    #scrollToTop:hover {
        transform: scale(1.1) !important;
        background-color: var(--expobms-gold) !important;
        color: black !important;
    }

    /* Pour s'assurer que l'icône ne s'étire pas */
    #scrollToTop svg {
        width: 24px !important;
        height: 24px !important;
        display: block !important;
    }