:root {
            --nox-bg: #030407;
            --nox-primary: #a8b3c3;
            --nox-glow: #d4e1f7;
            --dies-bg: #f5f0e6;
            --dies-primary: #b48d4b;
            --dies-glow: #ffe8a9;
            --dies-text: #4E443A;
            --font-title: 'Cinzel', serif;
            --font-title-dies: 'Playfair Display', serif;
            --font-text: 'Nunito Sans', sans-serif;
        }
        
        * {
        	margin: 0;
        	padding: 0;
        	box-sizing: border-box;
        }
        	
        body {
        	background-color: #000;
        	height: 100vh;
        	overflow: hidden;
        	font-family: var(--font-text); }
        	
        .dies-chosen { background: var(--dies-bg); color: var(--dies-text); }
        .nox-chosen { background: var(--nox-bg); color: var(--nox-primary); }

        .view { 
            display: none;
            position: absolute; 
            width: 100%; 
            height: 100%; 
            top: 0; 
            left: 0; 
            animation: fadeInView 1.2s ease-in-out; 
            justify-content: center; 
            align-items: center; 
            flex-direction: column; 
            z-index: 50;
        }
        .view.active-view { 
            display: flex;
        }
        @keyframes fadeInView { from { opacity: 0; } to { opacity: 1; } }

        #portal-container { 
            z-index: 100;
            background: radial-gradient(ellipse at center, #1b2735 0%, #090a0f 100%); 
        }
        #artefact-wrapper {
        	position: relative;
        	display: flex;
        	justify-content: center;
        	align-items: center;
        	animation: slowFloat 6s infinite ease-in-out;
        	z-index: 30;
        }
        
        @keyframes slowFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
        
		#choices-wrapper {
    		display: flex;
    		position: relative;
    		z-index: 10;
        	border-radius: 50%;  
    		overflow: hidden;
    		transition: box-shadow 0.3s ease-in-out;
		}
        
        .choice-orb {
        	width: 125px;
        	height: 250px;
        	text-decoration: none;
        	transition: all 0.3s ease;
        	position: relative;
        	background-image: url(https://www.transparenttextures.com/patterns/rocky-wall.png);
        	box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
        	cursor: pointer;
        }
        
        #choice-dies {
        	border-top-left-radius: 150px;
        	border-bottom-left-radius: 150px;
        	background-color: var(--dies-primary);
        	border: 2px solid #5a4a2a;
        	border-right: 1px solid #4d3d20;
        }
        
        #choice-dies:hover,
		#choice-nox:hover {
    		transform: translateY(-8px) scale(1.1);
    		z-index: 10;
		}

		#choice-dies:hover {
    		box-shadow: inset 0 0 50px var(--dies-glow);
		}

		#choice-nox:hover {
    		box-shadow: inset 0 0 50px #FFFFFF;
		}      	
        #choice-nox {
       		border-top-right-radius: 150px;
        	border-bottom-right-radius: 150px;
        	background-color: var(--nox-primary);
        	border: 2px solid #3c4a5e;
       		border-left: 1px solid #2e3846;
        }
        #choices-wrapper:has(#choice-dies:hover) {
    		box-shadow: 0 0 80px 10px rgba(180, 141, 75, 0.6);
		}

		#choices-wrapper:has(#choice-nox:hover) {
    		box-shadow: 0 0 80px 10px rgba(168, 179, 195, 0.5);
		}
        
        #main-title {
        	font-family: var(--font-title);
        	font-size: 3.5rem;
        	color: white;
        	text-shadow: 0 0 15px black;
        	pointer-events: none;
        	z-index: 50;
        	position: absolute;
        	top: 50%;
        	left: 50%;
       		transform: translate(-50%, -50%);
        }
        
        .orbit {
        	position: absolute;
        	top: 50%;
        	left: 50%;
        	width: var(--orbit-size);
        	height: var(--orbit-size);
        	margin-top: calc(var(--orbit-size) / -2);
        	margin-left: calc(var(--orbit-size) / -2);
        	border-radius: 50%;
        	animation: spin-orbit var(--orbit-duration) linear infinite;
        	animation-delay: var(--orbit-delay, 0s);
        	z-index: 10;
        	pointer-events: none;
        }
        
        @keyframes spin-orbit {
        from {
        	transform: rotate(0deg); } to {transform: rotate(360deg); } }
        	
        .orbiting-element {
        	width: 8px;
        	height: 8px;
        	background-color: #FFF;
        	border-radius: 50%;
        	position: absolute;
        	top: -4px;
			left: 50%;
        	margin-left: -4px;
        	box-shadow: 0 0 15px #FFF;
        	animation: counter-spin var(--orbit-duration) linear infinite;
        	animation-delay: var(--orbit-delay, 0s);
        	z-index: 10;
        	pointer-events: none;
        }
        
        @keyframes counter-spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

        .main-footer-links {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%); 
            display: flex;
            justify-content: center;
            gap: 20px;
            width: auto;
            max-width: 90vw;
            padding: 5px 20px; 
            align-items: center;
            z-index: 200;
            white-space: nowrap;
            background: rgba(0, 0, 0, 0.2); 
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.3); backdrop-filter: blur(2px);
        }
        
        .copyright-text {
            color: rgba(255, 255, 255, 0.8);
            font-family: var(--font-text);
            font-size: 0.85rem; 
            white-space: nowrap;
            text-align: left;
            text-shadow: 0 0 5px rgba(0,0,0,0.5); 
        }
        
		.copyright-text:hover { color: white; transform: translateY(-2px); cursor: default; }
        .footer-link {
            color: rgba(255, 255, 255, 0.8);
            font-family: var(--font-text);
            font-size: 0.85rem; 
            text-decoration: none;
            transition: color 0.3s ease,
            transform 0.2s ease; 
            pointer-events: auto;
            white-space: nowrap;
            position: relative; 
        }
        
        .footer-link::before {
            content: '';
            position: absolute;
            left: -10px;
            top: 50%; 
            transform: translateY(-50%);
            width: 1px;
            height: 80%;
            background-color: rgba(255, 255, 255, 0.3); 
        }
        
        .footer-link:hover {
        	color: white;
        	text-decoration: underline;
        	transform: translateY(-2px);
        }

        #dies-hub {
            background-image: url('https://images.unsplash.com/photo-1594042811360-369135434d3d?q=80&w=1974&auto=format&fit=crop');
            background-size: cover;
            background-position: center 70%;
        }
        
        #piano-overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, transparent 30%, rgba(0,0,0,0.5) 100%);
            box-shadow:
            inset 0 0 300px #000;
            display: none;
        }
        
        #dies-hub.active-view #piano-overlay { display: block; }
        #dies-hub #combined-nav {
            position: relative;
            width: fit-content;
            height: 150px;
            padding-bottom: 5px; 
            border: 1px solid rgba(0,0,0,0.2);
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
            background-color: rgba(255,255,255,0.02);
            margin-top: 10px;
            z-index: 2; 
        }
        #dies-hub #combined-nav ul {
            display: flex;
            align-items: flex-end;
            list-style: none;
            padding: 0;
            margin: 0;
            position: relative;
            height: 100%;
        }
        #dies-hub #combined-nav li {
            position: relative;
            height: 100%;
            width: 40px;
            box-sizing: border-box;
            background: #f5f0e6;
            border-right: 1px solid rgba(0,0,0,0.1);
            border-left: 1px solid rgba(0,0,0,0.1);
            z-index: 1;
        }
        #dies-hub #combined-nav li:first-child { border-left: 1px solid rgba(0,0,0,0.1); }
        #dies-hub #combined-nav li:last-child { border-right: 1px solid rgba(0,0,0,0.1); }
        
        #dies-hub #combined-nav a {
            display: block;
            width: 100%;
            height: 100%;
            box-shadow: 0 5px 5px rgba(0,0,0,0.2);
            cursor: pointer;
            transition: all 0.1s ease-out;
            position: relative;
            box-sizing: border-box;
        }
        #dies-hub #combined-nav .nav-dies-b-key {
            position: absolute;
            width: 25px;
            height: 90px;
            background: #4E443A;
            border: 1px solid rgba(0,0,0,0.8);
            box-shadow: 0 3px 3px rgba(0,0,0,0.4);
            top: 0;
            z-index: 3;
            transform: translateX(-50%);
            border-top-left-radius: 2px;
            border-top-right-radius: 2px;
		}
			
        #dies-hub #combined-nav .nav-dies-b-key a { 
        	background: transparent;
       		border: none;
		}
        
        #dies-hub #combined-nav li:nth-child(2) {
        	left: calc(40px * 0 + (40px / 2) + 20px);
		} 
        
        #dies-hub #combined-nav li:nth-child(4) {
        	left: calc(40px * 1 + (40px / 2) + 20px);
		} 
        
        #dies-hub #combined-nav li:nth-child(7) {
        	left: calc(40px * 3 + (40px / 2) + 20px);
		}
        
        #dies-hub #combined-nav li:nth-child(9) {
        	left: calc(40px * 4 + (40px / 2) + 20px);
		} 
        
        #dies-hub #combined-nav li:nth-child(11) {
        	left: calc(40px * 5 + (40px / 2) + 20px);
		} 
        
        #dies-hub #combined-nav a:hover {
       		box-shadow: 0 0 20px 5px var(--dies-glow), 0 8px 5px rgba(0,0,0,0.4);
        	transform: translateY(3px);
		}
			
        #dies-hub #combined-nav .nav-dies-key a:hover {
        	background: #fff;
		}
        #dies-hub #combined-nav .nav-dies-b-key:hover {
        	background: #2b2621;
        	box-shadow: 0 0 20px 5px rgba(255,255,255,0.5), 0 8px 5px rgba(0,0,0,0.6);
        	transform: translateY(3px) translateX(-50%);
		}
        #dies-hub #combined-nav .nav-dies-b-key a:hover {
        	background: transparent;
		}
        #dies-hub #combined-nav a span {
        	position: absolute;
        	bottom: 110%;
        	left: 50%;
        	transform: translateX(-50%);
        	font-family: var(--font-title-dies);
        	font-size: 1rem;
        	color: white;
        	text-shadow: 0 1px 5px #000;
        	opacity: 0;
        	transition: opacity 0.3s ease;
        	pointer-events: none;
        	white-space: nowrap;
        	text-align: center;
        	width: max-content;
        }
        
        #dies-hub #combined-nav a:hover span {
        	opacity: 1;
        }
        
        #current-track-display {
        	position: absolute;
        	top: 50px;
        	width: 100%;
        	text-align: center;
        	color: var(--dies-glow);
        	font-family: var(--font-title-dies);
        	font-size: 1.8rem;
        	text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
        	z-index: 10;
        }
        
        #streaming-links {
        	position: absolute;
        	bottom: 50px;
        	width: 80%;
        	max-width: 700px;
        	display: flex;
        	flex-direction: column;
        	justify-content: center;
        	align-items: center;
        	padding: 30px;
        	background: rgba(0, 0, 0, 0.3);
        	border-radius: 10px;
        	box-shadow: 0 0 15px rgba(0,0,0,0.5);
        	z-index: 10;
        }
        
        #streaming-links h2 {
        	color: white;
        	font-family: var(--font-title-dies);
        	font-size: 1.2rem;
        	text-shadow: 0 0 5px rgba(0,0,0,0.5);
        	margin-bottom: 20px;
        	text-align: center;
        }
        
        #streaming-links .logo-container {
        	display: flex;
        	flex-wrap: wrap;
        	justify-content: center;
        	align-items: center;
        	gap: 30px;
        	width: 100%;
        }
        
		#streaming-links a {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 45px;
			height: 45px;
			line-height: 0;
			transition: transform 0.2s ease,
			filter 0.2s ease;
			filter: brightness(100%);
			position: relative;
        }
        
        #streaming-links a:hover {
        	transform: translateY(-5px) scale(1.1);
        	filter: none;
        }
        
        #streaming-links img {
        	max-width: 80%;
        	max-height: 80%;
        	object-fit: contain;
       		display: block;
        }
        
        #streaming-links a .link-text {
            position: absolute;
            bottom: 110%;
            left: 50%;
            transform: translateX(-50%);
            font-family: var(--font-text);
            font-size: 0.8rem;
            color: white;
            text-shadow: 0 0 5px rgba(0,0,0,0.7);
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
            white-space: nowrap;
            text-align: center;
            padding: 2px 8px;
            border-radius: 4px;
        }
        
        #streaming-links a:hover .link-text { opacity: 1; }
        
        #nox-hub {
        	background: radial-gradient(ellipse at center, #1b2735 0%, #090a0f 100%);
        	overflow: hidden;
        }
        
        #stars-bg {
        	position: absolute;
        	width: 100%;
        	height: 100%;
       		background-image: url(https://www.transparenttextures.com/patterns/stardust.png);
       		animation: slow-spin 180s linear infinite;
        }
        
        @keyframes slow-spin { to { transform: rotate(360deg); } }
        
        #nox-hub #nav-nox {
        	position: relative;
        	width: 600px;
        	height: 400px;
        }
        
        #nox-hub #nav-nox ul {
        	list-style: none;
        	padding: 0;
        	margin: 0;
       		position: relative;
        	width: 100%;
        	height: 100%;
        }
        
        #nox-hub #nav-nox li {
        	position: absolute;
        }
        
        #nox-hub #nav-nox a {
        	display: block;
        	width: 20px;
        	height: 20px;
        	text-decoration: none;
        	position: relative;
        	cursor: pointer;
        	}
        #nox-hub #nav-nox a::before { 
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            background: var(--nox-primary); 
            border-radius: 50%;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%); 
            box-shadow: 0 0 10px 2px var(--nox-primary);
            animation: pulse-star 3s infinite ease-in-out;
            transition: all 0.3s ease; 
        }
        
        @keyframes pulse-star { 50% {
        	transform: translate(-50%, -50%) scale(1.5);
        	box-shadow: 0 0 15px 5px var(--nox-glow); }
        }
        
        #nox-hub #nav-nox a:hover::before { 
        	transform: translate(-50%, -50%) scale(2);
        	background: #fff;
        	box-shadow: 0 0 20px 8px #fff;
        }
        
        #nox-hub #nav-nox a span { 
            position: absolute;
            top: 25px;
            left: 50%;
            transform: translateX(-50%); 
            color: #fff;
            font-family: var(--font-title);
            font-size: 1.5rem; 
            opacity: 0;
            transition: opacity 0.3s;
            white-space: nowrap;
            pointer-events: none; 
        }
        
        #nox-hub #nav-nox li:hover span { opacity: 1; }
        
        #nox-hub #branch-1 { top: 5%; left: 15%; }
        #nox-hub #branch-2 { top: 95%; left: 5%; }
        #nox-hub #branch-3 { top: 50%; left: 95%; }
        #nox-hub #branch-4 { top: 50%; left: 50%; }
        #nox-hub #branch-5 { top: 95%; left: 55%; }
        #nox-hub #branch-6 { top: 10%; left: 70%; }
        
        #constellation-lines { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; }
        #constellation-lines path { stroke: rgba(168, 179, 195, 0.4); stroke-width: 1px; fill: none; }

        .back-button {
            position: absolute; top: 30px; left: 30px; padding: 10px 20px;
            background: rgba(128, 128, 128, 0.5); border: 1px solid rgba(128, 128, 128, 0.8);
            color: #FFFFFF !important; border-radius: 5px; cursor: pointer;
            font-size: 1rem; z-index: 9999; text-decoration: none;
        }
        
        .back-button:hover {
        	background: rgba(128, 128, 128, 0.7);
        	border-color: #FFFFFF;
        	color: #FFFFFF;
        }

        .page-container { 
            display: none;
            overflow-y: auto;
            padding: 40px; 
            background: radial-gradient(ellipse at center, #1b2735 0%, #090a0f 100%) !important;
            color: white; 
        }
        
        .page-container.active-view {
        	display: flex;
        }
        
        .page-content { 
    background:
        radial-gradient(ellipse at center, rgba(27, 39, 53, 0.6) 0%, rgba(9, 10, 15, 0.9) 100%),
        url(https://www.transparenttextures.com/patterns/stardust.png);
    border: 1px solid rgba(168, 179, 195, 0.2);
    box-shadow:
        inset 0 0 15px rgba(0,0,0,0.5),
        0 0 30px rgba(0,0,0,0.4);            color: white;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
            max-width: 95vw;
            margin: 100px auto 20px auto;
            overflow-y: auto;
            max-height: calc(100vh - 150px);
        }
        
        .page-content h1 {
            font-family: var(--font-title-dies);
            font-size: 2.2rem;
            color: var(--dies-glow);
            margin-bottom: 20px;
            text-align: center;
            text-shadow: 0 0 10px rgba(255,255,255,0.3);
        }
        
        .page-content h2 {
            font-family: var(--font-title-dies);
            font-size: 1.5rem;
            color: var(--dies-primary);
            margin-top: 30px;
            margin-bottom: 15px;
            text-align: left;
            text-shadow: 0 0 8px rgba(255,255,255,0.2);
        }
        
        .page-content h3 {
            font-family: var(--font-title-dies);
            font-size: 1.2rem;
            color: var(--dies-primary);
            margin-top: 25px;
            margin-bottom: 15px;
            text-align: left;
            text-shadow: 0 0 5px rgba(0,0,0,0.4);
        }
        
        .page-content p {
            font-family: var(--font-text);
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 10px;
            color: white;
        }
        
        .page-content p strong {
       		color: white;
        	text-shadow: none;
        }
        
        .page-content ul {
        	list-style-type: disc;
        	color: white;
        	margin-left: 40px;
        	padding-left: 0;
        	margin-bottom: 10px;
        }
        
        .page-content a {
        	color: var(--dies-glow);
        	text-decoration: underline;
        	transition: color 0.3s ease,
        	text-shadow 0.3s ease;
        }
        
        .page-content a:hover {
        	color: white;
        	text-decoration: none;
        	text-shadow: 0 0 8px rgba(255,255,255,0.5);
        }
        
        .page-content a:visited {
        	color: rgba(255, 255, 255, 0.7);
        }
        
/* ======================================================= */
/* --- Style "Chef d'oeuvre" pour le Formulaire de Contact --- */
/* ======================================================= */

#contact-container .page-content {
    max-width: 700px;
    position: relative; /* Indispensable pour les ornements */
    /* Ajout d'une texture de fond subtile et d'une ombre interne */
    background: 
        radial-gradient(ellipse at center, rgba(27, 39, 53, 0.5) 0%, rgba(9, 10, 15, 0.8) 100%),
        url(https://www.transparenttextures.com/patterns/stardust.png);
    border: 1px solid rgba(168, 179, 195, 0.2);
    box-shadow: 
        inset 0 0 15px rgba(0,0,0,0.5), /* Ombre interne pour la profondeur */
        0 0 30px rgba(0,0,0,0.4); /* Ombre externe */
    padding: 40px 50px;
}

/* Ornements de coin avec les pseudo-éléments ::before et ::after */
/* NOUVEAU CODE CORRIGÉ - Ornemanents liés au formulaire */

#contact-form::before,
#contact-form::after {
    content: '';
    position: absolute;
    width: 60px; /* Un peu plus grand pour l'esthétique */
    height: 60px;
    border-color: var(--dies-primary);
    border-style: solid;
    opacity: 0.7;
    transition: all 0.4s ease-in-out;
}

#contact-form::before {
    top: -25px;   /* On le positionne au-dessus du premier champ */
    left: -30px;  /* et à gauche */
    border-width: 1px 0 0 1px;
}

