/* ============================================================ Boarding Pass — v5 « Cabinet » RDV avec soi-même. Palette vert cabinet + ivoire. Typo : Instrument Serif + Inter Tight + JetBrains Mono ============================================================ */ /* --- Palettes « nuit / constellation » (thème résolu sur ) --- */ :root, :root[data-theme="dark"]{ color-scheme: dark; --bg:#07080F; --fg:#D6E2F5; --dim:#8DA0C0; --line:rgba(214,226,245,.12); --card:#10131F; --accent:#6E86FF; --accent2:#F0705C; } /* Mode « jour » = on fait face au Soleil : sombre chaud (l'espace reste noir), lumière solaire */ /* Mode clair (jour) : le bleu atmosphérique en fond partout, soupçon de soleil en haut */ :root[data-theme="light"]{ color-scheme: dark; --bg:#182a49; --fg:#F1ECDF; --dim:#A6AFC4; --line:rgba(228,236,248,.15); --card:#20355A; --accent:#9CB6FF; --accent2:#F0894C; } :root[data-theme="light"] body{ background: radial-gradient(760px 500px at 94% -14%, rgba(255,198,120,.20), rgba(255,150,80,.06) 40%, transparent 58%), linear-gradient(172deg, #3c5c80 0%, #345680 24%, #2c4e7a 46%, #244169 66%, #1c3057 84%, #152443 100%); background-attachment:fixed; } :root[data-theme="light"] .shell{background:transparent} /* Catégories de rendez-vous — identiques dans les 2 thèmes */ :root{ --cat-focus:#5B6CFF; --cat-jammin:#E8604C; --cat-rituel:#2FB8A6; --cat-perso:#E0A63C; --cat-repos:#5FA777; } *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0;overscroll-behavior-y:none;background:var(--bg)} body{font-family:'Instrument Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-size:16px;color:var(--fg)} a{color:inherit;text-decoration:none;transition:opacity .2s} a:hover{opacity:.7} button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer} input,textarea,select{font:inherit;color:inherit;background:transparent;border:1px solid var(--line);border-radius:8px;padding:13px 15px;outline:none;width:100%;transition:border-color .2s;font-size:16px} input:focus,textarea:focus,select:focus{border-color:var(--accent)} select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer} ::selection{background:var(--accent);color:#fff} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:rgba(128,128,128,.25);border-radius:999px} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} @keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} @keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}} @keyframes bpTwinkle{0%,100%{opacity:.15}50%{opacity:.9}} .rise{animation:riseIn .5s cubic-bezier(.2,.7,.2,1) both} .page-anim{animation:riseIn .35s cubic-bezier(.2,.7,.2,1) both} .shell{display:flex;min-height:100vh;background:var(--bg);color:var(--fg);transition:background .4s ease,color .4s ease} /* --- Sidebar --- */ .sidebar{width:236px;flex-shrink:0;border-right:1px solid var(--line);padding:26px 18px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;background:var(--card)} .brand{padding:6px 10px 20px;margin-bottom:10px} .brand-top{display:flex;align-items:center;gap:11px} .brand-cross{width:34px;height:34px;border-radius:10px;background:#0A0F1E;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;flex-shrink:0} .brand-glyph{display:block;width:23px;height:23px} /* Lockup logo sur l'écran de connexion */ .login-lockup{display:flex;align-items:center;gap:11px;margin-bottom:6px} .login-badge{width:40px;height:40px;border-radius:12px;background:#0A0F1E;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);display:flex;align-items:center;justify-content:center;flex-shrink:0} .login-badge svg{width:26px;height:26px;display:block} .brand-name{font-family:'Instrument Serif',serif;font-size:25px;letter-spacing:-.01em;line-height:1} .brand-sub{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:9px} .nav-item{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:10px;font-size:15px;color:var(--dim);cursor:pointer;transition:all .18s;text-align:left;width:100%} .nav-item:hover{color:var(--fg);background:var(--bg)} .nav-item.active{color:var(--fg);background:var(--bg);font-weight:600} .nav-item.active .nav-ic{background:var(--accent);color:#fff} .nav-ic{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px;background:var(--bg);color:var(--dim);transition:all .18s} .nav-ic svg{width:16px;height:16px} .sidebar-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)} .content{flex:1;min-width:0;padding:34px clamp(24px,4vw,56px) 120px;position:relative;overflow-x:hidden} /* filigrane constellation en décor de page (reprend la couleur du sujet) */ .deco-constel{position:absolute;top:-20px;right:-24px;width:min(58vw,360px);z-index:0;pointer-events:none;opacity:.07;color:var(--accent)} .deco-constel svg{width:100%;height:auto;display:block} .content > .page,.content > .topbar,.content > .page-anim{position:relative;z-index:1} /* --- Bottom nav --- */ .bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:0 14px calc(10px + env(safe-area-inset-bottom))} /* Barre haute fixe (givrée) : masque la zone barre d'état iOS quand le contenu scrolle dessous */ .safebar{display:none;position:fixed;top:0;left:0;right:0;z-index:65;height:max(50px, calc(env(safe-area-inset-top,0px) + 12px));background:color-mix(in oklab,var(--bg) 72%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);pointer-events:none} /* Barre flottante « pilule » : pastilles + libellés mono, pastille active en accent */ .bn-row{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:color-mix(in oklab,var(--card) 90%,transparent);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid var(--line);border-radius:26px;padding:12px 8px;box-shadow:0 12px 34px -14px rgba(0,0,0,.42)} .bn-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:2px;color:var(--dim);transition:color .2s} .bn-item.active{color:var(--accent)} .bn-dot{width:7px;height:7px;border-radius:99px;background:currentColor;opacity:.4;transition:opacity .2s,box-shadow .2s,transform .2s} .bn-item.active .bn-dot{opacity:1;transform:scale(1.15);box-shadow:0 0 9px var(--accent)} .bn-label{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase} /* --- Topbar --- */ .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:22px;border-bottom:1px solid var(--line);flex-wrap:wrap;margin-bottom:32px} .topbar-status{display:flex;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)} .status-dot{width:8px;height:8px;border-radius:999px;background:var(--accent2);box-shadow:0 0 10px var(--accent2);animation:pulse 2.4s ease-in-out infinite;display:inline-block} .pill{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:9px 15px;border:1px solid var(--line);border-radius:999px;color:var(--dim);transition:all .2s;background:transparent} .pill:hover{border-color:var(--fg);color:var(--fg)} /* --- Page header --- */ .page-head{display:flex;flex-direction:column;gap:8px;margin-bottom:30px;position:relative} .page-head > :not(.page-planet){position:relative;z-index:1} /* La planète de la page monte du bord haut-droit (« Orbites ») */ .page-planet{position:absolute;top:-26px;right:calc(-1 * clamp(22px,6vw,56px));width:clamp(78px,19vw,138px);height:clamp(78px,19vw,138px);z-index:0;pointer-events:none} .page-planet-orb{position:absolute;inset:22%;border-radius:50%;display:block} .page-planet-ring{position:absolute;inset:0;border-radius:50%;border:1px solid transparent} .page-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px} .deco-constel{display:none} .page-back{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:color .2s;align-self:flex-start;padding:4px 0} .page-back:hover{color:var(--fg)} .page-title-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap} .page-title{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(42px,6vw,68px);line-height:1;letter-spacing:-.02em;margin:0} .page-title em{font-style:normal;color:inherit} .page-point{display:inline-block;width:.34em;height:.34em;border-radius:50%;margin-left:.14em;vertical-align:.04em} .page-sub{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)} /* Réserve de la place à droite pour ne jamais chevaucher la planète décorative */ .page-title,.page-sub{padding-right:clamp(70px,20vw,128px)} .section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:18px} .section-num{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .section-num-a,.section-num-action{color:var(--accent)} .section-title{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(26px,3vw,38px);line-height:1;letter-spacing:-.01em;margin:0} .mono-label{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)} .mono-meta{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim)} .link-more{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);cursor:pointer} .card{padding:clamp(20px,3vw,30px);background:var(--card);border-radius:16px;position:relative;border:1px solid var(--line)} .stack{display:flex;flex-direction:column;gap:24px} /* --- Buttons --- */ .btn{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:12px 20px;border-radius:10px;transition:all .2s;display:inline-flex;align-items:center;gap:8px;cursor:pointer;min-height:44px;justify-content:center} .btn-primary{background:var(--accent);color:#fff;border:none} .btn-primary:hover{filter:brightness(1.08)} .btn-solid{background:var(--fg);color:var(--bg);border:none} .btn-solid:hover{background:var(--accent);color:#fff} .btn-ghost{border:1px solid var(--line);color:var(--fg);background:transparent} .btn-ghost:hover{border-color:var(--fg)} .btn-ghost-dim{border:1px solid var(--line);color:var(--dim);background:transparent} .btn-ghost-dim:hover{border-color:var(--fg);color:var(--fg)} .btn-danger{border:1px solid var(--line);color:var(--dim);background:transparent} .btn-danger:hover{border-color:var(--accent2);color:var(--accent2)} .btn-full{width:100%} .icon-btn{width:38px;height:38px;padding:0;border-radius:10px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--dim);transition:all .2s;flex-shrink:0} .icon-btn:hover{color:var(--fg);border-color:var(--fg)} .icon-btn.danger:hover{color:var(--accent2);border-color:var(--accent2)} .filter-pill{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:9px 16px;border:1px solid var(--line);border-radius:999px;color:var(--dim);transition:all .2s;cursor:pointer;white-space:nowrap;background:transparent} .filter-pill:hover{border-color:var(--fg);color:var(--fg)} .filter-pill.active{border-color:var(--accent);color:#fff;background:var(--accent)} .filter-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:22px} .filter-row.scroll-x{flex-wrap:nowrap;overflow-x:auto;margin:0 -4px;padding:0 4px 4px;scrollbar-width:none} .filter-row.scroll-x::-webkit-scrollbar{display:none} .search-input{margin-bottom:22px} .chip{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--fg);display:inline-flex;align-items:center;gap:6px} .chip:hover{border-color:var(--accent)} .seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden} .seg button{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:9px 15px;color:var(--dim)} .seg button.active{background:var(--accent);color:#fff} /* --- RENDEZ-VOUS (appointment) --- */ .appt{display:grid;grid-template-columns:64px 4px 1fr auto;gap:14px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px;align-items:center;margin-bottom:10px;transition:transform .2s} .appt:hover{transform:translateX(3px)} .appt-time{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--fg);line-height:1.35} .appt-time span{display:block;color:var(--dim);font-size:11px} .appt-bar{width:4px;height:100%;min-height:34px;border-radius:99px;align-self:stretch} .appt-title{font-size:17px;font-weight:500;line-height:1.25} .appt-cat{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:3px} .appt-dur{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);white-space:nowrap} .appt-actions{display:flex;gap:4px} /* --- Bande « Agenda — l'essentiel » --- */ .week-band{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none} .week-band::-webkit-scrollbar{display:none} .wb-item{min-width:200px;flex-shrink:0;border-radius:12px;padding:14px 16px;color:#fff;cursor:pointer;transition:transform .2s} .wb-item:hover{transform:translateY(-3px)} .wb-when{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.9} .wb-title{font-size:15px;font-weight:600;line-height:1.25;margin-top:7px} /* --- Calendrier vivant --- */ .cal-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:12px;flex-wrap:wrap} .cal-month{font-family:'Instrument Serif',serif;font-size:34px;letter-spacing:-.01em;text-transform:capitalize} .cal-nav{display:flex;gap:8px;align-items:center} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:10px} .cal-dow{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:center;padding-bottom:10px} .cal-cell{border:none;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;padding:2px 0;font:inherit} .cal-cell.dim{opacity:.32} .cal-num{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--fg);width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:box-shadow .15s,background .15s} .cal-cell:hover .cal-num{background:color-mix(in oklab,var(--accent) 14%,transparent)} .cal-cell.today .cal-num{background:var(--accent);color:#fff} .cal-cell.sel:not(.today) .cal-num{box-shadow:inset 0 0 0 1px var(--fg)} .cal-dots{display:flex;gap:3px;height:5px;align-items:center} .cal-dot{width:4px;height:4px;border-radius:50%;display:block} /* Le fil du jour — orbes reliés par une ligne qui s'estompe */ .fil-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px} .fil-title{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)} .fil-date{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)} .fil-list{display:flex;flex-direction:column} .fil-ev{display:flex;gap:13px;cursor:pointer} .fil-time{width:44px;flex:none;text-align:right;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);padding-top:9px} .fil-track{flex:none;display:flex;flex-direction:column;align-items:center;width:11px} .fil-orb{width:11px;height:11px;border-radius:50%;flex:none;margin-top:9px} .fil-line{flex:1;width:1px;min-height:14px;margin:5px 0 0;background:linear-gradient(var(--line),color-mix(in oklab,var(--line) 25%,transparent))} .fil-ev:last-child .fil-line{display:none} .fil-card{flex:1;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 14px;margin-bottom:14px;transition:border-color .15s} .fil-ev:hover .fil-card{border-color:var(--accent)} .fil-card-t{font-size:15px;font-weight:500;line-height:1.25;color:var(--fg)} .fil-card-m{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;color:var(--dim);margin-top:6px;text-transform:uppercase} /* État vide « Ciel dégagé » — planète centrale + anneau */ .sky-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 24px 12px} .sky-empty-orbwrap{position:relative;width:130px;height:130px;display:flex;align-items:center;justify-content:center} .sky-empty-ring{position:absolute;inset:0;border-radius:50%;border:1px solid transparent} .sky-empty-sat{position:absolute;top:6px;right:16px;width:6px;height:6px;border-radius:50%;background:var(--fg);opacity:.5} .sky-empty-orb{width:74px;height:74px;border-radius:50%} .sky-empty-title{font-family:'Instrument Serif',serif;font-size:28px;margin-top:20px;color:var(--fg)} .sky-empty-sub{font-size:14px;color:var(--dim);line-height:1.55;margin-top:10px;max-width:270px} .sky-empty-hint{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;color:var(--dim);margin-top:14px;text-transform:uppercase} .btn-pill{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);background:transparent;border:1px solid color-mix(in oklab,var(--accent) 45%,transparent);border-radius:22px;padding:11px 20px;margin-top:20px;cursor:pointer;transition:background .15s,border-color .15s} .btn-pill:hover{background:color-mix(in oklab,var(--accent) 12%,transparent);border-color:var(--accent)} .legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:20px} .legend-item{display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)} .legend-sw{width:12px;height:12px;border-radius:4px} /* --- Tâches — cases-orbe + lignes en cartes --- */ .task-group-head{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);padding:22px 2px 10px;display:flex;justify-content:space-between;align-items:baseline;cursor:pointer} .task-group-head.overdue{color:var(--accent2)} .task-group{display:flex;flex-direction:column;gap:9px} .task-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:14px} .task-row.is-over{border-color:color-mix(in oklab,var(--accent2) 30%,var(--line))} .task-row.is-done{background:color-mix(in oklab,var(--card) 55%,transparent);border-color:color-mix(in oklab,var(--line) 55%,transparent)} .task-check{width:22px;height:22px;flex-shrink:0;border-radius:999px;border:1.5px solid color-mix(in oklab,var(--accent) 60%,transparent);cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;justify-content:center;font-size:12px;background:transparent} .task-check:hover{border-color:var(--accent)} .task-check.done{background:var(--accent);border-color:var(--accent);color:var(--bg);box-shadow:0 0 10px color-mix(in oklab,var(--accent) 45%,transparent)} .task-main{flex:1;min-width:0;cursor:pointer} .task-label{font-size:14.5px;font-weight:500;line-height:1.35;min-width:0} .task-label.done{text-decoration:line-through;color:var(--dim);opacity:.7} .task-submeta{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:5px} .task-due{flex:none;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;color:var(--dim);white-space:nowrap} .task-due.overdue{color:var(--accent2)} .task-due.today{color:var(--accent)} .prio-tag{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 5px;margin-right:7px;border:1px solid;border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;line-height:1;vertical-align:middle} .task-actions{display:flex;gap:4px;opacity:0;transition:opacity .2s} .task-row:hover .task-actions{opacity:1} /* --- Dossiers / chantiers --- */ .project-grid{display:flex;flex-direction:column;gap:10px} .project-card{position:relative;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:16px;display:block;width:100%;text-align:left;cursor:pointer;transition:border-color .2s} .project-card:hover{border-color:var(--accent)} .project-card.is-dim{background:color-mix(in oklab,var(--card) 60%,transparent)} .pj-top{display:flex;align-items:center;gap:10px} .pj-orb{width:11px;height:11px;border-radius:50%;flex:none} .pj-name{flex:1;font-size:15px;font-weight:500;min-width:0;line-height:1.3;color:var(--fg)} .project-card.is-dim .pj-name{color:var(--dim)} .pj-status{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.14em;flex:none} .pj-desc{font-size:12.5px;color:var(--dim);line-height:1.5;margin-top:8px;padding-left:21px} .pj-meta{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in oklab,var(--dim) 72%,transparent);margin-top:8px;padding-left:21px} .project-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .badge{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:6px} .badge-active{background:color-mix(in oklab,var(--accent) 16%,var(--card));color:var(--accent)} .badge-paused{background:var(--bg);color:var(--dim)} .badge-done{border:1px solid var(--line);color:var(--dim)} .badge-status{color:var(--accent)} .badge-idx{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim)} .project-name{font-family:'Instrument Serif',serif;font-size:32px;line-height:1.05;letter-spacing:-.01em} .project-note{font-size:14px;color:var(--dim);line-height:1.5;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* --- Rituels --- */ .rituals-week{display:grid;grid-template-columns:repeat(7,1fr);gap:12px} .ritual-day{padding:16px 12px;background:var(--card);border:1px solid var(--line);border-radius:12px;min-height:120px;display:flex;flex-direction:column;gap:10px} .ritual-day.today{border-color:var(--accent);border-width:2px} .ritual-day-name{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)} .ritual-day.today .ritual-day-name{color:var(--accent)} .ritual-item{font-size:14px;line-height:1.35;display:flex;gap:8px;align-items:flex-start} .ritual-item .rit-body{flex:1;min-width:0} .ritual-item .rit-actions{display:flex;gap:2px} .ritual-check{width:15px;height:15px;flex-shrink:0;border-radius:999px;border:1px solid var(--dim);cursor:pointer;margin-top:3px;background:transparent} .ritual-check.done{background:var(--accent);border-color:var(--accent)} /* ===== CONSTELLATION · accueil (design v3) ===== */ @keyframes cotw{0%,100%{opacity:.14}50%{opacity:1}} @keyframes copulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.14)}} @keyframes coshoot{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}} @keyframes coflare{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}100%{box-shadow:0 0 0 16px rgba(255,255,255,0)}} .co{position:fixed;inset:0;z-index:120;overflow:hidden;transition:background .5s ease} /* Pas de sélection de texte / menu iOS sur l'appui long (sauf la saisie de la barre) */ .co,.co *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} .co-cmd input{-webkit-user-select:text;user-select:text} .co.dark{--co-fg:#D6E2F5;--co-dim:#8DA0C0;--co-line:rgba(214,226,245,.14);--co-glass:rgba(16,18,26,.62);--co-lab:#EAF0FB;--co-ink:#F2F5FB;--co-onink:#0A0F1E;background:radial-gradient(125% 85% at 50% 14%,#0B0C12 0%,#050507 46%,#000000 100%)} /* Accueil « jour » : espace sombre chaud MAIS habité — atmosphère + rayons du Soleil (haut-droite) */ /* Atmosphère réelle (limbe vu de l'ISS) : chaud près du Soleil → turquoise → violet → nuit */ .co.light{--co-fg:#F4ECDC;--co-dim:#C2B8A0;--co-line:rgba(244,236,220,.16);--co-glass:rgba(20,22,36,.48);--co-lab:#F8F0E0;--co-ink:#FFDD93;--co-onink:#141019;background: radial-gradient(62% 54% at 92% 2%, rgba(255,210,126,.52), rgba(255,150,80,.16) 34%, transparent 58%), linear-gradient(178deg, #6d4b22 0%, #6a4436 12%, #574468 26%, #3a5a7e 40%, #2f5580 52%, #274a78 66%, #212f5e 80%, #171a38 100%)} .co.light .co-lab{text-shadow:0 1px 6px rgba(0,0,0,.55)} .co-bgstar{position:absolute;border-radius:99px;background:#fff;animation:cotw var(--d,3s) ease-in-out var(--dl,0s) infinite;pointer-events:none} .co.light .co-bgstar{background:#E8C78A} @keyframes cofloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} .co-earth{position:absolute;top:14%;right:9%;width:clamp(98px,24vw,138px);height:clamp(98px,24vw,138px);z-index:6;pointer-events:none;animation:cofloat 13s ease-in-out infinite; background:url("earth.png") center/contain no-repeat; filter:drop-shadow(0 0 24px rgba(96,158,224,.4))} .co-earth::after{content:'';position:absolute;inset:-14%;border-radius:50%;z-index:-1;background:radial-gradient(circle, rgba(120,180,240,.16), rgba(120,180,240,0) 62%)} /* Mode jour = le Soleil (photo), plus proche donc plus gros, à la place de la Terre */ .co.light .co-earth{background:url("sun.png") center/contain no-repeat;filter:drop-shadow(0 0 62px rgba(255,150,50,.55));opacity:1;width:clamp(190px,52vw,300px);height:clamp(190px,52vw,300px);top:5%;right:-5%} /* couronne (halo) */ .co.light .co-earth::after{inset:-46%;background:radial-gradient(circle, rgba(255,184,88,.52), rgba(255,142,52,.16) 46%, transparent 74%);animation:coSunPulse 6.5s ease-in-out infinite} /* rayons crépusculaires : faisceaux irréguliers qui traversent l'écran depuis le Soleil */ .co.light .co-earth::before{content:'';position:absolute;inset:-320%;z-index:-2;pointer-events:none;mix-blend-mode:screen;filter:blur(1.2px); background:conic-gradient(from 96deg at 50% 50%, transparent 0deg, rgba(255,226,158,.17) 6deg, transparent 12deg, transparent 25deg, rgba(255,214,140,.09) 29deg, transparent 33deg, rgba(255,236,176,.24) 47deg, transparent 56deg, transparent 69deg, rgba(255,210,140,.12) 73deg, transparent 78deg, rgba(255,228,160,.19) 91deg, transparent 99deg, transparent 115deg, rgba(255,218,148,.08) 119deg, transparent 123deg, rgba(255,232,168,.16) 139deg, transparent 148deg, transparent 360deg); -webkit-mask:radial-gradient(circle at 50% 50%, #000 4%, rgba(0,0,0,.7) 24%, rgba(0,0,0,.32) 52%, transparent 84%); mask:radial-gradient(circle at 50% 50%, #000 4%, rgba(0,0,0,.7) 24%, rgba(0,0,0,.32) 52%, transparent 84%); animation:coRayShimmer 7s ease-in-out infinite} @keyframes coSunPulse{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}} @keyframes coRayShimmer{0%,100%{opacity:.72}50%{opacity:1}} /* ===== Animation d'ouverture du ciel ===== */ @keyframes coEarthIn{0%{opacity:0;transform:scale(1.24)}100%{opacity:1;transform:scale(1)}} @keyframes coNodeIn{0%{opacity:0;transform:translate(-50%,calc(-50% + 18px)) scale(.32)}64%{opacity:1;transform:translate(-50%,-50%) scale(1.13)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}} @keyframes coLineDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} @keyframes coRise{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:translateY(0)}} @keyframes coFade{from{opacity:0}to{opacity:1}} .co-enter .co-earth{animation:coEarthIn 2.6s cubic-bezier(.2,.7,.2,1) both} .co-enter .co-node{animation:coNodeIn .74s cubic-bezier(.2,.85,.28,1) both} .co-enter .co-links line{stroke-dasharray:1;stroke-dashoffset:1;animation:coLineDraw 1.15s ease 1.25s forwards} .co-enter .co-top{animation:coRise .8s ease .12s both} .co-enter .co-dock{animation:coFade .7s ease 1.5s both} @media (prefers-reduced-motion:reduce){.co-enter .co-earth,.co-enter .co-node,.co-enter .co-links line,.co-enter .co-top,.co-enter .co-dock{animation-duration:.01ms;animation-delay:0s}} .co-links{position:absolute;inset:0;width:100%;height:100%;z-index:10;pointer-events:none} .co-top{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:flex-start;padding:max(48px, calc(env(safe-area-inset-top,0px) + 26px)) clamp(20px,4vw,54px) 0;color:var(--co-fg)} .co-greet-sub{display:flex;align-items:center;gap:9px;font-family:'JetBrains Mono',monospace;font-size:clamp(10px,1vw,12px);letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-bottom:6px} .co-gdot{width:7px;height:7px;border-radius:99px;background:var(--co-ink);box-shadow:0 0 10px var(--co-ink);animation:copulse 2.4s ease-in-out infinite} .co-greet-t{font-family:'Instrument Serif',serif;font-size:clamp(34px,5vw,64px);line-height:.96;letter-spacing:-.02em} .co-greet-t em{font-style:italic;color:var(--co-ink)} .co-gpoint{display:inline-block;width:.28em;height:.28em;border-radius:50%;margin-left:.12em;vertical-align:.08em;background:conic-gradient(#6E86FF,#E8834C,#E0A63C,#2FB8A6,#F27FA5,#6E86FF);box-shadow:0 0 12px rgba(214,226,245,.4)} .co-theme{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:9px 15px;border:1px solid var(--co-line);border-radius:999px;color:var(--co-dim);backdrop-filter:blur(8px);flex-shrink:0;background:transparent} /* Champ de la constellation : bande sûre + conteneur à ratio fixe (forme préservée) */ .co-field{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 150px);bottom:calc(env(safe-area-inset-bottom,0px) + 96px);z-index:20;display:flex;align-items:center;justify-content:center;pointer-events:none} .co-sky{position:relative;aspect-ratio:390/585;width:min(92vw,460px);max-height:100%;pointer-events:auto;touch-action:none} /* Emplacements fantômes (visibles uniquement en édition) */ .co-ghost{position:absolute;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;border:1.5px dashed var(--co-line);background:rgba(141,160,192,.05);color:var(--co-dim);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;z-index:15;animation:coFade .3s ease both} .co-ghost:hover{border-color:var(--co-fg);color:var(--co-fg)} /* Bouton de retrait sur une planète (édition) */ .co-remove{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;background:#E8604C;color:#fff;border:2px solid var(--co-bg,#080A12);display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;cursor:pointer;z-index:25;box-shadow:0 2px 8px rgba(0,0,0,.5)} .co-node.co-dragging{z-index:60} .co-node.co-dragging .co-orb{transform:scale(1.18);filter:brightness(1.1)} .co-editing .co-node{cursor:grab} .co-editing .co-star{animation:coJiggle 2.6s ease-in-out infinite} @keyframes coJiggle{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-1.2deg)}75%{transform:rotate(1.2deg)}} .co-editdone{background:var(--co-ink)!important;color:var(--co-onink)!important;border-color:var(--co-ink)!important;font-weight:600} .co-edithint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 88px);z-index:35;text-align:center;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--co-dim)} .co-node{position:absolute;transform:translate(-50%,-50%);z-index:20} .co-node.spawn{animation:coshoot .6s cubic-bezier(.2,.7,.2,1) both} .co-star{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;transition:transform .25s cubic-bezier(.2,.7,.2,1)} .co-star:hover{transform:scale(1.09)} .co-star:active{transform:scale(.94)} .co-dot{border-radius:99px;position:relative} .co-dot::after{content:'';position:absolute;inset:-30%;border-radius:99px;background:inherit;opacity:.4;filter:blur(9px);z-index:-1} .co-dot.urgent{animation:copulse 1.9s ease-in-out infinite} .co-dot.flare{animation:coflare 1.1s ease-out} /* Orbe = planète-sphère (matière radiale + lueur portée par le style inline) */ .co-orb{border-radius:50%;display:block;flex:none} .co-orb.urgent{animation:copulse 1.9s ease-in-out infinite} .co-orb.flare{animation:coflare 1.1s ease-out} .co-lab{font-size:clamp(12px,1.15vw,15px);font-weight:600;white-space:nowrap;color:var(--co-lab);text-shadow:0 1px 6px rgba(0,0,0,.55)} .co-cnt{font-family:'JetBrains Mono',monospace;font-size:clamp(9px,.9vw,11px);white-space:nowrap;opacity:.92} .co-dock{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:40;width:min(560px,calc(100vw - 32px));display:flex;flex-direction:column;align-items:center;gap:12px} .co-cmd{width:100%;display:flex;align-items:center;gap:11px;padding:14px 16px;border-radius:18px;backdrop-filter:blur(14px);background:var(--co-glass);border:1px solid var(--co-line);box-shadow:0 16px 44px -18px rgba(0,0,0,.6)} .co-plus{width:30px;height:30px;border-radius:99px;background:var(--co-ink);color:var(--co-onink);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;border:none;cursor:pointer;transition:transform .15s} .co-plus:hover{transform:scale(1.08)} .co-plus:active{transform:scale(.92)} .co-cmd input{font:inherit;font-size:15px;color:var(--co-fg);background:transparent;border:none;outline:none;width:100%} .co-cmd input::placeholder{color:var(--co-dim);opacity:.9} .co-cmdpv{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;width:100%} .co-cmdpv:empty{display:none} .co-cmdpv .cmd-chip{background:var(--co-glass);border-color:var(--co-line);color:var(--co-fg);backdrop-filter:blur(8px)} .co-peekback{position:absolute;inset:0;z-index:50;background:rgba(3,6,14,.55);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s ease} .co.light .co-peekback{background:rgba(199,209,225,.55)} .co-peek{position:relative;width:min(560px,calc(100vw - 24px));margin:0 12px calc(env(safe-area-inset-bottom,0px) + 16px);background:var(--co-glass);border:1px solid var(--co-line);border-radius:22px;padding:24px;backdrop-filter:blur(20px);color:var(--co-fg);animation:modalIn .3s cubic-bezier(.2,.7,.2,1)} .co-peek-h{display:flex;align-items:center;gap:13px;margin-bottom:16px} .co-peek-dot{width:16px;height:16px;border-radius:99px;flex-shrink:0} .co-peek-name{font-family:'Instrument Serif',serif;font-size:34px;line-height:1;letter-spacing:-.01em} .co-peek-cnt{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--co-dim);margin-left:auto} .co-peek-line{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--co-line);font-size:15px;align-items:baseline} .co-peek-line:last-of-type{border-bottom:none} .co-pm{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--co-dim);margin-left:auto;white-space:nowrap} .co-peek-cta{margin-top:18px;width:100%;padding:14px;border-radius:12px;background:var(--co-ink);color:var(--co-onink);font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;text-align:center;display:block} .co-peek-close{position:absolute;top:18px;right:20px;width:34px;height:34px;border-radius:99px;border:1px solid var(--co-line);color:var(--co-dim);display:flex;align-items:center;justify-content:center;font-size:16px} /* --- Carte mentale (hub radial) --- */ .map-wrap{padding:6px 0 72px} .map-canvas{position:relative;width:100%;max-width:min(520px,88vw);aspect-ratio:1;margin:24px auto} .map-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .map-line{stroke:var(--line);stroke-width:.4} .map-line.u{stroke:color-mix(in oklab,var(--accent2) 55%,transparent);stroke-width:.6} .map-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(92px,23vw,124px);height:clamp(92px,23vw,124px);border-radius:999px;background:radial-gradient(120% 100% at 50% 14%,#1B2040 0%,#0A0C18 62%,#05060C 100%);color:#D6E2F5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 12px 34px rgba(0,0,0,.5),inset 0 0 0 1px rgba(184,198,240,.16);z-index:2} .map-center .c-cross{font-size:30px;line-height:1;font-weight:600;display:flex} .map-center .c-cross .brand-glyph{width:38px;height:38px} .map-center .c-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;margin-top:5px;opacity:.9} .map-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:7px;width:clamp(92px,25vw,116px);text-align:center;cursor:pointer;z-index:3} .map-disc{width:clamp(62px,17vw,82px);height:clamp(62px,17vw,82px);border-radius:999px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;transition:transform .2s,border-color .2s,box-shadow .2s} .map-node:hover .map-disc,.map-node:active .map-disc{transform:scale(1.07);border-color:var(--accent)} .map-disc.urgent{border-color:var(--accent2);box-shadow:0 0 0 5px color-mix(in oklab,var(--accent2) 12%,transparent)} .map-disc svg{width:20px;height:20px;color:var(--dim);stroke:currentColor} .map-node:hover .map-disc svg{color:var(--accent)} .map-num{font-family:'Instrument Serif',serif;font-size:20px;line-height:1;color:var(--fg)} .map-disc.urgent .map-num{color:var(--accent2)} .map-label{font-size:14px;font-weight:600;line-height:1} .map-sig{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);margin-top:3px} .map-sig.urgent{color:var(--accent2)} @media(max-width:480px){ .map-num{font-size:17px} .map-label{font-size:12px} } /* --- Barre de commande (quick-add en langage naturel) --- */ .cmd{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 20px;transition:border-color .2s,box-shadow .2s} .cmd:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 14%,transparent)} .cmd-caret{font-family:'JetBrains Mono',monospace;font-size:20px;color:var(--accent);flex-shrink:0;line-height:1} .cmd-input{border:none;background:transparent;font-size:18px;padding:0;flex:1;min-width:0} .cmd-input::placeholder{color:var(--dim)} .cmd-go{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);border-radius:8px;padding:6px 10px;flex-shrink:0} .cmd-preview{min-height:24px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0 32px;padding-left:4px} .cmd-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--fg)} .cmd-chip.kind{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600} .cmd-chip.cat{color:#fff;border:none} .cmd-chip.go{cursor:pointer;transition:transform .15s,border-color .15s} .co-cmdpv .cmd-chip.go:hover{border-color:var(--co-fg);transform:translateY(-1px)} .cmd-hint{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim);opacity:.7} /* --- Bouton Réglages sous la barre magique (accueil) --- */ .co-foot{display:flex;justify-content:center;gap:22px;margin-top:6px} .co-settings{display:inline-flex;align-items:center;gap:6px;margin:12px auto 0;padding:6px 12px;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--co-dim,#8DA0C0);opacity:.72;transition:opacity .2s} .co-foot .co-settings{margin:0} .co-settings:hover{opacity:1} .co-settings svg{width:13px;height:13px} /* --- Swipe pour cocher (tactile) --- */ .swipe{position:relative;overflow:hidden;border-radius:14px} .swipe-fill{position:absolute;inset:0;background:var(--accent);color:var(--bg);display:flex;align-items:center;gap:8px;padding-left:22px;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.1em;text-transform:uppercase;border-radius:14px} .swipe .task-row{position:relative;transition:transform .28s cubic-bezier(.2,.7,.2,1);touch-action:pan-y;will-change:transform} @keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}} .task-check.pop{animation:pop .35s cubic-bezier(.2,.7,.2,1)} /* --- Rituels : bande semaine + timeline verticale (Traitement) --- */ .rit-weekstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:36px} .rit-pip{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;border-radius:12px;border:1px solid var(--line);background:var(--card)} .rit-pip.today{border-color:var(--accent);border-width:2px;padding:13px 5px} .rit-pip.has{background:color-mix(in oklab,var(--accent) 7%,var(--card))} .rit-pip-day{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .rit-pip.today .rit-pip-day{color:var(--accent)} .rit-pip-dot{width:8px;height:8px;border-radius:999px;background:var(--line)} .rit-pip-dot.on{background:var(--accent)} .rit-pip-count{font-family:'Instrument Serif',serif;font-size:22px;line-height:1;color:var(--fg)} .rit-pip-count.zero{color:var(--dim);opacity:.4} .rit-timeline{position:relative;padding-left:38px} .rit-timeline::before{content:'';position:absolute;left:13px;top:8px;bottom:8px;width:2px;background:var(--line)} .rit-node{position:relative;margin-bottom:26px} .rit-node:last-child{margin-bottom:0} .rit-node-mark{position:absolute;left:-38px;top:2px;width:28px;height:28px;border-radius:999px;background:var(--card);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;color:var(--dim)} .rit-node.today .rit-node-mark{border-color:var(--accent);background:var(--accent);color:#fff} .rit-node-day{font-family:'Instrument Serif',serif;font-size:26px;line-height:1;letter-spacing:-.01em;margin-bottom:14px} .rit-node.today .rit-node-day{color:var(--accent)} .rit-node-day em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-left:10px} .rit-card{display:grid;grid-template-columns:26px 1fr auto;gap:14px;align-items:center;padding:15px 18px;background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:8px;text-align:left;width:100%;transition:transform .18s,border-color .18s} .rit-card:hover{transform:translateX(3px);border-color:var(--accent)} .rit-card:last-child{margin-bottom:0} .rit-check{width:26px;height:26px;border-radius:999px;border:1.5px solid var(--dim);display:inline-flex;align-items:center;justify-content:center;font-size:14px;color:#fff;transition:all .2s;background:transparent;cursor:pointer} .rit-check.done{background:var(--accent);border-color:var(--accent)} .rit-label{font-size:17px;line-height:1.3} .rit-card.done .rit-label{text-decoration:line-through;opacity:.45} .rit-time{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--dim);white-space:nowrap} .rit-obs{display:grid;grid-template-columns:1fr auto;gap:16px;padding:15px 0;border-bottom:1px dashed var(--line);align-items:center} .rit-obs:last-child{border-bottom:none} .rit-obs-label{font-size:17px} .rit-obs-dots{display:inline-flex;gap:8px} .rit-obs-dot{width:13px;height:13px;border-radius:999px;border:1.5px solid var(--dim)} .rit-obs-dot.on{background:var(--accent);border-color:var(--accent)} @media(max-width:768px){.rit-weekstrip{gap:5px}.rit-pip{padding:10px 4px}.rit-pip-count{font-size:18px}} /* --- Rituels : grille d'observance (7×4 pastilles) --- */ .obs-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px} .obs-dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:14px} .obs-dow span{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.1em;color:var(--dim);text-align:center} .obs-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:15px;justify-items:center} .obs-dot{width:12px;height:12px;border-radius:50%;box-sizing:border-box} .obs-dot.held{background:var(--accent);box-shadow:0 0 7px color-mix(in oklab,var(--accent) 55%,transparent)} .obs-dot.miss{border:1px solid color-mix(in oklab,var(--dim) 55%,transparent)} .obs-dot.soon{border:1px dashed color-mix(in oklab,var(--dim) 45%,transparent)} .obs-dot.none{background:color-mix(in oklab,var(--dim) 16%,transparent)} .obs-legend{display:flex;gap:16px;justify-content:center;margin-top:18px} .obs-leg{display:flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)} .obs-leg .d{width:8px;height:8px;border-radius:50%;box-sizing:border-box} .obs-leg .d.held{background:var(--accent)} .obs-leg .d.miss{border:1px solid color-mix(in oklab,var(--dim) 55%,transparent)} .obs-leg .d.soon{border:1px dashed color-mix(in oklab,var(--dim) 45%,transparent)} .obs-streak{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);text-align:center;margin-top:16px} /* --- Courrier --- */ .mail-list{display:flex;flex-direction:column;gap:9px} .mail-row{display:flex;gap:12px;align-items:center;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:14px;transition:border-color .2s} .mail-row.is-prio{border-color:color-mix(in oklab,var(--accent) 28%,var(--line))} .mail-row:hover{border-color:var(--accent)} .mail-dot{width:8px;height:8px;border-radius:999px;flex:none;box-sizing:border-box} .mail-body{flex:1;min-width:0;cursor:pointer} .mail-sender{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-subject{font-size:14px;font-weight:500;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-subject.dim{color:var(--dim);font-weight:400} .mail-meta{flex:none;text-align:right} .mail-date{font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--dim);white-space:nowrap} .mail-tag{font-family:'JetBrains Mono',monospace;font-size:7.5px;letter-spacing:.12em;margin-top:4px} .mail-actions{display:flex;gap:4px;opacity:0;transition:opacity .2s;flex:none} .mail-row:hover .mail-actions{opacity:1} /* Cadrans / stats — un seul bloc à colonnes divisées */ .statrow{display:flex;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 0;margin-bottom:20px} .stat{flex:1;text-align:center} .stat + .stat{border-left:1px solid var(--line)} .stat-num{font-family:'Instrument Serif',serif;font-size:32px;line-height:1} .stat-num.accent{color:var(--accent)} .stat-lbl{font-family:'JetBrains Mono',monospace;font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:7px} /* Histogramme (Jammin) */ .bars-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin-bottom:16px} .bars-title{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:14px} .bars{display:flex;align-items:flex-end;gap:10px;height:90px} .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%} .bar{width:100%;max-width:24px;border-radius:5px 5px 2px 2px;background:linear-gradient(var(--accent),color-mix(in oklab,var(--accent) 35%,transparent));box-shadow:0 0 10px color-mix(in oklab,var(--accent) 30%,transparent)} .bar-l{font-family:'JetBrains Mono',monospace;font-size:7.5px;color:var(--dim)} /* Cartes commande (Jammin) */ .ord-list{display:flex;flex-direction:column;gap:9px} .ord-row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px} .ord-main{flex:1;min-width:0} .ord-name{font-size:14px;font-weight:500;line-height:1.3} .ord-sub{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:4px} .ord-amt{flex:none;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--accent);white-space:nowrap} /* Automatisations (Auto) */ .auto-list{display:flex;flex-direction:column;gap:9px} .auto-row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;transition:border-color .2s} .auto-row.is-err{border-color:color-mix(in oklab,var(--accent2) 25%,var(--line))} .auto-row:hover{border-color:var(--accent)} .auto-dot{width:10px;height:10px;border-radius:50%;flex:none} .auto-main{flex:1;min-width:0} .auto-name{display:block;font-size:14px;font-weight:500;line-height:1.3} .auto-sub{display:block;font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .auto-meta{flex:none;font-family:'JetBrains Mono',monospace;font-size:8.5px;color:var(--dim);white-space:nowrap} .auto-meta.err{color:var(--accent2)} /* Réglages — groupes en cartes */ .set-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:0 18px;margin-bottom:14px} .set-card.set-danger{border-color:color-mix(in oklab,var(--accent2) 22%,var(--line))} .set-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--line)} .set-row:last-child{border-bottom:none} .set-label{font-size:14px;font-weight:500} .set-sub{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:4px;font-weight:400} .set-val{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.1em;color:var(--dim)} .set-logout{font-size:14px;font-weight:500;color:var(--accent2);background:none;border:none;cursor:pointer;padding:0} .set-chev{color:var(--accent2);opacity:.6} .set-version{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);text-align:center;margin-top:26px} /* Menu de rappels (Réglages → Notifications) */ .nsec{padding:14px 2px;border-bottom:1px solid var(--line)} .nsec:last-child{border-bottom:none} .nsec-t{font-size:13.5px;font-weight:500;margin-bottom:11px;color:var(--fg)} .nchips{display:flex;flex-wrap:wrap;gap:8px} .nchip{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:8px 13px;border:1px solid var(--line);border-radius:999px;color:var(--dim);background:transparent;cursor:pointer;transition:all .15s} .nchip:hover{border-color:var(--fg);color:var(--fg)} .nchip.on{border-color:var(--accent);color:#fff;background:var(--accent)} /* --- Canva --- */ .canva-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px} .canva-cell{display:flex;flex-direction:column} .canva-tile{display:block;position:relative;aspect-ratio:4/5;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;transition:border-color .2s} .canva-tile.is-fav{border-color:color-mix(in oklab,var(--accent) 40%,var(--line))} .canva-tile:hover{border-color:var(--accent)} .canva-bg{position:absolute;inset:0;z-index:0;opacity:.5} .canva-thumb{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease} .canva-thumb.loaded{opacity:1} .canva-ph{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .canva-fav{position:absolute;top:8px;right:10px;z-index:3;width:26px;height:26px;border-radius:999px;background:rgba(7,8,15,.5);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;transition:all .2s;backdrop-filter:blur(8px)} .canva-fav.active{color:var(--accent)} .canva-name{font-size:12.5px;font-weight:500;line-height:1.3;margin-top:8px;color:var(--fg)} .canva-meta{font-family:'JetBrains Mono',monospace;font-size:7.5px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in oklab,var(--dim) 75%,transparent);margin-top:3px} /* --- Constantes (KPIs) --- */ .kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px} .kpi{padding:22px;background:var(--card);border:1px solid var(--line);border-radius:14px} .kpi-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:10px} .kpi-value{font-family:'Instrument Serif',serif;font-size:clamp(40px,5vw,58px);line-height:1;letter-spacing:-.02em} .kpi-value.accent{color:var(--accent)} .kpi-delta{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--accent);margin-top:6px} .row-dash{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px dashed var(--line);font-size:15px} .row-dash:last-child{border-bottom:none} .row-dash .amount{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent);font-weight:600} .row-dash .rd-date{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim)} .scenario-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-top:16px;border-top:1px dashed var(--line);margin-top:16px} .scenario-stat-value{font-family:'Instrument Serif',serif;font-size:28px;line-height:1} .scenario-stat-value.warn{color:var(--accent2)} .exec-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px dashed var(--line);font-family:'JetBrains Mono',monospace;font-size:13px} .exec-row:last-child{border-bottom:none} .exec-dot{width:8px;height:8px;border-radius:999px} .exec-dot.ok{background:var(--accent)} .exec-dot.err{background:var(--accent2)} .exec-dot.pend{background:var(--dim)} /* --- Consultation du jour (ordonnance) --- */ .rx{margin-bottom:30px;padding:26px 30px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px;background:var(--card)} .rx-tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;display:flex;align-items:center;gap:8px} .rx-text{font-family:'Instrument Serif',serif;font-size:clamp(26px,3vw,36px);line-height:1.2;letter-spacing:-.01em;margin:0;max-width:900px} .alert-critical{margin-bottom:30px;padding:24px 30px;border:1px solid var(--accent2);border-radius:14px;background:color-mix(in oklab,var(--accent2) 8%,var(--card));display:flex;flex-direction:column;gap:14px} .alert-badge{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:5px 11px;background:var(--accent2);color:#fff;border-radius:6px;align-self:flex-start} .alert-title{font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(22px,2.6vw,28px);line-height:1.2;color:var(--fg);margin:0;max-width:900px} .alert-cta{align-self:flex-start;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:11px 18px;background:var(--accent2);color:#fff;border-radius:10px} /* --- Courrier prioritaire --- */ .prio-mail{position:relative} .prio-mail-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:18px;flex-wrap:wrap} .prio-mail-days{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent2)} .prio-mail-sender{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim);margin-bottom:12px} .prio-mail-subject{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(24px,3vw,34px);line-height:1.1;letter-spacing:-.01em;margin:0 0 16px;max-width:900px} .prio-mail-preview{max-width:820px;font-size:15px;line-height:1.55;color:var(--dim);margin:0 0 22px} .prio-mail-actions{display:flex;gap:10px;flex-wrap:wrap} /* --- Empty / états --- */ .empty{padding:48px 20px;text-align:center;color:var(--dim)} .empty-glyph{font-family:'Instrument Serif',serif;font-size:56px;color:var(--accent);opacity:.4;margin-bottom:14px;line-height:1} .empty-title{font-family:'Instrument Serif',serif;font-style:italic;font-size:26px;color:var(--fg);margin-bottom:8px} .empty-sub{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:20px} .skel{background:linear-gradient(90deg,var(--card) 25%,color-mix(in oklab,var(--fg) 8%,var(--card)) 50%,var(--card) 75%);background-size:800px 100%;animation:shimmer 1.4s infinite linear;border-radius:14px} .skel-line{height:16px;margin-bottom:10px} .skel-card{height:120px;margin-bottom:16px} .load-error{max-width:460px;margin:8vh auto 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px} .load-error-glyph{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:28px;background:color-mix(in oklab,var(--accent2) 12%,var(--card));color:var(--accent2);border:1px solid color-mix(in oklab,var(--accent2) 32%,transparent)} .load-error h2{font-family:'Instrument Serif',serif;font-size:32px;line-height:1.05} .load-error p{color:var(--dim);font-size:15px;line-height:1.5;margin:0} .load-error-detail{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);opacity:.7;word-break:break-word} .load-error .btn{margin-top:6px} .banner{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:11px 16px;border-radius:10px;margin-bottom:20px;background:color-mix(in oklab,var(--accent2) 10%,var(--card));color:var(--accent2);border:1px solid color-mix(in oklab,var(--accent2) 35%,transparent)} /* --- Modal --- */ .modal-back{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease} .modal{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;animation:modalIn .3s cubic-bezier(.2,.7,.2,1)} .modal-title{font-family:'Instrument Serif',serif;font-size:34px;line-height:1;letter-spacing:-.01em;margin:0 0 6px} .modal-sub{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:24px} .modal-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px} .modal-field label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)} .modal-hint{font-size:13px;color:var(--dim);line-height:1.4} .modal-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:24px} @media(max-width:480px){ .modal-actions .btn-primary{flex:1 1 100%} } .cat-swatches{display:flex;gap:8px;flex-wrap:wrap} .cat-sw{padding:9px 14px;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border:2px solid transparent;color:#fff;transition:all .15s} .cat-sw.off{opacity:.45} .toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%);padding:14px 24px;background:var(--fg);color:var(--bg);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;z-index:300;box-shadow:0 12px 40px rgba(0,0,0,.3);animation:riseIn .3s ease;max-width:min(520px,calc(100vw - 32px));text-align:center} .toast.has-undo{display:flex;align-items:center;gap:14px;padding:12px 12px 12px 22px;text-transform:none;letter-spacing:0} .toast-undo{flex:none;background:transparent;border:1px solid color-mix(in oklab,var(--bg) 45%,transparent);color:var(--bg);border-radius:999px;padding:7px 14px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer} .toast-undo:hover{background:color-mix(in oklab,var(--bg) 16%,transparent)} .log-row{display:flex;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)} .log-row:last-child{border-bottom:none} .log-at{flex:none;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);min-width:52px} .log-text{flex:1;font-size:15px;line-height:1.5} .fab{position:fixed;bottom:26px;right:26px;width:54px;height:54px;padding:0;border-radius:999px;background:var(--accent);color:#fff;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 10px 30px color-mix(in oklab,var(--accent) 45%,transparent);z-index:50;transition:width .28s cubic-bezier(.2,.7,.2,1),padding .28s cubic-bezier(.2,.7,.2,1),transform .2s;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;overflow:hidden;white-space:nowrap} .fab .fab-ic{font-size:17px;flex-shrink:0;line-height:1} .fab .fab-txt{max-width:0;opacity:0;overflow:hidden;transition:max-width .28s cubic-bezier(.2,.7,.2,1),opacity .18s ease} .fab:hover,.fab:focus-visible{width:auto;padding:0 22px;transform:translateY(-2px)} .fab:hover .fab-txt,.fab:focus-visible .fab-txt{max-width:160px;opacity:1} .footer{margin-top:64px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)} /* --- Accueil --- */ .home-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px} .home-hero,.home-hero-name{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(52px,8vw,104px);line-height:.96;letter-spacing:-.02em;margin:0 0 8px} .home-hero em,.home-hero-name em{font-style:italic;color:var(--accent)} .home-date{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)} .home-rule{width:28px;height:1px;background:var(--fg);display:inline-block} /* --- Réglages --- */ .settings-block{margin-bottom:36px} .settings-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);flex-wrap:wrap} .settings-row:last-child{border-bottom:none} .settings-key{font-size:15px} .settings-key .k-sub{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-top:3px} /* --- Login --- */ .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg);color:var(--fg)} .login-card{width:100%;max-width:390px;display:flex;flex-direction:column} .login-brand{font-family:'Instrument Serif',serif;font-size:44px;letter-spacing:-.02em;line-height:1;margin-bottom:6px} .login-brand em{font-style:italic;color:var(--accent)} .login-sub{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:28px} .login-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px} .login-field label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)} .login-err{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent2);min-height:16px;margin:4px 0 8px} .login-msg{font-size:12.5px;line-height:1.5;color:#5FA777;margin:2px 0 6px} .login-links{display:flex;flex-direction:column;gap:10px;align-items:center;margin-top:18px} .login-link{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:none;border:none;cursor:pointer;padding:2px} .login-link.dim{color:var(--dim)} .login-link:hover{opacity:.75} .login-foot{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-top:20px;line-height:1.6} /* ---- Pages légales ---- */ .legal-wrap{min-height:100vh;background:var(--bg);color:var(--fg);padding:calc(28px + env(safe-area-inset-top)) 22px calc(48px + env(safe-area-inset-bottom))} .legal-inner{max-width:680px;margin:0 auto} .legal-back{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);text-decoration:none;margin-bottom:26px} .legal-back:hover{color:var(--fg)} .legal-lockup{display:flex;align-items:center;gap:12px;margin-bottom:22px} .legal-tabs{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--line)} .legal-tab{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--dim);text-decoration:none;transition:all .2s} .legal-tab:hover{color:var(--fg)} .legal-tab.on{color:var(--accent);border-color:color-mix(in oklab,var(--accent) 45%,var(--line))} .legal-doc{line-height:1.65;font-size:15px} .legal-doc h1{font-family:'Instrument Serif',serif;font-size:34px;letter-spacing:-.02em;line-height:1.1;margin-bottom:8px} .legal-updated{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:26px} .legal-doc h2{font-size:16px;font-weight:600;margin:26px 0 8px;letter-spacing:-.01em} .legal-doc p{color:color-mix(in oklab,var(--fg) 86%,transparent);margin-bottom:12px} .legal-doc ul{margin:0 0 12px;padding-left:20px;color:color-mix(in oklab,var(--fg) 86%,transparent)} .legal-doc li{margin-bottom:8px} .legal-doc a{color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--accent) 35%,transparent)} .legal-doc a:hover{opacity:.75} .legal-doc strong{color:var(--fg);font-weight:600} .set-legal{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:20px 0 6px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase} .set-legal a{color:var(--dim);text-decoration:none} .set-legal a:hover{color:var(--fg)} .set-legal span{color:var(--line)} /* --- Responsive --- */ @media(max-width:1023px){ .sidebar{display:none} .bottom-nav{display:block} .safebar{display:block} .content{padding:24px 20px calc(96px + env(safe-area-inset-bottom));padding-top:max(50px, calc(env(safe-area-inset-top, 0px) + 12px))} .fab{bottom:calc(88px + env(safe-area-inset-bottom))} .toast{bottom:calc(88px + env(safe-area-inset-bottom))} } @media(max-width:900px){ .home-grid{grid-template-columns:1fr} } @media(max-width:768px){ .content{padding-left:16px;padding-right:16px} .rituals-week{grid-template-columns:1fr} .canva-grid{grid-template-columns:repeat(2,1fr)} .kpi-grid{grid-template-columns:repeat(2,1fr)} .cal-num{width:26px;height:26px;font-size:12px} .cal-month{font-size:26px} .page-title{font-size:clamp(36px,10vw,54px)} } @media(max-width:480px){ .home-hero,.home-hero-name{font-size:52px} .mail-actions{opacity:1} .task-actions{display:none} /* mobile : édition au tap (fiche), fait au swipe → ligne épurée */ .kpi-value{font-size:38px} }