Ajoute OSM

index.html

@@ -50,7 +50,7 @@
 
   /* Barre de progression au scroll */
   #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));
     z-index: 1300; transition: width .08s linear;
   }
@@ -112,9 +112,9 @@
   }
 
   /* Sections */
-  main { max-width: 1080px; margin: 0 auto; padding: 0 1.3rem; }
+  main { max-width: 820px; margin: 0 auto; padding: 0 1.3rem; }
   .intro {
-    max-width: 760px;
+    max-width: 820px;
     margin: 3rem auto 1rem;
     text-align: center;
     color: var(--muted);
@@ -140,7 +140,9 @@
     font-weight: 800;
     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 */
   .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1.1rem; }
@@ -379,6 +381,28 @@
     </div>
   </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 ============ -->
   <section class="fam">
     <div class="cards">