: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: rgb(26, 26, 36);
}

#world, #avatar-container {
	will-change: transform;
}

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

/* --- ANIMATION INDICATEUR --- */
@keyframes scrollLine {
	0% { transform: translateY(-100%); }
	100% { transform: translateY(200%); }
}
.animate-scroll-line {
	animation: scrollLine 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

#scroll-indicator {
	text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* Loader */
#loader {
	position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
	background-color: var(--bg-color);
	z-index: 999999;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.loader-logo { font-family: 'Space Grotesk', sans-serif; font-size: 5rem; font-weight: bold; letter-spacing: -3px; color: white; margin-bottom: 2rem; }
.loader-bar-bg { width: 200px; height: 2px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; position: relative; }
.loader-bar { width: 0%; height: 100%; background: var(--accent); }

/* Blocage Paysage Mobile */
@media screen and (max-width: 850px) and (orientation: landscape) {
	#viewport, .elevator-panel, header, #loader, .scroll-proxy { display: none !important; }
	#landscape-warning { display: flex !important; }
	body { overflow: hidden; }
}

/* Environnement & Grille */
.blueprint-bg {
	position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh;
	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; height: 100dvh;
	background: url('https://grainy-gradients.vercel.app/noise.svg');
	opacity: 0.05; 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;
	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);
	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); }
.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 GSAP Desktop */
.scroll-proxy { height: 16000vh; width: 100%; }
#viewport { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; }
#world { position: absolute; top: -6% !important; left: 0; width: 100vw; height: 100vh; transform: translateZ(0); }

.fade-mask-x { mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); }

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

/* Avatar SVG & Escaliers */
#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; }

#avatar-container { position: absolute; 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; }

/* Structure Avatar */
.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; 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 Avatar */
.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); } }

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

/* --- GESTION DES NUMÉROS DE SECTION (.floor-number) --- */
.floor-number {
	position: absolute; 
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	line-height: 0.8; 
	white-space: nowrap; 
	pointer-events: none; 
	user-select: none;
	z-index: 5; 
	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); 
	opacity: 0.8; 
	font-size: clamp(10rem, 20vw, 30rem);
}

@media (min-width: 1025px) {
	.figurine { transform: scale(1.2); } 
	#zero  { top: -5%; left: 0%; }
	#one   { top: -37%; right: 67%; }
	#two   { top: -30%; left: 60%; z-index: 25; }
	#three { top: -22%; right: 90%; }
	#four  { top: -10%; left: 55%; }
	#five  { top: -30%; right: 65%; }
}

/* Base de la boite (Wall) */
.wall {
	background: linear-gradient(var(--wall-bg), var(--wall-bg)) padding-box,
	linear-gradient(135deg, var(--accent), var(--accent-tech), var(--accent)) border-box;
	border: 2px solid transparent;
	box-shadow: 20px 20px 60px rgba(0,0,0,0.6), inset 0 0 30px rgba(192, 132, 252, 0.05), 0 0 15px rgba(192, 132, 252, 0.3);
	width: 90vw; max-width: 800px; position: relative; border-radius: 12px; z-index: 10; 
}
.wall.wide { max-width: 100%; }
.wall-inner { padding: clamp(1.5rem, 4vw, 4rem); }

/* Typographie Globale */
.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; }
.huge-text { font-size: clamp(3rem, 8vw, 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;  }
.huge-text:hover .outline-text { color: white; -webkit-text-stroke: 1.5px white; }

/* Interface Minimap (Menu droite) */
.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; }
.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; }
.level-label { font-family: 'Space Grotesk', sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; }

/* Logique d'affichage Menu */
.level-label .text-part { display: none; }
.level-dot.active .level-label .text-part { display: inline; color: var(--accent); }
@media (min-width: 768px) { 
	.level-label .text-part { display: inline; color: inherit; } 
	.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); }

/* Portfolio Grid */
.glass-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; }
.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 & OBSERVER ANIMATION */
.portfolio-item { 
	break-inside: avoid; position: relative; overflow: hidden; 
	border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; background: #1a1a24; 
	z-index: 10; 
	
	/* FIX SAFARI : Empêche le chevauchement dans les colonnes */
	display: inline-block; 
	width: 100%; 
	margin-bottom: 1.5rem;
	
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.portfolio-item.is-revealed {
	/* Déclenché par l'Intersection Observer JS */
	opacity: 1;
	transform: translateY(0);
}
.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: filter 0.3s, transform 0.3s; }
@media (hover: hover) { .group:hover .portfolio-img { filter: grayscale(0%); transform: scale(1.02); } }

/* Barre Compétences */
#skills-viewport {
	overflow-x: auto !important; overflow-y: hidden !important; scroll-behavior: smooth;
	-ms-overflow-style: none; scrollbar-width: none; 
}
#skills-viewport::-webkit-scrollbar { display: none; }

/* Menu Mobile & Global Mobile Overrides (Regroupement) */
#mobile-menu-btn { display: none; border: none; background: transparent; outline: none; }