#contact-form::after {
    bottom: -40px;  /* On le positionne SOUS le bouton */
    right: -30px; /* et à droite */
    border-width: 0 1px 1px 0;
}

/* Le séparateur décoratif sous le titre */
.form-divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(180, 141, 75, 0), rgba(180, 141, 75, 0.75), rgba(180, 141, 75, 0));
    margin: 30px 0 60px 0;
}

.form-group {
    margin-bottom: 25px;
    position: relative; /* Pour le positionnement du label flottant (future amélioration possible) */
}

.form-group label {
    display: flex; /* Utilisation de flexbox pour aligner l'icône et le texte */
    align-items: center;
    font-family: var(--font-title); 
    font-size: 1.1rem;
    color: var(--nox-primary); 
    margin-bottom: 15px; /* Plus d'espace */
    letter-spacing: 1px;
    text-transform: uppercase; 
    transition: color 0.3s;
}

/* Style des icônes dans les labels */
.form-group label i {
    margin-right: 12px; /* Espace entre l'icône et le texte */
    font-size: 1.2rem;
    width: 20px; /* Largeur fixe pour un alignement parfait */
    text-align: center;
    color: var(--dies-primary); /* Icônes dorées */
    transition: transform 0.3s, text-shadow 0.3s;
}

.form-group:focus-within label {
    color: var(--dies-glow); /* Le label s'illumine quand on sélectionne le champ */
}

