/* E.C.A. Studio — Phase 2, lot CSS 1 Design system et styles applicatifs initialement présents dans . L’ordre des blocs d’origine est conservé ci-dessous. */ /* ===== Bloc CSS original 2 : bloc-head-2 ===== */ /* NeuroFlow Design System */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-warm:#FAF5E8;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757;--nf-copper-glow:#F4CBA8;--nf-copper-dark:#7C3A1F; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12);--nf-ink-faint:rgba(42,37,32,.06); --nf-dark-bg:#0A0A0A; --font-serif:'Instrument Serif','Cormorant Garamond',Georgia,serif; --font-ui:'Geist','Inter Tight',system-ui,sans-serif; --font-mono:'Geist Mono','IBM Plex Mono',ui-monospace,monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);line-height:1.6;-webkit-font-smoothing:antialiased;max-width:480px;margin:0 auto;min-height:100dvh} .nf-orb{display:inline-block;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4CBA8 0%,#D97757 45%,#7C3A1F 100%);box-shadow:rgba(0,0,0,.35) -8px -10px 24px inset,rgba(217,119,87,.45) 0 0 40px;animation:nfBreath 6s ease-in-out infinite;position:relative} .nf-orb::before{content:'';position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,rgba(217,119,87,.45) 0%,transparent 70%);filter:blur(8px);animation:nfBreath 6s ease-in-out infinite;z-index:-1} @keyframes nfBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}} .nf-label{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--nf-ink-mid)} .nf-label-copper{color:var(--nf-copper)} .nf-h1{font-family:var(--font-serif);font-style:italic;font-size:2.2rem;line-height:1.1;color:var(--nf-ink);font-weight:400;letter-spacing:-.02em} .nf-h2{font-family:var(--font-serif);font-style:italic;font-size:1.6rem;line-height:1.15;color:var(--nf-ink);font-weight:400} .nf-h3{font-family:var(--font-serif);font-style:italic;font-size:1.25rem;color:var(--nf-ink);font-weight:400} .nf-card{background:var(--nf-beige-light);border-radius:18px;padding:18px;margin-bottom:12px} .nf-btn-pill{display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;background:var(--nf-copper);color:#FDF9EE;border:none;border-radius:999px;font-family:var(--font-ui);font-size:.95rem;font-weight:500;cursor:pointer;width:100%;transition:all .2s;letter-spacing:-.01em;gap:8px} .nf-btn-ghost{background:transparent;border:1.5px solid var(--nf-ink-soft);color:var(--nf-ink);border-radius:999px;padding:12px 22px;font-family:var(--font-ui);font-size:.9rem;cursor:pointer;transition:all .2s} .nf-back-btn{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.9);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--nf-ink);box-shadow:0 2px 8px rgba(42,37,32,.1);flex-shrink:0} /* Dev label */ .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0;overflow-x:hidden;width:100%;background:var(--nf-beige)} .nf-screen{display:none} /* Écran actif = overlay plein viewport, comme une vraie app mobile */ .nf-screen.nf-active{ display:block; position:fixed; top:0;left:0;right:0;bottom:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; z-index:1; background:var(--nf-beige); opacity:1; } .nf-screen.nf-has-nav.nf-active{padding-bottom:72px} #nf-bottom-nav{z-index:100} #nf-bottom-nav{position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;background:rgba(240,231,213,.96);backdrop-filter:blur(12px);border-top:1px solid rgba(42,37,32,.1);display:none;grid-template-columns:1fr 1fr 1fr 1fr;padding:8px 0 max(8px,env(safe-area-inset-bottom));z-index:1000} #nf-bottom-nav.visible{display:grid} .nf-nav-btn{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;cursor:pointer;padding:4px 0;color:var(--nf-ink-mid);font-family:var(--font-mono);font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;transition:color .2s} .nf-nav-btn.active,.nf-sidebar-btn.active{color:var(--nf-copper)} .nf-nav-btn svg{width:22px;height:22px} #nf-toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--nf-ink);color:var(--nf-beige-light);font-family:var(--font-ui);font-size:.85rem;padding:10px 20px;border-radius:999px;opacity:0;transition:all .3s;z-index:9999;white-space:nowrap;pointer-events:none} #nf-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} @media(min-width:768px){ body{background:#E8DFC8} .nf-screen.nf-active{ max-width:420px; left:50%;right:auto; transform:translateX(-50%); border-radius:0; box-shadow:none; } .nf-screen.nf-active.nf-has-nav{ border-radius:28px; top:24px;bottom:24px; box-shadow:0 24px 60px rgba(42,37,32,.18); } #nf-bottom-nav{max-width:420px;left:50%;transform:translateX(-50%);border-radius:0 0 28px 28px} } @media(min-width:1100px){ body{background:#E8DFC8} #nf-app{display:flex;align-items:flex-start;justify-content:center;min-height:100dvh;padding:32px 48px;gap:40px} #nf-app.nf-fullscreen{display:block;padding:0} #nf-app.nf-fullscreen #nf-sidebar{display:none!important} #nf-sidebar{display:flex;flex-direction:column;gap:8px;width:220px;flex-shrink:0;position:sticky;top:32px} .nf-screen.nf-active{ max-width:400px; left:calc(50% + 110px); /* décalé à droite de la sidebar */ right:auto; transform:translateX(-50%); } .nf-screen.nf-active.nf-has-nav{ border-radius:28px; top:32px;bottom:32px; box-shadow:0 24px 60px rgba(42,37,32,.18); padding-bottom:0; } .nf-screen.nf-active:not(.nf-has-nav){ left:0;right:0; transform:none; max-width:100%; border-radius:0; top:0;bottom:0; } #nf-bottom-nav{ left:calc(50% + 110px); right:auto; transform:translateX(-50%); width:400px; border-radius:0 0 28px 28px; } #nf-bottom-nav{display:none!important} .nf-sidebar-logo{font-family:var(--font-serif);font-style:italic;font-size:1.4rem;color:var(--nf-ink);padding:8px 16px 16px;border-bottom:1px solid var(--nf-ink-soft);margin-bottom:8px} .nf-sidebar-btn{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;border:none;background:transparent;cursor:pointer;font-family:var(--font-ui);font-size:.9rem;color:var(--nf-ink-mid);transition:all .2s;text-align:left;width:100%} .nf-sidebar-btn:hover{background:rgba(196,103,66,.08);color:var(--nf-ink)} .nf-sidebar-btn svg{width:20px;height:20px;flex-shrink:0} } /* ── BOUTON CENTRAL IA PRÉSENCE (plus grand) ── */ .nf-nav-center{transform:translateY(-12px);position:relative} .nf-nav-center svg{width:32px!important;height:32px!important;background:var(--nf-copper);border-radius:50%;padding:6px;color:#fff;box-shadow:0 4px 12px rgba(196,103,66,.3)} .nf-nav-center{color:var(--nf-copper)} /* ── DRAWER PLUS ── */ #nf-drawer-overlay{ position:fixed;inset:0;background:rgba(0,0,0,.5); opacity:0;pointer-events:none;transition:opacity .25s; z-index:1500; } #nf-drawer-overlay.open{opacity:1;pointer-events:auto} #nf-drawer{ position:fixed;bottom:0;left:0;right:0; background:var(--nf-beige-light); border-radius:24px 24px 0 0; transform:translateY(100%);transition:transform .3s cubic-bezier(.25,.1,.25,1); z-index:1600;max-height:80vh;overflow-y:auto; padding:0 20px 24px; -webkit-overflow-scrolling:touch; } #nf-drawer.open{transform:translateY(0)} .nf-drawer-handle{ width:40px;height:4px;background:rgba(42,37,32,.2); border-radius:2px;margin:12px auto 16px; } .nf-drawer-title{ font-family:var(--font-serif);font-style:italic; font-size:1.2rem;color:var(--nf-ink); text-align:center;margin-bottom:20px; } .nf-drawer-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:10px;margin-bottom:20px; } .nf-drawer-item{ background:#fff;border:1px solid rgba(42,37,32,.08); border-radius:16px;padding:14px 8px; text-align:center;cursor:pointer; transition:transform .15s,background .15s; } .nf-drawer-item:active{transform:scale(.96);background:rgba(196,103,66,.06)} .nf-drawer-icon{font-size:1.6rem;margin-bottom:6px} .nf-drawer-label{ font-family:var(--font-ui);font-size:.72rem; color:var(--nf-ink-mid);line-height:1.2; } .nf-drawer-logout{ background:rgba(196,103,66,.08); border-color:rgba(196,103,66,.2); } .nf-drawer-logout .nf-drawer-label{color:var(--nf-copper);font-weight:600} .nf-drawer-close{ width:100%;padding:14px; background:var(--nf-ink);color:#fff; border:none;border-radius:14px; font-family:var(--font-ui);font-size:.95rem; cursor:pointer;font-weight:500; } .nf-drawer-section{font-family:var(--font-ui);font-size:.7rem;letter-spacing:.05em;color:var(--nf-copper);margin:18px 2px 9px;display:flex;align-items:center;gap:8px} .nf-drawer-section .ln{flex:1;height:1px;background:rgba(196,103,66,.16)} .nf-drawer-item.nf-feat{border:1.5px solid var(--nf-copper);background:rgba(196,103,66,.07);position:relative} .nf-drawer-item.nf-feat .nf-drawer-label{color:var(--nf-copper-dark);font-weight:600} .nf-feat-star{position:absolute;top:6px;right:8px;font-size:.6rem;color:var(--nf-gold)} #nf-drawer-admin-section{display:none} .nf-drawer-adminhint{font-size:.62rem;color:var(--nf-ink-mid);text-align:center;margin:8px 2px 0;opacity:.7} #nf-ambiance-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s;z-index:1700} #nf-ambiance-overlay.open{opacity:1;pointer-events:auto} #nf-ambiance-sheet{position:fixed;bottom:0;left:0;right:0;background:var(--nf-beige-light);border-radius:24px 24px 0 0;transform:translateY(100%);transition:transform .3s cubic-bezier(.25,.1,.25,1);z-index:1800;max-height:60vh;overflow-y:auto;padding:0 20px 24px} #nf-ambiance-sheet.open{transform:translateY(0)} @media(min-width:1100px){#nf-ambiance-sheet,#nf-ambiance-overlay{display:none!important}} @media(min-width:1100px){ #nf-drawer,#nf-drawer-overlay{display:none!important} } /* ===== Bloc CSS original 3 : bloc-head-3 ===== */ /* loading */ @keyframes loadDot{0%,100%{opacity:.3}50%{opacity:1}}/* inscription_qr */ :root{ --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-green:#4A7B5C;--nf-violet:#7B5EA7; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .screen{display:none}.screen.active{display:block} .nf-orb{display:inline-block;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4CBA8 0%,#D97757 45%,#7C3A1F 100%);box-shadow:rgba(0,0,0,.35) -8px -10px 24px inset,rgba(217,119,87,.55) 0 0 70px;animation:nfBreath 6s ease-in-out infinite} @keyframes nfBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} @keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} @keyframes spin{to{transform:rotate(360deg)}} .fadein{animation:fadein .4s ease-out both} .d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s} .form-input{width:100%;padding:14px 16px;border:1.5px solid var(--nf-ink-soft);border-radius:14px;font-family:var(--font-ui);font-size:1rem;color:var(--nf-ink);background:var(--nf-beige-light);outline:none;transition:border .2s} .form-input:focus{border-color:var(--nf-copper);box-shadow:0 0 0 3px rgba(196,103,66,.1)} .form-label{font-family:var(--font-mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--nf-ink-mid);margin-bottom:6px;display:block} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} .spinner{width:24px;height:24px;border:3px solid rgba(196,103,66,.2);border-top-color:var(--nf-copper);border-radius:50%;animation:spin .8s linear infinite;display:inline-block} /* onboarding_1 */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757;--nf-copper-glow:#F4CBA8;--nf-copper-dark:#7C3A1F; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .nf-orb{display:inline-block;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4CBA8 0%,#D97757 45%,#7C3A1F 100%);box-shadow:rgba(0,0,0,.35) -8px -10px 24px inset,rgba(217,119,87,.55) 0 0 60px;animation:nfBreath 6s ease-in-out infinite;position:relative} .nf-orb::before{content:'';position:absolute;inset:-15%;border-radius:50%;background:radial-gradient(circle,rgba(217,119,87,.5) 0%,transparent 70%);filter:blur(10px);animation:nfBreath 6s ease-in-out infinite;z-index:-1} @keyframes nfBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}} @keyframes pulse{0%,100%{opacity:.4;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* onboarding_2 */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757;--nf-copper-glow:#F4CBA8;--nf-copper-dark:#7C3A1F; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .nf-orb{display:inline-block;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4CBA8 0%,#D97757 45%,#7C3A1F 100%);box-shadow:rgba(0,0,0,.35) -8px -10px 24px inset,rgba(217,119,87,.6) 0 0 80px;animation:nfBreath 4s ease-in-out infinite;position:relative;cursor:pointer} .nf-orb::before{content:'';position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,rgba(217,119,87,.55) 0%,transparent 70%);filter:blur(12px);animation:nfBreath 4s ease-in-out infinite;z-index:-1} @keyframes nfBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} .orb-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-style:italic;font-size:1.1rem;color:rgba(255,255,255,.85);letter-spacing:.02em} /* onboarding_3 */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .nf-btn-pill{display:flex;align-items:center;justify-content:center;padding:15px 28px;background:var(--nf-copper);color:#FDF9EE;border:none;border-radius:999px;font-family:var(--font-ui);font-size:.95rem;font-weight:500;cursor:pointer;width:100%;transition:all .2s} .nf-btn-ghost{background:transparent;border:1.5px solid var(--nf-ink-soft);color:var(--nf-ink-mid);border-radius:999px;padding:13px 22px;font-family:var(--font-ui);font-size:.9rem;cursor:pointer;white-space:nowrap} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* onboarding_4 */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757;--nf-copper-glow:#F4CBA8; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .nf-btn-pill{display:flex;align-items:center;justify-content:center;padding:15px 28px;background:var(--nf-copper);color:#FDF9EE;border:none;border-radius:999px;font-family:var(--font-ui);font-size:.95rem;font-weight:500;cursor:pointer;width:100%;transition:all .2s} .nf-btn-ghost{background:transparent;border:1.5px solid var(--nf-ink-soft);color:var(--nf-ink-mid);border-radius:999px;padding:13px 22px;font-family:var(--font-ui);font-size:.9rem;cursor:pointer;white-space:nowrap} .chip{padding:10px 18px;border-radius:999px;border:1.5px solid var(--nf-ink-soft);background:var(--nf-beige-light);font-family:var(--font-ui);font-size:.88rem;cursor:pointer;color:var(--nf-ink);transition:all .2s;white-space:nowrap} .chip.active{background:rgba(196,103,66,.12);border-color:var(--nf-copper);color:var(--nf-copper);font-weight:500} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* onboarding_5 */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757;--nf-copper-glow:#F4CBA8; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .nf-btn-pill{display:flex;align-items:center;justify-content:center;padding:15px 28px;background:var(--nf-copper);color:#FDF9EE;border:none;border-radius:999px;font-family:var(--font-ui);font-size:.95rem;font-weight:500;cursor:pointer;width:100%;transition:all .2s} .nf-btn-ghost{background:transparent;border:1.5px solid var(--nf-ink-soft);color:var(--nf-ink-mid);border-radius:999px;padding:13px 22px;font-family:var(--font-ui);font-size:.9rem;cursor:pointer;white-space:nowrap} .obj-card{background:var(--nf-beige-light);border:1.5px solid var(--nf-ink-soft);border-radius:16px;padding:16px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .2s;margin-bottom:10px} .obj-card.active{background:rgba(196,103,66,.08);border-color:var(--nf-copper)} .obj-icon{width:40px;height:40px;border-radius:50%;background:rgba(42,37,32,.08);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;transition:all .2s} .obj-card.active .obj-icon{background:var(--nf-copper)} .check{width:20px;height:20px;border-radius:50%;background:var(--nf-copper);display:flex;align-items:center;justify-content:center;color:#FDF9EE;font-size:.75rem;margin-left:auto;flex-shrink:0} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* onboarding_6 */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757;--nf-copper-glow:#F4CBA8; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .nf-btn-pill{display:flex;align-items:center;justify-content:center;padding:15px 28px;background:var(--nf-copper);color:#FDF9EE;border:none;border-radius:999px;font-family:var(--font-ui);font-size:.95rem;font-weight:500;cursor:pointer;width:100%;transition:all .2s} .nf-orb{display:inline-block;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4CBA8 0%,#D97757 45%,#7C3A1F 100%);box-shadow:rgba(0,0,0,.35) -8px -10px 24px inset,rgba(217,119,87,.45) 0 0 40px;animation:nfBreath 6s ease-in-out infinite} @keyframes nfBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}} .level-btn{flex:1;background:var(--nf-beige-light);border:1.5px solid var(--nf-ink-soft);border-radius:14px;padding:16px 12px;cursor:pointer;text-align:center;transition:all .2s;font-family:var(--font-ui)} .level-btn.active{background:rgba(196,103,66,.1);border-color:var(--nf-copper)} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* bienvenue_formation */ :root{--nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD;--nf-copper:#C46742;--nf-green:#4A7B5C;--nf-violet:#7B5EA7;--nf-sky:#2E86C1;--nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12);--font-serif:'Instrument Serif',Georgia,serif;--font-ui:'Geist',system-ui,sans-serif;--font-mono:'Geist Mono',monospace} *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .screen{display:none}.screen.active{display:block} .nf-orb{display:inline-block;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4CBA8 0%,#D97757 45%,#7C3A1F 100%);box-shadow:rgba(0,0,0,.35) -8px -10px 24px inset,rgba(217,119,87,.55) 0 0 70px;animation:nfBreath 6s ease-in-out infinite} @keyframes nfBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} @keyframes confettiAnim{0%{transform:translateY(0) rotate(0deg);opacity:1}70%{opacity:1}100%{transform:translateY(360px) rotate(720deg);opacity:0}} .fadein{animation:fadeUp .5s ease-out both} .delay1{animation-delay:.15s}.delay2{animation-delay:.3s}.delay3{animation-delay:.45s}.delay4{animation-delay:.6s} .confetti-wrap{position:absolute;top:0;left:0;width:100%;height:520px;overflow:hidden;pointer-events:none;z-index:5} .confetti-dot{position:absolute;width:8px;height:8px;border-radius:50%;animation:confettiAnim 2.4s ease-out forwards} .formation-badge{border-radius:16px;padding:14px 16px;margin-bottom:16px} .badge-row{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--nf-ink-soft)} .badge-row:last-child{border-bottom:none} .badge-key{font-family:var(--font-mono);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:var(--nf-ink-mid);flex-shrink:0} .badge-val{font-size:.88rem;font-weight:600;color:var(--nf-ink);text-align:right;max-width:200px} .type-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 10px;font-family:var(--font-mono);font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700} .phrase-card{background:var(--nf-beige-light);border-radius:18px;padding:18px;margin-bottom:16px} .phrase-nav{display:flex;gap:6px;justify-content:center;margin-top:12px;flex-wrap:wrap} .phrase-dot{width:6px;height:6px;border-radius:50%;background:var(--nf-ink-soft);transition:all .25s;cursor:pointer;flex-shrink:0} .phrase-dot.active{background:var(--nf-copper);width:18px;border-radius:3px} .science-tag{display:inline-flex;align-items:center;gap:5px;background:rgba(74,123,92,.1);border-radius:999px;padding:4px 10px;font-family:var(--font-mono);font-size:.5rem;letter-spacing:.06em;text-transform:uppercase;color:var(--nf-green);margin-top:10px} .day-counter{font-family:var(--font-mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--nf-copper);text-align:center;margin-bottom:6px} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* ia */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto;display:flex;flex-direction:column} .nf-orb-sm{display:inline-block;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4CBA8 0%,#D97757 45%,#7C3A1F 100%);box-shadow:rgba(0,0,0,.25) -4px -5px 12px inset,rgba(217,119,87,.4) 0 0 16px;animation:nfBreath 6s ease-in-out infinite} @keyframes nfBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}} @keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* seances */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757;--nf-copper-glow:#F4CBA8; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .nf-card{background:var(--nf-beige-light);border-radius:16px;padding:16px 18px;margin-bottom:10px} .chip{padding:8px 16px;border-radius:999px;font-family:var(--font-ui);font-size:.82rem;cursor:pointer;transition:all .2s;border:none;white-space:nowrap} .chip.active{background:var(--nf-copper);color:#FDF9EE;font-weight:500} .chip.inactive{background:var(--nf-beige-light);color:var(--nf-ink-mid)} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* rappels */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .nf-card{background:var(--nf-beige-light);border-radius:16px;padding:16px 18px;margin-bottom:10px} .toggle{position:relative;width:48px;height:28px;flex-shrink:0} .toggle input{opacity:0;width:0;height:0;position:absolute} .slider{position:absolute;inset:0;background:var(--nf-ink-soft);border-radius:999px;cursor:pointer;transition:.25s} .slider:before{content:'';position:absolute;width:22px;height:22px;border-radius:50%;background:#fff;left:3px;top:3px;transition:.25s;box-shadow:0 1px 4px rgba(0,0,0,.2)} input:checked+.slider{background:var(--nf-copper)} input:checked+.slider:before{transform:translateX(20px)} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* rituels */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .toggle{position:relative;width:46px;height:26px;flex-shrink:0} .toggle input{opacity:0;width:0;height:0;position:absolute} .slider{position:absolute;inset:0;background:var(--nf-ink-soft);border-radius:999px;cursor:pointer;transition:.25s} .slider:before{content:'';position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;left:3px;top:3px;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.2)} input:checked+.slider{background:var(--nf-copper)} input:checked+.slider:before{transform:translateX(20px)} .day-chip{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:8px 6px;border-radius:12px;min-width:40px;transition:all .2s} .day-chip.active{background:rgba(196,103,66,.1)} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* rituel_matinal */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .toggle{position:relative;width:46px;height:26px;flex-shrink:0} .toggle input{opacity:0;width:0;height:0;position:absolute} .slider{position:absolute;inset:0;background:var(--nf-ink-soft);border-radius:999px;cursor:pointer;transition:.25s} .slider:before{content:'';position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;left:3px;top:3px;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.2)} input:checked+.slider{background:var(--nf-copper)} input:checked+.slider:before{transform:translateX(20px)} .step-card{border-radius:16px;padding:15px 16px;margin-bottom:10px;display:flex;align-items:center;gap:12px} .step-num{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-style:italic;font-size:1rem;flex-shrink:0} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* reporter */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .option-card{background:var(--nf-beige-light);border-radius:16px;padding:15px 18px;margin-bottom:10px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .2s;border:1.5px solid transparent} .option-card:hover{border-color:var(--nf-ink-soft)} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* calendrier */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757;--nf-copper-glow:#F4CBA8; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .cal-day{width:100%;aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;position:relative} .cal-day.has-sessions{background:var(--nf-beige-light)} .cal-day.intensity-1{background:rgba(196,103,66,.15)} .cal-day.intensity-2{background:rgba(196,103,66,.3)} .cal-day.intensity-3{background:rgba(196,103,66,.55)} .cal-day.today{border:2px solid var(--nf-copper);background:rgba(255,255,255,.6)} .cal-day.today .day-num{color:var(--nf-copper);font-weight:600} .day-num{font-family:var(--font-serif);font-style:italic;font-size:.95rem;color:var(--nf-ink)} .day-dots{display:flex;gap:2px} .dot{width:4px;height:4px;border-radius:50%;background:var(--nf-copper);opacity:.7} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* analytics */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757;--nf-copper-glow:#F4CBA8; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .nf-card{background:var(--nf-beige-light);border-radius:16px;padding:16px 18px;margin-bottom:12px} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* votre_corps */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .nf-orb{display:inline-block;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4CBA8 0%,#D97757 45%,#7C3A1F 100%);box-shadow:rgba(0,0,0,.35) -8px -10px 24px inset,rgba(217,119,87,.45) 0 0 40px;animation:nfBreath 6s ease-in-out infinite} @keyframes nfBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* insights */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* motivation_bio */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .nf-orb{display:inline-block;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4CBA8 0%,#D97757 45%,#7C3A1F 100%);box-shadow:rgba(0,0,0,.35) -8px -10px 24px inset,rgba(217,119,87,.45) 0 0 50px;animation:nfBreath 6s ease-in-out infinite} @keyframes nfBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* bien_etre */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .nf-card{background:var(--nf-beige-light);border-radius:16px;padding:16px 18px;margin-bottom:12px} .score-card{width:52px;border-radius:12px;background:var(--nf-beige-light);border:1.5px solid var(--nf-ink-soft);padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:all .2s;flex-shrink:0} .score-card.active{background:rgba(196,103,66,.1);border-color:var(--nf-copper)} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* bien_etre */ @keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}/* notifications */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .notif-card{background:var(--nf-beige-light);border-radius:16px;padding:14px 16px;margin-bottom:8px;display:flex;align-items:flex-start;gap:12px} .notif-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0} .tab-filter{padding:6px 14px;border-radius:999px;font-family:var(--font-ui);font-size:.82rem;border:none;cursor:pointer;white-space:nowrap;transition:all .2s} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* mode_offline */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* sommeil */ :root{--nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD;--nf-copper:#C46742;--nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12);--nf-violet:#7B5EA7;--nf-sky:#2E86C1;--nf-green:#4A7B5C;--font-serif:'Instrument Serif',Georgia,serif;--font-ui:'Geist',system-ui,sans-serif;--font-mono:'Geist Mono',monospace} *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .card{background:var(--nf-beige-light);border-radius:14px;padding:14px 16px;margin-bottom:10px} .sec-hdr{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nf-ink-mid);margin:14px 0 8px;display:flex;align-items:center;justify-content:space-between} .sec-hdr a{color:var(--nf-copper);cursor:pointer;font-size:.52rem} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} .stage-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0} /* seance_en_cours */ :root{--nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD;--nf-copper:#C46742;--nf-copper-mid:#D97757;--nf-copper-glow:#F4CBA8;--nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12);--nf-green:#4A7B5C;--font-serif:'Instrument Serif',Georgia,serif;--font-ui:'Geist',system-ui,sans-serif;--font-mono:'Geist Mono',monospace} *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .nf-orb{display:inline-block;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4CBA8 0%,#D97757 45%,#7C3A1F 100%);box-shadow:rgba(0,0,0,.35) -8px -10px 24px inset,rgba(217,119,87,.55) 0 0 70px;animation:nfBreath 4s ease-in-out infinite;position:relative} .nf-orb::before{content:'';position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,rgba(217,119,87,.45) 0%,transparent 70%);filter:blur(12px);animation:nfBreath 4s ease-in-out infinite;z-index:-1} @keyframes nfBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}} .step-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--nf-ink-soft)} .step-item:last-child{border-bottom:none} .step-num{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-style:italic;font-size:.9rem;flex-shrink:0} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* resultats_biometrie */ :root{--nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD;--nf-copper:#C46742;--nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12);--nf-green:#4A7B5C;--nf-sky:#2E86C1;--font-serif:'Instrument Serif',Georgia,serif;--font-ui:'Geist',system-ui,sans-serif;--font-mono:'Geist Mono',monospace} *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .card{background:var(--nf-beige-light);border-radius:14px;padding:14px 16px;margin-bottom:10px} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} .metric-row{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px solid var(--nf-ink-soft)} .metric-row:last-child{border-bottom:none} .gauge{position:relative;width:56px;height:56px;flex-shrink:0} .gauge svg{position:absolute;inset:0;transform:rotate(-90deg)} /* partage_social */ :root{--nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD;--nf-copper:#C46742;--nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12);--nf-green:#4A7B5C;--font-serif:'Instrument Serif',Georgia,serif;--font-ui:'Geist',system-ui,sans-serif;--font-mono:'Geist Mono',monospace} *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .nf-orb-sm{display:inline-block;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4CBA8 0%,#D97757 45%,#7C3A1F 100%);box-shadow:rgba(0,0,0,.3) -4px -5px 12px inset,rgba(217,119,87,.4) 0 0 20px} .share-btn{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:14px;border:none;background:var(--nf-beige-light);cursor:pointer;width:100%;margin-bottom:8px;transition:all .2s} .share-btn:hover{background:var(--nf-beige-deep)} .share-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} .card-type{border-radius:14px;padding:12px;cursor:pointer;transition:all .2s;border:2px solid transparent;text-align:center} .card-type.active{border-color:var(--nf-copper);background:rgba(196,103,66,.06)} /* recherche */ :root{--nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD;--nf-copper:#C46742;--nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12);--nf-green:#4A7B5C;--font-serif:'Instrument Serif',Georgia,serif;--font-ui:'Geist',system-ui,sans-serif;--font-mono:'Geist Mono',monospace} *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .result-card{background:var(--nf-beige-light);border-radius:13px;padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:12px;cursor:pointer} .result-icon{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0} .chip-filter{padding:7px 14px;border-radius:999px;font-family:var(--font-ui);font-size:.82rem;border:none;cursor:pointer;white-space:nowrap;transition:all .2s;flex-shrink:0} .chip-filter.active{background:var(--nf-copper);color:#FDF9EE;font-weight:500} .chip-filter.inactive{background:var(--nf-beige-light);color:var(--nf-ink-mid)} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} .sec-hdr{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nf-ink-mid);margin:14px 0 8px} .highlight{color:var(--nf-copper);font-weight:600} /* temoignage */ :root{ --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-green:#4A7B5C;--nf-violet:#7B5EA7; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .screen{display:none}.screen.active{display:block} /* Stars */ .stars{display:flex;gap:8px;justify-content:center} .star{font-size:2.2rem;cursor:pointer;transition:transform .15s;user-select:none;filter:grayscale(1);opacity:.35} .star.active{filter:grayscale(0);opacity:1;transform:scale(1.1)} .star:hover{transform:scale(1.15)} /* Cards */ .question-card{background:var(--nf-beige-light);border-radius:18px;padding:18px 18px 14px;margin-bottom:14px} .q-label{font-family:var(--font-mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--nf-copper);margin-bottom:8px} .q-title{font-family:var(--font-serif);font-style:italic;font-size:1.05rem;color:var(--nf-ink);line-height:1.4;margin-bottom:12px} /* Textarea */ .nf-textarea{width:100%;padding:12px 14px;border:1.5px solid var(--nf-ink-soft);border-radius:12px;font-family:var(--font-serif);font-style:italic;font-size:.9rem;color:var(--nf-ink);background:var(--nf-beige);outline:none;resize:none;line-height:1.55;transition:border .2s} .nf-textarea:focus{border-color:var(--nf-copper)} .nf-textarea::placeholder{color:var(--nf-ink-mid)} /* Chips réponse rapide */ .chip-wrap{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px} .chip{padding:8px 14px;border-radius:999px;font-family:var(--font-ui);font-size:.84rem;cursor:pointer;border:1.5px solid var(--nf-ink-soft);background:var(--nf-beige);transition:all .2s;white-space:nowrap} .chip.selected{background:rgba(196,103,66,.1);border-color:var(--nf-copper);color:var(--nf-copper);font-weight:500} /* Recommend */ .recommend-btn{flex:1;padding:12px 8px;border-radius:14px;border:1.5px solid var(--nf-ink-soft);background:var(--nf-beige);font-family:var(--font-ui);font-size:.88rem;cursor:pointer;text-align:center;transition:all .2s} .recommend-btn.yes{border-color:var(--nf-green);background:rgba(74,123,92,.08);color:var(--nf-green);font-weight:600} .recommend-btn.no{border-color:var(--nf-copper);background:rgba(196,103,66,.08);color:var(--nf-copper);font-weight:600} .recommend-btn.maybe{border-color:var(--nf-violet);background:rgba(123,94,167,.08);color:var(--nf-violet);font-weight:600} /* Toggle consentement */ .toggle{position:relative;width:44px;height:26px;flex-shrink:0} .toggle input{opacity:0;width:0;height:0;position:absolute} .slider{position:absolute;inset:0;background:var(--nf-ink-soft);border-radius:999px;cursor:pointer;transition:.25s} .slider:before{content:'';position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;left:3px;top:3px;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.2)} input:checked+.slider{background:var(--nf-green)} input:checked+.slider:before{transform:translateX(18px)} /* Progress bar */ .progress-bar{height:3px;background:var(--nf-ink-soft);border-radius:3px;overflow:hidden;margin-bottom:22px} .progress-fill{height:100%;background:var(--nf-copper);border-radius:3px;transition:width .4s ease} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} @keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} .fadein{animation:fadein .3s ease-out} @keyframes nfBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}} /* detail_etoile */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757;--nf-copper-glow:#F4CBA8; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .nf-orb{display:inline-block;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4CBA8 0%,#D97757 45%,#7C3A1F 100%);box-shadow:rgba(0,0,0,.35) -8px -10px 24px inset,rgba(217,119,87,.5) 0 0 60px;animation:nfBreath 6s ease-in-out infinite} @keyframes nfBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* player */ :root{ --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757;--nf-copper-glow:#F4CBA8; --nf-green:#4A7B5C;--nf-violet:#7B5EA7;--nf-sky:#2E86C1; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%;overflow:hidden} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;max-width:480px;margin:0 auto;display:flex;flex-direction:column;height:100dvh} .screen{display:none;flex-direction:column;height:100%} .screen.active{display:flex} /* ── ORB ── */ .orb{border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--nf-copper-glow) 0%,var(--nf-copper-mid) 45%,#7C3A1F 100%);box-shadow:rgba(0,0,0,.35) -8px -10px 24px inset,rgba(217,119,87,.6) 0 0 80px;transition:transform var(--phase-dur,5s) cubic-bezier(.45,0,.55,1),box-shadow var(--phase-dur,5s) ease;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px} .orb.inhale{transform:scale(1.28);box-shadow:rgba(0,0,0,.28) -8px -10px 24px inset,rgba(217,119,87,.9) 0 0 120px} .orb.hold{transform:scale(1.28)} .orb.exhale{transform:scale(1);box-shadow:rgba(0,0,0,.42) -8px -10px 24px inset,rgba(217,119,87,.25) 0 0 36px} .orb.hold2{transform:scale(1)} .phase-lbl{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.75);text-shadow:0 1px 4px rgba(0,0,0,.3)} .phase-count{font-family:var(--font-serif);font-style:italic;font-size:3rem;color:#FDF9EE;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.2)} /* ── BOTTOM ── */ .bottom-panel{background:var(--nf-beige-light);border-radius:24px 24px 0 0;box-shadow:0 -4px 24px rgba(42,37,32,.08);padding:14px 18px 20px;flex-shrink:0} /* ── PILLS ── */ .pill{padding:7px 13px;border-radius:999px;font-family:var(--font-mono);font-size:.52rem;letter-spacing:.06em;border:1.5px solid var(--nf-ink-soft);background:var(--nf-beige);cursor:pointer;white-space:nowrap;transition:all .2s;flex-shrink:0} .pill.sel{background:var(--nf-copper);border-color:var(--nf-copper);color:#FDF9EE} /* ── MODE BUTTONS ── */ .mode-btn{flex:1;padding:8px 4px;border-radius:10px;border:1.5px solid var(--nf-ink-soft);background:var(--nf-beige);font-family:var(--font-mono);font-size:.48rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;text-align:center;transition:all .2s} .mode-btn.active{background:rgba(46,134,193,.1);border-color:var(--nf-sky);color:var(--nf-sky)} /* ── CONTROLS ── */ .ctrl-icon{width:42px;height:42px;border-radius:50%;background:var(--nf-beige);border:1.5px solid var(--nf-ink-soft);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.95rem;flex-shrink:0;transition:all .2s} .play-btn{width:62px;height:62px;border-radius:50%;background:var(--nf-copper);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#FDF9EE;box-shadow:rgba(196,103,66,.35) 0 5px 18px;transition:all .2s;flex-shrink:0} /* ── STATS ── */ .stats-bar{display:flex;justify-content:space-around;margin-bottom:10px;padding:9px 0;border-bottom:1px solid var(--nf-ink-soft)} .stat-item{text-align:center} .stat-val{font-family:var(--font-serif);font-style:italic;font-size:1rem;color:var(--nf-ink);line-height:1} .stat-lbl{font-family:var(--font-mono);font-size:.46rem;letter-spacing:.08em;text-transform:uppercase;color:var(--nf-ink-mid);margin-top:1px} /* ── CARDS ── */ .tech-card{background:var(--nf-beige-light);border-radius:18px;padding:16px;margin-bottom:10px;border-left:4px solid var(--nf-copper)} .tech-card .accroche{font-family:var(--font-serif);font-style:italic;font-size:.95rem;color:var(--nf-ink);line-height:1.5;margin-bottom:10px} .tech-card .benefit{display:flex;align-items:flex-start;gap:6px;font-size:.82rem;color:var(--nf-ink);margin-bottom:4px;line-height:1.4} .tech-card .ideal{background:rgba(46,134,193,.08);border-radius:8px;padding:8px 12px;margin:10px 0 10px;font-size:.82rem;color:var(--nf-ink-mid);line-height:1.4} .no-show-btn{font-family:var(--font-mono);font-size:.5rem;text-transform:uppercase;color:var(--nf-ink-mid);background:none;border:1px solid var(--nf-ink-soft);border-radius:999px;padding:4px 12px;cursor:pointer} /* ── SOUND GRID ── */ .sound-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .sound-cell{border-radius:12px;border:1.5px solid var(--nf-ink-soft);background:var(--nf-beige);cursor:pointer;padding:10px 4px;text-align:center;transition:all .2s;position:relative} .sound-cell.sel{background:rgba(196,103,66,.1);border-color:var(--nf-copper)} .sound-cell.syncing{animation:syncPulse .8s ease-in-out infinite} @keyframes syncPulse{0%,100%{opacity:.7}50%{opacity:1;transform:scale(1.03)}} .sound-icon{font-size:1.3rem;display:block;margin-bottom:3px} .sound-name{font-family:var(--font-mono);font-size:.44rem;text-transform:uppercase;color:var(--nf-ink-mid);line-height:1.2} .sound-sync-dot{width:5px;height:5px;border-radius:50%;background:var(--nf-green);position:absolute;top:5px;right:5px;animation:syncPulse .8s ease-in-out infinite;display:none} .sound-cell.sel .sound-sync-dot{display:block} /* ── TECH LIST ── */ .tech-row{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--nf-beige-light);border-radius:12px;margin-bottom:7px;cursor:pointer;transition:all .2s} .tech-row:hover{background:var(--nf-beige-deep)} .tech-row.active-tech{background:rgba(196,103,66,.08);border:1.5px solid rgba(196,103,66,.25)} .cat-pill{padding:5px 11px;border-radius:999px;font-family:var(--font-mono);font-size:.5rem;letter-spacing:.06em;border:none;cursor:pointer;white-space:nowrap;transition:all .2s;flex-shrink:0} .cat-pill.active{background:var(--nf-copper);color:#FDF9EE} .cat-pill.inactive{background:var(--nf-beige-light);color:var(--nf-ink-mid)} /* ── OVERLAYS ── */ .overlay{position:fixed;inset:0;background:rgba(42,37,32,.5);z-index:50;display:none;align-items:flex-end} .overlay.open{display:flex} .overlay-panel{background:var(--nf-beige-light);border-radius:24px 24px 0 0;width:100%;max-width:480px;margin:0 auto;max-height:90vh;overflow-y:auto;padding:18px 18px 30px} /* Toggle */ .toggle{position:relative;width:42px;height:24px;flex-shrink:0} .toggle input{opacity:0;width:0;height:0;position:absolute} .sldr{position:absolute;inset:0;background:var(--nf-ink-soft);border-radius:999px;cursor:pointer;transition:.25s} .sldr:before{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;left:3px;top:3px;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.2)} input:checked+.sldr{background:var(--nf-copper)} input:checked+.sldr:before{transform:translateX(18px)} .slider-input{width:100%;-webkit-appearance:none;height:4px;border-radius:2px;background:var(--nf-ink-soft);outline:none} .slider-input::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:var(--nf-copper);cursor:pointer} @keyframes savePulse{0%,100%{opacity:.5}50%{opacity:1}} @keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .fadein{animation:fadeIn .3s ease-out} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:5px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft);flex-shrink:0} #wave-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3;display:none} /* apres_pratique */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757;--nf-copper-glow:#F4CBA8; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .nf-orb{display:inline-block;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4CBA8 0%,#D97757 45%,#7C3A1F 100%);box-shadow:rgba(0,0,0,.35) -8px -10px 24px inset,rgba(217,119,87,.5) 0 0 50px;animation:nfBreath 6s ease-in-out infinite} @keyframes nfBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}} .feeling-chip{padding:10px 18px;border-radius:999px;border:1.5px solid var(--nf-ink-soft);background:var(--nf-beige-light);font-family:var(--font-serif);font-style:italic;font-size:.9rem;cursor:pointer;color:var(--nf-ink);transition:all .2s;white-space:nowrap} .feeling-chip.active{background:rgba(196,103,66,.12);border-color:var(--nf-copper);color:var(--nf-copper)} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* coherence */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757;--nf-copper-glow:#F4CBA8; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .nf-orb{display:inline-block;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4CBA8 0%,#D97757 45%,#7C3A1F 100%);box-shadow:rgba(0,0,0,.35) -8px -10px 24px inset,rgba(217,119,87,.55) 0 0 70px;position:relative} .nf-orb::before{content:'';position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,rgba(217,119,87,.45) 0%,transparent 70%);filter:blur(12px);z-index:-1} .rhythm-btn{flex:1;padding:14px 8px;background:var(--nf-beige-light);border:1.5px solid var(--nf-ink-soft);border-radius:14px;font-family:var(--font-mono);font-size:.85rem;color:var(--nf-ink-mid);cursor:pointer;transition:all .25s;text-align:center} .rhythm-btn.active{background:var(--nf-copper);color:#FDF9EE;border-color:var(--nf-copper);box-shadow:rgba(196,103,66,.25) 0 4px 16px} @keyframes breathe{0%,100%{transform:scale(1);box-shadow:rgba(0,0,0,.35) -8px -10px 24px inset,rgba(217,119,87,.45) 0 0 50px}50%{transform:scale(1.08);box-shadow:rgba(0,0,0,.35) -8px -10px 24px inset,rgba(217,119,87,.8) 0 0 90px}} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} .toggle{position:relative;width:44px;height:26px;flex-shrink:0} .toggle input{opacity:0;width:0;height:0;position:absolute} .slider{position:absolute;inset:0;background:var(--nf-ink-soft);border-radius:999px;cursor:pointer;transition:.25s} .slider:before{content:'';position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;left:3px;top:3px;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.2)} input:checked+.slider{background:var(--nf-copper)} input:checked+.slider:before{transform:translateX(18px)} /* mesure_ppg */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757;--nf-copper-glow:#F4CBA8; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .mode-btn{flex:1;padding:12px 8px;border-radius:14px;border:1.5px solid var(--nf-ink-soft);background:var(--nf-beige-light);font-family:var(--font-ui);font-size:.85rem;color:var(--nf-ink-mid);cursor:pointer;transition:all .2s;text-align:center} .mode-btn.active{background:var(--nf-copper);color:#FDF9EE;border-color:var(--nf-copper);box-shadow:rgba(196,103,66,.25) 0 4px 14px} .mode-btn .mode-title{font-weight:600;font-size:.88rem;margin-bottom:2px} .mode-btn .mode-sub{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7} @keyframes scanPulse{0%,100%{opacity:.5;transform:scale(.97)}50%{opacity:1;transform:scale(1)}} @keyframes faceScan{0%,100%{opacity:.4}50%{opacity:.8}} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* sos */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757;--nf-copper-glow:#F4CBA8; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .nf-orb{display:inline-block;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4CBA8 0%,#D97757 45%,#7C3A1F 100%);box-shadow:rgba(0,0,0,.35) -8px -10px 24px inset,rgba(217,119,87,.55) 0 0 70px;animation:breathSlow 5s ease-in-out infinite;position:relative} .nf-orb::before{content:'';position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,rgba(217,119,87,.45) 0%,transparent 70%);filter:blur(12px);animation:breathSlow 5s ease-in-out infinite;z-index:-1} @keyframes breathSlow{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} @keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}} .sos-btn{width:100%;padding:16px 18px;border-radius:16px;border:1.5px solid var(--nf-ink-soft);cursor:pointer;display:flex;align-items:center;gap:14px;margin-bottom:10px;transition:all .2s;font-family:var(--font-ui);text-align:left;background:var(--nf-beige-light)} .sos-btn-primary{background:var(--nf-copper);border-color:var(--nf-copper);box-shadow:rgba(196,103,66,.25) 0 4px 18px} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* composer_souffle */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757;--nf-copper-glow:#F4CBA8; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} input[type=range]{-webkit-appearance:none;width:100%;height:4px;border-radius:4px;background:var(--nf-ink-soft);outline:none} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--nf-copper);cursor:pointer;box-shadow:0 2px 6px rgba(196,103,66,.35)} /* creer_exercice */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757;--nf-copper-glow:#F4CBA8; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .filter-chip{padding:9px 16px;border-radius:999px;border:1.5px solid var(--nf-ink-soft);background:var(--nf-beige-light);font-family:var(--font-ui);font-size:.85rem;cursor:pointer;color:var(--nf-ink-mid);transition:all .2s;white-space:nowrap;flex-shrink:0} .filter-chip.active{background:rgba(196,103,66,.12);border-color:var(--nf-copper);color:var(--nf-copper);font-weight:500} .ex-card{background:var(--nf-beige-light);border-radius:16px;padding:16px 18px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:12px} .ex-card-dashed{background:rgba(196,103,66,.06);border:1.5px dashed rgba(196,103,66,.3);border-radius:16px;padding:16px 18px;margin-bottom:10px;display:flex;align-items:center;gap:14px;cursor:pointer} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* templates */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757;--nf-copper-glow:#F4CBA8; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .tab-btn{padding:8px 16px;font-family:var(--font-ui);font-size:.82rem;border:none;background:transparent;cursor:pointer;color:var(--nf-ink-mid);border-bottom:2px solid transparent;white-space:nowrap;transition:all .2s} .tab-btn.active{color:var(--nf-ink);font-weight:600;border-bottom-color:var(--nf-copper)} .tpl-card{border-radius:18px;padding:20px 16px 16px;cursor:pointer;position:relative;overflow:hidden;aspect-ratio:.85;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .2s} .tpl-card:active{transform:scale(.97)} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* rappels_pedago */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} .dot-nav{width:10px;height:10px;border-radius:50%;background:var(--nf-ink-soft);cursor:pointer;transition:all .2s;flex-shrink:0} .dot-nav.active{background:var(--nf-copper);width:24px;border-radius:5px} /* mode_groupe */ :root{--nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD;--nf-copper:#C46742;--nf-copper-mid:#D97757;--nf-copper-glow:#F4CBA8;--nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12);--nf-green:#4A7B5C;--nf-violet:#7B5EA7;--font-serif:'Instrument Serif',Georgia,serif;--font-ui:'Geist',system-ui,sans-serif;--font-mono:'Geist Mono',monospace} *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .nf-orb{display:inline-block;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4CBA8 0%,#D97757 45%,#7C3A1F 100%);box-shadow:rgba(0,0,0,.35) -8px -10px 24px inset,rgba(217,119,87,.55) 0 0 60px;animation:nfBreath 5s ease-in-out infinite;position:relative} .nf-orb::before{content:'';position:absolute;inset:-16%;border-radius:50%;background:radial-gradient(circle,rgba(217,119,87,.4) 0%,transparent 70%);filter:blur(10px);z-index:-1;animation:nfBreath 5s ease-in-out infinite} @keyframes nfBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}} @keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}} .member-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.65rem;font-weight:700;color:#FDF9EE;flex-shrink:0;position:relative} .member-dot{position:absolute;bottom:1px;right:1px;width:10px;height:10px;border-radius:50%;border:2px solid var(--nf-beige)} .member-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--nf-ink-soft)} .member-row:last-child{border-bottom:none} .section{display:none}.section.active{display:block} .tab-btn{flex:1;padding:11px 6px;border:none;background:transparent;font-family:var(--font-mono);font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;color:var(--nf-ink-mid);border-bottom:2px solid transparent;transition:all .2s;text-align:center} .tab-btn.active{color:var(--nf-copper);border-bottom-color:var(--nf-copper);font-weight:700} .bpm-bar{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--nf-ink-soft)} .bpm-bar:last-child{border-bottom:none} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* preferences */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .chip{padding:10px 18px;border-radius:999px;border:1.5px solid var(--nf-ink-soft);background:var(--nf-beige-light);font-family:var(--font-ui);font-size:.88rem;cursor:pointer;color:var(--nf-ink);transition:all .2s;white-space:nowrap} .chip.active{background:rgba(196,103,66,.12);border-color:var(--nf-copper);color:var(--nf-copper);font-weight:500} .section-label{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nf-ink-mid);margin-bottom:10px;display:flex;align-items:center;gap:6px} .section-label span{font-size:.52rem;letter-spacing:.08em;opacity:.7} .day-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border-radius:12px;border:1.5px solid var(--nf-ink-soft);background:var(--nf-beige-light);cursor:pointer;transition:all .2s;min-width:0} .day-btn.active{background:rgba(196,103,66,.12);border-color:var(--nf-copper)} .day-btn .day-name{font-family:var(--font-mono);font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;color:var(--nf-ink-mid)} .day-btn.active .day-name{color:var(--nf-copper)} .day-btn .day-dot{width:7px;height:7px;border-radius:50%;background:var(--nf-ink-soft)} .day-btn.active .day-dot{background:var(--nf-copper)} .sound-card{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px;border-radius:14px;border:1.5px solid var(--nf-ink-soft);background:var(--nf-beige-light);cursor:pointer;transition:all .2s;position:relative} .sound-card.active{background:rgba(196,103,66,.1);border-color:var(--nf-copper)} .sound-card .sound-icon{font-size:1.3rem;line-height:1} .sound-card .sound-name{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.04em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;line-height:1.2} .sound-card.active .sound-name{color:var(--nf-copper)} .sound-card .play-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--nf-copper);opacity:0;transition:opacity .2s} .sound-card.active .play-dot{opacity:1} .sound-bar{display:flex;align-items:flex-end;gap:2px;height:10px} .sound-bar span{display:block;width:2px;border-radius:2px;background:var(--nf-ink-soft)} .sound-card.active .sound-bar span{background:var(--nf-copper)} @keyframes eq{from{transform:scaleY(.3)}to{transform:scaleY(1)}} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* personnalite */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .voice-card{border-radius:16px;padding:14px 16px;margin-bottom:8px;cursor:pointer;transition:all .2s;border:1.5px solid var(--nf-ink-soft);background:var(--nf-beige-light);display:flex;align-items:center;gap:12px} .voice-card.active{background:rgba(196,103,66,.07);border-color:var(--nf-copper)} .voice-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-style:italic;font-size:1.1rem;color:#FDF9EE;flex-shrink:0} .play-btn{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--nf-ink-soft);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.75rem;color:var(--nf-ink-mid);flex-shrink:0;transition:all .2s} .voice-card.active .play-btn{border-color:var(--nf-copper);color:var(--nf-copper)} .tab-btn{flex:1;padding:10px 8px;border:none;background:transparent;font-family:var(--font-ui);font-size:.88rem;cursor:pointer;border-bottom:2px solid transparent;color:var(--nf-ink-mid);transition:all .2s;white-space:nowrap} .tab-btn.active{color:var(--nf-copper);border-bottom-color:var(--nf-copper);font-weight:600} .row-setting{background:var(--nf-beige-light);border-radius:14px;padding:14px 16px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* forfaits */ :root{ --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-green:#4A7B5C;--nf-violet:#7B5EA7;--nf-sky:#2E86C1; --nf-gold:#B8860B;--nf-orange:#E67E22; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} /* Tabs */ .main-tabs{display:flex;border-bottom:1px solid var(--nf-ink-soft);background:var(--nf-beige-light);position:sticky;top:0;z-index:10} .main-tab{flex:1;padding:12px 6px;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;border:none;background:transparent;cursor:pointer;color:var(--nf-ink-mid);border-bottom:2px solid transparent;transition:all .2s;text-align:center} .main-tab.active{color:var(--nf-copper);border-bottom-color:var(--nf-copper);font-weight:700} .section{display:none}.section.active{display:block} /* Plan card */ .plan-card{border-radius:20px;padding:20px;margin-bottom:14px;position:relative;overflow:hidden} .plan-card.free{background:var(--nf-beige-light);border:1.5px solid var(--nf-ink-soft)} .plan-card.premium{background:var(--nf-beige-light);border:2px solid var(--nf-copper)} .plan-card.formation{background:rgba(74,123,92,.06);border:2px solid var(--nf-green)} .plan-card.lancement{background:rgba(230,126,34,.07);border:2px solid var(--nf-orange)} .plan-card.promo{background:rgba(184,134,11,.07);border:2px solid var(--nf-gold)} .plan-card.duo{background:rgba(123,94,167,.06);border:2px solid var(--nf-violet)} .plan-card.cadeau{background:rgba(196,103,66,.06);border:1.5px dashed rgba(196,103,66,.4)} /* Recommended badge */ .rec-badge{position:absolute;top:14px;right:14px;font-family:var(--font-mono);font-size:.48rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;font-weight:700} /* Price display */ .price-big{font-family:var(--font-serif);font-style:italic;line-height:1} .price-old{font-family:var(--font-serif);font-style:italic;color:var(--nf-ink-mid);text-decoration:line-through;font-size:1.2rem} /* Feature list */ .feat-row{display:flex;align-items:flex-start;gap:8px;padding:5px 0} .feat-check{flex-shrink:0;font-size:.85rem;margin-top:1px} .feat-txt{font-size:.85rem;line-height:1.4;color:var(--nf-ink)} .feat-txt.dim{color:var(--nf-ink-mid)} /* CTA */ .cta-btn{width:100%;padding:14px;border:none;border-radius:999px;font-family:var(--font-ui);font-size:.92rem;font-weight:500;cursor:pointer;margin-top:14px;transition:all .2s} .cta-copper{background:var(--nf-copper);color:#FDF9EE;box-shadow:rgba(196,103,66,.28) 0 4px 14px} .cta-green{background:var(--nf-green);color:#FDF9EE;box-shadow:rgba(74,123,92,.25) 0 4px 14px} .cta-outline{background:transparent;border:1.5px solid var(--nf-ink-soft);color:var(--nf-ink)} .cta-orange{background:var(--nf-orange);color:#FDF9EE;box-shadow:rgba(230,126,34,.3) 0 4px 14px} .cta-violet{background:var(--nf-violet);color:#FDF9EE;box-shadow:rgba(123,94,167,.25) 0 4px 14px} .cta-gold{background:var(--nf-gold);color:#FDF9EE;box-shadow:rgba(184,134,11,.25) 0 4px 14px} /* Section label */ .sec-lbl{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--nf-ink-mid);margin:20px 0 10px;display:flex;align-items:center;gap:8px} .sec-lbl::after{content:'';flex:1;height:1px;background:var(--nf-ink-soft)} /* Timer */ .timer-bar{display:flex;align-items:center;gap:8px;background:rgba(230,126,34,.1);border-radius:8px;padding:8px 12px;margin-bottom:12px} .timer-val{font-family:var(--font-mono);font-size:.9rem;font-weight:700;color:var(--nf-orange)} /* Multi pill */ .multi-pill{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap} .mpill{padding:7px 14px;border-radius:999px;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.06em;border:1.5px solid var(--nf-ink-soft);background:var(--nf-beige-light);cursor:pointer;transition:all .2s;white-space:nowrap} .mpill.sel{background:var(--nf-violet);border-color:var(--nf-violet);color:#FDF9EE} /* Cadeau options */ .cadeau-opt{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--nf-ink-soft)} .cadeau-opt:last-child{border-bottom:none} /* Toggle switch */ .toggle{position:relative;width:44px;height:26px;flex-shrink:0} .toggle input{opacity:0;width:0;height:0;position:absolute} .slider{position:absolute;inset:0;background:var(--nf-ink-soft);border-radius:999px;cursor:pointer;transition:.25s} .slider:before{content:'';position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;left:3px;top:3px;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.2)} input:checked+.slider{background:var(--nf-copper)} input:checked+.slider:before{transform:translateX(18px)} .code-link{text-align:center;font-family:var(--font-serif);font-style:italic;font-size:.9rem;color:var(--nf-copper);cursor:pointer;padding:12px;display:block} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* formation */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757;--nf-copper-glow:#F4CBA8; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .formation-card{border-radius:18px;padding:18px;margin-bottom:12px;border:1.5px solid var(--nf-ink-soft);background:var(--nf-beige-light);cursor:pointer;transition:all .2s} .formation-card.active{border-color:var(--nf-copper);background:rgba(196,103,66,.05)} .formation-card.locked{opacity:.5;cursor:default} .badge-acc{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-family:var(--font-mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase} .badge-active{background:rgba(74,123,92,.15);color:#4A7B5C} .badge-locked{background:var(--nf-beige-deep);color:var(--nf-ink-mid)} .badge-soon{background:rgba(196,103,66,.12);color:var(--nf-copper)} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* badges */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-copper-mid:#D97757; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .badge-card{background:var(--nf-beige-light);border-radius:14px;padding:14px 10px;text-align:center;position:relative} .badge-card.locked{opacity:.45;border:1.5px dashed var(--nf-ink-soft)} .badge-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;font-size:1.3rem} .badge-icon.u{background:rgba(196,103,66,.15)} .badge-icon.l{background:var(--nf-beige-deep)} .badge-name{font-weight:600;font-size:.75rem;line-height:1.2;margin-bottom:3px} .badge-desc{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.06em;text-transform:uppercase;color:var(--nf-ink-mid);line-height:1.3} .progress-bar{height:3px;background:var(--nf-ink-soft);border-radius:3px;margin-top:6px;overflow:hidden} .progress-fill{height:100%;background:var(--nf-copper);border-radius:3px} .section-header{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nf-ink-mid);margin:16px 0 8px;padding-left:2px} .tab-filter{padding:6px 12px;border-radius:999px;font-family:var(--font-ui);font-size:.8rem;border:none;cursor:pointer;white-space:nowrap;transition:all .2s;background:transparent;color:var(--nf-ink-mid)} .tab-filter.active{color:var(--nf-ink);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--nf-copper)} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} .new-badge{position:absolute;top:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:var(--nf-copper);font-size:.5rem;color:#FDF9EE;display:flex;align-items:center;justify-content:center;font-weight:700} /* empty_states */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .es-card{border-radius:18px;padding:20px;margin-bottom:12px} .es-card-beige{background:rgba(196,103,66,.07);border:1.5px solid rgba(196,103,66,.18)} .es-card-white{background:var(--nf-beige-light)} .es-cta{display:inline-flex;align-items:center;padding:10px 20px;border-radius:999px;border:1.5px solid rgba(196,103,66,.4);background:transparent;font-family:var(--font-ui);font-size:.85rem;color:var(--nf-copper);cursor:pointer;margin-top:12px;transition:all .2s} .es-cta:hover{background:rgba(196,103,66,.1)} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* code_avantage */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-sky:#2E86C1;--nf-green:#4A7B5C;--nf-violet:#7B5EA7; --nf-orange:#E67E22; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .section{display:none}.section.active{display:block} .screen{display:none}.screen.active{display:block} /* Tabs */ .main-tabs{display:flex;border-bottom:1px solid var(--nf-ink-soft);background:var(--nf-beige-light);position:sticky;top:0;z-index:10} .main-tab{flex:1;padding:13px 10px;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;border:none;background:transparent;cursor:pointer;color:var(--nf-ink-mid);border-bottom:2px solid transparent;transition:all .2s;text-align:center} .main-tab.active{color:var(--nf-violet);border-bottom-color:var(--nf-violet);font-weight:700} /* Cards */ .card{background:var(--nf-beige-light);border-radius:14px;padding:14px 16px;margin-bottom:10px} .card-violet{background:rgba(123,94,167,.07);border:1.5px solid rgba(123,94,167,.22);border-radius:14px;padding:14px 16px;margin-bottom:10px} .card-copper{background:rgba(196,103,66,.07);border:1.5px solid rgba(196,103,66,.2);border-radius:14px;padding:14px 16px;margin-bottom:10px} .card-green{background:rgba(74,123,92,.06);border:1.5px solid rgba(74,123,92,.18);border-radius:14px;padding:14px 16px;margin-bottom:10px} .card-sky{background:rgba(46,134,193,.06);border:1.5px solid rgba(46,134,193,.2);border-radius:14px;padding:14px 16px;margin-bottom:10px} .card-orange{background:rgba(230,126,34,.06);border:1.5px solid rgba(230,126,34,.2);border-radius:14px;padding:14px 16px;margin-bottom:10px} /* Buttons */ .btn-copy{padding:9px 16px;border-radius:999px;background:var(--nf-violet);border:none;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;color:#FDF9EE;cursor:pointer;flex-shrink:0;transition:all .2s} .btn-share{padding:9px 16px;border-radius:999px;background:transparent;border:1.5px solid rgba(123,94,167,.4);font-family:var(--font-mono);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;color:var(--nf-violet);cursor:pointer;flex-shrink:0} .btn-primary{width:100%;padding:14px;border-radius:999px;background:var(--nf-violet);color:#FDF9EE;border:none;font-family:var(--font-ui);font-size:.92rem;font-weight:500;cursor:pointer;box-shadow:rgba(123,94,167,.25) 0 4px 14px} .btn-copper{width:100%;padding:14px;border-radius:999px;background:var(--nf-copper);color:#FDF9EE;border:none;font-family:var(--font-ui);font-size:.92rem;font-weight:500;cursor:pointer;box-shadow:rgba(196,103,66,.25) 0 4px 14px} /* Status badges */ .badge{font-family:var(--font-mono);font-size:.48rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px} .badge-pending{background:rgba(230,126,34,.12);color:var(--nf-orange)} .badge-locked{background:rgba(46,134,193,.1);color:var(--nf-sky)} .badge-credited{background:rgba(74,123,92,.1);color:var(--nf-green)} .badge-cancelled{background:var(--nf-beige-deep);color:var(--nf-ink-mid)} .badge-active{background:rgba(74,123,92,.1);color:var(--nf-green)} /* Reward table */ .reward-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--nf-ink-soft)} .reward-row:last-child{border-bottom:none} /* Form */ .form-input{width:100%;padding:12px 14px;border:1.5px solid var(--nf-ink-soft);border-radius:12px;font-family:var(--font-mono);font-size:.9rem;color:var(--nf-ink);background:var(--nf-beige-light);outline:none;transition:border .2s;text-transform:uppercase;letter-spacing:.1em} .form-input:focus{border-color:var(--nf-violet)} /* Filleul row */ .filleul-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--nf-ink-soft)} .filleul-row:last-child{border-bottom:none} .avatar-sm{width:34px;height:34px;border-radius:50%;background:var(--nf-beige-deep);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.58rem;font-weight:700;flex-shrink:0} .lock-icon{font-size:1rem;flex-shrink:0} .progress-mini{height:3px;background:var(--nf-ink-soft);border-radius:3px;overflow:hidden;margin-top:4px} .progress-fill{height:100%;border-radius:3px} /* Misc */ .sec-hdr{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nf-ink-mid);margin:16px 0 8px} .content{padding:14px 18px 80px} .divider{height:1px;background:var(--nf-ink-soft);margin:14px 0} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} @keyframes dot{0%,100%{transform:scale(.5);opacity:.4}50%{transform:scale(1);opacity:1}} @keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} /* parametres */ :root{--nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD;--nf-copper:#C46742;--nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12);--nf-green:#4A7B5C;--font-serif:'Instrument Serif',Georgia,serif;--font-ui:'Geist',system-ui,sans-serif;--font-mono:'Geist Mono',monospace} *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .settings-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--nf-beige-light);border-bottom:1px solid var(--nf-ink-soft);cursor:pointer} .settings-row:first-child{border-radius:14px 14px 0 0} .settings-row:last-child{border-radius:0 0 14px 14px;border-bottom:none} .settings-group{border-radius:14px;overflow:hidden;margin-bottom:10px} .toggle{position:relative;width:44px;height:25px;flex-shrink:0} .toggle input{opacity:0;width:0;height:0;position:absolute} .slider{position:absolute;inset:0;background:var(--nf-ink-soft);border-radius:999px;cursor:pointer;transition:.25s} .slider:before{content:'';position:absolute;width:19px;height:19px;border-radius:50%;background:#fff;left:3px;top:3px;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.2)} input:checked+.slider{background:var(--nf-copper)} input:checked+.slider:before{transform:translateX(19px)} .sec-hdr{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nf-ink-mid);margin:16px 0 8px} .form-input{width:100%;padding:12px 14px;border:1.5px solid var(--nf-ink-soft);border-radius:12px;font-family:var(--font-ui);font-size:.9rem;color:var(--nf-ink);background:var(--nf-beige-light);outline:none;transition:border .2s} .form-input:focus{border-color:var(--nf-copper)} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} .section{display:none}.section.active{display:block} .tab-btn{flex:1;padding:10px;border:none;background:transparent;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:var(--nf-ink-mid);border-bottom:2px solid transparent;transition:all .2s} .tab-btn.active{color:var(--nf-copper);border-bottom-color:var(--nf-copper);font-weight:700} /* prescripteur_cx */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .form-input{width:100%;padding:14px 16px;border:1.5px solid var(--nf-ink-soft);border-radius:14px;font-family:var(--font-ui);font-size:.95rem;color:var(--nf-ink);background:var(--nf-beige-light);outline:none;transition:border .2s} .form-input:focus{border-color:var(--nf-copper)} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* prescripteur_db */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-sky:#1A5276;--nf-sky-mid:#2980B9; --nf-green:#4A7B5C;--nf-violet:#7B5EA7; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;max-width:480px;margin:0 auto;min-height:100dvh} /* ── Sections ── */ .section{display:none} .section.active{display:block} /* ── Top bar prescripteur ── */ .presc-bar{background:var(--nf-sky);padding:14px 20px;display:flex;align-items:center;gap:10px;flex-shrink:0} .presc-badge{background:rgba(255,255,255,.2);color:#FDF9EE;font-family:var(--font-mono);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.25);flex-shrink:0} /* ── Sub-tabs ── */ .sub-tabs{display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--nf-ink-soft);background:var(--nf-beige-light);position:sticky;top:0;z-index:10} .sub-tab{padding:12px 16px;font-family:var(--font-mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;border:none;background:transparent;cursor:pointer;white-space:nowrap;color:var(--nf-ink-mid);border-bottom:2px solid transparent;transition:all .2s;flex-shrink:0} .sub-tab.active{color:var(--nf-sky-mid);border-bottom-color:var(--nf-sky-mid);font-weight:700} /* ── Cards ── */ .card{background:var(--nf-beige-light);border-radius:14px;padding:14px 16px;margin-bottom:10px} .card-blue{background:rgba(41,128,185,.06);border:1.5px solid rgba(41,128,185,.2);border-radius:14px;padding:14px 16px;margin-bottom:10px} .card-copper{background:rgba(196,103,66,.07);border:1.5px solid rgba(196,103,66,.2);border-radius:14px;padding:14px 16px;margin-bottom:10px} .card-green{background:rgba(74,123,92,.06);border:1.5px solid rgba(74,123,92,.18);border-radius:14px;padding:14px 16px;margin-bottom:10px} /* ── Stats ── */ .stat-box{background:var(--nf-beige-light);border-radius:12px;padding:13px;text-align:center} .stat-val{font-family:var(--font-serif);font-style:italic;font-size:1.7rem;color:var(--nf-ink);line-height:1;margin-bottom:3px} .stat-lbl{font-family:var(--font-mono);font-size:.48rem;letter-spacing:.08em;text-transform:uppercase;color:var(--nf-ink-mid);line-height:1.3} .stat-trend{font-size:.7rem;margin-top:3px} /* ── Copy button ── */ .copy-btn{padding:7px 14px;border-radius:999px;background:var(--nf-sky-mid);border:none;font-family:var(--font-mono);font-size:.52rem;letter-spacing:.06em;text-transform:uppercase;color:#FDF9EE;cursor:pointer;flex-shrink:0;transition:all .2s} .copy-btn:active{opacity:.8;transform:scale(.97)} /* ── Status badges ── */ .status-badge{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px} .badge-attente{background:rgba(196,103,66,.1);color:var(--nf-copper)} .badge-validee{background:rgba(41,128,185,.1);color:var(--nf-sky-mid)} .badge-payee{background:rgba(74,123,92,.1);color:var(--nf-green)} .badge-actif{background:rgba(74,123,92,.1);color:var(--nf-green)} .badge-expire{background:var(--nf-beige-deep);color:var(--nf-ink-mid)} .badge-essai{background:rgba(196,103,66,.1);color:var(--nf-copper)} /* ── Row ── */ .field-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--nf-ink-soft)} .field-row:last-child{border-bottom:none} .field-lbl{font-family:var(--font-mono);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:var(--nf-ink-mid)} .field-val{font-size:.9rem;color:var(--nf-ink);font-weight:500;text-align:right} /* ── Form ── */ .form-input{width:100%;padding:12px 14px;border:1.5px solid var(--nf-ink-soft);border-radius:12px;font-family:var(--font-ui);font-size:.9rem;color:var(--nf-ink);background:var(--nf-beige-light);outline:none;transition:border .2s} .form-input:focus{border-color:var(--nf-sky-mid)} .form-label{font-family:var(--font-mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--nf-ink-mid);margin-bottom:6px;display:block} /* ── Section header ── */ .sec-hdr{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nf-ink-mid);margin:16px 0 8px} /* ── Bar chart ── */ .bar-col{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1} .bar-fill{width:100%;border-radius:4px 4px 0 0} .bar-lbl{font-family:var(--font-mono);font-size:.48rem;color:var(--nf-ink-mid)} .bar-val{font-family:var(--font-mono);font-size:.5rem;color:var(--nf-ink-mid)} /* ── History row ── */ .history-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--nf-ink-soft)} .history-row:last-child{border-bottom:none} /* ── Client row ── */ .client-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--nf-ink-soft)} .client-row:last-child{border-bottom:none} .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0} /* ── Misc ── */ .divider{height:1px;background:var(--nf-ink-soft);margin:12px 0} .content{padding:14px 18px 60px} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* prescripteur_list */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .filter-chip{padding:8px 16px;border-radius:999px;font-family:var(--font-ui);font-size:.82rem;cursor:pointer;white-space:nowrap;border:none;transition:all .2s} .filter-chip.active{background:var(--nf-copper);color:#FDF9EE;font-weight:500} .filter-chip.inactive{background:var(--nf-beige-light);color:var(--nf-ink-mid)} .client-card{background:var(--nf-beige-light);border-radius:14px;padding:14px 16px;margin-bottom:8px;display:flex;align-items:center;gap:12px} .client-avatar{width:40px;height:40px;border-radius:50%;background:rgba(42,37,32,.08);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.7rem;font-weight:600;color:var(--nf-ink);flex-shrink:0} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* prescripteur_fiche */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .field-row{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid var(--nf-ink-soft)} .field-row:last-child{border-bottom:none} .field-label{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--nf-ink-mid);flex-shrink:0} .field-value{font-size:.92rem;color:var(--nf-ink);font-weight:500;text-align:right;max-width:220px} .section-block{background:var(--nf-beige-light);border-radius:16px;overflow:hidden;margin-bottom:12px} .section-header{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--nf-ink-soft)} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* admin_dashboard */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-sky:#2E86C1;--nf-sky-dark:#1A5276; --nf-green:#4A7B5C;--nf-violet:#7B5EA7; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;max-width:480px;margin:0 auto;min-height:100dvh} .section{display:none}.section.active{display:block} .admin-bar{background:var(--nf-sky);padding:13px 18px;display:flex;align-items:center;gap:10px} .admin-badge{background:rgba(255,255,255,.22);color:#FDF9EE;font-family:var(--font-mono);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.28)} .sub-tabs{display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--nf-ink-soft);background:var(--nf-beige-light);position:sticky;top:0;z-index:10} .sub-tab{padding:11px 14px;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;border:none;background:transparent;cursor:pointer;white-space:nowrap;color:var(--nf-ink-mid);border-bottom:2px solid transparent;transition:all .2s;flex-shrink:0} .sub-tab.active{color:var(--nf-sky);border-bottom-color:var(--nf-sky);font-weight:700} .card{background:var(--nf-beige-light);border-radius:14px;padding:14px 16px;margin-bottom:10px} .card-copper{background:rgba(196,103,66,.07);border:1.5px solid rgba(196,103,66,.2);border-radius:14px;padding:14px 16px;margin-bottom:10px} .card-sky{background:rgba(46,134,193,.06);border:1.5px solid rgba(46,134,193,.2);border-radius:14px;padding:14px 16px;margin-bottom:10px} .card-green{background:rgba(74,123,92,.06);border:1.5px solid rgba(74,123,92,.18);border-radius:14px;padding:14px 16px;margin-bottom:10px} .card-violet{background:rgba(123,94,167,.06);border:1.5px solid rgba(123,94,167,.18);border-radius:14px;padding:14px 16px;margin-bottom:10px} .stat-box{background:var(--nf-beige-light);border-radius:12px;padding:12px;text-align:center} .stat-val{font-family:var(--font-serif);font-style:italic;font-size:1.6rem;color:var(--nf-ink);line-height:1;margin-bottom:3px} .stat-lbl{font-family:var(--font-mono);font-size:.48rem;letter-spacing:.08em;text-transform:uppercase;color:var(--nf-ink-mid);line-height:1.3} .stat-trend{font-size:.7rem;margin-top:3px} .btn-primary{padding:9px 18px;border-radius:999px;background:var(--nf-sky);border:none;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;color:#FDF9EE;cursor:pointer;white-space:nowrap} .btn-outline{padding:8px 14px;border-radius:999px;background:transparent;border:1.5px solid var(--nf-ink-soft);font-family:var(--font-mono);font-size:.52rem;cursor:pointer;color:var(--nf-ink)} .btn-danger{padding:8px 14px;border-radius:999px;background:transparent;border:1.5px solid rgba(196,103,66,.4);font-family:var(--font-mono);font-size:.52rem;cursor:pointer;color:var(--nf-copper)} .btn-green{padding:8px 14px;border-radius:999px;background:var(--nf-green);border:none;font-family:var(--font-mono);font-size:.52rem;cursor:pointer;color:#FDF9EE} .form-label{font-family:var(--font-mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--nf-ink-mid);margin-bottom:6px;display:block} .form-input{width:100%;padding:11px 14px;border:1.5px solid var(--nf-ink-soft);border-radius:12px;font-family:var(--font-ui);font-size:.9rem;color:var(--nf-ink);background:var(--nf-beige-light);outline:none;transition:border .2s} .form-input:focus{border-color:var(--nf-sky)} .form-group{margin-bottom:12px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px} .type-btn{flex:1;padding:10px 6px;border-radius:12px;border:1.5px solid var(--nf-ink-soft);background:var(--nf-beige-light);font-family:var(--font-ui);font-size:.82rem;cursor:pointer;text-align:center;transition:all .2s} .type-btn.active{background:rgba(46,134,193,.1);border-color:var(--nf-sky);color:var(--nf-sky)} .toggle{position:relative;width:44px;height:25px;flex-shrink:0} .toggle input{opacity:0;width:0;height:0;position:absolute} .slider{position:absolute;inset:0;background:var(--nf-ink-soft);border-radius:999px;cursor:pointer;transition:.25s} .slider:before{content:'';position:absolute;width:19px;height:19px;border-radius:50%;background:#fff;left:3px;top:3px;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.2)} input:checked+.slider{background:var(--nf-sky)} input:checked+.slider:before{transform:translateX(19px)} .bon-code{font-family:var(--font-mono);font-size:.9rem;font-weight:700;letter-spacing:.1em;color:var(--nf-sky-dark)} .badge{font-family:var(--font-mono);font-size:.48rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:4px} .badge-pct{background:rgba(74,123,92,.12);color:var(--nf-green)} .badge-eur{background:rgba(46,134,193,.1);color:var(--nf-sky)} .badge-mois{background:rgba(123,94,167,.1);color:var(--nf-violet)} .badge-actif{background:rgba(74,123,92,.1);color:var(--nf-green)} .badge-inactif{background:var(--nf-beige-deep);color:var(--nf-ink-mid)} .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0} .sec-hdr{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nf-ink-mid);margin:14px 0 8px;display:flex;align-items:center;justify-content:space-between} .sec-hdr a{color:var(--nf-sky);cursor:pointer;font-size:.52rem} .bar-col{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1} .bar-lbl{font-family:var(--font-mono);font-size:.48rem;color:var(--nf-ink-mid)} .content{padding:14px 18px 60px} .divider{height:1px;background:var(--nf-ink-soft);margin:12px 0} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} .client-row{background:var(--nf-beige-light);border-radius:12px;padding:12px 14px;margin-bottom:7px;display:flex;align-items:center;gap:10px} .avatar{width:36px;height:36px;border-radius:50%;background:var(--nf-beige-deep);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.6rem;font-weight:700;flex-shrink:0} .plan-badge{font-family:var(--font-mono);font-size:.46rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:4px} .badge-core{background:rgba(74,123,92,.12);color:var(--nf-green)} .badge-elite{background:rgba(123,94,167,.12);color:var(--nf-violet)} .badge-premium{background:rgba(46,134,193,.1);color:var(--nf-sky)} .badge-trial{background:rgba(196,103,66,.1);color:var(--nf-copper)} /* admin_clients */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-sky:#2E86C1; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .admin-bar{background:var(--nf-sky);padding:14px 20px;display:flex;align-items:center;gap:10px} .admin-badge{background:rgba(255,255,255,.25);color:#FDF9EE;font-family:var(--font-mono);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:6px;flex-shrink:0;border:1px solid rgba(255,255,255,.3)} .filter-chip{padding:7px 12px;border-radius:999px;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.06em;cursor:pointer;white-space:nowrap;border:none;transition:all .2s} .filter-chip.active{background:var(--nf-sky);color:#FDF9EE} .filter-chip.inactive{background:var(--nf-beige-light);color:var(--nf-ink-mid)} .client-row{background:var(--nf-beige-light);border-radius:14px;padding:13px 14px;margin-bottom:7px;display:flex;align-items:center;gap:11px;cursor:pointer} .avatar{width:38px;height:38px;border-radius:50%;background:rgba(42,37,32,.08);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.64rem;font-weight:600;color:var(--nf-ink);flex-shrink:0} .plan-badge{font-family:var(--font-mono);font-size:.48rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 6px;border-radius:4px} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* admin_analytics */ :root{--nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD;--nf-copper:#C46742;--nf-sky:#2E86C1;--nf-green:#4A7B5C;--nf-violet:#7B5EA7;--nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12);--font-serif:'Instrument Serif',Georgia,serif;--font-ui:'Geist',system-ui,sans-serif;--font-mono:'Geist Mono',monospace} *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .admin-bar{background:var(--nf-sky);padding:13px 18px;display:flex;align-items:center;gap:10px} .admin-badge{background:rgba(255,255,255,.22);color:#FDF9EE;font-family:var(--font-mono);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.28)} .card{background:var(--nf-beige-light);border-radius:14px;padding:14px 16px;margin-bottom:10px} .sec-hdr{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nf-ink-mid);margin:14px 0 8px;display:flex;align-items:center;justify-content:space-between} .period-tab{display:flex;background:var(--nf-beige-deep);border-radius:8px;padding:3px;gap:3px} .ptab{padding:5px 10px;border:none;border-radius:6px;font-family:var(--font-mono);font-size:.52rem;cursor:pointer;background:transparent;color:var(--nf-ink-mid);transition:all .2s} .ptab.active{background:var(--nf-beige-light);color:var(--nf-ink);box-shadow:0 1px 3px rgba(42,37,32,.1)} .stat-box{background:var(--nf-beige-light);border-radius:12px;padding:12px;text-align:center} .funnel-row{display:flex;align-items:center;gap:10px;margin-bottom:8px} .funnel-bar{flex:1;height:22px;border-radius:6px;display:flex;align-items:center;padding:0 10px;position:relative} .retention-cell{flex:1;aspect-ratio:1;border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.6rem;font-weight:700} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* admin_messages */ :root{--nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD;--nf-copper:#C46742;--nf-sky:#2E86C1;--nf-green:#4A7B5C;--nf-violet:#7B5EA7;--nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12);--font-serif:'Instrument Serif',Georgia,serif;--font-ui:'Geist',system-ui,sans-serif;--font-mono:'Geist Mono',monospace} *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .admin-bar{background:var(--nf-sky);padding:13px 18px;display:flex;align-items:center;gap:10px} .admin-badge{background:rgba(255,255,255,.22);color:#FDF9EE;font-family:var(--font-mono);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.28)} .card{background:var(--nf-beige-light);border-radius:14px;padding:14px 16px;margin-bottom:10px} .sec-hdr{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nf-ink-mid);margin:14px 0 8px} .form-label{font-family:var(--font-mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--nf-ink-mid);margin-bottom:6px;display:block} .form-input{width:100%;padding:11px 14px;border:1.5px solid var(--nf-ink-soft);border-radius:12px;font-family:var(--font-ui);font-size:.9rem;color:var(--nf-ink);background:var(--nf-beige-light);outline:none;transition:border .2s} .form-input:focus{border-color:var(--nf-sky)} .seg-chip{padding:8px 14px;border-radius:999px;font-family:var(--font-ui);font-size:.84rem;cursor:pointer;border:1.5px solid var(--nf-ink-soft);background:var(--nf-beige-light);transition:all .2s;white-space:nowrap} .seg-chip.active{background:rgba(46,134,193,.12);border-color:var(--nf-sky);color:var(--nf-sky);font-weight:500} .hist-row{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--nf-ink-soft)} .hist-row:last-child{border-bottom:none} .badge-sent{font-family:var(--font-mono);font-size:.48rem;text-transform:uppercase;padding:3px 8px;border-radius:4px;flex-shrink:0} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} .section{display:none}.section.active{display:block} .tab-btn{flex:1;padding:11px 6px;border:none;background:transparent;font-family:var(--font-mono);font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;color:var(--nf-ink-mid);border-bottom:2px solid transparent;transition:all .2s;text-align:center} .tab-btn.active{color:var(--nf-sky);border-bottom-color:var(--nf-sky);font-weight:700} /* admin_textes */ :root{ --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-sky:#2E86C1;--nf-green:#4A7B5C; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .admin-bar{background:var(--nf-sky);padding:13px 18px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20} .admin-badge{background:rgba(255,255,255,.22);color:#FDF9EE;font-family:var(--font-mono);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.28)} /* Search */ .search-bar{background:var(--nf-beige-light);border-radius:14px;padding:11px 14px;display:flex;align-items:center;gap:10px;margin:14px 18px;box-shadow:0 2px 8px rgba(42,37,32,.06)} .search-bar input{border:none;background:transparent;font-family:var(--font-ui);font-size:.9rem;color:var(--nf-ink);outline:none;width:100%} /* Category filters */ .cat-filters{display:flex;gap:6px;overflow-x:auto;padding:0 18px 8px;scrollbar-width:none} .cat-chip{padding:6px 14px;border-radius:999px;font-family:var(--font-mono);font-size:.52rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;border:none;cursor:pointer;transition:all .2s;flex-shrink:0} .cat-chip.active{background:var(--nf-sky);color:#FDF9EE} .cat-chip.inactive{background:var(--nf-beige-light);color:var(--nf-ink-mid)} /* Screen group */ .screen-group{margin:0 18px 20px} .group-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;cursor:pointer;user-select:none} .group-label{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nf-sky);flex:1} .group-count{font-family:var(--font-mono);font-size:.52rem;color:var(--nf-ink-mid)} .group-toggle{font-size:.75rem;color:var(--nf-ink-mid);transition:transform .2s} .group-toggle.open{transform:rotate(90deg)} /* Text block */ .text-block{background:var(--nf-beige-light);border-radius:14px;margin-bottom:8px;overflow:hidden;transition:all .2s} .text-block-header{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer} .screen-tag{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;background:var(--nf-beige-deep);color:var(--nf-ink-mid);padding:3px 8px;border-radius:4px;flex-shrink:0} .text-key{font-size:.86rem;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .edit-indicator{width:8px;height:8px;border-radius:50%;flex-shrink:0} .text-editor{display:none;padding:0 14px 14px} .text-editor.open{display:block} .current-text{font-family:var(--font-serif);font-style:italic;font-size:.88rem;color:var(--nf-ink-mid);background:var(--nf-beige);border-radius:10px;padding:10px 12px;margin-bottom:8px;line-height:1.5;border-left:3px solid var(--nf-ink-soft)} .edit-textarea{width:100%;padding:11px 13px;border:1.5px solid var(--nf-ink-soft);border-radius:10px;font-family:var(--font-serif);font-style:italic;font-size:.88rem;color:var(--nf-ink);background:var(--nf-beige-light);outline:none;resize:none;line-height:1.55;transition:border .2s;min-height:80px} .edit-textarea:focus{border-color:var(--nf-sky)} .edit-actions{display:flex;gap:8px;margin-top:8px} .btn-save{flex:1;padding:9px;border-radius:999px;background:var(--nf-sky);border:none;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;color:#FDF9EE;cursor:pointer} .btn-reset{padding:9px 14px;border-radius:999px;background:transparent;border:1.5px solid var(--nf-ink-soft);font-family:var(--font-mono);font-size:.52rem;cursor:pointer;color:var(--nf-ink-mid)} /* Modified badge */ .badge-modified{font-family:var(--font-mono);font-size:.46rem;text-transform:uppercase;background:rgba(196,103,66,.1);color:var(--nf-copper);padding:2px 7px;border-radius:4px;flex-shrink:0} .badge-ok{font-family:var(--font-mono);font-size:.46rem;text-transform:uppercase;background:rgba(74,123,92,.1);color:var(--nf-green);padding:2px 7px;border-radius:4px;flex-shrink:0} /* Toast */ #toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--nf-ink);color:#FDF9EE;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;padding:10px 20px;border-radius:999px;opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap;z-index:100} #toast.show{opacity:1} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} .divider{height:1px;background:var(--nf-ink-soft);margin:0 18px 14px} /* admin_offres */ :root{ --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-sky:#2E86C1;--nf-green:#4A7B5C; --nf-violet:#7B5EA7;--nf-gold:#B8860B;--nf-orange:#E67E22; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .admin-bar{background:var(--nf-sky);padding:13px 18px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20} .admin-badge{background:rgba(255,255,255,.22);color:#FDF9EE;font-family:var(--font-mono);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.28)} /* Sub-tabs */ .sub-tabs{display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--nf-ink-soft);background:var(--nf-beige-light);position:sticky;top:47px;z-index:10} .sub-tab{padding:11px 14px;font-family:var(--font-mono);font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;border:none;background:transparent;cursor:pointer;white-space:nowrap;color:var(--nf-ink-mid);border-bottom:2px solid transparent;transition:all .2s;flex-shrink:0} .sub-tab.active{color:var(--nf-sky);border-bottom-color:var(--nf-sky);font-weight:700} .section{display:none}.section.active{display:block} /* Form elements */ .form-group{margin-bottom:13px} .form-label{font-family:var(--font-mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--nf-ink-mid);margin-bottom:6px;display:block} .form-input{width:100%;padding:12px 14px;border:1.5px solid var(--nf-ink-soft);border-radius:12px;font-family:var(--font-ui);font-size:.9rem;color:var(--nf-ink);background:var(--nf-beige-light);outline:none;transition:border .2s} .form-input:focus{border-color:var(--nf-sky)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px} .form-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px} /* Toggle */ .toggle{position:relative;width:44px;height:26px;flex-shrink:0} .toggle input{opacity:0;width:0;height:0;position:absolute} .slider{position:absolute;inset:0;background:var(--nf-ink-soft);border-radius:999px;cursor:pointer;transition:.25s} .slider:before{content:'';position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;left:3px;top:3px;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.2)} input:checked+.slider{background:var(--nf-sky)} input:checked+.slider:before{transform:translateX(18px)} /* Cards */ .offer-card{background:var(--nf-beige-light);border-radius:14px;overflow:hidden;margin-bottom:10px} .offer-header{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;cursor:pointer;border-bottom:1px solid transparent;transition:border .2s} .offer-header.open{border-bottom-color:var(--nf-ink-soft)} .offer-body{display:none;padding:14px} .offer-body.open{display:block} .offer-title{font-weight:700;font-size:.9rem} .offer-meta{font-family:var(--font-mono);font-size:.5rem;text-transform:uppercase;color:var(--nf-ink-mid);margin-top:2px} /* Status dot */ .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .dot-green{background:var(--nf-green)} .dot-gray{background:var(--nf-ink-soft)} .dot-orange{background:var(--nf-orange)} /* Pricing preview */ .price-preview{background:var(--nf-beige-deep);border-radius:10px;padding:10px 12px;margin-top:10px;display:flex;justify-content:space-between;align-items:center} /* Buttons */ .btn-sky{padding:10px 18px;border-radius:999px;background:var(--nf-sky);border:none;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;color:#FDF9EE;cursor:pointer} .btn-outline{padding:9px 14px;border-radius:999px;background:transparent;border:1.5px solid var(--nf-ink-soft);font-family:var(--font-mono);font-size:.52rem;cursor:pointer;color:var(--nf-ink)} .btn-danger{padding:9px 14px;border-radius:999px;background:transparent;border:1.5px solid rgba(196,103,66,.4);font-family:var(--font-mono);font-size:.52rem;cursor:pointer;color:var(--nf-copper)} .btn-full{width:100%;padding:13px;border-radius:999px;background:var(--nf-sky);border:none;font-family:var(--font-ui);font-size:.92rem;font-weight:500;cursor:pointer;color:#FDF9EE;margin-top:4px} /* Visibility label */ .visibility-note{background:rgba(46,134,193,.07);border:1px solid rgba(46,134,193,.2);border-radius:8px;padding:8px 12px;font-size:.8rem;color:var(--nf-ink-mid);margin-top:8px;line-height:1.4} /* Section header */ .sec-hdr{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--nf-ink-mid);margin:16px 0 8px;display:flex;align-items:center;justify-content:space-between} .sec-hdr a{color:var(--nf-sky);cursor:pointer;font-size:.52rem} /* Color accent header */ .accent-strip{height:3px;border-radius:3px 3px 0 0} /* Toast */ #toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--nf-ink);color:#FDF9EE;font-family:var(--font-mono);font-size:.58rem;padding:10px 20px;border-radius:999px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:999;white-space:nowrap} #toast.show{opacity:1} .content{padding:14px 18px 60px} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} .divider{height:1px;background:var(--nf-ink-soft);margin:12px 0} /* admin_sessions */ :root{ --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-sky:#2E86C1;--nf-sky-dark:#1A5276; --nf-green:#4A7B5C;--nf-violet:#7B5EA7;--nf-orange:#E67E22; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .screen{display:none}.screen.active{display:block} .section{display:none}.section.active{display:block} /* Bars */ .admin-bar{background:var(--nf-sky);padding:13px 18px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20} .presc-bar{background:var(--nf-sky-dark);padding:13px 18px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20} .admin-badge{background:rgba(255,255,255,.22);color:#FDF9EE;font-family:var(--font-mono);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.28)} /* Tabs */ .sub-tabs{display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--nf-ink-soft);background:var(--nf-beige-light);position:sticky;top:47px;z-index:10} .sub-tab{padding:11px 14px;font-family:var(--font-mono);font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;border:none;background:transparent;cursor:pointer;white-space:nowrap;color:var(--nf-ink-mid);border-bottom:2px solid transparent;transition:all .2s;flex-shrink:0} .sub-tab.active{color:var(--nf-sky);border-bottom-color:var(--nf-sky);font-weight:700} /* Form */ .form-group{margin-bottom:13px} .form-label{font-family:var(--font-mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--nf-ink-mid);margin-bottom:6px;display:block} .form-input{width:100%;padding:12px 14px;border:1.5px solid var(--nf-ink-soft);border-radius:12px;font-family:var(--font-ui);font-size:.9rem;color:var(--nf-ink);background:var(--nf-beige-light);outline:none;transition:border .2s} .form-input:focus{border-color:var(--nf-sky)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px} /* Session card */ .session-card{background:var(--nf-beige-light);border-radius:14px;overflow:hidden;margin-bottom:10px;border-left:4px solid transparent} .session-card.active-session{border-left-color:var(--nf-green)} .session-card.expired-session{border-left-color:var(--nf-ink-soft)} .session-card.upcoming-session{border-left-color:var(--nf-copper)} .session-header{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;cursor:pointer} .session-body{display:none;padding:14px;border-top:1px solid var(--nf-ink-soft)} .session-body.open{display:block} /* Status badge */ .status-badge{font-family:var(--font-mono);font-size:.48rem;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;flex-shrink:0} .badge-active{background:rgba(74,123,92,.12);color:var(--nf-green)} .badge-expired{background:var(--nf-beige-deep);color:var(--nf-ink-mid)} .badge-upcoming{background:rgba(196,103,66,.1);color:var(--nf-copper)} /* QR mock */ .qr-mock{width:140px;height:140px;border-radius:12px;background:var(--nf-beige-light);border:2px solid var(--nf-ink-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;overflow:hidden} .qr-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:1.5px;padding:10px;width:100%;height:100%} .qr-cell{border-radius:1px} /* Token */ .token-display{font-family:var(--font-mono);font-size:1.5rem;letter-spacing:.2em;font-weight:700;color:var(--nf-sky);text-align:center;background:var(--nf-beige-deep);border-radius:10px;padding:12px;margin-bottom:8px} /* Participant row */ .participant-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--nf-ink-soft)} .participant-row:last-child{border-bottom:none} .av{width:32px;height:32px;border-radius:50%;background:var(--nf-beige-deep);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.58rem;font-weight:700;flex-shrink:0} /* Countdown */ .countdown-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(74,123,92,.1);border-radius:999px;padding:5px 12px;font-family:var(--font-mono);font-size:.58rem;color:var(--nf-green);font-weight:700} .countdown-chip.expiring{background:rgba(230,126,34,.1);color:var(--nf-orange)} .countdown-chip.expired{background:var(--nf-beige-deep);color:var(--nf-ink-mid)} /* Buttons */ .btn-sky{padding:10px 18px;border-radius:999px;background:var(--nf-sky);border:none;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;color:#FDF9EE;cursor:pointer} .btn-outline{padding:9px 14px;border-radius:999px;background:transparent;border:1.5px solid var(--nf-ink-soft);font-family:var(--font-mono);font-size:.52rem;cursor:pointer;color:var(--nf-ink)} .btn-danger{padding:9px 14px;border-radius:999px;background:transparent;border:1.5px solid rgba(196,103,66,.4);font-family:var(--font-mono);font-size:.52rem;cursor:pointer;color:var(--nf-copper)} .btn-full{width:100%;padding:14px;border-radius:999px;background:var(--nf-sky);border:none;font-family:var(--font-ui);font-size:.92rem;font-weight:500;cursor:pointer;color:#FDF9EE;margin-top:4px} .btn-green-full{width:100%;padding:14px;border-radius:999px;background:var(--nf-green);border:none;font-family:var(--font-ui);font-size:.92rem;font-weight:500;cursor:pointer;color:#FDF9EE;margin-top:4px} .sec-hdr{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--nf-ink-mid);margin:16px 0 8px;display:flex;align-items:center;justify-content:space-between} .sec-hdr a{color:var(--nf-sky);cursor:pointer;font-size:.52rem} .content{padding:14px 18px 60px} .divider{height:1px;background:var(--nf-ink-soft);margin:12px 0} .info-box{background:rgba(46,134,193,.07);border:1px solid rgba(46,134,193,.2);border-radius:10px;padding:10px 13px;font-size:.8rem;color:var(--nf-ink-mid);line-height:1.5;margin-bottom:12px} /* Toast */ #toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--nf-ink);color:#FDF9EE;font-family:var(--font-mono);font-size:.56rem;padding:10px 20px;border-radius:999px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:999;white-space:nowrap} #toast.show{opacity:1} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* Demo switcher */ .demo-sw{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);background:var(--nf-beige-deep);border:1px solid var(--nf-ink-soft);border-radius:999px;padding:5px 8px;display:flex;gap:4px;z-index:100} .dsw-btn{padding:5px 12px;border-radius:999px;font-family:var(--font-mono);font-size:.48rem;border:none;cursor:pointer} /* admin_contenu_eca */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742;--nf-sky:#2E86C1;--nf-sky-dark:#1A5276; --nf-green:#4A7B5C;--nf-violet:#7B5EA7;--nf-gold:#B8860B; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;max-width:480px;margin:0 auto;min-height:100dvh} .section{display:none}.section.active{display:block} .admin-bar{background:var(--nf-sky);padding:13px 18px;display:flex;align-items:center;gap:10px} .admin-badge{background:rgba(255,255,255,.22);color:#FDF9EE;font-family:var(--font-mono);font-size:.5rem;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:6px;border:1px solid rgba(255,255,255,.28)} .sub-tabs{display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--nf-ink-soft);background:var(--nf-beige-light);position:sticky;top:0;z-index:10} .sub-tab{padding:11px 14px;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;border:none;background:transparent;cursor:pointer;white-space:nowrap;color:var(--nf-ink-mid);border-bottom:2px solid transparent;transition:all .2s;flex-shrink:0} .sub-tab.active{color:var(--nf-sky);border-bottom-color:var(--nf-sky);font-weight:700} .content{padding:14px 18px 60px} .card{background:var(--nf-beige-light);border-radius:14px;padding:14px 16px;margin-bottom:10px} .card-sky{background:rgba(46,134,193,.06);border:1.5px solid rgba(46,134,193,.2);border-radius:14px;padding:14px 16px;margin-bottom:10px} .card-green{background:rgba(74,123,92,.06);border:1.5px solid rgba(74,123,92,.18);border-radius:14px;padding:14px 16px;margin-bottom:10px} .card-violet{background:rgba(123,94,167,.06);border:1.5px solid rgba(123,94,167,.18);border-radius:14px;padding:14px 16px;margin-bottom:10px} .card-copper{background:rgba(196,103,66,.07);border:1.5px solid rgba(196,103,66,.2);border-radius:14px;padding:14px 16px;margin-bottom:10px} .sec-hdr{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nf-ink-mid);margin:14px 0 8px;display:flex;align-items:center;justify-content:space-between} .sec-hdr a{color:var(--nf-sky);cursor:pointer;font-size:.52rem} .form-label{font-family:var(--font-mono);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:var(--nf-ink-mid);margin-bottom:5px;display:block} .form-input{width:100%;padding:10px 13px;border:1.5px solid var(--nf-ink-soft);border-radius:11px;font-family:var(--font-ui);font-size:.88rem;color:var(--nf-ink);background:var(--nf-beige-light);outline:none;transition:border .2s} .form-input:focus{border-color:var(--nf-sky)} .form-textarea{width:100%;padding:10px 13px;border:1.5px solid var(--nf-ink-soft);border-radius:11px;font-family:var(--font-ui);font-size:.84rem;color:var(--nf-ink);background:var(--nf-beige-light);outline:none;transition:border .2s;resize:vertical;min-height:80px;line-height:1.5} .form-textarea:focus{border-color:var(--nf-sky)} .form-textarea.prompt-area{min-height:130px;font-family:var(--font-mono);font-size:.72rem;line-height:1.6} .form-group{margin-bottom:11px} .btn-primary{padding:9px 18px;border-radius:999px;background:var(--nf-sky);border:none;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.08em;text-transform:uppercase;color:#FDF9EE;cursor:pointer} .btn-outline{padding:8px 14px;border-radius:999px;background:transparent;border:1.5px solid var(--nf-ink-soft);font-family:var(--font-mono);font-size:.52rem;cursor:pointer;color:var(--nf-ink)} .btn-green{padding:8px 14px;border-radius:999px;background:var(--nf-green);border:none;font-family:var(--font-mono);font-size:.52rem;cursor:pointer;color:#FDF9EE} .btn-danger{padding:7px 13px;border-radius:999px;background:transparent;border:1.5px solid rgba(196,103,66,.35);font-family:var(--font-mono);font-size:.5rem;cursor:pointer;color:var(--nf-copper)} .badge{font-family:var(--font-mono);font-size:.46rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:5px} .badge-c{background:rgba(46,134,193,.12);color:var(--nf-sky)} .badge-a{background:rgba(123,94,167,.12);color:var(--nf-violet)} .badge-p{background:rgba(196,103,66,.12);color:var(--nf-copper)} .badge-act{background:rgba(74,123,92,.12);color:var(--nf-green)} .badge-ok{background:rgba(74,123,92,.1);color:var(--nf-green);font-family:var(--font-mono);font-size:.46rem;padding:2px 7px;border-radius:4px} .badge-draft{background:rgba(184,134,11,.12);color:var(--nf-gold);font-family:var(--font-mono);font-size:.46rem;padding:2px 7px;border-radius:4px} .toggle{position:relative;width:42px;height:24px;flex-shrink:0} .toggle input{opacity:0;width:0;height:0;position:absolute} .slider{position:absolute;inset:0;background:var(--nf-ink-soft);border-radius:999px;cursor:pointer;transition:.25s} .slider:before{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;left:3px;top:3px;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.2)} input:checked+.slider{background:var(--nf-sky)} input:checked+.slider:before{transform:translateX(18px)} .divider{height:1px;background:var(--nf-ink-soft);margin:12px 0} .module-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:4px 0} .module-header .chevron{transition:transform .25s;color:var(--nf-ink-mid)} .module-header.open .chevron{transform:rotate(180deg)} .module-body{display:none;margin-top:10px} .module-body.open{display:block} .capa-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--nf-ink-soft)} .capa-row:last-child{border-bottom:none} .rappel-row{background:var(--nf-beige-light);border-radius:10px;padding:10px 12px;margin-bottom:7px;display:flex;align-items:flex-start;gap:10px} .day-badge{font-family:var(--font-mono);font-size:.56rem;font-weight:700;color:var(--nf-sky);background:rgba(46,134,193,.1);padding:4px 8px;border-radius:6px;flex-shrink:0;min-width:40px;text-align:center} .pilier-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px} .pilier-e{background:var(--nf-green)} .pilier-c{background:var(--nf-sky)} .pilier-a{background:var(--nf-violet)} .prompt-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .prompt-ctx{font-family:var(--font-mono);font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:5px;font-weight:700} .ctx-global{background:rgba(42,37,32,.08);color:var(--nf-ink)} .ctx-urgence{background:rgba(196,103,66,.12);color:var(--nf-copper)} .ctx-evidence{background:rgba(74,123,92,.12);color:var(--nf-green)} .ctx-consciente{background:rgba(46,134,193,.12);color:var(--nf-sky)} .ctx-appliquee{background:rgba(123,94,167,.12);color:var(--nf-violet)} .chip-filter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px} .chip{padding:6px 12px;border-radius:999px;border:1.5px solid var(--nf-ink-soft);background:transparent;font-family:var(--font-mono);font-size:.5rem;cursor:pointer;color:var(--nf-ink-mid);transition:all .2s} .chip.active{background:var(--nf-sky);border-color:var(--nf-sky);color:#FDF9EE} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} #toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--nf-ink);color:var(--nf-beige-light);font-family:var(--font-ui);font-size:.85rem;padding:9px 20px;border-radius:999px;opacity:0;transition:all .3s;z-index:9999;white-space:nowrap;pointer-events:none} #toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .sel-prog{padding:9px 13px;border-radius:10px;border:1.5px solid var(--nf-ink-soft);font-family:var(--font-mono);font-size:.58rem;background:var(--nf-beige-light);color:var(--nf-ink);cursor:pointer;outline:none} .prog-tag{font-family:var(--font-mono);font-size:.46rem;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:4px} .tag-core{background:rgba(74,123,92,.12);color:var(--nf-green)} .tag-elite{background:rgba(123,94,167,.12);color:var(--nf-violet)} .tag-neuro{background:rgba(46,134,193,.12);color:var(--nf-sky)} .tag-energie{background:rgba(184,134,11,.12);color:var(--nf-gold)} .tag-tous{background:rgba(42,37,32,.08);color:var(--nf-ink-mid)} .add-btn{width:100%;padding:12px;border-radius:12px;border:1.5px dashed var(--nf-ink-soft);background:transparent;font-family:var(--font-mono);font-size:.54rem;cursor:pointer;color:var(--nf-ink-mid);transition:all .2s;text-align:center} .add-btn:hover{border-color:var(--nf-sky);color:var(--nf-sky)} /* landing_eca */ :root { --nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD; --nf-copper:#C46742; --nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12); --font-serif:'Instrument Serif',Georgia,serif; --font-ui:'Geist',system-ui,sans-serif; --font-mono:'Geist Mono',monospace; } *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .nf-orb{display:inline-block;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4CBA8 0%,#D97757 45%,#7C3A1F 100%);box-shadow:rgba(0,0,0,.35) -8px -10px 24px inset,rgba(217,119,87,.5) 0 0 60px;animation:nfBreath 6s ease-in-out infinite} @keyframes nfBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* landing_prescripteur */ :root{--nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD;--nf-copper:#C46742;--nf-sky:#1A5276;--nf-sky-mid:#2980B9;--nf-green:#4A7B5C;--nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12);--font-serif:'Instrument Serif',Georgia,serif;--font-ui:'Geist',system-ui,sans-serif;--font-mono:'Geist Mono',monospace} *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .nf-orb-sm{display:inline-block;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F4CBA8 0%,#D97757 45%,#7C3A1F 100%);box-shadow:rgba(0,0,0,.3) -4px -5px 12px inset,rgba(217,119,87,.4) 0 0 20px} .avantage-card{background:var(--nf-beige-light);border-radius:16px;padding:16px;margin-bottom:10px;display:flex;align-items:flex-start;gap:14px} .icon-round{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0} .form-input{width:100%;padding:13px 16px;border:1.5px solid var(--nf-ink-soft);border-radius:14px;font-family:var(--font-ui);font-size:.92rem;color:var(--nf-ink);background:var(--nf-beige-light);outline:none;transition:border .2s} .form-input:focus{border-color:var(--nf-sky-mid)} .form-label{font-family:var(--font-mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--nf-ink-mid);margin-bottom:6px;display:block} .step-num{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.7rem;font-weight:700;color:#FDF9EE;flex-shrink:0;background:var(--nf-sky-mid)} .temoignage{background:var(--nf-beige-light);border-radius:16px;padding:16px;margin-bottom:10px;border-left:3px solid var(--nf-copper)} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} .section{display:none}.section.active{display:block} /* cgu */ :root{--nf-beige:#F0E7D5;--nf-beige-light:#FDF9EE;--nf-beige-deep:#EBE1CD;--nf-copper:#C46742;--nf-ink:#2A2520;--nf-ink-mid:rgba(42,37,32,.5);--nf-ink-soft:rgba(42,37,32,.12);--font-serif:'Instrument Serif',Georgia,serif;--font-ui:'Geist',system-ui,sans-serif;--font-mono:'Geist Mono',monospace} *{margin:0;padding:0;box-sizing:border-box} body{font-family:var(--font-ui);background:var(--nf-beige);color:var(--nf-ink);-webkit-font-smoothing:antialiased;min-height:100dvh;max-width:480px;margin:0 auto} .section{display:none}.section.active{display:block} .tab-btn{flex:1;padding:11px 8px;border:none;background:transparent;font-family:var(--font-mono);font-size:.52rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;color:var(--nf-ink-mid);border-bottom:2px solid transparent;transition:all .2s;text-align:center} .tab-btn.active{color:var(--nf-copper);border-bottom-color:var(--nf-copper);font-weight:700} .legal-h2{font-weight:700;font-size:.95rem;color:var(--nf-ink);margin:18px 0 6px;padding-top:8px;border-top:1px solid var(--nf-ink-soft)} .legal-h2:first-child{border-top:none;margin-top:0} .legal-p{font-size:.86rem;color:var(--nf-ink-mid);line-height:1.6;margin-bottom:8px}.legal-h3{font-weight:650;font-size:.85rem;color:var(--nf-copper);margin:12px 0 4px}.legal-ul{margin:4px 0 10px;padding-left:20px}.legal-ul li{font-size:.86rem;color:var(--nf-ink-mid);line-height:1.5;margin-bottom:3px}.legal-doc strong{color:var(--nf-ink)} .dev-label{font-family:var(--font-mono);font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:var(--nf-ink-mid);text-align:center;padding:6px;background:var(--nf-beige-deep);border-bottom:1px solid var(--nf-ink-soft)} /* ===== Bloc CSS original 4 : nf-lot2m-onboarding-after-signup-css ===== */ /* LOT 2M — Onboarding après inscription / connexion non terminée */ html, body{ background:#E8DFC8 !important; overflow-x:hidden !important; } #nf-app{ display:block !important; padding:0 !important; min-height:100dvh !important; width:100% !important; } #nf-sidebar{ display:none !important; visibility:hidden !important; pointer-events:none !important; } .nf-screen{ display:none !important; visibility:hidden !important; pointer-events:none !important; opacity:0 !important; } .nf-screen.nf-active{ display:block !important; visibility:visible !important; pointer-events:auto !important; opacity:1 !important; position:fixed !important; top:0 !important; bottom:0 !important; left:50% !important; right:auto !important; transform:translateX(-50%) !important; width:100% !important; max-width:420px !important; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch !important; background:var(--nf-beige) !important; z-index:10 !important; border-radius:0 !important; box-shadow:none !important; } .nf-screen.nf-active.nf-has-nav{ padding-bottom:78px !important; } #nf-bottom-nav.visible{ display:grid !important; position:fixed !important; bottom:0 !important; left:50% !important; right:auto !important; transform:translateX(-50%) !important; width:100% !important; max-width:420px !important; z-index:1000 !important; border-radius:0 !important; } #screen-landing_eca.nf-active, #screen-landing_eca.nf-active *, #screen-landing_eca.nf-active button, #screen-landing_eca.nf-active [data-nf-public-action]{ pointer-events:auto !important; touch-action:manipulation !important; } [data-nf-public-action]{ position:relative !important; z-index:50 !important; pointer-events:auto !important; -webkit-tap-highlight-color:rgba(196,103,66,.2); } #nf-drawer, #nf-drawer-overlay{ z-index:1600 !important; } .demo-sw, .dsw-btn, body > div:has(button[onclick*="goTo('s-activation')"]), body > div:has(button[onclick*="showView('view-candidature')"]), body > div:has(button[onclick*="showView('view-landing')"]){ display:none !important; visibility:hidden !important; pointer-events:none !important; } /* NeuroFlow Production Clean — hide all demo/debug navigation panels */ .demo-sw,.dsw-btn,.nf-demo-switcher,[data-demo],[data-debug],#nf-demo-switcher{ display:none!important;visibility:hidden!important;pointer-events:none!important; } #screen-bienvenue_formation div[style*="position:fixed"][style*="bottom:12px"], #screen-bienvenue_formation div[style*="DÉMO"], body > div[style*="position:fixed"][style*="bottom:12px"]{ display:none!important;visibility:hidden!important;pointer-events:none!important; } /* ===== Bloc CSS original 5 : nf-lot2y-technique-descriptions-css ===== */ .nf-tech-short-card{ margin-top:8px; padding:10px 12px; border-radius:14px; background:rgba(42,37,32,.045); border:1px solid rgba(42,37,32,.07); } .nf-tech-short-label{ font-family:var(--font-mono); font-size:.52rem; letter-spacing:.13em; text-transform:uppercase; color:var(--nf-ink-mid); margin-bottom:4px; } .nf-tech-short-text{ font-family:var(--font-ui); font-size:.82rem; color:rgba(42,37,32,.68); line-height:1.45; } .nf-tech-meta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; } .nf-tech-meta-box{ padding:10px; border-radius:14px; background:var(--nf-beige-deep); border:1px solid var(--nf-ink-soft); } .nf-tech-meta-value{ font-family:var(--font-serif); font-style:italic; font-size:1.15rem; color:var(--nf-ink); line-height:1.1; } .nf-tech-meta-caption{ font-family:var(--font-mono); font-size:.52rem; letter-spacing:.12em; text-transform:uppercase; color:var(--nf-ink-mid); margin-top:4px; } #nf-coherence-rhythm-help{ margin-top:10px; padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.54); border:1px solid rgba(42,37,32,.08); font-size:.82rem; color:rgba(42,37,32,.62); line-height:1.45; } /* ===== Bloc CSS original 6 : nf-lot3-parcours-supabase-css ===== */ .nf-path-card{background:var(--nf-beige-light);border:1.5px solid var(--nf-ink-soft);border-radius:18px;padding:16px 18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .2s;margin-bottom:10px} .nf-path-card.active{background:rgba(196,103,66,.08);border-color:var(--nf-copper);box-shadow:0 8px 24px rgba(196,103,66,.10)} .nf-path-icon{width:42px;height:42px;border-radius:50%;background:rgba(42,37,32,.08);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;transition:all .2s} .nf-path-card.active .nf-path-icon{background:var(--nf-copper);color:#FDF9EE} .nf-path-title{font-weight:650;font-size:.94rem;color:var(--nf-ink);line-height:1.25} .nf-path-sub{font-size:.8rem;color:var(--nf-ink-mid);line-height:1.35;margin-top:3px} .nf-path-status{display:none;border-radius:18px;padding:16px 18px;margin:16px 0;background:rgba(255,255,255,.52);border:1px solid rgba(42,37,32,.08);font-size:.88rem;line-height:1.55;color:var(--nf-ink)} .nf-path-status.show{display:block} .nf-path-status.success{border-color:rgba(74,123,92,.25);background:rgba(74,123,92,.08)} .nf-path-status.pending{border-color:rgba(196,103,66,.25);background:rgba(196,103,66,.08)} .nf-path-status.error{border-color:rgba(160,40,30,.25);background:rgba(160,40,30,.08)} .nf-path-check{width:20px;height:20px;border-radius:50%;background:var(--nf-copper);display:flex;align-items:center;justify-content:center;color:#FDF9EE;font-size:.75rem;margin-left:auto;flex-shrink:0} /* ===== Bloc CSS original 7 : nf-v13-clean-celebration ===== */ /* V13 — suppression du bloc Message du jour / Votre phrase du jour sur la page félicitations */ #screen-bienvenue_formation .phrase-card, #s-bienvenue .phrase-card{ display:none !important; } /* ===== Bloc CSS original 8 : nf-hotfix-v16-preferences-readable-css ===== */ /* V16 — Préférences plus lisibles */ #screen-preferences .chip{ font-size:1.02rem!important; padding:13px 20px!important; line-height:1.25!important; min-height:46px!important; } #screen-preferences .section-label{ font-size:.68rem!important; margin-bottom:13px!important; } #screen-preferences .section-label span{ font-size:.58rem!important; } #screen-preferences .day-btn{ padding:13px 5px!important; min-height:58px!important; } #screen-preferences .day-btn .day-name{ font-size:.68rem!important; } #screen-preferences .sound-card{ padding:14px 8px!important; min-height:98px!important; } #screen-preferences .sound-card .sound-icon{ font-size:1.55rem!important; } #screen-preferences .sound-card .sound-name{ font-size:.66rem!important; line-height:1.18!important; letter-spacing:.02em!important; } #screen-preferences .sound-bar{ height:12px!important; } #screen-preferences .sound-bar span{ width:3px!important; } #screen-preferences div[style*="grid-template-columns:repeat(4,1fr)"]{ grid-template-columns:repeat(3,1fr)!important; gap:10px!important; } /* ===== Bloc CSS original 9 : nf-ios-date-time-fix ===== */ /* Fix iOS Safari : affichage correct des inputs date/time natifs */ #nf-v69-program-overlay #nf-v69-date, #nf-v69-program-overlay #nf-v69-time, input#nf-v69-date, input#nf-v69-time { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; width: 100% !important; min-height: 52px !important; padding: 14px 12px !important; font-family: var(--font-ui) !important; font-size: 1.05rem !important; font-weight: 600 !important; color: var(--nf-ink) !important; background: #fff !important; border: 1.5px solid rgba(42,37,32,.10) !important; border-radius: 14px !important; outline: none !important; box-sizing: border-box !important; text-align: center !important; cursor: pointer !important; display: block !important; line-height: 1.2 !important; /* Empêcher le débordement et garantir l'affichage de la valeur */ overflow: hidden !important; text-overflow: clip !important; white-space: nowrap !important; } /* iOS Safari : forcer le centrage du texte de la valeur date/time */ #nf-v69-date::-webkit-date-and-time-value, #nf-v69-time::-webkit-date-and-time-value { text-align: center !important; font-size: 1rem !important; font-weight: 600 !important; color: var(--nf-ink) !important; line-height: 1.2 !important; margin: 0 !important; padding: 0 !important; min-height: 1.2em !important; } /* iOS Safari : enlever le décalage du placeholder vide */ #nf-v69-date::-webkit-datetime-edit, #nf-v69-time::-webkit-datetime-edit { text-align: center !important; padding: 0 !important; color: var(--nf-ink) !important; } #nf-v69-date::-webkit-datetime-edit-fields-wrapper, #nf-v69-time::-webkit-datetime-edit-fields-wrapper { padding: 0 !important; } /* Quand l'input est focus, mettre la bordure copper */ #nf-v69-date:focus, #nf-v69-time:focus { border-color: var(--nf-copper) !important; box-shadow: 0 0 0 3px rgba(196,103,66,.08) !important; }