liste V3

groceries.php

@@ -18,14 +18,18 @@ require __DIR__ . '/header.php';
     <p id="groceries-subtitle" class="pf-muted-note" style="margin-top:0.5rem;font-size:0.85rem"></p>
   </div>
 
-  <div class="groceries-quick-add">
+  <div class="groceries-add-card">
-    <input type="text" id="groceries-new" class="form-control" placeholder="<?= htmlspecialchars(tr('groceries_placeholder_add')) ?>" autocomplete="off" maxlength="500">
+    <div class="groceries-add-card-inner">
-    <button type="button" class="btn btn-primary" onclick="addFromInput()"><?= htmlspecialchars(tr('groceries_btn_add')) ?></button>
+      <div class="groceries-quick-add">
+        <input type="text" id="groceries-new" class="pf-input groceries-add-input" placeholder="<?= htmlspecialchars(tr('groceries_placeholder_add')) ?>" autocomplete="off" maxlength="500" aria-label="<?= htmlspecialchars(tr('groceries_placeholder_add')) ?>">
+        <button type="button" class="pf-btn groceries-add-submit" onclick="addFromInput()"><?= htmlspecialchars(tr('groceries_btn_add')) ?></button>
+      </div>
+    </div>
   </div>
 
   <div class="groceries-toolbar">
-    <button type="button" class="btn btn-secondary btn-sm" onclick="uncheckAll()"><?= htmlspecialchars(tr('groceries_btn_uncheck_all')) ?></button>
+    <button type="button" class="pf-btn btn-secondary groceries-toolbar-btn" onclick="uncheckAll()"><?= htmlspecialchars(tr('groceries_btn_uncheck_all')) ?></button>
-    <button type="button" class="btn btn-secondary btn-sm" onclick="deletePicked()"><?= htmlspecialchars(tr('groceries_btn_delete_picked')) ?></button>
+    <button type="button" class="pf-btn btn-secondary groceries-toolbar-btn groceries-toolbar-btn--danger" onclick="deletePicked()"><?= htmlspecialchars(tr('groceries_btn_delete_picked')) ?></button>
   </div>
 
   <div id="groceries-lists"></div>

modules/groceries/assets/groceries.css

@@ -1,6 +1,6 @@
 /* HouseHub — Courses (liste de courses) */
 .groceries-layout {
-  max-width: 560px;
+  max-width: 600px;
   margin: 0 auto;
   padding: 0 1rem 2.5rem;
 }
@@ -20,21 +20,72 @@
   color: var(--text-muted);
 }
 
