/**
 * MEDUSA - Job Listing : styles du front.
 *
 * Choix delibere : ce plugin s'installe dans le theme d'un client. Il n'impose
 * ni typographie, ni palette. Tout passe par des variables CSS heritables,
 * que le widget Elementor surchargera sur {{WRAPPER}} en phase 6, et qu'un
 * integrateur peut redefinir sur :root. Les couleurs par defaut derivent de
 * currentColor quand c'est possible.
 */

.mjl-jobs,
.mjl-single,
.mjl-form-wrap,
.mjl-confirmation,
.mjl-closed {
	--mjl-gap: 1.5rem;
	--mjl-radius: 4px;
	--mjl-aside-sticky-top: 6rem;
	--mjl-content-max: 1180px;
	--mjl-content-padding: 1.25rem;
	--mjl-surface: rgba(0, 0, 0, 0.022);
	--mjl-border-width: 1px;
	--mjl-border-color: rgba(0, 0, 0, 0.12);
	--mjl-border: var(--mjl-border-width) solid var(--mjl-border-color);
	--mjl-card-bg: transparent;
	--mjl-card-hover-bg: rgba(0, 0, 0, 0.02);
	--mjl-muted: rgba(0, 0, 0, 0.6);
	/*
	 * L'accent NE PEUT PAS valoir currentColor : employé comme fond, currentColor
	 * vaut la couleur calculée de l'élément lui-même. Le fond serait donc toujours
	 * identique au texte, quel que soit le thème. Un neutre sombre concret, que
	 * l'intégrateur ou Elementor remplacent.
	 */
	--mjl-accent: #1f2328;
	--mjl-accent-contrast: #ffffff;
	--mjl-error: #b32d2e;
	--mjl-warning-bg: rgba(219, 166, 23, 0.12);
	--mjl-error-bg: rgba(179, 45, 46, 0.08);
	--mjl-focus: 2px solid var(--mjl-accent);
}

/* --- Filtres --- */

.mjl-filters {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: var(--mjl-gap);
}

.mjl-filters__field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 10rem;
}

.mjl-filters__field--search {
	flex: 1 1 16rem;
	min-width: 0;
}

.mjl-filters__field label {
	font-size: 0.8125rem;
	opacity: 0.75;
}

/*
 * Sans largeur explicite, un <select> se dimensionne sur son option la plus
 * longue et un <input> sur son attribut size : les champs ne remplissaient pas
 * leur colonne, et le formulaire paraissait bancal.
 */
.mjl-filters__field input,
.mjl-filters__field select {
	box-sizing: border-box;
	max-width: 100%;
	width: 100%;
}

.mjl-filters__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/*
 * Sous 640 px, la rangee flexible laissait les champs a leur min-width de 10 rem
 * sans les etirer. Une grille a une colonne les empile et les fait remplir.
 */
@media (max-width: 640px) {
	.mjl-filters {
		align-items: stretch;
		display: grid;
		grid-template-columns: 1fr;
	}

	.mjl-filters__field,
	.mjl-filters__field--search {
		min-width: 0;
	}

	.mjl-filters__actions {
		justify-content: space-between;
	}

	.mjl-filters__actions .mjl-button {
		flex: 1 1 auto;
	}
}

.mjl-count {
	font-size: 0.875rem;
	color: var(--mjl-muted);
	margin: 0 0 var(--mjl-gap);
}

/* --- Grille --- */

/* Le plugin s'insere dans un conteneur qu'il ne choisit pas : il ne doit jamais
   forcer sa largeur ni deborder. */
.mjl-jobs,
.mjl-form-wrap,
.mjl-confirmation,
.mjl-closed {
	max-width: 100%;
}

.mjl-grid {
	display: grid;
	gap: var(--mjl-gap);
	grid-template-columns: repeat(var(--mjl-columns, 3), minmax(0, 1fr));
	min-width: 0;
}

.mjl-card,
.mjl-row {
	min-width: 0;
}

.mjl-grid--1 { --mjl-columns: 1; }
.mjl-grid--2 { --mjl-columns: 2; }
.mjl-grid--3 { --mjl-columns: 3; }
.mjl-grid--4 { --mjl-columns: 4; }

