/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */


 #header {
	z-index: 111!important;
}

#main {
	margin-top: -90px!important;
}

/* ==========================================================================
   Menu tablette / mobile (offcanvas Blocksy)
   ========================================================================== */

@media (max-width: 999.98px) {

	/* Panneau : hauteur au contenu, coin bas gauche arrondi */
	#offcanvas[data-behaviour*="side"] .ct-panel-inner {
		--side-panel-width: 76vw;
		inset-block: 0 auto;
		height: auto;
		max-height: 100%;
		background-color: #353531;
		border-radius: 0 0 0 40px;
		box-shadow: none;
	}

	#offcanvas .ct-panel-content {
		justify-content: flex-start;
	}

	#offcanvas .ct-panel-content-inner {
		padding: 65px 28px 40px 40px;
	}

	/* Croix de fermeture : en haut à droite, alignée sur la première ligne */
	#offcanvas .ct-panel-actions {
		position: absolute;
		top: 58px;
		right: 30px;
		padding: 0;
		z-index: 2;
	}

	#offcanvas .ct-toggle-close .ct-icon {
		width: 20px;
		height: 20px;
	}

	/* Liens */
	#offcanvas .mobile-menu li {
		align-items: flex-start;
	}

	#offcanvas .mobile-menu > ul > li + li {
		margin-top: 24px;
	}

	#offcanvas .mobile-menu .ct-menu-link {
		--menu-item-padding: 0;
		font-size: 19px;
		line-height: 1.4;
		letter-spacing: 0.02em;
		color: #FEFFF5;
		white-space: nowrap;
	}

	#offcanvas .mobile-menu .ct-menu-link:hover,
	#offcanvas .mobile-menu .current-menu-item > .ct-menu-link {
		color: #DF0078;
	}

	/* Sous-menu « Nos formations » : même style, sans retrait */
	#offcanvas .mobile-menu .sub-menu {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	#offcanvas .mobile-menu .sub-menu .ct-menu-link::before {
		display: none;
	}

	#offcanvas .mobile-menu .ct-sub-menu-parent {
		column-gap: 8px;
	}

	#offcanvas .mobile-menu .ct-toggle-dropdown-mobile {
		--toggle-button-padding: 4px;
		--theme-icon-color: #FEFFF5;
		color: #FEFFF5;
	}

	#offcanvas .mobile-menu .ct-toggle-dropdown-mobile .ct-icon {
		width: 12px;
		height: 12px;
		fill: currentColor;
	}

	/* Bouton Espace élèves */
	#offcanvas .mobile-menu > ul > li.eglo-btn {
		margin-top: 10px;
	}

	#offcanvas .mobile-menu li.eglo-btn > .ct-menu-link:hover {
		background-color: #B80063;
		color: #FEFFF5;
	}

	#offcanvas .mobile-menu li.eglo-btn svg {
		width: 15px;
		height: auto;
	}
}

