/* ==========================================================================
   SLIM COIFFURE — Forcalquier
   Direction artistique : « l'atelier de couleur » — cuivre, bordeaux, miel,
   sur fond lin. Fil rouge : la mèche (un trait qui se dessine le long de la
   page) et l'arche (la forme des miroirs du salon).
   Palette
     --lin        fond clair, papier chaud
     --espresso   fond sombre, texte
     --bordeaux   sections sombres, ambiance
     --cuivre     accent principal (boutons, italiques)
     --miel       accent clair sur fond sombre, survols
     --rose       poudre, détails doux
     --lavande    clin d'œil Haute-Provence (détails)
   Typographies : Fraunces (titres, variable, très contrastée) + Manrope (texte)
   ========================================================================== */

:root {
  --lin: #f3ebdf;
  --creme: #fbf6ee;
  --espresso: #24120f;
  --bordeaux: #5c1822;
  --cuivre: #b4531f;
  --miel: #e3a857;
  --rose: #ebc9b8;
  --lavande: #9a8bb5;

  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-text: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --gut: clamp(1.25rem, 5vw, 5.5rem);
  --maxw: 1480px;
  --nav-h: 5.2rem;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--espresso);
  background: var(--lin);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  position: relative;
}
body.is-loading { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, ul, ol, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
address { font-style: normal; }
::selection { background: var(--cuivre); color: #fff; }
:focus-visible { outline: 2px solid var(--cuivre); outline-offset: 3px; border-radius: 4px; }
.reserver :focus-visible, .rituel :focus-visible, .avis :focus-visible, .footer :focus-visible, .hero :focus-visible, .chiffres :focus-visible { outline-color: var(--miel); }
[hidden] { display: none !important; }

.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 2000; background: var(--espresso); color: var(--lin); padding: .8rem 1.2rem; border-radius: 999px; transition: top .3s var(--ease); }
.skip:focus { top: 1rem; }

/* ---------- Typographie ---------- */
.h2, .hero__title, .loader__word, .footer__giant, .manifeste__title, .phone-big, .avis__big, .card h3, .step h3, .num, .card__end-title, .footer__tag {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 144;
}
.h2 {
  font-weight: 300;
  font-size: clamp(2.7rem, 7vw, 7.2rem);
  line-height: .96;
  letter-spacing: -.035em;
}
.h2 em, .step h3 em, .card__end-title em, .footer__tag em {
  font-style: italic; font-weight: 300; color: var(--cuivre);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144;
}
.rituel .h2 em, .avis .h2 em, .reserver .h2 em, .trouver__band .h2 em, .footer__tag em { color: var(--miel); }
.lead { font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.6; max-width: 36rem; }
.lead--light { color: rgba(243, 235, 223, .82); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: var(--cuivre); margin-bottom: 1.6rem;
}
.eyebrow::before { content: ''; width: 2.4rem; height: 1.5px; background: currentColor; }
.eyebrow--light { color: var(--miel); }

/* Masques de texte (split) */
.mask-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .02em .16em; margin: -.08em -.02em -.16em; }
.mask-w > span { display: inline-block; will-change: transform; }
.char { display: inline-block; will-change: transform; }

/* ---------- Liens & boutons ---------- */
.link { position: relative; display: inline-flex; align-items: center; gap: .55rem; }
.link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.18em; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .55s var(--ease);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.link svg { width: 1.15em; height: 1.15em; }
.link--lg { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 300; }

