Ligue Élite · Journée 6
Jour de matchSaint-Quentin Patriots
score non disponible
contre, match à venir
Couronnes de Reims
score non disponible
Stade du Huit-Octobre
Infos match : Saint-Quentin Patriots contre Couronnes de Reims
Saison 2026-27 · Étape 0 · Livraison 2
Design system · Saint-Quentin Patriots
Toute une ville, d'un seul bloc
Cette page présente les jetons, la typographie, les logos, les composants et les animations du site. Elle sert de référence à l'équipe et de pièce de portfolio. Elle n'est pas indexée.
Préférence de mouvement
Coupez le balayage, l'étiquette du curseur, les rouleaux et le bandeau défilant d'un clic. Le choix est mémorisé.
01 · Jetons
Couleurs
Quatre couleurs de club, déclinées en nuances qui passent le contraste AA. Chaque usage est limité aux paires vérifiées ci-dessous.
Les onze jetons
Nom, valeur hexadécimale et variable CSS. Le carré blanc est cerné d'un trait pour rester visible.
marine
#0B1F3A
--color-marineTexte courant, sections sombres, boutons secondaires
marine-800
#16335C
--color-marine-800Marine clair : cartes et champs sur section sombre
rouge-600
#C8102E
--color-rouge-600Bouton primaire, filets, gros titres sur fond clair
rouge-700
#A30D25
--color-rouge-700Liens et accents rouges sur fond clair, survol du bouton
rouge-400
#E8344C
--color-rouge-400Filets et grands chiffres sur marine
rouge-300
#F05A6A
--color-rouge-300Texte d'accent rouge sur marine
argent
#A7AFB7
--color-argentLibellés et bordures sur marine ; jamais en texte sur clair
argent-300
#C2C8CE
--color-argent-300Texte secondaire sur marine
argent-700
#5E666E
--color-argent-700Texte secondaire et bordures sur fond clair
blanc-casse
#F4F4F2
--color-blanc-casseFond de page par défaut, texte sur marine
blanc
#FFFFFF
--color-blancCartes, titres sur marine, libellé du bouton rouge
Paires autorisées
Rapports calculés d'après la formule WCAG 2.x. Seuils : 4,5 pour le texte, 3 pour le grand texte et les éléments d'interface.
| Paire | Usage | Rapport | Verdict |
|---|---|---|---|
| marine sur blanc-casse | Texte courant par défautTexte (4,5 : 1) | 15,00 | AA |
| marine sur blanc | Texte sur cartes blanchesTexte (4,5 : 1) | 16,52 | AA |
| blanc-casse sur marine | Texte sur sections marineTexte (4,5 : 1) | 15,00 | AA |
| blanc sur marine | Titres sur marineTexte (4,5 : 1) | 16,52 | AA |
| blanc sur marine-800 | Texte sur marine clairTexte (4,5 : 1) | 12,63 | AA |
| argent-300 sur marine | Texte secondaire sur marineTexte (4,5 : 1) | 9,79 | AA |
| argent sur marine | Libellés sur marineTexte (4,5 : 1) | 7,44 | AA |
| argent-700 sur blanc-casse | Texte secondaire sur clairTexte (4,5 : 1) | 5,29 | AA |
| rouge-700 sur blanc-casse | Liens et accents rouges sur clairTexte (4,5 : 1) | 7,22 | AA |
| blanc sur rouge-600 | Libellé de bouton rougeTexte (4,5 : 1) | 5,88 | AA |
| rouge-400 sur marine | Accent rouge sur marine (grand texte, filets)Grand texte, interface (3 : 1) | 3,95 | AA grand texte |
| rouge-300 sur marine | Accent rouge clair sur marineTexte (4,5 : 1) | 5,01 | AA |
| rouge-600 sur blanc-casse | Gros titres et filets rouges sur clairGrand texte, interface (3 : 1) | 5,34 | AA |
| marine sur rouge-300 | Pastille rouge clair, grand texteGrand texte, interface (3 : 1) | 5,01 | AA |
Paires interdites
Sous 3 : à ne jamais utiliser pour du texte ni pour un élément d'interface.
| Paire | Rapport | Verdict |
|---|---|---|
| rouge-600 sur marine | 2,81 | ÉchecInterdite |
| argent sur blanc-casse | 2,02 | ÉchecInterdite |
Matrice de contraste
Chaque couleur de texte (en ligne) sur chaque fond (en colonne). Les paires retenues portent la mention « Autorisée », les paires signalées « Interdite ».
| Texte \ Fond | marine | marine-800 | rouge-600 | blanc-casse | blanc |
|---|---|---|---|---|---|
| marine | Même couleur, sans objet | 1,31Échec | 2,81Échec | 15,00AAAutorisée | 16,52AAAutorisée |
| marine-800 | 1,31Échec | Même couleur, sans objet | 2,15Échec | 11,47AA | 12,63AA |
| rouge-600 | 2,81ÉchecInterdite | 2,15Échec | Même couleur, sans objet | 5,34AAAutorisée | 5,88AA |
| rouge-700 | 2,08Échec | 1,59Échec | 1,35Échec | 7,22AAAutorisée | 7,95AA |
| rouge-400 | 3,95AA grand texteAutorisée | 3,02AA grand texte | 1,41Échec | 3,79AA grand texte | 4,18AA grand texte |
| rouge-300 | 5,01AAAutorisée | 3,84AA grand texte | 1,79Échec | 2,99Échec | 3,29AA grand texte |
| argent | 7,44AAAutorisée | 5,69AA | 2,65Échec | 2,02ÉchecInterdite | 2,22Échec |
| argent-300 | 9,79AAAutorisée | 7,49AA | 3,49AA grand texte | 1,53Échec | 1,69Échec |
| argent-700 | 2,83Échec | 2,17Échec | 1,01Échec | 5,29AAAutorisée | 5,83AA |
| blanc-casse | 15,00AAAutorisée | 11,47AA | 5,34AA | Même couleur, sans objet | 1,10Échec |
| blanc | 16,52AAAutorisée | 12,63AAAutorisée | 5,88AAAutorisée | 1,10Échec | Même couleur, sans objet |
Une paire absente de la liste des paires autorisées reste à éviter, même si son rapport dépasse 3 : le verdict seul ne suffit pas.
02 · Lettres
Typographie
Une seule famille, Archivo, en largeur condensée pour les titres. Un pochoir en accent et une italique de retransmission pour les scores.
Archivo condensée : les titres
Classe .titre : capitales, graisse 900, interligne serré.
Numéro géant
text-numero-geant10 à 20 rem8
Titre 1
text-h13,25 à 8 remUn seul bloc
Titre 2
text-h22,25 à 4,5 remJour de match
Titre 3
text-h31,5 à 2,5 remStade du Huit-Octobre
Compteur
text-compteur2,5 à 5,5 rem312
Corps
text-corps1,0625 à 1,1875 remLe club réunit sept sections, du flag junior à l'équipe première.
Libellé
text-libelle0,75 à 0,875 remSaison 2026-27 · Ligue Élite
Italique de retransmission
Classe .retransmission : scores, résultats et légendes de direct.
Final · 24 – 17
Patriots en tête à la mi-temps
Pochoir
Big Shoulders Stencil, en accent : dates, surtitres et étiquettes. Jamais pour un paragraphe.
08·10·1870
1870
Surtitre en pochoir
Texte courant
Archivo en graisse normale, 65 caractères de large au maximum.
Fondé par une poignée de passionnés, le club réunit aujourd'hui sept sections, du flag junior à l'équipe première. Chaque semaine, plus de trois cents licenciés se retrouvent au Stade du Huit-Octobre.
Texte secondaire : horaires d'entraînement, précisions pratiques et mentions courtes.
Un lien dans un paragraphe reste souligné et garde un contraste suffisant.
Chiffres tabulaires
Chiffres de chasse fixe pour les scores, les classements et les compteurs : les colonnes restent alignées.
Tabulaires
1 111
8 888
2 047
Proportionnels
1 111
8 888
2 047
03 · Identité
Marque
Tous les visuels passent par le composant Logo, sur fond clair puis sur fond marine.
Remplaçable : chaque fichier se change dans public/images/brand/ sans toucher au code, à condition de garder son nom.
Logo principal
Logo SQPFond clair, puis fond marine public/images/brand/logo-sqp.svgBloc-marqueFond clair, puis fond marine public/images/brand/logo-sqp-bloc.svg
CasqueFond clair, puis fond marine public/images/brand/casque-sqp.svg
Lettrage SQP
LettrageFond clair, puis fond marine public/images/brand/lettrage-sqp.svg
Lettrage faviconFond clair, puis fond marine public/images/brand/lettrage-sqp-favicon.svg
Lettrage en colonneFond clair, puis fond marine public/images/brand/col-lettrage-sqp.svg
La Sentinelle
SentinelleFond clair, puis fond marine public/images/brand/sentinelle.svg
TêteFond clair, puis fond marine public/images/brand/sentinelle-tete.svg
PictogrammeFond clair, puis fond marine public/images/brand/sentinelle-picto.svg
Écusson patrimoine
Écusson patrimoineFond clair, puis fond marine public/images/brand/ecusson-patrimoine.svg
Maillots
Maillot domicileFond clair, puis fond marine public/images/brand/maillot-domicile.svg
Maillot extérieurFond clair, puis fond marine public/images/brand/maillot-exterieur.svg
Maillot du 8 octobreFond clair, puis fond marine public/images/brand/maillot-8-octobre.svg
Dos du maillot du 8 octobreFond clair, puis fond marine public/images/brand/maillot-8-octobre-dos.svg
Col du maillot du 8 octobreFond clair, puis fond marine public/images/brand/maillot-8-octobre-col.svg
Favicon à petite taille
Le lettrage doit rester lisible à 16, 24, 32 et 64 pixels.
16 px
24 px
32 px
64 px
04 · Pièces
Composants
Chaque composant est montré dans ses variantes et sur les fonds où il est autorisé.
Boutons
Primaire rouge, secondaire à contour. Forme biseautée, anneau de focus inversé selon le fond. Tabulez pour le voir.
Badges et étiquettes
Le badge signale un état, l'étiquette classe un contenu. Aucune n'est cliquable.
Sur fond clair
Jour de matchBientôt disponibleSaison 2026-27
QuarterbackLigue ÉliteU18
Sur fond sombre
Jour de matchBientôt disponibleSaison 2026-27
QuarterbackLigue ÉliteU18
Sections
Trois fonds de bande : sombre, claire et rouge. Chacun impose ses couleurs de texte et son anneau de focus.
SectionHeading : trois fonds et un titre centré
Jour de match
Fond clair
Surtitre rouge foncé, filet rouge.
Jour de match
Fond sombre
Surtitre rouge clair, filet rouge.
Jour de match
Fond rouge
Tout en blanc, filet blanc.
Alignement centré
Un titre au milieu
Pour les ouvertures de page et les appels à l'action.
Score bug
Bandeau de score façon retransmission. Adversaire fictif : Couronnes de Reims, en pourpre. Le texte blanc ou marine est choisi selon la couleur d'équipe.
Match à venir
Saint-Quentin Patriots
score non disponible
contre, match à venir
Couronnes de Reims
score non disponible
Samedi 10 avril · 19 h
Match terminé
Saint-Quentin Patriots
31
contre, match terminé
Couronnes de Reims
24
Final
Cartes et lignes de match
La carte détaille un match ; la ligne le résume pour un calendrier (lien étiré sur toute la ligne).
Ligue Élite · Journée 5
Saint-Quentin Patriots
24
contre, match terminé
Filtiers de Lille
17
Final
Stade du Huit-Octobre
Résumé du match : Saint-Quentin Patriots contre Filtiers de LilleCartes joueur
Survolez, tabulez ou touchez « Stats » pour retourner la carte. Sous mouvement réduit, un fondu remplace le retournement. Avec une souris, une étiquette « VOIR » suit le pointeur.
Numéro 8, Mathis Delcourt
Quarterback
1,86 m · 88 kg
Stats de la saison
- Passes réussies
- 142
- Yards
- 1 876
- Touchdowns
- 18
- Interceptions
- 4
Numéro 22, Yanis Berkani
Running back
1,78 m · 84 kg
Stats de la saison
- Courses
- 96
- Yards
- 612
- Touchdowns
- 9
- Yards par course
- 6,4
Numéro 54, Théo Vasseur
Linebacker
1,90 m · 104 kg
Stats de la saison
- Plaquages
- 58
- Sacks
- 7,5
- Passes déviées
- 5
- Fumbles forcés
- 3
Numéro 81, Elias Maréchal
Wide receiver
1,82 m · 79 kg
Stats de la saison
- Réceptions
- 47
- Yards
- 703
- Touchdowns
- 8
- Yards par réception
- 15,0
Actualités et équipes
Match
· 3 min de lecture
Reims au Huit-Octobre : ce qu'il faut savoir avant samedi
Ouverture des portes à 17 h, billetterie sur place et parcours fléché depuis la gare : tout le détail du jour de match.
Club
· 2 min de lecture
Trois nouvelles recrues chez les féminines
Deux joueuses de flag et une ancienne handballeuse rejoignent le groupe après les essais gratuits de mars.
Ligue Élite
2e du classement
Équipe première
- Victoires
- 3
- Nuls
- 1
- Défaites
- 1
46 joueurs
U18
1er du classement
Juniors U18
- Victoires
- 4
- Nuls
- 0
- Défaites
- 1
32 joueurs
Challenge féminin
4e du classement
Féminines
- Victoires
- 2
- Nuls
- 1
- Défaites
- 2
28 joueurs
Classement
Six équipes fictives. Les colonnes Rang et Équipe restent fixes quand le tableau défile ; les Patriots sont repérés par un fond marine et une barre rouge.
Faites défiler le tableau horizontalement
| Rang | Équipe | Journées jouées | Victoires | Nuls | Défaites | Points au classement | Moyenne | Points pour | Points contre | Différence de points | Série en cours |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Couronnes de Reims | 5 | 4 | 0 | 1 | 13 | 2,600 | 141 | 100 | +41 | 3 victoires de suite |
| 2 | Saint-Quentin Patriots (Patriots) | 5 | 3 | 1 | 1 | 12 | 2,400 | 128 | 94 | +34 | 2 victoires de suite |
| 3 | Filtiers de Lille | 5 | 2 | 1 | 2 | 10 | 2,000 | 112 | 106 | +6 | 1 défaite de suite |
| 4 | Nautilus d'Amiens | 5 | 2 | 0 | 3 | 9 | 1,800 | 98 | 110 | −12 | 2 défaites de suite |
| 5 | Reuzes de Dunkerque | 5 | 1 | 1 | 3 | 8 | 1,600 | 87 | 116 | −29 | 1 nul de suite |
| 6 | Forgerons de Valenciennes | 5 | 0 | 3 | 2 | 8 | 1,600 | 79 | 119 | −40 | 1 défaite de suite |
J : journées jouées · V : victoires · N : nuls · D : défaites · Pts : points au classement · Moy. : moyenne · PP : points pour · PC : points contre · Diff : différence de points · Série : série en cours
Formulaire
React Hook Form et Zod. Validez à vide pour voir le récapitulatif d'erreurs, puis remplissez : l'envoi est simulé.
Accordéon
Natif, sans JavaScript. À gauche en volets indépendants, à droite en un seul volet ouvert à la fois.
À quoi sert cette page ?
Elle rassemble tout ce que le site réutilise : couleurs, typographie, logos, composants et animations. On y vérifie d'un coup d'œil qu'une modification ne casse rien ailleurs.
Les joueurs et les adversaires sont-ils réels ?
Non. Les noms, les scores et le classement sont inventés pour la démonstration, comme tout le site.
Peut-on remplacer un logo sans toucher au code ?
Oui : il suffit de remplacer le fichier correspondant dans public/images/brand/ en gardant son nom.
Un seul volet reste-t-il ouvert ?
Dans cet accordéon, oui : ouvrir une question referme la précédente.
Le clavier suffit-il ?
Tab pour atteindre une question, Entrée ou Espace pour l'ouvrir. Le navigateur gère le reste.
Boîte de dialogue
Modale native : le fond devient inerte, Échap ferme, le focus revient au bouton.
Fil d'Ariane
Navigation nommée, page courante signalée par aria-current.
05 · Mouvement
Animation
Tout reste lisible sans JavaScript. Le bouton « Animations réduites » de l'en-tête coupe le mouvement.
Compte à rebours
Vers le prochain match : coup d'envoi samedi 10 avril à 19 h, heure de Paris. Il suit l'horloge du site et passe en « En direct » à l'heure dite.
Patriots – Couronnes de Reims
Jour de match : coup d'envoi dans 5 heures
Jour de matchSamedi 10 avril · 19 h · Stade du Huit-Octobre
Compteurs
Les colonnes roulent de zéro à la valeur finale quand le compteur entre à l'écran, une seule fois. La valeur finale est dans le HTML.
- licenciés
- 312
- spectateurs au dernier match
- 1 870
- points marqués par match
- 25,6
Rouleau de chiffres
Chaque chiffre glisse vers sa nouvelle valeur. Le sens suit la direction du changement.
07
Bandeau de scores
Défilement continu, en pause au survol, au focus et hors écran. Le bouton « Pause » reste visible (WCAG 2.2.2). Sous mouvement réduit, la liste est statique.
- Patriots 24 – 17 Filtiers de Lille
- Forgerons de Valenciennes 21 – 21 Patriots
- Patriots 10 – 17 Reuzes de Dunkerque
- Couronnes de Reims 31 – 14 Nautilus d'Amiens
- Filtiers de Lille 20 – 13 Reuzes de Dunkerque
- U18 : Patriots 28 – 6 Amiens
Apparitions au défilement
Les blocs marqués data-reveal apparaissent en arrivant à l'écran : montée, fondu, ou par lots dans une grille. Tout est déjà visible sous mouvement réduit.
data-reveal="up"
Le bloc monte de 24 pixels en apparaissant.
data-reveal="fade"
Le bloc apparaît en fondu, sans déplacement.
Premier bloc
Apparition par lots, avec un léger décalage.
Deuxième bloc
Apparition par lots, avec un léger décalage.
Troisième bloc
Apparition par lots, avec un léger décalage.
Quatrième bloc
Apparition par lots, avec un léger décalage.
Zone de test du curseur
Le curseur natif du système reste affiché partout. Avec une souris, sur les cartes data-cursor="card", une étiquette biseautée, de la forme des boutons primaires, le remplace et suit le pointeur avec une légère inertie. Son texte se change avec data-cursor-label (« VOIR » par défaut). Sur les boutons et les champs d'une carte, le curseur natif revient. La zone de glissement data-cursor="drag" prend le curseur ew-resize, en CSS seul. Rien de tout cela n'existe au tactile, en mouvement réduit ni en contraste forcé.
Bouton
Curseur natif, aucune étiquette.
Carte
Zone data-cursor="card" : l'étiquette « VOIR » remplace le curseur natif.
Carte avec un autre texte
Avec data-cursor-label="LIRE", l'étiquette dit « LIRE » au lieu de « VOIR ».
Carte avec un bouton
L'étiquette s'efface sur le bouton : le curseur natif revient.
Curseur natif, aucune étiquette.
Étape 1
Glissez pour défiler.
Étape 2
Glissez pour défiler.
Étape 3
Glissez pour défiler.
Étape 4
Glissez pour défiler.
Étape 5
Glissez pour défiler.
Étape 6
Glissez pour défiler.
Balayage entre les pages
Un clic sur un lien interne joue trois bandes (argent, rouge, marine) et affiche le nom de la page de destination. Un lien vers une ancre de la même page défile simplement, sans balayage.
Barre terrain et TOUCHDOWN
Descendez jusqu'en bas de la page : c'est là que le jeu se termine.
- La barre terrain suit votre lecture. Verticale à droite sur grand écran, horizontale en haut sur mobile, graduée de 10 à 50 yards puis en sens inverse, elle va d'une zone d'en-but à l'autre. Le ballon avance avec le défilement.
- Le TOUCHDOWN se joue une fois par visite, quand vous atteignez la zone d'en-but, tout en bas. Un seul flash, puis le mot s'affiche. Sous mouvement réduit, il se limite à un fondu.
- Descendez jusqu'en bas pour le voir.