/* WP Gallery Manager v19 – frontend.css */

/* ── Alignement WP natif ── */
.wp-block-wgm-gallery { overflow: visible !important; box-sizing: border-box; }

/* ── Barre de filtres ── */
.wgm-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 0;
    align-items: center;
    position: relative;
    box-sizing: border-box;
}
/* Hériter l'alignement de la galerie */
.wgm-filter-bar.alignfull {
    max-width: 100vw !important; width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 20px; padding-right: 20px;
}
.wgm-filter-bar.alignwide {
    max-width: var(--wp--style--global--wide-size, 1200px) !important; width: 100%;
}
.wgm-filter-btn {
    padding: 7px 18px;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 100px;
    background: transparent;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
    line-height: 1.4;
}
.wgm-filter-btn:hover {
    background: rgba(0,0,0,.06);
    border-color: rgba(0,0,0,.25);
}
.wgm-filter-btn.wgm-filter-active {
    background: #1d1d1d;
    color: #fff;
    border-color: #1d1d1d;
}
/* Bouton mobile toggle — masqué par défaut sur desktop */
.wgm-filter-toggle {
    display: none;
    padding: 8px 18px;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 100px;
    background: #fff;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
/* Mobile : dropdown */
@media (max-width: 640px) {
    .wgm-filter-bar {
        flex-wrap: nowrap;
        overflow: hidden;
        position: relative;
    }
    .wgm-filter-btn {
        display: none;
    }
    .wgm-filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    /* Quand ouvert : afficher les boutons en dropdown */
    .wgm-filter-bar.wgm-filter-open {
        flex-wrap: wrap;
        overflow: visible;
        background: #fff;
        padding: 10px;
        border-radius: 12px;
        box-shadow: 0 4px 24px rgba(0,0,0,.15);
        z-index: 50;
    }
    .wgm-filter-bar.wgm-filter-open .wgm-filter-btn {
        display: inline-block;
    }
    .wgm-filter-bar.wgm-filter-open .wgm-filter-toggle {
        width: 100%;
        text-align: center;
        margin-bottom: 4px;
        background: #f3f3f3;
    }
}

/* Transition douce quand les items sont filtrés */
.wgm-item.wgm-filtered {
    display: none !important;
}
.wp-block-wgm-gallery.alignfull {
    max-width: 100vw !important; width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}
.wp-block-wgm-gallery.alignwide {
    max-width: var(--wp--style--global--wide-size, 1200px) !important; width: 100%;
}

/* ── Items par layout ── */
.wgm-l-grid .wgm-item       { aspect-ratio:1; overflow:hidden; }
.wgm-l-grid .wgm-item img   { width:100%;height:100%;object-fit:cover;display:block; }

.wgm-l-masonry .wgm-item     { break-inside:avoid;display:block;overflow:hidden;border-radius:4px; }
.wgm-l-masonry .wgm-item img { width:100%;height:auto;display:block; }

.wgm-l-justified .wgm-item     { overflow:hidden;flex-shrink:0;flex-grow:0;flex-basis:auto;border-radius:4px; }
.wgm-l-justified .wgm-item img { width:100%;height:100%;object-fit:cover;display:block; }
.wgm-l-justified .wgm-item:not([style*="width"]) { width:150px;height:150px; }

.wgm-l-opus .wgm-item     { overflow:hidden;min-height:60px; }
.wgm-l-opus .wgm-item img { width:100%;height:100%;object-fit:cover;display:block; }

/* ── Item base ── */
.wgm-item {
    position: relative;
    border-radius: 4px;
    cursor: pointer;
    display: block;
    transition: box-shadow .3s ease, transform .3s ease;
}
.wgm-item img { transition: transform .4s cubic-bezier(.25,.46,.45,.94); display:block; }
.wgm-item:hover img { transform: scale(1.05); }

/* Item actif (panneau ouvert) : légère mise en valeur */
.wgm-item.wgm-active {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(0,0,0,.25);
    border-radius: 4px;
    transform: scale(1.01);
    z-index: 2;
}
.wgm-item.wgm-active img { transform: none !important; }

/* Info survol */
.wgm-info-hover {
    position:absolute;bottom:0;left:0;right:0;
    background:linear-gradient(transparent,rgba(0,0,0,.72));
    color:#fff;padding:28px 12px 12px;opacity:0;transition:opacity .25s;
    display:flex;flex-direction:column;gap:3px;pointer-events:none;
}
.wgm-item:hover .wgm-info-hover { opacity:1; }
.wgm-info-always { padding:8px 12px;background:rgba(0,0,0,.58);color:#fff;font-size:13px;text-align:center; }
.wgm-it { font-size:13px;font-weight:600;display:block; }
.wgm-ic { font-size:12px;opacity:.85;display:block; }

/* ============================================================
   PANNEAU D'EXPANSION — style "Google Images"
   Un nouvel élément est inséré dans le flux APRÈS la dernière
   image de la rangée cliquée. Il prend toute la largeur.
   Les images en dessous sont poussées naturellement.
   ============================================================ */
.wgm-panel {
    /* Pleine largeur dans tous les layouts */
    grid-column: 1 / -1;
    width: 100%;
    flex-basis: 100%;
    flex-shrink: 0;

    /* Hauteur : calculée par JS depuis le ratio de l'image */
    height: 560px; /* valeur par défaut, JS surcharge */

    position: relative;
    margin-top: 4px;   /* petit espace au-dessus du panneau */
    margin-bottom: 4px;

    /* Ouverture */
    animation: wgmPanelIn .46s cubic-bezier(0.22, 1, 0.36, 1) both;
    overflow: visible;  /* pour la flèche qui dépasse en haut */
}
@keyframes wgmPanelIn {
    0%  { opacity:0; transform: scaleY(0.6) translateY(-12px); transform-origin: top center; }
    100%{ opacity:1; transform: scaleY(1)   translateY(0);     transform-origin: top center; }
}
.wgm-panel.wgm-panel-closing {
    animation: wgmPanelOut .38s cubic-bezier(0.55, 0, 1, 0.45) both;
}
@keyframes wgmPanelOut {
    0%  { opacity:1; transform: scaleY(1)   translateY(0);    transform-origin: top center; }
    100%{ opacity:0; transform: scaleY(0.6) translateY(-8px); transform-origin: top center; }
}

/* Flèche pointant vers l'image active */
.wgm-panel-arrow {
    position: absolute;
    top: -10px;
    left: 50%;               /* repositionné par JS */
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #111;
    z-index: 3;
    pointer-events: none;
    transition: left .2s ease;
}

/* Contenu interne du panneau */
.wgm-panel-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    background: #111;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

/* Zone image — occupe tout l'espace disponible */
.wgm-panel-img-wrap {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;        /* CRITIQUE : sans ça, max-height:100% sur l'img ne fonctionne pas */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0c0c0c;
    overflow: hidden;
    padding: 8px;
    position: relative;
    box-sizing: border-box;
}

/* IMAGE — contain = l'image entière est toujours visible */
.wgm-panel-img {
    display: block;
    /* Stratégie : l'image remplit la zone et object-fit:contain
       garantit qu'elle est entière sans recadrage */
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 3px;
    opacity: 0;
    transition: opacity .35s ease;
}

/* Spinner */
.wgm-panel-spin {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 42px; height: 42px;
    border: 3px solid rgba(255,255,255,.08);
    border-top-color: rgba(255,255,255,.6);
    border-radius: 50%;
    animation: wgmSpin .8s linear infinite;
    pointer-events: none;
}
@keyframes wgmSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }

/* Panneau info à droite */
.wgm-panel-info {
    flex: 0 0 280px;
    min-width: 0;
    min-height: 0;
    background: #161616;
    color: #fff;
    padding: 36px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    border-left: 1px solid rgba(255,255,255,.06);
    overflow-y: auto;
}
.wgm-panel-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    letter-spacing: -.01em;
}
.wgm-panel-caption {
    margin: 0;
    font-size: 14px;
    color: rgba(255,255,255,.55);
    line-height: 1.6;
}
.wgm-panel-link {
    display: inline-block;
    margin-top: 8px;
    padding: 10px 22px;
    background: #fff;
    color: #111;
    font-size: 13px;
    font-weight: 600;
    border-radius: 100px;
    text-decoration: none;
    transition: background .2s, transform .2s;
    letter-spacing: .01em;
}
.wgm-panel-link:hover {
    background: rgba(255,255,255,.85);
    transform: translateY(-1px);
}

