/* Bonne Nuit, artistes : la grille [bn_artistes] et la fiche artiste.
   Couleurs et typographies : variables globales d'Elementor (Paramètres du site), pour suivre la charte. */

/* Typographies de la charte */
.bn-titre1 { margin: 0; font-family: var(--e-global-typography-titre1-font-family), sans-serif; font-size: var(--e-global-typography-titre1-font-size);
  font-weight: var(--e-global-typography-titre1-font-weight); line-height: var(--e-global-typography-titre1-line-height);
  letter-spacing: var(--e-global-typography-titre1-letter-spacing); color: var(--e-global-color-accent); text-wrap: balance; }
.bn-label { margin: 0; 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-nom { margin: 12px 0 0; font-family: var(--e-global-typography-nom-font-family), sans-serif; font-size: var(--e-global-typography-nom-font-size);
  font-weight: var(--e-global-typography-nom-font-weight); line-height: var(--e-global-typography-nom-line-height);
  letter-spacing: var(--e-global-typography-nom-letter-spacing); text-transform: uppercase; color: var(--e-global-color-accent); }
.bn-meta { margin: 2px 0 0; 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-fiche-page, .bn-bio, .bn-attributs { font-family: var(--e-global-typography-text-font-family), sans-serif; font-size: var(--e-global-typography-text-font-size);
  line-height: var(--e-global-typography-text-line-height); color: var(--e-global-color-text); }
.bn-bio { font-size: var(--e-global-typography-textelarge-font-size); line-height: var(--e-global-typography-textelarge-line-height); color: var(--e-global-color-accent); }
.bn-bio p { margin: 0 0 .8em; }
.bn-bio p:last-child { margin-bottom: 0; }

/* Grille de cartes : 4 colonnes, 3 sur tablette, 2 sur mobile */
.bn-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 24px; }
.bn-grille-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .bn-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .bn-grille, .bn-grille-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; } }

/* Carte artiste : photo en couleur, léger zoom et nom souligné au survol */
.bn-carte { display: block; color: inherit; text-decoration: none; }
.bn-carte .bn-photo { overflow: hidden; aspect-ratio: 4 / 5; border-radius: 2px; background: var(--e-global-color-noirclair); }
.bn-carte .bn-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s ease; }
.bn-carte:hover .bn-photo img, .bn-carte:focus-visible .bn-photo img { transform: scale(1.03); }
.bn-carte .bn-nom { text-decoration: underline transparent; text-underline-offset: .35em; transition: text-decoration-color .2s; }
.bn-carte:hover .bn-nom, .bn-carte:focus-visible .bn-nom { text-decoration-color: currentColor; }
.bn-carte:focus-visible { outline: 2px solid var(--e-global-color-primary); outline-offset: 4px; }

/* Fiche artiste */
.bn-fiche-conteneur { display: flex; gap: 40px; align-items: flex-start; max-width: 1200px; margin: 0 auto; padding: 56px 24px 112px; box-sizing: border-box; }
.bn-colonne-liste { flex: 0 0 18%; position: sticky; top: 32px; display: grid; gap: 16px; }
.bn-fiche { flex: 1 1 auto; min-width: 0; display: grid; gap: 56px; }
.bn-liste-artistes { list-style: none; margin: 0; padding: 0; display: grid; gap: .35em;
  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); }
.bn-fiche-page .bn-liste-artistes a { color: var(--e-global-color-text); text-decoration: none; transition: color .2s; }
.bn-fiche-page .bn-liste-artistes a:hover, .bn-fiche-page .bn-liste-artistes a[aria-current] { color: var(--e-global-color-primary); }
.bn-fiche-haut { display: flex; gap: 32px; align-items: flex-start; }
.bn-photo-fiche { flex: 0 0 46%; }
.bn-photo-fiche img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.bn-photo-fiche:empty { aspect-ratio: 4 / 5; border-radius: 2px; background: var(--e-global-color-noirclair); }
.bn-fiche-infos { flex: 1 1 auto; display: grid; gap: 16px; }
.bn-attributs { list-style: none; margin: 0; padding: 0; display: grid; gap: .3em; color: var(--e-global-color-accent); }
.bn-attributs strong { display: inline-block; min-width: 8.5em; font-weight: 400; color: var(--e-global-color-text); }
.bn-boutons { margin: 8px 0 0; }
.bn-bouton { display: inline-block; padding: 16px 26px; border: 1px solid var(--e-global-color-primary); border-radius: 2px;
  background: var(--e-global-color-primary); color: var(--e-global-color-secondary); text-decoration: none;
  font-family: var(--e-global-typography-accent-font-family), sans-serif; font-size: var(--e-global-typography-accent-font-size);
  font-weight: var(--e-global-typography-accent-font-weight); letter-spacing: var(--e-global-typography-accent-letter-spacing);
  line-height: var(--e-global-typography-accent-line-height); text-transform: uppercase; transition: background .2s, color .2s; }
.bn-bouton:hover, .bn-bouton:focus-visible { background: var(--e-global-color-secondary); color: var(--e-global-color-primary); }
/* La couleur des liens de la charte (.elementor-kit-5 a) est plus forte que .bn-bouton seul : on précise. */
.bn-fiche a.bn-bouton { color: var(--e-global-color-secondary); }
.bn-fiche a.bn-bouton:hover, .bn-fiche a.bn-bouton:focus-visible { color: var(--e-global-color-primary); }
.bn-rubrique { display: grid; gap: 20px; padding-top: 16px; border-top: 1px solid var(--e-global-color-ligne); }
.bn-reseaux { display: flex; flex-wrap: wrap; gap: .5em 1.6em; margin: 0;
  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); letter-spacing: var(--e-global-typography-label-letter-spacing); text-transform: uppercase; }
.bn-fiche .bn-lien { color: var(--e-global-color-accent); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.bn-fiche .bn-lien:hover { color: var(--e-global-color-primary); }
.bn-spotify { display: block; border: 0; border-radius: 12px; }
.bn-soundcloud { display: block; border: 0; border-radius: 12px; }
/* Posts Instagram : léger zoom au survol, sans sortir du site */
.bn-instagram #sb_instagram { padding-bottom: 0 !important; }
.bn-instagram #sb_instagram .sbi_photo_wrap { overflow: hidden; border-radius: 2px; }
.bn-instagram #sb_instagram .sbi_photo img { transition: transform .6s ease; }
.bn-instagram #sb_instagram .sbi_item:hover .sbi_photo img { transform: scale(1.03); }
.bn-instagram #sb_instagram a { pointer-events: none; cursor: default; }

@media (max-width: 1024px) {
  .bn-colonne-liste { display: none; }
  .bn-fiche-conteneur { padding: 40px 24px 80px; }
}
@media (max-width: 767px) {
  .bn-fiche-conteneur { padding: 32px 20px 64px; }
  .bn-fiche-haut { flex-direction: column; }
  .bn-photo-fiche { flex-basis: auto; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .bn-carte .bn-photo img { transition: none; }
  .bn-carte:hover .bn-photo img { transform: none; }
}