/* ═══════════════════════════════════════════════════════════════
   Why – Portfolio Filterable Slider  v1.1.0
   Style : reprend EXACTEMENT le hover masonry de la homepage
           (bloc crème catégorie + bloc rouge titre, Bricolage Grotesque 900)
   Ratio images : 16/9
   Pour revenir en arrière : supprimer why-portfolio-slider.php
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Swiper wrapper ─────────────────────────────────────── */
/* Le JS retire la classe .grid du conteneur (anti-conflit Isotope) :
   ne JAMAIS cibler ".row.grid" ici, le sélecteur ne matcherait plus. */
/* Peek symétrique gauche/droite : le conteneur Swiper est rétréci par une
   marge ("peek") de chaque côté avec overflow:visible, pendant que l'ancêtre
   .e-con (cf. règle suivante) clippe au bord réel du cadre. Le slide voisin
   dépasse alors naturellement dans la zone de peek — contrairement à
   slidesOffsetBefore/After qui ne fait qu'ajouter du vide (testé, ne marche
   pas pour révéler le slide d'à côté). */
.elementor-widget-tp-portfolio-filterable .row.why-slider-init {
  overflow: visible;
  margin-left: 60px;
  margin-right: 60px;
  width: auto;
}

@media (max-width: 1023px) {
  .elementor-widget-tp-portfolio-filterable .row.why-slider-init {
    margin-left: 40px;
    margin-right: 40px;
  }
}

@media (max-width: 767px) {
  .elementor-widget-tp-portfolio-filterable .row.why-slider-init {
    margin-left: 20px;
    margin-right: 20px;
  }
}

/* Slider bord à bord : neutralise le padding du conteneur Elementor (e-con)
   qui enveloppe directement ce widget, pour qu'il n'y ait aucune marge
   gauche/droite, ET clippe au bord réel du cadre (overflow:hidden) pour que
   seul le peek défini ci-dessus soit visible des slides voisins. */
.e-con:has(> .elementor-widget-tp-portfolio-filterable) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden;
}

.elementor-widget-tp-portfolio-filterable .row.why-slider-init .col.grid-item {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
  flex: none !important; /* override Bootstrap .col (flex: 1 0 0%) */
}

/* Bug corrigé (2026-08-21) : dépassement (peek) gauche plus large que le
   dépassement droit, sur TOUS les devices.
   Cause : le conteneur (.row.why-slider-init) garde la classe Bootstrap
   ".row" (nécessaire pour que les sélecteurs CSS ci-dessus continuent de
   matcher). Bootstrap applique sa règle générique ".row > *" à TOUT enfant
   direct d'un ".row", quel qu'il soit — y compris ".swiper-wrapper" (créé
   par le JS, qui n'a pourtant jamais demandé ce style). Ça lui ajoute un
   "gutter" padding-left/right de 12px (--bs-gutter-x: 1.5rem / 2, valeur
   Bootstrap par défaut). Le padding-left décale tout le train de slides de
   12px vers la droite ; le padding-right, lui, n'a AUCUN effet compensateur
   car les slides ont flex:none (largeur fixe, ne "rétrécissent" pas pour
   respecter ce padding) — elles débordent simplement à droite. Résultat :
   décalage NET de 12px vers la droite, donc peek gauche visiblement plus
   large que le peek droit (vérifié géométriquement via getBoundingClientRect
   à 1440px : slide actif à x=72 au lieu de x=60 attendu, peek gauche 52px
   vs peek droit 28px avant fix ; 40px/40px identiques après fix). Comme ce
   padding est fixe (12px, pas un %), le bug est présent à TOUTE largeur
   d'écran, proportionnellement pire sur mobile où la zone de peek totale
   est plus petite (20px). */
