/* ============================================================================
   Match Burger — « Smash-burger joint moderne & punchy, appétissant »
   Archétype : burger joint urbain, énergique, gourmand (fast-food premium).
   Palette : Charbon #1A1815 + Jaune vif #FFC427 + Framboise #E53D60
            (les couleurs RÉELLES du thème de la marque).
   Fonts : Anton (display poster all-caps) / Sarabun (body).
   Signature : ÉCLAT / STARBURST jaune (énergie fast-food) + gros titres Anton.
   Bootstrap = squelette ; ce fichier = toute la peau. Aucune classe custom.
   ========================================================================== */

:root {
  --charbon: #1A1815;
  --charbon-900: #100E0C;
  --charbon-700: #2C2823;
  --jaune: #FFC427;
  --jaune-700: #E0A400;
  --framboise: #E53D60;
  --framboise-700: #C42749;
  --framboise-050: #FBE0E6;
  --creme: #FBF4E5;
  --creme-2: #F3E7CD;
  --paper: #FFFDF7;
  --tinta: #241F1A;
  --muted: #6E655A;
  --line: #E6DAC0;

  --bs-primary: #E53D60;
  --bs-primary-rgb: 229, 61, 96;
  --bs-secondary: #FFC427;
  --bs-secondary-rgb: 255, 196, 39;
  --bs-body-color: #241F1A;
  --bs-body-bg: #FBF4E5;
  --bs-body-font-family: 'Sarabun', system-ui, -apple-system, sans-serif;
  --bs-border-color: #E6DAC0;
  --bs-link-color: #C42749;
  --bs-link-hover-color: #1A1815;

  /* ÉCLAT / STARBURST (signature) en data-URI */
  --flash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 L14 8 L20 3 L16 10 L24 12 L16 14 L20 21 L14 16 L12 24 L10 16 L4 21 L8 14 L0 12 L8 10 L4 3 L10 8 Z' fill='%23FFC427'/%3E%3C/svg%3E");

  --shadow-soft: 0 3px 8px rgba(16, 14, 12, .08), 0 22px 46px -28px rgba(16, 14, 12, .38);
  --shadow-lift: 0 8px 18px rgba(16, 14, 12, .16), 0 34px 62px -30px rgba(16, 14, 12, .5);
  --r: 14px;
}

/* ------------------------------------------------------------------ base */
body {
  background-color: var(--creme);
  background-image:
    radial-gradient(1000px 440px at 88% -6%, rgba(255, 196, 39, .22), transparent 60%),
    radial-gradient(800px 400px at -6% 100%, rgba(229, 61, 96, .08), transparent 60%);
  color: var(--tinta);
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  font-family: 'Anton', system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--charbon);
  line-height: 1.05;
}
p { line-height: 1.72; }
a { text-decoration: none; }
::selection { background: rgba(255, 196, 39, .55); }
.container { max-width: 1180px; }

/* kicker — éclat/starburst (signature) */
#section-kicker {
  font-family: 'Sarabun', sans-serif;
  font-weight: 800;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--framboise-700);
  align-items: center;
}
#section-kicker::before {
  content: '';
  display: inline-block;
  width: 18px; height: 18px;
  margin-right: .5rem;
  vertical-align: -4px;
  background: var(--flash) center/contain no-repeat;
}
#hero-eyebrow {
  font-family: 'Sarabun', sans-serif;
  font-weight: 800;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--jaune);
  align-items: center;
}
#hero-eyebrow::before { content: ''; display: inline-block; width: 18px; height: 18px; margin-right: .5rem; vertical-align: -4px; background: var(--flash) center/contain no-repeat; }

/* ------------------------------------------------------------------ topbar */
#topbar { background: var(--charbon); color: var(--creme); font-weight: 600; }
#topbar a { color: var(--jaune); }
#topbar-tel:hover { color: #fff; }
#topbar i { color: var(--jaune); }

