Logo

Fichiers : /assets/icons/logoLCN.svg, .png et .webp.

Couleurs

Le nom de classe Tailwind est indiqué sous chaque nuance (par exemple bg-bleu-france-600).

bleu-france

Couleur principale : liens, boutons, titres.

#eff6ff

bleu-france-50

100

#dbeafe

bleu-france-100

200

#bfdbfe

bleu-france-200

300

#93c5fd

bleu-france-300

400

#60a5fa

bleu-france-400

500

#3b82f6

bleu-france-500

600

#2563eb

bleu-france-600

700

#1d4ed8

bleu-france-700

800

#1e40af

bleu-france-800

900

#1e3a8a

bleu-france-900

950

#172554

bleu-france-950

rouge-incarnat

Couleur d'accent : mots mis en avant, alertes.

#fef2f2

rouge-incarnat-50

100

#fee2e2

rouge-incarnat-100

200

#fecaca

rouge-incarnat-200

300

#fca5a5

rouge-incarnat-300

400

#f87171

rouge-incarnat-400

500

#ef4444

rouge-incarnat-500

600

#dc2626

rouge-incarnat-600

700

#b91c1c

rouge-incarnat-700

800

#991b1b

rouge-incarnat-800

900

#7f1d1d

rouge-incarnat-900

Couleurs du quiz et des statuts

Vert, jaune, orange, rouge et gris signalent le niveau de dépendance.

Vert

#34d399

Jaune

#facc15

Orange

#fb923c

Rouge

#ef4444

Gris (non concerné)

#6b7280

Typographie

Sora (police sans empattement), auto-hébergée dans /assets/fonts/. Titres en semi-gras (600), texte en 400, mise en avant en 600 ou 700. Le texte courant a un espacement de lettres de 0,01 em.

H1 · text-5xl · 600

Reprenez le contrôle

H2 · text-3xl · 600

Des solutions adaptées à votre secteur

H3 · text-xl · 600

Passage au Cloud Privé

Texte courant · text-base · 400

Nous installons et maintenons des logiciels libres sur votre serveur, en France et en Europe.

Texte secondaire · text-sm · gris

TVA non applicable, art. 293 B du CGI

Mise en avant · rouge-incarnat

Reprenez le contrôle technique

Boutons

Même police que le site, coins arrondis, survol avec légère élévation.

Bouton principal Bouton secondaire Appel à l'action Contour bleu

Classes : btn-primary, btn-secondary, bg-bleu-france-600 … rounded-xl.

Bouton clair sur fond bleu Bouton fantôme

Composants

Pastille chip Cloud privé en 5 jours ouvrés Réponse sous 24 h ouvrées

card

Carte standard, bord arrondi 1,25 rem, ombre large.

card-elevated

Carte mise en avant, ombre plus forte.

card-soft

Carte discrète, sans ombre.

card-inline

Carte compacte.

Icônes

Icônes en traits (24 px, trait de 2 px, coins arrondis), définies dans includes/icons.php. Usage : <svg class="w-6 h-6"><use href="#icon-nom"/></svg>. Pas d'emojis.

refresh

star

book

download

shield

cloud

zap

chart

server

database

users

alert

check

arrow

phone

bar-chart

folder

lock

briefcase

calendar

heart-pulse

building

landmark

mail

key

unlock

clipboard

wrench

help

clock

map-pin

Jetons CSS

Variables définies dans css/custom.css (bloc :root).

Couleurs Primaires

`--color-bleu-900`	#1e3a8a
`--color-bleu-800`	#1e40af
`--color-bleu-700`	#1d4ed8
`--color-bleu-600`	#2563eb
`--color-bleu-500`	#3b82f6
`--color-bleu-100`	#dbeafe
`--color-bleu-50`	#eff6ff

Couleurs Accent

`--color-rouge-600`	#dc2626
`--color-rouge-500`	#ef4444
`--color-rouge-100`	#fee2e2
`--color-rouge-50`	#fef2f2

Couleurs Semantiques

`--color-success`	#10b981
`--color-success-light`	#d1fae5
`--color-warning`	#f59e0b
`--color-warning-light`	#fef3c7

Neutres

`--color-slate-900`	#0f172a
`--color-slate-700`	#334155
`--color-slate-500`	#64748b
`--color-slate-300`	#cbd5e1
`--color-slate-100`	#f1f5f9

Espacements

`--space-section`	5rem
`--space-section-lg`	7rem

Transitions

`--transition-fast`	150ms ease
`--transition-base`	300ms ease
`--transition-slow`	500ms ease

Ombres

`--shadow-sm`	0 1px 2px 0 rgb(0 0 0 / 0.05)
`--shadow-md`	0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
`--shadow-lg`	0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
`--shadow-xl`	0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)
`--shadow-glow-blue`	0 0 30px rgba(37, 99, 235, 0.3)
`--shadow-glow-red`	0 0 30px rgba(239, 68, 68, 0.3)

Border Radius

`--radius-sm`	0.5rem
`--radius-md`	0.75rem
`--radius-lg`	1rem
`--radius-xl`	1.5rem
`--radius-full`	9999px

UI Theme Tokens

`--ui-bg`	#f8fafc
`--ui-bg-strong`	#eef2ff
`--ui-surface`	#ffffff
`--ui-surface-2`	#f1f5f9
`--ui-border`	#e2e8f0
`--ui-text`	#0f172a
`--ui-muted`	#475569
`--ui-accent`	#1d4ed8
`--ui-accent-strong`	#0b3aa5
`--ui-accent-soft`	#dbeafe
`--ui-danger`	#b91c1c
`--ui-success`	#15803d
`--ui-focus`	#f59e0b

Principes

Une seule famille de police, Sora ; pas d'empattement.
Bleu France pour l'action et la structure, rouge incarnat pour la mise en avant ponctuelle.
Icônes en traits fins, jamais d'emojis.
Coins arrondis et ombres douces ; beaucoup d'espace blanc.
Texte sur fond bleu foncé : blanc ou bleu très clair, jamais de gris moyen.

Charte graphique