/**
 * PALETTE DE COULEURS MARIALE
 * Moderne, Noble, Spirituel, Élégant
 * Blanc + Bleu Marial + Or
 */

:root {
    /* Bleu Marial - Couleurs principales */
    --bleu-marial-fonce: #003366;      /* Bleu profond marial */
    --bleu-marial: #0052A3;            /* Bleu marial principal */
    --bleu-marial-clair: #4A90E2;     /* Bleu marial clair */
    --bleu-marial-tres-clair: #E8F4FD; /* Bleu très clair pour fonds */
    
    /* Or - Accents nobles */
    --or-fonce: #B8860B;               /* Or antique foncé */
    --or: #D4AF37;                     /* Or classique */
    --or-clair: #F4E5C2;               /* Or pâle */
    --or-tres-clair: #FBF6E8;          /* Or très clair pour fonds */
    
    /* Blanc et neutres */
    --blanc: #FFFFFF;
    --blanc-casse: #FAFAFA;
    --gris-tres-clair: #F5F5F5;
    --gris-clair: #E0E0E0;
    --gris-moyen: #757575;
    --gris-fonce: #424242;
    --noir: #1A1A1A;
}

/* ============================================
   TOPBAR - Blanc avec accents or
   ============================================ */

.topbar {
    background: var(--blanc) !important;
    border-bottom: 2px solid var(--or) !important;
}

.top-navigation > li > a {
    color: var(--bleu-marial-fonce) !important;
    font-weight: 600 !important;
}

.top-navigation > li > a:hover {
    color: var(--or-fonce) !important;
    background: var(--or-tres-clair) !important;
}

/* Dropdowns de la topbar */
.top-navigation .dropdown,
.top-navigation ul.dropdown {
    background: var(--blanc) !important;
    border-top: 3px solid var(--or) !important;
    box-shadow: 0 8px 24px rgba(0, 51, 102, 0.15) !important;
}

.top-navigation .dropdown li a {
    color: var(--bleu-marial-fonce) !important;
}

.top-navigation .dropdown li a:hover {
    background: linear-gradient(to right, var(--or-tres-clair) 0%, var(--blanc) 100%) !important;
    color: var(--or-fonce) !important;
    box-shadow: inset 4px 0 0 var(--or) !important;
}

.top-navigation .dropdown li a:hover::before {
    color: var(--or) !important;
}

/* ============================================
   HEADER - Fond blanc noble
   ============================================ */

.site-header {
    background: var(--blanc) !important;
    box-shadow: 0 2px 8px rgba(0, 51, 102, 0.08) !important;
}

/* ============================================
   NAVIGATION PRINCIPALE - Bleu Marial
   ============================================ */

.navigation {
    /*background: var(--blanc) !important;*/
}

.sf-menu > li > a {
    color: var(--bleu-marial-fonce) !important;
    font-weight: 600 !important;
}

.sf-menu > li > a:hover,
.sf-menu > li.active > a {
    color: var(--or-fonce) !important;
    background: var(--or-tres-clair) !important;
}

/* Sous-menus du menu principal */
.sf-menu .dropdown,
.sf-menu ul {
    background: var(--blanc) !important;
    border-top: 3px solid var(--bleu-marial) !important;
    box-shadow: 0 8px 24px rgba(0, 51, 102, 0.12) !important;
}

.sf-menu .dropdown li a {
    color: var(--bleu-marial-fonce) !important;
}

.sf-menu .dropdown li a:hover {
    background: var(--bleu-marial-tres-clair) !important;
    color: var(--bleu-marial) !important;
    border-left: 3px solid var(--or) !important;
}

/* ============================================
   BOUTONS - Or et Bleu Marial
   ============================================ */

