/* ================================================================
   SERVICES.CSS — Section des Prestations de Florian
   ================================================================ */

.section-services {
  /* Maintien de la couleur de fond alternative pour séparer les sections */
  background-color: var(--fond-alternatif);
  padding: var(--espace-12) var(--padding-conteneur);
}

@media (min-width: 768px) {
  .section-services { padding: var(--espace-16) var(--padding-conteneur); }
}

.services__en-tete {
  text-align: center;
  max-width: 650px; /* Légèrement élargi pour un texte plus aéré */
  margin: 0 auto var(--espace-16) auto;
}

.services__sous-titre {
  text-transform: uppercase;
  font-size: var(--taille-sm);
  color: var(--bleu-clair);
  font-weight: var(--poids-gras);
  letter-spacing: 2px; /* Espacement accentué pour la touche "premium" */
  margin-bottom: var(--espace-3);
}

.services__titre {
  font-family: var(--police-titre);
  font-size: clamp(var(--taille-3xl), 5vw, var(--taille-5xl)); /* Titre un poil plus imposant */
  color: var(--bleu-fonce);
  margin-bottom: var(--espace-5);
  line-height: 1.2;
}

.services__description {
  color: var(--texte-secondaire);
  font-size: var(--taille-lg);
  line-height: 1.6;
}

/* Grille Responsive des 3 cartes */
.services__grille {
  max-width: var(--largeur-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-8); /* Espacement harmonisé */
  align-items: stretch;
}

@media (min-width: 992px) {
  .services__grille {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espace-6);
  }
}

/* Modèle de Carte Standard */
.services__carte {
  background-color: var(--fond-principal);
  border-radius: var(--arrondi-xl);
  padding: var(--espace-8) var(--espace-6);
  border: 1px solid rgba(0, 0, 0, 0.05); /* Bordure ultra fine et discrète */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); /* Ombre très douce */
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Transition plus douce qu'un ease basique */
}

.services__carte:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Modification des icônes : passage en cercles parfaits */
.services__carte-icone {
  width: 64px; /* Un peu plus grand pour l'impact visuel */
  height: 64px;
  background-color: var(--bleu-fonce-tres-clair);
  color: var(--bleu-fonce);
  border-radius: 50%; /* Remplace l'arrondi classique pour un rendu plus classe */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--taille-2xl);
  margin-bottom: var(--espace-6);
  transition: transform 0.3s ease;
}

.services__carte:hover .services__carte-icone {
  transform: scale(1.1); /* Petit effet waouh au survol */
}

/* Couleurs spécifiques selon le service */
.services__carte--clim .services__carte-icone {
  background-color: var(--bleu-clair-tres-clair);
  color: var(--bleu-clair);
}

.services__carte--urgence .services__carte-icone {
  background-color: var(--rouge-urgence-clair); /* Utilisation de ta variable d'origine */
  color: var(--rouge-urgence); /* Couleur d'urgence d'origine conservée */
}

.services__carte-titre {
  font-family: var(--police-titre);
  font-size: var(--taille-2xl);
  color: var(--bleu-fonce);
  margin-bottom: var(--espace-3);
}

.services__carte-accroche {
  font-size: var(--taille-base);
  color: var(--texte-secondaire);
  margin-bottom: var(--espace-6);
  line-height: 1.5;
  font-weight: var(--poids-moyen);
}

/* Listes de détails techniques */
.services__carte-liste {
  display: flex;
  flex-direction: column;
  gap: var(--espace-3);
  margin-bottom: var(--espace-8);
  padding-top: var(--espace-6);
  border-top: 1px solid var(--gris-leger); /* Petite ligne de séparation propre */
}

.services__carte-liste li {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-3);
  font-size: var(--taille-sm);
  color: var(--texte-principal);
  line-height: 1.4;
}

.services__carte-liste li i {
  color: var(--bleu-clair); /* Couleur de l'icône de liste d'origine */
  font-size: var(--taille-lg);
  margin-top: -2px; /* Ajustement visuel pour aligner l'icône avec le texte */
}

.services__carte--urgence .services__carte-liste li i {
  color: var(--rouge-urgence); /* Maintien de l'icône rouge pour les urgences */
}

/* Boutons en bas de carte */
.services__carte-bouton {
  margin-top: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--espace-2);
}

.services__carte-bouton i {
  transition: transform 0.3s ease;
}

.services__carte-bouton:hover i {
  transform: translateX(4px); /* Petite animation de la flèche */
}

/* ── CARTE VEDETTE (PLOMBERIE) ──────────────────────────────── */
.services__carte--vedette {
  border: 2px solid var(--bleu-clair);
  box-shadow: 0 8px 25px rgba(var(--bleu-clair-rgb), 0.15); /* Ombre colorée si possible, sinon var(--ombre-bleue) */
}

@media (min-width: 992px) {
  .services__carte--vedette {
    transform: scale(1.03); /* Réduction du scale d'origine (1.04) pour plus de subtilité */
    z-index: 2; /* S'assure que la carte passe au-dessus des autres */
  }
  .services__carte--vedette:hover {
    transform: scale(1.05) translateY(-8px);
  }
}

.services__carte-badge {
  position: absolute;
  top: -12px; /* Fait dépasser le badge pour casser la géométrie */
  right: var(--espace-6);
  background: linear-gradient(135deg, var(--bleu-clair), var(--bleu-fonce)); /* Dégradé premium */
  color: white;
  font-size: var(--taille-xs);
  font-weight: var(--poids-gras);
  padding: var(--espace-2) var(--espace-4);
  border-radius: var(--arrondi-plein);
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: var(--ombre-sm);
}