Blocs

Chaque bloc de la bibliothèque Figma (section « Blocs » 92:3) et des blocs V2, en HTML : la classe à poser est sous son nom. Le même balisage passe de la Ville à Eole par le mode de couleur.

VilleEole · CyanEole · SaumonEole · VioletEole · Jaune

A · Icônes et illustrations

Icônes d’interface

.ico · grille 24, trait 1,5 px, décoratives (aria-hidden)

  • loupe
  • affichage
  • fleche
  • fleche-externe
  • menu
  • fermer
  • chevron-gauche
  • chevron-droit
  • chevron-bas
  • info
  • attention
  • urgence
  • erreur
  • calendrier
  • telecharger
  • coche
  • plus
  • moins
  • billet
  • pause
  • lecture
  • horloge
  • lieu
  • telephone

Icônes de service (R1)

.ico · préfixe s- dans le sprite, toujours avec leur libellé

  • s-demarches
  • s-papiers-identite
  • s-etat-civil
  • s-elections
  • s-urbanisme
  • s-salle
  • s-aides-sociales
  • s-handicap
  • s-nouvel-arrivant
  • s-petite-enfance
  • s-ecole
  • s-periscolaire
  • s-cantine
  • s-inscriptions
  • s-jeunesse
  • s-seniors
  • s-famille
  • s-signaler
  • s-travaux
  • s-voirie
  • s-stationnement
  • s-transports
  • s-velo
  • s-dechets
  • s-proprete
  • s-securite
  • s-nature
  • s-eau
  • s-carte
  • s-commerces
  • s-marche
  • s-culture
  • s-spectacle
  • s-cinema
  • s-mediatheque
  • s-musique
  • s-sport
  • s-associations
  • s-parcours
  • s-patrimoine
  • s-aqueduc
  • s-photos
  • s-agenda
  • s-annuaires
  • s-mairie
  • s-horaires
  • s-contact
  • s-telephone
  • s-emploi
  • s-actualites
  • s-lettre
  • s-application
  • s-sante
  • s-budget

Illustrations de service

.illustration · grille 160, tireté 4/4 = suggéré

  • demarches
  • enfance
  • vie-pratique
  • culture-sport-loisirs
  • mairie
  • nouveau-a-craponne
  • lettre-ville
  • lettre-eole
  • application
  • decouvrir-craponne
  • patrimoine

B · Actions

Boutons

.bouton · primaire (un par écran) · secondaire · aria-disabled · avec icône ; 56 px, rayon 0

Prendre rendez-vousNous contacterComplet

Liens flèche, lien retour

.lien-fleche

Tout l’agendaPrendre rendez-vous (site externe)Étape précédente

Pastilles

.pastille · button aria-pressed ; l’état actif porte la coche

Pagination

.pagination

C · Formulaires

Champs de formulaire et erreurs

.champ · ordre GOV.UK : libellé, aide, erreur (mot + icône), contrôle

Le nom tel qu’il paraîtra dans l’agenda.

Erreur : Saisissez le lieu

Public

Résumé d’erreurs

.resume-erreurs · role="alert" et focus quand il apparaît

Il y a un problème

Étapes

.etapes

Étape 2 sur 4 : Vos pièces

  1. Vous
  2. Vos pièces
  3. Le rendez-vous
  4. Vérifier

Recherche · champ souligné et héros

.recherche · suggestions dès 3 caractères (combobox) ; héros : Bouton primaire « Rechercher » à ≥ 1 024

Lettre d’information

.lettre · états vide · erreur · confirmée (essayer : envoyer vide, puis une adresse)

Lettre d’information

Ce que vous recevrez

Sujets et rythme d’envoi : à venir

D · Navigation

En-tête, pilule, pied : en situation

.entete · le panneau menu s’ouvre aussi sur desktop depuis ce bouton

L’en-tête (haut de page), la pilule (sous 1 024 px) et le pied (bas de page) de cette galerie sont les vrais blocs, rendus par core.js. Ouvrir :

État permanent (R4)

.etat-permanent · barre du haut 390 · rangée de situation 1440 · panneau menu ; calculé à l’horloge de la maquette

Rangée de situation et fil d’Ariane · court

.situation · 390 : « ‹ Parent » + « … » ; 1440 : le chemin, l’état à droite

Fil d’Ariane · long

.fil--long · les maillons du milieu se replient en « … » s’ils ne tiennent pas sur une ligne

Méga-panneau (rubrique ouverte)

.mega · desktop seulement, au clic ; ici en exemple statique

Panneau « Affichage »

.affichage · taille ×1,25 / ×1,5, contraste renforcé, animations réduites ; gardé dans localStorage

E · Information

Titre de page · court et long

.titre-page · ≤ 20 caractères : titre d’accueil ; au-delà : titre de section (Ville) ou de spectacle (Eole) ; feuilles du logo côté Ville

Rubrique

Démarches

Papiers, état civil, aides, salles : les démarches de la mairie, et comment les faire.

Carte d’identité et passeport : faire la demande

Mis à jour le [à confirmer]

Spectacles

Le monde fantastique de Tim Burton

Bloc réponse

.reponse · <dl> ; desktop : libellé 120 + valeur ; 390 : libellé au-dessus

L’essentiel

Quoi
Atelier écogestes : cosmétiques maison
Quand
Vendredi 6 novembre, de 18 h 30 à 20 h
Où
Médiathèque l’Odyssée
Combien
Gratuit, sur inscription
S’inscrireItinéraire (site externe)

Infos flash

.infos-flash · Information · Attention · Urgence : mot + icône, jamais de rouge

Modale glissée (information ponctuelle)

.modale-glissee · non modale, au-dessus de la pilule (390) ou en bas à droite (1440), une fois par visite

Café des élus, samedi 7 novembre

De 9 h à 12 h, les élus vous attendent sur le marché de Craponne, pour vos questions et vos idées.

Voir dans l’agenda

Horaires de la semaine

.horaires · <table> Jour · Matin · Après-midi, aujourd’hui marqué (barre + mot)

Donnée à venir

.donnee-a-venir · la place d’un contenu que le chercheur fournira, jamais un texte d’exemple

Visuel de l’événement : à venir

F · Listes et agenda

Lignes de liste

.ligne

Accès rapides

.acces-rapides · 390 : une colonne de 56 ; 1440 : 4 × 2 (variante --heros : 2 colonnes de 56)

Cartes événement

.carte-evt · avec photo · à la une (couverture) · sans image (numéro géant) ; 390 : action sous le texte (R25)

Visuel : Espace culturel Eole

Le grand huit

Compagnie Tartine Reverdy · à partir de 4 ans

Réserver

Café des élus

· Marché de Craponne

Cartes d’actualité

.carte-actu · mise en avant · standard · ligne à vignette ; la même carte pour Eole (R19)

Séance

.seance · colonne Heure = taille/colonne-heure (96 / 160)

  • Le Bon, la Brute et le Truand

    Western, 3 h, version originale sous-titrée (VOST)

    Acheter

Carte lieu

.carte-lieu

Jour d’agenda (numéros géants)

.jour

Vendredi 6 novembre

Filtres d’agenda

.filtres · visibles en tête à 390, sans panneau (condition 6)

Public

G · Images et formes

Zone visuelle vide

.zone-visuelle · tireté, format écrit ; jamais dans une page publiée (couverture à la place)

Desktop 16:9
Mobile 9:16
Portrait 1:1
Portrait 3:4

Photo et crédit (D18)

.photo · Ville : deux couleurs en image ; Eole : trame en masque, couleur de saison ; couleur réelle pour les contenus (D16)

Les Tourillons, deux piles de l’aqueduc romain de l’Yzeron
Photo : © Service Communication, Ville de Craponne
Photo : © Compagnie Les Pies Menteurs
Tout contre la terre, en couleur réelle
Photo : © Compagnie Les Pies Menteurs

Couverture de remplacement (R8) : pas de crédit

Carrousel de héros

.carrousel · 6 s, Pause visible, arrêt au survol et au focus, jamais en mouvement réduit

Les Tourillons, deux piles de l’aqueduc romain de l’Yzeron
Photo : © Service Communication, Ville de Craponne
La rue Centrale de Craponne, ses façades et ses commerces
Photo : Ville de Craponne
La place Andrée-Marie Perrin, au centre de Craponne
Photo : Ville de Craponne

Carrousel de cartes

.carrousel-cartes · à la main, défilement aimanté, ‹ › et compteur

Rivière · le Ratier

