diff --git a/modules/gift-list/gift-list.css b/modules/gift-list/gift-list.css index 05d7159..2e3edee 100644 --- a/modules/gift-list/gift-list.css +++ b/modules/gift-list/gift-list.css @@ -103,6 +103,7 @@ background: #f8fafc; border-bottom: 1px solid #e5e7eb; font-size: 13px; + padding-right: 64px; } /* Bouton + dans le caption */ @@ -111,21 +112,58 @@ right: 8px; top: 50%; transform: translateY(-50%); - width: 22px; - height: 22px; + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + color: #243b53; + font-size: 15px; + font-weight: 700; + line-height: 1; + background: transparent; + border: none; + cursor: pointer; + isolation: isolate; +} + +.cl-child-add-btn::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 24px; + height: 24px; border-radius: 50%; border: 1px solid #d9e2ec; background: #f0f4f8; - color: #243b53; - font-size: 13px; - line-height: 20px; - text-align: center; - padding: 0; - cursor: pointer; + pointer-events: none; + z-index: -1; } -.cl-child-add-btn:hover { + +/* Hover/focus: même feedback visuel */ +.cl-child-add-btn:hover::before, +.cl-child-add-btn:focus-visible::before { background: #d9e2ec; } +/* Accessibilité focus clavier sur le hit-area */ +.cl-child-add-btn:focus-visible { + outline: 2px solid #2563eb; + outline-offset: 2px; + border-radius: 8px; /* outline carré autour du hit-area */ +} + +@media (pointer: coarse) { + .cl-child-add-btn { + width: 56px; + height: 56px; + font-size: 22px; + } + .cl-child-table caption { + padding-right: 72px; + } +} /* Colonnes égales (3 adultes) via colgroup */ .cl-child-table col.cl-col {