@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-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            height: 100vh;
            transition: background-image 1s ease-in-out; /* Transition douce */
        }
.instrumentsetfaauteuil{
	position:relative;
	z-index:400;
	background-position: bottom;
	background-repeat: no-repeat;
	height:50vh;
}
/* 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%;
}
.fauteuil{
	position:relative;
	top:-30%;
	 transition: filter 0.2s ease;  
}
.fauteuil:hover {
     cursor: pointer;
    filter: drop-shadow(0 0 0.5rem red); 
}
.lampe {
  position: relative;
  z-index:2;
}
.hifi{
	position:relative;
	top:-55%;
	right:10%;
	 transition: filter 0.2s ease;  
}
.hifi:hover {
     cursor: pointer;
    filter: drop-shadow(0 0 0.2rem red); 
}
.table {
  position: relative;
  top: -30%;
}
	/*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:-20%;
}


.instruments img{
	position:relative;
	right:10%;
	 transition: filter 0.2s ease; 
}
.instruments img:hover {
     cursor: pointer;
    filter: drop-shadow(0 0 0.2rem red); 
}
.lampeinstr{
	position:relative;
	left:20%;
	z-index:2;
	top:10%;
}
.partition-p{
	position:relative;
	top:185%;
	right:5%;
	 transition: filter 0.2s ease; 
	z-index:2;
}
.partition-p:hover {
     cursor: pointer;
    filter: drop-shadow(0 0 0.01rem red); 
}
.partition-g{
	position:relative;
	top:200%;
	right:-15%;
	 transition: filter 0.2s ease; 
	z-index:2;
}
.partition-g:hover {
     cursor: pointer;
    filter: drop-shadow(0 0 0.01rem red); 
}

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

/*Bibliothèques*/
.bibliothèques
{position:relative;
z-index:1;}

.etagere1
{	background-image:url("image/etagere2.svg");
	background-size:contain;
	background-repeat: no-repeat;
	position:relative;
	margin:0px;
	padding:0px;
	background-position:center;
}

.etagere2{
	height:50vh;
}

.chansonfrancaisedisques img 
{position:relative;
top:10%;
width:98%;
left:1%;}

.reggae img 
{position:relative;
top:22%;
right:33%;
height:110%;
width:110%;}

.chansonhautparleur img 
{position:relative;
bottom:244%;
left:7%;
height:93%;
width:93%;
}

.reggaehautparleur img 
{position:relative;
bottom:35%;
left:7%;
height:93%;
width:93%;
}

.radio img 
{position:relative;
bottom:37%;
left:7%;
height:93%;
width:93%;
}

.paroles img 
{position:relative;
bottom:93%;
left:7%;
height:93%;
width:93%;
}

.bluesdisques img 
{position:relative;
top:13%;
width:98%;
left:3%;}

.bottleneck img 
{position:relative;
bottom:53%;
left:20%;
height:50%;
width:50%;
}

.rockvinyles img 
{position:relative;
top:30%;
right:30%;
width:95%;}

.boiterock img 
{position:relative;
top:13%;
left:106%;
width:90%;}

.rockhautparleur img 
{position:relative;
bottom:187%;
left:105%;
height:93%;
width:93%;
}

.blueshautparleur img 
{position:relative;
bottom:157%;
left:7%;
height:93%;
width:93%;
}

.rockvinyles, .bluesdisques, .blueshautparleur, .rockhautparleur, .boiterock, .chansonfrancaisedisques, .chansonhautparleur, .paroles, .reggae, .reggaehautparleur{
	 transition: filter 0.2s ease;  
}
.rockvinyles:hover, .bluesdisques:hover, .blueshautparleur:hover, .rockhautparleur:hover, .boiterock:hover, .chansonfrancaisedisques:hover, .chansonhautparleur:hover, .paroles:hover, .reggae:hover, .reggaehautparleur:hover {
     cursor: pointer;
    filter: drop-shadow(0 0 0.5rem chocolate); 
}




/*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) {}