/**
 * zzz_personal_product_comments
 *
 * Affichage frontend inspiré du composant Product Comments
 * de Hummingbird.
 *
 * Toutes les règles sont strictement limitées à #zzz-vpc.
 */


/* ==========================================================
   MASQUAGE DU BLOC NATIF PRODUCT COMMENTS
   ========================================================== */

/*
 * Cette feuille CSS est chargée uniquement lorsque
 * zzz_personal_product_comments est actif sur une fiche produit.
 *
 * Product Comments reste actif afin de conserver notamment
 * sa modale native de dépôt d'avis.
 */

.page-product .product-comments-wrapper {
  display: none;
}



/* ==========================================================
   CONTENEUR
   ========================================================== */

#zzz-vpc {
    width: 100%;
}


/* ==========================================================
   EN-TÊTE
   ========================================================== */

#zzz-vpc .zzz-vpc__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;

    margin: 0 0 1rem;
    padding: 0;
}

#zzz-vpc .zzz-vpc__header-title {
    margin: 0;

    color: var(--bs-body-color);

    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

#zzz-vpc .zzz-vpc__header-rating {
    display: flex;
    align-items: center;
    gap: .25rem;
}

#zzz-vpc .zzz-vpc__header-stars {
    display: flex;
    align-items: center;
    gap: 0;

    color: #ffc107;

    font-size: 1.15rem;
    line-height: 1;
}

#zzz-vpc .zzz-vpc__header-stars span {
    display: inline-block;
}

#zzz-vpc .zzz-vpc__header-average {
    padding-top: .125rem;

    color: var(--bs-secondary-color);
}


/* ==========================================================
   LISTE
   ========================================================== */

#zzz-vpc .zzz-vpc__list {
    margin-bottom: 1rem;
}


/* ==========================================================
   COMMENTAIRE
   Correspond à .comment du module Product Comments natif.
   ========================================================== */

#zzz-vpc .zzz-vpc__item {
    background-color: transparent;

    border-bottom: 1px solid var(--bs-border-color);

    margin: 0;
    padding: 1rem 0;
}


/* ==========================================================
   AUTEUR + DATE
   Correspond à .comment__top
   ========================================================== */

#zzz-vpc .zzz-vpc__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: .25rem;

    font-size: .875rem;
}

#zzz-vpc .zzz-vpc__author {
    color: var(--bs-body-color);
}

#zzz-vpc .zzz-vpc__date {
    color: var(--bs-secondary-color);
}


/* ==========================================================
   ÉTOILES + TITRE
   Correspond à .comment__infos
   ========================================================== */

#zzz-vpc .zzz-vpc__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: .5rem;

    height: auto;
    min-height: inherit;

    margin-bottom: 1rem;
}


/* ==========================================================
   ÉTOILES
   ========================================================== */

#zzz-vpc .zzz-vpc__stars {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;

    line-height: 1;

    margin-left: -.25rem;
}

#zzz-vpc .zzz-vpc__star {
    display: inline-block;

    color: #ffc107;

    font-size: 1.15rem;
    line-height: 1;
}

#zzz-vpc .zzz-vpc__star--empty {
    color: #dfe3e6;
}


/* ==========================================================
   TITRE
   Correspond à .comment__title
   ========================================================== */

#zzz-vpc .zzz-vpc__comment-title {
    margin: 0;

    color: var(--bs-body-color);

    font-size: 1rem;
    font-weight: 600;
    line-height: inherit;
}


/* ==========================================================
   CONTENU
   ========================================================== */

#zzz-vpc .zzz-vpc__content {
    margin: 0;
    padding: 0;
}

#zzz-vpc .zzz-vpc__comment-text {
    margin: 0 0 1rem;

    color: var(--bs-body-color);

    font-size: 1rem;
    letter-spacing: normal;
    line-height: 1.5;

    white-space: normal;
    word-break: normal;
}


/* ==========================================================
   CHARGEMENT / ERREUR
   ========================================================== */

