/* ============================================================================ * shared/theme.css — Variables CSS du thème "psyfr" (couleurs + fonts) * ---------------------------------------------------------------------------- * Importé par toutes les pages. Modifier ici = changer le thème partout. * Extrait du bundle Claude Design (theme=psyfr, accent #5B65DE). * ============================================================================ */ /* Fonts (Kumbh Sans + Newsreader) chargées via dans le de chaque page HTML (perf : @import bloque le rendu car serialisé après le parse de cette feuille). Voir le bloc "Font preload" dans espace-patient.html / mes-rendez-vous.html / etc. */ /* ============================================================================ * VIEW TRANSITIONS API — crossfade + slide entre pages. * Supporté Chrome 126+, Edge 126+, Safari 18+. * Pour tester si ça marche : durée volontairement longue (400ms) + * mouvement vertical visible. Si tu vois rien c'est que ton browser ne * supporte pas l'API ou que le cache CSS sert l'ancienne version. * ============================================================================ */ @view-transition { navigation: auto; } /* Custom keyframes pour le fade-out (page sortante) + slide-in (page entrante) */ @keyframes vtFadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes vtSlideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } ::view-transition-old(root) { animation: vtFadeOut 250ms cubic-bezier(.4, 0, 1, 1) both; } ::view-transition-new(root) { animation: vtSlideIn 380ms cubic-bezier(.2, .9, .3, 1) both; } /* La sidebar reste stable pendant la transition (view-transition-name dédié). IMPORTANT : il faut que les 2 pages aient le MÊME aside.side pour que ça marche. Tant que le HTML est cohérent entre pages, c'est OK. */ aside.side { view-transition-name: app-sidebar; } ::view-transition-old(app-sidebar), ::view-transition-new(app-sidebar) { animation: none; } /* Fallback pour Firefox (pas de View Transitions stable encore) */ @keyframes mainPageFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } main.main { animation: mainPageFadeIn 220ms cubic-bezier(.2, .9, .3, 1); } @supports (view-transition-name: none) { main.main { animation: none; } } @media (prefers-reduced-motion: reduce) { main.main { animation: none; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0s; } } :root { /* Surfaces */ --bg: #F9F9FD; --bg-soft: #ECEDFB; --surface: #FFFFFF; --surface-2: #F2F3F5; /* Encre */ --ink: #132055; --ink-2: #2a366e; --muted: #6b719a; --muted-2: #9da3c2; /* Bordures */ --line: #ECEDFB; --line-strong: #CED1F5; /* Accent (psyfr indigo) */ --accent: #5B65DE; --accent-hover: #4850c7; --accent-ink: #132055; --accent-soft: #CED1F5; --accent-softer: #ECEDFB; /* Couleurs sémantiques */ --success: #22b566; --success-soft: #E1F5EA; --warning: #D97757; --warning-soft: #FBEAE0; --danger: #C94A4A; --danger-soft: #FCE4E4; /* Ombres */ --shadow-card: 0 1px 0 rgba(19,32,85,.03), 0 8px 24px -18px rgba(19,32,85,.18); --shadow-elev: 0 20px 40px -20px rgba(19,32,85,.30); /* Typo */ --font-sans: 'Kumbh Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); } body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 14.5px; line-height: 1.55; letter-spacing: -0.003em; } button { font-family: inherit; color: inherit; cursor: pointer; border: 0; background: transparent; } a { color: inherit; text-decoration: none; } input, textarea, select { font-family: inherit; color: inherit; } ::selection { background: var(--accent-soft); color: var(--accent-ink); }