/* ============================================================
   HOMIO — avis.css : page /avis (avis clients regroupés par service)
   S'appuie sur styles.css (section-*, testi-*, btn-primary) et nav.css
   ============================================================ */
.avis-page { padding-top: calc(var(--nav-h) + 3rem); max-width: 1120px; margin: 0 auto; }
.avis-head { margin-bottom: 1rem; }
.avis-head .section-sub { margin-bottom: 1.8rem; }

/* Filtres par service */
.avis-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
.avis-filter { display: inline-flex; align-items: center; gap: 0.4rem; background: white; border: 1.5px solid rgba(94,155,132,0.3); border-radius: 100px; padding: 0.5rem 1.1rem; font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.avis-filter:hover { border-color: var(--green-mid); color: var(--green-dark); }
.avis-filter[aria-pressed="true"] { background: var(--green-mid); border-color: var(--green-mid); color: white; }
.avis-filter[hidden] { display: none; }
.avis-filter-count { font-weight: 500; opacity: 0.7; }

/* Groupes par service */
.avis-group { margin-top: 2.5rem; }
.avis-group-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 1rem; padding-bottom: 0.8rem; margin-bottom: 1.4rem; border-bottom: 1px solid rgba(191,215,206,0.5); }
.avis-group-head h2 { font-family: 'League Spartan', sans-serif; font-size: 1.35rem; color: var(--green-deep); letter-spacing: -0.01em; }
html[lang="he"] .avis-group-head h2 { letter-spacing: 0; }
.avis-group-head a { font-size: 0.85rem; font-weight: 600; color: var(--green-dark); text-decoration: none; }
.avis-group-head a:hover { color: var(--green-mid); }

.avis-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 1.5rem; }
.avis-grid .testi-card { display: flex; flex-direction: column; }
.avis-grid .testi-text { flex: 1; }

.avis-cta { text-align: center; margin-top: 3.5rem; }
.avis-cta .btn-primary { display: inline-block; width: auto; }