/* Florska V2 — /portfolio/ : en-tête, filtres, grille masonry décalée, grille paysage, pagination. */

.pf-head { padding-top: clamp(48px, 6vw, 96px); padding-bottom: 32px; }
.pf-lead { margin-top: 24px; }
.pf-lead--links { margin-top: 16px; }
.pf-lead--links a { text-decoration: underline; text-underline-offset: 3px; }
.pf-filters { margin-top: 40px; display: flex; flex-direction: column; gap: 16px; }
.pf-filters__label { min-width: 112px; }
.pf-status { margin: 32px 0 0; }
.pf-grid { padding-top: 16px; padding-bottom: clamp(64px, 8vw, 112px); }

/* Grille régulière : mêmes colonnes, même ratio 3:4 pour toutes les couvertures (3 colonnes, 2 sur mobile). */
.fl-mas { --fl-mgap: clamp(12px, 2.4vw, 32px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--fl-mgap); row-gap: clamp(24px, 3.5vw, 48px); align-items: start; }
.fl-mas .fl-card__media > img, .fl-mas .fl-card__media > .ph { display: block; width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; }
@media (max-width: 899px) {
  .fl-mas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 24px; }
}

/* Emplacements « à venir » (Moto) */
.pf-soon { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; padding: 24px; aspect-ratio: 2 / 3; }
.pf-soon__title { margin: 0; font-size: 22px; line-height: 1.15; color: var(--fl-text-2); }

/* État vide */
.pf-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: clamp(32px, 6vw, 72px); }
.pf-empty__name { margin: 0; }

/* Pagination */
.pf-pager { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(40px, 5vw, 72px); }
.fl-pager { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.fl-pg { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 16px; border: 1px solid var(--fl-line); color: var(--fl-text-2); text-decoration: none; font: 600 13px/1 var(--fl-font); letter-spacing: .14em; text-transform: uppercase; transition: border-color var(--fl-t-s), color var(--fl-t-s); }
.fl-pg:is(:hover, :focus-visible) { border-color: var(--fl-bone); color: var(--fl-white); }
.fl-pg[aria-current="page"] { border-color: var(--fl-bone); color: var(--fl-white); box-shadow: inset 0 -2px 0 var(--fl-accent); }

/* CTA de fin */
.pf-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px; }
.pf-cta__title { max-width: 16ch; }

/* Filtres par univers : une ligne défilable sur mobile, fondu entre les sélections. */
.pf-filters__row { flex-wrap: wrap; }
.pf-filters button.fl-filter:focus-visible { outline: 2px solid var(--fl-bone); outline-offset: 3px; }
.fl-mas > [hidden] { display: none; }
.fl-mas { transition: opacity 160ms var(--fl-ease-out, ease); }
.fl-mas.is-out { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .fl-mas > .is-in { animation: pf-in 320ms var(--fl-ease-out, ease) both; animation-delay: var(--pf-d, 0ms); }
}
@keyframes pf-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 599px) {
  .pf-filters { margin-inline: calc(var(--fl-gutter, 16px) * -1); padding-inline: var(--fl-gutter, 16px); }
  .pf-filters__row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .pf-filters__row::-webkit-scrollbar { display: none; }
  .pf-filters__row .fl-filter { flex: none; scroll-snap-align: start; }
}