#zzz-vpc .zzz-vpc__loading,
#zzz-vpc .zzz-vpc__error {
    padding: 1rem 0;
}

#zzz-vpc .zzz-vpc__error {
    color: var(--bs-danger);
}


/* ==========================================================
   FOOTER / PAGINATION
   ========================================================== */

#zzz-vpc .zzz-vpc__footer {
    display: flex;
    justify-content: center;

    min-height: auto;

    padding: 1rem 0;
}

#zzz-vpc .zzz-vpc__pagination {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: .75rem;
}

#zzz-vpc .zzz-vpc__page-info {
    color: var(--bs-secondary-color);

    font-size: .875rem;
}

#zzz-vpc .zzz-vpc__page-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.5rem;
    height: 2.5rem;

    padding: 0;

    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);

    background: transparent;
    color: var(--bs-body-color);

    font-size: 1.5rem;
    line-height: 1;

    cursor: pointer;

    transition: var(--bs-transition-default);
}

#zzz-vpc .zzz-vpc__page-button:hover:not(:disabled) {
    border-color: var(--bs-primary);

    color: var(--bs-primary);
}

#zzz-vpc .zzz-vpc__page-button:disabled {
    opacity: .4;
    cursor: default;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 575.98px) {

    #zzz-vpc .zzz-vpc__header {
        align-items: flex-start;
    }

    #zzz-vpc .zzz-vpc__meta {
        align-items: flex-start;
    }

    #zzz-vpc .zzz-vpc__date {
        text-align: right;
    }

    #zzz-vpc .zzz-vpc__title-row {
        align-items: center;
    }
}

/* ==========================================================
   BOUTON DONNEZ VOTRE AVIS
   ========================================================== */

#zzz-vpc .zzz-vpc__review-action {
  margin-bottom: 1rem;
}
/* ==========================================================
   LISTINGS — notes matérialisées ZZZ
   ========================================================== */

.zzz-vpc-list-stars {
  position: relative;
  display: inline-block;
  line-height: 1;
  letter-spacing: 1px;
  white-space: nowrap;
}

.zzz-vpc-list-stars__empty {
  color: #d9d9d9;
}

.zzz-vpc-list-stars__filled {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: #ffb400;
  white-space: nowrap;
}




/* ==========================================================
   PAGE GLOBALE — AVIS DES CLIENTS
   ========================================================== */

.zzz-reviews-page {
    width: 100%;
    padding-bottom: 2rem;
}


/* ==========================================================
   RÉSUMÉ GLOBAL
   ========================================================== */

.zzz-reviews-page__summary {
    display: grid;
    grid-template-columns: minmax(160px, .8fr) minmax(190px, .9fr) minmax(320px, 1.5fr);
    align-items: center;
    gap: 2rem;

    margin: 0 0 2.5rem;
    padding: 1.75rem 2rem;

    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);

    background: var(--bs-body-bg);
}


/* ==========================================================
   STATISTIQUES
   ========================================================== */

.zzz-reviews-page__stat {
    min-width: 0;
}

.zzz-reviews-page__stat-label {
    margin-bottom: .4rem;

    color: var(--bs-secondary-color);

    font-size: .875rem;
    line-height: 1.3;
}

.zzz-reviews-page__stat-value {
    color: var(--bs-body-color);

    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}


/* ==========================================================
   NOTE MOYENNE
   ========================================================== */

.zzz-reviews-page__average {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;

    color: var(--bs-body-color);
}

.zzz-reviews-page__average strong {
    font-size: 1.5rem;
    line-height: 1;
}


/* ==========================================================
   ÉTOILES FRACTIONNAIRES — NOTE MOYENNE
   ========================================================== */

.zzz-reviews-page .zzz-vpc-product-rating__stars {
    position: relative;

    display: inline-block;

    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;

    font-size: 1.25rem;
}

.zzz-reviews-page .zzz-vpc-product-rating__empty {
    color: #d9d9d9;
}

.zzz-reviews-page .zzz-vpc-product-rating__filled {
    position: absolute;
    top: 0;
    left: 0;

    overflow: hidden;

    color: #ffb400;

    white-space: nowrap;
}


