/* ==========================================================================
   SALON LILY — Feuille de style unique
   Direction artistique : minimalisme éditorial, blush & ivoire, or discret.
   - Titres : Cormorant Garamond (serif haute couture)
   - Texte & interface : Jost (géométrique, sobre)
   - Texte en noir d'encre, hiérarchie créée par l'échelle et l'espace
   - En-tête fixe, animations lentes et discrètes, ombres presque invisibles
   ========================================================================== */

/* ---------- 1. Fondations ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Palette — rose profond, franc et féminin.
     Les fonds restent clairs pour la lisibilité ; c'est l'accent qui porte
     le caractère, assez soutenu pour tenir en petit corps de texte. */
  --ink: #1D1016;           /* prune très sombre : tout le texte */
  --ivory: #FFFFFF;         /* blanc franc : fond principal */
  --ivory-warm: #FDF5F7;    /* rose poudré très clair : fond alterné */
  --blush: #F7DBE3;         /* rose poudré : bandeaux */
  --blush-pale: #FCEEF2;    /* rose poudré pâle : cartes */
  --rose: #EFC2CE;          /* rose poudré soutenu */
  --rose-deep: #A82A56;     /* accent profond : libellés, chiffres, liens */
  --sand: #F6E4E9;
  --gold: #B0365F;          /* framboise : filets, étoiles, détails */
  --line: rgba(29, 16, 22, .15);
  --line-soft: rgba(29, 16, 22, .08);

  /* Dégradés de marque, réutilisés par les surfaces et les animations */
  --grad-rose: linear-gradient(135deg, #FCEEF2 0%, #F7DBE3 45%, #EFC2CE 100%);
  --grad-deep: linear-gradient(120deg, #A82A56 0%, #C94B77 100%);

  /* Typographie */
  /* Une seule famille sur tout le site. L'élégance vient désormais de la
     graisse, du corps et de l'interlettrage, plus d'un second caractère.
     `--serif` est conservé comme alias : les 41 règles qui l'utilisaient
     n'ont pas eu à changer. */
  --sans:  "Jost", "Futura", "Century Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Rythme */
  --header-h: 88px;
  --gutter: clamp(24px, 5vw, 72px);
  --section-y: clamp(88px, 11vw, 160px);

  /* Mouvement */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.19, 1, .22, 1);
  --shadow: 0 24px 60px -38px rgba(140, 40, 75, .30);
  --shadow-lift: 0 36px 90px -46px rgba(140, 40, 75, .38);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }

body {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: .012em;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tout le texte en noir d'encre */
h1, h2, h3, h4, h5, h6, p, a, span, li, td, th,
label, input, select, textarea, button, strong, em, small, div { color: var(--ink); }

/* Titres en serif */
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 300; letter-spacing: -.005em; }

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img, svg { max-width: 100%; display: block; }
::selection { background: var(--blush); color: var(--ink); }

.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 860px; margin-left: auto; margin-right: auto; }

/* ---------- 2. Éléments typographiques ---------- */

/* Sur-titre : petites capitales très espacées */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.eyebrow::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--gold);
  display: inline-block;
}
.eyebrow.centered { justify-content: center; }
.eyebrow.centered::after {
  content: "";
  width: 34px; height: 1px;
  background: var(--gold);
  display: inline-block;
}

.display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(38px, 5.4vw, 72px);
  line-height: 1.08;
  letter-spacing: -.015em;
}
.display em { font-style: italic; font-family: var(--serif); }

.section-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.12;
  letter-spacing: -.012em;
  margin-bottom: 22px;
}
.section-sub {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
  max-width: 58ch;
  margin-bottom: 56px;
}
.section-head-center { text-align: center; }
.section-head-center .section-sub { margin-left: auto; margin-right: auto; }

.lede { font-size: clamp(17px, 1.6vw, 21px); font-weight: 300; line-height: 1.75; }

/* Filet fin */
.rule { height: 1px; background: var(--line-soft); border: 0; }

/* ---------- 3. Boutons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 40px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: color .55s var(--ease-soft), border-color .55s var(--ease-soft);
  isolation: isolate;
}
/* Remplissage qui monte doucement au survol */
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .55s var(--ease-soft);
  z-index: -1;
}
.btn:hover::before { transform: scaleY(1); }
.btn:hover { color: var(--ivory); }
.btn:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* Bouton plein : se vide au survol */
.btn-dark { background: var(--ink); color: var(--ivory); }
.btn-dark::before { background: var(--ivory); }
.btn-dark:hover { color: var(--ink); }

.btn-light { border-color: var(--ivory); color: var(--ivory); }
.btn-light::before { background: var(--ivory); }
.btn-light:hover { color: var(--ink); }

/* Action principale : framboise pleine, le contraire se remplit d'encre
   au survol. Ces trois classes étaient employées dans le balisage mais
   n'existaient nulle part en CSS — les boutons retombaient sur le style
   neutre, et `.btn-xs` s'affichait en taille normale à quinze endroits. */
.btn-primary {
  background: var(--rose-deep);
  border-color: var(--rose-deep);
  color: #fff;
}
.btn-primary::before { background: var(--ink); }
.btn-primary:hover { color: #fff; border-color: var(--ink); }

.btn-ghost {
  background: transparent;
  border-color: var(--rose-deep);
  color: var(--rose-deep);
}
.btn-ghost::before { background: var(--rose-deep); }
.btn-ghost:hover { color: #fff; border-color: var(--rose-deep); }

.btn-xs {
  padding: 9px 16px;
  font-size: 9.5px;
  letter-spacing: .16em;
  gap: 6px;
}

.btn-block { display: flex; width: 100%; }
.btn-lg { padding: 21px 52px; font-size: 11.5px; }
.btn-sm { padding: 13px 26px; font-size: 10px; letter-spacing: .18em; }

/* Lien souligné qui se déploie */
.link-line {
  position: relative;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding-bottom: 5px;
  display: inline-block;
}
.link-line::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform .6s var(--ease-soft);
}
.link-line:hover::after { transform: scaleX(0); }

/* ---------- 4. EN-TÊTE FIXE ---------- */
/* L'en-tête reste en haut de l'écran pendant tout le défilement,
   sur un fond blanc opaque — jamais transparent. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  background: #ffffff;
  border-bottom: 1px solid var(--line-soft);
  box-shadow: none;
  transition: box-shadow .5s var(--ease), height .5s var(--ease);
}
.site-header.scrolled {
  box-shadow: 0 6px 28px -18px rgba(120, 62, 66, .38);
  height: 72px;
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.logo {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.logo em { font-style: italic; font-family: var(--serif); letter-spacing: .04em; }

.main-nav { display: flex; align-items: center; gap: 44px; }
.main-nav > a {
  position: relative;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 6px 0;
}
.main-nav > a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-soft);
}
.main-nav > a:hover::after, .main-nav > a.active::after { transform: scaleX(1); }
.btn-nav { padding: 14px 30px; font-size: 10px; }

.burger { display: none; background: none; border: 0; padding: 10px 0; cursor: pointer; }
.burger span {
  display: block; width: 26px; height: 1px; background: var(--ink);
  margin: 6px 0; transition: transform .45s var(--ease-soft), opacity .3s;
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 5. Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(168deg, var(--blush) 0%, #fce4e2 46%, var(--ivory) 100%);
  padding: calc(var(--header-h) + clamp(56px, 8vw, 108px)) 0 clamp(56px, 7vw, 96px);
  overflow: hidden;
}
/* Halos très diffus */
.hero::before, .hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.hero::before { width: 46vw; height: 46vw; top: -14vw; right: -10vw; background: rgba(246, 200, 198, .62); }
.hero::after  { width: 34vw; height: 34vw; bottom: -16vw; left: -8vw; background: rgba(253, 236, 235, .85); }

.hero-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}

.wordmark {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(58px, 10vw, 132px);
  line-height: .92;
  letter-spacing: -.02em;
  display: block;
  margin-bottom: 26px;
}
.wordmark span { font-family: var(--serif); }

.hero-claim {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  line-height: 2;
  margin-bottom: 40px;
}
.hero-actions { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }

.hero-meta {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  display: flex; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap;
}
.hero-meta div { display: flex; flex-direction: column; gap: 2px; }
.hero-meta dt, .hero-meta .m-label {
  font-size: 10px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase;
}
.hero-meta .m-value { font-family: var(--serif); font-size: 20px; font-weight: 400; }

