/* ── WIDGET AVIS GOOGLE (natif) ──────────────────────────────────
   Remplace le widget Elfsight. S'appuie sur les tokens de main.css
   (--gold, --navy, --off-white, --gray-600, --radius-lg, --shadow-*).
   Namespace .grw- pour éviter toute collision avec le reste du site.
*/

/* Largeur plafonnée indépendamment de .container--narrow : responsive-overrides.css
   force .container--narrow à max-width:100% sitewide, donc sans ce plafond propre au
   widget, les cartes tiendraient sans déborder sur les écrans larges et il n'y aurait
   plus rien à faire défiler. 1280px reprend la largeur du prototype de référence. */
.grw { position: relative; max-width: 1280px; margin: 0 auto; }

.grw__views {
  display: flex; justify-content: flex-end; margin-bottom: 8px;
  font-size: 12px; color: var(--gray-400);
}

.grw__cta { display: flex; justify-content: center; margin-bottom: 28px; }

.grw__rating-band {
  background: var(--off-white);
  border-radius: var(--radius-lg);
  padding: 24px 16px;
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.grw__google-logo {
  font-family: Arial, sans-serif; font-size: 28px; font-weight: 700; line-height: 1;
}
.grw__google-logo span:nth-child(1),
.grw__google-logo span:nth-child(4) { color: #4285F4; }
.grw__google-logo span:nth-child(2),
.grw__google-logo span:nth-child(6) { color: #EA4335; }
.grw__google-logo span:nth-child(3) { color: #FBBC05; }
.grw__google-logo span:nth-child(5) { color: #34A853; }
.grw__rating-value {
  font-family: var(--font-title); font-size: 28px; font-weight: 800; color: var(--navy);
}
.grw__stars { font-size: 22px; letter-spacing: 2px; color: var(--gold); }
.grw__rating-count { font-size: 18px; color: var(--gray-600); }

.grw__track {
  display: flex; flex-wrap: nowrap; align-items: stretch; gap: 16px; padding: 4px 2px 8px;
}

.grw__card {
  flex: 1 1 0; min-width: 0; height: 300px;
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: 20px; box-sizing: border-box;
}
.grw__card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.grw__avatar {
  width: 44px; height: 44px; border-radius: 50%; color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-title); font-weight: 700; font-size: 16px; flex-shrink: 0;
}
.grw__card-identity { min-width: 0; }
.grw__card-name {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-title); font-weight: 700; font-size: 15px; color: var(--navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.grw__verified {
  width: 15px; height: 15px; border-radius: 50%; background: #1a73e8; color: var(--white);
  font-size: 10px; display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.grw__card-time { font-size: 12px; color: var(--gray-600); }
.grw__card-stars { color: var(--gold); font-size: 15px; letter-spacing: 2px; margin-bottom: 10px; }

/* Hauteur de carte fixe et égale pour les 5 avis : le texte est tronqué à 5 lignes,
   avec un bouton "Lire la suite"/"Read more" (ajouté par le JS) si ça déborde. */
.grw__card-text {
  font-size: 14px; line-height: 1.5; color: var(--text);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
  overflow: hidden;
}
.grw__card--expanded { height: auto; }
.grw__card--expanded .grw__card-text {
  -webkit-line-clamp: unset; overflow: visible;
}
.grw__more {
  margin-top: 8px; align-self: flex-start;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  color: var(--navy); text-decoration: underline;
}

/* Mobile : une carte par ligne, empilées en pleine largeur, hauteur libre. */
@media (max-width: 640px) {
  .grw__track { flex-direction: column; }
  .grw__card { flex: 1 1 auto; width: 100%; height: auto; }
  .grw__card-text { -webkit-line-clamp: 6; }
}