/* services.css - version corrigée pour performance et robustesse */ /* Conteneur principal */ .services-main { max-width: 1200px; margin: 0 auto; padding: 130px 20px 60px 20px; } .services-title { text-align: center; font-size: 2.6em; font-weight: bold; margin-bottom: 60px; color: #222; letter-spacing: 2px; } /* Sections de service - conserved design mais with performance hints (will-change, translate3d) */ .service-section { display: flex; align-items: center; justify-content: center; margin-bottom: 60px; gap: 50px; min-height: 350px; /* animation initiale (si JS ajoute la classe 'visible' -> devient visible) */ opacity: 0; transform: translate3d(0,40px,0); /* use GPU-friendly transform */ transition: opacity 0.8s cubic-bezier(.5,.2,.3,1), transform 0.8s cubic-bezier(.5,.2,.3,1); will-change: opacity, transform; /* hint to browser to optimize */ background: #fff; padding: 30px 40px; border: 1.5px solid #0056b3; border-radius: 18px; box-shadow: 0 6px 28px -14px rgba(0,86,179,0.07); } /* Etat visible (lorsque JS ajoute .visible) */ .service-section.visible { opacity: 1; transform: translate3d(0,0,0); /* avoid 'none' to keep GPU layer */ } /* reverse layout */ .service-section.reverse { flex-direction: row-reverse; } .service-img-col { flex: 1 1 300px; display: flex; align-items: center; justify-content: center; } .service-img-col img { display: block; /* remove inline-gap and avoid layout surprises */ max-width: 300px; width: 100%; border-radius: 12px; box-shadow: 0 2px 18px -8px rgba(0,0,0,0.08); object-fit: cover; aspect-ratio: 4/3; background: #e6e6e6; } /* Texte */ .service-text-col { flex: 2 1 360px; display: flex; flex-direction: column; gap: 20px; } .service-text-col h2 { font-size: 2em; font-weight: bold; margin-bottom: 8px; color: #0056b3; } .service-text-col p { font-size: 1.15em; color: #222; line-height: 1.65; } .service-btn { display: inline-block; margin-top: 10px; padding: 13px 35px; font-size: 1.09em; font-weight: bold; border-radius: 7px; background: linear-gradient(90deg, #0056b3 40%, #5aa8e9 100%); color: #fff; text-decoration: none; letter-spacing: 1px; box-shadow: 0 2px 12px -8px #5aa8e9; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; border: none; cursor: pointer; } .service-btn:hover { background: linear-gradient(90deg, #014480 40%, #5aa8e9 100%); transform: translateY(-2px) scale(1.04); box-shadow: 0 6px 24px -8px #5aa8e9; } /* Responsive */ @media (max-width: 900px) { .service-section, .service-section.reverse { flex-direction: column !important; gap: 22px; padding: 22px 8vw; min-height: unset; } .service-img-col img { max-width: 90vw; aspect-ratio: 16/10; } .service-text-col h2 { font-size: 1.3em; } } /* Petite adaptation du titre pour mobile */ @media (max-width: 600px) { .services-title { font-size: 2em; margin-bottom: 35px; } .service-section { padding: 14px 3vw; } } /* Accessibility: respect user reduced motion */ @media (prefers-reduced-motion: reduce) { .service-section, .service-section.visible { transition: none !important; transform: none !important; opacity: 1 !important; } } /* Fallback: si JS est désactivé (ou ne s'exécute pas), ajouter la classe .no-js sur pour rendre les sections visibles par défaut. (Voir note ci‑dessous.) */ .no-js .service-section { opacity: 1; transform: none; transition: none; }