/* ------------------------------------------------------------------ navbar */
.navbar {
  background: rgba(251, 244, 229, .94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 3px solid var(--charbon);
}
#brand-word { font-family: 'Anton', sans-serif; font-size: 1.7rem; color: var(--charbon); text-transform: uppercase; letter-spacing: .5px; line-height: 1; }
#brand-word-2 { color: var(--framboise); }
.navbar .nav-link {
  font-family: 'Sarabun', sans-serif;
  font-weight: 700;
  color: var(--charbon);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: .82rem;
  padding: .5rem .85rem;
  position: relative;
}
.navbar .nav-link::after {
  content: '';
  position: absolute; left: .85rem; right: .85rem; bottom: .3rem;
  height: 3px; background: var(--jaune);
  transform: scaleX(0); transform-origin: left;
  transition: transform .26s ease;
}
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--framboise-700); }
.navbar .nav-link:hover::after, .navbar .nav-link:focus::after { transform: scaleX(1); }

/* ------------------------------------------------------------------ boutons */
.btn { font-family: 'Anton', sans-serif; font-weight: 400; border-radius: 8px; text-transform: uppercase; letter-spacing: 1px; transition: transform .2s ease, box-shadow .2s ease, background-color .2s; }
.btn-lg { padding: .85rem 1.8rem; font-size: 1rem; }
.btn-primary {
  --bs-btn-bg: var(--framboise);
  --bs-btn-border-color: var(--framboise);
  --bs-btn-hover-bg: var(--framboise-700);
  --bs-btn-hover-border-color: var(--framboise-700);
  --bs-btn-active-bg: var(--framboise-700);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  box-shadow: 0 10px 22px -12px rgba(196, 39, 73, .9);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(196, 39, 73, .95); }
.btn-outline-primary {
  --bs-btn-color: var(--charbon);
  --bs-btn-border-color: var(--charbon);
  --bs-btn-hover-bg: var(--charbon);
  --bs-btn-hover-border-color: var(--charbon);
  --bs-btn-hover-color: var(--jaune);
  --bs-btn-active-bg: var(--charbon);
  border-width: 2px;
}
.btn-outline-primary:hover { transform: translateY(-2px); }
.btn-outline-light { --bs-btn-border-color: var(--jaune); --bs-btn-color: var(--jaune); --bs-btn-hover-bg: var(--jaune); --bs-btn-hover-color: var(--charbon); --bs-btn-hover-border-color: var(--jaune); border-width: 2px; }
.btn-outline-light:hover { transform: translateY(-2px); }

/* ------------------------------------------------------------------ hero */
#top { background: var(--charbon-900); }
#hero-media img { filter: contrast(1.05) saturate(1.05); }
#hero-veil {
  background:
    linear-gradient(90deg, rgba(16, 14, 12, .92) 0%, rgba(16, 14, 12, .78) 42%, rgba(16, 14, 12, .25) 100%);
}
#hero-title { font-size: clamp(3rem, 8vw, 6rem); color: var(--creme); }
#hero-title br + * , #hero-title { }
#hero-lead { color: rgba(251, 244, 229, .88); font-size: 1.2rem; max-width: 560px; }

/* ------------------------------------------------------------------ catégories */
#categories { background: var(--charbon); }
#cat-chip, #cat-chip-first {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-size: .84rem;
  padding: .5rem 1.1rem;
  border-radius: 100px;
  border: 2px solid rgba(255, 255, 255, .2);
  color: var(--creme);
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
#cat-chip:hover { background: var(--jaune); color: var(--charbon); border-color: var(--jaune); transform: translateY(-2px); }
#cat-chip-first { background: var(--framboise); border-color: var(--framboise); color: #fff; }
#cat-chip-first:hover { background: var(--framboise-700); border-color: var(--framboise-700); color: #fff; transform: translateY(-2px); }

/* ------------------------------------------------------------------ produits populaires */
#populaires-title { font-size: clamp(2.2rem, 4.4vw, 3.2rem); }
#prod-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
#prod-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
#prod-thumb { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: var(--creme-2); }
#prod-thumb img { transition: transform .5s ease; }
#prod-card:hover #prod-thumb img { transform: scale(1.06); }
#prod-name { font-family: 'Anton', sans-serif; }
#prod-link { color: var(--charbon); }
#prod-card:hover #prod-link { color: var(--framboise-700); }
#prod-desc { color: var(--muted); }

