/* ==========================================================================
   STYLES PERSONNALISÉS POUR IMAGE BOX & ICON BOX
   ========================================================================== */
/* --- 1. STYLE : LIGNE FONCTIONNALITÉ (svc-feature-row) --- */

/* Le conteneur principal */
.svc-feature-row .elementor-image-box-wrapper,
.svc-feature-row .elementor-icon-box-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: .85rem;
    background: white;
    border: 1px solid var(--sk-bd);
    border-radius: 1rem;
    padding: 1rem 1.1rem;
    transition: border-color .2s, box-shadow .2s;
}

/* Réduire l'écart entre titre et description */
.svc-feature-row .elementor-image-box-title,
.svc-feature-row .elementor-icon-box-title {
    margin-top: 0;
    margin-bottom: 2px !important;
    /* Ajustez cette valeur (ex: 0, 2px ou 4px) */
    line-height: 1.2 !important;
}

/* Forcer l'alignement du texte à gauche pour Image Box et Icon Box */
.svc-feature-row .elementor-image-box-content,
.svc-feature-row .elementor-icon-box-content {
    text-align: left !important;
}

/* Effet au survol */
.svc-feature-row:hover .elementor-image-box-wrapper,
.svc-feature-row:hover .elementor-icon-box-wrapper {
    border-color: rgba(195, 0, 121, .18);
    box-shadow: 0 4px 18px rgba(195, 0, 121, .07);
}

/* Le carré pour l'image ou l'icône */
.svc-feature-row .elementor-image-box-img,
.svc-feature-row .elementor-icon-box-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 9px;
    background: var(--sk-pk-a);
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0 !important;
    overflow: hidden;
}

/* L'élément visuel interne (image ou icône) */
.svc-feature-row .elementor-image-box-img img,
.svc-feature-row .elementor-icon-box-icon i,
.svc-feature-row .elementor-icon-box-icon svg {
    width: 20px !important;
    height: auto;
    font-size: 18px;
    /* Pour les icônes FontAwesome */
    color: var(--sk-pk);
    fill: var(--sk-pk);
    object-fit: contain;
}


/* --- 2. STYLE : CARTE BÉNÉFICE (svc-benefit-card) --- */

