/**
 * Styles front — Module Recrutement.
 * Dépend de belval-front.css (variables de la charte + styles partagés :
 * .belval-btn, .belval-champ, .belval-message, .belval-rgpd, .belval-hp…).
 */

/* ---------------------------------------------------------------------
 *  Liste des offres (une carte par ligne, sans limite)
 * ------------------------------------------------------------------- */
.belval-recrut .belval-offres {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* Deux offres par ligne. */
	gap: 20px;
}

.belval-offre {
	display: flex;
	align-items: center;
	gap: 28px;
	background: #fff;
	border: 1px solid var(--gris-clair);
	border-radius: 12px;
	padding: 28px 32px;
}

.belval-offre-infos {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.belval-offre-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.belval-offre-badge {
	font-family: "Alan Sans", "Segoe UI", sans-serif;
	font-weight: 600;
	font-size: 13px;
	border-radius: 20px;
	padding: 4px 12px;
	line-height: 1.4;
}

/* Type de contrat : vert Belval, texte blanc. */
.belval-badge-contrat {
	background: var(--vert-belval);
	color: #fff;
}

/* Temps de travail : gris clair, texte vert profond. */
.belval-badge-temps {
	background: var(--gris-clair);
	color: var(--vert-profond);
}

.belval-offre-titre {
	margin: 0;
	font-size: 18px;
	color: var(--noir-vegetal);
	font-family: "Alan Sans", "Segoe UI", sans-serif;
	font-weight: 600;
}

.belval-offre-sous {
	margin: 0;
	font-size: 13px;
	color: var(--gris-pierre);
}

.belval-offre-desc {
	font-size: 15px;
	color: var(--vert-profond);
}

.belval-offre-desc p {
	margin: 4px 0 0;
}

.belval-offre-action {
	flex-shrink: 0;
}

/* ---------------------------------------------------------------------
 *  Modale « Postuler »
 * ------------------------------------------------------------------- */
.belval-modal[hidden] {
	display: none;
}

.belval-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px 16px;
	overflow-y: auto;
}

.belval-modal-fond {
	position: fixed;
	inset: 0;
	background: rgba(30, 42, 27, 0.55);
}

.belval-modal-boite {
	position: relative;
	z-index: 1;
	background: var(--blanc-naturel);
	border-radius: 12px;
	border: 1px solid var(--gris-clair);
	max-width: 640px;
	width: 100%;
	margin: auto;
	padding: 28px;
	box-shadow: 0 12px 40px rgba(30, 42, 27, 0.25);
}

/* On force l'absence de fond/bordure : certains thèmes (dont Hello Elementor)
   stylisent les <button> avec un fond par défaut. */
.belval-recrut .belval-modal-fermer,
.belval-recrut .belval-modal-fermer:hover,
.belval-recrut .belval-modal-fermer:focus {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	border-radius: 8px;
}

.belval-recrut .belval-modal-fermer {
	color: var(--vert-profond);
}

.belval-recrut .belval-modal-fermer:hover,
.belval-recrut .belval-modal-fermer:focus {
	color: var(--terre-bois); /* Croix en brun au survol, sans fond. */
}

.belval-modal-titre {
	margin: 0 0 4px;
	font-size: 22px;
	color: var(--vert-belval);
	font-family: "Alan Sans", "Segoe UI", sans-serif;
	font-weight: 600;
}

.belval-modal-poste {
	margin: 0 0 16px;
	font-size: 15px;
	color: var(--gris-pierre);
	font-weight: 600;
}

/* ---------------------------------------------------------------------
 *  Formulaire de candidature (modale + spontanée)
 * ------------------------------------------------------------------- */
/* Chaque champ fichier occupe toute la largeur (un par ligne) pour que
   le texte natif « Choisir un fichier — Aucun fichier choisi » soit visible
   en entier, sans troncature. */
.belval-champ-fichier {
	grid-column: 1 / -1;
}

.belval-champ-fichier input[type="file"] {
	display: block;
	width: 100%;
	padding: 10px;
	border: 1px dashed var(--gris-clair);
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
}

.belval-champ-aide {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--gris-pierre);
}

/* ---------------------------------------------------------------------
 *  Responsive
 * ------------------------------------------------------------------- */
/* Tablette : on repasse à une offre par ligne pour garder de la place. */
@media (max-width: 900px) {
	.belval-recrut .belval-offres {
		grid-template-columns: 1fr;
	}
}

/* Mobile : la carte s'empile (infos puis bouton pleine largeur). */
@media (max-width: 640px) {
	.belval-offre {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.belval-offre-action {
		width: 100%;
	}

	.belval-offre-action .belval-btn {
		width: 100%;
		justify-content: center;
	}
}