.form-group:focus-within label i {
    transform: scale(1.1); /* L'icône grossit légèrement */
    text-shadow: 0 0 8px var(--dies-glow);
}


/* Style des champs de saisie "ligne d'âme" */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 12px 5px; /* Moins de padding vertical, pas de padding horizontal */
    background: transparent; /* Fond entièrement transparent */
    border: none; /* On supprime toutes les bordures... */
    border-bottom: 1px solid rgba(168, 179, 195, 0.4); /* ...sauf celle du bas */
    border-radius: 0; /* Pas de coins arrondis */
    color: #FFF; 
    font-family: var(--font-text); 
    font-size: 1.1rem;
    transition: border-color 0.3s;
}

/* Au focus, la ligne du bas s'épaissit et s'illumine */
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    outline: none;
    border-bottom: 2px solid var(--dies-glow);
    box-shadow: none; /* On enlève l'ancienne ombre */
}

.form-group textarea {
    resize: none; /* On désactive le redimensionnement pour un look plus maîtrisé */
    min-height: 150px;
}

/* Bouton d'envoi amélioré */
.submit-button {
    display: inline-block;
    padding: 15px 35px;
    background: transparent; /* Fond transparent par défaut */
    color: var(--dies-primary); /* Texte doré */
    border: 1px solid var(--dies-primary);
    border-radius: 5px;
    font-family: var(--font-title); 
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: all 0.4s ease; /* Transition sur toutes les propriétés */
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

.submit-button:hover {
    color: #030407; /* Le texte devient sombre */
    background-color: var(--dies-glow); /* Le fond s'illumine */
    border-color: var(--dies-glow);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 5px 20px rgba(180, 141, 75, 0.4); /* Ombre portée lumineuse */
}

/* Les styles pour les messages de statut restent inchangés */
#form-status { margin-top: 20px; padding: 15px; border-radius: 5px; text-align: center; font-family: var(--font-text); font-size: 1rem; display: none; }
#form-status.success {
    background-color: rgba(180, 141, 75, 0.1); /* Fond ambré très léger */
    border: 1px solid var(--dies-primary);      /* Bordure dorée */
    color: var(--dies-glow);                    /* Texte lumineux */
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
    display: block;
}
#form-status.error { background-color: rgba(220, 53, 69, 0.2); border: 1px solid #dc3545; color: #F8D7DA; display: block; }

