/* =====================================
   SERVICES & EMPLOI - BACKGROUND IMAGES
   Ajouter à main.css ou créer fichier séparé
   ===================================== */

/* === SERVICE CARDS AVEC IMAGES DE FOND === */
.service-card {
    position: relative;
    overflow: hidden;
    /* Le reste du style existe déjà dans main.css */
}

/* Background image layer - DERRIÈRE tout */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.6s ease;
}

/* Overlay blanc transparent - AJUSTABLE */
.service-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(255, 255, 255, 0.85); /* ← TWEAKABLE (0.7 - 0.95) */
    backdrop-filter: blur(2px); /* ← TWEAKABLE (0px - 10px) */
    transition: all 0.3s ease;
}

/* Contenu (icon + texte) PAR-DESSUS */
.service-card > * {
    position: relative;
    z-index: 2;
}

/* === IMAGES DE FOND SPÉCIFIQUES === */
/* Card 1: Développement Web */
.service-card:nth-child(1)::before {
    background-image: url('../images/services/progr.jpg');
}

/* Card 2: Applications Web */
.service-card:nth-child(2)::before {
    background-image: url('../images/services/prognight.jpg');
}

/* Card 3: Optimisation SEO */
.service-card:nth-child(3)::before {
    background-image: url('../images/services/keepup.jpg');
}

/* === HOVER EFFECTS === */
.service-card:hover::before {
    transform: scale(1.05); /* Zoom léger de l'image */
}

.service-card:hover::after {
    background: rgba(255, 255, 255, 0.75); /* Plus transparent au hover - TWEAKABLE */
}

/* === EMPLOI CARD AVEC IMAGE === */
.emploi-content {
    position: relative;
    overflow: hidden;
    /* Le reste existe déjà */
}

/* Background image emploi */
.emploi-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-image: url('../images/services/womcomput.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.6s ease;
}

/* Overlay blanc emploi */
.emploi-content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(255, 255, 255, 0.88); /* TWEAKABLE */
    backdrop-filter: blur(2px); /* TWEAKABLE */
}

/* Contenu emploi par-dessus */
.emploi-content > * {
    position: relative;
    z-index: 2;
}

.emploi-content:hover::before {
    transform: scale(1.03);
}

.emploi-content:hover::after {
    background: rgba(255, 255, 255, 0.80);
}

/* === SI PAS D'IMAGES (TEMPORAIRE) === */
/* Utilise des gradients en attendant */
/*
.service-card:nth-child(1)::before {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.service-card:nth-child(2)::before {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.service-card:nth-child(3)::before {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.emploi-content::before {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}
*/

/* === TWEAKING GUIDE === */
/*
AJUSTER L'OPACITÉ DE L'OVERLAY:
- Plus transparent (voir + l'image): 0.7
- Équilibré: 0.85
- Plus opaque (voir - l'image): 0.95

EXEMPLE:
background: rgba(255, 255, 255, 0.7); // Image très visible
background: rgba(255, 255, 255, 0.85); // Équilibré
background: rgba(255, 255, 255, 0.95); // Image subtile

AJUSTER LE BLUR:
- Pas de blur: 0px
- Léger: 2px
- Moyen: 5px
- Fort: 10px

EXEMPLE:
backdrop-filter: blur(0px); // Net
backdrop-filter: blur(2px); // Léger flou
backdrop-filter: blur(5px); // Moyen flou
*/