# Styleguide UX/UI

Documentation des éléments graphiques du projet.

## Typographie

# Titre H1 (24px)

## Titre H2 (20px)

Paragraphe Niveau 1 (16px) - Lorem ipsum dolor sit amet.

Paragraphe Niveau 2 (14px) - Consectetur adipiscing elit.

Paragraphe Niveau 3 (12px) - Sed do eiusmod tempor incididunt.

## Spacing (Grille de 4px)

XS (4px)
SM (8px)
MD (16px)
ML (24px)
LG (32px)
XL (40px)

### Exemple d'utilisation (.gap-md, .mb-lg)

Item 1
Item 2
Item 3

## Boutons

### Types

### Tailles

### États

## Badges

### Badge Primary

Défaut
Neutral
Info
Alert
Win
Loose

### Badge Secondary

Défaut
Info
Alert
Win
Loose

### Badge Extra

100 à gagner
+12 pts | 1050ème

## Avatars

### Types

Rounded
Circle

### Placeholder

AB
Rounded
AB
Circle

### Bordure Extérieure

### Status (Online/Offline)

### Avatar Stack

#### 24px

+99

#### 48px

+99

## Modals

#### 1. Title + Description + Actions

## Titre de la modale

Ceci est une description de base pour expliquer le contexte de la modale.

#### 2. Title + Description

## Information importante

Veuillez prendre connaissance de cette information avant de continuer.

#### 3. Full Content + Close Icon

## Action requise

Voulez-vous vraiment effectuer cette action ? Elle est irréversible.

#### 4. Title + Description + Close Icon

## Notification

Votre profil a été mis à jour avec succès.

## Cards

#### Coupe du monde 2026

Phase de groupe - 2e journée

120 pts
3ème
+8
Voir mes résultats

#### PariPlaisirs

+12
267 pts
12ème
Voir mon groupe
TheGoldenGoal
312 pts
1er
StrikerX
289 pts
2e
MidfieldMind
271 pts
3e
Voir le classement

#### Coupe du monde 2026

Coupe du monde 2026

100 à gagner
Cup
Ligue

#### Infos compétitions

Sélections disponibles

100 à gagner

#### Coupe du monde 2026

Phase de groupe - 1ère journée

+12 pts | 1050ème
+12.27

#### Coupe du monde 2026

Finale

Vous n'avez pas pronostiqué

#### Coupe du monde 2026

Phase de groupe - 1ère journée

#### Coupe du monde 2026

Finale

## Carrousels

## Call To Action (CTA)

Ceci est un lien CTA

## Grille (Bootstrap)

col-12
col-6
col-6
col-4
col-4
col-4

## Autres éléments HTML

### Listes

#### Non ordonnée (UL)

- Item 1
- Item 2
- Item 3

#### Ordonnée (OL)

1. Premier
2. Deuxième
3. Troisième

### Figure

Une légende pour l'image.

## Formulaires

Adresse Email
Texte d'aide pour le champ.
Mot de passe
Zone de texte (Textarea)
Champ désactivé
Liste déroulante (Select)

#### Cases à cocher (Checkbox)

Checkbox par défaut
Checkbox cochée
Checkbox désactivée

##### Tailles Checkbox

XS (16px)
SM (20px)
MD (24px)
LG (32px)

#### Boutons radio

Radio par défaut
Radio sélectionné
Radio désactivé

##### Tailles Radio

XS
SM
MD
LG

#### Switches

Switch par défaut
Switch activé