/*******************************************************************************************************/
/* COULEURS */
/*******************************************************************************************************/
:root {
	--bleu:#28afe4;  
	--vert:#98bf32;
	--orange:#ff8702;
	--rouge:#f00;
	--txt_color:#333;
	--gris_clair:#f7f7f7;
	--gris_moyen:#a7a7a7;
	--gris_fonce:#454e5c;
}

/*******************************************************************************************************/
/* FONT */
/*******************************************************************************************************/
@font-face {
  font-family: 'titilliumweb';
  src: url('../fonts/titilliumweb/titilliumweb-regular-webfont.eot'); /* IE9 Compat Modes */
  src: url('../fonts/titilliumweb/titilliumweb-regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/titilliumweb/titilliumweb-regular-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/titilliumweb/titilliumweb-regular-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/titilliumweb/titilliumweb-regular-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../fonts/titilliumweb/titilliumweb-regular-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */

	font-weight: normal;
    font-style: normal;
}

/*******************************************************************************************************/
/* STYLES GENERAUX */
/*******************************************************************************************************/
*{
	margin:0px;
	padding:0px;
	box-sizing:border-box;/*content-box;*/
}

*:focus {
	outline:none;
}

*::-moz-focus-inner {
	border:none;
}

html {
	scroll-behavior:auto;
}
/*
body {
	width:100%;
	font-family: titilliumweb, verdana, tahoma, arial, sans-serif;
	background-color:var(--gris_clair);
    font-size:120%;
	
	
	visibility:hidden;
	opacity:0;
	transition:visibility 0s, opacity 0.5s linear;
	
	overflow-X:hidden;
	overflow-Y:auto;
	

  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

}
*/

h1{font-size:1.3rem;}
h2{font-size:2rem;}
h3{font-size:2.5rem;}

a.retour{
	display:block;
	margin:20px 10px 20px auto;
	text-decoration:underline;
}

/*******************************************************************************************************/
/* MAIN */
/*******************************************************************************************************/

#main {
	position:relative;
	display:flex;
	flex-direction:column;
	align-items: center;
	justify-content: flex-start;
	top:-60px;
	width:100%;
	height:auto;
	color:var(--txt_color);
}

#conteneur {
	display:grid;
	grid-template-columns: 1fr;
	width:100%;
	grid-auto-rows:auto;
	grid-template-areas:
	'panel_01'
	'panel_02';	
	grid-gap:1vw;
	padding:1vw 0;
}
	
#panel_01 {
	grid-area:panel_01;
	display:grid;
	margin:2px;	
	grid-template-columns:1fr 2fr;
	grid-auto-rows: minmax(30px, auto);
	grid-gap:1px;
	background-color:#fff;
	color:var(--txt_color);
	
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	border:1px solid var(--orange);
	border-radius:8px;
}

#panel_01 > * {
	margin:10px 0;
	padding:2px;
	font-size: calc(10px + 0.390625vw);
	font-weight:normal;
}

.col_01 {
	grid-column:1;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-end;
	text-align:right;
}

.col_02 {
	grid-column:2;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
}

.col_span {
	grid-column:1 / span 2;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:flex-start;
	padding:0 0 0 20px;
}

#panel_02 {
	grid-area:panel_02;
	display:grid;
	/*display:none;*/
	margin:2px;
	/*grid-template-columns:6fr 2fr 2fr 2fr 2fr 2fr;*/
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: minmax(100px, auto);
	grid-gap:0 5px;
	padding:10px;
	background-color:#fff;
	color:var(--txt_color);
	box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
	border:1px solid var(--orange);
	border-radius:8px;
}

#panel_02 > * {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	text-align:center;
}

#panel_02 p {
	font-size: 1.3rem;
}


/*********************/
/* INPUTS RADIO + CHECKBOXES */
/*********************/

/* ELEMENTS PANEL_01 */
#panel_01 select,
#panel_01 input[type=text] {
	/*width:98%;*/
	margin:0 10px 0 0;
	padding:5px 5px 5px 10px;
	font-size: calc(16px + 0.390625vw);
	background-color:var(--gris_clair);
	border-radius: 6px;
}

#panel_01 select:disabled,
#panel_01 input[type=text]:disabled {
	border:none;
}

#panel_01 select option:nth-child(odd) {
	background-color:var(--gris_clair);
}

#panel_01 select option:nth-child(even){
	background-color:#fff;
}

#panel_01 textarea {
	background-color:var(--gris_clair);
	font-size:1.5em;
}



/* ELEMENTS PANEL_02 */

#panel_02  input[type="radio"] {
	display: none;
}

#panel_02 input[type="radio"] + label {
	display: block;
	width:60px;
	height:40px;
	margin: 0 auto;
	background-color:var(--gris_clair);
	border: 2px solid #ccc;
	border-radius:6px;
	cursor:pointer;
}

#panel_02 input[type="radio"]:checked + label {
	display:block;
	margin:0 auto;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	background-image : url('../graphisme/ok.png');
	border:2px solid var(--vert);
	border-radius: 6px;
}

#bt_valider {
	display:block;
	width:220px;
	height:60px;
	margin:6px;
	padding:0 0 0 80px;
	text-align:left;
	font-size:1.5rem;
	color:#fff;
	
	background-color:var(--vert);
	background-image : url('../graphisme/bt_valider.png');
	background-position: 10px center;
	
	background-size: 50px;
	background-repeat: no-repeat;
	border:none;
	border-radius:6px;
	cursor:pointer;
}

/*******************************************************************************************************/
/* RESPONSIVITE */
/*******************************************************************************************************/

@media all and (max-width: 1023px)
{
	h1{font-size:1rem;}
	h2{font-size:0.8rem;}
	
	#conteneur {
		grid-template-columns:1fr;
		width:98vw !important;
	}
	
	#panel_01 {
		width:90vw;
		margin:0 auto;
		grid-template-columns:2fr 3fr;
		grid-auto-rows: minmax(20px, auto);
	}
	
	#panel_01 input[type="radio"] + label {
		width:80px;
	}
	
	#panel_02 {
		width:90vw;
		margin:0 auto;
		grid-auto-rows: minmax(35px, auto);

		padding:1px;
	}

	#panel_02 p {
		font-size: 1rem;
	}

	input[type="checkbox"] + label,
	input[type="radio"] + label {
		width:30px;
		height:30px;
	}
	
	select,
	input[type=text],
	input[type=number],
	input[type=date] {
		width:98%;
		padding:2px 2px 2px 6px;
		font-size: calc(14px + 0.390625vw);
	}
}