/*
 * Joblia Effects: only what Elementor free cannot express natively.
 * Layout, colours and typography stay in Elementor global classes and variables.
 * Selectors target those global class names; breakpoints mirror Elementor's (tablet 1099px, mobile 699px).
 */

/* Typography refinements from the design */
.title-hero,
.title-section,
.pack-name {
	text-wrap: balance;
}

.title-card,
.text-lead,
.text-inverse,
.text-body,
.testimonial-quote {
	text-wrap: pretty;
}

/* Hero accent: write the words in italics in the Elementor heading to get this treatment */
.title-hero em {
	font-style: normal;
	white-space: nowrap;
	color: var(--color-brand-deep);
	background-image: linear-gradient(105deg, var(--color-brand-deep) 38%, var(--color-brand-light) 45%, var(--color-hero-shine) 50%, var(--color-brand-light) 55%, var(--color-brand-deep) 62%);
	background-size: 300% 100%;
	background-position: 100% 0;
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: jfx-hero-shine 3.6s ease-in-out infinite;
}

.title-hero em:last-of-type {
	animation-delay: 0.45s;
}

@keyframes jfx-hero-shine {
	0% {
		background-position: 100% 0;
	}

	55%,
	100% {
		background-position: 0% 0;
	}
}

/* Statistics: the hover state of the card reaches its number and accent bar */
.stat-item .stat-number {
	transition: color 240ms;
}

.stat-item:hover .stat-number {
	color: var(--color-brand-deep);
}

.stat-item .stat-accent {
	transition: width 240ms;
}

.stat-item:hover .stat-accent {
	width: 72px;
}

/* Horizontal scrollers: snapping and hidden scrollbars */
.list-testimonials {
	scroll-snap-type: x mandatory;
	scroll-padding: 0 16px;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.list-testimonials > .card-testimonial {
	scroll-snap-align: start;
}

.list-testimonials::-webkit-scrollbar,
.search-popular::-webkit-scrollbar {
	display: none;
}

.search-popular {
	scrollbar-width: none;
}

/* Job search widget */
.elementor-widget-joblia-search {
	width: 100%;
}

/* Elementor caps widget wrappers at max-width: 100%, so the design's 1040px limit sits on the form. */
.jfx-search.jfx-search--full {
	max-width: none;
	margin: 0;
}

.jfx-search.jfx-search--left {
	margin: 0;
}

.jfx-search {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	max-width: 1040px;
	margin: 8px auto 0;
	padding: 8px;
	text-align: start;
	background: var(--color-white);
	border: 1px solid var(--color-border-strong);
	border-radius: 18px;
	box-shadow: 0 1px 2px var(--color-shadow), 0 8px 24px var(--color-shadow);
}

.jfx-search .jfx-search__field {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 0%;
	min-width: 0;
	margin: 0;
	padding: 8px 16px;
	border-radius: 12px;
	cursor: text;
}

.jfx-search .jfx-search__field--narrow {
	flex: 0.8 1 0%;
}

.jfx-search .jfx-search__field:focus-within {
	background: var(--color-mist-soft);
}

.jfx-search .jfx-search__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--color-brand);
}

.jfx-search .jfx-search__text {
	display: flex;
	flex-direction: column;
	flex: 1 1 0%;
	min-width: 0;
}

.jfx-search .jfx-search__label {
	font-family: var(--font-body), sans-serif;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-ink);
}

.jfx-search .jfx-search__input,
.jfx-search .jfx-search__select {
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: var(--font-body), sans-serif;
	font-size: 16px;
	line-height: 1.3;
	color: var(--color-ink);
	outline: none;
}

.jfx-search .jfx-search__select {
	appearance: auto;
	cursor: pointer;
}

.jfx-search .jfx-search__input:focus,
.jfx-search .jfx-search__select:focus {
	border: 0;
	background: transparent;
	box-shadow: none;
	outline: none;
}

.jfx-search .jfx-search__input::placeholder {
	color: var(--color-text-muted);
	opacity: 1;
}

