/* ------
SOMMAIRE
---------*/
/*

00 - COULEURS

*/



/* ----------
00 - COULEURS
-------------*/



:root{

    /*Blanc*/
	--white: #fff; 
    
    /*Noir*/
	--black: #000 !important;    

    /* Gris */
    --neutral-100: #F2F5FF ;
    --neutral-200: #C5CAE1 ;
    --neutral-300: #9CA1B7 ;
    --neutral-400: #B3BECD ;
    --neutral-500: #515569 ;
    --neutral-600: #1C2141 ;
    --neutral-700: #090634 ;
    --neutral-800: #2D3748 ;
    --neutral-900: #010010 ;


    /* Couleurs */
    
    --blue:    #007bff ;
    --indigo:  #6610f2 ;
    --purple:  #9790a5 ;
    --pink:    #e83e8c ;
    --red:     #E73434 ;
    --orange:  #fd7e14 ;
    --yellow:  #FFC93E ;
    --green:   #067503 ;
    --teal:    #20c997 ;
    --cyan:    #2F97ED ;


    --color-primary:          #254A91;
    --color-primary-hover:    #0E3A90;
    --color-primary-active:   #00297D;
    --color-primary-light:    #B9D2FF;
    --color-primary-x-light:  #F0F5FF;
    --color-primary-dark:     #17255F;

    --color-secondary:          #00A5DF;
    --color-secondary-active:   #93D9FF;
    --color-secondary-light:    #C1E9FF;
    --color-secondary-x-light:  #EAF7FF;

    --color-tertiary:          #A4D600;
    --color-tertiary-hover:    #88B800;
    --color-tertiary-active:   #759E00;
    --color-tertiary-light:    #CCEE72;
    --color-tertiary-x-light:  #EFFDCE;

    --color-success:       #10B981 ;
    --color-success-hover: #047857 ;
    --color-success-light: #ECFDF5 ;
    --color-info:          #0052CC ;
    --color-warning:       #F97316 ;
    --color-warning-hover: #EA580C ;
    --color-warning-light: #FFF7ED ;
    --color-danger:        #EF4444 ;
    --color-danger-hover:  #DC2626 ;
    --color-danger-light:  #FEF2F2 ;
    --color-light:         #F1F3F7 ;
    --color-dark:          #343a40 ;

    /* Font weight */
    --thin       : 100;
    --extralight : 200; --extraLight : 200;
    --light      : 300;
    --regular    : 400;
    --medium     : 500;
    --semibold   : 600; --semiBold : 600;
    --bold       : 700;
    --extrabold  : 800; --extraBold : 800;
    --black      : 900;  

    
}


.white{
    color: #fff !important;
    color: var(--white) !important;
}
.bg-white{
    background-color: #fff !important;
    background-color: var(--white) !important;
}
.black{
    color: #000 !important;
    color: var(--black) !important;
}
.bg-black{
    background-color: #000 !important;
    background-color: var(--black) !important;
}
.bg-neutral {
    background-color: #010010;
    background-color: var(--neutral-900);
}
.bg-neutral-light {
    background-color: #F0EFF5;
    background-color: var(--neutral-200);
}
.bg-color-red {
    background-color: #E30613;
}

/*-----------
1- COLOR PRIMARY
-------------*/

/*color primary*/
.color-primary{
    color: #254A91  !important;
    color: var(--color-primary) !important;
}
.bg-color-primary{
    background-color: #254A91 !important;
    background-color: var(--color-primary) !important;
}
/*color-primary-hover*/
.color-primary-hover{
    color: #0E3A90  !important;
    color: var(--color-primary-hover) !important;
}
.bg-color-primary-hover{
    background-color: #0E3A90 !important;
    background-color: var(--color-primary-hover) !important;
}
/*color-primary-active*/
.color-primary-active{
    color: #00297D  !important;
    color: var(--color-primary-active) !important;
}
.bg-color-primary-active{
    background-color: #00297D !important;
    background-color: var(--color-primary-active) !important;
}
/*color-primary-light*/
.color-primary-light{
    color: #B9D2FF  !important;
    color: var(--color-primary-light) !important;
}
.bg-color-primary-light{
    background-color: #B9D2FF !important;
    background-color: var(--color-primary-light) !important;
}
/*color-primary-extra-light*/
.color-primary-x-light{
    color: #F0F5FF  !important;
    color: var(--color-primary-x-light) !important;
}
.bg-color-primary-x-light{
    background-color: #F0F5FF !important;
    background-color: var(--color-primary-x-light) !important;
}
/*color-primary-dark*/
.color-primary-dark{
    color: #17255F  !important;
    color: var(--color-primary-dark) !important;
}
.bg-color-primary-dark{
    background-color: #17255F !important;
    background-color: var(--color-primary-dark) !important;
}


/*-----------
2- COLOR secondary
-------------*/

/*color secondary*/
.color-secondary{
    color: #00A5DF  !important;
    color: var(--color-secondary) !important;
}
.bg-color-secondary{
    background-color: #00A5DF !important;
    background-color: var(--color-secondary) !important;
}
/*color-secondary-active*/
.color-secondary-active{
    color: #93D9FF  !important;
    color: var(--color-secondary-active) !important;
}
.bg-color-secondary-active{
    background-color: #93D9FF !important;
    background-color: var(--color-secondary-active) !important;
}
/*color-secondary-light*/
.color-secondary-light{
    color: #C1E9FF  !important;
    color: var(--color-secondary-light) !important;
}
.bg-color-secondary-light{
    background-color: #C1E9FF !important;
    background-color: var(--color-secondary-light) !important;
}
/*color-secondary-extra-light*/
.color-secondary-x-light{
    color: #EAF7FF  !important;
    color: var(--color-secondary-x-light) !important;
}
.bg-color-secondary-x-light{
    background-color: #EAF7FF !important;
    background-color: var(--color-secondary-x-light) !important;
}



/*-----------
3- COLOR tertiary
-------------*/

/*color tertiary*/
.color-tertiary{
    color: #A4D600  !important;
    color: var(--color-tertiary) !important;
}
.bg-color-tertiary{
    background-color: #A4D600 !important;
    background-color: var(--color-tertiary) !important;
}
/*color-tertiary-hover*/
.color-tertiary-hover{
    color: #88B800  !important;
    color: var(--color-tertiary-hover) !important;
}
.bg-color-tertiary-hover{
    background-color: #88B800 !important;
    background-color: var(--color-tertiary-hover) !important;
}
/*color-tertiary-active*/
.color-tertiary-active{
    color: #759E00  !important;
    color: var(--color-tertiary-active) !important;
}
.bg-color-tertiary-active{
    background-color: #759E00 !important;
    background-color: var(--color-tertiary-active) !important;
}
/*color-tertiary-light*/
.color-tertiary-light{
    color: #CCEE72  !important;
    color: var(--color-tertiary-light) !important;
}
.bg-color-tertiary-light{
    background-color: #CCEE72 !important;
    background-color: var(--color-tertiary-light) !important;
}
/*color-tertiary-extra-light*/
.color-tertiary-x-light{
    color: #EFFDCE  !important;
    color: var(--color-tertiary-x-light) !important;
}
.bg-color-tertiary-x-light{
    background-color: #EFFDCE !important;
    background-color: var(--color-tertiary-x-light) !important;
}

::selection {
    background-color: var(--color-secondary);
    color: var(--white);
}

/*PADDING ET MARGIN*/

/*margin*/
.margin-page {
    margin: 64px 0;
}
.margin-right-medium {
    margin-right: 80px;
}
.my-large {
    margin:0 120px;
}

/*padding*/
.py-medium {
    padding-left: 80px;
    padding-right: 80px;
}
.px-medium {
    padding-top: 80px;
    padding-bottom: 80px;
}
.padding-slide {
    padding: 0 50px;
}
.padding-large {
    padding: 80px 0;
}
.padding-medium {
    padding: 28px 0;
}
.padding-right-little {
    padding-right: 48px;
}
.padding-left-little {
    padding-left: 48px;
}
.padding-page {
    padding:64px 0;
}

.pb-large {
    padding-bottom: 82px;
}
.pt-large {
    padding-top: 82px;
}

/*gap*/
.my-12 {
    gap: 12px;
}
.my-16 {
    gap: 16px;
}
.my-18 {
    gap: 18px;
}
.my-24 {
    gap:24px;
}
.my-32{
    gap: 31px;
}
.my-40 {
    gap:40px;
}
.my-48 {
    gap: 48px;
}
.my-56 {
    gap: 56px;
}
.my-64 {
    gap: 64px;
}
.my-80 {
    gap: 80px;
}
.my-100 {
    gap:100px;
}





/*------------------------------
---------- RESPONSIVE ----------
--------------------------------*/

@media (max-width:1300px) {
    .py-medium {
        padding-left: 40px;
        padding-right: 40px;
    }
}
@media (max-width: 999px) {
    .padding-left-little {
        padding-left: 0px;
    }
    .padding-page {
        padding: 40px 0;
    }
    .padding-large {
        padding: 30px 0;
    }
    .pb-large {
        padding-bottom: 10px;
    }
    .pt-large {
        padding-top: 10px;
    }
    .padding-medium {
        padding: 20px 0;
    }

    .my-100 {
        gap:50px;
    }
}

@media (max-width:780px) {
    .padding-page {
        padding: 20px 0;
    }
    .padding-medium {
        padding: 10px 0;
    }
    .px-medium {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}