/* ==========================================================================
   Tarifs — composition propre à la page (composants : main.css)
   Sommaire collant à gauche (desktop), blocs numérotés à droite.
   ========================================================================== */

/* ---- Sommaire ------------------------------------------------------------
   <details> : replié sous 861 px (composant .disclosure), déplié et collant à
   gauche au-delà (tarifs.js l'ouvre ; sans JS, le résumé reste cliquable). */
.tarifs-toc__list { counter-reset: none; }
.tarifs-toc__list a {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0;
  border-bottom: 1px solid var(--line); font-size: var(--fs-sm); font-weight: 500; color: var(--fg); text-decoration: none;
}
.tarifs-toc__list a:hover { text-decoration: underline; text-underline-offset: .25em; }
.tarifs-toc__list .n { min-width: 1.9em; flex: none; white-space: nowrap; font-size: var(--fs-2xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg-3); }
.tarifs-toc__summary { font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; }
.tarifs-toc__summary .icon { width: 18px; height: 18px; flex: none; }

@media (min-width: 861px) {
  .tarifs-toc { grid-column: 1 / 4; align-self: start; position: sticky; top: calc(var(--header-h) + 24px); }
  .tarifs-body { grid-column: 4 / 13; }
  .tarifs-toc__box > .tarifs-toc__summary { min-height: 0; padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--line-strong); }
  .tarifs-toc__box[open] > .tarifs-toc__summary { cursor: default; border-bottom-color: var(--line-strong); }
  .tarifs-toc__box[open] > .tarifs-toc__summary .icon { display: none; }
}
@media (max-width: 860px) {
  .tarifs-toc { margin-bottom: var(--section-y-sm); }
  .tarifs-toc__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); padding: 4px 16px 8px; border: 1px solid var(--line-strong); border-top: 0; }
  .tarifs-toc__list a { font-size: var(--fs-xs); line-height: 1.25; }
}
@media (max-width: 360px) {
  .tarifs-toc__list { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Blocs --------------------------------------------------------------- */
.tarifs-block + .tarifs-block { margin-top: var(--section-y-sm); }
.tarifs-block .sec-head { margin-bottom: clamp(24px, 3vw, 40px); }
.tarifs-block .sec-head__intro { max-width: 58ch; font-size: var(--fs-body); }
.tarifs-block .link-arrow { display: inline-flex; }

.tarifs-h3 { margin-top: clamp(40px, 5vw, 64px); margin-bottom: 20px; font-size: var(--fs-h4); letter-spacing: -.02em; }

/* Exemple détaillé : calcul pas à pas, puis quatre bureaux d’une tranche à l’autre */
.tarifs-calc { max-width: 760px; border-top: 1px solid var(--line); }
.tarifs-calc li { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.tarifs-calc__k { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); padding-top: .25em; }
.tarifs-calc p { color: var(--fg-2); }
.tarifs-calc strong { color: var(--fg); font-weight: 600; }
@media (max-width: 600px) {
  .tarifs-calc li { grid-template-columns: minmax(0, 1fr); padding: 12px 0; }
}

.tarifs-tiers { margin-top: clamp(36px, 4vw, 56px); }
.tarifs-tiers td > span small { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 400; color: var(--fg-2); }
.tarifs-tiers td:nth-child(2) > span { font-weight: 600; }
.tarifs-tiers td:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.tarifs-cta { margin-top: 24px; }
@media (max-width: 640px) { .tarifs-cta { display: flex; width: 100%; } }

/* Sous 640 px, les petits tableaux de la page (tranches, majorations, options) restent
   des tableaux à colonnes courtes au lieu des cartes génériques de main.css. */
@media (max-width: 640px) {
  .tarifs-compact .data-table { display: table; }
  .tarifs-compact .data-table caption:not(.sr-only) { display: table-caption; }
  .tarifs-compact thead { display: table-header-group; position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .tarifs-compact tbody { display: table-row-group; }
  .tarifs-compact tr, .tarifs-compact tbody tr:first-child { display: table-row; width: auto; padding: 0; border: 0; }
  .tarifs-compact th, .tarifs-compact td { display: table-cell; width: auto; margin: 0; }
  .tarifs-compact thead th { padding: 0 12px 10px 0; border-bottom: 1px solid var(--line-strong); }
  .tarifs-compact tbody th, .tarifs-compact td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
  .tarifs-compact th:last-child, .tarifs-compact td:last-child { padding-right: 0; }
  .tarifs-compact td[data-label]::before { content: none; }
  .tarifs-compact .tarifs-rates thead th:nth-child(1) { width: 62%; }
}

/* Second tableau d’une même rubrique (matériel sous les sols, fins de bail sous les gîtes) */
.tarifs-sub { margin-top: clamp(36px, 4vw, 52px); }

/* Compléments sous un tableau */
.tarifs-extras { margin-top: 20px; }
.tarifs-note { margin-top: 14px; color: var(--fg-2); }
.tarifs-options { margin-top: 36px; }
.tarifs-rates td:last-child { white-space: normal; color: var(--fg); font-weight: 600; }

/* Conditions */
@media (max-width: 600px) {
  .tarifs-terms { grid-template-columns: minmax(0, 1fr); }
  .tarifs-terms > div:nth-child(even) { padding-left: 0; border-left: 0; }
}

/* TVA */
.tarifs-tva { max-width: 62ch; }
.tarifs-tva p + p { margin-top: 14px; }
.tarifs-tva p { color: var(--fg-2); }
.tarifs-tva strong { color: var(--fg); }

/* ---- Tableaux : colonnes alignées d’un tableau à l’autre (desktop) --------- */
@media (min-width: 641px) {
  .tarifs-body .price-table thead th:nth-child(1) { width: 46%; }
  .tarifs-body .price-table thead th:nth-child(2) { width: 20%; }
  .tarifs-rates thead th:nth-child(1) { width: 66%; }
  .tarifs-tiers thead th:nth-child(1) { width: 34%; }
  .tarifs-tiers thead th:nth-child(2) { width: 38%; }
}