/* Thème « base » — direction B, la table de jeu * * Source de vérité pour toutes les couleurs et toute la typographie. * Aucune valeur hexadécimale ne doit apparaître ailleurs dans le CSS. * * Un casse-tête se joue sur une table, sorti d'une boîte. Le feutre foncé * est la table ; le carton clair est la boîte. Cette séparation n'est pas * décorative : elle règle le problème publicitaire décrit plus bas. */ :root { /* ---- Le feutre — en-tête, pied de page, fond du plateau de jeu ---- */ --feutre: #0f3a34; --feutre-clair: #175048; --feutre-bord: rgba(233, 216, 189, 0.16); /* Le grain du feutre : deux dégradés croisés, à la place d'une texture en image. Zéro requête, aucune pixellisation. Les valeurs sont ici et non dans la mise en page parce qu'un thème peut vouloir un feutre plus ou moins marqué — de la toile en décembre, du velours à Pâques — sans recopier la disposition pour autant. */ --grain-clair: rgba(255, 255, 255, 0.014); --grain-fonce: rgba(0, 0, 0, 0.03); /* ---- Le carton — surface de contenu, et TOUS les emplacements pubs ---- */ --carton: #efe9dc; --carton-ombre: #b9ae97; /* le liseré bas de 3px qui donne l'épaisseur */ --carton-bord: #ded5c4; /* ---- Kraft — deux variantes obligatoires, voir la note contraste ---- */ --kraft: #c9a87c; /* uniquement SUR le feutre */ --kraft-fonce: #7d5f33; /* uniquement SUR le carton */ /* ---- L'accent, hérité du site de 2006 ---- * QUATRE JETONS ET NON UN, PARCE QU'IL Y A QUATRE RÔLES. Le second thème * l'a montré : un accent rouge foncé fait un fond de bouton correct, un * texte illisible sur le feutre, et un anneau de focus invisible. Un seul * jeton forçait les trois à être la même couleur, et c'est le genre de * contrainte qui ne se voit qu'en montant un deuxième thème. * * --accent le FOND d'un bouton, d'une étiquette * --sur-accent le texte posé DESSUS, et rien d'autre * --accent-lisible l'accent employé comme TEXTE sur le feutre * --focus l'anneau de focus sur le feutre * * `bin/verifier-contraste.php` vérifie les quatre. Un thème qui n'en * redéfinit qu'un se fait refuser par celui qu'il a oublié. */ --accent: #ff6b04; --accent-vif: #ff8433; --sur-accent: #171a17; --accent-lisible: #ff8433; --focus: #ff8433; /* L'ANNEAU DE FOCUS CHANGE DE COULEUR AVEC SON FOND, ET C'EST OBLIGÉ. Le * site a deux fonds opposés — un feutre très sombre, un carton très clair — * et aucune couleur ne peut atteindre 3:1 contre les deux sans se coincer * dans une bande de luminance de trois centièmes de large. Une seule * couleur d'anneau était donc soit invisible sur le carton, soit invisible * sur le feutre ; c'était le carton, où vivent le formulaire de record et * toute l'administration. * * La mise en page redéclare `--focus` sur les surfaces de carton. C'est la * cascade qui fait le travail : la règle `:focus-visible` reste unique et * ne connaît pas le fond sur lequel elle s'applique. */ --focus-sur-carton: #7d5f33; --vert: #006600; /* le chronomètre, l'état résolu */ --vert-clair: #7fa843; /* ---- Alerte — ce qui bloque : un motif de refus, une borne non tenue ---- * Elle appartient à l'habillage et non à `jeu.css`. --jeu-erreur est le * rouge d'un conflit de sudoku, sur la surface de jeu ; emprunter un jeton * de cette surface pour une liste de motifs dans l'admin mélangerait deux * vocabulaires que la règle 22 tient séparés — et rendrait thématisable * par accident ce qui ne doit pas l'être, ou l'inverse. */ --alerte: #8f2f26; /* ---- Texte ---- */ --encre: #171a17; /* sur carton */ --encre-douce: #6a655a; /* sur carton, secondaire */ --creme: #f6f2e8; /* sur feutre */ --creme-douce: #c9d6cf; /* sur feutre, secondaire */ /* ---- Contraste : vérifié, et deux règles à ne pas casser ---- * --creme sur --feutre .......... 13,1:1 ✓ * --creme-douce sur --feutre .......... 9,4:1 ✓ * --kraft sur --feutre ........... 6,5:1 ✓ * --kraft sur --carton ........... 1,8:1 ✗ jamais * --kraft-fonce sur --carton .......... 5,2:1 ✓ * --encre sur --carton ........... 14,8:1 ✓ * --sur-accent sur --accent ........... ✓ la seule combinaison * permise sur l'accent * --vert sur --carton ........... 6,4:1 ✓ * --alerte sur --carton ........... 6,7:1 ✓ * Ne jamais poser autre chose que --sur-accent sur --accent, ni de * --kraft sur --carton. Les ratios sont ceux que le script calcule ; * ils ne se recopient pas a la main. */ /* ---- Typographie ---- * Archivo : grotesque au dessin serré, l'esprit d'une étiquette imprimée * sur un couvercle de boîte. Titres seulement, en capitales, jamais * sous 18px. * Source Sans 3 : très lisible à 17px, large couverture linguistique — * ce qui compte avec l'anglais qui s'en vient. * IBM Plex Mono : chiffres tabulaires pour le chronomètre, sinon les * chiffres changent de largeur pendant le décompte. */ --police-titre: "Archivo", system-ui, sans-serif; --police-texte: "Source Sans 3", system-ui, -apple-system, sans-serif; --police-chiffre: "IBM Plex Mono", ui-monospace, monospace; --taille-xs: 0.875rem; /* 14px — crédits, mentions légales */ --taille-s: 0.9375rem; /* 15px — plancher absolu */ --taille-m: 1.0625rem; /* 17px — corps de texte */ --taille-l: 1.375rem; /* 22px — sous-titres */ --taille-xl: 1.875rem; /* 30px — titres de section */ --taille-xxl: 3.5rem; /* 56px — titre de page */ --interligne: 1.65; --suivi-titre: -0.02em; /* ---- Espacement — échelle de 4 ---- */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 1rem; --e-4: 1.5rem; --e-5: 2.5rem; --e-6: 4rem; /* ---- Formes ---- * Rayons faibles : une boîte de carton a des coins vifs, pas des galets. * L'épaisseur vient du liseré bas, pas d'une ombre floue. */ --rayon: 4px; --rayon-boite: 6px; --epaisseur: 0 3px 0 var(--carton-ombre); --ombre-table: 0 26px 50px rgba(0, 0, 0, 0.4); /* ---- Emplacements publicitaires ---- * RÈGLE DE MISE EN PAGE, pas seulement de style : toute publicité est * posée sur --carton, jamais sur --feutre. Les annonces AdSense sont * dessinées pour du fond clair et jurent violemment sur du foncé. * Le feutre encadre ; le carton porte le contenu et les annonces. */ --pub-hauteur-mobile: 100px; --pub-hauteur-bureau: 280px; --pub-fond: var(--carton); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }