/**
 * Colmar (www.colmar-springs.com) - formulaires du site, 2026-10-20 (mis à jour le 2026-10-23).
 *
 * Rendu des 4 formulaires « Formulaires » (com_siteforms) qui remplacent JSN UniForm 4.1.19 : Devenir fournisseur (1),
 * Devenir client (2), Intégrer Colmar (3), Suggestions (4). Feuille chargée par le gabarit APRÈS custom.css.
 *
 * Elle reproduit, sur le balisage de Formulaires (racine « #cf_N.presentation-colmar-jsn », lignes « .cf-control-group »,
 * étiquettes « label.cf-label », champs « .cf-input », reCAPTCHA, bouton « .cf-btn »), l'effet cumulé des feuilles qui
 * dessinaient les anciens formulaires JSN UniForm :
 *   - jsn-gui.css (avec jsn-jqueryui.css) du JSN Framework et form.css de JSN UniForm ;
 *   - la feuille générée par JSN UniForm pour chaque formulaire (thème « jsn-style-light ») ;
 *   - les règles JSN de templates/colmar/css/custom.css du gabarit d'origine.
 * Les valeurs sont les styles calculés des anciens formulaires, relevés à plusieurs largeurs d'écran et dans chaque
 * état (repos, champ actif, erreurs, reCAPTCHA refusé, envoi en cours, envoyé, survol).
 * La racine porte aussi les classes « jsn-uniform jsn-master » (suffixe de classe du formulaire) : les règles
 * « .jsn-master » et « .jsn-uniform.jsn-master .btn* » de custom.css s'y appliquent comme avant ; elles sont reprises
 * ici aussi pour que le rendu ne dépende pas de leur maintien dans custom.css.
 * Les classes d'état « ui-state-highlight » (ligne du champ actif), « error », les messages
 * « span.help-block > span.validation-result » et, pendant l'envoi, le voile « .jsn-modal-overlay » et l'indicateur
 * « .jsn-modal-indicator » sont posés par le « JavaScript personnalisé » de chaque formulaire (réglages du formulaire
 * dans Formulaires), comme le faisait form.js de JSN UniForm.
 */

/* ---- Racine (div#jsn_form_N.jsn-uniform.jsn-master) ---- */
.cf.presentation-colmar-jsn {
	font-size: 22px !important;
	font-family: 'DIN Pro' !important;
	font-weight: normal !important;
	line-height: 33px;
	text-align: left;
}

/* Formulaire « Suggestions » (custom.css : div#jsn_form_4) : centré, 1000 px au plus. Chez JSN ce tableau prenait
   toujours toute la place permise (les 7 lignes flottantes s'additionnent dans sa largeur « max-content », 2 047 px
   mesurés) : « width: 100% » donne la même largeur, min(largeur disponible, 1000 px). */
#cf_4.cf.presentation-colmar-jsn {
	display: table;
	width: 100%;
	margin: auto;
	max-width: 1000px;
}

.cf.presentation-colmar-jsn form {
	margin: 0;
}

/* Conteneurs en « position: relative » comme chez JSN (div.jsn-row-container.jsn-style-light et, autour des 7 lignes,
   div.jsn-row-container.row-fluid posé par le code personnalisé) : même découpage en calques par Chrome. */
.cf.presentation-colmar-jsn .cf-form-wrap,
.cf.presentation-colmar-jsn .jsn-row-container.row-fluid {
	position: relative;
}

.cf.presentation-colmar-jsn .jsn-row-container.row-fluid {
	display: block;
	margin: 0;
	padding: 0;
}

/* Zone des messages (div.message-uniform), vide au repos. */
.cf.presentation-colmar-jsn .cf-response {
	display: block;
}

/* ---- Lignes des champs (div.control-group : 10 px de marge intérieure, bordure transparente) ---- */
.cf.presentation-colmar-jsn .cf-control-group:not([data-type="recaptchaaio"]):not([data-type="submit"]) {
	display: flow-root;   /* contient l'étiquette flottante, comme la ligne flottante de JSN */
	width: 100%;
	margin: 0;
	padding: 10px;
	border: 1px solid transparent;
	box-sizing: border-box;
}

/* Ligne du champ actif (feuille générée par JSN : #FCF8E3 / #FBEED5). */
.cf.presentation-colmar-jsn .cf-control-group.ui-state-highlight {
	background-color: #FCF8E3 !important;
	border-color: #FBEED5 !important;
}

/* L'enveloppe de l'étiquette ne crée pas de boîte : l'étiquette flotte dans la ligne, comme chez JSN. */
.cf.presentation-colmar-jsn .cf-control-label {
	display: contents;
}

/* ---- Étiquettes (label.control-label) ---- */
.cf.presentation-colmar-jsn label.cf-label {
	display: block;
	float: left;
	width: 185px;
	margin: 0 10px 8px 0;
	padding: 11px 0 0;
	box-sizing: border-box;
	color: #1b3a9f;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 20px;
	font-weight: normal;
	line-height: 33px;
	text-align: left;
	cursor: default;
}

/* Astérisque des champs obligatoires (span.required). */
.cf.presentation-colmar-jsn .cf-required-label {
	display: inline;
	margin: 0 5px;
	color: #ff0000;
	font-weight: bold;
}

/* ---- Champs (div.controls > input / textarea) ---- */
.cf.presentation-colmar-jsn .cf-control-input {
	display: block;
}

.cf.presentation-colmar-jsn .cf-control-group .cf-input {
	display: inline-block;
	position: relative;
	top: 0;
	left: 0;
	box-sizing: content-box;
	width: 70%;
	max-width: 845px;
	height: 33px;
	margin: 0 0 9px;
	padding: 8px 15px;
	border: 1px solid rgb(27 58 159 / 90%);
	border-radius: 50px;
	outline: 0;
	box-shadow: none;
	background: #ffffff;
	color: #666666;
	font-family: inherit;
	font-size: 22px;
	font-weight: normal;
	line-height: 33px;
	vertical-align: baseline;
}

.cf.presentation-colmar-jsn .cf-control-group textarea.cf-input {
	height: auto;
	overflow: auto;
	resize: vertical;
	white-space: pre-wrap;
}

.cf.presentation-colmar-jsn .cf-control-group .cf-input:focus {
	outline: 0;
	box-shadow: none;
	border-color: rgb(27 58 159 / 90%);
}

/* custom.css, écrans de 992 px ou moins : champs à 95 %. (La règle « .jsn-narrow » de form.css, formulaire de
   480 px ou moins au chargement, n'avait aucun effet sur ce site : moins prioritaire que la règle de custom.css.) */
@media screen and (max-width: 992px) {
	.cf.presentation-colmar-jsn .cf-control-group .cf-input {
		width: 95%;
	}
}

/* ---- Messages d'erreur (span.help-block > span.validation-result.label.label-important) ---- */
.cf.presentation-colmar-jsn .help-block {
	display: inline;
	margin: 0;
	padding: 0;
	color: #ffffff;
}

.cf.presentation-colmar-jsn .help-block .validation-result {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background-color: #B94A48;
	color: #ffffff;
	font-size: 22px;
	font-weight: normal;
	line-height: 33px;
	text-shadow: none;
	white-space: normal;
	vertical-align: baseline;
}

/* ---- reCAPTCHA (div.control-group.g-recaptcha.jsn-uf-grecaptchav2) ---- */
.cf.presentation-colmar-jsn .cf-control-group[data-type="recaptchaaio"] {
	display: table;
	float: left;
	width: 100%;
	max-width: 360px;
	min-width: min-content;   /* un <fieldset> (Bootstrap 4 : min-width 0) ne doit pas devenir plus étroit que le reCAPTCHA, comme la div de JSN */
	margin: 0 0 0 221px;
	padding: 10px;
	border: 1px solid transparent;
	box-sizing: border-box;
}

