/*
	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 {
		  --opusred: #F83217;
		  --opusbeige: #E8E0D6;
		  --opussky: #0f2d3b;
		  --zjbeige: #F7F8F1;
		}

	body {
		padding: 0;
		margin: 0;
		text-align: left;
		background-color: #0f2d3b;
		min-height: 150vh;
		font-family: "font", Helvetica, Arial, sans-serif;
		font-size: 0;
		color: var(--opusred);
  		-webkit-font-smoothing: antialiased;
		overflow-x: hidden;
		position: relative;
	}

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

	.ghost {
		opacity: 0;
	}

	.sky {
		display: block;
		position: fixed;
		width: 100vw;
		height: 100vh;
		padding: 0;
		margin: 0;
		background-image: url(ui/sky.jpg);
		background-size: 100vw 100vh;
		background-repeat: no-repeat;
		background-position: center;
		transition: opacity 1s ease;
	}



/* LAND IMAGE ////////////////////////////////////////////////////////// */

	.land {
		position: absolute;
		top: 80vh;
		left: 0;
		width: 100vw;
		pointer-events: none;
		z-index: 0;
		text-align: center;
	}

		.land img {
			display: block;
			width: 100vw;
			height: auto;
			margin: 0 auto;
		}

		/* Pour forcer la continuité noire visuelle sous .land sans agrandir la page */
		.land::after {
			content: "";
			display: block;
			position: relative;
			bottom: 0;
			inset: 0;
			background: black;
			z-index: -1;
			width: 100vw;
			height: 100vh;
			box-shadow: 0 100vh 0 0 black;
		}
.duo {
	position: absolute;
	top: 20vh;
	left: 0;
	width: 100vw;
	pointer-events: none;
	z-index: 4;
	text-align: center;
}

.duo img {
	display: block;
	width: 60%; /* même échelle qu’avant ton background-size */
	height: auto;
	margin: 0 auto;
}

	.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: 0;
		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: 0;
		transition: opacity 0.2s ease-in-out;
	}

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

	.main {
		display: inline-block;
		position: relative;
		margin: 0 0px 0 0px;
		/* margin: 100vh 0px 0 0px; */
		padding-top: calc(130px - 122px);
		width: calc(100vw);
		top: 0;
		z-index: 5;
	}

	h1 {
		font-size: 23px;
		letter-spacing: -.9px;
		line-height: 23px;
		font-weight: 500;
		text-transform: uppercase;
		margin: 0;
	}

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

	.h1-block, .h2-block {
		display: 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);
	}

	banner .col3 {
		text-align: right;
	}

	banner .h1-block {
		margin-top: 60vh;
	}

.topnav {
	display: flex;
	flex-direction: column;
	align-items: flex-end; /* texte aligné à droite */
	color: var(--opusred);
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.83,0,0.17,1), transform 0.8s cubic-bezier(0.83,0,0.17,1);
}


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

		.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);
		opacity: 0;
		display: none;
	}

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

	.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(--opusred);
					}

					.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(--opusred);
				}
					
				.section-maradio .section.noline::before {
					background-color: transparent;
				}
			
				.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(--opusred);
				}

				.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, #102D3B 0%, rgba(16,45,59,0.00) 100%);
			margin: 0;
			z-index: 2;
			transition: opacity .2s ease;
			pointer-events: none;
			opacity: 0;
		}

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


		.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(--opusred) !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: 0;
				  margin-left: 0;
				  margin-bottom: 10px;
				  z-index: 4;
				  pointer-events: none;
				}

				.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 {
					
				}


/*
	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');
	}

/*
	LANDING VIEWPORTS ///////////////////////////////////////////////////////////////
*/


	/* Landing viewport version logo (par-dessous) */

		/* Structure principale plein écran */
		.landingvp-logo {
			width: 100vw;
			height: 100vh;
			display: flex;
			position: fixed;
			top: 0;
			flex-direction: column;
			overflow: hidden;
			box-sizing: border-box;
			pointer-events: none;
		}

	/* Landing viewport version texte (par-dessus) */

		/* Structure principale plein écran */
		.landingvp-txt {
			width: 100vw;
			height: 100vh;
			display: flex;
			position: absolute;
			top: 0;
			flex-direction: column;
			overflow: hidden;
			box-sizing: border-box;
			/* background: rgba(255, 0, 0, .05); debug */
		}

		/* Chaque rang */
		.vp-row {
			display: flex;
			width: 100%;
			box-sizing: border-box;
		}

		/* Rang 1 — Logo */
		.vp-row.logo-row {
			justify-content: left;
			align-items: flex-start;
			padding: 26px 0 0 0;
		}

			.logo-big {
				position: relative;
				left: -5px;
				top: 0;
				width: auto;
				height: auto;
				max-width: calc(100vw - 110px);
				max-height: calc(60vh);
			}

			img.logo-big {
				width: 100%;
				height: auto;
				display: block;
			}

		/* Rang 2 et 4 — Espaces flexibles */
		.vp-row.empty {
			flex-grow: 1;
			min-height: 20px;
			/* background: rgba(255,255,255,0.05); /* debug */
		}

		/* Rang 3 et 5 — Hauteur fixe selon contenu */
		.vp-row.static-height {
			flex-shrink: 0;
			flex-grow: 0;
			padding: 0;
			/* background: rgba(255,255,255,0.1); /* debug */
		}

			.vp-row.static-height .col,
			.vp-row.static-height .col nav .li {
				flex: 1;
				padding: 0 20px;
				color: var(--opusred);
				font-size: 16px;
			}

			.vp-row.static-height .col:last-child {
				display: flex;
				justify-content: flex-end; /* place le contenu à droite */
				text-align: right;
			}

