/** * Simulateur multiple de financement. * Migre depuis le post_content le 14/07/2026. * Tailwind supprime : les utilitaires tw-* utilises sont reecrits en CSS natif, scopes. */ /* ISOLATION TOTALE */ #sim-v9-banker { font-family: 'Segoe UI', system-ui, sans-serif; color: #334155; background: #f8fafc; padding: 30px; border: 1px solid #e2e8f0; border-radius: 12px; max-width: 1200px; margin: 0 auto; box-sizing: border-box; } #sim-v9-banker *, #sim-v9-banker *::before, #sim-v9-banker *::after { box-sizing: border-box; } /* LAYOUT (flexbox, ex-CSS Grid) */ #sim-v9-banker .bk-grid { display: flex; flex-wrap: wrap; gap: 24px; } #sim-v9-banker .bk-grid > * { flex: 1 1 420px; min-width: 0; } /* CARDS */ #sim-v9-banker .bk-card { background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 24px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); border-top: 4px solid #475569; position: relative; } /* TITRES & INPUTS */ #sim-v9-banker h3 { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 20px 0; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; color: #0f172a; } #sim-v9-banker label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #64748b; margin-top: 15px; margin-bottom: 5px; } #sim-v9-banker input, #sim-v9-banker select { width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #0f172a; font-weight: 600; font-size: 14px; transition: all 0.2s; } #sim-v9-banker input:focus, #sim-v9-banker select:focus { border-color: #0ea5e9; outline: none; box-shadow: 0 0 0 3px rgba(14,165,233,0.1); } #sim-v9-banker input[readonly] { background-color: #f1f5f9; color: #64748b; cursor: not-allowed; } /* BTN ACTION */ #sim-v9-banker .btn-run { width: 100%; background: #0f172a; color: #fff; font-weight: 800; text-transform: uppercase; padding: 20px; border: none; border-radius: 8px; cursor: pointer; margin-top: 30px; transition: transform 0.1s; letter-spacing: 1px; } #sim-v9-banker .btn-run:hover { transform: translateY(-2px); background: #1e293b; } /* WHATSAPP GIANT */ #sim-v9-banker .wa-magnet { display: none; background-color: #25D366; color: #fff; text-decoration: none; border-radius: 12px; padding: 20px; margin-top: 30px; text-align: center; box-shadow: 0 10px 25px -5px rgba(37, 211, 102, 0.4); border: 2px solid #25D366; animation: pulse-wa 2s infinite; } #sim-v9-banker .wa-magnet:hover { background-color: #128C7E; transform: scale(1.02); animation: none; } @keyframes pulse-wa { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } /* VISUAL GAUGE (Result) */ #sim-v9-banker .gauge-cont { height: 20px; background: #e2e8f0; border-radius: 10px; margin-top: 10px; position: relative; overflow: hidden; } #sim-v9-banker .gauge-fill { height: 100%; transition: width 1s ease-out; } #sim-v9-banker .gauge-mark { position: absolute; top: 0; bottom: 0; width: 2px; background: #000; z-index: 10; } /* UTILS */ #sim-v9-banker .g-2 { display: flex; flex-wrap: wrap; gap: 15px; } #sim-v9-banker .g-2 > * { flex: 1 1 120px; min-width: 0; } #sim-v9-banker .txt-ok { color: #059669; font-weight: bold; } #sim-v9-banker .txt-warn { color: #d97706; font-weight: bold; } #sim-v9-banker .txt-err { color: #dc2626; font-weight: bold; } /* TABLE */ #sim-v9-banker .tbl-box { overflow-x: auto; margin-top: 25px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; } #sim-v9-banker table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 700px; } #sim-v9-banker th { background: #f8fafc; padding: 15px; text-align: right; color: #64748b; border-bottom: 2px solid #e2e8f0; } #sim-v9-banker td { padding: 12px; text-align: right; border-bottom: 1px solid #f1f5f9; } /* ------------------------------------------------------------------ */ /* EX-TAILWIND : utilitaires tw-* reellement utilises dans le markup */ /* ------------------------------------------------------------------ */ /* Flex */ #sim-v9-banker .tw-flex { display: flex; } #sim-v9-banker .tw-items-center { align-items: center; } #sim-v9-banker .tw-items-end { align-items: flex-end; } #sim-v9-banker .tw-justify-between { justify-content: space-between; } #sim-v9-banker .tw-justify-center { justify-content: center; } #sim-v9-banker .tw-gap-4 { gap: 1rem; } /* Espacements */ #sim-v9-banker .tw-p-3 { padding: 0.75rem; } #sim-v9-banker .tw-p-4 { padding: 1rem; } #sim-v9-banker .tw-mt-1 { margin-top: 0.25rem; } #sim-v9-banker .tw-mt-2 { margin-top: 0.5rem; } #sim-v9-banker .tw-mt-4 { margin-top: 1rem; } #sim-v9-banker .tw-mb-1 { margin-bottom: 0.25rem; } #sim-v9-banker .tw-mb-2 { margin-bottom: 0.5rem; } #sim-v9-banker .tw-mb-4 { margin-bottom: 1rem; } #sim-v9-banker .tw-mb-6 { margin-bottom: 1.5rem; } /* Typographie */ #sim-v9-banker .tw-text-xs { font-size: 0.75rem; line-height: 1rem; } #sim-v9-banker .tw-text-sm { font-size: 0.875rem; line-height: 1.25rem; } #sim-v9-banker .tw-text-lg { font-size: 1.125rem; line-height: 1.75rem; } #sim-v9-banker .tw-text-xl { font-size: 1.25rem; line-height: 1.75rem; } #sim-v9-banker .tw-text-2xl { font-size: 1.5rem; line-height: 2rem; } #sim-v9-banker .tw-text-3xl { font-size: 1.875rem; line-height: 2.25rem; } #sim-v9-banker .tw-font-medium { font-weight: 500; } #sim-v9-banker .tw-font-bold { font-weight: 700; } #sim-v9-banker .tw-font-black { font-weight: 900; } #sim-v9-banker .tw-leading-none { line-height: 1; } #sim-v9-banker .tw-text-left { text-align: left; } #sim-v9-banker .tw-text-right { text-align: right; } /* Couleurs de texte */ #sim-v9-banker .tw-text-slate-400 { color: #94a3b8; } #sim-v9-banker .tw-text-slate-500 { color: #64748b; } #sim-v9-banker .tw-text-slate-700 { color: #334155; } #sim-v9-banker .tw-text-slate-800 { color: #1e293b; } #sim-v9-banker .tw-text-sky-800 { color: #075985; } #sim-v9-banker .tw-text-blue-600 { color: #2563eb; } #sim-v9-banker .tw-text-purple-400 { color: #c084fc; } #sim-v9-banker .tw-text-purple-600 { color: #9333ea; } #sim-v9-banker .tw-text-purple-800 { color: #6b21a8; } #sim-v9-banker .tw-text-emerald-600 { color: #059669; } #sim-v9-banker .tw-text-emerald-700 { color: #047857; } /* Fonds */ #sim-v9-banker .tw-bg-slate-50 { background-color: #f8fafc; } #sim-v9-banker .tw-bg-purple-50 { background-color: #faf5ff; } #sim-v9-banker .tw-bg-emerald-50 { background-color: #ecfdf5; } /* Bordures & divers */ #sim-v9-banker .tw-rounded { border-radius: 0.25rem; } #sim-v9-banker .tw-border { border-width: 1px; border-style: solid; border-color: #e2e8f0; } #sim-v9-banker .tw-border-slate-200 { border-color: #e2e8f0; } #sim-v9-banker .tw-border-purple-100 { border-color: #f3e8ff; } #sim-v9-banker .tw-border-emerald-200 { border-color: #a7f3d0; } #sim-v9-banker .tw-opacity-90 { opacity: 0.9; }