/* ===================================================
   FINANCEMENT.CSS — Simulateur Franfinance Giovanni Riboli
   Extrait de financement.html (chantier CSS harmonisation)
   =================================================== */

/* Hero */
.fin-hero .eyebrow {
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: #c7a260; font-weight: 600; margin-bottom: 16px;
}
.fin-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 46px; color: #fff; margin: 0 0 16px; line-height: 1.2;
}
.fin-hero p {
  color: #ccd8e0; font-size: 17px; margin: 0 auto;
  line-height: 1.7;
}

/* Section principale */
.fin-section {
  background: #f9fafb;
  padding: 60px 40px;
}
.fin-container {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

/* Formulaire */
.fin-form-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px;
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
  border-top: 4px solid #c7a260;
}
.fin-form-card h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px; color: #1a2d3e; margin: 0 0 28px;
}
.form-group { margin-bottom: 24px; }
.form-group label {
  display: block; font-size: 13px; font-weight: 600;
  color: #374151; margin-bottom: 8px; letter-spacing: .3px;
}
.form-group .hint {
  font-size: 12px; color: #9ca3af; font-weight: 400; margin-left: 4px;
}
.input-wrap { position: relative; }
.input-wrap input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, #c7a260 var(--pct, 0%), #e5e7eb var(--pct, 0%));
  outline: none;
  cursor: pointer;
}
.input-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #c7a260;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(199,162,96,.4);
  cursor: pointer;
}
.range-labels {
  display: flex; justify-content: space-between;
  font-size: 12px; color: #9ca3af; margin-top: 6px;
}
.range-value {
  text-align: center;
  font-size: 28px; font-weight: 700; color: #1a2d3e;
  font-family: 'Cormorant Garamond', serif;
  margin-bottom: 8px;
}
.range-value span { font-size: 16px; font-weight: 400; color: #6b7280; }

.duree-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.duree-btn {
  padding: 10px 4px; border: 2px solid #e5e7eb;
  border-radius: 8px; background: #fff;
  font-size: 13px; font-weight: 600; color: #374151;
  cursor: pointer; text-align: center;
  font-family: 'Inter', sans-serif;
  transition: all .2s;
}
.duree-btn:hover { border-color: #c7a260; color: #c7a260; }
.duree-btn.active { background: #c7a260; border-color: #c7a260; color: #1a2d3e; }
.duree-btn small { display: block; font-size: 10px; font-weight: 400; color: inherit; opacity: .8; }

/* Résultat */
.fin-result-card {
  background: #1a2d3e;
  border-radius: 16px;
  padding: 36px;
  color: #fff;
  position: sticky;
  top: 100px;
}
.fin-result-card h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; color: #c7a260; margin: 0 0 28px;
}
.result-main {
  text-align: center;
  background: rgba(199,162,96,.1);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  border: 1px solid rgba(199,162,96,.2);
}
.result-mensualite {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px; font-weight: 600; color: #c7a260; line-height: 1;
}
.result-mensualite small {
  font-size: 18px; font-weight: 400; color: #8aafc8;
}
.result-label { font-size: 13px; color: #8aafc8; margin-top: 6px; }
.result-details {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 28px;
}
.result-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 14px;
}
.result-row:last-child { border-bottom: none; }
.result-row .label { color: #8aafc8; }
.result-row .value { font-weight: 600; color: #fff; }
.result-row .value.accent { color: #c7a260; }
.taeg-badge {
  background: rgba(199,162,96,.15);
  border: 1px solid rgba(199,162,96,.3);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: #c7a260;
  margin-bottom: 20px;
  line-height: 1.6;
}
.btn-devis-fin {
  display: block; width: 100%;
  background: #c7a260; color: #1a2d3e;
  padding: 15px; border-radius: 8px;
  text-align: center; text-decoration: none;
  font-weight: 700; font-size: 16px;
  font-family: 'Inter', sans-serif;
  transition: opacity .2s;
}
.btn-devis-fin:hover { opacity: .9; }

/* Mentions légales */
.fin-legal {
  background: #fff;
  padding: 40px;
  border-top: 1px solid #e5e7eb;
}
.fin-legal-inner { max-width: 900px; margin: 0 auto; }
.fin-legal h3 { font-size: 14px; font-weight: 600; color: #374151; margin: 0 0 12px; }
.fin-legal p { font-size: 12px; color: #9ca3af; line-height: 1.7; margin: 0 0 8px; }

/* Section avantages */
.fin-avantages {
  background: #1a2d3e;
  padding: 60px 40px;
}
.fin-avantages-inner {
  max-width: 900px; margin: 0 auto; text-align: center;
}
.fin-avantages h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px; color: #fff; margin: 0 0 8px;
}
.fin-avantages .sub { color: #8aafc8; font-size: 15px; margin-bottom: 40px; }
.avantages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.avantage-card {
  background: rgba(255,255,255,.05);
  border-radius: 12px; padding: 24px;
  border: 1px solid rgba(199,162,96,.15);
}
.avantage-card .icon { font-size: 32px; margin-bottom: 12px; }
.avantage-card h3 { font-size: 15px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.avantage-card p { font-size: 13px; color: #8aafc8; margin: 0; line-height: 1.6; }

/* Capture email financement */
.capture-form {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.capture-form h3 {
  font-size: 13px; font-weight: 600; color: #ccd8e0;
  margin-bottom: 12px; text-align: center;
}
.capture-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 8px;
}
.capture-row input {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px; padding: 10px 12px;
  color: #fff; font-size: 13px;
  font-family: 'Inter', sans-serif;
  outline: none; min-height: 40px; width: 100%;
}
.capture-row input::placeholder { color: rgba(255,255,255,.35); }
.capture-row input:focus { border-color: #c7a260; }
.btn-capture {
  background: rgba(199,162,96,.15); border: 1px solid rgba(199,162,96,.4);
  color: #c7a260; padding: 10px 16px; border-radius: 6px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: 'Inter', sans-serif; white-space: nowrap;
  transition: all .2s; min-height: 40px;
  grid-column: 1 / -1; width: 100%;
}
.btn-capture:hover { background: #c7a260; color: #1a2d3e; }
.capture-success {
  background: rgba(16,185,129,.15); border: 1px solid rgba(16,185,129,.3);
  border-radius: 8px; padding: 12px; text-align: center;
  color: #10b981; font-size: 13px; display: none; margin-top: 8px;
}
.capture-note { font-size: 11px; color: rgba(255,255,255,.3); text-align: center; }

/* Responsive */
@media (max-width: 768px) {
  .fin-hero h1 { font-size: 32px; }
  .fin-section { padding: 40px 20px; }
  .fin-container { grid-template-columns: 1fr; }
  .fin-result-card { position: static; }
  .fin-form-card, .fin-result-card { padding: 24px; }
  .duree-grid { grid-template-columns: repeat(4, 1fr); }
  .avantages-grid { grid-template-columns: 1fr; }
  .fin-avantages { padding: 40px 20px; }
  .fin-legal { padding: 30px 20px; }
}