/* ============================================================
   tarifs.css — Page /tarifs (complète soins.css, à charger APRÈS)
   Aucun style inline : compatible CSP (style-src 'self')
   ============================================================ */

.tarifs-preambule .section-inner { text-align: center; }
.tarifs-preambule p { color: var(--text-medium); max-width: 720px; margin: 0 auto 1.25rem; }
.tarifs-preambule a { color: var(--rose); text-decoration: underline; }

.tarifs-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.tarifs-toc a {
  display: inline-block;
  padding: .5rem 1.1rem;
  border-radius: 999px;
  background: var(--rose-pale);
  color: var(--rose-dark);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition);
}
.tarifs-toc a:hover { background: var(--rose-muted); }

.tarifs-groupe h3 {
  margin: 2.25rem 0 .75rem;
  font-size: 1.25rem;
  color: var(--rose-dark);
}
.tarifs-groupe h4 {
  margin: 1.5rem 0 .5rem;
  font-size: 1.05rem;
  color: var(--primary-green);
}
.tarifs-intro-groupe { color: var(--text-medium); max-width: 760px; margin: 0 auto 1rem; text-align: center; }

.tarifs-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 1rem;
}
.tarifs-table thead th {
  background: var(--rose-pale);
  color: var(--rose-dark);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: left;
  padding: .7rem 1rem;
}
.tarifs-table tbody th,
.tarifs-table tbody td {
  padding: .85rem 1rem;
  border-top: 1px solid var(--rose-muted);
  vertical-align: top;
  text-align: left;
  font-weight: 400;
}
.tarifs-table tbody th { color: var(--text-dark); font-weight: 500; }
.tarifs-table tbody tr:hover { background: var(--bg-cream); }
.tarifs-table .tarif-note { display: block; margin-top: .2rem; font-size: .85rem; color: var(--text-light); font-weight: 400; }
.tarifs-table .tarif-desc { display: block; margin-top: .3rem; font-size: .88rem; line-height: 1.45; color: var(--text-medium); font-weight: 400; font-style: italic; }
.tarifs-table .tarif-duree { white-space: nowrap; color: var(--text-medium); }
.tarifs-table .tarif-prix { white-space: nowrap; font-weight: 700; color: var(--rose-dark); text-align: right; }
.tarifs-table thead th:last-child { text-align: right; }

@media (max-width: 480px) {
  .tarifs-table thead th,
  .tarifs-table tbody th,
  .tarifs-table tbody td { padding: .7rem .6rem; font-size: .92rem; }
}

.tarif-details-btn {
  display: inline-block;
  margin-top: .35rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--rose-dark);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.tarif-details-btn:hover { color: var(--rose); }

.tarif-long {
  display: none;
  margin-top: .5rem;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text-medium);
}
.tarif-long.open { display: block; }