/* Composants riches du portfolio PARTAGÉ (projets venant de « Mon travail »).
   S'appuie sur les variables et classes existantes de style.css. */

.pf-section-desc { color: var(--gris-clair); margin-bottom: 18px; }

/* Galerie / carrousel rendus en grille */
.projet-section .portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

/* Avant / Après */
.pf-beforeafter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) { .pf-beforeafter { grid-template-columns: 1fr; } }

/* PDF */
.pf-pdf { border: 1px solid var(--ligne); background: var(--gris-fonce); }
.pf-pdf iframe { width: 100%; height: 70vh; min-height: 420px; border: 0; display: block; background: #0d0d0d; }
.pf-pdf-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px; }

/* Aperçu de site web */
.pf-website { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pf-website iframe { width: 100%; height: var(--h, 650px); border: 1px solid var(--ligne); background: #0d0d0d; }

/* Liens */
.pf-links { display: flex; flex-wrap: wrap; gap: 10px; }

/* Points annotés */
.pf-points { display: grid; gap: 14px; margin-top: 18px; }
.pf-point { border-left: 2px solid var(--ligne-forte); padding-left: 14px; }
.pf-point strong { display: block; margin-bottom: 4px; }
.pf-point p { color: var(--gris-clair); }

/* Chapitres vidéo (repères statiques) */
.pf-chapters { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.pf-chapters li { padding: 10px 14px; border: 1px solid var(--ligne); }
.pf-chapters strong { color: var(--blanc); }

/* Vidéos locales intégrées */
.projet-section .work-media video,
.work.featured .work-media video { width: 100%; height: 100%; display: block; object-fit: cover; background: #000; }