/* =========================================================================
   Fémina Coiffure — Maquette de prospection (Studio Faber)
   Autonome, hors-ligne. Tokens OKLCH, triade self-hostée.
   ========================================================================= */

/* ------------------------------ Fontes ---------------------------------- */
/* Triade re-choisie 2026-07-14 (retour Cédric : l'ancienne — Cormorant + Inter + Plex Mono —
   sentait l'IA/la tech/le SaaS). Newsreader = serif éditorial chaleureux à caractère (pas un serif
   « premium par défaut ») ; Hanken Grotesk = grotesque humaniste chaud (l'anti-Inter) ; mono SUPPRIMÉ.
   Variables : un fichier couvre la plage de graisses. */
@font-face {
  font-family: "Newsreader";
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/newsreader-var.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic; font-weight: 400 600; font-display: swap;
  src: url("../fonts/newsreader-italic-var.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../fonts/hanken-grotesk-var.woff2") format("woff2");
}

/* ------------------------------ Tokens ---------------------------------- */
:root {
  /* PIVOT CLAIR 2026-07-14 (retour Cédric : le dark aubergine étouffe ; la marque est CLAIRE).
     Palette tirée du VRAI logo : fond blush #EBD7D9, violet wordmark #61348E, rose/magenta
     chevelure #E488A0. */
  /* SOL — blush réel de la marque (clair, aéré) */
  --color-ground:      oklch(0.947 0.013 350);  /* blush clair, fond principal */
  --color-ground-2:    oklch(0.905 0.024 352);  /* section alternée, un peu plus rosée */
  --color-ground-3:    oklch(0.982 0.007 350);  /* cartes : blanc rosé, se détachent du fond */
  --color-ground-plum: oklch(0.90 0.038 322);   /* section "moment" : lavande douce */

  /* CTA / VIOLET de marque (le wordmark) */
  --color-plum:        oklch(0.44 0.16 300);    /* #61348E le violet de marque */
  --color-plum-deep:   oklch(0.35 0.14 302);
  --color-plum-hi:     oklch(0.50 0.17 300);    /* survolé */

  /* ENCRE — plum-violet sombre, lisible sur blush */
  --color-ink:         oklch(0.34 0.075 312);   /* corps */
  --color-ink-soft:    oklch(0.47 0.055 318);   /* méta */
  --color-ink-faint:   oklch(0.51 0.05 320);    /* méta secondaire (AA sur blush) */

  /* ACCENT — rose/magenta de la chevelure */
  --color-accent:      oklch(0.60 0.17 356);    /* liens/focus/petits accents */
  --color-accent-hi:   oklch(0.52 0.18 354);    /* survol / texte-accent (plus foncé = AA sur clair) */
  --color-accent-ink:  oklch(0.99 0.004 350);   /* texte sur accent plein */

  /* OR — le point d'ÉCLAT (les étoiles) */
  --color-gold:        oklch(0.72 0.135 76);
  --color-gold-deep:   oklch(0.62 0.13 72);

  /* LIGNE & voiles — teintés rose sur clair */
  --color-line:        oklch(0.55 0.06 340 / 0.28);
  --color-line-soft:   oklch(0.60 0.05 340 / 0.15);
  --color-scrim:       oklch(0.20 0.05 320);    /* base scrim sous titres sur photo (reste sombre) */

  /* RELIEF — ombres douces teintées rose ; filet de lumière BLANC en haut des cartes */
  --shadow-card:       0 16px 38px -26px oklch(0.50 0.12 330 / 0.28);
  --shadow-card-hi:    0 26px 52px -28px oklch(0.50 0.13 330 / 0.40);
  --edge-hi:           inset 0 1px 0 oklch(1 0 0 / 0.7);

  /* BANDEAU "moment" — devient un violet profond (l'unique bloc saturé, rythme de température) */
  --color-cream:       oklch(0.50 0.15 318);
  --color-cream-2:     oklch(0.42 0.14 316);
  --color-cream-ink:   oklch(0.98 0.02 350);
  --color-cream-plum:  oklch(0.98 0.02 350);

  /* Typo — Newsreader (serif éditorial chaud) + Hanken Grotesk (grotesque humaniste).
     --font-mono repointé sur Hanken tabulaire : la « donnée » (prix, horaires) reste alignée
     mais chaleureuse, plus jamais terminal. */
  --font-display: "Newsreader", "Times New Roman", Georgia, serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Espace (échelle 4/8) */
  --sp-1: 0.5rem;  --sp-2: 0.75rem; --sp-3: 1rem;   --sp-4: 1.5rem;
  --sp-5: 2rem;    --sp-6: 3rem;    --sp-7: 4rem;    --sp-8: 6rem;
  --sp-9: 8rem;

  --wrap: 1240px;
  --radius: 3px;
  --radius-lg: 6px;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 0, 0.15, 1);
}

