/* ==========================================================================
   Racine — feuille de style
   Reprise fidèle de la maquette Claude Design « Salon Racine v2 ».
   Deux univers : femme (crème, arches, Imbue fin) et barbier (encre,
   cadres cuivre, Imbue noir en capitales, Archivo étiré).
   ========================================================================== */

:root {
  --creme: #F2ECE3;
  --encre: #1C1613;
  --terre: #9A5A45;
  --metal: #C4834F;           /* cuivre ; « or » : #C9A45C (voir contenu.json) */
  --rose: #EADBCF;
  --sable: #E7DDD0;
  --lin: #E4D8CA;
  --noyer: #2A201A;
  --papier: #FBF7F1;
  --texte: #4A3F38;
  --gris: #6B5F57;
  --gris-fonce: #5E534B;
  --clair: #EEE5D8;
  --clair-2: #C9BCAE;
  --clair-3: #B0A294;
  --clair-4: #8F8276;
  --vert: #6F8F62;
  --vert-clair: #8FB07F;
  --vert-resa: #7FA06F;
  --rouge: #C0553E;
  --trait: rgba(28, 22, 19, .16);
  --trait-clair: rgba(238, 229, 216, .16);

  --serif: Imbue, "Times New Roman", serif;
  --sans: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --marge: clamp(20px, 5vw, 72px);
  --colonne-photo: clamp(116px, 34vw, 540px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --hachures-clair: repeating-linear-gradient(135deg, rgba(28, 22, 19, .045) 0 1px, transparent 1px 9px);
  --hachures-sombre: repeating-linear-gradient(135deg, rgba(238, 229, 216, .05) 0 1px, transparent 1px 9px);
}
:root[data-metal="or"] { --metal: #C9A45C; }

/* ── Base ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }
/* Défilement doux seulement une fois la page chargée (classe posée par site.js) :
   l’arrivée sur une ancre depuis une autre page (tarifs#barbier) reste immédiate. */
html.doux { scroll-behavior: smooth; }
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
a:hover { color: var(--terre); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--terre); color: var(--creme); }
:focus-visible { outline: 2px solid var(--terre); outline-offset: 3px; }
.sombre :focus-visible, .resa[data-univers="barbier"] :focus-visible { outline-color: var(--metal); }

@keyframes rcIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rcLb { from { opacity: 0; } to { opacity: 1; } }
@keyframes rcMenu { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }

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

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.lien-evitement {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  padding: 14px 18px; border-radius: 999px;
  background: var(--encre); color: var(--creme);
  font: 600 13px/1 var(--sans); text-decoration: none;
}
.lien-evitement:focus { top: 12px; color: var(--creme); }

/* ── Matières ─────────────────────────────────────────────────────────── */

.papier {
  background-color: var(--creme);
  background-image:
    repeating-linear-gradient(0deg, rgba(28, 22, 19, .022) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(28, 22, 19, .018) 0 1px, transparent 1px 5px);
}
.sombre {
  background-color: var(--encre);
  background-image: repeating-linear-gradient(90deg, rgba(238, 229, 216, .035) 0 1px, transparent 1px 16px);
  color: var(--clair);
}

/* ── Étiquettes et boutons ────────────────────────────────────────────── */

.surtitre {
  margin: 0;
  font: 600 10.5px/1.3 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gris);
}
.surtitre-metal {
  margin: 0;
  font: 700 10px/1.3 var(--sans);
  font-variation-settings: 'wdth' 125;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--metal);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 20px;
  border: 0; border-radius: 999px;
  font: 600 13px/1 var(--sans); letter-spacing: .03em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s, color .2s, filter .2s;
}
.btn-encre { background: var(--encre); color: var(--creme); }
.btn-encre:hover { background: var(--terre); color: var(--creme); }
.btn-contour { border: 1px solid var(--encre); background: transparent; color: var(--encre); }
.btn-contour:hover { background: var(--encre); color: var(--creme); }
.btn-creme { background: var(--creme); color: var(--encre); }
.btn-creme:hover { background: var(--rose); color: var(--encre); }
.btn-metal, .btn-metal-contour {
  border-radius: 0; padding: 0 18px;
  font: 700 11px/1 var(--sans); font-variation-settings: 'wdth' 125;
  letter-spacing: .14em; text-transform: uppercase;
}
.btn-metal { background: var(--metal); color: var(--encre); }
.btn-metal:hover { filter: brightness(1.08); color: var(--encre); }
.btn-metal-contour { border: 1px solid var(--metal); background: transparent; color: var(--clair); }
.btn-metal-contour:hover { background: var(--metal); color: var(--encre); }
.btn-grand { height: 52px; padding: 0 24px; font-size: 14px; }
.btn-metal.btn-grand { padding: 0 22px; font-size: 12px; }

.fleche, .fleche-bas { display: inline-block; }
.lien-fleche {
  display: inline-block;
  padding: 8px 0;
  border-bottom: 1px solid var(--encre);
  font: 600 13px/1 var(--sans);
  text-decoration: none; white-space: nowrap;
}

.pastille { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--vert); }
.ferme .pastille { background: var(--rouge); }

/* ── Photos et emplacements ───────────────────────────────────────────── */

.media { position: relative; display: block; overflow: hidden; }
.media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-femme { border-radius: 999px 999px 0 0; background: var(--lin) var(--hachures-clair); color: var(--gris); }
.media-barbier, .media-sombre { background: var(--noyer) var(--hachures-sombre); color: var(--clair-3); }
.media-mixte { border-radius: 999px 0 0 0; background: var(--sable) repeating-linear-gradient(135deg, rgba(28, 22, 19, .05) 0 1px, transparent 1px 9px); color: var(--gris); }
.media-sable { border-radius: 4px; background: var(--sable) var(--hachures-clair); color: var(--gris); }
.media-clair { background: var(--lin) var(--hachures-clair); color: var(--gris); }
.cadre::after {
  content: ""; position: absolute; inset: 8px;
  border: 1px solid var(--metal); opacity: .75; pointer-events: none;
}
.vide {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px; text-align: center;
  font: 500 13px/1.3 var(--sans); letter-spacing: .01em;
}
.vide svg { opacity: .45; }
.vide span { max-width: 90%; opacity: .75; }

/* ── En-tête ──────────────────────────────────────────────────────────── */

.entete {
  position: sticky; top: 0; z-index: 40;
  background: rgba(242, 236, 227, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(28, 22, 19, .12);
}
.entete-in {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1440px; margin: 0 auto;
  padding: 10px clamp(16px, 4vw, 48px);
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); }
.logo:hover { color: var(--encre); }
.logo-txt { display: flex; flex-direction: column; gap: 4px; }
.logo-nom { font: 500 25px/.85 var(--serif); letter-spacing: .1em; }
.logo-sous { font: 600 8.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gris); }

.monogramme {
  position: relative; flex: none; display: block;
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--encre);
  background: linear-gradient(var(--creme) 50%, var(--encre) 50%);
}
.monogramme > span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 600 25px/1 var(--serif);
}
.monogramme > span:first-child { color: var(--encre); clip-path: inset(0 0 50% 0); }
.monogramme > span:last-child { color: var(--creme); clip-path: inset(50% 0 0 0); }
.monogramme-inverse { background: linear-gradient(var(--encre) 50%, var(--creme) 50%); }
.monogramme-inverse > span:first-child { color: var(--creme); }
.monogramme-inverse > span:last-child { color: var(--encre); }

