/* AFFINER (affiner-collections 02/10): the computed bubbles of a collection (inc/affiner.php). Same look as the
   bubbles of design-collection.css (.dk-bulles), plus a plaster background behind the photo and targets of 44 px.
   Romain 02/10 11 h 24 (« prend trop de place, j'aurais voulu un scroll »): ONE row at every size. Computer and tablet:
   discreet arrows (thin rule, Editorial style) shown by assets/js/affiner.js when the row overflows, and a soft fade on
   the edge that hides more bubbles (never a bubble cut sharp). Phone: the finger, a fade on the right edge and
   « faites glisser ». Also: the collage scene tiles fill their frame (.af-scene). */
.af-bulles { align-items: center; }
.af-rail { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.af-bulles ul { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; }
.af-bulles ul::-webkit-scrollbar { display: none; }
.af-bulles li { scroll-snap-align: start; }
.af-bulles.af-d ul { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 4.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 4.5rem), transparent); }
.af-bulles.af-g ul { -webkit-mask-image: linear-gradient(to right, transparent, #000 4.5rem); mask-image: linear-gradient(to right, transparent, #000 4.5rem); }
.af-bulles.af-g.af-d ul { -webkit-mask-image: linear-gradient(to right, transparent, #000 4.5rem, #000 calc(100% - 4.5rem), transparent); mask-image: linear-gradient(to right, transparent, #000 4.5rem, #000 calc(100% - 4.5rem), transparent); }
.af-bulles .dk-bulle { min-height: 44px; min-width: 44px; padding-block: 0.15rem; }
.af-bulles .dk-bulle__rond { background: var(--platre, #efeeea); }
.af-bulles .dk-bulle__nom { overflow-wrap: anywhere; hyphens: auto; }
.af-fleche { position: absolute; top: 1.35rem; z-index: 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--trait, #d7d5cf); border-radius: 50%; background: var(--platre, #efeeea); color: var(--anthracite, #2b2d31); cursor: pointer; transition: border-color 0.2s ease; }
.af-fleche[hidden] { display: none; }
.af-fleche:hover { border-color: var(--anthracite, #2b2d31); }
.af-fleche:focus-visible { outline: 3px solid var(--moutarde, #d4a017); outline-offset: 2px; }
.af-fleche--g { left: -0.4rem; }
.af-fleche--d { right: -0.4rem; }
.af-scene img, .dk-col .af-scene img { object-fit: cover; background: none; }

@media (max-width: 900px) {
  .af-bulles { flex-wrap: wrap; row-gap: 0.45rem; }
  .af-bulles .dk-bulles__lib { display: block; flex: 0 0 100%; }
  .af-bulles ul { gap: 0.6rem; }
  .af-bulles .dk-bulle { width: 5.9rem; }
  .af-bulles .dk-bulle__rond { width: 58px; height: 58px; }
  .af-bulles .dk-bulle__nom { max-width: 5.9rem; font-size: 0.74rem; line-height: 1.2; }
  .af-bulles .dk-bulle__n { font-size: 0.68rem; }
  .af-fleche { top: 1rem; }
}

@media (max-width: 640px) {
  .af-fleche { display: none !important; }
  .af-bulles ul { padding-right: var(--gutter, 1rem); }
  .af-bulles.af-g ul, .af-bulles.af-g.af-d ul { -webkit-mask-image: none; mask-image: none; }
  .af-bulles.af-d ul { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); }
  .af-bulles .dk-bulle { width: calc((100vw - var(--gutter, 1rem)) / 3.5 - 0.6rem); }
  .af-bulles .dk-bulle__nom { max-width: none; }
  .af-bulles:has(li:nth-child(4)) .dk-bulles__lib::after { content: " · faites glisser \2192"; font-weight: 400; letter-spacing: 0.04em; text-transform: none; }
}
@media (prefers-reduced-motion: reduce) { .af-bulles ul { scroll-behavior: auto; } .af-fleche { transition: none; } }