/* ========================================
   🎯 STYLE-SERVICES.CSS - VERSION FINALE
   Feuille CSS commune pour toutes les pages services
   
   SOMMAIRE :
   1. Variables CSS communes
   2. Structure générale des services
   3. Hero sections (bannières colorées)
   4. Sections de contenu
   5. Grilles et cartes (service-grid, grid-3, grid-4)
   6. Icônes de service (style épuré blanc + ombre)
   7. Section paiement
   8. Listes de features
   9. Boutons CTA
   10. Responsive design
   11. Utilitaires
   12. Animations
   13. Composants spécialisés (FAQ, témoignages)
   14. Système de thèmes par service
   15. Styles spécifiques aux mondes (spirituel/psychique/physique)
   ======================================== */
/* Contenu des features avec icônes - Style étude personnalisée */


.etude-content-features {
    margin-top: 30px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
}

.etude-features-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--service-text-dark);
    margin-bottom: 10px;
    text-align: center;
}

.etude-features-subtitle {
    font-size: 1rem;
    color: var(--service-text-light);
    margin-bottom: 25px;
    text-align: center;
}

.etude-features-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.etude-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px 0;
}

.etude-feature-item .feature-icon {
    font-size: 2rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.etude-feature-item .feature-content {
    flex: 1;
}

.etude-feature-item .feature-content strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--service-text-dark);
    margin-bottom: 4px;
    line-height: 1.3;
}

.etude-feature-item .feature-content span {
    font-size: 0.9rem;
    color: var(--service-text-light);
    line-height: 1.4;
}

/* ========================================
   🎨 1. VARIABLES CSS COMMUNES
   Définit la palette de couleurs et valeurs de base
   ======================================== */
:root {
    /* Couleurs principales - peuvent être redéfinies par thème */
    --service-primary: #f59e0b;
    --service-primary-dark: #d97706;
    --service-secondary: #fbbf24;
    
    /* Textes et arrière-plans */
    --service-text-dark: #2d3748;
    --service-text-light: #718096;
    --service-bg-light: #f7fafc;
    --service-white: #ffffff;
    
    /* États et couleurs fonctionnelles */
    --service-success: #059669;
    --service-warning: #d97706;
    --service-border: #e2e8f0;
    
    /* Ombres */
    --service-shadow: rgba(0, 0, 0, 0.1);
    --service-shadow-primary: rgba(245, 158, 11, 0.1);
}

/* ========================================
   🗂️ 2. STRUCTURE GÉNÉRALE DES SERVICES
   Styles de base pour toutes les pages de services
   ======================================== */
.service-page {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
    color: var(--service-text-dark);
    background: #fafafa;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.service-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========================================
   🎯 3. HERO SECTIONS
   Bannières colorées en haut de chaque page service
   ======================================== */
.hero-service {
    background: linear-gradient(135deg, var(--service-primary) 0%, var(--service-primary-dark) 100%);
    color: var(--service-white);
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Motif de points décoratifs en arrière-plan */
.hero-service::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="white" opacity="0.1"/><circle cx="80" cy="40" r="2" fill="white" opacity="0.1"/><circle cx="40" cy="80" r="2" fill="white" opacity="0.1"/></svg>') repeat;
    opacity: 0.1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-badge {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 14px;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.3);
    font-weight: 600;
}

.hero-title {
    font-family: 'EB Garamond', serif;
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.4rem;
    margin-bottom: 30px;
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-question {
    background: rgba(255,255,255,0.1);
    padding: 30px;
    border-radius: 15px;
    font-size: 1.3rem;
    max-width: 700px;
    margin: 40px auto 0;
    border-left: 4px solid #ffd700;
    font-weight: 600;
}

/* ========================================
   📋 4. SECTIONS DE CONTENU
   Structure de base pour les différentes sections
   ======================================== */
.service-section {
    padding: 80px 0;
    background: var(--service-white);
}

.service-section.alt {
    background: var(--service-bg-light);
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    font-family: 'EB Garamond', serif;
    font-size: 2.5rem;
    color: var(--service-text-dark);
    margin-bottom: 15px;
    font-weight: 700;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--service-text-light);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ========================================
   🎨 5. GRILLES ET CARTES
   Système de grilles responsive pour organiser le contenu
   ======================================== */

/* Grille adaptative par défaut */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

/* Grille 2 colonnes */
.service-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-top: 60px;
}

/* Grille 3 colonnes fixes */
.service-grid-3,
.content-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.content-grid-3 {
    margin-bottom: 50px; /* Espacement entre deux grilles */
}

/* Grille 4 colonnes fixes */
.service-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 60px;
}

