/* Les messages forment un jeu de cartes, dans la matière du quiz et du ticket. */
.frame.frame--scene .avis-clients {
  padding:64px 20px 60px;
  border-top:1px solid var(--fin-contour, #dcd7ce);
  background:#f7f5f1;
  color:#1a1813;
  scroll-margin-top:24px;
  overflow:clip;
}
.avis-intro { margin-bottom:44px; }
.avis-kicker { margin:0 0 16px; color:#706b61; font:500 11px/1.4 var(--mono); letter-spacing:.11em; text-transform:uppercase; }
.avis-titre { margin:0; font:600 clamp(30px,7.8cqw,40px)/1.12 var(--gab); letter-spacing:-.028em; text-wrap:balance; }
.avis-liste { position:relative; display:grid; gap:24px; isolation:isolate; }
.avis-client {
  position:relative; display:flex; flex-direction:column; min-width:0; margin:0; padding:28px 24px;
  border:1px solid #ded8ce; border-radius:20px; background:#fffdf9;
  box-shadow:0 2px 3px rgba(26,24,19,.03),0 14px 24px -20px rgba(26,24,19,.3);
}
.avis-extrait { margin:0 0 28px; color:#1a1813; font:400 22px/1.42 'Hanken Grotesk',sans-serif; letter-spacing:-.015em; text-wrap:pretty; }
.avis-extrait p { margin:0; }
.avis-extrait p::before { content:'« '; color:#b53914; }
.avis-extrait p::after { content:' »'; color:#b53914; }
.avis-extrait strong { color:#1a1813; font-weight:650; text-decoration:underline; text-decoration-color:#fb4d17; text-decoration-thickness:2px; text-underline-offset:4px; }
.avis-client figcaption { display:grid; gap:4px; margin-top:auto; padding-bottom:0; }
.avis-client figcaption b { font:600 21px/1.2 var(--gab); }
.avis-client figcaption span { color:#706b61; font:400 13px/1.4 'Hanken Grotesk',sans-serif; }

/* Les trois cartes réelles occupent la même case ; la plus haute réserve la place. */
.avis-liste.is-deck { margin:0 8px; gap:0; clip-path:inset(-40px); }
.avis-liste.is-deck .avis-client { grid-area:1/1; align-self:stretch; transform-origin:50% 85%; }
.avis-client[data-rang='0'] { z-index:3; transform:none; box-shadow:0 1px 2px rgba(26,24,19,.04),0 22px 36px -24px rgba(26,24,19,.38); }
.avis-client[data-rang='1'] { z-index:2; transform:translate(9px,-12px) rotate(3deg) scale(.97); background:#f0ece5; }
.avis-client[data-rang='2'] { z-index:1; transform:translate(-9px,-22px) rotate(-3deg) scale(.95); background:#e7e1d7; }
.avis-client[aria-hidden='true']:not(.is-sortante,.is-entrante) > * { visibility:hidden; }
.avis-liste.is-deck .avis-client[aria-hidden='true'] { pointer-events:none; }
.avis-client:is(.is-sortante,.is-entrante) { background:#fffdf9; }
.avis-liste.is-deck { touch-action:pan-y pinch-zoom; }
.avis-liste.is-dragging { user-select:none; cursor:grabbing; }
.avis-navigation { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:28px; }
.avis-navigation[hidden] { display:none; }
.avis-fleches { display:flex; gap:8px; }
.avis-fleches button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #cfc6ba; border-radius:50%; background:transparent; color:#1a1813; cursor:pointer; }
.avis-fleches button:last-child { background:#1a1813; border-color:#1a1813; color:#fffdf9; }
.avis-fleches svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
:is(.avis-clients, .qz-avis) button:focus-visible { outline:2px solid #fb4d17; outline-offset:4px; }
.avis-fleches button:active { transform:scale(.94); }

/* Même voix dans le quiz, avec une citation courte dans la carte de résultat. */
.qz-avis { margin:2px 0 0; padding:18px 0 0; border-top:1px solid #494139; color:#f6f1e8; }
.qz-avis .avis-extrait { margin-bottom:14px; color:#c5bcae; font-size:16px; line-height:1.5; letter-spacing:0; }
.qz-avis .avis-extrait strong { color:#f6f1e8; text-decoration-color:#ff966f; text-decoration-thickness:1px; text-underline-offset:3px; }
.qz-avis .avis-extrait p::before, .qz-avis .avis-extrait p::after { color:#ff966f; }
.qz-avis figcaption { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; font:400 12px/1.4 'Hanken Grotesk',sans-serif; color:#bfb5a6; }
.qz-avis figcaption b { font:600 15px/1.3 var(--gab); color:#f6f1e8; }

@media (hover:hover) and (pointer:fine) {
  .avis-fleches button:hover { border-color:#1a1813; background:#e7e1d7; color:#1a1813; }
  .avis-fleches button:last-child:hover { border-color:#fb4d17; background:#fb4d17; color:#1a1813; }
}
@media (prefers-reduced-motion:no-preference) {
  .avis-fleches button { transition:transform .14s var(--ease-out),background-color .14s ease-out,border-color .14s ease-out; }
}
@container (min-width:900px) {
  .frame.frame--scene .avis-clients {
    display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); grid-template-rows:1fr auto 1fr; column-gap:8cqw;
    padding:clamp(108px,10cqw,152px) max(40px,6cqw,calc((100cqw - 1360px)/2));
  }
  .avis-intro { grid-column:1; grid-row:1/3; align-self:end; margin:0 0 32px; }
  .avis-kicker { margin-bottom:20px; font-size:12px; }
  .avis-titre { max-width:9em; font-size:clamp(40px,3.8cqw,56px); }
  .avis-liste { grid-column:2; grid-row:1/4; }
  .avis-liste.is-deck { margin:0 12px; }
  .avis-client { padding:36px; min-height:304px; }
  .avis-client[data-rang='1'] { transform:translate(14px,-16px) rotate(4deg) scale(.97); }
  .avis-client[data-rang='2'] { transform:translate(-18px,-24px) rotate(-5deg) scale(.96); }
  .avis-extrait { font-size:clamp(24px,2cqw,29px); margin-bottom:32px; }
  .avis-client figcaption b { font-size:23px; }
  .avis-navigation { grid-column:1; grid-row:3; align-self:start; justify-content:flex-start; gap:24px; margin:0; }
}