@media (min-width: 690px) and (max-width: 999.98px) {

	#offcanvas[data-behaviour*="side"] .ct-panel-inner {
		--side-panel-width: 420px;
	}
}

	/* BTN */

	.eglo-btn a {
		--menu-item-padding: 12px 30px; /* Blocksy pose son propre padding sur les liens du menu */
		--theme-font-weight: 600;
		display: flex!important;
		width: auto;
		height: 40px!important;
		align-items: center;
		gap: 9px;
		margin: 0!important;
		padding: 12px 25px!important;
		border-radius: 100px;
		background-color: #DF0078;
		font-size: 16px;
		line-height: 1.1!important;
		letter-spacing: 0;
		font-weight: 600!important;
		color: #FEFFF5!important;
		transition: background-color 0.5s ease;
		font-family: "Barlow"!important;
	}

	/* Texte blanc au survol : Blocksy passe les liens du menu en rose */
	.eglo-btn a:hover,
	.eglo-btn a:focus {
		background-color: #f37ebf;
		color: #FEFFF5!important;
	}

	/* Header desktop : bouton centré verticalement dans la ligne */
	[data-device="desktop"] .menu > li.eglo-btn {
		align-self: center;
	}

	/* HOME HERO : dégradés haut et bas sur l'image de fond (sous le contenu) */

	.home-hero > .brz-section__content > .brz-bg::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		background:
			linear-gradient(180deg, rgba(20, 20, 4, 1) 0%, rgba(20, 20, 4, 0) 25%),
			linear-gradient(0deg, rgba(20, 20, 4, 1) 0%, rgba(20, 20, 4, 0) 20%);
	}

	/* BADGES AVIS GOOGLE (Trustindex) ; dans le hero, même hauteur que l'image Qualiopi */

	.home-hero .ti-widget {
		--eglo-badge-height: 76px; /* hauteur de l'image Qualiopi en desktop */
	}

	/* Tous les badges Trustindex : alignés à gauche, bords arrondis au maximum */
	.ti-widget .ti-widget-container {
		margin: 0 !important;
		text-align: left !important;
	}

	.ti-widget .ti-header {
		border-radius: 999px !important;
	}

	/* center-google : badge centré dans son bloc (au lieu de l'alignement à gauche ci-dessus) */
	.center-google .ti-widget .ti-widget-container {
		text-align: center !important;
	}

	/* second-review : badge plus compact (padding et logo Google réduits) */
	.second-review .ti-widget.ti-goog .ti-header {
		padding: 10px 20px !important;
	}

	.second-review .ti-widget.ti-goog .ti-header .ti-platform-icon {
		width: 28px !important;
		min-width: 28px !important;
		height: 28px !important;
		margin-right: 8px !important;
	}

	.home-hero .ti-widget .ti-header {
		box-sizing: border-box !important;
		height: var(--eglo-badge-height) !important;
		padding-block: 0 !important;
		padding-inline: calc(var(--eglo-badge-height) * 0.4) !important;
		align-items: center !important;
	}

	/* Tablette : l'image Qualiopi descend à 39px, le badge se compacte */
	@media (min-width: 768px) and (max-width: 991.98px) {
		.home-hero .ti-widget {
			--eglo-badge-height: 39px;
		}

		.home-hero .ti-widget.ti-goog .ti-header .ti-platform-icon {
			width: 20px !important;
			min-width: 20px !important;
			height: 20px !important;
			margin-right: 6px !important;
		}

		.home-hero .ti-widget.ti-goog .ti-header .ti-text,
		.home-hero .ti-widget.ti-goog .ti-header .ti-rating {
			font-size: 11px !important;
			line-height: 1.1 !important;
		}

		.home-hero .ti-widget.ti-goog .ti-header .ti-star {
			width: 10px !important;
			height: 10px !important;
		}
	}

	/* Mobile : colonnes empilées, badge sous l'image */
	@media (max-width: 767.98px) {
		.home-hero .ti-widget {
			--eglo-badge-height: 58px;
		}
	}

	/* HOME HERO : halo sombre derrière le texte (l'image vient du fond de la section) */

	/* Le halo est un ::before plus grand que la colonne : il s'éteint (alpha 0) avant ses bords,
	   donc jamais coupé. isolation garde le halo derrière le texte, mais au-dessus du fond de section. */
	.radius-gradient {
		isolation: isolate;
	}

	.radius-gradient::before {
		content: "";
		position: absolute;
		inset: -220px -180px -120px;
		z-index: -1;
		background: radial-gradient(closest-side, rgba(20, 20, 2, 0.88) 15%, rgba(20, 20, 2, 0) 100%);
		pointer-events: none;
	}

	/* H1 et H2 : mot mis en avant (em) sur une étiquette jaune */

	h1 em,
	h2 em {
		display: inline-block;
		padding: 0.08em 0.3em 0;
		font-style: normal !important;
		color: #442B04 !important;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 252 79' preserveAspectRatio='none'%3E%3Cpath d='M0.245741 35.648C-0.214909 22.4567 -0.445234 15.8611 3.50967 11.6199C7.46457 7.37883 14.0421 7.14914 27.1971 6.68975C69.8255 5.20114 152.665 2.30831 214.326 0.155054C221.61 -0.0992896 225.252 -0.226461 228.393 1.30901C231.535 2.84449 233.676 5.80244 237.96 11.7184L243.612 19.5258C248.959 26.9113 251.633 30.6041 251.782 34.869C251.931 39.134 249.521 43.0042 244.702 50.7447L239.608 58.9275C235.748 65.1278 233.818 68.2279 230.791 69.9788C227.764 71.7297 224.115 71.8571 216.815 72.112L29.7642 78.644C16.573 79.1046 9.97733 79.335 5.73622 75.3801C1.49511 71.4252 1.26478 64.8295 0.804133 51.6382L0.245741 35.648Z' fill='%23FFFB0D'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	}

	/* Brizy pose la couleur en inline sur des span : on la force à l'intérieur du em */
	h1 em *,
	h2 em * {
		font-style: normal !important;
		color: #442B04 !important;
	}

	/* Fond étiquette jaune clair (forme du h1 em, redressée) */

	.yellow-background {
		width: fit-content !important;
		padding: 0.5em 1.4em 0.5em 0.9em !important;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 252 72' preserveAspectRatio='none'%3E%3Cpath d='M10 0H214C221 0 225 0 228.4 1.6C231.6 3.2 233.8 6 238 12L243.6 19.8C249 27.2 251.8 30.8 251.8 36C251.8 41.2 249 44.8 243.6 52.2L238 60C233.8 66 231.6 68.8 228.4 70.4C225 72 221 72 214 72H10C5.3 72 3 72 1.5 70.5C0 69 0 66.7 0 62V10C0 5.3 0 3 1.5 1.5C3 0 5.3 0 10 0Z' fill='%23F6FF86'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	}

	/* CARTES INCLINÉES : right-rotate penche à droite, left-rotate à gauche (fond réglé dans Brizy) */

	.right-rotate,
	.left-rotate {
		--eglo-card-radius: 28px;
		border-radius: var(--eglo-card-radius);
		box-shadow: 0 10px 30px rgba(20, 20, 2, 0.12);
		transform-origin: center;
		height: fit-content !important;
		align-self: flex-start;
	}

	.right-rotate {
		transform: rotate(4deg);
	}

	.left-rotate {
		transform: rotate(-3deg);
	}

	.right-rotate > .brz-bg,
	.left-rotate > .brz-bg {
		border-radius: var(--eglo-card-radius) !important;
		overflow: hidden;
	}

	/* Carrousel des cartes inclinées : le slick-list (overflow hidden) coupait ombres et coins.
	   On lui donne de l'air en haut et en bas, compensé par une marge négative. */
	.brz-carousel:has(.right-rotate, .left-rotate) .slick-list {
		padding-block: 40px !important;
		margin-block: -40px !important;
	}

	/* Desktop : les 4 cartes sont visibles, rien à masquer sur les côtés */
	@media (min-width: 992px) {
		.brz-carousel:has(.right-rotate, .left-rotate) .slick-list,
		.brz-carousel:has(.right-rotate, .left-rotate) .brz-carousel__slider {
			overflow: visible !important;
		}
	}

	/* Tablette / mobile : les cartes suivantes débordent du container jusqu'au bord droit de l'écran.
	   Le carrousel garde sa largeur ; seule la découpe du slick-list est ouverte vers la droite. */
	@media (max-width: 991.98px) {
		.brz-carousel:has(.right-rotate, .left-rotate) .slick-list {
			overflow: visible !important;
		}

		.brz-carousel:has(.right-rotate, .left-rotate) .brz-carousel__slider {
			overflow: visible !important;
			clip-path: inset(-40px -100vw -40px -20px); /* coupe à gauche seulement, avec la marge du coin incliné et de l'ombre */
		}

		/* Les cartes avant la carte courante (dont la copie placée par la boucle slick)
		   débordaient dans la zone visible avec leur inclinaison : on les estompe */
		.brz-carousel:has(.right-rotate, .left-rotate) .slick-slide {
			transition: opacity 0.3s ease;
		}

		.brz-carousel:has(.right-rotate, .left-rotate) .slick-slide:has(~ .slick-current) {
			opacity: 0;
		}
	}

	/* INDICATIONS : étiquettes Voiture / Moto / Deux-roues */

	/* Le bloc Code Brizy (overflow hidden) coupait les coins des étiquettes inclinées */
	.brz-embed-content:has(ul.indications) {
		overflow: visible !important;
	}

	ul.indications {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 10px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	ul.indications li {
		display: inline-block;
		margin: 0;
		padding: 0.25em 0.7em;
		font-family: "Barlow", sans-serif;
		font-size: 34px;
		font-weight: 600;
		line-height: 1.2;
		list-style: none;
		transform: rotate(-3deg);
	}

	ul.indications li::before,
	ul.indications li::marker {
		display: none;
		content: none;
	}

	/* Mobile : les trois étiquettes sur une seule ligne, taille qui suit la largeur d'écran */
	@media (max-width: 767.98px) {
		ul.indications {
			flex-wrap: nowrap;
			gap: 6px;
		}

		ul.indications li {
			flex: 0 0 auto;
			font-size: clamp(14px, 5.1vw, 34px);
			white-space: nowrap;
		}
	}

	ul.indications .voiture {
		background-color: #B80063;
		color: #FFC6F1;
		border-radius: 8px;
	}

	ul.indications .moto {
		background-color: #FFFB0D;
		color: #442B04;
		border-radius: 8px;
	}

	/* H2, H3 ou p dans un bloc .voiture : le em reprend l'étiquette Voiture des indications */
	.voiture h2 em,
	.voiture h3 em,
	.voiture p em {
		display: inline-block !important;
		padding: 0.12em 0.4em;
		font-style: normal !important;
		color: #FFC6F1 !important;
		background: #B80063; /* écrase aussi l'étiquette jaune (SVG) posée sur tous les h2 em */
		border-radius: 8px;
		transform: rotate(-3deg);
	}

	/* Les span Brizy du em gardaient la couleur marron forcée par « h2 em * » */
	.voiture h2 em * {
		color: #FFC6F1 !important;
	}

	/* H3 ou p dans un bloc .moto : le em reprend l'étiquette Moto des indications */
	.moto h3 em,
	.moto p em {
		display: inline-block !important;
		padding: 0.12em 0.4em;
		font-style: normal !important;
		color: #442B04 !important;
		background-color: #FFFB0D;
		border-radius: 8px;
		transform: rotate(-3deg);
	}

	/* absolute-case : étiquette collée en haut à droite de sa colonne (la case) */
	.brz-columns:has(.absolute-case) {
		position: relative;
	}

	.absolute-case {
		position: absolute !important;
		top: 0;
		right: 0;
		z-index: 2;
		width: auto !important;
		margin: 0 !important;
	}

	/* DOUBLE_MARQUE : deux étiquettes dans la même case. Deux-roues en haut,
	   l'autre en dessous, un peu décalée vers la droite */
	.DOUBLE_MARQUE .absolute-case {
		top: 44px;
		right: -24px;
	}

	.DOUBLE_MARQUE .absolute-case:is(.deux-roues, .deux-rous) {
		top: 10px;
		right: 0;
	}

	/* Titres h3 : le u sert de mention secondaire, sans soulignement et en petit
	   (le 2e sélecteur couvre les titres Brizy posés en p à 40px) */
	h3 u,
	.brz-rich-text p[class*="brz-fs-lg-40"] u {
		font-size: 0.55em;
		font-weight: 500;
		text-decoration: none !important;
	}

	/* Forme étiquette pointue à droite (même tracé que le em des h1) */
	ul.indications .deux-roues,
	ul.indications .deux-rous {
		padding: 0.25em 0.95em 0.25em 0.7em; /* même hauteur que les autres, place pour la pointe */
		color: #B80063;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 252 79' preserveAspectRatio='none'%3E%3Cpath d='M0.245741 35.648C-0.214909 22.4567 -0.445234 15.8611 3.50967 11.6199C7.46457 7.37883 14.0421 7.14914 27.1971 6.68975C69.8255 5.20114 152.665 2.30831 214.326 0.155054C221.61 -0.0992896 225.252 -0.226461 228.393 1.30901C231.535 2.84449 233.676 5.80244 237.96 11.7184L243.612 19.5258C248.959 26.9113 251.633 30.6041 251.782 34.869C251.931 39.134 249.521 43.0042 244.702 50.7447L239.608 58.9275C235.748 65.1278 233.818 68.2279 230.791 69.9788C227.764 71.7297 224.115 71.8571 216.815 72.112L29.7642 78.644C16.573 79.1046 9.97733 79.335 5.73622 75.3801C1.49511 71.4252 1.26478 64.8295 0.804133 51.6382L0.245741 35.648Z' fill='%23FFC6F1'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	}

	/* H3 ou p dans un bloc .deux-roues : le em reprend l'étiquette Deux-roues des indications */
	.deux-roues h3 em,
	.deux-roues p em,
	.deux-rous h3 em,
	.deux-rous p em {
		display: inline-block !important;
		padding: 0.12em 0.6em 0.12em 0.4em;
		font-style: normal !important;
		color: #B80063 !important;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 252 79' preserveAspectRatio='none'%3E%3Cpath d='M0.245741 35.648C-0.214909 22.4567 -0.445234 15.8611 3.50967 11.6199C7.46457 7.37883 14.0421 7.14914 27.1971 6.68975C69.8255 5.20114 152.665 2.30831 214.326 0.155054C221.61 -0.0992896 225.252 -0.226461 228.393 1.30901C231.535 2.84449 233.676 5.80244 237.96 11.7184L243.612 19.5258C248.959 26.9113 251.633 30.6041 251.782 34.869C251.931 39.134 249.521 43.0042 244.702 50.7447L239.608 58.9275C235.748 65.1278 233.818 68.2279 230.791 69.9788C227.764 71.7297 224.115 71.8571 216.815 72.112L29.7642 78.644C16.573 79.1046 9.97733 79.335 5.73622 75.3801C1.49511 71.4252 1.26478 64.8295 0.804133 51.6382L0.245741 35.648Z' fill='%23FFC6F1'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
		transform: rotate(-3deg);
	}

	/* p dans un bloc .moto / .voiture / .deux-rous : le span reprend le style des li des indications
	   (les titres h3 de ces blocs ne sont pas touchés) */
	:is(.moto, .voiture, .deux-roues, .deux-rous) p > span {
		display: inline-block !important;
		padding: 0.25em 0.7em;
		font-family: "Barlow", sans-serif !important;
		font-weight: 600 !important;
		line-height: 1.2 !important;
		transform: rotate(-3deg);
	}

	.voiture p > span {
		color: #FFC6F1 !important;
		background-color: #B80063;
		border-radius: 8px;
	}

	.moto p > span {
		color: #442B04 !important;
		background-color: #FFFB0D;
		border-radius: 8px;
	}

	:is(.deux-roues, .deux-rous) p > span {
		padding: 0.25em 0.95em 0.25em 0.7em;
		color: #B80063 !important;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 252 79' preserveAspectRatio='none'%3E%3Cpath d='M0.245741 35.648C-0.214909 22.4567 -0.445234 15.8611 3.50967 11.6199C7.46457 7.37883 14.0421 7.14914 27.1971 6.68975C69.8255 5.20114 152.665 2.30831 214.326 0.155054C221.61 -0.0992896 225.252 -0.226461 228.393 1.30901C231.535 2.84449 233.676 5.80244 237.96 11.7184L243.612 19.5258C248.959 26.9113 251.633 30.6041 251.782 34.869C251.931 39.134 249.521 43.0042 244.702 50.7447L239.608 58.9275C235.748 65.1278 233.818 68.2279 230.791 69.9788C227.764 71.7297 224.115 71.8571 216.815 72.112L29.7642 78.644C16.573 79.1046 9.97733 79.335 5.73622 75.3801C1.49511 71.4252 1.26478 64.8295 0.804133 51.6382L0.245741 35.648Z' fill='%23FFC6F1'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	}

/* AFTER_CASE : carré décoratif en bas à gauche de la section qui contient la colonne AFTER_CASE,
   posé dans le calque de fond de la section (donc derrière les cartes) */

.brz-section__content:has(.AFTER_CASE) > .brz-bg::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 120px;
	width: 300px;
	height: 300px;
	border-radius: 56px;
	opacity: 0.24;
	background: var(--Scondary-900, #980355);
	pointer-events: none;
}

/* AFTER_CASE_2 : même carré que AFTER_CASE, mais en haut à droite de la section */

.brz-section__content:has(.AFTER_CASE_2) > .brz-bg::after {
	content: "";
	position: absolute;
	top: 80px;
	right: 40px;
	width: 300px;
	height: 300px;
	border-radius: 56px;
	opacity: 0.24;
	background: var(--Scondary-900, #980355);
	pointer-events: none;
}

/* AFTER_CASE-3 : même carré, en bas à droite de la section, en jaune
   (AFTER_CASE_3 accepté aussi, pour suivre le nommage des deux autres).
   En ::before et non ::after : la section porte aussi road-left, qui occupe déjà le ::after */

/* Le calque de fond devient un contexte d'empilement : le z-index du carré reste
   à l'intérieur du fond, donc derrière les cartes */
.brz-section__content:has(.AFTER_CASE-3, .AFTER_CASE_3) > .brz-bg {
	isolation: isolate;
}

.brz-section__content:has(.AFTER_CASE-3, .AFTER_CASE_3) > .brz-bg::before {
	content: "";
	position: absolute;
	z-index: 1; /* au-dessus de .brz-bg-color, qui suit le ::before dans le DOM */
	bottom: 14%;
	right: 40px;
	width: 300px;
	height: 140px;
	border-radius: 33px;
	opacity: 0.24;
	background: #FFFB0D;
	pointer-events: none;
}

/* DOUBLE-SVG : feu vert (light-green.svg) en haut à gauche de la section,
   piéton (walk.svg) en bas à droite, posés dans le calque de fond (derrière les cartes).
   Le calque est isolé et les deux images en z-index: 1 : sinon le ::before passe sous .brz-bg-color */

.double-svg > .brz-section__content > .brz-bg {
	isolation: isolate;
}

.double-svg > .brz-section__content > .brz-bg::before,
.double-svg > .brz-section__content > .brz-bg::after {
	content: "";
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

.double-svg > .brz-section__content > .brz-bg::before {
	top: 40px;
	left: 0;
	width: 200px;
	aspect-ratio: 299 / 188;
	background: url("../../uploads/2026/10/light-green.svg") left top / contain no-repeat;
}

.double-svg > .brz-section__content > .brz-bg::after {
	right: 3%;
	bottom: 0;
	width: 171px;
	aspect-ratio: 171 / 370;
	background: url("../../uploads/2026/10/walk.svg") right bottom / contain no-repeat;
}

/* PANNEAU-BEFORE : route + panneaux (ROADS.svg) posés au-dessus de la section.
   La section devient un contexte d'empilement (z-index: 1) : l'image passe au-dessus de la section
   précédente, et son bas glisse sous le fond de la section, quelle que soit la largeur d'écran. */

.panneau-before {
	position: relative !important;
	z-index: 1 !important;
}

.panneau-before::before {
	content: "";
	position: absolute;
	bottom: calc(100% - 60px);
	left: 23%;
	z-index: -1;
	width: 1260px;
	aspect-ratio: 2104 / 438;
	background: url("../../uploads/2026/10/ROADS.svg") left bottom / contain no-repeat;
	pointer-events: none;
}

/* Tablette et mobile : pas de route */
@media (max-width: 991.98px) {
	.panneau-before::before {
		content: none;
	}
}

/* LI-WHITE : puces de liste en blanc (Brizy dessine la puce en ::before, colorée via brz-bcp-color7) */

.li-white li::before,
.li-white li::marker {
	color: #FEFFF5 !important;
}

/* SIMULATION : flèche décorative (arrow.svg) collée au bord droit de l'écran (légèrement sortie),
   centrée en hauteur sur la section qui contient la colonne simulation, au-dessus du contenu */

.brz-section__content:has(.simulation) {
	position: relative;
}

.brz-section__content:has(.simulation)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -80px;
	z-index: 10;
	width: 589px;
	max-width: 45vw;
	aspect-ratio: 589 / 400;
	transform: translateY(-50%);
	background: url("../../uploads/2026/10/arrow.svg") right center / contain no-repeat;
	pointer-events: none;
}

/* SIMULATION-2 : même flèche que SIMULATION, mais collée au bord gauche de l'écran
   et retournée en miroir (pointe vers la droite) */

.brz-section__content:has(.simulation-2) {
	position: relative;
}

.brz-section__content:has(.simulation-2)::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -80px;
	z-index: 10;
	width: 589px;
	max-width: 45vw;
	aspect-ratio: 589 / 400;
	transform: translateY(-50%) scaleX(-1);
	background: url("../../uploads/2026/10/arrow.svg") right center / contain no-repeat;
	pointer-events: none;
}

/* SIMULATION / SIMULATION-2 en mobile : les colonnes s'empilent et l'image passe en bas,
   donc la flèche se cale sur la colonne de l'image (et plus sur la section).
   (100vw - 100%) / 2 = la gouttière entre la colonne et le bord de l'écran. */

@media (max-width: 767.98px) {
	.brz-section__content:has(.simulation)::after,
	.brz-section__content:has(.simulation-2)::after {
		content: none;
	}

	.brz .simulation,
	.brz .simulation-2 {
		position: relative;
	}

	.brz .simulation::after,
	.brz .simulation-2::after {
		content: "";
		position: absolute;
		top: 50%;
		z-index: 10;
		width: 589px;
		max-width: 45vw;
		aspect-ratio: 589 / 400;
		background: url("../../uploads/2026/10/arrow.svg") right center / contain no-repeat;
		pointer-events: none;
	}

	.brz .simulation::after {
		right: calc(-80px - (100vw - 100%) / 2);
		transform: translateY(-50%);
	}

	.brz .simulation-2::after {
		left: calc(-80px - (100vw - 100%) / 2);
		transform: translateY(-50%) scaleX(-1);
	}
}

/* SEAT : image pleine largeur, sort du container et touche les deux bords de l'écran */

.seat {
	width: 100vw !important;
	max-width: none !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

.seat .brz-image,
.seat .brz-picture,
.seat img {
	width: 100% !important;
	max-width: none !important;
}

/* Dégradé #404040 du bas vers transparent en haut, par-dessus l'image */
.seat .brz-picture {
	position: relative;
}

.seat .brz-picture::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, #404040 0%, rgba(64, 64, 64, 0) 100%) !important; /* !important : Brizy pose .brz-picture:after { background-image: none } */
	pointer-events: none;
}

/* RED-LIGHT : feu tricolore (Group-65-1.svg) collé en bas à droite de la section,
   posé dans le calque de fond (derrière les cartes) */

.red-light > .brz-section__content > .brz-bg::after {
	content: "";
	position: absolute;
	right: 3%;
	bottom: 0;
	width: 145px;
	aspect-ratio: 145 / 690;
	background: url("../../uploads/2026/10/Group-65-1.svg") right bottom / contain no-repeat;
	pointer-events: none;
}

/* Mobile : feu tricolore réduit */
@media (max-width: 767.98px) {
	.red-light > .brz-section__content > .brz-bg::after {
		width: 70px;
	}
}

/* STOP : panneau stop (stop.svg) collé en bas à gauche de la section,
   posé dans le calque de fond (derrière les cartes) */

.stop > .brz-section__content > .brz-bg::after {
	content: "";
	position: absolute;
	left: 3%;
	bottom: 0;
	width: 110px;
	aspect-ratio: 170 / 369;
	background: url("../../uploads/2026/10/stop.svg") left bottom / contain no-repeat;
	pointer-events: none;
}

/* PANNEAU : panneau (Group-92.svg) collé en bas à droite de la section,
   posé dans le calque de fond (derrière les cartes) */

.panneau > .brz-section__content > .brz-bg::after {
	content: "";
	position: absolute;
	right: 3%;
	bottom: 0;
	width: 139px;
	aspect-ratio: 139 / 274;
	background: url("../../uploads/2026/10/Group-92.svg") right bottom / contain no-repeat;
	pointer-events: none;
}

/* PANNEAU-2 : panneau flèche (ARROW-panneau.svg) collé en bas à droite de la section,
   posé dans le calque de fond (derrière les cartes) */

.panneau-2 > .brz-section__content > .brz-bg::after {
	content: "";
	position: absolute;
	right: 3%;
	bottom: 0;
	width: 138px;
	aspect-ratio: 138 / 273;
	background: url("../../uploads/2026/10/ARROW-panneau.svg") right bottom / contain no-repeat;
	pointer-events: none;
}

/* ROAD : route (Roads.webp) collée en bas à droite de la section,
   posée dans le calque de fond (derrière les cartes) */

.road > .brz-section__content > .brz-bg::after {
	content: "";
	position: absolute;
	right: -5%;
	bottom: 0;
	width: 640px;
	max-width: 50%;
	aspect-ratio: 1584 / 902;
	background: url("../../uploads/2026/10/Roads.webp") right bottom / contain no-repeat;
	pointer-events: none;
}

/* CIRCLE : panneau rond (circle.svg) collé en bas à droite de la section,
   posé devant le contenu (passe devant l'image) mais sous le header (z-index 111) */

.circle > .brz-section__content {
	position: relative;
}

.circle > .brz-section__content::after {
	content: "";
	position: absolute;
	right: 3%;
	bottom: 0;
	z-index: 100;
	width: 75px;
	aspect-ratio: 139 / 274;
	background: url("../../uploads/2026/10/circle.svg") right bottom / contain no-repeat;
	pointer-events: none;
}

/* Desktop : panneau plus grand */
@media (min-width: 992px) {
	.circle > .brz-section__content::after {
		width: 120px;
	}
}

/* ROAD-2 : route en virage (circle-road.svg) collée en bas à droite de la section,
   posée dans le calque de fond (derrière les cartes) */

.road-2 > .brz-section__content > .brz-bg::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 737px;
	max-width: 50%;
	aspect-ratio: 737 / 351;
	background: url("../../uploads/2026/10/circle-road.svg") right bottom / contain no-repeat;
	pointer-events: none;
}

/* ROAD-LEFT : même route que ROAD, mais collée en bas à gauche et retournée en miroir */

.road-left > .brz-section__content > .brz-bg::after {
	content: "";
	position: absolute;
	left: -5%;
	bottom: 0;
	width: 640px;
	max-width: 50%;
	aspect-ratio: 1584 / 902;
	transform: scaleX(-1);
	background: url("../../uploads/2026/10/Roads.webp") right bottom / contain no-repeat;
	pointer-events: none;
}

/* LAPTOP (992–1440px) : éléments décoratifs réduits d'environ un tiers */
@media (min-width: 992px) and (max-width: 1440px) {
	.double-svg > .brz-section__content > .brz-bg::after { width: 115px; }
	.stop > .brz-section__content > .brz-bg::after { width: 75px; }
	.panneau > .brz-section__content > .brz-bg::after { width: 95px; }
	.circle > .brz-section__content::after { width: 80px; }
}

/* NOS FORMATION */

.sub-title-background span{
	background: #FFF0FA!important;
	border-radius: 8px!important;
	padding: 10px!important;
	display: inline-block!important;
}
/* ACCORDÉON : espace entre les items augmenté de 10px (Brizy : 3px → 13px) */

.brz .brz-accordion > .brz-accordion__item:not(:last-child) {
	margin-bottom: 13px !important;
}

/* FULL-SIZE-BTN : bouton Brizy sur toute la largeur de sa colonne
   (la classe est sur le lien, son conteneur .brz-wrapper-clone doit suivre) */

.brz-wrapper-clone:has(> .full-size-btn) {
	width: 100% !important;
}

.brz .full-size-btn {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: none !important;
	justify-content: center;
}

/* FULL-SIZE : l'élément sort du container et touche les bords gauche et droit de l'écran.
   Les sliders .custom-slider.full-size gardent leur sens propre (slides de même hauteur, plus bas). */

.brz .full-size:not(.custom-slider) {
	flex: 0 0 100vw !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* Dégradés haut et bas #09090B sur l'image de fond, comme le hero de la home */
.brz .full-size:not(.custom-slider) > .brz-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(9, 9, 11, 1) 0%, rgba(9, 9, 11, 0) 25%),
		linear-gradient(0deg, rgba(9, 9, 11, 1) 0%, rgba(9, 9, 11, 0) 20%);
}

/* 100vw inclut la barre de défilement (Windows) : pas de défilement horizontal parasite */
body {
	overflow-x: clip;
}

/* RETURN-TO-LINE : dans le titre, le texte en italique (em) passe à la ligne, en style normal.
   Spécificité > .brz .brz-rich-text em, qui force display: inline */
.brz .return-to-line .brz-rich-text h3 em {
	display: block;
	font-style: normal;
}

/* CUSTOM-LIST : puce flèche rose à la place de la puce Brizy,
   sur les listes .custom-list uniquement */

.custom-list ul {
	margin-left: 0 !important;
	padding-left: 0 !important;
	padding-inline-start: 0 !important;
	list-style: none !important;
}

.custom-list li {
	position: relative;
	padding-left: 18px !important;
	margin-left: 0 !important;
	list-style: none !important;
}

.custom-list li::marker {
	content: none;
}

.custom-list li::before {
	content: "" !important;
	position: absolute;
	top: 0.6em;
	left: 0;
	width: 8px;
	height: 7px;
	margin: 0 !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' viewBox='0 0 8 7' fill='none'%3E%3Cpath d='M7.36889 3.60294C7.7 3.46733 7.70011 2.99846 7.36906 2.86269L0.447388 0.0240711C0.327092 -0.025263 0.188936 0.00247031 0.0969987 0.0944076C0.00285103 0.188555 -0.0237567 0.330885 0.0300209 0.452686L1.07895 2.82843C1.19273 3.08612 1.19254 3.37985 1.07844 3.6374L0.0272176 6.01015C-0.0267512 6.13197 -0.000211867 6.27443 0.0940005 6.36865C0.185858 6.4605 0.32388 6.48824 0.444095 6.43901L7.36889 3.60294Z' fill='%23FF58D0'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* TABLETTE : colonnes .none masquées, colonnes .TABLETTE_SIZE à 50 % pour rester côte à côte */

@media (min-width: 768px) and (max-width: 991.98px) {
	.brz .brz-columns.none {
		display: none !important;
	}

	.brz .brz-columns.TABLETTE_SIZE {
		flex: 0 0 50% !important;
		max-width: 50% !important;
	}
}

/* FORMULAIRE CONTACT (Gravity Forms #1) : champs soulignés sur fond transparent,
   placeholder foncé, case carrée, bouton pilule rose */

#gform_wrapper_1 {
	--eglo-form-ink: rgb(var(--brz-global-color2));
	--eglo-form-pink: rgb(var(--brz-global-color3));
	font-family: "Barlow", sans-serif;
}

#gform_wrapper_1 .gform_fields {
	column-gap: 25px;
	row-gap: 30px;
}

#gform_wrapper_1 .ginput_container :is(input[type="text"], input[type="tel"], input[type="email"], select, textarea) {
	padding: 4px 4px 6px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--eglo-form-ink) !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	box-shadow: none !important;
	font-family: inherit;
	font-size: 17px;
	line-height: 1.4;
	color: var(--eglo-form-ink);
}