.nav-bureau { display: none; gap: 24px; }
.nav-bureau a {
  position: relative; padding: 6px 0 7px;
  font: 500 13px/1 var(--sans); letter-spacing: .02em;
  text-decoration: none; color: var(--encre);
}
.nav-bureau a:hover { color: var(--terre); }
/* Soulignement : rubrique en cours, et au survol */
.nav-trait {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0);
}
.nav-bureau a:hover .nav-trait, .nav-bureau a[aria-current="page"] .nav-trait { transform: none; }

.entete-actions { display: flex; align-items: center; gap: 8px; }
.statut-court {
  display: none; align-items: center; gap: 7px; margin-right: 8px;
  font: 500 12px/1 var(--sans); color: var(--texte);
  text-decoration: none; white-space: nowrap;
}
.btn-entete { height: 42px; padding: 0 18px; }
.btn-menu {
  width: 42px; height: 42px; padding: 0;
  border: 1px solid rgba(28, 22, 19, .3); border-radius: 50%;
  background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.btn-menu:hover { border-color: var(--encre); }
.btn-menu span { display: block; width: 16px; height: 1.5px; background: var(--encre); }
.btn-menu span + span { transform: scaleX(.625); transform-origin: right; }

@media (min-width: 1080px) {
  .nav-bureau { display: flex; }
  .statut-court:not([hidden]) { display: flex; }
}

/* ── Menu plein écran ─────────────────────────────────────────────────── */

.menu {
  position: fixed; inset: 0;
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0;
  flex-direction: column; overflow-y: auto;
}
.menu[open] { display: flex; animation: rcMenu .5s var(--ease) both; }
.menu::backdrop { background: transparent; }
.menu-tete {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px clamp(16px, 4vw, 48px);
}
.menu-nom { font: 500 25px/1 var(--serif); letter-spacing: .1em; }
.btn-fermer {
  height: 42px; padding: 0 16px;
  border: 1px solid rgba(238, 229, 216, .3); border-radius: 999px;
  background: transparent; color: var(--clair);
  font: 600 13px/1 var(--sans);
}
.btn-fermer:hover { border-color: var(--clair); }
.menu-nav {
  flex: 1; display: flex; flex-direction: column;
  max-width: 1000px; padding: 8px var(--marge) 24px;
}
.menu-nav a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid rgba(238, 229, 216, .1);
  text-decoration: none; color: var(--clair);
}
.menu-nav a:hover, .menu-nav a[aria-current="page"] { color: var(--metal); }
.menu-num {
  flex: none; width: 26px;
  font: 700 10px/1 var(--sans); font-variation-settings: 'wdth' 125;
  letter-spacing: .14em; color: var(--metal);
}
.menu-lib { font: 400 clamp(36px, 8vw, 68px)/1 var(--serif); }
.menu-resa { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 var(--marge) 16px; }
.menu-resa .btn { flex: 1 1 150px; height: 52px; }
.menu-resa .btn-creme { font-size: 14px; }
.menu-resa .btn-metal { font-size: 12px; }
.menu-pied {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding: 0 var(--marge) 28px;
  font: 400 13px/1.4 var(--sans); color: var(--clair-3);
}
.menu-pied a { color: var(--clair); }

/* ── Mise en page commune ─────────────────────────────────────────────── */

.page-tete {
  display: flex; flex-direction: column; gap: 18px;
  max-width: 1440px; margin: 0 auto;
  padding: clamp(40px, 7vw, 96px) var(--marge) 28px;
}
.page-tete-40 { padding-bottom: 40px; }
.page-titre {
  margin: 0;
  font: 300 clamp(54px, 10vw, 150px)/.86 var(--serif);
  letter-spacing: -.015em;
}
.page-intro {
  margin: 0; max-width: 52ch;
  font: 400 15px/1.55 var(--sans); color: var(--texte);
  text-wrap: pretty;
}

/* Bouton de disponibilité (« RDV dès … ») */
.dispo {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 7px;
  padding: 4px 0;
  font: 500 12px/1.3 var(--sans); color: var(--texte);
  text-align: left; text-decoration: none;
}
.dispo::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--vert); }
.sombre .dispo { color: var(--clair-2); }
.sombre .dispo::before { background: var(--vert-clair); }
.sombre .dispo:hover { color: var(--clair); }

/* ── Accueil : deux entrées ───────────────────────────────────────────── */

.entree-femme {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--colonne-photo);
  gap: clamp(14px, 3vw, 48px);
  align-items: end;
  min-height: clamp(262px, 36vw, 540px);
  padding: clamp(22px, 4vw, 56px) var(--marge) clamp(22px, 3vw, 40px);
}
.entree-barbier {
  display: grid;
  grid-template-columns: var(--colonne-photo) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 48px);
  align-items: start;
  min-height: clamp(262px, 36vw, 540px);
  padding: clamp(22px, 3vw, 40px) var(--marge) clamp(26px, 4vw, 56px);
}
.entree {
  position: relative;
  display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 18px);
  min-width: 0;
}
.entree-b { padding-top: clamp(26px, 2vw, 30px); }
.entree-titre-f {
  margin: 0;
  font: 300 clamp(68px, 16vw, 230px)/.8 var(--serif);
  letter-spacing: -.02em;
}
.entree-titre-b {
  margin: 0;
  font: 900 clamp(50px, 12.6vw, 180px)/.84 var(--serif);
  letter-spacing: .005em; text-transform: uppercase;
  color: var(--clair);
}
.entree-texte {
  margin: 0; max-width: 34ch;
  font: 400 clamp(14px, 1.25vw, 18px)/1.5 var(--sans);
  color: var(--texte); text-wrap: pretty;
}
.entree-b .entree-texte { color: var(--clair-2); }
.entree-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 4px; }
/* Tout le bloc de texte est cliquable, comme dans la maquette. */
.entree-lien { white-space: normal; }
.entree-lien::after { content: ""; position: absolute; inset: 0; }
.entree-photo { align-self: stretch; min-height: 190px; }

.medaillon-ancre { position: relative; z-index: 3; height: 0; }
.medaillon {
  position: absolute; top: -32px;
  right: calc(var(--marge) + var(--colonne-photo) / 2 - 32px);
  width: 64px; height: 64px;
}
.medaillon > span { font-size: 46px; }

/* ── Accueil : la maison ──────────────────────────────────────────────── */

