@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: 60px;
  line-height: 0.5;
  color: #405d47;
}

.custom {
  font-family: 'Caballar', sans-serif;
  font-size: 14px; /* tu peux ajuster */
  color: #94a988;
}

.btn-left-right-top {
  font-family: 'NaomisHand-Regular', sans-serif;
  font-size: 35px;
  line-height: 0.5;
  color: #405d47;
}

.btn-left-right-bot {
  font-family: 'NaomisHand-Regular', sans-serif;
  font-size: 35px;
  line-height: 0.5;
  color: #94a988;
}

/* Style au survol pour les boutons .btn-success */
.btn:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.5); /* léger halo vert */
}

.btn:focus,
.btn:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;  /* enlever la bordure */
}

.btn {
  transition: transform 0.4s ease;
  cursor: pointer;
}

.flech {
  height: 28.5px;
  width: 13.75px;
}

.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);
}

.btn-retour {
    font-family: 'Caballar', sans-serif;
    font-size: 15px;
    color: #405d47;
    border: 2px solid #405d47;
    border-radius: 15px;
    background-color: #f4eee0;
}

.btn-retour:hover {
  border: 2px solid #405d47;
  border-radius: 15px;
  background-color: #94a988;
  color: #405d47;
}