/*
 * AE2 – Accueil, section "Ici on parle des actualités du web"
 * Mobile (< 768px) : slider 1 article par 1, points + flèches (Figma, node 2523:50610).
 * Utilisé par home-articles-slider.js. Le desktop n'est pas modifié.
 */
.ae2-articles-nav {
  display: none;
}

@media (max-width: 767px) {
  .home .list-articles-other.ae2-slider {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 1.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .home .list-articles-other.ae2-slider::-webkit-scrollbar {
    display: none;
  }

  .home .list-articles-other.ae2-slider > .one-article-item {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .home .ae2-articles-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 2rem;
    margin-top: 1.5rem;
  }

  .ae2-articles-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.6875rem;
  }

  .ae2-articles-dot {
    width: 1.75rem;
    height: 1rem;
    padding: 0;
    border: 0;
    border-radius: 6.1875rem;
    background: var(--Bleu-ae2-Terciary, #7087BF);
    cursor: pointer;
  }

  .ae2-articles-dot.is-active {
    background: var(--Bleu-ae2-Bleu-AE2, #32509E);
  }

  .ae2-articles-arrows {
    display: flex;
    gap: 0.875rem;
  }

  .ae2-articles-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 6.1875rem;
    background: var(--Bleu-ae2-Bleu-AE2, #32509E);
    color: #FFFAF7;
    cursor: pointer;
  }

  .ae2-articles-arrow svg {
    width: 1rem;
    height: 1rem;
  }

  .ae2-articles-arrow:disabled {
    background: #DDE4EE;
    color: #B3BBC3;
    cursor: default;
  }
}