/* ===========================================
   MOBILE IMPROVEMENTS - Toutes les pages
   Ce fichier améliore l'affichage mobile
   NE TOUCHE PAS AU HEADER MOBILE
   =========================================== */

/* ===========================================
   CACHER LES ÉLÉMENTS MOBILE SUR DESKTOP
   =========================================== */

/* Cartes flottantes mobile - Cachées sur desktop */
.mobile-floating-cards,
.hero-mobile-cards,
.mobile-float-card,
.mobile-float-icon,
.mobile-float-content,
.mobile-float-value,
.mobile-float-label {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* ===========================================
   ANIMATIONS MOBILES OPTIMISÉES
   =========================================== */
@media (max-width: 960px) {
    /* NOTE: Les animations sont gérées par style.css avec keyframes fadeInUp, etc.
       Ne pas surcharger avec opacity:0 qui casse les animations */

    /* Réduire les délais d'animation sur mobile */
    .delay-1 { animation-delay: 0.1s !important; }
    .delay-2 { animation-delay: 0.15s !important; }
    .delay-3 { animation-delay: 0.2s !important; }

    /* Désactiver les animations slide complexes sur mobile - utiliser fade-in-up à la place */
    .animate[data-animation="slide-in-right"],
    .animate[data-animation="slide-in-left"] {
        animation-name: fadeInUp !important;
    }
}

/* Les styles du Hero Section sont consolidés dans la section 10 plus bas */

/* ===========================================
   SECTIONS GÉNÉRALES
   =========================================== */
@media (max-width: 960px) {
    /* DESACTIVE - .section padding et .section-header margin définis dans index.html inline */
    /*
    .section {
        padding: 60px 0 !important;
    }
    .section-header {
        margin-bottom: 56px !important;
        padding: 0 !important;
    }
    */

    .container {
        padding: 0 20px !important;
    }

    /* Masquer les labels de section (badges) sur mobile */
    .section-label {
        display: none !important;
    }

    .section-title {
        font-size: 28px !important;
        line-height: 1.3 !important;
        margin-bottom: 20px !important;
        letter-spacing: -0.5px !important;
    }

    .section-subtitle {
        font-size: 16px !important;
        line-height: 1.75 !important;
        padding: 0 10px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        letter-spacing: 0.01em !important;
    }

    /* ESPACE ENTRE TITRE/TEXTE ET ENCARTS - Grilles (sauf services) */
    .features-grid,
    .process-grid,
    .stats-grid,
    .benefit-grid,
    .step-grid,
    .testimonial-grid {
        margin-top: 0 !important;
    }

    /* Services grid - pas de margin-top car on utilise margin-bottom sur section-header */
    .services-grid,
    .services-grid-new {
        margin-top: 0 !important;
    }
}

@media (max-width: 480px) {
    /* DESACTIVE - .section padding défini dans index.html inline */
    /*
    .section {
        padding: 48px 0 !important;
    }
    */

    .container {
        padding: 0 16px !important;
    }

    /* Labels toujours masqués */
    .section-label {
        display: none !important;
    }

    .section-header {
        margin-bottom: 40px !important;
    }

    .section-title {
        font-size: 24px !important;
        line-height: 1.35 !important;
        margin-bottom: 18px !important;
    }

    .section-subtitle {
        font-size: 15px !important;
        line-height: 1.7 !important;
        margin-bottom: 0 !important;
    }

    /* ESPACE ENTRE TITRE/TEXTE ET ENCARTS - Reset */
    .features-grid,
    .process-grid,
    .services-grid,
    .services-grid-new,
    .stats-grid,
    .benefit-grid,
    .step-grid,
    .testimonial-grid {
        margin-top: 0 !important;
    }
}

/* NOTE: Les styles Features Grid sont définis dans la section 3 (lignes ~1810) */

/* ===========================================
   SERVICES SECTION - INDEX.HTML & SERVICES.HTML
   =========================================== */
@media (max-width: 960px) {
    .services-grid,
    .services-grid-new {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .service-card {
        min-height: auto !important;
        padding: 28px 24px !important;
        border-radius: 16px !important;
    }

    .service-card:last-child {
        grid-column: auto !important;
        max-width: 100% !important;
    }

    .service-card-icon {
        width: 56px !important;
        height: 56px !important;
        margin-bottom: 16px !important;
    }
    /* .service-card-new et .service-icon-wrapper définis dans index.html inline */

    .service-card-title {
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }

    .service-card-desc,
    .service-card-text {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
    }

    /* Service blocks (services.html) */
    .service-block {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
    }

    .service-block.reverse {
        flex-direction: column !important;
    }

    .service-block-content {
        order: 1 !important;
        text-align: center !important;
    }

    .service-block-visual {
        order: 2 !important;
    }

    .service-block-icon {
        margin: 0 auto 16px !important;
    }

    .service-block-title {
        font-size: 24px !important;
        margin-bottom: 12px !important;
    }

    .service-block-text {
        font-size: 15px !important;
        margin-bottom: 20px !important;
    }

    .service-block-list {
        text-align: left !important;
        padding-left: 0 !important;
        margin-bottom: 24px !important;
    }

    .service-block-list li {
        font-size: 14px !important;
        padding: 10px 0 !important;
        padding-left: 28px !important;
    }
}

/* NOTE: Les styles Process Steps sont définis dans la section 4 (lignes ~1825) */

/* ===========================================
   SERVICES CARDS MOBILE - STYLE AMÉLIORÉ
   Section "Des solutions adaptées à vos besoins"
   =========================================== */

/* Animations pour les cartes services */
@keyframes service-card-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

@keyframes service-icon-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(11, 55, 114, 0.15);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 8px 30px rgba(11, 55, 114, 0.25);
    }
}

@keyframes service-card-glow {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(11, 55, 114, 0.08), 0 0 0 0 rgba(11, 55, 114, 0);
    }
    50% {
        box-shadow: 0 8px 32px rgba(11, 55, 114, 0.15), 0 0 0 4px rgba(11, 55, 114, 0.03);
    }
}

@media (max-width: 960px) {
    /* Grille des services - Style Cards Verticales */
    .services-grid-new {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 0 !important;
    }

    /* DESACTIVE - Styles .service-card-new définis dans index.html inline */
    /*
    .service-card-new .service-card-visual {
        margin-bottom: 16px !important;
    }
    .service-card-new .service-icon-wrapper { ... }
    .service-card-new .service-icon-wrapper svg { ... }
    etc - voir index.html <style> pour les vrais styles
    */
}

/* DESACTIVE - Styles services 480px et 360px définis dans index.html inline */

/* ===========================================
   STATS SECTION
   =========================================== */
