/* Ochanta Slider. Les positions des calques sont générées par slider (balise <style> à côté du slider). */

.och-slider {
	--och-speed: 800ms;
	--och-nav: #ffffff;
	position: relative;
	container-type: inline-size;
	overflow: hidden;
	width: 100%;
	isolation: isolate;
	-webkit-tap-highlight-color: transparent;
}

/* Pleine largeur de l'écran, même dans un conteneur plus étroit (--och-vw : largeur sans la barre de défilement). */
.och-slider--full {
	width: var(--och-vw, 100vw);
	max-width: none;
	margin-left: calc(50% - var(--och-vw, 100vw) / 2);
	margin-right: 0;
}

.och-slider__track {
	display: grid;
	position: relative;
}

/* Toutes les diapositives occupent la même case : la hauteur est celle de la grille. */
.och-slide {
	grid-area: 1 / 1;
	position: relative;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	transition: none;
}

.och-slide.is-active,
.och-slide.is-leaving {
	visibility: visible;
	transition: opacity var(--och-speed) ease, transform var(--och-speed) cubic-bezier(.65, 0, .35, 1);
}

.och-slide.is-active {
	opacity: 1;
	z-index: 2;
}

.och-slide.is-leaving {
	opacity: 1;
	z-index: 1;
}

/* Glissement horizontal / vertical : --dir vaut 1 (suivante) ou -1 (précédente). */
.och-slider--slide .och-slide {
	opacity: 1;
	transform: translate3d(calc(var(--dir, 1) * 100%), 0, 0);
}

.och-slider--slide .och-slide.is-leaving {
	transform: translate3d(calc(var(--dir, 1) * -100%), 0, 0);
}

.och-slider--slide-up .och-slide {
	opacity: 1;
	transform: translate3d(0, calc(var(--dir, 1) * 100%), 0);
}

.och-slider--slide-up .och-slide.is-leaving {
	transform: translate3d(0, calc(var(--dir, 1) * -100%), 0);
}

.och-slider--slide .och-slide.is-active,
.och-slider--slide-up .och-slide.is-active {
	transform: none;
}

.och-slider--zoom .och-slide {
	transform: scale(1.12);
}

.och-slider--zoom .och-slide.is-active,
.och-slider--zoom .och-slide.is-leaving {
	transform: none;
}

.och-slider--none .och-slide.is-active,
.och-slider--none .och-slide.is-leaving {
	transition: none;
}

/* Pleine hauteur : la fenêtre moins --och-off (en-tête fixe), la grille centrée dedans. */
.och-slider--fullheight .och-slide {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: calc(100vh - var(--och-off, 0px));
	height: calc(100svh - var(--och-off, 0px));
}

/* Fond */
.och-slide__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}

/* Sélecteurs renforcés : Elementor (« .elementor img { height: auto } ») et certains thèmes écrasent sinon la
   hauteur des images, qui ne remplissent plus leur cadre (cadrage ignoré, image collée en haut). */
.och-slider img.och-slide__img,
.ochs-canvas img.och-slide__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
}

.och-slide.is-active .och-kb .och-slide__img {
	animation: och-kb var(--och-kb, 8000ms) ease-out both;
}

.och-px-scroll .och-slide__bg {
	inset: -8% 0;
	translate: 0 calc(var(--sy, 0) * -6%);
}

.och-slide__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.och-slide__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Grille des calques, centrée */
/* Pas de z-index ici : les calques de la grille et ceux de la diapositive (.och-slide__frame) s'empilent
   ensemble, dans l'ordre choisi. --u (pixel de grille) est posé sur la diapositive par le CSS du slider. */
.och-slide__stage {
	position: relative;
	margin: 0 auto;
	pointer-events: none;
}

.och-slide__frame {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Calques */
.och-layer {
	position: absolute;
	box-sizing: border-box;
	margin: 0;
	translate: calc(var(--mx, 0) * var(--depth, 0) * var(--u) * -.6) calc((var(--my, 0) * -.6 + var(--sy, 0) * -1.2) * var(--depth, 0) * var(--u));
	transition: translate .4s ease-out;
}

.och-layer--interactive {
	pointer-events: auto;
}

.och-layer__fx,
.och-layer__fx2 {
	width: 100%;
	height: 100%;
}

.och-layer__box {
	box-sizing: border-box;
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	transition: transform .3s ease, filter .3s ease, box-shadow .3s ease, color .25s ease, background-color .25s ease, border-color .25s ease;
}

.och-layer--text .och-layer__box {
	font-family: inherit;
	overflow-wrap: break-word;
}

.och-layer__box > :last-child {
	margin-bottom: 0;
}

/* Colonne flex : texte centré verticalement, l'alignement horizontal reste celui du calque (text-align). */
.och-layer__btn {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
}

.och-layer--image .och-layer__box {
	overflow: hidden;
}

.och-slider img.och-layer__img,
.ochs-canvas img.och-layer__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	border: 0;
	box-shadow: none;
	object-fit: cover;
	pointer-events: none;
}