#contact-form {
    position: relative;
    margin-top: 30px;
    margin-bottom: 50px; /* <-- On ajoute cette ligne pour créer l'espace */
    
}
        
/* ---- RESPONSIVE MEDIA ---- */


 @media (max-width: 800px) {
 
#portal-container.active-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px 20px 150px 20px;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
		}

         #dies-hub.active-view {
			overflow-y: auto;
            -webkit-overflow-scrolling: touch;
    		justify-content: center; 
    		align-items: center;
    		padding-top: 40px;
    		padding-bottom: 40px;
        }
        
         .back-button {
            top: 20px;
            left: 20px;
            padding: 8px 15px;
        }

		#main-title {
  			position: relative; 
   			transform: none;
    		top: auto;
    		left: auto;
    		font-size: 2.5rem;
    		margin-bottom: 0;   
    		z-index: 50;        
		}
            
#artefact-wrapper {
    position: relative;
    animation: none;
    margin-top: -100px; 
    margin-bottom: 0;   
}
            
         .orbit {
    		display: block;
    		transform: scale(0.1);

        }
            
         .choice-orb {
    		width: 50%;
    		height: 100%;
      		border-radius: 0 !important;
    		border: none !important;
        }
            
         #choice-dies {
            border-color: #5a4a2a;
            border-right-width: 1px;

        }
        
         #choice-nox {
            border-color: #3c4a5e;
            border-left-width: 1px;

        }
        
         #choices-wrapper {
        	width: 150px;           
    		height: 150px;
    		border-radius: 50%;
    		overflow: hidden;
            gap: 0;
    		box-shadow: 0 0 25px rgba(0, 0, 0, 0.7);
    		filter: none;
        }
        
