/**
 * FMK Dark Mode — Domino Magazine (pimedia.africa)
 *
 * Cible UNIQUEMENT :
 *   .featured_area  (slider + widgets homepage)
 *   #main            (contenu principal)
 *
 * Ne touche PAS : #header, #news-ticker, .site-footer, .site-info, footer
 */

:root {
	--fmk-bg: var(--fmk-light-bg, #ffffff);
	--fmk-text: var(--fmk-light-text, #1a1a1a);
	--fmk-card: var(--fmk-light-card, #f5f5f5);
	--fmk-border: var(--fmk-light-border, #e0e0e0);
	--fmk-link: var(--fmk-light-link, #0066cc);
	--fmk-accent: var(--fmk-light-accent, #e63946);
}

html.fmk-dark {
	--fmk-bg: var(--fmk-dark-bg, #121212);
	--fmk-text: var(--fmk-dark-text, #e8e8e8);
	--fmk-card: var(--fmk-dark-card, #1e1e1e);
	--fmk-border: var(--fmk-dark-border, #333333);
	--fmk-link: var(--fmk-dark-link, #6eb3f7);
	--fmk-accent: var(--fmk-dark-accent, #ff6b6b);
	color-scheme: dark;
}

html:not(.fmk-dark) {
	color-scheme: light;
}

/* Fond de page (entre header et footer, sans toucher ces zones) */
html.fmk-dark body {
	background-color: var(--fmk-bg) !important;
}

/* ══════════════════════════════════════════════════════
   FEATURED AREA — slider + widgets (fond #f6f6f4 du thème)
   ══════════════════════════════════════════════════════ */

html.fmk-dark .featured_area {
	background-color: var(--fmk-bg) !important;
	border-bottom-color: var(--fmk-border) !important;
}

html.fmk-dark .featured_area .inner-wrap,
html.fmk-dark .featured_area #slider,
html.fmk-dark .featured_area .slider_widgets,
html.fmk-dark .featured_area .home_widgets {
	background-color: var(--fmk-bg) !important;
}

html.fmk-dark .featured_area #slider .section-title {
	background-color: var(--fmk-card) !important;
	color: var(--fmk-text) !important;
	border-color: var(--fmk-border) !important;
}

html.fmk-dark .featured_area .flickity-viewport,
html.fmk-dark .featured_area .flickity-slider,
html.fmk-dark .featured_area #slider .slides,
html.fmk-dark .featured_area #slider ul.slides {
	background-color: transparent !important;
}

html.fmk-dark .featured_area .flickity-button {
	background-color: color-mix(in srgb, var(--fmk-card) 85%, transparent) !important;
	color: var(--fmk-text) !important;
}

html.fmk-dark .featured_area .flickity-page-dots .dot {
	background-color: color-mix(in srgb, var(--fmk-text) 40%, transparent) !important;
}

html.fmk-dark .featured_area .flickity-page-dots .dot.is-selected {
	background-color: var(--fmk-accent) !important;
}

html.fmk-dark .featured_area .wpzoom-featured-cat,
html.fmk-dark .featured_area .slider_widgets .widget,
html.fmk-dark .featured_area .home_widgets .widget,
html.fmk-dark .featured_area .featured-grid,
html.fmk-dark .featured_area .featured-grid-2,
html.fmk-dark .featured_area .featured-grid-3,
html.fmk-dark .featured_area .featured-style-style_block {
	background-color: var(--fmk-bg) !important;
	border-color: var(--fmk-border) !important;
}

html.fmk-dark .featured_area .wpzoom-featured-cat .post-item {
	background-color: var(--fmk-card) !important;
}

/* Retirer les traits blancs entre slider et cards */
html.fmk-dark .featured_area #slider {
	border-right-color: transparent !important;
}

html.fmk-dark .featured_area .post-item .background-overlay {
	border-color: transparent !important;
}

html.fmk-dark .featured_area .flickity-prev-next-button {
	border-color: var(--fmk-border) !important;
}

html.fmk-dark .featured_area .slider_widgets .wpzoom-featured-cat .featured-grid-2 > div {
	border-color: transparent !important;
}

/* ══════════════════════════════════════════════════════
   SIDEBAR — onglets Récent / Populaire, widgets
   ══════════════════════════════════════════════════════ */

html.fmk-dark #sidebar .widget {
	background-color: var(--fmk-card) !important;
	border-color: var(--fmk-border) !important;
	color: var(--fmk-text) !important;
}

html.fmk-dark #sidebar .widget.tabbertabs {
	border-color: var(--fmk-border) !important;
}

html.fmk-dark #sidebar .widget .tabbernav {
	background-color: var(--fmk-card) !important;
}

html.fmk-dark #sidebar .widget .tabbernav li,
html.fmk-dark #sidebar .widget .tabbernav li a {
	color: var(--fmk-text) !important;
}

html.fmk-dark #sidebar .widget .tabbernav .tabberactive a {
	background-color: var(--fmk-bg) !important;
	color: var(--fmk-text) !important;
}

html.fmk-dark #sidebar .widget .tabbertab {
	background-color: var(--fmk-bg) !important;
}

html.fmk-dark #sidebar .feature-posts-list h3,
html.fmk-dark #sidebar .feature-posts-list h3 a,
html.fmk-dark #sidebar ul.popular li a,
html.fmk-dark #sidebar ul.popular .comments,
html.fmk-dark #sidebar .widgettitle {
	color: var(--fmk-text) !important;
}

html.fmk-dark #sidebar ul.popular .comments {
	color: color-mix(in srgb, var(--fmk-text) 55%, transparent) !important;
}

html.fmk-dark #sidebar .widget ul li {
	border-color: var(--fmk-border) !important;
}

