/* ============================================================ GoToFarm — Design Tokens Source : DESIGN.md (Organic Editorialism) Stack : HTML vanilla + CSS — pas de bundler ⚠️ Toutes les valeurs marquées "à valider" sont extrapolées par interpolation à partir des couleurs définies dans DESIGN.md. À ajuster avec Stéphane si besoin. 📱 Responsive : mobile-first + typographies fluides via clamp() Breakpoints documentés en bas de fichier. ============================================================ */ /* ----- Google Fonts ------------------------------------------------------- À optimiser plus tard via dans le de chaque page HTML pour réduire le blocking render. -------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap'); :root { /* ======================================================================== 1 — PALETTE NATURELLE (Organic Editorialism) ======================================================================== */ /* — Primary : vert forêt profond (DESIGN.md §2) — */ --color-primary: #154228; --color-primary-container: #2e5a3e; --color-primary-bright: #4DBD6A; /* vert vif — accents lumineux sur fond sombre */ --color-on-primary: #ffffff; /* à valider */ --color-on-primary-container: #d3ead8; /* à valider */ --color-primary-fixed: #c4e3cb; /* à valider — highlight subtil */ /* — Secondary : terre cuite (proposition — à valider) — */ --color-secondary: #c66e3d; --color-secondary-container: #f4d6c2; /* à valider */ --color-on-secondary: #ffffff; /* à valider */ --color-on-secondary-container: #3d1f0c; /* à valider */ --color-secondary-fixed: #f4d6c2; /* à valider */ /* — Accent cashback : jaune blé doré (proposition — à valider) — */ --color-accent-cashback: #d4a72c; --color-on-accent-cashback: #1c1c11; /* à valider */ /* — Surfaces tonales (DESIGN.md §2 "No-Line Rule" — pas de gris !) — */ --color-background: #fdfae7; --color-surface: #fdfae7; --color-surface-container-lowest: #ffffff; --color-surface-container-low: #f7f4e1; --color-surface-container: #f1eed8; /* à valider — interpolé */ --color-surface-container-high: #ebe8d0; /* à valider — interpolé */ --color-surface-container-highest: #e5e2c7; /* à valider — interpolé */ --color-surface-bright: #fffce8; /* à valider — focus state */ --color-surface-dim: #ede9cf; /* à valider */ /* — Texte (jamais noir pur — DESIGN.md §4 ambient shadows) — */ --color-on-surface: #1c1c11; --color-on-surface-variant: #4a4a3a; /* à valider — texte secondaire */ /* — Outline (uniquement pour ghost borders sur form fields) — */ --color-outline: #6b6b50; /* à valider */ --color-outline-variant: #c8c4a8; /* à valider */ /* — États fonctionnels — */ --color-success: #4CAF50; --color-warning: #FF9800; --color-error: #F44336; --color-on-success: #ffffff; --color-on-warning: #1c1c11; --color-on-error: #ffffff; /* ======================================================================== 2 — TYPOGRAPHIE (Editorial Authority — DESIGN.md §3) ======================================================================== */ --font-display: 'Manrope', system-ui, -apple-system, sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; /* — Échelle Material Design 3 adaptée, FLUIDE via clamp(min, preferred, max) → s'adapte en continu de mobile (320px) à desktop (1440px+) — */ /* Display : moments "hero" — letter-spacing négatif obligatoire */ --text-display-lg: clamp(2.25rem, 1.5rem + 3.75vw, 3.5rem); /* 36 → 56px */ --text-display-md: clamp(2rem, 1.4rem + 3vw, 2.75rem); /* 32 → 44px */ --text-display-sm: clamp(1.75rem, 1.3rem + 2.25vw, 2.25rem); /* 28 → 36px */ /* Headline : titres de section */ --text-headline-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); /* 24 → 32px */ --text-headline-md: clamp(1.375rem, 1.15rem + 1.125vw, 1.75rem);/* 22 → 28px */ --text-headline-sm: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); /* 20 → 24px */ /* Title : titres de carte / sous-section */ --text-title-lg: 1.375rem; /* 22px */ --text-title-md: 1.125rem; /* 18px */ --text-title-sm: 1rem; /* 16px */ /* Body : texte courant */ --text-body-lg: 1rem; /* 16px — base lecture */ --text-body-md: 0.9375rem; /* 15px */ --text-body-sm: 0.875rem; /* 14px */ /* Label : boutons, chips, formulaires */ --text-label-lg: 0.9375rem; /* 15px */ --text-label-md: 0.875rem; /* 14px */ --text-label-sm: 0.75rem; /* 12px */ /* — Letter-spacing — */ --tracking-display: -0.02em; /* DESIGN.md §3 — display tight */ --tracking-headline: -0.01em; --tracking-body: 0; --tracking-label: 0.01em; --tracking-wide: 0.05em; /* uppercase labels */ /* — Line-height — */ --leading-display: 1.1; --leading-headline: 1.25; --leading-body: 1.55; --leading-label: 1.4; /* — Font weight — */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* ======================================================================== 3 — ESPACEMENT (système 4px-base + valeurs fluides) ======================================================================== */ --spacing-0: 0; --spacing-1: 0.25rem; /* 4px */ --spacing-2: 0.5rem; /* 8px */ --spacing-3: 0.75rem; /* 12px */ --spacing-4: 1rem; /* 16px */ --spacing-5: 1.25rem; /* 20px */ --spacing-6: 1.5rem; /* 24px */ --spacing-8: 2rem; /* 32px */ --spacing-10: 2.5rem; /* 40px */ --spacing-12: 3rem; /* 48px */ --spacing-16: 4rem; /* 64px */ --spacing-20: 5rem; /* 80px */ /* — Espacements de section fluides (respiration éditoriale) — */ --section-padding-y: clamp(3rem, 2rem + 5vw, 6rem); /* 48 → 96px */ --section-padding-x: clamp(1rem, 0.5rem + 2vw, 2rem); /* 16 → 32px */ --container-max-width: 1280px; /* ======================================================================== 4 — GÉOMÉTRIE (radius) ======================================================================== */ --radius-none: 0; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; /* défaut cards */ --radius-xl: 24px; --radius-2xl: 32px; --radius-card: var(--radius-lg); --radius-pebble: 9999px; /* DESIGN.md §5 — CTA full rounded */ /* ======================================================================== 5 — GRADIENTS & EFFETS (Glass & Gradient Rule — DESIGN.md §2) ======================================================================== */ --gradient-primary: linear-gradient(145deg, #154228 0%, #2e5a3e 100%); --gradient-secondary: linear-gradient(145deg, #c66e3d 0%, #d88c5d 100%); /* ======================================================================== 6 — OMBRES AMBIANTES (DESIGN.md §4 — jamais noir pur) ======================================================================== */ --shadow-ambient-xs: 0 4px 12px rgba(28, 28, 17, 0.04); --shadow-ambient-sm: 0 8px 24px rgba(28, 28, 17, 0.04); --shadow-ambient-md: 0 16px 32px rgba(28, 28, 17, 0.06); --shadow-ambient-lg: 0 24px 40px rgba(28, 28, 17, 0.08); --shadow-ambient-xl: 0 32px 56px rgba(28, 28, 17, 0.10); /* ======================================================================== 7 — GLASSMORPHISM (DESIGN.md §2 — headers/nav flottants) ======================================================================== */ --glass-bg: rgba(241, 238, 216, 0.8); /* surface_container @ 80% */ --glass-bg-light: rgba(253, 250, 231, 0.8); /* background @ 80% */ --glass-blur: 20px; --glass-blur-strong: 40px; /* ======================================================================== 8 — GHOST BORDER (DESIGN.md §4 — formulaires uniquement) ======================================================================== */ --border-ghost: rgba(28, 28, 17, 0.15); /* outline_variant @ 15% */ --border-ghost-hover: rgba(28, 28, 17, 0.25); --border-ghost-focus: rgba(21, 66, 40, 0.40); /* primary @ 40% */ /* ======================================================================== 9 — OPACITÉS RÉUTILISABLES (DESIGN.md §2/§4) ======================================================================== */ --opacity-glass: 0.8; --opacity-ghost: 0.15; --opacity-ghost-hover: 0.25; --opacity-focus: 0.4; --opacity-shadow-low: 0.04; --opacity-shadow-mid: 0.06; --opacity-shadow-high: 0.08; --opacity-disabled: 0.38; /* ======================================================================== 10 — Z-INDEX (hiérarchie pour superposition) ======================================================================== */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-popover: 500; --z-toast: 600; --z-tooltip: 700; /* ======================================================================== 11 — TRANSITIONS (mouvement organique, jamais saccadé) ======================================================================== */ --duration-instant: 80ms; --duration-fast: 160ms; --duration-normal: 240ms; --duration-slow: 400ms; --easing-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* défaut UI */ --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1); --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* léger rebond */ /* ======================================================================== 12 — SAFE AREA iOS (notch / Dynamic Island / barre de gestes) ======================================================================== */ --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-right: env(safe-area-inset-right, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); --safe-area-left: env(safe-area-inset-left, 0px); /* ======================================================================== 13 — TOUCH TARGETS (accessibilité — Apple HIG / Material) ======================================================================== */ --touch-target-min: 44px; /* Apple HIG (iOS) */ --touch-target-comfort: 48px; /* Material recommended */ } /* ============================================================================= 📱 BREAKPOINTS — RESPONSIVE STRATEGY ============================================================================= Mobile-first : écrire les styles pour mobile par défaut, puis ajouter des @media (min-width: ...) pour adapter aux écrans plus larges. Les variables CSS ne fonctionnent PAS dans les media queries, donc utiliser les valeurs ci-dessous EN DUR dans les @media. Les conserver SYNCHRONISÉES avec ce tableau partout dans le codebase. ┌─────────────────┬───────────────┬──────────────────────────────────────┐ │ Nom │ Largeur │ Cible │ ├─────────────────┼───────────────┼──────────────────────────────────────┤ │ (default) │ < 480px │ Mobile portrait (iPhone SE → Pro) │ │ sm │ ≥ 480px │ Mobile large / phablet │ │ md │ ≥ 768px │ Tablette portrait (iPad mini/std) │ │ lg │ ≥ 1024px │ Tablette paysage / petit desktop │ │ xl │ ≥ 1280px │ Desktop standard │ │ 2xl │ ≥ 1536px │ Grand desktop / 4K │ └─────────────────┴───────────────┴──────────────────────────────────────┘ Exemple : .farm-card { padding: var(--spacing-4); } @media (min-width: 768px) { .farm-card { padding: var(--spacing-8); } } ========================================================================== */ /* ============================================================================= 🎯 RÈGLES DE BASE RESPONSIVE & ACCESSIBILITÉ ========================================================================== */ /* Empêche iOS Safari de zoomer au focus sur les inputs (font-size < 16px) */ @media (max-width: 767px) { input, select, textarea { font-size: max(1rem, 16px); } } /* Respecte la préférence de réduction de mouvement (accessibilité) */ @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; } }