@dsrc-cm/core 0.1.0

package/src/layout/navigation/navigation.css

@@ -0,0 +1,206 @@
+/**
+ * DSRC Navigation Component
+ *
+ * Barre de navigation principale du site. Horizontale et defilante sur
+ * desktop, repliable via un bouton hamburger sur mobile.
+ *
+ * Usage:
+ * <nav class="dsrc-nav" aria-label="Navigation principale">
+ *   <div class="dsrc-nav__inner">
+ *     <button class="dsrc-nav__toggle"
+ *             aria-expanded="false"
+ *             aria-controls="dsrc-nav-list">
+ *       <span class="dsrc-nav__toggle-icon" aria-hidden="true"></span>
+ *       Menu
+ *     </button>
+ *     <ul class="dsrc-nav__list" id="dsrc-nav-list" role="list">
+ *       <li><a href="/" class="dsrc-nav__link dsrc-nav__link--actif" aria-current="page">Accueil</a></li>
+ *       <li><a href="/page" class="dsrc-nav__link">Page</a></li>
+ *     </ul>
+ *   </div>
+ * </nav>
+ */
+
+/* ---------------------------------------------------------------------------
+ * Nav root
+ * ------------------------------------------------------------------------ */
+
+.dsrc-nav {
+  border-bottom: var(--dsrc-border-width-thick) solid var(--dsrc-color-primaire);
+}
+
+/* ---------------------------------------------------------------------------
+ * Inner container
+ * ------------------------------------------------------------------------ */
+
+.dsrc-nav__inner {
+  max-width: var(--dsrc-layout-max-width);
+  margin: 0 auto;
+  padding: 0 var(--dsrc-spacing-5);
+  display: flex;
+  align-items: center;
+}
+
+/* ---------------------------------------------------------------------------
+ * Toggle button (hidden on desktop, visible on mobile)
+ * ------------------------------------------------------------------------ */
+
+.dsrc-nav__toggle {
+  display: none;
+  align-items: center;
+  gap: var(--dsrc-spacing-2);
+  padding: var(--dsrc-spacing-3) 0;
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-small);
+  font-weight: var(--dsrc-font-weight-semibold);
+  color: var(--dsrc-color-noir);
+  background: none;
+  border: none;
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.dsrc-nav__toggle:focus-visible {
+  outline: var(--dsrc-outline-width) solid var(--dsrc-color-primaire-focus);
+  outline-offset: var(--dsrc-outline-offset);
+}
+
+/* Hamburger icon: three horizontal bars built with CSS */
+.dsrc-nav__toggle-icon {
+  position: relative;
+  display: block;
+  width: 18px;
+  height: 2px;
+  background-color: currentColor;
+  transition: background-color var(--dsrc-transition-duration-fast) ease;
+}
+
+.dsrc-nav__toggle-icon::before,
+.dsrc-nav__toggle-icon::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: currentColor;
+  transition: transform var(--dsrc-transition-duration-normal) ease;
+}
+
+.dsrc-nav__toggle-icon::before {
+  top: -6px;
+}
+
+.dsrc-nav__toggle-icon::after {
+  top: 6px;
+}
+
+/* When expanded, morph bars into a close "X" */
+.dsrc-nav__toggle[aria-expanded="true"] .dsrc-nav__toggle-icon {
+  background-color: transparent;
+}
+
+.dsrc-nav__toggle[aria-expanded="true"] .dsrc-nav__toggle-icon::before {
+  top: 0;
+  transform: rotate(45deg);
+}
+
+.dsrc-nav__toggle[aria-expanded="true"] .dsrc-nav__toggle-icon::after {
+  top: 0;
+  transform: rotate(-45deg);
+}
+
+/* ---------------------------------------------------------------------------
+ * Link list
+ * ------------------------------------------------------------------------ */
+
+.dsrc-nav__list {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* ---------------------------------------------------------------------------
+ * Individual nav link
+ * ------------------------------------------------------------------------ */
+
+.dsrc-nav__link {
+  display: block;
+  font-family: var(--dsrc-font-family-sans);
+  font-size: var(--dsrc-font-size-small);
+  font-weight: var(--dsrc-font-weight-medium);
+  color: var(--dsrc-color-gris-700);
+  text-decoration: none;
+  padding: var(--dsrc-spacing-3) var(--dsrc-spacing-4);
+  border-bottom: var(--dsrc-border-width-thick) solid transparent;
+  margin-bottom: calc(-1 * var(--dsrc-border-width-thick));
+  white-space: nowrap;
+  transition: color var(--dsrc-transition-duration-fast) ease;
+}
+
+.dsrc-nav__link:hover {
+  color: var(--dsrc-color-primaire);
+}
+
+/* Active state: selected link or aria-current */
+.dsrc-nav__link--actif,
+.dsrc-nav__link[aria-current="page"] {
+  color: var(--dsrc-color-primaire);
+  border-bottom-color: var(--dsrc-color-primaire);
+  font-weight: var(--dsrc-font-weight-semibold);
+}
+
+.dsrc-nav__link:focus-visible {
+  outline: var(--dsrc-outline-width) solid var(--dsrc-color-primaire-focus);
+  outline-offset: calc(-1 * var(--dsrc-outline-offset));
+}
+
+/* ---------------------------------------------------------------------------
+ * Mobile responsive (< 768px)
+ * ------------------------------------------------------------------------ */
+
+@media (max-width: 768px) {
+  .dsrc-nav__inner {
+    flex-wrap: wrap;
+  }
+
+  /* Show the hamburger toggle */
+  .dsrc-nav__toggle {
+    display: flex;
+  }
+
+  /* Collapsed by default on mobile */
+  .dsrc-nav__list {
+    display: none;
+    flex-direction: column;
+    width: 100%;
+    overflow-x: visible;
+    border-top: var(--dsrc-border-width-thin) solid var(--dsrc-color-gris-200);
+    padding: var(--dsrc-spacing-2) 0;
+  }
+
+  /* Expanded state driven by aria-expanded on the toggle */
+  .dsrc-nav__toggle[aria-expanded="true"] + .dsrc-nav__list,
+  .dsrc-nav__toggle[aria-expanded="true"] ~ .dsrc-nav__list {
+    display: flex;
+  }
+
+  /* Links stack vertically with full-width tap targets */
+  .dsrc-nav__link {
+    border-bottom: none;
+    border-left: var(--dsrc-border-width-thick) solid transparent;
+    margin-bottom: 0;
+    padding: var(--dsrc-spacing-3) var(--dsrc-spacing-4);
+    white-space: normal;
+  }
+
+  .dsrc-nav__link--actif,
+  .dsrc-nav__link[aria-current="page"] {
+    border-bottom: none;
+    border-left-color: var(--dsrc-color-primaire);
+    background-color: var(--dsrc-color-primaire-clair);
+  }
+}

package/src/utilities/utilities.css

@@ -0,0 +1,430 @@
+/**
+ * DSRC - Utility Classes
+ *
+ * Classes utilitaires du Design Systeme de la Republique du Cameroun.
+ * Toutes les classes utilisent le prefixe `dsrc-` et appliquent `!important`
+ * conformement aux conventions des systemes de design gouvernementaux (DSFR).
+ *
+ * Sommaire :
+ *   1. Spacing (margin, padding)
+ *   2. Text (alignment, weight, size, transform)
+ *   3. Display
+ *   4. Flex
+ *   5. Color (background, text)
+ *   6. Border
+ *   7. Visibility / Accessibility
+ *   8. Responsive display (md, lg)
+ */
+
+
+/* ==========================================================================
+   1. SPACING UTILITIES
+   Margin and padding using the 4px grid system (--dsrc-spacing-{1-8}).
+   Scale: 0=0, 1=4px, 2=8px, 3=12px, 4=16px, 5=24px, 6=32px, 7=48px, 8=64px
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   1.1 Margin - all sides
+   -------------------------------------------------------------------------- */
+
+.dsrc-m-0  { margin: 0 !important; }
+.dsrc-m-1  { margin: var(--dsrc-spacing-1) !important; }
+.dsrc-m-2  { margin: var(--dsrc-spacing-2) !important; }
+.dsrc-m-3  { margin: var(--dsrc-spacing-3) !important; }
+.dsrc-m-4  { margin: var(--dsrc-spacing-4) !important; }
+.dsrc-m-5  { margin: var(--dsrc-spacing-5) !important; }
+.dsrc-m-6  { margin: var(--dsrc-spacing-6) !important; }
+.dsrc-m-7  { margin: var(--dsrc-spacing-7) !important; }
+.dsrc-m-8  { margin: var(--dsrc-spacing-8) !important; }
+
+/* --------------------------------------------------------------------------
+   1.2 Margin - top
+   -------------------------------------------------------------------------- */
+
+.dsrc-mt-0 { margin-top: 0 !important; }
+.dsrc-mt-1 { margin-top: var(--dsrc-spacing-1) !important; }
+.dsrc-mt-2 { margin-top: var(--dsrc-spacing-2) !important; }
+.dsrc-mt-3 { margin-top: var(--dsrc-spacing-3) !important; }
+.dsrc-mt-4 { margin-top: var(--dsrc-spacing-4) !important; }
+.dsrc-mt-5 { margin-top: var(--dsrc-spacing-5) !important; }
+.dsrc-mt-6 { margin-top: var(--dsrc-spacing-6) !important; }
+.dsrc-mt-7 { margin-top: var(--dsrc-spacing-7) !important; }
+.dsrc-mt-8 { margin-top: var(--dsrc-spacing-8) !important; }
+
+/* --------------------------------------------------------------------------
+   1.3 Margin - right
+   -------------------------------------------------------------------------- */
+
+.dsrc-mr-0 { margin-right: 0 !important; }
+.dsrc-mr-1 { margin-right: var(--dsrc-spacing-1) !important; }
+.dsrc-mr-2 { margin-right: var(--dsrc-spacing-2) !important; }
+.dsrc-mr-3 { margin-right: var(--dsrc-spacing-3) !important; }
+.dsrc-mr-4 { margin-right: var(--dsrc-spacing-4) !important; }
+.dsrc-mr-5 { margin-right: var(--dsrc-spacing-5) !important; }
+.dsrc-mr-6 { margin-right: var(--dsrc-spacing-6) !important; }
+.dsrc-mr-7 { margin-right: var(--dsrc-spacing-7) !important; }
+.dsrc-mr-8 { margin-right: var(--dsrc-spacing-8) !important; }
+
+/* --------------------------------------------------------------------------
+   1.4 Margin - bottom
+   -------------------------------------------------------------------------- */
+
+.dsrc-mb-0 { margin-bottom: 0 !important; }
+.dsrc-mb-1 { margin-bottom: var(--dsrc-spacing-1) !important; }
+.dsrc-mb-2 { margin-bottom: var(--dsrc-spacing-2) !important; }
+.dsrc-mb-3 { margin-bottom: var(--dsrc-spacing-3) !important; }
+.dsrc-mb-4 { margin-bottom: var(--dsrc-spacing-4) !important; }
+.dsrc-mb-5 { margin-bottom: var(--dsrc-spacing-5) !important; }
+.dsrc-mb-6 { margin-bottom: var(--dsrc-spacing-6) !important; }
+.dsrc-mb-7 { margin-bottom: var(--dsrc-spacing-7) !important; }
+.dsrc-mb-8 { margin-bottom: var(--dsrc-spacing-8) !important; }
+
+/* --------------------------------------------------------------------------
+   1.5 Margin - left
+   -------------------------------------------------------------------------- */
+
+.dsrc-ml-0 { margin-left: 0 !important; }
+.dsrc-ml-1 { margin-left: var(--dsrc-spacing-1) !important; }
+.dsrc-ml-2 { margin-left: var(--dsrc-spacing-2) !important; }
+.dsrc-ml-3 { margin-left: var(--dsrc-spacing-3) !important; }
+.dsrc-ml-4 { margin-left: var(--dsrc-spacing-4) !important; }
+.dsrc-ml-5 { margin-left: var(--dsrc-spacing-5) !important; }
+.dsrc-ml-6 { margin-left: var(--dsrc-spacing-6) !important; }
+.dsrc-ml-7 { margin-left: var(--dsrc-spacing-7) !important; }
+.dsrc-ml-8 { margin-left: var(--dsrc-spacing-8) !important; }
+
+/* --------------------------------------------------------------------------
+   1.6 Margin - horizontal (left + right)
+   -------------------------------------------------------------------------- */
+
+.dsrc-mx-0 { margin-right: 0 !important; margin-left: 0 !important; }
+.dsrc-mx-1 { margin-right: var(--dsrc-spacing-1) !important; margin-left: var(--dsrc-spacing-1) !important; }
+.dsrc-mx-2 { margin-right: var(--dsrc-spacing-2) !important; margin-left: var(--dsrc-spacing-2) !important; }
+.dsrc-mx-3 { margin-right: var(--dsrc-spacing-3) !important; margin-left: var(--dsrc-spacing-3) !important; }
+.dsrc-mx-4 { margin-right: var(--dsrc-spacing-4) !important; margin-left: var(--dsrc-spacing-4) !important; }
+.dsrc-mx-5 { margin-right: var(--dsrc-spacing-5) !important; margin-left: var(--dsrc-spacing-5) !important; }
+.dsrc-mx-6 { margin-right: var(--dsrc-spacing-6) !important; margin-left: var(--dsrc-spacing-6) !important; }
+.dsrc-mx-7 { margin-right: var(--dsrc-spacing-7) !important; margin-left: var(--dsrc-spacing-7) !important; }
+.dsrc-mx-8 { margin-right: var(--dsrc-spacing-8) !important; margin-left: var(--dsrc-spacing-8) !important; }
+
+/* --------------------------------------------------------------------------
+   1.7 Margin - vertical (top + bottom)
+   -------------------------------------------------------------------------- */
+
+.dsrc-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
+.dsrc-my-1 { margin-top: var(--dsrc-spacing-1) !important; margin-bottom: var(--dsrc-spacing-1) !important; }
+.dsrc-my-2 { margin-top: var(--dsrc-spacing-2) !important; margin-bottom: var(--dsrc-spacing-2) !important; }
+.dsrc-my-3 { margin-top: var(--dsrc-spacing-3) !important; margin-bottom: var(--dsrc-spacing-3) !important; }
+.dsrc-my-4 { margin-top: var(--dsrc-spacing-4) !important; margin-bottom: var(--dsrc-spacing-4) !important; }
+.dsrc-my-5 { margin-top: var(--dsrc-spacing-5) !important; margin-bottom: var(--dsrc-spacing-5) !important; }
+.dsrc-my-6 { margin-top: var(--dsrc-spacing-6) !important; margin-bottom: var(--dsrc-spacing-6) !important; }
+.dsrc-my-7 { margin-top: var(--dsrc-spacing-7) !important; margin-bottom: var(--dsrc-spacing-7) !important; }
+.dsrc-my-8 { margin-top: var(--dsrc-spacing-8) !important; margin-bottom: var(--dsrc-spacing-8) !important; }
+
+/* --------------------------------------------------------------------------
+   1.8 Padding - all sides
+   -------------------------------------------------------------------------- */
+
+.dsrc-p-0  { padding: 0 !important; }
+.dsrc-p-1  { padding: var(--dsrc-spacing-1) !important; }
+.dsrc-p-2  { padding: var(--dsrc-spacing-2) !important; }
+.dsrc-p-3  { padding: var(--dsrc-spacing-3) !important; }
+.dsrc-p-4  { padding: var(--dsrc-spacing-4) !important; }
+.dsrc-p-5  { padding: var(--dsrc-spacing-5) !important; }
+.dsrc-p-6  { padding: var(--dsrc-spacing-6) !important; }
+.dsrc-p-7  { padding: var(--dsrc-spacing-7) !important; }
+.dsrc-p-8  { padding: var(--dsrc-spacing-8) !important; }
+
+/* --------------------------------------------------------------------------
+   1.9 Padding - top
+   -------------------------------------------------------------------------- */
+
+.dsrc-pt-0 { padding-top: 0 !important; }
+.dsrc-pt-1 { padding-top: var(--dsrc-spacing-1) !important; }
+.dsrc-pt-2 { padding-top: var(--dsrc-spacing-2) !important; }
+.dsrc-pt-3 { padding-top: var(--dsrc-spacing-3) !important; }
+.dsrc-pt-4 { padding-top: var(--dsrc-spacing-4) !important; }
+.dsrc-pt-5 { padding-top: var(--dsrc-spacing-5) !important; }
+.dsrc-pt-6 { padding-top: var(--dsrc-spacing-6) !important; }
+.dsrc-pt-7 { padding-top: var(--dsrc-spacing-7) !important; }
+.dsrc-pt-8 { padding-top: var(--dsrc-spacing-8) !important; }
+
+/* --------------------------------------------------------------------------
+   1.10 Padding - right
+   -------------------------------------------------------------------------- */
+
+.dsrc-pr-0 { padding-right: 0 !important; }
+.dsrc-pr-1 { padding-right: var(--dsrc-spacing-1) !important; }
+.dsrc-pr-2 { padding-right: var(--dsrc-spacing-2) !important; }
+.dsrc-pr-3 { padding-right: var(--dsrc-spacing-3) !important; }
+.dsrc-pr-4 { padding-right: var(--dsrc-spacing-4) !important; }
+.dsrc-pr-5 { padding-right: var(--dsrc-spacing-5) !important; }
+.dsrc-pr-6 { padding-right: var(--dsrc-spacing-6) !important; }
+.dsrc-pr-7 { padding-right: var(--dsrc-spacing-7) !important; }
+.dsrc-pr-8 { padding-right: var(--dsrc-spacing-8) !important; }
+
+/* --------------------------------------------------------------------------
+   1.11 Padding - bottom
+   -------------------------------------------------------------------------- */
+
+.dsrc-pb-0 { padding-bottom: 0 !important; }
+.dsrc-pb-1 { padding-bottom: var(--dsrc-spacing-1) !important; }
+.dsrc-pb-2 { padding-bottom: var(--dsrc-spacing-2) !important; }
+.dsrc-pb-3 { padding-bottom: var(--dsrc-spacing-3) !important; }
+.dsrc-pb-4 { padding-bottom: var(--dsrc-spacing-4) !important; }
+.dsrc-pb-5 { padding-bottom: var(--dsrc-spacing-5) !important; }
+.dsrc-pb-6 { padding-bottom: var(--dsrc-spacing-6) !important; }
+.dsrc-pb-7 { padding-bottom: var(--dsrc-spacing-7) !important; }
+.dsrc-pb-8 { padding-bottom: var(--dsrc-spacing-8) !important; }
+
+/* --------------------------------------------------------------------------
+   1.12 Padding - left
+   -------------------------------------------------------------------------- */
+
+.dsrc-pl-0 { padding-left: 0 !important; }
+.dsrc-pl-1 { padding-left: var(--dsrc-spacing-1) !important; }
+.dsrc-pl-2 { padding-left: var(--dsrc-spacing-2) !important; }
+.dsrc-pl-3 { padding-left: var(--dsrc-spacing-3) !important; }
+.dsrc-pl-4 { padding-left: var(--dsrc-spacing-4) !important; }
+.dsrc-pl-5 { padding-left: var(--dsrc-spacing-5) !important; }
+.dsrc-pl-6 { padding-left: var(--dsrc-spacing-6) !important; }
+.dsrc-pl-7 { padding-left: var(--dsrc-spacing-7) !important; }
+.dsrc-pl-8 { padding-left: var(--dsrc-spacing-8) !important; }
+
+/* --------------------------------------------------------------------------
+   1.13 Padding - horizontal (left + right)
+   -------------------------------------------------------------------------- */
+
+.dsrc-px-0 { padding-right: 0 !important; padding-left: 0 !important; }
+.dsrc-px-1 { padding-right: var(--dsrc-spacing-1) !important; padding-left: var(--dsrc-spacing-1) !important; }
+.dsrc-px-2 { padding-right: var(--dsrc-spacing-2) !important; padding-left: var(--dsrc-spacing-2) !important; }
+.dsrc-px-3 { padding-right: var(--dsrc-spacing-3) !important; padding-left: var(--dsrc-spacing-3) !important; }
+.dsrc-px-4 { padding-right: var(--dsrc-spacing-4) !important; padding-left: var(--dsrc-spacing-4) !important; }
+.dsrc-px-5 { padding-right: var(--dsrc-spacing-5) !important; padding-left: var(--dsrc-spacing-5) !important; }
+.dsrc-px-6 { padding-right: var(--dsrc-spacing-6) !important; padding-left: var(--dsrc-spacing-6) !important; }
+.dsrc-px-7 { padding-right: var(--dsrc-spacing-7) !important; padding-left: var(--dsrc-spacing-7) !important; }
+.dsrc-px-8 { padding-right: var(--dsrc-spacing-8) !important; padding-left: var(--dsrc-spacing-8) !important; }
+
+/* --------------------------------------------------------------------------
+   1.14 Padding - vertical (top + bottom)
+   -------------------------------------------------------------------------- */
+
+.dsrc-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
+.dsrc-py-1 { padding-top: var(--dsrc-spacing-1) !important; padding-bottom: var(--dsrc-spacing-1) !important; }
+.dsrc-py-2 { padding-top: var(--dsrc-spacing-2) !important; padding-bottom: var(--dsrc-spacing-2) !important; }
+.dsrc-py-3 { padding-top: var(--dsrc-spacing-3) !important; padding-bottom: var(--dsrc-spacing-3) !important; }
+.dsrc-py-4 { padding-top: var(--dsrc-spacing-4) !important; padding-bottom: var(--dsrc-spacing-4) !important; }
+.dsrc-py-5 { padding-top: var(--dsrc-spacing-5) !important; padding-bottom: var(--dsrc-spacing-5) !important; }
+.dsrc-py-6 { padding-top: var(--dsrc-spacing-6) !important; padding-bottom: var(--dsrc-spacing-6) !important; }
+.dsrc-py-7 { padding-top: var(--dsrc-spacing-7) !important; padding-bottom: var(--dsrc-spacing-7) !important; }
+.dsrc-py-8 { padding-top: var(--dsrc-spacing-8) !important; padding-bottom: var(--dsrc-spacing-8) !important; }
+
+
+/* ==========================================================================
+   2. TEXT UTILITIES
+   Alignment, weight, size, and transform.
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   2.1 Text alignment
+   -------------------------------------------------------------------------- */
+
+.dsrc-text-left   { text-align: left !important; }
+.dsrc-text-center { text-align: center !important; }
+.dsrc-text-right  { text-align: right !important; }
+
+/* --------------------------------------------------------------------------
+   2.2 Font weight
+   -------------------------------------------------------------------------- */
+
+.dsrc-text-bold     { font-weight: var(--dsrc-font-weight-bold) !important; }
+.dsrc-text-semibold { font-weight: var(--dsrc-font-weight-semibold) !important; }
+.dsrc-text-medium   { font-weight: var(--dsrc-font-weight-medium) !important; }
+.dsrc-text-regular  { font-weight: var(--dsrc-font-weight-regular) !important; }
+
+/* --------------------------------------------------------------------------
+   2.3 Font size
+   -------------------------------------------------------------------------- */
+
+.dsrc-text-sm   { font-size: var(--dsrc-font-size-small) !important; }
+.dsrc-text-body { font-size: var(--dsrc-font-size-body) !important; }
+.dsrc-text-lg   { font-size: var(--dsrc-font-size-h4) !important; }
+.dsrc-text-xl   { font-size: var(--dsrc-font-size-h3) !important; }
+
+/* --------------------------------------------------------------------------
+   2.4 Text transform and style
+   -------------------------------------------------------------------------- */
+
+.dsrc-text-uppercase { text-transform: uppercase !important; letter-spacing: var(--dsrc-font-letter-spacing-caps) !important; }
+.dsrc-text-italic    { font-style: italic !important; }
+
+.dsrc-text-truncate {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+
+/* ==========================================================================
+   3. DISPLAY UTILITIES
+   Base display classes and responsive variants.
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   3.1 Base display
+   -------------------------------------------------------------------------- */
+
+.dsrc-d-none         { display: none !important; }
+.dsrc-d-block        { display: block !important; }
+.dsrc-d-inline       { display: inline !important; }
+.dsrc-d-inline-block { display: inline-block !important; }
+.dsrc-d-flex         { display: flex !important; }
+.dsrc-d-grid         { display: grid !important; }
+
+
+/* ==========================================================================
+   4. FLEX UTILITIES
+   Direction, wrap, alignment, and gap.
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   4.1 Flex direction
+   -------------------------------------------------------------------------- */
+
+.dsrc-flex-row { flex-direction: row !important; }
+.dsrc-flex-col { flex-direction: column !important; }
+
+/* --------------------------------------------------------------------------
+   4.2 Flex wrap
+   -------------------------------------------------------------------------- */
+
+.dsrc-flex-wrap { flex-wrap: wrap !important; }
+
+/* --------------------------------------------------------------------------
+   4.3 Justify content
+   -------------------------------------------------------------------------- */
+
+.dsrc-justify-start   { justify-content: flex-start !important; }
+.dsrc-justify-center  { justify-content: center !important; }
+.dsrc-justify-end     { justify-content: flex-end !important; }
+.dsrc-justify-between { justify-content: space-between !important; }
+
+/* --------------------------------------------------------------------------
+   4.4 Align items
+   -------------------------------------------------------------------------- */
+
+.dsrc-items-start   { align-items: flex-start !important; }
+.dsrc-items-center  { align-items: center !important; }
+.dsrc-items-end     { align-items: flex-end !important; }
+.dsrc-items-stretch { align-items: stretch !important; }
+
+/* --------------------------------------------------------------------------
+   4.5 Gap
+   -------------------------------------------------------------------------- */
+
+.dsrc-gap-1 { gap: var(--dsrc-spacing-1) !important; }
+.dsrc-gap-2 { gap: var(--dsrc-spacing-2) !important; }
+.dsrc-gap-3 { gap: var(--dsrc-spacing-3) !important; }
+.dsrc-gap-4 { gap: var(--dsrc-spacing-4) !important; }
+.dsrc-gap-5 { gap: var(--dsrc-spacing-5) !important; }
+.dsrc-gap-6 { gap: var(--dsrc-spacing-6) !important; }
+
+
+/* ==========================================================================
+   5. COLOR UTILITIES
+   Background and text color using design tokens.
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   5.1 Background color
+   -------------------------------------------------------------------------- */
+
+.dsrc-bg-primaire { background-color: var(--dsrc-color-primaire) !important; }
+.dsrc-bg-blanc    { background-color: var(--dsrc-color-blanc) !important; }
+.dsrc-bg-gris-50  { background-color: var(--dsrc-color-gris-50) !important; }
+.dsrc-bg-gris-100 { background-color: var(--dsrc-color-gris-100) !important; }
+
+/* --------------------------------------------------------------------------
+   5.2 Text color
+   -------------------------------------------------------------------------- */
+
+.dsrc-text-primaire { color: var(--dsrc-color-primaire) !important; }
+.dsrc-text-noir     { color: var(--dsrc-color-noir) !important; }
+.dsrc-text-gris-600 { color: var(--dsrc-color-gris-600) !important; }
+.dsrc-text-blanc    { color: var(--dsrc-color-blanc) !important; }
+.dsrc-text-erreur   { color: var(--dsrc-color-erreur-texte) !important; }
+
+
+/* ==========================================================================
+   6. BORDER UTILITIES
+   Borders, border removal, and border radius.
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   6.1 Borders
+   -------------------------------------------------------------------------- */
+
+.dsrc-border        { border: var(--dsrc-border-width-thin) solid var(--dsrc-color-gris-200) !important; }
+.dsrc-border-top    { border-top: var(--dsrc-border-width-thin) solid var(--dsrc-color-gris-200) !important; }
+.dsrc-border-bottom { border-bottom: var(--dsrc-border-width-thin) solid var(--dsrc-color-gris-200) !important; }
+.dsrc-border-none   { border: 0 !important; }
+
+/* --------------------------------------------------------------------------
+   6.2 Border radius
+   -------------------------------------------------------------------------- */
+
+.dsrc-rounded      { border-radius: var(--dsrc-radius-default) !important; }
+.dsrc-rounded-lg   { border-radius: var(--dsrc-radius-large) !important; }
+.dsrc-rounded-none { border-radius: var(--dsrc-radius-none) !important; }
+
+
+/* ==========================================================================
+   7. VISIBILITY / ACCESSIBILITY
+   Screen-reader-only content and visibility toggles.
+   ========================================================================== */
+
+/**
+ * .dsrc-sr-only
+ * Visually hides an element while keeping it accessible to screen readers.
+ * Follows the recommended WCAG / DSFR approach.
+ */
+.dsrc-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.dsrc-visible   { visibility: visible !important; }
+.dsrc-invisible { visibility: hidden !important; }
+
+
+/* ==========================================================================
+   8. RESPONSIVE DISPLAY UTILITIES
+   Breakpoints: md >= 768px, lg >= 1024px
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   8.1 md breakpoint (>= 768px)
+   -------------------------------------------------------------------------- */
+
+@media (min-width: 768px) {
+  .dsrc-d-md-none  { display: none !important; }
+  .dsrc-d-md-block { display: block !important; }
+  .dsrc-d-md-flex  { display: flex !important; }
+}
+
+/* --------------------------------------------------------------------------
+   8.2 lg breakpoint (>= 1024px)
+   -------------------------------------------------------------------------- */
+
+@media (min-width: 1024px) {
+  .dsrc-d-lg-none  { display: none !important; }
+  .dsrc-d-lg-block { display: block !important; }
+  .dsrc-d-lg-flex  { display: flex !important; }
+}