
body {
	background-color:#FAFAFA;
	border:2px solid darkblue;
	border-radius:10px;
	margin-left:2%;
	margin-right:2%;
	margin-top:1%;
	padding-left: 1%;
	padding-right: 1%;
	font-size: 14pt;
	font-family: Calibri, sans-serif;
 }

footer{
	text-align: right;
}

img{
	width:20%;
	min-width:150px;
	padding:0.5%
}

h1{
	color:darkblue;
	font-size:200%;
}
h2{
	text-align:center;
	color: darkblue;
	font-weight:normal;
	background-color:white;
	border:1px solid darkblue;
	padding: 1%;
}
legend{
	font-weight:bold;
}
label{
	cursor:pointer;
}
span{
	text-decoration:underline;
}
input, li{
	cursor:pointer;
}
input[type=radio], input[type=checkbox] {
	opacity:0;
}
input[type=number] {
	width:4%;
	min-width:30px;
}
input[type=text], input[type="mail"] {
	width:30%;
	min-width:100px;
}
input:checked + label, input:not([value='0'])+ li{
	font-weight:bold;
	font-size:110%;
}
input[type=radio] + label {
	padding-right:4%;
}
input[type=submit]{
	font-size:100%;
	border-radius:12px 0 12px 0;
	background: darkblue;
	border:none;
	color:white;
	padding:6px 16px 6px 16px;
}
button{
	width:100%;
	border:0px;
	background-color:white;	
	padding:1%;
	font-size:90%;
}
.note{
	font-size:80%;
	font-style:italic;
}
.zoneGlisser li{
	background-color:Gainsboro;
	margin:2%;
	padding:0.5%;
	text-align:center;
}

#avancement{
	width:%;
	height:10px;
	background-color:darkblue;
}
#zone1{
	display:block;
}
.results > div {
	border:solid 1px grey;
	text-align:right;
	font-size:90%;
	margin-left:40%;
	margin-right:20%;
}

label[for=age], select{
	display:none;
}

#block_charge_achats{
	display:none;
}

label[for=nc]{
	font-size:110%;
}

.accueil{
	text-align:center;
	font-weight:bold;
	font-size:130%;
}

.zoneIB {
	vertical-align:top;
}
.zoneIB > div{
	border:dashed 3px grey;
	padding:1%;
	background-color:white;
}

.zoneGlisser{
	display:inline-block;
	vertical-align:top;
	min-width:40%;
	max-width:40%;
}

.zoneGlisser > p{
	border:solid 1px darkblue;
	margin:3%;
	padding:0%;
	background-color:white;
}
.transparent{
	display:none;
}
.consigne{
	color : grey;
	text-align:center;
}

.sous-circuit{
	margin-left:10%;
	font-size:80%;
	display:none;
}
.exemple{
	display:inline;
}
.result_focus, .results > div:hover{
	color:white;
	background-color:CornflowerBlue;
	cursor:pointer;
}

.q3{
	display: none;
}

.q3 button{
	display:none;
}

.erreur{
	color:red;
	font-style:italic;
}

.inline{
	display:inline;
}
.responsive_ib{
	display:inline;
}

@media all 
/*and (max-width: 850px)*/
{
    .zoneIB > div{
        display: none; 
    }
	.zoneGlisser{
		max-width:100%;
	}
	.responsive_ib{
		display:block;
	}
	input[type=radio] + label {
		padding-right:0;
	}
	
	input[type=checkbox] {
		width: 0;
		margin: 2px;
	}
	
	input[type=radio] {
		width: 0;
		margin: 2px;
	}
	
}


/* Affichage par défaut du bouton radio personnalisé */
input[type=radio] + label:before {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    margin-top: -3px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    content: '';
    width: 17px;
    height: 17px;
}
/* Affichage par défaut de la case personnalisée */
input[type=checkbox] + label:before {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0%;
    margin-top: -3px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
    content: '';
    width: 17px;
    height: 17px;
}
/* Affichage par défaut de la sous-case personnalisée */
.sous-circuit input[type=checkbox] + label:before {
    width: 15px;
    height: 10px;
}

/* Affichage quand il/elle est sélectionné(e) */
input[type=radio]:checked + label:before, input[type=checkbox]:checked + label:before {
    background: CornflowerBlue;
    box-shadow: inset 0px 0px 0px 4px #fff;
}
input[type=radio]+ label:hover:before, input[type=checkbox]+ label:hover:before {
    background: darkblue;
    box-shadow: inset 0px 0px 0px 4px #fff;
}



.li_radio{
	list-style-type:none;
	text-align:left;
	background-color:none;
	padding:0px;

}
.li_radio li{
	list-style-type:none;
	list-style-position: inside;
	text-indent: -1em;
}
