/*
	TMARK 
	— FONTS
	— VARIABLES & GENERAL
	— INTRO
	— HEADER
	— GRID & LAYOUT
	— AVOCATS GRID
	— PROFILES (POPUP)
*/

/*
	FONTS ////////////////////////////////////////////////////////////////////////////
*/
	@font-face {
	  font-family: "PPMori";
	  src: url('../ui/fonts/Regular.woff2') format('woff2');
	  font-weight: 400;
	  font-style: normal;
	}
	@font-face {
	  font-family: "PPMori";
	  src: url('../ui/fonts/SemiBold.woff2') format('woff2');
	  font-weight: 600;
	  font-style: normal;
	}

/*
	VARIABLES & GENERAL ////////////////////////////////////////////////////////////////////////////
*/
	:root {
	  --padding: 32px;
	  --easing: cubic-bezier(0.83, 0, 0.17, 1);
	  --chrome-bg: #ffffff;
	  --secure-lock-offset: -3px;
	}

	html,
	body {
		background: var(--chrome-bg);
	}

	body {
		font-family: "PPMori", 'Helvetica Neue', Helvetica, arial, sans-serif;
		font-size: 16px;
		margin: 0;
		padding: 0;
		background: var(--chrome-bg);
		color: #000;
		-webkit-font-smoothing: antialiased;
		overflow-x: hidden;
	}

	h2 {
		font-size: 56px;
		letter-spacing: -1.12px;
		line-height: 53px;
		margin: 0;
		font-weight: 600;
	}

	/* CSS Reset & Utilities */
	* { box-sizing: border-box; }
	ul { list-style: none; padding: 0; margin: 0; }
	button { background: none; border: none; cursor: pointer; padding: 0; outline: none; }
	a { color: inherit; text-decoration: none; }

/*
	UTILITIES & FX ////////////////////////////////////////////////////////////////////////////
*/
	.bvm-fade-line {
		transition: opacity 0.3s var(--easing);
	}

/*
	INTRO (From anim-test) ////////////////////////////////////////////////////////////////////////////
*/
	.intro-container {
		display: flex;
		justify-content: center;
		padding: calc(var(--padding) * 2);
		width: 100vw;
		height: 100vh;
		z-index: 10;
		float: left;
		position: relative;
		pointer-events: none; /* Allow clicks to pass through */
	}

	.intro-tagline {
		display: block;
		position: absolute;
		height: 105px;
		background-size: auto 105px;
		background-repeat: no-repeat;
	    background-position: 0 105px;
		animation-name: intro-tagline, tagline-fadeout;
	    animation-fill-mode: forwards;
	    animation-timing-function: var(--easing), ease;
	}

	@keyframes intro-tagline {
	  from { background-position: 0 105px; }
	  to { background-position: 0 0; }
	}
	@keyframes tagline-fadeout {
	  from { opacity: 1; }
	  to { opacity: 0; }
	}

	.intro-tagline.intro-1 {
		width: 655px;
		top: 32px;
		left: 32px;
		background-image: url(../ui/intro-1.png);
		animation-delay: .1s, .7s;
		animation-duration: .6s, 3s;
	}

	.intro-tagline.intro-2 {
		width: 771px;
		top: 137px;
		left: 202px;
		background-image: url(../ui/intro-2.png);
		animation-delay: .3s, .9s;
		animation-duration: .4s, 3s;
	}

	.intro-tagline.intro-3 {
		width: 714px;
		top: 245px;
		left: 32px;
		background-image: url(../ui/intro-3.png);
		animation-delay: .4s, 1.1s;
		animation-duration: .4s, 3s;
	}

	.logo-right-wrapper {
		display: block;
		position: absolute;
		width: 350px;
		height: 153px;
		box-sizing: border-box;
		padding-top: 153px;
		top: 32px;
		right: 32px;
		overflow: hidden;
		animation-name: intro-logo-reveal, intro-logo-expand, intro-logo-exit;
	    animation-fill-mode: forwards;
	    animation-timing-function: var(--easing);
		animation-delay: .4s, 1.6s, 3s;
		animation-duration: .5s, .7s, .7s;
	}

	@keyframes intro-logo-reveal {
	  0% { padding-top: 153px; opacity: 0; }
	  20% { opacity: 0; }
	  50% { opacity: 1; }
	  100% { padding-top: 0; }
	}
	@keyframes intro-logo-expand {
	  0% { width: 350px; right: 32px; }
	  100% { width: calc(755px + 32px); right: 0; }
	}
	@keyframes intro-logo-exit {
	  0% { }
	  100% { height: 0; }
	}

	.logo-right {
		display: block;
		position: relative;
		height: 153px;
		top: 0;
		left: 0;
		background-image: url(../ui/logo.svg);
		background-repeat: no-repeat;
	}

	/* Mobile Intro scaling */
	@media screen and (max-width: 900px) {
		.intro-tagline {
			height: calc((100vw - 80px) * 105 / 941);
			background-size: auto calc((100vw - 80px) * 105 / 941);
			animation-name: intro-tagline-mobile, tagline-fadeout;
		}
		@keyframes intro-tagline-mobile {
			from { background-position: 0 calc((100vw - 80px) * 105 / 941); }
			to { background-position: 0 0; }
		}
		
		.intro-tagline.intro-1 {
			width: calc((100vw - 80px) * 655 / 941);
			top: 120px;
			left: 40px;
		}
		.intro-tagline.intro-2 {
			width: calc((100vw - 80px) * 771 / 941);
			top: calc(120px + ((100vw - 80px) * 105 / 941));
			left: calc(40px + ((100vw - 80px) * 170 / 941));
		}
		.intro-tagline.intro-3 {
			width: calc((100vw - 80px) * 714 / 941);
			top: calc(120px + ((100vw - 80px) * 213 / 941));
			left: 40px;
		}
		
		.logo-right-wrapper {
			display: none !important;
		}
		@keyframes intro-logo-reveal-mobile {
			0% { padding-top: 65px; opacity: 0; }
			20% { opacity: 0; }
			50% { opacity: 1; }
			100% { padding-top: 0; }
		}
		@keyframes intro-logo-expand-mobile {
			0% { width: 150px; right: 40px; }
			100% { width: calc(100vw - 80px); right: 40px; }
		}
		@keyframes intro-logo-exit-mobile {
			0% { }
			100% { height: 0; }
		}
	}

	.portraits {
		display: flex;
		position: fixed; /* By default fixed during cinematic and early scroll */
		width: calc(100vw - 64px);
		left: 32px;
		bottom: 32px;
		font-size: 0;
		pointer-events: auto;
		z-index: 5;
	}

	.avocats-section {
		position: relative; /* Context for absolute .portraits */
		padding-top: calc(((100vw - 64px) / 4) * 1.1 + 130px); /* Space for the 4 intro portraits + info blocks */
	}

	.portraits.scrolling-mode {
		position: relative;
		width: 100%;
		height: auto;
		bottom: auto;
		right: auto;
		left: auto;
		pointer-events: none; /* Let grid clicks pass through if it overlaps */
	}

	.portrait-card {
		flex: 1;
		font-size: 0;
		animation-name: intro-portrait-reveal;
	    animation-fill-mode: forwards;
	    animation-timing-function: var(--easing);
		animation-duration: .7s;
	  	opacity: 0;
		cursor: pointer;
		pointer-events: auto; /* Re-enable clicks specifically for cards */
	}

	.portrait {
		position: relative;
		width: 100%;
		aspect-ratio: 1 / 1;
		background-color: #E8E8E8;
		transition: aspect-ratio 0.8s var(--easing);
		overflow: hidden;
	}

	.avocat-photo-inner { /* Shared class with main grid */
		position: absolute;
		width: 180%;
		height: 180%;
		left: -40%;
		top: -28%;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		will-change: width, height, left, top; /* Optimisation GSAP Layout */
	}

	.portraits.is-in-grid .portrait {
		aspect-ratio: 1 / 1.1;
	}

	.portraits .portrait-card {
		position: relative;
	}

	.portraits .avocat-info {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.5s var(--easing);
	}

	.portraits.is-in-grid .avocat-info {
		opacity: 1;
		pointer-events: auto;
	}

	@keyframes intro-portrait-reveal {
	  from { opacity: 0; transform: translateY(40px); }
	  to { opacity: 1; transform: translateY(0); }
	}

	.portrait-1 { animation-delay: .4s; }
	.portrait-2 { animation-delay: .425s; }
	.portrait-3 { animation-delay: .45s; }
	.portrait-4 { animation-delay: .475s; }