@media (max-width: 960px) {
    .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    .stat-item {
        padding: 24px 16px !important;
        border-radius: 16px !important;
        text-align: center !important;
    }

    .stat-number {
        font-size: 36px !important;
        margin-bottom: 6px !important;
    }

    .stat-label {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    /* Alt stats strip */
    .stat-strip {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .stat-item {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 20px !important;
        text-align: left !important;
    }

    .stat-number {
        font-size: 32px !important;
        margin-bottom: 0 !important;
        min-width: 80px !important;
    }

    .stat-label {
        flex: 1 !important;
    }
}

/* ===========================================
   CONTENT BLOCKS - ABOUT.HTML
   =========================================== */
@media (max-width: 960px) {
    .content-grid,
    .content-block {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
    }

    .content-grid.reverse,
    .content-block.reverse {
        flex-direction: column !important;
    }

    .content-body,
    .content-text-side {
        text-align: center !important;
        order: 1 !important;
    }

    .content-visual {
        order: 2 !important;
    }

    .content-title {
        font-size: 24px !important;
        margin-bottom: 16px !important;
    }

    .content-text {
        font-size: 15px !important;
        line-height: 1.7 !important;
        margin-bottom: 20px !important;
    }

    .content-list {
        text-align: left !important;
    }

    .content-list li {
        font-size: 14px !important;
        padding: 10px 0 !important;
    }

    /* Accomp visual */
    .accomp-visual {
        max-width: 280px !important;
        margin: 0 auto !important;
    }

    .accomp-main-card {
        padding: 24px !important;
        border-radius: 16px !important;
    }

    .accomp-main-value {
        font-size: 42px !important;
    }

    .accomp-main-label {
        font-size: 14px !important;
    }
}

/* ===========================================
   CTA BOXES
   =========================================== */
@media (max-width: 960px) {
    .cta-box,
    .cta-box-modern {
        padding: 32px 24px !important;
        border-radius: 20px !important;
        text-align: center !important;
    }

    .cta-modern-content {
        margin-bottom: 24px !important;
    }

    .cta-modern-title {
        font-size: 24px !important;
        margin-bottom: 12px !important;
    }

    .cta-modern-text {
        font-size: 15px !important;
    }

    .cta-modern-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .cta-modern-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 16px 24px !important;
        font-size: 15px !important;
    }

    .cta-modern-badge {
        margin-bottom: 16px !important;
    }
}

/* ===========================================
   TESTIMONIALS
   =========================================== */
@media (max-width: 960px) {
    .testimonial-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .testimonial-card {
        padding: 24px !important;
        border-radius: 16px !important;
    }

    .testimonial-quote {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
    }

    .testimonial-author {
        gap: 12px !important;
    }

    .testimonial-avatar {
        width: 44px !important;
        height: 44px !important;
    }

    .testimonial-name {
        font-size: 15px !important;
    }

    .testimonial-role {
        font-size: 13px !important;
    }
}

/* ===========================================
   HERO PAGES (COURTAGE, TURPE, FISCALITE, ABOUT)
   =========================================== */
@media (max-width: 960px) {
    .hero-page {
        padding-top: 100px !important;
        padding-bottom: 48px !important;
    }

    /* FORCER l'affichage des éléments animés dans le hero - Visible immédiatement
       Désactiver les animations pour afficher le contenu directement */
    .hero-page .animate,
    .hero-page .section-header .animate,
    .hero-page .section-title.animate,
    .hero-page .section-subtitle.animate,
    .hero-page .hero-cta-group.animate,
    .hero-page h1.animate,
    .hero-page p.animate,
    .section-gradient-hero .animate,
    .section-gradient-hero.hero-page .animate,
    .section-gradient-hero.hero-page .section-header .animate {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        animation: none !important;
    }

    .hero-page .section-title,
    .hero-page h1 {
        font-size: 28px !important;
        line-height: 1.25 !important;
    }

    .hero-page .section-subtitle {
        font-size: 15px !important;
        margin-bottom: 24px !important;
    }

    .hero-cta-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .hero-cta-group .btn {
        width: 100% !important;
        max-width: 300px !important;
    }
}

@media (max-width: 480px) {
    .hero-page {
        padding-top: 90px !important;
        padding-bottom: 40px !important;
    }

    .hero-page .section-title,
    .hero-page h1 {
        font-size: 24px !important;
    }
}

/* ===========================================
   BENEFITS GRID (COURTAGE.HTML)
   =========================================== */
@media (max-width: 960px) {
    .benefit-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .benefit-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 16px !important;
        padding: 20px !important;
        border-radius: 14px !important;
    }

    .benefit-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        border-radius: 12px !important;
    }

    .benefit-content {
        flex: 1 !important;
        text-align: left !important;
    }

    .benefit-title {
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }

    .benefit-text {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
}

/* ===========================================
   STEP GRID (TURPE.HTML, FISCALITE.HTML)
   =========================================== */
@media (max-width: 960px) {
    .step-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .step-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 16px !important;
        padding: 20px !important;
        border-radius: 14px !important;
        background: #fff !important;
    }

    .step-number {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        border-radius: 10px !important;
    }

    .step-content {
        flex: 1 !important;
        text-align: left !important;
    }

    .step-title {
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }

    .step-text {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
}

/* ===========================================
   LOGOS ROW
   =========================================== */
@media (max-width: 960px) {
    .logos-row {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
        padding: 24px 0 !important;
    }

    .logo-item {
        padding: 16px !important;
    }

    .logo-item img {
        max-height: 32px !important;
    }
}

@media (max-width: 480px) {
    .logos-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===========================================
   FOOTER MOBILE
   =========================================== */
@media (max-width: 960px) {
    .footer {
        padding: 48px 0 24px !important;
    }

    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
        text-align: center !important;
    }

    .footer-brand {
        order: -1 !important;
        margin-bottom: 16px !important;
    }

    .footer-logo {
        justify-content: center !important;
        margin-bottom: 16px !important;
    }

    .footer-desc {
        font-size: 14px !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }

    .footer-col {
        text-align: center !important;
    }

    .footer-title {
        font-size: 14px !important;
        margin-bottom: 16px !important;
    }

    .footer-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .footer-links a {
        font-size: 14px !important;
    }

    .footer-bottom {
        margin-top: 32px !important;
        padding-top: 24px !important;
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center !important;
    }

    .footer-legal {
        flex-direction: column !important;
        gap: 8px !important;
    }
}

/* ===========================================
   CONTACT PAGE MOBILE
   =========================================== */
