davidbgk
/
larlet-fr-david-cache

<!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>Dis tonton, c’est quoi les blocages d’instance sur Mastodon ? (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- 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>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://n.survol.fr/n/dis-tonton-cest-quoi-les-blocages-dinstance-sur-mastodon">

<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>Dis tonton, c’est quoi les blocages d’instance sur Mastodon ?</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 href="https://n.survol.fr/n/dis-tonton-cest-quoi-les-blocages-dinstance-sur-mastodon" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>Voilà qu’on reparle de modé­ra­tion de Masto­don. <a href="https://blog.infosec.exchange/2022/11/20/an-update-on-journa-host/">L’his­toire de départ</a> c’est une instance (« <em>Info­sec</em> ») qui a choisi d’en mettre une autre (« <em>Journa</em> ») sous silence pour ne pas subit les propos que cette dernière a choisi de lais­ser en ligne.</p>

<blockquote class="wp-block-quote"><p><em>Hein ? Une instance ?</em></p></blockquote>

<p>Masto­don fonc­tionne à travers un réseau fédéré. Son petit nom est le fédi­verse. Les utili­sa­teurs sont regrou­pés en ilots plus ou moins gros qu’on appelle les instances. Certains utili­sa­teurs ont leur propre instance person­nel. D’autres instances regroupent plusieurs dizaines de milliers de personnes. </p>

<p>Si un Tom d’<em>Info­sec</em> est abonné à Alice de <em>Journa</em>, alors les deux instances commu­niquent entre elles pour que <em>Journa</em> envoie les messages d’Alice à <em>Info­sec</em>. <em>Info­sec</em> fera ensuite en sorte de les présen­ter à Tom. </p>

<figure class="wp-block-image aligncenter size-medium"><a href="https://n.survol.fr/wp-content/uploads/2022/11/Sans-titre-2022-11-21-0949.png"><img loading="lazy" src="https://n.survol.fr/wp-content/uploads/2022/11/Sans-titre-2022-11-21-0949-300x249.png" alt="Schéma représentant trois cercles avec des flèches allant dans les deux sens entre chaque couple de cercle.

Dans le premier cercle, quatre noms : Tom, Tina, Titus, Tara.

Dans le second cerce, quatre noms : Anna, Alice, Agnès, Albus.

Dans le troisième cercle : Cédric, Clara, Cloé." class="wp-image-21761" srcset="https://n.survol.fr/wp-content/uploads/2022/11/Sans-titre-2022-11-21-0949-300x249.png 300w, https://n.survol.fr/wp-content/uploads/2022/11/Sans-titre-2022-11-21-0949-1024x851.png 1024w, https://n.survol.fr/wp-content/uploads/2022/11/Sans-titre-2022-11-21-0949-768x638.png 768w, https://n.survol.fr/wp-content/uploads/2022/11/Sans-titre-2022-11-21-0949.png 1371w" sizes="(max-width: 300px) 100vw, 300px"></a><figcaption>Diffé­rentes instances</figcaption></figure>

<p>Vous connais­sez déjà ça avec les emails, qui fonc­tionnent sur le même prin­cipe. On a un îlot Gmail, un Outlook, un Yahoo, un Orange, un Free… et chaque entre­prise créé le sien avec son propre nom.</p>

<blockquote class="wp-block-quote"><p><em>Ok, mais c’est quoi le blocage d’une instance ?</em></p></blockquote>

<p>Si <em>Info­sec</em> choi­sit de bloquer entiè­re­ment <em>Journa</em>, alors elle ne trai­tera plus les nouveaux messages de cette dernière et n’y enverra plus les siens. On parle de défé­dé­rer une instance.</p>

<p>Cette procé­dure n’in­fluera que sur l’ins­tance qui réalise qui le blocage (<em>Info­sec</em>) et les utili­sa­teurs de cette dernière. L’ins­tance ciblée (<em>Journa</em>) conti­nuera à conver­ser avec toutes les milliers d’autres instances du réseau.</p>

<figure class="wp-block-image aligncenter size-medium"><a href="https://n.survol.fr/wp-content/uploads/2022/11/Sans-titre-2022-11-21-0949b.png"><img loading="lazy" src="https://n.survol.fr/wp-content/uploads/2022/11/Sans-titre-2022-11-21-0949b-300x249.png" alt="Schéma représentant trois cercles avec des flèches allant dans les deux sens entre chaque couple de cercle.

La flèche qui va du cercle des A vers le cercle des T est bloqué par une croix rouge du côté du cercle des T.
La flèche qui va du cercle des T vers le cercle des A est bloquée elle aussi au niveau du cercle des T, et est représentée en pointillés.

Dans le premier cercle, quatre noms : Tom, Tina, Titus, Tara.

Dans le second cerce, quatre noms : Anna, Alice, Agnès, Albus.

Dans le troisième cercle : Cédric, Clara, Cloé." class="wp-image-21762" srcset="https://n.survol.fr/wp-content/uploads/2022/11/Sans-titre-2022-11-21-0949b-300x249.png 300w, https://n.survol.fr/wp-content/uploads/2022/11/Sans-titre-2022-11-21-0949b-1024x851.png 1024w, https://n.survol.fr/wp-content/uploads/2022/11/Sans-titre-2022-11-21-0949b-768x638.png 768w, https://n.survol.fr/wp-content/uploads/2022/11/Sans-titre-2022-11-21-0949b.png 1371w" sizes="(max-width: 300px) 100vw, 300px"></a><figcaption>Blocage d’une instance par une autre.</figcaption></figure>

<p>En réalité il y a un niveau inter­mé­diaire qu’on appelle la mise sous silence.</p>

<p>Masto­don a trois flux : le flux person­nel qui présente unique­ment les abon­ne­ments, le flux local qui présente unique­ment les messages locaux à l’ins­tance, et le flux fédéré qui présente tous les messages reçus par l’ins­tance.</p>

<p>La mise sous silence masque les conte­nus concer­nés dans le flux fédéré mais permet de rece­voir des messages dans le flux person­nel à condi­tion de s’y être expli­ci­te­ment abonné.</p>

<p>C’est ce niveau de blocage inter­mé­diaire (la mise sous silence) qui a été mis en œuvre par <em>Info­sec</em>.</p>

<blockquote class="wp-block-quote"><p><em>Mais pourquoi faire ça ?</em></p></blockquote>

<p>La vraie réponse : Peu importe. Si tu choi­sis de ne pas écou­ter CNews chez toi, tu n’as pas à donner d’ex­pli­ca­tion. C’est ton choix. </p>

<p>C’est la même chose pour l’ins­tance <em>Info­sec</em> et ses utili­sa­teurs : Ils font ce qu’ils veulent chez eux.</p>

<p>Le plus souvent on bloque une instance quand elle est la source de spam, de harcè­le­ments, ou de propos racistes, trans­phobes, handi­phobes, pédo­por­no­gra­phiques ou inju­rieux. </p>

<p>Chaque instance a ses propres sensi­bi­li­tés. Certaines tiennent à une liberté d’ex­pres­sion très large, d’autres préfèrent exclure la porno­gra­phie ou certains sujets pour créer un espace qui leur convient. </p>

<p>Certains préfèrent une modé­ra­tion légère quitte à subir parfois quelques conte­nus problé­ma­tiques là où d’autres préfèrent une modé­ra­tion forte quitte à limi­ter certaines inter­ac­tions externes légi­times. </p>

<p>C’est un choix local, qui ne concerne qu’eux.</p>

<p>Ici <em>Info­sec</em> a jugé que certains propos venant de <em>Journa</em> étaient trans­phobes et les utili­sa­teurs d’<em>Info­sec</em> souhai­taient s’en proté­ger (c’est à dire ne plus les voir ni en assu­rer la trans­mis­sion chez eux).</p>

<blockquote class="wp-block-quote"><p><em>On bloque toute une instance et tous les utili­sa­teurs pour </em>un<em> unique message problé­ma­tique ?</em></p></blockquote>

<p>Masto­don prévoit un moyen de signa­ler les propos gênants à l’ins­tance d’ori­gine. Le plus souvent les blocages d’ins­tance inter­viennent quand l’ins­tance d’ori­gine (ici <em>Journa</em>) refuse d’agir, ou que le problème survient trop régu­liè­re­ment.</p>

<p>Pour faire un paral­lèle, si je sais que CNews invite régu­liè­re­ment des invi­tés que je ne supporte pas, je peux préfé­rer ne plus du tout regar­der CNews pour m’en proté­ger, quitte à ne plus entendre certains autres invi­tés qui seraient eux accep­tables à mes yeux. Je n’in­ter­dis pas CNews, je choi­sis juste de ne pas diffu­ser cette chaîne dans mon salon.</p>

<p>J’avoue que sur ce sujet, si j’avais eu à modé­rer, avec une seule occur­rence qui n’est qu’un partage d’un contenu d’un jour­nal de réfé­rence, j’au­rais mis sous silence unique­ment l’uti­li­sa­teur concerné et pas l’ins­tance, mais ce n’est que mon choix lié à mes équi­libres person­nels.</p>

<p><em>Info­sec</em> a fait un autre choix, et il ne regarde qu’eux.</p>

<blockquote class="wp-block-quote"><p><em>Pourquoi est-ce que Journa a refusé d’agir sur des propos trans­phobes ?</em></p></blockquote>

<p>Les équi­libres de liberté d’ex­pres­sion sont très subjec­tifs. Tous les pays n’ont déjà pas le même socle de base en interne. Les commu­nau­tés peuvent en plus choi­sir d’al­ler au-delà de ce socle de base. Certaines le font, d’autres pas, et pas toujours sur les mêmes sujets.</p>

<p>Enfin, parfois il y a simple­ment désac­cord sur ce qui est ou pas inju­rieux, ce qui est ou pas trans­phobe, ce qui est ou pas raciste, ce qui est ou pas un consti­tu­tif d’un harcè­le­ment, etc.</p>

<p>Les commu­nau­tés se regroupent autour de poli­tiques, valeurs et cultures communes, mais n’ont pas forcé­ment les mêmes que le voisin.</p>

<p>C’est ce qu’il se passe ici. Soit <em>Journa</em> a consi­déré que l’ar­ticle du New York Times relayé était suffi­sam­ment étayé avec des avis de docteurs et cher­cheurs à propos des effets indé­si­rables de certains trai­te­ments, soit <em>Journa</em> n’a pas agit en pensant que ce n’est pas son rôle de tran­cher une telle ques­tion et remettre en cause le New York Times. </p>

<p>D’autres personnes sur <em>Info­sec</em> ont, elles, consi­déré que le contenu était trans­phobe et qu’il valait mieux bloquer l’ins­tance si elle n’agis­sait pas pour empê­cher la diffu­sion de conte­nus trans­phobes à l’ave­nir. <em>Info­sec</em> a agit en fonc­tion de ses propres utili­sa­teurs, et ça ne regarde qu’eux (oui, je me répète mais c’est impor­tant).</p>

<blockquote class="wp-block-quote"><p><em>Ça pose quand même un sacré problème de liberté d’ex­pres­sion, non ?</em></p></blockquote>

<p>En fait, pas vrai­ment, pas beau­coup plus que tous les gens qui comme moi font le choix de ne jamais allu­mer la TV sur CNews.</p>

<p>Personne n’em­pêche les membres de <em>Journa</em> de s’ex­pri­mer, ou d’être entendu, ou même d’être relayé sur la très grande majo­rité des instances Masto­don.</p>

<p>Dans le schéma de tout à l’heure, le blocage est à la péri­phé­rie de l’ins­tance <em>Info­sec</em> et pas à la péri­phé­rie de l’ins­tance <em>Journa</em>. Tant qu’<em>Info­sec</em> n’est qu’un des très nombreux acteurs du réseau, ça ne pose pas de problème majeur.</p>

<figure class="wp-block-image aligncenter size-medium"><a href="https://n.survol.fr/wp-content/uploads/2022/11/Sans-titre-2022-11-21-0949b.png"><img loading="lazy" src="https://n.survol.fr/wp-content/uploads/2022/11/Sans-titre-2022-11-21-0949b-300x249.png" alt="Schéma représentant trois cercles avec des flèches allant dans les deux sens entre chaque couple de cercle.

La flèche qui va du cercle des A vers le cercle des T est bloqué par une croix rouge du côté du cercle des T.
La flèche qui va du cercle des T vers le cercle des A est bloquée elle aussi au niveau du cercle des T, et est représentée en pointillés.

Dans le premier cercle, quatre noms : Tom, Tina, Titus, Tara.

Dans le second cerce, quatre noms : Anna, Alice, Agnès, Albus.

Dans le troisième cercle : Cédric, Clara, Cloé." class="wp-image-21762" srcset="https://n.survol.fr/wp-content/uploads/2022/11/Sans-titre-2022-11-21-0949b-300x249.png 300w, https://n.survol.fr/wp-content/uploads/2022/11/Sans-titre-2022-11-21-0949b-1024x851.png 1024w, https://n.survol.fr/wp-content/uploads/2022/11/Sans-titre-2022-11-21-0949b-768x638.png 768w, https://n.survol.fr/wp-content/uploads/2022/11/Sans-titre-2022-11-21-0949b.png 1371w" sizes="(max-width: 300px) 100vw, 300px"></a><figcaption>Blocage d’une instance par une autre.</figcaption></figure>

<p>Les seuls pour qui il y aurait poten­tiel­le­ment un enjeu de liberté d’ex­pres­sion, ce sont les membres de l’ins­tance d’<em>Info­sec</em>.</p>

<blockquote class="wp-block-quote"><p><em>Ahah ! Tu vois, tu le dis toi-même, il y a bien un problème pour eux !</em></p></blockquote>

<p>Ça dépend. Si je parti­cipe à une asso­cia­tion, qu’il y a une TV dans la salle de pause et qu’il a été décide que cette TV diffu­se­rait Arte plutôt que CNews, est-ce une atteinte à la liberté d’ex­pres­sion parce que je ne peux pas y écou­ter les chro­niqueurs de CNews ? </p>

<p>Proba­ble­ment pas : Je peux encore écou­ter CNews chez moi, ou dans une autre asso­cia­tion, ou même monter ma propre asso­cia­tion qui aura des règles diffé­rentes. Cela ne commen­cera à être un problème que si ma capa­cité à aller voir ailleurs est limi­tée ou complexe, ou si on donne à l’as­so­cia­tion d’ori­gine une auto­rité quel­conque.</p>

<p>C’est exac­te­ment la même chose avec <em>Info­sec</em>. Ses membres peuvent toujours aller lire <em>Journa</em> ailleurs avec un second compte, ou démé­na­ger leur compte prin­ci­pal sur une autre instance, ou même monter leur propre instance. Ajou­ter un second compte ou migrer ailleurs est facile, sans limite.</p>

<p>Non seule­ment personne ne bride l’ex­pres­sion des membres de <em>Journa</em> mais en plus personne ne limite la capa­cité à aller les lire faci­le­ment.</p>

<blockquote class="wp-block-quote"><p><em>Pour­tant tu disais toi-même que…</em></p></blockquote>

<p>La ques­tion surgi­rait diffé­rem­ment si <em>Info­sec</em> avait une situa­tion de quasi-mono­pole, ou que toutes les instances bloquant <em>Journa</em> avaient en se regrou­pant une situa­tion de quasi-mono­pole limi­tant de fait la capa­cité à accé­der au contenu dont on parle.</p>

<p>Ce n’est pas le cas aujourd’­hui.</p>

<p>Ce serait aussi un sujet pour un blocage liti­gieux réalisé de façon cachée. Ici l’ad­mi­nis­tra­teur d’<em>Info­sec</em> a publié un billet sur le sujet et le fait même que j’en parle ici montre qu’on est loin de ce cas.</p>

<blockquote class="wp-block-quote"><p><em>Ça pose au moins une ques­tion de démo­cra­tie interne d’In­fo­sec</em></p></blockquote>

<p>Pas à mon avis. Tout fonc­tion­ne­ment interne n’a pas forcé­ment à être démo­cra­tique. C’est impor­tant pour un pays ou une collec­ti­vité terri­to­riale parce qu’on ne choi­sit pas son pays d’ori­gine et qu’on ne change pas faci­le­ment de pays ou de terri­toire.</p>

<p>La démo­cra­tie c’est « le pouvoir au peuple ». Sur Masto­don l’uti­li­sa­teur a le pouvoir vu qu’il peut choi­sir à tout moment une instance avec des règles qui lui conviennent, sans avoir de consé­quences néga­tives signi­fi­ca­tives.</p>

<p>C’est d’au­tant moins un sujet que le message de l’ad­mi­nis­tra­teur d’<em>Info­sec</em> laisse entendre que ce sont des utili­sa­teurs de l’ins­tance qui l’ont fait agir et pas lui qui a pris la déci­sion unila­té­ra­le­ment.</p>

<blockquote class="wp-block-quote"><p><em>Mais alors il n’y a aucun problème ?</em></p></blockquote>

<p>Il y a <em>plein</em> de problèmes, mais pas forcé­ment des ques­tions de liberté d’ex­pres­sion ou de démo­cra­tie, et pas forcé­ment sur le cas <em>Info­sec</em> – <em>Journa</em>.</p>

<p>Un premier problème est la trans­pa­rence. <em>Info­sec</em> a agi en trans­pa­rence mais ce n’a pas toujours été lé cas de toutes les instances par le passé. Quand c’est trans­pa­rent on fait nos choix, éven­tuel­le­ment on va voir ailleurs. Quand c’est caché ça veut dire mani­pu­ler l’in­for­ma­tion reçue et influen­cer des personnes sans qu’ils ne le sachent, et ça c’est déjà beau­coup plus liti­gieux. </p>

<p>La contrainte est un second problème. Ce ne semble pas le cas ici mais par le passé la menace de défé­dé­rer a été utili­sée comme une pres­sion pour forcer une autre commu­nauté à chan­ger ses propres règles et valeurs (« si tu ne bloques pas l’ins­tance xxx alors on bloque ton instance aussi »). On est là dans une démarche où l’ou­til a été détourné pour deve­nir une arme plutôt qu’un bouclier. </p>

<p>Enfin, il y a un sujet si une instance ou un groupe d’ins­tances peut avoir suffi­sam­ment de poids pour que ça devienne effec­ti­ve­ment un sujet de liberté d’ex­pres­sion. C’est parti­cu­liè­re­ment le cas si on cumule avec le problème précé­dent. Là ça peut être aussi moche qu’un réseau centra­lisé, ou créer plusieurs sous-réseaux indé­pen­dants et qui ne commu­niquent pas entre eux.</p>

<blockquote class="wp-block-quote"><p>Du coup le système de Masto­don est problé­ma­tique ?</p></blockquote>

<p>Oui, non, ça dépend de tes propres choix.</p>

<p>C’est juste qu’il n’y a pas de système parfait ni de façon univer­selle de posi­tion­ner les équi­libres entre les diffé­rents enjeux.</p>

<p>Le choix de Masto­don est un choix qui répond à des problèmes vus sur Twit­ter ou d’autres réseaux centra­li­sés, qui ouvre d’autres possi­bi­li­tés et d’autres façons de penser les équi­libres. C’est déjà pas mal.</p>

<blockquote class="wp-block-quote"><p>Que peut-on amélio­rer ?</p></blockquote>

<ol><li>Inci­ter à plus de trans­pa­rence à l’in­té­rieur d’une instance, sur ce qui est bloqué globa­le­ment et pourquoi.</li><li>Refu­ser globa­le­ment les guerres de modé­ra­tion entre instances et les instances qui veulent contraindre les règles des autres (le « si tu ne bloques pas l’ins­tance xxx alors on bloque ton instance aussi ») </li><li>S’as­su­rer qu’au­cune instance ne repré­sente plus de 20% des utili­sa­teurs actifs, et qu’un groupe d’ins­tances ne devienne majo­ri­taire au point de pouvoir deve­nir un problème.</li><li>Faire en sorte que jamais la procé­dure de démé­na­ge­ment de compte ne soit limi­tée, même en cas de blocage d’ins­tance.</li></ol>
</article>


<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>