/* Portrait au trait */
.hero-figure {
  position: relative;
  width: min(100%, 420px);
  margin-left: auto;
  aspect-ratio: 4 / 5;
  border-radius: 210px 210px 6px 6px;
  overflow: hidden;
  background: linear-gradient(170deg, #fdeceb 0%, #f7d7d5 58%, #f0c4c3 100%);
  box-shadow: var(--shadow);
}
.hero-figure svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-figure::after {
  content: "";
  position: absolute; inset: 13px;
  border: 1px solid rgba(169, 138, 95, .32);
  border-radius: 198px 198px 3px 3px;
  pointer-events: none;
}

/* Bandeau défilant : filet rosé */
.marquee {
  background: linear-gradient(90deg, var(--rose) 0%, var(--blush) 50%, var(--rose) 100%);
  overflow: hidden;
  padding: 15px 0;
}
.marquee-track {
  display: flex; gap: 56px;
  width: max-content;
  animation: slide 42s linear infinite;
}
.marquee-track span {
  color: var(--ink);
  font-size: 10.5px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 56px;
}
.marquee-track span::after { content: "❀"; color: #fff; font-size: 12px; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- 6. Sections ---------- */
.section { padding: var(--section-y) 0; }
.section-warm { background: var(--ivory-warm); }
.section-blush { background: var(--blush-pale); }
.section-ink { background: var(--ink); }
.section-ink *, .section-ink .section-title { color: var(--ivory); }
.section-ink .eyebrow::before, .section-ink .eyebrow::after { background: var(--gold); }

.empty-msg {
  padding: 48px; text-align: center;
  border: 1px solid var(--line-soft);
  font-size: 15px;
}

/* Accroche centrée */
.pitch { text-align: center; max-width: 26ch; margin: 0 auto; }
.pitch-wide { max-width: 46ch; }
.pitch p {
  font-family: var(--serif);
  font-size: clamp(24px, 3.2vw, 40px);
  font-weight: 300;
  line-height: 1.28;
  letter-spacing: -.01em;
}
.pitch p em { font-style: italic; font-family: var(--serif); }

/* ---------- 7. Le salon ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.about-text p { margin-bottom: 20px; }
.about-text p:last-of-type { margin-bottom: 34px; }
.about-figure {
  aspect-ratio: 5 / 6;
  border-radius: 4px;
  background: linear-gradient(160deg, var(--blush) 0%, var(--sand) 100%);
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
  box-shadow: var(--shadow);
}
.about-figure::after {
  content: "";
  position: absolute; inset: 16px;
  border: 1px solid rgba(169, 138, 95, .28);
  pointer-events: none;
}
.about-figure .fig-quote {
  font-family: var(--serif);
  font-size: clamp(22px, 2.6vw, 32px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.35;
  text-align: center;
  max-width: 16ch;
  padding: 30px;
}

/* Signatures / chiffres */
.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-soft);
  margin-top: 12px;
}
.stat-row div { padding: 26px 0 0; }
.stat-row .s-num { font-family: var(--serif); font-size: 34px; font-weight: 300; line-height: 1; display: block; }
.stat-row .s-label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; margin-top: 8px; display: block; }

/* ---------- 8. Prestations ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: 34px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 12px;
}
.filter-btn {
  position: relative;
  border: 0; background: none; padding: 6px 0;
  font-family: var(--sans);
  font-size: 11px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer;
  opacity: .55;
  transition: opacity .45s var(--ease);
}
.filter-btn::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-soft);
}
.filter-btn:hover { opacity: 1; }
.filter-btn.active { opacity: 1; }
.filter-btn.active::after { transform: scaleX(1); }

.service-list { display: grid; }
.service-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  padding: 32px 0;
  border-bottom: 1px solid var(--line-soft);
  transition: padding-left .55s var(--ease-soft);
}
.service-item:hover { padding-left: 14px; }
.service-name { font-family: var(--serif); font-size: 25px; font-weight: 400; line-height: 1.25; margin-bottom: 6px; }
.service-desc { font-size: 15px; max-width: 52ch; }
.service-meta { display: flex; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
.tag { font-size: 10px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.service-price { text-align: right; white-space: nowrap; }
.service-price strong { font-family: var(--serif); font-size: 26px; font-weight: 400; display: block; line-height: 1.2; }
.service-price span { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .82; }
.service-item .btn { opacity: .92; }

/* ---------- 9. Équipe ---------- */
.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(28px, 4vw, 64px); }
.team-card { text-align: center; padding: clamp(34px, 4vw, 56px) clamp(24px, 3vw, 44px); background: var(--ivory); box-shadow: var(--shadow); transition: transform .7s var(--ease-soft), box-shadow .7s var(--ease-soft); }
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.team-avatar {
  width: 112px; height: 112px; border-radius: 50%;
  background: linear-gradient(155deg, var(--blush) 0%, var(--sand) 100%);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 40px; font-weight: 300; font-style: italic;
  margin: 0 auto 26px;
  position: relative;
}
.team-avatar::after {
  content: ""; position: absolute; inset: -9px;
  border: 1px solid rgba(169, 138, 95, .32); border-radius: 50%;
}
.team-name { font-family: var(--serif); font-size: 30px; font-weight: 400; line-height: 1.2; }
.team-role { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; margin: 10px 0 18px; }
.team-note { font-size: 12px; letter-spacing: .16em; }
.team-specialties { font-size: 15px; margin-top: 18px; max-width: 40ch; margin-left: auto; margin-right: auto; }
.team-card .btn { margin-top: 28px; }

/* ---------- 10. Galerie ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gallery-item {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 26px;
  transition: transform .9s var(--ease-soft);
}
/* Arc très fin : une texture, pas un motif */
.gallery-item::before {
  content: "";
  position: absolute;
  width: 120%; aspect-ratio: 1;
  left: 50%; top: 12%;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  pointer-events: none;
  transition: transform 1.2s var(--ease-soft);
}
.gallery-item:hover::before { transform: translateX(-50%) scale(1.06); }
.gallery-item::after {
  content: ""; position: absolute; inset: 12px;
  border: 1px solid rgba(255, 255, 255, .55);
  pointer-events: none;
  opacity: 0; transition: opacity .7s var(--ease);
}
.gallery-item:hover { transform: translateY(-5px); }
.gallery-item:hover::after { opacity: 1; }
.gallery-index {
  position: absolute; top: 22px; left: 26px;
  font-size: 10px; letter-spacing: .2em; opacity: .55;
}
.gallery-label { font-family: var(--serif); font-size: 20px; font-weight: 400; line-height: 1.25; position: relative; }

/* ---------- 11. Avis ---------- */
.reviews-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; flex-wrap: wrap; margin-bottom: 56px; }
.rating-box { text-align: center; padding-left: 48px; border-left: 1px solid var(--line-soft); }
.rating-num { font-family: var(--serif); font-size: 62px; font-weight: 300; display: block; line-height: 1; }
.rating-stars { font-size: 13px; letter-spacing: .32em; display: block; margin: 12px 0 8px; color: var(--gold); }
.rating-count { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }

.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); }
.review-card {
  background: var(--ivory);
  padding: clamp(28px, 3vw, 44px);
  transition: background .6s var(--ease);
}
.review-card:hover { background: var(--blush-pale); }
.review-stars { letter-spacing: .28em; font-size: 12px; color: var(--gold); margin-bottom: 20px; }
.review-text { font-family: var(--serif); font-size: 20px; font-weight: 300; font-style: italic; line-height: 1.5; margin-bottom: 26px; }
.review-top { display: flex; align-items: center; gap: 14px; }
.review-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--blush);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 14px; font-weight: 400;
}
.review-author { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.review-date { font-size: 11px; opacity: .8; }
.review-service { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .8; margin-top: 4px; }

.review-form { max-width: 780px; margin: 64px auto 0; padding: clamp(32px, 4vw, 56px); background: var(--ivory); box-shadow: var(--shadow); }
.stars-picker { display: flex; gap: 10px; }
.star-btn {
  background: none; border: 0; font-size: 26px; cursor: pointer; line-height: 1; padding: 0;
  color: var(--gold); transition: transform .35s var(--ease-soft), opacity .35s;
}
.star-btn:hover { transform: scale(1.12); }

/* ---------- 12. Infos & carte ---------- */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); }
.info-card { background: var(--ivory); padding: clamp(30px, 3.4vw, 52px); }
.info-card h3 { font-family: var(--serif); font-size: 26px; font-weight: 400; margin-bottom: 26px; }
.info-text { font-size: 15px; margin-bottom: 30px; }
.hours-list li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 13px; letter-spacing: .04em;
}
.hours-list li:last-child { border-bottom: 0; }
.hours-list .day { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.hours-list li.today { position: relative; }
.hours-list li.today .day::after {
  content: "— aujourd'hui"; font-size: 9.5px; letter-spacing: .16em; margin-left: 10px; color: var(--gold);
}

.map-card { max-width: 940px; margin: 0 auto; }
.map-frame {
  width: 100%; height: clamp(280px, 40vw, 420px);
  border: 0; display: block;
  filter: grayscale(1) contrast(.92) brightness(1.06);
  transition: filter 1s var(--ease);
}
.map-card:hover .map-frame { filter: grayscale(0) contrast(1) brightness(1); }
.map-shell { position: relative; box-shadow: var(--shadow); background: var(--ivory-warm); }
.map-address { font-size: 13px; letter-spacing: .06em; margin-top: 26px; text-align: center; }
.map-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

/* ---------- 13. CTA ---------- */
.cta-final {
  background: linear-gradient(150deg, var(--rose) 0%, var(--blush) 46%, var(--sand) 100%);
  padding: clamp(80px, 10vw, 148px) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Cercle décoratif très fin, à peine perceptible */
.cta-final::after {
  content: "";
  position: absolute; width: 540px; height: 540px;
  border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%;
  right: -190px; top: -230px; pointer-events: none;
}
.cta-final .eyebrow::before, .cta-final .eyebrow::after { background: #fff; }
.cta-inner { position: relative; z-index: 1; }
.cta-inner p { max-width: 52ch; margin: 0 auto 44px; font-size: 16px; }
.cta-btns { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

/* ---------- 14. Pied de page ---------- */
.site-footer { background: var(--ivory-warm); padding: clamp(64px, 8vw, 104px) 0 32px; }
.footer-inner { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: clamp(30px, 4vw, 60px); }
.footer-logo { font-family: var(--serif); font-style: italic; font-size: 38px; font-weight: 300; display: block; margin-bottom: 18px; }
.footer-col p { font-size: 14.5px; margin-bottom: 10px; max-width: 34ch; }
.footer-col h4 { font-size: 10px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 22px; }
.footer-col a { display: block; font-size: 14.5px; margin-bottom: 12px; position: relative; width: fit-content; }
.footer-col a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-soft);
}
.footer-col a:hover::after { transform: scaleX(1); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  border-top: 1px solid var(--line-soft); margin-top: clamp(48px, 6vw, 80px); padding-top: 28px;
}
.footer-bottom p { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }

/* ==========================================================================
   15. RÉSERVATION
   ========================================================================== */
.booking-page {
  padding: calc(var(--header-h) + clamp(48px, 6vw, 84px)) 0 clamp(72px, 9vw, 120px);
  background: linear-gradient(180deg, var(--blush-pale) 0%, var(--ivory) 46%);
  min-height: 100vh;
}
.booking-head { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.booking-head h1 { font-family: var(--serif); font-size: clamp(34px, 4.6vw, 58px); font-weight: 300; line-height: 1.1; margin-bottom: 18px; }
.booking-head p { font-size: 14px; letter-spacing: .04em; }

/* Fil des étapes */
.steps { display: flex; justify-content: center; align-items: center; margin-bottom: clamp(38px, 5vw, 60px); flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 12px; }
.step-num {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 14px; font-weight: 400;
  transition: background .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease);
}
.step.done .step-num { background: var(--blush); border-color: transparent; }
.step.current .step-num { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.step-label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .8; transition: opacity .6s var(--ease); }
.step.current .step-label, .step.done .step-label { opacity: 1; }
.step-line { width: 48px; height: 1px; background: var(--line); margin: 0 18px; }

.booking-card {
  background: var(--ivory);
  padding: clamp(30px, 4.5vw, 68px);
  max-width: 1000px;
  margin: 0 auto;
  box-shadow: var(--shadow);
}
.booking-card h2 { font-family: var(--serif); font-size: clamp(26px, 3vw, 36px); font-weight: 300; margin-bottom: 10px; }
.booking-card .step-hint { font-size: 15px; margin-bottom: 40px; max-width: 56ch; }

.pick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-soft); }
.pick-item {
  position: relative;
  border: 0;
  background: var(--ivory);
  padding: 26px 28px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: var(--sans);
  transition: background .5s var(--ease);
}
.pick-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--ink);
  transform: scaleY(0); transform-origin: top;
  transition: transform .5s var(--ease-soft);
}
.pick-item:hover { background: var(--ivory-warm); }
.pick-item.selected { background: var(--blush-pale); }
.pick-item.selected::before { transform: scaleY(1); }
.pick-title { font-family: var(--serif); font-size: 21px; font-weight: 400; display: block; line-height: 1.3; }
.pick-meta { font-size: 13px; display: block; margin-top: 6px; }
.pick-meta:nth-of-type(1) { letter-spacing: .14em; text-transform: uppercase; font-size: 10.5px; opacity: .88; }

