/* ============================================================================ ASTROPOST — Jetons de design ---------------------------------------------------------------------------- Toutes les valeurs du système, et rien d'autre. Aucune règle de mise en forme ici : ce fichier ne fait que nommer. Les couleurs viennent du catalogue de couleurs du jeu iOS (Astropost/Resources/Assets.xcassets), converties en hexadécimal. Les noms reprennent ceux du catalogue, en kebab-case, pour qu'une valeur puisse toujours être retrouvée à sa source. RÈGLE : aucune couleur, aucun espacement, aucune durée ne doit être écrit en dur ailleurs. Si une valeur manque, elle s'ajoute ici. ========================================================================= */ :root { /* ── Couleurs ────────────────────────────────────────────────────────── DESIGN.md : apparence sombre UNIQUEMENT. L'apparence claire donnait au jeu l'allure d'une application de gestion et coupait chaque écran du ciel que le joueur observe. Elle a été retirée du jeu, et ne doit pas revenir par le web. */ --brand-primary: #73B8FF; /* accent principal : boutons, liens, sélection */ --brand-secondary: #B399F2; /* accent secondaire : nébuleuses, mentions */ --status-success: #59D18C; --status-warning: #FAC24A; /* avertissement, et couleur des étoiles */ --status-error: #FA736B; /* erreur, et pastilles rouges */ --app-background: #0B0E19; /* fond de l'application */ --app-surface: #171C2C; /* fond d'une carte */ --sky-deep: #070916; /* haut du dégradé de fond */ --text-primary: #EDF2FA; --text-secondary: #9EA8BA; --sky-glow: #598CF2; /* lueur du ciel, amas stellaires */ --star-tint: #FFFFFF; /* étoiles du décor */ --exoplanet: #5EDACA; /* la charnière entre les deux moitiés du jeu */ --rarity-common: #A6B0C2; --rarity-uncommon: #5CCCA8; --rarity-rare: #7AB3FF; --rarity-very-rare: #CC94FA; /* Couleur par type d'objet céleste. Elle permet à la carte du ciel de rester lisible SANS légende permanente. */ --type-star: var(--status-warning); --type-variable-star: var(--status-warning); --type-planet: var(--status-success); --type-nebula: var(--brand-secondary); --type-galaxy: var(--brand-primary); --type-cluster: var(--sky-glow); --type-comet: var(--text-secondary); --type-asteroid: var(--text-secondary); --type-exoplanet: var(--exoplanet); --type-sun: var(--status-warning); /* Teintes dérivées. Le jeu n'a pas de « bordure » ni de « survol » comme jetons : iOS les tire du contraste. Sur le web il faut les nommer, sinon chacun inventera sa propre opacité. */ --hairline: rgba(237, 242, 250, .08); /* filet de séparation */ --hairline-strong: rgba(237, 242, 250, .16); --overlay: rgba(7, 9, 22, .72); /* voile sous un panneau */ --selected-fill: rgba(158, 168, 186, .26); /* pilule sélectionnée */ --pressed-fill: rgba(237, 242, 250, .06); /* Teintes translucides des accents, pour les fonds de pastille. Écrites en dur parce que color-mix() n'est pas encore partout. */ --brand-primary-soft: rgba(115, 184, 255, .15); --brand-secondary-soft: rgba(179, 153, 242, .16); --status-success-soft: rgba( 89, 209, 140, .15); --status-warning-soft: rgba(250, 194, 74, .15); --status-error-soft: rgba(250, 115, 107, .15); --exoplanet-soft: rgba( 94, 218, 202, .15); /* ── Espacements ─────────────────────────────────────────────────────── L'échelle du jeu, à l'unité près. Une valeur hors de cette échelle est probablement une erreur. */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; /* l'espacement par défaut, partout */ --space-lg: 24px; --space-xl: 32px; /* ── Formes ──────────────────────────────────────────────────────────── */ --card-radius: 14px; --card-padding: 16px; --field-radius: 8px; --pill-radius: 999px; --sheet-radius: 18px; /* ── Largeurs ────────────────────────────────────────────────────────── Les trois seuils du jeu. Ils raisonnent en LARGEUR DISPONIBLE, jamais en modèle d'appareil : un iPad en écran partagé doit se comporter comme un téléphone. */ --reading-width: 660px; /* au-delà, une ligne devient pénible à suivre */ --side-by-side: 1000px; /* en dessous, tout reste empilé */ --page-width: 1520px; /* au-delà, la page se centre et cesse de grandir */ --card-min-width: 360px; /* colonne minimale d'une grille de cartes */ --tile-min-width: 150px; /* colonne minimale d'une grille de chiffres */ --sidebar-width: 300px; /* idéale ; bornes 260 et 360 */ --sidebar-min: 260px; --sidebar-max: 360px; --gutter: 16px; /* marge latérale minimale, sur téléphone */ /* ── Typographie ─────────────────────────────────────────────────────── Correspondance avec les styles système d'iOS. Racine à 16 px. */ --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --text-large-title: 2.125rem; /* 34px — nom du jeu, titre d'écran */ --text-title: 1.25rem; /* 20px — nom d'un objet, d'un observatoire */ --text-headline: 1.0625rem; /* 17px — titre d'une carte */ --text-body: 1.0625rem; /* 17px — texte courant */ --text-subheadline: 0.9375rem; /* 15px — texte d'une carte */ --text-footnote: 0.8125rem; /* 13px — précision, date */ --text-caption: 0.75rem; /* 12px — libellé de champ, mention */ --text-caption-2: 0.6875rem; /* 11px — chiffre d'une pastille */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --line-tight: 1.2; --line-normal: 1.45; --line-relaxed: 1.65; /* pour les paragraphes qui se lisent d'une traite */ /* ── Mouvement ───────────────────────────────────────────────────────── DESIGN.md : mouvements lents, transitions douces. Une animation qui se remarque contredirait le ton contemplatif. */ --motion-soft: 350ms cubic-bezier(.4, 0, .2, 1); /* ease-in-out */ --motion-reveal: 600ms cubic-bezier(0, 0, .2, 1); /* ease-out */ /* ── Profondeur ──────────────────────────────────────────────────────── Le jeu n'utilise pas d'ombre : le contraste des surfaces suffit. Les deux seules élévations sont un panneau et une infobulle. */ --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, .45); --shadow-popover: 0 8px 28px rgba(0, 0, 0, .40); /* ── Étages ──────────────────────────────────────────────────────────── */ --z-stars: 0; --z-content: 1; --z-sidebar: 10; --z-tabbar: 20; --z-overlay: 30; --z-sheet: 40; --z-toast: 50; } /* Les auteurs de la vitrine (Web/vitrine/index.html) ont employé des noms français : --fond, --marque, --texte… Ces alias permettent de faire cohabiter les deux le temps d'une migration. À RETIRER une fois la vitrine alignée : deux noms pour une même couleur finissent toujours par diverger. */ :root { --fond: var(--app-background); --ciel-profond: var(--sky-deep); --surface: var(--app-surface); --marque: var(--brand-primary); --marque-2: var(--brand-secondary); --texte: var(--text-primary); --texte-2: var(--text-secondary); --succes: var(--status-success); --chaud: var(--status-warning); --exo: var(--exoplanet); }