/* ============================================================
   CAP GRILL — sections: maison, signatures, carte, moments,
   réservation, footer + responsive & RTL refinements.
   ============================================================ */

/* ---------- la maison ---------- */
.maison-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
}
.maison-copy p { color: var(--cream-dim); max-width: 54ch; }
.maison-badges {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 26px; margin-top: 42px;
  border-top: 1px solid rgba(201, 151, 63, 0.25);
  padding-top: 30px;
}
.mb-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold);
}
body.lang-ar .mb-label { letter-spacing: 0; font-size: 13px; }
.mb-value { font-family: var(--font-display); font-size: 17.5px; margin-top: 7px; color: var(--cream); }

.maison-media { position: relative; }
.maison-media .frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 200px 200px 4px 4px; /* the marina arcade */
  box-shadow: var(--shadow-soft);
}
.maison-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.maison-media:hover img { transform: scale(1.045); }
.maison-media::before {
  content: "";
  position: absolute; inset: 18px -18px -18px 18px;
  border: 1px solid rgba(201, 151, 63, 0.4);
  border-radius: 200px 200px 4px 4px;
  z-index: -1;
}
[dir="rtl"] .maison-media::before { inset: 18px 18px -18px -18px; }
.maison-media .frame.is-ph {
  background:
    radial-gradient(80% 60% at 50% 20%, rgba(201, 151, 63, 0.18), transparent 60%),
    linear-gradient(165deg, #3a2a1e, #1c1512 70%);
}
.frame.is-ph .ph-mark, .sig-media.is-ph .ph-mark, .mo-media.is-ph .ph-mark {
  display: grid; place-items: center;
  position: absolute; inset: 0;
  color: var(--gold);
  font-size: 40px; opacity: 0.55;
}
.ph-mark { display: none; }

/* line-art placeholders — sit under the <img>; visible once it errors out */
.ph-art {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--gold); opacity: 0.5;
  pointer-events: none;
}
.sig-media .ph-art svg { width: 92px; height: 92px; }
.frame .ph-art svg { width: 72%; height: auto; }

/* decorative section motif (line — ✦ — fish — ✦ — line) */
.motif {
  display: flex; justify-content: center;
  color: var(--gold);
  margin-bottom: 26px;
}
.motif svg { width: 250px; height: 30px; }

/* "full menu" link under the tabs preview */
.carte-more { text-align: center; margin-top: 40px; }

/* ---------- signatures ---------- */
.signatures { background: linear-gradient(180deg, transparent, rgba(13, 10, 11, 0.6) 18%, rgba(13, 10, 11, 0.6) 82%, transparent); }
.sig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3vw, 40px);
}
.sig-card:nth-child(2) { transform: translateY(42px); }
.sig-card:nth-child(2).reveal { transform: translateY(76px); }
.sig-card:nth-child(2).reveal.in { transform: translateY(42px); }
.sig-media {
  position: relative;
  aspect-ratio: 4 / 3.1;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: var(--shadow-soft);
}
.sig-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.sig-card:hover .sig-media img { transform: scale(1.06); }
.sig-media.is-ph {
  background:
    radial-gradient(70% 55% at 50% 30%, rgba(201, 151, 63, 0.2), transparent 65%),
    linear-gradient(160deg, #34251b, #191311 75%);
}
.sig-body { position: relative; padding: 26px 6px 0; }
.sig-num {
  position: absolute; top: -8px; inset-inline-end: 8px;
  font-family: var(--font-display);
  font-size: 74px; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(201, 151, 63, 0.4);
  pointer-events: none;
}
.sig-name { font-size: 24px; letter-spacing: 0.02em; }
.sig-desc { color: var(--cream-dim); font-size: 15px; margin-top: 10px; max-width: 34ch; }
.sig-price {
  font-family: var(--font-display);
  font-size: 20px; color: var(--gold-bright);
  margin-top: 14px;
  display: flex; align-items: baseline; gap: 12px;
}
.sig-note { font-family: var(--font-body); font-size: 12.5px; color: var(--cream-dim); letter-spacing: 0.06em; }

/* ---------- la carte ---------- */
.carte { position: relative; }
.carte::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 151, 63, 0.4), transparent);
}
.carte .section-head { margin-inline: auto; text-align: center; }
.carte .eyebrow::before { display: none; }
.menu-note {
  text-align: center;
  font-size: 13.5px; color: var(--cream-dim);
  max-width: 52ch; margin: -28px auto 44px;
}
.menu-tabs {
  display: flex; gap: 8px;
  overflow-x: auto;
  padding: 6px;
  margin-bottom: clamp(30px, 5vw, 50px);
  scrollbar-width: none;
  justify-content: safe center;
  border-block: 1px solid rgba(201, 151, 63, 0.18);
}
.menu-tabs::-webkit-scrollbar { display: none; }
.menu-tabs button {
  flex-shrink: 0;
  padding: 12px 22px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream-dim);
  border-radius: 4px;
  position: relative;
  transition: color 0.3s, background-color 0.3s;
}
body.lang-ar .menu-tabs button { letter-spacing: 0; font-size: 16px; }
.menu-tabs button:hover { color: var(--gold-bright); }
/* app.js pose aria-pressed (boutons à bascule) — le sélecteur visait
   aria-selected par erreur : l'onglet actif n'était jamais doré */
