/* =========================================================
   Widget « Nos offres d'emploi » — liste filtrable + fiche.

   Toutes les propriétés « contrôlables » (couleurs, fonds, bordures)
   passent par des variables --ecmp-j-* et sont appliquées en !important :
   les valeurs proviennent soit des contrôles Elementor du widget, soit des
   défauts ci-dessous — jamais du kit Elementor global du site, qui ne doit
   pas s'imposer sur le widget.
   ========================================================= */

.ecmp-job {
	--ecmp-j-accent: #769C26;
	--ecmp-j-accent-soft: #eef3df;
	--ecmp-j-icon-ink: var(--ecmp-j-accent);
	--ecmp-j-icon-bg: var(--ecmp-j-accent-soft);

	--ecmp-j-title: #0f172a;

	--ecmp-j-tab-bg: #ffffff;
	--ecmp-j-tab-ink: #475569;
	--ecmp-j-tab-border: rgba(15, 23, 42, 0.12);
	--ecmp-j-tab-bg-active: #769C26;
	--ecmp-j-tab-ink-active: #ffffff;
	--ecmp-j-tab-border-active: #769C26;
	--ecmp-j-tab-radius: 10px;
	--ecmp-j-tab-count-bg: rgba(15, 23, 42, 0.08);

	--ecmp-j-row-bg: #ffffff;
	--ecmp-j-row-bg-hover: #f8fafc;
	--ecmp-j-row-border: rgba(15, 23, 42, 0.08);
	--ecmp-j-row-border-hover: rgba(15, 23, 42, 0.18);
	--ecmp-j-row-radius: 14px;
	--ecmp-j-row-pad: 18px;
	--ecmp-j-row-gap: 10px;
	--ecmp-j-row-title: #0f172a;
	--ecmp-j-row-teaser: #64748b;
	--ecmp-j-chip: #475569;

	--ecmp-j-icon-box: 56px;
	--ecmp-j-icon-radius: 14px;

	--ecmp-j-badge-bg: #dbeafe;
	--ecmp-j-badge-ink: #1d4ed8;
	--ecmp-j-closed-bg: #fee2e2;
	--ecmp-j-closed-ink: #b91c1c;

	--ecmp-j-cta-bg: #769C26;
	--ecmp-j-cta-ink: #ffffff;
	--ecmp-j-cta-bg-hover: #5f7d1e;
	--ecmp-j-cta-ink-hover: #ffffff;
	--ecmp-j-cta-radius: 10px;

	--ecmp-j-detail-bg: #ffffff;
	--ecmp-j-detail-title: #0f172a;
	--ecmp-j-detail-text: #334155;
	--ecmp-j-detail-meta-bg: #f8fafc;
	--ecmp-j-back: #475569;
	--ecmp-j-back-hover: #1e293b;

	display: block;
}
.ecmp-job *, .ecmp-job *::before, .ecmp-job *::after { box-sizing: border-box; }

/* ---- En-tête ---- */
.ecmp-job__head { margin-bottom: 22px; }
.ecmp-job__title { margin: 0; font-size: 2rem; font-weight: 800; line-height: 1.15; color: var(--ecmp-j-title) !important; }

/* ---- Onglets (filtres) ---- */
.ecmp-job__tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.ecmp-job .ecmp-job__tabs .ecmp-job__tab {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--ecmp-j-tab-border) !important;
	border-radius: var(--ecmp-j-tab-radius);
	background: var(--ecmp-j-tab-bg) !important;
	color: var(--ecmp-j-tab-ink) !important;
	font-size: 14px;
	font-family: inherit;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.ecmp-job .ecmp-job__tabs .ecmp-job__tab:hover { border-color: var(--ecmp-j-tab-bg-active) !important; color: var(--ecmp-j-tab-bg-active) !important; }