/* ------------------------------ Reset ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-ink);
  /* Le FIELD vit : deux halos chauds (aubergine haut-droite, rose bas-gauche) posés sur un
     léger dégradé vertical. Visible à travers toutes les sections transparentes — plus jamais
     d'aplat uniforme du haut en bas (calibration Cédric 2026-07-13). Fixé pour respirer au scroll. */
  background:
    radial-gradient(115% 60% at 88% -8%, oklch(0.90 0.055 340 / 0.75), transparent 55%),
    radial-gradient(95% 70% at -8% 42%, oklch(0.92 0.045 300 / 0.55), transparent 52%),
    radial-gradient(120% 90% at 50% 118%, oklch(0.91 0.05 352 / 0.55), transparent 60%),
    linear-gradient(180deg, oklch(0.958 0.012 350) 0%, oklch(0.928 0.02 348) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* MATIÈRE — grain fin fixe, statique (RM-safe), sur toute la page. Donne le velouté du lieu ;
   sous le header/menu/lightbox (z ≥ 99) qui restent nets. */
.grain {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0.028; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, picture, svg { display: block; max-width: 100%; }
/* garde-fou : toute icône inline sans dimension explicite reste à la taille du texte */
svg[aria-hidden], .brand__mark, .creme__mark, .creme__ghost svg { width: 1em; height: 1em; }
.brand__mark { width: 30px; height: 30px; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
/* confort tablette (device de présentation en terrain) : pas de délai de double-tap */
a, button, .btn, .gopen, summary { touch-action: manipulation; }
ul { list-style: none; }
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--color-plum); color: oklch(0.99 0.005 350);
  padding: 0.7em 1.1em; font-family: var(--font-mono); font-size: 0.8rem;
  letter-spacing: 0.06em;
}
.skip:focus { left: 0.75rem; top: 0.75rem; }

/* ---------------------------- Primitives -------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  display: inline-flex; align-items: center; gap: 0.7em;
}
.eyebrow::before {
  content: "";
  width: 1.9rem; height: 1px; flex: none;
  background: var(--color-accent);
  display: inline-block;
}
.eyebrow--center { justify-content: center; }
.eyebrow--accent { color: var(--color-accent); }

.h-display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.005em;
  color: var(--color-ink);
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--color-ink-soft);
  max-width: 58ch;
  line-height: 1.6;
}
p { max-width: 65ch; }

.mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* section rythme */
.section { padding-block: clamp(4rem, 9vw, 8rem); position: relative; }
/* cibles d'ancre : ne pas se caler sous le header fixe (74px) au clic de nav */
:where(#prestations, #galerie, #avis, #infos) { scroll-margin-top: 92px; }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section-head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .h2 { margin-top: 0.6rem; }
.section-head .lede { margin-top: 1.1rem; }

.rule { height: 1px; background: var(--color-line); border: 0; }

/* ---------------------------- Boutons ----------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-body); font-weight: 500;
  font-size: 0.98rem; letter-spacing: 0.005em;
  padding: 0.95em 1.5em;
  border-radius: var(--radius);
  transition: background .35s var(--ease-out), transform .2s var(--ease-out),
              box-shadow .35s var(--ease-out), color .35s var(--ease-out);
  will-change: transform;
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn--primary {
  background: var(--color-plum);
  color: oklch(0.99 0.005 350);
  box-shadow: 0 1px 0 oklch(0.7 0.15 300 / 0.5) inset,
              0 12px 30px -12px oklch(0.44 0.16 300 / 0.5);
}
.btn--primary:hover { background: var(--color-plum-hi); transform: translateY(-2px);
  box-shadow: 0 1px 0 oklch(0.75 0.16 300 / 0.6) inset,
              0 18px 40px -14px oklch(0.44 0.16 300 / 0.6); }
.btn--primary:active { transform: translateY(0); }

.btn--accent {
  background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600;
}
.btn--accent:hover { background: var(--color-accent-hi); transform: translateY(-2px); }

.btn--ghost {
  border: 1px solid var(--color-line);
  color: var(--color-plum);
  background: oklch(0.99 0.006 350 / 0.7);
  backdrop-filter: blur(4px);
}
.btn--ghost:hover { border-color: var(--color-accent); color: var(--color-accent-hi);
  background: oklch(1 0 0 / 0.85); }

.btn--block { width: 100%; justify-content: center; }
.btn--lg { padding: 1.1em 1.9em; font-size: 1.05rem; }

/* lien texte souligné accent */
.link-a {
  color: var(--color-ink);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 0.45em;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-size: 100% 1.5px; background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .3s var(--ease-out), color .3s var(--ease-out);
}
.link-a svg { width: 1em; height: 1em; transition: transform .3s var(--ease-out); }
.link-a:hover { color: var(--color-accent); }
.link-a:hover svg { transform: translateX(3px); }

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .4s var(--ease-out), border-color .4s var(--ease-out),
              backdrop-filter .4s var(--ease-out);
  border-bottom: 1px solid transparent;
  /* état top (sur la photo hero) : voile sombre dégradé DERRIÈRE la nav — garantit le
     contraste WCAG du texte (ink) ≥ 4.5:1 même sur une mèche claire du cliché (le
     text-shadow seul ne compte pas WCAG). Dense sur la hauteur de la barre (~74px, là où
     vit le texte), puis dissipé vers le hero ; remplacé par le fond opaque au scroll.
     Reste une ombre douce, pas un bandeau plein (cf. rejet « ça fait carte »). */
  background: linear-gradient(to bottom, oklch(0.15 0.035 322 / 0.68) 0%,
              oklch(0.15 0.035 322 / 0.62) 58%, oklch(0.15 0.035 322 / 0.32) 84%, transparent 100%);
  text-shadow: 0 1px 12px oklch(0.14 0.03 322 / 0.55);
}
.site-header.is-scrolled {
  background: oklch(0.955 0.014 350 / 0.86);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--color-line-soft);
  text-shadow: none;
}
/* menu mobile ouvert au SOMMET de la page (scroll 0) : le voile sombre "sur-photo" du
   header n'a plus de photo dessous (le panneau blush l'a remplacée). On le repasse en
   traitement clair pour rester cohérent — sinon un bandeau sombre coiffe un menu clair. */
body:has(.mobile-menu.is-open) .site-header {
  background: transparent;
  text-shadow: none;
}
body:has(.mobile-menu.is-open) .site-header .brand { color: var(--color-plum); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 74px;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.42rem; letter-spacing: 0.02em;
  color: oklch(0.99 0.005 350);   /* clair sur la photo (état top) */
}
.site-header.is-scrolled .brand { color: var(--color-plum); }
.brand__mark { width: 30px; height: 30px; flex: none; }
.brand__mark path, .brand__mark ellipse { transition: opacity .4s; }
.brand__word small {
  display: block; font-family: var(--font-mono); font-weight: 400;
  font-size: 0.55rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--color-ink-soft); margin-top: -2px; padding-left: 1px;
}
.nav__links { display: flex; align-items: center; gap: 2rem; }
.nav__link {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.05em;
  color: oklch(0.99 0.005 350); position: relative; padding: 0.4em 0;
  transition: color .3s var(--ease-out);
}
/* état top : lien CLAIR sur la photo ; scrollé (blush) : lien sombre */
.site-header.is-scrolled .nav__link { color: var(--color-ink-soft); }
.site-header.is-scrolled .nav__link:hover,
.site-header.is-scrolled .nav__link[aria-current="page"] { color: var(--color-plum); }
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta { display: inline-flex; }
/* zone tactile ≥ 44px (WCAG 2.5.5) sans grossir le bouton visuellement */
.nav__cta .btn { padding: 0.62em 1.2em; font-size: 0.85rem; min-height: 44px; }

.nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav__toggle svg { width: 26px; height: 26px; }

/* menu mobile */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: oklch(0.955 0.016 350 / 0.98);
  backdrop-filter: blur(16px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 2rem clamp(1.5rem, 6vw, 3rem);
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform .5s var(--ease-soft), opacity .4s, visibility .4s;
}
.mobile-menu.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-menu a {
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 600;
  color: var(--color-ink); padding: 0.35em 0; border-bottom: 1px solid var(--color-line-soft);
  display: flex; align-items: center; justify-content: space-between;
}
.mobile-menu a span { font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-ink-faint); }
/* le CTA garde la grotesque (rôle "lecture", pas un titre) malgré la cascade .mobile-menu a */
.mobile-menu a.btn { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600;
  justify-content: center; border-bottom: 0; margin-top: 2rem; padding: 1.1em 1.9em; }
.mobile-menu a.btn span { color: inherit; font-family: inherit; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { position: relative; min-height: 100dvh; display: flex; align-items: flex-end;
  overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
/* LQIP blur-up */
.hero__lqip {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: 62% 50%;
  filter: blur(24px); transform: scale(1.08);
  transition: opacity .7s var(--ease-out);
}
.hero.is-loaded .hero__lqip { opacity: 0; }

/* scrim : gradient montant + vignette gauche pour la zone de titre */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 58% at 84% 26%, oklch(0.74 0.10 66 / 0.16), transparent 62%),
    linear-gradient(to top, var(--color-scrim) 0%, oklch(0.17 0.035 322 / 0.72) 26%,
      oklch(0.17 0.035 322 / 0.15) 55%, transparent 75%),
    linear-gradient(to right, oklch(0.17 0.035 322 / 0.55) 0%, transparent 48%);
}
/* voile de révélation dorée : couche sombre/désaturée qui se dissipe */
.hero__reveal {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: oklch(0.17 0.03 322 / 0.55);
  mix-blend-mode: multiply;
  opacity: 1; transition: opacity 1.1s var(--ease-out);
}
.hero.is-loaded .hero__reveal { opacity: 0; }
/* l'image démarre plus froide/sombre puis chauffe vers la lumière tungstène du lieu */
.hero__media img { filter: brightness(0.80) saturate(0.78); transition: filter 1.3s var(--ease-out); }
.hero.is-loaded .hero__media img { filter: brightness(1.03) saturate(1.12) sepia(0.07) contrast(1.03); }

.hero__inner { position: relative; width: 100%; padding-block: clamp(2.5rem, 6vh, 5rem) clamp(3rem, 7vh, 5.5rem); }
.hero__content { max-width: 40rem; }
/* filet de lisibilité pour l'eyebrow méta posé sur une zone parfois claire du cliché */
.hero__eyebrow { text-shadow: 0 1px 10px oklch(0.14 0.03 322 / 0.7); }
.hero__eyebrow { margin-bottom: 1.4rem; }
.hero__title {
  font-size: clamp(3.25rem, 7vw, 6rem);
  margin-bottom: 1.5rem;
  color: oklch(0.99 0.006 350);          /* clair sur la photo */
}
.hero__sub { font-size: clamp(1.05rem, 1.6vw, 1.24rem); color: oklch(0.945 0.01 350);
  max-width: 34ch; margin-bottom: 2.2rem; line-height: 1.55; }
/* hero sur photo sombre : eyebrow + cue clairs */
.hero__eyebrow { color: oklch(0.95 0.012 350); }
.hero .scroll-cue { color: oklch(0.92 0.012 350 / 0.85); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* badge note, coin bas droit */
.hero__badge {
  position: absolute; right: 0; bottom: clamp(3rem, 7vh, 5.5rem);
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.85rem 1.15rem;
  background: oklch(0.99 0.008 350 / 0.86);
  border: 1px solid oklch(0.55 0.06 340 / 0.28);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px -16px oklch(0.45 0.12 330 / 0.5);
}
.hero__badge .stars { display: flex; gap: 1px; color: var(--color-gold-deep);
  filter: drop-shadow(0 1px 3px oklch(0.65 0.13 78 / 0.3)); }
.hero__badge .stars svg { width: 15px; height: 15px; }
.hero__badge .score { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; line-height: 1;
  color: var(--color-plum); }
.hero__badge .meta { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em;
  color: var(--color-ink-soft); line-height: 1.3; }
/* badge note cliquable → ramène aux avis */
.hero__badge { transition: transform .3s var(--ease-out), border-color .3s var(--ease-out),
  box-shadow .3s var(--ease-out); }
.hero__badge:hover { transform: translateY(-2px); border-color: oklch(0.80 0.12 84 / 0.5);
  box-shadow: 0 14px 34px -18px oklch(0.08 0.06 330 / 0.9); }

/* animation d'entrée du contenu (révélation dorée : titre monte en fade) */
.reveal-up { opacity: 0; transform: translateY(16px); }
.hero.is-loaded .reveal-up { animation: revealUp .85s var(--ease-out) forwards; }
.hero.is-loaded .reveal-up.d1 { animation-delay: .12s; }
.hero.is-loaded .reveal-up.d2 { animation-delay: .24s; }
.hero.is-loaded .reveal-up.d3 { animation-delay: .36s; }
.hero.is-loaded .reveal-up.d4 { animation-delay: .5s; }
@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }

/* scroll cue */
.scroll-cue {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--color-ink-faint); z-index: 2;
}
.scroll-cue__line { width: 1px; height: 34px; background: linear-gradient(var(--color-accent), transparent);
  animation: cuePulse 2.2s var(--ease-out) infinite; transform-origin: top; }
@keyframes cuePulse { 0%,100% { opacity: .4; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }

/* =========================================================================
   SECTION LE SALON — split asymétrique
   ========================================================================= */
.salon__grid {
  display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.salon__text p + p { margin-top: 1.2rem; }
.salon__text .lede { margin-bottom: 1.6rem; }
.salon__stats {
  display: flex; flex-wrap: wrap; gap: 2.2rem; margin-top: 2.4rem;
  padding-top: 2rem; border-top: 1px solid var(--color-line);
}
.stat__num { font-family: var(--font-display); font-weight: 600; font-size: 2.4rem; line-height: 1;
  color: var(--color-ink); }
.stat__num .u { color: var(--color-gold); }
.stat__label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-ink-soft); margin-top: 0.5rem; max-width: 16ch; }
/* la note du salon RAMÈNE aux avis (tout ce qui parle d'une preuve est cliquable) */
.stat--link { display: block; transition: transform .3s var(--ease-out); }
.stat--link .stat__label { transition: color .3s var(--ease-out); }
.stat--link:hover { transform: translateY(-2px); }
.stat--link:hover .stat__label { color: var(--color-gold); }

