:root {
--serafine-beige:     #c2b19f;
--serafine-beige-alt: #f2ece6;
--serafine-rouge:     #a5042b;
--serafine-navy:      #0D1B35;
--serafine-dark:      #1C1C1C;
--serafine-white:     #FFFFFF;
--serafine-gray:      #6B6B6B;
--nav-h:              72px;
} .home .site-header { display: none; } html {
overflow-y: scroll;
} body.loader-active {
position: fixed;
top: 0;
left: 0;
width: 100%;
} #home-nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 200;
height: var(--nav-h);
display: flex;
align-items: center;
padding: 0 2rem;
background: transparent;
transition: background 0.4s ease;
}
#home-nav.scrolled {
background: var(--serafine-beige);
backdrop-filter: blur(8px);
} .nav-logo-wrap {
flex: 0 0 auto;
padding: 0 2rem;
}
.nav-logo {
height: 48px;
width: auto;
display: block;
} .nav-left-links {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1.75rem;
list-style: none;
} .nav-right {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 1.75rem;
}
.nav-right-links {
display: flex;
align-items: center;
gap: 1.75rem;
list-style: none;
}
.nav-left-links a,
.nav-right-links a {
color: var(--serafine-white);
font-size: 0.8125rem;
letter-spacing: 0.06em;
font-weight: 400;
white-space: nowrap;
transition: opacity 0.2s;
}
.nav-left-links a:hover,
.nav-right-links a:hover { opacity: 0.65; } .nav-btn-resa {
display: inline-flex;
align-items: center;
padding: 0.4rem 1.1rem;
border: 1.5px solid var(--serafine-white);
border-radius: 3px;
color: var(--serafine-white) !important;
font-size: 0.8125rem !important;
letter-spacing: 0.06em;
font-weight: 400;
transition: background 0.2s, color 0.2s !important;
}
.nav-btn-resa:hover {
background: var(--serafine-white);
color: var(--serafine-navy) !important;
opacity: 1 !important;
} .nav-social {
display: flex;
align-items: center;
gap: 0.75rem;
}
.nav-social a {
color: var(--serafine-white);
line-height: 0;
transition: opacity 0.2s;
}
.nav-social a:hover { opacity: 0.65; } .nav-mobile { display: none; } @media (max-width: 992px) { .nav-left-links,
.nav-logo-wrap,
.nav-right { display: none; } .nav-mobile {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
}
#home-nav {
grid-template-columns: 1fr;
padding: 0 1rem;
background: rgba(13, 27, 53, 0.9);
}
.nav-hamburger {
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
color: var(--serafine-white);
line-height: 0;
}
.nav-mobile-logo img { height: 36px; width: auto; }
.nav-mobile .nav-btn-resa { font-size: 0.75rem !important; padding: 0.35rem 0.85rem; }
} .mobile-menu {
position: fixed;
top: 0; left: 0; bottom: 0;
width: min(300px, 80vw);
z-index: 300;
background: var(--serafine-navy);
padding: 2rem 1.5rem;
display: flex;
flex-direction: column;
gap: 2rem;
transform: translateX(-100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu.is-open {
transform: translateX(0);
}
.mobile-menu-close {
background: none;
border: none;
cursor: pointer;
color: var(--serafine-white);
line-height: 0;
align-self: flex-end;
}
.mobile-menu-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.mobile-menu-links a {
color: var(--serafine-white);
font-size: 1rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 400;
transition: opacity 0.2s;
}
.mobile-menu-links a:hover { opacity: 0.65; }
.mobile-menu-social {
display: flex;
gap: 1rem;
margin-top: auto;
}
.mobile-menu-social a {
color: var(--serafine-white);
line-height: 0;
transition: opacity 0.2s;
}
.mobile-menu-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 290;
background: rgba(0,0,0,0.5);
}
.mobile-menu-overlay.is-visible { display: block; }  :root {
--restaurant-x: 73%; --restaurant-y: 78%; --restaurant-w: 38%; }
#serafine-loader {
position: fixed;
inset: 0;
z-index: 9999;
background: var(--serafine-beige);
display: flex;
align-items: center;
justify-content: center;
}
.loader-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
text-align: center;
transform: translateY(-75px);
} .loader-logo-block {
display: flex;
flex-direction: column;
align-items: center;
}
.loader-calligraphie {
position: relative;
width: min(520px, 80vw);
}
.loader-svg-anim {
width: 100%;
height: auto;
display: block;
} .loader-svg-anim .cls-1,
.loader-svg-anim #letters path,
.loader-svg-anim #letters polyline {
fill: #ffffff !important;
stroke: none;
} .loader-svg-anim .strokeMask {
stroke-dasharray: 10000;
stroke-dashoffset: 10000;
stroke-opacity: 0;
} .loader-restaurant-wrap {
position: absolute;
left: var(--restaurant-x);
top: var(--restaurant-y);
width: var(--restaurant-w);
transform: translateX(-50%);
opacity: 0;
}
.loader-restaurant-svg {
width: 100%;
height: auto;
display: block;
transform: translateX(44%);
} .loader-line {
width: 0;
height: 1px;
background: rgba(255, 255, 255, 0.7);
max-width: 320px;
} .loader-tagline-wrap {
position: relative;
display: inline-block;
}
.loader-tagline {
font-size: clamp(1.2rem, 2.5vw, 1.6rem);
font-style: italic;
color: #ffffff;
letter-spacing: 0.04em;
margin: 0;
}
.loader-tagline-word {
display: inline-block;
opacity: 0; }
.loader-tagline-letter {
display: inline-block;
will-change: transform, opacity, filter;
}
.loader-tagline-word + .loader-tagline-word {
margin-left: 0.35em;
} .loader-stars {
position: absolute;
inset: 0;
pointer-events: none;
}
.loader-star {
position: absolute;
color: rgba(255, 255, 255, 0.9);
font-size: 0.85rem;
line-height: 1;
opacity: 0;
pointer-events: none;
user-select: none;
} .hero-section {
position: relative;
width: 100%;
height: 100vh;
min-height: 560px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
will-change: transform;
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.45) 100%);
}
.hero-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transform: translateY(-120px);
} .hero-logo-block {
position: relative;
width: min(520px, 80vw);
margin: 0 auto;
}
.hero-logo-script {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 2px 20px rgba(0,0,0,0.35));
} .hero-restaurant-wrap {
position: absolute;
left: var(--restaurant-x);
top:  var(--restaurant-y);
width: var(--restaurant-w);
transform: translateX(-50%);
z-index: 2;
}
.hero-restaurant-svg {
width: 100%;
height: auto;
display: block;
transform: translateX(44%);
}
.hero-scroll-hint {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.hero-scroll-hint span {
display: block;
width: 1px;
height: 55px;
background: rgba(255,255,255,0.45);
margin: 0 auto;
animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
50%  { opacity: 1; }
100% { transform: scaleY(1); transform-origin: top; opacity: 0; }
} .section { position: relative; } html {
background: #111;
}
.panel {
position: sticky;
top: 0;
overflow: hidden;
transform-origin: bottom center;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translateZ(0);
} .panel--animating {
will-change: transform;
} .hero-section {
background: #111;
}
.container--narrow {
max-width: 1200px;
margin-inline: auto;
padding-inline: 1.5rem;
}
@media (max-width: 980px) {
.container--narrow { max-width: 760px; }
}
@media (max-width: 600px) {
.container--narrow { max-width: 100%; }
}
.text-center { text-align: center; }
.section-title {
font-size: clamp(1.4rem, 3vw, 2.1rem);
font-weight: 300;
line-height: 1.25;
margin-bottom: 1.25rem;
}
.title--red { color: var(--serafine-rouge); }
.section-text {
font-size: clamp(1rem, 1.4vw, 1.1rem);
line-height: 1.85;
color: var(--serafine-dark);
}
.section-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 2rem;
} .section--intro {
background: var(--serafine-white);
padding: clamp(4rem, 8vw, 6rem) 0;
}
.intro-badges {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
flex-wrap: wrap;
margin-top: 1.5rem;
}
.intro-badges .badge-michelin {
height: 68px;
width: auto;
max-height: 68px;
}
.intro-badges .badge-gm {
height: 120px;
width: auto;
max-width: 120px;
}
.intro-reconnu {
font-size: 0.9rem;
color: var(--serafine-gray);
font-style: italic;
} .btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.65rem 1.6rem;
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 300;
border-radius: 10px;
transition: background 0.2s, color 0.2s;
cursor: pointer;
}
.btn--outline {
border: 1.5px solid var(--serafine-rouge);
color: var(--serafine-rouge);
background: transparent;
}
.btn--outline:hover {
background: var(--serafine-rouge);
color: var(--serafine-white);
} .section--carousel {
background: var(--serafine-beige-alt);
padding: clamp(3rem, 6vw, 4rem) 0;
overflow: hidden;
} .carousel-stage {
position: relative;
height: 520px;
overflow: visible;
user-select: none;
touch-action: pan-y;
} .carousel-slide {
position: absolute;
left: 50%;
top: 50%;
width: 315px; height: 490px;
transform-origin: center center;
border-radius: 6px;
overflow: hidden;
cursor: grab;
will-change: transform, opacity;
visibility: hidden; }
.carousel-slide:active { cursor: grabbing; }
.carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
-webkit-user-drag: none;
} .carousel-dots {
display: flex;
justify-content: center;
gap: 0.6rem;
margin: 1.75rem 0 1.25rem;
}
.carousel-dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: 1.5px solid var(--serafine-rouge);
background: transparent;
cursor: pointer;
padding: 0;
transition: background 0.25s;
}
.carousel-dot.is-active { background: var(--serafine-rouge); }
.carousel-cta {
text-align: center;
margin-top: 0.75rem;
} .section--split {
background: var(--serafine-white);
padding: clamp(3rem, 6vw, 5rem) 1.5rem;
}
.section--split-reverse {
background: var(--serafine-beige-alt);
} .container--split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 4vw, 4rem);
align-items: center;
width: 100%;
max-width: 1200px;
margin-inline: auto;
}
.split-image {
overflow: hidden;
border-radius: 4px;
aspect-ratio: 3 / 2;
}
.split-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.split-content {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1.25rem;
} @media (max-width: 980px) {
.container--split {
max-width: 760px;
gap: 2rem;
}
} @media (max-width: 600px) {
.container--split {
grid-template-columns: 1fr;
max-width: 100%;
}
.section--split .split-image { order: 1; }
.section--split .split-content { order: 2; }
.section--split-reverse .split-image { order: 1; }
.section--split-reverse .split-content { order: 2; }
} .section--contact {
background: var(--serafine-white);
padding: clamp(3rem, 6vw, 5rem) 1.5rem;
} .section--contact .container--split {
align-items: stretch;
} .contact-map {
position: relative;
overflow: hidden;
border-radius: 4px;
min-height: 380px;
background: var(--serafine-beige);
}
.contact-map iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
.map-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.map-icon { color: var(--serafine-rouge); }
.map-placeholder span {
font-size: 0.9rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--serafine-rouge);
} .contact-info {
display: flex;
flex-direction: column;
justify-content: center;
gap: 0;
padding: 0 0 0 clamp(1.5rem, 4vw, 3rem);
}
.contact-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 1rem;
margin: 1.5rem 0;
}
.contact-list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 1.05rem;
}
.contact-list svg { flex-shrink: 0; margin-top: 0.15em; color: var(--serafine-rouge); }
.contact-list a,
.contact-list address {
font-style: normal;
color: var(--serafine-dark);
transition: color 0.2s;
}
.contact-list a:hover { color: var(--serafine-rouge); } .contact-logos {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 2.5rem;
margin-top: 2.5rem;
padding-bottom: 1rem;
}
.contact-logos .logo-michelin {
height: 68px;
width: auto;
}
.contact-logos .logo-gm {
width: 155px;
height: auto;
}
@media (max-width: 600px) {
.section--contact .container--split { grid-template-columns: 1fr; }
.contact-map { min-height: 260px; }
.contact-info { padding: 2rem 0 0; }
} .site-footer {
background: var(--serafine-beige);
border-top: none;
}
.footer-inner {
max-width: 1200px;
margin-inline: auto;
padding: 2rem 2rem 1.5rem;
} .footer-top {
display: flex;
align-items: center;
justify-content: center;
gap: 2.5rem;
flex-wrap: wrap;
padding-bottom: 1.25rem;
}
.footer-nav {
display: flex;
align-items: center;
gap: 2rem;
flex-wrap: wrap;
justify-content: center;
}
.footer-nav a {
font-weight: 400;
font-size: 1.05rem;
letter-spacing: 0.06em;
color: var(--serafine-white);
text-transform: none;
transition: opacity 0.2s;
}
.footer-nav a:hover { opacity: 0.65; } .footer-social {
display: flex;
align-items: center;
gap: 1rem;
flex-shrink: 0;
}
.footer-social a {
color: var(--serafine-white);
transition: opacity 0.2s;
line-height: 0;
}
.footer-social a:hover { opacity: 0.65; } .footer-bottom {
text-align: center;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.footer-bottom p {
font-weight: 400;
font-size: 0.95rem;
color: rgba(255,255,255,1);
letter-spacing: 0.02em;
}
.footer-credit {
color: inherit;
text-decoration: none;
transition: opacity 0.2s;
}
.footer-credit:hover { opacity: 0.55; } @media (max-width: 680px) {
.footer-top {
flex-direction: column;
gap: 1.25rem;
}
.footer-nav { gap: 1rem; }
} @media (prefers-reduced-motion: no-preference) {
.panel .section-title,
.panel .section-text,
.panel .section-actions,
.panel .intro-badges,
.panel .contact-list,
.panel .contact-logos {
opacity: 0;
transform: translateY(32px);
}
.section--split .split-image {
clip-path: inset(0 100% 0 0);
}
}