Enhance UI consistency in House components: Replace SectionTitle with styled headings in HouseCard, HouseManagement, and HousesSection for improved visual hierarchy and readability. Update styles for better alignment and user experience.

components/houses/HouseCard.tsx

@@ -72,7 +72,7 @@ export default function HouseCard({ house, onRequestSent }: HouseCardProps) {
     <Card className="p-4 sm:p-6">
       <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4 mb-4">
         <div className="flex-1 min-w-0">
-          <h3 className="text-xl font-bold mb-2 break-words" style={{ color: "var(--foreground)" }}>
+          <h3 className="text-lg sm:text-xl font-bold mb-2 break-words" style={{ color: "var(--foreground)" }}>
             {house.name}
           </h3>
           {house.description && (

components/houses/HouseManagement.tsx

@@ -4,7 +4,6 @@ import { useState, useEffect, useTransition } from "react";
 import { useSession } from "next-auth/react";
 import Card from "@/components/ui/Card";
 import Button from "@/components/ui/Button";
-import SectionTitle from "@/components/ui/SectionTitle";
 import HouseForm from "./HouseForm";
 import RequestList from "./RequestList";
 import Alert from "@/components/ui/Alert";
@@ -164,7 +163,9 @@ export default function HouseManagement({
   if (!house) {
     return (
       <Card className="p-6">
-        <SectionTitle>Ma Maison</SectionTitle>
+        <h2 className="text-lg sm:text-xl font-bold mb-4" style={{ color: "var(--foreground)" }}>
+          Ma Maison
+        </h2>
         <p className="text-sm mb-4" style={{ color: "var(--muted-foreground)" }}>
           Vous n'êtes membre d'aucune maison pour le moment.
         </p>
@@ -174,10 +175,25 @@ export default function HouseManagement({
 
   return (
     <div className="space-y-6">
-      <Card className="p-4 sm:p-6">
+      <Card 
+        className="p-4 sm:p-6"
+        style={{
+          borderColor: `color-mix(in srgb, var(--accent) 40%, var(--border))`,
+          borderWidth: "2px",
+          boxShadow: `0 0 20px color-mix(in srgb, var(--accent) 10%, transparent)`
+        }}
+      >
         <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-4 mb-4">
           <div className="flex-1 min-w-0">
-            <SectionTitle>{house.name}</SectionTitle>
+            <h3 
+              className="text-xl sm:text-2xl font-bold mb-2 break-words"
+              style={{ 
+                color: "var(--accent)",
+                textShadow: `0 0 10px color-mix(in srgb, var(--accent) 30%, transparent)`
+              }}
+            >
+              {house.name}
+            </h3>
             {house.description && (
               <p className="text-sm mt-2 break-words" style={{ color: "var(--muted-foreground)" }}>
                 {house.description}
@@ -224,38 +240,83 @@ export default function HouseManagement({
           />
         ) : (
           <div>
-            <h3 className="font-bold mb-3" style={{ color: "var(--foreground)" }}>
+            <h4 
+              className="text-sm font-semibold uppercase tracking-wider mb-3"
+              style={{ 
+                color: "var(--primary)",
+                borderBottom: `2px solid color-mix(in srgb, var(--primary) 30%, transparent)`,
+                paddingBottom: "0.5rem"
+              }}
+            >
               Membres ({house.memberships?.length ?? 0})
-            </h3>
+            </h4>
             <div className="space-y-2">
-              {(house.memberships || []).map((membership) => (
+              {(house.memberships || []).map((membership) => {
-                <div
+                const isCurrentUser = membership.user.id === session?.user?.id;
-                  key={membership.id}
+                const roleColor = 
-                  className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-2 rounded"
+                  membership.role === "OWNER" ? "var(--accent)" :
-                  style={{ backgroundColor: "var(--card-hover)" }}
+                  membership.role === "ADMIN" ? "var(--primary)" :
-                >
+                  "var(--muted-foreground)";
-                  <div className="flex items-center gap-2 min-w-0 flex-1">
+                
-                    {membership.user.avatar && (
+                return (
-                      <img
+                  <div
-                        src={membership.user.avatar}
+                    key={membership.id}
-                        alt={membership.user.username}
+                    className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 p-3 rounded"
-                        className="w-8 h-8 rounded-full flex-shrink-0"
+                    style={{ 
-                      />
+                      backgroundColor: isCurrentUser 
-                    )}
+                        ? "color-mix(in srgb, var(--primary) 10%, var(--card-hover))"
-                    <div className="min-w-0">
+                        : "var(--card-hover)",
-                      <span className="font-semibold block sm:inline" style={{ color: "var(--foreground)" }}>
+                      borderLeft: `3px solid ${roleColor}`,
-                        {membership.user.username}
+                      borderColor: isCurrentUser ? "var(--primary)" : "transparent"
-                      </span>
+                    }}
-                      <span className="text-xs block sm:inline sm:ml-2" style={{ color: "var(--muted-foreground)" }}>
+                  >
-                        ({membership.user.score} pts - Niveau {membership.user.level})
+                    <div className="flex items-center gap-2 min-w-0 flex-1">
-                      </span>
+                      {membership.user.avatar && (
+                        <img
+                          src={membership.user.avatar}
+                          alt={membership.user.username}
+                          className="w-8 h-8 rounded-full flex-shrink-0 border-2"
+                          style={{ borderColor: roleColor }}
+                        />
+                      )}
+                      <div className="min-w-0">
+                        <span 
+                          className="font-semibold block sm:inline"
+                          style={{ 
+                            color: isCurrentUser ? "var(--primary)" : "var(--foreground)"
+                          }}
+                        >
+                          {membership.user.username}
+                          {isCurrentUser && " (Vous)"}
+                        </span>
+                        <span 
+                          className="text-xs block sm:inline sm:ml-2"
+                          style={{ color: "var(--muted-foreground)" }}
+                        >
+                          <span style={{ color: "var(--success)" }}>
+                            {membership.user.score} pts
+                          </span>
+                          {" • "}
+                          <span style={{ color: "var(--blue)" }}>
+                            Niveau {membership.user.level}
+                          </span>
+                        </span>
+                      </div>
                     </div>
+                    <span 
+                      className="text-xs uppercase flex-shrink-0 px-2 py-1 rounded font-bold"
+                      style={{ 
+                        color: roleColor,
+                        backgroundColor: `color-mix(in srgb, ${roleColor} 15%, transparent)`,
+                        border: `1px solid color-mix(in srgb, ${roleColor} 30%, transparent)`
+                      }}
+                    >
+                      {membership.role === "OWNER" && "👑 "}
+                      {membership.role}
+                    </span>
                   </div>
-                  <span className="text-xs uppercase flex-shrink-0" style={{ color: "var(--accent)" }}>
+                );
-                    {membership.role}
+              })}
-                  </span>
-                </div>
-              ))}
             </div>
 
             {isAdmin && (
@@ -317,7 +378,16 @@ export default function HouseManagement({
 
       {isAdmin && pendingRequests.length > 0 && (
         <Card className="p-4 sm:p-6">
-          <SectionTitle>Demandes d'adhésion</SectionTitle>
+          <h2 
+            className="text-lg sm:text-xl font-bold mb-4"
+            style={{ 
+              color: "var(--purple)",
+              borderBottom: `2px solid color-mix(in srgb, var(--purple) 30%, transparent)`,
+              paddingBottom: "0.5rem"
+            }}
+          >
+            Demandes d'adhésion
+          </h2>
           <RequestList requests={pendingRequests} onUpdate={onUpdate} />
         </Card>
       )}

components/houses/HousesSection.tsx

@@ -165,13 +165,17 @@ export default function HousesSection({
           <>
             {invitations.length > 0 && (
               <Card className="p-4 sm:p-6">
-                <SectionTitle>Mes Invitations</SectionTitle>
+                <h2 className="text-lg sm:text-xl font-bold mb-4" style={{ color: "var(--foreground)" }}>
+                  Mes Invitations
+                </h2>
                 <InvitationList invitations={invitations} onUpdate={handleUpdate} />
               </Card>
             )}
 
             <Card className="p-4 sm:p-6">
-              <SectionTitle>Ma Maison</SectionTitle>
+              <h2 className="text-lg sm:text-xl font-bold mb-4" style={{ color: "var(--foreground)" }}>
+                Ma Maison
+              </h2>
               {myHouse ? (
                 <HouseManagement
                   house={myHouse}
@@ -209,7 +213,9 @@ export default function HousesSection({
         )}
 
         <Card className="p-4 sm:p-6">
-          <SectionTitle>Toutes les Maisons</SectionTitle>
+          <h2 className="text-lg sm:text-xl font-bold mb-4" style={{ color: "var(--foreground)" }}>
+            Toutes les Maisons
+          </h2>
           <div className="mb-4">
             <Input
               placeholder="Rechercher une maison..."