.salon__figure { position: relative; }
.salon__figure .frame {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  border: 1px solid var(--color-line); aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-card-hi);
}
.salon__figure img { width: 100%; height: 100%; object-fit: cover; }
.salon__figure figcaption {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em;
  color: var(--color-ink-soft); margin-top: 0.9rem; display: flex; align-items: center; gap: 0.5em;
}
.salon__figure figcaption svg { width: 1em; height: 1em; color: var(--color-accent); }
/* petit tag prune flottant */
.salon__figure .tag {
  position: absolute; left: -0.75rem; top: 1.5rem; z-index: 2;
  background: linear-gradient(155deg, var(--color-plum), var(--color-plum-deep));
  color: oklch(0.98 0.01 350);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.55em 0.9em; border-radius: var(--radius);
  border: 1px solid oklch(0.80 0.12 84 / 0.28);
  box-shadow: 0 12px 30px -14px oklch(0.12 0.08 328 / 0.95), var(--edge-hi);
}

/* =========================================================================
   PRESTATIONS
   ========================================================================= */
.prestations {
  background:
    radial-gradient(90% 70% at 100% -5%, oklch(0.89 0.06 340 / 0.6), transparent 52%),
    radial-gradient(70% 60% at -5% 100%, oklch(0.91 0.05 300 / 0.45), transparent 50%),
    var(--color-ground-2);
}
.prix-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.1rem;
}
.pcard {
  position: relative; overflow: hidden;
  background:
    linear-gradient(160deg, oklch(0.995 0.006 350) 0%, var(--color-ground-3) 55%,
      oklch(0.955 0.022 350) 100%);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-lg);
  padding: 1.7rem 1.7rem 1.6rem;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-card), var(--edge-hi);
  transition: border-color .35s var(--ease-out), transform .35s var(--ease-out),
              box-shadow .35s var(--ease-out), background .35s var(--ease-out);
}
.pcard:hover { border-color: var(--color-accent); transform: translateY(-4px);
  box-shadow: var(--shadow-card-hi), var(--edge-hi),
              0 0 0 1px oklch(0.68 0.11 350 / 0.25); }
/* carte cliquable → réservation (pattern « lien étiré » : un vrai lien, zone de clic = toute la carte) */
.pcard--book { cursor: pointer; }
.pcard__book {
  margin-top: 1.3rem; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--font-body); font-weight: 600; font-size: 0.9rem;
  color: var(--color-accent-hi);
  transition: color .3s var(--ease-out), gap .3s var(--ease-out); }
.pcard__book svg { width: 1em; height: 1em; }
.pcard__book::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--radius-lg); }
.pcard--book:hover .pcard__book { color: var(--color-accent-hi); gap: 0.7em; }
/* focus clavier : bordure de carte + anneau natif du lien (global :focus-visible) — robuste */
.pcard--book:focus-within { border-color: var(--color-accent); }
.pcard__book:focus-visible { outline-offset: 4px; }
.pcard__cat {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-ink-soft); display: inline-flex; align-items: center; gap: 0.55em; margin-bottom: 1.1rem;
}
.pcard__cat svg { width: 1.05em; height: 1.05em; color: var(--color-accent); flex: none; }
.pcard__name { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.1;
  margin-bottom: 0.35rem; }
.pcard__desc { font-size: 0.92rem; color: var(--color-ink-soft); line-height: 1.5; margin-bottom: 1.3rem; }
.pcard__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; padding-top: 1.15rem; border-top: 1px solid var(--color-line-soft); }
/* le PRIX = un objet typographique (grand chiffre serif), plus une petite donnée SaaS */
.pcard__price { font-family: var(--font-display); font-weight: 600; color: var(--color-ink);
  font-size: 2.9rem; line-height: 0.9; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pcard__price .dds { font-family: var(--font-body); font-size: 0.68rem; color: var(--color-ink-faint);
  letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-bottom: 0.4rem; font-weight: 600; }
.pcard__price .chf { font-family: var(--font-body); font-size: 0.9rem; color: var(--color-ink-soft);
  font-weight: 500; margin-left: 0.15em; }
.pcard__dur { font-family: var(--font-mono); font-size: 0.74rem; color: var(--color-ink-soft);
  text-align: right; display: inline-flex; align-items: center; gap: 0.4em; }
.pcard__dur svg { width: 0.95em; height: 0.95em; color: var(--color-ink-faint); }

/* spans asymétriques */
.pcard--brushing   { grid-column: span 5; }
.pcard--cb         { grid-column: span 4; }
.pcard--ccb        { grid-column: span 3; }
.pcard--homme      { grid-column: span 4; }
.pcard--autres     { grid-column: span 4; }
.pcard--signature  { grid-column: span 12; }

/* liste "autres catégories" */
.pcard--autres .pcard__name { font-size: 1.15rem; margin-bottom: 0.9rem; }
.autres-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.2rem; }
.autres-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem;
  font-size: 0.9rem; padding-bottom: 0.55rem; border-bottom: 1px dotted var(--color-line-soft); }
.autres-list li:last-child { border-bottom: 0; }
.autres-list .svc { color: var(--color-ink); }
.autres-list .devis { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-ink-soft);
  letter-spacing: 0.03em; white-space: nowrap; }

