From 0757479a215ad7431fee2edff6f4a49d081a4863 Mon Sep 17 00:00:00 2001
From: Arnaud <dupleix@gmail.com>
Date: Sun, 28 Jun 2026 07:42:59 +0200
Subject: [PATCH] Ajoute OSM 2

---
 index.html | 550 +++++++++++++++++++++++++++--------------------------
 1 file changed, 281 insertions(+), 269 deletions(-)
diff --git a/index.html b/index.html
index f30c38f..97fecc2 100644
--- a/index.html
+++ b/index.html
@@ -1,292 +1,294 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Donut formation, les formations citoyennes du Donut Marseille</title>
-<meta name="description" content="Les formations citoyennes du Donut Marseille (InfoLab citoyen). Modules autonomes, gratuits et sans inscription.">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Donut formation, les formations citoyennes du Donut Marseille</title>
+  <meta name="description" content="Les formations citoyennes du Donut Marseille (InfoLab citoyen). Modules autonomes, gratuits et sans inscription.">
 
-<!--
-  ====================================================================
-  Modules en ligne (slugs réels, vhost Caddy avec index.html par dossier) :
-    lire-un-budget-local/
-    lire-le-cfu-de-secteur/
-    acceder-docs-administratifs-ville/
-    respecter-droit-cada/
-  ====================================================================
--->
+  <!--
+    ====================================================================
+    Modules en ligne (slugs réels, vhost Caddy avec index.html par dossier) :
+      lire-un-budget-local/
+      lire-le-cfu-de-secteur/
+      acceder-docs-administratifs-ville/
+      respecter-droit-cada/
+      lire-et-utiliser-openstreetmap-osm/
+      renseigner-openstreetmap/
+    ====================================================================
+  -->
 
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
 
-<style>
-  :root {
-    --navy: #1a2332;
-    --navy-soft: #243044;
-    --ink: #1a2332;
-    --ink-2: #2b3850;
-    --paper: #faf7f0;
-    --cream: #f4efe3;
-    --white: #ffffff;
-    --gold: #e8b04d;
-    --gold-deep: #a9781f;
-    --gold-soft: #f0c873;
-    --gold-bg: #fbf3e0;
-    --border: #e7ded0;
-    --muted: #5c6675;
-  }
+  <style>
+    :root {
+      --navy: #1a2332;
+      --navy-soft: #243044;
+      --ink: #1a2332;
+      --ink-2: #2b3850;
+      --paper: #faf7f0;
+      --cream: #f4efe3;
+      --white: #ffffff;
+      --gold: #e8b04d;
+      --gold-deep: #a9781f;
+      --gold-soft: #f0c873;
+      --gold-bg: #fbf3e0;
+      --border: #e7ded0;
+      --muted: #5c6675;
+    }
 
-  * { box-sizing: border-box; }
-  html { scroll-behavior: smooth; }
-  body {
-    margin: 0;
-    font-family: 'Inter', system-ui, sans-serif;
-    color: var(--ink);
-    background: var(--paper);
-    line-height: 1.65;
-    -webkit-font-smoothing: antialiased;
-  }
+    * { box-sizing: border-box; }
+    html { scroll-behavior: smooth; }
+    body {
+      margin: 0;
+      font-family: 'Inter', system-ui, sans-serif;
+      color: var(--ink);
+      background: var(--paper);
+      line-height: 1.65;
+      -webkit-font-smoothing: antialiased;
+    }
 
-  /* Barre de progression au scroll */
-  #progress {
-    position: fixed; top: 0; left: 0; height: 3px; width: 0;
-    background: linear-gradient(90deg, var(--gold), var(--gold-soft));
-    z-index: 1300; transition: width .08s linear;
-  }
+    /* Barre de progression au scroll */
+    #progress {
+      position: fixed; top: 0; left: 0; height: 3px; width: 0;
+      background: linear-gradient(90deg, var(--gold), var(--gold-soft));
+      z-index: 1300; transition: width .08s linear;
+    }
 
