section { padding: 70px 0; text-align: center; } .profile-container { max-width: 430px; margin: 50px auto 0 auto; background: var(--card-bg) !important; border-radius: 18px; box-shadow: 0 3px 15px var(--shadow-color) !important; padding: 35px 23px 28px 23px; border: 1px solid var(--card-border) !important; color: var(--text-primary) !important; } h2 { color: var(--primary) !important; font-size: 2em; margin-top: 0; } .switch-row { display: flex; justify-content: center; gap: 15px; margin-bottom: 26px; } .switch-btn { background: #101b2b !important; color: var(--primary) !important; font-weight: 700; border: none; border-radius: 14px 14px 0 0; padding: 10px 32px; font-size: 1.05em; cursor: pointer; transition: background 0.18s; } .switch-btn.active, .switch-btn:active { background: var(--primary) !important; color: #fff !important; } .form-row { margin-bottom: 22px; } .field-label { font-weight: 600; margin-bottom: 6px; display: block; text-align: left; color: var(--text-primary) !important; } input[type="email"], input[type="password"], input[type="text"] { width: 100%; padding: 10px; border-radius: 6px; border: 1px solid var(--primary) !important; margin-top: 4px; font-size: 1.05em; } .core-btn { background: linear-gradient(90deg, var(--primary), var(--primary-dark)) !important; color: #fff !important; border: none; border-radius: 16px; padding: 10px 24px; font-size: 1.06em; font-weight: 700; cursor: pointer; box-shadow: 0 2px 7px var(--primary)33 !important; transition: transform .11s cubic-bezier(.24,.92,.57,1.32); } .core-btn:active { transform: scale(0.94); } .forgot-link { color: var(--primary) !important; font-weight: 500; float: right; text-decoration: underline; font-size: 0.98em; cursor: pointer; } .forgot-link:hover { color: var(--primary-dark) !important; } .msg-err { color: #ff6666 !important; font-size: 1.03em; margin-bottom: 8px; text-align: left; } .msg-success { color: #2ea043 !important; font-size: 1.03em; margin-bottom: 8px; text-align: left; } .hidden { display: none; } .cgu-row { margin-top: -10px; margin-bottom: 18px; font-size: 0.98em; } .cgu-row a { color: var(--primary) !important; text-decoration: underline; } #licences-actives div, #licences-expirees div { background: var(--card-bg) !important; color: var(--text-primary) !important; box-shadow: 0 2px 7px var(--shadow-color) !important; border: 1px solid var(--card-border) !important; } #licences-actives div b, #licences-expirees div b { color: var(--primary) !important; } #licences-actives div span { color: #2ea043 !important; } #licences-expirees div span { color: #d32f2f !important; } #btn-show-expired { background: linear-gradient(90deg, var(--primary), var(--primary-dark)) !important; color: #fff !important; border: none !important; box-shadow: 0 2px 7px var(--primary)33 !important; } #btn-show-expired:hover { background: linear-gradient(90deg, var(--primary-dark), var(--primary)) !important; box-shadow: 0 6px 16px var(--primary)55 !important; } #logout-btn { background: linear-gradient(90deg, var(--primary), var(--primary-dark)) !important; color: #fff !important; border: none !important; box-shadow: 0 2px 7px var(--primary)33 !important; } #logout-btn:hover { background: linear-gradient(90deg, var(--primary-dark), var(--primary)) !important; box-shadow: 0 6px 16px var(--primary)55 !important; } @media (max-width:520px) { .profile-container { max-width: 99vw; padding: 5vw 2vw; } } .custom-popup-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.53); z-index: 9999; display: flex; align-items: center; justify-content: center; } .custom-popup-content { background: var(--card-bg) !important; padding: 36px 32px 22px 32px; border-radius: 16px; box-shadow: 0 10px 45px var(--shadow-color) !important; max-width: 430px; width: 92vw; position: relative; text-align: center; color: var(--text-primary) !important; border: 1px solid var(--card-border) !important; } .custom-popup-content h3 { color: var(--primary) !important; margin-top: 0; margin-bottom: 16px; font-size: 2em; } .custom-popup-content p { font-size: 1.08em; color: var(--text-muted) !important; } .custom-popup-content button { background: var(--primary) !important; color: #fff !important; border: none; border-radius: 13px; padding: 10px 28px; font-size: 1.1em; cursor: pointer; margin-top: 18px; font-weight: 700; transition: background 0.16s; box-shadow: 0 2px 8px var(--primary)33 !important; } .custom-popup-content button:active { background: var(--primary-dark) !important; }