davidbgk
/
larlet-fr-david


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492
							<!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>Jour&nbsp;2 — David Larlet</title>
<meta name="description" content="Finalement, réveil à 6 h au bruit des casseroles des voisin·es. C’est pas plus mal car ça me permet d’admirer la pureté du ciel étoilé par -15 °C, et puis ça me laisse le temps de me faire un gruau bien chaud avant de tout plier. Je ne suis pas encore à 100% mais c’est déjà beaucoup mieux que la veille. La bactérie ou le virus concerné doit se dire que je ne suis pas un hôte rentable.">
<!-- 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>Jour&nbsp;2</h1>
</header>
<nav>
  <p class="center">
    <a rel="prev" href="/david/2023/02/10/" title="Publication précédente : Jour&nbsp;1">← 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/2023/02/12/" title="Publication suivante : Jour&nbsp;3">Suivant →</a>
  </p>
</nav>
<hr>

<p>Finalement, réveil à 6&#8239;h au bruit des casseroles des voisin·es. C’est pas plus mal car ça me permet d’admirer la pureté du ciel étoilé par -15&#8239;°C, et puis ça me laisse le temps de me faire un gruau bien chaud avant de tout plier. Je ne suis pas encore à 100% mais c’est déjà beaucoup mieux que la veille. La bactérie ou le virus concerné doit se dire que je ne suis pas un hôte&nbsp;rentable.</p>
<figure>
    <a href="#2023-02-11-accueil-poisson-blanc"
        title="Cliquer pour une version haute résolution">
        <picture>
            <source
                srcset="/static/david/2023/2023-02-11-accueil-poisson-blanc.webp 1512w"
                sizes="min(100vw, calc(100vh * 1512 / 2016))"
                type="image/webp">
            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
            <img
                src="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg"
                width="1512" height="2016"
                srcset="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg 1512w"
                sizes="min(100vw, calc(100vh * 1512 / 2016))"
                fetchpriority="high"
                decoding="sync"
                alt="Le ciel à 7h du matin sur le réservoir du Poisson Blanc.">
        </picture>
    </a>
    <a href="#_" class="lightbox" id="2023-02-11-accueil-poisson-blanc">
        <picture style="margin:0 auto;">
            <source
                srcset="/static/david/2023/2023-02-11-accueil-poisson-blanc.webp 1512w"
                sizes="min(100vw, calc(100vh * 1512 / 2016))"
                type="image/webp">
            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
            <img
                src="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg"
                width="1512" height="2016"
                srcset="/static/david/2023/2023-02-11-accueil-poisson-blanc.jpg 1512w"
                sizes="min(100vw, calc(100vh * 1512 / 2016))"
                fetchpriority="high"
                decoding="sync"
                alt="Le ciel à 7h du matin sur le réservoir du Poisson Blanc.">
        </picture>
    </a>
    <figcaption>Les couleurs sont magnifiques et je regrette déjà de ne pas avoir pris un appareil&nbsp;photo.</figcaption>
