davidbgk
/
larlet-fr-david


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
							<!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>Tag #coopérative — David Larlet</title>
<meta name="description" content="Publications relatives au tag #coopérative">
<!-- 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">


<header>
  <h1>Publications relatives au tag #coopérative</h1>
</header>
<nav>
  <p class="center">
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a>
     • <a rel="tags" href="/david/#tags" title="Liste de toutes les étiquettes"><svg class="icon icon-tags">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-tags"></use>
      </svg> Étiquettes</a>
  </p>
</nav>
<hr>
<main>
  <p>Liste des publications en ordre chronologique :</p>
  
    <h2><a href="/david/2021/03/17/" title="Lien permanent vers cet article">Arrivant·es</a> (2021-03-17)</h2>
    <details>
      <summary>Déplier pour lire le contenu de l’article</summary>
      

<blockquote lang="en">
<p>Here’s the problem: <mark>how do you make a space that feels right for beginners</mark> when you have thousands of experts in the group who also want to join in?</p>
<p>[…]</p>
<p>Experts are very good at occupying these spaces. They are comfortable speaking, and eager to share their knowledge. How do we ensure that they don’t monopolize the discussion?</p>
<p>Beginners can be shy, and reluctant to speak. They may feel like they don’t know enough to even ask a question. They don’t want to appear dumb. They hear the experts around them, and feel even more certain that this is not for them.</p>
<p>The experts could have the best intentions: they want to help the beginners. They are interested in the subject, and have useful bits of information to contribute.</p>
<p><cite><em><a href="https://nedbatchelder.com/blog/202103/beginners_in_a_sea_of_experts.html">Beginners in a sea of experts</a></em> (<a href="/david/cache/2021/5c20cd102357c0140e36a902ca400c8f/">cache</a>)</cite></p>
</blockquote>
<p>Trois nouvelles personnes sont arrivées au sein de <a href="http://scopyleft.fr/">Scopyleft</a> ces derniers mois. J’apprécie le fait que l’on transmette les précédentes pratiques en précisant régulièrement que celles-ci peuvent être transformées par ce nouvel état. L’expérience permet bien souvent d’aller plus vite, mais potentiellement dans une direction qui n’est <em>plus</em> la bonne. Je trouve sain que la croissance ne soit pas synonyme d’accélération mais de transformation, ce n’est pas à l’arrivant·e de s’adapter mais à toutes les personnes du groupe d’accepter un nouvel équilibre.</p>
<p>J’aime me rappeler de cette métaphore technique&nbsp;:</p>

<blockquote lang="en">
<p>Teams are immutable. Every time someone leaves, or joins, you have a new team, not a changed team.</p>
<p><cite><em><a href="https://twitter.com/richardadalton/status/569275411508682752">Richard Dalton sur Twitter</a></em></cite></p>
</blockquote>

    </details>
  
    <h2><a href="/david/2021/04/22/" title="Lien permanent vers cet article">Vacances</a> (2021-04-22)</h2>
    <details>
      <summary>Déplier pour lire le contenu de l’article</summary>
      

<blockquote>
<p>L’histoire est aussi importante que la forme ou la structure. Dans une très large mesure, <mark>l’histoire d’un phénomène constitue le phénomène lui-même</mark>. Nous sommes, réellement, tout ce qui a existé avant nous et nous pouvons devenir à notre tour infiniment plus que ce que nous sommes.</p>
<p><cite><em>L’écologie sociale</em>, Murray Bookchin</cite></p>
</blockquote>
<p>On a un rapport assez particulier aux vacances chez Scopyleft et au moment où on se <a href="/david/2021/03/17/" title="Arrivant·es">transmet en question</a>, c’est l’occasion de partager <em>un</em> état de nos réflexions.</p>
<p>La prise de vacances est libre et consciente. <strong>Libre</strong> car on ne se restreint pas à un nombre de jours/semaines, ni même à communiquer à nos collègues si/quand on est en vacances. <strong>Consciente</strong> car on essaye — dans la mesure du possible — de ne pas laisser les autres galérer du fait de notre indisponibilité. Faire partie d’une <abbr title="Société coopérative et participative">SCOP</abbr> c’est aussi <em>pour moi</em> éprouver de l’empathie et de la solidarité pour les autres membres.</p>
<p>La discussion du jour portait sur la toxicité potentielle d’une telle approche. D’autres entreprises pratiquent les <em>vacances illimitées</em> mais cela crée un tel sentiment de culpabilité que les employé·es prennent en définitive <em>moins</em> de vacances et dans un climat pas terrible.</p>
<p>Comment rompre avec ce sentiment&#8239;?</p>
<p>On en vient à (re)questionner les notions de travail et de vacances. Si l’on envisage les vacances comme des <em>moments de prise de soin personnels</em>, le changement n’est pas uniquement sémantique mais traduit une intention différente. D’une manière similaire à l’auto-détermination de nos salaires en fonction de nos «&nbsp;besoins&nbsp;», les vacances s’adaptent ainsi à notre rythme de vie, notre enthousiasme et notre appétence. L’exploration du tempo convenable pour notre danse du moment.</p>
<p>Ce n’est plus alors la recherche d’un rythme de <em>travail</em> soutenable mais celle d’une qualité de <em>vie</em> enviable.</p>

