/* ════════════════════════════════════════════════════════════════════════════
   O'FITNESS — MOBILE-FIRST FIX
   ════════════════════════════════════════════════════════════════════════════
   
   OBJECTIF : 
   Corriger tous les bugs d'affichage mobile, optimiser les performances
   des animations sur smartphone, et garantir des interactions tactiles fluides.
   
   APPROCHE :
   - Mobile-first : styles par défaut = mobile
   - Progressive enhancement vers tablet (768px) et desktop (1024px)
   - Respect de prefers-reduced-motion
   - Optimisation GPU avec will-change ciblé
   
   CHARGÉ EN DERNIER pour surcharger les fichiers existants sans les modifier.
   ════════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   1. GLOBAL — Prévention des débordements
   ════════════════════════════════════════════════════════════════════════════ */

/* Empêche tout débordement horizontal causé par les animations translateX */
html, body {
    overflow-x: hidden !important;
    width: 100%;
    max-width: 100vw;
}

/* Touch-action explicite sur body pour éviter les conflits swipe/scroll */
body {
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

/* Fix inline style invalide : font-weight: 300px → devrait être 300 */
/* Appliqué via JS car c'est un style inline */


/* ════════════════════════════════════════════════════════════════════════════
   2. PERFORMANCE — Désactivation/Réduction des animations sur mobile
   ════════════════════════════════════════════════════════════════════════════ */

/* ────── 2.1 Reduce motion preference ────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ────── 2.2 Mobile performance optimizations (< 768px) ────── */
@media (max-width: 768px) {
    
    /* Supprimer le pseudo-element fixed du body high-energy
       (radial-gradient plein écran = repaint continu) */
    body.high-energy::before {
        display: none !important;
    }
    
    /* Désactiver heroZoom et cinematicZoom sur mobile 
       → les deux s'appliquent en même temps, très coûteux */
    body.high-energy .hero-bg img,
    body.high-energy .hero-bg video {
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }
    
    .hero-bg-zoom {
        animation: none !important;
        transform: none !important;
    }
    
    /* Désactiver l'animation outlineFloat 
       (texte masqué mais toujours calculé) */
    .hero-title-outline {
        display: none !important;
        animation: none !important;
    }
    
    /* Remplacer backdrop-filter coûteux par fond opaque sur header */
    body.high-energy .header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.97) !important;
    }
    
    /* Remplacer backdrop-filter sur cartes témoignages */
    .testimonial-card {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.95) !important;
    }
    
    /* Remplacer backdrop-filter sur l'overlay de portfolio */
    .portfolio-card-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* Simplifier box-shadow animations sur mobile */
    .whatsapp-float a {
        animation: none !important;
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35) !important;
    }
    
    body.high-energy .hero-badge {
        animation: none !important;
        box-shadow: 0 0 0 1px rgba(0, 163, 255, 0.3) !important;
    }
    
    /* Désactiver le blur sur vision-content pour le reveal 
       (le blur sur texte est très gourmand) */
    .vision-content.he-slide-left,
    .hero-power-slide {
        filter: none !important;
    }
    
    /* Simplifier les transitions reveal sur mobile */
    .he-reveal,
    .he-slide-left,
    .he-slide-right,
    .he-scale {
        transition-duration: 0.5s !important;
    }
    
    /* Empêcher les translateX qui causent un débordement */
    .he-slide-left,
    .he-slide-right {
        transform: translateY(30px) !important;
    }
    
    .he-slide-left.revealed,
    .he-slide-right.revealed {
        transform: translateY(0) translateX(0) !important;
    }
    
    /* Désactiver les hover effects qui restent "collés" sur tactile */
    .solution-card:hover,
    .difference-item:hover,
    .step-item:hover,
    .benefit-item:hover {
        transform: none !important;
    }
    
    /* Simplifier les cartes - pas de rotation ni élévation sur touch */
    body.high-energy .solution-card:hover,
    body.high-energy .difference-item:hover,
    body.high-energy .step-item:hover,
    body.high-energy .benefit-item:hover {
        transform: none !important;
        box-shadow: var(--he-shadow-soft) !important;
    }
    
    .testimonial-card:hover {
        transform: none !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   3. HERO — Fix débordements et lisibilité mobile
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Fix le bouton CTA qui déborde sur petits écrans */
    .btn-hero-primary {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 24px !important;
        font-size: 15px !important;
        box-sizing: border-box !important;
    }
    
    /* Fix la zone CTA */
    .hero-cta-brutalist {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    /* Hero content ne doit jamais dépasser le viewport */
    .hero-content,
    .hero-content-left {
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        overflow: hidden !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* Titre hero - taille adaptative + anti-débordement */
    .hero-content h1 {
        font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Sous-titre hero */
    .hero-subtitle {
        font-size: 14px !important;
        line-height: 1.6 !important;
        padding: 0 4px !important;
    }
    
    /* Badge hero - plus petit et centré */
    .hero-badge {
        font-size: 11px !important;
        padding: 6px 14px !important;
        letter-spacing: 1px !important;
    }
    
    /* Scroll indicator - plus discret sur mobile */
    .hero-scroll {
        bottom: 16px !important;
        opacity: 0.5 !important;
    }
    
    .hero-scroll span {
        font-size: 11px !important;
    }
}

/* iPhone SE et très petits écrans */
@media (max-width: 375px) {
    .hero-content h1 {
        font-size: 1.6rem !important;
    }
    
    .hero-subtitle {
        font-size: 13px !important;
    }
    
    .btn-hero-primary {
        padding: 14px 20px !important;
        font-size: 14px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   4. VISION — Fix grille inline et débordements texte
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* La grille de valeurs utilise un style inline grid 2 colonnes.
       On force 1 colonne sur mobile pour éviter le débordement de texte */
    .vision-content div[style*="grid-template-columns: repeat(2"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* Réduire le texte des valeurs sur mobile */
    .vision-content div[style*="grid-template-columns"] strong {
        font-size: 13px !important;
    }
    
    /* Image vision - hauteur adaptative */
    .vision-image img {
        height: auto !important;
        max-height: 280px !important;
        border-radius: 16px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   5. SOLUTIONS — Cartes bien dimensionnées
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .solutions-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .solution-card {
        padding: 20px !important;
    }
    
    .solution-card h3 {
        font-size: 16px !important;
    }
    
    .solution-card p {
        font-size: 13px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   6. APPROCHE — Steps en colonne sur mobile
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .steps-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .step-item {
        padding: 24px 20px !important;
    }
    
    .step-number {
        width: 40px !important;
        height: 40px !important;
        font-size: 20px !important;
    }
    
    .step-item h3 {
        font-size: 17px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   7. DIFFERENCE — Cards en colonne + fix texte blanc
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .difference-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .difference-item {
        padding: 16px !important;
    }
    
    .difference-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }
    
    .difference-content h3 {
        font-size: 15px !important;
    }
    
    .difference-content p {
        font-size: 13px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   8. BÉNÉFICES — Grille responsive
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .benefits-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .benefit-item {
        padding: 24px 20px !important;
    }
    
    /* Images bénéfices - hauteur réduite sur mobile */
    .benefit-image-container {
        height: 160px !important;
    }
    
    .benefit-item h3 {
        font-size: 16px !important;
    }
}

/* 2 colonnes sur tablette */
@media (min-width: 480px) and (max-width: 768px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   9. CARROUSEL TÉMOIGNAGES — Touch-friendly
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Touch-action pour éviter le conflit scroll vertical */
    .testimonial-carousel {
        touch-action: pan-x !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x proximity !important; /* proximity au lieu de mandatory */
        padding-bottom: 24px !important;
    }
    
    /* Taille des cartes qui ne dépasse pas le viewport */
    .testimonial-card {
        width: 80vw !important;
        max-width: 300px !important;
        min-height: auto !important;
    }
    
    /* Dégradés de bord plus fins sur mobile */
    .testimonial-carousel-wrapper::before,
    .testimonial-carousel-wrapper::after {
        width: 30px !important;
    }
}

/* Indicateurs de pagination (dots) pour le carrousel */
.testimonial-carousel-wrapper {
    position: relative;
}

.testimonial-carousel-dots {
    display: none;
}

@media (max-width: 768px) {
    .testimonial-carousel-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 12px 0 0;
    }
    
    .testimonial-carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(0, 102, 179, 0.2);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .testimonial-carousel-dot.active {
        background: var(--color-primary, #0066B3);
        width: 24px;
        border-radius: 4px;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   10. PORTFOLIO — Fix Modal et interactions tactiles
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Grille portfolio - colonnes plus petites */
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2px !important;
    }
    
    /* Sur mobile, l'overlay portfolio est toujours visible (pas de hover) */
    .portfolio-card-overlay {
        opacity: 1 !important;
        background: linear-gradient(to bottom,
            transparent 30%,
            rgba(0, 51, 102, 0.85) 100%) !important;
        justify-content: flex-end !important;
        padding-bottom: 16px !important;
    }
    
    /* Cacher l'icône + sur mobile */
    .portfolio-card-icon {
        display: none !important;
    }
    
    /* Titre plus petit sur mobile */
    .portfolio-card-title {
        font-size: 14px !important;
        padding: 0 12px !important;
        line-height: 1.3 !important;
    }
    
    .portfolio-card-category {
        font-size: 10px !important;
        margin-bottom: 4px !important;
    }
    
    .portfolio-card-date {
        font-size: 11px !important;
    }
    
    /* Modal portfolio - meilleur layout mobile */
    .portfolio-modal-content {
        flex-direction: column !important;
    }
    
    .portfolio-modal-info {
        width: 100% !important;
        max-height: 35vh !important;
        padding: 20px 16px !important;
        order: 2 !important;
    }
    
    .portfolio-modal-gallery {
        padding: 60px 16px 20px !important;
        order: 1 !important;
        flex: 1 !important;
        min-height: 0 !important;
    }
    
    .portfolio-modal-title {
        font-size: 20px !important;
    }
    
    .portfolio-modal-description {
        font-size: 13px !important;
        margin-bottom: 16px !important;
    }
    
    /* Navigation portfolio - boutons plus petits */
    .portfolio-nav-btn {
        width: 40px !important;
        height: 40px !important;
    }
    
    .portfolio-nav-btn svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    .portfolio-nav-btn.prev {
        left: 8px !important;
    }
    
    .portfolio-nav-btn.next {
        right: 8px !important;
    }
    
    .portfolio-modal-close {
        top: 12px !important;
        right: 12px !important;
        width: 38px !important;
        height: 38px !important;
        z-index: 100 !important;
    }
    
    /* Miniatures - 4 colonnes sur mobile */
    .portfolio-modal-thumbnails {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
    }
    
    /* Filtres portfolio - scroll horizontal si trop de filtres */
    .portfolio-filters {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        padding: 0 16px !important;
        gap: 8px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    
    .portfolio-filters::-webkit-scrollbar {
        display: none !important;
    }
    
    .filter-btn {
        flex-shrink: 0 !important;
        padding: 8px 18px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    .portfolio-grid {
        grid-template-columns: 1fr !important;
    }
    
    .portfolio-card {
        aspect-ratio: 4/3 !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   11. CONTACT — Form et aside responsive
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    .contact-form {
        padding: 20px 16px !important;
    }
    
    .contact-aside {
        padding: 20px 16px !important;
    }
    
    /* Inputs plus grands pour le tactile (min 44px) */
    .form-group input,
    .form-group textarea {
        padding: 14px !important;
        font-size: 16px !important; /* Empêche le zoom iOS sur focus */
        min-height: 48px !important;
    }
    
    .form-group label {
        font-size: 13px !important;
    }
    
    /* Bouton submit - pleine largeur */
    .btn-full {
        padding: 16px !important;
        font-size: 15px !important;
    }
    
    /* Note sous le formulaire */
    .form-note {
        font-size: 12px !important;
        flex-wrap: wrap !important;
    }
    
    /* Contact features - empêcher le débordement */
    .contact-feature {
        padding: 10px 8px !important;
    }
    
    .contact-feature span {
        font-size: 13px !important;
        word-break: break-word !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   12. FOOTER — Centrage mobile propre
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .footer-top-pro {
        flex-direction: column !important;
        text-align: center !important;
        gap: 32px !important;
    }
    
    .footer-brand,
    .footer-contact,
    .footer-social-section {
        text-align: center !important;
        width: 100% !important;
    }
    
    .footer-social {
        justify-content: center !important;
    }
    
    .footer-bottom-pro {
        text-align: center !important;
    }
    
    .footer-links {
        justify-content: center !important;
        gap: 12px !important;
    }
    
    .footer-legal-links {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 12px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   13. WHATSAPP FLOAT — Z-index et position
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 16px !important;
        right: 16px !important;
        z-index: 990 !important; /* Sous les modals mais au dessus du contenu */
    }
    
    .whatsapp-float a {
        width: 52px !important;
        height: 52px !important;
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35) !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   14. PRELOADER — Optimisé mobile
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .he-preloader-logo {
        width: 80px !important;
    }
    
    .he-preloader-bar {
        width: 160px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   15. LOGO MARQUEE — Performance et lisibilité
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .logo-marquee-section {
        padding: 16px 0 !important;
    }
    
    .marquee-logo img {
        max-height: 32px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   16. SCROLL PROGRESS BAR — Non-intrusive sur mobile
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .scroll-progress {
        height: 2px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   17. SECTIONS — Espacement mobile ajusté
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    section {
        padding: 48px 0 !important;
    }
    
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Titres de section plus petits */
    .h2-title {
        font-size: clamp(1.4rem, 5.5vw, 2rem) !important;
        line-height: 1.25 !important;
    }
    
    /* Texte lead */
    .text-lead {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
    
    /* Sur-titres */
    .text-accent.text-uppercase {
        font-size: 12px !important;
        letter-spacing: 1.5px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   18. MODAL TÉMOIGNAGES — Fix mobile
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .testimonial-modal-overlay {
        padding: 16px !important;
        align-items: flex-end !important; /* Bottom sheet pattern mobile */
    }
    
    .testimonial-modal {
        padding: 24px 20px !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 85vh !important;
        margin-bottom: 0 !important;
    }
    
    .testimonial-modal-overlay.active .testimonial-modal {
        transform: scale(1) translateY(0) !important;
    }
    
    .testimonial-modal-text {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }
    
    .testimonial-modal-close {
        top: 12px !important;
        right: 12px !important;
        width: 36px !important;
        height: 36px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   19. NOTIFICATION — Fix chevauchement WhatsApp
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .notification {
        bottom: 90px !important; /* Au-dessus du WhatsApp float */
        left: 12px !important;
        right: 12px !important;
        max-width: none !important;
        font-size: 14px !important;
    }
}


/* ════════════════════════════════════════════════════════════════════════════
   20. ACTIVE STATES TACTILES — Feedback visuel pour le touch
   ════════════════════════════════════════════════════════════════════════════ */

@media (hover: none) and (pointer: coarse) {
    /* Active state au lieu de hover pour les appareils tactiles */
    .btn:active {
        transform: scale(0.97) !important;
        opacity: 0.9 !important;
    }
    
    .solution-card:active {
        transform: scale(0.98) !important;
        box-shadow: var(--shadow-md) !important;
    }
    
    .difference-item:active {
        opacity: 0.9 !important;
    }
    
    .portfolio-card:active .portfolio-card-image {
        transform: scale(1.02) !important;
    }
    
    .testimonial-card:active {
        transform: scale(0.98) !important;
    }
    
    .filter-btn:active {
        transform: scale(0.95) !important;
    }
    
    .social-link:active {
        transform: scale(0.9) !important;
    }
    
    /* Désactiver complètement les hover transforms */
    .solution-card:hover,
    .benefit-item:hover,
    .step-item:hover,
    .testimonial-card:hover,
    .portfolio-card:hover .portfolio-card-image {
        transform: none !important;
    }
    
    body.high-energy .solution-card:hover,
    body.high-energy .difference-item:hover,
    body.high-energy .step-item:hover,
    body.high-energy .benefit-item:hover {
        transform: none !important;
    }
}