:root {
    --prim-color: #5C5C5B;
    --sec-color: #009de2 ; /* #00ACE9bleu medium*/
    --third-color: rgba(222, 243, 251, 0.45); /* bleu light*/
    --fourth-color: #009492; /*ver eau dark*/
    --fifth-color: #E68839; /*orange*/
    --six-color: #DBDBDB; /*grey light*/
    --sev-color: rgba(225, 243, 252, 0.45); /* bleu light med*/
    --eighth-color: rgb(55, 74, 136); /* Bleu med*/
    --tenth-color: rgba(145, 145, 145, 0.2); /*grey XT light*/
    --elev-color: rgba(145,145,145,0.08); /*grey XXT light*/
    --ten-color:rgb(143, 189, 124); /*vert pole relais */

    --home-content-top:150px

}
@media only screen and (max-width: 1199px) {
    :root {
        --xs : 15px;
        --sm : 35px;
        --lg : 50px;
        --xl : 70px;
        --xxl : 90px;
        --xxxl : 140px;

    }
}
@media only screen and (min-width: 1400px) {
    :root {
        --xs : 15px;
        --sm : 35px;
        --lg : 50px;
        --xl : 70px;
        --xxl : 90px;
        --xxxl : 140px;

    }
}
@media only screen and (min-width: 1800px) {
    :root {
        --xs : 15px;
        --sm : 35px;
        --lg : 50px;
        --xl : 70px;
        --xxl : 90px;
        --xxxl : 140px;

    }
}

.t_c_1 {
    color: var(--prim-color) !important
}
.t-c-2{
    color: var(--sec-color)
}
.t_c_2 {
    color: var(--six-color) !important
}
.t_c_3 {
    color: var(--sec-color) !important
}
a.t_c_3:hover, a.t_c_3:focus  {
    color: var(--fifth-color) !important;
    text-decoration: underline
}
.t_c_5 {
    color: var(--fifth-color) !important
}
.t-c-4 {
    color: var(--fourth-color) !important
}
.t-c-8 {
    color: var(--eighth-color) !important
}

.bg_c_3{
    background-color: var(--third-color) !important
}
.bg_c_4 , .bg-primary.actualite {
    background-color: var(--fourth-color) !important;
}
.bg_c_5 , .bg-primary.ressource{
    background-color: var(--fifth-color) !important;
}

.bg_c_7{background-color: var(--sev-color) !important
}
.fc_grey_med {
    color: rgba(145, 145, 145, 0.8)
}

/*--------------------------------------------------------------
# PADDING & MARGIN   1.2
--------------------------------------------------------------*/

.mt-xl {
    margin-top: var(--xl);
}
.mb-xl {
    margin-bottom: var(--xl);
}
.mt-xxl {
    margin-top: var(--xxl);
}
.mb-xxl {
    margin-bottom: var(--xxl);
}
.ml-xxxl {
    margin-left: var(--xxxl);
}
.mb-xxxl {
    margin-bottom: var(--xxxl);
}
.pb-lg {
    padding-bottom: var(--lg);
}

.pt-xl {
    padding-top: var(--xl);
}
.pb-xl {
    padding-bottom: var(--xl);
}

.ps-xl {
    padding-left: var(--xl);
}

.ms-xxl{
    margin-left: var(--xxl);
}

.ps-xxl {
    padding-left: var(--xxl);
}

.pr-xxl {
    padding-right: var(--xxl);
}
.pb-xxl {
    padding-bottom: var(--xxl);
}
.pl-xxl {
    padding-left: var(--xxl);
}
.py-xxl {
    padding-top: var(--xxl);
    padding-bottom: var(--xxl);
}
.px-xxl {
    padding-left: var(--xxl);
    padding-right: var(--xxl);
}
.p-xxl {
    padding : var(--xxl);
}

.px-xxl {
    padding-left: var(--xxl);
    padding-right: var(--xxl);
}
.py-xxl{
    padding-top: var(--xxl);
    padding-bottom: var(--xxl);
}

.my-xxl{
    margin-top: var(--xxl);
    margin-bottom: var(--xxl);
}
.pt-xxxl {
    padding-top: var(--xxxl);
}
.pb-xxxl {
    padding-bottom: var(--xxxl);
}
.pr-xxxl {
    padding-right: var(--xxxl);
}

.py-xxxl{
    padding-top: var(--xxxl);
    padding-bottom: var(--xxxl);
}