/* ═══════════════════════════════════════════════════════════════════ v0.129 — POLICE DISPLAY SPACE GROTESK (Bloc 10 — 1/4, GDD §22.3) ═══════════════════════════════════════════════════════════════════ Déclarations @font-face self-hosted pour la police display. POURQUOI SELF-HOSTED ? - Performance : pas de DNS lookup vers fonts.googleapis.com (~150ms) - RGPD : Google Fonts CDN log les IP utilisateurs (jugé non-conforme par un tribunal allemand en 2022) — héberger soi-même = pas de transfert de données vers un tiers - Offline : le jeu fonctionne hors-ligne (utile pour le futur PWA) - Souveraineté : pas dépendant d'un service externe POURQUOI 3 GRAISSES SEULEMENT (400/500/700) ? - 400 (Regular) : titres standards (H2-H3, écrans cinématiques) - 500 (Medium) : titres importants (H1, titre de vue) - 700 (Bold) : titres critiques (Display, logo, écrans critiques) - Total ~40 Ko (vs ~150 Ko pour 6 graisses + italiques) POURQUOI font-display: swap ? - Affiche IMMÉDIATEMENT le texte avec la police fallback (Inter) - Remplace par Space Grotesk quand chargée - Évite le "FOIT" (Flash Of Invisible Text) qui pénalise la perf ─────────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/space-grotesk/space-grotesk-400.woff2') format('woff2'); /* unicode-range : optimisation — on indique au navigateur que cette police couvre le sous-ensemble latin (suffisant pour FR + EN). Les caractères hors range utilisent le fallback. */ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/space-grotesk/space-grotesk-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/space-grotesk/space-grotesk-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --bg: #050810; --bg2: #0a0f1e; --bg3: #0f172a; --card: #0d1526; --border: #162040; --border2: #1e3060; --accent1: #e94560; --accent2: #0ea5e9; --accent3: #7c3aed; --accent4: #10b981; --gold: #f59e0b; --text: #c8d6f0; /* v0.0.89 : les deux niveaux montent ENSEMBLE. Porter `--text3` au niveau de `--text2` sans toucher à ce dernier donnerait DEUX TOKENS DE LA MÊME COULEUR — 480 textes du même gris, et la hiérarchie disparaîtrait en silence. Contrastes : 12,4:1 · 7,1:1 · 5,1:1. Le niveau 3 est très exactement l'ancien niveau 2, affiché depuis toujours sur 301 textes et jamais signalé — c'est ce qui rend le choix sûr. */ --text2: #8aa4c8; --text3: #6b8ab0; /* v2.9.13 : les micro-libellés HUD (ANCRAGE, ÉPUISEMENT, COQUE, sous-titre du logo…) étaient en --text3 (#2d4070), quasi invisibles sur le fond sombre. On les passe en bleu turquoise BIEN identifiable (distinct des bleus/cyans déjà présents : --accent2 #0ea5e9, --cobaltis #3b82f6). --text3 reste inchangé pour ses autres usages (bordures, états désactivés, jauges). */ --turquoise: #2dd4bf; --ferrith: #f97316; --cobaltis: #3b82f6; --noctium: #a78bfa; --lumynite: #fbbf24; --sun-y: #fde68a; --sun-r: #fca5a5; --sun-b: #93c5fd; --hud: 'Orbitron', monospace; --mono: 'Share Tech Mono', monospace; --body: 'Exo 2', sans-serif; /* ═══════════════════════════════════════════════════════════════ v0.121 — DESIGN SYSTEM TOKENS (GDD §21.3, Bloc 9 — 1/8) ═══════════════════════════════════════════════════════════════ Tokens ajoutés en COHABITATION avec les variables historiques ci-dessus (décision Q1). Les composants v0.121+ utilisent ces tokens, le code historique conserve --hud/--body/--mono jusqu'au Bloc 10 (Identité visuelle) qui tranchera la migration totale. ⚠️ OÙ VA UNE NOUVELLE RÈGLE DE STYLE ? Deux vocabulaires cohabitent dans ce fichier, et c'est voulu : les variables historiques (--hud / --body / --mono, .btn-*, .modal-*) et les tokens du design system (--color-*, --space-*, --text-*, .dsh-*). La règle tient en deux lignes : • un composant NOUVEAU s'écrit entièrement avec les tokens ; • un composant HISTORIQUE ne se convertit PAS « au passage » parce qu'on l'a ouvert pour autre chose — la conversion partielle a déjà cassé des boutons, l'avertissement est posé au-dessus des composants .dsh-* concernés. Il n'existe plus de liste des zones restant à migrer : celle qui était tenue à la main a fini par mentir. `grep -c` sur une classe donne l'état réel, à jour, en une seconde. ═══════════════════════════════════════════════════════════════ */ /* ── §21.3.1 Familles de polices ───────────────────────────────── Inter : interface principale (libre, géométrique, 9 graisses) JetBrains Mono : code, identifiants techniques, coordonnées G-S-P Fallback système robuste si le chargement réseau échoue. */ /* ⚠️ --font-body N'EST PAS APPLIQUÉE au — c'est délibéré. L'identité visuelle du jeu repose sur Orbitron (--hud) ; brancher Inter globalement la remplacerait partout d'un coup. Pour utiliser Inter, il faut l'écrire explicitement sur le composant : font-family: var(--font-body). */ --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* ── §21.3.2 Échelle typographique (ratio 1.25 Major Third) ───── Plancher absolu 11 px (GDD strict). En-dessous = a11y impossible. */ --text-display: 32px; /* Titre du jeu, écrans cinématiques */ --text-h1: 24px; /* Titre de la vue courante (« Galaxie ») */ --text-h2: 20px; /* Titre de section dans une vue */ --text-h3: 16px; /* Titre de sous-section, header de carte (gras) */ --text-body-lg: 16px; /* Descriptions importantes (Dashboard) */ --text-body: 14px; /* TEXTE PAR DÉFAUT dans toute l'interface */ --text-small: 12px; /* Helper text, méta secondaire, légendes */ --text-tiny: 11px; /* Timestamps, indicateurs très secondaires */ /* ── §21.3.3 Poids typographiques ──────────────────────────────── Bold 700 PROSCRIT sauf exception très ponctuelle (titre du jeu). */ --font-weight-regular: 400; /* Texte courant par défaut */ --font-weight-medium: 500; /* Labels, méta importante, headers de tableau */ --font-weight-semibold: 600; /* H1-H3, valeurs clés, boutons primaires */ /* ── §21.3.3 Hauteurs de ligne ─────────────────────────────────── Body et H3 : 1.5 (équilibre lisibilité / densité) H1 et H2 : 1.3 (titres plus compacts) Display : 1.2 */ --line-height-display: 1.2; --line-height-heading: 1.3; --line-height-body: 1.5; /* ── §21.3.4 Système d'espacement (grille de 8 px) ────────────── Toute l'interface utilise des multiples de 8 px (avec un cran à 4 px pour intra-mot). Crée un rythme visuel cohérent. */ --space-0: 0; /* Élimination explicite */ --space-1: 4px; /* Intra-mot (icône / label) */ --space-2: 8px; /* Éléments très proches */ --space-3: 12px; /* Entre cartes (cf. §21.5.1) */ --space-4: 16px; /* Padding interne standard de carte */ --space-6: 24px; /* Entre sections d'un écran */ --space-8: 32px; /* Séparation entre grands blocs */ --space-12: 48px; /* Espacement vertical entre vues / écrans */ --space-16: 64px; /* Espacement très large (rarement utilisé) */ /* Padding latéraux d'écran */ --space-screen-desktop: 24px; --space-screen-mobile: 16px; /* ── §21.3.5 Hiérarchie de profondeur (z-index) ────────────────── 8 niveaux strictement ordonnés. Règle : on ne crée JAMAIS de z-index libre. Toute couche utilise un de ces niveaux. Évite les guerres de z-index (+1, +1, +1) qui finissent par tout casser. ⚠️ v0.0.26 — LES QUATRE NIVEAUX DU HAUT SONT PASSÉS DE 40/50/60/70 À 1300/1310/1320/1330, ET IL NE FAUT PAS LES REDESCENDRE. La table d'origine ne tenait pas compte de l'échelle du RESTE du jeu, écrite avant elle : celle-là monte jusqu'à 99 999, et surtout la barre de ressources est à 190 et la topbar à 200 (cf. « ZONE A SACRÉE »). Une modale à 40 naissait donc ENTERRÉE sous les deux barres du haut — titre imprimé derrière les tuiles de ressources, croix de fermeture non cliquable, page derrière non assombrie. Le défaut était devenu structurel : QUATRE panneaux l'avaient chacun contourné dans son coin (projection 1200, journal des versions 1000, conseil de production 1000, comète 1000) — très exactement la « guerre de z-index » que ces quatre lignes de commentaire prétendaient empêcher. Ces quatre rustines ont été retirées avec cette correction : tout repasse par les jetons ci-dessous, et une fenêtre neuve n'a plus rien à savoir. POURQUOI 1300 ET PAS 1000 : pour ne se cogner à RIEN, donc n'avoir aucune égalité à arbitrer par ordre du DOM. Au-dessus de tout ce qu'une modale doit couvrir (topbar 200, panneau de production 320 — d'où s'ouvre la projection —, chat 999, modale d'authentification 1000, sa topbar boostée 1100) et sous les trois utilitaires délibérément posés au-dessus de tout (autocomplétion de mention 1500, bandeau de mute 9999, lien d'évitement 99 999). */ --z-base: 0; /* Contenu courant des écrans */ --z-elevated: 10; /* Panneau VMs (desktop), bandeau diagnostic */ --z-sticky: 20; /* Topbar et barre d'onglets (sticky en haut) */ --z-drawer: 30; /* Panneau VMs mobile (drawer flottant) */ --z-modal: 1300; /* Modales et bottom sheets */ --z-toast: 1310; /* Notifications éphémères */ --z-critical: 1320; /* Modales critiques (attaque, périclitement H-1) */ --z-tooltip: 1330; /* Tooltips et infobulles (toujours au-dessus) */ /* ═══════════════════════════════════════════════════════════════ v0.122 — CODE COULEUR SÉMANTIQUE (GDD §21.4, Bloc 9 — 2/8) ═══════════════════════════════════════════════════════════════ Principe fondateur §21.4.1 : la couleur ne porte JAMAIS seule le sens. Toujours doublée d'icône, texte, forme ou position. ~8% des hommes et ~0.5% des femmes ont une forme de daltonisme — le rouge vs vert est particulièrement problématique. Décisions v0.122 : - Q1 cohabitation : tokens GDD ajoutés, --bg/--card/--border historiques préservés (futurs composants utilisent les tokens sémantiques, le code historique reste intact) - Q2 cohabitation accents : --accent1/2/3/4 préservés, tokens sémantiques ajoutés en parallèle - Q3 migration ciblée ressources rares : seules Tritanium / Palladrine / Iridyum sont posées comme tokens (les anciennes --ferrith/--cobaltis/--noctium/--lumynite restent à leurs valeurs actuelles — réévaluation potentielle Bloc 10) - Q4 périclitement : tokens + intégration v0.116-120 récents - Q5 migration éléments criants Bloc 8 ═══════════════════════════════════════════════════════════════ */ /* ── §21.4.2 États systémiques (4 couleurs universelles) ───────── Utilisées partout pour notifications, bandeau diagnostic, états de cartes, retours d'action. Triplet bg/fg/border par état. Cohérence avec le bandeau diagnostic v0.5 (mêmes hex exacts). */ /* ℹ️ INFO — état neutre / contextuel / en attente */ --color-info-fg: #2563eb; /* Texte / icône info */ --color-info-bg: rgba(37, 99, 235, 0.12); /* Fond subtil */ --color-info-border: rgba(37, 99, 235, 0.40); /* Bordure marquée */ /* ✅ SUCCÈS — construction terminée, transit complété, butin reçu */ --color-success-fg: #22c55e; --color-success-bg: rgba(34, 197, 94, 0.12); --color-success-border: rgba(34, 197, 94, 0.40); /* ⚠️ ATTENTION — énergie insuffisante, stocks bientôt pleins */ --color-warning-fg: #ea580c; --color-warning-bg: rgba(234, 88, 12, 0.12); --color-warning-border: rgba(234, 88, 12, 0.40); /* ❌ ERREUR — connecteur manquant, attaque, ressources manquantes */ --color-error-fg: #dc2626; --color-error-bg: rgba(220, 38, 38, 0.12); --color-error-border: rgba(220, 38, 38, 0.40); /* ── §21.4.3 Seuils de jauges de santé ────────────────────────── 3 seuils universels pour toute valeur quantifiable en jauge : ≥50% sain / 20-50% à surveiller / <20% critique / <5% clignotant. */ --gauge-safe: var(--color-success-fg); /* ≥ 50% */ --gauge-medium: var(--color-warning-fg); /* 20-50% */ --gauge-danger: var(--color-error-fg); /* < 20% */ --gauge-critical: var(--color-error-fg); /* < 5% + animation 0.8s */ /* ── §21.4.4 Escalade visuelle Périclitement ───────────────────── Calendrier d'alertes strict sur 3 paliers. L'escalade va du statique vers le clignotant vers le permanent ; teinte s'assombrit à mesure que l'échéance se rapproche. */ --periclitement-j7: #ea580c; /* Orange statique, bandeau visible */ --periclitement-j1: #dc2626; /* Rouge clignotant 1.2s, push si activé */ /* ⚠️ #7f1d1d sur le fond principal ne donne que 3,2 : 1, sous le seuil de 4,5 : 1 exigé pour du texte. C'est une dérogation ASSUMÉE, pas un oubli : le palier le plus grave doit être le plus sombre, sinon l'escalade s'inverse à l'écran. Elle ne tient QUE parce que la couleur n'est jamais seule — clignotement + texte explicite portent l'information. Retirer l'un des deux rend ce palier illisible pour une partie des joueurs. */ --periclitement-h1: #7f1d1d; /* Rouge profond permanent, son si activé */ /* ── §21.4.7 — LES TROIS COULEURS DE RARES SONT PARTIES (v0.0.158) ─ ⚠️ NE PAS LES REPOSER ICI. Elles ont existé (`--resource-tritanium`, `--resource-palladrine`, `--resource-iridyum`), aucune ligne du jeu ne les a jamais lues, et surtout elles ne disaient PAS la même chose que la table qui fait foi : là où le jeu peint le Tritanium en cyan, la Palladrine en ambre et l'Iridyum en violet, elles annonçaient un blanc-argent, un orangé doré et un cuivré sombre. ⚠️ LA COULEUR D'UNE RESSOURCE VIT DANS `RES_INFO` (`public/shared/constants.js`), et nulle part ailleurs. C'est de là que le JS la pose en ligne quand il en a besoin. Une seconde table dans cette feuille rouvrirait le piège : elle aurait l'air officielle, elle serait rangée avec les autres, et le premier écran qui s'en servirait peindrait ces minerais d'une couleur que le joueur n'a vue nulle part. */ /* ── §21.4.8 Couleurs factions PNJ (§16.7) ─────────────────────── Triptyque bleu/rouge/vert classique pour lecture instantanée des allégeances. Nuances SOMBRES pour ne pas concurrencer le sémantique. */ --faction-federation: #1e3a8a; /* Autorité, ordre, légalité */ --faction-corsaires: #991b1b; /* Rébellion, anarchie, danger */ --faction-sentinelles: #166534; /* Gardiens silencieux, mystère ancien */ /* ── §21.4.9 Tags spéciaux ─────────────────────────────────────── Badges discrets pour signaler une caractéristique particulière. */ --tag-rare: #8b5cf6; /* RARE — connecteurs de rares, ordres marché */ --tag-premium: #eab308; /* PREMIUM — officiers cristaux stellaires */ --tag-boost: #ea580c; /* BOOST ×N — panneau admin v0.3 */ /* ── §21.4.10 Palette neutre (cohabitation Q1) ─────────────────── DSH est un jeu à thème sombre. La palette neutre GDD est construite autour de #0a0e1c. Tokens en cohabitation avec --bg historique. */ --color-bg-main: #0a0e1c; /* Background général GDD */ --color-bg-card: #131930; /* Cartes, modales, panneaux */ --color-bg-hover: #1a2240; /* État survolé / sélectionné */ --color-text-primary: #f1f5f9; /* Titres, valeurs principales */ --color-text-secondary: #94a3b8; /* Sous-titres, descriptions */ /* v0.0.89 : aligné sur le nouveau niveau 3 des `--text*` (il était à 3,8:1). Les deux familles cessent ainsi de dire deux choses différentes du même rang de lecture ; les deux autres niveaux (16,6:1 et 7,1:1) allaient déjà bien et n'ont pas bougé. */ --color-text-tertiary: #7c8ba3; /* Hints, placeholders, désactivés */ --color-border-subtle: rgba(255, 255, 255, 0.10); /* Séparations subtiles */ --color-border-strong: rgba(255, 255, 255, 0.20); /* Séparations marquées, focus */ /* ═══════════════════════════════════════════════════════════════ v0.123 — PATTERNS D'INTERACTION (GDD §21.5, Bloc 9 — 3/8) ═══════════════════════════════════════════════════════════════ Formalise les briques de l'interface : cartes, boutons, modales, tooltips. Objectif : qu'un même composant ait toujours le même comportement et la même apparence où qu'il apparaisse. Décisions v0.123 : - Q1 : .dsh-modal en cohabitation + migration modales Bloc 8 - Q2 : .dsh-btn-* en cohabitation + migration boutons Bloc 8 - Q3 : .dsh-card en cohabitation (.card historique préservé) - Q4 : tooltips via attribut data-tooltip (CSS pur + JS léger) - Q5 : migration Bloc 8 complète (modales onboarding/quêtes/ mentor + leurs boutons) + composants génériques + audit. */ /* ── §21.5.1 Anatomie de carte ────────────────────────────────── Bordure radius 8 px = "border-radius-md" GDD. Padding 16 px, espacement 12 px entre cartes (cf. v0.121 --space-3 / --space-4). */ --radius-sm: 4px; /* Boutons, badges, tags */ --radius-md: 8px; /* Cartes, modales */ --radius-lg: 12px; /* Modales larges, panneaux */ --radius-pill: 999px; /* Pills, boutons ronds, badges */ /* ── §21.5.2 Hauteurs de boutons standardisées ────────────────── Standard = 40 px desktop / 44 px mobile (taille tactile min Apple). Small = 32 px (tableaux denses). Large = 48 px (CTAs majeurs). */ --btn-height-small: 32px; --btn-height-standard: 40px; /* Desktop par défaut */ --btn-height-mobile: 44px; /* Tactile minimum GDD §21.8.6 */ --btn-height-large: 48px; /* CTAs majeurs (transit, attaque) */ /* ── §21.5 Ombres et profondeur ───────────────────────────────── Ombres discrètes pour différencier les couches. Pas d'ombres hollywoodiennes — DSH est sobre. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); /* Hover carte */ --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); /* Modale standard */ --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6); /* Modale critique */ /* ── §21.5 Durées d'animation standardisées ───────────────────── Cohérence des transitions à travers le jeu. Animation courte (100ms) pour les retours immédiats, longue (250ms) pour les mouvements de panneaux/modales. */ --anim-fast: 100ms; /* Hover, active */ --anim-normal: 200ms; /* Fade, scale modale */ --anim-slow: 300ms; /* Drawer mobile, transition vue */ /* ── §21.5.7 Tooltips (Q4 : data-tooltip) ─────────────────────── Délais GDD : 500ms desktop, 700ms long press mobile. Largeur max pour limiter à ~3 lignes. */ --tooltip-bg: rgba(15, 25, 50, 0.97); --tooltip-fg: var(--color-text-primary); --tooltip-border: var(--color-border-strong); --tooltip-max-width: 240px; --tooltip-delay: 500ms; /* ═══════════════════════════════════════════════════════════════ v0.124 — ARCHITECTURE DE L'INFORMATION (GDD §21.2, Bloc 9 — 4/8) ═══════════════════════════════════════════════════════════════ Barre d'onglets unifiée à 11 vues GDD §21.2.1 (révision v0.26 du GDD) : Dashboard / Galaxie / VM / Recherche / Social / Factions IA / Combat / Marché / Alliance / Profil / Notifications. Pattern retenu : défilement horizontal scrollable (GDD §21.2.2). */ /* ── §21.2.2 Barre d'onglets ──────────────────────────────────── Hauteur 48 px desktop / 44 px mobile (tactile minimum Apple). Indicateur d'onglet actif : barre cyan en bas, 3 px. */ --tabs-height-desktop: 48px; --tabs-height-mobile: 44px; --tabs-bg: rgba(15, 24, 40, 0.95); --tabs-border-bottom: 1px solid var(--color-border-subtle); --tab-active-indicator-thickness: 3px; --tab-active-color: var(--accent2); /* cyan #0ea5e9 (identité DSH) */ --tab-inactive-color: var(--color-text-secondary); --tab-hover-bg: rgba(255, 255, 255, 0.04); --tab-padding-x: var(--space-4); --tab-gap: var(--space-1); --tab-scroll-shadow: linear-gradient(to right, rgba(15, 24, 40, 0.9), transparent); /* ── §21.5.6 Files d'attente (Q4 : composant générique .dsh-queue) ─ Reprend la grammaire des files existantes (bâtiments v0.6, recherche v0.21). Les futures files (Phase 2 combat, Phase 3 marché) utiliseront .dsh-queue. */ --queue-item-height: 44px; /* = --btn-height-mobile */ --queue-progress-h: 4px; --queue-gap: var(--space-2); /* ── §21.5.4 Champs de saisie (Q5 : sous-set .dsh-input/.dsh-toggle) ─ .dsh-input : champ texte standard (label + input + helper) .dsh-toggle : switch on/off (label + interrupteur visuel) */ --input-height: var(--btn-height-standard); /* 40px */ --input-padding-x: var(--space-3); --input-bg: var(--color-bg-card); --input-border: var(--color-border-subtle); --input-border-focus: var(--color-info-fg); --input-border-error: var(--color-error-fg); --toggle-width: 44px; --toggle-height: 24px; --toggle-knob-size: 18px; /* ═══════════════════════════════════════════════════════════════ v0.125 — RESPONSIVE ET ADAPTATION MOBILE (GDD §21.6, Bloc 9 — 5/8) ═══════════════════════════════════════════════════════════════ Pose les 5 breakpoints standardisés GDD §21.6.1 et les tokens des composants responsive : drawer, table responsive, grille adaptative. Décisions v0.125 : - Q1 : Cohabitation. Nouveaux composants Bloc 9 alignés sur les 5 breakpoints. Les ~116 règles body.mobile-mode historiques conservées intactes pour ne rien casser. - Q2 : .dsh-drawer en cohabitation (panneau VMs actuel préservé) - Q3 : .dsh-table générique en cohabitation - Q4 : Swipe down bottom sheets + pull-to-refresh Dashboard - Q5 : Sections Dashboard empilées + grilles .dsh-view-grid adaptatives 4 → 3 → 2 → 1 colonnes selon GDD §21.6.4 */ /* ── §21.6.1 Breakpoints standardisés ──────────────────────────── Pour usage dans @media queries (les variables CSS ne marchent PAS dans @media, donc on documente ici les valeurs en référence et on les utilise en dur dans les media queries). Le seuil critique est 700 px (mode mobile vs desktop) — déjà encodé dans le MVP v0.20. Mobile portrait : < 480 px Mobile landscape / petite tablette : 480 - 700 px Tablette : 700 - 1024 px Desktop standard : 1024 - 1440 px Desktop large : > 1440 px Tokens de référence (utilisables dans calc() et autres contextes) : */ --bp-mobile-portrait: 480px; /* Téléphones tenus verticalement */ --bp-mobile-landscape: 700px; /* SEUIL CRITIQUE mode mobile vs desktop */ --bp-tablet: 1024px; /* iPad et fenêtres desktop étroites */ --bp-desktop: 1440px; /* Écrans desktop standards → larges */ /* ── §21.6.3 Drawer flottant pour panneau VMs sur mobile ───────── Sur mobile (< 700 px), le panneau VMs devient un drawer flottant accessible via un bouton flottant 🚀 en bas à droite. Le drawer glisse depuis la droite (240 px de large pour la lisibilité tactile, plus large que le panneau desktop 130 px). */ --drawer-width-mobile: 240px; /* Drawer mobile (lisibilité tactile) */ --drawer-bg: rgba(15, 24, 40, 0.97); --drawer-shadow: -4px 0 20px rgba(0, 0, 0, 0.5); --drawer-anim-duration: var(--anim-slow); /* 300ms — animation glissement */ --drawer-handle-size: 56px; /* Bouton flottant 🚀 (tactile confortable) */ --drawer-handle-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* ── §21.6.5 Tableaux ↔ listes de cartes sous 700 px ───────────── Composant .dsh-table qui bascule automatiquement entre : - desktop ≥ 700 px : tableau classique avec colonnes, tri, header sticky - mobile < 700 px : chaque ligne devient une carte verticale autonome Le contenu est identique, seul le contenant change (cf. §21.5.7). */ --table-header-height: 44px; --table-row-height: 44px; --table-row-hover-bg: var(--color-bg-hover); --table-border-color: var(--color-border-subtle); /* ── §21.6.4 Grilles de cartes adaptatives ─────────────────────── 4 → 3 → 2 → 1 colonnes selon la largeur. Largeur minimale d'une carte : 280 px (en dessous les contenus ne tiennent plus). C'est ce minimum qui détermine le nombre de colonnes possibles. */ --card-min-width: 280px; --grid-gap: var(--space-3); /* 12 px entre cartes */ /* ── §21.5.9 Gestes tactiles ───────────────────────────────────── Délai pour différencier tap et long press. Le tap est ≤ 200 ms, le long press est ≥ 700 ms (recommandation iOS/Android). Entre les deux, comportement ambigu — on ignore. */ --gesture-long-press-ms: 700; /* Durée seuil pour long press */ --gesture-swipe-threshold: 60px; /* Distance min pour détecter un swipe */ /* ═══════════════════════════════════════════════════════════════ v0.126 — NOTIFICATIONS ET FEEDBACK (GDD §21.7, Bloc 9 — 6/8) ═══════════════════════════════════════════════════════════════ Pose les 4 patterns visuels GDD §21.7.2 (toast / badge / bandeau / modale critique), les 6 catégories GDD officielles, les états du feedback immédiat (§21.7.9) et la page Préférences DND. Décisions v0.126 : - Q1 : Hooks sur events existants (badges live sur .dsh-tab) - Q2 : Migration 4 → 6 catégories GDD + bouton "→ Voir" - Q3 : Vue Profil enrichie avec Préférences notifications - Q4 : Coquille push UI uniquement (vraie implémentation Bloc 11) - Q5 : Coquille email UI uniquement (vraie implémentation Bloc 11) */ /* ── §21.7.2 — 4 patterns visuels de notifications in-game ─────── */ /* Toast : glisse haut-droite desktop / haut-centré mobile, 5s auto-dismiss */ --toast-width: 320px; --toast-max-width-mobile: 90vw; --toast-duration-ms: 5000; /* Auto-dismiss 5 s */ --toast-duration-error-ms: 8000; /* Plus long pour erreurs (temps de lire) */ --toast-gap: var(--space-2); --toast-padding: var(--space-3) var(--space-4); --toast-anim: var(--anim-normal); /* Badge : compteur numérique rouge sur l'icône cloche */ --badge-bg: var(--color-error-fg); --badge-fg: #ffffff; --badge-size: 18px; --badge-font-size: 11px; /* Plancher absolu GDD §21.3.2 */ --badge-border-color: var(--color-bg-main); /* Bandeau diagnostic : sous la topbar, permanent tant que la condition est vraie */ --banner-height: 40px; --banner-padding-x: var(--space-4); /* Modale critique : centrée plein écran, bloque l'interaction */ /* Pas de tokens dédiés — utilise .dsh-modal v0.123 avec variant is-critical */ /* ── §21.7.3 — Centre de notifications (côté droit desktop) ──── */ --notif-center-width-desktop: 40vw; --notif-center-max-width: 440px; --notif-center-min-width: 320px; /* ── §21.7.8 — Préférences DND (Do Not Disturb) ──────────────── */ --dnd-row-height: 56px; --dnd-section-gap: var(--space-4); /* ── §21.7.9 — Feedback immédiat (loading, skeleton) ──────────── */ --skeleton-bg: var(--color-bg-card); --skeleton-highlight: rgba(255, 255, 255, 0.06); --skeleton-anim-duration: 1.5s; /* ═══════════════════════════════════════════════════════════════ v0.127 — ACCESSIBILITÉ WCAG 2.1 AA (GDD §21.8, Bloc 9 — 7/8) ═══════════════════════════════════════════════════════════════ Pose les tokens nécessaires à la conformité WCAG 2.1 AA : - Bordure de focus contrastée (3:1 minimum) - Skip link visible au focus - Barre de raccourcis clavier cliquable (suggestion utilisateur) - Animation ralentie pour Périclitement J-1 (2s au lieu de 1.2s) quand prefers-reduced-motion est actif Décisions v0.127 : - Q1 : Audit ciblé des contrastes sur les tokens Bloc 9. Une seule dérogation en est sortie, elle est expliquée sur le token --periclitement-h1 lui-même. - Q2 : 9 raccourcis clavier complets + barre cliquable - Q3 : ARIA ciblé sur composants v0.121-126 - Q4 : Désactivation totale animations via prefers-reduced-motion - Q5 : Long press 700ms ciblé sur cartes VMs */ /* ── §21.8.4 Bordure de focus (3:1 minimum) ───────────────────── Cyan vif #0ea5e9 sur fond sombre = ratio largement au-dessus de 3:1. 2 px d'épaisseur pour être visible sans envahir, offset 2 px pour respirer autour de l'élément. */ --focus-outline-color: var(--accent2); /* cyan #0ea5e9 identité DSH */ --focus-outline-width: 2px; --focus-outline-offset: 2px; /* ── §21.8.4 Skip link "Aller au contenu principal" ────────────── Visible uniquement au focus (caché par défaut hors écran). Pour les utilisateurs au clavier ou lecteur d'écran. */ --skip-link-bg: var(--color-info-fg); --skip-link-fg: #ffffff; --skip-link-padding: var(--space-3) var(--space-4); /* ── Barre d'actions rapides (raccourcis clavier cliquables) ──── Suggestion utilisateur v0.127. Pattern type OGame : barre flottante avec pastilles cliquables qui dupliquent les 9 raccourcis clavier GDD §21.5.8. Utile sur desktop (découvrabilité) et indispensable sur mobile (pas de clavier physique). */ --shortcuts-bar-height: 44px; /* = btn-height-mobile */ --shortcuts-bar-bg: rgba(15, 24, 40, 0.92); --shortcuts-bar-border: 1px solid var(--color-border-subtle); --shortcuts-btn-size: 36px; --shortcuts-btn-bg: var(--color-bg-card); --shortcuts-btn-hover-bg: var(--color-bg-hover); --shortcuts-btn-border: var(--color-border-subtle); --shortcuts-btn-fg: var(--color-text-secondary); --shortcuts-btn-fg-active: var(--accent2); /* ── v1.01 — Sidebar verticale gauche (refonte navigation) ────── Ajout v1.01 : la barre d'onglets principale .dsh-tabs (refonte v0.124) est désormais affichée en sidebar verticale gauche fixée (icônes seules, label en tooltip). Les 9 raccourcis clavier y sont également rapatriés en pied. Tokens dédiés pour ne pas polluer .dsh-tabs qui reste valide pour les sous-onglets niveau 3. */ --sidebar-width: 60px; /* largeur de la sidebar (icônes seules) */ --sidebar-bg: rgba(10, 15, 28, 0.95); --sidebar-border: 1px solid var(--color-border-subtle); --sidebar-item-size: 44px; /* hauteur d'un bouton (tactile-safe) */ --sidebar-icon-size: 1.25rem; --sidebar-gap: 4px; --sidebar-tooltip-bg: rgba(5, 8, 16, 0.95); --sidebar-tooltip-fg: var(--color-text-primary); /* ── §21.8.7 Animation Périclitement J-1 ralentie ─────────────── En mode prefers-reduced-motion, le clignotement passe de 1.2s à 2s — toujours visible, mais moins agressif pour les joueurs sensibles au mouvement (troubles vestibulaires). */ --periclitement-j1-duration-reduced: 2s; /* ═══════════════════════════════════════════════════════════════ v0.128 — PRINCIPES ERGONOMIQUES FINAUX (GDD §21.1, Bloc 9 — 8/8) ═══════════════════════════════════════════════════════════════ DERNIÈRE BRIQUE du Bloc 9. Pass de polissage général qui consolide tout le travail Bloc 9 (v0.121-127). Pose les tokens du menu contextuel long press et du feedback immédiat. Décisions v0.128 : - Q1 : ARIA ciblé sur composants historiques les plus utilisés - Q2 : Cohabitation maintenue des DEUX systèmes d'affichage mobile — la classe body.mobile-mode (posée par le JS, elle obéit au bouton de la barre) et les media queries @media (max-width: 700px) (qui ne regardent QUE la largeur réelle). ⚠️ Elles ne se déclenchent PAS ensemble : forcer la classe sur une fenêtre large ne déclenche aucune media query, et on croit alors avoir vérifié le mobile. Pour de vrai, il faut RÉTRÉCIR la fenêtre sous 700 px. - Q3 : Migration ciblée #prod-hint → .dsh-banner (alias en cohabitation) - Q4 : Pièges de focus sur toutes les modales bloquantes - Q5 : Long press 700ms cartes VMs → menu contextuel */ /* ── §21.1.4 Feedback immédiat — Bouton "loading" ──────────────── Pattern d'état transitoire (100ms à 3s) : bouton désactivé avec spinner inline. Token pour la taille du spinner. */ --btn-spinner-size: 14px; --btn-spinner-border-width: 2px; /* ═══════════════════════════════════════════════════════════════ v0.129 — TYPOGRAPHIE DISPLAY (GDD §22.3, Bloc 10 — 1/4) ═══════════════════════════════════════════════════════════════ Première brique du Bloc 10 (Identité visuelle). Pose la police display Space Grotesk pour les grandes échelles cinématiques : - Titre du jeu / logo - Écran de connexion / création de compte - Onboarding (modales pleine page Bloc 8) - Modales critiques (Périclitement H-1) - Heros Dashboard (titre principal) Décisions v0.129 : - Q1 : Self-hosted via @font-face (perf + RGPD + offline) - Q2 : Application CIBLÉE titres + écrans cinématiques (pas le body) - Q3 : 3 graisses 400/500/700 (couvre tous les usages) - Q4 : Token --font-display + classe utilitaire .dsh-display - Q5 : Cohabitation avec Orbitron historique (pas de migration brutale) Justification GDD §22.3 : - Space Grotesk : caractère affirmé sans tape-à-l'œil - Compatible visuellement avec Inter (frères-de-style) - À ÉVITER : Eurostile (cliché Star Trek), Orbitron (2010-2015) → On laisse Orbitron sur les composants legacy pour ne pas tout refaire, mais on n'en ajoute PLUS dans les nouveaux. */ /* ── §22.3 Police display ───────────────────────────────────────── Famille Space Grotesk avec fallbacks géométriques modernes. Ordre d'importance : 1. Space Grotesk (notre choix, self-hosted) 2. Inter Display (alternative si Space Grotesk pas encore chargée) 3. Inter (la police body, frère-de-style) 4. Fallbacks système (Apple, Microsoft, etc.) */ --font-display: 'Space Grotesk', 'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* ── Graisses Space Grotesk disponibles ─────────────────────────── On charge 3 graisses pour couvrir tous les usages sans alourdir le bundle (3 × 13 Ko = ~40 Ko, négligeable). */ --font-display-weight-regular: 400; --font-display-weight-medium: 500; --font-display-weight-bold: 700; /* ── Letter-spacing pour Space Grotesk en grand format ─────────── Space Grotesk a un letter-spacing par défaut un peu serré aux grandes tailles ; on l'aère légèrement pour le rendu cinématique. */ --display-letter-spacing-tight: -0.02em; /* Titres serrés (logo) */ --display-letter-spacing-normal: 0; /* Défaut */ --display-letter-spacing-wide: 0.04em; /* UPPERCASE éparpillé */ } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{font-size:14px} body{background:var(--bg);color:var(--text);font-family:var(--body);min-height:100vh;overflow:hidden} /* ═══════════════════════════════════════════════════════════════════ v0.122 (GDD §21.4.4) — Animations Périclitement (Bloc 9 — 2/8) ═══════════════════════════════════════════════════════════════════ GDD strict §21.4.3 : jauge critique <5% = animation 0.8s. GDD strict §21.4.4 : Périclitement J-1 = clignotant 1.2s. 2 keyframes distinctes pour respecter les cadences. IMPORTANT : ces animations sont skippables via prefers-reduced-motion (GDD §21.8.7). Le bloc media query est dans la section accessibilité en bas du CSS (à compléter en v0.127). */ @keyframes dshGaugeCritical { /* <5% : clignotement rapide pour action immédiate */ 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes dshPericlitementJ1 { /* J-1 : clignotement plus lent pour notification d'avertissement */ 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.98); } } /* Classes utilitaires pour appliquer les animations */ .is-critical-gauge { animation: dshGaugeCritical 0.8s ease-in-out infinite; } .is-periclitement-j1 { animation: dshPericlitementJ1 1.2s ease-in-out infinite; } /* ═══════════════════════════════════════════════════════════════════ v0.121 (GDD §21.3.2) — Hiérarchie typographique globale (Bloc 9 — 1/8) ═══════════════════════════════════════════════════════════════════ Échelle 1.25 (Major Third). Applique l'échelle GDD sur les balises sémantiques. Les composants peuvent override mais on a une baseline cohérente partout. IMPORTANT : on ne touche PAS aux composants .logo, .modal-title, etc. qui ont leur propre styling historique — leur migration sera traitée par les versions ultérieures du Bloc 9. */ h1, .h1 { font-size: var(--text-h1); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); color: var(--text); } h2, .h2 { font-size: var(--text-h2); font-weight: var(--font-weight-semibold); line-height: var(--line-height-heading); color: var(--text); } h3, .h3 { font-size: var(--text-h3); font-weight: var(--font-weight-semibold); line-height: var(--line-height-body); color: var(--text); } /* Classe utilitaire .display réservée aux écrans cinématiques (§21.3.2) */ .display { font-size: var(--text-display); font-weight: var(--font-weight-semibold); line-height: var(--line-height-display); } /* Classes utilitaires de texte (cohérence avec l'échelle GDD) */ .text-body-lg { font-size: var(--text-body-lg); } .text-body { font-size: var(--text-body); } .text-small { font-size: var(--text-small); } .text-tiny { font-size: var(--text-tiny); } /* ── VIEWS ── */ .view{display:none;position:absolute;inset:0} .view.active{display:flex;flex-direction:column} /* ⚠️ INTERRUPTEUR vueJusquAuBas — Loryan, au téléphone : « il y a une zone noire en bas et l'encart des Voies ne descend pas jusque là ». Une vue est en `position: absolute` sur le bloc initial de la page, dont la hauteur est celle de l'écran BARRES DU NAVIGATEUR AFFICHÉES. Quand la barre du bas se replie (Samsung Internet, Chrome), l'écran grandit, les éléments fixes (la fusée, les tiroirs) suivent le vrai bas… et la vue s'arrête où elle était : une bande de fond noir, la hauteur de la barre repliée. `100dvh` est la hauteur de l'écran À CET INSTANT : l'écart avec le bloc initial (100 %) est nul au bureau et barres affichées, et vaut la barre repliée sinon — la vue descend d'autant. Un navigateur qui ignore `dvh` rejette la déclaration : il garde le `inset: 0` d'origine. ⚠️ Invisible au banc : aucun navigateur de test ne replie de barre. */ body.f-vueJusquAuBas .view { bottom: calc(100% - 100dvh); } /* ── TOPBAR ── */ #topbar{ display:flex;align-items:center;gap:1rem;padding:.5rem 1.2rem; background:rgba(5,8,16,.97);border-bottom:1px solid var(--border2); position:relative;z-index:50;flex-shrink:0; overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap; scrollbar-width:none; } #topbar::-webkit-scrollbar{display:none;} .logo{font-family:var(--hud);font-size:1rem;font-weight:900;letter-spacing:.15em; background:linear-gradient(90deg,var(--accent1),var(--accent2)); -webkit-background-clip:text;-webkit-text-fill-color:transparent} /* v2.15 : nouveau logo — lockup horizontal 1 ligne (symbole + lettrage) */ .brand-block{display:flex;align-items:center} .logo-img{height:34px;width:auto;display:block;flex-shrink:0} .logo-sub{font-family:var(--hud);font-size:.55rem;color:var(--turquoise);letter-spacing:.3em;margin-top:-2px;white-space:nowrap} .topbar-sep{flex:1} .hud-pill{font-family:var(--mono);font-size:.72rem;color:var(--text2); padding:.25rem .7rem;border:1px solid var(--border);border-radius:3px; background:rgba(14,165,233,.04)} /* Pastille de version (à côté de l'heure). `white-space:nowrap` parce que la topbar défile horizontalement quand elle est serrée : sans ça « v0.0.1 » se casserait en deux lignes et ferait grandir la barre. */ #version-badge{display:block;white-space:nowrap;cursor:pointer; font-family:var(--mono);transition:color .15s,border-color .15s} /* La pastille est un vrai