/* Avis : bandeau de note, carrousel, grille et filtres. */

.rating-summary {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    flex-wrap: wrap;
    width: 100%;
    padding: var(--sp-5);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    margin-bottom: var(--sp-7);
}

.rating-big {
    font-family: var(--font-serif);
    font-size: 3rem;
    color: var(--c-green-deep);
    line-height: 1;
    flex: none;
}

.rating-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: none;
}

.rating-cta {
    margin-left: auto;
}

.google-mark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-soft);
}

.google-mark svg {
    width: 16px;
    height: 16px;
    flex: none;
}

/*
  Répartition des notes, en une seule ligne de barres fines.

  La version empilée en cinq lignes prenait un tiers d'écran pour une
  information que personne ne lit en détail : ce qui compte, c'est de voir
  d'un coup d'œil que la masse est à cinq étoiles.
*/
.rating-breakdown {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    flex: 1;
    min-width: 200px;
}

.rating-breakdown li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-soft);
}

.rb-label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-weight: 700;
    color: var(--c-anthracite);
}

.rb-label svg {
    width: 11px;
    height: 11px;
    color: var(--c-brass);
}

.rb-bar {
    display: block;
    width: 46px;
    height: 5px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}

.rb-bar > span {
    display: block;
    height: 100%;
    background: var(--c-green-leaf);
    border-radius: 999px;
}

/* --- Carrousel ---------------------------------------------------------- */

.reviews-track-wrap {
    position: relative;
}

/*
  Conteneur défilant natif : il fonctionne au doigt, à la molette et au clavier
  sans une ligne de script. Les deux boutons n'ajoutent qu'un confort à la
  souris.
*/
.reviews-track {
    display: flex;
    gap: var(--sp-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--sp-3);
    scrollbar-width: none;
}

.reviews-track::-webkit-scrollbar {
    display: none;
}

.review-card {
    scroll-snap-align: start;
    flex: 0 0 84vw;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.review-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.review-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--c-green-deep);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: var(--font-serif);
    flex: none;
}

.review-name {
    font-weight: 700;
    font-size: 0.94rem;
    margin: 0;
}

.review-date {
    font-size: 0.8rem;
    color: var(--text-soft);
    margin: 0;
}

.review-text {
    font-size: 0.92rem;
    color: var(--c-anthracite);
    flex: 1;
    margin: 0;
}

.review-service {
    font-size: 0.76rem;
    color: var(--text-soft);
    margin: 0;
}

.reviews-controls {
    display: flex;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

.reviews-controls button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.reviews-controls button:hover {
    border-color: var(--c-anthracite);
}

.reviews-controls button svg {
    width: 18px;
    height: 18px;
}

/* --- Grille et filtres (page « Nos avis ») ------------------------------- */

.review-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
    margin-bottom: var(--sp-6);
    padding: var(--sp-5);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.review-filters .filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.review-filters label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-soft);
}

.review-filters select {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    min-height: 40px;
    background: #fff;
}

.review-filters .filter-count {
    margin: 0 0 0 auto;
    font-size: 0.85rem;
    color: var(--text-soft);
}

.reviews-grid .review-card {
    flex: unset;
}

.reviews-empty {
    text-align: center;
    padding: var(--sp-8) 0;
    color: var(--text-soft);
    display: none;
}

.reviews-empty.is-visible {
    display: block;
}