/* ------------------------------- marquee scroll direction ------------------------------- */

/* Optional: Rotating arrow left/right based on Scroll Direction */

.marquee__advanced__arrow-svg,
[data-marquee-direction="right"][data-marquee-status="inverted"]
  .marquee__advanced__arrow-svg {
  transition: 0.5s cubic-bezier(0.625, 0.05, 0, 1);
  transform: rotate(-180deg);
}

[data-marquee-status="inverted"] .marquee__advanced__arrow-svg,
[data-marquee-direction="right"][data-marquee-status="normal"]
  .marquee__advanced__arrow-svg {
  transform: rotate(-359.999deg);
}

/* ------------------------------- slot item button: faire-don ------------------------------- */

[data-wf--slot-item-button--variant="faire-don"] .btn--icon-wrapper {
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  transform-origin: center center;
}

[data-wf--slot-item-button--variant="faire-don"] .text-block-4 {
  transition: background-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
  [data-wf--slot-item-button--variant="faire-don"]:hover .text-block-4 {
    background-color: #022940;
    color: #fff;
  }

  [data-wf--slot-item-button--variant="faire-don"]:hover .btn--icon-wrapper {
    transform: rotate(45deg);
    background-color: #022940;
    color: #fff;
  }
}

/* ------------------------------- btn--new (icon hover) ------------------------------- */

.btn--new .btn--icon-wrapper {
  transition: all 0.2s ease;
  transform-origin: center center;
}

@media (hover: hover) {
  .btn--new:hover .btn--icon-wrapper {
    transform: rotate(45deg);
  }
}

/* ------------------------------- result item hover ------------------------------- */
@media (min-width: 992px) {
  .result--item .button {
    transition: transform 0.2s ease;
    transform-origin: center center;
  }

  .result--item .static--cercle {
    opacity: 1;
    transform: scale(0.9);
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform-origin: center center;
  }

  .result--item .static--cercle div {
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform-origin: center center;
  }

  @media (hover: hover) {
    .result--item:hover .static--cercle div {
      opacity: 1;
    }

    .result--item:hover .button {
      transform: rotate(45deg);
    }

    .result--item:hover .static--cercle {
      opacity: 1;
      transform: scale(1);
    }
  }
}

/* Mobile: initial state for scroll-in animation (script.js: initStaticCercleMobileReveal) */
@media (max-width: 991px) and (prefers-reduced-motion: no-preference) {
  .result--item .static--cercle {
    transform-origin: center center;
    transform: scale(0.9);
  }

  .result--item .static--cercle > div {
    opacity: 0;
  }
}

/* ------------------------------- navbar dropdown (desktop hover) ------------------------------- */
/* List stays display:flex; closed state uses max-height:0 (height 0→content animates via max-height). */

