/**
 * Simulateur de Crédit — Styles front-end
 * Toutes les règles sont préfixées .cs-wrapper pour éviter les conflits.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap');

/* ── Variables CSS par défaut ───────────────────────────────────────────── */
.cs-wrapper {
    --cs-primary:      #50b848;
    --cs-accent:       #AC5111;
    --cs-bg:           #f5f9f4;
    --cs-card:         #ffffff;
    --cs-border:       #d4edda;
    --cs-text:         #1a2e1a;
    --cs-muted:        #6b7e6a;
    --cs-radius:       16px;
    --cs-radius-sm:    10px;
    --cs-primary-a:    rgba(80,184,72,.13);
    --cs-primary-glow: rgba(80,184,72,.28);
    --cs-accent-glow:  rgba(172,81,17,.25);
    --cs-transition:   all 0.22s cubic-bezier(.4,0,.2,1);
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--cs-text);
    background: var(--cs-bg);
    border-radius: var(--cs-radius);
    border: 1px solid var(--cs-border);
    box-shadow: 0 10px 40px rgba(0,0,0,.10);
    overflow: hidden;
    max-width: 880px;
    margin: 2rem auto;
    box-sizing: border-box;
}

/* Reset interne */
.cs-wrapper *, .cs-wrapper *::before, .cs-wrapper *::after { box-sizing: border-box; margin: 0; padding: 0; }
.cs-wrapper p { margin: 0; }

/* ── Formulaire ─────────────────────────────────────────────────────────── */
.cs-form { padding: 36px 40px 24px; }
.cs-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; }
.cs-field-group--rate { grid-column: 1; }
.cs-field-group { display: flex; flex-direction: column; gap: 10px; }

/* Label */
.cs-label { display: flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; color: var(--cs-text); text-transform: uppercase; letter-spacing: .07em; cursor: default; user-select: none; }
.cs-label-icon { display: inline-flex; width: 17px; height: 17px; color: var(--cs-primary); flex-shrink: 0; }
.cs-label-icon svg { width: 17px; height: 17px; }

