/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/
@import "flexui.css";
@import "wpml-selector.css";
@import "appear.css";
/* @import "site-techno-map.css"; */
@import "forms.css";
@import "wallis-dot/wallis.css";

/* PROPS FOR CUSTOMER START HERE =================================================== */
html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height);
}
body {
	border-left: solid white var(--frame-w);
	border-right: solid white var(--frame-w);
	min-height: 100vh;
}

main {
	margin-top: var(--frame-w);
}
/* link & button */
p a {
	font-weight: bold;
	color: var(--primary-light-color);
	transition: color 0.3s ease-out;
}
p a:hover {
	color: var(--primary-color);
}
ul {
	padding-left: 1rem;
}
.brxe-text-link {
	cursor: pointer;
	font-weight: bold;
	gap: 0.25rem;
	transition: all 0.3s ease-out;
}
.brxe-text-link:hover {
	text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.6);
	gap: 0.5rem;
}
.bricks-background-primary.brxe-button,
input[type="submit"] {
	background: linear-gradient(
		90deg,
		var(--secondary-color) 0%,
		var(--primary-color) 60%
	);
	background-size: 200%;
	background-position: 30%;
	color: white;
	border-radius: 999px;
	padding: 0.75rem 1.75rem 0.75rem 1.5rem;
	gap: 0.5rem;
	font-weight: bold;
	transition: all 0.3s ease-out;
	border: 1px solid transparent;
	cursor: pointer;
	& svg {
		transition: rotate 0.3s ease-out;
	}
}
.btn-transparent {
	padding: 0.25rem 0px;
	background: none !important;
	color: white;
	border: 0px;
	font-size: var(--text-s);
	font-weight: bold;
	transition: all 0.3s ease-out;
	svg {
		transition: rotate 0.3s ease-out;
	}
}
.btn-transparent:hover {
	text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.6);
}
.bricks-background-primary.brxe-button:hover,
input[type="submit"]:hover {
	text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.3);
	background-position: 70%;
}
.brxe-button:hover svg,
.btn-transparent:hover svg,
input[type="submit"] svg:hover {
	rotate: 90deg;
}
.brxe-button.no-rotate:hover svg {
	rotate: 0deg;
}
.bricks-background-primary {
	background: linear-gradient(
		90deg,
		var(--secondary-color) 0%,
		var(--primary-color) 60%
	);
	background-size: 200%;
	background-position: 30%;
	color: white;
}
.bricks-background-primary:hover {
	border: 1px solid rgba(255, 255, 255, 0.3);
	background-position: 70%;
}

footer {
	position: absolute;
	bottom: 0px;
	width: 100%;
	color: var(--bg-color);
	& .bottom-line a {
		transition: color 0.3s ease-out;
	}
	& .bottom-line a:hover {
		color: var(--primary-light-color);
	}
}

/* NAVBAR */
.navbar-btn {
	height: 3.5rem;
	max-height: 3.5rem;
	background-color: transparent;
	border: solid 2px var(--bg-color);
	color: var(--bg-color);
	width: 3.5rem;
	border-radius: 999px;
}
.navbar-lang {
	width: fit-content;
	border-radius: 1rem;
	height: 100%;
	display: flex;
	align-items: center;
}
@property --colorPosition {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 0%;
}
@keyframes logoColor {
	0%,
	100% {
		--colorPosition: 0%;
	}
	50% {
		--colorPosition: 100%;
	}
}
.logo-fx {
	background: linear-gradient(
		45deg,
		var(--primary-color) calc(var(--colorPosition) - 50%),
		var(--secondary-color) var(--colorPosition),
		var(--primary-color) calc(var(--colorPosition) + 50%)
	);
	animation: logoColor 5s linear infinite;
	-webkit-mask-image: url("/wp-content/uploads/logo.png");
	mask-image: url("/wp-content/uploads/logo.png");
	width: 135px;
	height: 62px;
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
}

.brxe-social-icons li,
.navbar-btn {
	transition: all 0.3s ease-out;
	border: 2px solid var(--bg-color);
	border-radius: 999px;
	display: flex;
	flex: none;
	width: 3.25rem;
	height: 3.25rem;
	cursor: pointer;
}
.brxe-social-icons li:hover,
.navbar-btn:hover {
	background: linear-gradient(180deg, #2575fc 0%, #6a11cb 100%);
	border: none;
}
.brxe-social-icons li i.icon {
	transition: color 0.3s ease-out;
}
.brxe-social-icons li:hover i.icon {
	color: white !important;
}
.navbar-btn svg {
	stroke: var(--bg-color);
}
.navbar-btn:hover svg {
	stroke: white !important;
	/* transition: stroke 0.3s ease-out; */
}
/* icon menu */
#brxe-szdmrc path {
	transition: all 0.3s ease-in-out;
	transform-box: fill-box;
}
#brxe-szdmrc #line-top,
#brxe-szdmrc #line-bottom {
	transform-origin: 50% 50%;
}

