feat: migrate SCSS → Tailwind CSS + remove sass dependency

12 SCSS files (1167 lines) replaced by centralized index.css with
Tailwind v4 @theme tokens, @layer components, and utility classes.
Game panel design system (gp-*) preserved as CSS components.
Inline styles in Settings/Login/MilestoneBar converted to Tailwind utilities.
sass removed from dependencies. Build clean, 53 tests pass.

Frontend/src/pages/Settings.jsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 import { useAuth } from "../context/AuthContext";
-import "../scss/pages.scss";
 
 const OAUTH_URL = import.meta.env.VITE_OAUTH_URL || "";
 const PROVIDERS = ["discord", "github", "google", "twitch"];
@@ -87,7 +86,6 @@ export default function Settings() {
           returnUrl: `${window.location.origin}/settings`,
         }),
       });
-      // Redirect to OAuth provider
       window.location.href = data.data.authUrl;
     } catch (e) {
       setError(e.message);
@@ -134,30 +132,28 @@ export default function Settings() {
 
   return (
     <section>
-      <div className="containererror" style={{ maxWidth: 500 }}>
+      <div className="containererror max-w-[500px]">
         <h1>Paramètres</h1>
 
         {error && (
-          <p style={{ color: "#ef4444", fontSize: 13, marginBottom: 16 }}>
-            {error}
-          </p>
+          <p className="text-red-500 text-[13px] mb-4">{error}</p>
         )}
 
         {/* Profile info */}
         {profile && (
-          <div style={{ marginBottom: 24, textAlign: "left" }}>
-            <p style={{ fontSize: 14, color: "#9ca3af", margin: "4px 0" }}>
+          <div className="mb-6 text-left">
+            <p className="text-sm text-gray-400 my-1">
               <strong>Pseudo :</strong> {profile.nickname}
             </p>
-            <p style={{ fontSize: 14, color: "#9ca3af", margin: "4px 0" }}>
+            <p className="text-sm text-gray-400 my-1">
               <strong>Email :</strong> {profile.email || "—"}
             </p>
           </div>
         )}
 
         {/* Linked providers */}
-        <h2 style={{ fontSize: 18, marginBottom: 12 }}>Comptes liés</h2>
-        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+        <h2 className="text-lg mb-3">Comptes liés</h2>
+        <div className="flex flex-col gap-2">
           {PROVIDERS.map((provider) => {
             const linked = linkedNames.has(provider);
             const isLoading = actionLoading === provider;
@@ -165,39 +161,32 @@ export default function Settings() {
             return (
               <div
                 key={provider}
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  padding: "8px 12px",
-                  background: linked ? "#1a2a1a" : "#1a1a2a",
-                  borderRadius: 8,
-                  border: `1px solid ${linked ? "#2a4a2a" : "#2a2a4a"}`,
-                }}
+                className={`flex items-center justify-between px-3 py-2 rounded-lg border ${
+                  linked
+                    ? "bg-[#1a2a1a] border-[#2a4a2a]"
+                    : "bg-[#1a1a2a] border-[#2a2a4a]"
+                }`}
               >
-                <span style={{ fontSize: 14 }}>
+                <span className="text-sm">
                   {EMOJIS[provider]} {provider.charAt(0).toUpperCase() + provider.slice(1)}
                   {linked && (
-                    <span style={{ color: "#4ade80", fontSize: 12, marginLeft: 8 }}>
-                      ✓ lié
-                    </span>
+                    <span className="text-green-400 text-xs ml-2">✓ lié</span>
                   )}
                 </span>
 
                 {linked ? (
                   <button
-                    className="btn-return"
-                    style={{ fontSize: 12, padding: "4px 10px", opacity: canUnlink ? 1 : 0.4 }}
+                    className="btn-return text-xs! py-1! px-2.5!"
                     disabled={!canUnlink || isLoading}
                     onClick={() => handleUnlink(provider)}
                     type="button"
+                    style={{ opacity: canUnlink ? 1 : 0.4 }}
                   >
                     {isLoading ? "..." : "Délier"}
                   </button>
                 ) : (
                   <button
-                    className="btn-return"
-                    style={{ fontSize: 12, padding: "4px 10px" }}
+                    className="btn-return text-xs! py-1! px-2.5!"
                     disabled={isLoading}
                     onClick={() => handleLink(provider)}
                     type="button"
@@ -212,8 +201,7 @@ export default function Settings() {
 
         {/* Logout */}
         <button
-          className="btn-return"
-          style={{ marginTop: 24, width: "100%" }}
+          className="btn-return mt-6 w-full!"
           onClick={logout}
           type="button"
         >