/* Bonne Nuit, événements : les cartes [bn_evenements], sur l'accueil et la page Événements.
   Couleurs et typographies : variables globales d'Elementor (Paramètres du site), pour suivre la charte. */

/* Grille : 3 colonnes, 2 sur tablette, 1 sur mobile */
.bn-evenements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 24px; }
@media (max-width: 1024px) { .bn-evenements { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .bn-evenements { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* Carte : le visuel en entier dans un cadre 16:9, puis la date, le lieu, le nom et la programmation */
.bn-evenement { display: flex; flex-direction: column; gap: 4px; }
.bn-evt-visuel { margin-bottom: 12px; border-radius: 2px; overflow: hidden; background: var(--e-global-color-noirclair); }
.bn-evt-visuel img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.bn-evt-visuel-vide { aspect-ratio: 16 / 9; }
.bn-evenement p, .bn-evenement h3 { margin: 0; }
.bn-evt-date { font-family: var(--e-global-typography-label-font-family), sans-serif; font-size: var(--e-global-typography-label-font-size);
  font-weight: var(--e-global-typography-label-font-weight); line-height: var(--e-global-typography-label-line-height);
  letter-spacing: var(--e-global-typography-label-letter-spacing); text-transform: uppercase; color: var(--e-global-color-accent); }
.bn-evt-lieu { font-family: var(--e-global-typography-titre3-font-family), sans-serif; font-size: var(--e-global-typography-titre3-font-size);
  font-weight: var(--e-global-typography-titre3-font-weight); line-height: var(--e-global-typography-titre3-line-height);
  letter-spacing: var(--e-global-typography-titre3-letter-spacing); color: var(--e-global-color-accent); }
.bn-evt-titre, .bn-evt-programmation, .bn-evt-billetterie { font-family: var(--e-global-typography-petit-font-family), sans-serif;
  font-size: var(--e-global-typography-petit-font-size); line-height: var(--e-global-typography-petit-line-height); color: var(--e-global-color-text); }
.bn-evt-programmation { color: var(--e-global-color-accent); }
.bn-evenement .bn-lien { color: var(--e-global-color-accent); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.bn-evenement .bn-lien:hover { color: var(--e-global-color-primary); }