/* Fare calculator (tarifs.html) — builds on the tokens in styles.css */

.fare-section{padding:10px 0 50px;}
.fare-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px; align-items:start;}

.fare-card,
.fare-result{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px; box-shadow:var(--shadow-soft);
}

.fare-field{margin-bottom:16px;}
.fare-field label{display:block; font-size:12px; font-weight:600; color:var(--ink-dim); margin:0 0 6px;}
.fare-combo{position:relative;}
.fare-combo input{
  width:100%; box-sizing:border-box; font:inherit; font-size:15px; color:var(--ink);
  padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:var(--paper);
}
.fare-combo input:focus{outline:none; border-color:var(--nordique-blue); box-shadow:0 0 0 3px rgba(0,123,185,.15); background:#fff;}
.fare-combo input.invalid{border-color:var(--danger);}

.fare-suggestions{
  position:absolute; z-index:20; left:0; right:0; top:calc(100% + 6px);
  margin:0; padding:6px; list-style:none; background:#fff;
  border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-soft);
  max-height:280px; overflow-y:auto;
}
.fare-suggestion{padding:10px 12px; border-radius:8px; font-size:14px; color:var(--ink); cursor:pointer;}
.fare-suggestion:hover,
.fare-suggestion.active{background:var(--paper-alt);}
.fare-suggestion-empty{padding:10px 12px; font-size:14px; color:var(--ink-faint);}

.fare-submit{width:100%; margin-top:6px; border:0; cursor:pointer; font:inherit; font-weight:700;}
.fare-submit:disabled{opacity:.7; cursor:progress;}
.fare-error{margin:14px 0 0; padding:10px 12px; border-radius:10px; font-size:14px; color:var(--danger); background:rgba(217,72,59,.08);}

.fare-muted{color:var(--ink-dim); font-size:13.5px;}
.fare-empty{text-align:center; padding:40px 10px;}
.fare-empty p:first-child{font-weight:700; color:var(--ink); margin-bottom:6px;}

.fare-main{text-align:center; padding-bottom:18px; border-bottom:1px solid var(--line);}
.fare-label{font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--nordique-blue); margin:0 0 4px;}
.fare-price{font-size:46px; font-weight:800; line-height:1.1; margin:0 0 4px; color:var(--ink); font-variant-numeric:tabular-nums;}

.fare-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0; text-align:center;}
.fare-stats dt{font-size:12px; color:var(--ink-faint); margin-bottom:2px;}
.fare-stats dd{margin:0; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;}

.fare-others-title{font-size:14px; margin:0 0 8px;}
.fare-others{list-style:none; margin:0 0 14px; padding:0;}
.fare-others li{display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px;}
.fare-others li:last-child{border-bottom:0;}
.fare-others strong{font-variant-numeric:tabular-nums; white-space:nowrap;}

.fare-disclaimer{margin:0 0 16px;}
.fare-actions{display:flex; gap:10px; flex-wrap:wrap;}
.fare-actions .btn{flex:1 1 auto;}
.fare-btn-ghost{background:var(--paper-alt); color:var(--ink);}

.fare-rates{padding:10px 0 70px;}
.fare-rates h2{margin-bottom:6px;}
.fare-rates-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:20px 0 14px;}
.fare-rate-card{background:var(--paper-alt); border-radius:var(--radius-md); padding:20px 22px;}
.fare-rate-card h3{font-size:15px; margin:0 0 10px;}
.fare-rate-card ul{list-style:none; margin:0; padding:0;}
.fare-rate-card li{display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:14px;}
.fare-rate-card strong{font-variant-numeric:tabular-nums;}
.fare-footnote{max-width:720px;}

@media (max-width: 820px){
  .fare-grid,
  .fare-rates-grid{grid-template-columns:1fr;}
  .fare-price{font-size:40px;}
}