.bwgr-reviews {
    display: grid;
    gap: 1.2rem;
    margin: 1.5rem 0;
}
.bwgr-reviews.bwgr-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.bwgr-reviews.bwgr-list {
    grid-template-columns: 1fr;
    max-width: 640px;
}
.bwgr-reviews.bwgr-carousel {
    display: flex;
    gap: 1.2rem;
}
.bwgr-reviews.bwgr-carousel .bwgr-card {
    flex: 0 0 280px;
}
/* Cartes du carrousel : un peu plus compactes que le style Grille par
   défaut (texte de l'avis limité, plutôt qu'une carte qui s'étire en
   hauteur au gré de la longueur du commentaire), sans être trop basses. */
.bwgr-reviews.bwgr-carousel .bwgr-card {
    padding: 1rem 1.1rem;
}
.bwgr-reviews.bwgr-carousel .bwgr-comment {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}
.bwgr-reviews.bwgr-carousel .bwgr-reply p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.bwgr-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

.bwgr-card-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: .6rem;
    position: relative;
}

.bwgr-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.bwgr-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eee;
    color: #555;
    font-weight: 600;
    text-transform: uppercase;
}

.bwgr-author {
    font-weight: 600;
    font-size: .95rem;
}

.bwgr-stars {
    color: #f5a623;
    font-size: .95rem;
    letter-spacing: 1px;
}

.bwgr-google-mark {
    margin-left: auto;
    opacity: .85;
}

.bwgr-comment {
    font-size: .92rem;
    line-height: 1.5;
    color: #333;
    margin: 0;
}

.bwgr-reply {
    margin-top: .7rem;
    padding: .6rem .8rem;
    /* Couleurs fixes (pas de currentColor/héritage du thème) : la carte elle-
       même a un fond blanc fixe, donc le texte doit rester lisible sur un
       fond gris clair fixe, quel que soit le thème du site. */
    background: #f3f4f6;
    color: #1f2937;
    border-left: 3px solid #cbd5e1;
    border-radius: 6px;
    font-size: .85rem;
}
.bwgr-reply strong { color: #1f2937; }
.bwgr-reply p { margin: .3rem 0 0; color: #374151; }

/* ── Style "Carrousel" : en-tête optionnel + bandeau défilant fluide ──
   Même logique que le bandeau "Témoignages" ci-dessous : une seule
   animation CSS en boucle, PAS un passage avis par avis, pause au survol.
   L'en-tête (accroche/titre/pastille) garde les couleurs du thème actif,
   exactement comme le style "Témoignages" (mêmes classes .bwgr-t-*). */
.bwgr-carousel-outer {
    margin: 1rem 0;
    /* Même logique de fond optionnel que .bwgr-t-wrap (style "Témoignages")
       — couvre l'en-tête, le bandeau d'avis ET les boutons. */
    background: var( --bwgr-t-header-bg, transparent );
    border-radius: 20px;
    padding: 1rem 1.2rem 2rem;
}
.bwgr-carousel-viewport {
    overflow: hidden;
    width: 100%;
}
.bwgr-reviews.bwgr-carousel.bwgr-carousel-fluid {
    flex-wrap: nowrap;
    width: max-content;
    margin: 0;
    animation: bwgr-c-scroll var(--bwgr-c-duration, 30s) linear infinite;
}
.bwgr-carousel-viewport:hover .bwgr-carousel-fluid,
.bwgr-carousel-fluid:focus-within {
    animation-play-state: paused;
}
@keyframes bwgr-c-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .bwgr-carousel-fluid { animation: none; }
}

.bwgr-admin-hint {
    background: #fff8e5;
    border: 1px dashed #e0b400;
    padding: .8rem 1rem;
    border-radius: 8px;
    font-size: .9rem;
}

.bwgr-empty {
    font-style: italic;
    color: #777;
}

.bwgr-demo-flag {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    color: #92400e;
    background: #fff3e0;
    border-radius: 20px;
    padding: .25rem .8rem;
    margin: 0 0 .8rem;
}

/* ══════════════════════════════════════════════════════════
   Style "Témoignages" — S'ADAPTE AU THÈME DU SITE : aucune couleur
   ni police n'est imposée. Le titre (vrai <h2>) hérite naturellement
   du style de titre du thème actif. Les textes secondaires utilisent
   `currentColor` + opacité pour suivre la couleur de texte du thème,
   quel que soit le site où le shortcode est posé. Seule la couleur
   des étoiles reste fixe (convention universelle de notation).
   ══════════════════════════════════════════════════════════ */
.bwgr-t-wrap {
    --bwgr-t-star: #f4a010;
    /* Fond transparent par défaut (aucune couleur imposée) ; une couleur
       précise renseignée dans les réglages admin la remplace via cette
       variable CSS, posée ici (pas seulement sur l'en-tête) pour couvrir
       aussi les cartes d'avis et les boutons. Coins arrondis pour un rendu
       de "bloc" et un peu de respiration autour du contenu quand le fond
       est utilisé. */
    background: var( --bwgr-t-header-bg, transparent );
    border-radius: 20px;
    padding: 1rem 1.2rem 2rem;
}

.bwgr-t-header {
    text-align: center;
    padding: 2.5rem 1rem 1.5rem;
}
.bwgr-t-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    /* Hérite du thème par défaut (currentColor + opacité) ; une couleur
       précise renseignée dans les réglages admin la remplace via cette
       variable CSS (voir --bwgr-t-eyebrow-color posée sur .bwgr-t-header). */
    color: var( --bwgr-t-eyebrow-color, currentColor );
    opacity: var( --bwgr-t-eyebrow-opacity, .65 );
    margin-bottom: .6rem;
}
/* Petits traits de part et d'autre de l'accroche (motif courant des
   séparateurs de section) — même couleur que le texte de l'accroche. */
