/* ═══════════ [CSS-01] TOKENS & THEME ═══════════ */
  :root{
    --bg:#F7F7F8; --surface:#FFFFFF; --ink:#16161A; --muted:#8A8A8F; --faint:#B5B5BA;
    --line:#ECECEE; --accent:#1803FB; --accent-tint:rgba(24,3,251,.08); --accent-tint-2:rgba(24,3,251,.14);
    --radius:14px; --radius-sm:10px;
    --grey-bg:#F1F2F4; --grey-tx:#6B7280; --grey-solid:#B6B9C0;
    --blue-bg:#ECEBFF; --blue-tx:#1803FB; --blue-solid:#1803FB;
    --green-bg:#E6F6EC; --green-tx:#15824A; --green-solid:#15824A;
    --yellow-bg:#FBF1DA; --yellow-tx:#9A6B00; --yellow-solid:#D6A41A;
    --red-bg:#FBEAE7; --red-tx:#C0392B; --red-solid:#C0392B; --red-glow:rgba(192,57,43,.30);
    --purple-bg:#EFEBFB; --purple-tx:#6D28D9; --purple-solid:#7C3AED;
    --colw:90px; --labelw:210px;
    /* Series des graphiques. --chart-score suit l'accent : une seule couleur de
       marque a changer pour rebrander, les courbes suivent. */
    --chart-hours:#F43F5E; --chart-score:var(--accent);
    /* Palette categorielle des camemberts (projets, utilisateurs). Consommee
       par app.js sous forme de var(--pie-N) : rien a recompiler pour la changer. */
    --pie-1:var(--accent); --pie-2:#7C3AED; --pie-3:#0EA5A4;
    --pie-4:#F43F5E;       --pie-5:#F59E0B; --pie-6:#16A34A;
    --pie-7:#EC4899;       --pie-8:#0EA5E9; --pie-9:#64748B;
    color-scheme:light;
  }
  html.dark{
    color-scheme:dark;
    --bg:#0E0E12; --surface:#16161B; --ink:#ECECEF; --muted:#9A9AA3; --faint:#5E5E68; --line:#2A2A31;
    --accent:#7E76FF; --accent-tint:rgba(126,118,255,.16); --accent-tint-2:rgba(126,118,255,.24);
    --grey-bg:#26262D; --grey-tx:#AEB2BA; --grey-solid:#5E626B;
    --blue-bg:rgba(126,118,255,.18); --blue-tx:#ADA6FF; --blue-solid:#7E76FF;
    --green-bg:rgba(43,182,113,.16); --green-tx:#5FD89B; --green-solid:#2BB671;
    --yellow-bg:rgba(214,164,26,.18); --yellow-tx:#E6BC4F; --yellow-solid:#D6A41A;
    --red-bg:rgba(214,75,60,.20); --red-tx:#F39184; --red-solid:#D64B3C; --red-glow:rgba(214,75,60,.38);
    --purple-bg:rgba(139,92,246,.22); --purple-tx:#C4B5FD; --purple-solid:#8B5CF6;
    /* Sur fond sombre les teintes saturees s'eteignent : on remonte la clarte.
       --chart-score et --pie-1 suivent --accent, redefini juste au-dessus. */
    --chart-hours:#FF6B81;
    /* Ordre different du theme clair, volontairement : --pie-1 suit l'accent,
       violet en sombre. Le violet de la palette (#A78BFA) part donc en position
       8, sinon les deux premieres parts d'un camembert sont deux violets voisins
       et leur frontiere disparait. */
    --pie-2:#2DD4BF; --pie-3:#FBBF24; --pie-4:#FB7185; --pie-5:#38BDF8;
    --pie-6:#4ADE80; --pie-7:#F472B6; --pie-8:#A78BFA; --pie-9:#94A3B8;
  }
  html.dark .sidebar{background:rgba(22,22,27,.72)}
  html.dark .seg{background:#202026}
  html.dark .pcode-chip{background:#26262D;color:var(--muted)}
  html.dark .tl-group,html.dark .tl-group .lbl{background:#1B1B21}
  html.dark .tl-row .lbl{background:var(--surface)}
  html.dark .tl-row:hover .lbl{background:#1C1C23}
  html.dark .row:hover{border-color:#34343C}
  html.dark .edit:hover{background:#202026}
  html.dark .x{background:#26262D}
  html.dark .btn-ghost:hover{background:#202026}
  html.dark .bar{border-color:transparent}
  /* ═══════════ [CSS-02] BASE, SIDEBAR & NAV ═══════════ */
  *{box-sizing:border-box;margin:0;padding:0}
  /* Sans cela, une regle display: (grid, flex...) l'emporte sur l'attribut
     hidden et l'element reste visible alors que le JS le croit masque. */
  [hidden]{display:none!important}
  html,body{height:100%}
  body{font-family:-apple-system,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI",sans-serif;
    background:var(--bg);color:var(--ink);display:flex;height:100vh;overflow:hidden;
    -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
  /* sidebar */
  .sidebar{width:248px;flex:0 0 248px;height:100%;display:flex;flex-direction:column;
    background:rgba(255,255,255,.72);backdrop-filter:blur(20px) saturate(140%);
    -webkit-backdrop-filter:blur(20px) saturate(140%);border-right:1px solid var(--line);padding:22px 14px 14px}
  .brand{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:0 4px 20px 8px}
  .brand-left{display:flex;align-items:center;gap:9px}
  .brand-dot{width:22px;height:22px;border-radius:7px;background:var(--accent);display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px}
  .brand-name{font-size:14px;font-weight:600;letter-spacing:-.01em}
  .theme-btn{width:30px;height:30px;border:1px solid var(--line);background:var(--surface);border-radius:9px;cursor:pointer;display:grid;place-items:center;color:var(--muted);transition:.15s;flex:0 0 30px}
  .theme-btn:hover{color:var(--ink);border-color:var(--faint)}
  .theme-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
  .ic-sun{display:none}
  html.dark .ic-sun{display:block}
  html.dark .ic-moon{display:none}
  .nav{flex:1;overflow-y:auto}
  .nav-group{margin-bottom:18px}
  .nav-label{font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--faint);text-transform:uppercase;padding:0 10px 8px}
  .nav-item{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--radius-sm);color:var(--ink);font-size:14px;font-weight:450;cursor:pointer;transition:background .15s;user-select:none}
  .nav-item svg{width:17px;height:17px;stroke:var(--muted);flex:0 0 17px;pointer-events:none}
  .nav-item:hover{background:rgba(0,0,0,.035)}
  html.dark .nav-item:hover{background:rgba(255,255,255,.05)}
  .nav-item.active{background:var(--accent-tint);color:var(--accent);font-weight:550}
  .nav-item.active svg{stroke:var(--accent)}
  .side-foot{border-top:1px solid var(--line);padding-top:14px;margin-top:8px}
  /* le profil ferme la sidebar : l'ecart passe au-dessus, vers les compteurs */
  .user{display:flex;align-items:center;gap:10px;padding:12px 8px 0}
  .avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-tint);color:var(--accent);display:grid;place-items:center;font-size:12px;font-weight:650;overflow:hidden;flex:0 0 auto}
  .avatar img{width:100%;height:100%;object-fit:cover;display:block}
  .avatar-btn{border:none;padding:0;font:inherit;cursor:pointer;transition:box-shadow .15s}
  .avatar-btn:hover{box-shadow:0 0 0 2px var(--accent-tint-2)}
  /* logo de projet : carre arrondi, l'avatar rond reste reserve aux personnes */
  .plogo{width:26px;height:26px;border-radius:7px;overflow:hidden;background:var(--grey-bg);
    display:block;flex:0 0 auto}
  .plogo.lg{width:34px;height:34px;border-radius:9px}
  .plogo img{width:100%;height:100%;object-fit:cover;display:block}
  .pic-row{display:flex;align-items:center;gap:10px}
  .pic{width:52px;height:52px;border-radius:10px;overflow:hidden;background:var(--bg);border:1px solid var(--line);
    display:grid;place-items:center;flex:0 0 auto}
  .pic.round{border-radius:50%}
  .pic img{width:100%;height:100%;object-fit:cover;display:block}
  .pic-empty{font-size:10px;font-weight:600;color:var(--faint);text-align:center;padding:0 4px;line-height:1.2}
  .user-name{font-size:13px;font-weight:600;letter-spacing:-.01em}
  .scores{display:flex;gap:8px}
  /* colonne + valeur poussee en bas : les deux chiffres restent alignes meme
     quand "Hours this week" passe sur deux lignes et pas "Hours today" */
  .score{flex:1;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 11px}
  .score-label{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
  .score-val{font-size:20px;font-weight:680;color:var(--accent);letter-spacing:-.02em;margin-top:auto;padding-top:3px;line-height:1}
  /* main */
  /* ── Page profil ─────────────────────────────────────────────────────── */
  /* Deux colonnes exactes : Features a gauche, Project access a droite, moitie
     chacune. minmax(0,...) pour qu'un nom de projet long n'elargisse pas sa
     colonne. align-items par defaut (stretch) : les deux cartes s'alignent. */
  .prof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  @media (max-width:920px){.prof-grid{grid-template-columns:1fr}}
  .prof-wide{grid-column:1/-1}
  .prof-id{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
  .pic.lg{width:76px;height:76px}
  .prof-id-txt{flex:1;min-width:180px}
  .prof-id-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:290px}
  .prof-id-act .prof-note{flex-basis:100%}
  /* Pas de tuile dans la tuile : un filet vertical suffit a separer. */
  .prof-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:2px 0}
  .prof-stat{padding:2px 16px;border-left:1px solid var(--line)}
  .prof-stat:first-child{padding-left:0;border-left:none}
  .ps-label{font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ps-val{font-size:24px;font-weight:720;letter-spacing:-.02em;margin-top:6px;line-height:1}
  /* Le cadre de .acc-list est conserve : sans marge interne, le logo et le code
     venaient toucher le filet de gauche. On respire un peu plus qu'ailleurs,
     la page profil n'a pas la densite d'un panneau lateral. */
  .prof-list .acc-item{gap:12px;padding:13px 16px;min-height:52px}
  .prof-list .acc-item .an{padding-right:4px}
  .prof-list .pcode-chip{flex:0 0 auto}
  .prof-list .tt-empty{padding:20px 16px}
  .prof-name{font-size:19px;font-weight:680;letter-spacing:-.02em}
  .prof-mail{font-size:13px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
  .prof-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
  .prof-note{font-size:12.5px;color:var(--muted);line-height:1.5}
  /* Profil de la sidebar : toute la ligne mene a la page, sauf le bouton logout. */
  .user-link{flex:1;min-width:0;display:flex;align-items:center;gap:10px;color:inherit;
    text-decoration:none;border-radius:9px;padding:4px;margin:-4px;transition:background .15s}
  .user-link:hover{background:rgba(0,0,0,.035)}
  html.dark .user-link:hover{background:rgba(255,255,255,.05)}
  .user.active .user-link{background:var(--accent-tint)}
  .user.active .user-name{color:var(--accent)}

  /* ═══════════ [CSS-03] LAYOUT, TABLES & TOOLBAR ═══════════ */
  /* La cloche flotte au-dessus du contenu : on lui reserve sa place a droite
     pour qu'elle ne recouvre jamais les boutons d'action des pages. */
  .main{flex:1;min-width:0;height:100%;overflow-y:auto;padding:34px 88px 60px 40px}
  /* Sous le panneau de detail (40) et sous les modales (50) : un panneau
     ouvert doit recouvrir la cloche, pas passer dessous. */
  .notif{position:fixed;top:26px;right:28px;z-index:30}
  .notif-btn{position:relative;width:38px;height:38px;border-radius:11px;border:1px solid var(--line);
    background:var(--surface);color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:.15s}
  .notif-btn:hover{color:var(--ink);border-color:var(--faint)}
  .notif-btn svg{width:18px;height:18px}
  .notif.on .notif-btn{color:var(--accent);border-color:var(--accent)}
  .notif-dot{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
    background:var(--accent);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;
    border:2px solid var(--bg)}
  .notif-pop{position:absolute;top:46px;right:0;width:370px;max-width:calc(100vw - 40px);
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
    box-shadow:0 12px 40px rgba(0,0,0,.14);overflow:hidden}
  .notif-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:13px 15px;border-bottom:1px solid var(--line)}
  .notif-head .t{font-size:13px;font-weight:650}
  .notif-acts{display:flex;gap:4px}
  .notif-acts button{font:inherit;font-size:11.5px;font-weight:600;color:var(--accent);background:none;
    border:none;cursor:pointer;padding:4px 7px;border-radius:6px}
  .notif-acts button:hover{background:var(--accent-tint)}
  .notif-list{max-height:min(60vh,460px);overflow-y:auto}
  .notif-item{display:flex;gap:10px;padding:12px 15px;border-bottom:1px solid var(--line);
    cursor:pointer;transition:background .12s}
  .notif-item:last-child{border-bottom:none}
  .notif-item:hover{background:var(--bg)}
  .notif-item.unread{background:var(--accent-tint)}
  .notif-item.unread:hover{background:var(--accent-tint-2)}
  .notif-ico{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:0 0 28px;
    font-size:13px;background:var(--grey-bg)}
  .notif-ico.team{background:var(--blue-bg)}
  .notif-ico.task{background:var(--green-bg)}
  .notif-ico.time{background:var(--yellow-bg)}
  .notif-ico.scope{background:var(--purple-bg)}
  .notif-ico.account{background:var(--red-bg)}
  .notif-txt{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
  .notif-line{font-size:13px;line-height:1.4}
  .notif-when{font-size:11px;color:var(--faint)}
  /* Ecarter une notification : discret au repos, net au survol de la ligne. */
  .notif-x{width:22px;height:22px;flex:0 0 22px;border:none;background:none;border-radius:6px;
    color:var(--faint);font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center;
    opacity:0;transition:.12s}
  .notif-item:hover .notif-x,.notif-x:focus-visible{opacity:1}
  .notif-x:hover{background:var(--grey-bg);color:var(--ink)}
  @media (hover:none){.notif-x{opacity:1}}
  .notif-empty{padding:26px 16px;text-align:center;color:var(--faint);font-size:13px}
  /* En dessous de 760px la cloche remonte dans la barre superieure : voir la
     section [CSS-11] MOBILE, qui porte tout le reglage telephone. */
  .page{display:none}.page.active{display:block}
  .hidden{display:none!important}
  .list-head{display:grid;align-items:center;gap:12px;padding:2px 16px 9px 8px;border:1px solid transparent}
  .list-scroll{overflow-x:auto;overflow-y:visible}
  .list-scroll .list-head,.list-scroll .row,.list-scroll .group-head{min-width:var(--tblmin,760px)}
  /* Depuis la disparition du bouton d'ouverture, la colonne du nom est la
     premiere : c'est elle, et elle seule, qui reste figee au defilement. */
  .list-scroll .row>*:nth-child(1),.list-scroll .list-head>*:nth-child(1){position:sticky;left:0;z-index:4}
  /* Le masque des colonnes figees couvre ce qui defile dessous. Sur la 2e
     colonne il doit franchir la gouttiere de 12px ; sur la 1re, la ligne n'a
     que 8px de marge interne, un masque plus large mangeait sa bordure gauche
     sur toute la hauteur de la cellule. */
  .list-scroll .row>*:nth-child(1){background:var(--surface);box-shadow:-8px 0 0 0 var(--surface)}
  .list-scroll .list-head>*:nth-child(1){background:var(--bg);box-shadow:-8px 0 0 0 var(--bg)}
  .list-scroll.scrolled .row>*:nth-child(1){box-shadow:-8px 0 0 0 var(--surface),9px 0 10px -6px rgba(0,0,0,.13)}
  .list-scroll.scrolled .list-head>*:nth-child(1){box-shadow:-8px 0 0 0 var(--bg),9px 0 10px -6px rgba(0,0,0,.13)}
  .list-head span{font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #page-projects .list-head{grid-template-columns:1.5fr .7fr 1.05fr 1.3fr .8fr 1.6fr}
  #page-goals .list-head{grid-template-columns:1.7fr 1fr 1fr 1.4fr}
  #page-tasks .list-head{grid-template-columns:1.5fr .8fr 1.3fr 1fr 1.1fr .9fr .9fr}
  #page-logs .list-head{grid-template-columns:1.9fr .55fr .8fr .9fr .55fr .55fr}
  #page-missions .list-head{grid-template-columns:1.6fr 1.2fr .8fr 1fr .5fr}
  #page-clients .list-head{grid-template-columns:1.5fr .7fr 1.05fr .5fr 1fr}
  #page-users .list-head{grid-template-columns:1.5fr 1.6fr .8fr .7fr .85fr}
  .page-head{margin-bottom:22px}
  .page-title{font-size:30px;font-weight:700;letter-spacing:-.025em}
  .page-sub{font-size:14px;color:var(--muted);margin-top:5px}
  .toolbar{display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:13px 16px;margin-bottom:22px}
  .seg{display:inline-flex;background:#F0F0F2;border-radius:9px;padding:3px}
  .seg button{border:none;background:none;font:inherit;font-size:13px;font-weight:550;color:var(--muted);padding:6px 18px;border-radius:7px;cursor:pointer;transition:.15s;
    display:inline-flex;align-items:center;gap:7px}
  /* Pictogramme de projet : logo carre s'il existe, glyphe neutre sinon. */
  .pico{width:15px;height:15px;flex:0 0 15px;border-radius:4px;object-fit:cover;display:block}
  .cell.with-ico{display:flex;align-items:center;gap:7px}
  .cell.with-ico>span{overflow:hidden;text-overflow:ellipsis}
  .group-head .pico{margin-right:2px}
  .seg button.on{background:var(--surface);color:var(--accent);box-shadow:0 1px 2px rgba(0,0,0,.06)}
  .switch{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
  .track2{width:38px;height:22px;border-radius:11px;background:#D9D9DE;position:relative;transition:.18s;pointer-events:none}
  html.dark .track2{background:#3A3A40}
  .track2::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:.18s}
  .switch.on .track2{background:var(--accent)}
  .switch.on .track2::after{transform:translateX(16px)}
  .switch span{font-size:13px;font-weight:500;color:var(--ink);pointer-events:none}
  .spacer{flex:1}
  .btn-add{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff;border:none;font:inherit;font-size:13px;font-weight:600;padding:10px 16px;border-radius:10px;cursor:pointer;transition:filter .15s}
  .btn-add:hover{filter:brightness(1.08)}
  .btn-add svg{width:15px;height:15px;stroke:#fff;pointer-events:none}
  /* pills / dots */
  /* Texte centre dans toutes les pastilles. La largeur d'un <select> est celle
     de son option la plus longue, les valeurs courtes restaient donc collees a
     gauche. text-align ne suffit pas : Safari et Firefox ne l'appliquent pas a
     la ligne affichee d'un select, c'est text-align-last qui la gouverne. */
  .pill,.pill-sel{font:inherit;font-size:12px;font-weight:600;border-radius:999px;padding:5px 12px;
    letter-spacing:-.005em;white-space:nowrap;text-align:center;text-align-last:center}
  /* Ligne ouverte depuis une notification : liseré accentue pendant 5 s. La
     couleur suit --accent, donc bleu en clair et mauve en sombre. Trace par un
     pseudo-element au-dessus des colonnes figees, qui sinon le masqueraient. */
  .flash{position:relative}
  .flash::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
    border-radius:inherit;box-shadow:0 0 0 2px var(--accent) inset,0 0 16px 2px var(--accent-tint-2) inset;
    animation:flash-hold 5s ease-out forwards}
  /* Le liseré s'eteint progressivement sur la derniere seconde et demie : la
     classe tombe a 5 s, quand l'opacite est deja nulle, donc sans a-coup. En
     dessous reste l'etat "selectionne" de la ligne, qui ne bouge pas. */
  @keyframes flash-hold{0%{opacity:0}4%{opacity:1}70%{opacity:1}100%{opacity:0}}

  /* ═══════════ [CSS-04] PILLS, TAGS & CHIPS ═══════════ */
  .pill{display:inline-block}
  .pill-sel{border:none;cursor:pointer;appearance:none;-webkit-appearance:none;width:auto;max-width:100%;justify-self:start}
  /* La liste deroulante, elle, reste alignee a gauche : centrer un menu le
     rend illisible des que les libelles ont des longueurs differentes. */
  .pill-sel option{text-align:left;text-align-last:left}
  .pill-sel:focus{outline:none;box-shadow:0 0 0 2px var(--accent-tint)}
  .st-not_started,.gs-to_do{background:var(--grey-bg);color:var(--grey-tx)}
  .st-in_progress,.gs-in_focus{background:var(--blue-bg);color:var(--blue-tx)}
  .st-finished,.gs-done{background:var(--green-bg);color:var(--green-tx)}
  .gs-done_late{background:var(--yellow-bg);color:var(--yellow-tx)}
  .gs-failed{background:var(--red-bg);color:var(--red-tx)}
  .im-lowest{background:var(--red-bg);color:var(--red-tx)}
  .im-low{background:var(--yellow-bg);color:var(--yellow-tx)}
  .im-medium{background:var(--green-bg);color:var(--green-tx)}
  .im-high{background:var(--blue-bg);color:var(--blue-tx)}
  .im-highest{background:var(--purple-bg);color:var(--purple-tx)}
  .ur-low{background:var(--green-bg);color:var(--green-tx)}
  .ur-medium{background:var(--yellow-bg);color:var(--yellow-tx)}
  .ur-high{background:var(--red-bg);color:var(--red-tx)}
  .boxsel{border:none;background-color:var(--grey-bg);color:var(--ink);font-family:inherit;font-size:12px;font-weight:500;border-radius:8px;padding:5px 22px 5px 10px;width:100%;cursor:pointer;appearance:none;-webkit-appearance:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 7px center;transition:.12s}
  .boxsel:hover{background-color:#E6E7EA}
  html.dark .boxsel:hover{background-color:#303038}
  .boxsel:focus{outline:none;box-shadow:0 0 0 2px var(--accent-tint)}
  .boxsel:disabled{opacity:.55;cursor:default}
  .filt-sel{border:none;background-color:#F0F0F2;color:var(--ink);font-family:inherit;font-size:13px;font-weight:550;border-radius:9px;padding:9px 30px 9px 14px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 11px center;transition:.15s}
  .filt-sel:hover{background-color:#E7E7EA}
  .filt-sel:focus{outline:none;box-shadow:0 0 0 2px var(--accent-tint)}
  html.dark .filt-sel{background-color:#202026}
  html.dark .filt-sel:hover{background-color:#2A2A31}
  .t-name-cell{display:flex;align-items:center;gap:8px;min-width:0}
  .t-name-cell .edit{margin-left:0}
  .pcode-chip{display:inline-block;font-size:11px;font-weight:600;color:var(--muted);background:#F2F3F5;border-radius:6px;padding:3px 7px;letter-spacing:.03em;white-space:nowrap}
  .dots{display:inline-flex;gap:3px;align-items:center}
  .dots i{width:6px;height:6px;border-radius:50%;background:var(--faint)}
  .dots i.on{background:var(--ink)}
  /* groups + rows (shared base) */
  .group{margin-bottom:14px;position:relative}
  .group-head{display:flex;align-items:center;gap:9px;padding:6px 4px 10px}
  .group-name{font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
  .group-count{font-size:12px;font-weight:600;color:var(--faint)}
  /* ═══════════ [CSS-05] ROWS, CARDS & GALLERY ═══════════ */
  .row{display:grid;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:11px 16px 11px 8px;margin-bottom:8px;transition:box-shadow .15s,border-color .15s}
  .row:hover{box-shadow:0 2px 10px rgba(0,0,0,.05);border-color:#E0E0E3}
  /* ligne entiere cliquable ; les champs editables gardent leur curseur */
  .row[data-open]{cursor:pointer}
  .row[data-open] input,.row[data-open] select,.row[data-open] textarea{cursor:auto}
  .row.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-tint)}
  #page-projects .row{grid-template-columns:1.5fr .7fr 1.05fr 1.3fr .8fr 1.6fr}

  #page-goals .row{grid-template-columns:1.7fr 1fr 1fr 1.4fr}
  /* projects inline edit */
  .row>*,.list-head>*{min-width:0}
  .edit{border:none;background:transparent;font:inherit;color:inherit;padding:5px 7px;border-radius:7px;width:100%;overflow:hidden;text-overflow:ellipsis;transition:.12s}
  .edit:hover{background:#F4F4F5}
  .edit:focus{background:var(--surface);box-shadow:0 0 0 2px var(--accent-tint);outline:none}
  .edit.name{font-weight:600;letter-spacing:-.01em}
  .edit.code{font-weight:600;color:var(--muted);font-size:12px;letter-spacing:.03em;text-transform:uppercase}
  /* Nom et code ne sont plus editables en ligne : ils se modifient dans le
     panneau. En simple texte, toute leur surface sert a ouvrir la ligne. */
  .cell{display:block;min-width:0;padding:5px 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cell.name{font-weight:600;letter-spacing:-.01em}
  .cell.code{font-weight:600;color:var(--muted);font-size:12px;letter-spacing:.03em;text-transform:uppercase}
  .t-name-cell .cell.name{flex:1}
  .edit.desc{color:var(--muted);font-size:13px}
  .row .edit{margin-left:-7px}
  .insel{border:none;background:transparent;font:inherit;color:inherit;padding:5px 7px;border-radius:7px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;appearance:none;-webkit-appearance:none;transition:.12s}
  .insel:hover{background:#F4F4F5}
  .insel:focus{background:var(--surface);box-shadow:0 0 0 2px var(--accent-tint);outline:none}
  .insel:disabled{opacity:.5;cursor:default;background:transparent}
  html.dark .insel:hover{background:#202026}
  .row .insel{margin-left:-7px}
  /* goals list */
  .g-name{font-weight:600;letter-spacing:-.01em}
  .g-time{font-size:13px;color:var(--muted)}
  .g-time b{color:var(--ink);font-weight:600}
  /* projects gallery */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
  /* Le statut teinte tout le contour de la carte. La couleur vient des memes
     jetons que les pastilles de statut (.st-*), donc identique a l'affichage
     de la pastille, et elle suit le theme clair/sombre — un hex fige cote JS
     ne le faisait pas. */
  .card.cst-not_started{color:var(--grey-tx)}
  .card.cst-in_progress{color:var(--blue-tx)}
  .card.cst-finished{color:var(--green-tx)}
  .card{position:relative;color:var(--faint);background:var(--surface);
    border:1.5px solid currentColor;border-radius:var(--radius);padding:18px;cursor:pointer;
    overflow:hidden;transition:box-shadow .15s,transform .15s}
  .card>*{color:var(--ink)}
  .card .card-desc{color:var(--muted)}
  .card:hover{box-shadow:0 4px 16px rgba(0,0,0,.06);transform:translateY(-1px)}
  .card *{pointer-events:none}
  .card-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
  /* le nom prend la place restante : le code reste colle a droite meme avec un logo */
  .card-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:650;letter-spacing:-.015em}
  .card-pills{display:flex;gap:6px;margin:12px 0}
  .card-meta{display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--muted);margin-bottom:10px}
  .card-meta b{color:var(--ink);font-weight:650;font-size:13px}
  .card-desc{font-size:13px;color:var(--muted);line-height:1.45}
  /* timeline */
  .tl-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:auto;max-height:calc(100vh - 220px)}
  .tl{position:relative;width:max-content;min-width:100%}
  .tl-head{display:flex;position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
  .tl-corner{width:var(--labelw);flex:0 0 var(--labelw);position:sticky;left:0;z-index:6;background:var(--surface);border-right:1px solid var(--line);padding:10px 14px;font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center}
  .tl-months{display:flex}
  .month{width:var(--colw);flex:0 0 var(--colw);text-align:center;padding:10px 0;font-size:11px;font-weight:600;color:var(--muted);border-right:1px solid var(--line)}
  .month .yr{display:block;font-size:10px;color:var(--faint);font-weight:600}
  .tl-group{display:flex;align-items:center;background:#FAFAFB;border-bottom:1px solid var(--line)}
  .tl-group .lbl{width:var(--labelw);flex:0 0 var(--labelw);position:sticky;left:0;z-index:4;background:#FAFAFB;border-right:1px solid var(--line);padding:8px 14px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
  .tl-group .lbl .pcode-chip{margin-right:7px}
  .tl-group .fill{flex:1;height:30px}
  .tl-row{display:flex;align-items:stretch;border-bottom:1px solid var(--line);min-height:46px}
  .tl-row:hover .lbl{background:#FBFBFC}
  .tl-row .lbl{width:var(--labelw);flex:0 0 var(--labelw);position:sticky;left:0;z-index:3;background:var(--surface);border-right:1px solid var(--line);padding:8px 14px;display:flex;flex-direction:column;justify-content:center;gap:2px}
  .tl-row .lbl .nm{font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tl-row .lbl .dl{font-size:11px;color:var(--faint)}
  .track{position:relative;flex:0 0 auto;
    background-image:repeating-linear-gradient(to right,transparent 0,transparent calc(var(--colw) - 1px),var(--line) calc(var(--colw) - 1px),var(--line) var(--colw))}
  .bar{position:absolute;top:50%;transform:translateY(-50%);height:28px;border-radius:8px;display:flex;align-items:center;padding:0 10px;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;cursor:pointer;border:1px solid transparent;transition:filter .15s,box-shadow .15s}
  .bar:hover{filter:brightness(.97);box-shadow:0 2px 8px rgba(0,0,0,.12)}
  .bar.b-to_do{background:var(--grey-bg);color:var(--grey-tx);border-color:#E3E5E9}
  .bar.b-in_focus{background:var(--blue-bg);color:var(--blue-tx);border-color:#DAD6FF}
  .bar.b-done{background:var(--green-bg);color:var(--green-tx);border-color:#CFEBD9}
  .bar.b-done_late{background:var(--yellow-bg);color:var(--yellow-tx);border-color:#EFDDB0}
  .bar.b-failed{background:var(--red-bg);color:var(--red-tx);border-color:#F0CEC9}
  .today-line{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);z-index:4;pointer-events:none}
  .today-flag{position:absolute;top:0;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:0 0 7px 7px;z-index:6;pointer-events:none}
  /* tasks: tiles + board */
  /* ═══════════ [CSS-06] TILES, DASHBOARD & TODAY ═══════════ */
  .tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px}
  .tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
  .tile .tlabel{font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
  .tile .tval{font-size:25px;font-weight:720;letter-spacing:-.02em;margin-top:6px;line-height:1}
  .tile .tval.acc{color:var(--accent)}
  .board{display:flex;gap:14px;align-items:flex-start;overflow-x:auto;padding-bottom:8px}
  .col{flex:0 0 286px;background:#FAFAFB;border:1px solid var(--line);border-radius:var(--radius);padding:12px;display:flex;flex-direction:column;gap:9px;max-height:calc(100vh - 340px);overflow-y:auto}
  html.dark .col{background:#131318}
  .col-head{display:flex;align-items:center;gap:8px;padding:2px 4px 4px}
  .col-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
  .col-title{font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
  .col-count{font-size:12px;font-weight:600;color:var(--faint);margin-left:auto}
  .tcard{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 13px;cursor:pointer;transition:box-shadow .15s,transform .15s}
  .tcard:hover{box-shadow:0 3px 12px rgba(0,0,0,.07);transform:translateY(-1px)}
  .tcard *{pointer-events:none}
  .tcard .tt{font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin-bottom:10px}
  .tcard .tmeta{display:flex;align-items:center;gap:8px}
  .tcard .thours{font-size:12px;font-weight:600;color:var(--muted);margin-left:auto}
  .t-title{font-weight:600;letter-spacing:-.01em}
  #page-tasks .row{grid-template-columns:1.5fr .8fr 1.3fr 1fr 1.1fr .9fr .9fr}
  .ts-todo{background:var(--grey-bg);color:var(--grey-tx)}
  .ts-in_focus{background:var(--blue-bg);color:var(--blue-tx)}
  .ts-done{background:var(--green-bg);color:var(--green-tx)}
  .ts-permanent{background:var(--yellow-bg);color:var(--yellow-tx)}
  /* time logs */
  #lTiles{grid-template-columns:repeat(4,1fr)}
  #tTiles{grid-template-columns:repeat(4,1fr)}
  #todayTiles{grid-template-columns:repeat(3,1fr)}
  #dashTiles{grid-template-columns:repeat(4,1fr)}
  .dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .dash-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:19px 22px}
  /* Deux cartes qui se suivent ne doivent pas se toucher. */
  #page-today .dash-card+.dash-card{margin-top:26px}
  .dash-card.wide{grid-column:1 / -1}
  .dash-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .dash-h .t{font-size:15px;font-weight:650;letter-spacing:-.01em}
  .dash-h .lnk{font-size:12.5px;color:var(--accent);cursor:pointer;font-weight:600}
  .dsum{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
  .dsum-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
  .dsum-title{font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:14px}
  .dsum-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .dsum-metric{background:var(--bg);border-radius:12px;padding:14px 10px;text-align:center}
  .dsum-val{font-size:23px;font-weight:720;letter-spacing:-.02em}
  .dsum-cap{font-size:11px;font-weight:650;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
  .dsum-note{display:inline-block;font-size:11px;font-weight:650;padding:2px 9px;border-radius:999px;margin-top:8px}
  .q-good{background:var(--green-bg);color:var(--green-tx)}
  .q-avg{background:var(--yellow-bg);color:var(--yellow-tx)}
  .q-bad{background:var(--red-bg);color:var(--red-tx)}
  .q-none{background:var(--grey-bg);color:var(--faint)}
  .dchart-card{margin-bottom:16px}
  .dchart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
  .dchart-title{font-size:15px;font-weight:650;letter-spacing:-.01em}
  .dchart-ctrls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;margin:16px 0 2px}
  .dnav{display:inline-flex;align-items:center;gap:2px;background:#F0F0F2;border-radius:9px;padding:3px;font-size:13px;font-weight:550}
  html.dark .dnav{background:#202026}
  .dnav button{border:none;background:none;width:26px;height:26px;border-radius:7px;cursor:pointer;color:var(--ink);font-size:15px;line-height:1;display:grid;place-items:center;transition:.15s}
  .dnav button:hover{background:var(--surface)}
  .dnav span{min-width:64px;text-align:center;white-space:nowrap;padding:0 2px}
  .dlegend{display:flex;gap:18px;justify-content:center;margin-top:10px;font-size:12px;color:var(--muted)}
  .dlegend i,.pleg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:7px;vertical-align:middle}
  .dot-h{background:var(--chart-hours)}.dot-s{background:var(--chart-score)}
  /* Legende : deux series ne doivent jamais se distinguer par la seule couleur
     sans dire laquelle est laquelle. */
  .gbc-legend{display:flex;align-items:center;gap:16px;margin-bottom:8px;font-size:11px;
    font-weight:600;color:var(--muted)}
  .gleg{display:inline-flex;align-items:center;gap:6px}
  .gleg i{width:10px;height:10px;border-radius:3px;display:block;flex:0 0 10px}
  .gleg i.h{background:var(--chart-hours)}.gleg i.s{background:var(--chart-score)}
  .gleg.max{margin-left:auto;color:var(--faint);font-weight:500}
  .gbc{display:flex;align-items:flex-end;gap:8px;height:210px;padding-top:8px;
    border-bottom:1px solid var(--line)}
  .gbc-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;min-width:0}
  .gbc-bars{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:4px;width:100%}
  .gbc-bar{width:46%;max-width:24px;border-radius:4px 4px 0 0;min-height:2px;transition:height .2s}
  .gbc-bar.h{background:var(--chart-hours)}.gbc-bar.s{background:var(--chart-score)}
  .gbc-x{font-size:10px;color:var(--faint);margin-top:7px;white-space:nowrap;overflow:hidden;max-width:100%;text-overflow:ellipsis}
  .dpie-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .pie-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center;padding:8px 0}
  .pie{width:150px;height:150px;border-radius:50%;flex:0 0 150px}
  .pie-legend{display:flex;flex-direction:column;gap:9px;font-size:12.5px}
  .pleg i{border-radius:50%}
  .dtoggle{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:7px;cursor:pointer}
  .dtoggle input{accent-color:var(--accent)}
  @media (max-width:920px){.dpie-grid{grid-template-columns:1fr}}
  @media (max-width:640px){.dsum{grid-template-columns:1fr}.dchart-head{flex-wrap:wrap;gap:8px}.dchart-head .dchart-ctrls{margin:0}.dnav span{min-width:56px}}
  #todayTiles{grid-template-columns:repeat(4,1fr)}
  .today-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
  .today-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
  .today-actions .btn-ghost{display:inline-flex;align-items:center;gap:7px}
  .today-actions svg{width:15px;height:15px}
  /* align-items:start : chaque panneau s'arrete a la hauteur de son contenu.
     Etire sur la ligne, le panneau du retard affichait un grand vide en bas
     des qu'il avait moins de taches que la colonne d'a cote. */
  .tt-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
  .tt-panel{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:8px}
  /* Le retard ne se signale plus par un cadre autour du panneau (dont la taille
     ne disait rien) mais ligne par ligne : c'est la tache elle-meme qui porte
     le contour rouge et son halo. */
  .tt-overdue .tt-item{box-shadow:0 0 0 1.5px var(--red-solid),0 0 14px var(--red-glow);margin-bottom:11px}
  .tt-overdue .tt-item:last-child{margin-bottom:0}
  .tt-ghead{font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:9px 10px 7px;display:flex;gap:8px;align-items:center}
  .tt-ghead .c{background:var(--surface);border-radius:6px;padding:1px 7px;color:var(--muted);font-weight:650;font-size:10px}
  .tt-item{display:flex;gap:10px;align-items:stretch;background:var(--surface);border-radius:10px;padding:11px 12px;margin-bottom:7px}
  .tt-item[data-open]{cursor:pointer}
  .tt-item:last-child{margin-bottom:0}
  .tt-ctrls{display:flex;align-items:center;flex:0 0 auto}
  .tt-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
  .tt-l1{display:flex;align-items:center;gap:9px}
  .tt-l2{display:flex;align-items:center;gap:8px;margin-top:9px}
  .tt-check{width:26px;height:26px;border-radius:7px;border:1px solid var(--line);background:transparent;cursor:pointer;color:var(--muted);display:grid;place-items:center;padding:0;transition:.12s}
  .tt-check svg{width:13px;height:13px}
  .tt-check:hover{border-color:var(--green-solid);color:var(--green-solid);background:var(--green-bg)}
  .tt-flex{flex:1}
  .tt-title{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:14px;cursor:pointer}
  .tt-logbtn{flex:0 0 auto;border:none;background:var(--accent);color:#fff;font-weight:600;font-size:12px;padding:7px 13px;border-radius:8px;cursor:pointer;transition:.12s}
  .tt-logbtn:hover{opacity:.88}
  .cli-chip{font-size:10.5px;font-weight:650;padding:3px 8px;border-radius:6px;background:var(--accent-tint);color:var(--accent);white-space:nowrap;flex:0 0 auto}
  .tt-mission{font-size:12px;font-weight:500;color:var(--muted);background:var(--grey-bg);border-radius:7px;padding:3px 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
  .tt-date{font-size:12px;color:var(--muted);white-space:nowrap;flex:0 0 auto}
  .tt-l2 .pill{font-size:11px;padding:3px 9px}
  .tt-empty{padding:16px 10px;color:var(--faint);font-size:13px;text-align:center}
  .tt-log{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;margin-bottom:6px}
  .tt-log-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:550;font-size:13.5px}
  .tt-log-h{font-size:13px;color:var(--muted);white-space:nowrap}
  .tt-log-sc{font-size:14px;font-weight:700;color:var(--accent);white-space:nowrap;min-width:46px;text-align:right}
  @media (max-width:760px){.tt-grid{grid-template-columns:1fr}#todayTiles{grid-template-columns:repeat(2,1fr)}}
  .dash-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
  .dash-row:first-child{border-top:none}
  .dash-row .nm{flex:1;min-width:0;font-weight:550;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dash-row .meta{font-size:12.5px;color:var(--muted);white-space:nowrap}
  .prog{height:6px;border-radius:99px;background:var(--line);overflow:hidden;flex:0 0 90px}
  .prog>span{display:block;height:100%;background:var(--accent);border-radius:99px}
  .mini-empty{padding:14px 0;color:var(--faint);font-size:13px}
  .stackbar{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--line);margin-bottom:14px}
  .stack-legend{display:flex;flex-wrap:wrap;gap:14px}
  .stack-legend .lg{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);font-weight:500}
  .stack-legend .lg i{width:9px;height:9px;border-radius:3px;display:inline-block}
  .mini-log{border:1px solid var(--line);background:transparent;color:var(--accent);font-weight:600;font-size:12px;padding:4px 10px;border-radius:8px;cursor:pointer;flex:0 0 auto}
  .mini-log:hover{background:var(--accent-tint)}
  .today-hello{font-size:13px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
  .fc-low{background:var(--grey-bg);color:var(--grey-tx)}
  .fc-medium{background:var(--blue-bg);color:var(--blue-tx)}
  .fc-high{background:var(--green-bg);color:var(--green-tx)}
  .btag{display:inline-block;font-size:11px;font-weight:600;border-radius:999px;padding:4px 10px;background:var(--green-bg);color:var(--green-tx);white-space:nowrap}
  .btag.no{background:var(--grey-bg);color:var(--faint)}
  .l-score{font-weight:650;color:var(--accent)}
  #page-logs .row{grid-template-columns:1.9fr .55fr .8fr .9fr .55fr .55fr}
  .day-tot{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted)}
  .day-tot b{color:var(--ink)}
  .day-tot .s{color:var(--accent);margin-left:12px}
  .lchart{display:flex;gap:10px;align-items:flex-end;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px 22px 16px}
  .lcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}
  .lbar-wrap{height:200px;width:100%;display:flex;align-items:flex-end;justify-content:center}
  .lbar{width:58%;max-width:46px;background:var(--accent-tint-2);border:1px solid var(--accent);border-radius:8px 8px 4px 4px;position:relative;min-height:3px}
  .lbar.today{background:var(--accent)}
  .lbar-val{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:650;color:var(--ink);white-space:nowrap}
  .lcol-day{font-size:12px;font-weight:600;color:var(--muted)}
  .lcol-day.today{color:var(--accent)}
  .lcol-score{font-size:11px;font-weight:650;color:var(--accent)}
  /* users / access */
  .u-cell{display:flex;align-items:center;gap:9px;min-width:0}
  .avatar.sm{width:26px;height:26px;font-size:11px;flex:0 0 26px}
  .u-name{font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .u-email{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .u-access{font-size:13px;font-weight:600;color:var(--muted)}
  #page-users .row{grid-template-columns:1.5fr 1.6fr .8fr .7fr .85fr;cursor:pointer}
  .ur-owner{background:var(--blue-bg);color:var(--blue-tx)}
  .ur-admin{background:var(--green-bg);color:var(--green-tx)}
  .ur-member{background:var(--grey-bg);color:var(--grey-tx)}
  .ur-viewer{background:var(--yellow-bg);color:var(--yellow-tx)}
  .us-active{background:var(--green-bg);color:var(--green-tx)}
  .us-invited{background:var(--yellow-bg);color:var(--yellow-tx)}
  .acc-head{display:flex;align-items:center;justify-content:space-between;margin-top:24px;margin-bottom:9px}
  .acc-head .al{font-size:12px;font-weight:600;color:var(--muted)}
  .acc-actions{display:flex;gap:4px}
  .acc-actions button{font:inherit;font-size:12px;font-weight:600;color:var(--accent);background:none;border:none;cursor:pointer;padding:4px 8px;border-radius:6px}
  .acc-actions button:hover{background:var(--accent-tint)}
  .acc-list{border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .acc-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line)}
  .acc-item:last-child{border-bottom:none}
  .acc-item .an{font-size:14px;font-weight:550;flex:1}
  .fsub{color:var(--faint);font-weight:450;font-size:12px}
  .ms-to_charge{background:var(--grey-bg);color:var(--grey-tx)}
  .ms-partially_charged{background:var(--yellow-bg);color:var(--yellow-tx)}
  .ms-charged{background:var(--blue-bg);color:var(--blue-tx)}
  .ms-paid{background:var(--green-bg);color:var(--green-tx)}
  .bl-yes{background:var(--green-bg);color:var(--green-tx)}
  .bl-no{background:var(--grey-bg);color:var(--grey-tx)}
  .switch.sm .track2{width:34px;height:20px}
  .switch.sm .track2::after{width:16px;height:16px}
  .switch.sm.on .track2::after{transform:translateX(14px)}
  .client-chip{display:inline-block;font-size:11px;font-weight:600;color:var(--accent);background:var(--accent-tint);border-radius:6px;padding:3px 8px;letter-spacing:.01em;white-space:nowrap}
  #page-clients .row{grid-template-columns:1.5fr .7fr 1.05fr .5fr 1fr}
  #page-missions .row{grid-template-columns:1.6fr 1.2fr .8fr 1fr .5fr}
  .cell-c{font-size:13px;font-weight:600;color:var(--muted)}
  .money{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink)}
  .money.yet{color:var(--accent)}
  .money.paid{color:var(--green-tx)}
  .acc-item .edit{flex:1;min-width:0}
  .mtask{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
  .mdel{border:none;background:none;color:var(--faint);font-size:16px;line-height:1;cursor:pointer;width:24px;height:24px;border-radius:6px;flex:0 0 24px}
  .mdel:hover{background:var(--red-bg);color:var(--red-tx)}
  .mission-add{margin-top:9px;font:inherit;font-size:13px;font-weight:600;color:var(--accent);background:none;border:1px dashed var(--line);border-radius:10px;padding:9px;width:100%;cursor:pointer;transition:.15s}
  .mission-add:hover{background:var(--accent-tint);border-color:var(--accent)}
  .tlogs{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:9px}
  .tlog{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px}
  .tlog:last-child{border-bottom:none}
  .tlog .d{color:var(--muted);font-weight:600;white-space:nowrap;min-width:90px}
  .tlog .dur{font-weight:600;white-space:nowrap}
  .tlog .sc{margin-left:auto;font-weight:650;color:var(--accent)}
  .tlog .pill,.tlog .btag{font-size:11px;padding:3px 9px}
  /* placeholder page */
  .soon{display:flex;flex-direction:column;align-items:center;justify-content:center;height:60vh;color:var(--faint);text-align:center}
  .soon svg{width:46px;height:46px;stroke:var(--faint);fill:none;stroke-width:1.4;margin-bottom:14px}
  .soon h3{font-size:18px;font-weight:650;color:var(--muted)}
  .soon p{font-size:14px;margin-top:6px}
  /* detail panels */
  /* ═══════════ [CSS-07] DETAIL PANELS ═══════════ */
  .detail{position:fixed;top:0;right:0;height:100%;width:46%;max-width:600px;background:var(--surface);border-left:1px solid var(--line);transform:translateX(100%);transition:transform .24s ease;display:flex;flex-direction:column;z-index:40}
  .detail.open{transform:translateX(0);box-shadow:-14px 0 44px rgba(0,0,0,.10)}
  .detail-inner{width:100%;flex:1;min-height:0;padding:30px 32px;overflow-y:auto;opacity:0;transition:opacity .2s .08s}
  .detail-foot{border-top:1px solid var(--line);padding:15px 32px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);flex:0 0 auto}
  .foot-note{font-size:13px;font-weight:500;color:var(--muted)}
  .btn-add:disabled{opacity:.4;cursor:default;filter:none}
  .head-actions{display:flex;gap:8px;align-items:flex-start}
  .del-btn{border:none;background:#F2F3F5;width:32px;height:32px;border-radius:9px;cursor:pointer;color:var(--muted);display:grid;place-items:center;transition:.15s;flex:0 0 32px}
  .del-btn svg{width:16px;height:16px;pointer-events:none}
  .del-btn:hover{background:var(--red-bg);color:var(--red-tx)}
  .del-btn.armed{background:var(--red-tx);color:#fff}
  html.dark .del-btn{background:#26262D}
  .detail.open .detail-inner{opacity:1}
  .detail-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px}
  .detail-eyebrow{font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:8px;display:flex;gap:8px;align-items:center}
  .detail-title{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
  .x{border:none;background:#F2F3F5;width:32px;height:32px;border-radius:9px;cursor:pointer;color:var(--muted);font-size:17px;display:grid;place-items:center;transition:.15s;flex:0 0 32px}
  /* Retirer un equipier : meme bouton, format de ligne de liste. */
  .x.sm{width:24px;height:24px;flex:0 0 24px;font-size:14px;border-radius:7px}
  .team-add{display:flex;align-items:center;gap:8px;margin-top:9px}
  .team-add select{flex:1;min-width:0;font:inherit;font-size:13px;padding:8px 10px;
    border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink)}
  .x:hover{background:#E8E8EA;color:var(--ink)}
  .d-field{margin-top:18px}
  .d-field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:7px}
  .d-field input,.d-field select,.d-field textarea{width:100%;font:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px 13px;transition:.15s}
  .d-field input:focus,.d-field select:focus,.d-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
  .d-field textarea{resize:vertical;min-height:84px;line-height:1.5}
  .d-row{display:flex;gap:14px}.d-row .d-field{flex:1}
  .factor-box{display:flex;align-items:center;justify-content:space-between;background:var(--accent-tint);border-radius:12px;padding:14px 16px;margin-top:18px}
  .factor-box .fl{font-size:13px;font-weight:600;color:var(--accent)}
  .factor-box .fv{font-size:24px;font-weight:720;color:var(--accent);letter-spacing:-.02em}
  /* modals */
  /* ═══════════ [CSS-08] MODALS & MISC ═══════════ */
  .overlay{position:fixed;inset:0;background:rgba(20,20,26,.32);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:50;padding:24px}
  .overlay.show{display:flex}
  /* max-height + scroll interne : une modale trop haute ne sort plus de l'ecran,
     les bords arrondis restent visibles en haut comme en bas. */
  .modal{background:var(--surface);width:460px;max-width:100%;max-height:100%;overflow:auto;border-radius:18px;padding:26px;box-shadow:0 24px 60px rgba(0,0,0,.22);animation:pop .18s ease}
  /* Modale large a deux colonnes (invite user) : moins haute, plus lisible. */
  .modal-wide{width:780px}
  .modal-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;align-items:start}
  .modal-cols .acc-list{max-height:250px;overflow-y:auto}
  @media (max-width:760px){
    .modal-wide{width:460px}
    .modal-cols{grid-template-columns:1fr}
    .modal-wide .row2{flex-wrap:wrap}
    .modal-wide .row2 .field{flex:1 1 100%!important}
  }
  @keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
  .modal h2{font-size:19px;font-weight:680;letter-spacing:-.02em;margin-bottom:3px}
  .modal p.sub{font-size:13px;color:var(--muted);margin-bottom:20px}
  .field{margin-bottom:14px}
  .field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px}
  .field input,.field select,.field textarea{width:100%;font:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;transition:border .15s}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
  .field textarea{resize:vertical;min-height:60px}
  .row2{display:flex;gap:12px}.row2 .field{flex:1}
  .modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
  .btn-ghost{background:none;border:1px solid var(--line);font:inherit;font-size:13px;font-weight:550;color:var(--ink);padding:10px 16px;border-radius:10px;cursor:pointer}
  .btn-ghost svg{width:15px;height:15px;stroke:currentColor;pointer-events:none}
  .btn-grey{display:inline-flex;align-items:center;gap:7px;background:var(--grey-bg);color:var(--ink);border:none;font:inherit;font-size:13px;font-weight:600;padding:10px 16px;border-radius:10px;cursor:pointer;transition:.15s}
  .btn-grey svg{width:15px;height:15px;stroke:currentColor;pointer-events:none}
  .btn-grey:hover{filter:brightness(.96)}
  html.dark .btn-grey:hover{filter:brightness(1.2)}
  .recur-list{display:flex;flex-direction:column;gap:7px;margin:8px 0 4px;max-height:360px;overflow:auto}
  .recur-row{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--bg);border:1px solid var(--line);border-radius:10px}
  .recur-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:13.5px}
  .recur-freq{font-size:11px;font-weight:650;padding:3px 10px;border-radius:999px;background:var(--accent-tint);color:var(--accent);white-space:nowrap;flex:0 0 auto}
  .btn-ghost:hover{background:#F4F4F5}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

  /* ═══════════ [CSS-09] HUB (index.html) ═══════════ */
  .hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
  .hub-card{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;text-decoration:none;color:var(--ink);transition:box-shadow .15s,transform .15s}
  .hub-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.07);transform:translateY(-2px)}
  .hub-card b{font-size:15px;font-weight:650}
  .hub-card span{font-size:12.5px;color:var(--muted)}

/* ══════════ Flask app — additions ══════════ */
.side-foot .user{display:flex;align-items:center;gap:8px}
.side-foot .user .user-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-foot .user .user-link{flex:1;min-width:0}
.side-foot .logout{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;
  color:var(--faint);flex:0 0 auto;transition:.15s}
.side-foot .logout:hover{background:var(--accent-tint);color:var(--ink)}
.side-foot .logout svg{width:15px;height:15px}

/* Lecture seule (role viewer) — on neutralise l'edition, pas la consultation :
   les filtres de la barre d'outils et les selecteurs de periode restent actifs. */
body.readonly .btn-add,body.readonly .btn-grey,body.readonly .del-btn,
body.readonly .mdel,body.readonly .tt-check,body.readonly .tt-logbtn,
body.readonly .mission-add,body.readonly .detail-foot{display:none!important}
body.readonly .edit,body.readonly .pill-sel,body.readonly .boxsel,
body.readonly .detail input,body.readonly .detail select,body.readonly .detail textarea,
body.readonly .detail .switch,body.readonly .overlay{pointer-events:none;opacity:.85}
body.readonly .toolbar .switch,body.readonly .toolbar .seg,
body.readonly .dchart-ctrls,body.readonly .filt-sel{pointer-events:auto;opacity:1}

/* Actions d'agence indisponibles (pas d'administration de projet) */
body.no-agency-admin [data-action="c-add-mission"],
body.no-agency-admin .mdel{display:none!important}
.lock-note{background:var(--yellow-bg);color:var(--yellow-tx);border-radius:9px;
  padding:9px 11px;font-size:12px;line-height:1.45;margin-bottom:14px}
.detail.locked .switch{pointer-events:none;opacity:.55}
.detail.locked .del-btn{display:none}

/* ── Drag & drop ─────────────────────────────────────────────────────────
   Cartes Kanban, lignes de liste, barres de timeline. */
.tcard[draggable="true"]{cursor:grab}
.tcard.dragging{opacity:.45;cursor:grabbing}
.row[data-dnd]{cursor:grab}
.row[data-dnd] input,.row[data-dnd] select,.row[data-dnd] button{cursor:auto}
.row.dragging{opacity:.45}
.col.dnd-over{background:var(--accent-tint);outline:2px dashed var(--accent);outline-offset:-2px}
/* Le cadre de depot est un pseudo-element pose A L'INTERIEUR du bloc : un
   outline, trace hors de la boite, etait rogne a gauche par le conteneur qui
   defile horizontalement. Son z-index passe devant les colonnes figees (4),
   sinon leur aplat de fond le recouvrirait sur la meme largeur. */
.group.dnd-over::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  border:2px dashed var(--accent);border-radius:var(--radius)}
.col-empty{padding:14px 8px;text-align:center;font-size:12px;color:var(--faint);
  border:1px dashed var(--line);border-radius:10px}
/* Un groupe vide ne s'affiche que pendant un glisser : il devient une cible. */
.group.empty{display:none}
body.dnd-active .group.empty{display:block}
.group-drop{padding:14px 16px;font-size:12px;color:var(--faint);
  border:1px dashed var(--line);border-radius:var(--radius);background:var(--surface)}
/* Barres de timeline : deplacement au centre, poignees sur les bords. */
.bar[data-tlbar]{cursor:grab;touch-action:none}
.bar[data-tlbar].dragging{cursor:grabbing;box-shadow:0 4px 14px rgba(0,0,0,.22);opacity:.9}
.bar .tl-lab{pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-grip{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize;opacity:0;transition:opacity .12s}
.tl-grip.s{left:0}
.tl-grip.e{right:0}
.bar:hover .tl-grip{opacity:1;background:rgba(0,0,0,.14)}
@media (prefers-reduced-motion:reduce){.tl-grip{transition:none}}

/* Toasts */
.toast-box{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:200}
.toast{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;font-size:13px;box-shadow:0 12px 30px rgba(0,0,0,.16);max-width:340px;
  animation:toast-in .2s ease-out}
.toast.err{border-color:var(--red-solid);color:var(--red-tx);background:var(--red-bg)}
.toast.out{opacity:0;transform:translateY(6px);transition:.4s}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Login (magic link) */
/* `flex:1` : body est un conteneur flex (sidebar + main), donc cet enfant se
   reduisait a la largeur de sa carte. Invisible tant que le fond etait uni,
   la photo l'a revele. `overflow:auto` parce que body est en overflow:hidden :
   sans lui, un ecran plus court que la carte la tronque sans defilement. */
.auth-wrap{flex:1;min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;background:var(--bg);overflow:auto}
.auth-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:28px;box-shadow:0 18px 50px rgba(0,0,0,.10)}

/* Photo de fond des seuls ecrans de connexion (login, code, lien envoye).
   `error.html` partage .auth-wrap et reste volontairement sobre : une 500 n'a
   pas a s'habiller. La couleur de fond est conservee sous l'image — elle sert
   de repli si le fichier manque, et evite un flash blanc avant son chargement.
   Le voile assombrit une photo tres claire, sans quoi la carte blanche s'y
   fondrait : c'est lui qui detache le panneau, avec l'ombre portee ci-dessous. */
.auth-bg{
  background-image:linear-gradient(rgba(15,23,42,.10), rgba(15,23,42,.17)), url(login-bg.jpg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.auth-bg .auth-card{box-shadow:0 24px 60px rgba(15,23,42,.20), 0 2px 10px rgba(15,23,42,.07)}
/* En sombre, la meme photo passe au second plan : le voile la retient loin
   derriere la carte, dont le contraste ne doit rien a l'image. */
.dark .auth-bg{
  background-image:linear-gradient(rgba(2,6,23,.82), rgba(2,6,23,.88)), url(login-bg.jpg);
}
.dark .auth-bg .auth-card{box-shadow:0 24px 60px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.35)}
.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.auth-brand .brand-dot{width:28px;height:28px;border-radius:9px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.auth-card h1{font-size:20px;font-weight:680;margin:0 0 6px}
.auth-card p{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 18px}
.auth-card label{display:block;font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
/* Tous les champs, pas seulement l'adresse : le code de connexion est un
   input[type=text] et heritait sinon du style natif du navigateur. */
.auth-card input[type=email],.auth-card input[type=text]{width:100%;padding:10px 12px;
  border:1px solid var(--line);border-radius:9px;
  background:var(--bg);color:var(--ink);font-size:14px;margin-bottom:14px}
/* Le code se lit chiffre par chiffre : chasse fixe et lettres espacees. */
.auth-card input#code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.28em;font-size:16px}
/* Le formulaire de secours se deplie sous le bouton principal : un filet le
   detache, sans quoi son champ se lit comme la suite du formulaire du dessus. */
#codebox{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
#codebox button{background:transparent;color:var(--ink);border:1px solid var(--line)}
#codebox button:hover{background:var(--accent-tint)}
.auth-card button{width:100%;padding:11px;border:0;border-radius:9px;background:var(--accent);color:#fff;
  font-size:14px;font-weight:620;cursor:pointer}
.auth-err{background:var(--red-bg);color:var(--red-tx);border-radius:9px;padding:9px 12px;font-size:13px;margin-bottom:14px}
.auth-demo{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.auth-demo .h{font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.auth-demo button{background:transparent;color:var(--ink);border:1px solid var(--line);text-align:left;
  padding:8px 11px;margin-bottom:6px;font-weight:500;font-size:13px;display:flex;justify-content:space-between;gap:10px}
.auth-demo button:hover{background:var(--accent-tint)}
.auth-demo .role{color:var(--faint);font-size:12px}
.auth-link{word-break:break-all;background:var(--bg);border:1px dashed var(--line);border-radius:9px;
  padding:11px;font-size:12px;margin-bottom:16px;display:block;color:var(--accent)}

  /* ═══════════ [CSS-10] DURATION RULER ═══════════ */
  /* Reglette horizontale facon balance connectee : la valeur reste au centre,
     les traits forment une bosse vers le haut a l'approche du centre et
     s'effacent sur les bords. */
  .rul{--pitch:13px;--fade:14%;user-select:none;-webkit-user-select:none}
  .rul-read{display:flex;justify-content:center;margin-bottom:2px}
  .rul .rul-big{width:132px;font:inherit;font-size:27px;font-weight:700;letter-spacing:-.03em;
    text-align:center;color:var(--ink);background:none;border:1px solid transparent;
    border-radius:10px;padding:2px 0;cursor:text;transition:.15s}
  .rul .rul-big:hover{border-color:var(--line)}
  .rul .rul-big:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
  .rul-wrap{position:relative;height:82px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}
  /* halo doux sous la bosse */
  .rul-wrap::before{content:'';position:absolute;left:50%;top:6px;width:54px;height:58px;
    transform:translateX(-50%);border-radius:14px;pointer-events:none;
    background:radial-gradient(56% 56% at 50% 62%,var(--accent-tint),transparent 72%)}
  .rul-scroll{position:relative;height:100%;padding:6px 0 20px;display:flex;align-items:flex-end;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
    cursor:grab;touch-action:pan-x;overscroll-behavior-x:contain;outline:none}
  .rul-scroll::-webkit-scrollbar{display:none}
  .rul.drag .rul-scroll{cursor:grabbing}
  .rul-pad{flex:0 0 auto;height:1px}
  /* traits ancres sur la ligne de base : ils poussent vers le haut */
  .rul-tk{--k:0;position:relative;flex:0 0 var(--pitch);height:56px;display:flex;justify-content:center;align-items:flex-end}
  .rul-tk::before{content:'';width:2px;border-radius:2px;background:var(--faint);
    height:calc(15px + var(--k) * 19px);opacity:calc(.3 + var(--k) * .45);transition:background .15s}
  .rul-tk.maj::before{height:calc(23px + var(--k) * 23px);opacity:calc(.45 + var(--k) * .45)}
  .rul-tk.on::before{background:var(--accent);opacity:1}
  .rul-tk .lb{position:absolute;top:calc(100% + 4px);font-size:11px;font-weight:600;color:var(--muted);
    white-space:nowrap;opacity:calc(.3 + var(--k) * .7);transition:color .15s}
  .rul-tk.on .lb{color:var(--accent)}
  .rul-scroll:focus-visible{box-shadow:0 0 0 3px var(--accent-tint);border-radius:12px}
  .rul-input{display:none}
  /* la reglette prend toute la largeur de la carte (on annule son padding) */
  .modal .rul-wrap{margin-inline:-26px;width:calc(100% + 52px)}
  .detail-inner .rul-wrap{margin-inline:-32px;width:calc(100% + 64px)}

  /* ═══════════ [CSS-11] MOBILE ═══════════ */
  /* Barre superieure et voile du tiroir : ils n'existent qu'en petite largeur,
     le reste du temps c'est la sidebar qui porte la marque et la navigation. */
  .mtop,.scrim{display:none}

  @media (max-width:760px){
    /* C'est de nouveau le document qui defile. Sur telephone, un panneau
       interne en overflow empeche la barre d'adresse du navigateur de se
       replier et vole une quarantaine de pixels de hauteur utile. */
    html,body{height:auto;min-height:100%}
    body{display:block;overflow:visible;overflow-x:hidden}

    /* ── Barre superieure ────────────────────────────────────────────────
       Fixee : le burger et le titre de page restent atteignables au pouce
       quelle que soit la position dans la liste. */
    .mtop{display:flex;position:fixed;top:0;left:0;right:0;z-index:36;height:54px;
      align-items:center;gap:11px;padding:0 13px;border-bottom:1px solid var(--line);
      background:rgba(255,255,255,.88);backdrop-filter:blur(18px) saturate(140%);
      -webkit-backdrop-filter:blur(18px) saturate(140%)}
    html.dark .mtop{background:rgba(22,22,27,.88)}
    .mtop-burger{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;cursor:pointer;
      border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink)}
    .mtop-burger svg{width:19px;height:19px;pointer-events:none}
    .mtop-brand{display:flex;align-items:center;gap:9px;min-width:0}
    .mtop-page{font-size:16px;font-weight:680;letter-spacing:-.02em;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

    /* ── Sidebar en tiroir ─────────────────────────────────────────────── */
    .sidebar{position:fixed;top:0;left:0;bottom:0;z-index:45;width:272px;max-width:86vw;flex:none;height:100%;
      background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;border-right:none;
      transform:translateX(-100%);transition:transform .22s ease}
    html.dark .sidebar{background:var(--surface)}
    body.nav-open .sidebar{transform:none;box-shadow:0 0 44px rgba(0,0,0,.34)}
    /* Le fond ne defile pas sous le tiroir ouvert. */
    body.nav-open{overflow:hidden}
    .scrim{display:block;position:fixed;inset:0;z-index:44;background:rgba(18,18,24,.45);
      opacity:0;pointer-events:none;transition:opacity .2s}
    body.nav-open .scrim{opacity:1;pointer-events:auto}
    /* Cibles tactiles : 44px de haut minimum dans le tiroir. */
    .nav-item{padding:12px 11px;font-size:15px}
    .sidebar .brand{padding-bottom:16px}

    /* ── Contenu ───────────────────────────────────────────────────────── */
    .main{height:auto;overflow:visible;padding:68px 14px 36px}
    /* Sur Today, les deux actions sont fixees en bas : on leur reserve leur
       hauteur pour que la derniere ligne de la liste reste lisible. */
    body[data-page="today"] .main{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
    .page-title{font-size:24px}
    .page-sub{font-size:13px}
    .page-head{margin-bottom:16px}
    .dash-card{padding:14px 13px;border-radius:14px}
    #page-today .dash-card+.dash-card{margin-top:16px}
    .toolbar{flex-wrap:wrap;gap:10px 12px;padding:11px 13px;margin-bottom:16px}
    .seg button{padding:6px 12px}
    .tiles{gap:10px;margin-bottom:16px}
    .tile{padding:12px 13px}
    .tile .tval{font-size:22px}

    /* La cloche rejoint la barre superieure : en bas a droite elle recouvrait
       la barre d'action de Today. */
    .notif{top:8px;right:13px;bottom:auto;z-index:37}
    .notif-btn{width:38px;height:38px;border-radius:11px}
    .notif-pop{top:46px;bottom:auto;right:0;width:min(370px,calc(100vw - 26px))}

    /* ── Today : l'essentiel seulement ──────────────────────────────────
       .m-hide marque ce qui ne sert pas sur telephone (tuiles secondaires,
       groupes Tomorrow / Later, carte Timelogs) : on garde les heures du
       jour, le retard, et ce qu'il reste a faire aujourd'hui. */
    .m-hide{display:none!important}
    /* .m-cut coupe une liste a partir d'un en-tete : lui et tout ce qui le
       suit disparaissent (groupes Tomorrow puis Later de "My tasks"). */
    .m-cut,.m-cut~*{display:none!important}
    .today-top{display:block;margin-bottom:16px}
    #todayTiles{grid-template-columns:repeat(2,1fr)}
    /* Sur telephone les panneaux perdent leur cadre : les lignes se suivent a
       pleine largeur. Le contour rouge par tache (voir CSS-07) suffit a marquer
       le retard, il n'y a rien a surcharger ici. */
    .tt-panel{padding:6px;background:transparent;border:none}
    .tt-ghead{padding:6px 2px 6px}
    .tt-item{padding:11px;gap:9px}
    .tt-check{width:32px;height:32px}
    .tt-l1{flex-wrap:wrap;gap:8px}
    /* Titre sur toute la largeur, non tronque : sur 360px de large, une
       ellipse apres trois mots ne dit plus quelle tache c'est. */
    .tt-title{flex:1 1 100%;white-space:normal;line-height:1.35}
    .tt-l1 .tt-flex,.tt-l2 .tt-flex{display:none}
    .tt-logbtn{margin-left:auto;padding:9px 15px}
    .tt-l2{flex-wrap:wrap;gap:6px;margin-top:9px}
    .tt-mission{max-width:100%}

    /* ── Les deux actions, fixees en bas ──────────────────────────────────
       Le bandeau descend 64px SOUS le bord de l'ecran (bottom negatif, compense
       par autant de padding-bas) : les boutons ne bougent pas d'un pixel, mais
       la bande que le navigateur decouvre en repliant sa barre d'adresse
       pendant le scroll reste couverte au lieu de laisser voir la page. */
    .today-actions{position:fixed;left:0;right:0;bottom:-64px;z-index:36;gap:9px;flex-wrap:nowrap;
      padding:10px 13px calc(74px + env(safe-area-inset-bottom));border-top:1px solid var(--line);
      background:rgba(255,255,255,.92);backdrop-filter:blur(18px) saturate(140%);
      -webkit-backdrop-filter:blur(18px) saturate(140%)}
    html.dark .today-actions{background:rgba(22,22,27,.92)}
    .today-actions>button{flex:1 1 0;min-width:0;min-height:48px;justify-content:center;font-size:14px}
    .today-actions .btn-ghost{background:var(--surface)}

    /* ── Panneaux et modales en plein ecran ─────────────────────────────── */
    .detail{width:100%;max-width:none;border-left:none}
    .detail-inner{padding:22px 17px}
    .detail-foot{padding:13px 17px}
    .detail-inner .rul-wrap{margin-inline:-17px;width:calc(100% + 34px)}
    .detail-title{font-size:20px}
    .d-row{flex-wrap:wrap;gap:0}
    .d-row .d-field{flex:1 1 100%}
    .overlay{padding:14px}
    .modal,.modal-wide{width:100%;padding:20px;border-radius:16px}
    .modal .rul-wrap{margin-inline:-20px;width:calc(100% + 40px)}
    .row2{flex-wrap:wrap;gap:0}
    .row2 .field{flex:1 1 100%}
    .modal-foot{gap:9px}
    .modal-foot button{flex:1;justify-content:center;min-height:44px}
    /* Sous iOS, un champ dont la police descend sous 16px declenche un zoom
       automatique a la mise au point, dont on ne revient jamais tout seul. */
    .field input,.field select,.field textarea,
    .d-field input,.d-field select,.d-field textarea{font-size:16px}
    .toast-box{left:13px;right:13px;bottom:calc(12px + env(safe-area-inset-bottom))}
    .toast{max-width:none}
  }