/* ============================================================
   INVprod — portfolio-rich.css  (COMPOSANTS RICHES DU PORTFOLIO)
   ------------------------------------------------------------
   RÔLE : mise en forme des blocs « riches » d'une fiche projet du
   portfolio PARTAGÉ (les projets qui proviennent de l'espace
   « Mon travail »). Chaque type de contenu a son composant :
     - galerie d'images en grille ;
     - comparatif avant / après ;
     - document PDF intégré ;
     - aperçu d'un site web (iframe) ;
     - liste de liens ;
     - points annotés (commentaires du projet) ;
     - chapitres vidéo (repères statiques, non cliquables) ;
     - vidéos locales intégrées.

   DÉPENDANCE : ce fichier n'est PAS autonome. Il réutilise les
   variables et classes définies dans style.css (via ses tranches
   01→04) — par ex. var(--gris-clair), var(--ligne), var(--ligne-forte),
   var(--gris-fonce), ainsi que la classe .portfolio-grid. Il doit donc
   être chargé APRÈS style.css.

   CHARTE PAOLA : fond crème, cartes blanches, texte foncé, bleu profond en
   accent, coins arrondis, ombres douces. (L'ancien commentaire annonçait ici
   la charte du site d'origine — noir/blanc, Montserrat, coins droits.)
   ============================================================ */

/* Petit texte descriptif introduisant une section de la fiche projet. */
.pf-section-desc { color: var(--gris-clair); margin-bottom: 18px; }

/* ---------- Galerie / carrousel rendus en grille ----------
   Grille « auto-fill » : le navigateur place autant de colonnes qu'il
   peut, chacune large d'au moins 260px et s'étirant jusqu'à 1 part égale
   (1fr). Le nombre de colonnes s'adapte donc tout seul à la largeur, sans
   @media.

   ATTENTION (correctif 2026-07-23) : `min(100%, 260px)` et non `260px` tout
   court. Cette feuille est chargée APRÈS style-04-responsive.css, elle écrase
   donc la règle « une seule colonne sous 600px » de ce dernier — la grille
   reste en mode auto sur téléphone. Sans le `min()`, une colonne de 260px de
   large est imposée même quand l'écran offre moins : la grille déborde et
   toute la page se met à défiler de gauche à droite. */
.projet-section .portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 14px;
}

/* ---------- Avant / Après ----------
   Deux images côte à côte (image 1 = avant, image 2 = après). */
.pf-beforeafter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) { .pf-beforeafter { grid-template-columns: 1fr; } }  /* mobile : l'une sous l'autre */

/* ---------- PDF ----------
   Document PDF affiché directement dans la page via une iframe. */
.pf-pdf { border: 1px solid var(--ligne); background: var(--gris-fonce); }
/* 70vh = 70 % de la hauteur d'écran, avec un plancher de 420px pour rester
   lisible sur petit écran. Fond gris-bleu clair de la charte en attendant le rendu du PDF. */
.pf-pdf iframe { width: 100%; height: 70vh; min-height: 420px; border: 0; display: block; background: var(--gris-fonce); }
.pf-pdf-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px; }  /* boutons (télécharger, ouvrir...) */

/* ---------- Aperçu de site web ----------
   Prévisualisation d'un site réalisé, affiché dans une iframe. */
