/* * PRESTKA V15 — Design tokens v2 (socle « luxe raffiné AWWWARDS »). * Esthétique transposée du portfolio DG (03_RICKYPM/12PORTFOLIORICKYPMV2/src/styles/global.css) : * Instrument Serif + Geist · glass 4 niveaux subtil · hairlines · easing silk · dual thème. * Données/statuts/spacing depuis 07PRESTKAV15/00_DESIGN_SYSTEM/DESIGN_TOKENS.md (source PRESTKA). * Charger AVANT _glass.css. Thème via [data-theme] sur (défaut = obsidian sombre). */ /* ===== Typographies auto-hébergées (P0-5 audit 2026-07-06) ===== * Le CDN Google Fonts était bloqué par la CSP (style-src 'self') : la typo * n'a jamais chargé pour aucun utilisateur. Fichiers servis par Propshaft * depuis app/assets/fonts/ (souveraineté marque + RGPD, licences OFL). */ /* ⚠ Fichiers .woff2 livrés INVERSÉS : "instrument-serif-latin(-ext).woff2" contient en fait * les glyphes ITALIQUES et "instrument-serif-italic-latin(-ext).woff2" les glyphes ROMAINS * (vérifié au rendu 2026-07-11). Les titres du DS demandent tous font-style: italic → ils * tombaient sur le fichier romain et s'affichaient droits. On ré-associe ici chaque font-style * à la source qui contient réellement les bons glyphes (sans renommer les binaires). */ @font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/instrument-serif-italic-latin-6c5b1c87.woff2") format("woff2"); /* nom trompeur : glyphes ROMAINS */ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/instrument-serif-italic-latin-ext-2d393e0b.woff2") format("woff2"); /* nom trompeur : glyphes ROMAINS */ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/instrument-serif-latin-126f9d71.woff2") format("woff2"); /* nom trompeur : glyphes ITALIQUES */ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/instrument-serif-latin-ext-fa589071.woff2") format("woff2"); /* nom trompeur : glyphes ITALIQUES */ unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/geist-latin-90ac0fe7.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/geist-latin-ext-4f909eff.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/geist-mono-latin-a600ad3f.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/geist-mono-latin-ext-1a2f930e.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ===== Marque (immuable) ===== */ --prestka-primary: #393A8F; /* indigo PRESTKA — couleur de marque dominante */ --prestka-dark: #2A2B6F; --prestka-light: #5054B8; --setka-primary: #004D95; /* bleu SETKA */ --webtka-primary: #118893; /* teal WEBTKA */ --gold: #D4AF37; /* accent RARE : facture, dress code cuisine, focus */ --gold-tasks-facture: #DAA520; /* ===== Fonds / surfaces de base ===== */ /* Échelle d'élévation en Obsidian, du plus bas au plus haut : menu < page < carte opaque */ --obsidian: #08080d; /* fond sombre profond (portfolio) — en Obsidian : le MENU, pas la page */ --graphite: #1a1a1e; /* gris très sombre — fond de PAGE en Obsidian (pas le menu) */ --slate: #24242b; /* carte opaque — reste au-dessus de --graphite */ --deep-indigo: #151227; /* fond indigo profond (hero) */ --cloud-dancer: #f5f3ef; /* fond clair ivoire (menus/surfaces glass en Cloud Dancer) */ --cloud-blue: #eef3fb; /* LOT 1 : bleu très clair — fond de PAGE en Cloud Dancer (pas le menu) */ --paper: #fafafa; --paper-dim: #e4e4e7; --paper-soft: #a1a1aa; --ink: #0a0a0a; /* ===== Neutres (12 niveaux — DESIGN_TOKENS) ===== */ --neutral-0: #FFFFFF; --neutral-50: #F9FAFB; --neutral-100: #F3F4F6; --neutral-200: #E5E7EB; --neutral-300: #D1D5DB; --neutral-400: #9CA3AF; --neutral-500: #6B7280; --neutral-600: #4B5563; --neutral-700: #374151; --neutral-800: #1F2937; --neutral-900: #111827; --neutral-1000: #0A0A0F; /* ===== Couleurs de STATUT (corrigées — option sets Bubble V.3.0) ===== */ /* Etapes Event */ --status-event-a-valider: #D9354A; /* rouge */ --status-event-valide: #067574; /* turquoise */ --status-event-non-cloture: #5A2F97; /* violet */ --status-event-cloture: #556270; /* gris */ /* LOT 5.x — sélection d'un POSTE dans le FORM BOOKING (violet, plus lisible que l'or en thème clair). Réutilise la teinte violet ; scopé .booking-postes (le profil garde l'or). */ --chip-select: var(--status-event-non-cloture); /* Etapes Booking */ --status-booking-attente-envoi: #CD9B9B; --status-booking-attente-confirmation: #CD950C; --status-booking-accepte: #228B22; --status-booking-refuse: #B22222; /* Status Task */ --status-task-a-realiser: var(--neutral-400); --status-task-en-cours: var(--prestka-primary); --status-task-finalise: var(--status-booking-accepte); /* Priorité Task */ --priority-minimum: #4A90E2; --priority-moyen: var(--neutral-500); --priority-important: #E85D04; --priority-urgent: #B22222; /* Catégories profil */ --cat-laboratoire: var(--prestka-light); --cat-cuisine: var(--gold); --cat-livraison: var(--webtka-primary); --cat-reprise: var(--neutral-500); /* ===== Sémantique — THÈME OBSIDIAN (défaut sombre) ===== */ --bg: var(--graphite); --nav-bg: var(--obsidian); /* le menu ne suit PAS --bg : c'est ce qui le sépare du contenu */ --bg-hero: var(--deep-indigo); --fg: var(--paper); --text-primary: var(--paper); --text-secondary: var(--paper-dim); --text-tertiary: var(--paper-soft); --text-mute: #737373; --accent: var(--gold); --brand-primary: var(--prestka-primary); /* Icône du menu actif : sur le noir du menu, --brand-primary tombe à 1,85:1 et --prestka-light seul à 2,81:1 — sous le seuil WCAG de 3:1 des objets graphiques. */ --nav-icon-active: color-mix(in srgb, var(--prestka-light) 78%, var(--paper)); --line: rgba(250, 250, 250, 0.08); /* hairline */ --line-strong: rgba(250, 250, 250, 0.18); --surface-tint: var(--graphite); /* teinte des surfaces translucides — suit le fond de page */ --surface: color-mix(in srgb, var(--surface-tint) 82%, transparent); --surface-solid: var(--slate); /* Canvas des plans de salle : relevé au-dessus de --surface-solid (#24242b trop sombre pour lire un plan architectural en obsidian). En light = blanc plus bas. */ --salle-canvas: color-mix(in srgb, var(--paper) 14%, var(--slate)); /* ===== Glass 4 niveaux (variables — utilitaires dans _glass.css) ===== */ --glass-subtle-bg: color-mix(in srgb, var(--surface-tint) 45%, transparent); --glass-subtle-blur: 12px; --glass-subtle-sat: 1.4; --glass-subtle-border: rgba(250,250,250,0.06); --glass-medium-bg: color-mix(in srgb, var(--surface-tint) 62%, transparent); --glass-medium-blur: 20px; --glass-medium-sat: 1.8; --glass-medium-border: rgba(250,250,250,0.10); --glass-strong-bg: color-mix(in srgb, var(--surface-tint) 80%, transparent); --glass-strong-blur: 28px; --glass-strong-sat: 2.0; --glass-strong-border: rgba(250,250,250,0.14); --glass-hero-bg: rgba(21, 18, 39, 0.35); --glass-hero-blur: 30px; --glass-hero-sat: 1.8; --glass-hero-border: rgba(212,175,55,0.15); --glass-highlight: rgba(255, 255, 255, 0.06); /* liseré spéculaire haut */ /* ===== Typographie ===== */ --font-display: "Instrument Serif", Georgia, "Times New Roman", serif; /* titres — serif luxe */ --font-sans: "Geist", system-ui, -apple-system, sans-serif; /* corps */ --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace; /* labels / méta */ /* Échelle corps (modulaire 1.250) */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.563rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem; --text-4xl: 3.052rem; /* Titres serif fluides */ --display-sm: clamp(2rem, 4vw, 3rem); --display-md: clamp(2.6rem, 6vw, 4.5rem); --display-lg: clamp(3.4rem, 9vw, 7rem); --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.55; --leading-relaxed: 1.75; --tracking-tight: -0.035em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.22em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ===== Spacing (4-base — DESIGN_TOKENS) ===== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ===== Radius ===== */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-2xl: 32px; --radius-full: 9999px; /* ===== Shadows ===== */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.20); --shadow-md: 0 4px 14px -4px rgba(0,0,0,0.35); --shadow-lg: 0 18px 40px -16px rgba(0,0,0,0.55); --shadow-xl: 0 32px 64px -24px rgba(0,0,0,0.65); --shadow-glow: 0 0 40px rgba(212,175,55,0.10); /* ===== Profondeur & glow (v3 — depth AWWWARDS) ===== */ --shadow-ambient: 0 2px 10px -4px rgba(0,0,0,0.30); /* contact doux */ --shadow-key: 0 26px 56px -22px rgba(0,0,0,0.62); /* ombre portée principale */ --glass-sheen-top: rgba(255,255,255,0.07); /* lumière haute interne du verre */ --glass-inner: inset 0 -22px 38px -28px rgba(0,0,0,0.55); /* épaisseur basse du verre */ --glass-edge: inset 0 0 0 1px rgba(255,255,255,0.025); /* arête interne */ --glow-brand: 0 0 36px -6px color-mix(in srgb, var(--brand-primary) 45%, transparent); --glow-gold: 0 0 30px -4px rgba(212,175,55,0.30); /* ===== Motion (easings signature portfolio) ===== */ --ease-silk: cubic-bezier(0.22, 1, 0.36, 1); /* défaut */ --ease-friction: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 150ms; --dur-normal: 250ms; --dur-slow: 450ms; --dur-reveal: 1100ms; /* ===== Focus ===== */ --focus-ring: 2px solid var(--brand-primary); --focus-offset: 4px; /* ===== Échelle z-index (ordre d'empilement unique de l'app) ===== contenu (auto/1) < sticky internes (30) < topbar/nav (50) < popovers/kebabs (700) < drawers (900) < modales (1000) < toasts (1100) */ --z-sticky: 30; --z-topbar: 50; --z-popover: 700; --z-drawer: 900; --z-modal: 1000; --z-toast: 1100; /* Hauteur de .shell-topbar. La valeur 64px était dupliquée en dur à plusieurs endroits (components.css:820 et :1646) sans token dédié — dette signalée par l'audit du 2026-07-20 (§12.3, piège 2). Centralisée ici. */ --topbar-h: 64px; /* ===== Toasts (LOT 0.2) — teintes d'accent des 3 variantes ===== Dérivées des tokens de statut existants, jamais de couleur en dur. Override obligatoire en thème clair plus bas (contraste sur verre ivoire). */ --toast-success: var(--status-booking-accepte); --toast-error: var(--priority-urgent); --toast-info: var(--prestka-light); /* ===== Alias rétro-compat (cartes non encore migrées) ===== */ --bg-deep: var(--obsidian); --bg-elevated: color-mix(in srgb, var(--paper) 5%, transparent); --bg-elevated-strong: color-mix(in srgb, var(--paper) 8%, transparent); --gold-accent: var(--gold); --gold-soft: rgba(212,175,55,0.15); --gold-stroke: rgba(212,175,55,0.25); --gold-stroke-soft: rgba(212,175,55,0.10); --glass-bg-obsidian: var(--glass-medium-bg); --glass-bg-cloud: var(--glass-medium-bg); --glass-blur: blur(var(--glass-medium-blur)) saturate(var(--glass-medium-sat)); --glass-border: 1px solid var(--glass-medium-border); --glass-shadow: var(--shadow-lg); --motion-fast: var(--dur-fast); --motion-base: var(--dur-normal); --motion-slow: var(--dur-slow); --motion-spring: var(--ease-spring); --motion-ease-out: var(--ease-silk); /* anciennes couleurs status (mappées vers les bonnes) */ --status-priority-urgent: var(--priority-urgent); --cat-cuisine-service: var(--gold); } /* ===== THÈME CLOUD DANCER (clair) ===== */ [data-theme="light"] { /* LOT 1 : fond de page bleu très clair. Le menu (.nav) est découplé plus bas (components.css) pour rester ivoire ; dock/popups restent ivoire via glass-strong. */ --bg: var(--cloud-blue); --bg-hero: var(--cloud-blue); --fg: var(--ink); --text-primary: var(--ink); --text-secondary: #27272a; --text-tertiary: #52525b; --text-mute: #71717a; --nav-icon-active: var(--brand-primary); /* menu ivoire : l'indigo de marque contraste déjà */ --line: rgba(10, 10, 10, 0.10); --line-strong: rgba(10, 10, 10, 0.22); --surface-tint: var(--cloud-dancer); --surface: color-mix(in srgb, var(--cloud-dancer) 70%, transparent); --surface-solid: #ffffff; --salle-canvas: #ffffff; --glass-subtle-bg: rgba(245,243,239,0.55); --glass-medium-bg: rgba(245,243,239,0.72); --glass-strong-bg: rgba(245,243,239,0.85); --glass-hero-bg: rgba(245,243,239,0.35); --glass-hero-border: rgba(212,175,55,0.20); --glass-highlight: rgba(255,255,255,0.5); --glass-sheen-top: rgba(255,255,255,0.6); --glass-inner: inset 0 -22px 40px -30px rgba(20,18,39,0.16); --glass-edge: inset 0 0 0 1px rgba(255,255,255,0.55); --shadow-ambient: 0 2px 10px -4px rgba(20,18,39,0.10); --shadow-key: 0 26px 56px -24px rgba(20,18,39,0.16); --bg-elevated: color-mix(in srgb, var(--ink) 4%, transparent); --bg-elevated-strong: color-mix(in srgb, var(--ink) 7%, transparent); /* Toasts (LOT 0.2) — assombries pour rester lisibles sur le verre ivoire. */ --toast-success: color-mix(in srgb, var(--status-booking-accepte) 80%, var(--ink)); --toast-error: color-mix(in srgb, var(--priority-urgent) 88%, var(--ink)); --toast-info: var(--brand-primary); } /* ===== Base ===== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; background: radial-gradient(58vw 48vh at 12% -8%, color-mix(in srgb, var(--brand-primary) 14%, transparent), transparent 58%), radial-gradient(46vw 40vh at 102% 106%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 55%), var(--bg); background-attachment: fixed; color: var(--fg); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: background var(--dur-normal) var(--ease-friction), color var(--dur-normal) var(--ease-friction); } body { margin: 0; min-height: 100vh; font-size: var(--text-base); line-height: var(--leading-normal); font-feature-settings: "kern", "liga", "calt"; } ::selection { background: var(--prestka-primary); color: var(--paper); } :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; } /* ===== Scrollbar slim (global) ===== */ * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-tertiary) 35%, transparent) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-tertiary) 30%, transparent); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--brand-primary) 55%, transparent); background-clip: padding-box; } /* Utilitaires police */ .font-display { font-family: var(--font-display); } .font-sans { font-family: var(--font-sans); } .font-mono { font-family: var(--font-mono); } /* Label monospace éditorial (méta, numérotation §) */ .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-tertiary); } /* Icône Heroicon */ .icon { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; vertical-align: -0.2em; } .icon--sm { width: 1em; height: 1em; } .icon--lg { width: 1.5em; height: 1.5em; } /* ===== Cadre sketch (compat + base showcase) ===== */ .sketch-frame { max-width: 1200px; margin: 0 auto; padding: var(--space-7) var(--space-5); } .sketch-frame__title { font-family: var(--font-display); font-style: italic; font-weight: var(--weight-regular); font-size: var(--display-sm); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-3); color: var(--text-primary); } .sketch-frame__subtitle { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-tertiary); margin: 0 0 var(--space-6); letter-spacing: var(--tracking-caps); text-transform: uppercase; } .variant__label { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-tertiary); letter-spacing: var(--tracking-caps); text-transform: uppercase; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }