/** * ClientVault Utility Classes — cv-utilities.css * ------------------------------------------------------------------ * v11.5.0 — Generated 2026-04-21 * * Toutes les classes utilitaires sont scopées sous `.cv-app` et assignées * au layer `cv-utilities` (déclaré dans cv-isolation.css). Les valeurs * référencent exclusivement les tokens `--cv-*` définis dans * cv-isolation.css (layer cv-tokens). Zéro couleur / taille codée en dur. * * Règle d'usage : * - Pour un style STATIQUE → utiliser une classe utilitaire * - Pour une valeur DYNAMIQUE (PHP) → utiliser une variable inline * (ex: style="--cv-u-progress: 42%") avec la classe correspondante * (.cv-u-progress-fill). Jamais d'inline style avec des hex. * * @package ClientVault */ @layer cv-utilities { /* ========================================================================= DISPLAY ========================================================================= */ .cv-app .cv-u-hidden { display: none; } .cv-app .cv-u-block { display: block; } .cv-app .cv-u-inline { display: inline; } .cv-app .cv-u-inline-block { display: inline-block; } .cv-app .cv-u-flex { display: flex; } .cv-app .cv-u-inline-flex { display: inline-flex; } .cv-app .cv-u-grid { display: grid; } .cv-app .cv-u-inline-grid { display: inline-grid; } .cv-app .cv-u-contents { display: contents; } .cv-app .cv-u-invisible { visibility: hidden; } .cv-app .cv-u-visible { visibility: visible; } /* ========================================================================= POSITION ========================================================================= */ .cv-app .cv-u-static { position: static; } .cv-app .cv-u-relative { position: relative; } .cv-app .cv-u-absolute { position: absolute; } .cv-app .cv-u-fixed { position: fixed; } .cv-app .cv-u-sticky { position: sticky; } /* ========================================================================= FLEX & GRID ========================================================================= */ .cv-app .cv-u-flex-row { flex-direction: row; } .cv-app .cv-u-flex-row-reverse { flex-direction: row-reverse; } .cv-app .cv-u-flex-col { flex-direction: column; } .cv-app .cv-u-flex-col-reverse { flex-direction: column-reverse; } .cv-app .cv-u-flex-wrap { flex-wrap: wrap; } .cv-app .cv-u-flex-nowrap { flex-wrap: nowrap; } .cv-app .cv-u-flex-wrap-reverse { flex-wrap: wrap-reverse; } .cv-app .cv-u-flex-1 { flex: 1 1 0%; } .cv-app .cv-u-flex-auto { flex: 1 1 auto; } .cv-app .cv-u-flex-none { flex: none; } .cv-app .cv-u-flex-grow { flex-grow: 1; } .cv-app .cv-u-flex-shrink-0 { flex-shrink: 0; } .cv-app .cv-u-items-start { align-items: flex-start; } .cv-app .cv-u-items-center { align-items: center; } .cv-app .cv-u-items-end { align-items: flex-end; } .cv-app .cv-u-items-stretch { align-items: stretch; } .cv-app .cv-u-items-baseline { align-items: baseline; } .cv-app .cv-u-justify-start { justify-content: flex-start; } .cv-app .cv-u-justify-center { justify-content: center; } .cv-app .cv-u-justify-end { justify-content: flex-end; } .cv-app .cv-u-justify-between { justify-content: space-between; } .cv-app .cv-u-justify-around { justify-content: space-around; } .cv-app .cv-u-justify-evenly { justify-content: space-evenly; } .cv-app .cv-u-self-start { align-self: flex-start; } .cv-app .cv-u-self-center { align-self: center; } .cv-app .cv-u-self-end { align-self: flex-end; } .cv-app .cv-u-self-stretch { align-self: stretch; } .cv-app .cv-u-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .cv-app .cv-u-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cv-app .cv-u-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cv-app .cv-u-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cv-app .cv-u-grid-cols-auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .cv-app .cv-u-col-span-2 { grid-column: span 2 / span 2; } .cv-app .cv-u-col-span-3 { grid-column: span 3 / span 3; } .cv-app .cv-u-col-span-full { grid-column: 1 / -1; } /* ========================================================================= GAP (tokenized) ========================================================================= */ .cv-app .cv-u-gap-0 { gap: 0; } .cv-app .cv-u-gap-1 { gap: var(--cv-space-1); } .cv-app .cv-u-gap-2 { gap: var(--cv-space-2); } .cv-app .cv-u-gap-3 { gap: var(--cv-space-3); } .cv-app .cv-u-gap-4 { gap: var(--cv-space-4); } .cv-app .cv-u-gap-5 { gap: var(--cv-space-5); } .cv-app .cv-u-gap-6 { gap: var(--cv-space-6); } .cv-app .cv-u-gap-7 { gap: var(--cv-space-7); } .cv-app .cv-u-gap-8 { gap: var(--cv-space-8); } .cv-app .cv-u-gap-9 { gap: var(--cv-space-9); } .cv-app .cv-u-gap-10 { gap: var(--cv-space-10); } .cv-app .cv-u-gap-11 { gap: var(--cv-space-11); } .cv-app .cv-u-gap-12 { gap: var(--cv-space-12); } .cv-app .cv-u-gap-x-2 { column-gap: var(--cv-space-4); } .cv-app .cv-u-gap-x-4 { column-gap: var(--cv-space-6); } .cv-app .cv-u-gap-y-2 { row-gap: var(--cv-space-4); } .cv-app .cv-u-gap-y-4 { row-gap: var(--cv-space-6); } /* ========================================================================= PADDING (tokenized) ========================================================================= */ .cv-app .cv-u-p-0 { padding: 0; } .cv-app .cv-u-p-1 { padding: var(--cv-space-1); } .cv-app .cv-u-p-2 { padding: var(--cv-space-2); } .cv-app .cv-u-p-3 { padding: var(--cv-space-3); } .cv-app .cv-u-p-4 { padding: var(--cv-space-4); } .cv-app .cv-u-p-5 { padding: var(--cv-space-5); } .cv-app .cv-u-p-6 { padding: var(--cv-space-6); } .cv-app .cv-u-p-7 { padding: var(--cv-space-7); } .cv-app .cv-u-p-8 { padding: var(--cv-space-8); } .cv-app .cv-u-p-9 { padding: var(--cv-space-9); } .cv-app .cv-u-p-10 { padding: var(--cv-space-10); } .cv-app .cv-u-p-11 { padding: var(--cv-space-11); } .cv-app .cv-u-p-12 { padding: var(--cv-space-12); } /* padding x / y */ .cv-app .cv-u-px-0 { padding-left: 0; padding-right: 0; } .cv-app .cv-u-px-1 { padding-left: var(--cv-space-1); padding-right: var(--cv-space-1); } .cv-app .cv-u-px-2 { padding-left: var(--cv-space-2); padding-right: var(--cv-space-2); } .cv-app .cv-u-px-3 { padding-left: var(--cv-space-3); padding-right: var(--cv-space-3); } .cv-app .cv-u-px-4 { padding-left: var(--cv-space-4); padding-right: var(--cv-space-4); } .cv-app .cv-u-px-5 { padding-left: var(--cv-space-5); padding-right: var(--cv-space-5); } .cv-app .cv-u-px-6 { padding-left: var(--cv-space-6); padding-right: var(--cv-space-6); } .cv-app .cv-u-px-7 { padding-left: var(--cv-space-7); padding-right: var(--cv-space-7); } .cv-app .cv-u-px-8 { padding-left: var(--cv-space-8); padding-right: var(--cv-space-8); } .cv-app .cv-u-py-0 { padding-top: 0; padding-bottom: 0; } .cv-app .cv-u-py-1 { padding-top: var(--cv-space-1); padding-bottom: var(--cv-space-1); } .cv-app .cv-u-py-2 { padding-top: var(--cv-space-2); padding-bottom: var(--cv-space-2); } .cv-app .cv-u-py-3 { padding-top: var(--cv-space-3); padding-bottom: var(--cv-space-3); } .cv-app .cv-u-py-4 { padding-top: var(--cv-space-4); padding-bottom: var(--cv-space-4); } .cv-app .cv-u-py-5 { padding-top: var(--cv-space-5); padding-bottom: var(--cv-space-5); } .cv-app .cv-u-py-6 { padding-top: var(--cv-space-6); padding-bottom: var(--cv-space-6); } .cv-app .cv-u-py-7 { padding-top: var(--cv-space-7); padding-bottom: var(--cv-space-7); } .cv-app .cv-u-py-8 { padding-top: var(--cv-space-8); padding-bottom: var(--cv-space-8); } /* padding per-side */ .cv-app .cv-u-pt-0 { padding-top: 0; } .cv-app .cv-u-pt-1 { padding-top: var(--cv-space-1); } .cv-app .cv-u-pt-2 { padding-top: var(--cv-space-2); } .cv-app .cv-u-pt-3 { padding-top: var(--cv-space-3); } .cv-app .cv-u-pt-4 { padding-top: var(--cv-space-4); } .cv-app .cv-u-pt-5 { padding-top: var(--cv-space-5); } .cv-app .cv-u-pt-6 { padding-top: var(--cv-space-6); } .cv-app .cv-u-pt-7 { padding-top: var(--cv-space-7); } .cv-app .cv-u-pt-8 { padding-top: var(--cv-space-8); } .cv-app .cv-u-pb-0 { padding-bottom: 0; } .cv-app .cv-u-pb-1 { padding-bottom: var(--cv-space-1); } .cv-app .cv-u-pb-2 { padding-bottom: var(--cv-space-2); } .cv-app .cv-u-pb-3 { padding-bottom: var(--cv-space-3); } .cv-app .cv-u-pb-4 { padding-bottom: var(--cv-space-4); } .cv-app .cv-u-pb-5 { padding-bottom: var(--cv-space-5); } .cv-app .cv-u-pb-6 { padding-bottom: var(--cv-space-6); } .cv-app .cv-u-pb-7 { padding-bottom: var(--cv-space-7); } .cv-app .cv-u-pb-8 { padding-bottom: var(--cv-space-8); } .cv-app .cv-u-pl-0 { padding-left: 0; } .cv-app .cv-u-pl-1 { padding-left: var(--cv-space-1); } .cv-app .cv-u-pl-2 { padding-left: var(--cv-space-2); } .cv-app .cv-u-pl-3 { padding-left: var(--cv-space-3); } .cv-app .cv-u-pl-4 { padding-left: var(--cv-space-4); } .cv-app .cv-u-pl-5 { padding-left: var(--cv-space-5); } .cv-app .cv-u-pl-6 { padding-left: var(--cv-space-6); } .cv-app .cv-u-pr-0 { padding-right: 0; } .cv-app .cv-u-pr-1 { padding-right: var(--cv-space-1); } .cv-app .cv-u-pr-2 { padding-right: var(--cv-space-2); } .cv-app .cv-u-pr-3 { padding-right: var(--cv-space-3); } .cv-app .cv-u-pr-4 { padding-right: var(--cv-space-4); } .cv-app .cv-u-pr-5 { padding-right: var(--cv-space-5); } .cv-app .cv-u-pr-6 { padding-right: var(--cv-space-6); } /* ========================================================================= MARGIN (tokenized) ========================================================================= */ .cv-app .cv-u-m-0 { margin: 0; } .cv-app .cv-u-m-1 { margin: var(--cv-space-1); } .cv-app .cv-u-m-2 { margin: var(--cv-space-2); } .cv-app .cv-u-m-3 { margin: var(--cv-space-3); } .cv-app .cv-u-m-4 { margin: var(--cv-space-4); } .cv-app .cv-u-m-5 { margin: var(--cv-space-5); } .cv-app .cv-u-m-6 { margin: var(--cv-space-6); } .cv-app .cv-u-m-7 { margin: var(--cv-space-7); } .cv-app .cv-u-m-8 { margin: var(--cv-space-8); } .cv-app .cv-u-m-auto { margin: auto; } .cv-app .cv-u-mx-auto { margin-left: auto; margin-right: auto; } .cv-app .cv-u-mx-0 { margin-left: 0; margin-right: 0; } .cv-app .cv-u-mx-2 { margin-left: var(--cv-space-2); margin-right: var(--cv-space-2); } .cv-app .cv-u-mx-4 { margin-left: var(--cv-space-4); margin-right: var(--cv-space-4); } .cv-app .cv-u-mx-6 { margin-left: var(--cv-space-6); margin-right: var(--cv-space-6); } .cv-app .cv-u-my-0 { margin-top: 0; margin-bottom: 0; } .cv-app .cv-u-my-2 { margin-top: var(--cv-space-2); margin-bottom: var(--cv-space-2); } .cv-app .cv-u-my-4 { margin-top: var(--cv-space-4); margin-bottom: var(--cv-space-4); } .cv-app .cv-u-my-6 { margin-top: var(--cv-space-6); margin-bottom: var(--cv-space-6); } .cv-app .cv-u-my-8 { margin-top: var(--cv-space-8); margin-bottom: var(--cv-space-8); } .cv-app .cv-u-mt-0 { margin-top: 0; } .cv-app .cv-u-mt-1 { margin-top: var(--cv-space-1); } .cv-app .cv-u-mt-2 { margin-top: var(--cv-space-2); } .cv-app .cv-u-mt-3 { margin-top: var(--cv-space-3); } .cv-app .cv-u-mt-4 { margin-top: var(--cv-space-4); } .cv-app .cv-u-mt-5 { margin-top: var(--cv-space-5); } .cv-app .cv-u-mt-6 { margin-top: var(--cv-space-6); } .cv-app .cv-u-mt-7 { margin-top: var(--cv-space-7); } .cv-app .cv-u-mt-8 { margin-top: var(--cv-space-8); } .cv-app .cv-u-mt-auto { margin-top: auto; } .cv-app .cv-u-mb-0 { margin-bottom: 0; } .cv-app .cv-u-mb-1 { margin-bottom: var(--cv-space-1); } .cv-app .cv-u-mb-2 { margin-bottom: var(--cv-space-2); } .cv-app .cv-u-mb-3 { margin-bottom: var(--cv-space-3); } .cv-app .cv-u-mb-4 { margin-bottom: var(--cv-space-4); } .cv-app .cv-u-mb-5 { margin-bottom: var(--cv-space-5); } .cv-app .cv-u-mb-6 { margin-bottom: var(--cv-space-6); } .cv-app .cv-u-mb-7 { margin-bottom: var(--cv-space-7); } .cv-app .cv-u-mb-8 { margin-bottom: var(--cv-space-8); } .cv-app .cv-u-ml-0 { margin-left: 0; } .cv-app .cv-u-ml-1 { margin-left: var(--cv-space-1); } .cv-app .cv-u-ml-2 { margin-left: var(--cv-space-2); } .cv-app .cv-u-ml-4 { margin-left: var(--cv-space-4); } .cv-app .cv-u-ml-6 { margin-left: var(--cv-space-6); } .cv-app .cv-u-ml-auto { margin-left: auto; } .cv-app .cv-u-mr-0 { margin-right: 0; } .cv-app .cv-u-mr-1 { margin-right: var(--cv-space-1); } .cv-app .cv-u-mr-2 { margin-right: var(--cv-space-2); } .cv-app .cv-u-mr-4 { margin-right: var(--cv-space-4); } .cv-app .cv-u-mr-6 { margin-right: var(--cv-space-6); } .cv-app .cv-u-mr-auto { margin-right: auto; } /* ========================================================================= WIDTH & HEIGHT ========================================================================= */ .cv-app .cv-u-w-auto { width: auto; } .cv-app .cv-u-w-full { width: 100%; } .cv-app .cv-u-w-half { width: 50%; } .cv-app .cv-u-w-third { width: 33.3333%; } .cv-app .cv-u-w-two-thirds { width: 66.6667%; } .cv-app .cv-u-w-quarter { width: 25%; } .cv-app .cv-u-w-three-quarters { width: 75%; } .cv-app .cv-u-w-fit { width: fit-content; } .cv-app .cv-u-w-screen { width: 100vw; } .cv-app .cv-u-min-w-0 { min-width: 0; } .cv-app .cv-u-min-w-full { min-width: 100%; } .cv-app .cv-u-max-w-none { max-width: none; } .cv-app .cv-u-max-w-sm { max-width: var(--cv-container-sm); } .cv-app .cv-u-max-w-md { max-width: var(--cv-container-md); } .cv-app .cv-u-max-w-lg { max-width: var(--cv-container-lg); } .cv-app .cv-u-max-w-xl { max-width: var(--cv-container-xl); } .cv-app .cv-u-max-w-full { max-width: 100%; } .cv-app .cv-u-h-auto { height: auto; } .cv-app .cv-u-h-full { height: 100%; } .cv-app .cv-u-h-screen { height: 100vh; } .cv-app .cv-u-min-h-0 { min-height: 0; } .cv-app .cv-u-min-h-full { min-height: 100%; } .cv-app .cv-u-min-h-screen { min-height: 100vh; } /* ========================================================================= OVERFLOW ========================================================================= */ .cv-app .cv-u-overflow-hidden { overflow: hidden; } .cv-app .cv-u-overflow-visible { overflow: visible; } .cv-app .cv-u-overflow-auto { overflow: auto; } .cv-app .cv-u-overflow-scroll { overflow: scroll; } .cv-app .cv-u-overflow-x-auto { overflow-x: auto; } .cv-app .cv-u-overflow-y-auto { overflow-y: auto; } .cv-app .cv-u-overflow-x-hidden { overflow-x: hidden; } .cv-app .cv-u-overflow-y-hidden { overflow-y: hidden; } /* ========================================================================= TEXT — alignment / size / weight / transform / decoration / whitespace ========================================================================= */ .cv-app .cv-u-text-left { text-align: left; } .cv-app .cv-u-text-center { text-align: center; } .cv-app .cv-u-text-right { text-align: right; } .cv-app .cv-u-text-justify { text-align: justify; } /* font-size (tokenized) */ .cv-app .cv-u-text-xs { font-size: var(--cv-font-size-xs); } .cv-app .cv-u-text-sm { font-size: var(--cv-font-size-sm); } .cv-app .cv-u-text-base { font-size: var(--cv-font-size-base); } .cv-app .cv-u-text-md { font-size: var(--cv-font-size-md); } .cv-app .cv-u-text-lg { font-size: var(--cv-font-size-lg); } .cv-app .cv-u-text-xl { font-size: var(--cv-font-size-xl); } .cv-app .cv-u-text-2xl { font-size: var(--cv-font-size-2xl); } .cv-app .cv-u-text-3xl { font-size: var(--cv-font-size-3xl); } .cv-app .cv-u-text-4xl { font-size: var(--cv-font-size-4xl); } /* font-weight (tokenized) */ .cv-app .cv-u-font-normal { font-weight: var(--cv-font-weight-normal); } .cv-app .cv-u-font-medium { font-weight: var(--cv-font-weight-medium); } .cv-app .cv-u-font-semibold { font-weight: var(--cv-font-weight-semibold); } .cv-app .cv-u-font-bold { font-weight: var(--cv-font-weight-bold); } .cv-app .cv-u-font-black { font-weight: var(--cv-font-weight-black); } /* line-height (tokenized) */ .cv-app .cv-u-leading-tight { line-height: var(--cv-line-height-tight); } .cv-app .cv-u-leading-base { line-height: var(--cv-line-height-base); } .cv-app .cv-u-leading-relaxed { line-height: var(--cv-line-height-relaxed); } .cv-app .cv-u-leading-none { line-height: 1; } /* font-family */ .cv-app .cv-u-font-sans { font-family: var(--cv-font-sans); } .cv-app .cv-u-font-mono { font-family: var(--cv-font-mono); } /* text transform */ .cv-app .cv-u-uppercase { text-transform: uppercase; } .cv-app .cv-u-lowercase { text-transform: lowercase; } .cv-app .cv-u-capitalize { text-transform: capitalize; } .cv-app .cv-u-normal-case { text-transform: none; } /* text decoration */ .cv-app .cv-u-underline { text-decoration: underline; } .cv-app .cv-u-line-through { text-decoration: line-through; } .cv-app .cv-u-no-underline { text-decoration: none; } /* font-style */ .cv-app .cv-u-italic { font-style: italic; } .cv-app .cv-u-not-italic { font-style: normal; } /* white-space */ .cv-app .cv-u-whitespace-normal { white-space: normal; } .cv-app .cv-u-nowrap { white-space: nowrap; } .cv-app .cv-u-whitespace-pre { white-space: pre; } .cv-app .cv-u-whitespace-pre-line { white-space: pre-line; } .cv-app .cv-u-whitespace-pre-wrap { white-space: pre-wrap; } /* word-break */ .cv-app .cv-u-break-words { overflow-wrap: break-word; word-wrap: break-word; } .cv-app .cv-u-break-all { word-break: break-all; } /* truncate */ .cv-app .cv-u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================================= COLOR — texte (tokenized) ========================================================================= */ .cv-app .cv-u-color-primary { color: var(--cv-primary); } .cv-app .cv-u-color-primary-light { color: var(--cv-primary-light); } .cv-app .cv-u-color-primary-dark { color: var(--cv-primary-dark); } .cv-app .cv-u-color-accent { color: var(--cv-accent); } .cv-app .cv-u-color-accent-light { color: var(--cv-accent-light); } .cv-app .cv-u-color-accent-strong { color: var(--cv-accent-strong); } .cv-app .cv-u-color-success { color: var(--cv-success); } .cv-app .cv-u-color-warning { color: var(--cv-warning); } .cv-app .cv-u-color-danger { color: var(--cv-danger); } .cv-app .cv-u-color-danger-dark { color: var(--cv-danger-dark); } .cv-app .cv-u-color-info { color: var(--cv-info); } .cv-app .cv-u-color-text { color: var(--cv-text); } .cv-app .cv-u-color-text-dark { color: var(--cv-text-dark); } .cv-app .cv-u-color-text-secondary { color: var(--cv-text-secondary); } .cv-app .cv-u-color-text-tertiary { color: var(--cv-text-tertiary); } .cv-app .cv-u-color-muted { color: var(--cv-text-muted); } .cv-app .cv-u-color-hint { color: var(--cv-text-hint); } .cv-app .cv-u-color-placeholder { color: var(--cv-text-placeholder); } .cv-app .cv-u-color-white { color: var(--cv-button-text); } .cv-app .cv-u-color-link { color: var(--cv-link); } .cv-app .cv-u-color-inherit { color: inherit; } /* tag colors */ .cv-app .cv-u-color-tag-blue { color: var(--cv-tag-blue); } .cv-app .cv-u-color-tag-green { color: var(--cv-tag-green); } .cv-app .cv-u-color-tag-orange { color: var(--cv-tag-orange); } .cv-app .cv-u-color-tag-red { color: var(--cv-tag-red); } .cv-app .cv-u-color-tag-purple { color: var(--cv-tag-purple); } /* ========================================================================= BACKGROUND (tokenized) ========================================================================= */ .cv-app .cv-u-bg-transparent { background-color: transparent; } .cv-app .cv-u-bg-white { background-color: var(--cv-card); } .cv-app .cv-u-bg-surface { background-color: var(--cv-surface); } .cv-app .cv-u-bg-surface-2 { background-color: var(--cv-surface-2); } .cv-app .cv-u-bg-base { background-color: var(--cv-bg); } .cv-app .cv-u-bg-alt { background-color: var(--cv-bg-alt); } .cv-app .cv-u-bg-subtle { background-color: var(--cv-bg-subtle); } .cv-app .cv-u-bg-hover { background-color: var(--cv-bg-hover); } .cv-app .cv-u-bg-primary { background-color: var(--cv-primary); } .cv-app .cv-u-bg-primary-light { background-color: var(--cv-primary-light); } .cv-app .cv-u-bg-primary-dark { background-color: var(--cv-primary-dark); } .cv-app .cv-u-bg-primary-soft { background-color: var(--cv-primary-subtle); } .cv-app .cv-u-bg-accent { background-color: var(--cv-accent); } .cv-app .cv-u-bg-accent-light { background-color: var(--cv-accent-light); } .cv-app .cv-u-bg-accent-strong { background-color: var(--cv-accent-strong); } .cv-app .cv-u-bg-success { background-color: var(--cv-success); } .cv-app .cv-u-bg-success-soft { background-color: var(--cv-success-bg); } .cv-app .cv-u-bg-warning { background-color: var(--cv-warning); } .cv-app .cv-u-bg-warning-soft { background-color: var(--cv-warning-bg); } .cv-app .cv-u-bg-danger { background-color: var(--cv-danger); } .cv-app .cv-u-bg-danger-soft { background-color: var(--cv-danger-bg); } .cv-app .cv-u-bg-info { background-color: var(--cv-info); } .cv-app .cv-u-bg-info-soft { background-color: var(--cv-info-bg); } /* tag backgrounds */ .cv-app .cv-u-bg-tag-blue { background-color: var(--cv-tag-blue-bg); } .cv-app .cv-u-bg-tag-green { background-color: var(--cv-tag-green-bg); } .cv-app .cv-u-bg-tag-orange { background-color: var(--cv-tag-orange-bg); } .cv-app .cv-u-bg-tag-red { background-color: var(--cv-tag-red-bg); } .cv-app .cv-u-bg-tag-purple { background-color: var(--cv-tag-purple-bg); } /* ========================================================================= BORDER (tokenized) ========================================================================= */ .cv-app .cv-u-border { border: 1px solid var(--cv-border); } .cv-app .cv-u-border-0 { border: 0; } .cv-app .cv-u-border-2 { border: 2px solid var(--cv-border); } .cv-app .cv-u-border-t { border-top: 1px solid var(--cv-border); } .cv-app .cv-u-border-b { border-bottom: 1px solid var(--cv-border); } .cv-app .cv-u-border-l { border-left: 1px solid var(--cv-border); } .cv-app .cv-u-border-r { border-right: 1px solid var(--cv-border); } .cv-app .cv-u-border-t-0 { border-top: 0; } .cv-app .cv-u-border-b-0 { border-bottom: 0; } /* border-color */ .cv-app .cv-u-border-primary { border-color: var(--cv-primary); } .cv-app .cv-u-border-accent { border-color: var(--cv-accent); } .cv-app .cv-u-border-success { border-color: var(--cv-success); } .cv-app .cv-u-border-warning { border-color: var(--cv-warning); } .cv-app .cv-u-border-danger { border-color: var(--cv-danger); } .cv-app .cv-u-border-light { border-color: var(--cv-border-light); } .cv-app .cv-u-border-strong { border-color: var(--cv-border-strong); } /* border-radius (tokenized) */ .cv-app .cv-u-rounded-none { border-radius: 0; } .cv-app .cv-u-rounded-xs { border-radius: var(--cv-radius-xs); } .cv-app .cv-u-rounded-sm { border-radius: var(--cv-radius-sm); } .cv-app .cv-u-rounded { border-radius: var(--cv-radius); } .cv-app .cv-u-rounded-lg { border-radius: var(--cv-radius-lg); } .cv-app .cv-u-rounded-xl { border-radius: var(--cv-radius-xl); } .cv-app .cv-u-rounded-pill { border-radius: var(--cv-radius-pill); } .cv-app .cv-u-rounded-full { border-radius: var(--cv-radius-circle); } /* ========================================================================= SHADOW (tokenized) ========================================================================= */ .cv-app .cv-u-shadow-none { box-shadow: none; } .cv-app .cv-u-shadow-xs { box-shadow: var(--cv-shadow-xs); } .cv-app .cv-u-shadow-sm { box-shadow: var(--cv-shadow-sm); } .cv-app .cv-u-shadow { box-shadow: var(--cv-shadow); } .cv-app .cv-u-shadow-md { box-shadow: var(--cv-shadow-md); } .cv-app .cv-u-shadow-lg { box-shadow: var(--cv-shadow-lg); } .cv-app .cv-u-shadow-xl { box-shadow: var(--cv-shadow-xl); } .cv-app .cv-u-shadow-focus { box-shadow: var(--cv-shadow-focus); } /* ========================================================================= CURSOR ========================================================================= */ .cv-app .cv-u-cursor-pointer { cursor: pointer; } .cv-app .cv-u-cursor-default { cursor: default; } .cv-app .cv-u-cursor-not-allowed { cursor: not-allowed; } .cv-app .cv-u-cursor-wait { cursor: wait; } .cv-app .cv-u-cursor-help { cursor: help; } .cv-app .cv-u-cursor-grab { cursor: grab; } .cv-app .cv-u-cursor-grabbing { cursor: grabbing; } .cv-app .cv-u-cursor-move { cursor: move; } .cv-app .cv-u-cursor-text { cursor: text; } /* ========================================================================= USER SELECT / POINTER EVENTS ========================================================================= */ .cv-app .cv-u-select-none { user-select: none; } .cv-app .cv-u-select-text { user-select: text; } .cv-app .cv-u-select-all { user-select: all; } .cv-app .cv-u-select-auto { user-select: auto; } .cv-app .cv-u-pointer-none { pointer-events: none; } .cv-app .cv-u-pointer-auto { pointer-events: auto; } /* ========================================================================= OPACITY ========================================================================= */ .cv-app .cv-u-opacity-0 { opacity: 0; } .cv-app .cv-u-opacity-25 { opacity: 0.25; } .cv-app .cv-u-opacity-50 { opacity: 0.5; } .cv-app .cv-u-opacity-60 { opacity: 0.6; } .cv-app .cv-u-opacity-75 { opacity: 0.75; } .cv-app .cv-u-opacity-90 { opacity: 0.9; } .cv-app .cv-u-opacity-100 { opacity: 1; } /* ========================================================================= TRANSITION (tokenized) ========================================================================= */ .cv-app .cv-u-transition { transition: var(--cv-transition-base); } .cv-app .cv-u-transition-fast { transition: var(--cv-transition-fast); } .cv-app .cv-u-transition-slow { transition: var(--cv-transition-slow); } .cv-app .cv-u-transition-colors { transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease; } .cv-app .cv-u-transition-opacity { transition: opacity 200ms ease; } .cv-app .cv-u-transition-transform { transition: transform 200ms ease; } .cv-app .cv-u-transition-none { transition: none; } /* ========================================================================= Z-INDEX (tokenized, scoped grâce à isolation: isolate) ========================================================================= */ .cv-app .cv-u-z-base { z-index: var(--cv-z-base); } .cv-app .cv-u-z-dropdown { z-index: var(--cv-z-dropdown); } .cv-app .cv-u-z-sticky { z-index: var(--cv-z-sticky); } .cv-app .cv-u-z-modal { z-index: var(--cv-z-modal); } .cv-app .cv-u-z-overlay { z-index: var(--cv-z-overlay); } .cv-app .cv-u-z-toast { z-index: var(--cv-z-toast); } .cv-app .cv-u-z-tooltip { z-index: var(--cv-z-tooltip); } /* ========================================================================= OBJECT-FIT (images) ========================================================================= */ .cv-app .cv-u-object-contain { object-fit: contain; } .cv-app .cv-u-object-cover { object-fit: cover; } .cv-app .cv-u-object-fill { object-fit: fill; } .cv-app .cv-u-object-none { object-fit: none; } .cv-app .cv-u-object-center { object-position: center; } .cv-app .cv-u-object-top { object-position: top; } /* ========================================================================= LIST STYLE ========================================================================= */ .cv-app .cv-u-list-none { list-style: none; padding-left: 0; } .cv-app .cv-u-list-disc { list-style: disc; padding-left: var(--cv-space-8); } .cv-app .cv-u-list-decimal { list-style: decimal; padding-left: var(--cv-space-8); } /* ========================================================================= ACCESSIBILITY / SCREEN READER ========================================================================= */ .cv-app .cv-u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .cv-app .cv-u-not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; } /* ========================================================================= VALEURS DYNAMIQUES via custom properties (PHP-driven) ------------------------------------------------------------------------- Usage : quand une valeur est calculée côté PHP (progression %, couleur personnalisée, largeur, gradient), on pose la variable inline et on applique la classe. Aucune couleur hex inline — uniquement des tokens ou des variables dédiées. ========================================================================= */ /* Progress bar width driven by --cv-u-progress */ .cv-app .cv-u-progress-fill { width: var(--cv-u-progress, 0%); transition: width var(--cv-transition-base); } /* Grid column count driven by --cv-u-cols */ .cv-app .cv-u-grid-auto-cols { display: grid; grid-template-columns: repeat(var(--cv-u-cols, 3), minmax(0, 1fr)); gap: var(--cv-space-6); } /* Background dynamique */ .cv-app .cv-u-bg-custom { background-color: var(--cv-u-bg, transparent); } .cv-app .cv-u-color-custom { color: var(--cv-u-color, inherit); } /* Gradient dynamique (2 stops) */ .cv-app .cv-u-gradient { background: linear-gradient( var(--cv-u-gradient-angle, 135deg), var(--cv-u-gradient-from, var(--cv-primary)) 0%, var(--cv-u-gradient-to, var(--cv-primary-dark)) 100% ); } /* Border-color dynamique */ .cv-app .cv-u-border-custom { border: 1px solid var(--cv-u-border-color, var(--cv-border)); } /* Dimensions dynamiques */ .cv-app .cv-u-w-custom { width: var(--cv-u-w, auto); } .cv-app .cv-u-h-custom { height: var(--cv-u-h, auto); } .cv-app .cv-u-max-w-custom { max-width: var(--cv-u-max-w, none); } .cv-app .cv-u-max-h-custom { max-height: var(--cv-u-max-h, none); } /* ========================================================================= FOCUS RING (accessibilité clavier) ========================================================================= */ .cv-app .cv-u-focus-ring:focus-visible { outline: 2px solid var(--cv-primary); outline-offset: 2px; } /* ========================================================================= MOTION — respect des préférences utilisateur ========================================================================= */ @media (prefers-reduced-motion: reduce) { .cv-app .cv-u-transition, .cv-app .cv-u-transition-fast, .cv-app .cv-u-transition-slow, .cv-app .cv-u-transition-colors, .cv-app .cv-u-transition-opacity, .cv-app .cv-u-transition-transform, .cv-app .cv-u-progress-fill { transition: none; } } /* ========================================================================= PARCOURS LOCK — v11.8.1 ------------------------------------------------------------------------- Toute la charte locking a été déplacée dans assets/css/cv-parcours-lock.css (5 variantes A-E, tokens dédiés, popup premium). Seuls restent ici les alias de compat pour le couple historique .cv-locked-wrap/.cv-locked-content dans les sections legacy non encore migrées (templates parcours). ========================================================================= */ .cv-app .cv-locked-wrap { position: relative; isolation: isolate; } .cv-app .cv-locked-wrap .cv-locked-content { filter: blur(1.5px) grayscale(0.25); opacity: 0.55; pointer-events: none; user-select: none; } } /* end @layer cv-utilities */