/*
Theme Name: Pixora Child
Template: pixora
Description: Thème enfant de Pixora pour les personnalisations spécifiques à Rizes.
Author: Agence Artemis
Version: 1.0.0
Text Domain: pixora
*/

.px-header-2-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
}

.tp-header-lang {
	display: none;
	align-items: center;
	gap: 15px;
}

/* Le switcher ne s'affiche que quand le menu est ouvert (bouton hamburger -> croix). */
.px-header-2-bar:has(#hamburger-open-btn.active) .tp-header-lang {
	display: flex;
}

.tp-header-lang-item {
	font-size: 16px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	transition: color 0.3s ease;
}

.tp-header-lang-item:hover {
	color: #fff;
}

.tp-header-lang-item.active {
	color: #fff;
	font-weight: 700;
}

/* Le widget "Text Slider" (bandeau de texte défilant) oublie la classe .fix
   (overflow:hidden) que le "Brand Slider" a bien — le slider déborde donc du
   viewport et provoque le scroll latéral en mobile comme en desktop. */
.swiper-container.px-text-slider-active,
.px-text-slider-wrap {
	overflow-x: hidden;
}

/* Un container Elementor imbriqué dans ce même widget calcule une marge gauche
   erronée (~17px, mécanisme "stretch" plein écran), suffisante pour créer un
   scroll latéral. On neutralise ça uniquement à l'intérieur de ce widget
   (classe de widget stable, pas l'ID auto-généré du container qui change à
   chaque sauvegarde Elementor) plutôt que de clipper html/body/.elementor :
   ce clip trop large cassait par ailleurs l'affichage du menu offcanvas fermé
   (qui repose sur un débordement invisible géré par le smooth-scroll GSAP —
   voir la note sur les theme_mods copiés depuis "pixora" — et qui ne doit
   surtout pas être clippé au niveau racine). */
.elementor-widget-tp-slider-text .e-con,
.elementor-widget-tp-px-text-slider .e-con {
	margin-left: 0 !important;
}

/* Le violet du titre "Brand & Strategy" etc. n'est en réalité qu'une couleur de
   :hover réglée dans Elementor — il ne dit rien sur l'item actuellement actif.
   On le rend permanent pour l'item actif, qu'il ait été survolé/tapé ou non
   (notamment l'item actif par défaut au chargement de la page). */
.elementor-widget-px-service-list .px-service-2-element.active .px-service-2-title.tp-el-title {
	-webkit-text-fill-color: #DDBBE3;
	color: #DDBBE3 !important;
}

/* Sur mobile/tablette, le thème parent masque totalement l'aperçu (image + texte).
   On le réaffiche, repositionné en flux normal (plus en position absolute) à gauche. */
@media only screen and (max-width: 991px) {
	.px-service-2-info {
		display: block !important;
		position: static !important;
		width: 100% !important;
		max-width: 220px;
		transform: none !important;
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		transition: max-height 0.4s ease, opacity 0.3s ease;
	}

	.px-service-2-element.active .px-service-2-info {
		opacity: 1;
		margin-bottom: 20px;
	}

	.px-service-2-element .row {
		flex-direction: column;
	}

	/* Ce padding et ce positionnement absolu du numéro n'ont de sens que lorsque
	   l'aperçu est en position absolute (desktop) ; en flux normal ça chevauche le titre. */
	.px-service-2-element.active .px-service-2-title {
		padding-left: 0;
	}

	.px-service-2-title > span.tp-el-num {
		position: static;
		display: inline-block;
		margin-left: 8px;
	}
}