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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412
  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. • <a rel="next"
  149. href="/david/2024/04/05/"
  150. title="Publication suivante : Productivité">Suivant →</a>
  151. </p>
  152. </nav>
  153. <blockquote>
  154. <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>
  155. <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>
  156. <p><cite><em><a data-link-domain="pilavenir.canalblog.com" href="http://pilavenir.canalblog.com/archives/2017/10/21/35793152.html" hreflang="fr"
  157. title="Consultation de l’article">La prise décision par consentement&nbsp;: un outil au service du groupe</a>
  158. <a href="/david/cache/2024/4e49a2509dd9d3f9b33dba3865960465/" hreflang="fr"
  159. 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..."
  160. data-source="http://pilavenir.canalblog.com/archives/2017/10/21/35793152.html"
  161. data-date="2024-04-04"
  162. data-favicon="https://profilepics.canalblog.com/profilepics/1/3/1379494.jpg"
  163. data-domain="pilavenir.canalblog.com"
  164. ><svg xmlns="http://www.w3.org/2000/svg"
  165. width="24" height="24" viewBox="0 0 24 24" fill="none"
  166. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  167. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  168. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  169. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  170. </svg>
  171. <span class="sr-only">[archive]</span></a></em></cite></p>
  172. </blockquote>
  173. <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>
  174. <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>
  175. <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>
  176. <nav>
  177. <p>
  178. <a href="/david/2024/equipe/"
  179. title="Liste de tous les articles 2024 associés à cette étiquette"
  180. rel="tag">#équipe</a>
  181. <a href="/david/2024/experience/"
  182. title="Liste de tous les articles 2024 associés à cette étiquette"
  183. rel="tag">#expérience</a>
  184. <a href="/david/2024/gratitude/"
  185. title="Liste de tous les articles 2024 associés à cette étiquette"
  186. rel="tag">#gratitude</a>
  187. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  188. </p>
  189. </nav>
  190. <nav>
  191. <p>
  192. <a rel="prev"
  193. href="/david/2024/04/02/"
  194. title="Publication précédente : Porte">← Précédent</a> •
  195. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  196. • <a rel="next"
  197. href="/david/2024/04/05/"
  198. title="Publication suivante : Productivité">Suivant →</a>
  199. </p>
  200. </nav>
  201. <form action="/david/recherche/" method="get">
  202. <fieldset>
  203. <legend>Recherche</legend>
  204. <label for="input-search">Termes de votre recherche :</label>
  205. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  206. <input type="submit" value="Chercher">
  207. <p id="indexation-infos">
  208. <small>
  209. Seuls les contenus de ces 8 dernières années sont indexés.
  210. </small>
  211. </p>
  212. </fieldset>
  213. </form>
  214. <aside>
  215. <theme-toggle></theme-toggle>
  216. </aside>
  217. </article>
  218. <hr>
  219. <footer>
  220. <p>
  221. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  222. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  223. <a href="http://larlet.com"
  224. title="Go to my English profile"
  225. data-instant>Pro</a>
  226. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  227. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  228. </p>
  229. <template id="theme-selector">
  230. <form>
  231. <style type="text/css">
  232. fieldset div {
  233. text-align: center;
  234. }
  235. </style>
  236. <fieldset>
  237. <legend>Thème</legend>
  238. <div>
  239. <label>
  240. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  241. Auto
  242. </label>
  243. <label>
  244. <input type="radio" value="dark" name="chosen-color-scheme">
  245. Foncé
  246. </label>
  247. <label>
  248. <input type="radio" value="light" name="chosen-color-scheme">
  249. Clair
  250. </label>
  251. </div>
  252. </fieldset>
  253. </form>
  254. </template>
  255. </footer>
  256. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  257. <script>
  258. class ThemeToggle extends HTMLElement {
  259. constructor() {
  260. super()
  261. const themeSelectorTemplate = document.querySelector('#theme-selector')
  262. const form = themeSelectorTemplate.content.firstElementChild
  263. this.attachShadow({ mode: 'open' })
  264. this.shadowRoot.appendChild(form.cloneNode(true))
  265. }
  266. connectedCallback() {
  267. const form = this.shadowRoot.querySelector('form')
  268. form.addEventListener('change', (e) => {
  269. const chosenColorScheme = e.target.value
  270. localStorage.setItem('theme', chosenColorScheme)
  271. toggleTheme(chosenColorScheme)
  272. })
  273. const selectedTheme = localStorage.getItem('theme')
  274. if (selectedTheme && selectedTheme !== 'undefined') {
  275. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  276. }
  277. }
  278. }
  279. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  280. window.addEventListener('load', () => {
  281. let colorsLayer = undefined
  282. let hasDarkRules = false
  283. for (const styleSheet of Array.from(document.styleSheets)) {
  284. let mediaRules = []
  285. for (const layerRule of styleSheet.cssRules) {
  286. if (!(layerRule instanceof CSSLayerBlockRule)) {
  287. continue
  288. }
  289. if (layerRule.name === 'colors') {
  290. colorsLayer = layerRule
  291. }
  292. for (const cssRule of layerRule.cssRules) {
  293. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  294. continue
  295. }
  296. // WARNING: Safari does not have/supports `conditionText`.
  297. if (cssRule.conditionText) {
  298. if (cssRule.conditionText !== prefersColorSchemeDark) {
  299. continue
  300. }
  301. } else {
  302. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  303. continue
  304. }
  305. }
  306. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  307. }
  308. }
  309. // WARNING: do not try to insert a Rule to a styleSheet you are
  310. // currently iterating on, otherwise the browser will be stuck
  311. // in a infinite loop…
  312. for (const mediaRule of mediaRules) {
  313. // Safari requires the `0` second parameter (even if default).
  314. colorsLayer.insertRule(mediaRule.cssText, 0)
  315. hasDarkRules = true
  316. }
  317. }
  318. if (hasDarkRules) {
  319. if ('customElements' in window && !customElements.get('theme-toggle')) {
  320. customElements.define('theme-toggle', ThemeToggle)
  321. }
  322. }
  323. })
  324. </script>
  325. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  326. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  327. <script>
  328. tippy('[data-tippy]', {
  329. content(reference) {
  330. reference.addEventListener('click', (e) => e.preventDefault())
  331. return `
  332. <h3 lang="fr">
  333. <img src="${reference.dataset.favicon}" loading="lazy">
  334. <a href="${reference.dataset.source}"
  335. >Article sur ${reference.dataset.domain}</a></h3>
  336. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  337. <div class="tippy-links" lang="fr">
  338. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  339. </div>
  340. `
  341. },
  342. allowHTML: true,
  343. interactive: true,
  344. delay: [150, 700],
  345. hideOnClick: false
  346. })
  347. </script>
  348. <script type="module">
  349. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  350. const markObserver = new IntersectionObserver((entries, observer) => {
  351. const computedStyle = getComputedStyle(document.documentElement)
  352. const markBackground = computedStyle.getPropertyValue('--mark-background')
  353. for (const entry of entries) {
  354. if (entry.intersectionRatio === 0) continue
  355. const markElement = entry.target
  356. markElement.style.backgroundColor = 'inherit'
  357. const annotation = annotate(
  358. markElement, {
  359. type: 'highlight',
  360. multiline: true,
  361. color: markBackground,
  362. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  363. animate: false
  364. }
  365. )
  366. annotation.show()
  367. observer.unobserve(markElement)
  368. }
  369. }, {threshold: 1.0})
  370. for (const markElement of document.querySelectorAll('mark')) {
  371. markObserver.observe(markElement)
  372. }
  373. </script>
  374. </body>
  375. </html>