<?php get_header('demo-components'); ?>

<div class="page-demo-component">


	<!-- HOME -->

	<section class="demo-components-home">
		<h1>Content system & Design system | Documentation</h1>
		<h2>Bienvenue dans la documentation Homegrade</h2>

		<p>Vous trouverez ici une Liste de composants du design system Homegrade</p>

		<div class="buttons">
			<a class="cta cta--white cta--button cta--shadowed" href="#blocks-components">Blocks de contenu</a>
			<a class="cta cta--white cta--button cta--shadowed" href="#css-components">Composants css</a>
		</div>
	</section>


	<!-- BLOCKS COMPONENTS -->
	<section id="blocks-components" class="demo-components">
		<div class="demo-components__section-title">
			<h2 class="">Block components</h2>
			<h3>Blocks de contenu</h3>
			<p>Ces blocs sont accessibles depuis l'éditeur et peuvent être insérés de manières flexibles dans les pages de contenu</p>
		</div>

		<ol class="demo-components__chapter_list">
			<li><a href="#demo-component-content-heading">Titre</a></li>
			<li><a href="#demo-component-section-title">Titre de section</a></li>
			<li><a href="#demo-component-picture-banner">Image Bannière</a></li>
			<li><a href="#demo-component-text-image">Texte + image</a></li>
			<li><a href="#demo-component-aside">Aside</a></li>
			<li><a href="#demo-component-highlight">Mise en avant</a></li>
			<li><a href="#demo-component-plus-loin">Plus loin</a></li>
			<li><a href="#demo-component-content-page-header">Content page header</a></li>
			<li><a href="#demo-component-tips-to-know">À savoir / Astuces</a></li>
			<li><a href="#demo-component-staff-list">Liste de membres</a></li>
			<li><a href="#demo-component-timeline">Timeline</a></li>
			<li><a href="#demo-component-focused-shema">Shéma + Légende</a></li>
			<li><a href="#demo-component-focused-thematique">Schéma de thématique</a></li>
			<li><a href="#demo-component-content-box">Content Box</a></li>
		</ol>
		<p class="block-category-name">Blocs génériques</p>

		<!-- TITRE -->
		<article id="demo-component-content-heading" class="demo-component">
			<div class="component-explanation">
				<div class="component-explanation__component-icon">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
						<path d="M6.2 5.2v13.4l5.8-4.8 5.8 4.8V5.2z"></path>
					</svg>
				</div>
				<h2 class="component-explanation__title">Titre</h2>
				<h3 class="component-explanation__technical-title">content-heading</h3>
				<p class="component-explanation__description">Pour insérer un titre dans un post ou dans une page.</p>
				<div class="component-explanation__options">
					<h3>Options & Variantes</h3>
					<ul>
						<li class="component-explanation__option">
							<h4 class="component-explanation__option-title">Niveau Hiérarchique</h4>
							<p class="component-explanation__option-description">
								Choix entre <mark>h3</mark>, <mark>h4</mark> et <mark>h5</mark> permettant de gérer la strucutre hiérarchique des titres</p>
						</li>
					</ul>
				</div>
			</div>
			<div class="demo-components__demo-component">
				<h3 class="wp-block-homegrade-content-blocks-content-heading homegrade-blocks-custom-heading">Un titre superbe et magnifique</h3>
			</div>




		</article>
		<!-- SECTION-TITLE -->
		<article id="demo-component-section-title" class="demo-component">
			<div class="component-explanation">
				<div class="component-explanation__component-icon">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" aria-hidden="true" focusable="false">
						<path d="M18.5 10.5H10v8h8a.5.5 0 00.5-.5v-7.5zm-10 0h-3V18a.5.5 0 00.5.5h2.5v-8zM6 4h12a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2z"></path>
					</svg>
				</div>
				<h2 class="component-explanation__title">Titre de section</h2>
				<h3 class="component-explanation__technical-title">section-title</h3>
				<p class="component-explanation__description">Pour insérer un bloc de titrage composé d'un titre et d'un sous-titre.</p>
				<div class="component-explanation__options">
					<h3>Options & Variantes</h3>
					<ul>
						<li class="component-explanation__option">
							<h4 class="component-explanation__option-title">Alignement du texte</h4>
							<p class="component-explanation__option-description">
								Choix entre <mark>gauche</mark>, <mark>centre</mark> et <mark>droite</mark>
						</li>

					</ul>
				</div>
			</div>
			<div class="demo-components__demo-component">
				<div class="wp-block-homegrade-content-blocks-section-titling section_titling section_titling--center">
					<h3 class="section_titling__title">Contrat de gestion</h3>
					<p class="section_titling__subtitle">Consultez les contrats de gestion</p>
				</div>
			</div>




		</article>

		<!-- PICTURE BANNER -->
		<article id="demo-component-picture-banner" class="demo-component">
			<div class="component-explanation">
				<div class="component-explanation__component-icon">
					<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 537.97 537.25">
						<g id="Calque_1-2" data-name="Calque 1">
							<path class="cls-1" d="m89.21,537.25h359.55v-58.59H89.21v58.59ZM537.88,38.84c0-4.41-.49-9.07-1.93-13.2C530.39,9.59,515.5.02,496.56.02,343.79-.01,191.03,0,38.26.05c-3.62,0-7.39.18-10.84,1.16C10.85,5.95.01,20.61.01,37.97,0,151.79,0,265.61,0,379.43c0,.83-.02,1.66.02,2.5.69,16.69,12.08,30.53,27.38,32.82,3.89.58,7.94.04,11.92.04,76.22,0,152.43,0,228.65,0,77.21,0,154.43.02,231.64-.01,24.42-.01,38.33-14.01,38.34-38.48.01-112.49.03-224.98-.08-337.46Zm-59.82,319.89H59.89V59.4h418.18v299.33Zm-385.9-45.9c5.8,12.31,16.89,15.53,29.43,15.54,98.33,0,196.65.01,294.98-.04,3.64,0,7.36-.29,10.9-1.08,13.79-3.06,21.61-13.93,21.61-30.04.04-67.88.02-135.75,0-203.63,0-1.44-.18-2.88-.27-4.34-1.08-.07-1.74-.17-2.39-.15-25.94.94-44.94,13.48-58.52,35.05-15.84,25.16-23.51,52.96-26.44,82.27-1.02,10.17-1.77,20.36-2.68,30.99-3.84-5.36-7.22-10.62-11.14-15.45-15.04-18.56-32.77-33.53-56.28-40.13-22.01-6.18-42.41-3.44-59.15,13.27-17.3,17.27-29.74,37.89-38.52,60.6-5.38,13.92-9.74,28.23-14.87,43.28-.92-2.72-1.55-4.72-2.27-6.68-6.37-17.29-12.01-34.89-19.34-51.76-7.93-18.25-18.97-34.76-34.27-47.88-9.54-8.18-20.47-13.5-33.82-13.58-.12,1.27-.24,1.92-.24,2.56,0,39.1-.11,78.19.13,117.28.03,4.67,1.16,9.71,3.15,13.93Z" />
						</g>
					</svg>
				</div>
				<h2 class="component-explanation__title">Image Bannière</h2>
				<h3 class="component-explanation__technical-title">picture-banner</h3>
				<p class="component-explanation__description">Pour insérer une image bannière fixe ou intégrale</p>
				<div class="component-explanation__options">
					<h3>Options & Variantes</h3>
					<ul>
						<li class="component-explanation__option">
							<h4 class="component-explanation__option-title">Hauteur</h4>
							<p class="component-explanation__option-description">
								Si fixe, la bannière est verticalement restreinte et il est alors possible de régler sa position verticale</p>

						</li>
					</ul>
				</div>
			</div>
			<div class="demo-components__demo-component">
				<p class="demo-components__demo-component__explanatory-title">Hauteur fixe</p>

				<div class="wp-block-homegrade-content-blocks-picture-banner homegrade-content-blocks-picture-banner  fixed-height">
					<img src="<?php echo get_template_directory_uri() . "/resources/img/demo-img/chauffage.jpg" ?>">
				</div>
			</div>
			<div class="demo-components__demo-component">
				<p class="demo-components__demo-component__explanatory-title">Hauteur originale</p>

				<div class="wp-block-homegrade-content-blocks-picture-banner homegrade-content-blocks-picture-banner">
					<img decoding="async" src="<?php echo get_template_directory_uri() . '/resources/img/demo-img/equipe-test.jpg' ?>">
				</div>
			</div>

		</article>

		<!-- TEXT-IMAGE -->
		<article id="demo-component-text-image" class="demo-component">
			<div class="component-explanation">
				<div class="component-explanation__component-icon">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
						<path class="cls-1" d="m13.35,88.99h74.86v-6.24H13.35v6.24Zm0-11.96h74.86v-6.24H13.35v6.24Zm15.28-42.46c3.56,0,6.44-2.89,6.44-6.44s-2.89-6.44-6.44-6.44-6.44,2.89-6.44,6.44,2.89,6.44,6.44,6.44ZM61.77,11.01H11.79v54.07h49.98V11.01Zm-6.24,32.66l-12.06-11.01-12.87,16.02-4.24-7.08-8.34,6.8v-31.14h37.51v26.42Zm12.4-14.46h20.27v-6.24h-20.27v6.24Zm0-18.19v6.24h20.27v-6.24h-20.27Zm0,30.15h20.27v-6.24h-20.27v6.24Zm0,23.91h20.27v-6.24h-20.27v6.24Zm0-11.96h20.27v-6.24h-20.27v6.24Z" />
					</svg>
				</div>
				<h2 class="component-explanation__title">Texte + image</h2>
				<h3 class="component-explanation__technical-title">text-image</h3>
				<p class="component-explanation__description">Bloc de texte & image latéral</p>
				<div class="component-explanation__options">
					<h3>Options & Variantes</h3>
					<ul>
						<li class="component-explanation__option">
							<h4 class="component-explanation__option-title">Disposition</h4>
							<p class="component-explanation__option-description">
								Choix entre <mark>gauche</mark> et <mark>droite</mark> pour ajuster la position du texte par rapport à l'image</p>
						</li>
						<li class="component-explanation__option">
							<h4 class="component-explanation__option-title">Proportion de l'image</h4>
							<p class="component-explanation__option-description">
								Choix entre <mark>original</mark>, <mark>moyen</mark> et <mark>carré</mark> permettant d'adapter la taille de l'image selon son format</p>
						</li>

					</ul>
				</div>
			</div>
			<div class="demo-components__demo-component">
				<p class="demo-components__demo-component__explanatory-title">Version alignement à gauche</p>
				<?php
				get_template_part("template-components/demo-components/exemple-text-image-left", null);
				?>
			</div>
			<div class="demo-components__demo-component">
				<p class="demo-components__demo-component__explanatory-title">Version alignement à droite</p>

				<?php
				get_template_part("template-components/demo-components/exemple-text-image-right", null);
				?>
			</div>
			<iframe title="Text Image | Homegrade Blocks" src="https://tube.deligraph.be/videos/embed/6a14942a-43d4-4bb8-8e8d-344d06d2975f" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"></iframe>



		</article>
		<!-- ASIDE -->
		<article id="demo-component-aside" class="demo-component">
			<div class="component-explanation">
				<div class="component-explanation__component-icon">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
						<path d="M5,15a3,3,0,1,1,2.816-4H11a1,1,0,0,1,0,2H7.816A2.99,2.99,0,0,1,5,15ZM18.707,8.293a1,1,0,0,0-1.414,1.414L18.586,11H14.949A10.013,10.013,0,0,0,5,2,1,1,0,0,0,5,4,8,8,0,0,1,5,20a1,1,0,0,0,0,2,10.013,10.013,0,0,0,9.949-9h3.637l-1.293,1.293a1,1,0,0,0,1.414,1.414l3-3a1,1,0,0,0,0-1.414Z" />
					</svg>
				</div>
				<h2 class="component-explanation__title">Aside</h2>
				<h3 class="component-explanation__technical-title">aside</h3>
				<p class="component-explanation__description">Pour un apparté, un texte secondaire ou un focus particulier</p>

			</div>
			<div class="demo-components__demo-component">

				<aside class="wp-block-homegrade-content-blocks-aside homegrade-blocks-aside">
					<p class="aside-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit nisl tortor, eget aliquet velit vulputate sit amet. Sed iaculis maximus neque, nec ultrices nibh fringilla sit amet. Aenean non suscipit eros, vel aliquam augue. Nullam at ultrices lorem, sit amet tempus metus. Vivamus sed erat massa. Quisque et magna pharetra, rhoncus metus et, elementum risus. Cras neque metus, faucibus vel rhoncus id, mattis non tortor. Aenean lacinia suscipit sollicitudin. Quisque tincidunt in dui id bibendum. Donec vehicula pulvinar dui nec facilisis.</p>
				</aside>
			</div>


		</article>
		<!-- HIGHLIGHT -->
		<article id="demo-component-highlight" class="demo-component">
			<div class="component-explanation">
				<div class="component-explanation__component-icon">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
						<path d="M21,7H3V4A1,1,0,0,1,4,3H20a1,1,0,0,1,1,1ZM3,20V9H21V20a1,1,0,0,1-1,1H4A1,1,0,0,1,3,20Zm3-6H18V12H6Zm0,4h6V16H6Z" />
					</svg>
				</div>
				<h2 class="component-explanation__title">Mise en avant</h2>
				<h3 class="component-explanation__technical-title">highlight</h3>
				<p class="component-explanation__description">Bloc pour mettre en avant des informations importantes</p>
				<div class="component-explanation__options">
					<h3>Options & Variantes</h3>
					<ul>
						<li class="component-explanation__option">
							<h4 class="component-explanation__option-title">Variantes</h4>
							<p class="component-explanation__option-description">
								Choix entre <mark>classic</mark>, <mark>warning</mark> & <mark>gris</mark>
						</li>
						<li class="component-explanation__option">
							<h4 class="component-explanation__option-title">Logo latéral</h4>
							<p class="component-explanation__option-description">
								Permet l'ajout d'un logo institutionnel sur la partie droite du bloc</p>
						</li>
					</ul>
				</div>
			</div>
			<div class="demo-components__demo-component">
				<p class="demo-components__demo-component__explanatory-title">Version simple</p>

				<?php
				get_template_part("template-components/demo-components/exemple-highlight-simple", null);
				?>
			</div>
			<div class="demo-components__demo-component">
				<p class="demo-components__demo-component__explanatory-title">Version avec logo</p>

				<?php
				get_template_part("template-components/demo-components/exemple-highlight-logo", null);
				?>

			</div>
			<div class="demo-components__demo-component">
				<p class="demo-components__demo-component__explanatory-title">Version "warning"</p>
				<?php
				get_template_part("template-components/demo-components/exemple-highlight-warning", null);
				?>

			</div>
			<div class="demo-components__demo-component">
				<p class="demo-components__demo-component__explanatory-title">Version "gris"</p>
				<?php
				get_template_part("template-components/demo-components/exemple-highlight-gris", null);
				?>

			</div>

			<iframe title="Mise en avant | Homegrade Blocks" width="560" height="315" src="https://tube.deligraph.be/videos/embed/c09ed65f-b7c9-452f-8f8b-39de813556b2" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"></iframe>

		</article>


		<!-- PLUS LOIN -->
		<article id="demo-component-plus-loin" class="demo-component">
			<div class="component-explanation">
				<div class="component-explanation__component-icon">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
						<path d="M12,22A17.5,17.5,0,0,0,21,6.7V6L12,2,3,6v.7A17.5,17.5,0,0,0,12,22ZM11,6h2V8H11Zm0,4h2v8H11Z" />
					</svg>
				</div>
				<h2 class="component-explanation__title">Plus Loin</h2>
				<h3 class="component-explanation__technical-title">plus-loin </h3>
				<p class="component-explanation__description">Bloc pour mettre en avant des informations pour aller plus loin</p>

			</div>
			<div class="demo-components__demo-component">
				<?php
				get_template_part("template-components/demo-components/exemple-plus-loin", null);
				?>
			</div>



		</article>



		<!-- CONTENT PAGE HEADER -->
		<article id="demo-component-content-page-header" class="demo-component">
			<div class="component-explanation">
				<div class="component-explanation__component-icon">
					<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 401.94 401.92">
						<defs></defs>
						<g id="Calque_1-2" data-name="Calque 1">
							<path class="cls-1" d="m378.98,212.46h22.87v-23.16h-22.87v23.16Zm22.88-70.39h-22.8v23.02h22.8v-23.02ZM23.05,284.21H0v22.98h23.05v-22.98Zm0-47.48H.15v22.93h22.9v-22.93ZM.24,354.72h22.81v-23.23H.24v23.23Zm378.76-.18h22.87v-23.18h-22.87v23.18ZM154.05,70.49h188.68v-23.24h-188.68v23.24Zm-94.63.01h46.52v-23.11h-46.52v23.11Zm342.51,213.59h-22.82v23.14h22.82v-23.14Zm.01-284.09H.21v117.71h401.72V0Zm-23.3,92.03c0,.48-.2.95-.45,2.04H23.8c-.16-1.47-.4-2.75-.41-4.02-.02-20.67.06-41.33-.09-62-.03-3.65.91-4.87,4.73-4.87,115.33.09,230.65.08,345.98.05,2.73,0,4.77-.03,4.74,3.8-.15,21.66-.09,43.33-.12,65Zm-236.39,309.65h22.86v-22.83h-22.86v22.83Zm141.95.17h23.06v-22.89h-23.06v22.89Zm-47.24,0h22.85v-22.82h-22.85v22.82Zm94.54.02h23.11v-22.87h-23.11v22.87Zm47.48-22.9v22.78h22.96v-22.78h-22.96Zm22.79-142.11h-22.81v22.91h22.81v-22.91ZM.14,401.73h22.91v-22.88H.14v22.88Zm.07-189.19h22.87v-23.16H.21v23.16Zm-.07-47.59h23.05v-22.76H.15v22.76Zm94.7,236.76h22.98v-22.86h-22.98v22.86Zm94.53,0h23.24v-22.8h-23.24v22.8Zm-141.94.21h23.12v-23.03h-23.12v23.03Z" />
						</g>
					</svg>
				</div>
				<h2 class="component-explanation__title">
					Content page header
				</h2>
				<h3 class="component-explanation__technical-title">content-page-header</h3>

				<p class="component-explanation__description">Un header qui s'insère en haut de page</p>
				<div class="component-explanation__options">
					<h3>Options & Variantes</h3>
					<ul>
						<li class="component-explanation__option">
							<h4 class="component-explanation__option-title">Call to action</h4>
							<p class="component-explanation__option-description">
								Ajout d'un lien juste après le contenu. Dans cet exemple "Voir l’équipe de direction de Homegrade"</p>

						</li>
					</ul>
				</div>
			</div>
			<div class="demo-components__demo-component">
				<?php
				get_template_part("template-components/demo-components/exemple-content-page-header", null);
				?>
			</div>

		</article>

		<!-- TIPS TO KNOW -->
		<article id="demo-component-tips-to-know" class="demo-component">
			<div class="component-explanation">
				<div class="component-explanation__component-icon">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 91.6 100">
						<g id="Calque_1-2" data-name="Calque 1">
							<path class="cls-1" d="m83.3,8.4v83.3H16.6c-4.2,0-8.3-2.1-8.3-8.3h66.7V0H12.5Q0,0,0,12.5v70.8c0,12.5,10.4,16.7,20.8,16.7h70.8V16.7l-8.3-8.3Zm-45.8,24.9c2.1-12.5,22.9-12.5,22.9,2.1,0,10.4-10.4,18.8-22.9,29.2-12.5-10.4-22.9-18.8-22.9-29.2,0-14.6,20.8-14.6,22.9-2.1Z" />
						</g>
					</svg>
				</div>
				<h2 class="component-explanation__title">À savoir / Astuces</h2>
				<h3 class="component-explanation__technical-title">tips-to-know</h3>
				<p class="component-explanation__description">Pour insérer une série de points d'informations</p>

			</div>
			<div class="demo-components__demo-component">
				<?php
				get_template_part("template-components/demo-components/exemple-tips-to-know", null);
				?>
			</div>


		</article>

		<!-- STAFF LIST -->
		<article id="demo-component-staff-list" class="demo-component">
			<div class="component-explanation">
				<div class="component-explanation__component-icon">
					<svg version="1.1" x="0px" y="0px" viewBox="0 0 128 160">
						<g>
							<circle cx="67" cy="11" r="10" />
							<circle cx="37" cy="21" r="10" />
							<path d="M17,51v36h10v40h20h40h20V87h10V51c0-5.5-4.5-10-10-10L97,51v26H87v40H77V77h10V41c0-5.5-4.5-10-10-10L67,41L57,31   c-5.5,0-10,4.5-10,10v36h10v40H47V77H37V51L27,41C21.5,41,17,45.5,17,51z" />
							<circle cx="97" cy="21" r="10" />
						</g>
					</svg>
				</div>
				<h2 class="component-explanation__title">Liste de membres</h2>
				<h3 class="component-explanation__technical-title">staff-list</h3>
				<p class="component-explanation__description">Pour créer une liste de membres d'équipe ou de comité</p>

			</div>
			<div class="demo-components__demo-component">
				<?php
				get_template_part("template-components/demo-components/exemple-tips-to-know", null);
				?>
			</div>


		</article>


		<!-- TIMELINE -->
		<article id="demo-component-timeline" class="demo-component">
			<div class="component-explanation">
				<div class="component-explanation__component-icon">
					<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 125" x="0px" y="0px">
						<title>130all</title>
						<path d="M31.34,16.75a9.19,9.19,0,1,0-11.69,8.83V41.13a9.18,9.18,0,0,0,0,17.67V74.34a9.19,9.19,0,1,0,5,0V58.79a9.18,9.18,0,0,0,0-17.67V25.59A9.2,9.2,0,0,0,31.34,16.75Z" />
						<rect x="38.45" y="3.26" width="38.58" height="27.14" />
						<rect x="38.45" y="36.39" width="48.58" height="27.14" />
						<rect x="38.45" y="69.6" width="38.58" height="27.14" />
					</svg>
				</div>
				<h2 class="component-explanation__title">Timeline</h2>
				<h3 class="component-explanation__technical-title">timeline</h3>
				<p class="component-explanation__description">Pour la création de timeline</p>
				<div class="component-explanation__options">
					<h3>Options & Variantes</h3>
					<ul>
						<li class="component-explanation__option">
							<h4 class="component-explanation__option-title">Image par ligne / Image latérale </h4>
							<p class="component-explanation__option-description">
								Si <mark>image latérale</mark>, il n'y a pas une image par ligne de timline, mais seulement une image latérale à gauche servant d'illustrations globale</p>

						</li>
						<li class="component-explanation__option">
							<h4 class="component-explanation__option-title">Proportions d'images </h4>
							<p class="component-explanation__option-description">
								Si <mark>image par ligne</mark>, il est possible de choisir de choisir entre trois proportions carrés, moyennes, hautes </p>

						</li>
					</ul>
				</div>
			</div>
			<div class="demo-components__demo-component">
				<p class="demo-components__demo-component__explanatory-title">Version avec illustration latérale</p>
				<?php
				get_template_part("template-components/demo-components/exemple-timeline-illustration-laterale", null);
				?>
			</div>
			<div class="demo-components__demo-component">
				<p class="demo-components__demo-component__explanatory-title">Version avec images par ligne</p>
				<?php
				get_template_part("template-components/demo-components/exemple-timeline-image-lignes", null);
				?>
			</div>


		</article>

		<!-- VOCABULAIRE SUMMARY -->
		<article id="demo-component-vocabulaire-summary" class="demo-component">
			<div class="component-explanation">
				<div class="component-explanation__component-icon">
					<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 100 125" x="0px" y="0px">
						<title>130all</title>
						<path d="M31.34,16.75a9.19,9.19,0,1,0-11.69,8.83V41.13a9.18,9.18,0,0,0,0,17.67V74.34a9.19,9.19,0,1,0,5,0V58.79a9.18,9.18,0,0,0,0-17.67V25.59A9.2,9.2,0,0,0,31.34,16.75Z" />
						<rect x="38.45" y="3.26" width="38.58" height="27.14" />
						<rect x="38.45" y="36.39" width="48.58" height="27.14" />
						<rect x="38.45" y="69.6" width="38.58" height="27.14" />
					</svg>
				</div>
				<h2 class="component-explanation__title">Vocabulaire de la fiche</h2>
				<h3 class="component-explanation__technical-title">vocabulaire-summary</h3>
				<p class="component-explanation__description">Pour la création de timeline</p>
				<div class="component-explanation__options">
					<h3>Options & Variantes</h3>
					<ul>
						<li class="component-explanation__option">
							<h4 class="component-explanation__option-title">Image par ligne / Image latérale </h4>
							<p class="component-explanation__option-description">
								Si <mark>image latérale</mark>, il n'y a pas une image par ligne de timline, mais seulement une image latérale à gauche servant d'illustrations globale</p>

						</li>
						<li class="component-explanation__option">
							<h4 class="component-explanation__option-title">Proportions d'images </h4>
							<p class="component-explanation__option-description">
								Si <mark>image par ligne</mark>, il est possible de choisir de choisir entre trois proportions carrés, moyennes, hautes </p>

						</li>
					</ul>
				</div>
			</div>
			<div class="demo-components__demo-component">
				<p class="demo-components__demo-component__explanatory-title">Version avec illustration latérale</p>
				<?php
				get_template_part("template-components/demo-components/exemple-timeline-illustration-laterale", null);
				?>
			</div>
			<div class="demo-components__demo-component">
				<p class="demo-components__demo-component__explanatory-title">Version avec images par ligne</p>
				<?php
				get_template_part("template-components/demo-components/exemple-timeline-image-lignes", null);
				?>
			</div>


		</article>


		<!-- FOCUSED SHEMA -->
		<article id="demo-component-focused-shema" class="demo-component">
			<div class="component-explanation">
				<div class="component-explanation__component-icon">
					<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
						<g>
							<path d="m443.093 324.907c0-103.163-83.93-187.092-187.093-187.092s-187.093 83.929-187.093 187.092c0 42.261 14.092 81.289 37.814 112.647-6.216-16.99-9.611-35.328-9.611-54.444 0-87.612 71.277-158.89 158.89-158.89s158.89 71.277 158.89 158.89c0 19.116-3.395 37.454-9.611 54.444 23.722-31.358 37.814-70.386 37.814-112.647z" />
							<path d="m384.89 383.11c0-71.07-57.819-128.89-128.89-128.89s-128.89 57.82-128.89 128.89c0 41.62 19.834 78.688 50.541 102.268-2.706-8.157-4.192-16.865-4.192-25.919 0-45.514 37.027-82.542 82.541-82.542s82.541 37.028 82.541 82.542c0 9.054-1.486 17.762-4.192 25.919 30.706-23.58 50.541-60.648 50.541-102.268z" />
							<path d="m308.541 459.459c0-28.972-23.569-52.542-52.541-52.542s-52.541 23.57-52.541 52.542 23.569 52.541 52.541 52.541 52.541-23.569 52.541-52.541z" />
							<path d="m512 256c0-68.38-26.629-132.667-74.98-181.02-48.353-48.351-112.64-74.98-181.02-74.98s-132.667 26.629-181.02 74.98c-48.351 48.353-74.98 112.64-74.98 181.02 0 62.294 22.108 121.187 62.599 167.734-15.483-30.22-23.692-63.891-23.692-98.827 0-57.987 22.582-112.504 63.585-153.507 41.004-41.004 95.521-63.585 153.508-63.585s112.504 22.581 153.508 63.585c41.003 41.003 63.585 95.52 63.585 153.507 0 34.936-8.208 68.606-23.692 98.827 40.491-46.547 62.599-105.44 62.599-167.734z" />
						</g>
					</svg>
				</div>

				<h2 class="component-explanation__title">Schéma + Légende</h2>
				<h3 class="component-explanation__technical-title">focused-shema</h3>
				<p class="component-explanation__description">Bloc de Gestion schéma. Insérer un schéma et insérez-y la légende nécéssaire à l'aide de points de focus.</p>

			</div>
			<div class="demo-components__demo-component">
				<?php
				get_template_part("template-components/demo-components/exemple-focused-schema", null);
				?>
			</div>



		</article>


		<!-- FOCUSED THEMATIQUE -->
		<article id="demo-component-focused-thematique" class="demo-component">
			<div class="component-explanation">
				<div class="component-explanation__component-icon">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
						<path d="m301.92,200h115.1c3.56,13.79,16.1,24,30.99,24,17.65,0,32-14.36,32-32s-14.35-32-32-32c-14.88,0-27.43,10.21-30.99,24h-121.01c-.58,0-1.15.07-1.7.18l-15.5-32.18h-125.61l-46.22,96h218.05l-23.11-48Z" />
						<path d="m359.69,320h73.32c3.56,13.79,16.1,24,30.99,24,17.65,0,32-14.36,32-32s-14.35-32-32-32c-14.88,0-27.43,10.21-30.99,24h-81.02l-19.26-40H99.27l-46.22,96h325.91l-19.26-40Z" />
						<path d="m247.99,88h153.02c3.56,13.79,16.1,24,30.99,24,17.65,0,32-14.36,32-32s-14.35-32-32-32c-14.88,0-27.43,10.21-30.99,24h-160.73l-17.08-35.47c-1.33-2.77-4.13-4.53-7.21-4.53s-5.88,1.76-7.21,4.53l-47.89,99.47h110.2l-23.11-48Z" />
						<path d="m480,400c-14.88,0-27.43,10.21-30.99,24h-39.24l-23.11-48H45.34L.79,468.53c-1.19,2.48-1.03,5.4.43,7.73,1.46,2.33,4.02,3.74,6.77,3.74h416c2.75,0,5.31-1.41,6.77-3.74,1.46-2.33,1.63-5.25.43-7.73l-13.74-28.53h31.54c3.56,13.79,16.1,24,30.99,24,17.65,0,32-14.36,32-32s-14.35-32-32-32Z" />
					</svg>
				</div>
				<h2 class="component-explanation__title">Schéma de thématique avec points de focus</h2>
				<h3 class="component-explanation__technical-title">focused-thematique </h3>
				<p class="component-explanation__description">Bloc en tête thématique avec points de focus</p>

			</div>
			<div class="demo-components__demo-component">
				<?php
				get_template_part("template-components/demo-components/exemple-schema-thematique", null);
				?>
			</div>



		</article>

		<!-- CONTENT BOX -->
		<article id="demo-component-content-box" class="demo-component">
			<div class="component-explanation">
				<div class="component-explanation__component-icon">
					<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 82.01">
						<g id="Calque_1-2" data-name="Calque 1">
							<path class="cls-1" d="m77.53,15.3L41.53.3c-.61-.25-1.28-.35-1.94-.28-.39.04-.77.13-1.12.28L2.47,15.3C.97,15.93,0,17.4,0,19.02v44c0,1.61.98,3.07,2.47,3.69l36,15c.98.41,2.08.41,3.06,0l36-15c1.49-.62,2.47-2.07,2.47-3.69V19.02c0-1.63-.97-3.1-2.47-3.72Zm-41.53,56.72l-28-11.69V25.02l28,11.66v35.34Zm4-42.34l-25.59-10.69,25.59-10.66,25.59,10.66-25.59,10.69Zm32,30.66l-28,11.69v-35.34l28-11.66v35.31Z" />
						</g>
					</svg>
				</div>
				<h2 class="component-explanation__title">Content Box</h2>
				<h3 class="component-explanation__technical-title">content-box</h3>
				<p class="component-explanation__description">Section / Boite de gestion contenu pouvant contenir plusieurs type de contenu. Le bloc prend toute la largeur, mais la zone de contenu intérieure est restreinte.</p>
				<div class="component-explanation__options">
					<h3>Options & Variantes</h3>
					<ul>
						<li class="component-explanation__option">
							<h4 class="component-explanation__option-title">Couleur de fond </h4>
							<p class="component-explanation__option-description">
								la couleur de fond peut être blanche ou grise</p>
						</li>

					</ul>
				</div>
			</div>
			<div class="demo-components__demo-component">
				<p class="demo-components__demo-component__explanatory-title">Version contenant un block "titre de section" et des blocks "cards en colonne"</p>
				<?php
				get_template_part("template-components/demo-components/exemple-content-box-cards", null);
				?>
			</div>
			<div class="demo-components__demo-component">
				<p class="demo-components__demo-component__explanatory-title">Version contenant un block "titre de section" et un "block monoblock"</p>


				<?php
				get_template_part("template-components/demo-components/exemple-content-box-monoblock", null);
				?>
			</div>
			<div class="demo-components__demo-component">
				<p class="demo-components__demo-component__explanatory-title">Version contenant un block "titre de section" et un "block monoblock", intégrant lui même un block accordéon</p>

				<?php
				get_template_part("template-components/demo-components/exemple-content-box-monoblock-accordeon", null);
				?>

			</div>


		</article>


	</section>

	<!-- CSS COMPONENTS -->

	<section id="css-components" class="demo-components">
		<div class="demo-components__section-title">
			<h2>CSS components</h2>
			<h3>Composants CSS</h3>
			<p>Ces blocs existent dans le design système, mais sont utilisés de manière automatique dans les pages </p>

		</div>

		<!-- BOUTONS -->
		<article class="buttons component">
			<div class="component-explanation">
				<h2 class="component-explanation__title">Boutons</h2>
				<p class="component-explanation__description">différent boutons</p>
			</div>

			<div class="buttons-example">
				<a class="cta cta--primary cta--button" href="#" target="_blank">Bouton Primaire</a>
				<a class="cta cta--secondary cta--button" href="#" target="_blank">Bouton Secondaire</a>
				<a class="cta cta--outline cta--button" href="#" target="_blank">Bouton Outline</a>
				<a class="cta cta--button cta--shadowed" href="#" target="_blank">Bouton White Shadowed</a>

			</div>
		</article>

		<!-- HEADING BOX -->
		<article id="heading-box" class="component">
			<div class="component-explanation">
				<h2 class="component-explanation__title">
					Heading Box
				</h2>
				<p class="component-explanation__description">Pour le titrage de pages. L'icone et le titre sont intégrées automatiquement depuis les informations de page</p>
			</div>
			<?php
			get_template_part("template-components/heading-box", null, array(
				"title" => "Heading Box",
				"description" => "Bonjour ! je suis une belle boite de titrage",
				"pageIcon" => array(
					"url" => get_template_directory_uri() . "/resources/img/pictogrammes/pictogramme-formulaire.svg"
				)
			));
			?>

		</article>

		<!-- NEWS HEADING BOX -->
		<article id="news-heading-box" class="component">
			<div class="component-explanation">
				<h2 class="component-explanation__title">News Heading Box</h2>
				<p class="component-explanation__description">Pour le titrage de pages. L'icone et le titre sont intégrées automatiquement depuis les informations de page</p>
			</div>
			<?php
			get_template_part("template-components/heading-box--news", null, array(
				"title" => "Boite de titrage News",
				"news_type" => get_the_terms(4949, 'news_type'),
				"thumbnail" => get_the_post_thumbnail(4949, "full", array('class' => 'heading-box--news__thumbnail')),
				"published" => get_the_date()
			));
			?>


		</article>
		<article id="chapter-header" class="component post-conseil-page--acoustique">
			<div class="component-explanation">
				<h2 class="component-explanation__title">Chapter Header</h2>
				<p class="component-explanation__description">Bloc Supérieur de titrage pour les fiches conseils. Les couleurs et les illustrations sont attribués automatiquement en fonction de la thématique courante. Le bouton de téléchargement de brochure est affiché automatiquement lorsque la brochure est disponible </p>
			</div>


			<?php

			get_template_part('template-components/post-conseils/chapter-header', null, array(
				'postID' => 805,
				'subtitle' => __("Les conseillers Homegrade vous guident", "homegrade-theme__texte-fonctionnel"),
				'title' => get_the_title(805),
				'hasInfoCapsule' => true,
			)); ?>


			?>


		</article>





	</section>


</div>

<?php
get_footer('demo-components');
