Charte graphique et médias

La mise en page reprend les codes d'un site d'office de tourisme de grande ville : pré-header de liens institutionnels, hero plein écran, titres en capitales, cartes photo, agenda en carrousel, pied de page avec horaires et labels. Les couleurs sont celles de l'identité EtherBay partagée avec le frontend web et l'application mobile (voir Design system et Thème et composants).

#Couleurs

Les couleurs sont déclarées une seule fois, en variables CSS, dans assets/css/tokens.css. Les feuilles de style n'utilisent que les variables sémantiques de la seconde colonne, jamais les valeurs hexadécimales.

#Contrastes

Ratios de contraste calculés selon la formule WCAG 2.1, à partir des valeurs de tokens.css :

C'est la raison d'être de la variante --eb-terracotta-text : la terracotta de la marque n'atteint pas 4,5:1 sur blanc et reste réservée aux titres. Sur le fond pierre des sections alternées, même la variante texte passe sous 4,5:1 : un petit texte d'accent posé sur --color-bg-alt doit utiliser l'encre douce.

Le site n'a pas de thème sombre : aucune règle prefers-color-scheme dans les feuilles de style.

#Typographie

Les échelles de taille sont fluides, avec clamp() : de --fs-hero (2,6 à 5,4 rem) à --fs-xs (0,8125 rem), le texte courant étant à --fs-body (1,125 rem, soit 18 px). Les espacements suivent la même logique : --gutter (20 à 40 px) et --section-space (64 à 120 px). Les conteneurs font 1180 px (--container) ou 1320 px (--container-wide).

#Polices auto-hébergées

Les sept fichiers WOFF2 sont dans assets/fonts/ et déclarés dans assets/css/fonts.css, un @font-face par graisse. Extrait, sans la ligne unicode-range qui limite chaque fichier aux caractères latins :

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}

Les deux polices sont sous licence SIL Open Font License 1.1, dont le texte accompagne les fichiers (LICENSE-inter.txt, LICENSE-jost.txt). Cette licence autorise l'embarquement et la redistribution, à condition de conserver ces fichiers.

#Identité visuelle

L'encart de localisation d'une fiche n'est pas une carte interactive : c'est le motif SVG, une épingle et l'adresse en texte. Aucun service de cartographie n'est appelé.

#Photos

Les 63 photos sont dans assets/img/photos/, pour environ 10,5 Mo au total.

Toutes sont des JPEG progressifs : le navigateur affiche une version floue dès les premiers octets. Selon le README du site, l'ensemble pesait 215 Mo avant redimensionnement et compression.

#Nommage

Une photo porte le nom du champ visual de la donnée qui l'utilise, qui vaut par défaut l'identifiant du lieu. visualSrc(name) de modules/utils.js construit le chemin :

export const visualSrc = (name) => `assets/img/photos/${name}.jpg`;

Pour changer la photo d'un lieu, remplacer le fichier en gardant son nom. Pour partager une photo entre plusieurs contenus, renseigner le même visual : la tuile « Les partenaires EtherPoints » réutilise ainsi loterie-citoyenne.jpg.

Les images des cartes sont chargées en différé (loading="lazy", decoding="async"). Elles ont un texte alternatif vide (alt="") : elles sont décoratives, le nom du lieu ou de l'événement étant toujours écrit à côté.

#Licence

Les photos proviennent de Pixabay et sont utilisées selon la licence de contenu Pixabay : usage libre, y compris commercial, sans attribution obligatoire. Les crédits sont tout de même indiqués dans les mentions légales du site, avec la précision que les lieux photographiés ne se trouvent pas à EtherBay. Le dépôt ne conserve pas l'URL d'origine de chaque photo.

La page Licences récapitule les licences de tout le dépôt.

#Ajouter une photo

1. Choisir une photo sous licence libre compatible et noter sa source.
2. La redimensionner à 1400 px de large (1920 px pour un bandeau pleine largeur).
3. L'enregistrer en JPEG progressif sous le nom <visual>.jpg.
4. Viser le poids des photos actuelles : 170 Ko en moyenne, 390 Ko au plus (musee-beaux-arts.jpg).

L'image Docker copie tout le dossier assets/ : aucune déclaration supplémentaire n'est nécessaire.