body {
    background-color: #f1eded;
}

/* Navigation */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;/* Cache tout débordement de contenu au sein de l'élément */
    background-color:  #e4dddd;
  }
  
  li {
    float: left; /* Aligne les éléments de liste horizontalement */
  }
  
  li a {
    display: block; /* Transforme les liens en blocs pour pouvoir appliquer des propriétés de dimensionnement */
    color: rgb(0, 0, 0);
    text-align: center;
    padding: 14px 16px; /* Applique un padding autour du texte du lien pour espacer les éléments */
    text-decoration: none; /* Supprime la décoration de texte (comme le soulignement) */
  }
  
  li a:hover {
    background-color: #2f4270; /* Change la couleur de fond du lien au survol */
    cursor: pointer; 

  }

  body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif,verdana;
  }
  
  /* Section "Hero" (image de couverture) */
  .hero-image {
    background: url(photo3.jpg) no-repeat center; /* Définit l'image de fond, centrée sans répétition */
    background-size: cover; /*L'image de fond couvre toute la taille de l'élément */
    height: 500px; /* Définit la hauteur de l'élément hero-image à 500 pixels */
    position: relative; /* Positionne l'élément relativement à son conteneur */
    box-shadow: 15px 15px 15px rgb(28, 28, 28); /* Ajoute une ombre portée autour de l'élément */
  }
  
  /* Texte superposé à l'image (dans l'élément hero) */
  .hero-text {
    text-align: left; /* Aligne le texte à gauche */
    position: absolute; /* Positionne le texte de manière absolue  */
    top: 30%; /* Place le texte à 30% du haut  */
    left: 30%; /* Place le texte à 30% de largeur */
    transform: translate(-50%, -50%); /* Centre le texte par rapport à son point d'ancrage */
    color: rgb(235, 235, 240);
    text-shadow: 6px 6px 10px #000000;  /* Applique une ombre au texte pour améliorer la lisibilité */
  } 
  .titre {
    font-size: 24px;
    font-weight: bold;
 }

  .product-container {
    display: flex; /* Permet d'aligner les éléments à l'intérieur */
    justify-content: space-between; /* Alignement de l'image */
    gap: 20px; /* Espacement entre les box */
    max-width: 1000px; /* Ajuste la largeur pour bien centrer */
    margin: 0 auto; /* Centre le conteneur dans la page */
}

.semi-conducteur {
    background: rgb(223, 218, 213);
    width: 18%; /*Taille de l'image*/
    height: 8%;
    display: flex;/* Active le mode Flexbox */
    flex-direction: column; /* Organise les éléments en colonne */
    text-align: center; /* Centre le texte */
    padding: 15px; /* Espacement intérieur */
    border-radius: 10px;  /* Permet d'avoir des Coins arrondis  */
    box-shadow: 20px 15px 15px rgba(0, 0, 0, 0.554); /* Ombre pour donner un léger effet 3D */

}
.semi-conducteur 
    :hover {
    transform: translateY(-5px); /* Pour mettre l'animation */

}