/* ============================================================ Boarding Pass — v5 « Cabinet » RDV avec soi-même. Palette vert cabinet + ivoire. Typo : Instrument Serif + Inter Tight + JetBrains Mono ============================================================ */ /* --- Palettes (thème résolu appliqué sur ) --- */ :root, :root[data-theme="light"]{ --bg:#F1EEE8; --fg:#1C1A15; --dim:#7C766B; --line:rgba(28,26,21,.12); --card:#FFFFFF; --accent:#2F7A6B; --accent2:#D8503C; } :root[data-theme="dark"]{ --bg:#12130F; --fg:#ECEAE0; --dim:#9A968A; --line:rgba(236,234,224,.13); --card:#1B1C17; --accent:#56B39C; --accent2:#F0705C; } /* 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:'Inter Tight',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}} .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:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;flex-shrink:0} .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} /* --- Bottom nav --- */ .bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:color-mix(in oklab,var(--card) 94%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--line);padding:8px 8px calc(8px + env(safe-area-inset-bottom))} .bn-row{display:grid;grid-template-columns:repeat(5,1fr);gap:4px} .bn-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 4px;border-radius:10px;color:var(--dim);transition:color .2s;min-height:52px;justify-content:center} .bn-item.active{color:var(--accent)} .bn-item svg{width:18px;height:18px} .bn-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.06em;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} .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:italic;color:var(--accent)} .page-sub{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)} .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);gap:6px} .cal-dow{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:center;padding-bottom:8px} .cal-cell{min-height:96px;border-radius:10px;border:1px solid var(--line);padding:7px;background:var(--card);cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:border-color .15s} .cal-cell:hover{border-color:var(--accent)} .cal-cell.dim{opacity:.4} .cal-cell.today{background:color-mix(in oklab,var(--accent) 10%,var(--card));border-color:var(--accent)} .cal-cell.sel{border-color:var(--fg);border-width:2px;padding:6px} .cal-daynum{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--fg);display:flex;justify-content:space-between;align-items:center} .cal-cell.today .cal-daynum-badge{background:var(--accent);color:#fff;width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:11px} .cal-ev{font-size:11px;line-height:1.2;color:#fff;border-radius:5px;padding:3px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500} .cal-more{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--dim);padding-left:2px} /* Timeline du jour (façon iPhone) */ .day-agenda{display:flex;flex-direction:column} .day-hour{display:grid;grid-template-columns:54px 1fr;gap:12px;min-height:52px;border-top:1px solid var(--line);padding-top:4px} .day-hour-label{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);padding-top:2px} .day-slot{position:relative;display:flex;flex-direction:column;gap:4px;padding-bottom:6px} .day-ev{border-radius:9px;padding:9px 12px;color:#fff;cursor:pointer} .day-ev-t{font-size:15px;font-weight:600;line-height:1.2} .day-ev-m{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;opacity:.85;margin-top:2px;text-transform:uppercase} .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 --- */ .task-group-head{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:20px 0 8px;display:flex;justify-content:space-between;align-items:baseline;cursor:pointer} .task-group-head.overdue{color:var(--accent2)} .task-row{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)} .task-row:last-child{border-bottom:none} .task-check{width:24px;height:24px;flex-shrink:0;border-radius:999px;border:1.5px solid var(--dim);cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;justify-content:center;font-size:13px;background:transparent} .task-check:hover{border-color:var(--fg)} .task-check.done{background:var(--accent);border-color:var(--accent);color:#fff} .task-label{flex:1;font-size:16px;line-height:1.4;min-width:0;cursor:pointer} .task-label.done{text-decoration:line-through;opacity:.45} .task-meta{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);white-space:nowrap} .task-meta.overdue{color:var(--accent2)} .task-meta.today{color:var(--accent)} .task-actions{display:flex;gap:4px;opacity:0;transition:opacity .2s} .task-row:hover .task-actions{opacity:1} /* --- Dossiers / chantiers --- */ .project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px} .project-card{padding:24px;background:var(--card);border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;gap:13px;transition:transform .3s cubic-bezier(.2,.7,.2,1);cursor:pointer;text-align:left;width:100%} .project-card:hover{transform:translateY(-4px);border-color:var(--accent)} .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)} /* --- 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}} /* --- Courrier --- */ .mail-row{display:grid;grid-template-columns:12px 1fr auto auto;gap:14px;align-items:center;padding:15px 12px;border-bottom:1px solid var(--line);border-radius:8px;transition:background .2s} .mail-row:hover{background:var(--bg)} .mail-dot{width:7px;height:7px;border-radius:999px} .mail-body{min-width:0;cursor:pointer} .mail-sender{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-subject{font-size:15px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-date{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);white-space:nowrap} .mail-actions{display:flex;gap:4px;opacity:0;transition:opacity .2s} .mail-row:hover .mail-actions{opacity:1} /* --- Canva --- */ .canva-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px} .canva-tile{display:block;position:relative;aspect-ratio:4/5;background:var(--card);border-radius:12px;overflow:hidden;transition:transform .4s cubic-bezier(.2,.7,.2,1)} .canva-tile:hover{transform:scale(1.02);opacity:1} .canva-bg{position:absolute;inset:0;z-index:0} .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-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.3) 40%,transparent 70%)} .canva-fav{position:absolute;top:10px;right:10px;z-index:3;width:32px;height:32px;border-radius:999px;background:rgba(0,0,0,.4);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;transition:all .2s;backdrop-filter:blur(8px)} .canva-fav.active{color:#FFB627} .canva-date{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:6px} .canva-title{font-family:'Instrument Serif',serif;font-size:18px;line-height:1.15;color:#fff} /* --- 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} .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;gap:10px;justify-content:flex-end;margin-top:24px} .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} .fab{position:fixed;bottom:26px;right:26px;height:56px;padding:0 22px;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 8px 28px color-mix(in oklab,var(--accent) 40%,transparent);z-index:50;transition:transform .2s;display:inline-flex;align-items:center;gap:9px;font-weight:600} .fab:hover{transform:scale(1.04)} .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-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} /* --- Responsive --- */ @media(max-width:1023px){ .sidebar{display:none} .bottom-nav{display:block} .content{padding:24px 20px calc(96px + env(safe-area-inset-bottom));padding-top:max(24px,env(safe-area-inset-top))} .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} .cal-cell{min-height:74px} .cal-ev{font-size:0;padding:3px} .cal-ev::before{content:'';display:block;height:4px;border-radius:2px} } @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-cell{min-height:60px;padding:5px} .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,.task-actions{opacity:1} .kpi-value{font-size:38px} }