.maison { padding: clamp(64px, 10vw, 140px) var(--marge); }
.maison-in {
  display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px);
  max-width: 1296px; margin: 0 auto;
}
.maison-titre {
  margin: 0; max-width: 11ch;
  font: 300 clamp(50px, 9vw, 136px)/.88 var(--serif);
  letter-spacing: -.015em; text-wrap: balance;
}
.maison-titre em { font-style: normal; font-weight: 800; color: var(--terre); }
.maison-textes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px 48px; max-width: 920px;
}
.maison-textes p { margin: 0; font: 400 16px/1.6 var(--sans); color: var(--texte); text-wrap: pretty; }
.ambiances { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ambiances figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ambiances figcaption { font: 500 12px/1.4 var(--sans); color: var(--gris); }
.ambiance-photo { aspect-ratio: 3 / 4; }
.ambiance-large { grid-column: span 2; }
.ambiance-large .media { flex: 1; min-height: 200px; }

/* ── Lignes de prestation (points de conduite) ────────────────────────── */

.presta {
  display: grid; gap: 5px;
  padding: 16px 0;
  border-top: 1px solid var(--trait);
  color: inherit; text-decoration: none;
  transition: background-color .2s;
}
.presta:hover { background: rgba(255, 255, 255, .25); color: inherit; }
.presta-ligne { display: flex; align-items: baseline; gap: 10px; }
.presta-nom { font: 400 25px/1.05 var(--serif); }
.presta-points {
  flex: 1; min-width: 16px;
  border-bottom: 1px dotted rgba(28, 22, 19, .4);
  transform: translateY(-5px);
}
.presta-prix { font: 600 14px/1 var(--sans); white-space: nowrap; }
.presta-detail { font: 400 14px/1.45 var(--sans); color: var(--gris-fonce); }
.presta-carte { gap: 4px; padding: 14px 0; }
.presta-carte .presta-nom { font-size: 23px; line-height: 1.1; }
.presta-carte .presta-detail { font-size: 13.5px; }

.sombre .presta { border-top-color: var(--trait-clair); }
.sombre .presta:hover { background: rgba(238, 229, 216, .04); }
.sombre .presta-nom { font-weight: 700; font-size: 23px; text-transform: uppercase; letter-spacing: .02em; }
.sombre .presta-carte .presta-nom { font-size: 21px; }
.sombre .presta-points { border-bottom-color: rgba(238, 229, 216, .35); }
.sombre .presta-prix { font-weight: 700; color: var(--metal); }
.sombre .presta-detail { color: var(--clair-3); }

/* ── Accueil : signatures ─────────────────────────────────────────────── */

.signatures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.signatures-f, .signatures-b {
  display: flex; flex-direction: column;
  padding: clamp(48px, 7vw, 96px) var(--marge);
}
.signatures-f { background: var(--rose); }
.signatures-titre-f { margin: 14px 0 28px; font: 300 clamp(44px, 5.5vw, 80px)/.92 var(--serif); }
.signatures-titre-b { margin: 14px 0 28px; font: 900 clamp(40px, 5vw, 72px)/.92 var(--serif); text-transform: uppercase; }
.signatures-tout { align-self: flex-start; margin-top: 24px; }

/* ── Bandes défilantes (galerie, équipe) ──────────────────────────────── */

.bande { padding: clamp(56px, 8vw, 112px) 0; }
.bande-sable { background: var(--sable); }
.bande-tete {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  max-width: 1440px; margin: 0 auto 24px; padding: 0 var(--marge);
}
.bande-tete > div { display: flex; flex-direction: column; gap: 12px; }
.bande-titre { margin: 0; font: 300 clamp(44px, 6vw, 88px)/.9 var(--serif); }
.defile {
  display: flex; gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--marge);
  padding: 0 var(--marge) 8px;
  scrollbar-width: none;
}
.defile::-webkit-scrollbar { display: none; }
.defile > * { scroll-snap-align: start; }
.defile:focus-visible { outline-offset: -2px; }
.defile-equipe { gap: 14px; }

.oeuvre { flex: 0 0 clamp(200px, 24vw, 320px); margin: 0; display: flex; flex-direction: column; gap: 10px; }
.oeuvre .media { aspect-ratio: 4 / 5; }
.oeuvre-lien, .membre-lien { display: block; color: inherit; }
.oeuvre figcaption {
  display: flex; justify-content: space-between; gap: 8px;
  font: 500 12px/1.4 var(--sans); color: var(--gris);
}

.membre-mini { flex: 0 0 clamp(190px, 20vw, 260px); display: flex; flex-direction: column; gap: 12px; }
.membre-mini .media { aspect-ratio: 3 / 4; }
.membre-mini-txt { display: flex; flex-direction: column; gap: 4px; }
.membre-mini-nom { font: 500 26px/1 var(--serif); }
.membre-mini-tag { font: 600 10px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.membre-mini-spe { font: 400 13.5px/1.45 var(--sans); color: var(--texte); }

/* ── Accueil : réserver ───────────────────────────────────────────────── */

.resa-accueil { padding: clamp(64px, 9vw, 128px) var(--marge); }
.resa-accueil-in {
  display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px);
  max-width: 1296px; margin: 0 auto;
}
.resa-accueil-titre {
  margin: 0; max-width: 13ch;
  font: 300 clamp(46px, 7.5vw, 112px)/.9 var(--serif);
  text-wrap: balance;
}
.etapes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  column-gap: 32px;
}
.etapes li {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 22px 0; border-top: 1px solid rgba(238, 229, 216, .18);
}
.etapes-num { font: 800 60px/.75 var(--serif); color: var(--metal); }
.etapes-txt { display: flex; flex-direction: column; gap: 6px; }
.etapes-txt strong { font: 600 17px/1.2 var(--sans); }
.etapes-txt span { font: 400 14px/1.5 var(--sans); color: var(--clair-3); }
.resa-accueil-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Accueil : avis ───────────────────────────────────────────────────── */

.avis-accueil { padding: clamp(64px, 9vw, 128px) var(--marge); }
.avis-accueil-in {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 40px 64px; align-items: end;
  max-width: 1296px; margin: 0 auto;
}
.avis-accueil-note { display: flex; flex-direction: column; gap: 18px; }
.note { display: flex; align-items: flex-end; gap: 14px; }
.note-chiffre { font: 200 clamp(110px, 15vw, 210px)/.78 var(--serif); letter-spacing: -.03em; }
.note-detail { padding-bottom: 4px; font: 500 13px/1.45 var(--sans); color: var(--gris); }
.etoiles { color: var(--terre); letter-spacing: .12em; }
.citation { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.citation blockquote { margin: 0; font: 400 clamp(28px, 3.2vw, 44px)/1.1 var(--serif); text-wrap: pretty; }
.citation figcaption { font: 500 13px/1.4 var(--sans); color: var(--gris); }
.citation .lien-fleche { align-self: flex-start; }

/* ── Prestations & tarifs ─────────────────────────────────────────────── */

.notes-tarifs {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  font: 500 12.5px/1.4 var(--sans); color: var(--gris);
}
.sauts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.saut-f, .saut-b { display: inline-flex; align-items: center; height: 44px; text-decoration: none; }
.saut-f {
  padding: 0 20px; border: 1px solid var(--encre); border-radius: 999px;
  background: var(--creme); color: var(--encre);
  font: 600 13px/1 var(--sans);
}
.saut-f:hover { background: var(--encre); color: var(--creme); }
.saut-b {
  padding: 0 18px; background: var(--encre); color: var(--clair);
  font: 700 11px/1 var(--sans); font-variation-settings: 'wdth' 125;
  letter-spacing: .14em; text-transform: uppercase;
}
.saut-b:hover { background: var(--metal); color: var(--encre); }
.carte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); }
.carte-f, .carte-b { padding: clamp(40px, 6vw, 80px) var(--marge); scroll-margin-top: 64px; }
.carte-f { background: var(--rose); }
.carte-titre-f { margin: 0 0 8px; font: 300 clamp(48px, 6vw, 88px)/.9 var(--serif); }
.carte-titre-b { margin: 0 0 8px; font: 900 clamp(44px, 5.5vw, 80px)/.9 var(--serif); text-transform: uppercase; }
.carte-cat { margin-top: 34px; }
.carte-cat h3 { margin: 0 0 6px; }

/* ── L’équipe ─────────────────────────────────────────────────────────── */