/* ==========================================================
   RÉPARTITION 5 → 1 ÉTOILES
   ========================================================== */

.zzz-reviews-page__distribution {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.zzz-reviews-page__distribution-row {
    display: grid;
    grid-template-columns: 2.75rem minmax(100px, 1fr) 4rem;
    align-items: center;
    gap: .75rem;

    font-size: .875rem;
}

.zzz-reviews-page__distribution-label {
    color: var(--bs-body-color);

    white-space: nowrap;
}

.zzz-reviews-page__distribution-bar {
    position: relative;

    width: 100%;
    height: .5rem;

    overflow: hidden;

    border-radius: 999px;

    background: var(--bs-secondary-bg);
}

.zzz-reviews-page__distribution-fill {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: #ffb400;
}

.zzz-reviews-page__distribution-count {
    color: var(--bs-secondary-color);

    text-align: right;
    white-space: nowrap;
}


/* ==========================================================
   LISTE
   ========================================================== */

.zzz-reviews-page__list {
    width: 100%;
}

.zzz-reviews-page__list-title {
    margin: 0 0 1.25rem;

    color: var(--bs-body-color);

    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
}


/* ==========================================================
   CARTE AVIS
   ========================================================== */

.zzz-reviews-page__review {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 2rem;

    margin: 0;
    padding: 1.5rem 0;

    border-bottom: 1px solid var(--bs-border-color);
}

.zzz-reviews-page__review:first-of-type {
    border-top: 1px solid var(--bs-border-color);
}

.zzz-reviews-page__review-main {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 1.5rem;

    min-width: 0;
}


/* ==========================================================
   CLIENT
   ========================================================== */

.zzz-reviews-page__customer {
    display: flex;
    align-items: flex-start;
    gap: .75rem;

    min-width: 0;
}

.zzz-reviews-page__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 2.75rem;

    width: 2.75rem;
    height: 2.75rem;

    border-radius: 50%;

    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);

    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
}

.zzz-reviews-page__customer-info {
    min-width: 0;
}

.zzz-reviews-page__customer-name {
    overflow: hidden;

    margin-bottom: .2rem;

    color: var(--bs-body-color);

    font-size: .95rem;
    font-weight: 600;

    text-overflow: ellipsis;
}

.zzz-reviews-page__date {
    display: block;

    color: var(--bs-secondary-color);

    font-size: .8rem;
    line-height: 1.3;
}


/* ==========================================================
   CONTENU DE L'AVIS
   ========================================================== */

.zzz-reviews-page__review-content {
    min-width: 0;
}

.zzz-reviews-page__stars {
    display: flex;
    align-items: center;

    margin-bottom: .5rem;

    font-size: 1.05rem;
    line-height: 1;
    letter-spacing: 1px;
}

.zzz-reviews-page__star-on {
    color: #ffb400;
}

.zzz-reviews-page__star-off {
    color: #d9d9d9;
}

.zzz-reviews-page__review-title {
    margin: 0 0 .5rem;

    color: var(--bs-body-color);

    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.zzz-reviews-page__review-text {
    margin: 0;

    color: var(--bs-body-color);

    font-size: .95rem;
    line-height: 1.55;

    overflow-wrap: anywhere;
}


/* ==========================================================
   PRODUIT ASSOCIÉ
   ========================================================== */

.zzz-reviews-page__product {
    min-width: 0;
}

.zzz-reviews-page__product-link,
.zzz-reviews-page__product > span {
    display: flex;
    align-items: center;
    gap: 1rem;

    color: var(--bs-body-color);

    text-decoration: none;
}

.zzz-reviews-page__product-link:hover {
    color: var(--bs-primary);
}

.zzz-reviews-page__product-image {
    flex: 0 0 76px;

    width: 76px;
    height: 76px;

    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);

    background: #fff;

    object-fit: contain;
}

.zzz-reviews-page__product-name {
    min-width: 0;

    font-size: .875rem;
    font-weight: 500;
    line-height: 1.4;
}


