/* Shared navigation follows scroll direction without shifting page content. */
:root{--header-height:98px}
/* All directional icons share the supplied PNG, independent of system fonts. */
.site-arrow{--arrow-rotation:0deg;display:inline-block;width:30px;height:30px;flex:0 0 30px;vertical-align:middle;background:url('../img/arrow-gold.png') center/contain no-repeat;transform:rotate(var(--arrow-rotation));pointer-events:none}
.site-arrow--right{--arrow-rotation:45deg}
.site-arrow--left{--arrow-rotation:225deg}
.site-arrow--up{--arrow-rotation:-45deg}
.site-arrow--down{--arrow-rotation:135deg}
.button.gold .site-arrow{background-image:url('../img/arrow-dark.png')}
/* A real PNG avoids Safari mask compositing; touch must not retain a dark hover icon. */
.round-arrow{background:transparent;-webkit-background-clip:border-box;background-clip:border-box;animation:none;touch-action:manipulation}
@media(hover:hover) and (pointer:fine){.round-arrow:hover .site-arrow,.barber-open:hover .round-arrow .site-arrow{background-image:url('../img/arrow-dark.png')}}
@media(hover:none),(pointer:coarse){.round-arrow:hover,.barber-open:hover .round-arrow{background:transparent;color:var(--gold);transform:none}}
.round-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.round-arrow .site-arrow{width:32px;height:32px;flex-basis:32px}
.contact-nav .site-arrow,.contact-bottom .site-arrow{width:25px;height:25px;flex-basis:25px}
.hero-scroll-link .site-arrow{background-color:#fff;width:40px;height:40px;flex-basis:40px;animation:png-scroll-nudge 2.8s ease-in-out infinite}
@keyframes png-scroll-nudge{0%,100%{translate:0 -3px;opacity:.7}50%{translate:0 4px;opacity:1}}
@media(prefers-reduced-motion:reduce){.hero-scroll-link .site-arrow{animation:none}}
body{padding-top:var(--header-height)}
.site-header{position:fixed;inset:0 0 auto;height:var(--header-height);z-index:40;transform:translateY(0);transition:transform .38s cubic-bezier(.22,.68,.25,1);background:rgba(16,17,16,.96);backdrop-filter:blur(14px)}
.site-header.header-hidden{transform:translateY(-102%)}
.site-header:focus-within{transform:translateY(0)}
.barber-card{scroll-margin-top:120px}
.barber-card:target{outline:1px solid var(--gold);outline-offset:10px}
.price-photo>span::before{content:"";display:block;width:110px;height:110px;margin-bottom:10px;background:url('../img/logo-white-officiel.webp') center/contain no-repeat;opacity:.72;pointer-events:none}
@media(max-width:760px){.price-photo>span::before{width:76px;height:76px;margin-bottom:6px}}
.hero-brand-layout .hero-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;min-height:650px;height:calc(100svh - 98px);max-height:1000px;overflow:hidden}
.hero-brand-layout .hero-content{padding:50px 0 100px max(40px,calc((100vw - 1240px)/2));max-width:none;min-width:0;height:auto;grid-column:1}
.hero-brand-layout h1{font-size:clamp(64px,6.2vw,105px);line-height:1.02}
.hero-brand-layout .hero-welcome{font-size:clamp(17px,1.5vw,23px);color:var(--text)}
.hero-brand-art{position:relative;z-index:2;grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:center;padding:30px 7% 65px 3%}
.hero-brand-art img{width:min(100%,560px);height:auto;max-height:70svh;object-fit:contain;filter:drop-shadow(0 14px 36px rgba(0,0,0,.32))}
.hero-brand-layout .hero-shade{pointer-events:none}
.hero-brand-layout .hero-film-footer{left:50%;right:auto;bottom:20px;transform:translateX(-50%)}
.hero-brand-layout .hero-scroll-link{padding:4px 14px}
.masonry-grid{display:block;columns:3;column-gap:18px}
.masonry-tile{position:relative;width:100%;min-width:0;display:block;break-inside:avoid;margin:0 0 18px;padding:0;border:0;border-radius:3px;background:#1b1c18}
.masonry-tile img{display:block;width:100%;height:auto;object-fit:contain;border-radius:3px;transition:filter .5s;filter:saturate(.85)}
.masonry-tile:hover img{transform:none;filter:saturate(1)}
.masonry-zoom{position:absolute;right:20px;bottom:16px;color:var(--gold);font-size:25px;opacity:0;transition:opacity .25s;text-shadow:0 2px 8px #000}
.masonry-tile:hover .masonry-zoom,.masonry-tile:focus-visible .masonry-zoom{opacity:1}
.mini-masonry-section{padding-block:90px}
.gallery-end{text-align:center}
.gallery-end .eyebrow{margin-bottom:0}
.about-booking{margin-bottom:10px}
.panorama-title em{font-style:normal}
@media(min-width:761px) and (max-height:760px){.hero-brand-layout .hero-panel{min-height:570px}.hero-brand-layout .hero-content{padding-top:30px}.hero-brand-layout h1{font-size:70px}.hero-brand-art img{max-height:65svh}}
@media(max-width:1000px) and (min-width:761px){.hero-brand-layout .hero-content{padding-left:30px}.hero-brand-layout h1{font-size:64px}.hero-brand-layout .hero-actions{gap:15px}}
@media(max-width:760px){
 :root{--header-height:80px}
 .site-header .nav-links{top:80px}
 .hero-brand-layout .hero-panel{display:flex;flex-direction:column;height:auto;max-height:none;min-height:calc(100svh - 80px);padding:12px 0 65px}
 .hero-brand-art{order:0;flex-shrink:0;width:100%;padding:10px 38px 0}
 .hero-brand-art img{width:min(100%,330px);max-height:36svh;object-fit:contain}
 .hero-brand-layout .hero-content{order:1;width:100%;padding:15px 26px 24px;height:auto;max-width:560px}
 .hero-brand-layout .hero-content .eyebrow{font-size:11px;margin-bottom:15px}
 .hero-brand-layout .hero-welcome{font-size:17px;margin-bottom:14px}
 .hero-brand-layout h1{font-size:clamp(54px,12.5vw,80px)}
 .hero-brand-layout .hero-description{font-size:15px;line-height:1.7;margin-top:19px}
 .hero-brand-layout .hero-actions{gap:18px;margin-top:22px}
 .hero-brand-layout .hero-actions .button{padding:13px 17px;font-size:13px}
 .hero-brand-layout .hero-actions .text-link{font-size:13px}
 .hero-brand-layout .hero-film-footer{bottom:12px}
 .masonry-grid{columns:2;column-gap:10px}
 .masonry-tile{margin-bottom:10px}
 .mini-masonry-section{padding-block:60px}
 .masonry-zoom{right:12px;bottom:8px;opacity:.8}
 .barber-card{scroll-margin-top:100px}
}
@media(max-width:380px){.hero-brand-layout .hero-content{padding-inline:20px}.hero-brand-layout .hero-actions{gap:12px}}
@media(prefers-reduced-motion:reduce){.site-header,.masonry-tile img,.masonry-zoom{transition:none}}