/* ==========================================================================
   restauration.css - hub /restauration/ (charge via is_page_template).
   Fidelite visuelle au Raiffeisen Parc (https://raiffeisen-parc.ch/restauration/)
   pour le markup en place : hero plein cadre, intro, grille de points de
   restauration (cartes portrait, titre centre, lien « Plus d'informations »),
   CTA pleine largeur. Couleurs : tokens var(--fp-*) UNIQUEMENT (verifie par
   check-zones). Images RParc semees en variables (fallback editable).
   Scope : .page-template-template-restauration
   ========================================================================== */

.page-template-template-restauration {
  /* 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 restauration (fond du hero, fallback editable). */
  --fp-rp-hero: url('https://raiffeisen-parc.ch/wp-content/uploads/2026/02/RP_Sosushi-1-1024x683.webp');
}

/* ==========================================================================
   Hero : grand cadre, image de fond chaleureuse, texte ancre en bas.
   ========================================================================== */
.page-template-template-restauration .fp-hero { min-height: min(72vh, 640px); padding: calc(var(--fp-nav-h) + 72px) 0 64px; }
.page-template-template-restauration .fp-hero:not(.fp-has-slider) .fp-hero-slide { background-image: var(--fp-rp-hero); background-size: cover; background-position: center; }
.page-template-template-restauration .fp-hero-title { font-size: clamp(2.4rem, 5.5vw, 4.2rem); }
.page-template-template-restauration .fp-hero-lead { max-width: 52ch; }

/* ==========================================================================
   Intro : centree, fond clair texture de pattes, respiration genereuse.
   ========================================================================== */
.page-template-template-restauration .fp-intro { text-align: center; }
.page-template-template-restauration .fp-intro::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 200px;
  background-image: var(--fp-rp-pattes);
  background-size: 1024px auto;
  background-position: center bottom;
  background-repeat: repeat-x;
  opacity: .12;
  pointer-events: none;
}
.page-template-template-restauration .fp-intro .fp-eyebrow { justify-content: center; }
.page-template-template-restauration .fp-intro .fp-lead { margin-inline: auto; max-width: 24ch; }
.page-template-template-restauration .fp-intro-body { margin-inline: auto; max-width: 60ch; }
.page-template-template-restauration .fp-intro-body p { color: var(--fp-ink-soft); }

/* ==========================================================================
   Grille des points de restauration.
   RParc : cartes en format PORTRAIT, visuel vertical plein, titre centre,
   lien « Plus d'informations » en bas. Fond creme, motif de pattes discret.
   ========================================================================== */
.page-template-template-restauration .fp-restauration {
  background-color: var(--fp-cream);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--fp-cream) 92%, transparent), var(--fp-cream)), var(--fp-rp-pattes);
  background-size: auto, 1024px auto;
  background-position: center, center top;
  background-repeat: no-repeat, repeat-x;
}
.page-template-template-restauration .fp-restauration .fp-eyebrow { justify-content: center; }
.page-template-template-restauration .fp-restauration > .fp-wrap { text-align: center; }
.page-template-template-restauration .fp-restauration .fp-lead { margin-inline: auto; max-width: 22ch; }

/* La grille : cartes plus etroites, format portrait facon RParc. */
.page-template-template-restauration .fp-restauration .fp-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 26px;
  text-align: left;
  margin-top: 44px;
}

.page-template-template-restauration .fp-restauration .fp-card {
  border: 1px solid color-mix(in srgb, var(--fp-line) 70%, transparent);
  border-radius: var(--fp-radius-lg);
  background: var(--fp-paper);
  box-shadow: 0 22px 48px -26px color-mix(in srgb, var(--fp-ink) 55%, transparent);
  text-align: center;
  overflow: hidden;
}
.page-template-template-restauration .fp-restauration .fp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 70px -28px color-mix(in srgb, var(--fp-ink) 60%, transparent);
}

/* Visuel vertical (portrait) qui occupe le haut de la carte. */
.page-template-template-restauration .fp-restauration .fp-card-media {
  aspect-ratio: 3 / 4;
  background-color: color-mix(in srgb, var(--fp-secondary) 12%, var(--fp-cream));
}
.page-template-template-restauration .fp-restauration .fp-card-icon {
  background: color-mix(in srgb, var(--fp-paper) 88%, transparent);
  color: var(--fp-primary);
}

/* Corps : titre centre, lien d'appel en bas comme « Plus d'informations ». */
.page-template-template-restauration .fp-restauration .fp-card-body {
  align-items: center;
  gap: 8px;
  padding: 22px 22px 26px;
}
.page-template-template-restauration .fp-restauration .fp-card-title {
  font-size: 1.32rem;
  color: var(--fp-ink);
}
.page-template-template-restauration .fp-restauration .fp-card-desc {
  color: var(--fp-ink-soft);
  flex: 0 1 auto;
}
.page-template-template-restauration .fp-restauration .fp-card-go {
  margin-top: 14px;
  padding: 11px 22px;
  border: 2px solid color-mix(in srgb, var(--fp-primary) 40%, transparent);
  border-radius: var(--fp-pill);
  color: var(--fp-primary);
  font-family: var(--fp-font-heading);
  font-size: .92rem;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.page-template-template-restauration .fp-restauration .fp-card:hover .fp-card-go {
  background: var(--fp-primary);
  border-color: var(--fp-primary);
  color: var(--fp-paper);
}

/* ==========================================================================
   CTA final : bandeau gourmand pleine largeur (« Une faim de loup ? »).
   ========================================================================== */
.page-template-template-restauration .fp-cta-section { padding: calc(var(--fp-section-y) + 8px) 0; }
.page-template-template-restauration .fp-cta-photo:not([style*="background-image"]) {
  background-image: var(--fp-rp-hero);
  opacity: .28;
}

/* ==========================================================================
   Reactif
   ========================================================================== */
@media (max-width: 720px) {
  .page-template-template-restauration .fp-hero { min-height: min(64vh, 520px); }
  .page-template-template-restauration .fp-restauration .fp-card-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
}