/* ==========================================================================
   Fix carrousel — texte dans la zone grise à gauche de l'image
   Zone grise : ~35% de la largeur (min 393px sur 1110px)
   Caption : 34% avec padding pour rester à l'intérieur
   ========================================================================== */

#carousel .carousel-item figure {
  position: relative;
}

#carousel .carousel-item .caption {
  position: absolute !important;
  top: 0;
  left: 0;
  bottom: 0;
  width: 34%;
  max-width: 34%;
  padding: clamp(4px, 1.2vw, 20px) clamp(6px, 1.5vw, 25px);
  background: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

#carousel .carousel-item .caption h2.display-1 {
  font-size: clamp(0.5rem, 1.05vw, 1.1rem);
  font-weight: 700;
  margin: 0 0 clamp(2px, 0.4vw, 6px) 0;
  color: #333;
  text-transform: uppercase;
}

#carousel .carousel-item .caption .caption-description {
  font-size: clamp(0.4rem, 0.7vw, 0.75rem);
  line-height: 1.35;
  overflow: hidden;
}

#carousel .carousel-item .caption .caption-description h3 {
  font-size: clamp(0.42rem, 0.78vw, 0.82rem);
  margin: 0 0 clamp(1px, 0.25vw, 4px) 0;
  font-weight: 600;
}

#carousel .carousel-item .caption .caption-description p {
  margin: 0;
}

#carousel .carousel-item .caption .caption-description h3 span,
#carousel .carousel-item .caption .caption-description p span {
  color: #4a4a4a !important;
  font-size: inherit !important;
}

/* Mobile : polices adaptées + fondu bas pour texte long */
@media (max-width: 767px) {
  #carousel .carousel-item .caption {
    padding: clamp(2px, 0.8vw, 10px) clamp(4px, 1vw, 15px) !important;
  }
  #carousel .carousel-item .caption h2.display-1 {
    font-size: 2.8vw !important;
    margin-bottom: 1px !important;
    flex-shrink: 0;
  }
  #carousel .carousel-item .caption .caption-description {
    font-size: 1.9vw !important;
    line-height: 1.3 !important;
    flex: 1;
    min-height: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  }
  #carousel .carousel-item .caption .caption-description h3 {
    font-size: 2vw !important;
    margin-bottom: 1px !important;
  }
  #carousel .carousel-item .caption .caption-description h3 span {
    font-size: 2vw !important;
  }
  #carousel .carousel-item .caption .caption-description p {
    font-size: 1.8vw !important;
    line-height: 1.25 !important;
  }
  #carousel .carousel-item .caption .caption-description p span {
    font-size: 1.8vw !important;
  }
}