feat(stack): grille complète (71 technos) en masonry centré + peaufinage UI

Stack & icônes
- grille unique enrichie (+24 technos) : React, TypeORM, Apache, Gitea,
  GitLab, GitHub Actions, Vite, pnpm, Socket.io, Chart.js, Discord.js,
  Prisma, Sequelize, IntelliJ IDEA, VS Code, Windows, HubSpot, HTML5/CSS3…
- nouvelles catégories « Bases de données & ORM » et « Tests & Qualité »
- 21 icônes simple-icons + tracés monochromes custom VS Code, Windows,
  Playwright ; support du fill-rule dans TechIcon
- mise en page masonry (CSS columns) + titres et puces centrés

Contenu & UI
- Hero : retrait du badge « ouvert aux opportunités »
- About / Contact : reformulation orientée projets
- ProjectCard : statut « en développement »
- typographie : tirets cadratins → virgules (titres, OG, aria-labels)
- ajout du visuel public/images/logo/couverture.png

src/styles/global.css

@@ -194,26 +194,29 @@ html[data-theme="light"] .icon-moon{display:block;}
 .formation-desc{font-size:12.5px;color:var(--text-dim);line-height:1.5;margin-top:10px;}
 
 /* ---------- Stack & compétences ---------- */
-.stack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(284px,1fr));gap:16px;}
-.stack-grid.is-secondary{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
-.stack-group{border:1px solid var(--border);border-radius:14px;background:var(--surface-2);padding:18px;}
-.is-secondary .stack-group{border:1px solid var(--border-soft);background:transparent;}
-.stack-group-label{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;}
-.tiles{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
-.is-secondary .tiles{gap:7px;margin-top:13px;}
-.tile{display:flex;align-items:center;gap:9px;padding:7px 11px 7px 9px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text-muted);}
-.is-secondary .tile{gap:8px;padding:6px 10px 6px 8px;border-radius:9px;}
-.tile .ic{width:18px;height:18px;}
-.is-secondary .tile .ic{width:15px;height:15px;}
+/* Masonry en CSS pur : packing vertical (pas de cartes à moitié vides) ;
+   colonnes auto selon la largeur, comme l'ancien auto-fit. */
+.stack-grid{columns:284px;column-gap:16px;}
+.stack-group{border:1px solid var(--border);border-radius:14px;background:var(--surface-2);padding:18px;break-inside:avoid;margin-bottom:16px;}
+.stack-group-label{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-mono);font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;}
+.stack-group-count{font-size:10px;color:var(--text-dim);border:1px solid var(--border);border-radius:999px;padding:1px 7px;}
+.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px;}
+.tile{display:flex;align-items:center;gap:9px;padding:7px 11px 7px 9px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text-muted);cursor:default;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background-color .2s ease;}
+.tile:hover{transform:translateY(-2px);border-color:var(--accent);background:color-mix(in srgb,var(--brand,var(--accent)) 7%,var(--bg));box-shadow:0 8px 20px -10px color-mix(in srgb,var(--brand,var(--accent)) 55%,transparent);}
+.tile .ic{width:18px;height:18px;transition:color .2s ease;}
+.tile:hover .ic{color:var(--brand,var(--accent));}
 .tile-mono{width:24px;height:24px;border-radius:7px;background:var(--accent-solid);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;font-family:var(--font-mono);font-size:11px;font-weight:600;}
-.is-secondary .tile-mono{width:21px;height:21px;border-radius:6px;font-size:10px;}
+.tile:hover .tile-mono{background:var(--accent-hover);}
 .tile-name{font-family:var(--font-mono);font-size:13px;color:var(--text);white-space:nowrap;}
-.is-secondary .tile-name{font-size:12.5px;color:var(--text-muted);}
 
-.soft{margin-top:34px;display:flex;flex-direction:column;gap:16px;}
+.soft{margin-top:40px;display:grid;gap:24px;}
+@media(min-width:760px){.soft{grid-template-columns:1fr 1fr;gap:32px;}}
 .soft-label{font-family:var(--font-mono);font-size:11px;color:var(--text-dim);margin-bottom:11px;}
 .pills{display:flex;flex-wrap:wrap;gap:8px;}
-.pill{font-size:13px;padding:6px 12px;border:1px solid var(--border);border-radius:999px;color:var(--text-muted);background:var(--surface-2);}
+.pill{font-size:13px;padding:6px 12px;border:1px solid var(--border);border-radius:999px;color:var(--text-muted);background:var(--surface-2);transition:transform .2s ease,border-color .2s ease,color .2s ease;}
+.pill::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:7px;vertical-align:middle;opacity:.45;transition:opacity .2s ease;}
+.pill:hover{border-color:var(--accent);color:var(--text);transform:translateY(-1px);}
+.pill:hover::before{opacity:1;}
 
 /* ---------- Centres d'intérêt ---------- */
 .interests{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:14px;}