.small {
    padding: 4px 8px;
    font-size: var(--font-fs-body-sm);
}
.medium {
    padding: 8px 16px;
    font-size: var(--font-fs-body-md);
}
.large {
    padding: 12px 24px;
    font-size: var(--font-fs-body-lg);
}


/* ================================================================
    BUTTON PRIMARY
*/
.btn_primary_0 {
    background: var(--primary-base);
     color: var(--neutral-tint-4);
    border-radius: var(--radii-4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    min-width: 56px;
    transition: 0.2s;
    cursor: pointer;
}
.btn_primary_0:hover {
    background: var(--primary-tint-1);
}
.btn_primary_0:focus-visible {
    outline: 2px solid var(--primary-base);
    outline-offset: 2px;
}
.btn_primary_0:active {
    background: var(--primary-shade-1);
    outline: none;
    outline-offset: 0px;
}
.btn_primary_0:disabled {
    background: var(--neutral-tint-3);
     color: var(--neutral-tint-1);
}
/* ================================================================
    BUTTON SECONDARY
*/
.btn_secondary_0 {
    background: var(--primary-tint-4);
    color: var(--primary-base);
    border-radius: var(--radii-4);
    border: 2px solid var(--primary-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    min-width: 56px;
    transition: 0.2s;
    cursor: pointer;
}
.btn_secondary_0:hover {
    color: var(--primary-tint-1);
    border: 2px solid var(--primary-tint-1);
}
.btn_secondary_0:focus-visible {
    outline: 2px dashed var(--primary-shade-1);
    outline-offset: 2px;
}
.btn_secondary_0:active {
    color: var(--primary-shade-1);
    border: 2px solid var(--primary-shade-1);
    outline: none;
    outline-offset: 0px;
}
.btn_secondary_0:disabled {
    background: var(--neutral-tint-4);
    color: var(--neutral-tin-1);
    border: 2px solid var(--neutral-shade-2);
}
/* ================================================================
    COMPONENT NAME
*/
/*link_contextual_4 - default*/
.titre-autres a {
    overflow: hidden;
    color: var(--link-default);
}
.titre-autres a:after {
    content: "";
    background: var(--link-default-bg);
    position: absolute;
    left: 12px;
    bottom: -2px;
    width: calc(100% - 8px);
    height: calc(100% - 12px);
    z-index: -1;
    transition: 0.3s cubic-bezier(0.3, 0.1, 0, 2.0);
}
.titre-autres a:hover:after {
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 100%;
}
.titre-autres a:active:after {
    left: -6px;
    bottom: 12px;
    height: calc(100% - 12px);
}
.titre-autres a:focus-visible {
    outline: 2px dashed var(--link-default-hover); 
    outline-offset: 2px;
    border-radius: var(--radii-2);
}
/*link_contextual_4 - visited*/
.titre-autres a:visited {
    color: var(--link-visited);
}
.titre-autres a:visited:after {
    background: var(--link-visited-bg);
}
.titre-autres a:focus-visible:visited {
    outline: 2px dashed var(--link-visited-hover); 
}
/* ================================================================
    COMPONENT NAME
*/

/* ================================================================
    COMPONENT NAME
*/

/* ================================================================
    COMPONENT NAME
*/