/* =========================================================

   SECTION PARTENAIRES

   --ades-partners-bg est déclarée par défaut dans style.css :root.

   Le PHP du widget (couleur_fond) la surcharge en inline sur

   .ades-partners quand l'utilisateur choisit une couleur.

========================================================= */



.ades-partners {

  --ades-partner-card-width: 210px;

  --ades-partner-card-height: 125px;

  --ades-partner-logo-width: 165px;

  --ades-partner-logo-height: 85px;



  position: relative;

  isolation: isolate;



  width: 100vw;

  margin-inline: calc(50% - 50vw);



  padding: clamp(55px, 6vw, 200px) 0;



  overflow: hidden;

  color: var(--color-primaire);

}



.ades-partners::before {

  content: "";



  position: absolute;

  z-index: -1;



  top: 50%;

  left: clamp(0100px, -8vw, -80px);



  width: clamp(260px, 22.5vw, 420px);

  aspect-ratio: 1;



background-image: url("../../../../uploads/2026/07/logo-ades-green-clair.svg");
  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;



  transform: translateY(-50%) rotate(8deg);



  pointer-events: none;

  user-select: none;

}



.ades-partners *,

.ades-partners *::before,

.ades-partners *::after {

  box-sizing: border-box;

}



.ades-partners__inner {

  width: min(100% - 48px, 1380px);

  margin-inline: auto;

}



/* =========================================================

   TITRE

========================================================= */



.ades-partners__title {

  margin: 0 0 28px;

  color: var(--color-primaire);

  font-size: clamp(1.5rem, 2.8vw, 2.8rem);

  font-weight: 900;

  line-height: 1.2;

  text-align: center;

  margin-bottom: 50px;

}



/* =========================================================

   LIGNE DES LOGOS

========================================================= */



/* Jusqu’à 5 logos : ligne statique centrée */



.ades-partners__static .ades-partners__list {

  display: flex;

  align-items: stretch;

  justify-content: center;

  flex-wrap: nowrap;

  gap: clamp(14px, 1.6vw, 24px);

}



/* À partir de 6 logos : slider */



.ades-partners__slider {

  position: relative;

  padding-inline: 64px;

}



.ades-partners__slider .splide__track {

  overflow: hidden;

}



.ades-partners__slider .splide__list {

  align-items: stretch;

}



.ades-partners__slider .splide__slide {

  display: flex;

  justify-content: center;

}



.ades-partners__slider .ades-partners__card {

  width: 100%;

  max-width: var(--ades-partner-card-width);

}



/*

 * Flèches : Splide les génère lui-même (arrows: true côté JS, comme pour

 * Hero) — même style visuel que le carrousel Hero pour rester cohérent

 * partout sur le site. Le SVG interne de Splide s'inverse tout seul en

 * RTL selon `direction`, pas besoin de mirroring CSS manuel ici.

 */

.ades-partners__slider .splide__arrows {

  pointer-events: none;



  position: absolute;

  inset: 0;



  display: flex;

  align-items: center;

  justify-content: space-between;

}



.ades-partners__slider .splide__arrow {

  pointer-events: auto;



  position: static !important;

  transform: none !important;



  width: 36px;

  height: 36px;



  display: inline-flex;

  align-items: center;

  justify-content: center;



  border: 0;

  border-radius: 50%;



  background: var(--color-blanc);

  opacity: 1;



  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);



  cursor: pointer;

}



.ades-partners__slider .splide__arrow svg {

  width: 16px;

  height: 16px;

  fill: var(--color-primaire);

}



/* Même correctif que Hero : Splide dessine le même chevron pour les

   deux flèches, il faut retourner celle de "précédent" nous-mêmes. */

.ades-partners__slider .splide__arrow--prev svg {

  transform: scaleX(-1);

}



.ades-partners__slider .splide__arrow:disabled {

  opacity: 0.35;

  cursor: default;

}



/* =========================================================

   CARTE

========================================================= */



