@dsrc-cm/core 0.1.0

package/src/components/button/button.css

@@ -0,0 +1,805 @@
+/**
+ * DSRC Button Component
+ * Design Systeme de la Republique du Cameroun
+ *
+ * Variants:
+ *   --primary ............. Filled green (default action)
+ *   --secondary ........... Outlined green (secondary action)
+ *   --tertiary ............ Outlined grey (cancel / neutral action)
+ *   --tertiary-no-outline . Text-only, no border (link-like)
+ *   --danger .............. Filled red (destructive action)
+ *   --danger-outline ...... Outlined red (destructive secondary)
+ *   --close ............... Icon-only close button (X)
+ *
+ * Icons:  --icon-left, --icon-right (+ .dsrc-icon-{name} utility)
+ * Specialized: --account, --sort, --print, --share, --notification, --menu, --lang
+ * Sizes:  --sm (32px), default (40px), --lg (48px)
+ * Layout: --icon, --block
+ * State:  --loading, :disabled
+ *
+ * Groups: .dsrc-btns-group (wraps <ul><li><button>)
+ *         --inline, --inline-sm, --inline-md, --inline-lg (responsive)
+ *
+ * Utility: .dsrc-enlarge-link (makes entire container clickable)
+ *
+ * Usage:
+ *   <button class="dsrc-btn dsrc-btn--primary">Confirmer</button>
+ *   <button class="dsrc-btn dsrc-btn--primary dsrc-btn--icon-left dsrc-icon-check">Valider</button>
+ *   <button class="dsrc-btn dsrc-btn--secondary dsrc-btn--icon-right dsrc-icon-arrow-right">Suivant</button>
+ *   <button class="dsrc-btn dsrc-btn--tertiary dsrc-btn--print">Imprimer</button>
+ *   <button class="dsrc-btn dsrc-btn--icon dsrc-btn--notification" aria-label="Notifications">
+ *     <span class="dsrc-btn__badge">3</span>
+ *   </button>
+ *
+ *   <ul class="dsrc-btns-group dsrc-btns-group--inline-md">
+ *     <li><button class="dsrc-btn dsrc-btn--primary">Valider</button></li>
+ *     <li><button class="dsrc-btn dsrc-btn--secondary">Retour</button></li>
+ *   </ul>
+ */
+
+
+/* ============================================
+ * 1. Base button
+ * ============================================ */
+
+.dsrc-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--dsrc-spacing-2);
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-small);
+  font-weight: var(--dsrc-font-weight-medium);
+  line-height: 1;
+  padding: var(--dsrc-spacing-2) var(--dsrc-spacing-5);
+  min-height: 40px;
+  border-radius: var(--dsrc-radius-default);
+  border: var(--dsrc-border-width-default) solid transparent;
+  cursor: pointer;
+  text-decoration: none;
+  transition:
+    background-color var(--dsrc-transition-duration-fast) ease,
+    border-color var(--dsrc-transition-duration-fast) ease,
+    color var(--dsrc-transition-duration-fast) ease;
+  white-space: nowrap;
+}
+
+
+/* ============================================
+ * 2. Focus
+ * ============================================ */
+
+.dsrc-btn:focus-visible {
+  outline: var(--dsrc-outline-width) solid var(--dsrc-color-primaire-focus);
+  outline-offset: var(--dsrc-outline-offset);
+}
+
+
+/* ============================================
+ * 3. Primary variant  (filled green)
+ * ============================================ */
+
+.dsrc-btn--primary {
+  background-color: var(--dsrc-color-primaire);
+  color: var(--dsrc-color-blanc);
+  border-color: var(--dsrc-color-primaire);
+}
+
+.dsrc-btn--primary:hover {
+  background-color: var(--dsrc-color-primaire-fonce);
+  border-color: var(--dsrc-color-primaire-fonce);
+}
+
+.dsrc-btn--primary:active {
+  background-color: var(--dsrc-color-primaire-fonce);
+}
+
+
+/* ============================================
+ * 4. Secondary variant  (outlined green)
+ * ============================================ */
+
+.dsrc-btn--secondary {
+  background-color: transparent;
+  color: var(--dsrc-color-primaire);
+  border-color: var(--dsrc-color-primaire);
+}
+
+.dsrc-btn--secondary:hover {
+  background-color: var(--dsrc-color-primaire-clair);
+}
+
+.dsrc-btn--secondary:active {
+  background-color: var(--dsrc-color-primaire-clair);
+}
+
+
+/* ============================================
+ * 5. Tertiary variant  (outlined grey)
+ * ============================================ */
+
+.dsrc-btn--tertiary {
+  background-color: transparent;
+  color: var(--dsrc-color-noir);
+  border-color: var(--dsrc-color-gris-200);
+}
+
+.dsrc-btn--tertiary:hover {
+  background-color: var(--dsrc-color-gris-100);
+}
+
+.dsrc-btn--tertiary:active {
+  background-color: var(--dsrc-color-gris-200);
+}
+
+
+/* ============================================
+ * 6. Tertiary no-outline variant  (text only)
+ * ============================================ */
+
+.dsrc-btn--tertiary-no-outline {
+  background-color: transparent;
+  color: var(--dsrc-color-primaire);
+  border-color: transparent;
+}
+
+.dsrc-btn--tertiary-no-outline:hover {
+  background-color: var(--dsrc-color-primaire-clair);
+}
+
+.dsrc-btn--tertiary-no-outline:active {
+  background-color: var(--dsrc-color-primaire-clair);
+  color: var(--dsrc-color-primaire-fonce);
+}
+
+
+/* ============================================
+ * 7. Danger variants
+ * ============================================ */
+
+/* Danger filled */
+.dsrc-btn--danger {
+  background-color: var(--dsrc-color-erreur-bordure);
+  color: var(--dsrc-color-blanc);
+  border-color: var(--dsrc-color-erreur-bordure);
+}
+
+.dsrc-btn--danger:hover {
+  background-color: var(--dsrc-color-erreur-texte);
+  border-color: var(--dsrc-color-erreur-texte);
+}
+
+.dsrc-btn--danger:active {
+  background-color: var(--dsrc-color-erreur-texte);
+}
+
+.dsrc-btn--danger:focus-visible {
+  outline-color: var(--dsrc-color-erreur-bordure);
+}
+
+/* Danger outline */
+.dsrc-btn--danger-outline {
+  background-color: transparent;
+  color: var(--dsrc-color-erreur-bordure);
+  border-color: var(--dsrc-color-erreur-bordure);
+}
+
+.dsrc-btn--danger-outline:hover {
+  background-color: var(--dsrc-color-erreur-bordure);
+  color: var(--dsrc-color-blanc);
+}
+
+.dsrc-btn--danger-outline:active {
+  background-color: var(--dsrc-color-erreur-texte);
+  border-color: var(--dsrc-color-erreur-texte);
+  color: var(--dsrc-color-blanc);
+}
+
+.dsrc-btn--danger-outline:focus-visible {
+  outline-color: var(--dsrc-color-erreur-bordure);
+}
+
+
+/* ============================================
+ * 8. Close button  (special purpose)
+ *    Used in: alert, modal, toast
+ *
+ *    <button class="dsrc-btn dsrc-btn--close" aria-label="Fermer">
+ *      <svg ...>X</svg>
+ *    </button>
+ * ============================================ */
+
+.dsrc-btn--close {
+  background-color: transparent;
+  color: var(--dsrc-color-gris-600);
+  border-color: transparent;
+  padding: var(--dsrc-spacing-1);
+  min-height: 0;
+}
+
+.dsrc-btn--close:hover {
+  background-color: var(--dsrc-color-gris-100);
+  color: var(--dsrc-color-noir);
+}
+
+.dsrc-btn--close:active {
+  background-color: var(--dsrc-color-gris-200);
+  color: var(--dsrc-color-noir);
+}
+
+
+/* ============================================
+ * 9. Sizes
+ * ============================================ */
+
+.dsrc-btn--sm {
+  font-size: var(--dsrc-font-size-caption);
+  padding: var(--dsrc-spacing-2) var(--dsrc-spacing-3);
+  min-height: 32px;
+}
+
+.dsrc-btn--lg {
+  font-size: var(--dsrc-font-size-body);
+  padding: var(--dsrc-spacing-3) var(--dsrc-spacing-5);
+  min-height: 48px;
+}
+
+
+/* ============================================
+ * 10. Icon-only button
+ * ============================================ */
+
+.dsrc-btn--icon {
+  padding: var(--dsrc-spacing-2);
+  min-width: 40px;
+}
+
+.dsrc-btn--icon.dsrc-btn--sm {
+  padding: var(--dsrc-spacing-2);
+  min-width: 32px;
+}
+
+.dsrc-btn--icon.dsrc-btn--lg {
+  padding: var(--dsrc-spacing-3);
+  min-width: 48px;
+}
+
+
+/* ============================================
+ * 11. Icon-left / Icon-right buttons
+ *
+ * The icon is provided via --dsrc-btn-icon
+ * custom property, set by a .dsrc-icon-{name}
+ * class or an inline style.
+ *
+ *   <button class="dsrc-btn dsrc-btn--primary dsrc-btn--icon-left dsrc-icon-check">
+ *     Valider
+ *   </button>
+ *
+ *   <button class="dsrc-btn dsrc-btn--secondary dsrc-btn--icon-right dsrc-icon-arrow-right">
+ *     Suivant
+ *   </button>
+ *
+ *   <!-- Custom icon via inline style -->
+ *   <button class="dsrc-btn dsrc-btn--primary dsrc-btn--icon-left"
+ *           style="--dsrc-btn-icon: url('data:image/svg+xml,...')">
+ *     Action
+ *   </button>
+ * ============================================ */
+
+.dsrc-btn--icon-left::before,
+.dsrc-btn--icon-right::after {
+  content: '';
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  background-color: currentColor;
+  -webkit-mask-image: var(--dsrc-btn-icon);
+  mask-image: var(--dsrc-btn-icon);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-position: center;
+  mask-position: center;
+}
+
+
+/* ============================================
+ * 12. Icon definitions
+ *
+ * Utility classes that set --dsrc-btn-icon.
+ * Reusable on buttons, links, or any element.
+ * ============================================ */
+
+/* Arrow left (back navigation) */
+.dsrc-icon-arrow-left {
+  --dsrc-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M10 3L5 8l5 5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+/* Arrow right (forward navigation) */
+.dsrc-icon-arrow-right {
+  --dsrc-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M6 3l5 5-5 5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+/* Download */
+.dsrc-icon-download {
+  --dsrc-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M8 2v8M8 10L4.5 6.5M8 10l3.5-3.5M3 14h10' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+/* External link */
+.dsrc-icon-external {
+  --dsrc-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M13 9v4a1 1 0 01-1 1H4a1 1 0 01-1-1V5a1 1 0 011-1h4M9 2h5v5M14 2L7 9' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+/* Add / plus */
+.dsrc-icon-add {
+  --dsrc-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M8 3v10M3 8h10' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+}
+
+/* Close / X */
+.dsrc-icon-close {
+  --dsrc-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+}
+
+/* Search / magnifying glass */
+.dsrc-icon-search {
+  --dsrc-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Ccircle cx='7' cy='7' r='4.5' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M10.5 10.5L14 14' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+}
+
+/* Check / validation */
+.dsrc-icon-check {
+  --dsrc-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+
+/* ============================================
+ * 13. Specialized button types
+ *
+ * Pre-configured buttons for Cameroon government
+ * portal actions. Each type embeds its icon
+ * via mask-image on ::before.
+ *
+ * Text+icon types (combine with any variant):
+ *   <button class="dsrc-btn dsrc-btn--secondary dsrc-btn--account">Mon compte</button>
+ *   <button class="dsrc-btn dsrc-btn--tertiary dsrc-btn--print">Imprimer</button>
+ *   <button class="dsrc-btn dsrc-btn--secondary dsrc-btn--share">Partager</button>
+ *   <button class="dsrc-btn dsrc-btn--tertiary dsrc-btn--lang">FR</button>
+ *
+ * Icon-only types (combine with --icon):
+ *   <button class="dsrc-btn dsrc-btn--icon dsrc-btn--tertiary dsrc-btn--sort" aria-label="Trier"></button>
+ *   <button class="dsrc-btn dsrc-btn--icon dsrc-btn--tertiary dsrc-btn--menu" aria-label="Menu"></button>
+ *   <button class="dsrc-btn dsrc-btn--icon dsrc-btn--tertiary dsrc-btn--notification" aria-label="Notifications">
+ *     <span class="dsrc-btn__badge">3</span>
+ *   </button>
+ * ============================================ */
+
+/* Shared pseudo-element base for text+icon types */
+.dsrc-btn--account::before,
+.dsrc-btn--print::before,
+.dsrc-btn--share::before,
+.dsrc-btn--lang::before {
+  content: '';
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  background-color: currentColor;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-position: center;
+  mask-position: center;
+}
+
+/* Shared pseudo-element base for icon-only types */
+.dsrc-btn--sort::before,
+.dsrc-btn--notification::before,
+.dsrc-btn--menu::before {
+  content: '';
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+  background-color: currentColor;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-position: center;
+  mask-position: center;
+}
+
+/* -- Account (user silhouette) -- */
+.dsrc-btn--account::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Ccircle cx='8' cy='5' r='3' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M2.5 14c0-2.5 2.5-4 5.5-4s5.5 1.5 5.5 4' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Ccircle cx='8' cy='5' r='3' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M2.5 14c0-2.5 2.5-4 5.5-4s5.5 1.5 5.5 4' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+}
+
+/* -- Print (printer) -- */
+.dsrc-btn--print::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M4 6V2h8v4M4 12H2V8h12v4h-2M4 10h8v4H4v-4z' stroke='currentColor' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M4 6V2h8v4M4 12H2V8h12v4h-2M4 10h8v4H4v-4z' stroke='currentColor' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+/* -- Share (3 connected nodes) -- */
+.dsrc-btn--share::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Ccircle cx='12' cy='4' r='2' stroke='currentColor' stroke-width='1.5'/%3E%3Ccircle cx='4' cy='8' r='2' stroke='currentColor' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='12' r='2' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M6 7l4-2M6 9l4 2' stroke='currentColor' stroke-width='1.5'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Ccircle cx='12' cy='4' r='2' stroke='currentColor' stroke-width='1.5'/%3E%3Ccircle cx='4' cy='8' r='2' stroke='currentColor' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='12' r='2' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M6 7l4-2M6 9l4 2' stroke='currentColor' stroke-width='1.5'/%3E%3C/svg%3E");
+}
+
+/* -- Lang (globe for bilingual FR/EN) -- */
+.dsrc-btn--lang::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Ccircle cx='8' cy='8' r='6' stroke='currentColor' stroke-width='1.5'/%3E%3Cellipse cx='8' cy='8' rx='3' ry='6' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M2 8h12' stroke='currentColor' stroke-width='1.5'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Ccircle cx='8' cy='8' r='6' stroke='currentColor' stroke-width='1.5'/%3E%3Cellipse cx='8' cy='8' rx='3' ry='6' stroke='currentColor' stroke-width='1.5'/%3E%3Cpath d='M2 8h12' stroke='currentColor' stroke-width='1.5'/%3E%3C/svg%3E");
+}
+
+/* -- Sort (double arrow up/down) -- */
+.dsrc-btn--sort::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M8 2l3 4H5l3-4zM8 14l-3-4h6l-3 4z' stroke='currentColor' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M8 2l3 4H5l3-4zM8 14l-3-4h6l-3 4z' stroke='currentColor' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+/* -- Notification (bell) -- */
+.dsrc-btn--notification {
+  position: relative;
+}
+
+.dsrc-btn--notification::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M8 1.5a4.5 4.5 0 00-4.5 4.5v3l-1 2h11l-1-2V6A4.5 4.5 0 008 1.5zM6.5 13a1.5 1.5 0 003 0' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M8 1.5a4.5 4.5 0 00-4.5 4.5v3l-1 2h11l-1-2V6A4.5 4.5 0 008 1.5zM6.5 13a1.5 1.5 0 003 0' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+/* -- Menu (hamburger 3 lines) -- */
+.dsrc-btn--menu::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M2 4h12M2 8h12M2 12h12' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M2 4h12M2 8h12M2 12h12' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+}
+
+/* Notification badge (counter overlay) */
+.dsrc-btn__badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  font-size: var(--dsrc-font-size-nano);
+  font-weight: var(--dsrc-font-weight-bold);
+  line-height: 1;
+  color: var(--dsrc-color-blanc);
+  background-color: var(--dsrc-color-erreur-bordure);
+  border-radius: var(--dsrc-radius-round);
+}
+
+/* Empty badge (just a dot indicator) */
+.dsrc-btn__badge:empty {
+  min-width: 8px;
+  height: 8px;
+  padding: 0;
+}
+
+
+/* ============================================
+ * 14. Block / full-width button
+ * ============================================ */
+
+.dsrc-btn--block {
+  width: 100%;
+  justify-content: center;
+}
+
+
+/* ============================================
+ * 15. Disabled state
+ * ============================================ */
+
+.dsrc-btn:disabled,
+.dsrc-btn[aria-disabled="true"],
+.dsrc-btn--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+
+/* ============================================
+ * 16. Loading state
+ * ============================================ */
+
+.dsrc-btn--loading {
+  pointer-events: none;
+  position: relative;
+  color: transparent;
+}
+
+.dsrc-btn--loading::after {
+  content: "";
+  position: absolute;
+  width: 1em;
+  height: 1em;
+  border: var(--dsrc-border-width-default) solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: dsrc-btn-spin 0.6s linear infinite;
+}
+
+/* Spinner color per variant */
+.dsrc-btn--primary.dsrc-btn--loading::after {
+  border-color: var(--dsrc-color-blanc);
+  border-right-color: transparent;
+}
+
+.dsrc-btn--secondary.dsrc-btn--loading::after,
+.dsrc-btn--tertiary-no-outline.dsrc-btn--loading::after {
+  border-color: var(--dsrc-color-primaire);
+  border-right-color: transparent;
+}
+
+.dsrc-btn--tertiary.dsrc-btn--loading::after {
+  border-color: var(--dsrc-color-noir);
+  border-right-color: transparent;
+}
+
+.dsrc-btn--danger.dsrc-btn--loading::after {
+  border-color: var(--dsrc-color-blanc);
+  border-right-color: transparent;
+}
+
+.dsrc-btn--danger-outline.dsrc-btn--loading::after {
+  border-color: var(--dsrc-color-erreur-bordure);
+  border-right-color: transparent;
+}
+
+@keyframes dsrc-btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+
+/* ============================================
+ * 17. Button group  (<ul> wrapper)
+ *
+ *  <ul class="dsrc-btns-group dsrc-btns-group--inline">
+ *    <li><button class="dsrc-btn dsrc-btn--primary">OK</button></li>
+ *    <li><button class="dsrc-btn dsrc-btn--secondary">Annuler</button></li>
+ *  </ul>
+ * ============================================ */
+
+.dsrc-btns-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dsrc-spacing-2);
+  align-items: center;
+  padding: 0;
+  margin: 0;
+}
+
+.dsrc-btns-group li {
+  list-style: none;
+  display: flex;
+}
+
+/* Direction modifiers */
+.dsrc-btns-group--inline {
+  flex-direction: row;
+}
+
+.dsrc-btns-group--inline-reverse {
+  flex-direction: row-reverse;
+}
+
+/* Vertical stack */
+.dsrc-btns-group--vertical {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+/* Alignment modifiers */
+.dsrc-btns-group--right {
+  justify-content: flex-end;
+}
+
+.dsrc-btns-group--center {
+  justify-content: center;
+}
+
+/* Equisized: all buttons take equal width */
+.dsrc-btns-group--equisized .dsrc-btn {
+  flex: 1;
+  justify-content: center;
+}
+
+/* Size modifiers propagated to group children */
+.dsrc-btns-group--sm .dsrc-btn {
+  font-size: var(--dsrc-font-size-caption);
+  padding: var(--dsrc-spacing-2) var(--dsrc-spacing-3);
+  min-height: 32px;
+}
+
+.dsrc-btns-group--lg .dsrc-btn {
+  font-size: var(--dsrc-font-size-body);
+  padding: var(--dsrc-spacing-3) var(--dsrc-spacing-5);
+  min-height: 48px;
+}
+
+
+/* ============================================
+ * 18. Responsive button groups
+ *
+ * Mobile-first: vertical (stacked, full-width).
+ * Above breakpoint: horizontal (inline).
+ *
+ *   <ul class="dsrc-btns-group dsrc-btns-group--inline-sm">...</ul>
+ *   <ul class="dsrc-btns-group dsrc-btns-group--inline-md">...</ul>
+ *   <ul class="dsrc-btns-group dsrc-btns-group--inline-lg">...</ul>
+ * ============================================ */
+
+/* Base state: vertical */
+.dsrc-btns-group--inline-sm,
+.dsrc-btns-group--inline-md,
+.dsrc-btns-group--inline-lg {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.dsrc-btns-group--inline-sm .dsrc-btn,
+.dsrc-btns-group--inline-md .dsrc-btn,
+.dsrc-btns-group--inline-lg .dsrc-btn {
+  width: 100%;
+  justify-content: center;
+}
+
+/* sm breakpoint (>= 576px) */
+@media (min-width: 576px) {
+  .dsrc-btns-group--inline-sm {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .dsrc-btns-group--inline-sm .dsrc-btn {
+    width: auto;
+  }
+}
+
+/* md breakpoint (>= 768px) */
+@media (min-width: 768px) {
+  .dsrc-btns-group--inline-md {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .dsrc-btns-group--inline-md .dsrc-btn {
+    width: auto;
+  }
+}
+
+/* lg breakpoint (>= 1024px) */
+@media (min-width: 1024px) {
+  .dsrc-btns-group--inline-lg {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .dsrc-btns-group--inline-lg .dsrc-btn {
+    width: auto;
+  }
+}
+
+
+/* ============================================
+ * 19. Enlarge-link utility  (DSFR pattern)
+ *
+ * Makes the entire container clickable via the
+ * first <a> or <button> inside it.
+ *
+ *  <div class="dsrc-card dsrc-enlarge-link">
+ *    <a href="/page">Titre du lien</a>
+ *    <p>Description...</p>
+ *  </div>
+ * ============================================ */
+
+.dsrc-enlarge-link {
+  position: relative;
+}
+
+.dsrc-enlarge-link a::after,
+.dsrc-enlarge-link button::after {
+  content: "";
+  display: block;
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
+/* Only the first link/button gets the enlarged click area */
+.dsrc-enlarge-link a ~ a::after,
+.dsrc-enlarge-link a ~ button::after,
+.dsrc-enlarge-link button ~ a::after,
+.dsrc-enlarge-link button ~ button::after {
+  content: none;
+}
+
+/* Ensure secondary interactive elements sit above the overlay */
+.dsrc-enlarge-link a ~ a,
+.dsrc-enlarge-link a ~ button,
+.dsrc-enlarge-link button ~ a,
+.dsrc-enlarge-link button ~ button {
+  position: relative;
+  z-index: 2;
+}
+
+
+/* ============================================
+ * 20. High contrast (forced-colors)
+ * ============================================ */
+
+@media (forced-colors: active) {
+  .dsrc-btn {
+    border: 2px solid ButtonText;
+  }
+
+  .dsrc-btn--tertiary-no-outline {
+    border-color: ButtonText;
+  }
+
+  .dsrc-btn:disabled,
+  .dsrc-btn[aria-disabled="true"],
+  .dsrc-btn--disabled {
+    border-color: GrayText;
+    color: GrayText;
+    opacity: 1;
+  }
+
+  .dsrc-btn:focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+
+  .dsrc-btn--loading::after {
+    border-color: ButtonText;
+    border-right-color: transparent;
+  }
+
+  /* Icon pseudo-elements */
+  .dsrc-btn--icon-left::before,
+  .dsrc-btn--icon-right::after,
+  .dsrc-btn--account::before,
+  .dsrc-btn--print::before,
+  .dsrc-btn--share::before,
+  .dsrc-btn--lang::before,
+  .dsrc-btn--sort::before,
+  .dsrc-btn--notification::before,
+  .dsrc-btn--menu::before {
+    background-color: ButtonText;
+  }
+
+  /* Notification badge */
+  .dsrc-btn__badge {
+    border: 1px solid ButtonText;
+    forced-color-adjust: none;
+  }
+}
+
+
+/* ============================================
+ * 21. Reduced motion
+ * ============================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  .dsrc-btn {
+    transition: none;
+  }
+
+  .dsrc-btn--loading::after {
+    animation: none;
+    border-right-color: currentColor;
+    opacity: 0.5;
+  }
+}