/*
	HEADER & LAYOUT BASE ////////////////////////////////////////////////////////////////////////////
*/
	#main-header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 160px;
		z-index: 100; /* Restored: Header runs under fullscreen menu (2000) and Profile popup (1000) */
		pointer-events: none;
	}

	#main-header::before {
		content: "";
		position: absolute;
		inset: 0;
		background: #FFF;
		opacity: 0;
		transition: opacity 0.6s var(--easing);
		z-index: -1;
	}

	body.profile-is-open #main-header::before {
		opacity: 1;
	}

	.header-col-1, .header-col-2, .header-col-3, .header-col-4 {
		position: relative;
		pointer-events: auto;
		margin-top: 36px;
	}

	.header-blur-container {
		position: absolute;
		top: -10px; 
		left: -10px;
		right: -10px;
		height: 190px; 
		pointer-events: none;
		z-index: 0;
		overflow: hidden; 
	}

	.blur-layer {
		position: absolute;
		top: -100%;
		left: 0;
		right: 0;
		height: 100%;
		pointer-events: none;
		-webkit-backdrop-filter: blur(var(--blur-px));
		backdrop-filter: blur(var(--blur-px));
		-webkit-mask-image: linear-gradient(to bottom, black var(--mask-start), transparent var(--mask-end));
		mask-image: linear-gradient(to bottom, black var(--mask-start), transparent var(--mask-end));
		transition: top 1.2s var(--easing);
	}

	#main-header.is-scrolled .blur-layer {
		top: 0;
	}

	.layer-1 { --blur-px: 16px; --mask-start: 15%; --mask-end: 30%; }
	.layer-2 { --blur-px: 8px;  --mask-start: 30%; --mask-end: 55%; }
	.layer-3 { --blur-px: 4px;  --mask-start: 55%; --mask-end: 80%; }
	.layer-4 { --blur-px: 2px;  --mask-start: 80%; --mask-end: 100%; }

	.gradient-overlay {
		position: absolute;
		inset: 0;
		background: linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%);
		z-index: 1;
		opacity: 0;
		transition: opacity 1s ease-in-out;
	}

	#main-header.is-scrolled .gradient-overlay {
		opacity: 1;
	}

	.logo-left {
		display: block;
		width: 100%;
		max-width: 400px;
		background-image: url(../ui/logo.svg);
		background-repeat: no-repeat;
		background-size: 100% auto;
	    background-position: left top;
		overflow: hidden;
		height: 82px; /* Fixe, animation retirée selon spécification client */
		pointer-events: auto;
		transition: transform 0.6s var(--easing);
		transform-origin: left top;
		cursor: pointer;
		opacity: 0;
	}
	body.profile-is-open .logo-left {
		transform: scale(0.59) translateY(-27px);
		transition-delay: 0.2s;
	}

	#main-h1-intro {
		overflow: visible; /* on masque par ligne, pas au niveau du h1 */
	}

	#main-h1-intro .line {
		display: inline-block;
		overflow: hidden;
		vertical-align: baseline;
		padding-bottom: 0.1em;
		margin-bottom: -0.4em;
	}

	#main-h1-intro .line .reveal {
		display: inline-block;
		transform: translateY(28px);
		opacity: 0;
		transition: transform .6s var(--easing), opacity .6s ease;
		will-change: transform, opacity;
	}

	#main-h1-intro.is-visible .line .reveal {
		transform: translateY(0);
		opacity: 1;
	}

	.nc-a-left-text .line {
		display: block;
		overflow: hidden;
	}

	.nc-a-left-text .line .reveal {
		display: block;
		will-change: transform, opacity;
	}

	nav.navbar {
		display: block;
		pointer-events: auto;
	}

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

	.nav-col {
		display: flex;
		flex-direction: column;
		gap: 8px; /* space between rows */
	}

	.navbar li {
		display: block;
		opacity: 0;
		font-size: 20px;
		color: #000;
		letter-spacing: -0.3px;
		transition: opacity 2s ease;
		font-weight: 600 !important;
		cursor: pointer;
	}

	.navbar li a {
		text-decoration: none;
		color: inherit;
		display: inline-block;
		transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1);
	}

	.navbar li:hover a {
		transform: translateX(10px);
		transition: transform 4s cubic-bezier(0,.97,0,1.01);
	}

	.navbar li.is-visible {
		opacity: 1;
	}

	button.burger {
		position: fixed;
		top: 32px;
		right: var(--padding);
		z-index: 3000;
		border: none;
		width: 32px;
		height: 24px;
		background: transparent;
		pointer-events: auto;
	}

	button.burger .bar {
		display: block;
		position: absolute;
		right: 0; /* Align right to match mockup */
		background-color: black;
		width: 0;
		height: 3px;
	    animation-name: burger-bars;
	    animation-fill-mode: forwards;
	    animation-timing-function: var(--easing);
		animation-duration: 1s;
		transition: transform 2s cubic-bezier(0, .97, 0, 1.01);
	}

	@keyframes burger-bars {
	  from { width: 0; }
	  to { width: 22px; }
	}

	button.burger .bar.top { top: 0; animation-delay: 3.9s; }
	button.burger .bar.bottom { top: 9px; width: 0; animation-name: burger-bars; animation-delay: 4s; }

	html.intro-skipped button.burger .bar.top,
	html.intro-skipped button.burger .bar.bottom {
		animation-delay: 0.15s !important;
	}

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

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

	/* Menu Open: Croix */
	button.burger.is-active .bar.top,
	button.burger.is-active:hover .bar.top {
		transform: translateY(4.5px) rotate(45deg);
	}

	button.burger.is-active .bar.bottom,
	button.burger.is-active:hover .bar.bottom {
		transform: translateY(-4.5px) rotate(-45deg);
	}

	.legal-page-body button.burger {
		pointer-events: auto;
		opacity: 1;
	}

	.legal-page-body button.burger .bar.top,
	.legal-page-body button.burger .bar.bottom {
		animation-delay: 0.15s !important;
	}

	.legal-page-body nav.navbar,
	.legal-page-body .navbar ul,
	.legal-page-body .navbar li,
	.legal-page-body .navbar a {
		pointer-events: auto;
	}

	.mask {
		display: block;
		position: fixed;
		width: 100vw;
		height: 100vh;
		background-color: white;
		z-index: 2; /* Sous le header et popup, mais cache le contenu initial avant scroll */
		opacity: 0;
	    animation-name: mask;
	    animation-fill-mode: forwards;
	    animation-timing-function: var(--easing);
		animation-duration: 1s;
		animation-delay: 4.5s; /* Ajusté */
		pointer-events: none;
	}

	@keyframes mask {
	  from { opacity: 0; }
	  to { opacity: 1; display: none;} /* Masquer à la fin si on veut laisser le contenu derrière */
	}

	/* Une fois l'intro passée, le mask disparait (gestion en JS) */
	.mask.hidden { opacity: 0; display: none; }

/*
	GRID BASE & CONTENT LAYOUT ////////////////////////////////////////////////////////////////////////////
*/
	.main-wrapper {
		width: 100%;
		position: relative;
		/* z-index: 10; */
	}

	/* Grille à 4 colonnes en desktop */
	.grid-4 {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 0;
		padding: 0 var(--padding);
	}

	/* Nous Connaître Sequence */
	#nous-connaitre-sequence {
		position: relative;
		width: 100%;
	}
	.nc-section {
		position: relative;
		width: 100%;
		min-height: 100vh;
		display: grid; /* Use grid layout inherited from class grid-4 */
		align-items: center;
		padding-top: 112px;
		box-sizing: border-box;
		padding-bottom: calc(((100vw - 64px) / 4) * 1.1 + var(--padding)); 
		scroll-snap-align: start;
	}
	.nc-section.nc-a {
		align-items: baseline;
		align-content: center;
	}
	.nc-title {
		font-size: 80px;
		line-height: 1;
		margin: 0;
		font-weight: 500;
		letter-spacing: -1.5px;
	}
	.nc-text-31 {
		font-family: "PPMori", sans-serif;
		font-weight: 400;
		font-size: 31px;
		line-height: 1.3;
		margin: 0;
		width: 40vw; /* 1 col + gap + 60% col */
	}
	.nc-text-56 {
		font-family: "PPMori", sans-serif;
		font-weight: 600;
		font-size: 56px;
		line-height: 1.1;
		margin: 0;
		letter-spacing: -1px;
		width: 40vw;
	}
	.extra-line-gap {
		display: inline-block;
		margin-top: 10px;
	}
	.nc-text-31 .tmark-word, .nc-title .tmark-word {
		font-weight: 600;
		color: #000;
	}
	.desktop-intro-line {
		display: block;
		white-space: nowrap;
	}
	.nc-bubbles {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 15px;
		width: 100%;
		margin-top: 40px;
	}
	.nc-bubble {
		display: inline-block;
		font-family: "PPMori", sans-serif;
		font-weight: 400;
		font-size: 28px;
		background-color: #FFFFFF;
		color: #000;
		border: 3px solid #000;
		padding: 10px 25px;
		border-radius: 50px;
	}
	
	@media (max-width: 768px) {
		.nc-text-31, .nc-text-56 { width: 100%; font-size: 24px; }
		.nc-text-56 { font-size: 40px; }
		.nc-bubble { font-size: 20px; padding: 8px 16px; }
	}

	.nc-text-small {
		font-size: 24px;
		line-height: 1.3;
		margin: 0;
		font-weight: 400;
		color: #555;
	}
	.nc-text-medium {
		font-size: 32px;
		line-height: 1.2;
		margin: 0 0 16px 0;
		font-weight: 400;
	}
	
	/* Slide 3 Layout alignment */
	.nc-section.nc-c {
		min-height: calc(100vh - (((100vw - 64px) / 4) * 1.1) - 32px);
		padding-bottom: 0;
	}
	.nc-c.grid-4 {
		align-content: center;
		row-gap: 24px;
	}
	.nc-col-top {
		align-self: end;
		padding-right: 32px;
	}
	.nc-col-bottom {
		align-self: start;
		padding-right: 32px;
	}
	.nc-section.nc-c > div:nth-child(6) {
		padding-right: 0;
	}
	.nc-number-group {
		display: flex;
		align-items: baseline;
		gap: 12px;
	}
	.nc-giant-number {
		font-family: "PPMori", sans-serif;
		font-size: 72px;
		font-weight: 700;
		letter-spacing: -2px;
		line-height: 0;
	}
	.nc-small-label {
		font-family: "PPMori", sans-serif;
		font-size: 20px;
		font-weight: 600;
		letter-spacing: -0.5px;
	}
	.nc-body-text {
		font-family: "PPMori", sans-serif;
		font-size: 22px;
		font-weight: 400;
		line-height: 1.35;
		margin: 0;
		color: #000;
	}
	.nc-body-text strong {
		font-weight: 600;
		display: inline !important;
		position: static !important;
		white-space: normal !important;
	}
	.nc-globe-new {
		width: auto;
		height: 60px;
		display: block;
	}

	.nc-section ul {
		list-style: none;
		padding: 0;
		margin: 32px 0 0 0;
	}
	.nc-content li {
		margin-bottom: 24px;
	}
	.nc-globe {
		width: 120px;
		height: 120px;
		margin-top: 48px;
	}

	@media screen and (min-width: 900px) and (max-height: 880px) {
		/* Slide 2 (Expertises bubbles) */
		.nc-section.nc-b .nc-text-31 { font-size: 24px; width: 50vw; }
		.nc-section.nc-b .nc-bubble { font-size: 18px; padding: 6px 14px; }
		.nc-section.nc-b .nc-bubbles { gap: 10px; margin-top: 24px; }
		
		/* Slide 3 (4 associés, globe) */
		.nc-section.nc-c .nc-giant-number { font-size: 48px; }
		.nc-section.nc-c .nc-small-label { font-size: 14px; }
		.nc-section.nc-c .nc-body-text { font-size: 16px; margin-top: -10px; }
		.nc-section.nc-c .nc-globe-new { height: 40px; }
		.nc-section.nc-c .nc-number-group { gap: 6px; }
	}
	
	@media screen and (min-width: 901px) {
		#avocats-grid > .avocat-card:nth-child(-n+4) {
			display: none !important;
		}
	}

	/* Temporary: Jade has not provided her editorial content yet. Remove this rule to restore her card. */
	.avocat-card[data-id="jade-belverge"],
	.portrait-card[data-id="jade-belverge"] {
		display: none !important;
	}

	/* Lawyer Cards */
	.avocat-card {
		position: relative;
		cursor: pointer;
	}
	.avocat-photo-wrapper {
		width: 100%;
		aspect-ratio: 1 / 1.1; /* slightly taller than square matching mockup */
		overflow: hidden;
		background: #E8E8E8;
	}
	.avocat-photo {
		position: relative;
		width: 100%;
		height: 100%;
		transition: transform 0.6s var(--easing);
		overflow: hidden; /* To keep hover scaling within boundaries */
	}
    /* .avocat-photo-inner is defined globally above */
	.avocat-info {
		padding-top: 16px;
		padding-bottom: 48px;
	}
	.avocat-info h3 {
		margin: 0;
		font-size: 24px;
		font-weight: 600;
		letter-spacing: -0.5px;
	}
	.avocat-info h3 strong {
		font-weight: 600;
	}
	.avocat-info p {
		margin: 4px 0 0 0;
		font-size: 14px;
	}