/* Calendrier */
.cal-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.cal-month { font-family: var(--serif); font-size: 22px; font-weight: 400; text-transform: capitalize; }
.cal-nav { display: flex; gap: 10px; }
.cal-nav button {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: none;
  cursor: pointer; font-size: 15px; font-family: var(--serif);
  transition: background .5s var(--ease), border-color .5s var(--ease);
}
.cal-nav button:hover:not(:disabled) { background: var(--blush-pale); border-color: var(--ink); }
.cal-nav button:disabled { opacity: .25; cursor: not-allowed; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { font-size: 9.5px; letter-spacing: .16em; text-align: center; padding: 8px 0; text-transform: uppercase; opacity: .75; }
.cal-day {
  aspect-ratio: 1 / 1;
  border: 1px solid transparent;
  background: none;
  font-family: var(--sans); font-size: 13.5px; font-weight: 300;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.cal-day:hover:not(:disabled) { border-color: var(--line); background: var(--blush-pale); }
.cal-day.selected { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.cal-day:disabled { opacity: .22; cursor: not-allowed; }
.cal-day.empty { cursor: default; }

.slots-title { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slot {
  border: 1px solid var(--line);
  background: none;
  padding: 13px 6px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 300; letter-spacing: .08em;
  cursor: pointer;
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.slot:hover:not(:disabled) { border-color: var(--ink); background: var(--blush-pale); }
.slot.selected { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.slot:disabled { opacity: .25; cursor: not-allowed; text-decoration: line-through; }

/* Formulaires */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 26px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 10px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; }
.field input, .field textarea, .field select {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 12px 0;
  font-family: var(--sans); font-size: 15px; font-weight: 300;
  background: transparent;
  outline: none;
  width: 100%;
  transition: border-color .5s var(--ease);
}
.field input:focus, .field textarea:focus { border-bottom-color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink); opacity: .32; }
.field textarea { resize: vertical; min-height: 92px; }
.field .error { font-size: 12px; color: #8f3a2f; }
.field.invalid input, .field.invalid textarea { border-bottom-color: #8f3a2f; }
.checkbox-row { display: flex; align-items: flex-start; gap: 14px; grid-column: 1 / -1; }
.checkbox-row input { width: 16px; height: 16px; margin-top: 5px; flex: 0 0 auto; accent-color: var(--ink); }
.checkbox-row label { font-size: 14px; font-weight: 300; text-transform: none; letter-spacing: .01em; line-height: 1.7; }

/* Récapitulatif */
.recap { background: var(--ivory-warm); padding: clamp(24px, 3vw, 36px); margin-bottom: 44px; }
.recap h3 { font-size: 10px; font-weight: 400; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 20px; font-family: var(--sans); }
.recap-row { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; font-size: 14.5px; }
.recap-row span:first-child { opacity: .85; font-size: 13px; }
.recap-row.total {
  border-top: 1px solid var(--line-soft);
  margin-top: 14px; padding-top: 18px;
  font-family: var(--serif); font-size: 22px;
}
.recap-row.total span:first-child { font-family: var(--sans); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: 1; align-self: center; }

.booking-actions { display: flex; justify-content: space-between; gap: 18px; margin-top: 48px; flex-wrap: wrap; }

/* Confirmation */
.confirm-box { text-align: center; padding: 20px 0; }
.confirm-icon {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--blush);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 32px;
  margin: 0 auto 30px;
  position: relative;
  animation: pop .9s var(--ease-soft) both;
}
.confirm-icon::after { content: ""; position: absolute; inset: -10px; border: 1px solid rgba(169,138,95,.35); border-radius: 50%; }
@keyframes pop { from { transform: scale(.86); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confirm-box h2 { margin-bottom: 14px; }
.confirm-ref { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 34px; }
.confirm-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }

/* Mes rendez-vous */
.myrdv { max-width: 1000px; margin: clamp(48px, 6vw, 84px) auto 0; }
.myrdv h2 { font-family: var(--serif); font-size: clamp(24px, 2.8vw, 34px); font-weight: 300; margin-bottom: 30px; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); }
.rdv-item {
  background: var(--ivory);
  padding: 26px 30px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 24px;
  align-items: center;
  margin-bottom: 1px;
  box-shadow: var(--shadow);
  transition: transform .6s var(--ease-soft);
}
.rdv-item:hover { transform: translateY(-3px); }
.rdv-item.cancelled { opacity: .5; }
.rdv-title { font-family: var(--serif); font-size: 21px; font-weight: 400; }
.rdv-meta { font-size: 13.5px; }
.rdv-status { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; border: 1px solid var(--line); padding: 7px 16px; white-space: nowrap; }
.rdv-empty { background: var(--ivory); padding: 44px; text-align: center; font-size: 15px; box-shadow: var(--shadow); }

/* ==========================================================================
   15 bis. PAGE FINALE « SALON LILY » — reprise de la maquette
   En-tête blanc · bandeau rose · wordmark script · photo pleine largeur
   ========================================================================== */
.brand-band {
  background: #fbd9d7;
  padding: calc(var(--header-h) + clamp(28px, 4vw, 52px)) 0 clamp(30px, 4vw, 54px);
}
.brand-band .wordmark {
  color: #ffffff;
  margin-bottom: 14px;
}
.brand-band .wordmark span { color: #ffffff; }
.brand-claim {
  text-align: center;
  font-family: var(--sans);
  font-size: clamp(19px, 2.4vw, 27px);
  font-weight: 500;
  line-height: 1.45;
  color: #ffffff;
}
.brand-claim a {
  display: block;
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 5px;
  font-weight: 500;
  transition: opacity .4s var(--ease);
}
.brand-claim a:hover { opacity: .78; }

/* Photo réelle, ajoutée uniquement après chargement confirmé */
.brand-photo.has-photo {
  background-image:
    var(--photo),
    linear-gradient(160deg, #FDF5F7 0%, #F0DCE2 100%);
  background-size: cover, auto;
  background-position: center 28%, 0 0;
  background-repeat: no-repeat, repeat;
}

/* Photo pleine largeur : si assets/salon-hero.jpg existe, elle s'affiche ;
   sinon le mur carrelé dessiné en CSS prend le relais. */
.brand-photo {
  height: clamp(320px, 46vw, 560px);
  /* Le mur carrelé dessiné en CSS est le rendu par défaut. La photo n'est
     ajoutée qu'une fois son chargement confirmé (classe `has-photo`) :
     sans cela, le navigateur la réclamait à chaque visite et essuyait un
     404 visible dans la console. */
  background-image:
    repeating-linear-gradient(45deg,  #e6dde0 0 1px, transparent 1px 92px),
    repeating-linear-gradient(-45deg, #e6dde0 0 1px, transparent 1px 92px),
    linear-gradient(160deg, #FDF5F7 0%, #F0DCE2 100%);
  background-size: auto, auto, auto;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: repeat, repeat, repeat;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.brand-photo .brand-portrait {
  height: 96%;
  width: auto;
  position: relative;
  z-index: 1;
  opacity: .9;
}
/* Dès qu'une vraie photo est déposée, le dessin de repli est masqué */
.brand-photo.has-photo .brand-portrait { display: none; }

.brand-closing { padding: clamp(64px, 8vw, 120px) 0; text-align: center; }
.brand-closing .pitch { margin-bottom: 40px; }

/* ---------- 16. Page contact ---------- */
.page-soft {
  background: linear-gradient(180deg, var(--blush-pale) 0%, var(--ivory) 40%);
  padding: calc(var(--header-h) + clamp(56px, 7vw, 96px)) 0 clamp(64px, 8vw, 110px);
}

/* ---------- 17. Notification ---------- */
.toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(16px);
  background: var(--ink);
  padding: 16px 34px;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease-soft);
  z-index: 2000;
}
.toast, .toast span { color: var(--ivory); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 18. Apparitions au défilement ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- 19. Responsive ---------- */
@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-figure { max-width: 460px; margin: 0 auto; }
  .about-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .review-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .cal-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  :root { --header-h: 68px; }

  .team-grid { grid-template-columns: 1fr; }
  .service-item { grid-template-columns: 1fr; gap: 18px; padding: 26px 0; }
  .service-item:hover { padding-left: 0; }
  .service-price { text-align: left; }
  .service-item .btn { width: 100%; }
  .stat-row { grid-template-columns: 1fr; }
  .stat-row div { padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
  .footer-inner { grid-template-columns: 1fr; }
  .reviews-head { align-items: flex-start; }
  .rating-box { padding-left: 0; border-left: 0; text-align: left; padding-top: 26px; border-top: 1px solid var(--line-soft); width: 100%; }

  .pick-grid, .form-grid { grid-template-columns: 1fr; }
  .slots { grid-template-columns: repeat(2, 1fr); }
  .step-label { display: none; }
  .step-line { width: 20px; margin: 0 8px; }
  .booking-actions .btn { flex: 1; }
  .rdv-item { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .review-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .hero-figure { border-radius: 200px 200px 4px 4px; }
  .hero-figure::after { border-radius: 190px 190px 2px 2px; }
}

/* ---------- 20. Photos administrables (médiathèque) ---------- */
.figure-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.team-avatar.has-photo { padding: 0; overflow: hidden; background: none; }
.team-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.service-item.with-photo { grid-template-columns: 92px 1fr auto auto; }
.service-thumb {
  width: 92px; height: 92px;
  object-fit: cover;
  border-radius: 3px;
}
@media (max-width: 860px) {
  .service-item.with-photo { grid-template-columns: 1fr; }
  .service-thumb { width: 100%; height: 180px; }
}

/* ══════════ AVIS SUR LA PAGE D'ACCUEIL ══════════
   Les cartes réutilisent le dessin de la page Contact ; seule la grille et
   les actions sont propres à l'accueil. Trois colonnes sur ordinateur,
   deux sur tablette, une sur téléphone. */
.reviews-home {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
  align-items: stretch;
}
.reviews-home .review-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
}
.reviews-home .review-text {
  flex: 1 1 auto;
  font-size: 18px;
  /* Un avis très long est écrêté à l'affichage ; il reste entier sur la
     page Contact, où tous les avis sont publiés. */
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.reviews-home .review-top {
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.review-stars-off { color: var(--sand); }

.reviews-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(34px, 4vw, 52px);
}

@media (max-width: 1000px) {
  .reviews-home { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .reviews-home { grid-template-columns: 1fr; }
  .reviews-home .review-text { -webkit-line-clamp: 9; font-size: 17px; }
  .reviews-actions .btn { width: 100%; }
}

/* ══════════ POPUP « LAISSEZ UN AVIS » ══════════ */
.rev-pop {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center;
  padding: clamp(14px, 4vw, 28px);
  padding-top: max(clamp(14px, 4vw, 28px), env(safe-area-inset-top));
  padding-bottom: max(clamp(14px, 4vw, 28px), env(safe-area-inset-bottom));
}
.rev-pop.is-open { display: flex; }
.rev-pop__veil {
  position: absolute; inset: 0;
  background: rgba(34, 19, 22, .62);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  animation: revFade .35s var(--ease);
}
.rev-pop__box {
  position: relative; z-index: 1; width: min(460px, 100%);
  /* Sur petit écran, la boîte défile à l'intérieur plutôt que de déborder */
  max-height: calc(100vh - 32px);
  max-height: calc(100svh - 32px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--ivory);
  border: 1px solid var(--rose);
  padding: clamp(34px, 4.4vw, 52px) clamp(24px, 3.4vw, 44px) clamp(26px, 3vw, 34px);
  text-align: center;
  box-shadow: var(--shadow-lift);
  animation: revRise .5s var(--ease-soft);
}
.rev-pop__box::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
@keyframes revFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes revRise {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.rev-pop__x {
  position: absolute; top: 6px; right: 6px;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--rose-deep);
  transition: color .35s var(--ease);
}
.rev-pop__x:hover { color: var(--ink); }
.rev-pop__stars { color: var(--gold); letter-spacing: .3em; font-size: 15px; margin-bottom: 14px; }
.rev-pop__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.7rem, 3.2vw, 2.1rem); line-height: 1.16; margin-bottom: 14px;
}
.rev-pop__txt { font-size: 15px; line-height: 1.7; margin-bottom: 26px; opacity: .92; }
.rev-pop__go { width: 100%; }
.rev-pop__later {
  display: block; width: 100%; margin-top: 12px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--rose-deep); padding: 14px;
  transition: color .35s var(--ease);
}
.rev-pop__later:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .rev-pop__box, .rev-pop__veil { animation: none; }
}

/* ══════════ CARTE DE FIDÉLITÉ ══════════ */
.loyalty-layout {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(34px, 4vw, 54px);
}

/* La carte elle-même : dégradé rosé, puce dorée, léger relief */
.loyalty-card {
  position: relative;
  aspect-ratio: 1.6 / 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(22px, 2.6vw, 32px);
  color: var(--ink);
  background: linear-gradient(140deg, var(--blush) 0%, var(--rose) 46%, var(--sand) 100%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 18px;
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.loyalty-card::after {
  /* voile lumineux en diagonale */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 52%);
  pointer-events: none;
}
.loyalty-card__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.loyalty-card__brand { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 26px); font-weight: 300; }
.loyalty-card__brand em { font-style: italic; }
.loyalty-card__chip {
  width: 40px; height: 30px; border-radius: 6px;
  background: linear-gradient(135deg, #e6c8a8, var(--gold));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.loyalty-card__label {
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase; opacity: .72;
}
.loyalty-card__tagline {
  font-family: var(--serif); font-size: clamp(19px, 2.2vw, 24px);
  font-style: italic; font-weight: 300; line-height: 1.3;
}
.loyalty-card__foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding-top: 14px; border-top: 1px solid rgba(34, 19, 22, .16);
}
.loyalty-card__holder,
.loyalty-card__tier {
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
}
.loyalty-card__holder { opacity: .82; }
.loyalty-card__tier { color: var(--ink); font-weight: 500; }

/* Les quatre niveaux */
.loyalty-tiers { display: grid; gap: 14px; }
.tier {
  display: flex; align-items: flex-start; gap: 16px;
  padding: clamp(16px, 1.8vw, 22px) clamp(16px, 2vw, 24px);
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  transition: border-color .5s var(--ease), background .5s var(--ease);
}
.tier:hover { border-color: var(--rose); background: var(--blush-pale); }
.tier__dot {
  flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%; margin-top: 5px;
  box-shadow: inset 0 0 0 1px rgba(34,19,22,.14);
}
.tier__dot--bronze  { background: #d9a878; }
.tier__dot--silver  { background: #cfcfd4; }
.tier__dot--gold    { background: #e0c179; }
.tier__dot--platine { background: #b9c6cf; }
.tier__body { min-width: 0; }
.tier__name { font-family: var(--serif); font-size: 20px; font-weight: 400; line-height: 1.2; }
.tier__seuil {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--rose-deep); margin: 5px 0 8px;
}
.tier__perk { font-size: 14px; line-height: 1.6; opacity: .92; }

/* Récompenses */
.loyalty-sub {
  font-family: var(--serif); font-weight: 300; text-align: center;
  font-size: clamp(22px, 2.6vw, 30px);
  margin: clamp(46px, 5.5vw, 76px) 0 clamp(24px, 3vw, 34px);
}
.loyalty-sub::after {
  content: ""; display: block; width: 48px; height: 1px;
  background: var(--gold); margin: 14px auto 0;
}
.loyalty-rewards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
}
.reward {
  background: var(--ivory); border: 1px solid var(--line-soft);
  padding: clamp(20px, 2.2vw, 28px);
  display: flex; flex-direction: column; gap: 7px;
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.reward:hover { border-color: var(--rose); transform: translateY(-4px); }
.reward__cost {
  font-family: var(--serif); font-size: 30px; font-weight: 300;
  color: var(--gold); line-height: 1;
}
.reward__cost span { font-family: var(--sans); font-size: 11px; letter-spacing: .18em; }
.reward__label { font-size: 15px; }
.reward__desc { font-size: 13px; line-height: 1.6; opacity: .86; }
.reward__tier {
  margin-top: auto; padding-top: 8px;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--rose-deep);
}

@media (max-width: 1000px) {
  .loyalty-layout { grid-template-columns: 1fr; }
  .loyalty-card { max-width: 420px; }
  .loyalty-rewards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .loyalty-card { max-width: none; aspect-ratio: 1.7 / 1; }
  .loyalty-rewards { grid-template-columns: 1fr; }
  .reward { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  .reward__cost { font-size: 26px; }
  .reward__label { flex: 1 1 auto; }
  .reward__desc, .reward__tier { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .reward:hover { transform: none; }
}

/* ══════════ NAVIGATION ══════════ */
.btn-nav { white-space: nowrap; }

/* ══════════ MENU LATÉRAL ══════════
   Un seul geste, identique du téléphone au grand écran : le panneau glisse
   depuis la droite au-dessus d'un voile, sans jamais couvrir tout l'écran. */
.burger { display: block; position: relative; z-index: 1003; }

.main-nav {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(340px, 84vw);
  z-index: 1002;
  background: var(--ivory);
  border-left: 1px solid var(--line-soft);
  box-shadow: -30px 0 70px -40px rgba(120, 62, 66, .5);

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: calc(var(--header-h) + 12px) clamp(24px, 4vw, 36px) 34px;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Hors écran au repos : aucun affichage à basculer, donc une vraie
     transition à l'aller comme au retour. */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .48s var(--ease-soft), visibility 0s linear .48s;
}
.main-nav.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .48s var(--ease-soft), visibility 0s;
}

.main-nav > a {
  padding: 15px 0;
  width: 100%;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
  letter-spacing: .18em;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity .4s var(--ease) var(--d, 0ms),
              transform .4s var(--ease) var(--d, 0ms),
              color .3s var(--ease);
}
.main-nav.open > a { opacity: 1; transform: none; }
/* Apparition en cascade, du haut vers le bas */
.main-nav.open > a:nth-child(1)  { --d: 60ms; }
.main-nav.open > a:nth-child(2)  { --d: 100ms; }
.main-nav.open > a:nth-child(3)  { --d: 140ms; }
.main-nav.open > a:nth-child(4)  { --d: 180ms; }
.main-nav.open > a:nth-child(5)  { --d: 220ms; }
.main-nav.open > a:nth-child(6)  { --d: 255ms; }
.main-nav.open > a:nth-child(7)  { --d: 285ms; }
.main-nav.open > a:nth-child(8)  { --d: 315ms; }
.main-nav.open > a:nth-child(9)  { --d: 340ms; }
.main-nav.open > a:nth-child(10) { --d: 360ms; }
.main-nav > a::after { display: none; }
.main-nav > a:hover { color: var(--rose-deep); }
.main-nav > a.active { color: var(--rose-deep); }

/* Spécificité alignée sur `.main-nav > a`, sinon la bordure claire des liens
   écrasait celle du bouton et son trait du bas disparaissait. */
.main-nav > a.btn-nav {
  margin-top: 24px;
  width: 100%;
  text-align: center;
  border: 1px solid var(--ink);
  padding: 15px 20px;
}

/* Voile derrière le panneau */
/* Au-dessus de l'en-tête fixe (z-index 1000) : sans cela, la barre du
   haut restait éclairée alors que toute la page était assombrie. */
.nav-veil {
  position: fixed; inset: 0; z-index: 1001;
  background: rgba(34, 19, 22, .42);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
.nav-veil.show {
  opacity: 1; visibility: visible;
  transition: opacity .45s var(--ease), visibility 0s;
}

/* La page ne défile plus tant que le panneau est ouvert */
body.nav-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .main-nav, .main-nav > a, .nav-veil { transition-duration: .01ms; }
  .main-nav > a { transform: none; }
}
/* ══════════ MENTION DE RÉALISATION ══════════ */
.footer-credit {
  border-top: 1px solid var(--line-soft);
  margin-top: 22px;
  padding-top: 20px;
  text-align: center;
}
.footer-credit p {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .72;
}

/* ══════════ PAGES LÉGALES ══════════ */
.legal-main { padding-top: var(--header-h); }
.container-narrow { max-width: 860px; }

.legal-block {
  margin-top: clamp(38px, 4.5vw, 62px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--line-soft);
}
.legal-block h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(21px, 2.4vw, 28px);
  margin-bottom: 18px;
}
.legal-block p { line-height: 1.8; margin-bottom: 14px; opacity: .94; }
.legal-block p:last-child { margin-bottom: 0; }
.legal-block a { text-decoration: underline; text-underline-offset: 3px; }

.legal-list { margin: 0 0 6px; padding-left: 20px; }
.legal-list li { line-height: 1.8; margin-bottom: 10px; opacity: .94; }

/* Fiche d'identité de l'éditeur */
.legal-dl {
  display: grid;
  grid-template-columns: minmax(160px, 34%) 1fr;
  gap: 0;
}
.legal-dl dt,
.legal-dl dd {
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  line-height: 1.6;
}
.legal-dl dt {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rose-deep); padding-right: 18px;
}
.legal-dl dd { opacity: .94; }
/* Champ que seul le propriétaire peut renseigner */
.legal-todo {
  font-style: italic; opacity: .55;
  background: var(--blush-pale);
  padding-left: 10px; padding-right: 10px;
  border-radius: 3px;
}

/* Tableau des traitements */
.legal-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.legal-table th,
.legal-table td {
  text-align: left; padding: 13px 14px 13px 0;
  border-bottom: 1px solid var(--line-soft);
  line-height: 1.6; vertical-align: top;
}
.legal-table th {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rose-deep); font-weight: 400;
}
.legal-table td { font-size: 14.5px; opacity: .94; }
.legal-note { font-size: 13.5px; font-style: italic; opacity: .68; }

/* Termes techniques : même police que le reste, mis en valeur par le fond
   et la couleur plutôt que par un second caractère. */
.legal-block code {
  font-family: inherit;
  font-size: .92em; letter-spacing: .01em;
  background: var(--blush-pale); color: var(--rose-deep);
  padding: 2px 7px; border-radius: 3px;
}

.legal-updated {
  margin-top: clamp(38px, 4.5vw, 60px);
  padding-top: 22px; border-top: 1px solid var(--line-soft);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .55;
}

/* Liens légaux du pied de page */
.footer-legal {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 10px 26px; margin-top: 20px;
}
.footer-legal a {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  opacity: .88; padding: 6px 0;
  transition: opacity .4s var(--ease);
}
.footer-legal a:hover { opacity: 1; }

/* Téléphone : la fiche d'identité et le tableau passent en pile */
@media (max-width: 700px) {
  .legal-dl { grid-template-columns: 1fr; }
  .legal-dl dt { padding-bottom: 3px; border-bottom: 0; }
  .legal-dl dd { padding-top: 0; }

  .legal-table thead { display: none; }
  .legal-table tr {
    display: block; padding: 14px 0; border-bottom: 1px solid var(--line-soft);
  }
  .legal-table td { display: block; padding: 3px 0; border: 0; }
  .legal-table td:first-child { font-size: 15.5px; opacity: 1; }
  .legal-table td:nth-child(2) { opacity: .78; }
  .legal-table td:nth-child(3) {
    font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--rose-deep); margin-top: 5px;
  }
}

/* Pied de page allégé des pages compte et connexion */
.site-footer--slim { margin-top: clamp(48px, 7vw, 96px); padding-bottom: 30px; }
.site-footer--slim .footer-bottom { margin-top: 0; }

/* Écran de connexion en contexte administration */
.auth-admin .auth-aside { background: var(--ink); color: var(--ivory); }
.auth-admin .auth-aside .auth-pitch,
.auth-admin .auth-aside li { opacity: .8; }

/* ══════════════════════════════════════════════════════════════════════════
   ANIMATIONS ET MICRO-INTERACTIONS
   Tout est désactivé d'un bloc si l'appareil demande moins de mouvement
   (bloc final « prefers-reduced-motion »).
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- Titres de section : filet qui se trace ---------- */
.section-title { position: relative; display: inline-block; }
.section-title::after {
  content: "";
  position: absolute; left: 0; bottom: -12px;
  height: 2px; width: 100%;
  background: var(--grad-deep);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--ease-soft) .15s;
}
[data-reveal].in .section-title::after,
.section-title.in::after { transform: scaleX(1); }
.section-title em { color: var(--rose-deep); font-style: italic; }

/* ---------- Surtitres : trait qui s'étire ---------- */
.eyebrow { position: relative; }
.eyebrow::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 0; height: 1px; margin-right: 0;
  background: var(--gold);
  transition: width .8s var(--ease-soft) .1s, margin-right .8s var(--ease-soft) .1s;
}
[data-reveal].in .eyebrow::before { width: 34px; margin-right: 14px; }

/* ---------- Boutons : remplissage qui balaie ---------- */
.btn { position: relative; overflow: hidden; z-index: 0; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-deep);
  transform: scaleX(0); transform-origin: right;
  transition: transform .55s var(--ease-soft);
}
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn:hover { color: #fff; border-color: transparent; }
.btn-dark:hover { color: #fff; }

/* ---------- Cartes : élévation et liseré ---------- */
.service-card, .staff-card, .promo-card, .info-card {
  transition: transform .6s var(--ease-soft), box-shadow .6s var(--ease-soft),
              border-color .6s var(--ease-soft);
}
.service-card:hover, .staff-card:hover, .promo-card:hover, .info-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: var(--rose);
}

/* ---------- Images : léger rapprochement ---------- */
.gallery-item, .staff-photo, .review-card, .carou__media { overflow: hidden; }
.gallery-item img, .staff-photo img {
  transition: transform 1.1s var(--ease-soft), filter .8s var(--ease);
}
.gallery-item:hover img, .staff-photo:hover img {
  transform: scale(1.06);
  filter: saturate(1.08);
}

/* ---------- Liens de texte : soulignement qui pousse ---------- */
.footer-col a, .footer-legal a {
  position: relative; display: inline-block;
}
.footer-col a::after, .footer-legal a::after {
  content: ""; position: absolute; left: 0; bottom: 1px;
  width: 100%; height: 1px; background: var(--rose-deep);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-soft);
}
.footer-col a:hover::after, .footer-legal a:hover::after {
  transform: scaleX(1); transform-origin: left;
}

/* ---------- Carte de fidélité : reflet qui passe ---------- */
.loyalty-card { background: var(--grad-rose); }
.loyalty-card::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-16deg);
  animation: reflet 6.5s var(--ease) infinite;
}
@keyframes reflet {
  0%, 62% { left: -60%; }
  86%, 100% { left: 130%; }
}
.loyalty-card__chip { background: linear-gradient(135deg, #F3D9C7, #C98A6B); }

/* ---------- Niveaux et récompenses : pastille qui pulse au survol ---------- */
.tier:hover .tier__dot { animation: pastille 1.6s var(--ease) infinite; }
@keyframes pastille {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176, 54, 95, .35); }
  70%      { box-shadow: 0 0 0 8px rgba(176, 54, 95, 0); }
}

/* ---------- Avis : guillemet qui se pose ---------- */
.review-card { position: relative; }
.review-card::before {
  content: "”";
  position: absolute; top: 4px; right: 20px;
  font-family: var(--serif); font-size: 68px; line-height: 1;
  color: var(--rose); opacity: .18;
  transform: translateY(-8px);
  transition: transform .7s var(--ease-soft), opacity .7s var(--ease);
  pointer-events: none;
}
.review-card:hover::before { transform: none; opacity: .3; }

/* ---------- Compteurs et chiffres clés ---------- */
.stat-num, .rating-num, .reward__cost {
  background: var(--grad-deep);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- En-tête : filet de progression de lecture ---------- */
.site-header::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px;
  width: var(--lu, 0%);
  background: var(--grad-deep);
  transition: width .12s linear;
}

/* ---------- Apparition : nuance selon la direction ---------- */
[data-reveal][data-from="left"]  { transform: translateX(-28px); }
[data-reveal][data-from="right"] { transform: translateX(28px); }
[data-reveal][data-from="zoom"]  { transform: scale(.96); }
[data-reveal].in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .section-title::after { transform: scaleX(1); transition: none; }
  .eyebrow::before { width: 34px; margin-right: 14px; transition: none; }
  .btn::before, .loyalty-card::before { animation: none; transition: none; }
  .service-card:hover, .staff-card:hover, .promo-card:hover, .info-card:hover,
  .review-card:hover::before { transform: none; }
  .gallery-item:hover img, .staff-photo:hover img { transform: none; }
  .tier:hover .tier__dot { animation: none; }
  .site-header::after { transition: none; }
}
/* ── Plus aucun italique mécanique ──
   Un sans-serif géométrique n'a pas de vrai italique : le navigateur le
   penche artificiellement, ce qui donne l'aspect « incliné » du titre.
   On retire l'inclinaison partout et on marque la nuance autrement. */
.wordmark,
.wordmark span,
.about-figure .fig-quote,
.review-text,
.footer-logo,
.loyalty-card__brand em,
.loyalty-card__tagline,
.legal-note,
.display em,
.pitch p em,
.section-title em,
.logo em {
  font-style: normal;
}

/* La marque du hero : lettres resserrées, deuxième mot en framboise */
.wordmark { letter-spacing: -.035em; font-weight: 300; }
.wordmark span { color: var(--rose-deep); font-weight: 300; }
.footer-logo { letter-spacing: -.03em; }
.loyalty-card__brand em { color: var(--rose-deep); }

/* Les citations gardent leur relief par le corps et la couleur */
.about-figure .fig-quote { letter-spacing: -.015em; }
.legal-note { color: var(--rose-deep); opacity: .85; }

/* Les boutons natifs n'héritent pas de la police : on la leur impose,
   sinon ils retombaient sur Arial au milieu du reste. */
button, input, select, textarea { font-family: inherit; }

/* La boîte reçoit le focus à l'ouverture : pas d'anneau visible pour autant */
.rev-pop__box:focus { outline: none; }

/* ══════════ ACCORD TYPOGRAPHIQUE ══════════
   Les titres avaient été dessinés pour un serif : en sans-serif, l'italique
   penche mal et le gris de page change. On rattrape par la graisse, le
   corps et l'interlettrage plutôt que par un second caractère. */

/* Les grands titres respirent : graisse légère, lettres resserrées */
h1, h2, .display, .section-title, .hero-title {
  font-weight: 300;
  letter-spacing: -.02em;
}
h3 { font-weight: 400; letter-spacing: -.005em; }

/* L'italique d'un sans-serif géométrique est mécanique : on le remplace
   par une mise en couleur, plus juste et plus lisible. */
.display em,
.section-title em,
.pitch p em,
.logo em {
  font-style: normal;
  color: var(--rose-deep);
}
.logo em { letter-spacing: .16em; }

/* Textes mis en avant : on garde le contraste sans l'italique */
.review-text,
.quote-text {
  font-style: normal;
  font-weight: 300;
  letter-spacing: -.008em;
}

/* Chiffres et prix : la graisse fait le travail que faisait le serif */
.rating-num, .stat-row .s-num, .service-price strong,
.reward__cost, .hero-meta .m-value, .tier__name {
  font-weight: 400;
  letter-spacing: -.02em;
}
.rating-num, .stat-row .s-num { font-weight: 300; }

/* Noms et intitulés : un cran plus affirmé qu'en serif */
.service-name, .team-name, .gallery-label, .review-author {
  font-weight: 400;
  letter-spacing: -.01em;
}

/* Le corps de texte gagne une graisse pour rester net sur fond rosé */
body { font-weight: 400; }
.section-sub, .pitch p { font-weight: 300; }

/* ══════════════════════════════════════════════════════════════════════════
   ÉLÉGANCE — passe de raffinement
   Une seule police : le caractère vient donc de l'échelle, de la finesse
   des graisses, de l'interlettrage et d'ornements dessinés en CSS.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- Titres : plus grands, plus fins, plus serrés ---------- */
.section-title {
  font-weight: 200;
  font-size: clamp(34px, 5vw, 68px);
  line-height: 1.04;
  letter-spacing: -.035em;
}
.section-title em { font-weight: 300; }
.display, .wordmark { font-weight: 200; letter-spacing: -.045em; }

/* Le filet sous les titres devient un double trait, plus couture */
.section-title::after { height: 1px; bottom: -16px; }
/* le titre pousse le texte plus bas pour laisser respirer les deux filets */
.section-title { margin-bottom: 46px; }
.section-title::before {
  content: "";
  position: absolute; left: 0; bottom: -19px;
  width: 34%; height: 1px;
  background: var(--rose);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease-soft) .32s;
}
[data-reveal].in .section-title::before { transform: scaleX(1); }

