/*
 * SOMMAIRE
 *
 * 1. Reset CSS
 * 2. Styles de bases
*/

/*---------------------------------------------------*/
/*-------------------1. RESET CSS-------------------*/
/*-------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
/*body {
	line-height: 1;
}*/
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
* {
	-webkit-box-sizing: border-box;/*permet de dire au navigateur que le conteneur à une width égale à width+padding+border (très utile quand unités différentes)*/
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
/*---------------------------------------------------*/
/*----------------2. Styles de bases----------------*/
/*-------------------------------------------------*/
body{
	background-color: #fff;
	font: 0.625em/1em; /*taille de référence de font à 10px*/
	font-family: 'Mulilight', arial, sans-serif;
	color: #1a171b;
	}
.clear{
	clear: both;
}
#wrap-form{
	/*width: 1250px;*/
	width: 1000px;
	margin: 85px auto 0 auto;
	padding-bottom: 20px;
}
#head-form{
	line-height: 1.5em;
	margin-bottom: 20px;
}
#head-form a{
	float: left;
	margin-right: 50px;
	display: block;
}
span.txt-30{
	font-size: 30px;
}
span.txt-17-red{
	font-size: 17px;
	color: #b9002c;
}

sub, sup {
  /* Specified in % so that the sup/sup is the right size relative to the surrounding text */
  font-size: 75%;

  /* Zero out the line-height so that it doesn't interfere with the positioning that follows */
  line-height: 0;

  /* Where the magic happens: makes all browsers position the sup/sup properly, relative to the surrounding text */
  position: relative;

  /* Note that if you're using Eric Meyer's reset.css, this is already set and you can remove this rule */
  vertical-align: baseline;
}

sup {
  /* Move the superscripted text up */
  top: -0.5em;
}

sub {
  /* Move the subscripted text down, but only half as far down as the superscript moved up */
  bottom: -0.25em;
}
/*FORMULAIRE TOP*/
#form-top{
	margin-bottom: 60px;
}
#form-top img{
	float: right;
	margin-right: 10px;
}
#form-top .lign-form{
	font-size: 17px;
	width: 600px;
	margin-bottom: 25px;
}
#form-top .lign-form label{
	width: 250px;
	padding-left: 105px;
	display: inline-block;
}
#form-top .lign-form input{
	border: 1px solid #ccc;
	width: 330px;
	padding: 5px;
}
#form-top div:nth-child(2){
	padding-top: 40px;
}
/*FORMULAIRE BOT*/
#form-bot .lign-form{
	margin-bottom: 20px;
	display: table;
	width: 1000px;
}
#form-bot .cartouche-form{
	display: table-cell;
	width: 475px;
	padding: 20px;
	text-align: center;
	color: #fff;
	font-size:19px;
}
#form-bot .select-content{
	display: table-cell;
	vertical-align: top;
}
.cartouche-form h2{
	font-family: 'Mulibold', arial, sans-serif;
	font-size: 27px;
	padding: 0 0 10px 0;
}
.cartouche-form h3{
	font-family: 'Mulibold', arial, sans-serif;
	font-size: 27px;
	padding: 10px 0;
}
.bg-turquoise{
	background-color: #46b1e1;
}
.bg-bleu{
	background-color: #444f62;
}
.bg-orange{
	background-color: #ba5f31;
}
.bg-orange-claire{
	background-color: #fe951f;
}
select.select-form{
	width: 510px;
	padding: 10px;
	-webkit-appearance: none;
	border-radius: 0;
	margin: 0 0 0 5px;
	font-size: 20px;
	background-color: transparent;
}
#prix-total{
	font-size: 25px;
	margin:40px 0 40px 535px;
	font-family: 'Mulibold', arial, sans-serif;
}
#submit-form{
	text-align: center;
	margin: 0 0 15px 0;
}
#submit-form input[type="button"]{
	cursor: pointer;
	font-size: 25px;
	border-radius: 5px;
	border: 0;
	padding: 20px 15px;
	font-family: 'Mulibold', arial, sans-serif;
}
#submit-form input[type="button"]:hover{
	opacity: 0.8;
}
/*FORMULAIRE PAGE 2*/
#form-top .txt-form{
	margin-top: 10px;
	font-size: 20px;
}
#form-top .bt-reglement a{
	display: block;
	width: 875px;
	margin: 0 auto 20px auto;
	text-decoration: none;
	font-size: 20px;
	color: #fff;
	border-radius: 10px;
	text-align: center;
	padding: 15px 10px;
}
#form-bot .txt-form{
	margin-top: 10px;
	font-size: 20px;
	width: 750px;
	float: left;
}
#form-bot img{
	float: right;
	margin-top: 40px;
}

input[type=checkbox] + label {
  display: block;
  margin: 0.2em;
  cursor: pointer;
  padding: 0.2em;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label:before {
  content: "\2714";
  border: 0.1em solid #000;
  border-radius: 0.2em;
  display: inline-block;
  width: 1em;
  height: 1em;
  padding-left: 0.2em;
  padding-bottom: 0.3em;
  margin-right: 0.2em;
  vertical-align: bottom;
  color: transparent;
  transition: .2s;
}

input[type=checkbox] + label:active:before {
  transform: scale(0);
}

input[type=checkbox]:checked + label:before {
  background-color: #46b1e1;
  border-color: #46b1e1;
  color: #fff;
}

input[type=checkbox]:disabled + label:before {
  transform: scale(1);
  border-color: #aaa;
}

input[type=checkbox]:checked:disabled + label:before {
  transform: scale(1);
  background-color: #bfb;
  border-color: #bfb;
}




:root {
  --radio-border-color: #46b1e1;
  --radio-checked-color: #46b1e1;
  --radio-hover-color: #46b1e1;
  --radio-disabled-bg-color: #46b1e1;
}

input[type="radio"] {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin: 0px;
  padding: 0;
  border: 2px solid var(--radio-border-color);
  border-radius: 50%;
  appearance: none;
  background-color: transparent;
  outline: none;
  transition: outline 0.1s;
  cursor:pointer;
}

input[type="radio"]:not(:disabled):checked {
  border-color: var(--radio-checked-color);
  background-color: var(--radio-checked-color);
  background-clip: content-box;
  padding: 2px;
  background-image: radial-gradient(
    circle,
    var(--radio-checked-color) 0%,
    var(--radio-checked-color) 50%,
    transparent 60%,
    transparent 100%
  );
}

input[type="radio"]:disabled {
  background-color: var(--radio-disabled-bg-color);
}

input[type="radio"]:disabled:checked {
  background-image: radial-gradient(
    circle,
    var(--radio-border-color) 0%,
    var(--radio-border-color) 50%,
    transparent 50%,
    transparent 100%
  );
}




/*I-PAD PORTRAIT*/
@media (max-width: 768px) and (orientation: portrait){
	html{
		-webkit-text-size-adjust: 100%;
  		 -ms-text-size-adjust: 100%;
	}
	body{
		width:100%;
	}

}