-.groceries-quick-add {
+/* Encart ajout — plus visible, aligné sur les cartes HouseHub */
-  display: flex;
+.groceries-add-card {
-  gap: 0.5rem;
+  margin-bottom: 1.35rem;
-  margin-bottom: 1.25rem;
+  border-radius: 14px;
+  border: 1px solid var(--border-light);
+  background: var(--bg-panel);
+  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
+  overflow: hidden;
 }
-.groceries-quick-add input {
+.groceries-add-card-inner {
-  flex: 1;
+  padding: 1.15rem 1.25rem 1.25rem;
-  min-width: 0;
 }
 
+.groceries-quick-add {
+  display: flex;
+  align-items: stretch;
+  gap: 0.75rem;
+}
+.groceries-quick-add .groceries-add-input {
+  flex: 1;
+  min-width: 0;
+  padding: 14px 16px;
+  font-size: 1.05rem;
+  border-radius: 10px;
+  line-height: 1.35;
+}
+.groceries-add-submit {
+  flex-shrink: 0;
+  padding: 14px 22px !important;
+  font-size: 1rem !important;
+  border-radius: 10px !important;
+  white-space: nowrap;
+}
+
+@media (max-width: 520px) {
+  .groceries-quick-add {
+    flex-direction: column;
+  }
+  .groceries-add-submit {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+/* Actions secondaires — même famille que pf-btn du reste du site */
 .groceries-toolbar {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: 0.6rem;
-  margin-bottom: 1rem;
+  margin-bottom: 1.15rem;
+}
+.groceries-toolbar-btn {
+  padding: 10px 18px !important;
+  font-size: 0.875rem !important;
+  font-weight: 600 !important;
+  border-radius: 10px !important;
+}
+.groceries-toolbar-btn--danger {
+  color: var(--danger) !important;
+  border-color: rgba(239, 68, 68, 0.35) !important;
+  background: var(--bg-panel) !important;
+}
+.groceries-toolbar-btn--danger:hover {
+  background: rgba(239, 68, 68, 0.08) !important;
+  border-color: rgba(239, 68, 68, 0.5) !important;
+  color: var(--danger) !important;
 }
 
 .groceries-section-title {
@@ -58,19 +109,23 @@
 .groceries-row {
   display: flex;
   align-items: center;
-  gap: 0.65rem;
+  gap: 0.75rem;
-  padding: 0.65rem 0.75rem;
+  padding: 0.7rem 0.85rem;
   background: var(--bg-panel);
   border: 1px solid var(--border-light);
-  border-radius: 10px;
+  border-radius: 12px;
-  transition: border-color 0.12s, box-shadow 0.12s;
+  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
 }
 .groceries-row:hover {
   border-color: #cbd5e1;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
 }
 .groceries-row.in-cart {
-  opacity: 0.62;
+  background: linear-gradient(90deg, rgba(34, 197, 94, 0.08) 0%, var(--bg-panel) 48%);
+  border-color: rgba(34, 197, 94, 0.28);
+}
+.groceries-row.in-cart:hover {
+  border-color: rgba(34, 197, 94, 0.45);
 }
 .groceries-row.in-cart .groceries-label {
   text-decoration: line-through;
@@ -78,9 +133,9 @@
 }
 
 .groceries-check {
-  width: 2.25rem;
+  width: 2.5rem;
-  height: 2.25rem;
+  height: 2.5rem;
-  border-radius: 8px;
+  border-radius: 10px;
   border: 2px solid var(--border-light);
   background: var(--bg-page);
   cursor: pointer;
@@ -88,18 +143,29 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.95rem;
+  font-size: 1rem;
+  font-weight: 700;
   color: transparent;
-  transition: background 0.12s, border-color 0.12s, color 0.12s;
+  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.12s;
 }
 .groceries-check:hover {
   border-color: var(--primary);
-  background: #eff6ff;
+  background: rgba(59, 130, 246, 0.08);
 }
+.groceries-check:active {
+  transform: scale(0.96);
+}
+/* Produit validé / dans le caddie — vert franc */
 .groceries-check.checked {
-  background: var(--success);
+  background: linear-gradient(145deg, #22c55e 0%, #16a34a 100%);
-  border-color: var(--success);
+  border-color: #15803d;
   color: #fff;
+  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.28), 0 2px 6px rgba(22, 163, 74, 0.35);
+}
+.groceries-check.checked:hover {
+  background: linear-gradient(145deg, #4ade80 0%, #22c55e 100%);
+  border-color: #166534;
+  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.35), 0 3px 10px rgba(22, 163, 74, 0.4);
 }
 .groceries-check.checked::after {
   content: '✓';
@@ -117,8 +183,9 @@
 
 .groceries-row-actions {
   display: flex;
-  gap: 0.25rem;
+  gap: 0.15rem;
   flex-shrink: 0;
+  align-items: center;
 }
 
 .groceries-empty {
@@ -157,6 +224,9 @@
   border-left-color: var(--danger);
 }
 
+[data-theme='dark'] .groceries-add-card {
+  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
+}
 [data-theme='dark'] .groceries-row {
   background: var(--bg-panel);
   border-color: var(--border-light);
@@ -164,11 +234,18 @@
 [data-theme='dark'] .groceries-row:hover {
   border-color: #484f58;
 }
+[data-theme='dark'] .groceries-row.in-cart {
+  background: linear-gradient(90deg, rgba(34, 197, 94, 0.12) 0%, var(--bg-panel) 50%);
+  border-color: rgba(34, 197, 94, 0.35);
+}
 [data-theme='dark'] .groceries-check {
   border-color: #484f58;
   background: var(--bg-page);
 }
 [data-theme='dark'] .groceries-check:hover {
-  background: rgba(59, 130, 246, 0.15);
+  background: rgba(59, 130, 246, 0.12);
   border-color: var(--primary);
 }
+[data-theme='dark'] .groceries-check.checked {
+  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22), 0 2px 8px rgba(0, 0, 0, 0.35);
+}

modules/groceries/assets/groceries.js

@@ -133,12 +133,20 @@ function rowHtml(i, inCart) {
     escHtml(i.label) +
     '</div>' +
     '<div class="groceries-row-actions">' +
-    '<button type="button" class="btn btn-secondary btn-sm" onclick="editItem(' +
+    '<button type="button" class="btn-icon-action edit" onclick="editItem(' +
     id +
-    ')">✏️</button>' +
+    ')" title="' +
-    '<button type="button" class="btn btn-danger btn-sm" onclick="deleteItem(' +
+    escAttr(T('edit', 'Modifier')) +
+    '" aria-label="' +
+    escAttr(T('edit', 'Modifier')) +
+    '">✏️</button>' +
+    '<button type="button" class="btn-icon-action delete" onclick="deleteItem(' +
     id +
-    ')">🗑️</button>' +
+    ')" title="' +
+    escAttr(T('delete', 'Supprimer')) +
+    '" aria-label="' +
+    escAttr(T('delete', 'Supprimer')) +
+    '">🗑️</button>' +
     '</div></div>'
   );
 }