/**
 * Theme iXnov - pages des offres d'emploi.
 *
 * Habille les blocs du plugin Kienso - Offres d'emploi (classes kemp-*) aux
 * couleurs du theme : memes champs que le formulaire de contact, meme fiche
 * collante que les realisations.
 */

/* En-tete ----------------------------------------------------------------- */

/*
 * La largeur se limite sur les enfants : posee sur le groupe, que le layout
 * "constrained" centre avec des marges auto, elle decalait le texte vers le
 * milieu au lieu de l'aligner sur la grille des offres.
 */
.offres-entete-texte > *,
.offre-entete-texte > * {
	max-width: 860px;
}

.offres-intro {
	max-width: 640px;
	line-height: 1.7;
}

/* Etiquette de l'employeur sur le bandeau : fond blanc, comme les realisations. */
.offre-entete .carte-tags a[href] {
	background-color: var(--wp--preset--color--blanc);
}

/* Liste ------------------------------------------------------------------- */

.carte-offre .carte-actu-corps {
	padding-top: 26px;
}

.carte-offre-resume {
	margin: 0;
	color: var(--wp--preset--color--texte);
	font-size: var(--wp--preset--font-size--compact);
	font-weight: 600;
}

.carte-offre-resume:empty {
	display: none;
}

/* Filtres ----------------------------------------------------------------- */

.offres-liste .kemp-filtres {
	margin-bottom: var(--wp--preset--spacing--60);
}

.kemp-filtres label {
	color: var(--wp--preset--color--texte);
	font-size: 0.84375rem;
}

/* Fiche ------------------------------------------------------------------- */

.offre-colonnes {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--wp--preset--spacing--70);
	align-items: start;
}

.offre-colonnes > * {
	margin-block: 0;
}

.offre-contenu {
	line-height: 1.75;
}

.offre-contenu h2 {
	margin-top: 2.2em;
	margin-bottom: 0.6em;
	font-size: var(--wp--preset--font-size--titre-s);
}

.offre-contenu h3 {
	margin-top: 1.6em;
	margin-bottom: 0.4em;
	font-size: var(--wp--preset--font-size--moyen);
}

.offre-contenu > :first-child {
	margin-top: 0;
}

/* L'encart "L'offre en bref" est le composant .fiche-encart de main.css, partage avec les realisations. */

/* Logo de l'employeur en tete de l'encart, separe du reste par un filet. */
.offre-fiche > .kemp-logo {
	padding-bottom: 18px;
	border-bottom: 1px solid var(--wp--preset--color--bordure);
}

/* Candidature ------------------------------------------------------------- */

.offres-candidature {
	max-width: 860px;
	margin-inline: auto;
	padding: 44px 44px 38px;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: var(--ixnov-rayon-carte);
	background-color: var(--wp--preset--color--blanc);
	box-shadow: 0 20px 48px rgba(0, 40, 40, 0.06);
	scroll-margin-top: calc(var(--ixnov-header-h, 88px) + 24px);
}

.offres-candidature > * {
	margin-block: 0 18px;
}

.offres-candidature > .wp-block-kienso-emplois-formulaire {
	margin-top: 32px;
	margin-bottom: 0;
}

/* Champs : ceux du formulaire de contact. */
.kemp-formulaire__champ > label,
.kemp-filtres label {
	font-family: var(--wp--preset--font-family--corps);
	font-weight: 600;
}

.kemp-formulaire__champ > label {
	color: var(--wp--preset--color--texte);
	font-size: 0.84375rem;
}

/* Le consentement est une phrase, pas un libelle de champ. */
.kemp-formulaire__champ--case > label {
	color: var(--wp--preset--color--texte-doux);
	font-weight: 400;
}

.kemp-filtres select,
.kemp-formulaire input[type="text"],
.kemp-formulaire input[type="email"],
.kemp-formulaire input[type="tel"],
.kemp-formulaire select,
.kemp-formulaire textarea {
	padding: 14px 16px;
	border: 1.5px solid var(--wp--preset--color--bordure);
	border-radius: 12px;
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--texte);
	font-family: var(--wp--preset--font-family--corps);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.kemp-formulaire textarea {
	line-height: 1.6;
	resize: vertical;
}

.kemp-filtres select:focus,
.kemp-formulaire input:focus,
.kemp-formulaire select:focus,
.kemp-formulaire textarea:focus {
	border-color: var(--wp--preset--color--primaire);
	box-shadow: 0 0 0 3px rgba(0, 172, 169, 0.12);
	outline: none;
}

.kemp-filtres select,
.kemp-formulaire select {
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5A58' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
}

.kemp-formulaire input[type="file"] {
	padding: 12px;
	border: 1.5px dashed var(--wp--preset--color--bordure);
	border-radius: 12px;
	background-color: var(--wp--preset--color--surface-alt);
	font-size: var(--wp--preset--font-size--compact);
}

.kemp-formulaire__aide,
.kemp-formulaire__champ--case label {
	color: var(--wp--preset--color--texte-doux);
	font-size: 0.84375rem;
	line-height: 1.6;
	opacity: 1;
}

.kemp-formulaire__champ--case input {
	accent-color: var(--wp--preset--color--primaire);
}

.kemp-formulaire__champ--case a {
	color: var(--wp--preset--color--primaire);
}

/* Le bouton d'envoi : bouton plein du theme, avec sa fleche. */
.kemp-formulaire__pied {
	margin-top: 8px;
}

.kemp-formulaire__envoyer {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 32px;
	border: 0;
	border-radius: var(--ixnov-rayon-bouton);
	background-color: var(--wp--preset--color--primaire);
	color: var(--wp--preset--color--blanc);
	font-family: var(--wp--preset--font-family--corps);
	font-size: var(--wp--preset--font-size--confort);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.18s ease;
}

.kemp-formulaire__envoyer::after {
	content: "arrow_forward";
	font-family: var(--wp--preset--font-family--icones);
	font-size: 1.2em;
	font-weight: 400;
}

.kemp-formulaire__envoyer:hover,
.kemp-formulaire__envoyer:focus {
	background-color: var(--wp--preset--color--primaire-fonce);
}

.kemp-formulaire__envoyer:active {
	transform: scale(0.98);
}

.kemp-formulaire__message--succes {
	border: 0;
	border-radius: 12px;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--texte-doux);
}

@media (max-width: 1024px) {
	/* La fiche passe sous la description et n'a plus de raison d'etre collante. */
	.offre-colonnes {
		grid-template-columns: minmax(0, 1fr);
	}

	.offres-candidature {
		padding: 32px 28px 28px;
	}
}