</figure>
<p>On monte dans le bus scolaire avec un peu de retard et c’est parti pour 1&nbsp;heure de transport afin de rejoindre l’autre côté du réservoir, j’ai bien fait de me mettre à l’avant car ça tourne et c’est bien gelé. On se retrouve rapidement sur la glace avec nos traîneaux pour la photo de départ et hop c’est&nbsp;parti.</p>
<p>Je me retrouve dans le groupe de tête qui va à un rythme un peu fou. Je ne sais pas trop pourquoi je m’impose ça, c’est un bon moyen de voir si j’ai de la fièvre&#8239;! Avec une telle taille de groupe, j’ai surtout l’appréhension de retarder tout le monde avec un souci plus ou moins technique, je me dis qu’avec un peu d’avance ça me permettra de pallier une éventuelle défaillance. On a tou·tes nos&nbsp;insécurités…</p>
<figure>
    <a href="#2023-02-11-depart-traineaux"
        title="Cliquer pour une version haute résolution">
        <picture>
            <source
                srcset="/static/david/2023/2023-02-11-depart-traineaux.webp 2016w"
                sizes="min(100vw, calc(100vh * 2016 / 1512))"
                type="image/webp">
            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
            <img
                src="/static/david/2023/2023-02-11-depart-traineaux.jpg"
                width="2016" height="1512"
                srcset="/static/david/2023/2023-02-11-depart-traineaux.jpg 2016w"
                sizes="min(100vw, calc(100vh * 2016 / 1512))"
                fetchpriority="high"
                decoding="sync"
                alt="Des personnes sur le lac gelé qui tirent chacune un traineau">
        </picture>
    </a>
    <a href="#_" class="lightbox" id="2023-02-11-depart-traineaux">
        <picture style="margin:0 auto;">
            <source
                srcset="/static/david/2023/2023-02-11-depart-traineaux.webp 2016w"
                sizes="min(100vw, calc(100vh * 2016 / 1512))"
                type="image/webp">
            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
            <img
                src="/static/david/2023/2023-02-11-depart-traineaux.jpg"
                width="2016" height="1512"
                srcset="/static/david/2023/2023-02-11-depart-traineaux.jpg 2016w"
                sizes="min(100vw, calc(100vh * 2016 / 1512))"
                fetchpriority="high"
                decoding="sync"
                alt="Des personnes sur le lac gelé qui tirent chacune un traineau">
        </picture>
    </a>
    <figcaption>Le vent a bien soufflé cette nuit, on alterne glace et&nbsp;neige.</figcaption>
</figure>
<p>Niveau équipement, il y a un peu de tout, ça va des skis de fond aux skis de randonnée avec peaux en passant par les skis-raquettes. Je suis content de mes écailles vu les conditions mais ça me fait préférer la neige, aussi je me décale vers la berge en solo, la visibilité est bonne et je ne le vois pas comme un problème de sécurité. Les températures se réchauffent et tout le monde craint que l’étendue d’eau gelée ne se transforme en un lac de <a href="https://fr.wikipedia.org/wiki/N%C3%A9vasse">sloche</a>…</p>
<figure>
    <a href="#2023-02-11-traineau-solo"
        title="Cliquer pour une version haute résolution">
        <picture>
            <source
                srcset="/static/david/2023/2023-02-11-traineau-solo.webp 2016w"
                sizes="min(100vw, calc(100vh * 2016 / 1512))"
                type="image/webp">
            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
            <img
                src="/static/david/2023/2023-02-11-traineau-solo.jpg"
                width="2016" height="1512"
                srcset="/static/david/2023/2023-02-11-traineau-solo.jpg 2016w"
                sizes="min(100vw, calc(100vh * 2016 / 1512))"
                fetchpriority="high"
                decoding="sync"
                alt="Une longue trainée de personnes tirant des traineaux sur le lac">
        </picture>
    </a>
    <a href="#_" class="lightbox" id="2023-02-11-traineau-solo">
        <picture style="margin:0 auto;">
            <source
                srcset="/static/david/2023/2023-02-11-traineau-solo.webp 2016w"
                sizes="min(100vw, calc(100vh * 2016 / 1512))"
                type="image/webp">
            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
            <img
                src="/static/david/2023/2023-02-11-traineau-solo.jpg"
                width="2016" height="1512"
                srcset="/static/david/2023/2023-02-11-traineau-solo.jpg 2016w"
                sizes="min(100vw, calc(100vh * 2016 / 1512))"
                fetchpriority="high"
                decoding="sync"
                alt="Une longue trainée de personnes tirant des traineaux sur le lac">
        </picture>
    </a>
    <figcaption>Un peu à l’écart de la foule, on ne se refait&nbsp;pas.</figcaption>
