/* ===================================================================== TRENDS.CSS — Habillage "tendance" : glassmorphism + mesh gradient + OLED Chargé APRÈS design-system.css → peut surcharger tokens & classes. Réutilise les tokens de design-system.css / style.css : --primary #047857 --primary-light #059669 --primary-dark #065f46 --accent #d97706 --bg-main / --bg-card / --text-main / --border-color N'édite PAS les autres fichiers. Aucune dépendance JS hormis la classe `.oled` posée sur par pages/settings.js. ===================================================================== */ /* ===================================================================== 1. GLASSMORPHISM — Header (.app-header) + barre mobile (.bottom-nav) ===================================================================== */ /* --- Header : gradient vert SOLIDE (mode clair) --------------------- backdrop-filter RETIRÉ (perf + contraste) : sur mobile le header n'apporte rien au flou et coûtait du GPU ; on garde un dégradé vert opaque (texte blanc AA) avec de discrets accents "mesh" par-dessus une base pleine. */ .app-header { position: sticky; top: 0; z-index: 90; /* iOS PWA (viewport-fit=cover + status-bar black-translucent) : réserver l'encoche/Dynamic Island. Le fond du header remplit la zone safe-area (barre d'état verte, pas de texte sous l'heure). 0 sur desktop/Android. */ padding-top: var(--safe-area-top, 0px); /* Base linéaire OPAQUE (= dégradé vert solide) + accents radiaux discrets. */ background: radial-gradient(120% 150% at 0% 0%, rgba(5, 150, 105, .35), transparent 60%), radial-gradient(120% 150% at 100% 0%, rgba(217, 119, 6, .14), transparent 55%), linear-gradient(120deg, var(--primary-dark), var(--primary)); border-bottom: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 4px 20px -8px rgba(0, 0, 0, .35); } /* Header — mode sombre : surface sombre OPAQUE + soupçon de vert */ .dark .app-header { background: radial-gradient(120% 150% at 0% 0%, rgba(5, 150, 105, .26), transparent 60%), radial-gradient(120% 150% at 100% 0%, rgba(217, 119, 6, .12), transparent 55%), linear-gradient(120deg, #0a1410, #062019); border-bottom: 1px solid rgba(255, 255, 255, .10); box-shadow: 0 4px 22px -8px rgba(0, 0, 0, .6); } /* --- Barre de navigation mobile : verre ADOUCI ---------------------- Flou réduit (14px -> 8px) et fond plus opaque pour limiter le coût GPU et garder un bon contraste du contenu qui défile derrière. */ .bottom-nav { background: linear-gradient(0deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .82)); -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%); border-top: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 -2px 18px rgba(0, 0, 0, .12); } .dark .bottom-nav { background: linear-gradient(0deg, rgba(16, 24, 20, .92), rgba(16, 24, 20, .82)); border-top: 1px solid rgba(255, 255, 255, .10); box-shadow: 0 -2px 20px rgba(0, 0, 0, .5); } /* Libellés inactifs assombris pour ne pas se délaver sur le contenu défilant. */ .bottom-nav .bottom-nav-item { color: #334155; } /* slate-700 */ .bottom-nav .bottom-nav-item.active, .bottom-nav .bottom-nav-item:active { color: var(--primary); } .dark .bottom-nav .bottom-nav-item { color: #cbd5e1; } /* slate-300 */ .dark .bottom-nav .bottom-nav-item.active, .dark .bottom-nav .bottom-nav-item:active { color: var(--primary-light); } /* --- Repli solide si backdrop-filter indisponible (contraste garanti) */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .app-header { background: linear-gradient(120deg, var(--primary-dark), var(--primary)); } .dark .app-header { background: linear-gradient(120deg, #0a1410, #062019); } .bottom-nav { background: var(--bg-card); } .dark .bottom-nav { background: var(--bg-card); } } /* ===================================================================== 2. MESH / GRADIENT ANIMÉ — classe réutilisable .mesh-hero À appliquer sur un en-tête de page / hero (par d'autres vues). ===================================================================== */ .mesh-hero { position: relative; color: #fff; background-color: var(--primary-dark); background-image: radial-gradient(at 18% 22%, rgba(5, 150, 105, .85) 0px, transparent 50%), radial-gradient(at 82% 8%, rgba(217, 119, 6, .55) 0px, transparent 45%), radial-gradient(at 8% 82%, rgba(6, 95, 70, .90) 0px, transparent 52%), radial-gradient(at 88% 78%, rgba(4, 120, 87, .80) 0px, transparent 50%), conic-gradient(from 200deg at 50% 50%, var(--primary-dark), var(--primary), var(--primary-light), var(--primary-dark)); background-size: 200% 200%; background-position: 0% 0%; animation: meshDrift 11s ease-in-out infinite alternate; } @keyframes meshDrift { 0% { background-position: 0% 0%; } 50% { background-position: 100% 50%; } 100% { background-position: 50% 100%; } } /* Variante ambre (optionnelle) pour les heros "budget / promos" */ .mesh-hero--amber { background-color: var(--accent-dark, #b45309); background-image: radial-gradient(at 18% 22%, rgba(217, 119, 6, .85) 0px, transparent 50%), radial-gradient(at 82% 8%, rgba(5, 150, 105, .50) 0px, transparent 45%), radial-gradient(at 10% 80%, rgba(180, 83, 9, .90) 0px, transparent 52%), conic-gradient(from 200deg at 50% 50%, #b45309, var(--accent), #f59e0b, #b45309); } /* ===================================================================== 3. MODE OLED (noir profond) — actif uniquement avec .oled sur (combiné au mode sombre). Surfaces #000 / #0a0a0a + halo accent. ===================================================================== */ html.oled.dark { --bg-main: #000000; --bg-card: #0a0a0a; --border-color: #161616; } html.oled.dark body { background-color: #000000; } /* Le header / nav passe en quasi-noir teinté (OPAQUE, plus de backdrop-filter) */ html.oled.dark .app-header { background: radial-gradient(120% 150% at 0% 0%, rgba(5, 150, 105, .20), transparent 60%), radial-gradient(120% 150% at 100% 0%, rgba(217, 119, 6, .10), transparent 55%), linear-gradient(120deg, #000000, #031410); border-bottom: 1px solid rgba(255, 255, 255, .08); } html.oled.dark .bottom-nav { background: linear-gradient(0deg, rgba(0, 0, 0, .82), rgba(8, 8, 8, .70)); border-top: 1px solid rgba(255, 255, 255, .08); } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { html.oled.dark .app-header { background: linear-gradient(120deg, #000000, #031410); } html.oled.dark .bottom-nav { background: #050505; } } /* Halos d'accent verts / ambre subtils sur fond noir profond */ html.oled.dark .bottom-nav-item.active, html.oled.dark .bottom-nav-item:active { color: var(--primary-light); text-shadow: 0 0 10px rgba(5, 150, 105, .55); } /* Le vert "actif" de la nav desktop gagne un léger halo */ html.oled.dark nav a.active { box-shadow: 0 0 0 1px rgba(5, 150, 105, .35), 0 0 14px -2px rgba(5, 150, 105, .45); } /* Boutons primaires (reskin vert) : halo discret */ html.oled.dark .bg-blue-600, html.oled.dark .bg-green-500 { box-shadow: 0 0 18px -6px rgba(5, 150, 105, .65); } /* Accent ambre (boutons orange / budget) : halo chaud */ html.oled.dark .bg-orange-500, html.oled.dark .text-amber-500 { box-shadow: 0 0 18px -6px rgba(217, 119, 6, .60); } /* Mesh hero en OLED : assombri pour rester dans l'esprit "true black" */ html.oled.dark .mesh-hero { background-color: #000000; background-blend-mode: screen; } /* ===================================================================== 4. ACCESSIBILITÉ — figer le mesh si l'utilisateur réduit les animations ===================================================================== */ @media (prefers-reduced-motion: reduce) { .mesh-hero { animation: none !important; background-position: 50% 50%; } }