/* * Libria — jetons de design. * * Seule source des valeurs visuelles de la liseuse : aucune couleur, taille, durée ni * rayon ne s'écrit en dur ailleurs. Le guide d'usage est dans liseuse/DESIGN.md. * * Contrastes vérifiés par calcul (WCAG 2.x, luminance relative ; recalculés en direct dans kit.html) : * texte #F5F5F7 : 18,1:1 sur le fond · 16,7 sur surface-1 · 13,4 sur surface-3 * texte-2 #A1A1AA : 7,7:1 sur le fond · 6,4 sur surface-2 · 5,7 sur surface-3 * texte-3 #8A8A94 : 5,8:1 sur le fond · 4,8 sur surface-2 · jamais sur surface-3 (4,3) * personnages (10 teintes) : ≥ 6,3:1 sur le fond, ≥ 5,3 sur surface-2, ≥ 4,6 sur surface-3, * ≥ 4,8 sur leur propre teinte à 16 % ; bulles : la teinte assombrie en OKLCH (clarté --bulle-l, * chroma × --bulle-c, fondBulle dans utiles.js) — texte #F5F5F7 de 7,4:1 (vert) à 8,6:1 (rose), * ≥ 5,5:1 garanti même sous le reflet blanc à 6 % ; dans une bulle, jamais de texte-2. * encre (#0A0A0F) sur le dégradé d'accent : 5,7:1 (magenta) à 8,4:1 (orange) ; blanc : interdit (2,4:1) * sémantiques sur leur teinte à 14 % posée sur surface-1 : succès 7,4 · danger 5,3 · attention 9,3 · * info 5,8 · violet 5,7 · passé 7,8 (≥ 4,7 sur surface-2) */ :root { color-scheme: dark; /* ------------------------------------------------------------- couleurs : couches */ --fond: #0A0A0F; --surface-0: #101016; /* barre latérale */ --surface-1: #15151C; --surface-2: #1E1E28; --surface-3: #282834; --surface-4: #33333F; --encre: #0A0A0F; /* texte posé sur une couleur vive ou le dégradé */ /* Verre : réservé aux panneaux superposés (panneau, palette, aperçu, barres flottantes). */ --verre: rgba(28, 28, 38, 0.72); --verre-dense: rgba(21, 21, 28, 0.88); --verre-flou: blur(28px) saturate(1.6); --voile: rgba(4, 4, 7, 0.55); /* écran derrière un panneau ou la palette */ /* Filets */ --trait: rgba(255, 255, 255, 0.07); --trait-2: rgba(255, 255, 255, 0.11); --trait-3: rgba(255, 255, 255, 0.18); --survol: rgba(255, 255, 255, 0.05); --appui: rgba(255, 255, 255, 0.09); /* ------------------------------------------------------------- couleurs : texte */ --texte: #F5F5F7; --texte-2: #A1A1AA; --texte-3: #8A8A94; /* ------------------------------------------------------------- accent */ --accent-1: #FF2E93; /* magenta */ --accent-2: #FF5A5F; --accent-3: #FF8A1F; /* orange */ --degrade: linear-gradient(120deg, #FF2E93 0%, #FF5A5F 52%, #FF8A1F 100%); --degrade-vertical: linear-gradient(180deg, #FF2E93 0%, #FF8A1F 100%); --degrade-anneau: conic-gradient(from 210deg, #FF8A1F, #FF2E93, #FF5A5F, #FF8A1F); --focus: #FF6FAE; /* ------------------------------------------------------------- sémantique */ --succes: #32D74B; --danger: #FF6961; --attention: #FFD60A; --info: #4AA8FF; --neutre: #A1A1AA; --violet: #B78CFF; --passe: #FFB547; /* le monde regardé au passé (curseur du temps) */ --passe-fond: rgba(255, 181, 71, 0.12); --teinte-puce: 14%; /* fond d'une puce : sa couleur à 14 % */ --bulle-l: 0.42; /* bulle : clarté OKLCH du fond (la teinte du personnage, assombrie) */ --bulle-c: 0.8; /* bulle : part de la chroma gardée (assombrir sans désaturer) */ --teinte-pensee: 12%; /* pensée sous verre : nettement plus éteinte que la parole */ --reflet-bulle: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 60%); /* ------------------------------------------------------------- personnages Dix teintes saturées, distinctes, AA sur le fond. La fiche d'un personnage porte sa couleur (champ `couleur`) ; ces dix teintes sont la palette proposée au Casting. */ --p-rose: #FF4D8D; --p-corail: #FF6B5B; --p-orange: #FF9533; --p-ambre: #FFC93D; --p-citron: #C6E84A; --p-vert: #3DDC84; --p-turquoise: #2ED3C6; --p-ciel: #4CB8FF; --p-pervenche: #8C8CFF; --p-orchidee: #D27BFF; --p-monde: #A1A1AA; /* acteur « monde » des événements externes */ /* ------------------------------------------------------------- typographie */ --police: -apple-system, BlinkMacSystemFont, "Inter Libria", system-ui, sans-serif; --t-1: 13px; /* légendes, méta */ --t-2: 15px; /* interface, corps compact */ --t-3: 17px; /* corps d'interface, bulles */ --t-4: 22px; /* titres de carte */ --t-5: 28px; /* titres de section */ --t-6: 40px; /* grands titres, dates */ --t-lecture: 18px; /* corps de lecture (.prose) */ --police-code: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; --g-normal: 400; --g-moyen: 500; --g-semi: 600; --g-gras: 700; --g-noir: 800; --i-serre: 1.1; /* grands titres */ --i-titre: 1.22; --i-ui: 1.4; --i-lecture: 1.6; --l-titre: -0.02em; /* lettrage des titres (22–28) */ --l-grand: -0.032em; /* lettrage des très grands titres (40) */ --l-legende: 0.01em; /* ------------------------------------------------------------- espacements (grille de 8) */ --e-0: 2px; --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 40px; --e-8: 48px; --e-9: 64px; --e-10: 80px; --goutiere: 16px; /* marge latérale sur iPhone */ /* Retrait horizontal unique des cartes du fil (événements 0 à 4, chapitre) : avatars, titres et heures tombent sur les mêmes axes. Le héros (5) le double. Valeurs ordinateur plus bas. */ --retrait: 16px; --retrait-heros: 24px; --col-avatar: 32px; /* colonne des avatars dans les cartes en ligne (0 à 3) */ --cible-tactile: 44px; /* plus petite cible au toucher (recommandation Apple) */ /* ------------------------------------------------------------- rayons */ --r-1: 8px; --r-2: 12px; --r-3: 16px; /* cartes */ --r-4: 20px; /* grandes cartes, panneaux, bulles */ --r-5: 28px; /* barres flottantes */ --r-rond: 999px; /* ------------------------------------------------------------- ombres */ --ombre-1: 0 1px 2px rgba(0, 0, 0, 0.4); --ombre-2: 0 8px 24px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3); --ombre-flottante: 0 24px 64px -16px rgba(0, 0, 0, 0.75), 0 8px 20px -8px rgba(0, 0, 0, 0.5); --ombre-accent: 0 12px 40px -12px rgba(255, 46, 147, 0.55); /* ------------------------------------------------------------- mouvement */ --d-instant: 120ms; --d-rapide: 200ms; --d-normale: 250ms; --d-lente: 300ms; --d-ressort: 520ms; --c-sortie: cubic-bezier(0.22, 1, 0.36, 1); /* entrées : rapide puis doux */ --c-entree: cubic-bezier(0.55, 0, 0.75, 0.2); /* sorties : s'accélère en partant */ --c-standard: cubic-bezier(0.4, 0, 0.2, 1); --c-ressort: cubic-bezier(0.34, 1.4, 0.64, 1); /* repli si linear() n'est pas reconnu */ --c-ressort-doux: cubic-bezier(0.3, 1.15, 0.55, 1); /* ------------------------------------------------------------- empilement */ --z-collant: 10; --z-barres: 20; --z-flottants: 25; --z-panneau: 40; --z-apercu: 60; --z-palette: 70; --z-toast: 80; --z-saut: 90; /* lien d'évitement */ /* ------------------------------------------------------------- dimensions */ --l-lecture: 30em; /* 540 px à 18 px : 62 à 67 signes selon le texte ; les vues de lecture longue (récit, journaux) resserrent à 27–28 em pour tenir 65 en moyenne (contrôlé par verifier()) ; jamais « 65ch », le « ch » d’Inter (largeur du zéro) en laisse passer 77 */ --l-fil: 680px; /* colonne du fil */ --l-page: 1080px; /* pages larges (galeries, grilles) */ --l-barre: 264px; /* barre latérale */ --l-panneau: 480px; --l-palette: 640px; --l-apercu: 320px; --h-reglette: 48px; --h-reglette-integree: 44px; /* réglette dans la barre d'onglets (iPhone) */ --h-onglets: 64px; --h-barre-haut: 52px; /* Points de rupture — rappel (les media queries n'acceptent pas les variables) : iPhone < 900px ≤ ordinateur ; large ≥ 1280px. */ --rupture-ordinateur: 900px; --rupture-large: 1280px; /* ------------------------------------------------------------- zones sûres iOS */ --zs-haut: env(safe-area-inset-top, 0px); --zs-bas: env(safe-area-inset-bottom, 0px); --zs-gauche: env(safe-area-inset-left, 0px); --zs-droite: env(safe-area-inset-right, 0px); /* Badge « absent » des avatars : un croissant de lune, en texte-2. */ --lune: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.6 2.2a6 6 0 1 0 3.2 8.6A5 5 0 0 1 10.6 2.2z' fill='%23A1A1AA'/%3E%3C/svg%3E"); /* Grain du verre dépoli (pensées privées) — bruit généré, sans fichier externe. */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E"); } @media (min-width: 900px) { :root { --retrait: 24px; --retrait-heros: 48px; } } /* Vrais ressorts quand le navigateur sait les décrire (Safari 17.2+, Chrome/Edge 113+). */ @supports (transition-timing-function: linear(0, 1)) { :root { --c-ressort: linear(0, 0.0328, 0.1163, 0.2308, 0.3604, 0.4927, 0.6187, 0.7324, 0.8302, 0.9106, 0.9737, 1.0203, 1.0524, 1.072, 1.0816, 1.0834, 1.0794, 1.0717, 1.0617, 1.0508, 1.0398, 1.0295, 1.0203, 1.0124, 1.0061, 1.0012, 0.9976, 0.9951, 0.9937, 0.9931, 0.9935, 1); --c-ressort-doux: linear(0, 0.0203, 0.0722, 0.1448, 0.2291, 0.3187, 0.4085, 0.495, 0.5759, 0.6497, 0.7156, 0.7733, 0.8231, 0.8653, 0.9004, 0.9292, 0.9524, 0.9707, 0.9849, 0.9955, 1.0033, 1.0086, 1.0121, 1.0142, 1.015, 1.0151, 1.0146, 1.0136, 1.0124, 1.0111, 1.0097, 1.0084, 1); } } /* Réduire les animations : les durées tombent à presque rien, partout, sans exception. */ @media (prefers-reduced-motion: reduce) { :root { --d-instant: 1ms; --d-rapide: 1ms; --d-normale: 1ms; --d-lente: 1ms; --d-ressort: 1ms; } }