/* ══════════════════════════════════════════════════════
   MAIN — articles, widgets, grilles (#main)
   ══════════════════════════════════════════════════════ */

html.fmk-dark #main {
	background-color: var(--fmk-bg) !important;
}

html.fmk-dark #main > .inner-wrap,
html.fmk-dark #main .content-area {
	background-color: var(--fmk-bg) !important;
	color: var(--fmk-text) !important;
}

html.fmk-dark #main .wpzoom-featured-cat,
html.fmk-dark #main .widget,
html.fmk-dark #main .widget_block,
html.fmk-dark #main .featured-grid,
html.fmk-dark #main .featured-grid-2,
html.fmk-dark #main .featured-grid-3,
html.fmk-dark #main .featured-grid-4,
html.fmk-dark #main .featured-grid-5,
html.fmk-dark #main .featured-grid-6,
html.fmk-dark #main .featured_category_2col,
html.fmk-dark #main .right_col_posts {
	background-color: transparent !important;
	color: var(--fmk-text) !important;
}

html.fmk-dark #main .featured-style-style_text {
	border-bottom-color: var(--fmk-border) !important;
}

html.fmk-dark #main .entry-title,
html.fmk-dark #main .entry-title a,
html.fmk-dark #main h1,
html.fmk-dark #main h2,
html.fmk-dark #main h3,
html.fmk-dark #main h4 {
	color: var(--fmk-text) !important;
}

html.fmk-dark #main .entry-meta,
html.fmk-dark #main .post-meta,
html.fmk-dark #main .cat-links,
html.fmk-dark #main .comments-link {
	color: color-mix(in srgb, var(--fmk-text) 65%, transparent) !important;
}

html.fmk-dark #main .post_content,
html.fmk-dark #main .post_content p,
html.fmk-dark #main .content-area p {
	color: color-mix(in srgb, var(--fmk-text) 85%, transparent) !important;
}

html.fmk-dark #main a {
	color: var(--fmk-link);
}

html.fmk-dark #main a:hover {
	color: var(--fmk-accent);
}

html.fmk-dark #main .recent-posts li,
html.fmk-dark #main article,
html.fmk-dark #main .post {
	background-color: transparent !important;
	border-color: var(--fmk-border) !important;
}

/* Catégories (ex. Politique internationale) */
html.fmk-dark #main .recent-posts .cat-links a,
html.fmk-dark #main .cat-links a,
html.fmk-dark #main .grid_posts .cat-links a {
	color: var(--fmk-text) !important;
	background-color: var(--fmk-card) !important;
	border-color: var(--fmk-border) !important;
}

html.fmk-dark #main .recent-posts .cat-links a:after,
html.fmk-dark #main .cat-links a:after {
	border-color: var(--fmk-border) !important;
}

html.fmk-dark #main .recent-posts .cat-links a:hover,
html.fmk-dark #main .cat-links a:hover {
	color: var(--fmk-accent) !important;
}

/* Bouton Continue Reading */
html.fmk-dark #main .readmore_button a,
html.fmk-dark #main .more-link,
html.fmk-dark #main .more_link {
	color: var(--fmk-text) !important;
	background-color: var(--fmk-card) !important;
	border: 1px solid var(--fmk-border) !important;
}

