/* Scène « Le nuage se cristallise » — Business Intelligence. À plat : traits, aplats, aucune ombre. Classes préfixées cr-. */
.cr-plan, .cr-base, .cr-val, .cr-barre, .cr-courbe, .cr-mois, .cr-faux, .cr-total { position: absolute; left: 0; top: 0; }

/* La feuille de tableur : couchée en perspective au départ, elle pivote autour de son bord bas */
.cr-plan { transform-origin: 50% 100%; opacity: 0; will-change: transform, opacity; }
.cr-feuille { position: absolute; inset: 0; border-radius: 4px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-fort); }
.cr-lignes { position: absolute; inset: 0; }
.cr-v { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-fort); }
.cr-h { position: absolute; left: 0; right: 0; height: 1px; background: var(--line-fort); }
.cr-base { height: 2px; margin-top: -1px; border-radius: 1px; background: var(--ink); opacity: 0; }

/* Les valeurs : floues et de toutes tailles dans le nuage, nettes et alignées à droite dans leur cellule */
.cr-val { display: flex; align-items: center; justify-content: flex-end; box-sizing: border-box; padding-right: 11px; font-size: 12.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; opacity: 0; will-change: transform, opacity, filter; }

/* Le graphique */
.cr-barre { border-radius: 4px 4px 0 0; background: var(--accent); transform: scaleY(0); transform-origin: 50% 100%; will-change: transform; }
.cr-ecart { position: absolute; inset: 0; border-radius: inherit; background: var(--ambre); opacity: 0; }
.cr-courbe svg { display: block; overflow: visible; }
.cr-courbe path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.cr-courbe circle { fill: var(--ink); opacity: 0; }
.cr-mois { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.3; opacity: 0; }

/* Les totaux : trois chiffres en ambre pour la même chose, puis un seul */
.cr-faux, .cr-total { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; box-sizing: border-box; border-radius: var(--r-2); background: var(--surface); border: 1px solid var(--line-fort); white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.cr-faux span, .cr-total span { font-size: 11px; font-weight: 700; color: var(--muted); line-height: 1; }
.cr-faux b, .cr-total b { font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.cr-faux { border: 1.5px solid var(--ambre); }
.cr-faux b { font-size: 17px; color: var(--ambre-texte); }
/* Temps fort : le total unique est un aplat d’accent (il n’existe qu’à la résolution ; il bat une fois, voir le JS) */
.cr-total { background: var(--accent-fonce); border-color: var(--accent-fonce); }
.cr-total span { color: #fff; }
.cr-total b { font-size: 27px; color: #fff; }
.cr-total small { font-size: .52em; font-weight: 700; color: #fff; }

/* Relief : la feuille et les libellés sont le support (0). Les valeurs sont posées dessus, très bas : plus haut, elles
   ne seraient plus centrées dans leur cellule tant que la maquette est inclinée. L’axe et les barres se dressent
   au-dessus d’elles (et les recouvrent) ; la courbe passe au-dessus des barres ; les totaux, que l’on déplace et que
   l’on fusionne, sont les plus hauts. */
.cr-val { translate: 0 0 calc(6px * var(--relief)); }
.cr-base, .cr-barre { translate: 0 0 calc(14px * var(--relief)); }
.cr-courbe { translate: 0 0 calc(24px * var(--relief)); }
.cr-faux, .cr-total { translate: 0 0 calc(36px * var(--relief)); }

/* Petit écran : feuille de face, quatre colonnes, barres seules */
.cr-compact .cr-val { font-size: 11px; padding-right: 8px; }
.cr-compact .cr-barre { border-radius: 3px 3px 0 0; }
.cr-compact .cr-mois { font-size: 11px; }
.cr-compact .cr-faux, .cr-compact .cr-total { gap: 4px; border-radius: var(--r-1); }
.cr-compact .cr-faux span, .cr-compact .cr-total span { font-size: 10.5px; }
.cr-compact .cr-faux b { font-size: 13.5px; }
.cr-compact .cr-total b { font-size: 19px; }