/* ═══════════════════════════════════════════════ SIMULATEUR.CSS — Panel Simulateur ARE / ARCE ═══════════════════════════════════════════════ */ #panel-simulateur { --violet:#7c3aed; --violet-dk:#5b21b6; --violet-lt:#ede9fe; --violet-bg:#f5f3ff; --teal:#0d9488; --teal-lt:#99f6e4; --teal-bg:#f0fdfa; --green:#16a34a; --green-lt:#bbf7d0; --green-bg:#f0fdf4; --amber:#d97706; --amber-lt:#fde68a; --amber-bg:#fffbeb; --red:#dc2626; --red-lt:#fecaca; --red-bg:#fef2f2; --slate:#64748b; --slate2:#334155; --border:#e2e8f0; --surface:#f1f5f9; --white:#ffffff; --text:#0f172a; --text2:#475569; --text3:#94a3b8; --mono:'DM Mono',monospace; --r:12px; --r-lg:18px; --shadow:0 1px 6px rgba(0,0,0,.05); } /* ── Header ───────────────────────────────── */ #panel-simulateur .hdr { background: var(--navy); position: relative; overflow: hidden; } #panel-simulateur .hdr-mesh { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 120% at 0% 80%,rgba(124,58,237,.55) 0%,transparent 55%), radial-gradient(ellipse 50% 100% at 100% 0%,rgba(13,148,136,.35) 0%,transparent 50%), radial-gradient(ellipse 40% 80% at 55% 50%,rgba(23,86,248,.2) 0%,transparent 60%); } #panel-simulateur .hdr-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size: 40px 40px; } #panel-simulateur .hdr-inner { position: relative; max-width: 1480px; margin: 0 auto; padding: 30px 28px 26px; } #panel-simulateur .hdr-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; } #panel-simulateur .hdr-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 30px; padding: 4px 13px; color: rgba(255,255,255,.75); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 11px; backdrop-filter: blur(10px); } #panel-simulateur .hdr-dot { width: 6px; height: 6px; background: #a78bfa; border-radius: 50%; animation: blink 2s ease-in-out infinite; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} } #panel-simulateur .hdr-title { font-size: clamp(17px,2.8vw,25px); font-weight: 800; color: #fff; letter-spacing: -.5px; margin-bottom: 6px; line-height: 1.25; } #panel-simulateur .hdr-sub { color: rgba(255,255,255,.55); font-size: 12.5px; line-height: 1.65; max-width: 500px; } #panel-simulateur .mode-bar { display: flex; gap: 3px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding: 4px; align-self: flex-start; backdrop-filter: blur(12px); flex-shrink: 0; } #panel-simulateur .mode-btn { padding: 8px 16px; border-radius: 10px; border: none; background: transparent; color: rgba(255,255,255,.55); font-family: 'Sora',sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 6px; white-space: nowrap; } #panel-simulateur .mode-btn.active { background: var(--white); color: var(--text); box-shadow: 0 2px 10px rgba(0,0,0,.2); } #panel-simulateur .mode-btn .ico { font-size: 14px; } #panel-simulateur .hdr-formula { margin-top: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 10px; padding: 9px 13px; max-width: 700px; } #panel-simulateur .fc { font-family: var(--mono); font-size: 10px; background: rgba(124,58,237,.45); color: #c4b5fd; border: 1px solid rgba(196,181,253,.2); border-radius: 5px; padding: 3px 8px; white-space: nowrap; } #panel-simulateur .fa { color: rgba(255,255,255,.25); font-size: 11px; } /* ── Page / Layout ────────────────────────── */ #panel-simulateur .page { max-width: 1480px; margin: 0 auto; padding: 22px 28px 64px; } #panel-simulateur .layout { display: grid; grid-template-columns: 300px 1fr 360px; gap: 16px; align-items: start; } @media(max-width:1200px){ #panel-simulateur .layout { grid-template-columns: 280px 1fr 320px; } } @media(max-width:880px) { #panel-simulateur .layout { grid-template-columns: 1fr 1fr; } } @media(max-width:580px) { #panel-simulateur .layout { grid-template-columns: 1fr; } } /* ── Colonne table sticky ─────────────────── */ #panel-simulateur .col-table { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } #panel-simulateur .col-table::-webkit-scrollbar { width: 4px; } #panel-simulateur .col-table::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } /* ── Card ─────────────────────────────────── */ #panel-simulateur .card { background: var(--white); border-radius: var(--r-lg); border: 1.5px solid var(--border); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 14px; } #panel-simulateur .card:last-child { margin-bottom: 0; } #panel-simulateur .card-hd { padding: 14px 18px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } #panel-simulateur .c-icon { width: 33px; height: 33px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } #panel-simulateur .c-title { font-size: 13.5px; font-weight: 700; color: var(--text); } #panel-simulateur .c-sub { font-size: 11px; color: var(--text3); margin-top: 1px; } #panel-simulateur .card-bd { padding: 18px; } /* ── Formulaire ───────────────────────────── */ #panel-simulateur .field { margin-bottom: 14px; } #panel-simulateur .field:last-child { margin-bottom: 0; } #panel-simulateur .flabel { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--slate2); margin-bottom: 5px; } #panel-simulateur .fbadge { font-family: var(--mono); font-size: 9px; background: var(--violet-bg); color: var(--violet); border: 1px solid var(--violet-lt); border-radius: 4px; padding: 1px 5px; } #panel-simulateur .fhint { font-size: 10.5px; color: var(--text3); margin-top: 3px; line-height: 1.5; } #panel-simulateur .inp-wrap { position: relative; } #panel-simulateur .inp-pfx { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 700; color: var(--text3); pointer-events: none; } #panel-simulateur .inp-sfx { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 600; color: var(--text3); pointer-events: none; } #panel-simulateur input[type=number] { width: 100%; padding: 9px 40px 9px 28px; border: 1.5px solid var(--border); border-radius: var(--r); font-family: 'Sora',sans-serif; font-size: 14px; font-weight: 600; color: var(--text); background: #fafcff; outline: none; transition: border-color .18s,box-shadow .18s; -moz-appearance: textfield; } #panel-simulateur input[type=number]::-webkit-inner-spin-button, #panel-simulateur input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; } #panel-simulateur input[type=number]:focus { border-color: var(--violet); background: #fff; box-shadow: 0 0 0 3px rgba(124,58,237,.1); } #panel-simulateur input[type=number]:hover:not(:focus) { border-color: #94a3b8; } #panel-simulateur input[type=number].err { border-color: var(--red); box-shadow: 0 0 0 3px rgba(220,38,38,.08); } #panel-simulateur select.field-sel { width: 100%; padding: 9px 34px 9px 12px; border: 1.5px solid var(--border); border-radius: var(--r); font-family: 'Sora',sans-serif; font-size: 12.5px; font-weight: 600; color: var(--text); background: #fafcff; outline: none; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; transition: border-color .15s; } #panel-simulateur select.field-sel:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124,58,237,.1); } #panel-simulateur .taux-row { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--border); border-radius: var(--r); overflow: hidden; } #panel-simulateur .tx-btn { padding: 9px 6px; text-align: center; cursor: pointer; border: none; background: transparent; font-family: 'Sora',sans-serif; font-size: 12px; font-weight: 600; color: var(--slate); transition: all .15s; display: flex; flex-direction: column; align-items: center; gap: 1px; } #panel-simulateur .tx-btn:first-child { border-right: 1px solid var(--border); } #panel-simulateur .tx-btn .tp { font-size: 18px; font-weight: 800; line-height: 1; } #panel-simulateur .tx-btn .td { font-size: 9.5px; line-height: 1.3; } #panel-simulateur .tx-btn.active { background: var(--violet); color: #fff; } #panel-simulateur .btn-go { width: 100%; padding: 12px; margin-top: 4px; background: linear-gradient(135deg,var(--violet),var(--violet-dk)); color: #fff; border: none; border-radius: var(--r); font-family: 'Sora',sans-serif; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: all .2s; box-shadow: 0 4px 16px rgba(124,58,237,.35); display: flex; align-items: center; justify-content: center; gap: 7px; letter-spacing: -.2px; } #panel-simulateur .btn-go:hover { transform: translateY(-1px); box-shadow: 0 7px 22px rgba(124,58,237,.45); } #panel-simulateur .btn-go:active { transform: translateY(0); } #panel-simulateur .btn-rst { width: 100%; padding: 8px; margin-top: 7px; background: transparent; border: 1.5px solid var(--border); border-radius: var(--r); font-family: 'Sora',sans-serif; font-size: 12px; font-weight: 600; color: var(--slate); cursor: pointer; transition: all .15s; } #panel-simulateur .btn-rst:hover { background: var(--surface); border-color: #94a3b8; } #panel-simulateur .err-box { background: var(--red-bg); border: 1px solid var(--red-lt); border-radius: 10px; padding: 9px 13px; font-size: 12px; color: var(--red); display: none; margin-top: 10px; } #panel-simulateur .prereq { background: linear-gradient(135deg,#f5f3ff,#faf5ff); border: 1.5px solid var(--violet-lt); border-radius: var(--r); padding: 14px; } #panel-simulateur .prereq-t { font-size: 11.5px; font-weight: 700; color: var(--violet); margin-bottom: 9px; display: flex; align-items: center; gap: 5px; } #panel-simulateur .prereq-i { display: flex; align-items: flex-start; gap: 7px; font-size: 11px; color: #4c1d95; line-height: 1.5; margin-bottom: 7px; } #panel-simulateur .prereq-i:last-child { margin-bottom: 0; } #panel-simulateur .pd { width: 16px; height: 16px; border-radius: 4px; background: var(--violet); color: #fff; font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } /* ── Slider ───────────────────────────────── */ #panel-simulateur .sldr-card { background: linear-gradient(145deg,#060f24 0%,#12104a 55%,#0d2a2a 100%); border-radius: var(--r-lg); padding: 22px; margin-bottom: 14px; position: relative; overflow: hidden; border: 1.5px solid rgba(255,255,255,.06); } #panel-simulateur .sldr-card::after { content: ''; position: absolute; right: -30px; top: -30px; width: 160px; height: 160px; background: radial-gradient(circle,rgba(167,139,250,.2) 0%,transparent 70%); pointer-events: none; } #panel-simulateur .sldr-card::before { content: ''; position: absolute; left: -20px; bottom: -20px; width: 130px; height: 130px; background: radial-gradient(circle,rgba(13,148,136,.18) 0%,transparent 70%); pointer-events: none; } #panel-simulateur .sldr-label { color: rgba(255,255,255,.5); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 5px; } #panel-simulateur .sldr-amount { font-size: clamp(30px,5vw,44px); font-weight: 800; color: #fff; letter-spacing: -1.5px; line-height: 1; margin-bottom: 2px; font-family: var(--mono); transition: all .12s; } #panel-simulateur .sldr-amount span { font-size: .42em; opacity: .6; letter-spacing: 0; margin-left: 5px; } #panel-simulateur .sldr-context { color: rgba(255,255,255,.45); font-size: 12px; margin-bottom: 20px; transition: all .15s; min-height: 20px; } #panel-simulateur .sldr-wrap { position: relative; padding: 4px 0; } #panel-simulateur .range-input { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 20px; outline: none; cursor: grab; border: none; background: rgba(255,255,255,.12); position: relative; z-index: 2; } #panel-simulateur .range-input::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; border-radius: 50%; background: var(--white); border: 3px solid #a78bfa; box-shadow: 0 0 0 6px rgba(167,139,250,.15),0 4px 14px rgba(0,0,0,.25); cursor: grab; transition: transform .15s,box-shadow .15s; } #panel-simulateur .range-input::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); box-shadow: 0 0 0 10px rgba(167,139,250,.2),0 6px 20px rgba(0,0,0,.3); } #panel-simulateur .range-input::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--white); border: 3px solid #a78bfa; box-shadow: 0 3px 12px rgba(0,0,0,.2); cursor: grab; } #panel-simulateur .sldr-ticks { display: flex; justify-content: space-between; margin-top: 10px; } #panel-simulateur .sldr-tick { font-family: var(--mono); font-size: 9.5px; color: rgba(255,255,255,.3); } #panel-simulateur .abb-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } #panel-simulateur .abb-chip { display: flex; flex-direction: column; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; padding: 7px 12px; } #panel-simulateur .abb-val { font-family: var(--mono); font-size: 14px; font-weight: 700; color: #a78bfa; } #panel-simulateur .abb-lbl { font-size: 9.5px; color: rgba(255,255,255,.45); margin-top: 1px; } /* ── Chart ────────────────────────────────── */ #panel-simulateur .chart-wrap { position: relative; height: 220px; } #panel-simulateur .chart-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; justify-content: center; } #panel-simulateur .cl-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text2); } #panel-simulateur .cl-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; } /* ── Pills résumé ─────────────────────────── */ #panel-simulateur .pills-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 14px; } #panel-simulateur .pill { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--r); padding: 10px 12px; box-shadow: var(--shadow); } #panel-simulateur .pill-val { font-family: var(--mono); font-size: 14px; font-weight: 800; color: var(--text); } #panel-simulateur .pill-lbl { font-size: 9.5px; color: var(--text3); margin-top: 1px; } /* ── Comparaison ──────────────────────────── */ #panel-simulateur .cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } #panel-simulateur .cmp-box { border-radius: var(--r); padding: 14px; border: 2px solid transparent; transition: all .2s; position: relative; overflow: hidden; cursor: default; } #panel-simulateur .cmp-box.opt-m { background: linear-gradient(135deg,#f0fdfa,#e6fffa); border-color: var(--teal-lt); } #panel-simulateur .cmp-box.opt-a { background: linear-gradient(135deg,#f5f3ff,#faf5ff); border-color: var(--violet-lt); } #panel-simulateur .cmp-box.winner { border-color: var(--green) !important; box-shadow: 0 0 0 3px rgba(22,163,74,.12); } #panel-simulateur .cmp-box.winner::before { content: '★ Recommandé'; position: absolute; top: 0; right: 0; background: var(--green); color: #fff; font-size: 8.5px; font-weight: 800; padding: 3px 8px; border-radius: 0 0 0 8px; letter-spacing: .04em; font-family: 'Sora',sans-serif; } #panel-simulateur .cmp-icon { font-size: 22px; margin-bottom: 5px; } #panel-simulateur .cmp-label { font-size: 11.5px; font-weight: 700; color: var(--text2); margin-bottom: 4px; } #panel-simulateur .cmp-val { font-family: var(--mono); font-size: 20px; font-weight: 800; margin-bottom: 3px; } #panel-simulateur .cmp-val.m { color: var(--teal); } #panel-simulateur .cmp-val.a { color: var(--violet); } #panel-simulateur .cmp-note { font-size: 10.5px; color: var(--text3); line-height: 1.55; } #panel-simulateur .cmp-explain { font-size: 11.5px; color: var(--text2); line-height: 1.7; padding: 10px 14px; background: var(--surface); border-radius: var(--r); margin-top: 4px; } /* ── Table 12 mois ────────────────────────── */ #panel-simulateur .tbl-wrap { overflow-x: auto; overflow-y: auto; max-height: 460px; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } #panel-simulateur .tbl-wrap::-webkit-scrollbar { width: 4px; height: 4px; } #panel-simulateur .tbl-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } #panel-simulateur table.t12 { width: 100%; border-collapse: collapse; font-size: 11.5px; } #panel-simulateur table.t12 thead { position: sticky; top: 0; z-index: 5; } #panel-simulateur table.t12 thead th { padding: 9px; background: var(--navy); color: rgba(255,255,255,.8); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; text-align: right; white-space: nowrap; } #panel-simulateur table.t12 thead th:first-child { text-align: left; } #panel-simulateur table.t12 tbody tr { border-bottom: 1px solid #f1f5f9; transition: background .1s; } #panel-simulateur table.t12 tbody tr:hover { background: #f8fafc; } #panel-simulateur table.t12 tbody td { padding: 7px 9px; text-align: right; font-family: var(--mono); font-size: 11px; } #panel-simulateur table.t12 tbody td:first-child { text-align: left; font-family: 'Sora',sans-serif; font-weight: 600; font-size: 11.5px; color: var(--slate2); } #panel-simulateur table.t12 tfoot tr { background: linear-gradient(90deg,var(--navy2),#1b0f50); } #panel-simulateur table.t12 tfoot td { padding: 10px 9px; text-align: right; font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.85); border: none; } #panel-simulateur table.t12 tfoot td:first-child { text-align: left; font-family: 'Sora',sans-serif; } #panel-simulateur .tr-ok td { color: var(--text); } #panel-simulateur .tr-last td { background: var(--amber-bg) !important; } #panel-simulateur .tr-exp td { background: var(--surface) !important; color: var(--text3) !important; } #panel-simulateur .bge { display: inline-flex; align-items: center; gap: 3px; font-family: 'Sora',sans-serif; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 5px; } #panel-simulateur .bge-ok { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-lt); } #panel-simulateur .bge-last { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-lt); } #panel-simulateur .bge-plaf { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-lt); } #panel-simulateur .bge-exp { background: var(--surface); color: var(--text3); border: 1px solid var(--border); } /* ── Bannière droits ──────────────────────── */ #panel-simulateur .droits-banner { background: linear-gradient(135deg,var(--teal-bg),#e0fff9); border: 1.5px solid var(--teal-lt); border-radius: var(--r); padding: 12px 14px; margin: 12px 14px 14px; } #panel-simulateur .db-title { font-size: 11.5px; font-weight: 700; color: var(--teal); margin-bottom: 4px; display: flex; align-items: center; gap: 5px; } #panel-simulateur .db-text { font-size: 11px; color: #0f5f5b; line-height: 1.6; } #panel-simulateur .empty-state { text-align: center; padding: 32px 20px; color: var(--text3); font-size: 12px; line-height: 1.7; } #panel-simulateur .empty-icon { font-size: 28px; margin-bottom: 8px; } /* ── Footer ───────────────────────────────── */ #panel-simulateur footer { background: #1e293b; padding: 14px 28px; } #panel-simulateur .foot-inner { max-width: 1480px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } #panel-simulateur footer p { font-size: 10.5px; color: rgba(255,255,255,.35); } #panel-simulateur footer a { color: #818cf8; text-decoration: none; } #panel-simulateur footer a:hover { color: #a78bfa; } /* ── Animation résultats ──────────────────── */ #panel-simulateur .results-fade { animation: fadeUp .35s ease both; } @keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} } /* ── Responsive ───────────────────────────── */ @media(max-width:580px) { #panel-simulateur .hdr-formula, #panel-simulateur .mode-bar { display: none; } #panel-simulateur .pills-row { grid-template-columns: 1fr 1fr; } #panel-simulateur .cmp-grid { grid-template-columns: 1fr; } #panel-simulateur .page { padding: 14px 14px 48px; } #panel-simulateur .sldr-card { padding: 16px; } }