/* Cartes de base */
.service-card,
.content-card {
    background: var(--service-white);
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 5px 15px var(--service-shadow);
}

.content-card {
    padding: 30px 25px;
}

.service-card:hover,
.content-card:hover {
    transform: translateY(-5px);
    border-color: var(--service-primary);
    box-shadow: 0 20px 40px var(--service-shadow-primary);
}

/* ========================================
   ✨ 6. ICÔNES DE SERVICE
   Style épuré : fond blanc + ombre colorée
   ======================================== */
.service-icon {
    width: 80px;
    height: 80px;
    background: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 2rem;
    color: var(--service-primary);
    box-shadow: 0 12px 30px rgba(33, 150, 243, 0.25);
}

.content-icon {
    width: 70px;
    height: 70px;
    background: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.8rem;
    color: var(--service-primary);
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.25);
}

.service-card-title,
.content-card-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--service-text-dark);
    margin-bottom: 15px;
}

.content-card-title {
    font-size: 1.2rem;
    margin-bottom: 12px;
    line-height: 1.3;
}

.service-card-description,
.content-card-description {
    color: var(--service-text-light);
    line-height: 1.6;
}

.content-card-description {
    font-size: 0.9rem;
}

/* ========================================
   💳 7. SECTION PAIEMENT
   Système universel pour toutes les pages de commande
   ======================================== */
.payment-section {
    padding: 60px 20px;
    background: var(--service-bg-light);
}

.payment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Variantes de grille selon le service */
.payment-grid.simple {
    grid-template-columns: 1fr;
    max-width: 600px;
    text-align: center;
}

.payment-grid.complex {
    grid-template-columns: 2fr 1fr;
    gap: 60px;
}

.payment-info {
    background: var(--service-white);
    padding: 40px 30px;
    border-radius: 20px;
    border: 2px solid var(--service-primary);
    box-shadow: 0 10px 30px var(--service-shadow-primary);
    position: relative;
}

.payment-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--service-primary);
    color: var(--service-white);
    padding: 8px 25px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
}

.payment-title {
    color: var(--service-text-dark);
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
}

.payment-subtitle {
    color: var(--service-text-light);
    margin-bottom: 30px;
    font-size: 1.1rem;
    text-align: center;
    line-height: 1.6;
}

.price-section {
    text-align: center;
    margin: 30px 0;
}

.main-price {
    font-size: 3.5rem;
    font-weight: bold;
    color: var(--service-primary);
    margin-bottom: 10px;
}

.old-price {
    color: #9ca3af;
    font-size: 1.2rem;
    text-decoration: line-through;
    margin-bottom: 5px;
}

.savings {
    color: var(--service-success);
    font-weight: 600;
    font-size: 1rem;
}

/* Liste des avantages dans la section paiement */
.features-list {
    margin-top: 30px;
}

.features-list > div {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding: 12px 0;
}

.check-icon {
    color: var(--service-success);
    font-weight: bold;
    margin-right: 12px;
    font-size: 1.2rem;
}

#paypal-button-container {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    padding: 20px 0;
}

.security-info {
    margin-top: 25px;
    padding: 20px;
    background: #f0f9ff;
    border-radius: 12px;
    border: 1px solid #bae6fd;
}

.security-title {
    color: #0369a1;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.security-text {
    color: #0c4a6e;
    font-size: 0.85rem;
    line-height: 1.5;
}

.trust-badges {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    opacity: 0.7;
}

