/*
 * Formulaire public d'onboarding (lib/OnboardingPublic.php, js/onboarding.js).
 * --onb-couleur : couleur de la societe d'origine, posee par la page.
 * Autonome : le nginx public ne sert pas les autres feuilles de mobi-base.
 * Cloisonnee sous body.onb-page : mobi-base charge toutes les feuilles de
 * css/ dans son bureau, elle ne doit rien y changer.
 */
.onb-page {
	--onb-couleur: #1e4e9e;
	--onb-fond: #f5f6f8;
	--onb-surface: #ffffff;
	--onb-texte: #24262b;
	--onb-attenue: #5b616b;
	--onb-bord: #d5d9df;
	--onb-erreur: #a3260f;
	--onb-info: #1d4f91;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	.onb-page {
		--onb-fond: #16181c;
		--onb-surface: #1f2228;
		--onb-texte: #e8eaee;
		--onb-attenue: #a7adb7;
		--onb-bord: #3a3f48;
		--onb-erreur: #ff9b85;
		--onb-info: #9cc3ff;
		color-scheme: dark;
	}
}
.onb-page * { box-sizing: border-box; }
body.onb-page {
	margin: 0;
	background: var(--onb-fond);
	color: var(--onb-texte);
	font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
}
.onb-page .onb-largeur { max-width: 860px; margin: 0 auto; padding: 0 16px; }
/* Bandeau blanc en clair comme en sombre : les logos sont en couleur sur fond clair. */
.onb-page .onb-bandeau { background: #ffffff; color: var(--onb-couleur); border-bottom: 4px solid var(--onb-couleur); font-weight: 600; }
.onb-page .onb-bandeau .onb-largeur { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.onb-page .onb-logo { display: block; height: 40px; width: auto; max-width: 220px; }
.onb-page main.onb-largeur { padding-top: 24px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 16px; }
.onb-page .onb-chargement, .onb-page .onb-alerte { padding: 16px; border-radius: 8px; background: var(--onb-surface); border: 1px solid var(--onb-bord); }
.onb-page .onb-progression { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--onb-attenue); }
.onb-page .onb-barre { height: 6px; border-radius: 3px; background: var(--onb-bord); overflow: hidden; }
.onb-page .onb-barre > div { height: 100%; background: var(--onb-couleur); }
.onb-page .onb-carte { background: var(--onb-surface); border: 1px solid var(--onb-bord); border-radius: 10px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.onb-page .onb-carte h1 { margin: 0; font-size: 22px; line-height: 1.25; }
.onb-page .onb-carte h1:focus { outline: none; }
.onb-page .onb-surtitre { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--onb-attenue); }
.onb-page .onb-intro { margin: 0; color: var(--onb-attenue); }
.onb-page .onb-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 20px; }
.onb-page .onb-groupe { grid-column: 1 / -1; margin: 8px 0 0; font-size: 16px; border-top: 1px solid var(--onb-bord); padding-top: 12px; }
.onb-page .onb-champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.onb-page .onb-large { grid-column: 1 / -1; }
.onb-page .onb-libelle { font-weight: 600; font-size: 15px; }
.onb-page .onb-req { color: var(--onb-erreur); }
.onb-page .onb-aide { margin: 0; font-size: 13px; color: var(--onb-attenue); }
.onb-page input[type=text], .onb-page input[type=email], .onb-page input[type=tel], .onb-page input[type=url], .onb-page input[type=number], .onb-page input[type=date], .onb-page select, .onb-page textarea {
	font: inherit; color: var(--onb-texte); background: var(--onb-surface);
	border: 1px solid var(--onb-bord); border-radius: 6px; padding: 9px 10px; min-height: 44px; width: 100%;
}
.onb-page textarea { resize: vertical; }
.onb-page input:focus-visible, .onb-page select:focus-visible, .onb-page textarea:focus-visible, .onb-page button:focus-visible, .onb-page .onb-option:focus-within, .onb-page .onb-solution:focus-within {
	outline: 3px solid var(--onb-couleur); outline-offset: 2px;
}
.onb-page .onb-choix, .onb-page .onb-solutions { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.onb-page .onb-choix legend { padding: 0; margin-bottom: 6px; width: 100%; }
.onb-page .onb-option { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--onb-bord); border-radius: 6px; cursor: pointer; }
.onb-page .onb-option input, .onb-page .onb-solution input { width: 18px; height: 18px; margin: 0; accent-color: var(--onb-couleur); }
.onb-page .onb-solution { display: flex; align-items: center; gap: 10px; flex: 1 1 240px; min-height: 56px; padding: 12px 16px; border: 1px solid var(--onb-bord); border-radius: 8px; cursor: pointer; }
.onb-page .onb-solution.onb-coche { border: 2px solid var(--onb-couleur); }
.onb-page .onb-lignes { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.onb-page .onb-ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; width: 100%; align-items: center; }
.onb-page .onb-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.onb-page .onb-droite { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.onb-page button { font: inherit; cursor: pointer; min-height: 44px; border-radius: 6px; padding: 0 16px; }
.onb-page button:disabled { opacity: .5; cursor: default; }
.onb-page .onb-principal { background: var(--onb-couleur); color: #fff; border: 1px solid var(--onb-couleur); font-weight: 600; }
.onb-page .onb-secondaire { background: var(--onb-surface); color: var(--onb-texte); border: 1px solid var(--onb-bord); }
.onb-page .onb-discret { background: transparent; color: var(--onb-texte); border: 1px solid transparent; text-decoration: underline; }
.onb-page .onb-message { margin: 0; min-height: 1.5em; overflow-wrap: anywhere; }
.onb-page .onb-message.onb-erreur { color: var(--onb-erreur); }
.onb-page .onb-message.onb-info { color: var(--onb-info); }
.onb-page .onb-enreg { margin: 0; font-size: 13px; color: var(--onb-attenue); }
.onb-page .onb-recap { border-top: 1px solid var(--onb-bord); padding-top: 12px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; }
.onb-page .onb-recap h2 { margin: 0; font-size: 16px; }
.onb-page .onb-recap dl { grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 4px 16px; font-size: 14px; }
.onb-page .onb-recap dt { color: var(--onb-attenue); }
.onb-page .onb-recap dd { margin: 0; overflow-wrap: anywhere; }
.onb-page .onb-mentions { padding-bottom: 32px; font-size: 13px; color: var(--onb-attenue); }
.onb-page .onb-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.onb-page .onb-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 560px) {
	.onb-page .onb-recap dl { grid-template-columns: 1fr; }
	.onb-page .onb-carte { padding: 16px; }
}