/*
 * Correctifs CSS du site, chargés par mu-plugins/brextone-custom-css.php.
 * Pour tester une modif avant de la pousser : la coller dans l'inspector-stylesheet (F12),
 * en navigation privée pour voir le site comme un visiteur non connecté.
 */

:root {
	--brextone-nav-bg-dark: rgba(1, 9, 18, 0.95);
	--brextone-nav-bg-light: rgba(255, 255, 255, 0.95);
	--brextone-nav-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Barre de navigation fixe au scroll (logo + menu + bouton), toutes tailles
   La barre est le premier bloc du <header> de chaque page, qui sert aussi de
   hero. brextone/custom.js la marque (.brextone-nav), mesure sa place
   d'origine, puis ajoute html.brextone-nav-fixed : elle passe alors en
   position fixe exactement au même endroit, et un bloc vide de sa hauteur
   (.brextone-nav-spacer) garde sa place dans le header. Rien d'autre ne bouge.
   Sans le JS, aucune de ces règles ne s'applique.
   Une fois la page scrollée (body.brextone-scrolled), la barre colle au bord
   haut, prend toute la largeur, devient plus compacte et prend un fond :
   sombre si le logo est la version blanche, clair sinon.
   ========================================================================== */
.brextone-nav-spacer {
	display: none;
}

.brextone-nav-fixed .brextone-nav-spacer {
	display: block;
	flex-shrink: 0;
	height: var(--brextone-nav-h);
	padding: 0;
	margin: 0;
}

/* .e-con : pour passer devant les règles Elementor (.elementor .e-xxx) */
.brextone-nav-fixed .brextone-nav.e-con {
	position: fixed;
	top: var(--brextone-nav-top);
	left: var(--brextone-nav-left);
	width: var(--brextone-nav-w);
	padding-left: var(--brextone-nav-pl);
	padding-right: var(--brextone-nav-pr);
	z-index: 1000;
	transition: background-color 0.3s, box-shadow 0.3s, padding 0.3s, top 0.3s, left 0.3s, width 0.3s;
}

.brextone-nav-fixed .brextone-nav > a:has(img) {
	transition: width 0.3s;
}

.brextone-nav-fixed .brextone-scrolled .brextone-nav {
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	width: 100%;
	background-color: var(--brextone-nav-bg-light);
	box-shadow: var(--brextone-nav-shadow);
	padding-top: 0.4%;
	padding-bottom: 0.4%;
}

.brextone-nav-fixed .brextone-scrolled .brextone-nav:has(img[src*="Horizontal_blanc"]) {
	background-color: var(--brextone-nav-bg-dark);
}

/* La barre d'admin WordPress n'est pas fixe sous 600px : on colle au bord */
@media (max-width: 600px) {
	.brextone-nav-fixed .brextone-scrolled .brextone-nav {
		top: 0;
	}
}

/* Barre scrollée plus compacte : logo et bouton réduits */
.brextone-nav-fixed .brextone-scrolled .brextone-nav > a:has(img) {
	width: 10%;
}

@media (max-width: 1024px) {
	.brextone-nav-fixed .brextone-scrolled .brextone-nav > a:has(img) {
		width: 20%;
	}
}

/* .e-con : pour passer devant les règles Elementor (.elementor-49 .elementor-element-xxx .elementor-button) */
.brextone-nav-fixed .brextone-nav.e-con .elementor-button {
	transition: font-size 0.3s, padding 0.3s, background-color 0.3s;
}

.brextone-nav-fixed .brextone-scrolled .brextone-nav.e-con .elementor-button {
	font-size: 15px;
	padding: 10px 20px;
}

/* Dropdown mobile/tablette : RAEL le place sous le bouton burger (top en JS)
   avec une marge (réglage "Distance" du widget dans Elementor, 53px !important
   en tablette/mobile), ce qui laisse un trou sous la barre. On le rattache à la
   barre elle-même (widget en static) pour qu'il parte pile de son bord bas. */
.brextone-nav-fixed .brextone-nav > .elementor-widget-rael-nav-menu {
	position: static;
}

/* html/body/.e-con : pour passer devant la règle !important d'Elementor */
html.brextone-nav-fixed body .brextone-nav.e-con .elementor-rael-nav-menu--dropdown.elementor-rael-nav-menu__container {
	top: 100% !important;
	/* En haut de page, la barre est en retrait du padding du header : le
	   dropdown déborde d'autant de chaque côté pour prendre tout l'écran */
	left: calc(-1 * var(--brextone-nav-left)) !important;
	width: calc(100% + 2 * var(--brextone-nav-left)) !important;
	margin-top: 0 !important;
}

/* Barre scrollée : elle prend déjà toute la largeur */
html.brextone-nav-fixed body.brextone-scrolled .brextone-nav.e-con .elementor-rael-nav-menu--dropdown.elementor-rael-nav-menu__container {
	left: 0 !important;
	width: 100% !important;
}

/* ==========================================================================
   Page /approche — images des cartes Solutions / Experiences
   Ces blocs sont vides : l'image est un fond. En ordinateur, la carte est en
   ligne et le bloc s'étire à la hauteur du texte. En tablette/mobile, la carte
   passe en colonne : sans contenu, le bloc retombe à 0px de haut et l'image
   disparaît. On lui donne un format fixe (même recadrage quelle que soit la
   largeur) et on cadre le fond sur le sujet de l'image.
   .elementor + .e-con : pour passer devant les règles Elementor (.elementor .e-xxx)
   ========================================================================== */
@media (max-width: 1024px) {
	.elementor .elementor-element-6faa05c.e-con,
	.elementor .elementor-element-18c5949.e-con {
		aspect-ratio: 16 / 9;
	}

	/* Agent de sécurité (image portrait) : le dos « SÉCURITÉ » et les écrans */
	.elementor .elementor-element-6faa05c.e-con {
		background-position: center 55%;
	}

	/* Hôtesse Mila (image panoramique) : elle est à droite, le reste est flou */
	.elementor .elementor-element-18c5949.e-con {
		background-position: 78% 30%;
	}
}

@media (max-width: 767px) {
	.elementor .elementor-element-6faa05c.e-con,
	.elementor .elementor-element-18c5949.e-con {
		aspect-ratio: 4 / 3;
	}
}

/* ==========================================================================
   Menu — bouton burger (widget RAEL Nav Menu)
   L'icône <i class="eicon-menu-bar"> dépend de la feuille "elementor-icons",
   qu'Elementor ne charge que pour les utilisateurs connectés : pour les
   visiteurs, l'icône est vide, donc invisible.
   On la dessine en CSS ; currentColor reprend la couleur réglée dans Elementor.
   ========================================================================== */
.elementor-rael-menu-toggle i.eicon-menu-bar {
	position: relative;
	display: block;
	width: 1em;
	height: 2px;
	margin: 0.4em 0;
	background: currentColor;
	border-radius: 2px;
	transition: background-color 0.2s;
}

.elementor-rael-menu-toggle i.eicon-menu-bar::before,
.elementor-rael-menu-toggle i.eicon-menu-bar::after {
	content: "" !important;
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: top 0.2s, transform 0.2s;
}

.elementor-rael-menu-toggle i.eicon-menu-bar::before {
	top: -0.33em;
}

.elementor-rael-menu-toggle i.eicon-menu-bar::after {
	top: 0.33em;
}

/* Menu ouvert : le burger devient une croix */
.elementor-rael-menu-toggle.elementor-active i.eicon-menu-bar {
	background: transparent;
}

.elementor-rael-menu-toggle.elementor-active i.eicon-menu-bar::before {
	top: 0;
	transform: rotate(45deg);
}

.elementor-rael-menu-toggle.elementor-active i.eicon-menu-bar::after {
	top: 0;
	transform: rotate(-45deg);
}

/* ==========================================================================
   Pages Mentions légales / Politique de confidentialité
   Texte des widgets "Éditeur de texte" marqués brextone-legal
   ========================================================================== */
.brextone-legal a {
	color: #23B5B9;
	text-decoration: underline;
	overflow-wrap: anywhere;
}

.brextone-legal ul {
	margin: 0 0 1em;
	padding-left: 1.25em;
}