/* ==========================================================================
   restaurant.css - detail d'un point de restauration (charge via is_page_template).
   Pages : pizzeria-du-parc, restaurant, sosushi, bar-du-parc, snack,
   cafe-starbucks. Fidelite visuelle au Raiffeisen Parc (pages detail
   .../restauration/<point>/) pour le markup en place : hero plein cadre,
   intro editoriale, galerie en grille (visuels portrait, coins arrondis),
   bloc horaires en table, CTA pleine largeur.
   Couleurs : tokens var(--fp-*) UNIQUEMENT (verifie par check-zones).
   Images RParc semees en variables (fallback editable).
   Scope : .page-template-template-restaurant
   ========================================================================== */

.page-template-template-restaurant {
  /* Motif decoratif de pattes (fond des sections claires) du RParc. */
  --fp-rp-pattes: url('https://raiffeisen-parc.ch/wp-content/uploads/2025/04/bg-pattes-color-100-1024x320.webp');
  /* Photo d'ambiance par defaut (hero / galerie de repli, fallback editable). */
  --fp-rp-photo: url('https://raiffeisen-parc.ch/wp-content/uploads/2026/02/RP_Sosushi-1-1024x683.webp');
  --fp-rp-photo-2: url('https://raiffeisen-parc.ch/wp-content/uploads/2026/01/Raiffeisen-Parc-Activites-15-819x1024.webp');
}

/* ==========================================================================
   Hero : grand cadre, image de fond, titre du point de restauration en bas.
   ========================================================================== */
.page-template-template-restaurant .fp-hero { min-height: min(70vh, 600px); padding: calc(var(--fp-nav-h) + 68px) 0 60px; }
.page-template-template-restaurant .fp-hero:not(.fp-has-slider) .fp-hero-slide { background-image: var(--fp-rp-photo); background-size: cover; background-position: center; }
.page-template-template-restaurant .fp-hero-overlay {
  background: linear-gradient(180deg, color-mix(in srgb, var(--fp-dark) 18%, transparent) 0%, color-mix(in srgb, var(--fp-dark) 50%, transparent) 55%, color-mix(in srgb, var(--fp-dark) 82%, transparent) 100%);
}
.page-template-template-restaurant .fp-hero-title { font-size: clamp(2.2rem, 5vw, 3.8rem); }

/* ==========================================================================
   Intro : texte editorial (« La carte »), aere, accent sur le titre.
   ========================================================================== */
.page-template-template-restaurant .fp-intro .fp-lead { max-width: 26ch; }
.page-template-template-restaurant .fp-intro-body { max-width: 64ch; }
.page-template-template-restaurant .fp-intro-body p { color: var(--fp-ink-soft); font-size: 1.05rem; }

/* ==========================================================================
   Galerie : grille de visuels portrait, coins arrondis, ombre douce.
   RParc montre la restauration en photos verticales serrees.
   ========================================================================== */
.page-template-template-restaurant .fp-galerie {
  background-color: var(--fp-cream);
  background-image: linear-gradient(180deg, var(--fp-cream), color-mix(in srgb, var(--fp-cream) 94%, transparent)), var(--fp-rp-pattes);
  background-size: auto, 1024px auto;
  background-position: center, center bottom;
  background-repeat: no-repeat, repeat-x;
}
.page-template-template-restaurant .fp-galerie .fp-lead { max-width: 22ch; }
.page-template-template-restaurant .fp-galerie-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 36px;
}
.page-template-template-restaurant .fp-galerie-item {
  aspect-ratio: 3 / 4;
  border-radius: var(--fp-radius);
  box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--fp-ink) 55%, transparent);
  background-color: color-mix(in srgb, var(--fp-secondary) 10%, var(--fp-cream));
}
/* Repli visuel quand une vignette n'a pas encore d'image saisie. */
.page-template-template-restaurant .fp-galerie-item:not([style*="background-image"]) { background-image: var(--fp-rp-photo-2); background-size: cover; background-position: center; }
.page-template-template-restaurant .fp-galerie-item:hover { transform: translateY(-4px); }

/* ==========================================================================
   Horaires : carte centree, table claire (jour | creneaux) facon RParc.
   ========================================================================== */
.page-template-template-restaurant .fp-horaires { text-align: center; }
.page-template-template-restaurant .fp-horaires .fp-lead { margin-inline: auto; max-width: 22ch; }
.page-template-template-restaurant .fp-horaires-body {
  margin: 28px auto 0;
  max-width: 640px;
  text-align: left;
  background: var(--fp-paper);
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-radius-lg);
  box-shadow: var(--fp-shadow);
  padding: 14px 28px;
}
.page-template-template-restaurant .fp-horaires-body table { width: 100%; border-collapse: collapse; }
.page-template-template-restaurant .fp-horaires-body td,
.page-template-template-restaurant .fp-horaires-body th {
  padding: 15px 8px;
  border-bottom: 1px solid var(--fp-line);
  text-align: left;
  vertical-align: top;
}
.page-template-template-restaurant .fp-horaires-body tr:last-child td,
.page-template-template-restaurant .fp-horaires-body tr:last-child th { border-bottom: 0; }
.page-template-template-restaurant .fp-horaires-body td:first-child,
.page-template-template-restaurant .fp-horaires-body th:first-child {
  font-family: var(--fp-font-heading);
  font-weight: 600;
  color: var(--fp-ink);
}
.page-template-template-restaurant .fp-horaires-body td:last-child { color: var(--fp-ink-soft); text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   CTA final : bandeau « Reservez votre table » pleine largeur.
   ========================================================================== */
.page-template-template-restaurant .fp-cta-photo:not([style*="background-image"]) {
  background-image: var(--fp-rp-photo);
  opacity: .3;
}

/* ==========================================================================
   Reactif
   ========================================================================== */
@media (max-width: 720px) {
  .page-template-template-restaurant .fp-hero { min-height: min(62vh, 500px); }
  .page-template-template-restaurant .fp-galerie-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .page-template-template-restaurant .fp-horaires-body { padding: 8px 18px; }
  .page-template-template-restaurant .fp-horaires-body td:last-child { text-align: left; }
}