/**
 * VivaWeb Reviews — badge d’avis.
 *
 * Chargé par le seul shortcode [vivaweb_reviews_badge], sans JavaScript.
 *
 * Toutes les règles sont scopées sous .vwr-badge, et ce n’est pas de la coquetterie :
 * le widget d’avis (frontend.css) utilise déjà .vwr-score, .vwr-sep, .vwr-stars,
 * .vwr-link et .vwr-cta pour d’autres rôles, et les deux feuilles se croisent dès
 * qu’une page porte les deux shortcodes. Partout où un nom est partagé, les
 * propriétés concernées sont redéclarées ici plutôt qu’héritées.
 */

.vwr-badge {
    /* Les trois premières sont surchargées en ligne par PHP : l’accent choisi,
       l’encre lisible sur cet accent, et la couleur d’étoile — le navy en accent
       sur fond sombre disparaîtrait, PHP le remplace alors par un bleu clair. */
    --vwr-accent: #f2a73b;
    --vwr-accent-ink: #10294a;
    --vwr-star: var(--vwr-accent);

    /* Une seule échelle pilote toutes les tailles. Elle est le produit de la
       taille demandée (s/m/l) et d’un facteur d’ajustement mobile, pour que le
       bandeau tienne dans une colonne étroite sans changer de règles. */
    --vwr-size: 1;
    --vwr-fit: 1;
    --vwr-scale: calc(var(--vwr-size) * var(--vwr-fit));

    /* L’espacement des étoiles est un jeton parce que deux règles en dépendent :
       l’espacement lui-même, et la compensation de l’espace de fin ci-dessous. */
    --vwr-ls: calc(2px * var(--vwr-scale));

    --vwr-surface: #fff;
    --vwr-ink: #10294a;
    --vwr-muted: #6b7280;
    --vwr-faint: #a9b2bd;
    --vwr-label: #8a9099;
    --vwr-line: #e7e9ed;
    --vwr-star-off: #dfe3e8;

    display: flex;
    box-sizing: border-box;
    max-width: 100%;
    color: var(--vwr-ink);
    /* Un thème qui centre le texte de son bloc décalerait la couche pleine des
       étoiles par rapport à la couche vide : les deux doivent partir du même bord. */
    text-align: start;
    /* Comme le widget : la police vient du thème, aucune webfont n’est chargée. */
    font-family: var(--vwr-font, inherit);
    line-height: 1.4;
    text-decoration: none;
}

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

.vwr-badge--s { --vwr-size: .82; }
.vwr-badge--l { --vwr-size: 1.18; }

.vwr-badge--dark {
    --vwr-surface: #10294a;
    --vwr-ink: #fff;
    --vwr-muted: #a9bbd0;
    --vwr-faint: #7c93b0;
    --vwr-label: #7c93b0;
    --vwr-line: rgba(255, 255, 255, .14);
    --vwr-star-off: #2c4870;
}

/* L’enveloppe aligne le badge, et rien d’autre. Elle a bien été essayée en
   conteneur de requête — l’échelle aurait alors cédé sur la largeur réelle de la
   colonne plutôt que sur celle de la fenêtre — mais `container-type: inline-size`
   rend sa largeur indépendante de son contenu : dans un parent qui se dimensionne
   sur son contenu (une colonne flex Kadence, une cellule, un flottant), le badge
   s’effondre à quelques pixels. Le repli sur la largeur de fenêtre est moins fin,
   mais il ne casse rien. */
.vwr-badge-fit {
    display: flex;
    justify-content: flex-start;
}

.vwr-badge-fit--center { justify-content: center; }
.vwr-badge-fit--right { justify-content: flex-end; }

.vwr-badge--compact, .vwr-badge--card, .vwr-badge--pill { width: fit-content; }
.vwr-badge--bar { width: 100%; }

a.vwr-badge:focus-visible { outline: 2px solid var(--vwr-accent); outline-offset: 3px; }

/* ---------- Pièces communes ---------- */

.vwr-badge .vwr-score {
    display: flex;
    align-items: baseline;
    gap: 1px;
    margin: 0;
}

.vwr-badge .vwr-score__num {
    color: var(--vwr-ink);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1;
}

.vwr-badge .vwr-score__max {
    color: var(--vwr-faint);
    font-weight: 700;
}

.vwr-badge .vwr-sep {
    flex: 0 0 auto;
    width: 1px;
    margin: 0;
    background: var(--vwr-line);
}

