/* Supprimer le titre de la page */
h1 {
    display: none;
}

/* Style pour le conteneur des images */
body {
    display: flex;
    justify-content: center; /* Centre le contenu horizontalement */
    align-items: flex-start; /* Aligne le contenu en haut de la fenêtre */
    min-height: 100vh; /* 100% de la hauteur de la fenêtre */
    margin: 0; /* Supprime les marges par défaut du corps */
    background-color: rgba(59, 67, 71, 1);
    border-radius: 10px; /* Un rayon de 10 pixels pour tous les coins */
}

#image-container {
    text-align: center;
    width: 90vw; /* 90% de la largeur de la fenêtre */
    height: 80vh; /* 80% de la hauteur de la fenêtre */
    position: absolute; /* Permet de positionner les éléments enfants relativement à ce conteneur */
    border-radius: 10px; /* Un rayon de 10 pixels pour tous les coins */
    top: 160px; /* Décale le container de 160 pixels depuis le haut de la fenêtre */
    margin-bottom: 50px; /* Ajustez la marge en bas selon vos besoins */
    
}

/* Style pour l'image principale */
#photo {
    max-width: calc(100% - 22px); /* Largeur maximale en tenant compte du cadre de 1px et de la marge intérieure de 10px de chaque côté */
    max-height: calc(100% - 22px); /* Hauteur maximale en tenant compte du cadre de 1px et de la marge intérieure de 10px de chaque côté */
    width: auto; /* Ajuste la largeur automatiquement en fonction de la hauteur */
    height: auto; /* Ajuste la hauteur automatiquement en fonction de la largeur */
    object-fit: contain; /* Conserve les proportions de l'image sans la déformer */
    z-index: 0; /* Assure que l'image est en dessous du container de commandes */
    position: absolute; /* Position absolue par rapport au conteneur parent */
    border-radius: 10px; /* Un rayon de 10 pixels pour tous les coins */
    top: 0; /* Réinitialise la position verticale */
    left: 0; /* Réinitialise la position horizontale */
    right: 0; /* Réinitialise la position horizontale */
    bottom: 0; /* Réinitialise la position verticale */
    margin: auto; /* Centre l'image horizontalement et verticalement */
   
}



/* Style pour le nom de l'image */
#nom-image {
    text-align: right;
    font-weight: bold;
    font-size: 18px;
    font-family: Arial, sans-serif; /* Utiliser la police Arial ou une police sans-serif similaire */
    position: absolute; /* Position absolue par rapport au conteneur parent */
    top: 43px; /* 10px du haut du conteneur parent */
    right: 10px; /* 10px de la droite du conteneur parent */
    background-color: rgba(14, 152, 232, 1);
    color: white;
    padding: 5px 24.5px; /* Marge intérieure pour le texte */
    box-sizing: border-box; /* Inclut la marge intérieure dans la largeur */
    border: 1px solid black; /* Bordure noire d'un pixel */
    border-radius: 10px; /* Un rayon de 10 pixels pour tous les coins */
}

/* Style pour le calendrier */
#calendrier-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 70px;
    left: 10px;
    text-align: left;
    font-size: 18px; /* Taille de police similaire à celle des autres commandes */
    font-family: Arial, sans-serif; /* Utiliser la police Arial ou une police sans-serif similaire */
    font-weight: bold;
    
}



/* Style pour les éléments de calendrier */
#calendrier-container input[type="text"] {
    font-family: Arial, sans-serif; /* Utiliser la police Arial ou une police sans-serif similaire */
    font-size: 18px; /* Taille de police similaire à celle des autres commandes */
    font-weight: bold;
    border: 1px solid black; /* Ajouter une bordure noire d'un pixel */
    border-radius: 10px; /* Un rayon de 10 pixels pour tous les coins */
    padding: 4px 5px; /* Ajuster le padding pour correspondre au style */
    background-color: rgba(33, 101, 237, 1);
    color: white;
    top: 5px;
}

