/* Bio'ty Zen, première version. Palette tirée du logo, de l'enseigne et du papier peint de la cabine. */

@font-face {
  font-family: "Alegreya";
  src: url("fonts/alegreya-normal-400-700.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("fonts/alegreya-italic-400-700.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("fonts/alegreya-sans-normal-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("fonts/alegreya-sans-normal-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("fonts/alegreya-sans-normal-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --encre: #221d21;
  --mur: #f5f0ea;
  --bleu: #2f3d48;
  --papillon: #b79a86;
  --rose: #e7699e;
  --rose-fonce: #a93a69;

  --encre-doux: #5a5157;
  --mur-sur-bleu: #e9e1d8;

  --serif: "Alegreya", Georgia, "Times New Roman", serif;
  --sans: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;

  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;
  --s6: 48px;
  --s8: 64px;
  --s10: 80px;
  --s12: 96px;
  --s16: 128px;

  --gutter: 20px;
  --radius: 999px;
  --header: 64px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + var(--s2));
}

body {
  margin: 0;
  background: var(--mur);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: 0;
  font-variant-numeric: lining-nums;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--rose-fonce); text-underline-offset: 3px; text-decoration-thickness: 1px; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: 3.5rem; letter-spacing: -0.01em; }
h2 { font-size: 2.25rem; letter-spacing: -0.005em; }
h3 { font-size: 1.5rem; }
p { margin: 0; text-wrap: pretty; }

.wrap {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip:focus {
  left: var(--s2);
  top: var(--s1);
  z-index: 100;
  background: var(--mur);
  padding: var(--s1) var(--s2);
}

/* Boutons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 300ms ease, color 300ms ease;
}
.btn-call {
  background: var(--rose);
  color: var(--encre);
}
.btn-line {
  background: transparent;
  color: var(--encre);
  box-shadow: inset 0 0 0 1.5px var(--encre);
}
.on-bleu .btn-line {
  color: var(--mur);
  box-shadow: inset 0 0 0 1.5px var(--mur-sur-bleu);
}
.btn svg { width: 18px; height: 18px; flex: none; }

@media (hover: hover) and (pointer: fine) {
  .btn-call:hover { background: var(--encre); color: var(--mur); }
  .btn-line:hover { background: var(--encre); color: var(--mur); }
  .on-bleu .btn-line:hover { background: var(--mur); color: var(--bleu); }
  a:hover { text-decoration-thickness: 2px; }
}

/* En-tête */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--mur);
  border-bottom: 1px solid rgba(34, 29, 33, 0.08);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  height: var(--header);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--s1);
  color: var(--encre);
  text-decoration: none;
}
.brand img { width: 60px; height: auto; }
.brand span {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--encre);
  color: var(--encre);
  font: 700 1rem/1 var(--sans);
  cursor: pointer;
}
.site-nav {
  display: none;
}
.site-nav.open {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: var(--header);
  background: var(--mur);
  border-bottom: 1px solid rgba(34, 29, 33, 0.12);
  padding: var(--s1) var(--gutter) var(--s3);
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: block;
  padding: 12px 0;
  color: var(--encre);
  font-family: var(--serif);
  font-size: 1.5rem;
  text-decoration: none;
}
.site-nav a[aria-current="page"] { color: var(--rose-fonce); }
.header-call { display: none; }

/* Hero */

.hero {
  display: grid;
  grid-template-rows: auto auto;
  min-height: calc(100svh - var(--header));
}
.hero-photo {
  position: relative;
  height: 44svh;
  min-height: 300px;
  overflow: hidden;
  background: var(--bleu);
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 28% 22%;
}
.hero-text {
  padding: var(--s4) var(--gutter) var(--s5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s2);
}
.hero-where {
  white-space: pre-line;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--encre-doux);
}
.hero h1 em { font-style: italic; font-weight: 500; }
.hero .lead {
  font-size: 1.1875rem;
  line-height: 1.45;
  max-width: 34ch;
}
.proof {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 1rem;
}
.proof strong {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 600;
}
.proof .stars { color: var(--encre); letter-spacing: 2px; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--s1);
}
.today {
  font-size: 0.9375rem;
  color: var(--encre-doux);
}
.today[hidden] { display: none; }

/* Sections */

.section { padding-block: var(--s10); }
.section-tight { padding-block: var(--s8); }
.section-head {
  display: grid;
  gap: var(--s2);
  margin-bottom: var(--s5);
  max-width: 46rem;
}
.section-head p { font-size: 1.125rem; color: var(--encre-doux); }

