/*
 * Ochanta — structure et navigation des carrousels compatibles The7.
 *
 * Structure créée par assets/widgets/js/carousel.js (même balisage qu'Owl Carousel).
 * Flèches : --arrow-display, --arrow-opacity, --arrow-icon-size, --arrow-h-offset,
 * --arrow-v-offset ; puces : --bullet-display, --bullet-opacity, --bullet-size, --bullet-gap,
 * --bullet-color, --bullet-hover-color, --bullet-active-color, --bullet-border-width.
 * Toutes réglées dans les widgets.
 */

/* ------------------------------------------------------------------ *
 * Structure
 * ------------------------------------------------------------------ */

.owl-carousel {
	--stage-top-gap: 0px;
	--stage-right-gap: 0px;
	--stage-left-gap: 0px;
	--box-padding-top: 0px;
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	-webkit-tap-highlight-color: transparent;
}

/* Avant l'initialisation : une seule rangée, sans saut de mise en page. */
/* Hors widgets Elementor : le curseur The7 pose aussi « owl-carousel » sur son widget. */
.owl-carousel:not(.owl-loaded):not(.elementor-element) {
	display: flex;
	gap: 15px;
	overflow: hidden;
}

.owl-carousel:not(.owl-loaded):not(.elementor-element) > :not(.owl-nav) {
	flex: 0 0 calc((100% - 30px) / 3);
}

.owl-carousel.owl-loaded {
	display: grid;
}

.owl-carousel .owl-stage-outer {
	position: relative;
	overflow: hidden;
	transform: translate3d(0, 0, 0);
}

.owl-carousel .owl-stage {
	position: relative;
	display: flex;
	align-items: flex-start;
	touch-action: pan-y;
	will-change: transform;
}

.owl-carousel[data-auto-height="false"] .owl-stage {
	align-items: stretch;
}

.owl-carousel[data-auto-height="false"] .owl-stage .dt-owl-item {
	display: flex;
}

.owl-carousel .dt-owl-item {
	position: relative;
	flex-shrink: 0;
	min-height: 1px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.owl-carousel.owl-drag .dt-owl-item {
	touch-action: pan-y;
	user-select: none;
}

.owl-carousel.owl-grab {
	cursor: grabbing;
}

.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled,
.owl-nav.disabled {
	display: none !important;
}

.owl-carousel .owl-dot,
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
	cursor: pointer;
	user-select: none;
}

.owl-carousel .owl-dot {
	padding: 0 !important;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
}

/* ------------------------------------------------------------------ *
 * Flèches
 * ------------------------------------------------------------------ */

.elementor-owl-carousel-call .owl-nav {
	display: var(--arrow-display, inline-flex);
	opacity: var(--arrow-opacity, 1);
	transition: opacity .3s;
}

.elementor-owl-carousel-call .owl-nav > div {
	--arrow-translate-y: -50%;
	position: absolute;
	top: calc(50% + var(--arrow-v-offset, 0px) + var(--offset-v-t-img, 0px));
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--the7-accent-color);
	transform: translate3d(var(--arrow-translate-x, 0), var(--arrow-translate-y), 0);
	transition: all .3s;
}

.elementor-owl-carousel-call .owl-nav > div:focus-visible {
	outline: 1px solid var(--the7-accent-color);
}

.elementor-owl-carousel-call .owl-nav > div i {
	font-size: var(--arrow-icon-size);
	transition: color .3s;
}

.elementor-owl-carousel-call .owl-nav > div svg {
	width: var(--arrow-icon-size);
	height: auto;
	fill: currentColor;
	transition: fill .3s, color .3s;
}

.elementor-owl-carousel-call .owl-nav .owl-prev {
	--arrow-translate-x: 0;
	left: var(--arrow-h-offset, 10px);
}

.elementor-owl-carousel-call .owl-nav .owl-next {
	--arrow-translate-x: -100%;
	left: calc(100% - var(--arrow-h-offset, 10px));
}

.elementor-owl-carousel-call:hover .owl-nav {
	opacity: 1;
}

.elementor-owl-carousel-call:not(:hover) .owl-nav {
	transition-delay: 650ms;
}

/* ------------------------------------------------------------------ *
 * Puces
 * ------------------------------------------------------------------ */

.elementor-owl-carousel-call .owl-dots {
	position: absolute;
	display: var(--bullet-display, inline-flex);
	gap: var(--bullet-gap, 10px);
	opacity: var(--bullet-opacity, 1);
	transform: translate3d(var(--bullet-translate-x, 0), var(--bullet-translate-y, -50%), 0);
	transition: opacity .3s;
}