-  /* Bandeau du haut */
-  .top-banner {
-    background: var(--navy);
-    color: var(--gold-soft);
-    font-family: 'JetBrains Mono', monospace;
-    font-size: .76rem;
-    letter-spacing: .02em;
-    text-align: center;
-    padding: .55rem 1rem;
-    border-bottom: 1px solid rgba(232,176,77,.25);
-  }
+    /* Bandeau du haut */
+    .top-banner {
+      background: var(--navy);
+      color: var(--gold-soft);
+      font-family: 'JetBrains Mono', monospace;
+      font-size: .76rem;
+      letter-spacing: .02em;
+      text-align: center;
+      padding: .55rem 1rem;
+      border-bottom: 1px solid rgba(232,176,77,.25);
+    }
 
-  /* Hero */
-  header.hero {
-    background:
-      radial-gradient(1200px 400px at 80% -10%, rgba(232,176,77,.16), transparent 60%),
-      linear-gradient(180deg, var(--navy) 0%, var(--navy-soft) 100%);
-    color: #eef1f6;
-    padding: 3.6rem 1.5rem 3.2rem;
-    text-align: center;
-    border-bottom: 3px solid var(--gold);
-  }
-  .hero .wrap { max-width: 820px; margin: 0 auto; }
-  .kicker {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: .78rem;
-    text-transform: uppercase;
-    letter-spacing: .16em;
-    color: var(--gold-soft);
-    margin-bottom: 1.1rem;
-  }
-  .hero h1 {
-    font-size: clamp(2.1rem, 5.2vw, 3.4rem);
-    line-height: 1.08;
-    margin: 0 0 1.1rem;
-    font-weight: 900;
-    letter-spacing: -.015em;
-  }
-  .hero h1 span { color: var(--gold); }
-  .hero .lede {
-    font-size: clamp(1.02rem, 2.2vw, 1.18rem);
-    color: #c9d0dc;
-    max-width: 680px;
-    margin: 0 auto 1.7rem;
-  }
-  .hero-badges { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
-  .badge {
-    background: rgba(232,176,77,.12);
-    border: 1px solid rgba(232,176,77,.4);
-    color: var(--gold-soft);
-    font-size: .8rem;
-    font-weight: 600;
-    padding: .35rem .8rem;
-    border-radius: 2rem;
-  }
+    /* Hero */
+    header.hero {
+      background:
+              radial-gradient(1200px 400px at 80% -10%, rgba(232,176,77,.16), transparent 60%),
+              linear-gradient(180deg, var(--navy) 0%, var(--navy-soft) 100%);
+      color: #eef1f6;
+      padding: 3.6rem 1.5rem 3.2rem;
+      text-align: center;
+      border-bottom: 3px solid var(--gold);
+    }
+    .hero .wrap { max-width: 820px; margin: 0 auto; }
+    .kicker {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: .78rem;
+      text-transform: uppercase;
+      letter-spacing: .16em;
+      color: var(--gold-soft);
+      margin-bottom: 1.1rem;
+    }
+    .hero h1 {
+      font-size: clamp(2.1rem, 5.2vw, 3.4rem);
+      line-height: 1.08;
+      margin: 0 0 1.1rem;
+      font-weight: 900;
+      letter-spacing: -.015em;
+    }
+    .hero h1 span { color: var(--gold); }
+    .hero .lede {
+      font-size: clamp(1.02rem, 2.2vw, 1.18rem);
+      color: #c9d0dc;
+      max-width: 680px;
+      margin: 0 auto 1.7rem;
+    }
+    .hero-badges { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
+    .badge {
+      background: rgba(232,176,77,.12);
+      border: 1px solid rgba(232,176,77,.4);
+      color: var(--gold-soft);
+      font-size: .8rem;
+      font-weight: 600;
+      padding: .35rem .8rem;
+      border-radius: 2rem;
+    }
 
-  /* Sections */
-  main { max-width: 820px; margin: 0 auto; padding: 0 1.3rem; }
-  .intro {
-    max-width: 820px;
-    margin: 3rem auto 1rem;
-    text-align: center;
-    color: var(--muted);
-    font-size: 1.04rem;
-  }
-  .intro strong { color: var(--ink); }
+    /* Sections */
+    main { max-width: 820px; margin: 0 auto; padding: 0 1.3rem; }
+    .intro {
+      max-width: 820px;
+      margin: 3rem auto 1rem;
+      text-align: center;
+      color: var(--muted);
+      font-size: 1.04rem;
+    }
+    .intro strong { color: var(--ink); }
 
-  .fam { margin: 3rem 0 1rem; }
-  .fam-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: 1.3rem; }
-  .fam-num {
-    font-family: 'JetBrains Mono', monospace;
-    font-weight: 700;
-    font-size: .9rem;
-    color: var(--white);
-    background: var(--navy);
-    border-radius: .4rem;
-    padding: .15rem .55rem;
-    flex: 0 0 auto;
-  }
-  .fam-head h2 {
-    font-size: clamp(1.35rem, 3.4vw, 1.7rem);
-    margin: 0;
-    font-weight: 800;
-    letter-spacing: -.01em;
-  }
+    .fam { margin: 3rem 0 1rem; }
+    .fam-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: 1.3rem; }
+    .fam-num {
+      font-family: 'JetBrains Mono', monospace;
+      font-weight: 700;
+      font-size: .9rem;
+      color: var(--white);
+      background: var(--navy);
+      border-radius: .4rem;
+      padding: .15rem .55rem;
+      flex: 0 0 auto;
+    }
+    .fam-head h2 {
+      font-size: clamp(1.35rem, 3.4vw, 1.7rem);
+      margin: 0;
+      font-weight: 800;
+      letter-spacing: -.01em;
+    }
 
