/* ════════════════════════════════════════════════════════ BANIAN GROUP — THÈME CLAIR / SOMBRE Appliqué via data-theme="dark" sur ════════════════════════════════════════════════════════ */ /* ── Variables ─────────────────────────────────────── */ :root { --bg: #ffffff; --bg-alt: #f1f1f1; --bg-card: #ffffff; --bg-input: #f8f8f8; --txt: #757575; --head: #222222; --border: rgba(0,0,0,0.10); --shadow: rgba(0,0,0,0.07); --hdr: #ffffff; --hdr-top: #222222; --ftr: #222222; --ftr-txt: #999999; --mob-bg: #202020; --tm: 0.38s; --tm-ease: ease; } [data-theme="dark"] { --bg: #0b0b18; --bg-alt: #0e0e1d; --bg-card: #12122a; --bg-input: #1a1a34; --txt: #8888aa; --head: #dde0f2; --border: rgba(255,255,255,0.07); --shadow: rgba(0,0,0,0.45); --hdr: #0d0d20; --hdr-top: #070710; --ftr: #06060e; --ftr-txt: rgba(255,255,255,0.45); --mob-bg: #0d0d22; --tm: 0.38s; --tm-ease: ease; } /* ── Transitions fluides ──────────────────────────── */ body, .main-header .header-upper, .header-top-one, .welcome-section, .banian-videos-section, .services-section, .events-section, .services-section-two, .team-section, .news-section, .contact-info-section, .facts-section, .gallery-section, .sidebar .widget, .sidebar-widget, .featured-block .inner-box, .featured-block-two .inner-box, .event-block .inner-box, .news-block .inner-box, .team-block .lower-box, .info-box .inner, .menu-box, .search-popup, h1, h2, h3, h4, h5, h6, input, textarea, select, a, .text, p { transition: background-color var(--tm) var(--tm-ease), color var(--tm) var(--tm-ease), border-color var(--tm) var(--tm-ease), box-shadow var(--tm) var(--tm-ease) !important; } /* ── BODY ───────────────────────────────────────── */ body { background-color: var(--bg) !important; color: var(--txt) !important; } /* ── HEADINGS ────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { color: var(--head); } /* Headings qui doivent rester blancs (sections sombres) */ .about-section h1, .about-section h2, .about-section h3, .about-section h4, .about-section h5, .about-section h6, .services-section-two h2, .services-section-two h3, .services-section-two h4, .services-section-two ul li a, .banner-section h1, .sec-title.light h2, .org-section h1, .org-section h2, .org-section h3, .org-section h4, .org-section h5, .org-section h6, .about-section .text, .footer-widget h4, .contact-info-section .sec-title h2 { color: inherit !important; } /* ── HEADER ──────────────────────────────────────── */ .main-header .header-upper { background-color: var(--hdr) !important; box-shadow: 0 2px 20px var(--shadow) !important; } .header-top-one { background-color: var(--hdr-top) !important; } [data-theme="dark"] .navigation > li > a { color: var(--head); } [data-theme="dark"] .navigation > li > a:hover, [data-theme="dark"] .navigation > li.current > a { color: #f47920 !important; } [data-theme="dark"] .navigation .dropdown ul { background-color: var(--bg-card) !important; border-top-color: #f47920 !important; box-shadow: 0 12px 35px var(--shadow) !important; } [data-theme="dark"] .navigation .dropdown ul li a { color: var(--txt) !important; border-bottom: 1px solid var(--border) !important; } [data-theme="dark"] .navigation .dropdown ul li a:hover { color: #f47920 !important; background-color: rgba(244,121,32,0.06) !important; } [data-theme="dark"] .search-btn-one button, [data-theme="dark"] .search-btn-one .txt { color: var(--head) !important; } [data-theme="dark"] .other-links .language .lang-btn { color: var(--head) !important; } [data-theme="dark"] .other-links .language .lang-dropdown { background: var(--bg-card) !important; } [data-theme="dark"] .other-links .language .lang-dropdown a { color: var(--head) !important; } /* ── SECTIONS CLAIRES ────────────────────────────── */ .welcome-section, .banian-videos-section, .services-section, .team-section { background-color: var(--bg-alt) !important; } .events-section, .news-section, .contact-info-section { background-color: var(--bg) !important; } [data-theme="dark"] .facts-section { background-color: var(--bg-alt) !important; } [data-theme="dark"] .testimonials-section .carousel-box { background-color: var(--bg-card) !important; } [data-theme="dark"] .testimonials-section .slide-item .inner { color: var(--txt); } [data-theme="dark"] .testimonials-section .slide-item .name { color: var(--head) !important; } [data-theme="dark"] .testimonials-section .slide-item .designation { color: var(--txt) !important; } /* ── CARTES FILIALES ─────────────────────────────── */ .featured-block .inner-box { background-color: var(--bg-card) !important; box-shadow: 0 5px 25px var(--shadow) !important; } [data-theme="dark"] .featured-block .inner-box { border: 1px solid var(--border) !important; } [data-theme="dark"] .featured-block .content-box { border-bottom: 1px solid var(--border) !important; } [data-theme="dark"] .featured-block .content-box .content h4 a, [data-theme="dark"] .featured-block .content-box .content h4 { color: var(--head) !important; } [data-theme="dark"] .featured-block .content-box .content .subtitle { color: var(--txt) !important; } [data-theme="dark"] .featured-block .hover-box { background: rgba(10,10,30,0.92) !important; } [data-theme="dark"] .featured-block .hover-box h4 a { color: #fff !important; } /* ── SERVICES FEATURE BLOCKS ──────────────────────── */ .featured-block-two .inner-box { background-color: var(--bg-card) !important; box-shadow: 0 5px 25px var(--shadow) !important; } [data-theme="dark"] .featured-block-two .inner-box { border: 1px solid var(--border) !important; } [data-theme="dark"] .featured-block-two .inner-box .content h4 a, [data-theme="dark"] .featured-block-two .inner-box .content h4 { color: var(--head) !important; } [data-theme="dark"] .featured-block-two .inner-box .content .text { color: var(--txt) !important; } /* ── EVENTS ──────────────────────────────────────── */ .event-block .inner-box { background-color: var(--bg-card) !important; box-shadow: 0 3px 20px var(--shadow) !important; } [data-theme="dark"] .event-block .inner-box { border: 1px solid var(--border) !important; } [data-theme="dark"] .event-block .inner-box .content h3 a { color: var(--head) !important; } [data-theme="dark"] .event-block .inner-box .content .cat-info a { color: var(--txt) !important; } [data-theme="dark"] .event-block .inner-box .content .location { color: var(--txt) !important; } [data-theme="dark"] .event-block .inner-box .content-box { border-bottom: 1px solid var(--border) !important; } /* ── NEWS BLOCKS ──────────────────────────────────── */ .news-block .inner-box { background-color: var(--bg-card) !important; box-shadow: 0 3px 20px var(--shadow) !important; } [data-theme="dark"] .news-block .inner-box { border: 1px solid var(--border) !important; } [data-theme="dark"] .news-block .lower-box .upper-info h4 a, [data-theme="dark"] .news-block .lower-box .upper-info h4 { color: var(--head) !important; } [data-theme="dark"] .news-block .lower-box .meta-info { border-top: 1px solid var(--border) !important; } [data-theme="dark"] .news-block .lower-box .author-title, [data-theme="dark"] .news-block .lower-box .date { color: var(--txt) !important; } /* ── TEAM ────────────────────────────────────────── */ .team-block .lower-box { background-color: var(--bg-card) !important; border-top: 1px solid var(--border) !important; } [data-theme="dark"] .team-block .lower-box .designation { color: var(--txt) !important; } [data-theme="dark"] .team-block .lower-box .name { color: var(--head) !important; } /* ── INFOS CONTACT ───────────────────────────────── */ [data-theme="dark"] .info-box .inner { background-color: var(--bg-card) !important; border: 1px solid var(--border) !important; } [data-theme="dark"] .info-box .inner strong { color: #fff !important; } [data-theme="dark"] .info-box .inner .info, [data-theme="dark"] .info-box .inner .info a { color: var(--txt) !important; } /* ── FACTS ───────────────────────────────────────── */ [data-theme="dark"] .facts-section h4.fact-title { color: var(--head) !important; } [data-theme="dark"] .facts-section .text { color: var(--txt) !important; } /* ── FORMULAIRES ──────────────────────────────────── */ [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--bg-input) !important; color: var(--head) !important; border-color: var(--border) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: rgba(255,255,255,0.25) !important; } [data-theme="dark"] .form-group { border-color: var(--border) !important; } /* ── SIDEBAR ─────────────────────────────────────── */ [data-theme="dark"] .sidebar .widget, [data-theme="dark"] .sidebar-widget, [data-theme="dark"] .widget-content { background-color: var(--bg-card) !important; border-color: var(--border) !important; } [data-theme="dark"] .widget-title h4, [data-theme="dark"] .sidebar-title h4 { color: var(--head) !important; } [data-theme="dark"] .sidebar .links li a { color: var(--txt) !important; } [data-theme="dark"] .sidebar .links li a:hover { color: #f47920 !important; } [data-theme="dark"] .image-box.newsletter { border-color: var(--border) !important; } /* ── MENU MOBILE ──────────────────────────────────── */ [data-theme="dark"] .menu-box, [data-theme="dark"] .mobile-menu { background-color: var(--mob-bg) !important; } [data-theme="dark"] .mobile-menu .navigation li a { color: var(--head) !important; } [data-theme="dark"] .mobile-menu .navigation li a:hover { color: #f47920 !important; } [data-theme="dark"] .mobile-menu .navigation li { border-bottom: 1px solid var(--border) !important; } [data-theme="dark"] .nav-logo + div { border-top: 1px solid var(--border) !important; } /* ── RECHERCHE ───────────────────────────────────── */ [data-theme="dark"] #search-popup, [data-theme="dark"] .search-popup { background: rgba(7,7,16,0.97) !important; } [data-theme="dark"] #search-popup .overlay-layer { background: rgba(7,7,16,0.5) !important; } [data-theme="dark"] #search-input { background: var(--bg-input) !important; color: var(--head) !important; border-color: var(--border) !important; } [data-theme="dark"] .search-popup h3 { color: var(--head) !important; } [data-theme="dark"] .recent-searches li a { color: var(--txt) !important; } /* ── FOOTER ──────────────────────────────────────── */ .main-footer { background-color: var(--ftr) !important; } [data-theme="dark"] .main-footer .footer-widget h4 { color: #fff !important; } [data-theme="dark"] .main-footer .text { color: var(--ftr-txt) !important; } [data-theme="dark"] .main-footer .links-widget .links li a { color: var(--ftr-txt) !important; } [data-theme="dark"] .main-footer .links-widget .links li a:hover { color: #f47920 !important; } [data-theme="dark"] .main-footer .num-links li a { color: var(--ftr-txt) !important; } [data-theme="dark"] .main-footer .num-links li a:hover { color: #f47920 !important; } [data-theme="dark"] .footer-bottom { background-color: rgba(0,0,0,0.4) !important; } [data-theme="dark"] .footer-bottom .copyright { color: var(--ftr-txt) !important; } [data-theme="dark"] .footer-bottom .copyright a { color: #fff !important; } [data-theme="dark"] .widgets-section { border-bottom: 1px solid rgba(255,255,255,0.07) !important; } /* ── PAGE TITLE (autres pages) ───────────────────── */ [data-theme="dark"] .page-title { background-color: #080810 !important; } /* ── SCROLL TO TOP ───────────────────────────────── */ [data-theme="dark"] .scroll-to-top { background: var(--bg-card) !important; border: 1px solid var(--border) !important; } [data-theme="dark"] .scroll-to-top span { color: #f47920 !important; } /* ── SECTION ABOUT (page about.html) ─────────────── */ [data-theme="dark"] .highlights-section-two, [data-theme="dark"] .about-tab-section, [data-theme="dark"] .ambitions-section { background-color: var(--bg-alt) !important; } /* ── BLOG / ARTICLES ──────────────────────────────── */ [data-theme="dark"] .blog-section, [data-theme="dark"] .blog-content { background-color: var(--bg) !important; } [data-theme="dark"] .blog-post { background-color: var(--bg-card) !important; border: 1px solid var(--border) !important; } [data-theme="dark"] .blog-post .post-title a { color: var(--head) !important; } [data-theme="dark"] .blog-post .post-content { color: var(--txt) !important; } [data-theme="dark"] .post-meta { color: var(--txt) !important; border-bottom: 1px solid var(--border) !important; } [data-theme="dark"] .post-meta a { color: var(--txt) !important; } /* ── CONTACT PAGE ────────────────────────────────── */ [data-theme="dark"] .contact-form-section { background-color: var(--bg) !important; } [data-theme="dark"] .contact-info-widget { background-color: var(--bg-card) !important; border: 1px solid var(--border) !important; } /* ── DEPARTMENTS / FILIALES PAGES ────────────────── */ [data-theme="dark"] .departments-section, [data-theme="dark"] .department-block .inner-box { background-color: var(--bg-card) !important; } [data-theme="dark"] .department-block .inner-box { border: 1px solid var(--border) !important; } /* ── COMING SOON ──────────────────────────────────── */ [data-theme="dark"] .comming-soon { background-color: var(--bg) !important; } /* ── SCROLLBAR ───────────────────────────────────── */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; background: #0b0b18; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #252550; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #f47920; } /* ══════════════════════════════════════════════════ BOUTON TOGGLE THÈME ══════════════════════════════════════════════════ */ .bn-theme-wrapper { display: inline-flex; align-items: center; float: right; margin-left: 24px; padding: 0; height: 100%; } .bn-theme-btn { position: relative; display: inline-flex; align-items: center; gap: 9px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); cursor: pointer; padding: 5px 12px 5px 7px; border-radius: 50px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.9); white-space: nowrap; font-family: 'Poppins', sans-serif; letter-spacing: 0.04em; transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease; overflow: hidden; } .bn-theme-btn:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); transform: scale(1.04); } .bn-theme-btn:focus { outline: 2px solid #f47920; outline-offset: 3px; } .bn-theme-btn:active { transform: scale(0.97); } /* Track coulissant */ .bn-theme-track { position: relative; width: 40px; height: 22px; border-radius: 11px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.25); flex-shrink: 0; transition: background 0.38s ease, border-color 0.38s ease; } [data-theme="dark"] .bn-theme-track { background: rgba(244,121,32,0.28); border-color: rgba(244,121,32,0.45); } /* Thumb */ .bn-theme-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; transition: transform 0.38s cubic-bezier(0.34,1.45,0.64,1), background 0.38s ease; box-shadow: 0 1px 6px rgba(0,0,0,0.3); will-change: transform; } [data-theme="dark"] .bn-theme-thumb { transform: translateX(18px); background: #f47920; } /* Label */ .bn-theme-label { font-size: 11px; color: rgba(255,255,255,0.85); pointer-events: none; letter-spacing: 0.05em; transition: color 0.3s ease; } /* Mobile : bouton dans le menu burger */ .bn-theme-btn-mobile { margin: 18px auto 10px; width: fit-content; display: none; } .bn-theme-btn-mobile .bn-theme-btn { background: rgba(244,121,32,0.15); border-color: rgba(244,121,32,0.35); color: #fff; padding: 7px 18px 7px 10px; font-size: 13px; } .bn-theme-btn-mobile .bn-theme-label { font-size: 12px; } @media (max-width: 991px) { .bn-theme-wrapper { display: none !important; } .bn-theme-btn-mobile { display: block !important; } } /* ── Logo navbar ─────────────────────────────────── */ /* inner-container flex — vertical centering uniquement */ .header-style-one .header-upper .inner-container { display: flex !important; align-items: center !important; padding: 0 40px !important; } /* Logo-box : padding 0, display flex interne pour logo + Explore */ .main-header .header-upper .logo-box { float: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; flex-shrink: 0; } .main-header .header-upper .logo-box .logo { float: none !important; display: flex !important; align-items: center; } .main-header .header-upper .logo-box .logo img { max-height: 160px !important; height: 160px !important; width: auto !important; display: block !important; } /* Bouton Explore aligné verticalement */ .main-header .search-btn-one { float: none !important; margin-top: 0 !important; display: flex !important; align-items: center; } /* Nav-outer : flex item qui prend l'espace restant NE PAS mettre display:flex ici — ça casse les dropdowns */ .header-style-one .header-upper .nav-outer { float: none !important; flex: 1 1 auto; text-align: center; } /* Sticky header logo */ .fixed-header .sticky-header .logo img { max-height: 70px !important; height: 70px !important; width: auto !important; } /* Responsive mobile */ @media (max-width: 991px) { .header-style-one .header-upper .inner-container { padding: 0 15px !important; justify-content: space-between; } .main-header .header-upper .logo-box .logo img { max-height: 90px !important; height: 90px !important; } .header-style-one .header-upper .nav-outer { flex: 0 0 auto; } }