/* =========================================
   PAGE: PORTFOLIO
   SECTIONS:
   1) Section + Titre
   2) Vidéo responsive
   3) Filtres
   4) Grille + cartes
   5) Like / Share
   6) Responsive
   NOTE: Copié à l’identique depuis style.css
   ========================================= */

/* 1) Section + Titre */
.portfolio-page .portfolio-section{
  width:100%;
  padding:3rem 2rem;
  background:rgba(255,255,255,.9);
  text-align:center;
}

/* Le titre reprend exactement ton style actuel */
.portfolio-page .portfolio-title{
  text-align:center;
  width:100%;
  font-size:2rem;
  color:#b30000; /* rouge déjà utilisé */
  margin-bottom:1rem;
  font-family: 'Great Vibes', cursive; /* garder la cohérence artistique */
}

/* Portfolio : les boutons au-dessus de l'image/lien */
.portfolio-page .art-image { position: relative; z-index: 1; }

.portfolio-page .like-share { 
  position: relative; 
  z-index: 5;                /* au-dessus */
}

.portfolio-page .like-btn,
.portfolio-page .share-btn {
  position: relative;
  z-index: 6;                /* au-dessus du au-dessus */
}


/* 2) Vidéo responsive */
.portfolio-page .portfolio-video{
  max-width:700px;
  margin:0 auto 3rem auto;
  position:relative;
  padding-bottom:50.25%;
  height:0;
  overflow:hidden;
}
.portfolio-page .portfolio-video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  border:0;
}

/* 3) Filtres */
.portfolio-page .portfolio-filters{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem;
  margin:1.5rem auto;
}
.portfolio-page .filter-btn{
  flex:1 1 auto;
  min-width:80px;
}
@media (max-width:480px){
  .portfolio-page .filter-btn{ flex-basis:10%; }
}

/* 4) Grille + cartes */
.portfolio-page .portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  max-width:1200px;
  margin:2rem auto;
  padding:0 1rem;
}

.portfolio-page .portfolio-item{
  overflow:visible;
  border-radius:12px;
  box-shadow:0 3px 10px rgba(0,0,0,.1);
  transition:transform .3s ease;
  cursor:pointer;
  background:#fff;
  text-align:center;
  padding-bottom:1.2rem;
}

/* Ratio image réservé (évite les sauts) */
.portfolio-page .portfolio-item img{
  width:100%;
  height:auto;
  object-fit:cover;
  display:block;
  transition:transform .4s ease;
  border-radius:0 0 10px 10px;
  aspect-ratio: 4 / 3; /* identique à ton style */
}

.portfolio-page .portfolio-item:hover img{
  transform: scale(1.03);
}

.portfolio-page .art-title{
  font-size:1.2rem;
  font-weight:bold;
  color:#b30000;
  margin:.5rem 0;
}

/* 5) Like / Share */
.portfolio-page .like-share{
  margin-top:1rem;
  display:flex;
  justify-content:center;
  gap:1.2rem;
}
.portfolio-page .like-btn,
.portfolio-page .share-btn{
  padding:.5rem .8rem;
  border-radius:8px;
}
.portfolio-page .like-btn.liked{
  color:#b30000;
  font-weight:bold;
}
.portfolio-page .like-btn:active,
.portfolio-page .share-btn:active{
  transform:scale(.95);
}
.portfolio-page .like-btn:hover,
.portfolio-page .share-btn:hover{
  color:#b30000;
}

/* 6) Responsive */
@media (max-width:768px){
  .portfolio-page .portfolio-grid{ grid-template-columns:1fr; }
  .portfolio-page .portfolio-video{ padding-bottom:57%; }
}