:root {
			--bg-color: #13131a;        
			--text-color: #f4f4f8;      
			--accent: #c084fc;        
			--accent-tech: #0ea5e9;  
			--accent-success: #10b981; 
			--grid-color: rgba(255, 255, 255, 0.06);
			--wall-bg: rgba(26, 26, 36, 0.85);
			--wall-border: rgba(192, 132, 252, 0.25);
		}

		body {
			background-color: var(--bg-color);
			color: var(--text-color);
			font-family: 'Inter', sans-serif;
			margin: 0;
			overflow-x: hidden;
			cursor: none;
			-webkit-font-smoothing: antialiased;
		}

		h1, h2, h3, h4, .font-display {
			font-family: 'Space Grotesk', sans-serif;
		}

		.max-w-5xl {
			max-width: 76rem !important;
		}

		/* --- Environnement & Grille --- */
		.blueprint-bg {
			position: fixed;
			top: 0; left: 0; width: 100vw; height: 100vh;
			background-size: 80px 80px;
			background-image: 
			linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
			linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
			z-index: -2;
			pointer-events: none;
		}

		.blueprint-bg::after {
			content: '';
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0;
			background: radial-gradient(circle at center, transparent 0%, var(--bg-color) 100%);
		}

		.noise {
			position: fixed;
			top: 0; left: 0; width: 100vw; height: 100vh;
			background: url('https://grainy-gradients.vercel.app/noise.svg');
			opacity: 0.04;
			z-index: -1;
			pointer-events: none;
		}

		/* --- Curseur Personnalisé --- */
		.cursor-dot, .cursor-outline {
			position: fixed;
			top: 0; left: 0;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			z-index: 9999;
			pointer-events: none;
			will-change: transform;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
		}
		.cursor-dot {
			width: 6px; height: 6px;
			background-color: var(--accent-tech);
			box-shadow: 0 0 10px var(--accent-tech);
		}
		.cursor-outline {
			width: 40px; height: 40px;
			border: 1px solid rgba(14, 165, 233, 0.4);
			transition: width 0.2s, height 0.2s, background-color 0.2s, border-color 0.2s;
			display: flex; align-items: center; justify-content: center;
			font-size: 8px; font-weight: bold; color: white; text-transform: uppercase;
			letter-spacing: 1px;
		}
		.cursor-hover .cursor-outline {
			width: 90px; height: 90px;
			background-color: rgba(192, 132, 252, 0.1);
			border-color: var(--accent);
          backdrop-filter: blur(4px);
		}
		.cursor-hover .cursor-dot {
			background-color: var(--accent);
			box-shadow: 0 0 10px var(--accent);
		}

		@media (pointer: coarse) {
			body { cursor: auto; }
			.cursor-dot, .cursor-outline { display: none !important; }
			.magnetic-btn, .hover-target, .level-dot { cursor: pointer; }
		}

		/* --- Mécanique de Scroll GSAP --- */
		.scroll-proxy { height: 16000vh; width: 100%; }

		#viewport {
			position: fixed;
			top: 0; left: 0;
			width: 100vw; height: 100vh;
			overflow: hidden;
		}

		#world {
			position: absolute;
			top: 0; left: 0;
			width: 100vw; height: 100vh;
			will-change: transform;
			transform: translateZ(0);
		}

		@keyframes bounce-x-left { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-10px); } }
		@keyframes bounce-x-right { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
		.animate-bounce-x-left { animation: bounce-x-left 2s infinite ease-in-out; }
		.animate-bounce-x-right { animation: bounce-x-right 2s infinite ease-in-out; }

		/* --- Escaliers / Lignes de flux (SVG) --- */
		#stairs-canvas {
			position: absolute;
			top: 0; left: 0;
			overflow: visible;
			z-index: 1; 
			pointer-events: none;
		}
		
		.stair-path { fill: none; stroke: var(--accent-tech); stroke-width: 1.5; stroke-dasharray: 4 8; opacity: 0.4; }
		.stair-path-active { fill: none; stroke: var(--accent); stroke-width: 3; filter: drop-shadow(0 0 12px rgba(192, 132, 252, 0.8)); }

		/* --- Figurine Humaine (Avatar Explorateur 3D) --- */
		#avatar-container {
			position: absolute;
			will-change: transform;
			z-index: 5; 
			width: 30px;
			height: 60px;
			pointer-events: none;
		}

		#scroll-flipper {
			position: relative;
			width: 100%; height: 100%;
			transform-style: preserve-3d;
		}

		.figurine-wrapper {
			position: relative;
			width: 100%;
			height: 100%;
			transform-origin: bottom center;
			transform-style: preserve-3d;
		}

		.figurine {
			width: 100%;
			height: 100%;
			position: absolute;
			bottom: 0;
			transform-origin: bottom center;
			transform: scale(1.5);
			transform-style: preserve-3d;
		}

		@media (min-width: 768px) {
			.figurine { transform: scale(1.2); }
			#modal-title { font-size: 1.7rem !important; }
		}

		.fig-head { 
			width: 14px; height: 14px; 
			background: radial-gradient(circle at 30% 30%, #e9d5ff, var(--accent)); 
			border-radius: 50%; position: absolute; top: 4px; left: 8px; z-index: 3; 
		}
		.fig-head::after { 
			background: var(--accent); border-radius: 2px; 
		}

		.fig-backpack { 
			width: 12px; height: 18px; 
			z-index: 3 !important;
			background: linear-gradient(135deg, #fbbf24, #b45309); 
			border-radius: 4px; position: absolute; top: 16px; left: 1px; z-index: 1; 
		}

		.fig-body { 
			width: 14px; height: 20px; 
			background: linear-gradient(135deg, #38bdf8, var(--accent-tech)); 
			border-radius: 5px; position: absolute; top: 17px; left: 8px; z-index: 2; 
		}

		.fig-map { 
			width: 12px; height: 14px; background: #f8fafc; border: 1px solid #94a3b8; 
			position: absolute; top: 22px; left: 18px; z-index: 4; transform: rotate(15deg); border-radius: 1px; 
		}
		.fig-map::before { content:''; position: absolute; top: 2px; left: 2px; width: 6px; height: 1px; background: var(--accent-success); }
		.fig-map::after { content:''; position: absolute; top: 5px; left: 2px; width: 4px; height: 1px; background: var(--accent); }

		.fig-arm { width: 4px; height: 12px; background: linear-gradient(to right, #e2e8f0, #94a3b8); box-shadow: inset -1px -1px 2px rgba(0,0,0,0.2); border-radius: 2px; position: absolute; top: 19px; transform-origin: top center; z-index: 5; }
		.fig-arm.left { left: 10px; z-index: 1; transform: rotate(30deg); background: linear-gradient(to right, #94a3b8, #64748b); }
		.fig-arm.right { left: 16px; transform: rotate(-20deg); }

		.fig-leg { width: 5px; height: 18px; background: linear-gradient(to right, #ffffff, #cbd5e1); box-shadow: inset -1px -1px 2px rgba(0,0,0,0.2); border-radius: 2px; position: absolute; top: 35px; transform-origin: top center; z-index: 1; }
		.fig-leg.left { left: 10px; z-index: 1; background: linear-gradient(to right, #94a3b8, #64748b); }
		.fig-leg.right { left: 15px; z-index: 3; }

		/* Animations de marche dynamiques */
		.is-walking .fig-leg.left { animation: walk-leg 0.5s infinite linear; }
		.is-walking .fig-leg.right { animation: walk-leg 0.5s infinite linear 0.25s; }
		.is-walking .figurine { animation: fig-bounce 0.3s infinite alternate ease-in-out; }
		.is-walking .fig-map { animation: map-bob 0.3s infinite alternate ease-in-out; }

		@keyframes walk-leg { 0% { transform: rotate(0deg); } 25% { transform: rotate(35deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-35deg); } 100% { transform: rotate(0deg); } }
		@keyframes fig-bounce { 0% { bottom: 0px; } 100% { bottom: 4px; } }
		@keyframes map-bob { 0% { transform: rotate(15deg) translateY(0); } 100% { transform: rotate(12deg) translateY(1px); } }

		/* --- Paliers & Murs (Landings) --- */
		.landing {
			position: absolute;
			transform: translate(-50%, -50%); 
			z-index: 10; 
		}

		.floor-number {
			position: absolute;
			font-size: clamp(6rem, 25vw, 30rem); 
			font-family: 'Space Grotesk', sans-serif;
			font-weight: 700;
			color: rgba(255, 255, 255, 0.02);
			-webkit-text-stroke: 4px rgba(255, 255, 255, 0.15); 
			text-shadow: 0 0 60px rgba(192, 132, 252, 0.15); 
			z-index: 5; 
			pointer-events: none;
			user-select: none;
			line-height: 0.8;
			white-space: nowrap;
			opacity: 0.5; 
		}

		@media (max-width: 768px) {
			.floor-number {
				top: -4% !important; 
				left: auto !important;
				right: 0% !important; 
				transform: none !important;
				font-size: 6.5rem !important; 
				opacity: 0.3; 
			}

			.cv-track{
				padding-top: 10vh !important;
			}

			#zero {
				top: -12% !important; 
				left: 10% !important;
			} 
			#one {
				top: -10% !important; 
				right: 60% !important;
			} 
			#two {
				top: -25% !important; 
				right: 60% !important;
			}#three {
				top: -15% !important; 
				left: 10% !important;
			}#four {
				top: -12% !important; 
				right: 60% !important;
			}#five {
				top: -12% !important; 
				right: 60% !important;
			}
		}

		.wall {
			background: var(--wall-bg);
			border: 1px solid var(--wall-border);
			box-shadow: 20px 20px 60px rgba(0,0,0,0.6), inset 0 0 30px rgba(192, 132, 252, 0.05);
			width: 90vw; 
			max-width: 800px;
			position: relative;
			border-radius: 12px;
			z-index: 10; 
			will-change: transform, opacity;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			transform: translateZ(0);
		}

		.wall.wide { max-width: 1100px; }
		.wall-inner { padding: 1.5rem; }

		@media (min-width: 768px) {
			.wall-inner { padding: 3rem 4rem; }
		}

		.wall::before {
			content: '';
			position: absolute;
			top: 0; left: 0; right: 0; bottom: 0;
			background: url('https://grainy-gradients.vercel.app/noise.svg');
			opacity: 0.15;
			pointer-events: none;
			border-radius: 12px;
		}

		.wall::after {
			content: '';
			position: absolute;
			bottom: -2px; left: -5%;
			width: 110%; height: 2px;
			background: linear-gradient(90deg, transparent, var(--accent), var(--accent-tech), transparent);
			filter: drop-shadow(0 -5px 15px var(--accent));
		}

		.tech-tag {
			font-family: 'Space Grotesk', sans-serif;
			font-size: 10px;
			color: var(--accent-tech);
			text-transform: uppercase;
			letter-spacing: 0.3em;
			display: inline-block;
			margin-bottom: 1.5rem;
			border: 1px solid rgba(14, 165, 233, 0.3);
			padding: 0.3rem 0.8rem;
			border-radius: 100px;
			background: rgba(14, 165, 233, 0.05);
		}

		.status-badge {
			font-family: 'Space Grotesk', sans-serif;
			font-size: 10px;
			color: var(--accent-success);
			text-transform: uppercase;
			letter-spacing: 0.1em;
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			margin-bottom: 1.5rem;
			border: 1px solid rgba(16, 185, 129, 0.3);
			padding: 0.3rem 0.8rem;
			border-radius: 100px;
			background: rgba(16, 185, 129, 0.05);
		}
		.status-badge::before {
			content: '';
			display: block;
			width: 6px; height: 6px;
			background: var(--accent-success);
			border-radius: 50%;
			box-shadow: 0 0 8px var(--accent-success);
			animation: pulse 2s infinite;
		}

		.scroll-indicator {
			display: flex;
			align-items: center;
			gap: 0.75rem;
			opacity: 0.8;
			margin-top: 3rem;
			animation: float-mouse 2s infinite ease-in-out;
		}
		.mouse {
			width: 20px;
			height: 32px;
			border: 2px solid white;
			border-radius: 12px;
			position: relative;
		}
		.mouse::before {
			content: '';
			position: absolute;
			top: 6px; left: 50%;
			transform: translateX(-50%);
			width: 2px; height: 6px;
			background: var(--accent);
			border-radius: 2px;
			animation: scroll-wheel 1.5s infinite;
		}

		.huge-text {
			font-size: clamp(4.5rem, 15vw, 8rem);
			font-weight: 700;
			line-height: 0.9;
			letter-spacing: -0.05em;
			text-transform: uppercase;
		}
		
		.outline-text {
			-webkit-text-stroke: 1.5px rgba(255,255,255,0.5);
			color: transparent;
			transition: color 0.3s, -webkit-text-stroke 0.3s;
		}
		.huge-text:hover .outline-text {
			color: white;
			-webkit-text-stroke: 1.5px white;
		}

		.elevator-panel {
			position: fixed;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
			display: flex;
			flex-direction: column;
			gap: 1.5rem;
			z-index: 100;
		}

		@media (min-width: 768px) { .elevator-panel { right: 40px; } }

		.level-dot {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 1rem;
			opacity: 0.4;
			transition: opacity 0.3s, transform 0.3s;
		}
		.level-dot:hover, .level-dot.active {
			opacity: 1;
			transform: translateX(-5px);
		}
		@media (min-width: 768px) {
			.level-dot:hover, .level-dot.active { transform: translateX(-10px); }
		}

		.level-dot.active .dot {
			background-color: var(--accent);
			box-shadow: 0 0 15px var(--accent);
			transform: scale(1.5);
		}
		.level-dot.active .level-label { color: white; font-weight: 700; }
		.dot {
			width: 8px; height: 8px;
			border-radius: 50%;
			background-color: white;
			transition: all 0.3s;
		}
		
		.level-label {
			font-family: 'Space Grotesk', sans-serif;
			font-size: 10px;
			text-transform: uppercase;
			letter-spacing: 2px;
			transition: color 0.3s;
			display: flex;
			align-items: center;
		}
		.level-label .text-part { display: none; }
		@media (min-width: 768px) { 
			.level-label .text-part { display: inline; } 
			.level-label .font-bold { background: transparent !important; border: none !important; padding: 0 !important; }
		}
		
		.level-label .font-bold {
			display: inline-block;
			background: rgba(19, 19, 26, 0.8);
			padding: 2px 6px;
			border-radius: 4px;
			border: 1px solid rgba(255,255,255,0.1);
		}

		.glass-card {
			background: rgba(255,255,255,0.02);
			border: 1px solid rgba(255,255,255,0.08);
			border-radius: 8px;
			transition: all 0.3s ease;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			transform: translateZ(0);
		}

		.portfolio-viewport { cursor: ew-resize; }
		
		/* --- INTEGRATION DU SYSTÈME MASONRY PUR CSS (SANS JS, AUCUN ROGNAGE) --- */
		.portfolio-grid {
			column-count: 1;
			column-gap: 1.5rem;
			width: 100%;
		}

		@media (min-width: 640px) { .portfolio-grid { column-count: 2; } }
		@media (min-width: 1024px) { .portfolio-grid { column-count: 3; } }
		@media (min-width: 1280px) { .portfolio-grid { column-count: 3; } }

		.portfolio-item {
			break-inside: avoid;
			margin-bottom: 1.5rem;
			position: relative;
			overflow: hidden;
			border: 1px solid rgba(255,255,255,0.1);
			border-radius: 12px; 
			background: #1a1a24;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			transform: translateZ(0);
			z-index: 10;
			display: block; 
		}
		
		.portfolio-item[data-type*="BANNIÈRE"], 
		.portfolio-item[data-type*="MAILING"] {
			column-span: all;
			margin-top: 1rem;
			margin-bottom: 2rem;
		}

		.portfolio-img {
			width: 100%;
			height: auto !important; 
			display: block;
			object-fit: contain; 
			transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
		}
		
		.group:hover .portfolio-img {
			filter: grayscale(0%);
			transform: scale(1.02);
		}

		.custom-scrollbar::-webkit-scrollbar { width: 4px; }
		.custom-scrollbar::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 4px; }
		.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--accent-tech); border-radius: 4px; }