/**
 * NovaForms — Styles frontend. Personnalisables via les variables --nf-*.
 */
/*
 * DEUX contextes de texte, à ne jamais confondre.
 *
 * Une même variable servait au texte posé sur le FOND D'ACCUEIL (libellés,
 * aides, titres) et au texte saisi DANS les champs. Or ces deux textes n'ont
 * pas le même arrière-plan : les champs ont le leur (--nf-field-bg, blanc),
 * le reste hérite de la page. Les lier revenait à ne pouvoir en rendre qu'un
 * seul lisible — d'où des libellés gris foncé invisibles sur une carte sombre,
 * alors que les champs, eux, restaient parfaitement lisibles.
 */
.novaform-wrap {
	--nf-primary: #2563eb;
	--nf-radius: 10px;
	--nf-gap: 18px;
	--nf-border: #d7dbe0;

	/* Texte posé sur le fond d'accueil. `inherit` par défaut : le formulaire
	   prend AUTOMATIQUEMENT la couleur de texte de son conteneur, et reste donc
	   lisible sur n'importe quel fond sans aucun réglage. Une couleur explicite
	   choisie dans le constructeur remplace cette valeur. */
	--nf-text: inherit;

	/* Texte saisi dans les champs : lié à --nf-field-bg, pas au fond d'accueil. */
	--nf-field-bg: #fff;
	--nf-field-text: #1f2937;

	--nf-error: #dc2626;
	max-width: 720px;
}

/* Texte secondaire : même couleur que le texte principal, simplement atténuée.
   L'atténuation passe par `opacity` et non par color-mix() — cette dernière ne
   peut pas opérer sur le mot-clé `inherit`, et n'est de toute façon pas
   supportée par les navigateurs plus anciens, où la couleur retombait alors sur
   l'héritage du thème précisément là où le réglage devait s'appliquer. */
.novaform-desc,
.novaform-sublabel,
.novaform-paragraph,
.novaform-heading p,
.novaform-file__hint { color: var(--nf-text); opacity: .72; }

.novaform-fields {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nf-gap);
}
.novaform-field { flex: 1 1 100%; min-width: 0; }
.novaform-field.nf-w-half { flex: 1 1 calc(50% - var(--nf-gap)); }
.novaform-field.nf-w-third { flex: 1 1 calc(33.333% - var(--nf-gap)); }

.novaform-label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	color: var(--nf-text);
	margin-bottom: 6px;
}
.novaform-req { color: var(--nf-error); margin-left: 2px; }

.novaform-input,
.novaform-textarea,
.novaform-select,
.novaform-file {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 13px;
	font-size: 15px;
	/* Texte SAISI : suit le fond du champ, jamais celui de la page. */
	color: var(--nf-field-text);
	background: var(--nf-field-bg);
	border: 1px solid var(--nf-border);
	border-radius: var(--nf-radius);
	transition: border-color .15s, box-shadow .15s;
	font-family: inherit;
}
.novaform-textarea { resize: vertical; min-height: 110px; }
.novaform-input:focus,
.novaform-textarea:focus,
.novaform-select:focus,
.novaform-file:focus {
	outline: none;
	border-color: var(--nf-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nf-primary) 18%, transparent);
}

.novaform-desc { display: block; margin-top: 5px; font-size: 12.5px; }
.novaform-error { display: block; margin-top: 5px; font-size: 12.5px; color: var(--nf-error); font-weight: 600; }
.novaform-field.has-error .novaform-input,
.novaform-field.has-error .novaform-textarea,
.novaform-field.has-error .novaform-select { border-color: var(--nf-error); }

/* Champ nom (prénom + nom) */
.novaform-name { display: flex; gap: 12px; }
.novaform-name__col { flex: 1; }
.novaform-sublabel { display: block; margin-top: 4px; font-size: 12px; }

/* Choix */
.novaform-choices { display: flex; flex-direction: column; gap: 8px; }
.novaform-choice,
.novaform-consent { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; color: var(--nf-text); cursor: pointer; line-height: 1.5; }
.novaform-choice input,
.novaform-consent input { margin-top: 3px; accent-color: var(--nf-primary); }
.novaform-consent a { color: var(--nf-primary); }

