/* ============================================================
   METERC - Charte Graphique Globale
   Or (#C9A227) · Rouge (#C00000) · Noir (#111008)
   ============================================================ */

:root {
    --meterc-gold:          #C9A227;
    --meterc-gold-light:    #D4AF37;
    --meterc-gold-dark:     #8B6914;
    --meterc-red:           #C00000;
    --meterc-red-dark:      #900000;
    --meterc-dark:          #111008;

    /* ⚠ qizon-bg et qizon-white utilisés par .main-header → mettre sombre */
    --qizon-primary:        #C9A227;
    --qizon-secondary:      #C00000;
    --qizon-heading-text:   #1A1A1A;
    --qizon-text:           #555555;
    --qizon-bg:             #111008;
    --qizon-white:          #1A1200;
    --qizon-bg-two:         #0D0900;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar,
.topbar--one {
    background-color: #0D0900 !important;
    border-bottom: 1px solid rgba(201,162,39,0.15) !important;
}

.topbar__wrapper {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.topbar__infu__icon { background-color: rgba(201,162,39,0.1) !important; border-color: rgba(201,162,39,0.2) !important; }
.topbar__infu__icon i { /*color: var(--meterc-gold) !important;*/ color: rgba(255,255,255,0.82) !important; }
.topbar__infu__text span,
.topbar__infu__text a,
.topbar__contact,
.topbar__contact a { color: rgba(255,255,255,0.82) !important; }
.topbar__infu__text a:hover,
.topbar__contact a:hover { color: var(--meterc-gold-light) !important; }

/* ============================================================
   HEADER — fond sombre partout (outer + inner)
   ============================================================ */
.main-header,
.main-header--one,
.main-header.sticky-header,
.main-header__wrappper {
    background-color: #1A1200 !important;
}

/* ⚠ CRITIQUE : .main-header__inner a background:white dans qizon.css */
.main-header__inner {
    background-color: #1A1200 !important;
    border-top: 1px solid rgba(201,162,39,0.10) !important;
    padding: 0 10px 0 20px !important;
}

.main-header.sticky-fixed,
.main-header--one.sticky-fixed {
    background-color: #0D0900 !important;
    box-shadow: 0 2px 30px rgba(0,0,0,0.8) !important;
    border-bottom: 2px solid var(--meterc-gold) !important;
}

.main-header.sticky-fixed .main-header__inner,
.main-header--one.sticky-fixed .main-header__inner {
    background-color: #0D0900 !important;
}

/* Logo header */
.main-header__logo img,
.main-header__logo__sticky img {
    max-height: 54px !important;
    width: auto !important;
}

/* ============================================================
   NAVIGATION — texte visible sur fond sombre
   ============================================================ */
.main-menu__list > li > a {
    color: rgba(255,255,255,0.88) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 28px 14px !important;
    transition: color 0.2s !important;
}

.main-menu__list > li > a:hover,
.main-menu__list > li.current > a,
.main-menu__list > li:hover > a {
    color: var(--meterc-gold-light) !important;
}

/* Dropdown sous-menus */
.main-menu__list li ul,
.main-menu__list .dropdown ul {
    background-color: #1A1200 !important;
    border-top: 3px solid var(--meterc-gold) !important;
    box-shadow: 0 12px 35px rgba(0,0,0,0.65) !important;
    border-radius: 0 0 4px 4px !important;
    min-width: 210px !important;
}

.main-menu__list li ul li a {
    color: rgba(255,255,255,0.80) !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    border-bottom: 1px solid rgba(201,162,39,0.07) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 400 !important;
}

.main-menu__list li ul li a:hover {
    color: var(--meterc-gold-light) !important;
    background-color: rgba(201,162,39,0.06) !important;
    padding-left: 24px !important;
}

/* Bouton "Rejoindre" header */
.main-menu__btn, a.main-menu__btn {
    background: linear-gradient(135deg, var(--meterc-gold-dark), var(--meterc-gold)) !important;
    color: #1A1A1A !important;
    font-weight: 700 !important;
    border: none !important;
    padding: 10px 18px !important;
    border-radius: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 13px !important;
    transition: all 0.25s !important;
}

.main-menu__btn:hover, a.main-menu__btn:hover {
    background: linear-gradient(135deg, var(--meterc-red-dark), var(--meterc-red)) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
}

.main-header__user-profile__avater .icon-account { color: var(--meterc-gold) !important; font-size: 22px !important; }
.main-header__user-profile__text { /*color: rgba(255,255,255,0.78) !important;*/ color: var(--meterc-gold) !important; font-size: 13px !important; }
.main-header__user-profile__text:hover { color: var(--meterc-gold-light) !important; }

/* ============================================================
   BOUTONS GLOBAUX
   ============================================================ */
.qizon-btn {
    background: linear-gradient(135deg, var(--meterc-gold-dark), var(--meterc-gold)) !important;
    color: #1A1A1A !important;
    border: none !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s !important;
}

.qizon-btn:hover {
    background: linear-gradient(135deg, var(--meterc-red-dark), var(--meterc-red)) !important;
    color: #FFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(192,0,0,0.28) !important;
}

.qizon-btn.qizon-btn__active { background: linear-gradient(135deg, var(--meterc-gold-dark), var(--meterc-gold)) !important; color: #1A1A1A !important; }

/* ============================================================
   HERO
   ============================================================ */
.hero-slider-one__subtitle { color: var(--meterc-gold-light) !important; font-style: italic !important; }

/* ============================================================
   TITRES SECTIONS
   ============================================================ */
.sec-title__tagline { color: var(--meterc-red) !important; }
.sec-title__tagline::before, .sec-title__tagline::after { background-color: var(--meterc-gold) !important; }

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress-box__bar__inner { background: linear-gradient(to right, var(--meterc-gold-dark), var(--meterc-gold)) !important; }

/* ============================================================
   MENU MOBILE
   ============================================================ */
.mobile-nav__content { background-color: #0D0900 !important; border-right: 3px solid var(--meterc-gold) !important; }
.mobile-nav__content .main-menu__list > li > a { padding: 12px 20px !important; border-bottom: 1px solid rgba(201,162,39,0.08) !important; }
.mobile-nav__social a { color: var(--meterc-gold) !important; }
.mobile-nav__social a:hover { color: var(--meterc-red) !important; }

/* ============================================================
   FOOTER
   ============================================================ */
.main-footer, .page-footer { background-color: #0D0900 !important; border-top: 3px solid var(--meterc-gold) !important; }
.main-footer__navmenu-title h5 { color: var(--meterc-gold-light) !important; border-bottom: 1px solid rgba(201,162,39,0.2) !important; padding-bottom: 8px !important; margin-bottom: 14px !important; }
.main-footer__nammenu-list ul { padding: 0 !important; list-style: none !important; }
.main-footer__nammenu-list ul li a { color: rgba(255,255,255,0.62) !important; display: block !important; padding: 4px 0 !important; font-size: 13px !important; transition: all 0.2s !important; }
.main-footer__nammenu-list ul li a:hover { color: var(--meterc-gold-light) !important; padding-left: 6px !important; }
.main-footer__social-icon a { color: rgba(255,255,255,0.60) !important; border: 1px solid rgba(201,162,39,0.22) !important; width: 36px !important; height: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; margin-right: 6px !important; transition: all 0.22s !important; }
.main-footer__social-icon a:hover { background-color: var(--meterc-gold) !important; color: #1A1A1A !important; border-color: var(--meterc-gold) !important; }
.main-footer__newsletter h3 { color: var(--meterc-gold-light) !important; font-family: Georgia, serif !important; }
.main-footer__icon { background: linear-gradient(135deg, var(--meterc-gold-dark), var(--meterc-gold)) !important; color: #1A1A1A !important; border: none !important; }
.main-footer__icon:hover { background: var(--meterc-red) !important; color: #FFF !important; }
.main-footer__bottom { background-color: #060400 !important; border-top: 1px solid rgba(201,162,39,0.10) !important; }
.main-footer__copyright { color: rgba(255,255,255,0.50) !important; font-size: 13px !important; }

/* ============================================================
   SEARCH + PRELOADER + CAMPAIGNS
   ============================================================ */
.search-popup__content { background-color: #1A1200 !important; }
.search-popup__form button { background: linear-gradient(135deg, var(--meterc-gold-dark), var(--meterc-gold)) !important; color: #1A1A1A !important; }
.preloader { background-color: #111008 !important; }
.campaign-one__categories a { background: var(--meterc-gold) !important; color: #1A1A1A !important; font-weight: 700 !important; }
.campaign-one__title a:hover { color: var(--meterc-gold) !important; }
.about-one__image__content { background: linear-gradient(135deg, var(--meterc-gold-dark), var(--meterc-gold)) !important; color: #1A1A1A !important; }
.about-one__icon { background: linear-gradient(135deg, var(--meterc-gold-dark), var(--meterc-gold)) !important; }
.about-one__icon:hover { background: linear-gradient(135deg, var(--meterc-red-dark), var(--meterc-red)) !important; }
.home-showcase { background-color: #1A1200 !important; }

/* ============================================================
   MENU UTILISATEUR CONNECTÉ (navbar)
   ============================================================ */
.meterc-user-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.meterc-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(201,162,39,0.08);
    border: 1px solid rgba(201,162,39,0.22);
    border-radius: 30px;
    padding: 7px 14px 7px 10px;
    color: rgba(255,255,255,0.88);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.22s ease;
    white-space: nowrap;
    max-width: 180px;
}

.meterc-user-btn:hover {
    background: rgba(201,162,39,0.14);
    border-color: rgba(201,162,39,0.45);
    color: #fff;
}

.meterc-user-btn__avatar {
    font-size: 20px;
    color: var(--meterc-gold);
    flex-shrink: 0;
}

.meterc-user-btn__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100px;
}

.meterc-user-btn__caret {
    font-size: 10px;
    color: rgba(201,162,39,0.7);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* Dropdown panel */
.meterc-user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 240px;
    background: #1A1200;
    border: 1px solid rgba(201,162,39,0.22);
    border-top: 3px solid var(--meterc-gold);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.7);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.22s ease;
    z-index: 9999;
}

/* Affichage au hover OU quand aria-expanded=true */
.meterc-user-menu:hover .meterc-user-dropdown,
.meterc-user-menu:focus-within .meterc-user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.meterc-user-menu:hover .meterc-user-btn__caret {
    transform: rotate(180deg);
}

/* En-tête dropdown (avatar + nom + email) */
.meterc-user-dropdown__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(201,162,39,0.12);
}

.meterc-user-dropdown__name {
    font-weight: 700;
    font-size: 13px;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meterc-user-dropdown__email {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

/* Séparateur */
.meterc-user-dropdown__divider {
    height: 1px;
    background: rgba(201,162,39,0.10);
    margin: 4px 0;
}

/* Items du dropdown */
.meterc-user-dropdown__item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    color: rgba(255,255,255,0.78) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.18s ease !important;
    border: none !important;
    background: none !important;
    width: 100% !important;
}

.meterc-user-dropdown__item i {
    width: 16px;
    text-align: center;
    color: var(--meterc-gold);
    font-size: 13px;
    flex-shrink: 0;
}

.meterc-user-dropdown__item:hover {
    background: rgba(201,162,39,0.07) !important;
    color: var(--meterc-gold-light) !important;
    padding-left: 20px !important;
}

.meterc-user-dropdown__item--logout {
    color: rgba(255,100,100,0.80) !important;
    border-top: 1px solid rgba(201,162,39,0.08) !important;
}

.meterc-user-dropdown__item--logout i {
    color: rgba(255,80,80,0.75) !important;
}

.meterc-user-dropdown__item--logout:hover {
    background: rgba(192,0,0,0.08) !important;
    color: #ff6b6b !important;
    padding-left: 20px !important;
}

/* Responsive : dropdown full width sur mobile */
@media (max-width: 768px) {
    .meterc-user-dropdown {
        right: auto;
        left: 0;
        width: 220px;
    }
    .meterc-user-btn__name { max-width: 70px; }
}