/* ---------- Surtitres : petites capitales encadrées ---------- */
.eyebrow {
  font-size: 10px;
  letter-spacing: .34em;
  font-weight: 400;
  color: var(--rose-deep);
}

/* ---------- Chiffres clés : traités comme des nombres d'édition ---------- */
.stat-row { gap: clamp(28px, 4vw, 56px); }
.stat-row .s-num {
  font-weight: 200;
  font-size: clamp(34px, 3.8vw, 52px);
  letter-spacing: -.04em;
  line-height: 1;
  white-space: nowrap;      /* « 2 480 » ne doit jamais se couper en deux */
  display: block;
}
.stat-row { flex-wrap: nowrap; }
.stat-row > div { min-width: 0; flex: 1 1 0; }
.stat-row .s-label {
  font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--rose-deep); margin-top: 10px; display: block;
}
.stat-row > div { position: relative; padding-left: 18px; }
.stat-row > div::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 24px;
  width: 1px; background: linear-gradient(var(--rose), transparent);
}

/* ---------- Le bloc citation devient une vraie page d'édition ---------- */
.about-figure {
  background: linear-gradient(150deg, var(--blush-pale) 0%, var(--blush) 58%, var(--sand) 100%);
  position: relative; overflow: hidden;
}
.about-figure::before {
  content: "";
  position: absolute; inset: 16px;
  border: 1px solid rgba(255, 255, 255, .55);
  pointer-events: none;
}
.about-figure .fig-quote {
  position: relative; z-index: 1;
  font-weight: 200;
  font-size: clamp(24px, 2.9vw, 38px);
  letter-spacing: -.03em;
  line-height: 1.28;
  max-width: 15ch;
}
/* Pas de guillemet ajouté : le texte porte déjà ses chevrons. On pose
   plutôt un disque clair en filigrane, qui donne de la profondeur au cadre. */
