/* ========================================================= MJ INVEST — Design System Style: outil gratuit, avant-gardiste, sombre, direct ========================================================= */ :root{ --bg:#0a0a0b; --bg-2:#141415; --surface:rgba(255,255,255,0.045); --surface-2:rgba(255,255,255,0.08); --border:rgba(255,255,255,0.13); --border-strong:rgba(255,255,255,0.28); --text:#f5f5f3; --text-soft:#b0aea7; --text-dim:#726f6a; --accent:#ffcc00; --accent-ink:#0a0a0a; --accent-2:#ffcc00; --accent-3:#ffe066; --grad:var(--accent); --grad-soft:rgba(255,204,0,.12); --up:#34d399; --down:#f87171; --radius:4px; --radius-sm:3px; --maxw:1200px; --ease:cubic-bezier(.19,1,.22,1); --font:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",Arial,sans-serif; --mono:ui-monospace,"SF Mono","JetBrains Mono","Roboto Mono",Menlo,Consolas,monospace; } /* Mode clair — activé via [data-theme="light"] sur (voir script.js pour la bascule + assets/theme-boot.js pour l'application anti-flash). --accent/--up/--down restent personnalisables par-dessus (surcharges inline posées sur ), indépendamment du mode clair/sombre. */ :root[data-theme="light"]{ --bg:#f7f6f3; --bg-2:#eeece7; --surface:rgba(10,10,11,0.035); --surface-2:rgba(10,10,11,0.06); --border:rgba(10,10,11,0.11); --border-strong:rgba(10,10,11,0.22); --text:#16161a; --text-soft:#4d4b46; --text-dim:#83807a; --up:#047857; --down:#b91c1c; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} /* ---------- Background ---------- */ /* Fond plat et net : pas de dégradés animés, pas de glow curseur — un outil se lit vite, il ne fait pas de démonstration visuelle. */ .bg-mesh{position:fixed;inset:0;z-index:-2;background:var(--bg)} .bg-grid{display:none} .cursor-glow{display:none} /* ---------- Layout ---------- */ .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px} section{position:relative;z-index:1} .section-pad{padding:120px 0} .section-pad-sm{padding:80px 0} /* ---------- Header ---------- */ .header{ position:fixed;top:0;left:0;right:0;z-index:100; transition:background .3s var(--ease),border-color .3s var(--ease),padding .3s var(--ease); padding:16px 0;border-bottom:1px solid transparent; } .header.scrolled{ padding:8px 0; background:var(--bg); border-bottom:1px solid var(--border-strong); } .nav{display:flex;align-items:center;justify-content:space-between;gap:20px} .brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px;letter-spacing:-.01em} .brand .dot{color:var(--accent)} .brand svg{width:36px;height:36px;flex-shrink:0} .brand-txt{display:flex;flex-direction:column;gap:2px;line-height:1.1} .brand-tagline{font-size:9px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap} @media(max-width:480px){.brand-tagline{display:none}} /* Liens principaux : mono, majuscules, séparateurs verticaux */ .nav-links{display:flex;align-items:center;gap:0;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em} .nav-links > .nl-item{position:relative;border-left:1px solid var(--border)} .nav-links a,.nav-links button.nl-trig{ display:flex;align-items:center;gap:6px;padding:0 15px;height:40px;color:var(--text-soft); background:none;border:0;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit; transition:color .15s,background .15s;white-space:nowrap; } .nav-links a:hover,.nav-links button.nl-trig:hover,.nl-item.open button.nl-trig{color:var(--text);background:var(--surface-2)} .nav-links a.active{color:var(--accent-ink);background:var(--accent);font-weight:700} .nl-trig svg{width:8px;height:8px;transition:transform .2s var(--ease)} .nl-item.open .nl-trig svg{transform:rotate(180deg)} .nl-dropdown{ position:absolute;top:calc(100% + 1px);left:0;min-width:230px;background:var(--bg-2); border:1px solid var(--border-strong);opacity:0;visibility:hidden;transform:translateY(-4px); transition:opacity .16s,transform .16s,visibility .16s;z-index:10; } .nl-item.open .nl-dropdown{opacity:1;visibility:visible;transform:translateY(0)} .nl-item.current > .nl-trig{color:var(--accent-ink);background:var(--accent);font-weight:700} .nl-dropdown a{ display:block;height:auto;padding:12px 14px;border-bottom:1px solid var(--border); text-transform:none;letter-spacing:0;font-family:var(--font); } .nl-dropdown a:last-child{border-bottom:0} .nl-dropdown a:hover{background:var(--accent);color:var(--accent-ink)} .nl-dropdown a .t{font-size:14px;font-weight:600;display:block} .nl-dropdown a .d{display:block;font-size:11px;color:var(--text-dim);margin-top:3px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.02em} .nl-dropdown a:hover .d{color:var(--accent-ink);opacity:.8} .nl-group-label{padding:10px 14px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);font-family:var(--mono)} .nav-cta{display:flex;align-items:center;gap:12px} /* Uniformise la hauteur de tous les éléments cliquables du header (liens de nav, boutons CTA, icônes) sans toucher .btn ailleurs sur le site. */ .nav-cta .btn{height:40px;padding:0 20px} .burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px} .burger span{width:22px;height:2px;background:var(--text);transition:.3s var(--ease)} /* Panneau mobile plein écran, accordéon */ .mobile-panel{display:none;position:fixed;inset:0;z-index:150;background:var(--bg);overflow-y:auto;padding-top:74px} .mobile-panel.open{display:block} .mp-item{border-bottom:1px solid var(--border)} .mp-item>a,.mp-item>button{ width:100%;display:flex;align-items:center;justify-content:space-between;padding:20px 24px; font-family:var(--font);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--text); background:none;border:0;text-align:left; } .mp-item>button svg{width:10px;height:10px;transition:transform .2s} .mp-item.open>button svg{transform:rotate(180deg)} .mp-sub{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);background:var(--surface)} .mp-item.open .mp-sub{max-height:400px} .mp-sub a{display:block;padding:14px 24px 14px 36px;font-size:14.5px;color:var(--text-soft)} .mp-group-label{padding:12px 24px 4px 36px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);font-family:var(--mono)} .mp-foot{padding:18px 24px 32px;display:flex;flex-direction:column;gap:0} .mp-foot a.mp-text{font-family:var(--mono);text-transform:uppercase;font-size:12.5px;letter-spacing:.04em;padding:15px 0;border-bottom:1px solid var(--border);color:var(--text-soft)} .mp-foot .btn{margin-top:16px;justify-content:center} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:9px; padding:14px 24px;border-radius:var(--radius);font-weight:700;font-size:13px; font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em; border:1px solid transparent;cursor:pointer; transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease); white-space:nowrap; } .btn-primary{background:var(--accent);color:var(--accent-ink)} .btn-primary:hover{background:var(--text)} .btn-ghost{background:transparent;color:var(--text);border-color:var(--border-strong)} .btn-ghost:hover{background:var(--surface-2);border-color:var(--text)} .btn-lg{padding:16px 30px;font-size:13.5px} /* ---------- Typography ---------- */ .eyebrow{ display:inline-flex;align-items:center;gap:9px; font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--text-dim);margin-bottom:22px; } .eyebrow::before{content:"";width:6px;height:6px;background:var(--accent)} h1,h2,h3{line-height:1.06;letter-spacing:-.02em;font-weight:800} .h-hero{font-size:clamp(38px,6.2vw,78px);font-weight:800;letter-spacing:-.03em} .h-sec{font-size:clamp(30px,4.2vw,50px)} .h-card{font-size:20px;letter-spacing:-.01em;font-weight:700} .grad-text{background:var(--accent);color:var(--accent-ink);padding:0 6px;box-decoration-break:clone;-webkit-box-decoration-break:clone} .lead{font-size:clamp(16px,1.7vw,18.5px);color:var(--text-soft);max-width:62ch} .muted{color:var(--text-soft)} .dim{color:var(--text-dim)} .center{text-align:center} .center .lead{margin-left:auto;margin-right:auto} /* ---------- Hero ---------- */ .hero{padding-top:150px;padding-bottom:0;border-bottom:1px solid var(--border)} .hero-inner{max-width:820px;padding-bottom:56px} .hero .lead{margin-top:22px} .hero-actions{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap;align-items:center} .hero-stats{display:flex;gap:0;margin-top:56px;flex-wrap:wrap;border-top:1px solid var(--border)} .hero-stats .stat{padding:20px 28px 0 0;min-width:0} .hero-stats .stat + .stat{border-left:1px solid var(--border);padding-left:28px} @media(max-width:480px){ .hero-stats .stat{flex:1 1 40%;border-left:0!important;padding-left:0!important;padding-right:20px} } .stat .num{font-size:clamp(26px,3.2vw,36px);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .stat .lbl{font-size:11.5px;color:var(--text-dim);margin-top:4px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em} .scroll-hint{display:none} /* Grille des outils (accueil) */ .tools-strip{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--border)} .tool-card{padding:26px 22px;border-right:1px solid var(--border);border-top:2px solid var(--text);transition:background .15s} .tool-card:last-child{border-right:0} .tool-card:hover{background:var(--surface)} .tool-card .num{font-family:var(--mono);font-size:11px;color:var(--accent);font-weight:800;letter-spacing:.05em} .tool-card h3{font-size:17px;font-weight:800;margin:14px 0 8px;letter-spacing:-.01em} .tool-card p{font-size:13px;color:var(--text-soft);margin:0;line-height:1.5} .tool-card .go{margin-top:14px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim)} @media(max-width:800px){.tools-strip{grid-template-columns:1fr 1fr}.tool-card:nth-child(2){border-right:0}.tool-card:nth-child(4){border-right:0}} @media(max-width:480px){.tools-strip{grid-template-columns:1fr}.tool-card{border-right:0!important}} /* Bloc manifeste "Pourquoi gratuit" */ .manifesto{padding:70px 0;border-bottom:1px solid var(--border)} .manifesto .grid{display:grid;grid-template-columns:200px 1fr;gap:36px} .manifesto .lbl{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);padding-top:6px} .manifesto h2{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.01em;margin:0 0 16px;text-wrap:balance} .manifesto p{font-size:15px;color:var(--text-soft);max-width:62ch;margin:0} .manifesto .tags{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap} .manifesto .tags span{font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;background:var(--text);color:var(--bg);padding:6px 12px} @media(max-width:700px){.manifesto .grid{grid-template-columns:1fr;gap:14px}} /* ---------- Section header ---------- */ .sec-head{max-width:720px;margin-bottom:64px} .sec-head.center{margin-left:auto;margin-right:auto} /* ---------- Cards / grids ---------- */ .grid{display:grid;gap:22px} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:28px;transition:border-color .2s var(--ease),background .2s var(--ease); position:relative; } .card:hover{border-color:var(--border-strong);background:var(--surface-2)} .card .ic{ width:48px;height:48px;border-radius:var(--radius-sm);display:grid;place-items:center;margin-bottom:18px; background:var(--surface-2);border:1px solid var(--border);font-size:22px; } .card h3{margin-bottom:10px} .card p{color:var(--text-soft);font-size:15px} .card .tag{font-family:var(--mono);font-size:11px;color:var(--accent);font-weight:700;letter-spacing:.05em;text-transform:uppercase} /* numbered steps */ .step .nstep{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.05em;margin-bottom:14px} /* feature split */ .split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} .split .visual{ border-radius:var(--radius);border:1px solid var(--border);background:var(--surface); padding:36px;min-height:340px;position:relative;overflow:hidden; } /* pricing / solutions */ .plan{display:flex;flex-direction:column;height:100%} .plan .price{font-size:34px;font-weight:700;margin:8px 0 4px;letter-spacing:-.02em} .plan ul{list-style:none;margin:22px 0;display:flex;flex-direction:column;gap:12px} .plan li{display:flex;gap:11px;font-size:14.5px;color:var(--text-soft)} .plan li::before{content:"✓";color:var(--accent);font-weight:700} .plan.featured{border-color:var(--accent);background:var(--surface-2)} .plan .badge{position:absolute;top:18px;right:18px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);padding:5px 11px;border-radius:var(--radius-sm)} .plan .btn{margin-top:auto} /* article cards */ .article{display:flex;flex-direction:column;height:100%} .article .thumb{height:170px;border-radius:var(--radius-sm);margin-bottom:20px;background:var(--grad-soft);position:relative;overflow:hidden;display:grid;place-items:center;font-size:46px;border:1px solid var(--border)} .article .meta{font-size:12.5px;color:var(--text-dim);letter-spacing:1px;text-transform:uppercase;margin-bottom:10px} .article h3{font-size:19px;margin-bottom:10px} .article .readmore{margin-top:auto;color:var(--accent);font-weight:600;font-size:14px;display:inline-flex;gap:6px;transition:gap .25s var(--ease)} .article:hover .readmore{gap:12px} /* faq */ .faq-item{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:14px;background:var(--surface);overflow:hidden} .faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 26px;cursor:pointer;font-weight:600;font-size:16.5px} .faq-q .pm{color:var(--accent);font-size:22px;transition:transform .3s var(--ease)} .faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);color:var(--text-soft);font-size:15px} .faq-a p{padding:0 26px 22px} .faq-item.open .faq-q .pm{transform:rotate(45deg)} /* cta band */ .cta-band{ border:1px solid var(--border);border-radius:var(--radius);padding:64px 40px;text-align:center; background:var(--surface);position:relative; } /* timeline / about */ .tl{display:flex;flex-direction:column;gap:0;border-left:1px solid var(--border);margin-left:8px} .tl-item{padding:0 0 38px 32px;position:relative} .tl-item::before{content:"";position:absolute;left:-7px;top:4px;width:13px;height:13px;background:var(--accent);box-shadow:0 0 0 4px var(--bg)} .tl-item .yr{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:700;letter-spacing:.05em} .tl-item h3{font-size:18px;margin:6px 0 8px} /* values list */ .value{display:flex;gap:18px;align-items:flex-start} .value .ic{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--grad-soft);border:1px solid var(--border);font-size:20px} /* form */ .form{display:grid;gap:18px;max-width:560px} .field{display:flex;flex-direction:column;gap:8px} .field label{font-size:13.5px;color:var(--text-soft);font-weight:500} .field input,.field select,.field textarea{ background:var(--surface);border:1px solid var(--border);border-radius:12px; padding:14px 16px;color:var(--text);font-family:inherit;font-size:15px;transition:.25s var(--ease); } .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:var(--surface-2);box-shadow:0 0 0 3px rgba(255,204,0,.16)} .field textarea{resize:vertical;min-height:130px} .form-note{font-size:12.5px;color:var(--text-dim)} .form-success{display:none;padding:16px 18px;border-radius:12px;background:var(--grad-soft);border:1px solid var(--accent);color:var(--text);font-size:14.5px} /* contact split */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start} .contact-info{display:flex;flex-direction:column;gap:26px} .contact-info .row{display:flex;gap:16px;align-items:flex-start} .contact-info .ic{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--grad-soft);border:1px solid var(--border);font-size:20px} /* footer */ .footer{border-top:1px solid var(--border);padding:64px 0 36px;margin-top:40px;background:var(--bg-2)} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px} .footer h4{font-size:13px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);margin-bottom:18px} .footer ul{list-style:none;display:flex;flex-direction:column;gap:11px} .footer a{color:var(--text-soft);font-size:14.5px;transition:color .2s} .footer a:hover{color:var(--text)} .footer .desc{color:var(--text-soft);font-size:14.5px;max-width:34ch;margin-top:16px} .footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--border);color:var(--text-dim);font-size:13px} /* disclaimer */ .disclaimer{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);padding:22px 24px;font-size:13px;color:var(--text-dim);line-height:1.7} .disclaimer strong{color:var(--text-soft)} /* page hero (interior) */ .page-hero{padding:180px 0 60px} /* ---------- Reveal animations ---------- */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s} .reveal.d2{transition-delay:.16s} .reveal.d3{transition-delay:.24s} .reveal.d4{transition-delay:.32s} /* ---------- Responsive ---------- */ @media(max-width:960px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)} .split,.contact-grid{grid-template-columns:1fr;gap:36px} .footer-grid{grid-template-columns:1fr 1fr} } @media(max-width:900px){ .nav-links,.nav-cta .btn{display:none} .burger{display:flex} .section-pad{padding:80px 0} .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} .hero-stats{gap:0} .footer-grid{grid-template-columns:1fr 1fr} } @media(max-width:480px){ .container{padding:0 18px} .footer-grid{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} *{scroll-behavior:auto!important} } /* ========================================================= ARTICLE / GUIDE ========================================================= */ .article-head{padding:160px 0 40px} .breadcrumb{font-size:13px;color:var(--text-dim);letter-spacing:.5px;margin-bottom:22px} .breadcrumb a{color:var(--text-soft)} .breadcrumb a:hover{color:var(--text)} .article-head .meta{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.05em;text-transform:uppercase;font-weight:600;margin-bottom:16px} .article-head h1{font-size:clamp(32px,5vw,56px);max-width:20ch} .article-head .lead{margin-top:22px} .article-wrap{display:grid;grid-template-columns:240px 1fr;gap:56px;align-items:start} .toc{position:sticky;top:100px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);padding:22px} .toc h4{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);margin-bottom:14px} .toc ul{list-style:none;display:flex;flex-direction:column;gap:10px} .toc a{font-size:14px;color:var(--text-soft);line-height:1.4;transition:color .2s} .toc a:hover{color:var(--accent)} .prose{max-width:720px;font-size:17px;color:var(--text-soft);line-height:1.8;min-width:0} .prose h2{color:var(--text);font-size:28px;margin:48px 0 18px;letter-spacing:-.01em;scroll-margin-top:100px} .prose h3{color:var(--text);font-size:20px;margin:32px 0 12px} .prose p{margin-bottom:18px} .prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,204,0,.4);transition:text-decoration-color .2s} .prose a:hover{text-decoration-color:var(--accent)} .prose strong{color:var(--text);font-weight:600} .prose ul,.prose ol{margin:0 0 20px 22px;display:flex;flex-direction:column;gap:10px} .prose li{padding-left:4px} .prose ul li::marker{color:var(--accent)} .prose blockquote{border-left:3px solid var(--accent);background:var(--surface);padding:18px 24px;border-radius:0 12px 12px 0;margin:26px 0;color:var(--text)} .callout{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--grad-soft);padding:22px 24px;margin:28px 0;font-size:15.5px} .callout .t{font-weight:700;color:var(--text);display:block;margin-bottom:6px} .key-table{width:100%;border-collapse:collapse;margin:26px 0;font-size:14.5px} .key-table th,.key-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--border)} .key-table th{color:var(--text);font-weight:600;background:var(--surface)} .key-table td{color:var(--text-soft)} @media(max-width:700px){ .key-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap} } .article-cta{margin:50px 0 0;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:30px;text-align:center} .related{margin-top:64px} .related h2{font-size:24px;margin-bottom:24px;color:var(--text)} @media(max-width:880px){ .article-wrap{grid-template-columns:1fr;gap:32px} .toc{position:static;display:none} } /* ========================================================= AUTH (connexion / inscription) ========================================================= */ .auth-wrap{max-width:460px;margin:0 auto} .auth-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:36px} .seg{display:flex;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px;margin-bottom:28px} .seg button{flex:1;padding:11px;border:0;background:transparent;color:var(--text-soft);font-weight:600;font-size:14.5px;border-radius:var(--radius-sm);cursor:pointer;transition:.2s var(--ease);font-family:inherit} .seg button.active{background:var(--accent);color:var(--accent-ink)} .auth-pane{display:none} .auth-pane.active{display:block} .auth-foot{text-align:center;margin-top:20px;font-size:13.5px;color:var(--text-dim)} .auth-foot a{color:var(--accent)} /* ========================================================= DASHBOARD PORTEFEUILLE ========================================================= */ .dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:34px} .dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:34px} .dash-stat{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);padding:22px;min-width:0} .dash-stat .lbl{font-size:12.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:10px} .dash-stat .val{font-size:27px;font-weight:700;letter-spacing:-.02em} .dash-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;margin-bottom:22px} .panel{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:26px;min-width:0} .panel h3{font-size:17px;margin-bottom:18px} .up{color:var(--up)} .down{color:var(--down)} .hold-table{width:100%;border-collapse:collapse;font-size:14px} .hold-table th,.hold-table td{text-align:right;padding:14px 10px;border-bottom:1px solid var(--border);white-space:nowrap;font-variant-numeric:tabular-nums} .hold-table th:first-child,.hold-table td:first-child{text-align:left} .hold-table th{color:var(--text-dim);font-weight:600;font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em} .hold-table td{color:var(--text-soft)} .hold-table .sym{color:var(--text)} .hold-table .sym .sym-wrap{display:flex;align-items:center;gap:9px} .hold-table .sym .sym-wrap.clickable{cursor:pointer} .hold-table .sym .sym-wrap.clickable:hover .sym-ticker{color:var(--accent)} .hold-table .sym .sym-wrap .stock-logo{width:22px;height:22px} .hold-table .sym .sym-ticker{font-weight:700;font-family:var(--mono);font-size:13.5px;letter-spacing:.02em} .hold-table .sym .sym-name{display:block;font-size:11.5px;color:var(--text-dim);margin-top:2px;font-weight:400} .hold-table .price-cell{display:inline-flex;flex-direction:column;align-items:flex-end;gap:1px} .hold-table .price-cell .p-chg{font-size:11px;font-weight:600} .hold-table .price-cell .p-age{font-size:10.5px;color:var(--text-dim);font-weight:400} .hold-table .price-cell.stale{color:var(--text-dim);font-style:italic;font-size:12.5px} .hold-table .pru-cell{background:none;border:0;padding:0;color:var(--text-soft);cursor:pointer;font:inherit;text-align:right;display:inline-flex;flex-direction:column;align-items:flex-end;gap:1px;border-bottom:1px dashed transparent} .hold-table .pru-cell:hover{border-bottom-color:var(--text-dim)} .hold-table .pru-cell .pru-date{font-size:11px;color:var(--text-dim)} .hold-table .pru-cell.pru-missing{color:var(--accent);font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;border-bottom:0} .pru-popover{position:fixed;background:var(--bg-2);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:16px;z-index:60;box-shadow:0 16px 36px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:10px;min-width:230px} .pru-popover label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim)} .pru-popover input,.pru-popover select{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 10px;color:var(--text);font-family:inherit;font-size:13.5px;width:100%} .pru-popover input:focus,.pru-popover select:focus{outline:none;border-color:var(--accent)} .pru-popover .pru-pop-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:2px} .pru-popover .pru-pop-actions .btn{padding:8px 14px;font-size:11.5px} .btn-del{background:none;border:0;color:var(--text-dim);cursor:pointer;font-size:16px;transition:color .2s} .btn-del:hover{color:var(--down)} .add-row{display:grid;grid-template-columns:1.4fr .9fr .9fr auto;gap:10px;margin-top:18px} .add-row input{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 12px;color:var(--text);font-family:inherit;font-size:14px;width:100%;min-width:0} .add-row input:focus{outline:none;border-color:var(--accent)} .panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px} .panel-head h3{margin:0} .btn-refresh{background:none;border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 12px;color:var(--text-dim);cursor:pointer;font-size:11.5px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;transition:all .15s;white-space:nowrap} .btn-refresh:hover:not(:disabled){border-color:var(--accent);color:var(--accent)} .btn-refresh:disabled{opacity:.5;cursor:default} .news-relevant{display:flex;flex-direction:column;gap:2px} .news-relevant .nr-item{display:flex;gap:12px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--border)} .news-relevant .nr-item:last-child{border-bottom:0} .news-relevant .nr-tag{flex-shrink:0;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em;background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim);padding:3px 8px;border-radius:3px} .news-relevant .nr-body{flex:1;min-width:0} .news-relevant .nr-body a{color:var(--text);font-size:14px;font-weight:600;line-height:1.4} .news-relevant .nr-body a:hover{color:var(--accent)} .news-relevant .nr-meta{font-size:11.5px;color:var(--text-dim);margin-top:3px} .empty-state{text-align:center;color:var(--text-dim);padding:30px 0;font-size:14.5px} .locked{position:relative} .locked .lock-overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,10,11,.88);border-radius:var(--radius);text-align:center;padding:30px;z-index:5} .demo-banner{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--grad-soft);padding:14px 20px;font-size:13.5px;color:var(--text-soft);margin-bottom:26px} @media(max-width:880px){ .dash-stats{grid-template-columns:repeat(2,1fr)} .dash-grid{grid-template-columns:1fr} .add-row{grid-template-columns:1fr 1fr} } /* ========================================================= SIMULATEUR COMPARATIF ========================================================= */ .sim-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:stretch} .sim-chart-card{ border-radius:var(--radius);padding:34px 34px 26px;position:relative;color:var(--text); background:var(--bg-2); border:1px solid var(--border-strong); } .sim-chip{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-soft);background:var(--surface);border:1px solid var(--border);padding:8px 16px;border-radius:var(--radius-sm);margin-bottom:20px} .sim-title{font-size:clamp(19px,2.4vw,25px);font-weight:800;line-height:1.2;letter-spacing:-.01em;border-left:3px solid var(--accent);padding:4px 0 4px 16px;margin-bottom:6px} .sim-sub{color:var(--text-soft);font-size:15px;padding-left:18px;margin-bottom:22px} .sim-legend{display:flex;gap:26px;flex-wrap:wrap;padding-left:18px;margin-bottom:26px} .sim-legend span{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--text)} .sim-legend i{width:12px;height:12px;display:inline-block} .lg-cgp{background:var(--text-dim)} .lg-mj{background:var(--accent)} .sim-plot{position:relative;height:380px;margin:0 0 6px 0;padding-left:78px} .sim-grid-lines{position:absolute;left:78px;right:6px;top:0;bottom:34px} .sim-gl{position:absolute;left:0;right:0;border-top:1px solid var(--border)} .sim-gl span{position:absolute;left:-72px;top:-9px;width:66px;text-align:right;font-size:11.5px;color:var(--text-dim)} .sim-bars{position:absolute;left:78px;right:6px;top:0;bottom:34px;display:flex;justify-content:center;gap:64px;align-items:flex-end} .sim-bar{width:118px;max-width:30%;position:relative;transition:height .6s var(--ease);min-height:2px} .sim-bar.cgp{background:var(--text-dim)} .sim-bar.mj{background:var(--accent)} .sim-bar .bval{position:absolute;top:18px;left:0;right:0;text-align:center;font-size:15px;font-weight:800;color:var(--bg)} .sim-bar.mj .bval{color:var(--accent-ink)} .sim-bar.cgp .bval{color:var(--bg)} .sim-xaxis{position:absolute;left:78px;right:6px;bottom:0;height:30px;display:flex;align-items:center;justify-content:center} .sim-xaxis .track{width:100%;height:2px;background:var(--border-strong)} .sim-xlabel{position:absolute;left:0;right:0;bottom:-22px;text-align:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--text-dim);font-weight:600;text-transform:uppercase} .sim-delta{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:4} .sim-delta .arrow{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--accent);transform:translateX(-50%)} .sim-delta .arrow::before,.sim-delta .arrow::after{content:"";position:absolute;left:50%;transform:translateX(-50%);border-left:6px solid transparent;border-right:6px solid transparent} .sim-delta .arrow::before{top:-1px;border-bottom:8px solid var(--accent)} .sim-delta .arrow::after{bottom:-1px;border-top:8px solid var(--accent)} .sim-delta .badge{position:relative;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:14px;padding:8px 14px;border-radius:var(--radius-sm);white-space:nowrap} .sim-controls{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:30px} .sim-controls h3{font-size:18px;margin-bottom:6px} .sim-controls .hint{color:var(--text-dim);font-size:13px;margin-bottom:24px} .sim-profile-banner{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);padding:14px 16px;margin:-10px 0 24px;font-size:13px;color:var(--text-soft);line-height:1.5} .sim-profile-banner.done{border-color:var(--accent)} .sim-profile-banner a{color:var(--accent);font-weight:600;white-space:nowrap} .sim-field{margin-bottom:24px} .sim-field .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px} .sim-field label{font-size:14px;color:var(--text-soft);font-weight:500} .sim-field .out{font-size:16px;font-weight:700;color:var(--accent)} .sim-field .out-edit{display:inline-flex;align-items:center;gap:5px} .sim-field .out-input{ width:84px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm); padding:5px 7px;color:var(--accent);font-family:inherit;font-weight:700;font-size:15px; text-align:right;-moz-appearance:textfield; } .sim-field .out-input:focus{outline:none;border-color:var(--accent)} .sim-field .out-input::-webkit-outer-spin-button,.sim-field .out-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .sim-field .out-unit{font-size:13px;font-weight:700;color:var(--accent)} input[type=range].slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:0;background:var(--bg-2);outline:none;cursor:pointer;border:1px solid var(--border)} input[type=range].slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);cursor:pointer} input[type=range].slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);cursor:pointer} .sim-result{border-top:1px solid var(--border);margin-top:6px;padding-top:20px} .sim-result .big{font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--up)} .sim-result .lbl{font-family:var(--mono);font-size:11.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;margin-top:4px} @media(max-width:880px){ .sim-layout{grid-template-columns:1fr} .sim-plot{padding-left:64px} .sim-grid-lines,.sim-bars,.sim-xaxis{left:64px} .sim-bars{gap:40px} } /* ========================================================= SÉLECTEUR DE LANGUE (drapeaux) ========================================================= */ .lang-switch{position:relative} .lang-current{ display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:var(--radius-sm); border:1px solid var(--border);background:var(--surface);color:var(--text); font-family:var(--mono);font-size:12.5px;font-weight:600;cursor:pointer;transition:all .2s var(--ease); } .lang-current:hover{background:var(--surface-2);border-color:var(--border-strong)} .lang-current svg{flex-shrink:0;opacity:.85} .lang-current .chev{width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease);opacity:.7} .lang-switch.open .lang-current .chev{transform:rotate(225deg) translateY(1px)} .lang-menu{ position:absolute;top:calc(100% + 8px);right:0;min-width:170px;margin:0;padding:6px; background:var(--bg-2); border:1px solid var(--border-strong);list-style:none; opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .2s var(--ease);z-index:200; } .lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)} .lang-menu li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;font-size:14px;font-weight:500;color:var(--text-soft);cursor:pointer;transition:all .2s} .lang-menu li:hover{background:var(--surface-2);color:var(--text)} .lang-menu li.active{color:var(--text);background:var(--surface)} .lang-menu li.active::after{content:"✓";margin-left:auto;color:var(--accent);font-weight:700} @media(max-width:720px){ .nav-cta{gap:8px} .lang-current span.lang-code{display:none} .lang-current{padding:9px 11px} } /* ---------- Bascule thème clair/sombre (injectée par script.js) ---------- */ .theme-toggle{ display:flex;align-items:center;justify-content:center; width:40px;height:40px;border-radius:var(--radius-sm);flex-shrink:0; border:1px solid var(--border);background:var(--surface);color:var(--text); font-size:16px;line-height:1;cursor:pointer;transition:all .2s var(--ease); } .theme-toggle:hover{background:var(--surface-2);border-color:var(--border-strong)} /* ---------- Personnalisation (thème + couleurs) — profil.html ---------- */ .swatch-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px} .swatch{ width:34px;height:34px;border-radius:50%;border:2px solid transparent; cursor:pointer;position:relative;padding:0;transition:transform .15s var(--ease),border-color .15s; box-shadow:0 0 0 1px var(--border); } .swatch:hover{transform:scale(1.1)} .swatch.active{border-color:var(--text)} .swatch.active::after{ content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:14px;font-weight:800;color:#0a0a0a;text-shadow:0 0 3px rgba(255,255,255,.6); } .seg-theme{display:flex;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:5px;max-width:280px} .seg-theme button{flex:1;padding:10px;border:0;background:transparent;color:var(--text-soft);font-weight:600;font-size:13.5px;border-radius:var(--radius-sm);cursor:pointer;transition:.2s var(--ease);font-family:inherit;display:flex;align-items:center;justify-content:center;gap:7px} .seg-theme button.active{background:var(--accent);color:var(--accent-ink)} .perso-group{margin-top:26px} .perso-group:first-child{margin-top:0} .perso-group h4{font-size:13px;color:var(--text-soft);font-weight:600;margin-bottom:4px} .perso-group .hint{font-size:12.5px;color:var(--text-dim)} .perso-reset{margin-top:18px;background:none;border:1px solid var(--border);border-radius:var(--radius-sm);padding:9px 14px;color:var(--text-dim);cursor:pointer;font-size:12.5px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em;transition:all .15s} .perso-reset:hover{border-color:var(--border-strong);color:var(--text)} /* Réduction de mouvement */ @media(prefers-reduced-motion:reduce){ .card,.btn{transition:none!important} } /* ---------- Pop-up newsletter ---------- */ .newsletter-popup{ position:fixed;bottom:24px;left:24px;z-index:200; width:320px;max-width:calc(100vw - 32px); background:var(--bg-2); border:1px solid var(--border-strong);border-radius:var(--radius); padding:22px 22px 20px; transform:translateY(calc(100% + 40px));opacity:0; transition:transform .5s var(--ease),opacity .5s var(--ease); pointer-events:none; } .newsletter-popup.show{transform:translateY(0);opacity:1;pointer-events:auto} .newsletter-popup .np-close{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--text-dim);font-size:20px;cursor:pointer;line-height:1;padding:6px} .newsletter-popup .np-close:hover{color:var(--text)} .newsletter-popup .np-icon{width:40px;height:40px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border);font-size:18px;margin-bottom:12px} .newsletter-popup h3{font-size:17px;margin:0 0 6px} .newsletter-popup p{font-size:13.5px;color:var(--text-soft);margin:0 0 14px;line-height:1.5} .newsletter-popup form{display:flex;flex-direction:column;gap:10px} .newsletter-popup input[type=email]{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 14px;color:var(--text);font-size:14px;font-family:inherit} .newsletter-popup input[type=email]:focus{outline:none;border-color:var(--accent);background:var(--surface-2);box-shadow:0 0 0 3px rgba(255,204,0,.14)} .newsletter-popup .btn{width:100%;justify-content:center;padding:11px 18px;font-size:12.5px} .newsletter-popup .np-success{display:none;font-size:13.5px;color:var(--text);background:var(--surface-2);border:1px solid var(--accent);border-radius:var(--radius-sm);padding:12px 14px} .newsletter-popup.np-sent form{display:none} .newsletter-popup.np-sent .np-success{display:block} @media(max-width:480px){.newsletter-popup{left:16px;right:16px;bottom:16px;width:auto}} @media(prefers-reduced-motion:reduce){.newsletter-popup{transition:opacity .4s}} /* ---------- Recherche d'actifs (autocomplétion) ---------- */ .stock-logo{border-radius:4px;object-fit:contain;background:#fff;padding:2px;flex-shrink:0;vertical-align:middle} .stock-search{position:relative;display:block;width:100%} .stock-search input{width:100%} .stock-search-list{ position:absolute;top:calc(100% + 4px);left:0;right:0; background:var(--bg-2);border:1px solid var(--border-strong);border-radius:var(--radius-sm); max-height:320px;overflow-y:auto;z-index:40;display:none; box-shadow:0 12px 28px rgba(0,0,0,.35); } .stock-search-list.show{display:block} .stock-search-item{ display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer; border-bottom:1px solid var(--border); } .stock-search-item:last-child{border-bottom:0} .stock-search-item:hover,.stock-search-item.active{background:var(--accent);color:var(--accent-ink)} .stock-search-item .ss-flag{font-size:16px;flex-shrink:0} .stock-search-item .ss-info{flex:1;min-width:0} .stock-search-item .ss-name{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stock-search-item .ss-meta{font-size:11px;color:var(--text-dim);font-family:var(--mono);text-transform:uppercase;letter-spacing:.03em} .stock-search-item:hover .ss-meta,.stock-search-item.active .ss-meta{color:var(--accent-ink);opacity:.75} .stock-search-item .ss-ticker{font-family:var(--mono);font-size:12px;font-weight:700;flex-shrink:0} /* Badge de notification (messages non lus) */ .nav-unread{ display:inline-flex;align-items:center;justify-content:center; min-width:17px;height:17px;padding:0 5px;margin-left:6px; background:#ef4444;color:#fff;font-family:var(--mono);font-size:10.5px;font-weight:700; border-radius:999px;line-height:1;vertical-align:middle; } .msg-conv-item .nm{justify-content:space-between} .conv-unread{ display:inline-flex;align-items:center;justify-content:center; min-width:16px;height:16px;padding:0 4px;margin-left:auto; background:#ef4444;color:#fff;font-family:var(--mono);font-size:10px;font-weight:700; border-radius:999px;line-height:1; } .stock-search-empty{padding:14px 12px;font-size:13px;color:var(--text-dim);text-align:center} /* Bouton "messages non lus" injecté dans le header (script.js) */ .nav-bell{ position:relative;display:flex;align-items:center;justify-content:center; width:40px;height:40px;border-radius:var(--radius-sm); border:1px solid var(--border);background:var(--surface); font-size:16px;line-height:1;transition:all .2s var(--ease);flex-shrink:0; } .nav-bell:hover{background:var(--surface-2);border-color:var(--border-strong)} .nav-bell .nav-unread{position:absolute;top:-6px;right:-6px;margin-left:0} @media(max-width:900px){.nav-bell{display:none}} /* ========================================================= QUIZ NOTÉ DE FIN DE COURS (guides) — centralisé, voir assets/quiz.js ========================================================= */ .quiz-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:24px;margin:28px 0;overflow:hidden} .quiz-badge{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;background:var(--accent);color:var(--accent-ink);padding:3px 9px;border-radius:999px;font-weight:700;white-space:nowrap;display:inline-block;margin-bottom:14px} .quiz-progress-bar{height:4px;background:var(--bg-2);border-radius:2px;margin-bottom:12px;overflow:hidden} .quiz-progress-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .5s var(--ease)} .quiz-progress{font-size:11.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;font-family:var(--mono)} .quiz-question{font-size:16px;font-weight:700;color:var(--text);margin-bottom:16px;line-height:1.4} .quiz-options{display:flex;flex-direction:column;gap:8px} .quiz-option{text-align:left;padding:12px 16px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--bg-2);color:var(--text);font-family:inherit;font-size:14px;cursor:pointer;transition:border-color .15s,background .15s,transform .15s} .quiz-option:hover:not(.disabled){border-color:var(--accent);transform:translateX(2px)} .quiz-option.disabled{cursor:default} .quiz-option.correct{border-color:var(--up);background:rgba(74,222,128,.12);color:var(--up)} .quiz-option.incorrect{border-color:var(--down);background:rgba(248,113,113,.12);color:var(--down)} .quiz-feedback{margin-top:14px;padding:13px 16px;border-radius:var(--radius-sm);font-size:13.5px;line-height:1.5} .quiz-feedback.ok{background:rgba(74,222,128,.1);color:var(--up);border:1px solid rgba(74,222,128,.3)} .quiz-feedback.ko{background:rgba(248,113,113,.1);color:var(--down);border:1px solid rgba(248,113,113,.3)} .quiz-next{margin-top:16px} .quiz-result{text-align:center;padding:10px 0} .quiz-result-score{font-size:32px;font-weight:800;color:var(--accent);font-family:var(--mono);margin-bottom:8px;font-variant-numeric:tabular-nums} .quiz-result-msg{font-size:14px;color:var(--text-soft);margin-bottom:18px} .quiz-anim-in{animation:quizFadeIn .4s var(--ease)} @keyframes quizFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} @media(prefers-reduced-motion:reduce){ .quiz-anim-in{animation:none} .quiz-progress-fill{transition:none} .quiz-option{transition:none} }