/* ═══════════════════════════════════════════════════
   DESIGN SYSTEM — "The Architectural Ledger"
   Palette : L'Éditorial Wealth / Stitch
═══════════════════════════════════════════════════ */

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

:root {
  /* Surfaces — légèrement plus chaleureuses */
  --surface:                 #F5F6FA;
  --surface-container-low:   #EDEEF5;
  --surface-container:       #E5E6EF;
  --surface-container-high:  #DADBE8;
  --surface-lowest:          #FFFFFF;

  /* Text — plus de contraste */
  --on-surface:          #141720;
  --on-surface-variant:  #3E404F;
  --outline:             #6B6C7E;
  --outline-variant:     #BBBCD0;

  /* Primary accent — utilisé UNIQUEMENT en accent, pas en fond de masse */
  --primary:             #0716E5;
  --accent:              #3340FA;   /* surface-tint */

  /* Semantic */
  --warning:  #872100;
  --error:    #BA1A1A;

  /* Tokens */
  --shadow-arch:   0px 8px 24px rgba(20, 23, 32, 0.08), 0px 1px 4px rgba(20, 23, 32, 0.04);
  --shadow-float:  0px 4px 16px rgba(51, 64, 250, 0.12);
  --gradient-cta:  linear-gradient(135deg, #3340FA 0%, #0716E5 100%);
  --radius-card:   1.25rem;  /* 20px — légèrement moins rond */
  --radius-input:  0.625rem; /* 10px */
  --radius-sm:     0.5rem;   /* 8px */

  /* Typographie */
  --font-headline: 'Manrope', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;
}

html { font-size: 15px; }
body {
  font-family: var(--font-body);
  background: var(--surface);
  color: var(--on-surface);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────────
   EN-TÊTE — léger, pas de fond coloré massif
───────────────────────────────────────────── */
header {
  background: var(--surface-lowest);
  border-bottom: 1px solid var(--surface-container-high);
  padding: 16px 40px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
header h1 {
  font-family: var(--font-headline);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--on-surface);
}
header span {
  font-size: .8rem;
  color: var(--on-surface-variant);
  font-weight: 400;
}

/* ─────────────────────────────────────────────
   ONGLETS — underline style, fond neutre
───────────────────────────────────────────── */
.tabs-nav {
  background: var(--surface-lowest);
  display: flex;
  gap: 0;
  padding: 0 40px;
  border-bottom: 1px solid var(--surface-container-high);
}
.tab-btn {
  padding: 13px 22px;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--on-surface-variant);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 500;
  border-radius: 0;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px; /* chevauche la border-bottom du nav */
}
.tab-btn:hover { color: var(--accent); }
.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 700;
}

.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ─────────────────────────────────────────────
   TOOLTIP — ancré à gauche de l'icône
───────────────────────────────────────────── */
.tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-container);
  color: var(--on-surface-variant);
  font-size: .68rem;
  font-weight: 700;
  font-style: normal;
  cursor: help;
  position: relative;
  flex-shrink: 0;
  vertical-align: middle;
  margin-left: 5px;
  transition: background .15s, color .15s;
}
.tip:hover {
  background: var(--accent);
  color: #fff;
}
.tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;               /* ancré gauche → s'ouvre vers la droite */
  transform: none;
  background: var(--on-surface);
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 400;
  font-style: normal;
  white-space: pre-line;
  width: max-content;
  max-width: 300px;
  line-height: 1.55;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
  z-index: 300;
  box-shadow: var(--shadow-float);
}
.tip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 5px;
  border: 5px solid transparent;
  border-top-color: var(--on-surface);
  opacity: 0;
  transition: opacity .18s;
  z-index: 301;
}
.tip:hover::after,
.tip:hover::before { opacity: 1; }

.tip.tip-down::after  { top: calc(100% + 10px); bottom: auto; }
.tip.tip-down::before { top: calc(100% + 4px); bottom: auto; border-top-color: transparent; border-bottom-color: var(--on-surface); }

/* ─────────────────────────────────────────────
   LAYOUT SIMULATEUR
───────────────────────────────────────────── */
.sim-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  padding: 28px 40px;
  align-items: start;
}

/* ─────────────────────────────────────────────
   CARTES SECTIONS — blanches, top-stripe accent
───────────────────────────────────────────── */
.section-card {
  background: var(--surface-lowest);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-arch);
  margin-bottom: 16px;
  overflow: hidden;   /* contient le border-top coloré */
  border-top: 3px solid var(--accent);
}
.section-card h2 {
  font-family: var(--font-headline);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--on-surface);
  padding: 14px 20px;
  background: var(--surface-container-low);
}

/* ─────────────────────────────────────────────
   GRILLE FORMULAIRE
───────────────────────────────────────────── */
.form-grid {
  padding: 8px 20px 16px;
}

/* Sous-section : titre catégorie à l'intérieur d'une section-card */
.form-subsection {
  margin: 16px 0 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(117, 117, 136, 0.18);
}
.form-subsection:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.form-subsection h3 {
  font-family: var(--font-headline);
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 130px 130px;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  /* Pas de border-bottom — séparation par espace seul (règle no-line) */
}
.form-row label {
  font-family: var(--font-body);
  font-size: .86rem;
  font-weight: 500;
  color: var(--on-surface);   /* noir — plus lisible */
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 0;
  flex-wrap: wrap;
}
.form-row .col-header {
  font-size: .75rem;
  font-weight: 600;
  color: var(--outline);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding-bottom: 2px;
}

/* Ghost border inputs — style Stitch */
.form-row input[type="number"],
.form-row select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid rgba(117, 117, 136, 0.25);  /* ghost border */
  border-radius: var(--radius-input);
  background: var(--surface-lowest);
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 500;
  color: var(--on-surface);
  text-align: right;
  transition: border-color .15s, box-shadow .15s;
  -moz-appearance: textfield;
}
.form-row input[type="number"]::-webkit-inner-spin-button,
.form-row input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.form-row input[type="number"]:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(51, 64, 250, 0.08);
}
.form-row select { text-align: left; }

/* Checkbox dans un form-row : aligne à droite comme les inputs number, taille raisonnable */
.form-row input[type="checkbox"].form-checkbox {
  justify-self: end;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 6px 8px;
}

/* Ligne calculée */
.form-row.computed label {
  font-weight: 700;
  color: var(--on-surface);
  font-family: var(--font-headline);
}
.form-row.computed .computed-val {
  background: rgba(51, 64, 250, 0.06);
  color: var(--accent);
  font-weight: 700;
  font-family: var(--font-headline);
  padding: 6px 10px;
  border-radius: var(--radius-input);
  text-align: center;
  font-size: .88rem;
}

