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


  * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body, html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            background-color: #000; /* Fond noir pour les bordures */
            display: flex; /* Flexbox pour centrer l'image */
            justify-content: center; /* Centrage horizontal */
            align-items: center; /* Centrage vertical */
        }

  .fullscreen-image {
            width: 100vw; /* Remplit toute la largeur */
            height: 100vh; /* Remplit toute la hauteur */
            object-fit: cover; /* Remplit l'écran avec recadrage */
            display: block;
        }
		
		
		
		   /* Conteneur pour l'effet de vignettage */
        .vignette-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.95); /* Effet de vignettage */
            pointer-events: none; /* Permet les clics à travers */
            z-index: 5; /* Sous le logo, au-dessus de l'image */
        }
		
		
        .logo-container {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 100px;
            height: auto;
            z-index: 10;
            animation: heartbeat 1.5s infinite ease-in-out;
            -webkit-animation: heartbeat 1.5s infinite ease-in-out;
            will-change: transform;
        }

        .logo {
            width: 100%;
            height: auto;
            filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
        }

    @keyframes heartbeat {
        0% { transform: scale(1); -webkit-transform: scale(1); }
        15% { transform: scale(1.05); -webkit-transform: scale(1.05); }
        25% { transform: scale(1); -webkit-transform: scale(1); }
        40% { transform: scale(1.05); -webkit-transform: scale(1.05); }
        50% { transform: scale(1); -webkit-transform: scale(1); }
        100% { transform: scale(1); -webkit-transform: scale(1); }
    }
	
	
	
.logo-text {
    position: absolute;
    top: 105px; /* 20px (logo top) + 232px (logo height) + 18px (margin-top) */
    left: 20px;
    width: 100px; /* Largeur fixe de 100px */
 	font-family: Georgia, serif;
    color: #fff;
    font-size: 14px; /* Base pour PC */
    line-height: 1.4; /* Espacement pour deux lignes */
    text-align: center; /* Centrer le conteneur */
	text-transform:uppercase;
    z-index: 10;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); /* Ombre cohérente */
}

.logo-text span {
    display: block; /* Chaque span sur une ligne */
    width: 100px; /* S'assurer que chaque span utilise la largeur totale */
}

/* Ajustement précis pour "Olivier" (7 lettres, 6 espaces) */
.logo-text span:nth-child(1) {
    letter-spacing: 7px; /* Approx. 30px/6 = 7px par espace */
}

/* Ajustement précis pour "Baume" (5 lettres, 4 espaces) */
.logo-text span:nth-child(2) {
    letter-spacing: 12px; /* Approx. 48px/4 = 12px par espace */
}



		
		 /* Style du player audio */
        .audio-player {
            position: absolute;
            bottom: 20px; /* En bas avec marge */
            left: 50%;
            transform: translateX(-50%); /* Centrage horizontal */
            display: flex;
            align-items: center;
            gap: 15px; /* Espacement entre éléments */
            background: rgba(0, 0, 0, 0.3); /* Fond semi-transparent */
            padding: 10px 20px;
            border-radius: 3px;
            z-index: 10; /* Au-dessus de l'image et vignettage */
        }

        .audio-player button {
            background: none;
            border: none;
            cursor: pointer;
            padding: 5px;
            width: 30px; /* Taille des boutons */
            height: 30px;
        }

        .song-title {
            font-family: Georgia, serif;
            color: #fff; /* Blanc pour contraste */
            font-size: 18px;
            max-width: 200px; /* Limite la largeur du titre */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
		
		
		    /* SVG des boutons */
        .play-icon, .pause-icon, .prev-icon, .next-icon {
            fill: #fff; /* Couleur blanche */
            width: 100%;
            height: 100%;
        }

        /* Cacher l'icône Pause par défaut */
        .pause-icon {
            display: none;
        }
		
		
		
		

        /* Ajustement pour écrans plus hauts que larges (ex. smartphones portrait) */
        @media screen and (max-aspect-ratio: 3/2) {
            .fullscreen-image {
                width: 100vw;
                height: auto;
                min-height: 100vh;
            }
			 .vignette-overlay {
                box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.95); /* Vignettage plus subtil sur mobile */
            }
          
		  
		.logo-container {
                width: 75px;
                animation: heartbeat 1.5s infinite ease-in-out;
                -webkit-animation: heartbeat 1.5s infinite ease-in-out;
                will-change: transform;
            }
          
		  
		  
		      @keyframes heartbeat {
        0% { transform: scale(1); -webkit-transform: scale(1); }
        15% { transform: scale(1.03); -webkit-transform: scale(1.03); }
        25% { transform: scale(1); -webkit-transform: scale(1); }
        40% { transform: scale(1.03); -webkit-transform: scale(1.03); }
        50% { transform: scale(1); -webkit-transform: scale(1); }
        100% { transform: scale(1); -webkit-transform: scale(1); }
    }
		  
		  
		  
        .logo {
                filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.5));
            }
			
		
	
 .logo-text {
        top: 90px; /* 20px (logo top) + 100px (logo height) + 30px (margin-top) */
		left: 10px; /* Réduit pour aligner sous le logo */
        width: 75px;
        font-size: 10px; /* Plus petit pour mobile */
        filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.5));
    }
	
    .logo-text span:nth-child(1) {
        letter-spacing: 5px; /* Ajusté pour mobile */
    }
    .logo-text span:nth-child(2) {
        letter-spacing: 8px; /* Ajusté pour mobile */
    }

			
			
        
		  .audio-player {
                padding: 8px 15px;
                gap: 10px;
            }
            .song-title {
                font-size: 14px;
                max-width: 150px;
            }
            .audio-player button {
                width: 25px;
                height: 25px;
            }
			
           
        }