/* Transition douce sur le basculement global. */
html.cpme-dark-anim,
html.cpme-dark-anim body,
html.cpme-dark-anim body * {
	transition:
		background-color .28s ease,
		border-color .28s ease,
		color .28s ease,
		fill .28s ease,
		box-shadow .28s ease !important;
}
@media (prefers-reduced-motion: reduce) {
	html.cpme-dark-anim,
	html.cpme-dark-anim body,
	html.cpme-dark-anim body * {
		transition: none !important;
	}
}

/* Le bouton interrupteur — pastille ICÔNE SEULE, compacte et discrète.
   !important partout : le thème/Elementor stylait le <button> (fond magenta,
   trop imposant). On force la charte CPME et une taille sobre. */
.cpme-theme-toggle {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 6px !important;
	border: 1.5px solid #d8e2e5 !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	color: #114D61 !important;
	line-height: 1 !important;
	cursor: pointer;
	vertical-align: middle;
	box-shadow: 0 1px 3px rgba(13, 58, 72, .10) !important;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease;
	-webkit-appearance: none;
	appearance: none;
}
.cpme-theme-toggle:hover {
	border-color: #2a7d99 !important;
	color: #0d3a48 !important;
	box-shadow: 0 3px 8px rgba(13, 58, 72, .16) !important;
}
.cpme-theme-toggle:active {
	transform: translateY(1px);
}
.cpme-theme-toggle:focus-visible {
	outline: 2px solid #A81815;
	outline-offset: 2px;
}
.cpme-theme-toggle .cpme-theme-toggle__icon {
	width: 19px !important;
	height: 19px !important;
	flex: 0 0 auto;
	display: block;
}
/* Le libellé reste dans le DOM pour les lecteurs d'écran mais devient invisible
   (bouton icône seule). L'aria-label et le title donnent déjà le sens. */
.cpme-theme-toggle .cpme-theme-toggle__label {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}
/* Petit écran : encore un peu plus compact, marge réduite. */
@media (max-width: 1024px) {
	.cpme-theme-toggle {
		width: 38px !important;
		height: 38px !important;
		margin: 0 2px 0 6px !important;
	}
}

/* Variante fixée (dernier recours si aucune barre nav trouvée). */
.cpme-theme-toggle.cpme-theme-toggle--fixed {
	position: fixed;
	top: 14px;
	right: 14px;
	z-index: 99999;
	margin: 0;
}

/* Apparence du bouton en MODE SOMBRE : reste dans la charte, lisible. */
html.cpme-dark .cpme-theme-toggle {
	background: #12333f !important;
	border-color: #2a7d99 !important;
	color: #eaf3f6 !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35) !important;
}
html.cpme-dark .cpme-theme-toggle:hover {
	border-color: #3d9cbd !important;
	color: #ffffff !important;
	box-shadow: 0 3px 8px rgba(0, 0, 0, .5) !important;
}
html.cpme-dark .cpme-theme-toggle:focus-visible {
	outline-color: #ff7d6b;
}

/* HEADER : le resserrement du menu pour tenir sur UNE ligne est géré en JS
   (fitHeaderMenu) — adaptatif : on ne resserre QUE si la place manque, donc les
   grands écrans gardent l'espacement d'origine. */

/* ICÔNES SVG du header/méga : celles au fill sombre (#114D61) deviennent
   invisibles sur fond sombre → on les fait suivre la couleur claire du texte.
   Le bouton interrupteur (soleil/lune) n'est PAS ciblé (il garde son tracé). */
html.cpme-dark header.elementor-location-header svg:not(.cpme-theme-toggle__icon),
html.cpme-dark header.elementor-location-header .elementor-nav-menu i,
html.cpme-dark .cpme-mega svg,
html.cpme-dark .cpme-acct-mega svg {
	fill: currentColor !important;
}

/* LOGO : le logo CPME est sombre sur fond transparent (src contient "logo").
   En mode sombre il deviendrait invisible → on l'éclaircit pour rester lisible.
   inversion + désaturation légère : sombre -> clair, sans virer les couleurs. */
html.cpme-dark header.elementor-location-header img[src*="logo"],
html.cpme-dark .elementor-location-footer img[src*="logo"] {
	filter: brightness(0) invert(1) !important;
}