/* HOP — classes de composants. Charger après tokens.css. */
body{background:var(--surface);color:var(--texte);font-family:var(--font-text)}
.hop-surtitre{font-family:var(--font-text);font-size:12px;line-height:1.35;font-weight:500;letter-spacing:.18em;color:var(--texte-accent);margin:0 0 var(--space-3)}
.hop-surtitre::after{content:"";display:block;width:56px;height:var(--lisere);background:var(--vert-hop);margin-top:var(--space-2)}
.hop-bloc{border-radius:var(--radius-0);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);min-height:160px;box-sizing:border-box}
.hop-bloc h3{font-family:var(--font-display);font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.02em;margin:0}
.hop-bloc p{font-size:13px;line-height:1.5;margin:0}
.hop-bloc .hop-bloc-label{font-size:11px;letter-spacing:.18em;font-weight:500;opacity:.8}
.hop-bloc--vert{background:var(--vert-hop);color:var(--nuit)}
.hop-bloc--lime{background:var(--lime);color:var(--encre)}
.hop-bloc--teal{background:var(--teal);color:var(--encre)}
.hop-bloc--bleu{background:var(--bleu);color:var(--papier)}
.hop-bloc--encre{background:var(--encre);color:var(--papier);border-top:var(--lisere) solid var(--vert-hop)}
.hop-bloc--papier{background:var(--surface-carte);color:var(--texte);border:var(--filet) solid var(--trait)}
.hop-pastille{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--radius-pill);background:var(--lime);color:var(--encre);font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.02em}
.hop-pastille--vert{background:var(--vert-hop);color:var(--nuit)}
.hop-pastille--nuit{background:var(--nuit);color:var(--vert-hop)}
.hop-pastille--sm{width:32px;height:32px;font-size:14px}
.hop-chiffre{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2);background:var(--surface-carte);border-top:var(--lisere) solid var(--vert-hop)}
.hop-chiffre strong{font-family:var(--font-display);font-size:56px;line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--texte)}
.hop-chiffre strong small{font-size:17px;font-weight:600;letter-spacing:0;margin-left:2px}
.hop-chiffre span{font-size:13px;line-height:1.5;color:var(--texte-discret)}