/* ===== Base ===== */
html, body { margin: 0; padding: 0; }

/* ===== Diaporama : une seule image a la fois ===== */
#images { position: relative; overflow: hidden; }
#images > img { display: none; }
#images > img:first-of-type { display: block; }
#images.cycle-initialized > img { display: block; }

/* 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; }

/* ===== Mode image : pas de scroll ===== */
body:not(.mode-grille) { overflow: hidden; height: 100vh; }
body:not(.mode-grille) #template-pager { display: none !important; }

/* ===== Mode grille : scroll libre, image seule masquee ===== */
body.mode-grille { overflow-y: auto; overflow-x: hidden; height: auto; }
body.mode-grille #images { display: none !important; }
body.mode-grille .gauche { position: fixed !important; }
body.mode-grille .main {
    position: relative !important;
    left: 320px !important;
    width: calc(100% - 320px) !important;
}

/* ===== Grille : cases de 160x160 ===== */
body.mode-grille #template-pager {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, 160px);
    gap: 12px;
    position: static !important;
    float: none !important;
    width: 100% !important;
    height: auto !important;
    margin: 0;
    padding: 0;
}

body.mode-grille #template-pager figure.image {
    display: block !important;
    float: none !important;
    position: static !important;
    width: 160px !important;
    height: 160px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    cursor: pointer;
}

body.mode-grille #template-pager .cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
}

body.mode-grille #template-pager .cell img {
    display: block !important;
    position: static !important;
    float: none !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: 160px !important;
    max-height: 160px !important;
}