/* --- ORBITRON REGULAR --- */
        @font-face {
        font-family: 'Orbitron';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        /* Essaye d'abord en local, puis télécharge si nécessaire */
        src: local('Orbitron Regular'), 
            local('Orbitron-Regular'), 
            url('fonts/orbitron-v35-latin-regular.woff2') format('woff2');
        }

        /* --- ORBITRON BOLD --- */
        @font-face {
        font-family: 'Orbitron';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: local('Orbitron Bold'), 
            local('Orbitron-Bold'), 
            url('fonts/orbitron-v35-latin-700.woff2') format('woff2');
        }

        /* --- PRESS START 2P --- */
        @font-face {
        font-family: 'Press Start 2P';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: local('Press Start 2P Regular'), 
            local('PressStart2P-Regular'), 
            url('fonts/press-start-2p-v16-latin-regular.woff2') format('woff2');
        }

		/* --- APPLICATION AUX TITRES --- */
		h1, h2, h3, .bold-text {
			font-family: 'Orbitron', sans-serif;
			font-weight: 700; /* Ici on appelle la version grasse */
		}

		/* Pour tester si elle marche, on l'applique aux paragraphes ou à une classe dédiée */
		.pixel-font {
			font-family: 'Press Start 2P', cursive !important;
			line-height: 1.5; /* Cette police est souvent très tassée */
		}

		/* 1. Le Reset : Indispensable pour que les calculs de taille soient justes */
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		/* 2. HTML : On prépare le terrain pour le scroll */
		html {
			scroll-behavior: auto !important;
			width: 100%;
			/* On enlève overflow-x: hidden ici pour éviter des bugs de scroll sur certains navigateurs */
			height: 100%; 
		}

		/* 3. BODY : C'est ici que tout se joue */
		body {
			display: flex;
			flex-direction: column;
			font-family: 'Orbitron', sans-serif;
			background-color: #0a0a1a;
			color: #00ffff;
			
			/* Important : min-height 100% pour que le body puisse grandir avec le contenu */
			min-height: 100%;
			width: 100%; 
			line-height: 1.4;
			
			/* On garde overflow-x: hidden ici pour éviter que le site "glisse" de gauche à droite */
			overflow-x: hidden; 
			overflow-y: auto; /* On autorise le scroll vertical classique */
		}

        a {
            text-decoration: none;
            color: inherit;
        }

        /* Background: Image + Lasers */
        /*.background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
                linear-gradient(rgba(10, 10, 30, 0.6), rgba(10, 10, 30, 0.6)),
                url('/images/duflan-mordor-festival.webp');
            background-size: cover;
            background-position: center;
            z-index: -1;
        }*/
		
		.background {
			position: fixed;
			/* On utilise top/bottom/left/right au lieu de width/height 100% */
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			
			/* L'astuce pour mobile : on utilise -webkit-fill-available */
			height: -webkit-fill-available; 
			
			background: linear-gradient(rgba(10, 10, 30, 0.6), rgba(10, 10, 30, 0.6)), 
						url("/images/duflan-mordor-festival.webp");
			background-size: cover;
			background-position: center;
			z-index: -1;
			
			/* On empêche l'image de bouger au scroll */
			background-attachment: scroll; 
		}
		
		/* --- VERSION TÉLÉPHONE (Écrans de moins de 768px) --- */
@media (max-width: 768px) {
    .background {
        /* On remplace l'image par une version portrait (verticale) */
        background: linear-gradient(rgba(10, 10, 30, 0.7), rgba(10, 10, 30, 0.7)), 
                    url("/images/duflan-3-tetes.webp");
        
        /* On ajuste la position pour que le haut de l'image (les masques) soit visible */
        background-position: top center; 
        background-size: cover;
    }
}

.laser-lines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: rgba(10, 10, 26, 0.1); /* Teinte très légère */
}

.laser-line {
    position: absolute;
    width: 100%;
    height: 100px; /* Plus large pour l'effet de halo */
    background: linear-gradient(to bottom, 
        transparent, 
        rgba(0, 255, 255, 0.05) 40%, 
        rgba(0, 255, 255, 0.4) 50%, 
        rgba(0, 255, 255, 0.05) 60%, 
        transparent);
    opacity: 0.5;
    animation: scanGlitch 4s ease-in-out infinite;
}