@media (max-width: 900px) {
	.mjl-grid--3,
	.mjl-grid--4 { --mjl-columns: 2; }
}

@media (max-width: 600px) {
	.mjl-grid { --mjl-columns: 1; }
}

.mjl-jobs--list .mjl-grid {
	--mjl-columns: 1;
	gap: 0;
}

/* --- Carte --- */

.mjl-card {
	background: var(--mjl-card-bg);
	border: var(--mjl-border);
	border-radius: var(--mjl-radius);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: var(--mjl-card-padding, 1.25rem);
	transition: background-color 150ms ease;
}

.mjl-card:hover,
.mjl-card:focus-within {
	background: var(--mjl-card-hover-bg);
}

.mjl-card__title,
.mjl-row__title {
	color: var(--mjl-title-color, inherit);
	font-size: 1.125rem;
	line-height: 1.3;
	margin: 0.25rem 0 0;
	overflow-wrap: anywhere;
}

.mjl-card__title a,
.mjl-row__title a { color: inherit; }

.mjl-card__title a {
	text-decoration: none;
}

.mjl-card__excerpt {
	color: var(--mjl-excerpt-color, var(--mjl-muted));
	font-size: 0.9375rem;
	margin: 0;
}

.mjl-card__footer {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 0.5rem;
}

.mjl-card__date,
.mjl-row__date {
	color: var(--mjl-muted);
	font-size: 0.8125rem;
}

.mjl-card--filled,
.mjl-row--filled {
	opacity: 0.72;
}

/* --- Ligne (disposition liste) --- */

.mjl-row {
	align-items: center;
	border-bottom: var(--mjl-border);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	padding: 1.25rem 0;
}

.mjl-row:first-child { border-top: var(--mjl-border); }

.mjl-row__title {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	font-size: 1.125rem;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
}

.mjl-row__title a { text-decoration: none; }

.mjl-row__aside {
	align-items: center;
	display: flex;
	gap: 1rem;
}

/* --- Metadonnees --- */

.mjl-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0;
}

.mjl-meta__row {
	display: flex;
	gap: 0.35rem;
	font-size: 0.8125rem;
}

.mjl-meta dt {
	color: var(--mjl-meta-color, var(--mjl-muted));
	font-weight: 400;
}

.mjl-meta dd {
	font-weight: 500;
	margin: 0;
}

/* --- Pastilles --- */

.mjl-badge,
.mjl-tag {
	border-radius: 2px;
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.6;
	padding: 0.1rem 0.5rem;
	text-transform: uppercase;
	white-space: nowrap;
}

.mjl-badge--filled,
.mjl-badge--closed {
	background: var(--mjl-badge-bg, rgba(0, 0, 0, 0.08));
	border-radius: var(--mjl-badge-radius, 2px);
	color: var(--mjl-badge-color, inherit);
}

.mjl-tag {
	border: var(--mjl-border);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

/* --- Boutons --- */

.mjl-button {
	background: var(--mjl-button-bg, transparent);
	border: 1px solid var(--mjl-button-border, currentColor);
	border-radius: var(--mjl-button-radius, var(--mjl-radius));
	color: var(--mjl-button-color, inherit);
	cursor: pointer;
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	padding: var(--mjl-button-padding, 0.5rem 1rem);
	text-decoration: none;
}

.mjl-button:hover,
.mjl-button:focus-visible {
	background: var(--mjl-button-hover-bg, var(--mjl-button-bg, transparent));
	border-color: var(--mjl-button-hover-border, var(--mjl-button-border, currentColor));
	color: var(--mjl-button-hover-color, var(--mjl-button-color, inherit));
}

/*
 * Cette règle vient APRÈS « .mjl-button:hover » : sans elle, le bouton principal
 * perdait son fond au survol (repli sur transparent) et paraissait s'effacer.
 */
.mjl-button--primary,
.mjl-button--primary:link,
.mjl-button--primary:visited {
	background: var(--mjl-button-bg, var(--mjl-accent));
	border-color: var(--mjl-button-border, var(--mjl-accent));
	color: var(--mjl-button-color, var(--mjl-accent-contrast));
}

.mjl-button--primary:hover,
.mjl-button--primary:focus-visible {
	background: var(--mjl-button-hover-bg, var(--mjl-accent));
	border-color: var(--mjl-button-hover-border, var(--mjl-accent));
	color: var(--mjl-button-hover-color, var(--mjl-accent-contrast));
	opacity: 0.9;
}

.mjl-button[disabled],
.mjl-button[aria-disabled="true"] {
	cursor: progress;
	opacity: 0.6;
}

.mjl-button:focus-visible,
.mjl-link:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: var(--mjl-focus);
	outline-offset: 2px;
}

