/* ============================================================
   SECTION — AVIS CLIENTS
   Bande vert foncé : c'est la seule section entièrement sombre,
   elle marque une respiration entre le comparatif et la FAQ.
   Défilement horizontal sur desktop, pile verticale sur mobile.
   ============================================================ */

.reviews{
  position:relative;
  padding:72px 0 76px;
  color:var(--ink);
  background:#F8F6F1;
  overflow:hidden;
}

.reviews__head{
  position:relative; z-index:2;
  max-width:620px; margin:0 auto; text-align:center;
  padding-inline:24px;
}
.reviews__eyebrow{
  display:inline-block; margin-bottom:14px;
  font-size:10.5px; font-weight:800; letter-spacing:.16em;
  color:var(--brand);
}
.reviews__head h2{
  font-size:clamp(24px, 3vw, 34px);
  font-weight:700; line-height:1.16; letter-spacing:-.032em;
}
.reviews__head h2 em{
  font-family:var(--font-serif); font-style:italic; font-weight:500;
  color:var(--brand); font-size:1.05em; letter-spacing:-.005em;
}
.reviews__head p{
  margin-top:14px;
  font-size:12.5px; line-height:1.75; font-weight:500;
  color:var(--ink-soft);
}

/* ---------- piste horizontale ---------- */
.rv-rail{
  position:relative; z-index:1;
  margin-top:50px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.rv-track{
  display:flex; gap:18px; width:max-content;
  animation:rv-slide 62s linear infinite;
  will-change:transform;
}
/* la piste est dupliquée par scripts/reviews.js → -50% = une boucle */
@keyframes rv-slide{ to{ transform:translateX(-50%) } }
.rv-rail:hover .rv-track{ animation-play-state:paused }

/* ---------- carte ---------- */
.rv{
  position:relative; flex:0 0 auto;
  width:352px; padding:24px 24px 26px;
  border-radius:18px;
  background:#FBFAF7;
  color:var(--ink);
  box-shadow:0 0 0 1px #E9E7E1 inset, 0 14px 30px -22px rgba(15,25,20,.3);
  transition:transform .5s var(--ease-out), box-shadow .5s ease;
}
.rv:hover{
  transform:translateY(-8px);
  box-shadow:0 0 0 1px rgba(9,73,47,.35) inset, 0 28px 46px -26px rgba(9,73,47,.4);
}

/* guillemet décoratif */
.rv::after{
  content:"”";
  position:absolute; top:14px; right:20px;
  font-family:var(--font-serif);
  font-size:58px; line-height:1;
  color:rgba(9,73,47,.11);
  pointer-events:none;
}

.rv__top{ display:flex; align-items:center; gap:12px }
.rv__avatar{
  flex:0 0 42px; display:grid; place-items:center;
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(150deg, #12704A, #062A1B);
  color:#fff;
  font-size:14px; font-weight:700; letter-spacing:.02em;
}
.rv__who{ min-width:0 }
.rv__name{ font-size:13.5px; font-weight:700; letter-spacing:-.02em }
.rv__role{
  margin-top:2px;
  font-size:10.5px; font-weight:600; letter-spacing:.01em;
  color:var(--ink-mute);
}

.rv__stars{ display:flex; align-items:center; gap:3px; margin-top:16px }
.rv__stars svg{ width:13px; height:13px; fill:var(--brand-soft) }
.rv__note{
  margin-left:6px;
  font-family:var(--font-mono);
  font-size:11px; font-weight:600; color:var(--brand);
}

.rv__text{
  margin-top:14px;
  font-size:12.5px; line-height:1.72; font-weight:500;
  color:#4E5651;
}

/* ---------- mobile : pile verticale ---------- */
@media (max-width:820px){
  .reviews{ padding:56px 0 60px }
  .rv-rail{
    margin-top:38px;
    overflow:visible;
    -webkit-mask-image:none; mask-image:none;
  }
  .rv-track{
    display:grid; gap:12px; width:auto;
    padding-inline:16px;
    animation:none;
  }
  .rv{ width:100%; max-width:520px; margin:0 auto }
}
@media (max-width:640px){
  .reviews__head p{ font-size:11.5px }
  .rv{ padding:20px 20px 22px }
  .rv__text{ font-size:12px }
}

@media (prefers-reduced-motion:reduce){
  .rv-track{ animation:none }
}