@charset "utf-8";
/* CSS Document */

html { height: 100%; }
body {
  width:100%;
  height:100%;
  display: flex;
  margin: 0;
  font: 14px 'Helvetica';
  letter-spacing:2px;
  background: linear-gradient(130deg, #543958 0%,#a06060 25%,#7ba1be 50%,#8c8ca4 75%,#2b2b9a 100%) no-repeat center center fixed; 
}

section {
	background-color: black;
	color: white;
	position: absolute;
	margin: 0;
	height: 40px;
	width: 100%;
	text-align: center;
		
	}
	
.image{
	margin:120px 90px;
}
.portrait{	
	margin-top:-15px; 
	margin-left:0px
	}


iframe {
	overflow: hidden;
	border: none;
	pointer-events:none;
	overflow-x:hidden;
	overflow-y:hidden; 
	
}

h1 {
  font-size:40px;
  font-weight:bold;
  color:#191919;
  -webkit-font-smoothing: antialiased;
}

h2 {
  font-weight:normal;
  font-size:20px;
  color:#fff;
  padding:5px 0;
}
#next{
	background-color:#999
	}

/*ci-dessous c'est pour les message cachés
*/

.message {
background:#181818;
color:#FFF;
position: fixed;
top: -320px;
left: 10%;
width: 80%;
height: 310px;
padding: 20px;
transition: top 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
overflow: hidden;
box-sizing: border-box;
  
}

.message h1 {
  color:#FFF;
}

#toggle {
  position:absolute;
  appearance:none;
  cursor:pointer;
  left:-100%;
  top:-100%;

}

#toggle + label {
	position: absolute;
	cursor: pointer;
	padding: 10px;
	background: #26ae90;
	width: 100px;
	border-radius: 3px;
	padding: 8px 10px;
	color: #FFF;
	line-height: 20px;
	font-size: 12px;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	cursor: pointer;
	margin: 20px 50px;
	transition: all 500ms ease;
	left: -5px;
	top: 37px;
}
#toggle + label:after {
  content:"Reponse" 
}

.container {
transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  padding:5em 3em;
   margin-left:10%
}

#toggle:checked ~ .message {
  top: 0;
}

#toggle:checked ~ .container {
  margin-top: 250px;
}

#toggle:checked + label {
  background:#dd6149;
}

#toggle:checked + label:after {
  content:"Close"
}