/* --- Pagination --- */

.mjl-pagination {
	margin-top: var(--mjl-gap);
}

.mjl-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mjl-pagination a,
.mjl-pagination span {
	border: var(--mjl-border);
	border-radius: var(--mjl-radius);
	display: block;
	min-width: 2.25rem;
	padding: 0.35rem 0.6rem;
	text-align: center;
	text-decoration: none;
}

.mjl-pagination .current {
	background: var(--mjl-accent);
	border-color: var(--mjl-accent);
	color: var(--mjl-accent-contrast);
}

/* --- Etat vide --- */

.mjl-empty {
	border: 1px dashed rgba(0, 0, 0, 0.2);
	border-radius: var(--mjl-radius);
	padding: 2.5rem 1.5rem;
	text-align: center;
}

.mjl-empty__message {
	font-size: 1.0625rem;
	margin: 0 0 0.5rem;
}

/* --- Page d'offre --- */

/*
 * Notre gabarit se substitue a celui du theme : sur un theme sans conteneur
 * (Hello Elementor, et tout theme dont le header.php n'ouvre pas de wrapper),
 * <main> occupe toute la largeur de la fenetre. Le texte colle alors aux bords
 * et la mise en page deborde horizontalement.
 *
 * Un integrateur dont le theme fournit deja un conteneur neutralise la regle :
 *     .mjl-single, .mjl-archive { --mjl-content-max: none; --mjl-content-padding: 0; }
 */
.mjl-single,
.mjl-archive {
	margin-inline: auto;
	max-width: var(--mjl-content-max);
	padding-block: 2rem 3.5rem;
	padding-inline: var(--mjl-content-padding);
}

.mjl-archive__header,
.mjl-single__header {
	border-bottom: var(--mjl-border);
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
}

.mjl-single__breadcrumb {
	font-size: 0.8125rem;
	margin: 0 0 0.5rem;
}

.mjl-single__title {
	margin: 0;
	overflow-wrap: anywhere;
}

.mjl-single__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0;
}

.mjl-single__cta {
	margin: 1.25rem 0 0;
}

.mjl-single__layout {
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
	margin: 2rem 0;
}

@media (max-width: 860px) {
	.mjl-single__layout { grid-template-columns: 1fr; }
}

.mjl-single__content { overflow-wrap: anywhere; }

.mjl-single__section {
	border-top: var(--mjl-border);
	margin-top: 2rem;
	padding-top: 1.5rem;
}

.mjl-single__section h2 { margin-top: 0; }

/*
 * L'en-tête collant d'un thème a une hauteur que le plugin ignore. Le décalage
 * passe donc par une variable ; 6rem couvre les en-têtes courants.
 *
 *     .mjl-single { --mjl-aside-sticky-top: 8rem; }
 */
.mjl-single__aside {
	align-self: start;
	background: var(--mjl-surface);
	border: var(--mjl-border);
	border-radius: var(--mjl-radius);
	padding: 1.25rem 1.5rem;
	position: sticky;
	top: var(--mjl-aside-sticky-top);
}

.admin-bar .mjl-single__aside {
	top: calc(var(--mjl-aside-sticky-top) + 32px);
}

@media (max-width: 782px) {
	.admin-bar .mjl-single__aside {
		top: calc(var(--mjl-aside-sticky-top) + 46px);
	}
}

@media (max-width: 860px) {
	.mjl-single__aside { position: static; }
}

.mjl-single__aside-title {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
}

.mjl-sheet {
	border-top: var(--mjl-border);
	margin: 0;
}

.mjl-sheet__row {
	border-bottom: var(--mjl-border);
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	padding: 0.6rem 0;
}

.mjl-sheet dt {
	color: var(--mjl-muted);
	font-size: 0.8125rem;
}

.mjl-sheet dd {
	font-size: 0.875rem;
	font-weight: 600;
	margin: 0;
	overflow-wrap: anywhere;
	text-align: right;
}