<blockquote>
<p>Bien au contraire, la complétude inclut l’ensemble disparate des structures, d’articulations, de médiations, où le tout va puiser la riche variété de ces formes et où ce qu’un esprit analytique réduirait à une suite de détails «&nbsp;innombrables&nbsp;» et «&nbsp;fortuits&nbsp;» acquiert ainsi des propriétés qualitatives uniques.</p>
<p><cite><em>Ibid.</em></cite></p>
</blockquote>

    </details>
  
    <h2><a href="/david/2021/05/12/" title="Lien permanent vers cet article">Propriétaires</a> (2021-05-12)</h2>
    <details>
      <summary>Déplier pour lire le contenu de l’article</summary>
      

<blockquote lang="en">
<p><mark>The new owners of Clearleft are the people who power Clearleft</mark> and who make Clearleft so special. It’s our whole team, in the form of an <strong>Employee Ownership Trust</strong>.</p>
<p>That’s right; Clearleft will be run for—and on behalf of—all our team, now and in the future. So rather than working for a company where the benefits go to a handful of individuals, they will be shared evenly amongst the team.</p>
<p><cite><em><a href="https://clearleft.com/posts/meet-the-new-owners-of-clearleft">Meet the new owners of Clearleft</a></em> (<a href="/david/cache/2021/699cfd66554f8e8ad2118eec8b4c0564/">cache</a>)</cite></p>
</blockquote>
<p>Lorsqu’on souhaite discuter de <a href="/david/2021/04/28/" title="Politique">politique</a> au bureau, le plus évident est de partager ce bureau. <em>Pour de vrai.</em> Cette transformation est suffisamment rare pour être partagée, même après 15&nbsp;ans c’est tout à fait possible. Il ne tient qu’aux personnes — suffisamment en confiance et en sécurité — de <strong>vouloir</strong> changer le rapport au pouvoir au sein d’une entreprise.</p>
<p>Cela peut même se faire de manière incrémentale en passant d’une <abbr title="Entreprise de Services du Numérique">ESN</abbr> à une <abbr title="Coopérative d’Activité et d’Emploi">CAE</abbr> pour finalement rejoindre/créer une <abbr title="Société COopérative et Participative">SCOP</abbr> ou une <a href="https://dtc-innovation.org/writings/2017/une-association">association</a> (<a href="/david/cache/2021/e35537b839116354caf42731c6ed39da/">cache</a>). Tous les chemins pour redéfinir un capitalisme sont possibles.</p>

    </details>
  
    <h2><a href="/david/2021/05/19/" title="Lien permanent vers cet article">Regroupement</a> (2021-05-19)</h2>
    <details>
      <summary>Déplier pour lire le contenu de l’article</summary>
      

<blockquote>
<p>Si atteindre une position dominante sur leurs marchés respectifs s’avère épineux, ce n’est pas leur principal levier d’influence, relève l’économiste&nbsp;: «&nbsp;Les coopératives contribuent à faire évoluer les règles du jeu, car <mark>elles diffusent leurs idées et leurs pratiques de production au-delà d’elles-mêmes.</mark>&nbsp;»</p>
<p>[…]</p>
<p>Malgré leur motivation, la plupart demeurent des coopératives de tailles et d’effectifs modestes. «&nbsp;Ce n’est pas simple de travailler de concert, surtout quand on porte des projets énergivores en ressources humaines, et qu’on ne possède pas la force de frappe de levée de fonds d’une start-up&nbsp;», dit Adrien Montagut.</p>
<p><cite><em><a href="https://reporterre.net/Des-cooperatives-se-regroupent-pour-une-alternative-aux-geants-du-web">Des coopératives se regroupent pour une alternative aux géants du web</a></em> (<a href="/david/cache/2021/cfd75c2c4d19529d184fc1a1ccdfc938/">cache</a>)</cite></p>
</blockquote>
<p>En ce moment, on essaye de répondre à un appel d’offre en formant un regroupement de structures ayant des principes coopératifs. La principale difficulté est de définir un cap pour ce collectif sans qu’il n’y ait pour autant de cap…itaine(s). Réussir à s’accorder prend du temps — même en envisageant de commencer à travailler en commun pour mieux se connaître. Or, un appel d’offre amène cette contrainte forte. Là est l’enjeu.</p>
<p>Au-delà de l’acceptation ou du rejet de notre proposition, c’est ce chemin qui m’intéresse lorsqu’un collectif se forme. Avec l’espoir qu’il survive à l’appât du gain à court terme pour envisager d’autres formes d’interactions et de collaborations.</p>

