/* ============================================================================
   Le Roi de la Moule — « Brasserie ardoise du Nord, moules-frites conviviales »
   Archétype : brasserie/bistrot moderne à la bonne franquette, esprit menu-board.
   Palette : Ardoise/anthracite #2A2F34 + Cognac-cuir #C07A3C + Rouge brasserie #C8302A
            (les couleurs RÉELLES du décor + du logo).
   Fonts : Bevan (slab vintage, esprit enseigne) / Hind (body).
   Signature : COURONNE (« Roi ») + DOUBLE FILET ROUGE (device du logo).
   Bootstrap = squelette ; ce fichier = toute la peau. Aucune classe custom.
   ========================================================================== */

:root {
  --anthracite: #2A2F34;
  --anthracite-900: #1D2226;
  --anthracite-050: #E5E6E7;
  --cognac: #C07A3C;
  --cognac-700: #A0632B;
  --cognac-050: #F3E6D6;
  --rouge: #C8302A;
  --rouge-700: #A6241F;
  --lin: #F4EEE2;
  --lin-2: #EBE1CF;
  --paper: #FBF7EE;
  --tinta: #2C2925;
  --muted: #7A7166;
  --line: #E1D6C2;

  --bs-primary: #C8302A;
  --bs-primary-rgb: 200, 48, 42;
  --bs-secondary: #C07A3C;
  --bs-secondary-rgb: 192, 122, 60;
  --bs-body-color: #2C2925;
  --bs-body-bg: #F4EEE2;
  --bs-body-font-family: 'Hind', system-ui, -apple-system, sans-serif;
  --bs-border-color: #E1D6C2;
  --bs-link-color: #A6241F;
  --bs-link-hover-color: #2A2F34;

  /* COURONNE (signature « Roi ») en data-URI */
  --crown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Cpath d='M3 17 L3 7 L9 12 L14 4 L19 12 L25 7 L25 17 Z' fill='none' stroke='%23C8302A' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --crown-cognac: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Cpath d='M3 17 L3 7 L9 12 L14 4 L19 12 L25 7 L25 17 Z' fill='%23C07A3C'/%3E%3C/svg%3E");

  --shadow-soft: 0 3px 8px rgba(29, 34, 38, .07), 0 22px 46px -28px rgba(29, 34, 38, .32);
  --shadow-lift: 0 8px 18px rgba(29, 34, 38, .14), 0 34px 62px -30px rgba(29, 34, 38, .4);
  --r: 10px;
}

/* ------------------------------------------------------------------ base */
body {
  background-color: var(--lin);
  background-image:
    radial-gradient(1000px 440px at 88% -6%, rgba(192, 122, 60, .12), transparent 60%),
    radial-gradient(800px 400px at -6% 4%, rgba(42, 47, 52, .06), transparent 60%);
  color: var(--tinta);
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  font-family: 'Bevan', Georgia, serif;
  font-weight: 400;
  letter-spacing: .2px;
  color: var(--anthracite);
  line-height: 1.2;
}
p { line-height: 1.75; }
a { text-decoration: none; }
::selection { background: rgba(200, 48, 42, .24); }
.container { max-width: 1160px; }

/* kicker — COURONNE + filet (signature) */
#section-kicker, #hero-eyebrow {
  font-family: 'Hind', sans-serif;
  font-weight: 700;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  color: var(--rouge-700);
  align-items: center;
}
#section-kicker::before {
  content: '';
  display: inline-block;
  width: 24px; height: 17px;
  margin-right: .55rem;
  vertical-align: -3px;
  background: var(--crown) center/contain no-repeat;
}

/* ------------------------------------------------------------------ topbar */
#topbar { background: var(--anthracite-900); color: #D7D9DB; font-weight: 500; }
#topbar a { color: #fff; }
#topbar-tel:hover, #topbar-fb:hover { color: var(--cognac); }
#topbar i { color: var(--cognac); }

