.navbar-brand-logo img {
    max-height: 200%;
   }
/* ==== Fix mobile carousel Bootstrap3 (captions below image, lisible) ==== */

/* Base : images responsive et arrondies */
#carouselEditorial .item img,
#carouselEditorialFr .item img,
.carousel .item img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto !important;      /* override attributes width/height si nécessaire */
  width: auto !important;
  border-radius: 6px;
  object-fit: cover;            /* améliore le recadrage si supporté */
}

/* Desktop: conserve le comportement overlay par défaut */
@media (min-width: 768px) {
  #carouselEditorial .carousel-caption,
  #carouselEditorialFr .carousel-caption,
  .carousel .carousel-caption {
    position: absolute;
    bottom: 10%;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.35);
    color: #fff;
    padding: 10px 15px;
    border-radius: 4px;
    margin: 0 10%;
  }
}

/* Mobile: place la légende SOUS l'image (plus lisible) */
@media (max-width: 767px) {
  /* rendre la caption statique (sous l'image) */
  #carouselEditorial .carousel-caption,
  #carouselEditorialFr .carousel-caption,
  .carousel .carousel-caption {
    position: static !important;
    width: auto;
    background: #ffffff;
    color: #222;
    padding: 10px 12px;
    margin-top: 8px;
    border-radius: 6px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
    text-align: center;
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* réduire la taille des textes pour petits écrans */
  #carouselEditorial .carousel-caption h4,
  #carouselEditorialFr .carousel-caption h4,
  .carousel .carousel-caption h4,
  #carouselEditorial .carousel-caption h5,
  #carouselEditorialFr .carousel-caption h5,
  .carousel .carousel-caption h5 {
    font-size: 16px;
    margin: 0 0 6px;
    font-weight: 600;
  }

  #carouselEditorial .carousel-caption p,
  #carouselEditorialFr .carousel-caption p,
  .carousel .carousel-caption p {
    font-size: 13px;
    margin: 0;
    color: #444;
  }

  /* Ajuste la hauteur max de l'image sur mobile pour garder un rendu propre */
  #carouselEditorial .item img,
  #carouselEditorialFr .item img,
  .carousel .item img {
    max-height: 260px; /* adapte si tu veux plus petit/grand */
    width: auto !important;
    max-width: 100%;
  }

  /* espace utile entre l'image et les indicateurs */
  .carousel-inner .item { padding-bottom: 8px; }
  .carousel-indicators { bottom: -6px; }
  .carousel-control.left,
  .carousel-control.right { top: 45%; }
}

/* Optionnel : forcer meilleure priorité si un autre CSS empêche l'effet */
@media (max-width: 767px) {
  #carouselEditorial .carousel-caption,
  #carouselEditorialFr .carousel-caption {
    position: static !important;
  }
}