/*
	FULLSCREEN MENU ////////////////////////////////////////////////////////////////////////////
*/
	.fullscreen-menu {
		position: fixed;
		top: 0;
		right: 0; /* Align right */
		width: 100vw; /* Container remains full screen to catch outside clicks */
		height: 100vh;
		z-index: 2000;
		background: transparent;
		display: flex;
		justify-content: flex-end; /* Move menu panel to the right */
		pointer-events: none;
		visibility: hidden;
		transition: visibility 0s 0.8s;
	}

	.fullscreen-menu.is-active {
		pointer-events: auto; /* Re-enable pointer events for the container */
		visibility: visible;
		transition: visibility 0s 0s;
	}

	.menu-left-col {
		width: 50vw;
		height: 100%;
		background: #F2F2F2; /* Approximated from mockup background color */
		padding: calc(var(--padding) * 2) var(--padding) calc(var(--padding) * 1.5) calc(var(--padding) * 2);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
		overflow-y: auto;
		transform: translateX(100%); /* Start completely offscreen right */
		transition: transform 0.8s var(--easing);
	}

	.fullscreen-menu.is-active .menu-left-col {
		transform: translateX(0);
	}

	.menu-right-col {
		width: 50vw;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		/* Left side is empty now, click to close */
		background: transparent;
		cursor: pointer;
	}

	.main-nav-links {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.main-nav-links li {
		margin-bottom: 6px;
		overflow: hidden; /* Hide text before stagger animation */
	}

	.main-nav-links {
		position: relative;
		top: -2px;
	}

	.main-nav-links a {
		font-size: 56px;
		font-weight: 600;
		letter-spacing: -1.5px;
		line-height: 1.05;
		color: #111;
		display: inline-block;
		text-decoration: none;
		transform: translateY(100%);
		transition: transform 0.8s var(--easing);
	}

	.main-nav-links a span {
		display: inline-block;
		transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1);
	}

	.fullscreen-menu.is-active .main-nav-links a {
		transform: translateY(0);
	}
	
	.fullscreen-menu.is-active .main-nav-links a:hover span {
		transform: translateX(15px);
		transition: transform 4s cubic-bezier(0,.97,0,1.01);
	}
	
	/* Stagger the delay of the menu links */
	.fullscreen-menu.is-active .main-nav-links li:nth-child(1) a { transition-delay: 0.1s; }
	.fullscreen-menu.is-active .main-nav-links li:nth-child(2) a { transition-delay: 0.15s; }
	.fullscreen-menu.is-active .main-nav-links li:nth-child(3) a { transition-delay: 0.2s; }
	.fullscreen-menu.is-active .main-nav-links li:nth-child(4) a { transition-delay: 0.25s; }
	.fullscreen-menu.is-active .main-nav-links li:nth-child(5) a { transition-delay: 0.3s; }

	.menu-bottom-content {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		width: 100%;
		margin-top: 64px;
	}

	.menu-footer-links {
		display: flex;
		flex-direction: column;
		gap: 12px;
		min-height: clamp(153px, 10vw, 220px);
		font-size: 16px;
		color: #111;
	}

	.menu-footer-links a:not(.tlg-link) {
		letter-spacing: -0.3px;
		display: inline-block;
		transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1);
	}

	.menu-footer-links .secure-client-link {
		font-weight: 700;
	}

	.secure-client-link {
		position: relative;
		display: inline-block !important;
		padding-left: 16px;
		vertical-align: baseline;
		line-height: 1.2;
	}

	.secure-client-link::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 10px;
		height: 14px;
		background-color: currentColor;
		transform: translateY(calc(-50% + var(--secure-lock-offset)));
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath fill='black' d='M1.63232422 13.7456055h6.18896484c1.015625 0 1.53613282-.5268555 1.53613282-1.6376953V7.39160156c0-.98388672-.41894532-1.51074219-1.24414063-1.60595704V4.32568359c0-2.26611328-1.52978516-3.567382809-3.38964844-3.567382809-1.85986328 0-3.383300779 1.301269529-3.383300779 3.567382809V5.78564452C.604980469 5.88085937.1796875 6.40771484.1796875 7.39160156v4.71630864c0 1.1108398.520507812 1.6376953 1.54263672 1.6376953ZM2.85107422 4.24951172c0-1.28857422.83154297-2.03759766 1.87255859-2.03759766s1.88525391.74902344 1.88525391 2.03759766v1.51708984H2.85107422Z'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath fill='black' d='M1.63232422 13.7456055h6.18896484c1.015625 0 1.53613282-.5268555 1.53613282-1.6376953V7.39160156c0-.98388672-.41894532-1.51074219-1.24414063-1.60595704V4.32568359c0-2.26611328-1.52978516-3.567382809-3.38964844-3.567382809-1.85986328 0-3.383300779 1.301269529-3.383300779 3.567382809V5.78564452C.604980469 5.88085937.1796875 6.40771484.1796875 7.39160156v4.71630864c0 1.1108398.520507812 1.6376953 1.54263672 1.6376953ZM2.85107422 4.24951172c0-1.28857422.83154297-2.03759766 1.87255859-2.03759766s1.88525391.74902344 1.88525391 2.03759766v1.51708984H2.85107422Z'/%3E%3C/svg%3E") center / contain no-repeat;
	}

	.menu-footer-links .secure-client-link::before {
		transform: translateY(calc(-50% + var(--secure-lock-offset) - 1px));
		transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1);
	}

	.menu-footer-links a:not(.tlg-link):hover {
		transform: translateX(10px);
		transition: transform 4s cubic-bezier(0,.97,0,1.01);
	}

	.menu-footer-links .secure-client-link:hover::before {
		transform: translateY(calc(-50% + var(--secure-lock-offset) - 1px));
		transition: transform 4s cubic-bezier(0,.97,0,1.01);
	}

	.language-switcher {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		width: fit-content;
		min-height: 20px;
		font-size: 16px;
		letter-spacing: -0.3px;
		color: #111;
	}

	.language-switcher-current,
	.language-switcher-chevron {
		pointer-events: none;
	}

		.language-switcher-chevron {
			position: relative;
			display: inline-block;
			width: 8px;
			height: 8px;
			font-size: 0;
			transform: translateY(-3px);
		}

	.language-switcher-chevron::before {
		content: "";
		position: absolute;
		inset: 0;
		width: 6px;
		height: 6px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		transform-origin: 50% 50%;
	}

	.language-switcher-select {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		cursor: pointer;
	}

	.language-switcher:focus-within {
		outline: none;
	}

	/* tlg.design Stagger Bounce */
	.tlg-link.menu-credits {
		display: inline-flex;
		text-decoration: none;
		margin-top: auto; /* Flexible gap to align with TM baseline as long as possible */
		padding-top: 8px;
		font-size: 11px;
		color: #555;
		position: relative;
		top: 2px;
	}
	.tlg-char {
		display: inline-block;
		/* animation assigned on hover */
	}
	
	@keyframes bounce-char {
		0% { transform: translateY(0) scale(1); }
		40% { transform: translateY(-4px) scale(1.3); }
		100% { transform: translateY(0) scale(1); }
	}

	.tlg-link .tlg-char.is-bouncing {
		animation: bounce-char 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	}

	.menu-tm-logo {
		width: 60%; /* Scales dynamically to fill remaining column space */
		max-width: 760px;
		display: flex;
		justify-content: flex-end;
	}

	.menu-tm-logo img {
		width: 100%;
		max-height: clamp(153px, 10vw, 220px);
		object-fit: contain;
		object-position: bottom right;
	}

	@media screen and (max-width: 900px) {
		.menu-left-col {
			width: 100vw;
			padding-left: 29px;
		}
		.menu-right-col {
			display: none;
		}
		.main-nav-links a {
			font-size: 44px;
		}
	}

