/* Style général */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, sans-serif;
}

.container {
    display: flex;
    height: 100vh;
    background-color: #302724; /* Fond uni */
}

/* Section gauche pour l'image de la porte */
.left-section {
    width: 50%;
    height: 100%;
}

.left-section img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* L'image prend toute la place disponible */
}

/* Section droite pour la navigation */
.right-section {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.nav-item {
    position: relative; /* Conteneur relatif pour superposer le texte */
    width: 50%; /* Largeur de chaque bouton */
    height: 20%; /* Hauteur de chaque bouton */
    margin: 10px 0;
}

.nav-item a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

/* Conteneur pour l'image */
.nav-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

/* Superposition du texte à l'intérieur du bouton */
.nav-item .label {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrer le texte dans le bouton */
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    pointer-events: none; /* Le texte ne bloquera pas le clic sur l'image */
}

/* Fixe la taille spécifique pour flamme.png */
.nav-item img[src="images/flamme.png"] {
    width: 100%;  /* Largeur de 50% du conteneur parent */
    height: 100%; /* Hauteur de 50% du conteneur parent */
    object-fit: contain; /* S'assure que l'image garde ses proportions */
}

.nav-item img[src="images/bouton.png"] {
    width: 100%;  /* Largeur de 50% du conteneur parent */
    height: auto; /* Hauteur de 50% du conteneur parent */
    object-fit: contain; /* S'assure que l'image garde ses proportions */
}

/* Boutons cachés pour les utilisateurs autorisés */
.hidden {
    display: none;
}

/* Optionnel : ajout d'animation pour l'apparition des boutons autorisés */
#authorized-buttons {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Ajoutez ceci à votre fichier CSS */

.disabled {
    pointer-events: none; /* Empêche l'interaction avec le lien */
    color: gray; /* Change la couleur pour indiquer que le lien est désactivé */
    cursor: not-allowed; /* Change le curseur pour indiquer que l'élément n'est pas cliquable */
}

.logout-section {
    display: flex; /* Utiliser flexbox pour aligner les éléments */
    flex-direction: column; /* Aligner verticalement le texte et l'image */
    position: absolute;
    top: 20px;
    right: 20px;
    align-items: center; /* Centrer les éléments horizontalement */
    color: white; /* Mettre le texte en blanc */
}

.username-text {
    color: white; /* Mettre le texte en blanc */
    margin-bottom: 5px; /* Espacement entre le texte et l'image */
    font-size: 1.2em; /* Taille du texte */
}

#logout-door {
    width: 50px;
    height: 50px;
    cursor: pointer;
}