/* =========================================================================
   css/pages/contact/main.css
   Auto-split from css/pages/contact.css.
   ========================================================================= */

		html,
		body {
			overflow-x: hidden;
		}

		/* Centrage du logo */
		.site-branding-wrap {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
		}

		.site-branding-center {
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
		}

		/* Décalage de 90px vers la droite pour les titres du menu (desktop uniquement) */
		@media screen and (min-width: 992px) {
			.site-header .nav-menu>ul#menu-mymenu {
				transform: translateX(90px);
			}
		}

		.site-title {
			text-align: center;
			margin: 0;
			padding: 0;
		}

		.site-title a {
			display: flex;
			justify-content: center;
			align-items: center;
			text-decoration: none;
		}

		.logo-image {
			max-height: 20px;
			width: auto;
			display: block;
			margin: 0 auto;
		}

		@media screen and (max-width: 991px) {
			.logo-image {
				max-height: 16px;
			}
		}

/* --- STYLES SPÉCIFIQUES POUR LE HEADER CONTACT - NOIR PAR DÉFAUT --- */

		/* --- HEADER NOIR PAR DÉFAUT SUR CONTACT (comme hover/scroll) --- */
		.site-header .header-wrap:before,
		.site-header .header-wrap,
		.site-header .header-wrap-inner {
			background: #000000 !important;
			opacity: 1 !important;
		}

		/* =====================================================
		   CONTACT PAGE - MENU HOVER STYLES (COMME AFRICA.HTML)
		   ===================================================== */

		/* Menu blanc par défaut sur fond noir */
		.site-header .nav-menu a {
			color: #ffffff !important;
		}

		/* Item actif "Contact" en noir pour être visible sur fond noir */
		.site-header .nav-menu .current-menu-item a {
			color: #000000 !important;
		}

		/* Hover : texte noir sur fond blanc (comme africa.html) */
		@media screen and (min-width: 992px) {

			html .nav-menu>ul>li>a:hover,
			.nav-menu>ul>li.has-submenu:hover>a {
				color: #000000 !important;
			}
		}

		/* Soulignement blanc au hover (comme africa.html) */
		@media screen and (min-width: 992px) {

			html.loaded .nav-menu ul li a .link-text:before,
			.nav-menu li.has-submenu:hover>a .link-text:before {
				background-color: #ffffff !important;
				border-color: #ffffff !important;
			}
		}

		/* =====================================================
		   FIN CONTACT PAGE MENU STYLES
		   ===================================================== */

		/* Bouton de langue blanc par défaut sur contact (fond noir) */
		.aboutus-language-btn {
			background: transparent !important;
			background-color: transparent !important;
			background-image: none !important;
			border: none !important;
			border-width: 0 !important;
			border-style: none !important;
			border-color: transparent !important;
			outline: none !important;
			outline-width: 0 !important;
			color: #ffffff !important;
			font-weight: bold !important;
			font-size: 14px !important;
			padding: 8px 16px !important;
			cursor: pointer !important;
			transition: color 0.3s ease !important;
			text-transform: uppercase !important;
			letter-spacing: 1px !important;
			min-width: 40px !important;
			text-align: center !important;
			white-space: nowrap !important;
			box-shadow: none !important;
			text-decoration: none !important;
			display: inline-block !important;
			vertical-align: middle !important;
			line-height: 1 !important;
			-webkit-box-shadow: none !important;
			-moz-box-shadow: none !important;
			-webkit-border-radius: 0 !important;
			-moz-border-radius: 0 !important;
			border-radius: 0 !important;
			-webkit-appearance: none !important;
			-moz-appearance: none !important;
			appearance: none !important;
		}

		/* EN-FR toggle parts + active highlight (aligné avec blog) */
		.aboutus-language-btn .lang-part,
		.menu-item-language .lang-part {
			opacity: 0.6;
			transition: color 0.2s ease, opacity 0.2s ease;
		}

		.aboutus-language-btn .lang-part.active,
		.menu-item-language .lang-part.active {
			opacity: 1;
			color: #d4af37;
			font-weight: 700;
		}

		.aboutus-language-btn .lang-sep,
		.menu-item-language .lang-sep {
			display: inline-block;
			margin: 0 8px;
			opacity: 0.6;
		}

		/* Logo blanc par défaut sur contact (fond noir) */
		.site-header .logo-image {
			filter: brightness(0) invert(1) !important;
			opacity: 1 !important;
			visibility: visible !important;
			transition: filter 0.3s ease !important;
		}

		/* Styles pour aligner le bouton de langue à droite comme dans le blog */
		.layout-medium {
			display: flex !important;
			align-items: center !important;
			justify-content: space-between !important;
			width: 100% !important;
		}

		.nav-menu {
			flex: 1 !important;
			display: flex !important;
			justify-content: center !important;
		}

		.language-switcher {
			flex-shrink: 0 !important;
			margin-left: auto !important;
		}

		/* Responsive: afficher l'item de langue dans le menu en mobile, bouton à droite en desktop */
		@media screen and (max-width: 991px) {
			.language-switcher {
				display: none !important;
			}

			.menu-item-language {
				display: block !important;
			}

			.is-menu-toggled-on .menu-item-language a {
				border-bottom: none;
				font-weight: 600;
				color: #666 !important;
			}
		}

		@media screen and (min-width: 992px) {
			.language-switcher {
				display: flex !important;
			}

			.menu-item-language {
				display: none !important;
			}
		}

		.contact-language-btn:focus {
			border: none !important;
			outline: none !important;
			box-shadow: none !important;
			text-decoration: none !important;
		}

		.contact-language-btn:active {
			border: none !important;
			outline: none !important;
			box-shadow: none !important;
			text-decoration: none !important;
		}

		/* Forcer l'override de tous les styles possibles */
		.contact-language-btn,
		.contact-language-btn:hover,
		.contact-language-btn:focus,
		.contact-language-btn:active,
		.contact-language-btn.active {
			background: transparent !important;
			background-color: transparent !important;
			background-image: none !important;
			border: none !important;
			border-width: 0 !important;
			border-style: none !important;
			border-color: transparent !important;
			outline: none !important;
			outline-width: 0 !important;
			box-shadow: none !important;
			text-decoration: none !important;
			text-shadow: none !important;
			-webkit-box-shadow: none !important;
			-moz-box-shadow: none !important;
			-webkit-border-radius: 0 !important;
			-moz-border-radius: 0 !important;
			border-radius: 0 !important;
		}

		/* Forcer le positionnement à droite dans le header */
		.layout-medium {
			display: flex !important;
			align-items: center !important;
			justify-content: space-between !important;
		}

		.nav-menu {
			flex: 1 !important;
			display: flex !important;
			justify-content: center !important;
		}

		.language-switcher {
			flex-shrink: 0 !important;
		}

