@charset "utf-8";

/*GÉNÉRAL*/
body {
    background-color: #7d4e57;
    margin: 0px;
    padding: 0px;
}

.centrerElement {
    text-align: center;
}

/*Header*/
div#header-top {
    background-size: cover;
    background: url('img/banniere-retro+.jpg') center;
    height: 300px;
}

header {
    margin: 0 auto;
    width: 1140px;

}

header img {
    float: left;
    margin: 81px 0 30px 25px;
}

header nav {
    padding: 140px 0 0 0;
}

header nav ul {
    list-style-type: none;
    margin: 12px 0 0 0;
}

header nav ul li {
    display: inline-block;
    margin: 2px;
    padding: 0;
    text-align: center;
    width: 94px;
}

header nav ul li:first-child {
    margin-left: 10px;
}

header nav a,
header div#nav2 a {
    text-decoration: none;
}

header nav ul li:last-child {
    margin-right: 50px;
}

header nav a:link,
header div#nav2 a:link,
header nav a:visited,
header div#nav2 a:visited {
    color: #7d4e57;
}

header nav a:hover,
header div#nav2 a:hover {
    color: yellow;
}

header div#nav2 ul {
    list-style-type: none;
}

header div#nav2 ul li {
    display: inline-block;
    padding-top: 60px;
}

header div#nav2 ul li:first-child {
    padding: 0 12px 0 570px;
}

/*Div*/
div#articleIndex {
    display: flex;
    margin: 0 auto;
    width: 1140px;
}

/*Sections*/
section#sectionBienvenue {
    margin: 0 auto;
    padding-bottom: 40px;
    width: 1140px;
}

section#sectionBienvenue h1 {
    font-size: 2em;
    text-align: center;
}

section#sectionBienvenue article {
    border: 3px dotted black;
    box-sizing: border-box;
    display: inline-block;
    margin: 0 15px 15px 15px;
    text-align: center;
    width: 350px;
}

section#sectionBienvenue article h1 {
    font-size: 1em;
}

section#sectionBienvenue article p {
    margin: 0 10px 5px 10px;
}

section#sectionBienvenue article img {
    margin-top: 15px;
}

section#sectionBienvenue blockquote {
    font-style: italic;
}

section#sectionContenu {
    background-color: #212d40;
    color: white;
    padding: 40px 0 40px 0;
    text-align: center;
}

section#sectionContenu h1 {
    font-size: 2em;
}

section#sectionContenu article {
    border: 1px solid white;
    box-sizing: border-box;
    display: inline-block;
    height: 200px;
    margin: 0 15px 15px 15px;
    text-align: center;
    width: 255px;
}

section#sectionContenu article h1 {
    margin: 50px auto 0 auto;
}

section#sectionContenu article a {
    font-size: 2.5em;
    text-decoration: none;
}

section#sectionContenu a {
    color: white;
}

section#sectionContenu a:hover {
    color: #FFFF00;
    font-size: 2.6em;
}

section#sectionAchat {
    background-color: #7d4e57;
    margin: 0 auto;
    padding-top: 40px;
    text-align: center;
    width: 1140px;
}

section#sectionAchat button#achat {
    background-color: #364156;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 3em;
    margin: 0 15px 20px 15px;
}

section#sectionAchat button#achat:hover {
    color: #FFFF00;
}

section#sectionAchat button#contact {
    background-color: #364156;
    color: white;
    cursor: pointer;
    font-size: 2em;
    margin: 40px 0 50px 0;
}

section#sectionAchat button#contact:hover {
    color: #FFFF00;
}

section#sectionAchat p {
    display: inline-block;
    font-size: 5em;
    margin: 0;
}

/*Footer*/
div#containerFooter {
    background: url('img/footer-banniere.jpg') center;
    ;
}

footer {
    color: white;
    margin: 0 auto;
    padding: 10px 0 10px 15px;
    width: 1140px;
}

footer nav {
    width: fit-content;
}

footer ul {
    margin: 0;
}

footer a {
    text-decoration: none;
}

footer a:link,
footer a:visited {
    color: #5D3FD3;
}

footer a:hover {
    color: yellow;
}

footer p {
    font: 0.70em Verdana;
    text-align: center;
}

footer img {
    float: right;
    margin-top: -150px;
}

