.vwr {
    --vwr-navy: #10264a;
    --vwr-navy-hover: #1b3a6b;
    --vwr-text: #374151;
    --vwr-muted: #6b7280;
    --vwr-light: #9ca3af;
    --vwr-star: #f5a623;
    --vwr-star-off: #dfe3e9;
    --vwr-border: #e8eaee;
    --vwr-border-soft: #eef0f3;
    --vwr-border-card: #f1f2f5;
    --vwr-link: #1d4ed8;
    --vwr-card: 300px;
    --vwr-gap: 16px;

    box-sizing: border-box;
    color: var(--vwr-text);
    /* La typographie vient du site : le widget hérite de la police du thème, sans
       charger de police tierce. Un thème peut imposer autre chose en redéfinissant
       --vwr-font, sans passer par PHP. */
    font-family: var(--vwr-font, inherit);
    font-size: 16px;
    line-height: 1.55;
    /* Le widget est souvent posé dans une colonne flex (Kadence) : sans min-width
       explicite, il se dimensionne sur la largeur du carrousel au lieu de laisser
       celui-ci défiler, et déborde de sa colonne sur mobile. */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 32px 34px 26px;
    border: 1px solid var(--vwr-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 38, 74, .04), 0 12px 40px -24px rgba(16, 38, 74, .18);
}

.vwr *, .vwr *::before, .vwr *::after { box-sizing: inherit; }
.vwr p { margin: 0; }

/* ---------- En-tête ---------- */

.vwr-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--vwr-border-soft);
}

.vwr-head-main { display: flex; align-items: center; gap: 18px; min-width: 0; }

.vwr-score { display: flex; align-items: baseline; gap: 2px; }
.vwr-score-value { color: var(--vwr-navy); font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.01em; }
.vwr-score-max { color: var(--vwr-light); font-size: 18px; font-weight: 600; }

.vwr-score-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vwr-count { color: var(--vwr-muted); font-size: 15px; font-weight: 400; }
.vwr-count strong { color: var(--vwr-navy); font-weight: 800; }
.vwr-sep { margin: 0 2px; }

.vwr-stars { display: inline-flex; gap: 1px; line-height: 1; white-space: nowrap; }
.vwr-star { color: var(--vwr-star-off); font-size: 20px; }
.vwr-star.is-on { color: var(--vwr-star); }

.vwr-head-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.vwr-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #dfe3e9;
    border-radius: 999px;
    background: #fff;
    color: var(--vwr-navy);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.vwr-nav:hover, .vwr-nav:focus-visible { background: #f4f6f9; border-color: var(--vwr-navy); }
.vwr-nav[disabled] { opacity: .4; cursor: default; }
.vwr-nav[disabled]:hover { background: #fff; border-color: #dfe3e9; }

.vwr-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 26px;
    border-radius: 999px;
    background: var(--vwr-navy);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s ease;
}

.vwr-cta:hover, .vwr-cta:focus-visible { background: var(--vwr-navy-hover); color: #fff; }
.vwr-cta-arrow { font-size: 17px; line-height: 1; }
.vwr-cta-mobile { display: none; }

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

.vwr-track {
    display: flex;
    min-width: 0;
    gap: var(--vwr-gap);
    margin-top: 24px;
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    align-items: stretch;
}

.vwr-track::-webkit-scrollbar { display: none; }
.vwr-track:focus-visible { outline: 2px solid var(--vwr-navy); outline-offset: 4px; border-radius: 18px; }

.vwr-card {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--vwr-card);
    max-width: var(--vwr-card);
    padding: 22px 22px 18px;
    border: 1px solid var(--vwr-border);
    border-radius: 16px;
    background: #fff;
    text-align: left;
    scroll-snap-align: start;
}

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

.vwr-avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    object-fit: cover;
}

.vwr-avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eaf0fa;
    color: var(--vwr-navy);
    font-size: 18px;
    font-weight: 700;
}

.vwr-card-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vwr-author { color: var(--vwr-navy); font-size: 16px; font-weight: 700; text-decoration: none; }
a.vwr-author:hover, a.vwr-author:focus-visible { color: var(--vwr-link); }
.vwr-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vwr-card-meta .vwr-star { font-size: 15px; }
.vwr-age { color: var(--vwr-light); font-size: 14px; }
/* En cumul, la carte nomme son établissement : sans cela, trois agences mélangées
   dans le même carrousel deviennent illisibles. */
