/* 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 très discrète, sur la même ligne que le
   titre quand la place le permet (simple retour à la ligne naturel du texte
   sinon, sans JS ni media query nécessaire pour ce cas précis). */
.vfp-author {
    font-size: 0.85em;
    font-weight: 400;
    color: #bbbbbb;
    margin-left: 4px;
}
/* Description longue : tronquée visuellement à 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 à 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 séparés (zoomIn / zoomOut /
       toggleFull) contre un seul côté PhotoSwipe. Sur petit écran, ça peut
       déborder la barre d'outils et pousser le bouton de fermeture hors de
       l'écran. On garde seulement "toggleFull" (équivalent du bouton unique
       PhotoSwipe). Sélecteurs vérifiés dans le DOM rendu (attribut
       data-panzoom-action), pas devinés. */
    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 thème, etc.) peut définir des éléments à
       z-index très élevé ; 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;
}

/* Flèches de navigation sur mobile : masquées par défaut sur Fancybox (comme
   PhotoSwipe le fait déjà nativement via .pswp--touch), sauf si l'option
   "Afficher les flèches de navigation sur mobile" est activée (classe
   vfp-mobile-arrows ajoutée 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 : flèches discrètes, sans fond circulaire (variables CSS natives
   du thème Fancybox : --f-arrow-bg vaut par défaut 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;
}

/* Bouton indiquant que la photo s'ouvre dans la visionneuse. Position
   calculée en JS via getBoundingClientRect() plutôt qu'en CSS relatif à un
   conteneur : jamais inséré comme enfant de #theMainImage ni de la barre
   d'outils, donc aucun risque de casser leur mise en page propre au thème. */
.vfp-open-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
}
.vfp-open-hint--corner {
    position: absolute;
    z-index: 999;
}
.vfp-open-hint--toolbar {
    margin: 0 4px;
    vertical-align: middle;
}
/* Mode "disparaît" uniquement : visible brièvement au chargement puis au
   survol de la photo ou du bouton (classe ajoutée en JS, voir
   mouseenter/mouseleave et le setTimeout initial). Le mode "toujours
   visible" n'a pas ce modificateur. */
.vfp-open-hint--fade {
    opacity: 0;
    transition: opacity 0.15s ease;
}
.vfp-open-hint--fade.vfp-open-hint--visible {
    opacity: 1;
}