/* menu open: */
.brx-popup {
	opacity: 1 !important;
	translate: 0px -100%;
	transition: all 0.5s ease-out;
}

.menu-wrapper {
	background: url("/wp-content/uploads/2024/07/noise-bg.png") 50% 50%,
		conic-gradient(from 180deg at 50% 50%, #8a26ff 0deg, #120925 360deg);
}

.big-link-menu {
	color: white;
	font-size: var(--text-4xl);
	margin-top: 1.5rem;
	line-height: 120%;
}
.small-link-menu {
	color: white;
	font-weight: 500;
}
.small-link-menu:hover {
	font-weight: bold;
}
.menu-left-col b {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: flex-end;
	text-align: right;
}
.menu-right-col b {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: flex-start;
	text-align: left;
}
/* page header */
.pageheader {
	height: 100vh;
}

.pageheader__side-img {
	mask-image: linear-gradient(
		18deg,
		rgba(255, 255, 255, 0) 19.46%,
		#fff 65.53%
	);
}
.herohome__side-img {
	mask-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
}

/* hero section */
h1 span:first-child {
	text-decoration: underline;
}
#dot-wallis-animated {
	width: 100%;
	padding-left: 2rem;
	max-width: 1000px;
	opacity: 0;
}
.cls-3 {
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0.1);
}

