/**
 * Espace Emploi : styles du module.
 *
 * Le module reprend la police et la taille de texte du thème. Le formulaire, les offres et
 * la pagination sont des cartes aux couleurs fixes (fond blanc, texte foncé) : leurs
 * contrastes sont garantis (RGAA 3.2 et 3.3) quel que soit le thème.
 *
 * Les couleurs se règlent dans Réglages → Espace Emploi → Affichage (attribut style) :
 * - principale (titres, liens, bordures) : refusée sous 4,5:1 avec le blanc ;
 * - secondaire (boutons, pictogrammes) : toute couleur, le texte des boutons passe en noir
 *   ou en blanc (--ee-secondary-text) ; fond éclairci au repos (--ee-secondary-light).
 *
 * Autres variables :
 *
 *     .ee-module {
 *         --ee-card-bg: #fff;      fond des cartes
 *         --ee-card-text: #1e1e1e; texte des cartes (contraste ≥ 4,5:1 avec --ee-card-bg)
 *     }
 */

.ee-module {
	--ee-accent: #1d4f91; /* Remplacée par la couleur des réglages (attribut style). */
	--ee-accent-contrast: #fff;
	--ee-secondary: var(--ee-accent);
	--ee-secondary-light: var(--ee-secondary); /* Fond des boutons au repos (calculé par le serveur). */
	--ee-secondary-text: var(--ee-accent-contrast);
	--ee-card-bg: #fff;
	--ee-card-text: #1e1e1e;
	--ee-card-muted: #50575e; /* 7,4:1 sur blanc. */
	--ee-card-border: #dcdcde;
	--ee-field-border: #50575e; /* Bordure des champs : ≥ 3:1 (RGAA 3.3). */
	--ee-tint: #eef3f9;
	--ee-tint: color-mix(in srgb, var(--ee-accent) 8%, #fff);
	--ee-mark: #ffe58a;
	--ee-mark-text: #1e1e1e;
	--ee-radius: 8px;
	--ee-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 14px rgba(0, 0, 0, 0.06);
	--ee-gap: 1rem;

	margin-block: var(--ee-gap);
}

.ee-module *,
.ee-module *::before,
.ee-module *::after {
	box-sizing: border-box;
}

.ee-title {
	margin-block: 0 var(--ee-gap);
}

/* Texte réservé aux lecteurs d'écran (les thèmes ne définissent pas tous .screen-reader-text). */
.ee-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ee-icon {
	flex-shrink: 0;
	vertical-align: middle;
}

/* Boutons (Rechercher, Détail de l'offre). */
.ee-module .ee-button {
	display: inline-flex;
	gap: 0.45em;
	align-items: center;
	justify-content: center;
	min-height: 44px; /* Cible tactile confortable. */
	margin: 0;
	padding: 0.55em 1.2em;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	color: var(--ee-secondary-text);
	background: var(--ee-secondary-light);
	border: 0; /* Sans contour : le libellé identifie le bouton. */
	border-radius: var(--ee-radius);
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

/* Survol : du ton clair au ton de la couleur secondaire (le texte garde 4,5:1 dans les deux cas). */
.ee-module .ee-button:hover {
	color: var(--ee-secondary-text);
	text-decoration: underline;
	background: var(--ee-secondary);
}

@media (prefers-reduced-motion: reduce) {
	.ee-module .ee-button {
		transition: none;
	}
}

/* Focus toujours visible (RGAA 10.7), quel que soit le thème. */
.ee-module a:focus-visible,
.ee-module button:focus-visible,
.ee-module input:focus-visible,
.ee-module select:focus-visible,
.ee-module summary:focus-visible {
	outline: 3px solid var(--ee-accent);
	outline-offset: 2px;
}

/* Cartes. */
.ee-search,
.ee-offer {
	color: var(--ee-card-text);
	background: var(--ee-card-bg);
	border: 1px solid var(--ee-card-border);
	border-radius: var(--ee-radius);
	box-shadow: var(--ee-shadow);
}

/* Formulaire. */
.ee-search {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem var(--ee-gap);
	align-items: flex-end;
	margin-block-end: calc(var(--ee-gap) * 1.5);
	padding: calc(var(--ee-gap) * 1.25);
	border-block-start: 4px solid var(--ee-accent);
}

.ee-search__field {
	display: flex;
	flex: 1 1 12rem;
	flex-direction: column;
	gap: 0.35em;
	min-width: 0;
}

/* La liste prend la largeur de son option la plus longue : elle passe à la ligne plutôt que d'être tronquée. */
.ee-search__field--scope {
	flex: 0 1 auto;
	max-width: 100%;
}

.ee-search__field--keywords {
	flex: 1 1 14rem;
}

.ee-search__label {
	font-weight: 600;
	color: var(--ee-card-text);
}

/* Sélecteurs renforcés : certains thèmes retirent la bordure des champs de recherche. */
.ee-module .ee-search .ee-search__input {
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0.45em 0.75em;
	font: inherit;
	line-height: 1.3;
	color: var(--ee-card-text);
	background-color: var(--ee-card-bg);
	border: 1px solid var(--ee-field-border);
	border-radius: calc(var(--ee-radius) - 2px);
	box-shadow: none;
}

.ee-module .ee-search .ee-search__input:hover {
	border-color: var(--ee-card-text);
}

/* Liste « Lieu » : flèche dessinée par le module, indépendante du thème. */
.ee-module .ee-search select.ee-search__input {
	width: auto;
	max-width: 100%;
	padding-inline-end: 2.6em;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231e1e1e' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.6em center;
	background-size: 1.4em;
	cursor: pointer;
}

.ee-search__actions {
	flex: 0 1 auto;
}

.ee-search__help {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.875em;
	color: var(--ee-card-muted);
}

/* Sur petit écran, le bouton prend toute la largeur. */
@media (max-width: 30rem) {
	.ee-search__actions,
	.ee-search__submit {
		flex-basis: 100%;
		width: 100%;
	}
}

/* Résumé des résultats. */
.ee-results {
	scroll-margin-block-start: 2rem;
}

.ee-results:focus {
	outline: none;
}

.ee-summary {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	margin-block: 0 var(--ee-gap);
	font-size: 1.25em;
}

.ee-summary__icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	color: var(--ee-secondary-text);
	background: var(--ee-secondary);
	border-radius: 50%;
}

.ee-summary__page {
	font-size: 0.8em;
	white-space: nowrap;
}

/* Messages. */
.ee-notice {
	margin-block: 0 var(--ee-gap);
	padding: 0.75em 1em;
	color: var(--ee-card-text);
	background: var(--ee-tint);
	border-inline-start: 4px solid var(--ee-accent);
	border-radius: var(--ee-radius);
}

.ee-notice p {
	margin: 0;
}

.ee-notice p + p {
	margin-block-start: 0.5em;
}

.ee-notice a {
	color: var(--ee-card-text);
}

.ee-notice--warning,
.ee-notice--error {
	background: #fcf0f1;
	border-inline-start-color: #b32d2e;
}

.ee-notice__detail {
	font-size: 0.875em;
}

/* Offres. */
.ee-offers {
	display: flex;
	flex-direction: column;
	gap: calc(var(--ee-gap) * 1.25);
}

.ee-offer {
	padding: calc(var(--ee-gap) * 1.25) calc(var(--ee-gap) * 1.5);
	border-inline-start: 5px solid var(--ee-accent);
}

.ee-module .ee-offer__title {
	margin-block: 0 0.6em;
	font-size: 1.35em;
	line-height: 1.3;
	color: var(--ee-accent);
}

.ee-offer__meta,
.ee-offer__details {
	margin: 0;
}

.ee-offer__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.75em;
	padding-block-end: 0.85em;
	border-block-end: 1px solid var(--ee-card-border);
}