/* carte signature cryothérapie */
.pcard--signature {
  background:
    radial-gradient(120% 140% at 88% 12%, oklch(0.86 0.10 350 / 0.55) 0%, transparent 55%),
    var(--color-ground-3);
  border-color: oklch(0.62 0.14 356 / 0.4);
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: center;
  padding: 2.2rem 2.2rem;
  overflow: hidden;
}
.pcard--signature::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px oklch(0.6 0.1 350 / 0.15) inset; pointer-events: none;
}
/* eyebrow signature : accent-hi (plus clair) pour tenir AA ≥ 4.5:1 sur ground-3 tout en gardant la teinte rose */
.sig__eyebrow { color: var(--color-accent-hi); }
.pcard--signature .pcard__name { font-size: clamp(1.9rem, 3vw, 2.6rem); margin: 0.7rem 0 0.9rem; }
.pcard--signature .pcard__desc { font-size: 1rem; max-width: 46ch; margin-bottom: 0; }
.sig__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }
.sig__spark {
  width: 66px; height: 66px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, oklch(0.82 0.13 350 / 0.55), oklch(0.92 0.05 350 / 0.4));
  border: 1px solid oklch(0.62 0.14 356 / 0.4);
}
.sig__spark svg { width: 32px; height: 32px; color: var(--color-accent); }
.sig__aside .btn { align-self: stretch; justify-content: center; }

/* pied de section prestations */
.prestations__foot { margin-top: 2.2rem; display: flex; justify-content: flex-end; }

/* =========================================================================
   BANDEAU CRÈME — respiration (inversion de thème)
   ========================================================================= */
.creme {
  background:
    linear-gradient(180deg, var(--color-cream) 0%, var(--color-cream-2) 100%);
  color: var(--color-cream-ink);
  text-align: center;
  position: relative; overflow: hidden;
}
.creme .wrap { position: relative; z-index: 2; }
.creme__quote {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 5vw, 3.8rem); line-height: 1.12;
  color: var(--color-cream-plum); max-width: 20ch; margin-inline: auto;
  letter-spacing: -0.01em; text-wrap: balance;
}
.creme__mark { display: block; width: 46px; height: 46px; margin: 0 auto 1.6rem;
  color: var(--color-cream-plum); }
.creme__sig { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--color-cream-ink); margin-top: 1.8rem; }
/* profil détouré des cheveux, très discret en filigrane */
.creme__ghost {
  position: absolute; right: -4%; bottom: -18%; width: min(38vw, 420px); z-index: 1;
  opacity: 0.12; color: var(--color-cream-plum); pointer-events: none;
}
.creme__ghost--left { left: -6%; right: auto; top: -22%; bottom: auto; transform: scaleX(-1);
  width: min(28vw, 320px); opacity: 0.08; }

/* =========================================================================
   GALERIE
   ========================================================================= */
.gal-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.1rem;
}
.gfig { position: relative; margin: 0; }
.gfig button.gopen {
  display: block; width: 100%; position: relative; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--color-line-soft);
  background: var(--color-ground-2); box-shadow: var(--shadow-card); }
/* le <picture> doit remplir le bouton pour que l'image en object-cover ne laisse pas de bande */
.gfig .gopen picture { display: block; width: 100%; height: 100%; }
.gfig img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease-out), filter .5s var(--ease-out);
  filter: brightness(1.03) saturate(1.04); }
.gfig .gopen::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, oklch(0.18 0.035 322 / 0.5), transparent 45%);
  opacity: 0; transition: opacity .4s var(--ease-out); pointer-events: none;
}
.gfig .gopen:hover img { transform: scale(1.045); filter: brightness(1.02) saturate(1.05); }
.gfig .gopen:hover::after { opacity: 1; }
.gfig .gopen:focus-visible { outline-offset: 4px; }
.gfig .expand {
  position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  background: oklch(0.22 0.04 320 / 0.72); border: 1px solid oklch(0.9 0.03 340 / 0.4);
  display: grid; place-items: center; color: oklch(0.98 0.008 350);
  opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s;
  backdrop-filter: blur(4px);
}
.gfig .expand svg { width: 17px; height: 17px; }
.gfig .gopen:hover .expand, .gfig .gopen:focus-visible .expand { opacity: 1; transform: translateY(0); }
.gfig figcaption {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em;
  color: var(--color-ink-soft); margin-top: 0.8rem; display: flex; align-items: center; gap: 0.5em;
}
.gfig figcaption svg { width: 0.95em; height: 0.95em; color: var(--color-accent); flex: none; }

/* dispositions asymétriques — rangée du haut à HAUTEUR ÉGALE (zéro trou, hauteurs alignées) */
.gfig--a { grid-column: span 7; grid-row: 1; }
.gfig--b { grid-column: span 5; grid-row: 1; }
.gfig--c { grid-column: 1 / -1; grid-row: 2; }
.gfig--a .gopen, .gfig--b .gopen { height: clamp(300px, 33vw, 452px); }
.gfig--c .gopen { aspect-ratio: 21 / 8; }

.gal__note { font-family: var(--font-mono); font-size: 0.68rem; color: var(--color-ink-faint);
  margin-top: 1.6rem; letter-spacing: 0.03em; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: oklch(0.17 0.03 322 / 0.95); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease-out), visibility .3s;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__stage { position: relative; max-width: min(1100px, 92vw); max-height: 86vh;
  display: flex; flex-direction: column; }
.lightbox__img { max-width: 100%; max-height: 78vh; width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius-lg); box-shadow: 0 40px 80px -30px oklch(0.14 0.05 322 / 0.8); }
.lightbox__cap { font-family: var(--font-body); font-size: 0.8rem; color: var(--color-ink-soft);
  margin-top: 1rem; text-align: center; letter-spacing: 0.03em;
  background: var(--color-ground); padding: 0.5em 1em; border-radius: var(--radius);
  align-self: center; }
.lb-btn {
  position: absolute; z-index: 3; width: 48px; height: 48px; border-radius: 50%;
  background: oklch(0.26 0.045 320 / 0.88); border: 1px solid oklch(0.9 0.03 340 / 0.42);
  display: grid; place-items: center; color: oklch(0.98 0.008 350);
  transition: background .3s, border-color .3s, transform .2s;
}
.lb-btn:hover { background: var(--color-plum); border-color: transparent; }
.lb-btn svg { width: 22px; height: 22px; }
.lb-close { top: -3.2rem; right: 0; }
.lb-prev { left: -4.2rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: -4.2rem; top: 50%; transform: translateY(-50%); }
.lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__count { position: absolute; top: -3.2rem; left: 0; font-family: var(--font-mono);
  font-size: 0.78rem; color: oklch(0.9 0.02 340); letter-spacing: 0.05em; }

/* =========================================================================
   AVIS
   ========================================================================= */