/* ==========================================================
   PAGINATION
   ========================================================== */

.zzz-reviews-page__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem;

    padding: 2rem 0 0;
}

.zzz-reviews-page__pagination-info {
    color: var(--bs-secondary-color);

    font-size: .875rem;
}

.zzz-reviews-page__pagination-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.5rem;
    height: 2.5rem;

    padding: 0;

    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);

    background: transparent;
    color: var(--bs-body-color);

    font-size: 1.5rem;
    line-height: 1;

    text-decoration: none;

    transition: var(--bs-transition-default);
}

.zzz-reviews-page__pagination-button:hover {
    border-color: var(--bs-primary);

    color: var(--bs-primary);

    text-decoration: none;
}


/* ==========================================================
   TABLETTE
   ========================================================== */

@media (max-width: 991.98px) {

    .zzz-reviews-page__summary {
        grid-template-columns: 1fr 1fr;
    }

    .zzz-reviews-page__distribution {
        grid-column: 1 / -1;
    }

    .zzz-reviews-page__review {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .zzz-reviews-page__product {
        padding-left: calc(180px + 1.5rem);
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

    .zzz-reviews-page__summary {
        grid-template-columns: 1fr;
        gap: 1.5rem;

        padding: 1.25rem;
    }

    .zzz-reviews-page__distribution {
        grid-column: auto;
    }

    .zzz-reviews-page__review {
        padding: 1.25rem 0;
    }

    .zzz-reviews-page__review-main {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .zzz-reviews-page__product {
        padding-left: 0;
    }
}


@media (max-width: 575.98px) {

    .zzz-reviews-page__stat-value {
        font-size: 1.75rem;
    }

    .zzz-reviews-page__distribution-row {
        grid-template-columns: 2.5rem minmax(70px, 1fr) 3.5rem;
        gap: .5rem;
    }

    .zzz-reviews-page__review {
        gap: 1rem;
    }

    .zzz-reviews-page__product-image {
        flex-basis: 64px;

        width: 64px;
        height: 64px;
    }

    .zzz-reviews-page__review-text {
        font-size: .9rem;
    }
}

/* ==========================================================
   PAGE AVIS — AJUSTEMENTS DESKTOP
   ========================================================== */

@media (min-width: 992px) {

    /*
     * Donne davantage d'espace au contenu principal de l'avis
     * tout en conservant une vraie colonne produit.
     */
    .zzz-reviews-page__review {
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 2.5rem;
    }

    /*
     * Colonne auteur volontairement compacte.
     */
    .zzz-reviews-page__review-main {
        grid-template-columns: 150px minmax(0, 1fr);
        gap: 1.5rem;
    }

    /*
     * Produit plus lisible.
     */
    .zzz-reviews-page__product-image {
        flex-basis: 88px;

        width: 88px;
        height: 88px;
    }

    .zzz-reviews-page__product-name {
        font-size: .9rem;
        line-height: 1.45;
    }
}


/* ==========================================================
   PAGE AVIS — FINITIONS
   ========================================================== */

.zzz-reviews-page__summary {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .025);
}

.zzz-reviews-page__review {
    transition: background-color .15s ease;
}

.zzz-reviews-page__review:hover {
    background-color: rgba(0, 0, 0, .012);
}

.zzz-reviews-page__product-link {
    border-radius: var(--bs-border-radius);
}

.zzz-reviews-page__product-link:hover .zzz-reviews-page__product-name {
    text-decoration: underline;
}

.zzz-reviews-page__pagination {
    margin-top: .5rem;
}



/* ==========================================================
   PAGE AVIS — PAGINATION NUMÉRIQUE
   ========================================================== */

.zzz-reviews-page__pagination-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 2.5rem;
    height: 2.5rem;

    padding: 0 .65rem;

    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);

    background: transparent;
    color: var(--bs-body-color);

    font-size: .875rem;
    font-weight: 500;
    line-height: 1;

    text-decoration: none;

    transition: var(--bs-transition-default);
}