.elementor-widget-tp-portfolio-filterable .row.why-slider-init > .swiper-wrapper {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── 2. Masquer le filtre ──────────────────────────────────── */
.elementor-widget-tp-portfolio-filterable .tp-project-5-2-filter {
  display: none !important;
}

/* ── 3. Image : ratio 16/9 + object-fit cover ──────────────── */
.elementor-widget-tp-portfolio-filterable .tp-project-5-2-thumb {
  margin-bottom: 0 !important;
  position: relative;
  overflow: hidden;
}

/* <a> : overflow visible pour ne pas interférer avec le clip du contenu */
.elementor-widget-tp-portfolio-filterable .tp-project-5-2-thumb > a {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: visible;
}

/* Le <span> wrappant l'image : overflow:hidden pour cliper le zoom */
.elementor-widget-tp-portfolio-filterable .tp-project-5-2-thumb > a > span {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.elementor-widget-tp-portfolio-filterable .tp-project-5-2-thumb .anim-zoomin-wrap,
.elementor-widget-tp-portfolio-filterable .tp-project-5-2-thumb > a > span > div {
  width: 100%;
  height: 100%;
}

/* Cible TOUTE image dans la miniature (pas seulement .anim-zoomin, classe
   retirée par le JS) : sinon le ratio/cover casse selon le ratio natif de
   l'image mise en avant du projet (ex: Reghalal en 1920×1012 ≠ 16/9).
   Vidéo mise en avant (cf. why-featured-video.php) : même règle de
   taille/cover que l'image quand un projet a une vidéo à la place. */
.elementor-widget-tp-portfolio-filterable .tp-project-5-2-thumb img,
.elementor-widget-tp-portfolio-filterable .tp-project-5-2-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.9s ease;
}

.elementor-widget-tp-portfolio-filterable .tp-project-5-2-thumb:hover img,
.elementor-widget-tp-portfolio-filterable .tp-project-5-2-thumb:hover video {
  transform: scale(1.1);
}

/* ── 4. Masquer le div catégorie original (texte récupéré par JS) */
.elementor-widget-tp-portfolio-filterable .tp-project-5-2-category {
  display: none;
}

/* ── 5. Content : bord gauche + centré verticalement ────────── */
/*      top:50% + translateY(-50%) évite les positions sub-pixel */
/*      qui causent le chevauchement 1px entre les deux blocs    */
.elementor-widget-tp-portfolio-filterable .tp-project-5-2-content {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  right: auto;
  bottom: auto;
  padding: 0;
  background: transparent;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  max-width: 85%;
  overflow: visible;
  pointer-events: none;
}

/* ── 6. Bloc catégorie (haut) — fond crème, texte noir ──────── */
/*      Le texte de la catégorie est injecté ici par le JS      */
.elementor-widget-tp-portfolio-filterable .tp-project-5-2-meta {
  display: inline-block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  color: rgb(17, 17, 17);
  background-color: rgb(249, 247, 240);
  padding: 12px 20px;
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.3s ease 50ms, transform 0.3s ease 50ms;
  margin-bottom: 0;
  white-space: nowrap;
}

/* ── 7. Bloc titre (bas) — fond rouge, texte crème ──────────── */
.elementor-widget-tp-portfolio-filterable .tp-project-5-2-title-sm {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: normal;
  color: rgb(249, 247, 240);
  background-color: rgb(242, 17, 55);
  padding: 20px;
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.3s ease 0ms, transform 0.3s ease 0ms;
  margin-bottom: 0;
  margin-top: 0;
}

/* ── 8. Hover : les deux blocs glissent + apparaissent ──────── */
.elementor-widget-tp-portfolio-filterable .tp-project-5-2-thumb:hover .tp-project-5-2-meta,
.elementor-widget-tp-portfolio-filterable .tp-project-5-2-thumb:hover .tp-project-5-2-title-sm {
  opacity: 1;
  transform: translateX(0);
}

/* ── 9. Tablette/mobile : blocs directement visibles, pas de hover ──
   Même principe que why-portfolio-card-mobile-reveal (widget Portfolio
   Card) : sur un écran tactile, ":hover" ne se déclenche pas normalement
   (ou reste "collé" après un tap, cf. mémoire "zoom photo qui se
   déclenchait au tap" sur why-team-slider-loop) — le contenu resterait
   caché en permanence. Ici, contrairement au widget Portfolio Card (grille
   verticale, révélée au scroll), ce widget est un carrousel horizontal en
   lecture automatique : dès qu'une case est active, elle est déjà "à
   l'écran" — donc on affiche directement les 2 blocs en permanence sous ce
   breakpoint plutôt que de tenter un déclenchement au scroll (qui n'aurait
   pas de sens pour un défilement horizontal). Même seuil (991px) que
   why-portfolio-card-mobile-reveal.css pour rester cohérent avec le reste
   du site. Desktop (> 991px) inchangé : hover souris toujours requis. */
/* [1.2.0] Écrans tactiles / tablette / mobile : les 2 blocs n'apparaissent
   QUE sur les cases centrales (2 cases pleines à partir de 768px, 1 seule
   en dessous), jamais sur les cases qui dépassent sur les bords. Ils
   apparaissent une fois la case arrivée au centre (léger délai). */
@media (max-width: 991px), (hover: none) {
  .elementor-widget-tp-portfolio-filterable .why-slider-init .tp-project-5-2-meta,
  .elementor-widget-tp-portfolio-filterable .why-slider-init .tp-project-5-2-title-sm {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }
  .elementor-widget-tp-portfolio-filterable .why-slider-init .swiper-slide-active .tp-project-5-2-meta,
  .elementor-widget-tp-portfolio-filterable .why-slider-init .swiper-slide-active .tp-project-5-2-title-sm {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.45s;
  }
}
@media (min-width: 768px) and (max-width: 991px), (min-width: 768px) and (hover: none) {
  .elementor-widget-tp-portfolio-filterable .why-slider-init .swiper-slide-next .tp-project-5-2-meta,
  .elementor-widget-tp-portfolio-filterable .why-slider-init .swiper-slide-next .tp-project-5-2-title-sm {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.45s;
  }
}

/* [1.3.0] Drag fluide + boucle sans clignotement */
.elementor-widget-tp-portfolio-filterable .why-slider-init > .swiper-wrapper {
  will-change: transform;
}
.elementor-widget-tp-portfolio-filterable .why-slider-init.why-dragging,
.elementor-widget-tp-portfolio-filterable .why-slider-init.why-dragging * {
  cursor: grabbing !important;
}
.elementor-widget-tp-portfolio-filterable .why-slider-init.why-dragging a {
  pointer-events: none; /* pas de clic involontaire / survol pendant le drag */
}
.elementor-widget-tp-portfolio-filterable .why-slider-init.why-no-trans * {
  transition: none !important;
}
.elementor-widget-tp-portfolio-filterable .why-slider-init img,
.elementor-widget-tp-portfolio-filterable .why-slider-init video {
  -webkit-user-drag: none;
  user-select: none;
}

/* [PS6] 1.3.1 — jamais de hauteur fixe héritée de la grille Isotope du thème */
.elementor-widget-tp-portfolio-filterable .row.why-slider-init {
  height: auto !important;
}