.auto-carousel {
  position: relative;
  margin: 1rem 0 !important;
  border: 2px solid var(--border-dark);   /* ← cadre */
  border-radius: 3px;                     /* ← coins arrondis */
  overflow: hidden;                       
}

/* Le UL s'adapte en hauteur à son contenu (les images) */
.auto-carousel ul {
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin: 0 !important;
  padding: 0;
  cursor: grab;
  user-select: none;
}

/* Pas de background ici : la hauteur vient de l'image */
.auto-carousel ul.grabbing {
  cursor: grabbing;
  scroll-snap-type: none;
}

.auto-carousel ul::-webkit-scrollbar {
  display: none;
}

/* Chaque slide prend 100% de la largeur du carrousel */
.auto-carousel ul li {
  position: relative;
  flex: 0 0 100%;
  list-style: none;
  scroll-snap-align: start;
  pointer-events: none;
  background: none;
  padding: 0;
  margin: 0;
}

/* ============ FIGURE + IMG + CAPTION ============ */

.auto-carousel figure {
  margin: 0;
  padding: 0;
  position: relative;   /* ← nécessaire pour placer la légende dedans */
}

/* image : contrôle la hauteur du slider */
.auto-carousel figure > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* légende */
.auto-carousel figure > figcaption {
  position: absolute;
  top: 10px;
  left: 10px;

  font-family: "Space Mono", monospace;
  font-size: 1rem;             
  font-weight: 700;

  background: #ffffff;  
  padding: 6px 10px;
  border-radius: 3px;

  color: #000;  


  line-height: 1.25;
  z-index: 5;
}

.carousel-source {
  display: block;
  font-size: 0.85em;
  opacity: 0.8;
}


/* ============ BULLETS ============ */

.auto-carousel ol {
  position: absolute;
  bottom: 15px;
  display: flex;
  justify-content: center;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  margin: 0 !important;
  
}

.auto-carousel ol li {
  list-style: none;
  padding: 0 5px;
  font-size: 0;
}

.auto-carousel ol li a {
  display: block;
  height: 10px;
  width: 10px;
  border: 2px solid white;
  background: transparent;
  border-radius: 100%;
}

.auto-carousel ol li.selected a {
  background: white;
}

/* ============ FLÈCHES (désactivées par défaut) ============ */


.auto-carousel .prev,
.auto-carousel .next {
  display: none;
  user-select: none;
  cursor: pointer;

  font-size: 50px;
  color: white;

  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  padding: 30px 2px;
  z-index: 9;
  line-height: 0;

  /* ---- AJOUT : fond circulaire lilas ---- */
  background: var(--lilas);
  
}


.auto-carousel .next {
  left: auto;
  right: 0;
}

/* =========================================================
   📱 RESPONSIVE — CAROUSEL
   ========================================================= */

/* 📱 Tablette (≤ 940px) */
@media (max-width: 940px) {
  .auto-carousel {
    margin: 0.8rem 0 !important;
    border-width: 1.5px;
    border-radius: 3px;
  }

  .auto-carousel figure > figcaption {
    font-size: 0.9rem;      
    padding: 5px 8px;
    top: 8px;
    left: 8px;
  }

  .carousel-source {
    font-size: 0.75em;
  }

  /* Bullets */
  .auto-carousel ol {
    bottom: 12px;
  }

  .auto-carousel ol li a {
    width: 8px;
    height: 8px;
    border-width: 2px;
  }

  /* Flèches */
  .auto-carousel .prev,
  .auto-carousel .next {
    font-size: 42px;
    padding: 25px 2px;
  }
}

/* 📱 Téléphone (≤ 786px) */
@media (max-width: 786px) {
  .auto-carousel {
    margin: 0.6rem 0 !important;
    border-width: 1px;
  }

  .auto-carousel figure > figcaption {
    font-size: 0.8rem;      
    padding: 4px 7px;
    top: 6px;
    left: 6px;
  }

  .carousel-source {
    font-size: 0.7em;
  }

  /* Bullets */
  .auto-carousel ol {
    bottom: 10px;
  }

  .auto-carousel ol li a {
    width: 7px;
    height: 7px;
    border-width: 2px;
  }

  /* Flèches */
  .auto-carousel .prev,
  .auto-carousel .next {
    font-size: 36px;
    padding: 20px 2px;
  }
}