:root {
	--blue-light: #20B4E6;
	--blue-dark: #1C438A;
}

/*
--------------------------------------
Header
--------------------------------------
*/

body.single-formation:not(.elementor-editor-active) .navigation-wrapper .menu-link {
	color: #fff;
}

body.single-formation:not(.elementor-editor-active) .main-header__inner {
	background-color: var(--e-global-color-f238735);
}

body.single-formation:not(.elementor-editor-active) .main-header__inner.main-header__inner--is-fixed {
	background-color: transparent;
}

/*
--------------------------------------
Elements
--------------------------------------
*/

/*apprenants*/

.single-training-content-learners-container {
	padding: calc(16px + (24 - 16) * ((100vw - 320px) / (1920 - 320))) 0;
}

.single-training-content-learners-inner {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: 56px;
	padding: 8px 11px;
}

.single-training-content-learners-text {
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	margin-top: 3px;
}

/*
--------------------------------------
Bannière -- Containers
--------------------------------------
*/

.formation__banner {
	background: var(--e-global-color-f238735);
	padding: calc(20px + (32 - 20) * ((100vw - 320px) / (1920 - 320)));
	padding-top: calc(110px + (200 - 110) * ((100vw - 320px) / (1920 - 320)));
}

.formation__banner-inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(20px + (100 - 20) * ((100vw - 320px) / (1920 - 320)));
	border-radius: 32px;
	background: rgba(255, 255, 255, 0.03);
	max-width: 95%;
	padding: calc(20px + (100 - 20) * ((100vw - 320px) / (1920 - 320)));
	margin: auto;
}

/*Overlay global*/

.formation__banner-overlay {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	border-radius: calc(20px + (32 - 20) * ((100vw - 320px) / (1920 - 320)));
	background: url(/wp-content/uploads/2025/11/banner-formation-shapes.png);
	background-repeat: no-repeat;
	background-size: cover;
	pointer-events: none;
	width: 100%;
	height: 100%;
}

/*Breadcrumb*/

.formation__banner-breadcrumb {
	position: absolute;
	top: calc(12px + (24 - 12) * ((100vw - 320px) / (1920 - 320)));
	left: calc(20px + (100 - 20) * ((100vw - 320px) / (1920 - 320)));
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.2;
}

.formation__banner-breadcrumb-link {
	color: inherit;
	text-decoration: none;
}

.formation__banner-breadcrumb-link:hover {
	color: rgba(255, 255, 255, 0.8);
}

.formation__banner-breadcrumb-link--current {
	color: rgba(255, 255, 255, 0.72);
}

.formation__banner-breadcrumb-separator {
	opacity: 0.5;
}

/*
--------------------------------------
Bannière -- Image
--------------------------------------
*/

.formation__banner-media {
	position: relative;
	max-height: 100%;
}

.formation__banner .formation__banner-media img {
	border-radius: calc(10px + (16 - 10) * ((100vw - 320px) / (1920 - 320)));
	object-fit: cover;
	max-height: 100%;
	height: 100%;
	min-height: 400px;
}

/*Overlay image*/

.formation__banner .formation__banner-media-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 16px;
	background: linear-gradient(
			177deg,
			rgba(244, 58, 227, 0) 49.5%,
			rgba(106, 37, 249, 0.5) 73.59%,
			rgba(87, 222, 231, 1) 97.69%
	);
}

/*TOSA*/

.formation__banner-tosa .formation__banner-tosa-img {
	max-width: 250px;
}

.formation__banner-tosa .formation__banner-tosa-text {
	line-height: 1;
	padding-bottom: 5px;
}

.formation__banner-tosa .formation__banner-tosa-text-mention {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
}

/*
--------------------------------------
Bannière -- Content (middle)
--------------------------------------
*/

/*Title*/

.formation__banner-content-title {
	font-size: calc(24px + (48 - 24) * ((100vw - 320px) / (1920 - 320)));
	font-weight: 700;
	color: #fff;
	line-height: calc(29px + (49 - 29) * ((100vw - 320px) / (1920 - 320)));
	letter-spacing: -1.44px;
	margin: 0;
}

/*apprenants*/

.formation__banner .single-training-content-learners-inner {
	background: linear-gradient(132deg, rgba(244, 58, 227, 0.20) 7.74%, rgba(106, 37, 249, 0.20) 53.48%, rgba(87, 222, 231, 0.20) 99.21%);
	color: #fff;
}

/*Subtitle*/

.formation__banner-content-subtitle {
	font-size: 17px;
	font-weight: 400;
	color: #fff;
	line-height: 30px;
}

/*apprenants*/

.formation__banner-content-learners-container {
	padding: calc(16px + (32 - 16) * ((100vw - 320px) / (1920 - 320))) 0;
}

