/**
 * Habillage de Ninja Forms.
 *
 * Ninja Forms apporte son propre style, conçu pour n'importe quel thème :
 * champs pleine largeur, libellés gris, bouton bleu. Rien de tout cela ne
 * ressemble au reste du site. Ces règles reprennent les jetons du kit — rayon,
 * trait, violet — pour qu'un formulaire passe inaperçu dans une page.
 *
 * Deux contraintes dictent l'écriture. Le balisage est construit en JavaScript
 * (`nf-field`, `nf-field-element`…) : on ne peut que l'habiller. Et la feuille
 * de Ninja Forms est chargée après celle du thème : à spécificité égale, c'est
 * la sienne qui gagne. Chaque sélecteur est donc préfixé par la section qui
 * porte le formulaire, ce qui suffit à reprendre la main sans « important ».
 *
 * Le module de secours du kit, employé quand Ninja Forms n'est pas installé,
 * garde sa propre feuille du côté du plugin.
 */

/* --- Cadre commun --- */

.section .nf-form-cont {
	max-width: 720px;
	margin-top: 8px;
}

/* Le titre du formulaire est déjà celui de la section. */
.section .nf-form-cont .nf-form-title {
	display: none;
}

.section .nf-form-cont .nf-form-fields-required {
	font-size: .8rem;
	color: var( --muted );
	margin-bottom: 26px;
}

.section .nf-form-cont .ninja-forms-req-symbol {
	color: var( --purple );
}

/* --- Disposition : nom et prénom côte à côte --- */

.section .nf-form-cont nf-fields-wrap {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 22px;
}

.section .nf-form-cont nf-field {
	display: block;
	min-width: 0;
	/* Par défaut un champ occupe la largeur ; seules les deux premières cases
	   — nom et prénom — se partagent la ligne. */
	grid-column: 1 / -1;
}

.section .nf-form-cont nf-field:nth-child(1),
.section .nf-form-cont nf-field:nth-child(2) {
	grid-column: span 1;
}

@media (max-width: 600px) {
	.section .nf-form-cont nf-fields-wrap {
		grid-template-columns: 1fr;
	}
	.section .nf-form-cont nf-field:nth-child(1),
	.section .nf-form-cont nf-field:nth-child(2) {
		grid-column: 1 / -1;
	}
}

.section .nf-form-cont .nf-field-container {
	margin-bottom: 0;
}

/* --- Libellés --- */

.section .nf-form-cont .nf-field-label label,
.section .nf-form-cont .nf-field-label .nf-label-span {
	display: block;
	margin-bottom: 9px;
	padding: 0;
	font-size: .88rem;
	font-weight: 700;
	color: var( --ink );
	line-height: 1.5;
}

/* --- Champs de saisie --- */

.section .nf-form-cont .nf-field-element input[type="text"],
.section .nf-form-cont .nf-field-element input[type="email"],
.section .nf-form-cont .nf-field-element input[type="tel"],
.section .nf-form-cont .nf-field-element input[type="url"],
.section .nf-form-cont .nf-field-element input[type="number"],
.section .nf-form-cont .nf-field-element textarea,
.section .nf-form-cont .nf-field-element select {
	width: 100%;
	height: auto;
	padding: 14px 16px;
	min-height: 52px;
	border: 1px solid #cdbfd9;
	border-radius: 12px;
	background: #fff;
	color: var( --ink );
	font-size: .97rem;
	line-height: 1.6;
	box-shadow: none;
	transition: border-color .2s, box-shadow .2s;
}

.section .nf-form-cont .nf-field-element textarea {
	min-height: 150px;
	resize: vertical;
}

.section .nf-form-cont .nf-field-element input:hover,
.section .nf-form-cont .nf-field-element textarea:hover {
	border-color: #b7a1cc;
}

.section .nf-form-cont .nf-field-element input:focus,
.section .nf-form-cont .nf-field-element textarea:focus,
.section .nf-form-cont .nf-field-element select:focus {
	border-color: var( --purple );
	box-shadow: 0 0 0 3px #8b6bb42a;
	outline: none;
}

.section .nf-form-cont .nf-field-element input::placeholder,
.section .nf-form-cont .nf-field-element textarea::placeholder {
	color: #9b90a6;
}

/* --- Listes de cases à cocher --- */

.section .nf-form-cont .listcheckbox-wrap .nf-field-element ul,
.section .nf-form-cont .listradio-wrap .nf-field-element ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.section .nf-form-cont .listcheckbox-wrap .nf-field-element li,
.section .nf-form-cont .listradio-wrap .nf-field-element li {
	margin: 0;
	padding: 0;
	position: relative;
}

