.Apropos{
  border-radius: 10px; /* Arrondir les coins du conteneur */
  padding: 20px; /* Ajoute de l'espace autour du texte */
  background-color: #fff; /* Couleur de fond du conteneur */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombre pour donner un effet de profondeur */
  max-width: 90%; /* Limite la largeur du conteneur pour ne pas trop étirer le texte */
  margin: 10px auto; /* Centre le conteneur horizontalement */
  line-height: 1.6; /* Espacement entre les lignes du texte */
}

.skills {
  display: flex; /* Affiche les éléments en ligne */
  margin-top: 40px; /* Ajoute de l'espace au-dessus des éléments */
  margin-left: 60px; /* Ajoute de l'espace à gauche des éléments */
  flex-wrap: wrap; /* Permet aux éléments de passer à la ligne suivante s'ils dépassent */
  min-height: 300px; /* Limite la hauteur minimale des éléments */
}

.skills a {
  text-decoration: none; /* Supprime le soulignement des liens */
  color: #fff; /* Couleur du texte des éléments */
}

.skill {
  background-color: #3B556D; /* Couleur de fond des éléments */
  padding: 15px; /* Ajoute de l'espace à l'intérieur des éléments */
  border-radius: 5px; /* Arrondir les coins des éléments */
  flex: 1; /* Permet aux éléments de prendre la même largeur */
  margin-right: 30px; /* Ajoute de l'espace à droite des éléments */
  margin-bottom: 20px; /* Ajoute de l'espace au-dessus des éléments */
  min-width: 200px; /* Limite la largeur des éléments */
  max-width: 200px; /* Limite la largeur des éléments */
  position: relative; /* Assurez-vous que le conteneur parent a cette propriété */
  transition: box-shadow 0.3s, transform 0.3s; /* Ajoute une transition pour les changements de style */
}

.skill img {
  max-width: 100%; /* Limite la largeur de l'image à 100% */
  border-radius: 5px; /* Arrondir les coins de l'image */
}

.skill p:not(:last-child) {
  margin-bottom: 20px; /* Ajoute de l'espace en bas du texte */
}

.skill:hover {
  /*augmente l'ombre et la taille de l'élément au survol */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
  transition: box-shadow 0.3s, transform 0.3s;
}

.price {
  position: absolute; /* Positionne l'élément de manière absolue par rapport au conteneur parent */
  bottom: 10px; /* Positionne l'élément à 10px du bas du conteneur parent */
  right: 10px; /* Positionne l'élément à 10px de la droite du conteneur parent */
  display: flex; /* Affiche les éléments en ligne */
  align-items: center; /* Aligne les éléments au centre verticalement */
  color: #000; /* Couleur du texte du prix */
  font-weight: bold; /* Texte en gras */
  background-color: #f2f2f2; /* Couleur de fond */
  border-radius: 5px; /* Arrondir les coins du conteneur */
  padding: 3px 5px; /* Réduit l'espace autour du texte */
  max-width: 100px; /* Réduit la largeur maximale du conteneur */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ajoute une ombre subtile */
  transition: background-color 0.3s, box-shadow 0.3s; /* Ajoute une transition pour les changements de style */
}

.price:hover {
  background-color: #e0e0e0; /* Change la couleur de fond au survol */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Augmente l'ombre au survol */
}

.price img {
  width: 15px; /* Réduit la largeur de l'icône du prix */
  margin-right: 3px; /* Réduit l'espace à droite de l'icône */
}

.no-skill {
  display: flex; /* Affiche les éléments en ligne */
  justify-content: center; /* Centre les éléments horizontalement */
  align-items: center; /* Centre les éléments verticalement */
  margin: 0 auto; /* Centre l'élément horizontalement */
}

.no-skill p {
  margin-right: 10px; /* Ajoute de l'espace à droite du texte */
  color: #888; /* Grise le texte */
}