/* ==========================================================================
   Prestations (hub /prestations/) — composition propre à la page
   Composants : main.css (mosaic, tile, data-table, facts).
   ========================================================================== */

/* ---- Six familles : 3 × 2 cartes (carrousel sous 861 px) ----------------- */
.hub-tiles { row-gap: clamp(40px, 4.4vw, 64px); }
.hub-tiles .tile__text { max-width: 40ch; }
@media (min-width: 861px) and (max-width: 1100px) {
  .hub-tiles > .tile { grid-column: span 6; }
}

/* ---- Orientation par besoin ---------------------------------------------- */
.hub-needs a { font-weight: 600; }
.hub-needs td.hub-needs__price { font-weight: 600; }
.hub-needs td.hub-needs__go a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; border-bottom: 1px solid var(--line-2); }
.hub-needs td.hub-needs__go a:hover { border-bottom-color: currentColor; }
.hub-needs td.hub-needs__go .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.hub-needs td.hub-needs__go a:hover .icon { transform: translateX(4px); }
@media (min-width: 641px) {
  .hub-needs tbody th { width: 38%; }
  .hub-needs td.hub-needs__price,
  .hub-needs td.hub-needs__go { white-space: nowrap; }
  .hub-needs tbody td { vertical-align: middle; }
  .hub-needs tbody th { vertical-align: middle; }
  .hub-needs td.hub-needs__go { padding-top: 6px; padding-bottom: 6px; }
}
/* Téléphone : chaque besoin tient en trois lignes (besoin, prestation + tarif, estimer) */
@media (max-width: 640px) {
  .hub-needs tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; }
  .hub-needs tbody th { grid-column: 1 / -1; }
  .hub-needs td { display: block; margin-top: 10px; }
  .hub-needs td[data-label]::before { content: none; }
  .hub-needs td.hub-needs__price { grid-column: 2; grid-row: 2; text-align: right; }
  .hub-needs td.hub-needs__go { grid-column: 1 / -1; margin-top: 2px; }
  .hub-needs td.hub-needs__go a { min-height: 44px; }
}
.hub-terms { margin-top: clamp(28px, 3vw, 40px); }
.hub-more { margin-top: clamp(24px, 2.6vw, 32px); font-size: var(--fs-sm); color: var(--fg-2); }
.hub-more a { color: var(--fg); font-weight: 500; }