/* ═══════════════════════════════════════════════════════════
   FUSION RAMEN — Design System
   Palette : blanc chaud / rouge profond / noir
   Police : Arial — lisibilite maximale
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Backgrounds */
  --bg:      #FAFAF7;
  --bg-alt:  #F0ECE6;
  --bg-dark: #141210;
  --bg-dark2:#1E1B18;
  --bg-dark3:#282420;

  /* Brand */
  --red:     #8B1A10;
  --red-h:   #A82215;
  --red-soft: rgba(139,26,16,.08);

  /* Text */
  --ink:     #1A1714;
  --ink2:    #3A3530;
  --muted:   #6A6560;
  --light:   #B5AFA8;

  /* On dark surfaces */
  --cream:   #F0ECE6;
  --cream2:  #D5CFC6;

  /* Borders */
  --brd:     rgba(26,23,20,.07);
  --brd2:    rgba(26,23,20,.13);
  --brd-d:   rgba(240,236,230,.08);
  --brd-d2:  rgba(240,236,230,.15);

  /* Spacing */
  --nav-h:   72px;
  --px:      clamp(24px,6vw,96px);
  --section: clamp(80px,12vw,160px);

  /* Easing */
  --ease:    cubic-bezier(.22,1,.36,1);
  --ease2:   cubic-bezier(.16,1,.3,1);
}

/* ── RESET ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;font-weight:400;font-size:16px;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.75
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* ── CUSTOM CURSOR DOT (desktop) ─────────────────────── */
.cursor-dot{
  position:fixed;width:8px;height:8px;border-radius:50%;
  background:var(--red);pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);transition:transform .15s,opacity .3s;
  opacity:0;mix-blend-mode:difference
}
.cursor-dot.visible{opacity:1}
.cursor-dot.expand{transform:translate(-50%,-50%) scale(5);opacity:.3}

/* ── LOADER ──────────────────────────────────────────── */
.loader{
  position:fixed;inset:0;z-index:9000;background:var(--bg-dark);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:28px;
  transition:opacity 1s var(--ease),visibility 0s 1s
}
.loader.done{opacity:0;visibility:hidden}
.loader-logo{height:80px;width:auto;opacity:0;animation:fadeUp .8s .2s var(--ease) forwards}
.loader-bar-wrap{width:120px;height:1px;background:rgba(240,236,230,.1);overflow:hidden;opacity:0;animation:fadeUp .5s .5s forwards}
.loader-bar{height:100%;background:var(--red);transform:scaleX(0);transform-origin:left;animation:scaleIn 1.4s .6s var(--ease) forwards}
.loader-text{font-family:Arial,Helvetica,sans-serif;font-size:10px;letter-spacing:.5em;color:var(--cream2);text-transform:uppercase;opacity:0;animation:fadeUp .5s .5s forwards}

@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{to{transform:scaleX(1)}}

/* ── NAVIGATION ──────────────────────────────────────── */
nav{
  position:fixed;inset:0 0 auto;z-index:800;height:var(--nav-h);
  padding:0 clamp(20px,4vw,56px);
  display:flex;align-items:center;justify-content:space-between;
  transition:background .5s,border-color .5s,backdrop-filter .5s
}
nav.scrolled{
  background:rgba(250,250,247,.92);border-bottom:1px solid var(--brd);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)
}
nav.on-dark .nav-links a,
nav.on-dark .nav-burger span{color:var(--cream2)}
nav.on-dark .nav-links a:hover,
nav.on-dark .nav-links a.active{color:#fff}
nav.scrolled .nav-links a{color:var(--muted)}
nav.scrolled .nav-links a:hover,
nav.scrolled .nav-links a.active{color:var(--ink)}
nav.scrolled .nav-burger span{background:var(--ink)}

.nav-left{display:flex;align-items:center}
.nav-logo{height:38px;width:auto;flex-shrink:0;transition:opacity .3s}
.nav-logo:hover{opacity:.7}

.nav-links{list-style:none;display:flex;align-items:center;gap:36px}
.nav-links a{
  font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--muted);transition:color .3s;position:relative;padding-bottom:4px
}
.nav-links a::after{
  content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease)
}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}