.on-bleu {
  background: var(--bleu);
  color: var(--mur);
}
.on-bleu a { color: var(--mur); }

/* Avis */

.section.avis { padding-bottom: var(--s4); }

.reviews {
  display: grid;
  gap: var(--s6);
}
.review { margin: 0; }
.review blockquote {
  margin: 0;
  text-wrap: balance;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.625rem;
  line-height: 1.3;
}
.review.small blockquote { font-size: 1.3125rem; }
.review figcaption {
  margin-top: var(--s2);
  font-size: 0.9375rem;
  color: var(--encre-doux);
}
.review figcaption b { color: var(--encre); font-weight: 700; }
.reviews-foot {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--papillon);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s4);
  font-size: 0.9375rem;
  color: var(--encre-doux);
}

/* Carte des soins */

.families {
  display: grid;
  gap: var(--s6);
}
.family h3 {
  margin-bottom: var(--s2);
  padding-bottom: var(--s1);
  border-bottom: 1px solid var(--papillon);
}
.family .note {
  margin: -4px 0 var(--s2);
  font-size: 0.9375rem;
  color: var(--encre-doux);
}
.rows { list-style: none; margin: 0; padding: 0; }
.row {
  padding: 10px 0;
}
.row-main {
  display: flex;
  align-items: baseline;
  gap: var(--s1);
}
.row-name { font-size: 1.0625rem; font-weight: 500; }
.row-fill {
  flex: 1 1 24px;
  min-width: 16px;
  border-bottom: 1.5px dotted var(--papillon);
  transform: translateY(-5px);
}
.row-dur {
  font-size: 0.9375rem;
  color: var(--encre-doux);
  white-space: nowrap;
}
.row-price {
  min-width: 3.4em;
  text-align: right;
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.row-desc {
  margin-top: 2px;
  font-size: 0.9375rem;
  color: var(--encre-doux);
  max-width: 40ch;
}
.on-bleu .row-dur,
.on-bleu .row-desc,
.on-bleu .family .note { color: var(--mur-sur-bleu); }

.rituel {
  margin-top: var(--s8);
  display: grid;
  gap: var(--s2);
  padding-block: var(--s5);
  border-block: 1px solid var(--encre);
}
.rituel-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s1) var(--s3);
}
.rituel h3 { font-size: 2rem; }
.rituel h3 em { font-style: italic; }
.rituel .rituel-price {
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.rituel-price small {
  display: inline-block;
  margin-left: 12px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--encre-doux);
}
.rituel p { font-size: 1.125rem; max-width: 52ch; }

.more {
  margin-top: var(--s5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
}

/* Entre ciel et terre */

.energie { padding: 0; }
.energie-grid {
  display: grid;
}
.energie-photo img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
}
.energie-text {
  padding: var(--s8) var(--gutter) var(--s10);
  display: grid;
  gap: var(--s3);
  align-content: center;
}
.energie-text h2 em { font-style: italic; }
.energie-text > p { font-size: 1.125rem; max-width: 44ch; color: var(--mur-sur-bleu); }
.energie-stones {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: var(--s2);
  align-items: center;
  margin-top: var(--s1);
}
.energie-stones img { width: 128px; height: 128px; object-fit: cover; object-position: 30% 50%; }
.energie-stones p { font-size: 0.9375rem; color: var(--mur-sur-bleu); }
.on-bleu .row-fill { border-color: rgba(233, 225, 216, 0.45); }

/* Ateliers */

.ateliers-grid {
  display: grid;
  gap: var(--s5);
}
.big-number {
  font-family: var(--serif);
  font-size: 6rem;
  font-weight: 600;
  line-height: 0.9;
  font-variant-numeric: lining-nums;
}
.big-number-legend {
  margin-top: var(--s1);
  font-size: 1.0625rem;
  color: var(--encre-doux);
}
.ateliers-text {
  display: grid;
  gap: var(--s3);
}
.ateliers-text > p { font-size: 1.125rem; max-width: 46ch; }
.ateliers-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s1);
}
.ateliers-photos figure { margin: 0; }
.ateliers-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ateliers-photos figcaption {
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--encre-doux);
}
.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 1rem;
}
.facts li { padding-left: 20px; position: relative; }
.facts li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 8px;
  height: 1.5px;
  background: var(--papillon);
}

/* Edwige */