.pf-website { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
/* var(--h, 650px) = hauteur pilotée depuis le HTML (attribut style) si elle
   est fournie ; sinon on retombe sur 650px par défaut. */
.pf-website iframe { width: 100%; height: var(--h, 650px); border: 1px solid var(--ligne); background: var(--gris-fonce); }

/* ---------- Liens ----------
   Rangée de liens/boutons qui passent à la ligne si l'espace manque. */
.pf-links { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Points annotés ----------
   Liste de remarques sur le projet, chacune signalée par un trait vertical
   à gauche (border-left) façon citation. */
.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; }  /* le titre du point, sur sa propre ligne */
.pf-point p { color: var(--gris-clair); }

/* ---------- Chapitres vidéo (repères statiques) ----------
   Simple liste des chapitres d'une vidéo, à titre indicatif (non cliquables).
   list-style:none + padding:0 = on retire les puces et le retrait par défaut. */
.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 ----------
   Vidéos hébergées sur le site (pas YouTube) affichées dans un cadre .work-media.
   object-fit:cover = la vidéo remplit le cadre sans se déformer (rognage si besoin). */
.projet-section .work-media video,
.work.featured .work-media video { width: 100%; height: 100%; display: block; object-fit: cover; background: var(--gris-fonce); }

/* ---------------------------------------------------------------------------
   LE CADRE ÉPOUSE L'IMAGE (correctif 2026-07-22)
   ---------------------------------------------------------------------------
   .work-media impose « aspect-ratio: 16/10 » à ses images : c'est le bon
   réglage pour les VIGNETTES de la page d'accueil, qui doivent toutes faire la
   même hauteur pour aligner la grille.

   Dans un ARTICLE, c'est l'inverse qu'on veut. Les illustrations du site sont
   en 16/9 (1279×720). Le cadre, lui, restait en 16/10 : plus haut que l'image.
   Résultat, deux défauts visibles à la fois — « object-fit: cover » rognait les
   côtés du dessin, et le cadre (contour foncé + fond) ne collait plus au média,
   ce qui saute aux yeux dès qu'on réduit l'image à la moitié de la page.

   Ici, le cadre prend donc les proportions RÉELLES du fichier : plus de rognage,
   et le contour reste collé à l'image quelle que soit la taille choisie.
   La règle est limitée au contexte article (.projet-section et .work.featured) :
   les vignettes alignées du reste du site ne bougent pas.
   ------------------------------------------------------------------------- */
.projet-section .work-media img,
.work.featured .work-media img { aspect-ratio: auto; height: auto; }

/* ---------------------------------------------------------------------------
   TAILLE D'AFFICHAGE DES MÉDIAS D'ARTICLE (correctif 2026-07-22)
   ---------------------------------------------------------------------------
   Avant, ces tailles étaient posées en PIXELS FIXES dans un style en ligne
   (760 / 540 / 360). Deux défauts qui se voyaient tout de suite :

   1. Les libellés promettent des proportions (¾, ½, ⅓) mais 540 px dans une
      colonne de 1200 px, ça fait 42 %, pas la moitié : l'image paraissait
      perdue au milieu de la page.
   2. Un style en ligne ne peut pas être adapté au format de l'écran. Sur
      téléphone, réduire une image n'a aucun sens — la colonne est déjà étroite.

   D'où des CLASSES, exprimées en pourcentage de la colonne de lecture, et qui
   repassent toutes en pleine largeur sur petit écran.
   ------------------------------------------------------------------------- */
.media-taille-grande,
.media-taille-moyenne,
.media-taille-petite { margin-left: auto; margin-right: auto; }
.media-taille-grande  { max-width: 78%; }
.media-taille-moyenne { max-width: 58%; }
.media-taille-petite  { max-width: 38%; }

/* Sous 700 px de large, une image réduite deviendrait illisible : pleine largeur. */
@media (max-width: 700px) {
  .media-taille-grande,
  .media-taille-moyenne,
  .media-taille-petite { max-width: 100%; }
}

/* Galeries : auto-FIT et non auto-fill. Avec auto-fill, le navigateur crée des
   colonnes vides quand il y a peu d'images — une galerie d'UNE image affichait
   donc une vignette minuscule à gauche d'une grande zone vide. auto-fit fait
   l'inverse : les colonnes inutilisées disparaissent et l'image occupe la place. */
.projet-section .portfolio-grid.media-grille-grande  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.projet-section .portfolio-grid.media-grille-moyenne { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.projet-section .portfolio-grid.media-grille-petite  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }

/* ============================================================================
   DURCISSEMENT MOBILE DES BLOCS RICHES  (correctif 2026-07-23)
   ----------------------------------------------------------------------------
   POURQUOI CES RÈGLES SONT ICI ET PAS DANS style-04-responsive.css ?

   Cette feuille est chargée par inc/portfolio-render.php, donc APRÈS les quatre
   tranches de style.css. Sur les pages qui l'utilisent (article d'actualité,
   fiche projet), c'est donc ELLE qui a le dernier mot, et pas 04-responsive.
   Les réglages mobiles de ces composants écrits dans 04 étaient purement et
   simplement annulés ici (mêmes sélecteurs, même spécificité, fichier plus
   tardif). On les redonne donc à l'endroit qui gagne.

   Si un jour ces blocs bougent, garder les deux endroits cohérents — ou mieux :
   charger portfolio-rich.css AVANT 04-responsive.
   ========================================================================== */
@media (max-width: 600px) {
  /* PDF intégré : hauteur calée sur l'écran du téléphone (le plancher de
     420px des grands écrans mangeait presque tout l'affichage). */
  .pf-pdf iframe { height: 58vh; min-height: 300px; }
  /* Aperçu de site : jamais plus de 68% de la hauteur d'écran. */
  .pf-website iframe { height: min(var(--h, 650px), 68vh); }
  /* Galerie d'images : une seule colonne, on ne fait pas défiler du regard. */
  .projet-section .portfolio-grid { grid-template-columns: 1fr; }
  /* Rangée de liens : boutons empilés et pleine largeur (cibles tactiles). */
  .pf-links { flex-direction: column; }
  .pf-links .btn { width: 100%; text-align: center; }
}