@import url('https://fonts.googleapis.com/css?family=Lobster+Two|Roboto+Condensed:400,700&display=swap');
:root {
    --blue : #3339ff;
    --dore : #ffd700;
    --white : #ffffff;
    --ft : #0c1f38;
    --bars : #6e8698;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/*** ************************* *** VIEWS/LAYOUTS => BASE *** ************************* ***/

/*** ************************* ** BASE ** ************************* ***/
body{
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 400;
    line-height: 1.5;
    font-size: 1.4rem;
}

section {
    padding: 7vh 5vh;
}

.dore {
    color: var(--dore);
}

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

.bg-blue {
    background: var(--blue);
}

.btnZno {
    background: var(--blue);
    padding: 8px 2rem;
    color: white;
    border-radius: 0px;
}

.btnZno:hover,
.btnZno3:hover{
    background: var(--dore);
    color: white;
    text-decoration: none;
}

.btnZno2 {
    background: transparent;
    padding: 8px 2rem;
    color: white;
    border-radius: 23px;
    border: 1px solid white;
}

.btnZno2:hover{
    text-decoration: none;
}

.btnZno3 {
    background: var(--blue);
    padding: 8px 2rem;
    color: white;
    border-radius: 23px;
}

.bx-sd {
    box-shadow: 0 28px 16px -26px black;
}

/*** ************************* *** VIEWS/LAYOUTS/PARTIALS *** ************************* ***/

/*** ************************* ** NAVBAR ** ************************* ***/
.navbar {
    padding: 0 10rem;
}
.nav-link {
    color: white;
}
.nav-link:hover {
    color: var(--blue);
}

nav {
    font-size: 1.3rem;
    background : transparent;
    transition: background 1s ease-in-out,padding .5s ease-in-out;
}

nav .active {
    color: var(--blue);
}

.nav-active {
    background-color:var(--white);
    width: 100%;
    margin: 0;
    padding: 0 10rem;
}

.nav-active .nav-link {
    color: black;
}

.nav-active .btnZno {
    color: white;
}

.nav-active li .active {
    color: var(--blue);
}

.nav-active .nav-link:hover {
    color: var(--blue);
}

/*** ************************* ** FOOTER ** ************************* ***/
footer {
    background: var(--ft);
    padding: 5vh 0;
    color: white;
}
footer p {
    font-size: 1.2rem;
}

footer a i {
    color: white;
    font-size: 1.5rem;
}

/*** ************************* ** TEXT HEADER => CAROUSEL ** ************************* ***/
.carousel-caption span {
    font-size: 1.7rem;
}
.carousel-inner .carousel-caption {
    position: absolute;
    width: 50%;
    top : 30%;
    margin-left: 10%;
}

.carousel-inner .carousel-caption h5 {
    font-size: 4rem;
    font-weight: bolder;
}

.carousel-inner .carousel-caption p {
    font-size: 2rem;
}


/*** ************************* ** TEXT OTHER PAGE ** ************************* ***/
#header-other {
    /*background-image:radial-gradient(circle at bottom right,rgba(0,219,80,0.81) 0%,#003f70 77%),url("../../images/couverture.jpg");*/
    background: url("../../images/Fond-Bleue-jpg.jpg") no-repeat;
    background-size: cover;
    height: 50vh;
}

#header-other .heading-page {
    color: white;
    position: absolute;
    top : 20%;
    padding-left: 44%;
}

/*** ************************* *** VIEWS/LAYOUTS => HOME PAGE *** ************************* ***/

/*** ************************* * CAROUSEL * ************************* ***/
#carouselExampleCaptions img {
    height: 85vh;
    filter: brightness(50%)
}

.carousel-indicators .active {
    color: var(--dore);
}

/*** ************************* * HORAIRE * ************************* ***/
#horaire a {
    color: var(--blue);
    text-decoration: none;
}
#horaire a:hover {
    color: var(--dore);
}

/*** ************************* * MOT DE L'APOTRE * ************************* ***/
#apostle-word {
    background: url("../../images/Fond-Bleue-jpg.jpg") no-repeat;
    font-size: 1.2rem;
    padding: 0 15rem;
}

#apostle-word p {
    text-align: justify;
}

#apostle-word span {
    color: var(--dore);
    font-size: 1.5rem;
}
#apostle-word .section-heading {
    padding-top: 5rem;
}

/*** ************************* * EXTENSION * ************************* ***/
#extension {
    background: url("../../images/zno.jpg") center center no-repeat;
    background-size : cover;
    min-height: 40vh;
}

#extension p{
    color: black;
}

#extension a {
    text-decoration: none;
}

#extension h4 {
    margin-bottom: 2rem;
    font-size: 2rem;
}

#extension .btn_one {
    text-transform: uppercase;
    color: var(--blue);
    background: var(--white);
    border-style: solid;
    border-width: 1px;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 800;
}

#extension .btn_one:hover {
    color: var(--white);
    background: var(--blue);
}

#extension .btn_two {
    text-transform: uppercase;
    color: var(--white);
    background: var(--blue);
    border-style: solid;
    border-width: 1px;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 800;
}

#extension .btn_two:hover {
    color: var(--blue);
    background: var(--white);
}

#extension card-body img {
    width: 1rem;
}

#extension h4 span {
    font-size: 1.4rem;
}


/*** ************************* * REPLAY * ************************* ***/
#replay {
    background: url("../../images/Fond-Bleue-jpg.jpg") no-repeat;
    color: white;
}

#replay a {
    text-decoration: none;
}

#replay a:hover {
    background: white;
    color: var(--blue);
}

/*** ************************* * ACTIVITE * ************************* ***/
.activite {
    position: relative;
    padding-top: 80px;
}


/*** ************************* * FINANCE * ************************* ***/
#finance {
    background: url("../../images/finance.jpg") no-repeat;
    background-size: cover;
    color: white;
}

#finance a:hover {
    background: white;
    color: var(--blue);
}




















/*** ************************* *** MEDIA SCREEN *** ************************* ***/
@media screen and (max-width: 820px){
    section{
        padding: 4vh 3vh;
    }

    .btnZno {
        color: white;
    }

    section h1{
        font-size: 1.3rem;
    }

    section p{
        font-size: 1rem;
    }

    section a {
        font-size: 1rem;
    }

    /* ====================================== NAVBAR ======================================= */
    .navbar {
        background: white;
        padding: 0.5rem 1rem;
    }

    .navbar img {
        width: 70%;
    }

    .navbar .nav-link {
        color: black;
    }

    .navbar ul {
        width: 100%;
    }

    .navbar-toggler-icon {
        color: var(--bars);
        font-size: 30px;
        margin-top: 14px;
    }

    /* ====================================== APOSTLE WORD ======================================= */
    #apostle-word {
        padding: 1.5rem 1rem;
    }

    #apostle-word img{
        height: 100%;
        width: 100%;
        margin-bottom: 0;
    }

    #apostle-word span {
        font-size: 1rem;
    }

    #apostle-word p {
        font-size: .9rem;
    }
    #apostle-word .section-heading {
        padding-top: 0;
        margin-top: 1rem;
    }

    /* ====================================== FOOTER ======================================= */
    footer p{
        font-size: .7rem;
        text-align: center;
        margin-top: .5rem;
    }
}


@media screen and (max-width: 640px) {
    /* ====================================== ACTIVITE ======================================= */
    .card_car-carousel_car {
        margin-left: calc((100vw - var(--carousel-min-width) - 40px) / 2)
    }
}