/* ------------------------------------------------------------------ navbar */
.navbar {
  background: rgba(244, 238, 226, .94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
/* wordmark = enseigne : Bevan entre deux filets rouges (device du logo) */
#brand-word {
  font-family: 'Bevan', serif;
  font-size: 1.15rem;
  color: var(--anthracite);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: .35rem 0;
  border-top: 3px solid var(--rouge);
  border-bottom: 3px solid var(--rouge);
  line-height: 1.2;
  display: inline-block;
}
.navbar .nav-link {
  font-family: 'Hind', sans-serif;
  font-weight: 600;
  color: var(--anthracite);
  text-transform: uppercase;
  letter-spacing: .6px;
  font-size: .82rem;
  padding: .5rem .85rem;
  position: relative;
}
.navbar .nav-link::after {
  content: '';
  position: absolute; left: .85rem; right: .85rem; bottom: .32rem;
  height: 2px; background: var(--rouge);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s ease;
}
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--rouge-700); }
.navbar .nav-link:hover::after, .navbar .nav-link:focus::after { transform: scaleX(1); }

/* ------------------------------------------------------------------ boutons */
.btn { font-family: 'Hind', sans-serif; font-weight: 700; border-radius: 6px; text-transform: uppercase; letter-spacing: .6px; font-size: .84rem; transition: transform .2s ease, box-shadow .2s ease, background-color .2s; }
.btn-lg { padding: .82rem 1.7rem; }
.btn-primary {
  --bs-btn-bg: var(--rouge);
  --bs-btn-border-color: var(--rouge);
  --bs-btn-hover-bg: var(--rouge-700);
  --bs-btn-hover-border-color: var(--rouge-700);
  --bs-btn-active-bg: var(--rouge-700);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  box-shadow: 0 10px 22px -12px rgba(166, 36, 31, .8);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(166, 36, 31, .9); }
.btn-outline-primary {
  --bs-btn-color: var(--anthracite);
  --bs-btn-border-color: var(--cognac);
  --bs-btn-hover-bg: var(--cognac);
  --bs-btn-hover-border-color: var(--cognac);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--cognac-700);
  border-width: 2px;
}
.btn-outline-primary:hover { transform: translateY(-2px); }
.btn-outline-light {
  --bs-btn-border-color: rgba(255, 255, 255, .7);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-color: var(--anthracite);
  --bs-btn-hover-border-color: #fff;
  border-width: 2px;
}
.btn-outline-light:hover { transform: translateY(-2px); }

/* ------------------------------------------------------------------ hero */
#top { background: var(--anthracite-900); }
#hero-media img { filter: grayscale(15%) contrast(1.02); }
#hero-veil {
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(29, 34, 38, .5), rgba(29, 34, 38, .84)),
    linear-gradient(180deg, rgba(29, 34, 38, .6), rgba(29, 34, 38, .9));
}
#hero-crown {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--rouge);
  color: #fff;
  font-size: 1.7rem;
  box-shadow: 0 12px 26px -10px rgba(166, 36, 31, .9);
}
#hero-eyebrow { color: var(--cognac); justify-content: center; }
#hero-title {
  color: #F6F1E6;
  font-size: clamp(1.55rem, 3.2vw, 2.7rem);
  line-height: 1.28;
  padding: 1.1rem 0;
  border-top: 3px solid var(--rouge);
  border-bottom: 3px solid var(--rouge);
  display: inline-block;
}
#top .btn-primary { box-shadow: 0 14px 30px -12px rgba(166, 36, 31, .9); }

/* ------------------------------------------------------------------ présentation */
#restaurant { position: relative; }
#presentation-text { font-family: 'Hind', sans-serif; font-size: 1.18rem; color: var(--tinta); line-height: 1.85; }
#section-kicker { justify-content: center; }

