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

00 - COULEURS

*/



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

:root{

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

    /* Gris */
    --gray-100: #F1F3F7 ;
    --gray-200: #D9DCE3 ;
    --gray-300: #C3C7D0 ;
    --gray-400: #B3BECD ;
    --gray-500: #7A869A ;
    --gray-600: #46546E ;
    --gray-700: #212A3A ;
    --gray-800: #2D3748 ;
    --gray-900: #191E27 ;


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


    --color-primary:          #008094;
    --color-primary-hover:    #006B7B;
    --color-primary-active:   #005563;
    --color-primary-light:    #BDF6FF;
    --color-primary-x-light:  #EFFDFF;
    --color-primary-dark:     #002B31;

    --color-secondary:        #00538A  ;
    --color-secondary-hover:  #00426E ;
    --color-secondary-active: #003253;
    --color-secondary-light:  #C6E8FF;
    --color-secondary-x-light:#E2F4FF;
    --color-secondary-dark:   #00060B;

    --color-degrad: linear-gradient(90deg, #00538A 3.42%, #00A5BB 109.47%);


    --color-success:       #36B37E ;
    --color-success-hover: #00875A ;
    --color-success-light: #ABF5D1 ;
    --color-info:          #0052CC ;
    --color-warning:       #FFAB00 ;
    --color-warning-hover: #FF8B00 ;
    --color-warning-light: #FFE380 ;
    --color-danger:        #FF5630 ;
    --color-danger-hover:  #DE350B ;
    --color-danger-light:  #FFBDAD ;
    --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-gray {
    background-color: #191E27;
    background-color: var(--gray-900);
}
.bg-light-grey {
    background-color: #F1F3F7;
    background-color: var(--gray-100);
}

/*color primary*/
.color-primary{
    color: #008094  !important;
    color: var(--color-primary) !important;
}
.bg-color-primary{
    background-color: #008094 !important;
    background-color: var(--color-primary) !important;
}
/*color-primary-hover*/
.color-primary-hover{
    color: #006B7B  !important;
    color: var(--color-primary-hover) !important;
}
.bg-color-primary-hover{
    background-color: #006B7B !important;
    background-color: var(--color-primary-hover) !important;
}
/*color-primary-active*/
.color-primary-active{
    color: #005563  !important;
    color: var(--color-primary-active) !important;
}
.bg-color-primary-active{
    background-color: #005563 !important;
    background-color: var(--color-primary-active) !important;
}
/*color-primary-light*/
.color-primary-light{
    color: #BDF6FF  !important;
    color: var(--color-primary-light) !important;
}
.bg-color-primary-light{
    background-color: #BDF6FF !important;
    background-color: var(--color-primary-light) !important;
}
/*color-primary-extra-light*/
.color-primary-x-light{
    color: #EFFDFF  !important;
    color: var(--color-primary-x-light) !important;
}
.bg-color-primary-x-light{
    background-color: #EFFDFF !important;
    background-color: var(--color-primary-x-light) !important;
}
/*color-primary-dark*/
.color-primary-dark{
    color: #002B31  !important;
    color: var(--color-primary-dark) !important;
}
.bg-color-primary-dark{
    background-color: #002B31 !important;
    background-color: var(--color-primary-dark) !important;
}

/*color secondary*/
.color-secondary{
    color: #00538A !important;
    color: var(--color-secondary) !important;
}
.bg-color-secondary{
    background-color: #00538A  !important;
    background-color: var(--color-secondary) !important;
}
/*color secondary hover*/
.secondary-hover{
    color: #00426E !important;
    color: var(--color-secondary-hover) !important;
}
.bg-secondary-hover{
    background-color: #00426E !important;
    background-color: var(--color-secondary-hover) !important;
}
/*color-secondary-active*/
.color-secondary-active{
    color: #003253  !important;
    color: var(--color-secondary-active) !important;
}
.bg-color-secondary-active{
    background-color: #003253 !important;
    background-color: var(--color-secondary-active) !important;
}
/*color-secondary-light*/
.color-secondary-light{
    color: #C6E8FF  !important;
    color: var(--color-secondary-light) !important;
}
.bg-color-secondary-light{
    background-color: #C6E8FF !important;
    background-color: var(--color-secondary-light) !important;
}
/*color-secondary-extra-light*/
.color-secondary-x-light{
    color: #E2F4FF  !important;
    color: var(--color-secondary-x-light) !important;
}
.bg-color-secondary-x-light{
    background-color: #E2F4FF !important;
    background-color: var(--color-secondary-x-light) !important;
}
/*color-secondary-dark*/
.color-secondary-dark{
    color: #00060B  !important;
    color: var(--color-secondary-dark) !important;
}
.bg-color-secondary-dark{
    background-color: #00060B !important;
    background-color: var(--color-secondary-dark) !important;
}
/*color degrad*/
.color-primary-degrad {
    background: var(--color-degrad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    display: inline-block;
}
/*color neutral*/
.color-neutral-100 {
    color: var(--gray-100);
}
.color-neutral-200 {
    color: var(--gray-200);
}
.color-neutral-300 {
    color: var(--gray-300);
}
.color-neutral-400 {
    color: var(--gray-400);
}
.color-neutral-500 {
    color: var(--gray-500);
}
.color-neutral-600 {
    color: var(--gray-600);
}
.color-neutral-700 {
    color: var(--gray-700);
}
.color-neutral-800 {
    color: var(--gray-800);
}
.color-neutral-900 {
    color: var(--gray-900);
}

/*PADDING ET MARGIN*/

/*margin*/
.margin-page {
    margin: 44px 0;
}
.margin-right-medium {
    margin-right: 80px;
}
.my-large {
    margin:0 120px;
}
.mt-extra-large {
    margin-top:120px!important;
}

/*padding*/
.py-medium {
    padding-left: 80px;
    padding-right: 80px;
}
.pt-medium {
    padding-top:44px;
}
.padding-large {
    padding: 110px 0;
}
.padding-right-little {
    padding-right: 48px;
}
.padding-left-little {
    padding-left: 48px;
}
.padding-page {
    padding:44px 0;
}
.padding-bloc {
    padding: 44px;
}

/*gap*/
.my-16 {
    gap: 16px;
}
.my-24{
    gap: 24px;
}
.my-32{
    gap: 32px;
}
.my-40 {
    gap: 40px;
}
.my-48 {
    gap: 48px;
}
.my-64 {
    gap:64px;
}
.my-100 {
    gap:100px;
}


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

@media (max-width: 999px) {
    .padding-left-little {
        padding-left: 0px;
    }
    .padding-right-little {
        padding-right: 0px;
    }
    .padding-large {
        padding: 70px 0;
    }
    .padding-page {
        padding: 25px 0;
    }
}

@media (max-width:780px) {
    .padding-page {
        padding: 15px 0;
    }
}