UI: refonte propre du modale editeur de preset

Styles inline -> classes CSS reutilisables (.modal-*, .fld, .ctl, .card, .seg).
Bloc modele/moteur regroupe dans une carte "Modele & moteur", selecteur de
moteur en 3 segments (rapide/optimise/perso), hierarchie et espacements clairs.
Verifie desktop + mobile. IDs et handlers inchanges.

internal/jean/ui/src/index.tmpl.html

@@ -201,49 +201,68 @@
     </div>
   </div>
 </div>
-<div id="modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:30;align-items:center;justify-content:center;padding:20px">
-  <div style="background:var(--bg);border:1px solid var(--border);border-radius:8px;width:100%;max-width:700px;max-height:90vh;display:flex;flex-direction:column">
-    <div style="padding:14px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center">
+<div id="modal" class="modal-ov" style="display:none">
+  <div class="modal-card">
+    <div class="modal-head">
       <strong id="modal-title">Preset</strong>
-      <button onclick="closeModal()" style="margin:0">×</button>
+      <button class="modal-x" onclick="closeModal()" aria-label="Fermer">×</button>
     </div>
-    <div style="padding:14px 16px;display:flex;flex-direction:column;gap:10px;overflow:auto;flex:1">
-      <label class="muted">Nom <span style="opacity:.6">(espaces et accents OK, sauf / et \)</span></label>
-      <input id="m-name" style="background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px;font:inherit">
-      <div id="m-model-row" style="display:none">
-        <label class="muted">Moteur (backend) <span style="opacity:.6">— quel llama.cpp fait tourner ce modèle</span></label>
-        <div class="be-opts">
-          <label class="be-opt"><input type="radio" name="m-be" value="fast" onchange="onBackendMode('fast')"><span>⚡ Rapide</span><span class="be-note" id="be-fast-note"></span></label>
-          <label class="be-opt"><input type="radio" name="m-be" value="opt" onchange="onBackendMode('opt')"><span>🔧 Optimisé</span><span class="be-note" id="be-opt-note"></span></label>
-          <label class="be-opt"><input type="radio" name="m-be" value="custom" onchange="onBackendMode('custom')"><span>📁 Personnalisé</span></label>
+    <div class="modal-body mform">
+      <div class="fld">
+        <label class="fld-l" for="m-name">Nom <span class="opt">(espaces et accents OK, sauf / et \)</span></label>
+        <input id="m-name" class="ctl">
+      </div>
+
+      <div id="m-model-row" class="card" style="display:none">
+        <div class="card-h">Modèle &amp; moteur</div>
+
+        <div class="fld">
+          <label class="fld-l">Moteur <span class="opt">— quel llama.cpp fait tourner ce modèle</span></label>
+          <div class="seg">
+            <label><input type="radio" name="m-be" value="fast" onchange="onBackendMode('fast')"><span>⚡ Rapide</span><span class="be-note" id="be-fast-note"></span></label>
+            <label><input type="radio" name="m-be" value="opt" onchange="onBackendMode('opt')"><span>🔧 Optimisé</span><span class="be-note" id="be-opt-note"></span></label>
+            <label><input type="radio" name="m-be" value="custom" onchange="onBackendMode('custom')"><span>📁 Perso</span></label>
+          </div>
+          <div id="m-backend-custom" style="display:none;margin-top:8px">
+            <input id="m-backend-path" class="ctl" oninput="onCustomPath()" placeholder="chemin vers llama-server(.exe)">
+            <select id="m-backend-detected" class="ctl" onchange="onPickDetected()" style="margin-top:6px"></select>
+            <div class="fld-hint" id="be-drop-hint"></div>
+          </div>
         </div>
