davidbgk
/
larlet-fr-david

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="fr">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Envie — David Larlet</title>
<meta name="description" content="Dans l’un de mes carnets de voyage, j’écris ces lignes : « Je vois la civilisation comme une feuille qui vient de se détacher de sa branche. Elle virevolte, elle croit voler, elle se croit libre, affranchie de son socle. Puis elle s’écrase sur le sol et s’aperçoit que depuis tout ce temps, elle était déjà morte. »">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
<header>
  <h1>Envie</h1>
</header>
<nav>
  <p class="center">
    <a rel="prev" href="/david/2022/01/19/" title="Publication précédente : Négatif">← Précédent</a> •
    <nobr>
      <a href="/david/" title="Aller à l’accueil"
        ><svg class="icon icon-home">
          <use
            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
          ></use>
        </svg>
        Accueil</a
      >
    </nobr>
    •
    <nobr>
      <a href="/david/recherche/" title="Aller à la page de recherche"
        ><svg class="icon icon-search">
          <use
            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-search"
          ></use>
        </svg>
        Recherche</a
      >
    </nobr>
     • <a rel="next" href="/david/2022/03/04/" title="Publication suivante : Régime">Suivant →</a>
  </p>
</nav>
<hr>


<blockquote>
<p>Dans l’un de mes carnets de voyage, j’écris ces lignes&nbsp;: «&nbsp;Je vois la civilisation comme une feuille qui vient de se détacher de sa branche. Elle virevolte, elle croit voler, elle se croit libre, affranchie de son socle. Puis elle s’écrase sur le sol et s’aperçoit que <mark>depuis tout ce temps, elle était déjà morte.</mark>&nbsp;»</p>
<p>Je finis par être convaincu que l’humanité fonce droit dans le mur, emportant avec elle une immense partie du vivant. Prendre la mesure de la catastrophe, à savoir que le monde est en train de mourir, m’a tout d’abord assommé, puis désespéré, et puis finalement ça m’a remis en capacité d’agir. Les seuls moments où je parviens à m’apaiser sont ceux passés en&nbsp;expédition.</p>
<p>Alors je repars encore et&nbsp;encore.</p>
<p><cite><em>Comment survivre à l’attaque d’un ours et autres aventures</em>, Eliott&nbsp;Schonfeld</cite></p>
</blockquote>
<p>J’aime bien me rendre compte d’à quel point l’envie décroit avec le temps. Si je n’écris pas mon cheminement (de pensées) dans la foulée d’une sortie en forêt, je sais que ça n’aura pas lieu. Les émotions du moment s’évanouissent, les anecdotes deviennent fades, les réflexions se noircissent ou se teintent d’une sur-interprétation. Comme si elles n’étaient plus… <em>en vie</em>.</p>
<hr />
<p>Lorsque je partage des <a href="https://media.larlet.fr/2009--japon-01.html">photos</a> <a href="https://media.larlet.fr/2011--japon-01.html">du</a> <a href="https://media.larlet.fr/2012--japon-01.html">Japon</a> ou des <a href="https://media.larlet.fr/2021--videos-01.html">vidéos</a> <a href="https://media.larlet.fr/2021--animal-02.html">de</a> <a href="https://media.larlet.fr/2021--vegetal-14.html">la</a> <a href="https://media.larlet.fr/2021--paysages-15.html">forêt</a> <a href="https://media.larlet.fr/2021--rivieres-07.html">canadienne</a>, à qui est-ce que je donne envie et quel va être l’impact de cet envie sur une action future — potentiellement néfaste à un environnement dont j’aspire à la préservation&#8239;? Qui suis-je pour donner des leçons d’exotisme après en avoir tant bénéficié&#8239;? Rédemption mal&nbsp;placée.</p>
<hr />
<p>J’essaye de créer (faute de constater) ce qui pourrait remplacer cette routine d’écriture quotidienne qui était si bien ancrée. L’envie est toujours là mais le sujet n’est plus. Ou il faudrait que j’aille le chercher loin, peut-être trop. Ma mère m’a suggéré d’écrire (publier&#8239;?) mes aventures. Et il faut toujours écouter sa&nbsp;maman.</p>
<p>C’était un des fils tirés lors de ma dernière retraite dans un petit refuge que j’affectionne. Idéalement depuis une résidence d’écriture en pleine forêt. Une forêt d’écriture&#8239;? L’arbre qui cache l’écrit&nbsp;vain.</p>
<hr />
<p>En ce moment, j’essaye de laisser passer le bruit des klaxons plus ou moins numériques et de me concentrer sur la sphère proche. Et le code aussi. J’aime lorsque la pression monte juste avant de se mettre à agencer de petites briques. Le besoin est connu, la façon d’y aller reste à explorer et cet instant suspendu juste avant de faire le premier pas de ce nouveau voyage est empreint d’une forme de prise de recul, quasi spirituelle, forcément introspective. Est-ce que je vais vraiment emporter tout cela dans mon sac&#8239;? Quelles bibliothèques viennent palier mes peurs&#8239;? Jusqu’où accepter l’aventure, et avec qui&#8239;? Mais surtout&nbsp;: suis-je encore prêt à&nbsp;apprendre&#8239;?</p>
<h2 id="en-vitesse">En vitesse <a href="#en-vitesse" title="Ancre vers cette partie">#</a></h2>
<blockquote>
<p>💚 écrire chaque jour un poème à partir des mots composant votre grille. Autre contrainte&nbsp;: le poème est composé d’autant de vers qu’il a fallu de coups pour trouver le mot du jour. Enfin, il faut bien évidemment attendre le lendemain pour partager son œuvre, afin de ne pas divulgâcher la solution&#8239;! <mark>J’ai décidé de nommer cette forme le pécatrix</mark>, en espérant qu’elle soit appropriée par d’autres&nbsp;(vous&#8239;?)</p>
<p><cite><em><a href="https://cailloux.substack.com/p/96-rever-sincerement">cailloux n°96&nbsp;: rêver sincèrement</a></em>&nbsp;(<a href="/david/cache/2022/94210cf35e7b73fcf5d3ab3c20acc1c6/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>📱 Mobile Depression&nbsp;Device</p>
<p><cite><em><a href="https://buttondown.email/robinrendle/archive/children-of-the-hyperlink/">★ Children of the Hyperlink</a></em>&nbsp;(<a href="/david/cache/2022/d4ae86dd75af3abc8b65953e7d3ca832/">cache</a>)</cite></p>
</blockquote>

<blockquote>
<p>🏴 Le philosophe et psychanalyste Miguel Benasayag, ancien guérillero en Argentine et défenseur de ces «&nbsp;nouvelles radicalités&nbsp;», nous disait en 2016&nbsp;: «&nbsp;Il faut abandonner l’idée de lutte finale, de société de justice. Ça ne produit que de la déception — ou de la dictature, lorsque les “justiciers” triomphent.&nbsp;» Avant de préciser&nbsp;: «&nbsp;<mark>Seules les luttes décentralisées et bordéliques</mark> — à l’instar du combat des femmes, des indigènes, des Noirs ou des homosexuels —, qui visaient le changement ici et maintenant et non le pouvoir, ont pu changer le&nbsp;monde.&nbsp;»</p>
<p><cite><em><a href="https://www.revue-ballast.fr/que-faire/">BALLAST • QUE FAIRE&#8239;?</a></em>&nbsp;(<a href="/david/cache/2022/0a53d8dedc371884d16f45bcb349b418/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>🔥 <mark>Alcohol burners like these are great for tents</mark> because if they tip over, they self-extinguish. You can fill them with 70% rubbing alcohol and they’ll heat a small space, and if running on denatured alcohol, they can be used to cook with. They won’t do you much good outdoors unless you have significant wind protection, as the tiny jet is likely to blow&nbsp;out.</p>
<p><cite><em><a href="https://hackaday.com/2022/01/06/7-tent-heater-provides-comfort-on-a-budget/">$7&nbsp;Tent Heater Provides Comfort On A Budget</a></em>&nbsp;(<a href="/david/cache/2022/a4f881156c5d4841f7362f94b51d10b7/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>💭 I started asking myself questions like — “Even if the projects I’m doing succeeded beyond my wildest expectations, how would it affect people? <mark>Whose lives would be improved and how would they be improved?</mark>” […] I began to realize that my work wouldn’t help people be happier in ways that felt meaningful to me. Something deep in my soul seemed completely&nbsp;dissatisfied.</p>
<p><cite><em><a href="http://glench.com/WhyIQuitTechAndBecameATherapist/">Why I Quit Tech and Became a Therapist</a></em>&nbsp;(<a href="/david/cache/2022/0c0894907925eae954987d98c9e8136b/">cache</a>)</cite></p>
</blockquote>

<blockquote>
<p>💰 Un budget contributif est un outil qui permet à un collectif d’organiser la rémunération des membres de manière&nbsp;transparente.</p>
<p><cite><em><a href="https://movilab.org/wiki/Coremuneration">Coremuneration - Movilab.org</a></em>&nbsp;(<a href="/david/cache/2022/8a9c9c7aa6a17b8203e2ee289a5e2ffa/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>👅 Buy it now, it’ll arrive at your door on a bike or a drone or robo-courier in 30&nbsp;minutes or less, this is good, you want your dinner, <mark>one-lick purchase</mark>, boom.</p>
<p><cite><em><a href="https://interconnected.org/home/2022/01/24/meme_meals">Who can be the Netflix of ghost kitchens?</a></em>&nbsp;(<a href="/david/cache/2022/622620656409b4f687cab890288a0a01/">cache</a>)</cite></p>
</blockquote>

<blockquote>
<p>✈️ C’est bien là que réside la principale surprise de ce document officiel&nbsp;: malgré les assurances données par les constructeurs et compagnies aériennes, <mark>il existerait donc une méthode permettant d’accéder aux systèmes les plus critiques de l’avion depuis la partie divertissement</mark>, placée par définition entre les mains des&nbsp;passagers.</p>
<p><cite><em><a href="https://www.silicon.fr/hacker-modifie-vol-dun-avion-systeme-de-divertissement-116431.html">Un hacker pirate le vol d’un avion depuis un siège passager</a></em>&nbsp;(<a href="/david/cache/2022/389205e96cefd5e4633c70f22d029e1b/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>💅 A redesigned user interface for&nbsp;Wikipedia</p>
<p><cite><em><a href="https://www.modernwiki.app/">Modern for&nbsp;Wikipedia</a></em></cite></p>
</blockquote>

<blockquote>
<p>🧠 La mémoire est une construction, et le numérique une base mobile de cette&nbsp;construction.</p>
<p><cite><em><a href="https://www.quaternum.net/2022/01/15/apercu-02/">Aperçu #02 - quaternum.net</a></em>&nbsp;(<a href="/david/cache/2022/5fc3445b27f0ee637d66035734c6bea6/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>📄 Resume screens are ridiculous. We look at this piece of paper and try to make a snap judgment about whether we should invest some time in an interview, or reject them out of hand. We’re not measuring someone’s suitability for the role; <mark>we’re measuring how well they write resumes.</mark> If we don’t take steps to anonymize the resume, we can easily end up <a href="https://hbswk.hbs.edu/item/minorities-who-whiten-job-resumes-get-more-interviews">making decisions shaped by unconscious bias</a>.</p>
<p><cite><em><a href="https://jacobian.org/2022/jan/6/wst-wrap-up/">Wrap Up and Q&amp;A - Jacob Kaplan-Moss</a></em>&nbsp;(<a href="/david/cache/2022/21c1a3b62ce222105d72ada4802bdd4e/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>🚢 a little research makes clear that in fact if you add up all the tonnage, something very close to <mark>forty percent of all the shipping on earth</mark> is just devoted to getting oil and coal and gas (and now some wood pellets) back and forth across the&nbsp;ocean.</p>
<p><cite><em><a href="https://billmckibben.substack.com/p/the-happiest-number-ive-heard-in">The happiest number I’ve heard in ages</a></em>&nbsp;(<a href="/david/cache/2022/20648a9bc173f75256ae9d5f196fd913/">cache</a>)</cite></p>
</blockquote>

<blockquote>
<p>🎥 Le principe&nbsp;: nous achetons les droits sur des films de cinéma sélectionnés parmi les meilleurs documentaires d’auteurs venant juste de finir leur exploitation en salles de cinéma. Nous vous les proposons et <mark>vous organisez votre festival à domicile.</mark> Des rencontres avec les auteur.e.s sont accessibles à tou.te.s par&nbsp;visio-conférence.</p>
<p><cite><em><a href="https://tenkchezlhabitant.fr/">Tënk chez&nbsp;l’Habitant</a></em></cite></p>
</blockquote>

<blockquote lang="en">
<p>✊ Large companies find HTML &amp; CSS frustrating “at scale” because the web is a fundamentally <mark>anti-capitalist mashup art experiment</mark>, designed to give consumers all the&nbsp;power.</p>
<p><cite><em><a href="https://twitter.com/TerribleMia/status/1198706002419310592">Sur twitter</a></em>, @TerribleMia</cite></p>
</blockquote>

<blockquote>
<p>🤗 Puis en relevant la tête, avec son grand sourire, elle me dit&nbsp;: “on fait équipe n’est-ce&nbsp;pas&#8239;?”.</p>
<p><cite><em><a href="https://oncletom.io/2022/01/30/faire-equipe/">☕️ Journal&nbsp;: Faire équipe</a></em>&nbsp;(<a href="/david/cache/2022/0d734a1e83d3188bb008a057aadd4a74/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>🤢 Scrolling is an interaction of the past; apps and websites are rapidly moving towards the idea of ‘<mark>scrollytelling</mark>’.</p>
<p><cite><em><a href="https://uxplanet.org/top-9-ux-trends-to-watch-ut-in-2022-9dfc1eeb25a8">Top 9&nbsp;UX Trends to Watch out in 2022</a></em>&nbsp;(<a href="/david/cache/2022/1ed0450ac39a1bbfebf1a6bbbe6f3532/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>✍️ Yet! When someone writes a blog post about my work, or sends me a kind email, or—on the rarest of occasions—when someone riffs on my work and remixes those ideas then, THEN, I feel as if my work <em>matters</em>. <mark>That it was all worthwhile.</mark> Even when someone is disagreeing with me, I get this warm, cuddly feeling that all of my work is connected into a bigger thing, an enormous hyperlinked tapestry that we’re (sorry in advance) weaving&nbsp;together.</p>
<p><cite><em><a href="https://buttondown.email/robinrendle/archive/signals/">⭕️ Signals • Buttondown</a></em>&nbsp;(<a href="/david/cache/2022/73c1cc8ed70f3b78bb9f8d2f108b7754/">cache</a>)</cite></p>
</blockquote>

<blockquote>
<p>✊ J’ai beaucoup de pensées décousues à ce sujet et je pourrais probablement écrire plusieurs longs essais sur le sujet si j’avais le temps et la foi en ma propre compréhension et autorité pour le faire. Pour aujourd’hui, <mark>je vais me contenter</mark> de partager mon expérience et quelques grands thèmes de questionnement que j’aimerais approfondir, sans ordre&nbsp;particulier</p>
<p><cite><em><a href="https://mtlcontreinfo.org/compte-rendu-de-voyage-le-samedi-5-fevrier-a-ottawa/">Compte-rendu de voyage&nbsp;: Le samedi 5&nbsp;février à Ottawa</a></em>&nbsp;(<a href="/david/cache/2022/7377c68e2b48f5c923542cefec391549/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>🤗 Designing human systems is different. Computers don’t have emotions; I don’t need to worry insulting the vast majority of S3 objects when I defensively check integrity every time. <mark>But humans are different;</mark> when we design a human system around uncommon cases, we do need to consider the ramifications on the majority. There are times – and this is one of them – where addressing outlandish behavior requires steps that are just&nbsp;unacceptable.</p>
<p><cite><em><a href="https://jacobian.org/2022/feb/14/that-wild-aam-story/">That Wild Ask A Manager Story</a></em>&nbsp;(<a href="/david/cache/2022/d9ff2d3ee678b7de12c1a4e6d521ca35/">cache</a>)</cite></p>
</blockquote>

<blockquote>
<p>🧑‍🔬 Des CSS sans classes (mais avec&nbsp;variables)&nbsp;:</p>
<ul>
<li><a href="https://simplecss.org/">Simple.css</a></li>
<li><a href="https://vladocar.github.io/Basic.css/">Basic.css</a></li>
<li><a href="https://newcss.net/">new.css</a></li>
<li><a href="https://watercss.kognise.dev/">Water.css</a></li>
<li><a href="https://alvaromontoro.github.io/almond.css/">Almond.css</a></li>
<li><a href="https://mblode.github.io/marx/">Marx</a>&nbsp;(forcément)</li>
</ul>
</blockquote>

<blockquote>
<p>Quand certains, isolés depuis près d’un an, souffrent de la solitude, d’autres, qui télétravaillent, dont les enfants suivent la classe à domicile, le tout sans leur réseau de soutien habituel, souffrent d’<em>aloneliness</em>&nbsp;: le sentiment de ne pas passer assez de temps seul. <mark>Il ne s’agit pas simplement d’une préférence pour la solitude</mark> mais bien du sentiment qui naît de l’écart entre la préférence subjective pour la solitude et le temps passé effectivement&nbsp;seul.</p>
<p><cite><em><a href="https://cailloux.substack.com/p/cailloux-n79-lasolitude">cailloux n°79&nbsp;: l’asolitude</a></em>&nbsp;(<a href="/david/cache/2022/9b22b9e02073904986f4c33a75d90918/">cache</a>)</cite></p>
</blockquote>

<blockquote lang="en">
<p>🦋 But I also know we can do our best and still suffer the fate I most want to avoid. Such is life, though. This is the price we have to pay for living: to endure the beauty that comes with the fragility of&nbsp;moments.</p>
<p><cite><em><a href="https://winnielim.org/journal/out-of-control/">Winnie Lim&nbsp;» out of control</a></em>&nbsp;(<a href="/david/cache/2022/77e068f6681c5054ef9871e8102f3236/">cache</a>)</cite></p>
</blockquote>


<nav>
  <p class="center">
    <a rel="prev" href="/david/2022/01/19/" title="Publication précédente : Négatif">← Précédent</a> •
    <a href="/david/2022/" title="Liste des publications récentes">↑ En 2022</a>
     • <a rel="next" href="/david/2022/03/04/" title="Publication suivante : Régime">Suivant →</a>
  </p>
</nav>
</article>


<hr>

<footer>
  <p>
    <nobr>
      <a href="/david/" title="Aller à l’accueil"
        ><svg class="icon icon-home">
          <use
            xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-home"
          ></use>
        </svg>
        Accueil</a
      >
    </nobr>
    •
    <nobr>
      <a href="/david/log/" title="Accès au flux RSS"
        ><svg class="icon icon-rss2">
          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-rss2"></use>
        </svg>
        Suivre</a
      >
    </nobr>
    •
    <nobr>
      <a href="http://larlet.com" title="Go to my English profile" data-instant
        ><svg class="icon icon-user-tie">
          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-user-tie"></use>
        </svg>
        Pro</a
      >
    </nobr>
    •
    <nobr>
      <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"
        ><svg class="icon icon-mail">
          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-mail"></use>
        </svg>
        Email</a
      >
    </nobr>
    •
    <nobr>
      <abbr
        class="nowrap"
        title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"
        ><svg class="icon icon-hammer2">
          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-hammer2"></use>
        </svg>
        Légal</abbr
      >
    </nobr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>

</body>
</html>