/* ================================================================
   IMAGES PORTFOLIO - Takali Digital
   Remplace les maquettes CSS par des images IA générées
   ================================================================ */

/* Portfolio cards - ajout d'images de fond */
.pf-visual {
  position: relative;
  overflow: hidden;
  min-height: 220px;
}

.pf-visual img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 0.5s ease;
}

.pf-card:hover .pf-visual img {
  transform: scale(1.05);
}

/* Masquer les maquettes CSS quand une image est présente */
.pf-visual:has(img) .pf-browser,
.pf-visual:has(img) .pf-mockup {
  display: none !important;
}

/* Fallback si :has() pas supporté */
@supports not selector(:has(img)) {
  .pf-visual img {
    z-index: 2;
  }
  .pf-visual .pf-browser,
  .pf-visual .pf-mockup {
    opacity: 0.1;
  }
}

/* ================================================================
   AVATARS ÉQUIPE - Images générées
   ================================================================ */

.team-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.team-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* ================================================================
   BLOG POSTS - Images thématiques
   ================================================================ */

.blog-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}

/* ================================================================
   HERO BACKGROUND OPTIONNEL
   ================================================================ */

.hero-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
  z-index: 0;
}

/* ================================================================
   ANIMATIONS
   ================================================================ */

@keyframes imageFadeIn {
  from { opacity: 0; transform: scale(1.1); }
  to { opacity: 1; transform: scale(1); }
}

.pf-visual img {
  animation: imageFadeIn 0.8s ease forwards;
}