/* Style pour le bouton "Télécharger photo" */
#telecharger-photo-container button {
    background-color: rgba(33, 101, 237, 1);
    color: white;
    padding: 5px 46px; /* Ajuster le padding pour correspondre au style */
    border: 1px solid black; /* Bordure noire d'un pixel */
    border-radius: 10px; /* Un rayon de 10 pixels pour tous les coins */
    cursor: pointer;
    font-size: 18px; /* Même police que le nom de l'image */
    font-family: Arial, sans-serif; /* Utiliser la police Arial ou une police sans-serif similaire */
    font-weight: bold;
    white-space: nowrap; /* Empêche le texte de revenir à la ligne */
    margin-top: 106px; /* Ajuster la valeur en fonction de votre mise en page */
}



/* Style pour les boutons de navigation */
.nav-button {
    background-color: rgba(33, 101, 237, 1);
    color: white;
    font-size: 18px; /* Taille de police */
    border: 1px solid black; /* Bordure noire d'un pixel */
    border-radius: 10px; /* Un rayon de 10 pixels pour tous les coins */
    cursor: pointer;
    font-weight: bold;
    margin-top: 5px;
    position: absolute; /* Position absolue par rapport au conteneur parent */
    right: 10px; /* 10px de la droite du conteneur parent */
}

/* Positionnement des boutons Previous Photo et Next Photo en dessous du nom de l'image */
#prev-photo {
    top: 73px; /* Décalage par rapport au haut du conteneur */
	right: 113px; /* Ajustement de la position horizontale en tenant compte du padding */
    padding: 5px 18.5px; /* Ajout du padding */
}

#next-photo {
    top: 73px; /* Décalage par rapport au haut du conteneur */
	right: 10px; /* Ajustement de la position horizontale */
    padding: 5px 18.5px; /* Ajout du padding */
}

#prev-day-photo {
    top: 111px; /* Décalage par rapport au haut du conteneur */
    right: 113px; /* Ajustement de la position horizontale en tenant compte du padding */
    padding: 5px 18px; /* Ajout du padding */
}

#next-day-photo {
    top: 111px; /* Décalage par rapport au haut du conteneur */
    right: 10px; /* Ajustement de la position horizontale */
    padding: 5px 18px; /* Ajout du padding */
}


/* Style pour le conteneur des commandes de l'utilisateur */
#commandes-container {
    position: absolute;
    top: 5;
    left: 0;
    width: 100%;
    background-color: rgba(16, 32, 64, 1);
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    border-radius: 10px; /* Un rayon de 10 pixels pour tous les coins */
    z-index: 1; /* Assure que le container est au-dessus de l'image */
    height: 160px; /* Agrandissement de la hauteur du container */
}



/* Style pour le conteneur du logo */
#logo-container {
    position: absolute;
    top: 10px; /* Ajustez la position verticale selon vos besoins */
    left: 10px; /* Ajustez la position horizontale selon vos besoins */
    z-index: 2; /* Assure que le logo est au-dessus des autres éléments */
}

/* Style pour le logo */
#logo-container img {
    max-width: 200px; /* Ajustez la largeur du logo selon vos besoins */
    height: auto; /* Ajuste automatiquement la hauteur en fonction de la largeur */
}


.invisible {
    display: none;
}


#ouvrir-calendrier {
    background-color: rgba(33, 101, 237, 1);
    color: white;
    padding: 5px 52.5px; /* Ajuster le padding pour correspondre au style */
    border: 1px solid black; /* Bordure noire d'un pixel */
    border-radius: 10px; /* Un rayon de 10 pixels pour tous les coins */
    cursor: pointer;
    font-size: 18px; /* Même police que le nom de l'image */
    font-family: Arial, sans-serif; /* Utiliser la police Arial ou une police sans-serif similaire */
    font-weight: bold;
    white-space: nowrap; /* Empêche le texte de revenir à la ligne */
    margin-top: 8px; /* Ajustez la valeur en fonction de votre mise en page */
}

/* Positionnez le bouton juste au-dessus du bouton de téléchargement */
#ouvrir-calendrier {
    margin-bottom: 5px;
}