/* le MOMENT aubergine (rythme de température) : fond profond + halo rose qui VIT (cf. main-propre) */
.avis {
  position: relative;
  background:
    radial-gradient(120% 95% at 12% -6%, oklch(0.88 0.075 350 / 0.55), transparent 58%),
    radial-gradient(95% 85% at 102% 110%, oklch(0.89 0.06 316 / 0.55), transparent 55%),
    var(--color-ground-plum);
}
.avis__head { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
/* plaque de note DESSINÉE : dorure fine, or qui brille, fond aubergine — plus une boîte grise froide */
.avis__badge {
  display: flex; align-items: center; gap: 1.1rem; padding: 1.05rem 1.5rem;
  background: linear-gradient(158deg, oklch(0.995 0.006 350 / 0.92), oklch(0.965 0.02 350 / 0.86));
  border: 1px solid oklch(0.72 0.13 78 / 0.45); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), inset 0 1px 0 oklch(1 0 0 / 0.7);
}
.avis__badge .big { font-family: var(--font-display); font-weight: 600; font-size: 2.9rem; line-height: 1;
  color: var(--color-plum); }
.avis__badge .stars { display: flex; gap: 2px; color: var(--color-gold-deep);
  filter: drop-shadow(0 1px 3px oklch(0.65 0.13 78 / 0.35)); }
.avis__badge .stars svg { width: 18px; height: 18px; }
.avis__badge .lbl { font-size: 0.74rem; letter-spacing: 0.02em; color: var(--color-ink-soft); line-height: 1.35; }
.avis__badge { transition: transform .3s var(--ease-out), border-color .3s var(--ease-out); }
.avis__badge:hover { transform: translateY(-2px); border-color: oklch(0.80 0.12 84 / 0.6); }

.avis-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.quote {
  position: relative;
  background: linear-gradient(160deg, oklch(0.995 0.006 350) 0%, oklch(0.978 0.012 350) 55%,
    oklch(0.958 0.022 350) 100%);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-lg); padding: 1.7rem 1.8rem 1.6rem;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-card), var(--edge-hi);
  transition: border-color .35s var(--ease-out), transform .35s var(--ease-out),
              box-shadow .35s var(--ease-out); }
.quote:hover { border-color: oklch(0.72 0.13 78 / 0.5); transform: translateY(-3px);
  box-shadow: var(--shadow-card-hi), var(--edge-hi); }
/* le SIGNAL de vente universel : 5 étoiles dorées, sur CHAQUE carte */
.quote__stars { display: flex; gap: 2px; color: var(--color-gold-deep); margin-bottom: 1rem;
  filter: drop-shadow(0 1px 2px oklch(0.65 0.13 78 / 0.3)); }
.quote__stars svg { width: 16px; height: 16px; }
.quote__text { font-family: var(--font-display); font-weight: 500; font-size: 1.42rem; line-height: 1.34;
  color: var(--color-ink); flex: 1; text-wrap: pretty; }
.quote--long .quote__text { font-size: 1.24rem; }
/* pied : avatar initiale + nom + date (chaleureux, pas de méta mono froide) */
.quote__by { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.5rem; }
.quote__avatar { width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 600;
  font-size: 1.05rem; color: oklch(0.96 0.02 340);
  background: radial-gradient(circle at 38% 32%, oklch(0.46 0.14 340), oklch(0.30 0.11 328));
  box-shadow: inset 0 1px 0 oklch(0.9 0.05 340 / 0.25), 0 4px 12px -6px oklch(0.1 0.08 330 / 0.8); }
.quote__who { display: flex; flex-direction: column; line-height: 1.35; }
.quote__who .nm { color: var(--color-ink); font-weight: 600; font-size: 0.95rem; }
.quote__who .dt { color: var(--color-ink-faint); font-size: 0.8rem; }
.avis__source { font-size: 0.8rem; color: var(--color-ink-soft);
  margin-top: 1.6rem; display: inline-flex; align-items: center; gap: 0.5em; }
.avis__source svg { width: 1em; height: 1em; color: var(--color-gold); }

/* =========================================================================
   INFOS PRATIQUES
   ========================================================================= */
.infos__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.infos__col > * + * { margin-top: 2.2rem; }
.info-block__label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--color-accent-hi); margin-bottom: 0.9rem;
  display: inline-flex; align-items: center; gap: 0.5em; }
.info-block__label svg { width: 1.05em; height: 1.05em; }
.address { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.3;
  color: var(--color-ink); }
.address + .link-a { margin-top: 0.9rem; }

/* horaires */
.hours { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 0.95rem; }
.hours th { text-align: left; font-weight: 500; }
.hours td, .hours th { padding: 0.62rem 0; border-bottom: 1px solid var(--color-line-soft);
  color: var(--color-ink-soft); }
.hours tr:last-child td, .hours tr:last-child th { border-bottom: 0; }
.hours .day { color: var(--color-ink); }
/* seule la VALEUR reste en mono tabulaire (donnée horaire alignée) */
.hours .val { text-align: right; font-family: var(--font-mono); font-size: 0.85rem;
  font-variant-numeric: tabular-nums; }
.hours .closed { color: var(--color-ink-faint); }
.hours tr.is-today .day, .hours tr.is-today .val { color: var(--color-ink); font-weight: 600; }
/* ligne du jour : filet OR à gauche + fond très léger — le jour courant se DÉTACHE, sobrement */
.hours tr.is-today { position: relative; }
.hours tr.is-today .day {
  box-shadow: inset 2px 0 0 var(--color-gold);
  padding-left: 0.8rem;
}
.hours tr.is-today .day, .hours tr.is-today .val { background: oklch(0.80 0.12 84 / 0.06); }
.hours .aujourdhui {
  display: inline-block; margin-left: 0.6em;
  font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-gold); background: oklch(0.80 0.12 84 / 0.12);
  padding: 0.18em 0.55em; border-radius: 999px; vertical-align: 0.12em;
  border: 1px solid oklch(0.80 0.12 84 / 0.4); font-weight: 600;
}

/* atouts */
.atouts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
.atout { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; color: var(--color-ink-soft); }
.atout__ic { width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--color-ground-3);
  border: 1px solid var(--color-line-soft); color: var(--color-accent); }
.atout__ic svg { width: 18px; height: 18px; }

