:root {
    --ombre: 0 3px 1px rgba(0, 0, 0, 0.4);
    --ombre_hover: 0 5px 3px rgba(0, 0, 0, 0.4);
    --outfit: 'Outfit', sans-serif;
    --radius: 25px;
    --noriadius: 0px;
    --bs-body-color: #242424 !important;
    --base_bleu: #1d343d;
    --base_vert: #14838b;
    --base_jaune: #e8c574;
    --base_orange: #c78e43;
    --base_rouge: #c24444;
}

.text-bleu {
    color: var(--base_bleu);
}

.text-vert {
    color: var(--base_vert);
}

.text-jaune {
    color: var(--base_jaune) !important;
}

.text-orange {
    color: var(--base_orange);
}

.text-rouge {
    color: var(--base_rouge);
}

.bg-bleu {
    background-color: var(--base_bleu);
}

.bg-vert {
    background-color: var(--base_vert);
}

.bg-jaune {
    background-color: var(--base_jaune);
}

.bg-orange {
    background-color: var(--base_orange);
}

.bg-rouge {
    background-color: var(--base_rouge);
}

* {
    box-sizing: border-box;
}

body {
    color: var(--base_bleu) !important;
    font-family: var(--outfit);
    width: 100% !important;
    overflow-x: hidden;
}

.content {
    background-image: url('/images/fond.png?v=4');
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
    display: block;
    height: 400em;
    transform: translate3d(0, 0, 0);
    background-position-x: center;
    background-size: cover;
    filter: brightness(15%);
    -webkit-filter: brightness(15%);
}

.blhover:hover {
    color: #fff !important;
    opacity: 0.8;
    transition: all 0.5s ease-in-out;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #326477;
}

.text-bleu {
    color: var(--base_bleu);
}

.link {
    text-decoration: none;
}

.outfitLight {
    font-family: var(--outfit);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff !important;
    opacity: 0.8;
}

.outfitBold {
    font-family: var(--outfit);
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #fff !important;
    opacity: 0.8;
}

.majuscule {
    font-variant: small-caps !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.btn-jaune {
    --bs-btn-color: #000;
    --bs-btn-bg: var(--base_jaune);
    --bs-btn-border-color: var(--base_jaune);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--base_jaune);
    --bs-btn-hover-border-color: var(--base_jaune);
    --bs-btn-focus-shadow-rgb: 204, 147, 66;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--base_jaune);
    --bs-btn-active-border-color: var(--base_jaune);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--base_jaune);
    --bs-btn-disabled-border-color: var(--base_jaune);
}

.btn-rouge {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--base_rouge);
    --bs-btn-border-color: var(--base_rouge);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--base_rouge);
    --bs-btn-hover-border-color: var(--base_rouge);
    --bs-btn-focus-shadow-rgb: 204, 147, 66;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--base_rouge);
    --bs-btn-active-border-color: var(--base_rouge);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--base_rouge);
    --bs-btn-disabled-border-color: var(--base_rouge);
}

.btn-outline-jaune {
    --bs-btn-color: var(--base_jaune);
    --bs-btn-border-color: var(--base_jaune);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--base_jaune);
    --bs-btn-hover-border-color: var(--base_jaune);
    --bs-btn-focus-shadow-rgb: 255, 193, 7;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--base_jaune);
    --bs-btn-active-border-color: var(--base_jaune);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--base_jaune);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--base_jaune);
    --bs-gradient: none;
}

.btn-outline-bleu {
    --bs-btn-color: var(--base_bleu);
    --bs-btn-border-color: var(--base_bleu);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--base_bleu);
    --bs-btn-hover-border-color: var(--base_bleu);
    --bs-btn-focus-shadow-rgb: 255, 193, 7;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--base_bleu);
    --bs-btn-active-border-color: var(--base_bleu);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--base_bleu);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--base_bleu);
    --bs-gradient: none;
}

.btn-outline-rouge {
    --bs-btn-color: var(--base_rouge);
    --bs-btn-border-color: var(--base_rouge);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--base_rouge);
    --bs-btn-hover-border-color: var(--base_rouge);
    --bs-btn-focus-shadow-rgb: 255, 193, 7;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--base_rouge);
    --bs-btn-active-border-color: var(--base_rouge);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--base_rouge);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--base_rouge);
    --bs-gradient: none;
}

.noradius {
    border-radius: var(--noriadius);
}

.radius {
    border-radius: var(--radius);
}
.pointer {
    cursor: pointer;
}
.icon-flow {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.carte {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 15px;
    width: calc(145px + 8vw);
    height: calc(145px + 8vw);
    margin: 16px;
    box-sizing: border-box;
}

.grid-item-double {
    width: 609px !important;
}

.grid-item-all {
    width: 100% !important;
}

.carteSansFond {
    overflow: hidden;
    padding: 25px;
}

.carteGrande {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 15px;
    width: 530px;
    height: 250px;
    margin: 16px;
    box-sizing: border-box;
}

.carteSansFondGrande {
    overflow: hidden;
    margin: 16px;
    padding: 2px;
}

.grid-container>* {
    transition: transform 0.5s ease-out;
}


.grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.grid-item {
    box-sizing: border-box;
}

.logi {
    width: 60px;
}

.contactbg {
    background-image: url('http://lime.cellulequalite.site/MJ/images/home.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
}

.mondrian {
    border: solid 8px var(--bs-body-color);
}

.mondrian-mobile {
    border: solid 2px var(--bs-body-color);
}

.ht {
    height: 113px;
}

.scrollanime,
.lgo,
.grid-container {
    transform: translateZ(0) scale(1);
}

@media (max-width: 1200px) {
    .navbar-expand {
        height: 30px;
    }

    .hide_mobile {
        display: none !important;
    }

    .grid-item-double {
        width: 500px !important;
    }

    .outfitLight {
        font-size: smaller;
    }

    .carte {
        padding: 3px !important;
    }

    .ht {
        height: 60px;
    }
}

@media (min-width: 1200px) {
    .vue_mobile {
        display: none !important;
    }
}

#deuxieme {
    transition: opacity 1s ease-in-out;
}