/* ============================================================ SOLAR EDITORIAL - TOKENS v1.1 Extension du systeme v1.0 : accessibilite, echelle typo, espacement 8pt, etats d'interaction, mouvement. Base de reference a donner a Claude Design et Claude Code. ============================================================ */ :root { /* ---------- 1. COULEURS DE MARQUE (inchangees v1.0) ---------- */ --solar: #E85D2C; /* Orange signature. DECORATIF uniquement : cercles, points marqueurs, formes de cover, et accent serif italique en GRAND (>= 24px). Ne porte jamais de petit texte sur fond clair. */ --apricot: #F4A261; /* Soutien chaleureux, nuances, degrades. */ --cream: #FAF6F0; /* Fond par defaut. Remplace le blanc pur. */ --cream-dark: #F0EBE2; /* Surfaces, cartes (le "30%" du 60-30-10). */ --ink: #1A1A1A; /* Texte courant et surfaces sombres. */ /* ---------- 2. COULEURS ACCESSIBLES (nouveau v1.1) ---------- */ /* Variantes calculees pour le contraste du TEXTE sur les DEUX fonds clairs du systeme : creme ET creme-dark (cartes, surfaces). C'est creme-dark, plus sombre, qui fixe la contrainte : un token valide dessus l'est aussi sur creme. */ --solar-deep: #B8421B; /* 5.09:1 sur creme, 4.61:1 sur creme-dark. Le orange INTERACTIF / TEXTE : liens, petit texte orange, remplissage des boutons primaires (avec texte creme). */ --stone: #8B8680; /* 3.35:1 sur creme, 3.04:1 sur creme-dark. DECORATIF / grand texte seul : filets, bordures, meta >= 18px. */ --stone-deep: #6C6963; /* 5.08:1 sur creme, 4.61:1 sur creme-dark. Petit texte secondaire et labels mono (10-14px) qui doivent rester lisibles. */ --gray-light: #C7C2BB; /* Bordures, filets 1px. Jamais du texte. */ /* ---------- 3. ETATS FONCTIONNELS (hors palette de marque) ---------- */ /* Strictement pour le feedback UI (validation de formulaire). Jamais decoratif. La couleur n'est jamais seule : toujours accompagnee d'un texte et/ou d'une icone. */ --error: #B3261E; /* 6.07:1 sur creme, 5.51:1 sur creme-dark. Erreurs de saisie. */ --error-bg: #FBEAE8; /* Fond doux d'alerte. */ --success: #2C764E; /* 5.12:1 sur creme, 4.64:1 sur creme-dark. Confirmation. */ /* ---------- 4. TEXTE SUR FOND SOMBRE (ink) ---------- */ --on-dark: #FAF6F0; /* Texte principal sur ink (creme). */ --on-dark-muted: #C7C2BB; /* Texte secondaire sur ink. */ --on-dark-accent: #E85D2C; /* 5:1 sur ink : le Solar VIF passe ici, donc accents et liens orange sur sombre. */ /* ---------- 5. TYPOGRAPHIE ---------- */ /* 3 ROLES, tailles declinables (remplace la regle "3 tailles"). */ --font-display: 'Inter', sans-serif; /* 800 : titres, CV */ --font-serif: 'Instrument Serif', serif; /* italique : covers, citations */ --font-body: 'Inter', sans-serif; /* 400 : texte courant */ --font-mono: 'JetBrains Mono', monospace; /* meta, labels, numeros */ /* Echelle Major Third (1.25) - editorial. */ --text-xs: 0.8rem; /* 12.8px - labels mono, captions */ --text-sm: 0.875rem; /* 14px - petit texte */ --text-base: 1rem; /* 16px - corps (reference) */ --text-lg: 1.25rem; /* 20px - sous-titres, intro */ --text-xl: 1.563rem; /* 25px - titres S */ --text-2xl: 1.953rem; /* 31px - titres M */ --text-3xl: 2.441rem; /* 39px - titres L (ex-42px) */ --text-4xl: 3.5rem; /* 56px - titres de section */ /* Display : libre via clamp, hors ratio (l'editorial l'autorise). */ --text-display: clamp(3rem, 7vw, 6.25rem); /* ~48-100px : covers, hero */ --text-display-xl: clamp(3.5rem, 9vw, 7.5rem); /* ~56-120px : fin, gros titres */ --leading-tight: 1.05; /* tres grands titres */ --leading-snug: 1.15; /* titres */ --leading-normal: 1.5; /* corps */ --leading-relaxed: 1.6; /* lecture longue */ --tracking-tighter: -0.04em; /* titres >= 32px */ --tracking-tight: -0.02em; /* titres moyens */ --tracking-normal: 0; /* corps */ --tracking-wide: 0.15em; /* labels mono en CAPITALES */ /* ---------- 6. ESPACEMENT (grille 8pt) ---------- */ /* Regle d'or : espacement interne <= espacement externe. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; /* migrer les 100px de la v1.0 vers 96 */ --space-13: 128px; /* migrer les 120px vers 128 */ /* ---------- 7. RAYONS ---------- */ /* Choix "medium" (et non sharp editorial) : la rondeur porte la chaleur du systeme. Enfant toujours plus petit que parent. */ --radius-sm: 4px; --radius-md: 8px; /* cartes */ --radius-lg: 12px; /* slides, grands blocs */ --radius-full: 9999px; /* pills : boutons, tags */ /* ---------- 8. OMBRES ---------- */ --shadow-sm: 0 1px 3px rgba(26,26,26,0.06), 0 1px 2px rgba(26,26,26,0.04); --shadow-md: 0 4px 6px rgba(26,26,26,0.06), 0 2px 4px rgba(26,26,26,0.04); --shadow-lg: 0 20px 60px rgba(26,26,26,0.12); --shadow-warm: 0 30px 60px rgba(232,93,44,0.15); /* moments expressifs */ /* Ombres d'AFFORDANCE : reservees aux zones cliquables (cartes, tuiles, boutons). Le repos surleve juste assez pour se detacher du creme, le survol creuse l'ombre en meme temps que la carte monte. Une surface non cliquable (stat, encart) reste plate : c'est ce contraste qui rend l'ombre informative et pas seulement decorative. */ --shadow-interactive: 0 1px 2px rgba(26,26,26,0.04), 0 2px 6px rgba(26,26,26,0.06); --shadow-interactive-hover: 0 2px 4px rgba(26,26,26,0.05), 0 12px 28px rgba(26,26,26,0.12); /* Variante TEINTEE, pour les surfaces cliquables saturees (solar) ou sombres (ink). Une ombre grise y echoue de deux facons : contre le orange elle vire au sale, contre le ink elle se confond avec la carte elle-meme. Le brun brule (#7A280E, le solar assombri) se detache du creme, reste dans la famille chaude de la palette, et garde une ombre plus SOMBRE que la surface qui la projette. Opacites plus fortes que la version neutre : il faut echapper a une masse de couleur. */ --shadow-interactive-warm: 0 1px 2px rgba(122,40,14,0.10), 0 3px 8px rgba(122,40,14,0.16); --shadow-interactive-warm-hover: 0 2px 4px rgba(122,40,14,0.14), 0 14px 32px rgba(122,40,14,0.28); /* ---------- 9. MOUVEMENT ---------- */ --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* entrees */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* sorties */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* repositionnement */ /* Animer uniquement transform et opacity. */ /* ---------- 10. FOCUS (accessibilite clavier) ---------- */ --focus-ring: 2px solid var(--solar-deep); --focus-offset: 2px; --focus-ring-dark: 2px solid var(--apricot); /* visible sur ink */ } /* ============================================================ ETATS DES COMPOSANTS Tout element interactif a : defaut, hover, active, focus, disabled. ============================================================ */ /* Focus visible global : au clavier uniquement, jamais a la souris. */ :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); } .on-dark :focus-visible { outline: var(--focus-ring-dark); } /* --- Liens --- */ a.link { color: var(--solar-deep); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--duration-fast) var(--ease-out); } a.link:hover { border-bottom-color: var(--solar-deep); } a.link:active { color: var(--ink); } .on-dark a.link { color: var(--on-dark-accent); } /* --- Bouton primaire --- */ .btn { font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm); padding: var(--space-3) var(--space-6); /* horizontal = 2x vertical */ border-radius: var(--radius-full); border: 1px solid transparent; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .btn-primary { background: var(--solar-deep); /* texte creme = 4.75:1 */ color: var(--cream); } .btn-primary:hover { background: var(--ink); } .btn-primary:active { transform: translateY(1px); } .btn-primary:disabled { background: var(--gray-light); color: var(--stone-deep); cursor: not-allowed; } /* --- Bouton secondaire (ghost) --- */ .btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--cream); } /* --- Carte (ex : etude de cas) --- */ .card { border-radius: var(--radius-md); box-shadow: var(--shadow-interactive); transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-interactive-hover); } /* Au clavier, l'ombre suit le focus : meme signal qu'a la souris. */ .card:focus-visible { box-shadow: var(--shadow-interactive-hover); } /* --- Champ de formulaire --- */ .field-label { /* label toujours visible, jamais en placeholder seul */ display: block; font-size: var(--text-sm); margin-bottom: var(--space-1); } .field-input { font-size: var(--text-base); padding: var(--space-3) var(--space-4); background: var(--cream); border: 1px solid var(--gray-light); border-radius: var(--radius-md); } .field-input:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-color: var(--solar-deep); } .field-input[aria-invalid="true"] { border-color: var(--error); } .field-error { /* texte + icone, jamais la couleur seule */ color: var(--error); font-size: var(--text-sm); margin-top: var(--space-1); } /* ============================================================ MOUVEMENT REDUIT (prefers-reduced-motion) Respecte le reglage systeme de l'utilisateur. ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }