<!DOCTYPE html>
<html lang="{{lang}}">
	<head>
		<meta charset="utf-8" />
		<base href="/" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />

		<link rel="icon" href="/favicon/favicon.svg?v=2.0" type="image/svg+xml" />
		<link
			rel="icon"
			type="image/png"
			sizes="16x16"
			href="/favicon/favicon-16x16.png?v=2.0"
		/>
		<link
			rel="icon"
			type="image/png"
			sizes="32x32"
			href="/favicon/favicon-32x32.png?v=2.0"
		/>
		<link
			rel="alternate icon"
			href="/favicon/favicon.ico?v=2.0"
			type="image/png"
			sizes="16x16"
		/>
		<link
			rel="apple-touch-icon"
			sizes="180x180"
			href="/favicon/apple-touch-icon.png?v=2.0"
		/>
		<link
			rel="mask-icon"
			href="/favicon/safari-pinned-tab.svg?v=2.0"
			color="#98deed"
		/>
		<link rel="shortcut icon" href="/favicon/favicon.ico?v=2.0" />
		<meta name="apple-mobile-web-app-title" content="Mon-entreprise" />
		<meta name="application-name" content="Mon-entreprise" />
		<meta name="msapplication-TileColor" content="#603cba" />
		<meta name="msapplication-config" content="/favicon/browserconfig.xml" />

		<meta name="theme-color" content="#2975d1" />

		<!--app-helmet-tags:start-->
		<meta name="description" content="{{ description }}" />
		<meta property="og:type" content="website" />
		<meta property="og:title" content="{{ title }}" />
		<meta property="og:description" content="{{ description }}" />
		<meta property="og:image" content="{{ shareImage }}" />

		<!--app-helmet-tags:end-->

		<style>
			html[data-useragent*='MSIE'] #outdated-browser,
			html[data-useragent*='Safari'][data-useragent*='Version/8']
				#outdated-browser,
			html[data-useragent*='Safari'][data-useragent*='Version/7']
				#outdated-browser,
			html[data-useragent*='Trident'] #outdated-browser {
				display: block !important;
			}

			html[data-useragent*='MSIE'] #loading,
			html[data-useragent*='Safari'][data-useragent*='Version/8'] #loading,
			html[data-useragent*='Safari'][data-useragent*='Version/7'] #loading,
			html[data-useragent*='Trident'] #loading {
				display: none !important;
			}

			html[data-useragent*='MSIE'] #js,
			html[data-useragent*='Safari'][data-useragent*='Version/8'] #js,
			html[data-useragent*='Safari'][data-useragent*='Version/7'] #js,
			html[data-useragent*='Trident'] #js {
				display: none !important;
			}

			/* CSS Loader */
			#loading {
				animation: appear 0.6s;
				transform: translateY(35vh);
				width: 100%;
			}
			#lds-ellipsis {
				margin: auto;
				position: relative;
				width: 64px;
				animation: appear 1.5s;
				height: 64px;
			}
			#lds-ellipsis div {
				position: absolute;
				top: 27px;
				width: 11px;
				height: 11px;
				border-radius: 50%;
				background: rgb(41, 117, 209);
				animation-timing-function: cubic-bezier(0, 1, 1, 0);
			}

			#lds-ellipsis div:nth-child(1) {
				left: 6px;
				animation: lds-ellipsis1 0.6s infinite;
			}

			#lds-ellipsis div:nth-child(2) {
				left: 6px;
				animation: lds-ellipsis2 0.6s infinite;
			}

			#lds-ellipsis div:nth-child(3) {
				left: 26px;
				animation: lds-ellipsis2 0.6s infinite;
			}

			#lds-ellipsis div:nth-child(4) {
				left: 45px;
				animation: lds-ellipsis3 0.6s infinite;
			}

			@keyframes appear {
				from {
					opacity: 0;
				}
				80% {
					opacity: 0;
				}
				100% {
					opacity: 1;
				}
			}

			@keyframes lds-ellipsis1 {
				0% {
					transform: scale(0);
				}
				100% {
					transform: scale(1);
				}
			}

			@keyframes lds-ellipsis3 {
				0% {
					transform: scale(1);
				}
				100% {
					transform: scale(0);
				}
			}

			@keyframes lds-ellipsis2 {
				0% {
					transform: translate(0, 0);
				}
				100% {
					transform: translate(19px, 0);
				}
			}
		</style>
		<!--app-style-->
	</head>

	<body>
		<div id="js">
			<!--app-html:start-->
			<div id="loading">
				<img
					src="{{ shareImage }}"
					alt="{{ shareImageAlt }}"
					style="
						width: 300px;
						margin: auto;
						margin-bottom: 0.6rem;
						display: block;
					"
				/>
				<div id="lds-ellipsis">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
			</div>
			<!--app-html:end-->
		</div>

		<script>
			const isIframe = new URLSearchParams(
				document.location.search.substring(1)
			).get('iframe')

			function getItem(key) {
				try {
					return window.localStorage.getItem(key)
				} catch (error) {
					if (error instanceof Error && error.name === 'SecurityError') {
						// eslint-disable-next-line no-console
						console.warn(
							'[localStorage] Unable to set item due to security settings'
						)
					}

					return null
				}
			}

			const darkMode = !isIframe && getItem('darkMode') === 'true'

			if (darkMode) {
				document.body.style.backgroundColor = '#0f172a'
			}
		</script>

		<!-- USER AGENT DATA ATTRIBUTE  -->
		<script>
			var b = document.documentElement
			b.setAttribute('data-useragent', navigator.userAgent)
		</script>

		<script>
			// Set the main colors from the provided customization in the URL We do it
			// before loading the whole JS bundle to avoid a UI flash. cf. #1786
			function parseColor(rawColor) {
				try {
					return JSON.parse(decodeURIComponent(rawColor))
				} catch (error) {
					console.error(error)

					return null
				}
			}
			try {
				const rawColor = new URLSearchParams(
					document.location.search.substring(1)
				).get('couleur')
				const iframeColor = rawColor && parseColor(rawColor)
				;[
					document.documentElement,
					...document.querySelectorAll('[data-js-color-element]'),
				].forEach((element) => {
					element.style.setProperty(
						'--COLOR_HUE',
						iframeColor ? iframeColor[0] : '220deg'
					)
					element.style.setProperty(
						'--COLOR_SATURATION',
						iframeColor ? iframeColor[1] + '%' : '100%'
					)
				})
			} catch (e) {
				console.error(e)
			}
		</script>

		<!-- OUTDATED BROWSER WARNING -->
		<div
			id="outdated-browser"
			style="
				position: fixed;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				display: none;
				background-color: white;
			"
		>
			<div
				style="
					margin: 100px auto;
					max-width: 800px;
					text-align: center;
					font-family: 'Montserrat', sans-serif;
					font-weight: 300;
				"
			>
				<img
					src="/logo-share.png"
					alt="Logo service mon-entreprise urssaf"
					style="width: 200px; margin-bottom: 2rem"
				/>
				<h1>Votre navigateur n'est plus supporté.</h1>
				<h2>
					Nous vous invitons à réessayer avec un autre, ou depuis un mobile
					récent.
				</h2>
				<br />
				<h3>
					Si besoin, vous pouvez en installer un nouveau depuis
					<a
						style="color: #2975d1; background-color: inherit"
						href="https://outdatedbrowser.com/fr"
						aria-label="cette page, visiter outdatedbrowser.com, nouvelle fenêtre"
						>cette page</a
					>
				</h3>
				<h3>
					<a
						href="javascript:void(0);"
						onclick="
					var b = document.documentElement;
					b.setAttribute('data-useragent',  'force-navigation-anyway');
				"
						>Continuer quand même vers le site</a
					>
				</h3>
			</div>
		</div>

		<script
			crossorigin="anonymous"
			src="https://polyfill.io/v3/polyfill.min.js?features=ResizeObserver%2CIntl.~locale.en%2CIntl.~locale.fr%2CString.prototype.replaceAll"
		></script>

		<script type="module" src="{{ entry }}"></script>
	</body>
</html>