-  .fam-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; margin-bottom: 1.3rem; }
-  .fam-head .fam-sub { color: var(--muted); font-size: .92rem; flex-basis: 100%; margin-left: 0; text-align: left; }
+    .fam-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; margin-bottom: 1.3rem; }
+    .fam-head .fam-sub { color: var(--muted); font-size: .92rem; flex-basis: 100%; margin-left: 0; text-align: left; }
 
-  /* Grille de cartes */
-  .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1.1rem; }
-  .card {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    background: var(--white);
-    border: 1px solid var(--border);
-    border-radius: .85rem;
-    padding: 1.4rem 1.4rem 1.2rem;
-    text-decoration: none;
-    color: inherit;
-    overflow: hidden;
-    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
-  }
-  .card::before {
-    content: "";
-    position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
-    background: linear-gradient(180deg, var(--gold), var(--gold-soft));
-  }
-  .card:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 14px 34px rgba(26,35,50,.13);
-    border-color: var(--gold-soft);
-  }
-  .card:focus-visible {
-    outline: 3px solid var(--gold-deep);
-    outline-offset: 2px;
-  }
-  .card-tag {
-    font-family: 'JetBrains Mono', monospace;
-    font-size: .7rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: .08em;
-    color: var(--gold-deep);
-    background: var(--gold-bg);
-    border: 1px solid var(--gold-soft);
-    border-radius: 2rem;
-    padding: .18rem .6rem;
-    align-self: flex-start;
-    margin-bottom: .85rem;
-  }
-  .card h3 {
-    font-size: 1.18rem;
-    margin: 0 0 .55rem;
-    font-weight: 800;
-    line-height: 1.25;
-    letter-spacing: -.01em;
-  }
-  .card p { margin: 0 0 1.1rem; font-size: .92rem; color: var(--muted); }
-  .card-meta {
-    margin-top: auto;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: .6rem;
-    padding-top: .8rem;
-    border-top: 1px dashed var(--border);
-  }
-  .card-niv { font-size: .78rem; color: var(--muted); font-weight: 600; }
-  .card-open {
-    font-size: .85rem;
-    font-weight: 700;
-    color: var(--gold-deep);
-    white-space: nowrap;
-  }
-  .card-open .arr { transition: transform .16s ease; display: inline-block; }
-  .card:hover .card-open .arr { transform: translateX(3px); }
+    /* Grille de cartes */
+    .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1.1rem; }
+    .card {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      background: var(--white);
+      border: 1px solid var(--border);
+      border-radius: .85rem;
+      padding: 1.4rem 1.4rem 1.2rem;
+      text-decoration: none;
+      color: inherit;
+      overflow: hidden;
+      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
+    }
+    .card::before {
+      content: "";
+      position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
+      background: linear-gradient(180deg, var(--gold), var(--gold-soft));
+    }
+    .card:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 14px 34px rgba(26,35,50,.13);
+      border-color: var(--gold-soft);
+    }
+    .card:focus-visible {
+      outline: 3px solid var(--gold-deep);
+      outline-offset: 2px;
+    }
+    .card-tag {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: .7rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: .08em;
+      color: var(--gold-deep);
+      background: var(--gold-bg);
+      border: 1px solid var(--gold-soft);
+      border-radius: 2rem;
+      padding: .18rem .6rem;
+      align-self: flex-start;
+      margin-bottom: .85rem;
+    }
+    .card h3 {
+      font-size: 1.18rem;
+      margin: 0 0 .55rem;
+      font-weight: 800;
+      line-height: 1.25;
+      letter-spacing: -.01em;
+    }
+    .card p { margin: 0 0 1.1rem; font-size: .92rem; color: var(--muted); }
+    .card-meta {
+      margin-top: auto;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: .6rem;
+      padding-top: .8rem;
+      border-top: 1px dashed var(--border);
+    }
+    .card-niv { font-size: .78rem; color: var(--muted); font-weight: 600; }
+    .card-open {
+      font-size: .85rem;
+      font-weight: 700;
+      color: var(--gold-deep);
+      white-space: nowrap;
+    }
+    .card-open .arr { transition: transform .16s ease; display: inline-block; }
+    .card:hover .card-open .arr { transform: translateX(3px); }
 
