/*
	ZERO JANVIER JINGLES	
	— INDEX
		— GENERAL
		— FONTS
		— PRELOAD
		— MENU
			- Menu Button
			- Menu Global
			- Menu Nav
			- Menu Footer
		— HEADER
		— CASE PANEL
			- MENTIONS
		— FOOTER
		— RESPONSIVE
*/

/*
	PRELOAD ////////////////////////////////////////////////////////////////////////////
*/
		
	.preload {
		display: block;
		position: fixed;
		opacity: 0;
		pointer-events: none;
		background-image:   url(ui/play-home-playing.gif),
							url(ui/play-case-playing.gif),
							url(ui/play-case-pause.png),
						    url(ui/case-close.png);
	}

/*
	GENERAL ////////////////////////////////////////////////////////////////////////////
*/

	/* Colors */

		:root {
		  --zjblue: #0185FE;
		  --zjbeige: #F7F8F1;
		}

	body {
		padding: 0;
		margin: 0;
		text-align: left;
		background-color: #F7F8F1;
		min-height: 150vh;
		font-family: "font", Helvetica, Arial, sans-serif;
		font-size: 0;
		color: white;
  		-webkit-font-smoothing: antialiased;
		overflow-x: hidden;
	}

	a {
		text-decoration: none;
		color: inherit;
		text-transform: uppercase;
	}

	.sky {
		display: block;
		position: fixed;
		width: 100vw;
		height: 100vh;
		padding: 0;
		margin: 0;
		background-image: linear-gradient(180deg, #0185FE 22%, #05B1FD 44%, #F7F8F1 70%);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}

	.sky-waves {
		position: fixed;
		width: 100vw;
		height: 100vh;
		padding: 0;
		margin: 0;
		/* background-image: url("ui/sky-waves.jpg"); */
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		transition: opacity .5s ease-in-out;
		inset: 0;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;

	}


		.sky-waves-content {
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  will-change: width, height;
		  pointer-events: none;
		}

		/* Cercle visuel + style personnalisé */
		.cercle {
		  position: absolute;
		  left: 50%;
		  top: 93%;
		  transform: translate(-50%, -50%) scale(1);
		  border-radius: 50%;
		  aspect-ratio: 1 / 1;
		  background: radial-gradient(rgba(107, 208, 255, 0) 0%, rgba(107, 208, 255, 0) 44.12%, rgba(107, 208, 255, 0.3) 63.03%, rgba(255, 255, 255, 1) 71.01%);
		  transform-origin: center;
		  animation-fill-mode: forwards;
		}

		.cercle-dessous { width: 125%; }
		.cercle-milieu  { width: 100%; }
		.cercle-dessus  { width: 75%; }

		/* Reset de base */
		.cercle {
		  transform: translate(-50%, -50%) scale(0);
		  transform-origin: center;
		  animation-fill-mode: forwards;
		  animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
		}

		.offscreen .cercle {
		  animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
		}

		/* Apparition (.sky-waves sans .offscreen) */
		.sky-waves:not(.offscreen) .cercle-dessous {
		  animation: cercle-in 2.5s cubic-bezier(0.83, 0, 0.17, 1) forwards;
		  animation-delay: 0s;
		}
		.sky-waves:not(.offscreen) .cercle-milieu {
		  animation: cercle-in 2.5s cubic-bezier(0.83, 0, 0.17, 1) forwards;
		  animation-delay: .1s;
		}
		.sky-waves:not(.offscreen) .cercle-dessus {
		  animation: cercle-in 2.5s cubic-bezier(0.83, 0, 0.17, 1) forwards;
		  animation-delay: .2s;
		}

		/* Explosion (.sky-waves avec .offscreen) */
		.sky-waves.offscreen .cercle-dessous {
		  animation: cercle-out 2s cubic-bezier(0.83, 0, 0.17, 1) forwards;
		  animation-delay: 0s;
		}
		.sky-waves.offscreen .cercle-milieu {
		  animation: cercle-out 2s cubic-bezier(0.83, 0, 0.17, 1) forwards;
		  animation-delay: 0s;
		}
		.sky-waves.offscreen .cercle-dessus {
		  animation: cercle-out 2s cubic-bezier(0.83, 0, 0.17, 1) forwards;
		  animation-delay: 0s;
		}

		/* Keyframes */

		@keyframes cercle-in {
		  from {
		    transform: translate(-50%, -50%) scale(0);
		    opacity: 0;
		  }
		  to {
		    transform: translate(-50%, -50%) scale(1);
		    opacity: 1;
		  }
		}

		@keyframes cercle-out {
		  from {
		    transform: translate(-50%, -50%) scale(1);
		    opacity: 1;
		  }
		  to {
		    transform: translate(-50%, -50%) scale(4);
		    opacity: 0;
		  }
		}

		.sky-waves-gradient {
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 100%;
		  background-image: linear-gradient(
		    180deg,
		    rgba(159, 222, 246, 0.00) 55%,
		    rgba(159, 222, 246, 0.82) 65%,
		    #D1EDF3 70%,
		    #F7F8F1 75%
		  );
		  pointer-events: none;
		  opacity: 1;
		  transition: opacity 1s ease-in-out;
		}

			.offscreen .sky-waves-gradient {
				opacity: 0;
			}

	.mist {
		display: block;
		position: fixed;
		width: 100vw;
		height: 100vh;
		padding: 0;
		margin: 0;
		background-image: url("ui/mist.png");
		background-size: 100vw 100vh;
		background-repeat: no-repeat;
		background-position: center;
		pointer-events: none;
		bottom: 0;
		left: 0;
		z-index: 2;
		isolation: isolate;
		opacity: 1;
		transition: opacity 0.2s ease-in-out;
	}

		.mist.offscreen {
			opacity: 0;
			transition: opacity 0.2s ease-in-out;
		}

	.mist-landing {
		display: block;
		position: fixed;
		width: 100vw;
		height: 100vh;
		padding: 0;
		margin: 0;
		background-image: url("ui/mist-landing.png");
		background-size: 100vw 100vh;
		background-repeat: no-repeat;
		background-position: center;
		pointer-events: none;
		bottom: 0;
		left: 0;
		z-index: 2;
		isolation: isolate;
		opacity: 1;
		transition: opacity 0.2s ease-in-out;
	}

		.mist-landing.offscreen {
			opacity: 0;
			transition: opacity 0.2s ease-in-out;
		}

	.sky-waves.offscreen { 
		/* opacity: 0; */
	}

	.main {
		display: inline-block;
		position: relative;
		margin: 32px 32px 0 32px;
		width: calc(100vw - 32px - 32px);
		top: 0;
	}

	h1 {
		font-size: 47px;
		letter-spacing: -2.35px;
		line-height: 38px;
		font-weight: 600;
		text-transform: uppercase;
		margin: 0;
	}

	h2 {
		font-size: 12.5px;
		letter-spacing: -0.65px;
		line-height: 12px;
		font-weight: 600;
		text-transform: uppercase;
		margin: 0 0 0 -8px;
		transform: translateY(-2px);
	}

	.h1-block, .h2-block {
		display: inline-block;
		vertical-align: top;
		z-index: 3;
		position: relative;
	}

.col2.offscreen {
		display: inline-block;
		position: relative;
		z-index: 3;
}

	h1.inline, h2.inline {
		display: inline;
	}

	h3 {
		font-size: 29px;
		letter-spacing: -1.45px;
		font-weight: 600;
		text-transform: uppercase;
		line-height: 26px;
		margin: 0;
	}

	.h3-block-surmesure {
		margin-top: 25px;
	}

	h4 {
		display: inline-block;
		vertical-align: middle;
		font-size: 68px;
		letter-spacing: -3.45px;
		font-weight: 600;
		text-transform: uppercase;
		line-height: 52px;
		box-sizing: border-box;
		color: black;
		width: 100%;
	}

	h5, .case-panel h5 {
		display: inline-block;
		font-size: 19px;
		letter-spacing: -0.89px;
		font-weight: 300;
		text-transform: uppercase;
		line-height: 28px;
		box-sizing: border-box;
		color: black;
		width: 100%;
		margin: 0;
	}

	.main .col1, .main .col2, .main .col3 {
		display: inline-block;
		margin: 0;
		width: calc((100vw - 32px - 32px - 32px - 32px) / 3);
	}

	.main .col1 {
		margin-right: 32px;
	}

	.main .col2 {
		margin-right: 32px;
	}

	.main .col3 {
	}

	.section-landing {
		min-height: calc(100vh - 300px);
	}

	.topnav {
		display: inline-block;
		vertical-align: top;
	}

	.topnav li {
		font-size: 29px;
		letter-spacing: -1.45px;
		font-weight: 600;
		text-transform: uppercase;
		list-style: none;
		transition: transform 4s cubic-bezier(0,.97,0,1.01);
		vertical-align: top;
		line-height: 26px;
	}

		.topnav li:hover {
			transform: translateX(5px);
		}

	.topnav li .arrow {
		display: inline-block;
		width: 24px;
		height: 21px;
		background-image: url("ui/arrow.png");
		background-size: cover;
		margin: 0 0 0 5px;
		transition: transform 4s cubic-bezier(0,.97,0,1.01);
	}

		.topnav li:hover .arrow {
			transform: translateX(5px);
		}

	.logobar-home-viewport {
		display: block;
		position: fixed;
		height: 100vh;
		width: 100vw;
		pointer-events: none;
		z-index: 3;
	}

		.logobar-home-wrapper {
			display: block;
			position: absolute;
			width: 100vw;
			bottom: 0;
			text-align: center;
			height: 240px;
		}

			.logobar-home {
				display: inline-block;
				height: 240px;
			}

				.logobar-home .sep {
					display: inline-flex;
					justify-content: center;
					align-items: center;
					width: calc(37px + 1px + 37px);
					height: 240px;
					opacity: 1;
					vertical-align: bottom;
					transition: opacity .5s ease;
					transition-delay: 1s;
				}

					.logobar-home .sep .bar {
						width: 1px;
						height: 32px;
						background-color: var(--zjblue);
					}

					.logobar-home.offscreen .sep {
						pointer-events: none;
						opacity: 0;
						transition: opacity .5s ease;
						transition-delay: 0s;
					}

				.logobar-home .logo {
					display: inline-block;
					width: auto;
					height: 240px;
					pointer-events: auto;
					position: relative;
					cursor: pointer;
					vertical-align: bottom;
					user-select: none;
					-webkit-user-select: none; /* pour Safari */
					-webkit-touch-callout: none; /* empêche le menu contextuel sur iOS */
					transition: transform 1s cubic-bezier(0.83, 0, 0.17, 1),
								opacity 1s cubic-bezier(0.83, 0, 0.17, 1);
				}

					.logobar-home.offscreen .logo {
						opacity: 0;
						transform: translateY(400px);
					}

					.logobar-home .logo.client1 {
						transition-delay: .15s;
					}

					.logobar-home .logo.client2 {
						transition-delay: .25s;
					}

					.logobar-home .logo.client3 {
						transition-delay: .35s;
					}

					.logobar-home .logo.client4 {
						transition-delay: .45s;
					}

					.logobar-home .logo img {
						display: block;
						width: auto;
						height: 240px;
						transition: opacity 0.15s ease-in-out;
						pointer-events: none;
					}

					.logobar-home .img-default {
						opacity: 1;
						z-index: 1;
					}

					.logobar-home .img-hover {
						opacity: 0;
						z-index: 2;
						transform: translateY(-240px);
					}

					.logobar-home .logo:hover .img-hover {
						opacity: 1;
					}

					.logobar-home .logo:hover .img-default {
						opacity: 0;
					}

					.logobar-home .logo .play {
						display: block;
						position: absolute;
						top: 85px;
						width: 100%;
						height: 50px;
						background-image: url("ui/play-home.png");
						background-size: contain;
						background-repeat: no-repeat;
						background-position: center;
						margin: 0;
						opacity: 0;
						transition: all 1s cubic-bezier(0,.97,0,1.01);
					}

					.logobar-home .logo:hover .play {
						opacity: 1;
						transform: translateY(-75px);
					}

					.logobar-home .logo.playing .play {
						background-image: url("ui/play-home-playing.gif");
						transform: translateY(-75px);
						opacity: 1;
					}

	.sep-50 {
		display: block;
		height: 50px;
	}

	.sep-100 {
		display: block;
		height: 100px;
	}

	.sep-temp {
		display: block;
		height: 170px;
	}


	/* SUR MESURE *///

		.section-surmesure .col2 {
			padding-top: 34px;
			opacity: 1;
			transition: opacity .7s ease-in-out;
		}

		.section-surmesure .col2.offscreen {
			padding-top: 34px;
			opacity: 0;
			transition: opacity .3s ease-in-out;
			pointer-events: none;
		}

		.section-surmesure .logo {
			display: inline-block;
			width: calc((100vw - 32px - 32px - 32px - 32px) / 3);
			height: auto;
			pointer-events: none;
			position: relative;
			cursor: pointer;
			vertical-align: top;
			user-select: none;
			-webkit-user-select: none; /* pour Safari */
			-webkit-touch-callout: none; /* empêche le menu contextuel sur iOS */
			transition: transform 1s cubic-bezier(0.83, 0, 0.17, 1),
						opacity 1s cubic-bezier(0.83, 0, 0.17, 1);
			margin-top: 20px;
		}

		.section-surmesure .case-panel .logo {
			margin-top: 0;
		}

			.section-surmesure .logo img {
				display: block;
				width: calc((100vw - 32px - 32px - 32px - 32px) / 3);
				height: auto;
				transition: opacity 0.15s ease-in-out;
				position: absolute;
				transition-delay: .075s;
			}

			.section-surmesure .row1 .logo.offset {
				top: 100px;
			}

			.section-surmesure .img-size {
				opacity: 0;
				position: relative !important;
				pointer-events: none !important;
			}

			.section-surmesure .img-default {
				opacity: 1;
				z-index: 1;
				mix-blend-mode: luminosity;
				top: 0;
				pointer-events: auto !important;
			}

			.section-surmesure .img-hover {
				opacity: 0;
				z-index: 2;
				top: 0;
				pointer-events: auto !important;
			}

			.section-surmesure .logo:hover .img-hover {
				opacity: 1;
			}

			.section-surmesure .logo:hover .img-default {
				opacity: 0;
			}

			.section-surmesure .logo .play {
				display: none;
				position: absolute;
				top: 85px;
				width: calc((100vw - 32px - 32px - 32px - 32px) / 3);
				height: 80px;
				background-image: url("ui/play-3d-lum.png");
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				margin: 0;
				opacity: 0;
				transition: all 1s cubic-bezier(0,.97,0,1.01);
				mix-blend-mode: luminosity;
				left: -10px;
				transition-delay: .075s;
			}

			.section-surmesure .logo:hover .play {
				opacity: 1;
				transform: translateY(-90px);
			}

			.section-surmesure .row1 {
				display: flex;
				flex-wrap: wrap;
				gap: 32px;
				margin-top: -100px;
				padding-bottom: 900px;
			}

			.section-surmesure #surmesure {
				padding-top: 34px;
			}

		.section-surmesure .col2 {
			padding-top: 34px;
		}

	/* MA RADIO *///

		.section-maradio .col2 {
			padding-top: 34px;
		}

		.section-maradio {
			width: 100%;
			margin-top: 10px;
		}

			#maradio {
				padding-top: 34px;
			}

			#maradio h1 {
				opacity: 0;
			}
					
			.section-maradio::before {
				content: "";
				display: block;
				position: absolute;
				width: 100%;
				height: 1px;
				background-color: white;
			}
		
			.section-maradio .col {
				display: inline-block;
				width: calc((100vw - 32px - 32px - 32px - 32px) / 3);
				box-sizing: border-box;
				vertical-align: top;
				padding: 40px 0 0 0;
				margin: 0;
			}

			.section-maradio .col1 {
				margin-right: 32px;
				width: calc(((100vw - 32px - 32px - 16px) / 3) * 2);
			}

				.section-maradio .packs,
				.section-surmesure .packs {
					display: inline-block;
					-webkit-text-stroke: 2px white;
					text-stroke: 2px white;
					font-size: 53px;
					color: transparent;
					letter-spacing: -3.25px;
					text-transform: uppercase;
					font-weight: bold;
					margin: 0 0 0 0 ;
					vertical-align: top;
				}

				.section-maradio .maradio,
				.section-surmesure .maradio {
					display: inline-block;
					font-size: 133px;
					color: white;
					letter-spacing: -8.16px;
					text-transform: uppercase;
					font-weight: bold;
					margin: -10px 0 0 -6px;
					vertical-align: top;
				}

			.section-maradio .pricing .col1,
			.section-maradio .pricing .col2,
			.section-maradio .pricing .col3 {
				width: calc(((100vw - 32px - 32px) / 3) - 22px);
				margin-right: 32px;
				vertical-align: top;
			}
			.section-maradio .pricing .col1 {
				padding-top: 46px;
			}
			.section-maradio .pricing .col2 {
				margin-top: -7px;
			}
			.section-maradio .pricing .col3 {
				margin-right: 0;
			}

				.section-maradio .pricing .col2 p {
					margin-top: 0;
					font-size: 19px;
					color: #FFFFFF;
					letter-spacing: -0.89px;
					line-height: 28px;
					text-transform: uppercase;
					margin-bottom: 7px;
				}

					.section-maradio .pricing .col2 p strong {
						display: block;
						font-size: 26px;
						letter-spacing: -1.3px;
						line-height: 23px;
						margin-bottom: -12px;
					}

				.cols.line::before {
					content: "";
					display: block;
					position: relative;
					width: calc(100%);
					height: 1px;
					background-color: white;
					margin-top: 16px;
					margin-bottom: 7px;
				}

				.section-maradio .votre {
					display: block;
					-webkit-text-stroke: 2px white;
					text-stroke: 2px white;
					font-size: 53px;
					color: transparent;
					letter-spacing: -3.25px;
					line-height: 38px;
					text-transform: uppercase;
					font-weight: bold;
					vertical-align: top;
				}

				.section-maradio .text {
					display: inline-block;
					font-size: 26px;
					color: white;
					letter-spacing: -1.3px;
					line-height: 24px;
					text-transform: uppercase;
					font-weight: bold;
					vertical-align: top;
					margin: 4px 0 8px 0;
				}

				.section-maradio .pricing .col3 li {
					font-size: 29px;
					letter-spacing: -1.45px;
					font-weight: 600;
					text-transform: uppercase;
					list-style: none;
					transition: transform 4s cubic-bezier(0,.97,0,1.01);
					vertical-align: top;
					line-height: 26px;
				}

					.section-maradio .pricing .col3 li:hover {
						transform: translateX(5px);
					}

					.section-maradio .pricing .col3 li .arrow {
						display: inline-block;
						width: 24px;
						height: 21px;
						background-image: url("ui/arrow-mail.png");
						background-size: cover;
						margin: 0 0 0 5px;
						transition: transform 4s cubic-bezier(0,.97,0,1.01);
					}

						.section-maradio .pricing .col3 li:hover .arrow {
							transform: translateX(5px);
						}

				.section-maradio .rows.productgrid {
				  margin-top: 50px;
				}

				.section-maradio .sep {
					display: block;
					width: 100%;
					height: 1px;
					background-color: white;
					margin: 25px 0 35px 0;
				}

					.section-maradio .section {
						width: 100%;
					}
					
				.section-maradio .section::before {
					content: "";
					display: block;
					position: absolute;
					width: calc(100%);
					height: 1px;
					background-color: var(--zjblue);
				}
					
				.section-maradio .section.noline::before {
					background-color: transparent;
				}
					
				.section-logoband {
					margin-top: 150px;
				}
			
				.section-maradio .section .col {
					display: inline-block;
					width: calc(50% - 32px);
					box-sizing: border-box;
					margin: 0 32px 50px 0;
					vertical-align: top;
					padding: 40px 0 0 0;
				}
			
				.section-maradio .section .col p {
					font-size: 26px;
					color: white;
					letter-spacing: -1.21px;
					line-height: 28px;
					color: black;
				}

				.section-maradio h5 {
					color: var(--zjblue);
				}

				.case-panel h5 {
					color: black;
				}

		.gradient-top-maradio {
			display: block;
			position: fixed;
			top:0;
			left: 0;
			width: 100vw;
			height: 200px;
			background-image: linear-gradient(180deg, #0185FE 0%, rgba(1,133,254,0.00) 100%);
			margin: 0;
			z-index: 2;
			transition: opacity .2s ease;
			pointer-events: none;
			opacity: 1;
		}

			.gradient-top-maradio.offscreen {
				opacity: 1;
			}


		.section-maradio .section {
		  max-width: calc(100vw - 32px - 32px);
		  box-sizing: border-box;
		  overflow-x: hidden;
		}

		.section-maradio .produit {
			display: inline-block;
			width: calc((100vw - 32px - 32px - 32px - 32px) / 3);
			height: auto;
			pointer-events: auto;
			position: relative;
			cursor: default;
			vertical-align: top;
			user-select: none;
			-webkit-user-select: none; /* pour Safari */
			-webkit-touch-callout: none; /* empêche le menu contextuel sur iOS */
			transition: transform 1s cubic-bezier(0.83, 0, 0.17, 1),
						opacity 1s cubic-bezier(0.83, 0, 0.17, 1);
		}

			.produit .players {
			  display: flex;
			  flex-wrap: wrap;
			  justify-content: center;
			  margin-top: 20px;
			}

			.section-maradio .row1 .produit.offset {
				top: 50px;
			}

			.section-maradio .produit img {
				display: block;
				width: calc((100vw - 32px - 32px - 32px - 32px) / 3);
				height: auto;
				transition: transform .5s cubic-bezier(0.83, 0, 0.17, 1),
							opacity .5s cubic-bezier(0.83, 0, 0.17, 1);
				position: absolute;
				transform-origin: 25% 50%;
			}

			.section-maradio .img-default {
				opacity: 1;
				z-index: 1;
				top: 0;
			  will-change: transform;
			  position: relative;
			}

			.section-maradio .img-hover {
				opacity: 0;
				z-index: 2;
				top: 0;
			  will-change: transform;
			  position: relative;
			}

			.section-maradio .img-size {
				opacity: 0;
			}

			.section-maradio .produit img.img-size {
				position: relative;
			}

			.section-maradio .produit:hover .img-hover {
				opacity: 1;
				transform: scale(1.05);
			}

			.section-maradio .produit:hover .img-default {
				opacity: 1;
				transform: scale(1.05);
			}

			.produit .players {
			  transform: translateX(-18%) translateY(-70px) scale(.75);
			  width: 100%;
			  transform-origin: center top;
			  margin-bottom: -25%;
			}

			.produit .extrait .bg,
			.produit .extrait .fade {
			  z-index: 0;
			  background-color: var(--zjblue) !important;
			}

			.produit .extrait label {
			  position: relative;
			  z-index: 1;
			}

			.section-maradio .row1 {
				display: flex;
				flex-wrap: wrap;
				gap: 32px;
			}

			.section-maradio .section.noline {
				margin-bottom: 120px;
			}

				.logoband {
				  width: 100vw;
				  height: 80px;
				  margin-top: 42px;
				  margin-left: -32px;
				}

				.logoband-track {
				  display: inline-block;
				  white-space: nowrap;
				  will-change: transform;
				}

				.logoband .logo {
					display: inline-block;
					height: 80px;
					width: auto;
					margin: 0 20px;
					cursor: pointer;
				}

				.logoband {
				  position: absolute;
				  overflow: hidden;
				  white-space: nowrap;
				}

				.logoband-track,
				.logoband .clone {
				  display: inline-block;
				  white-space: nowrap;
				  will-change: transform;
				  position: absolute;
				  top: 0;
				  left: 0;
				}

				.logoband img.logo {
					transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
					will-change: transform, filter;
					user-select: none;
					-webkit-user-select: none; /* pour Safari */
					-webkit-touch-callout: none; /* empêche le menu contextuel sur iOS */
				}

				.logoband img.logo:hover {
					transform: scale(1.05);
					filter: brightness(0.7);
				}


/*
	FONTS ////////////////////////////////////////////////////////////////////////////
*/

	@font-face {
	  font-family: "font";
	  src: url('ui/fonts/font.woff') format('woff');
	  font-weight: normal;
	}

	@font-face {
	  font-family: "font";
	  src: url('ui/fonts/font-medium.woff') format('woff');
	  font-weight: 500;
	}

	@font-face {
	  font-family: "font";
	  src: url('ui/fonts/font-bold.woff') format('woff');
	  font-weight: bold;
	}

	@font-face {
	  font-family: "font";
	  font-style: italic;
	  src: url('ui/fonts/font-italic.woff') format('woff');
	}

/*
	MENU ////////////////////////////////////////////////////////////////////////////
*/

	/* MENU BUTTON */

		#menu-button {
			display: block;
			position: fixed;
			top: 0;
			right: 0;
			width: 64px;
			height: 64px;
			transition: all .15s ease-in-out;
			cursor: pointer;
		}

			#menu-button:hover {
			}

			.burger {
				display: block;
				position: absolute;
				width: 22px;
				height: 3px;
				background-color: white;
				transition: transform 2s cubic-bezier(0,.97,0,1.01);
			}

			.burger.top {
				left: 10px;
				top: 31px;
			}

				#menu-button:hover .burger.top {
					transform: translateX(-6px);
				}

			.burger.bottom {
				left: 10px;  
				top: 41px;
			}

				#menu-button:hover .burger.bottom {
					transform: translateX(-3px);
				}

	/* MENU GLOBAL */

		#menu-panel-container {
			width: 66.66vw;
			height: 100vh;
			margin: 0;
			position: fixed;
		    background-color: white;
		    box-shadow: 50px 0 0 0 white;
		    border-radius: 18px 0 0 18px;
	    }

			#shadow {
				display: block;
				width: 816px;
				height: 100vh;
				position: absolute;
				left: -816px;
				opacity: 0;
				transition: all .3s ease-in-out;
				cursor: default;
			}

				.modal-window.open #shadow {
					opacity: 1;
					transition: all .3s ease-in-out;
				}

			#menu-panel-container:before {
				display: block;
				position: absolute;
				right: -100px;
				height: 100vh;
				width: 100px;
				content: " ";
			    -webkit-backdrop-filter: saturate(180%) blur(30px);
			    backdrop-filter: saturate(180%) blur(30px);
			    background-color:rgba(255, 255, 255, 0.3);
			}
		
			#menu-iframe {
				width: 100%;
				border: none;
				height: 100vh;
				opacity: 1; /* temp  */
			}
		
		.modal-window {
			z-index: 1001;
			opacity: 1;
			pointer-events: none;
			/* Menu Exit */
			transition: all 1s cubic-bezier(0.83, 0, 0.17, 1);
			top: 0px;
			right: -66.66vw;
		}
		
			.modal-window.open {
				opacity: 1;
				pointer-events: auto;
				/* Menu Entrance */
				transition: all 1s cubic-bezier(0.83, 0, 0.17, 1);
				right: 0px;
			}
			
				.modal-window.open::after {
					display: block;
					position: absolute;
					content: "";
					background: transparent;
					pointer-events: none;
					opacity: 1;
					height: 100vh;
					width: 100%;
					right: 0;
					box-shadow: -88px 99px 100px 0 rgba(0,0,0,.25);
				}

			.modal-close {
				display: block;
				position: absolute;
				right: 0px;
				left: unset;
				top: 0px;
				width: 64px;
				height: 64px;
				cursor: pointer;
				background-image: url("ui/case-close.png");
				background-size: 64px;
				background-repeat: no-repeat;
				transition: all .15s ease-in-out;
			}
		
				.modal-close:hover {
					background-image: url("ui/case-close-h.png");
					background-size: 64px;
					background-repeat: no-repeat;
				}

		.menu-panel-container {
		  display: flex;
		  flex-direction: column;
		  height: 100%;
		}

		#menu-panel-main {
			height: 100%;
			width: 100%;
		}

		.menu-body {
			font-family: "font", Helvetica, Arial, sans-serif;
			color: black;
			padding: 41px 32px 35px 35px;
			background-color: transparent !important;
			width: 100%;
			box-sizing: border-box;
			margin: 0;
			text-align: left;
			/* display: inline-block; */
			  display: flex;
			  flex-direction: column;
			  flex-grow: 1;
			  height: 100vh;
			  overflow-y: auto;
		}

	/* MENU NAV */

		.menu-pusher {
			height: 15vh;
		}
			
		.menunav {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.menunav li {
			list-style: none;
			position: relative;
			display: block;
			overflow: hidden;
			text-align: left;
		  display: flex;
		  align-items: center;
		  justify-content: flex-start;
		}

		.menunav li a,
		.menunav-a {
			font-weight: bold;
			font-size: 71px; 
			color: white;
			-webkit-text-stroke: 2px var(--zjblue);
			letter-spacing: -2.78px;
			font-family: "font", Helvetica, Arial, sans-serif;
			cursor: pointer;
		}

		.text-stack {
		  position: relative;
		  display: inline-block;
			line-height: 0.8;
			margin: 0 0 -4px 0;
		}

			.text-stack span {
			display: block;
			white-space: normal;
			font-weight: bold;
			font-size: 70px;
			letter-spacing: -2.7px;
			text-transform: uppercase;
			line-height: 0.8;
			padding-top: 0.25em;
			margin-bottom: 0.1em;
			}

		/* Apparition des textes outline et bleu (animation vers le haut) */

			.text-outline.animate-in,
			.text-fill.animate-in {
			  transform: translateY(0);
			  transition: all 0.8s cubic-bezier(0.83, 0, 0.17, 1);
			}

		/* Texte 1 blanc avec outline bleu — rideau */

			.text-outline {
			  display: block;
			  position: absolute;
			  top: 0;
			  left: 0;
			  color: white;
			  -webkit-text-stroke: 2px var(--zjblue);
			  z-index: 2;
			  transform: translateY(100%);
			  transition: all 0.5s ease-in-out;
			  pointer-events: none;
			  clip-path: inset(0 0 0 0); /* visible par défaut */
			}

			a:hover .text-outline,
			menunav-a:hover .text-outline {
			  clip-path: inset(0 0 100% 0); /* masque à partir du bas */
			}

			a:not(:hover) .text-outline,
			menunav-a:not(:hover) .text-outline {
			  clip-path: inset(0 0 0 0); /* reset */
			}

		/* Texte 2 bleu dessous */

			.text-fill {
			  position: absolute;
			  top: 0;
			  left: 0;
			  color: var(--zjblue);
			  -webkit-text-stroke: 2px transparent;
			  z-index: 1;
			  transform: translateY(100%);
			  transition: all 0.5s ease-in-out;
			  pointer-events: none;
			  height: 82%;
			}

		/* Texte 3 tout en-dessous pour empiètement */

			.text-invisible {
			  visibility: hidden;
			  pointer-events: none;
			  height: auto;
			  width: 100%;
			}

	/* MENU FOOTER */

			.menu-footer {
			  display: flex;
			  justify-content: space-between;
			  align-items: flex-end;
			  padding: 0;
			  width: 100%;
			  box-sizing: border-box;
			}

				/* ICÔNES RS */

					.menu-footer-left {
					}

						.menu-footer-left a,
						.menu-footer-right a, {
						  pointer-events: auto !important;
						  display: inline-block !important;
						  opacity: 1 !important;
						}

						.icon-hover {
						  position: relative;
						  height: 32px;
						  width: auto;
						  min-width: 32px;
						  display: inline-block;
						  overflow: hidden;
						  margin-right: 20px;
						}

							.icon-hover .img-wrap {
							  display: block;
							  height: 32px;
							  overflow: hidden;
							  position: relative;
							}

							.icon-hover img {
							  display: block;
							  height: 32px;
							  width: auto;
							}

							.icon-hover .img-wrap-default,
							.icon-hover .img-wrap-hover {
							  display: block;
							  height: 32px;
							  width: auto;
							  overflow: hidden;
							  position: absolute;
							  top: 0;
							  left: 0;
							}

							.icon-hover .img-wrap-hover {
							  z-index: 0;
							}

							.icon-hover .img-wrap-default {
							  z-index: 1;
							  background: white;
							  transition: height 0.6s cubic-bezier(0.83, 0, 0.17, 1);
							}

								.icon-hover:hover .img-wrap-default {
								  height: 0;
								}

							.img-wrap-default {
							  display: block;
							  height: 32px;
							  overflow: hidden;
							  position: relative;
							  background-color: white;
							  transition: height 0.4s cubic-bezier(0.83, 0, 0.17, 1);
							}

								.img-wrap:hover .img-wrap-default {
								  height: 0;
								}



				/* LIENS LEGAUX */

					.menu-footer-right,
					.main-footer {
					  font-size: 10px;
					  font-weight: bold;
					  color: var(--zjblue);
					  text-align: right;
					}

						.menu-footer-right .copyright,
						.main-footer .copyright {
						  display: inline-block;
						  font-weight: normal;
						  margin-bottom: 5px;
						}

						.menu-footer-right .sep,
						.main-footer .sep {
						  margin: 0 6px;
						}



/*
	HEADER ////////////////////////////////////////////////////////////////////////////
*/

	banner {
		position: fixed;
		mix-blend-mode: lighten;
		z-index: 3;
	}

	banner .logo {
		display: inline-block;
		position: fixed;
		width: 362px;
		height: 74px;
		background-image: url("ui/logo.png");
		background-size: contain;
		background-repeat: no-repeat;
		text-align: center;
		margin: 0;
		max-width: 80vw;
	}

	.gradient-top {
		display: block;
		position: fixed;
		top:0;
		left: 0;
		width: 100vw;
		height: 100px;
		background-image: linear-gradient(180deg, #0185FE 0%, rgba(1,133,254,0.00) 100%);
		margin: 0;
	}

/*
	CASE PANEL ////////////////////////////////////////////////////////////////////////////
*/

	/* Case Panel Layout */
	
		.case-panel {
		    box-shadow: 50px 0 0 0 white;
		    border-radius: 18px 0 0 18px;
			position: fixed;
			top: 0;
			right: 0;
			width: 66.66vw;
			height: 100vh;
			background-color: white;
			opacity: 0;
			transform: translateX(100%);
			z-index: 10;
			overflow: visible !important;
			pointer-events: none;
			box-sizing: border-box;
			/* Exit: smooth easing, exponential opacity */
				transition: opacity 4s cubic-bezier(0.7, 0, 0.84, 0), transform .75s cubic-bezier(0.83, 0, 0.17, 1);
		}
		
			.case-panel.open {
				opacity: 1;
				pointer-events: auto;
				transform: translateY(0);
				/* Entrance: groovy bounce */
					/* transition: opacity 0s linear, transform .4s cubic-bezier(0, 1, 0, 1.02); */
				/* Entrance: smooth easing */
				transition: opacity 0s linear, transform .75s cubic-bezier(0.83, 0, 0.17, 1);
			}

			.case-shadow {
				display: block;
				position: absolute;
				width: 33.33vw;
				height: 100vh;
				left: -33.33vw;
				opacity: 0;
				transition: all .3s ease-in-out;
				cursor: default;
			}

			.case-content {
				border: none;
				top: 0px;
				width: 66.66vw;
				position: relative;
				height: 100%;
				overflow-y: scroll;
				overflow-x: hidden;
				box-sizing: border-box;
				padding: 32px 12px 100px 44px;
			}
	
				.case-panel .logo {
					opacity: 1;
					transform: translateX(100px);
					position: absolute;
					left: 0px;
					top: 0px;
					width: 50%;
					height: 400px;
					background-size: contain;
					background-repeat: no-repeat;
					transition: transform .75s cubic-bezier(0.83, 0, 0.17, 1);
					z-index: 11;
					pointer-events: none;
					will-change: transform;
				}
			
					.case-panel.open .logo {
						opacity: 1;
						transform: translateX(-44px);
					}

				.case-panel .logo-size {
					display: inline-block;
					height: calc(400px - 32px);
					width: calc(50% - 32px);
					box-sizing: border-box;
					margin-right: 32px;
				}

				.case-title-wrapper {
					display: inline-block;
					height: calc(400px - 32px);
					box-sizing: border-box;
					width: calc(50% - 32px);
					vertical-align: top;
					margin-right: 32px;
				}

					.case-title-inner {
						display: flex;
						justify-content: center;
						flex-direction: column;
						height: 100%;
					}

				.test {
					width: 100%;
					background-color: blue;
					height:50px;
				}
				
				.case-panel .section {
					width: 100%;
				}
				
					.case-panel .section::before {
						content: "";
						display: block;
						position: absolute;
						width: calc(100% - 44px - 32px - 12px);
						height: 1px;
						background-color: black;
					}
				
					.case-panel .col {
						display: inline-block;
						width: calc(50% - 32px);
						box-sizing: border-box;
						margin: 0 32px 50px 0;
						vertical-align: top;
						padding: 40px 0 0 0;
					}
				
					.case-panel .col p {
						font-size: 26px;
						color: black;
						letter-spacing: -1.21px;
						line-height: 28px;
						margin-top: 2px;
					}

					.extrait {
						display: inline-block;
						position: relative;
						height: 48px;
						margin: 0 8px 8px 0;
						border-radius: 100px;
						padding: 0px 19px 0px 1px;
						cursor: pointer;
						text-overflow: ellipsis;
						  vertical-align: middle;
					}

						.extrait .bg {
							position: absolute;
							width: 100%;
							height: 100%;
							border-radius: 100px;
							height: 48px;
							border-radius: 100px;
							transition: transform .15s ease;
							transform: scaleX(1) scaleY(1);
							transform-origin: center;
							z-index: -1;
						}

							.extrait:hover .bg,
							.extrait:hover .fade {
								transform: scaleX(1.02) scaleY(1.04);
							}

							.extrait.playing .bg {
							}

								.extrait.playing .bg::before {
								  content: "";
								  position: absolute;
								  top: 0;
								  left: 8px;
								  width: calc(100% - 16px);
								  height: 100%;
								  background-image: url(ui/play-case-playing.gif);
								  background-repeat: repeat-x;
								  background-position: left center;
								  background-size: auto 30px;
								  pointer-events: none;
								  z-index: 1;
								}

					.extrait .fade {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						border-radius: 100px;
						transition: transform .15s ease;
						background-color: green;
						-webkit-mask-image: url(ui/extrait-fade-1.png), url(ui/extrait-fade-2.png);
						mask-image: url(ui/extrait-fade-1.png), url(ui/extrait-fade-2.png);
						-webkit-mask-repeat: no-repeat;
						-webkit-mask-position: top left, top right;
						-webkit-mask-size: auto 48px, auto 48px;
						mask-repeat: no-repeat, no-repeat;
						mask-position: top left, top right;
						mask-size: auto 48px, auto 48px;
						z-index: -1;
					}

					.extrait label {
						display: inline-block;
						height: 100%;
						font-size: 26px;
						color: white;
						text-transform: uppercase;
						letter-spacing: -1.21px;
						font-weight: 500;
						pointer-events: none;
						transition: opacity .15s ease;
						opacity: 1;
						margin: 7px 0 0 48px;
						pointer-events: none;
						overflow: hidden;
						text-overflow: ellipsis;
					  white-space: nowrap;
					  max-width: calc(66vw - 44px - 44px - 51px - 14px - 16px - 2px);
					  vertical-align: middle;
					}

					.extrait .play {
						display: inline-block;
						position: absolute;
						width: 48px;
						height: 48px;
						background-image: url(ui/play-case.png);
						background-size: 48px;
					  	transition: background-image .15s ease;
					}

					.extrait.playing .play {
						background-image: url(ui/play-case-pause.png);
					}

					.extrait.playing label {
						opacity: 0;
					}

			.case-close {
			  position: fixed;
			  right: 0px;
			  top: 0px;
			  width: 64px;
			  height: 64px;
			  background-image: url("ui/case-close.png") no-repeat;
			  background-size: cover;
			  border: none;   /* pour masquer l'apparence bouton natif */
		  	  transition: background .15s ease;
			  cursor: pointer;
		      pointer-events: auto;
			}

				.case-close:hover {
				  background-image: url("ui/case-close-h.png") no-repeat;
				}

			.global-close {
			  position: fixed;
			  right: 0px;
			  top: 0px;
			  width: 64px;
			  height: 64px;
			  background: url("ui/case-close.png") no-repeat center;
			  background-size: cover;
			  border: none;
			  cursor: pointer;
			  pointer-events: none;
			  /* masqué par défaut */
			  display: none;
			  opacity: 0;
			  transition: opacity 0.3s ease-in-out, background .15s cubic-bezier(0, 1, 0, 1.02);;
			  z-index: 2000; /* au-dessus des panels */
			}

			/* classe qu’on ajoute pour faire fade in/out */
			.global-close.show {
			  display: block;
			  opacity: 1;
			  pointer-events: auto;
			}
			.global-close:hover {
			  background: url("ui/case-close-h.png") no-repeat center;
			  background-size: cover;
			}

	/* General Text Wrapper (prevents inline issues) */
	
		.text-wrapper {
			display: inline-block;
			background: transparent;
			width: 70vw;
			max-width: 800px;
			margin-bottom: 50px;
		}

	/* Title & description */
	
		.page-surtitre {
			text-transform: uppercase;
			font-weight: 500;
			font-size: 12px;
			letter-spacing: 0.9px;
			width: 100%;
			display: block;
			margin-bottom: 8px;
		}

		.page-titre {
			color: black;
			font-weight: 600;
			font-size: 32px;
			width: 100%;
			display: block;
			margin-bottom: 15px;
			font-family: "title";
		}
		
		.page-desc {
			color: black;
			font-weight: 400;
			font-size: 16px;
			width: 100%;
			display: block;
			margin-bottom: 20px;
		}
		
			.page-desc a {
				color: black;
				display: inline-block;
				font-weight: 800;
				box-shadow: 0 .5px 0 0 black;
				transition: all .15s
			}
			
				.page-desc a:hover {
					box-shadow: 0 2px 0 0 black;
				}

	/* Case Buttons */
					
			.page-button {
				color: white;
				font-weight: 400;
				font-size: 16px;
				min-width: 200px;
				max-width: 300px;
				height: 40px;
				border-radius: 60px;
				display: inline-block;
				margin-bottom: 10px;
				background: black;
				line-height: normal;
				margin-top: 20px;
				box-sizing: border-box;
							transition: all .1s ease-in-out;
				box-shadow: 0 0 0 0 rgba(0,0,0,1);
				padding: 5px 20px 5px 12px;
			}
					
				.page-button:hover {
					background: #242424;
					box-shadow: 0 0 0 0 rgba(0,0,0,1);
				}
					
				.page-button:active {
					background: black;
					box-shadow: 0 0 0 0 rgba(0,0,0,1);
				}
				
				.down-icon {
					display: inline-block;
					position: relative;
					top: 4px;
					width: 20px;
					height: 20px;
					background: url("ui/down.png") no-repeat;
					background-size: 20px;
				}

	/* Contact */

		#contact .case-content .section.noline::before {
		  height: 0 !important;
		  content: "" !important;
		}

		#contact .col.nopadding {
		  padding: 0 !important;
		}

			#contact .col.names p {
			  margin-bottom: -6px !important;
			}

			h5.histoire {
			  margin-bottom: -15px !important;
			}

		#contact .col.img {
			width: calc(100% - 32px);
		}

	/* Mentions */

		#mentions-legales a {
			text-transform: none;
		}

		#mentions-legales .logo-size {
			display: none;
		}

		#mentions-legales h3 {
			color: black;
			margin-bottom: 25px;
		}

		#mentions-legales h4 {
			font-size: 47px;
			letter-spacing: -2.35px;
			line-height: 38px;
			margin-top: 9px;
		}

		#mentions-legales .case-title-inner {
			height: auto;
		}

		#mentions-legales .case-title-wrapper {
			height: auto;
			width: auto;
		}

		#mentions-legales .col {
			width: calc(100% - 32px);
		}

		#mentions-legales h3:not(:first-of-type)::before {
		  content: "";
		  display: block;
		  height: 1px;
		  background-color: black;
		  margin: 63px 0 51px;
		}

	/* Confidentialité */

		#confidentialite a {
			text-transform: none;
		}

		#confidentialite .logo-size {
			display: none;
		}

		#confidentialite h3 {
			color: black;
			margin-bottom: 25px;
		}

		#confidentialite h4 {
			font-size: 47px;
			letter-spacing: -2.35px;
			line-height: 38px;
			margin-top: 9px;
		}

		#confidentialite .case-title-inner {
			height: auto;
		}

		#confidentialite .case-title-wrapper {
			height: auto;
			width: auto;
		}

		#confidentialite .col {
			width: calc(100% - 32px);
		}

		#confidentialite h3:not(:first-of-type)::before {
		  content: "";
		  display: block;
		  height: 1px;
		  background-color: black;
		  margin: 63px 0 51px;
		}

		#confidentialite li {
			font-size: 26px;
			color: black;
			letter-spacing: -1.21px;
			line-height: 28px;
			margin-top: 2px;
		}

			/* Popup Matomo */

				#optout-popup {
					opacity: 0;
					pointer-events: none;
		  			transition: opacity 0.3s ease-in-out;
				  position: fixed !important;
				  top: 0;
				  left: 0;
				  z-index: 999999 !important;
				}

					#c-popup {
					  animation: none; /* Par défaut, l'animation est désactivée */
					}

				input[onclick="window.MatomoConsent.consentRevoked();showContent(false);"] {
					display: block;
					width: 18px;
					height: 18px;
					margin-left: calc(50% - 9px);
					margin-bottom: 9px;
					margin-top: 22px;
				}

				input[onclick="window.MatomoConsent.consentGiven();showContent(true);"] {
					display: block;
					width: 18px;
					height: 18px;
					margin-left: calc(50% - 9px);
					margin-bottom: 4px;
					margin-top: 22px;
				}

			  	.c-popup-viewport ::-moz-selection { /* Code for Firefox */
			  		background: transparent;
				}
			
				.c-popup-viewport ::selection {
					background: transparent;
				}
		
			  .c-popup-viewport {
			    margin: 0;
			    font-family: -apple-system, BlinkMacSystemFont, "Roboto", arial, sans-serif !important;
					font-size: 13px !important;
			    transition: background-color 0.2s ease;
			    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			    user-select: none !important;
			  	position: fixed;
			  	width: 100vw;
			  	height: 100vh;
			  	top: 0;
			  	left: 0;
			  	display: flex;
			    align-items: center; /* Centrage vertical */
			    justify-content: center; /* Centrage horizontal */
			    box-sizing: border-box;
			    flex-direction: column;
			    z-index: 200;
			  }
		
			  .c-popup-viewport::after {
			  	content:"";
			  	position: fixed;
			  	width: 100%;
			  	height: 200%;
					background-color: rgba(171,171,171,0.60);
					animation-name: gradient-appear;
					animation-duration: .3s;
					animation-delay: .5s;
					animation-fill-mode: forwards;
					opacity: 0;
			  }
				  
				@keyframes gradient-appear {
				  from { opacity: 0 }
				  to   { opacity: 1 }
				}
		
				  .c-popup-before {
					margin: 0;
					padding: 0;
					flex-grow: 1.2;
			  		width: 100%
				  }
		
				  .c-popup-after {
					margin: 0;
					padding: 0;
					flex-grow: 0.8;
			  		width: 100%
				  }
		
				  .c-popup {
					margin: 0;
					padding: 0;
					flex-grow: 0;
					z-index: 2;
					letter-spacing: .1px !important;
					animation-name: popup-appear;
					animation-duration: .3s;
					animation-delay: .5s;
					animation-fill-mode: forwards;
					opacity: 0;
					backdrop-filter: blur(30px) saturate(500%);
					-webkit-backdrop-filter: blur(10px) saturate(500%);
						border-radius: 15px;
				  }
				  
					@keyframes popup-appear {
					  from { transform: scale(1.2); opacity: 0 }
					  to   { transform: scale(1); opacity: 1 }
					}
			  
					  .c-popup-bg {
						position: absolute;
						transform: translateY(-100%);
					  	width: 278px;
					  	box-sizing: border-box;
					  	height: auto;
					  	background-color: #F5F5F5;
						border-radius: 15px;
						padding: 20px 0 0 0;
						z-index: 490;
						/* box-shadow: 0 0 0 1px red; */
						mix-blend-mode: luminosity;
						opacity: .75;
					  }
				
						  .c-popup-bg .inside-popup {
						  	opacity: 0;
						  }
				
					  .c-popup-content {
						position: relative;
					  	width: 278px;
					  	box-sizing: border-box;
					  	background-color: rgba(255,255,255,.7);
						box-shadow: 0 20px 300px 0 rgba(0,0,0,.15);
						border-radius: 15px;
						padding: 20px 0 0 0;
						z-index: 500;
						overflow: hidden;
						text-align: center;
						color: black;
					  }

						  #matomo-opt-out {
							line-height: normal !important;
							margin: 0 20px 0 20px;
						  }

						  #matomo-opt-out p {
							color: rgba(0,0,0,0.85) !important;
							font-size: 17px !important;
							font-weight: 500 !important;
							line-height: normal !important;
							padding: 0;
							margin: 0 14px;
							line-height: 16px;
							letter-spacing: 0.1px;
						  }
						  
						  #matomo-opt-out label strong {
							font-weight: normal;
						  }
						  
						  p.c-message {
						  	font-weight: 500;
							font-size: 17px;
							text-align: center;
							line-height: 21px;
							width: 260px;
							padding: 0;
							margin: 0 9px;
						  }

						  .inside-popup p {
		  					cursor: default;
						  }
				
						  .inside-popup button {
							position: relative;
						  	width: 100%;
						  	height: 44px;
						    padding: 10px 20px;
						    font-size: 17px;
							cursor: default;
							background-color: transparent;
							border: none;
							letter-spacing: .1px !important;
							transition: background-color .15s ease;
							box-shadow: none !important;
						  }
				
							  .inside-popup button::before {
							  	content: "";
								position: absolute;
								left: 0;
								top: 0;
							  	width: 100%;
							  	height: .5px;
								background-color: rgba(0,0,0,.1);
								transition: background-color .15s ease;
							  }
				
							  .inside-popup button:active,
							  .inside-popup button.active-style {
								background-color: rgba(0,0,0,.05);
							  }
				
								  .inside-popup button:active::before {
									background-color: transparent;
								  }
			
							  .inside-popup button:hover {
						    	color: rgba(0,0,0,.85);
							  }
							
							  .inside-popup .leave-button {
							    color: rgba(0,0,0,.85);
							    margin-top: 24px;
							    font-weight: 600;
							    color: #0076FF;
							  }
							
								  .inside-popup .leave-button:hover {
								    color: #0076FF;
								  }
						  	
			/* Confidentialité Desktop */
			
				@media (min-width: 600px) and (hover: hover) and (pointer: fine) {

					.policy-content a:hover {
						text-decoration: underline;
					}
		
				  .c-popup-viewport {
					font-size: 11px !important;
			  		height: 100vh;
				  }
		
				  .c-popup-viewport::after {
				  	content:"";
				  	position: fixed;
				  	width: 100%;
				  	height: 100%;
						background-color: rgba(171,171,171,0.60);
						animation-name: gradient-appear;
						animation-duration: .3s;
						animation-delay: .5s;
						animation-fill-mode: forwards;
						opacity: 0;
				  }

				  .c-popup-before {
					flex-grow: 0.8;
				  }
		
				  .c-popup-after {
					flex-grow: 1.2;
				  }

				  .c-popup {
					margin: 0;
					padding: 0;
					flex-grow: 0;
					z-index: 2;
					letter-spacing: .1px !important;
					animation-name: popup-appear;
					animation-duration: .2s;
					animation-delay: .5s;
					animation-fill-mode: forwards;
					opacity: 0;
		    		animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
				  }
				  
					@keyframes popup-appear {
					  from { transform: scale(0.9); opacity: 0 }
					  to   { transform: scale(1); opacity: 1 }
					}
		
					  .c-popup {
						backdrop-filter: blur(30px) saturate(400%);
						-webkit-backdrop-filter: blur(30px) saturate(400%);
						border-radius: 10px;
					  }
		
					  .c-popup-content {
						  	width: 260px;
					  	background: rgba(236,236,236,.7);
						box-shadow: 0 0 1px 0 rgba(0,0,0,0.60),
									0 10px 30px 0 rgba(0,0,0,0.15),
									0 20px 50px 0 rgba(0,0,0,0.15),
									inset 0 1px 0 0px rgba(255,255,255,0.4),
									inset 0 0px 0 0px rgba(255,255,255,0.6);
						border-radius: 10px;
						padding: 20px 16px 16px 16px;
					  }

						#matomo-opt-out {
							margin: 0;
						}

						  #matomo-opt-out p {
							color: rgba(0,0,0,0.85) !important;
							font-size: 13px !important;
							font-weight: 700 !important;
							line-height: normal !important;
							padding: 0;
							margin: 0 14px;
							line-height: 16px;
							letter-spacing: 0.1px;
						  }

						input[onclick="window.MatomoConsent.consentRevoked();showContent(false);"] {
							margin-bottom: 4px;
						}
				
						input[onclick="window.MatomoConsent.consentGiven();showContent(true);"] {
							margin-bottom: 4px;
						}
					  
					  .c-popup-bg {
					  	width: 260px;
						padding: 20px 16px 16px 16px;
					  }
		
						.app-icon {
							display: inline-block;
							width: 64px;
							height: 64px;
							background-image: url("ui/app-icon.png");
							background-size: 64px;
							margin-bottom: 20px;
						}
					  			  
						p.c-message {
							font-weight: 600;
							font-size: 13px;
							color: rgba(0,0,0,0.85);
							width: 200px;
							padding: 0;
							margin: 0 14px;
							line-height: 16px;
							letter-spacing: 0.1px;
							/* -webkit-font-smoothing: antialiased; */
						}
						
						  .inside-popup button {
								position: relative;
							  	width: 100%;
							  	height: 28px;
							    padding: 4px 0;
							    font-size: 13px;
								cursor: default;
								background-color: rgba(0,0,0,.11);
								border: none;
								letter-spacing: .1px !important;
								transition: background-color .1s ease;
								margin-top: 6px;
								border-radius: 6px;
						  }
				
							  .inside-popup button::before {
							  	display: none;
							  }
				
							  .inside-popup button:active,
							  .inside-popup button.active-style {
								background-color: rgba(0,0,0,.2);
							  }
				
								  .inside-popup button:active::before {
							  		display: none;
								  }
			
							  .inside-popup button:hover {
						    	color: rgba(0,0,0,.85);
							  }
							
							  .inside-popup .leave-button {
							    margin-top: 24px;
							    font-weight: normal;
							    color: rgba(0,0,0,.85);
							  }
							
								  .inside-popup .leave-button:hover {
								    color: rgba(0,0,0,.85);
								  }
					  
				}  	
		


