/*page CSS du projet*/

/* Définition des polices personnalisées */

@font-face
{
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.eot');
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark.woff') format('woff'),
         url('polices/ballpark.ttf') format('truetype'),
         url('polices/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*Définition du style de la page*/

body
{
    /*on met un arriere plan*/
    background: url("https://www.numerama.com/content/uploads/2016/01/data-center.jpg") no-repeat center fixed;
    /*on met une police générale*/
    font-family : "Dayrom", "Courier New", sans-serif ;
    /*on met une couleur pour le texte*/
    color : firebrick;
}

#bloc_page/*le bloc ou seront les ecritures/images*/
{
    /*on change le fond*/
    background-color: whitesmoke;
    /*on le bloque à 950px de largeur*/
    width : 950px;
    /*les marges sont automatiques*/
    margin : auto;
    /*on aligne le texte par défaut*/
    text-align: justify;
}

section h1, footer h1, nav a
{
    /*on definie une police pour les titres et les liens entre les pages*/
    font-family : "Trebuchet MS", serif;
    text-transform : uppercase;
}

/* Header */

header
{
    /*on change le fond*/
    background-color : darkcyan;
    background: url('http://www.tiva-it.com/wp-content/uploads/2015/10/typing-for-it-support-godalming.jpg') no-repeat fixed top ;
    /*on modifie la propriété du bloc pour l'organiser*/
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

#titre_principal
{
    display: flex;
    /*on aligne en colonne*/
    flex-direction: column;
}

#logo
{
    display: flex;
    /*le logo s'organise avec le header en ligne et se serre dans le header*/
    flex-direction: row;
    align-items: baseline;
}

#logo img
{
    /*on impose des dimensions*/
    width: 69px;
    height: 70px;
}

header h1/* les titres 1 de l'entete seront : */;
{
    /*..avec une police spéciale*/
    font-family: 'BallparkWeiner', serif;
    /*..une taille spéciale*/
    font-size: 2.5em;
    font-weight: normal;
    margin: 0 0 0 10px;
}

header h2/*les titres 2 de l'entete seront...*/
{
    /*..avec une police spéciale*/
    font-family: Dayrom, serif;
    /*..une taille spéciale*/
    font-size: 1.1em;
    margin-top: 0px;
    font-weight: normal;
}

/* Navigation */

nav ul
{
    /*on place le titre dans un bandeau*/
    /*on aligne le bas du bandeau avec le bas de la section*/
    bottom: 0;
    /*on aligne les bords*/
    border-radius: 0px 0px 5px 5px;
    /*le bandeau peut prendre 99% de la place*/
    width: 99%;
    /*on bloque la hauteur*/
    height: 33px;
    /*on rajoute des marges entre le texte et le bord du bandeau*/
    padding-top: 10px;
    padding-left: 4px;
    /*on change le fond*/
    background-color: skyblue;
    /*on met le texte en blanc*/
    color: white;
    /*on enlève les puces de la liste*/
    list-style-type: none;
    display: flex;
}

nav li
{
    margin-right: 9px;
    color: white;
}

nav a
{
    font-size: 10px;
    color: white;
    padding-bottom: 3px;
    text-decoration: none;
}

nav a:hover/*lorsque la souris est sur le lien*/
{
    color: red;
    border-bottom: 3px solid red;
}

/* Bannière, l'histoire des ordis */

#banniere_image
{
    /*on ajoute une marge*/
    margin-top: 15px;
    /* on definit une hauter*/
    height: 200px;
    /*une image de fond*/
    background: url("https://images8.alphacoders.com/706/706494.jpg") fixed no-repeat center;
    /*on change les bords*/
    border-radius: 5px;
    position: relative;
    box-shadow: 0px 4px 4px maroon;
    margin-bottom: 25px;
}

#banniere_description
{
    /*on place le texte en bas du cadre, cf (nav ul)*/
    position: absolute;
    bottom: 0;
    border-radius: 0px 0px 5px 5px;
    width: 99%;
    height: 33px;
    padding-top: 15px;
    padding-left: 4px;
    background-color: rgba(133,6,6,0.7);
    color: white;
    font-size: 0.8em;
}

.bouton_rouge
{
    /*on défini le cadre rouge autour du texte*/
    height: 25px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    border: 1px solid #FF2800;
    border-radius: 5px;
    font-size: 1.2em;
    text-align: center;
    padding: 3px 8px 0px 8px;
    color: white;
    text-decoration: none;
}

.bouton_rouge img
{
    border: 0;
}

/*mise en page du corps de la page*/

section
{
    /*la section possède des marges et s'organise en ligne*/
    display : flex;
    margin-bottom : 10px;
    flex-direction: row;
}

article, aside
{
    /*les articles et les asides font la meme taille*/
    text-align : justify;
}

article
{
    /*on ajoute des marges, un bord et une taille*/
    margin-right : 15px;
    padding: 8px;
    flex : 7;
    border-radius: 4px;
    box-shadow: 0px 0px 5px maroon;
    overflow: auto;
    background: rgba(176,196,222, 0.3);
}
.sous_article_intro
{
    /*on definit un cadre spécial pour l'intro*/
    margin : 10px;
    padding: 5px;
    border : 2px dotted lightcyan;
    box-shadow: 0px 2px 3px gray;
}
.sous_article
{
    /*on définit des cadres dans l'article*/
    background: rgba(180,200,223, 0.4);
    margin : 10px;
    padding: 5px;
    border : 4px groove lightcyan;
    box-shadow: 0px 2px 3px gray;
}

.bienvenu
{
    text-align: center;
    margin : 4px;
    flex : 10;
}

.debut
{
    text-align: center;
    flex : 10;
}


article p 
{
    /*les lettres font 14px*/
    font-size : 14px;
    color : #850606;
}

article h1
{

    text-align: center;
}

aside
{
    /*les asides sont de petites tailles, avec un fond spécifique et une bordure*/
    flex : 2;
    position : relative;
    background-color: rgb(119,136,153);
    box-shadow : 0px 0px 5px maroon;
    border-radius: 4px;
    padding : 10px;
    color : white;
    font-size : 0.7em;
}

/*Definition du bas de page*/

footer
{
    display: flex;
    border-radius: 6px;
    box-shadow: 0px 2px 5px maroon;
}

footer p
{
    font-size : 0.8em;
}

footer h1
{
    font-size: 1.4em;
    text-align: center;
}

#contact, #fin
{
    /*on place cette partie au centre peut importe la taille de la page*/
    text-align: center;
    flex : 10;
}

.retour
{
    text-align: right;
    font-size: 0.8em;
    font-family: "BallparkWeiner",sans-serif;
}

.imageflottante
{
    /*on habille l'image pour la mettre à gauche du text*/
    float: left;
    width: 150px;
    height: 150px;
    margin-right: 20px; 
    box-shadow: 0px 2px 5px maroon;
}

#coordonne, #message
{
    border-radius: 5px;
    box-shadow: 5px 3px 6px maroon;
    font-family: "Courier New", sans-serif;
    margin : 15px;
}

#envoie
{
    display: flex ;
    align-content: center;
    box-shadow: 2px 1px 4px maroon;
}