/* Menu visible par défaut */
.works__layout-menu {
  transition: opacity .4s ease, transform .4s ease;
  /* facultatif : petit effet de “sur‑lui-même” */
  transform-origin: top center;
}

/* Classe qu’on ajoutera pour masquer en douceur */
.works__layout-menu.--hide {
  opacity: 0;
  transform: translateY(-10px);
  /* monte légèrement */
  pointer-events: none;
  /* bloque les clics pendant l’anim. */
}

/* Projet Slider mobile - Effet d'apparition du texte sur projet actif + scale*/
.swiper-slide-next>.project__link-wrapper>.project__infos-wrapper,
.swiper-slide-prev>.project__link-wrapper>.project__infos-wrapper {
  opacity: 0;
}

.swiper-slide-next>.project__link-wrapper>.project__img-wrapper>.project__slider-img,
.swiper-slide-next>.project__link-wrapper>.project__img-wrapper>.project__slider-img {
  padding-top: 3rem;
}


.w-tab-pane {
  position: relative !important;
  display: block !important;
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

.w-tab-pane.w--tab-active {
  visibility: visible;
  height: auto;
  overflow: visible;
}



/* ------------ */

.works__content-wrapper {
  opacity: 0;
  transition: opacity .5s ease;
}

.works__content-wrapper.is-visible {
  opacity: 1;
}

.works__thumb {
  transition: margin-left 0.6s ease-in-out;
}

.works__thumb:hover,
.works__thumb.is-active .works__thumb {
  margin-left: 1rem;
}

.works__thumb .works__thumb-title {
  transition: color 0.6s ease;
}

.is-active .works__thumb .works__thumb-title {
  color: #000000;
}


/* -------- */

.works-list__item .works__thumb {
  transition: all 0.6s ease;
}

.works__grid-item {
  transition: all 0.6s ease;
  transform: translateX(-25%);
  opacity: 0;
}

.tab_grid.show .works__grid-item {
  transform: translateX(0px);
  opacity: 1;
}



body:not(.fade-out) .tab_list.show .works-list__item .works__thumb {
  transform: translateX(0px);
  opacity: 1;
}

.tab_list .works__list-container {
  transform: translateX(-100px);
  opacity: 0;
}

.tab_list.show .works__list-container {
  transform: translateX(0px);
  opacity: 1;
}

.works__list-container {
  pointer-events: none;
  transition: all 0.6s ease;
}

.works-list__item.is-active.is-active .works__list-container {
  pointer-events: auto;
}

.works__layout-tabs-select {
  pointer-events: none;
  width: 49%;
}

/*
.works__layout-tabs-select.middle {
  width: 100%;
}


.works__layout-tabs-select.grid {
  right: auto;
  width: 51%;
  right:49%
}

.works__layout-tabs-select.middle-grid {
    width: 70% !important;
    right: 15%;
}
*/
.works__layout-tabs-select {


}


.works__layout-tabs-select.grid {
animation: grid-selected 0.3s forwards ease-in-out;
}

.works__layout-tabs-select.list {
animation: grid-selected 0.3s forwards reverse ease-in-out;
}



@keyframes grid-selected {
  0% {
      width: 49%;
      right: 0;
  }

  50% {
    width: 70%;
    right: 15%;
  }

  100% {
      width: 51%;
      right: 49%;
  }
}

.tab_list,
.tab_grid {
  position: absolute;
  pointer-events: none;
}

.tab_list.is-active,
.tab_grid.is-active {
  position: relative;
  pointer-events: auto;
}

.works__section {
  min-height: 100dvh;
}

.works__grid-item {
  transition-property: transform, opacity;
  transition-duration: 0.6s;
  transition-timing-function: ease-in-out;

}

.swiper__projects-slider-mobile .swiper-wrapper {
  opacity: 0;
  transition: all 0.6s ease;
}

.swiper__projects-slider-mobile.is-active .swiper-wrapper {
  opacity: 1;
}


.fade-out .works__section {
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.works__thumb {
  pointer-events: none;
}

.works__thumb-img-wrapper {
  pointer-events: auto;
}

.works-list__item .works__thumb {
  height: 80px;
  overflow: hidden;
  align-items: center;
  margin-top: .25rem;
  margin-bottom: .25rem;

}



.works-list__item.item-small .works__thumb {
  height: 0;
  overflow: hidden;
  margin: 0rem;

}

.fade-in-work .works-list__item.item-small .works__thumb {
  transition: margin-left 0.6s ease-in-out;
}

.works__thumb-title {
  opacity: .25;
  transition: all .4s ease-in-out !important;
}

.works__thumb.is-active .works__thumb-title {
  opacity: 1;
}

.fade-in-work .works__layout-menu {
  opacity: 0;
}

.fade-in .works__layout-menu {
  opacity: 1;
  transition: all .4s ease-in-out;
}