/* ============================================================================
POLARISTAR — UI KIT (Design System partagé)
v1.0.0 · 2026-08-28
----------------------------------------------------------------------------
Feuille de style commune à tous les outils Polaristar (index, constella,
astrae, akasha, corpus, sapientia, athanor, compte, community, legal…).
PRINCIPES
- Tout est préfixé `--ps-` (tokens) et `.ps-` (classes) : zéro collision
avec le CSS inline existant de chaque page. On peut l'adopter
progressivement, page par page, sans rien casser.
- Mobile-first. Les composants sont pensés « application native » :
bottom-nav, bottom-sheet, feedback tactile, safe-areas iPhone.
- Cosmique mais LISIBLE : la priorité est lisibilité > ergonomie >
fluidité > esthétique. Les effets restent subtils.
- Perf : animations sur transform / opacity uniquement. Ombres et blur
mesurés. `prefers-reduced-motion` respecté globalement.
CHARGEMENT
(le `?v=` sert de cache-buster — .htaccess cache le CSS 1 mois)
========================================================================== */
/* ---------------------------------------------------------------------------
1. TOKENS
------------------------------------------------------------------------- */
:root {
/* ---- Palette cosmique ---- */
--ps-bg: #040210; /* fond spatial profond */
--ps-bg-alt: #060411;
--ps-surface: #0c0722; /* carte / panneau niveau 1 */
--ps-surface-2: #140b30; /* carte niveau 2 / hover */
--ps-surface-3: #1c1140;
--ps-overlay: rgba(4, 2, 16, 0.82); /* backdrop de sheet/modale */
--ps-text: #f2ead8;
--ps-text-dim: #c8b898;
--ps-text-faint: rgba(200, 185, 230, 0.62);
--ps-border: rgba(212, 168, 32, 0.14);
--ps-border-strong: rgba(212, 168, 32, 0.4);
--ps-border-cool: rgba(140, 160, 255, 0.16);
/* Or Polaristar (accent principal) */
--ps-gold: #d4a820;
--ps-gold-light: #ffe87a;
--ps-gold-dim: #8a6010;
--ps-purple: #5a20c8;
--ps-purple-dark: #1a0640;
/* Accents par outil (repris de la landing) */
--ps-c-constella: #88ccff; /* bleu */
--ps-c-astrae: #c080ff; /* violet */
--ps-c-akasha: #e8c870; /* or */
--ps-c-corpus: #7de0b0; /* vert */
--ps-c-sapientia: #6fe3ff; /* cyan */
/* États sémantiques */
--ps-success: #4ad9a0;
--ps-danger: #ff6b6b;
--ps-warning: #ffc857;
--ps-info: var(--ps-c-constella);
/* ---- Rayons ---- */
--ps-radius-sm: 8px;
--ps-radius-md: 14px;
--ps-radius-lg: 22px;
--ps-radius-pill: 999px;
/* ---- Espacements (échelle 4) ---- */
--ps-space-2xs: 4px;
--ps-space-xs: 8px;
--ps-space-sm: 12px;
--ps-space-md: 16px;
--ps-space-lg: 24px;
--ps-space-xl: 32px;
--ps-space-2xl: 48px;
--ps-space-3xl: 72px;
/* ---- Cible tactile ---- */
--ps-touch: 44px;
--ps-touch-lg: 52px;
/* ---- Typo (fluide) ---- */
--ps-font-serif: 'Crimson Text', Georgia, 'Times New Roman', serif;
--ps-font-display: 'Cinzel', 'Crimson Text', Georgia, serif;
--ps-fs-caption: clamp(11px, 2.6vw, 12px);
--ps-fs-small: clamp(13px, 3vw, 14px);
--ps-fs-body: clamp(15px, 3.6vw, 17px);
--ps-fs-lead: clamp(16px, 4vw, 19px);
--ps-fs-h3: clamp(17px, 4.4vw, 21px);
--ps-fs-h2: clamp(21px, 5.4vw, 30px);
--ps-fs-h1: clamp(26px, 7vw, 44px);
/* ---- Élévation ---- */
--ps-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4);
--ps-shadow-2: 0 6px 20px rgba(0, 0, 0, 0.45);
--ps-shadow-3: 0 16px 44px rgba(0, 0, 0, 0.55);
--ps-glow-gold: 0 0 24px rgba(212, 168, 32, 0.28);
/* ---- Timing ---- */
--ps-dur-fast: 150ms;
--ps-dur: 220ms;
--ps-dur-slow: 320ms;
--ps-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--ps-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
/* ---- Z-index ---- */
--ps-z-sticky: 100;
--ps-z-bottomnav: 900;
--ps-z-overlay: 1000;
--ps-z-sheet: 1001;
--ps-z-toast: 1100;
/* ---- Safe areas (fallback 0 si non supporté) ---- */
--ps-safe-top: env(safe-area-inset-top, 0px);
--ps-safe-bottom: env(safe-area-inset-bottom, 0px);
--ps-safe-left: env(safe-area-inset-left, 0px);
--ps-safe-right: env(safe-area-inset-right, 0px);
/* Hauteur de la bottom-nav (0 tant qu'elle n'est pas montée — voir .js) */
--ps-bottomnav-h: 0px;
}
/* ---------------------------------------------------------------------------
2. BASE / RESET DOUX (n'écrase rien d'agressif)
------------------------------------------------------------------------- */
/* iOS : empêche l'auto-zoom du texte en paysage, garde le pinch-zoom */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
/* Évite le rubber-band qui « déchire » le fixed sur iOS */
overscroll-behavior-y: none;
}
/* Scroll fluide interne partout où on l'active explicitement */
.ps-scroll {
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* Quand une sheet/menu est ouverte : fige le body sans « saut » de scroll.
(le .js pose/retire .ps-locked et gère le décalage) */
body.ps-locked {
overflow: hidden;
touch-action: none;
}
/* Cible tactile : jamais de highlight bleu iOS, feedback géré par nous */
.ps-tap,
.ps-btn,
.ps-bottom-nav a,
.ps-sheet__close {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
/* Focus visible cohérent (accessibilité clavier desktop) */
.ps-btn:focus-visible,
.ps-field:focus-visible,
.ps-bottom-nav a:focus-visible,
.ps-sheet__close:focus-visible {
outline: 2px solid var(--ps-gold-light);
outline-offset: 2px;
}
/* ---------------------------------------------------------------------------
3. HELPERS SAFE-AREA / LAYOUT
------------------------------------------------------------------------- */
.ps-safe-x { padding-left: max(var(--ps-space-md), var(--ps-safe-left));
padding-right: max(var(--ps-space-md), var(--ps-safe-right)); }
.ps-safe-top { padding-top: var(--ps-safe-top); }
.ps-safe-bottom { padding-bottom: var(--ps-safe-bottom); }
/* À poser sur le conteneur principal des pages qui ont une bottom-nav :
réserve l'espace pour ne jamais masquer le dernier contenu */
.ps-has-bottomnav {
padding-bottom: calc(var(--ps-bottomnav-h) + var(--ps-safe-bottom) + var(--ps-space-md));
}
.ps-container {
width: 100%;
max-width: 640px;
margin-inline: auto;
padding-inline: clamp(var(--ps-space-md), 5vw, var(--ps-space-2xl));
}
/* Anti-débordement horizontal : filet de sécurité, à appliquer au besoin */
.ps-no-scroll-x { overflow-x: clip; }
/* ---------------------------------------------------------------------------
4. TYPOGRAPHIE
------------------------------------------------------------------------- */
.ps-h1 { font-family: var(--ps-font-display); font-size: var(--ps-fs-h1);
line-height: 1.15; letter-spacing: 0.02em; color: #fff; }
.ps-h2 { font-family: var(--ps-font-display); font-size: var(--ps-fs-h2);
line-height: 1.2; letter-spacing: 0.03em; color: #fff; }
.ps-h3 { font-family: var(--ps-font-display); font-size: var(--ps-fs-h3);
line-height: 1.3; letter-spacing: 0.04em; color: var(--ps-gold-light); }
.ps-body { font-family: var(--ps-font-serif); font-size: var(--ps-fs-body); line-height: 1.7; color: var(--ps-text); }
.ps-lead { font-size: var(--ps-fs-lead); line-height: 1.6; color: var(--ps-text-dim); }
.ps-caption{ font-family: var(--ps-font-display); font-size: var(--ps-fs-caption);
letter-spacing: 0.32em; text-transform: uppercase; color: var(--ps-gold); }
.ps-muted { color: var(--ps-text-faint); }
/* ---------------------------------------------------------------------------
5. BOUTONS
------------------------------------------------------------------------- */
.ps-btn {
--_bg: var(--ps-surface-2);
--_fg: var(--ps-text);
--_bd: var(--ps-border-strong);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ps-space-xs);
min-height: var(--ps-touch);
padding: 12px 22px;
font-family: var(--ps-font-display);
font-size: clamp(12px, 3vw, 13px);
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
color: var(--_fg);
background: var(--_bg);
border: 1px solid var(--_bd);
border-radius: var(--ps-radius-md);
cursor: pointer;
transition: transform var(--ps-dur-fast) var(--ps-ease),
box-shadow var(--ps-dur) var(--ps-ease),
background var(--ps-dur) var(--ps-ease);
will-change: transform;
}
.ps-btn:active { transform: scale(0.97); }
.ps-btn--primary {
--_bg: linear-gradient(135deg, #3a1880, #7a3a00);
--_fg: var(--ps-gold-light);
--_bd: var(--ps-gold);
box-shadow: var(--ps-glow-gold);
}
.ps-btn--primary:hover { box-shadow: 0 0 40px rgba(212, 168, 32, 0.42); }
.ps-btn--ghost { --_bg: transparent; --_fg: var(--ps-text-dim); --_bd: rgba(255,255,255,0.14); }
.ps-btn--ghost:hover { --_fg: var(--ps-text); --_bd: rgba(255,255,255,0.32); }
.ps-btn--block { display: flex; width: 100%; }
.ps-btn--lg { min-height: var(--ps-touch-lg); font-size: clamp(13px, 3.4vw, 14px); padding: 15px 26px; }
.ps-btn[disabled] { opacity: 0.5; pointer-events: none; }
/* Accent par outil : */
.ps-btn--tool[data-tool="constella"] { --_fg: var(--ps-c-constella); --_bd: var(--ps-c-constella); }
.ps-btn--tool[data-tool="astrae"] { --_fg: var(--ps-c-astrae); --_bd: var(--ps-c-astrae); }
.ps-btn--tool[data-tool="akasha"] { --_fg: var(--ps-c-akasha); --_bd: var(--ps-c-akasha); }
.ps-btn--tool[data-tool="corpus"] { --_fg: var(--ps-c-corpus); --_bd: var(--ps-c-corpus); }
.ps-btn--tool[data-tool="sapientia"] { --_fg: var(--ps-c-sapientia); --_bd: var(--ps-c-sapientia); }
.ps-btn--tool { --_bg: rgba(255,255,255,0.03); }
/* ---------------------------------------------------------------------------
6. CARTES
------------------------------------------------------------------------- */
.ps-card {
background: linear-gradient(180deg, var(--ps-surface) 0%, var(--ps-bg-alt) 100%);
border: 1px solid var(--ps-border);
border-radius: var(--ps-radius-lg);
padding: var(--ps-space-lg);
box-shadow: var(--ps-shadow-2);
}
.ps-card--flush { padding: 0; overflow: hidden; }
.ps-card__title { font-family: var(--ps-font-display); font-size: var(--ps-fs-h3);
letter-spacing: 0.06em; color: #fff; margin-bottom: var(--ps-space-xs); }
.ps-card__body { font-size: var(--ps-fs-body); line-height: 1.7; color: var(--ps-text-dim); }
/* Accordéon natif accessible : …
…- …
…
*/
.ps-steps { display: flex; gap: var(--ps-space-xs); list-style: none; padding: 0; margin: 0 0 var(--ps-space-lg); }
.ps-steps li {
flex: 1;
height: 4px;
border-radius: var(--ps-radius-pill);
background: rgba(255, 255, 255, 0.1);
transition: background var(--ps-dur) var(--ps-ease);
}
.ps-steps li.is-current { background: var(--ps-gold); }
.ps-steps li.is-done { background: var(--ps-gold-dim); }
/* ---------------------------------------------------------------------------
8. BOTTOM NAVIGATION (barre d'onglets style app)
------------------------------------------------------------------------- */
.ps-bottom-nav {
/* Reset défensif : beaucoup de pages stylent l'élément