/* ==========================================================================
   informations.css - fidelite RParc /informations/ (charge via is_page_template).
   Couleurs : tokens var(--fp-*) uniquement (discipline verifiee par check-zones).
   Structure RParc reproduite : hero d'entree, bloc "acces au parc" (split/intro),
   bandeau d'horaires, bloc contact + carte Google Maps, FAQ en accordeon,
   formulaire de contact, CTA de cloture.
   Scope : .page-template-template-informations
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO - entree de page claire, titre "Infos pratiques".
   -------------------------------------------------------------------------- */
.page-template-template-informations .fp-hero {
  min-height: min(54vh, 480px);
  align-items: center;
  padding: calc(var(--fp-nav-h) + 48px) 0 56px;
}
.page-template-template-informations .fp-hero:not(.fp-has-slider) .fp-hero-bg {
  background-image:
    url("https://raiffeisen-parc.ch/wp-content/uploads/2026/01/vr-image-1.webp");
  background-size: cover;
  background-position: center;
}
.page-template-template-informations .fp-hero-inner {
  max-width: 700px;
  text-align: center;
  margin: 0 auto;
}
.page-template-template-informations .fp-hero-actions { justify-content: center; }

/* --------------------------------------------------------------------------
   INTRO / SPLIT - "Acces au parc" : transports, velo, voiture.
   Le RParc developpe l'acces en sous-blocs ; on rend le split lisible et la
   prose aeree (listes a puces marquees en accent).
   -------------------------------------------------------------------------- */
.page-template-template-informations .fp-intro .fp-prose,
.page-template-template-informations .fp-split .fp-prose { max-width: 60ch; }

.page-template-template-informations .fp-split-text h3 {
  color: var(--fp-secondary);
  margin-top: 1.4em;
}
.page-template-template-informations .fp-prose ul {
  list-style: none;
  padding: 0;
  margin: 1em 0;
}
.page-template-template-informations .fp-prose ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: var(--fp-ink-soft);
}
.page-template-template-informations .fp-prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--fp-primary);
}

/* --------------------------------------------------------------------------
   HORAIRES - bandeau d'horaires d'ouverture, carte centree sur fond creme.
   -------------------------------------------------------------------------- */
.page-template-template-informations .fp-horaires { background: var(--fp-cream); }
.page-template-template-informations .fp-horaires .fp-lead { text-align: center; margin-inline: auto; }
.page-template-template-informations .fp-horaires-body {
  max-width: 560px;
  margin: 28px auto 0;
}
.page-template-template-informations .fp-horaires-table {
  width: 100%;
  background: var(--fp-paper);
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-radius-lg);
  overflow: hidden;
  box-shadow: var(--fp-shadow);
}
.page-template-template-informations .fp-horaires-table th,
.page-template-template-informations .fp-horaires-table td { padding: 15px 22px; }
/* Ligne du jour courant mise en avant. */
.page-template-template-informations .fp-horaires-table tr.is-today {
  background: color-mix(in srgb, var(--fp-primary) 8%, var(--fp-paper));
}

/* --------------------------------------------------------------------------
   CONTACT + CARTE - le RParc juxtapose adresse/contact et carte Google Maps.
   On compose une grille 2 colonnes : infos a gauche, carte arrondie a droite.
   La carte vit dans une section .fp-s-light contenant .fp-map (iframe).
   -------------------------------------------------------------------------- */
.page-template-template-informations .fp-map {
  margin-top: 28px;
  border-radius: var(--fp-radius-lg);
  overflow: hidden;
  box-shadow: var(--fp-shadow);
  border: 1px solid var(--fp-line);
}
.page-template-template-informations .fp-map iframe {
  display: block;
  width: 100%;
  border-radius: var(--fp-radius-lg);
  min-height: 420px;
}

/* Encart d'infos de contact (prose) a cote de la carte si presente. */
.page-template-template-informations .fp-prose p a { color: var(--fp-primary); font-weight: 600; }
.page-template-template-informations .fp-prose p a:hover { color: var(--fp-primary-dark); }

/* --------------------------------------------------------------------------
   FAQ - "Foire aux questions" en accordeon, large et aere (8 questions RParc).
   -------------------------------------------------------------------------- */
.page-template-template-informations .fp-faq { background: var(--fp-paper); }
.page-template-template-informations .fp-faq-list {
  margin-top: 36px;
  border-top: 1px solid var(--fp-line-strong);
  max-width: 880px;
}
.page-template-template-informations .fp-faq-item { border-bottom-color: var(--fp-line); }
.page-template-template-informations .fp-faq-q { font-size: 1.1rem; padding: 24px 6px; }
.page-template-template-informations .fp-faq-q:hover { color: var(--fp-primary); }
.page-template-template-informations .fp-faq-a-inner { max-width: 78ch; }

/* --------------------------------------------------------------------------
   FORMULAIRE DE CONTACT - carte blanche encadree sur fond creme, champs clairs.
   Le formulaire .fp-contact-form vit dans une section ; on l'encadre en carte.
   -------------------------------------------------------------------------- */
.page-template-template-informations .fp-contact-form {
  width: 100%;
  max-width: 720px;
  margin-top: 28px;
  background: var(--fp-paper);
  border: 1px solid var(--fp-line);
  border-radius: var(--fp-radius-lg);
  box-shadow: var(--fp-shadow);
  padding: clamp(24px, 4vw, 40px);
}
.page-template-template-informations .fp-contact-form label { color: var(--fp-ink); }
.page-template-template-informations .fp-contact-form input,
.page-template-template-informations .fp-contact-form textarea,
.page-template-template-informations .fp-contact-form select {
  font: inherit;
  padding: 13px 15px;
  border: 1px solid var(--fp-line-strong);
  border-radius: var(--fp-radius-sm);
  background: var(--fp-paper);
  color: var(--fp-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.page-template-template-informations .fp-contact-form input:focus,
.page-template-template-informations .fp-contact-form textarea:focus,
.page-template-template-informations .fp-contact-form select:focus {
  outline: none;
  border-color: var(--fp-secondary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fp-secondary) 25%, transparent);
}
.page-template-template-informations .fp-contact-form textarea { min-height: 150px; resize: vertical; }
.page-template-template-informations .fp-contact-form .fp-btn {
  align-self: flex-start;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   CTA de cloture.
   -------------------------------------------------------------------------- */
.page-template-template-informations .fp-cta-photo:empty {
  background-image:
    url("https://raiffeisen-parc.ch/wp-content/uploads/2025/12/arcades-1.webp");
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .page-template-template-informations .fp-hero { min-height: min(48vh, 400px); }
  .page-template-template-informations .fp-map iframe { min-height: 320px; }
  .page-template-template-informations .fp-contact-form .fp-form-row { grid-template-columns: 1fr; }
}