davidbgk
/
larlet-fr-david-cache
Beobachten 1
Favorisieren 0
Fork 0
Code Releases 0 Aktivität
A place to cache linked articles (think custom and personal wayback machine)
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
173 Commits
1 Branch
Struktur: 59da1dace8
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „59da1dace8“
${ noResults }
larlet-fr-david-cache/cache/61404fc44a8753e1fbebb0611ad.../index.html

index.html 25KB
Originalformat Blame Verlauf

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549 
  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>Manifeste À nous la ville ! (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. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="http://www.pressegauche.org/Manifeste-A-nous-la-ville">

  32. 

  33. <style>

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

  35. html, body, div, span,

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

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

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

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

  41. fieldset, form, label, legend,

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

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

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

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

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

  55. article, aside, details, figcaption, figure,

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

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

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

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

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

  72. @font-face {

  73.   font-family: 'EquityTextB';

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

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

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

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

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

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

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

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

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

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

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

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

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

  108. body {

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

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

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

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

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

  116.   text-rendering: optimizeLegibility;

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

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

  119. }

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

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

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

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

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

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

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

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

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

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

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

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

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

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

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

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

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

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

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

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

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

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

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

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

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

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

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

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

  282.   font-size: 1rem;

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

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

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

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

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

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

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

  296. }

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

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

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

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

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

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

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

  304.     margin-left: 0;

  305.   }

  306.   h1 {

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

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

  309.   }

  310.   h2 {

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

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

  313.   }

  314.   h3 {

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

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

  317.   }

  318. }

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

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

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

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

  323.      but if our baseline value was not expressed

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

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

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

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

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

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

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

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

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

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

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

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

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

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

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

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

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

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

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

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

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

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

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

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

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

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

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

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

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

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

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

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

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

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

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

  452.   }

  453. </style>

  454. 

  455. <h1>

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

  457.   Manifeste À nous la ville ! (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="http://www.pressegauche.org/Manifeste-A-nous-la-ville">Source originale du contenu</a></h3>

  463.     <div class="crayon article-texte-30887 texte surlignable clearfix entry-text"><p><strong>Portrait de la situation</strong></p>

  464. <p>L’impuissance règne et la caste nous gouverne. L’État nous dépossède, les industries se servent, les maires populistes gèrent leur ville comme de « bons » pères de famille ou des gérants de petites entreprises. La démocratie se tait, inhibée, confisquée par les élites politiques et économiques qui jouent au tourniquet et vident les coffres publics pour servir leurs intérêts privés. La corruption gangrène toutes les institutions et nourrit allègrement le cynisme quotidien. Le peuple, dégoûté par la chose publique, se réfugie dans la sphère privée en laissant l’oligarchie s’occuper des <i>vraies affaires</i>. C’est le cercle de l’aliénation politique qui ronge la société de l’intérieur. C’est le retour de la Grande noirceur.</p>

  465. <p>Mais pourquoi nous laisser ainsi manger la laine sur le dos par les multinationales, les banques, les pétrolières et la politique de petits royaumes ? Parce que nous croyons à tort que nous sommes incapables de vivre, de travailler, de décider, de gouverner et de rêver par<i> nous-mêmes.</i></p>

  466. <p><strong>Un nouveau mouvement</strong></p>

  467. <p>Que faire ? Non seulement parler, mais agir ! Il faut transformer le mécontentement général et l’indignation populaire par <i>l’action directe</i> et <i>la participation réelle</i> aux décisions qui affectent nos vies. Non seulement réclamer, mais <i>incarner</i> un changement politique dans nos manières d’échanger, de nous organiser, de nous rassembler, de prendre des décisions ensemble. La démocratie n’est pas l’élection d’une élite éclairée, mais l’appropriation collective des institutions, l’auto gouvernement et la souveraineté populaire.</p>

  468. <p>Comment faire ? Réinventer la démocratie à l’échelle des communautés locales, des villes et des régions. Le vrai changement ne viendra pas de l’élection de vieux partis moribonds ou d’une Assemblée nationale sclérosée, mais de l’auto-organisation citoyenne et de la création de nouvelles communautés politiques. Nous proposons donc le municipalisme. Un mouvement qui fait de <i>la municipalité</i> le cœur d’une transformation démocratique de la vie sociale, économique et politique. La municipalité représente déjà un lieu privilégié pour l’expérimentation de nouvelles formes de démocratie participative, délibérative et directe à travers le monde. Tirons en partie nous aussi.</p>

  469. <p>Il faut construire un véritable <i>front municipal</i>, un réseau « de villes rebelles » contre la centralisation des décisions et la domination des élites qui détournent le bien public au profit d’intérêts privés et nient le principe d’autodétermination des communautés locales. Une transformation sociale de « bas en haut » passe par la formation d’une coalition de municipalités libres, démocratiques, égalitaires, écologiques et solidaires. Il faudra opérer une démocratisation radicale de la sphère politique et économique. Il faudra lutter contre toutes les formes d’oppression et de discrimination. Et surtout, il faudra garantir à chaque personne des conditions matérielles et sociales lui permettant de mener une vie digne et de participer aux affaires publiques.</p>

  470. <p><strong>Organiser la lutte en Réseau</strong></p>

  471. <p>Nous mettons sur pied un nouveau véhicule politique : le Réseau d’action municipale (RAM). Ni parti ni simple mouvement social, il s’agit d’une plate-forme citoyenne, créative et collaborative visant à dynamiser l’action politique à l’échelle locale par la création de groupes d’action dans n’importe quelle municipalité.</p>

  472. <p>Voici les six grands principes :</p>

  473. <p>1. <strong>Participation citoyenne directe </strong> : chaque personne, peu importe son sexe, genre, classe, religion ou origine ethnique, a le droit de participer pleinement à la vie publique et de prendre part directement aux décisions collectives qui affectent sa vie.</p>

  474. <p>2. <strong>Ddémocratisation à tous les niveaux</strong> : réforme du mode de scrutin, budget participatif, référendum révocatoire, démocratie économique, entreprises collectives, etc.</p>

  475. <p>3. <strong>Décentralisation</strong> des pouvoirs de décision et d’administration à l’échelle locale et régionale, accompagnée de ressources financières adéquates.</p>

  476. <p>4. <strong>Solidarité intermunicipale</strong> pour lutter contre la mise en concurrence des territoires, l’austérité et la domination des élites politiques et économiques.</p>

  477. <p>5. <strong>Justice sociale</strong> pour garantir à chaque personne un égal accès aux ressources matérielles et sociales nécessaires pour mener une vie épanouie.</p>

  478. <p>6. <strong>Transition écologique</strong> pour favoriser la coopération, le partage, la relocalisation de l’économie, la revitalisation des communautés et la protection du patrimoine territorial.</p>

  479. <p><strong>En mode vers les élections municipales</strong></p>

  480. <p>À l’approche des élections municipales de l’automne 2017, le RAM ne restera pas les bras croisés. La plate-forme nationale de coordination servira d’accélérateur pour propulser des candidatures populaires dans différentes municipalités du Québec. Lors des élections locales de 2013, 55 % des élu-e-s se retrouvaient sans opposition. Seuls 29 % de femmes et 9 % de jeunes ont participé à ces élections locales, alors que le taux d’abstention s’élevait à 53 % ! Il est donc essentiel de repolitiser la question municipale, qui se trouve au carrefour de la question sociale, écologique, démocratique et même nationale.</p>

  481. <p>Le rôle du RAM n’est pas d’imposer un programme mur à mur à l’ensemble des groupes locaux, mais de favoriser l’auto organisation populaire et l’élaboration collective de projets politiques élaborés directement par les gens concernés, en fonction des enjeux, des besoins et des aspirations de chaque communauté.  Chaque ville, chaque village est confronté à des problèmes spécifiques, mais une foule d’enjeux similaires affectent de nombreuses municipalités par-delà leurs particularités locales. C’est pourquoi il est essentiel de partager nos ressources, afin de surmonter l’isolement et de vaincre le sentiment d’impuissance face à la corruption, l’indifférence et l’apathie citoyenne à l’échelle municipale.</p>

  482. <p>Transformer la sphère politique</p>

  483. <p>Pourquoi investir l’arène électorale et ne pas se contenter d’exercer un contre-pouvoir vis-à-vis des institutions municipales ? Parce que manifester et occuper la rue n’est pas suffisant ; il faut <i>occuper les institutions</i>. Pour renverser l’oligarchie, il faut changer les règles du jeu et éviter la séparation du pouvoir entre le peuple et ses délégués. Comme l’a souligné la soulignée Pierre Vadeboncœur lors du congrès de fondation du Front d’action politique (FRAP) en 1970 : « la démocratie, c’est d’abord, c’est essentiellement le peuple solidement organisé, le peuple organisé par lui-même, qui envoie ses propres délégués à lui, non pas pour le « gouverner », mais pour exécuter ce qu’il décide. »</p>

  484. <p>En juin 2015, de larges déferlements populaires se sont emparés des principales villes d’Espagne : Barcelone, Madrid, Valence, Saragosse sont maintenant gouvernés « en commun » par des plateformes citoyennes municipalistes. Celles-ci sont issues de convergences démocratiques entre des mouvements sociaux, associations locales, partis progressistes et candidatures indépendantes qui ont su se regrouper pour mettre en pratique leurs idées et changer les choses dans leur communauté. Ces plateformes citoyennes avaient trois caractéristiques : 1) un programme commun élaboré par une méthode originale de démocratie participative basée sur la combinaison d’assemblées ouvertes et des outils numériques ; 2) des listes électorales paritaires, car sans les femmes la révolution n’aura pas lieu ; 3) un code d’éthique strict de garantie démocratique pour s’assurer que les membres du conseil municipal soient sans cesse contrôlés, surveillés, révocables, redevables et responsables. Ce code d’éthique doit non seulement prévoir des mécanismes de transparence radicale et de pouvoir décisionnel citoyen pour assurer une vigilance et une participation continue entre les élections, mais établir un plafonnement des salaires, éliminer les indemnités indécentes et abolir les privilèges de la classe politique qui s’est considérablement éloignée des gens ordinaires.</p>

  485. <p>La transformation sociale ne viendra qu’avec la récupération des lieux de décision et l’auto-organisation populaire. <i>L’émancipation du peuple doit être l’œuvre du peuple lui-même.</i> Comme l’action politique ne se limite pas aux élections tous les quatre ans, il faut agir dès maintenant pour reprendre confiance en nous-mêmes. Les municipalités demeurent les premières institutions politiques à la portée des gens : réapproprions-nous ces espaces délaissés au profit des autocrates de ce monde, et construisons un front commun pour libérer notre puissance d’agir. À nous la ville !</p></div>

  486.   </article>

  487. </section>

  488. 

  489. 

  490. <nav id="jumpto">

  491.   <p>

  492.     <a href="/david/blog/">Accueil du blog</a> |

  493.     <a href="http://www.pressegauche.org/Manifeste-A-nous-la-ville">Source originale</a> |

  494.     <a href="/david/stream/2019/">Accueil du flux</a>

  495.   </p>

  496. </nav>

  497. 

  498. <footer>

  499.   <div>

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

  501.     <p>

  502.       Bonjour/Hi!

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

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

  505.     </p>

  506.     <p>

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

  508.     </p>

  509.     

  510.     <p>

  511.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  528.     </p>

  529.     <p>

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

  531.     </p>

  532.     <p>

  533.       Je ne traque pas ta navigation mais mon

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

  535.       conserve des logs d’accès.

  536.     </p>

  537.   </div>

  538. </footer>

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

  540.   ;(_ => {

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

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

  543.       e.preventDefault()

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

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

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

  547.     })

  548.   })()

  549. </script>