/* --- le nuage : trois plans de profondeur, un mot par KPI, le pourquoi au centre ---------------------- */
/* la couche du nuage passe au-dessus du tableau des KPI, où ses mots se rangent */
.dc-k-couche { z-index: 6; }
.dc-k-mot { transform-origin: 50% 50%; }
.dc-k-mot-fond { border-radius: 27px; background: var(--dc-carte); box-shadow: var(--dc-ombre-carte); }
/* la profondeur : le plan proche porte l'ombre haute, le plan lointain une ombre à peine posée */
.dc-k-proche .dc-k-mot-fond { box-shadow: var(--dc-ombre-haute); }
.dc-k-lointain .dc-k-mot-fond { background: #fbfbfc; box-shadow: 0 1px 2px rgba(24, 25, 27, 0.05), 0 6px 16px rgba(24, 25, 27, 0.05); }
/* le texte d'un mot : sans approche, pour que sa largeur soit celle que le script mesure (le nom de la ligne le prolonge) */
.dc-k-mot-texte { font: 700 30px/1 var(--dc-fonte); letter-spacing: 0; white-space: nowrap; color: var(--dc-noir); }
/* les branches : du centre à chaque mot, le chemin de son vol (un arbre qui part dans tous les sens) */
.dc-k-branche { stroke: var(--dc-gris); stroke-width: 1.6; }
.dc-k-branche-lointain { stroke: var(--dc-gris-clair); stroke-width: 1.3; }
.dc-k-branche-proche { stroke: var(--dc-gris-fonce); stroke-width: 1.8; }
/* les échos : les mêmes KPI, encore et encore, en gris, derrière les mots */
.dc-k-echo { font-weight: 700; line-height: 1; white-space: nowrap; color: var(--dc-gris); letter-spacing: -0.01em; transform-origin: 0 50%; }
.dc-k-echo-clair { color: var(--dc-gris-clair); }
/* le taux de conversion, ce que tout le reste explique : cerné de noir */
.dc-k-mot-fort .dc-k-mot-fond { box-shadow: inset 0 0 0 2.5px var(--dc-noir), var(--dc-ombre-haute); }
.dc-k-pourquoi {
  display: flex; align-items: center; justify-content: center; padding: 0 34px; border-radius: var(--dc-rayon-carte);
  background: var(--dc-noir) var(--dc-courbes) right -160px top -140px / 760px 570px no-repeat; color: var(--dc-carte);
  font: 700 40px/1.14 var(--dc-fonte); letter-spacing: -0.02em; text-align: center; text-wrap: balance;
  box-shadow: var(--dc-ombre-haute); z-index: 1;
}

/* --- le tableau de tous les KPI ------------------------------------------------------------------------ */
.dc-k-racine { z-index: 5; }
.dc-k-sous { font-size: 17px; }
.dc-k-tete { font-size: 13px; color: var(--dc-gris-texte); }
.dc-k-filet-noir { background: var(--dc-noir); }
.dc-k-rang::after { content: ""; position: absolute; left: 36px; right: 36px; bottom: 0; height: 1px; background: var(--dc-gris-doux); }
.dc-k-nom { font: 700 22px/1 var(--dc-fonte); letter-spacing: 0; white-space: nowrap; }
/* la suite du nom : elle prolonge le mot posé (« Sources de trafic » → « (le mix) ») */
.dc-k-suite { font: 700 22px/1 var(--dc-fonte); letter-spacing: 0; white-space: pre; }
.dc-k-suite-precise { font-weight: 400; color: var(--dc-gris-texte); }
.dc-k-valeur { font: 400 22px/1 var(--dc-fonte); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dc-k-semaine { font-weight: 700; }
.dc-k-lecture {
  display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 14px;
  font: 700 16px/1 var(--dc-mono); white-space: nowrap; background: var(--dc-gris-doux);
}
/* l'abandon au paiement : ce qui recule le plus ; le chiffre en jaune sur la pastille noire, le seul jaune du tableau */
.dc-k-lecture-fort { background: var(--dc-noir); color: var(--dc-jaune); }
.dc-k-note { font: 700 17px/1 var(--dc-fonte); white-space: nowrap; }
.dc-k-cerne { overflow: visible; }
/* le taux de conversion clôt le tableau */
.dc-k-rang-total::before { content: ""; position: absolute; left: 36px; right: 36px; top: -4px; height: 2px; background: var(--dc-noir); }
.dc-k-rang-total .dc-k-valeur { font-weight: 700; }

/* --- le tampon : « Rien n'est oublié. » ------------------------------------------------------------------ */
.dc-k-tampon {
  display: inline-flex; align-items: center; gap: 14px; height: 60px; padding: 0 26px; border-radius: var(--dc-rayon-pastille);
  background: var(--dc-noir); color: var(--dc-carte); font: 900 32px/1 var(--dc-fonte); letter-spacing: -0.02em; white-space: nowrap;
  box-shadow: var(--dc-ombre-haute);
}
.dc-k-tampon-coche { flex: none; }