/* ============================================================================ * cpb-auth.css — Surfaces d'AUTHENTIFICATION CPBRODERIE (palier 6C-1b-A) * * Feuille SPÉCIFIQUE des pages d'authentification : * - Espace client : login / register / verify-email (_client_auth.php → * client_page_top()) — corps . * - Administration : core/admin/login.php — même corps + variante `.is-admin`. * * Consomme les tokens de src/css/cpb-design-system.css (chargé AVANT). Ne * redéfinit AUCUN token `--cpb-*`. Tous les sélecteurs d'éléments nus sont * scellés sous `.cpb-auth-body` : aucune fuite globale possible. * ========================================================================== */ .cpb-auth-body { margin: 0; min-height: 100vh; font-family: var(--cpb-font); color: var(--cpb-text); line-height: var(--cpb-lh-base); /* Fond marine sobre, dégradé discret vers le neutre. */ background: linear-gradient(160deg, var(--cpb-navy-deep) 0%, var(--cpb-navy) 46%, var(--cpb-bg) 46%); -webkit-font-smoothing: antialiased; } .cpb-auth-wrap { max-width: 440px; margin: 0 auto; padding: 40px 16px 32px; box-sizing: border-box; } /* ---- Marque ---- */ .cpb-auth-brand { text-align: center; margin-bottom: 20px; color: #fff; } .cpb-auth-brand-name { display: block; font-size: 22px; font-weight: var(--cpb-fw-bold); letter-spacing: 0.06em; } .cpb-auth-brand-sub { display: inline-block; margin-top: 8px; font-size: var(--cpb-fs-label); font-weight: var(--cpb-fw-medium); color: var(--cpb-navy-deep); background: var(--cpb-gold); border-radius: var(--cpb-radius-pill); padding: 3px 12px; } /* Variante admin : pastille or plus affirmée, libellé distinct. */ .cpb-auth-body.is-admin .cpb-auth-brand-sub { color: var(--cpb-gold); background: transparent; border: 1px solid var(--cpb-gold-line); letter-spacing: 0.08em; text-transform: uppercase; } /* ---- Carte ---- */ .cpb-auth-body .cpb-card { background: var(--cpb-card); border: 1px solid var(--cpb-border); border-top: 3px solid var(--cpb-navy); border-radius: var(--cpb-radius); box-shadow: var(--cpb-shadow-hover); padding: 28px 26px; } .cpb-auth-body.is-admin .cpb-card { border-top-color: var(--cpb-gold); } .cpb-auth-body h1 { font-size: var(--cpb-fs-h2); font-weight: var(--cpb-fw-bold); color: var(--cpb-navy); margin: 0 0 6px; } .cpb-auth-sub { margin: 0 0 18px; font-size: var(--cpb-fs-label); color: var(--cpb-muted); } /* ---- Champs ---- */ .cpb-auth-body label { display: block; font-size: var(--cpb-fs-label); font-weight: var(--cpb-fw-medium); color: var(--cpb-text); margin: 14px 0 4px; } .cpb-auth-body input[type="text"], .cpb-auth-body input[type="email"], .cpb-auth-body input[type="password"], .cpb-auth-body input:not([type]) { width: 100%; box-sizing: border-box; font-family: var(--cpb-font); font-size: 14px; color: var(--cpb-text); background: #fff; padding: 10px 11px; border: 1px solid var(--cpb-border); border-radius: var(--cpb-radius-sm); } .cpb-auth-body input:focus { outline: 2px solid var(--cpb-gold); outline-offset: 1px; border-color: var(--cpb-navy); } /* ---- Boutons ---- */ .cpb-auth-body button { width: 100%; margin-top: 20px; padding: 11px 14px; border: 0; border-radius: var(--cpb-radius-sm); background: var(--cpb-navy); color: #fff; font-family: var(--cpb-font); font-size: 15px; font-weight: var(--cpb-fw-medium); cursor: pointer; transition: background var(--cpb-transition); } .cpb-auth-body button:hover { background: var(--cpb-navy-deep); } .cpb-auth-body button:focus-visible { outline: 2px solid var(--cpb-gold); outline-offset: 2px; } /* Action secondaire (ex. renvoyer l'email) : contour marine, non concurrente. */ .cpb-auth-body button.cpb-auth-secondary { margin-top: 10px; background: #fff; color: var(--cpb-navy); border: 1px solid var(--cpb-border); } .cpb-auth-body button.cpb-auth-secondary:hover { background: var(--cpb-bg); } /* ---- Messages ---- */ .cpb-auth-body .cpb-msg { padding: 10px 12px; border-radius: var(--cpb-radius-sm); font-size: 14px; margin-bottom: 14px; border: 1px solid var(--cpb-border); } .cpb-auth-body .cpb-msg-ok { background: var(--cpb-ok-bg); border-color: var(--cpb-ok-border); color: var(--cpb-ok-text); } .cpb-auth-body .cpb-msg-err { background: var(--cpb-err-bg); border-color: var(--cpb-err-border); color: var(--cpb-err-text); } /* ---- Liens sous le formulaire ---- */ .cpb-auth-body .cpb-links { margin-top: 18px; font-size: var(--cpb-fs-label); text-align: center; color: var(--cpb-muted); } .cpb-auth-body .cpb-links a { color: var(--cpb-navy); font-weight: var(--cpb-fw-medium); text-decoration: none; } .cpb-auth-body .cpb-links a:hover { text-decoration: underline; } /* ---- Retour au site ---- */ .cpb-auth-back { display: block; text-align: center; margin-top: 20px; font-size: var(--cpb-fs-label); color: #fff; text-decoration: none; opacity: 0.9; } .cpb-auth-back:hover { text-decoration: underline; opacity: 1; } .cpb-auth-body.is-admin .cpb-auth-back { color: var(--cpb-text); } /* ---- Honeypot (champ anti-bot masqué) ---- */ .cpb-auth-body .cpb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---- Mobile ---- */ @media (max-width: 480px) { .cpb-auth-wrap { padding: 28px 14px 24px; } .cpb-auth-body .cpb-card { padding: 22px 18px; } }