.page-titre-court { max-width: 9ch; }
.equipe-section { padding: clamp(40px, 6vw, 80px) var(--marge); }
.equipe-f { background: var(--rose); }
.equipe-in { max-width: 1296px; margin: 0 auto; }
.equipe-titre-f { margin: 0 0 28px; font: 300 clamp(40px, 5vw, 72px)/.9 var(--serif); }
.equipe-titre-b { margin: 0 0 28px; font: 900 clamp(36px, 4.6vw, 66px)/.9 var(--serif); text-transform: uppercase; }
.equipe-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 32px 20px; }
.membre { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 90px; }
.membre .media { aspect-ratio: 4 / 5; }
.membre-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.membre-nom { margin: 0; font: 400 32px/1 var(--serif); }
.membre-ans { font: 500 12px/1 var(--sans); color: var(--gris); white-space: nowrap; }
.membre-role { font: 600 10px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.membre-spe { margin: 0; font: 400 14.5px/1.5 var(--sans); color: var(--texte); }
.membre-citation {
  margin: 0; padding-left: 12px;
  border-left: 1px solid rgba(28, 22, 19, .25);
  font: italic 400 19px/1.25 var(--serif); color: var(--encre);
}
.membre-dispo { display: flex; align-items: center; gap: 6px; font: 600 12px/1.2 var(--sans); }
.membre-dispo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vert); }
.membre .btn { align-self: flex-start; }

.sombre .membre-nom { font-weight: 700; font-size: 28px; text-transform: uppercase; }
.sombre .membre-ans { color: var(--clair-3); }
.sombre .membre-role {
  font-weight: 700; font-variation-settings: 'wdth' 125;
  letter-spacing: .18em; color: var(--metal);
}
.sombre .membre-spe { color: var(--clair-2); }
.sombre .membre-citation { color: var(--clair); border-left-color: var(--metal); }
.sombre .membre-dispo::before { background: var(--vert-clair); }
.sombre .membre .btn-metal-contour { padding: 0 16px; letter-spacing: .12em; }

/* ── Galerie ──────────────────────────────────────────────────────────── */

.galerie { padding: clamp(40px, 7vw, 96px) var(--marge) clamp(56px, 8vw, 112px); }
.galerie-in {
  display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px);
  max-width: 1296px; margin: 0 auto;
}
.galerie-tete { display: flex; flex-direction: column; gap: 18px; }
.comparaison {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px 48px; align-items: center;
}
.ba {
  --pos: 50%;
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; max-height: 640px;
  border-radius: 4px; user-select: none;
}
.ba .media { position: absolute; inset: 0; }
.ba-avant { clip-path: inset(0 calc(100% - var(--pos)) 0 0); pointer-events: none; }
.ba-ligne {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; margin-left: -1px;
  background: var(--creme); pointer-events: none;
}
.ba-poignee {
  position: absolute; top: 50%; left: var(--pos);
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--encre); border-radius: 50%;
  background: var(--creme); color: var(--encre);
  font: 600 13px/1 var(--sans); pointer-events: none;
}
.ba:focus-within .ba-poignee { outline: 2px solid var(--terre); outline-offset: 3px; }
.ba-etiquette {
  position: absolute; top: 12px;
  padding: 6px 10px;
  font: 600 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  pointer-events: none;
}
.ba-etiquette-avant { left: 12px; background: var(--creme); }
.ba-etiquette-apres { right: 12px; background: var(--encre); color: var(--clair); }
.ba-curseur {
  position: absolute; inset: 0;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
}
.comparaison-texte { display: flex; flex-direction: column; gap: 14px; }
.comparaison-titre { margin: 0; font: 300 clamp(36px, 4.4vw, 64px)/.95 var(--serif); }
.comparaison-texte p { margin: 0; max-width: 40ch; font: 400 15px/1.55 var(--sans); color: var(--texte); }

.filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.filtre {
  height: 40px; padding: 0 18px;
  border: 1px solid var(--encre); border-radius: 999px;
  background: transparent; color: var(--encre);
  font: 600 13px/1 var(--sans);
}
.filtre[aria-pressed="true"] { background: var(--encre); color: var(--creme); }
.galerie-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 260px), 1fr));
  gap: 24px 12px;
}
.oeuvre-grille { position: relative; gap: 8px; scroll-margin-top: 90px; }
.oeuvre-grille .media { cursor: zoom-in; }
.agrandir {
  position: absolute; z-index: 2; top: 10px; right: 10px;
  width: 36px; height: 36px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(242, 236, 227, .92); color: var(--encre);
  font: 600 15px/1 var(--sans);
}
.agrandir:hover { background: var(--creme); }

/* Visionneuse (photo agrandie) */
.visionneuse {
  position: fixed; inset: 0;
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(20, 15, 12, .96); color: var(--clair);
  flex-direction: column;
}
.visionneuse[open] { display: flex; }
.visionneuse::backdrop { background: transparent; }
.visionneuse :focus-visible { outline-color: var(--metal); }
.vis-tete {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px clamp(16px, 4vw, 40px);
}
.vis-pos {
  font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--clair-3); font-variant-numeric: tabular-nums;
}
.vis-centre {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 0 clamp(8px, 3vw, 32px);
}
.vis-nav {
  flex: none; width: 44px; height: 44px;
  border: 1px solid rgba(238, 229, 216, .3); border-radius: 50%;
  background: transparent; color: var(--clair);
  font: 600 16px/1 var(--sans);
}
.vis-nav:hover { border-color: var(--clair); }
.vis-media { position: relative; height: 100%; max-height: 78vh; aspect-ratio: 4 / 5; max-width: calc(100% - 112px); }
.vis-media .media { position: absolute; inset: 0; }
.vis-pied {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px clamp(16px, 4vw, 40px) 22px;
}
.vis-legende { display: flex; flex-direction: column; gap: 4px; }
.vis-titre { font: 400 26px/1 var(--serif); }
.vis-par { font: 500 12.5px/1.3 var(--sans); color: var(--clair-3); }

/* ── Réservation ──────────────────────────────────────────────────────── */

.resa {
  --fond: var(--creme); --fg: var(--encre); --doux: var(--gris);
  --ligne: rgba(28, 22, 19, .16); --acc: var(--encre); --acc-fg: var(--creme);
  --rayon: 999px; --actif: var(--rose); --carte: rgba(255, 255, 255, .4);
  display: flex; flex-direction: column;
  min-height: 80vh;
  background: var(--fond); color: var(--fg);
  transition: background-color .5s, color .5s;
}
.resa[data-univers="barbier"] {
  --fond: var(--encre); --fg: var(--clair); --doux: var(--clair-3);
  --ligne: rgba(238, 229, 216, .16); --acc: var(--metal); --acc-fg: var(--encre);
  --rayon: 0px; --actif: color-mix(in oklch, var(--metal) 18%, transparent); --carte: rgba(238, 229, 216, .04);
}
.resa-corps {
  flex: 1; width: 100%; max-width: 860px; margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 5vw, 48px) 32px;
}
.resa-noscript { margin: 0; font: 400 16px/1.55 var(--sans); }
.resa-info {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-bottom: 10px;
  font: 600 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--doux);
}
.resa-progres { height: 2px; margin-bottom: 6px; background: var(--ligne); }
.resa-progres span { display: block; height: 100%; background: var(--fg); transition: width .45s var(--ease); }
.resa-onglets {
  display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none;
  margin-bottom: 28px; border-bottom: 1px solid var(--ligne);
}
.resa-onglets::-webkit-scrollbar { display: none; }
.resa-onglet {
  flex: none; padding: 10px 0;
  border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: inherit; opacity: .42;
  font: 600 12px/1 var(--sans); white-space: nowrap;
}
.resa-onglet:disabled { cursor: default; }
.resa-onglet.fait { opacity: 1; }
.resa-onglet[aria-current="step"] { opacity: 1; border-bottom-color: var(--fg); }