<blockquote>
<p>— Les trois branches d’un accord sont l’intention, l’information et l’incertitude. La précision et l’honnêteté n’ont pas grand-chose à voir avec la question. […] La dialectique ferme la porte aux sens, déclara Leto en ramenant son visage plus près du sol. Elle masque l’agressivité. <mark>Poussée à outrance, la discussion conduit toujours à la violence.</mark> Et mes intentions envers toi ne sont pas violentes.<br />
— Que voulez-vous dire par… intention, information, incertitude&#8239;?<br />
— L’intention réunit les participants. L’information délimite le débat. L’incertitude crée les questions.</p>
<p><cite><em><a href="/david/2020/12/21/#dune">Dune</a> IV. L’Empereur-Dieu de Dune</em>, Frank Herbert</cite></p>
</blockquote>

    </details>
  
    <h2><a href="/david/2021/06/05/" title="Lien permanent vers cet article">Incarnation</a> (2021-06-05)</h2>
    <details>
      <summary>Déplier pour lire le contenu de l’article</summary>
      

<blockquote>
<p>47. Notre action sera d’autant plus efficace qu’elle sera davantage l’expression normale de nous-mêmes. Nous ne porterons pas d’insigne&nbsp;: lorsque l’insigne devient le signe d’un engagement, c’est que nous ne faisons aucun geste&nbsp;: <mark>il faut que nous incarnions la doctrine</mark>, que nous soyons à proprement parler ces valeurs mêmes que nous élevons.</p>
<p><cite><em>Directives pour un manifeste personnaliste</em>, Bernard Charbonneau et Jacques Ellul, 1935</cite></p>
</blockquote>
<p>Coïncidence étrange que de parler de cela le matin et de lire cet extrait le soir. Je faisais la distinction avec <a href="http://ut7.fr/">Raphaël</a> entre promouvoir <a href="https://fr.wikipedia.org/wiki/D%C3%A9claration_sur_l%27identit%C3%A9_coop%C3%A9rative">les principes coopératifs</a> et celle de les incarner. On peut aspirer à quelque chose sans pour autant aller jusqu’à s’impliquer et ça fait une différence non négligeable. On peut aussi avoir la volonté de les incarner tout en étant maladroit·e, jusqu’à un point où ça peut devenir contre-productif. On peut difficilement être (et) neutre.</p>
<p>Ah… les relations humaines 🤷.</p>

    </details>
  
    <h2><a href="/david/2021/09/02/" title="Lien permanent vers cet article">Équipes</a> (2021-09-02)</h2>
    <details>
      <summary>Déplier pour lire le contenu de l’article</summary>
      

<blockquote lang="en">
<p>You might assume that if you put together a bunch of people and give them a goal, they’re a team. <mark>But that’s not how it works.</mark> While all constellations are working groups of some sort, in order for a working group to be considered a team two criteria need to be met.</p>
<p><cite><em><a href="https://www.viktorcessan.com/the-first-question-to-ask-when-building-teams-is-this-really-a-team/">The First Question To Ask When Building Teams - Is This Really A Team?</a></em> (<a href="/david/cache/2021/77419ba77876ddc880823ee6321f9cbe/">cache</a>)</cite></p>
</blockquote>
<p>Je me réfère souvent à cette classification lorsqu’on me parle d’équipe. Elle a l’avantage d’être relativement simple à (re)mettre en mémoire grâce aux schémas.</p>
<p><strong>Un but commun qui nécessite d’être ensemble.</strong> Tous les mots comptent.</p>
<p>Ne pas confondre avec un «&nbsp;groupe d’affinité&nbsp;»&nbsp;:</p>

<blockquote>
<p>L’influence du mouvement anarchiste sur l’alter-mondialisme procède en grande partie de la diffusion de modes d’organisation comme le <em>groupe d’affinité</em>, une unité militante autonome d’environ 5&nbsp;à 20&nbsp;individus qui <mark>partagent une même sensibilité à l’égard des causes à défendre et des types d’actions à privilégier</mark>. Le processus de prise de décision y est anarchiste, c’est-à-dire qu’il est égalitaire, participatif, délibératif et consensuel.</p>
<p><cite><em>Les nouveaux anarchistes</em>, Francis Dupuis-Déri</cite></p>
</blockquote>

    </details>
  
    <h2><a href="/david/2021/11/30/" title="Lien permanent vers cet article">Salaires</a> (2021-11-30)</h2>
    <details>
      <summary>Déplier pour lire le contenu de l’article</summary>
      