.och-layer__link {
	color: inherit;
	text-decoration: none;
}

.och-layer__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Survol */
.och-hover-zoom:hover .och-layer__box { transform: scale(1.06); }
.och-hover-lift:hover .och-layer__box { transform: translateY(calc(-4 * var(--u))); box-shadow: 0 calc(12 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, .25); }
.och-hover-bright:hover .och-layer__box { filter: brightness(1.15); }
.och-hover-shadow:hover .och-layer__box { box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .35); }
.och-hover-tilt:hover .och-layer__box { transform: rotate(-3deg) scale(1.03); }

/* Texte découpé mot par mot ou lettre par lettre (par le script). Sans script, il s'affiche quand même. */
.och-split:not(.is-split) {
	opacity: 0;
	animation: och-show 0s 1.5s forwards;
}

.och-u,
.och-w {
	display: inline-block;
}

.och-w {
	white-space: nowrap;
}

/* Navigation */
.och-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .28);
	color: var(--och-nav);
	cursor: pointer;
	opacity: .85;
	transition: opacity .2s, background-color .2s;
}

.och-slider__arrow:hover,
.och-slider__arrow:focus-visible {
	opacity: 1;
	background: rgba(0, 0, 0, .5);
}

.och-slider__arrow--prev { left: 16px; }
.och-slider__arrow--next { right: 16px; }

.och-slider__arrow svg {
	width: 22px;
	height: 22px;
}

.och-slider__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	pointer-events: none;
}

.och-slider__dots {
	display: flex;
	gap: 8px;
	pointer-events: auto;
}

.och-slider__dot {
	width: 11px;
	height: 11px;
	padding: 0;
	border: 2px solid var(--och-nav);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	opacity: .8;
	transition: background-color .2s, transform .2s;
}

.och-slider__dot[aria-current="true"] {
	background: var(--och-nav);
	transform: scale(1.15);
	opacity: 1;
}

.och-slider__pause {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .28);
	color: var(--och-nav);
	cursor: pointer;
	pointer-events: auto;
}

.och-slider__pause svg {
	width: 12px;
	height: 12px;
}

.och-slider__progress {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 5;
	height: var(--och-bar-h, 3px);
	width: 100%;
	background: var(--och-bar, var(--och-nav));
	opacity: .85;
	transform: scaleX(var(--och-p, 0));
	transform-origin: left;
	pointer-events: none;
}

.och-slider--bar-top .och-slider__progress {
	top: 0;
	bottom: auto;
}

.och-slider--nav-left .och-slider__bar {
	justify-content: flex-start;
	padding: 0 24px;
}

.och-slider--nav-right .och-slider__bar {
	justify-content: flex-end;
	padding: 0 24px;
}

/* Traits : le trait actif se remplit pendant la durée d'affichage (--och-p, posé par le script). */
.och-slider--dots-lines .och-slider__dots {
	gap: 6px;
}

.och-slider--dots-lines .och-slider__dot {
	position: relative;
	width: 32px;
	height: 4px;
	border: 0;
	border-radius: 2px;
	background: color-mix(in srgb, var(--och-nav) 40%, transparent);
	overflow: hidden;
	transform: none;
}

.och-slider--dots-lines .och-slider__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--och-nav);
	transform: scaleX(0);
	transform-origin: left;
}

.och-slider--dots-lines .och-slider__dot[aria-current="true"] {
	background: color-mix(in srgb, var(--och-nav) 40%, transparent);
	transform: none;
}

.och-slider--dots-lines .och-slider__dot[aria-current="true"]::after {
	transform: scaleX(var(--och-p, 1));
}

/* Numéros */
.och-slider--dots-numbers .och-slider__dot {
	width: 26px;
	height: 26px;
	color: var(--och-nav);
	font: 600 12px/22px system-ui, sans-serif;
	text-align: center;
}

