/* Beekom FAQ Widget — CSS pur, zéro JS requis */

/* Le wrapper Elementor peut être un flex-item qui se réduit au contenu :
   on le force en pleine largeur pour que la largeur ne varie pas à l'ouverture. */
.elementor-widget-beekom-faq,
.elementor-widget-beekom-faq > .elementor-widget-container {
	width: 100%;
}

.beekom-faq {
	display: flex;
	flex-direction: column;
	width: 100%;                       /* évite le shrink-to-fit qui faisait varier la largeur à l'ouverture */
	max-width: var(--faq-max-width, 100%);
	margin-inline: auto;
	box-sizing: border-box;
}
.beekom-faq * { box-sizing: border-box; }
.faq__item { width: 100%; }
.faq__answer { width: 100%; }

.faq__item {
	border-bottom: var(--faq-border-width, 1px) solid var(--faq-border-color, #E8DECE);
	padding-block: var(--faq-item-pad-y, 1.25rem);
	padding-inline: var(--faq-item-pad-x, 0px);
}
.faq__item:first-child { border-top: var(--faq-border-width, 1px) solid var(--faq-border-color, #E8DECE); }

/* Retire le marker par défaut du navigateur */
.faq__question { list-style: none; }
.faq__question::-webkit-details-marker { display: none; }

.faq__question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	cursor: pointer;
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--faq-q-color, #1A0B4D);
	padding-block: 0.25rem;
	user-select: none;
	outline: none;                 /* supprime le cadre violet disgracieux au clic */
}
/* Focus clavier uniquement (accessibilité préservée) */
.faq__question:focus-visible {
	outline: 2px solid var(--faq-icon-color, #5A4DFF);
	outline-offset: 4px;
	border-radius: 6px;
}
.faq__question:hover { color: var(--faq-q-hover, #5A4DFF); }

/* Icône +/× */
.faq__icon {
	flex-shrink: 0;
	width: var(--faq-icon-size, 28px);
	height: var(--faq-icon-size, 28px);
	border-radius: 50%;
	border: 1.5px solid var(--faq-icon-color, #5A4DFF);
	background: var(--faq-icon-bg, transparent);
	color: var(--faq-icon-color, #5A4DFF);
	display: flex; align-items: center; justify-content: center;
	transition: transform 250ms ease, background-color 250ms ease, color 250ms ease;
	position: relative;
}
.faq__icon::before,
.faq__icon::after {
	content: '';
	position: absolute;
	background: currentColor;
	border-radius: 2px;
	transition: transform 250ms ease, opacity 250ms ease;
}
.faq__icon::before { width: 12px; height: 1.5px; }
.faq__icon::after  { width: 1.5px; height: 12px; }

/* État ouvert */
details[open] .faq__icon {
	background: var(--faq-icon-bg-open, #5A4DFF);
	color: var(--faq-icon-color-open, #fff);
	border-color: var(--faq-icon-bg-open, #5A4DFF);
}
details[open] .faq__icon::after { transform: rotate(90deg); opacity: 0; }

/* Contenu */
.faq__answer {
	padding-top: 0.75rem;
	padding-right: var(--faq-answer-pad-r, 15%);   /* garde la réponse lisible, pas pleine largeur */
	color: var(--faq-a-color, #5C5C5C);
	line-height: 1.7;
	animation: faq-reveal 250ms ease;
}
.faq__answer p { margin-bottom: 0.75em; }
.faq__answer p:last-child { margin-bottom: 0; }
.faq__answer a { color: var(--faq-icon-color, #5A4DFF); text-decoration: underline; }

@keyframes faq-reveal {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
	.faq__answer { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.faq__answer  { animation: none; }
	.faq__icon, .faq__icon::before, .faq__icon::after { transition: none; }
}