body {
    background-color: #f1eded;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif,verdana;
  }
  
  /* Section "Hero" (image de couverture) */
  .hero-image {
    background: url(semiconducteur.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é */
  }  

/*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: #f0f2f7;
  }
  
  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; 
  }



 .titre {
    font-size: 24px;
    font-weight: bold;
 }

 
/* Image avec style */
  .image {
    width: 100%; /* La largeur de l'image occupe 100% de son conteneur */
  height:30%; /* La hauteur de l'image est fixée à 30% de la hauteur de son conteneur */
  max-width: 500px; /* L'image ne dépasse pas une largeur de 500px */
  display: block; /* Force l'image à s'afficher en bloc */
    margin-left: auto; /* Centre l'image horizontalement */
    margin-right: auto; /* Centre l'image horizontalement */
    border-radius: 10px; /* Arrondit les coins de l'image avec un rayon de 10px */
  }
  
  .paragraphe {
    width: 100%; 
  height:30%;
  max-width: 500px;
  display: block;
    margin-left: auto;
    margin-right: auto;
    font-size: 18px;
  }

  .container1 {
    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: 14%; /*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: 18px; /* 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 */

}

h1 {
    margin-bottom: 10px; /* Espace de 10px sous le titre */
    text-align: center; /* Aligne le titre au centre */
}

/* Styles du formulaire de contact */
form {
    background-color: white;
    padding: 30px; /* Espace intérieur de 30px autour du formulaire */
    max-width: 600px; /* Largeur maximale de 600px */
    margin: 20px auto; /* Marge de 20px en haut et en bas, centré horizontalement */
    border-radius: 8px; /* Coins arrondis du formulaire avec un rayon de 8px */
}

label {
    display: flex; /* Utilise flexbox pour le positionnement des labels */
    margin: 10px 0 5px; /* Espace de 10px en haut, 0 à gauche et droite, 5px en bas */
    text-align: left; /* Aligne le texte du label à gauche */
}

input, textarea {
    width: 100%; /* Les champs s'étendent sur 100% de la largeur du formulaire */
    padding: 10px; /* Espace intérieur de 10px autour du texte dans les champs */
    margin-bottom: 10px; /* Espace de 10px en bas de chaque champ */
    border: 1px solid #ccc; /* Bordure gris clair pour les champs */
    border-radius: 4px; /* Coins arrondis pour les champs avec un rayon de 4px */
}

textarea {
    height: 50px; /* Définit la hauteur de la zone de texte à 50px */
}

button {
    background-color: #333; /* Fond sombre pour le bouton */
    color: white; /* Texte blanc sur le bouton */
    padding: 10px 20px;  /* Espace intérieur de 10px en haut et bas, 20px à gauche et droite */
    border: none; /* Supprime la bordure du bouton */
    border-radius: 4px; /* Coins arrondis pour le bouton avec un rayon de 4px */
    cursor: pointer; /* Change le curseur en forme de main pour indiquer que le bouton est cliquable */
}

button:hover {
    background-color: #555; /* Change la couleur du fond en gris plus clair lors du survol */
}

/* Styles pour le pied de page */
footer {
    text-align: center; 
    margin-top: 30px; /* Marge en haut du pied de page */
    font-size: 14px; 
    color: #333; 
}