.trust-badge {
    font-size: 0.8rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ========================================
   📝 8. LISTES DE FEATURES
   Pour afficher des listes d'avantages ou caractéristiques
   ======================================== */
.feature-list {
    list-style: none;
    padding: 0;
    margin-top: 30px;
}

.feature-list li {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 25px;
    padding: 20px;
    background: var(--service-bg-light);
    border-radius: 12px;
    border-left: 4px solid var(--service-primary);
}

.feature-icon {
    font-size: 2.8rem !important;
    margin-right: 20px !important;
    margin-top: 5px;
    flex-shrink: 0;
    color: var(--service-primary);
}

.feature-icon-circle {
    width: 60px;
    height: 60px;
    background: var(--service-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0;
    color: white;
    font-size: 1.5rem;
}

.feature-content {
    flex: 1;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.feature-content h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--service-text-dark);
    margin-bottom: 8px !important;
    margin-top: 0 !important;
    order: 1;
}

.feature-content p {
    color: var(--service-text-light);
    line-height: 1.6;
    margin: 0;
    order: 2;
}

/* ========================================
   🎯 9. BOUTONS CTA
   Boutons d'appel à l'action principaux et secondaires
   ======================================== */
.cta-button {
    background: linear-gradient(135deg, var(--service-primary), var(--service-primary-dark));
    color: var(--service-white);
    padding: 18px 40px;
    border: none;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    margin-top: 30px;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px var(--service-shadow-primary);
    color: var(--service-white);
    text-decoration: none;
}

.cta-button-secondary {
    background: var(--service-white);
    color: var(--service-primary);
    border: 2px solid var(--service-primary);
}

.cta-button-secondary:hover {
    background: var(--service-primary);
    color: var(--service-white);
}

/* ========================================
   📱 10. RESPONSIVE DESIGN
   Adaptations pour tablettes et mobiles
   ======================================== */
@media (max-width: 1024px) {
    .service-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .content-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .hero-question {
        font-size: 1.1rem;
        padding: 20px;
    }
    
    .service-grid-2,
    .service-grid-4,
    .content-grid-3,
    .payment-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .main-price {
        font-size: 3rem;
    }
    
    .service-container {
        padding: 0 15px;
    }
    
    .service-section {
        padding: 60px 0;
    }
    
    .payment-info {
        padding: 30px 20px;
    }
    
    .service-card,
    .content-card {
        padding: 30px 20px;
    }
}

/* ========================================
   🔧 11. UTILITAIRES
   Classes d'aide pour alignement et espacement
   ======================================== */
.text-center {
    text-align: center;
}

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

.service-highlight {
    color: var(--service-primary);
    font-weight: 600;
}

.service-muted {
    color: var(--service-text-light);
    opacity: 0.8;
}

/* ========================================
   🎨 12. ANIMATIONS
   Animations d'apparition et de survol
   ======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* ========================================
   📄 13. COMPOSANTS SPÉCIALISÉS
   FAQ, témoignages, étapes de processus, etc.
   ======================================== */

/* FAQ */
.faq-grid {
    max-width: 800px;
    margin: 0 auto;
    margin-top: 60px;
}

.faq-item {
    background: var(--service-white);
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    overflow: hidden;
}

.faq-question {
    padding: 25px 30px;
    font-weight: 600;
    color: var(--service-text-dark);
    border-left: 4px solid var(--service-primary);
    background: #fffbeb;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background: #fef3c7;
}

.faq-answer {
    padding: 25px 30px;
    color: var(--service-text-light);
    line-height: 1.6;
    border-top: 1px solid var(--service-border);
}

/* Témoignages */
.testimonial-card {
    background: var(--service-bg-light);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    position: relative;
    text-align: center;
}

.testimonial-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: var(--service-primary);
}

.testimonial-quote {
    font-style: italic;
    color: #4a5568;
    margin-bottom: 20px;
    line-height: 1.6;
    font-size: 1.1rem;
}

.testimonial-author {
    font-weight: 600;
    color: var(--service-text-dark);
    margin-bottom: 5px;
}

.testimonial-role {
    color: var(--service-text-light);
    font-size: 0.9rem;
}

/* Étapes de processus */
.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.process-step {
    background: #f7fafc;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.step-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    color: white;
    background: var(--service-primary);
}

.step-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2d3748;
    margin: 20px 0 15px;
}

.step-description {
    color: #718096;
    line-height: 1.6;
}

/* Cartes de bénéfices avec pastilles numérotées */
.benefit-card,
.monde-card {
    background: var(--service-white);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    text-align: center;
    transition: all 0.3s ease;
}

.benefit-card:hover,
.monde-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.benefit-number {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3rem;
    margin: 0 auto 20px;
    color: white;
    background: var(--service-primary);
}

.benefit-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--service-text-dark);
    margin-bottom: 15px;
}

.benefit-description {
    color: var(--service-text-light);
    line-height: 1.6;
}

/* ========================================
   🎨 14. SYSTÈME DE THÈMES PAR SERVICE
   Permet de changer les couleurs selon le type de service
   ======================================== */

/* Thème Oracle - Violet/Mauve */
.service-oracle {
    --service-primary: #d946ef;
    --service-primary-dark: #8b5cf6;
    --service-shadow-primary: rgba(217, 70, 239, 0.2);
}

/* Thème Consultation - Fuchsia */
.service-consultation {
    --service-primary: #e91e63;
    --service-primary-dark: #c2185b;
    --service-shadow-primary: rgba(233, 30, 99, 0.2);
}