.ee-offer__meta div {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em;
	align-items: baseline;
}

/*
 * Informations clés : salaire sur une ligne, durée sur toute la largeur (valeurs sous le libellé),
 * expérience et dernière actualisation côte à côte.
 */
.ee-offer__detail {
	display: flex;
	flex-direction: column;
	gap: 0.1em;
}

.ee-offer__detail dd {
	padding-inline-start: calc(20px + 0.4em); /* Alignée sur le texte du libellé, après l'icône. */
}

.ee-offer__detail--salary,
.ee-offer__detail--duration {
	grid-column: 1 / -1;
}

.ee-offer__detail--salary {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.1em 0.4em;
	align-items: baseline;
}

.ee-offer__detail--salary dd {
	padding-inline-start: 0;
}

.ee-module dt {
	font-weight: 400;
	color: var(--ee-card-muted);
}

.ee-module dt::after {
	content: "\00a0:"; /* Espace insécable avant les deux-points. */
}

.ee-module dd {
	margin: 0;
	font-weight: 600;
	color: var(--ee-card-text);
}

/* Pictogrammes décoratifs (aria-hidden, toujours suivis de leur libellé) : couleur secondaire. */
.ee-module dt .ee-icon {
	margin-inline-end: 0.4em;
	vertical-align: -0.2em;
	color: var(--ee-secondary);
}