.btn {
  --bg: transparent; --fg: currentColor; --bd: currentColor; --hbg: var(--espresso); --hfg: var(--lin);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  padding: 1.05rem 1.9rem; border-radius: 999px; border: 1.5px solid var(--bd);
  background: var(--bg); color: var(--fg); font-weight: 700; font-size: .95rem; letter-spacing: .015em;
  overflow: hidden; isolation: isolate; white-space: nowrap; will-change: transform;
  transition: color .5s var(--ease), border-color .5s var(--ease);
}
.btn::before {
  content: ''; position: absolute; inset: -2px; z-index: -1; background: var(--hbg); border-radius: inherit;
  transform: translateY(104%); transition: transform .6s var(--ease);
}
.btn:hover, .btn:focus-visible { color: var(--hfg); border-color: var(--hbg); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn--sm { padding: .75rem 1.35rem; font-size: .86rem; }
.btn--fill { --bg: var(--cuivre); --fg: #fff; --bd: var(--cuivre); --hbg: var(--espresso); --hfg: var(--lin); }
.btn--ghost { --hbg: var(--lin); --hfg: var(--espresso); }
.btn--ghost-dark { --fg: var(--espresso); --bd: rgba(36, 18, 15, .3); --hbg: var(--espresso); --hfg: var(--lin); }
.btn--line { --fg: var(--espresso); --bd: var(--espresso); --hbg: var(--cuivre); --hfg: #fff; }
.hero .btn--fill, .reserver .btn--fill, .footer .btn--fill { --hbg: var(--lin); --hfg: var(--espresso); }
.btn:disabled { opacity: .45; pointer-events: none; }

.round {
  width: 3.1rem; height: 3.1rem; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center;
  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.round:hover, .round:focus-visible { background: var(--miel); color: var(--espresso); border-color: var(--miel); transform: scale(1.06); }
.round svg { width: 1.3rem; height: 1.3rem; }

.stars { display: inline-flex; gap: .15rem; color: var(--miel); }
.stars svg { width: 1rem; height: 1rem; }
.stars--lg svg { width: 1.6rem; height: 1.6rem; }

.status-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #b9ad9b; flex: none; }
.status-dot.is-on { background: #6fcf97; box-shadow: 0 0 0 0 rgba(111, 207, 151, .6); animation: pulse 2.2s infinite; }
.status-dot.is-off { background: #e08b7b; }
@keyframes pulse { 70% { box-shadow: 0 0 0 .6rem rgba(111, 207, 151, 0); } 100% { box-shadow: 0 0 0 0 rgba(111, 207, 151, 0); } }

/* Forme signature : l'arche (miroir du salon) */
.arch { border-radius: 50% 50% 22px 22px / 34% 34% 22px 22px; overflow: hidden; }
.arch img, .arch video { width: 100%; height: 100%; object-fit: cover; }

/* Grain de papier */
.grain {
  position: absolute; inset: -60%; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.1s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 4%); } 40% { transform: translate(4%, -3%); } 60% { transform: translate(-4%, -4%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* ---------- Séparateurs (vague · dôme · peigne) ---------- */
.sep { position: absolute; left: 0; width: 100%; z-index: 4; pointer-events: none; }
.sep--wave, .sep--dome { height: clamp(46px, 7.5vw, 120px); }
.sep--wave.sep--to-bordeaux { bottom: -1px; fill: var(--bordeaux); }
.sep--dome.sep--to-lin { bottom: -1px; fill: var(--lin); }
.sep--wave.sep--from-lin { top: -1px; fill: var(--lin); }
.sep--comb { top: -1px; height: 64px; }
.sep--comb rect { fill: var(--lin); }

/* ---------- Barre de progression, curseur ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 950; pointer-events: none; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--cuivre), var(--miel)); transform: scaleX(0); transform-origin: left; }

.cursor { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 940; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cursor.is-on { opacity: 1; }
.cursor::before {
  content: ''; position: absolute; left: -.2rem; top: -.2rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--cuivre);
}
.cursor__label {
  position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem; margin: -1.2rem 0 0 -1.2rem; border-radius: 50%;
  border: 1.5px solid var(--cuivre); display: grid; place-items: center;
  font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: transparent;
  transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background .35s, border-color .35s;
  mix-blend-mode: normal;
}
.cursor.is-link .cursor__label { width: 5.2rem; height: 5.2rem; margin: -2.6rem 0 0 -2.6rem; background: var(--cuivre); border-color: var(--cuivre); }
.cursor.is-hover .cursor__label { width: 3.6rem; height: 3.6rem; margin: -1.8rem 0 0 -1.8rem; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- Fil rouge : la mèche ---------- */
.strand-wrap { position: absolute; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.strand { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; overflow: visible; }
.strand path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.strand__main { stroke: url(#strandGrad); stroke-width: 3.2; }
.strand__echo { stroke: var(--miel); stroke-width: 1.4; opacity: .75; }
.strand__bead { fill: var(--cuivre); }
.strand__bead-halo { fill: rgba(227, 168, 87, .28); }
@media (max-width: 1100px) { .strand-wrap { display: none; } }

/* ---------- Loader ---------- */
.loader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; color: var(--lin); }
.loader-timeout .loader { display: none; }
.loader__half { position: absolute; left: 0; right: 0; height: 50.2%; background: var(--espresso); will-change: transform; }
.loader__half--top { top: 0; }
.loader__half--bottom { bottom: 0; }
.loader__center { position: relative; z-index: 2; text-align: center; display: grid; justify-items: center; gap: .6rem; }
.loader__strand { width: min(44vw, 250px); height: auto; fill: none; stroke: var(--miel); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.loader__word { font-weight: 300; font-size: clamp(3.6rem, 11vw, 8.5rem); line-height: .9; letter-spacing: -.045em; }
.loader__line { display: block; overflow: hidden; padding: .08em .05em .16em; margin: -.08em 0 -.16em; }
.loader__line > span { display: block; transform: translateY(112%); }
.loader__line em { font-style: italic; color: var(--miel); font-weight: 200; }
.loader__sub { font-size: .7rem; letter-spacing: .34em; text-transform: uppercase; opacity: 0; margin-top: 1.2rem; color: rgba(243, 235, 223, .7); }
.loader__count { position: absolute; z-index: 2; left: var(--gut); bottom: 2rem; font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1; color: var(--miel); font-weight: 200; }
.loader__count small { font-size: .35em; margin-left: .2em; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 800; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 0 var(--gut); color: var(--lin);
  transition: transform .7s var(--ease), background .5s var(--ease), color .5s var(--ease), box-shadow .5s;
}
.nav.is-solid { background: rgba(243, 235, 223, .9); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); color: var(--espresso); box-shadow: 0 1px 0 rgba(36, 18, 15, .08); }
.nav.is-hidden { transform: translateY(-110%); }
.nav.menu-open { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--lin); box-shadow: none; }
.nav.menu-open .nav__mark { color: var(--miel); }
.nav__logo { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-display); font-size: 1.55rem; font-weight: 400; letter-spacing: -.02em; }
.nav__logo em { font-style: italic; font-weight: 300; }
.nav__mark { width: 2rem; height: 2rem; color: var(--miel); transition: transform .8s var(--ease); }
.nav.is-solid .nav__mark { color: var(--cuivre); }
.nav__logo:hover .nav__mark { transform: rotate(180deg); }
.nav__links { display: flex; gap: 2.2rem; font-size: .92rem; font-weight: 600; }
.nav__cta { --bd: currentColor; }
.nav.is-solid .nav__cta { --bg: var(--cuivre); --fg: #fff; --bd: var(--cuivre); }
.nav__burger { display: none; position: relative; width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid currentColor; }
.nav__burger span { position: absolute; left: 30%; right: 30%; height: 1.5px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.nav__burger span:first-child { top: 41%; }
.nav__burger span:last-child { top: 57%; }
.nav__burger[aria-expanded='true'] span:first-child { top: 49%; transform: rotate(45deg); }
.nav__burger[aria-expanded='true'] span:last-child { top: 49%; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 790; background: var(--bordeaux); color: var(--lin);
  display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--nav-h) + 2rem) var(--gut) 2.5rem;
  clip-path: circle(0 at calc(100% - 3.4rem) 2.6rem); visibility: hidden;
}
.menu.is-open { visibility: visible; }
.menu__links { display: grid; gap: .2rem; }
.menu__links a { display: flex; align-items: baseline; gap: 1rem; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.6rem, 11vw, 4.6rem); line-height: 1.12; letter-spacing: -.03em; overflow: hidden; }
.menu__links a span { font-family: var(--font-text); font-size: .75rem; font-weight: 700; letter-spacing: .2em; color: var(--miel); }
.menu__phone { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-display); font-size: 2rem; color: var(--miel); }
.menu__phone svg { width: 1.6rem; height: 1.6rem; }
.menu__foot p { margin-top: .8rem; font-size: .9rem; color: rgba(243, 235, 223, .7); }

/* ---------- 1. Hero ---------- */
.hero { position: relative; min-height: 100svh; color: var(--lin); background: var(--espresso); overflow: clip; isolation: isolate; display: flex; }
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__kb { position: absolute; inset: -3%; animation: kb 30s ease-in-out infinite alternate; will-change: transform; }
.hero__video { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.045) translate(-.6%, -.4%); } }
/* voile léger : l'image reste nette, seul le bas (texte) est assombri */
.hero__grade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(36, 18, 15, .5) 0%, rgba(36, 18, 15, 0) 22%, rgba(36, 18, 15, .12) 52%, rgba(36, 18, 15, .78) 86%, rgba(36, 18, 15, .92) 100%),
    linear-gradient(90deg, rgba(36, 18, 15, .62) 0%, rgba(36, 18, 15, .22) 42%, rgba(36, 18, 15, 0) 62%);
}
.hero__inner {
  position: relative; z-index: 3; width: 100%; max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--nav-h) + 1rem) var(--gut) clamp(2.2rem, 4vw, 4rem);
}
.hero__eyebrow { margin-bottom: 1.4rem; }
.hero__title {
  font-weight: 300; font-size: clamp(5rem, min(18.5vw, 25svh), 20rem); line-height: .78; letter-spacing: -.055em; margin: 0 0 clamp(1.6rem, 3vw, 3rem) -.05em;
}
.hero__line { display: block; overflow: hidden; padding: .14em .05em .2em; margin: -.14em 0 -.2em; }
.hero__title em { font-style: italic; font-weight: 200; color: var(--miel); padding-left: .16em; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; }
.hero__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; }
.hero__lead { max-width: 33rem; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.55; color: rgba(243, 235, 223, .9); margin-bottom: 2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; }
.hero__side { display: flex; flex-direction: column; align-items: flex-end; gap: 1.6rem; }
.hero__rating { display: grid; justify-items: end; gap: .1rem; font-size: .85rem; letter-spacing: .04em; padding: .9rem 1.2rem; border: 1px solid rgba(243, 235, 223, .3); border-radius: 18px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(36, 18, 15, .28); }
.hero__rating strong { font-family: var(--font-display); font-weight: 300; font-size: 2.6rem; line-height: 1; color: var(--miel); }
.hero__badge { position: relative; width: clamp(96px, 9vw, 128px); aspect-ratio: 1; }
.hero__badge-ring { width: 100%; height: 100%; will-change: transform; }
.hero__badge-ring text { font-family: var(--font-text); font-size: 14.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; fill: var(--lin); }
.hero__badge-icon { position: absolute; inset: 31%; width: 38%; height: 38%; color: var(--miel); }
.hero__scroll { position: absolute; left: 50%; bottom: 1.2rem; z-index: 4; width: 1.6rem; height: 2.6rem; margin-left: -.8rem; border: 1.5px solid rgba(243, 235, 223, .55); border-radius: 999px; display: none; }
.hero__scroll span { position: absolute; left: 50%; top: .5rem; width: 3px; height: .55rem; margin-left: -1.5px; border-radius: 2px; background: var(--miel); animation: wheel 2s var(--ease) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(.9rem); opacity: 0; } 100% { opacity: 0; } }

