.tabs {
  display: flex;
  flex-wrap: wrap;
  /*max-width: 700px;*/
  background: #efefef;
  box-shadow: 0 48px 80px -32px rgba(0,0,0,0.3);
}

 .tabs .input {
	position: absolute;
	opacity: 0;
  }

 .tabs .label {
	width: 100%;
	padding: 20px 30px;
	background: #e5e5e5;
	cursor: pointer;
	font-weight: bold;
	font-size: 18px;
	color: #7f7f7f;
	transition: background 0.1s, color 0.1s;
  }
  
  .tabs .label:hover {
	background: #d8d8d8;
  }
  
  .tabs .label:active {
	background: #ccc;
  }
  
  .tabs .input:focus + .label {
	box-shadow: inset 0px 0px 0px 3px #2aa1c0;
	z-index: 1;
  }
  
  .tabs .input:checked + .label {
	background: #fff;
	color: #000;
  }
  
 
	.tabs .label {
	  width: auto;
	}
  

  .tabs .panel {
	display: none;
	padding: 1%;
	background: #fff;
	order: 99;
	width: 100%;
	}
  
  
  .tabs .input:checked + .label + .panel {
	display: block;
  }


  .message--loi {
	color: #008194;
	margin-left: 10px;
 }