.logo {
    margin: 0 36px 0 0;
    padding: 0;
}

/*Section a propos*/

section#aPropos {
    margin: 0 auto;
    width: 1140px;
}

section#aPropos figure {
    float: right;
    width: 250px;
}

section#aPropos figcaption {
    background-color: #212d40;
    color: grey;
    font-size: 0.65em;
    padding: 5px;
    text-align: right;
}

section#aPropos figcaption a {
    color: #5D3FD3
}

section#aPropos p {
    padding: 15px;
}

section#aPropos a {
    color: black;
}

section#aPropos form {
    display: flex;
}

section#aPropos fieldset {
    border: 5px dotted black;
    box-sizing: border-box;
    margin: 0 5px 10px 5px;
    width: 550px;
}

section#aPropos legend {
    display: block;
    font-size: 1.5em;
    margin: 0 auto;
}

section#aPropos select {
    background-color: #7d4e57;
    border: 2px solid black;
    display: block;
    font-size: 1em;
    margin: 10px auto;
}

section#aPropos div#boutonSexe {
    display: flex;
    margin: 0 auto;
    width: 37%;
}

section#aPropos div#boutonSexe label,
section#aPropos div#boutonSexe input {
    margin: 0;
    padding: 0 10px;
}

section#aPropos label {
    display: block;
    margin: 5px auto;
    text-align: center;
}

section#aPropos input {
    background-color: #7d4e57;
    display: block;
    margin: 5px auto;
}

section#aPropos input::placeholder {
    color: gray;
    font-size: 1em;
}

section#aPropos div#votreAvis input {
    cursor: pointer;
    font-size: 1.75em;
    margin: 20px auto 10px auto;
    width: 540px;
}

section#aPropos div#votreAvis input:hover,
section#choisirConsole div#listeConsole input#btnCalcul:hover,
section#choisirConsole div#listeConsole button:hover,
section#choisirConsole div#montantTotalAffiché button:hover {
    background-color: #FFFF00;
}

section#aPropos textarea {
    background-color: #7d4e57;
    border: 2px solid black;
    display: block;
    margin: 5px auto;
}

section#aPropos div#carte {
    border: 5px dotted black;
    height: 451px;
    margin: 10px auto;
    width: 601px;
}

/*Page achats*/
/*Section choisirConsole*/

section#choisirConsole {
    display: flex;
    margin: 0 auto;
    padding: 10px 0 15px 0;
    width: 1140px;
}

section#choisirConsole label {
    font-size: 0.9em;
}

section#choisirConsole select {
    background-color: #364156;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 1.2em;
    margin-bottom: 10px;
    width: 100px;
}

section#choisirConsole input {
    cursor: pointer;
    display: inline-block;
}

section#choisirConsole div#listeConsole {
    display: flex;
    width: 855px;
}

section#choisirConsole div#listeConsole input#btnCalcul,
section#choisirConsole div#listeConsole button {
    background-color: #7d4e57;
    cursor: pointer;
    display: inline-block;
    margin: 30px 5px 0 5px;
    width: 200px;
}

section#choisirConsole div#montantTotalAffiché {
    background-color: #364156;
    border: 5px dotted black;
    box-sizing: border-box;
    color: white;
    height: 500px;
    margin-top: 362px;
    padding: 10px;
    text-align: center;
    width: 285px;
}

section#choisirConsole div#montantTotalAffiché button {
    background-color: #7d4e57;
    cursor: pointer;
    margin-top: 48px;
    width: 200px;
}

section#recapitulatifCommande {
    margin: 10px auto;
    width: 1140px;
}

/*Pages de contenu*/

section#sectionContenuConsoles {
    margin: 0 auto;
    width: 1140px;
}

section#sectionContenuConsoles a {
    font-size: 0.70em;
    text-decoration: none;
}

section#sectionContenuConsoles div#imageADroite {
    border-bottom: 5px dotted black;
    border-top: 5px dotted black;
    display: flex;
    margin: 15px 0;
}

section#sectionContenuConsoles div#imageAGauche {
    border-bottom: 5px dotted black;
    border-top: 5px dotted black;
    display: flex;
    margin: 10px 0;
    padding-left: 10px;
}

section#sectionContenuConsoles div#imageAGauche figcaption {
    text-align: right;
}