@charset "UTF-8";
/* CSS Document */

 @font-face{
                        font-family: 'Stanley';
                        src: url("stanley-regular-webfont.woff");}

html, body {
    width: 100%;
    overflow-x: hidden;
	overflow-y: hidden;
	font-family: 'Stanley';
}





/* TOUT */
*{
	margin:0px!important;
	padding:0px!important;
	font-family: "Stanley";
}

/* HOMEPAGE */
/* GENERAL */
.tout{
	background-image: url("image/fond.jpg");
	background-position:center;
	background-size:cover;
	background-repeat: no-repeat;
	height: 100vh;
}

/* Partie fauteuil */
.fautueilgeneral
{z-index:2;
position:relative;}

.tapis1{
	background-image:url("image/tapis1.svg");
	background-size:contain;
	background-repeat: no-repeat;
	position:relative;
	margin:0px;
	padding:0px;
	background-position: bottom;
	top:-20%;
}

	/*TOUTES LES LAMPES*/
#image, #imagelampeinstr, #lamperouge, #lampeverte {
    transition: filter 1s ease;
}
#image:hover, #imagelampeinstr:hover, #lamperouge:hover, #lampeverte:hover {
     cursor: pointer;
    filter: drop-shadow(0 0 2rem rgba(255, 235, 0, 1)); 
}
/* Partie instruments */
.tapis2{
	background-image:url("image/tapis2.svg");
	background-size:contain;
	background-repeat: no-repeat;
	position:relative;
	margin:0px;
	padding:0px;
	background-position: bottom;
	top:-40%;
}



.lampeinstr{
	position:relative;
	left:40%;
	z-index:2;
	top:-0%;
}
.partition-p{
	position:relative;
	 transition: filter 0.2s ease; 
	z-index:2;
}
.partition-p:hover {
     cursor: pointer;
    filter: drop-shadow(0 0 0.5rem red); 
}
.partition-g{
	position:relative;
	 transition: filter 0.2s ease; 
	z-index:2;
}
.partition-g:hover {
     cursor: pointer;
    filter: drop-shadow(0 0 0.5rem red); 
}



.piano
{position:relative;
right:118%;
top:32%;}

.batteire
{position:relative;
right:0%;
top:-30%;}

.guitare
{position:relative;
right:0%;
top:-6%;}

.partition-g
{position:relative;
right:-10%;
top:100%;}

.partition-p
{position:relative;
right:18%;
top:84%;}

/*Bibliothèques*/





/*INTERVIEWS*/

 .overlay {
            position: fixed;
            top: 45%;
            left: 50%;
	 		text-align: center;
            font-size: 3em;
            color: orange;
            padding: 20px;
            border-radius: 10px;
            font-family: 'Stanley';
  			display: inline-block;
  			transform: rotateX(20deg) rotateY(36deg);
 			transform-style: preserve-3d;
	 		z-index:1;
	 		filter: drop-shadow(60px 0px 20px #000);
	 		line-height: 40px;
        }

        .subtitles {
            position: fixed;
            bottom: 10%;
            width: 100%;
            text-align: center;
            font-size: 1.5em;
            color: orange;
            padding: 10px;
            font-family: 'Stanley';
        }

        body {
            color: white;
            font-family: 'Stanley';
            text-align: center;
        }

        .play-icon {
            cursor: pointer;
            transition: filter 0.3s ease-in-out, transform 0.1s ease-in-out;
        }

        .play-icon:hover {
            filter: drop-shadow(0 0 10px brown);
        }

        .playing {
            filter: drop-shadow(0 0 10px brown);
        }

      .play-icon {
    cursor: pointer;
    filter: drop-shadow(0 0 0px brown); /* Base de la lueur */
    transition: filter 0.3s ease-in-out;
}

.playing {
    animation: glow 1.5s infinite ease-in-out; /* Animation de la lueur */
}

@keyframes glow {
    0% { filter: drop-shadow(0 0 5px orange); }
    50% { filter: drop-shadow(0 0 20px yellow); }
    100% { filter: drop-shadow(0 0 5px orange); }
}

/* CONSTELLATION */



        h1 {
            font-size: 1em;
            margin-top: 30px;
            color: #fff;
        }

        svg {
            width: 100%;
            height: 100vh;
            display: block;
            margin: 0 auto;
            background-color:#980C0E;
        }

        .song-button {
            cursor: pointer;
            color: #FEB844;
            border: none;
            background: none;
            font-size: 18px;
            transition: transform 0.2s ease-in-out;
        }

        .song-button:hover {
            transform: scale(1.2);
        }

        .node circle {
            transition: all 0.3s ease;
        }

        .node:hover circle {
			r: 20;
        }

        .node text {
            font-size: 16px;
            font-weight: bold;
            fill: #FEB844;
            transition: opacity 0.3s ease;
        }

        @keyframes textGlow {
            0% {
                text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff;
            }
            50% {
                text-shadow: 0 0 20px #ff00ff, 0 0 40px #ff00ff, 0 0 60px #ff00ff;
            }
            100% {
                text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff, 0 0 30px #ff00ff;
            }
        }

#play-icon {
    position: relative;
    z-index: 10; /* Plus élevé pour être au-dessus */
    pointer-events: auto; /* Assure qu'elle capte les clics */
}

.instrumentsetfaauteuil {
    pointer-events: none; /* Ce div ne bloque plus les clics */
}

.instrumentsetfaauteuil * {
    pointer-events: auto; /* Mais les enfants (boutons, liens) restent cliquables */
}

.lampesvertes {
    pointer-events: none; /* Empêche les clics sur `.lampesvertes` */
}
.boiterock {
    pointer-events: auto; /* Mais les enfants (boutons, liens) restent cliquables */
}



/* MEDIA QUERRIES */

@media (min-width: 540px) { 
.instrumentsetfaauteuil
	{position:relative;
	top:-100px;}
	
.instrumentsgeneral
	{position:relative;
	top:10%;}
	
	.tout{
	background-image: url("image/fond.jpg");
	background-position:center;
	background-size:250%;
	background-repeat: no-repeat;
	height: 100vh;
}
	
		.lampesvertes
	{top:-30%;}
}




@media (min-width: 768px) {
	.lampesvertes
	{top:-40%;}

} 
@media (min-width: 992px) {
	
			.tout{
	background-image: url("image/fond.jpg");
	background-position:center;
	background-size:200%;
	background-repeat: no-repeat;
	height: 100vh;
}
		.lampesvertes
	{top:-100%;}
} 

@media (min-width: 1200px) { 
.tapis1
	{position:relative!important;
	top:-260px!important;}
.instrumentsetfaauteuil
	{position:relative!important;
	top:-120px!important;}

	.tout{
	background-image: url("image/fond.jpg");
	background-position:center;
	background-size:190%;
	background-repeat: no-repeat;
	height: 100vh;
}
	
}
@media (min-width: 1400px) {}

.instrumentsgeneral
{position:relative;
top:30%;}