.avis{
  --avis-w:320px;
  --avis-gap:1rem;
  padding-block:clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid var(--trait);
}
.avis__tete{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.5rem clamp(1rem,2.5vw,2rem);
  margin-bottom:clamp(1.3rem,2.6vw,2rem);
}
.avis__tete h2,.avis__tete p{margin:0}
.avis__source{
  font-family:var(--titre);font-weight:600;
  font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent-clair);font-variant-numeric:tabular-nums;
  text-decoration:none;
}
a.avis__source:hover{color:var(--encre)}
.avis__fleche{margin-inline-start:.35em}
.avis-cadre{position:relative;overflow:hidden}
.avis-cadre::before,.avis-cadre::after{
  content:"";position:absolute;inset-block:0;
  width:clamp(20px,5vw,72px);z-index:var(--z-texte);pointer-events:none;
}
.avis-cadre::before{left:0;background:linear-gradient(to right,var(--fond),transparent)}
.avis-cadre::after{right:0;background:linear-gradient(to left,var(--fond),transparent)}
.avis-piste{
  display:flex;width:max-content;
  animation:avis-defile calc(var(--avis-n,12) * 13.44s) linear infinite;
}
.avis-cadre:hover .avis-piste,
.avis-cadre:focus-within .avis-piste,
.avis--touche .avis-piste{animation-play-state:paused}
@keyframes avis-defile{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.avis-lot{
  display:flex;gap:var(--avis-gap);
  margin:0;margin-inline-end:var(--avis-gap);padding:0;list-style:none;
}
.avis-carte{width:var(--avis-w);flex:none;display:flex}
.avis-carte__lien{
  display:flex;flex-direction:column;gap:.45rem;
  width:100%;padding:1.1rem 1.2rem;
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-l);
  color:var(--encre);text-decoration:none;
  transition:background var(--duree-survol) var(--courbe),
             border-color var(--duree-survol) var(--courbe);
}
a.avis-carte__lien:hover{background:var(--surface-haute);border-color:var(--accent-trait)}
a.avis-carte__lien:focus-visible{outline:2px solid var(--accent-clair);outline-offset:2px}
.avis-carte__etoiles{display:flex;gap:.14rem;color:var(--accent-clair)}
.avis-carte__etoiles svg{width:16px;height:16px;flex:none}
.avis-etoile--vide{display:inline-flex;opacity:.26}
.avis-carte__auteur{
  font-family:var(--titre);font-weight:600;font-size:.98rem;
  line-height:1.2;color:var(--encre);
}
.avis-carte__date{font-size:.78rem;letter-spacing:.02em;color:var(--encre-douce)}
.avis-carte__texte{font-size:.9rem;line-height:1.5;color:var(--encre-douce)}
.avis-carte__sans-mot{font-size:.86rem;font-style:italic;color:var(--encre-douce)}
.avis-carte__pied{
  margin-top:auto;padding-top:.5rem;
  font-family:var(--titre);font-weight:600;font-size:.76rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent-clair);
}
@media (min-width:941px){
  .avis-cadre{padding-block:24px}
  .avis-piste{position:relative;perspective:1200px}
  .avis-carte{perspective:900px}
  .avis-carte__lien{
    transform:rotateY(var(--avis-angle,0deg)) scale(var(--avis-echelle,1));
    transform-origin:center;border-top-color:var(--trait-fort);
    box-shadow:0 12px 24px -14px var(--halo-demo);
  }
  .avis-carte.demo-avis-loin .avis-carte__lien{background:var(--fond-creux)}
}
@media (prefers-reduced-motion:reduce){
  .avis-carte__lien{transform:none;animation:none;transition:none}
}
@media (max-width:560px){
  .avis{
    --avis-w:calc(100vw - 2 * var(--gouttiere) - 18px);
    --avis-gap:var(--gouttiere);
  }
  .avis-piste{animation:none;padding-inline:var(--gouttiere)}
  .avis-cadre{
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gouttiere);
  }
  .avis-cadre::before,.avis-cadre::after{display:none}
  .avis-carte{scroll-snap-align:start}
  .avis-lot[aria-hidden="true"]{display:none}
  .avis-lot:not([aria-hidden="true"]) > .avis-carte:nth-child(n+7){display:none}
}
@media (prefers-reduced-motion:reduce){
  .avis-piste{animation:none;padding-inline:var(--gouttiere)}
  .avis-cadre{
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gouttiere);
  }
  .avis-cadre::before,.avis-cadre::after{display:none}
  .avis-carte{scroll-snap-align:start}
  .avis-lot[aria-hidden="true"]{display:none}
}
.avis--repli{padding-block:clamp(2rem,4vw,3rem)}
.avis-repli{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin:1rem 0 0;font-size:.97rem;line-height:1.55;color:var(--encre);
}
.avis-repli .tuile__cle,.avis-repli .tuile__etoiles{margin-bottom:0}
.avis-repli a{color:var(--accent-clair)}
.avis-repli a:hover{color:var(--encre)}
