/* Démo restaurant : brasserie chaleureuse, fond sombre, typographie à empattements. */
:root {
  --bg: #1f1714;
  --paper: #f6efe4;
  --tint: #2a201c;
  --ink: #f4ebdd;
  --ink-2: #c9b9a6;
  --accent: #d9a441;
  --accent-d: #c08a2b;
  --accent-ink: #1f1714;
  --line: rgba(244, 235, 221, .14);
  --radius: 6px;
  --btn-radius: 4px;
  --head: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --head-weight: 500;
}

.site-header { background: rgba(31, 23, 20, .94); backdrop-filter: blur(8px); }
.brand-mono { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); display: flex; align-items: center; justify-content: center; font: italic 500 1.4rem/1 var(--head); }
.main-nav a { letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; }
.btn { text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; }

.hero { padding: 80px 0 90px; background: radial-gradient(ellipse at 80% 40%, rgba(217, 164, 65, .16), transparent 60%); }
.hero h1 { font-size: clamp(2.4rem, 5.8vw, 4.3rem); line-height: 1.05; }
.hero h1 em { color: var(--accent); }
.hero .lead { color: var(--ink-2); }
.hero-open { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: .92rem; margin: 0; }
.hero-open .dot { width: 9px; height: 9px; border-radius: 50%; background: #6fcf7a; box-shadow: 0 0 0 4px rgba(111, 207, 122, .18); }

/* Ardoise */
.ardoise-section { padding-top: 10px; }
.ardoise { background: #22302a; border: 10px solid #6b4a32; border-radius: 6px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45), inset 0 0 60px rgba(0, 0, 0, .35); padding: 40px 36px; text-align: center; color: #eef1ea; }
.ardoise h2 { font-style: italic; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.ardoise-date { text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; color: var(--accent); margin-bottom: 6px; }
.ardoise-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 26px 0; }
.ardoise-cols p { margin: 0; font-family: var(--head); font-size: 1.12rem; }
.ardoise-cols .ardoise-k { font-family: var(--body); text-transform: uppercase; letter-spacing: .16em; font-size: .75rem; color: #b7c4b8; margin-bottom: 6px; }
.ardoise-foot { margin: 0; font-size: .86rem; color: #b7c4b8; }

/* Carte */
.menu-section { color: #2b211d; }
.menu-section h2, .menu-section h3 { color: #2b211d; }
.menu-section .eyebrow { color: #a8762a; }
.menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 30px; }
.menu h3 { font-style: italic; font-size: 1.4rem; border-bottom: 1px solid rgba(43, 33, 29, .2); padding-bottom: 10px; }
.dish { display: flex; align-items: baseline; gap: 8px; margin: 0 0 14px; font-size: 1rem; color: #4a3d36; }
.dish span:first-child { flex: 1; display: flex; align-items: baseline; gap: 8px; }
.dish span:first-child::after { content: ""; flex: 1; border-bottom: 1.5px dotted rgba(43, 33, 29, .35); transform: translateY(-4px); min-width: 20px; }
.dish .price { font-family: var(--head); font-size: 1.1rem; color: #2b211d; }
.menu-note { margin: 18px 0 0; font-size: .9rem; color: #6b5b50; }

/* Réservation */
.booking { background: var(--tint); border: 1px solid var(--line); border-radius: 10px; padding: 26px; display: grid; gap: 10px; }
.booking-k { margin: 6px 0 0; font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-2); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { font: 600 .95rem/1 var(--body); padding: 12px 16px; border-radius: 4px; border: 1.5px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.pill:hover { border-color: var(--accent); }
.pill.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pill.is-full { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.booking .btn { margin-top: 10px; }
.demo-note { background: var(--tint); color: var(--ink-2); }
.form-msg { background: rgba(217, 164, 65, .15); color: var(--ink); }

/* Infos */
#infos { color: #2b211d; }
#infos h3 { font-style: italic; font-size: 1.35rem; color: #2b211d; }
#infos p { color: #4a3d36; }
.hours { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .95rem; color: #4a3d36; }
.hours dt { font-weight: 600; color: #2b211d; }
.hours dd { margin: 0; }
#infos .reviews-slot { background: #fff; border-color: rgba(43, 33, 29, .2); padding: 22px; }

.privat { background: linear-gradient(rgba(31, 23, 20, .78), rgba(31, 23, 20, .9)), url(img/terrasse.webp) center / cover; }
.privat .lead { margin: 0 auto 24px; }

.site-footer .credit a { color: var(--accent); }

@media (max-width: 980px) {
  .menu { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 640px) {
  .ardoise { padding: 28px 20px; border-width: 8px; }
  .ardoise-cols { grid-template-columns: 1fr; gap: 16px; }
}

/* Photos */
.hero-photo { margin: 0; position: relative; justify-self: end; width: 100%; max-width: 420px; }
.hero-photo::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1.5px solid var(--accent); border-radius: 6px; }
.hero-photo img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.gallery { padding: 0 0 20px; background: var(--paper); }
.gallery-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gallery-in img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
@media (max-width: 980px) { .hero-photo { justify-self: center; max-width: 360px; } }
@media (max-width: 640px) {
  .hero-photo { max-width: none; margin-top: 8px; }
  .hero-photo::before { display: none; }
  .hero-photo img { aspect-ratio: 4 / 3; }
  .gallery-in { gap: 6px; }
}