---
title: "Le CSS personnalisé"
description: "Ajoute ton CSS personnalisé dans Éclair avec les variables du thème, des exemples testés pour boutons, titres, bannière, cartes et FAQ, et les pièges à éviter."
url: "https://eclair.academy/parcours/intermediaire/css-personnalise"
lang: "fr"
author: "Thierry Gustin"
published: "2026-11-02"
updated: "2026-11-02"
---

# Le CSS personnalisé

> **L’essentiel** — Le CSS personnalisé se saisit dans Réglages › Apparence, champ CSS personnalisé. Il est ajouté après le thème dans chaque page, donc il l'emporte, et il est rangé dans data/, donc les mises à jour le conservent. Utilise les variables du thème (--accent, --bg, --text…) pour rester compatible avec le mode sombre, sans dépasser 64 Ko.

Le CSS personnalisé te permet d'aller plus loin que le thème : des boutons plus carrés, des intertitres colorés, des cartes plus compactes. Tes règles s'ajoutent après le thème dans chaque page et survivent aux mises à jour. Cette leçon montre où les écrire, quelles variables utiliser, et donne des exemples testés sur le site d'Atelier Nova.

> **Avant de commencer** — Durée : 30 minutes. Prérequis : des notions de base en CSS (sélecteur, propriété, valeur) et un thème ou une direction déjà choisis ([thèmes et apparence](https://eclair.academy/parcours/intermediaire/themes-apparence), [directions artistiques](https://eclair.academy/parcours/intermediaire/directions-artistiques)). Garde sous la main l'outil d'inspection de ton navigateur : clic droit sur un élément, puis **Inspecter** ou **Examiner l'élément**.

## Ce que tu sauras faire

### 🛠 Écrire des règles qui durent

Savoir où saisir ton CSS, comment il s'applique et pourquoi il survit aux mises à jour.

### 🎨 Personnaliser sans casser

Utiliser les variables du thème pour respecter couleurs, mode sombre et contrastes.

### ✅ Tester proprement

Vérifier tes règles dans l'aperçu, en mode Visuel et en mode sombre.

## Où saisir ton CSS personnalisé ?

1. Ouvre **Réglages › Apparence** et descends jusqu'au champ **CSS personnalisé**, sous le texte du pied de page.
2. Colle ou écris tes règles.
3. Clique sur **Enregistrer** : le cache du site est vidé et tes règles s'appliquent aussitôt sur toutes les pages.

Le champ le rappelle : ton CSS est « ajouté après le thème dans chaque page, il l'emporte sur lui ». Il est inséré dans la balise `<style>` de chaque page, après la feuille de base et celle du thème ou de la direction artistique : à sélecteur égal, ta règle gagne. Il est rangé avec tes données, dans `data/`, un dossier que la mise à jour ne touche pas, et il figure dans la sauvegarde ZIP de la page Sécurité.

![Réglages › Apparence : le champ CSS personnalisé et son rappel de 64 Ko maximum](https://eclair.academy/media/2026/11/eclair-academy-settings-css-fr.webp)
*Le champ CSS personnalisé, en bas de l'onglet Apparence*

## Les règles de sécurité du champ

Comme ce CSS est inséré dans chaque page, Éclair le nettoie avant de l'enregistrer :

- le caractère `<` est retiré, pour qu'aucune règle ne puisse fermer la balise de style : la syntaxe `@media (width < 40rem)` ne fonctionne donc pas, écris `@media (max-width:40rem)` ;
- les règles `@import` sont retirées : aucune feuille externe ne peut bloquer l'affichage ;
- les caractères de contrôle invisibles sont supprimés ;
- la taille est limitée à 64 Ko, et au-delà l'enregistrement est refusé ;
- tes commentaires `/* … */` restent dans le champ, mais la page reçoit une version compacte, sans eux.

> **Pas de police externe** — La politique de sécurité du site (CSP) n'autorise que les polices servies par ton site. Pour une police de caractère, choisis une direction artistique : sa police de titre est téléchargée une fois par ton serveur.

## Les variables du thème à utiliser

Le thème décrit ses couleurs et ses formes avec des variables CSS. Utilise-les plutôt que des valeurs fixes : en mode sombre automatique, le thème redéfinit ces variables et tes règles suivent sans effort. Une règle avec `background:#fff` resterait blanche sur un site devenu sombre ; avec `background:var(--card)`, elle s'adapte.

| Variable | Rôle |
| --- | --- |
| `--accent` | Couleur principale : fond des boutons, puces, filets |
| `--link-c` | Couleur des liens, contraste vérifié : à préférer pour un texte coloré |
| `--bg` | Fond de la page |
| `--bg-soft` | Fond doux : pied de page, sommaire, encadrés |
| `--card` | Fond des cartes et des questions de FAQ |
| `--text` | Couleur du texte |
| `--muted` | Texte secondaire : dates, légendes, extraits |
| `--line` | Filets et bordures |
| `--radius` | Arrondi des cartes, des atouts et du sommaire (16 px dans le thème Éclair) |
| `--shadow` | Ombre des cartes et des atouts (aucune dans Studio, Éditorial et Contraste) |
| `--font` et `--font-head` | Police du texte, police des titres |
| `--text-w` | Largeur de la colonne de lecture (42rem par défaut) |

Les directions artistiques définissent les mêmes variables, plus `--btn-r` pour l'arrondi des boutons : tes règles fonctionnent avec les deux. Une exception : ne redéfinis pas `--accent`. Éclair calcule à partir de la couleur principale le texte des boutons et la couleur des liens ; une couleur changée en CSS échapperait à ce calcul de contraste.

## Exemples commentés pour Atelier Nova

Chaque exemple se colle tel quel. Ajoute-les un par un et regarde le résultat avant de passer au suivant.

```css
/* Coins plus discrets et colonne de lecture un peu plus large */
:root{--radius:10px;--text-w:46rem}

/* Boutons : coins assortis aux cartes, texte en capitales espacées */
.btn{border-radius:var(--radius);text-transform:uppercase;letter-spacing:.06em}

/* Intertitres H2 de tes textes : couleur des liens, contraste vérifié */
.content>h2{color:var(--link-c)}
```

La règle `.content>h2` ne vise que les intertitres de tes textes : les titres d'une FAQ ou d'un bloc Atouts sont rangés dans leur propre section et restent intacts.

```css
/* Bannière : titre moins massif, accroche dans la couleur du texte */
.hero-title{font-size:clamp(2rem, 1.5rem + 2.4vw, 3.2rem)}
.hero-lead{color:var(--text)}

/* Cartes d'articles : photo au format 4/3, extrait limité à 2 lignes */
.card-img img{aspect-ratio:4/3}
.card-excerpt{-webkit-line-clamp:2}

/* FAQ : la question ouverte se distingue */
.faq details[open]{border-color:var(--accent)}
.faq details[open] summary{color:var(--link-c)}

/* Encadrés avec un trait à gauche, pied de page souligné */
.callout{border-left:4px solid var(--accent)}
.site-footer{border-top:3px solid var(--accent)}

/* Sur téléphone, bannière plus compacte */
@media (max-width:40rem){.hero{padding-top:2rem;padding-bottom:1rem}}
```

Deux repères du thème fonctionnent aussi dans ton CSS. Les règles placées entre `/*dark*/` et `/*/dark*/` disparaissent quand le mode sombre est réglé sur « Toujours clair ». Celles placées entre `/*shop*/` et `/*/shop*/` ne sont envoyées que si la boutique est ouverte.

```css
/*dark*/@media (prefers-color-scheme:dark){
  .hero-img img{filter:brightness(.9)}
}/*/dark*/

/*shop*/
.price .price-now{color:var(--link-c)}
/*/shop*/
```

> **Direction artistique et mode sombre** — Avec une direction artistique, le site n'a plus de mode sombre automatique, mais une règle `prefers-color-scheme:dark` de ton CSS s'appliquerait quand même aux visiteurs dont l'appareil est en mode sombre. N'en écris pas : la direction fixe déjà un fond clair ou sombre.

## Pourquoi ta règle ne s'applique-t-elle pas ?

Ton CSS arrive en dernier : à sélecteur égal, il gagne. Mais un sélecteur plus précis du thème l'emporte quand même. Trois cas réels : la lettrine des articles du thème Éditorial (`.content.post>p:first-of-type::first-letter`), les images des cartes en mode liste (`.cards-list .card-img img`) et les photos carrées des produits (`.product-card .card-img img`). La solution consiste à reprendre le même sélecteur :

```css
/* Thème Éditorial : pas de lettrine en début d'article */
.content.post>p:first-of-type::first-letter{float:none;font:inherit;margin:0;color:inherit}
```

Pour cibler un type de page, la balise `<body>` porte des classes utiles : `is-post` pour un article, `is-page` pour une page, `is-list` pour le blog et les catégories, `hdr-center` pour l'en-tête centré, `cards-list` pour les listes en mode liste. Évite `!important` : la règle devient très difficile à corriger ensuite.

## Tester tes règles sans surprise

1. Écris une règle à la fois, avec un commentaire qui dit ce qu'elle fait.
2. Clique sur **Enregistrer**, puis regarde l'**Aperçu en direct** : l'accueil, un article, puis la boutique si elle est ouverte, en **Ordinateur** et en **Mobile**.
3. Ouvre une page dans l'éditeur en mode Visuel et passe en largeur 390 px.
4. Si le mode sombre est « Automatique », passe ton appareil en mode sombre et recharge le site.
5. Garde une copie datée de ton CSS dans un fichier texte.

![Réglages › Apparence : l'aperçu en direct du site, avec le choix entre ordinateur et mobile](https://eclair.academy/media/2026/11/eclair-academy-appearance-fr.webp)
*L'aperçu en direct, ton banc d'essai après chaque enregistrement*

> **Enregistre avant de vérifier** — L'aperçu en direct et le mode Visuel affichent le CSS enregistré, pas celui que tu es en train de taper. Enregistre d'abord, puis vérifie.

## À retenir

- Ton CSS se saisit dans Réglages › Apparence, s'ajoute après le thème et survit aux mises à jour.
- Écris avec les variables du thème (`--bg`, `--text`, `--link-c`…) pour suivre le mode sombre.
- Ne change jamais la couleur principale en CSS : utilise le réglage prévu.
- Le caractère `<` et les `@import` sont retirés, et le champ accepte 64 Ko au plus.
- Enregistre, puis vérifie dans l'aperçu, en mode Visuel et en mode sombre.

## Pour aller plus loin

- [Thèmes et apparence](https://eclair.academy/parcours/intermediaire/themes-apparence) : ce que chaque thème règle déjà, avant d'écrire une ligne.
- [Personnaliser les gabarits du thème](https://eclair.academy/parcours/expert/personnaliser-theme) : quand le CSS ne suffit plus et qu'il faut modifier le HTML.
- [Performance : garder 100 sur 100](https://eclair.academy/parcours/expert/performance) : pourquoi chaque kilo-octet de CSS compte.
- Sources : [les propriétés personnalisées CSS](https://developer.mozilla.org/fr/docs/Web/CSS/Using_CSS_custom_properties) et [prefers-color-scheme](https://developer.mozilla.org/fr/docs/Web/CSS/@media/prefers-color-scheme), sur MDN.

## Questions fréquentes

### Mon CSS personnalisé disparaît-il lors d'une mise à jour d'Éclair ?

Non : il est rangé dans le dossier `data/`, que la procédure de mise à jour ne touche pas. Il fait aussi partie de la sauvegarde ZIP téléchargée depuis la page Sécurité.

### Pourquoi ma condition « width &lt; 600px » ne fonctionne-t-elle pas ?

Par sécurité, Éclair retire le caractère `<` de ton CSS. Écris la condition avec max-width, par exemple `@media (max-width:37.5rem)`.

### Puis-je importer une police Google Fonts ?

Non : les règles `@import` sont retirées et la politique de sécurité du site n'accepte que les polices servies par ton site. Si tu tiens à une police de caractère, passe par une direction artistique.

### Mon CSS ralentit-il le site ?

Il est inséré dans chaque page, sous forme compacte. Quelques dizaines de lignes ne pèsent que 1 ou 2 Ko : garde-le court et supprime les règles devenues inutiles.

### Pourquoi mes changements n'apparaissent-ils pas dans l'aperçu ?

L'aperçu en direct et le mode Visuel utilisent le CSS enregistré. Clique sur **Enregistrer**, puis recharge l'aperçu ; sur le site public, le cache est vidé automatiquement.