.cf.presentation-colmar-jsn .cf-control-group[data-type="recaptchaaio"] .cf-control-input,
.cf.presentation-colmar-jsn .cf-control-group[data-type="recaptchaaio"] .g-recaptcha {
	display: block;
}

@media screen and (max-width: 1152px) {
	.cf.presentation-colmar-jsn .cf-control-group[data-type="recaptchaaio"] {
		margin-left: 0;
	}
}

/* ---- Ligne d'envoi (div.form-actions > div.btn-toolbar > button.btn.btn-primary.jsn-form-submit) ---- */
.cf.presentation-colmar-jsn .cf-control-group[data-type="submit"] {
	display: block;
	margin: -10px 54px 15px 5px;
	padding: 10px;
	border: 0;
	text-align: right;
}

.cf.presentation-colmar-jsn .cf-control-group[data-type="submit"]::before,
.cf.presentation-colmar-jsn .cf-control-group[data-type="submit"]::after {
	display: table;
	content: "";
	line-height: 0;
}

.cf.presentation-colmar-jsn .cf-control-group[data-type="submit"]::after {
	clear: both;
}

.cf.presentation-colmar-jsn .cf-control-group[data-type="submit"] .cf-control-input {
	display: block;
}

.cf.presentation-colmar-jsn .cf-control-group[data-type="submit"] .cf-text-left {
	display: inline-block;
	margin: 0;
	text-align: right;
}

/* Bouton « Valider » : Bootstrap 4 du gabarit (.btn, .btn-primary) + règles de custom.css, dans le même ordre
   (« border: none » en dernier : la couleur de bordure redevient celle du texte, comme chez JSN). */
.cf.presentation-colmar-jsn .cf-btn.btn-primary {
	color: #fff;
	background-color: #1b3a9f;
	border-color: #1b3a9f;
	margin-right: 20px;
	border-radius: 15px;
}

.cf.presentation-colmar-jsn .cf-btn.btn {
	width: 150px;
	border: none;
}

.cf.presentation-colmar-jsn .cf-btn.btn-primary:hover,
.cf.presentation-colmar-jsn .cf-btn.btn-primary:focus {
	color: #ffffff;
	background-color: #000000;
	border-color: #060606;
	margin-right: 20px;
	border-radius: 15px;
}

/* Indicateur d'attente propre à Formulaires : non affiché (les anciens formulaires montraient à la place le voile et
   l'indicateur ci-dessous). */
.cf.presentation-colmar-jsn .cf-spinner-container {
	display: none;
}

/* ---- Pendant l'envoi (2026-10-23) : voile gris sur toute la fenêtre et indicateur d'attente au centre ----
   Règles de jsn-jqueryui.css (JSN Framework) reprises telles quelles ; les deux éléments sont ajoutés à la fin de la
   page par le code personnalisé (« z-index: 1000; display: inline » et « display: block » dans leur attribut style),
   puis retirés à la réponse. Image : celle des anciens formulaires (icon-24-dark-loading-circle.gif, 24 × 24). */
.jsn-modal-overlay {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background: #000;
	opacity: 0.2;
}

.jsn-modal-indicator {
	display: none;
	content: ' ';
	background: #000 url(../images/formulaires-envoi.gif) no-repeat center center;
	width: 40px;
	height: 40px;
	position: fixed;
	left: 50%;
	top: 50%;
	margin-left: -20px;
	margin-top: -20px;
	border-radius: 3px;
	opacity: 0.7;
}

/* ---- Message après l'envoi (div.message-uniform > div.success-uniform.alert.alert-success.clearfix) ---- */
.cf.presentation-colmar-jsn .cf-response .alert {
	position: relative;
	margin: 0 0 16px;
	padding: 12px 20px;
	border: 1px solid #dddddd;
	border-radius: 4px;
	color: #666666;
}

.cf.presentation-colmar-jsn .cf-response .alert-success {
	background-color: #d4edda;
}

.cf.presentation-colmar-jsn .cf-response .alert p {
	margin: 5px 0 15px;
}