.ades-partners__card {

  flex: 0 0 var(--ades-partner-card-width);



  width: var(--ades-partner-card-width);

  height: var(--ades-partner-card-height);



  overflow: hidden;



  background: var(--color-blanc);



  border: 1px solid rgba(var(--color-primaire-rgb), 0.14);

  border-radius: 16px;



  box-shadow: 0 10px 26px rgba(var(--color-primaire-rgb), 0.06);



  opacity: 1;

  transform: translateY(0);



  transition:

    transform 0.28s ease,

    box-shadow 0.28s ease,

    border-color 0.28s ease;

}



.ades-partners__card:hover,

.ades-partners__card:focus-within {

  transform: translateY(-4px);



  border-color: rgba(var(--color-primaire-rgb), 0.3);



  box-shadow: 0 18px 38px rgba(var(--color-primaire-rgb), 0.11);

}



/* =========================================================

   LIEN ET LOGO

========================================================= */



.ades-partners__link {

  width: 100%;

  height: 100%;



  display: flex;

  align-items: center;

  justify-content: center;



  padding: 18px;



  color: inherit;

  text-decoration: none;

}



.ades-partners__link img {

  display: block;



  width: auto;

  height: auto;



  max-width: min(100%, var(--ades-partner-logo-width));

  max-height: var(--ades-partner-logo-height);



  object-fit: contain;

  object-position: center;



  transition: transform 0.3s ease;

}



.ades-partners__card:hover .ades-partners__link img,

.ades-partners__card:focus-within .ades-partners__link img {

  transform: scale(1.035);

}



.ades-partners__link:focus-visible {

  outline: 3px solid var(--color-secondaire);

  outline-offset: -5px;

  border-radius: 14px;

}



/* =========================================================

   ANIMATION D’APPARITION

========================================================= */



.ades-partners__card[data-ades-reveal="true"] {

  opacity: 0;

  transform: translateY(18px);

}



.ades-partners__card[data-ades-reveal="true"].is-visible {

  opacity: 1;

  transform: translateY(0);



  transition:

    opacity 0.5s ease,

    transform 0.5s ease,

    box-shadow 0.28s ease,

    border-color 0.28s ease;

}



/* =========================================================

   TABLETTE ET MOBILE

========================================================= */



@media (max-width: 1100px) {

  .ades-partners {

    overflow: visible;

  }



  .ades-partners__static .ades-partners__list {

    justify-content: flex-start;



    overflow-x: auto;

    overflow-y: hidden;



    padding: 6px 4px 14px;



    scroll-snap-type: x proximity;

    scrollbar-width: thin;

    scrollbar-color: rgba(var(--color-primaire-rgb), 0.28) transparent;

  }



  .ades-partners__static .ades-partners__card {

    scroll-snap-align: center;

  }



  .ades-partners__static .ades-partners__list::-webkit-scrollbar {

    height: 6px;

  }



  .ades-partners__static .ades-partners__list::-webkit-scrollbar-track {

    background: transparent;

  }



  .ades-partners__static .ades-partners__list::-webkit-scrollbar-thumb {

    border-radius: 999px;

    background: rgba(var(--color-primaire-rgb), 0.28);

  }

}



@media (max-width: 767px) {

  .ades-partners {

    padding: 48px 0;

  }



  .ades-partners__inner {

    width: min(100% - 32px, 680px);

  }



  .ades-partners__title {

    margin-bottom: 24px;

  }



  .ades-partners__card {

    flex-basis: min(72vw, var(--ades-partner-card-width));

    width: min(72vw, var(--ades-partner-card-width));

  }

  .ades-partners__static .ades-partners__list {

    overflow-x: auto;

    justify-content: flex-start;

    padding-bottom: 12px;

  }



  .ades-partners__slider {

    padding-inline: 50px;

  }

}



/* =========================================================

   ACCESSIBILITÉ

========================================================= */



@media (prefers-reduced-motion: reduce) {

  .ades-partners__card,

  .ades-partners__link img {

    transition: none !important;

  }



  .ades-partners__card[data-ades-reveal="true"] {

    opacity: 1;

    transform: none;

  }

}