p { font-family: "Comic Sans MS" cursive
    border-radius: 7%;
    margin:15px 90px 15px 90px ;
    text-align: center;
    background-color: rgb(182, 230, 214);
    color: blue;
    border: 5px solid black;
}

h1 {
    border-radius: 7%;
    background-color: rgb(230, 228, 229);
    margin:15px 105px 15px 105px ;
    padding: 1px;
    border-style: solid ;
    text-align: center;
    color: blue;
    width: auto;
    border: 5px solid black;
    color: black;
    
}

a {
    text-align: center;
    display:block;
}

div {
    border-radius: 7%;
    background-color: rgb(38, 137, 144);
    margin:15px 15px 15px 15px ;
    padding: 1px;
    border-style: solid ;
    border-color: rgb(11, 131, 140) ;
    border-width: 2px ;
    
}

a:link, a:visited {
  background-color: white;
  color: black;
  border: 2px solid black;
  text-align: center;
  text-decoration: none;
  border-radius: 7%;
 
}

img {
    border-radius: 7%;
    border: 5px solid black;
}


    
div {
    border: 5px solid black;
    
    
    }
    
/* Trois conteneurs d'images (utilisez 25 % pour quatre et 50 % pour deux, etc.) */
.column {
    float: left;
    width: 33.33%;
    padding: 5px;
  }
  
  /* Effacer les flotteurs après les conteneurs d'images */
  .row::after {
    content: "";
    clear: both;
    display: table;
  }

  * {
    box-sizing: border-box;
  }
  
  .row {
    display: flex;
  }
  
  /* Créez trois colonnes égales placées les unes à côté des autres */
  .column {
    flex: 33.33%;
    padding: 5px;
  } 


/* animation images
/* Style de base pour centrer l'image et définir ses dimensions */
.container {
    position: relative;
    width: 33.33%; /* selon besoin */
    height: 50%; /*  hauteur */
    overflow: hidden; /* Cache la partie de l'image qui dépasse */
}

.zoom-image {
    width: 100%;
    height: 50%;
    transition: transform 0.5s ease; /* Animation douce sur le zoom */
}


/* Effet de zoom au passage de la souris */
.container:hover .zoom-image {
    transform: scale(1.2); /* Agrandit l'image de 20% */
}

/*liste deroulante*/
#liste deroulante {
        display: flex;
        justify-content: center; /* Centrer horizontalement */
        align-items: center; /* Centrer verticalement */
        height: 100vh; /* Prend toute la hauteur de la fenêtre */
}

#nos produits {
    margin: auto;
}