/* Page Soins énergétiques. Fichier à part : le CSS du thème est compilé par Vite. */

.page-template-page-soins-energetiques section:first-of-type > div:first-child { padding-bottom: 2.5rem; }

.soins-table { width: 100%; border-collapse: collapse; color: var(--color-primary); font-size: var(--text-base); }
.soins-table th, .soins-table td { text-align: left; vertical-align: top; padding: 1.25rem 2rem 1.25rem 0; border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent); line-height: 1.5; }
.soins-table td:last-child, .soins-table th:last-child { padding-right: 0; }
.soins-table thead th { text-transform: uppercase; font-size: .85rem; letter-spacing: .04em; font-weight: 700; border-bottom: 1px solid var(--color-primary); padding-block: 0 .85rem; }
.soins-table tbody th { font-weight: 700; width: 26%; }
.soins-table tbody td { font-weight: 500; }
.soins-table tbody tr:last-child > * { border-bottom: 0; }
.soins-table--steps tbody td:last-child { font-weight: 300; }
.soins-table--infos tbody th { width: 40%; }
.soins-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.soins-note { margin-top: 2rem; text-align: center; font-style: italic; }
.soins-wrap { width: 100%; max-width: 1180px; margin-inline: auto; }
.soins-section { padding-block: 7%; padding-inline: 7%; }
.soins-a-completer { display: inline-block; padding: .1rem .7rem; border-radius: 999px; border: 1px dashed var(--color-primary); font-size: .85rem; font-weight: 500; }
.soins-divider { margin-block: 2rem; color: var(--color-primary); opacity: .25; }
.soins-col > * + * { margin-top: 1.25rem; }

@media (max-width: 767px) {
  .soins-section { padding-block: 3.5rem; padding-inline: 5%; }
  .soins-table:not(.soins-table--infos) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .soins-table:not(.soins-table--infos), .soins-table:not(.soins-table--infos) tbody, .soins-table:not(.soins-table--infos) tr, .soins-table:not(.soins-table--infos) th, .soins-table:not(.soins-table--infos) td { display: block; width: 100%; }
  .soins-table:not(.soins-table--infos) tbody tr { padding-block: 1.25rem; border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent); }
  .soins-table:not(.soins-table--infos) tbody tr:first-child { padding-top: 0; }
  .soins-table:not(.soins-table--infos) tbody tr:last-child { border-bottom: 0; padding-bottom: 0; }
  .soins-table:not(.soins-table--infos) tbody th, .soins-table:not(.soins-table--infos) tbody td { border: 0; padding: 0; }
  .soins-table:not(.soins-table--infos) tbody th { font-size: 1.05rem; text-transform: uppercase; margin-bottom: .75rem; }
  .soins-table:not(.soins-table--infos) tbody td { margin-top: .75rem; }
  .soins-table:not(.soins-table--infos) tbody td::before { content: attr(data-label); display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .7; margin-bottom: .15rem; }
  .soins-table--infos th, .soins-table--infos td { padding-block: 1rem; }
}