-        <div id="m-backend-custom" style="display:none;margin:0 0 10px">
-          <input id="m-backend-path" oninput="onCustomPath()" placeholder="chemin vers llama-server(.exe)" style="width:100%;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px;font:inherit">
-          <select id="m-backend-detected" onchange="onPickDetected()" style="width:100%;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px;font:inherit;margin-top:6px"></select>
-          <div class="muted" id="be-drop-hint" style="font-size:11px;margin-top:4px"></div>
+
+        <div class="fld">
+          <label class="fld-l" for="m-model">Modèle <span class="opt">(remplace la ligne MODEL=)</span></label>
+          <select id="m-model" class="ctl" onchange="onPickModel()"></select>
         </div>
-        <label class="muted">Modèle <span style="opacity:.6">(remplace la ligne MODEL=)</span></label>
-        <select id="m-model" onchange="onPickModel()" style="width:100%;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px;font:inherit;margin-top:6px"></select>
-        <label class="muted" style="margin-top:10px;display:block">Télécharger depuis Hugging Face <span style="opacity:.6">(lien vers un .gguf)</span></label>
-        <div style="display:flex;gap:6px;margin-top:6px">
-          <input id="m-hf-url" placeholder="https://huggingface.co/…/resolve/main/model.gguf" style="flex:1;min-width:0;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px;font:inherit">
-          <button id="m-hf-btn" onclick="startDownload()" style="flex-shrink:0">⬇ télécharger</button>
+
+        <div class="fld">
+          <label class="fld-l" for="m-hf-url">Télécharger depuis Hugging Face <span class="opt">(lien vers un .gguf)</span></label>
+          <div class="row">
+            <input id="m-hf-url" class="ctl" placeholder="https://huggingface.co/…/resolve/main/model.gguf">
+            <button id="m-hf-btn" class="btn-dl" onclick="startDownload()">⬇ télécharger</button>
+          </div>
+          <div id="m-hf-progress" class="fld-hint" style="display:none"></div>
         </div>
-        <div id="m-hf-progress" class="muted" style="display:none;font-size:11px;margin-top:6px"></div>
-        <label class="muted" style="margin-top:10px;display:block">Quantization (tag) <span style="opacity:.6">(vide = détection auto depuis le nom du modèle)</span></label>
-        <input id="m-quant" oninput="applyQuant()" placeholder="ex: Q4_K_M, IQ3_XXS, BF16…" style="width:100%;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px;font:inherit;margin-top:6px">
+
+        <div class="fld">
+          <label class="fld-l" for="m-quant">Quantization <span class="opt">(vide = détection auto depuis le nom)</span></label>
+          <input id="m-quant" class="ctl" oninput="applyQuant()" placeholder="ex: Q4_K_M, IQ3_XXS, BF16…">
+        </div>
+      </div>
+
+      <div class="fld">
+        <label class="fld-l" for="m-content">Contenu <span class="opt">(fichier de config brut)</span></label>
+        <textarea id="m-content" class="ctl ta" spellcheck="false"></textarea>
       </div>
-      <label class="muted">Contenu</label>
-      <textarea id="m-content" spellcheck="false" style="background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px;font:inherit;min-height:280px;resize:vertical"></textarea>
     </div>
-    <div style="padding:14px 16px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap">
-      <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
-        <button id="m-del" onclick="delItem()" style="background:var(--danger-bg);border-color:var(--err);color:var(--err);margin:0">supprimer</button>
-        <label id="m-del-model-wrap" style="display:none;align-items:center;gap:5px;font-size:11px;color:var(--dim)"><input type="checkbox" id="m-del-model"> + le modèle .gguf</label>
+    <div class="modal-foot">
+      <div class="foot-l">
+        <button id="m-del" class="btn-danger" onclick="delItem()">supprimer</button>
+        <label id="m-del-model-wrap" class="del-model" style="display:none"><input type="checkbox" id="m-del-model"> + le modèle .gguf</label>
       </div>
-      <div style="display:flex;gap:6px">
+      <div class="foot-r">
         <button onclick="closeModal()">annuler</button>
-        <button onclick="saveItem()" style="border-color:var(--accent);color:var(--accent)">enregistrer</button>
+        <button class="btn-save" onclick="saveItem()">enregistrer</button>
       </div>
     </div>
   </div>