davidbgk
/
larlet-fr-david
Наблюдаван 1
Харесван 0
Разклонения 0
Код Версии 0 Activity
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.
79 Ревизии
1 Клон
ИН на ревизия: ed213aa943
Клонове Маркери
${ item.name }
Create branch ${ searchTerm }
от 'ed213aa943'
${ noResults }
larlet-fr-david/david/blog/2019/faire-famille/index.html

index.html 37KB
Директен файл Blame История

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913 
  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>Faire famille — 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/2019/faire-famille/">

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

  31.   <meta name="description" content="Un bout de chemin ensemble où l’on s’apprend des choses." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Un bout de chemin ensemble où l’on s’apprend des choses." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Faire famille" />

  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/2019/faire-famille/" />

  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/2019/faire-famille.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.   Faire famille

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

  469. </h1>

  470. <article class="single">

  471.   <blockquote>

  472. <p>Premier territoire des irremplaçables donc, les parents. Pas nécessairement le père ou la mère. Mais celui qui incarne ou permet de concevoir l’histoire originelle. Celui qui n’est pas simplement la figure de lui-même, mais celle d’où vient l’enfant. « Faire famille » est souvent l’anti-chambre de « faire société », dans la mesure où même profondément, dissemblables, ils posent, respectivement, pour advenir durablement, une dialectique commune. « Faire famille », plus encore qu’avoir une famille. Qu’est-ce que « faire famille » ? « Faire famille » a subi autant de transformations que « faire société ». Et a révélé sa plasticité potentielle. L’invariant de la structure familiale n’est pas uniquement la copulation d’un homme et d’une femme mais l’agencement de leurs volontés créatrices et de leur ambition symbolique commune. « Faire famille », c’est entrer dans le symbolique. À la différence de la notion plus institutionnelle de famille, le « faire famille » stipule qu’il est toujours de l’ordre de la dynamique et de l’inachevé. La famille est une institution, certes. Mais le « faire famille » est la réalité dynamique, vitale, productrice, de cette institution. Il est ce qui préserve la durabilité de l’institution famille. « Faire famille », c’est faire de l’attention l’écosystème de l’individuation. C’est le lieu de la coproduction avec l’autre. Quel que soit le sexe des parents, ils sont, l’un et l’autre, garants de la préservation de la place de la différence, dans l’avénement de la structure familiale comme dans celle de sa consolidation symbolique. Les présents sont garants des absents. Si le « faire famille » s’invente, il le fait selon cette conditionnalité : être garant du respect de la place de ce que l’on n’est pas. Car le « faire famille » est par essence un mode de véridiction du manque originel. Seul on ne fait pas famille. Faire famille, c’est reconnaître que l’on ne fait pas seul unité. Que l’autre est nécessaire. « Faire famille », ce sera alors faire nécessairement récit de cela. Si l’autre manque dans la réalité quotidienne de la famille, il faut veiller à ménager ses réitérations. On « faire famille » autant avec les présents qu’avec les absents, on fait famille avec tous ceux qui ont inventé symboliquement et physiquement cette ambition de faire famille. Les fondations du devenir psychique de l’enfant sont directement liées aux interactions précoces qu’il a eues avec les adultes l’entourant, et notamment ses parents. La qualité de développement de l’enfant, sa vigueur, est le fruit de cette implication inaugurale. Si la notion de vulnérabilité est juste pour décrire l’insuffisance originelle et persistante de l’individu, elle insiste néanmoins trop sur la dimension négative de cette situation première. Être apte à construire son individuation grâce à l’attention reçue d’autrui et portée en retour ne se réduit pas à la notion de dépendance. Avoir eu besoin des autres pour grandir constitue une dépendance, une dette même. Mais c’est manquer la réalité féconde de l’enfant, de ce qu’il donne spontanément à ses parents, de la part vitale qu’il vient consolider. Le don rappelle que la vulnérabilité initiale ne peut s’assimiler à une faiblesse. Par la suite, se souvenir symboliquement de la dette, ce sera aussi grandir. Non pas la payer, mais s’en acquitter symboliquement, en assumant à son tour l’enjeu de transmission.</p>

  473. <p>[…]</p>

  474. <p>Éduquer, c’est toujours donner ce qu’on n’a pas reçu. Pallier l’insuffisance de sa propre enfance. Toujours l’ambition du pas de plus.</p>

  475. <p><cite><em>Les irremplaçables</em>, Cynthia Fleury</cite></p>

  476. </blockquote>

  477. <p><a href="/david/blog/2016/accompagner-enfant/">Trois ans</a>, six ans, des jalons indirectement inspirés du travail de Maria Montessori. Le sentiment de « faire famille » tout en essayant de laisser la place de s’ouvrir aux autres. Se protéger sans se renfermer tout en préservant nos atypies. Un grand écart dissonant, notre histoire.</p>

  478. <h2>Expérience</h2>

  479. <blockquote>

  480. <p><em>[à la table du petit déjeuner, 4 ans]</em><br />

  481. — Arrête de renifler s’il te plaît<br />

  482. — Pourquoi ?<br />

  483. — Parce que ça fait remonter le mucus et ton rhume va se transformer en sinusite ou en otite.<br />

  484. — Tu as déjà eu ça ?<br />

  485. — Oui.<br />

  486. — Est-ce que Mamouchka <em>[ma mère]</em> t’avait dit de ne pas le faire ?<br />

  487. — …</p>

  488. </blockquote>

  489. <p>Bon ça s’est soldé par une double otite mais ça m’a tout de même bien secoué le raisonnement de me prouver que je n’ai moi-même pu expérimenter cela qu’en n’écoutant pas un conseil parental.</p>

  490. <p>Est-on condamnés à reproduire les erreurs de ses parents ? Le curseur entre l’expérience et le conseil est en mouvement constant. Sans parler de la patience nécessaire à toute forme d’apprentissage et de transmission.</p>

  491. <h2>Sexualité</h2>

  492. <blockquote>

  493. <p><em>[en marchant, 5 ans]</em><br />

  494. — Est-ce que tu montes sur maman pour faire des bébés ?<br />

  495. — <em>[what!]</em> Euh, mmh, oui ça arrive ?!<br />

  496. — Maman doit être très forte alors car tu es gros et lourd.<br />

  497. — …</p>

  498. </blockquote>

  499. <p>Il semblerait que la réflexion ait été inspirée par un livre sur les dinosaures. Presque rassurant :D.</p>

  500. <p>Toujours est-il que j’ai souvent été désarçonné par des réflexions sur la sexualité que je n’anticipais pas avoir à détailler dès maintenant. J’espère être un peu mieux préparé maintenant. J’espère être toujours désarçonné aussi.</p>

  501. <h2>Séduction</h2>

  502. <blockquote>

  503. <p><em>[vient de tomber de l’escabeau, 5 ans]</em><br />

  504. — Papa, est-ce que je vais avoir un bleu ?<br />

  505. — Oui, probablement.<br />

  506. — Cool, je vais pouvoir séduire les femelles avec !<br />

  507. — …</p>

  508. </blockquote>

  509. <p>Il y a parfois des connexions qui laissent sans voix. Je suis bien content de prendre des notes pour me rappeler de ces moments. Il faudrait que je te demande ton consentement avant de les publier, je ne suis pas vraiment à l’aise avec cela et en même temps c’est une des façons les plus pérennes que j’ai de conserver ces traces.</p>

  510. <p><em>J’appréhende un peu le moment où l’on va regarder Avatar.</em></p>

  511. <h2>Mort</h2>

  512. <blockquote>

  513. <p><em>[en allant faire des courses, 5 ans]</em><br />

  514. — Papa, j’aimerais être du plastique.<br />

  515. — ?!<br />

  516. — J’aimerais ne pas être vivant.<br />

  517. — Ah…<br />

  518. — Parce que j’ai peur de mourir, je ne sais pas ce que ça fait.</p>

  519. </blockquote>

  520. <p>C’est aussi la période d’une prise de conscience de l’impermanence, de soi, de ses parents surtout. Cette peur qui ne te quittera pas de si tôt. Je ne pensais pas que tu perdrais cette forme d’innocence si rapidement. Et qu’elle serait si douloureuse.</p>

  521. <h2>Autonomie</h2>

  522. <blockquote>

  523. <p><em>[5 ans]</em><br />

  524. — Est-ce que des fois je peux avoir ma vie solitaire ?</p>

  525. </blockquote>

  526. <p>La naissance d’une personnalité est fascinante. Je suis vraiment heureux de pouvoir assister (à) cela au quotidien. J’aimerais trouver une implication qui nous corresponde. Et en même temps ça n’est pas quelque chose qui se trouve mais qui se vit.</p>

  527. <h2>Exemplarité</h2>

  528. <blockquote>

  529. <p><em>[Après avoir trouvé une pièce de puzzle manquante]</em><br />

  530. — T’es un génie papa, sans toi je ne pourrais pas vivre.<br />

  531. <em>[Un autre jour]</em><br />

  532. — J’aime tout l’univers sauf toi papa.</p>

  533. </blockquote>

  534. <p>Parfois, la parentalité est difficile à supporter. Parfois, ça fait du bien. Souvent, c’est très surprenant. J’ai l’impression que l’on assemble un puzzle ensemble, chacun y allant de sa pièce en encourageant l’autre à mettre la suivante. On ne sait pas trop ce que l’on essaye de représenter et c’est peut-être le plus important.</p>

  535. <h2>Compréhension</h2>

  536. <blockquote>

  537. <p><em>[Après une accolade nord-américaine]</em><br />

  538. — Pourquoi Vince et Papa ils se tapent pour se dire au revoir ?</p>

  539. </blockquote>

  540. <p>J’aime cette réflexion car elle me fait prendre conscience du peu de violences physiques qu’il y a dans notre famille et notre entourage.</p>

  541. <p>J’espère pouvoir conserver cela.</p>

  542. <h2>École</h2>

  543. <blockquote>

  544. <p><em>[Après deux semaines d’école]</em><br />

  545. — Il y a un ami qui s’appelle Ethan.<br />

  546. — Et ?<br />

  547. — Seitan !</p>

  548. </blockquote>

  549. <p>C’est un euphémisme d’écrire que de t’accompagner à l’école n’est pas une partie de plaisir. J’aurais aimé trouver une option plus adaptée aux défis qui t’attendent. Une façon d’appréhender le monde qui soit éloignée de la compétition et de la discrimination.</p>

  550. <p>Et en même temps, quoi de mieux que l’immersion dans un monde de diversité. Pouvoir expérimenter l’altérité au quotidien me semble être la seule façon de développer une empathie pour son prochain. Il n’y a qu’en vivant avec la différence que l’on arrive à la comprendre et à ne plus en avoir peur.</p>

  551. <blockquote>

  552. <p><em>[Ton enseignante il y a quelques jours]</em><br />

  553. — Votre enfant est une perle, il est la force tranquille de la classe.</p>

  554. </blockquote>

  555. <h2>Excuses</h2>

  556. <blockquote>

  557. <p><em>[Avant de s’endormir]</em><br />

  558. — Pourquoi ils ne se sont pas excusés de s’être moqué de moi alors que j’avais mal ?</p>

  559. </blockquote>

  560. <p>Difficile de parfois t’expliquer qu’il y a d’autres façons d’interagir et de penser. Que la bienveillance et la bien-traitance dépendent des personne qui pensent les appliquer à bon escient.</p>

  561. <p>Difficile de comprendre qu’il puisse y avoir de l’humour dans de telles circonstances… et encore plus difficile de t’expliquer des comportements que je ne comprends pas moi-même.</p>

  562. <p>Je n’ai pas beaucoup dormi cette nuit là.</p>

  563. <h2>Jeu</h2>

  564. <blockquote>

  565. <p><em>[<a href="/david/stream/2018/07/09/">Quatre ans</a>]</em><br />

  566. — Papa, maman, quand est-ce que vous avez appris à ne plus jouer ?</p>

  567. </blockquote>

  568. <p>J’ai commencé à te montrer que la forêt est un terrain de jeu et je suis très content de pouvoir commencer à te transmettre des choses dans ce contexte aussi. On a encore de nombreuses choses à explorer ensemble dans ce domaine.</p>

  569. <p>Personne n’a envie que l’on détériore son terrain de jeu.</p>

  570. <h2>Expatriation</h2>

  571. <blockquote>

  572. <p>— Je suis arlésien !</p>

  573. </blockquote>

  574. <p>Tu as passé plus de la moitié de ta vie sur le sol canadien. Et pourtant tu t’identifies souvent comme étant arlésien. Un besoin de racines à défaut de pouvoir te sentir « de souche ».</p>

  575. <p>Vivre aussi éloignés des grands-parents est difficile et en même temps permet de savourer chaque instant à leurs côtés. C’est l’un des choix qui est très compliqué à faire pour nous.</p>

  576. <h2>Lecture</h2>

  577. <blockquote>

  578. <p>— Simon Paris Chèvre !<br />

  579. <em>[Il fallait lire « Maison des Pâtes Fraîches »]</em></p>

  580. </blockquote>

  581. <p>L’apprentissage de la lecture en se servant de ta mémoire a été assez marrante. Je ne sais pas si on peut dire que tu as appris à lire tout seul. Tu avais énormément de matériel à disposition et on t’a lu des milliers de (fois les mêmes) livres. C’est peut-être la frustration des fois où on saturait un peu qui a fait naître cette motivation.</p>

  582. <p>Les bandes dessinées (Yakari, les Shtroumphs) ont eu un gros impact sur ton attrait pour la lecture. D’aucun·e·s pourraient y voir des intérêts spécifiques… les chats ne font pas des chiens.</p>

  583. <h2>Potentiel</h2>

  584. <blockquote>

  585. <p>Avec la science, l’homme pourrait faire de sa planète le paradis mais il est en train de mettre la science au service du profit d’aujourd’hui en créant l’enfer de demain. </p>

  586. <p><cite><em>L’apprenti sage</em>, Gilles Vigneault</cite></p>

  587. </blockquote>

  588. <p>Nous sommes allés voir il y a quelques jours si un établissement plus stimulant serait approprié. Il y a déjà tellement à déconstruire lorsque tu reviens de l’école, je ne sais pas trop quoi en penser. Peut-être les premiers pas d’un nouveau chemin. La suite au prochain épisode !</p>

  589. <h2>Inné et acquis</h2>

  590. <blockquote>

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

  592. <p><cite><em><a href="/david/blog/2016/accompagner-enfant/">Accompagner un enfant</a></em></cite></p>

  593. </blockquote>

  594. <p>J’écrivais ceci il y a trois ans et j’ai depuis évolué dans ma réflexion. Si l’on considère sa famille comme étant finalement de l’inné, à ce moment cela réajuste ma perception. On n’est plus dans un équilibrage mais dans un état symbiotique d’enrichissements mutuels.</p>

  595. <p>Et c’est peut-être finalement ça « faire famille ».</p>

  596. <hr />

  597. <p><em>La vie c’est comme une kuksa remplie de bleuets, il y en a des gros, des petits, des moisis, des acides, des bien mûrs. Ce qui compte c’est de les avoir ramassés ensemble.</em></p>

  598. </article>

  599. 

  600. 

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

  602.     <img src="/static/david/blog/2019/faire-famille.jpg" alt="" />

  603.   </figure>

  604. 

  605. 

  606. 

  607. <nav id="jumpto">

  608.   <p>

  609.     <a rel=prev href="/david/blog/2019/faire-equipe/">← Faire équipe</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2019/into-the-sled/">Into the sled →</a>

  610.   </p>

  611. </nav>

  612. 

  613. <footer>

  614.   <div>

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

  616.     <p>

  617.       Bonjour/Hi!

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

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

  620.     </p>

  621.     <p>

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

  623.     </p>

  624.     

  625.       <p>

  626.         Les dernières publications hebdomadaires sont :

  627.       </p>

  628.       <ul class="with_columns">

  629.         

  630.           <li>

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

  632.           </li>

  633.         

  634.           <li>

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

  636.           </li>

  637.         

  638.           <li>

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

  640.           </li>

  641.         

  642.           <li>

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

  644.           </li>

  645.         

  646.           <li>

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

  648.           </li>

  649.         

  650.           <li>

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

  652.           </li>

  653.         

  654.           <li>

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

  656.           </li>

  657.         

  658.           <li>

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

  660.           </li>

  661.         

  662.           <li>

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

  664.           </li>

  665.         

  666.           <li>

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

  668.           </li>

  669.         

  670.           <li>

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

  672.           </li>

  673.         

  674.           <li>

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

  676.           </li>

  677.         

  678.           <li>

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

  680.           </li>

  681.         

  682.           <li>

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

  684.           </li>

  685.         

  686.           <li>

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

  688.           </li>

  689.         

  690.           <li>

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

  692.           </li>

  693.         

  694.           <li>

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

  696.           </li>

  697.         

  698.           <li>

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

  700.           </li>

  701.         

  702.           <li>

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

  704.           </li>

  705.         

  706.           <li>

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

  708.           </li>

  709.         

  710.           <li>

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

  712.           </li>

  713.         

  714.           <li>

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

  716.           </li>

  717.         

  718.           <li>

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

  720.           </li>

  721.         

  722.           <li>

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

  724.           </li>

  725.         

  726.           <li>

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

  728.           </li>

  729.         

  730.           <li>

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

  732.           </li>

  733.         

  734.           <li>

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

  736.           </li>

  737.         

  738.           <li>

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

  740.           </li>

  741.         

  742.           <li>

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

  744.           </li>

  745.         

  746.           <li>

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

  748.           </li>

  749.         

  750.           <li>

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

  752.           </li>

  753.         

  754.           <li>

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

  756.           </li>

  757.         

  758.           <li>

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

  760.           </li>

  761.         

  762.           <li>

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

  764.           </li>

  765.         

  766.           <li>

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

  768.           </li>

  769.         

  770.           <li>

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

  772.           </li>

  773.         

  774.           <li>

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

  776.           </li>

  777.         

  778.           <li>

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

  780.           </li>

  781.         

  782.           <li>

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

  784.           </li>

  785.         

  786.           <li>

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

  788.           </li>

  789.         

  790.           <li>

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

  792.           </li>

  793.         

  794.           <li>

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

  796.           </li>

  797.         

  798.           <li>

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

  800.           </li>

  801.         

  802.           <li>

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

  804.           </li>

  805.         

  806.           <li>

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

  808.           </li>

  809.         

  810.           <li>

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

  812.           </li>

  813.         

  814.           <li>

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

  816.           </li>

  817.         

  818.           <li>

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

  820.           </li>

  821.         

  822.           <li>

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

  824.           </li>

  825.         

  826.       </ul>

  827.     

  828.     <p>

  829.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  846.     </p>

  847.     <p>

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

  849.     </p>

  850.     <p>

  851.       Je ne traque pas ta navigation mais mon

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

  853.       conserve des logs d’accès.

  854.     </p>

  855.   </div>

  856. </footer>

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

  858.   ;(_ => {

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

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

  861.       e.preventDefault()

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

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

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

  865.     })

  866.   })()

  867. </script>

  868. 

  869.   <script>

  870.   /* Service workers */

  871.   if (navigator.serviceWorker) {

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

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

  874.       function sendLinks (selector) {

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

  876.           return link.getAttribute('href')

  877.         })

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

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

  880.       }

  881.       navigator.serviceWorker.getRegistration()

  882.         .then(function (registration) {

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

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

  885.               .then(navigator.serviceWorker.ready)

  886.               .then(function () {

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

  888.               })

  889.               .catch(console.error.bind(console))

  890.           } else {

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

  892.             sendLinks(selector)

  893.           }

  894.         })

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

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

  897.         sendLinks(selector)

  898.       })

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

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

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

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

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

  904.           

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

  906.           

  907.         }

  908.       })

  909.     })

  910.   } else {

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

  912.   }

  913. </script>