/**
 * Badge « note + nombre d'avis » — trois formes, un seul balisage.
 *
 * Les tailles sont calées sur la carte d'origine (`[attps_uni_google_card]`) :
 * note à 1.5rem, libellés à 0.875rem, 1rem de padding. C'est un BADGE, une
 * pastille qu'on pose à côté d'un titre ou dans un en-tête — pas un bloc de
 * mise en avant.
 *
 * ── Deux niveaux de spécificité, et le pourquoi du `div:where()` ───────────
 *
 * L'habillage doit passer SOUS les classes utilitaires (`atb-p-4`, `atb-bg-*`,
 * `atb-w-full`…) et AU-DESSUS du reset d'Eric Meyer que le thème inline —
 * celui qui fait `div, span, … { margin: 0; padding: 0; background: transparent }`.
 *
 * Un `:where()` seul (spécificité 0-0-0) perdait contre ce reset : le badge
 * sortait sans fond et sans padding. Une classe simple (0-1-0) gagnait contre
 * les utilitaires, cette feuille étant chargée après elles — l'inverse du but.
 *
 * `div:where(.attps-reviews-badge)` vaut 0-0-1 : à égalité avec le reset, mais
 * déclaré plus tard, donc il gagne ; et toute classe utilitaire (0-1-0) le bat.
 * C'est le seul cran qui tient les deux bouts.
 *
 * Restent à spécificité normale les VARIABLES et les propriétés STRUCTURELLES —
 * celles qui font qu'une barre est une barre et une pastille un disque. Les
 * écraser casserait la forme, pas l'habillage.
 *
 * Couleurs ET polices sont des variables : il n'y a pas de champ pour elles, on
 * les règle en CSS personnalisé — `& { --attps-badge-bg: #fff;
 * --attps-badge-note-font: var(--atb-font-heading); }`.
 */

.attps-reviews-badge {
    /* Clair par défaut : bleu nuit sur gris. */
    --attps-badge-bg: #e6e9ee;
    --attps-badge-color: #1b2438;
    --attps-badge-muted: #4a5468;
    --attps-badge-divider: rgba(27, 36, 56, 0.22);

    --attps-badge-logo: 28px;
    --attps-badge-note-size: 1.5rem;
    --attps-badge-max-size: 1rem;
    --attps-badge-count-size: 0.875rem;
    --attps-badge-label-size: 0.75rem;
    --attps-badge-padding: 1rem;
    --attps-badge-gap: 0.75rem;

    /*
     * Typographie : `inherit` par défaut, donc le badge prend la police de son
     * contexte. Un site a rarement la même pour un chiffre de mise en avant et
     * pour sa légende — la carte d'origine posait une Montserrat sur la note et
     * une Roboto Condensed sur le compte. Deux variables suffisent à le dire,
     * là où il aurait fallu deux sélecteurs de descendant.
     */
    --attps-badge-note-font: inherit;
    --attps-badge-count-font: inherit;

    /* Structure : la racine EST la boîte. */
    display: flex;
    align-items: center;
    box-sizing: border-box;
    line-height: 1.2;

    /* Un lien la recouvre en absolu ; sans repère, il couvrirait la page. */
    position: relative;
}

/* Habillage : surchargeable par n'importe quelle classe posée sur le badge. */
div:where(.attps-reviews-badge) {
    width: fit-content;
    max-width: 100%;
    gap: var(--attps-badge-gap);
    padding: var(--attps-badge-padding);
    background: var(--attps-badge-bg);
    color: var(--attps-badge-color);
}

/* Sombre : blanc sur bleu nuit. Seules les couleurs changent. */
.attps-reviews-badge--dark {
    --attps-badge-bg: #192743;
    --attps-badge-color: #ffffff;
    --attps-badge-muted: rgba(255, 255, 255, 0.72);
    --attps-badge-divider: rgba(255, 255, 255, 0.4);
}

