@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --navy:#122238; --slate:#1a2b4c; --gold:#c5a059; --gold-l:#dfc07e; --gold-d:#9a7a3b;
  --cream:#fbf9f5; --bg:#f4f6f9; --border:#e5e7eb; --muted:#6b7280;
  --r-xl:1rem; --r-lg:.75rem;
  --sh-sm:0 1px 3px rgba(18,34,56,.06); --sh-lg:0 12px 30px rgba(18,34,56,.12);
}
body{background:var(--bg);color:var(--slate);font-family:"Inter",system-ui,sans-serif;}
h1,h2,h3,h4,h5{font-family:Georgia,Cambria,serif;color:var(--navy);}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}

/* Navbar & footer */
.navbar{background:var(--navy)!important;border-bottom:1px solid rgba(197,160,89,.25);box-shadow:0 2px 10px rgba(0,0,0,.15);min-height:72px}
.navbar-brand,.navbar-title{font-family:Georgia,serif!important;color:#fff!important;letter-spacing:.3px}
.navbar .nav-link{color:#d1d5db!important;font-size:.9rem;font-weight:500}
.navbar .nav-link:hover,.navbar .nav-link.active{color:var(--gold)!important}
.dropdown-menu{border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:var(--sh-lg)}
.dropdown-item:hover{background:rgba(197,160,89,.12);color:var(--navy)}
.nav-footer{background:var(--navy)!important;border-top:1px solid rgba(197,160,89,.25);color:#9ca3af;font-size:.8rem;padding:2rem 1rem}
.nav-footer a{color:#e5e7eb}.nav-footer a:hover{color:var(--gold)}

main.content{padding-top:2rem}

/* Hero */
.hero-card{position:relative;overflow:hidden;background:var(--navy);color:#fff;border-radius:var(--r-xl);
  padding:2.5rem;margin-bottom:2.5rem;box-shadow:var(--sh-lg);border:1px solid rgba(197,160,89,.2)}
.hero-card::after{content:"";position:absolute;right:-80px;bottom:-80px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(197,160,89,.18),transparent 70%);pointer-events:none}
.hero-card h1{color:#fff!important;font-size:2.2rem;line-height:1.2;margin:0 0 1rem;max-width:820px}
.hero-card p{color:#d1d5db;max-width:820px;font-size:1.02rem;line-height:1.7}
.hero-card strong{color:var(--gold-l)}
.hero-badge{display:inline-block;background:rgba(197,160,89,.2);color:var(--gold);border:1px solid rgba(197,160,89,.35);
  padding:.25rem .8rem;border-radius:999px;font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;margin-bottom:1rem}
.hero-badge p{margin:0;color:var(--gold)!important;font-size:.7rem}

.hero-stats{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}
.hero-stats .stat{background:rgba(255,255,255,.06);border:1px solid rgba(197,160,89,.3);border-radius:var(--r-lg);padding:.7rem 1.1rem}
.hero-stats .stat p{margin:0;color:#d1d5db;font-size:.75rem}
.hero-stats .stat strong{display:block;color:var(--gold);font-family:Georgia,serif;font-size:1.35rem}

/* Section titles */
main h2{font-size:1.6rem;margin-top:2.5rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
main h2.anchored::before{content:"";display:inline-block;width:4px;height:1.1em;background:var(--gold);border-radius:2px;margin-right:.6rem;vertical-align:-3px}
hr{border-color:var(--border);opacity:1;margin:2.5rem 0}

/* Tabsets */
.panel-tabset{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:1.5rem 1.75rem;box-shadow:var(--sh-sm);margin:1.5rem 0}
.panel-tabset .nav-tabs{border-bottom:1px solid var(--border);gap:1.25rem}
.panel-tabset .nav-tabs .nav-link{border:none;background:none;color:var(--muted);padding:.5rem 0;font-weight:500;font-size:.9rem}
.panel-tabset .nav-tabs .nav-link.active{color:var(--navy);font-weight:600;border-bottom:2px solid var(--gold)}
.panel-tabset .tab-content{border:none;padding:1.25rem 0 0}
.panel-tabset ul li::marker{color:var(--gold)}

/* Tables */
table.table,main table{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);border:1px solid var(--border);font-size:.88rem}
main table thead th{background:var(--navy)!important;color:#fff!important;font-family:Georgia,serif;font-weight:600;border:none;padding:.85rem 1rem}
main table td{padding:.8rem 1rem;border-color:var(--border)}
main table tbody tr:nth-child(even){background:var(--cream)}
caption,.table-caption{color:var(--muted);font-size:.8rem}

/* Cards / simulator container */
.sim-container{position:relative;background:#fff;border:1px solid rgba(197,160,89,.4);border-radius:var(--r-xl);
  padding:1.75rem;box-shadow:var(--sh-lg);margin-bottom:1.5rem;height:calc(100% - 1.5rem)}
.sim-container h3{margin-top:0;font-size:1.25rem}
.sim-sidebar{background:rgba(251,249,245,.7);border:1px solid rgba(197,160,89,.25);border-radius:var(--r-lg);padding:1.25rem}
.sim-sidebar h3,.sim-results h3{font-size:1.1rem;margin:0 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}
.btn-primary{border-radius:.4rem;padding:.6rem 1.2rem;font-size:.85rem;box-shadow:var(--sh-sm);transition:transform .15s,box-shadow .15s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--sh-lg)}

/* Metrics */
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;margin:.5rem 0 1rem}
.metric-card{background:var(--cream);border:1px solid rgba(197,160,89,.3);border-radius:var(--r-lg);padding:.9rem 1rem}
.metric-card h5{font-family:"Inter",sans-serif!important;font-size:.65rem!important;text-transform:uppercase;letter-spacing:.1em;
  color:var(--gold-d)!important;font-weight:700;margin:0 0 .3rem}
.metric-card .val p,.metric-card .val{font-family:Georgia,serif;font-size:1.3rem;font-weight:700;color:var(--navy);margin:0}
.metric-grid>.metric-card:first-child{background:var(--navy);border-color:var(--navy)}
.metric-grid>.metric-card:first-child h5{color:var(--gold)!important}
.metric-grid>.metric-card:first-child .val,.metric-grid>.metric-card:first-child .val p{color:#fff}
.metric-grid>.metric-card:nth-child(2){background:#ecfdf5;border-color:#a7f3d0}
.metric-grid>.metric-card:nth-child(2) h5{color:#047857!important}
.metric-grid>.metric-card:nth-child(2) .val,.metric-grid>.metric-card:nth-child(2) .val p{color:#047857}

/* ObservableJS inputs — colonne de paramètres */
.sim-sidebar .cell,.sim-sidebar .cell-output-display{margin:0!important;padding:0!important;border:none!important;background:none!important}
.sim-sidebar form{display:block!important;width:100%!important;max-width:none!important;margin:0 0 1.15rem!important;
  padding:0!important;background:none!important;border:none!important;box-shadow:none!important;font:inherit}
.sim-sidebar form>label{display:block!important;width:auto!important;max-width:none!important;padding:0!important;
  margin:0 0 .4rem!important;font-size:.8rem;font-weight:600;color:var(--navy);white-space:normal;overflow:visible;text-indent:0}
.sim-sidebar form>div{display:flex!important;align-items:center;gap:.75rem;width:100%!important;max-width:none!important;
  background:none!important;border:none!important;margin:0!important;padding:0!important}
/* Curseur */
.sim-sidebar form input[type=range]{order:1;flex:1 1 auto;width:auto!important;min-width:0;height:6px;margin:0;padding:0;
  -webkit-appearance:none;appearance:none;background:#e5e0d4;border:none;border-radius:999px;accent-color:var(--gold);cursor:pointer}
.sim-sidebar form input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--gold);border:3px solid #fff;box-shadow:0 1px 4px rgba(18,34,56,.35)}
.sim-sidebar form input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--gold);
  border:3px solid #fff;box-shadow:0 1px 4px rgba(18,34,56,.35)}
.sim-sidebar form input[type=range]::-moz-range-progress{background:var(--gold);height:6px;border-radius:999px}
/* Champ numérique */
.sim-sidebar form input[type=number]{order:2;flex:0 0 6.5rem;width:6.5rem!important;height:2rem;padding:.2rem .5rem;
  font-size:.85rem;font-weight:600;color:var(--navy);text-align:right;background:#fff;border:1px solid #d1d5db;border-radius:.4rem}
.sim-sidebar form input[type=number]:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,160,89,.2)}
/* Boutons radio en pastilles */
.sim-sidebar form>div:has(input[type=radio]){flex-wrap:wrap;gap:.5rem}
.sim-sidebar form>div>label:has(input[type=radio]){display:inline-flex!important;align-items:center;gap:.4rem;width:auto!important;
  margin:0!important;padding:.4rem .8rem;white-space:nowrap;font-size:.82rem;font-weight:500;line-height:1.2;color:var(--slate);
  background:#fff;border:1px solid #d1d5db;border-radius:999px;cursor:pointer;transition:all .15s}
.sim-sidebar form>div>label:has(input[type=radio]:checked){background:var(--navy);border-color:var(--navy);color:#fff}
.sim-sidebar form input[type=radio]{margin:0;accent-color:var(--gold)}
figure h2{font-size:.9rem!important;border:none!important;font-family:"Inter",sans-serif!important;color:var(--muted)!important}
figure h2::before{display:none!important}

/* Callouts */
.callout{border-radius:var(--r-lg)!important;border:1px solid var(--border)!important;border-left:4px solid var(--gold)!important;background:#f9fafb!important;box-shadow:none}
.callout .callout-header{background:transparent!important}
.callout h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}

/* CTA */
.cta-banner{background:var(--navy);color:#d1d5db;border-radius:var(--r-xl);padding:2.25rem 2.5rem;border:1px solid rgba(197,160,89,.3);box-shadow:var(--sh-lg);margin:2rem 0}
.cta-banner h3{color:#fff!important;font-size:1.6rem;margin-top:0}
.cta-banner strong{color:var(--gold)}
.cta-banner code{background:rgba(255,255,255,.1);color:var(--gold-l);padding:.15rem .4rem;border-radius:.3rem}
.cta-banner ul{list-style:none;padding:0;margin:1rem 0 0}.cta-banner li{margin:.3rem 0}

@media (max-width:768px){.hero-card{padding:1.75rem}.hero-card h1{font-size:1.6rem}}

/* Simulateur Lombard : bilan du portage */
.portage-box{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;border-radius:var(--r-lg);margin:.25rem 0 .75rem;border:1px solid}
.portage-box.pos{background:#eff6ff;border-color:#bfdbfe}.portage-box.neg{background:#fef2f2;border-color:#fecaca}
.pb-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--navy)}
.pb-sub{font-size:.8rem;color:var(--muted);margin-top:.15rem}
.pb-val{font-family:Georgia,serif;font-size:1.6rem;font-weight:700;white-space:nowrap}
.portage-box.pos .pb-val{color:#1d4ed8}.portage-box.neg .pb-val{color:#b91c1c}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1rem}
.cmp{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:.9rem 1rem}
.cmp.best{background:var(--cream);border:2px solid var(--gold)}
.cmp-h{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.cmp.best .cmp-h{color:var(--gold-d)}
.cmp-v{font-family:Georgia,serif;font-size:1.35rem;font-weight:700;color:var(--navy);margin-top:.2rem}
.cmp-s{font-size:.75rem;color:var(--muted)}
@media (max-width:600px){.compare-grid{grid-template-columns:1fr}}