/* ============================================================
   Beekom Feature Accordion — v2
   Smooth, bien aligné, padding généreux
   ============================================================ */

/* Tokens internes */
.beekom-feature-accordion {
	--fa-num-w:  52px;
	--fa-gap:    24px;
	--fa-radius: 16px;
	--fa-ease:   cubic-bezier(0.22, 1, 0.36, 1);

	display: grid;
	grid-template-columns: 45% 1fr; /* défaut, surchargé par Elementor */
	gap: clamp(40px, 6vw, 88px); /* surchargé par Elementor */
	align-items: center; /* accordéon centré sur la hauteur de la photo */
}

/* ── Image gauche — scale + fade pour chaque slide ──────── */
.feat-acc__image-wrap {
	position: relative;
	height: 560px;         /* défaut, surchargé par Elementor (Hauteur photo) */
	border-radius: 24px;
	overflow: hidden;
}

.feat-acc__image {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.06);
	transition:
		opacity   1.0s var(--fa-ease),
		transform 1.0s var(--fa-ease);
}
.feat-acc__image.is-active {
	opacity: 1;
	transform: scale(1);
}
.feat-acc__image--global {
	opacity: 1;
	transform: scale(1);
}

/* ── Liste ──────────────────────────────────────────────── */
.feat-acc__list {
	display: flex;
	flex-direction: column;
	justify-content: center; /* centrage vertical dans la cellule */
	gap: 0;
}

/* ── Item ───────────────────────────────────────────────── */
.feat-acc__item {
	padding: 24px 20px;
	border-radius: var(--fa-radius);
	cursor: pointer;
	outline: none;
	transition:
		background      0.35s var(--fa-ease),
		border-radius   0.35s var(--fa-ease),
		padding         0.35s var(--fa-ease);
}

/* Séparateur entre items inactifs */
.feat-acc__item:not(.is-active) {
	border-bottom: 1px solid var(--fa-separator, #E8DECE);
	border-radius: 0;
	padding-block: 20px;
	padding-inline: 8px;
}
.feat-acc__item:not(.is-active):first-of-type { border-top: none; }
.feat-acc__item:not(.is-active):last-of-type  { border-bottom: none; }

/* Supprime le séparateur autour de l'item actif */
.feat-acc__item:not(.is-active):has(+ .is-active),
.feat-acc__item.is-active + .feat-acc__item:not(.is-active) {
	border-top: none;
}

.feat-acc__item:not(.is-active):hover {
	background: var(--fa-hover-bg, rgba(90, 77, 255, .05));
	padding-inline: 16px;
	border-bottom-color: transparent;
}

.feat-acc__item.is-active {
	background: var(--fa-active-bg, #5A4DFF);
	border: none;
	padding: 24px 24px;
}

.feat-acc__item:focus-visible {
	box-shadow: 0 0 0 2px #5A4DFF;
}

/* ── Header : grid pour aligner titre ET description ────── */
.feat-acc__header {
	display: grid;
	grid-template-columns: var(--fa-num-w) 1fr;
	gap: 0 var(--fa-gap);
	align-items: baseline;
}

.feat-acc__num {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--c-navy, #1A0B4D);
	transition: color 0.3s ease;
}
.feat-acc__item.is-active .feat-acc__num { color: var(--fa-active-tc, rgba(255,255,255,.7)); }

.feat-acc__title {
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	font-weight: 600;
	color: var(--c-navy, #1A0B4D);
	margin: 0;
	line-height: 1.3;
	transition: color 0.3s ease;
}
.feat-acc__item.is-active .feat-acc__title { color: var(--fa-active-tc-title, #fff); }

/* ── Body : grid trick pour animation smooth ────────────── */
.feat-acc__body {
	/* Aligné avec le titre (même colonne que .feat-acc__title) */
	padding-left: calc(var(--fa-num-w) + var(--fa-gap));
	/* Smooth open/close sans max-height hack */
	display: grid;
	grid-template-rows: 0fr;
	transition:
		grid-template-rows 0.45s var(--fa-ease),
		margin-top         0.35s var(--fa-ease),
		opacity            0.35s ease;
	margin-top: 0;
	opacity: 0;
}

/* Inner : overflow:hidden requis pour le grid trick */
.feat-acc__body-inner { overflow: hidden; }

.feat-acc__item.is-active .feat-acc__body {
	grid-template-rows: 1fr;
	margin-top: 14px;
	opacity: 1;
}

.feat-acc__desc {
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--fa-active-desc-tc, rgba(255,255,255,.88));
	margin: 0 0 2px;
	padding-bottom: 4px; /* évite le crop des descenders */
}


/* ── Progress bar autoplay ──────────────────────────────── */
.feat-acc__item.is-active.has-autoplay::after {
	content: '';
	display: block;
	height: 2px;
	background: rgba(255,255,255,.35);
	border-radius: 2px;
	margin-top: 16px;
	transform-origin: left;
	animation: featAccProgress var(--autoplay-delay, 4000ms) linear forwards;
}
@keyframes featAccProgress {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* ── Responsive ─────────────────────────────────────────── */
/* !important nécessaire : photo_width / photo_height / col_gap sont générés
   via {{WRAPPER}} (spécificité plus forte) et appliquent les valeurs desktop
   sur tous les écrans faute de valeur mobile définie. */
@media (max-width: 768px) {
	.beekom-feature-accordion {
		grid-template-columns: 1fr !important;
		gap: 28px !important;        /* évite le gros espace blanc (col_gap desktop) */
		align-items: stretch;
	}
	.feat-acc__image-wrap {
		order: 1;
		min-width: 0;
		height: auto !important;     /* override la hauteur desktop (ex. 560px) */
		aspect-ratio: 4 / 5;         /* photo qui s'adapte à la largeur, sans trou ni chevauchement */
	}
	.feat-acc__list { order: 2; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.feat-acc__image { transition: none; }
	.feat-acc__body  { transition: none; }
	.feat-acc__item.is-active.has-autoplay::after { animation: none; }
}

/* ── Bouton CTA — style Yolo identique à .btn_yolo ─────── */
.feat-acc__cta { margin-top: 32px; }

.feat-acc__cta .btn {
	display: inline-flex;
	align-items: center;
	gap: var(--btn-gap, 16px);
	padding: var(--btn-pad, 5px 10px 5px 20px);
	border-radius: 999px;
	background: var(--c-accent, #FF5A2D);
	text-decoration: none;
	white-space: nowrap;
	transition: border-radius 0.5s cubic-bezier(0.22,1,0.36,1);
}
/* hover border-radius supprimé */

.feat-acc__cta .btn__text {
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
}

.feat-acc__cta .btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--btn-icon, 40px);
	height: var(--btn-icon, 40px);
	flex-shrink: 0;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.feat-acc__cta .btn__icon svg { width: var(--btn-icon, 40px); height: var(--btn-icon, 40px); display: block; }
.feat-acc__cta .btn:hover .btn__icon { transform: rotate(-45deg); }

/* SVG paths couleur par défaut (surchargeable depuis Elementor) */
.feat-acc__cta .btn .btn__icon circle { fill: #ffffff; }
.feat-acc__cta .btn .btn__icon path   { stroke: #000000; }