.och-slider--dots-numbers .och-slider__dot[aria-current="true"] {
	color: #1d2327;
	transform: none;
}

.och-slider :focus-visible {
	outline: 2px solid var(--och-nav);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.och-slider__arrow {
		width: 36px;
		height: 36px;
		margin-top: -18px;
	}
	.och-slider__arrow--prev { left: 8px; }
	.och-slider__arrow--next { right: 8px; }
	.och-slider__arrow svg {
		width: 18px;
		height: 18px;
	}
	.och-slider__bar { bottom: 10px; }
}

/* Effets d'entrée (la sortie rejoue la même animation à l'envers). --u : pixel de grille. */
@keyframes och-show { to { opacity: 1; } }
@keyframes och-fade { from { opacity: 0; } }
@keyframes och-fade-up { from { opacity: 0; transform: translate3d(0, calc(60 * var(--u, 1px)), 0); } }
@keyframes och-fade-down { from { opacity: 0; transform: translate3d(0, calc(-60 * var(--u, 1px)), 0); } }
@keyframes och-fade-left { from { opacity: 0; transform: translate3d(calc(80 * var(--u, 1px)), 0, 0); } }
@keyframes och-fade-right { from { opacity: 0; transform: translate3d(calc(-80 * var(--u, 1px)), 0, 0); } }
@keyframes och-zoom-in { from { opacity: 0; transform: scale(.5); } }
@keyframes och-zoom-out { from { opacity: 0; transform: scale(1.5); } }
@keyframes och-rotate { from { opacity: 0; transform: rotate(-25deg) scale(.7); } }
@keyframes och-flip-x { from { opacity: 0; transform: perspective(600px) rotateX(90deg); } }
@keyframes och-flip-y { from { opacity: 0; transform: perspective(600px) rotateY(90deg); } }
@keyframes och-blur { from { opacity: 0; filter: blur(20px); transform: scale(1.08); } }
@keyframes och-wipe-right { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes och-wipe-left { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes och-wipe-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes och-wipe-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes och-bounce {
	0% { opacity: 0; transform: translate3d(0, calc(-120 * var(--u, 1px)), 0); }
	55% { opacity: 1; transform: translate3d(0, calc(14 * var(--u, 1px)), 0); }
	75% { transform: translate3d(0, calc(-6 * var(--u, 1px)), 0); }
	90% { transform: translate3d(0, calc(2 * var(--u, 1px)), 0); }
	100% { transform: none; }
}
@keyframes och-skew { from { opacity: 0; transform: translate3d(calc(-80 * var(--u, 1px)), 0, 0) skewX(30deg); } }

/* Mouvements en boucle (--amp : distance, --amps : échelle, --ampd : angle) */
@keyframes och-loop-float { from { transform: translateY(0); } to { transform: translateY(calc(-1 * var(--amp, 10px))); } }
@keyframes och-loop-drift { from { transform: translateX(calc(-1 * var(--amp, 10px))); } to { transform: translateX(var(--amp, 10px)); } }
@keyframes och-loop-pulse { from { transform: scale(1); } to { transform: scale(var(--amps, 1.1)); } }
@keyframes och-loop-spin { to { transform: rotate(360deg); } }
@keyframes och-loop-sway { from { transform: rotate(calc(-1 * var(--ampd, 10deg))); } to { transform: rotate(var(--ampd, 10deg)); } }
@keyframes och-loop-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(calc(-1 * var(--amp, 10px))); }
	40% { transform: translateX(var(--amp, 10px)); }
	60% { transform: translateX(calc(-.5 * var(--amp, 10px))); }
	80% { transform: translateX(calc(.5 * var(--amp, 10px))); }
}
@keyframes och-loop-bounce {
	0%, 50%, 100% { transform: translateY(0); }
	25% { transform: translateY(calc(-1 * var(--amp, 10px))); }
	38% { transform: translateY(calc(-.35 * var(--amp, 10px))); }
}
@keyframes och-loop-blink { from { opacity: 1; } to { opacity: .25; } }
@keyframes och-kb { from { transform: scale(1); } to { transform: scale(1.15); } }

@media (prefers-reduced-motion: reduce) {
	.och-slider *,
	.och-slider *::before,
	.och-slider *::after {
		animation: none !important;
		transition-duration: 0s !important;
	}
	.och-layer {
		translate: none;
	}
	.och-split:not(.is-split) {
		opacity: 1;
	}
}