/* CSS critique pour l'affichage "above-the-fold" d'ETERNELIS * À inclure directement dans le des pages pour optimiser le LCP et CLS * Taille cible < 10Ko */ /* Reset et styles de base */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Montserrat', sans-serif; line-height: 1.6; color: #333; min-height: 100vh; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: 'Lora', serif; margin: 0 0 1rem; line-height: 1.3; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Header et navigation - critiques pour le premier affichage */ header { position: fixed; top: 0; left: 0; width: 100%; background-color: #ffffff; padding: 15px 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); z-index: 1000; transition: all 0.3s ease; } .logo { display: flex; align-items: center; } .logo-title { font-size: 24px; font-weight: 700; color: #517759; display: flex; align-items: center; } .logo i { color: #6a8d73; margin-right: 8px; } .tagline { font-size: 12px; color: #999; margin-top: 4px; } /* Navigation et menu burger */ nav { display: flex; align-items: center; justify-content: flex-end; } nav ul { display: flex; list-style: none; } nav li { margin-left: 25px; } nav a { color: #333; text-decoration: none; font-weight: 500; transition: color 0.3s; } nav a:hover { color: #6a8d73; } /* Styles pour mobile - menu burger */ .menu-button { display: none; background: none; border: none; font-size: 24px; cursor: pointer; color: #6a8d73; } .mobile-menu { position: fixed; top: 0; right: -280px; width: 280px; height: 100%; background-color: white; box-shadow: -5px 0 15px rgba(0,0,0,0.1); z-index: 1010; transition: right 0.3s ease; overflow-y: auto; } /* Section hero - critique pour le premier affichage */ .hero { /* 100vh inclut la barre d'URL sur iOS Safari => la hero "descend" quand elle se cache. Solution : 100svh (small viewport = jamais plus grand que visible) + fallback 100vh */ height: 100vh; height: 100svh; position: relative; overflow: hidden; /* Evite que le hero bouge au tap/scroll sur iOS */ -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; transform: translateZ(0); -webkit-transform: translateZ(0); } .hero-content { text-align: center; padding: 0 20px; color: white; z-index: 3; position: relative; } .hero-content h2 { font-size: 2.8rem; font-weight: 700; margin-bottom: 1.5rem; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); line-height: 1.2; } /* Bouton CTA principal - crucial pour les conversions */ .cta-button { display: inline-block; background-color: #6a8d73; color: white; padding: 15px 30px; font-weight: 600; text-decoration: none; border-radius: 50px; transition: all 0.3s ease; } /* Bannière de contact - visible en haut de page après le scroll */ .contact-banner { background-color: #6a8d73; color: white; padding: 10px 0; text-align: center; } /* Styles de base pour les vidéos et images en background, pour éviter le CLS */ video { width: 100%; height: 100%; object-fit: cover; } /* Media queries pour le responsive - cruciales pour mobile */ @media (max-width: 992px) { header .container { display: flex; justify-content: space-between; align-items: center; } nav ul { display: none; } .menu-button { display: block; } .hero-content h2 { font-size: 2.2rem; } } @media (max-width: 768px) { .hero-content h2 { font-size: 1.8rem; } } /* Réservation de l'espace pour les images/vidéos (prévention CLS) */ .service-card div { height: 160px; overflow: hidden; position: relative; } /* Animation optimisée pour le premier affichage */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 0.5s ease-out; }