<div class="container">
	<h1>Statut des Blocks </h1>

	<ul>
		<li class="block is_to-test">
			<h2 class="block-title">Titre</h2>
			<p class="slug">content-heading</p>
			<p class="status">statut:</p>
		</li>
		<li class="block is_to-test">
			<h2 class="block-title">Image Bannière</h2>
			<p class="slug">picture-bannner</p>
			<p class="status">statut:</p>
		</li>
		<li class="block is_to-test">
			<h2 class="block-title">Bloc Question</h2>
			<p class="slug">questions-container</p>
			<p class="status">statut:</p>
		</li>
		<li class="block is_to-test">
			<h2 class="block-title">Vocabulaire de la fiche</h2>
			<p class="slug">vocabulaire-summary</p>
			<p class="status">statut:</p>
		</li>
		<li class="block is_to-test">
			<h2 class="block-title">Zone de formatting : <br />Tooltip de définition de mot</h2>
			<p class="slug">format-types/tooltip</p>
			<p class="status">statut:</p>
		</li>
		<li class="block is_to-test">
			<h2 class="block-title">Schéma + légende</h2>
			<p class="slug">focused-schema</p>
			<p class="status">statut:</p>
		</li>
		<li class="block is_to-test">
			<h2 class="block-title">Zone de formatting : <br /> Lien brochure</h2>
			<p class="slug">format-types/tooltip</p>
			<p class="status">statut:</p>
			<div class="infos infos--danger">
				Problème de préfetch du type d'attachement
			</div>
		</li>
		<li class="block is_wip">
			<h2 class="block-title">En tête de thématique + Focus</h2>
			<p class="slug">focused-thematique</p>
			<p class="status">statut:</p>
		</li>


	</ul>

	<div class="test-protocole">
		<h1>Protocole de test</h1>
		<ul>
			<li> Pas d'erreur js ?</li>
			<li>Code clean ?</li>
			<li>Plusieurs blocks dans la page ok ?</li>
			<li>Gestion des langues correcte ?</li>
		</ul>

	</div>

</div>


<style>
	@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

	* {
		font-family: 'Open Sans', sans-serif;
		margin: 0;
		padding: 0;
	}

	h1 {
		font-weight: 600;
		text-align: center;
		padding: 50px;
	}

	h2 {
		font-weight: 500;

	}

	.slug {
		color: #a9a9a9;
		font-size: 12px;
		padding-bottom: 10px;
	}

	.container {
		max-width: 400px;
		margin: 0 auto;
	}

	ul {
		list-style: none;
		padding: 0;
		padding-bottom: 60px;
	}

	.test-protocole ul {
		list-style: disc;

	}

	li.block {
		padding: 20px;
		border-bottom: 1px solid #eaeaea;
	}

	li.block .status:after {
		margin-left: 10px;
	}

	.is_ready {
		color: green;
	}

	.is_to-test {
		color: #4287f5;
	}

	.is_to-test .status:after {
		content: " 🛃 À tester"

	}

	.is_wip {
		color: #f5c242;
	}

	.is_wip .status:after {
		content: "✴️ En développement"
	}

	.infos {
		margin-top: 20px;
		border-radius: 5px;
		padding: 16px 40px;
	}

	.infos--danger {
		background-color: #ffdada7a;
		color: #ff5858;
		border: 1px solid #ff5858;
	}
</style>