/* ========================================
   Clairval Moon — surcharges desktop
   Orange/cuivre hardcodé → bleu (hub communauté)
   Chargé via clairval-moon.css (après Original + tokens)
   ======================================== */

:root {
    --moon-accent: #2aa1ff;
    --moon-accent-soft: rgba(42, 161, 255, 0.12);
    --moon-accent-bg: rgba(42, 161, 255, 0.15);
    --moon-accent-bg-hover: rgba(42, 161, 255, 0.22);
    --moon-accent-border: rgba(42, 161, 255, 0.22);
    --moon-accent-border-strong: rgba(42, 161, 255, 0.38);
    --moon-accent-border-focus: rgba(42, 161, 255, 0.45);
    --moon-glass-panel: linear-gradient(
        135deg,
        rgba(11, 15, 20, 0.35) 0%,
        rgba(18, 24, 33, 0.55) 50%,
        rgba(18, 24, 33, 0.78) 100%
    );
    --moon-glass-panel-flat: linear-gradient(
        180deg,
        rgba(18, 24, 33, 0.5) 0%,
        rgba(18, 24, 33, 0.72) 100%
    );
}

/* --- Bannière maintenance staff --- */
.floating-block.floating-maintenance-banner.floating-maintenance-banner--active {
    background: linear-gradient(120deg, #1565a8, #2aa1ff) !important;
    border-color: rgba(96, 190, 255, 0.65) !important;
    box-shadow: 0 18px 45px rgba(42, 161, 255, 0.4) !important;
}

/* --- Boutons (clairval-buttons.css) --- */
.btn-primary,
button.btn-primary,
a.btn-primary,
input.btn-primary[type="submit"],
input[type="submit"].btn-primary {
    background: var(--moon-accent-bg) !important;
    border-color: var(--moon-accent-border) !important;
    color: var(--text-primary, #e8eef4) !important;
}

.btn-primary:hover:not(:disabled),
a.btn-primary:hover {
    background: var(--moon-accent-bg-hover) !important;
    border-color: var(--moon-accent-border-strong) !important;
}

.btn-secondary,
button.btn-secondary,
a.btn-secondary {
    border-color: var(--moon-accent-border) !important;
}

.btn-secondary:hover:not(:disabled),
a.btn-secondary:hover {
    background: var(--moon-accent-bg) !important;
    border-color: var(--moon-accent-border-strong) !important;
}

.btn-tabs-primary,
.btn-tabs-primary.active {
    border-color: var(--moon-accent-border) !important;
}

.btn-tabs-primary.active,
.btn-tabs-primary:hover {
    background: var(--moon-accent-bg) !important;
    border-color: var(--moon-accent-border-strong) !important;
    color: var(--moon-accent) !important;
}

/* --- Blocs flottants & navigation --- */
.floating-block,
#floating-tools.floating-block,
.floating-user.floating-block,
.floating-legal.floating-block,
.floating-nav.floating-block {
    background: var(--moon-glass-panel) !important;
    border-color: var(--moon-accent-border) !important;
}

.floating-block::before,
#floating-tools.floating-block::before,
.floating-user.floating-block::before,
.floating-legal.floating-block::before,
.floating-nav.floating-block::before {
    background: var(--clairval-glass-rim) !important;
}

.floating-block .floating-btn,
.floating-block button.floating-btn {
    border-color: var(--moon-accent-border) !important;
}

.floating-block .floating-btn:hover {
    background: var(--moon-accent-bg) !important;
    border-color: var(--moon-accent-border-strong) !important;
}

.floating-block .floating-btn.active {
    background: var(--moon-accent-bg-hover) !important;
    border-color: var(--moon-accent) !important;
    color: var(--moon-accent) !important;
}

.floating-nav .nav-link.active,
.floating-nav a.active {
    background: var(--moon-accent-bg) !important;
    border-color: var(--moon-accent-border-strong) !important;
    color: var(--moon-accent) !important;
}

/* --- Badge rôle, pseudo --- */
.pseudo,
.user-info .user-pseudo {
    color: var(--moon-accent) !important;
}

.role-badge,
.floating-user .role-badge,
.user-info .role-badge {
    background: var(--moon-accent) !important;
    color: #0b0f14 !important;
}

/* --- Badge rôle, pseudo --- */
.settings-tabs {
    border-color: var(--moon-accent-border) !important;
}

.settings-tab.active {
    color: var(--moon-accent) !important;
    background: var(--moon-accent-bg) !important;
}

.settings-tab:hover {
    color: var(--moon-accent) !important;
}

.settings-section h2,
.settings-tab-content h2,
.actions-card h2 {
    color: var(--moon-accent) !important;
}

/* --- Salon (lobby) --- */
.menu-panel {
    background: var(--moon-glass-panel-flat) !important;
    border-color: var(--moon-accent-border) !important;
}

.menu-panel-icon,
.menu-panel-title {
    color: var(--moon-accent) !important;
}

.play-menu-dropdown {
    background: linear-gradient(180deg, rgba(18, 24, 33, 0.55) 0%, rgba(18, 24, 33, 0.92) 100%) !important;
    border-color: var(--moon-accent-border) !important;
}

.play-menu-button {
    background: linear-gradient(180deg, rgba(18, 24, 33, 0.5) 0%, rgba(18, 24, 33, 0.65) 100%) !important;
    border-color: var(--moon-accent-border) !important;
}

.play-menu-button:hover {
    border-color: var(--moon-accent-border-strong) !important;
}

.content-view-title,
.content-view-back-btn {
    color: var(--moon-accent) !important;
}

.content-view-header {
    border-bottom-color: var(--moon-accent-border) !important;
}

.content-view-back-btn {
    background: var(--moon-accent-bg) !important;
    border-color: var(--moon-accent-border) !important;
}

.games-list,
.games-filters,
.game-item,
.games-tab {
    border-color: var(--moon-accent-border) !important;
}

.games-tab.active,
.game-item.active,
.game-item:hover {
    border-color: var(--moon-accent-border-strong) !important;
}

.xp-progress,
.quest-progress {
    background: linear-gradient(
        90deg,
        var(--moon-accent),
        color-mix(in srgb, var(--moon-accent) 60%, #06d6a0)
    ) !important;
}

.rejoin-banner {
    background: linear-gradient(
        135deg,
        var(--moon-accent),
        color-mix(in srgb, var(--moon-accent) 65%, #06d6a0)
    ) !important;
}

.create-game-header-toggle:has(input:checked) {
    border-color: var(--moon-accent-border-strong) !important;
    background: var(--moon-accent-bg) !important;
    color: var(--moon-accent) !important;
}

.create-game-header-toggle {
    border-color: var(--moon-accent-border) !important;
}

.create-game-header-toggle input {
    accent-color: var(--moon-accent) !important;
}

/* --- Taverne --- */
.chat-section,
.stats-panel,
.tavern-side-panel,
.side-panel-content {
    background: var(--moon-glass-panel) !important;
    border-color: var(--moon-accent-border) !important;
}

.chat-header,
.chat-input-container {
    border-color: var(--moon-accent-border) !important;
}

.chat-send-btn,
.tavern-menu-btn:hover,
.tavern-menu-btn.active,
#tavernAdminBtn {
    border-color: var(--moon-accent) !important;
    color: var(--moon-accent) !important;
}

.chat-send-btn,
.tavern-menu-btn.active,
#tavernAdminBtn {
    background: var(--moon-accent-bg) !important;
}

.chat-input:focus {
    border-color: var(--moon-accent) !important;
}

.tavern-view h3,
.stats-panel h3,
.stats-panel h4 {
    color: var(--moon-accent) !important;
}

.tavern-menu-item.active {
    background: var(--moon-accent-bg) !important;
    color: var(--moon-accent) !important;
    border-left-color: var(--moon-accent) !important;
}

/* --- Échoppe & profil (onglets latéraux) --- */
.profile-tab.active {
    color: var(--moon-accent) !important;
    background: var(--moon-accent-bg) !important;
}

body.shop-page .profile-tab.active {
    background: var(--moon-accent) !important;
    color: #0b0f14 !important;
}

body.shop-page .profile-tab.active .tab-time {
    color: rgba(11, 15, 20, 0.75) !important;
}

.notoriety-section-title,
.profile-section h2 {
    color: var(--moon-accent) !important;
    border-bottom-color: var(--moon-accent-border) !important;
}

/* --- Échoppe (legacy shop-tab) --- */
body.shop-page .shop-tab.active,
body.shop-page .shop-subtab.active {
    background: linear-gradient(
        180deg,
        rgba(42, 161, 255, 0.45) 0%,
        rgba(21, 101, 168, 0.55) 100%
    ) !important;
    border-color: var(--moon-accent) !important;
}

body.shop-page .shop-tab-content.active {
    border-color: var(--moon-accent-border) !important;
}

.shop-title,
.shop-subtitle {
    color: var(--moon-accent) !important;
}

body.shop-page .product-card,
body.shop-page .client-product-card,
body.shop-page .rotation-card {
    border-color: var(--moon-accent-border) !important;
}

body.shop-page .shop-empty-state {
    border-color: var(--moon-accent-border) !important;
}

/* --- Profil --- */
.profile-theme-group-title,
.profile-theme-preset-btn:hover,
#current-level-value {
    color: var(--moon-accent) !important;
}

.profile-theme-swatch.selected,
.profile-theme-swatch:hover {
    border-color: var(--moon-accent) !important;
    box-shadow: 0 0 0 2px rgba(42, 161, 255, 0.4) !important;
}

.profile-theme-preset-btn:hover {
    background: var(--moon-accent-bg) !important;
    border-color: var(--moon-accent-border-strong) !important;
}

/* --- Modales & panneaux génériques --- */
.actions-card,
.games-card,
.quests-card,
.progression-card,
.tab-content,
.content-view,
.resources-card,
.side-panel-content,
.community-sidebar {
    border-color: var(--moon-accent-border) !important;
}

.quests-modal-glass h2,
.quests-modal-glass h3 {
    color: var(--moon-accent) !important;
}

/* --- Header principal --- */
.header {
    border-bottom-color: var(--moon-accent-border) !important;
}

/* --- Sidebar communauté (spécificité #id) --- */
#community-sidebar .community-sidebar-btn:hover,
#guest-sidebar .community-sidebar-btn:hover,
#lobby-party-sidebar .community-sidebar-btn:hover {
    background: var(--moon-accent-bg) !important;
    color: var(--moon-accent) !important;
}

