Ajoute OSM

This commit is contained in:
2026-06-28 07:14:34 +02:00
parent a53d1d96e4
commit ac8f3e15ba
+28 -4
View File
@@ -50,7 +50,7 @@
/* 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;
} }
@@ -112,9 +112,9 @@
} }
/* Sections */ /* Sections */
main { max-width: 1080px; margin: 0 auto; padding: 0 1.3rem; } main { max-width: 820px; margin: 0 auto; padding: 0 1.3rem; }
.intro { .intro {
max-width: 760px; max-width: 820px;
margin: 3rem auto 1rem; margin: 3rem auto 1rem;
text-align: center; text-align: center;
color: var(--muted); color: var(--muted);
@@ -140,7 +140,9 @@
font-weight: 800; font-weight: 800;
letter-spacing: -.01em; letter-spacing: -.01em;
} }
.fam-head .fam-sub { color: var(--muted); font-size: .92rem; margin-left: auto; text-align: right; }
.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 */ /* 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; }
@@ -379,6 +381,28 @@
</div> </div>
</section> </section>
<!-- ============ FAMILLE 3 : OUTILS OSM ============ -->
<section class="fam" aria-labelledby="fam3">
<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>
</div>
<div class="cards">
<a class="card" href="lire-et-utiliser-openstreetmap-osm/">
<span class="card-tag">Boîte à outils</span>
<h3>Accéder aux informations sur OSM</h3>
<p>Des outils pour accéder aux données d'OSM et les réutiliser.</p>
<div class="card-meta">
<span class="card-niv">Niveau : tous publics</span>
<span class="card-open">Ouvrir <span class="arr">&#8594;</span></span>
</div>
</a>
</div>
</section>
<!-- ============ TEASER A VENIR ============ --> <!-- ============ TEASER A VENIR ============ -->
<section class="fam"> <section class="fam">
<div class="cards"> <div class="cards">