:root{ color-scheme:light; /* Palette officielle NovaTitre v3 (2026-10-13, audit V7 §6 : "supprimer le jaune/doré comme couleur dominante" — capture d'écran à l'appui) : --accent (boutons primaires, CTA, états actifs — PARTOUT sur le site) était resté mappé sur --orange-500 malgré le commentaire ci-dessous (2026-09-23) annonçant déjà son remplacement par le rose — jamais appliqué à la variable elle-même, cause racine confirmée de "jaune partout" dans les captures. --accent passe maintenant sur --violet-500 (#805DFF), la couleur de marque NovaBot déjà établie (js/ui-primitives.js, .nb-page) — jamais une teinte inventée pour l'occasion, maquette validée par l'utilisateur (artifact XV25HLFvNiCeSRrzXm9hDa) avant ce changement. --orange-* reste défini (encore référencé nulle part après ce correctif, mais retiré seulement si un usage futur en dépendait par erreur serait pire qu'une variable inutilisée) — plus aucun usage actif après ce correctif (voir .btn-a/.nb-cta-a plus bas, corrigés pour ne plus référencer --orange-light directement). Vert/rouge (hausse/baisse) et l'ambre d'avertissement restent INCHANGÉS : couleurs sémantiques universelles en finance (gain/perte/alerte), jamais une couleur de marque décorative — seule l'étoile "favori" (une décoration, pas un avertissement) a été corrigée séparément pour ne plus emprunter --warn. Échelles à 6 crans (50/100/300/500/700/900) conservées. */ --orange-50:#fef3e7; --orange-100:#fce3c3; --orange-300:#f5b876; --orange-500:#e67e22; --orange-700:#b85f12; --orange-900:#7a3d08; --orange-light:#f39c12; --violet-50:#f1edff; --violet-100:#e0d4ff; --violet-300:#b49cff; --violet-500:#805dff; --violet-700:#6b46f0; --violet-900:#4527a8; --violet-light:#9478ff; --cyan-50:#e5fbff; --cyan-100:#ccf7ff; --cyan-300:#66e8ff; --cyan-500:#00d4ff; --cyan-700:#00a8cc; --cyan-900:#006b85; --green-50:#e7fbf4; --green-100:#c3f5e3; --green-300:#6ee7b7; --green-500:#10b981; --green-700:#0d9268; --green-900:#065f46; /* CORRECTIF (2026-10-02, retour utilisateur : "fond soit seulement blanc et toute les écriture soit noire") : --bg/-2/-3/-4 et --ink/-2/-3/-4 passent en noir/blanc purs — demande explicite de "change uniquement ça et rien d'autre". La barre de navigation du haut (.top) n'est PAS concernée : elle n'utilise jamais ces tokens, son propre fond (rgba(255,255,255,...)/rgba(8,9,12,...) selon le thème) reste intact, volontairement non touché ici. */ --bg:#ffffff; --bg-2:#ffffff; --bg-3:#ffffff; --bg-4:#ffffff; --ink:#000000; --ink-2:#000000; --ink-3:#000000; --ink-4:#000000; --accent:var(--violet-500); /* Même sens hover (plus clair, pas plus sombre) que l'ancien accent orange — seules les valeurs changent, --violet-light (#9478FF) joue le même rôle que jouait --orange-light. */ --accent-hover:var(--violet-light); --accent-press:var(--violet-700); --accent-soft:var(--violet-50); --accent-ink:#ffffff; /* Bleu nuit officiel NovaTitre (#0A0E27) : utilisé pour le texte sur fond cyan clair (--blue-accent ci-dessous) — un texte blanc y serait illisible (contraste insuffisant). Défini ici (pas seulement en dark) car --blue-accent est identique en clair et en sombre. */ --bg-dark-ink:#0a0e27; /* Cyan réservé aux boutons SECONDAIRES uniquement (jamais un accent général concurrent de l'orange) — voir .btn-blue plus bas (nom conservé, couleur désormais cyan — voir note de palette ci-dessus). */ --blue-accent:var(--cyan-500); --blue-accent-soft:var(--cyan-50); --up:var(--green-500); --up-soft:var(--green-50); --down:#ef4444; --down-soft:#fef0ef; --warn:#b45309; --warn-soft:#fdf4e7; --line:#e6e9f0; --line-2:#eef0f5; /* Tokens Nova (voir leur grand commentaire dans [data-theme="dark"] pour le contexte complet) : repli THÈME CLAIR — l'esthétique "verre bleu nuit" demandée est pensée pour le thème sombre, mais ces variables doivent exister ici aussi pour qu'un composant Nova reste lisible (contraste correct) si jamais consulté en thème clair, jamais une carte invisible/blanc sur blanc. */ --nova-bg:#ffffff; --nova-bg-deep:#f4f5fb; --nova-surface:rgba(33,26,80,.045); --nova-surface-secondary:rgba(33,26,80,.03); --nova-surface-hover:rgba(33,26,80,.075); --nova-border:rgba(33,26,80,.10); --nova-text:#171334; --nova-text-secondary:rgba(23,19,52,.68); --nova-text-muted:rgba(23,19,52,.48); --nova-ai:#3458E8; --nova-bot:#6A3FE0; --nova-review:#C93E8A; --nova-news:#3E63D6; --nova-event:#0F8FBF; /* Glass header/nav/icon (§16, 2ᵉ passe) : définis aussi en clair pour que le système de tokens existe partout, mais seul le thème sombre les câble réellement dans .top/.dock/.nova-action-circle plus bas — le thème clair garde son propre traitement (verre blanc) déjà en place, jamais touché par cette refonte. */ --glass-header:rgba(255,255,255,.72); --glass-navigation:rgba(255,255,255,.72); --glass-icon:rgba(33,26,80,.06); --r-xs:8px; --r-s:12px; --r-m:18px; --r-l:24px; --r-xl:32px; --r-pill:999px; --shadow-1:none; --shadow-2:0 1px 2px rgba(13,17,23,.04), 0 8px 24px rgba(13,17,23,.05); --shadow-3:0 2px 6px rgba(13,17,23,.06), 0 24px 48px rgba(13,17,23,.08); /* CORRECTIF (2026-10-13, cohérence avec le nouvel --accent violet) : cette ombre était restée teintée rose (halo d'une identité "rose primaire" antérieure jamais vraiment appliquée à --accent, voir le commentaire au-dessus de --violet-50) — un bouton violet avec un halo rose aurait été tout aussi incohérent que l'était le halo orange déjà corrigé ci-dessous pour le thème sombre. rgba(128,93, 255,...) = --violet-500 en rgb, jamais une teinte indépendante du bouton qu'elle encadre. */ --shadow-accent:0 8px 24px rgba(128,93,255,.24); --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:48px; --sp-6:80px; /* CORRECTIF dock mobile (confirmé sur Safari iPhone réel, pas seulement en test automatisé) : --dock-h = hauteur réelle du dock flottant (padding 7px haut+bas + bouton 8px/22px icône/3px gap/~13px texte/7px ≈ 67px, arrondi par prudence) ; --dock-gap = son décalage du bas de l'écran (bottom:14px dans .dock, hors safe-area). Utilisées ensemble avec env(safe-area-inset-bottom) — jamais une valeur fixe devinée — pour que le padding-bottom du contenu s'adapte à la VRAIE zone sûre de l'appareil (elle varie selon le modèle d'iPhone/Android et l'orientation). */ /* Recalculé une 4e fois le 2026-09-23 (passe 2, finition visuelle après comparaison directe avec la capture Revolut de référence) : la passe précédente visait délibérément "90 à 110px" (cible initiale du tout premier brief) et le résultat était trop haut/compact — Revolut est une capsule bien plus HORIZONTALE. Nouvelle cible "70-82px", et le padding vertical du dock réduit en conséquence (18px → 10px). Mesuré en direct sur le palier par défaut (≥390px, écran 414/430px) à 79.6px ; 82px retenu ici avec une petite marge de sécurité plutôt que la valeur pile mesurée. Les 2 paliers responsive plus étroits (≤390px, ≤360px) donnent un dock encore moins haut (mesuré 76.1px et 70.6px) ; --dock-h garde la valeur du palier le PLUS haut par sécurité (mieux vaut un peu de padding-bottom en trop sur petit écran qu'un pixel de contenu caché derrière le dock). Toujours couplé à env(safe-area-inset-bottom) dans .wrap ci-dessous — ne JAMAIS ajuster l'un sans l'autre, c'est ce qui a évité que ce changement (comme les 3 précédents) ne fasse recouvrir du contenu par le dock. */ --dock-h:82px; --dock-gap:12px; --space-xs:8px; --space-sm:16px; --space-md:24px; --space-lg:32px; --t-display:clamp(38px,7vw,60px); --t-title:clamp(26px,4vw,36px); --t-h2:21px; --t-h3:17px; --t-body:15.5px; --t-small:13.5px; --t-label:12.5px; --t-micro:11.5px; --lh-tight:1.06; --lh-title:1.15; --lh-body:1.6; --icon-box:44px; --icon-gap:16px; --card-pad:24px; --font:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace; --ease:cubic-bezier(.32,.72,0,1); --spring:cubic-bezier(.32,.72,0,1); --fast:.14s; --slow:.28s; --tap:44px; } [data-theme="dark"]{ color-scheme:dark; /* Échelle noire NovaTitre (2026-09-28, pivot marque "orange Hermès + cyan", palette exacte imposée) : --bg reprend EXACTEMENT le "noir profond domaine" #0A0E27 spécifié — un précédent passage (2026-09-23) s'en était délibérément éloigné (dominante bleu nuit jugée trop présente à l'époque, remplacée par un noir teinté rose/violet) ; ici c'est une décision de marque neuve et explicite, pas une régression. --bg-2/-3/-4 dérivés en éclaircissant progressivement la même teinte (même principe relatif que l'échelle précédente), --ink inchangé (déjà exactement #F3F4F6, la valeur demandée). CORRECTIF (2026-10-02, retour utilisateur : "fond completement en noire pour la session sombre et toute les écriture en blanc") : noir/blanc purs, même principe que le thème clair ci-dessus. .top (nav du haut) non concernée, voir sa note. CORRECTIF (2026-10-05, retour utilisateur : "a la place du noir dans le fond, du bleu marine") : #0A0E27, le "bleu nuit officiel NovaTitre" déjà utilisé ailleurs dans ce fichier (--bg-dark-ink, voir plus bas) — réutilisé ici plutôt qu'une nouvelle teinte arbitraire. Reste uniforme sur les 4 crans, comme demandé ("juste ça"). Texte blanc et boutons blancs (voir plus bas) non concernés, déjà conformes sur ce fond aussi. CORRECTIF (2026-10-07, refonte visuelle des modules Nova, retour utilisateur : "le fond actuel est trop proche du noir [...] je ne veux pas que le site paraisse noir") : #0A0E27 restait perceptible comme "quasi-noir" à l'œil/sur OLED malgré sa dominante bleue techniquement réelle (R10 G14 B39, très sombre) — remplacé par un indigo nettement plus clair et saturé, explicitement demandé cette fois. Échelle à 4 crans conservée (surfaces empilées de plus en plus claires, même principe que les palettes précédentes), teinte de base changée. --bg-2/-3/-4 dérivés par éclaircissement progressif de --bg plutôt qu'une 4e valeur arbitraire. */ --bg:#19143E; /* CORRECTIF (2026-10-07, 2ᵉ passe de refonte, retour utilisateur : "le problème actuel est que seules les cartes Nova sont plus claires [...] je veux que ce langage visuel soit appliqué à l'ensemble de l'application") : --bg-2/-3/-4 n'étaient que des teintes indigo PLUS OPAQUES (donc visuellement une famille de couleurs différente de --nova-surface, un blanc translucide) — remplacées par la même famille "verre" que les cartes Nova (blanc translucide empilé sur le dégradé indigo de html), pour que TOUTE carte/surface du site (Ma position, Ma liste, Marché, Gratuit/Pro/Elite, inputs, chips, barres de progression...) appartienne visuellement à la même famille que les Nova — plus une seule carte "plus sombre et différente". 3 crans progressifs (comme avant, même principe relatif), --bg-4 ajouté comme palier le plus clair pour les surfaces imbriquées à 2 niveaux (ex. un badge dans une carte déjà claire). */ --bg-2:rgba(255,255,255,.075); --bg-3:rgba(255,255,255,.11); --bg-4:rgba(255,255,255,.14); --ink:#ffffff; --ink-2:#ffffff; --ink-3:#ffffff; --ink-4:#ffffff; /* CORRECTIF (2026-10-07, 2ᵉ passe) : "je ne veux plus d'orange dans le design général" (§3, portée explicitement élargie cette fois au-delà des seuls composants Nova — contrairement à la 1ʳᵉ passe) — l'accent décoratif du thème SOMBRE devient bleu électrique (même teinte que Nova AI, --nova-ai, pour ancrer "Nova AI" comme l'identité centrale du produit) au lieu de l'orange Hermès. Cascade automatique vers tout ce qui utilise var(--accent) sans redéfinition locale (eyebrows, coches d'abonnement, toggles, focus ring, badges...) — jamais réécrit composant par composant (§16 : "pas de couleurs hardcodées"). Thème CLAIR non concerné (--accent y reste l'orange Hermès, protégé explicitement : "ne casse pas le mode clair"). Vert/rouge (gain/ perte) INCHANGÉS : couleurs fonctionnelles, jamais décoratives. */ --accent:#4D7CFF; --accent-hover:#6D94FF; --accent-press:#3458E8; --accent-soft:rgba(77,124,255,.16); --accent-ink:#ffffff; /* Cyan réservé aux boutons secondaires (même règle qu'en thème clair) — jamais un accent général. */ --blue-accent:var(--cyan-500); --blue-accent-soft:#142a30; --up:#34d399; --up-soft:#0c2419; --down:#f87171; --down-soft:#2a1416; --warn:#e0a63a; --warn-soft:#2a2110; /* Même famille "verre" que les surfaces ci-dessus (2026-10-07, 2ᵉ passe) : bordures/séparateurs solides indigo -> bordure blanche translucide, cohérente avec --nova-border partout où une carte en dérive. */ --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.07); --shadow-2:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); --shadow-3:0 2px 6px rgba(0,0,0,.45), 0 24px 48px rgba(0,0,0,.45); /* ============================================================ DESIGN TOKENS — MODULES NOVA (refonte visuelle, 2026-10-07) ============================================================ CORRECTIF (2026-10-07, 2ᵉ passe) : cette famille --nova-* a été pensée à l'origine comme SÉPARÉE de la palette générale du site (--bg/-2/-3 restaient une échelle indigo opaque) — c'est précisément ce qui donnait l'impression que "seules les cartes Nova appartiennent à un autre design" (retour utilisateur explicite de cette 2ᵉ passe). --bg-2/-3/-4 ci-dessus REPRENNENT maintenant exactement les mêmes valeurs que --nova-surface/-hover (blanc translucide), donc les deux familles sont désormais volontairement ALIGNÉES — --nova-* reste une famille à part uniquement pour porter les 5 couleurs de module (ci-dessous), jamais plus pour la surface/le fond elle-même. */ --nova-bg:#211A50; --nova-bg-deep:#19143E; --nova-surface:rgba(255,255,255,.075); --nova-surface-secondary:rgba(255,255,255,.05); --nova-surface-hover:rgba(255,255,255,.105); --nova-border:rgba(255,255,255,.08); --nova-text:#ffffff; --nova-text-secondary:rgba(255,255,255,.68); --nova-text-muted:rgba(255,255,255,.48); /* Une couleur par module (§4 de la demande) — mapping fixe partagé avec NOVA_FEATURES (ui-primitives.js), jamais réassigné au hasard si un module supplémentaire apparaît un jour (voir son commentaire). */ --nova-ai:#4D7CFF; --nova-bot:#805DFF; --nova-review:#E653A5; --nova-news:#6D94FF; --nova-event:#45C8FF; /* Verre du header/de la nav basse (§12/13, 2ᵉ passe) : même teinte de base que --nova-bg-deep (rgb(25,20,62)) pour que header et bottom nav "semblent appartenir au même système visuel" — seule l'opacité diffère (header plus opaque : il défile en permanence sur du contenu, la nav flotte surtout sur du vide en bas d'écran). */ --glass-header:rgba(25,20,62,.70); --glass-navigation:rgba(25,20,62,.55); --glass-icon:rgba(255,255,255,.09); /* CORRECTIF (2026-10-07, 2ᵉ passe) : .btn-a passe au blanc en thème sombre (voir plus bas) mais gardait ce halo ORANGE autour d'un bouton blanc — fuite orange décorative exactement du type visé par §3 ("CTA décoratifs"). Repris en bleu électrique (--accent). */ --shadow-accent:0 8px 24px rgba(77,124,255,.3); } *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} /* overflow-x:hidden ajouté ici le 2026-09-23 (bug réel trouvé en testant le temple sur une vraie largeur étroite, pas simulée) : body a déjà cette règle, mais le débordement symétrique de quelques px du temple (width:min(98vw,...) — vw inclut parfois la largeur de la scrollbar verticale selon le navigateur, un écart de quelques px avec document.documentElement.clientWidth est un artefact CSS connu, pas un vrai bug de layout) restait scrollable horizontalement au niveau du document malgré body{overflow-x:hidden}. */ html{-webkit-text-size-adjust:100%;overflow-x:hidden} html{background:var(--bg)} /* CORRECTIF (2026-10-07, §7 de la refonte Nova : "utiliser éventuellement un fond très subtil, un dégradé") : fond plat var(--bg) remplacé par un dégradé vertical TRÈS subtil entre --nova-bg (haut, légèrement plus clair) et --nova-bg-deep (bas) — uniquement en thème sombre, le thème clair reste un blanc plat comme avant (non concerné par cette demande). */ [data-theme="dark"] html{background:linear-gradient(180deg,var(--nova-bg) 0%,var(--nova-bg-deep) 100%) fixed} [data-theme="xxx"] body::before{ content:'';position:fixed;inset:0;pointer-events:none;z-index:0; background: radial-gradient(60% 40% at 50% -8%, rgba(120,140,255,.07), transparent 70%), radial-gradient(50% 35% at 90% 12%, rgba(0,200,140,.05), transparent 70%), radial-gradient(70% 50% at 8% 60%, rgba(140,120,255,.035), transparent 70%); } body{ /* CORRECTIF DESIGN (2026-09-17) : transparent plutôt que var(--bg) — le fond réel de la page est désormais .aurora-bg (voir plus bas), un calque fixe positionné SOUS le contenu. Chaque surface qui doit rester pleinement opaque (cartes, feuilles, nav) porte déjà sa propre couleur explicite (--bg/--bg-2/--bg-3) : rien ne dépendait du fond uni de body pour son opacité, vérifié avant ce changement. */ background:transparent;color:var(--ink);max-width:100vw; forced-color-adjust:none;font-family:var(--font);font-size:16px;line-height:1.5; -webkit-font-smoothing:antialiased;overflow-x:hidden;letter-spacing:-.011em; transition:background .3s var(--spring),color .3s var(--spring); } /* Fond animé (§2 du PRD : "un fond qui change de couleur, de belles transitions") — vérifié en direct sur www.novabourse.site, en clair ET en sombre, avant d'être intégré ici : les mêmes teintes fonctionnent dans les deux thèmes sans variante séparée. Fixe (jamais affecté par le scroll), z-index:0 : tout le contenu réel (nav, cartes, feuilles) reste au-dessus car aucun n'a de z-index négatif. Flou et opacité volontai- rement faibles : visible dans les espaces vides entre les éléments, jamais au point de nuire à la lisibilité d'une donnée financière — c'est un fond d'ambiance, pas un habillage qui prend le pas sur le contenu. prefers-reduced-motion coupe l'animation, jamais l'effet entier (le dégradé reste visible, simplement figé). */ .aurora-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none} /* CORRECTIF (2026-10-02, retour utilisateur : "un vrai fond complètement et seulement noire/blanche sur l'ensemble du site, sans rien d'autre") : ces 3 taches orange/cyan (::before/::after/.aurora-3, juste en dessous) dérivent sur TOUTE page, au-dessus du noir/blanc pur de html/body — c'est exactement la "couleur en plus" qui empêchait un fond vraiment uni. Désactivées (display:none, pas supprimées : réversible d'un mot si redemandé un jour) plutôt que recolorées, car aucune teinte de dégradé n'aurait satisfait "sans rien d'autre" — seule leur disparition le fait. */ .aurora-bg::before,.aurora-bg::after,.aurora-bg .aurora-3{display:none} /* CORRECTIF (bug visuel réel et grave, signalé par l'utilisateur — la barre de navigation du bas "décrochait" de sa position fixe pendant le défilement) : la rotation de teinte était animée sur .aurora-bg lui-même, un calque position:fixed;inset:0 couvrant TOUT le viewport — animer `filter` sur un calque fixe aussi grand crée une charge de composition énorme, connue pour perturber le rendu d'AUTRES éléments position:fixed sur la même page (notamment combinés à backdrop-filter, comme le dock). Déplacée sur chaque tache (déjà floutée, bien plus petite) : même effet visuel de "fond qui change de couleur", sans jamais animer `filter` sur l'intégralité du viewport. */ /* Flou réduit 110px -> 65px (2026-09-24, retour utilisateur : "le site est super lent et manque énormément de fluidité") : ces 3 taches sont PRÉSENTES SUR TOUTE PAGE (le fond de l'app entière) et animent déjà transform en continu — un blur() aussi large, recalculé à chaque déplacement de la tache (translate/scale, pas juste posé une fois), est probablement le plus gros poste de coût GPU permanent de tout le site. Les taches elles-mêmes restent énormes (55/50/38vw, inchangé) : à cette échelle, 65px de flou garde le même effet "fond d'ambiance diffus", vérifié en direct clair et sombre — jamais des bords nets visibles. */ .aurora-bg::before,.aurora-bg::after,.aurora-bg .aurora-3{content:"";position:absolute;border-radius:50%; filter:blur(65px);opacity:.32; animation:auroraDrift 26s ease-in-out infinite, auroraHue 60s linear infinite; will-change:transform} /* CORRECTIF (2026-10-13, audit V7 §6 : "des effets lumineux jaunes") : ce fond animé plein écran (2 taches floutées + une 3e en accent cyan) était resté orange par défaut depuis le pivot du 2026-09-28, jamais mis à jour quand --accent est devenu violet (voir note de palette tout en haut du fichier) — très probablement la source la plus VISIBLE de "jaune partout" (grande tache floutée animée derrière le contenu sur la plupart des pages), plus que les petits composants déjà corrigés. aurora-1/1b/2/2b suivent maintenant --violet-500/--violet-light/ --violet-700/--violet-500 — mêmes rôles structurels, cyan (accent secondaire, 3e touche) inchangé. Toujours personnalisable par section via body[data-bg=...] (paintNav()/render()). */ .aurora-bg::before{width:55vw;height:55vw;top:-18vw;left:-12vw; background:radial-gradient(circle,var(--aurora-1,#805dff) 0%,var(--aurora-1b,#9478ff) 45%,transparent 72%)} .aurora-bg::after{width:50vw;height:50vw;bottom:-22vw;right:-14vw;animation-delay:-13s; background:radial-gradient(circle,var(--aurora-2,#6b46f0) 0%,var(--aurora-2b,#805dff) 40%,transparent 72%)} .aurora-bg .aurora-3{width:38vw;height:38vw;top:38vh;left:32vw;animation-delay:-8s; animation-duration:32s;opacity:.24; background:radial-gradient(circle,var(--aurora-3,#00a8cc) 0%,var(--aurora-3b,#00d4ff) 45%,transparent 72%)} body[data-bg="portfolio"]{--aurora-1:#00a8cc;--aurora-1b:#00d4ff;--aurora-2:#805dff;--aurora-2b:#9478ff; --aurora-3:#00a8cc;--aurora-3b:#00d4ff} body[data-bg="account"]{--aurora-1:#8d95a4;--aurora-1b:#aeb4c0;--aurora-2:#646c7c;--aurora-2b:#9aa1b1; --aurora-3:#8d95a4;--aurora-3b:#aeb4c0} @keyframes auroraDrift{ 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(5vw,3vw) scale(1.06)} 66%{transform:translate(-3vw,5vw) scale(.97)} } /* CORRECTIF (2026-09-21, palette officielle) : une rotation complète sur 360° promenait chaque tache à travers TOUTES les teintes (le bleu devenait vert, puis jaune, puis rouge...) — "un fond qui change de couleur" au sens du PRD, mais qui abandonnait l'identité orange/bleu/ vert au fil du cycle. Oscillation resserrée (±18°) : le fond continue de "vivre" sans jamais quitter la famille de teinte de sa tache. */ @keyframes auroraHue{ 0%,100%{filter:blur(65px) hue-rotate(-18deg)} 50%{filter:blur(65px) hue-rotate(18deg)} } @media (prefers-reduced-motion:reduce){ .aurora-bg::before,.aurora-bg::after,.aurora-bg .aurora-3{animation:none} } button,input,select{font:inherit;color:inherit} button{border:none;background:none;cursor:pointer;transition:all .2s var(--spring)} button:active{transform:scale(.97)} .mono,.tabular-nums{font-variant-numeric:tabular-nums;letter-spacing:-.02em; font-feature-settings:'tnum' 1,'cv01' 1} .mono{font-family:var(--mono)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* CONTRAT (motion design premium, phase 1, 2026-10-15) : la règle générale ci-dessous ne suffit PAS à elle seule pour toute NOUVELLE animation ajoutée à partir de maintenant — elle réduit la durée à quasi-zéro mais ne touche ni animation-delay ni fill-mode:backwards/ forwards. Bug réel déjà rencontré avec cette seule règle : .page-in>* (fill-mode:backwards + delai) restait bloqué à opacity:0 indéfiniment sous réduction de mouvement (voir plus bas, correctif .page-in, .page-in>*{animation:none}). Toute animation d'entrée utilisant opacity:0 + backwards/forwards DOIT donc fournir SA PROPRE dérogation explicite (ex. .ma-classe{animation:none}), jamais compter sur cette seule règle générale. Une transition/animation purement décorative (couleur, ombre, fond) n'a besoin d'aucune dérogation supplémentaire, la règle générale suffit déjà pour elle. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} } .cap-i,.trio-i,.onb-i,.gate-i,.quick-ic,.empty-i,.ai-d,.flow-n,.onb-n, .logo-m,.icon-btn,.star,.info,.x,.av,.sq-ic{ display:flex; align-items:center; justify-content:center; line-height:0; flex-shrink:0; overflow:hidden; padding:0; text-align:center } .cap-i>svg,.trio-i>svg,.onb-i>svg,.gate-i>svg,.quick-ic>svg,.empty-i>svg, .logo-m>svg,.icon-btn>svg,.star>svg,.x>svg,.sq-ic>svg,.ai-d>svg{ display:block; margin:auto; flex:0 0 auto } .flow-n,.onb-n,.av,.ai-d,.info{line-height:1} /* --top-fade (2026-09-23, "que le dessus s'efface progressivement en descendant dans la page") : custom property globale (posée sur documentElement par un seul écouteur de scroll, voir wireHeaderFade() en JS — pas par page, une fois pour toute l'app) qui va de 1 (haut de page) à ~.15 après ~160px de défilement. Seul le FOND du bandeau s'estompe — jamais le logo/la nav/les boutons, qui restent à opacité pleine : un header devenu illisible en scrollant serait un vrai défaut d'accessibilité, pas juste un détail esthétique. Le flou (backdrop-filter) reste constant pour garder le texte lisible même quand le fond est presque transparent. */ .top{ position:sticky;top:0;z-index:50;background:rgba(255,255,255,calc(.72 * var(--top-fade,1))); /* Flou réduit 20px -> 14px (2026-09-24, retour utilisateur : "le site est super lent et manque énormément de fluidité") : le coût GPU d'un backdrop-filter croît avec le rayon de flou, et ce header sticky est présent sur TOUTE page — il recalcule ce flou à chaque frame de défilement, sur tout le contenu qui passe dessous. 14px garde un effet "verre dépoli" net à l'œil (vérifié en direct), pour une fraction du coût. */ backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line-2); padding-top:env(safe-area-inset-top); transition:background-color .1s linear; animation:topSlideIn .6s cubic-bezier(.22,1,.36,1) both; } /* Entrée au chargement (2026-09-23, retour utilisateur : "de la modernité et de l'animation, vraiment beaucoup" sur la nav) — courte et discrète (14px, pas un grand slide) pour ne pas retarder la lecture du contenu ; sticky+transform sont compatibles (le sticky ne régit que la position de scroll, pas le rendu du transform). */ @keyframes topSlideIn{ from{transform:translateY(-14px);opacity:0} to{transform:translateY(0);opacity:1} } /* CORRECTIF (2026-10-07, 2ᵉ passe, §12 : "le header doit ressembler davantage à la navigation flottante du bas [...] même système visuel") : rgba(8,9,12,...) était un noir neutre sans lien avec le reste de la palette — repris sur la même teinte indigo que .dock (--glass-header, rgb(25,20,62)) ; calc() ne peut pas décomposer une rgba() stockée dans une variable, d'où les canaux R/G/B recopiés en dur ici (valeur de base identique à --glass-header, voir son commentaire). --top-fade (opacité dynamique au scroll, pilotée en JS) inchangée. */ [data-theme="dark"] .top{background:rgba(25,20,62,calc(.70 * var(--top-fade,1)));border-bottom-color:rgba(255,255,255,.10)} .top-in{max-width:1120px;margin:0 auto;padding:10px 20px;display:flex;align-items:center; gap:12px;min-width:0} .logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px; letter-spacing:-.03em;flex:0 0 auto;white-space:nowrap} /* Retour utilisateur (2026-09-23) : "le logo sans la case blanche" — auparavant un badge plein (background:var(--ink), icône en color:var(--bg), donc une case CLAIRE en thème sombre) ; l'icône utilise déjà fill="currentColor" sur ses (voir le HTML du header), donc color:var(--ink) directement sur ce conteneur suffit à la faire correspondre au texte "NovaTitre" juste à côté, sans fond ni coin arrondi. */ .logo-m{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--ink); transition:transform .35s cubic-bezier(.22,1,.36,1)} .logo-m svg{width:40px;height:40px} .logo:hover .logo-m{transform:rotate(-10deg) scale(1.1)} .logo:active .logo-m{transform:rotate(-4deg) scale(.94)} /* CORRECTIF PERFORMANCE (2026-09-24, retour utilisateur : "le site est super lent et manque énormément de fluidité") : cette respiration animait box-shadow directement sur .logo-m — une propriété qui force un repaint à CHAQUE frame (jamais composée par le GPU), en boucle infinie, dans le header STICKY présent sur TOUTE page de l'app. Remplacé par un ::after dont le box-shadow est fixe (calculé une seule fois) et dont seule l'opacity est animée : opacity est une des deux propriétés (avec transform) que le navigateur peut animer sur son propre calque GPU sans jamais repeindre — même rendu visuel, coût de rendu proche de zéro au lieu d'un repaint continu partout dans l'app. */ .logo-m::after{content:"";position:absolute;inset:-5px;border-radius:50%; box-shadow:0 0 0 5px rgba(236,72,153,.16);opacity:0;pointer-events:none; animation:logoGlow 4.5s ease-in-out infinite} @keyframes logoGlow{ 0%,100%{opacity:0} 50%{opacity:1} } @media (prefers-reduced-motion:reduce){ .logo-m::after{animation:none} } @media (prefers-reduced-motion:reduce){ .top{animation:none} } /* Nav desktop — pilule glissante (2026-09-23, même technique FLIP que .dock-pill plus bas dans ce fichier, voir positionTopNavPill() en JS) : jusqu'ici les liens n'avaient qu'un hover/actif statique (couleur + fond instantanés, sans transition). position:relative sur .top-nav sert de repère pour la pilule absolue ; les liens passent en z-index:1 pour rester lisibles AU-DESSUS d'elle. */ .top-nav{display:flex;gap:2px;margin-left:var(--sp-3);position:relative} .top-nav-pill{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:100px; background:var(--bg-2);z-index:0;pointer-events:none; transition:transform .45s var(--spring),width .45s var(--spring)} .top-nav-pill.no-anim{transition:none} .top-nav a{position:relative;z-index:1;padding:8px 14px;border-radius:100px;font-size:14.5px;font-weight:500; color:var(--ink-3);transition:color .2s ease,transform .2s ease} .top-nav a:hover{color:var(--ink);transform:translateY(-1px)} .top-nav a[aria-current]{color:var(--ink);font-weight:600} @media (prefers-reduced-motion:reduce){ .top-nav-pill{transition:none} } .top-act{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0} #srcBadge{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden} .icon-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink-3); transition:background .2s ease,color .2s ease,transform .2s cubic-bezier(.22,1,.36,1)} .icon-btn:hover{background:var(--bg-2);color:var(--ink);transform:translateY(-1px) scale(1.08)} .icon-btn:active{transform:scale(.9)} .icon-btn svg{width:19px;height:19px} .dock{display:none} @media (max-width:900px){ .top-nav{display:none} /* REFONTE (2026-09-23, référence Revolut) — historique complet des 4 passes précédentes (géométrie générale, correction de surcorrection, verre dépoli) conservé dans l'historique git ; résumé utile ici : fond translucide rgba(10,14,35,.50) + backdrop-filter, bordure rgba(255,255,255,.10), dimensions validées par l'utilisateur ("la barre actuelle est bonne en dimensions, NE CHANGE PLUS sa taille") — hauteur/police/icônes de la PASSE 3 (font 11px, icône 22px, dock padding 6px) restent donc la référence, INCHANGÉES ici. PASSE 5 (même jour, fusion Marchés/Explorer, 6→5 onglets) — deux changements structurels demandés explicitement, qui ANNULENT le comportement "capsule dynamique" des passes 2-3 : 1) Explorer supprimée de la nav (fusionnée dans Marchés) : 6 destinations → 5. 2) Comportement de largeur inversé : "chaque position occupe 20%... aucun changement de largeur de l'onglet actif... aucun flex-grow dynamique" — flex:0 0 auto + padding élargi au clic (qui résolvait le débordement de "Portefeuille" à 6 colonnes égales) est donc retiré. flex:0 0 20% (colonnes strictement égales et FIXES, jamais recalculées) remplace flex:0 0 auto ; .dock button[aria-current] n'a plus de padding différent de ses voisins. Avec UNE destination de moins, "Portefeuille" retrouve assez de place dans une colonne à 20% fixe SANS avoir besoin de grandir — revérifié au canvas (mesure indépendante de la taille de fenêtre) et par simulation de largeur de conteneur à 320/340/350/360/375/ 390/393/414/430/768px (voir MOTION_SYSTEM.md) : la police de base (11px) suffit dès 386px environ, mais tombe juste en dessous du nécessaire à 360-375px avec seulement 5 colonnes fixes au lieu de 6 colonnes qui s'auto-dimensionnaient avant — d'où les 2 paliers étroits ci-dessous (nouveaux, remplacent l'unique palier ≤350px de la passe 3), chacun avec sa propre marge de sécurité mesurée, pas une simple règle de trois. RÉTABLIE (2026-09-28, retour utilisateur : "remets l'ancienne barre de navigation") — la variante pill-shaped NovaTitre (dégradé bleu nuit, bordure cyan, 28px, icônes 28px) est retirée ; cette géométrie capsule verre dépoli reprend son rôle. Reste du rebrand (palette orange/cyan, onboarding, Nova Explain, fiche action) inchangé. */ .dock{ display:flex;align-items:stretch; position:fixed;left:50%;transform:translateX(-50%); bottom:calc(12px + env(safe-area-inset-bottom));z-index:60; width:calc(100% - 20px);max-width:440px; /* CORRECTIF (2026-10-07, refonte visuelle §8 "harmoniser la nav avec le nouvel univers") : fond rgba(10,14,35,...) (quasi-noir) remplacé par la teinte indigo --nova-bg-deep (rgb(25,20,62)), pour que la barre flotte visiblement dans le même univers bleu nuit que le reste de la page plutôt que de retomber sur du noir — même transparence/flou/dimensions, INCHANGÉS (voir note ci-dessus, "NE CHANGE PLUS sa taille"). */ background:rgba(25,20,62,.55); backdrop-filter:blur(13px) saturate(120%); -webkit-backdrop-filter:blur(13px) saturate(120%); border:1px solid rgba(255,255,255,.10);border-radius:9999px; padding:6px 6px; box-shadow:0 8px 22px rgba(2,5,14,.45), 0 2px 6px rgba(10,20,45,.14) } /* 5 colonnes strictement égales et fixes (flex:0 0 20%, jamais recalculées selon l'onglet actif) — icône empilée sur libellé, c'est le PLUS LARGE des deux qui doit tenir dans 20% de la barre. */ .dock button{ position:relative;z-index:1; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; flex:0 0 20%;min-width:0;min-height:40px;padding:2px 3px;border-radius:9999px; color:rgba(255,255,255,.68); font-size:11px;font-weight:600;letter-spacing:-.01em; transition:color .25s ease-out } /* Priorité absolue : plus jamais de libellé coupé/en 2 lignes. nowrap + overflow visible (jamais overflow:hidden, qui masquerait un mot au lieu de le montrer en entier) — garanti par les colonnes à 20% dimensionnées pour "Portefeuille" (voir mesures ci-dessus et paliers responsive plus bas). */ .dock button span{display:block;white-space:nowrap;overflow:visible} .dock button svg{width:22px;height:22px;color:inherit; transition:transform .25s cubic-bezier(.22,1,.36,1),opacity .25s ease-out} .dock button[aria-current]{color:#fff} .dock button[aria-current] svg{transform:scale(1.05);animation:dockIconPop .45s cubic-bezier(.22,1,.36,1)} /* Rebond quand une icône DEVIENT active (2026-09-23, "vraiment beaucoup d'animation") : une animation CSS démarre quand l'élément se met à correspondre à une règle qui en porte une — donc seulement au vrai changement d'onglet, jamais à un simple re-render, grâce à syncActiveAttr() en JS qui ne touche plus aria-current que lorsqu'il change réellement (voir sa note). Sans fill-mode: retombe proprement sur le transform:scale(1.05) statique juste au-dessus une fois finie, pas de saut visible. */ @keyframes dockIconPop{ 0%{transform:scale(1)} 45%{transform:scale(1.24)} 100%{transform:scale(1.05)} } .dock button:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:2px;border-radius:9999px} /* 2 paliers étroits (voir note plus haut) : seule la police/icône/le padding du dock changent, jamais les colonnes à 20% ni le comportement "fixe" de la barre. */ @media (max-width:385px){ .dock{width:calc(100% - 16px);padding:5px 5px} .dock button{font-size:10px;gap:3px} .dock button svg{width:20px;height:20px} } @media (max-width:340px){ .dock{width:calc(100% - 14px);padding:4px 4px} .dock button{font-size:9px;gap:3px} .dock button svg{width:18px;height:18px} } /* Pilule active glissante (technique inchangée depuis le 21/09, voir positionDockPill() en JS) : un seul élément partagé, jamais recréé, repositionné en transform/width à chaque changement d'onglet — la MÊME pilule glisse d'un onglet à l'autre, ne disparaît/réapparaît jamais. Sa largeur vaut désormais TOUJOURS 20% de la barre (les 5 boutons ont maintenant tous la même largeur fixe) — positionDockPill() n'a pas eu besoin de changer, il lit toujours offsetLeft/offsetWidth du bouton actif, qui se trouve juste être constant maintenant. top/bottom:3px la garde clairement PLUS PETITE que la barre extérieure (respiration haut/bas, comme sur la référence). */ .dock-pill{position:absolute;top:3px;bottom:3px;left:0;border-radius:9999px; background:rgba(255,255,255,.12); z-index:0;pointer-events:none; transition:transform .3s cubic-bezier(.22,1,.36,1), width .3s cubic-bezier(.22,1,.36,1); will-change:transform,width} .dock-pill.no-anim{transition:none} } @media (prefers-reduced-motion:reduce){ .dock-pill{transition:none} .dock button svg{transition:none} .dock button{transition:none} .dock button[aria-current] svg{animation:none} } .wrap{max-width:1120px;margin:0 auto;padding:var(--sp-4) 22px calc(var(--sp-6) + 40px)} .section{margin-top:96px} .section:first-child{margin-top:0} .section-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);margin-bottom:var(--sp-3)} /* CORRECTIF DESIGN (2026-09-22, inspiration Revolut) : consulté revolut.com en direct — leurs plus gros titres ("Banking & Beyond") sont nettement plus massifs à taille égale que notre 700 (Inter en charge déjà 800/900, jamais utilisé). Réservé au SEUL .display (les accroches les plus visibles : accueil, écran de connexion) — .title, utilisé partout comme H1 de page, reste à 700 pour garder une vraie hiérarchie entre les deux. */ .display{font-size:var(--t-display);font-weight:800;letter-spacing:-.04em;line-height:var(--lh-tight)} .title{font-size:var(--t-title);font-weight:700;letter-spacing:-.032em;line-height:var(--lh-title)} .h2{font-size:var(--t-h2);font-weight:650;letter-spacing:-.024em} .h3{font-size:var(--t-h3);font-weight:600;letter-spacing:-.018em} .lead{font-size:17px;color:var(--ink-3);line-height:var(--lh-body);letter-spacing:-.01em} .small{font-size:var(--t-small);color:var(--ink-3);line-height:var(--lh-body)} .tiny{font-size:var(--t-micro);color:var(--ink-4);line-height:1.5} .eyebrow{font-size:var(--t-label);font-weight:600;letter-spacing:.02em;color:var(--accent);text-transform:none} .center{text-align:center} .measure{max-width:34ch} .measure-l{max-width:58ch} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:var(--tap);padding:13px 26px;border-radius:var(--r-pill); font-size:var(--t-body);font-weight:600;letter-spacing:-.012em;white-space:nowrap; transition:background var(--fast) ease,color var(--fast) ease, box-shadow var(--fast) ease,transform var(--fast) ease,opacity var(--fast) ease} .btn:active{transform:scale(.985)} .btn:disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none} .btn svg{width:17px;height:17px} /* Dégradé rose animé (2026-09-22, spec exacte fournie ; recoloré 2026-09-23 orange -> rose, voir note de palette tout en haut) : reproduit tel quel sur le bouton primaire — celui qui doit porter la personnalité de la marque, comme demandé ("Primary = Rose toujours"). background-size:200% 200% est nécessaire pour que l'animation de background-position soit réellement visible (un dégradé qui correspond exactement aux dimensions du bouton n'a nulle part où "se déplacer"). Coupée sous prefers-reduced-motion comme toutes les animations infinies de ce fichier (la leçon du fond aurora, plus haut, documente pourquoi une durée quasi nulle plutôt qu'un arrêt franc a déjà causé un vrai bug cette session). */ .btn-a{background:linear-gradient(135deg,var(--accent) 0%,var(--accent-hover) 100%); background-size:200% 200%;animation:gradientShift 4s ease-in-out infinite; color:var(--accent-ink);box-shadow:var(--shadow-accent)} @keyframes gradientShift{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @media (prefers-reduced-motion:reduce){ .btn-a{animation:none} } .btn-a:hover{background:var(--accent-hover)} .btn-a:active{background:var(--accent-press)} .btn-s{background:var(--bg-2);color:var(--ink)} .btn-s:hover{background:var(--bg-3)} /* CORRECTIF (2026-10-02, retour utilisateur : "le fond soit entierement noire et sans autre couleur [...] tous les boutons soit tous blanc et tous les textes soit blanc", confirmé pour TOUS les boutons y compris les CTA orange) : en thème sombre, tout bouton plein devient blanc/ texte noir, plus aucune couleur d'accent (orange/cyan) — survol/appui via opacity uniquement, jamais une autre teinte. */ [data-theme="dark"] .btn-a{background:#fff;color:#000;animation:none} [data-theme="dark"] .btn-a:hover,[data-theme="dark"] .btn-a:active{background:#fff;opacity:.85} [data-theme="dark"] .btn-s{background:#fff;color:#000} [data-theme="dark"] .btn-s:hover{background:#fff;opacity:.85} /* Bouton secondaire cyan (2026-09-22, composant demandé par le brief ; recoloré 2026-09-28 pour le pivot NovaTitre : violet -> cyan #00D4FF, voir note de palette tout en haut) — jamais utilisé comme accent général : réservé à une action secondaire précise qui mérite de se distinguer sans rivaliser avec l'orange primaire. Appliqué à "Vendre" sur la fiche action (voir PAGES.stock) : une vraie seconde action, pas juste "moins importante qu'Acheter" — le cyan porte ce sens mieux qu'un simple gris. color:var(--bg-dark-ink) plutôt que blanc : #00D4FF est trop clair pour porter un texte blanc lisible (conforme à la spec NovaTitre : texte #0A0E27 sur fond cyan). */ .btn-blue{background:var(--blue-accent);color:var(--bg-dark-ink)} .btn-blue:hover{filter:brightness(1.1)} .btn-blue-outline{background:transparent;color:var(--blue-accent); box-shadow:inset 0 0 0 1.5px var(--blue-accent)} .btn-blue-outline:hover{background:var(--blue-accent-soft)} .btn-g,.btn-ghost{background:transparent;color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line)} .btn-g:hover,.btn-ghost:hover{background:var(--bg-2);color:var(--ink)} .btn-p{background:var(--ink);color:var(--bg)} .btn-p:hover{opacity:.88} /* CORRECTIF (2026-10-02) : voir la note complète plus haut (.btn-a/ .btn-s) — même principe pour les boutons secondaires/outline/ghost. */ [data-theme="dark"] .btn-blue{background:#fff;color:#000} [data-theme="dark"] .btn-blue:hover{background:#fff;opacity:.85;filter:none} [data-theme="dark"] .btn-blue-outline{color:#fff;box-shadow:inset 0 0 0 1.5px #fff} [data-theme="dark"] .btn-blue-outline:hover{background:rgba(255,255,255,.12)} [data-theme="dark"] .btn-g,[data-theme="dark"] .btn-ghost{color:#fff;box-shadow:inset 0 0 0 1px #fff} [data-theme="dark"] .btn-g:hover,[data-theme="dark"] .btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff} .btn-sm{min-height:38px;padding:9px 18px;font-size:var(--t-small)} .btns{display:flex;gap:10px;flex-wrap:wrap} /* CORRECTIF DESIGN (2026-09-17) : vérifié en direct sur www.novabourse.site avant d'être intégré — depuis l'ajout du fond animé (.aurora-bg), une carte plate en background:var(--bg-2) (un gris très proche du fond clair) devenait presque indissociable de l'arrière-plan, surtout dans les zones les plus claires du dégradé. Traitement "verre dépoli" : fond semi-transparent + flou, comme le bandeau de navigation (.top) le fait déjà avec succès — une carte laisse transparaître une pointe de couleur du fond plutôt que de s'y noyer, tout en restant nettement plus contrastée que lui. background-color (jamais juste `background`) pour ne pas écraser un dégradé éventuel posé par une règle plus spécifique ailleurs (ex. .buy-card). Flou réduit 24px -> 16px (2026-09-24, retour utilisateur : "le site est super lent et manque énormément de fluidité") : .card est le composant le plus répété de tout le fichier — souvent plusieurs par page — un flou aussi large multiplié par carte est un vrai coût GPU cumulé. 16px garde le même effet "verre dépoli" à l'œil (vérifié en direct), pour une fraction du coût par carte. */ .card{background-color:rgba(255,255,255,.6);backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(255,255,255,.8); border-radius:var(--r-l);padding:var(--card-pad); box-shadow:0 1px 2px rgba(13,17,23,.05),0 16px 40px rgba(236,72,153,.10)} /* CORRECTIF (2026-10-07, 2ᵉ passe, retour utilisateur : "seules les cartes Nova sont plus claires [...] ça donne l'impression qu'elles appartiennent à un autre design") : rgba(22,26,33,...) était un gris neutre quasi noir, sans AUCUN lien avec la teinte indigo du fond — la carte la plus utilisée du site (.card, 50+ emplacements : Ma liste, Marché, Radar, Comparateur, Portefeuille...) semblait donc "importée" d'un autre thème. Repris sur --bg-2/--line (même famille "verre blanc translucide sur fond indigo" que les cartes Nova, voir leur grand commentaire plus haut) : TOUTE carte du site appartient maintenant à la même famille visuelle. */ [data-theme="dark"] .card{background-color:var(--bg-2);border-color:var(--line); box-shadow:0 1px 2px rgba(0,0,0,.3),0 16px 40px rgba(0,0,0,.4)} .card-flat{background:var(--bg-2);border-radius:var(--r-l);padding:var(--card-pad)} .card-lift{transition:background var(--slow) var(--ease)} .card-lift:hover{background:var(--bg-3)} .card-white{background:var(--bg);box-shadow:var(--shadow-2)} .grid{display:grid;gap:var(--space-4)} .g-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .g-3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .g-4{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))} .field{width:100%;padding:15px 18px;border-radius:var(--r-s);background:var(--bg-2); border:1.5px solid transparent;min-height:var(--tap);font-size:var(--t-body); transition:border-color var(--fast) ease,background var(--fast) ease} .field:focus{outline:none;border-color:var(--accent);background:var(--bg)} .field::placeholder{color:var(--ink-4)} .field[aria-invalid="true"]{border-color:var(--down)} .seg{display:inline-flex;position:relative;padding:4px;background:var(--bg-2);border-radius:var(--r-pill); gap:3px;max-width:100%;overflow-x:auto;scrollbar-width:none} .seg::-webkit-scrollbar{display:none} .seg button{position:relative;z-index:1;padding:9px 18px;border-radius:var(--r-pill);font-size:var(--t-small); font-weight:550;color:var(--ink-3);white-space:nowrap;min-height:38px; transition:color var(--fast) ease} .seg button[aria-pressed="true"]{color:var(--ink);font-weight:600} /* Curseur glissant (motion system, 2026-09-21) : voir syncSegPill() (JS). Contrairement au dock (élément d'app-shell jamais recréé), un .seg vit dans une page entièrement reconstruite à chaque changement — donc pas d'élément "persistant" possible ici. Solution FLIP (First-Last-Invert- Play) à la place : syncSegPill() écrit explicitement la position de DÉPART en style inline (sans transition), force un reflow synchrone, puis écrit la position D'ARRIVÉE (avec transition) — le navigateur anime le changement de style qu'il vient d'observer, que l'élément qui le porte soit "nouveau" ou non ; ce n'est PAS le même besoin que le dock (élément persistant + transition passive), qui ne se serait pas appliqué ici. */ .seg-pill{position:absolute;top:4px;bottom:4px;left:0;border-radius:var(--r-pill); background:var(--bg);box-shadow:var(--shadow-2);z-index:0;pointer-events:none; transition:transform .35s var(--spring),width .35s var(--spring)} @media (prefers-reduced-motion:reduce){ .seg-pill{transition:none} } /* CORRECTIF (audit complet 2026-09-17) : .sw avait une première définition ici, entièrement écrasée par la seconde plus bas dans ce fichier (aucun balisage n'a de sélecteur plus spécifique) — code mort supprimé pour ne garder qu'une seule source de vérité. */ .divider{height:1px;background:var(--line-2);margin:var(--space-5) 0;border:none} .sk{background:linear-gradient(90deg,var(--bg-2) 25%,var(--bg-3) 50%,var(--bg-2) 75%); background-size:200% 100%;animation:sk 1.4s linear infinite;border-radius:var(--r-s);display:block} @keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}} :focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:var(--r-xs)} .tag{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:100px; font-size:12.5px;font-weight:600;white-space:nowrap;letter-spacing:-.01em} .tag-up{background:var(--up-soft);color:var(--up)} .tag-down{background:var(--down-soft);color:var(--down)} .tag-warn{background:var(--warn-soft);color:var(--warn)} .tag-neutral{background:var(--bg-3);color:var(--ink-3)} /* Liste d'actualités (Nova News, 2026-09-25, retour utilisateur : "pas très beau" + "on ne voit pas le texte entièrement") — .row/.row-t (white-space:nowrap + ellipsis) sont conçus pour UNE ligne courte (nom de société), pas pour un vrai titre d'article, souvent une phrase complète : les gros titres se retrouvaient tronqués "…" au lieu de se présenter sur 2-3 lignes. Composant dédié plutôt qu'un `.row` détourné de son usage — mêmes jetons de design (var(--bg-2)/--line-2/--r-s...) que le reste du fichier, pas un style isolé. */ .news-list{display:flex;flex-direction:column} /* .news-item-img (2026-09-25, retour utilisateur : "possibilité d'ajouter des photos") : uniquement quand le flux source en fournit réellement une (Yahoo Finance systématiquement, CNBC jamais — voir imageRss() côté serveur) — un article sans image garde simplement le layout texte seul, jamais une image de remplacement inventée. */ .news-item{display:flex;align-items:flex-start;gap:14px;padding:16px 4px; border-bottom:1px solid var(--line-2);color:inherit;text-decoration:none; /* Motion design premium, phase 2 (2026-10-15) : survol sans transition (changement de fond instantané) et aucun état :active, lacune confirmée par audit — background-color uniquement, même principe que .row:hover (jamais padding/margin, qui restent du changement de mise en page). */ transition:background-color var(--fast) ease} .news-item:last-child{border-bottom:none} .news-item:hover{background:var(--bg-2);border-radius:var(--r-s);padding-left:12px;padding-right:12px; margin-left:-12px;margin-right:-12px;border-color:transparent} .news-item:active{transform:scale(.99)} .news-item-img{width:96px;height:72px;object-fit:cover;border-radius:var(--r-s); flex:0 0 auto;background:var(--bg-3)} .news-item-body{flex:1;min-width:0} .news-item-title{display:block;font-size:16px;font-weight:650;letter-spacing:-.015em; line-height:1.4;color:var(--ink);white-space:normal;overflow:visible} .news-item-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px} @media (max-width:520px){ .news-item-img{width:72px;height:72px} } .tag-accent{background:var(--accent-soft);color:var(--accent)} /* CORRECTIF (audit de cohérence visuelle, 2026-09-21) : .tag-violet, jamais utilisé dans le balisage, référençait --violet/--cyan-soft — également jamais définis nulle part. Contrairement à .ai-dot ci-dessus, rien n'indique à quoi cette variante était destinée ; .tag-accent couvre déjà le seul cas "puce colorée avec la couleur de marque". Supprimée plutôt qu'inventée. */ .up-t{color:var(--up)} .down-t{color:var(--down)} .hero{padding:var(--sp-5) 0 var(--sp-4);text-align:center} .hero .display{margin:0 auto;max-width:16ch} .hero .lead{margin:var(--sp-3) auto 0;max-width:52ch} .hero-btns{margin-top:var(--sp-4);display:flex;gap:var(--sp-1);justify-content:center;flex-wrap:wrap} .hero-note{margin-top:var(--sp-2);font-size:12.5px;color:var(--ink-4)} .trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-2); margin-top:var(--sp-5)} .trio-c{padding:var(--sp-3);border-radius:var(--r-m);background:var(--bg-2);text-align:center} .trio-i{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin:0 auto var(--sp-1); background:var(--bg);box-shadow:var(--shadow-1);color:var(--accent)} .trio-i svg{width:21px;height:21px} .trio-c b{display:block;font-size:15px;font-weight:650;letter-spacing:-.02em} .trio-c span{display:block;font-size:13px;color:var(--ink-3);margin-top:4px;line-height:1.45} .search-btn{display:flex;align-items:center;gap:11px;width:100%;max-width:520px;margin:var(--sp-3) auto 0; padding:15px 20px;border-radius:100px;background:var(--bg-2);color:var(--ink-4);font-size:15.5px; text-align:left;border:1px solid transparent; transition:background .25s var(--spring),border-color .25s var(--spring), box-shadow .25s var(--spring),transform .25s var(--spring)} .search-btn:hover{background:var(--bg);border-color:var(--line);box-shadow:var(--shadow-2); transform:translateY(-2px)} .search-btn:active{transform:scale(.99)} .search-btn svg{width:18px;height:18px;flex:0 0 auto} .search-btn span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .search-btn kbd{font-family:var(--mono);font-size:12px;padding:3px 8px;border-radius:7px; background:var(--bg-3);color:var(--ink-4)} .rows{display:flex;flex-direction:column} .row{display:flex;align-items:center;gap:var(--sp-2);width:100%;padding:14px 0;text-align:left; border-bottom:1px solid var(--line-2);min-height:var(--tap);min-width:0; /* Motion design premium, phase 1 (2026-10-15) : .row:hover existait déjà (ligne suivante) mais sans transition -- le fond changeait d'un coup. background-color UNIQUEMENT (jamais padding/margin, qui restent du changement de mise en page) : une liste longue (Portefeuille, Watchlist) ne doit jamais animer une propriété de layout sur chaque ligne. */ transition:background-color var(--fast) ease} /* CORRECTIF (2026-09-25, trouvé en testant Nova News) : `.row` sert aussi bien à un