.exr{
  /* ── LE SEUL TOKEN A CHANGER POUR REHABILLER LE BADGE ──────────── */
  --exr-accent:#cdf248;          /* couleur de marque de l'agence     */

  --exr-ink:#0b0d08;             /* fond du theme sombre              */
  --exr-paper:#ffffff;           /* fond du theme clair               */

  /* derives automatiquement de l'accent et du fond */
  --exr-bg:var(--exr-paper);
  --exr-fg:var(--exr-ink);
  --exr-dim:color-mix(in srgb,var(--exr-fg) 58%,var(--exr-bg));
  --exr-line:color-mix(in srgb,var(--exr-fg) 14%,transparent);
  --exr-tile-off:color-mix(in srgb,var(--exr-accent) 20%,
                  color-mix(in srgb,var(--exr-fg) 11%,var(--exr-bg)));
  /* Par defaut l'etoile est un trou dans la tuile : elle laisse voir ce qui
     est derriere le badge, quel que soit le fond. Les deux variables ci-dessous
     ne servent qu'en mode data-star="solid", plus la pastille "verifiee"
     et les initiales des avatars. */
  --exr-knock:var(--exr-bg);
  --exr-knock-on:var(--exr-ink); /* recalcule par le JS selon l'accent */

  --exr-star:22px;
  --exr-gap:3px;

  font-family:Inter,"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--exr-fg);
  -webkit-font-smoothing:antialiased;
  text-align:left;
  box-sizing:border-box;
}
.exr *,.exr *::before,.exr *::after{box-sizing:inherit}
.exr-verification-link{display:none!important}
/* garde-fou : le CSS du site hôte ne doit pas repeindre le widget */
.exr :where(p,div,span,a,b,i){margin:0;padding:0;color:inherit;font:inherit;
  text-align:inherit;text-decoration:none;text-transform:none;letter-spacing:inherit}
.exr[data-theme="dark"]{
  --exr-bg:var(--exr-ink);
  --exr-fg:color-mix(in srgb,var(--exr-accent) 12%,#ffffff);
  --exr-line:color-mix(in srgb,var(--exr-accent) 20%,transparent);
}
@media (prefers-color-scheme:dark){
  .exr[data-theme="auto"]{
    --exr-bg:var(--exr-ink);
    --exr-fg:color-mix(in srgb,var(--exr-accent) 12%,#ffffff);
    --exr-line:color-mix(in srgb,var(--exr-accent) 20%,transparent);
  }
}

/* — étoiles — */
.exr-stars{display:inline-flex;gap:var(--exr-gap);vertical-align:middle;line-height:0}
.exr-stars svg{width:var(--exr-star);height:var(--exr-star);display:block}
.exr-stars .t-off{fill:var(--exr-tile-off)}
.exr-stars .t-on{fill:var(--exr-accent)}
/* mode star="solid" : l'etoile est peinte au lieu d'etre percee */
.exr-stars .t-glyph{fill:var(--exr-knock)}
.exr-stars .t-glyph-on{fill:var(--exr-knock-on)}

/* — logo — */
.exr-logo{display:inline-block;height:19px;width:auto;opacity:.92}
.exr-sig{display:inline-flex;align-items:center;gap:6px;color:var(--exr-dim);font-size:12px;white-space:nowrap}
.exr-brand{display:inline-flex;align-items:center;border-radius:4px}
.exr-brand:hover .exr-logo{opacity:1}
.exr-brand:focus-visible{outline:2px solid var(--exr-accent);outline-offset:3px}

/* — chiffres — */
.exr-score{font-family:Nunito,Inter,sans-serif;font-weight:900;letter-spacing:-.02em;line-height:1;color:var(--exr-fg)}
.exr-verdict{font-family:Nunito,Inter,sans-serif;font-weight:800;letter-spacing:-.015em;line-height:1;color:var(--exr-fg)}

/* ── variante : inline ─────────────────────────────────────────────── */
.exr[data-variant="inline"]{display:inline-flex;align-items:center;gap:10px;--exr-star:17px;--exr-gap:2px}
.exr[data-variant="inline"] .exr-score{font-size:15px}
.exr[data-variant="inline"] .exr-meta{font-size:13px;color:var(--exr-dim)}
.exr[data-variant="inline"] .exr-logo{height:15px}

/* ── variante : block ──────────────────────────────────────────────── */
.exr[data-variant="block"]{display:inline-block;background:var(--exr-bg);padding:20px 22px;border-radius:16px;border:1px solid var(--exr-line);min-width:236px}
.exr[data-variant="block"] .exr-title{font-family:Nunito,Inter,sans-serif;font-size:clamp(18px,6vw,26px);font-weight:900;letter-spacing:-.02em;line-height:1.08;margin:0 0 14px;overflow-wrap:anywhere}
.exr[data-variant="block"] .exr-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--exr-line);padding-top:14px}

