génériques ========================================================================== */ /* Conteneur principal de la page de connexion */ .connexion-page { min-height: calc(100vh - 160px); padding: 80px 0 60px; /* on garde juste le padding vertical, plus de padding horizontal */ display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; width: 100%; margin: 0; overflow-x: hidden; /* bloque le scroll horizontal */ } /* Reset léger uniquement à l’intérieur de la page de connexion */ .connexion-page * { box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* Titre */ .connexion-page h2 { text-align: center; font-size: 28px; text-shadow: 1px 1px 5px rgba(0,0,0,0.3); } /* Message de feedback (login / erreur / succès) */ .message-box { background: rgba(0,0,0,0.4); padding: 10px 15px; border-radius: 10px; margin-bottom: 15px; text-align: center; font-weight: bold; } /* Bloc "Se connecter / S'inscrire" */ .choice-box { display: inline-flex; gap: 16px; background: rgba(0,0,0,0.35); padding: 8px 14px; border-radius: 999px; margin-bottom: 20px; } .choice-box label { display: flex; align-items: center; cursor: pointer; font-size: 14px; } .choice-box input[type="radio"] { margin-right: 6px; } /* Container du formulaire */ .connexion-form { background: rgba(0,0,0,0.6); padding: 40px; border-radius: 20px; box-shadow: 0 8px 30px rgba(0,0,0,0.4); width: 100%; max-width: 380px; transition: transform 0.3s ease, box-shadow 0.3s ease; margin: 10px; /* centré horizontalement et espace top réduit */ box-sizing: border-box; } .connexion-form:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(0,0,0,0.5); } /* Labels */ .connexion-form label { font-size: 14px; } /* Inputs texte & mot de passe */ .connexion-form input[type="text"], .connexion-form input[type="password"] { width: 100%; padding: 12px; margin-top: 5px; margin-bottom: 20px; border-radius: 10px; border: none; outline: none; font-size: 16px; background: rgba(255,255,255,0.1); color: #fff; transition: background 0.3s ease; } .connexion-form input[type="text"]:focus, .connexion-form input[type="password"]:focus { background: rgba(255,255,255,0.2); } /* Bouton de validation */ .connexion-form button { width: 100%; padding: 12px; border: none; border-radius: 10px; background: linear-gradient(45deg, #ff7eb3, #ff758c); color: #fff; font-size: 18px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .connexion-form button:hover { transform: scale(1.05); box-shadow: 0 6px 15px rgba(0,0,0,0.3); } /* Bloc des règles de mot de passe */ #rules-box { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 10px; font-size: 14px; line-height: 1.5; } /* Chaque règle (changera de couleur en JS) */ #rules-box div { transition: color 0.2s ease; } /* Animation d’apparition pour le formulaire et la box de règles */ .connexion-form, #rules-box { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.6s forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } /* Petit ajustement responsive */ @media (max-width: 600px) { .connexion-page { padding-top: 100px; /* un peu plus bas pour ne pas coller le header fixe */ } .connexion-form { padding: 30px 20px; } }