.vwr-badge .vwr-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Étoiles au prorata : deux fois le même texte, la couche pleine découpée à la
   largeur exacte de la note. Des caractères, donc pas de SVG à charger, et le
   remplissage suit la police du thème. */
.vwr-badge .vwr-stars {
    position: relative;
    /* Sans cela, l’étirement du conteneur flex donne aux étoiles la largeur de la
       ligne de méta, bien plus longue : la couche pleine, en pourcentage de cette
       largeur, recouvrirait alors les cinq étoiles quelle que soit la note. */
    align-self: start;
    display: inline-block;
    color: var(--vwr-star-off);
    letter-spacing: var(--vwr-ls);
    line-height: 1;
    white-space: nowrap;
}

/* L’espacement s’ajoute aussi après la dernière étoile. Le retrancher rend le
   pourcentage exact : il porte sur les cinq dessins, pas sur un blanc de fin. */
.vwr-badge .vwr-stars__empty { margin-inline-end: calc(-1 * var(--vwr-ls)); }

.vwr-badge .vwr-stars__full {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    color: var(--vwr-star);
}

.vwr-badge .vwr-meta {
    color: var(--vwr-muted);
    font-weight: 500;
}

.vwr-badge .vwr-meta strong {
    color: var(--vwr-ink);
    font-weight: 800;
}

/* ---------- Bandeau compact ---------- */

.vwr-badge--compact {
    align-items: center;
    gap: calc(16px * var(--vwr-scale));
    padding: calc(14px * var(--vwr-scale)) calc(18px * var(--vwr-scale));
    border: 1px solid var(--vwr-line);
    border-radius: 12px;
    background: var(--vwr-surface);
    box-shadow: 0 1px 2px rgba(16, 41, 74, .06);
    transition: border-color .15s ease;
}

a.vwr-badge--compact:hover, a.vwr-badge--compact:focus-visible { border-color: var(--vwr-ink); }

.vwr-badge--compact .vwr-score__num { font-size: calc(32px * var(--vwr-scale)); }
.vwr-badge--compact .vwr-score__max { font-size: calc(14px * var(--vwr-scale)); }
.vwr-badge--compact .vwr-sep { height: calc(34px * var(--vwr-scale)); }
.vwr-badge--compact .vwr-body { gap: calc(5px * var(--vwr-scale)); }

.vwr-badge--compact .vwr-stars { font-size: calc(17px * var(--vwr-scale)); }

/* La source ne doit jamais se couper au milieu : c’est le défaut que ce badge corrige. */
.vwr-badge--compact .vwr-meta {
    font-size: calc(12.5px * var(--vwr-scale));
    white-space: nowrap;
}

/* ---------- Carte verticale ---------- */

.vwr-badge--card {
    flex-direction: column;
    gap: calc(13px * var(--vwr-scale));
    width: calc(214px * var(--vwr-scale));
    padding: calc(20px * var(--vwr-scale));
    border-radius: 14px;
    background: var(--vwr-surface);
    box-shadow: 0 2px 10px rgba(16, 41, 74, .09);
}

.vwr-badge--card.vwr-badge--dark {
    border: 1px solid var(--vwr-line);
    box-shadow: 0 2px 10px rgba(16, 41, 74, .3);
}

.vwr-badge--card .vwr-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.vwr-badge--card .vwr-score__num { font-size: calc(40px * var(--vwr-scale)); }
.vwr-badge--card .vwr-score__max { font-size: calc(16px * var(--vwr-scale)); }

/* La source devient une étiquette : elle ne peut plus déborder sur deux lignes. */
.vwr-badge--card .vwr-source {
    color: var(--vwr-label);
    font-size: calc(11px * var(--vwr-scale));
    font-weight: 800;
    letter-spacing: .08em;
}

.vwr-badge--card .vwr-body { gap: calc(8px * var(--vwr-scale)); }

.vwr-badge--card { --vwr-ls: calc(3px * var(--vwr-scale)); }
.vwr-badge--card .vwr-stars { font-size: calc(22px * var(--vwr-scale)); }

.vwr-badge--card .vwr-meta { font-size: calc(13.5px * var(--vwr-scale)); }

