/* Elementor MCP Createur — utilitaires d'interaction (hover) pour liens et boutons.
   À poser via l'attribut class (settings.attributes) sur les éléments atomic. */

/* Soulignement animé (nav, liens footer) : glisse de gauche à droite au survol. */
.emc-hover-underline { position: relative; transition: color 0.25s ease; }
.emc-hover-underline::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
	background: var(--brand-primary, #54bd95); border-radius: 2px;
	transform: scaleX(0); transform-origin: left center;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.emc-hover-underline:hover::after,
.emc-hover-underline:focus-visible::after { transform: scaleX(1); }

/* Élévation douce (CTA, cards). */
.emc-hover-lift { transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease; }
.emc-hover-lift:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(10, 13, 20, 0.12); filter: brightness(1.04); }
.emc-hover-lift:active { transform: translateY(-1px); }

/* Glissement d'icône (boutons « → »). */
.emc-hover-slide-icon svg { transition: transform 0.25s ease; }
.emc-hover-slide-icon:hover svg { transform: translateX(4px); }

/* Fondu de couleur générique. */
.emc-hover-fade { transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; }

@media (prefers-reduced-motion: reduce) {
	.emc-hover-underline::after,
	.emc-hover-lift,
	.emc-hover-slide-icon svg,
	.emc-hover-fade { transition: none; }
}

/* Scopes par _cssid (Elementor free ne rend pas les attributs class custom) :
   soulignement animé des liens de navigation et du footer. */
#emc-nav .e-button-base, #emc-footer-links .e-button-base {
	position: relative; transition: color 0.25s ease;
}
#emc-nav .e-button-base::after, #emc-footer-links .e-button-base::after {
	content: ""; position: absolute; left: 4px; right: 4px; bottom: 2px; height: 2px;
	background: var(--brand-primary, #54bd95); border-radius: 2px;
	transform: scaleX(0); transform-origin: left center;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
#emc-footer-links .e-button-base::after { left: 0; right: auto; width: 100%; }
#emc-nav .e-button-base:hover::after, #emc-nav .e-button-base:focus-visible::after,
#emc-footer-links .e-button-base:hover::after, #emc-footer-links .e-button-base:focus-visible::after {
	transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
	#emc-nav .e-button-base::after, #emc-footer-links .e-button-base::after { transition: none; }
}

/* Toggle déclaratif (set-page-animations → toggles) : états visuels des boutons. */
.emc-toggle-active { background-color: var(--brand-primary, #54bd95) !important; color: #fff !important; }
.emc-toggle-inactive { background-color: transparent !important; color: var(--text-muted, #a6a6a6) !important; }
.emc-toggle-hidden { display: none !important; }

/* État actif automatique de la nav globale (emc-nav-active.js) : ne JAMAIS figer d'état
   actif dans le template header — il est global à toutes les pages. */
#emc-nav a.emc-nav-current { color: var(--ink-heading, #0a0d14) !important; font-weight: 600 !important; }
#emc-nav a.emc-nav-current::after { transform: scaleX(1); }

/* ---- Header global : sticky + burger mobile (comportements par défaut du module) ---- */
/* Sticky : appliqué au WRAPPER du template (enfant direct du body) — un élément sticky ne
   colle que dans la hauteur de son parent, or Elementor enveloppe le header d'un div à sa taille. */
.emc-header-sticky { position: sticky; top: 0; z-index: 120; }
body.admin-bar .emc-header-sticky { top: 32px; }
#emc-header { transition: box-shadow 0.3s ease; }
#emc-header.emc-header--scrolled { box-shadow: 0 6px 24px rgba(10, 13, 20, 0.08); }

.emc-burger {
	display: none; flex-direction: column; justify-content: center; gap: 5px;
	width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 10px;
	background: var(--brand-primary, #54bd95); cursor: pointer; z-index: 130;
}
.emc-burger span {
	display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px;
	transition: transform 0.35s cubic-bezier(0.68, -0.4, 0.32, 1.4), opacity 0.25s ease;
	transform-origin: center;
}
.emc-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.emc-burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.emc-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1024px) { .emc-burger { display: inline-flex; } }

.emc-mobile-menu {
	position: fixed; inset: 0; z-index: 110; pointer-events: none;
	display: flex; align-items: center; justify-content: center;
	background: var(--mint-tint, #ebf7f2);
	clip-path: circle(0px at calc(100% - 44px) 44px);
	transition: clip-path 0.65s cubic-bezier(0.83, 0, 0.17, 1);
}
.emc-mobile-menu.is-open { clip-path: circle(150% at calc(100% - 44px) 44px); pointer-events: auto; }
.emc-mobile-menu__links { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.emc-mobile-menu__links a {
	font-family: var(--font-base, inherit); font-size: 28px; font-weight: 600;
	color: var(--ink-heading, #0a0d14) !important; text-decoration: none;
	opacity: 0; transform: translateY(24px);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease;
}
.emc-mobile-menu.is-open .emc-mobile-menu__links a { opacity: 1; transform: translateY(0); }
.emc-mobile-menu__links a:hover,
.emc-mobile-menu__links a.emc-nav-current { color: var(--brand-primary, #54bd95) !important; }
html.emc-menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.emc-mobile-menu, .emc-mobile-menu__links a, .emc-burger span { transition: none; }
}

/* Mobile : les actions du header vivent dans le burger, la rangée ne wrappe pas. */
@media (max-width: 1024px) {
	#emc-actions { display: none !important; }
	.emc-header__row { flex-wrap: nowrap !important; }
}
.emc-mobile-menu__actions {
	display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 36px;
	padding-top: 28px; border-top: 1px solid rgba(10, 13, 20, 0.1); min-width: 220px;
}
.emc-mobile-menu__actions a, .emc-mobile-menu__actions button {
	opacity: 0; transform: translateY(24px);
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	font-size: 17px !important;
}
.emc-mobile-menu.is-open .emc-mobile-menu__actions a,
.emc-mobile-menu.is-open .emc-mobile-menu__actions button { opacity: 1; transform: translateY(0); }
.emc-mobile-menu { flex-direction: column; }