@charset "utf-8";

/*
couleur: 
    fond : #F8F3ED
    texte : #4A3B33
    liens header et article: 
        - link, visited : #4A3B33
        - hover, active : #d4b48c
    titre : #d4b48c
    liens footer : 
        - link, visited : #4A3B33
        - hover, active : #fff
*/

/* BODY */
body {margin: 0 auto; background-color: #F8F3ED; font: 1em 'Poppins',Arial,sans-serif; color:#4A3B33;}

/*HEADER-TOP*/
div#header-top {width: 100%; height: 300px; margin: 0 auto; background-image: url(img/banniere_header.jpg); background-position: center; background-repeat: no-repeat; background-color: #d5b890;}

/*HEADER*/
header {width: 1140px; height: 300px; margin: 0 auto;}
header img {width: 200px; height: 200px; padding: 10px;}

/*NAV-TOP*/
div#nav-top {width: 100%; height: 100px; background-color: #d4b48c;}

/*NAV*/
nav {margin: 0 auto; width: 1140px; height: 100px; padding: 5px; font-size: 1.5em; text-align: center;}
nav a {padding: 10px; margin: 10px; border-radius: 20px; background-color: #F8F3ED; font-size: 0.8em; text-decoration: none; color: #4A3B33;}
nav a:link {color: #4A3B33;}
nav a:visited {color: #4A3B33;}
nav a:hover {color: #d4b48c;}
nav a:active {color: #d4b48c;}

/* SECTION */
section {box-sizing: border-box; width: 1140px; margin: 0 auto; padding :15px;}
h1 {margin: 10px; text-align: center; font-size: 2em; color: #d4b48c;}
h2 {margin:10px; text-align: center; font-size: 1.5em; color: #d4b48c;}
h3 {margin: 10px; text-align: center; font-size: 1.2em; color: #d4b48c;}
section img {float: left; margin-right: 15px; border-radius: 20px;}
figure {float: left; text-align: center; margin: 20px;}
figure figcaption {font-style: italic; color: #4A3B33; margin-top: 10px;}

/*ASIDE*/
aside {float: right; width: 400px; height: 930px; padding: 15px; border-radius: 15px; background-color: #d4b48c; text-align: center; font-size: 1.3em; font-style: talic; text-transform: uppercase;}
aside img {height:500px;}

/*ARTICLE*/
#event-article {display: flex; width: 1140px; margin: 0 auto; margin-bottom: 20px; margin-top: 20px;}
#event-article img {width: 350px; height: 350px;}
article {display: inline-block; box-sizing: border-box; width: 350px; margin: 0 15px; border-radius: 20px; border: 0.2em solid #d4b48c; background-image: url(img/texture.jpg); text-align: center;}
article p {margin: 0 15px 30px 15px;}
article a {text-decoration: none; color: #4A3B33;}
article a:link {color: #4A3B33;}
article a:visited {color: #4A3B33;}
article a:hover {color: #d4b48c;}
article a:active {color: #d4b48c;}

/* ---------- FORMULAIRE ---------- */

/* Formulaire général */
form {width: 1000px; margin: 2em auto; padding: 2em; border: 3px solid #d4b48c; border-radius: 12px; color: #4A3B33; background-color: #F8F3ED;}

/* Champs texte, nombre, select, textarea */
form input[type="text"], form input[type="number"], form select, form textarea {width: 100%; box-sizing: border-box; margin-top: 0.3em; padding: 0.6em; border: 1px solid #d4b48c; border-radius: 6px; font-size: 1em;}

/* Labels */
label {display: block; margin-top: 0.8em; font-size: 0.95em; color: #4A3B33;}

/* Radios et checkboxes */
input[type="radio"], input[type="checkbox"] {display: inline-block; margin: 0.4em 0; margin-right: 10px; transform: scale(1.2);}

/* Boutons */
input[type="submit"], input[type="reset"], input[type="button"] {width: 300px; height: 40px; margin: 10px auto; display: block; background-color: #d4b48c; border: 2px solid #4A3B33; border-radius: 12px; text-transform: uppercase; font-weight: bold; color: #4A3B33; cursor: pointer;}
input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {background-color: #fff;}

/* Zone VIP */
#infoVIP {display: none; margin-left: 20px; padding: 10px; border-left: 3px solid #d4b48c; border-radius: 6px; background-color: #F8F3ED;}

/* Question avec image */
.question-avec-image {display: flex; align-items: center; justify-content: space-between; width: 100%;}
.texte-question {width: 70%;}
.question-avec-image img {width: 140px; height: auto; border-radius: 8px; border: 1px solid #d4b48c; background-color: #fff; padding: 5px; margin-left: 20px;}

/* Résultats */
#zoneResultats {width: 1000px; margin: 2em auto; padding: 1em; border: 2px solid #d4b48c; border-radius: 8px; color:#4A3B33; background-color: #F8F3ED;}
#zoneResultats p {margin: 0.5em 0; font-size: 1em;}


/*FOOTER-BOTTOM*/
div#footer-bottom {width: 100%; height: 300px; background-image: url(img/banniere_footer.jpg);}

/*FOOTER*/
footer {width: 1140px; margin: 0 auto; padding:15px;}
footer p {color: #4A3B33;}
footer a {text-decoration: none; color: #4A3B33;}
footer a:link {color: #4A3B33;}
footer a:visited {color: #4A3B33;}
footer a:hover {color: #fff;}
footer a:active {color: #fff;}
footer img {float: right; width: 150px; height: 150px;}
.copyright {text-align: center; color: #4A3B33;}