/* -------------------------------------------------------------------------- */

/*	3. Helper Classes
/* -------------------------------------------------------------------------- */


/* Sections ---------------------------------- */

.jm-section {
	padding-block: var(--space-section-md);
}

.jm-section--sm {
	padding-block: var(--space-section-sm);
}

.jm-section--lg {
	padding-block: var(--space-section-lg);
}

.jm-section--dark {
	background-color: var(--color-bg-dark);
	color: var(--color-text-inverse);
}

/* Réduction du padding vertical d'une section (utile pour rapprocher 2 blocs). */
.jm-section--flush {
	padding-block: 0;
}

.jm-section--flush-top {
	padding-block-start: 0;
}

.jm-section--flush-bottom {
	padding-block-end: 0;
}

/* Containers -------------------------------- */

.jm-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.jm-container--large {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.jm-container--narrow {
	max-width: var(--container-narrow);
	margin-inline: auto;
}

.jm-container-full-width {
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
	padding-inline: 0;
}

/* Stacks ------------------------------------ */

.jm-stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.jm-stack--sm {
	gap: var(--space-4);
}

.jm-stack--lg {
	gap: var(--space-8);
}

/* Buttons ----------------------------------- */

@property --btn-shine-angle {
	syntax: "<angle>";
	initial-value: 110deg;
	inherits: false;
}

.jm-button,
.tnp input.tnp-submit,
.tnp button.tnp-submit,
.wpcf7 input.wpcf7-submit.jm-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--btn-min-height);
	padding: var(--btn-padding-y) var(--btn-padding-x);
	font-family: var(--font-base);
	font-size: var(--fs-sm);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	border: var(--btn-border-width) solid transparent;
	border-radius: var(--radius-full);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition:
		color var(--duration-fast) var(--ease),
		background var(--duration-fast) var(--ease),
		border-color var(--duration-fast) var(--ease),
		box-shadow var(--duration-base) var(--ease),
		transform var(--duration-fast) var(--ease),
		opacity var(--duration-fast) var(--ease);
}

:is(
	.jm-button--primary,
	.jm-button--secondary,
	.jm-button--secondary-white,
	.woocommerce-account button[type="submit"].button:not(.show-password-input),
	.woocommerce-account button.button.alt:not(.show-password-input),
	.woocommerce-account a.button.pay,
	.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content > a.button,
	.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button),
	.wc-block-components-totals-coupon__button.contained:not(.is-link)
) {
	max-width: var(--btn-max-width);
}

.jm-button:focus-visible,
.tnp input.tnp-submit:focus-visible,
.tnp button.tnp-submit:focus-visible,
.wpcf7 input.wpcf7-submit.jm-button:focus-visible {
	outline: var(--btn-focus-outline);
	outline-offset: 4px;
}

/* Primary — or métallique rétro 80s */
:is(
	.jm-button--primary,
	.woocommerce-account button[type="submit"].button:not(.show-password-input),
	.woocommerce-account button.button.alt:not(.show-password-input),
	.woocommerce-account a.button.pay,
	.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content > a.button,
	.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
) {
	position: relative;
	isolation: isolate;
	background: var(--btn-primary-bg);
	border-color: var(--btn-primary-border);
	color: var(--btn-primary-color);
	box-shadow: var(--btn-primary-shadow);
	transition:
		color var(--duration-fast) var(--ease),
		background var(--duration-fast) var(--ease),
		box-shadow var(--duration-base) var(--ease),
		transform var(--duration-fast) var(--ease),
		opacity var(--duration-fast) var(--ease);
}

/* Reflet blanc oblique sur la bordure (hover) */
:is(
	.jm-button--primary,
	.woocommerce-account button[type="submit"].button:not(.show-password-input),
	.woocommerce-account button.button.alt:not(.show-password-input),
	.woocommerce-account a.button.pay,
	.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content > a.button,
	.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
)::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--btn-border-width));
	border-radius: inherit;
	padding: var(--btn-border-width);
	background: conic-gradient(
		from var(--btn-shine-angle) at 50% 50%,
		transparent 0deg,
		rgb(255 255 255 / 0) 24deg,
		rgb(255 255 255 / 95%) 52deg,
		rgb(255 255 255 / 55%) 68deg,
		transparent 96deg,
		transparent 360deg
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask-composite: exclude;
	opacity: 0;
	pointer-events: none;
}

:is(
	.jm-button--primary,
	.woocommerce-account button[type="submit"].button:not(.show-password-input),
	.woocommerce-account button.button.alt:not(.show-password-input),
	.woocommerce-account a.button.pay,
	.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content > a.button,
	.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
):hover,
:is(
	.jm-button--primary,
	.woocommerce-account button[type="submit"].button:not(.show-password-input),
	.woocommerce-account button.button.alt:not(.show-password-input),
	.woocommerce-account a.button.pay,
	.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content > a.button,
	.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
):focus-visible {
	background: var(--btn-primary-hover-bg);
	border-color: var(--btn-primary-hover-border);
	color: var(--btn-primary-hover-color);
	box-shadow: var(--btn-primary-shadow-hover);
	text-decoration: none;
	opacity: 1;
}