.resa-etape { display: flex; flex-direction: column; gap: 14px; }
.resa-etape-serree { gap: 8px; }
.resa-etape-large { gap: 16px; }
.resa-titre { margin: 0 0 6px; font: 300 clamp(40px, 7vw, 80px)/.9 var(--serif); }
.resa-titre:focus { outline: none; }
.resa-titre-grand { margin: 0; font-size: clamp(44px, 8vw, 96px); }

/* Étape 1 : univers */
.univers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-top: 6px; }
.univers-carte {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  min-height: 200px; padding: 24px;
  border: 0; text-align: left;
}
.univers-carte:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--creme), 0 0 0 5px var(--terre); }
.univers-f {
  border-radius: 200px 200px 4px 4px;
  background: var(--rose); color: var(--encre);
  border: 1px solid rgba(28, 22, 19, .16);
}
.univers-b { background: var(--encre); color: var(--clair); outline: 1px solid var(--metal); outline-offset: -8px; }
.univers-num-f {
  padding-top: 28px; text-align: center;
  font: 600 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gris);
}
.univers-num-b {
  padding: 12px 0 0 8px;
  font: 700 10px/1 var(--sans); font-variation-settings: 'wdth' 125;
  letter-spacing: .2em; text-transform: uppercase; color: var(--metal);
}
.univers-bas { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.univers-b .univers-bas { padding: 0 8px 8px; }
.univers-nom-f { font: 300 52px/.9 var(--serif); }
.univers-nom-b { font: 900 44px/.9 var(--serif); text-transform: uppercase; }
.univers-desc { font: 400 12.5px/1.4 var(--sans); text-align: right; color: var(--gris-fonce); }
.univers-b .univers-desc { color: var(--clair-3); }

/* Étape 2 : prestations */
.resa-cat { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.resa-cat h2 {
  margin: 0;
  font: 600 10.5px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--doux);
}
.choix {
  display: flex; align-items: center; gap: 14px;
  min-height: 44px; padding: 14px 16px;
  border: 1px solid var(--ligne); border-radius: 14px;
  background: transparent; color: inherit; text-align: left;
}
.choix[aria-pressed="true"] { background: var(--actif); border-color: var(--acc); }
.choix-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.choix-nom { font: 600 15px/1.25 var(--sans); }
.choix-info { font: 400 13px/1.35 var(--sans); color: var(--doux); }
.choix-marque {
  flex: none; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ligne); border-radius: 50%;
  font: 600 15px/1 var(--sans);
}
.choix[aria-pressed="true"] .choix-marque { background: var(--acc); border-color: var(--acc); color: var(--acc-fg); }

/* Étape 3 : coiffeur */
.coiffeur-libre { padding: 16px; background: var(--carte); }
.coiffeur-libre .rond {
  flex: none; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--doux); border-radius: 50%;
  font: 400 26px/1 var(--serif);
}
.coiffeurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.coiffeur { padding: 12px; background: var(--carte); }
.coiffeur .media { flex: none; width: 64px; height: 80px; }
.coiffeur-nom { font: 400 24px/1 var(--serif); }
.coiffeur-role { font: 600 10px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--doux); }
.coiffeur-dispo { display: flex; align-items: center; gap: 6px; margin-top: 4px; font: 600 11.5px/1.2 var(--sans); }
.coiffeur-dispo::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--vert-resa); }

/* Étape 4 : créneau */
.jours {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * clamp(20px, 5vw, 48px));
  padding: 0 clamp(20px, 5vw, 48px) 4px;
}
.jours::-webkit-scrollbar { display: none; }
.jour {
  flex: none; width: 64px; height: 92px; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--ligne); border-radius: 14px;
  background: transparent; color: var(--fg);
}
.jour:disabled { opacity: .4; cursor: not-allowed; }
.jour[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: var(--acc-fg); }
.jour-nom { font: 500 11px/1 var(--sans); }
.jour-num { font: 400 30px/1 var(--serif); }
.jour-mois { font: 400 10.5px/1 var(--sans); opacity: .75; }
.jour-point { width: 5px; height: 5px; margin-top: 2px; border-radius: 50%; background: var(--vert-resa); }
.jour-point.peu { background: var(--rouge); }
.jour[aria-pressed="true"] .jour-point { background: var(--acc-fg); }
.jour:disabled .jour-point { background: transparent; }
.creneaux-groupe { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.creneaux-tete {
  display: flex; justify-content: space-between; gap: 10px;
  font: 600 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--doux);
}
.creneaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.creneau {
  height: 46px;
  border: 1px solid var(--ligne); border-radius: var(--rayon);
  background: transparent; color: var(--fg);
  font: 600 14px/1 var(--sans); font-variant-numeric: tabular-nums;
}
.creneau[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: var(--acc-fg); }
.resa-note { margin: 0; font: 500 13.5px/1.45 var(--sans); }
.resa-note-douce { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--doux); }

/* Étape 5 : coordonnées */
.recap {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px;
  border: 1px solid var(--ligne); border-radius: 14px;
  background: var(--carte);
}
.recap-date { font: 400 26px/1.1 var(--serif); }
.recap-qui { font: 500 13.5px/1.4 var(--sans); color: var(--doux); }
.recap-ligne { display: flex; justify-content: space-between; gap: 10px; font: 400 14px/1.4 var(--sans); }
.champ { display: flex; flex-direction: column; gap: 6px; font: 600 12px/1 var(--sans); }
.champ input, .champ textarea {
  width: 100%;
  border: 1px solid var(--ligne); border-radius: 12px;
  background: var(--carte); color: var(--fg);
  outline-color: var(--acc);
}
.champ input { height: 50px; padding: 0 14px; font: 400 16px/1 var(--sans); }
.champ textarea { padding: 12px 14px; font: 400 15px/1.45 var(--sans); resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--doux); opacity: .8; }
.champ [aria-invalid="true"] { border-color: var(--rouge); }
.champ-alerte { font: 500 12.5px/1.3 var(--sans); color: var(--rouge); }
.resa[data-univers="barbier"] .champ-alerte { color: #E38B73; }
.resa-petit { font: 400 12.5px/1.45 var(--sans); color: var(--doux); }
.resa-erreur { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(192, 85, 62, .12); font: 500 13.5px/1.45 var(--sans); }

/* Étape 6 : confirmation */
.confirme { display: flex; flex-direction: column; gap: 20px; padding: clamp(20px, 6vw, 72px) 0; }
.confirme-coche {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--acc); color: var(--acc-fg);
}
.confirme-coche svg { width: 28px; height: 28px; }
.confirme .resa-titre { margin: 0; font-size: clamp(46px, 8vw, 96px); }
.confirme-texte { margin: 0; max-width: 40ch; font: 400 16px/1.55 var(--sans); color: var(--doux); }
.ticket { max-width: 440px; overflow: hidden; border: 1px solid var(--ligne); border-radius: 14px; background: var(--carte); }
.ticket-haut { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 16px; }
.ticket-entete {
  display: flex; justify-content: space-between; gap: 10px;
  font: 600 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--doux);
}
.ticket-date { margin-top: 6px; font: 400 30px/1.05 var(--serif); }
.ticket-qui { font: 500 14px/1.4 var(--sans); }
.ticket-coupe { position: relative; height: 0; border-top: 1px dashed var(--ligne); }
.ticket-coupe::before, .ticket-coupe::after {
  content: ""; position: absolute; top: -9px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--fond); border: 1px solid var(--ligne);
}
.ticket-coupe::before { left: -9px; }
.ticket-coupe::after { right: -9px; }
.ticket-bas { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 20px; }
.ticket-total {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--ligne);
  font: 700 14px/1.4 var(--sans);
}
.ticket-adresse { font: 400 12px/1.4 var(--sans); color: var(--doux); }
.confirme-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-resa {
  display: inline-flex; align-items: center;
  height: 48px; padding: 0 20px;
  border: 1px solid var(--ligne); border-radius: var(--rayon);
  background: transparent; color: inherit;
  font: 600 13px/1 var(--sans); text-decoration: none;
}
.btn-resa:hover { color: inherit; border-color: var(--fg); }
.btn-resa-plein { border: 0; background: var(--acc); color: var(--acc-fg); }
.btn-resa-plein:hover { color: var(--acc-fg); filter: brightness(1.08); }

