/* Page Tarifs — mises en page propres à la page. Composants : ds.css. */

.tp-section { padding-block: calc(var(--section-gap) / 2); scroll-margin-top: var(--space-3); }

/* En-tête centré, sans bloc */
.tp-hero { padding-block: var(--space-4) var(--space-3); max-width: 800px; }
.tp-hero p { font-size: var(--text-body-large); }

/* Offre */
.tp-offer, .tp-simulator { gap: var(--space-3); }
.tp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); font-family: var(--font-heading); font-size: var(--text-h1); font-weight: var(--weight-semibold); line-height: var(--leading-heading); color: var(--color-accent-green); }
.tp-price span { font-family: var(--font-body); font-size: var(--text-body-medium); font-weight: var(--weight-medium); }
.tp-tiers { display: flex; flex-direction: column; margin: 0; }
.tp-tiers > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding-block: 12px; border-bottom: 1px solid var(--color-border-default); }
.tp-tiers > div:first-child { border-top: 1px solid var(--color-border-default); }
.tp-tiers dt { font-weight: var(--weight-medium); color: var(--color-text-primary); }
.tp-tiers dd { margin: 0; text-align: right; font-size: var(--text-body-small); }
.tp-offer .btn { align-self: flex-start; }

/* Estimateur */
.tp-count { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tp-count label { font-weight: var(--weight-medium); color: var(--color-text-primary); }
.tp-count small { display: block; margin-top: var(--space-1); font-size: var(--text-body-small); color: var(--color-text-secondary); }
.tp-count .input { width: 110px; text-align: center; font-weight: var(--weight-medium); }
.tp-range-labels { display: flex; justify-content: space-between; font-size: var(--text-body-xsmall); color: var(--color-text-muted); }
.tp-result { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-bg-blue-soft); color: var(--color-text-primary); }
.tp-result-label { font-size: var(--text-body-small); }
.tp-total-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.tp-total { font-family: var(--font-heading); font-size: var(--text-h1); font-weight: var(--weight-semibold); line-height: var(--leading-heading); color: var(--color-accent-blue); }
.tp-period { font-size: var(--text-body-medium); font-weight: var(--weight-medium); }
.tp-breakdown { font-size: var(--text-body-xsmall); }
.tp-result.is-custom { background: var(--color-bg-green-soft); }
.tp-result.is-custom .tp-total { font-size: var(--text-h2); color: var(--color-accent-green); }
.tp-result.is-invalid { background: var(--color-bg-grey-soft); color: var(--color-text-muted); }
.tp-result.is-invalid .tp-total { color: var(--color-text-muted); }
.tp-simulator .btn--text[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.tp-nojs { font-size: var(--text-body-small); color: var(--color-text-muted); }

/* Photo à côté de l'encart « Toutes les fonctionnalités incluses » */
.tp-photo { margin: 0; min-width: 0; }
/* Bandeau photo bas et large (maquette : environ 2,15 fois plus large que haut). */
.tp-photo img { width: 100%; height: auto; aspect-ratio: 345 / 160; object-fit: cover; object-position: center 40%; border-radius: var(--radius-lg); }
@media (max-width: 767px) {
  .tp-photo img { aspect-ratio: 3 / 2; border-radius: var(--radius-md); }
}

/* Fonctionnalités incluses */
.tp-feature { gap: var(--space-3); }
.tp-feature h3 { font-family: var(--font-body); font-size: var(--text-body-medium); font-weight: var(--weight-medium); line-height: var(--leading-body); }
.tp-feature p { font-size: var(--text-body-small); }

/* FAQ : largeur de lecture */
.tp-faq { max-width: 960px; margin-inline: auto; }
.faq__answer .t-strong { font-weight: var(--weight-bold); }

@media (max-width: 767px) {
  .tp-tiers > div { flex-direction: column; gap: var(--space-1); }
  .tp-tiers dd { text-align: left; }
  .tp-count { align-items: flex-start; }
}