/* ══════════════════════════════════════════════════════════════════════════ Sudoku · feuille unique (accueil public + application) -------------------------------------------------------------------------- Direction : « encre et papier ». Une grille noire posée sur un fond crème, UNE seule couleur d'accent, beaucoup de blanc, et des chiffres en JetBrains Mono qui tombent tous à la même largeur (une grille dont les chiffres dansent d'une case à l'autre se lit deux fois moins vite). Quatre règles qui expliquent tout le reste : 1. un seul motif de fond, la feuille : `--su-paper` pour le bureau, `--su-surface` pour ce qui est posé dessus. La grille elle-même est blanche, jamais crème : c'est ce qui lui donne son statut de page ; 2. une seule couleur d'accent, la framboise, reprise par le point du wordmark, la case sélectionnée, les chiffres posés par le joueur et l'action principale. Rien d'autre n'est coloré ; 3. aucune ombre portée molle. La profondeur vient d'un filet de 1px et d'un voile, jamais d'un halo gris de 40px ; 4. trois rôles typographiques stricts : Space Grotesk pour la marque et les titres, Inter Tight pour le texte d'interface, JetBrains Mono pour tout ce qui est chiffre (grille, chronomètre, compteurs, temps, rangs). Polices : auto-hébergées par /static/fonts.css, chargé avant cette feuille. AUCUNE nouvelle famille, aucune requête tierce (la CSP `font-src 'self'` l'interdit de toute façon, et /confidentialite promet le contraire). Clair/sombre : piloté par `data-theme` sur , que `theme-init.js` pose AVANT le premier rendu. Trois états comme partout dans le dépôt : clair, sombre, et l'absence de choix qui veut dire « suivre le système » (le script le résout lui-même). D'où UN SEUL bloc sombre ici, accroché à l'attribut : dupliquer les jetons dans une media query donnerait deux listes qui divergent, et la préférence de l'appareil finirait par battre le choix explicite de l'utilisateur. Plan du fichier : 1 · Jetons 8 · Test de niveau 2 · Socle 9 · Statistiques et trophées 3 · Accueil public 10 · Classement 4 · Coque 11 · Modales 5 · Accueil joueur 12 · Animations 6 · Les huit niveaux 13 · Téléphone 7 · La partie 14 · Survol (toujours en fin de fichier) ══════════════════════════════════════════════════════════════════════════ */ /* ┌────────────────────────────────────────────────────────────────────────── │ 1 · JETONS │ Les valeurs de la section 8 du contrat, à la lettre, puis les jetons │ DÉRIVÉS (préfixés du même `--su-`) : ils ne remplacent aucun jeton du │ contrat, ils le déclinent là où le contraste ou la géométrie l'exige. └────────────────────────────────────────────────────────────────────────── */ :root { /* Papier et surfaces */ --su-paper: #f7f6f3; --su-surface: #ffffff; --su-surface-2: #f1efe9; /* Encres. Mesuré : ink-2 tient 7,7:1 sur le papier et 8,3:1 sur le blanc. ink-3 tombe à 4,4:1 sur le blanc et 4,1:1 sur le papier : il est donc RÉSERVÉ au texte large (24px, ou 18,7px en gras) et aux tracés décoratifs. Tout petit texte secondaire passe par ink-2. */ --su-ink: #14151a; --su-ink-2: #4b4e59; --su-ink-3: #74788a; /* Filets. `line-fort` porte les séparations de blocs 3x3 : c'est de l'encre, pas un gris, sinon la grille perd sa structure. */ --su-line: #e0ded6; --su-line-fort: #14151a; /* Accent */ /* ── L'ACCENT EST RÉGLABLE, mais seulement par sa TEINTE ──────────────── Le joueur choisit une couleur dans « Mon compte » ; le JS ne pose qu'une valeur, `--su-h`, le degré sur le cercle chromatique. La clarté et la saturation restent écrites ici. C'est ce qui permet d'ouvrir le réglage en grand sans jamais rendre un texte illisible : un choix de couleur vraiment libre finit toujours par produire du jaune pâle sur du blanc. En fixant la clarté, le rapport de contraste ne dépend plus de ce que le joueur clique. 350 est le framboise d'origine, et les valeurs reproduisent exactement les anciens codes. */ --su-h: 350; --su-accent: oklch(0.587 0.182 var(--su-h)); --su-accent-doux: oklch(0.950 0.021 var(--su-h)); /* L'accent quand il porte du TEXTE (un bouton plein, un outil enfoncé). Mesuré au navigateur sur les 360 teintes : à la clarté de `--su-accent`, le blanc tombe à 3,4:1 autour du turquoise, parce que ces teintes sortent du gamut sRGB et se font éclaircir à la conversion. 0.50 tient 4,8:1 au pire. On n'assombrit pas `--su-accent` pour autant : là où il n'est qu'aplat, anneau ou tracé, sa clarté d'origine est la bonne. Un jeton par rôle, comme `--su-accent-texte`. */ --su-accent-plein: oklch(0.500 0.182 var(--su-h)); /* Couleurs de sens */ --su-or: #c8912f; --su-vert: #2f8f66; --su-rouge: #cc3b3b; /* Rayons */ --su-r-1: 6px; --su-r-2: 12px; --su-r-3: 18px; /* ── Jetons dérivés ──────────────────────────────────────────────────── Trois besoins que la liste du contrat ne couvre pas, chacun mesuré : `--su-accent-texte` : l'accent posé en TEXTE sur un fond teinté. Un chiffre `--su-accent` sur `--su-accent-doux` (la case sélectionnée) ne donne que 3,9:1, et sur `--su-surface-2` 4,0:1. Or le chiffre du joueur vit précisément sur ces fonds-là. La déclinaison sombre de l'accent monte à 5,3:1 sur les mêmes teintes et laisse `--su-accent` intact pour tout ce qui est aplat, anneau ou tracé (le contraste graphique se juge à 3:1, ces usages passent largement). En thème sombre le problème ne se pose pas : l'accent y est clair et donne 6,5:1 sur sa propre teinte, donc les deux jetons se rejoignent. `--su-surface-3` : le fond « même chiffre que la sélection », qui doit se distinguer du fond des pairs sans écraser le chiffre posé dessus. `--su-sur-accent` : le texte posé SUR un aplat d'accent. Il bascule avec le thème (blanc sur framboise en clair, encre sur rose en sombre) : écrire du blanc sur l'accent sombre donnerait 2,1:1. */ --su-accent-texte: oklch(0.509 0.171 var(--su-h)); --su-surface-3: #e9e5d9; --su-sur-accent: #ffffff; /* Teintes de sens, pour les pastilles et les encarts. Le texte posé dessus reste en `--su-ink` : `--su-vert` (4,0:1) et `--su-or` (2,8:1 sur blanc) ne sont JAMAIS du texte, seulement des tracés, des aplats et des médaillons. Partout où l'un des deux dessine une icône, un libellé lisible la double : l'étoile a son compte écrit, le trophée son nom, la série son nombre de jours. */ --su-tint-vert: #e7f3ed; --su-tint-rouge: #fbe8e8; --su-tint-or: #f8f0dd; /* Voiles. La profondeur du dépôt : un voile, pas un halo. */ --su-voile: rgba(247, 246, 243, .88); --su-voile-fort: rgba(20, 21, 26, .46); /* Familles. Toujours une pile de repli terminée par une générique : si le woff2 n'arrive pas, la page reste lisible au lieu de tomber sur la police par défaut du navigateur. */ --su-titre: 'Space Grotesk', 'Inter Tight', system-ui, sans-serif; --su-ui: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --su-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* Géométrie partagée. La largeur de la grille est reprise telle quelle par l'en-tête de partie et par le pavé : les trois blocs doivent tomber sur la même colonne, sinon la page part de travers à chaque changement de hauteur d'écran. */ --su-board: min(92vw, 62vh, 540px); --su-top-h: 56px; --su-nav: 0px; /* largeur de la navigation latérale, nulle sur téléphone */ /* Durées. Courtes, et toujours accrochées à un évènement réel. */ --su-t: 140ms; --su-t-2: 220ms; color-scheme: light; } /* ── Le SEUL bloc sombre du fichier ───────────────────────────────────────── */ :root[data-theme="dark"] { --su-paper: #0d0e12; --su-surface: #16181f; --su-surface-2: #1d202a; --su-ink: #eef0f6; --su-ink-2: #a7abb8; --su-ink-3: #7f8496; --su-line: #262a35; --su-line-fort: #6b7180; --su-accent: oklch(0.727 0.178 var(--su-h)); --su-accent-doux: oklch(0.232 0.036 var(--su-h)); /* En sombre, le texte posé dessus est de l'encre : la clarté vive de l'accent est déjà la bonne (mesurée à 6,9:1 au pire). */ --su-accent-plein: oklch(0.727 0.178 var(--su-h)); --su-or: #e8b74d; --su-vert: #4bbd8b; --su-rouge: #ff7a7a; --su-accent-texte: oklch(0.727 0.178 var(--su-h)); --su-surface-3: #232733; --su-sur-accent: #12131a; --su-tint-vert: #12271f; --su-tint-rouge: #2a1414; --su-tint-or: #2b2313; --su-voile: rgba(13, 14, 18, .88); --su-voile-fort: rgba(0, 0, 0, .64); color-scheme: dark; } /* ┌────────────────────────────────────────────────────────────────────────── │ 2 · SOCLE │ Remise à zéro, typographie de base, et les quatre briques réutilisées │ partout : bouton, champ, pastille, icône. └────────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100dvh; background: var(--su-paper); color: var(--su-ink); font: 400 15px/1.5 var(--su-ui); font-feature-settings: 'cv05' 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior-y: none; } h1, h2, h3, h4 { margin: 0; font-family: var(--su-titre); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; } p { margin: 0; } ul, ol, dl { margin: 0; padding: 0; list-style: none; } b, strong { font-weight: 600; } /* La chasse fixe partout où il y a un nombre : un chronomètre qui change de largeur à chaque seconde fait bouger toute la ligne. */ b, .kv dd, time { font-variant-numeric: tabular-nums; } ::selection { background: var(--su-accent-doux); color: var(--su-ink); } /* Le parcours clavier doit rester visible sur les deux thèmes : l'anneau est en accent, jamais en couleur de système. */ :focus-visible { outline: 2px solid var(--su-accent); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* La bibliothèque d'icônes en ne doit rien occuper. */ .icon-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* ── Icônes ──────────────────────────────────────────────────────────────── Le trait est posé ici, pas dans le markup : les ne portent ni fill ni stroke, ce qui les rend thémables par `currentColor`. Les rares attributs de présentation posés sur un enfant d'un symbole (le point du viseur) l'emportent sur ces valeurs héritées, et c'est voulu. */ .ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; } /* ── Boutons ─────────────────────────────────────────────────────────────── `.btn` pose `display: inline-flex`, qui bat le `[hidden] { display: none }` du navigateur : sans la parade juste dessous, tout bouton masqué par attribut resterait affiché et inerte. C'est la règle qui crée le piège qui doit le refermer, jamais l'appelant. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 11px 18px; border: 1px solid var(--su-line-fort); /* Rayon court, celui des cases et des touches, et non le rayon moyen : un bouton très arrondi sur fond crème est la silhouette de tous les gabarits d'app. Ici rien n'est une pilule, sauf ce qui en est une pour de bon (la série de jours, l'avatar). */ border-radius: var(--su-r-1); background: var(--su-surface); color: var(--su-ink); font: 500 15px/1.2 var(--su-ui); letter-spacing: -0.005em; text-align: center; text-decoration: none; cursor: pointer; transition: background var(--su-t) ease, color var(--su-t) ease, border-color var(--su-t) ease, transform var(--su-t) ease; } .btn[hidden] { display: none; } .btn:active { transform: translateY(1px); } .btn-main { background: var(--su-accent-plein); border-color: var(--su-accent-plein); color: var(--su-sur-accent); font-weight: 600; } .btn-ghost { background: transparent; border-color: var(--su-line); color: var(--su-ink-2); } .btn-sm { min-height: 38px; padding: 8px 13px; font-size: 14px; } .btn[disabled], .btn[aria-disabled="true"] { cursor: default; opacity: .5; transform: none; } .btn .ico { width: 18px; height: 18px; } /* Bouton icône seul : la cible reste carrée et pleine, le tracé seul ne se vise pas au pouce. */ .icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--su-r-1); background: transparent; color: var(--su-ink-2); cursor: pointer; transition: background var(--su-t) ease, color var(--su-t) ease; } .icon-btn[hidden] { display: none; } /* ── Liens ───────────────────────────────────────────────────────────────── Le lien reste en encre, souligné d'accent. L'accent en texte sur le papier ne donne que 4,2:1 : le mettre en couleur ferait un lien moins lisible que la phrase qui le porte. */ .link { color: inherit; text-decoration: underline; text-decoration-color: var(--su-accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; } /* ── Champs ──────────────────────────────────────────────────────────────── 16px sur tous les champs de saisie : en dessous, iOS zoome de lui-même au premier tap et laisse la page agrandie. Ce n'est pas un goût, c'est le seuil exact de Safari. La section 13 le réaffirme en NOMMANT les porteuses (une règle sur `input` nu se fait battre par la moindre classe). */ .field { display: grid; gap: 6px; min-width: 0; } .field-label { font-size: 13px; font-weight: 500; color: var(--su-ink-2); } .field-help { font-size: 12.5px; line-height: 1.45; color: var(--su-ink-2); } .field input, .auth-form input, .auth-card input, .modal-body input { width: 100%; min-width: 0; min-height: 46px; padding: 11px 13px; border: 1px solid var(--su-line); border-radius: var(--su-r-1); background: var(--su-surface); color: var(--su-ink); font-family: var(--su-ui); font-size: 16px; transition: border-color var(--su-t) ease; } .field input:focus, .auth-form input:focus, .modal-body input:focus { border-color: var(--su-accent); outline: none; box-shadow: inset 0 0 0 1px var(--su-accent); } /* ── Pastilles ───────────────────────────────────────────────────────────── `display: inline-flex` là encore : parade [hidden] obligatoire, la pastille « Terminée » de la grille du jour vit justement masquée. */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--su-line); border-radius: 999px; background: var(--su-surface-2); color: var(--su-ink-2); font-size: 12.5px; font-weight: 500; white-space: nowrap; } .pill[hidden] { display: none; } .pill .ico { width: 15px; height: 15px; } .pill-done { background: var(--su-tint-vert); border-color: transparent; color: var(--su-ink); } .pill-done .ico { color: var(--su-vert); } /* ── Wordmark ────────────────────────────────────────────────────────────── Un mot, une graisse, un point d'accent. Pas d'icône dans un carré arrondi : c'est la grille qui signe le produit, pas un logotype de plus. */ .wordmark { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--su-titre); font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: var(--su-ink); } .wordmark[hidden] { display: none; } .wordmark-dot { width: 6px; height: 6px; border-radius: 2px; background: var(--su-accent); } .wordmark-sm { font-size: 18px; } .wordmark-sm .wordmark-dot { width: 5px; height: 5px; } /* ── Bouton de thème de l'accueil public ───────────────────────────────── */ .theme-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--su-line); border-radius: var(--su-r-1); background: var(--su-surface); color: var(--su-ink-2); cursor: pointer; transition: color var(--su-t) ease, border-color var(--su-t) ease; } .theme-btn[hidden] { display: none; } /* ── La pastille « Admin » du Portfolio ──────────────────────────────────── Elle flotte en bas à gauche au z-index maximal (2147483645). Sur téléphone une modale s'ancre en bas d'écran : sans cette règle, la pastille recouvre exactement la rangée de boutons qui porte les gestes de la modale. Le marqueur `has-modal` est posé sur par UN SEUL helper côté JS. */ body.has-modal #mn-admin-pill { display: none; } /* Et sur téléphone, la pastille du Portfolio ne s'affiche pas du tout ici. Ancrée à 16px du bas avec le z-index maximal (2147483645, posé par app.py), elle recouvrait « Accueil » et « Niveaux » : mesuré inatteignables aux trois largeurs de téléphone, `elementFromPoint` renvoyant le contenu de la pastille, et le pilote échouant à cliquer avec un timeout. Pire qu'une gêne, un cul-de-sac : arrivé sur « Niveaux » par le contournement de l'accueil, plus rien ne ramenait en arrière (la flèche de retour est masquée hors partie, et la mémoire d'écran réinstallait « Niveaux » au rechargement). La REMONTER ne réglait rien, elle déplaçait le problème : posée à 74px, elle couvrait en pleine partie les boutons Notes, Gomme et Annuler à 360px. Le bas de l'écran appartient à la barre de navigation, rien d'autre ne peut y flotter. On applique donc ici la parade que l'app utilise déjà pour les modales ancrées en bas. Antoine garde sa pastille partout ailleurs sur le site : cette feuille ne sert que /sudoku. Le sélecteur porte `body` parce que le