/* VRAIE carte : tuile OpenStreetMap réelle (honnête, hors-ligne une fois sauvée), teintée
   pour s'accorder au thème aubergine — plus jamais de plan simulé (rejet Cédric). */
.map-card { position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--color-line); background: var(--color-ground-3); aspect-ratio: 3 / 2;
  box-shadow: var(--shadow-card); }
.map-card picture { display: block; width: 100%; height: 100%; }
.map-card .map-tile { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.82) brightness(1.0) contrast(1.02); }
.map-card::before { /* voile rose léger : accorde la carte au thème clair, sans la masquer */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, oklch(0.75 0.10 340 / 0.14), oklch(0.70 0.10 330 / 0.20));
  mix-blend-mode: multiply; }
.map-card .pin-label {
  position: absolute; left: 56%; top: 50%; transform: translate(-50%, -100%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem; pointer-events: none;
}
.map-card .pin-glyph { color: var(--color-accent);
  filter: drop-shadow(0 4px 10px oklch(0.1 0.06 330 / 0.85)); }
.map-card .pin-glyph svg { width: 36px; height: 36px; }
.map-card .pin-tip { font-size: 0.72rem; letter-spacing: 0.01em; font-weight: 600;
  color: oklch(0.99 0.005 350); background: var(--color-plum); padding: 0.35em 0.7em;
  border-radius: var(--radius); border: 1px solid oklch(0.72 0.13 78 / 0.35);
  box-shadow: 0 6px 16px -8px oklch(0.4 0.14 300 / 0.5); }
.map-card .map-link { position: absolute; right: 0.8rem; bottom: 0.8rem; z-index: 2; }
.map-card .map-link .btn { padding: 0.55em 1em; font-size: 0.8rem; }
.map-attr { position: absolute; left: 0.6rem; bottom: 0.45rem; z-index: 2;
  font-size: 0.58rem; letter-spacing: 0.02em; color: oklch(0.30 0.05 320 / 0.85);
  background: oklch(0.99 0.006 350 / 0.7); padding: 0.1em 0.5em; border-radius: 3px; }

/* contacts */
.contacts { display: flex; flex-direction: column; gap: 0.9rem; }
.contact-row {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem;
  background: linear-gradient(150deg, oklch(0.965 0.02 350), oklch(0.995 0.006 350));
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card), var(--edge-hi);
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.contact-row:hover { border-color: var(--color-accent); transform: translateX(3px);
  box-shadow: var(--shadow-card-hi), var(--edge-hi); }
.contact-row__ic { width: 42px; height: 42px; border-radius: var(--radius); flex: none;
  display: grid; place-items: center; background: oklch(0.85 0.09 350 / 0.55); color: var(--color-accent-hi);
  border: 1px solid oklch(0.62 0.14 356 / 0.3); }
.contact-row__ic svg { width: 20px; height: 20px; }
.contact-row__body { display: flex; flex-direction: column; min-width: 0; }
.contact-row__k { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-ink-faint); }
.contact-row__v { color: var(--color-ink); font-weight: 500; overflow-wrap: anywhere; }
.contact-row__arw { margin-left: auto; color: var(--color-ink-faint); transition: transform .3s, color .3s; }
.contact-row__arw svg { width: 18px; height: 18px; }
.contact-row:hover .contact-row__arw { color: var(--color-accent); transform: translateX(3px); }

/* =========================================================================
   CTA FINAL
   ========================================================================= */
.cta-final { position: relative; text-align: center; overflow: hidden; isolation: isolate;
  padding-block: clamp(5.5rem, 12vw, 10rem); }
/* photo du salon en fond + scrim aubergine : la section n'est plus vide, le texte reste AA */
.cta-final__media { position: absolute; inset: 0; z-index: -2; }
.cta-final__media picture { display: block; width: 100%; height: 100%; }
.cta-final__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  filter: brightness(0.74) saturate(0.98); }
/* scrim CONCENTRÉ derrière le texte centré (AA) et LÉGER ailleurs : on voit enfin le salon */
.cta-final::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(72% 92% at 50% 44%, oklch(0.15 0.05 322 / 0.66) 0%,
      oklch(0.15 0.05 322 / 0.30) 52%, transparent 80%),
    linear-gradient(180deg, oklch(0.17 0.05 322 / 0.18) 0%, oklch(0.15 0.05 322 / 0.34) 100%),
    radial-gradient(90% 120% at 50% 118%, oklch(0.40 0.14 305 / 0.35) 0%, transparent 60%);
}
.cta-final .wrap { position: relative; z-index: 1; }
.cta-final__title { font-size: clamp(2.4rem, 5.5vw, 4.5rem); margin-bottom: 1.1rem;
  color: oklch(0.99 0.006 350); }   /* clair sur la photo */
.cta-final__sub { color: oklch(0.93 0.01 350); font-size: 1.1rem; margin-bottom: 2.4rem; }
.cta-final__actions { display: flex; justify-content: center; }
.cta-final__alt { margin-top: 1.8rem; font-family: var(--font-body); font-size: 0.9rem;
  color: oklch(0.90 0.01 350); }
.cta-final__alt a { color: oklch(0.86 0.09 356); text-decoration: underline; text-underline-offset: 3px; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer { border-top: 1px solid var(--color-line); padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem; }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; align-items: flex-start; }
.footer__brand { display: flex; align-items: center; gap: 0.7rem; }
.footer__brand .brand__mark { width: 34px; height: 34px; }
.footer__addr { font-family: var(--font-mono); font-size: 0.82rem; color: var(--color-ink-soft);
  line-height: 1.7; margin-top: 1rem; }
.footer__links { display: flex; flex-wrap: wrap; gap: 1.4rem; font-family: var(--font-mono); font-size: 0.82rem; }
.footer__links a { color: var(--color-ink-soft); display: inline-flex; align-items: center; gap: 0.4em;
  transition: color .3s; }
.footer__links a svg { width: 1.05em; height: 1.05em; flex: none; color: var(--color-accent); }
.footer__links a:hover { color: var(--color-accent); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--color-line-soft); }
.footer__disclosure { font-family: var(--font-mono); font-size: 0.68rem; color: var(--color-ink-faint);
  letter-spacing: 0.02em; line-height: 1.6; }
.footer__credit { font-family: var(--font-mono); font-size: 0.68rem; color: var(--color-ink-faint);
  letter-spacing: 0.05em; }