.about-figure .fig-quote::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 128%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 68%);
  z-index: -1; pointer-events: none;
}
/* signature manuscrite en bas du cadre */
.about-figure::after {
  content: "Salon Lily";
  position: absolute; right: 34px; bottom: 26px;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--rose-deep); opacity: .7;
  border: 0; inset: auto 34px 26px auto; width: auto; height: auto;
}

/* ---------- Cartes : cadre décalé, geste couture ---------- */
.service-card, .staff-card, .reviews-home .review-card, .tier, .reward {
  position: relative;
  background: #fff;
  border: 1px solid var(--line-soft);
}
.service-card::before, .staff-card::before, .tier::before, .reward::before {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--rose);
  transform: translate(0, 0);
  opacity: 0;
  transition: transform .6s var(--ease-soft), opacity .6s var(--ease-soft);
  pointer-events: none;
}
.service-card:hover::before, .staff-card:hover::before,
.tier:hover::before, .reward:hover::before {
  transform: translate(9px, 9px);
  opacity: 1;
}

/* ---------- Boutons : plus fins, plus longs, plus couture ---------- */
.btn {
  font-size: 10px;
  letter-spacing: .3em;
  padding: 19px 44px;
  font-weight: 400;
}
.btn-lg { padding: 22px 58px; letter-spacing: .32em; }

