/* .............................................................................
HELPERS et AUTRES STYLES
............................................................................. */

/* Uppercase / lowercase */
.tLower {text-transform: none;}
.tUpper {text-transform: uppercase;}


/* Content alignment */
.tCentered {text-align:center;}
.tLeft {text-align:left;}
.tRight {text-align:right;}


/* Colors */
.cBlack {color: var(--color-black); }
.cWhite {color: var(--color-white); }
.cBeige {color: var(--color-beige); }


/* Other */
.tCategory {font-size: 0.85em;font-weight: 400;text-transform: uppercase;border: 1px solid currentColor;border-radius: var(--radius);display: inline-block;padding: 0.4em 1.5em;}

	/* Size */
	@media (max-width:46rem) {
		.tCategory {font-size: 0.7em; }
	}


/* Helpers */
.demoIcon .svgIcon {font-size: 3em; margin-top: 0;}
.demoLogos {display: grid;grid-template-columns: repeat(auto-fit, 10em);gap: 2em;}
.noWrap {white-space: nowrap;}
.hideText {text-indent: 100%; white-space: nowrap; overflow: hidden; }
.screenReaderText {display:none;}
.softHide {display: none;} /* Difference between hide and softHide: hide has important, softHide doesn't */
.hidden {display: none !important; visibility: hidden;}
.visuallyHidden {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
.visuallyHidden.focusable:active,
.visuallyHidden.focusable:focus {clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;}
.invisible {visibility: hidden;}
[hidden] {display: none;}