/**
 * Accordéon — <details>/<summary> natifs.
 *
 * Le composant hérite des couleurs de son conteneur (currentColor) : il est
 * ainsi posable sur la carte or de la FAQ comme sur un fond clair, sans variante.
 * Figma : séparateurs 1.5 px en rgba(235,235,235,0.25) = --e4y-overlay-light.
 *
 * Emplacement : assets/css/components/accordeon.css
 */

.accordeon__item {
	border-block-end: 1.5px solid var(--e4y-overlay-light);
}

/* ── Question ──────────────────────────────────────────────── */

.accordeon__question {
	display: flex;
	gap: var(--space-4);
	align-items: center;
	justify-content: space-between;
	padding-block: var(--space-4);
	font-size: var(--fs-lead);   /* Figma : 20 px — --fs-h3 plafonne à 24 */
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	cursor: pointer;
	list-style: none;          /* retire le triangle natif (Firefox) */
}

/* Idem pour les moteurs WebKit. */
.accordeon__question::-webkit-details-marker {
	display: none;
}

.accordeon__chevron {
	flex: none;
	width: 16px;
	height: auto;
	transition: transform var(--duration) var(--ease);
}

.accordeon__item[open] .accordeon__chevron {
	transform: rotate(180deg);
}

/* ── Réponse ───────────────────────────────────────────────── */

.accordeon__reponse {
	padding-block-end: var(--space-4);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.accordeon__reponse > * + * {
	margin-block-start: var(--space-3);
}