/*
 * Itekpharma FAQ widget
 * Styles autonomes (pas de dépendance Tailwind) : un jeu de
 * questions/réponses en accordéon, sans catégorie.
 */

.itekpharma-faq,
.itekpharma-faq *,
.itekpharma-faq *::before,
.itekpharma-faq *::after {
	box-sizing: border-box;
}

.itekpharma-faq {
	--ipf-gradient-start: #77cfd0;
	--ipf-gradient-end: #5cb4b5;
	--ipf-icon-gradient-start: #5cb4b5;
	--ipf-icon-gradient-end: #0f4e5b;
	--ipf-border-color: #747474;
	--ipf-title-color: #ffffff;
	--ipf-question-color: #ffffff;
	--ipf-answer-color: #ffffff;
	--ipf-pretitle-color: #5cb4b5;
	--ipf-pretitle-icon-size: 18px;
	--ipf-question-icon-color: #5cb4b5;
	--ipf-question-icon-size: 20px;
	--ipf-question-icon-badge-bg: #ffffff;
	--ipf-question-icon-badge-color: #0d0d0d;
}

.itekpharma-faq__content {
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
}

/* ---------- Pré-titre ---------- */

.itekpharma-faq__pretitle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 0 12px;
	color: var(--ipf-pretitle-color);
}

.itekpharma-faq__pretitle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ipf-pretitle-icon-size);
	height: var(--ipf-pretitle-icon-size);
	font-size: var(--ipf-pretitle-icon-size);
	line-height: 1;
	color: var(--ipf-pretitle-color);
}

.itekpharma-faq__pretitle-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.itekpharma-faq__pretitle-text {
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ---------- Titre ---------- */

.itekpharma-faq__title {
	margin: 0 0 40px;
	text-align: center;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 0.05em;
	font-size: 22px;
	color: var(--ipf-title-color);
}

.itekpharma-faq__panel {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* ---------- Item accordéon ---------- */

.itekpharma-faq__item {
	border-radius: 16px;
	padding: 20px 36px;
	border: 1px solid var(--ipf-border-color);
	box-shadow: 0 1px 4px 0 rgba(25, 33, 61, 0.06);
	background-color: transparent;
	background-image: none;
}

.itekpharma-faq__item[open] {
	border-color: transparent;
	padding: 20px 36px 32px;
	box-shadow: none;
	background-image: linear-gradient(211deg, var(--ipf-gradient-start) 34%, var(--ipf-gradient-end) 85%);
}

.itekpharma-faq__item-summary {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	list-style: none;
}

.itekpharma-faq__item-summary::-webkit-details-marker,
.itekpharma-faq__item-summary::marker {
	display: none;
	content: '';
}

.itekpharma-faq__item[open] .itekpharma-faq__item-summary {
	align-items: flex-start;
}

/* ---------- Icône à gauche de la question ---------- */

.itekpharma-faq__item-question-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ipf-question-icon-size);
	height: var(--ipf-question-icon-size);
	font-size: var(--ipf-question-icon-size);
	line-height: 1;
	color: var(--ipf-question-icon-color);
}

.itekpharma-faq__item-question-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* Icône uploadée : badge rond blanc quand la question est ouverte */
.itekpharma-faq__item[open] .itekpharma-faq__item-question-icon {
	width: calc(var(--ipf-question-icon-size) + 16px);
	height: calc(var(--ipf-question-icon-size) + 16px);
	border-radius: 50%;
	background-color: var(--ipf-question-icon-badge-bg);
	color: var(--ipf-question-icon-badge-color);
	font-size: calc(var(--ipf-question-icon-size) * 0.7);
}

.itekpharma-faq__item-question {
	margin: 0;
	flex: 1 1 0%;
	min-width: 0;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.35;
	color: var(--ipf-question-color);
}

@media (min-width: 768px) {
	.itekpharma-faq__item-question {
		font-size: 20px;
	}
}

/* ---------- Bouton +/- ---------- */

.itekpharma-faq__item-icon-wrap {
	position: relative;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background-color: #ffffff;
	background-image: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.itekpharma-faq__item[open] .itekpharma-faq__item-icon-wrap {
	background-color: transparent;
	background-image: linear-gradient(193deg, var(--ipf-icon-gradient-start) 6%, var(--ipf-icon-gradient-end) 89%);
}

.itekpharma-faq__item-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	background: #0d0d0d;
	border-radius: 1px;
	transform: translate(-50%, -50%);
}

.itekpharma-faq__item-icon::before {
	content: '';
	position: absolute;
	top: -5px;
	left: 5px;
	width: 2px;
	height: 12px;
	background: #0d0d0d;
	border-radius: 1px;
}

.itekpharma-faq__item[open] .itekpharma-faq__item-icon,
.itekpharma-faq__item[open] .itekpharma-faq__item-icon::before {
	background: #ffffff;
}

.itekpharma-faq__item[open] .itekpharma-faq__item-icon::before {
	display: none;
}

/* ---------- Réponse (alignée sous la question, sous l'icône) ---------- */

.itekpharma-faq__item-answer-row {
	display: flex;
	gap: 12px;
	margin-top: 20px;
}

.itekpharma-faq__item-answer-spacer {
	flex: 0 0 auto;
	width: calc(var(--ipf-question-icon-size) + 16px);
}

.itekpharma-faq__item-answer {
	flex: 1 1 0%;
	min-width: 0;
	max-width: 658px;
	font-size: 16px;
	line-height: 1.66;
	color: var(--ipf-answer-color);
}

.itekpharma-faq__item-answer > *:last-child {
	margin-bottom: 0;
}

/* ---------- Responsive ---------- */

@media (max-width: 480px) {
	.itekpharma-faq__item {
		padding: 16px 20px;
	}

	.itekpharma-faq__item[open] {
		padding: 16px 20px 24px;
	}
}