/**
 * Section : FAQ (accordéon <details>).
 * D'après le design Figma "FAQ Container".
 */

@layer sections {
	.mm-faq__inner {
		display: flex;
		flex-direction: column;
		gap: var(--mm-space-xl); /* 48px */
	}
	.mm-faq__title {
		margin: 0;
		font-size: var(--mm-fs-400); /* → 49px */
		line-height: 1.2;
		color: var(--mm-feuille-800);
	}

	.mm-faq__list {
		display: flex;
		flex-direction: column;
		gap: var(--mm-space-list); /* 24px */
	}

	/* --- Item --- */
	.mm-faq__item { background-color: var(--mm-sauge-50); }

	.mm-faq__question {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--mm-space-list);
		padding: var(--mm-space-bloc); /* 32px */
		cursor: pointer;
		list-style: none; /* retire le marqueur natif */
		font-family: var(--mm-font-heading);
		font-weight: 500;
		font-size: clamp(1.5rem, 1.6vw, 1.9375rem); /* → 31px */
		line-height: 1.2;
		text-transform: uppercase;
		color: var(--mm-feuille-900);
	}
	.mm-faq__question::-webkit-details-marker { display: none; }
	.mm-faq__question:focus-visible {
		outline: var(--mm-focus-width) solid var(--mm-color-focus);
		outline-offset: -4px;
	}

	/* Icône + → × (rotation à l'ouverture). */
	.mm-faq__icon {
		position: relative;
		flex-shrink: 0;
		width: 2rem;
		height: 2rem;
		transition: transform var(--mm-transition);
	}
	.mm-faq__icon::before,
	.mm-faq__icon::after {
		content: "";
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		background-color: currentColor;
	}
	.mm-faq__icon::before { width: 100%; height: 2px; transform: translate(-50%, -50%); }
	.mm-faq__icon::after  { width: 2px; height: 100%; transform: translate(-50%, -50%); }
	/* + devient × (via [open] natif, et .is-open piloté par le JS pour rester
	   synchro pendant l'animation de fermeture). */
	.mm-faq__item[open] .mm-faq__icon,
	.mm-faq__item.is-open .mm-faq__icon { transform: rotate(45deg); }

	/* --- Réponse --- */
	.mm-faq__answer {
		padding: 0 var(--mm-space-bloc) var(--mm-space-bloc);
		font-family: var(--mm-font-body);
		font-size: var(--mm-fs-p);
		color: var(--mm-feuille-900);
	}
	/* Pleine largeur : neutralise le max-width global des paragraphes (base.css). */
	.mm-faq__answer p { line-height: 1.5; max-width: none; }
	.mm-faq__answer > * + * { margin-block-start: var(--mm-paragraph-gap); }
}