/* Widget Elementor : Accordéon horizontal */

.dj-hacc {
	--dj-hacc-height: 460px;
	--dj-hacc-tab: 56px;
	--dj-hacc-gap: 8px;
	--dj-hacc-duration: 450ms;
	--dj-hacc-easing: cubic-bezier(0.25, 1, 0.5, 1);
	--dj-hacc-icon-gap: 10px;
	--dj-hacc-label: 24ch;
	--dj-hacc-panel-min: 0px;

	width: 100%;
}

/* ------------------------------------------------------------ Onglet commun */

.dj-hacc__tab {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 14px 16px;
	border: 0;
	background-color: #111111;
	color: #ffffff;
	font: inherit;
	text-align: inherit;
	cursor: pointer;
	appearance: none;
	overflow: hidden;
	transition:
		background-color 0.3s ease,
		color 0.3s ease,
		flex-grow var(--dj-hacc-duration) var(--dj-hacc-easing);
}

.dj-hacc__tab:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

.dj-hacc__icon {
	order: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 1;
}

.dj-hacc--icon-end .dj-hacc__icon {
	order: 2;
}

.dj-hacc__icon svg {
	display: block;
	fill: currentColor;
}

.dj-hacc__icon-active {
	display: none;
}

.dj-hacc__tab.is-open .dj-hacc__icon:not(.dj-hacc__icon--single) .dj-hacc__icon-normal {
	display: none;
}

.dj-hacc__tab.is-open .dj-hacc__icon-active {
	display: inline-flex;
}

.dj-hacc__title {
	order: 1;
	margin: 0;
	padding: 0;
	min-width: 0;
	font-size: inherit;
	line-height: 1.2;
}

.dj-hacc__title-inner {
	display: block;
	white-space: nowrap;
}

/* ========================================================================== */
/* Disposition en barre : rangée d'onglets, contenu pleine largeur en dessous  */
/* ========================================================================== */

.dj-hacc--layout-bar .dj-hacc__bar {
	display: flex;
	align-items: stretch;
	gap: var(--dj-hacc-gap);
	width: 100%;
}

.dj-hacc--layout-bar .dj-hacc__tab {
	flex: 0 0 auto;
	min-width: var(--dj-hacc-tab);
	min-height: var(--dj-hacc-tab);
	gap: 0;
	/* Une pastille fermée ne contient qu'une icône : elle reste centrée.
	   L'alignement de l'onglet ouvert est piloté depuis l'onglet Style. */
	justify-content: center;
}

/* L'onglet ouvert absorbe la place restante de la rangée. */
.dj-hacc--layout-bar.dj-hacc--fill .dj-hacc__tab.is-open {
	flex-grow: 1;
}

.dj-hacc--layout-bar .dj-hacc__title {
	max-width: var(--dj-hacc-label);
	overflow: hidden;
	margin-inline-start: var(--dj-hacc-icon-gap);
	transition:
		max-width var(--dj-hacc-duration) var(--dj-hacc-easing),
		opacity calc(var(--dj-hacc-duration) * 0.6) var(--dj-hacc-easing),
		margin var(--dj-hacc-duration) var(--dj-hacc-easing);
}

.dj-hacc--layout-bar .dj-hacc__title:first-child {
	margin-inline-start: 0;
}

.dj-hacc--layout-bar.dj-hacc--icon-end .dj-hacc__title {
	margin-inline-start: 0;
	margin-inline-end: var(--dj-hacc-icon-gap);
}

.dj-hacc--layout-bar .dj-hacc__title-inner {
	writing-mode: horizontal-tb;
	transform: none;
}

/* Libellé replié : la pastille se referme sur son icône, en douceur. */
.dj-hacc--layout-bar.dj-hacc--closed-icon .dj-hacc__tab:not(.is-open) .dj-hacc__title,
.dj-hacc--layout-bar.dj-hacc--closed-none .dj-hacc__tab:not(.is-open) .dj-hacc__title,
.dj-hacc--layout-bar.dj-hacc--open-icon .dj-hacc__tab.is-open .dj-hacc__title,
.dj-hacc--layout-bar.dj-hacc--open-none .dj-hacc__tab.is-open .dj-hacc__title {
	max-width: 0;
	opacity: 0;
	margin-inline: 0;
}

.dj-hacc--layout-bar.dj-hacc--closed-title .dj-hacc__tab:not(.is-open) .dj-hacc__icon,
.dj-hacc--layout-bar.dj-hacc--closed-none .dj-hacc__tab:not(.is-open) .dj-hacc__icon,
.dj-hacc--layout-bar.dj-hacc--open-title .dj-hacc__tab.is-open .dj-hacc__icon,
.dj-hacc--layout-bar.dj-hacc--open-none .dj-hacc__tab.is-open .dj-hacc__icon {
	display: none;
}