/* Description : résumé, puis texte complet dans un élément dépliable natif (clavier et lecteurs d'écran). */
.ee-offer__excerpt {
	margin-block: var(--ee-gap) 0.5em;
}

.ee-offer__description {
	margin-block: var(--ee-gap);
	overflow-wrap: anywhere;
}

.ee-offer__description p {
	margin-block: 0 0.75em;
}

.ee-offer__more .ee-offer__description {
	margin-block-start: 0.5em;
}

/* Le résumé est masqué quand la description complète est ouverte (navigateurs récents). */
.ee-offer:has(.ee-offer__more[open]) .ee-offer__excerpt {
	display: none;
}

.ee-offer__toggle {
	display: inline-flex;
	gap: 0.35em;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	color: var(--ee-accent);
	list-style: none;
	cursor: pointer;
}

.ee-offer__toggle::-webkit-details-marker {
	display: none;
}

.ee-offer__toggle:hover {
	text-decoration: underline;
}

.ee-offer__toggle .ee-icon {
	color: var(--ee-secondary);
	transition: transform 0.15s ease-in-out;
}

.ee-offer__more[open] .ee-offer__toggle .ee-icon {
	transform: rotate(180deg);
}

.ee-offer__toggle-close,
.ee-offer__more[open] .ee-offer__toggle-open {
	display: none;
}

.ee-offer__more[open] .ee-offer__toggle-close {
	display: inline;
}

@media (prefers-reduced-motion: reduce) {
	.ee-offer__toggle .ee-icon {
		transition: none;
	}
}

/* Informations clés : bloc teinté de la couleur principale. */
.ee-offer__details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(13rem, 40%)), 1fr)); /* 2 colonnes au plus, 1 sur écran étroit. */
	gap: 0.6em 1.5em;
	margin-block-start: var(--ee-gap);
	padding: 0.9em 1.1em;
	background: var(--ee-tint);
	border-radius: var(--ee-radius);
}

.ee-offer__actions {
	display: flex;
	justify-content: flex-end;
	margin-block: var(--ee-gap) 0;
}

.ee-module mark {
	padding: 0 0.1em;
	color: var(--ee-mark-text);
	background: var(--ee-mark);
	border-radius: 2px;
}

/* Pagination. */
.ee-pagination {
	margin-block-start: calc(var(--ee-gap) * 1.5);
}

.ee-pagination__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ee-pagination__list li {
	margin: 0;
}

.ee-pagination__link,
.ee-pagination__gap {
	display: inline-flex;
	gap: 0.35em;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.7em;
}

.ee-module .ee-pagination__link {
	color: var(--ee-card-text);
	text-decoration: none;
	background: var(--ee-card-bg);
	border: 1px solid var(--ee-card-border);
	border-radius: var(--ee-radius);
}

.ee-module .ee-pagination__link:hover {
	text-decoration: underline;
	border-color: var(--ee-accent);
}

.ee-module .ee-pagination__link.is-current {
	font-weight: 700;
	color: var(--ee-accent-contrast);
	background: var(--ee-accent);
	border-color: var(--ee-accent);
}

@media (max-width: 30rem) {
	.ee-offer {
		padding: var(--ee-gap);
	}

	.ee-pagination__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

/* Mode contrasté de Windows : les fonds disparaissent, les bordures restent. */
@media (forced-colors: active) {
	.ee-module .ee-button,
	.ee-module .ee-pagination__link.is-current,
	.ee-summary__icon {
		border: 1px solid ButtonText;
	}

	.ee-module mark {
		color: MarkText;
		background: Mark;
		forced-color-adjust: none;
	}
}