|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173 |
- <!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>
- 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>Sidération | nota-bene.org (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="#f0f0ea">
- <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
- <meta name="theme-color" content="#f0f0ea">
- <!-- Documented, feel free to shoot an email. -->
- <link rel="stylesheet" href="/static/david/css/style_2020-06-19.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 type="text/javascript">
- 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://nota-bene.org/Sideration">
-
- <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
-
- <article>
- <header>
- <h1>Sidération | nota-bene.org</h1>
- </header>
- <nav>
- <p class="center">
- <a href="/david/" title="Aller à l’accueil">🏠</a> •
- <a href="https://nota-bene.org/Sideration" title="Lien vers le contenu original">Source originale</a>
- </p>
- </nav>
- <hr>
- <main>
- <p>Je viens de revoir <a href="https://fr.wikipedia.org/wiki/Extr%C3%AAmement_fort_et_incroyablement_pr%C3%A8s_(film)" class="spip_out" rel="external"><cite>Extrêmement fort et incroyablement près</cite></a>, et ça m’évoque des émotions variées et complexes, difficiles à mettre en mots. C’est mon tort, ça, tout vouloir mettre en mots.</p>
-
- <p>Ça a réveillé, en tout cas, une émotion rare que j’ai vécue ces jours de 2001, qu’on est nombreux à avoir vécue je pense. Cette hébétude, autant une incapacité à comprendre qu’une incapacité à passer à autre chose, cette hypnose devant ces images en boucle de tours percutées, de tours fumantes, de tours effondrées, de gens qui courent dans la fumée lourde de cendres.</p>
-
- <p>Depuis deux mois, je suis bizarre. Je fais illusion, frénétique sur un réseau social, j’écris quelques haïkus, je joue à des défis d’écriture, mais le travail, lui ? Il n’avance pas, ou si peu. Là encore il fait illusion lors des réunions quotidiennes. Je suis à tout ce qui implique ma présence, j’y suis au sens d’une présence pleine et entière (à peu près) qui requiert mon attention, mon écoute, mes réponses, mes suggestions. C’est déjà pas mal, diront certains (et c’est une promesse que je peux encore redémarrer, pleinement et entièrement à ce que je ferai). Mais c’est presque tout. Le reste prend du retard. Je constate autour de moi que je ne suis pas tout seul, en tout cas parmi ceux qui osent aborder le sujet.</p>
-
- <p>Est-ce que c’est de la complaisance, de la fainéantise ? Bien sûr qu’on se pose la question. Bien sûr que je me demande si c’est la faute aux addictions faciles (réseau social, je te regarde), bien sûr que tous les jours je me fais une liste de choses à faire en me promettant qu’avec une « boucle de rétroaction positive » je serai bien content de l’avoir cochée en entier, parce qu’on est toujours content d’avoir fait ce qu’on s’est promis de faire, et qu’on ferme l’ordinateur le soir venu avec la satisfaction du travail accompli.</p>
-
- <p>Mais non, ce n’est pas de la complaisance (je l’ai connue de près, celle-là), ni de la fainéantise (je suis trop actif pour ça, trop occupé ne serait-ce qu’à courir après des chimères).</p>
-
- <p>En revoyant ce film, en revivant indirectement les émotions passées, je retrouve ce mot qui dit où j’en suis, où nous en sommes : sidération.</p>
-
- <p>Va savoir combien de temps ça va durer.</p>
-
- <p>(Mettre un nom sur les problèmes, c’est commencer à les résoudre.)</p>
-
- <p>Demain, je prends mon vélo (si j’ai le courage !) et je vais revoir des copains pas vus depuis deux mois. Premiers copains à revoir sans l’indirection d’un écran. Peut-être le début de la suite ?</p>
- </main>
- </article>
-
-
- <hr>
-
- <footer>
- <p>
- <a href="/david/" title="Aller à l’accueil">🏠</a> •
- <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
- <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
- <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
- <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
- </p>
- <template id="theme-selector">
- <form>
- <fieldset>
- <legend>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 type="text/javascript">
- 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>
|