/* ===================================================== LOGINSTYLES.CSS — SAFE & PREMIUM Ne touche PAS au shell global (body/main/header/footer) Dépend de : ===================================================== */ /* 1) Layout login : on travaille UNIQUEMENT dans .login-wrapper */ body.auth-page.login .login-wrapper{ width:100%; max-width: 560px; margin: 0 auto; padding: 18px 12px 24px; } /* Titre */ body.auth-page.login .login-wrapper h1{ margin: 10px 0 14px; font-weight: 800; font-size: 1.9rem; letter-spacing: -0.02em; line-height: 1.15; color: #0f172a; text-align: center; } /* 2) Langues : desktop = wrap, mobile = scroll */ body.auth-page.login .language-selector{ margin: 10px auto 14px; padding: 6px 2px; display:flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 780px; } body.auth-page.login .language-selector a{ display:inline-flex; align-items:center; gap: 10px; padding: 10px 12px; border-radius: 999px; background: #fff; border: 1px solid rgba(226,232,240,.95); color: #0f172a; text-decoration:none; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 16px rgba(16,24,40,.06); transition: transform .06s, box-shadow .2s, border-color .2s; } body.auth-page.login .language-selector a:hover{ transform: translateY(-1px); border-color: rgba(37,99,235,.25); box-shadow: 0 10px 22px rgba(37,99,235,.10); } body.auth-page.login .language-selector .fi{ width: 20px; height: 14px; border-radius: 3px; box-shadow: 0 1px 4px rgba(16,24,40,.12); } /* 3) Carte */ body.auth-page.login .form-container{ background: #fff; border: 1px solid rgba(226,232,240,.95); border-radius: 18px; padding: 20px 18px; box-shadow: 0 14px 32px rgba(16,24,40,.10); } /* Champs */ body.auth-page.login .login-form > div{ margin-bottom: 14px; } body.auth-page.login .login-form label{ display:block; font-weight: 700; font-size: .95rem; color:#334155; margin: 0 0 6px; } body.auth-page.login .login-form input[type="email"], body.auth-page.login .login-form input[type="password"]{ width:100%; height: 48px; padding: 0 12px; border: 1px solid rgba(203,213,225,.9); border-radius: 12px; font-size: 1rem; color:#0f172a; background:#fff; transition: border-color .2s, box-shadow .2s; } body.auth-page.login .login-form input:focus{ outline:none; border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.14); } /* Mot de passe oublié */ body.auth-page.login .password-reset{ text-align:right; margin: -4px 0 12px; } body.auth-page.login .password-reset a{ font-size: .9rem; color:#2563eb; text-decoration:none; } body.auth-page.login .password-reset a:hover{ text-decoration: underline; } /* Bouton */ body.auth-page.login .login-form button[type="submit"]{ width:100%; height: 52px; border:0; border-radius: 14px; font-weight: 800; font-size: 1rem; color:#fff; background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%); box-shadow: 0 12px 22px rgba(37,99,235,.20); cursor:pointer; transition: filter .2s, transform .06s; } body.auth-page.login .login-form button[type="submit"]:hover{ filter: brightness(1.05); } body.auth-page.login .login-form button[type="submit"]:active{ transform: translateY(1px); } /* Bas de carte */ body.auth-page.login .form-container > p{ margin: 14px 0 0; text-align:center; font-size: .95rem; color:#475569; } body.auth-page.login .form-container > p a{ color:#2563eb; font-weight: 800; text-decoration:none; } body.auth-page.login .form-container > p a:hover{ text-decoration: underline; } /* 4) Mobile : scroll langues + compaction */ @media (max-width: 520px){ body.auth-page.login .language-selector{ overflow-x:auto; flex-wrap: nowrap; justify-content: flex-start; -webkit-overflow-scrolling: touch; } body.auth-page.login .language-selector::-webkit-scrollbar{ display:none; } } /* 5) Portrait mobile hard safety (au cas où) */ @media (max-width: 768px) and (orientation: portrait){ body.auth-page.login .login-wrapper{ max-width: 100%; padding: 10px 12px 18px; } body.auth-page.login .form-container{ padding: 14px 14px; overflow:hidden; } body.auth-page.login .login-form button[type="submit"]{ height: 48px; font-size: .95rem; } } /* Accessibilité */ @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } } /* Champ mot de passe + oeil */ body.signup .pw-field{ position: relative; width: 100%; } body.signup .pw-field input{ padding-right: 54px; /* place pour l’oeil */ } /* Reset total pour éviter que main.css force le bouton */ body.signup .pw-toggle{ all: unset; /* 🔥 neutralise les styles globaux */ position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; z-index: 10; color: #64748b; } body.signup .pw-toggle:hover{ color:#0f172a; } body.signup .pw-toggle:focus-visible{ outline: 3px solid rgba(37,99,235,.25); border-radius: 10px; } /* ✅ Ne masque QUE quand c'est un vrai password */ body.signup #password[type="password"]{ -webkit-text-security: disc; /* optionnel */ } body.signup #password[type="text"]{ -webkit-text-security: none; /* IMPORTANT */ } /* Wrapper password + œil (login + signup) */ body.auth-page .pw-field{ position:relative; width:100%; } body.auth-page .pw-field input{ width:100%; padding-right:52px; /* place pour l’icône */ } body.auth-page .pw-toggle{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:36px; height:36px; display:grid; place-items:center; border:0; background:transparent; cursor:pointer; z-index:5; } body.auth-page input[type="email"], body.auth-page input[type="password"], body.auth-page input[type="text"]{ width:100% !important; max-width:100% !important; height:46px; font-size:16px; padding:0 12px; border-radius:12px; border:1px solid rgba(203,213,225,.9); background:#fff; }