</figure>
<p>Malgré le chargement, je me surprends à pouvoir glisser de temps en temps lorsque le revêtement est bon. C’est agréable et je suis déjà en t-shirt car il doit faire autour de zéro, ressenti 12&#8239;000&#8239;°C, la réverbération est violente. J’attends stupidement la pause de midi pour mettre une protection sur ma peau. Et pour m’alimenter. Et pour bien m’hydrater. N’importe&nbsp;quoi.</p>
<p>En arrivant dans la crique dédiée au repas, c’est ambiance station de ski avec un fond de Bob Marley et le long serpent des arrivées qui se replie pour digérer. Je pense que c’est un soulagement partagé d’être dans des conditions idéales et de pouvoir profiter de cette belle journée. Les organisateurs n’ont jamais connu ça. On a avalé les sept premiers kilomètres en moins de deux&nbsp;heures…</p>
<p>Pour la seconde partie de la journée, je prends un rythme moins soutenu car je ne veux pas arriver trempé au campement et la température monte encore. J’en profite pour observer les différentes tactiques de chacun·e pour limiter le frottement/bruit, passer sur les plaques de glace, etc. Ces sept derniers kilomètres se font sur la&nbsp;digestion.</p>
<figure>
    <a href="#2023-02-11-traineau-apres-midi"
        title="Cliquer pour une version haute résolution">
        <picture>
            <source
                srcset="/static/david/2023/2023-02-11-traineau-apres-midi.webp 1512w"
                sizes="min(100vw, calc(100vh * 1512 / 2016))"
                type="image/webp">
            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
            <img
                src="/static/david/2023/2023-02-11-traineau-apres-midi.jpg"
                width="1512" height="2016"
                srcset="/static/david/2023/2023-02-11-traineau-apres-midi.jpg 1512w"
                sizes="min(100vw, calc(100vh * 1512 / 2016))"
                fetchpriority="high"
                decoding="sync"
                alt="Des personnes devant moi avec des traineaux, on voit mon ombre.">
        </picture>
    </a>
    <a href="#_" class="lightbox" id="2023-02-11-traineau-apres-midi">
        <picture style="margin:0 auto;">
            <source
                srcset="/static/david/2023/2023-02-11-traineau-apres-midi.webp 1512w"
                sizes="min(100vw, calc(100vh * 1512 / 2016))"
                type="image/webp">
            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
            <img
                src="/static/david/2023/2023-02-11-traineau-apres-midi.jpg"
                width="1512" height="2016"
                srcset="/static/david/2023/2023-02-11-traineau-apres-midi.jpg 1512w"
                sizes="min(100vw, calc(100vh * 1512 / 2016))"
                fetchpriority="high"
                decoding="sync"
                alt="Des personnes devant moi avec des traineaux, on voit mon ombre.">
        </picture>
    </a>
    <figcaption>Pour ma part, c’est neige fraîche, quitte à forcer un peu plus je préfère soigner mon silence&nbsp;relatif.</figcaption>
</figure>
<p>Le campement est dans une crique qui laisse suffisamment d’espace pour ne pas être trop les un·es sur les autres. Je fais l’erreur de choisir stratégiquement un emplacement qui pourrait être au soleil le matin au détriment de la protection au vent. Ça va s’avérer assez critique plus tard car on va se prendre de bonnes bourrasques qui me feront craindre l’envol de mon tipi. J’enneige les bords avant de me coucher pour éviter la prise au vent par en-dessous, tant pis si ça condense cette nuit, c’est la dernière&nbsp;dehors.</p>
<figure>
    <a href="#2023-02-11-coucher-soleil"
        title="Cliquer pour une version haute résolution">
        <picture>
            <source
                srcset="/static/david/2023/2023-02-11-coucher-soleil.webp 1512w"
                sizes="min(100vw, calc(100vh * 1512 / 2016))"
                type="image/webp">
            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
            <img
                src="/static/david/2023/2023-02-11-coucher-soleil.jpg"
                width="1512" height="2016"
                srcset="/static/david/2023/2023-02-11-coucher-soleil.jpg 1512w"
                sizes="min(100vw, calc(100vh * 1512 / 2016))"
                fetchpriority="high"
                decoding="sync"
                alt="Le soleil se couche derrière des blocs de glace.">
        </picture>
    </a>
    <a href="#_" class="lightbox" id="2023-02-11-coucher-soleil">
        <picture style="margin:0 auto;">
            <source
                srcset="/static/david/2023/2023-02-11-coucher-soleil.webp 1512w"
                sizes="min(100vw, calc(100vh * 1512 / 2016))"
                type="image/webp">
            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
            <img
                src="/static/david/2023/2023-02-11-coucher-soleil.jpg"
                width="1512" height="2016"
                srcset="/static/david/2023/2023-02-11-coucher-soleil.jpg 1512w"
                sizes="min(100vw, calc(100vh * 1512 / 2016))"
                fetchpriority="high"
                decoding="sync"
                alt="Le soleil se couche derrière des blocs de glace.">
        </picture>
    </a>
    <figcaption>Je vous épargne les différents dégradés de rose qui ont suivi&nbsp;!</figcaption>
