:root { /* Palette douce, moins blanche */ --bg: #f3f5f7; /* fond global légèrement bleuté */ --bg-tint: #eef2f6; /* nuance en aplat */ --card: #ffffff; /* panneaux */ --card-tint: #f7fafc; /* panneaux secondaires */ --text: #0f172a; /* slate-900 */ --muted: #64748b; /* slate-500 */ --primary: #2563eb; /* bleu confiance */ --primary-600: #1d4ed8; --accent: #10b981; /* succès */ --warning: #f59e0b; --border: #e5e7eb; --radius: 16px; --shadow: 0 10px 30px rgba(15, 23, 42, 0.08); --paper: var(--card); --paper-raise: #fff; /* ou var(--card) si tu préfères */ } /* Mode "dim" optionnel : */ body[data-tone="dim"] { --bg: #e9edf2; --bg-tint: #e5eaf1; --card: #fcfdfd; --card-tint: #f1f5f9; } * { box-sizing: border-box } html, body { height: 100% } body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text); background: radial-gradient(1200px 600px at -10% -20%, var(--bg-tint), transparent 60%), radial-gradient(900px 600px at 110% 20%, #edf7f2, transparent 50%), var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .container { width: clamp(320px, 96vw, 1200px); margin: 0 auto; padding: 24px 16px; } .card { background: linear-gradient(180deg, var(--card), var(--card-tint)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; background: var(--primary); color: #fff; border: none; cursor: pointer; font-weight: 600; letter-spacing: .2px; } .btn:hover { background: var(--primary-600) } .btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--border) } .btn:disabled, .btn--ghost:disabled { opacity: 0.6; cursor: not-allowed; } .badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; color: #0b3; background: #e8faf3; border: 1px solid #d2f5e7; } .icon { width: 20px; height: 20px; display: block; object-fit: contain } .hidden { display: none !important } /* ===================== Hovers & Focus — UNIFIED ===================== */ .btn, .btn--ghost { transition: background .15s ease, color .15s ease, border-color .15s ease, transform .04s ease; } .btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); } .btn--ghost:hover { background: rgba(37, 99, 235, .08); color: var(--primary); border-color: var(--primary); } .btn:focus-visible, .btn--ghost:focus-visible, .input:focus-visible, .select:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); } /* Global form baseline, same look everywhere */ .input { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; height: 36px; border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: 10px 12px; /* align with your edit fields */ font: inherit; font-weight: 600; color: var(--text); } .input[type="date"] { padding-inline: 10px; } .input:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); } html.has-modal-open, body.has-modal-open { overflow: hidden; /* bloque le scroll de la page */ overscroll-behavior: contain; /* évite le “bounce” sur mobile */ } /* ================================ Loader Global (Corrigé) ================================ */ .global-loader { display: none; /* Caché par défaut */ position: fixed; inset: 0; z-index: 9999; background: rgba(24, 32, 47, 0.3); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); place-items: center; /* S'appliquera quand display deviendra 'grid' */ animation: loaderFadeIn 0.2s ease-out; } .global-loader--active { display: grid; /* La seule chose que fait cette classe est d'afficher le loader */ } /* Le reste du CSS du spinner ne change pas */ .global-loader__spinner { width: 56px; height: 56px; border: 5px solid rgba(255, 255, 255, 0.2); border-top-color: #ffffff; border-radius: 50%; animation: loaderSpin 1s linear infinite; } @keyframes loaderFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes loaderSpin { to { transform: rotate(360deg); } } [hidden] { display: none !important; }