@font-face {
	font-family: "Bodega Sans";
	src: url("../fonts/BodegaSans_Black.ttf");
}

/****************************************************
                      GLOBAL
*****************************************************/

* {
    box-sizing: border-box;
    outline: none;
}

html {
    font-size: 62.5%;
}

body {
    background: #444;
    color: white;
	font-family: "Open Sans", arial, sans-serif;
	font-size: 1.6rem;
	line-height: 2;
}

img {
    max-width:100%;
}

.container {
    margin: 0 auto;
    max-width: 1500px;
}

.orange {
	color: #FF9D00;
}

/****************************************************
                      HEADER
*****************************************************/
header {
	background: linear-gradient(162deg, white 0%, white 50%, #333 50%, #333 100%);
	/* background: linear-gradient(162deg, white 50%, #333 50%); */ /*Autre façon plus concise de l'écrire*/
    box-shadow: 0 0 25px rgba(0,0,0,0.2);
    margin:30px 30px 0;
    padding: 25px;
}

header nav {
    display: flex;  
    flex-direction: column;
    justify-content: space-between;

    font-family: "Bodega Sans", arial, sans-serif;
	line-height: 1.5;
	text-align: right;
}

header nav a {
	color: white;
	font-size: 2.5rem;
    padding: 10px;
    text-decoration: none;
}

header nav a:hover {
	color: #FF9D00;
}



/****************************************************
                      MAIN
*****************************************************/
main{
    margin: 0 30px;
}

main h1, 
main h2, 
main h3 {
	font-family: "Bodega Sans", arial, sans-serif;
	font-weight: normal;
	text-transform: uppercase;
}

main h1 {
    font-size: 4rem;
    text-align: center;

}

/* section slider */
.slider{
    display:none;
}

/*section moto*/
main h2 {
    border-left: 3px solid rgba(0, 0, 0, 0.075);
	border-top: 3px solid rgba(0, 0, 0, 0.075);
	font-size: 3rem;letter-spacing: 1px;
	margin: 50px 0 25px;
	padding: 10px 30px;
}

main .moto article {
    background-color: white;
    color: #666;
    margin:0 15px 25px;
    padding: 0 20px 20px;
	text-align: center;
}

main .moto article img{
	width: 100%;
}

main .moto h3 {
    border-bottom: 2px solid  #FF9D00;
    color:  #FF9D00;
	font-weight: normal;
    font-size: 2.5rem;
    margin: -10px 0 20px;
}

main .moto a {
    background-color: #FF9D00;
    color: white;
    display: block;
    margin-top: 10px;
	padding: 10px;
    text-decoration: none;
    width: 100%;
}

/*section media*/
main .media article {
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

main .media .social i {
    display: block;
    font-size: 5rem;
    padding: 25px;
}

main .media .social i:last-of-type {
    padding-bottom: 50px;
}

main .media video{
    display: none;
    width:100%;
}


/****************************************************
                    FOOTER
*****************************************************/
footer {
    box-shadow: 0 0 25px rgba(0,0,0,0.2);
	color: rgba(255,255,255,0.75);
	margin: 100px 30px 30px;
	padding: 50px;
	text-align: center;
}

footer h2{
    font-family: "Bodega Sans", arial, sans-serif;
    font-weight: normal;
    text-transform: uppercase;
}

footer a{ /*tous les lien du footer y compris ceux de la nav*/
    color: white;
}

footer nav{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

footer nav a{
    padding: 15px;
}

footer img {
    width: 50px;
}




/*=======================================================
                    MEDIA QUERIES
=========================================================*/


/*========================= TABLETTE ======================*/


@media screen and (min-width: 768px){ /*s'applique à partir de 768px et au-delà*/
   /****************************************************
                        GLOBAL
    *****************************************************/
    body{
        background-image: url("../img/bg_body.svg");
    }
    
    /****************************************************
                        HEADER
    *****************************************************/
    header {
        background: linear-gradient(130deg, white 0%, white 50%, #333 50%, #333 100%);
    }

    header div.container{
        display: flex;
        justify-content: space-between;
    }
    
    /****************************************************
                        MAIN
    *****************************************************/
    /* slider */
    .slider {
        background-color: white;
        box-shadow: 0 0 25px rgba(0,0,0,0.2);
        display: block;
        margin: 50px auto 0;
        padding: 10px;
    }

    .flexslider {
        border: 0;
        margin: 0;
    }

    /*Solution CSS pour rendre invisible les flèches de direction et les puces de sélection du slider*/
    /*.flex-direction-nav,
    .flex-control-nav{
        display: none;
    }*/

    main .moto div{
        display: flex;
        flex-wrap: wrap;
    }

    main .moto article {
        flex-basis: 45.765%;
        margin: 0 2.118% 25px;
    }

    main .media video{
        display: block;
    }
}


/*========================= DESKTOP ======================*/


@media screen and (min-width: 1025px){ /*s'applique à partir de 1025px et au-delà*/

    
    /****************************************************
                        HEADER
    *****************************************************/

    header{
        margin:0;
    }
    
    
    /****************************************************
                        MAIN
    *****************************************************/
    /*section moto*/
    main .moto div{
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    main .moto article:first-of-type {
        margin-left: 0;
    }

    main .moto article:last-of-type {
        margin-right: 0;
    }

    main .moto article {
        flex-basis: auto;
        margin: 0 15px 25px;
    }

    /*section media*/
    main .media div{
        display: flex;
        justify-content: space-between;
    }

    main .media .social {
        padding-right: 25px;
        text-align: left;
    }

    main .media .social i {
        display: inline-block;
        font-size: 5rem;
        padding: 25px;
    }

    
    
    /****************************************************
                        FOOTER
    *****************************************************/
    footer{
        margin: 100px 0 0;
    }
}