Vitrine des composants

4 cl-hero Fonds prévus : photo voilée sur noir. Trois variantes : normal, --page, --partage.

Dans une vraie page, le titre du héros est le H1. Ici, la vitrine garde son propre H1 et les titres des héros sont des H2. La photo est une photo de démonstration (Chloé Dumoulin au piano).

4 cl-hero cl-hero--page Variante de page intérieure, 60 vh, titre en taille H1.

4 cl-hero cl-hero--partage Accueil B : texte à gauche sur noir, photo 4:5 à droite, trois cl-concert--compact.

4 cl-hero cl-hero--page cl-hero--sans-photo Page Appuyez-nous : fond noir plein, sans photo ni voile, hauteur selon le contenu, mention 14 px sous les boutons.

5 cl-btn Quatre styles, sur fond clair et sur fond noir. Survolez-les : le bouton or passe au noir, le contour se remplit, le filet du lien s'allonge.

6 cl-titre-section Ouvre chaque section : surtitre en capitales, titre, filet or. Deux alignements, montrés ici en situation.

Centré : ouverture d'une section pleine largeur (agenda, séries, chiffres). À gauche : titre placé à côté d'une image ou d'un texte. Sur fond noir, le surtitre passe en or clair (voir les sections 7, 11 et 13).

7 cl-citations Fond noir. Variante --resumes : résumés d'entrevues, jamais présentés comme des citations.

Les sources ne contiennent aucune citation de presse sur Concerts Lachine. La variante de base (citation et attribution) sera montrée dès qu'une citation sourcée existera.

8 cl-impact Fond crème. Introduction, trois cartes blanches à bordure or, manifeste en italique.

9 cl-bio Deux déclinaisons : photo à gauche, puis photo à droite (--inverse). Alternez-les quand une page présente plusieurs personnes.

Variante --sans-photo : des repères datés remplacent le portrait quand aucune photo de qualité n'existe.

Variante --duo : deux personnes côte à côte, puis une par rangée sous 1200 px, la seconde inversée.

10 cl-personnes Fond crème. Grille de noms et de rôles séparés par des filets.

10 cl-personnes cl-personnes--niveaux Commandites, fond noir : une colonne de 760 px, nom du niveau à gauche, détail à droite (dessous sous 480 px).

11 cl-video Fond noir. Façade légère : l'iframe YouTube (youtube-nocookie.com) n'est chargée qu'au clic.

Les témoignages vidéo sont sur la page des talents émergents du site actuel. La vidéo à intégrer reste à confirmer : le bouton est inactif dans cette démonstration.

Variante --trio : trois témoignages Vimeo de l'Académie. Ils ne jouent que sur concertslachine.ca et ses sous-domaines. Ouverte depuis un fichier local, la page affiche une note et un lien vers la page des talents émergents.

Variante --galerie : cinq vidéos sur une rangée à partir de 75rem ; en dessous, rangée défilante avec boutons Précédente et Suivante.

12 cl-infos Fond blanc. Cartes centrées à bordure haute or.

13 cl-cta-final Fond noir. Titre léger, phrase en or clair, bouton principal et bouton contour facultatif.

15 cl-concert Fond crème. Variantes : --vedette (carte blanche avec photo), normal, --passe. La variante --compact est dans le héros --partage.

Un seul point de tabulation par carte : le lien du titre couvre toute la carte. Le mot « Détails » est décoratif.

16 cl-agenda Fond blanc. Filtres à bascule (aria-pressed), liste de cl-concert, compteur en aria-live. Sans script, tout est affiché et les filtres sont masqués.

Le filtre « Festival » montre l'état vide de l'agenda. Aucun concert du Festival n'est encore annoncé.

17 cl-badge Étiquettes non interactives. Ici sur fond noir (or clair) ; sur fond clair, elles apparaissent dans les cartes de concert ci-dessus.

18 cl-serie Fond crème, cartes blanches. Carte entièrement cliquable, photo 3:2 qui monte légèrement au survol.

Les photos des séries Saints-Anges et Notes et Brioches sont agrandies à partir de sources trop petites : à remplacer.

19 cl-partenaires Fond blanc. Un groupe par niveau (niveaux de la page Partenaires du site actuel). Logos en niveaux de gris, couleur au survol.

Cinq partenaires apparaissent en texte, faute de logo exploitable. Il s'agit d'Atelier lyrique, Piano Vertu, Cognitive Group, MLV Immobilier et Martin & Cie.

20 cl-infolettre Fond crème. Formulaire de démonstration, puis le même formulaire en état d'erreur.

21 cl-don Fond blanc, carte blanche ombrée. Puis variante --compact sur fond noir.

Montants et plateforme restent à confirmer. Le bouton reprend le montant choisi. Sans script, il affiche 50 $. Le champ « Autre montant » apparaît quand « Autre » est choisi.

21 cl-don cl-don--lien Fond blanc. Rendu de repli, si la plateforme n'accepte pas de montant présélectionné.

Aucun bouton de montant : les montants suggérés sont en texte simple. Le choix se fait sur le formulaire de CanaDon. La page Appuyez-nous montre le formulaire complet ; cette variante le remplace si CanaDon ne permet pas de transmettre un montant.

22 cl-etapes Fond crème. Quatre façons de s'impliquer, numérotées en grands chiffres or, puis variante --reponses (accueil B).

23 cl-frise Fond noir. Horizontale sur ordinateur, verticale sur téléphone. Dates sourcées seulement.

24 cl-faq Fond blanc. Accordéon natif details et summary, signe plus qui devient un signe moins.

25 cl-mosaique Fond noir. Variante --photos (portraits 4:5 en niveaux de gris) puis variante --noms.

Concerts Lachine détient les droits de toutes les photos du site actuel.

26 cl-chiffres-bande Fond noir. Bande de quatre chiffres en vrai texte, séparés par des filets or.

14 cl-pied Fond noir profond. Quatre colonnes, filet or, logo et droits.