/* * tw-mobile.css — CSS mobile CRITIQUE (bloquant), volontairement réduit au minimum. * Le reste des optimisations mobiles a été : * - fusionné dans le CSS critique inline du (règles qui conditionnent le * premier rendu du Hero/Header — voir includes/header.php, bloc @media(max-width:767px)) * - déplacé vers tw-mobile-deferred.css, chargé en preload+onload (non bloquant), * pour toutes les règles sans impact sur le premier paint (sections sous la ligne * de flottaison, animations, code confirmé sans effet sur mobile). * Code mort confirmé (site-wide) supprimé : .particles (jamais généré côté serveur * sur mobile), .dashboard-wrap/.dashboard.glass (hero-visual retiré du DOM mobile * par ailleurs, cf. optimisation O3). */ @media (max-width: 767px) { /* ── Toutes les sections : anti-débordement (inclut .hero via le sélecteur générique "section" — laissé ici volontairement : redondant avec le hero fusionné au critique pour l'overflow, mais seul point qui apporte max-width:100vw). ── */ section, .section { overflow: hidden !important; width: 100% !important; max-width: 100vw !important; } } /* * tw-mobile-deferred.css — Optimisations mobiles NON bloquantes. * Chargé en preload+onload (asynchrone) : aucune de ces règles ne conditionne le * premier rendu du Hero ni le LCP. Issu du découpage de tw-mobile.css. */ @media (max-width: 767px) { /* ── Parallax hero : désactivé ── */ .hero-layer { transform: none !important; will-change: auto !important; } /* ── Orbit cards : masquées (utilisé sur /recrutement/candidat.php, recruteur.php, /crm/ — pas sur la home, mais partagé via ce même fichier sur tout le site) ── */ .orbit-card { display: none !important; } /* ── cursor-glow : inutile sur tactile ── */ .cursor-glow { display: none !important; } /* ── Tilt cards : désactivé ── */ .tilt-card { transform: none !important; transition: none !important; } /* ── About sticky scroll → display normal ── */ .about-story { min-height: auto !important; } .about-desktop { display: none !important; } .about-mobile { display: block !important; } /* ── Réduction des box-shadow ── */ .service-card, .process-card, .story-step, .advantage-card { box-shadow: 0 2px 12px rgba(15,23,42,.07) !important; } /* ── Animations reveal ── */ .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } /* Fenêtre à onglets "Ce que vivent les dirigeants" : élément lourd (icônes, dégradés, bordures arrondies) dont le flou GSAP est coûteux à peindre sur mobile et traîne visiblement plus longtemps que sur les autres sections. On ne touche qu'à elle. */ .tw-pp-window.reveal { will-change: filter, opacity, transform; } /* ── Section "Notre façon de travailler" : anti-débordement ── */ .process { overflow: hidden !important; width: 100% !important; max-width: 100vw !important; } .process-viewport { overflow: hidden !important; width: 100% !important; max-width: 100% !important; } .process-track { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 100% !important; padding: 20px 0 40px !important; gap: 16px !important; } .process-card { width: 100% !important; max-width: 100% !important; min-height: auto !important; flex-shrink: 1 !important; } /* ── Madagascar animations : allégées ── */ .madagascar-island { animation: none !important; } .madagascar-glow { animation: none !important; } .pulse { animation-duration: 3s !important; } /* ── Story-steps ── */ .story-step { contain: content; } /* ── islandFloat / glowFloat désactivés ── */ .world-card * { animation-play-state: paused; } .pulse { animation-play-state: running; } /* ── CTA parallax : suppression will-change inutile sur tactile ── */ .tw-cta-img { will-change: auto !important; } /* ── Footer : content-visibility pour sections hors viewport ── */ .tw-footer { content-visibility: auto; contain-intrinsic-size: 0 600px; } }