/* Virtual Hall® — Finitions visuelles 1.0.0 */

/* 1. Portraits des cartes interprètes et compositeurs : un seul format, carré.
   L’image remplit le cadre sans déformation ; le cadrage remonte légèrement pour garder les visages. */
a.flex.flex-col[href*="/interpreter/"] > img.rounded-2xl,
a.flex.flex-col[href*="/composer/"] > img.rounded-2xl {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 22%;
  background-color: #f3f1f6;
}

/* Carte sans photo : même format que les autres. */
a.flex.flex-col[href*="/interpreter/"] > div.rounded-2xl.bg-gray-200,
a.flex.flex-col[href*="/composer/"] > div.rounded-2xl.bg-gray-200 {
  aspect-ratio: 1 / 1;
  min-height: 0;
}

/* 2. Logo Cybel’Art du pied de page : lien discret, focus visible au clavier. */
#footer-partner a.vh-partner-logo-link {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  transition: opacity 0.2s ease;
}
#footer-partner a.vh-partner-logo-link:hover {
  opacity: 0.82;
}
#footer-partner a.vh-partner-logo-link:focus-visible {
  outline: 2px solid #7b4fd6;
  outline-offset: 4px;
}

/* 3. Accueil : même grille et même format dans les trois onglets (5/4/3 colonnes). */
#main-content [x-data*="activeTab"] [x-show*="composers"] .listing-swiper .swiper-wrapper,
#main-content [x-data*="activeTab"] .vh-production-grid {
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2rem 1.25rem;align-items:start;
}
#main-content [x-data*="activeTab"] [x-show*="composers"] .swiper-slide > a {gap:.8rem;display:flex;flex-direction:column;align-items:stretch}
#main-content [x-data*="activeTab"] [x-show*="composers"] .swiper-slide > a > img {
  width:100% !important;height:auto !important;aspect-ratio:1/1;object-fit:cover;object-position:50% 22%;
}
#main-content [x-data*="activeTab"] [x-show*="composers"] .swiper-slide h3,
.vh-production-card h3 {font-size:clamp(15px,1.2vw,18px);line-height:1.25;font-weight:600;margin:0}
.vh-production-card {display:flex;flex-direction:column;gap:.8rem;min-width:0;color:#24212b;text-decoration:none}
.vh-production-image {position:relative;display:block;width:100%;aspect-ratio:1/1;margin:0;overflow:hidden;border-radius:16px;background:#f3f1f6}
.vh-production-image img {display:block;width:100%;height:100%;object-fit:cover}
.vh-production-historic {position:absolute;top:8px;right:8px;max-width:calc(100% - 16px);padding:5px 7px;background:rgba(22,20,35,.94);color:white;font:600 10px/1.2 sans-serif;border:1px solid #e9d4aa;border-radius:6px;text-align:center}
.vh-production-work {margin:0;font-size:14px;line-height:1.35;font-weight:500}
.vh-production-facts {margin:0;font-size:12px;line-height:1.4;color:#706a79}
.vh-production-facts div {display:block;margin:0 0 5px}.vh-production-facts dt {font-weight:600;display:inline;margin-right:6px}.vh-production-facts dd {display:inline;margin:0}
.vh-production-card:focus-visible {outline:2px solid #6e468c;outline-offset:5px;border-radius:16px}
.vh-production-card:hover h3 {color:#714a91}
@media(max-width:1023px){
 #main-content [x-data*="activeTab"] [x-show*="composers"] .listing-swiper .swiper-wrapper,
 #main-content [x-data*="activeTab"] .vh-production-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem 1rem}
}
@media(max-width:767px){
 #main-content [x-data*="activeTab"] [x-show*="composers"] .listing-swiper .swiper-wrapper,
 #main-content [x-data*="activeTab"] .vh-production-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem .7rem}
 #main-content [x-data*="activeTab"] [x-show*="composers"] .swiper-slide > a {gap:.5rem}
 #main-content [x-data*="activeTab"] [x-show*="composers"] .swiper-slide > a > img {width:100% !important;height:auto !important;aspect-ratio:1/1}
 #main-content [x-data*="activeTab"] [x-show*="composers"] .swiper-slide h3,
 .vh-production-card h3 {font-size:clamp(11.5px,3.3vw,13.5px);line-height:1.25}
 .vh-production-card {gap:.5rem}.vh-production-work {font-size:11.5px}.vh-production-facts {font-size:10.5px}
 .vh-production-historic {font-size:8px;top:5px;right:5px;padding:4px 5px}
}

/* Compositeurs : aucune légende ne déborde sur la carte voisine. */
#main-content [x-data*="activeTab"] [x-show*="composers"] .swiper-slide h3 {white-space:normal !important;overflow-wrap:break-word;max-width:100%;min-width:0}

/* Anciennes cartes liées : aucun lieu décalé dans une deuxième colonne vide. */
a[href*="/concert/"] > .vh-legacy-card-heading {min-height:0 !important}
a[href*="/concert/"] > .vh-legacy-card-facts {display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;margin-top:12px;text-align:left;min-width:0}
a[href*="/concert/"] > .vh-legacy-card-facts > div {margin:0;min-width:0;max-width:100%;overflow-wrap:break-word;white-space:normal}
a[href*="/concert/"] > .vh-legacy-card-facts > .flex {align-items:flex-start;gap:8px}
a[href*="/concert/"] > .vh-legacy-card-facts svg {flex:0 0 12px;width:12px;height:12px;margin-top:3px}

/* Introduction brève conservée, sans encart. */
.vh-concert-intro {margin:0;padding:0;border:0;background:transparent;color:inherit;font-size:1rem;line-height:1.6;max-width:68ch}
@media(min-width:1024px){.vh-concert-intro{font-size:1.125rem}}
/* Direction : même entrée que Date / Lieu / Style, jamais un panneau distinct. */
.vh-concert-facts .vh-concert-fact[data-fact="direction"] {display:block !important;grid-column:auto !important;min-width:0;margin:0 !important;padding:0 !important;background:transparent !important;border:0 !important;box-shadow:none !important}
.vh-concert-facts .vh-concert-fact[data-fact="direction"] dt {display:block;margin:0 0 5px !important;padding:0 !important;font-size:12px !important;line-height:1.3 !important;font-weight:500 !important;letter-spacing:.14em !important;text-transform:uppercase;color:#6b7280 !important;background:none !important;border:0 !important}
.vh-concert-facts .vh-concert-fact[data-fact="direction"] dd {display:block;margin:0 !important;padding:0 !important;font-size:16px !important;line-height:1.45 !important;font-weight:600 !important;color:#1f2023 !important;background:none !important;border:0 !important}
.vh-concert-facts .vh-concert-fact[data-fact="direction"] dd a {font:inherit !important;color:inherit !important;text-decoration:underline !important;text-decoration-thickness:1px;text-underline-offset:.16em}
.vh-concert-facts .vh-concert-fact[data-fact="direction"] dd a:focus-visible {outline:2px solid currentColor;outline-offset:3px}