/* ── Widget VP Portfolio (galerie filtrable + lightbox) ── */

.vp-pf { width: 100%; }
.vp-pf__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 48px; }
.vp-pf__pill { font-family: "Montserrat", sans-serif; font-size: 11px !important; font-weight: 600 !important; line-height: 1 !important; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; padding: 10px !important; border-radius: 100px !important; border: 0 !important; cursor: pointer; background: var(--muted,#fdf6f3) !important; background-image: none; color: var(--surface-dark,#4b4b4b) !important; transition: all .2s; box-shadow: none; }
.vp-pf__pill:hover { background: rgba(241,184,160,.2) !important; background-image: none; color: var(--foreground,#000) !important; }
.vp-pf__pill.is-active { background-image: linear-gradient(to right, rgb(180,99,150), rgb(241,184,160)) !important; color: #fff !important; box-shadow: 0 10px 30px rgba(244,149,133,.25); }
.vp-pf__grid { display: flex; gap: 16px; align-items: flex-start; }
.vp-pf__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.vp-pf__tile { margin: 0; overflow: hidden; border-radius: 0; cursor: zoom-in; background: var(--muted,#fdf6f3); }
/* width/height intrinsèques (HTML) → aspect-ratio réservé avant chargement → pas de glitch au filtre */
.vp-pf__img { display: block; width: 100%; height: auto; transition: transform .7s ease; }
.vp-pf__tile:hover .vp-pf__img { transform: scale(1.05); }
@media (max-width: 768px) { .vp-pf__grid { gap: 12px; } .vp-pf__col { gap: 12px; } }
/* lightbox */

.vp-pf__lb { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.92); padding: 40px; }
.vp-pf__lb.is-open { display: flex; }
.vp-pf__lbfig { margin: 0; max-width: 90vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; }
.vp-pf__lbimg { max-width: 90vw; max-height: 82vh; width: auto; height: auto; object-fit: contain; border-radius: 6px; }
.vp-pf__lbcap { color: #fff; font-family: "Playfair Display", serif; font-style: italic; font-size: 15px; margin-top: 14px; text-align: center; opacity: .9; }
.vp-pf__lbclose, .vp-pf__lbprev, .vp-pf__lbnext { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; cursor: pointer; border-radius: 50%; width: 52px; height: 52px; font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.vp-pf__lbclose:hover, .vp-pf__lbprev:hover, .vp-pf__lbnext:hover { background: var(--primary,#f1b8a0); }
.vp-pf__lbclose { top: 24px; right: 24px; font-size: 34px; }
.vp-pf__lbprev { left: 24px; top: 50%; transform: translateY(-50%); }
.vp-pf__lbnext { right: 24px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) { .vp-pf__lbprev { left: 8px; } .vp-pf__lbnext { right: 8px; } .vp-pf__lb { padding: 16px; } }
/* Portfolio : état de chargement AJAX */

.vp-pf__grid.is-loading { opacity: .5; transition: opacity .15s; pointer-events: none; }