/*
 * Rendu public d'un formulaire du form builder (jade_render_form(), voir
 * includes/forms.php) — chargé uniquement sur les pages qui affichent
 * effectivement un formulaire (form.php, et les fiches activité/annonce qui
 * utilisent le shortcode [form id="..."]), jamais sur tout le site.
 * Self-contained (ne dépend pas d'accueil.css) — même choix que admin.css.
 */

.jade-hp-field {
	position: absolute;
	left: -9999px;
	top: -9999px;
}

/* Habillage/emplacement (voir jade_render_form() dans includes/forms.php et
   admin/form-templates.php) : .jade-form-wrap est le conteneur externe (utile
   au réglage "encadré latéral" ci-dessous, et comme point d'accroche pour un
   modèle visuel qui a besoin de styler tout le fond, ex. le dégradé violet) ;
   .jade-form-card est la vraie "carte" que chaque modèle habille (fond,
   padding, coins arrondis, ombre...). Sans modèle choisi, ces deux
   conteneurs restent neutres et le style de base ci-dessous (.jade-form...)
   s'applique tel quel, inchangé par rapport à avant l'ajout des modèles.
   .jade-form-card{padding} n'est utile qu'avec un modèle : reste vide (0) au
   niveau du conteneur, chaque modèle qui en a besoin le redéfinit
   explicitement. */
.jade-form-wrap {
	margin: 24px 0;
	/* Le header du site est en position sticky (voir site-custom.css) : sans
	   cette marge, un lien-ancre "Postuler" vers ce formulaire (voir
	   admin/annonce-edit.php + le contenu de l'annonce) fait atterrir le champ
	   du haut juste sous le header, à moitié caché. */
	scroll-margin-top: 110px;
}

/* "Encadré latéral" (admin/form-edit.php réglage "Où afficher") : rend le
   formulaire visuellement distinct d'un simple bloc de contenu (carte
   resserrée, ombre, légère mise en avant), même si le shortcode reste
   physiquement à l'endroit choisi dans le texte — le site n'a pas de vraie
   zone "sidebar" générique commune à toutes les pages, donc ce style se
   suffit à lui-même pour marquer visuellement "ceci est un encadré", posé où
   l'article le place. */
.jade-form-display-sidebar {
	max-width: 400px;
}

.jade-form-display-sidebar .jade-form-card {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 12px;
	padding: 24px 22px;
	box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.25);
}

.jade-form-display-sidebar .jade-form,
.jade-form-display-sidebar .jade-form-success {
	max-width: none;
}

.jade-form {
	max-width: 560px;
}

.jade-form-field {
	margin-bottom: 20px;
}

.jade-form-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 14px;
	color: #333;
}

.jade-form-field input[type="text"],
.jade-form-field input[type="email"],
.jade-form-field input[type="password"],
.jade-form-field input[type="number"],
.jade-form-field input[type="tel"],
.jade-form-field input[type="url"],
.jade-form-field input[type="date"],
.jade-form-field input[type="time"],
.jade-form-field input[type="datetime-local"],
.jade-form-field input[type="file"],
.jade-form-field select,
.jade-form-field textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #ddd;
	border-radius: 8px;
	font-size: 15px;
	font-family: inherit;
	box-sizing: border-box;
	background: #fff;
}

.jade-form-field input:focus,
.jade-form-field select:focus,
.jade-form-field textarea:focus {
	outline: none;
	border-color: var(--jade-primary, #097D50);
}

.jade-form-field textarea {
	min-height: 130px;
	resize: vertical;
}

.jade-form-checkbox-label,
.jade-form-radio-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	margin: 6px 0;
	font-size: 15px;
	color: #333;
}

.jade-form-checkbox-label input,
.jade-form-radio-label input {
	width: auto;
}

.jade-form-field--error input,
.jade-form-field--error select,
.jade-form-field--error textarea {
	border-color: #b32424;
}

.jade-form-error {
	color: #b32424;
	font-size: 13px;
	margin: 6px 0 0;
}

.jade-form-error--global {
	background: #fdecea;
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 20px;
}

.jade-form-recaptcha {
	margin-bottom: 16px;
}

.jade-form-submit {
	margin-top: 8px;
}

.jade-form-success {
	background: var(--jade-background, #F2F1EE);
	border-left: 4px solid var(--jade-primary, #097D50);
	color: #126D30;
	padding: 20px 24px;
	border-radius: 8px;
	font-weight: 600;
	max-width: 560px;
}