#gform_wrapper_1 .ginput_container :is(input, select, textarea):focus {
	outline: none !important;
	border-bottom-color: var(--eglo-form-pink) !important;
}

#gform_wrapper_1 ::placeholder, .gfield_select option {
	color: var(--eglo-form-ink);
	opacity: 1;
	font-size: 16px!important;
}

#gform_wrapper_1 textarea {
	height: 80px !important;
	min-height: 0 !important;
	resize: none;
}

#gform_wrapper_1 select {
	appearance: none;
	padding-right: 24px !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2309090B' stroke-width='1.2'/%3E%3C/svg%3E") right 6px center / 10px no-repeat !important;
}

#gform_wrapper_1 .ginput_container_consent {
	display: flex;
	align-items: center;
	gap: 10px;
}

#gform_wrapper_1 .ginput_container_consent input[type="checkbox"] {
	appearance: none;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1.5px solid var(--eglo-form-ink);
	border-radius: 0;
	background: transparent;
	cursor: pointer;
}

#gform_wrapper_1 .ginput_container_consent input[type="checkbox"]:checked {
	background: var(--eglo-form-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center / 10px no-repeat;
	border-color: var(--eglo-form-pink);
}

#gform_wrapper_1 .ginput_container_consent label {
	margin: 0 !important;
	font-size: 17px;
	color: rgba(9, 9, 11, 0.7);
}