.nav-reserve{
  font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
  padding:12px 28px;background:var(--red);color:#fff;border-radius:2px;
  border:none;cursor:pointer;transition:background .3s,transform .3s,box-shadow .3s;flex-shrink:0
}
.nav-reserve:hover{background:var(--red-h);transform:translateY(-1px);box-shadow:0 4px 16px rgba(139,26,16,.3)}

.nav-burger{
  display:none;flex-direction:column;justify-content:center;gap:6px;
  width:48px;height:48px;align-items:center;flex-shrink:0;
  background:none;border:none;cursor:pointer;touch-action:manipulation
}
.nav-burger span{
  display:block;width:24px;height:2px;background:var(--ink);
  transition:transform .35s var(--ease),opacity .25s,width .3s;transform-origin:center
}
.nav-burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0;width:0}
.nav-burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ── MOBILE MENU ─────────────────────────────────────── */
.mobile-menu{
  position:fixed;inset:0;z-index:790;background:var(--bg-dark);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 20px) 36px 48px;
  transform:translateX(100%);transition:transform .6s var(--ease);
  overflow-y:auto;-webkit-overflow-scrolling:touch
}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu ul{list-style:none;display:flex;flex-direction:column}
.mobile-menu li a{
  display:block;font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(32px,8vw,48px);font-weight:700;font-style:normal;
  color:var(--cream2);padding:18px 0;
  border-bottom:1px solid var(--brd-d);
  transition:color .3s,padding-left .4s var(--ease);line-height:1.15
}
.mobile-menu li:first-child a{border-top:1px solid var(--brd-d)}
.mobile-menu li a:hover,.mobile-menu li a.active{color:var(--red);padding-left:16px}
.mm-foot{margin-top:48px;display:flex;flex-direction:column;gap:14px}
.mm-label{font-family:Arial,Helvetica,sans-serif;font-size:10px;letter-spacing:.4em;color:var(--muted);text-transform:uppercase;font-weight:700}
.mm-social{display:flex;gap:24px;flex-wrap:wrap}
.mm-social a{
  font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--cream2);transition:color .3s;min-height:48px;display:flex;align-items:center
}
.mm-social a:hover{color:var(--red)}
.mm-reserve-mobile{
  margin-top:24px;display:inline-flex;align-items:center;justify-content:center;
  padding:18px 36px;background:var(--red);color:#fff;border-radius:2px;
  font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  transition:background .3s;max-width:280px
}
.mm-reserve-mobile:hover{background:var(--red-h)}

/* ── FIXED RESERVE BUTTON (mobile) ───────────────────── */
.fixed-reserve{
  display:none;position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:700;
  padding:16px 36px;background:var(--red);color:#fff;border-radius:4px;
  font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  border:none;cursor:pointer;box-shadow:0 8px 32px rgba(139,26,16,.35);
  transition:background .3s,transform .3s,box-shadow .3s
}
.fixed-reserve:hover{background:var(--red-h);transform:translateX(-50%) translateY(-2px);box-shadow:0 12px 40px rgba(139,26,16,.45)}

/* ── TYPOGRAPHY SYSTEM ───────────────────────────────── */
.eyebrow{
  font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.4em;font-weight:700;
  color:var(--red);text-transform:uppercase;
  display:flex;align-items:center;gap:16px;margin-bottom:22px
}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--red);opacity:.5;flex-shrink:0}
.eyebrow--light{color:var(--red)}
.eyebrow--light::before{background:var(--red);opacity:.4}

.heading{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(38px,6vw,84px);font-weight:900;
  color:var(--ink);line-height:.95;letter-spacing:-.03em
}
.heading em{font-style:italic;color:var(--red)}
.heading--light{color:var(--cream)}

.heading-md{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(26px,4vw,48px);font-weight:800;
  color:var(--ink);line-height:1.05;letter-spacing:-.02em
}
.heading-md em{font-style:italic;color:var(--red)}
.heading-md--light{color:var(--cream)}

