.elementor-8546 .elementor-element.elementor-element-d7de18e{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8546 .elementor-element.elementor-element-46ae727{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-8546 .elementor-element.elementor-element-f21b41c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overflow:hidden;}.elementor-8546 .elementor-element.elementor-element-fc506c8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-8546 .elementor-element.elementor-element-c32f1bd{--display:flex;}@media(max-width:767px){.elementor-8546 .elementor-element.elementor-element-d7de18e{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for html, class: .elementor-element-a2ac716 */<style>
  /* ============================================================
     DESIGN SYSTEM : AUTOFACTORIA (LAYOUT PRELUDE)
  ============================================================ */
  .af-slider-wrapper {
    --af-accent: #7ffff0;
    --af-bg: #1a191a;
    --af-text: #ffffff;
    --af-text-dim: rgba(255, 255, 255, 0.6);
    --af-font: 'CenturyGothic', sans-serif;
    
    width: 100%;
    background-color: var(--af-bg);
    padding: 60px 0;
    font-family: var(--af-font);
    overflow: hidden;
  }

  /* --- HEADER VO --- */
  .af-slider-header {
    max-width: 1400px;
    margin: 0 auto 40px auto;
    padding: 0 20px;
    position: relative;
  }
  .af-slider-header__kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--af-accent);
    margin-bottom: 10px;
  }
  .af-slider-header__title {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 800;
    color: var(--af-text);
    margin: 0;
    line-height: 1.1;
    text-transform: uppercase;
  }

  /* --- TRACK --- */
  .af-slider-track {
    display: flex;
    gap: 40px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0 20px 20px 20px;
  }
  .af-slider-track::-webkit-scrollbar { display: none; }

  /* --- COMPOSANT SLIDE (2 Colonnes) --- */
  .af-card {
    flex: 0 0 100%;
    max-width: 1400px; /* Largeur max calquée sur la grille Elementor */
    margin: 0 auto;
    scroll-snap-align: center;
    display: flex;
    gap: 50px;
    align-items: center;
  }

  /* Gauche : Image */
  .af-card__visual {
    flex: 0 0 50%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    background-color: #000;
  }
  .af-card__visual img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* Droite : Contenu */
  .af-card__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .af-card__kicker {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--af-accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
  }
  .af-card__title {
    font-size: clamp(2.5rem, 4vw, 4rem);
    font-weight: 800;
    color: var(--af-text);
    line-height: 1;
    margin: 0 0 15px 0;
  }
  .af-card__tagline {
    font-size: 1.1rem;
    color: var(--af-text-dim);
    margin-bottom: 5px;
  }

  /* Prix */
  .af-card__price-wrap {
    color: var(--af-accent);
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 25px;
  }
  .af-card__price-val {
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -2px;
  }
  .af-card__price-unit {
    font-size: 2rem;
    font-weight: 600;
  }
  .af-card__terms {
    color: var(--af-text-dim);
    font-size: 0.9rem;
    margin: -15px 0 25px 0;
  }

  /* Bouton */
  .af-card__btn {
    background-color: var(--af-accent);
    color: #000;
    padding: 16px 36px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 40px;
  }
  .af-card__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(127, 255, 240, 0.2);
  }

  /* Légal */
  .af-card__legal {
    width: 100%;
  }
  .af-card__legal-title {
    color: var(--af-text);
    font-size: 0.8rem;
    font-weight: 800;
    margin: 0 0 8px 0;
  }
  .af-card__legal-text {
    color: var(--af-text-dim);
    font-size: 0.7rem;
    line-height: 1.4;
  }
  .af-card__legal-text p { margin: 0 0 5px 0; }

  /* --- FLÈCHES (Top Right) --- */
  .af-slider-controls {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 10px;
  }
  .af-slider-arrow {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    color: var(--af-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
  }
  .af-slider-arrow svg { width: 20px; height: 20px; fill: currentColor; }
  .af-slider-arrow:hover {
    border-color: var(--af-accent);
    color: var(--af-accent);
  }

  /* --- RESPONSIVE MOBILE --- */
  @media (max-width: 900px) {
    .af-card { flex-direction: column; gap: 30px; }
    .af-card__visual { flex: 0 0 auto; width: 100%; aspect-ratio: auto; }
    .af-card__content { padding: 0 10px; }
    .af-card__title { font-size: 2.5rem; }
    .af-card__price-val { font-size: 3.5rem; }
    .af-card__btn { width: 100%; text-align: center; }
    .af-slider-controls { display: none; }
  }
</style>

<div class="af-slider-wrapper" id="af-main-slider">
  <header class="af-slider-header">
    <div class="af-slider-header__kicker">Promotions & Financements</div>
    <h2 class="af-slider-header__title">Les offres du moment</h2>
    
    <div class="af-slider-controls">
      <button class="af-slider-arrow js-af-prev" aria-label="Précédent">
        <svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
      </button>
      <button class="af-slider-arrow js-af-next" aria-label="Suivant">
        <svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
      </button>
    </div>
  </header>

  <div class="af-slider-track js-af-track">
    [autofac_offres_slider]
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {
  const root = document.getElementById('af-main-slider');
  if (!root) return;
  
  const track = root.querySelector('.js-af-track');
  const btnPrev = root.querySelector('.js-af-prev');
  const btnNext = root.querySelector('.js-af-next');
  let autoPlayInterval;

  const getSlides = () => root.querySelectorAll('.af-card');

  function getActiveIndex() {
    const slides = getSlides();
    const scrollLeft = track.scrollLeft;
    let minDiff = Infinity, activeIndex = 0;
    
    slides.forEach((slide, index) => {
      const slidePos = slide.offsetLeft - track.offsetLeft;
      const diff = Math.abs(scrollLeft - slidePos);
      if (diff < minDiff) { minDiff = diff; activeIndex = index; }
    });
    return activeIndex;
  }

  function scrollToSlide(index) {
    const slides = getSlides();
    if(!slides[index]) return;
    track.scrollTo({ left: slides[index].offsetLeft - track.offsetLeft, behavior: 'smooth' });
  }

  function nextSlide() {
    const slides = getSlides();
    if(!slides.length) return;
    let newIndex = getActiveIndex() + 1;
    if (newIndex >= slides.length) newIndex = 0;
    scrollToSlide(newIndex);
  }

  function prevSlide() {
    const slides = getSlides();
    if(!slides.length) return;
    let newIndex = getActiveIndex() - 1;
    if (newIndex < 0) newIndex = slides.length - 1;
    scrollToSlide(newIndex);
  }

  function startAutoPlay() {
    clearInterval(autoPlayInterval);
    autoPlayInterval = setInterval(nextSlide, 6000);
  }

  if(btnNext) btnNext.addEventListener('click', () => { nextSlide(); startAutoPlay(); });
  if(btnPrev) btnPrev.addEventListener('click', () => { prevSlide(); startAutoPlay(); });

  if (getSlides().length > 1) startAutoPlay();
  else {
      if(btnNext) btnNext.style.display = 'none';
      if(btnPrev) btnPrev.style.display = 'none';
  }
});
</script>/* End custom CSS */