@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
* {
    font-family: 'Montserrat'; /* Police par défaut */
    box-sizing: border-box; /* Les tailles de conteneurs incluent bordures et 
                               remplissages */
    margin: 0; /* Mise à 0 des marges externes */
    padding: 0; /* Mise à 0 des marges internes */
    text-decoration: none; /* Suppression de la mise en forme habituelle des liens 
                             (soulignement) */
}

/* Définition de la police "Montserrat" */
@font-face{ 
    font-family: "Montserrat";
    src: url('polices/Montserrat-Regular.ttf') format("truetype");
}

body {
    display: flex; /* Ce conteneur est "flexible" */
    justify-content: center; /* Les éléments portés sont centrés à l'horizontal */
    flex-direction: column; /* Les éléments sont empilés */
    align-items: center; /* Les éléments portés sont centrés à la verticale */
    width: 100%; /* La page occupe toute la largeur */
}

header {
    width: 916px; /* Les headers et sections occupent 916px (taille de la bannière) */
    display: flex; /* Ce conteneur est "flexible" */
    flex-direction: column; /* Les éléments sont empilés */
}

picture {
    display: flex;
}

nav input {
    display: none;
}

nav ul {
    display: flex; /* Ce conteneur est "flexible" */
    flex-direction: row; /* Les éléments sont mis côte à côte */
    justify-content: space-between; /* Les éléments sont répartis équitablement */
    background-color: black; /* Couleur du fond */
}
nav ul li {
    display: flex; /* Ce conteneur est "flexible" */
    justify-content: center; /* Les éléments portés sont centrés à l'horizontal */
    list-style-type: none; /* Cette liste n'a pas de puce */
    font-size: x-large; /* Le texte est grossi en XL */
    flex-grow: 1; /* L'espace occupé est élargie */
}

nav ul li a {
    padding: 10px; /* Marge intérieure */
    color: white; /* Couleur du texte */
}
nav ul li:hover {
    background-color:#9a330a; /* Couleur du fond au passage de la souris */
}
section {
    width: 916px; /* Les sections occupent 916px (taille de la bannière) */
}

#principal {
    margin-top: 10px; /* Marge supérieure */
    display: flex; /* Ce conteneur est "flexible" */
    flex-direction: row; /* Les éléments sont mis côte à côte */
    text-align: justify; /* Alignement du texte : justifié */
}
#principal article {
    flex: 1; /* Écriture raccourcie : 
                flex-grow: 1 et flex-shrink:1 = Chaque élément occupe l'espace idéal 
                (le + et le - à la fois) */
}
#principal article img {
    float: left; /* Mise en élément "flottant" contre lequel on peut venir se poser */
    margin-right: 10px; /* Marge de droite */
}
#principal article p {
    padding-top: 16px; /* Marge intérieure supérieure */
}
#principal aside {
    display: flex; /* Ce conteneur est "flexible" */
    flex-direction: column; /* Les éléments sont empilés */
    margin-left: 16px; /* Marge de gauche */
    width: 238px; /* Largeur du conteneur (taille de l'image de fond) */
    background: transparent url('images/post-it-conseils.png') no-repeat 0 0; /* Fond */
    font-size: small; /* Le texte est réduit en S */
    font-weight: bold; /* Le texte est mis en gras */
    padding-left: 35px; /* Marge intérieure gauche */
    padding-bottom: 60px; /* Marge intérieure basse */
}
#principal aside img:first-child{
    margin-top: 110px; /* Marge supérieure du premier élément qui est une image  */
}
#principal aside img {
    align-self: center; /* Placement au centre */
}
#principal aside img:nth-child(3){
    margin-top: 20px; /* Marge supérieure du troisième élément qui est une image */
}
#thematique {
    display: flex; /* Ce conteneur est "flexible" */
    flex-wrap: wrap; /* Les éléments sont placés sur plusieurs lignes */
    margin-bottom: 45px; /* Marge basse (correspond à la hauteur du footer + 10px) */
}

