/* ============================================================
   Page Les soins
   Extensions locales au systeme partage, mobile d'abord.
   ============================================================ */

/* Hero */

main > .soins-hero.section:first-child {
  min-height: auto;
  overflow: hidden;
  padding-block: var(--section-compacte);
}

.soins-hero .entete-section {
  position: relative;
  z-index: 2;
}

.soins-hero h1 {
  max-width: 13ch;
}

.soins-hero__media {
  min-height: clamp(21rem, 90vw, 31rem);
}

.soins-hero .soins-hero__media::before {
  content: none;
}

.soins-hero .soins-hero__media img {
  height: 100%;
  min-height: inherit;
  aspect-ratio: 4 / 5;
  object-position: 58% center;
}

/* Formules */

.section--claire.soins-formules {
  padding-block: var(--section-compacte) var(--section-normale);
}

.formules-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-3);
}

.formule-carte {
  min-height: 20rem;
  overflow: hidden;
  padding: clamp(1.5rem, 5vw, 2.5rem);
}

.formule-carte h3 {
  margin-bottom: var(--espace-2);
  font-size: clamp(1.75rem, 5vw, 2.4rem);
}

.formule-carte .prix {
  padding-top: var(--espace-4);
  font-size: clamp(4.25rem, 18vw, 6rem);
}

.formule-carte--reference {
  min-height: 23rem;
}

.formules-action {
  justify-content: center;
  margin-top: var(--espace-4);
}

/* Declinaisons du Soin cible */

.zones-grille {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid color-mix(in srgb, var(--creme) 24%, transparent);
}

.zone-carte {
  position: relative;
  padding: var(--espace-4) 0 var(--espace-4) clamp(3.5rem, 14vw, 5rem);
  border-bottom: 1px solid color-mix(in srgb, var(--creme) 18%, transparent);
}

.zone-carte__numero {
  position: absolute;
  top: var(--espace-4);
  left: 0;
  color: var(--accent);
  font-family: var(--titre);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.zone-carte h3 {
  max-width: 18ch;
  margin-bottom: var(--espace-2);
  font-size: clamp(1.45rem, 5vw, 2rem);
}

.zone-carte p {
  max-width: 56ch;
  font-size: 1rem;
}

/* Signature et Prestige */

.soins-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-5);
}

.soin-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-4);
  padding-top: var(--espace-4);
  border-top: 1px solid color-mix(in srgb, var(--creme) 28%, transparent);
}

.soin-detail--signature {
  border-top-color: var(--accent);
}

.soin-detail__entete h3 {
  margin-bottom: var(--espace-2);
  font-size: clamp(2rem, 7vw, 3rem);
}

.soin-detail__prix {
  margin: 0;
  color: var(--accent);
  font-family: var(--titre);
  font-size: clamp(3.5rem, 15vw, 5.5rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.055em;
  font-variant-numeric: tabular-nums;
}

.soin-detail__prix span {
  font-family: var(--texte);
  font-size: 0.28em;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.soin-detail__contenu {
  max-width: 66ch;
}

.soin-detail__essentiel {
  margin-block: var(--espace-3);
  padding: var(--espace-3);
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-family: var(--titre);
  font-size: clamp(1.15rem, 1rem + 0.45vw, 1.4rem);
  line-height: 1.5;
}

/* Choix traditionnel ou aux huiles */

.choix-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-3);
}

.choix-carte {
  position: relative;
  padding: clamp(1.5rem, 5vw, 2.5rem);
  border: 1px solid color-mix(in srgb, var(--encre) 20%, transparent);
  border-radius: calc(var(--rayon) * 2);
  background: color-mix(in srgb, var(--encre) 3%, transparent);
}

.choix-carte__entete {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espace-3);
  align-items: start;
  margin-bottom: var(--espace-3);
}

.choix-carte__entete h3 {
  margin-bottom: var(--espace-1);
  font-size: clamp(1.75rem, 6vw, 2.5rem);
}

.choix-carte__repere {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--accent-rare);
  border-radius: 50%;
  color: var(--accent-rare);
  font-family: var(--titre);
  font-variant-numeric: tabular-nums;
}

.choix-carte p {
  font-size: 1rem;
}

/* Abonnements, presentation verticale sur telephone */

.abonnements-note {
  max-width: 62ch;
  margin-top: var(--espace-4);
}

@media (max-width: 45rem) {
  .tbl-cadre {
    overflow: visible;
    border: 0;
  }

  table.tbl,
  table.tbl tbody,
  table.tbl tr,
  table.tbl th,
  table.tbl td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  table.tbl thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  table.tbl tbody {
    display: grid;
    gap: var(--espace-3);
  }

  table.tbl tbody tr {
    padding: var(--espace-3);
    border: 1px solid color-mix(in srgb, var(--creme) 20%, transparent);
    border-radius: calc(var(--rayon) * 2);
    background: color-mix(in srgb, var(--creme) 3%, transparent);
  }

  table.tbl tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--creme) 6%, transparent);
  }

  table.tbl tbody th {
    padding: 0 0 var(--espace-3);
    border-bottom-color: color-mix(in srgb, var(--accent) 55%, transparent);
    color: var(--creme);
    font-family: var(--titre);
    font-size: 1.55rem;
    font-weight: 500;
  }

  table.tbl tbody td {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--espace-1) var(--espace-2);
    align-items: baseline;
    padding: var(--espace-3) 0;
  }

  table.tbl tbody td::before {
    content: attr(data-label);
    min-width: 0;
    color: var(--attenue);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  table.tbl tbody td strong {
    grid-column: 2;
    grid-row: 1;
    white-space: nowrap;
  }

  table.tbl tbody td small {
    grid-column: 1 / -1;
    margin-top: 0;
  }
}

@media (min-width: 45.01rem) {
  .formules-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  .formule-carte--reference {
    grid-row: span 2;
  }

  .zones-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .zone-carte:nth-child(odd) {
    padding-right: var(--espace-4);
  }

  .zone-carte:nth-child(even) {
    padding-left: clamp(4.5rem, 8vw, 6.5rem);
    border-left: 1px solid color-mix(in srgb, var(--creme) 18%, transparent);
  }

  .zone-carte:nth-child(even) .zone-carte__numero {
    left: var(--espace-4);
  }

  .soin-detail {
    grid-template-columns: minmax(12rem, 0.38fr) minmax(0, 0.62fr);
  }

  .choix-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 60.01rem) {
  .soins-hero .hero-grille {
    grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
    gap: clamp(3rem, 5vw, 4.5rem);
  }

  .soins-hero h1 {
    font-size: clamp(3.25rem, 5.2vw, 4.5rem);
  }

  .soins-hero__media {
    min-height: clamp(30rem, 46vw, 36rem);
  }

  .soins-hero .soins-hero__media img {
    aspect-ratio: 5 / 6;
  }

  .formules-grille {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .formule-carte h3 {
    font-size: clamp(1.6rem, 2.4vw, 2.15rem);
    white-space: nowrap;
  }

  .formule-carte,
  .formule-carte--reference {
    grid-row: auto;
  }

  .formule-carte--reference {
    min-height: 25rem;
  }
}