/* ============================================================
   MODE SOMBRE — ABHSM Template
   ============================================================ */
/* ── 1. BOUTON TOGGLE ─────────────────────────────────────── */
#dark-toggle {
  background: transparent;
  border: 1px solid #2f375394;
  border-radius: 20px;
  color: #fff;
  font-size: 14px;
  padding: 0px 8px;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 10px;
  transition: background .3s;
}



#dark-toggle:hover {
  background: rgba(255,255,255,.15);
}

body.dark-mode #dark-toggle {
  border-color: rgba(255,255,255,.2);
}

/* ── 2. VARIABLES COULEURS MODE SOMBRE ───────────────────── */
body.dark-mode {
  --dm-bg:        #0f1117;
  --dm-bg2:       #161b27;
  --dm-bg3:       #1e2435;
  --dm-border:    #2a3148;
  --dm-text:      #d0d6e8;
  --dm-text-muted:#8892aa;
  --dm-heading:   #e8ecf7;
  --dm-white:     #1e2435;
  --dm-primary:   #1b519d;
}

/* ── 3. BASE ──────────────────────────────────────────────── */
body.dark-mode {
  background: var(--dm-bg) !important;
  color: var(--dm-text) !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: var(--dm-heading) !important;
}

body.dark-mode p,
body.dark-mode li,
body.dark-mode span:not(.icon):not([class*="fa"]):not([class*="flaticon"]) {
  color: var(--dm-text);
}

body.dark-mode a {
  color: #7aadff;
}
body.dark-mode a:hover {
  color: #a8c8ff;
}

/* ── 4. HEADER ────────────────────────────────────────────── */
body.dark-mode .main-header,
body.dark-mode .header-top,
body.dark-mode .outer-container,
body.dark-mode .sticky-header {
  background: var(--dm-bg2) !important;
  border-bottom: 1px solid var(--dm-border);
}

body.dark-mode .header-top {
  background: #0d1220 !important;
}

body.dark-mode .main-header .info-box .box h3,
body.dark-mode .main-header .info-box .box h3 a,
body.dark-mode .header-top ul li,
body.dark-mode .header-top ul li a {
  color: var(--dm-text) !important;
}

/* ── 5. NAVIGATION ────────────────────────────────────────── */
body.dark-mode .main-menu .navigation > li > a,
body.dark-mode .main-menu .navigation li a {
  color: var(--dm-text) !important;
}

body.dark-mode .main-menu .navigation > li:hover > a,
body.dark-mode .main-menu .navigation > li.current > a {
  color: #7aadff !important;
}

body.dark-mode .main-menu .navigation li ul,
body.dark-mode .main-menu .navigation li .mega-menu {
  background: var(--dm-bg2) !important;
  border: 1px solid var(--dm-border) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.5) !important;
}

body.dark-mode .main-menu .navigation li ul li a {
  color: var(--dm-text) !important;
  border-bottom: 1px solid var(--dm-border) !important;
}
body.dark-mode .main-menu .navigation li ul li a:hover {
  background: var(--dm-bg3) !important;
  color: #7aadff !important;
}

/* ── 6. SECTIONS / FONDS ──────────────────────────────────── */
body.dark-mode section,
body.dark-mode .service-block-two .inner-box,
body.dark-mode .news-block .inner-box,
body.dark-mode .feature-block .inner-box {
  background: var(--dm-bg) !important;
}

body.dark-mode .gray-bg,
body.dark-mode .light-bg,
body.dark-mode [class*="-section"]:not([class*="blue"]):not([class*="dark"]) {
  /* background: var(--dm-bg2) !important; */
}

/* ── 7. CARTES / BLOCKS ───────────────────────────────────── */
body.dark-mode .service-block-two .inner-box,
body.dark-mode .news-block .inner-box,
body.dark-mode .team-block .inner-box,
body.dark-mode .project-block .inner-box,
body.dark-mode .work-block .inner-box,
body.dark-mode .feature-block .inner-box,
body.dark-mode .lower-content {
  background: var(--dm-bg2) !important;
  border: 1px solid var(--dm-border) !important;
}

body.dark-mode .service-block-two .inner-box h3 a,
body.dark-mode .news-block .inner-box h3 a,
body.dark-mode .team-block .inner-box h3 a {
  color: var(--dm-heading) !important;
}