.bullets-stretch-y .elementor-owl-carousel-call .owl-dots {
	width: 100%;
}

.elementor-owl-carousel-call:hover .owl-dots {
	opacity: 1;
}

.elementor-owl-carousel-call .owl-dots .owl-dot {
	position: relative;
	display: inline-block;
	flex-grow: var(--bullet-flex-grow, initial);
	width: var(--bullet-size, 10px);
	height: var(--bullet-size, 10px);
	vertical-align: middle;
}

.owl-carousel .owl-dots .owl-dot span {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	outline: 0;
	background: var(--bullet-color, var(--the7-accent-color));
}

.owl-dot:not(.active):hover span {
	background: var(--bullet-hover-color, var(--the7-accent-color));
}

.owl-dot.active span {
	background: var(--bullet-active-color, var(--the7-accent-color));
}

/* Style « agrandir » */
.bullets-scale-up .owl-dot span {
	transition: transform .3s ease, background .3s ease;
}

.bullets-scale-up .owl-dot.active span {
	transform: scale(1.5);
}

/* Style « contour » */
.bullets-stroke .owl-dot span {
	transition: box-shadow .3s ease, background-color .3s ease;
}

.bullets-stroke .owl-dot.active span {
	background: transparent !important;
	box-shadow: 0 0 0 var(--bullet-border-width, 2px) var(--bullet-active-color, var(--the7-accent-color)) !important;
}

/* Style « remplissage » */
.bullets-fill-in .owl-dot span {
	transition: box-shadow .3s ease;
}

.bullets-fill-in .owl-dot:not(.active) span {
	background: transparent !important;
	box-shadow: inset 0 0 0 var(--bullet-border-width, 2px) var(--bullet-color, var(--the7-accent-color));
}

.bullets-fill-in .owl-dot:not(.active):hover span {
	box-shadow: inset 0 0 0 var(--bullet-border-width, 2px) var(--bullet-hover-color, var(--the7-accent-color));
}

.bullets-fill-in .owl-dot.active span {
	background: transparent !important;
	box-shadow: inset 0 0 0 calc(var(--bullet-border-width, 2px) + 10px) var(--bullet-active-color, var(--the7-accent-color));
}

/* Style « petit point cerclé » */
.bullets-small-dot-stroke .owl-dot {
	border-radius: 50%;
	transition: box-shadow .3s ease;
}

.bullets-small-dot-stroke .owl-dot span {
	transition: background-color .3s ease, transform .3s ease;
}

.bullets-small-dot-stroke .owl-dot.active span {
	transform: scale(.4);
}

.bullets-small-dot-stroke .owl-dot.active {
	box-shadow: 0 0 0 var(--bullet-border-width, 2px) var(--bullet-active-color, var(--the7-accent-color));
}

/* Style « carré » (ubax) */
.bullets-ubax .owl-dot span {
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	box-sizing: border-box;
	border: min(calc(var(--bullet-size, 10px) / 2), var(--bullet-border-width, 2px)) solid transparent;
	border-radius: 0 !important;
}

.bullets-ubax .owl-dot.active span {
	z-index: 1;
	border-color: var(--bullet-active-color, var(--the7-accent-color));
	background: transparent !important;
	transition: background-color .3s, border-color .3s;
}

/* Style « barre » (etefu) */
.bullets-etefu .elementor-owl-carousel-call {
	--bullet-border-width: 5px;
}

.bullets-etefu .owl-dot span {
	position: relative !important;
	display: block;
	overflow: hidden;
	width: 100%;
	height: var(--bullet-border-width, 100%) !important;
	border-radius: 0 !important;
	transition: background .3s;
}

.bullets-etefu .owl-dot span::before {
	position: absolute;
	inset: 0;
	background: var(--bullet-active-color, var(--the7-accent-color));
	content: "";
	opacity: 0;
	transform: translate3d(-100%, 0, 0);
	transition: transform .5s cubic-bezier(.2, 1, .3, 1), opacity .5s;
}

.bullets-etefu .owl-dot.active span::before {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/* Style « personnalisé » : traits */
.bullets-custom .elementor-owl-carousel-call .owl-dots .owl-dot {
	width: 30px;
	height: 5px;
	border-color: var(--the7-accent-color);
	background-color: var(--bullet-color, var(--the7-accent-color));
	transition: all .3s;
}

.bullets-custom .owl-dot span {
	border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
	.owl-carousel .owl-stage,
	.owl-carousel .owl-stage-outer {
		transition: none !important;
	}
}