/*
	LAWYER PROFILE POPUP ////////////////////////////////////////////////////////////////////////////
*/
	.profile-popup {
		position: fixed;
		top: 112px;
		left: 0;
		width: 100vw;
		height: calc(100vh - 112px);
		z-index: 1000; /* High above header (100) and any intro elements */
		display: flex;
		pointer-events: none;
		visibility: hidden;
		transition: visibility 0s 0.8s;
	}
	.profile-popup.is-active {
		pointer-events: auto;
		visibility: visible;
		transition: visibility 0s 0s;
	}
	.profile-popup-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #FFF;
		z-index: 0;
		opacity: 0;
		transition: opacity 0.6s var(--easing);
	}
	
	.profile-header-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 224px;
		background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 112px, rgba(255,255,255,0) 224px);
		z-index: 0; /* Entre le header-blur-container (-1) et le texte suivant dans le DOM */
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.6s var(--easing), visibility 0s 0.6s;
	}

	.profile-header-mask.is-active {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.6s var(--easing), visibility 0s 0s;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: var(--bg-color);
		z-index: 50;
		pointer-events: none;
	}

	.profile-popup.is-active:not(.profile-mobile-mode) .profile-popup-bg {
		opacity: 1;
	}

	.profile-hero-img {
		height: 100%;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 202;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 0;
	}

	.profile-split {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 201;
	}

	.profile-left {
		width: 50vw;
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		background: inherit;
		position: absolute;
		left: 0;
		top: 0;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.profile-left::-webkit-scrollbar {
		display: none;
	}

	.profile-content {
		width: 50vw; /* Keeps text layout stable during width transition */
		min-width: 50vw;
		padding: 50px 32px 100px 32px;
		box-sizing: border-box;
	}

	.profile-separator {
		border: none;
		border-top: 1px solid #CCC; /* will be overridden by JS theme */
		margin: 40px 0;
	}

	.profile-right {
		width: 50vw;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
	}

	.profile-photo-wrapper {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.profile-back-btn {
		position: absolute;
		top: var(--padding);
		left: var(--padding);
		z-index: 1500;
		width: 48px;
		height: 48px;
		background: transparent;
		border: none;
		cursor: pointer;
		opacity: 0;
		transform: scale(0.6);
		pointer-events: none;
		transition: opacity 0.3s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}
	.profile-back-btn svg {
		width: 100%;
		height: 100%;
		display: block;
	}
	.profile-popup.is-active .profile-back-btn {
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
		transition-delay: 0.6s;
	}

	.profile-row {
		display: grid;
		grid-template-columns: 1.5fr 4.3fr 0.88fr;
		padding: 32px 0;
		border-top: 1px solid var(--sep-color, #CCC);
	}
	
	.profile-row.header-row {
		border-top: none;
		padding-top: 0;
		padding-bottom: 48px;
	}

	.profile-name { 
		font-family: "PPMori";
		font-weight: 600;
		font-size: 62px; 
		line-height: 1;
		margin: 0 0 16px 0;
		letter-spacing: -1.5px;
		text-transform: none;
	}

	.profile-name.long-name {
		font-size: 46px; /* Taille réduite pour faire tenir les mots de plus de 12 caractères */
		letter-spacing: -1px;
	}
	
	@media (min-width: 1650px) {
		.profile-name.long-name {
			font-size: 62px; /* Sur très grand écran, la place permet de désactiver la rustine */
			letter-spacing: -1.5px;
		}
	}

	.profile-role { 
		font-family: "PPMori";
		font-weight: 600;
		font-size: 20px; 
		margin: 0; 
		text-transform: none;
	}

	.col-title {
		font-size: 15px;
		font-weight: 400;
		transition: opacity 0.1s var(--easing);
		align-self: start;
		margin-top: 7px;
	}

	.col-content {
		font-size: 22px;
		line-height: 1.4;
	}
	
	.col-content a {
		font-weight: 600;
		font-family: "PPMori";
	}

	.contact-split {
		display: flex;
		width: 100%;
	}
	.contact-col {
		flex: 0 0 50%;
	}

	.profile-bio {
		white-space: pre-wrap; 
	}

	.profile-bio p,
	#profile-memberships p {
		margin: 0 0 0.6em;
	}

	.profile-bio p:last-child,
	#profile-memberships p:last-child {
		margin-bottom: 0;
	}

	@media (max-width: 890px) {
		.profile-split {
			flex-direction: column-reverse;
		}
		.profile-left, .profile-right {
			width: 100%;
			height: 50%;
		}
	}

/*
	MAIN FOOTER ////////////////////////////////////////////////////////////////////////////
*/
	.main-footer {
		padding-top: 80px;
		padding-bottom: 19px;
		background-color: #F8F8F8;
		scroll-snap-align: end; /* Permet d'attraper le bas de la page */
	}

	.footer-top {
		margin-bottom: 50px; 
	}

	.footer-col {
		display: flex;
		flex-direction: column;
	}

	.footer-col-offset {
		padding-top: 36px;
	}

	.footer-section-title {
		font-size: 14px;
		color: #999;
		margin: 0 0 20px 0;
		font-weight: 400;
	}

	.footer-links {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.footer-links a, .footer-links > li > span {
		font-size: 16px;
		color: #111;
		text-decoration: none;
		letter-spacing: -0.3px;
	}

	.footer-links .footer-address {
		display: inline-block;
		line-height: 1.18;
	}

	.footer-links a span {
		display: inline-block;
		transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1);
	}

		.footer-links .secure-client-link span {
			font-weight: 700;
		}

		.footer-links .secure-client-link {
			top: auto;
			transform: translateY(-1px);
		}

	.footer-links .secure-client-link::before {
		transform: translateY(calc(-50% + var(--secure-lock-offset) - 2px));
		transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1);
	}

	.footer-links a:not(.tlg-link):hover span {
			transform: translateX(10px);
		transition: transform 4s cubic-bezier(0,.97,0,1.01);
	}

	.footer-links .secure-client-link:hover::before {
		transform: translateX(10px) translateY(calc(-50% + var(--secure-lock-offset) - 2px));
		transition: transform 4s cubic-bezier(0,.97,0,1.01);
	}

	.footer-links .tlg-link.menu-credits {
		margin-top: 0;
		padding-top: 0;
		top: -1px;
		letter-spacing: 0;
	}

	.footer-language-item {
		display: flex;
		align-items: center;
	}

	/* Bottom Row */
	.footer-bottom {
		align-items: flex-end;
	}

	.footer-tagline-col {
		grid-column: 1 / 4;
	}

	.footer-tagline {
		margin: 0;
		font-size: 56px; 
		line-height: 1.05;
		letter-spacing: -1.5px;
		font-weight: 600;
		color: #111;
	}

	.footer-logo-col {
		grid-column: 4;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: flex-end;
	}

	.footer-tm-logo-img {
		width: 100%;
		height: auto;
		margin-bottom: 16px;
	}

	.footer-credits-container {
		font-size: 14px;
	}

	@media screen and (max-width: 900px) {
		.main-footer {
			margin-top: 200px;
			padding-top: 60px;
			padding-bottom: 40px;
		}
		.footer-top {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 40px 16px;
			margin-bottom: 60px;
		}
		.footer-col-offset {
			padding-top: 36px;
			margin-top: 0;
		}
		.footer-bottom {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}
		.footer-tagline-col {
			margin-bottom: 40px;
		}
		.footer-tagline {
			font-size: 42px !important;
			text-align: left !important;
			margin-top: 0;
			margin-bottom: 40px;
            width: 100%;
		}
		.footer-logo-col {
			align-items: flex-start !important;
			justify-content: flex-start !important;
		}
		.footer-tm-logo-img {
			width: auto;
			max-width: 100%;
			margin-bottom: 0;
		}
	}