/* ---------- Filet doré fin en tête de chaque section claire ---------- */
.section-warm, .section-blush { position: relative; }
.section-warm::before, .section-blush::before {
  content: "";
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1280px, 92%); height: 1px;
  background: linear-gradient(90deg, transparent, var(--rose), transparent);
}

/* ---------- Respiration : sections un peu plus aérées ---------- */
:root { --section-y: clamp(96px, 12vw, 180px); }

/* Boutons resserrés : « Continuer » débordait de sa boîte à 390 px depuis
   que l'interlettrage a été élargi. */
@media (max-width: 520px) {
  .btn { padding: 17px 22px; letter-spacing: .18em; font-size: 9.5px; }
  .btn-lg { padding: 19px 26px; letter-spacing: .2em; }
}

@media (max-width: 700px) {
  .about-figure .fig-quote::before { font-size: 3.2em; left: -.18em; }
  .about-figure::after { right: 22px; bottom: 18px; font-size: 10px; }
  .stat-row > div { padding-left: 13px; }
  .service-card:hover::before, .staff-card:hover::before,
  .tier:hover::before, .reward:hover::before { transform: translate(5px, 5px); }
}
@media (prefers-reduced-motion: reduce) {
  .section-title::before { transform: scaleX(1); transition: none; }
  .service-card:hover::before, .staff-card:hover::before,
  .tier:hover::before, .reward:hover::before { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   RÉSERVATION EN FENÊTRE MODALE
   Coins à 18 px, ombres douces, fond sombre flouté, transitions courtes.
   ══════════════════════════════════════════════════════════════════════════ */
.bk {
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: center; justify-content: center;
  padding: clamp(0px, 3vw, 32px);
}
.bk.is-open { display: flex; }
.bk__veil {
  position: absolute; inset: 0;
  background: rgba(29, 16, 22, .58);
  backdrop-filter: blur(9px) saturate(120%);
  -webkit-backdrop-filter: blur(9px) saturate(120%);
  animation: bkFade .3s var(--ease);
}
.bk__box {
  position: relative; z-index: 1;
  width: min(720px, 100%);
  max-height: min(92vh, 940px);
  max-height: min(92svh, 940px);
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 40px 110px -40px rgba(120, 30, 60, .45),
              0 4px 18px -8px rgba(120, 30, 60, .18);
  overflow: hidden;
  animation: bkRise .42s var(--ease-soft);
}
@keyframes bkFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bkRise {
  from { opacity: 0; transform: translateY(26px) scale(.975); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Tête ---------- */
.bk__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: clamp(22px, 3vw, 30px) clamp(22px, 3.4vw, 36px) 16px;
}
.bk__sur { font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--rose-deep); }
.bk__titre { font-size: clamp(21px, 2.6vw, 29px); font-weight: 200; letter-spacing: -.03em; margin-top: 6px; }
.bk__x {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%;
  background: var(--ivory-warm); border: 0; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--rose-deep);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.bk__x:hover { background: var(--rose-deep); color: #fff; }

.bk__jauge { height: 2px; background: var(--blush-pale); }
.bk__jauge-fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--rose), var(--rose-deep));
  transition: width .5s var(--ease-soft);
}

