body {
    font-family: 'Orbitron', sans-serif;
    margin: 0;
    padding: 0;
    background: #000 url('background.jpg') no-repeat center center fixed;
    background-size: cover;
    color: #fff;
}
header {
    border: none; /* Supprime la bordure */
}
.header-info {
    position: absolute; /* Positionne en haut à gauche */
    top: 20px; /* Ajuste la position verticale */
    left: 20px; /* Ajuste la position horizontale */
    display: flex; /* Utilise flexbox pour l'alignement */
    gap: 10px; /* Espace entre la date et l'heure */
    color: #00ff00; /* Couleur verte */
    font-size: 1em; /* Taille de police plus petite */
	background-color: #000; /* Fond noir pour l'effet écran LCD */
	border: 2px solid #00ff00; /* Bordure verte */
	box-shadow: 0px 0px 20px 2px #00ff00; /* Effet de glow pour l'écran */
	display: flex;
    align-items: center; /* Cela aligne les éléments au centre de la ligne */
	
}
/* LCD Display Styling */
@font-face {
    font-family: 'VT323';
    src: url('URL_DE_LA_POLICE') format('woff');
	
}


.lcd-text {
    font-family: 'VT323', 'Courier New', Courier, monospace; /* Police numérique */
    font-size: 2em; /* Taille du texte numérique */
    text-shadow: 0 0 10px #00ff00; /* Effet de glow autour du texte */
    letter-spacing: 2px; /* Espacement pour simuler un affichage numérique */
    margin: 0;
    padding: 0;
	
}


#clock-display, #date-display {
    margin: 10px 0;
}
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(40, 42, 114, 0.9);
    color: #00ff00;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.8);
    z-index: 1000; /* S'assure que le popup est au-dessus des autres éléments */
    display: none; /* Initialement masqué */
}

.popup h2 {
    margin: 0;
    text-align: center;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: #00ff00;
    font-size: 20px;
    cursor: pointer;
}

.hidden {
    display: none; /* Classe pour masquer le popup */
}

.btn-steampunk1 {
    font-family: 'Orbitron', sans-serif; /* Futuriste */
    font-weight: 700;
    font-size: 1.2em;
    text-transform: uppercase;
    color: #1AFF00; /* Vert néon */
    text-decoration: none;
    display: block;
    padding: 15px 25px;
    margin: 10px 0;
    border: 3px solid #0F0C08; /* Bordure sombre */
    background: inherit;
    box-shadow: 0 4px 15px rgba(0, 255, 0, 0.6), inset 0 0 5px #111; /* Ombre externe verte et interne sombre */
    border-radius: 8px;
    position: relative;
    transition: all 0.3s ease-in-out;
	text-align: center;
}
/* Hover effect */
.btn-steampunk1:hover {
    
    box-shadow: 0 6px 20px rgba(0, 255, 0, 0.8), inset 0 0 10px #222;
    color: #00FF9E; /* Accentuation du vert à l'hover */
    transform: translateY(-3px);
}
/* Base button styling */
.btn-steampunk {
    font-family: 'Orbitron', sans-serif; /* Futuriste */
    font-weight: 700;
    font-size: 1.2em;
    text-transform: uppercase;
    color: #1AFF00; /* Vert néon */
    text-decoration: none;
    display: inline-block;
    padding: 15px 25px;
    margin: 10px 0;
    border: 3px solid #0F0C08; /* Bordure sombre */
    background: linear-gradient(145deg, #2B2B2B, #1F1F1F); /* Effet métallique sombre */
    box-shadow: 0 4px 15px rgba(0, 255, 0, 0.6), inset 0 0 5px #111; /* Ombre externe verte et interne sombre */
    border-radius: 8px;
    position: relative;
    transition: all 0.3s ease-in-out;
}

/* Hover effect */
.btn-steampunk:hover {
    background: linear-gradient(145deg, #393939, #2F2F2F); /* Changement de couleur à l'hover */
    box-shadow: 0 6px 20px rgba(0, 255, 0, 0.8), inset 0 0 10px #222;
    color: #00FF9E; /* Accentuation du vert à l'hover */
    transform: translateY(-3px);
}

/* Glowing neon effect around the buttons */
.btn-steampunk::before, .btn-steampunk::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #1AFF00;
    border: 2px solid #0F0C08;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.8);
}

.btn-steampunk::before {
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 2px solid rgba(0, 255, 0, 0.8);
    border-radius: 10px;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.btn-steampunk:hover::before {
    opacity: 1;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.6);
}

/* Subtle metallic rivets */
.btn-steampunk::after {
    top: 8px;
    left: 8px;
}

.btn-steampunk:hover::after {
    /* Aucun changement supplémentaire */
}
#clock-display, #date-display {
    font-size: 1em; /* Ajuste la taille de la police */
    color: #00ff00; /* Garde la couleur verte, ou change selon tes préférences */
    margin: 10px 0; /* Conserve l'espacement */
    text-shadow: none; /* Supprime l'effet de glow si nécessaire */
}
header {
    position: relative;
    background-color: rgba(40, 42, 114, 0.8);
    padding: 20px;
    text-align: center;
    border-bottom: 2px solid #00ff00;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Utiliser flexbox pour un meilleur contrôle */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
    justify-content: center; /* Centre les éléments horizontalement */
    gap: 20px; /* Espacement entre les éléments */
    margin-top: 20px;
}

