/* Z'Skeeled – styles de base, volontairement sobres : polices et couleurs héritées du thème (Divi, Elementor…).
   Personnalisation : surchargez les variables ci-dessous sur .zsk-offres / .zsk-fiche ou via la classe ajoutée avec classe="…". */

.zsk-offres,
.zsk-fiche,
.zsk-postuler {
	--zsk-espace: 24px;
	--zsk-bordure: rgba(0, 0, 0, 0.12);
	--zsk-fond: #ffffff;
	--zsk-fond-doux: rgba(0, 0, 0, 0.04);
	--zsk-rayon: 10px;
	--zsk-texte-doux: rgba(0, 0, 0, 0.6);
	--zsk-bouton-fond: #1f2937;
	--zsk-bouton-texte: #ffffff;
	--zsk-logo: 48px;
	box-sizing: border-box;
}

.zsk-offres *,
.zsk-fiche *,
.zsk-postuler * {
	box-sizing: border-box;
}

/* ---------- Outils : recherche et filtres */

.zsk-offres__outils {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 16px;
	align-items: flex-end;
	margin: 0 0 var(--zsk-espace);
}

.zsk-offres__outil {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 0 1 220px;
}

.zsk-offres__outil--recherche {
	flex: 1 1 280px;
	max-width: 420px;
}

.zsk-offres__libelle {
	font-size: 0.85em;
	color: var(--zsk-texte-doux);
}

.zsk-offres__champ {
	width: 100%;
	padding: 0.6em 0.9em;
	border: 1px solid var(--zsk-bordure);
	border-radius: calc(var(--zsk-rayon) / 2);
	background: var(--zsk-fond);
	font: inherit;
	color: inherit;
}

/* ---------- Grille des offres */

.zsk-offres__liste {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	gap: var(--zsk-espace);
	grid-template-columns: repeat(var(--zsk-colonnes, 3), minmax(0, 1fr));
}

@media (max-width: 980px) {
	.zsk-offres__liste {
		grid-template-columns: repeat(min(var(--zsk-colonnes, 3), 2), minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.zsk-offres__liste {
		grid-template-columns: minmax(0, 1fr);
	}
}

.zsk-offre {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 !important;
	padding: var(--zsk-espace) !important;
	background: var(--zsk-fond);
	border: 1px solid var(--zsk-bordure);
	border-radius: var(--zsk-rayon);
	list-style: none !important;
}

.zsk-offre::before,
.zsk-offre::marker {
	content: none !important;
}

.zsk-offre[hidden] {
	display: none;
}

.zsk-offre__entete {
	display: flex;
	align-items: center;
	gap: 12px;
}

.zsk-offre__logo,
.zsk-fiche__logo {
	width: var(--zsk-logo);
	height: var(--zsk-logo);
	object-fit: contain;
	flex: 0 0 auto;
	border-radius: calc(var(--zsk-rayon) / 2);
	background: #ffffff;
}

.zsk-offre__etablissement,
.zsk-fiche__etablissement {
	font-size: 0.9em;
	color: var(--zsk-texte-doux);
	line-height: 1.3;
}

.zsk-offre__titre {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.zsk-offre__metas {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.zsk-offre__meta {
	margin: 0 !important;
	padding: 0.2em 0.7em !important;
	border-radius: 999px;
	background: var(--zsk-fond-doux);
	font-size: 0.85em;
	line-height: 1.5;
	list-style: none !important;
}

.zsk-offre__meta::before,
.zsk-offre__meta::marker {
	content: none !important;
}

.zsk-offre__meta--lieu::before {
	content: "\1F4CD\00A0" !important;
}

.zsk-offre__extrait,
.zsk-offre__date {
	margin: 0 !important;
	padding: 0 !important;
}

.zsk-offre__date {
	font-size: 0.85em;
	color: var(--zsk-texte-doux);
}

.zsk-offre__bouton {
	display: inline-block;
	align-self: flex-start;
	margin-top: auto;
	padding: 0.65em 1.3em;
	background: var(--zsk-bouton-fond);
	color: var(--zsk-bouton-texte) !important;
	border-radius: calc(var(--zsk-rayon) / 2);
	text-decoration: none !important;
	line-height: 1.3;
	transition: opacity 0.2s ease;
}

.zsk-offre__bouton:hover,
.zsk-offre__bouton:focus-visible {
	opacity: 0.85;
}

.zsk-offres__vide,
.zsk-fiche__vide {
	margin: 0;
}

/* ---------- Fiche d'offre */

.zsk-fiche {
	--zsk-logo: 72px;
	/* Pleine largeur du conteneur par défaut. Pour limiter : .zsk-fiche { --zsk-fiche-largeur: 860px; } */
	max-width: var(--zsk-fiche-largeur, none);
	width: 100%;
}

.zsk-fiche__retour {
	margin: 0 0 20px !important;
}

.zsk-fiche__entete {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 0 20px;
}

.zsk-fiche__etablissement {
	margin: 0 0 4px !important;
	padding: 0 !important;
}

.zsk-fiche__titre {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.2;
}

.zsk-fiche__infos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px 24px;
	margin: 0 0 24px;
	padding: 18px 20px;
	border-radius: var(--zsk-rayon);
	background: var(--zsk-fond-doux);
}

.zsk-fiche__info dt {
	margin: 0;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--zsk-texte-doux);
}

.zsk-fiche__info dd {
	margin: 2px 0 0;
	font-weight: 600;
}

.zsk-fiche__actions {
	margin: 0 0 28px !important;
}

.zsk-fiche__description {
	line-height: 1.65;
}

.zsk-fiche__description h3 {
	margin: 1.6em 0 0.5em;
}

.zsk-fiche__description ul {
	margin: 0 0 1em 1.2em;
	padding: 0;
}

.zsk-fiche__description li p {
	margin: 0;
}

/* Skeeled enveloppe ses vidéos dans un bloc « inline-block » : on le neutralise pour garder la largeur. */
.zsk-fiche__description div:has(> .zsk-video) {
	display: block !important;
}

.zsk-video {
	display: block;
	position: relative;
	width: 720px;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	margin: 1em 0;
}

.zsk-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--zsk-rayon);
}

.zsk-fiche__formulaire {
	margin: 40px 0 0;
	scroll-margin-top: 100px;
}

.zsk-fiche__soustitre {
	margin: 0 0 16px !important;
}

/* ---------- Formulaire Skeeled */

.zsk-postuler__cadre {
	display: block;
	width: 100%;
	border: 1px solid var(--zsk-bordure, rgba(0, 0, 0, 0.12));
	border-radius: var(--zsk-rayon, 10px);
	background: #ffffff;
}

.zsk-postuler__secours {
	margin: 12px 0 0 !important;
	font-size: 0.9em;
	color: var(--zsk-texte-doux, rgba(0, 0, 0, 0.6));
}

/* ---------- Divers */

.zsk-alerte {
	padding: 10px 14px;
	border-left: 4px solid #d63638;
	background: #fcf0f1;
	color: #50575e;
	font-size: 14px;
}

.zsk-offres .screen-reader-text,
.zsk-fiche .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}