.btn-primary,
.button-primary {
    background: linear-gradient(135deg, var(--or-fonce) 0%, var(--or) 100%) !important;
    border: none !important;
    color: var(--blanc) !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover,
.button-primary:hover {
    background: linear-gradient(135deg, var(--or) 0%, var(--or-clair) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(212, 175, 55, 0.4) !important;
}

.btn-secondary,
.button-secondary {
    background: linear-gradient(135deg, var(--bleu-marial) 0%, var(--bleu-marial-clair) 100%) !important;
    border: none !important;
    color: var(--blanc) !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(0, 82, 163, 0.3) !important;
}

.btn-secondary:hover,
.button-secondary:hover {
    background: linear-gradient(135deg, var(--bleu-marial-clair) 0%, var(--bleu-marial) 100%) !important;
    transform: translateY(-2px) !important;
}

/* ============================================
   SECTIONS - Alternance Blanc/Bleu/Or
   ============================================ */

/* Section standard */
.section {
    background: var(--blanc) !important;
}

/* Section alternée - Bleu très clair */
.section-alt,
.section:nth-child(even) {
    background: var(--bleu-marial-tres-clair) !important;
}

/* Section spéciale - Or très clair */
.section-special {
    background: var(--or-tres-clair) !important;
    border-top: 2px solid var(--or) !important;
    border-bottom: 2px solid var(--or) !important;
}

/* ============================================
   TITRES - Bleu Marial et Or
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    color: var(--bleu-marial-fonce) !important;
}

.section-title,
.page-title {
    color: var(--bleu-marial-fonce) !important;
    position: relative !important;
    padding-bottom: 15px !important;
}

.section-title::after,
.page-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 80px !important;
    height: 3px !important;
    background: linear-gradient(to right, var(--bleu-marial) 0%, var(--or) 50%, var(--bleu-marial) 100%) !important;
}

/* ============================================
   LIENS - Bleu Marial et Or
   ============================================ */

a {
    color: var(--bleu-marial) !important;
    transition: color 0.3s ease !important;
}

a:hover {
    color: var(--or-fonce) !important;
}

/* ============================================
   CARDS/BOXES - Élégantes
   ============================================ */

.card,
.box,
.post-item {
    background: var(--blanc) !important;
    border: 1px solid var(--gris-clair) !important;
    box-shadow: 0 4px 12px rgba(0, 51, 102, 0.08) !important;
    transition: all 0.3s ease !important;
}

.card:hover,
.box:hover,
.post-item:hover {
    box-shadow: 0 8px 24px rgba(0, 51, 102, 0.15) !important;
    border-color: var(--or) !important;
    transform: translateY(-4px) !important;
}

/* ============================================
   FOOTER - Fond Blanc et Texte Gris Foncé
   ============================================ */

.footer,
footer,
.site-footer {
    background: var(--blanc) !important;
    color: var(--gris-fonce) !important;
    border-top: 3px solid var(--or) !important;
}

.footer h3,
.footer h4,
footer h3,
footer h4,
.site-footer h3,
.site-footer h4 {
    color: var(--gris-fonce) !important;
}

.footer a,
footer a,
.site-footer a {
    color: var(--gris-fonce) !important;
}

.footer a:hover,
footer a:hover,
.site-footer a:hover {
    color: var(--bleu-marial) !important;
}

/* Footer bottom */
.site-footer-bottom {
    background: var(--gris-tres-clair) !important;
    color: var(--gris-moyen) !important;
}

/* ============================================
   SIDEBAR - Items actifs
   ============================================ */

li.list-group-item.active,
.widget li.list-group-item.active,
.widget a.list-group-item.active,
.widget a.list-group-item.active:hover,
.widget a.list-group-item.active:focus,
.list-group li.list-group-item.active,
.list-group a.list-group-item.active,
.list-group a.list-group-item.active:hover,
.list-group a.list-group-item.active:focus {
    background-color: #D4AF37 !important;
    border-color: #D4AF37 !important;
    color: #FFFFFF !important;
}

/* Forcer la couleur du texte et des icônes dans les items actifs */
li.list-group-item.active,
li.list-group-item.active *,
.widget li.list-group-item.active *,
.widget .list-group-item.active *,
.list-group li.list-group-item.active *,
.list-group .list-group-item.active * {
    color: #FFFFFF !important;
}

/* ============================================
   MENU NAVIGATION - Items actifs dans dropdowns
   ============================================ */

.navigation .dropdown li.active,
.navigation .dropdown li.active > a,
.navigation .dropdown li.active > a.sf-with-ul,
.sf-menu .dropdown li.active,
.sf-menu .dropdown li.active > a,
.sf-menu .dropdown li.active > a.sf-with-ul {
    background-color: #D4AF37 !important;
    color: #FFFFFF !important;
}

.navigation .dropdown li.active > a *,
.sf-menu .dropdown li.active > a * {
    color: #FFFFFF !important;
}

/* ============================================
   ICÔNES - Or
   ============================================ */

.icon,
i.fa,
i.fas,
i.far {
    color: var(--or) !important;
}

.icon-circle {
    background: var(--or) !important;
    color: var(--blanc) !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ============================================
   BADGES/TAGS - Or et Bleu
   ============================================ */

.badge,
.tag {
    background: var(--or) !important;
    color: var(--blanc) !important;
    font-weight: 600 !important;
    padding: 4px 12px !important;
    border-radius: 20px !important;
}

.badge-blue,
.tag-blue {
    background: var(--bleu-marial) !important;
}

/* ============================================
   FORMULAIRES - Élégants
   ============================================ */

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    border: 2px solid var(--gris-clair) !important;
    transition: border-color 0.3s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    border-color: var(--bleu-marial) !important;
    box-shadow: 0 0 0 3px rgba(0, 82, 163, 0.1) !important;
}

/* ============================================
   ACCENTS DÉCORATIFS
   ============================================ */

.accent-or {
    color: var(--or) !important;
}

.accent-bleu {
    color: var(--bleu-marial) !important;
}

.bg-or {
    background: var(--or-tres-clair) !important;
}

.bg-bleu {
    background: var(--bleu-marial-tres-clair) !important;
}

.border-or {
    border-color: var(--or) !important;
}

.border-bleu {
    border-color: var(--bleu-marial) !important;
}