/* Bloc et grille : hauteur = contenu (toutes les cartes visibles), jamais de hauteur fixe */
.spf-portfolio{--gap:16px;display:block;height:auto;min-height:0;overflow:visible}
.spf-portfolio.layout-grid .spf-grid{display:grid;grid-gap:var(--gap);height:auto;min-height:0;overflow:visible}
.elementor-widget-spf-portfolio-collection{height:auto !important;min-height:0;overflow:visible}
/* Forcer section, colonne et conteneur Elementor à prendre la hauteur du contenu (évite la coupure en bas) */
.elementor-section:has(.elementor-widget-spf-portfolio-collection){height:auto !important;min-height:0 !important;overflow:visible !important;overflow-x:visible !important;overflow-y:visible !important}
.elementor-column:has(.elementor-widget-spf-portfolio-collection){height:auto !important;min-height:0 !important;overflow:visible !important;overflow-x:visible !important;overflow-y:visible !important}
/* Centrer le bloc portfolio horizontalement sur desktop (pas collé à gauche) */
.elementor-section:has(.elementor-widget-spf-portfolio-collection){display:flex !important;flex-wrap:wrap !important;justify-content:center !important}
.e-con:has(.elementor-widget-spf-portfolio-collection),.e-con-boxed:has(.elementor-widget-spf-portfolio-collection){margin-left:auto !important;margin-right:auto !important}
/* Conteneur Flexbox Elementor : overflow visible + flex-wrap pour que le contenu ne soit pas coupé */
.e-con:has(.elementor-widget-spf-portfolio-collection),.e-con-boxed:has(.elementor-widget-spf-portfolio-collection),.e-flex:has(.elementor-widget-spf-portfolio-collection),.e-con-inner:has(.elementor-widget-spf-portfolio-collection){height:auto !important;min-height:0 !important;max-height:none !important;overflow:visible !important;overflow-x:visible !important;overflow-y:visible !important;flex-wrap:wrap !important;align-content:flex-start !important}
.elementor-element:has(.elementor-widget-spf-portfolio-collection){height:auto !important;min-height:0 !important;max-height:none !important;overflow:visible !important;overflow-x:visible !important;overflow-y:visible !important;flex-wrap:wrap !important;align-content:flex-start !important}
/* Enfant direct du conteneur (widget) : prendre la hauteur du contenu */
.e-con:has(.elementor-widget-spf-portfolio-collection) > .e-con-inner,.e-con-inner:has(.elementor-widget-spf-portfolio-collection){flex-wrap:wrap !important;align-items:flex-start !important;align-content:flex-start !important}
.e-con:has(.elementor-widget-spf-portfolio-collection) .elementor-widget-spf-portfolio-collection{flex:0 1 auto !important;align-self:flex-start !important;width:100% !important}
.spf-portfolio.cols-d-1 .spf-grid{grid-template-columns:repeat(1,1fr)}
.spf-portfolio.cols-d-2 .spf-grid{grid-template-columns:repeat(2,1fr)}
.spf-portfolio.cols-d-3 .spf-grid{grid-template-columns:repeat(3,1fr)}
.spf-portfolio.cols-d-4 .spf-grid{grid-template-columns:repeat(4,1fr)}
.spf-portfolio.cols-d-5 .spf-grid{grid-template-columns:repeat(5,1fr)}
.spf-portfolio.cols-d-6 .spf-grid{grid-template-columns:repeat(6,1fr)}
@media(max-width:1024px){
    .spf-portfolio.cols-t-1 .spf-grid{grid-template-columns:repeat(1,1fr)}
    .spf-portfolio.cols-t-2 .spf-grid{grid-template-columns:repeat(2,1fr)}
    .spf-portfolio.cols-t-3 .spf-grid{grid-template-columns:repeat(3,1fr)}
    .spf-portfolio.cols-t-4 .spf-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:767px){
    .spf-portfolio.cols-m-1 .spf-grid{grid-template-columns:repeat(1,1fr)}
    .spf-portfolio.cols-m-2 .spf-grid{grid-template-columns:repeat(2,1fr)}
}
.spf-portfolio.layout-masonry .spf-grid{column-gap:var(--gap);height:auto;min-height:0;overflow:visible}
.spf-portfolio.layout-masonry .spf-card{display:inline-block;width:100%;margin:0 0 var(--gap);break-inside:avoid}
.spf-portfolio.layout-masonry.cols-d-2 .spf-grid{columns:2}
.spf-portfolio.layout-masonry.cols-d-3 .spf-grid{columns:3}
.spf-portfolio.layout-masonry.cols-d-4 .spf-grid{columns:4}
.spf-portfolio.layout-masonry.cols-d-5 .spf-grid{columns:5}
.spf-portfolio.layout-masonry.cols-d-6 .spf-grid{columns:6}
@media(max-width:1024px){
    .spf-portfolio.layout-masonry.cols-t-1 .spf-grid{columns:1}
    .spf-portfolio.layout-masonry.cols-t-2 .spf-grid{columns:2}
    .spf-portfolio.layout-masonry.cols-t-3 .spf-grid{columns:3}
    .spf-portfolio.layout-masonry.cols-t-4 .spf-grid{columns:4}
}
@media(max-width:767px){
    .spf-portfolio.layout-masonry.cols-m-1 .spf-grid{columns:1}
    .spf-portfolio.layout-masonry.cols-m-2 .spf-grid{columns:2}
}
.spf-card{border:1px solid #e5e7eb;border-radius:10px;overflow:visible;background:#fff}
.spf-card .spf-media{border-radius:10px 10px 0 0}
.spf-media{position:relative;overflow:hidden;aspect-ratio:16/9;background-size:cover;background-position:center}
.spf-media .spf-media-inner{width:100%;height:100%;display:block}
.spf-media.ratio-1-1{aspect-ratio:1/1}
.spf-media.ratio-4-3{aspect-ratio:4/3}
.spf-media.ratio-3-2{aspect-ratio:3/2}
.spf-media.ratio-16-9{aspect-ratio:16/9}
.spf-media img{width:100%;height:100%;object-fit:cover;display:block}
.spf-body{padding:14px}
.spf-title{font-weight:600;margin:0 0 6px}
.spf-meta{font-size:0.9em;opacity:0.8;margin:0 0 10px;display:flex;flex-wrap:wrap;gap:10px}
.spf-meta span{display:inline-flex;gap:6px;align-items:center}
.spf-meta-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.spf-meta-line .spf-meta-line-icon{display:inline-flex;align-items:center;flex-shrink:0}
.spf-meta-line .spf-meta-line-content{display:inline-flex;align-items:center;gap:4px}
.spf-button-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.spf-button-wrap--align-left{justify-content:flex-start}
.spf-button-wrap--align-center{justify-content:center}
.spf-button-wrap--align-right{justify-content:flex-end}
.spf-button-wrap--align-stretch{justify-content:stretch}
.spf-button-wrap--align-stretch .spf-button{flex:1;min-width:0;text-align:center}
.spf-button{display:inline-block;padding:8px 12px;border-radius:8px;text-decoration:none;border:1px solid #e5e7eb;background:#f8fafc}
.spf-button-secondary{margin-left:8px}
.spf-notice{padding:10px;border:1px solid #e5e7eb;background:#fff}
.spf-notice-no-results .spf-filter-btn{margin-top:8px;display:inline-block}
.spf-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.spf-filters .spf-filter-btn{padding:8px 14px;border-radius:8px;text-decoration:none;border:1px solid #e5e7eb;background:#f8fafc;color:inherit}
.spf-filters .spf-filter-btn:hover,.spf-filters .spf-filter-btn.active{background:#e5e7eb}
.spf-filters button.spf-filter-btn{cursor:pointer;font:inherit;color:inherit}
@media(max-width:767px){
  .spf-filters{flex-direction:column;align-items:stretch;gap:8px}
  .spf-filters .spf-filter-btn{width:100%;min-width:0;text-align:center;padding:12px 16px;box-sizing:border-box}
  .spf-grid{padding-bottom:24px}
  /* Sur mobile (vrai téléphone) : forcer le bloc portfolio à 100 % de largeur */
  .elementor-widget-spf-portfolio-collection,.elementor-widget-spf-portfolio-collection .elementor-widget-container,.spf-portfolio{width:100% !important;max-width:100% !important;min-width:0 !important;box-sizing:border-box !important}
  .e-con:has(.elementor-widget-spf-portfolio-collection),.e-con-boxed:has(.elementor-widget-spf-portfolio-collection),.e-con-inner:has(.elementor-widget-spf-portfolio-collection){width:100% !important;max-width:100% !important;min-width:0 !important}
  .elementor-section:has(.elementor-widget-spf-portfolio-collection),.elementor-column:has(.elementor-widget-spf-portfolio-collection){width:100% !important;max-width:100% !important}
}

/* Filtres avancés */
.spf-advanced-filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:20px}
.spf-advanced-filters--align-left{justify-content:flex-start}
.spf-advanced-filters--align-center{justify-content:center}
.spf-advanced-filters--align-right{justify-content:flex-end}
.spf-advanced-filters--align-full{width:100%;justify-content:flex-start}
.spf-advanced-filters .spf-af-select{min-width:140px;padding:10px 14px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;font-size:1em;color:inherit;cursor:pointer;appearance:auto}
.spf-advanced-filters .spf-af-select:focus{outline:2px solid rgba(0,0,0,0.2);outline-offset:2px}
@media(max-width:767px){.spf-advanced-filters{flex-direction:column;align-items:stretch}.spf-advanced-filters .spf-af-select{min-width:0;width:100%}}

/* Message aucun résultat (filtres avancés) */
.spf-no-results-message{margin:0;padding:1.5em;text-align:center;color:inherit;opacity:0.85;grid-column:1/-1}

/* Animation cartes : tout reste dans le DOM, on utilise la grille pour “cacher” */
/* Cartes masquées : hors flux (position absolute), pas d’animation */
.spf-has-js-filters .spf-grid,.spf-has-advanced-filters .spf-grid{position:relative}
/* Spécificité élevée pour gagner sur tout .spf-card (ex. Custom CSS Royal) */
.spf-has-js-filters .spf-card.spf-card--hidden,.spf-has-advanced-filters .spf-card.spf-card--hidden{grid-row:unset !important;grid-column:unset !important;position:absolute !important;left:-9999px !important;top:0 !important;width:0 !important;height:0 !important;min-height:0 !important;max-height:0 !important;overflow:hidden !important;visibility:hidden !important;opacity:0 !important;pointer-events:none !important;margin:0 !important;padding:0 !important;border:none !important}
/* courte animation d’entrée */
.spf-meta-icon{display:inline-flex;align-items:center;gap:4px}