/* ═══════════════════════════════════════════════════════════════
   Why – Cartes Portfolio : apparition au scroll (tablette/mobile)  v1.1.0
   Pour revenir en arrière : supprimer why-portfolio-card-mobile-reveal.php
   + why-portfolio-card-mobile-reveal.js
   ═══════════════════════════════════════════════════════════════ */

/* Sur bureau (> 991px), le survol souris gère déjà l'apparition de la
   catégorie et du titre (règles .pm-project-masonary-item:hover ... déjà
   présentes dans liko-core.css) : on ne touche à rien au-dessus de ce
   breakpoint, identique au comportement d'origine.                        */
@media (max-width: 991px) {

  /* Catégorie (rectangle blanc) + nom du projet (rectangle coloré) :
     révélés quand la case franchit le milieu de l'écran au scroll, et
     masqués à nouveau une fois qu'elle l'a dépassé (en descendant), puis
     révélés à nouveau en remontant dessus — bidirectionnel (v1.1.0).
     La classe "why-pm-in-view" est ajoutée/retirée en JS via
     IntersectionObserver (why-portfolio-card-mobile-reveal.js). La
     transition (durée/délai) est déjà définie sur
     .pm-project-masonary-subtitle/-title dans liko-core.css
     (transition: all 0.3s), donc l'apparition ET la disparition sont
     animées automatiquement, exactement comme au survol sur bureau.       */
  .pm-project-masonary-item.why-pm-in-view .pm-project-masonary-subtitle,
  .pm-project-masonary-item.why-pm-in-view .pm-project-masonary-title {
    transform: translateX(0) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   v1.2.0 (2026-10-07) — repères [R1] et [R2]
   Sauvegarde de la v1.1.0 : why-portfolio-card-mobile-reveal.css.bak-2026-10-07
   ═══════════════════════════════════════════════════════════════ */

/* [R1] Rien ne doit jamais dépasser d'une case : les 2 blocs (catégorie +
   nom du projet) attendent cachés à GAUCHE de leur case (translateX(-101%))
   puis glissent à leur place. Ils ne sont masqués que par l'overflow:hidden
   de .pm-project-masonary-content — or Safari (iPad/iPhone) ne découpe pas
   toujours un élément animé en transform (calque GPU) à l'intérieur d'un
   parent overflow:hidden : pendant l'apparition, les blocs peuvent alors se
   dessiner par-dessus la case voisine. Idem pour la photo/vidéo qui zoome au
   survol (scale 1.1). Double sécurité, sans effet visible quand tout va bien :
   - la case et son bloc de contenu découpent avec clip-path (respecté par
     Safari même pour les calques GPU) ;
   - isolation:isolate garde tout ce que contient une case dans son propre
     plan d'empilement (une case ne peut plus passer au-dessus d'une autre). */
.pm-project-masonary-item {
  overflow: hidden;
  clip-path: inset(0);
  isolation: isolate;
}
.pm-project-masonary-item .pm-project-masonary-content,
.pm-project-masonary-item .fix {
  clip-path: inset(0);
}

/* [R2] Tablettes tactiles en paysage (iPad 1024px, 1180px, 1366px…) : au-dessus
   de 991px, seul le survol souris affichait les blocs — or un écran tactile n'a
   pas de survol, les titres restaient donc invisibles (sauf case tapée). On
   applique la même apparition au scroll que sous 991px à tout appareil SANS
   survol (écran tactile), quelle que soit sa largeur. Ordinateur inchangé. */
@media (hover: none) {
  .pm-project-masonary-item.why-pm-in-view .pm-project-masonary-subtitle,
  .pm-project-masonary-item.why-pm-in-view .pm-project-masonary-title {
    transform: translateX(0) !important;
  }
}