ajout anglais/francais

web/style.css

@@ -1,4 +1,4 @@
-/* ---------- Thème : tout passe par ces variables ---------- */
+/* ---------- Theme: everything goes through these variables ---------- */
 :root {
   --bg: #f6f7f9;
   --panel: #ffffff;
@@ -86,7 +86,7 @@ svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
 .small { font-size: 12.5px; }
 [hidden] { display: none !important; }
 
-/* ---------- Barre du haut ---------- */
+/* ---------- Top bar ---------- */
 .topbar {
   position: sticky; top: 0; z-index: 20;
   display: flex; align-items: center; gap: 16px;
@@ -136,7 +136,7 @@ svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
 .icon-btn svg { width: 19px; height: 19px; }
 .icon-btn.danger:hover { color: var(--sev-err); }
 
-/* Soleil ou lune selon le thème effectif */
+/* Sun or moon depending on the effective theme */
 #themeBtn .moon { display: none; }
 :root[data-theme="dark"] #themeBtn .sun { display: none; }
 :root[data-theme="dark"] #themeBtn .moon { display: block; }
@@ -175,7 +175,7 @@ body.busy .progress::after {
 }
 @keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(400%); } }
 
-/* ---------- Filtres ---------- */
+/* ---------- Filters ---------- */
 .filters {
   display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
   padding: 12px 20px 8px;
@@ -191,7 +191,7 @@ body.busy .progress::after {
 .spacer { flex: 1; }
 #count { font-size: 12.5px; font-variant-numeric: tabular-nums; }
 
-/* ---------- Histogramme ---------- */
+/* ---------- Histogram ---------- */
 .histo { padding: 0 20px 6px; }
 .histo .bars {
   height: 46px; display: flex; align-items: flex-end; gap: 1px;
@@ -204,7 +204,7 @@ body.busy .progress::after {
 .histo .bars i:hover { opacity: 1; }
 .histo .axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); padding-top: 3px; }
 
-/* ---------- Liste des logs ---------- */
+/* ---------- Log list ---------- */
 .list { margin: 6px 20px 0; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
 .list:empty { display: none; }
 
@@ -252,7 +252,7 @@ mark.tag {
 }
 mark.hit { background: var(--hit); color: inherit; border-radius: 3px; padding: 0 1px; }
 
-/* Détails d'un message */
+/* Message details */
 .details {
   grid-column: 1 / -1;
   margin: 8px 0 4px; padding: 10px 12px;
@@ -265,7 +265,7 @@ mark.hit { background: var(--hit); color: inherit; border-radius: 3px; padding:
 .details .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-family: var(--sans); }
 .details .acts .btn { height: 28px; font-size: 12px; }
 
-/* ---------- États ---------- */
+/* ---------- States ---------- */
 .empty { text-align: center; padding: 60px 20px; }
 .empty svg { width: 40px; height: 40px; color: var(--muted); opacity: .6; }
 .empty p { margin: 6px 0; }
@@ -303,7 +303,7 @@ mark.hit { background: var(--hit); color: inherit; border-radius: 3px; padding:
   padding: 8px 14px; border-radius: 8px; font-size: 13px; box-shadow: var(--shadow);
 }
 
-/* ---------- Fenêtre des tags ---------- */
+/* ---------- Settings dialog ---------- */
 dialog {
   width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 64px);
   padding: 0; border: 1px solid var(--border); border-radius: 14px;
@@ -313,7 +313,19 @@ dialog::backdrop { background: rgba(10, 12, 16, .45); backdrop-filter: blur(2px)
 .dlg { padding: 18px 20px 16px; }
 .dlg header { display: flex; align-items: center; justify-content: space-between; }
 .dlg h2 { margin: 0; font-size: 17px; }
-.dlg > footer { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-top: 14px; }
+.set-section { margin-top: 18px; }
+.set-section + .set-section { padding-top: 16px; border-top: 1px solid var(--border); }
+.set-section h3 { margin: 0 0 8px; font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
+.set-section p { margin: 0; }
+.set-section footer { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin-top: 14px; }
+
+.seg { display: inline-flex; padding: 3px; gap: 3px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; }
+.seg button {
+  border: 0; background: transparent; border-radius: 7px;
+  height: 30px; padding: 0 14px; font-size: 13px; font-weight: 600; color: var(--muted);
+}
+.seg button:hover { color: var(--text); }
+.seg button[aria-checked="true"] { background: var(--panel); color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
 
 .tag-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
 .tag-row {