davidbgk
/
larlet-fr-david
Volgen 1
Ster 0
Vork 0
Code Publicaties 0 Activiteit
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
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.
203 Commits
1 Branch
Tree: 35655abca0
Branches Labels
${ item.name }
Maak branch ${ searchTerm }
van '35655abca0'
${ noResults }
larlet-fr-david/david/blog/2016/accompagner-enfant/index.html

index.html 33KB
Ruw Blame Geschiedenis

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835 
  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>Accompagner un enfant — 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.   <!-- Canonical URL for SEO purposes -->

  29.   <link rel="canonical" href="https://larlet.fr/david/blog/2016/accompagner-enfant/">

  30.   <!-- SEO/Semantic metadata -->

  31.   <meta name="description" content="La seule chose que je puisse et veuille t’offrir c’est de l’attention." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="La seule chose que je puisse et veuille t’offrir c’est de l’attention." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Accompagner un enfant" />

  34.   <meta name="twitter:card" content="summary" />

  35.   <meta name="twitter:creator" content="@davidbgk" />

  36.   <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2016/accompagner-enfant/" />

  37.   <meta property="og:type" content="article" />

  38.   <meta property="og:site_name" content="David Larlet (@davidbgk)" />

  39. 

  40.   <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/blog/2016/accompagner-enfant.jpg" />

  41. 

  42. 

  43. <style>

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

  45. html, body, div, span,

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

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

  48. del, dfn, em, img, ins,

  49. small, strike, strong, tt, var,

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

  51. fieldset, form, label, legend,

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

  53. article, aside, canvas, details, embed,

  54. figure, figcaption, footer, header, hgroup,

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

  56. time, mark, audio, video {

  57.   margin: 0;

  58.   padding: 0;

  59.   border: 0;

  60.   font-size: 100%;

  61.   font: inherit;

  62.   vertical-align: baseline;

  63. }

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

  65. article, aside, details, figcaption, figure,

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

  67. body { line-height: 1; }

  68. blockquote, q { quotes: none; }

  69. blockquote:before, blockquote:after,

  70. q:before, q:after {

  71.   content: '';

  72.   content: none;

  73. }

  74. table {

  75.   border-collapse: collapse;

  76.   border-spacing: 0;

  77. }

  78. 

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

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

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

  82. @font-face {

  83.   font-family: 'EquityTextB';

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

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

  86.   font-weight: 300;

  87.   font-style: normal;

  88.   font-display: swap;

  89. }

  90. @font-face {

  91.   font-family: 'EquityTextB';

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

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

  94.   font-weight: 300;

  95.   font-style: italic;

  96.   font-display: swap;

  97. }

  98. @font-face {

  99.   font-family: 'EquityTextB';

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

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

  102.   font-weight: 700;

  103.   font-style: normal;

  104.   font-display: swap;

  105. }

  106. 

  107. @font-face {

  108.   font-family: 'ConcourseT3';

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

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

  111.   font-weight: 300;

  112.   font-style: normal;

  113.   font-display: swap;

  114. }

  115. 

  116. 

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

  118. body {

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

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

  121.   background-color: #f0f0ea;

  122.   color: #07486c;

  123.   font-kerning: normal;

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

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

  126.   text-rendering: optimizeLegibility;

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

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

  129. }

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

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

  132. }

  133. em {

  134.   font-style: italic;

  135.   color: #323a45;

  136. }

  137. strong {

  138.   font-weight: bold;

  139.   color: black;

  140. }

  141. nav {

  142.   background-color: #323a45;

  143.   color: #f0f0ea;

  144.   display: flex;

  145.   justify-content: space-around;

  146.   padding: 1rem .5rem;

  147. }

  148.   nav:last-child {

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

  150.   }

  151.   nav a {

  152.     color: #f0f0ea;

  153.   }

  154.   nav abbr {

  155.     border-bottom: 1px dotted white;

  156.   }

  157. 

  158. h1 {

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

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

  161.   background-color: #e3e1e1;

  162.   color: #323a45;

  163.   text-align: center;

  164.   padding: 5rem 0 4rem 0;

  165.   width: 100%;

  166.   font-family: 'ConcourseT3';

  167.   display: flex;

  168.   flex-direction: column;

  169. }

  170.   h1.single {

  171.     padding-bottom: 10rem;

  172.   }

  173.   h1 span {

  174.     position: absolute;

  175.     top: 1vh;

  176.     left: 20%;

  177.     line-height: 0;

  178.   }

  179.     h1 span a {

  180.       line-height: 1.7;

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

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

  183.       background: #2d7474;

  184.       font-size: 1.3rem;

  185.       color: white;

  186.       text-decoration: none;

  187.     }

  188. h2 {

  189.   margin: 4rem 0 1rem;

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

  191.   padding-top: 1vh;

  192. }

  193. h3 {

  194.   text-align: center;

  195.   margin: 3rem 0 .75em;

  196. }

  197. hr {

  198.   height: .4rem;

  199.   width: .4rem;

  200.   border-radius: .4rem;

  201.   background: #07486c;

  202.   margin: 2.5rem auto;

  203. }

  204. time {

  205.   display: bloc;

  206.   margin-left: 0 !important;

  207. }

  208. ul, ol {

  209.   margin: 2rem;

  210. }

  211. ul {

  212.   list-style-type: square;

  213. }

  214. a {

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

  216.   text-decoration-thickness: 0.05em;

  217.   text-underline-offset: 0.09em;

  218. }

  219. article {

  220.   max-width: 50rem;

  221.   display: flex;

  222.   flex-direction: column;

  223.   margin: 2rem auto;

  224. }

  225.   article.single {

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

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

  228.     background: #f0f0ea;

  229.     padding: 2rem;

  230.   }

  231.   article p:last-child {

  232.     margin-bottom: 1rem;

  233.   }

  234. p {

  235.   padding: 0 .5rem;

  236.   margin-left: 3rem;

  237. }

  238.   p + p,

  239.   figure + p {

  240.     margin-top: 2rem;

  241.   }

  242. 

  243. blockquote {

  244.   background-color: #e3e1e1;

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

  246.   display: flex;

  247.   flex-direction: column;

  248.   align-items: center;

  249.   padding: 1rem;

  250.   margin: 1.5rem;

  251. }

  252.   blockquote cite {

  253.     font-style: italic;

  254.   }

  255.   blockquote p {

  256.     margin-left: 0;

  257.   }

  258. 

  259. figure {

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

  261.   background-color: #e3e1e1;

  262.   text-align: center;

  263.   padding: 1.5rem 0;

  264.   margin: 1rem 0 0;

  265.   font-size: 1.5rem;

  266.   width: 100%;

  267. }

  268.   figure img {

  269.     max-width: 250px;

  270.     max-height: 250px;

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

  272.     padding: 1px;

  273.   }

  274. figcaption {

  275.   padding: 1rem;

  276.   line-height: 1.4;

  277. }

  278. aside {

  279.   display: flex;

  280.   flex-direction: column;

  281.   background-color: #e3e1e1;

  282.   padding: 1rem 0;

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

  284. }

  285.   aside p {

  286.     max-width: 50rem;

  287.     margin: 0 auto;

  288.   }

  289. 

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

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

  292.   font-size: 1rem;

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

  294. }

  295. h1 {

  296.   font-size: 1.9rem;

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

  298. }

  299. h2 {

  300.   font-size: 1.6rem;

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

  302. }

  303. h3 {

  304.   font-size: 1.35rem;

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

  306. }

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

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

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

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

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

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

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

  314.     margin-left: 0;

  315.   }

  316.   h1 {

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

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

  319.   }

  320.   h2 {

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

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

  323.   }

  324.   h3 {

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

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

  327.   }

  328. }

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

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

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

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

  333.      but if our baseline value was not expressed

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

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

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

  337.     line-height: 1.5em;

  338.   }

  339.   p, li, pre, details {

  340.     margin-left: 3rem;

  341.   }

  342.   h1 {

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

  344.     line-height: 1.2em;

  345.   }

  346.   h2 {

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

  348.     line-height: 1.3em;

  349.   }

  350.   h3 {

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

  352.     line-height: 1.4em;

  353.   }

  354.   figure img {

  355.     max-width: 500px;

  356.     max-height: 500px;

  357.   }

  358. }

  359. 

  360. figure.unsquared {

  361.   margin-bottom: 1.5rem;

  362. }

  363.   figure.unsquared img {

  364.     height: inherit;

  365.   }

  366. 

  367. 

  368. 

  369. @media print {

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

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

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

  373.     text-decoration: underline;

  374.     text-shadow: none !important;

  375.     background-image: none !important;

  376.     background: white;

  377.     color: black;

  378.   }

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

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

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

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

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

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

  385.   img {

  386.     max-width: 250px !important;

  387.     max-height: 250px !important;

  388.   }

  389.   nav, aside { display: none; }

  390. }

  391. 

  392. ul.with_columns {

  393.   column-count: 1;

  394. }

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

  396.   ul.with_columns {

  397.     column-count: 2;

  398.   }

  399. }

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

  401.   ul.with_columns {

  402.     column-count: 3;

  403.   }

  404. }

  405. ul.with_two_columns {

  406.   column-count: 1;

  407. }

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

  409.   ul.with_two_columns {

  410.     column-count: 1;

  411.   }

  412. }

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

  414.   ul.with_two_columns {

  415.     column-count: 2;

  416.   }

  417. }

  418. 

  419. .gallery {

  420.   display: flex;

  421.   flex-wrap: wrap;

  422.   justify-content: space-around;

  423. }

  424.   .gallery figure img {

  425.     margin-left: 1rem;

  426.     margin-right: 1rem;

  427.   }

  428.   .gallery figure figcaption {

  429.     font-family: 'ConcourseT3'

  430.   }

  431. 

  432. footer {

  433.   font-family: 'ConcourseT3';

  434.   display: flex;

  435.   flex-direction: column;

  436.   border-top: 3px solid white;

  437.   padding: 4rem 0;

  438.   background-color: #07486c;

  439.   color: white;

  440. }

  441.   footer > * {

  442.     max-width: 50rem;

  443.     margin: 0 auto;

  444.   }

  445.   footer a {

  446.     color: #f1c40f;

  447.   }

  448.   footer .avatar {

  449.     width: 200px;

  450.     height: 200px;

  451.     border-radius: 50%;

  452.     float: left;

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

  454.     shape-outside: circle();

  455.     margin-right: 2rem;

  456.     padding: 2px 5px 5px 2px;

  457.     background: white;

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

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

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

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

  462.   }

  463. </style>

  464. 

  465. <h1 class="single">

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

  467.   Accompagner un enfant

  468.   <time>Publié le 27 novembre 2016</time>

  469. </h1>

  470. <article class="single">

  471.   <p>Alexandre,</p>

  472. <p>Voici le compte-rendu d’une expérience, celle de ces <a href="/david/blog/2013/premier-regard/">trois dernières années</a>. Je ne sais pas si tu auras la volonté ou la capacité de lire ce texte à un moment de ta vie, je le produis en guise de mémoire et peut-être de pistes à explorer pour toi ou d’autres. Ou pas, sa durée de vie est liée à l’attention que je porte à mes textes. Il est empli d’incertitudes et de doutes que je te souhaite d’avoir un jour à ton tour.</p>

  473. <p>Ces années ont été parsemées d’émotions, de peurs, d’apprentissages, de culpabilités, de bonheurs, de stress en tout genres, d’amour, de contradictions et de bienveillance. À tel point qu’il est difficile de classifier ou d’ordonner cela. Je vais tenter de m’en référer à la souvenance que j’en ai.</p>

  474. <h2>Conception</h2>

  475. <blockquote>

  476. <p>La crise consiste justement dans le fait que l’ancien meurt et que le nouveau ne peut pas naître : pendant cet interrègne on observe les phénomènes morbides les plus variés […] Le vieux monde se meurt, le nouveau monde tarde à apparaître et dans ce clair-obscur surgissent les monstres.</p>

  477. <p><cite>Antonio Gramsci</cite></p>

  478. </blockquote>

  479. <p>Ta conception biologique a été simple. C’est tout le processus en amont qui a été très long pour accepter de mettre au monde un nouvel être. Pour gagner la confiance suffisante en moi, en nous et dans les autres. J’envie parfois presque les personnes qui ne se posent pas toutes ces questions mais j’ai l’illusion de croire qu’elles passent peut-être à côté de l’essentiel : cette remise en question permanente.</p>

  480. <p>J’espère me tromper en voyant surgir petit à petit des monstres qui ont de plus en plus de pouvoir. Il va sûrement falloir apprendre à vivre avec car nous évoluons au sein du même environnement. Je souhaite pour autant ne faire peser aucun espoir sur tes épaules. Sois.</p>

  481. <h2>Être</h2>

  482. <blockquote>

  483. <p>Pensez-y en cette nouvelle année scolaire, vos élèves apprendront beaucoup plus ce que vous êtes que seulement ce que vous savez. Vous êtes ce que vous savez. Si les apprenants apprennent ce que vous êtes, ils apprendront nécessairement ce que vous savez. Par contre, ils ne deviendront jamais ce que vous êtes en apprenants seulement ce que vous savez. Vous pouvez relire ce paragraphe plus d’une fois.</p>

  484. <p>Il vous restera à régler la question qui tue: « Les élèves sont-ils intéressés à devenir ce que vous êtes ? »</p>

  485. <p><cite><em><a href="https://didapro.me/2016/08/28/etre-ce-que-lon-enseigne/">Être ce que l’on enseigne!</a></em> (<a href="/david/cache/407523e7b6630fbf3ac5580422bda8a5/">cache</a>)</cite></p>

  486. </blockquote>

  487. <p>Lorsque tu as découvert l’air libre, j’ai envoyé un message à la famille proche : « Alexandre est né » et l’on m’a reproché d’avoir été trop bref. Je pense au contraire avoir été trop long. « Alexandre est » aurait amplement suffit. Et pourtant je ne saurais dater précisément ta naissance qui a eue lieue bien avant cette libération. Si la vie est un état, la mise au monde est davantage un processus qu’une date, et celui-ci est toujours en cours.</p>

  488. <h2>Vivant</h2>

  489. <blockquote>

  490. <p>Un adulte créatif est un enfant qui a survécu.</p>

  491. <p>Ursula K. Le Guin</p>

  492. </blockquote>

  493. <p>Trois ans et tu es toujours vivant. J’aime ta vitalité et j’essaye d’interférer le moins possible avec ta créativité et tes expériences car je considère que ce sont des instants très importants. J’aime voir l’étincelle dans cet œil qui préfigure de nouvelles connexions neuronales. J’aime que tu t’essayes à l’humour. J’aime ta capacité de concentration quand tu souhaites comprendre quelque chose. Ou quand tu t’enfermes dans ta chambre pour dessiner un cachalot.</p>

  494. <p>Tu as vu très peu d’écrans pour l’instant. Ton imaginaire s’alimente beaucoup dans les livres dont la sélection s’avère être de plus en plus compliquée pour éviter la violence sans pour autant tomber dans le moralisateur. Tu n’as pas été sur beaucoup d’écrans non plus, ton existence numérique semble tellement futile en regard de la richesse d’autres interactions.</p>

  495. <h2>(Non)Violence</h2>

  496. <blockquote>

  497. <p>Enfance sans confiance n’est que ruine de l’Humanité.</p>

  498. </blockquote>

  499. <p>C’est la principale raison pour laquelle nous sommes allés au Québec. L’envie de trouver un cadre différent, avec moins de violence à la fois physique et psychologique. L’humain est ainsi fait qu’il a besoin de boucs-émissaires, les régions inhospitalières ont cet avantage de moins s’en prendre aux minorités qu’au climat. Ce choix fut particulièrement difficile car il impliquait une mise à distance vis-à-vis de la famille.</p>

  500. <p>En te faisant confiance, je n’ai pas besoin de violence. En limitant les stress, je réduis les sources de tensions. C’est un luxe qui demande <a href="/david/stream/2015/01/24/">de l’espace et du temps</a>. Et de la <a href="/david/stream/2015/08/19/">volonté</a>. Le résultat est pour l’instant bien au-delà de mes espérances et je me demande ce que cela va produire par la suite.</p>

  501. <h2>Mimétisme</h2>

  502. <blockquote>

  503. <p><strong>Grandir c’est se spécialiser.</strong> L’adulte n’est pas moins intelligent, il est <em>spécialisé</em> : <strong>spécialisé dans sa langue, dans sa culture, dans sa pensée, dans ses comportements sociaux, etc. Et vivre avec l’enfant, c’est participer à sa spécialisation.</strong> Nos façons de parler, de réagir, ce que nous faisons avec lui ou devant lui, va littéralement participer au <em>câblage</em> de son cerveau.</p>

  504. <p><cite><em><a href="https://www.celinealvarez.org/plasticite-pour-le-meilleur-ou-pour-le-pire">Les lois naturelles de l’enfant</a></em> (<a href="/david/cache/85f366cbdabe0217a6ee79d66d1b5561/">cache</a>)</cite></p>

  505. </blockquote>

  506. <p>Je constate chaque jour à quel point l’inné est mince face à l’acquis. La co-évolution culture-génome théorique me semble être clairement déséquilibrée en pratique et ce déséquilibre tend à s’accentuer. Cela donne une incroyable responsabilité à l’accompagnant qui en vient à guider quasi malgré lui. Partager ses expériences sans orienter est un vrai challenge. Faire s’épanouir un libre arbitre et un esprit critique qui ne soient pas les nôtres.</p>

  507. <p>Je ne cherche pas pour autant à me mettre en spectateur comme <a href="/david/blog/2013/photographie-exclusion/">pourrait le faire un photographe</a>. Je préfère égoïstement partager avec toi sans penser aux <em>likes</em> des proches. J’aime participer à cet apprentissage et j’essaye autant que possible d’avoir des moments explicites d’échanges qui ne soient pas encombrés de <a href="/david/blog/2016/illusion-sociale/">flatulences numériques</a>. <strong>La seule chose que je puisse et veuille t’offrir c’est de l’attention.</strong></p>

  508. <h2>Alimentation</h2>

  509. <p>Tu manges ce que tu veux et presque quand tu veux. Tu manges souvent froid. On mange souvent devant un spectacle bien plus enthousiasmant que la télévision. Je finis beaucoup de plats (froids aussi). Aucun repas n’est équilibré. Aucune semaine ne semble déséquilibrée pour autant. Tes goûts évoluent d’un jour sur l’autre et me font reconsidérer cette notion.</p>

  510. <p>Il y a des moments où le parasitisme devient symbiose et cela me met en joie. Je réalise que l’accompagnement est réciproque, ce qui garantit sa pérennité. En plus du savoir-faire et du savoir-être, il y aurait un savoir-échanger à développer ensemble, la famille étant ce pot commun dont nous sortons tous grandis.</p>

  511. <h2>Instruction</h2>

  512. <p>Je me suis renseigné sur de <a href="/david/blog/2016/motessori-steiner-waldorf/">nombreuses formes d’instructions</a>. On a visité des écoles plus ou moins traditionnelles. Difficile de trouver un lieu qui soit en accord avec nos valeurs. Peut-être que l’instruction en famille sera finalement choisie au prix d’une certaine marginalisation. Si c’est l’option retenue, il faudra absolument que l’on trouve d’autres sources de connaissances et d’émotions que tes parents, aussi incroyables (et modestes !) soient-ils :p.</p>

  513. <p>De multiples inspirations pour une expérience forcément unique. Et en même temps avoir la volonté de partir d’une page blanche pour apprendre à l’écrire ensemble, d’expériences en réajustements. Chaque déséquilibre motivant le prochain pas, vaincre la peur récurrente du vide en se faisant confiance mutuellement.</p>

  514. <h2>Tabous</h2>

  515. <p><a href="/david/stream/2015/10/31/">Appartenance</a>, fierté, amour, chantage, beauté. Il y a des jugements que je me refuse à ton égard car je ne les trouve pas sains. Je ne veux pas que tu aies besoin de mon regard pour te trouver beau. Je ne souhaite pas introduire de chantage entre nous, encore moins affectif, c’est trop facile. Il ne peut y avoir d’amour dans une relation imposée comme celle d’un lien de filiation. C’est autre chose. Dans la fierté réside un espoir initial égoïste, une projection que l’on atteint enfin.</p>

  516. <p>Ces termes ne sont pas tabous pour autant et nous aurons l’occasion d’échanger beaucoup plus longuement sur ces sujets. Et <a href="/david/blog/2013/conseils-pere/">plein d’autres</a>. Tu m’auras vraisemblablement fait changer d’ici là.</p>

  517. <h2>Conclusion</h2>

  518. <p>Il n’y a pas de conclusion. La futilité du quotidien reprend son droit. La beauté de l’éphémère et du moment présent. La conscience de vivre ensemble pleinement. L’inconscience de savoir que ça ne pourra durer éternellement. L’intime croyance qu’un lien se tisse durablement entre deux hommes qui se transforment.</p>

  519. <p>Aujourd’hui c’était une chouette journée. Hier pas mal non plus. Et demain ? On verra bien. Ensemble ? Avec plaisir !</p>

  520. </article>

  521. 

  522. 

  523.   <figure class="image" property="schema:image">

  524.     <img src="/static/david/blog/2016/accompagner-enfant.jpg" alt="" />

  525.   </figure>

  526. 

  527. 

  528. 

  529. <nav id="jumpto">

  530.   <p>

  531.     <a rel=prev href="/david/blog/2016/tools-teams/">← Tools and teams</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2016/blogrolls-decouverte/">Blogrolls et découverte →</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.         Les dernières publications hebdomadaires sont :

  549.       </p>

  550.       <ul class="with_columns">

  551. 

  552.           <li>

  553.             <a href="/david/stream/2019/12/31/">Merci</a>

  554.           </li>

  555. 

  556.           <li>

  557.             <a href="/david/stream/2019/12/27/">Intemporels</a>

  558.           </li>

  559. 

  560.           <li>

  561.             <a href="/david/stream/2019/12/24/">Outils</a>

  562.           </li>

  563. 

  564.           <li>

  565.             <a href="/david/stream/2019/12/17/">Origines</a>

  566.           </li>

  567. 

  568.           <li>

  569.             <a href="/david/stream/2019/12/10/">Publier</a>

  570.           </li>

  571. 

  572.           <li>

  573.             <a href="/david/stream/2019/12/03/">En forêt</a>

  574.           </li>

  575. 

  576.           <li>

  577.             <a href="/david/stream/2019/11/26/">Ecocentric</a>

  578.           </li>

  579. 

  580.           <li>

  581.             <a href="/david/stream/2019/11/19/">Se livrer</a>

  582.           </li>

  583. 

  584.           <li>

  585.             <a href="/david/stream/2019/11/12/">Dépendances</a>

  586.           </li>

  587. 

  588.           <li>

  589.             <a href="/david/stream/2019/11/05/">Positif</a>

  590.           </li>

  591. 

  592.           <li>

  593.             <a href="/david/stream/2019/10/29/">Dettes</a>

  594.           </li>

  595. 

  596.           <li>

  597.             <a href="/david/stream/2019/10/22/">Privilèges</a>

  598.           </li>

  599. 

  600.           <li>

  601.             <a href="/david/stream/2019/10/15/">Discrétion</a>

  602.           </li>

  603. 

  604.           <li>

  605.             <a href="/david/stream/2019/10/08/">Désespérance</a>

  606.           </li>

  607. 

  608.           <li>

  609.             <a href="/david/stream/2019/10/01/">Présent</a>

  610.           </li>

  611. 

  612.           <li>

  613.             <a href="/david/stream/2019/09/24/">Manifester</a>

  614.           </li>

  615. 

  616.           <li>

  617.             <a href="/david/stream/2019/09/17/">Arpenter</a>

  618.           </li>

  619. 

  620.           <li>

  621.             <a href="/david/stream/2019/09/10/">Nostalgie</a>

  622.           </li>

  623. 

  624.           <li>

  625.             <a href="/david/stream/2019/09/03/">Déconstruire</a>

  626.           </li>

  627. 

  628.           <li>

  629.             <a href="/david/stream/2019/08/27/">Documenter</a>

  630.           </li>

  631. 

  632.           <li>

  633.             <a href="/david/stream/2019/08/20/">Frustration</a>

  634.           </li>

  635. 

  636.           <li>

  637.             <a href="/david/stream/2019/08/13/">Holisme</a>

  638.           </li>

  639. 

  640.           <li>

  641.             <a href="/david/stream/2019/08/06/">1%</a>

  642.           </li>

  643. 

  644.           <li>

  645.             <a href="/david/stream/2019/07/30/">Exemplarité</a>

  646.           </li>

  647. 

  648.           <li>

  649.             <a href="/david/stream/2019/07/23/">Timelines</a>

  650.           </li>

  651. 

  652.           <li>

  653.             <a href="/david/stream/2019/07/16/">Écoute</a>

  654.           </li>

  655. 

  656.           <li>

  657.             <a href="/david/stream/2019/07/02/">Anxiété</a>

  658.           </li>

  659. 

  660.           <li>

  661.             <a href="/david/stream/2019/06/21/">À lier</a>

  662.           </li>

  663. 

  664.           <li>

  665.             <a href="/david/stream/2019/06/14/">Pauvreté</a>

  666.           </li>

  667. 

  668.           <li>

  669.             <a href="/david/stream/2019/06/07/">Amateur</a>

  670.           </li>

  671. 

  672.           <li>

  673.             <a href="/david/stream/2019/05/31/">Pollution</a>

  674.           </li>

  675. 

  676.           <li>

  677.             <a href="/david/stream/2019/05/24/">Apaisement</a>

  678.           </li>

  679. 

  680.           <li>

  681.             <a href="/david/stream/2019/05/10/">Folie</a>

  682.           </li>

  683. 

  684.           <li>

  685.             <a href="/david/stream/2019/05/03/">Sympathie</a>

  686.           </li>

  687. 

  688.           <li>

  689.             <a href="/david/stream/2019/04/12/">Péremption</a>

  690.           </li>

  691. 

  692.           <li>

  693.             <a href="/david/stream/2019/04/05/">Définitions</a>

  694.           </li>

  695. 

  696.           <li>

  697.             <a href="/david/stream/2019/03/29/">Acceptation</a>

  698.           </li>

  699. 

  700.           <li>

  701.             <a href="/david/stream/2019/03/22/">Dissonance</a>

  702.           </li>

  703. 

  704.           <li>

  705.             <a href="/david/stream/2019/03/15/">Reconnaissance</a>

  706.           </li>

  707. 

  708.           <li>

  709.             <a href="/david/stream/2019/03/08/">Lecture</a>

  710.           </li>

  711. 

  712.           <li>

  713.             <a href="/david/stream/2019/03/01/">Journaux</a>

  714.           </li>

  715. 

  716.           <li>

  717.             <a href="/david/stream/2019/02/22/">Écriture</a>

  718.           </li>

  719. 

  720.           <li>

  721.             <a href="/david/stream/2019/02/15/">Kyriarchie</a>

  722.           </li>

  723. 

  724.           <li>

  725.             <a href="/david/stream/2019/02/08/">Mots-serrures</a>

  726.           </li>

  727. 

  728.           <li>

  729.             <a href="/david/stream/2019/02/01/">Sans voie</a>

  730.           </li>

  731. 

  732.           <li>

  733.             <a href="/david/stream/2019/01/25/">Auto-diagnostic</a>

  734.           </li>

  735. 

  736.           <li>

  737.             <a href="/david/stream/2019/01/18/">Agilité</a>

  738.           </li>

  739. 

  740.           <li>

  741.             <a href="/david/stream/2019/01/11/">Métaphores</a>

  742.           </li>

  743. 

  744.           <li>

  745.             <a href="/david/stream/2019/01/04/">Balbutiements</a>

  746.           </li>

  747. 

  748.       </ul>

  749. 

  750.     <p>

  751.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  768.     </p>

  769.     <p>

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

  771.     </p>

  772.     <p>

  773.       Je ne traque pas ta navigation mais mon

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

  775.       conserve des logs d’accès.

  776.     </p>

  777.   </div>

  778. </footer>

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

  780.   ;(_ => {

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

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

  783.       e.preventDefault()

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

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

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

  787.     })

  788.   })()

  789. </script>

  790. 

  791.   <script>

  792.   /* Service workers */

  793.   if (navigator.serviceWorker) {

  794.     window.addEventListener('load', function () {

  795.       var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'

  796.       function sendLinks (selector) {

  797.         var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {

  798.           return link.getAttribute('href')

  799.         })

  800.         links.push(location.pathname)  // Put the current page in cache too.

  801.         navigator.serviceWorker.controller.postMessage({ links: links })

  802.       }

  803.       navigator.serviceWorker.getRegistration()

  804.         .then(function (registration) {

  805.           if (!registration || !navigator.serviceWorker.controller) {

  806.             return navigator.serviceWorker.register('/serviceworker.js')

  807.               .then(navigator.serviceWorker.ready)

  808.               .then(function () {

  809.                 console.log('[ServiceWorker] Ready to go!')

  810.               })

  811.               .catch(console.error.bind(console))

  812.           } else {

  813.             console.log('[ServiceWorker] Send links via registration')

  814.             sendLinks(selector)

  815.           }

  816.         })

  817.       navigator.serviceWorker.addEventListener('controllerchange', function () {

  818.         console.log('[ServiceWorker] Send links via controller change')

  819.         sendLinks(selector)

  820.       })

  821.       navigator.serviceWorker.addEventListener('message', function (event) {

  822.         var link = document.querySelector('a[href="' + event.data.link + '"]')

  823.         if (event.data.status && link) {

  824.           link.style.backgroundColor = '#2d7474'

  825.           link.style.color = '#f0f0ea'

  826. 

  827.             link.setAttribute('title', 'En cache pour consultation sans connexion')

  828. 

  829.         }

  830.       })

  831.     })

  832.   } else {

  833.     console.warn('[ServiceWorker] No cache for old browsers.')

  834.   }

  835. </script>