@charset "utf-8";
/* page FAQ */

#faq-main{
	overflow-y: scroll;
	background-color:#F1F1F1 ;
}
#faq-titre{
	margin:100px auto 0;
	font-size:1.6em;
	text-align: center;
	text-transform:uppercase;
}
#faq-search{
	height: 40px;
	margin: 60px auto;
	display:flex;
	justify-content: center;
	align-items: center;
}
#search-field{
	height:40px;
	width: 256px;
	border:solid 1px #D7D7D7;
	border-radius: 3px 0 0 3px;
	padding-left:8px;
	font-family:Montserrat;
	box-sizing: border-box;
}
#search-field:focus{
	outline:none;
}
.search-btn {
    height: 40px;
    width: 40px;
    border: 1px solid #D7D7D7;
    border-left: none;
    background-color: #244A5A; /* adapte à ton design */
    border-radius: 0 3px 3px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.search-btn img {
    width: 32px;
    height: 32px;
    display: block;
}
.search-btn:hover {
    background-color: red;
}
#faq-layout{
	max-width:1232px;
	margin:80px auto;
	display: grid;
	grid-template-columns: 27% 68%;
	grid-gap: 5%;
}
.faq-item{
	border-bottom: solid 1px #7F7F7F;
	padding: 1rem 0;
}
.faq-item summary{
	position: relative;
	padding-right: 2rem;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}
.faq-item summary::-webkit-details-marker {
  	display: none;
}
.faq-item summary::after {
	content: "+";
	font-size:1.8em;
	font-weight:400;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%) rotate(0deg);
	transition: transform 0.25s ease;
}
.faq-item[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
}
.faq-resp{
	line-height:24px;
}
.faq-empty{
	padding-left:5px;
	font-style: italic;
}
.faq-etiq-title{
	height:60px;
	border-radius:5px 5px 0 0;
	text-transform: uppercase;
	text-align:center;
	line-height: 60px;
	color:white;
	font-size:1.4em;
}
.faq-etiq{
	background-color:white;
	padding:10px;
	border-radius: 0 0 5px 5px;
}
.thema-li{
	margin: 20px;
	padding: 15px 0;
	cursor:pointer;
}
#thema-aside a{
	text-decoration: none;
	color:inherit;
}
.thema-title{
	text-align:center;
	font-size: 1.1em;
	font-weight:bold;
	color:#2E87B1;
	text-transform: uppercase;
	background-color:#F1F1F1;
	margin: 20px;
	padding: 15px 0;
	transition: transform 0.2s ease-in-out;
}
.thema-title:hover{
	transform: scale(1.05);
	box-shadow: 0 1px 3px #B2B2B2;
}
.thema-title-actif{
	text-align:center;
	font-size: 1.1em;
	font-weight:bold;
	color:white;
	text-transform: uppercase;
	background-color:#2E87B1;
	margin: 20px;
	padding: 15px 0;
}
#faq-topics-list{
	display:flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin:10px 0;
	gap:10px;
}
.faq-topic-link{
	display: inline-block;
	font-weight: 600;
	color:inherit;
	border:solid 1px #D7D7D7;
	background-color: #F1F1F1;
	margin:0px;
	padding:5px 10px;
	transition: color, background 0.2s ease-in-out;
}
.faq-topic-link:hover{
	background-color: #F55165;
	color:white;
}
.faq-topic-link:focus{
	background-color: #7378CF;
	color:white;
}
.faq-video{
	color:#448DD5;
	border:solid 1px #D7D7D7;
	background-color: #F1F1F1;
	padding:0 5px;
}
.faq-video:hover{
	color:#F55165;
}
.blueSub{
	background-color: #2E87B1;
}
.blueNav{
	background-color: #385172;
}
.shadow{
	width:100%;
    height:60px;
    background:url("../images/shadow Flat.webp") no-repeat;
    -webkit-background-size:cover;
    background-size:cover;
    opacity:0.3;
}
mark{
    background-color: #FFCD69;
    padding: 0 4px;
    border-radius: 3px;
}

/* AFFICHAGE MOBILE */
@media screen and (max-width: 1024px){
	#faq-layout{
		margin:60px 20px;
	}
}
@media screen and (max-width: 768px) {
	#faq-titre{
		margin:100px auto 0;
		font-size:1.4em;
	}
	#faq-search{
		margin: 20px auto;
	}
	#faq-layout{
		max-width:768px;
		display: flex;
		flex-direction: column;
	}
	.faq-etiq-title{
		height:40px;
		font-size:1.2em;
		line-height:40px;
	}
	.faq-etiq{
		padding:5px;
	}
	.thema-title{
		font-size: 1em;
		margin:10px;
		padding:10px 0;
	}
	.thema-title:hover{
		transform: scale(1.05);
		box-shadow: 0 1px 3px #B2B2B2;
	}
	.thema-title-actif{
		font-size: 1em;
		margin: 10px;
		padding: 10px 0;
	}
    #faq-topics-list {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        margin: 10px 0;
        padding: 0;
    }
    #faq-topics-list li {
        list-style: none;
        margin: 6px 0;
    }
    .faq-topic-link {
        //display: inline-block;
        box-sizing: border-box;
        //margin: 0 ;
        padding: 5px;
        border-radius: 2px;
    }
	.shadow{
    	height:28px;
	}
}