/**
 * Mansa Child - surcharges CSS ciblées.
 *
 * Les couleurs, typographies, espacements de conteneurs, boutons et la
 * plupart des interactions (hover, animations d'entrée) sont gérés depuis
 * les réglages natifs d'Elementor (Site Settings / Kit + contrôles avancés
 * de chaque widget). Ce fichier ne couvre que ce que ces contrôles ne
 * permettent pas de reproduire fidèlement au Figma.
 *
 * Les classes ciblées ci-dessous sont assignées dans Elementor via le champ
 * natif "Classes CSS" (onglet Avancé), la page reste donc éditable à 100%.
 */

/* =======================================================================
 * Révélation douce au scroll (voir custom.js pour la logique).
 * Sécurité : `.mansa-reveal` ne devient invisible que sous
 * `body.mansa-js-ready`, ajoutée uniquement par le JS une fois
 * l'IntersectionObserver prêt — sans JS (ou navigateur trop ancien), le
 * contenu reste visible par défaut, jamais perdu.
 * ===================================================================== */
.mansa-reveal {
	transition: opacity 0.7s cubic-bezier( 0.16, 1, 0.3, 1 ), transform 0.7s cubic-bezier( 0.16, 1, 0.3, 1 );
}

body.mansa-js-ready .mansa-reveal {
	opacity: 0;
	transform: translateY( 28px );
}

body.mansa-js-ready .mansa-reveal--left {
	transform: translateX( -32px );
}

body.mansa-js-ready .mansa-reveal--right {
	transform: translateX( 32px );
}

/* Même spécificité que la règle "caché" ci-dessus (sinon elle l'emporte
   quand même malgré la classe is-visible : (0,2,1) bat (0,2,0)). */
body.mansa-js-ready .mansa-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Léger échelonnement pour les grilles de cartes : classes fixes plutôt
   qu'un calcul dynamique, appliquées côté PHP (mansa-reveal-d1..d4). */
.mansa-reveal-d1 { transition-delay: 0.08s; }
.mansa-reveal-d2 { transition-delay: 0.16s; }
.mansa-reveal-d3 { transition-delay: 0.24s; }
.mansa-reveal-d4 { transition-delay: 0.32s; }

@media ( prefers-reduced-motion: reduce ) {
	.mansa-reveal {
		transition-duration: 0.01ms !important;
		transform: none !important;
	}
}

/* ---------- Reset des marges de paragraphe (widget Text Editor) ---------- */
/* Le widget Text Editor enveloppe le texte dans un <p>, qui garde la marge
   par défaut du navigateur (~1em haut/bas). Comme l'espacement entre
   éléments est déjà géré par le "Gap" du Container parent, cette marge
   s'ajoute en plus et décale le design (ex. cartes dont le contenu ne
   démarre pas à la même hauteur). On la neutralise, sauf entre deux
   paragraphes consécutifs dans un même widget (rare) où elle reste utile. */
.elementor-widget-text-editor p {
	margin: 0;
}

.elementor-widget-text-editor p + p {
	margin-top: 1em;
}

/* Les liens dans un texte doivent hériter la couleur du texte environnant :
   le Kit fixe une couleur de lien globale ("navy") qui s'applique sinon
   directement à l'élément <a> et l'emporte sur l'héritage — invisible sur
   fond sombre (ex. liens tel:/mailto: du footer). */
.elementor-widget-text-editor a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.elementor-widget-text-editor a:hover {
	color: var( --e-global-color-secondary );
}

/* La navigation utilise le "Pointer" natif du widget Nav Menu (Elementor
   Pro) pour le soulignement hover/actif. Le widget force flex-wrap:wrap sur
   son <ul> en layout horizontal, ce qui casse le menu sur une seule ligne
   même quand la largeur disponible est suffisante : on neutralise ce wrap
   pour le menu principal du header (desktop/tablette uniquement, le menu
   burger mobile n'est pas concerné). */
@media ( min-width: 1025px ) {
	.mansa-nav-nowrap {
		flex: 0 0 auto !important;
		width: auto !important;
	}

	.mansa-nav-nowrap .elementor-button-text {
		white-space: nowrap;
	}

	.mansa-nav-nowrap .elementor-nav-menu--layout-horizontal .elementor-nav-menu {
		flex-wrap: nowrap;
		width: auto;
	}
}

/* ---------- Items de largeur variable dans une rangée qui wrap ---------- */
/* Un Container Elementor est width:100% par défaut ; dans une rangée en
   wrap, ça le fait passer seul sur sa ligne au lieu de se dimensionner à
   son contenu. Utilisé pour les pastilles "Ils nous font confiance", etc. */
.mansa-auto-width {
	width: auto !important;
	flex: 0 0 auto !important;
}

/* ---------- Alignement de texte (widget Text Editor, sans contrôle natif) ---------- */
.mansa-text-center {
	text-align: center;
}

/* ---------- Cartes expertise / service : légère élévation au survol ---------- */
.mansa-card-hover {
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.mansa-card-hover:hover {
	transform: translateY( -6px );
	box-shadow: 0px 12px 20px 0px rgba( 11, 29, 58, 0.08 );
}

/* ---------- Liens "En savoir plus" : décalage de la flèche au survol ---------- */
.mansa-link-arrow .elementor-icon {
	transition: transform 0.25s ease;
}

.mansa-link-arrow:hover .elementor-icon {
	transform: translateX( 4px );
}

/* ---------- Cartes expertise "fiche éditoriale" (mansa_expertise_card) ---------- */
/* Lien "Découvrir" du pied de carte : passe à l'or au survol de la carte
   (même mécanique que .mansa-link-arrow pour la flèche, appliquée ici au
   libellé texte). */
.mansa-card-editorial__link .elementor-heading-title {
	transition: color 0.25s ease;
}

.mansa-link-arrow:hover .mansa-card-editorial__link .elementor-heading-title {
	color: var( --e-global-color-secondary );
}

/* ---------- Accessibilité ---------- */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var( --e-global-color-secondary );
	outline-offset: 2px;
}