/* Niche markers */
.niche-marker {
  font-size: .70rem;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 99px;
  display: inline-block;
  line-height: 1.6;
  letter-spacing: 0;
  white-space: nowrap;
}
.niche-10k    { color: var(--outline);   background: var(--surface-container-low); border: 1px solid var(--outline-variant); }
.niche-18k    { color: #6B5000;          background: #FFF8E0;                       border: 1px solid #E8D58A; }
.niche-18k-44 { color: #6B5000;          background: #FFF8E0;                       border: 1px solid #E8D58A; }
.niche-18k-34 { color: #6B5000;          background: #FFF8E0;                       border: 1px solid #E8D58A; }
.niche-hors   { color: #7B1200;          background: #FFE8E4;                       border: 1px solid #F5C4B8; }
.niche-plaf   { color: var(--outline);   background: transparent;                   font-size: .67rem; font-weight: 400; padding: 0 2px; }

.niche-cell { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }

/* Indicateur de plafond PER sous le champ de saisie */
.per-cap-note {
  grid-column: 1 / -1;
  font-size: .75rem;
  color: var(--outline);
  padding: 2px 0 4px;
  font-style: italic;
}
.per-cap-note strong {
  color: var(--accent);
  font-style: normal;
}

/* Carte "cadre temporel" dans l'onglet Paramètres */
.param-card--scope {
  background: #F0F4FF;
  border-top-color: var(--accent);
}
.param-card--scope p {
  font-size: .84rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* ─────────────────────────────────────────────
   PANNEAU RÉSULTATS
───────────────────────────────────────────── */
.results-panel {
  position: sticky;
  top: 24px;
  background: var(--surface-lowest);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-arch);
  overflow: hidden;
  border-top: 3px solid var(--accent);
}
.results-panel h2 {
  font-family: var(--font-headline);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--on-surface);
  padding: 14px 20px;
  background: var(--surface-container-low);
}
.results-list { padding: 6px 0 12px; }

.res-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 20px;
  font-size: .84rem;
  gap: 8px;
}
.res-row .res-label { color: var(--on-surface-variant); flex: 1; font-weight: 500; }
.res-row .res-val   { font-weight: 600; color: var(--on-surface); white-space: nowrap; font-variant-numeric: tabular-nums; }

.res-row.separator {
  padding: 4px 0;
  margin: 2px 20px;
  border-top: 1px solid var(--surface-container-high);
}

.res-row.highlight { background: rgba(51, 64, 250, 0.04); }
.res-row.highlight .res-label { color: var(--accent); font-weight: 600; }
.res-row.highlight .res-val   { color: var(--accent); }

.res-row.total-final {
  background: var(--gradient-cta) !important;
  padding: 12px 20px;
  margin-top: 6px;
}
.res-row.total-final .res-label {
  color: rgba(255,255,255,.85);
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: .9rem;
}
.res-row.total-final .res-val {
  color: #fff;
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 800;
}

.res-val.warning { color: var(--warning) !important; }

/* ─────────────────────────────────────────────
   ONGLET CALCUL DÉTAILLÉ
───────────────────────────────────────────── */
#calcul { padding: 28px 40px; }

.calc-section {
  background: var(--surface-lowest);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-arch);
  margin-bottom: 16px;
  overflow: hidden;
  border-top: 3px solid var(--accent);
}
.calc-section h2 {
  font-family: var(--font-headline);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--on-surface);
  padding: 14px 20px;
  background: var(--surface-container-low);
}
.calc-section.final {
  border-top-color: var(--error);
}
.calc-section.final h2 {
  color: var(--error);
}

.calc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.calc-table td {
  padding: 7px 20px;
  vertical-align: middle;
  /* Pas de border — séparation tonal au survol */
}
.calc-table tr:hover td { background: var(--surface-container-low); }

.calc-table .td-label { color: var(--on-surface); width: 65%; }
.calc-table .td-label-inner {
  display: flex;
  align-items: center;
  gap: 4px;
}
.calc-table .td-val {
  text-align: right;
  font-weight: 600;
  color: var(--on-surface);
  width: 35%;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-body);
}

.calc-table tr.total-row td {
  background: rgba(51, 64, 250, 0.04);
  font-weight: 700;
}
.calc-table tr.total-row .td-label { color: var(--accent); font-family: var(--font-headline); }
.calc-table tr.total-row .td-val   { color: var(--accent); }

.calc-table tr.grand-total td {
  background: rgba(186, 26, 26, 0.05);
  font-weight: 800;
  font-size: .92rem;
}
.calc-table tr.grand-total .td-label { color: var(--error); font-family: var(--font-headline); }
.calc-table tr.grand-total .td-val   { color: var(--error); }

.calc-table tr.hors-niche .td-label .td-label-inner { color: #7B1200; }
.calc-table .warn-val { color: var(--warning) !important; }

/* ─────────────────────────────────────────────
   ONGLET PARAMÈTRES
   Note : display:grid placé sur .active seulement pour ne pas écraser
   le display:none de .tab-pane (spécificité ID > class)
───────────────────────────────────────────── */
#parametres {
  padding: 28px 40px;
}
#parametres.active {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
  align-items: start;
}
.param-card {
  background: var(--surface-lowest);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-arch);
  overflow: hidden;
  border-top: 3px solid #2E7D52;  /* vert — différencie l'onglet paramètres */
}
.param-card h2 {
  font-family: var(--font-headline);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--on-surface);
  padding: 14px 20px;
  background: var(--surface-container-low);
}
.param-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
}
.param-table td {
  padding: 6px 20px;
}
.param-table tr:hover td { background: var(--surface-container-low); }
.param-table .pt-label { color: var(--on-surface-variant); width: 70%; }
.param-table .pt-val   { text-align: right; font-weight: 600; color: var(--on-surface); font-variant-numeric: tabular-nums; }
.param-table .pt-source {
  color: var(--outline);
  font-size: .73rem;
  padding: 5px 20px 8px;
  font-style: italic;
  background: var(--surface);
  display: block;
}