.jfx-search .jfx-search__divider {
	align-self: stretch;
	flex: 0 0 auto;
	width: 1px;
	margin: 8px 0;
	background: var(--color-border);
}

.jfx-search .jfx-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 52px;
	margin: 0;
	padding: 0 24px;
	border: 2px solid transparent;
	border-radius: 999px;
	background: var(--color-brand);
	font-family: var(--font-body), sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-white);
	cursor: pointer;
	transition: background-color 160ms, color 160ms;
}

.jfx-search .jfx-search__submit:hover,
.jfx-search .jfx-search__submit:focus {
	background: var(--color-brand-deep);
	color: var(--color-white);
}

.jfx-search .jfx-search__submit:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
}


/* Dynamic blocks print the design's own element tree; the widget wrapper must not add a layout box. */
body:not(.elementor-editor-active) .elementor-widget-joblia-block {
	display: contents;
}

/* Hidden by filters, tabs and pagination; matches the native "is-hidden" global class. */
.elementor [class].is-hidden {
	display: none;
}

/*
 * WPForms forms (Contact, Publier une offre) in the design's form style: WPForms' own style variables
 * set to the design tokens, plus the spacing of the design's .form-field / .form-row.
 */
.elementor .wpforms-container.wpforms-render-modern {
	--wpforms-field-border-radius: 12px;
	--wpforms-field-border-size: 1px;
	--wpforms-field-border-style: solid;
	--wpforms-field-border-color: #c9c9c9;
	--wpforms-field-background-color: #ffffff;
	--wpforms-field-text-color: #1e1e27;
	--wpforms-field-menu-color: #ffffff;
	--wpforms-label-color: #1e1e27;
	--wpforms-label-sublabel-color: #5e5f5c;
	--wpforms-label-error-color: #c20033;
	--wpforms-button-border-radius: 999px;
	--wpforms-button-border-size: 2px;
	--wpforms-button-border-style: solid;
	--wpforms-button-border-color: transparent;
	--wpforms-button-background-color: #df0139;
	--wpforms-button-text-color: #ffffff;
	--wpforms-field-size-input-height: 52px;
	--wpforms-field-size-input-spacing: 20px;
	--wpforms-field-size-font-size: 16px;
	--wpforms-field-size-line-height: 1.3;
	--wpforms-field-size-padding-h: 16px;
	--wpforms-label-size-font-size: 14px;
	--wpforms-label-size-line-height: 1.3;
	--wpforms-label-size-sublabel-font-size: 13px;
	--wpforms-button-size-font-size: 16px;
	--wpforms-button-size-height: 52px;
	--wpforms-button-size-padding-h: 24px;
	--wpforms-button-size-margin-top: 4px;
	margin: 0;
}

.elementor .wpforms-container.wpforms-render-modern .wpforms-field {
	padding: 0 0 20px;
}

.elementor .wpforms-container.wpforms-render-modern .wpforms-field-label {
	margin-bottom: 8px;
	font-weight: 700;
}

.elementor .wpforms-container.wpforms-render-modern .wpforms-field-label .wpforms-required-label {
	color: #c20033;
}

/* Two fields side by side, 16px apart, as in the design's .form-row. */
.elementor .wpforms-container.wpforms-render-modern .wpforms-field.wpforms-one-half {
	width: calc(50% - 8px);
	margin-left: 16px;
}

.elementor .wpforms-container.wpforms-render-modern .wpforms-field.wpforms-one-half.wpforms-first {
	margin-left: 0;
}

.elementor .wpforms-container.wpforms-render-modern .wpforms-field input,
.elementor .wpforms-container.wpforms-render-modern .wpforms-field select,
.elementor .wpforms-container.wpforms-render-modern .wpforms-field textarea {
	padding-top: 12px;
	padding-bottom: 12px;
	box-shadow: none;
}

.elementor .wpforms-container.wpforms-render-modern .wpforms-field textarea {
	min-height: 128px;
	line-height: 1.6;
}

