/* Scène « Un seul chiffre » — Pilotage. À plat : aplats, traits, bordures fines. Classes préfixées bc-. */
.bc-tuile, .bc-neq, .bc-pastille, .bc-volet { position: absolute; left: 0; top: 0; }

/* Une version du chiffre : même intitulé, une valeur, sa définition */
.bc-tuile { display: grid; grid-template-rows: 20px 1fr 20px; align-items: center; padding: 14px; border-radius: var(--r-2); background: var(--surface); border: 1px solid var(--line-fort); color: var(--ink); line-height: 1; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.bc-nom { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bc-val { display: inline-grid; justify-self: start; font-size: 46px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.bc-def { font-size: 12px; font-weight: 600; color: var(--text); }

/* Un texte et son double ambre, superposés : seule l’opacité change */
.bc-val > b, .bc-pct > b { grid-area: 1 / 1; font-weight: inherit; }
.bc-a { color: var(--ambre); opacity: 0; }
.bc-pct .bc-a { color: var(--ambre-texte); }

/* La version gardée : un contour accent et une coche, puis (temps fort) la tuile entière en aplat d’accent :
   il n’y a plus qu’un chiffre. Elle bat une fois (voir le JS). */
.bc-anneau { position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--accent-fonce); opacity: 0; }
.bc-coche { position: absolute; top: -11px; right: -11px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent-fonce); opacity: 0; }
.bc-coche svg { width: 14px; height: 14px; fill: none; stroke: var(--accent-texte); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bc-tuile.bc-une { background: var(--accent-fonce); border-color: var(--accent-fonce); color: #fff; }
.bc-une .bc-nom, .bc-une .bc-def { color: #fff; }

/* Relief : le volet de détail est le support (0). Les trois versions sont posées à la même hauteur (aucune n’est
   privilégiée d’avance) ; les signes « différent de » sont posés sur elles ; l’écart en clair est une étiquette basse. */
.bc-pastille { translate: 0 0 calc(12px * var(--relief)); }
.bc-tuile { translate: 0 0 calc(20px * var(--relief)); }
.bc-neq { translate: 0 0 calc(30px * var(--relief)); }

/* Les écarts, en ambre */
.bc-neq { z-index: 4; display: grid; place-items: center; width: 26px; height: 26px; margin: -13px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ambre); color: var(--ambre-texte); opacity: 0; }
.bc-neq svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.bc-pastille { padding: 6px 14px; border-radius: var(--r-pilule); background: var(--surface); border: 1px solid var(--ambre); font-size: 12.5px; font-weight: 700; line-height: 1.2; color: var(--ambre-texte); white-space: nowrap; opacity: 0; }

/* Le détail : une fenêtre fixe sous la tuile. Le panneau y descend, son contenu remonte d’autant et reste donc en place :
   on voit le bord bas avancer. Le bord haut, lui, ne bouge pas (::before). */
.bc-volet { z-index: 0; overflow: hidden; border-radius: var(--r-2); opacity: 0; }
.bc-volet::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: var(--r-2); border: 1px solid var(--line-fort); border-bottom: 0; border-radius: var(--r-2) var(--r-2) 0 0; pointer-events: none; }
.bc-panneau { height: 100%; overflow: hidden; border-radius: var(--r-2); background: var(--surface); border: 1px solid var(--line-fort); will-change: transform; }
.bc-contenu { will-change: transform; }
.bc-tete { display: flex; align-items: center; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1; color: var(--muted); }
.bc-barre { display: grid; grid-template-columns: 78px 1fr 46px; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 600; line-height: 1; color: var(--text); white-space: nowrap; opacity: 0; }
.bc-piste { height: 14px; border-radius: 4px; background: var(--bg-doux); overflow: hidden; }
.bc-plein { position: relative; display: block; height: 100%; border-radius: 4px; background: var(--accent); overflow: hidden; transform-origin: 0 50%; will-change: transform; }
.bc-plein i { position: absolute; inset: 0; background: var(--ambre); opacity: 0; }
.bc-pct { display: inline-grid; justify-self: end; font-size: 14.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Sous la barre basse : les ventes qui l’expliquent */
.bc-ventes { position: relative; margin-left: 90px; padding-left: 14px; }
.bc-filet { position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; border-radius: 1.5px; background: var(--ambre); transform-origin: 50% 0; }
.bc-vente { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; }
.bc-vente + .bc-vente { border-top: 1px solid var(--line); }
.bc-vente b { font-weight: 700; color: var(--ink); }
.bc-vente em { font-style: normal; font-weight: 700; color: var(--ambre-texte); }

/* Petit écran : tuiles en bandeau (intitulé et définition à gauche, valeur à droite), volet plus étroit que la tuile */
.bc-compact .bc-tuile { grid-template-columns: 1fr auto; grid-template-rows: 1fr 1fr; column-gap: 12px; row-gap: 6px; padding: 0 14px; border-radius: 10px; }
.bc-compact .bc-nom { align-self: end; font-size: 10px; }
.bc-compact .bc-def { align-self: start; font-size: 11px; }
.bc-compact .bc-val { grid-column: 2; grid-row: 1 / 3; justify-self: end; font-size: 26px; }
.bc-compact .bc-coche { top: -9px; right: -9px; width: 22px; height: 22px; }
.bc-compact .bc-coche svg { width: 12px; height: 12px; }
.bc-compact .bc-neq { width: 22px; height: 22px; margin: -11px; }
.bc-compact .bc-neq svg { width: 13px; height: 13px; }
.bc-compact .bc-pastille { padding: 4px 11px; font-size: 11px; }
.bc-compact .bc-volet, .bc-compact .bc-panneau { border-radius: 10px; }
.bc-compact .bc-volet::before { height: 10px; border-radius: 10px 10px 0 0; }
.bc-compact .bc-tete { font-size: 10px; }
.bc-compact .bc-barre { grid-template-columns: 56px 1fr 34px; gap: 8px; font-size: 11px; }
.bc-compact .bc-pct { font-size: 12.5px; }
.bc-compact .bc-piste { height: 10px; border-radius: 3px; }
.bc-compact .bc-plein { border-radius: 3px; }
.bc-compact .bc-ventes { margin-left: 0; padding-left: 10px; }
.bc-compact .bc-vente { grid-template-columns: 52px 1fr auto; gap: 8px; font-size: 10.5px; }