/* Styles propres au site (effet lampe de poche, menus, accordéons, vidéo, pied de page...). */
	
/*--------------------------------------------------*/
/** General **/
	
	@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
	
	htmm {
		overflow-x: hidden;
	}
	html.scroll-lock {
		overflow: hidden;
	}
	@media (max-width: 767px) {
		body {
			overflow-x: hidden;
		}
	}
	h1, h2, h3, h4, h5, .ct-text-block, * {
		font-family: "Plus Jakarta Sans", serif !important;
	}
	h1 {
		font-size: clamp(46px, 5.5vw, 5.5vw) !important;
	}
	body:not(.oxygen-builder-body) h2 {
		font-size: clamp(35px, 4.8vw, 4.8vw) !important;
	}
	h3 {
		font-size: clamp(28px, 3vw, 3vw) !important;
	}
	@media (max-width: 767px) {
		h3.alt {
			font-size: 35px !important;
		}
	}
	h4 {
		font-size: clamp(18px, 1.5vw, 1.5vw) !important;
		line-height: 1.4;
	}
	h5, .primary-link > div {
		font-size: clamp(14px, 1.5vw, 1.5vw) !important;
	}
	.secondary-link > div {
		font-size: clamp(14px, 1.2vw, 1.2vw) !important;
	}
	.button-link img {
		width: clamp(14px, 1.2vw, 1.2vw) !important;
		height: clamp(14px, 1.2vw, 1.2vw) !important;
		box-sizing: content-box;
	}
	.button-link .accordeon-open img, .button-link .accordeon-close img {
		width: clamp(14px, 1.4vw, 1.4vw) !important;
		height: clamp(14px, 1.4vw, 1.4vw) !important;
		box-sizing: content-box;
	}
	.button-link .icon-link, .button-link .icon-link-hover {
		transition: 500ms;
	}
	.button-link:hover .icon-link, .button-link:hover .icon-link-hover {
		margin-left: 1vw;
	}
	.button-link .icon-link-hover {
		clip-path: circle(0% at 50% 50%);
	}
	.button-link:hover .icon-link-hover, .accordeon-title:hover .button-link .icon-link-hover {
		clip-path: circle(50% at 50% 50%);
	}
	.ct-text-block {
		font-size: clamp(14px, 1.15vw, 1.5vw) !important;
	}
	@media (max-width: 1024px) {
		.button-link {
			padding: 5px 5px 5px 20px !important;
		}
		.button-link:hover .icon-link, .button-link:hover .icon-link-hover {
			margin-left: 10px;
		}
		h3.partenaire {
			font-size: 18px !important;
		}
	}
	.sticky-container::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: transparent;
		transition: background-color 0.5s ease;
	}
	.sticky-container.white-fade::before {
		background-color: #FDFEEF;
	}
	.to-blue.white-fade {
		color: #242cc7 !important;
	}
	.to-blue-line.white-fade {
		border-bottom-color: #242cc7 !important;
	}
	.to-blue-logo {
		opacity: 0;
		transition: 500ms;
	}
	.to-blue-logo.white-fade {
		opacity: 1;
	}
	.cursor-dot.white-fade {
		background-color: #242cc7 !important;
	}
	
