/* Intégration ViewerForPiwigo dans Piwigo */
.vfp-title {
    font-size: 1.1em;
    font-weight: 600;
    margin-bottom: 4px;
    color: #ffffff;
}
.vfp-description {
    font-size: 0.95em;
    color: #dddddd;
    line-height: 1.4;
}
/* Auteur : information secondaire tres discrete, sur la meme ligne que le
   titre quand la place le permet (simple retour a la ligne naturel du texte
   sinon, sans JS ni media query necessaire pour ce cas precis). */
.vfp-author {
    font-size: 0.85em;
    font-weight: 400;
    color: #bbbbbb;
    margin-left: 4px;
}
/* Description longue : tronquee visuellement a quelques lignes pour ne pas
   encombrer la visionneuse, avec un lien "Voir plus" vers la page photo. */
.vfp-description-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.vfp-see-more {
    display: inline-block;
    margin-top: 2px;
    font-size: 0.85em;
    color: #cfe8ff;
    text-decoration: underline;
}
.vfp-see-more:hover,
.vfp-see-more:focus {
    color: #ffffff;
}
/* Mobile : encore plus compact pour laisser la place a la photo. */
@media (max-width: 600px) {
    .vfp-title {
        font-size: 1em;
    }
    .vfp-description {
        font-size: 0.85em;
    }
    .vfp-description-clamped {
        -webkit-line-clamp: 2;
    }
    .vfp-author {
        display: block;
        margin-left: 0;
    }
    /* Fancybox affiche 3 boutons de zoom separes (zoomIn / zoomOut /
       toggleFull) contre un seul cote PhotoSwipe. Sur petit ecran, ca peut
       deborder la barre d'outils et pousser le bouton de fermeture hors de
       l'ecran. On ne garde que "toggleFull" (bascule 100%/ajuste), qui est
       l'equivalent fonctionnel du bouton unique de PhotoSwipe.
       Selecteurs verifies directement dans le DOM rendu (attribut
       data-panzoom-action), pas devines. */
    button[data-panzoom-action="zoomIn"],
    button[data-panzoom-action="zoomOut"] {
        display: none !important;
    }
}
.f-button svg {
    vertical-align: middle;
}

/* --- PhotoSwipe (moteur experimental 0.0.3) --- */
.pswp {
    /* Piwigo (menu compte, barre de theme, etc.) peut definir des elements a
       z-index tres eleve ; on s'assure que la visionneuse reste toujours au
       dessus de tout le reste de la page. */
    --pswp-root-z-index: 999999999;
}
.pswp button[class*="fbv-"],
.pswp a[class*="fbv-"] {
    color: var(--pswp-icon-color, #fff);
}
.pswp button[class*="fbv-"].fbv-playing {
    color: #4caf50;
}

/* Fleches de navigation sur mobile : masquees par defaut sur Fancybox (comme
   PhotoSwipe le fait deja nativement via .pswp--touch), sauf si l'option
   "Afficher les fleches de navigation sur mobile" est activee (classe
   vfp-mobile-arrows ajoutee via l'option mainClass des deux moteurs). */
@media (max-width: 600px) {
    .fancybox__container:not(.vfp-mobile-arrows) .f-button.is-arrow {
        display: none;
    }
}
.pswp.vfp-mobile-arrows.pswp--touch .pswp__button--arrow {
    visibility: visible;
}

/* Fancybox : fleches discretes, sans fond circulaire (variables CSS natives
   du theme Fancybox : --f-arrow-bg vaut par defaut rgba(54,54,54,.65) avec
   --f-arrow-border-radius: 50%). */
.fancybox__container.vfp-flat-arrows {
    --f-arrow-bg: transparent;
    --f-arrow-hover-bg: transparent;
    --f-arrow-active-bg: transparent;
    --f-arrow-border-radius: 0;
}