/* ======================
   Thèmes Globaux
====================== */

/* ======================
   Logo SVG - Gestion des couleurs
====================== */
/* Mode clair : logo en color-fresh exact */
/* La couleur est définie directement dans le SVG via template-parts/sections/sec-nav.php */

/* Mode sombre & bleu : logo en blanc */
body.theme-dark .logo-img,
body.theme-fresh .logo-img {
	filter: invert(1);
}

/* ======================
   Navigation - Couleurs des liens fixes par thème
====================== */
.nav-menu a {
	text-decoration: none;
	transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Mode clair : liens en noir */
body.theme-light .nav-menu a {
	color: var(--color-dark);
}

/* Mode sombre & bleu : liens en blanc */
body.theme-dark .nav-menu a,
body.theme-fresh .nav-menu a {
	color: var(--color-light);
}

/* Sous-menu : toujours texte sombre sur fond blanc */
.nav-menu .sub-menu a {
	color: #333 !important;
}

.nav-menu .sub-menu a:hover {
	color: var(--color-fresh) !important;
}

/* Effet au survol */
.nav-menu a:hover {
	opacity: 0.8;
}

/* ======================
   Mode Dark
====================== */
body.theme-dark {
	background-color: var(--color-dark);
}

body.theme-dark .section-nav,
body.theme-dark .section-header,
body.theme-dark .section-footer,
body.theme-dark footer,
body.theme-dark main {
	background-color: var(--color-dark);
	color: var(--color-light);
}

/* ======================
   Mode Light
====================== */
body.theme-light,
body.theme-light main {
	background: var(--grad-light);
}

body.theme-light main.white {
	background: #fff;
}


body.theme-light .section-nav,
body.theme-light .section-header,
body.theme-light .section-footer,
body.theme-light footer {
	/* background-color: var(--color-light); */
	color: var(--color-dark);
}

/* ======================
   Mode Fresh
====================== */
body.theme-fresh {
	background-color: var(--color-fresh);
}

body.theme-fresh .section-nav,
body.theme-fresh .section.hero.fifty,
body.theme-fresh .section-header,
body.theme-fresh .section-footer,
body.theme-fresh footer,
body.theme-fresh main {
	background-color: var(--color-fresh);
	color: var(--color-light);
}

/* ======================
   Boutons - Couleurs selon le thème
   Note: Utilisation de spécificité élevée au lieu de !important
====================== */

/* Theme Fresh (Dark Button → Light on Hover) */
body.theme-fresh .section-nav .btn,
body.theme-fresh .btn {
	background: var(--color-dark);
	color: var(--color-light);
}

body.theme-fresh .section-nav .btn:hover,
body.theme-fresh .btn:hover {
	background: var(--color-light);
	color: var(--color-fresh);
}

/* Theme Dark (Fresh Button → Light on Hover) */
body.theme-dark .section-nav .btn,
body.theme-dark .btn {
	background: var(--color-fresh);
	color: var(--color-light);
}

body.theme-dark .section-nav .btn:hover,
body.theme-dark .btn:hover {
	background: var(--color-light);
	color: var(--color-fresh);
}

/* Theme Light (Fresh Button → Dark on Hover) */
body.theme-light .section-nav .btn,
body.theme-light .btn {
	background: var(--color-fresh);
	color: var(--color-light);
}

body.theme-light .section-nav .btn:hover,
body.theme-light .btn:hover {
	background: var(--color-dark);
	color: var(--color-light);
}

/* Chevron du CTA en color-fresh dans le thème light */
body.theme-light .btn .chevron svg {
	stroke: var(--color-fresh);
}

svg.chev.chevron-icon {
	width: 16px;
	height: 16px;
	fill: #ff6600; /* Change la couleur du chevron */
}

body.theme-fresh .btn.hero-cta-btn {
	background: var(--color-fresh);
	color: var(--color-light);
	cursor: pointer !important;
	font-size:1.62rem;
}