.main-footer-links {
    		position: fixed;
    		bottom: 20px; 
    		left: 50%;
    		transform: translateX(-50%);
       		margin-top: 0;
    		padding-top: 0;
    		display: flex;
    		flex-direction: row;
    		flex-wrap: wrap;
    		justify-content: center;
    		gap: 10px 20px;
    		width: 90%;
    		max-width: 600px; 
    		text-align: center;
		}
        
         .footer-link::before {
    		display: block;
        }

#dies-hub.active-view {
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		min-height: 100vh;
    		box-sizing: border-box;
    		overflow-y: auto;
    		-webkit-overflow-scrolling: touch;
    		justify-content: space-evenly;
    		padding: 10px;
		}

	#choice-dies:hover,
    #choice-nox:hover {
        transform: translateY(-4px) scale(1.05);
        z-index: 10;
    }

    #choice-dies:hover {
        box-shadow: inset 0 0 45px var(--dies-glow);
    }

    #choice-nox:hover {
        box-shadow: inset 0 0 45px #FFFFFF;
    }

    #choices-wrapper:has(#choice-dies:hover) {
        box-shadow: 0 0 35px 5px rgba(180, 141, 75, 0.6);
        transition: box-shadow 0.3s ease-in-out;
    }

    #choices-wrapper:has(#choice-nox:hover) {
        box-shadow: 0 0 35px 5px rgba(168, 179, 195, 0.5);
        transition: box-shadow 0.3s ease-in-out;
    }

		 #current-track-display,
		 #dies-hub #combined-nav,
		 #streaming-links {
    		position: relative;
    		top: auto;
    		bottom: auto;
    		left: auto;
    		right: auto;
    		margin-left: auto;
    		margin-right: auto;
    		width: 95%;
		}
		
		 #current-track-display {
  			font-size: 1.3rem;
    		margin-bottom: 20px;
    		text-align: center;
		}
		
		 #dies-hub #combined-nav {
    		overflow-x: auto;
    		-webkit-overflow-scrolling: touch;
    		display: flex;
    		justify-content: center;
    		margin-top: 0;
    		margin-bottom: 0;
		}
    	
		 #dies-hub #combined-nav ul {
    		width: max-content;
    		background-color: rgba(255,255,255,0.02);
    		border: 1px solid rgba(255, 255, 255, 0.1);
    		box-shadow: 0 0 10px rgba(0,0,0,0.3);
    		height: 140px;
    		
		}
		
		 #streaming-links {
    		margin-top: 30px;
    		padding: 20px;
		}
		
		 #combined-nav {
  			border: none !important;
  			background: transparent !important;
  			box-shadow: none !important;
  			position: relative;
  			margin: 0 auto;
		}


         #nox-hub #nav-nox {
            width: 90vw;
            height: 100vw;
            max-height: 65vh;
        }
        
         #nox-hub #nav-nox a span {
            font-size: 1.1rem;
        }

         .page-content {
            padding: 20px;
            margin: 80px auto 20px auto;
            max-height: calc(100vh - 110px);
        }
        
         .page-content h1 {
            font-size: 1.8rem;
        }
        
         .page-content h2 {
            font-size: 1.3rem;
        }
        
         .page-content p, .page-content ul {
            font-size: 0.95rem;
        }
        
         .page-content ul {
            margin-left: 25px;
        }        
    }