@keyframes scanGlitch {
    0% { top: -100px; }
    30% { top: 40%; }
    33% { top: 38%; } /* Petit sursaut */
    35% { top: 42%; }
    100% { top: 110%; }
}




.scanner-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

/* Le faisceau principal (très fin et brillant) */
.scanner-beam {
    position: absolute;
    width: 100%;
    height: 3px;
    background: #fff; /* Cœur blanc pour l'intensité */
    box-shadow: 
        0 0 10px #00ffff, 
        0 0 20px #00ffff, 
        0 0 40px #00ffff;
    opacity: 0.8;
    z-index: 2;
    animation: realScan 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Le halo de lumière qui suit le faisceau */
.scanner-glow {
    position: absolute;
    width: 100%;
    height: 150px;
    background: linear-gradient(to bottom, 
        transparent, 
        rgba(0, 255, 255, 0.15) 50%, 
        transparent);
    z-index: 1;
    mix-blend-mode: overlay; /* Effet de lumière sur l'image */
    animation: realScan 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Animation de scan réaliste : vitesse variable */
@keyframes realScan {
    0% { top: -10%; }
    45% { top: 50%; } /* Ralentit un peu au milieu */
    55% { top: 52%; } /* Petit tremblement ou hésitation */
    100% { top: 110%; }
}

       
	   .hero-title {
			/* On ne met pas de hauteur fixe ici */
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			padding: 20px;
			flex: 1; /* C'est lui qui va remplir l'espace entre le haut et le footer */
		}

        .hero-title h1 {
            font-family: 'Orbitron', sans-serif;
            font-size: clamp(3rem, 10vw, 6rem);
            color: #00ffff;
            text-shadow:
                0 0 10px #00ffff,
                0 0 20px #ff00ff;
            animation: neonFlicker 1.5s infinite alternate;
            margin-bottom: 30px;
            letter-spacing: 0.2em;
        }
        @keyframes neonFlicker {
            0% { text-shadow: 0 0 10px #00ffff, 0 0 20px #ff00ff; }
            50% { text-shadow: 0 0 5px #00ffff, 0 0 10px #ff00ff, 0 0 15px #ffff00; }
            100% { text-shadow: 0 0 10px #00ffff, 0 0 25px #ff00ff, 0 0 35px #ffff00; }
        }
        .enter-button {
            font-family: 'Press Start 2P', cursive;
            font-size: clamp(1rem, 3vw, 1.2rem);
            color: #000;
            background: #00ffff;
            border: none;
            padding: 12px 30px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 0 15px #00ffff;
            position: relative;
            z-index: 2;
        }
        .enter-button:hover {
            background: #ff00ff;
            color: #fff;
            box-shadow: 0 0 25px #ff00ff, 0 0 35px #ffff00;
            transform: scale(1.05);
        }

        /* Fake Logo (laser) */
        .fake-logo {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 100;
            cursor: pointer;
        }
        .fake-logo svg {
            width: 100px;
            height: auto;
            fill: #00ffff;
            stroke: #ff00ff;
            stroke-width: 2;
            transition: all 0.3s;
            filter: drop-shadow(0 0 10px #00ffff);
        }
        .fake-logo:hover svg {
            fill: #ff00ff;
            stroke: #ffff00;
            filter: drop-shadow(0 0 15px #ff00ff);
            transform: scale(1.1);
        }

        /* Navigation Desktop (alignée à droite) */
        nav.desktop {
            position: fixed;
            top: 20px;
            right: 20px;
            display: flex;
            gap: 10px;
            z-index: 100;
            flex-wrap: wrap;
            justify-content: flex-end;
            max-width: calc(100% - 100px);
        }
        nav.desktop a {
            font-family: 'Orbitron', sans-serif;
            font-size: clamp(0.6rem, 1.8vw, 0.8rem);
            color: #00ffff;
            padding: 8px 12px;
            background: rgba(10, 10, 40, 0.7);
            border: 1px solid #00ffff;
            transition: all 0.3s;
            box-shadow: 0 0 5px #00ffff;
        }
        nav.desktop a:hover {
            background: #00ffff;
            color: #000;
            box-shadow: 0 0 10px #00ffff, 0 0 15px #ff00ff;
        }

        /* Navigation Mobile (Burger) */
        nav.mobile {
            display: none;
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
        }
        .burger {
            width: 50px;
            height: 50px;
            background: rgba(10, 10, 40, 0.7);
            border: 1px solid #00ffff;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            box-shadow: 0 0 10px #00ffff;
        }
        .burger i {
            color: #00ffff;
            font-size: 1.5rem;
        }
        .mobile-menu {
            position: fixed;
            top: 80px;
            right: 20px;
            background: rgba(10, 10, 40, 0.9);
            border: 1px solid #00ffff;
            display: none;
            flex-direction: column;
            gap: 10px;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0 0 15px #00ffff;
			z-index: 1001;
        }
        .mobile-menu a {
            font-family: 'Orbitron', sans-serif;
            font-size: clamp(0.8rem, 3vw, 1rem);
            color: #00ffff;
            padding: 8px 12px;
            background: transparent;
            transition: all 0.3s;
            text-align: center;
            border-bottom: 1px solid #ff00ff;
        }
        .mobile-menu a:hover {
            background: #00ffff;
            color: #000;
            box-shadow: 0 0 10px #00ffff;
        }

        .social-links {
			position: fixed;
			bottom: 10px; /* Plus bas quand le footer n'est pas là */
			right: 20px;
			display: flex;
			flex-direction: row;
			gap: 10px;
			z-index: 1000;
			transition: transform 0.3s ease; /* Pour un mouvement fluide */
		}

		/* Cette classe sera ajoutée par le JavaScript quand le footer apparaît */
		.social-links.raised {
			/* On utilise transform pour les remonter de la hauteur approximative du footer 
			   ou on peut ajuster la valeur selon tes besoins */
			transform: translateY(-50px); 
		}
        .social-links a {
			border-radius: 50%;
            width: 30px;
            height: 30px;
            background: rgba(10, 10, 40, 0.7);
            border: 1px solid #00ffff;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #00ffff;
            transition: all 0.3s;
            box-shadow: 0 0 10px #00ffff;
        }
        .social-links a:hover {
            background: #00ffff;
            color: #000;
            box-shadow: 0 0 15px #00ffff, 0 0 20px #ff00ff;
        }
		

/*main {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    width: 100%;
    margin: 0;
}*/

/* 2. Le Main devient le conteneur souple */
main {
    display: flex;
    flex-direction: column;
    min-height: 100dvh; /* Minimum la taille de l'écran */
    height: auto;       /* Mais peut grandir si le contenu dépasse */
    width: 100%;
    position: relative;
}

.section {
    flex: 1;                /* GARDE : Pousse le footer vers le bas s'il y a peu de contenu */
    display: flex;          /* GARDE : Permet d'aligner le contenu interne */
    flex-direction: column; /* GARDE : Aligne les éléments du haut vers le bas */
    width: 100%;            /* GARDE */
    z-index: 2;             /* GARDE : Pour passer au dessus du fond laser */
    background: rgba(10, 10, 40, 0.9); /* GARDE : Ton fond semi-opaque */
    
    /* MODIF : On ne veut plus de scroll interne ici, on veut que la page entière scrolle */
    overflow-y: visible;    
    
    /* MODIF : Un padding équilibré (Haut, Gauche/Droite, Bas) */
    padding: 100px 20px 60px; 
}

/* 4. Le Footer suit le mouvement */
footer {
    flex-shrink: 0;
    background: rgba(10, 10, 40, 0.95);
    border-top: 1px solid #00ffff;
    padding: 2px;
    text-align: center;
    width: 100%;
    position: relative; /* Il n'est plus "fixe", il est à la suite */
}


@supports (-webkit-touch-callout: none) {
   .background {
      /* Sur iOS, le fixed + cover bug souvent, on force une hauteur fixe via JS ou on reste sur scroll */
      height: 100%;
   }
}

/* Le réglage spécial HOME */
.section.home {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;   /* On enlève le padding qui pousse tout vers le bas */
    overflow: hidden; /* Pas de scroll sur la home */
}

.section.active {
    /* On utilise flex ici pour que la section s'étende */
    display: flex; 
    flex-direction: column;
    flex: 1; /* Force la section à prendre toute la hauteur du main */
    animation: fadeIn 0.5s ease-out;
}

        .section::-webkit-scrollbar {
            width: 8px;
        }
        .section::-webkit-scrollbar-track {
            background: rgba(10, 10, 40, 0.5);
        }
        .section::-webkit-scrollbar-thumb {
            background-color: #00ffff;
        }
        /*.section.active {
            display: block;
            animation: fadeIn 0.5s ease-out;
        }*/
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .section h2 {
            font-family: 'Orbitron', sans-serif;
            font-size: clamp(0.5rem, 7vw, 3rem);
            color: #ff00ff;
            text-align: center;
            margin-bottom: 20px;
            padding-top: 20px;
            text-shadow: 0 0 10px #ff00ff;
        }
        .section h2::after {
            content: "";
            display: block;
            width: 100px;
            height: 2px;
            background: linear-gradient(90deg, #00ffff, #ff00ff);
            margin: 10px auto;
        }
        .section-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            height: 100%;
			width: 100%;
        }

        /* Bio Section (néon + laser) */
        .bio-text {
            max-width: 800px;
            margin: 0 auto;
            padding: 30px;
			/*background: rgba(10, 10, 40, 0.7);
            border: 1px solid #00ffff;
            font-size: clamp(0.9rem, 2.5vw, 1.1rem);
            line-height: 1.6;
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);*/
        }

        /* Videos Section (effet VHS laser) */
        .video-container {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            max-width: 100%;
            margin: 0 auto;
            border: 2px solid #ff00ff;
            background: rgba(10, 10, 40, 0.5);
            box-shadow: 0 0 20px rgba(255, 0, 255, 0.3);
        }
        .video-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(255, 0, 255, 0.1) 0%, rgba(255, 0, 255, 0.1) 5%, transparent 5%, transparent 10%);
            pointer-events: none;
        }
        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            filter: sepia(10%) hue-rotate(10deg) saturate(120%);
        }

        /* Disco Section (grille futuriste) */
        .disco-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 25px;
        }
        .disco-item {
            background: rgba(10, 10, 40, 0.7);
            padding: 20px;
            border: 1px solid #ff00ff;
            text-align: center;
            box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
        }
        .disco-item h3 {
            color: #ff00ff;
            font-family: 'Orbitron', sans-serif;
            font-size: clamp(1.1rem, 3vw, 1.3rem);
        }
        .disco-item p {
            color: #00ffff;
            font-size: clamp(0.8rem, 2vw, 1rem);
        }
        .disco-item a {
            display: inline-block;
            margin-top: 15px;
            background: #ff00ff;
            color: #000;
            padding: 10px 20px;
            font-family: 'Press Start 2P', cursive;
            font-size: clamp(0.7rem, 2vw, 0.9rem);
            box-shadow: 0 0 10px #ff00ff;
            transition: all 0.3s;
        }
        .disco-item a:hover {
            background: #00ffff;
            box-shadow: 0 0 15px #00ffff, 0 0 20px #ffff00;
        }

        /* Terminal Text (Press/Tour/Tech/Contact) */
        .terminal-text {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(10, 10, 40, 0.7);
            padding: 25px;
            border: 1px solid #00ffff;
            font-family: 'Orbitron', sans-serif;
            font-size: clamp(0.8rem, 2vw, 1rem);
            line-height: 1.6;
            box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
        }
        .terminal-text::before {
            content: "GUEST@DUFLAN_DUFLAN:~$ cat /mnt/news/latest_transmissions";
            display: block;
            color: #00ff00;
            margin-bottom: 15px;
            font-size: 0.9em;
        }
        .terminal-line {
            margin-bottom: 10px;
            padding-left: 20px;
            position: relative;
            border-left: 2px solid #00ffff;
        }
        .terminal-line::before {
            content: "#";
            color: #ff00ff;
            position: absolute;
            left: 5px;
        }
        .terminal-line.highlight {
            color: #ffff00;
            font-weight: bold;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            nav.desktop {
                justify-content: flex-end;
                max-width: calc(100% - 100px);
            }
            nav.desktop a {
                font-size: clamp(0.6rem, 1.5vw, 0.7rem);
                padding: 6px 10px;
            }
        }
        @media (max-width: 768px) {
            nav.desktop {
                display: none;
            }
            nav.mobile {
                display: block;
            }
           /* .social-links {
                bottom: 45px;
                right: 20px;
            }*/
            .fake-logo {
                top: 10px;
                left: 10px;
            }
            .fake-logo svg {
                width: 100px;
            }
            .section {
                /*height: calc(100vh - 50px); */
                padding: 60px 10px 10px;
            }
            .hero-title h1 {
                font-size: clamp(1.5rem, 10vw, 3rem);
            }
        }
		@media (max-width: 330px) {
            .photos-grid {
				grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
			}
        }
		
		/* Titre de chaque sous-galerie */
		.gallery-date-title {
			color: #ff00ff;
			font-family: monospace;
			margin: 40px 0 20px 0;
			text-transform: uppercase;
			border-left: 4px solid #ff00ff;
			padding-left: 15px;
		}
		
		
		
		
		
		
		
		/* 1. Le Conteneur Principal */
.photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin: 0 auto 50px auto; /* Centré avec espace en bas */
    overflow-anchor: none;    /* Stabilité du scroll */
    touch-action: pan-y;      /* Fluidité trackpad/mobile */
}

/* 2. L'enveloppe de la photo (Cadre) */
.photo-item {
    position: relative;
    overflow: hidden;
    border: 2px solid #ff00ff;
    background-color: #000;
    cursor: pointer;
    
    /* Optimisation GPU pour éviter les saccades au scroll */
    backface-visibility: hidden;
    transform: translateZ(0); 
    touch-action: pan-y;
}

/* 3. Le lien Fancybox (doit prendre toute la place) */
.photo-item a {
    display: block;
    width: 100%;
    height: 250px; /* On fixe une hauteur cohérente ici */
    text-decoration: none;
}

/* 4. L'image elle-même */
.photo-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    /* Filtre Laser Démoniaque */
    filter: sepia(50%) hue-rotate(180deg) saturate(200%);
    
    /* Transition fluide */
    transition: filter 0.5s ease, transform 0.5s ease;
    
    /* Pré-calcul pour le navigateur */
    will-change: filter, transform;
}

/* 5. Effets au survol (Sur le lien pour plus de réactivité) */
.photo-item a:hover img {
    filter: sepia(0%) hue-rotate(0deg) saturate(100%);
    transform: scale(1.08);
}

/* Optionnel : Ajoute un léger flash néon sur le cadre au survol */
.photo-item:hover {
    border-color: #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
    transition: all 0.3s ease;
}
		
		
		
		
		
		
		.terminal-text {
			background: #000;
			padding: 20px;
			font-family: 'Courier New', Courier, monospace;
			/*color: #fff;*/
			border: 1px solid #333;
		}

		/*.terminal-line {
			display: flex;
			align-items: flex-start;
			margin-bottom: 12px;
			line-height: 1.4;
			font-family: 'Courier New', Courier, monospace;
		}*/

		/*.terminal-date {
			flex: 0 0 120px;
			color: #888;
			font-weight: bold;
		}*/

		.terminal-info {
			flex: 1;
			/*color: #eee;*/
			text-transform: uppercase; /* Le lieu reste en majuscules */
		}

		/* Nom de l'événement en Jaune Fluo */
		.event-name {
			color: #ffff00;
			text-shadow: 0 0 5px rgba(255, 255, 0, 0.5);
			font-weight: bold;
		}

		/* Liste des artistes en petit */
		.artists-list {
			color: #aaa;
			font-size: 0.85em; /* Plus petit */
			text-transform: none; /* Annule le uppercase pour respecter la casse PHP */
			font-style: italic;
		}

		.terminal-line.highlight .terminal-date {
			color: #ff00ff; /* Date en rose pour le highlight */
		}
		
		/* --- Style de base (Desktop) --- */
		.terminal-line {
			display: flex;
			flex-direction: row; /* Côte à côte par défaut */
			align-items: flex-start;
			margin-bottom: 12px;
			line-height: 1.4;
			font-family: 'Courier New', Courier, monospace;
		}

		.terminal-date {
			flex: 0 0 120px; /* Largeur fixe de 120px sur ordi */
			color: #ff00ff;
			font-weight: bold;
		}

		/* --- Style Mobile & Tablette (Empilement) --- */
		@media (max-width: 768px) {
			.terminal-line {
				flex-direction: column; /* On empile verticalement */
				gap: 5px;               /* Petit espace entre la date et l'info */
				padding-bottom: 15px;   /* Espace entre chaque bloc de date */
				border-bottom: 1px solid rgba(0, 255, 255, 0.1); /* Ligne de séparation subtile */
			}

			.terminal-date {
				flex: none;             /* On annule la largeur fixe de 120px */
				width: 100%;            /* Prend toute la largeur */
				color: #ff00ff;         /* On peut mettre la date en couleur pour bien séparer */
				font-size: 0.9em;
			}

			.terminal-info {
				padding-left: 10px;     /* Petit décalage pour le look "terminal" */
				width: 100%;
			}
		}
		
		/* Titres des blocs (Upcoming / Archives) */
		.terminal-category {
			color: #00ff00; /* Vert Néon */
			font-family: 'Orbitron', sans-serif;
			font-size: 0.85rem;
			margin: 30px 0 15px 0;
			padding: 5px 10px;
			letter-spacing: 2px;
			border-left: 3px solid #00ff00;
			background: rgba(0, 255, 0, 0.1);
			display: block;
		}

		.archive-title {
			color: #888; /* Gris pour le passé */
			border-left-color: #555;
			background: rgba(255, 255, 255, 0.05);
			margin-top: 50px;
		}

		/* On ré-applique bien le style flex pour que ça marche sur mobile */
		.terminal-line {
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			margin-bottom: 12px;
		}

		@media (max-width: 768px) {
			.terminal-line {
				flex-direction: column; /* Empilement mobile */
				gap: 2px;
				padding-bottom: 10px;
				border-bottom: 1px solid rgba(0, 255, 255, 0.1);
			}
			.terminal-date {
				flex: none;
				width: 100%;
			}
		}
		
		
		
		
		
		
		
		
		
		
		
.disco-container {
    display: flex;
    flex-direction: column;
    gap: 60px; /* Espace entre les albums */
}

.disco-album {
    display: flex;
    flex-direction: row; /* 2 colonnes par défaut */
    gap: 10px;
    background: rgba(10, 10, 40, 0.5);
    /*border-left: 5px solid #ff00ff;*/
    padding: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* --- Remplace l'ancien bloc .album-art par celui-ci --- */

.album-link {
    display: block;
    width: 100%;
    max-width: 300px; /* On limite la largeur ici pour que l'image ne soit pas géante */
    text-decoration: none;
    transition: transform 0.3s ease;
}

.album-link:hover {
    transform: scale(1.03);
    filter: brightness(1.2);
}

.album-art {
    position: relative; 
    width: 100%;
}

.album-art img {
    width: 100%;
    height: auto;
    display: block;
    /*border: 2px solid #ff00ff;*/ /* On remet ton cadre rose ici */
}

.album-art img {
    width: 100%;
    height: auto;
    /*border: 2px solid #ffff00;*/
}

.album-formats {
    text-align: center;
    background: #ffff00;
    color: #000;
    font-weight: bold;
    font-size: 0.8rem;
    padding: 5px;
    margin-top: 5px;
}

/* Infos de l'album */
.album-details {
    flex: 1;
}

.album-date {
    font-family: monospace;
    color: #888;
    font-size: 0.9rem;
}

.album-artist {
    color: #00ffff; /* Cyan */
    margin: 5px 0;
    font-size: 1.1rem;
}

.album-title {
    color: #ffff00; /* Jaune Fluo */
    font-size: 1.8rem;
    margin-bottom: 15px;
    text-shadow: 0 0 10px rgba(255, 255, 0, 0.3);
}

.album-description {
    /*font-style: italic;
    color: #ccc;*/
	
	color: #aaa;
    font-size: 0.85em;
    text-transform: none;
    /*font-style: italic;*/
	
    margin-bottom: 15px;
	font-family: 'Courier New', Courier, monospace;
}

.labels em {
    color: #ff00ff;
}

/* Tracklist */
.tracklist h5 {
    color: #ff00ff;
    margin-bottom: 5px;
}



/* --- STYLE DES TRACKLISTS --- */

.tracklist ol {
    display: block;
    column-count: 2;   /* Force 2 colonnes sur grand écran */
    column-gap: 40px;
    list-style-position: inside;
    color: #aaa;
    font-size: 0.85rem;
    padding: 0;
	font-family: 'Courier New', Courier, monospace;
}

.tracklist li {
    margin-bottom: 8px;
    break-inside: avoid;
    border-bottom: 1px solid rgba(255, 0, 255, 0.1); /* Petite ligne de séparation style terminal */
    padding-bottom: 4px;
}

/* --- LE MEDIA QUERY POUR PORTABLE --- */
@media (max-width: 768px) {
    .tracklist ol {
        column-count: 1; /* On repasse sur une seule colonne pour la lisibilité */
        font-size: 0.85rem; /* On réduit un chouïa la taille du texte */
    }
    
    .tracklist li {
        margin-bottom: 12px; /* On espace un peu plus pour que ce soit facile à lire au doigt */
        padding-bottom: 8px;
    }
}


/* Boutons */
.album-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}


.btn-buy, .btn-mail {
    /* 1. On utilise Flexbox pour centrer */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* 2. On ajuste la hauteur et le padding */
    height: 45px; /* Définir une hauteur fixe aide au centrage parfait */
    padding: 0 20px;
    
    font-family: "Press Start 2P", cursive;
    font-size: 0.6rem;
    text-decoration: none;
    transition: 0.3s;

    /* 3. Petit ajustement manuel si la police "tombe" encore */
    /* Certains navigateurs gèrent mal le padding vertical des polices pixels */
    line-height: 1; 
}

/* Optionnel : Ajustement fin pour compenser le décalage de la police pixel */
.btn-buy, .btn-mail {
    padding-top: 4px; /* On rajoute un chouïa de padding en haut pour faire remonter le texte */
}

.album-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

/*.btn-buy, .btn-mail {
    padding: 10px 15px;
    font-family: "Press Start 2P", cursive;
    font-size: 0.7rem;
    text-decoration: none;
    transition: 0.3s;
}*/

.btn-buy {
    background: #ff00ff;
    color: #000;
}

.btn-buy:hover {
    background: #ffff00;
    box-shadow: 0 0 15px #ffff00;
}

.btn-mail {
    border: 1px solid #ff00ff;
    color: #ff00ff;
}

.btn-mail:hover {
    background: rgba(255, 0, 255, 0.2);
}

.bc-player {
    margin-top: 20px;
}

/* --- RESPONSIVE --- */
@media (max-width: 630px) {
    .disco-album {
        flex-direction: column; /* On passe en 1 seule colonne sur mobile */
    }
    
    .album-art {
        flex: 0 0 auto;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
}


/* ==========================================================================
   SECTION VIDEOS - GRID & EFFECTS
   ========================================================================== */

/* Titres de sous-sections (Clips / Lives) */
.video-subtitle {
    color: #00ffff; /* Cyan électrique */
    font-family: 'Orbitron', sans-serif;
    margin: 40px 0 20px 0;
    font-size: 1.2rem;
    letter-spacing: 2px;
    border-left: 4px solid #ffff00; /* Barre jaune à gauche */
    padding-left: 15px;
    text-transform: uppercase;
}

/* Grille principale */
.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
    margin-bottom: 50px;
}

/* Conteneur d'un item vidéo */
.video-item {
    transition: transform 0.3s ease;
}

/* Conteneur de la vignette (Image + Overlay) */
.video-thumbnail {
    position: relative;
    aspect-ratio: 16 / 9; /* Format TV */
    background: #000;
    border: 1px solid #333;
    overflow: hidden;
    cursor: pointer;
    /* Indispensable pour centrer l'icône play */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* L'image de YouTube */
.video-thumbnail img {
    position: absolute; /* L'image est en fond */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6; 
    /*filter: grayscale(100%); */
    transition: 0.4s ease-in-out;
}

/* Effets au survol */
.video-item:hover .video-thumbnail img {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}

.video-item:hover .video-thumbnail {
    border-color: #ff00ff;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.4);
}

/* --- L'ICÔNE DE LECTURE JAUNE CENTRÉE --- */
.play-overlay {
    position: relative; /* Par dessus l'image absolute */
    z-index: 2;
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.5); /* Cercle noir translucide derrière la flèche */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffff00;
    opacity: 0.8;
    transition: 0.3s ease;
}

.play-icon {
    color: #ffff00; /* Jaune fluo */
    font-size: 1.5rem;
    margin-left: 5px; /* Petit décalage pour que le triangle soit optiquement au centre */
}

/* Animation au survol */
.video-item:hover .play-overlay {
    opacity: 1;
    transform: scale(1.1);
    background: #ff00ff; /* Devient rose au survol pour le peps */
    border-color: #fff;
}

.video-item:hover .play-icon {
    color: #fff; /* La flèche passe en blanc quand le fond devient rose */
}

/* Titre de la vidéo */
.video-item h4 {
    margin-top: 12px;
    font-size: 0.8rem;
    font-family: 'Courier New', Courier, monospace;
    color: #888;
    text-transform: uppercase;
    line-height: 1.3;
}

.video-item:hover h4 {
    color: #fff;
}

.video-separator {
    border: 0;
    border-top: 1px dashed #333;
    margin: 40px 0;
}




/* Conteneur de l'image en haut de la bio */
.bio-visual-header {
    width: 100%;
    max-width: 800px; /* Aligné sur la largeur du texte */
    margin: 0 auto -150px auto; /* Marge négative pour faire remonter le texte sur l'image */
    height: 850px; /* Hauteur de la zone visuelle */
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.bio-visual-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top; /* Garde les têtes visibles */
    filter: sepia(30%) saturate(150%) hue-rotate(180deg) brightness(0.7);
    
    /* L'effet de dégradé magique : l'image disparaît vers le bas */
    -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 90%);
    mask-image: linear-gradient(to bottom, black 30%, transparent 90%);
}

