/* ==========================================================================
   Jeanne Arte — reviews.css · the client-reviews component (js/reviews.js).
   Used by the home page and by any page that mounts SiteReviews (product
   pages). If a page forgets to link this file, reviews.js adds it.
   Shared form pieces (.form, .field, .input, .btn, dialog.sheet …) are in
   site.css; only what is particular to reviews is here. Classes: .rv-…
   ========================================================================== */

/* ---------------------------------------------------------------- layout 'quotes'
   Big italic quotes, one after another, with a short hairline between them,
   signed « NAME · 10/10 » in tracked capitals. */
.rv-quote { margin: var(--s5) auto 0; max-width: 33em; }
.rv-quote + .rv-quote::before {
  content: '';
  display: block;
  width: 48px;
  height: 1px;
  margin: 0 auto var(--s5);
  background: var(--line-2);
}
.rv-quote blockquote {
  margin: 0;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--text-strong);
}
.rv-quote figcaption { margin-top: var(--s2); }

/* ---------------------------------------------------------------- layout 'list'
   Full texts, each headed by a leader line « Name ……… 9/10 » and its month. */
.rv-list { text-align: left; }
.rv-item { padding-block: var(--s3); }
.rv-item + .rv-item { border-top: 1px solid var(--line); }
.rv-item__head { font-size: var(--fs-h3); line-height: 1.35; color: var(--text-strong); }
.rv-item__date { margin-top: 2px; font-size: var(--fs-small); }
.rv-item__text { margin: var(--s2) 0 0; }
.rv-item__text p + p { margin-top: .75em; }
.rv-more { margin-top: var(--s3); }

.rv-empty { margin-top: var(--s4); }

/* ---------------------------------------------------------------- « Laisser un avis » */
.rv__cta { margin-top: var(--s5); }
.rv-list + .rv__cta,
.rv-more + .rv__cta { margin-top: var(--s3); }
button.link {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--serif);
  cursor: pointer;
}
.rv__thanked { font-style: italic; color: var(--text-muted); }

/* ---------------------------------------------------------------- the form sheet */
.rv-sheet {
  padding-top: var(--s6);
  text-align: left;
  overscroll-behavior: contain;
}
.rv-sheet__title {
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  line-height: 1.15;
}
.rv-sheet__intro { margin-top: var(--s1); font-size: var(--fs-small); }
.rv-sheet .form { margin-top: var(--s4); }
.rv-sheet .form__send { width: 100%; }
@media (min-width: 560px) { .rv-sheet .form__send { width: auto; justify-self: start; min-width: 240px; } }
.rv-sheet__done { margin-top: var(--s4); font-size: var(--fs-lead); font-style: italic; color: var(--text-strong); }
.rv-sheet__done:focus { outline: none; }
.rv-sheet__done + .btn { margin-top: var(--s4); }
@media (max-width: 399px) {
  /* ten 44 px rating targets in rows of five need the room */
  dialog.rv-sheet { padding-inline: var(--s2); }
}

/* the 1–10 rating: real radios, visually hidden; the number is the target */
.rv-rate { min-width: 0; margin: 0; padding: 0; border: 0; }
.rv-rate legend { padding: 0; }
.rv-rate__row {
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: 6px;
}
@media (min-width: 560px) {
  .rv-rate__row { grid-template-columns: repeat(10, minmax(0, 1fr)); }
}
.rv-rate__opt { position: relative; display: flex; }
.rv-rate__opt input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.rv-rate__opt span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--field);
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--text-strong);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  pointer-events: none;
  transition: background-color .2s, border-color .2s, color .2s;
}
.rv-rate__opt:hover span { border-color: var(--text-strong); }
.rv-rate__opt input:checked + span {
  background: var(--selected);
  border-color: var(--selected);
  color: var(--selected-text);
}
.rv-rate__opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.rv-rate[aria-invalid="true"] .rv-rate__opt span { border-color: var(--error); }

/* checkboxes (newsletter, consent) */
.rv-check {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 48px;
  padding: 4px 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--text-strong);
  cursor: pointer;
}
.rv-check input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 1px 0 0;
  accent-color: var(--btn-bg);
  cursor: pointer;
}
.rv-check input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }
.rv-check + .field__error { margin-top: -8px; }

/* scroll-margin: js/reviews.js scrolls the sheet to this line after a refusal; keep air under it */
.rv-form .form__status { font-style: italic; color: var(--accent); scroll-margin-bottom: var(--s3); }
.rv-form .form__status:empty { display: none; }
.rv-form .form__status.is-error { font-style: normal; color: var(--error); }

@media print {
  .rv__cta, .rv-sheet, .rv-more { display: none !important; }
}