.elementor .wpforms-container.wpforms-render-modern .wpforms-field input:focus,
.elementor .wpforms-container.wpforms-render-modern .wpforms-field select:focus,
.elementor .wpforms-container.wpforms-render-modern .wpforms-field textarea:focus {
	border-color: #df0139;
	outline: none;
	box-shadow: 0 0 0 3px #fdecf1;
}

.elementor .wpforms-container.wpforms-render-modern .wpforms-submit-container {
	padding: 0;
}

.elementor .wpforms-container.wpforms-render-modern button[type="submit"] {
	min-width: 0;
	font-weight: 700;
	transition: background-color 160ms;
}

.elementor .wpforms-container.wpforms-render-modern button[type="submit"]:hover,
.elementor .wpforms-container.wpforms-render-modern button[type="submit"]:focus {
	background-color: #c20033;
}

.elementor .wpforms-container.wpforms-render-modern .wpforms-confirmation-container-full {
	padding: 20px 24px;
	border: 1px solid #f4bfce;
	border-radius: 12px;
	background: #fdecf1;
	color: #1e1e27;
	font-size: 16px;
	line-height: 1.6;
}

.elementor .wpforms-container.wpforms-render-modern .wpforms-confirmation-container-full p {
	margin: 0 0 4px;
}

@media (max-width: 699px) {
	/* Phones: one field per row, as in the design. */
	.elementor .wpforms-container.wpforms-render-modern .wpforms-field.wpforms-one-half {
		width: 100%;
		margin-left: 0;
	}

	.elementor .wpforms-container.wpforms-render-modern button[type="submit"] {
		width: 100%;
	}
}

/* Article cards open their article from anywhere on the card (effects.js). */
.elementor .jfx-card-link {
	cursor: pointer;
}

/*
 * "Postuler par e-mail" (Offre): effects.js puts the design's box in a native dialog, which brings the
 * backdrop, Escape and focus handling. The dialog itself is only a transparent frame; the box keeps its classes.
 */
.elementor .jfx-dialog {
	width: min(520px, calc(100% - 40px));
	max-width: none;
	max-height: calc(100% - 40px);
	margin: auto;
	padding: 0;
	border: 0;
	background: none;
	overflow: auto;
}

.elementor .jfx-dialog::backdrop {
	background: rgba(30, 30, 39, 0.6);
}

/* The box is positioned for the design's preview; inside the dialog it simply fills the frame. */
.elementor .jfx-dialog > .apply-dialog {
	position: static;
	width: 100%;
	margin: 0;
}

.elementor .jfx-dialog [data-done="true"] {
	border-color: #df0139;
	color: #c20033;
}

/* Sort widget */
.jfx-sort {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: var(--font-body), sans-serif;
	font-size: 14px;
	color: var(--color-text-muted);
}

.jfx-sort .jfx-sort__select {
	width: auto;
	min-height: 40px;
	height: auto;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--color-border-strong);
	border-radius: 999px;
	background-color: var(--color-white);
	box-shadow: none;
	font-family: var(--font-body), sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-ink);
	appearance: auto;
	cursor: pointer;
}

/* "Partie du code" navigation select (Code du travail, tablet and mobile) */
.elementor-widget-joblia-code-nav {
	width: 100%;
}

.jfx-codenav {
	width: 100%;
	min-height: 52px;
	height: auto;
	margin: 0;
	padding: 12px 16px;
	border: 1px solid var(--color-border-strong);
	border-radius: 12px;
	background-color: var(--color-white);
	box-shadow: none;
	font-family: var(--font-body), sans-serif;
	font-size: 16px;
	line-height: 1.3;
	color: var(--color-ink);
	appearance: auto;
	cursor: pointer;
}

.jfx-codenav:focus {
	border-color: var(--color-brand);
	outline: none;
	box-shadow: 0 0 0 3px var(--color-brand-light);
}