/* ─────────────────────────────────────────────
   ONGLET LEVIERS FISCAUX
───────────────────────────────────────────── */
#leviers {
  padding: 28px 40px;
  max-width: 860px;
}

.leviers-legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding: 14px 18px;
  background: var(--surface-lowest);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-arch);
}
.leviers-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--on-surface-variant);
}

.leviers-section-title {
  font-family: var(--font-headline);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .2px;
  margin: 28px 0 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.leviers-section-title:first-of-type { margin-top: 0; }

/* Badges */
.lbadge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: .70rem;
  font-weight: 600;
  white-space: nowrap;
}
.lbadge-hors   { background: #E8F0FE; color: #1a3fa0; border: 1px solid #b0c4f8; }
.lbadge-10k    { background: #E6F4EA; color: #1e6b35; border: 1px solid #9fd4ac; }
.lbadge-18k    { background: #FEF3E2; color: #b45309; border: 1px solid #f8d89e; }
.lbadge-deduct { background: var(--surface-container-low); color: var(--on-surface-variant); border: 1px solid var(--outline-variant); }

/* Cards accordéon */
.levier-card {
  background: var(--surface-lowest);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-arch);
  margin-bottom: 8px;
  overflow: hidden;
  border-top: 3px solid var(--accent);
}
.levier-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  cursor: pointer;
  user-select: none;
  transition: background .12s;
}
.levier-header:hover { background: var(--surface-container-low); }
.levier-header-left { flex: 1; min-width: 0; }
.levier-tag-type {
  font-size: .68rem;
  color: var(--outline);
  margin-bottom: 2px;
}
.levier-title {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: .90rem;
  color: var(--on-surface);
  line-height: 1.35;
}
.levier-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}
.levier-arrow {
  font-size: .85rem;
  color: var(--outline);
  transition: transform .25s;
  flex-shrink: 0;
}
.levier-header.open .levier-arrow { transform: rotate(180deg); }

.levier-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.levier-body.open { max-height: 1200px; }
.levier-body-inner { padding: 0 20px 20px; }

/* Meta grid */
.levier-meta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 7px;
  margin: 12px 0;
}
.levier-meta-item {
  background: var(--surface-container-low);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.levier-meta-label {
  font-size: .67rem;
  color: var(--outline);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 3px;
}
.levier-meta-value {
  font-size: .83rem;
  font-weight: 600;
  color: var(--on-surface);
  line-height: 1.3;
}
.levier-meta-value.lmv-good { color: #1e6b35; }
.levier-meta-value.lmv-warn { color: var(--warning); }

/* Desc blocks */
.levier-desc {
  margin-top: 12px;
}
.levier-desc-label {
  font-size: .68rem;
  text-transform: uppercase;
  color: var(--outline);
  letter-spacing: .4px;
  margin-bottom: 5px;
  font-weight: 600;
}
.levier-desc-text {
  font-size: .855rem;
  color: var(--on-surface-variant);
  line-height: 1.65;
}
.levier-desc-text em {
  font-style: normal;
  color: var(--outline);
  font-size: .82rem;
}

/* Footer sources */
.leviers-footer {
  margin-top: 24px;
  padding: 14px 18px;
  background: var(--surface-lowest);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-arch);
  font-size: .78rem;
  color: var(--on-surface-variant);
  line-height: 1.65;
  border-top: 3px solid #2E7D52;
}

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 900px) {
  .sim-layout { grid-template-columns: 1fr; }
  .results-panel { position: static; }
  .form-row { grid-template-columns: 1fr 110px; }
}
@media (max-width: 600px) {
  header, .tabs-nav, .sim-layout, #calcul, #parametres, #preconisations { padding-left: 16px; padding-right: 16px; }
}

/* ─────────────────────────────────────────────
   ONGLET PRÉCONISATIONS
   ───────────────────────────────────────────── */
