/* ---- Services Section ---- */
.essik-services-section {
    padding-top: 80px;   /* py-20 */
    padding-bottom: 80px;
    background-color: #f9fafb; /* bg-gray-50 */
}
.essik-services-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}
.essik-services-title {
    font-size: 1.875rem;   /* text-3xl */
    font-weight: 800;
    text-align: center;
    margin-bottom: 0;   /* l'en-tête .essik-services-head gère les espacements */
}
/* En-tête façon React : badge pill + titre + sous-titre centrés */
.essik-services-head { text-align: center; max-width: 48rem; margin: 0 auto 3rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.essik-services-badge { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .75rem; border-radius: 9999px; background: rgba(255,85,0,.1); color: #FF5500; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.essik-services-badge svg { display: block; }
.essik-section-subtitle { font-size: 1rem; color: #4b5563; line-height: 1.6; margin: 0; }
/* Filtres pills façon React (Tous les services + pôles dynamiques) */
.essik-services-filters { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem; margin: 0 auto 2.5rem; }
.essik-filter-pill { padding: .5rem 1rem; border-radius: .75rem; font-size: .75rem; font-weight: 700; cursor: pointer; background: #fff; color: #334155; border: 1px solid #e2e8f0; transition: all .2s; }
.essik-filter-pill:hover { border-color: rgba(255,85,0,.5); }
.essik-filter-pill.is-active { background: #FF5500; border-color: #FF5500; color: #fff; box-shadow: 0 4px 12px rgba(255,85,0,.25); }
@media (min-width: 768px) {
    .essik-services-title { font-size: 2.25rem; } /* text-4xl if you want */
}
.essik-services-grid {
    display: grid;
    gap: 2rem;            /* gap-8 */
    grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px) {
    .essik-services-grid { grid-template-columns: repeat(2, 1fr); } /* sm:grid-cols-2 */
}
@media (min-width: 1024px) {
    .essik-services-grid { grid-template-columns: repeat(3, 1fr); } /* lg:grid-cols-3 */
}
/* Parité React : 1 carte par ligne sur mobile, même si une ancienne
 * valeur Elementor force plusieurs colonnes (sélecteurs Elementor
 * plus spécifiques). Desktop/tablette restent pilotés par le widget. */
@media (max-width: 767px) {
    .essik-services-grid { grid-template-columns: 1fr !important; }
}
.essik-service-card {
    background: #fff;
    border: 1px solid rgba(226,232,240,.8);
    border-radius: 1rem;   /* rounded-2xl React */
    padding: 1.5rem;         /* p-6 */
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    /* Hover React (translate + shadow-xl + bordure orange) géré dans essik-animations.css */
}
.essik-service-card:hover {
    box-shadow: 0 20px 40px rgba(2,6,23,.12);
    border-color: var(--essik-card-hover-border, rgba(255,85,0,.5));
}
.essik-service-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.essik-service-icon {
    margin-bottom: 1.25rem;   /* mb-5 React */
    width: 3rem;   /* w-12 React */
    height: 3rem;
    border-radius: .75rem;   /* rounded-xl React */
    background: rgba(255,85,0,.08);   /* bg-orange-50 React */
    color: #FF5500;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Carte survolée : pastille pleine (administrable via Style > Survol, défauts React) */
.essik-service-card:hover .essik-service-icon { background: var(--essik-icon-hover-bg, #FF5500); color: var(--essik-icon-hover-color, #fff); }
.essik-service-card:hover .essik-service-title { color: var(--essik-card-title-hover, #FF5500); }
/* FontAwesome (fill) + Lucide (stroke) héritent tous deux de la couleur orange */
.essik-service-icon svg.e-font-icon-svg { fill: currentColor; width: 1.5rem; height: 1.5rem; display: block; }
.essik-service-icon svg.essik-lucide { stroke: currentColor; display: block; }
.essik-service-icon .essik-icon-fallback { font-weight: 800; font-size: 1.25rem; }
.essik-service-num { font-family: ui-monospace, monospace; font-size: .7rem; font-weight: 700; color: #94a3b8; background: #f1f5f9; padding: .25rem .6rem; border-radius: .5rem; align-self: flex-start; margin-bottom: .75rem; }
.essik-service-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.essik-service-title {
    font-size: 1.125rem;   /* text-lg */
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}
.essik-service-description {
    font-size: 0.875rem;   /* base */
    color: #6b7280;        /* text-gray-600 */
    line-height: 1.6;
    margin-top: auto;      /* push description down if icon+title height varies */
}
.essik-service-link {
    margin-top: 1rem;
    align-self: start;
    font-size: 0.875rem;
    color: #FF5500;
    font-weight: 700;
    text-decoration: none;
}
.essik-service-link:hover { opacity: 0.8; }
/* Vignette dynamique : image mise en avant du CPT (ou image manuelle) */
.essik-service-card { overflow: hidden; }
.essik-service-thumb { margin: -1.5rem -1.5rem 1.25rem; }
.essik-service-thumb img { width: 100%; height: 180px; object-fit: cover; display: block; }
/* Bandeau CTA bas façon React : carte centrée, texte à gauche + bouton à droite */
.essik-services-cta { margin-top: 3.5rem; display: flex; justify-content: center; }
.essik-services-cta-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 10px 30px rgba(2,6,23,.08); display: flex; flex-direction: row; align-items: center; gap: 1.5rem; max-width: 56rem; width: 100%; justify-content: space-between; }
.essik-services-cta-texts { text-align: left; }
.essik-services-cta-title { font-size: 1rem; font-weight: 700; color: #0A0D12; margin: 0; }
.essik-services-cta-text { font-size: .75rem; color: #64748b; margin: .25rem 0 0; }
.essik-services-cta-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.25rem; border-radius: .75rem; background: #FF5500; color: #fff !important; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 12px rgba(255,85,0,.3); flex-shrink: 0; }
.essik-services-cta-btn:hover { background: #E04B00; color: #fff !important; }
@media (max-width: 640px) {
    .essik-services-cta-card { flex-direction: column; text-align: center; }
    .essik-services-cta-texts { text-align: center; }
}