.mjl-single__apply {
	margin-top: 3rem;
	scroll-margin-top: var(--mjl-aside-sticky-top);
}

.mjl-form-wrap {
	background: var(--mjl-surface);
	border: var(--mjl-border);
	border-radius: var(--mjl-radius);
	padding: 2rem 2.25rem 2.25rem;
}

.mjl-form__title {
	border-bottom: var(--mjl-border);
	margin-block: 0 2rem;
	overflow-wrap: anywhere;
	padding-bottom: 1rem;
}

@media (max-width: 600px) {
	.mjl-form-wrap { padding: 1.25rem; }
}

.mjl-form__grid + .mjl-form__actions {
	border-top: var(--mjl-border);
	padding-top: 1.5rem;
}

/* --- Formulaire --- */

.mjl-form__grid {
	display: grid;
	gap: 1.5rem 1.5rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 700px) {
	.mjl-form__grid { grid-template-columns: 1fr; }
}

.mjl-field--wide,
.mjl-field--checks { grid-column: 1 / -1; }

.mjl-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.mjl-field[hidden] { display: none; }

.mjl-field > label,
.mjl-field > legend {
	font-size: 0.875rem;
	font-weight: 600;
}

/*
 * box-sizing explicite : un theme qui ne le pose pas globalement laisserait
 * width:100% + padding deborder la colonne de grille, et la page defilerait
 * horizontalement.
 */
.mjl-field input[type="text"],
.mjl-field input[type="email"],
.mjl-field input[type="tel"],
.mjl-field input[type="url"],
.mjl-field input[type="date"],
.mjl-field input[type="file"],
.mjl-field select,
.mjl-field textarea {
	border: var(--mjl-border);
	border-radius: var(--mjl-radius);
	box-sizing: border-box;
	max-width: 100%;
	padding: 0.5rem 0.65rem;
	width: 100%;
}

.mjl-field input[type="file"] {
	background: transparent;
	padding: 0.4rem 0.5rem;
}

.mjl-field__help {
	color: var(--mjl-muted);
	font-size: 0.8125rem;
	margin: 0;
}

.mjl-field__error {
	color: var(--mjl-error);
	font-size: 0.8125rem;
	font-weight: 600;
	margin: 0;
}

.mjl-field [aria-invalid="true"] {
	border-color: var(--mjl-error);
}

.mjl-required { color: var(--mjl-error); }

.mjl-check {
	align-items: flex-start;
	display: flex;
	font-weight: 400;
	gap: 0.5rem;
}

.mjl-check input { margin-top: 0.2rem; }

.mjl-field--checks {
	border: 0;
	margin: 0;
	padding: 0;
}

.mjl-field--checks .mjl-check {
	margin-top: 0.5rem;
}

.mjl-check--consent {
	background: var(--mjl-surface);
	border: var(--mjl-border);
	border-radius: var(--mjl-radius);
	line-height: 1.55;
	padding: 0.85rem 1rem;
}

.mjl-alert {
	border-left: 3px solid var(--mjl-error);
	background: var(--mjl-error-bg);
	border-radius: var(--mjl-radius);
	margin-bottom: 1.5rem;
	padding: 0.85rem 1rem;
}

.mjl-alert--warning {
	background: var(--mjl-warning-bg);
	border-left-color: #dba617;
}

.mjl-alert p { margin: 0; }

.mjl-form__actions {
	align-items: center;
	display: flex;
	gap: 1rem;
	margin-top: 1.5rem;
}

.mjl-form__status { color: var(--mjl-muted); font-size: 0.875rem; }

.mjl-form__note,
.mjl-form__legal {
	color: var(--mjl-muted);
	font-size: 0.8125rem;
}

.mjl-file-info {
	color: var(--mjl-muted);
	font-size: 0.8125rem;
	margin: 0;
}

/* --- Confirmation --- */

.mjl-confirmation__reference code {
	font-size: 1.125rem;
	letter-spacing: 0.05em;
}

/* --- Divers --- */

.mjl-results[aria-busy="true"] { opacity: 0.5; }

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

@media (prefers-reduced-motion: reduce) {
	.mjl-card,
	.mjl-results {
		transition: none;
	}
}