/* ============================================================ WOW MIX — Palette MODERNE injectée dans le WOW À charger APRÈS wow-effects.css et classique-motion.css ============================================================ */ :root { /* Palette "Nouvelle Terre" du moderne */ --m-lime: #D4F15A; --m-emerald: #0E7C5A; --m-forest: #063F2D; --m-saffron: #F2A71B; --m-rust: #C4451C; --m-clay: #E07856; --m-lavender: #8E7BC4; --m-sky: #7CC4D8; /* Pop accents */ --pop-coral: #ff5d3a; --pop-magenta: #d92a7c; --pop-amber: #f7a823; --pop-cyan: #1cb5c0; --pop-violet: #7d4fc7; --pop-lime: #8fc23a; } /* ============================================================ 1. RE-MAPPAGE FAMILLES — couleurs modernes ============================================================ */ .page.fam-minerales { --fam-accent: var(--m-clay) !important; --fam-deep: var(--m-rust) !important; --fam-tint: #f9d4c1 !important; --fam-bg: #fdf3ec !important; } .page.fam-vegetales { --fam-accent: var(--m-emerald) !important; --fam-deep: var(--m-forest) !important; --fam-tint: #c4e4d4 !important; --fam-bg: #eef7f1 !important; } .page.fam-animales { --fam-accent: var(--m-rust) !important; --fam-deep: #7a2810 !important; --fam-tint: #f5c8b5 !important; --fam-bg: #fcefe8 !important; } .page.fam-specifiques { --fam-accent: var(--m-saffron) !important; --fam-deep: #8a5a08 !important; --fam-tint: #fbe3a8 !important; --fam-bg: #fdf5dc !important; } /* ============================================================ 2. MESH BLOBS — couleurs modernes au lieu des anciennes ============================================================ */ .wow-mesh .b1 { background: radial-gradient(circle, var(--m-clay) 40%, transparent 70%) !important; } .wow-mesh .b2 { background: radial-gradient(circle, var(--m-sky) 40%, transparent 70%) !important; } .wow-mesh .b3 { background: radial-gradient(circle, var(--m-saffron) 40%, transparent 70%) !important; } .wow-mesh .b4 { background: radial-gradient(circle, var(--m-lavender) 40%, transparent 70%) !important; } .wow-mesh .b5 { background: radial-gradient(circle, var(--m-emerald) 40%, transparent 70%) !important; } /* ============================================================ 3. MAGIC NAV — palette moderne par famille ============================================================ */ .magic-indicator { background: linear-gradient(135deg, var(--m-clay), var(--m-saffron)) !important; } .magic-indicator[data-fam="cover"] { background: linear-gradient(135deg, var(--m-emerald), var(--m-lime)) !important; } .magic-indicator[data-fam="termes"] { background: linear-gradient(135deg, var(--m-lavender), var(--m-sky)) !important; } .magic-indicator[data-fam="minerales"] { background: linear-gradient(135deg, var(--m-clay), var(--m-rust)) !important; } .magic-indicator[data-fam="vegetales"] { background: linear-gradient(135deg, var(--m-emerald), var(--m-lime)) !important; } .magic-indicator[data-fam="animales"] { background: linear-gradient(135deg, var(--m-rust), #4a1408) !important; } .magic-indicator[data-fam="specifiques"] { background: linear-gradient(135deg, var(--m-saffron), var(--m-clay)) !important; } .magic-indicator[data-fam="certifications"] { background: linear-gradient(135deg, var(--m-sky), var(--m-emerald)) !important; } .magic-indicator[data-fam="index"] { background: linear-gradient(135deg, var(--m-lavender), var(--m-clay)) !important; } /* ============================================================ 4. NAV CHAPTERS BG — verre teinté plus chaud ============================================================ */ .nav-chapters { background: color-mix(in srgb, var(--m-forest) 75%, transparent) !important; } /* ============================================================ 5. TITRES SECTION — gradient moderne tricolore ============================================================ */ .page.fam-vegetales .section-title { background: linear-gradient(100deg, var(--m-forest) 0%, var(--m-emerald) 30%, var(--m-lime) 55%, var(--m-emerald) 80%, var(--m-forest) 100%) !important; background-size: 220% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } .page.fam-minerales .section-title { background: linear-gradient(100deg, var(--m-rust) 0%, var(--m-clay) 35%, var(--m-saffron) 60%, var(--m-clay) 80%, var(--m-rust) 100%) !important; background-size: 220% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } .page.fam-animales .section-title { background: linear-gradient(100deg, #4a1408 0%, var(--m-rust) 40%, var(--m-clay) 65%, var(--m-rust) 85%, #4a1408 100%) !important; background-size: 220% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } .page.fam-specifiques .section-title { background: linear-gradient(100deg, #8a5a08 0%, var(--m-saffron) 35%, var(--m-clay) 60%, var(--m-saffron) 80%, #8a5a08 100%) !important; background-size: 220% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; } /* ============================================================ 6. NPK BARS — couleurs nutriments modernes ============================================================ */ .fiche .npk-bars:nth-child(1) .npk-bar-fill { --bar-color: var(--m-emerald) !important; } /* N */ .fiche .npk-bars:nth-child(2) .npk-bar-fill { --bar-color: var(--m-saffron) !important; } /* P */ .fiche .npk-bars:nth-child(3) .npk-bar-fill { --bar-color: var(--m-clay) !important; } /* K */ .fiche .npk-bars:nth-child(4) .npk-bar-fill { --bar-color: var(--m-lavender) !important; } /* Mg */ .npk-bar-fill { box-shadow: 0 0 12px color-mix(in srgb, var(--bar-color, var(--m-emerald)) 60%, transparent), inset 0 1px 0 rgba(255,255,255,0.5) !important; } /* ============================================================ 7. NAV BUTTONS (filter) — actif gradient lime/emerald ============================================================ */ .nav-btn.active { background: linear-gradient(120deg, var(--m-lime), var(--m-emerald)) !important; color: var(--m-forest) !important; border-color: transparent !important; font-weight: 700 !important; box-shadow: 0 4px 14px color-mix(in srgb, var(--m-lime) 50%, transparent) !important; } .nav-btn.active::before { display: none !important; } /* ============================================================ 8. SCROLLBAR — palette moderne ============================================================ */ ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--m-clay), var(--m-saffron)) !important; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--m-rust), var(--m-saffron)) !important; } /* ============================================================ 9. CURSOR — couleur lime au lieu de corail ============================================================ */ .wow-cursor { background: var(--m-lime) !important; box-shadow: 0 0 12px color-mix(in srgb, var(--m-lime) 70%, transparent) !important; } .wow-cursor-ring { border-color: var(--m-emerald) !important; } .wow-cursor.hover { background: var(--m-saffron) !important; } /* ============================================================ 10. BLOCS SAVIEZ — gradient famille plus saturé ============================================================ */ .page.fam-vegetales .block.saviez { background: linear-gradient(135deg, color-mix(in srgb, var(--m-emerald) 18%, white), color-mix(in srgb, var(--m-lime) 25%, white)) !important; } /* ============================================================ 11. BADGES — couleurs vives moderne ============================================================ */ .badge { background: linear-gradient(135deg, color-mix(in srgb, var(--fam-accent, var(--m-clay)) 25%, white), color-mix(in srgb, var(--fam-accent, var(--m-saffron)) 12%, white)) !important; border-color: color-mix(in srgb, var(--fam-accent, var(--m-clay)) 50%, transparent) !important; color: var(--fam-deep, var(--m-forest)) !important; font-weight: 700 !important; } /* ============================================================ 12. FICHES — glow plus prononcé avec couleurs modernes ============================================================ */ .page.fam-minerales .fiche:hover, .page.fam-vegetales .fiche:hover, .page.fam-animales .fiche:hover, .page.fam-specifiques .fiche:hover { box-shadow: 0 14px 32px color-mix(in srgb, var(--fam-accent) 35%, transparent), 0 4px 10px color-mix(in srgb, var(--fam-accent) 20%, transparent) !important; } /* Coin coloré gradient moderne */ .page.fam-vegetales .fiche::before { background: radial-gradient(circle at top right, color-mix(in srgb, var(--m-lime) 50%, transparent), transparent 70%) !important; } .page.fam-minerales .fiche::before { background: radial-gradient(circle at top right, color-mix(in srgb, var(--m-saffron) 45%, transparent), transparent 70%) !important; } .page.fam-animales .fiche::before { background: radial-gradient(circle at top right, color-mix(in srgb, var(--m-clay) 45%, transparent), transparent 70%) !important; } .page.fam-specifiques .fiche::before { background: radial-gradient(circle at top right, color-mix(in srgb, var(--m-clay) 45%, transparent), transparent 70%) !important; }