.footer__credit b { color: var(--color-ink-soft); font-weight: 500; }

/* =========================================================================
   GRAMMAIRE RÉCHAUFFÉE (calibration Cédric 2026-07-13)
   Le mono partout sonnait « terminal / IA », froid pour un salon (chaleur/beauté).
   Décision d'auteur : le mono ne survit QUE sur la donnée tabulaire — prix
   (.pcard__price), durées (.pcard__dur), horaires-valeurs (.hours .val), compteur
   lightbox. Tout le reste — labels, eyebrows, nav, légendes, NOMS, méta — repasse en
   grotesque chaleureux. (Bloc en fin de cascade : override propre, sans !important.)
   ========================================================================= */
.brand__word small, .nav__link, .hero__badge .meta, .scroll-cue,
.stat__label, .salon__figure figcaption, .salon__figure .tag,
.pcard__cat, .autres-list .devis, .creme__sig, .gfig figcaption, .gal__note,
.avis__badge .lbl, .quote__by, .avis__source,
.info-block__label, .contact-row__k, .map-card .pin-tip, .map-attr,
.footer__addr, .footer__links, .footer__disclosure, .footer__credit {
  font-family: var(--font-body);
}
/* réglages fins post-bascule (le grotesque veut moins de chasse que le mono) */
.nav__link { font-size: 0.9rem; letter-spacing: 0.01em; }
.quote__by { letter-spacing: 0.01em; font-size: 0.82rem; }
.salon__figure figcaption, .gfig figcaption { letter-spacing: 0.01em; font-size: 0.8rem; }
.stat__label, .pcard__cat, .info-block__label, .contact-row__k {
  font-weight: 600;
}

/* =========================================================================
   REVEAL au scroll (générique, RM-safe via JS class)
   ========================================================================= */
.io { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.io.in { opacity: 1; transform: none; }
.io.d1 { transition-delay: .08s; } .io.d2 { transition-delay: .16s; }
.io.d3 { transition-delay: .24s; } .io.d4 { transition-delay: .32s; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1000px) {
  .pcard--brushing { grid-column: span 6; }
  .pcard--cb       { grid-column: span 6; }
  .pcard--ccb      { grid-column: span 6; }
  .pcard--homme    { grid-column: span 6; }
  .pcard--autres   { grid-column: span 6; }
  .salon__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .salon__figure { order: -1; }
  .lb-prev { left: 0.5rem; } .lb-next { right: 0.5rem; }
}

@media (max-width: 767px) {
  /* ---- LISIBILITÉ MOBILE (AA) : le corps/méta en encre claire lavait sur le blush + halos.
     On DENSIFIE l'encre douce (même teinte prune/aubergine, juste plus foncée) et on remonte
     le corps courant en encre pleine. Desktop intact (hors media query). Mesuré :
     ink-soft mobile ≈ 6,5:1 pire cas (ground-2/plum), ink-faint ≈ 5,9:1, .lede/corps ≈ 9:1. ---- */
  :root {
    --color-ink-soft:  oklch(0.42 0.065 316);
    --color-ink-faint: oklch(0.44 0.06 316);
  }
  .lede { color: var(--color-ink); }
  /* le 2e paragraphe du salon est posé en inline style (ink-soft) : on le force en encre pleine */
  .salon__text > p[style] { color: var(--color-ink) !important; }

  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .hero { align-items: flex-end; }
  .hero__media img { object-position: 55% 45%; }
  /* eyebrow long : tracking réduit + autoriser le retour à la ligne, ne jamais déborder */
  .hero__eyebrow { letter-spacing: 0.13em; font-size: 0.68rem; flex-wrap: wrap; }
  .hero__badge { position: static; margin-top: 2rem; align-self: flex-start;
    display: inline-flex; }
  .hero__content { max-width: 100%; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .hero__actions .link-a { justify-content: center; padding-top: 0.5rem; }
  .scroll-cue { display: none; }

  .prix-grid { grid-template-columns: 1fr; }
  .pcard--brushing, .pcard--cb, .pcard--ccb, .pcard--homme, .pcard--autres,
  .pcard--signature { grid-column: 1 / -1; }
  .pcard--signature { grid-template-columns: 1fr; padding: 1.8rem; }
  .sig__aside { flex-direction: row; align-items: center; width: 100%; }
  .sig__aside .btn { align-self: auto; flex: 1; }

  .gal-grid { grid-template-columns: 1fr; }
  /* le grid-row/-column explicites du desktop faisaient EMPILER gfig--a et --b dans la même
     cellule (rangée 1) → leurs deux légendes se superposaient. On rend la place au flux auto. */
  .gfig--a, .gfig--b, .gfig--c { grid-column: 1 / -1; grid-row: auto; }
  .gfig--a .gopen, .gfig--b .gopen, .gfig--c .gopen { aspect-ratio: 4 / 3; }

  .avis__head { grid-template-columns: 1fr; align-items: start; gap: 1.5rem; }
  .avis-grid { grid-template-columns: 1fr; }

  .infos__grid { grid-template-columns: 1fr; }
  .atouts { grid-template-columns: 1fr; }
  .footer__top { flex-direction: column; }

  .lb-prev, .lb-next { top: auto; bottom: 0.5rem; transform: none; }
  .lb-prev:hover, .lb-next:hover { transform: scale(1.06); }
  .lb-close { top: -3rem; }
}

@media (max-width: 400px) {
  .hero__title { font-size: 3rem; }
  .stat__num { font-size: 2rem; }
}

/* =========================================================================
   PREFERS-REDUCED-MOTION — révélation dorée à pleine chaleur d'emblée
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .hero__reveal { opacity: 0 !important; }
  .hero__lqip { opacity: 0 !important; }
  .hero__media img { filter: brightness(1) saturate(1.04) !important; }
  .reveal-up { opacity: 1 !important; transform: none !important; }
  .io { opacity: 1 !important; transform: none !important; }
  .scroll-cue__line { animation: none !important; }
}

/* print / fallback : jamais de contenu caché sans JS */
.no-js .io, .no-js .reveal-up { opacity: 1 !important; transform: none !important; }
.no-js .hero__reveal, .no-js .hero__lqip { opacity: 0 !important; }
.no-js .hero__media img { filter: brightness(1) saturate(1.04) !important; }