Migrate site controls to Nebula design system

website/src/features/games/CopyChecklistItemsButton.jsx

@@ -57,7 +57,8 @@ export function CopyChecklistItemsButton({ labels, sections, title = "Copier pou
 
   return (
     <button
-      className="filter-reset-button results-copy-button"
+      className="filter-reset-button results-copy-button nds-icon-button"
+      data-size="xs"
       type="button"
       onClick={copyItems}
       disabled={!text}

website/src/features/games/GameFiltersPanel.jsx

@@ -17,8 +17,6 @@ export function GameFiltersPanel({
   onChange
 }) {
   const selected = new Set(filters[selectedKey] || []);
-  const logicLabel = filters.logic === "or" ? logicLabels.or : logicLabels.and;
-
   function update(updater) {
     onChange(updater(filters));
   }
@@ -31,7 +29,8 @@ export function GameFiltersPanel({
           <h2>{title}</h2>
         </div>
         <button
-          className="filter-reset-button"
+          className="filter-reset-button nds-icon-button"
+          data-size="xs"
           onClick={() => onChange({ name: "", [selectedKey]: [], logic: "and" })}
           aria-label={resetLabel}
           title={resetLabel}
@@ -41,11 +40,24 @@ export function GameFiltersPanel({
       </div>
       <label className="field compact">
         <span>{nameLabel}</span>
-        <input value={filters.name} placeholder="Rechercher..." onChange={(event) => update((state) => ({ ...state, name: event.target.value }))} />
+        <input className="nds-input" data-size="sm" type="search" value={filters.name} placeholder="Rechercher..." onChange={(event) => update((state) => ({ ...state, name: event.target.value }))} />
       </label>
       <div className="filter-logic">
         <span>{matchLabel}</span>
-        <button onClick={() => update((state) => ({ ...state, logic: state.logic === "and" ? "or" : "and" }))}>{logicLabel}</button>
+        <div className="filter-logic-group nds-radio-button-group" data-size="xs" role="radiogroup" aria-label={matchLabel}>
+          {["and", "or"].map((logic) => (
+            <button
+              key={logic}
+              className={filters.logic === logic ? "active" : ""}
+              type="button"
+              role="radio"
+              aria-checked={filters.logic === logic}
+              onClick={() => update((state) => ({ ...state, logic }))}
+            >
+              {logicLabels[logic]}
+            </button>
+          ))}
+        </div>
       </div>
       <div className="filter-options legacy-scrollbar">
         {options.map((option) => {
@@ -53,6 +65,8 @@ export function GameFiltersPanel({
           return (
             <label className={`filter-chip ${getOptionClassName(option)} ${selected.has(optionId) ? "active" : ""}`} key={optionId}>
               <input
+                className="nds-checkbox"
+                data-size="sm"
                 type="checkbox"
                 checked={selected.has(optionId)}
                 onChange={(event) => update((state) => {

website/src/features/games/GameListsPage.jsx

@@ -30,7 +30,7 @@ export function GameListsPage({ game, lists, selectedListId, onSelectList, linke
             <h1>Listes</h1>
           </div>
           <p>Sélectionnez une liste, puis copiez-la ou créez une checklist dans la toolbox associée.</p>
-          <a className="game-list-help-link button" href="#/about#contribuer">Proposer une nouvelle liste</a>
+          <a className="game-list-help-link nds-button" data-size="sm" href="#/about#contribuer">Proposer une nouvelle liste</a>
         </div>
       </section>
       {lists.length ? (
@@ -43,7 +43,9 @@ export function GameListsPage({ game, lists, selectedListId, onSelectList, linke
                   <small>{list.itemCount} éléments</small>
                 </button>
                 <button
-                  className="game-list-create-button primary"
+                  className="game-list-create-button nds-icon-button"
+                  data-size="sm"
+                  data-variant="primary"
                   type="button"
                   disabled={!linkedToolboxId}
                   onClick={() => onCreateChecklist?.(list)}

website/src/features/games/GamesPage.jsx

@@ -32,7 +32,7 @@ export function GamesPage({ siteContent, games, gamesError }) {
               <h2>{game.title}</h2>
               <p>{game.summary}</p>
               <div className="card-actions">
-                <a className="button primary" href={`#/games/${game.id}`}>Ouvrir</a>
+                <a className="nds-button" data-size="sm" data-variant="primary" href={`#/games/${game.id}`}>Ouvrir</a>
               </div>
             </div>
           </article>

website/src/features/games/mhwilds/MhwildsListing.jsx

@@ -30,8 +30,8 @@ export function MhwildsListing({ category, game, mhwilds, filters, setFilters, t
           <p>{isMonsters ? "Filtrez les monstres par nom et faiblesses, puis consultez leurs dégâts détaillés." : "Filtrez la faune par nom et zones d'apparition."}</p>
         </div>
         <div className="actions">
-          <a className={`button ${isMonsters ? "primary" : ""}`} href="#/games/mhwilds/monsters">Monstres</a>
-          <a className={`button ${!isMonsters ? "primary" : ""}`} href="#/games/mhwilds/endemic">Faune</a>
+          <a className="nds-button" data-size="sm" data-variant={isMonsters ? "primary" : "secondary"} href="#/games/mhwilds/monsters">Monstres</a>
+          <a className="nds-button" data-size="sm" data-variant={!isMonsters ? "primary" : "secondary"} href="#/games/mhwilds/endemic">Faune</a>
         </div>
       </section>
       <section className="game-layout" data-mhwilds-category={category}>