/*
 * Gabarit uscrmgp 2.2.3 (etape MG-7a) : habillage du formulaire de contact Convert Forms (#cf_1, classes du formulaire
 * « mg-contact jsn-form-1 ») comme le formulaire JSN Uniform de production (#jsn_form_1).
 *
 * Valeurs relevees sur la reference locale 8201 (= production au MG-0) : styles calcules et boites de chaque partie,
 * aux 5 largeurs (preuves\apres\mg7\formulaire\mesures-avant.json, regles-jsn-<L>.json), c'est-a-dire les regles de
 * jsn-general.css, jsn-bootstrap.css, form.css, de la feuille generee par JSN (generateStylePages) et de custom.css
 * (#jsn_form_1, l. 918 a 974), recopiees ici avec leurs valeurs calculees. Seul ce formulaire est vise (ID + classe), ce
 * qui l'emporte sur convertforms.css (charge apres) sans !important.
 *
 * Structure reproduite : colonne en « display: table » ; groupes de 10 px de marge interne et 1 px de bordure
 * transparente ; etiquette Roboto 17 px noire (etoile rouge en gras, 5 px de chaque cote) ; champ gris clair a bordure
 * gauche bleue de 6 px, en largeur 95 % de contenu (il deborde de la colonne comme en production) ; zone anti-robot de
 * 100 px (reCAPTCHA v2 de production, 304 px de large ; ici ALTCHA, C20) ; bouton de 150 x 32 px aligne a droite a
 * 54 px du bord, comme .form-actions / .btn-toolbar de JSN.
 */

/* Colonne : div#jsn_form_1 (custom.css) et .jsn-master (jsn-general.css) */
#cf_1.mg-contact {
	display: table;
	width: 100%; /* largeur de la colonne, ou largeur minimale du contenu si elle est plus grande (320 px) */
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.5em;
	box-sizing: border-box;
}

#cf_1.mg-contact form {
	display: block;
	width: auto;
	max-width: none;
	margin: 0;
	line-height: inherit;
	font-family: inherit;
	will-change: auto;
}

#cf_1.mg-contact .cf-form-wrap {
	width: auto;
	padding: 0;
}

#cf_1.mg-contact .cf-fields {
	display: block;
	margin: 0;
}

/* Groupes : .jsn-bootstrap .jsn-form-content .control-group (form.css et feuille generee) */
#cf_1.mg-contact .cf-control-group {
	display: block;
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 10px;
	border: 1px solid transparent;
	box-sizing: border-box;
	transition: background 0.3s ease-out;
}

/* Etiquettes : .control-group .control-label (custom.css) */
#cf_1.mg-contact .cf-control-label {
	display: block;
	margin: 0;
	padding: 0;
}

#cf_1.mg-contact .cf-label {
	display: flex;
	width: 200px;
	max-width: 100%;
	height: auto;
	margin: 0 10px 5px 0;
	padding: 0;
	color: #000;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 17px;
	line-height: 18px;
	text-align: left;
}

/* Etoile : .jsn-form-content span.required (form.css) ; l'etiquette en flex retire l'espace avant l'etoile, comme en
 * production (« Nom / Prénom<span class="required">*</span> ») */
#cf_1.mg-contact .cf-label .cf-required-label {
	margin: 0 5px;
	color: red;
	font-weight: bold;
}

/* Zone des champs : .controls */
#cf_1.mg-contact .cf-control-input {
	display: block;
	gap: 0;
	font-size: 12px;
	line-height: 18px;
}

/* Champs : .controls input / textarea (custom.css), .jsn-input-*-fluid (95 %), marge basse de form.css */
#cf_1.mg-contact .cf-input {
	display: inline-block;
	position: relative;
	box-sizing: content-box;
	width: 95%;
	max-width: 845px;
	height: 18px;
	margin: 0 0 9px;
	padding: 10px 15px;
	border: none;
	border-left: 6px solid rgb(67 120 195);
	border-radius: 0;
	outline: 0;
	background: #f4f4f4;
	box-shadow: none;
	color: #666666;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: inherit;
	line-height: 18px;
	text-align: start;
	vertical-align: baseline;
}

#cf_1.mg-contact textarea.cf-input {
	height: 180px;
	overflow: auto;
}

#cf_1.mg-contact .cf-input:focus,
#cf_1.mg-contact .cf-input:invalid:focus {
	border: none;
	border-left: 6px solid rgb(67 120 195);
	box-shadow: none;
	color: #666666;
}

/* Zone anti-robot : .control-group.g-recaptcha (flottante, 100 px de haut ; widget reCAPTCHA v2 de 304 px) */
#cf_1.mg-contact fieldset.cf-control-group[data-type="altcha"] {
	float: left;
	width: 100%;
	height: 100px;
	min-width: 0;
	margin: 0;
}

#cf_1.mg-contact fieldset.cf-control-group[data-type="altcha"] .cf-control-input {
	min-width: 304px;
}

/* Boutons : .form-actions (custom.css), .btn-toolbar et .btn-primary de JSN */
#cf_1.mg-contact .cf-control-group[data-type="submit"] {
	width: auto;
	margin: -10px 54px 15px 5px;
	padding: 10px;
	border: 0;
	text-align: right;
}

#cf_1.mg-contact .cf-control-group[data-type="submit"] .cf-control-input {
	text-align: right;
}

#cf_1.mg-contact .cf-control-group[data-type="submit"] .cf-text-right {
	display: inline-block;
	margin-left: -5px;
	text-align: right;
}

#cf_1.mg-contact .cf-btn {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	width: 150px;
	max-width: none;
	height: auto;
	margin: 0 0 0 5px;
	padding: 6px 12px;
	border: none;
	border-radius: 5px;
	background-color: #1b3a9f;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	cursor: pointer;
	opacity: 1;
}

#cf_1.mg-contact .cf-btn:hover,
#cf_1.mg-contact .cf-btn:focus {
	color: #1b3a9f;
	background-color: #f3da09;
	opacity: 1;
}

/* Gabarit 2.2.4 (etape MG-7b) : apres un envoi reussi, formulaire masque et seul le message affiche (action JSN 4 :
 * message, formulaire masque ; Convert Forms : hideform = 1, voir rapports-source\formulaires-mapping.md). La regle
 * « #cf_1.mg-contact .cf-fields { display: block } » ci-dessus l'emportait sur celle de convertforms.css
 * (.convertforms.cf-success.cf-success-hideform .cf-fields), moins specifique : on la retablit ici. */
#cf_1.mg-contact.cf-success.cf-success-hideform .cf-fields,
#cf_1.mg-contact.cf-success.cf-success-hideform .cf-footer {
	display: none;
}