/*
	MAIN FOOTER ////////////////////////////////////////////////////////////////////////////
*/

	.main-footer {
		margin-bottom: 70px;
	  font-weight: normal;
	  text-align: left;
	}

	.main-footer::before {
		content: "";
		display: block;
		position: relative;
		width: calc(100%);
		height: 1px;
		background-color: var(--zjblue);
		margin-bottom: 22px;
	}

	.main-footer .col {
		width: calc(((100vw - 32px - 32px - 32px - 32px) / 3) - 2px);
		vertical-align: top;
	}

	.main-footer .col h2 {
		margin: 0 0 0 0;
		transform: none;
	  font-weight: normal;
	  font-size: 10px;
	}

	.main-footer .col1 a {
		display: inline-block;
		margin-top: 10px;
	}

	.main-footer .col3 a {
		font-weight: bold;
	}

	.foot-title {
		font-size: 19px;
		letter-spacing: -0.89px;
		text-transform: uppercase;
	}

	.main-footer .copyright {
		margin-top: 20px;
	}

	/* Ajoute un décalage gauche au premier .icon-hover du footer */

		.main-footer .col2 .icon-hover:first-of-type {
			margin-left: -2px;
		}


	/* NL Form */

		.newsletter-form {
		  max-width: 500px;
		  margin: -11px 0px 30px;
		  position: relative;
		  max-width: 220px;
		}

			.newsletter-form p {
			  text-align: left !important;
			  margin-top: 1.5rem;
			}

			.newsletter-form *, 
			.newsletter-form *:after, 
			.newsletter-form *:before {
				box-sizing: border-box;
			}

			.newsletter-form .input {
			    display: inline-block;
				position: relative;
				padding-top: 1.5rem;
			}

				/* iOS Reset */ 

					.newsletter-form input[type='text'],
					.newsletter-form input[type='email'] {
						appearance: none;
						border-radius: 0;
						color: var(--zjblue);
					}

				.newsletter-form .input-field {
				  border: 0;
				  border-bottom: 1px solid var(--zjblue);
				  background: transparent;
				  font: inherit;
				  font-size: 1.125rem;
				  padding: 0.25rem 0 0.15rem 0;
				  color: var(--zjblue);
				  width: 100%;
				}

					.newsletter-form .input-field:focus {
					  outline: 0;
					  border-bottom-color: var(--zjblue);
					}

					.newsletter-form .input-field:valid {
					  border-bottom-color: var(--zjblue);
					}

				.newsletter-form .input-label {
				  color: var(--zjblue);
				  position: absolute;
				  top: 1.7rem;
				  left: 0;
				  transition: .25s ease;
				  pointer-events: none;
				  font-size: 19px;
				  letter-spacing: -0.89px;
				}

				.newsletter-form .input+.input {
					margin-top: 1.5rem;
				}

				.newsletter-form .input-field:focus+.input-label, 
				.newsletter-form .input-field:valid+.input-label,
				.newsletter-form .input-field.not-empty + .input-label {
				    color: var(--zjblue);
					transform: translateY(-17px) scale(.7);
					transform-origin: top left;
				}

			.newsletter-form button {
				display: inline-block;
				width: 24px;
				height: 24px;
				background-image: url("ui/arrow-nl.png");
				background-size: cover;
				background-color: transparent;
				border-radius: 0;
				border: none;
				margin: 0 0 0 0;
				transition: transform 4s cubic-bezier(0,.97,0,1.01);
				cursor: pointer;
			}

				.newsletter-form button:hover {
					transform: translateX(5px);
				}

			.newsletter-form .card {
				margin: 2rem auto;
				display: flex;
				flex-direction: column;
				width: 100%;
				max-width: 425px;
				background-color: transparent;
				border-radius: 10px;
				box-shadow: 0 10px 20px 0 rgba(0,0,0, .25);
				padding: .75rem;
			}

			.newsletter-form .action {
				margin-top: 2rem;
			}

			.newsletter-form select {
				display: block;
				margin-top: 10px;
				border: 2px solid #CEC1AE;
				border-radius: 0;
				background: color(srgb 0.9303 0.8987 0.8528) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNiYmIiPjxwYXRoIGQ9Ik02IDlsNiA2IDYtNiIvPjwvc3ZnPg==) no-repeat 98% 50%;
				background-blend-mode: multiply;
				font-family: "body";
				color:black;
				font-weight: normal;
				font-size: 18px;
			}

			.newsletter-form p label {
				font-size: 14px;
				color: #5F5E3B;
				margin-top: 33px;
			}

				.newsletter-form select option {
					font-family: -apple-system, BlinkMacSystemFont, "Roboto", arial, sans-serif !important;
				}

			.newsletter-form textarea {
				margin-top: 10px;
				border: 2px solid #CEC1AE;
				border-radius: 0;
				background: color(srgb 0.9303 0.8987 0.8528);
				display: block;
				resize: vertical;
			}

				.newsletter-form textarea:focus {
					border: 2px solid #5F5E3B;
				}

			.input.has-mask {
				position: relative;
			}

			.input-gradient-mask {
				position: absolute;
				bottom: 2px;
				left: 0;
				width: 20px;
				height: 26px;
				background-image: linear-gradient(90deg, #F7F8F1 0%, rgba(247,248,241,0.00) 100%);
				pointer-events: none;
				opacity: 0;
				transition: opacity 0.2s ease;
				z-index: 2;
			}


/*
	MISC ////////////////////////////////////////////////////////////////////////////
*/ 

	.sepmobile {
		display: none;
	}

	.mobile-inline-block {
		display: none;
	}

	.section-surmesure .cols .col2 {
		padding-top: 34px;
		opacity: 1;
		transition: opacity .7s ease-in-out;
	}

	.section-surmesure .cols .col2  {
		position: relative;
		overflow: hidden;
		z-index: 3;
	}

		.section-surmesure .cols .col2.offscreen {
			padding-top: 34px;
			opacity: 0;
			transition: opacity .3s ease-in-out;
			display: inline-block;
			position: relative;
			z-index: 3;
		}


/*
	RESPONSIVE ////////////////////////////////////////////////////////////////////////////
*/

	/* Cinema Display 1921+ */

		@media (min-width: 1921px) {

			.section-surmesure .row1 .logo,
			.section-surmesure .row1 .logo img.img-size,
			.section-surmesure .row1 .logo img.img-default,
			.section-surmesure .row1 .logo img.img-hover {
				width: calc(((100vw - 32px - 32px) / 5) - 32px);
			}

			.section-maradio .produit,
			.section-maradio .produit img.img-size,
			.section-maradio .produit img.img-default,
			.section-maradio .produit img.img-hover {
				width: calc(((100vw - 32px - 32px) / 5) - 32px);
			}

		}

	/* iMac 1440-1920  */

		@media (min-width: 1440px) and (max-width: 1920px) {

			.section-surmesure .row1 .logo,
			.section-surmesure .row1 .logo img.img-size,
			.section-surmesure .row1 .logo img.img-default,
			.section-surmesure .row1 .logo img.img-hover {
				width: calc(((100vw - 32px - 32px) / 4) - 32px);
			}

			.section-maradio .produit,
			.section-maradio .produit img.img-size,
			.section-maradio .produit img.img-default,
			.section-maradio .produit img.img-hover {
				width: calc(((100vw - 32px - 32px) / 4) - 32px);
			}

		}

	/* Tablet 1250-891 */

		@media (max-width: 1250px) and (min-width: 891px) {

			banner .logo {
				width: 29vw;
			}

		}

	/* Mobile 890- */

		@media (max-width: 890px) and (min-width: 0px) {

			.deskonly {
				display: none;
			}

			.mobile-inline-block {
				display: inline-block;
			}

			banner .logo {
				max-width: 65vw;
				transform: translateY(-3px);
				z-index: ;
			}

			.topnav {
				display: none;
			}

			.logobar-home-wrapper {
				height: 334px;
			}

				.logobar-home {
					/*	transform: scale(.75); */
					height: 360px;
					max-width: 500px;
				}

					.logobar-home .sep {
						display: none;
					}

					.logobar-home .logo {
						margin: 0 32px;
						height: 160px;
					}

					.logobar-home .logo img {
						height: 150px;
					}

					.logobar-home .img-hover {
						transform: translateY(-150px);
					}

					.logobar-home .logo .play {
						display: block;
						position: absolute;
						top: 80px;
						width: 100%;
						height: 40px;
						background-image: url("ui/play-home.png");
						background-size: contain;
						background-repeat: no-repeat;
						background-position: center;
						margin: 0;
						opacity: 0;
						transition: all 1s cubic-bezier(0,.97,0,1.01);
					}

					.logo.client3,
					.logo.client4 {
						transform: translateY(-40px);
					}

			.cols {
				overflow-x: hidden;
			}

			.section-landing .cols {
				padding-top: 115px;
				z-index: -1;
			}

			.grandient-mobile {
				position: fixed;
				top: 0;
				left: 0;
				background-image: linear-gradient(179deg, #0185FE 50%, rgba(1,133,254,0.00) 90%);
				z-index: 2;
				width: 100vw;
				height: 120px;
			}

			.section-landing .cols .col1 {
				display: none;
			}

			.section-landing .cols .col2 {
				width: calc((100vw - 32px - 32px - 32px - 32px) / 2);
			}

			.section-surmesure #surmesure {
				padding-top: 170px;
			}

			.section-surmesure .cols .col1 {
				display: none;
			}

			.section-surmesure .cols .col2 {
				width: calc((100vw - 32px - 32px - 32px - 32px));
			}

			.case-panel,
			.case-content {
				width: 95vw;
			}

			.case-panel .col,
			.section-maradio .section .case-panel .col {
				width: calc(100% - 32px);
			}

			.case-panel .col:first-of-type {
				margin: 0 32px 0 0;
			}

			.case-title-wrapper,
			.section-maradio .case-title-wrapper {
				width: calc(100% - 32px);
			}

			.case-title-wrapper,
			.case-title-inner,
			.case-title-wrapper h4 {
				height: auto;
			}
			.case-title-inner h4 {
				margin-top: 0;
			}

			.case-panel .logo-size {
				height: calc(60vw - 32px - 16px);
			}

			.case-panel .logo {
				width: calc((70vw) - 32px - 16px) !important;
				transform: translateX(100px);
			}
			
				.case-panel.open .logo {
					opacity: 1;
					transform: translateX(-25px);
				}

			#menu-panel-container {
				width: 95vw;
			}

			.modal-window {
				right: -95vw;
			}

			.menu-pusher {
				height: 5vh;
			}

			.menu-footer {
				display: block;
				margin-top: 0px;
				margin-bottom: 60px;
			}

			.menu-footer-right {
				text-align: left;
				margin-top: 25px;
			}

			.menunav {
				transform: scale(.85);
				transform-origin: 0 0;
				overflow-x: visible;
				width: 120%;
			}

			.extrait label {
				max-width : calc(95vw - 44px - 44px - 2px - 76px);
			}

			.section-maradio .col2 {
				width: 100%;
			}

			.section-maradio .section .col {
				width: 100%;
			}
			
			.section-maradio .col1 {
				width: 100%;
			}

			.section-maradio .maradio {
				font-size: 53px;
				letter-spacing: -3.25px;
				margin: -10px 0 0 -2px;
			}

			.section-maradio .votre {
				margin-left: 2px;
			}

			.section-maradio .sepmobile {
				display: block;
				width: 100%;
				height: 1px;
				background-color: white;
				margin: -22px 0 35px 0;
			}

			.logoband {
				width: 100vw !important;
				height: 50px;
				margin-top: 65px;
				transform-origin: top left;
			}

				.logoband .logo {
					display: inline-block;
					height: 50px;
					width: auto;
					margin: 0 10px;
					cursor: pointer;
				}

			/* Product grid */

				.section-maradio .produit {
					width: calc((100vw / 2) - 32px - 16px);
					margin-bottom: 20px;
				}

				.section-maradio .produit img {
					width: calc((130vw / 2) - 32px - 16px );
					overflow-x: hidden;
				}

				.section-maradio .produit img.img-size {
					position: relative;
				}

				.section-maradio .produit img.img-default,
				.section-maradio .produit img.img-hover {
					top: 0;
					left: 0;
					/* transform-origin: 0 0; */
					z-index: 0;
				}

			/* Logos grid */

				.section-surmesure .logo {
					width: calc((100vw / 2) - 32px - 16px);
				}

				.section-surmesure .logo img {
					width: calc((110vw / 2) - 32px - 16px );
					overflow-x: hidden;
				}

				.section-surmesure .logo img.img-size {
					position: relative;
				}

				.section-surmesure .logo img.img-default,
				.section-surmesure .logo img.img-hover {
					top: 0;
					left: 0;
				}

				.section-surmesure .logo .play {
					display: none;
				}

				.section-surmesure .img-hover {
					opacity: 0;
				}

			.signature {
				margin-top: 3px;
				display: inline-block;
				font-weight: normal;
			}

			.underimage::before {
				height: 0px !important;
				content: "" !important;
			}

			.case-panel h4 {
				font-size: 50px;
				letter-spacing: -2.54px;
				line-height: 52px;
			}

			#contact .col.names p {
			  margin-top: 25px;
			}

			.section-surmesure .row1 .logo.offset {
				top: -100px;
			}

			.section-surmesure .row1 {
				margin-top: 50px;
				padding-bottom: 0;
			}

			.section-maradio .rows.productgrid {
			  max-width: calc(100vw - 32px - 32px);
			  box-sizing: border-box;
			  overflow-x: hidden;
			}

			.sky-waves {
				height: 110vh;
			}

			.produit .players {
			  transform: translateY(-60px) scale(.8);
			  width: 100%;
			  transform-origin: center top;
			  margin-bottom: -25%;
			}

			.section-maradio .row1 .produit.offset {
				top: 110px;
			}

			.main-footer .col {
				width: calc(100vw - 32px - 32px);
				margin-bottom: 70px;
			}

			.main-footer {
			  position: relative; /* Nécessaire pour positionner le ::before */
			  z-index: 1; /* Assure que le contenu reste au-dessus */
			}

			.main-footer::after {
			  content: "";
			  position: absolute;
			  top: 0;
			  left: 50%;
			  transform: translateX(-50%);
			  width: 100vw;
			  height: 100%;
			  background-image: linear-gradient(180deg, rgba(247, 248, 241, 0.00) 0%, rgba(247, 248, 241, 1) 50%);
			  z-index: -1; /* Place le pseudo-élément derrière le contenu */
			  pointer-events: none;
			}

			.newsletter-form {
				max-width: none;
			}

			.newsletter-form .input {
				width: 100vw;
				max-width: calc(65vw);
			}

			.main-footer {
				margin-bottom: 0;
			}

			.section-maradio .pricing .col1,
			.section-maradio .pricing .col2,
			.section-maradio .pricing .col3 {
				width: 100%;
			}

			.section-maradio .col2 { 
				width: 100%;
				padding-top: 15px;
			}

			.section-maradio .pricing .col2 {
				margin-top: 18px;
			}

			.section-maradio .produit img {
				transform: translateX(3vw);
				transform-origin: 40% 50%;
			}

			.section-maradio .produit:hover .img-hover {
				transform: translateX(3vw) scale(1.05);
			}

			.section-maradio .produit:hover .img-default {
				transform: translateX(3vw) scale(1.05);
			}

			.section-maradio .rows.productgrid {
				max-width: calc(100vw);
				overflow-x: hidden;
				width: 100vw;
				margin-left: -32px;
			}

			.section-maradio .row1 {
			    display: flex;
			    flex-wrap: wrap;
			    gap: 32px;
			    justify-content: center;
			}

			.section-maradio .img-size {
				margin-bottom: 44px;
			}

			.section-surmesure .col.col1.wide {
				display: inline-block;
			}

			.section-surmesure .maradio {
				letter-spacing: -3.25px;
			    margin: -6px 0 0 -2px;
			    line-height: 40px;
			}

			.section-surmesure .cols .col2  {
				position: relative;
				z-index: 0;
			}

				.section-surmesure .cols .col2.offscreen {
					z-index: 0;
				}

			.h1-block, .h2-block {
				z-index: 0;
			}

			.gradient-top-maradio.offscreen {
				opacity: 0;
			}

			.h1-block.h1-block-surmesure h1 {
			    font-size: 27px;
			    line-height: 23px;
			}

			.section-surmesure .packs,
			.section-surmesure .maradio {
				font-size: 50px;
			}

			.maradio-anchor {
				overflow: hidden;
			}

		}


.hidden {
  display: none !important;
}

.col p.auteurice-insert {
margin-bottom: 0;
font-size: 19px;
color: #979797;
letter-spacing: -0.89px;
line-height: 21px;
}

.logoband {
  overflow: hidden;
  position: relative;
}

.logoband-track,
.logoband .clone {
  white-space: nowrap;
  display: inline-block;
  will-change: transform;
}

body {
  overflow-x: hidden;
}

.mail-additional {
	display: block;
	font-size: 26px;
	color: black;
	letter-spacing: -1.21px;
	line-height: 28px;
	margin-top: 8px;
	text-transform: none;
}

.cols.pricing.line {
	overflow: hidden;
}

.col1.wide {
	width: calc(100vw - 32px - 32px);
}

.surmesure-header {
	margin-top: 33px;
	padding-top: 30px;
	border-top: 1px solid white;
	overflow: hidden;
}

/* Masque les <img> cassées */

	img:not([src]):not([srcset]),
	img[src=""],
	img.broken {
		display: none !important;
	}