/*======================================
            POLICES
======================================*/

@font-face {
    font-family: 'Montserrat-Bold';
    src: url('font/Montserrat-Bold.otf');
}

@font-face {
    font-family: 'Montserrat-Medium';
    src: url('font/Montserrat-Medium.otf');
}

@font-face {
    font-family: 'Montserrat-Regular';
    src: url('font/Montserrat-Regular.otf');
}

@font-face {
    font-family: 'Montserrat-Light';
    src: url('font/Montserrat-Light.otf');
}

@font-face {
    font-family: 'Montserrat-Light-Italic';
    src: url('font/Montserrat-LightItalic.otf');
}

@font-face {
    font-family: 'Montserrat-Italic';
    src: url('font/Montserrat-Italic.otf');
}

/*======================================
          COULEURS PRINCIPALES
======================================*/
:root {
    --color-bleu-extralight: #8dd2ef;
    --color-bleu-light: #44708b;
    --color-bleu-light-border: rgba(68, 112, 139, 0.4);
    --color-bleu: #365d78;
    --color-bleu-transparent: rgba(54, 93, 120, 0.2);
    --color-bleu-strong: #104a62;
    --color-background: #dfdde9;
    --color-background-light: #F6F1F1;
    --color-background-body: rgba(223, 221, 233, 0.80);
    --color-rouge: #cd616e;
    --color-rouge-strong: #490d20;
    --color-text-no-focus: #656564;
    --color-text-focus: #1e1e1e;

    --top-navbar-active: 158px
}

.c-noir {
    color: #2f2f2f;
}

.c-blanc {
    color: white;
}

.c-bleu-strong {
    color: var(--color-bleu-strong);
}

/*======================================
          STYLES GENERALES
======================================*/
body {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 10;
    font-family: 'Montserrat-Light', sans-serif;
    background-color: white;
    color: #4e4e4e;
}

html, body {
    height: 100%;
}

main {
    flex: 1;
}

p {
    margin-top: 0;
    margin-bottom: 0 !important;
}

form {
    margin-block-end: 0 !important;
}

a {
    text-decoration: none !important;
}

a:hover {
    text-decoration: none;
    cursor: pointer;
}

em {
    font-family: 'Montserrat-Light-Italic';
}

/*======================================
          TITRES / SOUS-TITRES
======================================*/
.wf-400 {
    font-family: 'Montserrat-Regular', serif;
}

.wf-600 {
    font-weight: 600!important;
}


.titre.bleu {
    color: var(--color-bleu-strong);
}

.titre {
    font-family: 'Montserrat-Regular', serif;
    font-size: 2.7rem;
}

.s-titre {
    font-size: 1.7rem;
}

.ss-titre {
    font-size: 1.3rem;
}

.ssss-titre {
    font-size: 0.8rem;
}

/*======================================
          BOX
======================================*/
.box {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    z-index: 1;
}

.border-left {
    border-left: 1px solid var(--color-background);
}

/*======================================
          PAGINATION
======================================*/
.active>.page-link, .page-link.active {
    background-color: var(--color-bleu-light);
    border-color: var(--color-bleu-light);
}

.page-link {
    color: var(--color-bleu-strong);
}

/*======================================
          BOUTONS
======================================*/
.btn-action-outline {
    background-color: white;
    font-family: 'Montserrat-Regular';
    border: 1px solid var(--color-bleu-light);
    border-radius: 10px;
    color: var(--color-bleu-light);
    transition: all 0.2s ease-in-out;
}

.btn-action-outline:hover {
    color: white;
    background-color: var(--color-bleu-light);
    transition: all 0.2s ease-in-out;
}

.btn-action {
    background-color: var(--color-bleu-light);
    border-radius: 10px;
    color: white;
    transition: all 0.2s ease-in-out;
}

.btn-action:hover {
    color: white;
    background-color: var(--color-bleu-strong);
    transition: all 0.2s ease-in-out;
}

.container-fluid.background {
    position: relative;
    z-index: 0;
    background-color: #8BB2C960;
    padding: 1.5rem 0;
    background-image: linear-gradient(180deg, rgba(139, 178, 201, 0.1) 0%,rgba(139, 178, 201, 0.1) 100%), url(/img/index/categorie-background.png)!important;
}

legend {
    border-bottom: 1px solid var(--color-background);
}

/* RESPONSIVE */
@media (max-width: 1500px) {

}

@media (max-width: 1200px) {

}

@media (max-width: 992px) {
    .titre {
        font-size: 2.3rem;
    }

    .s-titre {
        font-size: 1.5rem;
    }

    .ss-titre {
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) {
    .titre {
        font-size: 2rem;
    }
    .s-titre {
        font-size: 1.3rem;
    }
    .ss-titre {
        font-size: 1.2rem;
    }
    .border-left {
        border-left: none;
    }
}

@media (max-width: 576px) {
    .box {
        padding: 1rem;
    }
    .titre {
        font-size: 1.7rem;
    }
    .s-titre {
        font-size: 1.2rem;
    }
    .ss-titre {
        font-size: 1.05rem;
    }
}