.prose{font-size:16px;line-height:1.9;color:var(--muted);font-weight:400}
.prose--light{color:var(--cream2)}
.prose p+p{margin-top:1.2em}
.hairline{width:40px;height:2px;background:var(--red);margin:28px 0;opacity:.4}

/* ── BUTTONS ─────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  padding:16px 36px;position:relative;overflow:hidden;border-radius:2px;
  transition:color .4s,border-color .4s,transform .3s,box-shadow .3s;
  border:none;background:transparent;white-space:nowrap;
  min-height:52px;touch-action:manipulation;cursor:pointer
}
.btn::before{
  content:"";position:absolute;inset:0;
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)
}
.btn:hover::before{transform:scaleX(1)}
.btn span{position:relative;z-index:1}

.btn-primary{background:var(--red);color:#fff}
.btn-primary::before{background:var(--red-h)}
.btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 6px 24px rgba(139,26,16,.3)}

.btn-outline{color:var(--ink);border:1.5px solid var(--brd2)}
.btn-outline::before{background:var(--ink)}
.btn-outline:hover{color:#fff;border-color:var(--ink)}

.btn-outline--light{color:var(--cream);border:1.5px solid var(--brd-d2)}
.btn-outline--light::before{background:rgba(240,236,230,.1)}
.btn-outline--light:hover{color:#fff;border-color:rgba(240,236,230,.4)}

.btn-text{
  font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--red);display:inline-flex;align-items:center;gap:12px;
  padding:0;border:none;background:none;cursor:pointer;transition:gap .3s var(--ease)
}
.btn-text:hover{gap:18px}
.btn-text .arrow{transition:transform .3s var(--ease)}
.btn-text:hover .arrow{transform:translateX(4px)}

/* ── REVEAL ANIMATIONS ───────────────────────────────── */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-left{opacity:0;transform:translateX(-36px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv-left.in{opacity:1;transform:none}
.rv-scale{opacity:0;transform:scale(.96);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv-scale.in{opacity:1;transform:none}
.rv-clip{opacity:0;clip-path:inset(0 100% 0 0);transition:opacity .01s,clip-path 1.2s var(--ease)}
.rv-clip.in{opacity:1;clip-path:inset(0 0% 0 0)}
@media(prefers-reduced-motion:reduce){.rv,.rv-left,.rv-scale,.rv-clip{transition:opacity .3s !important;clip-path:none !important;transform:none !important}}

/* ── TICKER ──────────────────────────────────────────── */
.ticker{background:var(--red);padding:14px 0;overflow:hidden;user-select:none}
.ticker-track{display:flex;align-items:center;gap:48px;animation:ticker 35s linear infinite;white-space:nowrap;width:max-content}
.ticker-track span{font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.3em;color:rgba(255,255,255,.85);text-transform:uppercase;font-weight:700}
.ticker-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.3);flex-shrink:0}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── PHOTO MARQUEE ───────────────────────────────────── */
.marquee{overflow:hidden;height:clamp(160px,22vw,260px);border-top:1px solid var(--brd);border-bottom:1px solid var(--brd)}
.marquee--dark{border-color:var(--brd-d)}
.marquee-track{display:flex;height:100%;gap:4px;animation:marquee 30s linear infinite;width:max-content}
.marquee-cell{width:clamp(220px,28vw,400px);flex-shrink:0;overflow:hidden}
.marquee-cell img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .6s}
.marquee-cell:hover img{transform:scale(1.08)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── PAGE HERO (sub-pages) ───────────────────────────── */
.page-hero{
  padding-top:var(--nav-h);height:clamp(300px,40vw,500px);
  position:relative;display:flex;align-items:flex-end;overflow:hidden;
  background:var(--bg-dark)
}
.page-hero-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  filter:brightness(.18) saturate(.4);transform:scale(1.05)
}
.page-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,var(--bg-dark) 0%,transparent 50%,rgba(20,18,16,.6) 100%)
}
.page-hero-content{position:relative;z-index:2;padding:0 var(--px) clamp(36px,6vw,80px)}
.page-hero .eyebrow{color:var(--red)}
.page-hero .heading{color:var(--cream)}

