/**********VARIABLES**********/
:root {
    /* COLOR */
    --white: hsl(0, 0%, 100%);
    --black: hsl(213, 96%, 11%);
    --primary: hsl(50, 100%, 55%);
    --primary-lighter: hsl(50, 100%, 65%);
    --primary-darker: hsl(50, 100%, 45%);
    --secondary: hsl(235, 100%, 56%);
    --secondary-lightest: hsl(240, 91%, 96%);
    --secondary-lighter: hsl(235, 100%, 66%);
    --secondary-darker: hsl(235, 100%, 46%);
    --destructive: hsl(348, 85%, 48%);
    --destructive-lighter: hsl(348, 85%, 58%);
    --destructive-darker: hsl(348, 85%, 38%);
    --success-lightest: hsla(129, 86%, 29%, 0.1);
    --success: hsl(129, 65%, 48%);
    --grey: hsl(0, 0%, 70%);
    --grey-dark: hsl(240, 4%, 46%);
    --base-space-value: 4px;
    --base-space-1: calc(var(--base-space-value) * 1);
    --base-space-2: calc(var(--base-space-value) * 2);
    --base-space-3: calc(var(--base-space-value) * 3);
    --base-space-4: calc(var(--base-space-value) * 4);
    --base-space-5: calc(var(--base-space-value) * 5);
    --base-space-6: calc(var(--base-space-value) * 6);
    --base-space-7: calc(var(--base-space-value) * 7);
    --base-space-8: calc(var(--base-space-value) * 8);
    --base-space-9: calc(var(--base-space-value) * 9);
    --base-space-10: calc(var(--base-space-value) * 10);
    --base-space-12: calc(var(--base-space-value) * 12);
    --base-space-14: calc(var(--base-space-value) * 14);
    --base-space-15: calc(var(--base-space-value) * 15);
    --base-space-16: calc(var(--base-space-value) * 16);
    --base-space-17: calc(var(--base-space-value) * 17);
    --base-space-18: calc(var(--base-space-value) * 18);
    --base-space-20: calc(var(--base-space-value) * 20);
    --radius-small: 4px;
    --radius-medium: 6px;
    --radius-large: 12px;
    --radius-circular: 999px;
    /*Custom*/
    --header-height: var(--base-space-15);
    --page-padding-x: var(--base-space-6);
    --interactive-element-height: var(--base-space-12);
    --interactive-element-height-large: var(--base-space-17);
    --interactive-element-height-small: var(--base-space-8);
    --input-padding: var(--base-space-3);
    --input-border-color: var(--grey);
    --input-border: 2px solid var(--input-border-color);
    --focus-ring: 0px 0px 0px 3px rgb(109, 109, 253);
}


/**********GLOBAL**********/
html {
}

@media (min-width: 768px) {
    html {
    }
}

@media screen and (min-width: 1121px) {
    :root {
        --page-padding-x: 120px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

/**********TEXT STYLING**********/
.skew {
    position: relative;
    display: inline-block;
    font-family: 'Poppins-Bold';
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 700;
}

    .skew::before {
        content: "";
        position: absolute;
        top: -0.1rem;
        display: inline-block;
        width: 105%;
        height: 1.8rem;
        background-color: var(--primary);
        transform: rotate(-2deg);
        z-index: -1;
    }

/**********FONTS**********/

.text-title-xl {
    font-family: 'Poppins-Bold';
    font-size: 4rem;
    font-size: clamp(3rem, 2.8rem + 1vw, 4rem);
    line-height: 1.2;
    font-weight: 700;
}

.text-title-lg {
    font-family: 'Poppins-Bold';
    font-size: 2.5rem;
    font-size: clamp(2rem, 1.9rem + 0.5vw, 2.5rem);
    line-height: 1.2;
    font-weight: 700;
}

.text-title-md {
    font-family: 'Poppins-SemiBold';
    font-size: 2rem;
    font-size: clamp(1.5rem, 1.4rem + 0.5vw, 2rem);
    line-height: 1.125;
    font-weight: 600;
}

.text-title-sm {
    font-family: 'Poppins-SemiBold';
    font-size: 1.5rem;
    font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem);
    line-height: 1.125;
    font-weight: 600;
}

.text-title-xs {
    font-family: 'Poppins-Bold';
    font-size: 1rem;
    font-size: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
    line-height: 1.5;
    font-weight: 700;
}

.text-body-xl {
    font-family: 'Poppins-Bold';
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: 700;
}

.text-body-lg {
    font-family: 'Poppins-SemiBold';
    font-size: 1.25rem;
    line-height: 1.5;
    //1.2 font-weight: 600;
}

.text-body-md {
    font-family: 'Poppins-Medium';
    font-size: 1.125rem;
    line-height: 1.5;
    // 1.3333 font-weight: 500;
}

.text-body-sm {
    font-family: 'Poppins-Medium';
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 500;
}

.text-body-xs {
    font-family: 'Poppins-Regular';
    font-size: .75rem;
    line-height: 1.5;
    // 2 font-weight: 400;
}

.text-destructive {
    color: var(--destructive);
}

/**********LINKS**********/
a {
    color: var(--black) !important;
    color-scheme: light dark !important;
}

    a:visited {
        /*color: var(--black) !important;
        color-scheme: light dark !important;*/
    }

.a-link {
    color: var(--secondary) !important;
    text-decoration: underline;
    text-decoration-line: underline;
}

    .a-link:hover {
        color: var(--secondary-lighter) !important;
    }
/**********BUTTONS**********/

.btn {
    border-radius: 0;
}

.m-button {
    border: 2px solid;
    text-decoration: none;
    cursor: pointer;
}

    .m-button[disabled] {
        cursor: not-allowed;
        background-color: var(--grey-dark);
        color: var(--white);
        border-color: var(--grey-dark);
        pointer-events: none;
    }

    .m-button:focus {
        box-shadow: var(--focus-ring);
    }



.m-button--primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--black) !important;
}

    .m-button--primary[disabled] {
        color: rgba(255, 255, 255, 0.5);
    }

    .m-button--primary:hover:not([disabled]) {
        background-color: var(--primary-lighter) !important;
        border-color: var(--primary-lighter) !important;
    }

    .m-button--primary:focus {
        box-shadow: var(--focus-ring);
    }