.vwr-badge--card .vwr-link {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding-top: calc(11px * var(--vwr-scale));
    border-top: 1px solid var(--vwr-line);
    color: #1b3a63;
    font-size: calc(13px * var(--vwr-scale));
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.vwr-badge--card.vwr-badge--dark .vwr-link { color: var(--vwr-accent); }
.vwr-badge--card .vwr-link:hover, .vwr-badge--card .vwr-link:focus-visible { color: var(--vwr-accent); }

/* ---------- Note en pastille ---------- */

.vwr-badge--pill {
    align-items: stretch;
    border-radius: 14px;
    overflow: hidden;
    background: var(--vwr-surface);
    box-shadow: 0 2px 10px rgba(16, 41, 74, .09);
}

.vwr-badge--pill.vwr-badge--dark {
    border: 1px solid var(--vwr-line);
    box-shadow: 0 2px 10px rgba(16, 41, 74, .3);
}

.vwr-badge--pill .vwr-pill__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: calc(16px * var(--vwr-scale)) calc(18px * var(--vwr-scale));
    background: #10294a;
}

/* Sur fond sombre le bloc plein doit rester détaché du reste de la pastille. */
.vwr-badge--pill.vwr-badge--dark .vwr-pill__score { background: #1b3a63; }

.vwr-badge--pill .vwr-score__num {
    color: #fff;
    font-size: calc(30px * var(--vwr-scale));
    line-height: 1.1;
}

.vwr-badge--pill .vwr-score__max {
    color: #8fa3bd;
    font-size: calc(11px * var(--vwr-scale));
}

.vwr-badge--pill .vwr-body {
    justify-content: center;
    gap: calc(7px * var(--vwr-scale));
    padding: calc(16px * var(--vwr-scale)) calc(20px * var(--vwr-scale));
}

.vwr-badge--pill .vwr-stars { font-size: calc(18px * var(--vwr-scale)); }

.vwr-badge--pill .vwr-meta {
    font-size: calc(13px * var(--vwr-scale));
    white-space: nowrap;
}

/* ---------- Barre de confiance ---------- */

.vwr-badge--bar {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: calc(20px * var(--vwr-scale));
    padding: calc(18px * var(--vwr-scale)) calc(22px * var(--vwr-scale));
    border-radius: 14px;
    background: var(--vwr-surface);
}

.vwr-badge--bar.vwr-badge--light { border: 1px solid var(--vwr-line); }

.vwr-badge--bar .vwr-lead {
    display: flex;
    align-items: center;
    gap: calc(18px * var(--vwr-scale));
}

.vwr-badge--bar .vwr-score__num { font-size: calc(38px * var(--vwr-scale)); }
.vwr-badge--bar .vwr-score__max { font-size: calc(16px * var(--vwr-scale)); }
.vwr-badge--bar .vwr-body { gap: calc(6px * var(--vwr-scale)); }

.vwr-badge--bar .vwr-stars { font-size: calc(19px * var(--vwr-scale)); }

.vwr-badge--bar .vwr-meta { font-size: calc(13px * var(--vwr-scale)); }

.vwr-badge--bar .vwr-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: calc(11px * var(--vwr-scale)) calc(18px * var(--vwr-scale));
    border: 0;
    border-radius: 10px;
    background: var(--vwr-accent);
    color: var(--vwr-accent-ink);
    font-size: calc(13.5px * var(--vwr-scale));
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: filter .15s ease;
}

.vwr-badge--bar .vwr-cta:hover, .vwr-badge--bar .vwr-cta:focus-visible {
    background: var(--vwr-accent);
    color: var(--vwr-accent-ink);
    filter: brightness(1.08);
}

/* ---------- Colonnes étroites ---------- */

/* Le bandeau et la pastille tiennent leur source sur une ligne : quand la place
   manque, c’est l’échelle qui cède, jamais la ligne. En largeur naturelle et en
   taille normale, le bandeau demande 314 px et la pastille 292 px ; les deux
   paliers ci-dessous les ramènent à 270 puis 245 px.
   Sur un écran large, une colonne de 280 px reste plus étroite que le bandeau en
   taille normale : c’est size="s" (263 px) qu’il faut y poser, ou le style card,
   qui tient partout avec ses 214 px. */
@media (max-width: 600px) {
    .vwr-badge--compact, .vwr-badge--pill { --vwr-fit: .86; }
}

@media (max-width: 400px) {
    .vwr-badge--compact, .vwr-badge--pill { --vwr-fit: .78; }
}

@media (prefers-reduced-motion: reduce) {
    .vwr-badge--compact, .vwr-badge--bar .vwr-cta { transition: none; }
}