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.

index.html 29KB

4 vuotta sitten
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754
  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>Une année d'itinérance en famille (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. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="http://twolff.fr/itinerance-famille.html">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. Une année d'itinérance en famille (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="http://twolff.fr/itinerance-famille.html">Source originale du contenu</a></h3>
  445. <p>Vous venez peut être de le découvrir: voilà 12 mois que nous voyageons en famille à travers la France &amp; les bordures. Lorsque nous sommes partis en mai dernier <em>Naomi</em> était âgée d’1 an. Aujourd’hui elle a 2 ans.</p>
  446. <p>Et c’était une très bonne idée, pour tout le monde, de prendre la route \o/.</p>
  447. <h2 id="créer-sa-maison-sur-roues">Créer sa maison sur roues</h2>
  448. <p><img src="../assets/img/posts/campingcar-blog-1.jpg" alt="Campingcar"/>
  449. <em>↑Juillet 2018. Deux mois après le départ. Poupou (notre chienne de Berger) profite.</em>
  450. <img src="../assets/img/posts/ame.jpg" alt="baleine"/>
  451. <em>↑Août 2018. Papa travaille sur les Aires marines éducatives, Naomi reçoit une baleine.</em>
  452. <img src="../assets/img/posts/renovation-camping-car-1.jpg" alt="Avant"/>
  453. <em>↑Mars 2018. Deux mois avant le départ. “Y’a fashion police” comme dirait Alyssa.</em>
  454. <img src="../assets/img/posts/renovation-camping-car-2.jpg" alt="Renovation d'un camping car: après"/>
  455. <em>↑Deux semaines avant le départ. Voir l’article <a href="http://twolff.fr/renovation-camping-car">rénovation du camping car</a>.</em></p>
  456. <h2 id="loption-grands-espaces---idéal-quand-il-fait-beau">L’option grands espaces - idéal quand il fait beau</h2>
  457. <p><img src="../assets/img/posts/campingcar-blog-3.jpg" alt="Campingcar3"/>
  458. <em>↑Juillet 2018: Col de la Biche à la tombée de la nuit pour une soirée avec Christophe et Juliette.</em>
  459. <img src="../assets/img/posts/col-biche-vaches.jpg" alt="Campingcar4"/>
  460. <em>↑Le off: si tu penses qu’elles sont pacifiques c’est que t’as pas passé la nuit partout.</em></p>
  461. <h3 id="le-travail--les-grands-espaces">Le travail &amp; les grands espaces</h3>
  462. <p><img src="../assets/img/posts/travail.jpg" alt="travail"/>
  463. <em>↑S’il fait beau soit tu vas travailler en pleine nature, soit tu t’installes dehors.</em></p>
  464. <h3 id="naomi--les-grands-espaces">Naomi &amp; les grands espaces</h3>
  465. <p><img src="../assets/img/posts/chevres.jpg" alt="nao"/>
  466. <em>↑Wéééééé des chèvres</em></p>
  467. <p><img src="../assets/img/posts/no-tv.jpg" alt="no-tv"/>
  468. <em>“Et s’il pleut tu peux même re-fabriquer l’ancrêtre de la télé”</em></p>
  469. <p><a href="https://medium.com/moosebycaro">Découvrir les articles de blog de Caro: “Voyager avec un jeune enfant</a></p>
  470. <h3 id="en-couple--les-grands-espaces">En couple &amp; les grands espaces</h3>
  471. <p><img src="../assets/img/posts/couple-espaces.jpg" alt="no-tv"/>
  472. <em>↑Respirer</em></p>
  473. <h2 id="loption-village">L’option village</h2>
  474. <ul>
  475. <li>les villages qui portent des noms de fromage (on est balèzes à ce jeu là)</li>
  476. <li>les villages où vivent les amis, la famille</li>
  477. <li>les villages où l’on a lancé des projets</li>
  478. <li>les plus beaux villages de france</li>
  479. <li>les villages dans des écrins de nature</li>
  480. </ul>
  481. <p><img src="../assets/img/posts/campingcar-blog-1.jpg" alt="Campingcar"/>
  482. <em>↑Juillet 2018: Village Grande Rivière (Jura)</em>
  483. <img src="../assets/img/posts/fetefrom.jpg" alt="Fêtedufromage"/>
  484. <em>↑Septembre 2018, quelque part vers le plateau des 1000 vaches. Toujours l’art de se retrouver dans des fêtes de village: ici une des nombreuses fêtes du fromage.</em></p>
  485. <h3 id="côté-travail--village">Côté travail &amp; village</h3>
  486. <p><img src="../assets/img/posts/travail4.jpg" alt="travail"/>
  487. <em>↑La journée au village de Saint Lupicin avec un hydrogéologue, la nuit au lac d’Etival</em></p>
  488. <blockquote>
  489. <p>Passer le moins possible de temps sur l’ordinateur et le plus de temps possible à écouter. Remplacer les aller-retours d’e-mails par des repas ou des thés, ou un échange téléphonique où l’on essaye vraiment de créer quelque chose. Pour télétravailler dans un café je mets un casque sur les oreilles et quand je suis de nouveau open je l’enlève et travaille sur carnet papier. Notre joker c’est <em>Poupou</em>, notre chienne de berger qui est mignogne et qui ne met pas longtemps avant d’aller jouer avec tout le monde. Si on a de la chance notre fin de journée finit autour d’un verre où l’on écoute les histoires.</p>
  490. </blockquote>
  491. <h3 id="côté-jeune-enfant--village">Côté jeune enfant &amp; village</h3>
  492. <p><img src="../assets/img/posts/ludotheque.jpg" alt="ludothèque"/>
  493. <em>↑Joli espace jeu dans une maison de la nature</em></p>
  494. <p><strong>Si va pleuvoir durant les prochains jours et que tu es à garé à moins de 1km à pied de 2 de ces lieux t’as le jackpot:</strong></p>
  495. <ul>
  496. <li>piscine avec des commentaires <em>qui disent que l’eau est bien chaude</em> (youhou)</li>
  497. <li>médiathèque</li>
  498. <li>ludothèque</li>
  499. </ul>
  500. <h3 id="côté-couple--village">Côté couple &amp; village</h3>
  501. <p><img src="../assets/img/posts/ornans.jpg" alt="travail"/>
  502. <em>↑La vallée de la Loue, un des endroits qu’on a adoré en couple.</em></p>
  503. <h3 id="côté-famille">Côté famille</h3>
  504. <p><img src="../assets/img/posts/helene-alpes.jpg" alt="nao2"/>
  505. <em>↑Septembre 2018: Tata Hélène débarque pour quelques jours dans les Alpes</em></p>
  506. <h2 id="loption-les-grandes-villes">L’option “les grandes villes”</h2>
  507. <h3 id="un-mois-drbnb-à-rennes-du-coup-on-en-profite">Un mois d’R’bnb à Rennes du coup on en profite</h3>
  508. <p><img src="../assets/img/posts/rennes-amies.jpg" alt="amies"/>
  509. <em>↑Janvier 2019: Caroline a passé de nombreuses années à Rennes. Du coup: amies-amies.</em>
  510. <img src="../assets/img/posts/emilie.jpg" alt="tata-milie"/>
  511. <em>↑Février 2019: Tata Milie et tonton Xav apprennent à Naomi à faire des boutures</em></p>
  512. <h2 id="loption-demande-à-ta-fille-de-quels-animaux-elle-aimerait-soccuper-et-montre-lui-les-photos">L’option “demande à ta fille de quels animaux elle aimerait s’occuper et montre lui les photos”</h2>
  513. <p>Il y a beaucoup de personnes qui sont des endroits magnifiques et qui aimeraient partir en vacances: c’est le principe du home-sitting. Bref: si tu gardes un Saint Bernard qui s’appelle Marley ou des Alpagas t’as aussi le droit de garder la grande maison qui va avec et d’inviter du monde.</p>
  514. <h3 id="été-les-alpages">Été, les Alpages</h3>
  515. <p><img src="../assets/img/posts/saint-bernard.jpg" alt="marley"/>
  516. <em>↑Été 2019: l’ami Marley, un bébé Saint Bernard (véridique)</em>
  517. <img src="../assets/img/posts/saint-bernard2.jpg" alt="marley2"/>
  518. <em>↑Été 2019: un cadre incroyable. Les amis, collègues, … étaient aussi de passage.</em></p>
  519. <h3 id="hiver-campagne-de-la-bourgogne">Hiver, campagne de la Bourgogne</h3>
  520. <p><img src="../assets/img/posts/sessiontravail.jpg" alt="cessiontravail"/>
  521. <em>↑Mars 2019: session de travail à Arquian (Bourgogne).</em>
  522. <img src="../assets/img/posts/gentillesse.jpg" alt="cessiontravail"/>
  523. <em>↑Mars 2019: la voisine qui présente un poulain à Naomi. On gardait une ferme avec 3 alpagas, 25 poules, 3 ponnettes, 3 chats, …</em></p>
  524. <h2 id="loption-quand-tu-peux-plus-emmener-ta-maison-avec-toi">L’option “quand tu peux plus emmener ta maison avec toi”</h2>
  525. <p><img src="../assets/img/posts/train-caro.jpg" alt="train"/>
  526. <em>↑Accident de camping car soit disant “irrépable”. Migration temporaire</em></p>
  527. <p><img src="../assets/img/posts/maroc-marche.jpg" alt="maroc"/>
  528. <img src="../assets/img/posts/marco-abdoul.jpg" alt="maroc"/>
  529. <em>↑Décembre 2019. Problème de soleil. On est allé voir l’ami Abdoul.</em></p>
  530. <p><img src="../assets/img/posts/island.jpg" alt="island"/>
  531. <img src="../assets/img/posts/macareux.jpg" alt="macareux"/>
  532. <img src="../assets/img/posts/macareux2.jpg" alt="macareux2"/>
  533. <em>↑Îles du Nord de l’Écosse. 2 heures de bâteau.</em></p>
  534. <h1 id="le-portrait-chinois-revisité">Le portrait chinois revisité</h1>
  535. <h3 id="le-plus-surprenant">Le plus surprenant</h3>
  536. <blockquote>
  537. <p>On a presque rien et on vit super bien. Ce qui me manque pour être au top c’est un four et une vraie douche.
  538. <strong>Caroline</strong></p>
  539. </blockquote>
  540. <blockquote>
  541. <p>Le temps s’est ralenti. Cette année est passée comme peut être … les 2-3 années précédentes. J’ai l’impression qu’on est partis il y a 2 ans. Le rapport au temps est étrange quand même. <strong>Thomas</strong></p>
  542. </blockquote>
  543. <h3 id="le-moment-le-plus-drôle">Le moment le plus drôle</h3>
  544. <blockquote>
  545. <p>La fois où Naomi a été super vexée parce qu’elle s’est fait cracher dessus par un des alpagas qu’on gardait. On a dû la réconforter malgré les larmes de rire qu’on essayait de retenir. <strong>Caroline</strong></p>
  546. </blockquote>
  547. <blockquote>
  548. <p>Quand on a été accueilli pour la garde de la maison dans les Alpes et qu’on a rencontré Marley (le saint-bernard de presque 100kg). On a cru qu’il allait gober notre chien tout cru et la propriétaire a dit “non il est tout gentil” alors qu’il se déchênait et que j’ai du le plaquer au sol. <strong>Thomas</strong></p>
  549. </blockquote>
  550. <h3 id="le-moment-what-the-fuck">Le moment What the fuck</h3>
  551. <blockquote>
  552. <p>Toutes les fois où je me suis fait applaudir et encouragé par des mecs parce que je conduisais le camping car … <strong>Caroline</strong></p>
  553. </blockquote>
  554. <blockquote>
  555. <p>Il y a toujours un truc qui merde au moment des grands départs. C’est genre une loi. Si t’es en hiver et qu’il fait -5°C tu peux compter sur le fait que ta bouteille de gaz va lacher un samedi soir et qu’il y a rien d’ouvert un dimanche. Ou encore: dans les premiers départs si tu es bien isolé ton camping car ne démarre plus parce qu’il y a un problème de batterie. Et (une petite dernière), après une année, quand tu te dis “non mais on est quand même bien rodés”: tu trouves un endroit sublime, isolé, avec une vue magnifique. Et là tu tournes la clé pour te garer et … le moteur ne s’arrête pas. Si si c’est possible. <strong>Thomas</strong></p>
  556. </blockquote>
  557. <h3 id="le-moment-où-on-a-eu-le-plus-peur">Le moment où on a eu le plus peur</h3>
  558. <blockquote>
  559. <p>La fois où on a descendu le col de la biche et où on a cru que les freins avaient brulé et le camping car avec. <strong>Caroline</strong></p>
  560. </blockquote>
  561. <blockquote>
  562. <p>La descente du col de la biche: grave, ça crêpitait. <strong>Thomas</strong></p>
  563. </blockquote>
  564. <h3 id="le-moment-où-on-a-le-plus-appris-sur-nous">Le moment où on a le plus appris sur nous</h3>
  565. <blockquote>
  566. <p>Tous ces moments où il y a eu des galères mécaniques. En couple avec un jeune enfant quand le garagiste te dit “votre camping car est irréparable” et que t’es paumé en pleine nature t’as les deux parents qui ont des ailes qui poussent et qui bougent ensemble le monde. La collaboration en couple naturelle et instinctive dans ces moments là m’a beaucoup appris. La routine de la ville, qui te fournit presque tout, ne t’offre finalement pas tant d’occasions de collaborer que ça que ce soit en couple ou avec tes voisins. C’est un confort qui a des impacts secondaires. <strong>Thomas</strong></p>
  567. </blockquote>
  568. <blockquote>
  569. <p>Le fait d’être aussi à l’aise dans un si petit espace au quotidien. <strong>Caroline</strong></p>
  570. </blockquote>
  571. <h3 id="le-plus-amusant-au-quotidien">Le plus amusant au quotidien</h3>
  572. <blockquote>
  573. <p>Se réveiller dans des lieux différents tout le temps et que si ça plait pas on peut changer. <strong>Caroline</strong></p>
  574. </blockquote>
  575. <blockquote>
  576. <p>C’est l’alternance de mondes. C’est par exemple de passer en moins de 2 heures d’un réveil pieds nu dans la nature à présenter un projet dans les salons “dorés” d’une Préfecture de Région. <strong>Thomas</strong></p>
  577. </blockquote>
  578. <h3 id="le-plus-difficile-au-quotidien">Le plus difficile au quotidien</h3>
  579. <blockquote>
  580. <p>Etre nulle en cartographie et en orientation…le savoir, essayer que ca change, et constater que c’est pas beaucoup mieux au bout d’un an..! <strong>Caroline</strong></p>
  581. </blockquote>
  582. <blockquote>
  583. <p>Les jours de mauvais temps ne pas savoir si je vais avoir de bonnes conditions pour travailler. <strong>Thomas</strong></p>
  584. </blockquote>
  585. <h3 id="le-plus-agréable-au-quotidien">Le plus agréable au quotidien</h3>
  586. <blockquote>
  587. <p>Être ensemble, en famille, prendre le temps d’avoir le temps d’apprécier les choses simples: lire, écrire, regarder ensemble les hirondelles, rigoler, inventer des rituels à l’extérieur pour clore les journées bien riches. Avoir le temps et être ensemble: c’est ça. <strong>Thomas</strong></p>
  588. </blockquote>
  589. <blockquote>
  590. <p>Tous les matins à 3 dans notre “cocon”. Ca commence par un réveil ou de deux dans le lit on passe vite à trois, puis le ptit dej’ avec quasi-systématiquement le chant des oiseaux pour nous accompagner, l’odeur du café, les sourires de Naomi et nos cheveux ébouriffés. <strong>Caroline</strong></p>
  591. </blockquote>
  592. <h3 id="ce-qui-nous-manque-le-plus-au-quotidien">Ce qui nous manque le plus au quotidien</h3>
  593. <blockquote>
  594. <p>M’échapper et créer avec ma machine à coudre. De manière générale avoir plus de moments que pour moi. <strong>Caroline</strong></p>
  595. </blockquote>
  596. <blockquote>
  597. <p>Pouvoir rejoindre facilement un marché avec pleinnn de bons légumes. Sans avoir à faire une manoeuvre de fou qui prend 2 places dans un endroit où ils roulent comme des dingues pour une raison qui m’échappe puisqu’on est dimanche. <strong>Thomas</strong></p>
  598. </blockquote>
  599. <h3 id="la-suite">La suite?</h3>
  600. <blockquote>
  601. <p>Surprise.</p>
  602. </blockquote>
  603. </article>
  604. </section>
  605. <nav id="jumpto">
  606. <p>
  607. <a href="/david/blog/">Accueil du blog</a> |
  608. <a href="http://twolff.fr/itinerance-famille.html">Source originale</a> |
  609. <a href="/david/stream/2019/">Accueil du flux</a>
  610. </p>
  611. </nav>
  612. <footer>
  613. <div>
  614. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  615. <p>
  616. Bonjour/Hi!
  617. 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>
  618. 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>).
  619. </p>
  620. <p>
  621. 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>.
  622. </p>
  623. <p>
  624. Voici quelques articles choisis :
  625. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  626. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  627. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  628. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  629. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  630. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  631. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  632. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  633. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  634. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  635. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  636. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  637. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  638. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  639. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  640. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  641. </p>
  642. <p>
  643. 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>.
  644. </p>
  645. <p>
  646. Je ne traque pas ta navigation mais mon
  647. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  648. conserve des logs d’accès.
  649. </p>
  650. </div>
  651. </footer>
  652. <script type="text/javascript">
  653. ;(_ => {
  654. const jumper = document.getElementById('jumper')
  655. jumper.addEventListener('click', e => {
  656. e.preventDefault()
  657. const anchor = e.target.getAttribute('href')
  658. const targetEl = document.getElementById(anchor.substring(1))
  659. targetEl.scrollIntoView({behavior: 'smooth'})
  660. })
  661. })()
  662. </script>