.ecmp-job .ecmp-job__tabs .ecmp-job__tab.is-active {
	background: var(--ecmp-j-tab-bg-active) !important;
	color: var(--ecmp-j-tab-ink-active) !important;
	border-color: var(--ecmp-j-tab-border-active) !important;
}
.ecmp-job__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--ecmp-j-tab-count-bg) !important;
	color: inherit;
	font-size: 12px;
	font-weight: 700;
}
.ecmp-job__tab.is-active .ecmp-job__count { background: rgba(255, 255, 255, 0.25) !important; }

/* ---- Liste des offres ---- */
.ecmp-job__rows { display: flex; flex-direction: column; gap: var(--ecmp-j-row-gap); }

.ecmp-job .ecmp-job-row {
	appearance: none;
	width: 100%;
	text-align: left;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: var(--ecmp-j-row-pad);
	background: var(--ecmp-j-row-bg) !important;
	border: 1px solid var(--ecmp-j-row-border) !important;
	border-radius: var(--ecmp-j-row-radius);
	cursor: pointer;
	font-family: inherit;
	color: inherit;
	transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ecmp-job-shadow-yes .ecmp-job-row { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.ecmp-job .ecmp-job-row:hover {
	background: var(--ecmp-j-row-bg-hover) !important;
	border-color: var(--ecmp-j-row-border-hover) !important;
}
.ecmp-job-shadow-yes .ecmp-job-row:hover { box-shadow: 0 14px 30px -18px rgba(15, 23, 42, 0.30); transform: translateY(-1px); }
.ecmp-job-row.is-hidden { display: none; }

.ecmp-job-row__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ecmp-j-icon-box);
	height: var(--ecmp-j-icon-box);
	border-radius: var(--ecmp-j-icon-radius);
	background: var(--ecmp-j-icon-bg) !important;
	color: var(--ecmp-j-icon-ink) !important;
	font-size: calc(var(--ecmp-j-icon-box) * 0.42);
}

.ecmp-job-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ecmp-job-row__titleline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ecmp-job-row__title {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--ecmp-j-row-title) !important;
	line-height: 1.2;
}
/* Accroche : une seule ligne, tronquée (…) — jamais de retour à la ligne qui
   viendrait empiéter sur les infos (lieu/contrat) ou le bouton « Voir l'offre ». */
.ecmp-job-row__teaser {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.95rem;
	color: var(--ecmp-j-row-teaser) !important;
	line-height: 1.35;
}

.ecmp-job-row__badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--ecmp-j-badge-bg) !important;
	color: var(--ecmp-j-badge-ink) !important;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}
/* Badge « Clôturé » (offre fermée) — distinct du badge « Nouveau ». */
.ecmp-job-row__badge--closed { background: var(--ecmp-j-closed-bg) !important; color: var(--ecmp-j-closed-ink) !important; }

/* Largeur fixe : la colonne lieu/contrat occupe le même emplacement sur
   toutes les lignes → alignement d'une offre à l'autre (haut comme bas). */
.ecmp-job-row__meta { flex: 0 0 200px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ecmp-job-row__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	max-width: 240px;
	font-size: 0.9rem;
	color: var(--ecmp-j-chip) !important;
}
.ecmp-job-row__chip i { flex: 0 0 auto; opacity: 0.7; font-size: 0.85em; }
/* Le libellé du chip (lieu / contrat) se tronque au lieu de déborder. */
.ecmp-job-row__chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.ecmp-job-row__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 20px;
	border-radius: var(--ecmp-j-cta-radius);
	background: var(--ecmp-j-cta-bg) !important;
	color: var(--ecmp-j-cta-ink) !important;
	font-size: 0.95rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color .18s ease, color .18s ease;
}
.ecmp-job-row:hover .ecmp-job-row__cta { background: var(--ecmp-j-cta-bg-hover) !important; color: var(--ecmp-j-cta-ink-hover) !important; }

/* ---- Pied ---- */
.ecmp-job__foot { display: flex; justify-content: center; margin-top: 22px; }
.ecmp-job__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	border: 1px solid var(--ecmp-j-row-border) !important;
	border-radius: var(--ecmp-j-cta-radius);
	text-decoration: none;
	font-weight: 700;
	color: var(--ecmp-j-accent) !important;
}
.ecmp-job__more:hover { background: var(--ecmp-j-accent-soft) !important; }

