/*
================================================================================
MYTEL - STYLESHEET PRINCIPAL
================================================================================
Site: MyTEL Solutions Télécommunications
Description: Feuille de style principale pour le site MyTEL
Version: 1.0
Dernière mise à jour: 2024
================================================================================
*/

/* ============================================================================
   TABLE DES MATIÈRES
   ============================================================================
   1. VARIABLES CSS (Couleurs & Thème)
   2. RESET & BASE
   3. HEADER & NAVIGATION
   4. HERO SECTION
   5. BANDEAU DE CONFIANCE
   6. SERVICES
   7. BÉNÉFICES
   8. CASE STUDIES
   9. AVANTAGES
   10. TÉMOIGNAGES
   11. PARTENAIRES
   12. CTA FINAL
   13. FOOTER
   14. ANIMATIONS
   15. RESPONSIVE DESIGN
============================================================================ */


/* ============================================================================
   1. VARIABLES CSS (Couleurs & Thème)
   ============================================================================
   Définition de la palette de couleurs et des variables réutilisables
   pour maintenir la cohérence visuelle à travers tout le site.
============================================================================ */

:root {
    /* Couleurs Principales */
    --primary-color: #660033;           /* Violet foncé - Couleur de marque principale */
    --primary-light: #800040;           /* Violet moyen - Variante claire */
    --primary-lighter: #99004c;         /* Violet clair - Variante très claire */

    /* Couleurs Secondaires */
    --secondary-color: #85e0e0;         /* Cyan - Couleur d'accent */
    --secondary-light: #adebeb;         /* Cyan clair */
    --secondary-lighter: #d6f5f5;       /* Cyan très clair */

    /* Couleurs Système */
    --success-color: #28a745;           /* Vert - Succès, confirmations */
    --danger-color: #dc3545;            /* Rouge - Erreurs, alertes */
    --warning-color: #ffc107;           /* Jaune - Avertissements, promos */
    --info-color: #17a2b8;              /* Bleu - Informations */

    /* Couleurs Neutres */
    --white: #ffffff;                   /* Blanc pur */
    --light-gray: #f8f9fa;              /* Gris très clair - Fonds */
    --medium-gray: #6c757d;             /* Gris moyen - Textes secondaires */
    --dark-gray: #343a40;               /* Gris foncé - Footer */
    --text-dark: #212529;               /* Noir doux - Texte principal */
}


/* ============================================================================
   2. RESET & BASE
   ============================================================================
   Reset CSS et styles de base pour assurer une cohérence
   entre les différents navigateurs.
============================================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    overflow-x: hidden;
}

/* Container principal - Largeur maximale pour le contenu */
.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Titres et sous-titres de section */
.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.section-subtitle {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 4rem;
    color: var(--medium-gray);
}


/* ============================================================================
   3. HEADER & NAVIGATION
   ============================================================================
   Header fixe avec logo, menu de navigation et informations de contact.
   Le header reste visible lors du scroll pour faciliter la navigation.
============================================================================ */

.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(102, 0, 51, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    padding: 1rem 2rem;
    transition: all 0.3s ease;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Logo */
.logo {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--white);
    text-decoration: none;
}

/* Menu de navigation principal */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: var(--secondary-color);
}

/* Informations de contact dans le header */
.contact-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--white);
    font-weight: 600;
}

.contact-phone {
    background: var(--secondary-color);
    color: var(--primary-color);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.contact-phone:hover {
    transform: scale(1.05);
}

/* Bouton menu mobile (caché par défaut, visible sur mobile) */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--white);
    font-size: 1.5rem;
    cursor: pointer;
}


/* ============================================================================
   4. HERO SECTION
   ============================================================================
   Section héro principale avec titre accrocheur, description
   et appel à l'action. Inclut un badge promotionnel animé.
============================================================================ */

.hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: var(--white);
    padding: 120px 2rem 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Motif de fond SVG pour effet visuel */