@media (max-width: 960px) {
    .contact-hero {
        padding: 100px 0 48px !important;
    }

    .contact-hero-title {
        font-size: 28px !important;
    }

    .contact-hero-text {
        font-size: 15px !important;
    }

    .contact-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
    }

    .contact-info {
        order: 2 !important;
    }

    .contact-form-wrapper {
        order: 1 !important;
    }

    .form-card {
        padding: 24px !important;
        border-radius: 20px !important;
    }

    .form-header {
        margin-bottom: 24px !important;
    }

    .form-title {
        font-size: 22px !important;
    }

    .form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .form-group {
        margin-bottom: 16px !important;
    }

    .form-group label {
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 14px 16px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
    }

    .btn-submit {
        width: 100% !important;
        padding: 16px !important;
        font-size: 16px !important;
    }

    /* Form steps */
    .form-steps {
        gap: 8px !important;
        margin-bottom: 24px !important;
    }

    .form-step {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }

    .form-step-number {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
    }

    .form-step-line {
        width: 20px !important;
    }

    /* Contact info cards */
    .contact-info-card {
        padding: 20px !important;
        border-radius: 14px !important;
    }

    .contact-info-title {
        font-size: 15px !important;
    }

    .contact-info-value {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .contact-hero {
        padding: 90px 0 40px !important;
    }

    .contact-hero-title {
        font-size: 24px !important;
    }

    .form-card {
        padding: 20px !important;
    }

    .form-steps {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .form-step span:not(.form-step-number) {
        display: none !important;
    }

    .form-step-line {
        display: none !important;
    }
}

/* ===========================================
   BOUTONS MOBILE
   =========================================== */
@media (max-width: 960px) {
    .btn {
        padding: 14px 24px !important;
        font-size: 15px !important;
        border-radius: 10px !important;
    }

    .btn-lg {
        padding: 16px 28px !important;
        font-size: 16px !important;
    }

    .btn-sm {
        padding: 10px 18px !important;
        font-size: 13px !important;
    }
}

/* ===========================================
   TITRES SECTIONS AMÉLIORÉS - SPACING
   "Pourquoi nous choisir", "Votre énergie, notre expertise", etc.
   "Comment ça marche", "Simple. Rapide. Gratuit."
   =========================================== */
@media (max-width: 960px) {
    /* ==========================================================
       ESPACEMENT SECTION-HEADER -> GRILLES (CARDS/RECTANGLES)
       UNIQUEMENT margin-bottom sur section-header, PAS de margin-top sur grilles
       ========================================================== */

    /* Headers de section - DESACTIVE - Géré par critical-fixes.css */
    /*
    .section-header {
        margin-bottom: 36px !important;
        padding: 0 8px !important;
    }
    */

    /* Labels de section - Masqués sur mobile */
    .section-label {
        display: none !important;
    }

    /* Titres de section principaux */
    .section-title {
        font-size: 26px !important;
        line-height: 1.35 !important;
        margin-bottom: 16px !important;
        padding: 0 4px !important;
        letter-spacing: -0.5px !important;
    }

    /* Sous-titres */
    .section-subtitle {
        font-size: 16px !important;
        line-height: 1.75 !important;
        margin-bottom: 0 !important;
        padding: 0 8px !important;
        color: #6b7280 !important;
    }

    /* RESET margin-top sur toutes les grilles - on utilise uniquement margin-bottom du header */
    .features-grid,
    .process-grid,
    .services-grid,
    .services-grid-new,
    .step-grid,
    .benefit-grid,
    .testimonial-grid,
    .stats-grid {
        margin-top: 0 !important;
    }

    /* Titres dans les sections avec fond */
    .section-gradient .section-title,
    .section-gradient-hero .section-title {
        color: #ffffff !important;
    }

    .section-gradient .section-subtitle,
    .section-gradient-hero .section-subtitle {
        color: rgba(255, 255, 255, 0.9) !important;
    }
}

@media (max-width: 480px) {
    /* Headers de section sur petits écrans */
    .section-header {
        margin-bottom: 32px !important;
    }

    /* Labels masqués sur petits écrans */
    .section-label {
        display: none !important;
    }

    .section-title {
        font-size: 22px !important;
        line-height: 1.4 !important;
        margin-bottom: 14px !important;
    }

    .section-subtitle {
        font-size: 15px !important;
        line-height: 1.7 !important;
        margin-bottom: 0 !important;
    }

    /* RESET margin-top - utiliser uniquement margin-bottom du header */
    .features-grid,
    .process-grid,
    .services-grid,
    .services-grid-new,
    .step-grid,
    .benefit-grid,
    .testimonial-grid,
    .stats-grid {
        margin-top: 0 !important;
    }
}

/* ===========================================
   SECTION "VOTRE ÉNERGIE, NOTRE EXPERTISE"
   =========================================== */
@media (max-width: 960px) {
    /* Section expertise/mission */
    .mission-section,
    .expertise-section {
        padding: 64px 0 !important;
    }

    .mission-content,
    .expertise-content {
        text-align: center !important;
        padding: 0 16px !important;
    }

    .mission-title,
    .expertise-title {
        font-size: 26px !important;
        margin-bottom: 20px !important;
        line-height: 1.3 !important;
    }

    .mission-text,
    .expertise-text {
        font-size: 15px !important;
        line-height: 1.7 !important;
        max-width: 100% !important;
    }

    /* Section intro/about avec double texte */
    .intro-section {
        padding: 56px 0 !important;
    }

    .intro-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }

    .intro-text {
        font-size: 15px !important;
        line-height: 1.7 !important;
        text-align: center !important;
    }
}

/* ===========================================
   AMÉLIORATION ESPACEMENT CARDS & GRILLES
   =========================================== */
@media (max-width: 960px) {
    /* Grilles générales */
    .grid-3,
    .grid-4 {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* Cards génériques */
    .card {
        padding: 24px !important;
        border-radius: 16px !important;
        margin-bottom: 0 !important;
    }

    /* Espacement entre grille et titre - RESET (margin géré par section-header) */
    .section-header + .features-grid,
    .section-header + .services-grid,
    .section-header + .services-grid-new,
    .section-header + .process-grid,
    .section-header + .benefit-grid,
    .section-header + .step-grid,
    .section-header + .testimonial-grid,
    .section-header + .stats-grid {
        margin-top: 0 !important;
    }

    /* Cards avec icônes */
    .icon-card {
        display: flex !important;
        gap: 16px !important;
        align-items: flex-start !important;
        padding: 20px !important;
    }

    .icon-card .icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        border-radius: 12px !important;
    }

    .icon-card .content {
        flex: 1 !important;
    }

    .icon-card .title {
        font-size: 17px !important;
        margin-bottom: 6px !important;
    }

    .icon-card .text {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
}

/* ===========================================
   AMÉLIORATION VISUELS & IMAGES
   =========================================== */
@media (max-width: 960px) {
    /* Images dans les sections */
    .section-image,
    .block-image {
        border-radius: 16px !important;
        overflow: hidden !important;
        margin: 24px 0 !important;
    }

    .section-image img,
    .block-image img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* Visuels décoratifs */
    .visual-card,
    .info-card {
        padding: 24px !important;
        border-radius: 16px !important;
    }

    .visual-icon {
        width: 64px !important;
        height: 64px !important;
        margin-bottom: 16px !important;
    }

    /* Highlights/badges dans les visuels */
    .highlight-badge {
        font-size: 12px !important;
        padding: 6px 12px !important;
        border-radius: 20px !important;
    }
}

/* ===========================================
   AMÉLIORATION LISTES & POINTS
   =========================================== */
@media (max-width: 960px) {
    /* Listes avec puces */
    .list-check,
    .feature-list,
    .benefit-list {
        padding-left: 0 !important;
        margin: 20px 0 !important;
    }

    .list-check li,
    .feature-list li,
    .benefit-list li {
        position: relative !important;
        padding: 12px 0 12px 32px !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    }

    .list-check li:last-child,
    .feature-list li:last-child,
    .benefit-list li:last-child {
        border-bottom: none !important;
    }

    .list-check li::before,
    .feature-list li::before,
    .benefit-list li::before {
        left: 0 !important;
        top: 14px !important;
    }

    /* Listes numérotées */
    .list-numbered li {
        padding: 14px 0 14px 40px !important;
        font-size: 15px !important;
    }

    .list-numbered li::before {
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
    }
}

/* ===========================================
   AMÉLIORATION BADGES & TAGS
   =========================================== */
@media (max-width: 960px) {
    .badge,
    .tag {
        font-size: 11px !important;
        padding: 6px 14px !important;
        border-radius: 20px !important;
        letter-spacing: 0.5px !important;
    }

    .badge-primary {
        background: rgba(11, 55, 114, 0.1) !important;
        color: #0B3772 !important;
    }

    .badge-success {
        background: rgba(16, 185, 129, 0.1) !important;
        color: #059669 !important;
    }

    /* Tags de service */
    .service-tag {
        font-size: 10px !important;
        padding: 4px 10px !important;
        margin-right: 6px !important;
        margin-bottom: 6px !important;
    }
}

/* ===========================================
   AMÉLIORATION SEPARATEURS & DIVIDERS
   =========================================== */
@media (max-width: 960px) {
    .divider {
        margin: 40px 0 !important;
        height: 1px !important;
        background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent) !important;
    }

    .divider-icon {
        margin: 48px 0 !important;
    }

    .divider-icon::before {
        width: 40px !important;
        height: 40px !important;
    }

    /* Sections avec bordure */
    .section-bordered {
        border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    }
}