/* Thème Formation - Turquoise */
.service-formation {
    --service-primary: #00bcd4;
    --service-primary-dark: #0097a7;
    --service-shadow-primary: rgba(0, 188, 212, 0.2);
}

/* Thème iBook - Bleu */
.service-ibook {
    --service-primary: #2196f3;
    --service-primary-dark: #1976d2;
    --service-shadow-primary: rgba(33, 150, 243, 0.2);
}

/* Thème Étude - Orange (par défaut, pas besoin de redéfinir) */

/* ========================================
   🌟 15. STYLES SPÉCIFIQUES AUX MONDES
   Couleurs pour les 3 mondes de la géo-numérologie
   ======================================== */

/* Couleurs des pastilles selon les mondes */
.monde-spirituel .benefit-number {
    background: #F59E0B; /* Orange spirituel */
}

.monde-psychique .benefit-number {
    background: #E91E63; /* Fuchsia psychique */
}

.monde-physique .benefit-number {
    background: #06B6D4; /* Cyan physique */
}

/* Bordures colorées au hover (optionnel) */
.monde-spirituel:hover {
    border-left: 4px solid #F59E0B;
}

.monde-psychique:hover {
    border-left: 4px solid #E91E63;
}

.monde-physique:hover {
    border-left: 4px solid #06B6D4;
}




/* Volume Cards */
.volume-card {
    background: white;
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    border-top: 5px solid var(--service-primary);
    position: relative;
}

.volume-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--service-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
}

.volume-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}



/* Stats Cards */
.stats-card {
    background: white;
    padding: 40px 20px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    text-align: center;
    border-top: 5px solid var(--service-primary);
}

.stats-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.stats-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--service-primary);
    display: block;
}

.stats-description {
    color: var(--service-text-light);
    font-size: 1.1rem;
    margin-top: 10px;
}


/* Interpretation Steps - Oracle */
.interpretation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 60px;
}

.interpretation-step {
    background: var(--service-bg-light);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    position: relative;
}

.interpretation-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    color: white;
}

.interpretation-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--service-text-dark);
    margin: 20px 0 15px;
}

.interpretation-description {
    color: var(--service-text-light);
    line-height: 1.6;
}

/* Couleurs spécifiques pour chaque étape */
.step-1 { background: #e74c3c; }
.step-2 { background: #ff8c00; }
.step-3 { background: #ffd700; color: black; }
.step-4 { background: #32cd32; }
.step-5 { background: #00ced1; }
.step-6 { background: #1e3a8a; }
.step-7 { background: #8b5cf6; }

/* ========================================
   🔚 FIN DU FICHIER
   
   UTILISATION :
   - Ajoutez la classe correspondante à votre service :
     .service-oracle, .service-consultation, etc.
   - Utilisez les grilles selon vos besoins :
     .service-grid, .service-grid-3, .service-grid-4
   - Les icônes auront automatiquement le style épuré
   - Les pastilles des mondes prendront les bonnes couleurs
   
   MAINTENANCE :
   - Toutes les couleurs sont dans les variables CSS
   - Chaque section est documentée et commentée
   - Le responsive est géré automatiquement
   ======================================== */

   /* ========================================
   STYLES POUR PAGE CONSULTATION VIDEO
   A ajouter dans style-services.css
   ======================================== */

/* Variables pour le thème consultation */
.service-consultation {
    --service-primary: #e91e63;
    --service-primary-dark: #c2185b;
    --service-secondary: #fbbf24;
    --service-text-dark: #2d3748;
    --service-text-light: #718096;
    --service-bg-light: #f7fafc;
    --service-white: #ffffff;
    --service-success: #059669;
    --service-border: #e2e8f0;
    --service-shadow: rgba(0, 0, 0, 0.1);
}

/* Cartes de service */
.service-card {
    background: var(--service-white);
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 5px 15px var(--service-shadow);
}

.service-card:hover {
    transform: translateY(-5px);
    border-color: var(--service-primary);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* Icônes de service - effet ombre grise */
.service-icon {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.service-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Titres et descriptions des cartes */
.service-card-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--service-text-dark);
    margin-bottom: 15px;
}

.service-card-description {
    color: var(--service-text-light);
    line-height: 1.6;
}

/* Hero features - badges dans le bandeau */
.hero-features {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.hero-feature {
    background: rgba(255,255,255,0.1);
    padding: 15px 25px;
    border-radius: 25px;
    border: 1px solid rgba(255,255,255,0.2);
    font-weight: 500;
}

/* Section expert */
.expert-presentation {
    max-width: 1000px;
    margin: 0 auto;
    background: var(--service-bg-light);
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 10px 30px var(--service-shadow);