/* ═══════════════════════════════════════════════════════════════
   Why – Portfolio Scroll : tablette/mobile = miniature exacte du desktop  v4.0.0
   Rollback : supprimer why-portfolio-scroll-responsive.php (+ .css/.js),
   ou restaurer les fichiers *.bak-2.0.0.
   ═══════════════════════════════════════════════════════════════

   Principe v3.0.0 (2026-10-05) : au lieu de recalculer une mise en page
   "mobile", on rejoue EXACTEMENT l'animation desktop (mêmes tailles en
   pixels : image centrale 0 → 580px, photos satellites à leur taille
   native 380px / 290px, mêmes positions en % du thème), puis on réduit
   visuellement tout le bloc d'un facteur --why-k = largeur d'écran / 1440
   (largeur de référence où le desktop a été mesuré). Résultat : une
   miniature proportionnelle du rendu desktop, à toutes les étapes du scroll.
   Le facteur est calculé et mis à jour par why-portfolio-scroll-responsive.js. */

/* v4.0.0 (2026-10-07) — hauteur de la section, à TOUTES les largeurs :
   réglable dans Elementor (Style > Espacement > "Espace sous les images",
   qui définit --why-ps-h = hauteur finale des images + espace choisi).
   Non réglé = 100vh, comme avant (le thème met 100vh, et "100%" sous 767px). */
.elementor-widget-tp-portfolio-scroll .tp-instagram-area {
  height: var(--why-ps-h, 100vh) !important;
}

@media (max-width: 1199.98px) {

  /* Le thème passe la section à "height:100%" sous 767px : on garde 100vh
     comme sur desktop (le pin GSAP en a besoin). Débordement horizontal
     coupé (les photos satellites touchent les bords, comme sur desktop) ;
     débordement vertical laissé visible, comme sur desktop. */
  .elementor-widget-tp-portfolio-scroll .tp-instagram-area {
    overflow-x: clip;
    overflow-y: visible;
  }

  /* Réaffiche les 2 photos satellites conservées sur desktop (inner-3 et
     inner-7) — Bootstrap "d-none d-xl-block" les masque sous 1200px. */
  .elementor-widget-tp-portfolio-scroll .tp-instagram-thumb-inner-3,
  .elementor-widget-tp-portfolio-scroll .tp-instagram-thumb-inner-7 {
    display: block !important;
  }

  /* Miniature : tout le bloc (image centrale + satellites) réduit d'un seul
     facteur, ancré en haut au centre (même point d'ancrage que desktop). */
  /* Le bloc garde sa largeur "desktop" (= largeur de l'image centrale,
     jusqu'à 580px) même si l'écran est plus étroit : sinon l'image
     centrale serait bridée à la largeur du téléphone AVANT la réduction.
     Centrage horizontal par left:50% + translateX(-50%), puis réduction. */
  .elementor-widget-tp-portfolio-scroll .tp-instagram-thumb-wrap {
    display: block;
    width: max-content;
    margin-left: 0;
    margin-right: 0;
    left: 50%;
    transform: translateX(-50%) scale(var(--why-k, 1));
    transform-origin: 50% 0;
  }
  .elementor-widget-tp-portfolio-scroll .tp-instagram-thumb img {
    max-width: none;
  }

  /* Bloc texte (vide sur ce site) : le thème le remet dans le flux sous
     767px, ce qui élargissait le bloc d'images et décalait le centrage.
     Sorti du flux comme sur desktop. */
  .elementor-widget-tp-portfolio-scroll .tp-instagram-content-wrap {
    position: absolute !important;
    margin: 0 !important;
  }
}