/*
================================================================================
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;
    width: 100%;
    background: rgba(102, 0, 51, 0.98);
    backdrop-filter: blur(10px);
    z-index: 9999;
    padding: 1rem 2rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-container {
    display: flex;
    align-items: center;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

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

/* Navigation wrapper */
nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

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

.nav-menu li {
    list-style: none;
}

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

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

/* Bouton CTA dans le header - Version cyan optimisée et stable */
.btn-header-cta {
    background: var(--secondary-color);
    color: var(--primary-color);
    padding: 0.7rem 1.8rem;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(133, 224, 224, 0.4);
    display: inline-block;
    white-space: nowrap;
    flex: 0 0 auto;
}

.btn-header-cta:hover {
    background: #20c997;
    box-shadow: 0 0 25px rgba(133, 224, 224, 0.8);
    color: var(--white);
}

.btn-header-cta:active {
    box-shadow: 0 0 15px rgba(133, 224, 224, 0.6);
}

/* 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;
    flex: 0 0 auto;
}


/* ============================================================================
   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: var(--white);
}

.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 {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--primary-color);
        flex-direction: column;
        padding: 1.5rem 2rem;
        box-shadow: 0 10px 30px rgba(0,0,0,0.4);
        z-index: 9998;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: max-height 0.4s ease, opacity 0.3s ease, visibility 0.3s ease;
    }

    .nav-menu.active {
        max-height: 500px;
        opacity: 1;
        visibility: visible;
    }

    .nav-menu li {
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        opacity: 0;
        transform: translateX(-20px);
        animation: slideInMenu 0.3s ease forwards;
    }

    .nav-menu.active li:nth-child(1) { animation-delay: 0.1s; }
    .nav-menu.active li:nth-child(2) { animation-delay: 0.15s; }
    .nav-menu.active li:nth-child(3) { animation-delay: 0.2s; }
    .nav-menu.active li:nth-child(4) { animation-delay: 0.25s; }
    .nav-menu.active li:nth-child(5) { animation-delay: 0.3s; }

    @keyframes slideInMenu {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .nav-menu li:last-child {
        border-bottom: none;
    }

    .nav-menu a {
        padding: 1rem 0;
        font-size: 1.1rem;
    }

    .mobile-menu-toggle {
        display: block;
        font-size: 1.5rem;
        transition: transform 0.3s ease;
    }

    .mobile-menu-toggle:active {
        transform: scale(0.9);
    }

    /* Bouton CTA header responsive */
    .btn-header-cta {
        display: none; /* Caché sur tablette/mobile, visible dans le menu */
    }

    /* Bouton CTA dans le menu mobile */
    .nav-cta-mobile {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255,255,255,0.2);
    }

    .btn-header-cta-mobile {
        background: var(--secondary-color) !important;
        color: var(--primary-color) !important;
        padding: 0.9rem 2rem !important;
        border-radius: 30px;
        text-decoration: none;
        font-weight: 700;
        font-size: 1rem;
        display: block;
        text-align: center;
        box-shadow: 0 4px 15px rgba(133, 224, 224, 0.4);
        transition: all 0.3s ease;
    }

    .btn-header-cta-mobile:hover {
        background: #20c997 !important;
        color: var(--white) !important;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(133, 224, 224, 0.6);
    }

    /* 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. PAGE CONTACT - FORMULAIRE QUALIFICATION
   ============================================================================
   Styles optimisés pour la page contact avec formulaire multi-étapes
============================================================================ */