/* ===========================================
   SCROLL SMOOTH & TOUCHES FINALES
   =========================================== */
@media (max-width: 960px) {
    /* Smooth scroll */
    html {
        scroll-behavior: smooth !important;
    }

    /* Éviter le zoom sur les inputs iOS */
    input, select, textarea {
        font-size: 16px !important;
    }

    /* Améliorer le tap sur les liens */
    a, button {
        -webkit-tap-highlight-color: rgba(11, 55, 114, 0.1) !important;
    }

    /* Espacement entre sections */
    .section + .section {
        margin-top: 0 !important;
    }

    /* Cards avec ombre subtile */
    .feature-card,
    .service-card,
    .benefit-card,
    .step-card,
    .testimonial-card {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    }

    /* DESACTIVE - Espacement sections défini dans index.html inline */
    /*
    .section {
        padding: 80px 0 !important;
    }
    .section-lg {
        padding: 96px 0 !important;
    }
    .section-sm {
        padding: 56px 0 !important;
    }
    */

    /* Texte plus lisible */
    p {
        line-height: 1.7 !important;
    }

    /* Links avec meilleur touch target */
    .nav-link,
    .footer-link,
    .btn {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
}

@media (max-width: 480px) {
    /* DESACTIVE - Espacement sections 480px défini dans index.html inline */
    /*
    .section {
        padding: 64px 0 !important;
    }
    .section-lg {
        padding: 80px 0 !important;
    }
    .section-sm {
        padding: 48px 0 !important;
    }
    */
}

/* ==========================================================
   RÈGLE FINALE - ESPACEMENT TITRE -> RECTANGLES
   Cette règle est TOUT À LA FIN pour garantir la priorité.
   Elle crée l'espace entre le titre de section et les cards.
   ========================================================== */
/* NOTE: Ces règles ont été désactivées - l'espacement est géré
   par .section-header margin-bottom dans les sections précédentes */
/*
@media (max-width: 960px) {
    .section .section-header {
        margin-bottom: 0 !important;
    }
    .section .container .features-grid, ... {
        margin-top: 72px !important;
    }
}
*/

/* ===========================================
   ABOUT PAGE - VISUELS MOBILE
   Simulateur client & Accompagnement
   Tous les blocs doivent avoir la même largeur
   =========================================== */
@media (max-width: 960px) {
    /* CONTENEUR PRINCIPAL - Largeur 100% */
    .content-block {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
    }

    .content-text-side {
        max-width: 100% !important;
        width: 100% !important;
    }

    .content-visual {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* SIMULATEUR CLIENT - Market Window */
    .market-window {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 16px !important;
    }

    .market-window-header {
        padding: 10px 14px !important;
    }

    .market-window-title {
        font-size: 11px !important;
        margin-right: 30px !important;
    }

    .market-window-dot {
        width: 8px !important;
        height: 8px !important;
    }

    .market-window-content {
        padding: 16px !important;
    }

    .market-header-row {
        margin-bottom: 12px !important;
    }

    .market-live-badge {
        font-size: 10px !important;
        padding: 3px 8px !important;
    }

    .market-date {
        font-size: 11px !important;
    }

    .market-chart {
        margin-bottom: 16px !important;
    }

    .market-chart-labels {
        font-size: 10px !important;
    }

    /* Prix du marché - grille responsive */
    .market-prices {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .market-price-card {
        padding: 12px !important;
        border-radius: 10px !important;
    }

    .market-price-label {
        font-size: 10px !important;
        gap: 4px !important;
        margin-bottom: 6px !important;
    }

    .market-price-label svg {
        width: 12px !important;
        height: 12px !important;
    }

    .market-price-value {
        font-size: 18px !important;
    }

    .market-price-unit {
        font-size: 9px !important;
    }

    .market-price-change {
        font-size: 10px !important;
        padding: 2px 6px !important;
        margin-top: 6px !important;
    }

    /* ACCOMPAGNEMENT - Card principale - MÊME LARGEUR QUE LES AUTRES */
    .accomp-visual {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .accomp-main-card {
        max-width: 100% !important;
        width: 100% !important;
        padding: 40px 24px !important;
        border-radius: 16px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .accomp-main-icon {
        width: 56px !important;
        height: 56px !important;
        border-radius: 14px !important;
        margin-bottom: 20px !important;
    }

    .accomp-main-icon svg {
        width: 28px !important;
        height: 28px !important;
    }

    .accomp-main-value {
        font-size: 48px !important;
        margin-bottom: 8px !important;
    }

    .accomp-main-label {
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {
    /* Content blocks sur petits écrans */
    .content-block {
        gap: 24px !important;
    }

    /* Simulateur encore plus compact */
    .market-window-content {
        padding: 12px !important;
    }

    .market-prices {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .market-price-card {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 14px !important;
    }

    .market-price-label {
        margin-bottom: 0 !important;
    }

    .market-price-value {
        font-size: 16px !important;
    }

    .market-price-change {
        margin-top: 0 !important;
        margin-left: 8px !important;
    }

    /* Accompagnement - Même largeur que les autres blocs */
    .accomp-main-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 32px 20px !important;
        margin: 0 !important;
    }

    .accomp-main-icon {
        width: 48px !important;
        height: 48px !important;
    }

    .accomp-main-value {
        font-size: 40px !important;
    }

    .accomp-main-label {
        font-size: 14px !important;
    }
}

/* ===========================================
   AMÉLIORATIONS GLOBALES MOBILE - TOUTES PAGES
   Espacement uniforme, belle présentation
   =========================================== */

/* ===========================================
   1. HERO PAGES - COURTAGE, TURPE, FISCALITE, SERVICES
   =========================================== */
@media (max-width: 960px) {
    /* Hero uniforme pour toutes les pages de service */
    .section-gradient-hero.hero-page {
        padding-top: 110px !important;
        padding-bottom: 56px !important;
        min-height: auto !important;
    }

    .hero-page .container {
        padding: 0 20px !important;
    }

    .hero-page .section-header {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        /* margin-bottom géré par critical-fixes.css */
        text-align: center !important;
    }

    /* FORCER VISIBILITÉ - Les éléments animés du hero doivent être visibles immédiatement
       Animation désactivée pour garantir l'affichage */
    .section-gradient-hero.hero-page .animate,
    .section-gradient-hero.hero-page .section-header .animate,
    .section-gradient-hero.hero-page h1,
    .section-gradient-hero.hero-page p,
    .section-gradient-hero.hero-page .hero-cta-group {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        animation: none !important;
    }

    /* Labels masqués dans les hero pages - Afficher sur mobile */
    .hero-page .section-label {
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .hero-page .section-title,
    .hero-page h1.section-title {
        font-size: 28px !important;
        line-height: 1.3 !important;
        margin-bottom: 22px !important;
        padding: 0 !important;
    }

    .hero-page .section-subtitle {
        font-size: 16px !important;
        line-height: 1.75 !important;
        margin-bottom: 32px !important;
        max-width: 500px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Bouton CTA dans hero */
    .hero-cta-group {
        margin-top: 8px !important;
    }

    .hero-cta-group .btn {
        width: auto !important;
        min-width: 200px !important;
        padding: 16px 32px !important;
    }
}

@media (max-width: 480px) {
    .section-gradient-hero.hero-page {
        padding-top: 100px !important;
        padding-bottom: 48px !important;
    }

    .hero-page .section-title,
    .hero-page h1.section-title {
        font-size: 24px !important;
    }

    .hero-page .section-subtitle {
        font-size: 14px !important;
        margin-bottom: 24px !important;
    }

    .hero-cta-group .btn {
        width: 100% !important;
        max-width: 280px !important;
    }
}

/* ===========================================
   2. SECTIONS SERVICES (services.html)
   Service blocks avec visuel et contenu
   =========================================== */
@media (max-width: 960px) {
    /* Section padding uniforme */
    section.section[style*="padding-top: 80px"] {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* Service block - texte + visuel */
    .service-block {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
        align-items: center !important;
    }

    .service-block.reverse {
        flex-direction: column !important;
    }

    .service-block-content {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        order: 1 !important;
    }

    .service-block-visual {
        width: 100% !important;
        max-width: 340px !important;
        order: 2 !important;
        margin: 0 auto !important;
    }

    /* Icône du service */
    .service-block-icon {
        width: 64px !important;
        height: 64px !important;
        margin: 0 auto 20px !important;
        border-radius: 16px !important;
    }

    .service-block-icon svg {
        width: 28px !important;
        height: 28px !important;
    }

    /* Titre du service */
    .service-block-title {
        font-size: 26px !important;
        margin-bottom: 16px !important;
        line-height: 1.3 !important;
    }

    /* Texte descriptif */
    .service-block-text {
        font-size: 15px !important;
        line-height: 1.7 !important;
        margin-bottom: 24px !important;
        color: #4b5563 !important;
    }

    /* Liste de points */
    .service-block-list {
        text-align: left !important;
        padding: 0 !important;
        margin: 0 auto 28px !important;
        max-width: 340px !important;
        list-style: none !important;
    }

    .service-block-list li {
        position: relative !important;
        padding: 12px 0 12px 32px !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    }

    .service-block-list li:last-child {
        border-bottom: none !important;
    }

    .service-block-list li::before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        top: 16px !important;
        width: 20px !important;
        height: 20px !important;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B3772' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center !important;
        background-size: contain !important;
    }

    /* Bouton */
    .service-block .btn {
        padding: 16px 32px !important;
        font-size: 15px !important;
    }

    /* Visual card dans service block */
    .service-block-visual .service-card-new {
        max-width: 100% !important;
        padding: 24px !important;
        border-radius: 20px !important;
    }

    .service-card-visual {
        margin-bottom: 20px !important;
    }

    /* DESACTIVE - Défini dans index.html inline avec background: transparent */
    /*
    .service-icon-wrapper {
        width: 64px !important;
        height: 64px !important;
        border-radius: 16px !important;
    }
    */

    .service-card-body {
        text-align: center !important;
    }

    .service-card-new-title {
        font-size: 18px !important;
        margin-bottom: 8px !important;
    }

    .service-card-new-text {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 16px !important;
    }

    .service-card-new-link {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .service-block {
        gap: 32px !important;
    }

    .service-block-visual {
        max-width: 100% !important;
    }

    .service-block-title {
        font-size: 22px !important;
    }

    .service-block-list {
        max-width: 100% !important;
        padding: 0 8px !important;
    }
}

/* ===========================================
   3. FEATURE CARDS - Uniformisation
   Courtage, turpe, fiscalite benefits
   =========================================== */
@media (max-width: 960px) {
    /* Features grid uniforme */
    .features-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        margin-top: 56px !important;
    }

    /* Feature card - layout horizontal */
    .feature-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 18px !important;
        padding: 24px !important;
        background: #ffffff !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
        text-align: left !important;
    }

    .feature-icon {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        margin: 0 !important;
        border-radius: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, rgba(11, 55, 114, 0.08), rgba(11, 55, 114, 0.04)) !important;
    }

    .feature-icon svg {
        width: 26px !important;
        height: 26px !important;
        color: #0B3772 !important;
    }

    .feature-card .feature-content,
    .feature-card > div:not(.feature-icon) {
        flex: 1 !important;
    }

    .feature-title {
        font-size: 17px !important;
        font-weight: 600 !important;
        margin-bottom: 6px !important;
        color: #1f2937 !important;
    }

    .feature-text {
        font-size: 14px !important;
        line-height: 1.55 !important;
        color: #6b7280 !important;
        margin: 0 !important;
    }
}

/* ===========================================
   4. PROCESS GRID - Étapes uniformes
   Comment ça marche
   =========================================== */
@media (max-width: 960px) {
    .process-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        margin-top: 56px !important;
    }

    .process-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 18px !important;
        padding: 24px !important;
        background: #ffffff !important;
        border-radius: 16px !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
    }

    .process-number {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        border-radius: 12px !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(135deg, #0B3772, #1d4ed8) !important;
        color: #ffffff !important;
        margin: 0 !important;
    }

    .process-item > div:not(.process-number) {
        flex: 1 !important;
        text-align: left !important;
    }

    .process-title {
        font-size: 17px !important;
        font-weight: 600 !important;
        margin-bottom: 6px !important;
        color: #1f2937 !important;
    }

    .process-text {
        font-size: 14px !important;
        line-height: 1.55 !important;
        color: #6b7280 !important;
        margin: 0 !important;
    }
}

/* ===========================================
   5. STATS GRID - Section sombre
   Chiffres clés
   =========================================== */
@media (max-width: 960px) {
    .section-dark,
    .section-gradient-dark {
        padding: 56px 0 !important;
    }

    /* Stats grid 3 colonnes sur desktop = 1 colonne mobile */
    .stats-grid[style*="grid-template-columns: repeat(3"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        grid-template-columns: unset !important;
    }

    .stats-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .stat-item {
        display: flex !important;
        align-items: center !important;
        gap: 20px !important;
        padding: 24px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-radius: 16px !important;
        text-align: left !important;
    }

    .stat-number {
        font-size: 36px !important;
        font-weight: 700 !important;
        min-width: 90px !important;
        margin: 0 !important;
        color: #ffffff !important;
    }

    .stat-label {
        font-size: 14px !important;
        line-height: 1.4 !important;
        color: rgba(255, 255, 255, 0.85) !important;
        flex: 1 !important;
    }
}

@media (max-width: 480px) {
    .section-dark,
    .section-gradient-dark {
        padding: 48px 0 !important;
    }

    .stat-item {
        padding: 20px !important;
        gap: 16px !important;
    }

    .stat-number {
        font-size: 32px !important;
        min-width: 80px !important;
    }

    .stat-label {
        font-size: 13px !important;
    }
}

/* ===========================================
   6. CTA BOX - Appel à l'action
   Section contact
   =========================================== */
@media (max-width: 960px) {
    .section-gradient-white {
        padding: 56px 0 80px !important;
    }

    .cta-box-modern {
        padding: 40px 24px !important;
        border-radius: 24px !important;
        text-align: center !important;
    }

    .cta-modern-badge {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 18px !important;
        border-radius: 30px !important;
        font-size: 13px !important;
        margin-bottom: 24px !important;
    }

    .cta-modern-badge svg {
        width: 18px !important;
        height: 18px !important;
    }

    .cta-modern-content {
        margin-bottom: 32px !important;
    }

    .cta-modern-title {
        font-size: 26px !important;
        line-height: 1.3 !important;
        margin-bottom: 14px !important;
    }

    .cta-modern-text {
        font-size: 15px !important;
        line-height: 1.65 !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        color: #6b7280 !important;
    }

    .cta-modern-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }

    .cta-modern-btn {
        width: 100% !important;
        padding: 18px 24px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        border-radius: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        text-decoration: none !important;
    }

    .cta-modern-btn svg {
        width: 20px !important;
        height: 20px !important;
    }

    .cta-modern-btn-primary {
        background: linear-gradient(135deg, #0B3772, #1d4ed8) !important;
        color: #ffffff !important;
        box-shadow: 0 4px 14px rgba(11, 55, 114, 0.3) !important;
    }

    .cta-modern-btn-phone {
        background: #f8fafc !important;
        color: #1f2937 !important;
        border: 1px solid #e5e7eb !important;
    }

    .cta-phone-number {
        font-weight: 600 !important;
    }
}

@media (max-width: 480px) {
    .section-gradient-white {
        padding: 48px 0 64px !important;
    }

    .cta-box-modern {
        padding: 32px 20px !important;
    }

    .cta-modern-title {
        font-size: 22px !important;
    }

    .cta-modern-btn {
        padding: 16px 20px !important;
        font-size: 14px !important;
    }
}

/* ===========================================
   7. FOOTER MOBILE - Amélioration
   =========================================== */
@media (max-width: 960px) {
    .footer {
        padding: 56px 0 32px !important;
    }

    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
        text-align: center !important;
    }

    .footer-brand {
        margin-bottom: 8px !important;
    }

    .footer-logo {
        justify-content: center !important;
        margin-bottom: 18px !important;
    }

    .footer-logo-mark img {
        width: 44px !important;
        height: 44px !important;
    }

    .footer-logo-name {
        font-size: 20px !important;
    }

    .footer-logo-sub {
        font-size: 20px !important;
    }

    .footer-description {
        font-size: 14px !important;
        line-height: 1.65 !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        color: #6b7280 !important;
    }

    .footer-column {
        text-align: center !important;
    }

    .footer-column h4 {
        font-size: 15px !important;
        font-weight: 600 !important;
        margin-bottom: 18px !important;
        color: #1f2937 !important;
    }

    .footer-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .footer-links li {
        padding: 0 !important;
    }

    .footer-links a {
        font-size: 14px !important;
        color: #6b7280 !important;
        text-decoration: none !important;
        display: inline-block !important;
        padding: 4px 0 !important;
    }

    .footer-links a:hover {
        color: #0B3772 !important;
    }

    .footer-bottom {
        margin-top: 56px !important;
        padding-top: 28px !important;
        border-top: 1px solid #e5e7eb !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }

    .footer-copyright {
        font-size: 13px !important;
        color: #9ca3af !important;
    }

    .footer-social {
        display: flex !important;
        gap: 12px !important;
    }

    .footer-social a {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f3f4f6 !important;
        border-radius: 10px !important;
        color: #6b7280 !important;
        transition: all 0.2s ease !important;
    }

    .footer-social a:hover {
        background: #0B3772 !important;
        color: #ffffff !important;
    }

    .footer-social svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* ===========================================
   8. SECTION GREY - Fond alterné
   =========================================== */
@media (max-width: 960px) {
    .section-grey {
        background: #f8fafc !important;
        padding: 64px 0 !important;
    }

    /* Cards sur fond gris - ajuster ombre */
    .section-grey .feature-card,
    .section-grey .process-item {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        border: 1px solid rgba(0, 0, 0, 0.04) !important;
    }
}

/* ===========================================
   9. CONTACT PAGE - Améliorations
   =========================================== */
@media (max-width: 960px) {
    /* Contact Hero */
    .contact-hero,
    .section.contact-hero {
        padding: 110px 0 56px !important;
    }

    .contact-hero .container {
        max-width: 100% !important;
    }

    .contact-hero-title,
    .contact-hero .section-title {
        font-size: 28px !important;
        line-height: 1.25 !important;
        margin-bottom: 14px !important;
    }

    .contact-hero-text,
    .contact-hero .section-subtitle {
        font-size: 15px !important;
        line-height: 1.65 !important;
        max-width: 450px !important;
        margin: 0 auto !important;
    }

    /* Contact Grid */
    .contact-content,
    .contact-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
    }

    /* Formulaire en premier */
    .contact-form-wrapper,
    .contact-form-container {
        order: 1 !important;
    }

    /* Info en second */
    .contact-info,
    .contact-sidebar {
        order: 2 !important;
    }

    /* Form card */
    .form-card,
    .contact-form-card {
        padding: 28px 24px !important;
        border-radius: 20px !important;
        background: #ffffff !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    }

    .form-header {
        text-align: center !important;
        margin-bottom: 28px !important;
    }

    .form-title {
        font-size: 22px !important;
        margin-bottom: 8px !important;
    }

    .form-subtitle {
        font-size: 14px !important;
        color: #6b7280 !important;
    }

    /* Form inputs */
    .form-group {
        margin-bottom: 20px !important;
    }

    .form-group label {
        font-size: 14px !important;
        font-weight: 500 !important;
        margin-bottom: 8px !important;
        display: block !important;
        color: #374151 !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100% !important;
        padding: 16px 18px !important;
        font-size: 15px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 12px !important;
        background: #f9fafb !important;
        transition: all 0.2s ease !important;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: none !important;
        border-color: #0B3772 !important;
        background: #ffffff !important;
        box-shadow: 0 0 0 3px rgba(11, 55, 114, 0.1) !important;
    }

    .form-group textarea {
        min-height: 120px !important;
        resize: vertical !important;
    }

    /* Form row (2 colonnes) */
    .form-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* Submit button */
    .btn-submit,
    .form-submit {
        width: 100% !important;
        padding: 18px 24px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        border-radius: 14px !important;
        background: linear-gradient(135deg, #0B3772, #1d4ed8) !important;
        color: #ffffff !important;
        border: none !important;
        cursor: pointer !important;
        box-shadow: 0 4px 14px rgba(11, 55, 114, 0.3) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        margin-top: 8px !important;
    }

    /* Contact info cards */
    .contact-info-card,
    .info-card {
        padding: 24px !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
        margin-bottom: 16px !important;
    }

    .contact-info-card:last-child {
        margin-bottom: 0 !important;
    }

    .contact-info-icon {
        width: 48px !important;
        height: 48px !important;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
    }

    .contact-info-title {
        font-size: 15px !important;
        font-weight: 600 !important;
        margin-bottom: 6px !important;
        color: #1f2937 !important;
    }

    .contact-info-value,
    .contact-info-text {
        font-size: 14px !important;
        line-height: 1.5 !important;
        color: #6b7280 !important;
    }

    .contact-info-value a {
        color: #0B3772 !important;
        text-decoration: none !important;
        font-weight: 500 !important;
    }

    /* Form steps indicator */
    .form-steps {
        display: flex !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-bottom: 28px !important;
    }

    .form-step {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 14px !important;
        border-radius: 20px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        background: #f3f4f6 !important;
        color: #6b7280 !important;
    }

    .form-step.active {
        background: rgba(11, 55, 114, 0.1) !important;
        color: #0B3772 !important;
    }

    .form-step-number {
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        background: #e5e7eb !important;
        color: #6b7280 !important;
    }

    .form-step.active .form-step-number {
        background: #0B3772 !important;
        color: #ffffff !important;
    }

    .form-step-line {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .contact-hero,
    .section.contact-hero {
        padding: 100px 0 48px !important;
    }

    .contact-hero-title,
    .contact-hero .section-title {
        font-size: 24px !important;
    }

    .form-card,
    .contact-form-card {
        padding: 24px 20px !important;
    }

    .form-steps {
        flex-wrap: wrap !important;
    }

    .form-step span:not(.form-step-number) {
        display: none !important;
    }
}

/* ===========================================
   10. INDEX.HTML - Hero principal (consolidé)
   =========================================== */

/* Animation Logo Reveal */
@keyframes logoReveal {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
        filter: blur(10px);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05) translateY(-5px);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: blur(0);
    }
}

@keyframes logoGlow {
    0%, 100% {
        filter: drop-shadow(0 0 0 rgba(230, 184, 0, 0));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(230, 184, 0, 0.4));
    }
}

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

@media (max-width: 960px) {
    .hero {
        padding: 120px 0 64px !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    /* CACHER l'ampoule animée en background sur mobile */
    .hero-logo-bg {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        pointer-events: none !important;
    }

    .hero .container {
        padding: 0 20px !important;
    }

    .hero-content {
        text-align: center !important;
        max-width: 100% !important;
    }

    /* ===========================================
       LOGO MOBILE - Animation Reveal
       =========================================== */
    .hero-mobile-logo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        width: 140px !important;
        height: 140px !important;
        margin: 0 auto 32px auto !important;
        overflow: visible !important;
        pointer-events: auto !important;
        animation: logoReveal 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
                   logoPulse 4s ease-in-out 1.5s infinite !important;
    }

    .hero-mobile-logo img,
    .hero-mobile-logo picture {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        animation: logoGlow 3s ease-in-out 1.2s infinite !important;
    }

    .hero-label,
    .hero-badge {
        font-size: 11px !important;
        padding: 10px 18px !important;
        margin-bottom: 20px !important;
    }

    .hero-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
        margin-bottom: 24px !important;
    }

    .hero-title span {
        display: inline !important;
    }

    .hero-description {
        font-size: 16px !important;
        line-height: 1.65 !important;
        margin-bottom: 32px !important;
        max-width: 450px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 10px !important;
    }

    .hero-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        margin-bottom: 8px !important;
        max-width: 320px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-buttons .btn {
        width: 100% !important;
        padding: 18px 28px !important;
        font-size: 15px !important;
        justify-content: center !important;
    }

    /* Simulation window dans hero - cacher sur mobile */
    .simulation-window {
        display: none !important;
    }

    /* Hero image card - cacher */
    .hero-image-card,
    .hero-float-card {
        display: none !important;
    }

    /* Stats full width sous hero */
    .hero-stats-fullwidth {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
        padding: 20px 16px !important;
        margin-top: 32px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    }

    .hero-stat {
        text-align: center !important;
        padding: 12px 8px !important;
    }

    .hero-stat-number {
        font-size: 26px !important;
        font-weight: 700 !important;
        margin-bottom: 4px !important;
        color: #0B3772 !important;
    }

    .hero-stat-label {
        font-size: 11px !important;
        line-height: 1.35 !important;
        color: #6b7280 !important;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 110px 0 56px !important;
        overflow: visible !important;
    }

    /* Ampoule animée - cachée sur mobile */
    .hero-logo-bg {
        display: none !important;
    }

    /* Logo mobile - taille réduite */
    .hero-mobile-logo {
        width: 120px !important;
        height: 120px !important;
        margin-bottom: 28px !important;
    }

    .hero-title {
        font-size: 26px !important;
        margin-bottom: 20px !important;
    }

    .hero-description {
        font-size: 15px !important;
        margin-bottom: 28px !important;
    }

    .hero-stats-fullwidth {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .hero-stat {
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 14px 18px !important;
        text-align: left !important;
    }

    .hero-stat-number {
        font-size: 24px !important;
        margin-bottom: 0 !important;
        min-width: 70px !important;
    }

    .hero-stat-label {
        font-size: 12px !important;
        flex: 1 !important;
    }
}

/* ===========================================
   ESPACEMENT HERO → SECTION "POURQUOI NOUS CHOISIR"
   Plus d'espace entre le logo animé et le titre en dessous
   =========================================== */
@media (max-width: 960px) {
    /* Section Features après le hero - plus d'espace en haut */
    .hero + .section,
    .hero + #features,
    .hero + .section-gradient-light,
    section#features {
        padding-top: 80px !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 480px) {
    .hero + .section,
    .hero + #features,
    .hero + .section-gradient-light,
    section#features {
        padding-top: 72px !important;
    }
}

/* ===========================================
   11. ESPACEMENT TITRE/TEXTE → ENCARTS (FINAL)
   RÈGLE DÉFINITIVE - Uniquement margin-bottom sur header
   =========================================== */
@media (max-width: 960px) {
    /* Container narrow */
    .container-narrow {
        max-width: 100% !important;
        padding: 0 20px !important;
    }

    /* TOUTES les grilles - PAS de margin-top */
    .features-grid,
    .process-grid,
    .services-grid,
    .services-grid-new,
    .stats-grid,
    .benefit-grid,
    .step-grid,
    .testimonial-grid {
        margin-top: 0 !important;
    }
}

@media (max-width: 480px) {
    /* TOUTES les grilles - PAS de margin-top */
    .features-grid,
    .process-grid,
    .services-grid,
    .services-grid-new,
    .stats-grid,
    .benefit-grid,
    .step-grid,
    .testimonial-grid {
        margin-top: 0 !important;
    }
}

/* ===========================================
   12. HERO MOBILE FLOATING CARDS - INDEX.HTML
   Cartes flottantes animées pour mobile
   =========================================== */

/* Animation des cartes flottantes - améliorée */
@keyframes float-card-1 {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-8px) rotate(0.5deg);
    }
    75% {
        transform: translateY(-4px) rotate(-0.5deg);
    }
}

@keyframes float-card-2 {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    33% {
        transform: translateY(-10px) rotate(-0.5deg);
    }
    66% {
        transform: translateY(-5px) rotate(0.5deg);
    }
}

@keyframes float-card-3 {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    40% {
        transform: translateY(-6px) rotate(0.3deg);
    }
    80% {
        transform: translateY(-12px) rotate(-0.3deg);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 8px 32px rgba(11, 55, 114, 0.15), 0 0 0 0 rgba(11, 55, 114, 0.1);
    }
    50% {
        box-shadow: 0 12px 40px rgba(11, 55, 114, 0.2), 0 0 0 4px rgba(11, 55, 114, 0.05);
    }
}

@keyframes fade-in-scale {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Cacher par défaut sur desktop */
.hero-mobile-cards {
    display: none !important;
}

@media (max-width: 960px) {
    /* Cacher COMPLÈTEMENT la version desktop du hero visual et simulateur */
    .hero-visual,
    .hero-visual *,
    .simulation-window,
    .simulation-window *,
    .hero-image-card,
    .floating-cards-right {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        pointer-events: none !important;
    }

    /* Afficher les floating cards sur mobile */
    .hero-mobile-cards {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 14px !important;
        margin-top: 56px !important;
        width: 100% !important;
        padding: 0 16px !important;
        animation: fade-in-scale 0.8s ease-out forwards !important;
    }

    /* Carte flottante mobile - Style amélioré */
    .mobile-float-card {
        position: relative !important;
        z-index: 10 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 16px 20px !important;
        background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
        border-radius: 18px !important;
        box-shadow: 0 8px 32px rgba(11, 55, 114, 0.12),
                    0 2px 8px rgba(0, 0, 0, 0.06) !important;
        border: 1px solid rgba(11, 55, 114, 0.08) !important;
        flex-shrink: 0 !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    }

    .mobile-float-card:active {
        transform: scale(0.98) !important;
    }

    /* Animations différentes pour chaque carte */
    .mobile-float-card.mobile-float-1 {
        animation: float-card-1 4s ease-in-out infinite, pulse-glow 6s ease-in-out infinite !important;
        animation-delay: 0s, 0s !important;
    }

    .mobile-float-card.mobile-float-2 {
        animation: float-card-2 5s ease-in-out infinite, pulse-glow 6s ease-in-out infinite !important;
        animation-delay: 0.5s, 2s !important;
    }

    .mobile-float-card.mobile-float-3 {
        animation: float-card-3 4.5s ease-in-out infinite, pulse-glow 6s ease-in-out infinite !important;
        animation-delay: 1s, 4s !important;
    }

    /* Icône de la carte - Style amélioré */
    .mobile-float-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 14px !important;
        flex-shrink: 0 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
        transition: transform 0.3s ease !important;
    }

    .mobile-float-icon svg {
        width: 24px !important;
        height: 24px !important;
        display: block !important;
        stroke-width: 2.5 !important;
    }

    .mobile-float-icon.green {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.25) 100%) !important;
        border: 1px solid rgba(16, 185, 129, 0.2) !important;
    }

    .mobile-float-icon.green svg {
        color: #059669 !important;
        stroke: #059669 !important;
    }

    .mobile-float-icon.blue {
        background: linear-gradient(135deg, rgba(11, 55, 114, 0.12) 0%, rgba(11, 55, 114, 0.22) 100%) !important;
        border: 1px solid rgba(11, 55, 114, 0.15) !important;
    }

    .mobile-float-icon.blue svg {
        color: #0B3772 !important;
        stroke: #0B3772 !important;
    }

    .mobile-float-icon.purple {
        background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.25) 100%) !important;
        border: 1px solid rgba(139, 92, 246, 0.2) !important;
    }

    .mobile-float-icon.purple svg {
        color: #7c3aed !important;
        stroke: #7c3aed !important;
    }

    /* Contenu de la carte - Style amélioré */
    .mobile-float-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
    }

    .mobile-float-value {
        font-size: 20px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        line-height: 1.2 !important;
    }

    .mobile-float-label {
        font-size: 13px !important;
        color: #64748b !important;
        text-transform: none !important;
        font-weight: 500 !important;
        letter-spacing: -0.01em !important;
    }
}

