/* ============================================================================
   reviews.css — Bloc « Avis clients » pour les pages à CSS en ligne
   ----------------------------------------------------------------------------
   Les 9 pages blog et les 10 pages réalisations portent chacune leur propre
   bloc <style>, sans brand.css ni city-page.css, et n'affichaient aucun avis
   client — le seul bloc de preuve sociale du site leur manquait entièrement.

   Cette feuille est l'extraction verbatim des règles `.reviews` de brand.css,
   plus deux classes d'en-tête (`.reviews-head`, `.reviews-eyebrow`) propres à
   ce bloc : les 19 pages hôtes nomment leurs titres de section différemment,
   et dépendre de leurs classes ferait rendre le bloc différemment d'une page
   à l'autre.

   Additive uniquement. Vérifié sur les 19 pages : aucune ne définit
   `.review`, `.reviews-*`, `.avatar`, `.stars`, `.rating-*` ni `.btn-gmb`.
   Elles déclarent déjà --slate, --terracotta, --surface, --line, --muted,
   les rayons, les ombres, --max, --pad et `.wrap` ; seuls --bg-alt, --gold et
   --terracotta-ink manquaient.
   ========================================================================== */

:root {
  --bg-alt: #F1EDE5;
  --gold: #F4B400;
  /* Petit texte terracotta sur fond clair : #E8761A plafonne à 2,7:1.
     #A9500A donne 5,0:1 sans changer la teinte perçue. Voir DESIGN.md. */
  --terracotta-ink: #A9500A;
}

.reviews {
  background: var(--bg-alt);
  padding: clamp(58px, 8vw, 88px) 0;
}

/* En-tête autonome : ne dépend d'aucune classe de la page hôte. */
.reviews-head { text-align: center; max-width: 640px; margin: 0 auto 40px; }

.reviews-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--terracotta-ink);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 14px;
}

.reviews-head h2 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 700;
  color: var(--slate);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}

.reviews-head h2 span { color: var(--terracotta); }

.reviews-rating { text-align: center; margin-bottom: 44px; }

.rating-score { display: inline-flex; align-items: baseline; gap: 10px; }

.rating-star { color: var(--gold); font-size: 34px; line-height: 1; }

.rating-num {
  font-family: 'Sora', sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: var(--slate);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.rating-max { font-size: 20px; color: var(--muted); font-weight: 500; }

.rating-label { color: var(--muted); font-size: 14px; margin-top: 8px; }

.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
}

.reviews-grid > * { min-width: 0; }

@media (min-width: 700px) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .reviews-grid { grid-template-columns: repeat(3, 1fr); }
}

.review {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
}

.review:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }

.review-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

/* Monogramme sur pastille ardoise : jamais de photo, les avatars Google ne
   sont ni récupérables ni réutilisables. Voir DESIGN.md. */
.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--slate);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 15px;
  flex-shrink: 0;
}

.review-meta .who {
  font-weight: 600;
  font-size: 14px;
  color: var(--slate);
  line-height: 1.3;
}

.review-meta .where { font-size: 12px; color: var(--muted); margin-top: 2px; }

.stars { display: flex; gap: 3px; color: var(--gold); margin-bottom: 12px; }

.review p.body {
  color: var(--slate);
  font-size: 15px;
  line-height: 1.65;
  flex-grow: 1;
  margin: 0;
}

.review-date { font-size: 13px; color: var(--muted); margin-top: 16px; }

.reviews-gmb { display: flex; justify-content: center; margin-top: 36px; }

.btn-gmb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border: 1.5px solid var(--line);
  border-radius: 50px;
  background: var(--surface);
  font-size: 15px;
  font-weight: 500;
  color: var(--slate);
  text-decoration: none;
  transition: box-shadow .2s, border-color .2s;
  white-space: nowrap;
}

.btn-gmb:hover { box-shadow: var(--sh-md); border-color: #aaa; }

@media (prefers-reduced-motion: reduce) {
  .review { transition: none; }
  .review:hover { transform: none; }
}