@charset "UTF-8";

/* PALLETTE
#2A2D34
#009DDC
#F26430
#6761A8
#009B72 */


/* GÉNÉRAL */

body {margin:0; padding:0; font-family: Roboto, Verdana, Geneva, Tahoma; color: #2A2D34;}

h1 {display:block; font:bold 2.5em Montserrat Alternates;}
h2 {display:block; text-align:center; font:bold 2em Montserrat Alternates;}
p {font-size: 1.5em;}
blockquote {padding:100px 200px; text-align: center; font:italic bold 2em times; color: #F26430; border-top:3px solid #009ddc; border-bottom:3px solid #98c7d9;}
li {line-height:2em; list-style-position: inside;}

/* HEADER*/

#header-top {width:100%; background-color:#009ddc; background:url("img/banniere.jpg") no-repeat center center;}
header {display: flex; box-sizing:border-box; width:1140px; height:300px; margin:0 auto;}
header h1 {margin:auto 0;}

/* NAV */

nav {box-sizing:border-box; width:100%; margin:0 auto; padding:25px 0; background-color:#0f63a9; text-align: center;}
nav a {display:inline-block; margin:0 35px; text-transform:uppercase; color:#fff; font:bold 1.5em Montserrat Alternates; text-decoration: none;}
nav a:link {color:#fff}
nav a:visited {color:#fff}
nav a:hover {color:#009ddc}
nav a:active {color:#fff}

/* CONTAINER */

#container {width:100%;}

/* SECTION */

section {box-sizing:border-box; width:1140px; margin:100px auto; padding:25px;  border-top:3px solid #009ddc; border-bottom:3px solid #98c7d9;}
aside {margin:25px 25px;}

/* LIENS */

a {text-decoration:none; font:bold 1.5em Roboto; color:#009ddc;}
a:link{color:#009ddc;}
a:visited{color:#009ddc;}
a:hover{color:#98c7d9;}
a:active{color:#009ddc;}

/* FOOTER */

#footer-bottom {width:100%; margin:0; padding:0; background-color:#0f63a9;}
footer {display: flex; width:1140px; margin:0 auto; padding:25px;}

footer p {color:#fff;}

footer a {color:#98c7d9; font:bold 1em Roboto; text-decoration:none;}
footer a:link{color:#98c7d9;}
footer a:visited{color:#98c7d9;}
footer a:hover{color:#ffffff;}
footer a:active{color:#98c7d9;}
footer aside {width:380px; margin:0; padding:0;}

/* FORM */

form {padding:25px 50px;}
fieldset {margin:50px 0; padding:25px 50px; border-top:3px solid #009ddc; border-left: none; border-bottom:3px solid #98c7d9; border-right: none;}
fieldset img {float:right; width: 250px;}
legend {font-size: 1.5em;}

/* INPUTS ET LABELS */

label, input, select {display:block; font-size: 1.5em;}
label {margin:10px 0;}
input, select, textarea {margin:10px 0 20px 0; border:2px solid #aaa; border-radius: 10px;}
input:hover, select:hover, textarea:hover {border-color: #0f63a9;}
input:focus, select:focus, textarea:focus {background-color: #eee;}
input[type="button"], input[type="submit"], input[type="reset"], input[type="checkbox"]
{display:inline-block; margin:20px 10px;}
input[type="number"] {width: 50px;}
input[type="radio"], .lblRad {display:inline; margin:20px 10px;}
textarea {font:1em Roboto;}

/* STYLES PERSONALISÉS */

.facultatif {font-size:0.75em; color: #aaa;}
.coinsRond {border-radius:25px;}
.icone {display:inline-block; margin:40px 10px 0 10px;}
.activite, .forfait, .prixForfait, .produit {display:block; width: 300px; margin:5px auto; padding:25px;}
.forfait, .prixForfait {border-radius:25px;}
.forfait {width: 380x; margin:50px 25px 0 25px; border-top:3px solid #009ddc;}
.prixForfait {margin:50px 25px 0 25px; border-bottom:3px solid #98c7d9;}
.forfait h1 {text-align: center;}
.forfaitListe {width:190px; margin: 0; padding: 0; text-align:center;border-left:1px solid #aaa; border-right:1px solid #aaa;}

#asideDroite {text-align: right;}
#asideActivite, #asideProduit {margin: 0;}
#activites, #produits, #bienvenue, #forfaits {display:flex;}
#aPropos figure {float: right; margin-right:0;}
#copy {text-align: center; font-size:1em;}
#retour {font-size: 1.5em;}
#txtVille, #txtCodePostal {width: 150px;}
#txtCodePostal {text-transform: uppercase;}
#choixAbonnement {visibility:hidden;}