.edwige-grid {
  display: grid;
  gap: var(--s5);
  align-items: start;
}
.edwige-photo {
  margin: 0;
  max-width: 420px;
}
.edwige-photo img { width: 100%; aspect-ratio: 520 / 694; object-fit: cover; }
.edwige-text { display: grid; gap: var(--s3); }
.edwige-quote {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.25;
}
.edwige-quote footer {
  margin-top: var(--s1);
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--encre-doux);
}
.edwige-text > p { font-size: 1.0625rem; max-width: 52ch; }

.section.edwige { padding-top: 0; }
.pre { white-space: pre-line; }

/* Bon cadeau */

.cadeau {
  border-top: 1px solid var(--papillon);
  border-bottom: 1px solid var(--papillon);
}
.cadeau-grid {
  display: grid;
  gap: var(--s3);
  align-items: center;
}
.cadeau h2 em { font-style: italic; }
.cadeau-grid > div:first-child { display: grid; gap: var(--s2); }
.cadeau p { font-size: 1.125rem; max-width: 50ch; }

/* Venir */

.venir-grid {
  display: grid;
  gap: var(--s6);
}
.venir-block { display: grid; gap: var(--s2); align-content: start; }
.venir-block h3 { font-size: 1.375rem; }
.address {
  white-space: pre-line;
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.2;
  font-style: normal;
}
.contact-lines {
  display: grid;
  gap: 4px;
  font-size: 1.0625rem;
}
.hours {
  width: 100%;
  max-width: 420px;
  border-collapse: collapse;
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.hours th,
.hours td {
  padding: 9px 0;
  border-bottom: 1px solid rgba(183, 154, 134, 0.6);
  text-align: left;
  vertical-align: top;
}
.hours th { font-weight: 500; width: 40%; }
.hours td { text-align: right; }
.hours td span { display: inline-block; }
.hours td span + span::before { content: ", "; }
.hours .off { color: var(--encre-doux); }
.hours tr.is-today th,
.hours tr.is-today td { font-weight: 700; }
.small-print { font-size: 0.9375rem; color: var(--encre-doux); }

/* Clôture */

.close {
  border-top: 1px solid var(--papillon);
}
.close .wrap { display: grid; gap: var(--s3); justify-items: start; }
.close h2 { font-size: 2.25rem; max-width: 22ch; }
.close h2 em { font-style: italic; }

/* Pied de page */

.site-footer {
  background: var(--bleu);
  color: var(--mur-sur-bleu);
  padding: var(--s8) 0 calc(var(--s10) + 24px);
  font-size: 0.9375rem;
}
.site-footer a { color: var(--mur); }
.footer-grid {
  display: grid;
  gap: var(--s4);
}
.footer-name {
  font-family: var(--serif);
  font-size: 1.75rem;
  color: var(--mur);
}
.footer-name em { font-style: italic; }
.footer-legal {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid rgba(233, 225, 216, 0.2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
}

/* Barre d'appel, téléphone */

.call-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--mur);
  border-top: 1px solid rgba(34, 29, 33, 0.12);
}
.call-bar .btn { width: 100%; }

/* Page carte */

.page-head {
  padding-block: var(--s8) var(--s5);
  display: grid;
  gap: var(--s2);
}
.page-head { position: relative; }
.page-logo { display: none; }
.page-head h1 { font-size: 3rem; }
.page-head p { font-size: 1.125rem; max-width: 52ch; color: var(--encre-doux); }
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-top: var(--s2);
  padding: 0;
  list-style: none;
}
.jump a {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--papillon);
  color: var(--encre);
  text-decoration: none;
  font-weight: 500;
}
.carte-section { padding-block: var(--s6); border-top: 1px solid var(--papillon); }
.carte-section > .wrap > h2 { margin-bottom: var(--s4); }
.carte-cols { display: grid; gap: var(--s6); }
.carte-photo { margin: 0; }
.carte-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.carte-photo figcaption { margin-top: 6px; font-size: 0.8125rem; color: var(--encre-doux); }

