html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

a.nav-link{
  font-size: 40px;
  color: rgb(151, 13, 151);
}

body {
    display: flex;
    flex-direction: column;
}

main {
  flex: 1;
}

div.col-sm-9{
  text-align: center;
}

div.col-sm-3{
  align-content: center;
}

div.col-sm-6{
  padding: 0px;
}


img.img-vitrine{
  margin: 3px;
  height: 225px;
  max-width: 100%;
  width: auto;
  cursor: pointer; /* Change le curseur pour indiquer que l'image est cliquable */
  transition: transform 0.3s ease;  /* Transition douce pour les effets CSS */
}

/* Zone de l'image en zoom (modale) */
.zoom-overlay {
    display: none;  /* Caché par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);  /* Fond sombre semi-transparent */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* L'image zoomée en plein écran */
.zoomed-image {
    max-width: 100%;  /* L'image peut être jusqu'à 100% de la largeur de l'écran */
    max-height: 100%;  /* L'image peut être jusqu'à 100% de la hauteur de l'écran */
    object-fit: contain;  /* L'image s'ajuste pour rester entière et proportionnelle */
    transition: transform 0.3s ease;
    cursor: zoom-in; /* Indique que l'utilisateur peut fermer en cliquant */
}

.textarea{
  height: 500px;
}

span.input-center{
  display: inline-block;
  width: 110px;
  text-align: center;
  align-content: center;
}

.footer {
  color: rgb(151, 13, 151);
  text-align: center;
  font-size: 25px;
  margin-top: 9px;  
  padding: 15px 0px;
}

.footer .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

footer a.nav-link{
  font-size: 25px;
  color: rgb(151, 13, 151);
}

.footer .CR {
   margin: 0px;
}