@font-face {
  font-family: 'NaomisHand-Regular';
  src: url('/fonts/NaomisHand-Regular.ttf') format('truetype');
  font-style: normal;
}

@font-face {
  font-family: 'Caballar';
  src: url('/fonts/Caballar.ttf') format('truetype');
  font-style: normal;
}

h2 {
  font-family: 'NaomisHand-Regular', sans-serif;
  font-size: 45px;
  color: white;
  line-height: 0.8;
}

.container-id {
  max-width: 1800px;  /* plus large sur grands écrans */
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  min-height: 600px;  /* optionnel selon design */
}

.coltext {
  background-color: #94a988;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* ou center si tu veux centrer le texte verticalement */
}

.text-justify {
  font-family: 'Caballar';
  color: #405d47;
  text-align: justify;
  font-size: 13px;
}

.carousel {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden; /* important pour que les images suivent l'arrondi */
  width: 100%;
  height: 100%;
    display: flex;
  flex-direction: column;
}

/* --- Responsive : en dessous de 992px (Bootstrap lg) --- */
@media (max-width: 766px) {
  .carousel {
    border-top-right-radius: 20px;   /* coin supérieur droit */
    border-top-left-radius: 20px;
    border-bottom-left-radius: 0;    /* supprime l’arrondi bas gauche */
  }

  .coltext {
    border-bottom-right-radius: 20px; /* coin inférieur droit */
    border-bottom-left-radius: 20px;
    border-top-right-radius: 0;      /* supprime l’arrondi haut droit */
  }
}

.carousel-inner, .carousel-item, .carousel-item img {
  height: 100%;
  width: 100%;
}

.carousel-inner {
  height: 100%; 
}

.carousel-item img {
  object-fit: cover; /* remplissage sans déformation */
}

.clickable-img {
  cursor: zoom-in;
}

#modalImage {
  cursor: zoom-out;
  width: 100%;
  height: auto;
}

.img {
  transition: transform 0.4s ease;
  cursor: pointer;
}
.img:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}