/* --- CONFIGURATION GÉNÉRALE & COULEURS --- */
:root {
    --primary: #2D8B94; /* Bleu Divana */
    --gold: #C5A059;    /* Doré Divana */
    --dark: #2D8B94;    /* Même sombre que page contact */
    --bg-soft: #FFF9C4; /* LE JAUNE POUSSIN */
    --border-gold: #E8D5A0; /* Bordure dorée du thème */
    --white: #ffffff;
    --shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.services-interactive {
    padding: 120px 5% 80px;
    background-color: var(--bg-soft); /* FOND JAUNE */
    min-height: 100vh;
}

/* --- HEADER --- */
.minimal-header {
    text-align: center;
    margin-bottom: 60px;
}

.pro-title {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 15px;
}

.pro-title span {
    color: var(--gold);
    font-style: italic;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #6D9B94; /* Couleur texte plus douce adaptée au jaune */
    max-width: 600px;
    margin: 0 auto;
}

/* --- GRILLE DES PÔLES (GROUPES) --- */
.groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
}

.group-item {
    background: var(--bg-soft); /* FOND JAUNE COMME CONTACT */
    padding: 30px 20px;
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid var(--border-gold); /* BORDURE DORÉE */
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

.group-item:hover {
    transform: translateY(-5px);
    background: var(--primary); /* Au survol, devient bleu */
    border-color: var(--primary);
}

/* Quand on survole, le texte devient blanc */
.group-item:hover h2,
.group-item:hover p,
.group-item:hover .group-number,
.group-item:hover .group-icon {
    color: var(--white);
}

.group-item.active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(45, 139, 148, 0.2);
}

.group-icon {
    font-size: 2.5rem;
    color: var(--gold); /* Icone dorée par défaut */
    margin-bottom: 15px;
    transition: color 0.3s;
}

.group-number {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.group-item h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
    color: var(--dark);
}

.group-item p {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
}

/* Styles quand la carte est active */
.group-item.active h2, 
.group-item.active p, 
.group-item.active .group-number,
.group-item.active .group-icon {
    color: var(--white);
}

.indicator {
    margin-top: 15px;
    font-size: 1rem;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s;
    color: var(--white);
}

.group-item.active .indicator {
    opacity: 1;
    transform: translateY(0);
}

/* --- ZONE D'AFFICHAGE DYNAMIQUE (DÉTAILS) --- */
.details-display-zone {
    background: var(--white); /* On garde blanc ici pour la lisibilité du contenu */
    border-radius: 20px;
    padding: 40px;
    box-shadow: var(--shadow);
    min-height: 300px;
    position: relative;
    border: 1px solid var(--border-gold); /* Rappel de la bordure */
}

.details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
}

.details-header h2 {
    font-family: 'Playfair Display', serif;
    color: var(--dark);
    font-size: 2rem;
}

.close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #999;
    transition: color 0.3s;
}

.close-btn:hover {
    color: var(--primary);
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    transition: all 0.4s ease;
}

.placeholder-text {
    grid-column: 1 / -1;
    text-align: center;
    color: #aaa;
    font-size: 1.2rem;
    margin-top: 80px;
    font-style: italic;
}

/* --- CARTES SERVICES INDIVIDUELS --- */
.service-card-detail {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    opacity: 0;
    transition: transform 0.3s;
}

.service-card-detail:hover {
    transform: translateY(-5px);
    border-color: var(--gold);
}

