/* ===== Diaporama : une seule image a la fois ===== */
#images { position: relative; overflow: hidden; }
#images > img { display: none; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 120px); }
#images > img:first-of-type { display: block; }
#images.cycle-initialized > img { display: block; }

.wrapper { overflow: visible !important; height: auto !important; }

/* ===== Grille : cachee par defaut, remplace l'image quand body.mode-grille ===== */
#template-pager { display: none !important; }
body.mode-grille #template-pager {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    float: none !important;
    top: auto !important; left: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    margin: 0; padding: 0;
    text-align: left;
}
body.mode-grille #template-pager figure {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    float: none !important;
    cursor: pointer;
    margin: 0 8px 8px 0;
}
body.mode-grille #template-pager figure img { display: block !important; visibility: visible !important; opacity: 1 !important; }
body.mode-grille #images { display: none !important; }

/* ===== Barre sous l'image : grille + A propos a gauche, nom a droite ===== */
.navigation {
    position: relative !important;
    top: auto !important; left: auto !important; bottom: auto !important;
    float: none !important;
    clear: both;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    padding: 10px 0;
}
.navigation .nav-gauche { display: flex; align-items: center; gap: 15px; }
.navigation .nom { text-align: right; }

/* ===== Menu : au-dessus, fond blanc ===== */
.gauche { z-index: 10 !important; background: #fff; }

/* ===== Contenu : decale a droite du menu, largeur libre (suit l'image) ===== */
.main {
    position: absolute !important;
    left: 320px !important;
    top: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 1 !important;
}
.wrapper {
    float: none !important;
    position: relative !important;
    left: 0 !important;
    top: 5px !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
}

/* ===== Image a sa taille naturelle, limitee seulement en hauteur ===== */
#images > img {
    max-width: none !important;
    max-height: calc(100vh - 120px) !important;
    width: auto !important;
    height: auto !important;
}

#overlay { max-width: 100%; box-sizing: border-box; }

/* ===== ANTI-SCROLL : plus de barres sur fond blanc ===== */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}
#overlay {
    width: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 160px) !important;
    overflow: auto !important;
}