Changes to be committed:

modified:   compta/templates/compta/base.html

compta/templates/compta/base.html

@@ -7,7 +7,7 @@
 <style>
   :root { --bg:#0b1120; --panel:#0f172a; --card:#1e293b; --txt:#e2e8f0; --muted:#94a3b8;
           --accent:#38bdf8; --accent2:#0ea5e9; --ok:#34d399; --warn:#fbbf24; --bad:#f87171;
-          --line:#334155; --sbw:236px; }
+          --line:#334155; --sbw:236px; --sbw-c:68px; }
   * { box-sizing:border-box; }
   html,body { margin:0; }
   body { font-family:system-ui,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--txt); }
@@ -20,25 +20,53 @@
   .sidebar { width:var(--sbw); flex:0 0 var(--sbw); background:var(--panel);
              border-right:1px solid var(--line); position:fixed; inset:0 auto 0 0; height:100vh;
              display:flex; flex-direction:column; padding:18px 14px; z-index:60;
-             transition:transform .22s ease; overflow-y:auto; }
+             transition:transform .22s ease, width .18s ease, flex-basis .18s ease, padding .18s ease;
+             overflow-x:hidden; overflow-y:auto; }
   .brand { font-size:18px; font-weight:700; letter-spacing:.3px; padding:6px 10px 16px;
-           display:flex; align-items:center; gap:10px; }
+           display:flex; align-items:center; gap:10px; white-space:nowrap; }
-  .brand .dot { width:12px; height:12px; border-radius:4px;
+  .brand .dot { width:12px; height:12px; border-radius:4px; flex:0 0 12px;
                 background:linear-gradient(135deg,var(--accent),var(--accent2)); }
+  .collapse-btn { margin-left:auto; background:transparent; border:none; color:var(--muted);
+                  cursor:pointer; padding:4px; border-radius:7px; display:flex; }
+  .collapse-btn:hover { color:var(--txt); background:#1e293b; }
+  .collapse-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; transition:transform .18s ease; }
   .sidebar nav { display:flex; flex-direction:column; gap:3px; }
   .sidebar nav a { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px;
-                   color:var(--txt); font-size:14px; }
+                   color:var(--txt); font-size:14px; white-space:nowrap; }
   .sidebar nav a:hover { background:#1e293b; }
   .sidebar nav a.on { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#04263a; font-weight:600; }
   .sidebar nav a svg { width:18px; height:18px; flex:0 0 18px; stroke:currentColor; fill:none; stroke-width:1.8; }
   .sidebar .sep { height:1px; background:var(--line); margin:12px 6px; }
   .sidebar .foot { margin-top:auto; padding-top:12px; }
-  .sidebar .foot .who { font-size:12px; color:var(--muted); padding:0 12px 8px; }
+  .sidebar .foot .who { font-size:12px; color:var(--muted); padding:0 12px 8px; white-space:nowrap; overflow:hidden; }
   .sidebar .foot button { width:100%; background:var(--card); color:var(--txt); border:1px solid var(--line);
-                          border-radius:9px; padding:9px 12px; font-size:14px; cursor:pointer; }
+                          border-radius:9px; padding:9px 12px; font-size:14px; cursor:pointer;
+                          display:flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; }
   .sidebar .foot button:hover { border-color:var(--accent); }
-  .main { flex:1 1 auto; margin-left:var(--sbw); padding:26px 30px; max-width:100%; min-width:0; }
+  .sidebar .foot button svg { width:18px; height:18px; flex:0 0 18px; stroke:currentColor; fill:none; stroke-width:1.8; }
+  .main { flex:1 1 auto; margin-left:var(--sbw); padding:26px 30px; max-width:100%; min-width:0;
+          transition:margin-left .18s ease; }
   .topbar-mobile { display:none; }
+  @media(min-width:821px){
+    body.sb-collapsed .sidebar { width:var(--sbw-c); flex-basis:var(--sbw-c); padding:18px 10px; }
+    body.sb-collapsed .main { margin-left:var(--sbw-c); }
+    body.sb-collapsed .sidebar .lbl,
+    body.sb-collapsed .sidebar .who { display:none; }
+    body.sb-collapsed .sidebar nav a,
+    body.sb-collapsed .sidebar .foot button { justify-content:center; padding-left:0; padding-right:0; gap:0; }
+    body.sb-collapsed .brand { justify-content:center; padding:6px 0 16px; }
+    body.sb-collapsed .collapse-btn { position:absolute; top:14px; right:8px; }
+    body.sb-collapsed .collapse-btn svg { transform:rotate(180deg); }
+    body.sb-collapsed .sidebar:hover { width:var(--sbw); flex-basis:var(--sbw); padding:18px 14px;
+                                       box-shadow:6px 0 34px #0009; }
+    body.sb-collapsed .sidebar:hover .lbl { display:inline; }
+    body.sb-collapsed .sidebar:hover .who { display:block; }
+    body.sb-collapsed .sidebar:hover nav a,
+    body.sb-collapsed .sidebar:hover .foot button { justify-content:flex-start; padding:10px 12px; gap:11px; }
+    body.sb-collapsed .sidebar:hover .foot button { justify-content:center; }
+    body.sb-collapsed .sidebar:hover .brand { justify-content:flex-start; padding:6px 10px 16px; }
+    body.sb-collapsed .sidebar:hover .collapse-btn { position:static; }
+  }
   .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:10px; }
   .card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
   .card .label { color:var(--muted); font-size:12.5px; }
@@ -72,6 +100,7 @@
     .sidebar { transform:translateX(-100%); box-shadow:0 0 40px #000a; }
     body.sb-open .sidebar { transform:translateX(0); }
     .main { margin-left:0; padding:14px 16px 40px; }
+    .collapse-btn { display:none; }
     .topbar-mobile { display:flex; align-items:center; gap:12px; margin-bottom:14px;
                      position:sticky; top:0; background:var(--bg); padding:8px 0; z-index:40; }
     .topbar-mobile .burger { background:var(--card); border:1px solid var(--line); border-radius:9px;
@@ -85,31 +114,38 @@
 {% block extrastyle %}{% endblock %}
 </head>
 <body>
+<script>try{if(localStorage.getItem('jbc_sb')==='1')document.body.classList.add('sb-collapsed');}catch(e){}</script>
 <div class="app">
   <aside class="sidebar" id="sidebar">
-    <div class="brand"><span class="dot"></span> JB Compta</div>
+    <div class="brand">
+      <span class="dot"></span><span class="lbl">JB Compta</span>
+      <button class="collapse-btn" onclick="toggleSidebar()" title="Réduire / déplier le menu" aria-label="Réduire le menu">
+        <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>
+      </button>
+    </div>
     <nav>
-      <a class="{% if vue == 'global' %}on{% endif %}" href="/dashboard/{% if entreprise %}?entreprise={{ entreprise.pk }}{% endif %}">
+      <a class="{% if vue == 'global' %}on{% endif %}" title="Tableau de bord" href="/dashboard/{% if entreprise %}?entreprise={{ entreprise.pk }}{% endif %}">
-        <svg viewBox="0 0 24 24"><path d="M3 12h7V3H3zM14 21h7v-9h-7zM3 21h7v-6H3zM14 3v6h7V3z"/></svg> Tableau de bord</a>
+        <svg viewBox="0 0 24 24"><path d="M3 12h7V3H3zM14 21h7v-9h-7zM3 21h7v-6H3zM14 3v6h7V3z"/></svg><span class="lbl">Tableau de bord</span></a>
-      <a class="{% if vue == 'mensuel' %}on{% endif %}" href="/dashboard/mensuel/{% if entreprise %}?entreprise={{ entreprise.pk }}{% endif %}">
+      <a class="{% if vue == 'mensuel' %}on{% endif %}" title="Mensuel" href="/dashboard/mensuel/{% if entreprise %}?entreprise={{ entreprise.pk }}{% endif %}">
-        <svg viewBox="0 0 24 24"><path d="M4 5h16v16H4zM4 9h16M8 3v4M16 3v4"/></svg> Mensuel</a>
+        <svg viewBox="0 0 24 24"><path d="M4 5h16v16H4zM4 9h16M8 3v4M16 3v4"/></svg><span class="lbl">Mensuel</span></a>
-      <a class="{% if vue == 'urssaf' %}on{% endif %}" href="/declaration/urssaf/{% if entreprise %}?entreprise={{ entreprise.pk }}{% endif %}">
+      <a class="{% if vue == 'urssaf' %}on{% endif %}" title="Déclaration URSSAF" href="/declaration/urssaf/{% if entreprise %}?entreprise={{ entreprise.pk }}{% endif %}">
-        <svg viewBox="0 0 24 24"><path d="M6 3h9l5 5v13H6zM14 3v6h6M9 13h6M9 17h6"/></svg> Déclaration URSSAF</a>
+        <svg viewBox="0 0 24 24"><path d="M6 3h9l5 5v13H6zM14 3v6h6M9 13h6M9 17h6"/></svg><span class="lbl">Déclaration URSSAF</span></a>
-      <a class="{% if vue == 'tva' %}on{% endif %}" href="/declaration/tva/{% if entreprise %}?entreprise={{ entreprise.pk }}{% endif %}">
+      <a class="{% if vue == 'tva' %}on{% endif %}" title="Déclaration TVA" href="/declaration/tva/{% if entreprise %}?entreprise={{ entreprise.pk }}{% endif %}">
-        <svg viewBox="0 0 24 24"><path d="M6 3h9l5 5v13H6zM14 3v6h6M9 14l6 0M9 17l4 0"/></svg> Déclaration TVA</a>
+        <svg viewBox="0 0 24 24"><path d="M6 3h9l5 5v13H6zM14 3v6h6M9 14l6 0M9 17l4 0"/></svg><span class="lbl">Déclaration TVA</span></a>
-      <a class="{% if vue == 'gestion' %}on{% endif %}" href="/gestion/{% if entreprise %}?entreprise={{ entreprise.pk }}{% endif %}">
+      <a class="{% if vue == 'gestion' %}on{% endif %}" title="Entrées / sorties" href="/gestion/{% if entreprise %}?entreprise={{ entreprise.pk }}{% endif %}">
-        <svg viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18M7 4v3M17 14v3"/></svg> Entrées / sorties</a>
+        <svg viewBox="0 0 24 24"><path d="M3 7h18M3 12h18M3 17h18M7 4v3M17 14v3"/></svg><span class="lbl">Entrées / sorties</span></a>
       <div class="sep"></div>
-      <a class="{% if vue == 'saisie' %}on{% endif %}" href="/saisie/">
+      <a class="{% if vue == 'saisie' %}on{% endif %}" title="Saisir" href="/saisie/">
-        <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg> Saisir</a>
+        <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg><span class="lbl">Saisir</span></a>
-      <a class="{% if vue == 'import' %}on{% endif %}" href="/import/">
+      <a class="{% if vue == 'import' %}on{% endif %}" title="Importer" href="/import/">
-        <svg viewBox="0 0 24 24"><path d="M12 3v12M8 11l4 4 4-4M5 21h14"/></svg> Importer</a>
+        <svg viewBox="0 0 24 24"><path d="M12 3v12M8 11l4 4 4-4M5 21h14"/></svg><span class="lbl">Importer</span></a>
-      {% if user.is_staff %}<a href="/admin/">
+      {% if user.is_staff %}<a title="Admin" href="/admin/">
-        <svg viewBox="0 0 24 24"><path d="M12 3l7 4v5c0 5-3 7-7 9-4-2-7-4-7-9V7z"/></svg> Admin</a>{% endif %}
+        <svg viewBox="0 0 24 24"><path d="M12 3l7 4v5c0 5-3 7-7 9-4-2-7-4-7-9V7z"/></svg><span class="lbl">Admin</span></a>{% endif %}
     </nav>
     <div class="foot">
       {% if user.is_authenticated %}<div class="who">Connecté : {{ user.username }}</div>{% endif %}
-      <form method="post" action="/logout/">{% csrf_token %}<button type="submit">Déconnexion</button></form>
+      <form method="post" action="/logout/">{% csrf_token %}<button type="submit" title="Déconnexion">
+        <svg viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg><span class="lbl">Déconnexion</span></button></form>
     </div>
   </aside>
   <div class="sb-backdrop" onclick="document.body.classList.remove('sb-open')"></div>
@@ -145,6 +181,12 @@
     {% block content %}{% endblock %}
   </main>
 </div>
+<script>
+  function toggleSidebar(){
+    var c = document.body.classList.toggle('sb-collapsed');
+    try{ localStorage.setItem('jbc_sb', c ? '1' : '0'); }catch(e){}
+  }
+</script>
 {% block scripts %}{% endblock %}
 </body>
 </html>