.avis-blk[hidden] { display: none !important; }
.avis-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.avis-tete > div { min-width: 0; }
.avis-cadre { position: relative; }
.avis-piste {
  --n: 5; --gap: 14px;
  display: grid; grid-auto-flow: column; gap: var(--gap);
  grid-auto-columns: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; outline: none;
  position: relative; padding: 14px 4px 22px; margin: -10px -4px -12px;
}
.avis-piste::-webkit-scrollbar { display: none; }
.avis-piste:focus-visible { box-shadow: 0 0 0 2px var(--crimson); border-radius: 14px; }
.avis-c {
  scroll-snap-align: start; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 18px 16px 20px; border-radius: 14px;
  background: #fff; border: 1px solid var(--brd); box-shadow: var(--sh);
  position: relative; z-index: 1; isolation: isolate;
  transition: transform .42s cubic-bezier(.2,.8,.2,1), box-shadow .42s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
.avis-c::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--crimson) 22%, transparent), transparent 66%);
}
.avis-et svg { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.avis-halo {
  position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; border-radius: 18px; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--crimson) 45%, transparent), transparent);
  filter: blur(18px);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), width .5s cubic-bezier(.2,.8,.2,1), height .5s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .avis-c:hover {
    transform: translateY(-7px);
    border-color: color-mix(in srgb, var(--crimson) 45%, var(--brd));
    box-shadow: 0 22px 42px -20px rgba(9, 45, 89, .45), 0 0 0 1px color-mix(in srgb, var(--crimson) 18%, transparent);
  }
  .avis-c:hover::before { opacity: 1; }
  .avis-c:hover .avis-et svg { transform: translateY(-1px) scale(1.12); }
  .avis-c:hover .avis-et svg:nth-child(2) { transition-delay: .03s; }
  .avis-c:hover .avis-et svg:nth-child(3) { transition-delay: .06s; }
  .avis-c:hover .avis-et svg:nth-child(4) { transition-delay: .09s; }
  .avis-c:hover .avis-et svg:nth-child(5) { transition-delay: .12s; }
  .avis-piste.survol .avis-halo { opacity: 1; }
}
.avis-et { display: flex; gap: 2px; color: #F5B301; }
.avis-et svg { width: 17px; height: 17px; display: block; }
.avis-et svg.vide { color: #D3DCE8; }
.avis-nom { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: 2px 0 0;
  font-size: 15px; font-weight: 800; color: var(--navy); overflow-wrap: anywhere; }
.avis-ok { flex: 0 0 auto; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  background: var(--navy); color: #fff; }
.avis-ok svg { width: 10px; height: 10px; display: block; }
.avis-txt { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; white-space: pre-line; }
.avis-b {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--brd); background: #fff; color: var(--navy); cursor: pointer; box-shadow: var(--sh);
  transition: transform .18s ease, opacity .18s ease, border-color .18s ease;
}
.avis-b.prec { left: -18px; } .avis-b.suiv { right: -18px; }
.avis-b:hover { border-color: var(--crimson); transform: translateY(-50%) scale(1.06); }
.avis-b:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }
.avis-b[disabled] { opacity: 0; pointer-events: none; }
html[dir="rtl"] .avis-b svg { transform: scaleX(-1); }
body.dark .avis-c { background: var(--surf); border-color: #2A3648; }
body.dark .avis-c:hover { box-shadow: 0 24px 46px -18px rgba(0, 0, 0, .7), 0 0 0 1px color-mix(in srgb, var(--crimson) 28%, transparent); }
body.dark .avis-nom { color: #E4EBF5; }
body.dark .avis-txt { color: #C9D3E2; }
body.dark .avis-ok { background: #2E6BB0; }
body.dark .avis-et svg.vide { color: #39465A; }
body.dark .avis-b { background: #1E293A; border-color: #344258; color: #E4EBF5; }
@media (max-width: 1100px) { .avis-piste { --n: 4; } }
@media (max-width: 860px)  { .avis-piste { --n: 3; } }
@media (max-width: 640px) {
  .avis-piste { --n: 1.6; --gap: 12px; }
  .avis-b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .avis-piste { scroll-behavior: auto; } .avis-b, .avis-c, .avis-et svg, .avis-halo { transition: none; }
  .avis-c:hover { transform: none; } .avis-halo { display: none; }
}