L'Avenir

01 · Logo

Le logotype et l'icône

Le logo se construit avec des formes simples et épurées, signe de qualité et de professionnalisme. Dans sa version réduite, il devient une icône : le « 'A ». L'apostrophe fait le lien entre l'histoire de la marque (le « l » à gauche) et son futur (« Avenir » à droite). Elle équilibre aussi l'icône face à l'inclinaison du A.

Inclinaison. Pour une vision dynamique et positive, le logo se tourne vers l'avenir avec une inclinaison de 9,5° vers la droite. Cet angle se retrouve dans tout l'univers graphique (aplats, découpes, transitions).

9,5°

Espace de sécurité. Il se mesure avec la lettre « r » du logo, tout autour du logotype comme de l'icône. Si l'espace ou le support ne permet pas une lisibilité suffisante, on privilégie l'icône.

marge = largeur du « r »

Sur quels fonds. Vert sur Forêt, Forêt sur Vert, blanc sur image. Les deux verts se répondent toujours.

Vert / Forêt

Forêt / Vert

Forêt / blanc

Blanc / image

À ne pas faire. Les interdits de la charte, valables pour le logo et l'icône.

02 · Couleurs

Couleurs principales

Deux verts principaux qui se complètent : le Vert l'Avenir, éclatant, et le Vert Forêt, profond. Pensées pour le digital, ces teintes peuvent légèrement varier en CMJN ; une impression spéciale ou Pantone permet de s'en rapprocher. Cliquer sur une valeur la copie.

Accessibilité. Le Vert l'Avenir n'offre que 1,7:1 de contraste avec le blanc : jamais de texte vert sur fond blanc, ni de texte blanc sur fond vert. Le duo qui fonctionne est vert sur Forêt (ou Forêt sur vert), 7,7:1. Sur le site, les titres de chaînes et de box sont en vert sur blanc : c'est un point à corriger.

Couleurs secondaires

Pour différencier certains contenus et donner plus de liberté à l'univers graphique, toujours en respectant la hiérarchie des deux verts. Elles servent notamment à distinguer les thèmes sur les réseaux sociaux.

Coquille dans la charte PDF. Le Rosé y est noté HEX #0A3623 (le code du Vert Forêt). Son RVB 255 · 110 · 151 donne #FF6E97, la valeur retenue ici.

Couleurs du site

Les neutres réellement utilisés sur lavenir.net.

Abonnement

Le jaune signale l'univers payant : bouton S'abonner, badge « article offert », cadenas.

03 · Rubriques

Couleurs de rubriques

Sur lavenir.net, chaque rubrique reçoit une couleur injectée par le CMS (Arc) dans --section-color-primary. Elle colore les liens du menu, les intertitres et les listes numérotées dans les articles.

À savoir. Ces couleurs viennent de l'ancienne charte du site et ne reprennent pas la palette secondaire de la nouvelle identité. Les intertitres utilisent parfois des variantes (sport #CC0000, actu #000000). Une harmonisation avec la nouvelle charte serait logique.

04 · Typographie

Trois polices, trois rôles

Ambit pour la communication, Lato pour le site, Georgia pour le corps de texte du journal papier.

Ambit

Police principale de l'identité : posts réseaux sociaux, visuels de campagne, documents. Ses courbes arrondies et dynamiques incarnent le renouveau de L'Avenir. Police payante (CoType Foundry) : elle n'est pas hébergée ici, licence à prévoir pour chaque usage.

Lato

Georgia

Échelle du site

Tailles réellement appliquées sur lavenir.net, relevées dans la feuille de style. Bascule mobile → desktop à 768 px.

Les polices

05 · Ton

Tone of voice

Nos valeurs façonnent la relation avec les lecteurs, des contenus jusqu'à la façon de collaborer en interne. Chaque personne est le prolongement de L'Avenir.

06 · Composants

Boutons et badges

Rayon de 0,25 rem, padding 0,5 × 0,75 rem, Lato Regular 16 px. Le bouton primaire est noir avec un texte vert ; le focus clavier dessine un halo vert à 50 %.

• Primairefond #141415 · texte #00E25D · survol #000
• Abonnementfond #FED80B · texte #1D1D1B · survol #F7B500
• Secondairefond blanc · bordure #D1D8DD · texte #141415
• Marquefond #00E25D · texte #0A3623 (proposition, usage dossiers)
• Badge offertpilule · #F7B500 / #1D1D1B · 13 px
• Ombre douce0 3px 10px rgba(5,68,58,.2)

Teasers et chaînes

Titre en Lato Bold, surtitre gris avec la rubrique en vert. Le titre de chaîne est centré en Lato Bold 20 px.

07 · Social Media

Réseaux sociaux

Trois modèles de visuels aux couleurs de L'Avenir, à faire soi-même dans le générateur de la toolbox : un clic sur un exemple l'ouvre avec la bonne marque. proposition