h1 {
    color: #ff6811; /* Couleur du texte */
    font-size: xx-large; /* Le texte est grossi en XXL */
}

#thematique h1 {
    width: 100%; /* Le titre occupe toute la largeur */ 
    margin-bottom: 10px; /* Marge basse */
}

#thematique article {
    flex: 1; /* flex-grow: 1 et flex-shrink:1 = Chaque élément occupe l'espace idéal (le + et le - à la fois) */
    height: 256px; /* Hauteur */
    border: transparent thin solid; /* Bordure transparente */
    display: flex; /* Ce conteneur est "flexible" */
    justify-content: center; /* Les éléments portés sont centrés à l'horizontal */
}

/* Définition de la police "Nordic" */
@font-face{ 
    font-family: "Nordic";
    src: url('polices/Nordic.ttf') format("truetype");
}

#thematique a {
    font-family: 'Nordic'; /* Police à utiliser */
    font-size: xx-large; /* Le texte est grossi en XXL */
    color: black; /* Couleur du texte */

}

#gauche:hover, #milieu:hover, #droite:hover {
    border: black thin solid; /* Bordure au passage de la souris */
    border-radius: 10px; /* Bords arrondis au passage de la souris */
    background-color: #ededed; /* Fond au passage de la souris */
}

#gauche {
    background: transparent url('images/casqueroute.png') no-repeat center 10px; /* Fond */
}

#milieu {
    background: transparent url('images/casquecross.png') no-repeat center 0; /* Fond */
}

#droite {
    background: transparent url('images/casquepiste.png') no-repeat center 10px; /* Fond */
}

footer {
    display: flex; /* Ce conteneur est "flexible" */
    justify-content: center; /* Les éléments portés sont centrés à l'horizontal */
    align-items: center; /* Les éléments portés sont centrés à la verticale */
    position: fixed; /* Le conteneur est fixé en fonction de ses coordonnées (à 0px du bas) */
    bottom: 0px; /* Bas */
    height: 35px; /* Hauteur */
    width: 100%; /* Le pied de page occupe toute la largeur */ 
    background-color:#2d2d2d; /* Couleur de fond */
    color: #bbb; /* Couleur du texte */
    text-align:center; /* Texte centré */
}

footer p {
    font-size: large; /* Le texte est grossi en L */
}

footer a{
    color: inherit; /* Couleur du lien identique à celle du conteneur */
}