.riviere · sous l’en-tête des hubs ; tracé une fois en 1,6 s

Carte de la ville (conteneur)

.carte-ville · remplacé par le bloc complet I3

Le conteneur est devenu le bloc complet : voir I · Carte de la ville.

G bis · Section en aplat (mode de bande)

Découvrir Craponne

Cinéma et accessibilité

À la découverte de Craponne

Mercredi 18 novembre

Le bouton, le lien, le focus et le texte prennent seuls les couleurs de l’aplat (mode de bande, 07-pages-ux-v2 §9.2).

Action de l’aplatLien dans l’aplat

I · Blocs partagés V2

Les quatre blocs posés après le socle : promotion de l’application (R10), galerie automatique (R27), carte de la ville (R20–R22) et frise chronologique (V18). Mode d’emploi : README.md §3 bis.

Promotion de l’application (R10)

.appli[data-application] · téléphone en verre, l’application en mouvement (3 écrans × 1,6 s), Pause ; mouvement réduit : l’accueil fixe

L’application Craponne

Restez connectés avec votre ville.

Captures : application Craponne (fiche Google Play)
  • Les actualités et les événements de la commune
  • Vos démarches et l’accès au Portail Famille
  • L’annuaire des associations et des commerces
  • Les billets de spectacle et de cinéma de l’Espace culturel Eole
Télécharger dansl’App Store (site externe) Disponible surGoogle Play (site externe)
Code QR du lien de téléchargement de l’application Craponne
Ou scannez ce code avec votre téléphone

Galerie automatique, photos et vidéos (R27)

.galerie-auto[data-galerie] · mise en page choisie par le nombre d’éléments (1 à 12) ; 7 et plus : carrousel à 390, 6 + « Voir les n » à 1 440 ; visionneuse au clic

Éléments déposés :

Carte de la ville (R20–R22, V11)

.carte-ville[data-carte-ville] · fond vectoriel local, familles Pratique / Découvrir, liste équivalente, parcours, Eole à la une

Carte de la ville

Frise chronologique (V18)

.frise-chrono[data-frise] · 33 dates sourcées ; trait plein = attestée, tireté = incertaine ou sources divergentes ; chaque date est un lien

