Identité visuelle
Charte graphique
Les règles visuelles du site EnerTchad, telles qu’elles sont en ligne : couleurs, typographies, mise en page et composants. Chaque exemple de cette page est rendu avec le code du site, dans le thème clair comme dans le thème sombre.
01 · Principes
Une société en constitution qui écrit comme une major.
Quatre règles tiennent l’ensemble. Elles valent pour toutes les pages, en français, en anglais et en arabe.
Grand serif sur fond clair, texte aéré, une idée par bloc. La page se lit comme un rapport annuel, pas comme une publicité.
Chaque page de pôle et de métier s’ouvre sur une photographie pleine largeur ; les pages de référence et d’aide, sur un héros sobre, sans image.
Les sections sont à plat, séparées par des filets fins et par l’alternance blanc / brume. Ni ombre portée, ni coins arrondis, ni dégradé décoratif.
L’or sert aux filets, aux sur-titres et aux chiffres. Il ne colore jamais un aplat de texte courant ; les pôles se distinguent par l’image et le titre, pas par la couleur.
02 · Couleurs
Encre, brume, or.
Une palette courte, définie par des variables : le thème sombre ne change que leurs valeurs. Les huit accents par pôle des versions précédentes ne sont plus utilisés.
Thème clair
Le thème par défaut.
Texte en encre sur papier ; l’or encre porte les sur-titres et les chiffres.
- Papier#FFFFFF · --pp-paperfond des sections
- Brume#F4F5F7 · --pp-mistune section sur deux, encadrés
- Encre#0A1A2F · --pp-inktitres et texte
- Encre seconde#4B5870 · --pp-ink2chapeaux, descriptions
- Filet#E3E6EB · --pp-lineséparations
- Or#B8913A · --pp-goldfilets et puces, jamais du texte
- Or encre#7A5A12 · --pp-gold-inksur-titres, chiffres, liens au survol
Thème sombre
Mêmes rôles, autres valeurs.
Suit le réglage du système ou le bouton de thème ; l’or s’éclaircit pour rester lisible.
- Papier#0A1422 · --pp-paperfond
- Brume#0F1B2C · --pp-mistalternance
- Encre#F1F3F6 · --pp-inktitres et texte
- Encre seconde#A9B4C4 · --pp-ink2texte secondaire
- Filet#22314A · --pp-lineséparations
- Or#D9B567 · --pp-goldfilets, sur-titres, chiffres
Nuit
Le héros et l’appel à l’action.
Le seul fond foncé du thème clair : sous la photographie des héros, dans le héros sobre et dans le chapitre final.
- Nuit#07111Fhéros et appel à l’action
- Encre de nuit#F3F1EC · --pp-night-inktexte sur la nuit
- Encre de nuit seconde#B4BDCB · --pp-night-2texte secondaire
- Or de nuit#D9B567 · --pp-gold-nightboutons et filets sur la nuit
03 · Typographies
Un serif pour la voix, un linéale pour le texte.
Deux familles seulement. Instrument Serif, en graisse normale, porte les titres et les chiffres ; Inter porte le texte, les sur-titres et l’interface. Les titres ne sont jamais en gras.
- Instrument Seriftitres et chiffres ; repli Iowan Old Style, puis Georgia. Fichier latin préchargé, affichage « swap ».
- Intertexte et interface en 400, 500 et 600 ; repli sur la police système.
- Tailles fluidesles titres de page et de section varient avec la largeur de l’écran (fonction clamp) ; le texte reste à 17 px.
04 · Mise en page
Une grille large, un rythme lent.
La page avance par sections à plat ; l’espace blanc fait la hiérarchie avant la couleur.
- Largeurcontenu borné à 1 200 px, centré ; marges latérales de 16 à 40 px selon l’écran.
- Rythmesections espacées de 72 à 128 px ; en-tête de section limité à 780 px de large, texte à environ 72 signes.
- Alternanceune section sur deux sur fond brume ; les sections sont séparées par le changement de fond, sans filet supplémentaire.
- Blocsà l’intérieur d’une section, un bloc place le titre à gauche (un tiers) et le texte à droite ; sur mobile, le titre passe au-dessus.
- Rupturesdeux largeurs de rupture : 1 000 px (grilles à deux colonnes) et 760 px (une colonne).
Photographie pleine largeur assombrie à gauche et en bas, fil d’Ariane, sur-titre, titre de page, chapeau, un bouton blanc et un lien, puis jusqu’à trois chiffres. Pour les pôles, les métiers et les pages commerciales.
Même composition sur fond nuit, sans photographie, souligné d’un filet or ; plus compact. Pour l’aide, les références, la gouvernance et les pages légales.
05 · Composants
Des pièces simples, réutilisées partout.
Les exemples ci-dessous sont rendus avec les classes du site : ce que montre la charte est ce que voit le visiteur. Les outils interactifs (calculateurs, formulaires, boutique) gardent leur propre habillage et sont insérés tels quels.
Actions
Boutons et liens
Un bouton plein par écran au plus ; les autres actions sont des liens soulignés d’or, la flèche est dessinée par la feuille.
Grille
Cartes
Éléments comparables : titre court, deux lignes de texte, filet supérieur. Trois ou quatre par rangée.
Récupération assistée à intrants locaux.
Corridor, dépôts, intégrité des conduites.
Mini-raffineries, stations, prix réglementé.
Chiffres
Compteurs
Chiffre en serif, libellé dessous ; toujours daté et qualifié (cible, secteur, en constitution).
Encadré
Note
Filet or à gauche, fond brume : avertissements, précisions de méthode.
Étiquettes
Pastilles et mentions
Pastilles pour les mots-clés, mentions séparées par un point médian pour les dates et les rubriques.
Liste
Libellé et valeur
- Forme juridiqueSociété anonyme de droit OHADA, en constitution.
- SiègeN’Djamena, Tchad.
Séquence
Étapes
Navigation
Cartes de navigation
Questions
Question repliable
01 Qu’est-ce qu’EnerTchad S.A. ?
Une société anonyme de droit OHADA, à capitaux tchadiens, en constitution.
02 EnerTchad produit-elle déjà du pétrole ?
Non : aucun actif n’est en exploitation à ce jour.
Données
Tableau
| Produit | Norme | Prix |
|---|---|---|
| Gazole | EN 590 | 800 FCFA/L |
| Essence | NF EN 228 | 700 FCFA/L |
Sur mobile, le tableau défile seul, sans élargir la page.
06 · Accessibilité
Lisible par tous, dans les deux thèmes.
Chaque publication est vérifiée automatiquement sur toutes les pages premium, en thème clair sur grand écran et en thème sombre sur mobile.
- Contraste, thème clairencre sur papier 17,5 : 1 ; encre seconde 7,2 : 1 (sur brume 6,6 : 1) ; or encre 6,4 : 1. L’or (2,9 : 1) ne sert qu’aux filets.
- Contraste, thème sombreencre 16,6 : 1 ; encre seconde 8,8 : 1 ; or 9,5 : 1.
- Contraste, nuitencre de nuit 16,8 : 1 ; encre de nuit seconde 10,0 : 1. Toutes les paires de texte dépassent le niveau AA (4,5 : 1).
- Claviertout élément actif reçoit un contour or de 2 px au focus ; un lien d’évitement mène au contenu principal.
- Ciblesliens, boutons et pastilles mesurent au moins 44 px de haut.
- Mouvementles animations sont coupées quand le système demande de réduire les mouvements.
- Imageschaque photographie porte un texte de remplacement descriptif ; les images décoratives sont masquées aux lecteurs d’écran.
- Thèmesclair par défaut ; le sombre suit le réglage du système ou le bouton de thème, et le choix est mémorisé.
07 · Arabe
Le mini-site arabe, de droite à gauche.
Mêmes couleurs et mêmes composants ; seules la direction, les polices et le cadrage des images changent.
- Sens de lectureles pages arabes sont écrites de droite à gauche (attribut dir="rtl") ; grilles, filets et flèches suivent ce sens.
- PolicesNoto Naskh Arabic (graisse 500) pour les titres et les chiffres, Noto Sans Arabic pour le texte, à 17 px avec un interligne de 1,85.
- Chargementfichiers arabes préchargés et affichés sans substitution tardive (« optional ») ; le serif de repli est Georgia, pour éviter tout décalage de mise en page.
- Photographiesles photographies des héros sont retournées horizontalement, pour que la zone sombre accueille le texte à droite.
- Feuille proprele mini-site a sa feuille (home-inline-ar-premium.css), qui reprend les variables et les composants de cette charte.
08 · Gabarit de page
Combien de sections, combien de mots.
Une page qui déborde son gabarit se lit mal et se référence mal. La norme ci-dessous est calée sur les pages de référence des majeurs, mesurées au rendu — contenu principal seul, barre de navigation, pied, bandeau d’appel à l’action et encarts exclus.
Au-delà de huit sections, la page porte un index « Dans cette page » qui liste ses propres repères et suit la position au défilement — c’est le dispositif que les majeurs posent sur leurs pages longues.