/* ==============================
   CONTAINER LIGHTBOX
============================== */

#dasein-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(0,0,0,0.9);

    z-index: 9999;

    justify-content: center;
    align-items: center;

    overflow: hidden;
}

#dasein-lightbox img {
    max-width: 90%;
    max-height: 90%;

    box-shadow: 0 0 20px rgba(0,0,0,0.5);

    border-radius: 4px;
}


/* ==============================
   NUMÉRO X/Y
============================== */

#dasein-lightbox-title .dasein-lightbox-numero {
    color: var(--couleur_du_texte);
    margin-right: 5px;
}


/* ==============================
   TITRE / LÉGENDE
============================== */

#dasein-lightbox-title .dasein-lightbox-titre {
    font-style: italic;
    color: var(--couleur_du_texte);
}


/* ==============================
   BOUTONS LIGHTBOX
============================== */

#dasein-lightbox .dasein-lightbox-close,
#dasein-lightbox .dasein-lightbox-prev,
#dasein-lightbox .dasein-lightbox-next {
    position: absolute;
    cursor: pointer;
    user-select: none;
    z-index: 10000;
}


/* Fermer */

#dasein-lightbox .dasein-lightbox-close {
    top: 10px;
    right: 20px;

    font-size: 30px;
    color: var(--couleur_liens_texte);
}


/* Précédent */

#dasein-lightbox .dasein-lightbox-prev {
    top: 50%;
    left: 20px;

    transform: translateY(-50%);

    font-size: 50px;
    color: var(--couleur_liens_texte);
}


/* Suivant */

#dasein-lightbox .dasein-lightbox-next {
    top: 50%;
    right: 20px;

    transform: translateY(-50%);

    font-size: 50px;
    color: var(--couleur_liens_texte);
}


/* Hover boutons */

#dasein-lightbox .dasein-lightbox-prev:hover,
#dasein-lightbox .dasein-lightbox-next:hover,
#dasein-lightbox .dasein-lightbox-close:hover {
    color: var(--couleur_liens_texte_survoles);
}


/* ============================================================
   MINIATURES
============================================================ */


/* ==============================
   GRILLE
============================== */

/*
 * La grille occupe 100 %
 * de .entry-content
 */

.entry-content > .dasein-diaporama-thumbs {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    width: 100%;
    max-width: 100%;

    box-sizing: border-box;

    margin: 0;
}


/* ==============================
   BLOCS DES VIGNETTES
============================== */

/*
 * Chaque vignette occupe 1/3
 * de la largeur de la grille.
 *
 * Le calcul tient compte du gap.
 */

.entry-content > .dasein-diaporama-thumbs > .dasein-thumb-item {
    flex: 0 0 calc((100% - 16px) / 3);

    width: calc((100% - 16px) / 3);

    box-sizing: border-box;

    min-width: 0;

    border: 1px solid black;
}


/* ==============================
   LIEN
============================== */

.entry-content > .dasein-diaporama-thumbs .dasein-thumb {
    display: block;

    width: 100%;

    box-sizing: border-box;

    border: 1px solid var(--couleur_liens_texte);

    cursor: pointer;

    background-color: var(--couleur_body);

    transition:
        border-color 0.3s,
        transform 0.3s;
}


/* ==============================
   IMAGE
============================== */

.entry-content > .dasein-diaporama-thumbs .dasein-thumb img {
    display: block;

    width: 100%;
    max-width: 100%;

    height: auto;

    margin: 0;

    object-fit: cover;
}


/* ==============================
   LÉGENDE
============================== */

.entry-content > .dasein-diaporama-thumbs .dasein-thumb-caption {
    display: block;

    width: 100%;

    box-sizing: border-box;

    padding: 8px 24px 8px 8px;

    font-size: 0.7em;

    font-weight: bold;

    line-height: 1em;
}


/* ==============================
   HOVER
============================== */

.entry-content > .dasein-diaporama-thumbs .dasein-thumb:hover {
    border-color: var(--couleur_liens_texte_survoles);

    transform: scale(1.05);
}