/* Deux familles : Inter (français) et IBM Plex Sans Arabic. */
:root {
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;
  --text-price: #3d3832;
  --text-hours: #454038;
}

body {
  font-family: var(--font-body);
}

.logo,
.logo .wordmark,
.footer-logo {
  font-family: var(--font-display);
}

h1,
h2,
h3,
.gallery-title h1,
.salon-card h3,
.svc-card h3,
.svc-theme-name,
.section-head h2,
.about-copy h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

button,
.gold-btn,
.add-btn,
.outline-btn,
.zgo-btn,
.zgo-splash__cta,
.bgo-rdv-open-btn {
  font-family: var(--font-body);
  font-weight: 600;
}

.price,
.svc-card .price,
.presta-price,
.hours-label,
.contact-hours,
.contact-hours-row,
.contact-hours-title,
.contact-hours-now,
.hours-label strong,
.location,
.services,
.contact-row,
.about-copy > p,
.feature-item span,
.feature-item strong,
.nav-links,
.add-btn,
.outline-btn {
  font-family: var(--font-body);
}

.price,
.svc-card .price,
.presta-price {
  color: var(--text-price);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.price strong,
.svc-card .price strong,
.presta-price {
  color: var(--ink);
}

.hours-label {
  color: var(--text-hours);
  font-size: 13px;
}

.hours-label strong {
  font-size: 13px;
}

.contact-hours-row {
  font-size: 14px;
}

.contact-hours-day {
  color: var(--text-hours);
}

.contact-hours-times {
  color: #5c574f;
}

.contact-hours-row--today .contact-hours-times {
  color: var(--ink);
}

html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea {
  font-family: var(--font-ar);
  line-height: 1.55;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] .gallery-title h1,
html[lang="ar"] .salon-card h3,
html[lang="ar"] button,
html[lang="ar"] .gold-btn,
html[lang="ar"] .price,
html[lang="ar"] .presta-price {
  font-family: var(--font-ar);
  font-weight: 600;
  letter-spacing: 0;
}

html[lang="ar"] .logo .wordmark,
html[lang="ar"] .footer-logo {
  font-family: var(--font-display);
}

html[dir="rtl"] .presta-price {
  text-align: left;
  padding-left: 0;
  padding-right: 8px;
}