/* ============================================================================ SofEduc — Design v2 : tokens + base typo ============================================================================ Direction esthétique : Notion / Linear soft, chaleureux. Inspiration : Emil Kowalski (`emil-design-eng` skill). STRATÉGIE DE MIGRATION ---------------------- Ce fichier ne change RIEN visuellement aujourd'hui. Il pose uniquement les variables CSS et charge les Google Fonts (Inter + Instrument Serif). Aucune sélecteur HTML n'est ciblé directement — c'est volontaire. La migration se fera page par page, en référençant ces variables au lieu des valeurs en dur. Bootstrap continue de tourner en parallèle ; chaque page refondue peut utiliser var(--token) pour s'aligner sur la direction. IMPORTANT : ce fichier est chargé APRÈS Bootstrap dans base.html, pour que ses variables soient disponibles partout. Mais il NE surcharge PAS les classes Bootstrap : pas de `.btn { ... }` ici, pas de cascade qui casse l'existant. COMMIT 1 (actuel) : tokens + fonts uniquement. Voir memory/sofeduc_design_v2.md pour la roadmap des commits suivants. */ /* ============================================================================ FONTS ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif&display=swap'); /* ============================================================================ DESIGN TOKENS ============================================================================ */ :root { /* ─── Surfaces ─────────────────────────────────────────────────── */ --sd-bg-canvas: #FBF9F5; /* fond crème global */ --sd-bg-surface: #FFFFFF; /* cards, panels */ --sd-bg-subtle: #F5F2EB; /* hover, sections atténuées */ --sd-bg-elevated: #FFFFFF; /* modals, popovers */ /* ─── Texte ────────────────────────────────────────────────────── */ --sd-text-primary: #1A1A19; --sd-text-secondary: #5B5B57; --sd-text-tertiary: #8E8C85; --sd-text-inverse: #FFFFFF; /* ─── Bordures ─────────────────────────────────────────────────── */ --sd-border-subtle: #ECE7DA; --sd-border-default: #DDD7C6; --sd-border-strong: #B8B1A1; /* ─── Accent — orange chaud (action principale) ──────────────── */ --sd-accent-50: #FFF4ED; --sd-accent-100: #FFE0CC; --sd-accent-200: #FFB789; --sd-accent-500: #E8632B; --sd-accent-600: #C24E1B; --sd-accent-700: #9A3D14; /* ─── Statuts ──────────────────────────────────────────────────── */ --sd-success-50: #ECFDF5; --sd-success-500: #16A34A; --sd-success-700: #15803D; --sd-warn-50: #FFFBEB; --sd-warn-500: #D97706; --sd-warn-700: #B45309; --sd-danger-50: #FEF2F2; --sd-danger-500: #DC2626; --sd-danger-700: #B91C1C; --sd-info-50: #EFF6FF; --sd-info-500: #2563EB; --sd-info-700: #1D4ED8; /* ─── Typographie ──────────────────────────────────────────────── */ --sd-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --sd-font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; --sd-font-mono: ui-monospace, 'SF Mono', Menlo, 'Cascadia Code', 'Courier New', monospace; /* ─── Espacements (base 4) ─────────────────────────────────────── */ --sd-space-1: 4px; --sd-space-2: 8px; --sd-space-3: 12px; --sd-space-4: 16px; --sd-space-5: 20px; --sd-space-6: 24px; --sd-space-8: 32px; --sd-space-10: 40px; --sd-space-12: 48px; --sd-space-16: 64px; --sd-space-20: 80px; /* ─── Radius ───────────────────────────────────────────────────── */ --sd-radius-sm: 6px; --sd-radius: 8px; --sd-radius-lg: 12px; --sd-radius-xl: 16px; --sd-radius-full: 9999px; /* ─── Shadows (subtiles, chaleureuses) ─────────────────────────── */ --sd-shadow-xs: 0 1px 2px rgba(28, 24, 16, 0.04); --sd-shadow-sm: 0 1px 3px rgba(28, 24, 16, 0.06), 0 1px 2px rgba(28, 24, 16, 0.04); --sd-shadow: 0 4px 12px rgba(28, 24, 16, 0.06), 0 1px 3px rgba(28, 24, 16, 0.04); --sd-shadow-lg: 0 12px 32px rgba(28, 24, 16, 0.08), 0 4px 8px rgba(28, 24, 16, 0.04); /* ─── Easings (Emil Kowalski) ──────────────────────────────────── */ --sd-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --sd-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --sd-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* ─── Durations ────────────────────────────────────────────────── */ --sd-d-instant: 100ms; --sd-d-fast: 160ms; /* boutons (transform), feedback rapide */ --sd-d-base: 200ms; /* dropdowns, fades */ --sd-d-slow: 300ms; /* modals, drawers */ } /* ============================================================================ UTILITAIRES OPT-IN ============================================================================ Préfixe "sd-" pour TOUTE classe utilitaire ajoutée par le design v2. Permet d'utiliser ces helpers sur des éléments sans risque de collision avec Bootstrap. À ce stade : rien. Les classes utilitaires viendront avec les commits de migration page par page (commit 2+). */ /* Sentinelle de chargement : permet de tester via JS que design_v2.css est bien servi par la prod (lit `getComputedStyle(document.documentElement) .getPropertyValue('--sd-accent-600')` qui doit valoir " #C24E1B"). */ [data-design-v2] { /* intentionnellement vide — sert juste de check */ } /* ============================================================================ UTILITY CLASSES — sd-* (opt-in) ============================================================================ */ /* Titre de page principal — serif chaleureux Instrument Serif, ~34-38px. À utiliser sur les

de page : `

…

` */ .sd-display { font-family: var(--sd-font-serif, Georgia, serif); font-size: clamp(28px, 3.4vw, 38px); font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; color: var(--sd-text-primary, currentColor); margin: 0 0 var(--sd-space-2, 8px); } /* Petit "kicker" au-dessus d'un titre (Activités · brouillon, etc.) */ .sd-eyebrow { font-size: 12.5px; color: var(--sd-text-tertiary, #8E8C85); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 6px; display: block; } /* Nombre numérique mis en valeur (KPI : « 14,2 /20 »). Le " /20 " peut être glissé dans un */ .sd-numeric { font-family: var(--sd-font-serif, Georgia, serif); font-size: 36px; font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--sd-text-primary, currentColor); } .sd-numeric-unit { font-family: var(--sd-font-sans, sans-serif); font-size: 14px; color: var(--sd-text-tertiary, currentColor); margin-left: 2px; } .sd-numeric.success { color: var(--sd-success-700, currentColor); } .sd-numeric.warn { color: var(--sd-warn-700, currentColor); } .sd-numeric.danger { color: var(--sd-danger-700, currentColor); } .sd-numeric.info { color: var(--sd-info-700, currentColor); } .sd-numeric.accent { color: var(--sd-accent-700, currentColor); } /* Petit subtitle après un titre (texte secondary, taille modeste) */ .sd-subtitle { color: var(--sd-text-secondary, currentColor); font-size: 14.5px; margin: 0; } /* Section title pour cards (uppercase tertiary) */ .sd-card-title { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sd-text-tertiary, currentColor); margin: 0; }