/* =======================================================================
 * Menu mobile custom (panneau plein écran) — remplace le dropdown par
 * défaut du widget Nav Menu sur tablette/mobile pour une expérience plus
 * soignée : bouton burger animé, panneau plein écran avec fondu + glissé,
 * liens en grand avec traits dorés, verrouillage du scroll.
 * ===================================================================== */

/* Le hamburger natif d'Elementor est masqué sur tablette/mobile : notre
   bouton custom (widget HTML) prend le relais. */
.elementor-widget-nav-menu .elementor-menu-toggle,
.elementor-widget-nav-menu.elementor-nav-menu--toggle .elementor-menu-toggle,
.elementor-widget-nav-menu.elementor-nav-menu--burger .elementor-menu-toggle {
	display: none !important;
}

.mansa-burger {
	display: none;
	position: relative;
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
	flex-shrink: 0;
	z-index: 10001;
}

@media ( max-width: 1024px ) {
	.mansa-burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

.mansa-burger span {
	position: absolute;
	left: 4px;
	right: 4px;
	height: 2px;
	border-radius: 2px;
	background: #ffffff;
	transition: transform 0.35s cubic-bezier( 0.65, 0, 0.35, 1 ), opacity 0.2s ease, background-color 0.3s ease;
}

.mansa-burger span:nth-child( 1 ) { top: 10px; }
.mansa-burger span:nth-child( 2 ) { top: 15px; }
.mansa-burger span:nth-child( 3 ) { top: 20px; }

.mansa-mobile-panel.is-open ~ .mansa-burger span,
.mansa-burger.is-active span {
	background: #ffffff;
}

.mansa-burger.is-active span:nth-child( 1 ) {
	top: 15px;
	transform: rotate( 45deg );
}

.mansa-burger.is-active span:nth-child( 2 ) {
	opacity: 0;
	transform: translateX( -8px );
}

.mansa-burger.is-active span:nth-child( 3 ) {
	top: 15px;
	transform: rotate( -45deg );
}

.mansa-mobile-panel {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: linear-gradient( 165deg, #0b1d3a 0%, #10254a 60%, #0b1d3a 100% );
	opacity: 0;
	visibility: hidden;
	transform: translateY( -12px );
	transition: opacity 0.4s cubic-bezier( 0.16, 1, 0.3, 1 ), transform 0.45s cubic-bezier( 0.16, 1, 0.3, 1 ), visibility 0s linear 0.45s;
}

.mansa-mobile-panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
	transition: opacity 0.4s cubic-bezier( 0.16, 1, 0.3, 1 ), transform 0.45s cubic-bezier( 0.16, 1, 0.3, 1 ), visibility 0s linear 0s;
}

.mansa-mobile-panel__nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.mansa-mobile-panel__nav a {
	position: relative;
	display: inline-block;
	padding: 14px 0;
	font-family: "Lora", serif;
	font-weight: 700;
	font-size: 30px;
	color: #ffffff;
	text-decoration: none;
	opacity: 0;
	transform: translateY( 16px );
	transition: color 0.25s ease, opacity 0.5s ease, transform 0.5s ease;
}

.mansa-mobile-panel.is-open .mansa-mobile-panel__nav a {
	opacity: 1;
	transform: translateY( 0 );
}

.mansa-mobile-panel__nav a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 6px;
	width: 0;
	height: 2px;
	background: #c9a652;
	transition: width 0.3s ease, left 0.3s ease;
}

.mansa-mobile-panel__nav a:hover,
.mansa-mobile-panel__nav a.is-active {
	color: #c9a652;
}

.mansa-mobile-panel__nav a:hover::after,
.mansa-mobile-panel__nav a.is-active::after {
	left: 0;
	width: 100%;
}

.mansa-mobile-panel__cta {
	margin-top: 28px;
	padding: 15px 34px;
	border-radius: 30px;
	background: #c9a652;
	color: #0b1d3a;
	font-family: "Manrope", sans-serif;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	opacity: 0;
	transform: translateY( 16px );
	transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s, background-color 0.25s ease, box-shadow 0.25s ease;
}

.mansa-mobile-panel.is-open .mansa-mobile-panel__cta {
	opacity: 1;
	transform: translateY( 0 );
}

.mansa-mobile-panel__cta:hover {
	background: #b3903f;
	box-shadow: 0 12px 24px rgba( 201, 166, 82, 0.35 );
}

/* Décalage progressif des liens à l'ouverture (effet de cascade discret). */
.mansa-mobile-panel__nav a:nth-child( 1 ) { transition-delay: 0.05s; }
.mansa-mobile-panel__nav a:nth-child( 2 ) { transition-delay: 0.1s; }
.mansa-mobile-panel__nav a:nth-child( 3 ) { transition-delay: 0.15s; }
.mansa-mobile-panel__nav a:nth-child( 4 ) { transition-delay: 0.2s; }

body.mansa-nav-open {
	overflow: hidden;
}

@media ( prefers-reduced-motion: reduce ) {
	.mansa-mobile-panel,
	.mansa-mobile-panel__nav a,
	.mansa-mobile-panel__cta,
	.mansa-burger span {
		transition-duration: 0.01ms !important;
	}
}