/* ============================================================
   VENITE ADOREMUS — Compatibilité plugin ↔ design
   Re-thème la sortie du plugin venite-adoremus ([va_events],
   [va_events_map], single événement) avec les tokens du design
   « La lumière dans la nuit ».
   Chargé APRÈS va-public.css → surcharge sans !important quand
   possible. Dépend de venite-tokens.css.
   ============================================================ */

/* ------------------------------------------------------------
   1. Remappage des variables du plugin vers les tokens du design.
      Le plugin déclare --va-* sur :root et toute sa CSS y fait
      référence : les redéclarer ici sur le conteneur re-thème
      ~tout (couleurs, bordures, rayons, ombres) automatiquement.
   ------------------------------------------------------------ */
.va-events-container,
.va-single-event,
.va-map-container {
  --va-primary:      var(--or-700);
  --va-primary-dark: var(--or-800);
  --va-accent:       var(--or-500);
  --va-bg:           var(--creme);
  --va-white:        var(--blanc);
  --va-border:       var(--ligne);
  --va-text:         var(--encre);
  --va-muted:        var(--encre-soft);
  --va-night:        var(--nuit-900);
  --va-radius:       var(--r-md);
  --va-shadow:       var(--sh-sm);

  font-family: var(--sans);
  color: var(--encre);
}

/* ------------------------------------------------------------
   2. Carte événement → look « .va-card » du design
   ------------------------------------------------------------ */
.va-events-container .va-event-card {
  border: 1px solid var(--ligne);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s;
}
.va-events-container .va-event-card:hover {
  box-shadow: var(--sh-md);
  border-color: color-mix(in oklab, var(--or-500) 40%, var(--ligne));
}

/* Bloc-date → chiffre serif + libellés dorés.
   La COULEUR reste pilotée par les réglages du programme dans le plugin
   (--va-event-color, ex. _va_programme_color). Le dégradé nuit de la
   maquette n'est qu'un fallback si aucune couleur de programme n'est définie. */
.va-events-container .va-event-date,
.va-events-container .va-event-night .va-event-date {
  background: var(--va-event-gradient, var(--va-event-color, linear-gradient(160deg, var(--nuit-700), var(--nuit-900))));
  color: var(--etoile);
  width: 84px;
}
.va-events-container .va-event-dates .va-event-date:first-child {
  border-radius: var(--r-md) 0 0 var(--r-md);
}
.va-events-container .va-event-day-num {
  font-family: var(--serif);
  font-size: 1.95rem;
  font-weight: 600;
  line-height: 1.02;       /* serif haut : éviter le chevauchement avec le mois */
  margin: 2px 0 6px;
}
.va-events-container .va-event-weekday,
.va-events-container .va-event-relative {
  color: var(--or-400);
}
.va-events-container .va-event-month { color: var(--etoile-soft); margin-top: 1px; }

/* Titre → serif Cormorant, plus grand (proche de la maquette .va-card__title) */
.va-events-container .va-event-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--encre);
  white-space: normal;   /* le plugin force nowrap → on autorise le retour ligne */
  overflow: visible;
}
.va-events-container .va-event-night .va-event-title { color: var(--encre); }

/* Méta (heure / lieu) */
.va-events-container .va-event-meta,
.va-events-container .va-event-time,
.va-events-container .va-event-lieu { color: var(--encre-soft); }

/* ------------------------------------------------------------
   3. Barre de filtres → toolbar / chips / champs du design
   ------------------------------------------------------------ */
.va-events-container .va-filters-wrap {
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  background: var(--creme); /* oklch(0.975 0.013 85) */
}
/* Les enfants ne doivent pas reposer un fond opaque par-dessus le pastel. */
.va-events-container .va-filters-header,
.va-events-container .va-filters-body { background: transparent; }

/* Pilules header (date, catégories, localisation, programme) → pill */
.va-events-container .va-header-date-filter,
.va-events-container .va-categories-toggle,
.va-events-container .va-localisation-toggle,
.va-events-container .va-header-types .va-filter-toggle {
  border-radius: var(--r-pill);
}
.va-events-container .va-categories-toggle:hover,
.va-events-container .va-categories-toggle.active,
.va-events-container .va-localisation-toggle:hover,
.va-events-container .va-localisation-toggle.active {
  border-color: var(--or-700);
  color: var(--or-800);
}

/* Pastille compteur catégories → orange marque */
.va-events-container .va-cat-count { background: var(--or-700); }

/* Chips catégories (filtres déjà nommés .va-chip côté design ;
   le plugin réutilise .va-filter-toggle) → arrondi pill + actif doré */
.va-events-container .va-filter-toggle {
  border-radius: var(--r-pill);
}
.va-events-container .va-filter-toggle.active,
.va-events-container .va-filter-toggle[aria-pressed="true"] {
  background: transparent;
  border-color: var(--va-filter-color, var(--or-700));
  /* pas de couleur de texte imposée : reste le gris par défaut */
}
.va-events-container .va-filter-toggle.active i { color: var(--va-filter-color, var(--or-700)); }

/* ------------------------------------------------------------
   4. Boutons d'action (Localiser / Y aller / Charger plus)
   ------------------------------------------------------------ */
.va-events-container .va-locate-on-map-btn,
.va-events-container .va-btn-yaller,
.va-events-container .va-load-more {
  border-radius: var(--r-pill);
  font-family: var(--sans);
}
.va-events-container .va-locate-on-map-btn:hover,
.va-events-container .va-btn-yaller:hover {
  border-color: var(--or-700);
  color: var(--or-800) !important;
  background: var(--or-100);
}
/* « Charger plus » : style doux (blanc + bordure) défini dans le plugin
   (va-public.css), conforme à la maquette — pas de remplissage orange ici. */

/* ------------------------------------------------------------
   5. Séparateurs de jour, « en cours », marqueurs carte
   ------------------------------------------------------------ */
.va-events-container .va-date-separator {
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-faint);
}
.va-events-container .va-date-separator--live,
.va-events-container .va-date-separator.is-live {
  color: var(--or-700);
}

/* ------------------------------------------------------------
   6. Intégration dans le cadre .module-frame de la page d'accueil
      (le shortcode est posé dans .module-frame ; on neutralise la
       double bordure/ombre puisque le cadre en porte déjà une).
   ------------------------------------------------------------ */
/* Dans le module d'accueil : barre de filtres STICKY, calée sous la nav et
   AU-DESSUS de la carte (z-index élevé), en gardant les coins arrondis et
   l'opacité pleine même collée (la sticky du plugin les aplatissait). */
.va-accueil .module-frame .va-events-container .va-filters-wrap {
  position: sticky;
  top: 72px;            /* sous la nav (70px) */
  z-index: 1200;        /* au-dessus de la carte (panes/contrôles ≤ 1000) */
  box-shadow: none;
  border-radius: var(--r-lg);
}
.va-accueil .module-frame .va-events-container .va-filters-wrap.is-sticky {
  opacity: 1;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}
body.admin-bar .va-accueil .module-frame .va-events-container .va-filters-wrap { top: 104px; }
.va-accueil .module-frame .va-events-container { margin: 0; }

/* ------------------------------------------------------------
   7. Popup Leaflet → tokens design (titre serif, accent orange)
   ------------------------------------------------------------ */
.va-map-container .leaflet-popup-content-wrapper {
  border-radius: var(--r-md);
}
.va-map-container .leaflet-popup-content .va-popup-title,
.va-map-container .leaflet-popup-content h3 {
  font-family: var(--serif);
  color: var(--encre);
}