/* Petites variantes pour que ça fitte parfait avec le landing */

.pill--tiny{
  padding: 6px 10px;
  font-size: 12px;
}

/* Hero calculatrice: évite une carte trop large sur desktop */
.calculatorHero{
  grid-template-columns: 1.15fr .85fr;
}

/* Inputs / labels */
.fieldWrap{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.fieldWrap--qty{
  grid-column: span 2;
  max-width: 320px;
}

.calcLabel{
  font-size: 14px;
  color: var(--muted);
  font-weight: 700;
}

.calcInput{
  width: 100%;
  padding: 14px 14px;
  font-size: 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  outline: none;
  background: rgba(255,255,255,.03);
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.calcInput:focus{
  border-color: rgba(225,6,18,.55);
  box-shadow: 0 0 0 5px rgba(225,6,18,.12);
  background: rgba(255,255,255,.05);
}

/* Panel de calculatrice: un peu plus "app" */
.calculatorPanel{
  padding: 20px;
}

/* Résultats: on reprend ton design mais en version dark */
.result{
  margin-top: 18px;
  line-height: 1.65;
  font-size: 16px;
}

.result .summary{
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
}

.result .total{
  margin-top: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(225,6,18,.35);
  background: rgba(225,6,18,.12);
  font-size: 18px;
  font-weight: 800;
  display:flex;
  justify-content: space-between;
  align-items: baseline;
}

.result .total span:last-child{
  color: #ffd3d6;
}

/* Suggestions */
.suggestions{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.suggestions-title{
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 10px;
}

.suggestion-list{
  display:grid;
  gap:10px;
  max-width: 560px;
}

.suggestion-btn{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor:pointer;
  font-size: 15px;
  transition: border-color .15s ease, transform .08s ease, background .15s ease;
}

.suggestion-btn:hover{
  border-color: rgba(225,6,18,.35);
  background: rgba(255,255,255,.06);
}

.suggestion-btn:active{
  transform: translateY(1px);
}

.muted{
  opacity: .75;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.calcNote{
  margin-top: 14px;
}

/* Mobile */
@media (max-width: 900px){
  .calculatorHero{
    grid-template-columns: 1fr;
  }
  .calculatorGrid{
    grid-template-columns: 1fr;
  }
  .fieldWrap--qty{
    grid-column: auto;
    max-width: none;
  }
}