/* Selected article type (Actualités) */
/* Elementor prints global classes as .elementor .class, so state rules need one more class to win. */
.elementor .e-con.news-filter-option[aria-pressed="true"] {
	border-color: var(--color-brand);
	background-color: var(--color-brand);
	box-shadow: 0 1px 2px var(--color-shadow), 0 8px 24px var(--color-shadow);
}

.news-filter-option[aria-pressed="true"] .news-filter-icon {
	background-color: var(--color-white);
}

.news-filter-option[aria-pressed="true"] :is(.news-filter-label, .news-filter-count) {
	color: var(--color-white);
}

/* Hover states that reach a child element */
.card-recruiter:hover .recruiter-arrow {
	border-color: var(--color-brand);
	background-color: var(--color-brand);
}

.card-recruiter:hover .recruiter-arrow > * {
	color: var(--color-white);
}

.salary-bar-row:hover .salary-bar-label,
.role-item:hover .role-name {
	color: var(--color-brand-deep);
}

/* Entreprises header: glow and diagonal lines (Elementor has no repeating gradients) */
.elementor .e-con.directory-head {
	background-image: radial-gradient(closest-side, var(--color-premium-glow), var(--color-transparent)), repeating-linear-gradient(58deg, var(--color-banner-line) 0 1px, var(--color-transparent) 1px 14px);
	background-repeat: no-repeat, repeat;
	background-size: 760px 760px, auto;
	background-position: right -240px top -360px, 0 0;
}

/* Offer card covers: diagonal lines (Elementor has no repeating gradients) */
.elementor .e-con.cover-ink,
.elementor .e-con.cover-ink-2,
.elementor .e-con.cover-ink-2-2 {
	background-image: repeating-linear-gradient(58deg, rgba(255, 255, 255, 0.07) 0 1px, var(--color-transparent) 1px 14px);
}

/* Share buttons (offer page): the icon follows the button's hover colour */
.share-link .share-icon {
	transition: color 160ms;
}

.share-link:hover .share-icon {
	color: var(--color-white);
}

/* À propos statistics: the card hover reaches its figure */
.stat-item .stat-figure {
	transition: color 240ms;
}

.stat-item:hover .stat-figure {
	color: var(--color-brand-deep);
}

.email-big:hover {
	text-underline-offset: 3px;
}

/* Client logo marquee (Publier une offre); Elementor containers default to width: 100%. */
.elementor .e-con.marquee-track {
	width: max-content;
}

.marquee {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
	animation: jfx-marquee 38s linear infinite;
}

.marquee-track:nth-child(2) {
	animation-duration: 46s;
	animation-direction: reverse;
}

.marquee:hover .marquee-track {
	animation-play-state: paused;
}

@keyframes jfx-marquee {
	from {
		transform: translateX(0%);
	}

	to {
		transform: translateX(-50%);
	}
}

/* CV "building" illustration (Créer un CV); the steps are driven by effects.js */
.jfx-build [data-jfx-seq] {
	transition: transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jfx-build [data-jfx-kind="bar"] {
	transform-origin: left center;
}

.jfx-build [data-jfx-kind="bar"][data-jfx-on="false"] {
	transform: scaleX(0);
	opacity: 0;
}

.jfx-build [data-jfx-kind="pop"][data-jfx-on="false"] {
	transform: scale(0.4);
	opacity: 0;
}

.jfx-build [data-jfx-kind="up"][data-jfx-on="false"] {
	transform: translateY(16px);
	opacity: 0;
}

@media (max-width: 699px) {
	.jfx-sort .jfx-sort__label {
		display: none;
	}

	.list-testimonials {
		scroll-padding: 0 20px;
	}

	.elementor-widget-joblia-search {
		align-self: stretch;
	}

	.jfx-search {
		max-width: none;
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}

	.jfx-search .jfx-search__divider {
		width: auto;
		height: 1px;
		margin: 0 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.title-hero em,
	.marquee-track {
		animation: none;
	}

	.jfx-build [data-jfx-seq] {
		transition: none;
	}

	.list-testimonials {
		scroll-behavior: auto;
	}
}