/* ── Simulateur Loyer Locatif — Layout Paysage 3 colonnes ───────────────────── */

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

.sl-wrapper {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color: #1a2a22;
  background: #f0f4f2;
  padding: 32px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Header */
.sl-header { text-align: center; margin-bottom: 28px; width: 100%; max-width: 1100px; }
.sl-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: #27856a; margin-bottom: 10px; }
.sl-header h2 { font-size: 28px; font-weight: 700; color: #3d695e; line-height: 1.25; margin: 0 0 10px; }
.sl-header p  { font-size: 15px; color: #5a7a6e; max-width: 560px; margin: 0 auto; line-height: 1.6; }

/* 3-Column Layout */
.sl-columns {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1.2fr;
  gap: 20px;
  width: 100%;
  max-width: 1100px;
  align-items: stretch;
}

/* Card base */
.sl-card { background: #fdf5e3; border-radius: 10px; box-shadow: 0 2px 16px rgba(61,105,94,0.10); padding: 28px; display: flex; flex-direction: column; }
.sl-card-title { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #27856a; margin-bottom: 16px; }

/* Apartment selector */
.sl-apt-grid { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.sl-apt-btn  { border: 2px solid #c8dbd7; border-radius: 10px; padding: 14px 16px; text-align: left; cursor: pointer; background: #f5ede0; transition: all .2s ease; user-select: none; display: flex; flex-direction: column; gap: 3px; }
.sl-apt-btn:hover  { border-color: #27856a; background: #A9C66B; }
.sl-apt-btn.active { border-color: #3d695e; background: #3d695e; color: white; }
.sl-apt-name    { font-size: 14px; font-weight: 700; display: block; }
.sl-apt-surface { font-size: 12px; font-weight: 600; color: #27856a; }
.sl-apt-btn.active .sl-apt-surface { color: rgba(253,245,227,0.85); }
.sl-apt-range   { font-size: 11px; opacity: .6; }
.sl-apt-btn.active .sl-apt-range { opacity: .75; }

/* Season rows */
.sl-season-row { margin-bottom: 22px; }
.sl-season-row:last-of-type { margin-bottom: 0; }
.sl-season-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.sl-season-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 2px 8px; border-radius: 20px; }
.sl-badge-basse   { background: #A9C66B; color: #2a4a0a; }
.sl-badge-moyenne { background: #68A56A; color: #fdf5e3; }
.sl-badge-haute   { background: #27856a; color: #fdf5e3; }
.sl-season-value  { font-size: 18px; font-weight: 700; color: #3d695e; min-width: 80px; text-align: right; }
.sl-season-value span { font-size: 11px; font-weight: 500; color: #7a9a90; margin-left: 3px; }

/* Slider */
.sl-slider-track { position: relative; height: 6px; border-radius: 3px; background: #c8dbd7; margin-bottom: 6px; }
.sl-slider-fill  { position: absolute; height: 100%; border-radius: 3px; top: 0; left: 0; pointer-events: none; }
.sl-fill-basse   { background: linear-gradient(90deg,#27856a,#4aab8a); }
.sl-fill-moyenne { background: linear-gradient(90deg,#3d695e,#5a8f82); }
.sl-fill-haute   { background: linear-gradient(90deg,#2a5c52,#3d695e); }
.sl-wrapper input[type="range"] { -webkit-appearance:none; appearance:none; width:100%; height:6px; background:transparent; position:relative; cursor:pointer; outline:none; }
.sl-wrapper input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#fdf5e3; border:3px solid #3d695e; box-shadow:0 2px 6px rgba(61,105,94,.3); cursor:pointer; transition:transform .15s ease; }
.sl-wrapper input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.15); }
.sl-wrapper input[type="range"]::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:#fdf5e3; border:3px solid #3d695e; box-shadow:0 2px 6px rgba(61,105,94,.3); cursor:pointer; }
.sl-slider-wrapper { position: relative; height: 6px; }
.sl-slider-wrapper input[type="range"] { position:absolute; top:-7px; left:0; z-index:2; }
.sl-season-max { font-size:11px; color:#7a9a90; text-align:right; margin-top:4px; }

/* Points bar */
.sl-pts-block  { margin-top: 22px; padding-top: 20px; border-top: 1px solid #c8dbd7; }
.sl-pts-header { display:flex; justify-content:space-between; font-size:13px; color:#5a7a6e; margin-bottom:8px; }
.sl-pts-header strong { color:#3d695e; }
.sl-pts-outer  { height:10px; background:#c8dbd7; border-radius:5px; overflow:hidden; }
.sl-pts-inner  { height:100%; border-radius:5px; background:linear-gradient(90deg,#3d695e,#27856a); transition:width .3s ease; }
.sl-pts-inner.overflow { background:linear-gradient(90deg,#c0392b,#e74c3c); }
.sl-pts-warning { font-size:12px; color:#c0392b; margin-top:6px; display:none; }
.sl-pts-warning.visible { display:block; }

/* Result column */
.sl-result-col { display: flex; flex-direction: column; gap: 16px; }
.sl-result-card { background: linear-gradient(135deg,#3d695e 0%,#27856a 100%); border-radius: 10px; border: 3px solid #FDF5E3; padding: 30px 28px; text-align: center; box-shadow: 0 4px 24px rgba(39,133,106,.35); position: relative; overflow: hidden; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.sl-result-card::before { content:''; position:absolute; top:-40px; right:-40px; width:160px; height:160px; background:rgba(253,245,227,.10); border-radius:50%; }
.sl-result-card::after  { content:''; position:absolute; bottom:-60px; left:-30px; width:200px; height:200px; background:rgba(255,255,255,.05); border-radius:50%; }
.sl-result-eyebrow { font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:#fdf5e3; opacity:.75; position:relative; z-index:1; }
.sl-result-amount  { font-size:52px; font-weight:800; color:#fdf5e3; line-height:1; transition:opacity .2s; position:relative; z-index:1; }
.sl-result-amount .sl-currency { font-size:30px; margin-right:4px; vertical-align:super; }
.sl-result-unit    { font-size:13px; color:rgba(253,245,227,.60); letter-spacing:1px; position:relative; z-index:1; }
.sl-result-monthly { display:inline-block; background:rgba(253,245,227,.15); border:1px solid rgba(253,245,227,.35); border-radius:10px; padding:6px 18px; font-size:14px; color:#fdf5e3; position:relative; z-index:1; margin:0 auto; }
.sl-result-monthly strong { font-size:16px; }

/* CTA */
.sl-cta-block { background:#fdf5e3; border-radius:10px; box-shadow:0 2px 16px rgba(61,105,94,0.10); padding:22px 28px; text-align:center; }
.sl-cta-btn   { display:block; width:100%; background:#27856a; color:#fdf5e3; font-size:14px; font-weight:700; padding:14px 20px; border-radius:10px; letter-spacing:.5px; transition:background .2s,transform .15s; border:none; cursor:pointer; }
.sl-cta-btn:hover { background:#A9C66B; transform:translateY(-1px); }
.sl-cta-note  { font-size:11px; color:#7a9a90; margin-top:10px; line-height:1.4; }

/* Responsive */
@media (max-width:820px) {
  .sl-columns { grid-template-columns: 1fr; }
}