Trait plein : date attestéeTireté : date incertaine ou sources divergentes

  1. 43 av. J.-C.

    Les Romains fondent Lugdunum (aujourd’hui Lyon) et tout le territoire devient gallo-romain.

    Source : Plan 2023 de la Ville, « Une ville d’histoire et de patrimoine »

  2. 9 av. J.-C. ou Ier siècle (date discutée)

    Construction de l’aqueduc de l’Yzeron, qui traverse Craponne ; les Tourillons sont deux de ses piles, de 12 et 11 mètres.

    Sources divergentes : « dès l’an 9 avant J.C » (jeu de piste) ; « au 1er siècle après J.C » (page Les aqueducs, et le jeu de piste lui-même).

    Source : Jeu de piste « À la découverte de Craponne » ; page « Les aqueducs » du site de la Ville

    L’aqueduc et les Tourillons

  3. Le hameau de Craponne apparaît pour la première fois dans un texte, sous Charles III le Simple, quand le comte de Lyon reçoit les terres de Grézieu-la-Varenne et de Craponne.

    Source : Plan 2023 ; page « La vieille église »

  4. Une chapelle est érigée grâce à l’abbaye de Savigny ; elle est dédiée à saint Cyr et à saint Fortunat.

    Source : Page « La vieille église »

  5. Construction de l’église, aujourd’hui la vieille église (salle des expositions).

    Source : Jeu de piste, énigme 15

  6. (date discutée)

    Claude Alexandre Godard rachète les châteaux Godard, du Grand Buisson et du Ruffier ; la voie royale Lyon–Bordeaux (aujourd’hui avenue Édouard Millaud) est construite.

    Sources divergentes : 1756 (plan 2023) ; 1766 (jeu de piste, énigme 17).

    Source : Jeu de piste ; plan 2023

  7. Une ordonnance royale fait de l’église de Craponne une succursale de Grézieu.

    Source : Page « La vieille église »

  8. L’ordonnance royale de 1828 crée définitivement la succursale de Craponne.

    Source : Page « La vieille église »

  9. Une ordonnance royale de Louis-Philippe érige la section de Craponne en commune, séparée de Grézieu-la-Varenne. Le village compte alors 913 habitants.

    Source : Plan 2023

  10. Nouveau bâtiment de la mairie (ses ailes suivent en 1888 et 1896).

    Source : Jeu de piste, énigme 11

  11. 165 ateliers employant 700 personnes vivent du blanchissage.

    À noter : Le jeu de piste donne « 719 des 1 503 habitants » pour la même année.

    Source : Page « La blanchisserie »

  12. Création de la fanfare « les Enfants de Craponne ».

    Source : Jeu de piste, énigme 7

  13. Les Tourillons sont reconnus comme des piles d’aqueduc : on y voyait jusque-là deux tours d’un camp romain.

    Source : Page « Les aqueducs »

    L’aqueduc et les Tourillons

  14. Ouverture du chemin de fer Lyon / Saint-Just / Vaugneray.

    Source : Plan 2023

  15. L’usine Gladel fabrique des machines à laver.

    Source : Jeu de piste, énigme 17

  16. La salle des Enfants de Craponne est construite pour la fanfare.

    Source : Jeu de piste, énigme 7

  17. Début du XXe siècle (date discutée)

    256 ateliers de blanchisseurs fonctionnent, quand la commune n’a que 2 000 habitants.

    À noter : Date approchée : la source écrit « au début du 20ème siècle ».

    Source : Page « La blanchisserie »

  18. Fin des courses de l’hippodrome des Terres Plates, après l’effondrement de la tribune.

    Source : Jeu de piste, énigme 3

  19. Pétrus Guichard et Joseph Gladel fondent l’Association sportive de Craponne.

    Source : Site de l’AS Craponne, « Notre histoire »

  20. Le monument aux morts est érigé.

    Source : Jeu de piste, énigme 10

  21. Pierre-Auguste Roiret est maire de Craponne.

    Source : Page « L’avenue Pierre Auguste Roiret »

  22. Les ateliers de blanchisserie passent de 150 en 1946 à 47 en 1966, 9 en 1990 et 3 en 1997.

    Source : Page « La blanchisserie »

  23. La ligne de chemin de fer est démolie et devient la rue Centrale ; le 28 août, l’église Saint-Fortunat ouvre au culte.

    Source : Page « La rue Centrale » ; jeu de piste, énigme 8

  24. Craponne entre dans la Communauté urbaine de Lyon.

    Source : Page « L’avenue Pierre Auguste Roiret » ; page « Bienvenue à Craponne »

  25. (date discutée)

    Craponne est jumelée avec Schlangenbad, en Allemagne.

    Sources divergentes : 29 octobre 1988 (page Jumelage) ; 1989 (jeu de piste : square Schlangenbad baptisé « en 1989, à l’occasion du jumelage »).

    Source : Page « Jumelage avec Schlangenbad »

  26. Le GREHC crée le Musée de la Blanchisserie, dans une ancienne blanchisserie de la rue Bergeron.

    Source : Jeu de piste, énigme 17

  27. Inauguration de l’Espace culturel Eole.

    Source : Jeu de piste, énigme 5 ; plan 2023 (« inauguré en 1994 »)

    L’Espace culturel Eole

  28. Inauguration de la fresque murale en trompe-l’œil, place Charles de Gaulle.

    Source : Plan 2023 ; jeu de piste, énigme 9

  29. Inauguration de la médiathèque l’Odyssée.

    Source : Plan 2023

  30. Inauguration du nouvel Espace Rébuffat, sur le site de l’ancienne salle Gaston Rébuffat.

    Source : Jeu de piste, énigme 4

  31. Restauration des Tourillons.

    Source : Jeu de piste ; page « Les aqueducs »

    L’aqueduc et les Tourillons

  32. Ouverture de la Maison du Blanchisseur-Musée à Grézieu-la-Varenne, née de la fusion du Musée de la Blanchisserie de Craponne et de la Maison du Blanchisseur.

    Source : Site de la Ville, page « Maison du Blanchisseur-Musée »

  33. Un incendie détruit environ 1 000 m² de l’Espace sportif Rébuffat ; aucune victime.

    Source : Actualité de la Ville du 27 septembre 2026

H · Pied de page

Le pied ci-dessous est le vrai bloc (mode « pied ») : Ville en Bleu d’azurage avec l’aqueduc animé, Eole en nuit.