.bwgr-t-eyebrow::before,
.bwgr-t-eyebrow::after {
    content: '';
    width: 26px;
    height: 1px;
    background: currentColor;
    opacity: .6;
}
.bwgr-t-title {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    margin: 0 0 1.1rem;
    /* Hérite du style ET de la couleur du <h2> du thème par défaut ; une
       couleur précise dans les réglages admin la remplace. */
    color: var( --bwgr-t-title-color, inherit );
    /* Idem pour la police : héritée du thème par défaut, remplaçable par
       une police précise (et éventuellement une feuille Google Fonts
       chargée automatiquement) renseignée dans les réglages admin. */
    font-family: var( --bwgr-t-title-font, inherit );
}
.bwgr-t-title em {
    font-style: italic;
    color: var( --bwgr-t-highlight-color, currentColor );
    opacity: var( --bwgr-t-highlight-opacity, .75 );
}
.bwgr-t-divider {
    width: 90px;
    height: 2px;
    /* Ligne en fondu (dégradé), en currentColor par défaut (thème) ou dans
       la couleur précisée dans les réglages admin. */
    background: linear-gradient( 90deg, transparent, var( --bwgr-t-divider-color, currentColor ), transparent );
    opacity: .55;
    margin: 0 auto 1.6rem;
}
.bwgr-t-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    color: #1f2937;
    border-radius: 999px;
    padding: .9rem 1.6rem;
    font-size: 1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.bwgr-t-pill strong { font-size: 1.3rem; }
/* Couleur des étoiles de la note globale : gold par défaut (convention
   universelle de notation), remplaçable via la variable posée sur
   .bwgr-t-header (fonctionne aussi bien en style "Témoignages", où la
   variable est déjà définie sur .bwgr-t-wrap, qu'en style "Carrousel",
   d'où le repli explicite ici). */
.bwgr-t-pill-stars { color: var(--bwgr-t-star, #f4a010); letter-spacing: 1px; }
.bwgr-t-pill span:last-child { opacity: .65; }

.bwgr-t-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.3rem;
    margin-top: 1.5rem;
}
.bwgr-t-card {
    background: #fff;
    color: #1f2937;
    border-radius: 14px;
    padding: 1.6rem 1.7rem;
    box-shadow: 0 4px 20px rgba(0,0,0,.07);
}
.bwgr-t-stars {
    color: var(--bwgr-t-star, #f4a010);
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}
.bwgr-t-quote {
    font-style: italic;
    line-height: 1.6;
    font-size: 1.02rem;
    margin: 0 0 1.4rem;
}
.bwgr-t-author {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .85rem;
    opacity: .75;
    margin-bottom: .2rem;
}
.bwgr-t-date {
    font-size: .82rem;
    opacity: .55;
}

.bwgr-t-buttons {
    display: flex;
    justify-content: center;
    gap: .9rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}
/* Même gabarit que les autres boutons pilule du site (majuscules,
   soulignés, gras) : couleurs en currentColor/gris neutre par défaut
   (fonctionne sur n'importe quel thème sans configuration), remplacées par
   la couleur d'accent des réglages admin (--bwgr-t-btn-accent) dès qu'elle
   est renseignée, pour matcher exactement les boutons existants du site. */
.bwgr-t-btn {
    display: inline-block;
    padding: .75rem 1.6rem;
    border-radius: 999px;
    border: 1.5px solid var( --bwgr-t-btn-accent, currentColor );
    color: var( --bwgr-t-btn-accent, inherit );
    text-decoration: underline;
    text-underline-offset: 3px;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .85rem;
    font-weight: 700;
    transition: opacity .15s ease;
}
.bwgr-t-btn:hover { opacity: .7; color: var( --bwgr-t-btn-accent, inherit ); }
/* Bouton "solide" : gris foncé fixe par défaut (pour rester lisible quel
   que soit le thème sans configuration), remplacé par la couleur d'accent
   dès qu'elle est renseignée. */
.bwgr-t-btn-solid {
    background: var( --bwgr-t-btn-accent, #1f2937 );
    border-color: var( --bwgr-t-btn-accent, #1f2937 );
    color: #fff;
}
.bwgr-t-btn-solid:hover { opacity: .85; color: #fff; }

@media (max-width: 640px) {
    .bwgr-t-grid { grid-template-columns: 1fr; }
}

/* ── Témoignages en mode carrousel fluide ──
   Bandeau continu (façon défilement de logos), PAS un passage avis par
   avis : une seule animation CSS en boucle, pas de JS, pas de saut ni
   d'à-coup. Les cartes sont dupliquées une fois côté PHP pour boucler
   sans discontinuité visible (translateX(-50%) = exactement un jeu de
   cartes). Les couleurs des cartes restent inchangées (fond blanc fixe,
   comme le mode grille) ; seules l'accroche/le titre/la pastille du
   dessus gardent les couleurs du thème, comme partout ailleurs sur ce
   style. */
.bwgr-t-carousel-viewport {
    overflow: hidden;
    width: 100%;
}
.bwgr-t-grid.bwgr-t-carousel {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    animation: bwgr-t-scroll var(--bwgr-t-duration, 30s) linear infinite;
}
.bwgr-t-carousel-viewport:hover .bwgr-t-grid.bwgr-t-carousel,
.bwgr-t-grid.bwgr-t-carousel:focus-within {
    animation-play-state: paused;
}
.bwgr-t-grid.bwgr-t-carousel .bwgr-t-card {
    flex: 0 0 320px;
    width: 320px;
}
@keyframes bwgr-t-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .bwgr-t-grid.bwgr-t-carousel { animation: none; }
}