/* ----------------------------------------------------------------------------------------
* Thème clair / sombre
* ---------------------------------------------------------------------------------------
* Toute la couleur du site passe par les variables de palette définies dans custom.css
* (:root). Le thème sombre se contente d'INVERSER deux paires, conformément à la règle
* métier : « le fond prend la couleur du titre, le fond accent prend celle des
* paragraphes » — et réciproquement, pour garder un texte lisible sur fond sombre :
*
*     fond         (#F8FAFC) ⇄ titre        (#0F172A)
*     fond accent  (#E9ECF0) ⇄ paragraphe   (#475569)
*
* Les autres rôles (secondaire, principale/accent, succès/info/warning/danger) sont
* VOLONTAIREMENT identiques dans les deux thèmes : la spec ne prévoit d'inverser que ces
* deux paires.
*
* Ces valeurs par défaut sont redéclarées depuis la base (réglages `color_dark`) émis
* APRÈS cette feuille par Theme::paletteCss() : la base a donc toujours le dernier mot.
* -------------------------------------------------------------------------------------- */

/* Transition douce lors de la bascule. */
body,
.service-item,
.post-item,
.project-item,
.team-item,
.testimonial-item {
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

/************************************/
/***      Palette thème sombre    ***/
/************************************/

html[data-theme="dark"] {
	--background-color			: #0F172A; /* fond ⇄ titre */
	--heading-color				: #F8FAFC; /* titre ⇄ fond */
	--background-accent-color	: #475569; /* fond accent ⇄ paragraphe */
	--text-color				: #E9ECF0; /* paragraphe ⇄ fond accent */

	/* Surfaces « claires » (cartes) → navy ; filets → clairs. Déclinaisons uniquement. */
	--white-color				: #0B1F3A; /* = secondaire */
	--divider-color				: #F8FAFC1A; /* fond à 10 % */
	--dark-divider-color		: #F8FAFC1A;

	/* secondaire (#0B1F3A), principale (#14B8A6) et sémantiques : inchangés. */

	background-color: var(--background-color);
}

html[data-theme="dark"] body {
	background-color: var(--background-color);
}

/************************************/
/***  Sections figées (déjà sombres) ***/
/************************************/

/* Ces sections ont un fond navy (--secondary-color) recouvert de texte clair : elles sont
   déjà parfaites en thème clair et le restent à l'identique. On y rétablit donc la palette
   CLAIRE pour leurs contenus (cartes, titres, texte) ; sans ça, l'inversion rendrait leur
   texte illisible. Leur fond navy, lui (--secondary-color), ne change jamais. */
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .main-footer,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .our-services,
html[data-theme="dark"] .what-we-do,
html[data-theme="dark"] .mission-vision-bg,
html[data-theme="dark"] .sidebar-cta-box,
html[data-theme="dark"] .video-gallery-image,
html[data-theme="dark"] .cookie-consent-inner,
html[data-theme="dark"] .post-entry blockquote {
	--background-color			: #F8FAFC;
	--background-accent-color	: #E9ECF0;
	--heading-color				: #0F172A;
	--text-color				: #475569;
	--white-color				: #F8FAFC;
	--divider-color				: #0F172A1A;
}

/************************************/
/***   Ajustements ciblés         ***/
/************************************/

/* Logo du topbar : logo.webp contient des parties sombres invisibles sur fond sombre.
   On bascule vers footer-logo.webp (version claire) en thème sombre. */
.topbar .site-logo .logo-dark {
	display: none;
}

html[data-theme="dark"] .topbar .site-logo .logo-light {
	display: none;
}

html[data-theme="dark"] .topbar .site-logo .logo-dark {
	display: inline-block;
}

/************************************/
/***   Boutons flottants          ***/
/************************************/

/* Bascules thème + langue, fixées en bas à gauche. Le coin bas droit est déjà pris
   par le bouton « remonter en haut » (.progress-wrap), d'où le côté gauche. */
.floating-actions {
	position: fixed;
	left: 30px;
	bottom: 30px;
	z-index: 999;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.floating-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 0;
	background: var(--white-color);
	border: none;
	border-radius: 50%;
	cursor: pointer;
	color: var(--heading-color);
	line-height: 1;
	box-shadow: 0 6px 20px rgba(11, 31, 58, 0.18); /* navy à 18 % */
	transition: color 0.3s ease-in-out, background 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.floating-action-btn:hover {
	color: var(--accent-color);
	transform: translateY(-2px);
}

.floating-action-btn i {
	font-size: 18px;
}

/* Bouton WhatsApp : repris sur la palette (vert = --success-color) pour respecter la
   contrainte « uniquement ces couleurs ». Le survol vire au navy (--secondary-color)
   comme les autres boutons. */
.whatsapp-button {
	background: var(--success-color);
	color: #F8FAFC; /* = fond : icône claire fixe (le vert success n'est pas inversé) */
}

.whatsapp-button:hover {
	background: var(--secondary-color);
	color: #F8FAFC;
}

.whatsapp-button i {
	font-size: 22px;
}

@media only screen and (max-width: 767px) {
	.floating-actions {
		left: 20px;
		bottom: 20px;
		gap: 10px;
	}

	.floating-action-btn {
		width: 45px;
		height: 45px;
	}
}