Charte graphique

1Le nom et le logo

Le logo officiel du réseau AGORAé (la tache turquoise aux mains levées) sert pour les documents institutionnels et la page de l'association. Pour l'en-tête du site, les signatures et les réseaux sociaux, on utilise le mini-logo AGORAé Caen, redessiné dans le même style : même tache, même turquoise, « AGORAé » et « CAEN » en blanc, centrés dans la tache.

Fichiers : images/logo-agorae-officiel.png (logo officiel), images/logo-agorae-caen.svg (mini-logo), images/favicon.svg (icône d'onglet).

• On écrit « AGORAé » : AGORA en capitales, é en minuscule. Jamais « Agorae » ni « AGORAE ».
• On écrit « la FCBN » ou, en entier, « Fédération Campus Basse-Normandie ».
• Fonds autorisés : blanc, turquoise pâle et nuit. Jamais sur un fond turquoise : la tache disparaît. Sur une photo, on place le logo sur un bandeau uni.
• Le mini-logo mesure au moins 80 px (ou 2,5 cm) de large, pour que « CAEN » reste lisible.
• On ne modifie pas la tache : pas d'ombre, de contour, de rotation, de déformation ni de changement de couleur.

2Les couleurs

Le turquoise du logo officiel est la couleur de la marque. Il est décliné en une version foncée pour tout ce qui porte du texte blanc (boutons, liens), et en une version pâle pour les fonds. Le nuit sert au texte. Le soleil reste un accent rare.

Le turquoise et ses déclinaisons

Couleurs d'appui

Neutres

Valeurs CMJN approximatives : à faire valider par l'imprimeur avant une grosse impression.

Proportions

Associations texte et fond

Contrastes mesurés selon les règles d'accessibilité du web (WCAG) : au moins 4,5 pour du texte courant, 3 pour un gros titre.

3La typographie

Une famille pour le latin, Archivo, et une pour l'arabe, Noto Sans Arabic. Les deux sont gratuites (licence SIL OFL) et intégrées au site (fonts.css et fonts-ar.css) : aucun appel à Google. Archivo existe en plusieurs largeurs : les titres et les chiffres sont légèrement élargis, le texte reste en largeur normale. Pour les affiches, les deux se téléchargent sur Google Fonts.

Échelle

• Titres en minuscules, avec une capitale au début seulement.
• Un titre reste d'une seule couleur : on ne met pas un mot en valeur avec une autre teinte.
• Texte aligné au début de la ligne (à gauche, à droite en arabe), jamais justifié. En français, espace insécable avant « : ? ! » et entre un nombre et son unité.
• En arabe, jamais d'espacement entre les lettres : l'écriture est liée.

4Formes et composants

Des arrondis discrets, des filets pour structurer, pas d'ombre forte ni de dégradé décoratif.

Boutons

Le texte dit ce qui va se passer : « Envoyer ma suggestion », pas « Valider ». Un seul bouton principal par bloc.

Chiffres clés

Les chiffres sont posés sur un bandeau turquoise, en nuit, très élargis.

Statut et niveaux d'accès

Captures d'écran

Les captures (par exemple de la plateforme de la FAGE) sont présentées dans une fenêtre de navigateur simplifiée.

5Le mouvement

Des effets sobres, qui accompagnent la lecture sans la retarder.

• Au défilement, les blocs glissent en place depuis la gauche ou la droite (0,8 s), en cascade quand ils sont côte à côte. En arabe, les sens s'inversent.
• Les chiffres clés défilent de 0 jusqu'à leur valeur quand ils arrivent à l'écran (1,6 s).
• Les photos ne sont jamais recadrées, zoomées ni dévoilées par un volet : elles arrivent avec leur bloc.
• Le carrousel de l'accueil passe d'une photo à l'autre en fondu, toutes les 6 secondes. Il s'arrête au survol et a un bouton Pause.
• Les menus déroulants s'ouvrent en fondu court (0,2 s).
• Le passage d'une page à l'autre se fait en fondu, l'en-tête restant en place (navigateurs compatibles).
• Le point turquoise du statut « ouvert » pulse doucement.
• Si le visiteur a réglé « réduire les animations » sur son appareil, tout devient immobile.

6Les photos

Les photos de démonstration actuelles (Unsplash) sont à remplacer par de vraies photos de l'AGORAé Caen.

• De vraies situations : les rayons, les ateliers, les bénévoles, le lieu de vie. Lumière naturelle, couleurs franches.
• On ne montre jamais un bénéficiaire reconnaissable en train de faire ses courses ou de passer en caisse.
• Toute personne reconnaissable donne son accord écrit avant publication (droit à l'image).
• Formats utilisés sur le site : 5:4 (carrousel), 4:3 (en-têtes de page), 3:2 (blocs), 1:1 (mosaïque). Au moins 1600 px de large, en .jpg ou .webp, moins de 400 Ko.
• Le sujet au centre : les photos sont recadrées automatiquement selon l'écran.

7Le ton et les langues

On s'adresse aux étudiants en les tutoyant, avec des phrases courtes et des mots simples. Des faits concrets plutôt que des slogans. Jamais de jugement ni de vocabulaire qui stigmatise.

• Le site existe en français, en anglais et en arabe. Le français fait référence : toute nouvelle page est rédigée en français, puis traduite (fichiers lang/en.js et lang/ar.js).
• En anglais, on garde le même ton direct (« you »). En arabe, un registre standard moderne, simple et chaleureux.
• Les noms propres restent en français : AGORAé, FCBN, FAGE, Crous, CAF, l'adresse postale.