/* ========================================================= */
/* --- REFONTE MOBILE & TABLETTE (FLEXBOX NATIF) ----------- */
/* ========================================================= */
@media (max-width: 1024px) {

	/* Menu Fullscreen */
	#mobile-menu-btn { display: block; }
	.elevator-panel {
		position: fixed; top: 0; left: 0; right: 0; bottom: 0;
		width: 100vw; height: 100vh; background: rgba(19, 19, 26, 0.98);
		backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
		transform: translateY(-100%); transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
		display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 95; 
	}
	.elevator-panel.menu-open { transform: translateY(0); }
	.elevator-panel > .flex { align-items: flex-start; gap: 2.5rem !important; }
	.level-dot { opacity: 1; transform: none !important; }
	.level-label { font-size: 1.5rem; letter-spacing: 3px; }
	.level-label .text-part { display: inline-block !important; color: white; }
	.level-label .font-bold { background: transparent !important; border: none !important; color: var(--accent); font-size: 1.8rem; padding-right: 10px !important; }
	.level-dot .dot { display: none; }
	.elevator-panel > .absolute { display: none; }

	#zero{
		margin-top : 70px !important;
		padding-bottom: 30px !important;
	}
	
	/* Layout Flexbox Vertical pour le Monde GSAP */
	#viewport { position: relative; width: 100%; height: auto; overflow: visible; }
	
	#world { 
		position: relative; 
		top: 0 !important; 
		width: 100%; 
		height: auto; 
		transform: none !important; 
		display: flex; 
		flex-direction: column; 
		gap: 45vh; /* AVANT: 15vh --> Augmenté pour faire respirer les sections */
		padding: 15vh 0 25vh 0;
	}

	/* --- NOUVEAU : LE FIL D'ARIANE MOBILE (Timeline Centrale) --- */
	/* Paramètres communs aux deux lignes */
	#world::before, #world::after {
		content: '';
		position: absolute;
		top: 80vh;          
		bottom: 10vh;      
		left: 50%; /* Placement au centre exact de l'écran */
		width: 2px;
		z-index: 0;
	}

	/* 1. Le fond : Ligne discontinue (pointillés) par défaut */
	#world::before {
		transform: translateX(-50%);
		background-image: linear-gradient(to bottom, var(--accent-tech) 50%, transparent 50%);
		background-size: 2px 24px;
		opacity: 0.2;
	}

	/* 2. Le remplissage : Ligne pleine animée au scroll */
	#world::after {
		background-color: var(--accent); /* Couleur violette pleine */
		opacity: 0.8;
		filter: drop-shadow(0 0 8px var(--accent)); /* Bel effet Néon */
		transform-origin: top center; /* L'animation part du haut vers le bas */
		
		/* LA MAGIE : On combine le centrage avec l'échelle verticale (scaleY) pilotée par le JS */
		transform: translateX(-50%) scaleY(var(--scroll-progress, 0));
		will-change: transform;
	}
	/* ------------------------------------------------------------- */
	
	.landing { 
		position: relative !important; 
		transform: none !important; 
		left: auto !important; 
		top: auto !important; 
		width: 100% !important; 
		min-height: auto; 
		display: flex; 
		flex-direction: column; 
		align-items: center; 
		justify-content: center; 
	}

	/* NOUVEAU PLACEMENT DES NUMÉROS (Plus aérés) */
	.floor-number {
		position: absolute !important;
		top: -120px !important; /* AVANT: -80px --> On remonte le chiffre pour le décoller de la carte */
		left: 20px !important; 
		right: auto !important;
		transform: none !important;
		font-size: 90px;
		opacity: 0.9; color: transparent !important;
		-webkit-text-stroke: 2px rgba(255, 255, 255, 0.4) !important;
		text-shadow: none !important; z-index: 1;
		margin: 0 !important; /* AVANT: Marge négative supprimée pour libérer l'espace */
		text-align: left;
	}


	.wall { width: 92vw; margin-top: 0 !important; z-index: 10; }
	.scroll-proxy { display: none !important; }
	#avatar-container, #stairs-canvas { display: none !important; }
	#cv-viewport, #portfolio-grid-viewport { height: auto !important; max-height: none !important; }
	#cv-track, #portfolio-grid-track { height: auto !important; backdrop-filter: blur(10px); }
	.fade-mask-y { mask-image: none !important; }

	/* FIX PORTFOLIO MOBILE : On désactive les colonnes pour du pur Flexbox natif */
	.portfolio-grid {
		column-count: auto !important; /* Annule l'effet brique/masonry */
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}
	.portfolio-item {
/*		display: flex !important;*/
width: 100% !important;
margin-bottom: 0 !important;
}
}

@media (max-width: 768px) {

	#zero{
		margin-top : 70px !important;
		padding-bottom: 30px !important;
	}
	.floor-number { font-size: 90px; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.6) !important; }
	.wall { box-shadow: none !important; }
	.glass-card { margin-bottom: 30px; background-color: #1a1a24 !important; border-color: rgba(255,255,255,0.1) !important; }
	
	/* Optimisation Performance Mobile */
	.noise, .blueprint-bg { display: none !important; }
	.backdrop-blur-md, .backdrop-blur-xl, .backdrop-blur-3xl, .custom-overlay {
		backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
	}
	.absolute.inset-0.z-0 { background-color: var(--bg-color) !important; } 
	#expertise_360 p { text-align: center !important; }
}