@digicreon/mucss 1.0.0 → 1.2.0

package/documentation/mu.accordion.md

@@ -100,7 +100,7 @@ No additional CSS classes are needed on child elements. All styling targets the
 
 | Property | Value |
 |----------|-------|
-| Border | `1px solid var(--pico-secondary-background)` |
+| Border | `1px solid var(--mu-secondary-background)` |
 | Border radius | `0.375rem` |
 | Summary padding | `0.75rem 1rem` |
 | Content padding | `0.75rem 1rem` |
@@ -116,4 +116,6 @@ No additional CSS classes are needed on child elements. All styling targets the
 
 ---
 
-→ [Voir l'exemple](../examples/accordion.html)
+> See also : [µCard](mu.card.md) · [µTabs](mu.tabs.md)
+
+→ [See example](../examples/accordion.html)

package/documentation/mu.alert.md

@@ -1,6 +1,6 @@
 # µAlert
 
-**µAlert** is a notification banner component, part of the [µCSS](.) framework. It provides 8 color variants, an optional title, inline links, and a dismissible close button.
+**µAlert** is a notification banner component, part of the [µCSS](.) framework. It provides 11 color variants, an optional title, inline links, and a dismissible close button.
 
 ---
 
@@ -18,7 +18,7 @@ Apply `.alert` along with a color variant class to a `<div>`:
 
 ## Color variants
 
-All 8 color roles are available:
+All 11 color roles are available:
 
 ```html
 <div class="alert alert-primary"><p>This is a <strong>primary</strong> alert.</p></div>
@@ -29,18 +29,24 @@ All 8 color roles are available:
 <div class="alert alert-info"><p>This is an <strong>info</strong> alert.</p></div>
 <div class="alert alert-warning"><p>This is a <strong>warning</strong> alert.</p></div>
 <div class="alert alert-error"><p>This is an <strong>error</strong> alert.</p></div>
+<div class="alert alert-accent"><p>This is an <strong>accent</strong> alert.</p></div>
+<div class="alert alert-pop"><p>This is a <strong>pop</strong> alert.</p></div>
+<div class="alert alert-spark"><p>This is a <strong>spark</strong> alert.</p></div>
 ```
 
-| Class | Text color | Background | Border |
-|-------|-----------|------------|--------|
-| `.alert-primary` | `--pico-primary` | `--pico-primary-background` | `--pico-primary` |
-| `.alert-secondary` | `--pico-secondary` | `--pico-secondary-background` | `--pico-secondary` |
-| `.alert-tertiary` | `--pico-tertiary` | `--pico-tertiary-background` | `--pico-tertiary` |
-| `.alert-contrast` | `--pico-contrast` | `--pico-contrast-background` | `--pico-contrast` |
-| `.alert-success` | `--pico-success` | `--pico-success-background` | `--pico-success` |
-| `.alert-info` | `--pico-info` | `--pico-info-background` | `--pico-info` |
-| `.alert-warning` | `--pico-warning` | `--pico-warning-background` | `--pico-warning` |
-| `.alert-error` | `--pico-error` | `--pico-error-background` | `--pico-error` |
+| Class | Text color | Background |
+|-------|-----------|------------|
+| `.alert-primary` | `--mu-primary` | `--mu-primary-background` |
+| `.alert-secondary` | `--mu-secondary` | `--mu-secondary-background` |
+| `.alert-tertiary` | `--mu-tertiary` | `--mu-tertiary-background` |
+| `.alert-contrast` | `--mu-contrast` | `--mu-contrast-background` |
+| `.alert-success` | `--mu-success` | `--mu-success-background` |
+| `.alert-info` | `--mu-info` | `--mu-info-background` |
+| `.alert-warning` | `--mu-warning` | `--mu-warning-background` |
+| `.alert-error` | `--mu-error` | `--mu-error-background` |
+| `.alert-accent` | `--mu-accent` | `--mu-accent-background` |
+| `.alert-pop` | `--mu-pop` | `--mu-pop-background` |
+| `.alert-spark` | `--mu-spark` | `--mu-spark-background` |
 
 ---
 
@@ -104,7 +110,7 @@ Links inside alerts are styled with `font-weight: 600`, inherit the alert color,
 | Class | Description |
 |-------|-------------|
 | `.alert` | Base alert container (padding, border-radius, margin-bottom) |
-| `.alert-{color}` | Color variant (`primary`, `secondary`, `tertiary`, `contrast`, `success`, `info`, `warning`, `error`) |
+| `.alert-{color}` | Color variant (`primary`, `secondary`, `tertiary`, `contrast`, `success`, `info`, `warning`, `error`, `accent`, `pop`, `spark`) |
 | `.alert-title` | Bold title block inside the alert |
 | `.alert-dismissible` | Adds right padding for the close button |
 | `.alert-close` | Close button, positioned absolutely at the right |
@@ -131,4 +137,6 @@ Links inside alerts are styled with `font-weight: 600`, inherit the alert color,
 
 ---
 
-→ [Voir l'exemple](../examples/alert.html)
+> See also : [µToast](mu.toast.md) · [µBadge](mu.badge.md)
+
+→ [See example](../examples/alert.html)

package/documentation/mu.badge.md

@@ -1,6 +1,6 @@
 # µBadge
 
-**µBadge** is an inline label and counter component, part of the [µCSS](.) framework. It supports 8 color variants, outline style, pill shape, three sizes, and an attached positioning mode for notification counters.
+**µBadge** is an inline label and counter component, part of the [µCSS](.) framework. It supports 11 color variants, outline style, pill shape, three sizes, and an attached positioning mode for notification counters.
 
 ---
 
@@ -12,13 +12,13 @@ Apply `.badge` along with a color variant class to a `<span>`:
 <span class="badge badge-primary">Primary</span>
 ```
 
-The default badge (without a color class) uses `--pico-contrast` as its background color.
+The default badge (without a color class) uses `--mu-contrast` as its background color.
 
 ---
 
 ## Color variants (filled)
 
-All 8 color roles are available:
+All 11 color roles are available:
 
 ```html
 <span class="badge badge-primary">Primary</span>
@@ -29,18 +29,24 @@ All 8 color roles are available:
 <span class="badge badge-info">Info</span>
 <span class="badge badge-warning">Warning</span>
 <span class="badge badge-error">Error</span>
+<span class="badge badge-accent">Accent</span>
+<span class="badge badge-pop">Pop</span>
+<span class="badge badge-spark">Spark</span>
 ```
 
 | Class | Background | Text color | Border |
 |-------|-----------|------------|--------|
-| `.badge-primary` | `--pico-primary` | `--pico-primary-inverse` | `--pico-primary` |
-| `.badge-secondary` | `--pico-secondary` | `--pico-secondary-inverse` | `--pico-secondary` |
-| `.badge-tertiary` | `--pico-tertiary` | `--pico-tertiary-inverse` | `--pico-tertiary` |
-| `.badge-contrast` | `--pico-contrast` | `--pico-contrast-inverse` | `--pico-contrast` |
-| `.badge-success` | `--pico-success` | `--pico-success-inverse` | `--pico-success` |
-| `.badge-info` | `--pico-info` | `--pico-info-inverse` | `--pico-info` |
-| `.badge-warning` | `--pico-warning` | `--pico-warning-inverse` | `--pico-warning` |
-| `.badge-error` | `--pico-error` | `--pico-error-inverse` | `--pico-error` |
+| `.badge-primary` | `--mu-primary` | `--mu-primary-inverse` | `--mu-primary` |
+| `.badge-secondary` | `--mu-secondary` | `--mu-secondary-inverse` | `--mu-secondary` |
+| `.badge-tertiary` | `--mu-tertiary` | `--mu-tertiary-inverse` | `--mu-tertiary` |
+| `.badge-contrast` | `--mu-contrast` | `--mu-contrast-inverse` | `--mu-contrast` |
+| `.badge-success` | `--mu-success` | `--mu-success-inverse` | `--mu-success` |
+| `.badge-info` | `--mu-info` | `--mu-info-inverse` | `--mu-info` |
+| `.badge-warning` | `--mu-warning` | `--mu-warning-inverse` | `--mu-warning` |
+| `.badge-error` | `--mu-error` | `--mu-error-inverse` | `--mu-error` |
+| `.badge-accent` | `--mu-accent` | `--mu-accent-inverse` | `--mu-accent` |
+| `.badge-pop` | `--mu-pop` | `--mu-pop-inverse` | `--mu-pop` |
+| `.badge-spark` | `--mu-spark` | `--mu-spark-inverse` | `--mu-spark` |
 
 ---
 
@@ -57,6 +63,9 @@ Add `.badge-outline` to remove the background and keep only the border and color
 <span class="badge badge-outline badge-info">Info</span>
 <span class="badge badge-outline badge-warning">Warning</span>
 <span class="badge badge-outline badge-error">Error</span>
+<span class="badge badge-outline badge-accent">Accent</span>
+<span class="badge badge-outline badge-pop">Pop</span>
+<span class="badge badge-outline badge-spark">Spark</span>
 ```
 
 The `.badge-outline` class sets `background-color: transparent` and changes the text color to match the role color.
@@ -99,12 +108,12 @@ Three sizes are available:
 Use `.badge-attached` to position a badge as a notification counter on the corner of a parent element. The parent must have `position: relative`:
 
 ```html
-<span style="position: relative; display: inline-block; padding: 0.5rem 1rem; border: 1px solid var(--pico-secondary-background); border-radius: 0.375rem;">
+<span style="position: relative; display: inline-block; padding: 0.5rem 1rem; border: 1px solid var(--mu-secondary-background); border-radius: 0.375rem;">
     Inbox
     <span class="badge badge-error badge-attached badge-pill">3</span>
 </span>
 
-<span style="position: relative; display: inline-block; padding: 0.5rem 1rem; border: 1px solid var(--pico-secondary-background); border-radius: 0.375rem;">
+<span style="position: relative; display: inline-block; padding: 0.5rem 1rem; border: 1px solid var(--mu-secondary-background); border-radius: 0.375rem;">
     Notifications
     <span class="badge badge-warning badge-attached badge-pill">12</span>
 </span>
@@ -132,7 +141,7 @@ Link and button badges remove text-decoration, use a pointer cursor, and reduce
 | Class | Description |
 |-------|-------------|
 | `.badge` | Base badge (inline-flex, padding, font-size, border-radius) |
-| `.badge-{color}` | Color variant (`primary`, `secondary`, `tertiary`, `contrast`, `success`, `info`, `warning`, `error`) |
+| `.badge-{color}` | Color variant (`primary`, `secondary`, `tertiary`, `contrast`, `success`, `info`, `warning`, `error`, `accent`, `pop`, `spark`) |
 | `.badge-outline` | Transparent background, colored text and border |
 | `.badge-pill` | Fully rounded corners (`border-radius: 50rem`) |
 | `.badge-sm` | Small size |
@@ -152,4 +161,15 @@ Link and button badges remove text-decoration, use a pointer cursor, and reduce
 
 ---
 
-→ [Voir l'exemple](../examples/badge.html)
+## Accessibility
+
+- Badges used as links should have descriptive text or `aria-label` for screen readers.
+- Ensure sufficient color contrast between badge text and background (WCAG AA minimum).
+- Avoid using color alone to convey meaning — pair colored badges with text labels.
+- For notification badges (counts), use `aria-label` to describe the count in context (e.g., `aria-label="3 unread messages"`).
+
+---
+
+> See also : [µAlert](mu.alert.md) · [µButton](mu.button.md)
+
+→ [See example](../examples/badge.html)

package/documentation/mu.breadcrumb.md

@@ -119,12 +119,12 @@ The boxed variant can be combined with any separator style:
 |----------|-------|
 | Font size | `0.875rem` |
 | Separator margin | `0 0.5rem` |
-| Separator color | `var(--pico-secondary)` at 60% opacity |
-| Link color | `var(--pico-primary)` |
-| Link hover | `var(--pico-primary-hover)` with underline |
-| Current page color | `var(--pico-secondary)` |
+| Separator color | `var(--mu-secondary)` at 60% opacity |
+| Link color | `var(--mu-primary)` |
+| Link hover | `var(--mu-primary-hover)` with underline |
+| Current page color | `var(--mu-secondary)` |
 | Boxed padding | `0.5rem 1rem` |
-| Boxed background | `var(--pico-secondary-background)` |
+| Boxed background | `var(--mu-secondary-background)` |
 | Boxed border radius | `0.375rem` |
 
 ---
@@ -137,4 +137,6 @@ The boxed variant can be combined with any separator style:
 
 ---
 
-→ [Voir l'exemple](../examples/breadcrumb.html)
+> See also : [µNav](mu.nav.md) · [µPagination](mu.pagination.md)
+
+→ [See example](../examples/breadcrumb.html)

package/documentation/mu.button.md

@@ -1,6 +1,6 @@
 # µButton
 
-**µButton** is a button component, part of the [µCSS](.) framework. It provides 8 color roles in filled and ghost variants, a link style, three sizes, and works on both `<button>` and `<a>` elements.
+**µButton** is a button component, part of the [µCSS](.) framework. It provides 11 color roles in filled and outline variants, a link style, three sizes, and works on both `<button>` and `<a>` elements.
 
 ---
 
@@ -20,9 +20,9 @@ The `.btn` class can also be applied to `<a>` elements to render links as button
 
 ---
 
-## Filled variants (8 colors)
+## Filled variants (11 colors)
 
-All 8 color roles are available as filled buttons:
+All 11 color roles are available as filled buttons:
 
 ```html
 <button class="btn btn-primary">Primary</button>
@@ -33,39 +33,48 @@ All 8 color roles are available as filled buttons:
 <button class="btn btn-info">Info</button>
 <button class="btn btn-warning">Warning</button>
 <button class="btn btn-error">Error</button>
+<button class="btn btn-accent">Accent</button>
+<button class="btn btn-pop">Pop</button>
+<button class="btn btn-spark">Spark</button>
 ```
 
 Each filled button has a solid background, matching border, and an inverse text color. On hover, the background and border shift to the `-hover` variant of the color.
 
 | Class | Background | Text color | Hover background |
 |-------|-----------|------------|-----------------|
-| `.btn-primary` | `--pico-primary` | `--pico-primary-inverse` | `--pico-primary-hover` |
-| `.btn-secondary` | `--pico-secondary` | `--pico-secondary-inverse` | `--pico-secondary-hover` |
-| `.btn-tertiary` | `--pico-tertiary` | `--pico-tertiary-inverse` | `--pico-tertiary-hover` |
-| `.btn-contrast` | `--pico-contrast` | `--pico-contrast-inverse` | `--pico-contrast-hover` |
-| `.btn-success` | `--pico-success` | `--pico-success-inverse` | `--pico-success-hover` |
-| `.btn-info` | `--pico-info` | `--pico-info-inverse` | `--pico-info-hover` |
-| `.btn-warning` | `--pico-warning` | `--pico-warning-inverse` | `--pico-warning-hover` |
-| `.btn-error` | `--pico-error` | `--pico-error-inverse` | `--pico-error-hover` |
+| `.btn-primary` | `--mu-primary` | `--mu-primary-inverse` | `--mu-primary-hover` |
+| `.btn-secondary` | `--mu-secondary` | `--mu-secondary-inverse` | `--mu-secondary-hover` |
+| `.btn-tertiary` | `--mu-tertiary` | `--mu-tertiary-inverse` | `--mu-tertiary-hover` |
+| `.btn-contrast` | `--mu-contrast` | `--mu-contrast-inverse` | `--mu-contrast-hover` |
+| `.btn-success` | `--mu-success` | `--mu-success-inverse` | `--mu-success-hover` |
+| `.btn-info` | `--mu-info` | `--mu-info-inverse` | `--mu-info-hover` |
+| `.btn-warning` | `--mu-warning` | `--mu-warning-inverse` | `--mu-warning-hover` |
+| `.btn-error` | `--mu-error` | `--mu-error-inverse` | `--mu-error-hover` |
+| `.btn-accent` | `--mu-accent` | `--mu-accent-inverse` | `--mu-accent-hover` |
+| `.btn-pop` | `--mu-pop` | `--mu-pop-inverse` | `--mu-pop-hover` |
+| `.btn-spark` | `--mu-spark` | `--mu-spark-inverse` | `--mu-spark-hover` |
 
 ---
 
-## Ghost variant
+## Outline variant
 
-Add `.btn-ghost` alongside a color class for a transparent background with visible border and colored text:
+Add `.btn-outline` alongside a color class for a transparent background with visible border and colored text:
 
 ```html
-<button class="btn btn-ghost btn-primary">Primary</button>
-<button class="btn btn-ghost btn-secondary">Secondary</button>
-<button class="btn btn-ghost btn-tertiary">Tertiary</button>
-<button class="btn btn-ghost btn-contrast">Contrast</button>
-<button class="btn btn-ghost btn-success">Success</button>
-<button class="btn btn-ghost btn-info">Info</button>
-<button class="btn btn-ghost btn-warning">Warning</button>
-<button class="btn btn-ghost btn-error">Error</button>
+<button class="btn btn-outline btn-primary">Primary</button>
+<button class="btn btn-outline btn-secondary">Secondary</button>
+<button class="btn btn-outline btn-tertiary">Tertiary</button>
+<button class="btn btn-outline btn-contrast">Contrast</button>
+<button class="btn btn-outline btn-success">Success</button>
+<button class="btn btn-outline btn-info">Info</button>
+<button class="btn btn-outline btn-warning">Warning</button>
+<button class="btn btn-outline btn-error">Error</button>
+<button class="btn btn-outline btn-accent">Accent</button>
+<button class="btn btn-outline btn-pop">Pop</button>
+<button class="btn btn-outline btn-spark">Spark</button>
 ```
 
-Ghost buttons have `background-color: transparent`, text color matching the role, and a matching border. On hover, opacity is reduced to `0.8`.
+Outline buttons have `background-color: transparent`, text color matching the role, and a matching border. On hover, the background fills with the role color and the text switches to its inverse.
 
 ---
 
@@ -77,7 +86,7 @@ Use `.btn-link` for a button that looks like a text link (no background, no bord
 <button class="btn btn-link">Link button</button>
 ```
 
-The link style uses `--pico-primary` as its text color and `--pico-primary-hover` on hover.
+The link style uses `--mu-primary` as its text color and `--mu-primary-hover` on hover.
 
 ---
 
@@ -105,7 +114,7 @@ Any `<a>` element can use `.btn` classes to look like a button:
 
 ```html
 <a class="btn btn-primary" href="#">Link as button</a>
-<a class="btn btn-ghost btn-success" href="#">Ghost link</a>
+<a class="btn btn-outline btn-success" href="#">Outline link</a>
 <a class="btn btn-error btn-lg" href="#">Large link</a>
 ```
 
@@ -116,8 +125,8 @@ Any `<a>` element can use `.btn` classes to look like a button:
 | Class | Description |
 |-------|-------------|
 | `.btn` | Base button (inline-flex, padding, font-weight 600, border-radius, transitions) |
-| `.btn-{color}` | Filled color variant (`primary`, `secondary`, `tertiary`, `contrast`, `success`, `info`, `warning`, `error`) |
-| `.btn-ghost` | Transparent background, colored border and text |
+| `.btn-{color}` | Filled color variant (`primary`, `secondary`, `tertiary`, `contrast`, `success`, `info`, `warning`, `error`, `accent`, `pop`, `spark`) |
+| `.btn-outline` | Transparent background, colored border and text |
 | `.btn-link` | Looks like a text link (transparent, underlined, primary color) |
 | `.btn-sm` | Small size |
 | `.btn-lg` | Large size |
@@ -138,10 +147,12 @@ Any `<a>` element can use `.btn` classes to look like a button:
 
 ## Accessibility
 
-- Each color variant has a dedicated `:focus-visible` outline using the `--pico-{color}-focus` variable with a `2px` outline offset.
+- Each color variant has a dedicated `:focus-visible` outline using the `--mu-{color}-focus` variable with a `2px` outline offset.
 - The `.btn-link` variant follows link color conventions for consistency with standard anchor styling.
 - Use `<button>` for actions and `<a>` for navigation to maintain proper semantics.
 
 ---
 
-→ [Voir l'exemple](../examples/button.html)
+> See also : [µLink](mu.link.md) · [µForms](mu.forms.md)
+
+→ [See example](../examples/button.html)

package/documentation/mu.card.md

@@ -1,12 +1,12 @@
 # µCard
 
-**µCard** provides colored card variants for the `<article>` element, part of the [µCSS](.) framework. It extends PicoCSS's default card styling with 8 color accents, automatic header/footer shading, and a left border indicator.
+**µCard** provides colored card variants for the `<article>` element, part of the [µCSS](.) framework. It extends the default card styling with 11 color accents and automatic header/footer shading.
 
 ---
 
 ## Usage
 
-Cards use the standard HTML `<article>` element. Add a color class to apply a colored variant with a left border accent and tinted background.
+Cards use the standard HTML `<article>` element. Add a color class to apply a colored variant with a tinted background.
 
 ```html
 <article class="card-primary">
@@ -28,7 +28,7 @@ A card can contain any combination of `<header>`, body content, and `<footer>`.
 
 ### Default card (no color)
 
-Without a color class, `<article>` renders with the standard PicoCSS card styling:
+Without a color class, `<article>` renders with the standard card styling:
 
 ```html
 <article>
@@ -42,20 +42,23 @@ Without a color class, `<article>` renders with the standard PicoCSS card stylin
 
 ## Color variants
 
-8 color classes are available, matching the µCSS color roles:
+11 color classes are available, matching the µCSS color roles:
 
-| Class             | Color role | Left border          | Background                 |
-|-------------------|------------|----------------------|----------------------------|
-| `.card-primary`   | Primary    | `--pico-primary`     | `--pico-primary-background`   |
-| `.card-secondary` | Secondary  | `--pico-secondary`   | `--pico-secondary-background` |
-| `.card-tertiary`  | Tertiary   | `--pico-tertiary`    | `--pico-tertiary-background`  |
-| `.card-contrast`  | Contrast   | `--pico-contrast`    | `--pico-contrast-background`  |
-| `.card-success`   | Success    | `--pico-success`     | `--pico-success-background`   |
-| `.card-info`      | Info       | `--pico-info`        | `--pico-info-background`      |
-| `.card-warning`   | Warning    | `--pico-warning`     | `--pico-warning-background`   |
-| `.card-error`     | Error      | `--pico-error`       | `--pico-error-background`     |
+| Class             | Color role | Background                 |
+|-------------------|------------|----------------------------|
+| `.card-primary`   | Primary    | `--mu-primary-background`   |
+| `.card-secondary` | Secondary  | `--mu-secondary-background` |
+| `.card-tertiary`  | Tertiary   | `--mu-tertiary-background`  |
+| `.card-contrast`  | Contrast   | `--mu-contrast-background`  |
+| `.card-accent`    | Accent     | `--mu-accent-background`    |
+| `.card-success`   | Success    | `--mu-success-background`   |
+| `.card-info`      | Info       | `--mu-info-background`      |
+| `.card-warning`   | Warning    | `--mu-warning-background`   |
+| `.card-error`     | Error      | `--mu-error-background`     |
+| `.card-pop`       | Pop        | `--mu-pop-background`       |
+| `.card-spark`     | Spark      | `--mu-spark-background`     |
 
-### All 8 variants example
+### All 11 variants example
 
 ```html
 <div class="row">
@@ -96,14 +99,13 @@ Without a color class, `<article>` renders with the standard PicoCSS card stylin
 
 Colored cards (`article[class*="card-"]`) apply the following styles:
 
-- **Left border**: 4px solid in the card's color role.
 - **Background**: the card's light background tint.
 - **Header/footer background**: a `color-mix()` blend of 12% card color into the card background, creating a subtle shading difference.
 - **Header border-bottom / footer border-top**: `color-mix()` blend of 20% card color, providing a gentle separator.
 
 ---
 
-## PicoCSS override
+## Implementation note
 
 µCard includes one global fix:
 
@@ -113,7 +115,7 @@ article > *:last-child:not(header):not(footer) {
 }
 ```
 
-This removes the bottom margin on the last content element inside a card (e.g., a `<p>` tag), preventing unwanted spacing before the card's bottom edge or footer. This is necessary because PicoCSS applies default margins to `<p>` elements.
+This removes the bottom margin on the last content element inside a card (e.g., a `<p>` tag), preventing unwanted spacing before the card's bottom edge or footer. This is necessary because the base styles apply default margins to `<p>` elements.
 
 ---
 
@@ -125,11 +127,25 @@ This removes the bottom margin on the last content element inside a card (e.g.,
 | `.card-secondary` | Secondary color variant                          |
 | `.card-tertiary`  | Tertiary color variant                           |
 | `.card-contrast`  | Contrast color variant                           |
+| `.card-accent`    | Accent color variant                             |
 | `.card-success`   | Success color variant                            |
 | `.card-info`      | Info color variant                               |
 | `.card-warning`   | Warning color variant                            |
 | `.card-error`     | Error color variant                              |
+| `.card-pop`       | Pop color variant (lighter accent)               |
+| `.card-spark`     | Spark color variant (lighter contrast)            |
 
 ---
 
-→ [Voir l'exemple](../examples/card.html)
+## Accessibility
+
+- The `<article>` element is a semantic landmark — screen readers announce it as an article.
+- Always include a heading (`<h2>`–`<h6>`) inside the card for screen reader navigation.
+- Card `<header>` and `<footer>` are announced as part of the article structure.
+- For clickable cards, make the heading link the primary interactive element rather than wrapping the entire card in `<a>`.
+
+---
+
+> See also : [µGrid](mu.grid.md) · [µHero](mu.hero.md)
+
+→ [See example](../examples/card.html)

package/documentation/mu.checkbox-radio.md

@@ -1,6 +1,6 @@
 # µCheckbox & Radio
 
-**µCheckbox & Radio** describes the native checkbox and radio button styling provided by [µCSS](.) via PicoCSS. These are standard HTML form controls (`<input type="checkbox">` and `<input type="radio">`) that PicoCSS styles automatically without any additional classes.
+**µCheckbox & Radio** describes the native checkbox and radio button styling provided by [µCSS](.). These are standard HTML form controls (`<input type="checkbox">` and `<input type="radio">`) that µCSS styles automatically without any additional classes.
 
 ---
 
@@ -118,4 +118,6 @@ Checkboxes and radio buttons can be combined inside a card (`<article>`) for str
 
 ---
 
-→ [Voir l'exemple](../examples/checkbox-radio.html)
+> See also : [µSwitch](mu.switch.md) · [µForms](mu.forms.md)
+
+→ [See example](../examples/checkbox-radio.html)

package/documentation/mu.code.md

@@ -0,0 +1,85 @@
+# µCode
+
+**µCode** describes the styling of source code elements in [µCSS](.): inline code (`<code>`), code blocks (`<pre>`), keyboard shortcuts (`<kbd>`), and sample output (`<samp>`).
+
+---
+
+## Usage
+
+An inline code fragment uses the `<code>` tag:
+
+```html
+<p>Utilisez <code>var(--mu-primary)</code> pour la couleur primaire.</p>
+```
+
+---
+
+## Inline code
+
+The `<code>`, `<kbd>`, and `<samp>` elements are displayed as `inline-block` with a colored background and border-radius:
+
+```html
+<p>La commande <code>npm install</code> installe les dependances.</p>
+<p>Appuyez sur <kbd>Ctrl</kbd> + <kbd>C</kbd> pour copier.</p>
+<p>Le programme affiche <samp>Hello World</samp>.</p>
+```
+
+| Element | Background | Text color |
+|---------|------------|------------|
+| `<code>` | `--mu-code-background-color` | `--mu-code-color` |
+| `<samp>` | `--mu-code-background-color` | `--mu-code-color` |
+| `<kbd>` | `--mu-code-kbd-background-color` | `--mu-code-kbd-color` |
+
+The `<kbd>` element uses a dark background and light text to visually stand out as a keyboard shortcut.
+
+---
+
+## Code block
+
+Wrap `<code>` inside `<pre>` for a code block with horizontal scrolling:
+
+```html
+<pre><code>function hello() {
+    console.log("Hello, World!");
+    return true;
+}</code></pre>
+```
+
+The block receives a padding of `var(--mu-spacing)` and `overflow-x: auto` to handle long lines.
+
+---
+
+## Typographic properties
+
+All code elements use the theme's monospace font:
+
+| Property | Value |
+|----------|-------|
+| Font | `--mu-font-family` (monospace) |
+| Size | `0.875em` (relative to parent) |
+| Weight | `--mu-font-weight` |
+| Border-radius | `--mu-border-radius` |
+| Padding (inline) | `0.375rem` |
+| Padding (block) | `var(--mu-spacing)` |
+
+---
+
+## Customization
+
+```css
+:root {
+    /* Changer le fond du code inline */
+    --mu-code-background-color: #f0f0f0;
+
+    /* Changer la couleur du texte de code */
+    --mu-code-color: #333;
+
+    /* Personnaliser les touches clavier */
+    --mu-code-kbd-background-color: #333;
+    --mu-code-kbd-color: #fff;
+}
+```
+
+---
+
+> See also : [µTypography](mu.typography.md) · [µVariables](mu.variables.md)