/* ---------- Fil des étapes ---------- */
.bk__pas {
  display: flex; align-items: center; gap: 6px; list-style: none; margin: 0;
  /* un padding bas était absent : la ligne de texte se faisait rogner
     par le bloc suivant, qui remontait sur elle. */
  padding: 15px clamp(22px, 3.4vw, 36px) 14px;
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto; scrollbar-width: none;
  flex: 0 0 auto;
}
.bk__pas::-webkit-scrollbar { display: none; }
.bk__pas-item {
  display: flex; align-items: center; gap: 7px; flex: 0 0 auto;
  line-height: 1.4; white-space: nowrap;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rose-deep); opacity: .42; padding-right: 10px;
  transition: opacity .35s var(--ease);
}
.bk__pas-item span {
  width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blush-pale); font-size: 9.5px;
}
.bk__pas-item.is-on { opacity: 1; color: var(--ink); }
.bk__pas-item.is-on span { background: var(--rose-deep); color: #fff; }
.bk__pas-item.is-fait { opacity: .72; }
.bk__pas-item.is-fait span { background: var(--rose); color: #fff; }

/* ---------- Corps défilant ---------- */
.bk__corps {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(18px, 2.6vw, 26px) clamp(22px, 3.4vw, 36px);
}
.bk-entre { animation: bkPanneau .38s var(--ease-soft); }
@keyframes bkPanneau {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}
.bk__aide { font-size: 13.5px; color: var(--rose-deep); margin-bottom: 18px; }
.bk__groupe + .bk__groupe { margin-top: 26px; }
.bk__groupe-titre {
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--rose-deep); margin-bottom: 12px; font-weight: 400;
}

/* ---------- Cartes de prestation ---------- */
.bk__cartes { display: grid; gap: 10px; }
.bk__carte {
  position: relative; display: flex; align-items: center; gap: 15px; width: 100%;
  padding: 14px; border-radius: 16px; cursor: pointer; text-align: left;
  background: #fff; border: 1px solid var(--line-soft);
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease-soft);
}
.bk__carte:hover { border-color: var(--rose); transform: translateY(-2px); }
.bk__carte.is-on { border-color: var(--rose-deep); background: var(--blush-pale); }
.bk__carte-vis {
  width: 60px; height: 60px; flex: 0 0 auto; border-radius: 13px; overflow: hidden;
  background: var(--grad-rose); display: grid; place-items: center;
}
.bk__carte-vis img { width: 100%; height: 100%; object-fit: cover; }
.bk__carte-ini { font-size: 22px; font-weight: 200; color: var(--rose-deep); }
.bk__carte-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk__carte-nom { font-size: 15px; }
.bk__carte-desc {
  font-size: 12.5px; opacity: .7; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bk__carte-meta { font-size: 11px; letter-spacing: .1em; color: var(--rose-deep); margin-top: 2px; }
.bk__coche {
  width: 21px; height: 21px; flex: 0 0 auto; margin-left: auto; border-radius: 50%;
  border: 1px solid var(--line); position: relative;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.bk__carte.is-on .bk__coche { background: var(--rose-deep); border-color: var(--rose-deep); }
.bk__carte.is-on .bk__coche::after {
  content: ""; position: absolute; left: 6px; top: 3px;
  width: 6px; height: 10px; border: solid #fff; border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
}

/* ---------- Coiffeuses ---------- */
.bk__pros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.bk__pro {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 20px 14px; border-radius: 16px; cursor: pointer; text-align: center;
  background: #fff; border: 1px solid var(--line-soft);
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease-soft);
}
.bk__pro:hover { border-color: var(--rose); transform: translateY(-2px); }
.bk__pro.is-on { border-color: var(--rose-deep); background: var(--blush-pale); }
.bk__pro-ph {
  width: 58px; height: 58px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; margin-bottom: 6px;
  background: var(--grad-rose); color: var(--rose-deep);
  font-size: 20px; font-weight: 200;
}
.bk__pro-ph img { width: 100%; height: 100%; object-fit: cover; }
.bk__pro-ph--any { font-size: 20px; }
.bk__pro-nom { font-size: 14.5px; }
.bk__pro-rol { font-size: 11px; opacity: .7; line-height: 1.4; }
.bk__pro-note { font-size: 11px; color: var(--gold); letter-spacing: .06em; }

/* ---------- Calendrier ---------- */
.bk__cal { max-width: 420px; margin: 0 auto; }
.bk__cal-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.bk__cal-mois { font-size: 16px; letter-spacing: .02em; text-transform: capitalize; }
.bk__cal-fl {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ivory-warm); border: 0; cursor: pointer; color: var(--ink);
  transition: background .3s var(--ease), opacity .3s var(--ease);
}
.bk__cal-fl:hover:not(:disabled) { background: var(--rose); color: #fff; }
.bk__cal-fl:disabled { opacity: .3; cursor: default; }
.bk__cal-jours, .bk__cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.bk__cal-jours span {
  text-align: center; font-size: 10px; letter-spacing: .1em;
  color: var(--rose-deep); padding-bottom: 8px;
}
.bk__jour {
  aspect-ratio: 1; border-radius: 12px; border: 1px solid transparent;
  background: var(--ivory-warm); cursor: pointer; font-size: 14px; color: var(--ink);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease-soft);
}
.bk__jour:hover:not(:disabled) { background: var(--rose); color: #fff; transform: scale(1.06); }
.bk__jour.is-on { background: var(--rose-deep); color: #fff; }
.bk__jour.is-off, .bk__jour:disabled { background: transparent; color: rgba(29,16,22,.22); cursor: default; }
.bk__jour--vide { background: transparent; }
.bk__legende { margin-top: 16px; font-size: 11px; color: var(--rose-deep); display: flex; align-items: center; gap: 8px; }
.bk__pastille { width: 12px; height: 12px; border-radius: 4px; background: var(--ivory-warm); display: inline-block; }

/* ---------- Créneaux ---------- */
.bk__heures { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.bk__heure {
  padding: 13px 6px; border-radius: 13px; cursor: pointer; font-size: 14px;
  background: var(--ivory-warm); border: 1px solid transparent; color: var(--ink);
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease-soft);
}
.bk__heure:hover { background: var(--rose); color: #fff; transform: translateY(-2px); }
.bk__heure.is-on { background: var(--rose-deep); color: #fff; }
.bk__vide { text-align: center; padding: 40px 10px; line-height: 1.8; color: var(--rose-deep); }

/* ---------- Coordonnées ---------- */
.bk__form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bk__champ { display: flex; flex-direction: column; gap: 6px; }
.bk__champ--large { grid-column: 1 / -1; }
.bk__champ label { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--rose-deep); }
.bk__champ input, .bk__champ textarea {
  padding: 14px 15px; border-radius: 13px; font-size: 14.5px;
  background: var(--ivory-warm); border: 1px solid transparent; color: var(--ink);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.bk__champ input:focus, .bk__champ textarea:focus {
  outline: none; border-color: var(--rose-deep); background: #fff;
}
.bk__champ input.is-err, .bk__champ textarea.is-err { border-color: #c2185b; background: #fff5f8; }
.bk__champ-err { font-size: 11.5px; color: #c2185b; }
.bk__connecte {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
  padding: 16px; border-radius: 16px; background: var(--blush-pale);
}
.bk__connecte-ph {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--rose-deep); font-size: 18px;
}
.bk__connecte div { display: flex; flex-direction: column; }
.bk__connecte span { font-size: 12.5px; opacity: .75; }

/* ---------- Récapitulatif ---------- */
.bk__recap { border-radius: 16px; background: var(--ivory-warm); padding: 6px 20px; }
.bk__ligne {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid rgba(29,16,22,.07);
}
.bk__ligne:last-child { border-bottom: 0; }
.bk__ligne span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--rose-deep); }
.bk__ligne strong { font-weight: 400; text-align: right; }
.bk__ligne em { font-style: normal; opacity: .6; font-size: .88em; }
.bk__ligne--total strong { font-size: 25px; font-weight: 200; letter-spacing: -.02em; }
.bk__mention { margin-top: 16px; font-size: 12px; opacity: .68; text-align: center; }

/* ---------- Pied ---------- */
.bk__pied {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px clamp(22px, 3.4vw, 36px) clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--line-soft);
}
.bk__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px; border-radius: 13px; cursor: pointer;
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--line); color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), opacity .3s;
}
.bk__btn:hover:not(:disabled) { background: var(--ink); color: #fff; border-color: var(--ink); }
.bk__btn--plein { background: var(--rose-deep); border-color: var(--rose-deep); color: #fff; }
.bk__btn--plein:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); }
.bk__btn--large { flex: 1 1 auto; padding: 18px 30px; }
.bk__btn:disabled { opacity: .38; cursor: default; }