</figure>
<p>Le coucher de soleil est magnifique et je tente même un peu d’astrophotographie à l’iPhone, soyons fous. Un ragoût de bœuf était proposé pour les personnes qui ne voulaient pas être en autonomie complète. Je tente le coup et c’était bon mais je crois que je ne mange plus assez de viande pour supporter des portions d’expédition vu mon état de fatigue. Mes nouilles traditionnelles seraient probablement mieux passées. La soirée se passe plutôt bien et les températures restent&nbsp;agréables.</p>
<figure>
    <a href="#2023-02-11-astro-photographie"
        title="Cliquer pour une version haute résolution">
        <picture>
            <source
                srcset="/static/david/2023/2023-02-11-astro-photographie.webp 1512w"
                sizes="min(100vw, calc(100vh * 1512 / 2016))"
                type="image/webp">
            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
            <img
                src="/static/david/2023/2023-02-11-astro-photographie.jpg"
                width="1512" height="2016"
                srcset="/static/david/2023/2023-02-11-astro-photographie.jpg 1512w"
                sizes="min(100vw, calc(100vh * 1512 / 2016))"
                fetchpriority="high"
                decoding="sync"
                alt="Une tente rouge et Orion au-dessus.">
        </picture>
    </a>
    <a href="#_" class="lightbox" id="2023-02-11-astro-photographie">
        <picture style="margin:0 auto;">
            <source
                srcset="/static/david/2023/2023-02-11-astro-photographie.webp 1512w"
                sizes="min(100vw, calc(100vh * 1512 / 2016))"
                type="image/webp">
            <!-- The <img> tag is a fallback image (required in the <picture> tag) -->
            <img
                src="/static/david/2023/2023-02-11-astro-photographie.jpg"
                width="1512" height="2016"
                srcset="/static/david/2023/2023-02-11-astro-photographie.jpg 1512w"
                sizes="min(100vw, calc(100vh * 1512 / 2016))"
                fetchpriority="high"
                decoding="sync"
                alt="Une tente rouge et Orion au-dessus.">
        </picture>
    </a>
    <figcaption>C’est bruité et tout mais j’étais content que l’on distingue au moins&nbsp;Orion.</figcaption>
</figure>
<p>La seule frustration partagée de la journée c’est de ne pas pouvoir tester l’équipement chaud acheté pour l’occasion&#8239;! Mais bon on ne va pas chialer la bouche pleine non plus&nbsp;hein…</p>


  <nav>
    <p>
      
        <a href="/david/2023/aventure/"
          title="Liste de tous les articles 2023 associés à cette étiquette"
          >#aventure</a>
      
        <a href="/david/2023/foret/"
          title="Liste de tous les articles 2023 associés à cette étiquette"
          >#forêt</a>
      
        <a href="/david/2023/sociologie/"
          title="Liste de tous les articles 2023 associés à cette étiquette"
          >#sociologie</a>
      
      <a href="/david/#tags-2023"
        title="Liste de toutes les étiquettes 2023"
        ><svg class="icon icon-tags">
          <use xlink:href="/static/david/icons2/symbol-defs-2022-03.svg#icon-tags"></use>
        </svg>
        tous ?</a
      >
    </p>
  </nav>

<nav>
  <p class="center">
    <a rel="prev" href="/david/2023/02/10/" title="Publication précédente : Jour&nbsp;1">← Précédent</a> •
    <a href="/david/2023/" title="Liste des publications récentes">↑ En 2023</a>
     • <a rel="next" href="/david/2023/02/12/" title="Publication suivante : Jour&nbsp;3">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>