SEMA - Maintenance</tit <div class="contact-info"> <div class="contact-title">🔥 Ne ratez pas le lancement ! Restez dans la boucle</div> <a href="mailto:contact@semaci.com" class="contact-email"> 💌 contact@semaci.com </a> </div> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; color: #333; } .maintenance-container { background: white; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); padding: 60px 40px; text-align: center; max-width: 600px; width: 90%; position: relative; overflow: hidden; } .maintenance-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4); } .logo { font-size: 48px; font-weight: bold; color: #667eea; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 3px; } .maintenance-icon { font-size: 80px; margin-bottom: 30px; color: #ffa726; } h1 { font-size: 32px; color: #333; margin-bottom: 20px; font-weight: 300; } .message { font-size: 18px; color: #666; line-height: 1.6; margin-bottom: 40px; } .contact-info { background: #f8f9fa; border-radius: 10px; padding: 25px; margin-top: 30px; } .contact-title { font-size: 20px; color: #333; margin-bottom: 15px; font-weight: 500; } .contact-email { font-size: 18px; color: #667eea; text-decoration: none; font-weight: 500; border: 2px solid #667eea; padding: 12px 25px; border-radius: 25px; display: inline-block; transition: all 0.3s ease; } .contact-email:hover { background: #667eea; color: white; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3); } .progress-bar { width: 100%; height: 6px; background: #e0e0e0; border-radius: 3px; margin: 30px 0; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, #667eea, #764ba2); border-radius: 3px; animation: progress 3s ease-in-out infinite; } @keyframes progress { 0% { width: 0%; } 50% { width: 70%; } 100% { width: 0%; } } .footer-text { margin-top: 30px; font-size: 14px; color: #999; } @media (max-width: 768px) { .maintenance-container { padding: 40px 25px; } .logo { font-size: 36px; } h1 { font-size: 24px; } .message { font-size: 16px; } .maintenance-icon { font-size: 60px; } } </style> </head> <body> <div class="maintenance-container"> <div class="logo">SEMA</div> <div class="maintenance-icon">🚧</div> <h1>Votre nouvelle expérience arrive...</h1> <div class="message"> <p><strong>🚀 Bientôt, SEMA débarque !</strong></p> <p>Nous préparons quelque chose de spécial qui va simplifier votre quotidien.</p> <p>Une solution pensée pour vous, adaptée à vos besoins !</p> </div> <div class="progress-bar"> <div class="progress-fill"></div> </div> <div class="contact-info"> <div class="contact-title">🎯 Restez connecté ! Soyez les premiers informés</div> <a href="mailto:contact@semaci.com" class="contact-email"> � contact@semaci.com </a> </div> <div class="footer-text"> <p>Bientôt disponible • 2026 SEMA</p> </div> </div> <script> // Animation simple pour rendre la page plus interactive document.addEventListener('DOMContentLoaded', function() { const container = document.querySelector('.maintenance-container'); container.style.opacity = '0'; container.style.transform = 'translateY(30px)'; setTimeout(() => { container.style.transition = 'all 0.8s ease'; container.style.opacity = '1'; container.style.transform = 'translateY(0)'; }, 100); }); </script> </body> </html>