Harmoniser les styles de la carte : réglages communs, thèmes clair et sombre, composants uniques

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

lidar_pipeline/web/map.html

@@ -13,27 +13,26 @@
 
 <div id="layercard" class="card">
   <div class="card-head">
-    <button id="cardToggle" class="icon-btn" title="Replier / déplier">▾</button>
+    <button id="cardToggle" class="btn-icon" title="Replier / déplier">▾</button>
     <span class="card-title">Couches</span>
     <span id="stat" class="card-stat"></span>
   </div>
   <div class="card-body">
-    <div class="layer-row" id="baseRow">
-      <span class="grip"></span>
+    <div class="base-row" id="baseRow">
       <button class="eye on" id="baseToggle" title="Afficher / masquer le fond de carte"></button>
       <span class="layer-name" id="baseName" title="Cliquer : fond clair / assombri">Fond OpenStreetMap</span>
       <span class="pct" id="basePct"></span>
-      <div class="layer-ctl">
+      <div class="base-ctl">
         <input type="range" id="baseOpacity" min="0" max="100" step="1" title="Opacité du fond">
       </div>
     </div>
     <div class="view-row">
       <span class="view-label">Affichage</span>
       <span class="layer-name" id="mainName"></span>
-      <select id="mainSel" class="view-sel" title="Couche d'affichage principal" hidden></select>
+      <select id="mainSel" class="field" title="Couche d'affichage principal" hidden></select>
     </div>
     <div id="precBlock" hidden>
-      <div class="mode-seg" id="modeSeg" role="group" aria-label="Relief, précision ou les deux (touche P)">
+      <div class="seg" id="modeSeg" role="group" aria-label="Relief, précision ou les deux (touche P)">
         <button type="button" data-mode="relief" title="Relief seul (touche P : mode suivant)">Relief</button>
         <button type="button" data-mode="precision" title="Précision géométrique seule : densité de points sol">Précision</button>
         <button type="button" data-mode="both" title="Précision en produit sur le relief : les zones peu fiables s'assombrissent">Les deux</button>
@@ -50,12 +49,12 @@
       </div>
     </div>
     <div class="card-foot">
-      <button id="btnShare" class="link-btn" title="Copier un lien vers cette vue">⎘ Partager la vue</button>
-      <button id="btnUse" class="link-btn" title="Utiliser ces rendus comme fond d'imagerie (JOSM, QGIS, iD…)">⤓ Utiliser dans JOSM / QGIS</button>
+      <button id="btnShare" class="btn" title="Copier un lien vers cette vue">⎘ Partager la vue</button>
+      <button id="btnUse" class="btn" title="Utiliser ces rendus comme fond d'imagerie (JOSM, QGIS, iD…)">⤓ Utiliser dans JOSM / QGIS</button>
     </div>
     <div class="card-foot">
-      <button id="btnDefault" class="link-btn" title="Figer l'affichage courant (couche principale, mode, opacité de la précision, fond) comme configuration par défaut de tous les navigateurs">★ Définir par défaut</button>
-      <button id="btnReset" class="link-btn" title="Revenir à la configuration par défaut">↺ Réinitialiser</button>
+      <button id="btnDefault" class="btn" title="Figer l'affichage courant (couche principale, mode, opacité de la précision, fond) comme configuration par défaut de tous les navigateurs">★ Définir par défaut</button>
+      <button id="btnReset" class="btn" title="Revenir à la configuration par défaut">↺ Réinitialiser</button>
     </div>
   </div>
 </div>
@@ -63,7 +62,7 @@
 <div id="tilecard" class="card" hidden>
   <div class="card-head">
     <span class="card-title" id="tileTitle">Dalle</span>
-    <button id="tileClose" class="icon-btn" title="Fermer">×</button>
+    <button id="tileClose" class="btn-icon" title="Fermer">×</button>
   </div>
   <div class="card-body" id="tileBody"></div>
 </div>
@@ -76,7 +75,7 @@
 <div id="usecard" class="card" hidden>
   <div class="card-head">
     <span class="card-title">Fond d'imagerie XYZ</span>
-    <button id="useClose" class="icon-btn" title="Fermer">×</button>
+    <button id="useClose" class="btn-icon" title="Fermer">×</button>
   </div>
   <div class="card-body" id="useBody"></div>
 </div>
