@charset "UTF-8";

html {
  scroll-behavior: smooth;
}

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { 
      .carousel-caption h3 {
    font-size: 30px;
}

}

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { 
      .carousel-caption h3 {
    font-size: 30px;
}
    }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { 
    .carousel-caption h3 {
    font-size: 30px;
}
}


// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { 


}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
    .carousel-caption h3 {
    font-size: 40px;
    padding-top: 20px;
    }
}

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { 

}

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { 

}

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }
    
#carouselBijouterie img, #carouselPhotographies img, #carouselCouture img {
  width: 100%; /* Remplir toute la largeur du carrousel */
  height: 100%; /* S'assurer que l'image est bien contrainte à la hauteur */
  object-fit: contain; /* Garder l'intégrité de l'image sans la couper */
}
    
body {
    background: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
    color: #545454;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
    
.scale-on-hover {
      transition: transform 0.3s ease-in-out;
}
 
/* navbar */


.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    border: none;
    background-color: lightgrey;
}

.navbar-light .navbar-toggler {
	border-color: white;
}

.navbar-light .navbar-toggler:hover , .navbar-toggler:active , .navbar-toggler:visited {
	border-color: white;
}

.custom-toggler.navbar-toggler {
     border-color: white;
    border-radius: none;
}

.navbar-light .navbar-toggler {
	color: black;
    
}

.navbar-light .navbar-toggler-icon {
	background-image: url("");
	height: 20px;
    border: none;
}

button , button:hover , button:active {
	border: none;
}

.produit {
    mix-blend-mode: multiply;
}
    
/* accueil */
    
.carousel-caption {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;

}

.carousel-caption h3 {
    font-size: 40px;
    padding-top: 20px;
    transition: transform 0.3s ease-in-out;
}
    

.bouton-shop {
  display: inline-block;
  padding: 10px 25px;

  color: black;
  background: white;

  border: 2px solid black;   /* cadre visible */
  border-radius: 0;           /* optionnel */

  transition: 0.3s ease-in-out;
}

.shop:hover .bouton-shop {
  transform: scale(1.1);

  background: black;  /* fond noir complet */
  color: white;       /* texte blanc */
  border-color: black; /* garde le cadre noir */
}

.scale-on-hover-nav {
      transition: transform 0.3s ease-in-out;
	}
    
.scale-on-hover-nav:hover {
      transform: scale(1.2); 
	}


/* slider */

.carousel-inner .diapo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.carousel-inner .diapo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin: auto;
}
    
.v-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* min-height: 100vh; */ /* Retirez cette ligne ou ajustez la valeur selon vos besoins */
}


.carousel-container .diapo {
      width: 100%;
    margin: auto;
    }
    
    
.text-end {
  text-align: end;
}

.text-dark {
  color: black; /* Changer la couleur du texte selon vos besoins */
  text-decoration: none;
  position: relative;
}

.hover-line {
  position: absolute;
  bottom: -2px; /* Ajustez cette valeur pour positionner correctement la ligne */
  left: 0;
  width: 100%;
  height: 2px;
  background-color: black; /* Couleur de la ligne */
  transform: scaleX(0); /* Masquer la ligne par défaut */
  transform-origin: left;
  transition: transform 0.3s ease; /* Ajouter une transition pour l'effet de survol */
}