/* ================================
   FFF – VIDEO GRID / VIDEO CARD
   ================================ */

/* Grille des vidéos */
.fff-video-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.75rem;
  margin:0;
  padding:0;
}

/* ≥ 768px : deux colonnes */
@media (min-width:768px){
  .fff-video-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

/* ≥ 1200px : trois colonnes */
@media (min-width:1200px){
  .fff-video-grid{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
}

/* Carte vidéo */
.fff-video-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:#ffffff;
  border:1px solid #e3e7f5;
  border-radius:4px;
  box-shadow:0 12px 32px rgba(15,23,42,.08);
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

/* Hover carte */
.fff-video-card:hover{
  transform:translateY(-2px);
  border-color:#4267b2;
  box-shadow:0 16px 40px rgba(15,23,42,.12);
}

/* Vignette vidéo */
.fff-video-thumb{
  position:relative;
  overflow:hidden;
  background:#000;
  /* même ratio que YouTube */
  aspect-ratio:16 / 9;
}

.fff-video-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Bouton Play, parfaitement centré */
.fff-video-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:72px;
  height:72px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.85);
  color:#ffffff;
  font-size:2.2rem;
  line-height:1;
  box-shadow:0 10px 25px rgba(15,23,42,.45);
  pointer-events:none;
}

/* Corps de la carte */
.fff-video-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  padding:1.1rem 1.4rem 1.2rem; /* moins d’air vertical */
}

/* Titre */
.fff-video-title{
  margin:0 0 .45rem;
  font-size:1.05rem;
  font-weight:700;
  color:#111827;
}

/* Texte */
.fff-video-text{
  margin:0 0 .65rem;
  font-size:.93rem;
  line-height:1.7;
  color:#4b5563;
  text-align:justify;
}

/* CTA */
.fff-video-cta{
  margin-top:.4rem;
  font-size:.85rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#4267b2;
  border-bottom:1px solid rgba(66,103,178,.25);
  align-self:flex-start;
}

.fff-video-card:hover .fff-video-cta{
  border-bottom-color:#4267b2;
}

/* ================================
   Responsive
   ================================ */

@media (max-width:767px){
  .fff-video-body{
    padding:.95rem 1rem 1rem;
  }
  .fff-video-title{
    font-size:1rem;
  }
  .fff-video-text{
    font-size:.9rem;
  }
  .fff-video-play{
    width:60px;
    height:60px;
    font-size:1.8rem;
  }
}