.formation__banner-content-learners-inner {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: 56px;
	background: linear-gradient(132deg, rgba(244, 58, 227, 0.20) 7.74%, rgba(106, 37, 249, 0.20) 53.48%, rgba(87, 222, 231, 0.20) 99.21%);
	padding: 8px 11px;
}

/*Description (list)*/

.formation__banner-content-description-title {
	display: inline-block;
	font-weight: 600;
	font-size: 18px;
	color: #fff;
	padding-bottom: 10px;
}

.formation__banner-content-description-container li {
	display: flex;
	align-items: center;
	gap: .85rem;
	font-size: calc(16px + (18 - 16) * ((100vw - 320px) / (1920 - 320)));
	color: #fff;
	line-height: 1.15;
}

.formation__banner-content-description-container li strong {
	font-weight: 600 !important;
}

.formation__banner-content-description-container li:not(:last-of-type) {
	margin-bottom: 12px;
}

.formation__banner-content-description-container li:before {
	content: url(/wp-content/uploads/2025/11/check-gradient.png);
}

/*
--------------------------------------
Bannière -- Info (right)
--------------------------------------
*/

.formation__banner-info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 16px;
	border: 3px solid var(--e-global-color-4919cc4);
	background: linear-gradient(132deg, rgba(244, 58, 227, 0.20) 7.74%, rgba(106, 37, 249, 0.20) 53.48%, rgba(87, 222, 231, 0.20) 99.21%);
	max-height: 100%;
	padding: calc(20px + (48 - 20) * ((100vw - 320px) / (1920 - 320)));
}

/*price*/

.formation__banner-info .formation__banner-info-price-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.formation__banner-info .formation__banner-info-price-label {
	font-size: 16px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.6);
	text-transform: uppercase;
	line-height: 1;
}

.formation__banner-info .formation__banner-info-price-from {
	color: #fff;
}

.formation__banner-info .formation__banner-info-price-value {
	font-size: calc(20px + (40 - 20) * ((100vw - 320px) / (1920 - 320)));
	font-weight: 700;
	color: #fff;
	line-height: 110%;
	letter-spacing: -1.44px;
}

/*elements*/

.formation__banner-info-elements {
	display: flex;
	flex-direction: column;
	row-gap: 8px;
}

.formation__banner-info-element-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 55px;
	background: rgba(22, 24, 45, 0.30);
	backdrop-filter: blur(15.9px);
	padding: 10px 0;
}

.formation__banner-info-element-text {
	font-size: 13.6px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
	letter-spacing: 0.683px;
	text-transform: uppercase;
	line-height: 1;
}

.formation__banner-info-element {
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	letter-spacing: 0.41px;
	line-height: 1;
}

/*register*/

.formation__banner-register-btn {
	border: 4px solid #FFF;
}

.formation__banner-notation-review__stars {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	background: #fff;
	border-radius: 0 0 16px 16px;
	width: 185px;
	padding: 3px;
	margin: auto;
}

.formation__banner-notation-review__score {
	font-size: 12px;
	font-weight: 600;
	color: var(--e-global-color-f238735);
	text-align: center;
	letter-spacing: 0.24px;
}

/*
--------------------------------------
Timeline
--------------------------------------
*/

.formation-timeline {
	padding: calc(50px + (100 - 50) * ((100vw - 320px) / (1920 - 320))) 0;
}

/*Timeline*/

/* Ligne centrale */

.timeline-line {
	position: absolute;
	left: -10px;
	top: 0;
	width: 4px;
	height: 100%;
	background: #c8ebff;
	overflow: hidden;
}

.timeline-progress {
	width: 100%;
	height: 100%;
	background: #4ac0ff;
	transform-origin: top;
	transform: scaleY(0);
}

/* Point sur la ligne */

.timeline-item:after {
	content: "";
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #ffffff;
	border: 3px solid #7b5cff;
}

.timeline-item:after {
	left: -25px;
}

/*Header*/

.formation-timeline__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: calc(50px + (100 - 50) * ((100vw - 320px) / (1920 - 320)));
}

.formation-timeline__header .single-training-content-learners-inner {
	border: 1px solid #52D0E8;
	background: linear-gradient(90deg, rgba(82, 208, 232, 0.15) 0%, rgba(108, 145, 251, 0.15) 100%);
}

.formation-timeline .formation-timeline__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: calc(30px + (45 - 30) * ((100vw - 320px) / (1920 - 320)));
	font-weight: 700;
	color: var(--e-global-color-primary);
	line-height: 105%;
	letter-spacing: -0.45px;
	text-align: center;
}

