*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg: #0f1117; --bg-card: #1a1d27; --bg-input: #252836; --border: #2d3142;
    --text: #e4e6f0; --text-muted: #8b8fa3;
    --accent: #6c63ff; --accent-hover: #5a52d5;
    --green: #22c55e; --green-bg: rgba(34,197,94,0.1);
    --orange: #f59e0b; --orange-bg: rgba(245,158,11,0.1);
    --red: #ef4444; --red-bg: rgba(239,68,68,0.1);
    --radius: 12px;
}

html { overflow-x: hidden; }
body { font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; overflow-x: hidden; width: 100%; }
header { text-align: center; padding: 2rem 1rem 0.75rem; }
header h1 { font-size: 1.8rem; font-weight: 700; background: linear-gradient(135deg, var(--accent), #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.subtitle { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.2rem; }
main { max-width: 800px; margin: 0 auto; padding: 0 1rem 3rem; overflow-x: hidden; }

/* ── Tabs ── */
.tabs { display: flex; max-width: 800px; margin: 0.75rem auto 0; padding: 0 1rem; gap: 0; overflow: hidden; }
.tab { flex: 1; padding: 0.75rem 0.5rem; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s; border-bottom: 2px solid transparent; }
.tab:first-child { border-radius: var(--radius) 0 0 0; }
.tab:last-child { border-radius: 0 var(--radius) 0 0; }
.tab:not(:last-child) { border-right: none; }
.tab.active { color: var(--accent); background: var(--bg); border-bottom-color: var(--accent); border-bottom-width: 3px; }
.tab:hover:not(.active) { color: var(--text); background: rgba(108,99,255,0.05); }
.tab-content { display: none; padding-top: 1.25rem; max-width: 100%; }
.tab-content.active { display: block; }

/* ── Cards ── */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.25rem; overflow-x: auto; }
.card h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem; color: var(--accent); }
details.card { cursor: default; }
details.card summary { cursor: pointer; list-style: none; }
details.card summary::-webkit-details-marker { display: none; }
details.card summary h2 { display: flex; align-items: center; gap: 0.5rem; }
.details-hint { font-size: 0.75rem; color: var(--text-muted); font-weight: 400; }
details.card summary h2::before { content: ''; display: inline-block; width: 0; height: 0; border-left: 5px solid var(--text-muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.2s; }
details[open].card summary h2::before { transform: rotate(90deg); }
details.card > .form-grid { margin-top: 0.5rem; }

/* ── Form ── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.full-width { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-size: 0.82rem; color: var(--text-muted); font-weight: 500; display: flex; align-items: center; gap: 0.4rem; }
.input-group { display: flex; align-items: center; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; transition: border-color 0.2s; }
.input-group:focus-within { border-color: var(--accent); }
.input-group input { flex: 1; background: transparent; border: none; color: var(--text); padding: 0.55rem 0.7rem; font-size: 0.95rem; outline: none; min-width: 0; }
.input-group input::placeholder { color: var(--text-muted); opacity: 0.5; }
.input-group .unit { padding: 0.55rem 0.7rem; color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; background: rgba(255,255,255,0.03); border-left: 1px solid var(--border); }
select, textarea { background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 0.55rem 0.7rem; font-size: 0.95rem; font-family: inherit; outline: none; cursor: pointer; transition: border-color 0.2s; resize: vertical; }
select:focus, textarea:focus { border-color: var(--accent); }
textarea { cursor: text; }
textarea::placeholder { color: var(--text-muted); opacity: 0.5; }
.hint { font-size: 0.72rem; color: var(--text-muted); opacity: 0.8; }

/* ── Auto-fill badge ── */
.field.auto-filled label::after { content: 'auto'; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 5px; border-radius: 4px; background: rgba(108,99,255,0.15); color: var(--accent); font-weight: 600; }
.field.auto-filled.real-data label::after { content: 'reel'; background: rgba(34,197,94,0.15); color: var(--green); }
.field.auto-filled .input-group { border-color: rgba(108,99,255,0.25); }
.field.auto-filled.real-data .input-group { border-color: rgba(34,197,94,0.25); }

/* ── Buttons ── */
.btn-primary { display: block; width: 100%; padding: 0.85rem; background: var(--accent); color: #fff; border: none; border-radius: var(--radius); font-size: 1rem; font-weight: 600; cursor: pointer; margin-bottom: 1.25rem; transition: background 0.2s, transform 0.1s; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { display: block; width: 100%; padding: 0.7rem; background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; cursor: pointer; margin-top: 1rem; transition: all 0.2s; }
.btn-secondary:hover { background: rgba(108,99,255,0.1); }

/* ── Capacité hero ── */
.capacite-result { text-align: center; }
.capacite-result h2 { text-align: left; }
.capacite-hero { padding: 1.5rem 0; }
.capacite-label { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.3rem; }
.capacite-montant { font-size: 2.5rem; font-weight: 800; background: linear-gradient(135deg, var(--accent), #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.2; overflow-wrap: break-word; word-break: break-word; }
.capacite-sub { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.3rem; }
.result-grid-compact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-top: 1rem; text-align: center; }
.mini-stat { padding: 0.6rem; background: var(--bg-input); border-radius: 8px; }
.mini-label { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.2rem; }
.mini-value { font-size: 1rem; font-weight: 700; }
@media (max-width: 600px) { .result-grid-compact { grid-template-columns: repeat(2, 1fr); } .capacite-montant { font-size: 2rem; } }

/* ── Results ── */
.hidden { display: none !important; }
.resultats h2 { color: var(--text); font-size: 1.2rem; margin-bottom: 1.25rem; }
.result-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
.result-block { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; }
.result-grid .result-block { margin-bottom: 0; }
.result-block h3 { font-size: 0.9rem; color: var(--accent); margin-bottom: 0.6rem; font-weight: 600; }
.result-line { display: flex; justify-content: space-between; align-items: center; padding: 0.35rem 0; font-size: 0.85rem; gap: 0.5rem; }
.result-line span { flex-shrink: 1; min-width: 0; }
.result-line span { color: var(--text-muted); }
.result-line strong { color: var(--text); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.result-line.highlight { border-top: 1px solid var(--border); margin-top: 0.25rem; padding-top: 0.5rem; }
.result-line.highlight strong { font-size: 1rem; }
.result-line.big strong { font-size: 1.15rem; color: var(--accent); }
.positive { color: var(--green) !important; }
.negative { color: var(--red) !important; }
.block-comment { margin-top: 0.6rem; font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; padding: 0.5rem 0.7rem; background: rgba(108,99,255,0.04); border-radius: 8px; border-left: 3px solid var(--accent); text-align: left; }
.total-projet { background: rgba(108,99,255,0.05); border-color: var(--accent); }

/* ── Verdict ── */
.verdict { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; border-radius: var(--radius); margin-bottom: 1.25rem; }
.verdict-green { background: var(--green-bg); border: 1px solid var(--green); }
.verdict-orange { background: var(--orange-bg); border: 1px solid var(--orange); }
.verdict-red { background: var(--red-bg); border: 1px solid var(--red); }
.verdict-icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1; }
.verdict strong { display: block; font-size: 1rem; margin-bottom: 0.2rem; }
.verdict-green strong { color: var(--green); } .verdict-orange strong { color: var(--orange); } .verdict-red strong { color: var(--red); }
.verdict p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; }

/* ── Score ── */
.score-section { display: flex; align-items: center; gap: 1.5rem; padding: 1.25rem; background: rgba(108,99,255,0.04); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1.25rem; overflow: hidden; }
.score-ring-container { position: relative; width: 110px; height: 110px; flex-shrink: 0; }
.score-ring { transform: rotate(-90deg); width: 110px; height: 110px; }
.score-ring-bg { fill: none; stroke: var(--bg-input); stroke-width: 8; }
.score-ring-fill { fill: none; stroke: var(--green); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.8s ease, stroke 0.3s; }
.score-value { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-60%); font-size: 1.8rem; font-weight: 800; line-height: 1; }
.score-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%,50%); font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
.score-details { flex: 1; min-width: 0; }
.score-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.6rem; }
.score-bars { display: flex; flex-direction: column; gap: 0.35rem; }
.score-bar-row { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; }
.score-bar-label { width: 130px; flex-shrink: 0; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-bar-track { flex: 1; height: 5px; background: var(--bg-input); border-radius: 3px; overflow: hidden; }
.score-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.score-bar-value { width: 38px; text-align: right; font-weight: 600; flex-shrink: 0; }
@media (max-width: 600px) { .score-section { flex-direction: column; text-align: center; } .score-bar-label { width: 90px; font-size: 0.65rem; } }

/* ── DPE ── */
.dpe-badges { display: flex; gap: 0.35rem; margin-bottom: 0.5rem; }
.dpe-badge { display: flex; align-items: center; justify-content: center; width: 34px; height: 28px; border-radius: 6px; font-weight: 700; font-size: 0.8rem; background: rgba(255,255,255,0.05); color: var(--text-muted); opacity: 0.35; transition: all 0.2s; }
.dpe-badge.active { opacity: 1; background: var(--dpe-color); color: #fff; transform: scale(1.15); box-shadow: 0 2px 8px rgba(0,0,0,0.3); }

/* ── Gauge ── */
.gauge-section { margin-bottom: 1.25rem; }
.gauge-section h3 { font-size: 0.9rem; color: var(--accent); margin-bottom: 0.6rem; font-weight: 600; }
.gauge-container { display: flex; align-items: center; gap: 0.75rem; overflow: hidden; }
.gauge-bar { flex: 1; height: 22px; background: var(--bg-input); border-radius: 11px; overflow: hidden; position: relative; }
.gauge-fill { height: 100%; border-radius: 11px; transition: width 0.5s ease, background 0.3s; min-width: 4px; }
.gauge-fill.green { background: linear-gradient(90deg,#16a34a,#22c55e); } .gauge-fill.orange { background: linear-gradient(90deg,#d97706,#f59e0b); } .gauge-fill.red { background: linear-gradient(90deg,#dc2626,#ef4444); }
.gauge-limit { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); transform: translateX(-50%); }
.gauge-limit-label { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 0.65rem; color: var(--red); font-weight: 600; }
.gauge-value { font-size: 1.2rem; font-weight: 700; min-width: 55px; text-align: right; }
.gauge-explain { margin-top: 0.4rem; font-size: 0.8rem; color: var(--text-muted); }

/* ── Amortissement ── */
.amort-section { margin-bottom: 1.25rem; }
.amort-section summary { cursor: pointer; }
.amort-section h3 { font-size: 0.9rem; color: var(--accent); margin-bottom: 0.5rem; font-weight: 600; }
.amort-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; table-layout: fixed; word-wrap: break-word; }
.amort-table th { text-align: left; padding: 0.5rem 0.6rem; color: var(--text-muted); border-bottom: 1px solid var(--border); font-weight: 500; }
.amort-table td { padding: 0.4rem 0.6rem; border-bottom: 1px solid rgba(255,255,255,0.04); }
.amort-table tr:last-child td { border-bottom: none; font-weight: 600; }
.amort-table .separator td { text-align: center; color: var(--text-muted); font-style: italic; border-bottom: none; padding: 0.2rem; }

/* ── City search ── */
.field { position: relative; }
.search-group { position: relative; }
.btn-search { background: transparent; border: none; color: var(--text-muted); padding: 0.55rem 0.7rem; cursor: pointer; font-size: 1rem; transition: color 0.2s; border-left: 1px solid var(--border); background: rgba(255,255,255,0.03); }
.btn-search:hover { color: var(--accent); }
.ville-results { position: absolute; z-index: 100; width: 100%; background: var(--bg-card); border: 1px solid var(--accent); border-radius: 8px; margin-top: 2px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.ville-result-item { padding: 0.55rem 0.7rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; transition: background 0.15s; }
.ville-result-item:hover { background: rgba(108,99,255,0.1); }
.ville-result-item .ville-name { font-weight: 500; }
.ville-result-item .ville-info { font-size: 0.7rem; color: var(--text-muted); }
.ville-loading { padding: 0.6rem; text-align: center; color: var(--text-muted); font-size: 0.8rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.data-source-banner { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.7rem; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); border-radius: 8px; font-size: 0.7rem; color: var(--green); margin-top: 0.5rem; overflow-wrap: break-word; word-break: break-word; overflow: hidden; }
.data-source-banner .source-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

/* ── Agent IA ── */
.card-ia { border-color: var(--accent); background: linear-gradient(135deg,rgba(108,99,255,0.05),rgba(167,139,250,0.03)); }
.card-ia h2 { background: linear-gradient(135deg,var(--accent),#a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: 1.15rem; }
.ia-intro { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem; }
.btn-duo { display: flex; gap: 0.6rem; margin-top: 1rem; }
.btn-duo .btn-primary { margin-bottom: 0; }
.btn-ia { background: linear-gradient(135deg,var(--accent),#a78bfa); }
.btn-ia:hover { background: linear-gradient(135deg,var(--accent-hover),#9061f9); }
.btn-invest { background: linear-gradient(135deg,#059669,#34d399); }
.btn-invest:hover { background: linear-gradient(135deg,#047857,#22c55e); }
.ia-loading { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem; color: var(--text-muted); font-size: 0.85rem; }
.spinner { width: 18px; height: 18px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ia-result { margin-top: 1rem; }

/* Liens annonces */
.annonces-links { margin-bottom: 1.5rem; }
.annonces-links h3 { font-size: 0.95rem; color: var(--accent); margin-bottom: 0.75rem; font-weight: 600; }
.annonces-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.annonce-btn { display: flex; flex-direction: column; align-items: center; padding: 0.75rem 0.5rem; border-radius: 10px; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; border: 1px solid var(--border); }
.annonce-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.annonce-name { font-weight: 700; font-size: 0.9rem; }
.annonce-desc { font-size: 0.65rem; opacity: 0.7; margin-top: 0.15rem; }
.annonce-btn.lbc { background: linear-gradient(135deg, #ea5e00, #ff8534); color: #fff; border-color: #ea5e00; }
.annonce-btn.seloger { background: linear-gradient(135deg, #e4003a, #ff3366); color: #fff; border-color: #e4003a; }
.annonce-btn.bienici { background: linear-gradient(135deg, #0073e6, #3399ff); color: #fff; border-color: #0073e6; }
.annonce-btn.pap { background: linear-gradient(135deg, #2d8f4e, #3cb371); color: #fff; border-color: #2d8f4e; }
.ia-content { font-size: 0.85rem; line-height: 1.7; overflow-wrap: break-word; word-break: break-word; }
.ia-content h2 { font-size: 1.1rem; color: var(--accent); margin: 1.25rem 0 0.4rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--border); -webkit-text-fill-color: unset; background: none; }
.ia-content h3 { font-size: 0.95rem; color: #a78bfa; margin: 1rem 0 0.3rem; }
.ia-content h4 { font-size: 0.85rem; color: var(--text); margin: 0.75rem 0 0.2rem; }
.ia-content p { margin-bottom: 0.4rem; }
.ia-content ul { list-style: none; padding-left: 0; margin: 0.25rem 0 0.6rem; }
.ia-content li { position: relative; padding-left: 1.1rem; margin-bottom: 0.25rem; }
.ia-content li::before { content: '>'; position: absolute; left: 0.2rem; color: var(--accent); font-weight: 700; }
.ia-error { padding: 0.75rem; background: var(--red-bg); border: 1px solid var(--red); border-radius: 8px; color: var(--red); font-size: 0.85rem; }

/* ── Footer ── */
footer { text-align: center; padding: 1.5rem 1rem; color: var(--text-muted); font-size: 0.75rem; border-top: 1px solid var(--border); max-width: 800px; margin: 0 auto; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { opacity: 0.5; }
@media (max-width: 600px) {
    .amort-table { font-size: 0.65rem; }
    .amort-table th, .amort-table td { padding: 0.3rem; }
    header h1 { font-size: 1.5rem; }
    .tab { font-size: 0.75rem; padding: 0.6rem 0.3rem; }
    .card { padding: 1rem; }
    .verdict { flex-direction: column; gap: 0.5rem; }
    .btn-duo { flex-direction: column; }
    .annonces-grid { grid-template-columns: 1fr 1fr; }
    .score-bar-label { width: 80px; }
    .gauge-section { padding-top: 0.5rem; }
    .block-comment { font-size: 0.72rem; }
    .result-line { font-size: 0.78rem; }
    .ia-content { font-size: 0.78rem; }
}