/* Chaque option prend la forme d'une pastille : plus lisible qu'une petite
   case isolée, et assez grande pour être touchée au doigt. La case elle-même
   est posée par-dessus, faute de pouvoir la déplacer dans le libellé. */
.section .nf-form-cont .listcheckbox-wrap .nf-field-element label,
.section .nf-form-cont .listradio-wrap .nf-field-element label {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 11px 17px 11px 44px;
	border: 1px solid #ddd2e6;
	border-radius: 999px;
	background: #fff;
	font-size: .9rem;
	font-weight: 500;
	color: var( --ink );
	cursor: pointer;
	transition: border-color .2s, background .2s;
}

.section .nf-form-cont .listcheckbox-wrap .nf-field-element label:hover,
.section .nf-form-cont .listradio-wrap .nf-field-element label:hover {
	border-color: var( --purple );
	background: #faf7fd;
}

.section .nf-form-cont .listcheckbox-wrap .nf-field-element li input,
.section .nf-form-cont .listradio-wrap .nf-field-element li input {
	position: absolute;
	left: 17px;
	top: 50%;
	transform: translateY( -50% );
	z-index: 1;
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var( --purple );
}

/* --- Case unique : lettre d'information, consentement --- */

.section .nf-form-cont .checkbox-container .field-wrap {
	display: flex;
	/* Ninja Forms empile ses champs en colonne : sans cette ligne, la case
	   reste au-dessus de son libellé. */
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
}

/* Ninja Forms place le libellé avant la case : on inverse pour retrouver
   l'ordre attendu d'une case à cocher. */
.section .nf-form-cont .checkbox-container .nf-field-label {
	order: 2;
	flex: 1 1 auto;
	width: auto;
	margin: 0;
}

.section .nf-form-cont .checkbox-container .nf-field-element {
	order: 1;
	/* Le conteneur du champ occupe toute la largeur par défaut, ce qui rejette
	   le libellé à l'autre bout de la ligne : il se réduit à sa case. */
	flex: 0 0 auto;
	width: auto;
	padding-top: 2px;
}

.section .nf-form-cont .checkbox-container .nf-field-label label,
.section .nf-form-cont .checkbox-container .nf-field-label .nf-label-span {
	margin-bottom: 0;
	font-weight: 400;
	font-size: .88rem;
	line-height: 1.6;
	color: var( --muted );
	cursor: pointer;
}

.section .nf-form-cont .checkbox-container .nf-field-element input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var( --purple );
}

/* --- Bouton d'envoi --- */

.section .nf-form-cont .submit-container .nf-field-element input,
.section .nf-form-cont .nf-field-element input[type="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto;
	min-height: 50px;
	padding: 15px 26px;
	border: 1px solid transparent;
	border-radius: 11px;
	background: #1d1a27;
	color: #fff;
	font-size: .94rem;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	box-shadow: inset 0 -7px 14px #28265399, 0 5px 15px #201b2712;
	transition: transform .2s, background .2s;
}

.section .nf-form-cont .submit-container .nf-field-element input:hover,
.section .nf-form-cont .nf-field-element input[type="button"]:hover {
	background: #383044;
	transform: translateY( -2px );
}

.section .nf-form-cont .submit-container {
	margin-top: 8px;
}

/* --- Messages --- */

.section .nf-form-cont .nf-error-msg,
.section .nf-form-cont .nf-error-wrap {
	color: #a03a3a;
	font-size: .84rem;
	margin-top: 7px;
}

.section .nf-form-cont .nf-field-element input.nf-error,
.section .nf-form-cont .nf-field-element textarea.nf-error {
	border-color: #c98a8a;
}

/* Ninja Forms encadre le champ entier en rouge : la bordure du champ suffit,
   et le cadre casse la grille. */
.section .nf-form-cont .nf-error.field-wrap .nf-field-element::after {
	display: none;
}

.section .nf-form-cont .nf-response-msg {
	padding: 22px 24px;
	border: 1px solid #cfe3d3;
	border-radius: var( --radius );
	background: #f2f9f3;
	color: #1f5b32;
	font-size: .97rem;
}

.section .nf-form-cont .nf-response-msg:empty {
	display: none;
}

/* --- Mentions sous le formulaire --- */

.section .narra-form-consent {
	max-width: 720px;
	margin-top: 20px;
	font-size: .82rem;
	line-height: 1.7;
	color: var( --muted );
}

.section .narra-form-consent a {
	color: var( --purple );
	text-decoration: underline;
	text-underline-offset: 3px;
}