/*
* FooGallery Custom CSS
* This file is created by adding custom CSS on FooGallery Settings page in wp-admin
* Created : 8 Oct 2026, 2:59 pm
*/

/* =========================================================
  FOND DES LÉGENDES
   → supprime le fond blanc sous les œuvres
   ========================================================= */

.portfolio-artiste .fg-item-inner,
.portfolio-artiste .fg-caption,
.portfolio-artiste .fg-caption-inner {
    background: transparent !important;
}


/* =========================================================
   TITRE / LÉGENDE DE L'ŒUVRE
   → Raleway
   → taille 13px
   → gris du site
   → alignement à gauche
   ========================================================= */

.portfolio-artiste .foogallery .fg-caption-title {
    font-family: "Raleway", sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #4F5260 !important;
    text-align: left !important;
    margin: 0 !important;
}


/* =========================================================
   DESCRIPTION / DISPONIBILITÉ
   → ex. "disponible"
   → plus petit et plus discret que le titre
   ========================================================= */

.portfolio-artiste .foogallery .fg-caption-desc {
    font-family: "Raleway", sans-serif !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #4F5260 !important;
    text-align: left !important;
    margin-top: 4px !important;
}


/* =========================================================
   ESPACEMENT DE LA LÉGENDE
   → laisse respirer les œuvres
   ========================================================= */

.portfolio-artiste .fg-caption-inner {
    padding: 9px 0 22px 0 !important;
}


/* =========================================================
   LIGHTBOX / VISIONNEUSE
   → typographie cohérente avec le site
   → fond transparent
   → suppression du filet autour de la légende
   ========================================================= */

.fg-panel .fg-panel-info,
.fg-panel .fg-panel-info-inner,
.fg-panel .fg-media-caption {
    font-family: "Raleway", sans-serif !important;
    color: #4F5260 !important;
    background: transparent !important;
    border: none !important;
    border-top: none !important;
    box-shadow: none !important;
}


/* =========================================================
   TEXTE DE LA LÉGENDE DANS LA LIGHTBOX
   → centré sous l'œuvre
   ========================================================= */

.fg-panel .fg-media-caption {
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-align: center !important;
}


/* =========================================================
   TABLETTE
   De 601px à 1024px
   → 2 colonnes
   ========================================================= */

@media only screen and (min-width: 601px) and (max-width: 1024px) {

    .portfolio-artiste.foogallery.fg-masonry .fg-item {
        margin: 0 8px 35px 8px !important;

        width: calc(50% - 16px) !important;
        min-width: calc(50% - 16px) !important;
        max-width: calc(50% - 16px) !important;
    }
}


/* =========================================================
   PORTFOLIOS - MOBILE
   → 1 seule colonne sur téléphone
   → aucune gouttière
   → la gouttière de 100px reste uniquement sur ordinateur
   ========================================================= */

@media only screen and (max-width: 767px) {

    .foogallery.fg-masonry.fg-col2 {
        --fg-column-width: 100% !important;
        --fg-gutter: 0px !important;
    }

}


/* =========================================================
   LIGHTBOX - ORDINATEUR
   → limite la taille des œuvres
   → conserve les proportions
   → laisse de la place à la légende
   ========================================================= */

@media only screen and (min-width: 801px) {

    .fg-panel .fg-media.fg-media-image .fg-media-content {
        max-height: 85vh !important;
        max-width: 90vw !important;
        width: auto !important;
        height: auto !important;
    }

}


/* =========================================================
   LIGHTBOX - MOBILE
   → œuvre légèrement plus grande
   → marges latérales réduites
   → conserve la barre de commandes et la légende
   ========================================================= */

@media only screen and (max-width: 800px) {

    .fg-panel .fg-media.fg-media-image img {
        max-height: 75vh !important;
        max-width: 94vw !important;

        width: auto !important;
        height: auto !important;

        object-fit: contain !important;
    }

}