.zzz-reviews-page__pagination-number:hover {
    border-color: var(--bs-primary);

    color: var(--bs-primary);

    text-decoration: none;
}

.zzz-reviews-page__pagination-number.is-active {
    border-color: var(--bs-primary);

    background: var(--bs-primary);
    color: #fff;

    pointer-events: none;
}

.zzz-reviews-page__pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 1.5rem;
    height: 2.5rem;

    color: var(--bs-secondary-color);

    font-size: 1rem;
}


/* Mobile : pagination un peu plus compacte */

@media (max-width: 575.98px) {

    .zzz-reviews-page__pagination {
        gap: .4rem;
    }

    .zzz-reviews-page__pagination-number,
    .zzz-reviews-page__pagination-button {
        min-width: 2.25rem;
        width: 2.25rem;
        height: 2.25rem;

        padding: 0;
    }
}




/* ==========================================================
   FICHE PRODUIT — PAGINATION NUMÉRIQUE
   Même design que la page globale Avis des clients
   ========================================================== */

#zzz-vpc .zzz-vpc__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: .75rem;
}


/* ==========================================================
   GROUPE DES NUMÉROS
   ========================================================== */

#zzz-vpc .zzz-vpc__page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: .75rem;
}


/* ==========================================================
   NUMÉROS DE PAGES
   ========================================================== */

#zzz-vpc .zzz-vpc__page-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 2.5rem;
    height: 2.5rem;

    padding: 0 .65rem;

    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);

    background: transparent;
    color: var(--bs-body-color);

    font-family: inherit;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1;

    text-decoration: none;

    cursor: pointer;

    transition: var(--bs-transition-default);
}


/* ==========================================================
   SURVOL
   ========================================================== */

#zzz-vpc .zzz-vpc__page-number:hover:not(.is-active) {
    border-color: var(--bs-primary);

    color: var(--bs-primary);
}


/* ==========================================================
   PAGE COURANTE
   ========================================================== */

#zzz-vpc .zzz-vpc__page-number.is-active {
    border-color: var(--bs-primary);

    background: var(--bs-primary);
    color: #fff;

    cursor: default;
    pointer-events: none;
}


/* ==========================================================
   ELLIPSE …
   ========================================================== */

#zzz-vpc .zzz-vpc__page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 1.5rem;
    height: 2.5rem;

    color: var(--bs-secondary-color);

    font-size: 1rem;
    line-height: 1;
}


/* ==========================================================
   FLÈCHES PRÉCÉDENT / SUIVANT
   ========================================================== */

#zzz-vpc .zzz-vpc__page-button {
    flex: 0 0 2.5rem;

    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
}


/*
 * La flèche précédente disparaît sur la page 1.
 * La flèche suivante disparaît sur la dernière page.
 *
 * Le JS gère déjà correctement l'attribut disabled.
 */

#zzz-vpc .zzz-vpc__page-button:disabled {
    display: none;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 575.98px) {

    #zzz-vpc .zzz-vpc__pagination,
    #zzz-vpc .zzz-vpc__page-numbers {
        gap: .4rem;
    }

    #zzz-vpc .zzz-vpc__page-number,
    #zzz-vpc .zzz-vpc__page-button {
        flex-basis: 2.25rem;

        min-width: 2.25rem;
        width: 2.25rem;
        height: 2.25rem;

        padding: 0;
    }

    #zzz-vpc .zzz-vpc__page-ellipsis {
        min-width: 1rem;
        height: 2.25rem;
    }
}





/* ==========================================================
   HOME — AVIS DES CLIENTS
   ========================================================== */

#zzz-vpc-home {
  --zzz-vpc-home-orange: #f5a019;
  --zzz-vpc-home-blue: #55aee2;
  --zzz-vpc-home-border: #e5e5e5;
  --zzz-vpc-home-muted: #999;

  width: 100%;
  margin-top: 0;
  padding: 2.5rem 1.5rem 1.5rem;
  background: #fff;
}


#zzz-vpc-home .zzz-vpc-home__inner {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}


