/* --- RESET ET GÉNÉRAL --- */
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', sans-serif; background-color: #f1f5fe; }
a { text-decoration: none; }

/* --- HEADER --- */
.header { background: #fff; padding: 15px 0; border-bottom: 1px solid #eee; }
.navbar { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo h2 { margin: 0; font-size: 1.2rem; }
.logo span { font-size: 0.7rem; color: #666; }
.nav-menu { display: flex; gap: 20px; }
.nav-menu a { color: #333; font-weight: 500; }
.nav-buttons { display: flex; gap: 10px; }
.btn-outline { padding: 8px 15px; border: 1px solid #0056f5; color: #0056f5; border-radius: 5px; }
.btn-primary { padding: 8px 15px; background: #0056f5; color: white; border-radius: 5px; }

/* --- CONTENU PRINCIPAL --- */
.connex_main-container { display: flex; width: 95%; max-width: 1200px; margin: 50px auto; gap: 50px; align-items: center; min-height: 70vh; }

/* Gauche */
.connex_left-panel { flex: 1; color: #1a2a44; }
.connex_left-panel h1 { font-size: 1.4rem; line-height: 1.2; margin-bottom: 20px; }
.connex_feature-item { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 25px; }
.connex_feature-item i { font-size: 1.5rem; color: #0056f5; }

/* Droite */
.connex_right-panel { flex: 0 0 400px; background-color: #fff; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); min-height:550px; }
.connex_login-card { padding: 20px; }

/* Formulaire & Icônes corrigées */
.connex_input-group { position: relative; margin-bottom: 20px; display: flex; align-items: center; }

/* Icône Enveloppe / Cadenas à gauche */
.connex_input-group i.fa-envelope, 
.connex_input-group i.fa-lock { position: absolute; left: 15px; color: #aaa; z-index: 2; }

.connex_input-group input { width: 100%; padding: 12px 45px; border: 1px solid #ddd; border-radius: 10px; outline: none; }

/* Icône Oeil à droite */
.connex_toggle-password { position: absolute !important; right: 15px; cursor: pointer; color: #aaa; z-index: 3; }

/* Boutons & Liens */
.connex_btn-primary { width: 100%; padding: 14px; background: #0056f5; color: white; border: none; border-radius: 10px; font-weight: bold; cursor: pointer; margin-top: 10px; }
.connex_password-header { display: flex; justify-content: space-between; margin: 10px 0; font-size: 0.9rem; }
.connex_checkbox { display: flex; align-items: center; gap: 10px; margin: 15px 0; }
.connex_footer-link { margin-top: 20px; text-align: center; }

/* Responsive */
@media (max-width: 900px) {
    .connex_main-container { flex-direction: column; text-align: center; }
    .connex_left-panel { display: none; }
    .connex_right-panel { width: 100%; flex: auto; }
}