/** * PilPerf — pages authentification (connexion / inscription) * Charte : orange #FF7900, noir #343640 * Polices : Outfit (sigle logo PRC), Plus Jakarta Sans (reste) — lier dans le . */ .auth-modern-body { margin: 0; min-height: 100vh; font-family: "Plus Jakarta Sans", var(--pilperf-font-family, system-ui, sans-serif); background: linear-gradient( 135deg, #1a1a1e 0%, #2d2d33 42%, #c45a00 78%, var(--pilperf-orange, #ff7900) 100% ); display: flex; align-items: center; justify-content: center; padding: 1.25rem; box-sizing: border-box; } .auth-modern-shell { width: 100%; max-width: 56rem; } .auth-modern-card { display: flex; flex-direction: row; background: #fff; border-radius: 1rem; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 24px 48px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.06); } .auth-modern-brand { flex: 0 0 42%; max-width: 22rem; background: linear-gradient(180deg, #0d0d0f 0%, #18181c 50%, #141416 100%); color: #fff; padding: 2.75rem 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1rem; } .auth-modern-brand-logo { width: 6.5rem; height: 6.5rem; border-radius: 50%; background: linear-gradient(145deg, var(--pilperf-orange, #ff7900) 0%, #e06d00 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px rgba(255, 121, 0, 0.35); } /* Sigle affiché comme un seul bloc « PRC », pas P séparé de RC */ .auth-modern-brand-acronym { font-family: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif; font-size: 1.28rem; font-weight: 800; color: #fff; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; } .auth-modern-brand-tagline { margin: 0; font-size: 0.95rem; font-weight: 500; color: rgba(255, 255, 255, 0.88); line-height: 1.45; max-width: 14rem; } .auth-modern-form-wrap { flex: 1; padding: 2.75rem 2.5rem; display: flex; flex-direction: column; justify-content: center; } .auth-modern-title { margin: 0 0 1.75rem; font-size: 1.35rem; font-weight: 700; color: var(--pilperf-black, #343640); text-align: center; } .auth-modern-form .form-group { margin-bottom: 1.1rem; } .auth-modern-input-wrap { position: relative; } .auth-modern-input-wrap .auth-modern-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 0.95rem; pointer-events: none; } .auth-modern-input { width: 100%; padding: 0.85rem 1rem 0.85rem 2.65rem; border: 1px solid #e8eaef; border-radius: 0.75rem; background: #f4f6fa; font-size: 0.9375rem; color: var(--pilperf-black, #343640); transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; box-sizing: border-box; } .auth-modern-input:focus { outline: none; border-color: rgba(255, 121, 0, 0.55); background: #fff; box-shadow: 0 0 0 3px rgba(255, 121, 0, 0.18); } .auth-modern-input::placeholder { color: #9ca3af; } /* Champ mot de passe : bouton afficher / masquer */ .auth-modern-input--has-toggle { padding-right: 2.75rem; } .auth-modern-toggle-vis { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); padding: 0.35rem 0.5rem; border: none; background: transparent; color: #6b7280; cursor: pointer; border-radius: 0.4rem; line-height: 1; z-index: 2; } .auth-modern-toggle-vis:hover, .auth-modern-toggle-vis:focus { color: var(--pilperf-orange, #ff7900); outline: none; box-shadow: 0 0 0 2px rgba(255, 121, 0, 0.25); } .auth-modern-toggle-vis:focus:not(:focus-visible) { box-shadow: none; } .auth-modern-toggle-vis:focus-visible { box-shadow: 0 0 0 2px rgba(255, 121, 0, 0.35); } .auth-modern-check { display: flex; align-items: center; gap: 0.5rem; margin: 0.35rem 0 1.35rem; font-size: 0.875rem; color: #6b7280; } .auth-modern-check input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--pilperf-orange, #ff7900); cursor: pointer; } .auth-modern-check label { cursor: pointer; margin: 0; user-select: none; } .auth-modern-submit { width: 100%; padding: 0.95rem 1.25rem; border: none; border-radius: 9999px; background: linear-gradient(180deg, var(--pilperf-orange, #ff7900) 0%, #e86e00 100%); color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; box-shadow: 0 8px 20px rgba(255, 121, 0, 0.35); } .auth-modern-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(255, 121, 0, 0.42); } .auth-modern-submit:active { transform: translateY(0); } .auth-modern-links { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid #eef0f4; display: flex; flex-direction: column; align-items: center; gap: 0.65rem; } .auth-modern-links a { font-size: 0.9rem; font-weight: 600; color: var(--pilperf-orange, #ff7900); text-decoration: none; transition: color 0.15s ease; } .auth-modern-links a:hover { color: #cc6200; text-decoration: underline; } .auth-modern-alerts .alert { border-radius: 0.65rem; border: none; font-size: 0.875rem; } @media (max-width: 767.98px) { .auth-modern-card { flex-direction: column; border-radius: 0.875rem; } .auth-modern-brand { max-width: none; flex: none; padding: 1.75rem 1.5rem; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1rem; } .auth-modern-brand-logo { width: 4.75rem; height: 4.75rem; } .auth-modern-brand-acronym { font-size: 1.05rem; letter-spacing: 0.05em; } .auth-modern-brand-tagline { font-size: 0.875rem; width: 100%; max-width: none; } .auth-modern-form-wrap { padding: 1.75rem 1.35rem 2rem; } .auth-modern-title { margin-bottom: 1.35rem; font-size: 1.2rem; } }