/* Breakpoint 768px - tablettes */
@media (max-width: 768px) {
    .hero-mobile-cards {
        gap: 12px !important;
        margin-top: 36px !important;
        padding: 0 12px !important;
    }

    .mobile-float-card {
        padding: 14px 18px !important;
        border-radius: 16px !important;
    }

    .mobile-float-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }

    .mobile-float-value {
        font-size: 18px !important;
    }
}

/* Breakpoint 480px - petits mobiles */
@media (max-width: 480px) {
    .hero-mobile-cards {
        gap: 10px !important;
        margin-top: 32px !important;
        padding: 0 8px !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .mobile-float-card {
        padding: 14px 18px !important;
        border-radius: 16px !important;
        gap: 12px !important;
        width: auto !important;
        min-width: 200px !important;
        max-width: 280px !important;
    }

    .mobile-float-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 12px !important;
    }

    .mobile-float-icon svg {
        width: 22px !important;
        height: 22px !important;
    }

    .mobile-float-value {
        font-size: 18px !important;
        font-weight: 700 !important;
    }

    .mobile-float-label {
        font-size: 12px !important;
    }
}

/* Breakpoint 360px - très petits écrans */
@media (max-width: 360px) {
    .hero-mobile-cards {
        gap: 8px !important;
        margin-top: 28px !important;
    }

    .mobile-float-card {
        padding: 12px 16px !important;
        min-width: 180px !important;
    }

    .mobile-float-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }

    .mobile-float-icon svg {
        width: 20px !important;
        height: 20px !important;
    }

    .mobile-float-value {
        font-size: 16px !important;
    }

    .mobile-float-label {
        font-size: 11px !important;
    }
}

