Nuancier de Couleurs (Variables CSS)

Primary Neon

--primary-neon

var(--primary-neon) / #4F46E5

Secondary Neon

--secondary-neon

var(--secondary-neon) / #7C3AED

Cyan Neon

--cyan-neon

var(--cyan-neon) / #0891B2

Emerald (Success)

--emerald-neon

var(--emerald-neon) / #10B981

Rose (Destructive)

--rose-neon

var(--rose-neon) / #E11D48

Warning Glow

--warning-glow

var(--warning-glow) / #D97706

Background

--bg-dark

var(--bg-dark) / #F8FAFC

Card Background

--card-bg

Glassmorphism

Typographie & Échelle de Textes

Outfit Bold
Taille: 28px
Graisse: 700

Titre H1 - 28px Outfit Bold

Outfit Semibold
Taille: 18px
Graisse: 700

Titre H2 - 18px Outfit Semibold

Inter Medium
Taille: 13.5px
Graisse: 500

Texte Standard - 13.5px Inter Medium. Utilisé pour le contenu principal, les labels de formulaires et les descriptions.

Inter Regular
Taille: 10.5px
Graisse: 400

Texte Métadonnées - 10.5px Inter Regular. Utilisé pour les timestamps, sous-titres discrets et légendes.

Gestion des Calques (Layers & Z-Index)

Afin de garantir l'intégrité visuelle du dashboard "Anti-Gravity", le plan de superposition est normé en 8 couches z-index distinctes :

Niveau 1050 (Top Layer)
Variable: z-index: 1050

Boutons Flottants Globaux — Utilisé pour le bouton d'accès au Design System. Reste au-dessus des modals et de toute interface.

Niveau 1010
Variable: z-index: 1010

Fenêtres Modales & Onboardings — Écrans de fondu (overlay) et tunnels d'inscription bloquants.

Niveau 200
Variable: z-index: 200

Listes d'Options des Dropdowns — Menu déroulant d'options de formulaires. Doit chevaucher le reste de la page.

Niveau 99
Variable: z-index: 99

Toasts & Volet d'Alertes — Notifications temporaires et dropdowns d'en-tête (cloche de notifications).

Niveau 95
Variable: z-index: 95

Conteneurs de Sélecteurs — Délimitation des boutons déclencheurs de menus déroulants personnalisés.

Niveau 10
Variable: z-index: 10

Barre de Navigation Latérale — Menu principal (.sidebar). Reste visible lors du défilement.

Niveau 1 (Content Layer)
Variable: z-index: 1

Contenu Principal & Widgets — Cartes, formulaires, graphiques et tableaux de données.

Niveau 0 (Base Layer)
Variable: z-index: 0

Arrière-plans & Animations — Effets de brume néon et grille de particules interactive (cyberCanvas).

Surfaces, Angles & Espacements

Échelle d'Arrondis (Border-radius)

6px --radius-sm

10px --radius-md

16px --radius-lg

9999px --radius-full

Échelle d'Espacements (Spacing increments)

--space-xs (4px)

--space-sm (8px)

--space-md (16px)

--space-lg (24px)

--space-xl (32px)

Saisie, Sélections & Toggles

Adresse de l'API externe

Clé Secrète (Encrypted settings)

Seuil de tolérance (Litiges) 3 plaintes

Roster principal actif Inscriptions ouvertes

Section Overwatch Section Counter-Strike

Mode Diffuseur actif Rapports de réunions automatiques (IA)

<!-- Case à cocher Fluo -->
<label class="cyber-checkbox">
  <input type="checkbox" checked>
  <span class="checkbox-box"></span>
  Label de la case
</label>

<!-- Bouton Radio Fluo -->
<label class="cyber-radio">
  <input type="radio" name="demoGroup" checked>
  <span class="radio-box"></span>
  Option A
</label>

<!-- Switch / Interrupteur Fluo -->
<label class="cyber-switch">
  <input type="checkbox" checked>
  <span class="switch-slider"></span>
  Activer le module
</label>

<!-- Glissière Range -->
<input type="range" class="field-range-premium" min="1" max="10" value="5">

Bannières d'Information & Messages d'Alerte

💚

Opération terminée avec succès

Les données de la compétition ont été synchronisées vers votre feuille de calcul Olympe Sheets.

⚠️

Attention requise

Le quota de jetons SSO ClickUp pour cette instance arrive à expiration dans les prochaines 48 heures.

❤️

Erreur de connexion serveur

Impossible de joindre le service Groq AI. Veuillez vérifier votre clé API cryptée dans les configurations.

💙

Nouvelle mise à jour disponible

La console d'administration Athena Nexus v2.0 intègre désormais les templates de litiges par club.

<!-- Bannière d'Alerte : Succès -->
<div class="cyber-alert cyber-alert-success">
  <div class="cyber-alert-icon">💚</div>
  <div class="cyber-alert-content">
    <h4 class="cyber-alert-title">Titre</h4>
    <p class="cyber-alert-desc">Description du message...</p>
  </div>
</div>

<!-- Options de classes :
  cyber-alert-success (Vert)
  cyber-alert-warning (Orange)
  cyber-alert-error   (Rouge)
  cyber-alert-info    (Cyan) -->

Showroom des Composants

<!-- Bouton Principal dégradé -->
<button class="btn-action btn-save">Enregistrer</button>
 
<!-- Bouton Principal avec Spinner (Loading) -->
<button class="btn-action btn-save" disabled>
  Sauvegarde... <span class="spinner-icon"></span>
</button>

<!-- Bouton Secondaire -->
<button class="btn-action btn-secondary">Annuler</button>

Overwatch League of Legends Counter-Strike Général

En Ligne

Hors Ligne

<!-- Badges de Jeux -->
<span class="meta-tag tag-ow">Overwatch</span>
<span class="meta-tag tag-lol">League of Legends</span>
 
<!-- Indicateurs de Statut -->
<span class="status-dot online"></span> En Ligne
<span class="status-dot offline"></span> Hors Ligne

Survolez les boutons pour tester la direction des tooltips CSS.

<!-- Tooltip Position: Haut (Par défaut) -->
<button data-tooltip="Contenu de l'infobulle">Haut</button>
 
<!-- Tooltip Position: Bas -->
<button data-tooltip="Contenu" data-tooltip-position="bottom">Bas</button>
 
<!-- Tooltip Position: Gauche -->
<button data-tooltip="Contenu" data-tooltip-position="left">Gauche</button>

Composants Zone Commerciale (Landing Page & Tarifs)

Découverte

0€ / mois (Gratuit)

Pour les petites associations esport débutantes.

Gestion de 1 roster officiel
Liaison API Start.gg & FaceIt

Populaire

20€ / mois

Accès complet à la puissance IA d'Athena Nexus.

Rosters illimités & Multigaming
Analyse Caster IA en direct

Automatisation Matchs

Synchronisation temps réel des brackets Olympe, Start.gg et Toornament.

Règlements & Litiges

Gestion des contestations d'arbitrage avec preuves vidéos HORUS.

Composants Zone Client (Dashboard & Compétitions)

Grande Finale

Athena Esport vs Karmine Corp

3 - 1 Overwatch 2

Litige #402 - Non-respect du délai de pause

CS:GO / CS2

Réclamation formulée par l'équipe adverse concernant un dépassement de temps mort technique.

En cours (Doing)

3 tâches

Urgent Staff #Overwatch

Validation des casters officiels OTF

IA Horus Synthesis 27 Juillet 2026

Compte-Rendu AG Stratégique

Budget validé à l'unanimité pour le déploiement des serveurs de jeu secondaires Olympe.

Design System