/* reviews.css — optimea. Habillage du bloc d'avis statique rendu par reviews.js.
   Couleurs prises sur le thème quand elles existent. ATTENTION : Minimog stocke des TRIPLETS RGB
   ("35,50,80"), pas des couleurs — d'où rgb(var(--x, a,b,c)) avec un repli lui aussi en triplet.
   Écrire var(--color-button, #1f2937) donnerait une valeur invalide, et une var invalide ne retombe
   PAS sur le repli du var() : la propriété serait réinitialisée. */

.rv { max-width: 1140px; margin: 48px auto; padding: 0 16px; }
.rv__title { font-size: 22px; font-weight: 600; margin: 0 0 24px; text-align: center; }
.rv__empty { color: #777; text-align: center; }

.rv-stars { display: inline-flex; gap: 2px; line-height: 1; }
.rv-star { color: #d8d8d8; font-size: 15px; }
.rv-star.-on { color: rgb(var(--color-button, 31,41,55)); }

.rv-summary {
  display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 32px; align-items: center;
  padding: 24px; border: 1px solid #ececec; border-radius: 5px; margin-bottom: 32px;
}
.rv-summary__score { text-align: center; }
.rv-summary__avg { font-size: 40px; font-weight: 600; line-height: 1.1; }
.rv-summary__count { color: #888; font-size: 13px; margin-top: 6px; }

.rv-bar { display: grid; grid-template-columns: 34px 1fr 32px; gap: 10px; align-items: center; margin: 4px 0; }
.rv-bar__label { font-size: 12px; color: #666; white-space: nowrap; }
.rv-bar__track { background: #eee; border-radius: 999px; height: 7px; overflow: hidden; }
.rv-bar__fill { display: block; height: 100%; background: rgb(var(--color-button, 31,41,55)); }
.rv-bar__n { font-size: 12px; color: #888; text-align: right; }

.rv__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.rv-card { border: 1px solid #ececec; border-radius: 5px; padding: 18px; }
.rv-card__head { display: flex; justify-content: space-between; align-items: center; }
.rv-card__date { color: #999; font-size: 12px; }
.rv-card__who { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; }
.rv-card__author { font-weight: 600; font-size: 14px; }
.rv-card__badge {
  font-size: 11px; color: #fff; background: #1f9d55; border-radius: 3px; padding: 2px 6px; white-space: nowrap;
}
.rv-card__text { margin: 0; font-size: 14px; line-height: 1.6; color: #333; }

/* « Voir plus » d'un avis tronqué. Un LIEN, pas un bouton plein : il est adjacent au bouton
   « Charger plus » (qui, lui, charge la page d'avis suivante), et deux boutons pleins côte à côte
   se confondent. La couleur reprend celle du thème — Minimog stocke des TRIPLETS RGB, d'où le
   `rgb(var(--color-button, 31,41,55))`. */
.rv-card__toggle {
  margin-top: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600;
  color: rgb(var(--color-button, 31,41,55));
  text-decoration: underline; text-underline-offset: 3px;
}
.rv-card__toggle:hover { opacity: .75; }
.rv-card__toggle:focus-visible { outline: 2px solid rgb(var(--color-button, 31,41,55)); outline-offset: 3px; }
.rv-card__photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rv-card__photos img { width: 76px; height: 76px; object-fit: cover; border-radius: 4px; background: #f4f4f4; }

.rv__more {
  display: block; margin: 28px auto 0; padding: 11px 28px; cursor: pointer;
  background: transparent; border: 1px solid rgb(var(--color-button, 31,41,55));
  color: rgb(var(--color-button, 31,41,55)); border-radius: 5px; font: inherit; font-weight: 500;
}
.rv__more:hover { background: rgb(var(--color-button, 31,41,55)); color: rgb(var(--color-button-text, 255,255,255)); }
.rv__more[hidden] { display: none; }

@media (max-width: 760px) {
  .rv-summary { grid-template-columns: 1fr; gap: 20px; }
  .rv__list { grid-template-columns: 1fr; }
}

/* ====================== FORMULAIRE « DONNER MON AVIS » ======================
   La note est une vraie liste de 5 <input type=radio> : clavier, lecteur d'écran et validation
   gratuits. Le remplissage de la barre est posé par le JS (classe `-on`, cf. `peint()` dans
   reviews.js) — voir le commentaire là-bas pour la raison de ne pas le faire en CSS pur.
   Les inputs restent dans le flux (1×1 px, transparents) : `display:none` les rendrait infocusables. */
.rv-form { margin: 0 0 28px; }
.rv-form__open {
  padding: 11px 24px; cursor: pointer; font: inherit; font-weight: 500; border-radius: 5px;
  background: rgb(var(--color-button, 31,41,55)); color: rgb(var(--color-button-text, 255,255,255));
  border: 1px solid rgb(var(--color-button, 31,41,55));
}
.rv-form__open:hover { opacity: .88; }
.rv-form__body {
  display: grid; gap: 14px; margin-top: 16px; padding: 20px;
  border: 1px solid #ececec; border-radius: 5px; background: #fafafa;
}
.rv-form__body[hidden] { display: none; }
.rv-form__stars { border: 0; margin: 0; padding: 0; }
.rv-form__label { padding: 0; font-size: 13px; font-weight: 600; color: #333; }
.rv-form__row { display: flex; margin-top: 4px; }
.rv-form__row input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rv-form__star { color: #d8d8d8; font-size: 28px; line-height: 1; cursor: pointer; padding: 0 2px; }
.rv-form__star.-on { color: rgb(var(--color-button, 31,41,55)); }
.rv-form__row input:focus-visible + .rv-form__star { outline: 2px solid rgb(var(--color-button, 31,41,55)); outline-offset: 2px; }
.rv-form__input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; font-size: 14px;
  border: 1px solid #ddd; border-radius: 4px; background: #fff; color: #333;
}
.rv-form__input:focus-visible { outline: 2px solid rgb(var(--color-button, 31,41,55)); outline-offset: 1px; }
textarea.rv-form__input { resize: vertical; min-height: 96px; }
.rv-form__submit {
  justify-self: start; padding: 11px 26px; cursor: pointer; font: inherit; font-weight: 500;
  border: 1px solid rgb(var(--color-button, 31,41,55)); border-radius: 5px;
  background: rgb(var(--color-button, 31,41,55)); color: rgb(var(--color-button-text, 255,255,255));
}
.rv-form__submit:disabled { opacity: .5; cursor: default; }
.rv-form__msg { margin: 0; font-size: 13px; }
.rv-form__msg:empty { display: none; }
.rv-form__msg.-ok { color: #1f7a44; }
.rv-form__msg.-ko { color: #b3261e; }

/* Avis écrit ici, pas encore parti : il est affiché À PART de la liste et ne compte dans aucun
   chiffre du résumé. Le bandeau dit ce qu'il est — on ne fait pas croire à un envoi. */
.rv__pending { display: grid; gap: 18px; margin-bottom: 28px; }
.rv__pending:empty { display: none; }
.rv__pending .rv-card { border-color: #e6d28a; background: #fffdf5; }
.rv-card__pending {
  margin: 10px 0 0; padding: 7px 10px; font-size: 12px; line-height: 1.4;
  color: #7a5d0b; background: #fff6dd; border-radius: 4px;
}

@media (max-width: 760px) {
  .rv-form__open, .rv-form__submit { width: 100%; text-align: center; }
}
.rv-form__msg.-info { color: #7a5d0b; }