#community-sidebar .community-sidebar-btn.active,
#guest-sidebar .community-sidebar-btn.active,
#lobby-party-sidebar .community-sidebar-btn.active {
    background: var(--moon-accent-bg-hover) !important;
    color: var(--moon-accent) !important;
}

#community-sidebar::-webkit-scrollbar-thumb,
#guest-sidebar::-webkit-scrollbar-thumb,
#lobby-party-sidebar::-webkit-scrollbar-thumb {
    background: rgba(42, 161, 255, 0.35) !important;
}

#community-sidebar::-webkit-scrollbar-thumb:hover,
#guest-sidebar::-webkit-scrollbar-thumb:hover,
#lobby-party-sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(42, 161, 255, 0.55) !important;
}

/* --- Taverne (panneaux + rim light) --- */
.stats-panel::before,
.chat-section::before {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.08) 25%,
        rgba(42, 161, 255, 0.2) 50%,
        transparent 70%
    ) !important;
}

.stats-section-title,
.chat-header h2 {
    color: var(--moon-accent) !important;
}

.stats-period-btn.active {
    background: var(--moon-accent) !important;
    border-color: var(--moon-accent) !important;
    color: #0b0f14 !important;
}

.chat-send-btn {
    background: var(--moon-accent-bg) !important;
    border-color: var(--moon-accent) !important;
    color: var(--moon-accent) !important;
}