/*
	SINGLE PAGE LAYOUT (AJAX PAGES) //////////////////////////////////////////////////////
*/
	.spa-page {
		width: 100%;
		min-height: 100vh;
	}

	.single-page-layout {
		padding-top: 180px;
		padding-bottom: 120px;
		max-width: 1200px;
		margin: 0 auto;
		padding-left: var(--padding);
		padding-right: var(--padding);
	}

	.single-page-layout .title-block h1 {
		font-family: var(--font-big);
		font-size: 80px;
		font-weight: 500;
		letter-spacing: -2px;
		margin-bottom: 60px;
		color: #111;
		line-height: 1.1;
	}

/*
	METIER ASYNC SPLIT LAYOUT (STICKY V2) ////////////////////////////////////////
*/
	.metier-layout {
		display: flex;
		flex-direction: row;
		width: 100%;
		/* pas de margin bottom pour toucher le footer */
	}

	.metier-left {
		width: 43vw;
		position: sticky;
		top: 0;
		height: 100vh;
		z-index: 10;
		box-sizing: border-box; /* To contain height tightly */
		padding: 200px var(--padding) 120px var(--padding); /* Le Padding réel dans le Box-Model inspectable */
	}

	.metier-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		background-color: #F9B4FF; /* Default starts pink */
		will-change: background-color;
	}

	.metier-left-content {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	h1#metier-h1 {
		font-family: var(--font-text);
		font-size: 22px;
		font-weight: 400;
		color: #111;
		margin-bottom: 20px;
		letter-spacing: normal;
	}

	.metier-h2-container {
		position: relative;
		flex-grow: 1;
		width: 100%;
	}

	.metier-h2-item {
		position: absolute;
		top: 0;
		left: 0;
		width: 35vw;
		opacity: 0;
		visibility: hidden;
		transform: translateY(30px);
		will-change: transform, opacity;
	}

	/* Initial state for the first item */
	.metier-h2-item[data-index="0"] {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.metier-h2-item h2 {
		font-family: var(--font-big);
		font-size: 56px;
		font-weight: 600;
		line-height: 1.1;
		color: #111;
		letter-spacing: -1px;
	}

	.metier-intro {
		font-family: var(--font-text);
		font-size: 31px;
		font-weight: 600;
		line-height: 1.3;
		color: #111;
		letter-spacing: -0.5px;
	}

	.worldmap-svg {
		margin-top: 40px;
		width: calc(100% + calc(var(--padding) * 2));
		max-width: none;
		margin-left: calc(var(--padding) * -1);
		display: block;
	}

	.metier-right {
		width: 57vw;
		margin-left: 0;
		position: relative;
		z-index: 5;
		background: #FFF;
	}

	.metier-section {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin-bottom: 20vh; /* Queueing effect spacing */
		/* Parité asymétrique : La colonne de gauche commence à 200px (pour le H1).
		   Pour s'aligner au H2 (58px plus bas), la droite commence à 258px. */
		padding-top: 258px;
		min-height: 100vh;
		scroll-snap-align: start; /* Alignement magnétique demandé */
	}

	.metier-section:last-child {
		margin-bottom: 0px; 
		padding-bottom: 0px; /* footer collé (0px) au reste de la page */
	}

	.metier-text-block {
		width: 37vw;
		margin-left: 7vw; /* Pousse le texte pour l'aligner mathématiquement sur la Grid à 50vw (43vw + 7vw) */
	}

	.metier-text-block p, 
	.metier-text-block ul {
		font-family: var(--font-text);
		font-size: 22px;
		line-height: 1.5;
		color: #444;
		margin-bottom: 24px;
	}

	.metier-text-block p:first-child {
		margin-top: 0;
	}

	.metier-text-block p.intro {
		font-family: var(--font-text);
		font-size: 27px;
		font-weight: 600;
		line-height: 1.35;
		color: #111;
		margin-bottom: 30px;
		letter-spacing: -0.5px;
	}

	.metier-text-block .mt-l {
		margin-top: 50px;
	}

	.metier-text-block .tmark {
		font-weight: 600;
		color: #111;
	}

	/* MOBILE OVERRIDES */
	@media screen and (max-width: 900px) {
		.metier-layout {
			display: block;
		}

		.metier-left {
			display: none;
		}

		.metier-right {
			width: 100%;
			background: transparent;
			position: relative;
			z-index: 1;
		}

		.metier-bg,
		h1#metier-h1 {
			display: none !important;
		}

		.metier-section {
			min-height: auto;
			padding: 0;
			margin: 0;
			background: #FFF;
			position: relative;
			z-index: 2;
			overflow: clip;
		}

		.metier-section:last-child {
			padding-bottom: 0;
		}

		.metier-section .metier-h2-item {
			position: relative;
			top: auto;
			left: auto;
			width: 100%;
			min-height: 56svh;
			opacity: 1 !important;
			visibility: visible !important;
			transform: none !important;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			padding: calc(env(safe-area-inset-top, 0px) + 108px) var(--padding) 44px;
			background: var(--metier-mobile-color, #F9B4FF);
			color: #111;
			overflow: hidden;
		}

		.metier-section[data-index="0"] .metier-h2-item {
			min-height: max(500px, 62svh);
			margin-top: calc(-1 * env(safe-area-inset-top, 0px));
			padding-top: calc(env(safe-area-inset-top, 0px) + 108px);
		}

		.metier-section .metier-h2-item::before {
			content: attr(data-mobile-label);
			display: block;
			font-family: "PPMori", sans-serif;
			font-size: 22px;
			font-weight: 400;
			line-height: 1.1;
			letter-spacing: -0.4px;
			color: #111;
			margin-bottom: 32px;
		}

		.metier-section .metier-h2-item h2,
		.metier-section .metier-h2-item .metier-intro {
			font-family: "PPMori", sans-serif;
			font-size: 35px;
			font-weight: 700;
			line-height: 0.94;
			letter-spacing: -1px;
			color: #111;
			max-width: 11.2ch;
			margin: 0;
			text-wrap: balance;
			overflow-wrap: normal;
			word-break: normal;
			hyphens: none;
		}

		.metier-section .metier-h2-item[data-index="0"] h2 {
			max-width: 11.8ch;
		}

		.metier-section .metier-h2-special {
			justify-content: space-between;
			gap: 40px;
			padding-bottom: 0;
		}

		.metier-section .metier-h2-special .metier-intro {
			max-width: 10ch;
		}

		.metier-section .metier-h2-special .worldmap-svg {
			width: calc(100% + (var(--padding) * 2));
			max-width: none;
			margin: auto 0 0 calc(var(--padding) * -1);
			opacity: 0.28;
			display: block;
		}

		.metier-text-block {
			width: 100%;
			margin-left: 0;
			padding: 56px var(--padding) 64px;
			background: #FFF;
		}

		.metier-text-block p,
		.metier-text-block ul {
			font-size: 18px;
			line-height: 1.24;
			letter-spacing: -0.2px;
			color: #3E3E3E;
			margin-bottom: 28px;
		}

		.metier-text-block p.intro {
			font-size: 24px;
			line-height: 1.06;
			letter-spacing: -0.7px;
			color: #111;
			margin-bottom: 24px;
			width: 100%;
			max-width: none;
			text-wrap: pretty;
		}

		.metier-text-block li {
			padding-left: 22px;
			margin-bottom: 14px;
		}

		.metier-text-block li::before {
			top: 0.1em;
		}

		.metier-section[data-index="0"] .metier-text-block {
			padding-top: 72px;
		}
	}

	.page-block {
		margin-bottom: 60px;
		max-width: 800px;
	}

	.page-block h3 {
		font-family: var(--font-text);
		font-size: 32px;
		font-weight: 600;
		margin-bottom: 24px;
		letter-spacing: -0.5px;
		color: #111;
	}

	.page-block p, 
	.page-block ul {
		font-family: var(--font-text);
		font-size: 22px;
		line-height: 1.5;
		color: #444;
		margin-bottom: 20px;
	}
	
	.page-block p strong {
		font-weight: 600;
		color: #111;
	}

	.page-block .tmark {
		font-weight: 600;
	}

	.page-block ul {
		padding-left: 24px;
		list-style-type: none; /* We'll use custom bullets if requested, or just standard disc */
	}

	.page-block li {
		margin-bottom: 12px;
		position: relative;
	}

	.page-block li::before {
		content: "•";
		color: var(--color-primary); /* Assuming a primary color exists, or black */
		position: absolute;
		left: -16px;
	}

	.highlight-block p {
		font-size: 32px;
		line-height: 1.4;
		color: #111;
		font-weight: 400;
	}


/*
	NOS EXPERTISES PAGE ////////////////////////////////////////////////////////////////////////////
*/

	.expertises-layout {
		display: flex;
		flex-direction: column;
		width: 100%;
		background: #FFF;
	}

	.expertises-top-section {
		width: 100%;
		padding: 200px var(--padding) 20px var(--padding);
		box-sizing: border-box;
		background: #FFF;
		scroll-snap-align: start;
	}

	.expertises-top-content {
		max-width: 1400px;
	}

	h1.expertises-domaines-title {
		font-family: var(--font-text);
		font-size: 22px;
		font-weight: 400;
		color: #111;
		margin-bottom: 40px;
		letter-spacing: normal;
	}

	.expertises-bubbles {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		min-height: 180px; /* Pré-réserve l'espace pour éviter un layout shift pendant l'animation GSAP */
		align-content: flex-start;
	}

	.expertise-bubble {
		font-size: 32px;
		line-height: 1;
		padding: 16px 32px;
		border-radius: 60px;
		border: 1px solid #111;
		white-space: nowrap;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		letter-spacing: -0.5px;
		
		/* Initial state for GSAP */
		opacity: 0;
		transform: scale(0.9);
		will-change: transform, opacity;
	}

	.bubble-black {
		background-color: #111;
		color: #FFF;
		border-color: #111;
	}

	.bubble-white {
		background-color: #FFF;
		color: #111;
		border-color: #111;
	}

	.bubble-pink {
		background-color: #F9B4FF;
		color: #111;
		border-color: #111;
	}

	.expertises-split-section {
		display: flex;
		flex-direction: row;
		width: 100%;
		box-sizing: border-box;
		margin-top: -80px;
	}

	.expertises-left {
		width: 43vw;
		position: sticky;
		top: 0;
		height: 100vh;
		z-index: 10;
		box-sizing: border-box;
		padding: 200px var(--padding) 120px var(--padding);
		background: transparent;
	}

	.expertises-left-content {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	h1#expertises-h1 {
		font-family: var(--font-text);
		font-size: 22px;
		font-weight: 400;
		color: #111;
		margin-bottom: 20px;
		letter-spacing: normal;
		margin-top: 0;
	}

	.expertises-h2-container {
		position: relative;
		flex-grow: 1;
		width: 100%;
	}

	.expertises-h2-item {
		position: absolute;
		top: 0;
		left: 0;
		width: 35vw;
		opacity: 0;
		visibility: hidden;
		transform: translateY(30px);
		will-change: transform, opacity;
	}

	.expertises-h2-item[data-index="0"] {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.expertises-h2-item h2 {
		font-size: 56px;
		font-weight: 600;
		line-height: 1.1;
		color: #111;
		letter-spacing: -1px;
		margin: 0;
	}

	.expertises-h2-item span[class^="highlight-"] {
		position: relative;
		display: inline-block;
		z-index: 1;
	}

	.expertises-h2-item span[class^="highlight-"]::after {
		content: '';
		position: absolute;
		left: -2px;
		right: -2px;
		bottom: 16px;
		height: 22px;
		z-index: -1;
		transform: rotate(-3deg);
	}

	.expertises-h2-item span.highlight-yellow::after {
		background-color: #FAFF54;
	}

	.highlight-intro-yellow {
		position: relative;
		display: inline-block;
	}

	.highlight-intro-yellow::after {
		content: '';
		position: absolute;
		left: -2px;
		right: -2px;
		bottom: 5px;
		height: 22px;
		z-index: -1;
		transform: rotate(-2deg);
		background-color: #FAFF54;
	}

	.expertises-h2-item span.highlight-blue::after {
		background-color: #89DBFC;
	}

	.expertises-h2-item span.highlight-pink::after {
		background-color: #F9B4FF;
	}

	.expertises-right {
		width: 57vw;
		margin-left: 0;
		position: relative;
		z-index: 5;
		background: transparent;
	}

	.expertises-section {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin-bottom: 20vh;
		padding-top: 258px;
		min-height: 100vh;
		scroll-snap-align: start;
	}

	.expertises-section:last-child {
		margin-bottom: 0px; 
		padding-bottom: 120px;
	}

	.expertises-text-block {
		width: 37vw;
		margin-left: 7vw; /* math align */
	}

	.expertises-list {
		font-size: 22px;
		line-height: 1.5;
		color: #444;
		list-style-type: none;
		padding-left: 0;
		margin: 0;
	}

	.metier-text-block li,
	.expertises-list li,
	.valeurs-text-block li {
		list-style: none;
		position: relative;
		padding-left: 34px;
		border-left: 6px solid #EAEAEA;
		margin-bottom: 24px;
	}

	.metier-text-block li::before,
	.expertises-list li::before,
	.valeurs-text-block li::before {
		content: none;
	}

	/* MOBILE OVERRIDES MODAL PROFILE AND HOME */
	@media screen and (max-width: 900px) {
		#main-header {
			height: calc(env(safe-area-inset-top, 0px) + 90px);
		}

		.header-col-1,
		.header-col-2,
		.header-col-3,
		.header-col-4 {
			margin-top: calc(env(safe-area-inset-top, 0px) + 18px);
		}

		.logo-left {
			width: min(65vw, 260px);
			max-width: min(65vw, 260px);
			height: 52px;
			background-size: auto 100%;
			background-position: left top;
		}

		body.profile-is-open .logo-left {
			transform: scale(0.72) translateY(-10px);
		}

		button.burger {
			top: calc(env(safe-area-inset-top, 0px) + 24px);
			right: var(--padding);
			width: 32px;
			height: 24px;
		}

		button.burger .bar {
			height: 3px;
		}

		button.burger .bar.top,
		button.burger .bar.bottom {
			animation-duration: 0.9s;
			animation-delay: 0.15s !important;
		}

		@keyframes burger-bars {
		  from { width: 0; }
		  to { width: 22px; }
		}

		button.burger .bar.bottom {
			top: 9px;
		}

		.profile-header-mask {
			height: 180px; 
			background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 90px, rgba(255,255,255,0) 180px);
		}
		
		/* --- HOME OVERRIDES --- */
		.nc-section.nc-a {
			display: flex;
			flex-direction: column;
			min-height: auto;
			padding: 0; 
			scroll-snap-align: none; /* The parent shouldn't snap anymore */
		}
		
		.nc-section.nc-a > div {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			min-height: 100svh;
			width: 100%;
			box-sizing: border-box;
			scroll-snap-align: start;
			scroll-snap-stop: always;
			padding: var(--padding);
			padding-top: calc(env(safe-area-inset-top, 0px) + 144px);
			padding-bottom: calc(((100vw - (var(--padding) * 2)) / 2) + 28px);
		}
		
		.nc-section.nc-a > div:nth-child(1) {
			order: 2;
			padding-top: calc(env(safe-area-inset-top, 0px) + 126px);
			padding-bottom: calc(((100vw - (var(--padding) * 2)) / 2) + 20px);
		}

		.nc-section.nc-a > div:nth-child(2) {
			order: 1;
		}

		.nc-text-56 {
			width: 100%;
			font-size: 35px;
			font-weight: 700;
			line-height: 0.94;
			letter-spacing: -1.2px;
			max-width: none;
			text-wrap: pretty;
		}

		#main-h1-intro .line {
			padding-bottom: 0;
			margin-bottom: 0;
		}

		.nc-a-left-text {
			width: 100%;
			font-size: 22px;
			line-height: 1.08;
			letter-spacing: -0.6px;
			max-width: none;
			text-wrap: pretty;
		}

		.desktop-intro-line {
			display: inline;
			white-space: normal;
		}
		
		.nc-title {
			font-size: 48px; /* Fit narrow screens */
			line-height: 1.05;
		}
		
		.nc-text-small {
			font-size: 20px;
		}

		.portraits {
			position: fixed !important;
			top: auto !important;
			bottom: 24px !important;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 0;
			width: 100vw;
			left: 0;
			padding: 0 var(--padding);
			box-sizing: border-box;
			z-index: 100 !important;
		}

		.portrait-card {
			flex: unset;
			margin-bottom: 0;
		}
		
		.portrait-card .portrait {
			aspect-ratio: 1;
			height: auto;
		}

		.avocats-section {
			padding-top: 60px !important; /* Cancel massive desktop padding */
		}
		
		#avocats-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 40px 0;
			padding: 40px var(--padding) 0 var(--padding);
			align-items: start;
		}

		#avocats-grid > .avocat-card {
			min-width: 0;
		}

		#avocats-grid .avocat-photo-wrapper {
			aspect-ratio: 1 / 1;
		}

		#avocats-grid .avocat-info {
			padding-top: 14px;
			padding-bottom: 42px;
		}

		#avocats-grid .avocat-info h3 {
			font-size: 19px;
			line-height: 0.98;
			letter-spacing: -0.4px;
			overflow-wrap: anywhere;
		}

		#avocats-grid .avocat-info p {
			font-size: 12px;
			line-height: 1.08;
			letter-spacing: 0;
		}
		
		.nc-section.nc-c {
			display: flex;
			flex-direction: column;
			gap: 20px;
			scroll-snap-align: start !important;
			scroll-snap-stop: always;
			min-height: 100svh;
			padding-top: 150px;
			padding-bottom: 80px; 
		}
        .nc-section.nc-c > div {
            align-self: flex-start;
            padding-right: 0;
        }
		.nc-section.nc-c > div:nth-child(1) { order: 1; } /* 4 associes */
		.nc-section.nc-c > div:nth-child(4) { order: 2; margin-bottom: 40px; } /* L'equipe est... */
		.nc-section.nc-c > div:nth-child(2) { order: 3; } /* 25 personnes */
		.nc-section.nc-c > div:nth-child(5) { order: 4; margin-bottom: 40px; } /* Chaque intervenant... */
		.nc-section.nc-c > div:nth-child(3) { order: 5; } /* Globe */
		.nc-section.nc-c > div:nth-child(6) { order: 6; } /* Tmark international... */
		
		/* --- END HOME OVERRIDES --- */

		.profile-popup {
			top: 0;
			height: 100dvh;
			overflow: hidden;
			overflow-x: hidden;
			background: transparent;
		}

		.profile-popup-bg {
			position: fixed;
			inset: 0;
		}

		.profile-popup.profile-mobile-mode.is-active .profile-popup-bg {
			opacity: 0;
		}

		.profile-popup.profile-mobile-mode::before,
		.profile-popup.profile-mobile-mode::after {
			content: "";
			position: fixed;
			left: 0;
			right: 0;
			pointer-events: none;
			background: var(--profile-chrome-color, transparent);
			z-index: 0;
		}

		.profile-popup.profile-mobile-mode::before {
			top: 0;
			height: max(62vh, calc(env(safe-area-inset-top, 0px) + 120px));
		}

		.profile-popup.profile-mobile-mode::after {
			bottom: 0;
			height: max(48vh, calc(env(safe-area-inset-bottom, 0px) + 120px));
		}

		.profile-split {
			display: flex;
			flex-direction: column;
			min-height: 100%;
			height: 100%;
		}

		.profile-left {
			position: relative;
			width: 100%;
			height: 100%;
			overflow-y: auto;
			overflow-x: hidden;
			background: transparent;
			display: flex;
			flex-direction: column;
			-webkit-overflow-scrolling: touch;
			touch-action: pan-y;
		}

		.profile-content {
			width: 100%;
			min-width: 0;
			padding: 36px 0 calc(env(safe-area-inset-bottom, 0px) + 40px);
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			order: 2;
			position: relative;
			z-index: 2;
			background: transparent;
		}

		.profile-row {
			display: block;
			padding: 28px var(--padding);
		}

		.profile-row.header-row {
			order: 1;
			padding: 34px var(--padding) 24px;
			position: relative;
			z-index: 4;
		}

		#row-bio {
			order: 3;
			position: relative;
			z-index: 1;
			border-top: none;
		}

		#row-contact {
			order: 4;
			position: relative;
			z-index: 1;
		}

		#row-memberships {
			order: 5;
			position: relative;
			z-index: 1;
		}

		.profile-right {
			order: 2;
			position: relative;
			width: 100%;
			height: auto;
		}

		.profile-photo-mobile {
			order: 2;
			width: 100vw;
			min-width: 100vw;
			max-width: 100vw;
			margin: 0 0 18px calc(50% - 50vw);
			position: relative;
			z-index: 3;
		}

		.profile-photo-wrapper {
			width: 100%;
			aspect-ratio: 1 / 1;
			overflow: hidden;
		}

		.profile-hero-img {
			width: 100%;
			height: 100%;
			inset: 0;
		}

		.profile-back-btn {
			position: fixed;
			top: calc(env(safe-area-inset-top, 0px) + 10px);
			left: 24px;
			width: 52px;
			height: 52px;
			z-index: 1600;
		}

		.profile-popup.is-active .profile-back-btn {
			transition-delay: 0.1s;
		}

		.profile-name {
			font-size: 38px;
			line-height: 0.96;
			letter-spacing: -1.1px;
			margin: 0 0 10px 0;
			max-width: none;
		}

		.profile-name.long-name {
			font-size: 34px;
			letter-spacing: -0.9px;
		}

		.profile-role {
			font-size: 21px;
			line-height: 1.05;
		}

		.col-title {
			font-size: 15px;
			margin-bottom: 26px;
		}

		.col-content {
			font-size: 19px;
			line-height: 1.32;
		}

		.contact-split {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 20px;
		}

		.contact-col {
			flex: none;
		}

		.profile-bio {
			font-size: 19px;
			line-height: 1.34;
		}
		
		.nav-col { display: none; }
		.expertises-split-section {
			flex-direction: column;
		}
		
		.expertises-top-section {
			padding: 118px var(--padding) 48px var(--padding);
		}

		.expertises-top-content {
			max-width: none;
			width: 100%;
		}
		
		.expertise-bubble {
			font-size: 18px;
			line-height: 1.08;
			padding: 10px 16px;
			white-space: normal;
			max-width: 100%;
		}
		
		.expertises-left {
			width: 100%;
			position: relative;
			height: auto;
			min-height: auto;
			padding: 0 var(--padding) 28px var(--padding);
			box-sizing: border-box;
		}
		
		#expertises-h1 {
			order: 10;
			margin-top: 28px;
			font-size: 22px;
		}
		
		.expertises-h2-container {
			display: block;
		}
		
		.expertises-h2-item {
			position: static;
			width: 100%;
			opacity: var(--expertises-title-opacity, 1) !important;
			visibility: visible !important;
			transform: none !important;
			margin-bottom: 20px;
			transition: opacity 0.3s var(--easing);
		}

		.expertises-h2-item h2 {
			font-size: 35px;
			line-height: 0.96;
			letter-spacing: -1px;
		}

		.expertises-h2-item span[class^="highlight-"]::after {
			bottom: 5px;
		}

		.expertises-split-section {
			display: flex;
			flex-direction: column;
			width: 100vw;
			padding: 0 var(--padding) 56px var(--padding);
			box-sizing: border-box;
		}
		
		.expertises-left, .expertises-left-content, .expertises-right {
			display: block;
		}
		
		.expertises-section {
			min-height: auto;
			padding: 0;
			margin-bottom: 28px;
		}
		
		.expertises-bubbles {
			display: flex;
			flex-wrap: wrap;
			gap: 12px 8px;
			margin-bottom: 50px;
		}

		.expertises-list,
		.expertises-text-block,
		.expertises-text-block li {
			font-size: 18px;
			line-height: 1.24;
		}

		.expertises-right {
			width: 100%;
			max-width: none;
		}

		.expertises-text-block {
			width: 100%;
			max-width: none;
			margin-left: 0;
		}

		.expertises-h2-container {
			margin-top: 50px;
		}

		.expertises-list li {
			padding-left: 14px;
			border-left-color: rgba(234, 234, 234, var(--expertises-bullet-opacity, 1));
			transition: border-left-color 0.3s var(--easing);
		}
	}

