@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Roboto:ital,wght@0,100;0,300;0,400;0,700;0,900;1,400;1,700&display=swap');
body {
    font-family: 'Roboto', sans-serif;
    color:#16446B;
}

.navbar {
    background-color: #16446B;
    border-bottom: 3px solid #F49321;
    height:120px;
    line-height: 120px;
}
    .navbar-expand-md .navbar-nav .nav-link {
        font-size: 18px;
    }
    .nav-link::before {
        content: '';
        padding-left: 20px;
        border-left:2px solid #F49321;
    }
    .nav-link#lien_accueil::before {border:none;
    }
    #logo img {
        height:100px;
        margin-bottom: 5px;
    }

#landing {
    background:#16446B url('../images/landing.jpg') top center no-repeat;
    background-size: cover;
}
    #introduction {
        margin-top: 110px;
        color:#F49321;
        background:url('../images/introduction.svg') top left no-repeat;
        background-size: 300px auto;
        font-family: 'Caveat Brush';
        font-family: 'Roboto';
        font-style:italic;
        font-size: 1.5rem;
        padding-top:15vh;padding-bottom: 15vh;
    }
    #introduction img {
        width:50vw;
        max-width: 500px;
        margin:15vh auto 5vh auto;
        display:block;
    }
#contact {background-color: rgba(22,68,107,0.1);background-color: #16446B;color:#fff;}
section {padding-top:10vh;padding-bottom: 10vh;}

.legende {
    color:#F49321;
    font-family: 'Caveat Brush';
    font-family: 'Roboto';
    font-style:italic;
    font-size: 27px;
}
#thumb {background-color: #F49321;border-radius: 25px;height:50px;width:50px;padding:10px;margin:0 auto;margin-top: -45px;}
    #thumb img {height:30px;width:auto;font-size:inherit;}

#chiffres {
    background: #f7ad30 url('../images/chiffres.svg') top right no-repeat;
    background-size: 300px auto;
    box-shadow: inset 0px 0px 200px 0px rgba(244,153,36,1);
}

h2 {
    font-size: 40px;
    text-transform: uppercase;
}
h2::after {
    content: '';
    display:block;
    width:60px;
    border-bottom:4px solid;
    margin: 30px 0;
}
h3 {
    font-weight: 900;
    text-transform: uppercase;
    font-size: 20px;
    margin:10px 0 15px 0;
}
.blanc {color:#fff;}
.orange {color:#F49321;}

.card-image {height:200px;line-height: 200px;text-align: center;}
.img-valeur, .img-etape {
    width:60%;
    height: auto;
    max-height: 200px;
}
.img-etape {max-height: 180px;}
.btb-orange {border-top: 3px solid #F49321;border-bottom: 3px solid #F49321;padding:30px;}


.card-img-top {max-height:100px;margin:25px auto 15px auto;}
.chiffre {
    font-weight: 900;
    text-transform: uppercase;
    font-size: 24px;
    display:block;
}
#etapes {
    background-color: #e0e0e0;
}
#les_etapes {
    color:#fff;
}
    #les_etapes img {width:80%;height:auto;margin: 0 auto;display:block;}
    #les_etapes p {margin-bottom: 40px;}
    #les_etapes h2::after {display:none;}
    #les_etapes h2 {margin-top:0;}
    #les_etapes h3 {font-weight: 600;text-transform: uppercase;margin: 25px auto 25px auto;font-size: 1.6em;}
    .numbers {
        font-size: 4.9em;
        font-weight: 100;
        margin: 45px auto 25px auto;
    }
    .bgbleu {padding:80px 20px 20px 20px;background-color:#16446B;}
    .bgbleu2 {padding:80px 20px 20px 20px;margin-top:-230px;background-color:rgba(22,68,107,0.75);}
    .bgorange {padding:80px 20px 20px 20px;margin-top:30px;background-color:#F49321;}
    .bgorange2 {padding:80px 20px 20px 20px;margin-top:210px;background-color: rgba(244,153,36,0.75);}
#interventions {
    color:#fff;
    background-color:#F49321;
    padding:30px;
}
blockquote img {
    border-radius: 50%;
}
blockquote cite {
    display:block;
    margin-top: 15px;
}
#divalto {background:#050505 url('../images/divalto_bg.png') bottom right no-repeat;background-size:25%;color:#fff;}
    #divalto a {
        display:inline-block;
        background-color: #F49321;
        color:#fff;
        text-decoration: none;
        padding:8px 30px;
        margin-top:30px;

    }

footer {
    background-color: #050505;
    padding:50px 0;
    font-size: 12px;
    color:#c0c0c0;
}
    footer a {color:#c0c0c0 !important;}

    @media screen and (max-width: 767px) {
        h2 {
            font-size: 30px;
            text-transform: uppercase;
        }
        h2::after {
            content: '';
            display:block;
            width:60px;
            border-bottom:4px solid;
            margin: 20px 0;
        }
        .card-img-top {max-height:60px;margin:25px auto 15px auto;}
        .navbar .container {max-width: 100%;}
        #logo img {height:70px;margin-bottom: 5px;}
        .legende {font-size: 22px;}
        .bgbleu2 {margin-top:30px;}
        .bgorange {margin-top:30px;}
        .bgorange2 {margin-top:30px;}
        #introduction {background:none;}
        #divalto {padding-bottom:140px;background-size:45%;color:#fff;}
        .navbar-expand-md .navbar-nav {
            width:100%;
            margin-left: 0;
            padding:20px;
            background-color: #16446B;
        }
        .navbar-expand-md .navbar-nav .nav-link {
            font-size: 20px;
            font-weight: 700;
            line-height: 28px;
        }
        .navbar-expand-md .navbar-nav .nav-link::before  {display: none;}
      }