/* .vague-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
} */

:root {
    --violet: #701B75;
    --orange : #EC7A35;
    --blue : #005780;
    --green : #B4CC5A;
    --marron : #2D244C;
    --yellow : #EDD718;
}

.text-violet, a .text-violet {
    color: var(--violet);
}

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

.text-blue {
    color: var(--blue);
}

.text-green {
    color: var(--green);
}

.text-marron {
    color: var(--marron);
}

.text-yellow {
    color: var(--yellow);
}

.hero {
    min-height: 70vh;
    /* background: #701B75;
    background: linear-gradient(124deg, rgba(112, 27, 117, 1) 0%, rgba(236, 122, 53, 1) 20%, rgba(0, 87, 128, 1) 40%, rgba(180, 204, 90, 1) 60%, rgba(45, 36, 76, 1) 80%, rgba(237, 215, 24, 1) 98%); */

    &.container {
        min-height: 70vh;
    }

    h1,
    .lead {
        color: white !important;
    }

    .hero-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
    }
}

.overlay {
    position: relative;
}

.overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Pas de background ici pour que ce soit géré par une variante */
}

.overlay.overlay-img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.overlay.overlay-img.overlay-opacity-50::before {
    background-blend-mode: lighten;
}

.overlay.overlay-dark-50::before {
    background: rgba(0, 0, 0, 0.5);
}

.bg-cover {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}