@font-face {
    font-family: 'robotoregular';
    src: url('fonts/Roboto-Regular-webfont.eot');
    src: url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Regular-webfont.woff2') format('woff2'),
         url('fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'colaborate-regularregular';
    src: url('fonts/ColabReg-webfont.eot');
    src: url('fonts/ColabReg-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ColabReg-webfont.woff2') format('woff2'),
         url('fonts/ColabReg-webfont.woff') format('woff'),
         url('fonts/ColabReg-webfont.ttf') format('truetype'),
         url('fonts/ColabReg-webfont.svg#colaborate-regularregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'sansationregular';
    src: url('fonts/Sansation-Regular-webfont.eot');
    src: url('fonts/Sansation-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Sansation-Regular-webfont.woff2') format('woff2'),
         url('fonts/Sansation-Regular-webfont.woff') format('woff'),
         url('fonts/Sansation-Regular-webfont.ttf') format('truetype'),
         url('fonts/Sansation-Regular-webfont.svg#sansationregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

    /* COULEURS */

:root {
    --blanc: #EAEBED;
    --gris2: #A3B1C3;
    --bleu1: #006989;
    --bleu2: #007090;
    --bleuClair : #01A7C2;
}

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

body{
    background-color: var(--blanc);
}








    /* HEADER */

header {
    padding-top: 5px;
    background-color: var(--bleu1);
    box-shadow: 0px 10px 30px 30px var(--bleu1);
    position: relative;
    z-index: 999;
}

header h1 {
    font-size: 2.2rem;
}

header h2 {
    font-size: 1.1rem;
}

.header_nav {
    display: flex;
    justify-content: space-between;
    width: 900px;
    margin: auto;
}

.titre_logo {
    color: var(--blanc);
    font-family: 'sansationregular', 'Courier New', Courier, monospace;
}

/*NAV HEADER*/

.navigation {
    display: flex;
    align-items: center;
}

.navigation ul {
    display: flex;
    align-items: center;
    
    list-style-type: none;
}

.navigation a {
    color: var(--blanc);
    text-decoration: none;
    font-family: 'sansationregular', 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    transition: 0.4s;

    margin-left: 15px;
    
}

.navigation a:hover {
    color: var(--bleuClair);
}
    /* IMAGE BANNIERE*/

.banniere {
    margin: 0px;
    overflow: hidden;
}

.banniere img {
    border: 10px;
    min-width: 100%;
    height: 75vh;
    object-fit: cover;

    
}




    /* BLOC */

#bloc-page {
    width: 900px;
    margin: auto;
}


    /* ACCUEIL */

#accueil {
    font-family: 'robotoregular', 'Times New Roman', Times, serif;
}

#accueil .paragraphe {
    text-align: center;
    padding-top: 3rem;
}



.accueil_blocs {
    display: flex;
    justify-content: space-around;

    padding-top: 3rem;
}

.accueil_bloc { /*bloc individuel*/

    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
    padding: 10px 20px 10px 20px;
    margin: 0 10px 0 10px;

    border: 1px solid var(--gris2);
    border-radius: 0.3rem;

    transition: 0.3s;
}

.accueil_bloc:hover {
    box-shadow: inset 0 0 10px var(--gris2);
    background-color: #0069890e;
}

.accueil_blocs .images_accueil {
    padding-top: 2rem;
}

.accueil_blocs p {
    margin: 0;
    padding: 0;
    padding-top: 2rem;
}

.images_accueil img {
    /*border: 1px solid;*/

    width: 60px;
    height: 60px;
    object-fit: contain;

    transition: 0.3s;
}

/*#imageStylo:hover {
    content: url(images/icones/icon_stylo_hover.png);
    width: 45%;
}*/



    /* ARTICLES */

.articles_bloc {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    border: 2px solid var(--bleuClair);
    border-radius: 1rem;
    /*background-color: var(--bleu1);*/
    background: rgb(0,105,137);
    background: linear-gradient(159deg, rgba(0,105,137,1) 15%, rgba(1,167,194,1) 100%);

    text-align: center;

    width: 38rem;
    height: 30rem;
    margin: auto;
    margin-top: 6rem;
    margin-bottom: 6rem;
    padding: 3rem 2rem 3rem 2rem;

    color: var(--blanc);

    transition: .3s;
}

.articles_bloc:hover {
    box-shadow: 0px 5px 15px 5px var(--gris2);
}


.articles_bloc h2 {
    font-family: 'robotoregular', 'Times New Roman', Times, serif;
    font-size: 2rem;
    text-transform: uppercase;

    padding-bottom: 2rem;
}

.articles_bloc h3 {
    font-family: 'robotoregular', 'Times New Roman', Times, serif;
    font-weight: 300;
    font-size: 1.5rem;

    padding-bottom: 1.5rem;
}

.guillemets {
    font-size: 2rem;
}

.article_p p {
    /*border: black solid;*/
    text-align: justify;
    font-family: 'robotoregular', 'Times New Roman', Times, serif;
    font-size: 1rem;

    width: 30rem;
    height: 17rem;

}


    /*CONTACT*/

.contact {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    /*margin-bottom: 3rem;*/

    background: rgb(0,105,137);
    background: linear-gradient(0deg, rgba(0,105,137,1) 15%, rgba(1,167,194,1) 100%);
    color: var(--blanc);

    border-top-left-radius: 15rem;
    border-top-right-radius: 15rem;
}

.contact h2 {
    font-family: 'robotoregular', 'Times New Roman', Times, serif;
    font-size: 2rem;
    text-transform: uppercase;
    text-align: center;

    padding-top: 1rem;
    padding-bottom: 2rem;
}

.contact p {
    text-align: center;
    font-family: 'robotoregular', 'Times New Roman', Times, serif;
    font-size: 1.5rem;

    padding-bottom: 3rem;
}

footer {
    /*border: 1px solid;*/
    background-color: var(--bleu1);

    padding: 1rem 0px 1rem 0px;
}

footer h3, footer p {
    width: 900px;
    margin: auto;
}

footer h3 {
    text-align: left;
    font-family: 'robotoregular', 'Times New Roman', Times, serif;
    font-size: 1.5rem;
    font-weight: 100;

    color: var(--blanc);
}

footer p {
    color: var(--blanc);
}