/* Composant « accordéon » — sur <details>/<summary>, sans JavaScript. */

.lc47-accordeon {
	display: flex;
	flex-direction: column;
	gap: var(--lc47-accordeon-ecart, 12px);
}

.lc47-accordeon__entree {
	background: var(--lc47-accordeon-fond, transparent);
	border: var(--lc47-accordeon-bordure, 1px solid currentColor);
	border-radius: var(--lc47-accordeon-rayon, 12px);
	overflow: hidden;
}

.lc47-accordeon__entree[open] {
	background: var(--lc47-accordeon-fond-ouvert, var(--lc47-accordeon-fond, transparent));
}

.lc47-accordeon__entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: var(--lc47-accordeon-marge, 20px 24px);
	cursor: pointer;
	list-style: none; /* retire le triangle par défaut */
	color: var(--lc47-accordeon-titre-couleur, inherit);
}

/* Safari a besoin du pseudo-élément WebKit pour retirer le triangle. */
.lc47-accordeon__entete::-webkit-details-marker {
	display: none;
}

.lc47-accordeon__entete:focus-visible {
	outline: 2px solid var(--lc47-accordeon-focus, currentColor);
	outline-offset: -2px;
}

.lc47-accordeon__titre {
	margin: 0;
	font-size: var(--lc47-accordeon-titre-taille, inherit);
	font-weight: var(--lc47-accordeon-titre-graisse, 600);
	line-height: 1.3;
}

.lc47-accordeon__entree[open] .lc47-accordeon__titre {
	color: var(--lc47-accordeon-titre-couleur-ouvert, inherit);
}

/*
 * Marqueur : un « + » qui devient « − ». Dessiné en CSS, donc aucune police
 * d'icônes à charger pour deux traits.
 */
.lc47-accordeon__marqueur {
	position: relative;
	flex: 0 0 auto;
	width: var(--lc47-accordeon-marqueur-taille, 22px);
	height: var(--lc47-accordeon-marqueur-taille, 22px);
	border-radius: 50%;
	border: 1px solid currentColor;
	color: var(--lc47-accordeon-marqueur-couleur, inherit);
}

/*
 * Marqueur plein : le disque prend la couleur du marqueur et le signe celle du fond
 * de l'entrée, ce qui garde le contraste quel que soit le couple de couleurs choisi.
 */
.lc47-accordeon--marqueur-plein .lc47-accordeon__marqueur {
	background: currentColor;
}

.lc47-accordeon--marqueur-plein .lc47-accordeon__marqueur::before,
.lc47-accordeon--marqueur-plein .lc47-accordeon__marqueur::after {
	border-top-color: var(--lc47-accordeon-fond, #000);
}

.lc47-accordeon--marqueur-plein .lc47-accordeon__entree[open] .lc47-accordeon__marqueur::before,
.lc47-accordeon--marqueur-plein .lc47-accordeon__entree[open] .lc47-accordeon__marqueur::after {
	border-top-color: var(--lc47-accordeon-fond-ouvert, var(--lc47-accordeon-fond, #000));
}

/*
 * Une entrée ouverte change de fond : son marqueur doit pouvoir changer de couleur
 * avec elle, sinon il disparaît dedans — un marqueur lime sur un fond lime.
 */
.lc47-accordeon__entree[open] .lc47-accordeon__marqueur {
	color: var(--lc47-accordeon-marqueur-couleur-ouvert, var(--lc47-accordeon-marqueur-couleur, inherit));
}

.lc47-accordeon__marqueur::before,
.lc47-accordeon__marqueur::after {
	content: "";
	position: absolute;
	inset: 50% 25%;
	border-top: 2px solid currentColor;
	transform: translateY(-1px);
	transition: transform .2s ease, opacity .2s ease;
}

.lc47-accordeon__marqueur::after {
	transform: translateY(-1px) rotate(90deg);
}

.lc47-accordeon__entree[open] .lc47-accordeon__marqueur::after {
	transform: translateY(-1px) rotate(0deg);
	opacity: 0;
}

/*
 * Le panneau a son propre fond, indépendant de celui de l'en-tête ouverte. Sans lui,
 * une en-tête ouverte de couleur vive impose sa couleur au texte de la réponse — sur
 * la FAQ, du texte clair sur fond lime, illisible.
 */
.lc47-accordeon__panneau {
	padding: var(--lc47-accordeon-panneau-marge, 0 24px 22px);
	color: var(--lc47-accordeon-texte-couleur, inherit);
	background: var(--lc47-accordeon-panneau-fond, transparent);
	border-end-start-radius: var(--lc47-accordeon-rayon, 0);
	border-end-end-radius: var(--lc47-accordeon-rayon, 0);
}

.lc47-accordeon__panneau > :first-child { margin-top: 0; }
.lc47-accordeon__panneau > :last-child  { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	.lc47-accordeon__marqueur::before,
	.lc47-accordeon__marqueur::after { transition: none; }
}

/* À l'impression, tout est déplié : un panneau fermé ne doit pas disparaître de la feuille. */
@media print {
	.lc47-accordeon__entree { border: 1px solid #999; }
	.lc47-accordeon__panneau { display: block !important; }
	.lc47-accordeon__marqueur { display: none; }
}