Ajoute les exports Excel et PDF des membres

web/src/components/admin/AdminTabs.jsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import { FileSpreadsheet, FileText, Plus } from 'lucide-react';
 import { api, dateParts, seasonLabel, statutLabel } from '../../lib/api.js';
 import { copyRichEmail } from '../../lib/emailClipboard.js';
 import { downloadOutlookDraft } from '../../lib/outlookDraft.js';
@@ -190,16 +191,27 @@ export function MembersTab() {
 
   return (
     <div className="card" style={{ borderRadius: 6, overflow: 'hidden' }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 24px', borderBottom: '1px solid var(--border)' }}>
+      <div className="admin-panel-header">
         <div>
           <h3 className="serif" style={{ fontSize: 19, fontWeight: 600 }}>Membres · {actifs} validés</h3>
           <div style={{ fontSize: 12.5, color: 'var(--gray-light)', marginTop: 3 }}>
             Saison {season} · {members.length - actifs} à renouveler
           </div>
         </div>
-        <button className="btn btn-red btn-sm" style={{ fontSize: 13, padding: '10px 18px' }} onClick={() => setModal('new')}>
-          + Ajouter un membre
-        </button>
+        <div className="admin-panel-actions">
+          <a className="btn btn-outline-soft btn-sm admin-export-btn" href="/api/admin/members.xlsx" download>
+            <FileSpreadsheet size={17} aria-hidden="true" />
+            <span>Excel (.xlsx)</span>
+          </a>
+          <a className="btn btn-outline-soft btn-sm admin-export-btn" href="/api/admin/members.pdf" download>
+            <FileText size={17} aria-hidden="true" />
+            <span>PDF</span>
+          </a>
+          <button className="btn btn-red btn-sm admin-export-btn" onClick={() => setModal('new')}>
+            <Plus size={17} aria-hidden="true" />
+            <span>Ajouter un membre</span>
+          </button>
+        </div>
       </div>
       <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start', padding: '14px 24px', background: '#FBF6EE', borderBottom: '1px solid var(--border-soft)', fontSize: 12.5, color: '#8A6D3B', lineHeight: 1.5 }}>
         <span>ⓘ</span>

web/src/styles.css

@@ -171,6 +171,16 @@ input:focus, textarea:focus, select:focus { outline: none; border-color: var(--r
 }
 .admin-sidebar-action:hover { background: rgba(255, 255, 255, .055); color: #fff; }
 .admin-sidebar-action:focus-visible { outline: 2px solid var(--red-soft); outline-offset: 1px; }
+.admin-panel-header {
+  display: flex; align-items: center; justify-content: space-between; gap: 20px;
+  padding: 20px 24px; border-bottom: 1px solid var(--border);
+}
+.admin-panel-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
+.admin-export-btn {
+  min-height: 38px; padding: 9px 13px; display: inline-flex; align-items: center; justify-content: center;
+  gap: 7px; font-size: 12.5px; line-height: 1; text-decoration: none; white-space: nowrap;
+}
+.admin-export-btn svg { flex: 0 0 auto; }
 
 /* Membership request workflow */
 .requests-layout { display: flex; flex-direction: column; gap: 20px; }
@@ -257,6 +267,9 @@ input:focus, textarea:focus, select:focus { outline: none; border-color: var(--r
   .admin-nav { grid-template-columns: 1fr; gap: 20px; }
   .admin-sidebar-footer { align-items: stretch; flex-direction: column; }
   .admin-sidebar-action { width: 100%; }
+  .admin-panel-header { align-items: stretch; flex-direction: column; padding: 18px 20px; }
+  .admin-panel-actions { display: grid; grid-template-columns: 1fr 1fr; justify-content: stretch; }
+  .admin-panel-actions .admin-export-btn:last-child { grid-column: 1 / -1; }
 
   /* Header nav: tighter spacing so the extra links (added alongside the
      new "rencontres passées" page) wrap without feeling cramped. */