/* Hero Section Contact */
.hero-contact {
    min-height: 400px;
    padding: 140px 2rem 60px;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.stat {
    text-align: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    min-width: 150px;
}

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

.stat-label {
    display: block;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Section Formulaire */
.qualification-section {
    padding: 80px 2rem;
    background: var(--light-gray);
}

.qualification-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

/* Texte à gauche */
.qualification-text {
    position: sticky;
    top: 100px;
}

.qualification-text h2 {
    font-size: 2.2rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.qualification-subtitle {
    font-size: 1.1rem;
    color: var(--medium-gray);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.qualification-benefits {
    margin: 2rem 0;
}

.qualification-benefits .benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 0;
    grid-template-columns: unset;
}

.qualification-benefits .benefit-item i {
    color: var(--success-color);
    font-size: 1.5rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.qualification-benefits .benefit-item span {
    font-size: 1rem;
    color: var(--text-dark);
    line-height: 1.5;
}

.contact-methods {
    margin-top: 2rem;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.contact-methods h3 {
    color: var(--primary-color);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.contact-methods p {
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-methods a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.contact-methods a:hover {
    color: var(--primary-light);
}

/* ============================================================================
   CONTACT METHODS ENHANCED - Version optimisée avec branding MyTEL
   ============================================================================ */

.contact-methods-enhanced {
    margin-top: 2.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(102, 0, 51, 0.02) 0%, rgba(133, 224, 224, 0.05) 100%);
    border-radius: 16px;
    border: 2px solid var(--secondary-lighter);
    box-shadow: 0 4px 20px rgba(102, 0, 51, 0.08);
    transition: all 0.3s ease;
}

.contact-methods-enhanced:hover {
    box-shadow: 0 8px 30px rgba(102, 0, 51, 0.12);
    transform: translateY(-2px);
}

.contact-methods-title {
    color: var(--primary-color);
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 1.8rem;
    text-align: center;
    position: relative;
    padding-bottom: 1rem;
}

.contact-methods-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 2px;
}

.contact-method-item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem;
    margin-bottom: 1rem;
    background: white;
    border-radius: 12px;
    border-left: 4px solid var(--secondary-color);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

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

.contact-method-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(102, 0, 51, 0.1);
    border-left-color: var(--primary-color);
}

.contact-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.contact-icon.phone {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.contact-icon.email {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    color: white;
}

.contact-icon.support {
    background: linear-gradient(135deg, var(--secondary-color) 0%, #20c997 100%);
    color: var(--primary-color);
}

.contact-method-item:hover .contact-icon {
    transform: scale(1.1) rotate(5deg);
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
}

.contact-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--medium-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.contact-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.contact-value:hover {
    color: var(--secondary-color);
    transform: translateX(3px);
}

.contact-value.availability {
    color: var(--success-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-value.availability::before {
    content: '●';
    font-size: 0.8rem;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

/* Responsive pour la section contact methods enhanced */
@media (max-width: 768px) {
    .contact-methods-enhanced {
        padding: 1.5rem;
        margin-top: 2rem;
    }

    .contact-method-item {
        gap: 1rem;
        padding: 1rem;
    }

    .contact-icon {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }

    .contact-value {
        font-size: 1rem;
    }

    .contact-methods-title {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
    }
}

/* Formulaire à droite */
.qualification-form {
    background: white;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.form-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--light-gray);
}

.form-header h3 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.form-header p {
    color: var(--medium-gray);
    font-size: 0.95rem;
}

/* Indicateur de progression */
.form-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
    position: relative;
}

.form-progress::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--light-gray);
    z-index: 0;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
    flex: 1;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--light-gray);
    color: var(--medium-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: all 0.3s ease;
}

.progress-step.active .step-number,
.progress-step.completed .step-number {
    background: var(--primary-color);
    color: white;
}

.step-label {
    font-size: 0.85rem;
    color: var(--medium-gray);
    font-weight: 600;
}

.progress-step.active .step-label {
    color: var(--primary-color);
}

/* Étapes du formulaire */
.form-step {
    display: none;
}

.form-step.active {
    display: block;
    animation: fadeIn 0.4s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Champs de formulaire */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.9rem 1.2rem;
    border: 2px solid var(--light-gray);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    background: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 0, 51, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* Checkboxes stylisées */
.checkbox-group {
    margin-top: 1rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1rem;
    cursor: pointer;
    padding: 0.8rem;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.checkbox-label:hover {
    background: var(--light-gray);
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

/* Boutons de navigation */
.form-navigation {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.btn-primary,
.btn-secondary {
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    flex: 1;
}

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

.btn-secondary {
    background: var(--light-gray);
    color: var(--text-dark);
}

.btn-secondary:hover {
    background: var(--medium-gray);
    color: white;
}

.next-step,
.submit-form {
    width: 100%;
}

/* Récapitulatif */
.validation-summary {
    background: var(--light-gray);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
}

.validation-summary h4 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.summary-content p {
    margin-bottom: 0.8rem;
    color: var(--text-dark);
}

.summary-content strong {
    color: var(--primary-color);
    margin-right: 0.5rem;
}

.form-disclaimer {
    text-align: center;
    font-size: 0.85rem;
    color: var(--medium-gray);
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Modal de remerciement */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.modal-content {
    background: white;
    border-radius: 20px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    padding: 2rem;
    text-align: center;
    border-radius: 20px 20px 0 0;
}

.modal-header h3 {
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.modal-header i {
    color: var(--success-color);
    font-size: 2.5rem;
}

.modal-body {
    padding: 2rem;
}

.modal-body h4 {
    color: var(--primary-color);
    margin: 1.5rem 0 1rem;
    font-size: 1.2rem;
}

.modal-body ul {
    list-style: none;
    padding: 0;
}

.modal-body ul li {
    padding: 0.8rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.modal-body ul li i {
    color: var(--primary-color);
    margin-top: 0.2rem;
}

.modal-footer {
    display: flex;
    gap: 1rem;
    padding: 1.5rem 2rem 2rem;
    justify-content: center;
}

/* Section avantages de l'analyse */
.advantages-section {
    padding: 60px 2rem;
    background: var(--light-gray);
}

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

.advantage-card {
    background: white;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    text-align: center;
    transition: transform 0.3s ease;
}

.advantage-card:hover {
    transform: translateY(-5px);
}

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

.advantage-card p {
    color: var(--medium-gray);
    line-height: 1.6;
}

/* Responsive pour page contact */
@media (max-width: 992px) {
    .qualification-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .qualification-text {
        position: static;
    }

    .hero-stats {
        gap: 1.5rem;
    }

    .stat {
        min-width: 120px;
        padding: 1rem;
    }
}

@media (max-width: 768px) {
    .qualification-form {
        padding: 1.5rem;
    }

    .form-progress {
        margin-bottom: 2rem;
    }

    .step-label {
        font-size: 0.75rem;
    }

    .step-number {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }

    .hero-contact {
        padding: 120px 1rem 40px;
    }

    .hero-stats {
        gap: 1rem;
    }

    .stat {
        min-width: 100px;
        padding: 0.8rem;
    }

    .stat-number {
        font-size: 2rem;
    }
}


/* ============================================================================
   17. PAGES IA & CRM - CORRECTIONS CSS
   ============================================================================
   Styles pour les sections spécifiques des pages IA et CRM
============================================================================ */

/* Hero variants */
.hero-ia,
.hero-crm {
    background: linear-gradient(135deg, #4a148c 0%, #6a1b9a 100%);
}

/* Grille de features pour IA et CRM */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

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

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

.feature-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: white;
    font-size: 1.8rem;
}

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

.feature-card p {
    color: var(--medium-gray);
    line-height: 1.7;
}

/* Section avec arrière-plan */
.section {
    padding: 80px 2rem;
}

/* Layout en grille 2 colonnes pour bénéfices */
.row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.col {
    width: 100%;
}

/* Liste de bénéfices */
.benefits-list {
    list-style: none;
    padding: 0;
}

.benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--light-gray);
}

.benefits-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.benefits-list i {
    color: var(--success-color);
    font-size: 1.8rem;
    flex-shrink: 0;
    margin-top: 0.3rem;
}

.benefits-list strong {
    display: block;
    color: var(--primary-color);
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

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

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

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

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

/* Formulaire de contact dans sections */
.form-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
}

.form-content {
    color: white;
}

.form-content h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.form-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    opacity: 0.95;
}

.form-wrapper {
    background: white;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.form-wrapper form h3 {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 0.8rem;
}

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

.form-wrapper .form-group {
    margin-bottom: 1.2rem;
}

.form-wrapper .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 0.9rem;
}

.form-wrapper .form-control {
    width: 100%;
    padding: 0.9rem 1.2rem;
    border: 2px solid var(--light-gray);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    background: white;
}

.form-wrapper .form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 0, 51, 0.1);
}

.form-wrapper textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

.form-wrapper select.form-control {
    cursor: pointer;
}

.btn {
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-lg {
    padding: 1.2rem 2.5rem;
    font-size: 1.1rem;
}

.w-100 {
    width: 100%;
}

/* Responsive pour IA et CRM */
@media (max-width: 992px) {
    .row,
    .form-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .benefits-list li {
        gap: 1rem;
    }

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

    .form-wrapper {
        padding: 1.5rem;
    }
}


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