<blockquote>
<p>Il ne s’agit plus de quémander un emploi pour avoir le droit de valoriser du capital, et de payer des impôts pour en déléguer la gestion à un personnel politique et une aristocratie de grandes et grands fonctionnaires. Il s’agit de <mark>décider ensemble</mark> du niveau de salaire et de ce qui doit être produit, et surtout comment ça devrait l’être.</p>
<p><cite><em><a href="https://igor.milhit.ch/citoyennet%C3%A9-autre/">Citoyenneté autre</a></em> (<a href="/david/cache/2021/465f63b989ee5666a6e9a406201a4b62/">cache</a>)</cite></p>
</blockquote>
<p>Au sein de <a href="http://scopyleft.fr/">Scopyleft</a>, nous sommes passé·es d’un salaire <em>à la contrainte</em> (cruel manque de trésorerie les premiers mois&#8239;!) à un salaire <em>égalitaire</em> (pendant un temps) pour être depuis quelques années maintenant à un <strong>salaire au besoin</strong>. Notre revenu n’est pas corrélé à ce que l’on rapporte ou à notre ancienneté ou à notre activité ou à notre expérience. Encore moins à notre performance…</p>
<p>Sous réserve que le pot commun ne se retrouve pas vide, chacun·e est libre de choisir le montant qu’iel souhaite.</p>
<p>Cette pratique vient avec son lot de non-dits et de culpabilités, de la même façon que ce qui peut se produire avec <a href="/david/2021/04/22/" title="Vacances">les vacances</a>. Parfois ne pas avoir à donner de justifications peut être la pire des tortures pour un groupe de personnes qui s’estiment et se respectent&nbsp;:</p>
<ul>
<li>est-ce que je ne suis pas égoïste vis-à-vis des autres en m’accordant autant&#8239;?</li>
<li>est-ce que je peux comparer mes besoins à ceux des autres dans une société de (sur)consommation&#8239;?</li>
<li>est-ce que j’ai besoin d’une symétrie de revenus avec mon ou ma conjoint·e pour être libre&#8239;?</li>
<li>est-ce que les enfants entrent en compte alors que c’est un choix délibéré d’en avoir ou pas&#8239;?</li>
<li>est-ce que je peux être payé·e autant alors que je suis jeune/en reconversion/sans mission/etc&#8239;?</li>
<li>est-ce que ça ne participe pas à la définition de mon futur salaire dans une autre structure&#8239;?</li>
<li>est-ce que pouvoir présenter ces fiches de paye à mon banquier/propriétaire fait partie d’un besoin&#8239;?</li>
<li>est-ce que la pression sociale m’enclin à sous-évaluer ma valeur/mes besoins car je suis une femme&#8239;?</li>
<li>est-ce que ma vision de la sobriété/frugalité est partagée au sein du groupe&#8239;?</li>
<li>est-ce que mon comportement actuel endommage la trésorerie future de la coopérative&#8239;?</li>
</ul>
<p>Toutes ces questions sont légitimes et saines. Et le fait que ces discussions aient lieues à un moment où il y a <a href="/david/2021/11/09/" title="Junior">un peu plus de diversité</a> n’est pas anodin. Elles permettent de se remettre en question et génèrent des échanges qui permettent d’apprendre à se connaître (et à s’apprécier).</p>
<p>Du salaire à vie au salaire en vie, il y a matière à travailler. Ensemble.</p>
<p><em>Rappel&nbsp;: nous sommes une coopérative, ce qui signifie que ce qui n’est pas attribué en salaire au cours de l’année est transformé en réserve (pour la structure), puis en part travail (répartie équitablement entre les salarié·es) à la fin de l’année. C’est aussi cela être propriétaire de son cadre de travail, que l’on essaye de pérenniser.</em></p>

<blockquote>
<p>Il a fait le tour du monde… mais qu’est-ce que le tour du monde puisque l’horizon est éternel&#8239;? Le tour du monde va plus loin que le bout du monde, aussi loin que la vie, plus loin encore peut-être. Quand on entrevoit ça, on a un peu le vertige, on a un peu peur. Et en même temps ce qu’on entrevoit là est tellement…</p>
<p>Tellement quoi&#8239;? <mark>Je ne sais pas.</mark> Plus loin que le bout du monde…</p>
<p><cite><em>La longue route</em>, Bernard Moitessier</cite></p>
</blockquote>

    </details>
  
</main>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <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-2021-12.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs-2021-12.svg#icon-mail"></use>
      </svg> Email</a> •
    <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-2021-12.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs-2021-12.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>