body {
    font-family: "Arial","Calibri Light";
    font-size: 1em;
    line-height: 1.2;
    text-align: center;  /* pour voir */
}

h1 {
    margin: 30px;
}

select {
    width: 500px; /* Largeur de la list box */
    height: 50px; /* Hauteur pour afficher plusieurs options */
}

.err {
    color: red;
}

.success {
    color: limegreen;
}


.nav-button {
    margin: 5px 10px;
    padding: 2px 5px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
}

.nav-button:hover {
            background-color: #0056b3;
}

#diaporama {
    width: 100%; /* Prendre toute la largeur de la fenêtre */
    /* height: 80vh; /* Prendre toute la hauteur de l'écran */
    height: 100%; /* Prendre toute la hauteur de l'écran */
    overflow: hidden;
    position: relative;
    margin: auto;
    text-align: center;
}

    #diaporama img {
        width: 90vw;
        height: 90vh;
        object-fit: contain; /* garde les proportions, maximise taille sans coupure */
        display: block;
    }

#thumbnail {
    width: 300px; /* Largeur du carré */
    height: 300px; /* Hauteur du carré */
    object-fit: cover; /* Remplit le carré sans déformer */
    border-radius: 8px; /* Optionnel : arrondit les coins */
}

.thumbnail {
    width: 200px; /* Largeur du carré */
    height: 200px; /* Hauteur du carré */
    object-fit: cover; /* Remplit le carré sans déformer */
    border-radius: 8px; /* Optionnel : arrondit les coins */
}


/* Si l'écran est plus large que haut (paysage) */
@media (min-aspect-ratio: 1/1) {
    body {     background-color: lightgray;  }
    .paysage {   }
    .portrait {
        visibility: hidden;
        height: 0px;
        display: none;
    }
}

/* Si l'écran est plus haut que large (portrait) */
@media (max-aspect-ratio: 1/1) {
    body {     background-color: lightcyan;   }
    .paysage {
        visibility: hidden;
        height: 0px;
        display: none;
    }
    .portrait {   }
}