@media (min-width: 992px) {
  /* Parent only wraps in-flow trigger height; abs. list sits below — gap breaks :hover.
     Bridge keeps pointer in the dropdown while moving trigger → list. */
  .navbar--dropdown {
    position: relative;
  }

  .navbar--dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 1.25rem;
    z-index: 1;
    pointer-events: none;
  }

  .navbar--dropdown:focus-within::after {
    pointer-events: auto;
  }

  @media (hover: hover) {
    .navbar--dropdown:hover::after {
      pointer-events: auto;
    }
  }

  .navbar--dropdown .navbar--dropdown-list {
    display: flex;
    flex-direction: column;
    z-index: 2;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: max-height 0.35s ease, opacity 0.25s ease, visibility 0.25s ease;
  }

  .navbar--dropdown:focus-within .navbar--dropdown-list {
    max-height: min(100vh, 1000px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  @media (hover: hover) {
    .navbar--dropdown:hover .navbar--dropdown-list {
      max-height: min(100vh, 1000px);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
  }

  .navbar--dropdown.is-clickout .navbar--dropdown-list {
    max-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .navbar--dropdown .nav--drop-arrow {
    transition: transform 0.25s ease;
    transform-origin: center center;
  }

  .navbar--dropdown:focus-within .nav--drop-arrow {
    transform: rotate(180deg);
  }

  @media (hover: hover) {
    .navbar--dropdown:hover .nav--drop-arrow {
      transform: rotate(180deg);
    }
  }

  .navbar--dropdown.is-clickout .nav--drop-arrow {
    transform: rotate(0deg) !important;
  }
}

/* ------------------------------- can--item (cangolf hover) ------------------------------- */

.can--item .cangolf--img {
  transition: transform 0.2s ease;
  transform: translateY(0);
}

.can--item .cangolf--hover {
  opacity: 0;
  transition: opacity 0.2s ease;
}

@media (hover: hover) {
  .can--item:hover .cangolf--img {
    transform: translateY(-2rem);
  }

  .can--item:hover .cangolf--hover {
    opacity: 0.2;
  }
}

/* ------------------------------- filter / tabs: .rod--filter (same rod behavior as CAN slider bullets) ------------------------------- */

.filter.is--active {
  color: black;
}

/* Track; inner fill is ::before so existing markup can stay a single .rod--filter node */
.rod--filter {
  display: block;
  flex-shrink: 0;
  align-self: flex-start;
  width: 1.25rem;
  max-width: 1.25rem;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  box-sizing: border-box;
  background: transparent;
}

.rod--filter::before {
  content: "";
  display: block;
  width: 0;
  min-width: 0;
  height: 100%;
  border-radius: 999px;
  background-color: #ef7906;
  transition: width 0.3s ease;
}

.filter:focus-within .rod--filter::before,
.filter.is--active .rod--filter::before,
.tab--trigger:focus-within .rod--filter::before,
.tab--trigger.w--current .rod--filter::before,
.tab--trigger[aria-selected="true"] .rod--filter::before {
  width: 1.25rem;
}

@media (hover: hover) {
  .filter:hover .rod--filter::before,
  .tab--trigger:hover .rod--filter::before {
    width: 1.25rem;
  }
}

/* Standalone .tab--rod (e.g. under .project--tab); CAN swiper uses .tab--rod-wrap > .tab--rod instead */
.project--tab .tab--rod {
  display: block;
  flex-shrink: 0;
  align-self: flex-start;
  width: 1.25rem;
  max-width: 1.25rem;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  box-sizing: border-box;
  background: transparent;
}

.project--tab .tab--rod::before {
  content: "";
  display: block;
  width: 0;
  min-width: 0;
  height: 100%;
  border-radius: 999px;
  background-color: #ef7906;
  transition: width 0.3s ease;
}

.project--tab:focus-visible .tab--rod::before,
.project--tab:focus-within .tab--rod::before {
  width: 1.25rem;
}

@media (hover: hover) {
  .project--tab:hover .tab--rod::before {
    width: 1.25rem;
  }
}

/* ------------------------------- soirée slider (Swiper thumbnail pagination) ------------------------------- */

.swiper.is--soiree-slider .swiper--pagination {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: left;
  align-items: left;
  margin-top: 1rem;
}

.swiper.is--soiree-slider .swiper-pagination-bullet--thumb {
  width: 3.625rem;
  height: 2rem;
  margin: 0 !important;
  border-radius: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, scale 0.2s ease;
  cursor: pointer;
  background: transparent;
}

.swiper.is--soiree-slider .swiper-pagination-bullet--thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.swiper.is--soiree-slider
  .swiper-pagination-bullet-active.swiper-pagination-bullet--thumb {
  opacity: 1;
}

.swiper.is--soiree-slider
  .swiper-pagination-bullet-active.swiper-pagination-bullet--thumb {
  scale: 1.2;
}

/* ------------------------------- scientific slider (Swiper dot pagination) ------------------------------- */
/* Pagination can live above the swiper (.container--1416 > .swiper--pagination) or inside .swiper */

.section.is--heroscientific .swiper--pagination,
.swiper.is--scientific-slider .swiper--pagination {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.section.is--heroscientific .swiper--pagination {
  margin-top: 0;
  margin-bottom: 1rem;
}

.swiper.is--scientific-slider .swiper--pagination {
  margin-top: 1rem;
}

.section.is--heroscientific .swiper--pagination .swiper-pagination-bullet,
.swiper.is--scientific-slider .swiper--pagination .swiper-pagination-bullet {
  width: 0.75rem;
  height: 0.75rem;
  margin: 0 !important;
  background: #a9805e;
  opacity: 1;
  transition: width 0.25s ease;
  border-radius: 9999px;
}

.section.is--heroscientific
  .swiper--pagination
  .swiper-pagination-bullet-active,
.swiper.is--scientific-slider
  .swiper--pagination
  .swiper-pagination-bullet-active {
  width: 4rem;
  height: 0.75rem;
  background: #a9805e;
  opacity: 1;
}

.is--scientific-slider .swiper-slide .swiper--gradient {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.is--scientific-slider .swiper-slide .heading--106 {
  opacity: 0;
  transform: translateY(1rem);
  transition: all 0.2s ease;
}

.is--scientific-slider .swiper-slide.swiper-slide-active .swiper--gradient {
  opacity: 0;
}

.is--scientific-slider .swiper-slide.swiper-slide-active .heading--106 {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------- initiatives: hero scientific slider = tabs for topic sliders ------------------------------- */

.section.is--scientific-topics
  .container--1416.is--slider:not(.is--initiative-tab-active) {
  display: none !important;
}

/* ------------------------------- CAN slider (Swiper: h2 text as pagination bullets) ------------------------------- */

.container--1416.is--slider > .swiper--pagination {
  margin-top: 0;
  margin-bottom: 1rem;
}

.swiper.is--can-slider .swiper--pagination {
  margin-top: 1rem;
}

.container--1416.is--slider
  .swiper--pagination
  .swiper-pagination-bullet.swiper-pagination-bullet--label,
.swiper.is--can-slider
  .swiper--pagination
  .swiper-pagination-bullet.swiper-pagination-bullet--label {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.25rem 0;
  background: transparent !important;
  border-radius: 0;
  opacity: 0.3;
  transition: opacity 0.2s ease;
  cursor: pointer;
  line-height: 1.2;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  pointer-events: auto;
}

@media (hover: hover) {
  .container--1416.is--slider
    .swiper--pagination
    .swiper-pagination-bullet.swiper-pagination-bullet--label:hover,
  .swiper.is--can-slider
    .swiper--pagination
    .swiper-pagination-bullet.swiper-pagination-bullet--label:hover {
    opacity: 1;
  }
}

.swiper.is--can-slider .swiper-pagination-bullet--label .tab--label,
.container--1416.is--slider .swiper-pagination-bullet--label .tab--label {
  display: block;
}

/* Rod: 0 → full track. Use width: 0 → 1.25rem (not 0→100%): percentage end values often don’t interpolate. */
.swiper.is--can-slider .swiper-pagination-bullet--label .tab--rod-wrap,
.container--1416.is--slider .swiper-pagination-bullet--label .tab--rod-wrap {
  display: block;
  flex-shrink: 0;
  align-self: flex-start;
  width: 1.25rem;
  max-width: 1.25rem;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  box-sizing: border-box;
}

.swiper.is--can-slider .swiper-pagination-bullet--label .tab--rod,
.container--1416.is--slider .swiper-pagination-bullet--label .tab--rod {
  display: block;
  box-sizing: border-box;
  height: 100%;
  width: 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: #ef7906;
  transition: width 0.3s ease;
}

.swiper.is--can-slider
  .swiper-pagination-bullet-active.swiper-pagination-bullet--label
  .tab--rod,
.container--1416.is--slider
  .swiper-pagination-bullet-active.swiper-pagination-bullet--label
  .tab--rod {
  width: 1.25rem;
}

@media (hover: hover) {
  .swiper.is--can-slider
    .swiper-pagination-bullet.swiper-pagination-bullet--label:hover
    .tab--rod,
  .container--1416.is--slider
    .swiper-pagination-bullet.swiper-pagination-bullet--label:hover
    .tab--rod {
    width: 1.25rem;
  }
}

.container--1416.is--slider
  .swiper--pagination
  .swiper-pagination-bullet-active.swiper-pagination-bullet--label,
.swiper.is--can-slider
  .swiper--pagination
  .swiper-pagination-bullet-active.swiper-pagination-bullet--label {
  opacity: 1;
  background: transparent !important;
}

.swiper.is--can-slider .swiper-slide {
  opacity: 0.3;
  transition: opacity 0.2s ease;
}

.swiper.is--can-slider .swiper-slide-active {
  opacity: 1;
}

.swiper.is--can-slider .swiper-slide .tag--current {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.swiper.is--can-slider .swiper-slide-active .tag--current {
  opacity: 1;
}

/* ------------------------------- team grid: mobile accordion (<992px click; hover on desktop in script.js) ------------------------------- */

@media (max-width: 991px) {
  .team--item {
    cursor: pointer;
  }

  .team--item .team--content {
    cursor: auto;
  }

  .swipper--arrow:hover,
  .swiper--arrow:hover {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ------------------------------- touch: neutralize Webflow / external :hover (merge kept here; link style.css after Webflow) ------------------------------- */

@media (hover: none) {
  /* Exclude .fondation--item: GSAP scroll transform must not be cleared on tap (sticky :hover on touch). */
  a:hover:not(.fondation--item),
  button:hover,
  [role="button"]:hover,
  .w-button:hover,
  .w-inline-block:hover:not(.fondation--item),
  .w-nav-link:hover,
  .w-dropdown-toggle:hover,
  .w-tab-link:hover,
  .w-slider-arrow:hover,
  .w-slider-nav:hover,
  .w-pagination:hover,
  input[type="submit"]:hover,
  input[type="button"]:hover,
  label:hover,
  select:hover {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}