/**************************/
/*** Buttons de contact ***/
/**************************/
#contact{
	margin : 0;
	padding : 0;
	display : flex;
	justify-content : center;
	align-items : center;
	flex-direction : column;
}

.contact-text{
	width : 100%;
	margin : 0;
	padding : 0;
	display : flex;
	align-items : center;
	justify-content : center;
	flex-direction : column;
}

.contact-text h1{
	margin : 0;
	padding : 0;
	font-size : 3rem;
	font-weight : bold;
}

@media screen and (max-width : 768px){
	.contact-text h1{
		font-size : 1.5rem;
	}	
}

.buttons{
	display : flex;
	justify-content : center;
	align-items : center;
	flex-direction : row;
}


.button {
	position : relative;
    display: inline-block;
    background-color: #F37221;
    color: white;
    padding: 1rem 2rem;
    text-align: center;
   	text-decoration: none;
    font-size: 1rem;
    margin: 2rem 1rem;
    border : 3px solid #F37221;
    cursor : pointer;
    border-radius : 5px;
    height : auto;
}

.button:hover {
    border : 3px solid #000000;
}


/*********************/
/*** Flyers Cartel ***/
/*********************/

#flyers{
	width : 100%;
	margin : 0;
	padding : 0;
	display : flex;
	align-items : center;
	justify-content : center;
	flex-direction : column;
}

.flyers-text{
	width : 100%;
	margin : 0;
	padding : 0;
	display : flex;
	align-items : center;
	justify-content : center;
}

.flyers-text h1{
	font-size : 3rem;
	font-weight : bold;
}

.flyers-display{
	width : 90%;
	margin : 0;
	padding : 0;
	display : flex;
	align-items : center;
	justify-content : space-between;
}

.flyers-display img{
	width : 45%;
	height : auto;
	border: 2px solid black;
  	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  	border-radius : 5px;
}

@media screen and (max-width : 1140px){
	.flyers-display img{
		width : 100%;
		height : auto;
		margin : 1rem;
	}

	.flyers-display{
		flex-direction : column;
		width : 100%;
	}
}

@media screen and (max-width : 768px){
	.flyers-text h1{
		font-size : 1.5rem;
	}

}




/***************************/
/*** Foire aux questions ***/
/***************************/
#faq{
	display : flex;
	align-items : center;
	justify-content : center;
	flex-direction : column;
	margin : 0;
	padding : 0;
	width : 100%;
}

.faq-text{
	width : 100%;
	margin : 0;
	padding : 0;
	display : flex;
	justify-content : center;
	align-items : center;
}

.faq-text h1{
	font-size : 3rem;
	font-weight : bold;
}

@media screen and (max-width : 768px){
	.faq-text h1{
		font-size : 1.5rem;
	}
}

#faq .question details{
	border: 2px solid #F37221;
	border-radius : 0.5rem;
	padding : 0.5rem 1rem;
	margin-bottom : 0.5rem;
}

#faq .question details > div{
	border-top : 1px solid #888888;
	padding-top : 0.5rem;
	margin : 0.5rem 0 0 0;
}

#faq .question details p:last-child{
	margin-bottom: 1rem;
}

#faq .question details:hover:not([open]){
	background-color : rgba(128,128,128,0.125);
}

#faq .question details summary{
	cursor : pointer;
	font-weight : bold;
	user-select : none;
	-webkit-user-select : none;
}


.faq-questions{
	width : 100%;
	display : flex;
	align-items : center;
	justify-content : center;
	flex-direction : column;
}


.question{
	width : 50%;
	height : auto;
}

@media screen and (max-width : 768px){
	.question{
		width : 100%;
	}
}