PageSourceSearch

https://pikselkraft.fr/forge

html pikselkraft.fr collected 2026-10-04 13:26:40 UTC 125,745 bytes, 1,617 lines download raw bytes

1<!DOCTYPE html>
2<html dir="ltr" lang="fr-FR">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width,initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
8  <title>Des projets web robustes | La forge | Pikselkraft</title>
9<meta name="description" content="Cette page regroupe tous mes projets que j'ai réalisés sous le nom de Pikselkraft depuis 2018." />
10<link rel="canonical" href="https://pikselkraft.fr/forge" />
11<meta name="referrer" content="no-referrer">
12<meta name="generator" content="Kirby (5.4.3)">
13<link rel="author" type="text/plain" href="humans.txt" />
14    <link rel="alternate" type="application/rss+xml" title="S’abonner aux dernières publications" href="https://pikselkraft.fr/rss"/>
15 
16  
17    <meta name="color-scheme" content="light dark">
18  
18<script nonce="10bi9n+Te4aCQVrZZh9drA==">
19    let t = 'light dark';
20    try {
21      t = localStorage.getItem('theme') || 'light dark';
22    } catch (e) {}
23
24    const metas = document.head.getElementsByTagName('meta');
25    for (let i = 0; i < metas.length; i++) {
26      if (metas[i].name === 'color-scheme') {
27        metas[i].parentNode.removeChild(metas[i]);
28        break;
29      }
30    }
31
32    const meta = document.createElement('meta');
33    meta.name = 'color-scheme';
34    meta.content = t;
35    document.head.appendChild(meta);
36  </script>
36
37  <meta name="theme-color" content="#f5f1f1" media="(prefers-color-scheme: light)">
38<meta name="theme-color" content="#343e3D" media="(prefers-color-scheme: dark)" >
39  <link href="https://pikselkraft.fr/assets/css/style.7b50f1991eb6f2da9959795ca3347f16.min.css" rel="stylesheet">
40<link href="https://pikselkraft.fr/assets/css/print.css" media="print" rel="stylesheet">
41        <link rel="preload" as="font" href="/assets/fonts/paysage-regular.woff2" type="font/woff2" crossorigin="anonymous">
42        <link rel="preload" as="font" href="/assets/fonts/bonto.woff2" type="font/woff2" crossorigin="anonymous">
43  
44  <!-- Favicon -->
45<link rel="icon" type="image/png" href="https://pikselkraft.fr/assets/fav/favicon-96x96.png" sizes="96x96" />
46<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
47<link rel="shortcut icon" href="/favicon.ico" />
48<link rel="apple-touch-icon" sizes="180x180" href="https://pikselkraft.fr/assets/fav/apple-touch-icon.png" />
49<meta name="apple-mobile-web-app-title" content="Pikselkraft" />
50<link rel="manifest" href="/site.webmanifest" />
51  <!-- Social tags -->
52<link rel="me" href="https://mastodon.design/@pikselkraft"/>
53<meta property="og:type" content="website">
54<meta property="og:title" content="Des projets web robustes | La forge | Pikselkraft">
55<meta property="og:description" content="Cette page regroupe tous mes projets que j'ai réalisés sous le nom de Pikselkraft depuis 2018.">
56<meta property="og:url" content="https://pikselkraft.fr/forge">
57<meta property="og:site_name" content="Pikselkraft">
58<!-- I no longer use Twitter cards. X/Twitter is a fascist network, probably like all GAFAM companies in fact. -->
59
60  
61  <!-- Web2print feature -->
62
63  
63<script type="application/ld+json">
64{
65  "@context": "http://www.schema.org",
66  "@type": "WebSite",
67  "name": "Pikselkraft",
68  "url": "https://pikselkraft.fr"
69}
70</script>
70
71  
71<script type="application/ld+json">
72{
73	"@context": "http://schema.org",
74	"@type": "BreadcrumbList",
75	"itemListElement": [
76		{
77			"@type": "ListItem",
78			"position": 1,
79			"item": {
80				"@id": "https://pikselkraft.fr",
81				"name": "Pikselkraft"
82			}
83		},
84		{
85			"@type": "ListItem",
86			"position": 2,
87			"item": 
88			{
89				"@id": "https://pikselkraft.fr/forge",
90				"name": "La forge"
91			}
92		}]
93}
94</script>
94
95  </head>
96<body id="top" data-template="forge" data-title="La forge">  
97<nav class="nav-skiplinks" role="navigation" aria-label="Lien d'accès rapide" >
98  <ul class="flex | m0 list-none">
99    <li>
100      <a class="skiplink" href="#main">Aller directement au contenu</a>
101    </li>
102    <li>
103      <a class="skiplink" href="/plan-du-site">Plan du site</a>
104    </li>
105      </ul>
106</nav>
107<header id="header" class="header | mauto | relative" role="banner">
108<div id="header__nav" class="header__nav | m-flex m-flex-column gap-s | relative">
109  <div class="header__logo">
110  <div class="breadcrumb">
111<nav class="breadcrumb__container" aria-label="fil d'ariane" role="navigation">
112  <ol class="breadcrumb__list | m-flex m-gap-s | list-reset list-none"><span aria-hidden="true">⧊</span> 
113        <li class="breadcrumb__item"><a class="breadcrumb__link no-underline" href="https://pikselkraft.fr"  >Accueil</a></li>
114        <li class="breadcrumb__item"><a class="breadcrumb__link no-underline" href="https://pikselkraft.fr/forge" aria-current="page" >La forge</a></li>
115      </ol>
116</nav>
117</div>
118	  	<a href="https://pikselkraft.fr" class="logo logo-text | fit-content mauto-left | h3-like heading-like font-brand | no-underline" aria-label="Page d'accueil" title="Pikselkraft : retour à la page d'accueil"><span aria-hidden="true">▪</span> Pikselkraft</a>
119	  </div>
120   
121<nav class="header__menu menu" id="menu" role="navigation" aria-label="menu principal">
122  <ul id="menu-list" class="menu__list list-reset | m-flex m-flex-row flex-column m-flex-wrap gap-l | relative | list-none">
123         <li class="menu__item">
124    <a  class="menu__link | relative | no-underline font-bold tooltip" tooltip-data="Mes services" aria-label="Mes services" href="https://pikselkraft.fr/conciergerie">
125      Conciergerie    </a>
126   </li>
127       <li class="menu__item">
128    <a aria-current="page" class="menu__link | relative | no-underline font-bold "  aria-label="Mes projets" href="https://pikselkraft.fr/forge">
129      Forge    </a>
130   </li>
131       <li class="menu__item">
132    <a  class="menu__link | relative | no-underline font-bold tooltip" tooltip-data="Mes publications" aria-label="Mes publications" href="https://pikselkraft.fr/jardin">
133      Jardin    </a>
134   </li>
135       <li class="menu__item">
136    <a  class="menu__link | relative | no-underline font-bold tooltip" tooltip-data="Me contacter" aria-label="Me contacter" href="https://pikselkraft.fr/bavarder">
137      Bavarder    </a>
138   </li>
139      <div class="menu-mode | m-flex m-flex-row align-center gap-s">
140  <li class="menu__color">
141    <button id="btn-clair" class="color-mode font-monospace" title="Activer le mode clair" value="light">
142      <span id="light-mode__symbol" aria-hidden="true">&#9728;</span>
143      <span id="dark-mode__text" class="visually-hidden">Activer le mode sombre</span>
144    </button>
145  </li>
146  <li class="menu__color">
147    <button id="btn-sombre" aria-pressed="false" class="color-mode font-monospace" title="Activer le mode sombre" value="dark">
148      <span id="dark-mode__symbol" aria-hidden="true">&#9790;</span>
149      <span id="light-mode__text" class="visually-hidden">Activer le mode clair</span>
150    </button>
151  </li>
152  </div>
153  </ul>
154</nav>
155</div>
156  <div id="anchor-top" class="header-slot">
157        <section class="hero hero__forge | flex flex-column align-center justify-content-center mt-base tc">
158			        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5" viewBox="0 0 851 851">
159  <path d="m417.132 826.463 350.067-101.496-.114-30.274-350.733 98.58" style="fill:#e59c86;stroke:#343e3d;stroke-width:6px"/>
160  <path d="m168.134 649.104.053 29.922L415.95 826.805l-.116-33.714" style="fill:#c8553d;stroke:#343e3d;stroke-width:6px"/>
161  <path d="m168.808 648.395 248.789 144.541 349.935-98.129-251.114-111.194z" style="fill:#f1c8ad;stroke:#343e3d;stroke-width:6px"/>
162  <path d="m419.575 777.466 325.555-91.593-.051-14.786-326.23 92.549" style="fill:#e59c86;stroke:#343e3d;stroke-width:6px"/>
163  <path d="m188.017 629.427.044 12.604 230.414 135.754-.046-13.442" style="fill:#c8553d;stroke:#343e3d;stroke-width:6px"/>
164  <path d="m188.36 628.353 231.643 134.58 325.818-91.366-224.035-123.12z" style="fill:#f1c8ad;stroke:#343e3d;stroke-width:6px"/>
165  <path d="M723.214 413.789v246.454L423.23 745.56l1.376-262.83" style="fill:#e59c86;stroke:#343e3d;stroke-width:6px"/>
166  <path d="M423.282 483.551v261.454L210.156 623.91V383.373" style="fill:#c8553d;stroke:#343e3d;stroke-width:6px"/>
167  <path d="m417.885 484.161 350.403-81.588v-13.334l-351.132 82.449" style="fill:#e59c86;stroke:#343e3d;stroke-width:6px"/>
168  <path d="M169.44 348.26v13.056l247.261 123.129v-12.122" style="fill:#c8553d;stroke:#343e3d;stroke-width:6px"/>
169  <path d="m170.116 347.965 248.292 121.93 350.269-81.287-250.731-93.969z" style="fill:#f1c8ad;stroke:#343e3d;stroke-width:6px"/>
170  <path d="m420.439 456.927 325.867-75.875v-12.401l-326.545 76.676" style="fill:#e59c86;stroke:#343e3d;stroke-width:6px"/>
171  <path d="M189.39 332.115v10.569l229.948 114.507v-11.273" style="fill:#c8553d;stroke:#343e3d;stroke-width:6px"/>
172  <path d="M189.736 331.214 420.917 444.74l326.129-75.684-223.612-103.893z" style="fill:#f1c8ad;stroke:#343e3d;stroke-width:6px"/>
173  <path d="m95.275 8.807-21.7.564L58.92 19.517l-7.045 13.809 1.409 17.472L63.711 66.58l8.173 10.991 5.636 12.4.282 20.01-3.664 23.954-5.636 3.1-.846 5.918 8.455 2.537 53.828-1.127 1.972-5.637-6.2-5.073-4.227-31.282 1.127-10.427s3.664-11.836 5.918-14.936 11.555-14.091 11.555-14.091 6.764-8.737 7.609-14.937c.846-6.2 
1730-17.754-2.536-21.982s-10.709-12.4-10.709-12.4l-16.064-5.354h-10.427z" style="fill:#c8553d"/>
174  <path d="M99.889 10.647c3.664 10.99 9.31 16.789 10.586 25.859 2.772 19.716-1.06 25.184-6.415 37.302-5.354 12.118-5.039 24.518-5.039 29.027s1.962 31.113 1.962 31.113l14.981-.101s-6.518-16.918-9.548-25.86c-3.075-9.079-1.048-19.425-1.048-19.425s.929-5.049 3.889-8.554c5.445-6.448 13.708-16.515 15.399-28.351 1.691-11.837-2.537-23.955-7.328-29.873-4.79-5.918-11.689-12.344-11.689-12.344s-9.413-9.784-5.75 1.207" style="fill:#f1c8ad"/>
175  <path d="m107.242 133.796-.329 12.112 7.034-.361 1.623-10.822z" style="fill:#f1c8ad;stroke:#f1c8ad;stroke-width:6px"/>
176  <ellipse cx="466.877" cy="342.892" rx="166.511" ry="62.563" style="fill:gray;stroke:#343e3d;stroke-width:6px"/>
177  <ellipse cx="466.877" cy="328.959" rx="166.511" ry="62.563" style="fill:#cdd7d6;stroke:#343e3d;stroke-width:6px"/>
178  <path d="m581.624 237.072 28.408-9.3-4.228 38.383-6.087 22.49-10.822 21.982-17.078 16.402-1.184 10.314-21.136 10.991-1.353-11.498 9.807-4.735 11.329-23.673 8.793-30.943zM472.774 249.129l79.593-4.623-.991 35.007-6.275 33.026-12.22 22.788-9.247 9.908v7.595l-53.171 5.285z" style="fill:#cdd7d6"/>
179  <path d="m611.452 227.83 16.487-7.186-3.382 37.2-10.146 30.437-16.486 22.616-15.641 10.357 16.275-29.38 7.82-26.843 4.228-23.462z" style="fill:#939f9e"/>
180  <path d="m308.771 222.8 32.2 11.56 39.631 8.669 46.649 4.954 43.346 1.651v108.572l-56.556-3.715-31.788-9.908-29.31-16.926-10.321-12.384-17.338-21.054-11.972-29.723-4.128-26.008z" style="fill:#939f9e;stroke:#939f9e;stroke-width:6px"/>
181  <path d="m551.917 244.723 25.628-5.813 3.434 8.191-6.341 41.745-10.039 30.647-16.117 18.231-.264 9.511-11.889 3.963-11.89 2.906v-10.568l12.418-12.946 9.776-26.685 5.019-34.347z" style="fill:#fff"/>
182  <path d="M592.146 315.8s-14.862 43.925-129.131 42.273" style="fill:none;stroke:#343e3d;stroke-width:6px"/>
183  <path d="M596.439 311.837s-40.291 38.64-133.424 37.98" style="fill:none;stroke:#343e3d;stroke-width:6px"/>
184  <path d="M628.601 219.891s1.178 44.046-18.825 74.639c-7.809 11.944-7.426 11.804-18.494 22.272M580.436 236.658s1.562 76.131-32.092 100.67M611.48 227.741s-2.305 74.471-38.037 98.688M552.113 243.422s3.451 80.78-27.231 99.824M524.204 343.889v8.454M549.06 337.632v8.455M571.211 328.163v8.455M307.146 219.891s-1.178 44.046 18.824 74.639c7.81 11.944 7.426 11.804 18.495 22.272" style="fill:none;stroke:#343e3d;stroke-width:6px"/>
185  <path d="M343.601 315.8s14.862 43.925 129.131 42.273" style="fill:none;stroke:#343e3d;stroke-width:6px"/>
186  <path d="M339.308 311.837s40.291 38.64 133.424 37.98" style="fill:none;stroke:#343e3d;stroke-width:6px"/>
187  <path d="M307.146 219.891s-1.178 44.046 18.824 74.639c7.81 11.944 7.426 11.804 18.495 22.272" style="fill:none;stroke:#343e3d;stroke-width:6px"/>
188  <ellipse cx="467.044" cy="186.723" rx="185.771" ry="62.891" style="fill:#cdd7d6;stroke:#343e3d;stroke-width:6px"/>
189  <ellipse cx="467.021" cy="183.834" rx="165.779" ry="49.519" style="fill:#343e3d"/>
190  <ellipse cx="467.021" cy="183.834" rx="165.779" ry="49.519" style="fill:none;stroke:#343e3d;stroke-width:6px"/>
191  <ellipse cx="468.322" cy="159.149" rx="54.163" ry="16.513" style="fill:gray;stroke:#343e3d;stroke-width:6px"/>
192  <ellipse cx="467.9" cy="150.483" rx="54.163" ry="16.513" style="fill:#cdd7d6;stroke:#343e3d;stroke-width:6px"/>
193  <path d="m80.662 150.638 3.72 6.763 302.964-22.129 74.613-4.861 31.282-2.748 16.063-8.032-.422-9.089-19.446-4.861-1.902 7.82-10.569 3.171-14.372-.634-12.26-4.228-2.325-6.341-17.12 6.553-13.105 6.341-95.114 8.666-196.78 19.12-42.907.212z" style="fill:#cdd7d6"/>
194  <path d="m474.276 77.159 9.469-1.218.135 18.938 3.517.136-.135 16.774-15.286 5.816.135-40.717z" style="fill:#fff"/>
195  <path d="m486.219 75.524.433 17.207 5.411-2.489.324-16.449z" style="fill:#cdd7d6"/>
196  <path d="m471.702 77.58.676 18.803-27.325-3.517-1.894-21.644zM451.27
1965 96.654l-.135 14.068 13.933 5.276 8.252.135-.676-18.126z" style="fill:#939f9e"/>
197  <path d="M442.854 67.377v23.885s2.51 5.018 25.346 6.13c15.382.749 24.913-5.31 25.384-5.753.345-.324.191-24.472.191-24.472" style="fill:none;stroke:#343e3d;stroke-width:6px"/>
198  <path d="m459.399 143.346.758 5.194 13.311 1.407 4.761-1.623-.216-9.09-16.341 1.515z" style="fill:#939f9e"/>
199  <path d="m508.82 122.804-.541 7.17-12.31 5.546-32.601 2.841-41.394 2.705-173.254 5.864 152.332-12.798 64.199-4.389 30.437-1.902z" style="fill:gray;stroke:#343e3d;stroke-width:6px"/>
200  <path d="M458.345 141.725v7.609s-.224 1.826 7.386 2.249c7.609.423 12.905-1.386 12.944-1.892.287-3.787.096-10.339.096-10.339M448.568 105.674s-5.26-.233-12.947 3.006c-6.22 2.621-8.512 6.852-17.951 9.321-.565.148-289.451 27.839-289.451 27.839M483.983 75.399v19.372M474.135 75.616v21.86M449.709 96.368v15.015s5.898 5.222 17.667 5.763 20.808-4.717 20.808-5.394c0-.676-.057-16.331-.057-16.331M82.59 3.655h34.677v4.954H82.59zM81.186 8.527S53.775 12.49 52.123 35.278c-1.552 21.42 10.899 30.714 18.495 41.282s8.256 17.174 8.587 24.77-3.074 22.14-4.505 32.048M119.446 8.361s27.412 3.964 29.063 26.751c1.553 21.421-10.898 30.715-18.494 41.283s-8.257 17.173-8.587 24.769 3.074 22.141 4.505 32.049" style="fill:none;stroke:#343e3d;stroke-width:6px"/>
201  <path d="m81.614 146.353.211 11.844 386.296-28.357s24.13-1.115 31.065-3.427c6.935-2.311 10.262-4.832 11.253-9.456s-2.674-10.214-20.226-12.325" style="fill:none;stroke:#343e3d;stroke-width:6px"/>
202  <path d="M458.409 175.534h23.504v57.66h-23.504z" style="fill:#939f9e;stroke:#343e3d;stroke-width:6px"/>
203  <path d="M132.772 140.418a5.5 5.5 0 0 1-5.496 5.496H73.209a5.5 5.5 0 0 1-5.496-5.496 5.5 5.5 0 0 1 5.496-5.495h54.067a5.5 5.5 0 0 1 5.496 5.495" style="fill:none;stroke:#343e3d;stroke-width:6px"/>
204  <ellipse cx="468.287" cy="66.182" rx="25.628" ry="9.644" style="fill:#cdd7d6;stroke:#343e3d;stroke-width:6px"/>
205  <path d="m81.677 158.9 7.347 1 380.841-21.075s26.973-2.539 30.481-3.74c2.17-.743 7.444-2.619 8.966-6.17s1.295-12.759 1.295-12.759M470.057 250.627v106.781" style="fill:none;stroke:#343e3d;stroke-width:6px"/>
206  <path d="m477.481 153.507 2.097-.746 20.116 7.904-11.416 1.989-9.884 1.098zM519.042 357.958l20.725 23.411 58.806-18.217-42.427-14.983-13.846 4.705z" style="fill:#fff"/>
207  <path d="M579.637 481.924c41.644-8.879 78.791-.431 82.903 18.854 4.111 19.284-26.36 42.149-68.003 51.028s-78.792.431-82.903-18.854c-4.112-19.284 26.359-42.149 68.003-51.028" style="fill:#fff;stroke:#343e3d;stroke-width:6px"/>
208  <path d="m590.566 491.092-.564 49.037-25.927 2.066-20.103-2.63-17.285-10.521 12.024-15.97 16.346-11.649 21.23-5.824z" style="fill:#cdd7d6"/>
209  <path d="m592.171 491.161 1.683-1.323 34.87 1.804 15.872 6.373 3.367 5.892-2.164 10.221-8.537 7.334-14.309 9.259-14.309 5.892-14.91 3.727z" style="fill:#939f9e"/>
210  <path d="M583.09 492.312c32.928-7.021 61.953-1.978 64.774 11.254s-21.622 29.675-54.551 36.696c-32.928 7.02-61.952 1.978-64.774-11.255-2.821-13.232 21.622-29.675 54.551-36.695" style="fill:none;stroke:#343e3d;stroke-width:6px"/>
211  <path d="m212.28 385.571-.028 16.599 18.878 9.499.12-17.676zM211.616 450.822l20.431 10.333-.469 20.432-19.728-9.394zM212.639 623.36l.059-49.671 18.671 9.512v49.435zM213.436 506.046v16.204l17.848 9.629 1.174-17.379z" style="fill:#e59c86"/>
212  <path d="m427.614 484.801 23.856-5.541.154 21.393-24.626 9.235zM427.074 547.951l22.509-8.273 3.271 33.668-25.588 7.503zM427.459 649.147l-.77 24.818 24.818-3.848.962-29.05zM426.689 706.094l25.78-8.465-.123 36.854-26.042 7.226zM703.84 662.592l16.47-4.886-.079-17.73-18.44 2.443zM701.785 616.867l18.47-5.233.307-65.566-18.623 4.463zM700.655 492.553l.308 28.166 19.239-4.925.154-27.396zM720.202 416.829l-.154 18.47-18.47 4.771.308-19.239z" style="fill:#f1c8ad"/>
213  <path d="m395.689 476.826-1.924 15.776 26.742 14.429.193-20.008-5.002.192zM396.074 534.362l23.748 13.227.3 30.061-25.551-10.522zM395.776 636.097l24.049 12.265.536 91.964-25.077-14.123z" style="fill:#e59c86"/>
214  <path d="m701.167 440.826 21.196-5.19M701.167 492.108l21.42-5.246M701.167 642.191l21.42-5.246M701.167 618.339l21.42-5.245M427.055 703.105l24.733-6.329M427.043 677.034l24.734-6.329M424.103 646.962l27.674-7.081M424.111 619.806l27.666-7.079M424.111 582.743l27.666-7.078M424.111 510.454l27.666-7.079M424.111 545.681l27.666-7.079M701.167 548.985l21.42-5.245M701.167 522.198l21.42-5.246M423.498 510.941l-28.267-15.119M423.498 545.802l-28.267-15.12M423.498 582.497l-28.267-15.12M423.498 619.192l-28.267-15.12M423.498 648.181l-28.267-15.119M423.498 704.692l-28.267-15.12M233.308 609.976l-22.699-12.142M233.308 581.794l-22.699-12.142M233.308 536.938l-22.699-12.142M233.308 513.218l-22.699-12.142M233.308 485.741l-22.699-12.142M233.308 459.203l-22.699-12.142M233.308 415.756l-22.699-12.142M592.08 443.349v253.229M394.057 475.253V728.65M452.826 477.403v259.131M700.806 418.576V666.63M233.515 394.266v242.962" style="fill:none;stroke:#343e3d;stroke-width:6px"/>
215  <path d="M477.946 727.494V609.783L673.66 562.09v11.436" style="fill:#c8553d;stroke:#343e3d;stroke-width:6px"/>
216  <path d="M636.777 571.033 750.302 676.86l25.233-7.824L660.892 565.06z" style="fill:#f1c8ad;stroke:#343e3d;stroke-width:6px"/>
217  <path d="m478.933 609.725-.639 122.11 91.342 90.172 23.812-107.347z" style="fill:#c8553d;stroke:#343e3d;stroke-width:6px"/>
218  <path d="M582.051 728.49 555.46 847.438l-15.489-15.988 25.982-120.417z" style="fill:#c8553d;stroke:#343e3d;stroke-width:6px"/>
219  <path d="m581.373 727.8 237.261-62.823-28.666 114.666-234.822 67.702z" style="fill:#f1c8ad;stroke:#343e3d;stroke-width:6px"/>
220  <path d="m479.053 672.071 79.748 70.999M674.229 813.116l28.926-117.559" style="fill:none;stroke:#343e3d;stroke-width:6px"/>
221  <path d="M702.668 695.818 675.02 812.07l-118.917 33.311 24.983-117.918z" style="fill:#e59c86;stroke:#343e3d;stroke-width:6px"/>
222  <path d="m505.087 603.428 132.33-32.009 99.54 93.684-127.645 33.571z" style="fill:#343e3d"/>
223  <path d="M680.583 784.981s.279-5.17-2.376-8.942-6.566-6.706-6.566-6.706 1.257-10.339 5.309-13.971c3.224-2.891 3.863-3.745 9.011-6.313 1.322-.659 5.596-1.138 11.247-1.651.178-.016 1.51 2.025 1.51 2.025s2.345 4.188 7.604 5.905" style="fill:#c8553d;stroke:#343e3d;stroke-width:6px"/>
224  <path d="M692.232 767.768c-5.676 6.113-12.421 18.652-11.727 25.035.847 7.789 12.46 20.66 30.143 16.512 17.682-4.147 22.57-14.881 24.013-19.865 2.401-8.295 1.884-21.848-5.021-30.649-7.207-9.186-16.079-5.729-20.162-4.166-6.976 2.672-11.57 7.021-17.246 13.133" style="fill:#c8553d;stroke:#343e3d;stroke-width:6px"/>
225  <path d="M729.639 794.675s4.971-8.285-.53-23.39c-2.723-7.478-11.716-14.425-15.349-15.232s-19.917 9.151-19.782 11.035c.134 
2251.884 10.496 1.345 19.378 18.974s4.979 20.051 4.979 20.051z" style="fill:#e59c86"/>
226  <path d="M726.586 786.422c1.31.968.663 4.066-1.443 6.912s-4.878 4.371-6.187 3.402c-1.31-.968-.663-4.066 1.443-6.912s4.878-4.371 6.187-3.402" style="fill:none;stroke:#f1c8ad;stroke-width:6px"/>
227  <path d="M709.558 762.749c2.857-1.587 7.446 1.21 10.241 6.242s2.746 10.406-.111 11.993c-2.856 1.587-7.445-1.21-10.241-6.242s-2.745-10.406.111-11.993" style="fill:#fff;stroke:#fff;stroke-width:6px"/>
228  <path d="M692.232 767.768c-5.676 6.113-12.421 18.652-11.727 25.035.847 7.789 12.46 20.66 30.143 16.512 17.682-4.147 22.57-14.881 24.013-19.865 2.401-8.295 1.884-21.848-5.021-30.649-7.207-9.186-16.079-5.729-20.162-4.166-6.976 2.672-11.57 7.021-17.246 13.133" style="fill:none;stroke:#343e3d;stroke-width:6px"/>
229  <path d="m413.937 170.065 54.595 14.944-12.35 45.124-54.596-14.943zM325.7 147.477l27.342-.055 14.315 19.664-36.008 42.579-31.803-39.688z" style="fill:#fed766"/>
230  <path d="m459.137 208.788-2.352 25.693-56.368-5.159 2.352-25.694z" style="fill:#fff"/>
231  <path d="m486.479 187.959 2.425 43.703-56.516 3.136-2.425-43.702zM398.3
23164 144.174l29.788 48.132-48.131 29.787-29.788-48.131z" style="fill:#ffedaa"/>
232  <path d="M453.924 202.845h72.373v28.179h-72.373zM543.978-.397l29.457 48.335L525.1 77.394 495.644 29.06zM635.771 579.493l29.457 48.335-48.335 29.457-29.457-48.335z" style="fill:#fed766"/>
233  <path d="m701.924 605.331-11.754 55.37-55.37-11.755 11.755-55.369zM594.312 583.927l12.394 51.328-55.022 13.286-12.394-51.328zM533.033 117.45l54.596 14.943-14.943 54.596-54.596-14.943z" style="fill:#fed766"/>
234  <path d="m538.861 189.739-29.373 44.371-28.315-18.745 29.373-44.371z" style="fill:#c8553d"/>
235  <path d="M608.153 586.884h56.603v56.603h-56.603zM553.714 134.462h56.603v56.603h-56.603z" style="fill:#234d32"/>
236  <path d="m612.047 591.881 30.267 47.832-47.832 30.267-30.267-47.832z" style="fill:#fff"/>
237  <path d="m414.404 21.08 7.026 56.165-56.166 7.026-7.025-56.166z" style="fill:#68957a"/>
238  <path d="m654.363 626.655-6.248 56.258-56.257-6.248 6.247-56.257z" style="fill:#fed766"/>
239  <path d="m520.865 616.171 34.381 30.336 7.906-13.457-11.102-28.428z" style="fill:#cad8be"/>
240  <path d="M628.025 612.375h56.603v56.603h-56.603zM534.456 54.051h56.603v56.603h-56.603zM547.682 152.299l37.371 42.513-42.513 37.371-37.371-42.513z" style="fill:#c6e0db"/>
241  <path d="M495.564 233.164 489.197 215l53.157-18.707 9.301 25.063.087 4.22zM398.005 162.607l-10.743 55.574-55.574-10.743 10.743-55.574z" style="fill:#234d32"/>
242  <path d="m302.869 181.405 56.362-16.5 15.128 53.297-12.616 3.942-50.989-22.078z" style="fill:#c8553d"/>
243  <path d="m361.369 201.967 2.579 20.621 28.572 6.147 29.537 2.939-4.574-36.952zM614.485 161.002l5.697 45.538-56.166 7.026-5.696-45.539z" style="fill:#68957a"/>
244  <path d="m694.584 616.325 32.304 46.481-46.481 32.303-32.303-46.48z" style="fill:#c8553d"/>
245  <path d="m655.424 685.84 64.47-17.015 1.104-3.905-53.828-16.316z" style="fill:#68957a"/>
246  <path d="M552.251 615.752h56.603v56.603h-56.603zM547.221 226.601l42.399-9.236 16.794-7.062.862-5.857-56.326-7.406z" style="fill:#fff6d6"/>
247  <path d="m641.481 634.493 14.829 54.627-54.627 14.829-14.829-54.626z" style="fill:#234d32"/>
248  <path d="m478.896 609.522 116.045 105.202 25.234-7.824-116.863-103.426z" style="fill:#f1c8ad;stroke:#343e3d;stroke-width:6px"/>
249  <path d="m581.157 726.993 237.682-63.252-14.638-16.566-238.115 63.896z" style="fill:#f1c8ad;stroke:#343e3d;stroke-width:6px"/>
250  <path d="M301.981 180.633s-.513 4.745.029 7.595c.834 4.394 12.38 19.512 49.252 31.22s75.091 12.784 80.473 13.188 47.492 3.577 97.457-2.647 60.941-12.703 65.146-14.049c4.205-1.345 25.232-8.747 34.82-21.531" style="fill:none;stroke:#343e3d;stroke-width:6px"/>
251</svg>
252			    	<div class="hero__intro | flow tc">
253    		    		<h1>La forge des projets</h1>
254    		    		    		<div class="mt-base"><p>Cette page regroupe tous mes projets que j'ai réalisés sous le nom de Pikselkraft depuis 2018. Je mets particulièrement en avant la durabilité des projets et le suivi (cycle de vie, maintenance). </p></div>
255    		    	</div>
256    </section>
257	  </div>
258</header>
259
260<main id="main" class="main mauto" data-template="forge" role="main" tabindex="0">
261
262<div class="main__wrapper | marge mt-main relative">
263      <div class="tsv | asterism">
264          <div class="tsv__metrics encart | relative mt-section m-flex m-flex-column m-gap-l | bg-primary">
265        <h2 class="tc">Des projets durables</h2>
266        <div class="tsv-metrics | m-flex m-flex-column">
267          <div class="tsv-metrics__row tsv-metrics__row--2 tsv-metrics__row--center">
268            <div class="tsv-metrics__card">
269              <h3 class="h3-like | font-brand">8</h3>
270              <p>années d'activité</p>
271            </div>
272            <div class="tsv-metrics__card">
273              <h3 class="h3-like | font-brand">70</h3>
274              <p>Projets</p>
275            </div>
276          </div>
277          <div class="tsv-metrics__row tsv-metrics__row--3">
278            <div class="tsv-metrics__card">
279              <h3 class="h3-like | font-brand">46</h3>
280              <p>Sites web</p>
281              <p class="font-extrasmall">dont 36 maintenance en cours</p>
282            </div>
283            <div class="tsv-metrics__card">
284              <h3 class="h3-like | font-brand">10</h3>
285              <p>Audit & accompagnement</p>
286            </div>
287            <div class="tsv-metrics__card">
288              <h3 class="h3-like | font-brand">13</h3>
289              <p>Formations & conférences</p>
290            </div>
291          </div>
292          <div class="tsv-metrics__row tsv-metrics__row--3 tsv-metrics__row--center">
293            <div class="tsv-metrics__card">
294              <h3 class="h3-like | font-brand">0</h3>
295              <p>outil des GAFAM</p>
296            </div>
297            <div class="tsv-metrics__card">
298              <h3 class="h3-like | font-brand">140</h3>
299              <p>Ko, poids moyen des pages<a class="no-underline" aria-describedby="footnote-label" id="note-ref" href="#note">*</a></p>
300              <p class="font-extrasmall">
300*(1400Ko en moyenne sur le web en 2025)</p>
301            </div>
302            <div class="tsv-metrics__card">
303              <h3 class="h3-like | font-brand">7</h3>
304              <p>années, le cycle de vie le plus long</p>
305            </div>
306          </div>
307        </div>
308      </div>
309  
310      <div class="tsv__list | mt-section | relative | asterism">
311        <div class="tsv__intro | m-flex m-flex-column align-center m-gap-l">
312        <h2 class="tc">Sélection de projets</h2>
313                <ul class="tsv__highlight | m-flex m-flex-column m-gap-l flex-row flex-wrap gap-base justify-content-center | mt-content mw100ch mauto | list-none">
314                  <li class="relative"><a class="no-underline noblank h3-like font-heading" href="https://www.thegreenroom.fr/" target="_blank" rel="noopener noreferrer">The Greenroom</a></li>
315                  <li class="relative"><a class="no-underline noblank h3-like font-heading" href="https://gauthierroussilhe.com" target="_blank" rel="noopener noreferrer">Gauthier Roussilhe</a></li>
316                  <li class="relative"><a class="no-underline noblank h3-like font-heading" href="https://leshallesencommun.fr/" target="_blank" rel="noopener noreferrer">Les Halles En Commun</a></li>
317                  <li class="relative"><a class="no-underline noblank h3-like font-heading" href="https://kompadesign.eu/" target="_blank" rel="noopener noreferrer">Kompa Design</a></li>
318                  <li class="relative"><a class="no-underline noblank h3-like font-heading" href="https://www.incub.net/" target="_blank" rel="noopener noreferrer">Incub'</a></li>
319                  <li class="relative"><a class="no-underline noblank h3-like font-heading" href="https://conradcolman.com/" target="_blank" rel="noopener noreferrer">Conrad Colman</a></li>
320                  <li class="relative"><a class="no-underline noblank h3-like font-heading" href="https://hameaux-legers.org/" target="_blank" rel="noopener noreferrer">Hameaux Légers</a></li>
321                  <li class="relative"><a class="no-underline noblank h3-like font-heading" href="https://decroissancelefestival.org/" target="_blank" rel="noopener noreferrer">Décroissance, Le Festival</a></li>
322                  <li class="relative"><a class="no-underline noblank h3-like font-heading" href="https://estrades.huma-num.fr/" target="_blank" rel="noopener noreferrer">Université Strasbourg, Estrades</a></li>
323                  <li class="relative"><a class="no-underline noblank h3-like font-heading" href="https://lowtechlab.org/" target="_blank" rel="noopener noreferrer">Low Tech Lab</a></li>
324                  <li class="relative"><a class="no-underline noblank h3-like font-heading" href="https://gauthierroussilhe.com/book/ademe/" target="_blank" rel="noopener noreferrer">ADEME</a></li>
325                </ul>
326        </div>
327      </div>
328      <div class="tsv__projects | w100 mt-section | relative | asterism">
329      <div class="m-flex m-flex-column flex-row flex-wrap justify-content-center m-gap-l gap-l2">
330        <div class="mw730">
331          <h2 class="w100">Tous les projets</h2>
332          <p>Du plus récent au plus ancien.</p>
333        </div>
334                <div class="w100">
335        <div class="tsv__projects | m-flex m-flex-column m-gap-l gap-l w100 mw730 mauto | relative">
336 
337  <section class="yearlist projects__list | m-flex m-flex-column flex flex-row align-start">
338    <h3 class="h5-like lh font-brand">2026</h3>
339    <div class="yearlist__container projects-list__container | m-flex m-flex-column m-gap-base gap-l w100">
340        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
341      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
342                <h4 class="project__heading font-base">Maison Jacques Copeau</h4>
343                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
344        <li><span class="visually-hidden">Mission :</span> accompagnement                & infogérance                </li>
345                <li>[En cours]</li>
346              </ul>
347            </div>
348            <div class="tsv__content | flex flex-wrap space-between miw100">
349                <details class="font-small" name="projet">        
350          <summary>Plus d'informations</summary>
351          <p>Migration du nom de domaine, d’un site Kirby et de boîtes mails d’OVH à Infomaniak.</p>        </details>
352                <ul class="tsv__info | flex flex-wrap list-none">
353                                      </ul>
354      </div>
355          </div>
356        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
357      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
358                <h4 class="project__heading font-base">Simone camp</h4>
359                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
360        <li><span class="visually-hidden">Mission :</span> accompagnement                & infogérance                </li>
361              </ul>
362            </div>
363            <div class="tsv__content | flex flex-wrap space-between miw100">
364                <details class="font-small" name="projet">        
365          <summary>Plus d'informations</summary>
366          <p>Réalisation d’ateliers de recherche pour déterminer les persona et l’arborescence d’un futur projet de refonte du site web. Migration du nom de domaine et mails de Gandi à Infomaniak.</p>        </details>
367                <ul class="tsv__info | flex flex-wrap list-none">
368                                      </ul>
369      </div>
370          </div>
371        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
372      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
373                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://www.terabilis.fr/">Terabilis</a></h4>
374                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
375        <li><span class="visually-hidden">Mission :</span> site web                </li>
376              </ul>
377            </div>
378            <div class="tsv__content | flex flex-wrap space-between miw100">
379                <details class="font-small" name="projet">        
380          <summary>Plus d'informations</summary>
381          <p>Création d’un site web utilisant le système SIMO basé sur Kirby avec l’application de la charte graphique.</p>        </details>
382                <ul class="tsv__info | flex flex-wrap list-none">
383                                      </ul>
384      </div>
385          </div>
386        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
387      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
388                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://ausillon.fr/">Ausillon</a></h4>
389                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
390        <li><span class="visually-hidden">Mission :</span> logiciels                & meshtastic                </li>
391                <li>[En cours]</li>
392              </ul>
393            </div>
394            <div class="tsv__content | flex flex-wrap space-between miw100">
395                <details class="font-small" name="projet">        
396          <summary>Plus d'informations</summary>
397          <p>ausillon est un carnet de vigne numérique : un outil simple pour noter et garder en mémoire tout ce qui se passe sur une parcelle (traitements, travaux, observations), qui a pour objectif de fonctionner même sans connexion internet.  Peu énergivore, sillon est un petit logiciel qui tourne directement sur un ordinateur, même très ancien. Les données sont stockées dans des fichiers simples, qu'on peut relire et copier facilement. À terme, sillon pourra récupérer automatiquement les informations de capteurs installés dans les vignes (météo, humidité du sol), pour enrichir le carnet sans ressaisie manuelle. La transmission des données se fera hors réseau internet.</p>        </details>
398                <ul class="tsv__info | flex flex-wrap list-none">
399                                      </ul>
400      </div>
401          </div>
402        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
403      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
404                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://grainitude.fr/">Grainitude</a></h4>
405                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
406        <li><span class="visually-hidden">Mission :</span> site web                & ecommerce                </li>
407              </ul>
408            </div>
409            <div class="tsv__content | flex flex-wrap space-between miw100">
410                <details class="font-small" name="projet">        
411          <summary>Plus d'informations</summary>
412          <p>Création d’un web design à partir d’une identité graphique et développement d’un site e-commerce avec le CMS Kirby.</p>        </details>
413                <ul class="tsv__info | flex flex-wrap list-none">
414                                      </ul>
415      </div>
416          </div>
417        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
418      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
419                <h4 class="project__heading font-base">Transition2050</h4>
420                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
421        <li><span class="visually-hidden">Mission :</span> site web                & simo                </li>
422                <li>[En cours]</li>
423              </ul>
424            </div>
425            <div class="tsv__content | flex flex-wrap space-between miw100">
426                <details class="font-small" name="projet">        
427          <summary>Plus d'informations</summary>
428          <p>[en attente des contenus] Création d’un site web utilisant le système SIMO basé sur Kirby avec l’application de la charte graphique.</p>        </details>
429                <ul class="tsv__info | flex flex-wrap list-none">
430                                      </ul>
431      </div>
432          </div>
433        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
434      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
435                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://kompadesign.eu/">Kompa design</a></h4>
436                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
437        <li><span class="visually-hidden">Mission :</span> site web                & design                </li>
438              </ul>
439            </div>
440            <div class="tsv__content | flex flex-wrap space-between miw100">
441                <details class="font-small" name="projet">        
442          <summary>Plus d'informations</summary>
443          <p>Conception d’un web design à partir d’une identité (logo, carte de visite), intégration du web design sur le CMS Kirby.</p>        </details>
444                <ul class="tsv__info | flex flex-wrap list-none">
445                                      </ul>
446      </div>
447          </div>
448        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
449      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
450                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://impakters-rp.fr/">Impakters</a></h4>
451                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
452        <li><span class="visually-hidden">Mission :</span> site web                & simo                </li>
453              </ul>
454            </div>
455            <div class="tsv__content | flex flex-wrap space-between miw100">
456                <details class="font-small" name="projet">        
457          <summary>Plus d'informations</summary>
458          <p>Création d’un site web utilisant le système SIMO basé sur Kirby avec l’application de la charte graphique.</p>        </details>
459                <ul class="tsv__info | flex flex-wrap list-none">
460                                      </ul>
461      </div>
462          </div>
463        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
464      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
465                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://lesclimatsdedemain.fr/">Les Climats de Demain</a></h4>
466                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
467        <li><span class="visually-hidden">Mission :</span> site web                & statique                </li>
468              </ul>
469            </div>
470            <div class="tsv__content | flex flex-wrap space-between miw100">
471                <details class="font-small" name="projet">        
472          <summary>Plus d'informations</summary>
473          <p>Site statique avec génération de carte à partir d’un fichier tsv. Ce site n'utilise pas de frameworks ou de surcouches particulières. Les pages sont conçus en HTML/CSS. Localement il s'agit de fic
473hiers PHP pour faciliter l'inclusion de sections. Un script Shell va parcourir les pages d'un serveur PHP local pour générer des pages statiques (avec wget). Projet personnel d’expérimentation.</p>        </details>
474                <ul class="tsv__info | flex flex-wrap list-none">
475                                      </ul>
476      </div>
477          </div>
478        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
479      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
480                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://laboca-asso.org/">Laboca</a></h4>
481                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
482        <li><span class="visually-hidden">Mission :</span> site web                </li>
483                <li>[En cours]</li>
484              </ul>
485            </div>
486            <div class="tsv__content | flex flex-wrap space-between miw100">
487                <details class="font-small" name="projet">        
488          <summary>Plus d'informations</summary>
489          <p>En cours de réalisation : intégration de maquettes dans le CMS Kirby.</p>        </details>
490                <ul class="tsv__info | flex flex-wrap list-none">
491                                      </ul>
492      </div>
493          </div>
494        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
495      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
496                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://defiassiettesvides.fr/">Défi assiettes vides</a></h4>
497                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
498        <li><span class="visually-hidden">Mission :</span> site web                & simo                </li>
499              </ul>
500            </div>
501            <div class="tsv__content | flex flex-wrap space-between miw100">
502                <details class="font-small" name="projet">        
503          <summary>Plus d'informations</summary>
504          <p>Création d’un site web utilisant le système SIMO basé sur Kirby avec l’application de la charte graphique.</p>        </details>
505                <ul class="tsv__info | flex flex-wrap list-none">
506                                      </ul>
507      </div>
508          </div>
509        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
510      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
511                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://ardeche-autostop.fr/">Ardeche autostop</a></h4>
512                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
513        <li><span class="visually-hidden">Mission :</span> site web                & design                </li>
514              </ul>
515            </div>
516            <div class="tsv__content | flex flex-wrap space-between miw100">
517                <details class="font-small" name="projet">        
518          <summary>Plus d'informations</summary>
519          <p>Création d’un web design et site web avec un moteur de recherche de points de stops (cartographie).</p>        </details>
520                <ul class="tsv__info | flex flex-wrap list-none">
521                                      </ul>
522      </div>
523          </div>
524        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
525      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
526                <h4 class="project__heading font-base">ALEC MVE</h4>
527                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
528        <li><span class="visually-hidden">Mission :</span> site web                & accompagnement                </li>
529                <li>[En cours]</li>
530              </ul>
531            </div>
532            <div class="tsv__content | flex flex-wrap space-between miw100">
533                <details class="font-small" name="projet">        
534          <summary>Plus d'informations</summary>
535          <p>En cours de réalisation : développement d’un site web, accompagnement pour déterminer l’arborescence et l’organisation de BDD. Mise en place de synchronisation entre le site, les BDD et les newsletters.</p>        </details>
536                <ul class="tsv__info | flex flex-wrap list-none">
537                                      </ul>
538      </div>
539          </div>
540        </div> <!-- end of block projects -->
541  </section> <!-- end of year -->
542 
543  <section class="yearlist projects__list | m-flex m-flex-column flex flex-row align-start">
544    <h3 class="h5-like lh font-brand">2025</h3>
545    <div class="yearlist__container projects-list__container | m-flex m-flex-column m-gap-base gap-l w100">
546        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
547      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
548                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://origines-rennes.fr/">Origines</a></h4>
549                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
550        <li><span class="visually-hidden">Mission :</span> site web                </li>
551              </ul>
552            </div>
553            <div class="tsv__content | flex flex-wrap space-between miw100">
554                <details class="font-small" name="projet">        
555          <summary>Plus d'informations</summary>
556          <p>Création d’un site web utilisant le système SIMO basé sur Kirby avec l’application d’une charte graphique.</p>        </details>
557                <ul class="tsv__info | flex flex-wrap list-none">
558                                      </ul>
559      </div>
560          </div>
561        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
562      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
563                <h4 class="project__heading font-base">Réseau Alternatives Forestière</h4>
564                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
565        <li><span class="visually-hidden">Mission :</span> site web                & accompagnement                </li>
566                <li>[En cours]</li>
567              </ul>
568            </div>
569            <div class="tsv__content | flex flex-wrap space-between miw100">
570                <details class="font-small" name="projet">        
571          <summary>Plus d'informations</summary>
572          <p>En cours de réalisation : intégration d’un site web, accompagnement pour déterminer l’arborescence et l’organisation de BDD, passage à Nextcloud. Mise en place de synchronisation entre le site, les BDD et le système numérique.</p>        </details>
573                <ul class="tsv__info | flex flex-wrap list-none">
574                                      </ul>
575      </div>
576          </div>
577        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
578      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
579                <h4 class="project__heading font-base">Lumilaw</h4>
580                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
581        <li><span class="visually-hidden">Mission :</span> site web                & simo                </li>
582                <li>[En cours]</li>
583              </ul>
584            </div>
585            <div class="tsv__content | flex flex-wrap space-between miw100">
586                <details class="font-small" name="projet">        
587          <summary>Plus d'informations</summary>
588          <p>Création d’un site web utilisant le système SIMO basé sur Kirby avec l’application d’une charte graphique.</p>        </details>
589                <ul class="tsv__info | flex flex-wrap list-none">
590                                      </ul>
591      </div>
592          </div>
593        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
594      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
595                <h4 class="project__heading font-base">Atelier du Suran</h4>
596                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
597        <li><span class="visually-hidden">Mission :</span> site web                & design                </li>
598              </ul>
599            </div>
600            <div class="tsv__content | flex flex-wrap space-between miw100">
601                <details class="font-small" name="projet">        
602          <summary>Plus d'informations</summary>
603          <p>Conception d’un web design et intégration des maquettes dans le CMS Kirby.</p>        </details>
604                <ul class="tsv__info | flex flex-wrap list-none">
605                                      </ul>
606      </div>
607          </div>
608        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
609      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
610                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://conradcolman.com/">Conrad colman</a></h4>
611                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
612        <li><span class="visually-hidden">Mission :</span> site web                & simo                </li>
613              </ul>
614            </div>
615            <div class="tsv__content | flex flex-wrap space-between miw100">
616                <details class="font-small" name="projet">        
617          <summary>Plus d'informations</summary>
618          <p>Création d’un site web utilisant le système SIMO basé sur Kirby avec l’application de la charte graphique.</p>        </details>
619                <ul class="tsv__info | flex flex-wrap list-none">
620                                      </ul>
621      </div>
622          </div>
623        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
624      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
625                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://quinquis-energie.fr/">Quinquis Énergie</a></h4>
626                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
627        <li><span class="visually-hidden">Mission :</span> site web                & simo                </li>
628              </ul>
629            </div>
630            <div class="tsv__content | flex flex-wrap space-between miw100">
631                <details class="font-small" name="projet">        
632          <summary>Plus d'informations</summary>
633          <p>Création d’un site web utilisant le système SIMO basé sur Kirby avec l’application d’une charte graphique.</p>        </details>
634                <ul class="tsv__info | flex flex-wrap list-none">
635                                      </ul>
636      </div>
637          </div>
638        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
639      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
640                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://laponia.fr/">Laponia</a></h4>
641                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
642        <li><span class="visually-hidden">Mission :</span> site web                & design                </li>
643              </ul>
644            </div>
645            <div class="tsv__content | flex flex-wrap space-between miw100">
646                <details class="font-small" name="projet">        
647          <summary>Plus d'informations</summary>
648          <p>Conception d’un web design et intégration des maquettes dans le CMS Kirby.</p>        </details>
649                <ul class="tsv__info | flex flex-wrap list-none">
650                                      </ul>
651      </div>
652          </div>
653        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
654      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
655                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://journee-ecoconception-numerique.fr/2025/y-a-t-il-quelque-chose-apres-l-ecoconception-web">Y'a-t-il quelque chose après l'écoconception web ?</a></h4>
656                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
657        <li><span class="visually-hidden">Mission :</span> conférence                </li>
658              </ul>
659            </div>
660            <div class="tsv__content | flex flex-wrap space-between miw100">
661                <details class="font-small" name="projet">        
662          <summary>Plus d'informations</summary>
663          <p>Pour les Journée de l’écoconception numérique à Paris</p>        </details>
664                <ul class="tsv__info | flex flex-wrap list-none">
665                                      </ul>
666      </div>
667          </div>
668        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
669      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
670                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://arlekinpro.eu/">ArlekinPro</a></h4>
671                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
672        <li><span class="visually-hidden">Mission :</span> site web                </li>
673              </ul>
674            </div>
675            <div class="tsv__content | flex flex-wrap space-between miw100">
676                <details class="font-small" name="projet">        
677          <summary>Plus d'informations</summary>
678          <p>Création d’un site web utilisant le système SIMO basé sur Kirby avec l’application d’une charte graphique.</p>        </details>
679                <ul class="tsv__info | flex flex-wrap list-none">
680                                      </ul>
681      </div>
682          </div>
683        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
684      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
685                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="http://laligue05.org/">Ligue de l'enseignement 05</a></h4>
686                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
687        <li><span class="visually-hidden">Mission :</span> site web                & simo                </li>
688              </ul>
689            </div>
690            <div class="tsv__content | flex flex-wrap space-between miw100">
691                <details class="font-small" name="projet">        
692          <summary>Plus d'informations</summary>
693          <p>Création d’un site web utilisant le système SIMO basé sur Kirby avec l’application d’une charte graphique.</p>        </details>
694                <ul class="tsv__info | flex flex-wrap list-none">
695                                      </ul>
696      </div>
697          </div>
698        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
699      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
700                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://teambuilding-strasbourg.fr/">Les Solutions Existent</a></h4>
701                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
702        <li><span class="visually-hidden">Mission :</span> site web                & design                </li>
703              </ul>
704            </div>
705            <div class="tsv__content | flex flex-wrap space-between miw100">
706                <details class="font-small" name="projet">        
707          <summary>Plus d'informations</summary>
708          <p>Conception d’un web design et intégration des maquettes. Site statique.</p>        </details>
709                <ul class="tsv__info | flex flex-wrap list-none">
710                                      </ul>
711      </div>
712          </div>
713        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
714      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
715                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://lesconfituresdebourgogne.fr/">Maison Moiroux</a></h4>
716    
716                <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
717        <li><span class="visually-hidden">Mission :</span> site web                & design                </li>
718              </ul>
719            </div>
720            <div class="tsv__content | flex flex-wrap space-between miw100">
721                <details class="font-small" name="projet">        
722          <summary>Plus d'informations</summary>
723          <p>Conception d’un web design et intégration des maquettes dans le CMS Kirby.</p>        </details>
724                <ul class="tsv__info | flex flex-wrap list-none">
725                                      </ul>
726      </div>
727          </div>
728        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
729      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
730                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://ressources-t.org/">Ressources T – Envie</a></h4>
731                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
732        <li><span class="visually-hidden">Mission :</span> site web                </li>
733              </ul>
734            </div>
735            <div class="tsv__content | flex flex-wrap space-between miw100">
736                <details class="font-small" name="projet">        
737          <summary>Plus d'informations</summary>
738          <p>Création d'un site web. Web design par les Raisonné-e-s.</p>        </details>
739                <ul class="tsv__info | flex flex-wrap list-none">
740                                      </ul>
741      </div>
742          </div>
743        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
744      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
745                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="/forge/atelier-decroissance-le-festival-2023">Atelier sobriété et convivialisme numériques</a></h4>
746                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
747        <li><span class="visually-hidden">Mission :</span> conférence                </li>
748              </ul>
749            </div>
750            <div class="tsv__content | flex flex-wrap space-between miw100">
751                <details class="font-small" name="projet">        
752          <summary>Plus d'informations</summary>
753          <p>Pour Décroissance, le festival à Saint-Maixent-L’école</p>        </details>
754                <ul class="tsv__info | flex flex-wrap list-none">
755                                      </ul>
756      </div>
757          </div>
758        </div> <!-- end of block projects -->
759  </section> <!-- end of year -->
760 
761  <section class="yearlist projects__list | m-flex m-flex-column flex flex-row align-start">
762    <h3 class="h5-like lh font-brand">2024</h3>
763    <div class="yearlist__container projects-list__container | m-flex m-flex-column m-gap-base gap-l w100">
764        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
765      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
766                <h4 class="project__heading font-base">Amis de la Terre Bourgogne</h4>
767                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
768        <li><span class="visually-hidden">Mission :</span> accompagnement                </li>
769              </ul>
770            </div>
771            <div class="tsv__content | flex flex-wrap space-between miw100">
772                <details class="font-small" name="projet">        
773          <summary>Plus d'informations</summary>
774          <p>Aide pour la réalisation sur l’impact du Numérique. Mise en place d’un Nextcloud, Install party.</p>        </details>
775                <ul class="tsv__info | flex flex-wrap list-none">
776                                      </ul>
777      </div>
778          </div>
779        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
780      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
781                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://www.incub.net/">Incub'</a></h4>
782                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
783        <li><span class="visually-hidden">Mission :</span> site web                & design                </li>
784              </ul>
785            </div>
786            <div class="tsv__content | flex flex-wrap space-between miw100">
787                <details class="font-small" name="projet">        
788          <summary>Plus d'informations</summary>
789          <p>Conception d’un web design et intégration des maquettes dans le CMS Kirby. Intégration de l’API Brevo pour la mise en place de tunnel d’inscriptions.</p>        </details>
790                <ul class="tsv__info | flex flex-wrap list-none">
791                                      </ul>
792      </div>
793          </div>
794        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
795      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
796                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://simosimo.fr/">Simo</a></h4>
797                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
798        <li><span class="visually-hidden">Mission :</span> site web                & design                </li>
799              </ul>
800            </div>
801            <div class="tsv__content | flex flex-wrap space-between miw100">
802                <details class="font-small" name="projet">        
803          <summary>Plus d'informations</summary>
804          <p>Site de présentation du projet SIMO. Un thème crée avec le CMS Kirby pour proposer des sites vitrines plus accessibles et écoconçus à des acteurs de l’ESS et associations.</p>        </details>
805                <ul class="tsv__info | flex flex-wrap list-none">
806                                      </ul>
807      </div>
808          </div>
809        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
810      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
811                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://training.betterlivemusic.com/fr/parcours/formation/le-numerique-responsable">Landscape - betterlivemusic</a></h4>
812                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
813        <li><span class="visually-hidden">Mission :</span> formation                & écriture                </li>
814              </ul>
815            </div>
816            <div class="tsv__content | flex flex-wrap space-between miw100">
817                <details class="font-small" name="projet">        
818          <summary>Plus d'informations</summary>
819          <p>Rédaction d’un cours sur les pratiques numériques responsables dans les musiques actuelles.</p>        </details>
820                <ul class="tsv__info | flex flex-wrap list-none">
821                                      </ul>
822      </div>
823          </div>
824        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
825      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
826                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://monveloetmoi.org/">Mon vélo et moi</a></h4>
827                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
828        <li><span class="visually-hidden">Mission :</span> site web                & statique                </li>
829              </ul>
830            </div>
831            <div class="tsv__content | flex flex-wrap space-between miw100">
832                <details class="font-small" name="projet">        
833          <summary>Plus d'informations</summary>
834          <p>
834Site statique en HTML/CSS.</p>        </details>
835                <ul class="tsv__info | flex flex-wrap list-none">
836                                      </ul>
837      </div>
838          </div>
839        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
840      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
841                <h4 class="project__heading font-base">Conférence sur le Mooc Biorégion : « Comment habiter autrement la Terre »</h4>
842                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
843        <li><span class="visually-hidden">Mission :</span> conférence                </li>
844              </ul>
845            </div>
846            <div class="tsv__content | flex flex-wrap space-between miw100">
847                <details class="font-small" name="projet">        
848          <summary>Plus d'informations</summary>
849          <p>Présentation du MOOC Biorégion avec <a href="https://archipelduvivant.org/">L’Archipel Du Vivant</a></p>        </details>
850                <ul class="tsv__info | flex flex-wrap list-none">
851                                      </ul>
852      </div>
853          </div>
854        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
855      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
856                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://adele.help/">Adele</a></h4>
857                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
858        <li><span class="visually-hidden">Mission :</span> design                </li>
859              </ul>
860            </div>
861            <div class="tsv__content | flex flex-wrap space-between miw100">
862                <details class="font-small" name="projet">        
863          <summary>Plus d'informations</summary>
864          <p>Réalisation d’un web design et de feuille de style CSS pour le projet Adele. Site réalisé avec Catium.</p>        </details>
865                <ul class="tsv__info | flex flex-wrap list-none">
866                                      </ul>
867      </div>
868          </div>
869        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
870      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
871                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://generationecologie.fr/">Génération Écologie</a></h4>
872                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
873        <li><span class="visually-hidden">Mission :</span> accompagnement                </li>
874              </ul>
875            </div>
876            <div class="tsv__content | flex flex-wrap space-between miw100">
877                <details class="font-small" name="projet">        
878          <summary>Plus d'informations</summary>
879          <p>Gestion de projet pour accompagner la refonte du site web et le passage à Nextcloud.</p>        </details>
880                <ul class="tsv__info | flex flex-wrap list-none">
881                                      </ul>
882      </div>
883          </div>
884        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
885      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
886                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://leshallesencommun.fr/">Les Halles en Commun</a></h4>
887                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
888        <li><span class="visually-hidden">Mission :</span> site web                </li>
889              </ul>
890            </div>
891            <div class="tsv__content | flex flex-wrap space-between miw100">
892                <details class="font-small" name="projet">        
893          <summary>Plus d'informations</summary>
894          <p>Création d'un site web pour le projet des Halles en Commun. Webdesign par les Raisonné-e-s.</p>        </details>
895                <ul class="tsv__info | flex flex-wrap list-none">
896                                      </ul>
897      </div>
898          </div>
899        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
900      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
901                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://numerique-responsable.strasbourg.eu/article/vidc3a9o-5-convivialisons-l-accc3a8s-au-infos-pratiques-d-alsace-1/">Convivialisons l'accès aux informations pratiques d'Alsace</a></h4>
902                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
903        <li><span class="visually-hidden">Mission :</span> conférence                </li>
904              </ul>
905            </div>
906            <div class="tsv__content | flex flex-wrap space-between miw100">
907                <details class="font-small" name="projet">        
908          <summary>Plus d'informations</summary>
909          <p>Pour la semaine du numérique responsable au Shadok à Strasbourg</p>        </details>
910                <ul class="tsv__info | flex flex-wrap list-none">
911                                      </ul>
912      </div>
913          </div>
914        </div> <!-- end of block projects -->
915  </section> <!-- end of year -->
916 
917  <section class="yearlist projects__list | m-flex m-flex-column flex flex-row align-start">
918    <h3 class="h5-like lh font-brand">2023</h3>
919    <div class="yearlist__container projects-list__container | m-flex m-flex-column m-gap-base gap-l w100">
920        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
921      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
922                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://thegreenroom.fr/stomp">Stomp</a></h4>
923                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
924        <li><span class="visually-hidden">Mission :</span> formation                & écriture                </li>
925              </ul>
926            </div>
927            <div class="tsv__content | flex flex-wrap space-between miw100">
928                <details class="font-small" name="projet">        
929          <summary>Plus d'informations</summary>
930          <p>Rédaction d’un guide : Pratiques numériques responsables dans les musiques actuelles</p>        </details>
931                <ul class="tsv__info | flex flex-wrap list-none">
932                                      </ul>
933      </div>
934          </div>
935        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
936      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
937                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="/forge/l-impact-du-numerique-et-le-secteur-musical">L'impact du numérique et le secteur musical</a></h4>
938                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
939        <li><span class="visually-hidden">Mission :</span> conférence                </li>
940              </ul>
941            </div>
942          </div>
943        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
944      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
945                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://stratageme.xyz/">
945Stratagème</a></h4>
946                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
947        <li><span class="visually-hidden">Mission :</span> site web                & design                </li>
948              </ul>
949            </div>
950            <div class="tsv__content | flex flex-wrap space-between miw100">
951                <details class="font-small" name="projet">        
952          <summary>Plus d'informations</summary>
953          <p>Conception d’un web design et intégration des maquettes dans le CMS Kirby.</p>        </details>
954                <ul class="tsv__info | flex flex-wrap list-none">
955                                      </ul>
956      </div>
957          </div>
958        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
959      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
960                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://nilamassage.fr/">Nila Massage</a></h4>
961                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
962        <li><span class="visually-hidden">Mission :</span> site web                & design                </li>
963              </ul>
964            </div>
965            <div class="tsv__content | flex flex-wrap space-between miw100">
966                <details class="font-small" name="projet">        
967          <summary>Plus d'informations</summary>
968          <p>Création de maquettes et d'un site web pour Nila Massage.</p>        </details>
969                <ul class="tsv__info | flex flex-wrap list-none">
970                                      </ul>
971      </div>
972          </div>
973        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
974      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
975                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://www.caroubier.fr/">Caroubier</a></h4>
976                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
977        <li><span class="visually-hidden">Mission :</span> site web                </li>
978              </ul>
979            </div>
980            <div class="tsv__content | flex flex-wrap space-between miw100">
981                <details class="font-small" name="projet">        
982          <summary>Plus d'informations</summary>
983          <p>Conception d’un web design et intégration des maquettes dans le CMS Kirby.</p>        </details>
984                <ul class="tsv__info | flex flex-wrap list-none">
985                                      </ul>
986      </div>
987          </div>
988        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
989      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
990                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://estrades.huma-num.fr/">Université Strasbourg, Estrades</a></h4>
991                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
992        <li><span class="visually-hidden">Mission :</span> site web                </li>
993              </ul>
994            </div>
995            <div class="tsv__content | flex flex-wrap space-between miw100">
996                <details class="font-small" name="projet">        
997          <summary>Plus d'informations</summary>
998          <p>Ateliers pour déterminer les persona et l’arborescence d’un projet d’humanité numérique : CHI-KNOW-PO (Institut d'études avancées de l'université de Strasbourg). </p>        </details>
999                <ul class="tsv__info | flex flex-wrap list-none">
1000                                      </ul>
1001      </div>
1002          </div>
1003        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1004      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1005                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://supermab.org/">Supermab</a></h4>
1006                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1007        <li><span class="visually-hidden">Mission :</span> site web                </li>
1008              </ul>
1009            </div>
1010            <div class="tsv__content | flex flex-wrap space-between miw100">
1011                <details class="font-small" name="projet">        
1012          <summary>Plus d'informations</summary>
1013          <p>Création d'un site web pour l'association Supermab. Webdesign par les Raisonné-e-s.</p>        </details>
1014                <ul class="tsv__info | flex flex-wrap list-none">
1015                                      </ul>
1016      </div>
1017          </div>
1018        </div> <!-- end of block projects -->
1019  </section> <!-- end of year -->
1020 
1021  <section class="yearlist projects__list | m-flex m-flex-column flex flex-row align-start">
1022    <h3 class="h5-like lh font-brand">2022</h3>
1023    <div class="yearlist__container projects-list__container | m-flex m-flex-column m-gap-base gap-l w100">
1024        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1025      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1026                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://atelierzerocarbone.com/">Atelier Zéro Carbone</a></h4>
1027                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1028        <li><span class="visually-hidden">Mission :</span> site web                & design                </li>
1029              </ul>
1030            </div>
1031            <div class="tsv__content | flex flex-wrap space-between miw100">
1032                <details class="font-small" name="projet">        
1033          <summary>Plus d'informations</summary>
1034          <p>Refonte du site internet pour l'Atelier Zéro Carbone Architectes.</p>        </details>
1035                <ul class="tsv__info | flex flex-wrap list-none">
1036                                      </ul>
1037      </div>
1038          </div>
1039        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1040      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1041                <h4 class="project__heading font-base">IEF</h4>
1042                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1043        <li><span class="visually-hidden">Mission :</span> formation                </li>
1044              </ul>
1045            </div>
1046            <div class="tsv__content | flex flex-wrap space-between miw100">
1047                <details class="font-small" name="projet">        
1048          <summary>Plus d'informations</summary>
1049          <p>Cours sur deux semestres :  méthodes de design, conception de cahiers des charges, gestion de projet.</p>        </details>
1050                <ul class="tsv__info | flex flex-wrap list-none">
1051                                      </ul>
1052      </div>
1053          </div>
1054        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1055      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1056                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://projet-atlass.org/">Projet atlass</a></h4>
1057                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1058        <li><span class="visually-hidden">Mission :</span> site web                </li>
1059              </ul>
1060            </div>
1061            <div class="tsv__content | flex flex-wrap space-between miw100">
1062                <details class="font-small" name="projet">        
1063          <summary>Plus d'informations</summary>
1064          <p>Refonte du site web pour le projet Atlass 2 de la Fédération Régionale des CIVAM de Bretagne . Webdesign par les Raisonné-e-s.</p>        </details>
1065                <ul class="tsv__info | flex flex-wrap list-none">
1066                                      </ul>
1067      </div>
1068          </div>
1069        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1070      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1071                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://asterre.org">AsTerre</a></h4>
1072                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1073        <li><span class="visually-hidden">Mission :</span> site web                & design                </li>
1074              </ul>
1075            </div>
1076            <div class="tsv__content | flex flex-wrap space-between miw100">
1077                <details class="font-small" name="projet">        
1078          <summary>Plus d'informations</summary>
1079          <p>Refonte du site internet pour l'AsTerre (association nationale des professionnels de la Terre crue). Conception d’un web design et intégration des maquettes dans le CMS Kirby.</p>        </details>
1080                <ul class="tsv__info | flex flex-wrap list-none">
1081                                      </ul>
1082      </div>
1083          </div>
1084        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1085      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1086                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://gauthierroussilhe.com">Gauthier Roussilhe</a></h4>
1087                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1088        <li><span class="visually-hidden">Mission :</span> site web                </li>
1089              </ul>
1090            </div>
1091            <div class="tsv__content | flex flex-wrap space-between miw100">
1092                <details class="font-small" name="projet">        
1093          <summary>Plus d'informations</summary>
1094          <p>Refonte du site internet de Gauthier Roussilhe (chercheur sur les enjeux environnementaux de la numérisation) avec Timothée Goguely (conception graphique et développement).</p>        </details>
1095                <ul class="tsv__info | flex flex-wrap list-none">
1096                                      </ul>
1097      </div>
1098          </div>
1099        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1100      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1101                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://www.impaccct.fr/">Impaccct</a></h4>
1102                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1103        <li><span class="visually-hidden">Mission :</span> site web                </li>
1104              </ul>
1105            </div>
1106            <div class="tsv__content | flex flex-wrap space-between miw100">
1107                <details class="font-small" name="projet">        
1108          <summary>Plus d'informations</summary>
1109          <p>Création d’un site web pour Impaccct sur la base d’un webdesign des Raisonné-e-s.</p>        </details>
1110                <ul class="tsv__info | flex flex-wrap list-none">
1111                                      </ul>
1112      </div>
1113          </div>
1114        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1115      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1116                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://decroissancelefestival.org/">Décroissance, le festival</a></h4>
1117                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1118        <li><span class="visually-hidden">Mission :</span> site web                & design                </li>
1119              </ul>
1120            </div>
1121            <div class="tsv__content | flex flex-wrap space-between miw100">
1122                <details class="font-small" name="projet">        
1123          <summary>Plus d'informations</summary>
1124          <p>Conception d’un web design à partir d’une identité graphique. Intégration des maquettes dans le CMS Kirby. Le site est particulièrement peu énergivore pour répondre aux enjeux de la décroissance.</p>        </details>
1125                <ul class="tsv__info | flex flex-wrap list-none">
1126                                      </ul>
1127      </div>
1128          </div>
1129        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1130      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1131                <h4 class="project__heading font-base">Charlène Christin Naturopathe</h4>
1132                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1133        <li><span class="visually-hidden">Mission :</span> site web                & design                </li>
1134                <li>[Hors-ligne]</li>
1135              </ul>
1136            </div>
1137            <div class="tsv__content | flex flex-wrap space-between miw100">
1138                <details class="font-small" name="projet">        
1139          <summary>Plus d'informations</summary>
1140          <p>Création d’un site statique avec des illustations de fleurs de Bacchus. L’activité est arrêté, le site est donc hors-ligne.</p>        </details>
1141                <ul class="tsv__info | flex flex-wrap list-none">
1142                                      </ul>
1143      </div>
1144          </div>
1145        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1146      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1147                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://lesraisonnees.co/">Les Raisonné·e·s</a></h4>
1148                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1149        <li><span class="visually-hidden">Mission :</span> site web                </li>
1150              </ul>
1151            </div>
1152            <div class="tsv__content | flex flex-wrap space-between miw100">
1153                <details class="font-small" name="projet">        
1154          <summary>Plus d'informations</summary>
1155          <p>Développement d'un site écoconçu pour les Raisonné·e·s, une agence de communication responsable et engagée. Ceci est une première version de transition en HTML/CSS, une deuxième version plus étoffée est en cours de préparation avec Kirby. Le design est réalisé par les Raisonné·e·s.</p>        </details>
1156                <ul class="tsv__info | flex flex-wrap list-none">
1157                                      </ul>
1158      </div>
1159          </div>
1160        </div> <!-- end of block projects -->
1161  </section> <!-- end of year -->
1162 
1163  <section class="yearlist projects__list | m-flex m-flex-column flex flex-row align-start">
1164    <h3 class="h5-like lh font-brand">2021</h3>
1165    <div class="yearlist__container projects-list__container | m-flex m-flex-column m-gap-base gap-l w100">
1166        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1167      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1168                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://gauthierroussilhe.com/book/ademe/">ADEME</a></h4>
1169                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1170        <li><span class="visually-hidden">Mission :</span> formation                & écriture                </li>
1171              </ul>
1172            </div>
1173          </div>
1174        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1175      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1176                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://hellow.coop/">Hellow</a></h4>
1177                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1178        <li><span class="visually-hidden">Mission :</span> site web                & design                </li>
1179              </ul>
1180            </div>
1181            <div class="tsv__content | flex flex-wrap space-between miw100">
1182                <details class="font-small" name="projet">        
1183          <summary>Plus d'informations</summary>
1184          <p>Conception d'un site écoconçu pour une coopérative de construction d'habitat léger et low-tech en Belgique.</p>        </details>
1185                <ul class="tsv__info | flex flex-wrap list-none">
1186                                      </ul>
1187      </div>
1188          </div>
1189        <div class="re
1189lative | m-flex m-flex-column m-gap-s2 | w100">
1190      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1191                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://www.zebulonregie.fr/">Zebulon</a></h4>
1192                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1193        <li><span class="visually-hidden">Mission :</span> site web                & design                </li>
1194              </ul>
1195            </div>
1196            <div class="tsv__content | flex flex-wrap space-between miw100">
1197                <details class="font-small" name="projet">        
1198          <summary>Plus d'informations</summary>
1199          <p>Conception d’un web design et intégration des maquettes dans le CMS Kirby.</p>        </details>
1200                <ul class="tsv__info | flex flex-wrap list-none">
1201                                      </ul>
1202      </div>
1203          </div>
1204        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1205      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1206                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://commown.coop/">Commown</a></h4>
1207                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1208        <li><span class="visually-hidden">Mission :</span> accompagnement                & seo                </li>
1209              </ul>
1210            </div>
1211            <div class="tsv__content | flex flex-wrap space-between miw100">
1212                <details class="font-small" name="projet">        
1213          <summary>Plus d'informations</summary>
1214          <p>Accompagnement pour la refonte du site de Commown pour les questions de référencement, de suivi de trafic avec Matomo et d'écoconception avec Gauthier Roussilhe (design et écoconception) et Timothée Goguely (conception graphique et développement).</p>        </details>
1215                <ul class="tsv__info | flex flex-wrap list-none">
1216                                      </ul>
1217      </div>
1218          </div>
1219        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1220      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1221                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://fairtec.io/">Fair Tec</a></h4>
1222                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1223        <li><span class="visually-hidden">Mission :</span> accompagnement                </li>
1224              </ul>
1225            </div>
1226            <div class="tsv__content | flex flex-wrap space-between miw100">
1227                <details class="font-small" name="projet">        
1228          <summary>Plus d'informations</summary>
1229          <p>Accompagnement pour la création du site de Fair✦TEC pour les questions de référencement et de structure du site avec Gauthier Roussilhe (design et écoconception) et Timothée Goguely (conception graphique).</p>        </details>
1230                <ul class="tsv__info | flex flex-wrap list-none">
1231                                      </ul>
1232      </div>
1233          </div>
1234        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1235      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1236                <h4 class="project__heading font-base">GIZ</h4>
1237                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1238        <li><span class="visually-hidden">Mission :</span> site web                & design                </li>
1239                <li>[Hors-ligne]</li>
1240              </ul>
1241            </div>
1242            <div class="tsv__content | flex flex-wrap space-between miw100">
1243                <details class="font-small" name="projet">        
1244          <summary>Plus d'informations</summary>
1245          <p>Réalisation d'une base documentaire écoconçue pour partager des ressources sur l'efficacité énergétique et les énergies renouvelables au Maroc. Nous avons aussi réalisé deux présentations sur le numérique durable pour les employés de la GIZ Maroc. Le site est désormais hors-ligne, le projet ayant évolué, le site n'était plus nécessaire.</p>        </details>
1246                <ul class="tsv__info | flex flex-wrap list-none">
1247                                      </ul>
1248      </div>
1249          </div>
1250        </div> <!-- end of block projects -->
1251  </section> <!-- end of year -->
1252 
1253  <section class="yearlist projects__list | m-flex m-flex-column flex flex-row align-start">
1254    <h3 class="h5-like lh font-brand">2020</h3>
1255    <div class="yearlist__container projects-list__container | m-flex m-flex-column m-gap-base gap-l w100">
1256        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1257      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1258                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://hameaux-legers.org/">Hameaux Légers</a></h4>
1259                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1260        <li><span class="visually-hidden">Mission :</span> accompagnement                </li>
1261              </ul>
1262            </div>
1263            <div class="tsv__content | flex flex-wrap space-between miw100">
1264                <details class="font-small" name="projet">        
1265          <summary>Plus d'informations</summary>
1266          <p>Accompagnement pour le développement d’un site sur le CMS Kirby.</p>        </details>
1267                <ul class="tsv__info | flex flex-wrap list-none">
1268                                      </ul>
1269      </div>
1270          </div>
1271        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1272      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1273                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://snop-archi.com/">Snop</a></h4>
1274                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1275        <li><span class="visually-hidden">Mission :</span> site web                & design                </li>
1276              </ul>
1277            </div>
1278            <div class="tsv__content | flex flex-wrap space-between miw100">
1279                <details class="font-small" name="projet">        
1280          <summary>Plus d'informations</summary>
1281          <p>Dagmara, ancienne membre de Pikselkraft, est également une architecte qui conçoit des bâtiments naturels et passifs. Dès que possible, elle choisit des techniques qui utilisent des matériaux naturels et peu transformés, comme la paille ou l'argile. Son site web de portfolio avait pour but de refléter ses valeurs et être aussi peu énergivore.</p>        </details>
1282                <ul class="tsv__info | flex flex-wrap list-none">
1283                                      </ul>
1284      </div>
1285          </div>
1286        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1287      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1288                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://www.giz.de/en/fr/maroc">Comment rendre le digital plus durable ?</a></h4>
1289                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1290        <li><span class="visually-hidden">Mission :</span> conférence                </li>
1291              </ul>
1292            </div>
1293            <div class="tsv__content | flex flex-wrap space-between miw100">
1294                <details class="font-small" name="projet">        
1295          <summary>Plus d'informations</summary>
1296          <p>
1296Pour GIZ Énergie Maroc (en ligne)</p>        </details>
1297                <ul class="tsv__info | flex flex-wrap list-none">
1298                                      </ul>
1299      </div>
1300          </div>
1301        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1302      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1303                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://www.giz.de/en/fr/maroc">Comment rendre le digital plus durable ?</a></h4>
1304                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1305        <li><span class="visually-hidden">Mission :</span> conférence                </li>
1306              </ul>
1307            </div>
1308            <div class="tsv__content | flex flex-wrap space-between miw100">
1309                <details class="font-small" name="projet">        
1310          <summary>Plus d'informations</summary>
1311          <p>Pour GIZ Énergie Maroc (en ligne)</p>        </details>
1312                <ul class="tsv__info | flex flex-wrap list-none">
1313                                      </ul>
1314      </div>
1315          </div>
1316        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1317      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1318                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://www.bhallot.eu/">Bhallot</a></h4>
1319                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1320        <li><span class="visually-hidden">Mission :</span> accompagnement                & audit                </li>
1321              </ul>
1322            </div>
1323            <div class="tsv__content | flex flex-wrap space-between miw100">
1324                <details class="font-small" name="projet">        
1325          <summary>Plus d'informations</summary>
1326          <p>Audit et optimisation d'un site WordPress dans le but de réduire le poids des pages.</p>        </details>
1327                <ul class="tsv__info | flex flex-wrap list-none">
1328                                      </ul>
1329      </div>
1330          </div>
1331        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1332      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1333                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="/forge/formation-numerique-responsable">Spotlight : Le numérique responsable, pour un futur numérique souhaitable</a></h4>
1334                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1335        <li><span class="visually-hidden">Mission :</span> conférence                </li>
1336              </ul>
1337            </div>
1338            <div class="tsv__content | flex flex-wrap space-between miw100">
1339                <details class="font-small" name="projet">        
1340          <summary>Plus d'informations</summary>
1341          <p>Pour Makesense (en ligne)</p>        </details>
1342                <ul class="tsv__info | flex flex-wrap list-none">
1343                                      </ul>
1344      </div>
1345          </div>
1346        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1347      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1348                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://www.intersections-coop.fr">Intersections</a></h4>
1349                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1350        <li><span class="visually-hidden">Mission :</span> site web                & design                </li>
1351              </ul>
1352            </div>
1353            <div class="tsv__content | flex flex-wrap space-between miw100">
1354                <details class="font-small" name="projet">        
1355          <summary>Plus d'informations</summary>
1356          <p>Réalisation d'un site vitrine écoconçue pour partager les valeurs et les projets d'un bureau d'études engagé dans la construction vernaculaire avec des matériaux bio-sourcés et géo-sourcés.</p>        </details>
1357                <ul class="tsv__info | flex flex-wrap list-none">
1358                                      </ul>
1359      </div>
1360          </div>
1361        </div> <!-- end of block projects -->
1362  </section> <!-- end of year -->
1363 
1364  <section class="yearlist projects__list | m-flex m-flex-column flex flex-row align-start">
1365    <h3 class="h5-like lh font-brand">2019</h3>
1366    <div class="yearlist__container projects-list__container | m-flex m-flex-column m-gap-base gap-l w100">
1367        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1368      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1369                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://lowtechlab.org/">Low Tech Lab</a></h4>
1370                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1371        <li><span class="visually-hidden">Mission :</span> accompagnement                & audit                </li>
1372              </ul>
1373            </div>
1374            <div class="tsv__content | flex flex-wrap space-between miw100">
1375                <details class="font-small" name="projet">        
1376          <summary>Plus d'informations</summary>
1377          <p>Accompagnement pour la refonte du site du Low-tech Lab sur les questions de référencement, de suivi de trafic avec Matomo et de structure du site avec Gauthier Roussilhe (design et écoconception) et Sylvain Julé (conception graphique et développement).</p>        </details>
1378                <ul class="tsv__info | flex flex-wrap list-none">
1379                                      </ul>
1380      </div>
1381          </div>
1382        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1383      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1384                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://www.thegreenroom.fr/">The Greenroom</a></h4>
1385                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1386        <li><span class="visually-hidden">Mission :</span> site web                & design                </li>
1387              </ul>
1388            </div>
1389            <div class="tsv__content | flex flex-wrap space-between miw100">
1390                <details class="font-small" name="projet">        
1391          <summary>Plus d'informations</summary>
1392          <p>
1392Conception d'un site écoconçu pour promouvoir des stratégies créatives pour le changement environnemental et sociétal dans le secteur de la musique.</p>        </details>
1393                <ul class="tsv__info | flex flex-wrap list-none">
1394                                      </ul>
1395      </div>
1396          </div>
1397        </div> <!-- end of block projects -->
1398  </section> <!-- end of year -->
1399 
1400  <section class="yearlist projects__list | m-flex m-flex-column flex flex-row align-start">
1401    <h3 class="h5-like lh font-brand">2018</h3>
1402    <div class="yearlist__container projects-list__container | m-flex m-flex-column m-gap-base gap-l w100">
1403        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1404      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1405                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://lofotenseaweed.no/">Lofoten Seaweed</a></h4>
1406                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1407        <li><span class="visually-hidden">Mission :</span> accompagnement                & audit                </li>
1408              </ul>
1409            </div>
1410            <div class="tsv__content | flex flex-wrap space-between miw100">
1411                <details class="font-small" name="projet">        
1412          <summary>Plus d'informations</summary>
1413          <p>Audit et optimisation d'un site WordPress. Puis accompagnement en référencement.</p>        </details>
1414                <ul class="tsv__info | flex flex-wrap list-none">
1415                                      </ul>
1416      </div>
1417          </div>
1418        <div class="relative | m-flex m-flex-column m-gap-s2 | w100">
1419      <div class="m-flex m-flex-column flex-wrap flex-row space-between d-align-center m-gap-s2 gap-l">
1420                <h4 class="project__heading | flex-1-1-0 | font-base"><a href="https://www.animafac.net/">Animafac</a></h4>
1421                    <ul class="tsv__info | m-flex flex flex-wrap list-none font-small">
1422        <li><span class="visually-hidden">Mission :</span> formation                & écriture                </li>
1423              </ul>
1424            </div>
1425            <div class="tsv__content | flex flex-wrap space-between miw100">
1426                <details class="font-small" name="projet">        
1427          <summary>Plus d'informations</summary>
1428          <p>Rédaction d’un guide sur la protection des données.</p>        </details>
1429                <ul class="tsv__info | flex flex-wrap list-none">
1430                                      </ul>
1431      </div>
1432          </div>
1433        </div> <!-- end of block projects -->
1434  </section> <!-- end of year -->
1435</div>
1436        </div>
1437      </div>
1438    </div>
1439  </div>
1440  
1441</div>
1442<a href="#anchor-top" id="back-to-top" aria-labelledby="back-up" class="back-to-top | h3-like no-underline">
1443  <span id="back-up" hidden="">Retour en haut de la page</span>
1444  <span>⇧</span>
1445</a>
1446</main>
1447<footer id="footer" class="footer | relative mt-section | asterism border-top border-top-hover" role="contentinfo">
1448
1449  <div class="footer__container | relative m-flex m-flex-column flex flex-row flex-wrap gap-l mw100 | mauto">	
1450 
1451    <aside class="metadata | flex50 pa-encart | font-small square-hover border border-hover">
1452  <h2 class="h5-like miw100">Colophon / Métadata</h2>
1453  <div class="footer__mention | mt-base | flow font-small">
1454  	<p>Ce site a été réalisé en suivant les principes de l'écoconception et de l'accessibilité web, sans outils provenant des GAFAM.</p>  </div>
1455  <div class="metadata__container | fit-content flex flex-wrap relative">
1456    <ul class="mt-base | list-none list-square font-italic font-small">
1457      <li>Par Pikselkraft <span aria-hidden="true">☙</span> Bourgogne, fait avec <a href="https://getkirby.com/">Kirby CMS</a> et édité dans <a href="https://www.vim.org/">VIM</a>.</li>
1458      <li>Dernière modification : <time datetime="2026-09-16" pubdate="pubdate">16/09/2026</time></li> 
1459            <li>Première mise en ligne : <time datetime="1774708200">28/03/2026</time></li>
1460                  <li>Permalien : https://pikselkraft.fr/forge</li>
1461            <li><p>Typographies : Bonto par <a href="https://blazetype.eu/typefaces/bonto">Victor Montet (Blaze Type)</a> et Paysage par <a href="https://www.tunera.xyz/fonts/paysage/">Anton Moglia (Tunera)</a>. Icônes par Pixelarticons ou fait-maison.</p></li>
1462                                <li><a href="mailto:&#x63;&#x6f;&#x6e;&#x74;&#x61;&#x63;&#x74;&#x40;&#x70;&#x69;&#x6b;&#x73;&#x65;&#x6c;&#x6b;&#x72;&#x61;&#x66;&#x74;&#x2e;&#x66;&#x72;">Me contacter</a></li>
1463            <li lang="en">English version: please contact me to ask</li>
1464    </ul>
1465  </div>
1466</aside>
1467
1468
1469    <div class="footer__links | flex50 flex-column pa-encart | border-solid border-hover">
1470      <h2 class="h5-like miw100">Liens utiles</h2>
1471            <nav class="footer__nav | mt-base" aria-label="Liens du pied de page" role="navigation">
1472      	<ul class="m-flex m-flex-wrap m-gap-base gap-s | list-none">
1473          <li class="footer-nav__page"><a class="font-small no-underline" href="/plan-du-site">Plan du site</a></li><li class="footer-nav__page"><a class="font-small no-underline" href="/mentions-legales">Mentions legales</a></li><li class="footer-nav__page"><a class="font-small no-underline" href="/accessibilite">Accessibilite</a></li><li class="footer-nav__page"><a class="font-small no-underline" href="/ecoconception">Ecoconception</a></li><li class="footer-nav__page"><a class="font-small no-underline" href="/en-ce-moment">En ce moment</a></li><li class="footer-nav__page"><a class="font-small no-underline" href="/colophon">Colophon</a></li><li class="footer-nav__page"><a class="font-small no-underline" href="/meshtastic">Meshtastic</a></li> 
1474      	</ul>
1475      </nav>
1476  	        <h2 class="h5-like | miw100 mt-section">Me suivre</h2>
1477      <nav class="footer__nav | mt-base" role="navigation" aria-label="Réseaux sociaux et RSS">
1478      	<ul class="m-flex m-flex-wrap gap-base | list-none">
1479          <li class="fit-content">
1480            <a class="no-underline" title="suivre le flux RSS" href="https://pikselkraft.fr/rss"><svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="1.5" viewB
1480ox="0 0 23.558 23.558">
1481  <g style="fill:currentColor" transform="translate(1668.924 9081.934)scale(.42833)">
1482    <rect width="55" height="5.5" x="-3896.353" y="-21203.135" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1"/>
1483    <rect width="55" height="5.5" x="-3896.353" y="-21153.635" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1"/>
1484    <rect width="5.5" height="44" x="-3846.853" y="-21197.635" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1"/>
1485    <rect width="5.5" height="44" x="-3896.353" y="-21197.635" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1"/>
1486    <rect width="5.5" height="5.5" x="-3882.603" y="-21167.385" class="fills" rx="0" ry="0" style="fill:#c8553d;fill-opacity:1"/>
1487    <rect width="11" height="5.5" x="-3882.603" y="-21178.385" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1"/>
1488    <rect width="16.5" height="5.5" x="-3882.603" y="-21189.385" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1"/>
1489    <rect width="5.5" height="11" x="-3871.603" y="-21172.885" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1"/>
1490    <rect width="5.5" height="16.5" x="-3860.603" y="-21178.385" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1"/>
1491    <rect width="5.5" height="5.5" x="-3866.103" y="-21183.885" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1"/>
1492  </g>
1493</svg>
1494</a>
1495          </li>
1496          <li class="fit-content">
1497            <a class="no-underline" title="me suivre sur mastodon" href="https://mastodon.design/@pikselkraft"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7 2v2h10V2zm10 2v2h2V4zm2 2v8h2V6zm0 8h-8v2h8zm-8 2H9v2h2zm0 2v2h2v-2zm0 2H7v2h4zm-4 0v-2H5v2zm-2-2V6H3v12zM5 6h2V4H5zm4 0v2h2V6zm2 2v2h2V8zm2 0h2V6h-2zm2 0v4h2V8zM9 8H7v4h2z"/></svg></a>
1498          </li>
1499          <li class="facist-network fit-content relative">
1500            <p class="relative tooltip" title="J'ai supprimé Twitter/X, facisme et climatoscepticisme, je ne le sentais pas trop" href="https://mastodon.design/@pikselkraft"><svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="1.5" viewBox="0 0 23.735 23.735">
1501  <rect width="6.9" height="6.875" x="-4150.1" y="-21203.135" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1502  <rect width="6.9" height="6.875" x="-4150.1" y="-21196.26" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1503  <rect width="6.9" height="6.875" x="-4143.2" y="-21189.385" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1504  <rect width="6.9" height="6.875" x="-4136.3" y="-21182.51" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1505  <rect width="6.9" height="6.875" x="-4129.4" y="-21175.635" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1506  <rect width="6.9" height="6.875" x="-4136.3" y="-21168.76" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1507  <rect width="6.9" height="6.875" x="-4143.2" y="-21161.885" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1508  <rect width="6.9" height="6.875" x="-4150.1" y="-21155.01" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1509  <rect width="6.9" height="6.875" x="-4122.5" y="-21168.76" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1510  <rect width="6.9" height="6.875" x="-4115.6" y="-21161.885" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1511  <rect width="6.9" height="6.875" x="-4108.7" y="-21155.01" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1512  <rect width="6.9" height="6.875" x="-4101.8" y="-21155.01" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1513  <rect width="6.9" height="6.875" x="-4101.8" y="-21161.885" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1514  <rect width="6.9" height="6.875" x="-4108.7" y="-21168.76" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1515  <rect width="6.9" height="6.875" x="-4115.6" y="-21175.635" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1516  <rect width="6.9" height="6.875" x="-4122.5" y="-21182.51" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1517  <rect width="6.9" height="6.875" x="-4115.6" y="-21189.385" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1518  <rect width="6.9" height="6.875" x="-4115.6" y="-21189.385" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1519  <rect width="6.9" height="6.875" x="-4108.7" y="-21196.26" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1520  <rect width="6.9" height="6.875" x="-4101.8" y="-21203.135" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1521  <rect width="6.9" height="6.875" x="-4129.4" y="-21189.385" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1522  <rect width="6.9" height="6.875" x="-4136.3" y="-21196.26" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1523  <rect width="6.9" height="6.875" x="-4143.2" y="-21203.135" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1" transform="translate(1740.823 8892.821)scale(.4194)"/>
1524  <path d="m5.605 5.47 12.472 12.472.05-.052" style="fill:currentColor;fill-opacity:1;stroke:#c8553d;stroke-width:2.78982;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
1525  <path d="M18.128 5.47 5.656 17.943l-.05-.052" style="fill:currentColor;fill-opacity:1;stroke:#c8553d;stroke-width:2.78982;stroke-dasharray:none;stroke-opacity:1"/>
1526</svg>
1527</p>
1528          </li>
1529          <li class="facist-network fit-content relative">
1530            <p class="relative tooltip" title="J'ai supprimé LinkedIn, le développement personnel a ses limites" href="https://mastodon.design/@pikselkraft"><svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="1.5" viewB
1530ox="0 0 23.735 23.735">
1531  <rect width="2.607" height="2.607" x="7.966" y=".177" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1532  <rect width="2.607" height="2.607" x="5.359" y=".177" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1533  <rect width="2.607" height="2.607" x="13.18" y=".177" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1534  <rect width="2.607" height="2.607" x="15.787" y=".177" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1535  <rect width="2.607" height="2.607" x="18.394" y=".177" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1536  <rect width="2.607" height="2.607" x="21.001" y="2.784" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1537  <rect width="2.607" height="2.607" x="18.394" y="21.033" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1538  <rect width="2.607" height="2.607" x="21.001" y="5.39" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1539  <rect width="2.607" height="2.607" x=".144" y="5.39" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1540  <rect width="2.607" height="2.607" x=".144" y="2.784" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1541  <rect width="2.607" height="2.607" x="2.751" y=".177" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1542  <rect width="2.607" height="2.607" x=".144" y="7.997" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1543  <rect width="2.607" height="2.607" x=".144" y="10.605" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1544  <rect width="2.607" height="2.607" x=".144" y="13.212" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1545  <rect width="2.607" height="2.607" x=".144" y="15.819" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1546  <rect width="2.607" height="2.607" x=".144" y="18.426" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1547  <rect width="2.607" height="2.607" x="2.751" y="21.033" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1548  <rect width="2.607" height="2.607" x="5.359" y="21.033" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1549  <rect width="2.607" height="2.607" x="7.966" y="21.033" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1550  <rect width="2.607" height="2.607" x="10.573" y="21.033" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1551  <rect width="2.607" height="2.607" x="13.18" y="21.033" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1552  <rect width="2.607" height="2.607" x="15.787" y="21.033" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1553  <rect width="2.607" height="2.607" x="21.001" y="18.426" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1554  <rect width="2.607" height="2.607" x="21.001" y="15.819" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1555  <rect width="2.607" height="2.607" x="21.001" y="13.212" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1556  <rect width="2.607" height="2.607" x="21.001" y="10.605" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1557  <rect width="2.607" height="2.607" x="21.001" y="7.997" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1558  <rect width="2.607" height="2.607" x="5.359" y="13.212" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1559  <rect width="2.607" height="2.607" x="5.359" y="10.605" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1560  <rect width="2.607" height="2.607" x="5.359" y="5.39" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1561  <rect width="2.607" height="2.607" x="10.573" y="15.819" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1562  <rect width="2.607" height="2.607" x="10.573" y="13.212" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1563  <rect width="2.607" height="2.607" x="15.787" y="13.212" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1564  <rect width="2.607" height="2.607" x="10.573" y="10.605" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1565  <rect width="2.607" height="2.607" x="13.18" y="10.605" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1566  <rect width="2.607" height="2.607" x="15.787" y="15.819" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1567  <rect width="2.607" height="2.607" x="5.359" y="15.819" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1568  <rect width="2.607" height="2.607" x="10.573" y=".177" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1569  <rect width="2.607" height="2.607" x="2.751" y=".177" class="fills" rx="0" ry="0" style="fill:currentColor;fill-opacity:1;stroke-width:.639922"/>
1570  <path d="M4.459 4.773 19.23 19.544l.06-.06" style="fill:currentColor;fill-opacity:1;stroke:#c8553d;stroke-width:2.36597263;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"/>
1571  <path d="M19.29 4.773 4.52 19.544l-.06-.06" style="fill:currentColor;fill-opacity:1;stroke:#c8553d;stroke-width:2.36597263;stroke-dasharray:none;stroke-opacity:1"/>
1572</svg>
1573</p>
1574          </li>
1575        </ul>
1576      </nav>
1577    </div>
1578  </div>
1579
1580<pre class="footer__ascii ascii" aria-hidden="true">
1581                                                                                                                              ,--. 
1582 ,'-.                                                                                      ,'-.         ,'-.                 (    )
1583(____".                                                        ,'-.                       (____".      (____".'-.             `--' 
1584              ⏞⏞             ,'-.                             (____".      ⏞⏞                               (____".                
1585                            (____".                                                                                                               
1586      ⏞  ⏞                                 ⏞⏞  ⏞                            
1587                   ,-.                                           __                            __     ⏞⏞                                     
1588        _______⋒__/___\                   ____________    ___⋒__/__\   ~~~~~~                _/__\_____                               ~~~~~~  
1589       /  ~~~~~~~~~~~~~\   ~~~~~~        / `    `     \  /~~~~~~~~~~\ /  ~^  \              /~~~~~~~~~~\                 ~~~~~~      /  ~^  \             
1590      /  ❦❦❦❦❦❦❦❦❦❦❦❦❦  \ /  ~^  \      /    `     `   \/ ❦❦❦❦❦❦❦❦❦❦ \^ ~~^`  \            / ❦❦❦❦❦❦❦❦❦❦ \               /  ~^  \    / ^ ~~^` \   
1591,'`-./'`❦❦❦❦❦❦❦❦❦❦❦❦❦❦❦  \ ^ ~~^` \___~^` ^^^~) ~  ~~^^/. ❦❦❦❦❦❦❦❦❦❦  \^- ~ ^ ~~~^` ^^^~) /. ❦❦❦❦❦❦❦❦❦❦  \~  ~~^^^- ~ ^/ ^ ~~^` \ ~~     ~    \             
1592-  ~/  ❦❦❦❦❦❦❦❦❦❦❦❦❦❦❦❦❦  \   `  `        `               ❦❦❦❦❦❦❦❦❦❦                         ❦❦❦❦❦❦❦❦❦❦        ; - _                    `   `      
1593                           `        `_       ^     ·       ~ ^ -.   ~ `  .  '^^~~^  ; - _                   :      ; _   ` "'    -  : .       
1594_ `  ^ ¨  ·  _ -  "      ^      ` *     -     ; - _                                :      ; _   ` "'    -  : \      ` ^^^  ^^    ^^      ^~.  `  
1595                                                     ; - _                              ; - _              :      ; _   ` "'    -  : .            
1596     `-`^ -      " ;  +-----------------------+    :      ; _   ` "'    -  : .        :  `   ; _   ` "'    \      ` ^^^  ^^    ^^      ^~-  : .   
1597 -       . /)       ; | Merci de votre visite |    \      ` ^^^  ^^    ^^      ^~     \      ` ^^^  ^^    ^^  ; - _                             ^~
1598   ^           '      +-----------------------+             `       _Q             `       `        _Q      :      ; _   ` "'    -  : .   
1599         |         `  `    |               |          `    `       /_\)      `        `      `     /_\)     \      ` ^^^  ^^    ^^      ^~
1600._ `  ^ ¨  ·  _ -  "       |, \,,,;/. ;.;, |,,,,;                __O|/O_                 `       __O|/O_
1601 ._ `  ^ ¨  ·  _ -     `` - _   -              :      ; _   ` "'    -  : .       ,.      _      ,.    ,.     .-__ ¨¨          
1602</pre>
1603<nav aria-label="Webring katzele" class="katzele tc mt-l">
1604  <a href="http://bebou.netlib.re/cgi-bin/webring.cgi?prev&amp;from=https://www.pikselkraft.com" rel="prev" title="Précédant">←</a>
1605  <a href="http://bebou.netlib.re/webring.txt">webring katzele</a>
1606  <a href="http://bebou.netlib.re/cgi-bin/webring.cgi?random" title="Aléatoire">⤨</a>
1607  <a href="http://bebou.netlib.re/cgi-bin/webring.cgi?next&amp;from=https://www.pikselkraft.com" rel="next" title="Suivant">→</a>
1608</nav>
1609<script type="text/javascript" src="https://encemoment.site/script.js" defer></script>
1609
1610<now-webring><a href="https://encemoment.site">Webring “En ce moment”</a></now-webring>
1611<nav aria-label="Liens vers l'indieweb" class="m-flex justify-content-center tc mt-base">
1612<a href="https://powrss.com/feeds/493"><img class="grayscale" src="https://pikselkraft.fr/assets/illus/ecosysteme/powrss-88-31.gif" alt="Logo de powRSS un agrégateur de flux RSS" loading="lazy"></a>
1613<a href="http://validator.w3.org/feed/check.cgi?url=https%3A//pikselkraft.fr/rss" title="Lien vers le checker RSS du W3C"><img class="grayscale" src="https://pikselkraft.fr/assets/illus/ecosysteme/w3c-rss.png" alt="Logo du W3C pour valider un RSS" /></a>
1614</nav>
1615</footer>
1616<script defer src="https://pikselkraft.fr/assets/js/index.js"></script>
1616</body>
1617</html> 

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.