Citation Chiffre clé En direct

• Formats1080 × 1080 (post) · 1080 × 1350 (Instagram) · 1080 × 1920 (story)
• Zones de sécurité6 % sur les côtés, 14 % en haut et en bas en story (recommandations Meta)
• Logoen haut à gauche, version blanche sur fond sombre ou photo
• Texteune idée par visuel ; si le texte rétrécit beaucoup, il est trop long

Modèles proposés par la toolbox, pas encore validés par l'équipe réseaux de L'Avenir. Si elle a ses propres gabarits, ils prennent le dessus.

08 · Accessibilité

Les couleurs, au contraste

Les paires de couleurs de la charte, mesurées selon les WCAG 2.1 : 4,5:1 pour le texte courant, 3:1 pour le texte de plus de 24 px (ou 19 px en gras). Les ratios sont calculés ; les lignes « test » vérifient une combinaison possible, pas forcément utilisée sur le site. calcul

• Cible tactile44 × 44 px minimum pour tout élément cliquable sur mobile
• Couleur seulejamais : une rubrique, une erreur ou un statut se lisent aussi en texte
• Mouvementrespecter le réglage « réduire les animations » (prefers-reduced-motion)
• Longueur de ligne45 à 75 caractères pour le texte courant
• Imagestexte alternatif sur chaque image qui porte une information

09 · Pictos et composants

Les pictos du site, en Font Awesome Free

Relevés sur lavenir.net le 14 octobre 2026 (accueil). Le site utilise fa-solid pour l'interface et fa-brands pour les réseaux : on garde la même règle. Tous ces pictos existent dans la version gratuite. Un clic sur une classe la copie. site

• Accueil, début du fil d'Arianefa-solid fa-house
• Rechercherfa-solid fa-magnifying-glass
• Se connecterfa-solid fa-user
• Newslettersfa-solid fa-envelope
• Alertez-nousfa-solid fa-bullhorn
• Mon Avenirfa-solid fa-heart
• Voir plusfa-solid fa-arrow-right
• Retourfa-solid fa-arrow-left
• Faire défiler le menule site le pivote pour la flèche droite ; ici fa-chevron-rightfa-solid fa-chevron-left · fa-chevron-right
• Afficher les sous-rubriquesfa-solid fa-chevron-down
• Fermerfa-solid fa-xmark
• Les applications mobilesfa-solid fa-mobile-screen-button
• Flux RSSfa-solid fa-rss
• Concoursfa-solid fa-gift
• Boutiquefa-solid fa-bag-shopping
• Facebookfa-brands fa-facebook-f
• Xfa-brands fa-x-twitter
• Instagramfa-brands fa-instagram

Hors version gratuite : l'équivalent proposé

• Bouton lecture des vidéossur le site : icône duotone de Font Awesome Pro (version 5)fa-solid fa-circle-play

Les pictos propres à la marque (journal du jour, abonné, mots croisés...) restent des dessins maison : Font Awesome ne les remplace pas.

Les composants, en Bootstrap

Le site tourne sur Arc XP, avec ses propres classes (ap-...) et sans Bootstrap. Pour reproduire ces éléments dans nos projets, voici l'équivalent sur le socle commun, à charger avec le thème ipm-bootstrap-lavenir.css. proposition

Composants relevés sur la page d'accueil ; une page article ou une page rubrique peut en contenir d'autres. Démo des composants : socle Bootstrap.

10 · Développeurs

Tokens prêts à brancher

L'essentiel en variables CSS. Le fichier complet et sa version JSON sont dans les téléchargements.

/* L'Avenir · tokens essentiels */
:root {
  --lav-vert:      #00E25D;  /* principale */
  --lav-foret:     #0A3623;  /* principale sombre */
  --lav-ink:       #141415;  /* titres, bouton primaire */
  --lav-text:      #23272C;  /* texte courant */
  --lav-pay:       #FED80B;  /* abonnement */
  --lav-font-web:  "Lato", "Helvetica Neue", Arial, sans-serif;
  --lav-radius:    .25rem;
  --lav-logo-angle: 9.5deg;
}

Piège de nommage. Dans le CSS du site, --color-primary vaut #141415 (noir) et --color-secondary vaut #00E25D (vert). Côté marque, le vert est la couleur principale. La meta theme-color du site est #7AFC53, un vert différent de la charte.

• Conteneur992 px (md) · 1120 px (lg)
• Breakpoints480 · 768 · 992 · 1024 · 1200 px
• Focus0 0 0 3px rgba(80,170,80,.5)
• Polices du siteLato 400 · 700 · 900 en local (/pf/resources/fonts/lavenir/)
• CMS / frontArc XP (PageBuilder Fusion), même socle que lalibre.be

Socle commun

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="ipm-bootstrap-lavenir.css">