/* ---------- 2. Marquees en ciseaux ---------- */
.marquees { position: relative; z-index: 6; margin-top: -4.6rem; height: 13.5rem; pointer-events: none; overflow: clip; }
.marquee { position: absolute; left: -6%; right: -6%; top: 3.2rem; padding: .9rem 0; overflow: hidden; white-space: nowrap; }
.marquee--a { background: var(--cuivre); color: var(--lin); transform: rotate(-2.2deg); }
.marquee--b { background: var(--espresso); color: var(--miel); transform: rotate(2.2deg); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .4); }
.marquee__inner { display: inline-flex; align-items: center; gap: 2.4rem; will-change: transform; padding-right: 2.4rem; }
.marquee span { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(2rem, 5vw, 4.6rem); line-height: 1.1; letter-spacing: -.02em; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; }
.marquee i { flex: none; width: 1.1rem; height: 1.1rem; background: currentColor; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: .85; }

/* ---------- 3. Manifeste ---------- */
.manifeste { position: relative; background: var(--lin); min-height: 100svh; padding: clamp(8rem, 14vw, 13rem) var(--gut) clamp(10rem, 16vw, 15rem); display: grid; place-items: center; overflow: clip; }
.manifeste__text { position: relative; z-index: 2; max-width: min(54rem, 100%); text-align: center; display: grid; justify-items: center; }
.manifeste__title { font-weight: 300; font-size: clamp(1.9rem, 4.5vw, 4.5rem); line-height: 1.13; letter-spacing: -.03em; }
.manifeste__title .w { display: inline-block; }
.manifeste__title em { font-style: italic; color: var(--cuivre); font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; }
.manifeste__sign { margin-top: 2.4rem; font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--bordeaux); }
.manifeste__img { position: absolute; z-index: 1; width: clamp(110px, 14vw, 240px); aspect-ratio: 3 / 4; box-shadow: 0 40px 70px -35px rgba(36, 18, 15, .55); will-change: transform; }
.manifeste__img--l { left: var(--gut); top: 9%; }
.manifeste__img--r { right: var(--gut); bottom: 14%; }