/* ── SECTION UTILITIES ───────────────────────────────── */
.section{padding:var(--section) var(--px)}
.section--dark{background:var(--bg-dark);color:var(--cream)}
.section--alt{background:var(--bg-alt)}
.section--red{background:var(--red);color:#fff}

/* ── SOCIAL LIST ─────────────────────────────────────── */
.social-list{display:flex;flex-direction:column}
.social-item{border-top:1px solid var(--brd);position:relative}
.social-item:last-child{border-bottom:1px solid var(--brd)}
.social-item::after{content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--red);transition:width .55s var(--ease)}
.social-item:hover::after{width:100%}
.social-link{display:flex;align-items:center;justify-content:space-between;padding:clamp(18px,3vw,28px) 0;transition:padding-left .4s var(--ease);gap:12px}
.social-item:hover .social-link{padding-left:16px}
.s-left{display:flex;align-items:center;gap:clamp(16px,3vw,32px);overflow:hidden;min-width:0}
.s-platform{font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.2em;color:var(--red);text-transform:uppercase;min-width:80px;flex-shrink:0;font-weight:700}
.s-name{font-family:Arial,Helvetica,sans-serif;font-size:clamp(20px,3vw,32px);font-weight:700;color:var(--ink);letter-spacing:-.01em;transition:color .3s;white-space:nowrap}
.social-item:hover .s-name{color:var(--red)}
.s-arrow{font-size:20px;color:var(--muted);transition:transform .35s var(--ease),color .3s;flex-shrink:0}
.social-item:hover .s-arrow{transform:translate(4px,-4px);color:var(--red)}
.section--dark .social-item{border-color:var(--brd-d)}
.section--dark .social-item::after{background:var(--red)}
.section--dark .s-name{color:var(--cream)}
.section--dark .social-item:hover .s-name{color:var(--red)}

/* ── FOOTER ──────────────────────────────────────────── */
footer{
  background:var(--bg-dark);color:var(--cream2);
  padding:clamp(64px,8vw,96px) var(--px) clamp(32px,4vw,48px)
}
.footer-top{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:48px;
  padding-bottom:clamp(48px,6vw,72px);
  border-bottom:1px solid var(--brd-d)
}
.footer-brand .footer-logo{height:44px;width:auto;margin-bottom:20px}
.footer-brand p{font-size:14px;color:var(--muted);line-height:1.9;max-width:300px}
.footer-col-title{font-family:Arial,Helvetica,sans-serif;font-size:10px;letter-spacing:.35em;color:var(--red);text-transform:uppercase;margin-bottom:20px;font-weight:700}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.footer-col a{font-size:15px;color:var(--cream2);font-weight:400;transition:color .3s}
.footer-col a:hover{color:var(--red)}
.footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:clamp(24px,3vw,36px);gap:16px;flex-wrap:wrap
}
.footer-copy{font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.06em;color:var(--muted)}
.footer-legal{display:flex;gap:20px}
.footer-legal a{font-family:Arial,Helvetica,sans-serif;font-size:11px;letter-spacing:.08em;color:var(--muted);transition:color .3s;text-transform:uppercase;font-weight:700}
.footer-legal a:hover{color:var(--cream)}

/* ── RESPONSIVE GLOBAL ───────────────────────────────── */
@media(max-width:960px){
  .nav-links{display:none}
  .nav-reserve{display:none}
  .nav-burger{display:flex}
  .fixed-reserve{display:block}
  .footer-top{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:640px){
  .footer-top{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
  .footer-legal{justify-content:center}
  .eyebrow{letter-spacing:.25em;font-size:10px}
  .btn{min-height:52px;padding:16px 28px}
}
@media(max-width:420px){
  .heading{font-size:clamp(30px,9vw,44px)}
  .heading-md{font-size:clamp(24px,7vw,36px)}
  .mobile-menu li a{font-size:28px}
}