/*
 * Ochanta — base commune des widgets compatibles The7 (titres, boutons, images, logo).
 *
 * Les couleurs et tailles viennent, dans l'ordre :
 * 1. des réglages du widget (CSS généré par Elementor) ;
 * 2. des variables --the7-* du site (uploads/the7-css/css-vars.css, généré par The7 avec
 *    les réglages du site et conservé après son retrait) ;
 * 3. des couleurs globales Elementor, puis de valeurs neutres.
 */

/* ------------------------------------------------------------------ *
 * Titre (the7-heading)
 * ------------------------------------------------------------------ */

.the7-heading-title {
	margin: 0;
	padding: 0;
}

.the7-heading-title,
.the7-heading-title a {
	transition: color .3s ease, background-color .3s ease;
}

.the7-heading-title a,
.the7-heading-title a:hover {
	color: inherit;
	text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * Bouton (the7_button_widget et boutons des boîtes)
 * ------------------------------------------------------------------ */

.box-button {
	--btn-icon-spacing: 7px;
	--och-btn-font-family: var(--the7-btn-s-font-family, inherit);
	--och-btn-font-size: var(--the7-btn-s-font-size, 13px);
	--och-btn-line-height: var(--the7-btn-s-line-height, 1);
	--och-btn-padding: var(--the7-btn-s-padding, 10px 20px);
	--och-btn-radius: var(--the7-btn-s-border-radius, 3px);
	--och-btn-border-width: var(--the7-btn-s-border-width, 0);
	--och-btn-border-style: var(--the7-btn-s-border-style, solid);
	--och-btn-transform: var(--the7-btn-s-text-transform, none);
	--och-btn-spacing: var(--the7-btn-s-letter-spacing, normal);
	--och-btn-icon: var(--the7-btn-s-icon-size, 1em);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	box-sizing: border-box;
	padding: var(--och-btn-padding);
	border-width: var(--och-btn-border-width);
	border-style: var(--och-btn-border-style);
	border-color: var(--the7-btn-border-color, transparent);
	border-radius: var(--och-btn-radius);
	background: var(--the7-btn-bg, var(--the7-btn-bg-color, var(--e-global-color-accent, #c19d56)));
	box-shadow: var(--the7-btn-shadow, none);
	color: var(--the7-btn-color, #fff);
	font-family: var(--och-btn-font-family);
	font-size: var(--och-btn-font-size);
	line-height: var(--och-btn-line-height);
	letter-spacing: var(--och-btn-spacing);
	text-align: center;
	text-decoration: none;
	text-transform: var(--och-btn-transform);
	cursor: pointer;
	transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* Tailles Elementor → tailles de boutons du site The7 (S, M, L, LG, XL). */
.box-button.elementor-size-sm {
	--och-btn-font-family: var(--the7-btn-m-font-family, inherit);
	--och-btn-font-size: var(--the7-btn-m-font-size, 15px);
	--och-btn-line-height: var(--the7-btn-m-line-height, 1);
	--och-btn-padding: var(--the7-btn-m-padding, 12px 24px);
	--och-btn-radius: var(--the7-btn-m-border-radius, 3px);
	--och-btn-border-width: var(--the7-btn-m-border-width, 0);
	--och-btn-border-style: var(--the7-btn-m-border-style, solid);
	--och-btn-transform: var(--the7-btn-m-text-transform, none);
	--och-btn-spacing: var(--the7-btn-m-letter-spacing, normal);
	--och-btn-icon: var(--the7-btn-m-icon-size, 1em);
}

.box-button.elementor-size-md {
	--och-btn-font-family: var(--the7-btn-l-font-family, inherit);
	--och-btn-font-size: var(--the7-btn-l-font-size, 16px);
	--och-btn-line-height: var(--the7-btn-l-line-height, 1);
	--och-btn-padding: var(--the7-btn-l-padding, 15px 30px);
	--och-btn-radius: var(--the7-btn-l-border-radius, 4px);
	--och-btn-border-width: var(--the7-btn-l-border-width, 0);
	--och-btn-border-style: var(--the7-btn-l-border-style, solid);
	--och-btn-transform: var(--the7-btn-l-text-transform, none);
	--och-btn-spacing: var(--the7-btn-l-letter-spacing, normal);
	--och-btn-icon: var(--the7-btn-l-icon-size, 1em);
}

.box-button.elementor-size-lg {
	--och-btn-font-family: var(--the7-btn-lg-font-family, inherit);
	--och-btn-font-size: var(--the7-btn-lg-font-size, 18px);
	--och-btn-line-height: var(--the7-btn-lg-line-height, 1);
	--och-btn-padding: var(--the7-btn-lg-padding, 20px 40px);
	--och-btn-radius: var(--the7-btn-lg-border-radius, 5px);
	--och-btn-border-width: var(--the7-btn-lg-border-width, 0);
	--och-btn-border-style: var(--the7-btn-lg-border-style, solid);
	--och-btn-transform: var(--the7-btn-lg-text-transform, none);
	--och-btn-spacing: var(--the7-btn-lg-letter-spacing, normal);
	--och-btn-icon: var(--the7-btn-lg-icon-size, 1em);
}

.box-button.elementor-size-xl {
	--och-btn-font-family: var(--the7-btn-xl-font-family, inherit);
	--och-btn-font-size: var(--the7-btn-xl-font-size, 20px);
	--och-btn-line-height: var(--the7-btn-xl-line-height, 1);
	--och-btn-padding: var(--the7-btn-xl-padding, 25px 50px);
	--och-btn-radius: var(--the7-btn-xl-border-radius, 6px);
	--och-btn-border-width: var(--the7-btn-xl-border-width, 0);
	--och-btn-border-style: var(--the7-btn-xl-border-style, solid);
	--och-btn-transform: var(--the7-btn-xl-text-transform, none);
	--och-btn-spacing: var(--the7-btn-xl-letter-spacing, normal);
	--och-btn-icon: var(--the7-btn-xl-icon-size, 1em);
}

.box-button:hover,
.box-button:focus,
.box-hover:hover .box-button {
	border-color: var(--the7-btn-border-hover-color, var(--the7-btn-border-color, transparent));
	background: var(--the7-btn-hover-bg, var(--the7-btn-hover-bg-color, var(--the7-btn-bg-color, var(--e-global-color-accent, #c19d56))));
	box-shadow: var(--the7-btn-shadow-hover, var(--the7-btn-shadow, none));
	color: var(--the7-btn-hover-color, var(--the7-btn-color, #fff));
}

.box-button:visited {
	color: var(--the7-btn-color, #fff);
}

/* Toute la boîte est cliquable : le bouton n'est qu'un repère visuel. */
.box-hover .box-button {
	pointer-events: none;
}

.box-button i,
.box-button svg {
	order: 1;
	margin: 0 0 0 var(--btn-icon-spacing);
	font-size: var(--och-btn-icon);
	transition: color .3s ease, fill .3s ease;
}

.box-button i {
	color: var(--box-button-icon-color, inherit);
}

.box-button svg {
	width: var(--btn-icon-size, 1em);
	height: auto;
	fill: var(--box-button-icon-color, currentColor);
}

.elementor-element .box-button.no-text {
	--btn-icon-spacing: 0px;
}

.elementor-widget-the7_button_widget .elementor-button-wrapper {
	display: block;
}

.elementor-widget-the7_button_widget.elementor-align-justify .box-button,
.elementor-widget-the7_button_widget.elementor-align-justify .elementor-button-wrapper > * {
	width: 100%;
}

/* ------------------------------------------------------------------ *
 * Images à proportions réglables (gabarits Image Size / Aspect Ratio)
 * ------------------------------------------------------------------ */

.img-css-resize-wrapper {
	position: relative;
	display: block;
	width: 100%;
	line-height: 0;
	aspect-ratio: var(--the7-img-ratio);
	background-position: center;
	background-repeat: no-repeat;
	background-size: var(--the7-img-object-fit, cover);
}

img.aspect {
	--ratio: auto;
	aspect-ratio: var(--the7-img-ratio, var(--ratio));
}

.img-css-resize-wrapper img {
	width: var(--the7-img-width, inherit);
	height: var(--the7-img-height, auto);
	max-width: var(--the7-img-max-width, 100%);
	max-height: var(--the7-img-max-height);
	object-fit: var(--the7-img-object-fit, cover);
	aspect-ratio: var(--the7-img-ratio, var(--ratio));
}

.img-css-resize-wrapper img.the7-svg-image {
	width: 100%;
}

/* ------------------------------------------------------------------ *
 * Logo (the7-logo-widget) — la 2e image sert à l'en-tête collant (lot 2)
 * ------------------------------------------------------------------ */

.elementor-widget-the7-logo-widget .elementor-widget-container {
	display: flex;
}

.the7-logo-wrap {
	position: relative;
	text-align: center;
	transition: all .3s ease;
}

.elementor-widget-the7-logo-widget img {
	position: static;
	transition: all .3s ease;
}

.the7-logo-wrap img:nth-child(2) {
	position: absolute;
	left: 0;
	visibility: hidden;
	opacity: 0;
}

.the7-e-sticky-active .sticky-logo-y .the7-logo-wrap img:nth-child(1):not(:last-child) {
	position: absolute;
	visibility: hidden;
	opacity: 0;
}

.the7-e-sticky-active .sticky-logo-y .the7-logo-wrap img:nth-child(2) {
	position: relative;
	visibility: visible;
	opacity: 1;
}

.the7-e-sticky-active .sticky-logo-y .the7-logo-wrap.img-css-resize-wrapper {
	aspect-ratio: var(--sticky-aspect-ratio);
}

.the7-logo-wrap.img-css-resize-wrapper img:nth-child(2) {
	width: var(--sticky-width, var(--ratio-img-width, inherit));
	height: var(--sticky-height, var(--height, auto));
	max-width: var(--sticky-max-width, var(--max-width, 100%));
	max-height: var(--sticky-max-height, var(--max-height));
	object-fit: var(--sticky-object-fit, var(--object-fit, cover));
	aspect-ratio: var(--sticky-aspect-ratio, var(--ratio));
}

/* ------------------------------------------------------------------ *
 * Commun
 * ------------------------------------------------------------------ */

.the7-elementor-widget .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}