/*
 * Style de la grille d'offres d'emploi - bloc Kadence Query Loop (Adv) + Query Card
 * Chargé automatiquement par functions.php sur la page contenant le shortcode [jobs]
 * ou le bloc Query Loop des offres d'emploi.
 */
 
.kb-query-grid-wrap {
	row-gap: 24px;
}
 
.kb-query-item.kb-query-block-post {
	position: relative;
	box-sizing: border-box;
	border: 2px solid #111111 !important;
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
}
 
/*
 * Ces deux règles ciblent la couleur de fond avec une spécificité renforcée
 * (sélecteurs répétés + html/body). C'est nécessaire car le bloc "Query Card"
 * de Kadence applique lui-même une couleur de fond (souvent un beige clair
 * par défaut) directement sur cet élément, avec sa propre règle "!important" ;
 * sans ce renfort, cette couleur de Kadence gagne le conflit face à notre
 * "!important" tout simple et le fond reste beige au lieu de blanc.
 */
html body .kb-query-item.kb-query-block-post.kb-query-item.kb-query-block-post {
	background: #ffffff !important;
}
 
html body .kb-query-item.kb-query-block-post.kb-query-item.kb-query-block-post:hover {
	background: #ee9a20 !important;
}
 
.job-card-link-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}
 
.kb-query-item.kb-query-block-post:active {
	transform: scale(0.97);
}
 
.kb-query-item.kb-query-block-post,
.kb-query-item.kb-query-block-post * {
	color: #111111;
	transition: color 0.2s ease;
}
 
.kb-query-item.kb-query-block-post:hover {
	background: #ee9a20 !important;
}
 
.kb-query-item.kb-query-block-post:hover,
.kb-query-item.kb-query-block-post:hover * {
	color: #ffffff;
}
 
.kb-query-item .job-card-title,
.kb-query-item h1,
.kb-query-item h2,
.kb-query-item h3,
.kb-query-item h4 {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
	overflow-wrap: break-word;
}
 
.kb-query-item .job-card-description {
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
	overflow-wrap: break-word;
}
 
.kb-query-item .job-card-team {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
}
 
.kb-query-item .job-card-team-name {
	overflow-wrap: break-word;
}
 
.kb-query-item .job-card-logo {
	width: 44px;
	height: 34px;
	flex-shrink: 0;
	display: inline-block;
	background-image: url('/wp-content/uploads/2026/09/logo-job-normal.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: opacity 0.2s ease;
}
 
.kb-query-item:hover .job-card-logo {
	background-image: url('/wp-content/uploads/2026/09/logo-job-hover.png');
}
 
.kb-query-item .job-card-criteria,
.kb-query-item .job-card-criteria li {
	list-style: none !important;
	list-style-type: none !important;
}
 
.kb-query-item .job-card-criteria {
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
 
.kb-query-item .job-card-criteria li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	line-height: 1.5;
}
 
.kb-query-item .job-card-check {
	position: relative;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 2px solid #ee9a20;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
 
.kb-query-item:hover .job-card-check {
	border-color: #ffffff;
}
 
.kb-query-item .job-card-check::after {
	content: "";
	width: 8px;
	height: 5px;
	border-left: 2px solid #ee9a20;
	border-bottom: 2px solid #ee9a20;
	transform: rotate(-45deg) translate(1px, -1px);
}
 
.kb-query-item:hover .job-card-check::after {
	border-color: #ffffff;
}
 
/*
 * Rendu responsive. La grille elle-même (nombre de colonnes selon la largeur
 * d'écran, ex. 3 → 2 → 1) est gérée par les réglages du bloc Kadence "Query
 * Loop (Adv)" dans l'éditeur (pas par ce fichier) : c'est là qu'il faut
 * vérifier les seuils utilisés (par ex. tablette et mobile) si la grille
 * elle-même ne s'empile pas comme voulu. Les règles ci-dessous ajustent
 * seulement l'intérieur de chaque carte pour les petits écrans (espacement,
 * tailles de texte, icône) une fois qu'elle a moins de place.
 */
 
/*
 * Forcer 1 seule offre par ligne sur mobile.
 *
 * On ne se fie plus au réglage "colonnes" du bloc Kadence "Query Loop (Adv)"
 * (celui-ci s'est avéré ne pas produire 1 colonne sur mobile chez vous, sans
 * doute parce que le réglage "Mobile" du bloc n'est pas configuré séparément
 * et hérite de celui de la tablette). Ces deux règles imposent 1 colonne à la
 * grille elle-même en dessous de 600px, avec `!important` et des sélecteurs
 * renforcés pour être sûr de gagner face au CSS que Kadence injecte : la
 * première règle couvre le cas où la grille est faite en CSS Grid, la
 * deuxième couvre le cas où elle est faite en Flexbox (au cas où l'une des
 * deux ne s'appliquerait pas selon la version de Kadence).
 */
@media (max-width: 600px) {
	html body .kb-query-grid-wrap.kb-query-grid-wrap {
		display: block !important;
		grid-template-columns: 1fr !important;
	}
 
	html body .kb-query-item.kb-query-block-post.kb-query-item.kb-query-block-post {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
 
	.kb-query-item.kb-query-block-post + .kb-query-item.kb-query-block-post {
		margin-top: 24px;
	}
}
 
@media (max-width: 782px) {
	.kb-query-item.kb-query-block-post {
		padding: 24px 20px;
		gap: 16px;
	}
 
	.kb-query-item .job-card-title,
	.kb-query-item h1,
	.kb-query-item h2,
	.kb-query-item h3,
	.kb-query-item h4 {
		font-size: 20px;
	}
}
 
@media (max-width: 480px) {
	.kb-query-item.kb-query-block-post {
		padding: 20px 16px;
		gap: 14px;
	}
 
	.kb-query-item .job-card-title,
	.kb-query-item h1,
	.kb-query-item h2,
	.kb-query-item h3,
	.kb-query-item h4 {
		font-size: 19px;
	}
 
	.kb-query-item .job-card-description,
	.kb-query-item .job-card-team,
	.kb-query-item .job-card-criteria li {
		font-size: 14px;
	}
 
	.kb-query-item .job-card-logo {
		width: 36px;
		height: 28px;
	}
}