/*
	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;
			z-index: 500;
		}

			#menu-button::before {
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				width: 300px;   /* 3× ton bouton de 64px */
				height: 300px;
				transform: translate(-50%, -50%); /* centre parfaitement */
				border-radius: 50%;
				background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%);
				opacity: 0.9;
				filter: blur(50px);
				z-index: -1;
				pointer-events: none;
				opacity: 0;
				transition: opacity 1s ease;
			}

				#menu-button.past-reels::before {
					opacity: 1;
				}

			.burger {
				display: block;
				position: absolute;
				width: 22px;
				height: 3px;
				background-color: var(--opusred);
				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: var(--opusbeige);
		    box-shadow: 50px 0 0 0 var(--opusbeige);
		    border-radius: 0 0 0 0;
			box-shadow: 0 400px 0 0 var(--opusbeige),
						0 -400px 0 0 var(--opusbeige);
	    }

			#menu-panel-container::after {
				content: "";
				display: block;
				position: absolute;
				background: red;
				pointer-events: none;
				opacity: 1;
				height: 100vh;
				width: 100%;
				right: 0;
			}

			#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-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: var(--opusbeige);
			-webkit-text-stroke: 2px var(--opusred);
			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: var(--opusbeige);
			  -webkit-text-stroke: 2px var(--opusred);
			  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(--opusred);
			  -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: var(--opusbeige);
							  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(--opusred);
					  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: unset;
		z-index: 3;
	}

	banner .logo {
		display: inline-block;
		position: fixed;
		left: -.8vw;
		top: 25px;
		width: 80vw;
		height: 3000px;
		background-image: url("ui/logo-temp.png");
		background-size: contain;
		background-repeat: no-repeat;
		text-align: center;
		margin: 0;
		max-width: 80vw;
		pointer-events: none;
	}

	.gradient-top {
		display: block;
		position: fixed;
		top:0;
		left: 0;
		width: 100vw;
		height: 100px;
		background-image: linear-gradient(180deg, #102D3B 0%, rgba(16,45,59,0.00) 100%);
		margin: 0;
		opacity: 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;
	  box-shadow: 0 200px 0 100px black;
	  padding: 0 32px;
	}

	.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;
		margin-bottom: 7px;
	}

	.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 !important;
		  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(--opusred);
					}

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

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

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

				.newsletter-form .input-label {
				  color: var(--opusred);
				  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(--opusred);
					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;
				display: none;
			}

			.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;
			}

			.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%;
			  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: 23px;
			    line-height: 23px;
			}

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

			.maradio-anchor {
				overflow: hidden;
			}

		}


/*
	BUGFIX ////////////////////////////////////////////////////////////////////////////
*/

	.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;
		opacity: 0;
	}

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

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


/*
	HOT ADDITIONS
*/


/* EXIT BLOCK TRANSLATES ////////////////////////////////////////////////////////// */

	.exit-left .h1-block,
	.exit-right .nav-block {
		transform: translateX(0);
		transition: transform 0.4s cubic-bezier(0.83, 0, 0.17, 1);
		will-change: transform;
	}

	.exit-left .h1-block h1,
	.exit-right .nav-block li {
		display: inline-block;
	}

	/* Quand l’effet “exit” est actif */
	body.exit-active .exit-left .h1-block {
		transform: translateX(-50vw);
	}

	body.exit-active .exit-right .nav-block {
		transform: translateX(50vw);
	}


/* REELS ////////////////////////////////////////////////////////////// */

	.home-reels {
		width: calc(100vw - 32px - 32px);
		padding: 8px 32px 0 32px;
		background: none;
		color: var(--opusred);
		margin-top: 122px;
	}

	.reels-title-grid,
	.reels-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 3vw;
		width: 100%;
	}

	.reels-title-grid img {
		width: auto;
		height: 57px;
		pointer-events: none;
		transform: translateY(9px);
	}

	.reels-grid .col {
		display: flex;
		flex-direction: column;
		gap: 5vw;
	}

	.reels-grid .col:nth-child(2) { padding-top: 10vw; }
	.reels-grid .col:nth-child(3) { padding-top: 20vw; }

	.reel-thumb {
		position: relative;
		width: 100%;
		aspect-ratio: 16/9;
		border-radius: 20px;
		overflow: hidden;
		cursor: pointer;
		transform-origin: center center;
		transition: transform .4s cubic-bezier(0.83, 0, 0.17, 1);
	}
	.reel-thumb:hover {
		transform: scale(1.02);
	}

	.reel-thumb .thumb-bg {
		position: absolute;
		inset: 0;
		background-size: cover;
		background-position: center;
	}

	.reel-thumb .thumb-text {
		position: absolute;
		top: 0;
		left: 0;
		padding: 20px;
		color: var(--opusred);
	}

	.reel-thumb h3 {
		margin: 0;
		font-size: 30px;
		letter-spacing: -0.9px;
		line-height: 24px;
		text-transform: uppercase;
	}
	.reel-thumb h4 {
		margin: 0;
		font-size: 15px;
		font-weight: 400;
		letter-spacing: -0.7px;
		line-height: normal;
		color: var(--opusred);
	}

	/* Responsive */
	@media (max-width: 900px) {
		.reels-grid,
		.reels-title-grid {
			grid-template-columns: 1fr;
		}
		.reels-grid .col {
			padding-top: 0 !important;
		}
	}

	.reel-popup {
		position: fixed;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0,0,0,0.8);
		z-index: 9999;
		opacity: 0;
		transform: scale(0.98);
		transition: opacity .4s, transform .4s cubic-bezier(0.83, 0, 0.17, 1);
	}
	.reel-popup.active {
		opacity: 1;
		transform: scale(1);
	}
	.reel-popup-inner {
		position: relative;
		width: 80vw;
		aspect-ratio: 16/9;
		background-size: cover;
		background-position: center;
		border-radius: 20px;
		overflow: hidden;
	}
	.reel-popup-inner iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: none;
	}


/* PORTFOLIO ////////////////////////////////////////////////////////// */

	.home-portfolio {
		width: calc(100vw - 32px - 32px);
		padding: 150px 32px 0 32px;
		background: black;
	}

	.portfolio-title-grid,
	.portfolio-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 3vw;
		width: 100%;
	}

	.portfolio-title-grid img {
		width: auto;
		height: 57px;
		pointer-events: none;
		transform: translateY(9px);
	}

	.portfolio-grid .col {
		display: flex;
		flex-direction: column;
		gap: 5vw;
	}

	.portfolio-grid .col:nth-child(2) { padding-top: 10vw; }
	.portfolio-grid .col:nth-child(3) { padding-top: 20vw; }

	.portfolio-thumb {
		position: relative;
		width: 100%;
		aspect-ratio: 16/9;
		border-radius: 20px;
		overflow: hidden;
	}
	.portfolio-thumb .thumb-bg {
		position: absolute;
		inset: 0;
		background-size: cover;
		background-position: center;
	}


	/* DÉGRADÉ DE FOND SOUS LA SECTION PORTFOLIO /////////////////////////// */

		.home-portfolio {
			position: relative; /* nécessaire pour positionner le ::after */
			overflow: hidden;   /* évite que le gradient dépasse */
		}

		.home-portfolio::after {
			content: "";
			position: absolute;
			inset: 0;
			top: 50%; /* commence à mi-hauteur */
			background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 95%);
			pointer-events: none; /* ne bloque pas les clics */
			z-index: 1;
		}


/* FOOTER — FOND NOIR /////////////////////////// */

	/*.home-portfolio, */
	.main-footer {
		background-color: #000;
		color: var(--opusred); /* ou une autre couleur si besoin */
	}


/* PORTFOLIO GRID — RESPONSIVE ADJUSTMENTS ////////////////////////// */

	/* Base → 3 colonnes */
	.portfolio-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 3vw;
		width: 100%;
	}
	.portfolio-grid .col {
		display: flex;
		flex-direction: column;
		gap: 5vw;
	}
	.portfolio-grid .col:nth-child(1) { padding-top: 0; }
	.portfolio-grid .col:nth-child(2) { padding-top: 10vw; }
	.portfolio-grid .col:nth-child(3) { padding-top: 20vw; }

	/* Très grand écran (≥1920px) → 6 colonnes, paddings réduits */
	@media (min-width: 1920px) {
		.portfolio-title-grid {
			padding-bottom: 50px;
		}
		.portfolio-grid {
			grid-template-columns: repeat(6, 1fr);
			column-gap: 2vw;
		}
		.portfolio-grid .col {
			gap: 2.5vw; /* espace entre vignettes réduit */
			padding-top: 0;
		}
		/* Décalage léger 0 / 2.5 / 5 / 0 / 2.5 / 5 */
		.portfolio-grid .col:nth-child(2),
		.portfolio-grid .col:nth-child(5) { padding-top: 2.5vw; }
		.portfolio-grid .col:nth-child(3),
		.portfolio-grid .col:nth-child(6) { padding-top: 5vw; }
	}

	/* Mobile → conserve 3 colonnes */
	@media (max-width: 900px) {
		.portfolio-grid {
			grid-template-columns: repeat(3, 1fr);
			column-gap: 2vw;
		}
		.portfolio-grid .col { padding-top: 0 !important; }
	}


/* CATALOGUE ////////////////////////////////////////////////////////// */

	.home-catalogue { width: 100vw; margin-top: 10vw; }

	.catalogue-title-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 5vw; }
	.catalogue-title { height: 57px; pointer-events: none; }

	.catalogue-grid{
	  display: grid;
	  grid-template-columns: repeat(3, 1fr);
	  column-gap: 3vw;
	  align-items: start;         /* ← évite tout stretch vertical des items */
	  justify-items: stretch;
	  perspective: 800px;         /* conteneur de perspective (comme le CodePen sur <body>) */
	}

	.album-thumb{
	  position: relative;
	  display: block;             /* plus sûr dans une grid */
	  width: 100%;
	  /* pas de ratio imposé → hauteur = celle de l’image */
	  /* background: cyan;           /* debug */
	  border-radius: 20px;
	  overflow: visible;
	  transform-origin: 50% 50%;
	  transform-style: preserve-3d;
	  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
	  will-change: transform;
	  contain: paint;             /* isole le rendu, évite les effets de bord */
	  cursor: pointer;
	}

	.album-thumb img {
	  display: block;
	  width: 100%;
	  height: auto;               /* ← ratio naturel */
	  object-fit: cover;          /* sécu si une image dépasse */
	  border-radius: inherit;
	  pointer-events: none;
	}

	/* les titres restent masqués */
	.album-thumb h2{ display:none; }


	.reel-popup-inner.plain {
		background: black; /* fond neutre au lieu du thumbnail */
	}


/*======================================================================*/
/*  CATALOGUE VIEWPORT — FINAL VERSION (grille, intro, z-index, etc.)   */
/*======================================================================*/

#catalogue-viewport {
	position: fixed;
	top: 0;
	right: -200vw;
	width: 100vw;
	height: 100vh;
	background: transparent;
	overflow-y: auto;
	z-index: 50; /* au-dessus de land mais sous UI */
	transition: right 0.8s cubic-bezier(0.83, 0, 0.17, 1);
	will-change: right;
}

	body.catalogue-mode #catalogue-viewport {
	right: 0;
	margin-top: 0;
	z-index: 200; /* 👈 au-dessus de tout sauf le menu */
	overflow: scroll; /* s’assure que le contenu ne soit pas coupé */
}

/* intro globale */
.catalogue-intro {
	position: absolute;
	left: 57vw;
	top: 23px;
	width: 486px;
	opacity: 0;
	transform: translateY(30px);
	pointer-events: none;
	z-index: 55;
}
.catalogue-intro.in {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.catalogue-intro.out {
	opacity: 0;
	transform: translateY(30px);
}

/* bandes */
/* bandes corrigées — images partent d’en bas et montent en “in” */

.catalogue-intro .band {
	position: relative;
	width: 100%;
	height: 57px;
	overflow-y: hidden;
}

.catalogue-intro .band img {
	position: absolute;
	width: auto;
	height: 57px;
	top: 0;
	left: 0;
    transform: translateY(100%); /* caché par défaut */
	transition: transform 1s cubic-bezier(0.83, 0, 0.17, 1);
}

	/* l’état IN : images montent à 0 */
	.catalogue-intro.in .band img {
		transform: translateY(0);
		top: 0;
	}

	/* l’état OUT : images redescendent */
	.catalogue-intro.out .band img {
		transform: translateY(100%);
		transition: all 0.6s cubic-bezier(0.83, 0, 0.17, 1);
	}

.catalogue-intro.in .band img { transform: translateY(0); }
.catalogue-intro.in .band-2 img { transition-delay: 0.05s; }
.catalogue-intro.in .band-3 img { transition-delay: 0.1s; }
.catalogue-intro.in .band-4 img { transition-delay: 0.15s; }

/* zone scrollable */
.catalogue-scroll {
	padding-top: 12vh;
	padding-bottom: 10vh;
	overflow-y: auto;
	scroll-behavior: smooth;
	z-index: 51;
	position: relative;
}

/* masque le reste du site */
/* NEW — hides only the primary footer, keeps catalogue footer visible */
body.catalogue-mode .home-reels,
body.catalogue-mode .home-portfolio,
body.catalogue-mode .main-footer--primary {
  display: none !important;
}

/* logobands (tous clones inclus) */
body.catalogue-mode [id^="logoband"] {
	opacity: 0 !important;
	transform: translateY(100px) !important;
	transition: all .4s cubic-bezier(0.83, 0, 0.17, 1) !important;
	pointer-events: none;
}

/* duo translation via left */
.duo {
	position: absolute;
	left: 0;
	transition: left .8s cubic-bezier(0.83, 0, 0.17, 1);
	z-index: 20;
}

/* big logos : largeur réelle modifiée */
body.catalogue-mode .logo-row .logo-big img {
	width: 47vw !important;
	transition: width .6s cubic-bezier(0.83, 0, 0.17, 1);
}

/* row flexible fixée en mode catalogue */
.vp-row.empty.static-in-catalogue {
	flex-grow: 1;
	height: auto;
	transition: all .6s cubic-bezier(0.83, 0, 0.17, 1);
}
body.catalogue-mode .vp-row.empty.static-in-catalogue {
	flex-grow: 0;
	height: 50px;
}

/* grille albums : 2 colonnes centrées, env. 33vw */
.catalogue-grid {
	display: grid;
	grid-template-columns: repeat(2, 33vw);
	justify-content: center;
	column-gap: 1vw;
	row-gap: 5vw;
	margin: 0 auto;
	position: relative;
	z-index: 52;
}




/* =================================================================== */
/* Z-INDEX RESTORE — couche décorative correcte                       */
/* =================================================================== */

	/* Ciel et décor basiques */
	.sky {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.land {
		position: absolute;
		top: 80vh;
		left: 0;
		width: 100%;
		z-index: 2; /* terrain au-dessus du ciel */
	}

	/* Logo principal du viewport */
	.vp-row.logo-row .logo-big {
		position: relative;
		z-index: 3; /* doit rester devant land et visible */
	}

	/* Duo décoratif */
	.duo {
		position: absolute;
		top: 20vh;
		left: 0;
		width: 100%;
		z-index: 4; /* juste au-dessus du big logo */
		pointer-events: none;
	}

	/* Éléments d’interface au-dessus de tout */
	#logoband,
	.main-footer,
	.topnav {
		position: relative;
		z-index: 5;
	}

	/* Ajout manuel */
	.landingvp-logo {
		z-index: 2;
	}


/* décalage vertical de la 2e colonne dans le catalogue ////////////////////// */

	.catalogue-grid > .album-thumb:nth-child(2n) {
		margin-top: 22vh; /* ← “padding top” visuel pour la 2e colonne */
	}




/* FOOTER VERSION CATALOGUE /////////////////////////////////////////////// */

	.main-footer--catalogue {
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 100%);
		margin-top: 300px;
		margin-bottom: -50px;
	}


/* TRANSITION DOUCE POUR LES GROS LOGOS ////////////////////////////////////////// */

	.logo-row .logo-big img {
		transition: all 0.6s cubic-bezier(0.83, 0, 0.17, 1);	
	}





/* Mouvement horizontal de l'ensemble de l'intro */
.catalogue-intro {
	transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1), opacity 0.8s ease;
	opacity: 0; /* invisible par défaut */
	transform: translateX(100vw); /* hors cadre à droite */
	will-change: transform, opacity;
}

.catalogue-intro.in {
	opacity: 1;
	transform: translateX(0);
	transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1), opacity 0.8s ease;
}

.catalogue-intro.out {
	opacity: 1;
	transform: translateX(100vw);
	transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1), opacity 0.8s ease;
}



/* Correction : animation de sortie catalogue-intro */
.catalogue-intro.out {
	opacity: 1;
	transform: translateX(100vw) !important;
	transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1), opacity 0.8s ease;
}




/* DISCS VIEWPORT ////////////////////////////////////////////////// */

	.discs-viewport {s
		top: 0;
		left: 120vw; /* par défaut : à droite de la scène principale */
		width: 100vw;
		height: 100vh;
		overflow: visible;
		pointer-events: none;
		z-index: 45; /* entre .land (derrière) et #catalogue-viewport (devant) */
		transition: left 0.8s cubic-bezier(0.83, 0, 0.17, 1);
		will-change: left, transform;
	}

	.discs-viewport .disc {
		position: absolute;
		width: auto;
		transform: translate(-50%, -50%);
		will-change: transform;
	}

	.discs-viewport .disc-1 {
		left: 3vw;
		top: 63vh;
		height: 18vh;
	}

	.discs-viewport .disc-2 {
		right: -4.7vw;
		top: 67vh;
		height: 47vh;
		transform: translate(50%, -50%);
	}

	/* En mode catalogue : le calque entre dans le champ */
	body.catalogue-mode .discs-viewport {
		left: 0;
	}



/* Laisse .land tel quel (absolute, top:80vh, etc.) */
.land {
  overflow: visible; /* sécu pour laisser dépasser l'image à droite */
}

/* L'image déborde à droite par défaut (112vw) */
.land img {
  display: block;
  width: 107vw;   /* élargie d’environ 12% */
  height: auto;
  margin: 0;      /* pas de centrage, on garde le bord gauche aligné */
  transform: translateX(0);
  transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1);
  will-change: transform;
}

/* En mode catalogue : léger glissement vers la gauche */
body.catalogue-mode .land img {
  transform: translateX(-6vw);
}





/* ========================================================= */
/* CONTACT / VISION — BACKGROUNDS */
/* ========================================================= */

.contact-bg-mask,
.vision-bg-mask {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100vw;
	height: 0; /* masqué par défaut */
	overflow: hidden;
	pointer-events: none;
	z-index: 600; /* au-dessus de land et discs, sous UI */
	transition: height 0.6s cubic-bezier(0.83,0,0.17,1);
}

.contact-bg,
.vision-bg {
	width: 100%;
	height: 100vh;
	background-size: cover;
	background-position: center;
	transform: translateZ(0) translateY(-100vh);
	transition: all .6s 1s cubic-bezier(0.83,0,0.17,1);
}

.contact-bg {
	background-image: url("/wp-content/themes/opus/ui/contact-bg.jpg");
}

.vision-bg {
	background-image: url("/wp-content/themes/opus/ui/vision-bg.jpg");
}

.contact-mode  .contact-bg-mask  { height: 100vh; }
.vision-mode   .vision-bg-mask   { height: 100vh; }

.contact-mode  .contact-bg  { transform: translateZ(0) translateY(0); }
.vision-mode   .vision-bg   { transform: translateZ(0) translateY(0); }

.contact-mode  .contact-bg,
.vision-mode   .vision-bg {
	transition-delay: 0s;
}

/* ========================================================= */
/* CONTACT / VISION — LAYOUT FIXES                           */
/* ========================================================= */

/* --- VISION --- */

.vision-details {
    flex-direction: column;
    justify-content: space-between;
}

.vision-content {
    display: flex;
    width: 100vw;
    height: 100vh;
    align-items: center; /* Centre verticalement */
    padding-top: 10vh;   /* Décale légèrement vers le bas pour éviter le logo */
    box-sizing: border-box;
}

.vision-col-left,
.vision-col-right {
    width: 50%;
    padding: 0 40px;
    box-sizing: border-box;
}

/* Image Tagline */
.vision-col-left img {
    display: block;
    width: 100%;
    max-width: 334px; /* Taille ajustée visuellement */
    margin-left: 0; /* Pousse vers la droite de sa colonne */
    margin-right: 5vw;
    margin-top: 20px;
}

/* Texte Principal */
.vision-col-right p {
    font-family: Helvetica, Arial, sans-serif; /* Fallback si ta font custom charge mal */
    font-size: 23px;
    line-height: 28px;
    color: var(--opusred);
    letter-spacing: -0.5px;
    max-width: 480px;
    
    /* CORRECTION OMBRE : Text-shadow au lieu de box-shadow */
    text-shadow: 0 10px 30px #000000;
    box-shadow: none !important;
}

/* Footer Logoband Vision */
.vision-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 120px; /* Hauteur réservée */
    z-index: 10;
}
.vision-footer .logoband {
    margin-top: 30px; /* Ajustement vertical */
}


/* --- CONTACT --- */

.contact-details {
    display: block; /* On quitte le flex global pour placer en absolute */
}

/* Social Icons (Sous le logo) */
.contact-socials {
    left: 40px;
    display: flex;
    gap: 30px;
}

.contact-socials .icon-social img {
    height: 32px;
    width: auto;
    display: block;
    transition: transform 0.2s ease;
}
.contact-socials .icon-social:hover img {
    transform: scale(1.1);
}

/* Infos Bas de page */
.contact-infos {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100vw;
    padding: 0 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between; /* Julien à gauche, Raph à droite */
    align-items: flex-end;
}

.info-block {
    color: var(--opusred);
    text-transform: uppercase;
}

.info-block h3 {
    font-size: 23px;
    margin: 0 0 5px 0;
    line-height: 1;
}

.info-block p, 
.info-block a {
    font-size: 23px;
    margin: 0;
    display: block;
    text-decoration: none;
    font-weight: 400;
    line-height: 26px;
}
.info-block a:hover {
    text-decoration: underline;
}

/* Ajustement Mobile Rapide */
@media (max-width: 890px) {
    .vision-content { flex-direction: column; padding-top: 150px; }
    .vision-col-left, .vision-col-right { width: 100%; text-align: left; padding: 20px 32px; }
    .contact-infos { flex-direction: column; gap: 30px; }
    .contact-socials { top: auto; bottom: 200px; left: 32px; }
}





/* Délai de restauration du z-index du logo et de la topnav */
/* Retarde le rétrécissement du logo lors de l'apparition des panels */


.mode-panel-active .landingvp-logo {
    width: 47vw;
	transition: all .6s cubic-bezier(0.83,0,0.17,1);
}





/* Vision : tagline image responsive */
.vision-details .vision-tagline img {
	display: block;
	width: 100%;
	max-width: 334px;
	height: auto;
	object-fit: contain;
}

.vision-details .vision-tagline {
	width: calc(100vw - 32px - 32px);
	max-width: 334px;
}




.vision-details.revealed .col2 p {
    width: 400px;
    box-shadow: -9px -24px 55px 0 #000000;
    font-family: HelveticaNeue-Medium;
    font-size: 23px;
    color: #F83217;
    letter-spacing: -0.9px;
    line-height: 23px;
    box-shadow: -9px -24px 55px 0 #000000;
}






/* ================================
   Contact / Vision details transitions
   ================================ */

	.contact-details,
	.vision-details {
		opacity: 0;
		transform: translateY(200px); /* départ subtil depuis le bas */
		transition:
			opacity 0.6s cubic-bezier(0.83,0,0.17,1),
			transform 0.6s cubic-bezier(0.83,0,0.17,1);
		pointer-events: none; /* non cliquable tant que pas révélé */
	}

	/* Quand le panel est actif */
	.contact-details.revealed,
	.vision-details.revealed {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto; /* redevient cliquable */
	}






/* Landing VP ZMAX — aligné comme les autres logos */
.landingvp-zmax {
	position: absolute;     /* pas fixed, sinon centré verticalement ⇒ erreur */
	top: 0;
	left: 0;

	width: 100vw;
	height: 0;              /* important : ne doit PAS former un panneau */
	pointer-events: none;   /* laisse passer les clics */

	z-index: 4000;          /* au-dessus de tout */
	opacity: 0;             /* invisible hors mode */
	transition: opacity 0.8s cubic-bezier(0.83,0,0.17,1);
}

/* Le logo */
.landingvp-zmax .logo-big-zmax img {
	width: 47vw;            /* même taille que catalogue/contact/vision */
	display: block;
	margin: 0 auto;
	opacity: 0;
	transition: opacity 0.8s cubic-bezier(0.83,0,0.17,1),
	            transform 0.8s cubic-bezier(0.83,0,0.17,1);
}

/* Quand un mode est actif */
body.contact-mode .landingvp-zmax,
body.vision-mode  .landingvp-zmax {
	opacity: 1;
}

body.contact-mode .landingvp-zmax .logo-big-zmax img,
body.vision-mode  .landingvp-zmax .logo-big-zmax img {
	opacity: 1;
	transform: scale(1);
}



/* En mode Contact et Vision, la rangée .empty/.static-in-catalogue
   doit avoir le même comportement qu'en mode catalogue */
body.contact-mode .landingvp-txt .vp-row.empty,
body.vision-mode  .landingvp-txt .vp-row.empty,
body.contact-mode .landingvp-txt .vp-row.static-in-catalogue,
body.vision-mode  .landingvp-txt .vp-row.static-in-catalogue {
	flex-grow: 0;
	height: 50px;
}


body .landingvp-txt .vp-row.empty,
body.contact-mode .landingvp-txt .vp-row.empty,
body.vision-mode  .landingvp-txt .vp-row.empty,
body.contact-mode .landingvp-txt .vp-row.static-in-catalogue,
body.vision-mode  .landingvp-txt .vp-row.static-in-catalogue {
	min-height: 50px !important;
}





/* ========================================================= */
/* FIX FINAL : LAYOUT STABLE + TRANSITIONS FLUIDES           */
/* ========================================================= */

/* 1. MOTEUR DE TRANSITION (Ne pas toucher)
   On définit ici l'état "fermé" avec les propriétés de transition */
.contact-details,
.vision-details {
    /* POSITIONNEMENT (Fixe le layout) */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2500; /* Au-dessus de tout */
    
    /* ÉTAT INITIAL (Caché + Décalé vers le bas) */
    opacity: 0;
    transform: translateY(150px); /* Le contenu arrive du bas */
    pointer-events: none;

    /* TRANSITION DOUCE (Cubic Bezier pour l'inertie "Luxe") */
    transition: opacity 0.8s cubic-bezier(0.83, 0, 0.17, 1),
                transform 0.8s cubic-bezier(0.83, 0, 0.17, 1);
    
    /* Force le display pour éviter que le JS ne le cache */
    display: flex !important; 
    flex-direction: column;
}

/* 2. ÉTAT ACTIF (Déclenché par le JS via la classe .revealed) */
.contact-details.revealed,
.vision-details.revealed {
    opacity: 1;
    transform: translateY(0); /* Remonte à sa place */
    pointer-events: auto;
}

/* 3. MASQUER L'ACCUEIL EN DOUCEUR
   Au lieu de disparaître d'un coup, le texte d'accueil fade-out */
.landingvp-txt {
    transition: opacity 0.5s ease; /* Ajout d'une transition sur l'accueil */
}

body.mode-panel-active .landingvp-txt,
body.mode-panel-active .landingvp-logo {
    opacity: 0;
    pointer-events: none;
}

/* 4. SÉCURISATION DU LAYOUT VISION
   S'assure que le contenu reste centré malgré l'animation */
.vision-content {
    flex: 1; /* Prend toute la place disponible */
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    z-index: 2;
}

/* 5. LOGOBAND VISION */
.vision-footer {
    height: 120px;
    width: 100%;
    position: relative;
    z-index: 3;
    flex-shrink: 0; /* Ne s'écrase pas */
}
.vision-footer .logoband {
    display: block !important;
    position: absolute;
    bottom: 30px;
    width: 100%;
}







/* ========================================================= */
/* FINITIONS : ALIGNEMENT, NAV & FONDS FIXES                 */
/* ========================================================= */

/* 1. ALIGNEMENT RAPHAËL NAULEAU
   On force l'alignement à droite pour le bloc de Raph */
.info-raphael {
    text-align: right;
    align-items: flex-end;
}
.info-raphael h3,
.info-raphael p,
.info-raphael a {
    margin-left: auto; /* Pousse le contenu à droite si c'est des blocks */
    margin-right: 0;
}

/* 2. NAVIGATION : OBLIGATOIREMENT VISIBLE
   On annule le masquage global de .landingvp-txt pour ne masquer que ce qui gêne. */

/* A. On garde le conteneur global visible, mais "transparent" aux clics */
body.mode-panel-active .landingvp-txt {
    opacity: 1 !important;
    pointer-events: none;
}

/* B. On masque spécifiquement le TEXTE GAUCHE et le FOOTER BAS */
body.mode-panel-active .landingvp-txt .exit-left, 
body.mode-panel-active .landingvp-txt .logoband,
body.mode-panel-active .landingvp-txt .vp-row.empty {
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* C. On force la NAV à rester visible, interactive et au-dessus du panel */
body.mode-panel-active .topnav {
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 3000 !important; /* Panel est à 2500, donc Nav passe devant */
    transform: translateY(33px);
}

/* 3. FONDS IMMOBILES (FIXED)
   On supprime les translations (mouvements) sur les images de fond.
   L'effet de "volet" (le masque qui descend) restera, mais l'image dedans ne bougera plus. */

.contact-bg,
.vision-bg {
    transform: none !important; /* Annule tout mouvement vertical */
    top: 0;
    left: 0;
    /* On s'assure que l'image couvre bien tout sans bouger */
    background-attachment: fixed; 
}

/* Force l'état actif sans mouvement */
.contact-mode .contact-bg,
.vision-mode .vision-bg {
    transform: none !important;
}

/* Petits ajustements pour être sûr que le masque fonctionne bien en mode "Rideau" */
.contact-bg-mask,
.vision-bg-mask {
    /* Le masque continue de s'ouvrir (height: 0 -> 100vh) */
    /* L'image à l'intérieur est maintenant statique */
}







/* ========================================================= */
/* FINAL SYSTEM (V2) : NO-JUMP, SYNC & SCROLL                */
/* ========================================================= */

/* 0. STABILITÉ GLOBALE */
html {
    scrollbar-gutter: stable; 
}

/* 1. BODY LOCK */
body.mode-panel-active {
    overflow: hidden !important; 
    height: 100vh;
}


/* 2. Z-MAX LOGO (Le "Dupliqué" qui vole) */
.landingvp-zmax {
    position: absolute; top: 0; left: 0; width: 100vw; height: 0;
    pointer-events: none; z-index: 4000;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.83,0,0.17,1);
}
.landingvp-zmax .logo-big-zmax img {
    width: 47vw; display: block; margin: 0 auto;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.83,0,0.17,1), transform 0.8s cubic-bezier(0.83,0,0.17,1);
}

/* QUAND ACTIF */
body.contact-mode .landingvp-zmax,
body.vision-mode  .landingvp-zmax,
body.contact-mode .landingvp-zmax .logo-big-zmax img,
body.vision-mode  .landingvp-zmax .logo-big-zmax img {
    opacity: 1;
    transform: scale(1);
}


/* 3. LOGO ACCUEIL & TEXTE (Le Fond) */
.landingvp-txt,
.landingvp-logo {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.8s cubic-bezier(0.83,0,0.17,1);
}

body.mode-panel-active .landingvp-txt,
body.mode-panel-active .landingvp-logo {
    opacity: 0;
    pointer-events: none;
}

/* On fige le logo du fond pour qu'il ne saute pas */
.landingvp-logo .logo-big img {
    transition-property: opacity; 
    transition-duration: 0.8s;
    transition-timing-function: cubic-bezier(0.83,0,0.17,1);
    width: 100%; 
}
body.mode-panel-active .landingvp-logo .logo-big img {
    width: 100% !important; 
    transform: none !important;
}

/* Anti-glitch footer */
.landingvp-txt .logoband { transform: translateZ(0); backface-visibility: hidden; }


/* 3.bis FREEZE ACCUEIL (CORRECTIF ANTI-SAUT) */
/* On force les rangées de l'accueil à garder leur taille d'origine */
/* même quand le mode Contact/Vision est activé */
body.mode-panel-active .landingvp-txt .vp-row.empty,
body.mode-panel-active .landingvp-txt .vp-row.static-in-catalogue {
    flex-grow: 1 !important; /* Reste grand comme sur l'accueil */
    height: auto !important; /* Ne passe pas à 50px */
    min-height: 20px;
}


/* 4. MOTEUR DE TRANSITION DES PANELS */
.contact-details, .vision-details {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    display: flex !important; flex-direction: column;
    z-index: 2500;
    
    opacity: 0; transform: translateY(100px); visibility: hidden;
    
    transition: opacity 0.8s cubic-bezier(0.83,0,0.17,1), transform 0.8s cubic-bezier(0.83,0,0.17,1), visibility 0s linear 0.8s;
}

/* VISION : Scroll Desktop OK */
.vision-details { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }

/* CONTACT : FIXE sur Desktop */
.contact-details { overflow: hidden; }

.contact-details::-webkit-scrollbar, .vision-details::-webkit-scrollbar { display: none; }

.contact-details.revealed, .vision-details.revealed {
    opacity: 1; transform: translateY(0); visibility: visible;
    transition: opacity 0.8s cubic-bezier(0.83,0,0.17,1), transform 0.8s cubic-bezier(0.83,0,0.17,1), visibility 0s linear 0s;
    pointer-events: auto;
}


/* 5. GESTION DES NAVIGATIONS */

/* Nav de l'accueil : Transition douce */
.landingvp-txt .topnav {
    transition: opacity 0.8s cubic-bezier(0.83,0,0.17,1), transform 0.8s cubic-bezier(0.83,0,0.17,1);
}

/* VISION : On cache la nav Accueil */
body.vision-mode .landingvp-txt .topnav {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* CONTACT : On garde la nav Accueil visible + TON AJUSTEMENT */
body.contact-mode .topnav {
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 3000 !important;
    transform: translateY(33px); /* Ton ajustement */
}


/* 6. LAYOUT VISION */
.vision-details .logo-scrollable { display: block; opacity: 1 !important; margin-top: 0; }
.vision-col-left { position: relative; }
.vision-col-right { position: relative; display: block; }
.vision-tagline-img { display: block; width: 334px; margin-left: 22px; height: auto; }

.vision-text-wrapper {
    position: absolute; left: 0; top: 0; text-align: left;
    font-family: Helvetica, Arial, sans-serif; font-size: 23px;
    line-height: 28px; color: var(--opusred); letter-spacing: -0.5px;
    width: 450px; margin: 0; transform: translateY(8px);
}

.vision-nav { 
    display: flex; flex-direction: column; align-items: flex-end; 
    margin: 0; opacity: 1 !important; pointer-events: auto;
}

.vision-logoband { margin-top: 120px; margin-bottom: 80px; display: block; width: 100%; }


/* 7. LAYOUT CONTACT (CORRECTIF ALIGNEMENT HAUT) */

/* On empêche le rang vide de grandir DANS LE PANEL CONTACT */
.contact-details .vp-row:nth-child(2) {
    flex-grow: 0 !important; 
    min-height: 20px; 
    height: 20px;
}

/* Container Socials */
.contact-col-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Force en haut */
    align-items: flex-start;
    padding-left: 32px;
}

/* Bloc Icônes */
.contact-socials {
    display: flex;
    gap: 30px;
    margin-top: 0;
    transform: translateY(60px);
}

/* Infos Bas de page */
.contact-infos {
    width: 100%;
    padding: 0 32px 40px 32px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.info-raphael { text-align: right; }
.info-block h3 { font-size: 23px; margin: 0 0 5px 0; line-height: 1; color: var(--opusred); }
.info-block p, .info-block a { font-size: 23px; margin: 0; display: block; text-decoration: none; font-weight: 400; line-height: 26px; color: var(--opusred); }

/* Taille Icônes 32px */
.icon-social img { height: 32px; width: auto; display: block; transition: transform 0.2s; }
.icon-social:hover img { transform: scale(1.1); }


/* 8. BURGER & MENU */

/* Le bouton Burger (Doit être au-dessus des panels Contact/Vision qui sont à 2500) */
#menu-button { 
    z-index: 6000 !important; 
}

/* Le Menu Ouvert (Doit être au-dessus du bouton Burger) */
#menu-panel-container, 
.modal-window { 
    z-index: 7000 !important; 
}

/* Le bouton Fermer du Menu (Sécurité pour qu'il soit cliquable) */
.modal-close {
    z-index: 7500 !important;
}


/* 9. RESPONSIVE */
@media (max-width: 890px) {

    /* --- GLOBAL & STRUCTURE --- */
    body {
        overflow-x: hidden;
        width: 100vw;
    }
    
    .main {
        padding-top: 0;
        overflow-x: hidden;
    }

    /* --- HERO : LOGO & DUO --- */
    
    /* Le logo prend toute la largeur et se cale en haut */
    .landingvp-logo .logo-big img,
    .landingvp-txt .logo-big img {
        width: 100vw !important;
        height: auto;
        max-width: none;
        transform: translateY(60px); /* Marge pour le burger */
    }

    /* Le Duo : Ajusté pour ne pas cacher le texte */
    .duo {
        top: 25vh;
        width: 100vw;
    }
    .duo img {
        width: 130%; /* Plus grand pour déborder */
        margin-left: -15%; /* Centrage */
    }

    /* --- HERO : TEXTES (Original Music + Nav) --- */
    
    /* On casse la grille Flexbox pour positionner librement */
    .landingvp-txt .vp-row.static-height {
        display: block;
        height: 100vh;
        width: 100vw;
    }

    /* Bloc "Original Music" : En haut à gauche, sous le logo */
    .landingvp-txt .exit-left {
        position: absolute;
        top: 28vh; /* Ajusté visuellement sous le logo */
        left: 20px;
        width: auto;
        text-align: left;
    }
    .landingvp-txt .h1-block h1 {
        font-size: 16px;
        line-height: 20px;
    }

    /* Bloc Nav (Contact, etc) : Au milieu à droite */
    .landingvp-txt .exit-right {
        position: absolute;
        top: 45vh;
        right: 20px;
        text-align: right;
        display: block;
        width: auto;
    }
    .topnav {
        align-items: flex-end;
    }
    .topnav li {
        font-size: 20px;
        line-height: 34px;
    }

    /* --- LOGOBAND ACCUEIL --- */
    .logoband-home-viewport {
        bottom: 15vh; /* Remonté */
    }
    .section-logoband .logoband {
        margin-top: 0;
    }
    
    /* --- SECTIONS (REELS, PORTFOLIO, CATALOGUE) --- */

    /* Titres des sections */
    .reels-title-grid, 
    .portfolio-title-grid,
    .catalogue-title-grid {
        display: flex; /* Flex pour aligner la flèche (si présente) et le titre */
        align-items: center;
        gap: 15px;
        margin-bottom: 30px;
    }
    
    /* Taille des images de titre (H1 images) */
    .reels-title-grid img, 
    .portfolio-title-grid img {
        height: 35px; /* Plus petit sur mobile */
        width: auto;
        transform: none;
    }

    /* Grilles : Une seule colonne */
    .reels-grid, 
    .portfolio-grid,
    .catalogue-grid {
        grid-template-columns: 1fr !important; /* 1 colonne */
        gap: 40px; /* Espace vertical entre items */
        padding: 0;
    }

    /* Annulation des décalages verticaux desktop */
    .reels-grid .col, 
    .portfolio-grid .col {
        padding-top: 0 !important;
        gap: 40px;
    }

    /* Thumbnails */
    .reel-thumb, 
    .portfolio-thumb,
    .album-thumb {
        width: 100%;
        border-radius: 12px;
    }
    
    /* Catalogue spécifique */
    .catalogue-grid {
        display: flex;
        flex-direction: column;
    }
    .album-thumb {
        margin-bottom: 20px;
    }

    /* --- FOOTER --- */
    
    .main-footer {
        padding: 50px 20px 100px 20px;
        text-align: left;
    }
    
    .main-footer .col {
        width: 100%;
        display: block;
        margin-bottom: 40px;
    }
    
    .main-footer .col1 { order: 3; } /* Newsletter en bas ? ou ordre flux naturel */
    
    .newsletter-form .input {
        width: 100%;
        max-width: 100%;
    }

    /* --- PANELS (CONTACT / VISION) MOBILE --- */
    
    /* Scroll activé pour Contact */
    .contact-details {
        overflow-y: auto !important;
        display: block !important;
    }
    
    /* Masquer la structure desktop */
    .contact-details .logo-row, 
    .contact-details .vp-row.empty,
    .vision-details .logo-row,
    .vision-details .vp-row.empty {
        display: none;
    }

    /* Layout Contact Mobile */
    .contact-col-left {
        padding: 0;
        margin-top: 140px; /* Sous le burger */
        margin-left: 20px;
        display: block;
    }
    .contact-socials {
        transform: none;
        margin-top: 0;
    }
    .contact-infos {
        padding: 0 20px 100px 20px;
        flex-direction: column;
        gap: 50px;
        align-items: flex-start;
        position: relative;
        bottom: auto;
        margin-top: 60px;
    }
    .info-raphael { text-align: left; }

    /* Layout Vision Mobile */
    .vision-details {
        padding-top: 140px; /* Sous le burger */
    }
    .vision-col-left {
        padding: 0 20px;
        margin-bottom: 30px;
    }
    .vision-tagline-img {
        width: 100%;
        max-width: 300px;
        margin: 0;
    }
    .vision-col-right {
        padding: 0 20px;
        display: block;
    }
    .vision-text-wrapper {
        position: relative;
        transform: none;
        width: 100%;
        margin-bottom: 50px;
        top: auto; left: auto;
    }
    .vision-text-wrapper p {
        font-size: 18px;
        line-height: 24px;
    }
    /* Nav Vision masquée sur mobile (on utilise le burger) ou positionnée en bas */
    .vision-nav {
        display: none; 
    }
    .vision-logoband {
        margin-top: 60px;
        margin-bottom: 40px;
    }
    
    /* Burger Menu position */
    #menu-button {
        top: 15px;
        right: 15px;
    }
}



/* ========================================================= */
/* JS ADD-ON : Z-MAX CLEANUP STATE                           */
/* ========================================================= */

.landingvp-zmax.transition-finished {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: none !important; /* Coupe l'anim pour éviter tout conflit */
}