#gform_wrapper_1 .gform_footer {
	margin-top: 20px;
	padding: 0;
}

#gform_wrapper_1 .gform_footer :is(input[type="submit"], button) {
	padding: 10px 26px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--eglo-form-pink) !important;
	font-family: "Barlow", sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: #FEFFF5 !important;
	cursor: pointer;
	transition: background-color 0.5s ease;
}

/* Survol : même rose clair que .eglo-btn */
#gform_wrapper_1 .gform_footer :is(input[type="submit"], button):is(:hover, :focus) {
	background: #f37ebf !important;
	color: #FEFFF5 !important;
}

/* Choix de l'agence : mention « (Nécessaire) » masquée, radios rondes côte à côte */

#gform_wrapper_1 .gfield_required_text {
	display: none;
}

#gform_wrapper_1 .gfield--type-radio .gfield_label {
	margin-bottom: 12px;
	font-size: 17px;
	font-weight: 600;
	color: var(--eglo-form-ink);
}

#gform_wrapper_1 .gfield_radio {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 30px;
	flex-direction: row;
}

#gform_wrapper_1 .gfield_radio .gchoice {
	display: flex;
	align-items: center;
	gap: 10px;
}

#gform_wrapper_1 .gfield_radio input[type="radio"] {
	appearance: none;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1.5px solid var(--eglo-form-ink);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.gform-theme--framework input[type=radio]:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *))::before {
	background-color: var(--eglo-form-pink)!important;
}

