.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;
    /* Hérite par défaut (aucune couleur imposée jusqu'ici) ; une couleur
       précise renseignée dans les réglages admin la remplace. !important
       nécessaire sur certains thèmes qui appliquent leur propre couleur/
       opacité de texte aux paragraphes et titres avec une spécificité plus
       forte que cette règle (ex. ".entry-content p"), ce qui rendait le
       texte des avis délavé malgré le réglage. */
    color: var( --bwgr-author-color, inherit ) !important;
}

.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;
    /* Noir par défaut ; une couleur précise renseignée dans les réglages
       admin (Couleurs des avis) la remplace. !important pour la même
       raison que .bwgr-author ci-dessus (thème qui délave le texte des
       paragraphes). */
    color: var( --bwgr-comment-color, #000 ) !important;
    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-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;
    /* Noir par défaut (au lieu de l'ancien héritage de la couleur de carte
       #1f2937) ; une couleur précise renseignée dans les réglages admin
       (Couleurs des avis) la remplace. !important : certains thèmes
       appliquent leur propre couleur/opacité de texte aux paragraphes avec
       une spécificité plus forte que cette règle (ex. ".entry-content p"),
       ce qui délavait le texte des avis malgré le réglage. */
    color: var( --bwgr-comment-color, #000 ) !important;
    opacity: 1 !important;
}
.bwgr-t-author {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .85rem;
    opacity: .75; /* estompage volontaire (libellé auteur discret), pas un bug */
    margin-bottom: .2rem;
    color: var( --bwgr-author-color, inherit ) !important;
}
.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; }
}

/* ── Bandeau d'avis manipulable (styles "Carrousel" et "Témoignages" en
   mode bandeau) ──
   Défilement natif du navigateur (overflow-x + scrollLeft piloté en JS,
   voir assets/carousel.js), PAS une animation CSS figée : glissé à la
   souris/au doigt, flèches manuelles, et reprise automatique optionnelle
   qui se met en pause au survol/au glissé. Cartes dupliquées une fois
   côté PHP pour boucler indéfiniment dans les deux sens (le script
   démarre au milieu du jeu dupliqué). */
.bwgr-scroller-shell { position: relative; }
.bwgr-scroller-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;   /* Firefox */
    -ms-overflow-style: none;
    cursor: grab;
}
.bwgr-scroller-viewport::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge */
.bwgr-scroller-viewport.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto; /* pas de lissage pendant le glissé, sinon ça "traîne" derrière la souris */
}
.bwgr-scroller-track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
}
.bwgr-scroller-track .bwgr-t-card {
    flex: 0 0 320px;
    width: 320px;
}
.bwgr-scroller-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    box-shadow: 0 2px 8px rgba(0,0,0,.14);
    color: #1f2937;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    z-index: 3;
    transition: background .15s ease, opacity .15s ease;
}
.bwgr-scroller-arrow:hover { background: #f3f4f6; }
.bwgr-scroller-arrow-prev { left: -6px; }
.bwgr-scroller-arrow-next { right: -6px; }
@media (max-width: 640px) {
    /* Le glissé tactile natif suffit sur mobile ; les flèches gênent plus
       qu'elles n'aident sur un petit écran. */
    .bwgr-scroller-arrow { display: none; }
}