/*--------------------------------------------------*/
/** Menu **/	
	
	.menu-link::before {
		content: '';
		display: block;
		background-color: #FDFEEF;
		width: 0px;
		height: 0px;
		border-radius: 100px;
		transition: 500ms;
	}
	.sticky-menu .menu-link::before {
		background-color: #242CC7;
	}
	.menu-link:hover::before, .menu-link.highlighted::before {
		width: 1.2vw;
		height: 1.2vw;
		margin-right: 1vw; 
	}
	@media (max-width: 767px) {
		.menu-link:hover::before, .menu-link.highlighted::before {
			width: 4vw;
			height: 4vw;
			margin-right: 4vw; 
		}
	}
	body:not(.oxygen-builder-body) .sticky-menu-container {
		position: fixed !important;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  		pointer-events: none;
	}
	body:not(.oxygen-builder-body) .sticky-menu-container.visible {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.3s ease, visibility 0s linear 0s;
		pointer-events: auto; 
	}
	
	.sticky-menu .button-link .icon-link, .sticky-menu .button-link .icon-link-hover {
		margin-left: 0vw !important;
		clip-path: circle(50% at 50% 50%) !important;
	}
	.sticky-menu:not(.active) .button-link .icon-link-hover, .sticky-menu.active .button-link .icon-link {
		display: none;
	}
	@media (max-width: 993px) {
		.sticky-menu-container {
			justify-content: flex-end !important;
		}
	}
	
	@media (min-width: 993px) {
		.sticky-menu {
			height: 3.8vw;
		}
		.sticky-menu.active {
			width: 27vw;
			border-radius: 25px !important;
			animation: menu-expend 500ms ease-in-out forwards;
		}
		@keyframes menu-expend {
			0% {
				height: 3.5vw;
			}
			100% {
				height: 21vw;
			}
		}
	}
	@media (max-width: 992px) {
		.sticky-menu {
			height: 44px;
			position: absolute;
			left: 40px;
			z-index: 1;
		}
		.sticky-menu.active {
			width: 40vw;
			border-radius: 20px !important;
			animation: menu-expend-mobile 500ms ease-in-out forwards;
		}
		@keyframes menu-expend-mobile {
			0% {
				height: 50px;
			}
			100% {
				height: 250px;
			}
		}
	}
	@media (max-width: 990px) {
		.sticky-menu {
			height: 50px;
		}
	}
	@media (max-width: 767px) {
		.sticky-menu {
			left: 16px;
		}
		.sticky-menu.active {
			width: calc(100% - 32px);
		}
	}
	.sticky-menu .menu-links-wrapper {
		opacity: 0;
		width: 0;
		pointer-events: none;
	}
	.sticky-menu.active .menu-links-wrapper {
		width: auto;
		pointer-events: auto;
		animation: menu-expend-content 600ms ease-in-out forwards;
	}
	@keyframes menu-expend-content {
		0% {
			opacity: 0;
		}
		80% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	.sticky-menu .button-link:hover .icon-link, .sticky-menu .button-link:hover .icon-link-hover {
		margin-left: 0px;
	}
	@media (max-width: 1024px) {
		.sticky-menu .button-link {
			padding: 5px 20px 5px 5px !important;
		}
	}
	@media (max-width: 992px) {
		.sticky-menu .menu-link > div {
			font-size: 18px !important;
		}
	}
	
	.flashlight-background .sticky-menu {
		bottom: 40px;
	}
	@media (max-width: 767px) {
		.flashlight-background .sticky-menu {
			bottom: 12px;
		}
	}
	.flashlight-background .sticky-menu.active .secondary-link {
		background-color: #fdfeef !important;
	}
	.flashlight-background .sticky-menu.active .secondary-link .ct-text-block {
		color: #242cc7 !important;
	}
	
	.flashlight-content .menu-links-wrapper .menu-link {
		position: relative;
		transform: translatey(0);
		opacity: 1;
		transition: 500ms;
	}
	.flashlight-content .menu-links-wrapper.animate .menu-link:first-child {
		position: relative;
		transform: translatey(8vw);
		opacity: 0;
	}
	.flashlight-content .menu-links-wrapper.animate .menu-link:nth-child(2) {
		position: relative;
		transform: translatey(6vw);
		opacity: 0;
	}
	.flashlight-content .menu-links-wrapper.animate .menu-link:nth-child(3) {
		position: relative;
		transform: translatey(4vw);
		opacity: 0;
	}
	.flashlight-content .menu-links-wrapper.animate .menu-link:nth-child(4) {
		position: relative;
		transform: translatey(2vw);
		opacity: 0;
	}
	.flashlight-content .menu-links-wrapper.animate .menu-link:nth-child(5) {
		position: relative;
		opacity: 0;
	}
	
/*--------------------------------------------------*/
/** Flashlight **/	
	
	body:not(.oxygen-builder-body) .flashlight-background {
		overflow: hidden;
		opacity: 0;
		animation: flashlight-background 1s ease-in-out forwards;
	}
	@keyframes flashlight-background {
		0% {
			opacity: 0;
		}
		20% {
			opacity: 1;
		}
		100% {
			opacity: 1;
		}
	}
	@media (min-width: 1025px) {
		body:not(.oxygen-builder-body) .background-overlay {
			animation: background-overlay 1s ease-in-out forwards;
		}
		@keyframes background-overlay {
			0% {
				opacity: 1;
			}
			70% {
				opacity: 1;
			}
			71% {
				opacity: 0;
			}
			100% {
				opacity: 0;
			}
		}
	}
	@media (min-width: 1121px) {
		body:not(.oxygen-builder-body) .flashlight-overlay {
			animation: flashlight-overlay 1s ease-in-out forwards;
		}
		@keyframes flashlight-overlay {
			0% {
				height: 0;
			}
			20% {
				height: 0;
			}
			70% {
				height: 100%;
			}
			100% {
				height: 100%;
			}
		}
	}
	@media (max-width: 1120px) {
		body:not(.oxygen-builder-body) .flashlight-overlay {
			animation: flashlight-overlay-tablet 1s ease-in-out forwards;
			display: block !important;
		}
		@keyframes flashlight-overlay-tablet {
			0% {
				height: 0;
			}
			20% {
				height: 0;
			}
			70% {
				height: 50%;
			}
			100% {
				height: 50%;
			}
		}
	}
	@media (max-width: 1023px) and (min-width: 767px) {
		body:not(.oxygen-builder-body) .flashlight-overlay {
			animation: flashlight-overlay-mobile 1s ease-in-out forwards;
			display: block !important;
		}
		@keyframes flashlight-overlay-mobile {
			0% {
				height: 0;
			}
			20% {
				height: 0;
			}
			70% {
				height: 40%;
			}
			100% {
				height: 40%;
			}
		}
	}
	body:not(.oxygen-builder-body) .flashlight {
		display: none;
		clip-path: inset(0) !important;
	}
	@media (max-width: 1024px) {
		body:not(.oxygen-builder-body) .flashlight {
			display: none !important;
		}
	}
	body:not(.oxygen-builder-body) .flashlight-content {
		transform: translateY(10%);
		opacity: 0;
		animation: flashlight-content 1s ease-in-out forwards;
	}
	@keyframes flashlight-content {
		0% {
			transform: translateY(10%);
			opacity: 0;
		}
		70% {
			transform: translateY(10%);
			opacity: 0;
		}
		100% {
			transform: translateY(0%);
			opacity: 1;
		}
	}
	@media (min-width: 1025px) {
		.featured-event {
			clip-path: polygon(2% 4%, 98% 4%, 98% 96%, 2% 96%);
			transition: 300ms;
		}
		.featured-event:hover {
			clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
		}
	}
	
/*--------------------------------------------------*/
/** Cursor Dot **/		
	
	.cursor-dot {
		pointer-events: none;
		transition: transform 0.1s ease-out, opacity 0.2s ease-in-out;
	}
	.sticky-container:not(:hover) .cursor-dot {
		opacity: 0;
	}
	@media (max-width: 1024px) {
		.cursor-dot {
			display: none !important;
		}
	}
		
/*--------------------------------------------------*/
/** Accordeon **/		
	
	body:not(.oxygen-builder-body) .accordeon:not(.open) .accordeon-close, 
	body:not(.oxygen-builder-body) .accordeon.open .accordeon-open, 
	body:not(.oxygen-builder-body) .accordeon .accordeon-content {
		display: none;
	}
	body:not(.oxygen-builder-body) .accordeon-title {
		cursor: pointer;
	}
	@media (min-width: 1025px) {
		body:not(.oxygen-builder-body) .accordeon:last-child {
			border-bottom: 1px solid #242CC7;
		}
	}
	@media (max-width: 1024px) {
		body:not(.oxygen-builder-body) .accordeon:not(.open) .accordeon-open.icon-link-hover {
			display: flex !important;
			clip-path: circle(50% at 50% 50%);
			border: 1px solid #242CC7;
		}
		body:not(.oxygen-builder-body) .accordeon.open .accordeon-close.icon-link-hover {
			display: none !important;
		}
		body:not(.oxygen-builder-body) .accordeon.open .accordeon-close.icon-link {
			display: flex !important;
			border: 1px solid #242CC7;
		}
	}
	@media (min-width: 768px) {
		.sticky-image {
			position: sticky;
			top: 0;
		}
	}
		
/*--------------------------------------------------*/
/** Video Popup **/		
	
	.open-video-popup, .close-video-popup {
		cursor: pointer;
	}
	body:not(.oxygen-builder-body) .video-popup {
		display: none;
	}
	body:not(.oxygen-builder-body) .video-popup.open {
		display: flex;
		position: fixed !important;
	}
	
/*--------------------------------------------------*/
/** Lottie (impact) **/		
		
	@media (min-width: 768px) {
		.lottie-impact-container {
			position: sticky;
			top: 0;
		}
		.lottie-sticky-title {
			position: sticky;
			top: 15%;
		}
	}
	.lottie-sticky-title .ct-headline:first-child {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		transform: translatey(0%);
		transition: 500ms;
	}
	.lottie-sticky-title .ct-headline:last-child {
		clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
		transform: translatey(100%);
		transition: 500ms;
	}
	.lottie-sticky-title.switched .ct-headline:first-child {
		clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
		transform: translatey(-100%);
	}
	.lottie-sticky-title.switched .ct-headline:last-child {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		transform: translatey(0%);
	}
	
/*--------------------------------------------------*/
/** Slider **/		
	
	.slider-navigation .button-link {
		cursor: pointer;
	}
	.slider-navigation .button-link > div {
		margin-left: 0 !important;
	}
	@media (max-width: 1024px) {
		.slider-navigation .button-link {
			padding: 0 !important;
		}
	}
	
/*--------------------------------------------------*/
/** Colored overlay (soutenir) **/		
	
	@media (min-width: 1025px) {
		body:not(.oxygen-builder-body) .colored-container .colored-overlay {
			clip-path: inset(0) !important;
			transition: background-color 300ms linear;
		}
		body:not(.oxygen-builder-body) .colored-container:hover .colored-overlay {
			background-color: transparent !important;
		}
		body:not(.oxygen-builder-body) .colored-container .colored-overlay.white {
			background-image: none !important;
		}
		body:not(.oxygen-builder-body) .colored-container .colored-content > h3,
		body:not(.oxygen-builder-body) .colored-container .colored-content > .ct-text-block {
			transition: 300ms;
		}
		body:not(.oxygen-builder-body) .colored-container:hover .colored-content > h3,
		body:not(.oxygen-builder-body) .colored-container:hover .colored-content > .ct-text-block {
			color: #fff !important;
		}
		body:not(.oxygen-builder-body) .colored-container .button-link-hover,
		body:not(.oxygen-builder-body) .colored-container:hover .button-link:not(.button-link-hover) {
			transition: 300ms;
			opacity: 0 !important;
		}
		body:not(.oxygen-builder-body) .colored-container:hover .button-link-hover {
			opacity: 1 !important;
		}
	}
	@media (max-width: 1024px) {
		body:not(.oxygen-builder-body) .colored-container .button-link-hover {
			display: none !important;
		}
	}
	
/*--------------------------------------------------*/
/** Footer **/	
	
	.footer .button-link:hover .icon-link, .footer .button-link:hover .icon-link-hover {
		margin-left: 0 !important;
	}
	@media (max-width: 1024px) {
		.footer .button-link .icon-link-hover {
			display: flex !important;
			clip-path: circle(100% at 50% 50%);
		}
	}