/* ── variante : card ───────────────────────────────────────────────── */
.exr[data-variant="card"]{display:block;width:min(380px,100%);background:var(--exr-bg);border:1px solid var(--exr-line);border-radius:20px;padding:24px;max-width:380px}
.exr[data-variant="card"] .exr-title{font-family:Nunito,Inter,sans-serif;font-size:clamp(17px,5vw,20px);font-weight:900;letter-spacing:-.02em;line-height:1.08;margin:0 0 16px;overflow-wrap:anywhere}
.exr[data-variant="card"] .exr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.exr[data-variant="card"] .exr-score{font-size:44px}
.exr[data-variant="card"] .exr-outof{font-size:15px;font-weight:500;color:var(--exr-dim);margin-left:2px;font-family:Inter,sans-serif;letter-spacing:0}
.exr[data-variant="card"] .exr-verdict{font-size:17px;margin:10px 0 4px}
.exr[data-variant="card"] .exr-sub{font-size:13px;color:var(--exr-dim)}
.exr-bars{display:grid;gap:7px;margin:18px 0 20px}
.exr-bar{display:grid;grid-template-columns:34px 1fr 40px;align-items:center;gap:10px;font-size:12px;color:var(--exr-dim)}
.exr-bar i{font-style:normal;display:flex;align-items:center;gap:3px;color:var(--exr-fg);font-weight:500}
.exr-bar i svg{width:11px;height:11px}
.exr-track{height:7px;border-radius:99px;background:var(--exr-tile-off);overflow:hidden}
.exr-fill{display:block;height:100%;background:var(--exr-accent);border-radius:99px;width:0;transition:width .7s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){.exr-fill{transition:none}}
.exr-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--exr-line);padding-top:16px}
.exr-link{color:var(--exr-fg);font-size:13px;font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--exr-accent);padding-bottom:1px}
.exr-link:hover{border-bottom-width:3px}
.exr-link:focus-visible,.exr-card:focus-visible{outline:2px solid var(--exr-accent);outline-offset:3px;border-radius:4px}

/* ── variante : wall ───────────────────────────────────────────────── */
.exr[data-variant="wall"]{display:block;max-width:100%}
.exr-wall-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.exr-wall-head .exr-score{font-size:20px}
.exr-wall-head .exr-meta{font-size:13px;color:var(--exr-dim)}
.exr-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
.exr-rail::-webkit-scrollbar{height:5px}
.exr-rail::-webkit-scrollbar-thumb{background:var(--exr-tile-off);border-radius:99px}
.exr-card{scroll-snap-align:start;flex:0 0 268px;background:var(--exr-bg);border:1px solid var(--exr-line);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit}
.exr-who{display:flex;align-items:center;gap:10px}
.exr-av{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--exr-accent);color:var(--exr-knock-on);display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.exr-name{font-size:14px;font-weight:600;display:flex;align-items:center;gap:5px;line-height:1.2}
.exr-name svg{width:13px;height:13px;flex:none}
.exr-when{font-size:11.5px;color:var(--exr-dim);margin-top:2px}
.exr-quote{font-size:13.5px;line-height:1.5;color:var(--exr-fg);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.exr-quote b{font-weight:600}

/* — état de chargement / erreur — */
.exr[data-state="loading"]{opacity:.55}
.exr[data-state="loading"] .exr-skel{background:var(--exr-tile-off);border-radius:6px;color:transparent!important}
.exr-err{font-size:12.5px;color:var(--exr-dim);margin:0}
.exr[hidden]{display:none!important}

/* Responsive additions to the reference design. */
.exr{max-width:100%;overflow-wrap:anywhere}
.exr[data-variant="inline"]{flex-wrap:wrap}
.exr[data-variant="block"]{min-width:0}
.exr[data-variant="card"] .exr-head{flex-wrap:wrap}
.exr-card{max-width:85vw}
.exr-reply{border-top:1px solid var(--exr-line);padding-top:10px;font-size:12px;line-height:1.5}
.exr-quote{display:block;overflow:visible}
.exr-rail:focus-visible{outline:2px solid var(--exr-accent)}

.exr[data-variant="inline"] .exr-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.exr[data-variant="block"] .exr-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.exr[data-variant="block"] .exr-score{font-size:24px;margin-right:1px}
.exr[data-variant="block"] .exr-meta{font-size:13px;color:var(--exr-dim);margin-left:2px}
.exr[data-variant="card"] .exr-head .exr-meta{flex-basis:100%;font-size:13px;color:var(--exr-dim)}