-  /* Carte "à venir" */
-  .card.soon {
-    background: var(--cream);
-    border-style: dashed;
-    cursor: default;
-  }
-  .card.soon::before { background: var(--border); }
-  .card.soon:hover { transform: none; box-shadow: none; border-color: var(--border); }
-  .card.soon .card-tag { color: var(--muted); background: transparent; border-color: var(--border); }
-  .card.soon h3 { color: var(--ink-2); }
+    /* Carte "à venir" */
+    .card.soon {
+      background: var(--cream);
+      border-style: dashed;
+      cursor: default;
+    }
+    .card.soon::before { background: var(--border); }
+    .card.soon:hover { transform: none; box-shadow: none; border-color: var(--border); }
+    .card.soon .card-tag { color: var(--muted); background: transparent; border-color: var(--border); }
+    .card.soon h3 { color: var(--ink-2); }
 
-  /* Acronymes (tooltip accessible) */
-  .acr {
-    border-bottom: 1px dotted var(--gold-deep);
-    cursor: help;
-    font-weight: 600;
-    color: var(--gold-deep);
-  }
-  .acr:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; border-radius: 2px; }
+    /* Acronymes (tooltip accessible) */
+    .acr {
+      border-bottom: 1px dotted var(--gold-deep);
+      cursor: help;
+      font-weight: 600;
+      color: var(--gold-deep);
+    }
+    .acr:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; border-radius: 2px; }
 
-  #acr-tip {
-    position: fixed; z-index: 1400; max-width: 290px;
-    background: var(--navy-soft); color: #eef1f6;
-    font-size: .82rem; line-height: 1.5;
-    padding: .6rem .75rem; border-radius: .5rem;
-    border: 1px solid rgba(232,176,77,.4);
-    box-shadow: 0 8px 26px rgba(0,0,0,.35);
-    display: none; opacity: 0; transition: opacity .14s; pointer-events: none;
-  }
-  #acr-tip strong { display: block; font-size: .8rem; color: var(--gold-soft); margin-bottom: .25rem; font-weight: 800; }
+    #acr-tip {
+      position: fixed; z-index: 1400; max-width: 290px;
+      background: var(--navy-soft); color: #eef1f6;
+      font-size: .82rem; line-height: 1.5;
+      padding: .6rem .75rem; border-radius: .5rem;
+      border: 1px solid rgba(232,176,77,.4);
+      box-shadow: 0 8px 26px rgba(0,0,0,.35);
+      display: none; opacity: 0; transition: opacity .14s; pointer-events: none;
+    }
+    #acr-tip strong { display: block; font-size: .8rem; color: var(--gold-soft); margin-bottom: .25rem; font-weight: 800; }
 
-  /* Lexique */
-  .lexique { margin: 3.4rem 0 1rem; }
-  .lexique h2 { font-size: 1.4rem; font-weight: 800; margin: 0 0 1.1rem; }
-  .lex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem; }
-  .lex-item { background: var(--white); border: 1px solid var(--border); border-radius: .5rem; padding: .7rem .85rem; }
-  .lex-sigle { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--navy); font-size: .9rem; }
-  .lex-def { font-size: .82rem; color: var(--muted); margin-top: .2rem; }
+    /* Lexique */
+    .lexique { margin: 3.4rem 0 1rem; }
+    .lexique h2 { font-size: 1.4rem; font-weight: 800; margin: 0 0 1.1rem; }
+    .lex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem; }
+    .lex-item { background: var(--white); border: 1px solid var(--border); border-radius: .5rem; padding: .7rem .85rem; }
+    .lex-sigle { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--navy); font-size: .9rem; }
+    .lex-def { font-size: .82rem; color: var(--muted); margin-top: .2rem; }
 