/* Les panneaux sont des enfants directs de .dj-hacc, comme dans l'accordéon
   imbriqué natif d'Elementor : c'est ce que l'éditeur attend pour y injecter
   les conteneurs enfants et proposer une zone de dépôt. */
.dj-hacc--layout-bar .dj-hacc__item {
	display: none;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--dj-hacc-panel-min);
}

.dj-hacc--layout-bar .dj-hacc__item.is-open {
	display: block;
	animation: dj-hacc-panel calc(var(--dj-hacc-duration) * 0.8) var(--dj-hacc-easing) both;
}

/* Le panneau est calé sur l'onglet ouvert. La largeur et le décalage sont
   posés en ligne par le script, image par image pendant l'animation, pour
   qu'il n'y ait jamais de décrochage entre l'onglet et son contenu. */
.dj-hacc--layout-bar.dj-hacc--panel-tab .dj-hacc__item {
	max-width: 100%;
	will-change: width, margin-inline-start;
}

@keyframes dj-hacc-panel {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ========================================================================== */
/* Disposition côte à côte : bandes pleine hauteur, contenu à droite           */
/* ========================================================================== */

.dj-hacc--layout-side {
	display: flex;
	align-items: stretch;
	gap: var(--dj-hacc-gap);
	height: var(--dj-hacc-height);
	overflow: hidden;
}

@supports not (aspect-ratio: 16 / 9) {
	.dj-hacc--layout-side {
		display: flex;
	}
}

/* Grille à deux colonnes : la bande d'onglet, puis le panneau. La première
   ligne accueille le bandeau de titre horizontal quand il est activé. */
.dj-hacc--layout-side .dj-hacc__item {
	position: relative;
	display: grid;
	grid-template-columns: var(--dj-hacc-tab) minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr);
	align-items: stretch;
	min-width: 0;
	overflow: hidden;
	box-sizing: border-box;
	flex: 0 0 var(--dj-hacc-tab);
	transition:
		flex-grow var(--dj-hacc-duration) var(--dj-hacc-easing),
		flex-basis var(--dj-hacc-duration) var(--dj-hacc-easing),
		grid-template-columns var(--dj-hacc-duration) var(--dj-hacc-easing);
}

.dj-hacc--layout-side .dj-hacc__item.is-open,
.dj-hacc--layout-side.dj-hacc--none-open .dj-hacc__item {
	flex-grow: 1;
}

/* Accordéon entièrement fermé : les onglets se partagent la largeur au lieu
   de laisser des vides à côté de panneaux invisibles. */
.dj-hacc--layout-side.dj-hacc--none-open .dj-hacc__item {
	grid-template-columns: minmax(0, 1fr) 0;
}

/* Rien à afficher dans la bande du panneau ouvert : elle disparaît. */
.dj-hacc--layout-side.dj-hacc--open-none .dj-hacc__item.is-open {
	grid-template-columns: 0 minmax(0, 1fr);
}

.dj-hacc--layout-side.dj-hacc--open-none .dj-hacc__tab.is-open {
	padding: 0;
	border: 0;
	min-width: 0;
	overflow: hidden;
}

.dj-hacc--layout-side .dj-hacc__tab {
	grid-column: 1;
	grid-row: 1 / -1;
	width: 100%;
	min-width: 0;
	gap: var(--dj-hacc-icon-gap);
}

