DONUT/donut-formations
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajoute OSM 2

Browse Source
This commit is contained in:
Arnaud
2026-06-28 07:42:59 +02:00
parent ac8f3e15ba
commit 0757479a21
1 changed files with 281 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+281 -269
View File
@@ -1,292 +1,294 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Donut formation, les formations citoyennes du Donut Marseille</title> <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 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) : Modules en ligne (slugs réels, vhost Caddy avec index.html par dossier) :
lire-un-budget-local/ lire-un-budget-local/
lire-le-cfu-de-secteur/ lire-le-cfu-de-secteur/
acceder-docs-administratifs-ville/ acceder-docs-administratifs-ville/
respecter-droit-cada/ respecter-droit-cada/
==================================================================== lire-et-utiliser-openstreetmap-osm/
--> renseigner-openstreetmap/
====================================================================
-->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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 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> <style>
:root { :root {
--navy: #1a2332; --navy: #1a2332;
--navy-soft: #243044; --navy-soft: #243044;
--ink: #1a2332; --ink: #1a2332;
--ink-2: #2b3850; --ink-2: #2b3850;
--paper: #faf7f0; --paper: #faf7f0;
--cream: #f4efe3; --cream: #f4efe3;
--white: #ffffff; --white: #ffffff;
--gold: #e8b04d; --gold: #e8b04d;
--gold-deep: #a9781f; --gold-deep: #a9781f;
--gold-soft: #f0c873; --gold-soft: #f0c873;
--gold-bg: #fbf3e0; --gold-bg: #fbf3e0;
--border: #e7ded0; --border: #e7ded0;
--muted: #5c6675; --muted: #5c6675;
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
html { scroll-behavior: smooth; } html { scroll-behavior: smooth; }
body { body {
margin: 0; margin: 0;
font-family: 'Inter', system-ui, sans-serif; font-family: 'Inter', system-ui, sans-serif;
color: var(--ink); color: var(--ink);
background: var(--paper); background: var(--paper);
line-height: 1.65; line-height: 1.65;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
/* Barre de progression au scroll */ /* Barre de progression au scroll */
#progress { #progress {
position: fixed; top: 0; left: 0; height: 3px; width: 0; position: fixed; top: 0; left: 0; height: 3px; width: 0;
background: linear-gradient(90deg, var(--gold), var(--gold-soft)); background: linear-gradient(90deg, var(--gold), var(--gold-soft));
z-index: 1300; transition: width .08s linear; z-index: 1300; transition: width .08s linear;
} }
/* Bandeau du haut */ /* Bandeau du haut */
.top-banner { .top-banner {
background: var(--navy); background: var(--navy);
color: var(--gold-soft); color: var(--gold-soft);
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
font-size: .76rem; font-size: .76rem;
letter-spacing: .02em; letter-spacing: .02em;
text-align: center; text-align: center;
padding: .55rem 1rem; padding: .55rem 1rem;
border-bottom: 1px solid rgba(232,176,77,.25); border-bottom: 1px solid rgba(232,176,77,.25);
} }
/* Hero */ /* Hero */
header.hero { header.hero {
background: background:
radial-gradient(1200px 400px at 80% -10%, rgba(232,176,77,.16), transparent 60%), radial-gradient(1200px 400px at 80% -10%, rgba(232,176,77,.16), transparent 60%),
linear-gradient(180deg, var(--navy) 0%, var(--navy-soft) 100%); linear-gradient(180deg, var(--navy) 0%, var(--navy-soft) 100%);
color: #eef1f6; color: #eef1f6;
padding: 3.6rem 1.5rem 3.2rem; padding: 3.6rem 1.5rem 3.2rem;
text-align: center; text-align: center;
border-bottom: 3px solid var(--gold); border-bottom: 3px solid var(--gold);
} }
.hero .wrap { max-width: 820px; margin: 0 auto; } .hero .wrap { max-width: 820px; margin: 0 auto; }
.kicker { .kicker {
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
font-size: .78rem; font-size: .78rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: .16em; letter-spacing: .16em;
color: var(--gold-soft); color: var(--gold-soft);
margin-bottom: 1.1rem; margin-bottom: 1.1rem;
} }
.hero h1 { .hero h1 {
font-size: clamp(2.1rem, 5.2vw, 3.4rem); font-size: clamp(2.1rem, 5.2vw, 3.4rem);
line-height: 1.08; line-height: 1.08;
margin: 0 0 1.1rem; margin: 0 0 1.1rem;
font-weight: 900; font-weight: 900;
letter-spacing: -.015em; letter-spacing: -.015em;
} }
.hero h1 span { color: var(--gold); } .hero h1 span { color: var(--gold); }
.hero .lede { .hero .lede {
font-size: clamp(1.02rem, 2.2vw, 1.18rem); font-size: clamp(1.02rem, 2.2vw, 1.18rem);
color: #c9d0dc; color: #c9d0dc;
max-width: 680px; max-width: 680px;
margin: 0 auto 1.7rem; margin: 0 auto 1.7rem;
} }
.hero-badges { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; } .hero-badges { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; }
.badge { .badge {
background: rgba(232,176,77,.12); background: rgba(232,176,77,.12);
border: 1px solid rgba(232,176,77,.4); border: 1px solid rgba(232,176,77,.4);
color: var(--gold-soft); color: var(--gold-soft);
font-size: .8rem; font-size: .8rem;
font-weight: 600; font-weight: 600;
padding: .35rem .8rem; padding: .35rem .8rem;
border-radius: 2rem; border-radius: 2rem;
} }
/* Sections */ /* Sections */
main { max-width: 820px; margin: 0 auto; padding: 0 1.3rem; } main { max-width: 820px; margin: 0 auto; padding: 0 1.3rem; }
.intro { .intro {
max-width: 820px; max-width: 820px;
margin: 3rem auto 1rem; margin: 3rem auto 1rem;
text-align: center; text-align: center;
color: var(--muted); color: var(--muted);
font-size: 1.04rem; font-size: 1.04rem;
} }
.intro strong { color: var(--ink); } .intro strong { color: var(--ink); }
.fam { margin: 3rem 0 1rem; } .fam { margin: 3rem 0 1rem; }
.fam-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: 1.3rem; } .fam-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: 1.3rem; }
.fam-num { .fam-num {
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
font-weight: 700; font-weight: 700;
font-size: .9rem; font-size: .9rem;
color: var(--white); color: var(--white);
background: var(--navy); background: var(--navy);
border-radius: .4rem; border-radius: .4rem;
padding: .15rem .55rem; padding: .15rem .55rem;
flex: 0 0 auto; flex: 0 0 auto;
} }
.fam-head h2 { .fam-head h2 {
font-size: clamp(1.35rem, 3.4vw, 1.7rem); font-size: clamp(1.35rem, 3.4vw, 1.7rem);
margin: 0; margin: 0;
font-weight: 800; font-weight: 800;
letter-spacing: -.01em; letter-spacing: -.01em;
} }
.fam-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; margin-bottom: 1.3rem; } .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 .fam-sub { color: var(--muted); font-size: .92rem; flex-basis: 100%; margin-left: 0; text-align: left; }
/* Grille de cartes */ /* Grille de cartes */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1.1rem; } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1.1rem; }
.card { .card {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--white); background: var(--white);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: .85rem; border-radius: .85rem;
padding: 1.4rem 1.4rem 1.2rem; padding: 1.4rem 1.4rem 1.2rem;
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
overflow: hidden; overflow: hidden;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
} }
.card::before { .card::before {
content: ""; content: "";
position: absolute; left: 0; top: 0; bottom: 0; width: 4px; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: linear-gradient(180deg, var(--gold), var(--gold-soft)); background: linear-gradient(180deg, var(--gold), var(--gold-soft));
} }
.card:hover { .card:hover {
transform: translateY(-3px); transform: translateY(-3px);
box-shadow: 0 14px 34px rgba(26,35,50,.13); box-shadow: 0 14px 34px rgba(26,35,50,.13);
border-color: var(--gold-soft); border-color: var(--gold-soft);
} }
.card:focus-visible { .card:focus-visible {
outline: 3px solid var(--gold-deep); outline: 3px solid var(--gold-deep);
outline-offset: 2px; outline-offset: 2px;
} }
.card-tag { .card-tag {
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
font-size: .7rem; font-size: .7rem;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: .08em; letter-spacing: .08em;
color: var(--gold-deep); color: var(--gold-deep);
background: var(--gold-bg); background: var(--gold-bg);
border: 1px solid var(--gold-soft); border: 1px solid var(--gold-soft);
border-radius: 2rem; border-radius: 2rem;
padding: .18rem .6rem; padding: .18rem .6rem;
align-self: flex-start; align-self: flex-start;
margin-bottom: .85rem; margin-bottom: .85rem;
} }
.card h3 { .card h3 {
font-size: 1.18rem; font-size: 1.18rem;
margin: 0 0 .55rem; margin: 0 0 .55rem;
font-weight: 800; font-weight: 800;
line-height: 1.25; line-height: 1.25;
letter-spacing: -.01em; letter-spacing: -.01em;
} }
.card p { margin: 0 0 1.1rem; font-size: .92rem; color: var(--muted); } .card p { margin: 0 0 1.1rem; font-size: .92rem; color: var(--muted); }
.card-meta { .card-meta {
margin-top: auto; margin-top: auto;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: .6rem; gap: .6rem;
padding-top: .8rem; padding-top: .8rem;
border-top: 1px dashed var(--border); border-top: 1px dashed var(--border);
} }
.card-niv { font-size: .78rem; color: var(--muted); font-weight: 600; } .card-niv { font-size: .78rem; color: var(--muted); font-weight: 600; }
.card-open { .card-open {
font-size: .85rem; font-size: .85rem;
font-weight: 700; font-weight: 700;
color: var(--gold-deep); color: var(--gold-deep);
white-space: nowrap; white-space: nowrap;
} }
.card-open .arr { transition: transform .16s ease; display: inline-block; } .card-open .arr { transition: transform .16s ease; display: inline-block; }
.card:hover .card-open .arr { transform: translateX(3px); } .card:hover .card-open .arr { transform: translateX(3px); }
/* Carte "à venir" */ /* Carte "à venir" */
.card.soon { .card.soon {
background: var(--cream); background: var(--cream);
border-style: dashed; border-style: dashed;
cursor: default; cursor: default;
} }
.card.soon::before { background: var(--border); } .card.soon::before { background: var(--border); }
.card.soon:hover { transform: none; box-shadow: none; border-color: 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 .card-tag { color: var(--muted); background: transparent; border-color: var(--border); }
.card.soon h3 { color: var(--ink-2); } .card.soon h3 { color: var(--ink-2); }
/* Acronymes (tooltip accessible) */ /* Acronymes (tooltip accessible) */
.acr { .acr {
border-bottom: 1px dotted var(--gold-deep); border-bottom: 1px dotted var(--gold-deep);
cursor: help; cursor: help;
font-weight: 600; font-weight: 600;
color: var(--gold-deep); color: var(--gold-deep);
} }
.acr:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; border-radius: 2px; } .acr:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; border-radius: 2px; }
#acr-tip { #acr-tip {
position: fixed; z-index: 1400; max-width: 290px; position: fixed; z-index: 1400; max-width: 290px;
background: var(--navy-soft); color: #eef1f6; background: var(--navy-soft); color: #eef1f6;
font-size: .82rem; line-height: 1.5; font-size: .82rem; line-height: 1.5;
padding: .6rem .75rem; border-radius: .5rem; padding: .6rem .75rem; border-radius: .5rem;
border: 1px solid rgba(232,176,77,.4); border: 1px solid rgba(232,176,77,.4);
box-shadow: 0 8px 26px rgba(0,0,0,.35); box-shadow: 0 8px 26px rgba(0,0,0,.35);
display: none; opacity: 0; transition: opacity .14s; pointer-events: none; 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 strong { display: block; font-size: .8rem; color: var(--gold-soft); margin-bottom: .25rem; font-weight: 800; }
/* Lexique */ /* Lexique */
.lexique { margin: 3.4rem 0 1rem; } .lexique { margin: 3.4rem 0 1rem; }
.lexique h2 { font-size: 1.4rem; font-weight: 800; margin: 0 0 1.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-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-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-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; } .lex-def { font-size: .82rem; color: var(--muted); margin-top: .2rem; }
/* Bloc final mission */ /* Bloc final mission */
.mission { .mission {
margin: 3.4rem 0 1rem; margin: 3.4rem 0 1rem;
background: var(--white); background: var(--white);
border: 1px solid var(--border); border: 1px solid var(--border);
border-left: 4px solid var(--gold); border-left: 4px solid var(--gold);
border-radius: .7rem; border-radius: .7rem;
padding: 1.6rem 1.7rem; padding: 1.6rem 1.7rem;
} }
.mission h2 { font-size: 1.25rem; margin: 0 0 .6rem; font-weight: 800; } .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 { margin: 0 0 .6rem; color: var(--muted); font-size: .95rem; }
.mission p:last-child { margin-bottom: 0; } .mission p:last-child { margin-bottom: 0; }
.mission a { color: var(--gold-deep); font-weight: 600; } .mission a { color: var(--gold-deep); font-weight: 600; }
/* Footer */ /* Footer */
footer { footer {
background: var(--navy); background: var(--navy);
color: #aeb6c6; color: #aeb6c6;
padding: 2.8rem 1.5rem 2.4rem; padding: 2.8rem 1.5rem 2.4rem;
text-align: center; text-align: center;
font-size: .85rem; font-size: .85rem;
margin-top: 3.4rem; margin-top: 3.4rem;
} }
footer .f-brand { font-weight: 800; color: var(--gold-soft); font-size: 1.05rem; letter-spacing: -.01em; } footer .f-brand { font-weight: 800; color: var(--gold-soft); font-size: 1.05rem; letter-spacing: -.01em; }
footer p { margin: .5rem 0; } footer p { margin: .5rem 0; }
footer a { color: var(--gold-soft); } footer a { color: var(--gold-soft); }
footer .f-small { font-size: .78rem; color: #7e8799; margin-top: 1.1rem; } footer .f-small { font-size: .78rem; color: #7e8799; margin-top: 1.1rem; }
@media (max-width: 640px) { @media (max-width: 640px) {
header.hero { padding: 2.8rem 1.2rem 2.4rem; } header.hero { padding: 2.8rem 1.2rem 2.4rem; }
.fam-head { flex-wrap: wrap; } .fam-head { flex-wrap: wrap; }
.fam-head .fam-sub { margin-left: 0; text-align: left; width: 100%; } .fam-head .fam-sub { margin-left: 0; text-align: left; width: 100%; }
} }
</style> </style>
</head> </head>
<body> <body>
<div id="progress"></div> <div id="progress"></div>
@@ -386,7 +388,7 @@
<div class="fam-head"> <div class="fam-head">
<span class="fam-num">03</span> <span class="fam-num">03</span>
<h2 id="fam3">Lire et utiliser OpenStreetMap</h2> <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>
<div class="cards"> <div class="cards">
@@ -400,6 +402,16 @@
</div> </div>
</a> </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> </div>
</section> </section>