/* Le lien : toute la boîte devient cliquable, sans être elle-même le lien. */
.attps-reviews-badge__link {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.attps-reviews-badge:has(.attps-reviews-badge__link):hover,
.attps-reviews-badge:has(.attps-reviews-badge__link:focus-visible) {
    filter: brightness(0.96);
}

.attps-reviews-badge--dark:has(.attps-reviews-badge__link):hover,
.attps-reviews-badge--dark:has(.attps-reviews-badge__link:focus-visible) {
    filter: brightness(1.15);
}

.attps-reviews-badge__logo {
    display: inline-flex;
    flex: 0 0 auto;
}

.attps-reviews-badge__logo img {
    display: block;
    width: var(--attps-badge-logo);
    height: auto;
}

.attps-reviews-badge__note {
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
    white-space: nowrap;
    font-family: var(--attps-badge-note-font);
}

.attps-reviews-badge__value {
    font-size: var(--attps-badge-note-size);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.attps-reviews-badge__max {
    font-size: var(--attps-badge-max-size);
    font-weight: 400;
    opacity: 0.85;
}

.attps-reviews-badge__count {
    display: flex;
    flex-direction: column;
    font-size: var(--attps-badge-count-size);
    font-family: var(--attps-badge-count-font);
}

.attps-reviews-badge__number {
    font-weight: 700;
}

/* Le libellé accompagne le nombre : il se lit en second, il est plus petit. */
.attps-reviews-badge__label {
    font-size: var(--attps-badge-label-size);
    color: var(--attps-badge-muted);
}

/* --------------------------------------------------------------- barre */
/* Logo, note, puis le compte en deux lignes à droite. */

.attps-reviews-badge--bar {
    --attps-badge-padding: 0.6rem 1.1rem;
    --attps-badge-gap: 1rem;
}

/* --------------------------------------------------------------- panneau */
/* Note en haut, filet, puis le compte en dessous — d'où la grille. */

.attps-reviews-badge--panel {
    --attps-badge-gap: 0.5rem 0.75rem;

    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    text-align: center;
}

/*
 * Le compte occupe toute la largeur sous les deux colonnes, séparé par un
 * filet. `grid-column: 1 / -1` plutôt qu'une valeur figée : la première colonne
 * disparaît quand le logo est masqué, et la règle tient quand même.
 */
.attps-reviews-badge--panel .attps-reviews-badge__count {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;
    /* Deux tailles de texte sur une même ligne : c'est la ligne de BASE qui les
       aligne, pas leurs boîtes — que `stretch` (le défaut) décalerait. */
    align-items: baseline;
    gap: 0.3rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--attps-badge-divider);
}

/* --------------------------------------------------------------- pastille */
/* Disque : tout en colonne, centré, avec un rapport 1:1 garanti. */

.attps-reviews-badge--circle {
    --attps-badge-padding: 0.75rem;
    --attps-badge-gap: 0.25rem;

    flex-direction: column;
    justify-content: center;
    text-align: center;
}

div:where(.attps-reviews-badge--circle) {
    width: var(--attps-badge-size, 116px);
    aspect-ratio: 1;
    /* Seule exception au rayon libre : sans lui, ce n'est plus une pastille. */
    border-radius: 50%;
}

.attps-reviews-badge--circle .attps-reviews-badge__logo img {
    width: calc(var(--attps-badge-logo) * 0.8);
}

.attps-reviews-badge--circle .attps-reviews-badge__count {
    align-items: center;
    gap: 0.1rem;
    font-size: 0.75rem;
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 400px) {
    .attps-reviews-badge--bar {
        flex-wrap: wrap;
    }
}

/*
 * Le texte réservé aux lecteurs d'écran. La règle est celle de WordPress, mais
 * on ne peut pas compter dessus : `screen-reader-text` vient de la feuille du
 * THÈME, et un thème qui ne la déclare pas afficherait la phrase en clair au
 * milieu du badge.
 */
.attps-reviews-badge .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}