/*******************************************************************************************************/
/* COULEURS */
/*******************************************************************************************************/
:root {
	--bleu:#28afe4;  
	--vert:#98bf32;
	--orange:#ff8702;
	--rouge:#f00;
	--blanc:#fff;
	--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;}

/*******************************************************************************************************/
/* MAIN */
/*******************************************************************************************************/
#main {
	
	/*
	display:grid;
	grid-template-columns: 1fr;
	width:100%;
	grid-auto-rows:auto;
	grid-template-areas:
	'panel_01'
	'panel_02';	
	grid-gap:1vw;
	*/
	display:block;
	width:100%;
	height:auto;
	padding:20px;
	font-size:1.2rem;
	
	
	/*background-color:#f0f;
	border:2px solid green;*/
}

#main span {
	color:var(--orange);
	font-weight:bold;
}

.question_container {
	margin:0; 
	border:1px solid var(--bleu);
	border-top:1px solid var(--blanc);
}

.question_top {
	display:grid;
	grid-template-columns:4fr 1fr;
	width:100%;
	height:60px;
	background-color:var(--bleu);
	
	color:#fff;
	font-weight:bold;
}

.question_top > p {
	display:block;
	grid-column:1;
	text-align:left;
	margin:auto 0 auto 20px;
}

.bts {
	grid-column:2;
	display: block;
	width:40px;
	height:40px;
	margin:auto 20px auto auto;
	transition-duration: 0.3s;
	cursor:pointer;
}

.reponse {
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	align-items: center;
	text-align:center;
	
	height: 0;
	padding:0;
    overflow: hidden;
	transition: height 0.3s, padding 0.3s;	
}

.reponse_open {
	padding:20px 10px 10px 10px;
	height:auto;
	
}


#lien_reponse {
	display:flex;
	padding:20px 10px;
	justify-content:center;
	align-items: center;
	
	text-align:center;
}

.bt_lien {
	display:flex;
	width:auto;
	margin:20px;
	padding:20px;
	background-color:var(--bleu);
	text-decoration:none;
	color:#fff;
	font-weight:bold;
	border-radius:10px;
	cursor:pointer;
}

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

@media all and (max-width: 1023px)
{
	h1{font-size:1rem;}
	h2{font-size:0.8rem;}
}