@@ -85,23 +84,23 @@
   <div class="card-head">
     <span class="card-title">Export PDF</span>
     <span id="printInfo" class="card-stat"></span>
-    <button id="printClose" class="icon-btn" title="Fermer">×</button>
+    <button id="printClose" class="btn-icon" title="Fermer">×</button>
   </div>
   <div class="card-body">
-    <div class="use-row"><select id="printPaper" title="Format papier">
+    <div class="row"><select id="printPaper" class="field" title="Format papier">
       <option value="A4" selected>A4</option><option value="A3">A3</option></select>
-      <select id="printOrient" title="Orientation">
+      <select id="printOrient" class="field" title="Orientation">
       <option value="paysage" selected>Paysage</option><option value="portrait">Portrait</option></select>
-      <select id="printScale" title="Échelle d'impression">
+      <select id="printScale" class="field" title="Échelle d'impression">
       <option value="1000">1:1 000</option><option value="2000" selected>1:2 000</option>
       <option value="5000">1:5 000</option><option value="10000">1:10 000</option></select></div>
-    <div class="use-row"><input id="printTitle" type="text" maxlength="120"
+    <div class="row"><input id="printTitle" class="field" type="text" maxlength="120"
       placeholder="Titre (optionnel)" title="Titre imprimé dans le cartouche"></div>
-    <p class="print-hint">Faites glisser la poignée ✥ pour placer le cadre jaune sur la zone à imprimer.</p>
-    <div class="use-row"><button id="printHere" class="link-btn"
+    <p class="hint">Faites glisser la poignée ✥ pour placer le cadre jaune sur la zone à imprimer.</p>
+    <div class="row"><button id="printHere" class="btn"
       title="Placer le cadre au centre de la vue">⌖ Centrer ici</button>
-      <button id="printFit" class="link-btn" title="Zoomer sur le cadre">⤢ Voir le cadre</button></div>
-    <div class="card-foot"><button id="printGo">Exporter le PDF</button>
+      <button id="printFit" class="btn" title="Zoomer sur le cadre">⤢ Voir le cadre</button></div>
+    <div class="card-foot"><button id="printGo" class="btn btn-primary">Exporter le PDF</button>
       <span id="printMsg" class="print-msg"></span></div>
   </div>
 </div>
@@ -110,19 +109,18 @@
   <div class="card-head">
     <span class="card-title">Génération</span>
     <span id="genBadge" class="card-stat"></span>
-    <button id="genClose" class="icon-btn" title="Fermer">×</button>
+    <button id="genClose" class="btn-icon" title="Fermer">×</button>
   </div>
   <div class="card-body">
     <div id="genMsg" class="meta">Dessinez une zone (＋) ou complétez les dalles existantes (⤒).</div>
     <div id="genOpts">
       <div class="gen-row"><span class="gen-lbl">Couches</span>
-        <select id="genViz" multiple size="4" title="Laisser vide pour les couches du panneau"></select></div>
+        <select id="genViz" class="field" multiple size="4" title="Laisser vide pour les couches du panneau"></select></div>
       <label class="chk"><input type="checkbox" id="genRegen"> Régénérer les tuiles existantes</label>
       <div class="meta">Sol : classification IGN · bords raccordés aux dalles voisines (bande 100 m)</div>
     </div>
-    <div id="genClassInfo" class="meta"></div>
     <div class="card-foot" id="genActions">
-      <button id="genGo" class="primary" title="Télécharge (géoplateforme IGN) puis traite les dalles sélectionnées">Générer</button>
+      <button id="genGo" class="btn btn-primary" title="Télécharge (géoplateforme IGN) puis traite les dalles sélectionnées">Générer</button>
       <button id="genClear" title="Vider la sélection de dalles">Effacer la sélection</button>
     </div>
     <div id="genRun" hidden>
@@ -146,6 +144,7 @@
   <button id="zoomFit" title="Recadrer sur les données">⤢</button>
   <button id="gps" title="Centrer sur ma position">⌖</button>
   <button id="btnPrint" title="Exporter la zone en PDF (impression terrain)">⎙</button>
+  <button id="btnTheme" class="btn-icon" title="Thème">◐</button>
 </nav>
 <div id="toast" class="toast" hidden></div>
 <div id="tileload" class="tileload" hidden aria-live="polite">