nav li {
    margin: 0; /* Réduire la marge pour éviter des décalages */
    display: flex; /* Assure le bon affichage */
    justify-content: center; /* Centre le contenu à l'intérieur du <li> */
}

/* Responsive Design */

/* Tablettes : 2 boutons par ligne */
@media (max-width: 1024px) {
    nav ul {
        flex-direction: row; /* Assure que les boutons restent sur la même ligne */
        justify-content: center; /* Centre toujours les boutons */
    }
}

/* Smartphones : 1 bouton par ligne */
@media (max-width: 600px) {
    nav ul {
        flex-direction: column; /* 1 bouton par ligne */
        align-items: center; /* Centre les éléments horizontalement */
    }
    
    nav li {
        margin: 10px 0; /* Ajoute un espacement vertical */
    }
}


.hero {
    text-align: center;
    padding: 80px 20px;
    background-image: linear-gradient(to bottom, rgba(40, 42, 114, 0.8), rgba(28, 28, 28, 0.8));
    position: relative;
}

.hero img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
}

.popup {
    background-color: rgba(40, 42, 114, 0.8);
    color: #fff;
    padding: 20px;
    border-radius: 15px;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    animation: fadeInOut 3s forwards;
}

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

.welcome-text {
    margin-top: 20px;
}

.welcome-text h1 {
    font-size: 36px;
    margin: 0;
}

footer {
    background-color: rgba(40, 42, 114, 0.8);
    color: #fff;
    padding: 20px;
    text-align: center;
    position: relative;
    border-top: 2px solid #00ff00;
}

footer .time {
    /* Supprimé car l'horloge est dans le header */
}

.accordeur {
    text-align: center;
    margin-top: 30px;
    padding: 20px;
    background-color: rgba(40, 42, 114, 0.8);
    border-radius: 15px;
    color: #00ff00;
}

#note-display {
    font-size: 24px;
    margin-top: 20px;
    text-shadow: 0 0 8px #00ff00, 0 0 15px #00ff00;
}

.notation-select {
    margin: 20px 0;
}

.notation-select label {
    font-size: 18px;
    margin-right: 10px;
}

.notation-select select {
    font-size: 18px;
    padding: 5px;
}
.logo-container {
  display: flex; /* Utilise flexbox pour aligner les logos */
  flex-wrap: wrap; /* Permet aux logos de passer à la ligne si nécessaire */
  justify-content: center; /* Centre les logos horizontalement */
  gap: 20px; /* Espacement entre les logos */
  padding: 20px; /* Espacement interne */
}

.logo-container img {
  max-width: 100%; /* Permet à l'image de s'adapter à son conteneur */
  height: auto; /* Conserve les proportions de l'image */
  width: 150px; /* Taille définissable en pixels */
  /* Vous pouvez ajuster cette valeur selon vos besoins */
}
.logo-container1 {
  display: block; /* Utilise flexbox pour aligner les logos */
  flex-wrap: wrap; /* Permet aux logos de passer à la ligne si nécessaire */
  justify-content: center; /* Centre les logos horizontalement */
  gap: 20px; /* Espacement entre les logos */
  padding: 20px; /* Espacement interne */
}

.logo-container1 img {
  max-width: 100%; /* Permet à l'image de s'adapter à son conteneur */
  height: auto; /* Conserve les proportions de l'image */
  width: auto; /* Taille définissable en pixels */
  /* Vous pouvez ajuster cette valeur selon vos besoins */
}
#acordeur button {
    padding: 10px 20px;
    background: linear-gradient(145deg, #00aaff, #0099ff);
    border-radius: 10px;
    color: #fff;
    border: none;
    cursor: pointer;
}

#acordeur button:hover {
    background: linear-gradient(145deg, #0099ff, #00aaff);
    transform: scale(1.1);
}

@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
    }

    nav li {
        margin: 10px 0;
    }

    .hero {
        padding: 50px 20px;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 24px;
    }

    .hero p {
        font-size: 14px;
    }
}