.chat-send-btn:hover {
    background: var(--moon-accent-bg-hover) !important;
}

.panel-toggle,
.panel-toggle-float {
    border-color: var(--moon-accent-border) !important;
    color: var(--moon-accent) !important;
}

/* --- Nav flottante haute (Jouer, Salle commune) --- */
.floating-nav .floating-btn-primary,
.floating-nav a.floating-btn-primary,
.floating-nav button.floating-btn-primary {
    background: var(--moon-accent-bg) !important;
    border-color: var(--moon-accent-border-strong) !important;
    color: var(--moon-accent) !important;
}

.floating-nav .floating-btn-primary:hover {
    background: var(--moon-accent-bg-hover) !important;
}

.floating-tools .floating-btn.active,
.floating-tools .floating-btn:hover {
    color: var(--moon-accent) !important;
}

/* --- Scrollbar globale (Original + Firefox) --- */
::-webkit-scrollbar-thumb {
    background: rgba(42, 161, 255, 0.55) !important;
    border-color: rgba(11, 15, 20, 0.35) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(42, 161, 255, 0.75) !important;
}

* {
    scrollbar-color: rgba(42, 161, 255, 0.55) rgba(18, 24, 33, 0.25) !important;
}

/* --- Droplistes --- */
select,
#tavernRoomSelector {
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    padding-right: 40px !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232aa1ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}

select:focus {
    box-shadow: 0 0 0 2px rgba(42, 161, 255, 0.2) !important;
}

select:hover {
    border-color: rgba(42, 161, 255, 0.3) !important;
}

select option:hover {
    background: rgba(42, 161, 255, 0.1) !important;
}

select option:checked {
    background: rgba(42, 161, 255, 0.2) !important;
}

/* --- Modale profil (profile-modal.css hardcodé orange) --- */
.profile-modal-close:hover {
    background: rgba(42, 161, 255, 0.2) !important;
    border-color: var(--moon-accent) !important;
    color: var(--moon-accent) !important;
}

.profile-right-tab.active {
    background: rgba(42, 161, 255, 0.16) !important;
    color: var(--moon-accent) !important;
    box-shadow: 0 0 0 1px rgba(42, 161, 255, 0.35) !important;
}

.badge-level {
    background: rgba(42, 161, 255, 0.1) !important;
    color: var(--moon-accent) !important;
    border-color: rgba(42, 161, 255, 0.2) !important;
}

