/* Royal BBQ — jetons de design verrouillés (palette "Or Blanc Chaud") */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/jost.woff2') format('woff2');
}
@font-face {
  font-family: 'Marcellus';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/marcellus.woff2') format('woff2');
}

:root {
  /* ---- palette verrouillée (projects/Royal BBQ/design-system.md) ---- */
  --ink: #14120F;
  --ink-deep: #0B0A08;
  --ebene: #241B14;
  --champagne: #D9C48A;
  --champagne-dim: #B3A98F;
  --ivoire: #F8F4EC;
  --hairline: rgba(217, 196, 138, 0.16);
  --hairline-strong: rgba(217, 196, 138, 0.34);
  --glow: rgba(217, 196, 138, 0.11);

  /* décision JF 2026-07-29 : tout le site (y compris boutique/panier/paiement) reste sur ce fond sombre */
  --bg: var(--ink);
  --text: var(--ivoire);
  --text-dim: var(--champagne-dim);

  /* ---- typographie verrouillée ---- */
  --font-display: 'Cormorant Garamond', Cambria, Georgia, serif;
  --font-accent: 'Marcellus', Cambria, Georgia, serif;
  --font-body: 'Jost', 'Segoe UI', ui-sans-serif, -apple-system, sans-serif;

  /* ---- échelle d'espacement ---- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 64px;
  --sp-6: 96px;
  --sp-7: 132px;
  --sp-8: 172px;

  --radius: 4px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.65;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
svg { display: block; }
button { font: inherit; }
::selection { background: var(--champagne); color: var(--ink); }
:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: 1360px; margin: 0 auto; padding: 0 var(--sp-4); }
@media (max-width: 720px) { .wrap { padding: 0 22px; } }

.icon-line { fill: none; stroke: var(--champagne); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.icon-line-dim { fill: none; stroke: var(--champagne-dim); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ---- texture de grain globale ---- */
.rb-grain {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- curseur personnalisé discret (pointeurs fins seulement) ---- */
.rb-cursor-ring {
  position: fixed; width: 22px; height: 22px; border: 1px solid var(--champagne); border-radius: 50%;
  pointer-events: none; z-index: 9999; transform: translate(-50%, -50%);
  transition: width .28s, height .28s, opacity .28s; opacity: 0; mix-blend-mode: difference;
}
.rb-cursor-ring.show { opacity: .85; }
.rb-cursor-ring.big { width: 46px; height: 46px; }

/* ---- soulignement directionnel (liens texte) ---- */
.rb-navlink { position: relative; display: inline-block; }
.rb-navlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--champagne);
  transform: scaleX(0); transform-origin: var(--u-origin, left); transition: transform .38s var(--ease);
}
.rb-navlink:hover::after { transform: scaleX(1); }

/* ---- CTA / trace dorée ---- */
.rb-cta {
  position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 18px 38px;
  font-family: var(--font-body); font-size: .76rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ivoire); background: none; border: none; cursor: pointer; will-change: transform;
}
.rb-cta::before, .rb-cta::after { content: ""; position: absolute; border: 1px solid var(--champagne); pointer-events: none; opacity: 0; }
.rb-cta::before { top: 0; left: 0; width: 0; height: 0; border-right: none; border-bottom: none; transition: width .35s ease, height .35s ease .35s, opacity 0s .35s; }
.rb-cta::after { bottom: 0; right: 0; width: 0; height: 0; border-left: none; border-top: none; transition: width .35s ease .35s, height .35s ease, opacity 0s .35s; }
.rb-cta:hover::before, .rb-cta:hover::after { width: 100%; height: 100%; opacity: 1; }
.rb-cta-solid { background: var(--champagne); color: var(--ink); transition: background .3s; }
.rb-cta-solid::before, .rb-cta-solid::after { display: none; }
.rb-cta-solid:hover { background: var(--ivoire); }

/* ---- reveal au scroll ---- */
.rb-reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s var(--ease); }
.rb-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rb-reveal { opacity: 1; transform: none; } }