/* Barre du bas de la réservation */
.resa-barre {
  position: sticky; bottom: 0; z-index: 20;
  background: var(--fond); border-top: 1px solid var(--ligne);
  transition: background-color .5s;
}
.resa-barre-in {
  display: flex; align-items: center; gap: 10px;
  max-width: 860px; margin: 0 auto;
  padding: 12px clamp(16px, 5vw, 48px) calc(14px + env(safe-area-inset-bottom));
}
.resa-retour {
  flex: none; width: 50px; height: 50px;
  border: 1px solid var(--ligne); border-radius: var(--rayon);
  background: transparent; color: inherit;
  font: 600 16px/1 var(--sans);
}
.resa-retour:disabled { opacity: .3; cursor: default; }
.resa-resume { flex: 1; min-width: 0; font: 600 12.5px/1.3 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resa-consigne { font: 400 12.5px/1.3 var(--sans); color: var(--doux); }
.resa-suivant {
  flex: none; height: 50px; padding: 0 22px;
  border: 0; border-radius: var(--rayon);
  background: var(--acc); color: var(--acc-fg);
  font: 600 14px/1 var(--sans);
}
.resa-suivant[aria-disabled="true"] { opacity: .4; }

/* ── Avis clients ─────────────────────────────────────────────────────── */

.avis-page { padding: clamp(40px, 7vw, 96px) var(--marge) clamp(56px, 8vw, 112px); }
.avis-page-in {
  display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px);
  max-width: 1296px; margin: 0 auto;
}
.avis-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.avis-tete-titre { display: flex; flex-direction: column; gap: 18px; }
.note-page { gap: 12px; }
.note-page .note-chiffre { font-size: clamp(80px, 10vw, 140px); letter-spacing: 0; }
.note-page .note-detail { padding-bottom: 0; }
.avis-colonnes { columns: 3 280px; column-gap: 14px; }
.avis-carte {
  break-inside: avoid;
  display: flex; flex-direction: column; gap: 16px;
  margin: 0 0 14px; padding: 24px;
  border-radius: 6px;
  --doux: var(--gris);
}
.avis-femme { background: var(--papier); color: var(--encre); border: 1px solid rgba(28, 22, 19, .1); }
.avis-barbier { background: var(--encre); color: var(--clair); border: 1px solid var(--encre); --doux: var(--clair-3); }
.avis-mixte { background: var(--sable); color: var(--encre); border: 1px solid var(--sable); }
.avis-tag { font: 600 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--doux); }
.avis-carte blockquote { margin: 0; font: 400 25px/1.15 var(--serif); text-wrap: pretty; }
.avis-carte figcaption { font: 500 12.5px/1.4 var(--sans); color: var(--doux); }

/* ── Produits ─────────────────────────────────────────────────────────── */

.produits { padding: clamp(40px, 6vw, 80px) var(--marge); }
.produits-f { background: var(--rose); }
.produits-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 240px), 1fr));
  gap: 28px 14px;
  max-width: 1296px; margin: 0 auto;
}
.produit { display: flex; flex-direction: column; gap: 8px; }
.produit .media { aspect-ratio: 1; }
.produit-marque { font: 600 10px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.produit-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.produit-nom { font: 400 24px/1.05 var(--serif); }
.produit-prix { font: 600 13px/1 var(--sans); white-space: nowrap; }
.produit-desc { margin: 0; font: 400 13.5px/1.45 var(--sans); color: var(--texte); }
.produit-usage { font: 500 12px/1.3 var(--sans); color: var(--gris); }
.sombre .produit-marque { font-weight: 700; font-variation-settings: 'wdth' 125; letter-spacing: .18em; color: var(--metal); }
.sombre .produit-nom { font-weight: 700; font-size: 21px; text-transform: uppercase; }
.sombre .produit-prix { font-weight: 700; color: var(--metal); }
.sombre .produit-desc { color: var(--clair-2); }
.sombre .produit-usage { color: var(--clair-3); }

/* ── Infos & contact ──────────────────────────────────────────────────── */

.contact { padding: clamp(40px, 7vw, 96px) var(--marge) clamp(56px, 8vw, 112px); }
.contact-in {
  display: flex; flex-direction: column; gap: clamp(28px, 4vw, 48px);
  max-width: 1296px; margin: 0 auto;
}
.contact-tete { display: flex; flex-direction: column; gap: 18px; }
.statut-ligne { display: flex; align-items: center; gap: 8px; font: 600 13px/1.3 var(--sans); }
.statut-ligne .pastille { width: 8px; height: 8px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.contact-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 32px; }
.plan {
  position: relative; z-index: 0; min-height: 340px; overflow: hidden;
  border: 1px solid rgba(28, 22, 19, .16); border-radius: 200px 200px 4px 4px;
  background: var(--sable) var(--hachures-clair);
}
.plan.leaflet-container { background: var(--sable); font-family: var(--sans); }
.plan .leaflet-tile-pane { filter: grayscale(1) sepia(.32) contrast(.92) brightness(1.03); }
.epingle {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--encre);
  background: linear-gradient(var(--creme) 50%, var(--encre) 50%);
  box-shadow: 0 6px 16px rgba(28, 22, 19, .35);
}
.infos { display: flex; flex-direction: column; gap: 28px; }
.info-bloc { display: flex; flex-direction: column; gap: 6px; }
.info-adresse { margin: 0; font: 400 30px/1.1 var(--serif); }
.info-acces { margin: 0; font: 400 14px/1.5 var(--sans); color: var(--texte); }
.info-bloc .surtitre + .horaires { margin-top: 2px; }
.horaires { margin: 0; }
.horaires-ligne {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 10px 8px; border-top: 1px solid rgba(28, 22, 19, .12);
  font: 400 14.5px/1.3 var(--sans);
}
.horaires-ligne dt, .horaires-ligne dd { margin: 0; }
.horaires-ligne.aujourdhui { background: var(--rose); font-weight: 700; }
.horaires-marque { margin-left: 6px; font-weight: 500; font-size: 11px; color: var(--terre); }
.contact-bas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 32px;
  padding-top: clamp(20px, 4vw, 48px); border-top: 1px solid rgba(28, 22, 19, .16);
}
.question { display: flex; flex-direction: column; gap: 12px; }
.question-titre { margin: 0; font: 300 clamp(36px, 4.4vw, 60px)/.95 var(--serif); }
.question p { margin: 0; max-width: 40ch; font: 400 15px/1.55 var(--sans); color: var(--texte); }
.question-mail { align-self: flex-start; font: 500 15px/1.4 var(--sans); }
.form-contact { display: flex; flex-direction: column; gap: 12px; }
.form-contact input, .form-contact textarea {
  width: 100%;
  border: 1px solid rgba(28, 22, 19, .2); border-radius: 12px;
  background: rgba(255, 255, 255, .5);
}
.form-contact input { height: 50px; padding: 0 14px; font: 400 16px/1 var(--sans); }
.form-contact textarea { padding: 12px 14px; font: 400 15px/1.45 var(--sans); resize: vertical; }
.form-contact [aria-invalid="true"] { border-color: var(--rouge); }
.form-contact .btn { align-self: flex-start; }
.form-contact .btn[aria-disabled="true"] { opacity: .4; }
.form-erreur { margin: 0; font: 500 13px/1.45 var(--sans); color: var(--rouge); }
.form-merci { margin: 0; font: 400 30px/1.15 var(--serif); }
.form-merci:focus { outline: none; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── Pages simples (mentions légales, 404) ────────────────────────────── */

.legal { padding: clamp(40px, 7vw, 96px) var(--marge) clamp(56px, 8vw, 112px); }
.legal-in { display: flex; flex-direction: column; gap: 18px; max-width: 760px; margin: 0 auto; }
.legal-in .page-titre { margin-bottom: 12px; font-size: clamp(48px, 8vw, 110px); }
.legal section { padding-top: 24px; border-top: 1px solid var(--trait); scroll-margin-top: 80px; }
.legal h2 { margin: 0 0 12px; font: 400 clamp(28px, 3.4vw, 40px)/1.05 var(--serif); }
.legal p, .legal li { margin: 0 0 10px; font: 400 15px/1.6 var(--sans); color: var(--texte); }
.legal ul { margin: 0 0 10px; padding-left: 20px; }
.a-completer { padding: 1px 5px; border-radius: 4px; background: #F3D9B5; color: var(--encre); }
.legal .credits { columns: 2 260px; column-gap: 32px; }
.legal .credits li { margin: 0 0 6px; font-size: 13.5px; break-inside: avoid; }

.introuvable { min-height: 70vh; display: flex; align-items: center; padding: clamp(40px, 7vw, 96px) var(--marge); }
.introuvable-in { display: flex; flex-direction: column; gap: 18px; max-width: 1296px; width: 100%; margin: 0 auto; }
.introuvable-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

/* ── Pied de page ─────────────────────────────────────────────────────── */

.pied { background: var(--encre); color: var(--clair); }
.pied-marque {
  position: relative; overflow: hidden;
  height: clamp(84px, 23vw, 340px);
  background: linear-gradient(var(--creme) 50%, var(--encre) 50%);
}
.pied-marque span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 700 clamp(104px, 30vw, 440px)/1 var(--serif);
  letter-spacing: .02em;
  transform: translateY(4%);
}
.pied-marque span:first-child { color: var(--encre); clip-path: inset(0 0 50% 0); }
.pied-marque span:last-child { color: var(--creme); clip-path: inset(50% 0 0 0); }
.pied-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 32px;
  max-width: 1296px; margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--marge) 28px;
}
.pied-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pied-col p { margin: 0; font: 400 15px/1.55 var(--sans); }
.pied-col a { font: 400 15px/1.4 var(--sans); color: var(--clair); }
.pied-col a:hover { color: var(--metal); }
.pied-col .pied-discret { font: 500 13px/1.3 var(--sans); color: var(--clair-3); }
.pied-col .pied-tel { font: 500 30px/1 var(--serif); text-decoration: none; }
.pied-bas {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  max-width: 1296px; margin: 0 auto;
  padding: 18px var(--marge) 28px;
  border-top: 1px solid rgba(238, 229, 216, .12);
  font: 400 12px/1.4 var(--sans); color: var(--clair-4);
}
.pied-bas a { text-decoration: none; }
.pied-bas a:hover { color: var(--clair); text-decoration: underline; }
.pied-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.pied-haut { padding: 6px 0; border: 0; background: transparent; color: var(--clair); font: 600 12px/1 var(--sans); }