/* ── 8. SIDEBAR / WIDGETS ─────────────────────────────────── */
body.dark-mode .sidebar-widget,
body.dark-mode .sidebar .widget,
body.dark-mode .side-bar .widget {
  background: var(--dm-bg2) !important;
  border: 1px solid var(--dm-border) !important;
}

body.dark-mode .sidebar-widget h4,
body.dark-mode .sidebar .widget h4 {
  color: var(--dm-heading) !important;
}

/* ── 9. FORMULAIRES ───────────────────────────────────────── */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="password"],
body.dark-mode input[type="search"],
body.dark-mode select,
body.dark-mode textarea {
  background: var(--dm-bg3) !important;
  border: 1px solid var(--dm-border) !important;
  color: var(--dm-text) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .search-panel .form-group input {
  background: var(--dm-bg3) !important;
  color: var(--dm-text) !important;
}

/* ── 10. TABLEAUX ─────────────────────────────────────────── */
body.dark-mode table,
body.dark-mode .table {
  background: var(--dm-bg2) !important;
  color: var(--dm-text) !important;
}

body.dark-mode .table thead th,
body.dark-mode table thead th {
  background: var(--dm-bg3) !important;
  color: var(--dm-heading) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .table td,
body.dark-mode .table th,
body.dark-mode table td,
body.dark-mode table th {
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
  background: var(--dm-bg3) !important;
}

/* ── 11. FOOTER ───────────────────────────────────────────── */
body.dark-mode .main-footer {
  background: #080d18 !important;
}

body.dark-mode .footer-bottom {
  background: #060a14 !important;
  border-top: 1px solid var(--dm-border) !important;
}

body.dark-mode .main-footer h4,
body.dark-mode .main-footer h5,
body.dark-mode .footer-bottom p {
  color: var(--dm-text) !important;
}

/* ── 12. BREADCRUMB / PAGE TITLE ──────────────────────────── */
body.dark-mode .page-title {
  background-color: #0d1220 !important;
}

body.dark-mode .page-breadcrumb li,
body.dark-mode .page-breadcrumb li a {
  color: var(--dm-text-muted) !important;
}

/* ── 13. BOUTONS ──────────────────────────────────────────── */
body.dark-mode .theme-btn {
  background: var(--dm-primary) !important;
  color: #fff !important;
}

body.dark-mode .btn-style-one,
body.dark-mode .btn-style-two {
  background: var(--dm-primary) !important;
  color: #fff !important;
  border-color: var(--dm-primary) !important;
}

/* ── 14. DROPDOWN / SEARCH ────────────────────────────────── */
body.dark-mode .main-header .search-box-outer .dropdown-menu {
  background: var(--dm-bg2) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .main-header .search-box-btn {
  background: var(--dm-bg3) !important;
  color: var(--dm-text) !important;
  border: 1px solid var(--dm-border) !important;
}

/* ── 15. MOBILE NAV ───────────────────────────────────────── */
body.dark-mode .mobile-menu,
body.dark-mode .mobile-menu .menu-box {
  background: var(--dm-bg2) !important;
}

body.dark-mode .mobile-menu .navigation li a {
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

/* ── 16. SCROLL TOP ───────────────────────────────────────── */
body.dark-mode .scroll-top {
  background: var(--dm-primary) !important;
}

/* ── 17. PRELOADER ────────────────────────────────────────── */
body.dark-mode .preloader {
  background: var(--dm-bg) !important;
}

/* ── 18. TRANSITION DOUCE ─────────────────────────────────── */
body,
body * {
  transition: background-color .25s ease, color .2s ease, border-color .2s ease;
}



/* ── E-SERVICE SECTION ────────────────────────────────────── */
body.dark-mode .feature-section {
  background: var(--dm-bg2) !important;
}

body.dark-mode .feature-section .sec-title h1 {
  color: var(--dm-heading) !important;
}

body.dark-mode .feature-block-one {
  background: var(--dm-bg3) !important;
  border: 1px solid var(--dm-border) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.3) !important;
}

body.dark-mode .feature-block-one:hover {
  background: #1e2d4a !important;
  border-color: #3a5080 !important;
}

body.dark-mode .feature-block-one .icon-box {
  background: rgba(27, 81, 157, 0.25) !important;
  border-color: rgba(27, 81, 157, 0.4) !important;
}

body.dark-mode .feature-block-one .icon-box i {
  color: #7aadff !important;
}

body.dark-mode .feature-block-one h3 a {
  color: var(--dm-heading) !important;
}

body.dark-mode .feature-block-one h3 a:hover {
  color: #7aadff !important;
}




/* ── ABHSM TABS SECTION ───────────────────────────────────── */
body.dark-mode .abhsm-tabs {
  background: var(--dm-bg) !important;
}

body.dark-mode .abhsm-tabs .sec-title h1 {
  color: var(--dm-heading) !important;
}

/* Barre des onglets */
body.dark-mode .abhsm-tabs__bar {
  background: var(--dm-bg2) !important;
  border: 1px solid var(--dm-border) !important;
}

body.dark-mode .abhsm-tab {
  color: var(--dm-text-muted) !important;
  background: transparent !important;
}

body.dark-mode .abhsm-tab:hover {
  color: var(--dm-text) !important;
  background: var(--dm-bg3) !important;
}

body.dark-mode .abhsm-tab.is-active {
  color: #fff !important;
  background: var(--dm-primary) !important;
}

body.dark-mode .abhsm-tab__dot {
  background: currentColor !important;
}

/* Panel */
body.dark-mode .abhsm-panels {
  background: var(--dm-bg2) !important;
  border: 1px solid var(--dm-border) !important;
}

/* Cartes */
body.dark-mode .abhsm-card {
  background: var(--dm-bg3) !important;
  border: 1px solid var(--dm-border) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.3) !important;
}

body.dark-mode .abhsm-card.card-blue,
body.dark-mode .abhsm-card.card-mint,
body.dark-mode .abhsm-card.card-yellow {
  background: var(--dm-bg3) !important;
}

body.dark-mode .abhsm-card__meta {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .abhsm-card__title {
  color: var(--dm-heading) !important;
}

body.dark-mode .abhsm-card__text {
  color: var(--dm-text) !important;
}

body.dark-mode .abhsm-card__link {
  color: #7aadff !important;
}

body.dark-mode .abhsm-card__link:hover {
  color: #a8c8ff !important;
}

/* Bordure colorée du haut des cartes (si elle existe) */
body.dark-mode .abhsm-card.card-blue  { border-top: 3px solid #1b519d !important; }
body.dark-mode .abhsm-card.card-mint  { border-top: 3px solid #1a9e7a !important; }
body.dark-mode .abhsm-card.card-yellow{ border-top: 3px solid #e6a817 !important; }


/* ── BARRAGES / TABLEAU DE BORD SECTION ──────────────────── */
body.dark-mode .abhsm-barrages-section {
  background: var(--dm-bg) !important;
}

body.dark-mode .abhsm-barrages-section .sec-title h1 {
  color: var(--dm-heading) !important;
}

/* Panel principal */
body.dark-mode .abhsm-panel,
body.dark-mode .abhsm-panel--chart,
body.dark-mode .abhsm-panel--info {
  background: var(--dm-bg2) !important;
  border: 1px solid var(--dm-border) !important;
}

/* Ticker */
body.dark-mode .abhsm-ticker {
  background: var(--dm-bg3) !important;
  border: 1px solid var(--dm-border) !important;
}

body.dark-mode .abhsm-ticker__badge {
  background: var(--dm-primary) !important;
  color: #fff !important;
}

body.dark-mode .abhsm-ticker__track {
  color: var(--dm-text) !important;
}

/* Chart header */
body.dark-mode .abhsm-chart-head {
  border-bottom: 1px solid var(--dm-border) !important;
}

body.dark-mode .abhsm-chart-title h3,
body.dark-mode .abhsm-chart-title h3 span {
  color: var(--dm-heading) !important;
}

body.dark-mode .abhsm-pill {
  background: var(--dm-bg3) !important;
  border: 1px solid var(--dm-border) !important;
  color: var(--dm-text) !important;
}

body.dark-mode .abhsm-pill strong {
  color: var(--dm-heading) !important;
}

/* Legend */
body.dark-mode .abhsm-legend__item {
  color: var(--dm-text) !important;
}

/* Tableau details */
body.dark-mode .abhsm-details summary {
  background: var(--dm-bg3) !important;
  color: var(--dm-text) !important;
  border: 1px solid var(--dm-border) !important;
}

body.dark-mode .abhsm-table-wrap {
  background: var(--dm-bg2) !important;
}

body.dark-mode .abhsm-table {
  background: var(--dm-bg2) !important;
  color: var(--dm-text) !important;
}

body.dark-mode .abhsm-table thead tr {
  background: var(--dm-bg3) !important;
}

body.dark-mode .abhsm-table th {
  color: var(--dm-heading) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .abhsm-table td {
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
}

body.dark-mode .abhsm-table tbody tr:nth-child(odd) {
  background: var(--dm-bg3) !important;
}

body.dark-mode .abhsm-table tfoot tr {
  background: var(--dm-bg3) !important;
}

body.dark-mode .abhsm-table tfoot td {
  color: var(--dm-heading) !important;
}

/* Évolution tabs */
body.dark-mode .abhsm-evo {
  background: var(--dm-bg2) !important;
  border: 1px solid var(--dm-border) !important;
}

body.dark-mode .abhsm-evo__tab {
  background: transparent !important;
  color: var(--dm-text-muted) !important;
  border: 1px solid var(--dm-border) !important;
}

body.dark-mode .abhsm-evo__tab.is-active {
  background: var(--dm-primary) !important;
  color: #fff !important;
  border-color: var(--dm-primary) !important;
}

/* S'informer — panel droit */
body.dark-mode .abhsm-info-title {
  color: var(--dm-heading) !important;
}

body.dark-mode .abhsm-tile {
  background: var(--dm-bg3) !important;
  border: 1px solid var(--dm-border) !important;
  color: var(--dm-text) !important;
}

body.dark-mode .abhsm-tile:hover {
  background: #1e2d4a !important;
  border-color: #3a5080 !important;
}

body.dark-mode .abhsm-tile__ico {
  background: rgba(27,81,157,.2) !important;
  color: #7aadff !important;
}

body.dark-mode .abhsm-tile__ico svg {
  stroke: #7aadff !important;
}

body.dark-mode .abhsm-tile__text {
  color: var(--dm-text) !important;
}

/* Bento */
body.dark-mode .abhsm-bento {
  background: transparent !important;
}

body.dark-mode .bento-card {
  background: var(--dm-bg2) !important;
  border: 1px solid var(--dm-border) !important;
}

body.dark-mode .bento-card:hover {
  background: var(--dm-bg3) !important;
  border-color: #3a5080 !important;
}

body.dark-mode .bento-title {
  color: var(--dm-heading) !important;
}

body.dark-mode .bento-sub {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .bento-kpi {
  color: var(--dm-heading) !important;
}

body.dark-mode .bento-kpi span {
  color: #7aadff !important;
}

body.dark-mode .bento-kpi--ok span {
  color: #4caf7d !important;
}

body.dark-mode .bento-chip {
  background: var(--dm-primary) !important;
  color: #fff !important;
}

body.dark-mode .bento-ico svg {
  stroke: #7aadff !important;
}

body.dark-mode .page-title:before {
  display: none !important;
}



/* ── PAGE TITLE ───────────────────────────────────────────── */
body.dark-mode .page-title {
  background-image: none !important;
  background-color: var(--dm-bg2) !important;
  border-bottom: 1px solid var(--dm-border) !important;
}

body.dark-mode .page-title h1 {
  color: var(--dm-heading) !important;
}

body.dark-mode .page-title .sub_title li a {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .page-title .sub_title li {
  color: var(--dm-text-muted) !important;
}

body.dark-mode .page-title .sub_title .linkhead {
  color: #7aadff !important;
}


/* ── SIDEBAR CATEGORIES ───────────────────────────────────── */
body.dark-mode .shop-sidebar .sidebar-widget,
body.dark-mode .shop-sidebar .sidebar-categories {
  background: var(--dm-bg2) !important;
  border: 1px solid var(--dm-border) !important;
}

body.dark-mode .categories-list li {
  border-bottom: 1px solid var(--dm-border) !important;
}

body.dark-mode .categories-list li a {
  color: var(--dm-text) !important;
}

body.dark-mode .categories-list li a:hover {
  color: #7aadff !important;
}

/* Lien actif (inline style color: #007bff) — on le surcharge */
body.dark-mode .categories-list li a[style*="color"] {
  color: #7aadff !important;
}