/* Ajustement du bloc de texte */
.bio-text {
    position: relative;
    z-index: 2; /* Passe par-dessus le bas de l'image */
    max-width: 800px;
    margin: 0 auto;
	font-family: 'Courier New', Courier, monospace;
	padding: 20px 5px;
	 
    /*background: rgba(10, 10, 40, 0.6); 
    backdrop-filter: blur(5px); 
   
    border: 1px solid rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);*/
}

/* Mobile : on réduit la marge négative pour ne pas écraser l'image */
@media (max-width: 768px) {
    .bio-visual-header {
        height: 400px;
        margin-bottom: -50px;
    }
    .bio-text {
        padding: 20px;
        background: rgba(10, 10, 40, 0.85); /* Plus opaque sur mobile */
    }
}




/* On enlève le after de la ligne pour le mettre sur le conteneur global */
.terminal-text::after {
    content: "> _";
    display: block;
    margin-top: 15px;
    padding-left: 0;
    color: #00ff00;
    font-weight: bold;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}


/* News spécifiques */
.news-title {
    color: #ffff00; /* Jaune fluo pour attirer l'oeil */
    font-weight: bold;
    text-transform: uppercase;
}

.terminal-info {
    flex: 1;
    color: #00ffff; /* Cyan de base */
    padding-left: 10px;
    line-height: 1.5;
}

/* Correction pour que la date ne pousse pas trop sur mobile */
@media (max-width: 768px) {
    .terminal-line {
        flex-direction: column !important;
        margin-bottom: 20px;
    }
    .terminal-info {
        padding-left: 0;
        margin-top: 5px;
    }
}



.news-link {
    text-decoration: none; /* Enlève le soulignement bleu moche */
    color: inherit; /* Garde le cyan ou le blanc de la news */
    display: inline-block;
    transition: all 0.3s ease;
}

.news-link:hover {
    background-color: rgba(0, 255, 255, 0.2); /* Petit flash cyan au survol */
    transform: translateX(5px); /* Décale légèrement le texte vers la droite */
}

.news-link:hover .news-title {
    color: #00ff00; /* Le titre passe au vert fluo quand on survole le lien */
}

/* Optionnel : ajoute un petit symbole de lien externe */
.news-link::after {
    content: " ↗";
    font-size: 0.8em;
    opacity: 0.7;
}




.external-icon-link img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    
    /* Étape 1 : On passe l'icône en blanc pur */
    filter: brightness(0) invert(1);
    
    /* Étape 2 : On applique une ombre portée colorée très forte pour simuler la couleur */
    /* Cela donne un effet "néon" cyan parfait pour ton style terminal */
    drop-shadow(0 0 0 #00ffff);
}

/* Méthode alternative plus précise pour teinter une image en Cyan #00ffff */
.external-icon-link img {
    filter: grayscale(100%) brightness(120%) sepia(100%) hue-rotate(140deg) saturate(1000%);
}

.external-icon-link:hover img {
    filter: none; /* L'icône reprend ses couleurs d'origine au survol */
    transform: scale(1.2); /* Petit effet de zoom */
    transition: all 0.3s ease;
}



/* Media query pour mobiles (écrans de moins de 768px) */
@media (max-width: 767px) {
    .section-content {
        padding-bottom: 60px; /* Un peu d'air avant le footer */
    }
}