# Maquettes d’accueil — Ligue de Bretagne de Savate Trois propositions complètes pour une présentation client. Ouvrir **[index.html](index.html)** pour les comparer, puis cliquer sur une direction. La barre en bas de chaque page permet de passer directement d’une proposition à l’autre. Les pages fonctionnent en ouvrant les fichiers HTML dans un navigateur, sans installation. Pour un aperçu servi en local, depuis la racine du dépôt : ```sh python3 -m http.server 4173 --bind 127.0.0.1 --directory mockups ``` Puis ouvrir . ## Trois directions | Proposition | Intention | Composition | | -------------------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | [01 · Classique](classique/index.html) | Claire, accueillante, pratique | Photo d’accueil pleine page, disciplines en grandes photos, bandeau « Trouver un club » avec carte, galerie photo pleine largeur. | | [02 · Steel Fit](steelfit/index.html) | Claire, vive, en mouvement | Titres condensés pleins et en contour, coins coupés, plaques décalées, barres de vitesse, bleu marine et orange signal. | | [03 · Montréal](montreal/index.html) | Collective, expressive, immersive | Page encadrée de blocs arrondis, encoches qui portent logo, légendes et chiffres, titres monumentaux, portraits de champions en bichromie bleue. | Toutes les pages comportent : - Savate boxe française, canne de combat et bâton, savate forme, savate défense. - Trois capsules vidéo : enfants, femmes, handicap. - Actualités et prochains événements avec le tag « Accessible au public ». - Accès aux clubs dès le premier écran, puis carte interactive des quatre départements. - Chiffres clés, champions de France avec portrait, informations et emplacements pour les réseaux sociaux. - Bandeau VSS ouvrant une boîte à outils avec des ressources officielles. - Partenaires et institutions avec des liens vers leurs sites. - Réseaux sociaux de la Ligue et de chaque comité, lien vers le site du CD56. ## Contenus et interactions Les titres de rubriques et les libellés de navigation sont rédigés ; les contenus sont en lorem ipsum. Les dates et horaires d’événements servent uniquement à illustrer la composition. Les statistiques sont reprises du brief initial et explicitement rattachées à la saison 2023–2024 ; elles sont à valider avant publication. Les portraits des champions, les photos de savate forme et défense, les vidéos, les logos absents et les comptes sociaux non fournis sont indiqués comme **à fournir**. Aucun nom, palmarès ou compte de champion n’a été inventé. Le clic sur un réseau manquant ouvre un message « Lien à fournir » ; les capsules ouvrent un emplacement « Vidéo à fournir ». Il n’y a pas de vidéo réelle intégrée. Les boutons de contenus fictifs ouvrent un aperçu en lorem ipsum. Le filtre d’agenda affiche trois événements publics ou quatre événements au total. La sélection d’un département sur la carte ou via les boutons met à jour le lien vers l’annuaire officiel correspondant. Le menu mobile, les dialogues, la fermeture par Échap et le retour du focus sont fonctionnels. Les pages sont des prototypes HTML/CSS/JS, pas une intégration à `apps/www`. Elles ne publient ni ne modifient les anciens artifacts Claude. Les photos et polices sont locales, ce qui permet de présenter les pages sans connexion ; les liens vers les sites officiels demandent une connexion. ## Sources et éléments visuels - Photos, carte départementale et logo officiel de la Ligue : maquettes existantes de la branche `origin/mockups/home`. Le logo n’est ni recadré ni redessiné. - Photos des directions Classique (`classique/img/photos/`), Steel Fit (`steelfit/img/photos/`) et Montréal (`montreal/img/photos/`) : dossier Google Drive « PHOTOS » de la Ligue, redimensionnées pour le web, métadonnées retirées. Plusieurs photos portent la signature du photographe (Y. Besnard) ; les crédits et les autorisations de droit à l’image, notamment pour les mineurs, sont à confirmer avant publication. - [FF Savate](https://www.ffsavate.com/) : [logo officiel](https://www.ffsavate.com/content/themes/ffsavate/assets/images/svg/logo-submenu.svg). - [Agence nationale du sport](https://www.agencedusport.fr/) : [logo officiel](https://www.agencedusport.fr/sites/default/files/ans-logo-color_courrant.png). - [Ministère des Sports](https://www.sports.gouv.fr/) : [logo fourni sur le site fédéral](https://www.ffsavate.com/content/uploads/2024/09/MSJVA_LOGO_CMJN-scaled.jpg). - [Région Bretagne](https://www.bretagne.bzh/) : [logo officiel]() ; [CROS Bretagne](https://sport-bretagne.fr/) : [logo officiel](https://sport-bretagne.fr/wp-content/uploads/2015/09/CROS-Bretagne-Logo.png), sans la ligne d’icônes de réseaux sociaux. Les cinq logos partenaires sont rangés dans `shared/partenaires/` et utilisés par les trois directions. - [CD56](https://www.cd56sbf.fr/) : site du comité départemental du Morbihan. - VSS : [Signal-Sports](https://www.sports.gouv.fr/signaler-une-violence-501) et [kit de fiches réflexes VSS](https://www.egalite-femmes-hommes.gouv.fr/sites/efh/files/2024-07/KIT-Violences-Sexistes-Sexuelles-Sport_0.pdf). La liste des partenaires est une sélection de présentation à confirmer. Les photos d’archives illustrent les rubriques ; elles ne documentent pas les actualités fictives. Polices : Manrope, Barlow Condensed et Outfit, distribuées sous SIL Open Font License. Les fichiers de licence sont dans `shared/`. Steel Fit ajoute les graisses SemiBold et ExtraBold de Barlow Condensed, avec leur licence dans `steelfit/fonts/`. Montréal utilise aussi Righteous, avec son fichier de licence dans `montreal/fonts/`. Classique utilise Libre Franklin, une reprise de la Franklin Gothic. Le fichier est réduit aux caractères latins, avec sa licence dans `classique/fonts/`. Les sources sont les répertoires correspondants du [dépôt Google Fonts](https://github.com/google/fonts/tree/main/ofl). ## Organisation des fichiers - `index.html` : page de présentation et de choix. - `classique/`, `steelfit/`, `montreal/` : une page et une feuille de styles par direction, avec leurs photos d’origine. - `shared/base.css` : styles de base, composants, accessibilité et comportements responsive. - `shared/interactions.js` : carte, filtre d’agenda, menu mobile et dialogues. - `shared/` : polices locales, licences, logos (dont `shared/partenaires/`) et captures de présentation. - Les anciens dossiers `ref/` sont conservés comme références visuelles. Pour envoyer les maquettes, partager **le dossier `mockups` complet** afin de conserver les photos, polices et fichiers partagés. ## Révision Steel Fit La direction s’inspire des trois images de référence de `steelfit/ref/` (modèle « Steel Fit ») : titre plein et en contour, mot vertical, photos cadrées, coins coupés, chevrons. La deuxième version reprend ces gestes sous forme de système, appliqué partout avec les mêmes valeurs : - **Coin coupé à 45°**, toujours en haut à droite, sur toutes les photos et les cartes. - **Plaque décalée** pleine derrière les grandes photos, qui remplace les cadres inclinés. - **Trois barres obliques** « vitesse » en signature, toujours au même angle. - **Titres en capitales condensées** (Barlow Condensed ExtraBold), la deuxième ligne en contour. - **Navigation au style des boutons** : mêmes capitales condensées, page en cours et survol marqués par un bloc à coin coupé. - **Mot « SAVATE » géant** en contour, posé en bas de l’accueil et du bandeau d’appel, coupé par le bord de la section. La palette abandonne le vert citron, qui entrait en concurrence avec le bleu de la Ligue. Elle réunit un bleu marine, le bleu de la Ligue et un bleu glacier. Un orange signal, complémentaire du bleu et proche des cordes et des gants rouges des photos, sert uniquement aux accents : barres, chevrons, plaques et chiffres. Les départements suivent un dégradé de cet orange, dans l’ordre des numéros, de l’abricot au vif : 22 `#f8d0a2`, 29 `#f8b478`, 35 `#f7904b`, 56 `#f46622`, toujours avec des chiffres bleu marine (contraste d’au moins 5,5:1). Il remplace un premier jeu de quatre couleurs différentes (turquoise, pêche, ambre, ciel). Chaque département garde la même couleur partout : carte d’accueil, boutons et carte des clubs, agenda, plaques des champions et numéros des comités en pied de page. Sur la carte des clubs, le département choisi passe à la version vive de sa couleur (`#ffc981`, `#ffab51`, `#fd8722`, `#f95801`) et les autres restent dans l’ombre, leur numéro gardant sa couleur ; le bouton choisi prend la même couleur vive. Le bouton « Voir les clubs » est bleu, comme les autres boutons principaux, pour que le département choisi reste le seul orange vif de la rubrique. Comme pour Classique, la feuille de styles est autonome (`steelfit/style.css`, sans `shared/base.css`), avec les mêmes tailles : texte courant à 17 px, 15 px minimum, contenu jusqu’à 1 560 px de large. Chaque rubrique est illustrée par des photos du Drive de la Ligue, différentes de celles de Classique : accueil, chiffres, capsules, quatre disciplines, actualités, agenda, champions et bandeau d’appel. Le bandeau utilitaire au-dessus de l’en-tête a été retiré : l’aide VSS reste accessible par le bandeau VSS et le menu mobile. Toutes les rubriques et interactions sont conservées. La page est vérifiée de 320 à 2 560 px : pas de débordement horizontal, aucune violation axe WCAG 2.1 AA. ## Révision Montréal La direction reprend les compositions du site de la [Fondation des Canadiens pour l’enfance](https://fondation.canadiens.com/fr) : photo d’accueil bord à bord, logo dans une découpe, navigation flottante, titre monumental, encart d’accès aux clubs, aplats de couleurs, cartes inclinées sur fond rose, partenaires sur fond bleu et grand visuel de clôture. La deuxième version en fait un système appliqué à toute la page : - **Un cadre clair** qui contient des blocs arrondis (photos et aplats), séparés par le même petit écart. - **L’encoche**, signature de la référence : le cadre mord un coin de photo pour y loger une information. Elle porte le logo, l’accès aux clubs, les noms des capsules, les catégories d’actualités, les numéros des comités sur les portraits et l’appel « Trouver mon club ». - **Les titres** en capitales Righteous monumentales, avec Outfit pour les textes. - **Les cartes inclinées** gardées pour les chiffres clés uniquement. - **Une palette** bleu vif, bleu marine, bleu ciel et rose. Le rouge est réservé à l’aide et au bandeau VSS. - **Les départements** reprennent les quatre couleurs des cartes de disciplines : 22 bleu ciel (`#c8e4f8`), 29 bleu vif (`#3a3ff0`), 35 bleu marine (`#0b1850`) et 56 rose (`#f7c6ec`). Les numéros sont blancs sur les deux bleus foncés, marine sur les deux couleurs claires. Sur les cartes, de fins contours blancs séparent les départements. Cette palette est commune à la carte d’accueil, aux boutons et à la carte des clubs, aux repères d’agenda et aux champions. Sur la carte des clubs, le département choisi garde sa couleur pleine tandis que les autres s’estompent légèrement (85 % d’opacité), sans contour épaissi ; les boutons gardent aussi leur couleur. Dans le pied de page, les comités sont indiqués par de grands numéros marine, sans pastille. Toutes les disciplines, capsules, actualités et champions ont une photo du Drive de la Ligue. Les quatre portraits de champions sont traités en bichromie bleue pour former une série, en attendant les vrais portraits. Comme pour Classique et Steel Fit, la feuille de styles est autonome (`montreal/style.css`, sans `shared/base.css`), avec texte courant à 17 px et 15 px minimum ; le pied de page est complété de colonnes de liens. Toutes les rubriques et interactions sont conservées. La page est vérifiée de 320 à 2 560 px : pas de débordement horizontal, aucune violation axe WCAG 2.1 AA. ## Révision de la direction Classique Retours client : polices et logos trop petits, espace mal occupé, pas assez de photos. La page a été reprise en gardant son identité (fond clair, bleu de la Ligue, Manrope) : - **Feuille de styles autonome.** `classique/style.css` ne s’appuie plus sur `shared/base.css` : l’échelle typographique et la grille sont définies une seule fois au lieu d’être surchargées. - **Typographie.** Texte courant à 17 px (16 px sur mobile), navigation et boutons à 16 px, 15 px minimum (14 px pour le sous-titre du logo). Le titre d’accueil s’adapte à la largeur et à la hauteur de l’écran (jusqu’à 100 px) pour tenir dans le premier écran. Une première version à 18 px a été jugée un peu grande ; l’échelle a été réduite d’un cran. - **Logos.** Logo de la Ligue à 50 × 72 px dans l’en-tête, plus grand dans le pied de page ; les cinq partenaires ont leur vrai logo (jusqu’à 104 px de haut), recadré pour supprimer les marges blanches. - **Espace.** Contenu jusqu’à 1 560 px de large (contre 1 280 px), mosaïque d’accueil qui va jusqu’au bord de l’écran, galerie bord à bord, agenda sur deux colonnes, « Trouver un club » en bandeau pleine largeur avec une grande carte. - **Photos.** 27 photos au lieu de 9 : mosaïque d’accueil, disciplines en grandes photos, capsules verticales, quatre actualités illustrées, portraits des champions et une nouvelle rubrique « La savate en images ». Il n’y a plus d’emplacement « Photo à fournir » : savate forme, savate défense et les champions sont illustrés par des photos de la banque de la Ligue qui ne représentent pas forcément le sujet exact. Noms et palmarès des champions, vidéos et liens des réseaux restent à fournir. - **Couleurs des départements.** Une couleur par département, en deux familles, « mer et sable » : des bleus pour le Finistère et l’Ille-et-Vilaine, qui ne se touchent pas (29 marine `#062b5f`, 35 bleu de mer `#0a7ca6`), et des ocres pour les Côtes-d’Armor et le Morbihan, l’un clair et l’autre foncé (22 ocre `#986603`, 56 rouille `#883c00`). Cette palette remplace une première palette (vert, orange, violet, fuchsia) jugée disparate ; une palette d’une seule teinte a aussi été essayée, mais les départements s’y distinguaient mal sur la carte. Les bleus restent plus foncés ou plus verts que le bandeau bleu des clubs, pour que le département choisi s’en détache. Chacune est utilisée pleine et identique partout (pastilles de l’accueil, mini-carte, boutons et carte des clubs). Chacune garde un contraste d’au moins 4,6:1 avec un chiffre blanc et reste distincte des autres, y compris pour les personnes daltoniennes, ce que l’ancienne palette ne permettait pas. Sur la carte des clubs, le département choisi garde sa couleur pleine et les autres s’éclaircissent (avec un numéro foncé), sans contour épaissi ni numéro agrandi. - **Allègements.** Le bandeau utilitaire au-dessus de l’en-tête et les pastilles de l’agenda ont été retirés. - **Photo d’accueil pleine page** (28 septembre 2026). Pour distinguer Classique de Steel Fit, qui gardait la même composition texte à gauche et photo à droite, la mosaïque d’accueil est remplacée par une seule photo bord à bord : le fouetté du gala Choc Celtic (Breizh Savate). L’en-tête est transparent sur la photo, puis redevient blanc dès que la page défile ou que le menu mobile s’ouvre. En bas à gauche, la page blanche remonte dans la photo avec un grand angle arrondi et porte le titre, le texte et les deux boutons, en encre sur blanc plutôt qu’en blanc sur la photo, ce qui la distingue aussi de Montréal. La photo descend jusqu’en bas de l’écran ; les pastilles des départements sont dans le bloc blanc, sous les boutons. L’encart « Un club près de vous » a été retiré de l’accueil : les boutons « Trouver un club » de l’en-tête et de l’accueil mènent déjà à la carte des clubs. Sur mobile, la photo commence sous l’en-tête pour garder le coup de pied entier dans le cadre. Au chargement, la photo se pose doucement pendant que la page monte ; rien ne bouge si le système demande de réduire les animations. Toutes les rubriques et interactions sont conservées. La page est vérifiée de 320 à 1 920 px (pas de débordement horizontal, aucune violation axe WCAG 2.1 AA).