/* ============================================
   CAROUSEL
   ============================================ */

/* IMPORTANT : ne PAS utiliser `.dot` seul — conflit avec `.divider-dot`
   dans section-divider. Utiliser `.slide-dot` pour les indicateurs. */

/* Masquer tous les slides par défaut (JS en affiche un seul via display:block) */
.mySlides { display: none; }

/* Chaque slide remplit 100% de la hauteur du conteneur */
.mySlides {
  height: 100%;
  width: 100%;
}

.slideshow-container {
  /* max-width: 70%; */
  position: relative;
  /* margin: 24px auto; */
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: #111;
  /* Hauteur fixe : définit l'espace dans lequel l'image s'adapte */
  height: 23em;
}

/*
 * Spécificité 0,2,1 — identique à .contenu .box img (contenublog.css)
 * mais carousel.css est chargé APRÈS → carousel gagne.
 * Annule le height:auto qui neutralisait object-fit:contain.
 *
 * Comportement :
 *  - Image portrait  → barres noires sur les côtés, image centrée verticalement
 *  - Image paysage   → barres noires en haut/bas, image centrée horizontalement
 *  - Dans les 2 cas  → image entière visible, jamais rognée
 */
.slideshow-container img.caros {
  display: block;
  width: 100%;
  height: 100%;                   /* remplit la hauteur fixe du conteneur     */
  object-fit: contain;            /* image entière, ratio conservé             */
  object-position: center center; /* centrage horizontal ET vertical           */
  background: #111;               /* fond noir pour les bandes letterbox       */
  border-radius: 0;
  max-width: none;                /* annule tout max-width hérité              */
}

/* ---- Boutons prev / next ---- */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(42,10,16,0.60);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--white);
  padding: 18px 14px;
  font-size: 1.1rem;
  font-weight: bold;
  border: none;
  transition: all var(--transition);
  z-index: 10;
  line-height: 1;
  user-select: none;
}

.prev {
  left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.next {
  right: 0;
  left: auto;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.prev:hover, .next:hover {
  background: rgba(232,98,26,0.80);
}

/* ---- Numéro de slide ---- */
.numbertext {
  position: absolute;
  top: 0; left: 0;
  background: rgba(42,10,16,0.65);
  backdrop-filter: blur(6px);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 10;
  font-family: var(--font-body);
}

/* ---- Caption ---- */
.text {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(42,10,16,0.72));
  color: var(--white);
  font-size: 0.84rem;
  padding: 28px 14px 12px;
  text-align: center;
}

/* ---- Indicateurs (points) — nommés .slide-dot pour éviter conflits ---- */
.slide-dots-wrapper {
  text-align: center;
  padding: 12px 0 6px;
}

.slide-dot {
  cursor: pointer;
  display: inline-block;
  height: 10px;
  width: 10px;
  margin: 0 4px;
  background: rgba(107,15,26,0.28);
  border-radius: 50%;
  transition: background var(--transition), transform var(--transition);
  vertical-align: middle;
}

.slide-dot.active,
.slide-dot:hover {
  background: var(--orange);
  transform: scale(1.3);
}


/* ---- Fading animation ---- */
.fade {
  animation: carouselFade 0.65s ease;
}

@keyframes carouselFade {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}

/* ---- Responsive ---- */
@media screen and (max-width: 768px) {
  .slideshow-container {
    max-width: 100%;
    height: 240px;   /* hauteur réduite sur mobile — l'image suit via height:100% */
  }
  .prev, .next { padding: 14px 10px; font-size: 0.95rem; }
}