/* =======================================================
   🧰 SECTION SERVICES : mise en page de chaque bloc
   ======================================================= */
#services-section > div {
  padding: 30px;
  margin-bottom: 40px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

/* Titre de chaque service */
#services-section h3 {
  font-size: 28px;
}


/* Texte de description */
.service-text {
  margin-bottom: 10px;
}


#service-1 {
  border-top: 2px solid white;
  padding-top: 40px; /* espace pour que la bordure ne soit pas collée au contenu */
}

/* =======================================================
   📋 LISTES DES SERVICES AVEC ICÔNE
   ======================================================= */
ul {
  list-style: none;
  padding-left: 0;
}

/* Emoji de type puce devant chaque élément */
.service-li::before {
  content: "📌";
  margin-right: 8px;
}

/* Pour appliquer automatiquement le style si .service-li n'est pas utilisé */
#services-section ul li::before {
  content: "📌";
  margin-right: 8px;
}

/* =======================================================
   🔘 BOUTONS DES BLOCS SERVICES
   ======================================================= */
.service-button {
  background-color: #FF3B30;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.service-button:hover {
  background-color: #f02820;
  cursor: pointer;
}

/* =======================================================
   🖼️ IMAGES DES BLOCS SERVICES
   ======================================================= */
.images-services {
  width: 490px;
  height: 340px;
  object-fit: cover;
  border-radius: 8px;
  filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.08));
}