# CSS Health Report

> Source: https://mobilizon.fr
> Generated: 2026-05-25

## Overview

| Metric                 | Value                                  |
| ---------------------- | -------------------------------------- |
| Total tokens extracted | 79                                     |
| Unique values          | 55                                     |
| Duplicate tokens       | 24                                     |
| Duplication ratio      | 30%                                    |
| **Health grade**       | **D** — Poor — significant duplication |

## Page Stats

| Metric                | Value |
| --------------------- | ----- |
| Elements              | 473   |
| External stylesheets  | 8     |
| Inline style elements | 0     |
| Style rules           | 1907  |

**Selectors:** 2050 class, 6 ID, 123 type, 3 universal, 221 attribute

## Colors by Usage

### Background colors: 6

| Color                | Occurrences |
| -------------------- | ----------- |
| `rgb(255, 213, 153)` | 6           |
| `rgb(255, 255, 255)` | 5           |
| `rgb(248, 113, 113)` | 2           |
| `rgb(239, 238, 244)` | 1           |
| `rgb(30, 125, 151)`  | 1           |
| `rgb(71, 68, 103)`   | 1           |

### Text colors: 10

| Color                | Occurrences |
| -------------------- | ----------- |
| `rgb(0, 0, 0)`       | 141         |
| `rgb(60, 55, 110)`   | 46          |
| `rgb(255, 255, 255)` | 23          |
| `rgb(63, 63, 70)`    | 6           |
| `rgb(255, 213, 153)` | 4           |
| `rgb(156, 163, 175)` | 2           |
| `rgb(55, 65, 81)`    | 2           |
| `rgb(31, 41, 55)`    | 1           |
| `rgb(75, 85, 99)`    | 1           |
| `rgb(54, 54, 54)`    | 1           |

### Border colors: 4

| Color                | Occurrences |
| -------------------- | ----------- |
| `rgb(229, 231, 235)` | 210         |
| `rgb(255, 213, 153)` | 6           |
| `rgb(243, 244, 246)` | 4           |
| `rgb(30, 125, 151)`  | 3           |

### Fill colors: 3

| Color                | Occurrences |
| -------------------- | ----------- |
| `rgb(60, 55, 110)`   | 12          |
| `rgb(255, 255, 255)` | 4           |
| `rgb(156, 163, 175)` | 2           |

## Font Info

### system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif

**font-size:**

| Size    | Occurrences |
| ------- | ----------- |
| 16px    | 196         |
| 18px    | 12          |
| 24px    | 6           |
| 20px    | 5           |
| 12px    | 2           |
| 48px    | 1           |
| 10.8px  | 1           |
| 15.36px | 1           |
| 10px    | 1           |
| 8.4px   | 1           |

**font-weight:**

| Weight | Occurrences |
| ------ | ----------- |
| 400    | 182         |
| 600    | 22          |
| 700    | 14          |
| 500    | 7           |
| 800    | 1           |

**line-height:**

| Line height | Occurrences |
| ----------- | ----------- |
| 24px        | 197         |
| 28px        | 14          |
| 32px        | 6           |
| 16px        | 2           |
| 36px        | 2           |
| 9.6px       | 2           |
| 48px        | 1           |
| 13.44px     | 1           |
| 9px         | 1           |

### ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

**font-size:**

| Size | Occurrences |
| ---- | ----------- |
| 16px | 1           |

**font-weight:**

| Weight | Occurrences |
| ------ | ----------- |
| 400    | 1           |

**line-height:**

| Line height | Occurrences |
| ----------- | ----------- |
| 24px        | 1           |

## Media Queries

| Query                          | Rules |
| ------------------------------ | ----- |
| `(min-width: 1024px)`          | 124   |
| `(min-width: 768px)`           | 113   |
| `(min-width: 1280px)`          | 100   |
| `(min-width: 640px)`           | 24    |
| `(forced-colors: active)`      | 3     |
| `(min-width: 1536px)`          | 1     |
| `(prefers-color-scheme: dark)` | 1     |

## Brand Assets

### Logo

| Property   | Value                 |
| ---------- | --------------------- |
| Type       | svg                   |
| Dimensions | 160 x 30.16px         |
| Links to   | https://mobilizon.fr/ |

### Favicons & Meta Images

| Type             | URL                                                                                                                              | Sizes   |
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------- | ------- |
| apple-touch-icon | https://mobilizon.fr/img/icons/apple-touch-icon-152x152.png                                                                      | 152x152 |
| icon             | https://mobilizon.fr/img/icons/apple-touch-icon-152x152.png                                                                      | 152x152 |
| mask-icon        | https://mobilizon.fr/img/icons/safari-pinned-tab.svg                                                                             | -       |
| og:image         | https://mobilizon.fr/media/868b694cf69b3aa27114ddb9289e9cc4a67c28850d29b8f5b49213478ec9c1fa.png?name=aldil_lyon%27s%20avatar.png | -       |
| favicon          | https://mobilizon.fr/favicon.ico                                                                                                 | -       |

## Color Formats

