/* ===========================================
   GALLERY BAND COMPONENT — library/gallery_band.py
   Every work for sale in one horizontal strip.
   At rest: the work in context (2nd image in canvas order);
   on hover: the work alone, then the 3rd image (2 s each, cross-fade).
   Validated with Arnaud on 2026-10-20 (projects/UI, maquette v5).
   =========================================== */

.gallery-band {
  --gb-h: var(--gb-h-opt, 420px);
  /* Les navigateurs mobiles grossissent le texte des blocs larges, et pas des étroits :
     les cartels n'avaient plus la même taille d'une vignette à l'autre. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  --gb-line: #e2e2dd;
  --gb-muted: #696964;
  --gb-bg: #ffffff;
  margin: 1.5em 0 2.5em;
  position: relative;
}

/* Filtres (option C, Arnaud 2026-10-20) : l'ordre et un bouton « Filtrer » sur une ligne ;
   le bouton ouvre les listes. Le titre de chaque liste est sa première option, pas une
   étiquette au-dessus. Même logique sur ordinateur et sur téléphone. */
.gb-bar { display: grid; gap: 10px; margin-bottom: 14px; }
.gb-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.gb-filters { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.gb-filters[hidden] { display: none; }
.gb-f { display: block; }
.gb-f > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gb-f select, .gb-toggle {
  font: inherit; font-size: 14px; color: var(--black, #1a1a1a); background: var(--gb-bg);
  border: 1px solid var(--gb-line); border-radius: 6px; padding: 6px 10px; max-width: 240px;
}
.gb-f select.gb-on { border: 1.5px solid var(--black, #1a1a1a); font-weight: 600; }
.gb-toggle { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.gb-toggle[aria-expanded="true"], .gb-toggle.gb-on { border: 1.5px solid var(--black, #1a1a1a); }
.gb-toggle.gb-on { font-weight: 600; }
.gb-toggle .gb-chev { display: inline-block; transition: transform .2s; }
.gb-toggle[aria-expanded="true"] .gb-chev { transform: rotate(180deg); }
/* cm | in : deux boutons ; l'unité active a un contour épais et du gras, pas seulement une couleur */
.gb-units { display: inline-flex; border: 1px solid var(--gb-line); border-radius: 6px; overflow: hidden; }
.gb-units button { font: inherit; font-size: 14px; color: var(--black, #1a1a1a); background: var(--gb-bg); border: 0; padding: 6px 10px; cursor: pointer; }
.gb-units button + button { border-left: 1px solid var(--gb-line); }
.gb-units button[aria-pressed="true"] { font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--black, #1a1a1a); }
.gb-tools .gb-toggle { margin-left: auto; }
.gb-count { margin: 0; font-size: 14px; color: var(--gb-muted); font-variant-numeric: tabular-nums; }
.gb-count [data-gb-count] { color: var(--black, #1a1a1a); font-weight: 600; }
.gb-reset { margin-left: 10px; border: 0; background: none; padding: 0; font: inherit; color: var(--black, #1a1a1a); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* La bande */
.gb-stage { position: relative; }
.gb-strip {
  display: flex; align-items: flex-start; gap: 22px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 4px 2px 14px; scrollbar-width: thin;
}
.gb-strip:focus-visible { outline: 2px solid var(--black, #1a1a1a); outline-offset: 4px; }
.gb-work { flex: none; display: grid; gap: 6px; align-self: flex-start; align-content: start; grid-template-rows: auto auto; scroll-snap-align: start; text-decoration: none; color: inherit; }
.gb-work[hidden] { display: none; }
.gb-work:focus-visible { outline: 2px solid var(--black, #1a1a1a); outline-offset: 3px; }
.gb-pic { display: block; position: relative; overflow: hidden; height: var(--gb-h); background: var(--gb-line); }
.gb-pic > img { display: block; height: 100%; width: auto; }
.gb-pic .gb-alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--gb-bg); opacity: 0; transition: opacity .9s ease; }
.gb-pic .gb-alt.on { opacity: 1; }
.gb-pic .gb-alt.gb-contain { object-fit: contain; }   /* l'œuvre seule, jamais recadrée */
.gb-dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; opacity: 0; transition: opacity .3s; }
.gb-work:hover .gb-dots, .gb-work:focus-visible .gb-dots { opacity: 1; }
.gb-dots i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 0 2px rgba(0,0,0,.6); }
.gb-dots i.on { background: #fff; }

/* Cartel (Arnaud, 2026-10-20) : compact comme un cartel de musée. Un seul corps,
   une seule graisse, une seule couleur, aucune ligne vide entre le titre et le reste. */
.gb-cap, .gb-t, .gb-d, .gb-p {
  font-size: 13px; font-weight: 400; font-style: normal; line-height: 1.35;
  color: var(--black, #1a1a1a); text-decoration: none;
}
.gb-cap { display: grid; gap: 0; align-content: start; width: 0; min-width: 100%; margin: 0; text-align: left; justify-items: start; }
.gb-t, .gb-d, .gb-p { display: block; margin: 0; padding: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

.gb-arrow {
  position: absolute; top: calc(4px + var(--gb-h) / 2); transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--gb-line); background: var(--gb-bg);
  cursor: pointer; font-size: 22px; line-height: 1; color: var(--black, #1a1a1a);
}
.gb-l { left: 8px; }
.gb-r { right: 8px; }
.gb-arrow[disabled] { opacity: 0; pointer-events: none; }
.gb-none { color: var(--gb-muted); padding: 24px 0; }

@media (prefers-reduced-motion: reduce) { .gb-pic .gb-alt { transition: none; } }
@media (max-width: 640px) {
  .gallery-band { --gb-h: 240px; }
  .gb-strip { gap: 14px; }
  .gb-arrow { display: none; }
  .gb-f select { max-width: 46vw; }
}

/* Bande sans barre, à la fin d'une page d'œuvre (T14, library/related_artworks.py) :
   le fond des images de survol prend le gris de la section. */
.related-works .gallery-band { --gb-bg: #f7f7f5; --gb-h: 420px; margin: 0; text-align: left; }   /* même hauteur que la galerie */
@media (max-width: 640px) { .related-works .gallery-band { --gb-h: 240px; } }