/* ------------------------------------------------------------------ actualités Facebook */
#fb-band {
  background: var(--anthracite);
  color: #F0EAE0;
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  border-left: 5px solid var(--rouge);
  transition: transform .2s ease, box-shadow .2s ease;
}
#fb-band:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); color: #fff; }
#fb-icon { width: 54px; height: 54px; border-radius: 12px; background: #1877F2; color: #fff; font-size: 1.6rem; flex-shrink: 0; }
#fb-title { font-family: 'Bevan', serif; color: #F6F1E6; font-size: 1.35rem; }
#fb-cta { color: var(--cognac); }

/* ------------------------------------------------------------------ coordonnées + horaires */
#coord-card, #horaires-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  border-top: 4px solid var(--cognac);
}
#coord-title, #horaires-title { font-family: 'Bevan', serif; color: var(--anthracite); }
#coord-line { color: var(--tinta); }
#coord-line a { color: var(--rouge-700); }
#coord-icon { color: var(--cognac); flex-shrink: 0; margin-top: .2rem; }
#map-frame { border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
/* tableau horaires façon ardoise */
#horaires-list { border-top: 1px dashed var(--line); }
#horaires-row { border-bottom: 1px dashed var(--line); }
#horaires-day { font-family: 'Hind', sans-serif; font-weight: 700; color: var(--anthracite); }
#horaires-open { font-weight: 700; color: var(--cognac-700); }
#horaires-closed { font-weight: 700; color: var(--muted); font-style: italic; }
#horaires-note { color: var(--muted); }

/* ------------------------------------------------------------------ infos pratiques */
#infos-title { font-size: clamp(1.7rem, 3vw, 2.4rem); }
#info-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
#info-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
#info-icon {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--cognac-050);
  color: var(--cognac-700);
  font-size: 1.6rem;
  border: 2px solid var(--cognac);
}
#info-label { color: var(--rouge-700); letter-spacing: 1px; font-family: 'Hind', sans-serif; font-weight: 700; }
#info-valeur { color: var(--muted); }

/* ------------------------------------------------------------------ page réservation */
#page-head { background: var(--anthracite-900); color: #F6F1E6; }
#page-head #hero-title { color: #F6F1E6; font-size: clamp(1.8rem, 4vw, 3rem); }
#page-head #hero-crown { margin-bottom: 1rem; }
#resa { margin-top: -2px; }
#resa-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 5px solid var(--rouge);
  border-radius: var(--r);
  box-shadow: var(--shadow-lift);
}
#resa-badge {
  font-family: 'Bevan', serif;
  background: var(--rouge);
  color: #fff;
  padding: .4rem 1.3rem;
  border-radius: 6px;
  letter-spacing: 2px;
  font-size: 1rem;
}
#resa-message { font-size: 1.15rem; color: var(--tinta); }

/* ------------------------------------------------------------------ seo */
#seo h2 { color: var(--anthracite); font-family: 'Bevan', serif; }
#seo p { color: var(--muted); }

/* ------------------------------------------------------------------ footer */
#colophon {
  background: var(--anthracite-900);
  color: #CFD2D4;
  position: relative;
  border-top: 4px solid var(--rouge);
}
#colophon::before { content: ''; position: absolute; inset: 0; background-image: var(--crown-cognac); background-size: 64px; opacity: .04; pointer-events: none; }
#colophon .container { position: relative; }
#footer-name { font-family: 'Bevan', serif; color: #fff; }
#footer-baseline { color: var(--cognac); font-weight: 700; }
#footer-head { color: var(--cognac) !important; letter-spacing: 1px; }
#footer-link { color: rgba(207, 210, 212, .85); }
#footer-link:hover { color: var(--cognac); }
#footer-note { color: rgba(207, 210, 212, .72); }
#footer-social {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 100px;
  padding: .5rem 1.1rem;
  font-weight: 700;
  transition: background-color .2s, transform .2s;
}
#footer-social:hover { background: #1877F2; color: #fff; transform: translateY(-2px); }
#footer-rule { border-color: rgba(255, 255, 255, .14); }
#copyright { color: rgba(207, 210, 212, .82); }

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

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