/* ---------- 4. Rituel ---------- */
.rituel { position: relative; background: var(--bordeaux); color: var(--lin); height: 100svh; overflow: clip; }
.rituel__pin { height: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 4vw; padding: calc(var(--nav-h) + 1rem) var(--gut) 4rem; max-width: 1700px; margin: 0 auto; }
.rituel__title { font-size: clamp(2.4rem, 5.2vw, 5.4rem); max-width: 13ch; }
.steps { position: relative; margin-top: 2.2rem; min-height: 17rem; }
.step { position: absolute; inset: 0 auto auto 0; max-width: 34rem; }
.step__n { display: block; font-family: var(--font-display); font-style: italic; color: var(--miel); font-size: 1.3rem; margin-bottom: .6rem; }
.step h3 { font-weight: 350; font-size: clamp(1.9rem, 3.3vw, 3.4rem); line-height: 1.02; letter-spacing: -.03em; margin-bottom: 1rem; }
.step p { color: rgba(243, 235, 223, .82); }
.step__fig { display: none; }
.rituel__meta { display: flex; align-items: center; gap: 1.2rem; margin-top: 2.2rem; max-width: 34rem; }
.rituel__bar { flex: 1; height: 2px; background: rgba(243, 235, 223, .22); overflow: hidden; border-radius: 2px; }
.rituel__bar i { display: block; height: 100%; background: var(--miel); transform: scaleX(.25); transform-origin: left; }
.rituel__count { font-family: var(--font-display); font-size: 1.15rem; color: var(--miel); font-variant-numeric: tabular-nums; }
.rituel__right { position: relative; display: grid; place-items: center; height: 100%; }
.rituel__stage { position: relative; height: min(70svh, 640px); aspect-ratio: 3 / 4; background: #000; box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .6); border-radius: 50% 50% 0 0 / 34% 34% 0 0; z-index: 1; }
.rituel__media { position: absolute; inset: 0; overflow: hidden; }
.rituel__media img, .rituel__media video { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.rituel__ring { position: absolute; height: calc(min(70svh, 640px) + 3.4rem); aspect-ratio: 3 / 4; border: 1px solid rgba(227, 168, 87, .55); border-radius: 50% 50% 0 0 / 34% 34% 0 0; transform: translate(1.4rem, -1.2rem); }

/* ---------- 5. Prestations ---------- */
.services { position: relative; background: var(--lin); height: 100svh; overflow: clip; }
.services__pin { height: 100%; width: max-content; min-width: 100%; display: flex; align-items: center; padding: var(--nav-h) 0 4rem var(--gut); gap: clamp(2rem, 4vw, 4.5rem); will-change: transform; }
.services__head { flex: 0 0 clamp(300px, 29vw, 460px); }
.services__head .h2 { font-size: clamp(2.5rem, 5vw, 5rem); margin-bottom: 1.4rem; }
.services__hint { display: inline-flex; align-items: center; gap: .6rem; margin-top: 2rem; font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--cuivre); }
.services__hint svg { width: 1.3rem; height: 1.3rem; animation: nudge 1.8s var(--ease) infinite; }
@keyframes nudge { 50% { transform: translateX(.5rem); } }
.services__track { flex: none; display: flex; align-items: stretch; gap: clamp(1.1rem, 2vw, 2rem); padding-right: var(--gut); height: min(68svh, 640px); }
.card {
  position: relative; flex: 0 0 clamp(270px, 23vw, 370px); display: flex; flex-direction: column; gap: 1rem; padding: .9rem;
  background: var(--creme); border-radius: 30px; box-shadow: 0 30px 60px -38px rgba(36, 18, 15, .5);
  transform-style: preserve-3d; will-change: transform; border: 1px solid rgba(36, 18, 15, .06);
}
.card__shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .55), transparent 55%); mix-blend-mode: soft-light; }
.card:hover .card__shine { opacity: 1; }
.card__img { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 50% 50% 18px 18px / 30% 30% 18px 18px; overflow: hidden; }
.card__img img { width: 118%; max-width: none; height: 100%; object-fit: cover; will-change: transform; }
.card__body { padding: .3rem .8rem .8rem; display: grid; gap: .55rem; }
.card__n { font-family: var(--font-display); font-style: italic; color: var(--cuivre); }
.card h3 { font-weight: 350; font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1.05; letter-spacing: -.025em; }
.card p { font-size: .93rem; line-height: 1.5; color: rgba(36, 18, 15, .76); }
.card__meta { display: flex; justify-content: space-between; gap: .8rem; font-size: .74rem !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cuivre) !important; padding-top: .3rem; }
.card .btn { justify-self: start; margin-top: .3rem; }
.card--end { background: var(--bordeaux); color: var(--lin); justify-content: center; align-items: center; text-align: center; border: 0; }
.card__end { display: grid; gap: 1.2rem; justify-items: center; padding: 1.5rem; }
.card .card__end-title { font-weight: 300; font-size: clamp(2.2rem, 3vw, 3.2rem); line-height: 1; letter-spacing: -.03em; color: var(--lin); }
.card--end p { color: rgba(243, 235, 223, .8); }
.card--end .btn--fill { --hbg: var(--lin); --hfg: var(--espresso); }

