/*
 * Blog Fox, lot D : habillage neutre des formulaires des articles, sur les jetons du blog (--fox-blog-*), à relier à la charte.
 * Boutons et champs : rayon 4 px, hauteur 35 px, focus noir visible. Sans JavaScript toutes les étapes restent affichées.
 */
.fox-form {
	--fox-form-accent: var(--fox-blog-accent, #EC7B35);
	--fox-form-text: var(--fox-blog-text, #1f2328);
	--fox-form-muted: var(--fox-blog-muted, #5b6470);
	--fox-form-border: var(--fox-blog-border, #d9dde2);
	--fox-form-surface: var(--fox-blog-surface, #f6f7f9);
	--fox-form-error: #b42318;
	--fox-form-success: #1a7f37;
	--fox-form-radius: var(--fox-blog-radius, 4px);
	margin: 32px 0;
	padding: 24px;
	border: 1px solid var(--fox-form-border);
	border-radius: var(--fox-form-radius);
	background: #fff;
	color: var(--fox-form-text);
	font: inherit;
	max-width: 100%;
	box-sizing: border-box;
}
.fox-form *, .fox-form *::before, .fox-form *::after { box-sizing: border-box; }
.fox-form [hidden] { display: none !important; }

/* Étapes */
.fox-form-steps { display: flex; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; counter-reset: fox-step; }
.fox-form-steps li { flex: 1 1 0; min-width: 0; }
.fox-form-step {
	display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%;
	padding: 0; border: 0; background: none; color: var(--fox-form-muted); font: inherit; font-size: 13px; line-height: 1.3; cursor: pointer; text-align: center;
}
.fox-form-step-dot { width: 100%; height: 4px; border-radius: 2px; background: var(--fox-form-border); }
.fox-form-step[aria-selected="true"], .fox-form-step-done { color: var(--fox-form-text); }
.fox-form-step[aria-selected="true"] { font-weight: 500; }
.fox-form-step[aria-selected="true"] .fox-form-step-dot, .fox-form-step-done .fox-form-step-dot { background: var(--fox-form-accent); }
.fox-form-step-label { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.fox-form:not(.fox-form-ready) .fox-form-steps { display: none; }

/* Grille : 12 colonnes, une colonne sur mobile */
.fox-form-row { display: flex; flex-wrap: wrap; gap: 0 16px; }
.fox-form-row.fox-form-row-empty { display: none; }
.fox-form-field { flex: 1 1 100%; min-width: 0; margin: 0 0 16px; padding: 0; border: 0; }
@media (min-width: 720px) {
	.fox-form-col-3 { flex-basis: calc(25% - 12px); }
	.fox-form-col-4 { flex-basis: calc(33.333% - 11px); }
	.fox-form-col-6 { flex-basis: calc(50% - 8px); }
	.fox-form-col-8 { flex-basis: calc(66.666% - 6px); }
}
.fox-form-section { margin: 8px 0 4px; font-size: 18px; line-height: 1.35; font-weight: 600; }
.fox-form-type-section { margin-bottom: 8px; }

.fox-form-label { display: block; margin: 0 0 6px; padding: 0; font-size: 14px; font-weight: 500; line-height: 1.4; }
.fox-form-required { color: var(--fox-form-error); }
.fox-form-desc { margin: 4px 0 0; font-size: 13px; color: var(--fox-form-muted); }
.fox-form-error { margin: 4px 0 0; font-size: 13px; color: var(--fox-form-error); }

.fox-form-input {
	display: block; width: 100%; height: 35px; padding: 0 10px;
	border: 1px solid var(--fox-form-border); border-radius: var(--fox-form-radius); background: #fff; color: inherit; font: inherit; font-size: 15px;
}
textarea.fox-form-input { height: auto; padding: 8px 10px; }
.fox-form-calc { display: flex; align-items: center; background: var(--fox-form-surface); }
.fox-form-input:focus-visible, .fox-form-step:focus-visible, .fox-form-button:focus-visible, .fox-form-option input:focus-visible, .fox-form-range:focus-visible, .fox-form-date-picker:focus-visible {
	outline: 2px solid #000; outline-offset: 2px;
}
.fox-form-has-error .fox-form-input[aria-invalid="true"] { border-color: var(--fox-form-error); }

.fox-form-options { display: flex; flex-direction: column; gap: 6px; }
.fox-form-options-horizontal { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
.fox-form-option { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 1.4; cursor: pointer; }
.fox-form-option input { margin: 3px 0 0; accent-color: var(--fox-form-accent); width: 16px; height: 16px; flex: none; }

.fox-form-subfields { display: flex; flex-wrap: wrap; gap: 0 16px; }
.fox-form-subfield { flex: 1 1 200px; min-width: 0; margin-bottom: 8px; }

.fox-form-slider { display: flex; align-items: center; gap: 10px; }
.fox-form-range { flex: 1; accent-color: var(--fox-form-accent); }
.fox-form-slider-value { min-width: 2ch; font-weight: 500; }
.fox-form-slider-limit { font-size: 13px; color: var(--fox-form-muted); }

.fox-form-date-picker { margin-top: 6px; height: 35px; padding: 0 8px; border: 1px solid var(--fox-form-border); border-radius: var(--fox-form-radius); font: inherit; font-size: 14px; background: #fff; }

.fox-form-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 8px; }
.fox-form-footer .fox-form-next, .fox-form-footer .fox-form-submit { margin-left: auto; }
.fox-form-button {
	min-height: 35px; padding: 0 16px; border: 1px solid var(--fox-form-accent); border-radius: var(--fox-form-radius);
	background: var(--fox-form-accent); color: #fff; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
}
.fox-form-prev { background: #fff; color: var(--fox-form-text); border-color: var(--fox-form-border); }
.fox-form-button[disabled] { opacity: .7; cursor: progress; }

.fox-form-response { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--fox-form-radius); border: 1px solid var(--fox-form-border); background: var(--fox-form-surface); }
.fox-form-response p { margin: 0; }
.fox-form-response ul { margin: 8px 0 0; padding-left: 18px; }
.fox-form-response-success { border-color: var(--fox-form-success); color: var(--fox-form-success); background: #f0faf3; }
.fox-form-response-error { border-color: var(--fox-form-error); color: var(--fox-form-error); background: #fdf3f2; }
.fox-form-done { padding-bottom: 8px; }

/* Champ piège : hors écran, jamais présenté aux personnes */
.fox-form-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 480px) {
	.fox-form { padding: 16px; }
	.fox-form-step { font-size: 12px; }
}