.hero::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"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.1;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Badge promotionnel avec animation pulse */
.promo-badge {
    background: var(--warning-color);
    color: var(--primary-color);
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 2rem;
    animation: pulse 2s infinite;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.3);
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.hero p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

/* Bouton CTA principal */
.cta-primary {
    background: var(--secondary-color);
    color: var(--primary-color);
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(133, 224, 224, 0.3);
}

.cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(133, 224, 224, 0.4);
}


/* ============================================================================
   5. BANDEAU DE CONFIANCE
   ============================================================================
   Section affichant les statistiques clés et les logos des partenaires
   pour établir la crédibilité et la confiance.
============================================================================ */

.trust-banner {
    background: linear-gradient(to right, var(--primary-color), var(--primary-light));
    padding: 2rem;
    text-align: center;
    color: var(--white);
}

/* Grille des statistiques */
.trust-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.trust-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.trust-stat-number {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--secondary-color);
    margin-bottom: 0.5rem;
}

.trust-stat-label {
    font-size: 1rem;
    opacity: 0.9;
}

/* Logos des partenaires */
.trust-logos {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.trust-logos-text {
    font-size: 0.9rem;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.trust-logos-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.trust-logo {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid rgba(133, 224, 224, 0.3);
}


/* ============================================================================
   6. SERVICES
   ============================================================================
   Section présentant les 6 services principaux sous forme de cartes.
   Chaque carte affiche une icône, un titre, une description et un lien.
============================================================================ */

.services {
    padding: 80px 2rem;
    background: var(--light-gray);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Carte de service individuelle */
.service-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

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

/* Icône circulaire du service */
.service-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: var(--white);
}

.service-card h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.service-card p {
    margin-bottom: 1.5rem;
    color: var(--medium-gray);
}

.service-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s ease;
}

.service-link:hover {
    color: var(--primary-light);
}


/* ============================================================================
   7. BÉNÉFICES
   ============================================================================
   Section détaillée des bénéfices avec layout alterné image/contenu.
   Chaque bénéfice présente une grande image, un titre, une description
   et une liste de fonctionnalités clés.
============================================================================ */

.benefits {
    padding: 80px 2rem;
    background: var(--white);
}

/* Élément de bénéfice avec grille 2 colonnes */
.benefit-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 5rem;
}

.benefit-item:last-child {
    margin-bottom: 0;
}

/* Layout inversé pour alternance visuelle */
.benefit-item.reverse {
    direction: rtl;
}

.benefit-item.reverse > * {
    direction: ltr;
}

/* Bloc image avec dégradé et effet lumineux */
.benefit-image {
    width: 100%;
    height: 400px;
    background: linear-gradient(135deg, var(--primary-lighter), var(--secondary-lighter));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

.benefit-image::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
}

/* Contenu textuel du bénéfice */
.benefit-content h3 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.benefit-content h4 {
    font-size: 1.3rem;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.benefit-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--medium-gray);
    margin-bottom: 1.5rem;
}

/* Liste des fonctionnalités avec checkmarks */
.benefit-features {
    list-style: none;
    margin-top: 1.5rem;
}

.benefit-features li {
    padding: 0.8rem 0;
    padding-left: 2rem;
    position: relative;
    font-size: 1.05rem;
    color: var(--text-dark);
}

.benefit-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--success-color);
    font-weight: bold;
    font-size: 1.2rem;
}

/* Bouton CTA du bénéfice */
.benefit-cta {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.8rem 2rem;
    background: var(--primary-color);
    color: var(--white);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.benefit-cta:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 0, 51, 0.3);
}


/* ============================================================================
   8. CASE STUDIES (Études de Cas)
   ============================================================================
   Section présentant 3 études de cas clients avec structure
   Défi → Solution → Résultats pour démontrer l'efficacité des services.
============================================================================ */

.case-studies {
    padding: 80px 2rem;
    background: var(--light-gray);
}

.case-studies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

