/* Page-specific styles — Privatisation @ Le Braz. Everything this page uses
   (header/nav, hero, trust strip, concept grid, gallery, CTA banner, footer,
   rating block, testimonials, price list, chip list, feature card grid) is
   generic and lives in /shared/css/layout.css and /shared/css/base.css.
   The traiteur cards below are genuinely specific to this page (a product
   showcase grid) so it's built here. */

/* ---------- Price list: secondary per-unit hint ---------- */
/* The happy-hour litre row carries an indicative "soit X € la pinte" under
   its price. It's a reading aid, not a separate offer, so it stays a small
   muted line rather than its own .price-row. */

.price-row strong { text-align: right; }
.price-row strong small {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  color: var(--color-text-tertiary);
}

/* ---------- Traiteur showcase ---------- */

.traiteur-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}
.traiteur-cards-2 { grid-template-columns: repeat(2, 1fr); max-width: 52rem; margin-inline: auto; margin-bottom: var(--space-7); }

.traiteur-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  color: var(--color-text-primary);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.traiteur-card:hover { border-color: rgb(218 149 2 / 0.4); transform: translateY(-2px); }

.traiteur-card-price {
  align-self: flex-start;
  margin-bottom: var(--space-3);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  background: var(--color-brand-soft);
  color: var(--color-brand-light);
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
}
.traiteur-card-price small { font-weight: var(--fw-regular); opacity: 0.8; }

.traiteur-card h3 { margin-bottom: var(--space-2); }
.traiteur-card > p { color: var(--color-text-secondary); font-size: var(--text-sm); margin-bottom: var(--space-4); }

/* One photo of the actual assembled board, shot at Le Braz — it sells the
   formula better than a mosaic of isolated ingredients did. Fixed
   aspect-ratio so the two cards stay the same height even though the two
   source photos don't share a ratio. */
.traiteur-card-photo {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.traiteur-card-photo picture { display: block; width: 100%; height: 100%; }
.traiteur-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease-out); }
/* The ++ photo is square and its board sits low in the frame — a centred 4/3
   crop would cut it off, so bias the crop downwards. */
.traiteur-card-photo.is-tall img { object-position: center 72%; }
/* Decorative zoom on hover, even though the card itself is no longer
   interactive (no selection state — see the reservation CTA below). */
.traiteur-card:hover .traiteur-card-photo img { transform: scale(1.05); }

.traiteur-ingredients { display: flex; flex-direction: column; gap: var(--space-2); margin-top: auto; }
.traiteur-ingredients li {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  padding-left: var(--space-4);
  position: relative;
}
.traiteur-ingredients li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--color-brand);
}

@media (max-width: 860px) {
  .traiteur-cards, .traiteur-cards-2 { grid-template-columns: 1fr; }
}

/* Reservation CTA — bigger than the site's default .btn, this is the
   section's main call to action now that the simulator is gone. */
.btn-lg {
  height: 3.75rem;
  padding-inline: var(--space-8);
  font-size: var(--text-base);
}

@media (prefers-reduced-motion: reduce) {
  .traiteur-card, .traiteur-card-photo img { transition: none; }
}