/* ── Barre d’action mobile ────────────────────────────────────────────── */

.barre-mobile {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; gap: 8px;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  background: rgba(242, 236, 227, .96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(28, 22, 19, .12);
}
.barre-appel {
  flex: none; display: flex; align-items: center;
  height: 50px; padding: 0 18px;
  border: 1px solid var(--encre); border-radius: 999px;
  font: 600 13px/1 var(--sans); text-decoration: none; color: var(--encre);
}
.barre-resa {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 50px; padding: 0 12px;
  border-radius: 999px; background: var(--encre); color: var(--creme);
  text-decoration: none;
}
.barre-resa:hover { color: var(--creme); }
.barre-resa span:first-child { font: 600 14px/1 var(--sans); }
.barre-dispo {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 400 11px/1 var(--sans); color: var(--clair-2);
}
@media (min-width: 760px) {
  .barre-mobile { display: none; }
}

/* ==========================================================================
   Mouvement
   Discret et utile : apparition des blocs au défilement, entrée soignée de
   chaque page, réponses aux survols et aux clics, transitions entre pages.
   Uniquement transform, translate/scale, opacity et clip-path (rendu par la
   carte graphique, aucun décalage de mise en page). Rien de tout cela ne
   s’applique si l’appareil demande moins d’animations.
   ========================================================================== */

:root { --sortie: cubic-bezier(.16, 1, .3, 1); } /* départ vif, arrivée très douce */

@keyframes monte { from { opacity: 0; translate: 0 18px; } }
@keyframes fondu { from { opacity: 0; } }
@keyframes voile-bas { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes voile-haut { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes pose { from { scale: 1.2; } }
@keyframes sceau { from { opacity: 0; scale: .55; rotate: -25deg; } }
@keyframes glisse-gauche { from { opacity: 0; translate: 28px 0; } }
@keyframes glisse-droite { from { opacity: 0; translate: -28px 0; } }
@keyframes appui { from { scale: .97; } }
@keyframes impulsion { 45% { scale: 1.16; } }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes imprime { from { clip-path: inset(0 0 100% 0); translate: 0 -8px; } to { clip-path: inset(0); } }

@media (prefers-reduced-motion: no-preference) {

  /* Changement de page en fondu (Chrome, Edge, Safari récents ; ailleurs, affichage normal).
     L’en-tête ne bouge pas et le soulignement du menu glisse vers la nouvelle rubrique. */
  @view-transition { navigation: auto; }
  .entete { view-transition-name: entete; }
  .barre-mobile { view-transition-name: barre-mobile; }
  .nav-bureau a[aria-current="page"] .nav-trait { view-transition-name: nav-trait; }
  ::view-transition-group(*) { animation-duration: .45s; animation-timing-function: var(--sortie); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }

  /* 1. Apparition au défilement : chaque bloc monte de 18 px en fondu, une seule fois,
     en léger décalage avec ses voisins (délai posé par site.js). */
  .js [data-apparition]:not(.vu) { opacity: 0; }
  .js [data-apparition].vu { animation: monte .9s var(--sortie) var(--delai, 0ms) backwards; }

  /* 2. Entrée de chaque page : surtitre, titre, texte, boutons, l’un après l’autre. */
  .entree-page > * { animation: monte .9s var(--sortie) backwards; }
  .entree-page > :nth-child(2) { animation-delay: .08s; }
  .entree-page > :nth-child(3) { animation-delay: .16s; }
  .entree-page > :nth-child(4) { animation-delay: .24s; }
  .entree-page > :nth-child(n+5) { animation-delay: .32s; }

  /* 3. Accueil : les deux espaces s’ouvrent. L’arche se lève comme un store, le cadre
     barbier se déroule vers le bas, puis le monogramme vient sceller la jonction. */
  .entree > * { animation: monte 1s var(--sortie) backwards; }
  .entree-femme .entree > :nth-child(1) { animation-delay: .1s; }
  .entree-femme .entree > :nth-child(2) { animation-delay: .17s; }
  .entree-femme .entree > :nth-child(3) { animation-delay: .26s; }
  .entree-femme .entree > :nth-child(4) { animation-delay: .35s; }
  .entree-barbier .entree > :nth-child(1) { animation-delay: .38s; }
  .entree-barbier .entree > :nth-child(2) { animation-delay: .45s; }
  .entree-barbier .entree > :nth-child(3) { animation-delay: .54s; }
  .entree-barbier .entree > :nth-child(4) { animation-delay: .63s; }
  .entree-femme .entree-photo { animation: voile-bas 1.3s var(--sortie) .05s backwards; }
  .entree-barbier .entree-photo { animation: voile-haut 1.3s var(--sortie) .28s backwards; }
  .entree-photo > * { animation: pose 1.8s var(--sortie) .05s backwards; }
  .entree-barbier .entree-photo.cadre::after { animation: fondu .9s ease .95s backwards; }
  .medaillon { animation: sceau 1s var(--sortie) .85s backwards; }

  /* 4. Profondeur : trois photos glissent un peu moins vite que la page (site.js). */
  [data-profondeur] > * { scale: 1.08; }

  /* 5. La carte qui s’écrit : les pointillés se tracent du nom jusqu’au prix. */
  .presta-points {
    clip-path: inset(0);
    transition: clip-path 1.1s var(--sortie) calc(var(--delai, 0ms) + var(--rang, 0) * 70ms + .3s), border-color .25s;
  }
  .js [data-apparition]:not(.vu) .presta-points { clip-path: inset(0 100% 0 0); }

  /* 6. Le monogramme qui se rejoint : en bas de page, les deux moitiés du nom
     glissent l’une vers l’autre — deux espaces, une seule maison. */
  .js .pied-marque:not(.vu) span:first-child { translate: -5% 0; }
  .js .pied-marque:not(.vu) span:last-child { translate: 5% 0; }
  .pied-marque span { transition: translate 1.6s var(--sortie); }

  /* 7. Boutons : légère pression au clic, flèche qui avance au survol. */
  .btn { transition: background-color .2s, color .2s, filter .2s, transform .15s var(--sortie); }
  .btn:active:not(.entree-lien) { transform: scale(.97); }
  .fleche, .fleche-bas { transition: translate .35s var(--sortie); }

  /* 8. Réservation : les étapes glissent dans le sens du parcours, les choix répondent. */
  .entre-avant { animation: glisse-gauche .55s var(--sortie) backwards; }
  .entre-arriere { animation: glisse-droite .55s var(--sortie) backwards; }
  .entre-debut { animation: monte .7s var(--sortie) backwards; }
  .choix, .jour, .creneau, .filtre, .resa-suivant, .resa-retour, .btn-resa {
    transition: border-color .2s, background-color .25s, color .25s, transform .15s var(--sortie);
  }
  .choix:active, .jour:not(:disabled):active, .creneau:active, .filtre:active, .resa-suivant:active, .btn-resa:active { transform: scale(.97); }
  .choix.vient-de-changer, .jour.vient-de-changer, .creneau.vient-de-changer { animation: appui .4s var(--sortie); }
  .vient-de-changer .choix-marque { animation: impulsion .4s var(--sortie); }
  .resa-note { animation: monte .5s var(--sortie) backwards; }
  .confirme { animation: monte .7s var(--sortie) backwards; }
  .confirme-coche { animation: sceau .8s var(--sortie) .1s backwards; }
  .confirme-coche path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: trace .45s ease-out .6s forwards; }
  .ticket { animation: imprime 1s var(--sortie) .4s backwards; }

  /* 9. Menu plein écran : les rubriques arrivent en cascade. */
  .menu[open] .menu-nav a { animation: monte .6s var(--sortie) backwards; animation-delay: calc(var(--i, 1) * 40ms + .1s); }
  .menu[open] .menu-resa, .menu[open] .menu-pied { animation: fondu .6s ease .45s backwards; }

  /* 10. Messages qui s’affichent : remerciement, erreur, alerte de saisie. */
  .form-merci:not([hidden]), .form-erreur:not([hidden]), .resa-erreur, .champ-alerte:not([hidden]) {
    animation: monte .5s var(--sortie) backwards;
  }

  /* Survols : seulement avec une souris ou un pavé tactile (pas d’effet collant au doigt). */
  @media (hover: hover) and (pointer: fine) {
    .nav-trait { transform-origin: right; transition: transform .4s var(--sortie); }
    .nav-bureau a:hover .nav-trait { transform-origin: left; }

    a:hover > .fleche, button:hover > .fleche, .entree:hover .fleche { translate: 4px 0; }
    a:hover > .fleche-bas { translate: 0 3px; }

    /* Reflet qui passe sur les boutons cuivre, comme sur le laiton de l’espace barbier. */
    .btn-metal {
      background-image: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .34) 50%, transparent 62%);
      background-size: 260% 100%; background-position: 125% 0; background-repeat: no-repeat;
    }
    .btn-metal:hover {
      background-position: -25% 0;
      transition: background-color .2s, color .2s, filter .2s, transform .15s var(--sortie), background-position .9s var(--sortie);
    }

    .presta-nom { transition: translate .4s var(--sortie); }
    .presta:hover .presta-nom { translate: 4px 0; }
    .presta-prix { transition: color .25s; }
    .presta:hover .presta-prix { color: var(--terre); }
    .sombre .presta:hover .presta-prix { color: #E2A26C; }
    .presta:hover .presta-points { border-bottom-color: rgba(28, 22, 19, .75); }
    .sombre .presta:hover .presta-points { border-bottom-color: rgba(238, 229, 216, .7); }

    /* Zoom très lent, seulement sur les photos qu’on peut ouvrir. */
    .oeuvre-lien .media > img, .membre-lien .media > img, .oeuvre-grille .media > img { transition: scale 1.4s var(--sortie); }
    .oeuvre-lien:hover .media > img, .membre-lien:hover .media > img, .oeuvre-grille:hover .media > img { scale: 1.045; }
    .agrandir { transition: transform .3s var(--sortie), background-color .2s; }
    .oeuvre-grille:hover .agrandir { transform: scale(1.1); }

    .choix:hover, .jour:not(:disabled):hover, .creneau:hover { border-color: color-mix(in srgb, var(--fg) 45%, transparent); }
    .univers-carte { transition: transform .45s var(--sortie), box-shadow .45s var(--sortie); }
    .univers-carte:hover:not(:focus-visible) { transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgba(28, 22, 19, .6); }

    .menu-lib { transition: translate .45s var(--sortie); }
    .menu-nav a:hover .menu-lib { translate: 8px 0; }

    /* Monogramme de l’en-tête : ses deux moitiés s’écartent d’un souffle. */
    .monogramme > span { transition: translate .45s var(--sortie); }
    .logo:hover .monogramme > span:first-child { translate: -1.5px 0; }
    .logo:hover .monogramme > span:last-child { translate: 1.5px 0; }

    .btn-menu span + span { transition: transform .35s var(--sortie); }
    .btn-menu:hover span + span { transform: none; }

    .pied-col a { transition: color .2s; }
  }
}

@media print {
  [data-apparition] { opacity: 1 !important; animation: none !important; }
}