/* Bouton ✕ */
.wgm-panel-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 36px; height: 36px;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    color: rgba(255,255,255,.9);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
    z-index: 20;
}
.wgm-panel-close:hover { background: rgba(255,255,255,.22); transform: scale(1.12); }

/* Responsive */
@media (max-width: 640px) {
    .wgm-panel { height: clamp(380px, 80vw, 560px); }
    .wgm-panel-inner    { flex-direction: column; }
    .wgm-panel-info     { flex: 0 0 auto; padding: 16px 18px; border-left: none; border-top: 1px solid rgba(255,255,255,.08); }
    .wgm-panel-title    { font-size: 16px; }
    .wgm-panel-caption  { font-size: 13px; }
    .wgm-panel-close    { top: 8px; right: 8px; width: 32px; height: 32px; }
}

/* ── Lightbox masonry ── */
body.wgm-lock { overflow:hidden; }
#wgm-lb { display:none;position:fixed;inset:0;z-index:999999;align-items:center;justify-content:center; }
#wgm-lb.on { display:flex; }
.wlb-bg { position:absolute;inset:0;background:rgba(0,0,0,.94);animation:wlbFade .2s ease; }
@keyframes wlbFade { from{opacity:0}to{opacity:1} }
.wlb-wrap { position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:10px;animation:wlbZoom .24s cubic-bezier(.34,1.2,.64,1); }
@keyframes wlbZoom { from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1} }
.wlb-stage { position:relative;display:flex;align-items:center;justify-content:center;max-width:88vw;max-height:88vh; }
.wlb-img { max-width:88vw;max-height:88vh;object-fit:contain;border-radius:3px;display:block;opacity:0;transition:opacity .22s; }
.wlb-spin { display:none;position:absolute;width:36px;height:36px;border:3px solid rgba(255,255,255,.12);border-top-color:#fff;border-radius:50%;animation:wgmSpin .7s linear infinite; }
.wlb-prev,.wlb-next { background:rgba(255,255,255,.1);border:none;color:#fff;width:52px;height:52px;border-radius:50%;cursor:pointer;font-size:22px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:background .15s; }
.wlb-prev:hover,.wlb-next:hover { background:rgba(255,255,255,.25); }
.wlb-close { position:fixed;top:14px;right:18px;z-index:2;background:rgba(255,255,255,.12);border:none;color:#fff;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;transition:background .15s; }
.wlb-close:hover { background:rgba(255,255,255,.3); }
.wlb-bar { position:fixed;bottom:14px;left:0;right:0;z-index:2;text-align:center;color:#fff;padding:0 24px;pointer-events:none; }
.wlb-title { margin:0;font-size:15px;font-weight:600; }
.wlb-cap   { margin:4px 0 0;font-size:13px;opacity:.75; }
.wlb-cnt   { display:block;font-size:12px;opacity:.45;margin-top:4px; }
.wlb-link  { display:none;margin-top:8px;padding:9px 22px;background:#fff;color:#111;font-size:13px;font-weight:600;border-radius:100px;text-decoration:none;transition:background .2s,transform .2s;pointer-events:auto; }
.wlb-link:hover { background:rgba(255,255,255,.85);transform:translateY(-1px); }
@media(max-width:580px){.wlb-prev,.wlb-next{width:38px;height:38px;font-size:18px;}}