.carte-stack { display: grid; gap: var(--s6); align-content: start; }
.carte-intro { margin: -8px 0 var(--s5); font-size: 1.125rem; max-width: 56ch; color: var(--encre-doux); }
.carte-section h2 em { font-style: italic; }
.page-head h1 em { font-style: italic; }
.privilege {
  display: grid;
  gap: var(--s1);
  padding: var(--s3) 0;
  border-block: 1px solid var(--encre);
}
.privilege-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
}
.privilege-name { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; }
.privilege-price { font-family: var(--serif); font-size: 2rem; font-weight: 600; }
.privilege p { font-size: 1rem; }
.privilege-ados { margin-top: var(--s1); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.privilege-ados .privilege-name { font-size: 1.25rem; }

/* Apparition */

.js .reveal > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.js .reveal.is-in > * { opacity: 1; transform: none; }
.js .reveal.is-in > *:nth-child(2) { transition-delay: 0.08s; }
.js .reveal.is-in > *:nth-child(3) { transition-delay: 0.16s; }
.js .reveal.is-in > *:nth-child(4) { transition-delay: 0.24s; }
.js .reveal.is-in > *:nth-child(5) { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal > * { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
}

/* Tablette */

@media (min-width: 640px) {
  :root { --gutter: 32px; }
  .reviews { grid-template-columns: 1.3fr 1fr; align-items: start; }
  .families { grid-template-columns: 1fr 1fr; column-gap: var(--s8); }
  .edwige-grid { grid-template-columns: minmax(220px, 360px) 1fr; }
  .venir-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .carte-cols { grid-template-columns: 1fr 1fr; column-gap: var(--s8); }
  .hero-photo { height: 52svh; }
}

/* Bureau */

@media (min-width: 960px) {
  :root { --gutter: 48px; --header: 76px; }
  body { font-size: 1.0625rem; }
  h1 { font-size: 6.5rem; }
  h2 { font-size: 3rem; }
  .brand img { width: 72px; }
  .nav-toggle { display: none; }
  .site-nav,
  .site-nav.open {
    display: block;
    position: static;
    padding: 0;
    border: 0;
    background: none;
  }
  .site-nav ul { display: flex; gap: var(--s4); }
  .site-nav a { font-family: var(--sans); font-size: 1.0625rem; font-weight: 500; padding: 8px 0; }
  .header-call { display: inline-flex; min-height: 44px; padding: 10px 20px; font-size: 1rem; }
  .call-bar { display: none; }
  .site-footer { padding-bottom: var(--s8); }

  .hero {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    min-height: calc(100vh - var(--header));
  }
  .hero-text {
    order: 1;
    padding: var(--s8) var(--s8) var(--s8) max(var(--gutter), calc((100vw - 1400px) / 2 + var(--gutter)));
    gap: var(--s3);
  }
  .hero-photo {
    order: 2;
    height: auto;
    min-height: 0;
  }
  .hero-photo img { position: absolute; inset: 0; object-position: 30% 30%; }
  .hero .lead { font-size: 1.375rem; }

  .section { padding-block: var(--s12); }
  .section-tight { padding-block: var(--s12); }
  .review blockquote { font-size: 2.5rem; line-height: 1.22; }
  .review.small blockquote { font-size: 1.75rem; line-height: 1.3; }
  .reviews { column-gap: var(--s12); }

  .rituel {
    grid-template-columns: 1fr 1.2fr;
    align-items: end;
    column-gap: var(--s8);
  }
  .rituel h3 { font-size: 2.75rem; }
  .rituel .rituel-price { font-size: 4rem; }

  .energie-grid { grid-template-columns: 1.15fr 1fr; min-height: 640px; }
  .energie-photo { position: relative; }
  .energie-photo img { position: absolute; inset: 0; object-position: 38% 50%; }
  .energie-text { padding: var(--s12) var(--gutter) var(--s12) var(--s10); max-width: 640px; }

  .ateliers-grid {
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-areas: "num text" "photos text";
    column-gap: var(--s12);
    row-gap: var(--s5);
    align-items: start;
  }
  .ateliers-grid > :nth-child(1) { grid-area: num; }
  .ateliers-photos { grid-area: photos; }
  .ateliers-text { grid-area: text; padding-top: var(--s3); }
  .big-number { font-size: 9rem; }

  .edwige-grid { grid-template-columns: 420px 1fr; column-gap: var(--s12); align-items: center; }
  .edwige-quote { font-size: 2.25rem; }

  .cadeau-grid { grid-template-columns: 1fr auto; column-gap: var(--s8); }

  .venir-grid { grid-template-columns: 1.1fr 1fr; column-gap: var(--s12); }
  .address { font-size: 2.25rem; }

  .close h2 { font-size: 3.5rem; }
  .close .wrap { justify-items: center; text-align: center; }
  .close h2 { max-width: none; }

  .page-head { padding-block: var(--s12) var(--s6); padding-right: 380px; }
  .page-logo {
    display: block;
    position: absolute;
    right: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    height: auto;
  }
  .energie-stones { grid-template-columns: 176px 1fr; gap: var(--s3); }
  .energie-stones img { width: 176px; height: 176px; }
  .page-head h1 { font-size: 4.5rem; }
}

@media (min-width: 1280px) {
  .families { grid-template-columns: 1fr 1fr 1fr; }
}