#preconisations {
  padding: 24px 32px 64px;
  max-width: 1400px;
  margin: 0 auto;
}
.preco-intro {
  margin-bottom: 24px;
}
.preco-intro h2 {
  font-family: var(--font-headline);
  font-size: 1.4rem;
  margin: 0 0 8px;
  color: var(--on-surface);
}
.preco-intro p {
  font-size: .9rem;
  color: rgba(0,0,0,0.7);
  margin: 0;
  max-width: 800px;
}
.preco-budget {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px 18px;
  background: rgba(51, 64, 250, 0.06);
  border-radius: var(--radius-input);
  border-left: 3px solid var(--accent);
}
.preco-budget label {
  font-weight: 700;
  font-size: .92rem;
  color: var(--on-surface);
}
.preco-budget input {
  width: 140px;
  padding: 8px 12px;
  border: 1px solid rgba(117, 117, 136, 0.25);
  border-radius: var(--radius-input);
  background: white;
  font-size: .92rem;
  font-weight: 600;
  text-align: right;
}
.preco-budget-suffix {
  color: rgba(0,0,0,0.5);
  font-weight: 600;
}

.preco-table-wrap {
  margin-bottom: 24px;
}
.preco-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-lowest);
  border-radius: var(--radius-input);
  /* PAS d'overflow:hidden — couperait les tooltips qui sortent du tableau */
  box-shadow: var(--shadow-card);
}
.preco-table th {
  text-align: left;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(0,0,0,0.55);
  padding: 10px 14px;
  border-bottom: 1px solid rgba(117, 117, 136, 0.15);
  background: rgba(51, 64, 250, 0.04);
}
/* Border-radius compensé sur les cellules header de coin (pour préserver le visuel
   des coins arrondis du tableau, malgré le retrait de overflow:hidden) */
.preco-table thead tr th:first-child { border-top-left-radius: var(--radius-input); }
.preco-table thead tr th:last-child  { border-top-right-radius: var(--radius-input); }
.preco-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-input); }
.preco-table tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--radius-input); }
.preco-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(117, 117, 136, 0.08);
  font-size: .88rem;
  vertical-align: middle;
}
.preco-table tbody tr:last-child td {
  border-bottom: none;
}
.preco-lever-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.preco-lever-select, .preco-param-select {
  flex: 1;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid rgba(117, 117, 136, 0.25);
  border-radius: var(--radius-input);
  background: white;
  font-size: .85rem;
  font-family: inherit;
}
.preco-lever-tip {
  flex: 0 0 auto;
}
.preco-montant-input {
  width: 110px;
  padding: 6px 8px;
  border: 1px solid rgba(117, 117, 136, 0.25);
  border-radius: var(--radius-input);
  background: white;
  text-align: right;
  font-weight: 600;
  font-size: .85rem;
}
.preco-param-na {
  color: rgba(0,0,0,0.3);
}
.preco-avantage {
  font-weight: 700;
  color: #15803d;
  text-align: right;
  white-space: nowrap;
}
.preco-plafond {
  font-weight: 600;
  font-size: .85rem;
}
.preco-ok {
  color: #15803d;
}
.preco-warn {
  color: #ea580c;
  font-weight: 700;
}
.preco-del-btn {
  background: transparent;
  border: 1px solid rgba(117, 117, 136, 0.2);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: 1rem;
  color: rgba(0,0,0,0.5);
  line-height: 1;
  padding: 0;
  transition: all .15s;
}
.preco-del-btn:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #dc2626;
}
.preco-add-btn {
  margin-top: 12px;
  padding: 8px 16px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--radius-input);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.preco-add-btn:hover {
  filter: brightness(1.1);
}

.preco-jauges {
  background: var(--surface-lowest);
  border-radius: var(--radius-input);
  padding: 18px 22px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card);
}
.preco-jauges h3 {
  font-family: var(--font-headline);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin: 0 0 14px;
}
.preco-jauge-row {
  display: grid;
  grid-template-columns: 220px 1fr 200px;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  font-size: .88rem;
}
.preco-jauge-label {
  font-weight: 600;
  color: rgba(0,0,0,0.7);
}
.preco-jauge-bar {
  height: 12px;
  background: rgba(117, 117, 136, 0.15);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.preco-jauge-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 6px;
  transition: width .25s, background .25s;
  width: 0%;
}
.preco-jauge-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--on-surface);
  font-weight: 600;
}
.preco-jauge-bonus {
  grid-template-columns: 220px 1fr;
  margin-top: -4px;
  margin-bottom: 8px;
}
.preco-jauge-bonus-label {
  color: #15803d;
  font-weight: 700;
  font-size: .82rem;
}
.preco-jauge-bonus-detail {
  font-size: .82rem;
  color: rgba(0,0,0,0.65);
  font-style: italic;
}