.img-wrapper {
    height: 200px;
    overflow: hidden;
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.service-card-detail:hover .img-wrapper img {
    transform: scale(1.1);
}

.text-content {
    padding: 25px;
}

.text-content h3 {
    color: var(--primary);
    font-size: 1.3rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.text-content p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

/* --- CTA --- */
.consultation-cta {
    text-align: center;
    margin-top: 60px;
}

.consultation-cta p {
    font-size: 1.1rem;
    margin-bottom: 20px;
    font-weight: 600;
    color: var(--dark);
}

.btn-pro {
    display: inline-block;
    padding: 15px 40px;
    background: var(--dark);
    color: var(--white);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    transition: all 0.3s;
    border: 1px solid transparent;
}

.btn-pro:hover {
    background: transparent;
    color: var(--dark);
    border-color: var(--dark);
    transform: translateY(-3px);
}

/* --- ANIMATIONS --- */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .groups-grid {
        grid-template-columns: 1fr;
    }

    .group-item {
        display: flex;
        align-items: center;
        text-align: left;
        gap: 20px;
    }

    .group-icon {
        margin-bottom: 0;
        font-size: 2rem;
    }

    .indicator {
        margin-left: auto;
        margin-top: 0;
        transform: rotate(-90deg);
    }
    
    .group-item.active .indicator {
        transform: rotate(0);
    }

    .details-display-zone {
        padding: 20px;
    }
    
    .details-header h2 {
        font-size: 1.5rem;
    }
}
/* --- ZONE D'AFFICHAGE EN MOSAÏQUE --- */
.details-grid {
    display: grid;
    /* Force 3 colonnes de taille égale */
    grid-template-columns: repeat(3, 1fr); 
    gap: 25px;
    transition: all 0.4s ease;
    padding: 10px 0;
}

/* --- AJUSTEMENT DES CARTES POUR LA MOSAÏQUE --- */
.service-card-detail {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column; /* Garde l'image au dessus du texte */
    border: 1px solid #eee;
    opacity: 0;
    height: 100%; /* Permet aux cartes d'avoir la même hauteur sur une ligne */
    transition: transform 0.3s, border-color 0.3s;
}

.img-wrapper {
    height: 180px; /* Légèrement réduit pour l'équilibre visuel en 3 colonnes */
    overflow: hidden;
}

/* --- RESPONSIVE : Tablettes et Mobiles --- */
@media (max-width: 1024px) {
    .details-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes sur tablettes */
    }
}

@media (max-width: 768px) {
    .details-grid {
        grid-template-columns: 1fr; /* 1 seule colonne sur mobile */
    }
}
/* --- OPTIMISATION MOSAÏQUE RÉPONSIVE --- */

/* Zone de grille principale */
.details-grid {
    display: grid;
    /* 3 colonnes par défaut sur desktop */
    grid-template-columns: repeat(3, 1fr); 
    gap: 20px;
    align-items: start; /* Permet aux cartes de ne pas toutes s'étirer à la même hauteur (effet mosaïque) */
}

/* --- LE CHANGEMENT MAJEUR : 2 COLONNES SUR MOBILE --- */
@media (max-width: 768px) {
    .details-grid {
        /* On force 2 colonnes même sur petit écran */
        grid-template-columns: repeat(2, 1fr); 
        gap: 12px; /* On réduit l'espace pour gagner de la place */
        padding: 5px;
    }

    .service-card-detail {
        /* On réduit la taille des textes pour le mode 2 colonnes mobile */
        border-radius: 8px;
    }

    .img-wrapper {
        height: 120px; /* Image plus petite pour le mobile */
    }

    .text-content {
        padding: 12px;
    }

    .text-content h3 {
        font-size: 0.9rem; /* Titre plus compact */
        margin-bottom: 5px;
    }

    .text-content p {
        font-size: 0.75rem; /* Description plus petite */
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Limite à 3 lignes pour garder l'aspect mosaïque propre */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Animation d'apparition progressive (Stagger) */
.service-card-detail {
    opacity: 0;
    animation: slideUpFade 0.5s ease forwards;
}

/* Optionnel : Pour un vrai look "Pinterest", vous pouvez utiliser 'column-count' 
   mais le Grid reste plus stable pour les interactions JS. */

/* --- ADAPTATION POUR 13 SERVICES EN MOSAÏQUE --- */

.details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 col sur PC */
    gap: 20px;
    align-items: start; 
}

@media (max-width: 768px) {
    .details-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 col sur Mobile */
        gap: 12px;
    }

    /* On réduit un peu la taille de l'image pour voir plus de services d'un coup */
    .img-wrapper {
        height: 100px; 
    }

    .text-content {
        padding: 10px;
    }

    .text-content h3 {
        font-size: 0.85rem;
        line-height: 1.2;
        margin-bottom: 4px;
    }

    .text-content p {
        font-size: 0.75rem;
        line-height: 1.3;
        /* Limite stricte pour 13 services : on ne veut pas de cartes trop longues */
        display: -webkit-box;
        -webkit-line-clamp: 3; 
        -webkit-box-orient: vertical;
        overflow: hidden;
        color: #666;
    }
}

/* Petit effet d'entrée pour les 13 cartes */
.service-card-detail {
    animation: fadeInScale 0.4s ease backwards;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}