/* Smartphone */
@media screen and (max-width:768px) {
    body {
        font-size: large;
    }

    header, section {
        width: auto; /* Suppression de la largeur définie */
    }

    header img {
        width: 100%; /* Bannière sur toute la largeur */
        background-color: black; /* Extension artificielle noire */
        padding-bottom: 15px; /* du bas de l'image sur 15 pixels */
    }

    nav {
        /*display: block;*/
        position: relative;
        top: 7px;
        left: 7px;
        z-index: 1;
    }

    nav ul {
        display: flex; /* Ce conteneur est "flexible" */
        flex-direction: column; /* Les éléments sont mis côte à côte */
        align-items: flex-start; /* Alignement sur la gauche */
        position: absolute;
        margin: -39px 0 0 -60px;
        padding: 50px 10px 10px 60px;
        background: black;
        list-style-type: none;
        transform: translate(-100%, 0);
        transition: transform 0.5s ease;
    }

    nav ul li {
        display: list-item;
        padding: 10px 0;
        width: 100%;
    }


    nav input {
        display: block; /* Affichage de l'input pour pouvoir cliquez dessus */
        position: absolute;
        opacity: 0; /* input transparent */
        z-index: 2; /* On le place au-dessus du bouton de menu (hamburger) */
    }

    /* Création artificielle de l'icone de menu (hamburger) */
    nav span {
        display: block;
        width: 30px;
        height: 5px;
        margin-bottom: 5px;
        position: relative;
        background: black;
        border-radius: 3px;
        z-index: 1; /* En dessous de l'input défini avant */
        /*transform-origin: 4px 0px; /* Modification du centre pour rotation */
        transition: transform 0.5s ease, background 0.5s ease, opacity 0.55s ease;
    }

    /* Toutes les barres en blanc */
    nav input:checked ~ span {
        background: white;
    }

    /* On fait pivoter la première de 45° (sens horaire) */
    nav input:checked ~ span:nth-child(2) {
        transform: rotate(45deg) translate(7px, 5px);
    }

    /* On fait pivoter la dernière de 45° (sens anti-horaire) */
    nav input:checked ~ span:nth-child(4) {
        transform: rotate(-45deg) translate(10px, -6px);
    }

    /* On cache la barre du milieu */
    nav input:checked ~ span:nth-child(3) {
        opacity: 0; 
    }

    /* On annule la translation vers la gauche qui a caché le menu */
    nav input:checked ~ ul {
        transform: none;
    }

    #principal {
        flex-direction: column;
        margin: 0 10px;
    }

    #principal article img {
        float: left;
        margin-right: 10px;
        margin-top: 15px;
    }

    #principal aside {display: none;}

    h1 {
        font-size: x-large;
    }

    #thematique {   
        flex-direction: column;
        margin-top: 15px;
    }

    #gauche, #milieu, #droite {
        background-size: contain; 
    }

    footer {
        display: none;
    }
}

@media screen and (min-width:576px) and (max-width:768px) {
    #thematique {
        flex-direction: row; /* Sur tablette, on met les casques de la page d'accueil côte à côte */
    }
}

.login-box{
        margin-top: 4%;
	width: 45%;
        margin-left: 25%;
	text-align: center;
}

.login-box img{
    width: 30%;
}



.login-box input[type="text"],.login-box input[type="password"]{
        width: 200px;
        margin-bottom: 2%;
	background: none;
	outline: none;
	border: 3px solid #4F5B7E;
	padding: 2.7% 7%;
	border-radius: 50px;
	transition: 0.5s;
	text-align: center;
	cursor: pointer;
	color: #4F5B7E;
	font-size: 1em;	
}

.login-box i{
	font-size: 2em;
	color: white;
	text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black;
	
}

.login-box input[type ="text"]:focus,.login-box input[type="password"]:focus{
	width: 60%;
	border-color: #879BD5;
}
	
.login-box input[type="submit"]{
	background: none;
	display: block;
	margin: 20px auto;
	outline: none;
	border: 3px solid #4F5B7E;
	padding: 2.7% 7%;
	border-radius: 50px;
	transition: 0.5s;
	text-align: center;
	cursor: pointer;
	color: #4F5B7E;
	font-size: 1em;	
}

.login-box input[type="submit"]:hover{
	background: #DFE2EB;
	
}


#inscrit h1 {
    margin-top: 10px;
    text-align: left;
}
#inscritsbox{
    text-align: center;
    color: #4F5B7E;
}

#inscritstext{
    text-align: left;
}


#inscritstext input{
    outline: none;
    text-decoration: none;
    border: 0;
    border-bottom: 3px solid #4F5B7E;
    width: 100%;
    font-size: 1em;
    transition: 0.5s;
}

#inscritstext input:focus{
    transition: 0.5s;
    border-color: #5177E9;
}

.inscription input[type="submit"]{
	border:0;
	background: none;
	display: block;
	margin: 20px auto;
	outline: none;
	border: 3px solid #4F5B7E;
	padding: 2% 6%;
	border-radius: 50px;
	transition: 0.5s;
	text-align: center;
	cursor: pointer;
	color: #4F5B7E;
	font-size: 1em;	
}

.inscription input[type ="submit"]:hover{
	background: #DFE2EB;
	
}

#inscrit{
    margin-bottom: 2%;
}