/* =========================================================================
   Carte « événement proche » — accueil ordinateur
   -------------------------------------------------------------------------
   Posée EN SUPERPOSITION dans le héros, en haut à droite : elle doit se voir
   sans défilement, mais ne rien déplacer — ni le titre, ni la carte de
   réservation. D'où position:absolute, hors du flux.

   L'angle haut-droit du héros est la seule zone libre : le titre occupe la
   gauche, la carte de réservation le bas.

   Palette du logo : bleu #0d65c9, marine #0d233e, cyan #29abe2, rouge #ce130d.

   Chargée à la demande par views/site/_encart-event.php ; style.css n'est pas
   touchée, les autres pages sont inchangées.
   ========================================================================= */

.ruban-ev {
  position: absolute; top: 50px; right: 24px; z-index: 5;
  display: block; width: 384px; max-width: calc(100% - 48px);
  border-radius: 16px; overflow: hidden;
  /* Même dégradé que le chrome du site — barre du haut, pied de page, barre
     d'onglets — pour que l'encart s'y rattache au lieu de faire bande à part. */
  background: linear-gradient(140deg, var(--yb-navy, #0d233e) 0%, var(--yb-blue-dark, #0a52a4) 100%);
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 16px 38px rgba(6,16,32,.42);
  backdrop-filter: blur(8px);
  color: #fff !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ruban-ev:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 46px rgba(6,16,32,.52);
  color: #fff !important;
}

/* Grille plutôt qu'un bandeau photo au-dessus du texte : mesurée, la version
   « photo en tête » faisait 404px de haut pour 344px disponibles avant la carte
   de réservation, qu'elle recouvrait de 60px. La vignette passe à côté du titre,
   la carte tombe à ~215px et garde de la marge même avec un titre sur deux
   lignes. */
.ruban-ev__in {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px; row-gap: 10px; padding: 14px;
}

/* Portrait de 132x180 : une affiche de spectacle ne se lit pas dans une
   vignette carrée de 64px. Elle occupe deux rangées, le texte se range à côté. */
.ruban-ev__vignette {
  grid-column: 1; grid-row: 1 / span 2;
  display: block; width: 132px; height: 180px;
  border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.12);
}
/* style.css impose « .d-block img { min-height:260px; max-height:260px } » à
   certaines pages : on reprend la main pour que la vignette reste une vignette. */
.ruban-ev__vignette img {
  width: 100%; height: 100%;
  min-height: 0 !important; max-height: none !important;
  object-fit: cover; display: block;
}

/* min-width:0 : sans lui, un titre long empêcherait le rétrécissement et
   pousserait le bouton hors du ruban. */
.ruban-ev__texte { grid-column: 2; grid-row: 1; display: block; min-width: 0; }

.ruban-ev__haut { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ruban-ev__puce {
  flex: 0 0 auto;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.ruban-ev__puce--compte { background: var(--yb-cyan, #29abe2); color: #06233a; }
/* Rouge du logo : la rareté est le seul message qui doit presser. */
.ruban-ev__puce--rare { background: var(--yb-red, #ce130d); }

.ruban-ev__titre {
  display: block; width: 100%; margin-top: 6px;
  font-size: 16px; font-weight: 800; letter-spacing: -.2px; line-height: 1.25;
  /* Deux lignes au plus : un titre à rallonge ferait grandir la carte au point
     de recouvrir la carte de réservation. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Les lignes de détail passent sous la vignette, sur toute la largeur : à côté
   d'elle, « À partir de 5 000 Fcfa » se serait coupé. */
.ruban-ev__bas {
  grid-column: 2; grid-row: 2;
  align-self: start;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 13px; color: rgba(255,255,255,.86);
}
.ruban-ev__bas i { color: #9fd4f2; margin-right: 5px; }
.ruban-ev__bas strong { color: #fff; font-weight: 700; }

.ruban-ev__cta {
  grid-column: 1 / -1; grid-row: 3;
  margin-top: 2px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; border-radius: 10px;
  background: #fff; color: var(--yb-navy, #0d233e) !important;
  font-size: 14px; font-weight: 800;
}

/* La carte se retire dès que le héros n'a plus de place libre à droite : sous
   1200px le titre et la carte de réservation occupent toute la largeur, et une
   superposition passerait par-dessus au lieu de se poser à côté. La rubrique
   Events reste accessible par le menu. */
@media (max-width: 1199.98px) {
  .ruban-ev { display: none; }
}