/* ---------- Attente ---------- */
.bk__spin {
  width: 15px; height: 15px; border-radius: 50%; display: inline-block;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: bkTourne .7s linear infinite;
}
.bk__spin--gros { width: 30px; height: 30px; border-width: 2.5px; border-color: var(--blush); border-top-color: var(--rose-deep); }
@keyframes bkTourne { to { transform: rotate(360deg); } }
.bk__chargement { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 54px 0; }
.bk__chargement p { font-size: 13px; color: var(--rose-deep); }
.bk__erreur {
  margin-bottom: 16px; padding: 13px 16px; border-radius: 12px;
  background: #fff0f4; border: 1px solid #f3c6d5; color: #a01342; font-size: 13.5px;
}

/* ---------- Succès ---------- */
.bk__succes { text-align: center; padding: 24px 0 12px; }
.bk__coche-ok { display: block; width: 86px; margin: 0 auto 22px; }
.bk__coche-ok svg { width: 100%; height: auto; }
.bk__coche-ok circle {
  fill: none; stroke: var(--rose-deep); stroke-width: 2;
  stroke-dasharray: 152; stroke-dashoffset: 152;
  animation: bkTrace .7s var(--ease-soft) forwards;
}
.bk__coche-ok path {
  fill: none; stroke: var(--rose-deep); stroke-width: 3.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: bkTrace .45s var(--ease-soft) .55s forwards;
}
@keyframes bkTrace { to { stroke-dashoffset: 0; } }
.bk__succes-titre { font-size: clamp(21px, 2.6vw, 28px); font-weight: 200; letter-spacing: -.03em; margin-bottom: 14px; }
.bk__succes-txt { font-size: 15px; line-height: 1.7; margin-bottom: 10px; }
.bk__succes-mail { font-size: 12.5px; opacity: .66; margin-bottom: 28px; }
.bk__succes-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.bk__succes-actions .bk__btn { text-decoration: none; }

body.bk-locked { overflow: hidden; }

/* ---------- Téléphone ---------- */
@media (max-width: 620px) {
  .bk { padding: 0; align-items: flex-end; }
  .bk__box { width: 100%; max-height: 94svh; border-radius: 20px 20px 0 0; }
  .bk__form { grid-template-columns: 1fr; }
  .bk__pros { grid-template-columns: 1fr 1fr; }
  .bk__pied { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .bk__btn { padding: 15px 20px; letter-spacing: .16em; }
  .bk__heures { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  @keyframes bkRise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .bk__box, .bk__veil, .bk-entre { animation: none; }
  .bk__coche-ok circle, .bk__coche-ok path { animation: none; stroke-dashoffset: 0; }
  .bk__carte:hover, .bk__pro:hover, .bk__heure:hover, .bk__jour:hover:not(:disabled) { transform: none; }
}
/* Mention sous le texte du popup quand il mène vers Google */
.rev-pop__note {
  font-size: 11.5px; font-style: italic; opacity: .68;
  margin: -14px 0 22px;
}

/* ══════════ RÉSERVATION VIA UNE PLATEFORME EXTERNE ══════════
   Booksy interdit l'affichage de sa page publique en cadre, mais expose un
   widget officiel conçu pour l'intégration. On l'encadre dans la fenêtre du
   site, avec une sortie vers un nouvel onglet en pied. */
.bkx {
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: center; justify-content: center;
  padding: clamp(0px, 3vw, 34px);
}
.bkx.is-open { display: flex; }
.bkx__veil {
  position: absolute; inset: 0;
  background: rgba(29, 16, 22, .58);
  backdrop-filter: blur(9px) saturate(120%);
  -webkit-backdrop-filter: blur(9px) saturate(120%);
  animation: bkFade .3s var(--ease);
}
.bkx__box {
  position: relative; z-index: 1;
  width: min(980px, 100%);
  height: min(880px, 92vh); height: min(880px, 92svh);
  display: flex; flex-direction: column;
  background: var(--ivory-warm);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 40px 110px -40px rgba(120, 30, 60, .45);
  animation: bkRise .42s var(--ease-soft);
}
.bkx__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: clamp(20px, 2.6vw, 28px) clamp(20px, 3vw, 34px) clamp(16px, 2vw, 22px);
  flex: 0 0 auto;
}
.bkx__sur { font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--rose-deep); }
.bkx__titre { font-size: clamp(21px, 2.6vw, 29px); font-weight: 200; letter-spacing: -.03em; margin-top: 6px; }
.bkx__x {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px;
  background: #fff; border: 1px solid var(--line-soft); cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.bkx__x:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.bkx__corps { position: relative; flex: 1 1 auto; background: #fff; }
.bkx__corps iframe { width: 100%; height: 100%; border: 0; display: block; }
.bkx__attente {
  position: absolute; inset: 0; display: grid; place-items: center; background: #fff;
}

.bkx__pied {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; flex: 0 0 auto;
  padding: 14px clamp(20px, 3vw, 34px);
  border-top: 1px solid var(--line-soft);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--rose-deep);
}
.bkx__pied strong { font-weight: 500; color: var(--ink); }
.bkx__onglet { color: var(--rose-deep); text-decoration: underline; text-underline-offset: 3px; }
.bkx__onglet:hover { color: var(--ink); }

@media (max-width: 620px) {
  .bkx { padding: 0; align-items: flex-end; }
  .bkx__box { width: 100%; height: 94svh; border-radius: 20px 20px 0 0; }
  .bkx__pied { justify-content: center; text-align: center; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .bkx__box, .bkx__veil { animation: none; } }