/* PATCH - 5 Designs professionnels et originaux pour les cartes de services */

/* ===== DESIGN 1 - CORPORATE ÉLÉGANT ===== */
.design1 .service-card-clean{
  background:linear-gradient(165deg, rgba(21,21,21,0.95) 0%, rgba(26,26,26,0.9) 100%) !important;
  border:1px solid rgba(255,255,255,0.06) !important;
  border-left:3px solid transparent !important;
  border-image:linear-gradient(180deg, var(--service-color), transparent) 1 !important;
  border-radius:2px !important;
  box-shadow:0 2px 12px rgba(0,0,0,0.4) !important;
  transition:all 0.8s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.design1 .service-card-clean:hover{
  background:linear-gradient(165deg, rgba(26,26,26,0.98) 0%, rgba(32,32,32,0.95) 100%) !important;
  transform:translateX(4px) !important;
  box-shadow:-4px 0 0 var(--service-color), 0 4px 20px rgba(0,0,0,0.6) !important;
}
.design1 .service-icon-clean{
  background:rgba(var(--service-color-rgb),0.08) !important;
  border:1px solid rgba(var(--service-color-rgb),0.2) !important;
  border-radius:2px !important;
  transition:all 0.8s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.design1 .service-card-clean:hover .service-icon-clean{
  background:rgba(var(--service-color-rgb),0.15) !important;
  border-color:rgba(var(--service-color-rgb),0.5) !important;
}

/* ===== DESIGN 2 - TECH FROSTED ===== */
.design2 .service-card-clean{
  background:rgba(26,26,26,0.7) !important;
  backdrop-filter:blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(180%) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:20px !important;
  box-shadow:0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  transition:all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.design2 .service-card-clean:hover{
  background:rgba(32,32,32,0.8) !important;
  border-color:rgba(var(--service-color-rgb),0.3) !important;
  transform:translateY(-6px) scale(1.02) !important;
  box-shadow:0 12px 48px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 0 1px rgba(var(--service-color-rgb),0.2) !important;
}
.design2 .service-icon-clean{
  background:rgba(var(--service-color-rgb),0.1) !important;
  backdrop-filter:blur(10px) !important;
  border:1px solid rgba(var(--service-color-rgb),0.25) !important;
  transition:all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.design2 .service-card-clean:hover .service-icon-clean{
  background:rgba(var(--service-color-rgb),0.18) !important;
  border-color:rgba(var(--service-color-rgb),0.5) !important;
  transform:scale(1.08) !important;
}

/* ===== DESIGN 3 - MINIMAL ARCHITECT ===== */
.design3 .service-card-clean{
  background:rgba(18,18,18,0.6) !important;
  border:none !important;
  border-top:1px solid rgba(255,255,255,0.05) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  position:relative !important;
  transition:all 0.9s cubic-bezier(0.19, 1, 0.22, 1) !important;
}
.design3 .service-card-clean::after{
  content:'' !important;
  position:absolute !important;
  bottom:0 !important;
  left:0 !important;
  width:0 !important;
  height:2px !important;
  background:var(--service-color) !important;
  transition:width 0.9s cubic-bezier(0.19, 1, 0.22, 1) !important;
}
.design3 .service-card-clean:hover{
  background:rgba(26,26,26,0.8) !important;
  transform:translateY(-2px) !important;
}
.design3 .service-card-clean:hover::after{
  width:100% !important;
}
.design3 .service-icon-clean{
  background:transparent !important;
  border:1px solid rgba(var(--service-color-rgb),0.3) !important;
  border-radius:50% !important;
  transition:all 0.9s cubic-bezier(0.19, 1, 0.22, 1) !important;
}
.design3 .service-card-clean:hover .service-icon-clean{
  border-width:2px !important;
  border-color:var(--service-color) !important;
  transform:scale(1.05) !important;
}

/* ===== DESIGN 4 - PREMIUM LAYERED ===== */
.design4 .service-card-clean{
  background:
    linear-gradient(135deg, rgba(var(--service-color-rgb),0.03) 0%, transparent 50%),
    rgba(15,15,15,0.9) !important;
  border:1px solid rgba(255,255,255,0.04) !important;
  border-radius:16px !important;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.3),
    0 4px 12px rgba(0,0,0,0.25),
    inset 0 0.5px 0 rgba(255,255,255,0.05) !important;
  transition:all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position:relative !important;
  overflow:hidden !important;
}
.design4 .service-card-clean::before{
  content:'' !important;
  position:absolute !important;
  top:-50% !important;
  right:-50% !important;
  width:200% !important;
  height:200% !important;
  background:radial-gradient(circle, rgba(var(--service-color-rgb),0.08) 0%, transparent 70%) !important;
  opacity:0 !important;
  transition:opacity 0.8s ease !important;
}
.design4 .service-card-clean:hover{
  background:
    linear-gradient(135deg, rgba(var(--service-color-rgb),0.08) 0%, transparent 50%),
    rgba(21,21,21,0.95) !important;
  border-color:rgba(var(--service-color-rgb),0.2) !important;
  transform:translateY(-4px) !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.4),
    0 8px 24px rgba(0,0,0,0.35),
    0 0 0 1px rgba(var(--service-color-rgb),0.15),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.design4 .service-card-clean:hover::before{
  opacity:1 !important;
}
.design4 .service-icon-clean{
  background:rgba(var(--service-color-rgb),0.1) !important;
  border:1px solid rgba(var(--service-color-rgb),0.2) !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.3) !important;
  transition:all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.design4 .service-card-clean:hover .service-icon-clean{
  background:rgba(var(--service-color-rgb),0.18) !important;
  border-color:rgba(var(--service-color-rgb),0.4) !important;
  box-shadow:0 4px 16px rgba(var(--service-color-rgb),0.2) !important;
  transform:scale(1.06) !important;
}

/* ===== DESIGN 5 - MINIMALISTE (ACTUEL) ===== */
.design5 .service-card-clean,

/* Carte de base - Style identique à .ld-access (bulle abonnements) */
/* AUCUNE animation au hover - le JavaScript gère tout (transform + box-shadow) */
.service-card-clean{
  margin:12px 0 0 0;
  padding:12px;
  background:#0a0a0a !important;
  border:1px solid rgba(255,255,255,.05) !important;
  border-radius:14px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02), 0 4px 12px rgba(0,0,0,.3);
  position:relative;
  cursor:default;
  /* Propriétés 3D pour l'effet relief */
  transform-style:preserve-3d;
  will-change:transform, box-shadow;
  /* UNIQUEMENT transitions sur transform et box-shadow */
  transition:transform .1s ease-out, box-shadow .1s ease-out;
}

/* Icône - pas d'animation */
.service-icon-clean{
  background:transparent !important;
  border:1px solid rgba(var(--service-color-rgb),0.3) !important;
  box-shadow:none !important;
}

/* Texte - pas d'animation */
.service-name-clean{
  text-shadow:0 2px 4px rgba(0,0,0,0.4) !important;
}

.service-count-clean{
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4)) !important;
}

.service-desc-clean{
  text-shadow:0 1px 2px rgba(0,0,0,0.4) !important;
}