.m-button--secondary {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
    background-color: transparent !important;
}

    .m-button--secondary:hover {
        color: var(--primary-lighter) !important;
        border-color: var(--primary-lighter) !important;
    }

.m-button--outline {
    color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    background-color: transparent !important;
}

    .m-button--outline:hover {
        color: var(--secondary-lighter) !important;
        border-color: var(--secondary-lighter) !important;
        background-color: transparent !important;
    }

.m-button--audio {
    color: var(--secondary) !important;
    border: none !important;
    background-color: transparent !important;
}

    .m-button--audio:hover {
        border: none !important;
    }

    .m-button--audio:focus {
        border: none !important;
    }

    .m-button--audio:active {
        border: none !important;
    }

    /* si vous voyez encore un trait intérieur sous Firefox */
    .m-button--audio::-moz-focus-inner {
        border: 0 !important;
    }

.m-button--black {
    color: var(--black) !important;
    border-color: var(--black) !important;
}

.m-button--destructive {
    color: var(--white) !important;
    background-color: var(--destructive) !important;
    border-color: var(--destructive) !important;
}

    .m-button--destructive:hover {
        background-color: var(--destructive-lighter) !important;
    }

.m-button--squared {
    padding: 0;
    width: var(--button-height);
    height: var(--button-height);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white) !important;
}

/**********TAGS**********/
.a-tag {
    background-color: var(--secondary);
    max-width: 100%;
    color: var(--white);
    white-space: normal !important;
}

.a-tag--bold {
    font-family: "Poppins-Bold";
    font-weight: 700;
    font-size: 16px;
}

.a-tag--small {
    font-family: Poppins-Regular;
    font-size: .75rem;
    line-height: 1.5;
    font-weight: 400;
}

.a-tag--secondary-lighter {
    background-color: var(--secondary-lightest);
    color: var(--black);
}

.a-tag--Customer {
    background-color: var(--primary);
    color: var(--black);
    border-radius: 0;
}

.a-tag--Trainer {
    background-color: var(--secondary);
    color: var(--white);
    border-radius: 0;
}

.a-tag--OF {
    background-color: var(--black);
    color: var(--white);
    border-radius: 0;
}


/**********LIST**********/

.u-list-reset {
    list-style: none;
    /*padding-inline-start: 0;*/
    margin-block-start: 0;
    margin-block-end: 0;
}

/**********AVATAR**********/
.a-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 100%;
    color: var(--secondary);
    overflow: hidden;
}

    .a-avatar img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
    }

.a-avatar--no-image {
    background-color: var(--secondary-lightest);
}

/**********INPUT**********/

.input-section-icone {
    border: 2px solid var(--input-border-color);
    border-right: none;
    border-radius: 0;
    background: transparent;
}

.input-section-text {
    border: 2px solid var(--input-border-color);
    border-left: none;
    border-radius: 0;
}

/**CUSTOMISATION CHECKBOX**/
.form-check-input {
    border: 2px solid var(--input-border-color);
    width: 1.5em !important;
    height: 1.5em !important;
    cursor: pointer !important;
}

.form-check-label {
    margin-top: 0.25em !important;
    margin-left: 1em !important;
}

.form-check > .text-muted {
    margin-left: 1em !important;
}

.form-check-input:checked {
    background-color: var(--black) !important;
}

.form-check-input:not(checked) {
    background-color: transparent !important;
}