/* double sphere */
.dbl-sphere {
	position: absolute;
	width: 40rem;
	aspect-ratio: 1 / 1;
	max-width: 40vw;
	border-radius: 999px;
}
.dbl-sphere-blue {
	z-index: 14;
	background: linear-gradient(196deg, #2575fc 0%, #6a11cb 100%);
}
.dbl-sphere-glossy {
	z-index: 15;
	background: linear-gradient(
		198deg,
		rgba(255, 255, 255, 0.6) 14.36%,
		rgba(255, 255, 255, 0.24) 23.87%,
		rgba(255, 255, 255, 0.1) 40.98%,
		rgba(255, 255, 255, 0.04) 56.19%,
		rgba(255, 255, 255, 0.02) 68.87%,
		rgba(255, 255, 255, 0.1) 77.74%
	);
	filter: drop-shadow(35px -33px 90px rgba(124, 21, 236, 0.3));
	backdrop-filter: blur(45px);
	-webkit-backdrop-filter: blur(45px);
}
/* spline element */
.spline-element {
	pointer-events: none;
}
.spline-element spline-viewer {
	aspect-ratio: 1 / 1;
	pointer-events: none;
	max-width: 40rem;
}
.spline-anchor {
	/* positionnement des éléments spline dans la zone de texte animé de la page d'accueil */
	position: relative;
	width: 100%;
	z-index: 0;
}

/* VIDEO PARAMETER */
.articleheader::after,
.pageheader::after,
#brxe-mtlsft::after,
.cta-section::after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
	pointer-events: none;
}
#brxe-mtlsft::after {
	background: linear-gradient(0deg, rgba(18, 9, 37, 0) 55.6%, #120925 100%);
}
.pageheader::after {
	background: linear-gradient(180deg, rgba(18, 9, 37, 0) 80%, #120925 100%);
}
.articleheader::after {
	background: linear-gradient(180deg, rgba(18, 9, 37, 0) 80%, #120925 100%);
}
.cta-section::after {
	background: linear-gradient(0deg, rgba(18, 9, 37, 0) 80%, #120925 100%);
}

/* CTA section */
.cta-section {
	height: 100%;
}
/* .cta-section--ctn {
    padding-block: 10rem;
} */

/* LABEL ========================================================================= */
@property --colorCategoryLabel1 {
	syntax: "<color>";
	initial-value: white;
	inherits: false;
}
@property --colorCategoryLabel2 {
	syntax: "<color>";
	initial-value: white;
	inherits: false;
}
@property --colorCardLabel1 {
	syntax: "<color>";
	initial-value: white;
	inherits: false;
}
@property --colorCardLabel2 {
	syntax: "<color>";
	initial-value: white;
	inherits: false;
}
.card-label {
	--colorCardLabel1: var(--black-33);
	--colorCardLabel2: var(--black-33);
	padding: 0.5rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: linear-gradient(
		284deg,
		var(--colorCardLabel1) 10.78%,
		var(--colorCardLabel2) 50%,
		var(--colorCardLabel1) 89.22%
	);
	backdrop-filter: blur(6px);
	border-radius: 99px;
	gap: 0.25rem;
	font-weight: bold;
	font-size: var(--text-xs);
	transition: --colorCardLabel1 0.3s ease-out, --colorCardLabel2 0.3s ease-out;
}
.card-label.active {
	--colorCardLabel1: rgba(30, 95, 242, 0.03);
	--colorCardLabel2: rgba(138, 38, 255, 0.55);
	text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.6);
}
.category-label {
	--colorCategoryLabel1: var(--fg-6);
	--colorCategoryLabel2: var(--fg-6);
	display: flex;
	padding: 0.75rem 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: var(--fg-6);
	background: linear-gradient(
		284deg,
		var(--colorCategoryLabel1) 10.78%,
		var(--colorCategoryLabel2) 50%,
		var(--colorCategoryLabel1) 89.22%
	);
	border-radius: 99px;
	font-weight: bold;
	width: fit-content;
	transition: --colorCategoryLabel1 0.3s ease-out,
		--colorCategoryLabel2 0.3s ease-out;
}
.category-label:hover,
.category-label[aria-current="page"] {
	--colorCategoryLabel1: rgba(30, 95, 242, 0.03);
	--colorCategoryLabel2: rgba(138, 38, 255, 0.55);
	text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.6);
}

/* articles card */
@property --colorArticlesCard1 {
	syntax: "<color>";
	initial-value: white;
	inherits: false;
}
@property --colorArticlesCard2 {
	syntax: "<color>";
	initial-value: white;
	inherits: false;
}
@property --articlesCardPourcent1 {
	syntax: "<percentage>";
	initial-value: 0%;
	inherits: true;
}
@property --articlesCardPourcent2 {
	syntax: "<percentage>";
	initial-value: 75%;
	inherits: true;
}
.articles-card-ctn {
	overflow-y: visible;
	overflow-x: scroll;
	min-width: calc(100% + 4rem);
	margin-left: -2rem;
	margin-top: -2rem;
	margin-bottom: -2rem;
	padding: 2rem;
	display: flex;
	flex-direction: row;
	wrap: nowrap;
	scroll-snap-type: x mandatory;
}
.articles-card-ctn::-webkit-scrollbar {
	display: none;
}
.articles-card {
	scroll-snap-align: center;
	height: 29rem;
	border-radius: 1rem;
	display: flex;
	padding: 1rem;
	min-width: 19.25rem;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 0.75rem;
	border: 1px solid var(--bg-color);
	transition: border 0.3s ease-out, box-shadow 0.3s ease-out;
	& h5 {
		line-height: 150%;
	}
	& .bg-articles-card {
		--colorArticlesCard1: rgba(23, 73, 222, 0.1);
		--colorArticlesCard2: rgba(27, 6, 54, 0.8);
		--articlesCardPourcent1: 0%;
		--articlesCardPourcent2: 75%;
		transition: --colorArticlesCard1 0.8s ease-out,
			--colorArticlesCard2 0.8s ease-out, --articlesCardPourcent1 1s ease-out,
			--articlesCardPourcent2 1s ease-out;
		background: linear-gradient(
			202deg,
			var(--colorArticlesCard1) var(--articlesCardPourcent1),
			var(--colorArticlesCard2) var(--articlesCardPourcent2)
		);
		z-index: 1;
		pointer-events: none;
	}
}
.articles-card:hover {
	border: 1px solid var(--primary-light-color);
	box-shadow: 0px 4px 45px 0px rgba(138, 38, 255, 0.3);
	& .bg-articles-card {
		--colorArticlesCard1: rgba(52, 7, 110, 0);
		--colorArticlesCard2: rgba(52, 7, 110, 0.88);
		--articlesCardPourcent1: 10%;
		--articlesCardPourcent2: 60%;
	}
	& .brxe-button {
		text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.6);
	}
	& .brxe-button svg {
		rotate: 90deg;
	}
}
/* CARD ANIMATION ========================================================================= */
@property --colorCard1 {
	syntax: "<color>";
	initial-value: white;
	inherits: false;
}
@property --colorCard2 {
	syntax: "<color>";
	initial-value: white;
	inherits: false;
}
.card-success-stories,
.card-logo {
	--colorCard1: var(--fg-10);
	--colorCard2: var(--fg-10);
	background: linear-gradient(
		45deg,
		var(--colorCard1) 0%,
		var(--colorCard2) 250%
	) !important;
	transition: scale 0.3s ease-out, --colorCard1 0.6s ease-out,
		--colorCard2 0.6s ease-out, border 0.8s ease-out, box-shadow 0.8s ease-out;
}
.card-success-stories:hover,
.card-logo:hover {
	--colorCard1: var(--black-33);
	--colorCard2: var(--primary-light-color);
	border: 1px solid var(--primary-light-color) !important;
	box-shadow: 0px 4px 45px 0px var(--primary-30);
	& .brxe-button {
		text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.6);
	}
	& .brxe-button svg {
		rotate: 90deg;
	}
}
.card-logo:hover {
	scale: 1.05;
}