/* ---------- 6. Chiffres ---------- */
.chiffres { position: relative; background: var(--espresso); color: var(--lin); padding: clamp(7rem, 11vw, 11rem) var(--gut) 5rem; overflow: clip; }
.chiffres::before { content: ''; position: absolute; right: -14vw; top: -18vw; width: 46vw; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(227, 168, 87, .22); box-shadow: 0 0 0 4vw rgba(227, 168, 87, .05), 0 0 0 9vw rgba(227, 168, 87, .03); }
.chiffres__grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--maxw); margin: 0 auto; }
.chiffres__grid li { padding: 1.5rem clamp(1rem, 2.4vw, 2.6rem) 1.5rem; border-left: 1px solid rgba(243, 235, 223, .16); display: grid; gap: .8rem; align-content: start; }
.num { display: flex; align-items: baseline; gap: .2em; font-weight: 200; font-size: clamp(3.8rem, 8.4vw, 9rem); line-height: .95; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.4px var(--miel); transition: color .9s var(--ease); }
.num.is-filled { color: var(--miel); -webkit-text-stroke-color: transparent; }
.num small { font-size: .3em; letter-spacing: 0; -webkit-text-stroke-width: 0; color: var(--rose); }
.lbl { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(243, 235, 223, .72); max-width: 14rem; line-height: 1.5; }
.chiffres__note { position: relative; max-width: var(--maxw); margin: 3rem auto 0; font-size: .78rem; color: rgba(243, 235, 223, .5); }

/* ---------- 7. Galerie ---------- */
.galerie { position: relative; background: var(--lin); padding: clamp(7rem, 11vw, 11rem) var(--gut) clamp(6rem, 9vw, 9rem); overflow: clip; }
.galerie__head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 4vw; align-items: end; max-width: var(--maxw); margin: 0 auto; }
.galerie__head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 2.4rem); align-items: start; max-width: var(--maxw); margin: 5rem auto 0; }
.mosaic__col { display: flex; flex-direction: column; gap: clamp(1rem, 2.2vw, 2.4rem); will-change: transform; }
.mosaic__col--mid { margin-top: 7rem; }
.tile { position: relative; cursor: pointer; overflow: clip; border-radius: 22px; }
.tile__frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 22px; background: var(--rose); }
.tile .arch { border-radius: 50% 50% 22px 22px / 34% 34% 22px 22px; }
.tile--wide .tile__frame { aspect-ratio: 720 / 800; border-radius: 22px; }
.tile img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; will-change: transform; transition: filter .6s var(--ease); }
.tile:hover img, .tile:focus-visible img { filter: saturate(1.12) contrast(1.03); }
.tile figcaption { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; padding: .7rem 1rem; border-radius: 14px; background: rgba(36, 18, 15, .72); color: var(--lin); font-size: .82rem; font-weight: 700; letter-spacing: .05em; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transform: translateY(130%); transition: transform .6s var(--ease); }
.tile:hover figcaption, .tile:focus-visible figcaption { transform: none; }
.galerie__insta { text-align: center; margin-top: 5rem; font-weight: 700; }

.lightbox { border: 0; padding: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: rgba(36, 18, 15, .94); color: var(--lin); }
.lightbox::backdrop { background: rgba(0, 0, 0, .7); }
.lightbox[open] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.2rem; animation: fadeIn .4s var(--ease); }
@keyframes fadeIn { from { opacity: 0; } }
.lightbox figure { display: grid; justify-items: center; gap: 1rem; min-width: 0; }
.lightbox img { max-height: 82svh; width: auto; max-width: 100%; border-radius: 20px; object-fit: contain; }
.lightbox figcaption { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; }
.lightbox__close { position: absolute; top: 1.2rem; right: 1.2rem; }

/* ---------- 8. Avis ---------- */
.avis { position: relative; background: var(--bordeaux); color: var(--lin); padding: clamp(9rem, 13vw, 13rem) var(--gut) clamp(6rem, 9vw, 9rem); overflow: clip; }
.avis::after { content: ''; position: absolute; left: -20vw; bottom: -30vw; width: 60vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(180, 83, 31, .35), transparent 65%); pointer-events: none; }
.avis__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.5fr); gap: 6vw; align-items: center; max-width: var(--maxw); margin: 0 auto; }
.avis__big { display: flex; align-items: baseline; gap: .1em; font-weight: 200; font-size: clamp(6rem, 13vw, 13rem); line-height: .9; letter-spacing: -.06em; color: var(--miel); }
.avis__big small { font-size: .26em; letter-spacing: 0; color: var(--rose); }
.avis__score .stars { margin: .5rem 0 1rem; }
.avis__count { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; margin-bottom: 1.8rem; color: rgba(243, 235, 223, .8); }
.avis__stage { position: relative; min-height: 26rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; }
.avis__stage::before { content: '“'; position: absolute; left: -.5rem; top: -7rem; font-family: var(--font-display); font-size: 20rem; line-height: 1; color: rgba(227, 168, 87, .16); pointer-events: none; }
.slide { position: relative; display: grid; gap: 1.8rem; }
.slide p { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.4rem, 2.55vw, 2.65rem); line-height: 1.27; letter-spacing: -.02em; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 72; }
.slide footer { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.2rem; }
.slide .who { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .82rem; color: var(--miel); }
.slide .src { font-size: .82rem; color: rgba(243, 235, 223, .65); }
.avis__ctrl { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.avis__dots { display: flex; gap: .55rem; }
.avis__dot { width: .62rem; height: .62rem; border-radius: 50%; background: rgba(243, 235, 223, .28); transition: transform .4s var(--ease), background .4s; }
.avis__dot[aria-selected='true'] { background: var(--miel); transform: scale(1.5); }
.avis__timer { flex: 1; min-width: 4rem; height: 2px; background: rgba(243, 235, 223, .18); overflow: hidden; }
.avis__timer i { display: block; height: 100%; background: var(--miel); transform: scaleX(0); transform-origin: left; }

/* ---------- 9. Réservation ---------- */
.reserver { position: relative; background: var(--espresso); color: var(--lin); padding: clamp(6rem, 9vw, 10rem) var(--gut); overflow: clip; isolation: isolate; }
.reserver__bg { position: absolute; inset: -6% 0; z-index: -2; }
.reserver__bg img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.reserver__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(36, 18, 15, .92) 6%, rgba(92, 24, 34, .6) 55%, rgba(36, 18, 15, .78)); }
.reserver__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; max-width: var(--maxw); margin: 0 auto; }
.reserver__copy { position: sticky; top: 7rem; }
.reserver .h2 { margin-bottom: 1.6rem; font-size: clamp(2.6rem, 5.6vw, 5.8rem); }
.phone-big { display: inline-flex; align-items: center; gap: 1rem; margin: 2.2rem 0 2rem; font-weight: 300; font-size: clamp(2rem, 3.8vw, 3.8rem); line-height: 1; letter-spacing: -.03em; color: var(--miel); border-bottom: 1.5px solid rgba(227, 168, 87, .5); padding-bottom: .5rem; transition: color .4s, border-color .4s; }
.phone-big:hover { color: var(--lin); border-color: var(--lin); }
.phone-big svg { width: .8em; height: .8em; }
.reserver__facts { display: grid; gap: .5rem; font-size: .95rem; color: rgba(243, 235, 223, .82); }
.reserver__facts strong { color: var(--lin); margin-right: .6rem; }

