/*
 * Relais des avis Google lorsque le widget Elfsight est indisponible.
 */

/*
 * Évite qu'une hauteur minimale définie ailleurs dans le site
 * réserve un grand espace vide autour du widget.
 */
.reviews-widget {
    min-height: 0 !important;
}

/*
 * État activé par reviews-fallback.js lorsque le widget Elfsight
 * ne peut pas être affiché.
 */
.reviews-widget.is-fallback-active {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/*
 * Masque et replie complètement le widget Elfsight.
 * aria-hidden seul ne suffit pas à supprimer son espace visuel.
 */
.reviews-widget.is-fallback-active #elfsight-reviews,
#elfsight-reviews[hidden] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

/*
 * L'attribut hidden garde le relais invisible tant que le widget
 * Elfsight fonctionne correctement.
 */
.reviews-fallback[hidden] {
    display: none !important;
}

.reviews-fallback {
    width: 100%;
    margin-top: 2rem;
}

/*
 * Lorsque le relais est actif, les avis remontent directement
 * sous le titre de la section.
 */
.reviews-widget.is-fallback-active .reviews-fallback {
    margin-top: 0 !important;
}

.reviews-fallback__notice {
    max-width: 760px;
    margin: 0 auto 1.5rem;
    text-align: center;
    color: #5d7578;
    line-height: 1.6;
}

.reviews-fallback__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.review-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.5rem;
    border: 1px solid #dbe8e1;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 10px 30px rgb(18 53 58 / 10%);
}

.review-card__header { color: #173f42; }
.review-card__source,
.review-card__period { color: #4e6b70; }

.review-card__stars {
    margin-bottom: 1rem;
    color: #f5a623;
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    line-height: 1;
}

.review-card__text {
    flex-grow: 1;
    margin: 0 0 1.25rem;
    color: #29484b;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.review-card__footer {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: #607a7c;
    font-size: 0.875rem;
}

.review-card__footer strong {
    color: #173f42;
    font-size: 1rem;
}

.reviews-fallback__action {
    margin: 2rem 0 0;
    text-align: center;
}

@media (max-width: 900px) {
    .reviews-fallback__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .reviews-fallback {
        margin-top: 1.5rem;
    }

    .reviews-fallback__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .review-card {
        padding: 1.25rem;
    }
}

html[data-theme="dark"] .reviews-fallback__notice { color: rgba(232, 245, 242, .76); }
html[data-theme="dark"] .review-card {
    background: #152526;
    border-color: #355653;
    box-shadow: 0 10px 30px rgb(0 0 0 / 22%);
}
html[data-theme="dark"] .review-card__header { color: #eff9f5; }
html[data-theme="dark"] :is(.review-card__source, .review-card__period, .review-card__footer) { color: #b3ceca; }
html[data-theme="dark"] .review-card__text { color: #e1f1ed; }
html[data-theme="dark"] .review-card__footer strong { color: #f4fbf8; }