/* ==========================================================
   Beaune Piano Fest - surcharges perso (chargé APRÈS styles.css)
   ========================================================== */

/* --- Navigation ------------------------------------------ */
.navbar-custom .container { flex-wrap: nowrap; }
.navbar-custom .navbar-collapse { flex-basis: 100%; }
.drapLang { margin-right: 1em; flex-shrink: 0; }
.drapLang img { display: block; }
.nav-social { display: flex; align-items: center; gap: .75rem; }
.nav-social a { display: inline-flex; line-height: 0; }
/* Mobile : icônes réseaux dans le menu déroulant, barre sur une ligne */
@media (max-width: 991.98px) {
  .navbar-custom .container { flex-wrap: wrap; padding-left: 1rem; padding-right: 1rem; }
  .navbar-custom .navbar-brand { font-size: .9rem; letter-spacing: .05rem; margin-right: auto; }
  .nav-social--top { display: none; }
  .nav-social--menu { padding: .5rem 0 .25rem; }
}
@media (min-width: 992px) {
  .nav-social--menu { display: none; }
}

/* Laisse la place à la barre fixe pour les pages sans bandeau */
.marginTop { margin-top: 80px; }
@media (min-width: 992px) { .marginTop { margin-top: 70px; } }

/* --- Bandeau ---------------------------------------------- */
@media (max-width: 575.98px) {
  header.masthead .masthead-content .masthead-heading { font-size: 3rem; }
  header.masthead .masthead-content .masthead-subheading { font-size: 1.5rem; }
  .display-4 { font-size: 2.25rem; }
}

/* --- Médias responsives ----------------------------------- */
.videoRoundedCircle {
  border-radius: 10px;
  width: 100%;
  max-width: 500px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Carrousel Piano Light : images superposées en fondu */
#pianoLightCarousel { display: grid; }
#pianoLightCarousel img { grid-area: 1/1; width: 100%; height: auto; transition: opacity .8s ease; opacity: 0; }
#pianoLightCarousel img.active { opacity: 1; }

/* --- Billetterie HelloAsso -------------------------------- */
.billetterie-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
.vignette_billeterie { width: 100%; max-width: 350px; height: 800px; border: none; }
.ha-boutique { width: 100%; height: 1500px; border: none; }

/* --- Bouton don ------------------------------------------- */
.buttonDon {
  background-color: rgba(128, 128, 128, 0.7);
  border-radius: 8px;
  font-size: 1.5em;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

/* --- Pied de page ----------------------------------------- */
footer a { color: inherit; }

/* Menu mobile ouvert : fond plus opaque pour la lisibilité */
@media (max-width: 991.98px) {
  .navbar-custom:has(.navbar-collapse.show),
  .navbar-custom:has(.collapsing) { background-color: rgba(0, 0, 0, .95); }
}

/* Bandeau : image WebP (18 Ko au lieu de 505 Ko) */
header.masthead { background-image: url("../assets/img/banierePianoTale.webp"); }