/* ----------------------------------------------------------
   EN-TÊTE
   ---------------------------------------------------------- */

#zzz-vpc-home .zzz-vpc-home__header {
  margin-bottom: 3.2rem;
  text-align: center;
}


#zzz-vpc-home .zzz-vpc-home__title {
  margin: 0 0 .35rem;
  color: #292929;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.2;
}


#zzz-vpc-home .zzz-vpc-home__rating {
  margin-bottom: .25rem;
}


#zzz-vpc-home .zzz-vpc-home__stars {
  display: inline-flex;
  gap: .05rem;
  font-size: 1.15rem;
  line-height: 1;
}


#zzz-vpc-home .zzz-vpc-home__star {
  color: #ddd;
}


#zzz-vpc-home .zzz-vpc-home__star.is-full,
#zzz-vpc-home .zzz-vpc-home__star.is-half {
  color: var(--zzz-vpc-home-orange);
}


#zzz-vpc-home .zzz-vpc-home__summary {
  color: #888;
  font-size: .78rem;
}


#zzz-vpc-home .zzz-vpc-home__summary strong {
  color: #777;
  font-weight: 500;
}


/* ----------------------------------------------------------
   DESKTOP >= 1440px
   5 AVIS SUR UNE SEULE LIGNE
   ---------------------------------------------------------- */

#zzz-vpc-home .zzz-vpc-home__reviews {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2.5rem;
  align-items: stretch;
}


/* ----------------------------------------------------------
   CARTE
   ---------------------------------------------------------- */

#zzz-vpc-home .zzz-vpc-home__review {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 250px;
  flex-direction: column;
  padding: 2.65rem 1.25rem 1rem;

  border: 1px solid #dee2e6;
  border-radius: 8px;

  background: #fff;
  box-shadow: none;
  text-align: center;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}


/* ----------------------------------------------------------
   HOVER CARTE — IDENTIQUE AUX MANUELS
   ---------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

  #zzz-vpc-home .zzz-vpc-home__review:hover {
    border-color: #bfc7d0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .07);
    transform: translateY(-2px);
  }

}


/* ----------------------------------------------------------
   AVATAR
   ---------------------------------------------------------- */

#zzz-vpc-home .zzz-vpc-home__avatar {
  position: absolute;
  top: -1.7rem;
  left: 50%;

  display: flex;

  width: 3.4rem;
  height: 3.4rem;

  align-items: center;
  justify-content: center;

  transform: translateX(-50%);

  border: 0;
  border-radius: 50%;

  background: #b339e4;
  color: #fff;

  box-shadow: none;

  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
}


/* ----------------------------------------------------------
   COULEURS ALTERNÉES DES AVATARS
   ---------------------------------------------------------- */

#zzz-vpc-home
.zzz-vpc-home__review:nth-child(5n + 1)
.zzz-vpc-home__avatar {
  background: #b536e5;
}


#zzz-vpc-home
.zzz-vpc-home__review:nth-child(5n + 2)
.zzz-vpc-home__avatar {
  background: #63ca32;
}


#zzz-vpc-home
.zzz-vpc-home__review:nth-child(5n + 3)
.zzz-vpc-home__avatar {
  background: #dd68e4;
}


#zzz-vpc-home
.zzz-vpc-home__review:nth-child(5n + 4)
.zzz-vpc-home__avatar {
  background: #6ddbc1;
}


#zzz-vpc-home
.zzz-vpc-home__review:nth-child(5n + 5)
.zzz-vpc-home__avatar {
  background: #c9bec5;
}


/* ----------------------------------------------------------
   CLIENT + DATE
   ---------------------------------------------------------- */

#zzz-vpc-home .zzz-vpc-home__customer {
  display: flex;
  min-height: 2.5rem;
  flex-direction: column;
  align-items: center;
  padding-left: 0;
  margin-bottom: .45rem;
  text-align: center;
}