.booking { position: relative; background: var(--creme); color: var(--espresso); border-radius: 32px; overflow: hidden; display: flex; flex-direction: column; min-height: 36rem; box-shadow: 0 50px 110px -30px rgba(0, 0, 0, .7); }
.booking__top { padding: 1.6rem 1.8rem 1.2rem; border-bottom: 1px solid rgba(36, 18, 15, .1); display: grid; gap: 1rem; }
.booking__top h3 { font-family: var(--font-display); font-weight: 350; font-size: 1.9rem; letter-spacing: -.03em; line-height: 1; }
.booking__demo { justify-self: start; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cuivre); background: rgba(180, 83, 31, .1); padding: .35rem .75rem; border-radius: 999px; }
.booking__steps { display: flex; gap: 1.6rem; flex-wrap: wrap; font-size: .8rem; font-weight: 700; color: rgba(36, 18, 15, .45); }
.booking__steps li { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding-bottom: .5rem; transition: color .4s; }
.booking__steps b { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid currentColor; font-size: .72rem; }
.booking__steps li::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--cuivre); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.booking__steps li.is-current { color: var(--espresso); }
.booking__steps li.is-current::after { transform: scaleX(1); }
.booking__steps li.is-done { color: var(--cuivre); }
.booking__steps li.is-done b { background: var(--cuivre); border-color: var(--cuivre); color: #fff; }
.booking__body { flex: 1; padding: 1.6rem 1.8rem; }
.bk-legend { font-family: var(--font-display); font-size: 1.35rem; font-weight: 350; margin-bottom: 1.1rem; letter-spacing: -.02em; border: 0; padding: 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.bk-panel.is-entering { animation: panelIn .6s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } }

.bk-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.bk-svc { position: relative; display: block; cursor: pointer; }
.bk-svc input { position: absolute; opacity: 0; inset: 0; }
.bk-svc span { display: grid; gap: .15rem; padding: 1rem 1.1rem; border: 1.5px solid rgba(36, 18, 15, .14); border-radius: 18px; background: #fff; transition: border-color .35s, background .35s, transform .35s var(--ease), box-shadow .35s; height: 100%; }
.bk-svc strong { font-family: var(--font-display); font-weight: 400; font-size: 1.18rem; letter-spacing: -.02em; line-height: 1.1; }
.bk-svc small { font-size: .78rem; color: rgba(36, 18, 15, .6); font-weight: 600; }
.bk-svc:hover span { border-color: var(--cuivre); transform: translateY(-2px); }
.bk-svc input:checked + span { border-color: var(--cuivre); background: rgba(235, 201, 184, .35); box-shadow: 0 0 0 3px rgba(180, 83, 31, .16); }
.bk-svc input:focus-visible + span { outline: 2px solid var(--cuivre); outline-offset: 3px; }

.bk-when { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.8rem; }
.bk-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.bk-cal__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 350; text-transform: capitalize; letter-spacing: -.02em; }
.bk-cal__nav { display: flex; gap: .4rem; }
.bk-cal__nav button { width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1.5px solid rgba(36, 18, 15, .2); display: grid; place-items: center; transition: background .3s, color .3s; }
.bk-cal__nav button:hover:not(:disabled) { background: var(--espresso); color: var(--lin); }
.bk-cal__nav button:disabled { opacity: .3; cursor: default; }
.bk-cal__nav svg { width: 1.1rem; height: 1.1rem; }
.bk-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; text-align: center; }
.bk-cal__dow { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(36, 18, 15, .45); padding: .3rem 0; }
.bk-day { aspect-ratio: 1; border-radius: 50%; font-weight: 700; font-size: .9rem; display: grid; place-items: center; transition: background .3s, color .3s, transform .3s var(--ease); position: relative; }
.bk-day:hover:not(:disabled) { background: rgba(235, 201, 184, .6); transform: scale(1.08); }
.bk-day:disabled { color: rgba(36, 18, 15, .22); cursor: default; font-weight: 500; }
.bk-day.is-today::after { content: ''; position: absolute; bottom: .22rem; width: .26rem; height: .26rem; border-radius: 50%; background: var(--cuivre); }
.bk-day.is-open:not(:disabled) { background: rgba(36, 18, 15, .06); }
.bk-day.is-open[aria-pressed='true']:not(:disabled), .bk-day[aria-pressed='true'] { background: var(--cuivre); color: #fff; }
.bk-day[aria-pressed='true']::after { background: #fff; }
.bk-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; align-content: start; }
.bk-slot { position: relative; }
.bk-slot input { position: absolute; opacity: 0; inset: 0; }
.bk-slot span { display: block; text-align: center; padding: .7rem .2rem; border-radius: 12px; border: 1.5px solid rgba(36, 18, 15, .14); background: #fff; font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; transition: border-color .3s, background .3s, color .3s, transform .3s var(--ease); cursor: pointer; }
.bk-slot:hover span { border-color: var(--cuivre); transform: translateY(-2px); }
.bk-slot input:checked + span { background: var(--cuivre); border-color: var(--cuivre); color: #fff; }
.bk-slot input:focus-visible + span { outline: 2px solid var(--cuivre); outline-offset: 2px; }
.bk-empty { grid-column: 1 / -1; padding: 1rem 1.1rem; border-radius: 14px; background: rgba(36, 18, 15, .05); font-size: .92rem; line-height: 1.5; }
.bk-loading { grid-column: 1 / -1; display: flex; gap: .4rem; padding: 1rem; }
.bk-loading i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--cuivre); animation: dot 1s infinite ease-in-out; }
.bk-loading i:nth-child(2) { animation-delay: .15s; } .bk-loading i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

.bk-recap { padding: 1rem 1.2rem; border-radius: 18px; background: rgba(235, 201, 184, .35); margin-bottom: 1.2rem; display: grid; gap: .15rem; font-size: .95rem; }
.bk-recap strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; }
.bk-recap span { color: rgba(36, 18, 15, .72); }
.bk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.field { display: grid; gap: .35rem; }
.field--full { grid-column: 1 / -1; }
.field > span { font-size: .78rem; font-weight: 800; letter-spacing: .04em; }
.field > span i { font-style: normal; font-weight: 500; opacity: .6; }
.field input, .field textarea { font: inherit; padding: .85rem 1rem; border: 1.5px solid rgba(36, 18, 15, .16); border-radius: 14px; background: #fff; color: inherit; width: 100%; transition: border-color .3s, box-shadow .3s; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--cuivre); box-shadow: 0 0 0 4px rgba(180, 83, 31, .15); }
.field.is-invalid input, .field.is-invalid textarea { border-color: #b3261e; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .85rem; line-height: 1.45; cursor: pointer; }
.check input { width: 1.2rem; height: 1.2rem; margin-top: .1rem; accent-color: var(--cuivre); flex: none; }
.check.is-invalid { color: #b3261e; }
.bk-error { margin-top: 1rem; padding: .8rem 1rem; border-radius: 12px; background: rgba(179, 38, 30, .1); color: #8c1d18; font-size: .9rem; font-weight: 600; }

.bk-done { text-align: center; display: grid; justify-items: center; align-content: center; gap: .9rem; min-height: 22rem; }
.bk-done__icon { width: 4.6rem; height: 4.6rem; border-radius: 50%; background: var(--cuivre); color: #fff; display: grid; place-items: center; animation: pop .7s var(--ease); }
.bk-done__icon svg { width: 2.4rem; height: 2.4rem; }
@keyframes pop { from { transform: scale(.2); opacity: 0; } }
.bk-done h4 { font-family: var(--font-display); font-weight: 350; font-size: 2rem; letter-spacing: -.03em; }
.bk-done p { max-width: 28rem; color: rgba(36, 18, 15, .78); }
.bk-done__actions { display: flex; gap: .7rem; flex-wrap: wrap; justify-content: center; margin-top: .6rem; }

.booking__foot { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.8rem; border-top: 1px solid rgba(36, 18, 15, .1); background: rgba(255, 255, 255, .55); }
.bk-back { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; font-size: .88rem; }
.bk-back svg { width: 1.1rem; height: 1.1rem; }
.bk-sum { flex: 1; font-size: .85rem; font-weight: 600; color: rgba(36, 18, 15, .7); min-width: 0; }
.booking[data-step='done'] .booking__foot { display: none; }

/* ---------- 10. Nous trouver ---------- */
.trouver { position: relative; background: var(--lin); }
.trouver__band { position: relative; height: clamp(320px, 50vw, 620px); overflow: hidden; display: grid; place-items: center; color: var(--lin); text-align: center; padding: 0 var(--gut); }
.trouver__band img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; will-change: transform; }
.trouver__band-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36, 18, 15, .45), rgba(92, 24, 34, .55)); }
.trouver__title { position: relative; font-size: clamp(2.8rem, 8.4vw, 9rem); }
.trouver__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 6rem); max-width: var(--maxw); margin: 0 auto; padding: clamp(4rem, 7vw, 7rem) var(--gut) clamp(5rem, 8vw, 9rem); align-items: start; }
.trouver__info { display: grid; }
.trouver__salon { width: min(62%, 300px); aspect-ratio: 3 / 4; margin-left: auto; position: relative; z-index: 1; box-shadow: 0 40px 70px -35px rgba(36, 18, 15, .5); will-change: transform; }
.trouver__salon img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.trouver__card { position: relative; z-index: 2; margin-top: -9rem; background: var(--creme); padding: clamp(1.4rem, 2.6vw, 2.4rem); border-radius: 28px; box-shadow: 0 30px 70px -40px rgba(36, 18, 15, .5); display: grid; gap: 1rem; border: 1px solid rgba(36, 18, 15, .06); }
.trouver__card .eyebrow { margin-bottom: .2rem; }
.trouver__addr { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; }
.status { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: .9rem; }
.hours { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hours th, .hours td { padding: .55rem 0; text-align: left; border-bottom: 1px solid rgba(36, 18, 15, .1); font-weight: 500; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--cuivre); font-weight: 800; }
.trouver__links { display: flex; gap: 1.6rem; flex-wrap: wrap; font-weight: 700; font-size: .92rem; }
.trouver__map { position: sticky; top: 6.5rem; height: min(78svh, 680px); border-radius: 32px; overflow: hidden; background: var(--rose); box-shadow: 0 40px 80px -40px rgba(36, 18, 15, .5); }
.trouver__map iframe { width: 100%; height: 100%; border: 0; filter: sepia(.18) saturate(.92) contrast(1.02); }
.trouver__open { position: absolute; left: 1.2rem; bottom: 1.2rem; }

