/* Avis clients Trustpilot (widget + avis custom) - genere par Common::TP_bloc() / TP_widget()
   layouts : avis-row (home, villes, vente, estimations...), avis-compact (mobile, 1 avis), avis-vertical (desktop inscription) */

.avis-widget { border: 1px solid #e1e8e7; border-radius: 10px; background: #fcfcfc; padding: 16px 16px 8px; color: #1e2a28; text-align: left; }
.avis-widget, .avis-widget * { box-sizing: border-box; }
.avis-head { text-align: center; padding-bottom: 12px; border-bottom: 1px solid #e1e8e7; }
.avis-head .trustpilot-widget { margin: 0 auto; }

/* --- cartes d'avis --- */
.avis-card { border: 1px solid #e1e8e7; border-radius: 8px; padding: 13px 14px; background: #fff; margin: 0; }
.avis-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 7px; }
.avis-card .avis-stars { height: 18px; }
.avis-verif { font-size: 13px; color: #6a7c79; white-space: nowrap; }
.avis-verif .zmdi { color: #00b67a; }
.avis-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.avis-content { font-size: 14px; color: #4a4a4a; line-height: 1.45; margin: 0; }
.avis-who { margin-top: 7px; font-size: 14px; color: #6a7c79; }
.avis-who b { color: #1e2a28; }
.avis-card[data-truncated="1"] { cursor: pointer; }
.avis-card[data-truncated="1"]:hover { border-color: #34B6B0; }
.avis-card[data-truncated="1"]:focus { outline: 2px solid #34B6B0; outline-offset: 2px; }
/* texte limite a 3 lignes dans les sliders horizontaux */
.avis-row .avis-content, .avis-compact .avis-content {
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}

/* --- piste d'avis : horizontale par defaut (scroll-snap) --- */
.avis-track {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding: 4px 0 8px; scrollbar-width: none; scroll-behavior: smooth;
}
.avis-track::-webkit-scrollbar { display: none; }
.avis-track > .avis-card { flex: 0 0 84%; scroll-snap-align: center; }
.avis-slider { position: relative; margin-top: 12px; min-width: 0; }
.avis-dots { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }
.avis-dot { width: 7px; height: 7px; border-radius: 50%; background: #e1e8e7; border: 0; padding: 0; cursor: pointer; }
.avis-dot.is-active { background: #34B6B0; width: 20px; border-radius: 4px; }

/* --- fleches de navigation (masquees par defaut) --- */
.avis-nav {
    display: none; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 34px; height: 34px; padding: 0; border: 1px solid #d7dedd; border-radius: 50%;
    background: #fff; cursor: pointer; transition: border-color .15s ease;
}
.avis-nav:hover { border-color: #34B6B0; }
.avis-nav[disabled] { opacity: .35; cursor: default; border-color: #d7dedd; }
.avis-chev { display: block; width: 9px; height: 9px; border-right: 2px solid #6a7c79; border-bottom: 2px solid #6a7c79; }
.avis-nav:hover .avis-chev { border-color: #34B6B0; }
.avis-nav-prev .avis-chev { transform: rotate(135deg); margin-left: 3px; }
.avis-nav-next .avis-chev { transform: rotate(-45deg); margin-right: 3px; }

/* --- layout compact (mobile) : 1 avis a la fois + points --- */
.avis-compact .avis-head { padding-bottom: 8px; }
.avis-compact .avis-slider { margin-top: 8px; }

/* --- layout row : mobile = widget puis 1 avis ; desktop = widget a gauche, 3 avis par 3 a droite (zone transparente, seules les cartes ont un fond) --- */
.avis-row { background: transparent; }
.avis-row .avis-card { background: #f3f5f5; }
.avis-row .avis-head .trustpilot-widget { max-width: 200px; }
@media (min-width: 992px) {
    .avis-row { display: flex; align-items: center; gap: 24px; padding: 18px 24px 14px; }
    .avis-row .avis-head { flex: 0 0 225px; max-width: 225px; padding: 0 24px 0 0; border-bottom: 0; border-right: 1px solid #e1e8e7; }
    .avis-row .avis-slider { flex: 1 1 auto; margin-top: 0; padding: 0 52px; }
    .avis-row .avis-track { scroll-snap-type: x mandatory; padding-bottom: 4px; }
    /* 2 avis par 2 par defaut (zone etroite : colonne d'article...), 3 par 3 des que la zone de defilement
       (et non la fenetre) laisse ~210px par carte */
    .avis-row .avis-slider { container-type: inline-size; }
    .avis-row .avis-track > .avis-card { flex: 0 0 calc((100% - 12px) / 2); scroll-snap-align: start; }
    @container (min-width: 640px) {
        .avis-row .avis-track > .avis-card { flex: 0 0 calc((100% - 24px) / 3); }
    }
    .avis-row .avis-nav { display: flex; position: absolute; top: calc(50% - 22px); z-index: 2; }
    .avis-row .avis-nav-prev { left: 0; }
    .avis-row .avis-nav-next { right: 0; }
}

/* --- layout vertical (colonne droite de /inscription, bloc fixe centre sur l'ecran, defilement par fleches) --- */
.avis-slot-desktop { position: relative; }
.avis-slot-desktop .avis-widget {
    position: fixed; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
    max-height: 95vh; width: 31vw; display: flex; flex-direction: column;
    /* left / width ajustes precisement en JS sur la largeur de la colonne */
}
.avis-vertical .avis-head { flex: 0 0 auto; }
.avis-vertical .avis-slider { flex: 0 1 auto; min-height: 0; margin-top: 0; display: flex; flex-direction: column; }
.avis-vertical .avis-track {
    flex-direction: column; overflow-x: visible; overflow-y: auto; scroll-snap-type: none;
    -ms-overflow-style: none; margin-top: 12px;
}
.avis-vertical .avis-track > .avis-card { flex: 0 0 auto; }
.avis-vertical .avis-nav { display: flex; margin: 8px auto; }
.avis-vertical .avis-nav-prev .avis-chev { transform: rotate(-135deg); margin: 4px 0 0; }
.avis-vertical .avis-nav-next .avis-chev { transform: rotate(45deg); margin: 0 0 4px; }
.avis-vertical .avis-dots { display: none; }

/* --- fenetre de lecture d'un avis (clic sur un avis tronque) --- */
.avis-pop { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .5); }
.avis-pop.is-open { display: flex; }
.avis-pop-box { position: relative; background: #fff; border-radius: 10px; max-width: 560px; width: 100%; max-height: 80vh; overflow-y: auto; padding: 22px 24px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.avis-pop-close { position: absolute; top: 6px; right: 12px; border: 0; background: none; font-size: 28px; line-height: 1; color: #6a7c79; cursor: pointer; }
.avis-pop .am-stars img { height: 20px; }
.avis-pop .am-title { margin: 8px 0 10px; font-size: 18px; font-weight: 700; }
.avis-pop .am-content { font-size: 15px; line-height: 1.55; white-space: pre-wrap; margin: 0; }
.avis-pop .am-who { margin-top: 14px; font-size: 13px; color: #6a7c79; }
.avis-pop .am-who .zmdi { color: #00b67a; }