/*
	NOS VALEURS PAGE ///////////////////////////////////////////////////////////////////////////////
*/

	.legal-page-body {
		background: #fff;
		color: #111;
	}

	.legal-page-body .main-footer {
		margin-top: 0;
		background: #F8F8F8;
	}

	.legal-page-body .header-blur-container {
		display: none;
	}

	.legal-page-body .logo-left {
		opacity: 1;
	}

	.legal-page-body .navbar li {
		opacity: 1;
	}

	.legal-page-shell {
		width: 100%;
		background: #fff;
	}

	.legal-layout {
		display: flex;
		flex-direction: row;
		width: 100%;
		box-sizing: border-box;
	}

	.legal-hero {
		width: 43vw;
		position: sticky;
		top: 0;
		height: 100vh;
		z-index: 10;
		box-sizing: border-box;
		padding: 230px 0 28px 0;
		background: #89DBFC;
		transform-origin: left;
		display: flex;
		flex-direction: column;
	}

	.legal-hero-content {
		position: relative;
		width: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 0 var(--padding);
	}

	.legal-title {
		margin: 0;
		font-size: 56px;
		line-height: 0.95;
		letter-spacing: -1.3px;
		font-weight: 600;
		color: #111;
		max-width: 29vw;
	}

	.legal-hero-links {
		margin-top: auto;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding-bottom: 6px;
	}

	.legal-hero-links a {
		font-size: 16px;
		line-height: 1.15;
		color: #111;
		letter-spacing: -0.3px;
		text-decoration: none;
		transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1), opacity 0.3s var(--easing);
	}

	.legal-hero-links a:hover {
		transform: translateX(10px);
		transition: transform 4s cubic-bezier(0,.97,0,1.01), opacity 0.3s var(--easing);
	}

	.legal-hero-links a[aria-current="page"] {
		opacity: 0.72;
		pointer-events: none;
	}

	.legal-right {
		width: 57vw;
		margin-left: 0;
		box-sizing: border-box;
		position: relative;
		z-index: 5;
		background: #fff;
	}

	.legal-section {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding-top: 201px;
		padding-bottom: 0;
	}

	.legal-copy {
		width: 37vw;
		margin-left: 7vw;
		padding-bottom: 120px;
	}

	.legal-copy > *:first-child {
		margin-top: 0;
	}

	.legal-copy h2 {
		margin: 0 0 34px 0;
		font-size: 31px;
		line-height: 1.18;
		letter-spacing: -0.7px;
		font-weight: 600;
		color: #111;
	}

	.legal-page-body[data-legal-page="legal"] .legal-copy h2 {
		margin: 52px 0 22px 0;
	}

	.legal-copy h3 {
		margin: 52px 0 22px 0;
		font-size: 31px;
		line-height: 1.14;
		letter-spacing: -0.7px;
		font-weight: 600;
		color: #111;
	}

	.legal-copy p,
	.legal-copy li {
		font-size: 22px;
		line-height: 1.38;
		letter-spacing: -0.25px;
		color: #111;
	}

	.legal-copy p {
		margin: 0 0 22px 0;
	}

	.legal-copy ul {
		margin: 0 0 12px 0;
		padding: 0 0 0 28px;
		list-style: disc;
	}

	.legal-copy li {
		margin-bottom: 14px;
	}

	.legal-copy strong {
		font-weight: 600;
	}

	.legal-detail-block {
		margin-bottom: 42px;
	}

	.legal-detail-heading {
		margin-bottom: 22px !important;
	}

	.legal-meta-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, calc((100vw - (var(--padding) * 2)) / 4)));
		column-gap: 0;
		align-items: start;
		width: calc((100vw - (var(--padding) * 2)) / 2);
		margin-bottom: 68px;
	}

	.legal-meta-col {
		min-width: 0;
	}

	.legal-meta-col:first-child {
		padding-right: 32px;
	}

	.legal-meta-item {
		margin: 0 0 10px 0 !important;
	}

	.legal-meta-col .legal-meta-item:last-child {
		margin-bottom: 0 !important;
	}

	.legal-detail-block:last-child {
		margin-bottom: 0;
	}

	.legal-inline-highlight {
		display: inline;
		color: inherit;
		text-decoration: none;
		box-shadow: inset 0 -0.56em 0 #FAFF54;
		transition: opacity 0.3s var(--easing);
	}

	a.legal-inline-highlight:hover {
		opacity: 0.72;
	}

	.legal-page-body .footer-links a[aria-current="page"] span {
		opacity: 0.72;
		transform: none !important;
	}

	.legal-page-body .footer-links a[aria-current="page"] {
		pointer-events: none;
	}

	.legal-page-body[data-legal-page="legal"] .legal-copy > *:first-child {
		margin-top: 0;
	}

	@media screen and (max-width: 900px) {
		.legal-layout {
			flex-direction: column;
		}

		.legal-hero {
			width: 100%;
			position: relative;
			top: auto;
			height: auto;
			min-height: 66svh;
			padding: calc(env(safe-area-inset-top, 0px) + 120px) 0 36px 0;
			transform: scaleX(1);
		}

		.legal-hero-content {
			min-height: calc(66svh - env(safe-area-inset-top, 0px) - 156px);
		}

		.legal-title {
			max-width: none;
			width: 100%;
			font-size: 35px;
			line-height: 0.96;
			letter-spacing: -1px;
		}

		.legal-hero-links {
			gap: 10px;
		}

		.legal-right {
			width: 100%;
			background: #fff;
		}

		.legal-section {
			padding-top: 60px;
			padding-bottom: 0;
		}

		.legal-copy {
			width: 100%;
			margin-left: 0;
			padding: 0 var(--padding) 60px;
		}

		.legal-copy h2,
		.legal-copy h3 {
			font-size: 24px;
			line-height: 1.06;
			letter-spacing: -0.5px;
			margin-bottom: 18px;
		}

		.legal-copy h3 {
			margin-top: 42px;
		}

		.legal-copy p,
		.legal-copy li {
			font-size: 19px;
			line-height: 1.34;
			letter-spacing: -0.15px;
		}

		.legal-copy ul {
			padding-left: 24px;
		}

		.legal-meta-grid {
			grid-template-columns: 1fr;
			width: 100%;
			row-gap: 18px;
			margin-bottom: 52px;
		}

		.legal-meta-col:first-child {
			padding-right: 0;
		}
	}

	.valeurs-layout {
		display: flex;
		flex-direction: row;
		width: 100%;
		box-sizing: border-box;
	}

	.valeurs-left {
		width: 43vw;
		position: sticky;
		top: 0;
		height: 100vh;
		z-index: 10;
		box-sizing: border-box;
		padding: 230px 0 120px 0;
		background: #89DBFC;
		transform-origin: left;
		transform: scaleX(0); /* Animation d'ouverture effectuée via JS/GSAP */
		display: flex;
		flex-direction: column;
	}

	.valeurs-left-content {
		position: relative;
		width: 100%;
		flex-grow: 1;
		display: flex;
		flex-direction: column;
	}

	h1#valeurs-h1 {
		font-family: var(--font-text);
		font-size: 22px;
		font-weight: 400;
		color: #111;
		margin-bottom: 20px;
		letter-spacing: normal;
		margin-top: 0;
		padding: 0 var(--padding);
	}

	.valeurs-svg-wrapper {
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
	}

	.valeurs-ethique-text {
		width: 100%;
		font-family: var(--font-text);
		font-size: max(92px, 9.4vw);
		font-weight: 700;
		line-height: 0.88;
		letter-spacing: -0.05em;
		color: #fff;
		text-transform: uppercase;
		transform: translateX(-1.7%) scale(1.01);
		transform-origin: left center;
	}

	html[lang="fr"] .valeurs-ethique-text {
		transform: translateX(-1.7%) scale(1.01);
	}

	html[lang="en"] .valeurs-ethique-text {
		transform: translateX(-1.8%) scale(0.94);
	}

	.valeurs-right {
		width: 57vw;
		margin-left: 0;
		box-sizing: border-box;
		position: relative;
		z-index: 5;
		background: #FFF;
	}

	.valeurs-section {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding-top: 201px;
		padding-bottom: 120px;
	}

	.valeurs-text-block {
		width: 37vw;
		margin-left: 7vw;
	}

	.valeurs-text-block p {
		font-size: 22px;
		line-height: 1.5;
		color: #444;
	}

	.valeurs-text-block p.intro {
		margin-bottom: 1.5em; /* Espace après l'intro */
	}

	.valeurs-text-block p.intro strong {
		color: #111;
		font-weight: 600;
	}

	/* MOBILE OVERRIDES VALEURS */
	@media screen and (max-width: 900px) {
		.valeurs-layout {
			flex-direction: column;
		}

		.valeurs-left {
			width: 100%;
			position: relative;
			height: auto;
			min-height: auto;
			padding: 120px 0 60px 0;
			box-sizing: border-box;
			transform: scaleX(1); /* Annuler l'animation asynchrone pour l'instant sur mobile ou la garder entière */
		}
		
		h1#valeurs-h1 {
			padding: 0 var(--padding);
		}

		.valeurs-svg-wrapper {
			width: 100%;
			margin-left: 0; 
			padding: 40px var(--padding) 0 var(--padding); 
			box-sizing: border-box;
		}

		.valeurs-ethique-text {
			font-size: clamp(72px, 17vw, 118px);
			line-height: 0.9;
		}

		.valeurs-right {
			width: 100%;
			background: #fff;
		}

		.valeurs-section {
			padding-top: 60px;
			margin-bottom: 0;
			padding-bottom: 60px;
		}

		.valeurs-text-block {
			width: 100%;
			margin-left: 0;
			padding: 0 var(--padding);
			box-sizing: border-box;
		}
	}