:is(
	.jm-button--primary,
	.woocommerce-account button[type="submit"].button:not(.show-password-input),
	.woocommerce-account button.button.alt:not(.show-password-input),
	.woocommerce-account a.button.pay,
	.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content > a.button,
	.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
):hover::before,
:is(
	.jm-button--primary,
	.woocommerce-account button[type="submit"].button:not(.show-password-input),
	.woocommerce-account button.button.alt:not(.show-password-input),
	.woocommerce-account a.button.pay,
	.woocommerce-account.woocommerce-payment-methods .woocommerce-MyAccount-content > a.button,
	.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
):focus-visible::before {
	opacity: 1;
	animation: jm-btn-border-shine var(--btn-primary-shine-duration) var(--ease) forwards;
}

@keyframes jm-btn-border-shine {
	from {
		--btn-shine-angle: 110deg;
	}

	to {
		--btn-shine-angle: 470deg;
	}
}

:is(
	.jm-button--primary,
	.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
):disabled::before,
:is(
	.jm-button--primary,
	.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
).disabled::before,
:is(
	.jm-button--primary,
	.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
):disabled:hover::before,
:is(
	.jm-button--primary,
	.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
).disabled:hover::before {
	animation: none;
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {

	:is(
		.jm-button--primary,
		.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
	):hover::before,
	:is(
		.jm-button--primary,
		.wc-block-components-button.contained:not(.is-link):not(.wc-block-components-totals-coupon__button)
	):focus-visible::before {
		animation: none;
		opacity: 0.85;
		--btn-shine-angle: 110deg;
	}
}

/* Secondary — même forme, contour discret */
:is(
	.jm-button--secondary,
	.wpcf7 input.wpcf7-submit.jm-button--secondary,
	.wc-block-components-totals-coupon__button.contained:not(.is-link)
) {
	background-color: var(--btn-secondary-bg);
	border-color: var(--btn-secondary-border);
	color: var(--btn-secondary-color);
	box-shadow: none;
	transition:
		color var(--duration-fast) var(--ease),
		background-color var(--duration-fast) var(--ease),
		border-color var(--duration-base) var(--ease),
		box-shadow var(--duration-base) var(--ease);
}

:is(
	.jm-button--secondary,
	.wpcf7 input.wpcf7-submit.jm-button--secondary,
	.wc-block-components-totals-coupon__button.contained:not(.is-link)
):hover,
:is(
	.jm-button--secondary,
	.wpcf7 input.wpcf7-submit.jm-button--secondary,
	.wc-block-components-totals-coupon__button.contained:not(.is-link)
):focus-visible {
	background-color: var(--btn-secondary-hover-bg);
	border-color: var(--btn-secondary-hover-border);
	color: var(--btn-secondary-hover-color);
	box-shadow: var(--btn-secondary-shadow-hover);
	opacity: 1;
}

/* Variante sur fond sombre (hero, bannières overlay…) */
.jm-button--on-dark.jm-button--secondary {
	border-color: var(--btn-on-dark-border);
	color: var(--btn-on-dark-color);
}

.jm-button--on-dark.jm-button--secondary:hover,
.jm-button--on-dark.jm-button--secondary:focus-visible {
	background-color: var(--btn-on-dark-secondary-hover-bg);
	border-color: var(--btn-on-dark-secondary-hover-border);
	color: var(--btn-on-dark-secondary-hover-color);
	box-shadow: var(--btn-on-dark-secondary-shadow-hover);
}

/* Secondary blanc — fonds sombres (404, hero…) */
.jm-button--secondary-white {
	background-color: var(--btn-secondary-white-bg);
	border-color: var(--btn-secondary-white-border);
	color: var(--btn-secondary-white-color);
	box-shadow: none;
}

.jm-button--secondary-white:hover,
.jm-button--secondary-white:focus-visible {
	background-color: var(--btn-secondary-white-hover-bg);
	border-color: var(--btn-secondary-white-hover-border);
	color: var(--btn-secondary-white-hover-color);
	box-shadow: var(--btn-secondary-white-shadow-hover);
	opacity: 1;
	text-decoration: none;
}

/* États désactivés */
.jm-button:disabled,
.jm-button.disabled,
.jm-button:disabled:hover,
.jm-button.disabled:hover,
.tnp input.tnp-submit:disabled,
.tnp button.tnp-submit:disabled,
.wpcf7 input.wpcf7-submit.jm-button:disabled {
	opacity: var(--btn-disabled-opacity);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
	filter: grayscale(0.65);
}

/* Visibility -------------------------------- */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}


/* Wordpress text editor */
img.alignleft {
    margin: 0.3rem 0rem 2rem 0rem;
}
img.alignright {
    margin: 0.3rem 0rem 2rem 0rem;
}
@media (min-width: 782px) {
	img.alignleft {
		margin: 0.3rem 2rem 2rem 2rem;
	}
	img.alignright {
		margin: 0.3rem 2rem 2rem 2rem;
	}
}