.menu-tabs button[aria-pressed="true"] {
  color: #241708;
  background: linear-gradient(140deg, var(--gold-bright), var(--gold));
}
.menu-list {
  list-style: none;
  margin: 0 auto; padding: 0;
  max-width: 1040px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  align-items: start;
}
.menu-card {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 14px;
  background: rgba(33, 26, 25, 0.55);
  border: 1px solid rgba(201, 151, 63, 0.16);
  border-radius: 12px;
  transition: border-color 0.35s, transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.menu-card:hover {
  border-color: rgba(201, 151, 63, 0.5);
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}
.menu-card.pop { animation: pop-in 0.5s var(--ease-out) both; animation-delay: calc(var(--stagger) * 50ms); }
@keyframes pop-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.mc-thumb {
  position: relative; margin: 0;
  width: 86px; height: 86px; flex-shrink: 0;
  border-radius: 9px; overflow: hidden;
}
.mc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out); }
.menu-card:hover .mc-thumb img { transform: scale(1.07); }
.mc-thumb.is-ph {
  background:
    radial-gradient(70% 55% at 50% 30%, rgba(201, 151, 63, 0.18), transparent 65%),
    linear-gradient(160deg, #34251b, #191311 75%);
}
.mc-thumb.is-ph .ph-mark {
  display: grid; place-items: center;
  position: absolute; inset: 0;
  color: var(--gold); font-size: 19px; opacity: 0.55;
}
.mc-body { flex: 1; min-width: 0; }
.mc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mc-name { font-family: var(--font-display); font-size: 18px; letter-spacing: 0.02em; }
.mc-price { font-family: var(--font-display); font-size: 17px; color: var(--gold-bright); white-space: nowrap; }
.mc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.mc-desc { color: var(--cream-dim); font-size: 13.5px; line-height: 1.55; margin: 7px 0 0; }

/* plat sans photo -> ligne de carte classique à pointillés (même langage que
   menu.html), pleine largeur sous les cartes photo. Jamais de vignette vide. */
.menu-row {
  grid-column: 1 / -1;
  padding: 11px 16px;
  background: rgba(33, 26, 25, 0.35);
  border: 1px solid rgba(201, 151, 63, 0.10);
  border-radius: 10px;
}
.menu-row.pop { animation: pop-in 0.5s var(--ease-out) both; animation-delay: calc(var(--stagger) * 30ms); }
.mr-line { display: flex; align-items: baseline; gap: 10px; }
.mr-name { font-family: var(--font-display); font-size: 17px; letter-spacing: 0.02em; }
body.lang-ar .mr-name { letter-spacing: 0; }
.mr-tags { white-space: nowrap; }
.mr-tags .badge { vertical-align: 2px; }
.mr-dots {
  flex: 1;
  min-width: 24px;
  border-bottom: 1px dotted rgba(201, 151, 63, 0.4);
  transform: translateY(-4px);
}
.mr-price { font-family: var(--font-display); font-size: 16px; color: var(--gold-bright); white-space: nowrap; }
.mr-desc { color: var(--cream-dim); font-size: 13.5px; line-height: 1.55; margin: 5px 0 0; max-width: 70ch; }
.is-out .mr-name { color: var(--cream-dim); }
.is-out .mr-price { color: var(--cream-dim); opacity: 0.6; text-decoration: line-through; }
.badge {
  font-family: var(--font-body);
  font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
  border: 1px solid rgba(201, 151, 63, 0.5);
  color: var(--gold-bright);
}
body.lang-ar .badge { letter-spacing: 0; font-size: 12px; }
.badge--fresh { border-color: rgba(61, 107, 104, 0.8); color: #7fb5b1; }
.badge--share { border-color: rgba(180, 85, 45, 0.7); color: #d98d5f; }
/* plat épuisé — signalé par le gérant depuis l'espace gérant (menu_overrides).
   Le plat reste lisible : le client doit voir qu'il existe, pas croire que la
   carte a changé. Seuls le prix et le bouton "+" s'effacent. */
.badge--soldout {
  border-color: rgba(180, 85, 45, 0.85);
  background: rgba(180, 85, 45, 0.16);
  color: #e09a6e;
}
.is-out .mc-thumb, .is-out .mpc-media { opacity: 0.4; filter: grayscale(0.75); }
.is-out .mc-name, .is-out .mpc-name, .is-out .mpr-name { color: var(--cream-dim); }
.is-out .mc-price, .is-out .mpc-price, .is-out .mpr-price {
  color: var(--cream-dim); opacity: 0.6; text-decoration: line-through;
}

/* ---------- moments ---------- */
.moments { background: linear-gradient(180deg, transparent, rgba(13, 10, 11, 0.55) 25%, rgba(13, 10, 11, 0.55) 75%, transparent); }
.moments-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.6vw, 30px);
}
.mo-card {
  border: 1px solid rgba(201, 151, 63, 0.22);
  border-radius: 130px 130px 4px 4px; /* arcade again */
  padding: 0 26px 34px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(43, 34, 32, 0.5), rgba(21, 16, 17, 0.4));
  transition: transform 0.45s var(--ease-out), border-color 0.45s, box-shadow 0.45s;
}
.mo-photo {
  width: calc(100% + 52px);
  max-width: none;
  height: 205px;
  margin: 0 -26px 26px;
  object-fit: cover;
  object-position: center;
  border-bottom: 1px solid rgba(201, 151, 63, 0.25);
  filter: saturate(.9) contrast(1.04) brightness(.86);
  transition: transform .7s var(--ease-out), filter .45s;
}
.mo-card:nth-child(1) .mo-photo { object-position: center 58%; }
.mo-card:nth-child(3) .mo-photo { object-position: center 62%; }
.mo-card:hover .mo-photo { transform: scale(1.035); filter: saturate(1) contrast(1.02) brightness(.96); }
.mo-card:hover {
  transform: translateY(-8px);
  border-color: rgba(201, 151, 63, 0.55);
  box-shadow: var(--shadow-soft);
}
.mo-icon { color: var(--gold); display: inline-block; width: 34px; height: 34px; }
.mo-icon svg { width: 100%; height: 100%; }
.mo-card h3 { font-size: 19.5px; margin-top: 16px; }
.mo-card p { color: var(--cream-dim); font-size: 14px; margin: 10px 0 0; }