-  /* Bloc final mission */
-  .mission {
-    margin: 3.4rem 0 1rem;
-    background: var(--white);
-    border: 1px solid var(--border);
-    border-left: 4px solid var(--gold);
-    border-radius: .7rem;
-    padding: 1.6rem 1.7rem;
-  }
-  .mission h2 { font-size: 1.25rem; margin: 0 0 .6rem; font-weight: 800; }
-  .mission p { margin: 0 0 .6rem; color: var(--muted); font-size: .95rem; }
-  .mission p:last-child { margin-bottom: 0; }
-  .mission a { color: var(--gold-deep); font-weight: 600; }
+    /* Bloc final mission */
+    .mission {
+      margin: 3.4rem 0 1rem;
+      background: var(--white);
+      border: 1px solid var(--border);
+      border-left: 4px solid var(--gold);
+      border-radius: .7rem;
+      padding: 1.6rem 1.7rem;
+    }
+    .mission h2 { font-size: 1.25rem; margin: 0 0 .6rem; font-weight: 800; }
+    .mission p { margin: 0 0 .6rem; color: var(--muted); font-size: .95rem; }
+    .mission p:last-child { margin-bottom: 0; }
+    .mission a { color: var(--gold-deep); font-weight: 600; }
 
-  /* Footer */
-  footer {
-    background: var(--navy);
-    color: #aeb6c6;
-    padding: 2.8rem 1.5rem 2.4rem;
-    text-align: center;
-    font-size: .85rem;
-    margin-top: 3.4rem;
-  }
-  footer .f-brand { font-weight: 800; color: var(--gold-soft); font-size: 1.05rem; letter-spacing: -.01em; }
-  footer p { margin: .5rem 0; }
-  footer a { color: var(--gold-soft); }
-  footer .f-small { font-size: .78rem; color: #7e8799; margin-top: 1.1rem; }
+    /* Footer */
+    footer {
+      background: var(--navy);
+      color: #aeb6c6;
+      padding: 2.8rem 1.5rem 2.4rem;
+      text-align: center;
+      font-size: .85rem;
+      margin-top: 3.4rem;
+    }
+    footer .f-brand { font-weight: 800; color: var(--gold-soft); font-size: 1.05rem; letter-spacing: -.01em; }
+    footer p { margin: .5rem 0; }
+    footer a { color: var(--gold-soft); }
+    footer .f-small { font-size: .78rem; color: #7e8799; margin-top: 1.1rem; }
 
-  @media (max-width: 640px) {
-    header.hero { padding: 2.8rem 1.2rem 2.4rem; }
-    .fam-head { flex-wrap: wrap; }
-    .fam-head .fam-sub { margin-left: 0; text-align: left; width: 100%; }
-  }
-</style>
+    @media (max-width: 640px) {
+      header.hero { padding: 2.8rem 1.2rem 2.4rem; }
+      .fam-head { flex-wrap: wrap; }
+      .fam-head .fam-sub { margin-left: 0; text-align: left; width: 100%; }
+    }
+  </style>
 </head>
 <body>
 <div id="progress"></div>
@@ -386,7 +388,7 @@
     <div class="fam-head">
       <span class="fam-num">03</span>
       <h2 id="fam3">Lire et utiliser OpenStreetMap</h2>
-      <span class="fam-sub">Trouver, demander, obtenir</span>
+      <span class="fam-sub">Consulter, extraire, contribuer</span>
     </div>
     <div class="cards">
 
@@ -400,6 +402,16 @@
         </div>
       </a>
 
+      <a class="card" href="renseigner-openstreetmap/">
+        <span class="card-tag">Guide pratique</span>
+        <h3>Renseigner et compléter OSM</h3>
+        <p>Créer un compte et contribuer : choisir un éditeur (iD, StreetComplete, Every Door), ajouter et corriger les données de son territoire, dans les règles.</p>
+        <div class="card-meta">
+          <span class="card-niv">Niveau : débutant</span>
+          <span class="card-open">Ouvrir <span class="arr">&#8594;</span></span>
+        </div>
+      </a>
+
     </div>
   </section>
 
