Ajouter index.html
This commit is contained in:
+475
@@ -0,0 +1,475 @@
|
|||||||
|
<!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) : lire les documents budgétaires des collectivités, accéder aux documents publics, faire respecter le droit d'accès. 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/
|
||||||
|
====================================================================
|
||||||
|
-->
|
||||||
|
|
||||||
|
<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;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sections */
|
||||||
|
main { max-width: 1080px; margin: 0 auto; padding: 0 1.3rem; }
|
||||||
|
.intro {
|
||||||
|
max-width: 760px;
|
||||||
|
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-head .fam-sub { color: var(--muted); font-size: .92rem; margin-left: auto; text-align: right; }
|
||||||
|
|
||||||
|
/* 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); }
|
||||||
|
|
||||||
|
/* 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; }
|
||||||
|
|
||||||
|
/* 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; }
|
||||||
|
|
||||||
|
/* 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>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="progress"></div>
|
||||||
|
|
||||||
|
<div class="top-banner">
|
||||||
|
Le Donut Marseille · InfoLab citoyen · Formations à la transparence locale
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<header class="hero">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="kicker">Donut formation</div>
|
||||||
|
<h1>Comprendre l'<span>argent public</span> local, et vos droits</h1>
|
||||||
|
<p class="lede">
|
||||||
|
Des modules courts et autonomes pour apprendre à lire les documents budgétaires des collectivités, retrouver les documents publics de la Ville de Marseille et faire respecter votre droit d'accès. Gratuits, sans inscription, pensés pour les citoyens, les conseillers d'arrondissement et les élus d'opposition.
|
||||||
|
</p>
|
||||||
|
<div class="hero-badges">
|
||||||
|
<span class="badge">Budgets locaux</span>
|
||||||
|
<span class="badge">Accès aux documents</span>
|
||||||
|
<span class="badge">Droit d'accès et recours</span>
|
||||||
|
<span class="badge">Marseille et ses secteurs</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<p class="intro">
|
||||||
|
Chaque module est une page web complète, lisible sur téléphone, qui combine la <strong>méthode générale</strong> et un <strong>exemple concret</strong> tiré des documents de la Ville de Marseille ou de ses mairies de secteur. Choisissez par thème.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- ============ FAMILLE 1 : DOCUMENTS FINANCIERS ============ -->
|
||||||
|
<section class="fam" aria-labelledby="fam1">
|
||||||
|
<div class="fam-head">
|
||||||
|
<span class="fam-num">01</span>
|
||||||
|
<h2 id="fam1">Lire les documents financiers</h2>
|
||||||
|
<span class="fam-sub">Budget local et CFU de secteur</span>
|
||||||
|
</div>
|
||||||
|
<div class="cards">
|
||||||
|
|
||||||
|
<a class="card" href="lire-un-budget-local/">
|
||||||
|
<span class="card-tag">Formation</span>
|
||||||
|
<h3>Lire un budget local</h3>
|
||||||
|
<p>Le cycle budgétaire d'une commune, du <span class="acr" data-full="Budget primitif" data-tip="Document prévisionnel voté en début d'exercice : il autorise les dépenses et prévoit les recettes de l'année.">BP</span> au compte administratif. Grandes masses, section de fonctionnement et section d'investissement, et les bons réflexes de lecture.</p>
|
||||||
|
<div class="card-meta">
|
||||||
|
<span class="card-niv">Niveau : initiation</span>
|
||||||
|
<span class="card-open">Ouvrir <span class="arr">→</span></span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="card" href="lire-le-cfu-de-secteur/">
|
||||||
|
<span class="card-tag">Guide de lecture</span>
|
||||||
|
<h3>Lire le CFU d'une mairie de secteur</h3>
|
||||||
|
<p>Lire un <span class="acr" data-full="Compte Financier Unique" data-tip="Maquette comptable unique qui remplace le compte administratif et le compte de gestion. Généralisée à partir de l'exercice 2026.">CFU</span> voté en conseil d'arrondissement. Focus sur les postes Divers en fonctionnement (source d'opacité) et sur le report à nouveau, exemple chiffré sur le 2e/3e.</p>
|
||||||
|
<div class="card-meta">
|
||||||
|
<span class="card-niv">Niveau : tous publics</span>
|
||||||
|
<span class="card-open">Ouvrir <span class="arr">→</span></span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ FAMILLE 2 : ACCES AUX DOCUMENTS ============ -->
|
||||||
|
<section class="fam" aria-labelledby="fam2">
|
||||||
|
<div class="fam-head">
|
||||||
|
<span class="fam-num">02</span>
|
||||||
|
<h2 id="fam2">Accéder aux documents publics</h2>
|
||||||
|
<span class="fam-sub">Trouver, demander, obtenir</span>
|
||||||
|
</div>
|
||||||
|
<div class="cards">
|
||||||
|
|
||||||
|
<a class="card" href="acceder-docs-administratifs-ville/">
|
||||||
|
<span class="card-tag">Boîte à outils</span>
|
||||||
|
<h3>Accéder aux documents officiels de la Ville de Marseille</h3>
|
||||||
|
<p>Huit outils pour retrouver les documents publics : délibérations (moteur e-mrs), procès-verbaux des conseils, recueil des actes administratifs, marchés publics et données essentielles, documents budgétaires, permis de construire.</p>
|
||||||
|
<div class="card-meta">
|
||||||
|
<span class="card-niv">Niveau : tous publics</span>
|
||||||
|
<span class="card-open">Ouvrir <span class="arr">→</span></span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="card" href="respecter-droit-cada/">
|
||||||
|
<span class="card-tag">Guide pratique</span>
|
||||||
|
<h3>Faire respecter le droit d'accès aux documents</h3>
|
||||||
|
<p>Le parcours complet, de la demande via <span class="acr" data-full="Ma Dada" data-tip="Plateforme associative (madada.fr) pour envoyer et suivre une demande de communication de documents administratifs, publique par défaut.">Ma Dada</span> à la saisine de la <span class="acr" data-full="Commission d'accès aux documents administratifs" data-tip="Autorité consultative à saisir obligatoirement avant tout recours contentieux, dans les deux mois suivant un refus.">CADA</span>, puis au recours devant le <span class="acr" data-full="Tribunal administratif" data-tip="Juridiction de premier degré pour les litiges avec l'administration. Celui de Marseille couvre les Bouches-du-Rhône, les Alpes-de-Haute-Provence et les Hautes-Alpes.">TA</span> de Marseille. Tous les délais du <span class="acr" data-full="Code des relations entre le public et l'administration" data-tip="Code qui régit depuis 2016 le droit d'accès aux documents publics et les délais associés.">CRPA</span>, avec des générateurs de courriers.</p>
|
||||||
|
<div class="card-meta">
|
||||||
|
<span class="card-niv">Niveau : tous publics</span>
|
||||||
|
<span class="card-open">Ouvrir <span class="arr">→</span></span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ TEASER A VENIR ============ -->
|
||||||
|
<section class="fam">
|
||||||
|
<div class="cards">
|
||||||
|
<div class="card soon" aria-disabled="true">
|
||||||
|
<span class="card-tag">À venir</span>
|
||||||
|
<h3>D'autres modules en préparation</h3>
|
||||||
|
<p>La série s'enrichit au fil des décryptages du Donut : lecture du compte administratif et de ses annexes, contrôle de légalité des actes locaux, et nouvelles fiches méthodes sur la transparence locale marseillaise.</p>
|
||||||
|
<div class="card-meta">
|
||||||
|
<span class="card-niv">Bientôt</span>
|
||||||
|
<span class="card-open" style="color:var(--muted)">En chantier</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ LEXIQUE ============ -->
|
||||||
|
<section class="lexique" aria-labelledby="lex">
|
||||||
|
<h2 id="lex">Lexique</h2>
|
||||||
|
<div class="lex-grid">
|
||||||
|
<div class="lex-item"><div class="lex-sigle">BP</div><div class="lex-def">Budget primitif, le budget prévisionnel voté en début d'année.</div></div>
|
||||||
|
<div class="lex-item"><div class="lex-sigle">CFU</div><div class="lex-def">Compte Financier Unique, maquette qui remplace le compte administratif et le compte de gestion.</div></div>
|
||||||
|
<div class="lex-item"><div class="lex-sigle">CADA</div><div class="lex-def">Commission d'accès aux documents administratifs, préalable obligatoire avant recours.</div></div>
|
||||||
|
<div class="lex-item"><div class="lex-sigle">CRPA</div><div class="lex-def">Code des relations entre le public et l'administration, qui fixe le droit d'accès.</div></div>
|
||||||
|
<div class="lex-item"><div class="lex-sigle">TA</div><div class="lex-def">Tribunal administratif, juge de premier degré des litiges avec l'administration.</div></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ============ MISSION ============ -->
|
||||||
|
<section class="mission">
|
||||||
|
<h2>Pourquoi ces formations</h2>
|
||||||
|
<p>Le <strong>Donut Marseille</strong> est un InfoLab citoyen, une association loi 1901 dédiée à l'open data, à la transparence et au contrôle démocratique de l'action publique locale. Lire un budget, retrouver un document, faire respecter un droit d'accès : ce sont des prérogatives citoyennes, mais elles supposent de connaître la mécanique. Ces modules rendent cette mécanique accessible.</p>
|
||||||
|
<p>Les pages sont autonomes et réutilisables. Vous pouvez les partager, les imprimer, ou vous en servir comme support d'atelier. Une remarque, une coquille, une donnée à actualiser ? Écrivez à <a href="mailto:contact@ledonut-marseille.org">contact@ledonut-marseille.org</a>.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p class="f-brand">Donut formation</p>
|
||||||
|
<p>Le Donut Marseille, InfoLab citoyen, association loi 1901</p>
|
||||||
|
<p><a href="https://www.ledonut-marseille.org">ledonut-marseille.org</a> · <a href="mailto:contact@ledonut-marseille.org">contact@ledonut-marseille.org</a></p>
|
||||||
|
<p class="f-small">Contenus pédagogiques en accès libre. Les exemples chiffrés renvoient aux documents publics d'origine, à vérifier dans leur version à jour.</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- Tooltip acronymes -->
|
||||||
|
<div id="acr-tip" role="tooltip"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Barre de progression
|
||||||
|
var prog = document.getElementById('progress');
|
||||||
|
function updProg() {
|
||||||
|
var h = document.documentElement;
|
||||||
|
var max = h.scrollHeight - h.clientHeight;
|
||||||
|
var pct = max > 0 ? (h.scrollTop || document.body.scrollTop) / max * 100 : 0;
|
||||||
|
prog.style.width = pct + '%';
|
||||||
|
}
|
||||||
|
window.addEventListener('scroll', updProg, { passive: true });
|
||||||
|
window.addEventListener('resize', updProg);
|
||||||
|
updProg();
|
||||||
|
|
||||||
|
// Tooltips d'acronymes (souris + clavier)
|
||||||
|
var tip = document.getElementById('acr-tip');
|
||||||
|
var acrs = document.querySelectorAll('.acr');
|
||||||
|
|
||||||
|
function showTip(el) {
|
||||||
|
var full = el.getAttribute('data-full') || '';
|
||||||
|
var txt = el.getAttribute('data-tip') || '';
|
||||||
|
tip.innerHTML = (full ? '<strong>' + full + '</strong>' : '') + txt;
|
||||||
|
tip.style.display = 'block';
|
||||||
|
var r = el.getBoundingClientRect();
|
||||||
|
requestAnimationFrame(function () {
|
||||||
|
var tw = tip.offsetWidth, th = tip.offsetHeight;
|
||||||
|
var left = r.left + r.width / 2 - tw / 2;
|
||||||
|
left = Math.max(10, Math.min(left, window.innerWidth - tw - 10));
|
||||||
|
var top = r.top - th - 9;
|
||||||
|
if (top < 8) top = r.bottom + 9;
|
||||||
|
tip.style.left = left + 'px';
|
||||||
|
tip.style.top = top + 'px';
|
||||||
|
tip.style.opacity = '1';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function hideTip() { tip.style.opacity = '0'; setTimeout(function () { tip.style.display = 'none'; }, 140); }
|
||||||
|
|
||||||
|
acrs.forEach(function (el) {
|
||||||
|
if (!el.hasAttribute('tabindex')) el.setAttribute('tabindex', '0');
|
||||||
|
el.addEventListener('mouseenter', function () { showTip(el); });
|
||||||
|
el.addEventListener('mouseleave', hideTip);
|
||||||
|
el.addEventListener('focus', function () { showTip(el); });
|
||||||
|
el.addEventListener('blur', hideTip);
|
||||||
|
});
|
||||||
|
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') hideTip(); });
|
||||||
|
window.addEventListener('scroll', hideTip, { passive: true });
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user