/* ------------------------------------------------------------------ magasin */
#magasin-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
#mag-line { color: var(--tinta); }
#mag-line a { color: var(--framboise-700); font-weight: 700; }
#coord-icon { color: var(--framboise); flex-shrink: 0; margin-top: .2rem; }
#map-frame { border-radius: var(--r); overflow: hidden; border: 3px solid var(--charbon); box-shadow: var(--shadow-soft); }

/* ------------------------------------------------------------------ page menu */
#page-head { background: var(--charbon); color: var(--creme); }
#page-head #hero-title { color: var(--creme); font-size: clamp(2.4rem, 5vw, 3.6rem); }
#crumbs { color: rgba(251, 244, 229, .7); }
#crumbs a { color: var(--jaune); }
#menu-liste #crumbs a { color: var(--framboise-700); }
#menu-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s;
  position: relative;
  overflow: hidden;
}
#menu-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--framboise); }
#menu-num { font-family: 'Anton', sans-serif; font-size: 1.5rem; color: var(--jaune-700); background: var(--charbon); width: 46px; height: 46px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
#menu-name { font-family: 'Anton', sans-serif; color: var(--charbon); }
#menu-card:hover #menu-name { color: var(--framboise-700); }
#menu-desc { color: var(--muted); }
#menu-price { font-family: 'Anton', sans-serif; background: var(--jaune); color: var(--charbon); padding: .3rem .8rem; border-radius: 100px; font-size: 1rem; }

/* ------------------------------------------------------------------ fiche produit */
#produit #crumbs { color: var(--muted); }
#produit #crumbs a { color: var(--framboise-700); }
#produit-figure { border-radius: 18px; overflow: hidden; border: 4px solid var(--charbon); box-shadow: var(--shadow-lift); background: var(--creme-2); }
#produit-figure img { display: block; width: 100%; }
#produit-cat { font-family: 'Sarabun', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; font-size: .74rem; color: var(--framboise-700); background: var(--framboise-050); border: 1px solid var(--framboise); padding: .3rem .8rem; border-radius: 100px; }
#produit-name { font-size: clamp(2.2rem, 4.4vw, 3.2rem); color: var(--charbon); margin-top: .8rem; }
#produit-price { font-family: 'Anton', sans-serif; font-size: 2rem; color: var(--framboise); }
#produit-desc { color: var(--tinta); font-size: 1.08rem; }
#produit-note { color: var(--muted); }
#options-title { font-size: 1.6rem; }
#option-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-soft); border-top: 4px solid var(--jaune); }
#option-title { font-family: 'Anton', sans-serif; color: var(--charbon); }
#option-item { color: var(--tinta); }
#option-bullet { color: var(--framboise); }

/* ------------------------------------------------------------------ seo */
#seo h2 { color: var(--charbon); }
#seo p { color: var(--muted); }

/* ------------------------------------------------------------------ footer */
#colophon {
  background: var(--charbon-900);
  color: #CFC7BB;
  position: relative;
  border-top: 4px solid var(--jaune);
}
#colophon .container { position: relative; }
#footer-name { font-family: 'Anton', sans-serif; color: var(--jaune); font-size: 1.8rem; }
#footer-head { color: var(--jaune) !important; letter-spacing: 1px; }
#footer-link { color: rgba(207, 199, 187, .85); }
#footer-link:hover { color: var(--jaune); }
#footer-note { color: rgba(207, 199, 187, .72); }
#footer-cat { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #EDE7DB; font-family: 'Sarabun', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; font-size: .66rem; padding: .35rem .6rem; border-radius: 100px; }
#footer-rule { border-color: rgba(255, 255, 255, .14); }
#copyright { color: rgba(207, 199, 187, .82); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 575px) {
  #brand-word { font-size: 1.35rem; }
  #hero-title { font-size: 3.2rem; }
}

/* focus visibles (WCAG) */
a:focus-visible, .btn:focus-visible, .nav-link:focus-visible {
  outline: 3px solid var(--jaune);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .btn:hover, #prod-card:hover, #menu-card:hover, #cat-chip:hover { transform: none; }
}