/* * PatrimoineManager — Page de connexion personnalisée * Layout split-screen : panel image gauche + formulaire droit * * NOTE sélecteurs : dans WP login, `.login` est une classe du , * pas un élément enfant. On cible donc `body.pm-login-page` directement * ou via l'id `#login` / `#loginform`. */ /* ── Reset & base ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body.pm-login-page { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: #f8fafc; margin: 0; padding: 0; min-height: 100vh; display: flex; align-items: stretch; } /* ── Panel gauche (image / branding) ─────────────────────────────────────── */ #pm-login-left { position: fixed; inset: 0 auto 0 0; width: 50%; display: flex; flex-direction: column; justify-content: space-between; color: #fff; z-index: 0; overflow: hidden; } #pm-login-left::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,.10) 0%, rgba(0,0,0,.50) 100% ); pointer-events: none; } .pm-login-left-inner { position: relative; z-index: 1; padding: 52px 56px; display: flex; flex-direction: column; gap: 48px; flex: 1; justify-content: center; } .pm-login-brand { display: flex; align-items: center; } .pm-login-logo-img { max-height: 52px; max-width: 220px; object-fit: contain; filter: brightness(0) invert(1); } .pm-login-logo-text { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; } .pm-login-tagline h2 { font-size: 2.2rem; font-weight: 700; line-height: 1.15; margin: 0 0 12px; letter-spacing: -0.03em; } .pm-login-tagline p { font-size: 1.05rem; font-weight: 300; opacity: .85; margin: 0; line-height: 1.6; } .pm-login-features { display: flex; flex-direction: column; gap: 14px; } .pm-login-feature { display: flex; align-items: center; gap: 12px; font-size: .9rem; opacity: .9; } .pm-login-feature-icon { font-size: 1.2rem; width: 36px; height: 36px; background: rgba(255,255,255,.15); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; backdrop-filter: blur(4px); } .pm-login-left-footer { position: relative; z-index: 1; padding: 20px 56px; font-size: .72rem; opacity: .55; letter-spacing: .04em; text-transform: uppercase; } /* ── Panel droit (#login) ─────────────────────────────────────────────────── */ /* Layout forcé en !important : WP 7.0 a réintroduit des règles core agressives sur #login (width:60vw / 100vw, max-width:650px, padding:4vw) qui cassaient le positionnement 50/50 du panneau droit. */ body.pm-login-page #login { position: relative; z-index: 1; margin-left: 50% !important; width: 50% !important; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 56px !important; background: #fff; box-shadow: -12px 0 48px rgba(0,0,0,.06); max-width: none !important; margin-top: 0 !important; box-sizing: border-box; } /* Limite la largeur des enfants directs */ body.pm-login-page #login > * { width: 100%; max-width: 380px; } /* Masque le h1 WP — remplacé par .pm-login-right-header injecté via login_message */ body.pm-login-page #login h1 { display: none !important; } /* ── Header droit : logo + accroche ──────────────────────────────────────── */ .pm-login-right-header { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; width: 100%; max-width: 380px; } .pm-login-right-logo { max-height: 48px; max-width: 200px; object-fit: contain; display: block; } .pm-login-right-name { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: var(--pm-primary, #1B3A5C); } .pm-login-welcome { display: flex; flex-direction: column; gap: 4px; } .pm-login-welcome-title { font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0; letter-spacing: -0.02em; } .pm-login-welcome-sub { font-size: .875rem; color: #6b7280; margin: 0; font-weight: 400; } /* ── Formulaire ───────────────────────────────────────────────────────────── */ body.pm-login-page #loginform, body.pm-login-page #lostpasswordform, body.pm-login-page #registerform { background: #fff; border: none; box-shadow: none; padding: 0; margin-top: 0; } body.pm-login-page #login .login-username, body.pm-login-page #login .login-password { margin-bottom: 18px; } body.pm-login-page #login label { display: block; font-size: .8rem; font-weight: 600; color: #374151; margin-bottom: 6px; letter-spacing: .01em; } body.pm-login-page #login input[type="text"], body.pm-login-page #login input[type="password"], body.pm-login-page #login input[type="email"] { display: block; width: 100%; padding: 11px 14px; font-size: .9rem; font-family: 'Inter', sans-serif; background: #f9fafb; border: 1.5px solid #e5e7eb; border-radius: 8px; color: #111827; transition: border-color .15s, box-shadow .15s, background .15s; outline: none; box-shadow: none; margin: 0; -webkit-appearance: none; line-height: 1.5; } body.pm-login-page #login input[type="text"]:focus, body.pm-login-page #login input[type="password"]:focus, body.pm-login-page #login input[type="email"]:focus { border-color: var(--pm-primary, #1B3A5C); background: #fff; box-shadow: 0 0 0 3px rgba(27,58,92,.10); } /* Mot de passe — bouton afficher/masquer */ body.pm-login-page #login .user-pass-wrap, body.pm-login-page #login .wp-pwd { position: relative; } body.pm-login-page #login .wp-pwd input[type="password"], body.pm-login-page #login .wp-pwd input[type="text"] { padding-right: 44px; } body.pm-login-page #login .wp-hide-pw { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #9ca3af; cursor: pointer; padding: 4px; display: flex; align-items: center; line-height: 1; min-height: 0; box-shadow: none; } body.pm-login-page #login .wp-hide-pw:hover { color: var(--pm-primary, #1B3A5C); box-shadow: none; } body.pm-login-page #login .wp-hide-pw .dashicons { font-size: 18px; width: 18px; height: 18px; } /* Checkbox "Se souvenir de moi" */ body.pm-login-page #login .forgetmenot { display: flex; align-items: center; gap: 8px; margin-bottom: 0; } body.pm-login-page #login .forgetmenot label { font-size: .82rem; font-weight: 400; color: #6b7280; margin: 0; cursor: pointer; } body.pm-login-page #login input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--pm-primary, #1B3A5C); cursor: pointer; margin: 0; flex-shrink: 0; } /* Rangée "Se souvenir" alignée avant le submit */ body.pm-login-page #login .login-remember { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 8px; } /* Bouton de connexion */ body.pm-login-page #login input[type="submit"], body.pm-login-page #wp-submit { display: block; width: 100%; padding: 13px 24px; background: var(--pm-primary, #1B3A5C); color: #fff; font-family: 'Inter', sans-serif; font-size: .95rem; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; transition: opacity .15s, transform .1s, box-shadow .15s; letter-spacing: .01em; -webkit-appearance: none; line-height: 1.5; } body.pm-login-page #login input[type="submit"]:hover, body.pm-login-page #wp-submit:hover { opacity: .88; box-shadow: 0 4px 12px rgba(27,58,92,.25); } body.pm-login-page #login input[type="submit"]:active { transform: scale(.98); box-shadow: none; } body.pm-login-page #login input[type="submit"]:focus, body.pm-login-page #wp-submit:focus { box-shadow: 0 0 0 3px rgba(27,58,92,.25); outline: none; } /* Liens de navigation */ body.pm-login-page #nav, body.pm-login-page #backtoblog { background: none; border: none; box-shadow: none; padding: 0; margin-top: 20px; text-align: center; } body.pm-login-page #nav a, body.pm-login-page #backtoblog a { font-size: .8rem; color: #6b7280; text-decoration: none; transition: color .15s; } body.pm-login-page #nav a:hover, body.pm-login-page #backtoblog a:hover { color: var(--pm-primary, #1B3A5C); } /* Messages d'erreur / succès */ body.pm-login-page #login_error, body.pm-login-page .message, body.pm-login-page .success { border-radius: 8px; border-left: 4px solid; padding: 12px 16px; font-size: .85rem; width: 100%; max-width: 380px; margin-bottom: 16px; box-shadow: none; } body.pm-login-page #login_error { background: #fef2f2; border-color: #ef4444; color: #991b1b; } body.pm-login-page .message { background: #eff6ff; border-color: #3b82f6; color: #1e40af; } body.pm-login-page .success { background: #f0fdf4; border-color: #22c55e; color: #15803d; } /* Spinner WP */ body.pm-login-page .spinner { margin-top: 0; float: none; vertical-align: middle; } /* Page mot de passe perdu */ body.pm-login-page #lostpasswordform p { font-size: .85rem; color: #6b7280; margin-bottom: 20px; line-height: 1.6; } /* ── Responsive ───────────────────────────────────────────────────────────── */ @media (max-width: 900px) { /* Corps : fond = image paramétrée (injecté en PHP via @media), colonne centrée */ body.pm-login-page { flex-direction: column; align-items: center; justify-content: flex-start; padding: 40px 20px 56px; background-color: var(--pm-primary, #1B3A5C); /* fallback sans image */ background-size: cover; background-position: center; } /* Formulaire : carte blanche flottante (pas pleine largeur → image visible). !important pour reprendre le dessus sur la règle desktop forcée. */ body.pm-login-page #login { position: relative; z-index: 1; margin-left: 0 !important; width: 100% !important; max-width: 440px !important; min-height: 0; flex: none; border-radius: 20px; padding: 36px 32px !important; justify-content: flex-start; box-shadow: 0 24px 64px rgba(0,0,0,.35); } /* Infos branding : sort du mode fixed, s'affiche sous la carte */ #pm-login-left { position: static; width: 100%; max-width: 440px; background: none !important; /* transparent — body a déjà l'image */ display: flex; flex-direction: column; } /* Supprime l'overlay (le body a déjà le gradient sombre via PHP) */ #pm-login-left::after { display: none; } /* Masque le logo dans le panel gauche (déjà affiché dans la carte) */ #pm-login-left .pm-login-brand { display: none; } .pm-login-left-inner { padding: 32px 0 0; gap: 24px; flex: none; justify-content: flex-start; } .pm-login-tagline h2 { font-size: 1.5rem; } .pm-login-tagline p { font-size: .95rem; } .pm-login-left-footer { padding: 20px 0 0; } } @media (max-width: 480px) { body.pm-login-page { padding: 28px 16px 48px; } body.pm-login-page #login { padding: 28px 24px; border-radius: 16px; max-width: 100%; } #pm-login-left { max-width: 100%; } .pm-login-right-logo { max-height: 40px; } .pm-login-right-name { font-size: 1.3rem; } .pm-login-tagline h2 { font-size: 1.3rem; } }