/* =========================================================== Thème commun — Cédric • Time Tracker Partagé entre l'application et la page d'authentification. =========================================================== */ :root { --bg-deep: #0b0c12; --brand-400: #597ffb; --brand-500: #3b5cf2; --brand-600: #253edb; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); } /* Le dégradé vit sur : il couvre alors aussi les zones de rebond (overscroll) et les encoches, ce qui supprime les bandes blanches en haut et en bas sur iOS. */ html { background-color: var(--bg-deep); background-image: radial-gradient(circle at top left, #1a1c2c, #0d0e12 62%); background-repeat: no-repeat; background-attachment: fixed; min-height: 100%; -webkit-text-size-adjust: 100%; } body { background: transparent; color: #f8fafc; min-height: 100vh; min-height: 100dvh; overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; padding-left: max(1rem, var(--safe-left)); padding-right: max(1rem, var(--safe-right)); padding-top: calc(1rem + var(--safe-top)); padding-bottom: calc(1.5rem + var(--safe-bottom)); } @media (min-width: 768px) { body { padding-left: max(2rem, var(--safe-left)); padding-right: max(2rem, var(--safe-right)); padding-top: calc(2rem + var(--safe-top)); padding-bottom: calc(2rem + var(--safe-bottom)); } } /* Évite le zoom automatique de Safari au focus d'un champ */ input, select, textarea, button { font-size: 16px; font-family: inherit; } input[type="checkbox"] { accent-color: var(--brand-500); } /* ---------- Surfaces ---------- */ .glass { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); } .glass-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .glass-card:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.15); } .input-glass { background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); color: white; transition: all 0.2s; } .input-glass::placeholder { color: rgba(148, 163, 184, 0.7); } .input-glass:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 2px rgba(59, 92, 242, 0.2); } /* ---------- Boutons ---------- */ .btn-primary { background: linear-gradient(135deg, #3b5cf2 0%, #253edb 100%); transition: all 0.3s; } .btn-primary:hover { filter: brightness(1.1); transform: scale(1.02); box-shadow: 0 4px 15px rgba(59, 92, 242, 0.4); } .btn-primary:disabled { opacity: 0.6; transform: none; filter: none; cursor: not-allowed; } .btn-danger { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); color: #ef4444; transition: all 0.2s; } .btn-danger:hover { background: rgba(239, 68, 68, 0.2); } .btn-ghost { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #cbd5e1; transition: all 0.2s; } .btn-ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } /* Sur écran tactile, l'effet :hover reste « collé » après un tap */ @media (hover: none) { .btn-primary:hover, .glass-card:hover { transform: none; box-shadow: none; } } /* ---------- Barre de défilement ---------- */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); } /* ---------- Animations ---------- */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.5s ease-out forwards; } /* =========================================================== Modales et notifications =========================================================== */ .ui-modal-backdrop { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: calc(1rem + var(--safe-top)) 1rem calc(1rem + var(--safe-bottom)); background: rgba(6, 7, 12, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.18s ease-out; } .ui-modal-backdrop.is-open { opacity: 1; } .ui-modal { width: 100%; max-width: 26rem; border-radius: 1.75rem; padding: 1.75rem; background: linear-gradient(180deg, rgba(30, 33, 52, 0.96), rgba(16, 18, 28, 0.96)); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); transform: translateY(12px) scale(0.97); opacity: 0; transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease-out; } .ui-modal-backdrop.is-open .ui-modal { transform: translateY(0) scale(1); opacity: 1; } .ui-modal-icon { width: 3rem; height: 3rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; } .ui-modal-icon[data-tone="danger"] { background: rgba(239, 68, 68, 0.12); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.25); } .ui-modal-icon[data-tone="warning"] { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.25); } .ui-modal-icon[data-tone="info"] { background: rgba(59, 92, 242, 0.14); color: #93aaff; border: 1px solid rgba(59, 92, 242, 0.3); } .ui-modal-icon[data-tone="success"] { background: rgba(52, 211, 153, 0.12); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.25); } .ui-modal-title { font-size: 1.15rem; font-weight: 700; color: #fff; margin-bottom: 0.4rem; } .ui-modal-message { color: #94a3b8; font-size: 0.925rem; line-height: 1.55; } .ui-modal-actions { display: flex; gap: 0.6rem; margin-top: 1.6rem; } .ui-modal-actions button { flex: 1; padding: 0.75rem 1rem; border-radius: 1rem; font-weight: 600; cursor: pointer; border: none; } .ui-modal-actions .ui-btn-cancel { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: #cbd5e1; transition: background 0.2s; } .ui-modal-actions .ui-btn-cancel:hover { background: rgba(255, 255, 255, 0.12); } .ui-modal-actions .ui-btn-confirm { color: #fff; background: linear-gradient(135deg, #3b5cf2 0%, #253edb 100%); transition: filter 0.2s; } .ui-modal-actions .ui-btn-confirm:hover { filter: brightness(1.1); } .ui-modal-actions .ui-btn-confirm[data-tone="danger"] { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); } .ui-modal-actions .ui-btn-confirm:focus-visible, .ui-modal-actions .ui-btn-cancel:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; } /* ---------- Toasts ---------- */ .ui-toast-stack { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(1.25rem + var(--safe-bottom)); z-index: 95; display: flex; flex-direction: column; gap: 0.5rem; width: min(24rem, calc(100vw - 2rem)); pointer-events: none; } .ui-toast { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 1rem; border-radius: 1rem; background: rgba(22, 25, 38, 0.94); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #e2e8f0; font-size: 0.9rem; opacity: 0; transform: translateY(14px); transition: opacity 0.2s ease-out, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1); } .ui-toast.is-open { opacity: 1; transform: translateY(0); } .ui-toast[data-tone="success"] { border-color: rgba(52, 211, 153, 0.35); } .ui-toast[data-tone="error"] { border-color: rgba(239, 68, 68, 0.4); } .ui-toast-dot { width: 0.55rem; height: 0.55rem; border-radius: 999px; flex: none; background: #93aaff; } .ui-toast[data-tone="success"] .ui-toast-dot { background: #34d399; } .ui-toast[data-tone="error"] .ui-toast-dot { background: #ef4444; } @media (prefers-reduced-motion: reduce) { .ui-modal, .ui-modal-backdrop, .ui-toast, .animate-fade-in { transition: none; animation: none; } }