.formation-timeline__title-text-gradient {
	background: linear-gradient(90deg, #52D0E8 0%, #6C91FB 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	line-height: 1.15;
}

.formation-timeline__description {
	text-align: center;
	max-width: calc(300px + (700 - 300) * ((100vw - 320px) / (1920 - 320)));
	margin: auto;
}

/*timeline*/

.timeline-wrapper {
	--timeline-h-gap: 120px;
	--timeline-v-gap: calc(10px + (5 - 10) * ((100vw - 320px) / (1920 - 320)));
	min-height: 150vh;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	padding: calc(30px + (100 - 30) * ((100vw - 320px) / (1920 - 320))) 0;
	view-timeline-name: --wrapper-progress;
}

@keyframes fade-in-up {
	from {
		opacity: 0;
		transform: translateY(5px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes progress-bar-fill {
	from { transform: scaleY(0); }
	to   { transform: scaleY(1); }
}

/* Conteneur des items */

.timeline-items {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: var(--timeline-v-gap);
}

/* Item */

.timeline-item {
	position: relative;
	display: grid;
	grid-template-columns: 15% auto;
	justify-content: center;
	border-radius: 8px;
	border: 1px solid  #52D0E8;
	background: linear-gradient(90deg, rgba(82, 208, 232, 0.20) 0%, rgba(108, 145, 251, 0.20) 100%);
	padding: calc(20px + (32 - 20) * ((100vw - 320px) / (1920 - 320)));
}

.timeline-item * {
	grid-column: 1 / -1;
}

.timeline-item .timeline-item__index,
.timeline-item > strong {
	font-size: 24px;
	font-weight: 700;
	line-height: 110%;
}

.timeline-item .timeline-item__index {
	grid-column: 1;
	grid-row: 1;
	background: linear-gradient(90deg, #52D0E8 0%, #6C91FB 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.timeline-item > strong {
	grid-column: 2;
	grid-row: 1;
	color: var(--e-global-color-primary);
}

.timeline-item ul {
	list-style-type: disc;
	padding-bottom: .5em;
}

/* Positionnement Grid */

.timeline-item.left {
	justify-self: start;
}

.timeline-item.right {
	justify-self: end;
}

/* Animation */

.timeline-item.timeline-item--is-shown {
	opacity: 1;
	transform: translateY(0);
}

/* Styles de contenu */

.timeline-wrapper h3 {
	margin-top: 0;
	color: #2b2b2b;
}

.timeline-wrapper ul {
	padding-left: 20px;
	margin: 10px 0 0;
}

/*
--------------------------------------
Grid imgs
--------------------------------------
*/

.formation-grid {
	background: url(/wp-content/uploads/2025/11/bg-before-footer.png) center center no-repeat;
	background-size: cover;
	padding: calc(25px + (45 - 25) * ((100vw - 320px) / (1920 - 320)));
}

.formation-grid .bwa-gallery__grid {
	display: grid;
	grid-template-columns: 1fr;
}

.formation-grid .bwa-gallery .bwa-gallery__inner {
	max-width: 90%;
	margin: auto;
}

.formation-grid .bwa-gallery__title-subtitle-container {
	padding-bottom: calc(25px + (45 - 25) * ((100vw - 320px) / (1920 - 320)));
}

/*title*/

.formation-grid .bwa-gallery__title {
	font-size: calc(30px + (45 - 30) * ((100vw - 320px) / (1920 - 320)));
	font-weight: 700;
	color: #fff;
	letter-spacing: -0.9px;
}

/*subtitle*/

.formation-grid .bwa-gallery__subtitle {
	font-size: 18px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.5);
}

/*
--------------------------------------
Experts
--------------------------------------
*/

section.formation-experts {
	padding: 5em 0;
}

/*title*/

.formation-experts__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 2em;
	margin: 0;
}

.formation-experts__title .formation-experts__title-text {
	font-size: calc(25px + (45 - 25) * ((100vw - 320px) / (1920 - 320)));
	font-weight: 700;
	line-height: 105%;
	letter-spacing: -0.45px;
}

/*list experts*/

.formation-experts__list {
	position: relative;
	display: flex;
	justify-content: center;
	max-width: 90%;
	margin: auto;
}

.formation-experts__list:after {
	position: absolute;
	content: url(/wp-content/uploads/2025/11/stars.png);
	top: -60px;
	right: -75px;
}

.formation-expert {
	position: relative;
	background: rgba(255, 255, 255, 0.10);
	border: 2px dashed #52D0E8;
	border-radius: 8px;
	box-shadow: 0 0 25.15px 0 rgba(230, 244, 248, 0.10);
	backdrop-filter: blur(10.1px);
	padding: 16px;
}

.formation-expert .formation-expert__photo {
	object-fit: contain;
	width: 270px;
	height: 340px;
}

.formation-experts__list .formation-expert__content {
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	pointer-events: none;
	border-radius: 7px;
	background: linear-gradient(
			176deg,
			rgba(255, 255, 255, 0) 60%,
			color-mix(in srgb, var(--blue-light) 70%, transparent) 80%,
			color-mix(in srgb, var(--blue-dark) 95%, transparent) 100%
	);
	width: 100%;
	height: 85%;
	padding-bottom: 0.85em;
}


/*name*/

.formation-expert__name {
	font-size: calc(22px + (32 - 22) * ((100vw - 320px) / (1920 - 320)));
	font-weight: 900;
	color: #fff;
	line-height: 1;
}

/*job*/

.formation-expert__job {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	max-width: 90%;
}

/*link all*/

.formation-expert__link-container.gradient-btn {
	display: flex;
	justify-content: center;
	padding-top: 3em;
}

/*
--------------------------------------
Tout savoir sur cette formation
--------------------------------------
*/

.formation-accordions {
	position: relative;
	overflow: hidden;
	background:
			linear-gradient(0deg, rgba(139, 146, 226, 0.10) 0%, rgba(139, 146, 226, 0.10) 100%);
	padding: calc(100px + (180 - 100) * ((100vw - 320px) / (1920 - 320))) 0;
}

.formation-accordions:before {
	position: absolute;
	content: url(/wp-content/uploads/2025/11/eclair.png);
	top: calc(-160px + (0 - -160) * ((100vw - 320px) / (1920 - 320)));
	right: 0;
}

.formation-accordions:after {
	position: absolute;
	content: url(/wp-content/uploads/2025/11/loupe.png);
	bottom: calc(-260px + (-160 - -260) * ((100vw - 320px) / (1920 - 320)));
	left: 0;
}

.formation-accordions__inner {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/*title*/

.formation-accordions__title-container {
	font-size: calc(30px + (45 - 30) * ((100vw - 320px) / (1920 - 320)));
	font-weight: 700;
	color: var(--e-global-color-primary);
	line-height: 105%;
	letter-spacing: -0.45px;
	padding-bottom: 1em;
}

.formation-accordions__title-container .formation-accordions__title.text-gradient {
	background: linear-gradient(132deg, #F43AE3 0%, #6A25F9 17.48%, #57DEE7 99.21%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/*accordions*/

.formation-accordions__content {
	display: flex;
	gap: calc(10px + (20 - 10) * ((100vw - 320px) / (1920 - 320)));
	align-items: flex-start;
}

/*item*/

.formation-accordions__item {
	background: linear-gradient(180deg, rgba(165, 119, 239, 0.08) 0.02%, rgba(217, 178, 216, 0.08) 39.24%);
	backdrop-filter: blur(50px);
	border-radius: 17px;
	padding: 22px;
}

/*title*/

.formation-accordions__item-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: calc(22px + (26 - 22) * ((100vw - 320px) / (1920 - 320)));
	font-weight: 700;
	color: var(--e-global-color-primary);
	line-height: 115%;
	cursor: pointer;
}

.formation-accordions__item-text {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s ease, opacity 0.3s ease;
	opacity: 0;
}

.formation-accordions__item-text > * {
	overflow: hidden;
}

.formation-accordions__item-text--is-shown {
	grid-template-rows: 1fr;
	opacity: 1;
	margin-top: 15px;
}

.formation-accordions__item-text a {
	font-weight: 600;
	color: #000;
}

/*svg*/

.formation-accordions__svg-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 44px;
	border: 1px solid #A7C3E4;
	background: rgba(117, 160, 187, 0.20);
	backdrop-filter: blur(15px);
}

.formation-accordions__icon--minus,
.formation-accordions__item--is-open .formation-accordions__icon--plus {
	opacity: 0;
	position: absolute;
}

.formation-accordions__item--is-open .formation-accordions__icon--minus {
	opacity: 1;
	position: static;
}

/*content*/

.formation-accordions__item-text strong {
	font-size: 15.6px;
	font-weight: 700;
	line-height: 150%;
	text-transform: uppercase;
	background: linear-gradient(132deg, #F43AE3 7.74%, #6A25F9 53.48%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.formation-accordions__item-text ul {
	list-style-type: disc;
	margin-left: 1.75em;
	margin-bottom: 1.75em;
}

p.access-delay {
	padding-top: 12px;
}

/*
--------------------------------------
Nos autres formations
--------------------------------------
*/

.s-categories {
	background: linear-gradient(135deg, #e9f3ff 0%, #f5f8ff 100%);
	padding: 6em 0;
}

.s-categories__title {
	font-size: calc(25px + (45 - 25) * ((100vw - 320px) / (1920 - 320)));
	font-weight: 700;
	line-height: 105%;
	letter-spacing: -0.45px;
	text-align: center;
}