.vwr-card-place { margin-top: 2px; color: var(--vwr-muted); font-size: 13px; font-weight: 600; }

.vwr-text { margin-top: 16px; color: var(--vwr-text); font-size: 15.5px; }

.vwr-text.is-clamped {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
}

.vwr-more {
    align-self: flex-start;
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--vwr-link);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.vwr-more:hover, .vwr-more:focus-visible { color: var(--vwr-navy); }

.vwr-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--vwr-border-card);
}

.vwr-visit {
    padding: 6px 12px;
    border-radius: 999px;
    background: #f4f6f9;
    color: var(--vwr-muted);
    font-size: 13.5px;
    white-space: nowrap;
}

.vwr-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--vwr-navy);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.vwr-link:hover, .vwr-link:focus-visible { color: var(--vwr-link); }
.vwr-link-arrow { font-size: 13px; }

/* ---------- Pagination et mention ---------- */

.vwr-dots { display: none; justify-content: center; align-items: center; gap: 6px; margin-top: 18px; }
.vwr-dot { width: 6px; height: 6px; border-radius: 999px; background: #d7dbe2; transition: width .2s ease, background-color .2s ease; }
.vwr-dot.is-active { width: 22px; background: var(--vwr-navy); }

.vwr-legal { margin-top: 22px; color: var(--vwr-light); font-size: 13.5px; }

.vwr-error { padding: 12px; border: 1px solid #d63638; background: #fcf0f1; }

/* ---------- Version verticale ---------- */

/* layout="vertical" : les avis sont empilés et prennent toute la largeur, sans
   défilement interne. Pensé pour une colonne étroite ou une barre latérale, où un
   carrousel de cartes de 300 px ne tient pas. */

.vwr--vertical .vwr-head {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.vwr--vertical .vwr-head-main { flex-direction: column; align-items: center; gap: 8px; }
.vwr--vertical .vwr-score-meta { align-items: center; }

.vwr-stack {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: var(--vwr-gap);
    margin-top: 24px;
}

/* La carte du carrousel est figée à --vwr-card : en pile, elle suit la colonne. */
.vwr-stack .vwr-card { flex: 0 0 auto; width: 100%; max-width: none; }

/* Le pied de carte tient sur une ligne à 300 px, plus forcément dans une colonne
   plus étroite : la pastille de visite passe alors au-dessus du lien. */
.vwr--vertical .vwr-card-foot { flex-wrap: wrap; row-gap: 8px; }

.vwr-cta-block {
    display: flex;
    width: 100%;
    margin-top: 22px;
    padding: 16px 22px;
}

.vwr--vertical .vwr-legal { text-align: center; }

/* ---------- Mobile ---------- */

@media (max-width: 899px) {
    .vwr {
        --vwr-gap: 12px;
        padding: 22px 20px 20px;
        border-radius: 18px;
    }

    .vwr-head { padding-bottom: 18px; gap: 14px; }
    .vwr-head-main { gap: 14px; }
    .vwr-score-value { font-size: 30px; }
    .vwr-score-max { font-size: 16px; }
    .vwr-count { font-size: 14.5px; }
    .vwr-head-actions { display: none; }
    .vwr-nav { display: none; }

    .vwr-track {
        margin-inline: -20px;
        padding-inline: 20px;
        scroll-padding-inline: 20px;
    }

    .vwr-card { scroll-snap-align: center; }
    .vwr-text.is-clamped { -webkit-line-clamp: 5; line-clamp: 5; }

    .vwr-dots { display: flex; }

    .vwr-cta-mobile {
        display: flex;
        width: 100%;
        margin-top: 18px;
        padding: 17px;
        font-size: 16px;
        font-weight: 700;
    }

    .vwr-legal { margin-top: 16px; text-align: center; }

    /* Le carrousel déborde volontairement de la carte sur mobile ; la pile, non. */
    .vwr--vertical .vwr-cta-block { margin-top: 18px; padding: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .vwr-track { scroll-behavior: auto; }
    .vwr-dot, .vwr-nav, .vwr-cta { transition: none; }
}