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.

index.html 16KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404
  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` element
  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,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>
  13. Décision
  14. — David Larlet</title>
  15. <script>
  16. function toggleTheme(themeName) {
  17. document.documentElement.classList.toggle(
  18. 'forced-dark',
  19. themeName === 'dark'
  20. )
  21. document.documentElement.classList.toggle(
  22. 'forced-light',
  23. themeName === 'light'
  24. )
  25. }
  26. const selectedTheme = localStorage.getItem('theme')
  27. if (selectedTheme !== 'undefined') {
  28. toggleTheme(selectedTheme)
  29. }
  30. </script>
  31. <!-- Documented, feel free to shoot an email. -->
  32. <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  33. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  34. <link rel="preload"
  35. href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
  36. as="font"
  37. type="font/woff2"
  38. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  39. crossorigin>
  40. <link rel="preload"
  41. href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
  42. as="font"
  43. type="font/woff2"
  44. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  45. crossorigin>
  46. <link rel="preload"
  47. href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
  48. as="font"
  49. type="font/woff2"
  50. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  51. crossorigin>
  52. <link rel="preload"
  53. href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
  54. as="font"
  55. type="font/woff2"
  56. media="(prefers-color-scheme: dark)"
  57. crossorigin>
  58. <link rel="preload"
  59. href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
  60. as="font"
  61. type="font/woff2"
  62. media="(prefers-color-scheme: dark)"
  63. crossorigin>
  64. <link rel="preload"
  65. href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
  66. as="font"
  67. type="font/woff2"
  68. media="(prefers-color-scheme: dark)"
  69. crossorigin>
  70. <meta name="description" content="La prise de décision par consentement se différencie de la prise de décision par consensus : en consensus tout le monde dit « oui », en consentement, personne ne dit « non ».">
  71. <!-- That good ol' feed, subscribe :). -->
  72. <link rel="alternate"
  73. type="application/atom+xml"
  74. title="Feed"
  75. href="/david/log/">
  76. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  77. <link rel="apple-touch-icon"
  78. sizes="180x180"
  79. href="/static/david/icons2/apple-touch-icon.png">
  80. <link rel="icon"
  81. type="image/png"
  82. sizes="32x32"
  83. href="/static/david/icons2/favicon-32x32.png">
  84. <link rel="icon"
  85. type="image/png"
  86. sizes="16x16"
  87. href="/static/david/icons2/favicon-16x16.png">
  88. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  89. <link rel="mask-icon"
  90. href="/static/david/icons2/safari-pinned-tab.svg"
  91. color="#07486c">
  92. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  93. <meta name="msapplication-TileColor" content="#f7f7f7">
  94. <meta name="msapplication-config"
  95. content="/static/david/icons2/browserconfig.xml">
  96. <meta name="theme-color"
  97. content="#f7f7f7"
  98. media="(prefers-color-scheme: light)">
  99. <meta name="theme-color"
  100. content="#272727"
  101. media="(prefers-color-scheme: dark)">
  102. <!-- Is that even respected? Retrospectively? What a shAItshow…
  103. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  104. <meta name="robots" content="noai, noimageai">
  105. <style type="text/css">
  106. .tippy-content {
  107. min-width: 280px;
  108. padding: .5rem;
  109. font-size: calc(var(--fluid-0) * 0.8);
  110. font-family: var(--labor-font);
  111. letter-spacing: initial;
  112. text-align: left;
  113. }
  114. .tippy-content h3 {
  115. margin-top: 0;
  116. }
  117. .tippy-content h3 img {
  118. max-width: 2rem;
  119. max-height: 2rem;
  120. display: inline-block;
  121. }
  122. .tippy-content .tippy-links {
  123. display: flex;
  124. justify-content: space-around;
  125. }
  126. .tippy-content a {
  127. padding: .4rem;
  128. color: #F06048;
  129. }
  130. </style>
  131. <body data-instant-intensity="viewport-all">
  132. <article>
  133. <header>
  134. <hgroup>
  135. <h1>Décision</h1>
  136. <p>Le <time datetime="2024-04-03">3 avril 2024</time></p>
  137. </hgroup>
  138. </header>
  139. <nav>
  140. <p>
  141. <a rel="prev"
  142. href="/david/2024/04/02/"
  143. title="Publication précédente : Porte">← Précédent</a> •
  144. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  145. <a href="/david/recherche/"
  146. title="Aller à la page de recherche"
  147. rel="search" data-no-instant>Recherche</a>
  148. </p>
  149. </nav>
  150. <blockquote>
  151. <p>La prise de décision par consentement se différencie de la prise de décision par consensus&nbsp;: <strong>en consensus tout le monde dit «&nbsp;oui&nbsp;», en consentement, personne ne dit&nbsp;«&nbsp;non&nbsp;».</strong></p>
  152. <p>Cela sous-entend que lorsque l’on prend une décision par consentement, on ne va pas chercher la «&nbsp;meilleure solution&nbsp;» mais l’on va partir du principe qu’une bonne décision est celle qui respecte les limites de celles et ceux qui devront l’assumer, et qui ne compromet en rien la capacité de l’organisation à mener à bien sa mission. <mark>Le consentement implique qu’une décision ne peut être prise que lorsqu’il n’y a plus d’objection raisonnable à celle-ci.</mark> Tant qu’il y a des objections, l’ensemble du groupe est mobilisé pour bonifier la proposition. Ainsi, les objections permettent de révéler les limites avec lesquelles le groupe devra composer et indiquent donc l’espace de liberté dont le cercle&nbsp;dispose.</p>
  153. <p><cite><em><a data-link-domain="pilavenir.canalblog.com" href="http://pilavenir.canalblog.com/archives/2017/10/21/35793152.html" hreflang="fr"
  154. title="Consultation de l’article">La prise décision par consentement&nbsp;: un outil au service du groupe</a>
  155. <a href="/david/cache/2024/4e49a2509dd9d3f9b33dba3865960465/" hreflang="fr"
  156. data-tippy data-description="Décision par consentement La prise de décision par consentement se différencie de la prise de décision par consensus : en consensus tout le monde dit « oui », en consentement, personne ne dit « non » . Cela sous-entend que lorsque l’on prend une décision..."
  157. data-source="http://pilavenir.canalblog.com/archives/2017/10/21/35793152.html"
  158. data-date="2024-04-04"
  159. data-favicon="https://profilepics.canalblog.com/profilepics/1/3/1379494.jpg"
  160. data-domain="pilavenir.canalblog.com"
  161. ><svg xmlns="http://www.w3.org/2000/svg"
  162. width="24" height="24" viewBox="0 0 24 24" fill="none"
  163. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  164. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  165. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  166. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  167. </svg>
  168. <span class="sr-only">[archive]</span></a></em></cite></p>
  169. </blockquote>
  170. <p>La prise de décision lorsqu’on se retrouve à <a data-link-domain="scopyleft.fr" href="http://scopyleft.fr/">7&nbsp;co-gérant·es</a> distribué·es sur deux continents n’est pas une mince affaire. Rythme lent/asynchrone, légitimité, culpabilité, ambiguïté, les raisons ne manquent pas pour générer des&nbsp;frustrations.</p>
  171. <p>Aujourd’hui, nous avons réussi à définir ce dont nous avions besoin en amont, pendant et après une prise de décision. Cela a permis au passage de rendre explicite la légitimité des décisions prises et la façon d’améliorer les propositions itérativement par&nbsp;consentement.</p>
  172. <p>Je suis content de faire partie d’un <a href="/david/2024/03/28/" title="Collectif">collectif</a> qui prend le temps de se poser ces questions. C’est rare et&nbsp;précieux.</p>
  173. <nav>
  174. <p>
  175. <a href="/david/2024/equipe/"
  176. title="Liste de tous les articles 2024 associés à cette étiquette"
  177. rel="tag">#équipe</a>
  178. <a href="/david/2024/experience/"
  179. title="Liste de tous les articles 2024 associés à cette étiquette"
  180. rel="tag">#expérience</a>
  181. <a href="/david/2024/gratitude/"
  182. title="Liste de tous les articles 2024 associés à cette étiquette"
  183. rel="tag">#gratitude</a>
  184. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  185. </p>
  186. </nav>
  187. <nav>
  188. <p>
  189. <a rel="prev"
  190. href="/david/2024/04/02/"
  191. title="Publication précédente : Porte">← Précédent</a> •
  192. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  193. </p>
  194. </nav>
  195. <form action="/david/recherche/" method="get">
  196. <fieldset>
  197. <legend>Recherche</legend>
  198. <label for="input-search">Termes de votre recherche :</label>
  199. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  200. <input type="submit" value="Chercher">
  201. <p id="indexation-infos">
  202. <small>
  203. Seuls les contenus de ces 8 dernières années sont indexés.
  204. </small>
  205. </p>
  206. </fieldset>
  207. </form>
  208. <aside>
  209. <theme-toggle></theme-toggle>
  210. </aside>
  211. </article>
  212. <hr>
  213. <footer>
  214. <p>
  215. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  216. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  217. <a href="http://larlet.com"
  218. title="Go to my English profile"
  219. data-instant>Pro</a>
  220. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  221. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  222. </p>
  223. <template id="theme-selector">
  224. <form>
  225. <style type="text/css">
  226. fieldset div {
  227. text-align: center;
  228. }
  229. </style>
  230. <fieldset>
  231. <legend>Thème</legend>
  232. <div>
  233. <label>
  234. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  235. Auto
  236. </label>
  237. <label>
  238. <input type="radio" value="dark" name="chosen-color-scheme">
  239. Foncé
  240. </label>
  241. <label>
  242. <input type="radio" value="light" name="chosen-color-scheme">
  243. Clair
  244. </label>
  245. </div>
  246. </fieldset>
  247. </form>
  248. </template>
  249. </footer>
  250. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  251. <script>
  252. class ThemeToggle extends HTMLElement {
  253. constructor() {
  254. super()
  255. const themeSelectorTemplate = document.querySelector('#theme-selector')
  256. const form = themeSelectorTemplate.content.firstElementChild
  257. this.attachShadow({ mode: 'open' })
  258. this.shadowRoot.appendChild(form.cloneNode(true))
  259. }
  260. connectedCallback() {
  261. const form = this.shadowRoot.querySelector('form')
  262. form.addEventListener('change', (e) => {
  263. const chosenColorScheme = e.target.value
  264. localStorage.setItem('theme', chosenColorScheme)
  265. toggleTheme(chosenColorScheme)
  266. })
  267. const selectedTheme = localStorage.getItem('theme')
  268. if (selectedTheme && selectedTheme !== 'undefined') {
  269. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  270. }
  271. }
  272. }
  273. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  274. window.addEventListener('load', () => {
  275. let colorsLayer = undefined
  276. let hasDarkRules = false
  277. for (const styleSheet of Array.from(document.styleSheets)) {
  278. let mediaRules = []
  279. for (const layerRule of styleSheet.cssRules) {
  280. if (!(layerRule instanceof CSSLayerBlockRule)) {
  281. continue
  282. }
  283. if (layerRule.name === 'colors') {
  284. colorsLayer = layerRule
  285. }
  286. for (const cssRule of layerRule.cssRules) {
  287. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  288. continue
  289. }
  290. // WARNING: Safari does not have/supports `conditionText`.
  291. if (cssRule.conditionText) {
  292. if (cssRule.conditionText !== prefersColorSchemeDark) {
  293. continue
  294. }
  295. } else {
  296. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  297. continue
  298. }
  299. }
  300. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  301. }
  302. }
  303. // WARNING: do not try to insert a Rule to a styleSheet you are
  304. // currently iterating on, otherwise the browser will be stuck
  305. // in a infinite loop…
  306. for (const mediaRule of mediaRules) {
  307. // Safari requires the `0` second parameter (even if default).
  308. colorsLayer.insertRule(mediaRule.cssText, 0)
  309. hasDarkRules = true
  310. }
  311. }
  312. if (hasDarkRules) {
  313. if ('customElements' in window && !customElements.get('theme-toggle')) {
  314. customElements.define('theme-toggle', ThemeToggle)
  315. }
  316. }
  317. })
  318. </script>
  319. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  320. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  321. <script>
  322. tippy('[data-tippy]', {
  323. content(reference) {
  324. reference.addEventListener('click', (e) => e.preventDefault())
  325. return `
  326. <h3 lang="fr">
  327. <img src="${reference.dataset.favicon}" loading="lazy">
  328. <a href="${reference.dataset.source}"
  329. >Article sur ${reference.dataset.domain}</a></h3>
  330. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  331. <div class="tippy-links" lang="fr">
  332. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  333. </div>
  334. `
  335. },
  336. allowHTML: true,
  337. interactive: true,
  338. delay: [150, 700],
  339. hideOnClick: false
  340. })
  341. </script>
  342. <script type="module">
  343. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  344. const markObserver = new IntersectionObserver((entries, observer) => {
  345. const computedStyle = getComputedStyle(document.documentElement)
  346. const markBackground = computedStyle.getPropertyValue('--mark-background')
  347. for (const entry of entries) {
  348. if (entry.intersectionRatio === 0) continue
  349. const markElement = entry.target
  350. markElement.style.backgroundColor = 'inherit'
  351. const annotation = annotate(
  352. markElement, {
  353. type: 'highlight',
  354. multiline: true,
  355. color: markBackground,
  356. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  357. animate: false
  358. }
  359. )
  360. annotation.show()
  361. observer.unobserve(markElement)
  362. }
  363. }, {threshold: 1.0})
  364. for (const markElement of document.querySelectorAll('mark')) {
  365. markObserver.observe(markElement)
  366. }
  367. </script>
  368. </body>
  369. </html>