davidbgk
/
larlet-fr-david-cache
Sledovat 1
Oblíbit 0
Rozštěpit 0
Zdrojový kód Vydání 0 Aktivita
A place to cache linked articles (think custom and personal wayback machine)
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
224 Revize
1 Větev
Strom: f8f4c58548
Větve Značky
${ item.name }
Vytvořit větev ${ searchTerm }
z „f8f4c58548“
${ noResults }
larlet-fr-david-cache/cache/7775553e1b47a7acd09205efe5a.../index.html

index.html 41KB
Surový Blame Historie

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>De l’impossible habitabilité de l’anthropocène (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="http://www.internetactu.net/2017/12/21/de-limpossible-habitabilite-de-lanthropocene/">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   De l’impossible habitabilité de l’anthropocène (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="http://www.internetactu.net/2017/12/21/de-limpossible-habitabilite-de-lanthropocene/">Source originale du contenu</a></h3>

  463.     <blockquote><p>A l’occasion de ses 10 ans, la <a href="https://www.hesge.ch/head/">Haute école d’art et de design de Genève</a> organisait un étrange colloque convoquant designers, artistes, philosophes, théoriciens, cinéastes… pour tracer des <a href="http://narrativesnearfuture.ch/">« histoires d’un futur proche »</a>. Une prospective aux frontières de la création et de la science. Parfois ébouriffante, parfois déconcertante. Retour sur une sélection de ces… narrations d’un futur qui est déjà là. </p></blockquote>

  464. 

  465. <h2>Plongés dans la confusion du temps de la métamorphose…</h2>

  466. 

  467. <p><img src="http://www.internetactu.net/wp-content/uploads/2017/12/morizot-diplomates-loups.jpg" alt="" class="alignright size-full wp-image-30738" srcset="http://www.internetactu.net/wp-content/uploads/2017/12/morizot-diplomates-loups.jpg 200w, http://www.internetactu.net/wp-content/uploads/2017/12/morizot-diplomates-loups-194x300.jpg 194w" sizes="(max-width: 200px) 100vw, 200px"/>Le philosophe Baptiste Morizot est notamment l’auteur des <em><a href="http://amzn.to/2BxLRm1">Diplomates, cohabiter avec les loups sur une nouvelle carte du vivant</a></em>, un essai surprenant aux frontières de l’écologie, de la philosophie et de l’anthropologie, qui interroge notre capacité à coexister avec la biodiversité en inventant de nouvelles formes d’échanges.</p>

  468. 

  469. <p><em>« Mon travail vise à répondre à un sentiment de confusion, de désorientation, d’égarement à l’égard de la conjoncture qui est à la nôtre. Lorsqu’on s’intéresse à l’écologie, on entend partout, on n’entend que… la crise systémique environnementale dans laquelle nous sommes entrés qui mène au réchauffement climatique, à la pollution globale et à la perte de la biodiversité. »</em> Si nous sommes autant abasourdis par ce phénomène, c’est non seulement par son ampleur, son impact, ses enjeux… mais aussi pour le philosophe, parce qu’on n’a pas de concepts pour rendre compte de cette confusion. D’où l’enjeu de parvenir à mieux qualifier la nature de cette confusion.  </p>

  470. 

  471. <p>La tradition philosophique occidentale n’a jamais été très à l’aise avec l’incertitude et l’instabilité. D’où, pour le philosophe, le besoin de déporter le regard, de chercher ailleurs les moyens de s’interroger autrement. C’est ce qui l’a conduit à s’intéresser à l’anthropologie, notamment via les travaux de Nastassja Martin, spécialiste du monde animiste du Grand Nord, qui a soutenu une thèse sur les <a href="https://fr.wikipedia.org/wiki/Gwich%27in_(peuple)">Gwich’in</a>, un peuple de chasseurs-cueilleurs du Grand Nord, entre l’Alaska et le Canada (voir son livre, <em><a href="http://amzn.to/2yYXvDz">Les âmes sauvages</a></em>). L’un des objets d’étude de Baptiste Morizot s’est porté sur le <a href="https://fr.wikipedia.org/wiki/Coyloup">Coywolf</a> (ou Coyloup, espèce hybride résultant du croisement de coyotes et de loups). Cet animal nouvellement documenté a la particularité d’être un hybride fécond naturel, au contraire du <a href="https://fr.wikipedia.org/wiki/Mulet">mulet</a>, au croisement de l’âne et de la jument, qui n’est pas fertile et qui est le résultat de l’action humaine. Cette espèce hybride a autant désorienté les biologistes que les Amérindiens. Pourtant, dans la cosmogonie animiste, la conception du monde naturel, de la forêt du Grand Nord, n’a rien à voir avec la nôtre. Pour les Gwich’in, la forêt est un espace socialisé de part en part. Ils entretiennent des relations avec tous les êtres de la forêt et ces relations (avec les ours, les loups, les rennes…) sont sociales, basées sur des comportements des uns par rapport aux autres. Pourtant, il reste des zones, des lieux, des êtres qui n’ont pas de statuts stabilisés, avec qui les Gwich’in n’ont pas stabilisé de relations sociales. A l’image des hommes de bois, des ombres de la forêt à qui on a attribue par exemple les coups de fusil qui ne sont pas partis… Qu’ils soient vivants, morts ou ombres… ces êtres sans statuts relationnels sont considérés comme des « êtres de la métamorphose ». Or, pour les Gwich’in, les « êtres de la métamorphose » ne sont pas que des créatures magiques ou invisibles. Pour eux, les Coywolf sont également des êtres de la métamorphose. Or, le développement de cette espèce semble directement lié à l’action de l’homme (notamment à la déforestation). Ce n’est pas la seule espèce hybride qui fait mentir la biologie : <a href="https://fr.wikipedia.org/wiki/Grolar">le Pizzly</a>, hybridation entre l’ours blanc et le grizzli n’a été observée pour l’instant qu’en captivité. En fait, la nouvelle biologie montre que <a href="https://fr.wikipedia.org/wiki/Hybride#Hybridation_chez_les_animaux">les hybrides sont plus nombreux qu’on le pense</a>. </p>

  472. 

  473. <p>Nous sommes nous-mêmes des hybrides de Sapiens et de Néandertaliens notamment. En microbiologie, nous sommes des symbiotes, nous cohabitons avec des millions de bactéries. <em>« Si on cesse d’opposer science occidentale et pensée animiste, et qu’on les mets côte à côte, nous sommes pris d’une confusion partagée. Les Gwich’in ne sont-ils pas mieux armés que nous, conceptuellement, pour dire la nature à l’époque dans laquelle nous sommes ? »</em> En entrant en dialogue avec cette anthropologie, on peut se poser la question de savoir si les êtres vivants avec qui on est en commerce dans ce contexte de métamorphose environnemental, sont peut-être aussi en métamorphoses ? <em>« Car dans le monde animiste, il y a un mot pour dire que les être de la métamorphose deviennent la norme, prolifèrent, il y a un terme pour dire que l’on ne sait plus prédire le climat ou le comportement de la rivière… On appelle ça le temps mythique. C’est un temps particulier. Une forme du temps dont la spécificité était d’être à l’origine du monde et qui à la fois continu à exister. C’est un temps des origines qui subsiste et continue à travailler le présent pour nous inviter à stabiliser le futur. »</em> </p>

  474. 

  475. <p><em>« Dans le temps du monde, on sait avec qui on entre en relation : on connait le comportement du loup, de la rivière, du caribou…, on sait comment entrer dans une relation soutenable avec eux. Dans le temps du mythe, les êtres et relations sont instables, métamorphiques, en train de se faire. Dans le temps du mythe, humains et animaux ne sont pas toujours distingués, les genres ne sont pas circonscrits. L’histoire des mythes, c’est l’histoire de personnages, de chamans, de héros… qui nouent des pactes avec les êtres de la métamorphose pour stabiliser des relations viables avec eux. Le temps du monde hérite de cette stabilité, permet de cohabiter de manière décente, honorable, soutenable, avec ceux avec qui nous partageons la terre. »</em> </p>

  476. 

  477. <p><em>« Est-ce que ça sert à quelque chose de comprendre notre temps comme un retour du temps du mythe ? »</em>, interroge le philosophe. Le temps du mythe, c’est le moment où les êtres de la métamorphose prolifèrent. Or, l’état des lieux de l’anthropocène nous présente un monde où ce que l’on doit réviser ce qu’on pensait de la terre. L’environnementaliste <a href="https://fr.wikipedia.org/wiki/James_Lovelock">James Lovelock</a> nous a montré qu’on n’avait rien compris. Que la terre, Gaïa, a le contrôle de ses propres variables. Qu’elle est aussi un être de la métamorphose. <a href="https://fr.wikipedia.org/wiki/Syndrome_d%27effondrement_des_colonies_d%27abeilles">Le syndrome de la disparition des abeilles</a>, souligne qu’on ne sait pas exactement pourquoi les abeilles disparaissent, pourquoi leurs comportements nous échappent. Or, les abeilles sont les principaux pollinisateurs du maraîchage, des plantes à fleurs sauvages…  </p>

  478. 

  479. <p>Et Baptiste Morizot de nous inviter à observer l’histoire de notre futur proche sous l’angle du retour du temps du mythe. Pour lui, cela nous permet de comprendre pourquoi la crise actuelle produit des effets de confusion. Notre confusion n’est pas seulement liée au fait qu’on n’ait pas accompli ce qu’on devait faire, ou le résultat du capitalisme… elle est liée à la prolifération des êtres de la métamorphose. Nous sommes aujourd’hui surpris de découvrir que les animaux ou la nature sont plus riches de compétences qu’on croyait. Les arbres ne sont pas que de la matière, comme l’a souligné Peter Wohlleben dans son bestseller <a href="http://amzn.to/2oTKZFL"><em>La vie secrète des arbres</em></a>. D’un coup, les statuts dans lesquels nous avions classé éclatent et exigent que nous inventions de nouvelles relations. </p>

  480. 

  481. <p>Pour inventer de nouvelles relations, nous allons devoir aller chercher des récits, des mythes, des métaphores… conclut Baptiste Morizot. Nous allons devoir inventer des formes, des figures, des images, des métaphores nouvelles, depuis les articles scientifiques jusqu’aux savoirs des sciences subversives. C’est ce qu’il a tenté de faire avec <em>Les diplomates</em> en pensant nos relations avec les loups en terme diplomatique, alors que les animaux ne sont pas pas capables de diplomatie selon la science moderne. Nous avons aussi besoin de résistance interspécifique comme nous y invite les paysans qui pour lutter contre Monsanto s’allient à l’Amarante, cette plante qui a développé une résistance au glyphosate, pour faire cause commune dans une même résistance collective. Pour le philosophe, ces exemples nous montrent comment réinventer des relations pour stabiliser des relations soutenables, décentes, avec les formes de vies avec lesquelles on partage la terre. </p>

  482. 

  483. <h2>Montrer nos confusions</h2>

  484. 

  485. <p>L’artiste <a href="http://marie.velardi.ch/">Marie Velardi</a> propose ensuite une belle lecture tout en faisant défiler des images de son dernier projet en cours, « Lettre de Terre-Mer ». Un projet qui s’intéresse au déplacement du trait de côte des littoraux. Des aquarelles qui montrent l’évolution dans le temps de nos relations à la terre et à la mer. S’inquiétant de l’évolution des relations des habitants aux transformations de leurs territoires, à leur mémoire, interrogeant l’évolution de cette zone d’échange à l’heure de la perspective de la montée des eaux, sous forme d’Atlas d’îles perdues et d’îles à retrouver… </p>

  486. 

  487. <p>L’artiste et cinéaste autrichien <a href="" http:=""/>Oliver Ressler produit des installations vidéos et s’intéresse surtout à la manière dont la société tente de s’organiser pour se réapproprier notre avenir. Il filme donc des Camps climatiques, des zones à défendre… il filme les résistances et les alternatives sociales. Pour l’activiste, le constat est clair. Le libre-échange est à l’origine du problème climatique, et pour s’opposer au réchauffement climatique, il faut donc d’abord s’opposer au libre-échange. Il montre des extraits de ses films : des actions de désobéissances civiles régulières, autour de la COP21 à Paris, à l’occasion d’une manifestation contre une mine à charbon à ciel ouvert en Allemagne, d’autres sur la Zone à défendre de Notre-Dame des Landes… </p>

  488. 

  489. <p>Khalil Joreige est cinéaste. Il travaille avec Joana Hadjithomas, tant et si bien qu’ils sont le plus souvent <a href="http://hadjithomasjoreige.com/">indissociables l’un de l’autre</a>. Ils sont devenus plasticiens et réalisateurs au lendemain des guerres civiles libanaises. C’est d’ailleurs à partir des traces de la guerre qui commençaient à disparaître avec les reconstructions qu’ils ont entamé le travail qu’ils présentent sur la scène de la Head. « Discordances/Unconformities » (exposé à Beaubourg jusqu’au 8 janvier) expose des carottages réalisés à Beyrouth, Athènes et Paris, sous forme de tubes de verre suspendus où s’empilent ces extractions. Cette succession de strate est là pour montrer une histoire complexe, montrer comment l’histoire s’inscrit dans la stratigraphie même des lieux. Une manière de constituer des savoirs sur ce qui est amené à disparaître, pour nous montrer ce qu’on n’arrive plus à voir. A travers ces pierres, l’enjeu est de nous interroger sur les menaces qui nous arrivent, puisqu’elles interrogent ce que nous faisons à notre monde. Nos villes sont à l’image de l’anthropocène, en recyclage permanent. Elles sont des palimpsestes où se lit l’occupation humaine, que nous ne cessons de régénérer, de tenter de régénérer par épuisement. </p>

  490. 

  491. <p><img src="http://www.internetactu.net/wp-content/uploads/2017/12/JoreigeHadjithomasTimeCapsules-1024x476.jpg" alt="" class="aligncenter size-large wp-image-30739" srcset="http://www.internetactu.net/wp-content/uploads/2017/12/JoreigeHadjithomasTimeCapsules-1024x476.jpg 1024w, http://www.internetactu.net/wp-content/uploads/2017/12/JoreigeHadjithomasTimeCapsules-300x139.jpg 300w, http://www.internetactu.net/wp-content/uploads/2017/12/JoreigeHadjithomasTimeCapsules-768x357.jpg 768w, http://www.internetactu.net/wp-content/uploads/2017/12/JoreigeHadjithomasTimeCapsules.jpg 1440w" sizes="(max-width: 1024px) 100vw, 1024px"/><br/>

  492. <em>Image : L’installation de Khalil Joreige et Joana Hadjithomas à Beaubourg.</em></p>

  493. 

  494. <h2>Nous n’avons pas d’images du futur</h2>

  495. 

  496. <p><img src="http://www.internetactu.net/wp-content/uploads/2017/12/couv-parrika-197x300.jpg" alt="" class="alignright size-medium wp-image-30748" srcset="http://www.internetactu.net/wp-content/uploads/2017/12/couv-parrika-197x300.jpg 197w, http://www.internetactu.net/wp-content/uploads/2017/12/couv-parrika-768x1170.jpg 768w, http://www.internetactu.net/wp-content/uploads/2017/12/couv-parrika-672x1024.jpg 672w, http://www.internetactu.net/wp-content/uploads/2017/12/couv-parrika.jpg 1460w" sizes="(max-width: 197px) 100vw, 197px"/><a href="https://jussiparikka.net/">Jussi Parikka</a> (<a href="https://twitter.com/juspar">@juspar</a>) est un théoricien des médias. Il est l’auteur de nombreux livres notamment <em><a href="https://www.uga-editions.com/menu-principal/actualites/a-paraitre/qu-est-ce-que-l-archeologie-des-media--282025.kjsp?RH=1494578964429">Qu’est-ce que l’archéologie des médias ?</a></em> (dont la traduction française doit paraître en janvier), qui s’intéresse « au fonctionnement matériel des appareils pour en comprendre les qualités occultes », « à l’anomalie et au marginal dans les cultures médiatiques », comme le souligne Yves Citton dans son dernier livre, <em><a href="http://amzn.to/2BFf6DJ">Médiarchie</a></em>. </p>

  497. 

  498. <p><em>« A quoi ressemble l’avenir ? Comment attraper le temps qui passe ? Une image peut-elle dire quelque chose du futur ? »</em>, interroge Jussi Parikka en montrant une image du dernier Blade Runner. <em>« Nous n’avons pas d’images du futur »</em>. Si nous en avons, elles émergent de l’imaginaire des paysages pollués, là où la pollution devient perceptible. Mais ces accumulations d’images de décharges et de déchets, symboles de l’anthropocène et de la destruction de notre économie morale, ne parviennent pas à faire sens, au contraire. Elle ne fait que nous dégouter de nous-mêmes. Ce futur déjà présent nous renvoie d’abord à notre propre passivité face au changement climatique, ce futur proche qui devient chaque jour un peu trop proche… </p>

  499. 

  500. <p><img src="http://www.internetactu.net/wp-content/uploads/2017/12/JussiParikkabyNova-1024x1024.jpg" alt="" class="aligncenter size-large wp-image-30740" srcset="http://www.internetactu.net/wp-content/uploads/2017/12/JussiParikkabyNova-1024x1024.jpg 1024w, http://www.internetactu.net/wp-content/uploads/2017/12/JussiParikkabyNova-150x150.jpg 150w, http://www.internetactu.net/wp-content/uploads/2017/12/JussiParikkabyNova-300x300.jpg 300w, http://www.internetactu.net/wp-content/uploads/2017/12/JussiParikkabyNova-768x768.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px"/><br/>

  501. <em>Image : Jussi Parikka sur la scène du colloque de la Head, <a href="https://twitter.com/nicolasnova/status/941343462896668672">photographié par Nicola Nova</a>.</em></p>

  502. 

  503. <p>L’apocalypse traverse de manière pervasive notre futur. Les scénarios de la guerre froide nous préparaient déjà au pire, et le pire est effectivement arrivé, même si ce n’est pas le même que celui qu’on attendait. Reste que nous avons besoin de nous défaire de ces images pour développer d’autres approches et d’autres discours. De décoloniser cet imaginaire posthumain, en utilisant par exemple les théories féministes qui appelaient déjà à faire face à l’apocalypse… Pour cela, il est nécessaire de travailler à d’autres formes de narration, comme s’y essaye Jussi Parikka sur la scène du colloque des 10 ans de la Head. Reste que la catastrophe se rapproche à mesure qu’on l’a décrit. Paysages dévastés, fleuves pollués, extraction de masse, pauvreté… <em>« 2100 est devenu l’horizon butoir de notre avenir proche »</em> Nous respirons déjà un nuage toxique qui ne cesse de se renforcer au-dessus de nous, souligne-t-il en montrant le développement de la pollution aux particules fines de nos villes, <a href="https://www.theguardian.com/environment/2017/oct/04/revealed-every-londoner-breathing-dangerous-levels-of-toxic-air-particle">comme Londres</a>, qui excède chaque jour un peu plus les seuils dits vitaux et supportables. Derrière ces transformations du monde que l’on habite, se joue également la transformation de nos sensorialités, de ce que l’on perçoit et de ce que nous sommes. </p>

  504. 

  505. <p>L’art s’est intéressé à l’air, comme ce fut le cas du <a href="https://fr.wikipedia.org/wiki/Art_and_Language">groupe Art &amp; langage</a> avec leur <a href="http://www.tate.org.uk/art/artworks/art-language-air-conditioning-show-air-show-frameworks-p80069">Air Conditioning Show</a> qui consistait en une salle vide climatisée accompagnée de simples textes collés aux murs pour souligner l’expérience que les percepteurs allaient vivre. Pourtant, c’est bien à ce niveau moléculaire, invisible, que la transformation opère. Amy Balkin et son <a href="http://tomorrowmorning.net/atmosphere">Guide atmosphérique</a> tente de décrire les influences de l’homme sur l’atmosphère, qu’elles soient chimiques, narratives, spatiales ou politiques, pour montrer comment les humains occupent, ont occupé ou envisagent d’occuper les atmosphères. <a href="http://luckysoap.com/thegatheringcloud/">The Gathering Cloud</a> de JR Carpenter, vise, lui, à aborder l’impact environnemental du cloud, l’informatique en nuage, comparée aux nuages dans le ciel, en soulignant que ni l’un ni l’autre ne sont des ressources infinies. </p>

  506. 

  507. <p>L’air pénètre notre corps. Compose l’environnement dans lequel nous vivons. Nous ne sommes pas armés pour nous en protéger. Or, l’air peut aussi nous faire mal… Et la terreur atmosphérique que fait planer sur nous l’évolution de notre atmosphère nous inquiète. Des particules s’accumulent désormais dans l’oxygène et ses premiers effets montrent que la menace se rapproche. En tant qu’humains, nous réagissons à ces transformations, sous forme d’irritations, de démangeaisons, de difficultés respiratoires. L’analyse chimique de la pollution de l’air et les cartes de pollution ou de radiation (comme l’accident de septembre qui a permis de repérer des traces radioactives sur l’Europe) forment les images techniques de l’anthropocène. Le tableau périodique des éléments de Mendelev montrait déjà ce qui existe et ne se voit pas nécessairement, comme les 4 éléments (l’air, la terre, le feu et l’eau) ont longtemps été l’une des explications du monde. Or, les transformations actuelles les transforment en retour. L’air brûle. La terre, stérile, se transforme en cendres. L’eau du robinet s’enflamme… Comme si des forces post-naturelles s’exprimaient déjà, tel que le soulignait le théoricien de la culture, <a href="http://socialscienceandhumanities.uoit.ca/cdms/faculty/gary-genosko.php">Gary Genosko</a>, dans sa conférence (<a href="https://www.youtube.com/watch?v=Ts0O0MoTpxM">vidéo</a>) sur les nouveaux éléments fondamentaux d’une planète contestée. </p>

  508. 

  509. <p>Quel avenir aurons-nous dans un monde où les éléments qui nous ont permis d’exister ne seront plus ? Telle est la question que semble nous adresser Jussi Parikka. </p>

  510. 

  511. <h2>Nous faut-il apprendre à dés-habiter le monde ?</h2>

  512. 

  513. <p><a href="https://vlorenzolana.myportfolio.com/">Vanessa Lorenzo</a> (<a href="https://twitter.com/VanessaLorenzoT">@vanessalorenzot</a>) est designer, chercheur, biohackeuse. Elle est responsable du biohacking Lab de Lausanne, <a href="http://www.hackuarium.ch/">Hackuarium</a> (<a href="https://twitter.com/hackuarium">@hackuarium</a>) et membre de la plateforme <a href="http://www.hackteria.org/">Hackteria</a> (<a href="https://twitter.com/hackteria">@hackteria</a>) qui promeut l’art biologique open source. </p>

  514. 

  515. <p>L’anthropocène est un révélateur des dégâts que nous avons causés au monde. <em>« Désormais, nous allons devoir faire face à des écosystèmes toxiques »</em>. Effectivement, souligne-t-elle, à la suite de Baptiste Morizot et de Jussi Parikka, nous allons avoir besoin de nouveaux modes d’abstraction pour réinventer la relation entre les êtres vivants, les plantes et les machines. C’est ce que tente d’évoquer son travail justement, à l’image du <a href="https://vlorenzolana.myportfolio.com/muskaria">Mossphone</a>, un dispositif qui tente d’utiliser la mousse comme outil de mesure du phénomène anthropique. Organismes pionniers, <a href="https://fr.wikipedia.org/wiki/Bryophyta">les mousses</a> ont été parmi les premiers colonisateurs de la planète. Dans l’arctique, on les utilise pour mesurer le niveau de métaux lourds. Dans les villes, pour mesurer le niveau de pollution. Le dispositif, lui, vise à nous permettre d’interagir émotionnellement avec une entité qui porte la trace des dégâts qu’on lui cause. En caressant la mousse, en s’imprégnant d’elle, celle-ci répond en émettant des sons (<a href="https://vimeo.com/236542747">vidéo</a>). </p>

  516. 

  517. <p><em>« Les changements environnementaux sont souvent invisibles. Piégés dans des données et des rapports scientifiques. D’où la nécessité d’outils pour les cartographier, de lampes pour les éclairer, pour les rendre visible. »</em> L’open source est un outil pour rendre la pollution invisible visible. C’est avec elle que Vanessa Lorenzo a voulu joué dans un autre dispositif, <a href="https://vlorenzolana.myportfolio.com/artefact">Camera Obscura</a> (<a href="https://vimeo.com/201855461">vidéo</a>), consistant à utiliser des bactéries pour mettre en évidence la présence de métaux lourds dans le Rhône. Or, plus les gens se penchent sur la caméra obscura, plus la pollution invisible devient visible, en déversant quelques gouttes d’encre noire dans un réservoir en verre. Le spectateur active la caméra et passe d’un échantillon à un autre, collecté en différents lieux. En présence de métaux lourds, ces échantillons réagissent et affichent différents niveaux de fluorescence à l’intérieur de la caméra. En retour, l’activation du dispositif lui-même pollue d’encre un réservoir en verre visible à l’extérieur de la caméra.</p>

  518. 

  519. <p/>

  520. <p>Pour Vanessa Lorenzo, ce dispositif vise justement à rendre visible la pollution et à montrer que nous y jouons un rôle. Pour elle, notre capacité à habiter l’anthropocène nécessite des outils pour nous permettre de mieux évaluer la réalité avec laquelle nous allons devoir cohabiter. C’est ici la bactérie qui devient le témoin la transformation que nous opérons sur le monde. Et c’est bien notre action qui en est le moteur. </p>

  521. <p>Autant d’interventions qui nous invitent à dés-habiter le monde. Peut-être plus parce que nous ne serons plus capables de l’habiter. Notre cohabitation avec un monde qui se transforme, avec un monde qui répond aux agressions que nous lui avons portées par d’autres formes d’agressions, semble effectivement révéler toute sa cruauté : celui de nous être parfaitement inhabitable. Plus qu’une nécessaire adaptation à une nouvelle réalité, <a href="http://www.internetactu.net/2015/10/15/vers-leffondrement-aurons-nous-encore-un-futur/">comme nous y invitent les collapsologues</a>, la confusion que le design, la philosophie et la critique des médias saisit, semble sans perspective aucune, autre que de nous ouvrir les yeux sur notre propre extinction. Glaçant. </p>

  522. <p>Hubert Guillaud</p>

  523.   </article>

  524. </section>

  525. 

  526. 

  527. <nav id="jumpto">

  528.   <p>

  529.     <a href="/david/blog/">Accueil du blog</a> |

  530.     <a href="http://www.internetactu.net/2017/12/21/de-limpossible-habitabilite-de-lanthropocene/">Source originale</a> |

  531.     <a href="/david/stream/2019/">Accueil du flux</a>

  532.   </p>

  533. </nav>

  534. 

  535. <footer>

  536.   <div>

  537.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  538.     <p>

  539.       Bonjour/Hi!

  540.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  541.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  542.     </p>

  543.     <p>

  544.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  545.     </p>

  546.     

  547.     <p>

  548.       Voici quelques articles choisis :

  549.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  550.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  551.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  552.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  553.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  554.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  555.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  556.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  557.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  558.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  559.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  560.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  561.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  562.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  563.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  564.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  565.     </p>

  566.     <p>

  567.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  568.     </p>

  569.     <p>

  570.       Je ne traque pas ta navigation mais mon

  571.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  572.       conserve des logs d’accès.

  573.     </p>

  574.   </div>

  575. </footer>

  576. <script type="text/javascript">

  577.   ;(_ => {

  578.     const jumper = document.getElementById('jumper')

  579.     jumper.addEventListener('click', e => {

  580.       e.preventDefault()

  581.       const anchor = e.target.getAttribute('href')

  582.       const targetEl = document.getElementById(anchor.substring(1))

  583.       targetEl.scrollIntoView({behavior: 'smooth'})

  584.     })

  585.   })()

  586. </script>