.contact-language-btn {
			font-size: 12px !important;
			padding: 6px 12px !important;
			min-width: 35px !important;
		}

/* Aligner la section LINKS à gauche */
		[data-id="669c2da"] {
			text-align: left !important;
			justify-content: flex-start !important;
		}

		[data-id="1c2197b"] .qodef-m-title {
			text-align: left !important;
		}

		/* Aligner le titre OUR PROJECTS à gauche */
		[data-id="a3502a3"] {
			text-align: left !important;
			justify-content: flex-start !important;
		}

		[data-id="a7cbedc"] .qodef-m-title {
			text-align: left !important;
		}

		/* Aligner le titre MISSION AND VISION à gauche */
		[data-id="49eefb5"] {
			text-align: left !important;
			justify-content: flex-start !important;
		}

		[data-id="ab9b619"] .qodef-m-title {
			text-align: left !important;
		}

		/* Ajuster l'espacement haut du footer à 20px réels */
		[data-id="ba48383"] {
			background-color: #000000 !important;
			padding-top: 100px !important;
		}

		/* Neutraliser les marges des premiers éléments pour un contrôle par le parent uniquement */
		[data-id="ba48383"] .e-con-inner,
		[data-id="ba48383"] [data-id="f3a1683"],
		[data-id="ba48383"] [data-id="55b2473"] {
			margin-top: 0 !important;
			padding-top: 0 !important;
		}

		/* Supprimer l'espace vide de la section fantôme au-dessus */
		[data-id="3687ab62"] {
			display: none !important;
		}

		[data-id="ba48383"] * {
			color: #ffffff !important;
		}

		[data-id="ba48383"] .elementor-heading-title {
			color: #ffffff !important;
		}

		[data-id="ba48383"] .qodef-m-title {
			color: #ffffff !important;
		}

		[data-id="ba48383"] .qodef-e-word {
			color: #ffffff !important;
		}

		/* Footer final en noir */
		.site-footer {
			background-color: #000000 !important;
		}

		.site-footer .site-info {
			background-color: #000000 !important;
			color: #ffffff !important;
		}

		.site-footer .site-info p {
			color: #ffffff !important;
		}

		/* Couleur différente pour les liens spécifiés */
		[data-id="project-link"] .elementor-heading-title,
		[data-id="news-link"] .elementor-heading-title,
		[data-id="social-link"] .elementor-heading-title,
		[data-id="contact-link"] .elementor-heading-title {
			color: #ffffff !important;
			margin-bottom: 8px !important;
			padding: 3px 0 !important;
			font-weight: normal !important;
			font-size: 14px !important;
		}

		/* Career Button & Modal Styles */
		.career-btn {
			background-color: #000;
			color: #fff;
			border: none;
			padding: 12px 30px;
			border-radius: 5px;
			font-weight: 700;
			margin-top: 0;
			cursor: pointer;
			text-transform: uppercase;
			display: inline-block;
			align-self: flex-start;
			/* Ensure it doesn't stretch in flex container */
			width: auto;
			font-size: 13px;
			letter-spacing: 0.5px;
			transition: all 0.3s ease;
			box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
		}

		.career-btn:hover {
			background-color: #333;
		}

		.career-modal {
			display: none;
			position: fixed;
			z-index: 99999;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			background-color: rgba(0, 0, 0, 0.8);
		}

		.career-modal-content {
			background-color: #fff;
			margin: 5vh auto;
			padding: 0;
			border: none;
			width: 90vw;
			height: 90vh;
			max-width: 1400px;
			max-height: none;
			overflow: hidden;
			position: relative;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
			animation: modalPop 0.4s ease-out forwards;
			font-family: 'Open Sans', sans-serif;
			border-radius: 12px;
		}

		@keyframes modalPop {
			from {
				opacity: 0;
				transform: translateY(-20px) scale(0.98);
			}

			to {
				opacity: 1;
				transform: translateY(0) scale(1);
			}
		}

		/* Close button inside full-screen modal */
		.career-close-modal {
			color: #000;
			font-size: 35px;
			font-weight: 300;
			position: absolute;
			right: 30px;
			top: 20px;
			background: rgba(255, 255, 255, 0.8);
			padding: 5px 15px;
			line-height: 1;
			z-index: 10000;
			cursor: pointer;
			border-radius: 50%;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			transition: all 0.3s ease;
		}

		.career-close-modal:hover {
			color: #000;
		}