#zzz-vpc-home .zzz-vpc-home__customer-name {
  max-width: 100%;
  overflow: hidden;

  color: var(--zzz-vpc-home-blue);

  font-size: .8rem;
  font-weight: 600;
  line-height: 1.3;

  text-overflow: ellipsis;
  white-space: nowrap;
}


#zzz-vpc-home .zzz-vpc-home__date {
  margin-top: .35rem;
  color: var(--zzz-vpc-home-muted);
  font-size: .72rem;
}


/* ----------------------------------------------------------
   ÉTOILES
   ---------------------------------------------------------- */

#zzz-vpc-home .zzz-vpc-home__review-stars {
  display: flex;
  justify-content: center;
  gap: .02rem;
  margin-bottom: .45rem;
  line-height: 1;
}


#zzz-vpc-home .zzz-vpc-home__review-star {
  color: #ddd;
  font-size: .9rem;
}


#zzz-vpc-home .zzz-vpc-home__review-star.is-full {
  color: var(--zzz-vpc-home-orange);
}


/* ----------------------------------------------------------
   TITRE + AVIS
   ---------------------------------------------------------- */

#zzz-vpc-home .zzz-vpc-home__review-title {
  margin: 0 0 .55rem;

  color: #363636;

  font-size: .86rem;
  font-weight: 600;
  line-height: 1.3;

  text-align: center;
}


#zzz-vpc-home .zzz-vpc-home__review-content {
  display: -webkit-box;
  overflow: hidden;

  margin: 0 auto 1rem;

  color: #777;

  font-size: .78rem;
  line-height: 1.45;

  text-align: center;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}


/* ----------------------------------------------------------
   PRODUIT — IMAGE + NOM EN 2 COLONNES
   ---------------------------------------------------------- */

#zzz-vpc-home .zzz-vpc-home__product {
  min-height: 72px;
  padding: .65rem .4rem 0;
  margin-top: auto;
  border-top: 1px solid #f0f0f0;
}


/* Produit actif avec lien */

#zzz-vpc-home .zzz-vpc-home__product-link {
  display: grid;

  width: 100%;
  min-width: 0;

  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: .75rem;

  color: inherit;
  text-decoration: none;
  text-align: left;
}


/* Produit inactif sans lien */

#zzz-vpc-home
.zzz-vpc-home__product:not(:has(.zzz-vpc-home__product-link)) {
  display: grid;

  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: .75rem;

  text-align: left;
}


/* Image produit */

#zzz-vpc-home .zzz-vpc-home__product-image {
  display: block;

  width: 58px;
  height: 58px;
  max-width: 58px;

  margin: 0;

  object-fit: contain;
}


/* Nom produit */

#zzz-vpc-home .zzz-vpc-home__product-name {
  display: -webkit-box;

  min-width: 0;
  overflow: hidden;

  color: var(--zzz-vpc-home-blue);

  font-size: .72rem;
  line-height: 1.4;

  text-align: left;
  overflow-wrap: anywhere;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}


/* Survol produit */

#zzz-vpc-home
.zzz-vpc-home__product-link:hover
.zzz-vpc-home__product-name {
  text-decoration: underline;
}


/* ----------------------------------------------------------
   VOIR TOUS LES AVIS
   ---------------------------------------------------------- */

#zzz-vpc-home .zzz-vpc-home__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: .8rem;
}


#zzz-vpc-home .zzz-vpc-home__all-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;

  color: #444;

  font-size: .72rem;
  font-weight: 400;

  text-decoration: none;
}


#zzz-vpc-home .zzz-vpc-home__all-link:hover {
  color: var(--zzz-vpc-home-blue);
}


/* ==========================================================
   < 1440px
   CARROUSEL HORIZONTAL
   ========================================================== */

