Le CSS personnalisé

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.

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é.

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.

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.

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.

/* 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.

/* 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.

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

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

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 :

/* 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.

À 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 : ce que chaque thème règle déjà, avant d'écrire une ligne.
• Personnaliser les gabarits du thème : quand le CSS ne suffit plus et qu'il faut modifier le HTML.
• Performance : garder 100 sur 100 : pourquoi chaque kilo-octet de CSS compte.
• Sources : les propriétés personnalisées CSS et prefers-color-scheme, sur MDN.

Toutes les leçons du parcours