/* Carte d'étude de cas */
.case-study-card {
    background: var(--white);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.case-study-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* Header de la carte avec nom entreprise et industrie */
.case-study-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: var(--white);
    padding: 2rem;
    text-align: center;
}

.case-study-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.case-study-company {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.case-study-industry {
    font-size: 0.9rem;
    opacity: 0.9;
}

.case-study-body {
    padding: 2rem;
}

/* Section Défi (rouge) */
.case-study-challenge {
    margin-bottom: 1.5rem;
}

.case-study-challenge h4 {
    color: var(--danger-color);
    font-size: 1rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.case-study-challenge p {
    color: var(--medium-gray);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Section Solution (bleu) */
.case-study-solution {
    margin-bottom: 1.5rem;
}

.case-study-solution h4 {
    color: var(--info-color);
    font-size: 1rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.case-study-solution p {
    color: var(--medium-gray);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Section Résultats (vert) avec métriques */
.case-study-results {
    background: var(--light-gray);
    padding: 1.5rem;
    border-radius: 10px;
}

.case-study-results h4 {
    color: var(--success-color);
    font-size: 1rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.case-study-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.case-study-metric {
    text-align: center;
}

.case-study-metric-value {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--primary-color);
    display: block;
}

.case-study-metric-label {
    font-size: 0.85rem;
    color: var(--medium-gray);
}


/* ============================================================================
   9. AVANTAGES
   ============================================================================
   Section affichant 4 avantages clés avec grands chiffres
   pour mettre en avant les bénéfices quantifiables.
============================================================================ */

.advantages {
    padding: 80px 2rem;
    background: #d6f5f5;
}

.advantages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    text-align: center;
}

.advantage-item {
    padding: 2rem;
}

.advantage-number {
    font-size: 3rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 1rem;
    display: block;
}

.advantage-item h4 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--text-dark);
}


/* ============================================================================
   10. TÉMOIGNAGES
   ============================================================================
   Section présentant les avis clients sous forme de cartes
   avec citation, nom et entreprise.
============================================================================ */

.testimonials {
    padding: 80px 2rem;
    background: var(--light-gray);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.testimonial-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    position: relative;
}

.testimonial-quote {
    font-size: 1.1rem;
    font-style: italic;
    margin-bottom: 1.5rem;
    color: var(--medium-gray);
}

.testimonial-author {
    font-weight: bold;
    color: var(--primary-color);
}

.testimonial-company {
    font-size: 0.9rem;
    color: var(--medium-gray);
}


/* ============================================================================
   11. PARTENAIRES
   ============================================================================
   Section affichant les logos et badges des partenaires
   pour renforcer la crédibilité.
============================================================================ */

.partners {
    padding: 60px 2rem;
    background: var(--white);
    text-align: center;
}

.partners-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.partner-badge {
    padding: 1rem 2rem;
    background: var(--light-gray);
    border-radius: 10px;
    font-weight: 600;
    color: var(--primary-color);
    border: 2px solid var(--secondary-color);
}


/* ============================================================================
   12. CTA FINAL
   ============================================================================
   Section d'appel à l'action finale avant le footer
   pour convertir les visiteurs en leads.
============================================================================ */

.final-cta {
    padding: 80px 2rem;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: var(--white);
    text-align: center;
}

.final-cta h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.final-cta p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}


/* ============================================================================
   13. FOOTER
   ============================================================================
   Pied de page avec liens organisés en colonnes,
   informations de contact et copyright.
============================================================================ */

.footer {
    background: var(--dark-gray);
    color: var(--white);
    padding: 3rem 2rem 1rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h4 {
    margin-bottom: 1rem;
    color: var(--secondary-color);
}

.footer-section a {
    color: var(--white);
    text-decoration: none;
    display: block;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.footer-section a:hover {
    color: var(--secondary-color);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid var(--medium-gray);
    color: var(--medium-gray);
}


/* ============================================================================
   14. ANIMATIONS
   ============================================================================
   Définition des animations réutilisables (keyframes)
============================================================================ */

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}


/* ============================================================================
   15. RESPONSIVE DESIGN
   ============================================================================
   Media queries pour adapter le design aux différentes tailles d'écran.
   Mobile-first approach avec breakpoints à 768px et 992px.
============================================================================ */

/* Tablettes et petits écrans (max 992px) */
@media (max-width: 992px) {
    /* Navigation mobile */
    .nav-menu {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
    }

    /* Hero ajustements */
    .hero h1 {
        font-size: 2.2rem;
    }

    /* Services en colonne unique */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* Bénéfices en colonne unique */
    .benefit-item {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .benefit-item.reverse {
        direction: ltr;
    }

    /* Case studies en colonne unique */
    .case-studies-grid {
        grid-template-columns: 1fr;
    }

    /* Trust banner ajustements */
    .trust-stats {
        gap: 2rem;
    }
}

/* Mobile (max 768px) */
@media (max-width: 768px) {
    /* Header mobile */
    .header-fixed {
        padding: 0.8rem 1rem;
    }

    /* Hero mobile */
    .hero {
        padding: 100px 1rem 60px;
    }

    .hero h1 {
        font-size: 1.8rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .promo-badge {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }

    /* Sections padding réduit */
    .services,
    .advantages,
    .testimonials {
        padding: 60px 1rem;
    }

    /* Titres mobile */
    .section-title {
        font-size: 2rem;
    }

    /* Cacher texte contact sur mobile */
    .contact-info span {
        display: none;
    }
}
/* FAQ Section */
        .faq {
            padding: 80px 0;
            background-color: var(--gray-bg);
        }
        
        .faq-container {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .accordion {
            margin-top: 40px;
        }
        
        .accordion-item {
            margin-bottom: 15px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }
        
        .accordion-header {
            padding: 20px;
            background-color: white;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            color: var(--primary-color);
        }
        
        .accordion-content {
            padding: 0 20px;
            max-height: 0;
            overflow: hidden;
            background-color: white;
            transition: all 0.3s ease;
        }
        
        .accordion-content-inner {
            padding: 20px 0;
        }
        
        .accordion-item.active .accordion-content {
            max-height: 300px;
        }
/* ============================================================================
   16. SECTIONS SUPPLÉMENTAIRES (Row/Col Layout)
   ============================================================================
   Classes pour layout en colonnes avec alternance image/texte
============================================================================ */

.section {
    padding: 80px 2rem;
}

/* Layout row/col pour alternance image-texte */
.row {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

.row.reverse {
    flex-direction: row-reverse;
}

.col {
    flex: 1;
    min-width: 300px;
}

/* Liste de bénéfices avec icônes */
.benefits-list {
    list-style: none;
    margin-top: 30px;
    padding: 0;
}

.benefits-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    gap: 15px;
}

.benefits-list i {
    color: var(--primary-color);
    font-size: 1.3rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.benefits-list strong {
    display: block;
    color: var(--primary-color);
    font-size: 1.1rem;
    margin-bottom: 5px;
    font-weight: 600;
}

.benefits-list p {
    color: var(--medium-gray);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.6;
}

.benefits-list div {
    flex: 1;
}

/* Image de bénéfices */
.benefits-image {
    text-align: center;
    width: 100%;
}

.benefits-image img {
    max-width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.img-fluid {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Grille pour feature cards (cross-sell) */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.feature-card {
    background: var(--white);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    text-align: center;
}

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

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

.feature-card h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.feature-card p {
    margin-bottom: 1.5rem;
    color: var(--medium-gray);
}

/* Responsive pour row/col */
@media (max-width: 768px) {
    .row {
        flex-direction: column !important;
        gap: 30px;
    }

    .section {
        padding: 60px 1rem;
    }

    .benefits-list li {
        gap: 10px;
    }

    .benefits-list i {
        font-size: 1.1rem;
    }

    .benefits-list strong {
        font-size: 1rem;
    }
}

/* ============================================================================
   FIN DU FICHIER STYLES.CSS
============================================================================ */