/* ===========================================
   HERO BACKGROUNDS - Pages Services (Mobile)
   Styles pour les pages avec images de fond
   =========================================== */

@media (max-width: 960px) {
    /* Textes en blanc pour les pages de service avec background */
    .page-courtage .hero-page .section-label,
    .page-turpe .hero-page .section-label,
    .page-fiscalite .hero-page .section-label {
        color: rgba(255, 255, 255, 0.9) !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
    }

    .page-courtage .hero-page .section-title,
    .page-turpe .hero-page .section-title,
    .page-fiscalite .hero-page .section-title {
        color: #ffffff !important;
        text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3) !important;
    }

    .page-courtage .hero-page .section-subtitle,
    .page-turpe .hero-page .section-subtitle,
    .page-fiscalite .hero-page .section-subtitle {
        color: rgba(255, 255, 255, 0.9) !important;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2) !important;
    }

    /* Boutons blancs sur fond sombre */
    .page-courtage .hero-page .btn-primary,
    .page-turpe .hero-page .btn-primary,
    .page-fiscalite .hero-page .btn-primary {
        background: #ffffff !important;
        color: var(--primary) !important;
        border: none !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    }

    /* Forcer la visibilité des éléments animés */
    .page-courtage .hero-page .animate,
    .page-turpe .hero-page .animate,
    .page-fiscalite .hero-page .animate {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        animation: none !important;
    }
}

@media (max-width: 768px) {
    .page-courtage .hero-page .section-title,
    .page-turpe .hero-page .section-title,
    .page-fiscalite .hero-page .section-title {
        font-size: 26px !important;
        line-height: 1.25 !important;
    }

    .page-courtage .hero-page .section-subtitle,
    .page-turpe .hero-page .section-subtitle,
    .page-fiscalite .hero-page .section-subtitle {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
}

@media (max-width: 480px) {
    .page-courtage .hero-page .section-title,
    .page-turpe .hero-page .section-title,
    .page-fiscalite .hero-page .section-title {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    .page-courtage .hero-page .section-subtitle,
    .page-turpe .hero-page .section-subtitle,
    .page-fiscalite .hero-page .section-subtitle {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .page-courtage .hero-page .section-label,
    .page-turpe .hero-page .section-label,
    .page-fiscalite .hero-page .section-label {
        font-size: 11px !important;
        padding: 5px 10px !important;
    }

    .page-courtage .hero-page .btn-primary,
    .page-turpe .hero-page .btn-primary,
    .page-fiscalite .hero-page .btn-primary {
        padding: 12px 18px !important;
        font-size: 14px !important;
    }
}