/* TEXT SLIDERS ===================================================================== */

.txt-slider,
.txt-slider-ctn {
	flex-direction: row;
	flex-wrap: nowrap;
	padding: 0px;
	margin: 0px;
}
.txt-slider {
	display: flex;
	font-size: 8rem;
	line-height: 120%;
	font-weight: bold;
	color: transparent;
	text-stroke: 2px var(--fg-color);
	-webkit-text-stroke: 2px var(--fg-color);
}
.txt-slider-ctn {
	display: flex;
	width: fit-content;
	max-width: initial;
}
.txt-slider .brxe-text-basic {
	padding-right: 3rem;
	display: block;
}
.txt-slider-wrapper-moveleft,
.txt-slider-wrapper-moveright {
	z-index: 10;
	mix-blend-mode: overlay;
	display: flex;
	flex-direction: row !important;
	position: relative;
}
.txt-slider-wrapper-moveleft {
	justify-content: flex-start;
}
.txt-slider-wrapper-moveright {
	justify-content: flex-end;
}
.txt-slider-wrapper-moveleft .txt-slider-ctn {
	/* animation: textSlider 25s linear infinite; */
}
.txt-slider-wrapper-moveright .txt-slider-ctn {
	/* animation: textSliderRev 25s linear infinite; */
}

@keyframes textSlider {
	100% {
		translate: -50% 0px;
	}
}
@keyframes textSliderRev {
	100% {
		translate: 50% 0px;
	}
}

/* COMPLIANZ BTN ===================================================================== */

button.cmplz-btn.cmplz-manage-consent.manage-consent-1.cmplz-show {
	height: fit-content !important;
	padding: 0.75rem !important;
	font-size: 0.75rem;
	text-align: center;
	font-weight: bold;
}

/* hide complianz button on maps page */
.page-id-1754 .cmplz-btn {
	display: none;
}
/* politique des cookies */
.cmplz-document.cookie-statement h2,
.cmplz-document.cookie-statement h3 {
	font-size: var(--text-2xl);
	margin-top: 1.5rem;
}
.cmplz-document.cookie-statement h4 {
	font-size: var(--text-xl);
	margin-top: 1.2rem;
}
.cmplz-cookiebanner .cmplz-categories .cmplz-category {
	background-color: #0000004f !important;
	border-radius: 0.5rem;
}
span.cmplz-icon.cmplz-open {
	fill: white;
}
.cmplz-link.cookie-statement {
	display: none;
}
/* WP ARTICLES ===================================================================== */
h4.wp-block-heading,
h5.wp-block-heading {
	margin-top: 1.5rem;
	font-size: var(--text-2xl);
}
h3.wp-block-heading {
	margin-top: 1.766rem;
	font-size: var(--text-3xl);
}
.brxe-post-content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.wp-block-spacer {
	display: none;
}

/* masquer les dates pour les articles dont la catégorie = event */
.card-label[category="event"],
.card-label[category="events"] {
	display: none;
}

/* MEDIA QUERIES ==================================================================== */

@media screen and (max-height: 1024px) {
	body,
	html {
		font-size: 93% !important;
	}
	:root {
		font-size: 93% !important;
	}
}
@media screen and (max-width: 1480px) {
	:root {
		--frame-w: 4.7rem;
	}
}
@media screen and (max-width: 1200px) {
	:root {
		--frame-w: 4rem;
	}
	main {
		margin-top: 4.5rem;
	}
	.navbar-btn,
	.navbar-lang,
	.brxe-social-icons > li {
		scale: 0.91;
	}
}

@media screen and (max-width: 1024px) {
	.dbl-sphere {
		display: none;
	}
	.brxe-social-icons li {
		border: 2px solid white !important;
	}
}

@media screen and (max-width: 820px) {
	:root {
		--frame-w: 2rem;
	}
	#dot-wallis-animated {
		padding-left: 0px !important;
	}
	.navbar-btn,
	.navbar-lang,
	.brxe-social-icons > li {
		scale: 0.85;
	}
	.col-right-menu {
		column-gap: 0px !important;
	}
	.menu-left-col b,
	.menu-right-col b {
		align-items: center;
		text-align: center;
	}
	.big-link-menu {
		font-size: var(--text-3xl);
		text-align: center;
	}
	.menu-wrapper {
		background: url("/wp-content/uploads/2024/07/noise-bg.png") 50% 50%,
			linear-gradient(45deg, #684492 0%, #120925 100%);
	}
}
@media screen and (max-width: 480px) {
	:root {
		--frame-w: 1rem;
	}
	h1 {
		font-size: 3rem;
	}
	h2 {
		font-size: 2.5rem;
	}
	.articles-card-ctn {
		min-width: calc(100% + 2rem);
		margin-left: -1rem;
		margin-top: -1rem;
		margin-bottom: -1rem;
	}
}