#gform_wrapper_1 .gfield_radio input[type="radio"]:checked {
	border-color: var(--eglo-form-pink);
	background: radial-gradient(var(--eglo-form-pink) 0 4px, transparent 4.5px);
}

#gform_wrapper_1 .gfield_radio label {
	margin: 0 !important;
	font-size: 17px;
	color: var(--eglo-form-ink);
	cursor: pointer;
}

/* CONTACT-COORDONNES : adresse, horaires et téléphone sur 3 colonnes dès 1320px
   et en tablette (où formulaire et coordonnées passent l'un sous l'autre) ;
   entre 992 et 1319px la colonne est trop étroite : ils restent empilés ;
   le titre et la carte de la même colonne Brizy restent en pleine largeur.
   Sélecteur à 4 classes : Brizy force flex-direction: column avec 3 classes. */

/* Tablette : formulaire et coordonnées en pleine largeur, l'un sous l'autre */
@media (min-width: 768px) and (max-width: 991.98px) {
	.brz .brz-row:has(> .brz-columns .contact-coordonnes) > .brz-columns {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}

@media (min-width: 768px) and (max-width: 991.98px), (min-width: 1320px) {
	.brz .brz-columns .brz-column__items:has(> .contact-coordonnes) {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		column-gap: 20px;
	}

	.brz .brz-columns .brz-column__items:has(> .contact-coordonnes) > :not(.contact-coordonnes) {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* Adresse 1, horaires 1,4, téléphone à sa largeur naturelle */
	.brz .brz-columns .brz-column__items:has(> .contact-coordonnes) > .contact-coordonnes {
		flex: 1 1 0;
		min-width: 0;
	}

	.brz .brz-columns .brz-column__items > .contact-coordonnes:nth-child(2 of .contact-coordonnes) {
		flex-grow: 1.4;
	}

	.brz .brz-columns .brz-column__items > .contact-coordonnes:nth-child(3 of .contact-coordonnes) {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

/* Plages horaires jamais coupées (« 10:00–12:00 » sur une ligne) */
.contact-coordonnes strong {
	white-space: nowrap;
}

/* Liens des coordonnées (adresse, téléphone) : pas de soulignement, opacité au survol */
.contact-coordonnes a,
.contact-coordonnes a:hover,
.contact-coordonnes a:focus {
	text-decoration: none !important;
}

.contact-coordonnes a {
	transition: opacity 0.3s ease;
}

.contact-coordonnes a:hover,
.contact-coordonnes a:focus-visible {
	opacity: 0.7;
}

/* ==========================================================================
   Sous-menu desktop « Nos formations » (dropdown Blocksy)
   Panneau sombre arrondi, ouverture en fondu + glissement, survol rose
   ========================================================================== */

@media (min-width: 1000px) {

	[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu {
		--dropdown-width: 230px;
		--dropdown-items-spacing: 11px;
		--dropdown-divider: none;
		--theme-border-radius: 20px;
		--theme-box-shadow: 0 18px 40px rgba(20, 20, 2, 0.35);
		padding: 14px 10px;
		background-color: #141402;
		border: 1px solid rgba(254, 255, 245, 0.08);
	}

	/* Ouverture : glisse de 8px vers le bas en apparaissant */
	.ct-header [data-id="menu"] .menu > li > .sub-menu {
		transform: translateY(8px);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	}

	.ct-header [data-id="menu"] .menu > li:hover > .sub-menu,
	.ct-header [data-id="menu"] .menu > li.ct-active > .sub-menu,
	.ct-header [data-id="menu"] .menu > li:focus-within > .sub-menu {
		transform: translateY(0);
	}

	.ct-header [data-id="menu"] .sub-menu .ct-menu-link {
		position: relative;
		padding-inline: 16px 14px;
		border-radius: 12px;
		font-family: "Barlow", sans-serif;
		font-size: 15px;
		letter-spacing: 0.01em;
		color: #FEFFF5;
		transition: background-color 0.2s ease, color 0.2s ease, padding 0.2s ease;
	}

	.ct-header [data-id="menu"] .sub-menu .ct-menu-link:hover,
	.ct-header [data-id="menu"] .sub-menu .ct-menu-link:focus-visible {
		padding-inline-start: 20px;
		background-color: rgba(223, 0, 120, 0.14);
		color: #DF0078;
	}
}

/* Défilement vers les ancres : la cible s'arrête sous le header collant */
html {
	scroll-padding-top: 100px;
}

@media (prefers-reduced-motion: reduce) {
	.ct-header [data-id="menu"] .sub-menu,
	.ct-header [data-id="menu"] .sub-menu .ct-menu-link {
		transition: none;
	}
}

/* ==========================================================================
   Pages légales (classe eglo-page-legale, functions.php) : Mentions légales [olwe_mentions_legales]
   et Déclaration de confidentialité (page sans Brizy, blocs WordPress dans le groupe .eglo-legal-content)
   Titres alignés sur la typo globale Brizy (valeurs de repli pour la page sans Brizy) : h1 = style H1, h2 = style H4 (titres remontés dans functions.php).
   Le header est transparent avec des liens clairs : bandeau sombre sur cette page.
   ========================================================================== */

.eglo-page-legale .ct-header [data-row*="middle"] {
	background-color: #141402;
}

.eglo-page-legale .brz-section__content,
.eglo-page-legale .eglo-legal-content {
	/* 75px sous le header (90px, posé par-dessus le contenu via #main margin-top: -90px) */
	padding-top: calc(var(--header-height, 90px) + 75px) !important;
	padding-bottom: 75px !important;
}

.eglo-page-legale :is(.brz-wp-shortcode, .eglo-legal-content) {
	max-width: 900px !important;
	margin-inline: auto !important;
	font-family: var(--brz-paragraphfontfamily, 'l9UlVLzdYMgH', sans-serif);
	font-size: var(--brz-paragraphfontsize, 16px);
	font-weight: var(--brz-paragraphfontweight, 400);
	line-height: 1.6;
	color: #353531;
}

.eglo-page-legale :is(.brz-wp-shortcode, .eglo-legal-content) h1 {
	margin: 0 0 50px;
	font-family: var(--brz-heading1fontfamily, 'Barlow', sans-serif);
	font-size: var(--brz-heading1fontsize, 60px);
	font-weight: var(--brz-heading1fontweight, 900);
	line-height: var(--brz-heading1lineheight, 1.1);
	letter-spacing: var(--brz-heading1letterspacing, -1.5px);
	text-transform: var(--brz-heading1texttransform, uppercase);
	color: #09090B;
}

.eglo-page-legale :is(.brz-wp-shortcode, .eglo-legal-content) h2 {
	margin: 0 0 18px;
	font-family: var(--brz-heading4fontfamily, 'Barlow', sans-serif);
	font-size: var(--brz-heading4fontsize, 25px);
	font-weight: 600;
	line-height: var(--brz-heading4lineheight, 1.1);
	letter-spacing: var(--brz-heading4letterspacing, -0.5px);
	color: #DF0078;
}

/* Sous-titre dans une rubrique (ex. « Formulaire de contact ») */
.eglo-page-legale :is(.brz-wp-shortcode, .eglo-legal-content) h3 {
	margin: 24px 0 10px;
	font-family: var(--brz-subtitlefontfamily, 'Barlow', sans-serif);
	font-size: var(--brz-subtitlefontsize, 20px);
	font-weight: var(--brz-subtitlefontweight, 600);
	line-height: var(--brz-subtitlelineheight, 1.2);
	color: #09090B;
}

.eglo-page-legale :is(.brz-wp-shortcode, .eglo-legal-content) p,
.eglo-page-legale :is(.brz-wp-shortcode, .eglo-legal-content) ul {
	margin: 0 0 16px;
}

.eglo-page-legale :is(.brz-wp-shortcode, .eglo-legal-content) ul {
	padding-left: 20px;
	list-style: disc;
}

.eglo-page-legale :is(.brz-wp-shortcode, .eglo-legal-content) li + li {
	margin-top: 6px;
}

.eglo-page-legale :is(.brz-wp-shortcode, .eglo-legal-content) li::marker {
	color: #DF0078;
}

.eglo-page-legale :is(.brz-wp-shortcode, .eglo-legal-content) strong {
	font-weight: 700;
	color: #09090B;
}

.eglo-page-legale :is(.brz-wp-shortcode, .eglo-legal-content) a {
	color: #DF0078;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.eglo-page-legale :is(.brz-wp-shortcode, .eglo-legal-content) a:hover {
	color: #B80063;
}

.eglo-page-legale :is(.brz-wp-shortcode, .eglo-legal-content) hr {
	margin: 40px 0;
	border: 0;
	border-top: 1px solid rgba(53, 53, 49, 0.15);
}

/* Tablette (breakpoints Brizy) */
@media (max-width: 991.98px) {

	.eglo-page-legale .brz-section__content,
	.eglo-page-legale .eglo-legal-content {
		padding-top: calc(var(--header-height, 85px) + 60px) !important;
		padding-bottom: 60px !important;
	}

	.eglo-page-legale :is(.brz-wp-shortcode, .eglo-legal-content) h1 {
		margin-bottom: 40px;
		font-size: var(--brz-heading1tabletfontsize, 50px);
		letter-spacing: var(--brz-heading1tabletletterspacing, -1px);
	}

	.eglo-page-legale :is(.brz-wp-shortcode, .eglo-legal-content) h2 {
		font-size: var(--brz-heading4tabletfontsize, 23px);
		line-height: var(--brz-heading4tabletlineheight, 1.2);
		letter-spacing: var(--brz-heading4tabletletterspacing, -0.5px);
	}
}

/* Mobile */
@media (max-width: 767.98px) {

	.eglo-page-legale .brz-section__content {
		padding: calc(var(--header-height, 70px) + 40px) 20px 40px !important;
	}

	.eglo-page-legale .eglo-legal-content {
		padding: calc(var(--header-height, 70px) + 40px) 0 40px !important;
	}

	.eglo-page-legale :is(.brz-wp-shortcode, .eglo-legal-content) {
		line-height: var(--brz-paragraphmobilelineheight, 1.3);
	}

	.eglo-page-legale :is(.brz-wp-shortcode, .eglo-legal-content) h1 {
		margin-bottom: 30px;
		font-size: var(--brz-heading1mobilefontsize, 40px);
		letter-spacing: var(--brz-heading1mobileletterspacing, -1px);
	}

	.eglo-page-legale :is(.brz-wp-shortcode, .eglo-legal-content) h2 {
		font-size: var(--brz-heading4mobilefontsize, 22px);
		letter-spacing: var(--brz-heading4mobileletterspacing, 0px);
	}

	.eglo-page-legale :is(.brz-wp-shortcode, .eglo-legal-content) hr {
		margin: 30px 0;
	}
}

/* ==========================================================================
   Footer (footer.php)
   Desktop ≥ 1000px : 3 colonnes — logo + agences | labellisations | avis + menu
   Tablette 768–999px : agences | labellisations, puis avis + menu sur toute la largeur
   Mobile < 768px : une colonne centrée
   ========================================================================== */

.fw-footer {
	--fw-footer-bg: #404040;
	--fw-footer-card: #575757;
	--fw-footer-text: #FEFFF5;
	--fw-footer-muted: rgba(254, 255, 245, 0.7);
	--fw-footer-accent: #DF0078;
	--fw-footer-dark: #09090B;

	padding: 70px 0 40px;
	background: var(--fw-footer-bg);
	color: var(--fw-footer-text);
	font-family: "Barlow", sans-serif;
}

.fw-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fw-footer p {
	margin: 0;
}

.fw-footer a:not(.fw-footer__btn a) {
	color: inherit;
	transition: color 0.3s ease, opacity 0.3s ease;
}

.fw-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 360px) minmax(0, 1fr) minmax(0, 260px);
	grid-template-areas:
		"logo    .      nav"
		"agences labels nav";
	gap: 20px 30px;
}

/* Le logo et la carte agences deviennent deux cellules de la grille :
   la carte labellisations prend ainsi la même hauteur que la carte agences */
.fw-footer__brand {
	display: contents;
}

/* Cartes */

.fw-footer__card {
	padding: 20px;
	border-radius: 16px;
}

/* Logo + agences */

.fw-footer__logo {
	grid-area: logo;
	align-self: end;
	justify-self: start;
}

.fw-footer__logo img {
	display: block;
	width: 240px;
	height: auto;
}

.fw-footer__agences {
	grid-area: agences;
	display: flex;
	flex-direction: column;
	gap: 20px;
	background: var(--fw-footer-card);
	font-size: 16px;
	line-height: 1.3;
}

.fw-footer__agence-nom {
	margin-bottom: 8px !important;
	font-weight: 600;
}

.fw-footer__agence ul {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fw-footer__agence li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.fw-footer__agence svg {
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	margin-top: 2px;
	fill: none;
	stroke: var(--fw-footer-accent);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fw-footer__agence a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fw-footer__agence li:last-child a {
	text-decoration: none;
}

.fw-footer__agence a:hover {
	color: var(--fw-footer-accent);
}

.fw-footer__agence strong {
	font-weight: 700;
	white-space: nowrap; /* une plage horaire ne se coupe jamais */
}

/* Labellisations */

.fw-footer__labels {
	grid-area: labels;
	padding: 20px 24px;
	background: var(--fw-footer-text);
	color: var(--fw-footer-dark);
}

.fw-footer__labels-titre {
	margin-bottom: 16px !important;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
}

.fw-footer__labels ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	font-size: 16px;
	line-height: 1.3;
}

.fw-footer__labels a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fw-footer__labels a:hover {
	color: var(--fw-footer-accent);
}

/* Avis Google + menu */

.fw-footer__nav {
	grid-area: nav;
	align-self: end;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

/* Avis Google : widget Trustindex (même shortcode que l'accueil) */
.fw-footer__google {
	max-width: 100%;
}

.fw-footer__menu {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2;
}

.fw-footer__menu a {
	text-decoration: none;
}

.fw-footer__menu a:hover {
	color: var(--fw-footer-accent);
}

.fw-footer__sous-menu {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 8px !important;
	font-size: 16px;
	font-weight: 400;
}

/* Spécificité > .fw-footer a:not(.fw-footer__btn a), qui force color: inherit */
.fw-footer .fw-footer__sous-menu li a {
	color: #FFE3F8;
}

.fw-footer .fw-footer__sous-menu li a:hover {
	color: var(--fw-footer-accent);
}

/* Bouton Espace élèves : reprend .eglo-btn du header */
.fw-footer__btn a {
	display: inline-flex !important;
	text-decoration: none;
}

/* Bas de footer */

.fw-footer__bottom {
	margin-top: 40px;
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
}

.fw-footer__bottom a {
	text-decoration: none;
}

.fw-footer__bottom a:hover {
	color: var(--fw-footer-accent);
}

/* Tablette */

@media (max-width: 999.98px) {
	.fw-footer {
		padding: 60px 0 36px;
	}

	.fw-footer__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"logo    logo"
			"agences labels"
			"nav     nav";
		gap: 20px 24px;
	}

	.fw-footer__nav {
		margin-top: 16px;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: start;
		column-gap: 40px;
		row-gap: 20px;
	}

	.fw-footer__nav nav {
		grid-row: span 2;
	}

	/* Nos formations (et ses sous-liens) à gauche, les autres liens empilés à droite */
	.fw-footer__menu {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: start;
		align-content: start;
		gap: 12px 60px;
	}

	.fw-footer__menu > li:first-child {
		grid-row: span 3;
	}
}

/* Mobile */

@media (max-width: 767.98px) {
	.fw-footer {
		padding: 50px 0 30px;
	}

	.fw-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"logo"
			"agences"
			"labels"
			"nav";
		gap: 16px;
	}

	.fw-footer__labels ul {
		flex-direction: column;
		gap: 6px;
	}

	.fw-footer__nav {
		display: flex;
		align-items: center;
		gap: 24px;
		margin-top: 8px;
		text-align: center;
	}

	.fw-footer__menu {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}

	.fw-footer__sous-menu {
		align-items: center;
	}

	.fw-footer__bottom {
		margin-top: 32px;
	}
}

/* Avis Google (Trustindex) : padding réduit dans le footer uniquement (le plugin met 20px) */
.fw-footer__google .ti-widget.ti-goog .ti-header {
	padding: 8px 18px 8px 12px !important;
}


/* AGENCY : bas de l'image découpé en biais avec un coin arrondi à gauche.
   Masque sur le calque de fond : un aplat plein pour le haut + une bande SVG en bas,
   dont la hauteur suit la largeur (ratio 1200 / 200) pour garder le coin bien rond.
   La zone découpée laisse voir le fond sombre de la section, raccord avec la suivante. */

.agency {
	background-color: #141402;
}

.agency > .brz-section__content > .brz-bg {
	--eglo-cut-height: calc(100vw * 200 / 1200);
	-webkit-mask:
		linear-gradient(#000 0 0) top / 100% calc(100% - var(--eglo-cut-height) + 1px) no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V200L105 106Q0 97 0 0Z'/%3E%3C/svg%3E") bottom / 100% var(--eglo-cut-height) no-repeat;
	mask:
		linear-gradient(#000 0 0) top / 100% calc(100% - var(--eglo-cut-height) + 1px) no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V200L105 106Q0 97 0 0Z'/%3E%3C/svg%3E") bottom / 100% var(--eglo-cut-height) no-repeat;
}

/* HOME-HERO : bas de l'image découpé en pente douce, qui monte de gauche à droite,
   coin arrondi en haut à droite puis redescend vers le bord droit (maquette).
   Même principe de masque que AGENCY : aplat plein en haut + bande SVG en bas (ratio 1200 / 60) */

.home-hero > .brz-section__content > .brz-bg {
	--eglo-cut-height: calc(100vw * 60 / 1200);
	-webkit-mask:
		linear-gradient(#000 0 0) top / 100% calc(100% - var(--eglo-cut-height) + 1px) no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V56L1070 10Q1032 0 990 4L0 41Z'/%3E%3C/svg%3E") bottom / 100% var(--eglo-cut-height) no-repeat;
	mask:
		linear-gradient(#000 0 0) top / 100% calc(100% - var(--eglo-cut-height) + 1px) no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V56L1070 10Q1032 0 990 4L0 41Z'/%3E%3C/svg%3E") bottom / 100% var(--eglo-cut-height) no-repeat;
}

/* Le fond de la section suivante remonte sous la découpe (sinon on y voit le fond de la page),
   et passe derrière l'image du hero (z-index -1, contenu dans le conteneur Brizy isolé).
   !important : Brizy force .brz .brz-bg { z-index: auto !important } */
.brz-root__container:has(> .home-hero) {
	isolation: isolate;
}

.brz .home-hero + .brz-section > .brz-section__content > .brz-bg {
	top: calc(-100vw * 60 / 1200);
	height: auto;
	bottom: 0;
	z-index: -1 !important;
}

/* CUSTOM-SLIDER : le carrousel part du bord gauche du container
   et les cartes suivantes débordent jusqu'au bord droit de l'écran.
   Brizy réserve 70px de chaque côté pour les flèches et coupe tout ce qui dépasse :
   on retire ce padding, on laisse la liste déborder et on ne coupe qu'à gauche
   (les marges haut/bas du clip laissent passer les badges et les ombres). */

.brz .custom-slider .brz-carousel__slider {
	padding-left: 0 !important;
	padding-right: 0 !important;
	overflow: visible !important;
}

.brz .custom-slider .slick-list {
	overflow: visible !important;
	clip-path: inset(-60px -100vw -60px 0);
}

/* Slides à la hauteur de leur contenu (Brizy les étire toutes à la plus haute) ;
   un slider .full-size garde des slides toutes à la même hauteur */

.brz .custom-slider:not(.full-size) .slick-track {
	align-items: flex-start !important;
}

.brz .custom-slider:not(.full-size) .slick-slide,
.brz .custom-slider:not(.full-size) .slick-slide > div,
.brz .custom-slider:not(.full-size) .brz-carousel__item,
.brz .custom-slider:not(.full-size) .brz-carousel__item > .brz-columns,
.brz .custom-slider:not(.full-size) .brz-carousel__item > .brz-columns > .brz-column__items {
	height: auto !important;
	min-height: 0 !important;
}

/* BOUTONS BRIZY : un libellé trop long passe à la ligne au lieu de déborder du bloc */

.brz .brz-btn {
	max-width: 100%;
	height: auto !important;
	white-space: normal !important;
	text-align: center;
}

.brz .brz-btn .brz-text__editor {
	white-space: normal !important;
	overflow-wrap: break-word;
}

/* PANNEAU-BEFORE-2 (tablette et mobile) : même route que PANNEAU-BEFORE (ROADS.svg),
   collée en bas à droite de la section, à la taille de l'écran.
   En ::before : la section contient aussi une colonne AFTER_CASE, dont le carré occupe le ::after.
   Le calque de fond est isolé et la route en z-index 1 : sinon le ::before passe sous .brz-bg-color. */

@media (max-width: 991.98px) {
	.panneau-before-2 > .brz-section__content > .brz-bg {
		isolation: isolate;
	}

	.panneau-before-2 > .brz-section__content > .brz-bg::before {
		content: "";
		position: absolute;
		left: 34%; /* le tracé n'occupe que les 66 % gauche du SVG : décalé pour finir au bord droit */
		right: -34%;
		bottom: 0;
		z-index: 1;
		aspect-ratio: 2104 / 438;
		background: url("../../uploads/2026/10/ROADS.svg") center bottom / 100% auto no-repeat;
		pointer-events: none;
	}
}

/* Footer de l'accueil : pas d'espace en haut (toutes tailles d'écran) */
.home .fw-footer {
	padding-top: 0;
}
