/* ==========================================================
   Titelli - Styles des cartes "services"
   ========================================================== */

/* Grille */
#services_field .svc-grid{
  display: grid !important;
  grid-template-columns: 1fr !important; /* une seule colonne */
  gap: 20px;
}

@media (min-width: 640px) {
  #services_field .svc-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Carte */
#services_field .svc-card {
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .05);
  transition: box-shadow .2s ease, border-color .2s ease;

  max-width: 720px;      /* ajuste à ton goût */
  width: 100%;
  margin: 0 auto;        /* centre la carte */
}
#services_field .svc-card:hover {
  border-color: #5d00da;
  box-shadow: 0 6px 18px rgba(93, 0, 218, .15);
}
#services_field .svc-card.is-selected {
  border-color: #5d00da;
  box-shadow: 0 0 0 3px rgba(93, 0, 218, .2);
}

/* Radio natif caché */
#services_field .svc-card > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  margin: 0;
}

/* Contenu */
#services_field .svc-hit {
  display: block;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
#services_field .svc-title {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 6px;
  color: #111827;
}
#services_field .svc-body {
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}
#services_field .svc-desc {
  margin-bottom: 6px;
}
#services_field .svc-price {
  font-size: 14px;
}
#services_field .svc-price del {
  opacity: .6;
  margin-right: 5px;
}
#services_field .svc-price strong {
  font-weight: 700;
}

/* On cache les anciens labels seulement si la transformation est faite */
#services_field.svc-initialized label[for^="services_"]:not(.svc-hit) {
  display: none !important;
}



/* Titre de la section services */
#services_field .svc-heading {
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  margin-bottom: 20px;
  color: black; 
}


#services_field .svc-optional-note {
  font-weight: 600;
  font-size: 14px;
  color: #6b7280; /* gris doux */
}