/**
 * Extra MatGeco — FAQ
 * Accordéon <details> natif + styles CSS variables
 * !important sur props utilisateur pour battre Kadence theme.json
 */

.em-faq {
	background: var(--em-faq-section-bg, transparent);
	color: var(--em-faq-section-text, inherit);
	padding-top: var(--em-faq-outer-pt, 48px);
	padding-bottom: var(--em-faq-outer-pb, 48px);
}
.em-faq-outer {
	max-width: var(--em-faq-outer-max, 900px);
	margin: 0 auto;
	padding-left: clamp(16px, 3vw, 32px);
	padding-right: clamp(16px, 3vw, 32px);
	box-sizing: border-box;
}

/* =================================================================
 * Head
 * ================================================================= */
.em-faq-head {
	margin-bottom: var(--em-faq-head-mb, 40px) !important;
	text-align: center;
}
.em-faq--head-align-left   .em-faq-head { text-align: left; }
.em-faq--head-align-right  .em-faq-head { text-align: right; }
.em-faq--head-align-center .em-faq-head { text-align: center; }

.em-faq .em-faq-eyebrow {
	display: inline-block;
	font-size: var(--em-faq-eyebrow-fs, 13px) !important;
	font-weight: var(--em-faq-eyebrow-fw, 600) !important;
	font-style: var(--em-faq-eyebrow-fst, normal) !important;
	line-height: var(--em-faq-eyebrow-lh, 1.3) !important;
	letter-spacing: var(--em-faq-eyebrow-ls, 1.2px) !important;
	text-transform: var(--em-faq-eyebrow-tt, uppercase) !important;
	color: var(--em-faq-eyebrow-color, #2d6e2e) !important;
	margin-bottom: var(--em-faq-eyebrow-mb, 10px) !important;
}

.em-faq .em-faq-title,
.em-faq h1.em-faq-title,
.em-faq h2.em-faq-title,
.em-faq h3.em-faq-title,
.em-faq h4.em-faq-title,
.em-faq h5.em-faq-title,
.em-faq h6.em-faq-title {
	font-size: var(--em-faq-title-fs, 36px) !important;
	font-weight: var(--em-faq-title-fw, 700) !important;
	font-style: var(--em-faq-title-fst, normal) !important;
	line-height: var(--em-faq-title-lh, 1.15) !important;
	letter-spacing: var(--em-faq-title-ls, -0.5px) !important;
	text-transform: var(--em-faq-title-tt, none) !important;
	color: var(--em-faq-title-color, #1c4a1d) !important;
	margin: 0 0 var(--em-faq-title-mb, 12px) 0 !important;
}
.em-faq .em-faq-title em {
	font-weight: var(--em-faq-title-em-fw, 700) !important;
	font-style: var(--em-faq-title-em-fst, italic) !important;
	text-transform: var(--em-faq-title-em-tt, none) !important;
	color: var(--em-faq-title-em-color, #3a8c3b) !important;
}

.em-faq .em-faq-lead,
.em-faq p.em-faq-lead {
	font-size: var(--em-faq-lead-fs, 16px) !important;
	font-weight: var(--em-faq-lead-fw, 400) !important;
	font-style: var(--em-faq-lead-fst, normal) !important;
	line-height: var(--em-faq-lead-lh, 1.55) !important;
	letter-spacing: var(--em-faq-lead-ls, 0) !important;
	text-transform: var(--em-faq-lead-tt, none) !important;
	color: var(--em-faq-lead-color, #4a5a4a) !important;
	margin: 0 0 var(--em-faq-lead-mb, 0) 0 !important;
	max-width: 640px;
}
/* L'introduction est le seul élément d'en-tête à porter une largeur maximale :
   le texte est bien centré À L'INTÉRIEUR de son bloc de 640 px, mais ce bloc
   doit encore être placé dans l'en-tête, ce que font les marges automatiques.
   Ces sélecteurs reprennent « p.em-faq-lead » pour peser aussi lourd que la
   règle de mise en forme au-dessus (deux classes + un élément) : sans cela son
   « margin: 0 0 X 0 !important » l'emporte et l'introduction reste à gauche,
   quel que soit l'alignement choisi. */
.em-faq--head-align-center .em-faq-lead,
.em-faq--head-align-center p.em-faq-lead {
	margin-left: auto !important;
	margin-right: auto !important;
}
.em-faq--head-align-right .em-faq-lead,
.em-faq--head-align-right p.em-faq-lead {
	margin-left: auto !important;
	margin-right: 0 !important;
}
.em-faq--head-align-left .em-faq-lead,
.em-faq--head-align-left p.em-faq-lead {
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* =================================================================
 * List
 * ================================================================= */
.em-faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--em-faq-item-gap, 12px);
}

/* =================================================================
 * Item
 * ================================================================= */
.em-faq-item {
	background: var(--em-faq-item-bg, #fff) !important;
	border: var(--em-faq-item-bd-w, 1px) solid var(--em-faq-item-bd, rgba(0,0,0,0.08)) !important;
	border-radius: var(--em-faq-item-radius, 12px) !important;
	box-shadow: var(--em-faq-item-shadow, none) !important;
	overflow: hidden;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.em-faq-item[open] {
	background: var(--em-faq-item-obg, var(--em-faq-item-bg, #fff)) !important;
	border-color: var(--em-faq-item-obd, #2d6e2e) !important;
}
.em-faq-item:hover:not([open]) {
	background: var(--em-faq-item-hbg, var(--em-faq-item-bg, #fff)) !important;
}

/* --- Divider entre Q et A (optionnel) --- */
.em-faq--divider .em-faq-item[open] .em-faq-a {
	border-top: 1px solid var(--em-faq-div-color, rgba(0,0,0,0.08)) !important;
	/* Espace entre le séparateur et le texte de la réponse.
	   NB : appliqué uniquement en padding-top (l'espace au-dessus du séparateur
	   est déjà fourni par le padding-bottom de la question). */
	padding-top: var(--em-faq-answer-mt, 12px) !important;
}

/* =================================================================
 * Question (summary)
 * ================================================================= */
.em-faq-q {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: var(--em-faq-item-py, 18px) var(--em-faq-item-px, 20px);
	cursor: pointer;
	list-style: none;
	color: var(--em-faq-q-color, #1c4a1d) !important;
	font-size: var(--em-faq-q-fs, 17px) !important;
	font-weight: var(--em-faq-q-fw, 600) !important;
	font-style: var(--em-faq-q-fst, normal) !important;
	line-height: var(--em-faq-q-lh, 1.4) !important;
	letter-spacing: var(--em-faq-q-ls, 0) !important;
	text-transform: var(--em-faq-q-tt, none) !important;
	transition: color .2s ease;
}
.em-faq-q::-webkit-details-marker { display: none; }
.em-faq-q::marker { content: ''; }
.em-faq-item[open] > .em-faq-q { color: var(--em-faq-q-ocolor, #1c4a1d) !important; }

.em-faq-q-text { flex: 1; }

/* --- Icônes --- */
.em-faq-ico {
	flex-shrink: 0;
	width: var(--em-faq-ico-size, 20px);
	height: var(--em-faq-ico-size, 20px);
	display: inline-block;
	position: relative;
	color: var(--em-faq-ico-color, #2d6e2e);
	transition: transform .25s ease, color .2s ease;
}
.em-faq-item[open] .em-faq-ico { color: var(--em-faq-ico-ocolor, #1c4a1d); }

.em-faq--ico-left  .em-faq-q { flex-direction: row-reverse; }
.em-faq--ico-right .em-faq-q { flex-direction: row; }

/* plus */
.em-faq--icon-plus .em-faq-ico::before,
.em-faq--icon-plus .em-faq-ico::after {
	content: '';
	position: absolute;
	background: currentColor;
	left: 50%; top: 50%;
	transition: transform .25s ease, opacity .25s ease;
}
.em-faq--icon-plus .em-faq-ico::before {
	width: 60%; height: 2px;
	transform: translate(-50%, -50%);
}
.em-faq--icon-plus .em-faq-ico::after {
	width: 2px; height: 60%;
	transform: translate(-50%, -50%);
}
.em-faq--icon-plus .em-faq-item[open] .em-faq-ico::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

/* chevron */
.em-faq--icon-chevron .em-faq-ico {
	transform: rotate(0deg);
}
.em-faq--icon-chevron .em-faq-ico::before {
	content: '';
	position: absolute;
	inset: 0;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
	        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
}
.em-faq--icon-chevron .em-faq-item[open] .em-faq-ico { transform: rotate(180deg); }

/* arrow */
.em-faq--icon-arrow .em-faq-ico::before {
	content: '';
	position: absolute;
	inset: 0;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
	        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
	transition: transform .25s ease;
}
.em-faq--icon-arrow .em-faq-item[open] .em-faq-ico::before { transform: rotate(90deg); }

/* =================================================================
 * Answer
 * ================================================================= */
.em-faq-a {
	padding: 0 var(--em-faq-item-px, 20px) var(--em-faq-item-py, 18px);
	color: var(--em-faq-a-color, #4a5a4a) !important;
	font-size: var(--em-faq-a-fs, 15px) !important;
	font-weight: var(--em-faq-a-fw, 400) !important;
	font-style: var(--em-faq-a-fst, normal) !important;
	line-height: var(--em-faq-a-lh, 1.6) !important;
	letter-spacing: var(--em-faq-a-ls, 0) !important;
	text-transform: var(--em-faq-a-tt, none) !important;
}
.em-faq .em-faq-a p {
	margin: 0 0 12px 0 !important;
	color: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	font-weight: inherit !important;
}
.em-faq .em-faq-a p:last-child { margin-bottom: 0 !important; }

.em-faq .em-faq-a strong,
.em-faq .em-faq-a b {
	color: var(--em-faq-a-strong-color, #1c4a1d) !important;
	font-weight: var(--em-faq-a-strong-fw, 700) !important;
}

.em-faq .em-faq-a a {
	color: var(--em-faq-a-link-color, #2d6e2e) !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.em-faq .em-faq-a a:hover { text-decoration: none; }

.em-faq .em-faq-a ul, .em-faq .em-faq-a ol { padding-left: 20px; margin: 0 0 12px; }
.em-faq .em-faq-a li { margin-bottom: 4px; }

/* =================================================================
 * Animation open/close (subtile — details ne supporte pas nativement)
 * ================================================================= */
.em-faq-item .em-faq-a { animation: em-faq-fade .25s ease; }
@keyframes em-faq-fade {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0);    }
}

/* =================================================================
 * Empty
 * ================================================================= */
.em-faq-empty {
	padding: 40px 20px;
	text-align: center;
	color: var(--em-faq-lead-color, #627262);
	background: #f6f7f5;
	border-radius: 12px;
}

/* =================================================================
 * Responsive
 * ================================================================= */
@media (max-width: 1024px) {
	.em-faq-outer { max-width: var(--em-faq-outer-max-t, var(--em-faq-outer-max, 900px)); }
	.em-faq .em-faq-title,
	.em-faq h1.em-faq-title, .em-faq h2.em-faq-title, .em-faq h3.em-faq-title,
	.em-faq h4.em-faq-title, .em-faq h5.em-faq-title, .em-faq h6.em-faq-title {
		font-size: var(--em-faq-title-fs-t, 30px) !important;
	}
	.em-faq .em-faq-lead, .em-faq p.em-faq-lead { font-size: var(--em-faq-lead-fs-t, var(--em-faq-lead-fs, 16px)) !important; }
	.em-faq-q { font-size: var(--em-faq-q-fs-t, var(--em-faq-q-fs, 17px)) !important; }
	.em-faq-a { font-size: var(--em-faq-a-fs-t, var(--em-faq-a-fs, 15px)) !important; }
}
@media (max-width: 600px) {
	.em-faq-outer { max-width: var(--em-faq-outer-max-m, var(--em-faq-outer-max-t, var(--em-faq-outer-max, 900px))); }
	.em-faq .em-faq-title,
	.em-faq h1.em-faq-title, .em-faq h2.em-faq-title, .em-faq h3.em-faq-title,
	.em-faq h4.em-faq-title, .em-faq h5.em-faq-title, .em-faq h6.em-faq-title {
		font-size: var(--em-faq-title-fs-m, 26px) !important;
	}
	.em-faq .em-faq-lead, .em-faq p.em-faq-lead { font-size: var(--em-faq-lead-fs-m, 14px) !important; }
	.em-faq-q { font-size: var(--em-faq-q-fs-m, 16px) !important; gap: 12px; }
	.em-faq-a { font-size: var(--em-faq-a-fs-m, 14px) !important; }
}

/* =================================================================
 * Editor helper
 * ================================================================= */
.editor-styles-wrapper .em-faq { max-width: 100%; }