diff --git a/global.css b/global.css
index 8a805e5..026cc30 100644
--- a/global.css
+++ b/global.css
@@ -29,6 +29,17 @@
   --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --shadow-lg:
     0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+  /* Alertes / badges (clair) — paramètres & blocs similaires */
+  --alert-success-bg: #dcfce7;
+  --alert-success-border: #86efac;
+  --alert-success-text: #166534;
+  --alert-error-bg: #fee2e2;
+  --alert-error-border: #fca5a5;
+  --alert-error-text: #991b1b;
+  --invite-code-color: #1d4ed8;
+  --badge-admin-bg: #dbeafe;
+  --badge-admin-text: #1d4ed8;
 }
 
 /* 🛡️ RESET MOBILE UNIVERSEL */
@@ -272,6 +283,252 @@ body.pf-home .pf-mobile-close-btn {
   margin-bottom: 24px;
 }
 
+/* ═══ Paramètres & petits blocs réutilisables ═══ */
+.pf-settings-page {
+  max-width: 680px;
+  margin: 32px auto;
+  padding: 0 16px;
+}
+.pf-settings-title {
+  font-size: 1.4rem;
+  font-weight: 700;
+  margin-bottom: 32px;
+  color: var(--text-main);
+}
+.pf-card-h2 {
+  font-size: 1rem;
+  font-weight: 700;
+  margin-bottom: 20px;
+  color: var(--text-main);
+}
+.pf-card-h2--tight {
+  margin-bottom: 6px;
+}
+.pf-muted-note {
+  color: var(--text-muted);
+  font-size: 0.85rem;
+  margin-bottom: 20px;
+}
+.pf-muted-note.pf-muted-note--tight {
+  margin-bottom: 8px;
+}
+.pf-muted-tiny {
+  color: var(--text-muted);
+  font-size: 0.8rem;
+}
+.pf-muted-inline {
+  color: var(--text-muted);
+  font-size: 0.85rem;
+  margin-left: 6px;
+}
+
+.pf-alert {
+  border-radius: 8px;
+  padding: 12px 16px;
+  margin-bottom: 24px;
+}
+.pf-alert--success {
+  background: var(--alert-success-bg);
+  border: 1px solid var(--alert-success-border);
+  color: var(--alert-success-text);
+}
+.pf-alert--error {
+  background: var(--alert-error-bg);
+  border: 1px solid var(--alert-error-border);
+  color: var(--alert-error-text);
+}
+
+.pf-lang-form {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.pf-btn--current-lang {
+  pointer-events: none;
+}
+
+.pf-stack-md {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+.pf-stack-sm {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* Tuile module (checkbox) — état coché via :has(), compatible thème */
+.pf-module-tile {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 14px 16px;
+  border: 2px solid var(--border-light);
+  border-radius: 10px;
+  cursor: pointer;
+  background: var(--bg-page);
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease;
+}
+.pf-module-tile:has(input:checked) {
+  border-color: var(--primary);
+  background: var(--bg-soft);
+}
+
+.pf-checkbox-lg {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--primary);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.pf-tile-icon {
+  font-size: 1.3rem;
+  line-height: 1;
+}
+.pf-tile-label {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--text-main);
+}
+
+/* Encadré pointillé (code d’invitation, etc.) */
+.pf-dashed-panel {
+  background: var(--bg-page);
+  border: 2px dashed var(--border-strong);
+  border-radius: 10px;
+  padding: 20px;
+}
+
+.pf-home-bg-preview {
+  margin-bottom: 16px;
+  border-radius: 10px;
+  overflow: hidden;
+  max-height: 160px;
+  position: relative;
+}
+.pf-home-bg-preview img {
+  width: 100%;
+  height: 160px;
+  object-fit: cover;
+  display: block;
+}
+.pf-badge-overlay {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: var(--bg-overlay);
+  color: var(--text-on-primary);
+  font-size: 0.75rem;
+  padding: 3px 8px;
+  border-radius: 6px;
+}
+
+.pf-inline-form-end {
+  display: flex;
+  align-items: flex-end;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.pf-inline-form-end .pf-form-group {
+  flex: 1;
+  min-width: 200px;
+}
+.pf-shrink-0 {
+  flex-shrink: 0;
+}
+.pf-mt-sm {
+  margin-top: 10px;
+}
+.pf-btn-sm-text {
+  font-size: 0.85rem;
+}
+.pf-mb-section {
+  margin-bottom: 20px;
+}
+
+.pf-invite-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.pf-invite-code {
+  font-size: 1.3rem;
+  font-weight: 700;
+  letter-spacing: 3px;
+  color: var(--invite-code-color);
+  cursor: pointer;
+}
+.pf-copy-msg {
+  color: var(--success);
+  font-size: 0.85rem;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+.pf-copy-msg.is-visible {
+  opacity: 1;
+}
+.pf-ml-auto {
+  margin-left: auto;
+}
+.pf-invite-footnote {
+  margin-top: 12px;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.pf-member-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 14px;
+  background: var(--bg-page);
+  border-radius: 8px;
+}
+.pf-admin-badge {
+  background: var(--badge-admin-bg);
+  color: var(--badge-admin-text);
+  padding: 1px 7px;
+  border-radius: 8px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  margin-left: 6px;
+}
+.pf-members-heading {
+  font-size: 0.95rem;
+  font-weight: 600;
+  margin: 20px 0 12px;
+  color: var(--text-main);
+}
+.pf-settings-admin-link {
+  text-align: center;
+  margin-top: 8px;
+}
+.pf-settings-admin-link a {
+  color: var(--primary);
+  font-size: 0.9rem;
+}
+
+.pf-input--disabled-muted:disabled {
+  background: var(--bg-page);
+  color: var(--text-muted);
+}
+
+.pf-flag-inline {
+  vertical-align: middle;
+  border-radius: 2px;
+  margin-right: 5px;
+}
+
+.pf-flex-gap-8 {
+  display: flex;
+  gap: 8px;
+}
+
 h1 {
   font-size: 2rem;
   font-weight: 800;
@@ -726,6 +983,15 @@ p {
   --border-strong: #484f58;
   --border-danger-soft: rgba(239,68,68,.3);
   --focus-ring: rgba(59,130,246,.25);
+  --alert-success-bg: rgba(34, 197, 94, 0.12);
+  --alert-success-border: rgba(34, 197, 94, 0.45);
+  --alert-success-text: #86efac;
+  --alert-error-bg: rgba(239, 68, 68, 0.12);
+  --alert-error-border: rgba(248, 113, 113, 0.45);
+  --alert-error-text: #fca5a5;
+  --invite-code-color: #93c5fd;
+  --badge-admin-bg: rgba(59, 130, 246, 0.2);
+  --badge-admin-text: #93c5fd;
 }
 [data-theme="dark"] body           { background: var(--bg-page); color: var(--text-main); }
 [data-theme="dark"] .pf-header     { background: var(--bg-panel); border-color: var(--border-light); }
diff --git a/settings.php b/settings.php
index c5d4194..9bf23b9 100644
--- a/settings.php
+++ b/settings.php
@@ -136,24 +136,24 @@ $activePage = "settings";
 require __DIR__ . '/header.php';
 ?>
 
-<div class="pf-container" style="max-width:680px;margin:32px auto;padding:0 16px">
+<div class="pf-container pf-settings-page">
 
-  <h1 style="font-size:1.4rem;font-weight:700;margin-bottom:32px">⚙️ Paramètres</h1>
+  <h1 class="pf-settings-title">⚙️ Paramètres</h1>
 
   <?php if ($success): ?>
-    <div style="background:#dcfce7;border:1px solid #86efac;border-radius:8px;padding:12px 16px;margin-bottom:24px;color:#166534">✓ <?= htmlspecialchars($success) ?></div>
+    <div class="pf-alert pf-alert--success">✓ <?= htmlspecialchars($success) ?></div>
   <?php endif; ?>
   <?php if ($error): ?>
-    <div style="background:#fee2e2;border:1px solid #fca5a5;border-radius:8px;padding:12px 16px;margin-bottom:24px;color:#991b1b">✗ <?= htmlspecialchars($error) ?></div>
+    <div class="pf-alert pf-alert--error">✗ <?= htmlspecialchars($error) ?></div>
   <?php endif; ?>
 
   <!-- ── Langue ─────────────────────────────────────────────────────────── -->
   <section class="pf-panel-card">
-    <h2 style="font-size:1rem;font-weight:700;margin-bottom:20px">🌐 Langue / Language</h2>
-    <form method="post" style="display:flex;gap:10px;flex-wrap:wrap">
+    <h2 class="pf-card-h2">🌐 Langue / Language</h2>
+    <form method="post" class="pf-lang-form">
       <input type="hidden" name="action" value="set_lang">
       <?php
-        $s = 'style="vertical-align:middle;border-radius:2px;margin-right:5px"';
+        $s = 'class="pf-flag-inline"';
         $fr_flag = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 12" width="20" height="13" '.$s.'><rect width="6" height="12" fill="#002395"/><rect x="6" width="6" height="12" fill="#fff"/><rect x="12" width="6" height="12" fill="#ED2939"/></svg>';
         $en_flag = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30" width="20" height="13" '.$s.'><rect width="60" height="30" fill="#012169"/><path d="M0,0 L60,30 M60,0 L0,30" stroke="#fff" stroke-width="6"/><path d="M0,0 L60,30 M60,0 L0,30" stroke="#C8102E" stroke-width="4"/><path d="M30,0 V30 M0,15 H60" stroke="#fff" stroke-width="10"/><path d="M30,0 V30 M0,15 H60" stroke="#C8102E" stroke-width="6"/></svg>';
         $senyera  = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 12" width="20" height="13" '.$s.'><rect width="18" height="12" fill="#FCDD09"/><rect y="1.33" width="18" height="1.33" fill="#DA121A"/><rect y="4" width="18" height="1.33" fill="#DA121A"/><rect y="6.67" width="18" height="1.33" fill="#DA121A"/><rect y="9.33" width="18" height="1.33" fill="#DA121A"/></svg>';
@@ -166,8 +166,7 @@ require __DIR__ . '/header.php';
         foreach ($langs as $code => $lang):
       ?>
       <button type="submit" name="lang" value="<?= $code ?>"
-        class="pf-btn <?= $currentLang === $code ? '' : 'btn-secondary' ?>"
-        style="<?= $currentLang === $code ? 'pointer-events:none' : '' ?>">
+        class="pf-btn <?= $currentLang === $code ? 'pf-btn--current-lang' : 'btn-secondary' ?>">
         <?= $lang['flag'] ?> <?= $lang['label'] ?>
       </button>
       <?php endforeach; ?>
@@ -177,8 +176,8 @@ require __DIR__ . '/header.php';
   <!-- ── Modules ────────────────────────────────────────────────────────── -->
   <?php if ($family_id): ?>
   <section class="pf-panel-card">
-    <h2 style="font-size:1rem;font-weight:700;margin-bottom:6px">🧩 Modules actifs</h2>
-    <p style="color:#64748b;font-size:0.85rem;margin-bottom:20px">Choisissez les modules visibles dans la navigation (partagé avec tous les membres de l'espace).</p>
+    <h2 class="pf-card-h2 pf-card-h2--tight">🧩 Modules actifs</h2>
+    <p class="pf-muted-note">Choisissez les modules visibles dans la navigation (partagé avec tous les membres de l'espace).</p>
     <?php
       $enabledMods = $_SESSION['enabled_modules'] ?? ['calendar','budget','holidays','gifts'];
       $allModules = [
@@ -193,14 +192,12 @@ require __DIR__ . '/header.php';
     ?>
     <form method="post">
       <input type="hidden" name="action" value="set_modules">
-      <div style="display:flex;flex-direction:column;gap:12px;margin-bottom:20px">
+      <div class="pf-stack-md">
         <?php foreach ($allModules as $key => $mod): $active = in_array($key, $enabledMods); ?>
-        <label style="display:flex;align-items:center;gap:14px;padding:14px 16px;border:2px solid <?= $active ? '#2563eb' : '#e2e8f0' ?>;border-radius:10px;cursor:pointer;background:<?= $active ? '#eff6ff' : '#f8fafc' ?>;transition:all .15s">
-          <input type="checkbox" name="mod_<?= $key ?>" <?= $active ? 'checked' : '' ?>
-            style="width:18px;height:18px;accent-color:#2563eb;cursor:pointer"
-            onchange="this.closest('label').style.borderColor=this.checked?'#2563eb':'#e2e8f0';this.closest('label').style.background=this.checked?'#eff6ff':'#f8fafc'">
-          <span style="font-size:1.3rem"><?= $mod['icon'] ?></span>
-          <span style="font-weight:600;font-size:0.95rem"><?= $mod['label'] ?></span>
+        <label class="pf-module-tile">
+          <input type="checkbox" name="mod_<?= $key ?>" <?= $active ? 'checked' : '' ?> class="pf-checkbox-lg">
+          <span class="pf-tile-icon"><?= $mod['icon'] ?></span>
+          <span class="pf-tile-label"><?= $mod['label'] ?></span>
         </label>
         <?php endforeach; ?>
       </div>
@@ -216,29 +213,29 @@ require __DIR__ . '/header.php';
     $has_custom_bg = $bg_file !== null;
   ?>
   <section class="pf-panel-card">
-    <h2 style="font-size:1rem;font-weight:700;margin-bottom:6px">🖼️ Image d'accueil</h2>
-    <p style="color:#64748b;font-size:0.85rem;margin-bottom:20px">Photo de fond affichée sur la page d'accueil (partagée avec tous les membres).</p>
+    <h2 class="pf-card-h2 pf-card-h2--tight">🖼️ Image d'accueil</h2>
+    <p class="pf-muted-note">Photo de fond affichée sur la page d'accueil (partagée avec tous les membres).</p>
 
     <?php if ($has_custom_bg): ?>
-    <div style="margin-bottom:16px;border-radius:10px;overflow:hidden;max-height:160px;position:relative">
-      <img src="/home-bg.php" alt="Fond actuel" style="width:100%;height:160px;object-fit:cover">
-      <span style="position:absolute;top:8px;right:8px;background:rgba(0,0,0,.55);color:#fff;font-size:.75rem;padding:3px 8px;border-radius:6px">Image personnalisée</span>
+    <div class="pf-home-bg-preview">
+      <img src="/home-bg.php" alt="Fond actuel">
+      <span class="pf-badge-overlay">Image personnalisée</span>
     </div>
     <?php endif; ?>
 
-    <form method="post" enctype="multipart/form-data" style="display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap">
+    <form method="post" enctype="multipart/form-data" class="pf-inline-form-end">
       <input type="hidden" name="action" value="upload_home_bg">
-      <div class="pf-form-group" style="flex:1;min-width:200px">
+      <div class="pf-form-group">
         <label class="pf-label">Nouvelle image (jpg, png, webp — max 10 Mo)</label>
         <input type="file" name="home_bg" class="pf-input" accept="image/jpeg,image/png,image/webp" required>
       </div>
-      <button type="submit" class="pf-btn" style="flex-shrink:0">Enregistrer</button>
+      <button type="submit" class="pf-btn pf-shrink-0">Enregistrer</button>
     </form>
 
     <?php if ($has_custom_bg): ?>
-    <form method="post" style="margin-top:10px">
+    <form method="post" class="pf-mt-sm">
       <input type="hidden" name="action" value="reset_home_bg">
-      <button type="submit" class="pf-btn btn-secondary" style="font-size:.85rem"
+      <button type="submit" class="pf-btn btn-secondary pf-btn-sm-text"
         onclick="return confirm('Revenir à l\'image par défaut ?')">🔄 Remettre l'image par défaut</button>
     </form>
     <?php endif; ?>
@@ -247,12 +244,12 @@ require __DIR__ . '/header.php';
 
   <!-- ── Profil ──────────────────────────────────────────────────────────── -->
   <section class="pf-panel-card">
-    <h2 style="font-size:1rem;font-weight:700;margin-bottom:20px">👤 Mon profil</h2>
+    <h2 class="pf-card-h2">👤 Mon profil</h2>
     <form method="post">
       <input type="hidden" name="action" value="update_profile">
       <div class="pf-form-group">
         <label class="pf-label">Nom d'utilisateur</label>
-        <input type="text" class="pf-input" value="<?= htmlspecialchars($user['username']) ?>" disabled style="background:#f8fafc;color:#94a3b8">
+        <input type="text" class="pf-input pf-input--disabled-muted" value="<?= htmlspecialchars($user['username']) ?>" disabled>
       </div>
       <div class="pf-form-group">
         <label class="pf-label">Prénom / Pseudo affiché</label>
@@ -264,7 +261,7 @@ require __DIR__ . '/header.php';
 
   <!-- ── Mot de passe ────────────────────────────────────────────────────── -->
   <section class="pf-panel-card">
-    <h2 style="font-size:1rem;font-weight:700;margin-bottom:20px">🔒 Changer le mot de passe</h2>
+    <h2 class="pf-card-h2">🔒 Changer le mot de passe</h2>
     <form method="post">
       <input type="hidden" name="action" value="change_password">
       <div class="pf-form-group">
@@ -286,54 +283,54 @@ require __DIR__ . '/header.php';
   <?php if ($family): ?>
   <!-- ── Espace familial ─────────────────────────────────────────────────── -->
   <section class="pf-panel-card">
-    <h2 style="font-size:1rem;font-weight:700;margin-bottom:20px">🏠 Mon espace familial</h2>
+    <h2 class="pf-card-h2">🏠 Mon espace familial</h2>
 
-    <form method="post" style="margin-bottom:20px">
+    <form method="post" class="pf-mb-section">
       <input type="hidden" name="action" value="update_family_name">
       <div class="pf-form-group">
         <label class="pf-label">Nom de l'espace</label>
-        <div style="display:flex;gap:8px">
+        <div class="pf-flex-gap-8">
           <input type="text" name="family_name" class="pf-input" value="<?= htmlspecialchars($family['name']) ?>" required>
-          <button type="submit" class="pf-btn" style="flex-shrink:0">Enregistrer</button>
+          <button type="submit" class="pf-btn pf-shrink-0">Enregistrer</button>
         </div>
       </div>
     </form>
 
     <!-- Code d'invitation -->
-    <div style="background:#f8fafc;border:2px dashed #cbd5e1;border-radius:10px;padding:20px">
-      <p style="font-size:0.85rem;color:#64748b;margin-bottom:8px">Code d'invitation — partagez-le pour inviter quelqu'un</p>
-      <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap">
-        <code id="invite-code" style="font-size:1.3rem;font-weight:700;letter-spacing:3px;color:#1e40af;cursor:pointer"
+    <div class="pf-dashed-panel">
+      <p class="pf-muted-note pf-muted-note--tight">Code d'invitation — partagez-le pour inviter quelqu'un</p>
+      <div class="pf-invite-row">
+        <code id="invite-code" class="pf-invite-code"
           onclick="copyCode()" title="Cliquer pour copier">
           <?= htmlspecialchars($family['invite_code']) ?>
         </code>
-        <span id="copy-msg" style="color:#16a34a;font-size:0.85rem;opacity:0;transition:opacity .3s">✓ Copié !</span>
-        <form method="post" style="margin-left:auto">
+        <span id="copy-msg" class="pf-copy-msg">✓ Copié !</span>
+        <form method="post" class="pf-ml-auto">
           <input type="hidden" name="action" value="regen_invite">
-          <button type="submit" class="pf-btn btn-secondary" style="font-size:0.85rem"
+          <button type="submit" class="pf-btn btn-secondary pf-btn-sm-text"
             onclick="return confirm('Regénérer le code ? L\'ancien sera invalidé.')">
             🔄 Nouveau code
           </button>
         </form>
       </div>
-      <p style="margin-top:12px;font-size:0.8rem;color:#94a3b8">
+      <p class="pf-invite-footnote">
         Lien d'inscription : <strong><?= $_SERVER['HTTP_HOST'] ?>/register.php</strong>
       </p>
     </div>
 
     <!-- Membres -->
-    <h3 style="font-size:0.95rem;font-weight:600;margin:20px 0 12px">Membres (<?= count($members) ?>)</h3>
-    <div style="display:flex;flex-direction:column;gap:8px">
+    <h3 class="pf-members-heading">Membres (<?= count($members) ?>)</h3>
+    <div class="pf-stack-sm">
       <?php foreach ($members as $m): ?>
-      <div style="display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#f8fafc;border-radius:8px">
+      <div class="pf-member-card">
         <div>
           <strong><?= htmlspecialchars($m['display_name']) ?></strong>
-          <span style="color:#94a3b8;font-size:0.85rem;margin-left:6px">@<?= htmlspecialchars($m['username']) ?></span>
+          <span class="pf-muted-inline">@<?= htmlspecialchars($m['username']) ?></span>
           <?php if ($m['is_admin']): ?>
-            <span style="background:#dbeafe;color:#1d4ed8;padding:1px 7px;border-radius:8px;font-size:0.75rem;font-weight:600;margin-left:6px">Admin</span>
+            <span class="pf-admin-badge">Admin</span>
           <?php endif; ?>
         </div>
-        <span style="font-size:0.8rem;color:#94a3b8"><?= date('d/m/Y', strtotime($m['created_at'])) ?></span>
+        <span class="pf-muted-tiny"><?= date('d/m/Y', strtotime($m['created_at'])) ?></span>
       </div>
       <?php endforeach; ?>
     </div>
@@ -341,8 +338,8 @@ require __DIR__ . '/header.php';
   <?php endif; ?>
 
   <?php if ($_SESSION['user']['is_admin']): ?>
-  <div style="text-align:center;margin-top:8px">
-    <a href="/admin/" style="color:#2563eb;font-size:0.9rem">→ Panneau d'administration</a>
+  <div class="pf-settings-admin-link">
+    <a href="/admin/">→ Panneau d'administration</a>
   </div>
   <?php endif; ?>
 
@@ -353,8 +350,8 @@ function copyCode() {
   const code = document.getElementById('invite-code').textContent.trim();
   navigator.clipboard.writeText(code).then(() => {
     const msg = document.getElementById('copy-msg');
-    msg.style.opacity = '1';
-    setTimeout(() => msg.style.opacity = '0', 2000);
+    msg.classList.add('is-visible');
+    setTimeout(() => msg.classList.remove('is-visible'), 2000);
   });
 }
 </script>