/* ============================================================================ Project Tracker — Design system « bleu institutionnel » (glassmorphism premium). Nuit = défaut (.dark posé sur par le script d'init) · Jour = sans .dark. Tout le theming passe par des variables CSS ; aucun composant ne code une couleur en dur. Accent de marque = BLEU. Vert/rouge = sens (positif/négatif). ============================================================================ */ /* ---- Tokens JOUR (défaut :root, surfaces plus opaques) ------------------- */ :root { --bg: #F6F8FB; --surface-1: rgba(255,255,255,0.68); --surface-2: rgba(255,255,255,0.86); --surface-3: #FFFFFF; --surface-4: #EEF2F7; --border: rgba(9,9,11,0.10); --border-med: rgba(9,9,11,0.14); --border-hi: rgba(9,9,11,0.22); --primary: #0A63D6; /* bleu assombri pour contraste sur blanc */ --primary-dim: #2E6FE0; --primary-text: #FFFFFF; --accent-soft: rgba(10,99,214,0.10); --accent-border: rgba(10,99,214,0.25); --accent-glow: rgba(10,99,214,0.18); --grad-accent: linear-gradient(to right, #0781FE, #22D3EE); --pos: #00B67A; --neg: #ef4444; --neutral: #C97316; --text: #09090B; --text-secondary: #34343B; --text-muted: #5D5D66; --text-dim: #8E8E96; --glass-bg: rgba(255,255,255,0.78); --glass-bg-strong: rgba(255,255,255,0.92); --glass-border: rgba(255,255,255,0.65); --glass-border-hover: rgba(10,99,214,0.40); --glass-edge: rgba(255,255,255,0.80); --glass-blur: 12px; --glass-shadow: 0 8px 32px rgba(9,9,11,0.10); } /* ---- Tokens NUIT (.dark = défaut à l'exécution) -------------------------- */ .dark { color-scheme: dark; --bg: #09090B; --surface-1: rgba(19,19,21,0.55); --surface-2: rgba(24,24,27,0.60); --surface-3: #1C1C1F; --surface-4: #26262A; --border: rgba(255,255,255,0.06); --border-med: rgba(255,255,255,0.10); --border-hi: rgba(255,255,255,0.18); --primary: #0781FE; --primary-dim: #2E6FE0; --primary-text: #FFFFFF; --accent-soft: rgba(7,129,254,0.10); --accent-border: rgba(7,129,254,0.25); --accent-glow: rgba(7,129,254,0.20); --grad-accent: linear-gradient(to right, #0781FE, #22D3EE); --text: #FFFFFF; --text-secondary: #D4D4D8; --text-muted: #B1B1B1; --text-dim: #63636A; --glass-bg: rgba(19,19,21,0.55); --glass-bg-strong: rgba(19,19,21,0.80); --glass-border: rgba(255,255,255,0.08); --glass-border-hover: rgba(7,129,254,0.35); --glass-edge: rgba(255,255,255,0.10); --glass-shadow: 0 8px 32px rgba(0,0,0,0.40); } /* ---- Fond en profondeur (orbes + dégradé, couche GPU fixe) --------------- */ /* Le fond OPAQUE vit sur (vrai root) ; reste transparent pour que body::before (orbes, z-index:-1) soit visible en JOUR comme en NUIT. */ html { scrollbar-gutter: stable; background: var(--bg); transition: background-color .25s ease; } html, body { overflow-x: clip; } body { background: transparent; color: var(--text); transition: color .25s ease; } body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(720px 720px at 8% 4%, rgba(7,129,254,0.15), transparent 60%), radial-gradient(760px 760px at 92% 96%, rgba(34,211,238,0.10), transparent 60%), radial-gradient(560px 560px at 68% 30%, rgba(0,182,122,0.045), transparent 62%), radial-gradient(120% 85% at 50% 0%, #0E1320 0%, #0A0C12 55%, #060607 100%); } :root:not(.dark) body::before { background: radial-gradient(720px 720px at 8% 4%, rgba(7,129,254,0.10), transparent 60%), radial-gradient(760px 760px at 92% 96%, rgba(34,211,238,0.08), transparent 60%), radial-gradient(120% 85% at 50% 0%, #EEF4FF 0%, #F6F8FB 55%, #F6F8FB 100%); } /* ---- Verre (la signature) ----------------------------------------------- */ .glass, .glass-strong { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%); backdrop-filter: blur(var(--glass-blur)) saturate(140%); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge); } .glass-strong { background: var(--glass-bg-strong); } /* Règle GLOBALE : toute carte rounded-2xl.p-5 devient du verre, sans toucher aux composants. Les conteneurs colorés gardent leur teinte (voir plus bas). */ .rounded-2xl.p-5, .rounded-2xl.p-4, .rounded-2xl.p-6, .rounded-2xl.p-8 { -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%); backdrop-filter: blur(var(--glass-blur)) saturate(140%); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .rounded-2xl.p-5:hover, .rounded-2xl.p-6:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge), 0 0 0 1px var(--glass-border-hover); } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .glass, .glass-strong { background: var(--surface-3); } } /* ---- Bandeau héros : dégradé bleu→cyan de marque (texte blanc lisible) ---- */ .hero-accent { background: linear-gradient(120deg, #063B8F 0%, #0781FE 52%, #22D3EE 128%); } .hero-accent::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(130% 150% at 100% 0%, rgba(34,211,238,0.35), transparent 55%); } .hero-accent > * { position: relative; z-index: 1; } /* ---- Typo : chiffres en mono tabulaire ---------------------------------- */ .value-num, .font-mono, code, pre { font-family: "Azeret Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; } h1, h2, h3 { letter-spacing: -0.02em; } /* ---- Icônes SVG (jeu « Lucide ») : héritent taille (1em) + couleur -------- */ .ao-ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: none; overflow: visible; } /* Enveloppe des icônes statiques hydratées : centre le SVG, garde l'inline-flex */ [data-icon] { display: inline-flex; align-items: center; } /* Icône de la barre de nav : un poil plus grande que le texte, ton discret */ nav [data-icon] .ao-ico { width: 1.15em; height: 1.15em; } /* Boutons/onglets : l'icône garde une marge visuelle avec le libellé */ .ao-ico + span, [data-icon] + span { margin-left: .1rem; } /* Cases à cocher / radios : accent BLEU de marque quand cochées (jour + nuit). Les utilitaires sémantiques (.accent-rose-600 pour une action destructive) gardent la priorité grâce à leur spécificité de classe. */ input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); } /* Les utilitaires sémantiques doivent battre la règle globale (spécificité classe+attribut). */ input[type="checkbox"].accent-rose-600, input[type="radio"].accent-rose-600 { accent-color: #e11d48; } input[type="checkbox"].accent-emerald-600, input[type="radio"].accent-emerald-600 { accent-color: #059669; } /* ---- Motion : reveal, héros échelonné, marquee, tilt, CTA respirant ------ */ .reveal { opacity: 0; transform: translateY(30px) scale(.985); transition: .7s cubic-bezier(.22,1,.36,1); } .reveal.in { opacity: 1; transform: none; } .hero-stagger > * { animation: fadeUp .7s forwards; opacity: 0; } .hero-stagger > :nth-child(1){animation-delay:.06s}.hero-stagger > :nth-child(2){animation-delay:.16s} .hero-stagger > :nth-child(3){animation-delay:.26s}.hero-stagger > :nth-child(4){animation-delay:.38s} .hero-stagger > :nth-child(5){animation-delay:.52s}.hero-stagger > :nth-child(6){animation-delay:.66s} @keyframes fadeUp { from { opacity:0; transform: translateY(24px) } to { opacity:1; transform:none } } .tilt-hover { transition: transform .2s ease, box-shadow .2s ease; } .tilt-hover:hover { transform: perspective(1000px) rotateX(2.4deg) rotateY(-2.8deg) translateY(-5px) scale(1.012); } .card-hover { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .card-hover:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px var(--accent-glow); } .cta-breathe { animation: cta-breathe 3.2s ease-in-out infinite; } @keyframes cta-breathe { 0%,100% { box-shadow: 0 0 24px var(--accent-glow) } 50% { box-shadow: 0 0 44px var(--accent-glow) } } .bg-grid { background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(80% 60% at 50% 0%, #000 40%, transparent); mask-image: radial-gradient(80% 60% at 50% 0%, #000 40%, transparent); } .bg-blob { position: absolute; border-radius: 50%; filter: blur(70px); z-index: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } } /* ---- Utilitaires existants retunés en bleu ------------------------------ */ .tab-btn { color: var(--text-muted); } .tab-btn.active { background: var(--primary); color: var(--primary-text); box-shadow: 0 0 18px var(--accent-glow); } .badge { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 9999px; font-size: .75rem; font-weight: 600; white-space: nowrap; } tbody tr { transition: background-color .12s ease; } tbody tr:hover { background-color: var(--accent-soft); } .fade-in { animation: fade .25s ease both; } @keyframes fade { from { opacity:0; transform: translateY(4px) } to { opacity:1; transform:none } } .ao-card { transition: transform .15s ease, box-shadow .15s ease, background-color .25s ease, border-color .25s ease; } .ao-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px var(--accent-glow); } .clickable { cursor: pointer; } summary { transition: color .15s ease; } details[open] > summary { color: var(--primary); } /* Barre de progression globale (haut de page) */ #progress-bar { position: fixed; top:0; left:0; height:3px; width:0%; background: var(--grad-accent); z-index:9999; opacity:0; transition: width .2s ease, opacity .4s ease; box-shadow: 0 0 8px var(--accent-glow); } #progress-bar .progress-peg { position:absolute; right:0; top:0; height:100%; width:90px; box-shadow: 0 0 10px var(--primary), 0 0 6px #22D3EE; opacity:.6; } #progress-pct { position: fixed; top:7px; right:10px; z-index:10000; background: var(--primary); color:#fff; font-size:.68rem; font-weight:700; font-variant-numeric: tabular-nums; line-height:1; padding:.2rem .45rem; border-radius:9999px; box-shadow: 0 2px 6px var(--accent-glow); opacity:0; transition: opacity .3s ease; } /* Spinner / squelettes / barre indéterminée */ .spinner { display:inline-block; width:1em; height:1em; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation: spin .6s linear infinite; vertical-align:-.15em; } @keyframes spin { to { transform: rotate(360deg) } } .skeleton { position:relative; overflow:hidden; background: var(--surface-4); border-radius:.375rem; } .skeleton::after { content:""; position:absolute; inset:0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); animation: shimmer 1.2s infinite; } @keyframes shimmer { 100% { transform: translateX(100%) } } .indeterminate { position:relative; height:6px; border-radius:9999px; background: var(--accent-soft); overflow:hidden; } .indeterminate::before { content:""; position:absolute; top:0; left:-40%; height:100%; width:40%; border-radius:9999px; background: var(--grad-accent); animation: indet 1.1s infinite ease-in-out; } @keyframes indet { 0% { left:-40% } 100% { left:100% } } /* ============================================================================ Pop-ups (alerte / confirmation / saisie) — verre bleu ============================================================================ */ .ui-overlay { position: fixed; inset: 0; z-index: 10000; padding: 1rem; display: flex; align-items: center; justify-content: center; background: rgba(2,4,10,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .18s ease; } .ui-overlay.show { opacity: 1; } .ui-modal { width: 100%; max-width: 460px; background: var(--glass-bg-strong); color: var(--text); border: 1px solid var(--glass-border); border-radius: 1rem; -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge); padding: 1.25rem; transform: translateY(10px) scale(.98); transition: transform .18s ease; display: flex; flex-direction: column; max-height: calc(100vh - 2rem); } .ui-overlay.show .ui-modal { transform: none; } /* Modale LARGE (revue technique : prévisualisation de documents côte à côte) */ .ui-modal--wide { max-width: min(1150px, 96vw); } /* Infobulle d'aperçu de document (au survol) — reste visible tant que le curseur est dessus */ .doc-tip { position: fixed; z-index: 10050; max-width: 460px; max-height: 320px; overflow: auto; background: var(--glass-bg-strong); color: var(--text); border: 1px solid var(--glass-border); border-radius: .8rem; padding: .7rem .8rem; -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-edge); font-size: .72rem; line-height: 1.45; white-space: pre-wrap; } .doc-tip__title { font-weight: 700; font-size: .74rem; margin-bottom: .3rem; color: var(--primary); } /* Onglet d'étape verrouillé (étape précédente non finalisée) */ .step-locked { opacity: .45; cursor: not-allowed; } /* Aperçu PDF dans la modale */ .doc-preview-frame { width: 100%; height: min(58vh, 560px); border: 1px solid var(--border-med); border-radius: .6rem; background: #fff; } .doc-preview-text { max-height: min(58vh, 560px); overflow: auto; white-space: pre-wrap; font-size: .74rem; line-height: 1.5; border: 1px solid var(--border-med); border-radius: .6rem; padding: .7rem; background: var(--surface-3); } .ui-modal__head { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; } .ui-modal__title { font-size: 1.05rem; font-weight: 700; margin: 0; letter-spacing: -.02em; } .ui-modal__body { margin-top: .6rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; } .ui-text { font-size: .9rem; line-height: 1.5; color: var(--text-secondary); white-space: pre-wrap; } .ui-modal__actions { margin-top: 1.1rem; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; } .ui-ico { flex: none; width: 2rem; height: 2rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; font-weight: 700; } .ui-ico--error { background: color-mix(in srgb, var(--neg) 15%, transparent); color: var(--neg); } .ui-ico--success { background: color-mix(in srgb, var(--pos) 15%, transparent); color: var(--pos); } .ui-ico--info, .ui-ico--question { background: var(--accent-soft); color: var(--primary); } .ui-label { display: block; font-size: .75rem; color: var(--text-muted); margin-bottom: .3rem; } .ui-input { width: 100%; border: 1px solid var(--border-med); border-radius: .6rem; padding: .55rem .75rem; font-size: .9rem; font-family: inherit; color: var(--text); background: var(--surface-3); } .ui-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--accent-soft); } .ui-error { min-height: 1em; margin-top: .4rem; font-size: .8rem; color: var(--neg); } .ui-btn { border: 1px solid transparent; border-radius: .6rem; padding: .5rem .95rem; font-size: .875rem; font-weight: 600; cursor: pointer; transition: background-color .12s ease, border-color .12s ease, transform .12s ease; } .ui-btn--primary { background: var(--primary); color: var(--primary-text); } .ui-btn--primary:hover { background: var(--primary-dim); } .ui-btn--danger { background: var(--neg); color: #fff; } .ui-btn--danger:hover { filter: brightness(.92); } .ui-btn--ghost { background: var(--surface-3); color: var(--text-secondary); border-color: var(--border-med); } .ui-btn--ghost:hover { background: var(--surface-4); } .ui-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Barres de progression chiffrées */ .ui-bar { padding: .35rem 0; } .ui-bar__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; } .ui-bar__label { font-size: .85rem; color: var(--text-secondary); } .ui-bar__pct { font-size: .85rem; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; } .ui-bar__track { height: 8px; border-radius: 9999px; background: var(--accent-soft); overflow: hidden; } .ui-bar__fill { height: 100%; width: 0%; border-radius: 9999px; background: var(--grad-accent); transition: width .18s ease; } .ui-bar--done .ui-bar__pct { color: var(--pos); } .ui-bar--done .ui-bar__fill { background: linear-gradient(90deg, var(--pos), #34d399); } /* focus visible global */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Barre de défilement */ ::-webkit-scrollbar { height: 6px; width: 6px; } ::-webkit-scrollbar-thumb { background: rgba(9,9,11,0.28); border-radius: 9999px; } .dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); } ::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* ============================================================================ MODE NUIT (.dark) — surfaces Tailwind → VERRE bleu (le translucide laisse voir les orbes → c'est CE qui rend le glass visible). ============================================================================ */ .dark body { background-color: transparent; color: var(--text); } /* Surfaces → verre translucide + flou (cartes, nav, panneaux) */ .dark .bg-white, .dark .bg-white\/80, .dark .bg-white\/60 { background-color: var(--glass-bg) !important; -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%); backdrop-filter: blur(var(--glass-blur)) saturate(140%); border-color: var(--glass-border) !important; } .dark .bg-slate-50 { background-color: rgba(255,255,255,0.02) !important; } .dark .bg-slate-100 { background-color: rgba(255,255,255,0.05) !important; } .dark .bg-slate-50\/60, .dark .bg-slate-50\/40 { background-color: rgba(255,255,255,0.03) !important; } .dark .bg-primary\/10 { background-color: var(--accent-soft) !important; } .dark .bg-primary\/5 { background-color: var(--accent-soft) !important; } /* Texte */ .dark .text-slate-900 { color: var(--text) !important; } .dark .text-slate-800, .dark .text-slate-700 { color: var(--text-secondary) !important; } .dark .text-slate-600 { color: var(--text-secondary) !important; } .dark .text-slate-500 { color: var(--text-muted) !important; } .dark .text-slate-400 { color: var(--text-dim) !important; } /* Bordures */ .dark .border-slate-200 { border-color: var(--border-med) !important; } .dark .border-slate-100 { border-color: var(--border) !important; } .dark .border-slate-300 { border-color: var(--border-hi) !important; } .dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; } .dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-med) !important; } /* Survols */ .dark .hover\:bg-slate-100:hover { background-color: rgba(255,255,255,0.06) !important; } .dark .hover\:bg-slate-50:hover { background-color: rgba(255,255,255,0.04) !important; } .dark tbody tr:hover { background-color: var(--accent-soft) !important; } /* Champs de formulaire */ .dark input, .dark select, .dark textarea { background-color: var(--surface-3); color: var(--text); border-color: var(--border-med); } .dark input::placeholder, .dark textarea::placeholder { color: var(--text-dim); } /* Cartes/teintes colorées sémantiques (gardent leur sens) */ .dark .bg-amber-50, .dark .bg-amber-50\/60, .dark .bg-amber-50\/40 { background-color: color-mix(in srgb, var(--neutral) 14%, transparent) !important; } .dark .border-amber-300 { border-color: color-mix(in srgb, var(--neutral) 45%, transparent) !important; } .dark .text-amber-700, .dark .text-amber-600 { color: #F5C05A !important; } .dark .bg-emerald-50, .dark .bg-emerald-50\/40, .dark .bg-emerald-50\/60 { background-color: color-mix(in srgb, var(--pos) 14%, transparent) !important; } .dark .bg-rose-50, .dark .bg-rose-50\/40, .dark .bg-rose-50\/60 { background-color: color-mix(in srgb, var(--neg) 14%, transparent) !important; } .dark .bg-violet-50, .dark .bg-violet-50\/60, .dark .bg-violet-50\/40, .dark .bg-indigo-50\/40, .dark .bg-indigo-50 { background-color: var(--accent-soft) !important; } .dark .border-blue-300, .dark .border-violet-300 { border-color: var(--accent-border) !important; } .dark .bg-blue-50, .dark .bg-blue-50\/60, .dark .bg-blue-50\/40 { background-color: var(--accent-soft) !important; } .dark .border-blue-200 { border-color: var(--accent-border) !important; } .dark .bg-sky-100 { background-color: color-mix(in srgb, #38bdf8 18%, transparent) !important; } .dark .text-sky-700 { color: #7dd3fc !important; } .dark .border-emerald-200, .dark .border-emerald-300 { border-color: color-mix(in srgb, var(--pos) 45%, transparent) !important; } .dark .border-rose-200, .dark .border-rose-300 { border-color: color-mix(in srgb, var(--neg) 45%, transparent) !important; } .dark .border-violet-200, .dark .border-indigo-200 { border-color: var(--accent-border) !important; } .dark .text-emerald-700 { color: #34d399 !important; } .dark .text-rose-600, .dark .text-rose-500 { color: #fb7185 !important; } .dark .text-violet-700, .dark .text-indigo-700 { color: #93b4fd !important; } /* Badges (teinte claire → teinte sombre) */ .dark .bg-violet-100, .dark .bg-indigo-100 { background-color: var(--accent-soft) !important; } .dark .bg-blue-100 { background-color: color-mix(in srgb, #0781FE 18%, transparent) !important; } .dark .bg-emerald-100 { background-color: color-mix(in srgb, var(--pos) 18%, transparent) !important; } .dark .bg-rose-100 { background-color: color-mix(in srgb, var(--neg) 18%, transparent) !important; } .dark .bg-amber-100 { background-color: color-mix(in srgb, var(--neutral) 18%, transparent) !important; } .dark .text-blue-700 { color: #7cc0ff !important; } /* Cartes du guide : léger soulèvement au survol */ [data-guide] .rounded-2xl.shadow-sm { transition: transform .15s ease, box-shadow .15s ease; } [data-guide] .rounded-2xl.shadow-sm:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px var(--accent-glow); }