/* ---------- 11. Footer ---------- */
.footer { position: relative; background: var(--espresso); color: var(--lin); padding: 5rem var(--gut) 1.8rem; overflow: clip; }
.footer__cut { position: relative; height: 2.6rem; margin-bottom: 3.5rem; color: var(--miel); }
.footer__dash { position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 2px dashed rgba(227, 168, 87, .6); transform-origin: left; }
.footer__scissors { position: absolute; left: 0; top: 0; width: 2.6rem; height: 2.6rem; background: var(--espresso); padding: .1rem; will-change: transform; }
.footer__scissors .blade { transform-box: view-box; transform-origin: 27px 24px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; max-width: var(--maxw); margin: 0 auto; }
.footer__tag { font-weight: 300; font-size: clamp(1.8rem, 3.2vw, 3.2rem); line-height: 1.02; letter-spacing: -.03em; margin-bottom: 1.8rem; }
.footer h3 { font-size: .72rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--miel); margin-bottom: 1.1rem; }
.footer nav, .footer__grid > div:nth-child(n+3) { display: grid; gap: .55rem; align-content: start; }
.footer__grid > div:nth-child(3) p, .footer__grid > div:nth-child(3) { color: rgba(243, 235, 223, .85); }
.footer__small { font-size: .85rem; color: rgba(243, 235, 223, .6); }
.footer__giant { margin-top: clamp(3rem, 6vw, 6rem); font-weight: 300; font-size: clamp(4.4rem, 21.5vw, 26rem); line-height: .8; letter-spacing: -.06em; white-space: nowrap; color: #3a1b1b; user-select: none; text-align: center; margin-left: -.04em; }
.footer__giant .char { padding-bottom: .1em; }
.footer__giant em { font-style: italic; font-weight: 200; color: var(--bordeaux); font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; }
.footer__giant { overflow: hidden; padding-bottom: .1em; }
.footer__bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(243, 235, 223, .14); font-size: .8rem; color: rgba(243, 235, 223, .6); }