| Token                     | Hex       | LCH                        | OKLCH                        |
| ------------------------- | --------- | -------------------------- | ---------------------------- |
| `color.neutral.100`       | `#3f3f46` | `lch(26.89% 4.56 291.08)`  | `oklch(37.03% 0.012 285.84)` |
| `color.neutral.100-2`     | `#000000` | `lch(0.00% 0.00 0.00)`     | `oklch(0.00% 0.000 0.00)`    |
| `color.brand.mercury`     | `#e5e7eb` | `lch(91.60% 2.17 271.44)`  | `oklch(92.76% 0.006 264.60)` |
| `color.brand.astronaut`   | `#3c376e` | `lch(26.21% 35.95 299.35)` | `oklch(37.09% 0.092 285.12)` |
| `color.action.jelly-bean` | `#1e7d97` | `lch(48.48% 27.74 231.24)` | `oklch(54.88% 0.092 221.11)` |
| `color.accent.cherokee`   | `#ffd599` | `lch(87.56% 35.81 78.98)`  | `oklch(89.53% 0.090 76.06)`  |
| `color.accent.sunglo`     | `#f87171` | `lch(64.13% 57.61 26.24)`  | `oklch(71.06% 0.166 22.22)`  |

## Spacing Scale

| Property         | Value |
| ---------------- | ----- |
| Base unit        | 4px   |
| Grid conformance | 84%   |

## Border Combinations

| Border                         | Count | Elements |
| ------------------------------ | ----- | -------- |
| `2px solid rgb(255, 213, 153)` | 24    | section  |
| `1px solid rgb(30, 125, 151)`  | 12    | button   |
| `1px solid rgb(229, 231, 235)` | 4     | img      |

## Button Variants (7)

### Suivre

**default:**

- backgroundColor: `rgb(30, 125, 151)`
- color: `rgb(255, 255, 255)`
- padding: `8px 16px`
- borderRadius: `4px`
- border: `1px solid undefined`
- fontSize: `16px`
- fontWeight: `700`

### Passer au contenu principal

**default:**

- color: `rgb(0, 0, 0)`
- padding: `0px 0px`
- borderRadius: `0px`
- outline: `rgb(0, 0, 0) undefined 3px`
- fontSize: `16px`
- fontWeight: `400`

### Rechercher

**default:**

- color: `rgb(63, 63, 70)`
- padding: `0px 0px`
- borderRadius: `0px`
- outline: `rgb(63, 63, 70) undefined 3px`
- fontSize: `16px`
- fontWeight: `400`

### Mes groupes

**default:**

- color: `rgb(31, 41, 55)`
- padding: `0px 0px`
- borderRadius: `0px`
- outline: `rgb(31, 41, 55) undefined 3px`
- fontSize: `16px`
- fontWeight: `400`

### Contact

**default:**

- color: `rgb(0, 0, 0)`
- padding: `8px 16px`
- borderRadius: `4px`
- border: `1px solid rgb(30, 125, 151)`
- fontSize: `16px`
- fontWeight: `600`

### Voir tous

**default:**

- color: `rgb(60, 55, 110)`
- padding: `0px 0px`
- borderRadius: `0px`
- outline: `rgb(60, 55, 110) undefined 3px`
- fontSize: `16px`
- fontWeight: `400`

### À propos

**default:**

- color: `rgb(255, 255, 255)`
- padding: `0px 0px`
- borderRadius: `0px`
- outline: `rgb(255, 255, 255) undefined 3px`
- fontSize: `18px`
- fontWeight: `400`

## Input Variants (1)

### select

**default:**

- backgroundColor: `rgb(255, 255, 255)`
- color: `rgb(54, 54, 54)`
- border: `2px solid undefined`
- borderRadius: `4px`
- padding: `3px 32px 3px 8px`
- boxShadow: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- fontSize: `16px`

## Breakpoints

`1536px` -> `1280px` -> `1024px` -> `768px` -> `640px`

## Duplicate Groups

14 values are defined multiple times:

### `#ffffff` (6x)

- `--cssVar-oruga-primary-invert`
- `--cssVar-oruga-secondary-invert`
- `--cssVar-oruga-success-invert`
- `--cssVar-oruga-info-invert`
- `--cssVar-oruga-danger-invert`
- `--cssVar-oruga-white`

### `#1e7d97` (5x)

- `--color-action-jelly-bean`
- `--cssVar-oruga-primary`
- `--cssVar-oruga-variant-primary`
- `--cssVar-oruga-radio-active-background-color`
- `--cssVar-oruga-switch-checked-background`

### `#000000` (3x)

- `--color-neutral-100-2`
- `--cssVar-oruga-warning-invert`
- `--cssVar-oruga-black`

### `16px` (3x)

- `--typography-fontSize-h4`
- `--typography-lineHeight-0`
- `--spacing-4`

### `4px` (3x)

- `--spacing-1`
- `--borderRadius-sm`
- `--cssVar-oruga-base-border-radius`

### `400` (2x)

- `--typography-fontWeight-regular`
- `--cssVar-oruga-base-font-weight`

### `system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Noto Sans, Liberation Sans, Arial, sans-serif` (2x)

- `--typography-fontFamily-primary`
- `--cssVar-oruga-base-font-family`

### `48px` (2x)

- `--typography-fontSize-display`
- `--typography-lineHeight-5`

### `24px` (2x)

- `--typography-fontSize-h1`
- `--typography-lineHeight-1`

### `12px` (2x)

- `--typography-fontSize-h5`
- `--spacing-3`

### `32px` (2x)

- `--typography-lineHeight-3`
- `--spacing-5`

### `8px` (2x)

- `--spacing-2`
- `--borderRadius-md`

### `9999px` (2x)

- `--borderRadius-full`
- `--cssVar-oruga-base-border-radius-rounded`

### `white` (2x)

- `--cssVar-oruga-checkbox-background-color`
- `--cssVar-oruga-checkbox-active-background-color`