.preco-jauge-economie {
  margin-top: 12px;
  padding-top: 16px;
  border-top: 2px solid rgba(51, 64, 250, 0.15);
  grid-template-columns: 220px 1fr;
}
.preco-jauge-economie-val {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 700;
  text-align: right;
  color: var(--on-surface);
}
.preco-jauge-economie-val.preco-economie-pos {
  color: #15803d;
}

.preco-comparison {
  background: var(--surface-lowest);
  border-radius: var(--radius-input);
  padding: 18px 22px;
  box-shadow: var(--shadow-card);
}
.preco-comparison h3 {
  font-family: var(--font-headline);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin: 0 0 14px;
}
.preco-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.preco-compare-table th {
  text-align: right;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
  padding: 8px 14px;
  border-bottom: 1px solid rgba(117, 117, 136, 0.15);
}
.preco-compare-table th:first-child {
  text-align: left;
}
.preco-compare-table td {
  padding: 7px 14px;
  border-bottom: 1px solid rgba(117, 117, 136, 0.08);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.preco-compare-table td:first-child {
  text-align: left;
  color: rgba(0,0,0,0.7);
}
.preco-compare-table tr.cmp-total td {
  font-weight: 700;
  font-size: 1rem;
  background: rgba(51, 64, 250, 0.06);
  border-top: 2px solid rgba(51, 64, 250, 0.20);
  color: var(--on-surface);
}
.cmp-ecart-pos {
  color: #15803d;
  font-weight: 700;
}
.cmp-ecart-neg {
  color: #dc2626;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   PRÉCONISATIONS — refonte 3 leviers (Phase 3)
═══════════════════════════════════════════════════════════ */

/* ─── Dev toolbar (temporaire — à retirer avant prod) ─── */
.dev-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin: 16px 40px -8px;
  background: #fef3c7;
  border: 1px dashed #d97706;
  border-radius: 6px;
  font-size: 0.82em;
}
.dev-toolbar-label {
  font-size: 0.7em;
  font-weight: 700;
  color: #78350f;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 2px 6px;
  background: #fde68a;
  border-radius: 3px;
}
.dev-btn {
  padding: 4px 12px;
  background: #fff;
  border: 1px solid #d97706;
  border-radius: 4px;
  color: #78350f;
  cursor: pointer;
  font-size: 0.85em;
  font-weight: 500;
}
.dev-btn:hover {
  background: #fde68a;
}

/* ─── Layout 2 colonnes ─── */
.preco-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 20px;
  align-items: start;
  margin-top: 16px;
}
.preco-main { min-width: 0; }
.preco-sidebar {
  position: sticky;
  top: 80px;
  align-self: start;
}

/* ─── Sections par levier — palette sobre ─── */
.preco-section {
  margin: 12px 0;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
/* Différenciation des leviers : juste une étiquette discrète, plus de
   border-left coloré ni de h3 coloré (trop bruyant) */
.preco-section-header {
  margin-bottom: 8px;
}
.preco-section-header h3 {
  margin: 0 0 2px 0;
  font-size: 1em;
  font-weight: 600;
  color: #0f172a;
}
.preco-section-desc {
  margin: 0;
  font-size: 0.82em;
  color: #64748b;
}

/* Variante header Levier 2 : grid 2 colonnes pour caler l'indicateur à droite */
.preco-section-header-l2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

/* Indicateur "Impôt à effacer" en haut à droite — même rythme que les
   jauges de la sidebar (label fin, barre 4px, valeur tabular). */
.preco-section-indic {
  flex: 0 0 auto;
  min-width: 160px;
  text-align: right;
}
.preco-section-indic-label {
  display: block;
  font-size: 0.78em;
  color: #64748b;
  font-weight: 500;
  margin-bottom: 3px;
}
.preco-section-indic-bar {
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  overflow: hidden;
}
.preco-section-indic-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 0.2s ease;
}
.preco-section-indic-val {
  display: block;
  font-size: 0.78em;
  font-variant-numeric: tabular-nums;
  color: #475569;
  margin-top: 2px;
}

