.offerteWrap{
  /* Account for the fixed site header (main.css) */
  padding-top: calc(var(--header-height) + var(--safe-top, 0px));
}

.offerteCard{
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(12px, 2.5vw, 18px);
}

.offerteHeader{ margin-bottom: 10px; }

.offerteTitle{
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.2;
  color: var(--heading);
}

.offerteLead{
  margin: 6px 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.offerteSummary{
  margin: 10px 0 12px;
  padding: 10px;
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--soft);
}

.offerteSummaryTitle{
  font-weight: 700;
  font-size: var(--text-sm);
  margin-bottom: 6px;
}

.offerteSummaryPre{
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.offerteForm{ margin-top: 6px; }

.offerteGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* Use grid gap instead of default .form-group margins */
.offerteGrid .form-group{
  margin-bottom: 0;
}

.offerteGrid label{
  font-size: var(--text-xs);
  margin-bottom: 2px;
}

.offerteGrid input,
.offerteGrid textarea{
  font-size: var(--text-sm);
  padding: 8px 10px;
}

@media (min-width: 769px){
  .offerteGrid{ grid-template-columns: 1fr 1fr; }
  .field--full{ grid-column: 1 / -1; }
}

.field--check{ margin-top: 2px; }

.checkRow{
  display:flex;
  gap: 8px;
  align-items:flex-start;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.checkRow input{ margin-top: 2px; }

.offerteActions{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.offerteActions .btn{
  font-size: var(--text-sm);
  padding: 10px 16px;
}

.offerteBack{
  text-align:center;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-sm);
}

.offerteBack:hover{ text-decoration: underline; }

.offerteStatus{
  margin-top: 8px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  min-height: 1.2em;
}

.offerteHint{
  margin: 8px 0 0;
  font-size: 10px;
  color: var(--text-tertiary);
}