/* Labels en ligne */
.novaform--labels-inline .novaform-field:not(.novaform-field--consent):not(.novaform-heading):not(.novaform-paragraph) {
	display: grid;
	grid-template-columns: 160px 1fr;
	align-items: start;
	gap: 12px;
}
.novaform--labels-inline .novaform-label { margin-bottom: 0; padding-top: 11px; }

/* Mise en page */
.novaform-heading h3 { margin: 8px 0 4px; font-size: 18px; color: var(--nf-text); }
.novaform-heading p { margin: 0 0 4px; font-size: 14px; }
.novaform-paragraph { font-size: 14.5px; }
.novaform-divider hr { border: none; border-top: 1px solid var(--nf-border); margin: 6px 0; }

/* Note (étoiles) */
.novaform-rating { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.novaform-rating__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.novaform-rating__star { font-size: 28px; color: #d7dbe0; cursor: pointer; line-height: 1; transition: color .12s; }
.novaform-rating__star:hover,
.novaform-rating__star:hover ~ .novaform-rating__star,
.novaform-rating__input:checked ~ .novaform-rating__star { color: #f5b014; }

/* Curseur */
.novaform-range { display: flex; align-items: center; gap: 12px; }
.novaform-range__input { flex: 1; accent-color: var(--nf-primary); }
.novaform-range__val { min-width: 36px; text-align: center; font-weight: 600; color: var(--nf-primary); background: color-mix(in srgb, var(--nf-primary) 10%, #fff); border-radius: 6px; padding: 2px 8px; }

/* Adresse */
.novaform-address { display: flex; flex-direction: column; gap: 10px; }
.novaform-address__row { display: flex; gap: 10px; }
.novaform-address__row .novaform-input { flex: 1; }

/* Honeypot */
.novaform-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Actions */
.novaform-actions { margin-top: 22px; }
.novaform-submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--nf-primary);
	color: #fff;
	border: none;
	border-radius: var(--nf-radius);
	padding: 13px 26px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: filter .15s, transform .05s;
	font-family: inherit;
}
.novaform-submit:hover { filter: brightness(1.08); }
.novaform-submit:active { transform: translateY(1px); }
.novaform-submit:disabled { opacity: .6; cursor: progress; }
.novaform--btn-center .novaform-actions { text-align: center; }
.novaform--btn-right .novaform-actions { text-align: right; }
.novaform--btn-full .novaform-submit { width: 100%; justify-content: center; }

.novaform-submit__spinner {
	width: 16px; height: 16px;
	border: 2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: nf-spin .6s linear infinite;
}
@keyframes nf-spin { to { transform: rotate(360deg); } }

/* Multi-étapes */
.novaform-progress { display: flex; align-items: center; gap: 0; margin-bottom: 24px; }
.novaform-progress__step {
	width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	background: #eef0f2; color: #6b7280; font-weight: 600; font-size: 13px;
	position: relative; transition: background .2s, color .2s;
}
.novaform-progress__step:not(:last-child) { margin-right: 38px; }
.novaform-progress__step:not(:last-child)::after {
	content: ''; position: absolute; left: 100%; top: 50%; width: 38px; height: 2px; background: #eef0f2;
}
.novaform-progress__step.is-active { background: var(--nf-primary); color: #fff; }
.novaform-progress__step.is-active:not(:last-child)::after { background: var(--nf-primary); }

.novaform-nav { display: flex; gap: 12px; margin-top: 22px; }
.novaform-prev, .novaform-next {
	border-radius: var(--nf-radius); padding: 12px 24px; font-size: 15px; font-weight: 600;
	cursor: pointer; font-family: inherit; border: 1px solid var(--nf-border); background: var(--nf-field-bg); color: var(--nf-field-text);
}
.novaform-next { background: var(--nf-primary); color: #fff; border-color: var(--nf-primary); margin-left: auto; }
.novaform-next:hover { filter: brightness(1.08); }
/* Survol : simple assombrissement du fond du champ, et non une couleur claire
   codée en dur — celle-ci écrasait un fond de champ configuré en sombre et
   faisait disparaître le libellé sous le curseur (contraste ~1:1). */
.novaform-prev:hover { filter: brightness(.95); }
.novaform--multistep .novaform-nav .novaform-submit { margin-left: auto; }

/* Calcul */
.novaform-calc { display: flex; align-items: center; gap: 8px; }
.novaform-calc__out { font-weight: 700; color: var(--nf-primary); background: color-mix(in srgb, var(--nf-primary) 6%, #fff); max-width: 200px; }
.novaform-calc__prefix, .novaform-calc__suffix { font-weight: 600; color: var(--nf-text); }

/*
 * Messages — fond OPAQUE, comme les champs.
 *
 * Une version précédente dérivait fond et bordure de la couleur du texte par
 * color-mix() vers `transparent`, en laissant transparaître la page. Sur un
 * fond sombre, le texte vert ou rouge foncé se retrouvait sur une teinte à 10 %
 * de lui-même composée sur du sombre : contraste ~3:1 pour le succès, ~2,6:1
 * pour l'erreur, tous deux sous le seuil AA. Le cas est d'autant plus gênant
 * que le formulaire est masqué après un envoi réussi — ce message est alors
 * seul à l'écran. Sans support de color-mix(), `background` ET le raccourci
 * `border` étaient de surcroît invalidés, et la boîte disparaissait purement et
 * simplement, y compris sur fond clair.
 *
 * Un message est une boîte : il porte son propre fond, donc il reste lisible
 * quel que soit celui de la page — exactement le principe retenu pour les
 * champs de saisie. Les couples restent surchargeables par variable.
 */
.novaform-message {
	padding: 14px 16px;
	border-radius: var(--nf-radius);
	margin-bottom: 16px;
	font-size: 14.5px;
	font-weight: 500;
}
.novaform-message--success {
	color: var(--nf-success-text, #027a48);
	background: var(--nf-success-bg, #ecfdf3);
	border: 1px solid var(--nf-success-border, #a6f4c5);
}
.novaform-message--error {
	color: var(--nf-danger-text, #b42318);
	background: var(--nf-danger-bg, #fef3f2);
	border: 1px solid var(--nf-danger-border, #fecdca);
}

@media (max-width: 600px) {
	.novaform-field.nf-w-half,
	.novaform-field.nf-w-third { flex: 1 1 100%; }
	.novaform-name { flex-direction: column; }
	.novaform--labels-inline .novaform-field { grid-template-columns: 1fr !important; }
	.novaform--labels-inline .novaform-label { padding-top: 0; margin-bottom: 6px; }
}

/* Champs avancés — indice de téléversement */
.novaform-file__hint { display: block; margin-top: 4px; font-size: 12px; }

/* Barre de progression */
.novaform-progressbar { height: 6px; background: #e5e7eb; border-radius: 999px; overflow: hidden; margin-bottom: 16px; }
.novaform-progressbar__fill { display: block; height: 100%; width: 0; background: var(--nf-primary, #2563eb); transition: width .35s ease; }

/* Mode conversationnel */
.novaform--conversational .novaform-field { display: none; }
.novaform--conversational .novaform-field.novaform-screen--active { display: block; animation: nf-fade .3s ease; }
.novaform--conversational .novaform-label { font-size: 1.25em; }
.novaform-cnav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.novaform-cnav .novaform-next { background: var(--nf-primary, #2563eb); color: #fff; border: 0; padding: 10px 22px; border-radius: var(--nf-radius, 8px); cursor: pointer; }
.novaform-cnav .novaform-prev { background: transparent; color: var(--nf-text); border: 1px solid #cbd5e1; padding: 10px 18px; border-radius: var(--nf-radius, 8px); cursor: pointer; }
@keyframes nf-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Signature électronique */
.novaform-signature__pad { width: 100%; max-width: 100%; height: auto; border: 1px dashed #cbd5e1; border-radius: var(--nf-radius, 8px); background: #fff; touch-action: none; cursor: crosshair; }
.novaform-signature__bar { margin-top: 6px; }
/* Fond transparent : la couleur doit donc suivre celle du fond d'accueil.
   Sans déclaration, ce bouton prenait le noir par défaut de l'agent
   utilisateur et devenait invisible sur une carte sombre. */
.novaform-signature__clear { background: transparent; color: var(--nf-text); border: 1px solid #cbd5e1; padding: 4px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; }

/* Accessibilité : texte réservé aux lecteurs d'écran */
.novaform-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.novaform-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.novaform-input[aria-invalid="true"], .novaform-textarea[aria-invalid="true"], .novaform-select[aria-invalid="true"] { border-color: #dc2626; }
/* Visibilité du focus clavier (WCAG 2.4.7) */
.novaform :focus-visible { outline: 2px solid var(--nf-primary, #2563eb); outline-offset: 2px; }