Couleurs

Couleurs Primaires

--color-primary

--color-secondary

--color-accent

Couleurs d'Accentuation

--color-accent-green

--color-accent-yellow

--color-accent-blue

--color-accent-pink

Couleurs Neutres

--color-gray-100

--color-gray-200

--color-gray-300

--color-gray-400

Typographie

Titre H1 - Principale

Titre H2 - Section

Titre H3 - Sous-section

Titre H4 - Paragraphe

Paragraphe standard avec du texte. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Texte attenué avec la classe .text-muted

Texte en gras et texte en italique

Lien standard

Espacements

--spacing-xs

--spacing-sm

--spacing-md

--spacing-lg

--spacing-xl

--spacing-2xl

Boutons

Primary

Secondary

Outline

Cartes

SRD Cards

Exemple de SRD Card

Tile Cards

Titre de la Tile

Description courte de la fonctionnalite

Autre Tile

Une autre description pour montrer le style

Hero Sections

Hero Purple

Exemple de section hero avec le gradient violet

Hero Green

Exemple de section hero avec le gradient vert

Hero Blue

Exemple de section hero avec le gradient bleu

Architecture CSS

Le CSS est organise de maniere modulaire avec des fichiers separes :

style.css                    (Point d'entree - @imports)
css/
├── _variables.css          (Tokens de design)
├── _reset.css              (Reset de base)
├── _dark-mode.css          (Theme sombre)
├── components/
│   ├── _header.css         (Navigation)
│   ├── _cards.css          (Cartes SRD, tiles)
│   ├── _grids.css          (Grilles responsive)
│   ├── _buttons.css        (Boutons)
│   ├── _modal.css          (Modales)
│   ├── _faq.css            (Accordeons)
│   ├── _footer.css         (Pied de page)
│   └── _forms.css          (Formulaires)
├── layout/
│   ├── _sections.css       (Sections de page)
│   └── _responsive.css     (Media queries)
├── utilities/
│   ├── _colors.css         (Utilitaires couleurs)
│   ├── _spacing.css        (Marges, paddings)
│   ├── _text.css           (Styles de texte)
│   └── _backgrounds.css    (Fonds, gradients)
└── pages/
    ├── _index.css          (Page d'accueil)
    └── _generator.css      (Generateur)

Exemples d'Utilisation

Variables CSS

/* Utiliser les couleurs */
.element {
    color: var(--color-primary);
    background: var(--bg-light);
}

/* Utiliser les espacements */
.card {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

/* Utiliser les ombres */
.box {
    box-shadow: var(--shadow-md);
}

Classes Utilitaires

<p class="text-center">Texte centre</p>
<p class="text-muted">Texte attenue</p>
<div class="mb-2">Margin bottom medium</div>
<section class="hero-section hero-gradient-purple">...</section>