davidbgk
/
larlet-fr-david-cache
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 Commits
1 Branch
Tree: 2e4d51a7b7
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '2e4d51a7b7'
${ noResults }
larlet-fr-david-cache/cache/cb26485a64ec6f6e508f969c62e.../index.html

index.html 24KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608 
  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>Coming out - Oui, et alors ? (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://edgard.fdn.fr/blog/index.php?post/2016/08/12/Coming-out">

  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.   Coming out - Oui, et alors ? (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://edgard.fdn.fr/blog/index.php?post/2016/08/12/Coming-out">Source originale du contenu</a></h3>

  463.     <div class="post-excerpt"><p>Ce texte est beaucoup plus personnel que ce que je publie d'habitude. Mais c'est mon blog à moi, et je l'ai mis dans la rubrique <q>Perso</q>, alors je fais bien comme je veux. Il a été écrit en décembre 2015 (pour les gens qui voudront suivre les références, compter les dates, savoir si c'est d'eux que je parle, etc, ça compte).</p>

  464. 

  465. <p>J'ai d'abord diffusé ce texte à quelques personnes, des intimes, mais il était destiné à être publié. Il me semble qu'un an plus tard, c'est bien comme délai. La formulation en est volontairement ambigüe, complexe. Le <em>tu</em> à qui je m'adresse n'est pas le même d'une phrase à l'autre. Parfois c'est une personne précise, parfois c'est toi, lecteur. C'est fait exprès.</p>

  466. 

  467. 

  468. <p>Le texte étant beaucoup plus personnel que ce que je publie d'habitude, je n'ai pas ouvert les commentaires. Ils n'ont pas à l'être. Si tu veux venir m'en parler, mes DM sur touitteurs sont ouverts. Tu peux aussi me joindre par Jabber, par Irc, par plein de méthodes en fait. Et je suis tout disposé à en discuter. Simplement, pas en public.</p>

  469. 

  470. 

  471. <p>Et bien entendu, le titre est trompeur. Comme toujours chez moi :)</p></div>

  472. 

  473. <div class="post-content"><h3>Peur</h3>

  474. 

  475. <p>J'ai peur de toi.</p>

  476. 

  477. 

  478. <p>J'ai toujours eu peur. Aussi loin que j'arrive à me souvenir ou presque. En fait j'ai le souvenir de peine et de douleur. Les gens me font du mal. Facilement. Sur le tard, avec du recul, j'ai fini par admettre que c'est sans le faire exprès, mais je ne l'ai pas toujours compris.</p>

  479. 

  480. 

  481. <p>Cette douleur crée une peur forcément. Cette douleur crée de la panique, un réflexe de fuite, le plus souvent morbide avec des envies de disparaître, là, tout de suite. J'ai appris à vivre avec.</p>

  482. 

  483. 

  484. <p>J'ai appris à développer une méthode pour y survivre facilement: ne pas me dévoiler, ne pas me lier aux autres, garder une saine distance. Oh, et surtout, ne pas montrer la moindre aspérité, pas d'écarts, pas de coups de gueule, tout dans la moyenne socialement acceptable de mon entourage, à tout prix éviter le conflit, quoi qu'il en coûte de compromis et de négation de moi-même. Tout pour ne pas être rejeté.</p>

  485. 

  486. 

  487. <p>Être rejeté par les méchants, par ceux que je ne connais pas, bon, passe encore, il me suffit de les mépriser et ça passe. Mais par mes camarades de jeu, par mon entourage, non.</p>

  488. 

  489. 

  490. <p>J'ai donc développé ce personnage assez lisse, facilement reconnaissable, et je l'ai mis sur scène. Il fait le beau en public, pour que je sois accepté, pour que j'ai une petite place où je n'aurais pas peur qu'on me dise de dégager. Et ça marche relativement bien: dans mon univers de geek, même si je n'ose jamais aller vers les autres, on ne me rejette pas. On n'y connaît que le barbu à cravate, on ne sait pas qui je suis, je parais le plus souvent... disons réservé, un peu distant, peut-être arrogant aussi.</p>

  491. 

  492. 

  493. <p>Je ne me lie que d'amitiés superficielles. Et si jamais elles risquent de ne plus l'être j'ai peur. Souvent je m'arrête à ça, et si je ne m'en rend compte que trop tard, alors j'ai mal, très facilement. Sans même qu'on me repousse, juste parce que je sais qu'on va me repousser. C'est une certitude, qui fait mal, bien qu'elle soit infondée. La confiance, croire que quelqu'un puisse m'apprécier, ça me prend des années, et le plus souvent je m'en passe.</p>

  494. 

  495. 

  496. <p>C'était assez stable. Pas très chaleureux, mais stable. Plutôt coupé de la majorité des gens, mais le plus souvent indolore.</p>

  497. 

  498. 

  499. <h3>Sortir</h3>

  500. 

  501. 

  502. <p>Il y a un peu plus d'un an, j'ai décidé de te parler. À toi. Parce que... je ne sais pas. Parce que ça n'avait aucun sens de garder cette distance que je garde toujours quoiqu'il puisse advenir, même saoul à en vomir mes tripes. À toi, il fallait que je parle, c'était forcé. Tu n'imagines pas la dose d'angoisse que j'ai pris dans la tête, à chaque phrase, pendant des mois. La peur. La panique. Épouvantable.</p>

  503. 

  504. 

  505. <p>La honte, la peur, l'envie de disparaître, immédiatement, de mourir pour ne plus ressentir ça. Je vis avec depuis longtemps. Il semble que les pensées morbides étaient là avant que je sache écrire si j'en crois les témoignages familiaux, mais peut-être pour d'autres raisons. Pourtant, je ne l'avais pas ressenti aussi fort et aussi souvent que cette année. Mais il fallait que je te parle, à toi. Je l'ai fait. Ça m'a coûté. Je suis content de l'avoir fait. Ça me coûte encore. Mais je veux continuer.</p>

  506. 

  507. 

  508. <p>J'ai avancé. J'ai parlé. À toi aussi, là, en train de compter et de te dire que, mais, ça ne fait pas un an qu'on se parle. C'est aussi de toi que je parle, et à toi que je m'adresse.</p>

  509. 

  510. 

  511. <p>Je te l'ai dit, que tu me fais peur. Je ne sais pas si tu l'as compris. J'ai une peur panique que tu ne me parles plus. À chaque fois que je te propose qu'on se voit, à chaque mot que je t'adresse, je sais au plus profond de moi que tu as n'importe quoi de plus intéressant à faire, que je te dérange.</p>

  512. 

  513. 

  514. <p>Mon cerveau-rationnel sait que tout ça n'a aucun sens. Quand tu croises mon visage dans la foule tu souris. Manifestement, objectivement, ça te fait plaisir de me voir. Et je le sais, et d'ailleurs ça me fait un bien fou de te voir sourire quand tu croises mon regard.</p>

  515. 

  516. 

  517. <p>Mais mon cerveau-intuitif n'en croit pas un mot. C'est par politesse, croit-il. En vrai tu t'en fous. Tu as mieux à faire. Je ne peux rien dire ou faire qui puisse t'intéresser. Et j'essaye d'arbitrer l'un contre l'autre.</p>

  518. 

  519. 

  520. <h3>Nommer</h3>

  521. 

  522. 

  523. <p>Parce que je ne vais pas bien, on m'a forcé à y réfléchir. Oh, j'aurais pu me jeter sous le métro, samedi matin. J'étais bien parti, je venais de céder à une impulsion de panique juste avant. Trois pas, un geste vif, et c'était bouclé. C'était la même impulsion, ça aurait été très vite. Mais j'ai préféré écouter la voix de la sagesse. Bon, le vrai bon conseil qu'on m'a fait admettre, c'est de consulter, mais je n'en suis pas là. Pour le moment je veux mettre un mot dessus.</p>

  524. 

  525. 

  526. <p>Je ne veux pas retourner dans le personnage policé. Enfin, pas pour tout le monde. Pas tout le temps. Pas pour toi, au moins. Même si tu crois que je parle de quelqu'un d'autre.</p>

  527. 

  528. 

  529. <p>Et puis au détour de mes lectures, ayant rejeté beaucoup d'autres mots, je suis tombé sur <a href="https://fr.wikipedia.org/wiki/Trouble_de_la_personnalit%C3%A9_%C3%A9vitante" title="fr">cette page de Wikipedia</a>. Je n'ai pas les bases pour savoir si c'est vraiment de ça que je souffre, je ne suis pas du métier. Mais ça ressemble. Beaucoup.</p>

  530. 

  531. 

  532. <p>Je n'ai rien appris de nouveau, sauf que j'ai un mot à mettre dessus. Et que depuis toujours je le gère. Je le gère en prenant sur moi pour venir te parler, pour revenir vers toi alors que j'ai peur et mal d'angoisse et de honte. Je le gère aussi par le personnage public, que je ne peux pas complètement virer si je veux survivre. Si tu m'aides un tout petit peu, il se pourrait même que j'arrive à le gérer facilement.</p>

  533. 

  534. 

  535. <p>Au moins, maintenant, j'ai mis un mot dessus. Le kraken dans ma tête a un nom, un visage provisoire, qu'il faudra probablement valider avec un pro, pour voir.</p>

  536. 

  537. 

  538. <h3>Post-Scriptum</h3>

  539. 

  540. 

  541. <p>Pour toi, le fan-boy, qui viens me lire, parce que tu lis tout ce que je publie, qui crois que je viens de te livrer un bout de ma vie privée qui ne te concerne pas. Tu te trompes. Ça te concerne. Au premier chef.</p>

  542. 

  543. 

  544. <p>Je sais parler sur scène. Je sais expliquer en public. Je sais écrire. Je n'ai pas le trac avant de parler à la radio ou à la télé. Je n'ai pas peur de ça. Mais je suis totalement incapable de venir te dire bonjour, à toi. Alors si toi tu as peur de me parler parce que tu m'as vu à la télé, on ne se parlera jamais. Et ce sera en partie de ta faute. Tu sais maintenant que c'est probablement plus facile pour toi de surmonter ta peur que pour moi.</p></div>

  545.   </article>

  546. </section>

  547. 

  548. 

  549. <nav id="jumpto">

  550.   <p>

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

  552.     <a href="http://edgard.fdn.fr/blog/index.php?post/2016/08/12/Coming-out">Source originale</a> |

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

  554.   </p>

  555. </nav>

  556. 

  557. <footer>

  558.   <div>

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

  560.     <p>

  561.       Bonjour/Hi!

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

  563.       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>).

  564.     </p>

  565.     <p>

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

  567.     </p>

  568.     

  569.     <p>

  570.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  587.     </p>

  588.     <p>

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

  590.     </p>

  591.     <p>

  592.       Je ne traque pas ta navigation mais mon

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

  594.       conserve des logs d’accès.

  595.     </p>

  596.   </div>

  597. </footer>

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

  599.   ;(_ => {

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

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

  602.       e.preventDefault()

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

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

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

  606.     })

  607.   })()

  608. </script>