:root {
    --c-xxl: red;
    --c-xl: orange;
    --c-lg: yellow;
    --c-md: #1ada1a;
    --c-sm: cyan;
    --c-xs: purple;
}

body[taille-opt~="bcSurBody"][taille="xxl"] {
    background: var(--c-xxl);
}

body[taille-opt~="bcSurBody"][taille="xl"] {
    background: var(--c-xl);
}

body[taille-opt~="bcSurBody"][taille="lg"] {
    background: var(--c-lg);
}

body[taille-opt~="bcSurBody"][taille="md"] {
    background: var(--c-md);
}

body[taille-opt~="bcSurBody"][taille="sm"] {
    background: var(--c-sm);
}

body[taille-opt~="bcSurBody"][taille="xs"] {
    background: var(--c-xs);
}

body[taille-opt~="bcSurIndicateur"][taille="xxl"] #indic_taille {
    background: var(--c-xxl);
}

body[taille-opt~="bcSurIndicateur"][taille="xl"] #indic_taille {
    background: var(--c-xl);
}

body[taille-opt~="bcSurIndicateur"][taille="lg"] #indic_taille {
    background: var(--c-lg);
}

body[taille-opt~="bcSurIndicateur"][taille="md"] #indic_taille {
    background: var(--c-md);
}

body[taille-opt~="bcSurIndicateur"][taille="sm"] #indic_taille {
    background: var(--c-sm);
}

body[taille-opt~="bcSurIndicateur"][taille="xs"] #indic_taille {
    background: var(--c-xs);
}

#indic_taille {
    z-index: 2;
    position: fixed;
    color: grey;
    padding: 4px 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: underline;
    border-radius: 10px;
    cursor: help;
}