/* Le conteneur principal */
.svc-benefit-card .elementor-image-box-wrapper,
.svc-benefit-card .elementor-icon-box-wrapper {
    background: var(--sk-ow);
    border: 1px solid var(--sk-bd);
    border-radius: var(--sk-r);
    padding: 1.5rem;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    text-align: left;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Effet au survol */
.svc-benefit-card:hover .elementor-image-box-wrapper,
.svc-benefit-card:hover .elementor-icon-box-wrapper {
    transform: translateY(-5px);
    border-color: rgba(195, 0, 121, .18);
    box-shadow: 0 12px 32px rgba(195, 0, 121, .12);
}

/* L'icône ou l'image du haut */
.svc-benefit-card .elementor-image-box-img,
.svc-benefit-card .elementor-icon-box-icon {
    margin-bottom: 1rem !important;
    display: inline-block;
}

.svc-benefit-card .elementor-image-box-img img,
.svc-benefit-card .elementor-icon-box-icon i,
.svc-benefit-card .elementor-icon-box-icon svg {
    width: 50px !important;
    height: auto;
    font-size: 40px;
    color: var(--sk-pk);
    fill: var(--sk-pk);
}

/* --- 3. TYPOGRAPHIE COMMUNE --- */

/* Titres */
.svc-feature-row .elementor-image-box-title,
.svc-feature-row .elementor-icon-box-title,
.svc-benefit-card .elementor-image-box-title,
.svc-benefit-card .elementor-icon-box-title {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    font-size: .95rem !important;
    color: var(--sk-nv) !important;
}

/* Descriptions */
.svc-feature-row .elementor-image-box-description,
.svc-feature-row .elementor-icon-box-description,
.svc-benefit-card .elementor-image-box-description,
.svc-benefit-card .elementor-icon-box-description {
    font-size: .83rem !important;
    color: var(--sk-mu) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* --- 1. STYLE : LIGNE FONCTIONNALITÉ (sk-service-card) --- */
/* --- 1. Base Commune (Standard) --- */
/* --- BASE : Appliquée aux deux styles --- */
.sk-service-card .elementor-icon-box-title,
.sk-service-card .elementor-image-box-title {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: var(--sk-nv); /* Couleur par défaut */
}

.sk-service-card .elementor-icon-box-description,
.sk-service-card .elementor-image-box-description {
    font-size: .85rem !important;
    line-height: 1.65 !important;
    color: var(--sk-mu); /* Couleur par défaut */
}

.sk-service-card .elementor-icon-box-description a,
.sk-service-card .elementor-image-box-description a {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    margin-top: 1rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--sk-pk) !important;  
    transition: gap .2s;
}

.sk-service-card .elementor-icon-box-description a:hover {
    gap: .5rem;
}

/* --- MODIFICATEUR : FEATURED (On ne change que les couleurs) --- */

/* Fond dégradé */
.sk-service-card.featured .elementor-icon-box-wrapper,
.sk-service-card.featured .elementor-image-box-wrapper {
    background: linear-gradient(135deg, var(--sk-nv) 0%, var(--sk-nv-l) 100%) !important;
    border-radius: var(--sk-r);
    padding: 1.5rem;
}

/* Couleurs de texte pour le mode sombre */
.sk-service-card.featured .elementor-icon-box-title,
.sk-service-card.featured .elementor-image-box-title {
    color: #ffffff !important;
}

.sk-service-card.featured .elementor-icon-box-description,
.sk-service-card.featured .elementor-image-box-description {
    color: rgba(255, 255, 255, .6) !important;
}

/* Icône adaptée au mode sombre */
.sk-service-card.featured .elementor-icon,
.sk-service-card.featured .elementor-image-box-img {
    background: rgba(255, 255, 255, .1) !important;   
}

.sk-service-card.featured .elementor-icon i,
.sk-service-card.featured .elementor-icon svg {
    color: #fff !important;
    fill: #fff !important;
}
/* ==========================================================================
   STYLES : RSE CARD & PILLAR (Image + Icon Box)
   ========================================================================== */

/* --- STYLE : RSE CARD (Centré, ombre légère) --- */
.sk-rse-card .elementor-icon-box-wrapper,
.sk-rse-card .elementor-image-box-wrapper {
    background: var(--sk-ow);
    border-radius: var(--sk-r);
    padding: 1.6rem;
    border: 1px solid rgba(26, 37, 64, .06);
    text-align: center;
    height: 100%;
    transition: transform .25s, box-shadow .25s;
}

.sk-rse-card:hover .elementor-icon-box-wrapper,
.sk-rse-card:hover .elementor-image-box-wrapper {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(195, 0, 121, .1);
}

.sk-rse-card .elementor-icon,
.sk-rse-card .elementor-image-box-img {
    background: transparent !important;
    margin-bottom: 1rem !important;
}

.sk-rse-card .elementor-icon i,
.sk-rse-card .elementor-icon svg,
.sk-rse-card .elementor-image-box-img img {
    font-size: 1.9rem;
    width: 1.9rem;
    height: auto;
    color: var(--sk-pk) !important;
    fill: var(--sk-pk) !important;
}

.sk-rse-card .elementor-icon-box-title,
.sk-rse-card .elementor-image-box-title {
    font-family: 'Syne', sans-serif !important;
    font-weight: 700 !important;
    font-size: .9rem !important;
    color: var(--sk-nv) !important;
    margin-bottom: 0.5rem !important;
}

.sk-rse-card .elementor-icon-box-description,
.sk-rse-card .elementor-image-box-description {
    font-size: .79rem !important;
    color: var(--sk-mu) !important;
    line-height: 1.58 !important;
}

/* --- STYLE : PILLAR (Sombre, minimaliste) --- */

.sk-pillar .elementor-icon-box-wrapper,
.sk-pillar .elementor-image-box-wrapper {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 1rem;
    padding: 1rem;
    transition: background .2s;
    text-align: left;
}

.sk-pillar:hover .elementor-icon-box-wrapper,
.sk-pillar:hover .elementor-image-box-wrapper {
    background: rgba(195, 0, 121, .1);
}

.sk-pillar .elementor-icon,
.sk-pillar .elementor-image-box-img {
    margin-bottom: .4rem !important;
    display: inline-block;
}

.sk-pillar .elementor-icon i,
.sk-pillar .elementor-icon svg,
.sk-pillar .elementor-image-box-img img {
    color: #fff !important;
    fill: #fff !important;
    font-size: 1.35rem;
    width: 25px;
    height: auto;
}

.sk-pillar .elementor-icon-box-title,
.sk-pillar .elementor-image-box-title {
    color: #fff !important;
    font-family: 'Syne', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1.2rem !important;
    margin-bottom: 0.3rem !important;
}

.sk-pillar .elementor-icon-box-description,
.sk-pillar .elementor-image-box-description {
    color: rgba(255, 255, 255, .45) !important;
    font-size: 0.95rem !important;
    line-height: 1.5;
    margin: 0 !important;
}

/* --- STYLE : ASIDE (Sombre, minimaliste) --- */
/* Style de la ligne de statistique */
.svc-aside-stat .elementor-image-box-wrapper {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: .85rem;
    padding: .85rem 1rem;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1rem;
    margin-bottom: .65rem;
    transition: background .3s ease;
}

.svc-aside-stat:hover .elementor-image-box-wrapper {
    background: rgba(195, 0, 121, .12);
    border-color: rgba(195, 0, 121, .2);
}

/* Le Titre (Conteneur du chiffre) */
.svc-aside-stat .elementor-image-box-title {
    font-family: 'Syne', sans-serif !important;
    font-weight: 300 !important;
    font-size: 1rem !important;
    color: #ffffff !important;
    /* Couleur par défaut blanche */
    margin: 0 !important;
    flex-shrink: 0;
    font-style: normal;
    /* Annule l'italique par défaut de <em> */
    text-align: left !important;
}

/* Ciblage spécifique du contenu entre <em> </em> */
.svc-aside-stat .elementor-image-box-title em {
    color: var(--sk-pk-l, #ff007b) !important;
    /* Votre rose/rouge brillant */
    font-style: normal;
    /* Sécurité pour éviter l'italique */
    font-weight: 500 !important;
}

/* La Description (Libellé) */
.svc-aside-stat .elementor-image-box-description {
    font-size: .78rem !important;
    color: rgba(255, 255, 255, .55) !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

/* ── SK-HERO-FEATURES : Image Box & Icon Box ── */

/* 1. Le wrapper global */
.sk-hero-features .elementor-image-box-wrapper,
.sk-hero-features .elementor-icon-box-wrapper {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: .7rem .9rem !important;
    box-sizing: border-box;
    border: 1px solid var(--sk-bd);
    border-radius: .6rem;
    background: var(--sk-ow);
    transition: all .25s ease;
    cursor: default;
    gap: 0;
}

/* 2. L'icône / l'image (équivalent de elementor-icon-list-icon) */
.sk-hero-features .elementor-image-box-img,
.sk-hero-features .elementor-icon-box-icon {
    width: 1.2rem !important;
    height: 1.2rem !important;
    flex-shrink: 0;
    margin: 0 10px 0 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sk-hero-features .elementor-image-box-img img,
.sk-hero-features .elementor-icon-box-icon i,
.sk-hero-features .elementor-icon-box-icon svg {
    width: 1.2rem !important;
    height: 1.2rem !important;
    font-size: 1.2rem;
    object-fit: contain;
}

/* 3. Le bloc texte (titre + description) — équivalent de elementor-icon-list-text */
.sk-hero-features .elementor-image-box-content,
.sk-hero-features .elementor-icon-box-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
    gap: 0;
}

/* 4. Le titre (texte principal de la ligne) */
.sk-hero-features .elementor-image-box-title,
.sk-hero-features .elementor-icon-box-title {
    flex: 1;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
    color: var(--sk-nv) !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    width: 100% !important;
}

/* 5. Le check — colle à droite grâce au space-between du parent */
.sk-hero-features .elementor-image-box-title em,
.sk-hero-features .elementor-icon-box-title em {
    font-style: normal;
    color: var(--sk-pk, #c30079);
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    padding-left: 15px;
}

/* 6. La description — masquée dans ce layout ligne (optionnel) */
.sk-hero-features .elementor-image-box-description,
.sk-hero-features .elementor-icon-box-description {
    display: none !important;
}

/* 7. Effet au survol */
.sk-hero-features:hover .elementor-image-box-wrapper,
.sk-hero-features:hover .elementor-icon-box-wrapper {
    background: var(--sk-pk-a, rgba(195, 0, 121, 0.05));
    border-color: rgba(195, 0, 121, 0.3);
    transform: translateX(4px);
}