html.fmk-dark #main .readmore_button a:after {
	border-color: var(--fmk-border) !important;
}

html.fmk-dark #main .readmore_button a:hover {
	color: var(--fmk-accent) !important;
	background-color: transparent !important;
}

/* Séparateurs et bordures claires */
html.fmk-dark #main .recent-posts,
html.fmk-dark #main .featured-style-style_text,
html.fmk-dark #main .category_description,
html.fmk-dark #main .single .content-area .entry-meta {
	border-color: var(--fmk-border) !important;
}

html.fmk-dark #main .entry-meta span:not(.cat-links) + span:before {
	color: color-mix(in srgb, var(--fmk-text) 40%, transparent) !important;
}

/* Blocs Gutenberg / pub dans #main uniquement */
html.fmk-dark #main .wp-block-group.has-background,
html.fmk-dark #main .textwidget,
html.fmk-dark #main .adv_home {
	background-color: var(--fmk-card) !important;
}

html.fmk-dark #main [style*="background-color:#fff"],
html.fmk-dark #main [style*="background-color: #fff"],
html.fmk-dark #main [style*="background-color:#ffffff"],
html.fmk-dark #main [style*="background-color: #ffffff"],
html.fmk-dark #main [style*="background-color:#f5f5f5"],
html.fmk-dark #main [style*="background-color: #f5f5f5"],
html.fmk-dark #main [style*="background-color:#f6f6f4"],
html.fmk-dark #main [style*="background-color: #f6f6f4"],
html.fmk-dark .featured_area [style*="background-color:#fff"],
html.fmk-dark .featured_area [style*="background-color: #fff"],
html.fmk-dark .featured_area [style*="background-color:#f6f6f4"],
html.fmk-dark .featured_area [style*="background-color: #f6f6f4"] {
	background-color: var(--fmk-bg) !important;
}

/* Pages intérieures (single, archive, page) */
html.fmk-dark .single #main .entry-content,
html.fmk-dark .page #main .entry-content,
html.fmk-dark .archive #main .entry-content {
	color: var(--fmk-text) !important;
}

html.fmk-dark #main input,
html.fmk-dark #main textarea,
html.fmk-dark #main select {
	background-color: var(--fmk-card) !important;
	border-color: var(--fmk-border) !important;
	color: var(--fmk-text) !important;
}

/* ══════════════════════════════════════════════════════
   Bouton toggle (icônes uniquement)
   ══════════════════════════════════════════════════════ */

.fmk-theme-toggle {
	display: inline-flex;
	align-items: center;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	line-height: 1;
	transition: transform 0.15s ease;
}

.fmk-theme-toggle:hover {
	transform: translateY(-1px);
}

.fmk-theme-toggle:focus-visible {
	outline: 2px solid var(--fmk-accent, #e63946);
	outline-offset: 4px;
	border-radius: 999px;
}

.fmk-theme-toggle__switch {
	display: inline-flex;
}

.fmk-theme-toggle__track {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	width: 4.25rem;
	height: 2.125rem;
	padding: 0.2rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-sizing: border-box;
}

.fmk-theme-toggle__option {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.45);
	transition: color 0.2s ease;
}

.fmk-theme-toggle__knob {
	position: absolute;
	top: 0.2rem;
	left: 0.2rem;
	width: calc(50% - 0.2rem);
	height: calc(100% - 0.4rem);
	border-radius: 999px;
	background: #ffffff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	transition: transform 0.25s ease;
	z-index: 1;
}

html.fmk-dark .fmk-theme-toggle__knob {
	transform: translateX(100%);
}

html:not(.fmk-dark) .fmk-theme-toggle__option--sun {
	color: #e63946;
}

html.fmk-dark .fmk-theme-toggle__option--moon {
	color: #ff6b6b;
}

.fmk-theme-toggle--floating {
	position: fixed;
	z-index: 99999;
	padding: 0.35rem;
	border-radius: 999px;
	background: #1a1a1a;
	border: 1px solid #333;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.fmk-theme-toggle--header {
	margin: 0.5rem 0;
}

.fmk-theme-toggle--footer {
	margin: 1rem auto;
	display: flex;
	justify-content: center;
}

.fmk-theme-toggle__label {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.fmk-theme-toggle,
	.fmk-theme-toggle__knob {
		transition: none;
	}
}