updating demo comoponents list

This commit is contained in:
Antoine M 2023-11-09 12:27:22 +01:00
parent 1cf4206927
commit dd421845b6
2 changed files with 585 additions and 32 deletions

View File

@ -12,6 +12,7 @@
</div> </div>
</section> </section>
<!-- BLOCKS COMPONENTS --> <!-- BLOCKS COMPONENTS -->
<section id="blocks-components" class="demo-components"> <section id="blocks-components" class="demo-components">
<div class="demo-components__section-title"> <div class="demo-components__section-title">
@ -19,39 +20,120 @@
<h3>Blocks de contenu</h3> <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> <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> </div>
<article class="component">
<div class="component-explanation">
<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> <ol class="demo-components__chapter_list">
<li><a href="#demo-component-highlight">Mise en avant</a></li>
<li><a href="#demo-component-picture-banner">Image Bannière</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>
</ol>
<!-- 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"> <div class="component-explanation__options">
<h3>Options & Variantes</h3> <h3>Options & Variantes</h3>
<ul> <ul>
<li class="component-explanation__option"> <li class="component-explanation__option">
<h4 class="component-explanation__option-title">Call to action</h4> <h4 class="component-explanation__option-title">Variantes</h4>
<p class="component-explanation__option-description"> <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> Choix entre <mark>classic</mark> & <mark>warning</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> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="block-content-page-header wp-block-homegrade-content-blocks-content-page-header"> <div class="demo-components__demo-component">
<div class="block-content-page-header__content"> <p class="demo-components__demo-component__explanatory-title">Version simple</p>
<h1>Qui sommes-nous ?</h1> <section class="wp-block-homegrade-content-blocks-highlight homegrade-blocks-highlight homegrade-blocks-highlight--classic">
<h2>Plus de 40 conseillers en rénovation </h2> <div class="homegrade-blocks-highlight__titling">
<p>Homegrade, ce sont plus de 40 conseillers en rénovation en majorité architectes, mais également ingénieurs, historiens de lart… <strong>en formation continue</strong> ! Ces experts de terrain vous fournissent des conseils avisés et professionnels.<br><br>Découvrez notre équipe de direction, composée de professionnels chevronnés qui guident notre asbl vers lexcellence. </p> <div class="icon"><img decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi4zODgiIGhlaWdodD0iMTQuMTg2IiB2aWV3Qm94PSIwIDAgMTIuMzg4IDE0LjE4NiI+CiAgPHBhdGggaWQ9IlRyYWPDqV8xODUzNCIgZGF0YS1uYW1lPSJUcmFjw6kgMTg1MzQiIGQ9Ik05NjAuMjE0LDkyOS40NDJsLTUuMTk0LDQuNzgydjcuNGgxMC4zODh2LTcuNFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC05NTQuMDIgLTkyOC40NDIpIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPgo=" alt=""></div>
<a class="block-content-page-header__cta-link" href="www.exemple.com">Voir léquipe de direction de Homegrade</a> <h3 class="homegrade-blocks-highlight__block-title">Informations complémentaires et inscriptions</h3>
</div> </div>
<div class="homegrade-blocks-highlight__content">
<div class="homegrade-blocks-highlight__content__innerblocks">
<p>Pour toute question ou pour sinscrire à lune de nos formations, contactez-nous via e-mail inscriptions@homegrade.brussels ou par téléphone.</p>
<img decoding="async" class="block-content-page-header__page-icon" src="<?php echo get_template_directory_uri() . '/resources/img/demo-img/homegrade_qui-sommes-nous.svg' ?>" alt="">
<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Envoyer un e-mail</a></div>
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="tel:+3222274260">Appeler le 02 227 42 60</a></div>
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="tel:+3222274269">Appeler le 02 227 42 69</a></div>
</div>
</div>
</div>
</section>
</div>
<div class="demo-components__demo-component">
<p class="demo-components__demo-component__explanatory-title">Version avec logo</p>
<section class="wp-block-homegrade-content-blocks-highlight homegrade-blocks-highlight homegrade-blocks-highlight--classic">
<div class="homegrade-blocks-highlight__titling">
<div class="icon"><img decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNy44MDMiIGhlaWdodD0iMTcuNDI2IiB2aWV3Qm94PSIwIDAgMTcuODAzIDE3LjQyNiI+CiAgPHBhdGggaWQ9Ikljb25fZmVhdGhlci1rZXkiIGRhdGEtbmFtZT0iSWNvbiBmZWF0aGVyLWtleSIgZD0iTTE4LjAxMywzbC0xLjU4LDEuNThNMTAuNDIsMTAuNTkzYTQuMzQ2LDQuMzQ2LDAsMSwxLTYuMTQ2LDAsNC4zNDYsNC4zNDYsMCwwLDEsNi4xNDYsMFptMCwwLDMuMjQ4LTMuMjQ4bTAsMCwyLjM3LDIuMzdMMTguOCw2Ljk1MWwtMi4zNy0yLjM3TTEzLjY2OCw3LjM0NiwxNi40MzMsNC41OCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIuMDAxIC0xLjU4NikiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz4KPC9zdmc+Cg==" alt=""></div>
<h3 class="homegrade-blocks-highlight__block-title">RENOLUTION</h3>
</div>
<div class="homegrade-blocks-highlight__content">
<div class="homegrade-blocks-highlight__content__innerblocks">
<p>Point de contact privilégié pour tout rénovateur particulier bruxellois, Homegrade se place comme un acteur-clé de RENOLUTION, la Stratégie de rénovation du bâti de la Région de Bruxelles-Capitale.</p>
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://renolution.brussels/fr" target="_blank" rel="noreferrer noopener">En savoir plus sur RENOLUTION</a></div>
</div>
<div class="homegrade-blocks-highlight__logo"><img decoding="async" src="http://homegrade.local/wp-content/uploads/2023/10/logo-renolution-monochrome.svg" alt=""></div>
</div>
</section>
</div>
<div class="demo-components__demo-component">
<p class="demo-components__demo-component__explanatory-title">Version "warning"</p>
<section class="wp-block-homegrade-content-blocks-highlight homegrade-blocks-highlight homegrade-blocks-highlight--warning">
<div class="homegrade-blocks-highlight__titling">
<div class="icon"><img decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi4zODgiIGhlaWdodD0iMTQuMTg2IiB2aWV3Qm94PSIwIDAgMTIuMzg4IDE0LjE4NiI+CiAgPHBhdGggaWQ9IlRyYWPDqV8xODUzNCIgZGF0YS1uYW1lPSJUcmFjw6kgMTg1MzQiIGQ9Ik05NjAuMjE0LDkyOS40NDJsLTUuMTk0LDQuNzgydjcuNGgxMC4zODh2LTcuNFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC05NTQuMDIgLTkyOC40NDIpIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+Cjwvc3ZnPgo=" alt=""></div>
<h3 class="homegrade-blocks-highlight__block-title">Vérifiez les conditions daccès</h3>
</div>
<div class="homegrade-blocks-highlight__content">
<div class="homegrade-blocks-highlight__content__innerblocks">
<p>Pour en savoir plus sur les conditions daccès aux formations, la procédure dobtention de lagrément et les obligations du certificateur, veuillez cliquer sur le bouton ci-dessous.</p>
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Vérifier les conditions daccès</a></div>
</div>
</div>
</section>
</div> </div>
</article> </article>
<article class="component"> <!-- PICTURE BANNER -->
<article id="demo-component-picture-banner" class="demo-component">
<div class="component-explanation"> <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> <h2 class="component-explanation__title">Image Bannière</h2>
<h3 class="component-explanation__technical-title">picture-banner</h3> <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> <p class="component-explanation__description">Pour insérer une image bannière fixe ou intégrale</p>
@ -67,15 +149,448 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="wp-block-homegrade-content-blocks-picture-banner homegrade-content-blocks-picture-banner fixed-height"> <div class="demo-components__demo-component">
<img src="<?php echo get_template_directory_uri() . "/resources/img/demo-img/systeme-de-chauffage-amelioration.jpg" ?>"> <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/systeme-de-chauffage-amelioration.jpg" ?>">
</div>
</div> </div>
<div class="wp-block-homegrade-content-blocks-picture-banner homegrade-content-blocks-picture-banner"> <div class="demo-components__demo-component">
<img src="<?php echo get_template_directory_uri() . "/resources/img/demo-img/equipe-homegrade-e1698755824363.jpg" ?>"> <div class="wp-block-homegrade-content-blocks-picture-banner homegrade-content-blocks-picture-banner">
<img src="<?php echo get_template_directory_uri() . "/resources/img/demo-img/equipe-homegrade-e1698755824363.jpg" ?>">
</div>
</div> </div>
</article> </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">
<div class="block-content-page-header wp-block-homegrade-content-blocks-content-page-header">
<div class="block-content-page-header__content">
<h1>Qui sommes-nous ?</h1>
<h2>Plus de 40 conseillers en rénovation </h2>
<p>Homegrade, ce sont plus de 40 conseillers en rénovation en majorité architectes, mais également ingénieurs, historiens de lart… <strong>en formation continue</strong> ! Ces experts de terrain vous fournissent des conseils avisés et professionnels.<br><br>Découvrez notre équipe de direction, composée de professionnels chevronnés qui guident notre asbl vers lexcellence. </p>
<a class="block-content-page-header__cta-link" href="www.exemple.com">Voir léquipe de direction de Homegrade</a>
</div>
<img decoding="async" class="block-content-page-header__page-icon" src="<?php echo get_template_directory_uri() . '/resources/img/demo-img/homegrade_qui-sommes-nous.svg' ?>" alt="">
</div>
</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">
<section class="wp-block-homegrade-content-blocks-tips-to-know homegrade-blocks-tips-to-know">
<div class="wp-block-homegrade-content-blocks-section-titling section_titling section_titling--left">
<h3 class="section_titling__title">accessibilité À notre point info</h3>
<p class="section_titling__subtitle">Profitez des transports en commun pour venir dans nos locaux</p>
</div>
<div class="wp-block-homegrade-content-blocks-tips-container homegrade-blocks-tips-to-know__tips-container">
<div class="wp-block-homegrade-content-blocks-tip homegrade-blocks-tips-to-know__tip">
<div class="homegrade-blocks-tips-to-know__tip-icon"><img decoding="async" src="http://homegrade.local/wp-content/uploads/2023/11/homegrade_precision.svg" alt=""></div>
<div class="tip-content">
<h4 class="homegrade-blocks-tips-to-know__tip-title">Métro</h4>
<p>Arrêts aux stations <strong>métro Botanique</strong> et <strong>Madou</strong>.</p>
</div>
</div>
<div class="wp-block-homegrade-content-blocks-tip homegrade-blocks-tips-to-know__tip">
<div class="homegrade-blocks-tips-to-know__tip-icon"><img decoding="async" src="http://homegrade.local/wp-content/uploads/2023/11/homegrade_precision.svg" alt=""></div>
<div class="tip-content">
<h4 class="homegrade-blocks-tips-to-know__tip-title">Trains</h4>
<p>Gare de <strong>Bruxelles-Central</strong>, arrêt de bus <strong>Quetelet</strong> (65 ou 66).</p>
</div>
</div>
<div class="wp-block-homegrade-content-blocks-tip homegrade-blocks-tips-to-know__tip">
<div class="homegrade-blocks-tips-to-know__tip-icon"><img decoding="async" src="http://homegrade.local/wp-content/uploads/2023/11/homegrade_precision.svg" alt=""></div>
<div class="tip-content">
<h4 class="homegrade-blocks-tips-to-know__tip-title">Bus</h4>
<ul>
<li>Arrêt de bus <strong>Quetelet</strong> (61, 65 et 66) ;</li>
<li>Arrêt de bus <strong>Gillon</strong> (N04 et T92) environ 6 minutes de marche ;</li>
<li>Arrêt de bus <strong>Bossuet</strong> (59 ou 61) environ 5 minutes de marche ;</li>
</ul>
</div>
</div>
<div class="wp-block-homegrade-content-blocks-tip homegrade-blocks-tips-to-know__tip">
<div class="homegrade-blocks-tips-to-know__tip-icon"><img decoding="async" src="http://homegrade.local/wp-content/uploads/2023/11/homegrade_precision.svg" alt=""></div>
<div class="tip-content">
<h4 class="homegrade-blocks-tips-to-know__tip-title">Moyens de locomotions individuels</h4>
<p>Parking privé disponible pour vélos et voitures* <strong>gratuitement</strong>.</p>
<p>*Depuis le 1 er janvier 2018, la Région Bruxelles-Capitale est devenue une zone de basses émissions (LEZ). Vérifiez si votre véhicule peut circuler au sein de la zone via <a href="https://lez.brussels/" data-type="link" data-id="https://lez.brussels/" target="_blank" rel="noopener">lez.brussels</a> .</p>
</div>
</div>
</div>
</section>
</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">
<section class="wp-block-homegrade-content-blocks-staff-list homegrade-blocks-staff-list">
<h3 class="homegrade-blocks-staff-list__title">comité de direction</h3>
<h4 class="homegrade-blocks-staff-list__subtitle">Un comité de direction composé de 6 personnes</h4>
<ul class="homegrade-blocks-staff-list__staff-list">
<li class="wp-block-homegrade-content-blocks-staff-member homegrade-blocks-staff-member">
<div class="homegrade-blocks-staff-member__member-icon"><img decoding="async" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0ibWFzY290dGUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA2MCA2MCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogdXJsKCNEw6lncmFkw6lfc2Fuc19ub21fMyk7CiAgICAgIH0KCiAgICAgIC5jbHMtMSwgLmNscy0yIHsKICAgICAgICBzdHJva2Utd2lkdGg6IDBweDsKICAgICAgfQoKICAgICAgLmNscy0zIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICAgIHN0cm9rZTogIzAwMDsKICAgICAgICBzdHJva2UtbGluZWNhcDogcm91bmQ7CiAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsKICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsKICAgICAgfQoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiB1cmwoI0TDqWdyYWTDqV9zYW5zX25vbV8zLTIpOwogICAgICB9CiAgICA8L3N0eWxlPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMyIgZGF0YS1uYW1lPSJEw6lncmFkw6kgc2FucyBub20gMyIgeDE9Ii0yMjgwLjI4IiB5MT0iODAuMDMiIHgyPSItMjI3OS4yOSIgeTI9Ijc4Ljk4IiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDYwMzMuNzIgNjIyLjQ3KSBzY2FsZSgyLjYzIC03LjQ0KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmMzI4MWQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmU3NjZmIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMy0yIiBkYXRhLW5hbWU9IkTDqWdyYWTDqSBzYW5zIG5vbSAzIiB4MT0iLTIyNzYuMDYiIHkxPSI4MC4wMiIgeDI9Ii0yMjc1LjA2IiB5Mj0iNzguOTciIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjAwOS4zOCA2MTkuNDUpIHNjYWxlKDIuNjIgLTcuNDQpIiB4bGluazpocmVmPSIjRMOpZ3JhZMOpX3NhbnNfbm9tXzMiLz4KICA8L2RlZnM+CiAgPGcgaWQ9Ikdyb3VwZV81ODYyIiBkYXRhLW5hbWU9Ikdyb3VwZSA1ODYyIj4KICAgIDxnIGlkPSJHcm91cGVfMzE5NSIgZGF0YS1uYW1lPSJHcm91cGUgMzE5NSI+CiAgICAgIDxnIGlkPSJHcm91cGVfZGVfbWFzcXVlc18xIiBkYXRhLW5hbWU9Ikdyb3VwZSBkZSBtYXNxdWVzIDEiPgogICAgICAgIDxnIGlkPSJHcm91cGVfNTU5MyIgZGF0YS1uYW1lPSJHcm91cGUgNTU5MyI+CiAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTUiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTUiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTQiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTQiPgogICAgICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDQiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ0IiBjbGFzcz0iY2xzLTMiIGQ9Im0xMi40Niw1NC4yOWMuMzQtMS4wOS44Mi0yLjUzLDEuNDktNC4xOCwwLDAsLjM2LS44OC43Ny0xLjc5LDEuNjItMy42LDUuMzQtOS40NSw1LjYtOS44NWwxOC45OC02Ljk0LjI5LDcuMjJjMi4wMSwxLjQ0LDMuNzIsMy4yNSw1LjAzLDUuMzQsMSwxLjYxLDEuNzYsMy4zNSwyLjI1LDUuMTguNDIsMS42NS42NCwzLjM0LjY2LDUuMDMiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgPC9nPgogICAgICAgICAgPGcgaWQ9Ikdyb3VwZV81NTk2IiBkYXRhLW5hbWU9Ikdyb3VwZSA1NTk2Ij4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NiIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDYiIGNsYXNzPSJjbHMtMyIgZD0ibTQ3LjA3LDM2LjYxbC0xNC45OSw4LjY1di0xNy4ybDcuNDktMTMuNyw3LjUsNS4wNXYxNy4xOVoiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NyIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDciIGNsYXNzPSJjbHMtMyIgZD0ibTMyLjA4LDQ1LjI2bC0xNC45OC04LjY1di0xNy4xOWwxNC45OCw4LjY1djE3LjE5WiIvPgogICAgICAgICAgICA8cGF0aCBpZD0iVHJhY8OpXzIzODQ4IiBkYXRhLW5hbWU9IlRyYWPDqSAyMzg0OCIgY2xhc3M9ImNscy0zIiBkPSJtMTcuMSwxOS40MWw3LjQ5LTEzLjcsMTQuOTgsOC42NS03LjQ5LDEzLjctMTQuOTgtOC42NVoiLz4KICAgICAgICAgIDwvZz4KICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDkiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ5IiBjbGFzcz0iY2xzLTEiIGQ9Im0zNi4zNCwzMy45MWwyLjYzLTEuNTJ2LTUuOTJsLTIuNjMsMS41MXY1LjkzWiIvPgogICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg1MCIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NTAiIGNsYXNzPSJjbHMtMiIgZD0ibTQxLjMyLDMxLjA1bDIuNjItMS41MXYtNS45M2wtMi42MiwxLjUxdjUuOTNaIi8+CiAgICAgICAgPC9nPgogICAgICA8L2c+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=" alt=""></div>
<div class="homegrade-blocks-staff-member__member-informations">
<h4 class="homegrade-blocks-staff-member__name">Didier Van Severen</h4>
<p class="homegrade-blocks-staff-member__position">Directeur général</p>
</div>
</li>
<li class="wp-block-homegrade-content-blocks-staff-member homegrade-blocks-staff-member">
<div class="homegrade-blocks-staff-member__member-icon"><img decoding="async" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0ibWFzY290dGUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA2MCA2MCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogdXJsKCNEw6lncmFkw6lfc2Fuc19ub21fMyk7CiAgICAgIH0KCiAgICAgIC5jbHMtMSwgLmNscy0yIHsKICAgICAgICBzdHJva2Utd2lkdGg6IDBweDsKICAgICAgfQoKICAgICAgLmNscy0zIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICAgIHN0cm9rZTogIzAwMDsKICAgICAgICBzdHJva2UtbGluZWNhcDogcm91bmQ7CiAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsKICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsKICAgICAgfQoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiB1cmwoI0TDqWdyYWTDqV9zYW5zX25vbV8zLTIpOwogICAgICB9CiAgICA8L3N0eWxlPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMyIgZGF0YS1uYW1lPSJEw6lncmFkw6kgc2FucyBub20gMyIgeDE9Ii0yMjgwLjI4IiB5MT0iODAuMDMiIHgyPSItMjI3OS4yOSIgeTI9Ijc4Ljk4IiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDYwMzMuNzIgNjIyLjQ3KSBzY2FsZSgyLjYzIC03LjQ0KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmMzI4MWQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmU3NjZmIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMy0yIiBkYXRhLW5hbWU9IkTDqWdyYWTDqSBzYW5zIG5vbSAzIiB4MT0iLTIyNzYuMDYiIHkxPSI4MC4wMiIgeDI9Ii0yMjc1LjA2IiB5Mj0iNzguOTciIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjAwOS4zOCA2MTkuNDUpIHNjYWxlKDIuNjIgLTcuNDQpIiB4bGluazpocmVmPSIjRMOpZ3JhZMOpX3NhbnNfbm9tXzMiLz4KICA8L2RlZnM+CiAgPGcgaWQ9Ikdyb3VwZV81ODYyIiBkYXRhLW5hbWU9Ikdyb3VwZSA1ODYyIj4KICAgIDxnIGlkPSJHcm91cGVfMzE5NSIgZGF0YS1uYW1lPSJHcm91cGUgMzE5NSI+CiAgICAgIDxnIGlkPSJHcm91cGVfZGVfbWFzcXVlc18xIiBkYXRhLW5hbWU9Ikdyb3VwZSBkZSBtYXNxdWVzIDEiPgogICAgICAgIDxnIGlkPSJHcm91cGVfNTU5MyIgZGF0YS1uYW1lPSJHcm91cGUgNTU5MyI+CiAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTUiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTUiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTQiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTQiPgogICAgICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDQiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ0IiBjbGFzcz0iY2xzLTMiIGQ9Im0xMi40Niw1NC4yOWMuMzQtMS4wOS44Mi0yLjUzLDEuNDktNC4xOCwwLDAsLjM2LS44OC43Ny0xLjc5LDEuNjItMy42LDUuMzQtOS40NSw1LjYtOS44NWwxOC45OC02Ljk0LjI5LDcuMjJjMi4wMSwxLjQ0LDMuNzIsMy4yNSw1LjAzLDUuMzQsMSwxLjYxLDEuNzYsMy4zNSwyLjI1LDUuMTguNDIsMS42NS42NCwzLjM0LjY2LDUuMDMiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgPC9nPgogICAgICAgICAgPGcgaWQ9Ikdyb3VwZV81NTk2IiBkYXRhLW5hbWU9Ikdyb3VwZSA1NTk2Ij4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NiIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDYiIGNsYXNzPSJjbHMtMyIgZD0ibTQ3LjA3LDM2LjYxbC0xNC45OSw4LjY1di0xNy4ybDcuNDktMTMuNyw3LjUsNS4wNXYxNy4xOVoiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NyIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDciIGNsYXNzPSJjbHMtMyIgZD0ibTMyLjA4LDQ1LjI2bC0xNC45OC04LjY1di0xNy4xOWwxNC45OCw4LjY1djE3LjE5WiIvPgogICAgICAgICAgICA8cGF0aCBpZD0iVHJhY8OpXzIzODQ4IiBkYXRhLW5hbWU9IlRyYWPDqSAyMzg0OCIgY2xhc3M9ImNscy0zIiBkPSJtMTcuMSwxOS40MWw3LjQ5LTEzLjcsMTQuOTgsOC42NS03LjQ5LDEzLjctMTQuOTgtOC42NVoiLz4KICAgICAgICAgIDwvZz4KICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDkiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ5IiBjbGFzcz0iY2xzLTEiIGQ9Im0zNi4zNCwzMy45MWwyLjYzLTEuNTJ2LTUuOTJsLTIuNjMsMS41MXY1LjkzWiIvPgogICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg1MCIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NTAiIGNsYXNzPSJjbHMtMiIgZD0ibTQxLjMyLDMxLjA1bDIuNjItMS41MXYtNS45M2wtMi42MiwxLjUxdjUuOTNaIi8+CiAgICAgICAgPC9nPgogICAgICA8L2c+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=" alt=""></div>
<div class="homegrade-blocks-staff-member__member-informations">
<h4 class="homegrade-blocks-staff-member__name">Patrick Herregods</h4>
<p class="homegrade-blocks-staff-member__position">Manager opérationnel</p>
</div>
</li>
<li class="wp-block-homegrade-content-blocks-staff-member homegrade-blocks-staff-member">
<div class="homegrade-blocks-staff-member__member-icon"><img decoding="async" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0ibWFzY290dGUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA2MCA2MCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogdXJsKCNEw6lncmFkw6lfc2Fuc19ub21fMyk7CiAgICAgIH0KCiAgICAgIC5jbHMtMSwgLmNscy0yIHsKICAgICAgICBzdHJva2Utd2lkdGg6IDBweDsKICAgICAgfQoKICAgICAgLmNscy0zIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICAgIHN0cm9rZTogIzAwMDsKICAgICAgICBzdHJva2UtbGluZWNhcDogcm91bmQ7CiAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsKICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsKICAgICAgfQoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiB1cmwoI0TDqWdyYWTDqV9zYW5zX25vbV8zLTIpOwogICAgICB9CiAgICA8L3N0eWxlPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMyIgZGF0YS1uYW1lPSJEw6lncmFkw6kgc2FucyBub20gMyIgeDE9Ii0yMjgwLjI4IiB5MT0iODAuMDMiIHgyPSItMjI3OS4yOSIgeTI9Ijc4Ljk4IiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDYwMzMuNzIgNjIyLjQ3KSBzY2FsZSgyLjYzIC03LjQ0KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmMzI4MWQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmU3NjZmIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMy0yIiBkYXRhLW5hbWU9IkTDqWdyYWTDqSBzYW5zIG5vbSAzIiB4MT0iLTIyNzYuMDYiIHkxPSI4MC4wMiIgeDI9Ii0yMjc1LjA2IiB5Mj0iNzguOTciIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjAwOS4zOCA2MTkuNDUpIHNjYWxlKDIuNjIgLTcuNDQpIiB4bGluazpocmVmPSIjRMOpZ3JhZMOpX3NhbnNfbm9tXzMiLz4KICA8L2RlZnM+CiAgPGcgaWQ9Ikdyb3VwZV81ODYyIiBkYXRhLW5hbWU9Ikdyb3VwZSA1ODYyIj4KICAgIDxnIGlkPSJHcm91cGVfMzE5NSIgZGF0YS1uYW1lPSJHcm91cGUgMzE5NSI+CiAgICAgIDxnIGlkPSJHcm91cGVfZGVfbWFzcXVlc18xIiBkYXRhLW5hbWU9Ikdyb3VwZSBkZSBtYXNxdWVzIDEiPgogICAgICAgIDxnIGlkPSJHcm91cGVfNTU5MyIgZGF0YS1uYW1lPSJHcm91cGUgNTU5MyI+CiAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTUiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTUiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTQiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTQiPgogICAgICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDQiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ0IiBjbGFzcz0iY2xzLTMiIGQ9Im0xMi40Niw1NC4yOWMuMzQtMS4wOS44Mi0yLjUzLDEuNDktNC4xOCwwLDAsLjM2LS44OC43Ny0xLjc5LDEuNjItMy42LDUuMzQtOS40NSw1LjYtOS44NWwxOC45OC02Ljk0LjI5LDcuMjJjMi4wMSwxLjQ0LDMuNzIsMy4yNSw1LjAzLDUuMzQsMSwxLjYxLDEuNzYsMy4zNSwyLjI1LDUuMTguNDIsMS42NS42NCwzLjM0LjY2LDUuMDMiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgPC9nPgogICAgICAgICAgPGcgaWQ9Ikdyb3VwZV81NTk2IiBkYXRhLW5hbWU9Ikdyb3VwZSA1NTk2Ij4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NiIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDYiIGNsYXNzPSJjbHMtMyIgZD0ibTQ3LjA3LDM2LjYxbC0xNC45OSw4LjY1di0xNy4ybDcuNDktMTMuNyw3LjUsNS4wNXYxNy4xOVoiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NyIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDciIGNsYXNzPSJjbHMtMyIgZD0ibTMyLjA4LDQ1LjI2bC0xNC45OC04LjY1di0xNy4xOWwxNC45OCw4LjY1djE3LjE5WiIvPgogICAgICAgICAgICA8cGF0aCBpZD0iVHJhY8OpXzIzODQ4IiBkYXRhLW5hbWU9IlRyYWPDqSAyMzg0OCIgY2xhc3M9ImNscy0zIiBkPSJtMTcuMSwxOS40MWw3LjQ5LTEzLjcsMTQuOTgsOC42NS03LjQ5LDEzLjctMTQuOTgtOC42NVoiLz4KICAgICAgICAgIDwvZz4KICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDkiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ5IiBjbGFzcz0iY2xzLTEiIGQ9Im0zNi4zNCwzMy45MWwyLjYzLTEuNTJ2LTUuOTJsLTIuNjMsMS41MXY1LjkzWiIvPgogICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg1MCIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NTAiIGNsYXNzPSJjbHMtMiIgZD0ibTQxLjMyLDMxLjA1bDIuNjItMS41MXYtNS45M2wtMi42MiwxLjUxdjUuOTNaIi8+CiAgICAgICAgPC9nPgogICAgICA8L2c+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=" alt=""></div>
<div class="homegrade-blocks-staff-member__member-informations">
<h4 class="homegrade-blocks-staff-member__name">Eglantine Daumerie</h4>
<p class="homegrade-blocks-staff-member__position">Adjointe au Manager opérationnel</p>
</div>
</li>
<li class="wp-block-homegrade-content-blocks-staff-member homegrade-blocks-staff-member">
<div class="homegrade-blocks-staff-member__member-icon"><img decoding="async" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0ibWFzY290dGUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA2MCA2MCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogdXJsKCNEw6lncmFkw6lfc2Fuc19ub21fMyk7CiAgICAgIH0KCiAgICAgIC5jbHMtMSwgLmNscy0yIHsKICAgICAgICBzdHJva2Utd2lkdGg6IDBweDsKICAgICAgfQoKICAgICAgLmNscy0zIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICAgIHN0cm9rZTogIzAwMDsKICAgICAgICBzdHJva2UtbGluZWNhcDogcm91bmQ7CiAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsKICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsKICAgICAgfQoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiB1cmwoI0TDqWdyYWTDqV9zYW5zX25vbV8zLTIpOwogICAgICB9CiAgICA8L3N0eWxlPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMyIgZGF0YS1uYW1lPSJEw6lncmFkw6kgc2FucyBub20gMyIgeDE9Ii0yMjgwLjI4IiB5MT0iODAuMDMiIHgyPSItMjI3OS4yOSIgeTI9Ijc4Ljk4IiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDYwMzMuNzIgNjIyLjQ3KSBzY2FsZSgyLjYzIC03LjQ0KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmMzI4MWQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmU3NjZmIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMy0yIiBkYXRhLW5hbWU9IkTDqWdyYWTDqSBzYW5zIG5vbSAzIiB4MT0iLTIyNzYuMDYiIHkxPSI4MC4wMiIgeDI9Ii0yMjc1LjA2IiB5Mj0iNzguOTciIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjAwOS4zOCA2MTkuNDUpIHNjYWxlKDIuNjIgLTcuNDQpIiB4bGluazpocmVmPSIjRMOpZ3JhZMOpX3NhbnNfbm9tXzMiLz4KICA8L2RlZnM+CiAgPGcgaWQ9Ikdyb3VwZV81ODYyIiBkYXRhLW5hbWU9Ikdyb3VwZSA1ODYyIj4KICAgIDxnIGlkPSJHcm91cGVfMzE5NSIgZGF0YS1uYW1lPSJHcm91cGUgMzE5NSI+CiAgICAgIDxnIGlkPSJHcm91cGVfZGVfbWFzcXVlc18xIiBkYXRhLW5hbWU9Ikdyb3VwZSBkZSBtYXNxdWVzIDEiPgogICAgICAgIDxnIGlkPSJHcm91cGVfNTU5MyIgZGF0YS1uYW1lPSJHcm91cGUgNTU5MyI+CiAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTUiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTUiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTQiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTQiPgogICAgICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDQiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ0IiBjbGFzcz0iY2xzLTMiIGQ9Im0xMi40Niw1NC4yOWMuMzQtMS4wOS44Mi0yLjUzLDEuNDktNC4xOCwwLDAsLjM2LS44OC43Ny0xLjc5LDEuNjItMy42LDUuMzQtOS40NSw1LjYtOS44NWwxOC45OC02Ljk0LjI5LDcuMjJjMi4wMSwxLjQ0LDMuNzIsMy4yNSw1LjAzLDUuMzQsMSwxLjYxLDEuNzYsMy4zNSwyLjI1LDUuMTguNDIsMS42NS42NCwzLjM0LjY2LDUuMDMiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgPC9nPgogICAgICAgICAgPGcgaWQ9Ikdyb3VwZV81NTk2IiBkYXRhLW5hbWU9Ikdyb3VwZSA1NTk2Ij4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NiIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDYiIGNsYXNzPSJjbHMtMyIgZD0ibTQ3LjA3LDM2LjYxbC0xNC45OSw4LjY1di0xNy4ybDcuNDktMTMuNyw3LjUsNS4wNXYxNy4xOVoiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NyIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDciIGNsYXNzPSJjbHMtMyIgZD0ibTMyLjA4LDQ1LjI2bC0xNC45OC04LjY1di0xNy4xOWwxNC45OCw4LjY1djE3LjE5WiIvPgogICAgICAgICAgICA8cGF0aCBpZD0iVHJhY8OpXzIzODQ4IiBkYXRhLW5hbWU9IlRyYWPDqSAyMzg0OCIgY2xhc3M9ImNscy0zIiBkPSJtMTcuMSwxOS40MWw3LjQ5LTEzLjcsMTQuOTgsOC42NS03LjQ5LDEzLjctMTQuOTgtOC42NVoiLz4KICAgICAgICAgIDwvZz4KICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDkiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ5IiBjbGFzcz0iY2xzLTEiIGQ9Im0zNi4zNCwzMy45MWwyLjYzLTEuNTJ2LTUuOTJsLTIuNjMsMS41MXY1LjkzWiIvPgogICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg1MCIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NTAiIGNsYXNzPSJjbHMtMiIgZD0ibTQxLjMyLDMxLjA1bDIuNjItMS41MXYtNS45M2wtMi42MiwxLjUxdjUuOTNaIi8+CiAgICAgICAgPC9nPgogICAgICA8L2c+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=" alt=""></div>
<div class="homegrade-blocks-staff-member__member-informations">
<h4 class="homegrade-blocks-staff-member__name">Caroline Vanhauw</h4>
<p class="homegrade-blocks-staff-member__position">Manager Projets</p>
</div>
</li>
<li class="wp-block-homegrade-content-blocks-staff-member homegrade-blocks-staff-member">
<div class="homegrade-blocks-staff-member__member-icon"><img decoding="async" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0ibWFzY290dGUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA2MCA2MCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogdXJsKCNEw6lncmFkw6lfc2Fuc19ub21fMyk7CiAgICAgIH0KCiAgICAgIC5jbHMtMSwgLmNscy0yIHsKICAgICAgICBzdHJva2Utd2lkdGg6IDBweDsKICAgICAgfQoKICAgICAgLmNscy0zIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICAgIHN0cm9rZTogIzAwMDsKICAgICAgICBzdHJva2UtbGluZWNhcDogcm91bmQ7CiAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsKICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsKICAgICAgfQoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiB1cmwoI0TDqWdyYWTDqV9zYW5zX25vbV8zLTIpOwogICAgICB9CiAgICA8L3N0eWxlPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMyIgZGF0YS1uYW1lPSJEw6lncmFkw6kgc2FucyBub20gMyIgeDE9Ii0yMjgwLjI4IiB5MT0iODAuMDMiIHgyPSItMjI3OS4yOSIgeTI9Ijc4Ljk4IiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDYwMzMuNzIgNjIyLjQ3KSBzY2FsZSgyLjYzIC03LjQ0KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmMzI4MWQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmU3NjZmIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMy0yIiBkYXRhLW5hbWU9IkTDqWdyYWTDqSBzYW5zIG5vbSAzIiB4MT0iLTIyNzYuMDYiIHkxPSI4MC4wMiIgeDI9Ii0yMjc1LjA2IiB5Mj0iNzguOTciIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjAwOS4zOCA2MTkuNDUpIHNjYWxlKDIuNjIgLTcuNDQpIiB4bGluazpocmVmPSIjRMOpZ3JhZMOpX3NhbnNfbm9tXzMiLz4KICA8L2RlZnM+CiAgPGcgaWQ9Ikdyb3VwZV81ODYyIiBkYXRhLW5hbWU9Ikdyb3VwZSA1ODYyIj4KICAgIDxnIGlkPSJHcm91cGVfMzE5NSIgZGF0YS1uYW1lPSJHcm91cGUgMzE5NSI+CiAgICAgIDxnIGlkPSJHcm91cGVfZGVfbWFzcXVlc18xIiBkYXRhLW5hbWU9Ikdyb3VwZSBkZSBtYXNxdWVzIDEiPgogICAgICAgIDxnIGlkPSJHcm91cGVfNTU5MyIgZGF0YS1uYW1lPSJHcm91cGUgNTU5MyI+CiAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTUiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTUiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTQiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTQiPgogICAgICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDQiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ0IiBjbGFzcz0iY2xzLTMiIGQ9Im0xMi40Niw1NC4yOWMuMzQtMS4wOS44Mi0yLjUzLDEuNDktNC4xOCwwLDAsLjM2LS44OC43Ny0xLjc5LDEuNjItMy42LDUuMzQtOS40NSw1LjYtOS44NWwxOC45OC02Ljk0LjI5LDcuMjJjMi4wMSwxLjQ0LDMuNzIsMy4yNSw1LjAzLDUuMzQsMSwxLjYxLDEuNzYsMy4zNSwyLjI1LDUuMTguNDIsMS42NS42NCwzLjM0LjY2LDUuMDMiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgPC9nPgogICAgICAgICAgPGcgaWQ9Ikdyb3VwZV81NTk2IiBkYXRhLW5hbWU9Ikdyb3VwZSA1NTk2Ij4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NiIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDYiIGNsYXNzPSJjbHMtMyIgZD0ibTQ3LjA3LDM2LjYxbC0xNC45OSw4LjY1di0xNy4ybDcuNDktMTMuNyw3LjUsNS4wNXYxNy4xOVoiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NyIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDciIGNsYXNzPSJjbHMtMyIgZD0ibTMyLjA4LDQ1LjI2bC0xNC45OC04LjY1di0xNy4xOWwxNC45OCw4LjY1djE3LjE5WiIvPgogICAgICAgICAgICA8cGF0aCBpZD0iVHJhY8OpXzIzODQ4IiBkYXRhLW5hbWU9IlRyYWPDqSAyMzg0OCIgY2xhc3M9ImNscy0zIiBkPSJtMTcuMSwxOS40MWw3LjQ5LTEzLjcsMTQuOTgsOC42NS03LjQ5LDEzLjctMTQuOTgtOC42NVoiLz4KICAgICAgICAgIDwvZz4KICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDkiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ5IiBjbGFzcz0iY2xzLTEiIGQ9Im0zNi4zNCwzMy45MWwyLjYzLTEuNTJ2LTUuOTJsLTIuNjMsMS41MXY1LjkzWiIvPgogICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg1MCIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NTAiIGNsYXNzPSJjbHMtMiIgZD0ibTQxLjMyLDMxLjA1bDIuNjItMS41MXYtNS45M2wtMi42MiwxLjUxdjUuOTNaIi8+CiAgICAgICAgPC9nPgogICAgICA8L2c+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=" alt=""></div>
<div class="homegrade-blocks-staff-member__member-informations">
<h4 class="homegrade-blocks-staff-member__name">Hélène Rombaux</h4>
<p class="homegrade-blocks-staff-member__position">Manager RH et Administratif</p>
</div>
</li>
<li class="wp-block-homegrade-content-blocks-staff-member homegrade-blocks-staff-member">
<div class="homegrade-blocks-staff-member__member-icon"><img decoding="async" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0ibWFzY290dGUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCA2MCA2MCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogdXJsKCNEw6lncmFkw6lfc2Fuc19ub21fMyk7CiAgICAgIH0KCiAgICAgIC5jbHMtMSwgLmNscy0yIHsKICAgICAgICBzdHJva2Utd2lkdGg6IDBweDsKICAgICAgfQoKICAgICAgLmNscy0zIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICAgIHN0cm9rZTogIzAwMDsKICAgICAgICBzdHJva2UtbGluZWNhcDogcm91bmQ7CiAgICAgICAgc3Ryb2tlLWxpbmVqb2luOiByb3VuZDsKICAgICAgICBzdHJva2Utd2lkdGg6IDJweDsKICAgICAgfQoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiB1cmwoI0TDqWdyYWTDqV9zYW5zX25vbV8zLTIpOwogICAgICB9CiAgICA8L3N0eWxlPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMyIgZGF0YS1uYW1lPSJEw6lncmFkw6kgc2FucyBub20gMyIgeDE9Ii0yMjgwLjI4IiB5MT0iODAuMDMiIHgyPSItMjI3OS4yOSIgeTI9Ijc4Ljk4IiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDYwMzMuNzIgNjIyLjQ3KSBzY2FsZSgyLjYzIC03LjQ0KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmMzI4MWQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmU3NjZmIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJEw6lncmFkw6lfc2Fuc19ub21fMy0yIiBkYXRhLW5hbWU9IkTDqWdyYWTDqSBzYW5zIG5vbSAzIiB4MT0iLTIyNzYuMDYiIHkxPSI4MC4wMiIgeDI9Ii0yMjc1LjA2IiB5Mj0iNzguOTciIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjAwOS4zOCA2MTkuNDUpIHNjYWxlKDIuNjIgLTcuNDQpIiB4bGluazpocmVmPSIjRMOpZ3JhZMOpX3NhbnNfbm9tXzMiLz4KICA8L2RlZnM+CiAgPGcgaWQ9Ikdyb3VwZV81ODYyIiBkYXRhLW5hbWU9Ikdyb3VwZSA1ODYyIj4KICAgIDxnIGlkPSJHcm91cGVfMzE5NSIgZGF0YS1uYW1lPSJHcm91cGUgMzE5NSI+CiAgICAgIDxnIGlkPSJHcm91cGVfZGVfbWFzcXVlc18xIiBkYXRhLW5hbWU9Ikdyb3VwZSBkZSBtYXNxdWVzIDEiPgogICAgICAgIDxnIGlkPSJHcm91cGVfNTU5MyIgZGF0YS1uYW1lPSJHcm91cGUgNTU5MyI+CiAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTUiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTUiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXBlXzU1OTQiIGRhdGEtbmFtZT0iR3JvdXBlIDU1OTQiPgogICAgICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDQiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ0IiBjbGFzcz0iY2xzLTMiIGQ9Im0xMi40Niw1NC4yOWMuMzQtMS4wOS44Mi0yLjUzLDEuNDktNC4xOCwwLDAsLjM2LS44OC43Ny0xLjc5LDEuNjItMy42LDUuMzQtOS40NSw1LjYtOS44NWwxOC45OC02Ljk0LjI5LDcuMjJjMi4wMSwxLjQ0LDMuNzIsMy4yNSw1LjAzLDUuMzQsMSwxLjYxLDEuNzYsMy4zNSwyLjI1LDUuMTguNDIsMS42NS42NCwzLjM0LjY2LDUuMDMiLz4KICAgICAgICAgICAgPC9nPgogICAgICAgICAgPC9nPgogICAgICAgICAgPGcgaWQ9Ikdyb3VwZV81NTk2IiBkYXRhLW5hbWU9Ikdyb3VwZSA1NTk2Ij4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NiIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDYiIGNsYXNzPSJjbHMtMyIgZD0ibTQ3LjA3LDM2LjYxbC0xNC45OSw4LjY1di0xNy4ybDcuNDktMTMuNyw3LjUsNS4wNXYxNy4xOVoiLz4KICAgICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg0NyIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NDciIGNsYXNzPSJjbHMtMyIgZD0ibTMyLjA4LDQ1LjI2bC0xNC45OC04LjY1di0xNy4xOWwxNC45OCw4LjY1djE3LjE5WiIvPgogICAgICAgICAgICA8cGF0aCBpZD0iVHJhY8OpXzIzODQ4IiBkYXRhLW5hbWU9IlRyYWPDqSAyMzg0OCIgY2xhc3M9ImNscy0zIiBkPSJtMTcuMSwxOS40MWw3LjQ5LTEzLjcsMTQuOTgsOC42NS03LjQ5LDEzLjctMTQuOTgtOC42NVoiLz4KICAgICAgICAgIDwvZz4KICAgICAgICAgIDxwYXRoIGlkPSJUcmFjw6lfMjM4NDkiIGRhdGEtbmFtZT0iVHJhY8OpIDIzODQ5IiBjbGFzcz0iY2xzLTEiIGQ9Im0zNi4zNCwzMy45MWwyLjYzLTEuNTJ2LTUuOTJsLTIuNjMsMS41MXY1LjkzWiIvPgogICAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV8yMzg1MCIgZGF0YS1uYW1lPSJUcmFjw6kgMjM4NTAiIGNsYXNzPSJjbHMtMiIgZD0ibTQxLjMyLDMxLjA1bDIuNjItMS41MXYtNS45M2wtMi42MiwxLjUxdjUuOTNaIi8+CiAgICAgICAgPC9nPgogICAgICA8L2c+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4=" alt=""></div>
<div class="homegrade-blocks-staff-member__member-informations">
<h4 class="homegrade-blocks-staff-member__name">Marilène De Mol</h4>
<p class="homegrade-blocks-staff-member__position">Coordinatrice Réseau Habitat</p>
</div>
</li>
</ul>
</section>
</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>
<section class="wp-block-homegrade-content-blocks-timeline homegrade-blocks-timeline homegrade-blocks-timeline--has-step-icons homegrade-blocks-timeline--has-no-step-pictures
homegrade-blocks-timeline--has-lateral-cover"><img decoding="async" class="homegrade-blocks-timeline__lateral-cover" src="http://homegrade.local/wp-content/uploads/2023/10/homegrade_qui-sommes-nous-engagements.svg" alt="">
<div class="homegrade-blocks-timeline__innercontent">
<div class="wp-block-homegrade-content-blocks-timeline-step homegrade-blocks-timeline-step">
<div class="homegrade-blocks-timeline-step__content">
<div class="homegrade-blocks-timeline-step__icon"><img decoding="async" src="http://homegrade.local/wp-content/uploads/2023/10/homegrade_engagements.svg" alt=""></div>
<div class="homegrade-blocks-timeline-step__text-content">
<h3 class="homegrade-blocks-timeline-step__title">Labellisations</h3>
<p class="homegrade-blocks-timeline-step__subtitle"></p>
<p>Homegrade est certifié par le <a href="https://www.ecodyn.brussels/" target="_blank" data-type="link" data-id="https://www.ecodyn.brussels/" rel="noreferrer noopener">Label Entreprise Écodynamique</a>, une reconnaissance pour son engagement à réduire son impact environnemental. De plus, lentreprise détient le <a href="https://isit-be.org/fr/le-label-numerique-responsable" target="_blank" data-type="link" data-id="https://isit-be.org/fr/le-label-numerique-responsable" rel="noreferrer noopener">Label Numérique Responsable</a>, témoignant de sa démarche crédible dans lamélioration continue de sa responsabilité numérique.</p>
</div>
</div>
</div>
<div class="wp-block-homegrade-content-blocks-timeline-step homegrade-blocks-timeline-step">
<div class="homegrade-blocks-timeline-step__content">
<div class="homegrade-blocks-timeline-step__icon"><img decoding="async" src="http://homegrade.local/wp-content/uploads/2023/10/homegrade_engagements.svg" alt=""></div>
<div class="homegrade-blocks-timeline-step__text-content">
<h3 class="homegrade-blocks-timeline-step__title">Inclusivité</h3>
<p class="homegrade-blocks-timeline-step__subtitle"></p>
<p>Participation à différents programmes initiés par Equal brussels, notamment aux actions en matière de <strong>Gendermainstreaming</strong> et de <strong>handistreaming</strong>.</p>
</div>
</div>
</div>
<div class="wp-block-homegrade-content-blocks-timeline-step homegrade-blocks-timeline-step">
<div class="homegrade-blocks-timeline-step__content">
<div class="homegrade-blocks-timeline-step__icon"><img decoding="async" src="http://homegrade.local/wp-content/uploads/2023/10/homegrade_engagements.svg" alt=""></div>
<div class="homegrade-blocks-timeline-step__text-content">
<h3 class="homegrade-blocks-timeline-step__title">Service dimpression</h3>
<p class="homegrade-blocks-timeline-step__subtitle"></p>
<p>Homegrade privilégie, dans la mesure du possible, limpression de ses différents supports sur un <strong>papier FSC</strong>, <strong>écologique</strong> <strong>et recyclé et avec une encre végétale</strong>.</p>
</div>
</div>
</div>
<div class="wp-block-homegrade-content-blocks-timeline-step homegrade-blocks-timeline-step">
<div class="homegrade-blocks-timeline-step__content">
<div class="homegrade-blocks-timeline-step__icon"><img decoding="async" src="http://homegrade.local/wp-content/uploads/2023/10/homegrade_engagements.svg" alt=""></div>
<div class="homegrade-blocks-timeline-step__text-content">
<h3 class="homegrade-blocks-timeline-step__title">Service de livraison</h3>
<p class="homegrade-blocks-timeline-step__subtitle"></p>
<p>Homegrade passe par une entreprise bruxelloise pour livrer ses publications… <strong>à vélo cargo</strong> !</p>
</div>
</div>
</div>
<div class="wp-block-homegrade-content-blocks-timeline-step homegrade-blocks-timeline-step">
<div class="homegrade-blocks-timeline-step__content">
<div class="homegrade-blocks-timeline-step__icon"><img decoding="async" src="http://homegrade.local/wp-content/uploads/2023/10/homegrade_engagements.svg" alt=""></div>
<div class="homegrade-blocks-timeline-step__text-content">
<h3 class="homegrade-blocks-timeline-step__title">Accessibilité numérique</h3>
<p class="homegrade-blocks-timeline-step__subtitle"></p>
<p>Homegrade offre un service daccompagnement aux Bruxellois en situation de précarité numérique grâce à un <strong>service dattelle numérique</strong>.</p>
<p><a href="http://homegrade.local/declaration-acessibilite/" target="_blank" data-type="page" data-id="2686" rel="noreferrer noopener">Déclaration daccessibilité</a></p>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="demo-components__demo-component">
<p class="demo-components__demo-component__explanatory-title">Version avec images par ligne</p>
<section class="wp-block-homegrade-content-blocks-timeline homegrade-blocks-timeline homegrade-blocks-timeline--has-step-icons homegrade-blocks-timeline--has-step-pictures">
<div class="homegrade-blocks-timeline__innercontent">
<div class="wp-block-homegrade-content-blocks-timeline-step homegrade-blocks-timeline-step homegrade-blocks-chapitre-thematique">
<figure class="homegrade-blocks-timeline-step__cover"><img decoding="async" src="http://homegrade.local/wp-content/uploads/2023/10/halles-saint-gery-haut.jpg" alt="Halles de Saint-Géry à Bruxelles">
<figcaption>
<p class="caption">Halles de Saint-Géry
© EmDee</p>
</figcaption>
</figure>
<div class="homegrade-blocks-timeline-step__content">
<div class="homegrade-blocks-timeline-step__icon"><img decoding="async" src="http://homegrade.local/wp-content/uploads/2023/10/homegrade_travaux.svg" alt="Halles de Saint-Géry à Bruxelles"></div>
<div class="homegrade-blocks-timeline-step__text-content">
<h3 class="homegrade-blocks-timeline-step__title">1988 2017</h3>
<p class="homegrade-blocks-timeline-step__subtitle">Le Centre Urbain</p>
<p>Le Centre Urbain a été créé en 1988, à linitiative dInter-Environnement Bruxelles (IEB) et du Brusselse Raad voor het Leefmilieu (BRAL), dans le but de <strong>promouvoir linformation des habitants</strong> de la Région de Bruxelles-Capitale en matière <strong>denvironnement et de défense dun cadre de vie de qualité, de logement et de sa réhabilitation</strong>, <strong>de rénovation urbaine, durbanisme et daménagement du territoire, dutilisation rationnelle de lénergie</strong>, etc. : ce que lon appelle communément aujourdhui le développement durable. À lorigine, les principaux services assurés étaient les suivants :</p>
<ul>
<li>un conseil en <strong>rénovation</strong> ;</li>
<li>un conseil relatif au<strong> bail</strong> et à la<strong> location</strong> des logements ;</li>
<li>un conseil en <strong>environnement</strong> ;</li>
<li>linventaire des<strong> locaux industriels vacants</strong> (repris par la SDRB).</li>
</ul>
<p>Lassociation a progressivement développé une expertise en matière d<strong>habitat</strong> et a développé divers outils au service de la population. Cest ainsi que le Centre Urbain a créé, corollaires au conseil en rénovation :</p>
<ul>
<li>le conseil en<strong> patrimoine </strong>(créé en 1992 et développé à partir de 1997) ;</li>
<li>lAgence Bruxelloise de lÉnergie (en 1996). L<strong>ABEA</strong> est un service du Centre Urbain, développé dans le cadre juridique de lasbl ;</li>
<li>le service dexpertise en <strong>isolation acoustique</strong> (en 2004) ;</li>
<li>le centre dinformation en <strong>éco-construction</strong> (en 2008) ;</li>
<li>le <strong>facilitateur urbanisme</strong> (en 2011).</li>
</ul>
<p>Il a également :</p>
<ul>
<li>assuré la <strong>coordination du Réseau Habitat</strong> et le conseil en rénovation local auprès des associations du Réseau ;</li>
<li>mené des missions dincitation à la rénovation et de préservation du patrimoine dans le cadre des <strong>contrats de quartiers </strong>de la Ville de Bruxelles.</li>
</ul>
</div>
</div>
</div>
<div class="wp-block-homegrade-content-blocks-timeline-step homegrade-blocks-timeline-step homegrade-blocks-chapitre-thematique">
<figure class="homegrade-blocks-timeline-step__cover"><img decoding="async" src="http://homegrade.local/wp-content/uploads/2023/10/maison-energie-huis-haut.jpg" alt="MAISONENERGIEHUIS"></figure>
<div class="homegrade-blocks-timeline-step__content">
<div class="homegrade-blocks-timeline-step__icon"><img decoding="async" src="http://homegrade.local/wp-content/uploads/2023/10/homegrade_bruxelles.svg" alt="MAISONENERGIEHUIS"></div>
<div class="homegrade-blocks-timeline-step__text-content">
<h3 class="homegrade-blocks-timeline-step__title">2013 2017</h3>
<p class="homegrade-blocks-timeline-step__subtitle">La Maison de lÉnergie</p>
<p><strong>Les Maisons de lÉnergie</strong> ont été créées à partir de 2013. Elles offraient un <strong>service intégré, concret, de proximité et gratuit</strong>. <strong>Six structures locales</strong> accueillaient le grand public, locataires comme propriétaires. Des <strong>permanences</strong> étaient organisées pour guider les Bruxellois, en proposant des conseils personnalisés, des visites à domicile et un accompagnement durant les chantiers. De petits travaux (pose de vannes thermostatiques, isolation de tuyaux, etc.) pouvaient également être réalisés, et ce gratuitement. Les Maisons de lÉnergie informaient également le public des solutions possibles de financement.</p>
<p>En septembre 2015, la<strong> fusion des six Maisons de lÉnergie locales</strong> a été mise en œuvre, pour arriver à la création dune nouvelle association, la<strong> Maison Bruxelloise de lÉnergie et de lEnvironnement (MBEE)</strong>. Elle sadressait à tout public et pouvait accomplir tous les actes se rapportant directement ou indirectement à l<strong>amélioration du cadre de vie dans les logements bruxellois et à la réduction de leur impact écologique</strong> au sens large. Un des premiers principes dintervention de la Maison de lEnergie était de favoriser le contact direct avec les citoyens afin de stimuler le passage à lacte en matière déconomie dénergie dans les logements.</p>
</div>
</div>
</div>
</div>
</section>
</div>
</article>
</section> </section>
@ -108,7 +623,9 @@
<!-- HEADING BOX --> <!-- HEADING BOX -->
<article id="heading-box" class="component"> <article id="heading-box" class="component">
<div class="component-explanation"> <div class="component-explanation">
<h2 class="component-explanation__title">Heading Box</h2> <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> <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> </div>
<?php <?php

