/* ============================================================ OBJECTIFNATATION · Design Tokens (source de vérité centrale) Généré depuis objectifnatation-tokens.json — ne pas éditer à la main. Architecture 3 couches : primitif -> sémantique -> alias hérités. Les noms courts (--ink, --gold...) sont conservés pour compatibilité avec le CSS existant des pages. ============================================================ */ :root { /* --- Couche 1 : primitifs (valeurs brutes) --- */ --c-ink-900:#0A1F2E; --c-ink-700:#15314A; --c-ink-500:#3A5573; --c-cream-50:#FAF7F0; --c-cream-100:#F6F1E8; --c-cream-200:#EFE6D3; --c-gold-700:#9E6F3E; --c-gold-500:#C8965A; --c-gold-300:#D9B583; --c-water-700:#2D6A8C; --c-water-500:#6BA6C9; --c-water-300:#A7CBDB; --c-ok:#2E7D5F; --c-warm:#E8863A; --c-rose:#C47A7A; --c-violet:#9C5DB2; --c-white:#FFFFFF; /* --- Couche 2 : alias hérités (noms utilisés par les pages) --- */ --ink: var(--c-ink-900); --ink-soft: var(--c-ink-700); --ink-muted: var(--c-ink-500); --ink-line: rgba(10,31,46,.1); --cream: var(--c-cream-100); --cream-warm: var(--c-cream-200); --paper: var(--c-cream-50); --white: var(--c-white); --surface-dark: var(--ink); --text-on-dark: var(--cream); --gold: var(--c-gold-500); --gold-soft: var(--c-gold-300); --gold-deep: var(--c-gold-700); --water: var(--c-water-500); --water-soft: var(--c-water-300); --water-deep: var(--c-water-700); --ok: var(--c-ok); --warm: var(--c-warm); --c-warn: #F0A065; /* teinte "warning" distincte (valeur dominante du projet) */ --warn: var(--c-warn); --rose: var(--c-rose); --violet: var(--c-violet); /* Ombres */ --shadow-soft: 0 1px 2px rgba(10,31,46,.04), 0 4px 12px rgba(10,31,46,.06); --shadow-med: 0 2px 6px rgba(10,31,46,.06), 0 18px 40px rgba(10,31,46,.12); --shadow-deep: 0 4px 12px rgba(10,31,46,.08), 0 32px 80px rgba(10,31,46,.18); /* Typographie */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; } /* --- Focus clavier visible (RGAA 10.7) --- :focus-visible ne s'affiche qu'à la navigation clavier, jamais au clic. Les champs de formulaire sont exclus : ils ont déjà leurs styles :focus propres dans chaque page (bordure + ombre). */ a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [tabindex]:not(input):not(select):not(textarea):focus-visible { outline: 3px solid rgba(200, 150, 90, .6); outline-offset: 2px; border-radius: inherit; } /* ============================================================ MODE SOMBRE — palette canonique (était dupliquée dans 80 pages) Activé par [data-theme="dark"] sur . ============================================================ */ [data-theme="dark"] { --paper: #0A1A2A; --cream: #102538; --white: #15314A; --ink: #E8E4DA; --ink-soft: #C8C2B5; --ink-muted: #8B9EAC; --ink-line: #1F3A56; /* Accents assouplis pour fond sombre */ --gold: #D4A370; --gold-soft: #E8BE89; --gold-deep: #B88857; --water: #7BB7DA; --water-deep: #5A9DC5; --ok: #4FAA85; --warn: #F0A065; --rose: #D69494; --admin: #D45565; --admin-soft: #4A2530; --admin-deep: #E87585; color-scheme: dark; --surface-dark: #050E18; --text-on-dark: #E8E4DA; /* fonds très sombres intentionnels : restent sombres en mode nuit */ } /* ============================================================ SOUS-CHARTE ADMIN — choix assumé : l'interface d'administration se distingue du site public (gris plus chauds, accent bordeaux). Les pages admin aliassent --ink-line / --ink-muted sur ces tokens. ============================================================ */ :root { --admin-line: #E5DED1; --admin-muted: #6B7E8E; --admin: #B23A4A; --admin-soft: #E8D0D4; --admin-deep: #7E1F2E; } /* ============================================================ ACCESSIBILITÉ — mouvement réduit (préférence système respectée sur les 86 pages via ce fichier central). ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }