/**
 * Navigation animée de My Sport Agency.
 */

:root {
	--msa-menu-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--msa-menu-ease-in: cubic-bezier(0.76, 0, 0.24, 1);
}

body.msa-menu-lock {
	overflow: hidden;
	touch-action: none;
}

em {
    font-family: Instrumentserif;
    font-weight: 300;
    letter-spacing: 0em;
}

.navbar,
.navbar-sticky {
	z-index: 1000;
}

.menu-button,
.menu-button-sticky {
	position: relative;
	z-index: 1003;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.menu-button:focus-visible,
.menu-button-sticky:focus-visible,
.dropdown-toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 8px;
}

.menu-button svg line,
.menu-button-sticky svg line {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.55s var(--msa-menu-ease), stroke 0.35s ease;
}

.menu-button.msa-is-open svg line:first-child,
.menu-button-sticky.msa-is-open svg line:first-child {
	transform: translateY(7px) rotate(45deg);
}

.menu-button.msa-is-open svg line:last-child,
.menu-button-sticky.msa-is-open svg line:last-child {
	transform: translateY(-7px) rotate(-45deg);
}

.msa-menu-backdrop {
	position: fixed;
	z-index: 998;
	inset: 0;
	background: rgb(2 2 2 / 55%);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.55s ease, visibility 0s linear 0.55s;
}

.msa-menu-backdrop.msa-is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

/* Menu principal : plein écran sur tablette et mobile. */
@media screen and (max-width: 991px) {
	.navbar .menu-button {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.navbar .nav-menu {
		z-index: 1001 !important;
		display: flex !important;
		visibility: hidden;
		pointer-events: none;
		opacity: 0;
		clip-path: circle(0% at calc(100% - 72px) 45px);
		transform: translate3d(0, -28px, 0) !important;
		transition:
			clip-path 0.85s var(--msa-menu-ease),
			transform 0.85s var(--msa-menu-ease),
			opacity 0.35s ease,
			visibility 0s linear 0.85s;
		will-change: clip-path, transform;
	}

	.navbar.msa-menu-open .nav-menu {
		visibility: visible;
		pointer-events: auto;
		opacity: 1;
		clip-path: circle(150% at calc(100% - 72px) 45px);
		transform: translate3d(0, 0, 0) !important;
		transition-delay: 0s;
	}

	.navbar .div-block-4 > * {
		opacity: 0;
		transform: translate3d(0, 34px, 0);
		transition:
			transform 0.65s var(--msa-menu-ease),
			opacity 0.45s ease;
		transition-delay: 0s;
	}

	.navbar.msa-menu-open .div-block-4 > :nth-child(1) {
		transition-delay: 0.18s;
	}

	.navbar.msa-menu-open .div-block-4 > :nth-child(2) {
		transition-delay: 0.25s;
	}

	.navbar.msa-menu-open .div-block-4 > :nth-child(3) {
		transition-delay: 0.32s;
	}

	.navbar.msa-menu-open .div-block-4 > :nth-child(4) {
		transition-delay: 0.39s;
	}

	.navbar.msa-menu-open .div-block-4 > * {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

	.navbar .dropdown-list {
		display: flex !important;
		flex-direction: column;
		max-height: 0;
		padding-top: 0;
		padding-bottom: 0;
		overflow: hidden;
		opacity: 0;
		transform: translate3d(0, -12px, 0);
		transition:
			max-height 0.55s var(--msa-menu-ease),
			padding 0.55s var(--msa-menu-ease),
			transform 0.55s var(--msa-menu-ease),
			opacity 0.35s ease;
	}

	.navbar .dropdown.msa-dropdown-open .dropdown-list {
		max-height: 280px;
		padding-top: 10px;
		padding-bottom: 10px;
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

	.navbar-sticky {
		display: none !important;
	}
}

@media screen and (min-width: 480px) and (max-width: 991px) {
	.navbar .menu-button.msa-is-open {
		color: #020202;
	}
}

@media screen and (max-width: 479px) {
	.navbar .menu-button.msa-is-open {
		color: var(--color-1, #eeff00);
	}
}

/* Menu sticky desktop : panneau latéral de droite. */
@media screen and (min-width: 992px) {
	.navbar .menu-button {
		display: none !important;
	}

	.navbar-sticky .menu-button-sticky {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.navbar-sticky .nav-menu-sticky {
		z-index: 1001 !important;
		display: flex !important;
		width: clamp(380px, 25vw, 520px);
		height: 100dvh;
		visibility: hidden;
		pointer-events: none;
		transform: translate3d(105%, 0, 0) !important;
		box-shadow: -30px 0 80px rgb(0 0 0 / 0%);
		transition:
			transform 0.85s var(--msa-menu-ease),
			box-shadow 0.85s ease,
			visibility 0s linear 0.85s;
		will-change: transform;
	}

	.navbar-sticky.msa-menu-open .nav-menu-sticky {
		visibility: visible;
		pointer-events: auto;
		transform: translate3d(0, 0, 0) !important;
		box-shadow: -30px 0 80px rgb(0 0 0 / 22%);
		transition-delay: 0s;
	}

	.navbar-sticky .wrapper-menu-skicky > *,
	.navbar-sticky .nav-menu-sticky > .button {
		opacity: 0;
		transform: translate3d(48px, 0, 0);
		transition:
			transform 0.65s var(--msa-menu-ease),
			opacity 0.45s ease;
		transition-delay: 0s;
	}

	.navbar-sticky.msa-menu-open .wrapper-menu-skicky > :nth-child(1) {
		transition-delay: 0.22s;
	}

	.navbar-sticky.msa-menu-open .wrapper-menu-skicky > :nth-child(2) {
		transition-delay: 0.29s;
	}

	.navbar-sticky.msa-menu-open .wrapper-menu-skicky > :nth-child(3) {
		transition-delay: 0.36s;
	}

	.navbar-sticky.msa-menu-open .wrapper-menu-skicky > :nth-child(4) {
		transition-delay: 0.43s;
	}

	.navbar-sticky.msa-menu-open .wrapper-menu-skicky > *,
	.navbar-sticky.msa-menu-open .nav-menu-sticky > .button {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

	.navbar-sticky.msa-menu-open .nav-menu-sticky > .button {
		transition-delay: 0.5s;
	}

	.navbar-sticky .submenu-sticky {
		display: flex !important;
		flex-direction: column;
		max-height: 0;
		padding-top: 0;
		padding-bottom: 0;
		overflow: hidden;
		opacity: 0;
		transform: translate3d(18px, 0, 0);
		transition:
			max-height 0.55s var(--msa-menu-ease),
			padding 0.55s var(--msa-menu-ease),
			transform 0.55s var(--msa-menu-ease),
			opacity 0.35s ease;
	}

	.navbar-sticky .dropdown-sticky.msa-dropdown-open .submenu-sticky {
		max-height: 280px;
		padding-top: 10px;
		padding-bottom: 10px;
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

	.navbar-sticky .menu-button-sticky.msa-is-open {
		color: #020202;
	}
}

@media (prefers-reduced-motion: reduce) {
	.msa-menu-backdrop,
	.menu-button svg line,
	.menu-button-sticky svg line,
	.navbar .nav-menu,
	.navbar .div-block-4 > *,
	.navbar .dropdown-list,
	.navbar-sticky .nav-menu-sticky,
	.navbar-sticky .wrapper-menu-skicky > *,
	.navbar-sticky .nav-menu-sticky > .button,
	.navbar-sticky .submenu-sticky {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
}

.msa-realisation-background-image {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

/* =========================================================
   SOUS-MENU — NAVBAR PRINCIPALE / ORDINATEUR
   ========================================================= */

@media screen and (min-width: 992px) {

	/*
	 * Le sous-menu reste dans le DOM pour permettre
	 * les transitions, contrairement au display:none de Webflow.
	 */
	.navbar .dropdown-list {
		display: block !important;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;

		transform: translate3d(0, 18px, 0) scale(0.97);
		transform-origin: top left;

		clip-path: inset(0 0 100% 0);

		transition:
			opacity 0.25s ease,
			transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
			clip-path 0.5s cubic-bezier(0.16, 1, 0.3, 1),
			visibility 0s linear 0.5s;

		will-change: opacity, transform, clip-path;
	}

	/*
	 * Ouverture au survol, au clavier
	 * ou lorsque Webflow ajoute w--open.
	 */
	.navbar .dropdown:hover > .dropdown-list,
	.navbar .dropdown:focus-within > .dropdown-list,
	.navbar .dropdown-list.w--open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;

		transform: translate3d(0, 0, 0) scale(1);
		clip-path: inset(0 0 0 0);

		transition-delay: 0s;
	}

	/*
	 * Zone invisible entre le bouton et le sous-menu.
	 * Elle évite que le menu se referme en déplaçant la souris.
	 */
	.navbar .dropdown-list::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 18px;
	}

	/* État initial des liens */
	.navbar .dropdown-list .dropdown-link {
		opacity: 0;
		transform: translate3d(0, 14px, 0);

		transition:
			opacity 0.25s ease,
			transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
	}

	/* Apparition des liens */
	.navbar .dropdown:hover > .dropdown-list .dropdown-link,
	.navbar .dropdown:focus-within > .dropdown-list .dropdown-link,
	.navbar .dropdown-list.w--open .dropdown-link {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

	/* Décalage progressif */
	.navbar .dropdown:hover > .dropdown-list .dropdown-link:nth-child(1),
	.navbar .dropdown:focus-within > .dropdown-list .dropdown-link:nth-child(1),
	.navbar .dropdown-list.w--open .dropdown-link:nth-child(1) {
		transition-delay: 0.08s;
	}

	.navbar .dropdown:hover > .dropdown-list .dropdown-link:nth-child(2),
	.navbar .dropdown:focus-within > .dropdown-list .dropdown-link:nth-child(2),
	.navbar .dropdown-list.w--open .dropdown-link:nth-child(2) {
		transition-delay: 0.13s;
	}

	.navbar .dropdown:hover > .dropdown-list .dropdown-link:nth-child(3),
	.navbar .dropdown:focus-within > .dropdown-list .dropdown-link:nth-child(3),
	.navbar .dropdown-list.w--open .dropdown-link:nth-child(3) {
		transition-delay: 0.18s;
	}

	.navbar .dropdown:hover > .dropdown-list .dropdown-link:nth-child(4),
	.navbar .dropdown:focus-within > .dropdown-list .dropdown-link:nth-child(4),
	.navbar .dropdown-list.w--open .dropdown-link:nth-child(4) {
		transition-delay: 0.23s;
	}

	/*
	 * Rotation du bouton + en croix.
	 */
	.navbar .dropdown-toggle .code-embed-2 {
		transition:
			transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
			filter 0.3s ease;

		transform-origin: center;
	}

	.navbar .dropdown:hover > .dropdown-toggle .code-embed-2,
	.navbar .dropdown:focus-within > .dropdown-toggle .code-embed-2,
	.navbar .dropdown-toggle.w--open .code-embed-2 {
		transform: rotate(45deg) scale(1.08);
	}
}

/* Accessibilité : désactivation des mouvements */
@media (prefers-reduced-motion: reduce) {

	.navbar .dropdown-list,
	.navbar .dropdown-list .dropdown-link,
	.navbar .dropdown-toggle .code-embed-2 {
		transition-duration: 0.01ms !important;
	}
}

/* =========================================================
   IMAGE FULL BANNER — ZOOM + BRIGHTNESS AU SCROLL
   ========================================================= */

.wrappe-image-full-banner {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/*
 * Suppression de l'ancien overlay.
 */
.wrappe-image-full-banner::after {
	content: none !important;
	display: none !important;
}

/*
 * Conteneur animé créé par le JavaScript.
 * Le zoom et la luminosité sont appliqués au même calque.
 */
.wrappe-image-full-banner .msa-banner-zoom {
	display: block;
	width: 100%;
	height: 100%;

	transform: translate3d(0, 0, 0) scale3d(1.25, 1.25, 1);
	transform-origin: center center;

	filter: brightness(0.6);

	will-change: transform, filter;
	backface-visibility: hidden;
}

/*
 * Désactivation de l'ancien parallaxe Webflow.
 * Il provoquait un mouvement différent de celui du zoom.
 */
.wrappe-image-full-banner .image-banner {
	display: block;
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center center;

	transform: none !important;
	filter: none !important;

	backface-visibility: hidden;
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {

	.wrappe-image-full-banner .msa-banner-zoom {
		transform: none !important;
		filter: none !important;
		will-change: auto;
	}
}

/* =========================================================
   SKILLS — INTERACTION ET TRANSITIONS
   ========================================================= */

.columns-skills {
	position: relative;
}

/* ---------------------------------------------------------
   COLONNE DE GAUCHE
   --------------------------------------------------------- */

.columns-skills .line-skills {
	position: relative;
	cursor: pointer;
	outline: none;
}

.columns-skills .wrapper-head-skills {
	transition:
		color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.columns-skills .number-line-expertises,
.columns-skills .title-line-skills,
.columns-skills .wgapper-icon-skills {
	transition:
		color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* État actif en jaune */
.columns-skills .line-skills.is-active .number-line-expertises,
.columns-skills .line-skills.is-active .title-line-skills,
.columns-skills .line-skills.is-active .wgapper-icon-skills {
	color: #eeff00;
}

/* Flèche */
.columns-skills .code-embed-5 {
	display: flex;
	align-items: center;
	justify-content: center;

	transform: rotate(0deg);
	transform-origin: center center;

	transition:
		transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * La flèche diagonale tourne de 45 degrés
 * pour pointer vers le bas.
 */
.columns-skills .line-skills.is-active .code-embed-5 {
	transform: rotate(45deg);
}

/* Focus clavier */
.columns-skills .line-skills:focus-visible {
	outline: 2px solid #eeff00;
	outline-offset: 6px;
}

/* ---------------------------------------------------------
   TEXTE DÉPLIANT
   --------------------------------------------------------- */

.columns-skills .wrapper-content-skills {
	display: grid !important;
	grid-template-rows: 0fr;

	opacity: 0;
	transform: translate3d(0, -10px, 0);

	transition:
		grid-template-rows 0.65s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.35s ease,
		transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.columns-skills .msa-skill-content-inner {
	min-height: 0;
	overflow: hidden;
}

.columns-skills .line-skills.is-active .wrapper-content-skills {
	grid-template-rows: 1fr;
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* ---------------------------------------------------------
   COLONNE IMAGE
   --------------------------------------------------------- */

.columns-skills .col-2-skills {
	position: relative;
}

.columns-skills .wrapper-image-skills {
	position: relative;
	height: 100%;
	min-height: clamp(420px, 52vw, 760px);

	overflow: hidden;
	isolation: isolate;

	background-color: #020202;
}

/* Chaque image occupe exactement la même zone */
.columns-skills .msa-skill-image {
	position: absolute;
	z-index: 1;
	inset: 0;

	opacity: 0;
	visibility: hidden;

	clip-path: inset(0 100% 0 0);

	transform:
		translate3d(5%, 0, 0)
		scale3d(1.12, 1.12, 1);

	filter:
		blur(12px)
		brightness(0.62)
		saturate(0.75);

	transition:
		clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1),
		transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
		filter 0.9s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.35s ease,
		visibility 0s linear 0.9s;

	will-change:
		clip-path,
		transform,
		filter,
		opacity;

	backface-visibility: hidden;
}

/* Image active */
.columns-skills .msa-skill-image.is-active {
	z-index: 2;

	opacity: 1;
	visibility: visible;

	clip-path: inset(0 0 0 0);

	transform:
		translate3d(0, 0, 0)
		scale3d(1, 1, 1);

	filter:
		blur(0)
		brightness(1)
		saturate(1);

	transition-delay: 0s;
}

/* Image réelle */
.columns-skills .msa-skill-image > .image {
	display: block;
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center center;

	transform: scale3d(1.01, 1.01, 1);
	backface-visibility: hidden;
}

/* ---------------------------------------------------------
   PREMIÈRE APPARITION DANS L'ÉCRAN
   --------------------------------------------------------- */

.columns-skills.msa-skills-has-js:not(.msa-skills-in-view)
.msa-skill-image.is-active {
	opacity: 0;
	visibility: visible;

	clip-path: inset(0 100% 0 0);

	transform:
		translate3d(7%, 0, 0)
		scale3d(1.15, 1.15, 1);

	filter:
		blur(14px)
		brightness(0.55)
		saturate(0.65);
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media screen and (max-width: 767px) {

	.columns-skills .wrapper-image-skills {
		height: auto;
		min-height: 0;
		aspect-ratio: 4 / 5;
	}

	.columns-skills .msa-skill-image {
		filter:
			blur(5px)
			brightness(0.72)
			saturate(0.8);
	}
}

/* ---------------------------------------------------------
   ACCESSIBILITÉ
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.columns-skills .wrapper-head-skills,
	.columns-skills .code-embed-5,
	.columns-skills .wrapper-content-skills,
	.columns-skills .msa-skill-image {
		transition-duration: 0.01ms !important;
	}

	.columns-skills .msa-skill-image,
	.columns-skills .msa-skill-image.is-active {
		filter: none;
		transform: none;
	}
}

/* =========================================================
   SECTION SKILLS / EXPERTISES
   Fusion premium des images avec GSAP
   - Désactivation des transitions CSS pendant la fusion
   - Superposition des deux images
   - Balayage chromatique jaune
   ========================================================= */

.columns-skills.msa-skills-gsap-ready .msa-skill-image {
	clip-path: inset(0 0 0 0) !important;
	transition: none !important;
}

/* Balayage jaune créé automatiquement par le JavaScript */
/* =========================================================
   SECTION SKILLS / EXPERTISES
   Lueur douce pendant la fusion des images
   ========================================================= */

.columns-skills .msa-skill-transition-glow {
	position: absolute;
	z-index: 5;
	inset: 0;

	opacity: 0;
	visibility: hidden;

	background:
		radial-gradient(
			circle at 50% 50%,
			rgb(238 255 0 / 10%) 0%,
			rgb(238 255 0 / 5%) 30%,
			transparent 70%
		);

	transform: translate3d(0, 0, 0);
	mix-blend-mode: screen;

	pointer-events: none;
	will-change: opacity;
}

@media screen and (max-width: 767px) {

	.columns-skills .msa-skill-transition-glow {
		background:
			linear-gradient(
				105deg,
				transparent 30%,
				rgb(238 255 0 / 10%) 50%,
				transparent 70%
			);
	}
}

@media (prefers-reduced-motion: reduce) {

	.columns-skills .msa-skill-transition-glow {
		display: none;
	}
}

/* =========================================================
   SECTION PROCESS
   Accordéon horizontal sur ordinateur et vertical sur mobile
   - Premier item actif par défaut
   - Les items fermés affichent uniquement leur numéro
   - Ouverture pilotée par la classe active
   ========================================================= */

.wrapper-process {
	display: flex;
	align-items: stretch;
	gap: clamp(8px, 0.8vw, 14px);
}

/* ---------------------------------------------------------
   ITEMS
   --------------------------------------------------------- */

.wrapper-process .item-process {
	position: relative;

	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: clamp(88px, 8vw, 116px);

	min-width: 0;
	overflow: hidden;

	cursor: pointer;
	outline: none;

	transition:
		flex-grow 1s cubic-bezier(0.22, 1, 0.36, 1),
		flex-basis 1s cubic-bezier(0.22, 1, 0.36, 1),
		background-color 0.6s ease,
		box-shadow 0.6s ease;

	will-change: flex-grow, flex-basis;
}

/* Item ouvert */
.wrapper-process .item-process.active {
	flex-grow: 1;
	flex-basis: 0;
}

/* Focus clavier */
.wrapper-process .item-process:focus-visible {
	outline: 2px solid #eeff00;
	outline-offset: -4px;
}

/* ---------------------------------------------------------
   NUMÉRO
   --------------------------------------------------------- */

.wrapper-process .head-process {
	position: relative;
	z-index: 2;
}

.wrapper-process .head-process .title-h4 {
	transition:
		color 0.45s ease,
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.wrapper-process .item-process:not(.active)
.head-process .title-h4 {
	transform: translate3d(0, 0, 0);
}

/* ---------------------------------------------------------
   CONTENU
   --------------------------------------------------------- */

.wrapper-process .wrapper-content-process {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transform: translate3d(30px, 0, 0);

	transition:
		opacity 0.35s ease,
		transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear 0.8s;
}

/*
 * Une largeur interne stable évite que le texte
 * se reformate pendant l’ouverture horizontale.
 */
.wrapper-process .msa-process-content-inner {
	min-width: clamp(360px, 42vw, 680px);
	height: 100%;
}

/* Contenu de l’item ouvert */
.wrapper-process .item-process.active
.wrapper-content-process {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	transform: translate3d(0, 0, 0);

	transition-delay: 0.16s;
}

/* ---------------------------------------------------------
   TABLETTE ET MOBILE
   --------------------------------------------------------- */

@media screen and (max-width: 767px) {

	.wrapper-process {
		flex-direction: column;
		gap: 8px;
	}

	.wrapper-process .item-process,
	.wrapper-process .item-process.active {
		flex: none;
		width: 100%;
	}

	/*
	 * Élément fermé :
	 * seule la hauteur du numéro reste visible.
	 */
	.wrapper-process .item-process {
		max-height: 76px;

		transition:
			max-height 0.85s cubic-bezier(0.22, 1, 0.36, 1),
			background-color 0.5s ease;
	}

	/*
	 * Élément ouvert.
	 */
	.wrapper-process .item-process.active {
		max-height: 700px;
	}

	/*
	 * Accordéon vertical à hauteur animable.
	 */
	.wrapper-process .wrapper-content-process {
		display: grid !important;
		grid-template-rows: 0fr;

		opacity: 0;
		visibility: hidden;

		transform: translate3d(0, 16px, 0);

		transition:
			grid-template-rows 0.85s
				cubic-bezier(0.22, 1, 0.36, 1),
			opacity 0.4s ease,
			transform 0.75s
				cubic-bezier(0.22, 1, 0.36, 1),
			visibility 0s linear 0.85s;
	}

	.wrapper-process .msa-process-content-inner {
		min-width: 0;
		min-height: 0;
		height: auto;
		overflow: hidden;
	}

	.wrapper-process .item-process.active
	.wrapper-content-process {
		grid-template-rows: 1fr;

		opacity: 1;
		visibility: visible;

		transform: translate3d(0, 0, 0);

		transition-delay: 0.12s;
	}
}

/* ---------------------------------------------------------
   ACCESSIBILITÉ
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.wrapper-process .item-process,
	.wrapper-process .wrapper-content-process,
	.wrapper-process .head-process .title-h4 {
		transition-duration: 0.01ms !important;
	}
}

/* =========================================================
   PROCESS — MOUVEMENT LENT ET PROGRESSIF
   ========================================================= */

.item-process {
	box-sizing: border-box;
	min-width: 0;

	/* Un peu plus haut que la version précédente. */
	min-height: clamp(420px, 32vw, 460px);

	overflow: hidden;
	cursor: pointer;
	outline: none;

	flex: 1 1 0%;

	/*
	 * Le padding est identique ouvert ou fermé.
	 * Le titre ne descend donc plus pendant l’ouverture.
	 */
	padding-top: 80px;

	transition:
		flex-basis 1400ms cubic-bezier(.22, 1, .36, 1),
		flex-grow 1400ms cubic-bezier(.22, 1, .36, 1),
		background-color 1000ms cubic-bezier(.22, 1, .36, 1),
		box-shadow 1200ms cubic-bezier(.22, 1, .36, 1);

	will-change: flex-basis;
}

.item-process.active {
	flex: 0 0 60%;
	padding-top: 80px;

	background-color: rgba(238, 255, 0, 0.12);
	box-shadow: 0 20px 60px rgba(2, 2, 2, 0.06);
}

.wrapper-content-process {
	box-sizing: border-box;
	width: var(--process-content-width);
	min-width: var(--process-content-width);
	max-width: var(--process-content-width);

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
		opacity 400ms ease,
		visibility 0s linear 500ms;
}

.item-process.active .wrapper-content-process {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	transition:
		opacity 500ms ease 100ms,
		visibility 0s linear 0s;
}

/* Mots du titre. */
.wrapper-process.msa-process-enhanced .msa-process-word {
	display: inline-block;
	opacity: 0;
	filter: blur(6px);
}

/*
 * Chaque mot du paragraphe reste insécable,
 * mais ses lettres peuvent apparaître séparément.
 */
.wrapper-process.msa-process-enhanced .msa-process-word-group {
	display: inline-block;
}

.wrapper-process.msa-process-enhanced .msa-process-character {
	display: inline-block;
	opacity: 0;
	filter: blur(4px);
}

/* Tablette */
@media screen and (max-width: 991px) and (min-width: 768px) {
	.item-process {
		min-height: 420px;
	}

	.item-process.active {
		flex-basis: 68%;
	}
}

/* Mobile */
@media screen and (max-width: 767px) {
	.item-process {
		flex: 0 0 72px;
		min-height: 0;
		padding-top: 72px;
	}

	.item-process.active {
		flex: 0 0 410px;
		padding-top: 72px;
	}
}

@media screen and (max-width: 479px) {
	.item-process.active {
		flex-basis: 430px;
	}
}

/* =========================================================
   IMAGE BANNER — MASQUE POUR ANIMATION 3D FABRICA
   ========================================================= */

.p-wrapper-image-banner {
	perspective: 1200px;
}

.wrapper-image-banner {
	border-radius: 25px;
	overflow: hidden;
	isolation: isolate;
	transform: translateZ(0);
}

.wrapper-image-banner .image-banner {
	display: block;
	object-fit: cover;
	width: 100%;
	min-width: 100%;
	height: 100%;

	transform-origin: 50% 50%;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	will-change: transform;
}

/* Évite une image vide avant le chargement de la source. */
.wrapper-image-banner .image-banner:not([src]),
.wrapper-image-banner .image-banner[src=""] {
	visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.wrapper-image-banner .image-banner {
		transform: none !important;
		will-change: auto;
	}
}

/* =========================================================
   CARROUSEL ÉQUIPE — DÉFILEMENT FLICKITY
   ========================================================= */

.carousel-equipe {
	width: 100%;
	position: relative;
}

.carousel-equipe .flickity-viewport {
	width: 100%;
	overflow: hidden;
	cursor: grab;
}

.carousel-equipe.is-pointer-down .flickity-viewport {
	cursor: grabbing;
}

.carousel-equipe .flickity-slider {
	will-change: transform;
}

.carousel-equipe .item-equipe {
	box-sizing: border-box;
	flex: none;
	width: 25%;
}

.carousel-equipe .wrapper-image-equipe .image {
	display: block;
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: none;
}

/* Tablette */
@media screen and (max-width: 991px) {
	.carousel-equipe .item-equipe {
		width: 40%;
	}
}

/* Mobile */
@media screen and (max-width: 767px) {
	.carousel-equipe .item-equipe {
		width: 66.666%;
	}
}

@media screen and (max-width: 479px) {
	.carousel-equipe .item-equipe {
		width: 82%;
	}
}

/* =========================================================
   ENVIRONNEMENT — TITRES INTERACTIFS ET PANNEAUX
   ========================================================= */

.line-environnement {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	cursor: pointer;
	outline: none;

	transition:
		color 700ms cubic-bezier(.22, 1, .36, 1),
		border-color 700ms cubic-bezier(.22, 1, .36, 1);
}

/* =========================================================
   ENVIRONNEMENT — COULEUR DE L’ÉLÉMENT ACTIF
   ========================================================= */

.line-environnement {
	color: #020202;
	cursor: pointer;
	outline: none;

	transition:
		color 900ms cubic-bezier(.22, 1, .36, 1),
		border-color 900ms cubic-bezier(.22, 1, .36, 1);
}

.line-environnement .title-h4,
.line-environnement .wgapper-icon-environnement,
.line-environnement .code-embed-5 {
	color: inherit;

	transition:
		color 900ms cubic-bezier(.22, 1, .36, 1),
		transform 1100ms cubic-bezier(.22, 1, .36, 1);
}

.line-environnement.is-active {
	color: #eeff00;
	border-bottom-color: rgba(238, 255, 0, 0.55);
}

.line-environnement .code-embed-5 {
	transform: rotate(0deg);
	transform-origin: center;
}

.line-environnement.is-active .code-embed-5 {
	transform: rotate(-45deg);
}

.line-environnement:focus-visible {
	box-shadow: inset 0 0 0 2px #eeff00;
}

.line-environnement .wrapper-head-skills {
	position: relative;
	z-index: 1;
}

/* Animation douce du titre. */
.line-environnement .title-h4 {
	transition:
		color 700ms cubic-bezier(.22, 1, .36, 1);
}

/* Animation de la flèche. */
.line-environnement .code-embed-5 {
	transform: rotate(0deg);
	transform-origin: center;

	transition:
		transform 1100ms cubic-bezier(.22, 1, .36, 1),
		color 700ms cubic-bezier(.22, 1, .36, 1);
}

.line-environnement.is-active .code-embed-5 {
	transform: rotate(-45deg);
}

/* Accessibilité clavier. */
.line-environnement:focus-visible {
	box-shadow: inset 0 0 0 2px #020202;
}

/* =========================================================
   ENVIRONNEMENT — PANNEAUX DE TEXTE
   ========================================================= */

.wrapper-panels-environnement {
	position: relative;
	width: 100%;
	min-height: 220px;
}

.wrapper-content-environnement {
	position: absolute;
	z-index: 1;
	inset: 0;

	width: 100%;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	filter: blur(5px);

	transition:
		opacity 400ms ease,
		filter 500ms ease,
		visibility 0s linear 500ms;
}

.wrapper-content-environnement.is-active {
	z-index: 2;

	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	filter: blur(0);

	transition:
		opacity 700ms ease,
		filter 800ms ease,
		visibility 0s linear 0s;
}

/* Les mots sont ajoutés automatiquement par JavaScript. */
.msa-environnement-enhanced .msa-environnement-word {
	display: inline-block;
	opacity: 0;
	filter: blur(5px);
}

/* Conserve l’alignement à droite du thème. */
.wrapper-content-environnement .text-block-2 {
	text-align: right;
}

.wrapper-content-environnement .text-block-2 p {
	margin-top: 0;
	margin-bottom: 1.4em;
}

.wrapper-content-environnement .text-block-2 p:last-child {
	margin-bottom: 0;
}

/* Mobile */
@media screen and (max-width: 767px) {
	.wrapper-panels-environnement {
		min-height: 280px;
		margin-top: 30px;
	}

	.wrapper-content-environnement .text-block-2 {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.line-environnement,
	.line-environnement::before,
	.line-environnement .code-embed-5,
	.wrapper-content-environnement,
	.msa-environnement-word {
		transition: none !important;
	}
}

/* =========================================================
   GALERIE RÉALISATION — CARROUSEL CONTINU
   ========================================================= */

/* =========================================================
   GALERIE — AFFICHAGE HORIZONTAL AVANT FLICKITY
   ========================================================= */

.wrapper-images-slider {
	width: 100%;
	overflow: hidden;
}

/*
 * Avant l’initialisation de Flickity, les images restent
 * horizontales plutôt que de s’empiler verticalement.
 */
.wrapper-images-slider:not(.flickity-enabled) {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

/* Flickity gère ensuite lui-même le positionnement. */
.wrapper-images-slider.flickity-enabled {
	display: block;
}

.wrapper-images-slider .block-image-realisation {
	box-sizing: border-box;
	flex: 0 0 40vw;
	width: 40vw;
	margin-right: 10px;
	margin-left: 10px;
}

.wrapper-images-slider .flickity-viewport {
	width: 100%;
	overflow: hidden;
	cursor: grab;
}

.wrapper-images-slider.is-pointer-down .flickity-viewport {
	cursor: grabbing;
}

.wrapper-images-slider .flickity-slider {
	will-change: transform;
}

.wrapper-images-slider .block-image-realisation {
	box-sizing: border-box;
	flex: none;
	width: 40vw;
	margin-right: 10px;
	margin-left: 10px;
}

.wrapper-images-slider .block-image-realisation .image {
	display: block;
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: none;
}

/* Tablette */
@media screen and (max-width: 991px) {
	.wrapper-images-slider .block-image-realisation {
		width: 58vw;
	}
}

/* Mobile */
@media screen and (max-width: 767px) {
	.wrapper-images-slider .block-image-realisation {
		width: 72vw;
	}
}

@media screen and (max-width: 479px) {
	.wrapper-images-slider .block-image-realisation {
		width: 86vw;
	}
}

/* =========================================================
   INTERVENTIONS — LISTE ET IMAGES INTERACTIVES
   ========================================================= */

.wrapper-production-interactive {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 0.75fr);
	gap: clamp(40px, 8vw, 140px);
	align-items: stretch;
}

/* Lignes interactives */
.line-production {
	cursor: pointer;
	outline: none;

	transition:
		color 900ms cubic-bezier(.22, 1, .36, 1),
		border-color 900ms cubic-bezier(.22, 1, .36, 1);
}

.line-production .wrapper-head-skills,
.line-production .title-h4,
.line-production .number-line-expertises,
.line-production .wgapper-icon-production {
	color: inherit;
}

.line-production .code-embed-5 {
	transform: rotate(0deg);
	transform-origin: center;

	transition:
		transform 1100ms cubic-bezier(.22, 1, .36, 1),
		color 900ms cubic-bezier(.22, 1, .36, 1);
}

/* Élément actif */
.line-production.is-active {
	color: #eeff00;
	border-bottom-color: rgba(238, 255, 0, 0.55);
}

.line-production.is-active .code-embed-5 {
	transform: rotate(-45deg);
}

.line-production:focus-visible {
	box-shadow: inset 0 0 0 2px #eeff00;
}

/* Conteneur des images superposées */
.wrapper-images-production {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 12px;
	isolation: isolate;
	background-color: #e7e7e7;
}

/* Chaque image occupe le même espace */
.production-image-panel {
	position: absolute;
	z-index: 1;
	inset: 0;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transform: scale(1.06);
	filter: blur(12px);
	clip-path: inset(4% round 16px);
}

.production-image-panel.is-active {
	z-index: 2;
	opacity: 1;
	visibility: visible;
	filter: blur(0);
	transform: scale(1);
	clip-path: inset(0 round 0);
}

.production-image-panel .image {
	display: block;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* Tablette et mobile */
@media screen and (max-width: 991px) {
	.wrapper-production-interactive {
		grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
		gap: 40px;
	}
}

@media screen and (max-width: 767px) {
	.wrapper-production-interactive {
		grid-template-columns: 1fr;
	}

	.wrapper-images-production {
		aspect-ratio: 4 / 3;
		margin-top: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.line-production,
	.line-production .code-embed-5,
	.production-image-panel {
		transition: none !important;
	}
}

/* Le shortcode occupe toute la largeur du wrapper Webflow. */
.wrapper-expertises > .wrapper-production-interactive {
	width: 100%;
}

.wrapper-production-interactive {
    width: 100%;
}

/* =========================================================
   SOUS-MENU PRINCIPAL — LISIBILITÉ PREMIUM
   ========================================================= */

@media screen and (min-width: 992px) {

	/* Panneau du sous-menu */
	.navbar .dropdown-list {

		min-width: 250px;
		margin-top: 0;
		padding: 12px !important;

		background: rgba(2, 2, 2, 0.92);
		border: 1px solid rgba(255, 255, 255, 0.12);
		border-radius: 14px;

		box-shadow:
			0 20px 50px rgba(0, 0, 0, 0.2),
			0 4px 12px rgba(0, 0, 0, 0.12);

		-webkit-backdrop-filter: blur(18px);
		backdrop-filter: blur(18px);

		overflow: visible;
		z-index: 1001;
	}

	/* Liens du sous-menu */
	.navbar .dropdown-list .dropdown-link {
		width: 100%;
		padding: 10px 12px;

		color: #fff;
		border-radius: 8px;
		white-space: nowrap;

		transition:
			color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
			background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
			opacity 0.25s ease,
			transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
	}

	/* Survol jaune MSA */
	.navbar .dropdown-list .dropdown-link:hover,
	.navbar .dropdown-list .dropdown-link:focus-visible,
	.navbar .dropdown-list .dropdown-link.w--current {
		color: #020202;
		background-color: #eeff00;
	}

	/* Petite pointe sous le lien Expertises */
	.navbar .dropdown-list::after {
		content: "";
		position: absolute;
		bottom: 100%;
		left: 24px;

		width: 12px;
		height: 12px;

		background: rgba(2, 2, 2, 0.92);
		transform: translateY(6px) rotate(45deg);
	}
}

/* =========================================================
   GRILLE RÉALISATIONS — STRUCTURE ET ANIMATION
   ========================================================= */

.msa-grid-realisations {
	grid-template-rows: none;
}

/* Carte */
.msa-grid-realisations .item-realisations-grid {
	width: 100%;
	margin: 0;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Média de fond */
.msa-grid-realisations
.msa-grid-realisation-media {
	z-index: 1;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;

	transform: scale(1.01);

	transition:
		transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);

	will-change: transform;
}

/* Image et vidéo */
.msa-grid-realisations
.msa-grid-realisation-media video,

.msa-grid-realisations
.msa-grid-realisation-media img {
	width: 100%;
	height: 100%;
	display: block;

	object-fit: cover;
	object-position: center;

	filter:
		grayscale(1)
		brightness(0.78)
		contrast(1.08);

	transform: scale(1.02);

	transition:
		filter 1.15s cubic-bezier(0.16, 1, 0.3, 1),
		transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);

	will-change: filter, transform;
}

/* Overlay */
.msa-grid-realisations .overlay-item {
	z-index: 2;
	opacity: 0.82;

	transition:
		opacity 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Contenu */
.msa-grid-realisations
.content-item-realisation {
	z-index: 3;
	position: relative;
}

/* Bouton masqué hors survol */
.msa-grid-realisations
.wrapper-middle-item-realisations
.button {
	opacity: 0;
	pointer-events: none;

	transform:
		translate3d(0, 14px, 0)
		scale(0.94);

	transition:
		opacity 0.55s ease,
		transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Contenu haut */
.msa-grid-realisations
.wrapper-top-item-realisations {
	transition:
		transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
		opacity 0.6s ease;
}

/* Contenu bas */
.msa-grid-realisations
.wrapper-bottom-item-realisations {
	transition:
		transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
		opacity 0.6s ease;
}

/* =========================================================
   GRILLE RÉALISATIONS — SURVOL ORDINATEUR
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

	/* Zoom global du média */
	.msa-grid-realisations
	.item-realisations-grid:hover
	.msa-grid-realisation-media,

	.msa-grid-realisations
	.item-realisations-grid:focus-within
	.msa-grid-realisation-media,

	.msa-grid-realisations
	.item-realisations-grid.is-hovered
	.msa-grid-realisation-media {
		transform: scale(1.045);
	}

	/* Retour progressif à la couleur */
	.msa-grid-realisations
	.item-realisations-grid:hover
	.msa-grid-realisation-media video,

	.msa-grid-realisations
	.item-realisations-grid:hover
	.msa-grid-realisation-media img,

	.msa-grid-realisations
	.item-realisations-grid:focus-within
	.msa-grid-realisation-media video,

	.msa-grid-realisations
	.item-realisations-grid:focus-within
	.msa-grid-realisation-media img,

	.msa-grid-realisations
	.item-realisations-grid.is-hovered
	.msa-grid-realisation-media video,

	.msa-grid-realisations
	.item-realisations-grid.is-hovered
	.msa-grid-realisation-media img {
		filter:
			grayscale(0)
			brightness(1)
			contrast(1);

		transform: scale(1.065);
	}

	/* Overlay légèrement moins marqué en couleur */
	.msa-grid-realisations
	.item-realisations-grid:hover
	.overlay-item,

	.msa-grid-realisations
	.item-realisations-grid:focus-within
	.overlay-item,

	.msa-grid-realisations
	.item-realisations-grid.is-hovered
	.overlay-item {
		opacity: 0.72;
	}

	/* Apparition du bouton */
	.msa-grid-realisations
	.item-realisations-grid:hover
	.wrapper-middle-item-realisations
	.button,

	.msa-grid-realisations
	.item-realisations-grid:focus-within
	.wrapper-middle-item-realisations
	.button,

	.msa-grid-realisations
	.item-realisations-grid.is-hovered
	.wrapper-middle-item-realisations
	.button {
		opacity: 1;
		pointer-events: auto;

		transform:
			translate3d(0, 0, 0)
			scale(1);
	}

	/* Mouvement subtil du contenu haut */
	.msa-grid-realisations
	.item-realisations-grid:hover
	.wrapper-top-item-realisations,

	.msa-grid-realisations
	.item-realisations-grid:focus-within
	.wrapper-top-item-realisations {
		transform: translate3d(0, 3px, 0);
	}

	/* Mouvement subtil du contenu bas */
	.msa-grid-realisations
	.item-realisations-grid:hover
	.wrapper-bottom-item-realisations,

	.msa-grid-realisations
	.item-realisations-grid:focus-within
	.wrapper-bottom-item-realisations {
		transform: translate3d(0, -3px, 0);
	}
}

/* =========================================================
   GRILLE RÉALISATIONS — TABLETTE ET MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

	.msa-grid-realisations {
		grid-template-columns: 1fr;
	}

	.msa-grid-realisations
	.item-realisations-grid {
		width: 100%;
		margin: 0;
	}

	/*
	 * Le bouton reste visible sur les appareils
	 * ne disposant pas de véritable survol.
	 */
	.msa-grid-realisations
	.wrapper-middle-item-realisations
	.button {
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}
}

/* =========================================================
   GRILLE RÉALISATIONS — ACCESSIBILITÉ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.msa-grid-realisations *,
	.msa-grid-realisations *::before,
	.msa-grid-realisations *::after {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
}