/* le corp de la page */

body {
    background-color: rgb(192, 189, 189);
}


/* permet d'avoir toute la page dans une classe ici pour limiter la taille max */

.conteneur {
    margin: 0 auto;
    max-width: 1150px;
    background-color: white;
}

header {
    display: flex;
    height: 60px;
}


/* permet d'afficher correctement le titre (celui en haut à gauche) */

.titre {
    color: rgb(255, 255, 255);
    background-color: #444444;
    font-size: 25px;
    text-align: center;
    width: 300px;
    font: Arial;
}

nav {
    width: 100%;
    height: 60px;
    margin: 0;
    z-index: 99;
    position: relative;
    background-color: #444444;
}


/* toutes les propriétés .menu servent à afficher le menu */

.menu {
    height: 60px;
    padding: 0;
    margin: 0;
    position: absolute;
}

.menu li {
    height: 60px;
    width: 135.8px;
    float: left;
    text-align: center;
    list-style: none;
    font: normal bold 13px/1em Arial;
    padding: 0;
    margin: 0;
    background-color: #444444;
    border-left: 1px solid #ccc9c9;
}

.menu a {
    padding: 18px 0;
    text-decoration: none;
    color: white;
    display: block;
}

.menu a:visited {
    color: white;
}


/* Permet de souligner dans le menu la page dans laquelle nous sommes. Ex : si nous sommes dans la page accueil, accueil sera souligné. */

.menu a.selection {
    text-decoration: underline;
}


/* Change la couleur du texte quand la souris survol un élément dans le menu */

.menu li:hover a:hover {
    color: rgb(137, 138, 138);
    background-color: #444444;
}

.menu li ul {
    display: none;
    height: auto;
    margin: 0;
    padding: 0;
}


/* Rend visible le menu quand la souris passe sur l'option  qui est masquée normalement */

.menu li:hover ul {
    display: block;
}


/* fond du menu qui apparaît  */

.menu li ul li {
    background-color: #444444;
}

.menu li ul li {
    border-left: 1px solid #444444;
    border-right: 1px solid #444444;
    border-top: 1px solid #c9d4d8;
    border-bottom: 1px solid #444444;
}

section {
    margin-left: 5px;
}


/* ajouter flexblox au menu du bas (En savoir plus, logo et copyright) (tout s'affiche au centre quelque soit la taille de la page)*/

.pagebas {
    display: flex;
}

footer {
    display: flex;
    align-self: flex-end;
    justify-content: space-between;
    background-color: #444444;
    color: white;
}


/* ajouter flexblox pour les image (notamment dans la page : les différents aéronefs) */

.image {
    display: flex;
    flex-wrap: wrap;
    margin: 5px;
}


/* affiche le nom des avions au centre par rapport à l'image (notamment dans la page : les différents aéronefs) */

.nomAvion {
    text-align: center;
}


/* Définit la taille et l'espacement entre les différente images présentes en pied de page (github, mail et instagram) */

.socialmedia {
    margin-right: 5px;
    margin-left: 5px;
    height: 64px;
}

h1 {
    font-size: large;
    text-align: center;
}

h2 {
    font-size: medium;
}

article {
    margin-left: 5px;
}

table {
    border-collapse: collapse;
    margin: 5px;
}


/* Propriété utilisée pour le tableau. Bordure de 1px et ainsi qu'une marge sur la gauche de 5px */

td,
th {
    border: 1px solid black;
    margin-left: 5px;
}


/* affiche les lien avec un bleu plus clair lorsque la souris survole un lien */

a:hover {
    color: rgb(19, 19, 19);
}

a:visited {
    color: rgb(19, 19, 19);
}


/* eplus = en savoir plus. Propriété uniquement dédié lien qui mène vers la page en savoir plus. Permet d'afficher le href en blanc */

a.eplus {
    color: rgb(255, 255, 255);
    font-style: normal;
}

a:visited.eplus {
    color: rgb(255, 255, 255);
}

a:hover.eplus {
    color: rgba(255, 255, 255, 0.541);
}