/* Transition avant Bootstrap. Chargé à la place de mobile.css sur le parcours public.
   Les dimensions de bureau et les couleurs propres aux événements restent définies
   par default.css et la feuille personnalisée. Aucun changement à l'impression. */
@media only screen and (max-width: 1024px) {
	body.mobile-participants {
		font-size: 16px;
		line-height: 1.5;
		text-align: left;
		-webkit-text-size-adjust: 100%;
	}
	.mobile-participants *, .mobile-participants *::before, .mobile-participants *::after {
		box-sizing: border-box;
	}
	#page, #header, #content, #footer, #evmnt_page {
		width: 100%;
		min-width: 0;
	}
	#page, #evmnt_page {
		max-width: 900px;
		padding: 12px;
		background-color: rgba(255, 255, 255, .97);
		overflow-wrap: anywhere;
	}
	#content {
		display: flex;
		flex-direction: column;
		gap: 16px;
		overflow: visible;
	}
	#restePage, #restePageLarge, #restePageArchive {
		order: 0;
		width: 100%;
		min-width: 0;
		overflow: visible;
	}
	#infosCourse, #infosCourseArchive {
		order: 1;
		float: none;
		width: 100%;
		margin: 8px 0 0;
		padding-top: 16px;
		border-top: 1px solid #ddd;
		text-align: center;
	}
	#header, #logo {
		height: auto;
		overflow: visible;
	}
	#header { margin-bottom: 16px; }
	#logo img { position: static; display: block; height: auto; border-radius: 8px; }
	#logo h1 {
		position: static;
		width: auto;
		font-size: 1.25rem;
		line-height: 1.3;
		padding: 10px 12px;
		text-align: left;
	}
	#langues { height: auto; font-size: .8rem; padding: 4px 0 10px; text-align: center; }
	#langues a { display: inline-flex; min-width: 40px; min-height: 40px; align-items: center; justify-content: center; }
	#langues a img { width: 28px; height: 28px; }
	img, video, iframe, object { max-width: 100%; }
	img { height: auto; }
	#flyer, #titreCourse { float: none; margin: 12px auto; }
	#logoCourse { width: auto; max-width: 100%; }
	#partprinc, #sponsors { max-width: 100%; margin-inline: auto; }
	.resumeCourse { margin: 12px 0; font-weight: normal; }
	p { margin-bottom: 1rem; }
	#restePage > h2, #restePageLarge > h2, #cadre_suisjeinscrit h2 {
		font-size: 1.2rem;
		line-height: 1.35;
		padding: 12px;
		margin: 12px 0;
	}
	#restePage h3, .form_titre, .options_titre { font-size: 1.1rem; line-height: 1.4; }
	.form_titre, .form_titre2 { width: 100%; padding: 10px 12px; margin: 16px 0 12px; }
	.form_titre2 { font-size: 1rem; }
	.options_titre { color: #555; }
	.fs10px, .fs12px, .fs13px, .fs14px { font-size: .875rem; }
	.nbInscrits { width: 100%; }
	.nbInscrits p { margin: 12px 0 8px; padding: 12px; }
	.boutonCountdown { width: 100%; margin: 0 0 12px; padding: 12px; font-size: .95rem; }
	.boutonMenu, .boutonMenuInactif {
		float: none;
		display: flex;
		align-items: center;
		gap: 14px;
		width: 100%;
		height: auto;
		min-height: 72px;
		margin: 8px 0;
		padding: 14px;
		border: 1px solid #ccd6ca;
		border-radius: 10px;
		text-align: left;
		font-size: 1rem;
		line-height: 1.4;
	}
	.boutonMenu img, .boutonMenuInactif img { flex: 0 0 40px; width: 40px; height: 40px; object-fit: contain; margin: 0; }
	.boutonMenu span, .boutonMenuInactif span { position: static; width: auto; min-width: 0; font-size: inherit; }
	.boutonLien, .boutonLienResultat, .boutonIconesSecure {
		float: none;
		width: 100%;
		height: auto;
		min-height: 44px;
		margin: 8px 0;
		padding: 10px;
		font-size: .875rem;
	}
	.boutonIconesSecure img { max-width: 25%; object-fit: contain; }
	fieldset, form, .form_bloc, .reglementhtml { min-width: 0; max-width: 100%; }
	fieldset { margin: 12px 0; padding: 12px; border-radius: 8px; }
	legend { max-width: 100%; white-space: normal; }
	.form_bloc { padding: 12px; border: 1px solid #ddd; border-radius: 10px; background: #fff; }
	.ligne, .lignerecap { margin-bottom: 14px; overflow: visible; }
	.ligne::after, .lignerecap::after, .form_bloc::after { content: ""; display: block; clear: both; }
	/* Un libellé au-dessus du champ ; les choix radio/checkbox restent près du texte. */
	.mobile-participants form label,
	.mobile-participants #form_inscr label,
	.mobile-participants #form_verspaiement label,
	.mobile-participants #form_resetmdp label,
	.mobile-participants #form_mdpoublie label,
	.mobile-participants #form_reprise label,
	.mobile-participants #form_remboursement_manuel label {
		float: none;
		display: block;
		width: auto;
		max-width: 100%;
		text-align: left;
		padding: 0;
		margin-bottom: 6px;
		font-size: .95rem;
		text-transform: none;
	}
	/* La spécificité annule les dimensions fixes de typeahead.css, sans !important
	   qui écraserait les états erreur/obligatoire propres à chaque événement. */
	.mobile-participants :is(form, #form_inscr, #form_resetmdp, #form_mdpoublie, #form_reprise, #form_pj) :is(
		input[type=text], input[type=password], input[type=email], input[type=tel], input[type=date],
		input[type=number], input[type=file], input[type=search], input[type=url], select, textarea
	) {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		min-height: 44px;
		height: auto;
		padding: 10px 12px;
		margin: 0;
		font-family: inherit;
		font-size: 16px;
		line-height: 1.4;
		border-radius: 7px;
		border: 1px solid #aaa;
	}
	.mobile-participants form :is(input[type=number], input[type=date]) { max-width: 100%; }
	.mobile-participants form textarea { min-height: 100px; resize: vertical; }
	.mobile-participants form input[type=file] { padding: 8px; }
	.mobile-participants input[type=checkbox], .mobile-participants input[type=radio] {
		float: none;
		clear: none;
		width: 22px;
		height: 22px;
		margin: 4px 8px 4px 0;
		vertical-align: middle;
		flex-shrink: 0;
	}
	.mobile-participants #form_inscr input[type=radio] { width: 22px; }
	.mobile-participants form .ligne_chkbox label,
	.mobile-participants #form_inscr .ligne_chkbox label,
	.mobile-participants #reglement label { display: inline; }
	.ligne_chkbox { padding: 8px 0; line-height: 1.6; }
	.ligne_radio_inline { display: block; }
	.chkbx, .legend250 { width: 100%; }
	#reglement_check { margin: 16px 0; }
	#form_inscr .options_libelle, .options_libelle, .bloc_repetitionrelais,
	.bloc_commentaire, .bloc_modele_justif, .notice_info_factu,
	#club_infos, #equipe_infos, #bloc_options_equipe, .ligne_blocdroite {
		float: none;
		width: 100%;
		max-width: 100%;
		height: auto;
		font-size: .95rem;
		line-height: 1.5;
	}
	.options_libelle { padding: 12px; margin: 16px 0 10px; }
	.bloc_commentaire, .bloc_modele_justif, .notice_info_factu { border: 1px solid #aaa; padding: 12px; }
	.notice_info_factu, .bloc_commentaire { font-size: .875rem; }
	.bloc_repetitionrelais { padding: 10px; }
	.ligne_repetition1relais, .repetitionrelais_etape { float: none; font-size: .95rem; }
	.twitter-typeahead { width: 100%; max-width: 100%; }
	.tt-menu { max-width: 100%; width: 100%; max-height: 45vh; overflow-y: auto; }
	.tt-suggestion { padding: 12px; font-size: 1rem; line-height: 1.4; }
	.remarque, .form-error, .message-erreur-decale, .format_attendu { width: auto; margin: 8px 0; font-size: .875rem; }
	.message-accueil, .message-erreur, .message-ok, .message-chgpasswd, .message-offresdemandes, #msg_exceptionnel {
		width: 100%;
		font-size: .95rem;
		line-height: 1.5;
		margin: 12px 0;
		padding: 12px 12px 12px 26px;
		background-position: 6px 15px;
		border-radius: 8px;
	}
	.cadreitalique, .form_or_csv, .reglementhtml { font-size: .95rem; }
	.mobile-participants button, .mobile-participants input[type=submit], .mobile-participants input[type=button] {
		max-width: 100%;
		min-height: 44px;
		height: auto;
		padding: 12px 16px;
		font-family: inherit;
		font-size: 1rem;
		line-height: 1.4;
		white-space: normal;
		overflow-wrap: anywhere;
		touch-action: manipulation;
	}
	.ladda-button, .bouton100, .bouton50, .bouton_form_reprise { float: none; width: 100%; margin: 8px 0; border-radius: 8px; }
	.ladda-label { font-size: inherit; white-space: normal; }
	.mobile-participants :is(input, select, textarea, button, a):focus-visible { outline: 3px solid #275d8c; outline-offset: 2px; }
	#form_verspaiement .ligne, #form_verspaiement .lignerecap { font-size: 1rem; }
	.libellerecap, .libellerecapprix { float: none; display: block; width: auto; text-align: left; padding: 0; font-size: .875rem; color: #555; }
	.libellerecapprix { font-weight: bold; }
	.detail_couts { width: 100%; font-size: .95rem; }
	.numdoss { font-size: 1rem; padding: 10px; }
	#encartpayboxcb img { margin: 4px; max-width: 42%; }
	#cadre_suisjeinscrit { display: block; width: 100%; max-width: 900px; padding: 12px; margin: auto; overflow-wrap: anywhere; }
	#form_reprise { width: 100%; max-width: 640px; padding: 8px; }
	#form_reprise fieldset { padding: 4px; margin: 0; }
	#cboxLoadedContent { -webkit-overflow-scrolling: touch; margin-bottom: 52px; }
	.mobile-participants #cboxClose {
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: #eee;
		border-radius: 6px;
		text-indent: -9999px;
	}
	#cboxClose::after { content: "×"; position: absolute; inset: 0; text-indent: 0; font-size: 28px; line-height: 44px; color: #333; }
	.mobile-participants #cookieBannerOk { flex: 0 0 auto; min-width: 44px; padding: 8px 12px; white-space: nowrap; }
	#form_remboursement_manuel { max-width: 100%; margin: 12px 0; }
	/* Les vrais tableaux conservent leurs colonnes : défilement local, pas de page coupée. */
	.table-wrapper, .dataTables_wrapper { width: 100%; max-width: 100%; overflow-x: auto; }
	#restePage table, #restePageLarge table, #cadre_suisjeinscrit table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		font-size: .875rem;
	}
	table td, table th { padding: 8px; }
	.docPDF { width: 100%; height: 65vh; }
	.edition_suivante, .resultats_passes { width: 100%; font-size: .95rem; }
	.consoDistanceContainer { flex-wrap: wrap; }
	.consoDistance { width: 100%; margin: 6px 0; }
	#footer { flex-direction: column; gap: 12px; padding: 16px 0; }
	#footerBoutons { position: static; flex-wrap: wrap; gap: 6px; }
	.footerBouton { justify-content: center; min-height: 44px; padding: 8px 12px; margin: 0; font-size: .875rem; border: 1px solid #ddd; border-radius: 6px; }
	.footerBouton:hover { font-size: .875rem; transition: none; }
	#noticeVisuels { font-size: .75rem; line-height: 1.5; }
	#inscr_container, .inscr_choix { position: static; left: auto; width: 100%; margin: 0; padding: 12px; }
	#headerinscr > img { width: 100%; height: auto; }
	.inscr_fiche { float: none; width: 100%; padding: 0; }
	.inscr_flyer { float: none; margin: 12px auto; }
	.inscr_niv1, .inscr_niv2, .inscr_niv3 { font-size: 1rem; line-height: 1.5; }
	.inscr_niv4 { float: none; width: 100%; font-size: .875rem; }
}