/* Tooltip */
.cs-tooltip { display: inline-flex; align-items: center; color: var(--cs-muted); cursor: help; position: relative; margin-left: auto; }
.cs-tooltip svg { width: 14px; height: 14px; }
.cs-tooltip::after { content: attr(aria-label); position: absolute; right: 0; top: calc(100% + 6px); background: #1a2e1a; color: #fff; font-size: .72rem; font-weight: 400; text-transform: none; letter-spacing: 0; padding: 6px 10px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .18s; z-index: 999; }
.cs-tooltip:hover::after, .cs-tooltip:focus::after { opacity: 1; }

/* Boîte d'input */
.cs-input-box { display: flex; align-items: stretch; background: var(--cs-card); border: 2px solid var(--cs-border); border-radius: var(--cs-radius-sm); overflow: hidden; transition: var(--cs-transition); }
.cs-input-box:focus-within { border-color: var(--cs-primary); box-shadow: 0 0 0 4px var(--cs-primary-a); }

/* Badge devise / % */
.cs-badge { display: flex; align-items: center; padding: 0 12px; font-family: 'DM Mono', monospace; font-size: .88rem; font-weight: 600; color: var(--cs-muted); background: #eef6ed; white-space: nowrap; flex-shrink: 0; height: 48px; }
.cs-badge--left  { border-right: 2px solid var(--cs-border); }
.cs-badge--right { border-left:  2px solid var(--cs-border); }

/* Input number */
.cs-input { flex: 1; border: none; outline: none; background: transparent; padding: 0 14px; height: 48px; font-size: 1.05rem; font-weight: 600; font-family: 'DM Mono', monospace; color: var(--cs-text); width: 100%; min-width: 0; -moz-appearance: textfield; }
.cs-input::-webkit-outer-spin-button, .cs-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Select durée */
.cs-input-box--dual { gap: 0; }
.cs-select { appearance: none; -webkit-appearance: none; border: none; border-left: 2px solid var(--cs-border); background: #eef6ed url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12'%3E%3Cpath d='M1 4l5 5 5-5' stroke='%236b7e6a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center; padding: 0 28px 0 12px; height: 48px; font-size: .88rem; font-weight: 600; color: var(--cs-text); font-family: 'DM Sans', sans-serif; outline: none; cursor: pointer; flex-shrink: 0; }

/* Slider */
.cs-slider-wrap { display: flex; flex-direction: column; gap: 5px; }
.cs-slider { --cs-pct: 25%; -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 99px; cursor: pointer; outline: none; background: linear-gradient(to right, var(--cs-primary) 0%, var(--cs-primary) var(--cs-pct), var(--cs-border) var(--cs-pct), var(--cs-border) 100%); }
.cs-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--cs-primary); border: 3px solid #fff; box-shadow: 0 2px 8px var(--cs-primary-glow); cursor: grab; transition: transform .14s, box-shadow .14s; }
.cs-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--cs-primary); border: 3px solid #fff; box-shadow: 0 2px 8px var(--cs-primary-glow); cursor: grab; }
.cs-slider:hover::-webkit-slider-thumb { transform: scale(1.18); box-shadow: 0 4px 14px var(--cs-primary-glow); }
.cs-slider:active::-webkit-slider-thumb { cursor: grabbing; }
.cs-slider-labels { display: flex; justify-content: space-between; font-size: .7rem; color: var(--cs-muted); font-weight: 500; padding: 0 2px; }

/* ── Résultats ───────────────────────────────────────────────────────────── */
.cs-results { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; padding: 4px 40px 28px; }
.cs-result-card { background: var(--cs-card); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); padding: 22px 18px; text-align: center; position: relative; overflow: hidden; transition: var(--cs-transition); }
.cs-result-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--cs-border); }
.cs-result-card--main { background: var(--cs-primary); border-color: transparent; }
.cs-result-card--main::before { background: rgba(255,255,255,.35); }
.cs-result-icon { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 9px; margin-bottom: 10px; background: var(--cs-primary-a); }
.cs-result-icon svg { width: 17px; height: 17px; stroke: var(--cs-primary); }
.cs-result-card--main .cs-result-icon { background: rgba(255,255,255,.18); }
.cs-result-card--main .cs-result-icon svg { stroke: #fff; }
.cs-result-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--cs-muted); margin-bottom: 8px; }
.cs-result-card--main .cs-result-label { color: rgba(255,255,255,.65); }
.cs-result-value { font-size: 20px; font-weight: 700; font-family: 'DM Mono', monospace; letter-spacing: -.02em; line-height: 1; color: var(--cs-text); margin-bottom: 5px; transition: var(--cs-transition); }
.cs-result-card--main .cs-result-value { color: #fff; }
.cs-result-value--accent .cs-val { color: var(--cs-accent); }
.cs-result-sub { font-size: .72rem; color: var(--cs-muted); }
.cs-result-card--main .cs-result-sub { color: rgba(255,255,255,.5); }
@keyframes cs-flash { 0%{transform:scale(1)} 40%{transform:scale(1.05);opacity:.8} 100%{transform:scale(1)} }
.cs-result-value.is-updating { animation: cs-flash .28s ease; }

/* ── Barre de répartition ─────────────────────────────────────────────────── */
.cs-breakdown { padding: 0 40px 28px; }
.cs-breakdown-bar { display: flex; height: 32px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 1px 4px rgba(0,0,0,.06); margin-bottom: 12px; }
.cs-bar { display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; transition: width .5s cubic-bezier(.4,0,.2,1); }
.cs-bar-label { font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.9); padding: 0 8px; }
.cs-bar--capital  { background: linear-gradient(90deg, #50b848, #3a9a32); }
.cs-bar--interest { background: linear-gradient(90deg, #AC5111, #c96520); }
.cs-breakdown-legend { display: flex; align-items: center; gap: 8px 20px; font-size: .8rem; color: var(--cs-text); flex-wrap: wrap; }
.cs-legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cs-legend-dot--capital  { background: var(--cs-primary); }
.cs-legend-dot--interest { background: var(--cs-accent); }
.cs-breakdown-legend strong { font-family: 'DM Mono', monospace; font-weight: 600; }

/* ── Tableau d'amortissement ──────────────────────────────────────────────── */
.cs-amort-section { padding: 0 40px 28px; }
.cs-amort-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 16px; border: 2px dashed var(--cs-border); border-radius: var(--cs-radius-sm); background: transparent; color: var(--cs-muted); font-size: .85rem; font-weight: 600; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: var(--cs-transition); text-align: left; }
.cs-amort-toggle:hover { border-color: var(--cs-primary); color: var(--cs-primary); background: var(--cs-primary-a); }
.cs-amort-toggle svg { width: 17px; height: 17px; flex-shrink: 0; }
.cs-amort-table { margin-top: 14px; }
.cs-table-scroll { overflow-x: auto; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-sm); }
.cs-amort-table table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.cs-amort-table thead th { background: var(--cs-primary); color: #fff; padding: 9px 14px; text-align: right; font-weight: 700; font-size: .73rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.cs-amort-table thead th:first-child { text-align: center; }
.cs-amort-table tbody tr { border-bottom: 1px solid var(--cs-border); transition: background .14s; }
.cs-amort-table tbody tr:last-child { border-bottom: none; }
.cs-amort-table tbody tr:nth-child(even) { background: rgba(80,184,72,.06); }
.cs-amort-table tbody tr:hover { background: rgba(80,184,72,.12); }
.cs-amort-table tbody td { padding: 8px 14px; color: var(--cs-text); text-align: right; font-family: 'DM Mono', monospace; font-size: .79rem; }
.cs-amort-table tbody td:first-child { text-align: center; font-weight: 700; font-family: 'DM Sans', sans-serif; color: var(--cs-primary); }
.cs-amort-table tbody td.is-interest { color: var(--cs-accent); }

/* ── Export PDF ─────────────────────────────────────────────────────────── */
.cs-export-section { padding: 0 40px 28px; }
.cs-btn-pdf { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px 24px; border: none; border-radius: var(--cs-radius-sm); background: var(--cs-accent); color: #fff; font-size: .92rem; font-weight: 700; font-family: 'DM Sans', sans-serif; cursor: pointer; transition: var(--cs-transition); letter-spacing: .02em; box-shadow: 0 4px 14px var(--cs-accent-glow); }
.cs-btn-pdf:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 7px 20px var(--cs-accent-glow); }
.cs-btn-pdf:active { transform: translateY(0); }
.cs-btn-pdf svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Disclaimer ─────────────────────────────────────────────────────────── */
.cs-disclaimer { display: flex; align-items: flex-start; gap: 8px; padding: 14px 40px 22px; font-size: .73rem; color: var(--cs-muted); line-height: 1.55; border-top: 1px solid var(--cs-border); }
.cs-disclaimer-icon { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--cs-primary); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .cs-form, .cs-breakdown, .cs-amort-section, .cs-export-section { padding-left: 20px; padding-right: 20px; }
    .cs-results { grid-template-columns: 1fr; padding: 0 20px 20px; }
    .cs-disclaimer { padding: 12px 20px 18px; }
    .cs-fields-grid { grid-template-columns: 1fr; gap: 18px; }
    .cs-field-group--rate { grid-column: auto; }
    .cs-wrapper { margin: 1rem; }
}