/* =========================================================
   Fiche détaillée
   ========================================================= */
.ecmp-job__detail {
	background: var(--ecmp-j-detail-bg) !important;
	border: 1px solid var(--ecmp-j-row-border) !important;
	border-radius: var(--ecmp-j-row-radius);
	padding: clamp(20px, 4vw, 36px);
}
.ecmp-job-shadow-yes .ecmp-job__detail { box-shadow: 0 20px 50px -30px rgba(15, 23, 42, 0.35); }

.ecmp-job .ecmp-job-detail__back {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
	padding: 0;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--ecmp-j-back) !important;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: color .18s ease;
}
/* Bouton retour : le widget ouvre la fiche EN METTANT LE FOCUS sur ce bouton
   (job.js), donc on neutralise aussi :focus / :focus-visible / :active — sinon
   le kit Elementor du site y réapplique sa couleur d'accent (le vert résiduel). */
.ecmp-job .ecmp-job-detail__back:hover,
.ecmp-job .ecmp-job-detail__back:focus,
.ecmp-job .ecmp-job-detail__back:focus-visible,
.ecmp-job .ecmp-job-detail__back:active {
	color: var(--ecmp-j-back-hover) !important;
	background: none !important;
	box-shadow: none !important;
	border: 0 !important;
}
.ecmp-job .ecmp-job-detail__back i { color: inherit !important; }

.ecmp-job-detail__header { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 24px; }
.ecmp-job-detail__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px; height: 64px;
	border-radius: var(--ecmp-j-icon-radius);
	background: var(--ecmp-j-icon-bg) !important;
	color: var(--ecmp-j-icon-ink) !important;
	font-size: 28px;
}
.ecmp-job-detail__heading { flex: 1 1 auto; min-width: 0; }
.ecmp-job-detail__title { margin: 0; font-size: 1.7rem; font-weight: 800; line-height: 1.2; color: var(--ecmp-j-detail-title) !important; }
.ecmp-job-detail__teaser { margin: 8px 0 0; font-size: 1.05rem; color: var(--ecmp-j-row-teaser) !important; }

/* Infos clés */
.ecmp-job-detail__facts {
	list-style: none;
	margin: 0 0 28px;
	padding: 18px;
	background: var(--ecmp-j-detail-meta-bg) !important;
	border-radius: 12px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px 22px;
}
.ecmp-job-detail__fact { display: flex; align-items: flex-start; gap: 12px; margin: 0; min-width: 0; }
.ecmp-job-detail__fact-ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	border-radius: 9px;
	background: var(--ecmp-j-icon-bg) !important;
	color: var(--ecmp-j-icon-ink) !important;
	font-size: 15px;
}
.ecmp-job-detail__fact-body { display: flex; flex-direction: column; min-width: 0; padding-top: 1px; }
.ecmp-job-detail__fact-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ecmp-j-row-teaser) !important; font-weight: 600; }
/* La valeur se replie proprement et se limite à 2 lignes : jamais de débordement
   horizontal, ni de fiche qui s'allonge démesurément quand le texte est long. */
.ecmp-job-detail__fact-value {
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--ecmp-j-detail-title) !important;
	overflow-wrap: anywhere;
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Corps (contenu éditeur) */
.ecmp-job-detail__body { color: var(--ecmp-j-detail-text) !important; line-height: 1.7; }
.ecmp-job-detail__body > *:first-child { margin-top: 0; }
.ecmp-job-detail__body h2, .ecmp-job-detail__body h3, .ecmp-job-detail__body h4 { color: var(--ecmp-j-detail-title) !important; }
.ecmp-job-detail__body ul, .ecmp-job-detail__body ol { padding-left: 1.3em; }
.ecmp-job-detail__body li { margin-bottom: 6px; }