/* Sens du titre, panneau fermé */
.dj-hacc--layout-side.dj-hacc--oc-bt .dj-hacc__tab:not(.is-open) .dj-hacc__title-inner {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.dj-hacc--layout-side.dj-hacc--oc-tb .dj-hacc__tab:not(.is-open) .dj-hacc__title-inner {
	writing-mode: vertical-rl;
}

.dj-hacc--layout-side.dj-hacc--oc-h .dj-hacc__tab:not(.is-open) .dj-hacc__title-inner {
	writing-mode: horizontal-tb;
}

/* Sens du titre, panneau ouvert */
.dj-hacc--layout-side.dj-hacc--oo-bt .dj-hacc__tab.is-open .dj-hacc__title-inner {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.dj-hacc--layout-side.dj-hacc--oo-tb .dj-hacc__tab.is-open .dj-hacc__title-inner {
	writing-mode: vertical-rl;
}

.dj-hacc--layout-side.dj-hacc--oo-h .dj-hacc__tab.is-open .dj-hacc__title-inner {
	writing-mode: horizontal-tb;
}

/* Un titre vertical impose d'empiler icône et titre dans la largeur de la bande */
.dj-hacc--layout-side.dj-hacc--oc-bt .dj-hacc__tab:not(.is-open),
.dj-hacc--layout-side.dj-hacc--oc-tb .dj-hacc__tab:not(.is-open) {
	flex-direction: column;
}

.dj-hacc--layout-side.dj-hacc--oc-h .dj-hacc__tab:not(.is-open) {
	flex-direction: row;
}

.dj-hacc--layout-side.dj-hacc--oo-bt .dj-hacc__tab.is-open,
.dj-hacc--layout-side.dj-hacc--oo-tb .dj-hacc__tab.is-open {
	flex-direction: column;
}

.dj-hacc--layout-side.dj-hacc--oo-h .dj-hacc__tab.is-open {
	flex-direction: row;
}

/* Ce que l'on montre selon l'état */
.dj-hacc--layout-side.dj-hacc--closed-title .dj-hacc__tab:not(.is-open) .dj-hacc__icon,
.dj-hacc--layout-side.dj-hacc--closed-none .dj-hacc__tab:not(.is-open) .dj-hacc__icon,
.dj-hacc--layout-side.dj-hacc--closed-icon .dj-hacc__tab:not(.is-open) .dj-hacc__title,
.dj-hacc--layout-side.dj-hacc--closed-none .dj-hacc__tab:not(.is-open) .dj-hacc__title,
.dj-hacc--layout-side.dj-hacc--open-title .dj-hacc__tab.is-open .dj-hacc__icon,
.dj-hacc--layout-side.dj-hacc--open-none .dj-hacc__tab.is-open .dj-hacc__icon,
.dj-hacc--layout-side.dj-hacc--open-icon .dj-hacc__tab.is-open .dj-hacc__title,
.dj-hacc--layout-side.dj-hacc--open-none .dj-hacc__tab.is-open .dj-hacc__title {
	display: none;
}

/* ------------------------------------- Bandeau de titre du panneau ouvert */

.dj-hacc__head {
	display: none;
	grid-column: 2;
	grid-row: 1;
	align-items: center;
	gap: var(--dj-hacc-icon-gap);
	box-sizing: border-box;
	padding: 14px 20px;
	min-width: 0;
	line-height: 1.3;
	opacity: 0;
	transition: opacity calc(var(--dj-hacc-duration) * 0.8) var(--dj-hacc-easing);
}

.dj-hacc--layout-side.dj-hacc--head-top .dj-hacc__item.is-open .dj-hacc__head {
	display: flex;
	opacity: 1;
}

/* Le titre ne doit pas apparaître deux fois : dans la bande verticale et
   dans le bandeau. Le bandeau prend le relais dès qu'il est actif. */
.dj-hacc--layout-side.dj-hacc--head-top .dj-hacc__tab.is-open .dj-hacc__title {
	display: none;
}

.dj-hacc__head-title {
	margin: 0;
	padding: 0;
	min-width: 0;
	font-size: inherit;
	overflow-wrap: anywhere;
}

.dj-hacc__head-icon {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 1;
}

.dj-hacc__head-icon svg {
	display: block;
	fill: currentColor;
}

.dj-hacc--head-icon-end .dj-hacc__head-icon {
	order: 2;
}

/* --------------------------------------------------------------- Panneau */

/* Le conteneur Elementor imbriqué est injecté directement dans l'item. */
.dj-hacc--layout-side .dj-hacc__item > .e-con {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
	align-self: stretch;
	height: 100%;
	max-width: none;
	opacity: 0;
	transition: opacity calc(var(--dj-hacc-duration) * 0.8) var(--dj-hacc-easing);
}

.dj-hacc--layout-side .dj-hacc__item.is-open > .e-con {
	opacity: 1;
}

.dj-hacc--layout-side .dj-hacc__item:not(.is-open) > .e-con {
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.dj-hacc__item,
	.dj-hacc__tab,
	.dj-hacc__title,
	.dj-hacc__head,
	.dj-hacc__item > .e-con {
		transition: none;
	}

	.dj-hacc--layout-bar .dj-hacc__item.is-open {
		animation: none;
	}
}

/* ---------------------------------------------------- Aperçu dans l'éditeur */

/* Conteneur récupéré ailleurs sur la page : il doit occuper le panneau sans
   traîner les contraintes de largeur de son emplacement d'origine. */
.dj-hacc__item > .dj-hacc__adopted {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.dj-hacc__notice {
	padding: 14px 18px;
	border: 1px dashed rgba(125, 125, 125, 0.6);
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.5;
}

/* Seul le panneau OUVERT et encore vide affiche une zone de dépôt. Les
   panneaux fermés doivent rester masqués, y compris dans l'éditeur : on ouvre
   un panneau en cliquant sur son onglet, puis on y dépose un widget. */
.elementor-editor-active .dj-hacc__item.is-open:empty,
.elementor-editor-preview .dj-hacc__item.is-open:empty {
	min-height: 90px;
	border: 1px dashed rgba(125, 125, 125, 0.5);
	border-radius: 6px;
}