diff --git a/web/src/pages/Annuaire.jsx b/web/src/pages/Annuaire.jsx
index f449a0d..4b89ee0 100644
--- a/web/src/pages/Annuaire.jsx
+++ b/web/src/pages/Annuaire.jsx
@@ -64,7 +64,21 @@ export default function Annuaire() {
 
         <div className="grid-3">
           {filtered.map((m) => (
-            <div key={m.id} className="card" style={{ padding: 26, display: 'flex', flexDirection: 'column' }}>
+            <article
+              key={m.id}
+              className="card directory-member-card"
+              style={{ padding: 26, display: 'flex', flexDirection: 'column' }}
+              role="button"
+              tabIndex={0}
+              aria-label={`Voir la fiche de ${m.nom}`}
+              onClick={() => setDetail(m)}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                  event.preventDefault();
+                  setDetail(m);
+                }
+              }}
+            >
               <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 16 }}>
                 <div className={m.logo_path ? '' : 'placeholder-pattern'} style={{ width: 64, height: 64, flexShrink: 0, borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'monospace', fontSize: 9, color: '#a8a099', overflow: 'hidden', background: m.logo_path ? '#fff' : undefined }}>
                   {m.logo_path ? <img src={m.logo_path} alt="" style={{ width: '100%', height: '100%', objectFit: 'contain' }} /> : 'logo'}
@@ -78,11 +92,10 @@ export default function Annuaire() {
                 <span className="badge-cat">{m.categorie || 'Non classée'}</span>
               </div>
               <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--gray)', flex: 1, marginBottom: 20 }}>{m.presentation}</p>
-              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 18, borderTop: '1px solid var(--border-soft)' }}>
+              <div style={{ paddingTop: 18, borderTop: '1px solid var(--border-soft)' }}>
                 <span style={{ fontSize: 13, color: 'var(--gray-light)' }}>{m.dirigeant}</span>
-                <button className="btn-link" onClick={() => setDetail(m)}>Voir la fiche →</button>
               </div>
-            </div>
+            </article>
           ))}
         </div>
 
diff --git a/web/src/styles.css b/web/src/styles.css
index 5eb07ac..c7c3c9e 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -87,6 +87,16 @@ input:focus, textarea:focus, select:focus { outline: none; border-color: var(--r
 .badge-red { background: #F6E4E4; color: #B0322E; }
 .badge-cat { font-size: 11.5px; font-weight: 600; color: var(--gray); background: var(--beige); border-radius: 20px; padding: 5px 12px; display: inline-block; }
 
+.directory-member-card {
+  cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
+}
+.directory-member-card:hover {
+  border-color: #CEC5BB; box-shadow: 0 14px 34px -26px rgba(27, 27, 27, .55); transform: translateY(-2px);
+}
+.directory-member-card:focus-visible {
+  outline: 3px solid rgba(193, 39, 45, .22); outline-offset: 3px; border-color: var(--red);
+}
+
 .chip { border-radius: 20px; font-size: 13.5px; padding: 9px 18px; border: 1px solid var(--input-border); background: #fff; color: var(--gray); font-weight: 500; }
 .chip.active { background: var(--red); color: #fff; border-color: var(--red); font-weight: 600; }