.preco-table-section {
  margin-top: 6px;
}

/* ─── Lignes "déjà saisies" en tête des tableaux préco ─── */
.preco-tbody-existing tr {
  background: #f8fafc;
  color: #475569;
  font-size: 0.88em;
}
.preco-tbody-existing td {
  padding: 6px 10px;
  border-bottom: 1px dashed #e2e8f0;
}
.preco-existing-marker {
  display: inline-block;
  font-size: 0.72em;
  color: #64748b;
  font-weight: 500;
  margin-right: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.preco-plafond-existing {
  font-size: 0.78em;
  color: #94a3b8;
  font-style: italic;
}

/* ─── Pastille catégorie (Niche 10k / 18k / Hors / Foncier) ─── */
.preco-cat-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  background: #f1f5f9;
  font-size: 0.72em;
  font-weight: 500;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
  color: #64748b;
}
/* Différenciation discrète par couleur de texte uniquement, fond identique */
.preco-cat-niche10 { color: #1e40af; }
.preco-cat-niche18 { color: #92400e; }
.preco-cat-hors    { color: #475569; }
.preco-cat-foncier { color: #166534; }

/* Pastille "nature" — retirée des lignes (cf. fix surdim) mais classes
   conservées au cas où on l'utilise ailleurs (récap surdim ci-dessous). */
.preco-nat-rep      { color: #075985; }
.preco-nat-perdu    { color: #9a3412; }
.preco-nat-rembours { color: #166534; }

/* Colonne "Plafond individuel" centrée — la coche ✓ tombe au milieu */
.preco-table-section th:nth-child(5),
.preco-table-section td:nth-child(5) {
  text-align: center;
}

/* Box récap "surdimensionnement" avec liste des dispositifs L2 actifs */
.preco-warning-surdim .surdim-head {
  margin-bottom: 6px;
}
.preco-warning-surdim .surdim-list {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
  font-size: 0.92em;
  line-height: 1.55;
}
.preco-warning-surdim .surdim-rep   { color: #075985; font-weight: 500; }
.preco-warning-surdim .surdim-perdu { color: #9a3412; font-weight: 500; }

/* ─── Warnings inline ─── */
.preco-section-warnings {
  margin: 12px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.preco-warning {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.88em;
  line-height: 1.4;
  border-left: 3px solid transparent;
}
.preco-warning-info {
  background: #eff6ff;
  border-left-color: #2563eb;
  color: #1e3a8a;
}
.preco-warning-warning {
  background: #fffbeb;
  border-left-color: #d97706;
  color: #78350f;
}
.preco-warning-error {
  background: #fef2f2;
  border-left-color: #dc2626;
  color: #7f1d1d;
}

/* ─── Boutons + Ajouter par section ─── */
.preco-section .preco-add-btn {
  margin-top: 12px;
  display: inline-block;
  padding: 8px 16px;
  background: transparent;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  color: #475569;
  font-size: 0.9em;
  cursor: pointer;
  transition: all 0.15s;
}
.preco-section .preco-add-btn:hover {
  border-style: solid;
  border-color: #94a3b8;
  background: #f8fafc;
  color: #0f172a;
}
.preco-section-l1 .preco-add-btn:hover { border-color: #2E7D52; color: #2E7D52; }
.preco-section-l2 .preco-add-btn:hover { border-color: #b45309; color: #b45309; }
.preco-section-l3 .preco-add-btn:hover { border-color: #2563eb; color: #2563eb; }

/* Section vide : message d'invite plus visible */
.preco-section .preco-table-section tbody:empty + .preco-section-warnings + .preco-add-btn,
.preco-section .preco-table-section tbody:empty ~ .preco-add-btn {
  display: block;
  margin: 0 auto;
}

/* ─── Sidebar récap (sticky dans le layout grid 2 colonnes) ─── */
.preco-sidebar {
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.9em;
}
.preco-sidebar h4 {
  margin: 0 0 10px 0;
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #64748b;
  font-weight: 600;
}
.preco-sidebar .recap-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 0;
  gap: 8px;
}
.preco-sidebar .recap-label {
  font-size: 0.85em;
  color: #64748b;
}
.preco-sidebar .recap-val {
  font-size: 1em;
  font-weight: 600;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
}
.preco-sidebar .recap-final {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
}
.preco-sidebar .recap-final .recap-label {
  color: #0f172a;
  font-weight: 600;
}
.preco-sidebar .recap-final .recap-val {
  font-size: 1.15em;
  font-weight: 700;
  color: #0f172a;
}
.preco-sidebar .recap-eco {
  margin-top: 2px;
}
.preco-sidebar .recap-conclusion {
  margin: 8px 0 4px 0;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.86em;
  line-height: 1.4;
  text-align: center;
}
.preco-sidebar .recap-conclusion-due {
  background: #f1f5f9;
  color: #0f172a;
}
.preco-sidebar .recap-conclusion-zero {
  background: #f8fafc;
  color: #475569;
  font-style: italic;
}
.preco-sidebar .recap-conclusion-remb {
  background: #f1f5f9;
  color: #0f172a;
  font-weight: 600;
}
.preco-sidebar .recap-eco .recap-label {
  color: #475569;
  font-weight: 500;
}
.preco-sidebar .recap-eco .recap-val {
  color: #0f172a;
  font-weight: 700;
}

/* Séparateur Évolution / Indicateurs dans le sticky */
.preco-sidebar .recap-divider {
  margin: 14px 0 6px 0;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #64748b;
  font-weight: 600;
}
.preco-sidebar .recap-jauge {
  margin-bottom: 6px;
}
.preco-sidebar .recap-jauge-label {
  display: block;
  font-size: 0.78em;
  color: #475569;
  margin-bottom: 2px;
}
.preco-sidebar .recap-jauge-bar {
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  overflow: hidden;
}
.preco-sidebar .recap-jauge-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.2s ease, background 0.2s ease;
}
.preco-sidebar .recap-jauge-val {
  font-size: 0.72em;
  font-variant-numeric: tabular-nums;
  color: #64748b;
  display: block;
  text-align: right;
  margin-top: 2px;
}

/* Sur écrans étroits : layout passe en 1 colonne, sidebar empilée en bas
   (au lieu de cachée — l'info reste accessible). */
@media (max-width: 1100px) {
  .preco-layout { grid-template-columns: 1fr; }
  .preco-sidebar { position: static; }
}

/* ─── Bouton "max" à droite de l'input montant ─── */
.preco-montant-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.preco-montant-wrap .preco-montant-input {
  flex: 1 1 auto;
  min-width: 0;
}
.preco-max-btn {
  flex: 0 0 auto;
  padding: 2px 8px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  color: #475569;
  font-size: 0.72em;
  font-weight: 500;
  cursor: pointer;
  text-transform: lowercase;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.preco-max-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
  border-color: #94a3b8;
}

/* ─── Widget rendement libre (Girardin PD/AG) ─── */
.preco-rendement-wrap {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.preco-rendement-btn {
  width: 26px;
  border: 0;
  background: #f1f5f9;
  color: #475569;
  cursor: pointer;
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1;
  padding: 0;
  transition: background 0.15s;
}
.preco-rendement-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.preco-rendement-input {
  width: 56px;
  border: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  background: transparent;
  outline: none;
  padding: 4px 0;
}
.preco-rendement-input::-webkit-outer-spin-button,
.preco-rendement-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.preco-rendement-suffix {
  display: flex;
  align-items: center;
  padding: 0 6px 0 2px;
  color: #64748b;
  font-size: 0.9em;
}

/* ─── Jauges résiduelles en grille 3 colonnes (Budget, PER, Dons) ─── */
.preco-jauges-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
  padding: 16px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
}
.preco-jauges-grid .preco-jauge-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
}
.preco-jauges-grid .preco-jauge-label {
  font-size: 0.82em;
  color: #64748b;
  font-weight: 500;
}
.preco-jauges-grid .preco-jauge-bar {
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}
.preco-jauges-grid .preco-jauge-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.2s ease, background 0.2s ease;
}
.preco-jauges-grid .preco-jauge-val {
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
  color: #475569;
}
@media (max-width: 720px) {
  .preco-jauges-grid { grid-template-columns: 1fr; }
}