@media (max-width: 1439.98px) {

  #zzz-vpc-home {
    padding-right: 0;
    padding-left: 0;
    overflow: hidden;
  }


  /* --------------------------------------------------------
     EN-TÊTE
     -------------------------------------------------------- */

  #zzz-vpc-home .zzz-vpc-home__header {
    padding-right: 1rem;
    padding-left: 1rem;
    margin-bottom: 1.2rem;
  }


  /* --------------------------------------------------------
     CARROUSEL
     -------------------------------------------------------- */

  #zzz-vpc-home .zzz-vpc-home__reviews {
    display: flex;

    width: 100%;
    max-width: 100%;

    gap: 1rem;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 2rem 1rem 1rem;

    scroll-snap-type: x mandatory;
    scroll-padding-left: 1rem;

    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
  }


  #zzz-vpc-home
  .zzz-vpc-home__reviews::-webkit-scrollbar {
    display: none;
  }


  /* --------------------------------------------------------
     CARTES
     -------------------------------------------------------- */

  #zzz-vpc-home .zzz-vpc-home__review {
    flex: 0 0 360px;

    width: 360px;
    min-width: 360px;
    max-width: 360px;

    min-height: 250px;

    scroll-snap-align: start;
    scroll-snap-stop: always;
  }


  /* --------------------------------------------------------
     FOOTER
     -------------------------------------------------------- */

  #zzz-vpc-home .zzz-vpc-home__footer {
    padding-right: 1rem;
    padding-left: 1rem;
  }

}


/* ==========================================================
   < 992px
   TABLETTE
   ========================================================== */

@media (max-width: 991.98px) {

  #zzz-vpc-home .zzz-vpc-home__review {
    flex-basis: 340px;

    width: 340px;
    min-width: 340px;
    max-width: 340px;
  }

}


/* ==========================================================
   < 768px
   MOBILE
   ========================================================== */

@media (max-width: 767.98px) {

  #zzz-vpc-home {
    margin-top: 2rem;
	padding: 0 12px 1rem 12px;
	}


  #zzz-vpc-home .zzz-vpc-home__title {
    font-size: 1.35rem;
  }


  #zzz-vpc-home .zzz-vpc-home__reviews {
    gap: .75rem;
  }


  /* --------------------------------------------------------
     CARTE MOBILE

     Une carte presque complète avec un aperçu
     volontaire de la carte suivante.
     -------------------------------------------------------- */

  #zzz-vpc-home .zzz-vpc-home__review {
    flex-basis: calc(100vw - 5rem);

    width: calc(100vw - 5rem);
    min-width: calc(100vw - 5rem);
    max-width: calc(100vw - 5rem);
  }


  /* --------------------------------------------------------
     PRODUIT MOBILE
     -------------------------------------------------------- */

  #zzz-vpc-home .zzz-vpc-home__product-link {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: .75rem;
  }


  #zzz-vpc-home
  .zzz-vpc-home__product:not(:has(.zzz-vpc-home__product-link)) {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: .75rem;
  }


  #zzz-vpc-home .zzz-vpc-home__product-image {
    width: 58px;
    height: 58px;
    max-width: 58px;
  }


  #zzz-vpc-home .zzz-vpc-home__product-name {
    font-size: .72rem;
  }


  /* --------------------------------------------------------
     FOOTER
     -------------------------------------------------------- */

  #zzz-vpc-home .zzz-vpc-home__footer {
    justify-content: center;
    margin-top: .5rem;
  }


  #zzz-vpc-home .zzz-vpc-home__reviews {
      padding: 2rem 12px 12px 12px !important;
  
      background: #fff !important;
  
      border: 1px solid #e1e5e8 !important;
      border-radius: 6px !important;
  
      box-sizing: border-box;
  }
}


/* ==========================================================
   < 360px
   TRÈS PETITS ÉCRANS
   ========================================================== */

@media (max-width: 359.98px) {

  #zzz-vpc-home .zzz-vpc-home__reviews {
    gap: .6rem;
    padding-right: .75rem;
    padding-left: .75rem;
    scroll-padding-left: .75rem;
  }


  #zzz-vpc-home .zzz-vpc-home__review {
    flex-basis: calc(100vw - 3.5rem);

    width: calc(100vw - 3.5rem);
    min-width: calc(100vw - 3.5rem);
    max-width: calc(100vw - 3.5rem);
  }

}