/* ---------- Barre d'action mobile ---------- */
.fab { display: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .chiffres__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .chiffres__grid li:nth-child(odd) { border-left: 0; }
  .avis__inner { grid-template-columns: 1fr; gap: 3rem; }
  .avis__score { display: grid; justify-items: start; }
  .reserver__inner { grid-template-columns: 1fr; }
  .reserver__copy { position: static; }
  .trouver__grid { grid-template-columns: 1fr; }
  .trouver__map { position: relative; top: 0; height: 28rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 899px) {
  :root { --nav-h: 4.4rem; }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .hero__row { grid-template-columns: 1fr; }
  .hero__side { flex-direction: row; align-items: center; justify-content: space-between; }
  .hero__rating { justify-items: start; }
  .hero__badge { display: none; }
  .marquees { height: 11rem; margin-top: -3.4rem; }
  .manifeste { min-height: 0; padding-top: 11rem; padding-bottom: 12rem; }
  .manifeste__img { width: 28vw; }
  .manifeste__img--l { top: 3%; left: 6%; }
  .manifeste__img--r { bottom: 4%; right: 6%; }

  .card { flex-basis: 78vw; }
  .card__img { aspect-ratio: 4 / 4.6; flex: none; }
  .card--end { min-height: 22rem; }

  .galerie__head { grid-template-columns: 1fr; gap: 1.2rem; }
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 3rem; }
  .mosaic__col:nth-child(3) { display: none; }
  .mosaic__col--mid { margin-top: 3rem; }
  .tile figcaption { transform: none; font-size: .72rem; padding: .5rem .7rem; left: .5rem; right: .5rem; bottom: .5rem; }

  .bk-when { grid-template-columns: 1fr; }
  .booking__top, .booking__body, .booking__foot { padding-left: 1.2rem; padding-right: 1.2rem; }
  .bk-fields { grid-template-columns: 1fr; }
  .trouver__card { margin-top: -6rem; }

  .fab { display: flex; position: fixed; z-index: 700; left: 50%; bottom: max(.9rem, env(safe-area-inset-bottom)); transform: translate(-50%, 160%); transition: transform .7s var(--ease); border-radius: 999px; overflow: hidden; box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .5); }
  .fab.is-on { transform: translate(-50%, 0); }
  .fab.is-on.is-hidden { transform: translate(-50%, 160%); }
  .fab a { display: inline-flex; align-items: center; gap: .5rem; padding: .95rem 1.5rem; font-weight: 800; font-size: .92rem; }
  .fab svg { width: 1.15rem; height: 1.15rem; }
  .fab__call { background: var(--espresso); color: var(--lin); }
  .fab__book { background: var(--cuivre); color: #fff; }
  .footer { padding-bottom: 6rem; }
}

/* Sections « empilées » : mobile / tablette, ou mouvement réduit (pas d'épinglage) */
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .rituel { height: auto; }
  .rituel__pin { display: block; height: auto; padding: 6rem var(--gut) 9rem; }
  .rituel__right { display: none; }
  .steps { margin-top: 3rem; min-height: 0; display: grid; gap: 4rem; }
  .step { position: relative; inset: auto; max-width: none; }
  .step__fig { display: block; margin-top: 1.6rem; aspect-ratio: 4 / 5; width: min(100%, 420px); border-radius: 50% 50% 22px 22px / 30% 30% 22px 22px; overflow: hidden; }
  .rituel__meta { display: none; }

  .services { height: auto; padding: 6rem 0 9rem; }
  .services__pin { display: block; width: auto; height: auto; padding: 0; }
  .services__head { padding: 0 var(--gut); margin-bottom: 2.5rem; }
  .services__hint { display: none; }
  .services__track { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem var(--gut) 1.5rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .services__track::-webkit-scrollbar { display: none; }
  .card { scroll-snap-align: center; flex-basis: min(78vw, 340px); }
  .card__img { aspect-ratio: 4 / 4.6; flex: none; }
  .card__img img { width: 100%; }
}

@media (max-width: 560px) {
  .bk-services { grid-template-columns: 1fr; }
  .bk-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chiffres__grid li { padding-inline: .8rem; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__cta .btn { width: 100%; }
  .booking__steps { gap: .9rem; font-size: .72rem; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .grain { display: none; }
  .services__track { overflow-x: auto; }
}