/*
	CONTACT PAGE //////////////////////////////////////////////////////////////////////////////////
*/
	.contact-layout {
		width: 100%;
		display: flex;
		flex-direction: column;
		background: var(--bg-color);
	}

	.contact-info-section {
		padding: 250px var(--padding) 60px var(--padding);
		width: 100%;
		box-sizing: border-box;
	}

	.contact-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 0; /* Exactement comme .grid-4 */
	}

	.contact-col {
		display: flex;
		flex-direction: column;
		gap: 32px;
		padding-right: 20px; /* Un peu d'air interne si besoin, mais le layout est sur 4 colonnes pures */
	}

	.contact-block {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	.contact-label {
		font-family: var(--font-text);
		font-size: 16px;
		color: #111;
		font-weight: 400;
	}

	.contact-value {
		font-family: var(--font-title);
		font-size: 26px; /* Ajusté pour correspondre à la maquette */
		font-weight: 600;
		color: #111;
		line-height: 1.1;
		margin: 0;
		text-decoration: none;
	}

	.contact-value.tmark-link {
		transition: opacity 0.3s var(--easing);
	}

	.contact-value.tmark-link:hover {
		opacity: 0.6;
	}

	.contact-hero-section {
		width: 100%;
		position: relative;
		padding: 0 var(--padding) 32px var(--padding);
		box-sizing: border-box;
	}

	.contact-picture {
		display: block;
		width: 100%;
	}

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

	@media (max-width: 1000px) {
		.contact-grid {
			grid-template-columns: repeat(2, 1fr);
			gap: 40px 20px;
		}
		
		.contact-col {
			min-width: 0; /* Fix Safari Grid blowout */
			padding-right: 0; 
		}
		
		.footer-top.grid-4,
		.footer-bottom.grid-4 {
			grid-template-columns: repeat(2, 1fr);
			gap: 40px 20px;
		}
	}

	@media (max-width: 600px) {
		.contact-grid {
			grid-template-columns: 1fr;
			gap: 28px;
		}
		
		.contact-value {
			font-size: 20px; /* Secure wrapping */
			word-break: break-word;
		}
		
		.contact-info-section {
			padding: 200px var(--padding) 40px var(--padding);
		}

		.contact-hero-section {
			padding: 0;
		}

		.contact-picture,
		.contact-img {
			width: 100%;
		}

		.contact-col {
			gap: 24px;
		}
		
		.footer-bottom.grid-4 {
			grid-template-columns: 1fr;
			gap: 40px;
		}
	}

	body[data-active-view="view-nos-valeurs"] .main-footer,
	body[data-active-view="view-contact"] .main-footer {
		margin-top: 0;
	}

	body[data-active-view="view-home"] .main-footer {
		margin-top: 100px;
	}

	.footer-snap,
	.footer-snap .main-footer {
		background: #fff;
	}

	.footer-snap .main-footer,
	body[data-active-view="view-notre-metier"] .main-footer {
		margin-top: 0;
	}