/* Postuler */
.ecmp-job-detail__apply { margin-top: 30px; }
.ecmp-job-detail__apply-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	border-radius: var(--ecmp-j-cta-radius);
	background: var(--ecmp-j-cta-bg) !important;
	color: var(--ecmp-j-cta-ink) !important;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .18s ease;
}
.ecmp-job-detail__apply-btn:hover { background: var(--ecmp-j-cta-bg-hover) !important; color: var(--ecmp-j-cta-ink-hover) !important; }

/* ---- État éditeur ---- */
.ecmp-job .ecmp-empty,
.ecmp-empty {
	padding: 20px; border: 1px dashed #c3c4c7; border-radius: 8px;
	color: #646970; text-align: center; font-size: 14px;
}

/* =========================================================
   Responsive
   ========================================================= */

/* ---- Tablette (≤ 1024px) : la ligne reste horizontale mais respire moins ---- */
@media (max-width: 1024px) {
	.ecmp-job .ecmp-job-row { gap: 14px; }
	.ecmp-job-row__meta { gap: 4px; }
	.ecmp-job-row__cta { padding: 9px 16px; }
}

/* ---- Onglets : défilement horizontal plutôt qu'un empilement multi-lignes ---- */
@media (max-width: 782px) {
	.ecmp-job__tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin: 0 -4px 18px;
		padding: 2px 4px 6px;
	}
	.ecmp-job__tabs::-webkit-scrollbar { display: none; }
	.ecmp-job .ecmp-job__tabs .ecmp-job__tab { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }

	.ecmp-job__title { font-size: 1.6rem; }
	.ecmp-job-detail__header { flex-direction: column; gap: 12px; }
}

/* ---- Téléphone (≤ 600px) : chaque offre devient une carte empilée ---- */
@media (max-width: 600px) {
	.ecmp-job .ecmp-job-row {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"icon main"
			"meta meta"
			"cta  cta";
		align-items: start;
		column-gap: 14px;
		row-gap: 12px;
		-webkit-tap-highlight-color: transparent;
	}
	.ecmp-job-row__icon {
		grid-area: icon;
		width: 44px; height: 44px;
		font-size: 19px;
		border-radius: 12px;
	}
	.ecmp-job-row__main { grid-area: main; align-self: center; }
	.ecmp-job-row__title { font-size: 1.05rem; }
	.ecmp-job-row__teaser { font-size: 0.9rem; }

	.ecmp-job-row__meta {
		grid-area: meta;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px 14px;
		padding-top: 10px;
		border-top: 1px solid var(--ecmp-j-row-border);
		margin-top: 8px;
	}
	.ecmp-job-row__chip { font-size: 0.88rem; max-width: 100%; }

	.ecmp-job-row__cta {
		grid-area: cta;
		width: 100%;
		padding: 12px;
		font-size: 0.95rem;
	}
	/* Pas d'effet de soulèvement au tap sur mobile (évite les décalages). */
	.ecmp-job-shadow-yes .ecmp-job-row:hover { transform: none; }

	/* Fiche détaillée compacte */
	.ecmp-job__detail { padding: 20px 16px; }
	.ecmp-job-detail__back { padding: 4px 0; font-size: 1rem; }
	.ecmp-job-detail__icon { width: 54px; height: 54px; font-size: 24px; }
	.ecmp-job-detail__title { font-size: 1.35rem; }
	.ecmp-job-detail__teaser { font-size: 1rem; }
	.ecmp-job-detail__facts {
		grid-template-columns: 1fr;
		padding: 14px;
		gap: 12px;
		margin-bottom: 22px;
	}
	.ecmp-job-detail__body { font-size: 0.98rem; }
	.ecmp-job-detail__apply { margin-top: 24px; }
	.ecmp-job-detail__apply-btn { display: flex; width: 100%; padding: 14px; }

	.ecmp-job__more { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.ecmp-job-row, .ecmp-job__tab, .ecmp-job-row__cta, .ecmp-job-detail__apply-btn, .ecmp-job-detail__back { transition: none; }
	.ecmp-job__detail, .ecmp-job__list { scroll-behavior: auto; }
}