Tooltip CSS is broken with new CSS customisation

[tfrancart]

CSS themes assign variables on the

element with class Sparnatural:

.Sparnatural {
/**
 * Color of the criteria arrows (orange)
 **/
 --primary-color-main: rgba(252, 61, 14, 0.781);

 /**
  * Color of the "unselect" buttons in criterias (dark orange)
  **/
--primary-color-important: rgb(139, 40, 9) ;
 
 /**
  * Color of the bottom : folded variable selector, and of a selected value in a criteria (light orange)
  **/
--primary-color-medium: rgb(255, 210, 157) ;

...
}

Tippy CSS customisation for the tooltip relies on these var in sparnatural.scss:

//tippy overides
.tippy-box[data-theme~='sparnatural'] {
    background-color: var(--primary-color-light);
    color: #000;
	border-radius: 5px;
	border: 1px dashed var(--primary-color-main);
	padding: 2px;
	font-size:0.75em;
  }

BUT : the tippy div is outside of the Sparnatural div, hence the variables are not found.