View File

@ -20,7 +20,33 @@
} }
.demo-components { .demo-components {
mark {
@apply text-secondary underline underline-offset-4 bg-white;
}
@apply homegrade-page-container; @apply homegrade-page-container;
&__chapter_list {
@apply w-fit
text-secondary
font-semibold
opacity-90
mx-auto;
@media screen and (min-width: 1800px) {
@apply sticky
mx-0
top-16
left-0
z-10;
transform: translateX(calc(-100% - 50px));
}
li a {
@apply !text-secondary;
}
}
&__demo-component__explanatory-title {
@apply text-base font-semibold text-secondary;
}
&__section-title { &__section-title {
@apply text-white @apply text-white
@ -46,16 +72,27 @@
line-height: 1.4; line-height: 1.4;
} }
} }
.component { &__demo-component {
@apply border-b border-neutral-300 py-16; @apply p-16 rounded-2xl mb-8;
border: 2px dotted rgba(223, 30, 30, 0.2);
}
.demo-component {
@apply py-16;
> * { > * {
@apply !max-w-full w-full mx-auto; @apply !max-w-full w-full mx-auto;
} }
} }
.component-explanation { .component-explanation {
@apply py-6 text-center pb-16; @apply py-6 text-center pb-8;
&__title { &__title {
@apply text-3xl font-bold pb-0 text-secondary; @apply text-3xl font-bold mt-0 mb-2 !py-0 text-secondary;
}
&__component-icon {
@apply w-10 mx-auto mb-4;
svg {
@apply fill-secondary;
}
} }
&__technical-title { &__technical-title {
@apply font-semibold text-lg text-neutral-500 my-0 mb-2; @apply font-semibold text-lg text-neutral-500 my-0 mb-2;
@ -68,9 +105,12 @@
h3 { h3 {
@apply m-0 uppercase text-sm pt-4 text-secondary tracking-wide; @apply m-0 uppercase text-sm pt-4 text-secondary tracking-wide;
} }
ul {
@apply my-0;
}
} }
&__option { &__option {
@apply py-4; @apply pt-4 pb-0;
} }
&__option-title { &__option-title {
@ -78,7 +118,7 @@
} }
&__option-description { &__option-description {
@apply text-neutral-500 text-base font-medium pt-0 max-w-sm mx-auto; @apply text-neutral-500 text-base font-medium pt-0 mb-0 max-w-sm mx-auto;
} }
} }
.buttons { .buttons {
@ -91,8 +131,4 @@
#blocks-components { #blocks-components {
@apply pb-64; @apply pb-64;
.block-content-page-header {
@apply px-16 rounded-3xl;
@apply shadowed bg-white;
}
} }