/* ---------- réservation ---------- */
.resa { text-align: center; position: relative; }
.resa::before {
  content: "✦";
  display: block;
  color: var(--gold);
  font-size: 15px;
  margin-bottom: 26px;
  letter-spacing: 0;
}
.resa .section-head { margin-inline: auto; }
.resa-note { color: var(--cream-dim); margin-top: -26px; }
.resa-phones {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(18px, 4vw, 44px);
  margin-block: 44px 50px;
}
.resa-phone {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: 0.06em;
  color: var(--cream);
  position: relative;
  padding-bottom: 8px;
  transition: color 0.35s;
  direction: ltr; unicode-bidi: embed;
}
.resa-phone::after {
  content: ""; position: absolute; inset-inline: 8%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(0.4); opacity: 0.5;
  transition: transform 0.45s var(--ease-out), opacity 0.45s;
}
.resa-phone:hover { color: var(--gold-bright); }
.resa-phone:hover::after { transform: scaleX(1); opacity: 1; }
.resa-wa {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--gold-bright);
}
.resa-wa svg { width: 0.85em; height: 0.85em; }
.resa-wa:hover { color: var(--cream); }
/* online reservation request */
.resa-or {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  color: var(--cream-dim); font-size: 14px;
  margin: 6px 0 26px;
}
.resa-or::before, .resa-or::after {
  content: ""; width: 64px; height: 1px;
  background: rgba(201, 151, 63, 0.3);
}
.resa-form { max-width: 780px; margin: 0 auto 56px; text-align: start; }
.rf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.rf-field { display: flex; flex-direction: column; gap: 7px; }
.rf-field span {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold);
}
body.lang-ar .rf-field span { letter-spacing: 0; font-size: 13px; }
.rf-field input {
  background: rgba(33, 26, 25, 0.7);
  border: 1px solid rgba(201, 151, 63, 0.25);
  border-radius: 7px;
  padding: 13px 14px;
  color: var(--cream);
  font: inherit;
  color-scheme: dark;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.rf-field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 151, 63, 0.15);
}
.rf-field input[type="date"], .rf-field input[type="time"],
.rf-field input[type="tel"], .rf-field input[type="number"] { direction: ltr; }
[dir="rtl"] .rf-field input[type="date"], [dir="rtl"] .rf-field input[type="time"],
[dir="rtl"] .rf-field input[type="tel"], [dir="rtl"] .rf-field input[type="number"] { text-align: end; }
.resa-form .btn { margin-top: 20px; width: 100%; }
.rf-msg { margin: 16px 0 0; font-size: 14.5px; text-align: center; }
.rf-msg[data-kind="ok"] { color: #96cfa6; }
.rf-msg[data-kind="error"] { color: #dd9273; }

.resa-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 900px; margin-inline: auto;
  text-align: center;
}
.resa-map {
  max-width: 900px; margin: 26px auto 0;
  border: 1px solid rgba(201, 151, 63, 0.28);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.resa-map iframe {
  display: block;
  filter: grayscale(0.85) contrast(1.05) brightness(0.92);
  transition: filter 0.5s;
}
.resa-map:hover iframe { filter: none; }
.resa-card {
  border: 1px solid rgba(201, 151, 63, 0.2);
  border-radius: 4px;
  padding: 26px 20px;
  background: rgba(33, 26, 25, 0.55);
}
.resa-card h3 {
  font-family: var(--font-body);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold);
}
body.lang-ar .resa-card h3 { letter-spacing: 0; font-size: 13.5px; }
.resa-card p { font-family: var(--font-display); font-size: 17px; margin: 12px 0 0; }
.resa-card a.link {
  display: inline-block; margin-top: 10px;
  font-size: 12.5px; letter-spacing: 0.1em;
  color: var(--cream-dim);
  border-bottom: 1px solid rgba(201, 151, 63, 0.4);
  padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s;
}
.resa-card a.link:hover { color: var(--gold-bright); border-color: var(--gold); }

/* ---------- footer ---------- */
footer {
  border-top: 1px solid rgba(201, 151, 63, 0.22);
  background: var(--bg-deep);
  padding: 56px 0 40px;
  text-align: center;
}
footer .wordmark { justify-content: center; font-size: 24px; }
.footer-tag { color: var(--cream-dim); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 14px; }
body.lang-ar .footer-tag { letter-spacing: 0; font-size: 15px; }
footer .stars { display: block; margin-top: 18px; }
.footer-rights { color: rgba(201, 189, 166, 0.75); font-size: 12.5px; margin-top: 26px; }
.footer-rights a { color: var(--cream-dim); border-bottom: 1px dotted rgba(201, 151, 63, 0.5); }
.footer-rights a:hover { color: var(--gold-bright); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .sig-grid { grid-template-columns: repeat(2, 1fr); }
  .sig-card:nth-child(2), .sig-card:nth-child(2).reveal,
  .sig-card:nth-child(2).reveal.in { transform: none; }
  .moments-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .nav-desktop { display: none; }
  #burger { display: flex; }
  .maison-grid { grid-template-columns: 1fr; }
  .maison-media { order: -1; max-width: 430px; margin-inline: auto; }
  .maison-media .frame { aspect-ratio: 4 / 4.4; }
}
@media (max-width: 760px) {
  .menu-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .sig-grid { grid-template-columns: 1fr; }
  .moments-grid { grid-template-columns: 1fr; }
  .mo-card { border-radius: 90px 90px 4px 4px; }
  .maison-badges { grid-template-columns: 1fr 1fr; }
  .resa-cards { grid-template-columns: 1fr; }
  .rf-grid { grid-template-columns: 1fr; }
  .menu-card { padding: 12px; gap: 13px; }
  .mc-thumb { width: 72px; height: 72px; }
  .mc-name { font-size: 16.5px; }
  .hero-ctas .btn { width: 100%; }
  .header-actions .lang-switch button { padding: 6px 9px; }
  .wordmark { font-size: 17px; }
}