/* Salon websites — structural defaults only.
   Everything expressive (palette beyond the theme vars, type scale, section
   rhythm, the look of a card or a rule) belongs to the per-template sheet that
   loads after this file. What lives here is what every template needs to be
   readable, operable and accessible, plus the primitives the shared runtime
   (site.js) creates at runtime: overlay, carousel nav, sticky bar.

   Order independence: the editor bridge re-orders sections inside .site-main at
   runtime, so nothing here may key off :nth-child or sibling combinators
   between sections. */

:root {
  --site-bg: #ffffff;
  --site-surface: #f6f5f3;
  --site-text: #16130f;
  --site-muted: #6b6560;
  --site-border: #e6e2dd;
  --site-max: 1120px;
  --site-gap: 24px;
  --site-focus: var(--site-primary, #16130f);
}

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

body.site-body {
  margin: 0;
  background: var(--site-bg);
  color: var(--site-text);
  font-family: var(--site-font-body, system-ui, sans-serif);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Sections toggled by the editor bridge must stay hidden whatever a template
   sets on the element. */
[hidden] { display: none !important; }

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

h1, h2, h3 { font-family: var(--site-font-display, inherit); line-height: 1.15; margin: 0 0 .4em; }
h1 { font-size: clamp(2rem, 6vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: 1.125rem; }
p { margin: 0 0 1em; }

a { color: inherit; }
.site-link { color: var(--site-primary); text-underline-offset: 3px; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--site-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Clipped, not display:none — the label stays in the accessibility tree. */
.site-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.site-skip {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  padding: 10px 18px; border-radius: var(--site-radius, 10px);
  background: var(--site-primary, #16130f); color: var(--site-on-primary, #fff);
  text-decoration: none; font-weight: 600;
}
.site-skip:focus { top: 12px; }

.site-container {
  width: 100%;
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

.site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--site-radius, 10px);
  background: var(--site-primary, #1a1a1a);
  color: var(--site-on-primary, #ffffff);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .18s ease, transform .18s ease;
}
.site-btn:hover { filter: brightness(1.08); }
.site-btn:active { transform: translateY(1px); }
.site-btn--lg { padding: 16px 32px; font-size: 1.0625rem; }
/* The second button in a pair: same shape, no fill, so a page never has two
   things shouting the same volume. */
.site-btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.site-btn--ghost:hover { filter: none; background: color-mix(in srgb, currentColor 10%, transparent); }

/* Glaura top bar (apex path only) --------------------------------------- */
.site-topbar { background: var(--site-surface); border-bottom: 1px solid var(--site-border); font-size: .8125rem; }
.site-topbar__brand {
  display: flex; align-items: center; gap: 8px;
  max-width: var(--site-max); margin-inline: auto;
  padding: 8px clamp(16px, 4vw, 32px);
  color: var(--site-muted); text-decoration: none;
}

/* Nav -------------------------------------------------------------------- */
.site-nav { position: sticky; top: 0; z-index: 20; background: var(--site-bg); border-bottom: 1px solid var(--site-border); }
.site-nav__inner { display: flex; align-items: center; gap: var(--site-gap); min-height: 64px; }
.site-nav__brand { display: flex; align-items: center; flex: 0 0 auto; white-space: nowrap; font-family: var(--site-font-display, inherit); font-weight: 700; text-decoration: none; }
.site-nav__brand img { max-height: 36px; width: auto; }
/* A salon can enable nine sections; the row scrolls rather than crushing the
   labels, and below the breakpoint it becomes the menu panel instead. */
.site-nav__links { display: flex; gap: 20px; min-width: 0; margin-inline-start: auto; overflow-x: auto; scrollbar-width: none; }
.site-nav__links::-webkit-scrollbar { display: none; }
/* A salon with many long section names overflows the row. site.js flags that,
   and the fade tells the visitor the row moves instead of just clipping. */
.site-nav__links.is-scrollable {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.site-nav__links a { text-decoration: none; color: var(--site-muted); white-space: nowrap; padding: 8px 0; }
.site-nav__links a.is-active { color: var(--site-text); }
.site-nav__cta { margin-inline-start: auto; }
.site-nav__links + .site-nav__cta { margin-inline-start: 0; }

.site-nav__toggle {
  display: none;
  width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--site-border); border-radius: var(--site-radius, 10px);
  color: inherit; cursor: pointer;
}
.site-nav__burger, .site-nav__burger::before, .site-nav__burger::after {
  display: block; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.site-nav__burger { position: relative; }
.site-nav__burger::before, .site-nav__burger::after { content: ""; position: absolute; left: 0; }
.site-nav__burger::before { top: -6px; }
.site-nav__burger::after { top: 6px; }
[data-site-nav-open] .site-nav__burger { background: transparent; }
[data-site-nav-open] .site-nav__burger::before { transform: translateY(6px) rotate(45deg); }
[data-site-nav-open] .site-nav__burger::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1023px) {
  .site-nav__toggle { display: inline-flex; order: 3; }
  .site-nav__cta { order: 2; margin-inline-start: auto; }
  .site-nav__links {
    order: 4;
    position: absolute; inset-inline: 0; top: 100%;
    display: none;
    overflow-x: visible;
    flex-direction: column; gap: 0;
    padding: 8px clamp(16px, 4vw, 32px) 16px;
    /* Explicit, not `inherit`: the panel floats over the hero and must be
       opaque whatever the nav paints itself with. */
    background: var(--site-bg, #fff);
    border-bottom: 1px solid var(--site-border);
  }
  .site-nav[data-site-nav-open] .site-nav__links { display: flex; }
  .site-nav__links a { padding: 12px 0; border-bottom: 1px solid var(--site-border); }
  .site-nav__links a:last-child { border-bottom: 0; }
}

/* Sections --------------------------------------------------------------- */
.site-main { display: block; }
.site-section { padding-block: clamp(48px, 8vw, 96px); }
.site-section__title { margin-bottom: 1em; }
.site-section__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.site-empty { color: var(--site-muted); }
/* The button under a list that site.js folded. Rendered hidden: without the
   runtime the whole list is already on the page and there is nothing to ask
   for. */
.site-more { display: flex; justify-content: center; margin: clamp(24px, 3vw, 40px) 0 0; }

.site-chip {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--site-surface); color: inherit;
  font-size: .875rem; text-decoration: none; white-space: nowrap;
}

/* Hero ------------------------------------------------------------------- */
.site-hero { position: relative; display: grid; min-height: min(78vh, 760px); isolation: isolate; }
.site-hero__media { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
.site-hero__veil { grid-area: 1 / 1; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)); }
/* With the veil off, the salon's own photo is the only backdrop the hero copy
   gets — a shadow keeps it legible over a bright one without darkening the
   picture the salon chose to show. Templates that lay the copy on a solid
   ground switch it back off. */
.site-hero[data-overlay="none"] .site-hero__veil { display: none; }
.site-hero[data-overlay="none"] .site-hero__body { text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 22px rgba(0, 0, 0, .4); }
.site-hero[data-overlay="strong"] .site-hero__veil { background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.75)); }
.site-hero__body { grid-area: 1 / 1; align-self: end; padding-block: clamp(32px, 6vw, 72px); color: #fff; }
.site-hero__title { color: inherit; }
.site-hero__tagline { max-width: 46ch; font-size: 1.125rem; }
.site-hero__tagline:empty { display: none; }
.site-hero__meta { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 1.5em; font-size: .9375rem; }
.site-hero__rating { font-weight: 600; }

/* Services --------------------------------------------------------------- */
/* The price list is a stack of disclosures, one per family, because a salon can
   publish two hundred prestations and a flat list of them is not a page anyone
   reads. It is native <details>, so it opens without JavaScript and prints
   whole; site.js only adds the "lire la suite" control on the descriptions that
   actually overflow their two lines. */
.site-services__jump { display: none; }
.site-services__group + .site-services__group { margin-top: 40px; }
.site-services__group-title { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.site-services__group-title::-webkit-details-marker { display: none; }
.site-services__group-title { list-style: none; }
/* Templates space this summary away from the rows it introduces; closed, there
   are no rows and the gap is just a hole. */
.site-services__group:not([open]) > .site-services__group-title { margin-bottom: 0; }
.site-services__group-name { flex: 0 1 auto; min-width: 0; }
.site-services__group-count { flex: 0 0 auto; color: var(--site-muted); font-size: .8125rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
/* The marker is an element, not a pseudo, so the templates keep their own
   ::after on this summary (a template may hang its hairline there). */
.site-services__group-mark { flex: 0 0 auto; width: 12px; height: 12px; margin-inline-start: 8px; position: relative; order: 99; }
.site-services__group-mark::before,
.site-services__group-mark::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1px;
  background: currentColor; transform: translateY(-50%);
}
.site-services__group-mark::after { transform: translateY(-50%) rotate(90deg); transition: transform .18s ease; }
.site-services__group[open] > .site-services__group-title .site-services__group-mark::after { transform: translateY(-50%) rotate(0deg); }
.site-services__rest { margin-top: 8px; }
.site-services__rest-title { cursor: pointer; padding: 12px 0; color: var(--site-muted); font-size: .875rem; list-style: none; }
.site-services__rest-title::-webkit-details-marker { display: none; }
.site-services__list { list-style: none; margin: 0; padding: 0; }
.site-service { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--site-border); }
.site-service__thumb { width: 72px; height: 72px; border-radius: var(--site-radius, 10px); object-fit: cover; flex: 0 0 auto; }
.site-service__body { flex: 1 1 auto; min-width: 0; }
.site-service__head { display: flex; align-items: baseline; gap: 12px; }
.site-service__name { margin: 0; font-weight: 600; }
.site-service__price { margin: 0; white-space: nowrap; }
.site-service__price s { color: var(--site-muted); margin-inline-end: 6px; }
.site-service__desc {
  margin: 4px 0 0; color: var(--site-muted); font-size: .9375rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.site-service.is-open .site-service__desc { display: block; overflow: visible; }
.site-service__more {
  margin: 4px 0 0; padding: 4px 0;
  background: none; border: 0; color: var(--site-muted);
  font: inherit; font-size: .8125rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.site-service__more:hover { color: var(--site-text); }
.site-service__meta { display: flex; gap: 14px; margin: 6px 0 0; color: var(--site-muted); font-size: .9375rem; }
.site-service__meta span:empty { display: none; }
.site-service__meta { align-items: center; }

/* "▶ N": the prestation's photos and videos (site-service-media.js). Small and
   in the salon's colour, so it reads as a detail of the row, not a second
   booking button. Also the booking drawer's cards. */
.site-media-chip {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  height: 24px; padding: 0 9px 0 7px;
  border: 1px solid color-mix(in srgb, var(--site-primary, #16130f) 35%, transparent);
  border-radius: 999px; background: transparent; color: var(--site-primary, #16130f);
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.site-media-chip[hidden] { display: none; }
.site-media-chip:hover { background: color-mix(in srgb, var(--site-primary, #16130f) 8%, transparent); border-color: var(--site-primary, #16130f); }
.site-media-chip:focus-visible { outline: 2px solid var(--site-focus); outline-offset: 2px; }

/* The booking page's viewer, in the salon's type and corners. */
.site-body .service-media-modal { font-family: var(--site-font-body, system-ui, sans-serif); }
.site-body .service-media-modal__media { border-radius: var(--site-radius, 16px); }
.site-body .service-media-modal__nav { color: var(--site-primary, #1c1c1c); }

/* Team, gallery, reels --------------------------------------------------- */
.site-team__grid, .site-gallery__grid, .site-reels__strip { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--site-gap); }
/* auto-fit, not auto-fill: a four-person team should spread across the row
   rather than huddle in the first four tracks with dead space beside it. The
   per-member cap keeps the portraits from ballooning when the team is small. */
.site-team__grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.site-team__member { max-width: 220px; }
.site-team__member img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.site-team__initials {
  display: grid; place-items: center; aspect-ratio: 1;
  background: var(--site-surface); font-size: 2rem; font-family: var(--site-font-display, inherit);
}
.site-team__name { margin: 12px 0 0; font-weight: 600; }
.site-team__role { margin: 2px 0 0; color: var(--site-muted); font-size: .875rem; }
.site-team__role:empty { display: none; }

.site-gallery__grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.site-gallery__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.site-gallery__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.site-reels__strip { grid-auto-flow: column; grid-auto-columns: minmax(180px, 220px); overflow-x: auto; }
.site-reel { position: relative; }
.site-reel__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.site-reels__strip img, .site-reels__strip video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.site-reel__preview {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.site-reel__preview.is-playing { opacity: 1; }

/* Reviews ---------------------------------------------------------------- */
.site-reviews__score { display: flex; align-items: baseline; gap: 8px; margin: 0 0 1em; }
.site-reviews__avg { color: var(--site-primary); }
.site-reviews__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--site-gap); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.site-review__stars { margin: 0 0 8px; color: var(--site-primary); }
.site-review__text { margin: 0; }
.site-review__meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; color: var(--site-muted); font-size: .875rem; }

/* About, hours, contact, gift cards -------------------------------------- */
.site-about__text { max-width: 68ch; white-space: pre-line; }
.site-hours__badge:empty { display: none; }
.site-hours__badge { font-weight: 600; color: var(--site-primary); }
.site-hours__list { margin: 0; max-width: 460px; }
.site-hours__row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--site-border); }
.site-hours__row dt, .site-hours__row dd { margin: 0; }
.site-hours__row.is-closed { color: var(--site-muted); }
.site-contact__inner, .site-about__inner { display: grid; gap: var(--site-gap); }
@media (min-width: 860px) { .site-contact__inner { grid-template-columns: 1fr 1fr; } }
.site-contact__address { font-style: normal; }
.site-contact__map:empty { display: none; }
/* The second column of the contact section is a link to the salon's map pin.
   It is a panel rather than a bare link so the column carries its own weight. */
.site-contact__map a {
  display: flex; align-items: center; justify-content: center;
  min-height: 180px; height: 100%;
  border: 1px solid var(--site-border); border-radius: var(--site-radius, 10px);
  text-decoration: none; font-weight: 600;
}
.site-contact__map a:hover { border-color: var(--site-text); }
/* A panel is a .site-container that paints itself, so it swaps the page gutter
   for its own padding and keeps the gutter as margin — otherwise it would
   bleed to the screen edge on a phone and lose its corners. */
.site-panel, .site-gift__inner {
  width: calc(100% - 2 * clamp(16px, 4vw, 32px));
  padding: clamp(24px, 5vw, 48px);
  background: var(--site-surface);
  border-radius: var(--site-radius, 10px);
}

/* Footer ----------------------------------------------------------------- */
.site-footer { background: var(--site-surface); }
.site-footer__socials { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 1em; padding: 0; }
.site-footer__legal:empty, .site-footer__name:empty { display: none; }
.site-footer__brand { margin: 0; color: var(--site-muted); font-size: .8125rem; }

/* Carousel controls — shown by the templates that scroll a rail ---------- */
.site-carousel { position: relative; }
.site-carousel__nav { display: none; gap: 8px; }
.site-carousel__btn {
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--site-bg); color: var(--site-text);
  border: 1px solid var(--site-border); border-radius: 50%;
  font-size: 1.125rem; line-height: 1; cursor: pointer;
}
.site-carousel__btn[disabled] { opacity: .35; cursor: default; }
.site-rail {
  display: flex; gap: var(--site-gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.site-rail::-webkit-scrollbar { display: none; }
.site-rail > * { scroll-snap-align: start; flex: 0 0 auto; }

/* Sticky booking bar ----------------------------------------------------- */
.site-sticky {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  display: none; align-items: center; gap: 12px;
  padding: 10px clamp(16px, 4vw, 32px) calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--site-bg); border-top: 1px solid var(--site-border);
  transition: transform .25s ease;
}
.site-sticky__meta { display: flex; align-items: baseline; gap: 6px; margin: 0; font-size: .875rem; }
.site-sticky .site-btn { flex: 1 1 auto; }
.site-sticky.is-tucked { transform: translateY(110%); }

/* Overlay — built by site.js for the gallery lightbox and the reel viewer */
.site-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-rows: auto 1fr auto;
  background: rgba(10, 8, 6, .94);
  color: #fff;
  padding: 12px;
}
.site-overlay__bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.site-overlay__extra { display: flex; gap: 8px; margin-inline-end: auto; }
.site-overlay__stage {
  margin: 0; display: grid; place-items: center; min-height: 0;
  grid-template-areas: "stage";
}
.site-overlay__stage > * { grid-area: stage; max-height: 100%; max-width: 100%; }
/* Sized against the viewport minus the overlay's own chrome — a percentage of
   the grid track resolves circularly and lets the media run under the
   controls. 168px = padding + the bar and foot rows. */
.site-overlay__stage img, .site-overlay__stage video {
  max-height: calc(100vh - 168px);
  max-height: calc(100dvh - 168px);
  width: auto; object-fit: contain; margin-inline: auto;
}
.site-overlay__foot { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 0; font-size: .875rem; }
.site-overlay__btn {
  min-width: 44px; min-height: 44px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .12); color: #fff;
  border: 0; border-radius: 999px; font: inherit; font-size: 1rem; cursor: pointer;
}
.site-overlay__btn:hover { background: rgba(255, 255, 255, .22); }
.site-overlay__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.site-overlay__count { margin: 0; opacity: .8; }
body.site-locked { overflow: hidden; }

/* Motion ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Editor preview --------------------------------------------------------- */
[data-site-preview="1"] .is-site-selected { outline: 2px solid var(--site-primary); outline-offset: -2px; }

/* Print — the two things a client prints are the price list and the hours */
@media print {
  .site-topbar, .site-nav, .site-sticky, .site-overlay, .site-hero__media,
  .site-hero__veil, .site-gallery, .site-reels, .site-skip { display: none !important; }
  body.site-body { background: #fff; color: #000; font-size: 11pt; }
  .site-section { padding-block: 12pt; break-inside: avoid; }
  .site-hero { min-height: 0; }
  .site-hero__body { color: #000; padding-block: 0; }
  .site-service, .site-hours__row { break-inside: avoid; border-color: #bbb; }
  .site-btn { display: none; }
  a[href]::after { content: ""; }
}