.profile-xp-bar {
    border-color: rgba(42, 161, 255, 0.1) !important;
    box-shadow: 0 2px 8px rgba(42, 161, 255, 0.04) !important;
}

.profile-xp-progress {
    background: rgba(42, 161, 255, 0.25) !important;
}

.profile-xp-text,
.profile-registered i {
    color: var(--moon-accent) !important;
}

/* --- Sidebar communauté (contour orange hardcodé) --- */
#community-sidebar,
.community-submenu#community-sidebar,
#guest-sidebar,
.community-submenu#guest-sidebar,
#lobby-party-sidebar,
.community-submenu#lobby-party-sidebar {
    border-color: var(--moon-accent-border) !important;
}

#community-sidebar::before,
.community-submenu#community-sidebar::before,
#guest-sidebar::before,
.community-submenu#guest-sidebar::before,
#lobby-party-sidebar::before,
.community-submenu#lobby-party-sidebar::before {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.1) 25%,
        rgba(42, 161, 255, 0.22) 50%,
        transparent 70%
    ) !important;
}

#community-sidebar .community-sidebar-btn,
#guest-sidebar .community-sidebar-btn,
#lobby-party-sidebar .community-sidebar-btn {
    border-color: var(--moon-accent-border) !important;
}

/* --- Échoppe : boutons d'achat --- */
.btn-purchase {
    background: var(--moon-accent-bg) !important;
    border: 1px solid var(--moon-accent-border-strong) !important;
    color: var(--text-primary, #e8eef4) !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

.btn-purchase:hover:not(:disabled) {
    background: var(--moon-accent-bg-hover) !important;
    border-color: var(--moon-accent) !important;
}

.btn-wardrobe-preview,
.btn-view-pack {
    border-color: var(--moon-accent-border) !important;
}

body.shop-page .product-card,
body.shop-page .client-product-card,
body.shop-page .rotation-card,
.shop-pack-modal-content {
    border-color: var(--moon-accent-border) !important;
}

/* --- Bourgades --- */
.bourgade-tabs,
.bourgade-section,
.village-card,
.villages-list-item {
    border-color: var(--moon-accent-border) !important;
}

.bourgade-tab.active,
.members-subtab.active {
    color: var(--moon-accent) !important;
    background: var(--moon-accent-bg) !important;
}

.member-card:hover {
    border-color: var(--moon-accent) !important;
    box-shadow: 0 4px 12px rgba(42, 161, 255, 0.2) !important;
}

.member-bourgade-role.role-maire {
    color: var(--moon-accent) !important;
    background: rgba(42, 161, 255, 0.12) !important;
    border-color: rgba(42, 161, 255, 0.25) !important;
}

/* --- Rôles --- */
.roles-tabs {
    border-color: var(--moon-accent-border) !important;
}

.roles-tab.active {
    color: var(--moon-accent) !important;
    background: var(--moon-accent-bg) !important;
}

.role-card:hover {
    border-color: var(--moon-accent-border-strong) !important;
}

.role-card-name-overlay {
    color: var(--moon-accent) !important;
}

.role-name,
.roles-page-title {
    color: var(--moon-accent) !important;
}

.role-action-badge {
    background: var(--moon-accent-bg) !important;
    border-color: var(--moon-accent-border) !important;
    color: var(--moon-accent) !important;
}

.role-modal-tab.active {
    color: var(--moon-accent) !important;
    border-bottom-color: var(--moon-accent) !important;
}

/* --- Compagnons --- */
.friends-sidebar,
.chat-main,
.actions-sidebar {
    border-color: var(--moon-accent-border) !important;
}

.friends-sidebar::before,
.chat-main::before,
.actions-sidebar::before {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.08) 25%,
        rgba(42, 161, 255, 0.2) 50%,
        transparent 70%
    ) !important;
}

.friends-header h2,
.search-wrapper i,
.chat-header-name {
    color: var(--moon-accent) !important;
}

.friends-tab.active {
    background: var(--moon-accent) !important;
    border-color: var(--moon-accent) !important;
    color: #0b0f14 !important;
}

.friend-card.selected {
    background: var(--moon-accent-bg) !important;
    border-color: var(--moon-accent-border-strong) !important;
}

.message.own {
    background: rgba(42, 161, 255, 0.2) !important;
    color: var(--moon-accent) !important;
}

.chat-input:focus {
    border-color: var(--moon-accent) !important;
    box-shadow: 0 0 0 2px rgba(42, 161, 255, 0.2) !important;
}

.chat-send-btn {
    background: var(--moon-accent) !important;
    color: #0b0f14 !important;
}

.chat-send-btn:hover {
    background: color-mix(in srgb, var(--moon-accent) 85%, #fff) !important;
}