:root{
  --paper:#F7F3EA;
  --paper-2:#F1ECDF;
  --card:#F4F1E7;              /* DS : surface des cartes (bascule de cohabitation faite) */
  --card-done:#ECE7DA;
  --ink:#1A3A35;               /* DS : titre fort sur clair (bascule faite) */
  --muted:#777364;
  --line:#E6E0D0;
  --accent:var(--brand);
  --accent-soft:#DCE9E4;
  --doing:#E2A63D;
  --late:var(--urgence);
  --late-soft:var(--urgence-surface);
  --warn:#A8631F;
  --radius:14px;
  --shadow:0 1px 2px rgba(35,37,43,.05), 0 4px 14px rgba(35,37,43,.05);

  /* ===== Design system (refonte) — posés ici, consommés au fil de la migration.
     COHABITATION : --card / --paper / --ink / --accent gardent VOLONTAIREMENT
     leur valeur héritée ci-dessus tant que les composants qui les lisent n'ont
     pas été migrés. Ils basculeront vers leur valeur DS (--card:#F4F1E7,
     --paper:var(--card), --ink:#1A3A35, --accent:var(--brand)) à l'étape qui
     migre leurs consommateurs. --radius et --shadow (DS = aucune ombre) restent
     hérités pour la même raison. ===== */
  /* surfaces */
  --green-deep:#173C33;              /* overlays, pile, cartes profondes */
  --green-rail:#1E463D;              /* rail + bandeau */
  --rail:var(--green-rail); --band:var(--green-rail);
  --desk:#ECE7DB;                    /* fond des écrans de lecture */
  --band-top:#EDE7DB;                /* bandeau de titre */
  --card-hi:#FBF9F1;                 /* lumière de la clairière */
  --inset:#EBE6D9;                   /* chips, pomodoro */
  --inset-green:#EAF1EC;             /* inserts en lecture */
  --zone:#D7E3DC;                    /* zones Aujourd'hui (col.1 + col.3) */
  --zone-2:#C7D6CE;                  /* retard, boutons, sélection */
  --grid-empty:#CBDAD2;              /* cases vides, heatmap min */
  /* rampe d'assiduité (5 crans, calendrier des habitudes) — dessinée, pas
     dérivée : le cran 1 vaut « rien fait », le cran 5 « tout tenu ». */
  --heat-1:#CBDAD2; --heat-2:#8FB3AB; --heat-3:#5FA493; --heat-4:#3E8E86; --heat-5:#2F6B5E;
  /* marque + texte */
  --brand:#2F6B5E; --brand-hover:#24544A;
  --mint:#5FC8B8;                    /* accompli-du-jour, highlight (identique clair/sombre) */
  --text-strong:#22322D; --text:#4A4A3E; --text-muted:#5F7A70;
  --text-muted-warm:#6A6558;         /* surfaces de lecture */
  /* cote d'archive : à 10px c'est du TEXTE, donc AA 4,5:1. L'ancienne valeur
     (#7F958D) tombait à 2,82:1 sur --card ; celle-ci tient ≥ 4,91:1 sur les SEPT
     fonds où la cote se pose (card, card-hi, inset, zone, zone-2, grid-empty,
     desk) — --zone-2 (bloc retard, ligne active) est le plus exigeant. */
  --cote:#455A52;
  /* texte sur le plan vert profond (overlays) — identique dans les deux thèmes */
  --on-deep:#EAF3EE; --on-deep-muted:#9FBEB3; --on-deep-dim:#6F9184; --on-deep-accent:#7FC9B4;
  --on-deep-icon:#9FDCC9;
  /* signaux */
  --urgence:#C0392B; --urgence-text:#9E3320;
  /* urgence LISIBLE sur les plans verts profonds (mêmes deux thèmes) */
  --urgence-on-deep:#E8836A;
  --urgence-surface:#E7DAD3; --success-surface:#C3DBD0;
  /* projets 01..14 — sert aussi aux habitudes et aux challenges */
  --p01:#3E7CA6;--p02:#4C8A5A;--p03:#3E8E86;--p04:#A6812F;--p05:#566B8C;
  --p06:#6E8A4E;--p07:#8A5A6A;--p08:#4E8FA0;--p09:#9E6B3C;--p10:#7A9A7E;
  --p11:#6A7B9C;--p12:#5B7C52;--p13:#B08A3E;--p14:#7E6A9B;
  /* encre posée SUR une couleur d'entité (pastille, puce, chip plein). La gamme
     claire est sombre → encre blanche ; la gamme sombre est claire (L .70) →
     encre profonde. Du blanc en thème sombre tomberait à 1,87:1. */
  --on-tint:#FFFFFF;
  /* proportion d'ASSISE d'une couleur d'entité sous une encre blanche (voir le
     skill §2) : la gamme sombre étant plus claire, elle s'assied davantage. */
  --seat:64%;
  /* encre posée SUR LA MARQUE (--brand : bouton, segment allumé, pastille de
     verdict). Distincte de --on-tint : --brand reste un vert moyen dans les DEUX
     thèmes, une encre profonde y tomberait à 3,98:1. Le blanc y tient 6,2:1 en
     clair et 4,54:1 en sombre — d'où une valeur unique, comme --mint. */
  --on-brand:#FFFFFF;
  /* type */
  --font-h:'Bricolage Grotesque'; --font-body:'Spline Sans';
  --font-mono:'IBM Plex Mono'; --font-read:'Spectral';
  --fs-display:46px; --fs-title:30px; --fs-heading:22px; --fs-subhead:18px;
  --fs-body-lg:15px; --fs-body:13px; --fs-caption:11px; --fs-micro:9.5px;
  /* espace, rayon, mouvement */
  --sp-2:2px;--sp-4:4px;--sp-8:8px;--sp-12:12px;--sp-16:16px;--sp-24:24px;--sp-32:32px;--sp-44:44px;
  --r-6:6px;--r-9:9px;--r-12:12px;--r-pill:999px;
  --t-fast:140ms; --t-panel:220ms; --t-slow:300ms;
  --ease:cubic-bezier(.2,0,0,1);
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{height:100%}
body{
  --side-w:360px;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body),system-ui,sans-serif;
  font-size:15.5px;
  line-height:1.5;
  min-height:100%;
}
body.side-collapsed{--side-w:66px}   /* rail : 66px (maquette) */
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

/* ============ sidebar ============ */
aside.side{
  width:var(--side-w);position:fixed;top:0;left:0;bottom:0;z-index:20;
  border-right:1px solid var(--line);background:var(--paper-2);
  display:flex;flex-direction:column;padding:22px 16px 16px;gap:4px;
  overflow:hidden;transition:width .22s cubic-bezier(.22,1,.36,1); /* impeccable-disable-line layout-transition -- repli du volet latéral : motion d'état volontaire, déclenchée par l'utilisateur */
}
/* seule la liste des projets défile ; en-tête et pied restent fixes */
aside.side>.brand,aside.side>.searchbox,aside.side>#nav-views,aside.side>.navsec-inbox,aside.side>.sidefoot{flex:0 0 auto}
.navsec-proj{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.navsec-proj>.plab.prow{flex:0 0 auto}
#nav-projects{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}
.brand{display:flex;align-items:center;gap:10px;padding:0 4px 4px}
.brand .btxt{min-width:0}
.railtoggle{
  margin-left:auto;flex:0 0 auto;width:32px;height:32px;border-radius:8px;color:var(--muted);
  display:flex;align-items:center;justify-content:center;
}
.railtoggle:hover{background:rgba(47,107,94,.1);color:var(--ink)}
.railtoggle svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ---- volet réduit : rail d'icônes 64px ---- */
body.side-collapsed aside.side{padding:18px 10px 12px;gap:2px;align-items:center}
body.side-collapsed aside.side .brand{flex-direction:column;gap:8px;padding:0;align-items:center}
body.side-collapsed .brand .btxt{display:none}
body.side-collapsed .railtoggle{display:none}
body.side-collapsed .brand{cursor:pointer}
body.side-collapsed .brand svg{transition:transform .15s}
body.side-collapsed .brand:hover svg{transform:scale(1.08)}
/* loupe visible seulement en mode rail */
.railsearch{display:none}
body.side-collapsed .railsearch{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  margin:4px 0 2px;border-radius:11px;color:var(--muted);flex:0 0 auto}
body.side-collapsed .railsearch:hover{background:rgba(47,107,94,.1);color:var(--ink)}
.railsearch svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
body.side-collapsed .navsec{margin-top:8px;width:100%;display:flex;flex-direction:column;align-items:center;gap:2px}
body.side-collapsed .navlab{display:none}
body.side-collapsed .navbtn{width:44px;height:44px;padding:0;justify-content:center;gap:0}
body.side-collapsed .navbtn .ntxt,
body.side-collapsed .navbtn .cnt{display:none}
body.side-collapsed .navbtn .nvico{margin:0}
/* pastille de compteur sur l'icône en mode rail */
body.side-collapsed .navbtn{position:relative}
body.side-collapsed .navbtn .cnt-dot{display:flex}
body.side-collapsed #nav-projects{display:flex;flex-direction:column;align-items:center;gap:6px;padding:2px 0}
body.side-collapsed .navbtn.pfilter{width:auto;height:auto;min-height:0;padding:2px;grid-template-columns:none;display:flex}
body.side-collapsed .plab.prow{display:none}
body.side-collapsed .navbtn.pfilter .pname,
body.side-collapsed .navbtn.pfilter .pcnt{display:none}
body.side-collapsed .navbtn.pfilter .pdot{width:14px;height:14px}
body.side-collapsed .navbtn.pfilter.active{background:none}
body.side-collapsed .navbtn.pfilter.active .pdot{box-shadow:0 0 0 2px var(--paper-2),0 0 0 4px var(--pc)}
body.side-collapsed .navsec-proj{border-top:1px solid var(--line);padding-top:8px}
body.side-collapsed .acctrow{width:44px;height:44px;padding:0;justify-content:center}
body.side-collapsed .acctrow .acctxt,
body.side-collapsed .acctrow .acctchev{display:none}
.brand svg{width:30px;height:30px;flex:0 0 auto}
.brand .bname{font-family:var(--font-h),sans-serif;font-weight:600;font-size:1.35rem;letter-spacing:.01em}
.brand .btag{font-size:.72rem;color:var(--muted);line-height:1.25}
.navsec{margin-top:14px}
.navlab{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 10px;margin-bottom:6px}
.navbtn{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:8px 10px;border-radius:9px;font-size:.93rem;font-weight:500;color:var(--ink);
}
.navbtn:hover{background:rgba(47,107,94,.08)}
.navbtn.active{background:var(--accent);color:#fff}
.navbtn .nvico{width:19px;height:19px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--muted)}
.navbtn.active .nvico{color:#fff}
.navbtn .cnt{margin-left:auto;font-size:.75rem;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.navbtn.active .cnt{color:rgba(255,255,255,.85)}
/* pastille de compteur (visible en mode rail) */
.navbtn .cnt-dot{display:none;position:absolute;top:5px;right:5px;min-width:15px;height:15px;padding:0 3px;
  border-radius:8px;background:var(--late);color:#fff;font-size:.62rem;font-weight:700;line-height:15px;
  text-align:center;box-shadow:0 0 0 2px var(--paper-2)}
.navsec-inbox{margin-top:6px}
.navbtn-inbox{color:var(--muted)}
.navbtn-inbox.active{color:#fff}
.navsec-proj{margin-top:16px}
.pdot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
/* liste projets : pastille · nom · 3 colonnes de statut (à faire / en cours / terminé) */
.prow{display:grid;grid-template-columns:12px minmax(0,1fr) 42px 42px 42px;column-gap:5px;align-items:center}
.plab.prow{padding:0 8px 0 10px;margin-bottom:2px}
.plab .plname{grid-column:1/3}
.ph-col{
  font-size:.52rem;letter-spacing:.01em;text-transform:uppercase;color:var(--muted);
  text-align:center;padding:4px 0;background:rgba(35,37,43,.05);border-radius:7px 7px 0 0;
  font-weight:700;white-space:nowrap;overflow:hidden;
}
.navbtn.pfilter{display:grid;grid-template-columns:12px minmax(0,1fr) 42px 42px 42px;column-gap:5px;padding:0 8px 0 10px;min-height:34px}
.navbtn.pfilter.active{background:var(--pc);color:var(--on-tint)}
.navbtn .pname{min-width:0;display:flex;align-items:center;gap:4px}
/* la troncature porte sur le TEXTE seul : l'icône « partagé » doit rester
   visible même quand le nom est coupé */
.navbtn .pname .ptxt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcnt{
  height:100%;display:flex;align-items:center;justify-content:center;
  font-size:.74rem;font-weight:700;font-variant-numeric:tabular-nums;
  background:rgba(35,37,43,.05);
}
#nav-projects .pfilter:last-child .pcnt{border-radius:0 0 7px 7px}
.pcnt.c-todo{color:var(--ink);opacity:.75}
.pcnt.c-doing{color:var(--doing)}
.pcnt.c-done{color:var(--accent)}
.navbtn.pfilter.active .pcnt{color:#fff;opacity:1;background:rgba(255,255,255,.16)}
.navbtn.pfilter.active .pcnt.c-todo{opacity:.85}

/* jauge de stockage */
.store{padding:8px 10px 2px;font-size:.72rem;color:var(--muted)}
.store .sbar{height:4px;border-radius:2px;background:var(--paper);border:1px solid var(--line);overflow:hidden;margin-top:4px}
.store .sfill{height:100%;background:var(--accent);border-radius:2px}
.store.warn .sfill{background:var(--doing)}
.store.full .sfill{background:var(--late)}
.store.full{color:var(--late);font-weight:600}

/* bandeau stockage plein */
.storebanner{
  display:none;position:fixed;right:16px;bottom:16px;z-index:60;max-width:430px;
  background:var(--card);border:1.5px solid var(--late);border-radius:12px;
  padding:14px 16px;box-shadow:0 10px 34px rgba(35,37,43,.25);font-size:.87rem;
}
body.storage-full .storebanner{display:block}
.storebanner b{color:var(--late)}
.storebanner .sb-acts{display:flex;gap:10px;margin-top:8px}
.storebanner button{font-size:.82rem;font-weight:600;color:var(--accent);border:1px solid var(--line);border-radius:8px;padding:5px 12px;background:var(--paper)}
.storebanner button:hover{border-color:var(--accent)}
.sidefoot{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:12px;border-top:1px solid var(--line)}
/* ligne compte (bas du volet) */
.acctrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:7px 8px;border-radius:11px}
.acctrow:hover{background:rgba(47,107,94,.08)}
.acctav{flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;overflow:hidden}
.acctav img{width:100%;height:100%;object-fit:cover}
.acctav.lg{width:40px;height:40px;font-size:1.05rem}
.acctxt{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.acctname{font-size:.9rem;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acctsub{font-size:.74rem;color:var(--muted)}
.acctchev{margin-left:auto;width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
.acctrow[aria-expanded="true"] .acctchev{transform:rotate(180deg)}
/* menu Compte & réglages */
.acctmenu-overlay{position:fixed;inset:0;z-index:49}
.acctmenu{position:fixed;z-index:50;width:262px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 14px 44px rgba(35,37,43,.20);padding:8px;
  max-height:calc(100vh - 24px);overflow-y:auto;
  animation:amrise .16s cubic-bezier(.22,1,.36,1)}
@keyframes amrise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.am-head{display:flex;align-items:center;gap:11px;padding:8px 8px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.am-id{min-width:0}
.am-name{font-weight:600;font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-mail{font-size:.78rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.am-group{display:flex;flex-direction:column;gap:1px}
.am-lab{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);padding:10px 10px 4px}
.am-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:8px 10px;border-radius:9px;font-size:.9rem;color:var(--ink)}
.am-item:hover{background:rgba(47,107,94,.09)}
.am-item svg{width:17px;height:17px;flex:0 0 auto;stroke:var(--muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.am-sep{height:1px;background:var(--line);margin:6px 4px}
.am-logout{color:var(--late)}
.am-logout svg{stroke:var(--late)}
.am-theme .knob{margin-left:auto;width:34px;height:19px;border-radius:11px;background:var(--line);position:relative;transition:background .18s;flex:0 0 auto}
.am-theme .knob::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:transform .18s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.am-theme.on .knob{background:var(--accent)}
.am-theme.on .knob::after{transform:translateX(15px)}
/* infobulle du rail (mode réduit) */
.railtip{position:fixed;z-index:60;background:var(--ink);color:var(--paper);font-size:.82rem;font-weight:500;
  padding:6px 10px;border-radius:8px;box-shadow:0 6px 18px rgba(35,37,43,.28);pointer-events:none;
  white-space:nowrap;opacity:0;transform:translateX(-4px);transition:opacity .12s,transform .12s}
.railtip.show{opacity:1;transform:none}
.railtip .rt-cnt{margin-left:7px;opacity:.7;font-variant-numeric:tabular-nums}

/* ============ main ============ */
#mainscroll{
  margin-left:var(--side-w);min-width:0;padding:34px 44px 90px;
  transition:margin-left .22s cubic-bezier(.22,1,.36,1); /* impeccable-disable-line layout-transition -- le contenu suit le repli du volet (même geste) */
}
#main{max-width:860px;margin:0 auto}

/* barre de bascule liste / cartes */
.viewbar{display:flex;gap:4px;justify-content:flex-end;margin:2px 0 16px}
.viewbar .vbtn{
  width:36px;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--card);
  color:var(--muted);display:flex;align-items:center;justify-content:center;
}
.viewbar .vbtn:hover{color:var(--ink);border-color:var(--accent)}
.viewbar .vbtn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.viewbar .vbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* mode cartes : 3 tâches par ligne */
#main.cards .sec,
#main.cards .agday,
#main.cards .pcard,
#main.cards .donelist{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-items:start;
}
#main.cards .sec-h,
#main.cards .agh,#main.cards .agempty,
#main.cards .pcard>.ph,#main.cards .pcard>.pbar,#main.cards .pcard>.moislab,#main.cards .pcard>.addbtn,#main.cards .pcard>.agempty,
#main.cards .donelist>.moislab{grid-column:1/-1}
#main.cards .task{flex-direction:column;margin-bottom:0;min-height:100%}
#main.cards .task .tbody{width:100%}
#main.cards .task .chk{margin-top:0}
#main.cards .task .tacts{opacity:1;align-self:flex-end;margin-top:auto}
#main.cards .tnote,#main.cards .notetoggle{display:none}
@media (max-width:1100px){
  #main.cards .sec,#main.cards .agday,#main.cards .pcard,#main.cards .donelist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
h1.day{font-family:var(--font-h),sans-serif;font-weight:600;font-size:2.1rem;line-height:1.1;margin-bottom:2px}
h1.day .mois{font-style:italic;font-weight:500}
/* interrupteur Planning / Semaine / Mois (« À venir ») */

/* ---- en-tête commun à tous les écrans : ‹ › (· calendrier) · titre · pastille
   ou sous-texte de période, sur UNE ligne ---- */
.dayhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:2px 0 8px}
.dayhead .spacer{flex:1}
.headsub{font-size:.87rem;color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
/* scopé au dayhead HÉRITÉ : dans le jhead (Aujourd'hui, DS), le bouton
   calendrier reste un .jnav nu — sans carte ni ombre (maquette) */
.dayhead>button,.dayhead .calwrap>button{
  background:var(--card);border:1px solid var(--line);border-radius:9px;
  padding:6px 12px;font-size:.87rem;font-weight:500;box-shadow:var(--shadow);
}
.dayhead>button:hover,.dayhead .calwrap>button:hover{border-color:var(--accent);color:var(--accent)}
.dayhead .todaybtn{color:var(--accent);font-weight:600}
.dayhead h1.day{margin:0}
/* le champ date vit caché sous le bouton calendrier (showPicker au clic) —
   absolu dans le wrapper pour que le sélecteur natif s'ancre sur le bouton */
.calwrap{position:relative;display:inline-flex}
/* ---- calendrier maison (maquette « Accueil_tooltip_calendrier ») ----
   Composant UNIQUE de tous les champs date. Posé au body en fixed (position
   calculée en JS) : au-dessus de l'overlay d'édition (z121), jamais rogné. */
.calpop{position:fixed;z-index:130;width:224px;display:flex;flex-direction:column;
  gap:var(--sp-8);background:var(--card);border-radius:var(--r-12);padding:12px 13px;
  color:var(--text-strong);cursor:default;text-align:left}
.calpop-head{display:flex;align-items:center;gap:6px}
.calnav{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--text-muted);border-radius:var(--r-6);border:none;background:none;padding:0}
.calnav:hover{background:var(--inset);color:var(--text-strong)}
.cal-chl{transform:rotate(-90deg)}
.cal-chr{transform:rotate(90deg)}
.calpop-title{flex:1;text-align:center;font-family:var(--font-h),sans-serif;font-size:var(--fs-body);font-weight:700}
.calwd{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-2);text-align:center;
  font-family:var(--font-mono),ui-monospace,monospace;font-size:9px;color:var(--text-muted-warm);text-transform:uppercase}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-2);text-align:center;
  font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-caption)}
.calday{padding:4px 0;color:var(--text);border-radius:var(--r-6);border:none;background:none;font:inherit}
.calday:hover{background:var(--inset)}
.calday.out{color:color-mix(in srgb, var(--text-muted-warm) 45%, var(--card))}
.calday.today{color:var(--brand);font-weight:700}
.calday.sel{background:var(--brand);color:#fff;font-weight:600}
.calday.sel:hover{background:var(--brand-hover)}
.caltoday{text-align:center;font-size:var(--fs-caption);color:var(--brand);font-weight:600;padding-top:var(--sp-2)}
.caltoday:hover{text-decoration:underline}
/* sélecteur d'heure : même carte, grilles 6 colonnes (24 h puis minutes par 5) */
.tp-lab{font-family:var(--font-mono),ui-monospace,monospace;font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted-warm)}
.tp-grid{grid-template-columns:repeat(6,1fr)}
.tp-clear{color:var(--text-muted)}
.tp-clear:hover{color:var(--text-strong)}
.dayhead .calwrap>button{display:inline-flex;align-items:center;justify-content:center;padding:6px 9px;color:var(--muted)}
/* jhead (Aujourd'hui) : icône calendrier nue à 18px, comme la maquette */
.jhead .calwrap .ic-sm{width:18px;height:18px}
.calwrap input[type=date]{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;border:0;padding:0}
.relpill{
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--accent);background:var(--accent-soft);border-radius:20px;padding:4px 11px;
}

/* ---- pouls du jour : avancement + charge côte à côte, une seule bande ---- */
.pouls{
  display:flex;align-items:center;gap:12px 14px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 16px;margin:14px 0 18px;box-shadow:var(--shadow);
}
.pmeter{display:flex;align-items:center;gap:10px;min-width:0}
.pcap{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.pmini{width:110px;height:8px;border-radius:5px;background:var(--paper-2);overflow:hidden;flex:0 0 auto}
.pmini i{
  display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,#3C8A78,var(--accent));
  transition:width .5s cubic-bezier(.22,1,.36,1); /* impeccable-disable-line layout-transition -- remplissage de jauge (élément minuscule, reflow négligeable) */
}
.pval{font-size:.88rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.pnote{font-size:.8rem;color:var(--muted)}
.pmeter.load .pmini i{background:var(--accent)}
/* une journée pleine n'est pas une faute : la charge parle en AMBRE —
   le rouge reste réservé aux vrais retards */
.pmeter.load.over .pmini i{background:var(--warn)}
.pmeter.load.over .pval,.pmeter.load.over .pnote{color:var(--warn)}
.psep{width:1px;height:26px;background:var(--line);flex:0 0 auto}
.paveu{font-size:.76rem;color:var(--muted);margin-left:auto;white-space:nowrap}

/* ---- filtres à gauche, sélecteur de vue à droite, juste au-dessus des tâches ---- */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 10px}
.toolbar .filterbar{margin:0;flex:1 1 auto}
.toolbar .viewbar{margin:0 0 0 auto}

/* réglage de la capacité (modale) */
.capmode{margin:2px 0 12px}
.capmode button{flex:1;padding:7px 6px;font-size:.8rem}
.capall{margin:4px 0 10px}
.caplist{display:flex;flex-direction:column;gap:7px;margin:4px 0 10px}
.capr{display:flex;align-items:center;gap:10px}
.capr-d{flex:1;font-size:.9rem;color:var(--ink)}
/* capitalise les noms de jours, qui viennent d'Intl en bas de casse en français
   (« lundi ») — surtout PAS les libellés du dictionnaire, déjà bien casés :
   capitalize frapperait chaque mot (« Tous Les Jours »). */
.caplist .capr-d{text-transform:capitalize}
.capr-i{
  width:5em;border:1px solid var(--line);border-radius:8px;background:var(--paper);
  padding:6px 8px;color:var(--ink);font-family:inherit;font-size:.9rem;font-weight:500;outline:none;
}
.capr-i:focus{border-color:var(--accent)}
.capr-u{font-size:.82rem;color:var(--muted);width:1.2em}
.caphint{font-size:.78rem;color:var(--muted);margin-bottom:4px}
/* ---- réglages projet : sections empilées dans un seul modal ---- */
.psec{padding:14px 0;border-top:1px solid var(--line)}
.psec:first-child{padding-top:0;border-top:none}
.psec-t{font-weight:600;font-size:.95rem;margin-bottom:6px}
.pstoggle{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:.92rem;margin-bottom:6px}
.pstoggle input{width:16px;height:16px;flex:0 0 auto;accent-color:var(--accent)}

/* sections */
.sec{margin-bottom:26px}
.sec-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sec-h h2{font-family:var(--font-h),sans-serif;font-weight:600;font-size:1.05rem}
.sec-h .n{font-size:.75rem;font-weight:700;color:var(--muted)}
.sec-h .spacer{flex:1}
.sec-h button{font-size:.78rem;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:3px 10px;background:var(--card)}
.sec-h button:hover{color:var(--accent);border-color:var(--accent)}
.sec.late .sec-h h2{color:var(--late)}
.sec.doing-sec .sec-h h2{color:var(--doing)}

/* tasks */
.task{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:11px 12px;margin-bottom:8px;
  box-shadow:var(--shadow);transition:background .3s,opacity .3s;
}
.task .chk{
  width:22px;height:22px;flex:0 0 auto;margin-top:2px;
  border:2px solid var(--pc,var(--muted));border-radius:50%;position:relative;
  transition:.2s;background:transparent;
}
.task .chk:hover{background:color-mix(in srgb,var(--pc) 18%,transparent)}
.task .chk svg{position:absolute;inset:2px;opacity:0;transition:.2s;stroke:#fff}
.task.doing .chk::after{
  content:"";position:absolute;inset:4px;border-radius:50%;background:var(--pc);
}
.task.done .chk{background:var(--pc);border-color:var(--pc)}
.task.done .chk svg{opacity:1}
.tbody{flex:1;min-width:0;cursor:pointer}
.ttl{font-weight:500}
.tmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
.chip{font-size:.72rem;font-weight:600;color:var(--pc);letter-spacing:.02em}
.st-badge{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--doing)}
.dt-badge{font-size:.72rem;color:var(--muted)}
.dt-badge.late{color:var(--late);font-weight:600}
.tacts{display:flex;gap:2px;opacity:0;transition:.15s;flex:0 0 auto;margin-top:1px}
.task:hover .tacts{opacity:1}
.tacts button{
  width:28px;height:28px;border-radius:8px;color:var(--muted);font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
}
.tacts button:hover{background:var(--paper-2);color:var(--ink)}
.task.done{background:var(--card-done);border-color:transparent;opacity:.55}
.task.done .ttl{text-decoration:line-through;color:var(--muted)}
.task.done .tnote,.task.done .notetoggle{display:none}

/* ---- contenu riche des descriptions (affichage + éditeur) ---- */
.tnote,.rte{font-size:.84rem;color:var(--ink)}
.tnote{margin-top:5px}
.tnote.clamp{max-height:66px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent);mask-image:linear-gradient(180deg,#000 45%,transparent)}
.notetoggle{font-size:.75rem;color:var(--accent);margin-top:3px;font-weight:600}
.notetoggle:hover{text-decoration:underline}
.tnote p,.rte p{margin:3px 0;color:inherit}
.tnote h3,.rte h3{font-size:.98rem;font-weight:700;margin:10px 0 2px;font-family:var(--font-body),sans-serif}
.tnote h4,.rte h4{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pc,var(--accent));margin:11px 0 2px;font-weight:700}
.rte h4{color:var(--accent)}
.tnote ul,.tnote ol,.rte ul,.rte ol{margin:4px 0 4px 20px}
.tnote li,.rte li{margin:2px 0}
.tnote code,.rte code{
  font-family:var(--font-mono),ui-monospace,monospace;font-size:.78rem;
  background:var(--paper-2);border:1px solid var(--line);border-radius:6px;
  padding:0 6px;color:#275D52;white-space:nowrap;
}
.tnote pre,.rte pre{
  font-family:var(--font-mono),ui-monospace,monospace;font-size:.78rem;
  background:#23252B;color:#EDEDE6;border-radius:8px;padding:10px 12px;
  overflow-x:auto;margin:6px 0;white-space:pre-wrap;
}
.tnote pre code,.rte pre code{background:none;border:none;color:inherit;padding:0;white-space:pre-wrap}
.tnote blockquote,.rte blockquote{border-left:3px solid var(--pc,var(--accent));padding:2px 12px;margin:6px 0;color:var(--muted);font-style:italic} /* impeccable-disable-line side-tab -- liseré de citation : convention universelle (Markdown, Gmail, Word) */
.rte blockquote{border-color:var(--accent)}
.tnote img,.rte img{max-width:100%;border-radius:8px;margin:6px 0;display:block;border:1px solid var(--line)}
.tnote .warn,.rte .warn{color:var(--warn)}
.tnote a,.rte a{color:var(--accent)}

/* bouton ajouter */
.addbtn{
  width:100%;text-align:left;padding:11px 14px;border-radius:var(--radius);
  border:1.5px dashed var(--line);color:var(--muted);font-size:.92rem;margin-top:4px;
}
.addbtn:hover{border-color:var(--accent);color:var(--accent)}

/* agenda */
.agday{margin-bottom:24px}
.agday .agh{
  display:flex;align-items:baseline;gap:10px;padding-bottom:6px;margin-bottom:8px;
  border-bottom:1px solid var(--line);cursor:pointer;
}
.agday .agh:hover .agt{color:var(--accent)}
.agt{font-family:var(--font-h),sans-serif;font-weight:600;font-size:1.1rem}
.agrel{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600}
.agcnt{margin-left:auto;font-size:.78rem;color:var(--muted)}
.agempty{font-size:.85rem;color:var(--muted);padding:4px 2px 2px;font-style:italic}

/* projects view */
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:18px;box-shadow:var(--shadow)}
.pcard .ph{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.pcard .ph .pdot{width:13px;height:13px}
.pcard .ph h2{font-family:var(--font-h),sans-serif;font-size:1.2rem;font-weight:600;flex:1}
.pcard .ph .pstats{font-size:.8rem;color:var(--muted)}
.pcard .ph .pdel{font-size:.95rem;opacity:.35;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pcard .ph .pdel:hover{opacity:1;background:var(--late-soft)}
.pcard .ph .parch{font-size:.9rem;opacity:.35;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pcard .ph .parch:hover{opacity:1;background:var(--accent-soft)}
.pcard.parchived{opacity:.72;background:var(--paper-2)}
.task.trashed{opacity:.92;border-style:dashed;align-items:center}
.task.trashed .ttl{color:var(--muted)}
.task.trashed .tbody{cursor:default}

/* ============ Lot 9 : dates, dépendances, pièces jointes, journal, modèles ============ */
.mfield label .opt{color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
/* badges de tâche */
.blocked{font-size:.68rem;font-weight:700;color:var(--warn);white-space:nowrap}
/* heure / durée prévues — même famille que les autres pastilles de la ligne */
.tm-badge{font-size:.7rem;font-weight:600;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.due{font-size:.7rem;font-weight:600;color:var(--muted);white-space:nowrap}
.due.over{color:var(--late)}
.att-b{font-size:.7rem;font-weight:600;color:var(--muted);white-space:nowrap}
.task.blocked-row .chk{border-style:dashed}
/* dépendances (panneau) */
.depbox{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.dep{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:2px 6px 2px 10px;color:var(--ink)}
.dep.done{color:var(--accent);border-color:var(--accent-soft)}
.dep button{width:16px;height:16px;border-radius:50%;color:var(--muted);font-size:.66rem;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.dep button:hover{background:rgba(0,0,0,.1)}
.depsug{border:1px solid var(--line);border-radius:9px;margin-top:4px;background:var(--card);box-shadow:var(--shadow);overflow:hidden;max-height:220px;overflow-y:auto}
.depsug button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:8px 11px;font-size:.86rem;color:var(--ink)}
.depsug button:hover{background:var(--accent-soft)}
.depsug .depd{margin-left:auto;font-size:.74rem;color:var(--muted)}
/* pièces jointes (panneau) */
.attlist{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.att{display:flex;align-items:center;gap:8px;font-size:.86rem;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.att .attico{flex:0 0 auto}
.att .attname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--accent);text-decoration:none}
.att .attname:hover{text-decoration:underline}
.att .attsize{font-size:.74rem;color:var(--muted);flex:0 0 auto}
.att button{width:22px;height:22px;border-radius:6px;color:var(--muted);flex:0 0 auto;font-size:.72rem}
.att button:hover{background:var(--late-soft);color:var(--late)}
.attadd{display:flex;gap:8px;flex-wrap:wrap}
.attbtn{font-size:.83rem;font-weight:600;color:var(--accent);border:1px dashed var(--line);border-radius:8px;padding:7px 12px;background:transparent}
.attbtn:hover{border-color:var(--accent);border-style:solid}
.attbtn:disabled{opacity:.6}
/* journal (panneau) */
.journal{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;max-height:220px;overflow-y:auto}
.jrow{border-left:2px solid var(--line);padding:2px 0 2px 10px}
.jmeta{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--muted)}
.jmeta button{margin-left:auto;width:18px;height:18px;border-radius:5px;color:var(--muted);font-size:.66rem}
.jmeta button:hover{background:var(--late-soft);color:var(--late)}
.jtext{font-size:.88rem;color:var(--ink);white-space:pre-wrap;line-height:1.45}
.jadd input,.depsug+.depsug{width:100%}
.jadd input{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--paper);outline:none;font-size:.88rem}
.jadd input:focus{border-color:var(--accent)}
/* modèles de projet (modale) */
.tpllist{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;max-height:50vh;overflow-y:auto}
.tplrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.tplname{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpln{font-size:.76rem;color:var(--muted);white-space:nowrap}
.tpluse{font-size:.82rem;font-weight:600;color:#fff;background:var(--accent);border-radius:8px;padding:6px 13px}
.tpluse:hover{filter:brightness(1.08)}
.tplrow .ckrm{width:28px;height:28px;border-radius:8px;color:var(--muted);flex:0 0 auto}
.tplrow .ckrm:hover{background:var(--late-soft);color:var(--late)}
.trestore{
  flex:0 0 auto;font-size:.84rem;font-weight:600;color:var(--accent);
  border:1.5px solid var(--accent);border-radius:9px;padding:7px 14px;
  background:transparent;white-space:nowrap;transition:background .15s,color .15s;
}
.trestore:hover{background:var(--accent);color:#fff}
.trestore:disabled{opacity:.5}
.tnote img{cursor:zoom-in}
.pcard.parchived .ph h2{color:var(--muted)}
.punarch{font-size:.78rem;font-weight:600;color:var(--accent);border:1px solid var(--line);border-radius:8px;padding:4px 11px;background:var(--card);flex:0 0 auto}
.punarch:hover{border-color:var(--accent)}
.moislab{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:12px 0 6px}


/* empty state */
.empty{
  text-align:center;padding:44px 20px;color:var(--muted);
  border:1.5px dashed var(--line);border-radius:var(--radius);
}
.empty .big{font-family:var(--font-h),sans-serif;font-style:italic;font-size:1.2rem;color:var(--ink);margin-bottom:6px}

/* ============ panneau latéral (édition / création) ============ */
.doverlay{
  position:fixed;inset:0;background:rgba(35,37,43,.3);z-index:40;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
body.dopen .doverlay{opacity:1;pointer-events:auto}
.dpanel{
  position:fixed;top:0;right:0;bottom:0;width:40%;min-width:380px;z-index:41;
  background:var(--card);border-left:1px solid var(--line);
  transform:translateX(102%);transition:transform .28s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;
}
/* l'ombre SEULEMENT quand le volet est ouvert : replié à 102 %, elle débordait
   du bord et peignait une bande grise sur toute la hauteur droite de l'appli */
body.dopen .dpanel{transform:none;box-shadow:-18px 0 50px rgba(35,37,43,.16)}
.dhead{display:flex;align-items:center;gap:10px;padding:20px 24px 14px;border-bottom:1px solid var(--line)}
.dhead h3{font-family:var(--font-h),sans-serif;font-weight:600;font-size:1.25rem;flex:1}
.dhead .dclose{
  width:32px;height:32px;border-radius:9px;font-size:1.1rem;color:var(--muted);
  display:flex;align-items:center;justify-content:center;
}
.dhead .dclose:hover{background:var(--paper-2);color:var(--ink)}
.dbody{flex:1;overflow-y:auto;padding:20px 24px}
.mfield{margin-bottom:16px}
.mfield label{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;font-weight:600}
.mfield textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--paper);
  color:var(--ink);font:inherit;font-size:.9rem;padding:8px 10px;resize:vertical;outline:none}
.mfield textarea:focus{border-color:var(--accent)}
.mfield input[type=text],.mfield input[type=email],.mfield select,.mfield input[type=date]{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:var(--paper);outline:none;
}
.mfield input:focus,.mfield select:focus{border-color:var(--accent)}
.mrow{display:flex;gap:10px}
.mrow .mfield{flex:1}
.seg{display:flex;gap:6px}
.seg button{
  flex:1;padding:8px 6px;border:1px solid var(--line);border-radius:9px;
  font-size:.85rem;font-weight:500;background:var(--paper);color:var(--muted);
}
.seg button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.seg-wrap{flex-wrap:wrap}
.seg-wrap button{flex:0 0 auto;padding:8px 14px}
.seg button.on[data-s=todo]{background:var(--ink);border-color:var(--ink);color:#fff}
.seg button.on[data-s=doing]{background:var(--doing);border-color:var(--doing);color:#fff}
.seg button.on[data-s=done]{background:var(--accent);border-color:var(--accent);color:#fff}
.dfoot{display:flex;gap:8px;align-items:center;padding:16px 24px;border-top:1px solid var(--line);flex-wrap:wrap}
.dfoot .postpone{margin-right:auto}

/* ---- panneau tâche sobre (3e) ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.d-projwrap{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
/* pastille projet : tuile carrée + initiale blanche (grammaire ptile, maquette) */
.d-projdot{width:20px;height:20px;border-radius:var(--r-6);flex:0 0 auto;background:var(--muted);
  color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
/* le volet n'a plus que la croix (+ témoin) en tête : à droite */
#dpanel .dhead{justify-content:flex-end}
/* les champs date ET heure du volet passent par les sélecteurs MAISON :
   indicateurs natifs masqués partout (volet droit comme overlay) */
#dpanel input[type=date]::-webkit-calendar-picker-indicator,
#dpanel input[type=time]::-webkit-calendar-picker-indicator{display:none}
/* enveloppe d'un champ à icône (échéance, heure) — icône visible en overlay seulement */
.d-icoin{display:block;position:relative}
.d-icoin input{width:100%}
.d-inico{display:none}
.d-projsel{border:none;background:none;font-size:.92rem;font-weight:600;color:var(--ink);padding:4px 6px;border-radius:8px;
  max-width:100%;outline:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.d-projsel:hover{background:var(--paper-2)}
.dhead-r{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.d-saved{font-size:.72rem;color:var(--muted);opacity:0;transition:opacity .2s}
.d-saved.show{opacity:1}
.d-titleinput{width:100%;border:none;outline:none;background:none;font-family:var(--font-h),sans-serif;font-weight:600;
  font-size:1.55rem;line-height:1.2;color:var(--ink);padding:2px 0;margin-bottom:14px}
.d-titleinput::placeholder{color:var(--muted);opacity:.6}
.d-status{margin-bottom:14px}
.d-boxrow{display:flex;gap:10px;margin-bottom:16px}
.d-box{flex:1;min-width:0;border:1px solid var(--line);border-radius:11px;padding:9px 12px;background:var(--paper)}
.d-box label{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;font-weight:700}
.d-box input[type=date]{width:100%;border:none;background:none;outline:none;padding:0;color:var(--ink);font-weight:500}
.d-daterel{display:block;font-size:.74rem;color:var(--muted);margin-top:3px}
.d-daterel.late{color:var(--late);font-weight:600}
.d-prioseg{gap:4px}
.d-prioseg button{padding:6px 4px;font-size:.78rem}
/* durée estimée : puces rapides + saisie libre en repli */
.d-box label .opt{text-transform:none;letter-spacing:0;font-weight:400}
/* la durée a besoin de plus de large que l'heure : 5 puces sur une ligne */
.d-box-est{flex:2}
.d-estseg{gap:4px;flex-wrap:wrap}
.d-estseg button{padding:6px 6px;font-size:.78rem;flex:0 1 auto}
.d-estfree{display:flex;align-items:baseline;gap:5px;margin-top:6px}
.d-estfree input[type=number]{width:4.5em;border:1px solid var(--line);border-radius:7px;background:var(--paper);
  outline:none;padding:4px 6px;color:var(--ink);font-weight:500;font-size:.82rem;font-family:inherit}
.d-estfree input[type=number]:focus{border-color:var(--accent)}
.d-estunit{font-size:.78rem;color:var(--muted)}
/* temps réel passé : même ADN visuel que le champ libre de la durée, plus l'écart
   estimé/réel en clair (teinte « retard » au-dessus, sobre en-dessous) */
.d-spentrow{display:flex;align-items:baseline;gap:5px;margin-top:6px;flex-wrap:wrap}
.d-spentrow input[type=number]{width:4.5em;border:1px solid var(--line);border-radius:7px;background:var(--paper);
  outline:none;padding:4px 6px;color:var(--ink);font-weight:500;font-size:.82rem;font-family:inherit}
.d-spentrow input[type=number]:focus{border-color:var(--accent)}
.d-spent-cmp{font-size:.76rem;color:var(--muted);margin-left:2px}
.d-spent-cmp.over{color:var(--late);font-weight:600}
.d-box input[type=time]{width:100%;border:none;background:none;outline:none;padding:0;color:var(--ink);
  font-weight:500;font-family:inherit;font-size:1rem}
/* énergie & contexte : avec la durée, ce qui rend une tâche organisable — donc à
   hauteur des yeux, jamais dans un repli. Les 3 puces d'énergie s'allument comme
   le reste (accent) : leur ordre porte déjà le sens, une échelle de couleurs en
   plus ferait doublon avec la priorité, qui est un autre axe. */
.d-enerseg{gap:4px}
.d-enerseg button{padding:6px 4px;font-size:.78rem}
/* le contexte accepte plusieurs valeurs : il lui faut plus de large que l'énergie.
   relative = ancre de la liste de propositions, qui flotte au lieu de pousser la
   Description vers le bas à chaque frappe */
.d-box-ctx{flex:1.4;position:relative}
.ctxsug{
  position:absolute;left:8px;right:8px;top:100%;z-index:6;margin-top:3px;
  border:1px solid var(--line);border-radius:9px;background:var(--card);
  box-shadow:var(--shadow);overflow:hidden;max-height:200px;overflow-y:auto;
}
.ctxsug button{display:block;width:100%;text-align:left;padding:7px 11px;font-size:.86rem;color:var(--ink)}
/* .on suit le clavier ET la souris : une seule proposition est « celle qu'Entrée prend » */
.ctxsug button.on{background:var(--accent-soft)}
.ctxsug .ctxnew{color:var(--muted);border-top:1px solid var(--line)}
.ctxsug .ctxnew.on{color:var(--ink)}
/* le tagbox se fond dans la boîte, comme les champs date et heure au-dessus
   (la boîte porte déjà bordure et fond) */
.d-box-ctx .tagbox{border:none;background:none;padding:0}
.d-box-ctx .tagbox input{min-width:90px;padding:0}
.dmiss{margin-right:auto;font-size:.82rem;color:var(--muted)}
.dfoot .primary:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
/* sections repliées */
.dsec{border-top:1px solid var(--line)}
.dsec>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:13px 2px;
  font-size:.92rem;font-weight:500;color:var(--ink);user-select:none}
.dsec>summary::-webkit-details-marker{display:none}
.dsec>summary::before{content:"+";width:16px;text-align:center;color:var(--muted);font-weight:600;font-size:1.05rem;flex:0 0 auto}
.dsec[open]>summary::before{content:"–"}
.dsec-t{flex:1;min-width:0}
.dsec-c{font-size:.8rem;color:var(--muted);font-weight:400}
.dsec-body{padding:2px 2px 16px}
.dsec-body .mfield:last-child{margin-bottom:0}
.dsec-body>select{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:var(--paper);outline:none;color:var(--ink)}
.dsec-body>select:focus{border-color:var(--accent)}
.applyfollowing{margin-top:10px;font-size:.83rem;font-weight:600;color:var(--accent);border:1px solid var(--line);
  border-radius:9px;padding:7px 12px;width:100%}
.applyfollowing:hover{border-color:var(--accent);background:var(--accent-soft)}
.dfoot .primary{background:var(--accent);color:#fff;font-weight:600;padding:10px 22px;border-radius:10px}
.dfoot .ghost{color:var(--muted);padding:10px 10px}
.dfoot .postpone{
  margin-left:auto;font-size:.83rem;font-weight:500;color:var(--accent);
  border:1px solid var(--line);border-radius:9px;padding:8px 12px;background:var(--paper);
}
.dfoot .postpone:hover{border-color:var(--accent)}
.dfoot .danger{color:var(--late);font-size:.85rem}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:30px;height:30px;border-radius:50%;border:3px solid transparent}
.sw.on{border-color:var(--ink)}

/* ---- éditeur riche ---- */
.rtb{
  display:flex;flex-wrap:wrap;gap:2px;align-items:center;
  border:1px solid var(--line);border-bottom:none;border-radius:9px 9px 0 0;
  padding:5px 6px;background:var(--paper-2);position:relative;
}
.rtb .sep{width:1px;height:18px;background:var(--line);margin:0 4px}
.rtb button{
  min-width:26px;height:26px;border-radius:6px;font-size:.8rem;color:var(--ink);
  display:flex;align-items:center;justify-content:center;padding:0 5px;
}
.rtb button:hover{background:#fff}
.rtb button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.rtb select{
  border:1px solid var(--line);border-radius:6px;font-size:.76rem;padding:3px 4px;
  background:#fff;max-width:110px;
}
.rtb .b-b{font-weight:800}
.rtb .b-i{font-style:italic;font-family:var(--font-read),Georgia,serif}
.rtb .b-u{text-decoration:underline}
.rtb .b-s{text-decoration:line-through}
.rtb .b-A{font-weight:700;border-bottom:3px solid #C2453A;border-radius:6px 6px 2px 2px} /* impeccable-disable-line border-accent-on-rounded -- barre-témoin du bouton couleur de texte (affordance Word/Docs) */
.rtb .b-H{font-weight:700;background:#F5E27A;border-radius:6px}
.rte{
  min-height:190px;max-height:44vh;overflow-y:auto;
  border:1px solid var(--line);border-radius:0 0 9px 9px;
  padding:10px 12px;background:var(--paper);outline:none;
}
.rte:focus{border-color:var(--accent)}
/* placeholder de l'éditeur (maquette : « Ajoute des précisions… ») */
.rte:empty::before{content:attr(data-ph);color:var(--muted);pointer-events:none}
body.edov .rte:empty::before{color:#8FB0A5}
.swpop{
  position:absolute;top:100%;left:0;z-index:5;margin-top:4px;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;
  box-shadow:var(--shadow);display:flex;gap:6px;flex-wrap:wrap;width:196px;
}
.swpop button{width:24px;height:24px;border-radius:6px;border:1px solid var(--line);min-width:24px}
.swpop button.none{width:auto;padding:0 8px;font-size:.72rem;color:var(--muted)}

/* confetti */
.pop{position:fixed;width:9px;height:14px;border-radius:3px;pointer-events:none;z-index:99}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg);opacity:.2}}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* éléments mobiles (PWA) — masqués sur desktop */
.mtopbar,.botbar,.mdrawer-ov,.qsheet,.qsheet-ov{display:none}
@keyframes qsrise{from{transform:translateY(100%)}to{transform:none}}
/* feuille de création rapide — contenu */
.qs-grip{width:38px;height:4px;border-radius:2px;background:var(--line);margin:6px auto 10px}
.qs-title{font-family:var(--font-h),sans-serif;font-weight:600;font-size:1.15rem;margin-bottom:12px}
.qs-input{width:100%;border:1px solid var(--line);border-radius:12px;padding:13px 14px;font-size:1rem;
  background:var(--paper);outline:none;margin-bottom:16px}
.qs-input:focus{border-color:var(--accent)}
.qs-lab{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:8px}
.qs-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.qs-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:20px;
  padding:8px 14px;font-size:.88rem;font-weight:500;color:var(--ink);background:var(--paper)}
.qs-chip .pdot{width:9px;height:9px}
.qs-chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.qs-chip.on .pdot{box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.qs-proj.on{background:var(--pc,var(--accent));border-color:var(--pc,var(--accent))}
.qs-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px}
.qs-more{font-size:.9rem;font-weight:500;color:var(--muted);padding:8px 4px}
.qs-more:hover{color:var(--ink)}
.qs-add{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff;font-weight:600;
  font-size:.95rem;border-radius:12px;padding:12px 22px}
.qs-add svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.qs-add:disabled{opacity:.5}

@media (max-width:760px){
  /* ---- le volet devient un tiroir off-canvas ---- */
  aside.side{
    position:fixed;top:0;left:0;bottom:0;width:86%;max-width:340px;height:100%;
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;padding:22px 16px 16px;gap:4px;
    transform:translateX(-100%);transition:transform .28s cubic-bezier(.22,1,.36,1);z-index:46;overflow:hidden;
  }
  body.drawer-open aside.side{transform:none}
  .mdrawer-ov{display:block;position:fixed;inset:0;background:rgba(35,37,43,.42);z-index:45}
  .mdrawer-ov[hidden]{display:none}
  #mainscroll{margin-left:0;padding:66px 16px 86px}
  /* dans le tiroir : les 4 vues sont dans la barre du bas → on les masque ici */
  aside.side>#nav-views{display:none}
  .railtoggle{display:none}
  .navsec-proj{margin-top:8px}
  /* ---- barre du haut : marque (ouvre le menu) + bouton d'ajout ---- */
  .mtopbar{display:flex;position:fixed;top:0;left:0;right:0;z-index:44;height:52px;align-items:center;
    justify-content:space-between;padding:0 12px;background:var(--paper-2);border-bottom:1px solid var(--line)}
  .mtop-brand{display:flex;align-items:center;gap:8px;font-family:var(--font-h),sans-serif;font-weight:600;font-size:1.18rem;color:var(--ink)}
  .mtop-brand svg{width:26px;height:26px;flex:0 0 auto}
  .mtop-add{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;
    background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18);flex:0 0 auto}
  .mtop-add svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  /* ---- barre du bas : 4 vues ---- */
  .botbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--paper-2);
    border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .botbtn{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;
    color:var(--muted);font-size:.66rem;font-weight:600;border-radius:10px}
  .botbtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .botbtn.active{color:var(--accent)}
  .kbbtn{display:none}
  .dpanel{width:100%;min-width:0}
  /* pouls : une jauge par ligne, barres étirées, l'aveu revient à gauche */
  .pouls .psep{display:none}
  .pouls .pmeter{width:100%}
  .pouls .pmini{flex:1 1 auto;width:auto}
  .pouls .paveu{margin-left:0}
  .tacts{opacity:1}
  /* ---- feuille de création rapide ---- */
  .qsheet-ov{display:block;position:fixed;inset:0;background:rgba(35,37,43,.42);z-index:47}
  .qsheet-ov[hidden]{display:none}
  .qsheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:48;background:var(--card);
    border-radius:20px 20px 0 0;padding:6px 20px calc(18px + env(safe-area-inset-bottom));
    box-shadow:0 -12px 40px rgba(35,37,43,.24);animation:qsrise .26s cubic-bezier(.22,1,.36,1)}
  .qsheet[hidden]{display:none}
  /* ---- le tiroir ignore le mode rail (toujours déployé) ---- */
  body.side-collapsed aside.side{align-items:stretch;padding:22px 16px 16px;gap:4px}
  body.side-collapsed aside.side>.brand{flex-direction:row}
  body.side-collapsed aside.side>.brand .btxt{display:block}
  body.side-collapsed .searchbox{display:block}
  body.side-collapsed .railsearch{display:none}
  body.side-collapsed .navbtn{width:100%;height:auto;padding:8px 10px;justify-content:flex-start;gap:9px;position:relative}
  body.side-collapsed .navbtn .ntxt,body.side-collapsed .navbtn .cnt{display:block}
  body.side-collapsed .navbtn .cnt-dot{display:none}
  body.side-collapsed .navsec-proj{border-top:none;padding-top:0}
  body.side-collapsed #nav-projects{flex-direction:column;align-items:stretch;gap:0}
  body.side-collapsed .navbtn.pfilter{display:grid;grid-template-columns:12px minmax(0,1fr) 42px 42px 42px;padding:0 8px 0 10px}
  body.side-collapsed .plab.prow{display:grid}
  body.side-collapsed .navbtn.pfilter .pname{display:flex}
  body.side-collapsed .navbtn.pfilter .pcnt{display:flex}
  body.side-collapsed .navbtn.pfilter .pdot{width:10px;height:10px}
  body.side-collapsed .acctrow{width:100%;height:auto;padding:7px 8px;justify-content:flex-start}
  body.side-collapsed .acctrow .acctxt{display:flex}
  body.side-collapsed .acctrow .acctchev{display:block}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---- écran de connexion ---- */
.login-overlay{
  position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  background:var(--paper);padding:24px;
}
body.logged-out .login-overlay{display:flex}
body.logged-out aside.side,body.logged-out main{display:none}
.login-card{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);padding:38px 34px;max-width:400px;width:100%;text-align:center;
}
.login-card .lbrand{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:6px}
.login-card .lbrand svg{width:38px;height:38px}
.login-card h1{font-family:var(--font-h),sans-serif;font-weight:600;font-size:1.9rem}
.login-card .ltag{color:var(--muted);font-size:.9rem;margin-bottom:26px}
.login-card #gbtn{display:flex;justify-content:center;min-height:44px}
.login-card #dev-login{
  margin-top:8px;background:var(--accent);color:#fff;font-weight:600;font-size:.95rem;
  padding:11px 22px;border-radius:11px;
}
.login-card #dev-login:hover{filter:brightness(1.05)}
.login-card #login-err{color:var(--late);font-size:.85rem;margin-top:14px;min-height:1em}
.login-card .lnote{color:var(--muted);font-size:.78rem;margin-top:20px;line-height:1.5}
/* étape 4 : la bascule Se connecter / Créer un compte (le bouton Google est unique) */
.lmode{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;
  margin:14px 0 4px;background:var(--paper-2)}
.lmode-b{border-radius:999px;padding:6px 16px;font-size:.86rem;color:var(--muted)}
.lmode-b.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:var(--shadow-sm, 0 1px 2px rgba(0,0,0,.08))}
.lmodehint{font-size:.8rem;color:var(--muted);margin-bottom:12px}
/* lien magique : champ e-mail + bouton, puis séparateur « ou » avant Google */
.lemail{display:flex;flex-direction:column;gap:8px;margin:4px 0 0}
.lemail input{width:100%;border:1px solid var(--line);border-radius:11px;padding:11px 13px;
  background:var(--paper);color:var(--ink);font:inherit;font-size:.92rem;outline:none;text-align:center}
.lemail input:focus{border-color:var(--accent)}
.lemail button{background:var(--accent);color:#fff;font-weight:600;font-size:.95rem;
  padding:11px 22px;border-radius:11px}
.lemail button:hover{filter:brightness(1.05)}
.lemail button:disabled{opacity:.45;cursor:not-allowed;filter:none}
.lsent{font-size:.85rem;color:var(--accent);margin-top:10px;line-height:1.45}
/* page d'invitation : le bouton unique « S'inscrire et rejoindre » */
.linvbtn{width:100%;background:var(--accent);color:#fff;font-weight:600;font-size:.95rem;
  padding:12px 22px;border-radius:11px;margin-top:4px}
.linvbtn:hover{filter:brightness(1.05)}
.linvbtn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.lsep{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.8rem;margin:16px 0 14px}
.lsep::before,.lsep::after{content:'';flex:1;height:1px;background:var(--line)}
/* questionnaire d'inscription SUR la carte : verrouille le bouton tant qu'incomplet */
#signup-form{text-align:left;margin:6px 0 4px}
#signup-form .mfield{margin-bottom:12px}
.sf-hint{font-size:.8rem;color:var(--muted);margin:2px 0 10px;min-height:1.2em}
.gate-off{pointer-events:none;opacity:.45}
#dev-login:disabled{opacity:.45;cursor:not-allowed}
/* étape 4bis : questionnaire d'inscription (bloquant, une fois) */
.onb-overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:center;
  justify-content:center;background:color-mix(in srgb,var(--ink) 45%,transparent);
  padding:16px}
.onb-card{width:min(92vw,440px);background:var(--card);border-radius:16px;
  box-shadow:var(--shadow);padding:24px;max-height:90vh;overflow:auto}
.onb-t{font-weight:700;font-size:1.15rem}
.onb-s{color:var(--muted);font-size:.88rem;margin:4px 0 18px}
.onb-err{color:var(--warn);font-size:.84rem;min-height:1.2em;margin:6px 0 10px}
.sidefoot #btn-logout{color:var(--muted)}

/* ============ recherche (barre latérale) ============ */
.searchbox{position:relative;margin:12px 4px 2px}
.searchbox input{width:100%;border:1px solid var(--line);border-radius:9px;padding:7px 30px 7px 30px;background:var(--paper);outline:none;font-size:.88rem}
.searchbox input:focus{border-color:var(--accent)}
.searchbox input::-webkit-search-decoration,.searchbox input::-webkit-search-cancel-button{display:none}
.searchbox .qico{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round}
.searchbox .qclear{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:6px;color:var(--muted);display:none;align-items:center;justify-content:center;font-size:.8rem}
.searchbox.has .qclear{display:flex}
.searchbox .qclear:hover{background:rgba(128,128,128,.18);color:var(--ink)}
body.side-collapsed .searchbox{display:none}

/* barre de filtres (vue recherche) */
.filterbar{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 18px}
.filterbar .fchip{font-size:.8rem;border:1px solid var(--line);border-radius:20px;padding:4px 13px;background:var(--card);color:var(--muted);font-weight:500}
.filterbar .fchip:hover{border-color:var(--accent);color:var(--ink)}
.filterbar .fchip.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* barre de filtre « faisable maintenant » (vue Jour) : deux axes sur une ligne,
   d'où les intitulés et le séparateur — sans eux, « Léger » et « bureau » se
   liraient comme une seule série de puces */
.fbar-day{align-items:center;margin:14px 0 16px}
.fbar-l{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-right:2px}
.fbar-sep{width:1px;height:18px;background:var(--line);margin:0 6px}
.fbar-cnt{font-size:.78rem;color:var(--muted);margin-left:auto}


/* section repliable (Terminé) */
.sec.collapsible>.sec-h{cursor:pointer;user-select:none}
.sec.collapsible>.sec-h .caret{color:var(--muted);font-size:.7rem;transition:transform .2s;display:inline-block}
.sec.collapsed>.sec-h .caret{transform:rotate(-90deg)}
.sec.collapsed>.task{display:none}

/* menu report express */
.rmenu{position:fixed;z-index:70;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 34px rgba(0,0,0,.22);padding:6px;min-width:200px}
.rmenu button{display:flex;width:100%;justify-content:space-between;gap:14px;align-items:center;padding:8px 12px;border-radius:8px;font-size:.88rem;color:var(--ink);text-align:left}
.rmenu button:hover{background:var(--accent-soft)}
.rmenu button .rd{font-size:.76rem;color:var(--muted);white-space:nowrap}
.rmenu button:hover .rd{color:var(--accent)}

/* ============ mode sombre ============ */
:root[data-theme="dark"]{
  --paper:#17191A;
  --paper-2:#202324;
  --card:#22423A;              /* DS sombre */
  --card-done:#1B1E1E;
  --ink:#EAF3EE;               /* DS sombre */
  --muted:#948F81;
  --line:#33373A;
  --accent:var(--brand);
  --accent-soft:#22322E;
  --doing:#E0A94A;
  --late:var(--urgence);
  --late-soft:var(--urgence-surface);
  --warn:#D19A5A;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.35);

  /* DS — sombre. Mêmes omissions volontaires qu'en clair : --card / --paper /
     --ink / --accent restent hérités ci-dessus jusqu'à la migration de leurs
     consommateurs. --mint est identique dans les deux thèmes (défini en clair). */
  --green-deep:#0C221C; --green-rail:#12302A;
  --desk:#0E241E; --band-top:#12302A; --card-hi:#2A5245;
  --inset:#1B3A32; --inset-green:#1F4238;
  --zone:#16342C; --zone-2:#20463C; --grid-empty:#193B32;
  --heat-1:#193B32; --heat-2:#24564A; --heat-3:#2F7365; --heat-4:#3D9080; --heat-5:#4FAE99;
  --brand:#35836F; --brand-hover:#3A8073;
  --text-strong:#EAF3EE; --text:#C3D6CE; --text-muted:#7F9A90; --text-muted-warm:#9FBEB3;
  --cote:#A6C4B9;                    /* ≥ 4,69:1 sur les fonds sombres */
  --urgence:#E0673F; --urgence-text:#E8836A; --urgence-surface:#3A211B; --success-surface:#274F41;
  --p01:#7FA6CC;--p02:#86C098;--p03:#78BDB4;--p04:#C9A85E;--p05:#93A6C4;
  --p06:#A6BE7E;--p07:#C295A2;--p08:#86BECC;--p09:#C79C6E;--p10:#AAC4AD;
  --p11:#A2AEC6;--p12:#97B58E;--p13:#D0B274;--p14:#B2A0C9;
  --on-tint:#0C221C;                 /* 3,67:1 au pire sur la gamme sombre */
  --seat:50%;
}
:root[data-theme="dark"] .tnote code,:root[data-theme="dark"] .rte code{color:#7FD3BE}
:root[data-theme="dark"] .rtb button:hover{background:rgba(255,255,255,.08)}
:root[data-theme="dark"] .rtb select,:root[data-theme="dark"] .swpop{background:var(--card)}
:root[data-theme="dark"] .swpop button.none{color:var(--muted)}
:root[data-theme="dark"] .rtb .b-H{color:#23252B}
:root[data-theme="dark"] .seg button.on[data-s=todo]{background:#4A4E52;border-color:#4A4E52;color:#fff}
:root[data-theme="dark"] .task.done{opacity:.5}
:root[data-theme="dark"] .doverlay{background:rgba(0,0,0,.5)}

@media (max-width:760px){
  .searchbox{flex:1 0 100%;margin:6px 0 0}
}

/* ============ glisser-déposer + kanban ============ */
.task{position:relative}
.grip{
  position:absolute;left:-17px;top:0;bottom:0;width:17px;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);opacity:0;cursor:grab;font-size:1rem;line-height:1;
  user-select:none;touch-action:none;
}
.task:hover .grip{opacity:.55}
.grip:hover{opacity:1}
.grip:active{cursor:grabbing}
.task.dragging{opacity:.4}
#main.cards .grip{position:static;width:100%;height:16px;opacity:.4;left:auto}
[data-drop].dragover{outline:2px dashed var(--accent);outline-offset:3px;border-radius:14px;background:color-mix(in srgb,var(--accent) 7%,transparent)}
.agday.dragover{outline-offset:0}

/* ===== agenda du jour : rail « à placer » + grille horaire =====
   Le rail et la grille partagent l'échelle (1 min = 1 px, posée en JS) : une
   tâche de 4 h fait la même hauteur des deux côtés. C'est ce qui permet de voir
   que la pile déborde AVANT d'avoir posé quoi que ce soit. */
.ag{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px;align-items:start;margin-top:4px}
.ag-rail{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:10px;min-height:120px}
.ag-rail-h{font-size:.75rem;color:var(--muted);font-weight:600;margin:2px 4px 10px}
.ag-rail-vide{font-size:.8rem;color:var(--muted);padding:6px 4px}
.ag-rail-list{display:block}
.ag-rail-sep{border-top:1px solid var(--line);margin:12px 0 10px}
/* le rail fait 190 px : le bouton ne tient pas à côté du libellé sans le casser
   en deux lignes — il passe donc dessous, sur toute la largeur */
.ag-rail-h.late{color:var(--late);white-space:nowrap}
.ag-late-all{display:block;width:100%;margin-top:6px;font-size:.66rem;font-family:inherit;
  color:var(--muted);background:none;border:1px solid var(--line);border-radius:7px;
  padding:3px 6px;cursor:pointer}
.ag-late-all:hover{border-color:var(--accent);color:var(--accent)}
/* en retard : hauteur libre, pas proportionnelle — ces tâches ne sont pas
   (encore) de cette journée, leur donner du poids ici mentirait sur la charge */
.ag-chip.mini{height:auto}
/* Teintes des blocs — assez franches pour que la couleur de projet se lise d'un
   coup d'œil, jamais assez pour exiger du texte blanc : la palette va du jaune
   (#E2A63D) au violet, du blanc dessus serait illisible sur la moitié. On teinte
   donc le fond ET le texte de la MÊME couleur, l'un vers le papier, l'autre vers
   l'encre — le contraste tient sur les 12 couleurs, en clair comme en sombre. */
.ag-chip{
  background:color-mix(in srgb,var(--pc) 30%,var(--card));
  border:1px solid color-mix(in srgb,var(--pc) 62%,var(--card));
  color:color-mix(in srgb,var(--pc) 26%,var(--ink));
  border-radius:8px;padding:5px 8px;margin-bottom:6px;overflow:hidden;cursor:grab;
  display:flex;flex-direction:column;gap:1px;box-sizing:border-box;
}
/* sans durée : pas de hauteur honnête à donner — le pointillé le dit */
.ag-chip.flou{border-style:dashed;background:var(--card)}
.ag-chip.done,.ag-bloc.done{opacity:.5}
.ag-chip.done .ag-t,.ag-bloc.done .ag-t{text-decoration:line-through}
.ag-chip.dragging,.ag-bloc.dragging{opacity:.4}
/* clone qui suit le doigt pendant un glisser tactile — légèrement soulevé pour
   qu'on voie qu'il a quitté sa place */
/* le clone qui suit le doigt se distingue par l'ÉCHELLE, pas par une ombre */
.ag-vol{transform:scale(1.06);opacity:.92}
/* le texte hérite de la teinte du bloc (color-mix ci-dessus), il n'est pas gris */
.ag-t{font-size:.78rem;line-height:1.25;color:inherit;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-h{font-size:.66rem;color:inherit;opacity:.72;white-space:nowrap}

/* le rembourrage évite que les libellés des heures extrêmes (08:00, 20:00),
   centrés sur leur trait, soient rognés par le bord de la boîte */
.ag-grille{border:1px solid var(--line);border-radius:14px;background:var(--card);
  padding:12px 10px 12px 50px}
.ag-corps{position:relative}
.ag-ligne{position:absolute;left:0;right:0;height:1px;background:var(--line)}
.ag-lab{position:absolute;left:-46px;width:38px;text-align:right;transform:translateY(-50%);
  font-size:.66rem;color:var(--muted);font-variant-numeric:tabular-nums}
.ag-blocs{position:absolute;inset:0}
/* le bloc porte plus fort que la pastille du rail : c'est un engagement posé,
   pas une intention en attente */
.ag-bloc{
  position:absolute;box-sizing:border-box;overflow:hidden;cursor:grab;
  background:color-mix(in srgb,var(--pc) 38%,var(--card));
  border:1px solid color-mix(in srgb,var(--pc) 72%,var(--card));
  color:color-mix(in srgb,var(--pc) 30%,var(--ink));
  border-radius:7px;padding:3px 7px;display:flex;flex-direction:column;gap:1px;
}
.ag-bloc.rz{cursor:ns-resize;border-color:var(--pc)}
/* trop plat pour deux lignes : l'heure se masque… mais réapparaît pendant qu'on
   étire (.rz), sinon on redimensionnerait à l'aveugle */
.ag-bloc.court{padding:1px 7px;justify-content:center}
.ag-bloc.court .ag-t{font-size:.7rem}
.ag-bloc.court .ag-h{display:none}
.ag-bloc.court.rz{justify-content:flex-start;padding:3px 7px}
.ag-bloc.court.rz .ag-h{display:block}
/* poignée de redimensionnement : touch-action none, sinon le navigateur
   s'approprie le geste vertical pour faire défiler la page */
.ag-poignee{position:absolute;left:0;right:0;bottom:0;height:7px;cursor:ns-resize;touch-action:none}
.ag-poignee::after{content:'';position:absolute;left:50%;bottom:2px;width:18px;height:2px;
  transform:translateX(-50%);border-radius:2px;background:currentColor;opacity:0;transition:opacity .12s}
.ag-bloc:hover .ag-poignee::after{opacity:.45}
.ag-now{position:absolute;left:0;right:0;height:2px;background:var(--late);z-index:2}
.ag-now::before{content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;
  border-radius:50%;background:var(--late)}
.ag-grille.dragover{border-color:var(--accent)}
.ag-rail.dragover{border-color:var(--accent)}
/* aimant : le créneau visé pendant le glisser, avec l'heure d'arrivée —
   on lit où l'on va AVANT de lâcher */
.ag-fantome{position:absolute;left:0;right:0;background:color-mix(in srgb,var(--accent) 14%,var(--card));
  border:1px dashed var(--accent);border-radius:7px;pointer-events:none;z-index:1;
  font-size:.66rem;color:var(--accent);font-weight:600;padding:2px 7px;
  font-variant-numeric:tabular-nums;overflow:hidden}

/* ===== Semaine : 7 colonnes d'heures =====
   Les 3 rangées (en-têtes, bandeaux, grille) partagent la MÊME grille de
   colonnes : la gouttière des heures + 7 jours. C'est ce qui garde les colonnes
   alignées sans mesurer quoi que ce soit en JS. */
/* Le nombre de colonnes suit les jours OUVERTS (réglage « Plages horaires ») :
   une grille figée à 7 pistes laisserait un vide à droite dès qu'un jour est
   fermé. --wkcols est posé sur .wk au rendu. */
.wk{margin-top:4px}
.wk-row{display:grid;grid-template-columns:46px repeat(var(--wkcols,7),minmax(0,1fr));gap:6px}
.wk-gut{min-width:0}
.wk-heads{margin-bottom:6px}
.wk-dh{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 2px;
  border-radius:var(--r-9);cursor:pointer;user-select:none}
.wk-dh:hover{background:var(--zone-2)}
.wk-dh.auj .wk-wd{color:var(--brand)}

.wk-bands{margin-bottom:6px;align-items:start}
.wk-gut-lab{text-align:right;padding-top:6px}
.wk-band{border-radius:var(--r-9);padding:4px;display:flex;flex-direction:column;gap:var(--sp-4)}
.wk-band.dragover{outline:2px solid var(--brand);outline-offset:-2px}

.wk-grid{align-items:start}
.wk-hours{position:relative}
.wk-lab{position:absolute;right:4px;transform:translateY(-50%);font-size:var(--fs-micro);
  color:var(--text-muted);font-variant-numeric:tabular-nums}
.wk-col{position:relative;overflow:hidden}
.wk-col.dragover{outline:2px solid var(--brand);outline-offset:-2px}
/* dans une colonne étroite, l'heure ne tient pas : le titre prime, le survol dit le reste */
.wk-col .ag-bloc{padding:2px 4px}
.wk-col .ag-t{font-size:var(--fs-caption)}
.wk-col .ag-h{display:none}
.wk-col .ag-bloc.rz .ag-h{display:block;font-size:var(--fs-micro)}

/* ===== agenda & semaine sur mobile =====
   Deux piliers du bureau tombent ici : la hauteur proportionnelle du rail
   (7 h = 420 px avant même de voir la grille) et les 7 colonnes (50 px chacune).
   On les remplace, on ne les rétrécit pas. */
@media (max-width:760px){
  /* le rail passe AU-DESSUS, en ruban horizontal : empilé il repousserait la
     grille hors de l'écran — le défaut corrigé pour les tâches en retard */
  .ag{grid-template-columns:minmax(0,1fr);gap:10px}
  .ag-rail{padding:8px 10px}
  .ag-rail-list{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .ag-rail-list .ag-chip{flex:0 0 auto;width:150px;margin-bottom:0;scroll-snap-align:start;
    /* la hauteur proportionnelle est posée en style inline par le rendu :
       seule !important peut la neutraliser ici. Le poids passe du pixel au
       texte (« 4 h », déjà dans la pastille) — c'est le choix assumé du mobile. */
    height:auto!important}
  .ag-rail-vide{white-space:nowrap}
  .ag-late-all{width:auto;display:inline-block;margin:0 0 0 8px}
  .ag-rail-h.late{display:flex;align-items:center}

  /* Semaine : 3 jours visibles, on balaie pour le reste. Les 3 rangées gardent
     la MÊME largeur de colonne, sinon les en-têtes se décaleraient de la grille
     pendant le défilement. */
  .wk{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .wk-row{grid-template-columns:36px repeat(var(--wkcols,7),minmax(104px,1fr));min-width:0}
  .wk-lab{font-size:var(--fs-micro)}
  .wk-dn{font-size:var(--fs-body-lg)}
}
.kcol{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:10px}
.kcol-h{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;margin:2px 4px 10px}
.kcol-h .kdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.kcol-h .kn{margin-left:auto;font-size:.75rem;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.kcol.todo .kdot{background:var(--muted)}
.kcol.doing .kdot{background:var(--doing)}
.kcol.done .kdot{background:var(--accent)}
.kcol.doing .kcol-h{color:var(--doing)}
.kcol.done .kcol-h{color:var(--accent)}
.kcol-body{min-height:56px}
.kcol .task{box-shadow:none;margin-bottom:8px;margin-left:0}
.kcol .task:last-child{margin-bottom:0}
.kcol .grip{left:auto;right:4px;top:8px;bottom:auto;height:16px}
.kcol .tnote,.kcol .notetoggle{display:none}
/* Dans une colonne étroite, les actions mangeaient le titre : invisibles, elles
   occupaient quand même leur place dans le flux (~150 px sur 230), et le titre se
   cassait mot par mot. Elles sortent donc du flux et se posent en bas de la carte,
   dont le padding leur réserve la hauteur — réservée TOUJOURS, pas au survol,
   sinon la carte sauterait sous le curseur. La poignée de glisser occupe déjà le
   coin haut droit (.kcol .grip). */
.kcol .task{padding-bottom:36px}
.kcol .tacts{position:absolute;right:6px;bottom:5px;margin:0;opacity:0}
.kcol .task:hover .tacts{opacity:1}
.kempty{color:var(--muted);font-size:.8rem;text-align:center;padding:18px 0;font-style:italic;border:1.5px dashed var(--line);border-radius:10px}
/* Les 3 colonnes CÔTE À CÔTE — sans quoi le kanban n'est qu'une liste à en-têtes.
   Règle perdue par accident au commit c8a8b22 (chantier mobile) : seule la règle
   mobile ci-dessous avait survécu, ce qui la neutralisait à toutes les largeurs. */
.kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start;margin-top:4px}
@media (max-width:900px){ .kanban{grid-template-columns:1fr} }

/* ============ calendrier mensuel ============ */
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:10px 0 6px}
.cal-wd{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;font-weight:700}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-cell{
  min-height:94px;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:6px 6px 6px;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;gap:3px;
  transition:border-color .15s,background .15s;box-shadow:var(--shadow);
}
.cal-cell:hover{border-color:var(--accent)}
.cal-cell.other{background:transparent;border-color:transparent;box-shadow:none}
.cal-cell.other .cal-d{opacity:.4}
.cal-cell.other .cal-chip{opacity:.5}
.cal-cell.today{border-color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.cal-d{display:flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--ink)}
.cal-cell.today .cal-d{color:var(--accent)}
.cal-n{margin-left:auto;font-size:.6rem;font-weight:700;background:var(--accent);color:#fff;border-radius:20px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.cal-chip{
  font-size:.66rem;line-height:1.35;padding:1px 5px;border-radius:5px;
  background:color-mix(in srgb,var(--pc) 16%,var(--card));color:var(--ink);
  border-left:2px solid var(--pc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cal-chip.done{text-decoration:line-through;opacity:.55}
.cal-chip[draggable=true]{cursor:grab}
.cal-chip.dragging{opacity:.4}
.cal-more{font-size:.62rem;color:var(--muted);font-weight:600;padding-left:2px}
@media (max-width:760px){
  .cal-cell{min-height:58px;padding:4px}
  .cal-chip{display:none}
  .cal-n{margin-left:auto}
}

/* ============ priorité + étiquettes ============ */
.prio{font-size:.86rem;line-height:1;flex:0 0 auto}
.prio.p1{color:var(--doing)}
.prio.p2{color:var(--late)}
.task.p2{border-left-color:var(--pc)}
.tacts .prio-btn{color:var(--muted)}
.task.p1 .tacts .prio-btn{color:var(--doing);opacity:1}
.task.p2 .tacts .prio-btn{color:var(--late);opacity:1}
.lchip{
  font-size:.68rem;font-weight:600;color:var(--muted);background:var(--paper-2);
  border:1px solid var(--line);border-radius:20px;padding:0 8px;cursor:pointer;line-height:1.6;
}
.lchip::before{content:"#";opacity:.5;margin-right:1px}
.lchip:hover{border-color:var(--accent);color:var(--accent)}
.cal-chip .prio{display:none}

/* priorité : couleurs du segment */
.seg button.on[data-p="0"]{background:var(--muted);border-color:var(--muted);color:#fff}
.seg button.on[data-p="1"]{background:var(--doing);border-color:var(--doing);color:#fff}
.seg button.on[data-p="2"]{background:var(--late);border-color:var(--late);color:#fff}

/* champ étiquettes (tag input) */
.tagbox{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid var(--line);border-radius:9px;padding:6px 8px;background:var(--paper)}
.tagbox:focus-within{border-color:var(--accent)}
.tagbox .tags{display:flex;flex-wrap:wrap;gap:6px}
.tagbox .tag{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:600;background:var(--accent-soft);color:var(--accent);border-radius:20px;padding:2px 4px 2px 10px}
.tagbox .tag button{width:17px;height:17px;border-radius:50%;color:var(--accent);font-size:.68rem;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.tagbox .tag button:hover{background:rgba(0,0,0,.12)}
.tagbox input{flex:1;min-width:120px;border:none;background:transparent;outline:none;padding:2px 0;font-size:.9rem}

/* ============ Lot 4 : checklist · récurrence · assignation · capture ============ */
.who{width:19px;height:19px;border-radius:50%;background:var(--accent);color:#fff;font-size:.64rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.who:hover{filter:brightness(1.1)}
.recur{color:var(--muted);font-size:.84rem}
.ckcount{font-size:.7rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}

.checklist{margin-top:6px;display:flex;flex-direction:column;gap:2px}
.ck{display:flex;align-items:flex-start;gap:7px;font-size:.82rem;color:var(--ink);cursor:pointer;line-height:1.4}
.ck input{margin-top:2px;accent-color:var(--accent);cursor:pointer;flex:0 0 auto}
.ck.on span{text-decoration:line-through;color:var(--muted)}
#main.cards .checklist,.kcol .checklist{display:none}
.task.done .checklist{display:none}

.checkedit{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.ckrow{display:flex;align-items:center;gap:8px}
.ckrow input[type=checkbox]{accent-color:var(--accent);flex:0 0 auto;width:16px;height:16px}
.ckrow .cktext{flex:1;border:1px solid var(--line);border-radius:8px;padding:6px 9px;background:var(--paper);outline:none}
.ckrow .cktext:focus{border-color:var(--accent)}
.ckrow .ckrm{width:24px;height:24px;border-radius:6px;color:var(--muted);flex:0 0 auto;font-size:.75rem}
.ckrow .ckrm:hover{background:var(--late-soft);color:var(--late)}
.subadd{width:100%;border:1px dashed var(--line);border-radius:8px;padding:7px 9px;background:transparent;outline:none;font-size:.88rem}
.subadd:focus{border-color:var(--accent);border-style:solid}

/* note d'explication (corbeille) */
.inbox-hint{font-size:.85rem;color:var(--muted);margin:2px 0 14px;max-width:60ch}

/* ============ modales maison ============ */
.uimodal-ov{
  /* AU-DESSUS de l'écran de connexion (z-index:100) : une modale ouverte
     depuis la carte de login s'affichait DERRIÈRE elle — clic sans effet,
     puis fenêtre orpheline après connexion. */
  position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;
  background:rgba(35,37,43,.45);padding:20px;opacity:0;transition:opacity .18s;
}
.uimodal-ov.show{opacity:1}
:root[data-theme="dark"] .uimodal-ov{background:rgba(0,0,0,.55)}
.uimodal{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.35);max-width:460px;width:100%;padding:22px 24px;
  transform:translateY(10px) scale(.98);transition:transform .18s cubic-bezier(.22,1,.36,1);
}
.uimodal-ov.show .uimodal{transform:none}
.uimodal h3{font-family:var(--font-h),sans-serif;font-weight:600;font-size:1.18rem;margin-bottom:8px}
.uimodal .um-msg{font-size:.92rem;color:var(--muted);line-height:1.55;margin-bottom:16px}
.uimodal .um-msg b{color:var(--ink)}
.uimodal .um-field{margin:0 0 16px}
.uimodal select{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  background:var(--paper);color:var(--ink);font-size:.9rem;outline:none;
}
.uimodal select:focus{border-color:var(--accent)}
.uimodal .um-acts{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.uimodal .um-acts button{
  padding:9px 16px;border-radius:9px;font-weight:600;font-size:.87rem;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
}
.uimodal .um-acts button:hover{border-color:var(--accent)}
.uimodal .um-acts button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.uimodal .um-acts button.danger{background:var(--late);border-color:var(--late);color:#fff}
.uimodal .um-acts button.danger:hover,.uimodal .um-acts button.primary:hover{filter:brightness(1.08);border-color:transparent}
.uimodal .um-acts button.ghostb{border:none;background:none;color:var(--muted);font-weight:500}
.uimodal .um-acts button.ghostb:hover{color:var(--ink)}
@media (max-width:520px){ .uimodal .um-acts{flex-direction:column-reverse} .uimodal .um-acts button{width:100%} }

/* ---- champs personnalisés ---- */
/* saisie (volet) */
.cfbox{display:flex;flex-direction:column;gap:9px}
.cfrow{display:flex;align-items:center;gap:10px}
.cfl{flex:0 0 33%;font-size:.8rem;color:var(--muted);font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfrow input,.cfrow select{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;
  padding:7px 9px;background:var(--paper);outline:none;color:var(--ink);font-size:.88rem;font-family:inherit}
.cfrow input:focus,.cfrow select:focus{border-color:var(--accent)}
/* définition (modale) */
.cflist{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;max-height:46vh;overflow-y:auto}
.cfdef{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cfdef-l{flex:1 1 40%;min-width:110px}
.cfdef-t{flex:0 0 auto}
.cfdef-o{flex:1 1 100%}
.cfdef input,.cfdef select{border:1px solid var(--line);border-radius:8px;padding:7px 9px;
  background:var(--paper);outline:none;color:var(--ink);font-size:.86rem;font-family:inherit}
.cfdef input:focus,.cfdef select:focus{border-color:var(--accent)}
.cfdef-x{flex:0 0 auto;width:28px;height:28px;border-radius:8px;color:var(--muted)}
.cfdef-x:hover{background:var(--late-soft);color:var(--late)}
.cfempty{font-size:.86rem;color:var(--muted);font-style:italic;padding:8px 2px}

/* ---- membres & invitations (collaboration) ---- */
.memrow{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line)}
.memrow:last-child{border-bottom:none}
/* ⚠️ Une initiale est du TEXTE sur une couleur d'entité : ni #fff (la gamme
   sombre est claire) ni --on-tint (3,1:1, que le skill réserve aux icônes et aux
   aplats) ne tiennent AA. La teinte `--av` est donc ASSISE sous une encre
   blanche — même recette que --hc-deep et que l'avatar des filtres. */
.mav{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 auto;
  border-radius:50%;background:color-mix(in srgb, var(--av, var(--brand)) var(--seat), var(--green-deep));
  color:var(--on-brand);font-size:.8rem;font-weight:600;overflow:hidden}
/* ⚠️ AUCUNE règle sombre ici : l'assise passe par `--seat`, si bien que cette
   déclaration reste à 0,1,0 et que TOUTE variante à fond fixe déclarée plus bas
   (`.mav-ghost`, `.mav-more`, `.mav-none`, `.tm-hav-more`…) la bat sans qu'on ait
   à tenir une liste `:not()` — celle-ci avait déjà oublié le badge « +N » du
   héros Équipe, qui perdait son fond en thème sombre. */
.mav img{width:100%;height:100%;object-fit:cover;border-radius:50%}
/* ⚠️ encre --text et non --muted : sur ces aplats en creux, --muted ne tient que
   3,85:1 en clair — or une initiale, un « +n » et un « ? » sont du TEXTE. */
.mav-ghost{background:var(--card-done);color:var(--text);border:1.5px dashed var(--muted)}
.memwho{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:1px}
.memwho b{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.memyou{font-weight:400;color:var(--muted);font-size:.8rem}
.memmail{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.memmail-in{border:1px dashed var(--line);border-radius:7px;padding:3px 7px;background:var(--paper);
  font-size:.78rem;color:var(--ink);outline:none;max-width:220px}
.memmail-in:focus{border-color:var(--accent)}
.membadge{flex:0 0 auto;font-size:.68rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  border-radius:6px;padding:2px 7px}
.membadge.wait{background:var(--inset);color:var(--warn)}
/* inviter depuis les réglages projet : une adresse, l'e-mail part tout seul */
/* NB : .meminvite / input / input:focus sont définis plus bas (bloc canonical) ;
   ici on ne garde que la règle unique du bouton. */
.meminvite button{flex:0 0 auto}
.memrole,.uimodal select.memrole{flex:0 0 auto;width:auto;border:1px solid var(--line);
  border-radius:8px;padding:4px 6px;background:var(--paper);font-size:.8rem;color:var(--ink);outline:none}
.memrole:focus{border-color:var(--accent)}
.memact{flex:0 0 auto;width:28px;height:28px;border-radius:8px;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;font-size:.85rem}
.memact:hover{background:var(--accent-soft);color:var(--ink)}
.memact[data-memdel]:hover{background:var(--late-soft);color:var(--late)}
.meminvite{display:flex;gap:8px;margin-top:10px}
.meminvite input{flex:1;border:1px solid var(--line);border-radius:8px;padding:7px 9px;
  background:var(--paper);outline:none;color:var(--ink);font-size:.86rem}
.meminvite input:focus{border-color:var(--accent)}

/* avatars sur les cartes & dans le volet tâche */
.mav-xs{width:20px;height:20px;font-size:.62rem}
.avstack{display:inline-flex;align-items:center}
/* liseré de séparation des avatars empilés : un OUTLINE, pas une ombre portée
   (interdit du skill §5) — même rendu, même absence d'effet sur la mise en page */
.avstack .mav{outline:2px solid var(--card)}
.avstack .mav+.mav,.avstack .mav+.mav-more{margin-left:-6px}
.mav-more{background:var(--paper-2);color:var(--text);font-size:.58rem}
.mav-none{background:var(--card-done);color:var(--text)}
.who.avwrap{background:none;border:none;padding:0;width:auto;height:auto}
#f-assignee .memopt{display:inline-flex;align-items:center;gap:6px}
#f-assignee .memopt .mav{flex:0 0 auto}

/* avancement par membre (détail d'un projet partagé) */
.mprogress{margin:10px 0 4px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:4px 14px}
.mprow{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.mprow:last-child{border-bottom:none}
.mpname{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mpname .memyou{font-weight:400}
.mpnone{color:var(--muted);font-weight:400}
.mpcnt{margin-left:auto;color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums;white-space:nowrap}

/* réglage admin-appli : ouverture des inscriptions (deux cartes-radio) */
#adm-opts{display:flex;flex-direction:column;gap:10px}
.admopt{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;cursor:pointer;
  border:1px solid var(--line);border-radius:12px;background:var(--card)}
.admopt.on{border-color:var(--accent);background:var(--accent-soft)}
.admopt input{margin-top:4px;accent-color:var(--accent);flex:0 0 auto}
.admopt b{display:block;font-size:.92rem;margin-bottom:2px}


/* badge « partagé » dans le volet + le détail projet */
.pshared{flex:0 0 auto;display:inline-flex;color:var(--muted);opacity:.8;margin-left:2px}
.pshared svg{width:13px;height:13px;fill:currentColor}
.chbadge.shared{background:var(--accent-soft);color:var(--accent)}

/* carte de login : bloc d'invitation */
#invite-box{margin:6px 0 10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--paper-2);text-align:left}
.invtitle{font-weight:600;font-size:.98rem;margin-bottom:4px}
.invhint{font-size:.84rem;color:var(--muted);margin-top:3px}
.invwarn{color:var(--warn)}
/* message personnalisé de l'invitant, sur la page du lien (refonte v2) */
.invmsg{margin:8px 0 4px;padding:8px 12px;border-left:3px solid var(--accent);
  background:var(--accent-soft);border-radius:0 8px 8px 0;font-size:.88rem;
  white-space:pre-line}

/* ---- limites WIP : la colonne DIT qu'elle déborde, elle ne bloque rien
   (même registre que la jauge du jour) ---- */
.kcol-h .kn.over{color:var(--late)}
.kcol.wip-over{border-color:var(--late);background:var(--late-soft)}

/* ---- couloirs (swimlanes) ---- */
.swimbar{display:flex;align-items:center;gap:8px;margin:2px 0 14px;flex-wrap:wrap}
.swimbar .seg button{padding:5px 11px;font-size:.78rem}
.swim{margin-bottom:18px}
/* pastille ronde et non filet latéral : c'est la convention de Lodenn pour une
   couleur de projet (.pdot dans le volet, .kdot dans le kanban) */
.swim-h{display:flex;align-items:center;gap:8px;margin:0 2px 8px}
.swim-h::before{content:"";width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  background:var(--pc, var(--line))}
.swim-n{font-weight:600;font-size:.92rem}
.swim-c{font-size:.75rem;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}

/* ============ minuteur & pomodoro ============ */
/* En bas à DROITE, et non au centre comme le toast (z-index 70) et #selbar (60) :
   le minuteur reste affiché longtemps, il ne doit disputer la place à personne. */
.tmr{
  position:fixed;right:18px;bottom:18px;z-index:55;
  display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:9px 12px 9px 16px;box-shadow:0 14px 44px rgba(0,0,0,.22);
  max-width:min(92vw, 380px);
}
.tmr.pause{background:var(--accent-soft);border-color:var(--accent)}
.tmr-time{font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent);flex:0 0 auto}
.tmr.pause .tmr-time{color:var(--accent)}
.tmr-info{min-width:0;display:flex;flex-direction:column;line-height:1.25}
.tmr-ttl{font-size:.86rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.tmr-ttl:hover{color:var(--accent)}
.tmr-sub{font-size:.72rem;font-weight:600;color:var(--pc, var(--muted))}
.tmr-pause{font-size:.9rem;line-height:1;color:var(--muted);padding:5px 7px;flex:0 0 auto;border-radius:8px}
.tmr-pause:hover{background:var(--accent-soft);color:var(--accent)}
/* Un chrono gelé doit se voir sans lire l'icône : le temps s'éteint, le cadre
   perd son accent. Sinon « en pause » et « ça tourne » se ressemblent trop. */
.tmr.gele{border-style:dashed}
.tmr.gele .tmr-time{opacity:.45}
.tmr.gele .tmr-pause{color:var(--accent)}
.tmr-pomo{font-size:.72rem;font-weight:600;color:var(--muted);border:1px solid var(--line);
  border-radius:20px;padding:3px 9px;flex:0 0 auto}
.tmr-pomo.on{background:var(--accent);border-color:var(--accent);color:#fff}
.tmr-stop{font-size:.8rem;font-weight:600;color:var(--late);padding:4px 8px;flex:0 0 auto}
.tmr-stop:hover{background:var(--late-soft);border-radius:8px}
/* la barre du bas (mobile) recouvre les ~60 derniers px */
@media (max-width:860px){ .tmr{right:10px;left:10px;bottom:74px;max-width:none} }

/* ---- zone de temps de la carte : estimé · réel · bouton chrono, TOUJOURS
   visible (contrairement aux actions de survol .tacts). C'est ce qui rend le
   suivi du temps lisible d'un coup d'œil. ---- */
.ttime{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-top:1px}
.tz-est{font-size:.72rem;color:var(--muted);white-space:nowrap}
.tz-real{font-size:.92rem;font-weight:700;color:var(--ink);white-space:nowrap;
  font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:5px}
/* le réel a dépassé l'estimé : information, pas faute — teinte « retard », pas de
   fond plein */
.tz-real.over{color:var(--late)}
/* la tâche mesurée en direct : accent + pastille qui bat → on repère LAQUELLE
   tourne parmi plusieurs en cours */
.tz-real.run{color:var(--accent)}
.tz-real.run::before{content:'';width:7px;height:7px;border-radius:50%;
  background:var(--accent);animation:sp-pulse 1.4s ease-in-out infinite}
@keyframes sp-pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){ .tz-real.run::before{animation:none} }
.tz-btn{width:32px;height:32px;flex:0 0 auto;border:1px solid var(--line);
  border-radius:9px;color:var(--muted);display:flex;align-items:center;
  justify-content:center;font-size:.9rem;line-height:1;transition:.15s}
.tz-btn:hover{background:var(--paper-2);color:var(--accent);border-color:var(--accent)}
/* mesurée maintenant : bouton plein d'accent (⏸) ; mesurée mais en pause : contour
   d'accent, plus sobre (▶) */
.tz-btn.run{background:var(--accent);border-color:var(--accent);color:#fff}
.tz-btn.paused{color:var(--accent);border-color:var(--accent)}
@media (max-width:560px){ .tz-est{display:none} }

/* ---- étalement des retards : aperçu AVANT d'agir (dans la modale) ---- */
.spr{margin-bottom:18px}
.spr-head{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:9px}
.spr-day{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:.88rem}
.spr-date{font-weight:600;min-width:5.5em}
.spr-n{color:var(--muted)}
.spr-load{margin-left:auto;font-size:.8rem;color:var(--muted)}
/* l'aveu (durées manquantes, tâches qui ne rentrent pas) : lisible, pas caché */
.spr-note{margin-top:12px;font-size:.82rem;color:var(--warn);line-height:1.5}
.spr-note.big{margin-top:0;font-size:.92rem;color:var(--muted)}

/* ---- rituel du matin (dans la modale) ---- */
.rit{margin-bottom:18px}
.rit-prog{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:9px}
.rit-task{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:12px 14px;margin-bottom:14px}
.rit-proj{font-size:.72rem;font-weight:600;color:var(--pc)}
.rit-ttl{font-size:1.02rem;font-weight:500;margin:3px 0 4px;line-height:1.35}
.rit-meta{font-size:.78rem;color:var(--late)}
.rit-acts{display:flex;gap:8px;flex-wrap:wrap}
.rit-acts button{
  padding:9px 14px;border-radius:9px;font-weight:600;font-size:.87rem;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
}
.rit-acts button:hover{border-color:var(--accent)}
.rit-acts button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.rit-acts button.primary:hover{filter:brightness(1.08);border-color:transparent}
/* « Abandonner » se lit en rouge mais reste sobre : l'intro dit qu'abandonner
   n'est pas un échec — un bouton rouge plein dirait le contraire */
.rit-acts button.danger{color:var(--late)}
.rit-acts button.danger:hover{border-color:var(--late)}
/* « Laisser en retard » est une issue légitime, pas un bouton qu'on met en avant */
.rit-acts button.ghostb{border:none;background:none;color:var(--muted);font-weight:500;margin-left:auto}
.rit-acts button.ghostb:hover{color:var(--ink)}
@media (max-width:520px){
  .rit-acts{flex-direction:column}
  .rit-acts button{width:100%}
  .rit-acts button.ghostb{margin-left:0}
}

/* ============ actions groupées (mode sélection) ============ */
.viewbar .vsep{width:1px;height:18px;background:var(--line);margin:0 4px;align-self:center}
.selbox{display:flex;align-items:center;margin-top:2px;flex:0 0 auto;cursor:pointer}
.selbox input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.task.seled{border-color:var(--accent);box-shadow:0 0 0 1.5px var(--accent) inset, var(--shadow)}
body:has(#selbar) #mainscroll{padding-bottom:150px}
#selbar{
  position:fixed;left:50%;bottom:18px;transform:translateX(calc(-50% + var(--side-w)/2));z-index:60;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;max-width:calc(100vw - var(--side-w) - 40px);
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:8px 12px;box-shadow:0 14px 44px rgba(0,0,0,.28);
}
#selbar .scount{font-size:.85rem;font-weight:700;color:var(--accent);padding:0 4px;white-space:nowrap}
/* total du temps mesuré sur la sélection : plus sobre que le compteur */
#selbar .scount-t{font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
#selbar .ssep{width:1px;height:20px;background:var(--line);margin:0 3px}
#selbar button{
  font-size:.83rem;font-weight:600;color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:6px 11px;background:var(--paper);white-space:nowrap;
}
#selbar button:hover{border-color:var(--accent);color:var(--accent)}
#selbar button.sdanger{color:var(--late)}
#selbar button.sdanger:hover{border-color:var(--late);background:var(--late-soft)}
#selbar button.sclose{border:none;background:none;color:var(--muted);padding:6px 8px}
#selbar button.sclose:hover{color:var(--ink)}
@media (max-width:760px){
  #selbar{transform:translateX(-50%);max-width:calc(100vw - 20px)}
}

/* ============ bilan hebdomadaire ============
   L'écran Bilan est migré au design system : ses composants vivent en fin de
   feuille (« écran Bilan »). Ne restent ici que les puces de réinitialisation,
   partagées avec la barre de filtres d'Aujourd'hui. */
.fchip.freset{border-style:dashed;color:var(--muted)}
.fchip.freset:hover{color:var(--late);border-color:var(--late)}

/* champ URL en lecture seule dans les modales (flux iCal) */
.uimodal .um-url{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  background:var(--paper);color:var(--ink);font-size:.8rem;outline:none;
  font-family:var(--font-mono),ui-monospace,monospace;
}
.uimodal .um-url:focus{border-color:var(--accent)}

/* ============ impression (bouton « Imprimer la vue » ou Ctrl+P) ============ */
@media print{
  aside.side,.viewbar,.tacts,.addbtn,.kbbtn,.toast,#selbar,.storebanner,
  .grip,.selbox,.notetoggle,.doverlay,.dpanel,.uimodal-ov,.rmenu,.chk{display:none!important}
  #mainscroll{margin-left:0!important;padding:0!important}
  body{background:#fff!important}
  #main{max-width:none}
  .task{box-shadow:none;break-inside:avoid;border-color:#ddd}
  .tnote.clamp{max-height:none;-webkit-mask-image:none;mask-image:none}
  .pouls,.dayhead button,.toolbar{display:none}
  .kpis,.wchart,.kpi{box-shadow:none}
}

/* ============ aide raccourcis clavier ============ */
.kbbtn{
  position:fixed;right:16px;bottom:16px;z-index:30;width:42px;height:42px;border-radius:50%;
  background:var(--card);border:1px solid var(--line);color:var(--muted);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
}
.kbbtn:hover{color:var(--accent);border-color:var(--accent)}
.kbbtn svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}
body.logged-out .kbbtn{display:none}
.kbhelp{margin-bottom:14px;max-height:60vh;overflow-y:auto}
.kbsec{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:14px 0 6px}
.kbhelp .kbsec:first-child{margin-top:0}
.kbrow{display:flex;align-items:baseline;gap:12px;font-size:.88rem;color:var(--ink);padding:3px 0}
.kbrow>span{flex:0 0 118px;text-align:right;white-space:nowrap}
kbd{
  font-family:var(--font-mono),ui-monospace,monospace;font-size:.74rem;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:6px;padding:1px 7px;
}
@media (max-width:760px){ .kbbtn{display:none} }

/* ============ toast (annuler) ============ */
.toast{
  position:fixed;left:50%;bottom:18px;transform:translate(calc(-50% + var(--side-w)/2), 12px);z-index:70;
  display:flex;align-items:center;gap:14px;
  background:var(--ink);color:var(--paper);border-radius:12px;padding:11px 18px;
  font-size:.88rem;box-shadow:0 14px 44px rgba(0,0,0,.3);opacity:0;transition:.22s;
  max-width:min(92vw, 560px);
}
.toast.show{opacity:1;transform:translateX(calc(-50% + var(--side-w)/2))}
.toast .tundo{color:var(--mint);font-weight:700;font-size:.88rem;white-space:nowrap}
.toast .tundo:hover{text-decoration:underline}
:root[data-theme="dark"] .toast{background:#EDE8DC;color:#23252B}
:root[data-theme="dark"] .toast .tundo{color:#2F6B5E}
body:has(#selbar) .toast{bottom:84px}
@media (max-width:760px){
  .toast{transform:translate(-50%, 12px)}
  .toast.show{transform:translateX(-50%)}
}


/* ===================== HABITUDES ===================== */
/* icônes inline monochromes (couleur = currentColor, taille = font-size du parent) */
.ic{width:1.25em;height:1.25em;display:inline-block;vertical-align:-.18em;flex:0 0 auto}
.ic-sm{width:1em;height:1em;vertical-align:-.12em}

/* --- tranche en haut d'« Aujourd'hui » : plus présente --- */
.hbslice{margin:8px 0 16px;padding:14px 16px;background:var(--paper-2);border-radius:12px;border:1px solid var(--line)}
.hbslice-h{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.hbslice-t{font-weight:600;font-size:.95rem}
.hbslice-n{font-size:.85rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.hbslice-n .sl{opacity:.5;margin:0 1px}
.hbslice-bar{flex:1;max-width:160px;height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.hbslice-fill{display:block;height:100%;background:var(--accent);border-radius:6px;transition:width .3s}
.hbslice-more{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:600;
  color:var(--muted);padding:5px 10px;border-radius:8px}
.hbslice-more:hover{color:var(--accent);background:var(--card)}
/* 5 pavés équilibrés en largeur (grille auto-fit → même largeur, passe à la ligne
   au-delà). Fond PLEINE couleur de l'habitude, blanc, sans bordure. Deux lignes :
   (icône + flamme/série) puis l'intitulé. Non fait = même pavé, atténué. */
.hbslice-pills{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.hbpill{display:flex;flex-direction:column;gap:7px;padding:11px 13px;border-radius:12px;border:none;
  background:var(--hc);color:var(--on-tint);cursor:pointer;text-align:left;transition:.15s;min-width:0}
.hbpill.off{opacity:.42;filter:saturate(.85)}
.hbpill.off:hover{opacity:.62}
.hbpill.on:hover{filter:brightness(1.05)}
.hbp-l1{display:flex;align-items:center;gap:8px}
.hbp-ico{display:inline-flex;line-height:0}
.hbp-ico .ic{width:22px;height:22px;color:#fff}
.hbp-streak{margin-left:auto;display:inline-flex;align-items:center;gap:3px;font-size:.82rem;font-weight:700;color:#fff}
.hbp-streak .ic{color:#fff}
.hbp-name{font-size:.9rem;font-weight:600;color:#fff;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- pointage rond : partagé avec la tranche « Aujourd'hui » --- */
.hbcheck{width:44px;height:44px;flex:0 0 auto;border-radius:50%;border:2px solid var(--hc);color:var(--hc);
  display:flex;align-items:center;justify-content:center;background:transparent;transition:.15s;cursor:pointer}
.hbcheck .ic{width:22px;height:22px}
.hbcheck:hover{background:color-mix(in srgb,var(--hc) 14%,transparent)}
.hbcheck.on{background:var(--hc);border-color:var(--hc);color:var(--on-tint)}
.hbcheck.na{opacity:.4;cursor:default;border-style:dashed}

/* carte de chaleur : 52 semaines en colonnes de 7 jours (façon contributions) */
.pheat{margin-top:14px}
.pheat-grid{display:flex;gap:3px;overflow-x:auto;padding:2px}
.hm-col{display:flex;flex-direction:column;gap:3px;flex:0 0 auto}
.ph-c{width:11px;height:11px;border-radius:2px}
.ph-on{background:var(--hc)}
.ph-miss{background:color-mix(in srgb,var(--hc) 18%,var(--paper-2))}
.ph-na{background:var(--paper-2)}
.ph-fut{background:transparent}
.ph-void{background:transparent}
/* aujourd'hui : liseré DANS la case (box-shadow inset), donc aucun trait qui déborde
   au-dessus/en dessous. Teinte de l'habitude pour rester discret et sur le thème. */
.ph-today{box-shadow:inset 0 0 0 1.5px var(--hc)}
.pheat-cap{display:flex;justify-content:space-between;font-size:.68rem;color:var(--muted);margin-top:6px}

/* --- modal créer / éditer --- */
.hbf-l{font-size:.82rem;font-weight:600;color:var(--muted);margin:14px 0 6px}
.hbf-l:first-child{margin-top:0}
.hbicos{display:flex;flex-wrap:wrap;gap:7px}
.hbico{width:40px;height:40px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);
  color:var(--muted);display:flex;align-items:center;justify-content:center;transition:.15s}
.hbico .ic{width:20px;height:20px}
.hbico:hover{border-color:var(--hc,var(--accent));color:var(--hc,var(--accent))}
.hbico.on{border-color:var(--hc);background:var(--hc);color:var(--on-tint)}
.hbcols{display:flex;flex-wrap:wrap;gap:8px}
.hbcol{width:30px;height:30px;border-radius:50%;border:2px solid transparent}
.hbcol.on{border-color:var(--ink)}
.hbfreq{margin-bottom:0}
.hbdays{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.hbday{padding:7px 10px;border-radius:8px;border:1.5px solid var(--line);font-size:.8rem;font-weight:600;
  color:var(--muted);background:var(--card);text-transform:capitalize}
.hbday.on{border-color:var(--accent);background:var(--accent);color:#fff}

/* ============ challenges ============ */
/* icône de nav Material (fill) au milieu d'icônes au trait : on neutralise le stroke */
.navbtn .nvico-f{fill:currentColor;stroke:none;stroke-width:0}

/* -- bandeaux dans la tranche « Aujourd'hui » : registre distinct des pavés
      (fond carte pleine largeur vs pavé plein de couleur) -- */
.chrows{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.chrow{display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;box-shadow:var(--shadow)}
.chrow .hbcheck{width:38px;height:38px}
.chrow .hbcheck .ic{width:19px;height:19px}
.chrow-id{min-width:150px}
.chrow-name{font-family:var(--font-h),sans-serif;font-size:1.02rem;font-weight:600;line-height:1.2}
.chrow-sub{font-size:.76rem;color:var(--muted)}
.chrow-win{display:flex;gap:2px;flex:1;min-width:140px;justify-content:center;flex-wrap:wrap}
.chrow-win .cw{width:9px;height:9px;border-radius:2px}
.chrow-count{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;
  font-variant-numeric:tabular-nums}
.chrow-count .v{font-size:1.1rem;font-weight:700;color:var(--hc)}
.chrow-count .l{font-size:.66rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}

/* -- cases de la fenêtre : une case = un jour DÛ -- */
.cw{width:13px;height:13px;border-radius:3px;background:var(--paper-2);border:1px solid var(--line);flex:0 0 auto}
.cw.on{background:var(--hc);border-color:var(--hc)}
.cw.miss{background:color-mix(in srgb,var(--late) 24%,var(--paper));border-color:color-mix(in srgb,var(--late) 38%,var(--line))}
.cw.today{box-shadow:inset 0 0 0 1.5px var(--hc)}


/* -- badges d'état -- */
.chbadge{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;
  padding:2px 9px;border-radius:999px;letter-spacing:.02em;vertical-align:1px}
.chbadge .ic{width:12px;height:12px}
.chbadge.run{background:color-mix(in srgb,var(--doing) 18%,transparent);color:var(--warn)}
.chbadge.win{background:var(--accent-soft);color:var(--accent)}
.chbadge.lost{background:var(--late-soft);color:var(--late)}


/* -- modal challenge : le choix des participants, en puces cochables --
   Un « multiselect » natif est illisible et pénible au doigt : une puce par
   personne, avec son initiale, dit qui est dedans d'un coup d'œil. */
.chparts-pick{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.chpk{display:inline-flex;align-items:center;gap:7px;min-height:var(--sp-32);
  padding:var(--sp-4) 11px var(--sp-4) var(--sp-4);border-radius:var(--r-pill);
  background:var(--inset);color:var(--text-strong);
  font-size:var(--fs-caption);font-weight:600}
.chpk:hover{background:var(--zone-2)}
.chpk-av{width:24px;height:24px;flex:0 0 24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--zone-2);color:var(--text);font-size:var(--fs-caption)}
.chpk.on{background:var(--brand);color:#FFFFFF}
.chpk.on .chpk-av{background:var(--brand-hover);color:#FFFFFF}
@media (pointer:coarse){ .chpk{min-height:var(--sp-44)} }

/* -- modal challenge : durée, dates libres, exigence -- */
.chdates{display:flex;gap:12px;flex-wrap:wrap;margin-top:9px}
.chdates label{display:flex;flex-direction:column;gap:4px;font-size:.78rem;font-weight:600;color:var(--muted)}
.chdates input[type=date]{border:1px solid var(--line);border-radius:8px;background:var(--paper);
  color:var(--ink);font-family:inherit;font-size:.9rem;padding:7px 9px}
.chhint{font-size:.8rem;color:var(--muted);margin-top:8px}
.chquota-in{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muted);margin-top:9px;flex-wrap:wrap}
.chquota-in input{width:64px;text-align:center;border:1px solid var(--line);border-radius:8px;background:var(--paper);
  color:var(--ink);font-family:inherit;font-size:.95rem;padding:7px 4px;font-variant-numeric:tabular-nums}

@media (max-width:760px){
  .chrow-win{display:none}   /* sur mobile le bandeau garde nom + marge + compteur */
}

/* ============ sprint (projet borné + objectif) ============ */
.sprintbar{border:1px solid color-mix(in srgb,var(--doing) 55%,var(--line));
  background:color-mix(in srgb,var(--doing) 10%,var(--card));
  border-radius:12px;padding:14px 17px;margin:4px 0 14px}
.sb-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sb-obj{font-family:var(--font-h),sans-serif;font-size:1.15rem;font-weight:600;flex:1;min-width:200px}
.sb-count{display:inline-flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums;
  font-weight:700;font-size:1.3rem;color:var(--warn);white-space:nowrap}
.sb-count small{font-size:.75rem;font-weight:600;color:var(--muted)}
.sb-bars{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.sb-brow{display:flex;align-items:center;gap:10px;font-size:.76rem;color:var(--muted)}
.sb-brow .lbl{width:96px;flex:0 0 auto;font-weight:600}
.sb-track{flex:1;height:7px;border-radius:6px;background:var(--line);overflow:hidden}
.sb-track i{display:block;height:100%;border-radius:6px}
.sb-track .time{background:var(--doing)}
.sb-track .work{background:var(--accent)}
.sb-brow b{font-variant-numeric:tabular-nums;color:var(--ink);width:56px;text-align:right;flex:0 0 auto}
.sb-state{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;color:var(--accent)}
.sb-state.late{color:var(--late)}
.sb-state .ic{width:13px;height:13px}

/* verdict à l'échéance : la question, pas un formulaire */
.verdict{margin:4px 0 14px;border-radius:12px;padding:14px 17px;
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));
  background:var(--accent-soft);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.verdict .t{font-weight:600}
.verdict .q{flex:1;min-width:180px;font-size:.9rem;color:var(--muted)}
/* Boutons de verdict de sprint : classe DISTINCTE (.vdbtn) de la barre de vues
   (.viewbar .vbtn) — plus de collision de nom, plus de risque d'écrasement. */
.verdict .vdbtn{font-family:inherit;font-size:.84rem;font-weight:600;border-radius:9px;padding:7px 13px;
  cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.verdict .vdbtn.yes{background:var(--accent);border-color:var(--accent);color:#fff}

/* bandeau sprint d'« Aujourd'hui » : l'information principale du jour pendant
   la fenêtre — teinté de la couleur du PROJET, cliquable vers le projet */
.dsprint{display:flex;align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--pc) 40%,var(--line));
  background:color-mix(in srgb,var(--pc) 8%,var(--card));
  border-radius:12px;padding:11px 15px;margin:2px 0 10px;box-shadow:var(--shadow)}
.dsprint:hover{border-color:var(--pc)}
.dsprint .chbadge{flex:0 0 auto}
.dsp-proj{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.88rem;flex:0 0 auto}
.dsp-obj{font-family:var(--font-h),sans-serif;font-size:1.08rem;font-weight:600;flex:1;min-width:180px}
.dsp-r{display:inline-flex;align-items:center;gap:12px;margin-left:auto;flex-wrap:wrap}
.dsp-r .sb-count{font-size:1.15rem}
.dsp-off{font-size:.76rem;font-weight:600;color:var(--warn);
  background:color-mix(in srgb,var(--doing) 16%,transparent);border-radius:999px;padding:2px 9px}
.verdict.dsp{margin:2px 0 10px}

/* ligne d'équipage du sprint (projet partagé) : avatar + fait/total par membre */
.spcrew{flex-basis:100%;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:8px;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--pc) 22%,var(--line))}
.spcm{display:inline-flex;align-items:center;gap:6px;font-size:.8rem}
.spcm i{font-style:normal;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
.spcm-none i{color:var(--muted);font-weight:500}

/* rangée sprint de la Semaine : une bande continue sur les jours de la fenêtre */
.wk-sprints .wk-spcell{display:flex;flex-direction:column;gap:2px;padding:2px 0}
.wk-sp{height:20px;display:flex;align-items:center;gap:4px;padding:0 6px;cursor:pointer;
  background:color-mix(in srgb,var(--pc) 22%,var(--card));border-radius:0;overflow:hidden;white-space:nowrap}
.wk-sp .ic{width:12px;height:12px;color:var(--pc);flex:0 0 auto}
.wk-sp-t{font-size:.7rem;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.wk-sp.st{border-top-left-radius:7px;border-bottom-left-radius:7px}
.wk-sp.en{border-top-right-radius:7px;border-bottom-right-radius:7px}

/* bandes sprint du Mois : façon événement multi-jours, une ligne fine par sprint */
.cal-sprint{height:15px;display:flex;align-items:center;gap:3px;padding:0 4px;margin:1px -2px 2px;
  background:color-mix(in srgb,var(--pc) 22%,var(--card));overflow:hidden;white-space:nowrap}
.cal-sprint .ic{width:10px;height:10px;color:var(--pc);flex:0 0 auto}
.cal-sprint span{font-size:.62rem;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.cal-sprint.st{border-top-left-radius:6px;border-bottom-left-radius:6px;margin-left:1px}
.cal-sprint.en{border-top-right-radius:6px;border-bottom-right-radius:6px;margin-right:1px}

/* jalon d'agenda : la fin d'un sprint est une échéance, pas une tâche */
.agmilestone{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--ink);
  background:color-mix(in srgb,var(--pc) 10%,var(--card));border:1px solid color-mix(in srgb,var(--pc) 35%,var(--line));
  border-radius:9px;padding:7px 11px;margin:4px 0;cursor:pointer}
.agmilestone .ic{width:15px;height:15px;color:var(--pc)}
.agmilestone:hover{border-color:var(--pc)}

/* Bilan : lignes challenges — même gabarit que « Par projet » (barre + score) */
.chsrow{display:flex;align-items:center;gap:10px;padding:7px 4px;border-radius:9px;cursor:pointer}
.chsrow:hover{background:var(--paper-2)}
.chsrow .chbadge{flex:0 0 auto;min-width:86px;justify-content:center}
.chs-ico{display:inline-flex;color:var(--hc)}
.chs-ico .ic{width:16px;height:16px}
.chs-name{flex:0 1 auto;min-width:0;font-weight:600;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chsrow .psbar{flex:1}
.chsrow .psfill{background:var(--hc)}
.chsrow .psn{font-variant-numeric:tabular-nums}

/* catalogue des défis proposés : cartes en pointillé — des invitations, pas des objets */
.cata{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:2px}
.cacard{background:var(--paper-2);border:1px dashed var(--line);border-radius:12px;padding:12px 13px;
  display:flex;flex-direction:column;gap:6px}
.cacard-h{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem}
.cacard-h .ic{color:var(--accent);width:17px;height:17px;flex:0 0 auto}
.cacard-sub{font-size:.76rem;color:var(--muted)}
.cacard button{align-self:flex-start;margin-top:2px;font-family:inherit;font-size:.78rem;font-weight:600;
  color:var(--accent);background:none;border:none;padding:0;cursor:pointer}
.cacard button:hover{text-decoration:underline}

/* sélecteur d'icônes (modales habitude & challenge) : recherche + familles + grille */
.icopick{display:flex;flex-direction:column;gap:8px}
.icopick-q{border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:8px 11px;
  color:var(--ink);font-family:inherit;font-size:.88rem;outline:none}
.icopick-q:focus{border-color:var(--accent)}
.icofams{display:flex;gap:5px;flex-wrap:wrap}
.icofam{font-family:inherit;font-size:.72rem;font-weight:600;color:var(--muted);background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:3px 10px;cursor:pointer}
.icofam:hover{border-color:var(--accent);color:var(--accent)}
.icofam.on{color:#fff;background:var(--accent);border-color:var(--accent)}
/* la grille défile : 110 icônes ne doivent pas pousser la modale hors écran */
.icogrid{max-height:216px;overflow-y:auto;padding:2px;align-content:flex-start}
.icoempty{font-size:.82rem;color:var(--muted);padding:8px 2px}

/* réglages projet : champs du mode sprint */
.spfields{margin-top:10px}
.spfields .spobj{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--paper);
  padding:9px 11px;color:var(--ink);font-family:var(--font-h),sans-serif;font-size:.98rem;outline:none}
.spfields .spobj:focus{border-color:var(--accent)}
.spfields .hbf-l{margin-top:10px}

/* ---- sections des volets (réglages projet, membres) ----
   ⚠️ Ce qui appartenait à l'écran Équipe et à sa fiche a migré vers le design
   system (bloc « écran Équipe », plus bas). Ne restent ici que les règles
   PARTAGÉES avec des écrans non encore migrés. */
.psec{padding:13px 0;border-top:1px solid var(--line)}
.psec:first-of-type{border-top:none}
.psec-t{font-weight:600;font-size:.9rem;margin-bottom:8px}
.btn-primary{background:var(--accent);border:1px solid var(--accent);color:#fff;border-radius:10px;
  padding:8px 16px;font-size:.88rem;font-family:inherit;cursor:pointer}
.btn-primary:hover{filter:brightness(1.05)}

/* ============================================================
   Design system — composants transverses (refonte, étape 3)
   ============================================================ */

/* Bouton PRIMAIRE — apparence unique (remplace 11 implémentations divergentes,
   cf. DESIGN_AUDIT §11.A). Les sélecteurs sont listés à l'identique de leurs
   règles d'origine : même spécificité, l'ordre source tranche → ce bloc gagne.
   Les propriétés structurelles (largeur, display:flex, gap) et les états
   :disabled restent portés par les règles d'origine.
   Nettoyage des déclarations désormais mortes = passe ultérieure. */
.tpluse,
.dfoot .primary,
.qs-add,
.login-card #dev-login,
.lemail button,
.linvbtn,
.uimodal .um-acts button.primary,
.rit-acts button.primary,
.verdict .vdbtn.yes,
.btn-primary{
  background:var(--brand); color:#fff; border:none;
  border-radius:var(--r-9);
  padding:var(--sp-8) var(--sp-16);
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-body);
  cursor:pointer; transition:background var(--t-fast) var(--ease);
}
.tpluse:hover,
.dfoot .primary:hover,
.qs-add:hover,
.login-card #dev-login:hover,
.lemail button:hover,
.linvbtn:hover,
.uimodal .um-acts button.primary:hover,
.rit-acts button.primary:hover,
.verdict .vdbtn.yes:hover,
.btn-primary:hover{ background:var(--brand-hover); filter:none; }

/* Champs de saisie — coin unique (--r-9). Unifie les rayons 7/8/9/10px épars
   (DESIGN_AUDIT §11.G). Rayon seul : les paddings/largeurs et le focus (déjà
   passé à --brand via l'alias --accent) restent portés par les règles d'origine. */
.mfield input[type=text],.mfield input[type=email],.mfield input[type=date],.mfield select,.mfield textarea,
.dsec-body>select,.uimodal select,.uimodal .um-url,
.cfrow input,.cfrow select,.cfdef input,.cfdef select,
.meminvite input,.memrole,.chdates input[type=date],.chquota-in input,
.icopick-q,.spfields .spobj,.d-estfree input[type=number],.d-spentrow input[type=number]{
  border-radius:var(--r-9);
}

/* ============================================================
   Design system — coquille : rail de vues (étape 4a)
   Le rail vert (mode replié) devient le défaut. Icônes + tooltips
   au survol (les libellés restent hors du rail, cf. source). La liste
   des projets quitte le rail : elle revient en bandeau + overlay (4c).
   Le dépli reste l'échappatoire iso-fonctionnelle (recherche + projets)
   jusqu'à ce que les overlays 4b/4c la remplacent.
   ============================================================ */
body.side-collapsed aside.side{
  background:var(--green-rail); border-right:none;
  padding:12px 0; gap:2px; color:#8FB0A5;
}
/* le logo et la loupe vivent dans la barre de tête : pas dans le rail (maquette) */
body.side-collapsed .brand,
body.side-collapsed .railsearch{display:none}
/* 8 vues : icône 22px + libellé 8px ; actif = tuile claire 50×44 (valeur, pas ombre) */
body.side-collapsed .navsec{margin-top:0;gap:2px}
body.side-collapsed .navbtn{
  width:50px;min-height:44px;height:auto;padding:2px 0;border-radius:11px;
  flex-direction:column;align-items:center;justify-content:center;gap:1px;
  color:#8FB0A5;opacity:1;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
body.side-collapsed .navbtn .nvico{width:22px;height:22px;color:inherit;stroke-width:1.7}
/* dans le rail : libellé COURT (maquette) ; le libellé long sert au volet déplié */
.nshort{display:none}
body.side-collapsed .navbtn .ntxt{display:none}
body.side-collapsed .navbtn .nshort{
  display:block;font-size:8px;font-weight:500;line-height:1.1;text-align:center;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit}
body.side-collapsed .navbtn.active .nshort{font-weight:700}
body.side-collapsed .navbtn:hover{background:var(--green-deep);color:#CFE0DA}
body.side-collapsed .navbtn.active{background:var(--card);color:var(--green-rail)}
body.side-collapsed .navbtn.active .nvico{color:inherit;stroke-width:2.1}
body.side-collapsed .navbtn.active .ntxt{font-weight:700}
body.side-collapsed .navbtn-inbox{color:#8FB0A5}
body.side-collapsed .navbtn-inbox.active{color:var(--green-rail)}
/* pastille de compteur : anneau assorti au rail */
body.side-collapsed .navbtn .cnt-dot{top:2px;right:2px;box-shadow:0 0 0 2px var(--green-rail)}
/* la liste des projets quitte le rail ; le conteneur reste comme entretoise
   pour pousser le pied tout en bas */
body.side-collapsed #nav-projects{display:none}
body.side-collapsed .navsec-proj{border-top:none;padding-top:0;margin-top:0}
/* pied de rail : avatar rond 30px (la ligne « compte » se réduit à l'avatar) */
body.side-collapsed .sidefoot{display:flex;flex-direction:column;align-items:center;gap:0;border:none;padding:0;margin:0}
body.side-collapsed .acctrow{width:30px;height:30px;padding:0;border-radius:50%;background:none;justify-content:center}
body.side-collapsed .acctrow:hover{background:none}
body.side-collapsed .acctav{width:30px;height:30px;border-radius:50%;font-size:var(--fs-body);
  background:var(--p01);color:var(--on-tint);display:inline-flex;align-items:center;justify-content:center}

/* icône clavier du rail (raccourcis) — visible en mode rail, au-dessus du compte */
.railkb{display:none}
body.side-collapsed .railkb{display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:0 auto var(--sp-4);border-radius:var(--r-9);
  color:var(--card-hi);opacity:.82;flex:0 0 auto}
body.side-collapsed .railkb:hover{opacity:1;background:rgba(255,255,255,.08)}
.railkb svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---- overlay de commande ⌕ (étape 4) : plan green-deep pleine surface, sans ombre ---- */
.cmd-ov{position:fixed;inset:0;z-index:120;background:var(--green-deep);
  display:flex;flex-direction:column;align-items:center;
  padding:14vh var(--sp-24) var(--sp-24);animation:cmdrise var(--t-panel) var(--ease)}
@keyframes cmdrise{from{opacity:0}to{opacity:1}}
.cmd-panel{width:100%;max-width:640px;display:flex;flex-direction:column;gap:var(--sp-24)}
.cmd-searchrow{display:flex;align-items:center;gap:var(--sp-12);
  background:var(--card);border-radius:var(--r-12);padding:var(--sp-12) var(--sp-16)}
.cmd-ico{width:22px;height:22px;flex:0 0 auto;color:var(--text-muted);
  stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#cmd-q{flex:1;min-width:0;border:none;outline:none;background:none;color:var(--ink);
  font-size:var(--fs-subhead);font-family:var(--font-body)}
#cmd-q::placeholder{color:var(--text-muted)}
.cmd-close{flex:0 0 auto;color:var(--text-muted);font-size:var(--fs-caption);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;padding:var(--sp-4) var(--sp-8);border-radius:var(--r-6)}
.cmd-close:hover{color:var(--ink);background:var(--inset)}
.cmd-projlab{color:var(--zone);font-size:var(--fs-caption);letter-spacing:.08em;
  text-transform:uppercase;font-weight:600}
.cmd-projlist{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.cmd-chip{display:inline-flex;align-items:center;gap:var(--sp-8);padding:var(--sp-8) var(--sp-12);
  border-radius:var(--r-pill);background:rgba(255,255,255,.08);color:var(--card-hi);
  font-size:var(--fs-body);font-weight:500;cursor:pointer}
.cmd-chip:hover{background:rgba(255,255,255,.14)}
.cmd-chip .cmd-dot{width:10px;height:10px;border-radius:50%;background:var(--pc);flex:0 0 auto}
.cmd-chip.on{background:var(--card-hi);color:var(--text-strong)}
.cmd-empty{color:var(--zone);font-size:var(--fs-body)}

/* ===== Aujourd'hui — coquille 3 zones (design system, étape 5) =====
   journée (col.1, --zone) · clairière (col.2, --card-hi = la lumière) · vie (col.3, --zone).
   Élévation par la valeur, aucun trait ni ombre entre les zones. */
/* cadre d'application : hauteur exacte de la fenêtre, aucun ascenseur de page —
   chaque zone défile chez elle si son contenu déborde. */
body.v-day{overflow:hidden}
/* Largeurs de la maquette (cadre 1440px : col.1 366px, puis 62 % / 38 % du
   reste → 366 / 625 / 383 sur 1374 de surface hors rail), converties en
   PROPORTIONS pures : les trois colonnes s'adaptent à la largeur d'écran. */
.day3{display:grid;grid-template-columns:minmax(0,366fr) minmax(0,625fr) minmax(0,383fr);
  align-items:stretch;gap:0;height:calc(100vh - var(--sp-44))}
.dcol{padding:var(--sp-16) 18px;min-width:0;min-height:0;display:flex;flex-direction:column;gap:var(--sp-12);
  overflow-y:auto;scrollbar-width:none}
.dcol::-webkit-scrollbar{width:0;height:0}
.dcol-journee{background:var(--zone)}
.dcol-clairiere{padding:26px 38px 30px}
.dcol-vie{background:var(--zone);gap:var(--sp-16)}
/* ===== barre de tête 44px : zone logo + bandeau projets ===== */
.topstrip{position:fixed;top:0;left:0;right:0;height:var(--sp-44);z-index:60;display:flex}
/* la zone logo couvre le rail (66px) + la colonne journée. La col.1 étant
   PROPORTIONNELLE (366/1374 de la surface hors rail), la largeur suit le même
   calcul : le bandeau démarre pile au bord de la clairière, comme la maquette. */
.ts-logo{width:calc(66px + (100vw - 66px)*0.26638);flex:0 0 calc(66px + (100vw - 66px)*0.26638);
  min-width:0;display:flex;align-items:center;
  gap:var(--sp-12);padding:0 18px;background:var(--band-top);overflow:hidden}
@media (max-width:1200px){
  .ts-logo{width:var(--side-w);flex-basis:var(--side-w);padding:0 var(--sp-8);justify-content:center}
  .ts-name,.ts-tag{display:none}
}
.ts-tile{width:30px;height:30px;flex:0 0 30px;border-radius:var(--r-9);background:var(--brand);
  display:inline-flex;align-items:center;justify-content:center}
.ts-tile svg{width:19px;height:19px}
.ts-name{font-family:var(--font-h),sans-serif;font-size:var(--fs-subhead);font-weight:800;
  letter-spacing:-.2px;color:var(--text-strong);flex:0 0 auto}
.ts-tag{font-size:var(--fs-caption);color:var(--text-muted-warm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-band{flex:1;min-width:0;background:var(--green-rail);display:flex;align-items:center;
  gap:var(--sp-4);padding:0 var(--sp-12)}
.ts-projects{flex:1;min-width:0;display:flex;align-items:center;gap:var(--sp-4);overflow-x:auto}
.ts-projects::-webkit-scrollbar{height:0}
.tpchip{display:inline-flex;align-items:center;gap:6px;padding:var(--sp-4) 9px;
  border-radius:7px;color:#CFE0DA;font-size:12px;flex:0 0 auto;white-space:nowrap}
.tpchip:hover{opacity:.8}
.tpchip.on{background:var(--card);color:var(--text-strong);opacity:1}
.tpchip.on .tpname{font-weight:600}
.tpchip .ptile{width:18px;height:18px;border-radius:5px;font-size:10px}
.tpcnt{font-family:var(--font-mono),ui-monospace,monospace;font-size:11px;color:#7a7568}
.ts-all{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--sp-4);font-size:12px;
  font-weight:400;text-transform:none;letter-spacing:0;
  color:var(--on-deep-muted);padding:var(--sp-4) var(--sp-4);white-space:nowrap;margin-right:2px}
.ts-all:hover{color:#CFE0DA}
.ts-all svg{width:16px;height:16px;fill:currentColor}
.ts-search{flex:0 0 auto;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--green-deep);border-radius:var(--r-9);color:var(--on-deep-icon)}
.ts-search svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
.ts-search:hover{color:#fff}
/* bandeau d'écran (vues ≠ Aujourd'hui) : nom + info mono, action primaire à droite */
.ts-screen{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;overflow:hidden;padding-left:var(--sp-4)}
.ts-title{font-family:var(--font-h),sans-serif;font-size:var(--fs-body-lg);font-weight:700;
  color:var(--on-deep);white-space:nowrap}
.ts-info{font-family:var(--font-mono),ui-monospace,monospace;font-size:12px;color:var(--on-deep-muted);white-space:nowrap}
.ts-actions{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-8)}
.ts-actions:empty{display:none}
.ts-cta{display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:var(--on-brand);
  border-radius:var(--r-9);padding:6px var(--sp-12);font-size:12px;font-weight:600;white-space:nowrap}
.ts-cta:hover{background:var(--brand-hover)}
.ts-cta .ic{width:16px;height:16px}
/* le reste de l'app démarre sous la barre de tête */
aside.side{top:var(--sp-44)}
#mainscroll{margin-top:var(--sp-44)}
body.v-day #mainscroll{padding:0}
@media (max-width:760px){
  .topstrip{display:none}
  aside.side{top:0}
  #mainscroll{margin-top:0}
}

/* ===== pendant MOBILE de la barre de tête (composant transverse) =====
   Sous 760px la barre de tête n'existe pas : ce bloc rend dans la surface les
   gestes qu'elle porte — segments de vue, période, retour du détail d'un projet.
   Une SEULE apparence (tuile --card) pour les trois écrans concernés, qu'ils
   soient sur le plan de lecture (--zone) ou sur le plan profond (À venir).
   `flex:0 0 auto` : ces surfaces sont des colonnes flex, un enfant sans hauteur
   propre s'y ferait écraser dès que la liste déborde. */
.mobnav{display:none}
@media (max-width:760px){
  .mobnav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-8);flex:0 0 auto;
    background:var(--card);border-radius:var(--r-12);padding:var(--sp-8) var(--sp-12)}
  .mn-nav{display:inline-flex;align-items:center;gap:var(--sp-4)}
  .mn-navb{width:var(--sp-32);height:var(--sp-32);display:inline-flex;align-items:center;
    justify-content:center;border-radius:var(--r-9);background:none;border:none;color:var(--text)}
  .mn-navb:hover{background:var(--inset)}
  .mn-navb .ic{width:18px;height:18px}
  .mn-period{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-caption);
    color:var(--text-strong);white-space:nowrap}
  /* libellés centrés EN FLEX : sinon les 44px de la cible tactile grandissent le
     bouton en laissant le texte plaqué en haut */
  .mn-today,.mn-seg,.mn-back{display:inline-flex;align-items:center;justify-content:center}
  .mn-today{font-size:var(--fs-caption);font-weight:600;color:var(--brand);
    background:none;border:none;white-space:nowrap}
  .mn-back{gap:var(--sp-2);font-size:var(--fs-caption);font-weight:600;color:var(--brand);
    background:none;border:none;white-space:nowrap;padding-right:var(--sp-4)}
  .mn-back .ic{width:16px;height:16px}
  .mn-segs{display:inline-flex;gap:var(--sp-2);margin-left:auto;background:var(--inset);
    border-radius:var(--r-9);padding:var(--sp-2)}
  .mn-seg{font-size:var(--fs-caption);font-weight:600;color:var(--text);background:none;
    border:none;border-radius:7px;padding:5px 10px;white-space:nowrap}
  .mn-seg.on{background:var(--brand);color:var(--on-brand)}
}
@media (pointer:coarse){
  /* la flèche est ronde : sa cible doit être carrée, pas 32 de large sur 44 de haut */
  .mn-navb{width:var(--sp-44);height:var(--sp-44)}
  .mn-seg,.mn-today,.mn-back{min-height:var(--sp-44);padding-left:var(--sp-8);padding-right:var(--sp-8)}
}

/* ===== cote d'archive & pastille projet (composants transverses) ===== */
.cote{font-family:var(--font-mono),ui-monospace,monospace;font-size:10px;color:var(--cote);
  white-space:nowrap;flex:0 0 auto}
.ptile{width:20px;height:20px;border-radius:var(--r-6);background:var(--pc);color:var(--on-tint);flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-caption);font-weight:700;line-height:1}

/* ===== colonne 1 : Ma journée ===== */
.jspace{flex:1}
.vspace{flex:1;min-height:var(--sp-8)}
.jhead{display:flex;align-items:center;gap:var(--sp-8);margin-bottom:var(--sp-4);flex-wrap:wrap}
.jtitle{font-family:var(--font-h),sans-serif;font-size:24px;font-weight:700;line-height:1;
  color:var(--ink);white-space:nowrap}
.jnav{width:26px;height:26px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  border-radius:7px;color:var(--text-muted);font-size:var(--fs-body-lg)}
.jnav:hover{background:var(--zone-2);color:var(--text-strong)}
.jdate{font-size:var(--fs-body);color:var(--text-muted);min-width:66px;text-align:center}
/* maquette : casse MIXTE ici (« 5 Tâches programmées · 6H30 de bonheur »),
   contrairement au bandeau « EN RETARD » qui est en capitales. */
.jprog{font-family:var(--font-mono),ui-monospace,monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.08em;color:var(--text-muted);margin-bottom:var(--sp-4)}
.jlist{display:flex;flex-direction:column}
/* ligne de tâche épurée */
.tline{background:none;border:none;box-shadow:none;margin:0;padding:7px 0;border-radius:var(--r-9);
  display:flex;align-items:center;gap:9px;position:relative;min-height:0}
.tline .grip{position:absolute;left:-13px;top:50%;transform:translateY(-50%);opacity:0;
  font-size:var(--fs-caption);color:var(--text-muted);cursor:grab}
.tline:hover .grip{opacity:.5}
.tline.on{background:var(--zone-2);padding:8px;margin:0 -8px}
.tl-tile{position:relative;width:20px;height:20px;flex:0 0 auto;padding:0;border:none;background:none;
  display:inline-flex;align-items:center;justify-content:center}
.tl-chk{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  border-radius:var(--r-6);background:var(--brand);color:#fff}
.tl-tile:hover .ptile{opacity:0}
.tl-tile:hover .tl-chk{display:flex}
.tl-ttl{flex:1;min-width:0;font-size:var(--fs-body);color:var(--text-strong);cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tline.on .tl-ttl{font-weight:700}
/* ligne active : la cote s'appuie, elle ne change pas de couleur. La teinte du
   projet n'y tenait que 2,57:1 sur --zone-2, et l'asseoir ne suffisait pas
   (3,8:1) — la couleur du projet est déjà portée par la pastille de la ligne. */
.tline.on .cote{font-weight:600}
.tl-dur{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-caption);white-space:nowrap;
  color:var(--text-muted);width:36px;text-align:right;flex:0 0 auto}
/* bloc retard : compact, sur un plan de valeur */
.lateblock{background:var(--zone-2);border-radius:11px;padding:11px 13px;margin-top:var(--sp-12);
  display:flex;flex-direction:column;gap:var(--sp-8)}
.lb-head{display:flex;align-items:center;gap:7px;color:var(--urgence-text)}
.lb-ttl{font-family:var(--font-mono),ui-monospace,monospace;font-size:10.5px;letter-spacing:.08em;
  font-weight:600;text-transform:uppercase}
.lb-act{display:inline-flex;align-items:center;gap:2px;font-size:var(--fs-caption);font-weight:600;color:var(--text-muted)}
.lb-act:hover{color:var(--urgence-text);text-decoration:underline}
.lb-row{background:none;border:none;box-shadow:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--sp-8);min-height:0}
.lb-cote{width:40px}
.lb-t{flex:1;min-width:0;font-size:12.5px;color:var(--text);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-days{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-caption);
  font-weight:600;color:var(--urgence-text);flex:0 0 auto}
.lb-foot{display:flex;align-items:center;gap:var(--sp-12);flex-wrap:wrap}
.lb-more{font-size:var(--fs-caption);color:var(--text-muted);text-align:left}
.lb-more:hover{color:var(--urgence-text)}
.lb-more .u{text-decoration:underline}

/* ===== colonne 2 : la clairière ===== */
.dcol-clairiere{background:var(--card);position:relative;overflow:hidden}
/* trame filigrane + halo de la clairière (aucun trait de séparation : un fond) */
.dcol-clairiere::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:26px 26px}
.dcol-clairiere::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 64% at 50% 44%, var(--card-hi), transparent 72%)}
.dcol-clairiere>*{position:relative;z-index:1}
.clairiere{flex:1;display:flex;flex-direction:column;min-height:0}
.cl-card{background:none;border:none;box-shadow:none;margin:0;padding:0;display:flex;flex-direction:column;flex:1;min-height:0;
  align-items:stretch}   /* neutralise l'align-items hérité de .task : la rangée du haut va jusqu'au bord droit (bouton Détails à droite, maquette) */
.cl-top{display:flex;align-items:center;gap:var(--sp-8);color:var(--brand)}
.cl-dot{width:11px;height:11px;border-radius:50%;border:2.5px solid currentColor;flex:0 0 auto}
.cl-dot.on{background:currentColor;box-shadow:inset 0 0 0 2px var(--card-hi)}
.cl-status{font-size:var(--fs-caption);letter-spacing:.1em;font-weight:700;text-transform:uppercase}
.cl-cote{font-size:12px;color:var(--brand);font-weight:600}
.cl-toggle{display:inline-flex;align-items:center;gap:var(--sp-4);background:var(--inset);
  border-radius:var(--r-pill);padding:5px 11px;font-size:11.5px;font-weight:600;color:var(--text-muted)}
.cl-toggle:hover{color:var(--text-strong)}
/* le glyphe Material keyboard_arrow_up pointe déjà vers le haut (état fermé) */
.cl-chev{transition:transform var(--t-fast) var(--ease)}
/* bascule Détails ⇄ Réduire, pilotée par l'état de la feuille (aucun re-rendu) */
.cl-lab-c{display:none}
body.sheeton .cl-toggle .cl-lab-o{display:none}
body.sheeton .cl-toggle .cl-lab-c{display:inline}
body.sheeton .cl-toggle .cl-chev{transform:rotate(180deg)}   /* chevron vers le bas */
/* centrage vertical par ESPACEURS flex (et non justify-content) : flex-grow se
   transitionne, donc le héros GLISSE vers le haut à l'ouverture de la feuille
   et redescend au centre à la fermeture. */
.cl-hero{flex:1;display:flex;flex-direction:column;gap:var(--sp-16);min-height:0}
.cl-hero::before,.cl-hero::after{content:"";flex:1 1 0}
.cl-hero::before{transition:flex-grow var(--t-panel) var(--ease)}
body.sheeton .cl-hero::before{flex-grow:0}
.cl-proj{display:flex;align-items:center;gap:9px;font-size:var(--fs-body);font-weight:600;color:var(--text-muted)}
.cl-proj .ptile{width:26px;height:26px;border-radius:var(--r-9);font-size:var(--fs-body)}
.cl-title .ttl{font-family:var(--font-h),sans-serif;font-size:34px;font-weight:700;line-height:1.02;
  color:var(--ink);cursor:pointer;display:block}
.cl-timerow{display:flex;align-items:center;gap:var(--sp-16);flex-wrap:wrap}
.cl-bigtimer{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-display);
  font-variant-numeric:tabular-nums;color:var(--brand);line-height:1;letter-spacing:-.02em}
.cl-pause{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:#fff;
  border-radius:var(--r-9);padding:12px 22px;font-size:var(--fs-body-lg);font-weight:600}
.cl-pause:hover{background:var(--brand-hover)}
.cl-pause svg,.cl-done svg{width:18px;height:18px}
.cl-done{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-size:14px;font-weight:600}
.cl-done:hover{color:var(--brand-hover)}
/* chip pomodoro : c'est un BOUTON — la bascule du pomodoro (la barre flottante
   a disparu). Éteinte : tout en retrait ; allumée : minuteur à l'or (maquette). */
.cl-pomo{display:inline-flex;align-self:flex-start;align-items:center;gap:var(--sp-8);background:var(--inset);
  border-radius:var(--r-pill);padding:6px 13px;color:var(--text-muted-warm);
  font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-body)}
.cl-pomo:hover{color:var(--text-strong)}
.cl-pomo .ic-sm{color:var(--text-muted);flex:0 0 auto}
.cl-pomo.on .ic-sm{color:var(--p04)}
.cl-foot{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap;padding-top:var(--sp-16);
  font-size:var(--fs-body);color:var(--text-muted)}
.cl-nx{display:inline-flex;align-items:center;gap:var(--sp-4)}
.cl-idle{margin:auto;color:var(--text-muted);font-family:var(--font-h),sans-serif;font-size:var(--fs-heading);opacity:.7}

/* ===== colonne 3 : la vie ===== */
.vsec{display:flex;flex-direction:column;gap:var(--sp-8)}
.vlab{display:flex;align-items:center;gap:6px;font-family:var(--font-mono),ui-monospace,monospace;
  font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.vmanage{display:inline-flex;align-items:center;gap:2px;font-family:var(--font-body);font-size:var(--fs-caption);
  font-weight:600;color:var(--brand);text-transform:none;letter-spacing:0}
.vmanage:hover{text-decoration:underline}
.hbtiles{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8)}
.hbtile{background:var(--grid-empty);border-radius:11px;padding:9px 11px;min-height:64px;
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-8);
  color:var(--text-strong);text-align:left}
.hbtile:hover{filter:brightness(.97)}
.hbtile.on{background:var(--hc);color:var(--on-tint)}
.hbt-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.hbt-top svg{width:18px;height:18px}
.hbt-meta{display:inline-flex;align-items:center;gap:var(--sp-4);
  font-family:var(--font-mono),ui-monospace,monospace;font-size:10px;opacity:.92}
.hbt-streak{display:inline-flex;align-items:center;gap:1px}
.hbt-name{font-size:12.5px;font-weight:600;line-height:1.15}
/* le Pouls (col.3, sous les challenges) : une tuile par jauge, pleine largeur,
   barre puis phrase de commentaire — la charge s'exprime en or, pas en rouge */
.vp{gap:var(--sp-8)}
.vp-g{display:flex;flex-direction:column;gap:5px;background:var(--grid-empty);
  border-radius:11px;padding:10px 12px}
.vp-top{display:flex;align-items:baseline;gap:var(--sp-8)}
.vp-cap{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-micro);
  letter-spacing:1px;text-transform:uppercase;color:var(--text-muted)}
.vp-val{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-caption);
  color:var(--text-strong);font-variant-numeric:tabular-nums}
.vp-bar{height:6px;border-radius:var(--r-pill);background:var(--zone-2);overflow:hidden}
.vp-bar i{display:block;height:100%;background:var(--brand);border-radius:var(--r-pill)}
.vp-g.over .vp-bar i{background:var(--p04)}
.vp-note{font-size:var(--fs-caption);color:var(--text-muted)}
.chcard{background:var(--green-deep);border-radius:11px;padding:12px 13px;
  display:flex;flex-direction:column;gap:9px;color:var(--text-strong)}
:root:not([data-theme="dark"]) .chcard{color:#EAF3EE}
.chc-top{display:flex;align-items:center;gap:9px}
.chc-ico{width:30px;height:30px;flex:0 0 auto;border-radius:var(--r-9);background:var(--hc);color:var(--on-tint);
  display:inline-flex;align-items:center;justify-content:center}
.chc-ico svg{width:18px;height:18px}
.chc-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.chc-name{font-size:var(--fs-body);font-weight:600}
.chc-sub{font-size:var(--fs-caption);color:var(--text-muted-warm)}
/* pointage du jour depuis la carte (comme une habitude) : rond cochable,
   rempli à la couleur du défi quand c'est fait, inerte les jours non dus */
.chc-check{width:26px;height:26px;flex:0 0 auto;border-radius:50%;
  border:2px solid var(--on-deep-dim);color:transparent;
  display:inline-flex;align-items:center;justify-content:center;background:none;padding:0}
.chc-check .ic-sm{width:15px;height:15px}
.chc-check:hover{border-color:var(--on-deep-muted)}
.chc-check.on{background:var(--hc);border-color:var(--hc);color:var(--on-tint)}
.chc-check.na{opacity:.35;cursor:default}
.chc-pct{font-family:var(--font-h),sans-serif;font-size:var(--fs-heading);font-weight:800;color:#E7C982}
.chc-bar{display:flex;gap:3px}
.chc-seg{flex:1;height:6px;border-radius:2px;background:rgba(255,255,255,.14)}
.chc-seg.on{background:var(--hc)}
/* pile de l'accompli */
.faitblock{background:var(--green-deep);border-radius:11px;padding:13px 14px;
  display:flex;flex-direction:column;gap:10px;color:#EAF3EE}
.fb-head{display:flex;align-items:center;gap:var(--sp-8);
  font-family:var(--font-mono),ui-monospace,monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase}
.fb-head svg{color:var(--mint)}
.fb-count{display:flex;align-items:baseline;gap:var(--sp-8)}
.fb-n{font-family:var(--font-h),sans-serif;font-size:30px;font-weight:800;color:#fff;line-height:.9}
/* sur le plan --green-deep, le libellé se lit en clair (maquette) */
.fb-lab{font-size:var(--fs-body);color:var(--on-deep-muted)}
.fb-row{background:none;border:none;box-shadow:none;opacity:1;margin:0;padding:0;
  display:flex;align-items:center;gap:var(--sp-8);min-height:0;color:#DCEAE4}
.fb-row svg{color:var(--mint);flex:0 0 auto}
.fb-row .cote{width:40px;color:#7fa093}
.fb-t{flex:1;min-width:0;font-size:var(--fs-body);text-decoration:line-through;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-more{font-size:var(--fs-caption);color:var(--text-muted-warm)}
.fb-week{margin-top:3px;display:flex;flex-direction:column;gap:6px}
.fbw-lab{display:flex;justify-content:space-between;font-family:var(--font-mono),ui-monospace,monospace;
  font-size:10px;letter-spacing:.05em;color:#7fa093;text-transform:uppercase}
.fbw-bars{display:flex;align-items:flex-end;gap:7px;height:56px}
.fbw-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;height:100%}
.fbw-bar{background:var(--brand);border-radius:3px;display:block}
.fbw-bar.now{background:var(--mint)}
.fbw-d{font-family:var(--font-mono),ui-monospace,monospace;font-size:9px;color:#7fa093;text-align:center}
.fbw-d.now{background:var(--mint);color:var(--green-deep);border-radius:4px;font-weight:700}

/* ===== Aujourd'hui : mise au diapason des composants hérités de la col.1 ===== */
/* Pouls (avancement + charge/budget) : conservé — c'est la fonctionnalité
   « capacité par jour » — mais rendu au plan de la zone, sans carte ni ombre. */
.dcol-journee .pouls{background:none;border:none;box-shadow:none;border-radius:0;
  padding:0;margin:0;display:flex;flex-direction:column;gap:var(--sp-8);font-size:var(--fs-caption)}
.dcol-journee .pouls .pcap{font-family:var(--font-mono),ui-monospace,monospace;
  font-size:10px;letter-spacing:.08em;color:var(--text-muted)}
.dcol-journee .pouls .pmeter{height:5px;border-radius:var(--r-pill);background:var(--grid-empty)}
/* (la barre de filtre du Jour est stylée plus bas — groupes par axe, maquette) */
/* bascules de vue : au ras du pied de colonne */
.dcol-journee .viewbar{margin:0;justify-content:flex-start}
.dcol-journee .viewbar .vbtn{background:none;border-color:transparent;color:var(--text-muted)}
.dcol-journee .viewbar .vbtn.on{background:var(--zone-2);border-color:transparent;color:var(--text-strong)}
/* « Revenir à aujourd'hui » : un lien, pas un pavé */
.jhead .todaybtn{flex:0 0 auto;background:none;border:none;box-shadow:none;padding:0 var(--sp-4);
  font-size:var(--fs-caption);font-weight:600;color:var(--brand);white-space:nowrap}
.jhead .todaybtn:hover{text-decoration:underline}
/* « + Ajouter une tâche » : au plan de la zone */
.dcol-journee .addbtn{background:var(--zone-2);border:none;border-radius:var(--r-9);
  padding:11px 13px;font-size:var(--fs-body);font-weight:600;color:var(--text-strong);text-align:left}
.dcol-journee .addbtn:hover{filter:brightness(.97);color:var(--text-strong)}
/* le rail porte déjà l'icône clavier : le bouton flottant ferait doublon */
body.side-collapsed .kbbtn{display:none}

/* ===== overlays sur le plan vert profond (design system) ===== */
.gov{position:fixed;inset:0;z-index:120;background:var(--green-deep);
  display:flex;flex-direction:column;align-items:center;padding:56px 20px;overflow:auto;
  animation:cmdrise var(--t-fast) var(--ease)}
.gov-panel{width:660px;max-width:92%;display:flex;flex-direction:column;gap:22px}
.gov-head{display:flex;align-items:center;gap:11px}
.gov-ico{color:var(--on-deep-accent);display:inline-flex}
.gov-ico svg{width:23px;height:23px}
.gov-title{font-family:var(--font-h),sans-serif;font-size:var(--fs-heading);font-weight:700;color:var(--on-deep)}
.gov-close{width:30px;height:30px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-9);background:var(--green-rail);color:var(--on-deep-muted);font-size:var(--fs-body)}
.gov-close:hover{color:var(--on-deep)}
.gov-lab{font-family:var(--font-mono),ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-deep-accent)}
.gov-foot{display:flex;justify-content:flex-end}
/* raccourcis clavier */
.kb-sec{display:flex;flex-direction:column;gap:10px}
.kb-row{display:flex;align-items:center;gap:16px}
.kb-keys{width:126px;flex:0 0 126px;display:flex;justify-content:flex-end;align-items:center;gap:5px}
.kb-key{font-family:var(--font-mono),ui-monospace,monospace;font-size:12px;color:#CFE0DA;
  background:var(--green-rail);border-radius:var(--r-6);padding:3px 9px;min-width:28px;text-align:center}
.kb-plus{font-family:var(--font-mono),ui-monospace,monospace;font-size:11px;color:var(--text-muted)}
.kb-lab{flex:1;font-size:13.5px;color:#DCEAE4}
/* formulaire « Nouvelle tâche » sur le plan vert */
.gov-narrow{width:568px}
.gov-title-in{width:100%;background:var(--green-rail);border:none;border-radius:var(--r-12);
  padding:15px 16px;font-family:var(--font-body);font-size:17px;color:var(--on-deep);outline:none}
.gov-title-in::placeholder{color:#8FB0A5}
.gov-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 16px}
.gov-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.gov-in{background:var(--green-rail);border:none;border-radius:var(--r-9);padding:9px 11px;
  color:var(--on-deep);font-family:var(--font-body);font-size:var(--fs-body);outline:none;width:100%}
.gov-in::placeholder{color:#8FB0A5}
.gov-ta{min-height:64px;resize:vertical;line-height:1.5}
.gov-seg{display:flex;gap:5px}
.gov-segb{flex:1;text-align:center;background:var(--green-rail);border-radius:var(--r-6);padding:8px 0;
  font-size:12px;color:var(--on-deep-muted)}
.gov-segb:hover{color:var(--on-deep)}
.gov-segb.on{background:var(--brand);color:#fff;font-weight:600}
.gov-ctx{display:flex;flex-wrap:wrap;gap:5px;align-items:center;background:var(--green-rail);
  border-radius:var(--r-9);padding:6px 8px}
.gov-tag{display:inline-flex;align-items:center;gap:4px;background:var(--green-deep);border-radius:var(--r-6);
  padding:2px 4px 2px 8px;font-size:12px;color:var(--on-deep)}
.gov-tag button{color:var(--on-deep-muted);font-size:11px;padding:0 3px}
.gov-tag button:hover{color:var(--on-deep)}
.gov-ctxin{flex:1;min-width:80px;background:none;border:none;outline:none;color:var(--on-deep);
  font-family:var(--font-body);font-size:var(--fs-body)}
.gov-ctxin::placeholder{color:#8FB0A5}
.gov-ctxsug{font-size:11px;color:var(--on-deep-muted);background:var(--green-rail);border-radius:var(--r-6);
  padding:3px 8px;margin:4px 4px 0 0}
.gov-ctxsug:hover{color:var(--on-deep)}
.gov-miss{font-size:var(--fs-caption);color:var(--urgence-text)}
.gov-acts{display:flex;align-items:center;gap:10px}
.gov-ghost{font-size:var(--fs-body);color:var(--on-deep-muted);font-weight:600;padding:10px 16px}
.gov-ghost:hover{color:var(--on-deep)}
.gov-acts .btn-primary:disabled{opacity:.45;cursor:not-allowed}
/* icônes Material du rail (fill, pas stroke) */
body.side-collapsed .navbtn .nvico-mi{fill:currentColor;stroke:none;width:22px;height:22px}
/* overlay « Tous les projets » */
.gov-wide{width:760px}
.po-count{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-body);color:var(--text-muted)}
.po-manage{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:600;
  color:var(--on-deep-muted);margin-right:6px}
.po-manage:hover{color:var(--on-deep)}
.po-heads{display:flex;align-items:center;gap:11px;padding:0 12px}
.po-h{width:54px;text-align:center;font-family:var(--font-mono),ui-monospace,monospace;
  font-size:9px;color:var(--on-deep-dim);text-transform:none}
.po-list{display:flex;flex-direction:column;gap:3px}
.po-row{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-9);
  text-align:left;color:var(--on-deep)}
.po-row:hover{background:var(--green-rail)}
.po-tile{width:22px;height:22px;border-radius:var(--r-6);font-size:11px}
.po-name{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.po-cote{color:var(--on-deep-dim);font-size:11px}
.po-nums{display:flex;gap:5px;flex:0 0 auto}
.po-n{width:54px;text-align:center;background:var(--green-rail);border-radius:7px;padding:5px 0;
  font-family:var(--font-mono),ui-monospace,monospace;font-size:12.5px;color:#DCEAE4}
/* ============ détail en swipe-up : FEUILLET DE LECTURE (Aujourd'hui) ============
   Élément indépendant du volet d'édition (#dsheet, créé par panel.js). Il monte
   sur la col.2, collé SOUS le héros remonté (body.sheeton), fond TRANSPARENT :
   la clairière reste la surface. OUVERTURE = animation (les keyframes jouent
   indépendamment de l'état précédent — deux transforms dans la même tâche JS
   sont coalescés) ; FERMETURE = transition vers l'état de base translateY(100%).
   Le rail, la barre de tête et les zones 1 et 3 ne bougent pas, sans voile. */
.dsheet{position:fixed;bottom:0;z-index:41;display:flex;flex-direction:column;
  background:transparent;transform:translateY(100%);
  transition:transform var(--t-panel) var(--ease)}
body.sheeton .dsheet{transform:none;animation:sheet-up var(--t-panel) var(--ease)}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* « Ensuite » s'efface pendant que le feuillet est ouvert (fond transparent :
   les deux textes se superposeraient) */
.cl-foot{transition:opacity var(--t-panel) var(--ease)}
body.sheeton .cl-foot{opacity:0}
/* ascenseur fin, arrondi, beige — à droite de la zone centrale (maquette) */
.ds-scroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--zone-2) transparent}
.ds-scroll::-webkit-scrollbar{width:8px}
.ds-scroll::-webkit-scrollbar-thumb{background:var(--zone-2);border-radius:var(--r-pill)}
.ds-scroll::-webkit-scrollbar-track{background:transparent}
/* le feuillet s'aligne sur le padding horizontal (38px) de la clairière */
.ds-feuillet{position:relative;display:flex;flex-direction:column;gap:18px;
  margin:0 38px 30px;padding-top:22px;border-top:1px solid var(--line)}
.ds-edit{position:absolute;top:14px;right:0;width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-9);color:var(--text-muted)}
.ds-edit:hover{background:var(--inset);color:var(--text-strong)}
.ds-edit svg{width:17px;height:17px}
/* méta en deux colonnes : libellé mono + valeur */
.ds-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px 26px}
.ds-f{display:flex;flex-direction:column;gap:3px;min-width:0}
.ds-lab{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-micro);
  letter-spacing:1px;text-transform:uppercase;color:var(--text-muted-warm)}
.ds-sublab{font-size:var(--fs-caption);color:var(--text-muted-warm)}
.ds-v{font-size:var(--fs-body);color:var(--text-strong)}
.ds-mono{font-family:var(--font-mono),ui-monospace,monospace;font-variant-numeric:tabular-nums}
.ds-dim{color:var(--text-muted-warm)}
.ds-ic{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.ds-ic .ic-sm{width:15px;height:15px;flex:0 0 auto}
.ds-st-doing{color:var(--pc,var(--brand))}   /* le statut prend la couleur du projet (maquette) */
.ds-st-todo{color:var(--text-muted)}
.ds-st-done{color:var(--brand)}
.ds-p1{color:var(--text-strong)}
.ds-p2{color:var(--urgence-text)}
.ds-en{color:var(--p04)}                     /* l'or de l'énergie (maquette) */
.ds-who{font-weight:500}
.ds-av{width:18px;height:18px;font-size:10px}
.ds-ok{color:var(--brand)}
.ds-sec{display:flex;flex-direction:column;gap:7px}
.ds-meta-c{gap:10px 26px;margin-top:3px}
.ds-chips,.ds-tags{display:flex;flex-wrap:wrap;gap:6px}
.ds-chip{background:var(--inset-green);color:var(--text-strong);font-size:var(--fs-caption);
  padding:2px 8px;border-radius:var(--r-6)}
.ds-tag{background:var(--zone);color:var(--text-strong);font-size:12px;padding:3px 10px;border-radius:var(--r-pill)}
.ds-desc{font-size:var(--fs-body);line-height:1.55;color:var(--text)}
.ds-desc img{max-width:100%;border-radius:var(--r-6)}
/* sous-tâches : compteur + barre de progression à la couleur du projet */
.ds-subhead{display:flex;align-items:center;gap:7px}
.ds-count{font-size:var(--fs-caption);color:var(--brand)}
.ds-bar{flex:1;height:4px;background:var(--line);border-radius:var(--sp-2);overflow:hidden}
.ds-bar span{display:block;height:100%;background:var(--pc,var(--brand))}
.ds-sub{display:flex;align-items:center;gap:8px;font-size:var(--fs-body);color:var(--text-strong)}
.ds-sub .ic-sm{width:17px;height:17px;color:var(--text-muted-warm);flex:0 0 auto}
.ds-sub.done{color:var(--text-muted-warm)}
.ds-sub.done .ic-sm{color:var(--pc,var(--brand))}
.ds-sub.done span{text-decoration:line-through}
.ds-att{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-body);
  color:var(--text-strong);align-self:flex-start}
.ds-att:hover{text-decoration:underline}
.ds-att .ic-sm{width:16px;height:16px;color:var(--p04);flex:0 0 auto}
.ds-link, .ds-link .ic-sm{color:var(--p01)}          /* le bleu des liens (maquette) */
.ds-note{display:flex;gap:9px;font-size:12px;color:var(--text-muted)}
.ds-when{flex:0 0 auto;opacity:.75}
/* ===== création & édition en OVERLAY (Aujourd'hui) : le volet tâche COMPLET
   sur le plan vert profond, à la manière de l'overlay « Nouvelle tâche » de la
   maquette — libellés mono, champs sur --green-rail, segments pilule, actions à
   droite. DEUX colonnes équilibrées pour qu'un maximum de champs vivent à
   l'écran sans ascenseur (écrans 16:9). ===== */
body.edov .doverlay{background:var(--green-deep);z-index:120}
/* hauteur AU CONTENU (plafonnée) : le pied — message manquant + Créer — vient
   se poser SOUS le formulaire, pas en bas de l'écran */
body.edov .dpanel{left:50%;right:auto;top:4vh;bottom:auto;max-height:92vh;width:1120px;max-width:92%;min-width:0;
  z-index:121;border:none;background:transparent}
body.edov.dopen .dpanel{transform:translateX(-50%);box-shadow:none;
  animation:edov-in var(--t-panel) var(--ease)}
@keyframes edov-in{from{transform:translate(-50%,18px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
/* tête : sélecteur de projet + témoin + fermer, posés sur le plan (sans filet) */
body.edov .dhead{border-bottom:none;padding:0 0 12px}
body.edov .d-projsel{background:var(--green-rail);border:none;color:var(--on-deep);
  border-radius:var(--r-9);padding:8px 11px}
body.edov .d-saved{color:var(--on-deep-muted)}
body.edov .dclose{background:var(--green-rail);color:var(--on-deep-muted);border-radius:var(--r-9)}
body.edov .dclose:hover{color:var(--on-deep)}
/* corps : deux colonnes (chaque champ reste entier), ascenseur fin si besoin */
body.edov .dbody{display:block;column-count:2;column-gap:var(--sp-32);padding:0 4px;overflow-x:hidden;
  min-height:0;scrollbar-width:thin;scrollbar-color:var(--green-rail) transparent}
body.edov .dbody::-webkit-scrollbar{width:8px}
body.edov .dbody::-webkit-scrollbar-thumb{background:var(--green-rail);border-radius:var(--r-pill)}
body.edov .dbody>*{break-inside:avoid;margin-bottom:14px}
/* le titre du dialogue (sr-only en volet droit) devient l'en-tête visible */
body.edov #d-title{position:static;width:auto;height:auto;margin:0 0 4px;clip:auto;overflow:visible;
  white-space:normal;column-span:all;font-family:var(--font-h),sans-serif;
  font-size:var(--fs-heading);font-weight:700;color:var(--on-deep)}
body.edov .d-titleinput{column-span:all;background:var(--green-rail);border-radius:var(--r-12);
  padding:14px 16px;font-family:var(--font-body);font-size:17px;font-weight:400;color:var(--on-deep)}
body.edov .d-titleinput::placeholder{color:#8FB0A5}
/* libellés : mono, petites capitales espacées, accent sur plan profond */
body.edov .dbody label,body.edov .dsec>summary{color:var(--on-deep-accent);
  font-family:var(--font-mono),ui-monospace,monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase}
body.edov .dbody label .opt,body.edov .dsec-c{color:var(--on-deep-dim);letter-spacing:0;text-transform:none}
/* champs : aplat --green-rail, sans bordure */
body.edov .dbody input[type=text],body.edov .dbody input[type=date],body.edov .dbody input[type=time],
body.edov .dbody input[type=number],body.edov .dbody select,body.edov .tagbox,body.edov .rte{
  background:var(--green-rail);border:none;color:var(--on-deep);border-radius:var(--r-9)}
body.edov .dbody input::placeholder,body.edov .rte:empty::before{color:#8FB0A5}
body.edov .tagbox input{background:transparent;color:var(--on-deep)}
body.edov .tagbox .tag{background:var(--green-deep);color:var(--on-deep)}
body.edov .tagbox .tag button{color:var(--on-deep-muted)}
body.edov .d-daterel,body.edov .d-estunit,body.edov .d-spent-cmp{color:var(--on-deep-muted)}
/* segments : pilules sur --green-rail, actif à la marque (comme .gov-segb) */
body.edov .seg button{background:var(--green-rail);border-color:transparent;color:var(--on-deep-muted)}
body.edov .seg button:hover{color:var(--on-deep)}
body.edov .seg button.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
/* éditeur riche : barre et zone sur le plan */
body.edov .rtb{background:var(--green-rail);border:none;border-radius:var(--r-9) var(--r-9) 0 0}
body.edov .rtb button,body.edov .rtb select{color:var(--on-deep-muted);background:transparent;border:none}
body.edov .rtb button:hover{color:var(--on-deep)}
body.edov .rte{border-radius:0 0 var(--r-9) var(--r-9);min-height:88px}
/* sections repliables : plus de filet, libellé mono */
body.edov .dsec{border-top:none}
body.edov .dsec>summary::before{color:var(--on-deep-dim)}
/* boutons secondaires en pointillé → aplat discret */
body.edov .subadd,body.edov .attbtn,body.edov .applyfollowing{background:var(--green-rail);
  border:none;color:var(--on-deep-muted);border-radius:var(--r-6)}
body.edov .subadd:hover,body.edov .attbtn:hover,body.edov .applyfollowing:hover{color:var(--on-deep)}
body.edov .checkedit,body.edov .cfbox{color:var(--on-deep)}
body.edov .att{background:var(--green-rail);border:none;color:var(--on-deep)}
body.edov .att .attname{color:var(--on-deep-accent)}
body.edov .journal{color:var(--on-deep-muted)}
/* suggestions (contextes, dépendances) : posées sur le plan */
body.edov .ctxsug,body.edov .depsug{background:var(--green-rail);border:none;box-shadow:none}
body.edov .ctxsug button,body.edov .depsug button{color:var(--on-deep)}
body.edov .ctxsug button.on,body.edov .ctxsug button:hover,
body.edov .depsug button:hover{background:var(--green-deep)}
body.edov .ctxsug .ctxnew{color:var(--on-deep-muted);border-top-color:var(--green-deep)}
body.edov .depsug .depd{color:var(--on-deep-dim)}
/* pied : actions alignées à droite, sans filet (comme .gov-acts) */
body.edov .dfoot{border-top:none;padding:14px 4px 0;justify-content:flex-end}
body.edov .dfoot .postpone{background:transparent;border:none;color:var(--on-deep-muted)}
body.edov .dfoot .postpone:hover{color:var(--on-deep)}
body.edov .dmiss{color:var(--urgence-on-deep);font-size:var(--fs-caption)}
/* tête maquette : icône + titre à gauche, témoin + croix à droite, MÊME ligne */
body.edov .dhead{position:absolute;top:0;right:0;padding:0;z-index:2}
body.edov #d-title .d-ttl-ico{width:22px;height:22px;margin-right:9px;vertical-align:-4px;
  color:var(--on-deep-accent)}
/* icônes Material dans les champs échéance / durée / heure (maquette) */
body.edov .d-icoin .d-inico,body.edov .d-estfree .d-inico{display:block;position:absolute;
  left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;
  color:var(--on-deep-muted);pointer-events:none}
body.edov .d-icoin input{padding-left:35px}
body.edov .d-estfree{position:relative}
body.edov .d-estfree input{padding-left:35px}
/* la colonne 1 reproduit la maquette (titre → description) puis enchaîne
   statut / quand·contexte / temps réel ; les sections dépliées (étiquettes,
   sous-tâches, répéter, plus…) équilibrent la colonne 2 */
body.edov .dbody{column-fill:auto}
body.edov #dsec-subs{break-before:column}
/* les groupes .d-box perdent leur CARTE beige : libellé + champ-pilule posés
   directement sur le plan, comme la maquette */
body.edov .d-box{border:none;background:transparent;padding:0;border-radius:0}
body.edov .d-boxrow{gap:16px;margin-bottom:0}
body.edov .d-box-est{flex:1.4}
/* segments : se partagent la largeur sans déborder de leur moitié */
body.edov .d-prioseg button,body.edov .d-enerseg button{flex:1;padding:8px 4px;font-size:12px;min-width:0}
/* champs date/heure : pilule pleine largeur, UNE seule icône (la nôtre, à
   gauche) — l'indicateur natif est masqué, le clic ouvre le sélecteur (JS) */
body.edov .d-box input[type=date],body.edov .d-box input[type=time]{padding:9px 11px;font-size:var(--fs-body)}
body.edov .dbody input[type=time]::-webkit-calendar-picker-indicator{display:none}
/* [type=…] nécessaire : sans lui, « .d-box input[type=date] » (plus spécifique)
   reprenait la main et le texte passait SOUS l'icône */
body.edov .d-icoin input[type=date],body.edov .d-icoin input[type=time]{padding:9px 11px 9px 35px}
body.edov .d-daterel{color:var(--on-deep-muted)}
/* saisie libre de durée + temps réel : pilule qui prend la largeur restante */
body.edov .d-estfree input[type=number]{flex:1;width:auto;padding:8px 10px 8px 35px;font-size:var(--fs-body)}
body.edov .d-spentrow input[type=number]{width:auto;flex:0 1 8em;padding:8px 10px;font-size:var(--fs-body)}
/* projet : la pilule englobe tuile + sélecteur (champ de la maquette) */
body.edov .d-projwrap{background:var(--green-rail);border-radius:var(--r-9);padding:6px 8px 6px 10px;gap:9px}
body.edov .d-projsel{background:transparent;flex:1;width:100%;padding:4px 2px;font-size:var(--fs-body)}
/* contexte : la boîte à puces redevient une pilule pleine largeur */
body.edov .d-box-ctx .tagbox{background:var(--green-rail);padding:7px 10px;border-radius:var(--r-9)}
/* éditeur : plus de bordures beiges héritées, hauteur contenue */
body.edov .rtb{border:none}
body.edov .rtb .sep{background:var(--green-deep)}
body.edov .rte{border:none;min-height:88px;max-height:26vh}
/* pied : bouton primaire à la marque, même désactivé (jamais de beige) */
body.edov .dfoot .primary{background:var(--brand);color:#fff}
body.edov .dfoot .primary:disabled{background:var(--green-rail);color:var(--on-deep-dim)}
/* champ nombre : pas de flèches (maquette — la saisie est directe) */
body.edov .dbody input[type=number]{appearance:textfield;-moz-appearance:textfield}
body.edov .dbody input[type=number]::-webkit-inner-spin-button,
body.edov .dbody input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* moitiés ÉGALES dans chaque rangée (alignement maquette) */
body.edov .d-box-est,body.edov .d-box-ctx{flex:1}
body.edov .d-estseg button{flex:1;min-width:0;padding:6px 4px;font-size:11.5px;white-space:nowrap}
body.edov .d-status button{flex:1}
/* libellé → champ : respiration constante */
body.edov .dbody label,body.edov .d-box label{margin-bottom:6px}
/* champ de lien en ligne */
.linkform{display:flex;gap:6px;margin-top:6px;align-items:center}
.linkform input{flex:1;min-width:0;border:1px solid var(--line);border-radius:7px;padding:6px 9px;
  background:var(--paper);outline:none;font-size:.86rem;color:var(--ink)}
.linkform input:focus{border-color:var(--accent)}
.linkform .attbtn{flex:0 0 auto}
body.edov .linkform input{background:var(--green-rail);border:none;color:var(--on-deep)}
/* écran étroit : une seule colonne (les deux colonnes seraient illisibles) */
@media (max-width:1100px){
  body.edov .dbody{column-count:1}
  body.edov #dsec-subs{break-before:auto}
}
.dcol .toolbar{margin-top:auto}
/* filtres « faisable maintenant » au-dessus de la liste (col.1) : UN GROUPE
   PAR AXE — libellé mono en colonne fixe, puces alignées, un axe par ligne.
   Puces en aplat --zone-2, active à la marque — aucun trait. */
.fgrp{display:inline-flex;align-items:center;gap:6px}          /* repli (vues héritées) */
.fchips{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center}
.dcol-journee .filterbar{display:flex;flex-direction:column;align-items:stretch;gap:6px;
  margin:2px 0 var(--sp-8);border:none;box-shadow:none;
  background:var(--grid-empty);border-radius:11px;padding:10px 12px}
.dcol-journee .fgrp{display:grid;grid-template-columns:76px 1fr;align-items:start;gap:var(--sp-8)}
.dcol-journee .fbar-l{font-family:var(--font-mono),ui-monospace,monospace;
  font-size:var(--fs-micro);letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);
  padding-top:5px;white-space:nowrap}
.dcol-journee .fchips{display:flex;flex-wrap:wrap;gap:4px}
/* puces (maquette) : inactives SANS fond — icône + libellé ; active = pilule à
   la marque, icône et texte en blanc */
.dcol-journee .fchip{display:inline-flex;align-items:center;gap:5px;background:transparent;
  border:none;border-radius:var(--r-pill);padding:3px 9px;font-size:var(--fs-caption);
  font-weight:600;color:var(--text);box-shadow:none}
.dcol-journee .fchip .ic-sm{width:15px;height:15px;color:var(--text-strong);flex:0 0 auto}
.dcol-journee .fchip:hover{background:var(--zone-2);filter:none}
.dcol-journee .fchip.on{background:var(--brand);color:#fff}
.dcol-journee .fchip.on .ic-sm{color:#fff}
/* avatar-initiales des assignés (2 lettres, teinte du membre `--av`).
   ⚠️ Deux initiales, c'est du TEXTE : ni `#fff` (la gamme sombre est claire →
   ~1,9:1) ni `--on-tint` (plafonné à 3,11:1 clair / 3,67:1 sombre, que le skill
   déclare « insuffisant pour du texte ») ne tiennent AA. On ASSIED donc la teinte
   sous une encre blanche — la recette `--hc-deep` d'Habitudes et Challenges,
   mesurée ≥ 4,9:1 sur toute la gamme. D'où `--av` posé en variable au rendu : un
   `background` inline ne pourrait pas suivre le thème. */
.f-av{width:18px;height:18px;border-radius:50%;flex:0 0 auto;
  background:color-mix(in srgb, var(--av, var(--brand)) var(--seat), var(--green-deep));
  color:var(--on-brand);
  font-size:var(--fs-micro);font-weight:700;display:inline-flex;align-items:center;
  justify-content:center;letter-spacing:.02em}
.dcol-journee .fgrp-state{grid-template-columns:1fr auto;align-items:center}
.dcol-journee .fbar-cnt{font-size:var(--fs-caption);color:var(--text-muted)}
/* en colonne étroite, les actions de survol passent en overlay (comme le kanban)
   au lieu de voler la largeur de la ligne → le titre garde sa place */
.day3 .tacts{position:absolute;right:var(--sp-8);top:var(--sp-8);opacity:0;
  background:var(--card);border-radius:var(--r-6);padding:2px}
.day3 .task:hover .tacts{opacity:1}
.clairiere{min-height:220px;display:flex;flex-direction:column;gap:var(--sp-12)}
.clairiere-empty{align-items:center;justify-content:center}
.cl-empty{color:var(--text-muted);font-family:var(--font-h),sans-serif;font-size:var(--fs-heading);opacity:.7}
/* clairière focalisée : la tâche en cours fondue dans la lumière, titre XL */
.clairiere-focus,.clairiere-start{justify-content:flex-start}
.clairiere-focus .task,.clairiere-start .task{background:transparent;border:none;box-shadow:none;padding:0;margin:0;align-items:flex-start}
.clairiere-focus .task .ttl,.clairiere-start .task .ttl{
  font-family:var(--font-h),sans-serif;font-weight:700;font-size:var(--fs-title);line-height:1.12;margin-bottom:var(--sp-4)}
.clairiere-focus .task .tbody,.clairiere-start .task .tbody{display:flex;flex-direction:column;gap:var(--sp-8)}
.clairiere-focus .task .ttime{margin-top:var(--sp-8);font-size:var(--fs-body-lg)}
.cl-lab{font-size:var(--fs-caption);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);font-weight:600}
.cl-lab-idle{margin-bottom:auto}
.cl-startwrap{margin:auto 0;display:flex;flex-direction:column;gap:var(--sp-16)}
.cl-ensuite{margin-top:auto;padding-top:var(--sp-24);display:flex;flex-direction:column;gap:var(--sp-8)}
.cl-ensuite .cl-lab{margin-bottom:var(--sp-4)}
.cl-next{display:flex;align-items:center;gap:var(--sp-12)}
.cl-next-bar{width:4px;height:18px;background:var(--pc);border-radius:2px;flex:0 0 auto}
.cl-next-ttl{flex:1;min-width:0;font-size:var(--fs-body-lg);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* v3 : épuration de la carte focalisée — on garde titre + méta essentielle + chrono */
.clairiere-focus .task .tnote,
.clairiere-focus .task .notetoggle,
.clairiere-focus .task .checklist,
.clairiere-focus .task .lchip,
.clairiere-focus .task .tz-real{display:none}
/* grand chrono : l'horloge de la tâche en cours, à la seconde */
.cl-bigtimer{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-display);
  font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-strong);
  line-height:1;letter-spacing:-.02em;margin-top:var(--sp-8)}
/* la coquille 3 zones prend toute la largeur (déroge à la largeur de lecture de #main) */
#main:has(.day3){max-width:none}
#main:has(.day3) .dayhead{padding:0 var(--sp-24)}
/* repli responsive (< 1200px, point ouvert du DS) : colonne unique */
@media (max-width:1200px){
  .day3{grid-template-columns:1fr}
  .dcol{gap:var(--sp-12)}
  .dcol .toolbar{margin-top:0}
}

/* ============ écran Trier : file d'attente une-à-la-fois (design system) ============
   Trois zones sous la barre de tête : boîte de capture (--zone), item en cours
   (--card, halo de clairière), trié aujourd'hui (--green-deep). Zéro ornement. */
body.v-inbox{overflow:hidden}
body.v-inbox #mainscroll{padding:0}
#main:has(.inb3){max-width:none}
.inb3{display:grid;grid-template-columns:340px minmax(0,1fr) 250px;
  align-items:stretch;height:calc(100vh - var(--sp-44))}
.icol{min-width:0;min-height:0;overflow-y:auto;scrollbar-width:none}
.icol::-webkit-scrollbar{width:0;height:0}

/* --- zone 1 : la boîte de capture --- */
.icol-file{background:var(--zone);padding:var(--sp-16) 14px;display:flex;flex-direction:column;gap:2px}
.if-lab{font-family:var(--font-mono),ui-monospace,monospace;font-size:10.5px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.if-list{display:flex;flex-direction:column;gap:2px}
.iq{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--r-9);
  text-align:left;width:100%}
.iq:hover{background:var(--zone-2)}
.iq.on{background:var(--zone-2);outline:2px solid var(--brand)}
.iq-lead{width:18px;flex:0 0 18px;display:inline-flex;align-items:center;justify-content:center;color:var(--brand)}
.iq-lead .ic{width:18px;height:18px}
.iq-t{flex:1;min-width:0;font-size:var(--fs-body);color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iq.on .iq-t{font-weight:600;color:var(--text-strong)}

/* --- zone 2 : l'item en cours (clairière du tri) --- */
.icol-cur{background:var(--card);position:relative;padding:34px 40px;
  display:flex;flex-direction:column}
.icol-cur::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 60% at 50% 40%, var(--card-hi), transparent 72%)}
.icol-cur>*{position:relative;z-index:1}
.ic-state{display:flex;align-items:center;gap:var(--sp-8);color:var(--text-muted)}
.ic-state>.ic{width:16px;height:16px;color:var(--brand);flex:0 0 auto}
.ic-pos{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-caption);
  letter-spacing:1px;font-weight:600;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}
.ic-meta{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-caption);color:var(--cote);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ic-mid{margin:auto 0;display:flex;flex-direction:column;gap:var(--sp-24);padding:var(--sp-24) 0}
.ic-titlerow{display:flex;align-items:flex-start;gap:var(--sp-12)}
.ic-title{flex:1;min-width:0;font-family:var(--font-h),sans-serif;font-size:var(--fs-title);
  font-weight:700;line-height:1.05;color:var(--ink)}
.ic-edit{width:30px;height:30px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-9);color:var(--text-muted)}
.ic-edit:hover{background:var(--inset);color:var(--text-strong)}
.ic-edit svg{width:17px;height:17px}
.ic-g{display:flex;flex-direction:column;gap:var(--sp-8)}
.ic-glab{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-micro);
  letter-spacing:1px;text-transform:uppercase;color:var(--text-muted-warm)}
.ic-grow{display:flex;gap:36px;flex-wrap:wrap}
.ic-chips{display:flex;flex-wrap:wrap;gap:var(--sp-8);align-items:center}
.ichip{display:inline-flex;align-items:center;gap:5px;padding:6px var(--sp-12);
  border-radius:var(--r-9);font-size:var(--fs-body);background:var(--inset);color:var(--text)}
.ichip:hover{filter:brightness(.97)}
.ichip.on{background:var(--brand);color:#fff;font-weight:600}
.ichip .ic-sm{width:15px;height:15px;flex:0 0 auto}
.ichip-proj{gap:6px;padding:7px var(--sp-12)}
.ichip-proj .ptile{width:18px;height:18px;font-size:10px}
.ichip-proj.on{background:var(--pc);color:var(--on-tint)}
.ichip-proj.on .ptile{background:var(--on-tint);color:var(--pc)}
.ichip-more{color:var(--text-muted)}
/* puce-champ : saisie libre (durée « autre », nouveau contexte) */
.ichip-in{padding:4px var(--sp-8);cursor:text}
.ichip-in.on{outline:2px solid var(--brand)}
.ichip-in input{background:none;border:none;outline:none;width:56px;
  font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-body);color:var(--text)}
.ichip-in input::placeholder{color:var(--text-muted)}
.ichip-in input[type=number]{appearance:textfield;-moz-appearance:textfield}
.ichip-in input[type=number]::-webkit-outer-spin-button,
.ichip-in input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ichip-in input[type=text]{width:130px;font-family:var(--font-body),system-ui,sans-serif}
.ichip-unit{font-size:var(--fs-caption);color:var(--text-muted)}
.ic-foot{margin-top:auto;display:flex;align-items:center;gap:var(--sp-12);flex-wrap:wrap}
.ic-file{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:#fff;
  border-radius:var(--r-9);padding:11px 22px;font-size:var(--fs-body-lg);font-weight:600}
.ic-file:hover{background:var(--brand-hover)}
.ic-file:disabled{opacity:.45;cursor:default}
.ic-file:disabled:hover{background:var(--brand)}
.ic-file .ic-sm{width:19px;height:19px}
.ic-skip{display:inline-flex;align-items:center;gap:6px;color:var(--text-muted);
  font-size:var(--fs-body);font-weight:600;padding:11px var(--sp-8)}
.ic-skip:hover{color:var(--text-strong)}
.ic-skip .ic-sm{width:18px;height:18px}
.ic-missing{font-size:var(--fs-caption);color:var(--urgence-text)}
.ic-del{display:inline-flex;align-items:center;gap:6px;color:var(--urgence-text);
  font-size:var(--fs-body);font-weight:600}
.ic-del:hover{text-decoration:underline}
.ic-del .ic-sm{width:17px;height:17px}
.ic-empty{margin:auto;text-align:center;display:flex;flex-direction:column;gap:var(--sp-8)}
.ic-empty-big{font-family:var(--font-h),sans-serif;font-size:var(--fs-heading);font-weight:700;color:var(--ink)}
.ic-empty-body{font-size:var(--fs-body);color:var(--text-muted)}

/* --- zone 3 : trié aujourd'hui (plan vert profond) --- */
.icol-sorted{background:var(--green-deep);color:var(--on-deep);padding:var(--sp-16) 15px;
  display:flex;flex-direction:column;gap:var(--sp-12)}
.is-head{display:flex;align-items:center;gap:var(--sp-8);
  font-family:var(--font-mono),ui-monospace,monospace;font-size:10.5px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase}
.is-head .ic-sm{width:17px;height:17px;color:var(--on-deep-accent);flex:0 0 auto}
.is-count{display:flex;align-items:baseline;gap:var(--sp-8)}
.is-n{font-family:var(--font-h),sans-serif;font-size:var(--fs-title);font-weight:800;color:#fff;line-height:.9}
.is-sub{font-size:12px;color:var(--on-deep-muted)}
.is-list{display:flex;flex-direction:column;gap:6px;overflow-y:auto;min-height:0;scrollbar-width:none}
.is-list::-webkit-scrollbar{width:0}
.is-row{display:flex;align-items:center;gap:var(--sp-8)}
.is-row .ic-sm{width:15px;height:15px;color:var(--on-deep-accent);flex:0 0 auto}
/* --on-deep-muted et non -dim : à 10px sur --green-deep, -dim tombe à 3,5:1 (< AA) */
.is-cote{width:34px;color:var(--on-deep-muted)}
.is-t{flex:1;min-width:0;font-size:12px;color:var(--on-deep);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.is-proj{color:var(--on-deep-muted)}

/* indication de l'overlay Capturer, sous le champ */
.cap-hint{font-size:var(--fs-caption);color:var(--on-deep-muted);line-height:1.4}

/* repli responsive (< 1200px, point ouvert du DS) : colonne unique */
@media (max-width:1200px){
  body.v-inbox{overflow:auto}
  .inb3{display:flex;flex-direction:column;height:auto}
  .icol{overflow:visible}
  .icol-cur{min-height:420px}
}

/* ============ écran « À venir » : 3 modes (design system) ============
   Semaine (grille horaire) · Mois · Planning.
   La barre de tête porte le titre, la période et les segments ; la surface est
   pleine hauteur, sans ascenseur de page (le Planning, lui, défile). */
body.v-up{overflow:hidden}
body.v-up #mainscroll{padding:0}
#main:has(.wk3),#main:has(.upcal),#main:has(.uplist){max-width:none}
/* segments et navigation de période dans la barre de tête */
.ts-nav{display:inline-flex;align-items:center;gap:var(--sp-4);margin-left:var(--sp-4)}
.ts-navb{width:26px;height:26px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  border-radius:7px;color:var(--on-deep-muted)}
.ts-navb:hover{background:var(--green-deep);color:var(--on-deep)}
.ts-navb .ic{width:18px;height:18px}
.ts-period{font-family:var(--font-mono),ui-monospace,monospace;font-size:12px;color:var(--on-deep);
  min-width:112px;text-align:center;white-space:nowrap}
.ts-segs{display:flex;background:var(--green-deep);border-radius:var(--r-9);padding:2px;flex:0 0 auto}
.ts-seg{font-size:12px;color:var(--on-deep-muted);padding:5px var(--sp-12);border-radius:7px;white-space:nowrap}
.ts-seg:hover{color:var(--on-deep)}
.ts-seg.on{background:var(--mint);color:var(--green-deep);font-weight:600}

/* ---- Planning : la semaine en liste, sur le plan profond ---- */
.uplist{background:var(--green-deep);min-height:calc(100vh - var(--sp-44));
  padding:14px;display:flex;flex-direction:column;gap:var(--sp-16)}
.upgrp{width:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:6px}
.upgrp-h{display:flex;align-items:baseline;gap:var(--sp-8);width:100%;text-align:left;padding:0 2px}
.upgrp-t{font-family:var(--font-h),sans-serif;font-size:16px;font-weight:800;color:var(--on-deep)}
.upgrp-t.auj{color:var(--on-deep-accent)}
.upgrp-t.we{color:var(--on-deep-muted)}
.upgrp-s{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-caption);color:var(--on-deep-muted)}
.upgrp-body{display:flex;flex-direction:column;gap:6px}
.upgrp-body.dragover{outline:2px solid var(--on-deep-accent);outline-offset:3px;border-radius:var(--r-9)}
.uprow{background:var(--card-hi);border:none;box-shadow:none;margin:0;
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-9);cursor:pointer;min-height:0}
.upgrp-we .uprow{background:var(--inset)}
.uprow:hover{outline:1px solid var(--brand)}
.uprow .ptile{width:17px;height:17px;border-radius:5px;font-size:10px}
.uprow-due{font-family:var(--font-mono),ui-monospace,monospace;font-size:9px;color:var(--urgence-text);flex:0 0 auto}
.uprow-t{flex:1;min-width:0;font-size:var(--fs-body);color:var(--text-strong);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uprow.done .uprow-t{color:var(--text-muted);text-decoration:line-through}
.uprow-dur{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-caption);
  color:var(--text-muted);flex:0 0 auto;min-width:34px;text-align:right}
.upempty{font-size:var(--fs-caption);color:var(--on-deep-muted);padding:2px 4px}
.uplist .agmilestone{margin:0;border:none}

/* ---- Mois : cases sur le plan profond ---- */
.upcal{background:var(--green-deep);height:calc(100vh - var(--sp-44));
  padding:14px;display:flex;flex-direction:column;gap:6px;min-height:0}
.upcal .cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:0;
  font-family:var(--font-mono),ui-monospace,monospace;font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--on-deep-muted);text-align:center}
.upcal .cal-wd{padding:0;border:none;background:none;color:inherit;font:inherit}
.upcal .cal{flex:1;display:grid;grid-template-columns:repeat(7,1fr);
  grid-auto-rows:minmax(0,1fr);gap:6px;min-height:0;margin:0;border:none;background:none}
.upcal .cal-cell{background:var(--zone);border:none;box-shadow:none;border-radius:var(--r-9);padding:6px 7px;
  display:flex;flex-direction:column;gap:4px;min-height:0;overflow:hidden}
.upcal .cal-cell.we{background:var(--zone-2)}
.upcal .cal-cell.other{background:var(--zone-2)}
/* Jours hors mois : le retrait se dit par le FOND (--zone-2) et non par un
   texte pâli — l'opacité héritée (.cal-cell.other .cal-d) tombait à ~1,5:1, et
   --text-muted n'y atteint que 3,1:1. Le numéro garde donc --text (5,96:1). */
.upcal .cal-cell.other .cal-d{color:var(--text);opacity:1}
.upcal .cal-cell.today{background:var(--card);box-shadow:none;outline:2px solid var(--brand);outline-offset:-2px}
.upcal .cal-cell.today .cal-d{color:var(--brand);font-weight:600}
.upcal .cal-cell.dragover{outline:2px solid var(--brand);outline-offset:-2px}
.upcal .cal-d{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-caption);
  font-weight:400;color:var(--text);display:flex;align-items:center;gap:5px}
.upcal .cal-n{font-size:9px;color:var(--text-muted);background:none;padding:0}
.upcal .cal-chip{font-size:var(--fs-caption);border:none;border-radius:5px;padding:2px 5px;
  background:var(--card-hi);color:var(--text-strong);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:4px}
.upcal .cal-chip::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--pc);flex:0 0 7px}
.upcal .cal-chip.done{color:var(--text-muted);text-decoration:line-through;opacity:1}
.upcal .cal-more{font-size:9px;color:var(--text-muted)}

/* « En retrait » se dit par une valeur PLUS SOMBRE. En clair, --zone-2 est plus
   sombre que --zone : le week-end et les jours hors mois reculent. En sombre le
   rapport s'inverse (--zone-2 y est plus clair, il sert aux boutons), d'où ce
   plan dédié : le retrait reste un retrait dans les deux thèmes. */
[data-theme="dark"] .upcal .cal-cell.we,
[data-theme="dark"] .upcal .cal-cell.other{background:var(--green-rail)}

/* Mobile : le Mois ne garde que le compteur par jour (SCREENS.md §4). La règle
   historique `.cal-chip{display:none}` a une classe de moins que `.upcal
   .cal-chip` : sans ce rappel, les pastilles resteraient et s'écraseraient. */
@media (max-width:760px){
  .upcal .cal-chip,.upcal .cal-more{display:none}
  .upcal{height:auto;padding:var(--sp-8)}
}

/* repli responsive (< 1200px, point ouvert du DS) */
@media (max-width:1200px){
  .wk3{overflow-x:auto;padding:var(--sp-8)}
  .ts-period{min-width:0}
  .ts-seg{padding:5px var(--sp-8)}
}

/* ---- « À venir » v2 : Semaine en grille horaire, Planning en liste continue ---- */
/* Semaine : bloc retard en tête, puis la grille qui prend le reste */
/* la surface de la Semaine : bloc retard, puis la grille qui prend le reste */
.wk3{display:flex;flex-direction:column;gap:var(--sp-12);padding:14px;
  height:calc(100vh - var(--sp-44));min-height:0;overflow:hidden}
.up-late{flex:0 0 auto}
.up-late .lateblock{margin-top:0}
/* version large (Semaine, Mois) : les lignes se répartissent en colonnes tant
   qu'il y a de la place — même bloc borné, simplement mieux rempli */
.lb-wide .lb-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--sp-2) var(--sp-24)}
.lb-wide .lb-row{min-width:0}
.lb-wide .lb-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk3 .wk{flex:1;min-height:0;display:flex;flex-direction:column;margin:0}
/* la grille s'étire sur la place restante : la journée entière tient à l'écran,
   sans ascenseur (les blocs sont placés en % de la fenêtre horaire) */
.wk3 .wk-row.wk-grid{flex:1;min-height:0;padding-top:var(--sp-8);align-items:stretch;
  grid-auto-rows:100%}
.wk3 .wk-hours,.wk3 .wk-col{height:100%}
/* plancher plus bas que l'agenda du Jour (AG_MIN_H, 20px) : la grille de la
   Semaine est comprimée pour tenir à l'écran, un plancher trop haut ferait
   déborder les tâches courtes hors de leur créneau */
.wk3 .wk-col .ag-bloc{min-height:var(--sp-16)}
/* heures hors de la plage ouverte du jour : présentes mais en retrait */
.wk-off{position:absolute;left:0;right:0;background:var(--zone-2);pointer-events:none;z-index:0}
.wk3 .wk-col.auj .wk-off{background:var(--inset)}
[data-theme="dark"] .wk-off{background:var(--green-deep)}
/* pastille de projet dans les tâches « à placer » (grammaire du design system) */
.wk3 .wk-band{background:var(--zone);border:none;border-radius:var(--r-9);min-width:0;
  max-height:26vh;overflow-y:auto;scrollbar-width:none}
.wk3 .wk-band::-webkit-scrollbar{width:0}
.wk3 .wk-band.vide{background:none}
.wk3 .wk-band .ag-chip{display:flex;flex-direction:row;align-items:center;gap:5px;min-width:0;
  padding:5px 6px;background:var(--card-hi);border:none;box-shadow:none;text-align:left}
.wk3 .wk-band .ag-chip.flou{background:var(--inset)}
.wk3 .wk-band .ag-chip .ptile{width:15px;height:15px;border-radius:4px;font-size:9px}
/* le titre s'ellipse au lieu d'élargir la colonne (min-width:0 sur toute la chaîne) */
.wk3 .wk-band .ag-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--fs-caption);color:var(--text-strong)}
.wk3 .wk-band-n{font-family:var(--font-mono),ui-monospace,monospace;font-size:9.5px;color:var(--text-muted)}
.wk3 .wk-gut-lab{font-family:var(--font-mono),ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
/* en-têtes de jour : grammaire du design system (nom Bricolage + quantième mono) */
.wk3 .wk-dh{display:flex;flex-direction:column;align-items:center;gap:1px;padding:2px 0;
  background:none;border:none;width:100%}
.wk3 .wk-wd{font-family:var(--font-mono),ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.wk3 .wk-dn{font-family:var(--font-h),sans-serif;font-size:var(--fs-subhead);font-weight:800;color:var(--ink)}
.wk3 .wk-dh.auj .wk-wd{color:var(--brand)}
.wk3 .wk-dh.auj .wk-dn{width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-body-lg)}
/* colonnes de la grille : un aplat, pas une carte */
.wk3 .wk-col{background:var(--zone);border:none;border-radius:var(--r-6)}
.wk3 .wk-col.auj{background:var(--card)}
.wk3 .wk-hours{font-family:var(--font-mono),ui-monospace,monospace}
/* aucun jour ouvert : on dit pourquoi, et où le régler */
.wk-nodays{margin:auto;text-align:center;display:flex;flex-direction:column;gap:var(--sp-8);max-width:38ch}
.wk-nodays-t{font-family:var(--font-h),sans-serif;font-size:var(--fs-heading);font-weight:700;color:var(--ink)}
.wk-nodays-b{font-size:var(--fs-body);color:var(--text-muted)}

/* Planning : ascenseur INTERNE à la liste (comme la clairière du Jour) */
.uplist{height:calc(100vh - var(--sp-44));overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--on-deep-dim) transparent}
.uplist::-webkit-scrollbar{width:8px}
.uplist::-webkit-scrollbar-thumb{background:var(--on-deep-dim);border-radius:var(--r-pill)}
.uplist::-webkit-scrollbar-track{background:transparent}
.upload{width:100%;max-width:760px;margin:0 auto;text-align:center;padding:var(--sp-12);
  min-height:var(--sp-44);font-size:var(--fs-caption);color:var(--on-deep-muted)}
.upload:hover{color:var(--on-deep)}
.upend{width:100%;max-width:760px;margin:0 auto;text-align:center;padding:var(--sp-8);
  font-family:var(--font-mono),ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--on-deep-dim)}
/* bouton « Aujourd'hui » du Planning, à la place des flèches de période */
.ts-today{font-family:var(--font-mono),ui-monospace,monospace;font-size:12px;
  color:var(--on-deep-muted);padding:5px var(--sp-8);border-radius:7px;white-space:nowrap;margin-left:var(--sp-4)}
.ts-today:hover{background:var(--green-deep);color:var(--on-deep)}

/* Réglage « Plages horaires » : une ligne par jour, décochable */
.dhr{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;
  gap:var(--sp-8);min-height:var(--sp-44)}
.dhr-d{display:flex;align-items:center;gap:var(--sp-8);cursor:pointer;min-height:var(--sp-44)}
.dhr-d input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}
/* champ du design system : un aplat, pas un filet */
.dhr-t{width:96px;background:var(--inset);border:none;border-radius:var(--r-9);
  padding:9px var(--sp-8);font-family:var(--font-mono),ui-monospace,monospace;
  font-size:var(--fs-body);color:var(--text-strong)}
.dhr-t:disabled{opacity:.4;cursor:not-allowed}
.dhr-sep{color:var(--text-muted)}
.dhr.off .dhr-d span,.dhr.off .dhr-sep{color:var(--text-muted)}

/* ============ écran Habitudes : « lecture + action » (design system) ============
   Une seule surface (--zone) sous la barre de tête, ascenseur interne. En tête,
   une forme unique : le héros de la série globale adossé au calendrier
   d'assiduité de TOUTES les habitudes. Puis une carte par habitude, à sa
   couleur, avec le pointage du jour et l'année dépliable.
   ⚠️ `.pheat` vient de l'ancienne passe et n'a plus qu'un consommateur : le
   dépliant d'année ci-dessous. `.hbcheck`, lui, sert encore la tranche
   d'« Aujourd'hui » — ne pas le réécrire ici. */
body.v-habits{overflow:hidden}
body.v-habits #mainscroll{padding:0}
#main:has(.habscreen){max-width:none}
.habscreen{background:var(--zone);height:calc(100vh - var(--sp-44));overflow-y:auto;
  padding:var(--sp-24) 26px;display:flex;flex-direction:column;gap:var(--sp-16)}

.hab-head{display:flex;align-items:baseline;gap:var(--sp-12);flex-wrap:wrap;min-width:0}
.hab-title{font-family:var(--font-h),sans-serif;font-size:var(--fs-heading);font-weight:800;
  color:var(--ink);line-height:1.1}
/* label mono de section — --text et non --text-muted : sur --zone le muet tombe
   à 4,4:1 (sous AA) là où --text tient 6,8:1 */
.hab-lab{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-caption);
  font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--text)}

/* --- héros de la série globale + calendrier d'assiduité --- */
.hab-top{display:flex;gap:14px;align-items:stretch;min-width:0}
.hab-hero{flex:0 0 240px;background:var(--brand);border-radius:var(--r-12);
  padding:20px 22px;display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-12)}
/* sombre : --brand s'éclaircit et ne porte plus AA sous un texte clair — le
   héros passe alors sur le plan profond, pour lequel --on-deep est fait */
:root[data-theme="dark"] .hab-hero{background:var(--green-deep)}
.hab-lab-deep{color:var(--on-deep)}
.hab-heron{display:flex;align-items:flex-end;gap:10px}
.hab-num{font-family:var(--font-h),sans-serif;font-weight:800;font-size:var(--fs-display);
  line-height:.86;color:var(--on-deep);font-variant-numeric:tabular-nums}
.hab-flame{width:30px;height:30px;flex:0 0 auto;color:var(--mint);margin-bottom:6px}
.hab-herofoot{font-size:var(--fs-body);color:var(--on-deep)}
.hab-herofoot b{font-family:var(--font-mono),ui-monospace,monospace;font-weight:600}

.hab-assid{flex:1;min-width:0;background:var(--card);border-radius:var(--r-12);
  padding:var(--sp-16) 20px;display:flex;flex-direction:column;gap:10px}
.hab-assid-h{display:flex;align-items:center;gap:var(--sp-8);min-width:0}
.hab-legend{display:flex;align-items:center;gap:var(--sp-4);white-space:nowrap;
  font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-micro);
  color:var(--text-muted-warm)}
.hab-ramp{display:inline-flex;gap:var(--sp-2)}
.hab-lgc{width:9px;height:9px;border-radius:var(--sp-2);background:var(--lv)}
.hab-grid{display:flex;gap:3px;min-width:0}
.hab-rows{display:grid;grid-template-rows:repeat(7,1fr);gap:3px;
  font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-micro);
  color:var(--text-muted-warm);text-transform:uppercase}
.hab-rows span{display:flex;align-items:center}
/* nombre de colonnes posé au rendu (--habw) : une grille figée à repeat(26)
   réserverait ses pistes même si la fenêtre en portait moins */
.hab-cols{flex:1;min-width:0;display:grid;grid-template-columns:repeat(var(--habw),1fr);gap:3px}
.hab-hcol{display:grid;grid-template-rows:repeat(7,1fr);gap:3px}
.hab-hc{aspect-ratio:1;border-radius:var(--sp-2);background:var(--lv,var(--heat-1))}
.hab-hc-fut{background:transparent}

/* --- une carte par habitude --- */
/* align-items:start — sans quoi déplier l'année d'une carte étire sa voisine */
.hab-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.hab-card{background:var(--card);border-radius:var(--r-12);padding:var(--sp-16) 18px;
  display:flex;flex-direction:column;gap:var(--sp-12);min-width:0;
  /* version « assise » de la couleur de l'habitude : la teinte reste, la valeur
     descend assez pour porter du texte BLANC (--on-tint ne convient pas ici : il
     s'inverse avec le thème alors que ce fond, lui, reste sombre des deux côtés).
     Proportion = le token `--seat` : calée sur le PIRE cas de la gamme --p01..14,
     64 % en clair (4,93:1, pire cas --p10) et 50 % en sombre (5,14:1). Ne pas la
     remonter sans refaire la mesure sur toute la gamme. */
  --hc-deep:color-mix(in srgb, var(--hc) var(--seat), var(--green-deep))}
.hab-card.todo{background:var(--inset)}   /* pas encore pointée aujourd'hui */
.hab-card-h{display:flex;align-items:center;gap:11px;min-width:0}
.hab-tile{width:34px;height:34px;flex:0 0 34px;background:var(--hc);border-radius:var(--r-9);
  color:var(--on-tint);display:inline-flex;align-items:center;justify-content:center}
.hab-tile .ic{width:20px;height:20px}
.hab-id{flex:1;min-width:0}
.hab-name{font-size:var(--fs-body-lg);font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hab-sub{font-size:var(--fs-caption);color:var(--text-muted-warm);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hab-chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-4);
  flex:0 0 auto;min-height:var(--sp-32);padding:var(--sp-4) 11px;border-radius:var(--r-9);
  background:var(--zone-2);color:var(--text-strong);
  font-size:var(--fs-caption);font-weight:600;white-space:nowrap}
.hab-chip .ic{width:14px;height:14px}
.hab-chip:hover{background:var(--grid-empty)}
.hab-chip.on{background:var(--hc-deep);color:#FFFFFF}
.hab-chip.on:hover{background:color-mix(in srgb, var(--hc) 40%, var(--green-deep))}
.hab-chip.na{background:var(--grid-empty);color:var(--text)}
.hab-acts{display:flex;gap:var(--sp-2);flex:0 0 auto}
.hab-acts button{width:var(--sp-32);height:var(--sp-32);border-radius:var(--r-9);
  color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center}
.hab-acts button .ic{width:18px;height:18px}
.hab-acts button:hover{background:var(--zone-2);color:var(--text-strong)}

/* les 7 derniers jours : trois états dits par le FOND, jamais par l'opacité */
.hab-card-f{display:flex;align-items:center;gap:14px;min-width:0}
.hab-discs{display:flex;gap:5px;flex-wrap:wrap}
.hab-disc{width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--fs-body);font-weight:600}
.hab-disc.on{background:var(--hc-deep);color:#FFFFFF}
.hab-disc.miss{background:var(--grid-empty);color:var(--text)}
.hab-disc.na{background:transparent;color:var(--text-muted-warm)}
.hab-disc.now:not(.on){outline:2px solid var(--hc);outline-offset:-2px}
.hab-count{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-body);
  font-weight:600;color:var(--text);white-space:nowrap}

/* --- l'année d'une habitude, dépliée à la demande --- */
.hab-more{display:inline-flex;align-items:center;gap:var(--sp-4);align-self:flex-start;
  min-height:var(--sp-32);padding:var(--sp-4) var(--sp-8);border-radius:var(--r-9);
  font-size:var(--fs-caption);font-weight:600;color:var(--text-muted-warm)}
.hab-more:hover{background:var(--zone-2);color:var(--text-strong)}
.hab-more .ic{width:16px;height:16px;transform:rotate(180deg);
  transition:transform var(--t-fast) var(--ease)}
.hab-more.on .ic{transform:rotate(0)}
/* .pheat vient de l'ancienne passe : ses fonds --paper-2 et son liseré en ombre
   interne sont REDÉCLARÉS ici — scoper ne neutralise pas ce qui est hérité */
.hab-year .pheat{margin-top:0}
/* l'année passe en grille fluide comme le calendrier d'assiduité : les 53
   colonnes tiennent dans la carte, plus d'ascenseur horizontal natif */
.hab-year .pheat-grid{display:grid;grid-template-columns:repeat(53,1fr);gap:3px;overflow:visible;padding:0}
.hab-year .hm-col{display:grid;grid-template-rows:repeat(7,1fr);gap:3px}
.hab-year .ph-c{width:auto;height:auto;aspect-ratio:1}
.hab-year .ph-na{background:var(--grid-empty)}
.hab-year .ph-miss{background:color-mix(in srgb, var(--hc) 26%, var(--grid-empty))}
.hab-year .ph-today{box-shadow:none;outline:1.5px solid var(--text-strong);outline-offset:-1.5px}
.hab-year .pheat-cap{font-family:var(--font-mono),ui-monospace,monospace;
  font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted-warm)}

/* cibles tactiles ≥ 44px (contrat §0) : au doigt, les commandes de la carte
   passent à 44px. À la souris elles gardent la géométrie de la maquette —
   agrandir la boîte visible partout écraserait la densité de l'écran. */
@media (pointer:coarse){
  .hab-chip,.hab-more{min-height:var(--sp-44)}
  .hab-acts{gap:var(--sp-4)}
  .hab-acts button{width:var(--sp-44);height:var(--sp-44)}
}

@media (max-width:980px){
  .hab-cards{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1000px){
  .hab-top{flex-direction:column}
  .hab-hero{flex:0 0 auto}
}
@media (max-width:760px){
  body.v-habits{overflow:auto}
  /* l'en-tête mobile est fixe (66px dans la règle générale de #mainscroll) :
     sans ce dégagement, le titre de l'écran passerait dessous */
  body.v-habits #mainscroll{padding:66px 0 86px}
  .habscreen{height:auto;padding:var(--sp-16) var(--sp-12)}
}

/* ============ écran Challenges : « lecture + action » (design system) ============
   Même grammaire qu'Habitudes — surface --zone, héros --brand adossé à une
   forme d'ensemble, puis des cartes à la couleur du défi. Ce qui change :
   l'ensemble n'est pas un calendrier mais TROIS VERDICTS, et chaque carte
   porte la fenêtre de cases (composant partagé `.cw` avec la tranche
   d'« Aujourd'hui », redéclaré ici : sa version d'origine a un filet). */
body.v-challenges{overflow:hidden}
body.v-challenges #mainscroll{padding:0}
#main:has(.chxscreen){max-width:none}
.chxscreen{background:var(--zone);height:calc(100vh - var(--sp-44));overflow-y:auto;
  padding:var(--sp-24) 26px;display:flex;flex-direction:column;gap:var(--sp-16)}

.chx-head{display:flex;align-items:baseline;gap:var(--sp-12);flex-wrap:wrap;min-width:0}
.chx-title{font-family:var(--font-h),sans-serif;font-size:var(--fs-heading);font-weight:800;
  color:var(--ink);line-height:1.1}
.chx-lab{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-caption);
  font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--text)}

/* --- héros du taux de réussite + les trois verdicts --- */
.chx-top{display:flex;gap:14px;align-items:stretch;min-width:0}
/* le taux, puis ce qu'il mesure — la légende tient sur UNE ligne, d'où la
   largeur du héros calée dessus plutôt que sur les 240px de la maquette */
.chx-hero{flex:0 0 auto;background:var(--brand);border-radius:var(--r-12);
  padding:20px 22px;display:flex;flex-direction:column;justify-content:center;gap:var(--sp-4)}
:root[data-theme="dark"] .chx-hero{background:var(--green-deep)}
.chx-heron{display:flex;align-items:flex-end;gap:var(--sp-8)}
.chx-num{font-family:var(--font-h),sans-serif;font-weight:800;font-size:var(--fs-display);
  line-height:.86;color:var(--on-deep);font-variant-numeric:tabular-nums}
.chx-num-none{color:var(--on-deep-muted)}
.chx-pct{font-family:var(--font-h),sans-serif;font-weight:800;font-size:var(--fs-subhead);
  color:var(--on-deep);margin-bottom:6px}
.chx-herolab{font-size:var(--fs-body);color:var(--on-deep);white-space:nowrap}

.chx-tiles{flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
/* le compteur à gauche, les challenges et leurs pourcentages en colonne à
   DROITE — la tuile se lit en deux temps, pas en trois lignes empilées */
.chx-tile{background:var(--card);border-radius:var(--r-12);padding:14px var(--sp-16);
  display:flex;align-items:flex-start;gap:var(--sp-12);min-width:0}
.chx-tile-id{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.chx-tile-list{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-4);padding-top:var(--sp-2)}
/* nom et pourcentage se tiennent à DROITE, l'un contre l'autre : un nom collé
   au bord gauche laissait un couloir vide au milieu de la tuile. La largeur
   minimale du pourcentage garde les chiffres alignés en colonne. */
.chx-tl{display:flex;align-items:baseline;justify-content:flex-end;gap:var(--sp-8);
  min-width:0;font-size:var(--fs-caption)}
.chx-tl-n{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--text)}
.chx-tl-p{flex:0 0 auto;min-width:var(--sp-44);text-align:right;
  font-family:var(--font-mono),ui-monospace,monospace;font-weight:600;
  color:var(--text-muted-warm);font-variant-numeric:tabular-nums}
.chx-tl-more{color:var(--text-muted-warm)}
.chx-tile-h{display:flex;align-items:center;gap:9px}
.chx-tile-ico{width:30px;height:30px;flex:0 0 30px;border-radius:var(--r-9);
  display:inline-flex;align-items:center;justify-content:center;color:var(--on-tint)}
.chx-tile-ico .ic{width:18px;height:18px}
.chx-tile-n{font-family:var(--font-h),sans-serif;font-weight:800;font-size:var(--fs-title);
  line-height:1;font-variant-numeric:tabular-nums}
.chx-tile-l{font-size:var(--fs-body);font-weight:600;color:var(--ink);white-space:nowrap}
/* les trois registres : tenu (marque), en cours (or), manqué (urgence) */
.chx-won .chx-tile-ico{background:var(--brand)}
.chx-won .chx-tile-n{color:var(--brand)}
.chx-run .chx-tile-ico{background:var(--p04)}
/* le nombre est du TEXTE : la couleur brute de la gamme (--p04) ne tient que
   3,2:1 sur --card en clair. On l'assied, comme --urgence-text le fait pour le
   rouge. En sombre la gamme est claire : la valeur brute passe largement. */
.chx-run .chx-tile-n{color:color-mix(in srgb, var(--p04) 70%, var(--green-deep))}
:root[data-theme="dark"] .chx-run .chx-tile-n{color:var(--p04)}
.chx-lost .chx-tile-ico{background:var(--urgence)}
.chx-lost .chx-tile-n{color:var(--urgence-text)}

/* --- une carte par challenge --- */
.chx-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.chx-card{background:var(--card);border-radius:var(--r-12);padding:var(--sp-16) 18px;
  display:flex;flex-direction:column;gap:var(--sp-12);min-width:0;
  /* même règle que sur Habitudes : la teinte assise (`--seat`) porte le texte blanc */
  --hc-deep:color-mix(in srgb, var(--hc) var(--seat), var(--green-deep))}
.chx-card.todo{background:var(--inset)}      /* pas encore pointé aujourd'hui */
.chx-card-h{display:flex;align-items:center;gap:11px;min-width:0}
.chx-tuile{width:34px;height:34px;flex:0 0 34px;background:var(--hc);border-radius:var(--r-9);
  color:var(--on-tint);display:inline-flex;align-items:center;justify-content:center}
.chx-tuile .ic{width:20px;height:20px}
.chx-tuile.off{background:var(--zone-2);color:var(--urgence-text)}
.chx-id{flex:1;min-width:0}
.chx-name{display:block;font-size:var(--fs-body-lg);font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chx-sub{display:block;font-size:var(--fs-caption);color:var(--text-muted-warm);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chx-lost .chx-sub{color:var(--urgence-text)}
.chx-chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-4);
  flex:0 0 auto;min-height:var(--sp-32);padding:var(--sp-4) 11px;border-radius:var(--r-9);
  background:var(--zone-2);color:var(--text-strong);
  font-size:var(--fs-caption);font-weight:600;white-space:nowrap}
.chx-chip .ic{width:14px;height:14px}
.chx-chip:hover{background:var(--grid-empty)}
.chx-chip.on{background:var(--hc-deep);color:#FFFFFF}
.chx-chip.on:hover{background:color-mix(in srgb, var(--hc) 40%, var(--green-deep))}
.chx-chip.na{background:var(--grid-empty);color:var(--text)}
.chx-acts{display:flex;gap:var(--sp-2);flex:0 0 auto}
.chx-acts button{width:var(--sp-32);height:var(--sp-32);border-radius:var(--r-9);
  color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center}
.chx-acts button .ic{width:18px;height:18px}
.chx-acts button:hover{background:var(--zone-2);color:var(--text-strong)}

/* fenêtre de cases : une case par jour DÛ, en plusieurs rangées — une fenêtre
   de 84 jours ne doit pas rétrécir ses cases jusqu'à l'illisible */
.chx-winrow{display:flex;align-items:flex-end;gap:var(--sp-12);min-width:0}
.chx-win{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.chx-win .cw{width:13px;height:13px;flex:0 0 13px;border:none;border-radius:3px;
  background:var(--grid-empty);box-shadow:none}
/* les cases ne portent AUCUN texte : elles prennent la couleur franche du défi,
   pas sa version assise — en sombre, `--hc-deep` les rendrait indiscernables
   des cases vides */
.chx-win .cw.on{background:var(--hc)}
.chx-win .cw.miss{background:var(--urgence)}
.chx-win .cw.today{outline:2px solid var(--text-strong);outline-offset:-2px}
.chx-pctv{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-body);
  font-weight:600;color:var(--text);white-space:nowrap;flex:0 0 auto}
.chx-cap{display:flex;font-family:var(--font-mono),ui-monospace,monospace;
  font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted-warm)}

/* --- cartes closes : le verdict en pastille --- */
.chx-verdict{display:inline-flex;align-items:center;gap:var(--sp-4);flex:0 0 auto;
  min-height:var(--sp-32);padding:var(--sp-4) 11px;border-radius:var(--r-9);
  font-size:var(--fs-caption);font-weight:600;white-space:nowrap}
.chx-verdict .ic{width:14px;height:14px}
.chx-v-won{background:var(--brand);color:#FFFFFF}
.chx-v-lost{background:var(--urgence-surface);color:var(--urgence-text)}
.chx-more{display:inline-flex;align-items:center;gap:var(--sp-4);align-self:flex-start;
  min-height:var(--sp-32);padding:var(--sp-4) var(--sp-8);border-radius:var(--r-9);
  font-size:var(--fs-caption);font-weight:600;color:var(--text-muted-warm)}
.chx-more:hover{background:var(--zone-2);color:var(--text-strong)}
.chx-more .ic{width:16px;height:16px;transform:rotate(180deg);
  transition:transform var(--t-fast) var(--ease)}
.chx-more.on .ic{transform:rotate(0)}

/* --- catalogue : des invitations, pas des objets --- */
.chx-cata{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--sp-12)}
.chx-cata-c{display:flex;align-items:center;gap:11px;text-align:left;min-width:0;
  background:var(--inset);border-radius:var(--r-12);padding:var(--sp-12) 14px}
.chx-cata-c:hover{background:var(--card)}
.chx-cata-id{flex:1;min-width:0}
/* dans le catalogue, ni le nom du défi ni sa ligne d'exigence ne se coupent :
   « Un mois sans … » ne dit rien, et un défi tronqué ne s'attrape pas */
.chx-cata .chx-name,
.chx-cata .chx-sub{white-space:normal;overflow:visible;line-height:1.35}
.chx-cata-go{flex:0 0 auto;font-size:var(--fs-caption);font-weight:600;color:var(--brand)}

/* --- participants d'un challenge collectif ---
   Bloc entièrement réécrit (namespace `.chx-p*`) : les anciennes classes
   posaient des filets pointillés et ne stylaient QUE `input`, jamais `select` —
   le sélecteur de personne s'affichait écrasé, illisible. Ici tout est déclaré,
   rien n'est hérité. */
.chx-parts{display:flex;flex-direction:column;gap:var(--sp-8);
  background:var(--zone);border-radius:var(--r-9);padding:var(--sp-12)}
.chx-parts-h{display:flex;align-items:center;gap:var(--sp-4);
  font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-micro);
  letter-spacing:.09em;text-transform:uppercase;color:var(--text)}
.chx-parts-h .ic{width:14px;height:14px;flex:0 0 auto}
.chx-prow{display:flex;align-items:center;gap:var(--sp-8);min-width:0;min-height:28px}
/* avatar : un aplat, jamais un contour — la personne en attente se dit par la
   VALEUR (fond en creux, initiale en encre douce), pas par un pointillé */
.chx-pav{width:24px;height:24px;flex:0 0 24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden;
  background:var(--brand);color:var(--on-brand);font-size:var(--fs-caption);font-weight:600}
.chx-pav img{width:100%;height:100%;object-fit:cover}
/* en attente : l'absence de compte se dit par un fond en creux, pas par une
   encre pâle — --text-muted-warm sur --grid-empty ne tient que 4,0:1 */
.chx-pav-ghost{background:var(--grid-empty);color:var(--text)}
.chx-pname{flex:0 0 auto;max-width:140px;font-size:var(--fs-caption);font-weight:600;
  color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chx-pdots{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:2px;align-items:center}
.chx-pd{width:8px;height:8px;flex:0 0 8px;border-radius:var(--sp-2);background:var(--grid-empty)}
.chx-pd.ok{background:var(--hc)}
.chx-pd.miss{background:var(--urgence)}
.chx-pnote{font-size:var(--fs-caption);color:var(--text-muted-warm);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chx-pverdict{flex:0 0 auto;padding:2px var(--sp-8);border-radius:var(--r-pill);
  font-size:var(--fs-caption);font-weight:600}
.chx-pverdict.chx-v-won{background:var(--brand);color:#FFFFFF}
.chx-pverdict.chx-v-lost{background:var(--urgence-surface);color:var(--urgence-text)}
/* Ajouter ou retirer quelqu'un se fait dans les RÉGLAGES du challenge : ce bloc
   ne porte donc aucune commande, seulement des résultats. Les puces de choix
   vivent dans la modale (.chpk, plus bas). */

@media (max-width:1180px){
  .chx-tiles{grid-template-columns:minmax(0,1fr)}
  .chx-top{flex-direction:column}
  .chx-hero{flex:0 0 auto}
}
@media (max-width:980px){
  .chx-cards{grid-template-columns:minmax(0,1fr)}
}
@media (pointer:coarse){
  .chx-chip,.chx-more{min-height:var(--sp-44)}
  .chx-acts{gap:var(--sp-4)}
  .chx-acts button{width:var(--sp-44);height:var(--sp-44)}
}
@media (max-width:760px){
  body.v-challenges{overflow:auto}
  body.v-challenges #mainscroll{padding:66px 0 86px}
  .chxscreen{height:auto;padding:var(--sp-16) var(--sp-12)}
}


/* ====== création / édition d'un CHALLENGE ou d'une HABITUDE : OVERLAY vert ======
   Même registre que la création/édition d'une tâche : la surface entière
   bascule sur `--green-deep`, pas de carte flottante. Deux colonnes centrées —
   l'icône à gauche (c'est le champ haut), tout le reste à droite.
   ⚠️ Les champs viennent de la feuille héritée (filets, fonds clairs) : chaque
   propriété est REDÉCLARÉE ici, scoper ne suffirait pas. */
.chov .chov-panel{width:1000px;max-width:94%;gap:var(--sp-16)}
.chov-body{display:flex;flex-direction:column;gap:var(--sp-16);min-width:0}
.chov-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-32);min-width:0}
.chov-col{min-width:0;display:flex;flex-direction:column}
.chov-full{min-width:0}
.chov-l{display:block;font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-deep-accent);margin:var(--sp-16) 0 var(--sp-4)}
.chov-col>.chov-l:first-child,.chov-full>.chov-l:first-child{margin-top:0}
.chov #ch-name.chov-title,.chov #hb-name.chov-title{width:100%;background:var(--green-rail);border:none;border-radius:var(--r-12);
  padding:var(--sp-12) var(--sp-16);color:var(--on-deep);font-family:var(--font-h),sans-serif;
  font-size:var(--fs-subhead);font-weight:700;outline:none}
.chov .chov-title::placeholder{color:var(--on-deep-dim)}
/* champs : un aplat sur le rail, jamais un filet. Les identifiants
   (`#ch-name`, `#ch-target`) sont visés nommément : une règle héritée par ID
   l'emporterait sinon sur n'importe quelle classe. */
.chov input[type=text],.chov input[type=date],.chov input[type=number],.chov .icopick-q,
.chov #ch-name,.chov #ch-target,.chov #hb-name{
  background:var(--green-rail);border:none;border-radius:var(--r-9);color:var(--on-deep);
  font-family:inherit;padding:var(--sp-8) var(--sp-12)}
/* le focus doit RESTER visible : la règle globale utilise --accent, invisible
   sur le rail vert — on le redit ici en --mint, lisible sur les deux plans.
   ⚠️ Les BOUTONS en font partie : la croix, Annuler et Valider sont, avec
   Échap, les seules sorties de l'overlay depuis qu'un clic sur le fond n'en
   ferme plus. Les laisser sans focus visible enfermait l'utilisateur clavier. */
.chov input:focus-visible,.chov .icopick-q:focus-visible,
.chov #ch-name:focus-visible,.chov #ch-target:focus-visible,.chov #hb-name:focus-visible,
.gov .gov-close:focus-visible,.chov .chov-ghost:focus-visible,.chov .btn-primary:focus-visible,
.chov .icofam:focus-visible,.chov .hbico:focus-visible,.chov .hbday:focus-visible,
.chov .hbcol:focus-visible,.chov .seg button:focus-visible,.chov .chpk:focus-visible{
  border:none;outline:2px solid var(--mint);outline-offset:2px}
.chov input::placeholder{color:var(--on-deep-dim)}
.chov .icopick-q:focus{border:none}
.chov .icofam{background:var(--green-rail);border:none;color:var(--on-deep-muted);border-radius:var(--r-pill)}
.chov .icofam:hover{color:var(--on-deep)}
.chov .icofam.on{background:var(--brand);color:#FFFFFF}
.chov .hbico{background:var(--green-rail);border:none;color:var(--on-deep-muted)}
.chov .hbico:hover{color:var(--on-deep)}
.chov .hbico.on{background:var(--brand);color:#FFFFFF}
.chov .seg button{background:var(--green-rail);border:none;color:var(--on-deep-muted)}
.chov .seg button:hover{color:var(--on-deep)}
.chov .seg button.on{background:var(--brand);color:#FFFFFF;font-weight:600}
.chov .hbday{background:var(--green-rail);border:none;color:var(--on-deep-muted);border-radius:var(--r-9)}
.chov .hbday:hover{color:var(--on-deep)}
.chov .hbday.on{background:var(--brand);color:#FFFFFF}
.chov .hbcol{border-color:transparent}
.chov .hbcol.on{border-color:var(--on-deep)}
.chov .chdates label{color:var(--on-deep-accent);font-family:var(--font-mono),ui-monospace,monospace;
  font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase}
.chov .chhint,.chov .chquota-in{color:var(--on-deep-muted);font-size:var(--fs-body)}
.chov .chquota-in input{text-align:center}
.chov .chpk{background:var(--green-rail);color:var(--on-deep)}
.chov .chpk:hover{background:var(--green-deep)}
.chov .chpk-av{background:var(--green-deep);color:var(--on-deep-muted)}
.chov .chpk.on{background:var(--brand);color:#FFFFFF}
.chov .chpk.on .chpk-av{background:var(--brand-hover);color:#FFFFFF}
.chov-ghost{padding:var(--sp-8) var(--sp-16);border-radius:var(--r-9);
  color:var(--on-deep-muted);font-size:var(--fs-body);font-weight:600}
.chov-ghost:hover{color:var(--on-deep)}
.chov .gov-foot{gap:var(--sp-8);align-items:center}
/* Au doigt, il n'y a pas d'Échap : la croix, « Annuler » et « Valider » sont
   les seules sorties. Elles passent donc à 44px sur écran tactile — la
   géométrie à la souris, elle, ne bouge pas. Porté sur `.gov` et pas seulement
   `.chov` : l'aide clavier et l'overlay ⌕ ont la même croix. */
@media (pointer:coarse){
  .gov .gov-close{width:var(--sp-44);height:var(--sp-44)}
  .chov .chov-ghost,.chov .btn-primary{min-height:var(--sp-44)}
  .chov .hbcol{width:var(--sp-44);height:var(--sp-44)}
  .chov .hbico{width:var(--sp-44);height:var(--sp-44)}
  .chov .hbday,.chov .icofam,.chov .seg button{min-height:var(--sp-44)}
}
@media (max-width:900px){
  .chov-cols{grid-template-columns:minmax(0,1fr);gap:var(--sp-16)}
}


/* ============ écran Équipe : « lecture légère » (design system) ============
   Grammaire §6 : lignes-membres (avatar, projets, charge, compétences), UN seul
   numéral, pas de « en clair », pas de Spectral. Surface de lecture sur --zone
   avec ascenseur interne — même coquille qu'Habitudes et Challenges.

   La CHARGE se dit avec la donnée qui EXISTE : des comptes (à faire / en cours
   / faites), jamais des heures — il n'y a pas de capacité hebdomadaire par
   personne, et un dénominateur inventé ferait mentir la barre. La barre montre
   l'avancement, le mono le chiffre, la légende le détail. */
body.v-team{overflow:hidden}
body.v-team #mainscroll{padding:0}
#main:has(.tmscreen){max-width:none}
.tmscreen{background:var(--zone);height:calc(100vh - var(--sp-44));overflow-y:auto;
  padding:var(--sp-24) 26px;display:flex;flex-direction:column;gap:var(--sp-16)}
.tm-head{display:flex;align-items:baseline;gap:var(--sp-12);min-width:0}
.tm-title{font-family:var(--font-h),sans-serif;font-size:var(--fs-heading);font-weight:800;
  color:var(--ink);line-height:1.1}
/* label mono : carte de charge et têtes de section (le héros a le sien, posé
   sur le plan vert) */
.tm-l{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--text)}

/* --- héros « membres actifs » + charge partagée par projet --- */
.tm-top{display:flex;gap:var(--sp-16);align-items:stretch;min-width:0}
.tm-hero{flex:0 0 auto;background:var(--brand);border-radius:var(--r-12);
  padding:var(--sp-24);display:flex;flex-direction:column;justify-content:center;
  gap:var(--sp-4);min-width:0}
:root[data-theme="dark"] .tm-hero{background:var(--green-deep)}
.tm-hero-l{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-deep)}
.tm-heron{display:flex;align-items:center;gap:var(--sp-16)}
.tm-num{font-family:var(--font-h),sans-serif;font-weight:800;font-size:var(--fs-display);
  line-height:.86;color:var(--on-deep);font-variant-numeric:tabular-nums}
/* pile d'avatars : ils se chevauchent par la VALEUR, sans anneau ni ombre */
.tm-avs{display:inline-flex;align-items:center}
.tm-hav{width:var(--sp-32);height:var(--sp-32);font-size:var(--fs-caption);border:none}
.tm-avs .tm-hav+.tm-hav{margin-left:calc(-1 * var(--sp-8))}
.tm-hav-more{background:var(--green-rail);color:var(--on-deep);font-weight:600}
.tm-herosub{font-size:var(--fs-body);color:var(--on-deep)}
/* --on-deep-accent ne tient que 3,22:1 sur --brand en clair : à 11px, l'encre
   du plan (5,5:1) est la seule qui passe. La hiérarchie se fait par la taille. */
.tm-herowait{font-size:var(--fs-caption);color:var(--on-deep)}

.tm-share{flex:1;min-width:0;background:var(--card);border-radius:var(--r-12);
  padding:var(--sp-16) 18px;display:flex;flex-direction:column;gap:var(--sp-8);
  justify-content:center}
.tm-srow{display:flex;align-items:center;gap:var(--sp-12);min-width:0}
.tm-sname{flex:0 0 auto;width:120px;min-width:0;font-size:var(--fs-body);
  color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- barres de charge : piste en creux, remplissage à la marque --- */
.tm-bar{display:block;position:relative;flex:1 1 auto;min-width:0;height:var(--sp-8);
  border-radius:var(--r-pill);background:var(--grid-empty);overflow:hidden}
.tm-fill{display:block;height:100%;border-radius:var(--r-pill);background:var(--brand)}
.tm-fill-p{background:var(--pc)}
.tm-fig{flex:0 0 auto;min-width:var(--sp-44);text-align:right;white-space:nowrap;
  font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-body);font-weight:600;
  color:var(--text-muted-warm);font-variant-numeric:tabular-nums}

/* --- têtes de section : trois populations nommées et comptées --- */
.tm-block{display:flex;flex-direction:column;gap:var(--sp-4)}
.tm-sec{display:flex;align-items:baseline;gap:var(--sp-8);margin-top:var(--sp-8)}
/* sur --zone (plus sourd que --card), --text-muted-warm tombe à 4,4:1 : ces deux
   lignes prennent l'encre courante, qui tient 7:1 */
.tm-sec-n{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-micro);
  color:var(--text);font-variant-numeric:tabular-nums}
.tm-sec-h{font-size:var(--fs-caption);color:var(--text);margin-bottom:var(--sp-4)}
.tm-rows{display:flex;flex-direction:column;gap:var(--sp-8)}

/* --- la ligne d'une personne --- */
.tm-row{display:flex;align-items:center;gap:var(--sp-12);min-width:0;cursor:pointer;
  background:var(--card);border-radius:var(--r-12);padding:var(--sp-12) var(--sp-16);
  transition:background var(--t-fast) var(--ease)}
.tm-row:hover{background:var(--card-hi)}
.tm-av{width:var(--sp-32);height:var(--sp-32);font-size:var(--fs-body);border:none}
/* invité qui n'a pas rejoint : un fond en creux le dit, jamais un pointillé */
.tm-row .mav-ghost,.tmov .mav-ghost{background:var(--grid-empty);color:var(--text);border:none}
.tm-who{flex:0 0 auto;width:150px;min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.tm-name{font-size:var(--fs-body-lg);font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-mail{font-size:var(--fs-caption);color:var(--text-muted-warm);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-tiles{display:flex;align-items:center;gap:var(--sp-4);flex:0 0 auto;flex-wrap:wrap}
/* la charge ne mange pas toute la ligne : au-delà, la barre devient un ruban
   qui ne se lit plus, et les compétences n'ont plus de place à droite */
.tm-charge{flex:1 1 140px;min-width:100px;max-width:340px;
  display:flex;flex-direction:column;gap:var(--sp-4)}
.tm-cnt{font-size:var(--fs-caption);color:var(--text-muted-warm);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-sks{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  justify-content:flex-end;flex:1 1 auto;min-width:0}
.tm-kebab{flex:0 0 auto;width:var(--sp-32);height:var(--sp-32);border-radius:var(--r-9);
  display:inline-flex;align-items:center;justify-content:center;color:var(--text-muted)}
.tm-kebab .ic{width:18px;height:18px}
.tm-kebab:hover{background:var(--zone-2);color:var(--text-strong)}

/* --- pastille de projet : la VALEUR dit le rôle ---
   plein = admin · creux clair = collaborateur · creux profond = « chef de
   projet » (son projet, où je ne suis que membre). L'encre est assise en clair
   (la gamme y est trop lumineuse), franche en sombre (la gamme y est claire) —
   même recette que le nombre « en cours » de Challenges. */
.tm-tile{font-family:var(--font-body);font-weight:700}
.tm-tile-collab{background:var(--inset);color:color-mix(in srgb, var(--pc) 64%, var(--green-deep))}
.tm-tile-lead{background:var(--zone-2);color:color-mix(in srgb, var(--pc) 64%, var(--green-deep))}
:root[data-theme="dark"] .tm-tile-collab{color:var(--pc)}
/* le creux profond est plus clair que le creux clair : en sombre, la couleur
   brute n'y tient que 4,11:1 — on la relève vers l'encre du plan */
:root[data-theme="dark"] .tm-tile-lead{color:color-mix(in srgb, var(--pc) 72%, var(--on-deep))}

/* --- « En attente » : un aplat, jamais un badge coloré --- */
.tm-wait{display:inline-flex;align-items:center;flex:0 0 auto;border-radius:var(--r-6);
  padding:var(--sp-2) var(--sp-8);background:var(--zone-2);color:var(--text-strong);
  font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-micro);
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.tm-wait-deep{background:var(--green-rail);color:var(--on-deep)}

/* --- compétences : puce pleine = acquise, puce en creux = suggestion ---
   L'état se dit par le FOND. Un pointillé serait un filet, et les filets sont
   proscrits ; une encre ambre ne tiendrait pas le contraste à 11px. */
.tm-sk{display:inline-flex;align-items:center;gap:var(--sp-4);flex:0 0 auto;
  border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-8);
  background:var(--inset);color:var(--text-strong);font-size:var(--fs-caption);
  max-width:100%;min-width:0}
.tm-sk-sug{background:var(--zone-2)}
.tm-sk-p,.tm-sk-x{font-size:var(--fs-micro);color:var(--text-strong);white-space:nowrap}
.tm-sk-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

@media (max-width:1180px){
  .tm-top{flex-direction:column}
  .tm-hero{flex:0 0 auto}
}
/* étroit : la ligne se replie en trois temps — qui (avec ses projets et le ⋯),
   puis la charge, puis les compétences. L'ordre de lecture ne change pas. */
@media (max-width:980px){
  .tm-row{flex-wrap:wrap}
  .tm-who{width:auto;flex:1 1 auto}
  .tm-tiles{order:3}
  .tm-kebab{order:4;margin-left:auto}
  .tm-charge{order:5;flex:1 1 60%;max-width:none}
  .tm-fig{order:6}
  .tm-sks{order:7;justify-content:flex-start;flex-basis:100%}
}
@media (pointer:coarse){
  .tm-kebab{width:var(--sp-44);height:var(--sp-44)}
}
@media (max-width:760px){
  body.v-team{overflow:auto}
  body.v-team #mainscroll{padding:66px 0 86px}
  .tmscreen{height:auto;padding:var(--sp-16) var(--sp-12)}
  .tm-charge{flex-basis:100%}
}

/* --- état vide : la seule chose à faire est d'inviter quelqu'un --- */
.tm-empty{background:var(--card);border-radius:var(--r-12);padding:var(--sp-24);max-width:52ch}
.tm-empty-t{font-family:var(--font-h),sans-serif;font-size:var(--fs-subhead);font-weight:700;
  color:var(--ink);margin-bottom:var(--sp-4)}
.tm-empty-b{font-size:var(--fs-body);color:var(--text-muted-warm);line-height:1.5}


/* ====== fiche personne & invitation : OVERLAY sur le plan vert profond ======
   Même registre que la création d'une tâche, d'une habitude ou d'un challenge :
   la surface entière bascule, il n'y a pas de carte flottante. Sortie par la
   croix, Échap (et « Annuler » sur le formulaire d'invitation) ; un clic sur le
   fond est inerte. La FICHE n'a pas de pied : tout s'y applique immédiatement.
   ⚠️ Rien n'est hérité : chaque champ est redéclaré ici. */
.tmov .gov-panel{max-width:94%;gap:var(--sp-16)}
/* la FICHE seule est large (deux colonnes, comme l'overlay habitude/challenge) ;
   le formulaire d'invitation garde la largeur de lecture d'un formulaire —
   quatre champs étirés sur 1000px ne se saisissent pas */
.tmov-wide .gov-panel{width:1000px}
.tmov-head{min-width:0}
.tmov-id{display:flex;align-items:center;gap:var(--sp-12);min-width:0}
.tmov-idn{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.tm-ovav{width:var(--sp-44);height:var(--sp-44);font-size:var(--fs-subhead);border:none}
.tmov-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmov-mail{font-size:var(--fs-caption);color:var(--on-deep-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmov .gov-close .ic{width:16px;height:16px}
/* l'ascenseur reste un filet de sécurité (beaucoup de projets admin, écran très
   bas), pas la règle : à deux colonnes la fiche tient dans la hauteur */
.tmov-body{display:flex;flex-direction:column;gap:var(--sp-24);min-width:0;
  max-height:78vh;overflow-y:auto;padding-right:var(--sp-4)}
.tmov-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--sp-32);align-items:start;min-width:0}
.tmov-cols-1{grid-template-columns:minmax(0,1fr)}
.tmov-col{min-width:0;display:flex;flex-direction:column;gap:var(--sp-24)}
.tmov-body::-webkit-scrollbar{width:8px}
.tmov-body::-webkit-scrollbar-thumb{background:var(--green-rail);border-radius:var(--r-pill)}
.tmov-sec{display:flex;flex-direction:column;gap:var(--sp-8);min-width:0}
.tmov-l{display:block;font-family:var(--font-mono),ui-monospace,monospace;
  font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-deep-accent)}
.tmov-hint{font-size:var(--fs-body);color:var(--on-deep-muted);line-height:1.45}
.tmov-lead{font-size:var(--fs-body-lg);color:var(--on-deep);line-height:1.45}

/* rôles par projet : une ligne, un segment */
.tmov-prow{display:flex;align-items:center;gap:var(--sp-8);min-width:0;min-height:var(--sp-32)}
.tmov-pn{flex:1;min-width:0;font-size:var(--fs-body);color:var(--on-deep);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmov-seg{display:inline-flex;gap:var(--sp-2);flex:0 0 auto}
.tmov-segb{min-height:var(--sp-32);padding:var(--sp-4) var(--sp-12);border-radius:var(--r-6);
  background:var(--green-rail);color:var(--on-deep-muted);
  font-family:var(--font-body);font-size:var(--fs-caption);font-weight:600;white-space:nowrap}
.tmov-segb:hover:not(:disabled):not(.on){color:var(--on-deep)}
.tmov-segb.on{background:var(--brand);color:var(--on-brand)}
/* « Aucun » allumé se distingue de la marque : retirer une adhésion n'est pas
   une sélection valorisée */
.tmov-segb.on.none{background:var(--on-deep-muted);color:var(--green-deep)}
.tmov-segb:disabled{color:var(--on-deep-dim);cursor:default}

/* compétences dans la fiche : mêmes puces, posées sur le plan */
.tm-sks-deep{justify-content:flex-start}
.tm-sk-deep{background:var(--green-rail);color:var(--on-deep);padding:var(--sp-4) var(--sp-8)}
.tm-sk-deep .tm-sk-p,.tm-sk-deep .tm-sk-x{color:var(--on-deep-muted)}
/* une suggestion À TRAITER se signale par sa marque, pas par un filet */
.tm-sk-deep.tm-sk-sug .tm-sk-p{color:var(--mint)}
.tm-sk-act{width:20px;height:20px;flex:0 0 auto;border-radius:var(--r-6);
  display:inline-flex;align-items:center;justify-content:center;color:var(--on-deep-muted)}
.tm-sk-act .ic{width:14px;height:14px}
.tm-sk-act:hover{background:var(--green-deep);color:var(--on-deep)}

/* champs : un aplat sur le rail, jamais un filet */
.tmov-f{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.tmov-in{width:100%;background:var(--green-rail);border:none;border-radius:var(--r-9);
  padding:var(--sp-8) var(--sp-12);color:var(--on-deep);
  font-family:var(--font-body);font-size:var(--fs-body);outline:none}
.tmov-in::placeholder{color:var(--on-deep-dim)}
.tmov-ta{min-height:calc(var(--sp-32) * 2);resize:vertical;line-height:1.5}
.tmov-load{display:flex;align-items:center;gap:var(--sp-12)}
.tm-bar-deep{background:var(--green-rail)}
.tm-bar-deep .tm-fill{background:var(--mint)}
.tm-fig-deep{color:var(--on-deep-muted)}

/* boutons : secondaire sur le rail, danger en encre lisible sur le vert profond */
.tmov-btn{display:inline-flex;align-items:center;gap:var(--sp-8);align-self:flex-start;
  min-height:var(--sp-32);padding:var(--sp-8) var(--sp-12);border-radius:var(--r-9);
  background:var(--green-rail);color:var(--on-deep);
  font-family:var(--font-body);font-size:var(--fs-body);font-weight:600}
.tmov-btn .ic{width:16px;height:16px}
.tmov-btn:hover{background:var(--green-deep);color:var(--on-deep)}
.tmov-danger{align-self:flex-start;min-height:var(--sp-32);padding:var(--sp-8) var(--sp-12);
  border-radius:var(--r-9);background:transparent;color:var(--urgence-on-deep);
  font-family:var(--font-body);font-size:var(--fs-body);font-weight:600;text-align:left}
.tmov-danger:hover{background:var(--green-rail)}
.tmov-ghost{min-height:var(--sp-32);padding:var(--sp-8) var(--sp-16);border-radius:var(--r-9);
  color:var(--on-deep-muted);font-family:var(--font-body);font-size:var(--fs-body);font-weight:600}
.tmov-ghost:hover{color:var(--on-deep)}
.tmov-foot{gap:var(--sp-8);align-items:center}

/* propositions de compétences : liste maison, jamais <datalist> (Entrée y valide
   la frappe brute et fabrique des doublons de casse) */
.tmov-skadd{position:relative;min-width:0}
.tmov-sug{position:absolute;left:0;right:0;top:100%;z-index:30;margin-top:var(--sp-4);
  background:var(--green-rail);border-radius:var(--r-9);overflow:hidden;
  max-height:calc(var(--sp-44) * 5);overflow-y:auto}
.tmov-sug button{display:block;width:100%;text-align:left;
  padding:var(--sp-8) var(--sp-12);font-family:var(--font-body);font-size:var(--fs-body);
  color:var(--on-deep)}
.tmov-sug button.on,.tmov-sug button:hover{background:var(--green-deep)}
.tmov-sug .tmov-sugnew{color:var(--on-deep-muted)}

/* le focus doit RESTER visible : la règle globale utilise --accent, invisible
   sur le plan vert — --mint tient sur les deux valeurs. La croix, « Annuler » et
   Échap sont les seules sorties : les laisser sans focus visible enfermerait
   l'utilisateur clavier. */
.tmov button:focus-visible,.tmov input:focus-visible,
.tmov select:focus-visible,.tmov textarea:focus-visible{
  outline:2px solid var(--mint);outline-offset:2px}

@media (pointer:coarse){
  .tmov .gov-close{width:var(--sp-44);height:var(--sp-44)}
  .tmov-segb,.tmov-btn,.tmov-danger,.tmov-ghost,.tmov .btn-primary{min-height:var(--sp-44)}
  .tm-sk-act{width:var(--sp-32);height:var(--sp-32)}
}
@media (max-width:900px){
  .tmov-cols{grid-template-columns:minmax(0,1fr);gap:var(--sp-24)}
}
@media (max-width:760px){
  .tmov-prow{flex-wrap:wrap}
  .tmov-seg{flex:1 1 100%}
  .tmov-segb{flex:1}
}


/* ============ écran Projets : « lecture » (design system) ============
   Grammaire §6 : tableau des projets (barres segmentées à faire / en cours /
   terminé, cotes), héros numéral SERIF du portefeuille, bloc « en clair ».
   Spectral (--font-read) n'est chargée que sur Projets et Bilan : c'est ici sa
   voix, et nulle part ailleurs.
   Surface --desk (fond des écrans de lecture), ascenseur interne. */
body.v-projects{overflow:hidden}
body.v-projects #mainscroll{padding:0}
#main:has(.pjscreen){max-width:none}
/* --zone et non --desk : c'est le fond de la maquette, et le seul sur lequel le
   héros (--green-deep en sombre) se détache — sur --desk sombre les deux
   valeurs sont à deux points l'une de l'autre. */
.pjscreen{background:var(--zone);height:calc(100vh - var(--sp-44));overflow-y:auto;
  padding:var(--sp-24) 26px;display:flex;flex-direction:column;gap:var(--sp-16)}
.pj-head{display:flex;align-items:baseline;gap:var(--sp-12);min-width:0}
.pj-title{font-family:var(--font-h),sans-serif;font-size:var(--fs-heading);font-weight:800;
  color:var(--ink);line-height:1.1}
/* label mono commun aux tuiles, au bloc « en clair » et au tableau */
.pj-lab{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.pj-lab-deep{color:var(--on-deep)}

/* --- héros du portefeuille + trois tuiles --- */
.pj-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-16);min-width:0}
.pj-hero{background:var(--brand);border-radius:var(--r-12);padding:var(--sp-24);
  display:flex;flex-direction:column;justify-content:center;gap:var(--sp-4);min-width:0}
:root[data-theme="dark"] .pj-hero{background:var(--green-deep)}
.pj-heron{display:flex;align-items:baseline;gap:var(--sp-8)}
/* le numéral du portefeuille est en SERIF : c'est la signature des écrans de
   lecture (Projets, Bilan), et le seul endroit où Spectral porte un chiffre */
.pj-num{font-family:var(--font-read),Georgia,serif;font-weight:500;font-size:var(--fs-display);
  line-height:.9;color:var(--on-deep);font-variant-numeric:tabular-nums}
.pj-pct{font-family:var(--font-read),Georgia,serif;font-size:var(--fs-heading);color:var(--on-deep)}
.pj-herosub{font-family:var(--font-read),Georgia,serif;font-style:italic;
  font-size:var(--fs-body-lg);color:var(--on-deep);line-height:1.4}

.pj-tile{background:var(--card);border-radius:var(--r-12);padding:var(--sp-24);
  display:flex;flex-direction:column;justify-content:center;gap:var(--sp-4);min-width:0}
.pj-tile .pj-num{color:var(--ink)}
.pj-tilen{display:flex;align-items:center;gap:var(--sp-8)}
.pj-tileico{display:inline-flex;color:var(--text-muted-warm)}
.pj-tileico .ic{width:20px;height:20px}
.pj-tilesub{font-family:var(--font-read),Georgia,serif;font-style:italic;
  font-size:var(--fs-body);color:var(--text-muted-warm);line-height:1.4}
/* le retard est un fait daté, pas un mur : seul le nombre prend l'encre d'urgence */
.pj-tile-late .pj-num{color:var(--urgence-text)}
.pj-tile-shared .pj-num{color:var(--p01)}
:root[data-theme="dark"] .pj-tile-shared .pj-num{color:var(--p01)}

/* --- « en clair » : trois constats, chacun sous sa puce pleine --- */
.pj-clair{background:var(--card);border-radius:var(--r-12);padding:var(--sp-16) 18px;
  display:flex;flex-direction:column;gap:var(--sp-8);min-width:0}
.pj-clair-t{font-family:var(--font-read),Georgia,serif;font-style:italic;
  font-size:var(--fs-body);color:var(--text-muted-warm)}
.pj-clair-l{display:flex;flex-wrap:wrap;gap:var(--sp-8) var(--sp-32);min-width:0}
.pj-clair-i{display:inline-flex;align-items:baseline;gap:var(--sp-8);min-width:0;
  font-size:var(--fs-body);color:var(--text-strong);line-height:1.45}
.pj-clair-i b{font-weight:600;color:var(--ink)}
.pj-clair-d{width:var(--sp-8);height:var(--sp-8);flex:0 0 var(--sp-8);border-radius:50%;
  align-self:center}

/* --- le tableau : une ligne par projet ---
   En-tête et lignes partagent la MÊME grille, sinon les colonnes de chiffres
   ne s'alignent pas sur leurs libellés. */
.pj-table{background:var(--card);border-radius:var(--r-12);padding:var(--sp-16) 18px;
  display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.pj-thead,.pj-row{display:grid;
  grid-template-columns:minmax(120px,210px) minmax(80px,1fr) 44px 44px 44px 60px;
  align-items:center;gap:var(--sp-12);min-width:0}
.pj-thead{padding:0 var(--sp-8) var(--sp-8)}
.pj-tcount{grid-column:1 / 3;font-family:var(--font-mono),ui-monospace,monospace;
  font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.pj-th{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-micro);
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted-warm);text-align:center}

.pj-row{text-align:left;padding:var(--sp-8);border-radius:var(--r-9);
  transition:background var(--t-fast) var(--ease)}
.pj-row:hover{background:var(--card-hi)}
/* archivé : la valeur le dit (fond en creux), pas une opacité qui ruinerait le
   contraste de tout ce qu'elle traverse */
.pj-row.arch{background:var(--inset)}
.pj-row.arch:hover{background:var(--zone-2)}
.pj-id{display:flex;align-items:center;gap:var(--sp-8);min-width:0}
.pj-name{flex:1;min-width:0;font-size:var(--fs-body-lg);font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-sig{flex:0 0 auto}

/* barre segmentée : terminé en couleur pleine, en cours en teinte assise, le
   reste en creux — trois valeurs d'une même couleur, jamais trois couleurs */
.pj-bar{display:flex;height:var(--sp-8);border-radius:var(--r-pill);
  background:var(--grid-empty);overflow:hidden;min-width:0}
.pj-seg{display:block;height:100%}
.pj-seg-done{background:var(--pc)}
.pj-seg-doing{background:color-mix(in srgb, var(--pc) 42%, var(--card))}
/* ⚠️ `flex:0 0 auto` : la barre du détail est un enfant direct de la colonne
   flex de l'écran et n'a AUCUN contenu — sans ça elle se laisse écraser à 0 px
   dès que la liste de tâches déborde. */
.pj-bar-big{height:var(--sp-12);border-radius:var(--r-pill);flex:0 0 auto}

.pj-n{justify-self:center;min-width:34px;text-align:center;padding:var(--sp-2) var(--sp-8);
  border-radius:var(--r-6);background:var(--inset);color:var(--text);
  font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-caption);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pj-n-done{background:var(--zone-2);color:var(--text-strong);font-weight:600}
.pj-time{justify-self:end;min-width:0;background:none;color:var(--text-muted-warm)}

/* --- état vide --- */
.pj-empty{background:var(--card);border-radius:var(--r-12);padding:var(--sp-24);max-width:52ch}
.pj-empty-t{font-family:var(--font-h),sans-serif;font-size:var(--fs-subhead);font-weight:700;
  color:var(--ink);margin-bottom:var(--sp-4)}
.pj-empty-b{font-size:var(--fs-body);color:var(--text-muted-warm);line-height:1.5}

/* ============ détail d'un projet : feuillet de lecture ============
   Plus de modes cartes / kanban ici (décision Manu, 28/07) : le détail d'un
   projet se lit. Les tâches y sont les lignes canoniques d'Aujourd'hui, avec
   leur date en plus et sans poignée (rien à glisser sur cet écran). */
.pjdetail{gap:var(--sp-16)}
/* deux colonnes : l'identité du projet à gauche (elle ne défile pas avec la
   liste), ses tâches à droite. Une liste pleine largeur laissait un couloir
   vide au milieu de l'écran. */
.pjd-cols{display:grid;grid-template-columns:320px minmax(0,1fr);gap:var(--sp-16);
  align-items:start;min-width:0;flex:1 1 auto}
.pjd-side{display:flex;flex-direction:column;gap:var(--sp-12);min-width:0;position:sticky;top:0}
.pjd-main{min-width:0;background:var(--card);border-radius:var(--r-12);
  padding:var(--sp-16) 18px}
/* le bloc d'identité ressort : plan card-hi, la lumière de la clairière */
.pjd-card{background:var(--card-hi);border-radius:var(--r-12);padding:18px;
  display:flex;flex-direction:column;gap:var(--sp-12);min-width:0}
.pjd-desc{font-size:var(--fs-body);color:var(--text-strong);line-height:1.5}
.pjd-desc-none{color:var(--text-muted-warm);font-style:italic}
.pjd-badges{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
/* les quatre chiffres du projet, en ligne : nombre au-dessus, libellé mono en
   dessous — même grammaire que les colonnes du tableau */
.pjd-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-8)}
.pjd-fig{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.pjd-fig-n{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-body-lg);
  font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.pjd-fig-l{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-micro);
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted-warm);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pjd-fig-time .pjd-fig-n{color:var(--text-muted-warm)}
.pjd-head{display:flex;align-items:center;gap:var(--sp-12);min-width:0}
.pjd-head .ptile{width:var(--sp-32);height:var(--sp-32);border-radius:var(--r-9);font-size:var(--fs-body-lg)}
.pjd-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.pjd-id .cote{align-self:flex-start}
.pjd-name{font-family:var(--font-h),sans-serif;font-size:var(--fs-heading);font-weight:800;
  color:var(--ink);line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pjd-meta{display:flex;align-items:center;gap:var(--sp-12);flex-wrap:wrap;min-width:0}
.pjd-stats{display:inline-flex;align-items:center;gap:var(--sp-4);
  font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-caption);
  color:var(--text-muted-warm);font-variant-numeric:tabular-nums;white-space:nowrap}
.pjd-stats .ic{width:14px;height:14px}
.pjd-badge{display:inline-flex;align-items:center;gap:var(--sp-4);flex:0 0 auto;
  padding:var(--sp-4) var(--sp-8);border-radius:var(--r-6);background:var(--zone-2);
  color:var(--text-strong);font-size:var(--fs-caption);font-weight:600;white-space:nowrap}
.pjd-badge .ic{width:14px;height:14px}
.pjd-acts{display:flex;gap:var(--sp-2);flex:0 0 auto}
.pjd-act{width:var(--sp-32);height:var(--sp-32);border-radius:var(--r-9);color:var(--text-muted);
  display:inline-flex;align-items:center;justify-content:center}
.pjd-act .ic{width:18px;height:18px}
.pjd-act:hover{background:var(--zone-2);color:var(--text-strong)}
.pjd-del:hover{background:var(--urgence-surface);color:var(--urgence-text)}

.pjd-list{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
/* les lignes respirent : une gouttière à gauche et à droite (rien ne touche le
   bord), une hauteur constante, et l'espacement du design system entre elles */
.pjd-list .pjline{padding:var(--sp-8) var(--sp-12);min-height:var(--sp-32);
  border-radius:var(--r-9);gap:var(--sp-12)}
.pjd-list .pjd-mois{padding:0 var(--sp-12)}
.pjd-mois{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted-warm);
  margin:var(--sp-16) 0 var(--sp-4)}
.pjd-list>.pjd-mois:first-child{margin-top:0}
.pjd-empty{font-size:var(--fs-body);color:var(--text-muted-warm);padding:var(--sp-8) 0}
/* la ligne de tâche, telle qu'Aujourd'hui la dessine — posée sur --desk, et
   sans poignée : il n'y a rien où la déposer dans un feuillet de lecture */
.pjline{background:var(--card)}
.pjline:hover{background:var(--card-hi)}
.pjline .grip{display:none}
.tl-date{flex:0 0 auto;font-family:var(--font-mono),ui-monospace,monospace;
  font-size:var(--fs-caption);color:var(--text-muted-warm);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.pjd-add{display:inline-flex;align-items:center;gap:var(--sp-8);align-self:flex-start;
  min-height:var(--sp-32);margin-top:var(--sp-8);padding:var(--sp-8) var(--sp-12);
  border-radius:var(--r-9);background:var(--zone-2);color:var(--text-strong);
  font-size:var(--fs-body);font-weight:600}
.pjd-add:hover{background:var(--grid-empty)}
.pjd-add .ic{width:16px;height:16px}
/* la pile de l'accompli : repliée par défaut, elle se déplie sur place */
.pjd-donetoggle{display:inline-flex;align-items:center;gap:var(--sp-8);align-self:flex-start;
  min-height:var(--sp-32);margin-top:var(--sp-16);padding:var(--sp-4) var(--sp-8);
  border-radius:var(--r-9);color:var(--text-muted-warm);font-size:var(--fs-body);font-weight:600}
.pjd-donetoggle:hover{background:var(--zone-2);color:var(--text-strong)}
.pjd-donetoggle .ic{width:16px;height:16px;transition:transform var(--t-fast) var(--ease)}
.pjd-donetoggle.on .ic{transform:rotate(90deg)}
.pjd-done{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}

/* le bandeau porte le retour vers le tableau */
.ts-back{display:inline-flex;align-items:center;gap:var(--sp-4);flex:0 0 auto;
  padding:var(--sp-4) var(--sp-8);border-radius:var(--r-9);color:var(--on-deep-muted);
  font-size:var(--fs-body);font-weight:600;white-space:nowrap}
.ts-back:hover{background:var(--green-deep);color:var(--on-deep)}
.ts-back .ic{width:16px;height:16px}

@media (max-width:1180px){
  .pj-top{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .pj-thead,.pj-row{grid-template-columns:minmax(100px,1fr) 40px 40px 40px 56px}
  /* la barre passe sous l'identité : à cette largeur elle ne dirait plus rien.
     ⚠️ scopée à la LIGNE du tableau : sans `.pj-row`, la même règle déplaçait
     aussi la barre du feuillet de détail, qui n'est pas dans une grille. */
  .pj-row .pj-bar{grid-column:1 / -1;order:9}
  .pj-row .pj-id{grid-column:1 / 2}
}
@media (pointer:coarse){
  .pjd-act{width:var(--sp-44);height:var(--sp-44)}
  .pjd-add,.pjd-donetoggle{min-height:var(--sp-44)}
}
@media (max-width:760px){
  body.v-projects{overflow:auto}
  body.v-projects #mainscroll{padding:66px 0 86px}
  .pjscreen{height:auto;padding:var(--sp-16) var(--sp-12)}
  .pj-top{grid-template-columns:minmax(0,1fr)}
}

/* --- blocs hérités que le détail de projet accueille : sprint, verdict,
   avancement par membre. Ils vivent AUSSI sur Aujourd'hui (déjà validé) : on ne
   touche donc pas leurs règles d'origine, on les remet aux tokens ICI seulement.
   Ce qui change : les filets deviennent des aplats. --- */
.pjdetail .mprogress{margin:0;border:none;border-radius:var(--r-12);background:var(--card);
  padding:var(--sp-8) var(--sp-16)}
.pjdetail .mprow{border-bottom:none;padding:var(--sp-4) 0;gap:var(--sp-8);
  font-size:var(--fs-body);color:var(--text-strong)}
.pjdetail .mpname{font-size:var(--fs-body);font-weight:600;color:var(--ink)}
.pjdetail .mpnone,.pjdetail .mpname .memyou{color:var(--text-muted-warm)}
.pjdetail .mpcnt{font-family:var(--font-mono),ui-monospace,monospace;
  font-size:var(--fs-caption);color:var(--text-muted-warm)}

.pjdetail .sprintbar{border:none;border-radius:var(--r-12);background:var(--inset);
  padding:var(--sp-16) 18px;margin:0}
.pjdetail .sb-obj{font-size:var(--fs-subhead);color:var(--ink)}
.pjdetail .sb-count{font-family:var(--font-mono),ui-monospace,monospace;
  font-size:var(--fs-body);color:var(--text-strong)}
.pjdetail .sb-count small{font-size:var(--fs-caption);color:var(--text-muted-warm)}
.pjdetail .sb-brow{font-size:var(--fs-caption);color:var(--text-muted-warm)}
.pjdetail .sb-track{height:var(--sp-8);border-radius:var(--r-pill);background:var(--grid-empty)}
.pjdetail .sb-track i{border-radius:var(--r-pill)}
.pjdetail .sb-track .time{background:var(--p04)}
.pjdetail .sb-track .work{background:var(--brand)}
.pjdetail .sb-brow b{font-family:var(--font-mono),ui-monospace,monospace;
  font-size:var(--fs-caption);color:var(--text-strong)}
.pjdetail .sb-state{font-size:var(--fs-caption);color:var(--brand)}
.pjdetail .sb-state.late{color:var(--urgence-text)}
/* verdict de fin de sprint : une question, deux réponses — pas un filet */
.pjdetail .verdict{margin:0;border:none;border-radius:var(--r-12);background:var(--inset);
  padding:var(--sp-16) 18px;gap:var(--sp-12)}
.pjdetail .verdict .t{font-size:var(--fs-body-lg);font-weight:600;color:var(--ink)}
.pjdetail .verdict .q{font-size:var(--fs-body);color:var(--text-strong)}
.pjdetail .verdict .vdbtn{border:none;background:var(--zone-2);color:var(--text-strong);
  font-size:var(--fs-body);font-weight:600;border-radius:var(--r-9);padding:var(--sp-8) var(--sp-12)}
.pjdetail .verdict .vdbtn:hover{background:var(--grid-empty)}
.pjdetail .verdict .vdbtn.yes{background:var(--brand);color:var(--on-brand)}
.pjdetail .verdict .vdbtn.yes:hover{background:var(--brand-hover)}
@media (pointer:coarse){
  .pjdetail .verdict .vdbtn{min-height:var(--sp-44)}
}
/* équipage du sprint dans le détail : un aplat, pas un filet (le trait
   d'origine reste sur Aujourd'hui, écran déjà validé) */
.pjdetail .spcrew{border-top:none;margin-top:var(--sp-12);padding-top:var(--sp-12);
  background:var(--card);border-radius:var(--r-9);padding:var(--sp-8) var(--sp-12);gap:var(--sp-16)}
.pjdetail .spcm{font-size:var(--fs-caption);color:var(--text-strong)}
.pjdetail .spcm i{font-family:var(--font-mono),ui-monospace,monospace;color:var(--text-strong)}
.pjdetail .spcm-none i{color:var(--text-muted-warm)}

/* --- création d'un projet, dans l'overlay vert profond ---
   Formulaire court : panneau étroit (celui d'une invitation), pas les 1000px
   d'une habitude. Le champ et le nuancier sont redéclarés ici — les règles de
   `.chov` visent les identifiants des autres overlays, pas `#p-name`. */
#projov .gov-panel{width:660px}
.chov #p-name.chov-title{width:100%;background:var(--green-rail);border:none;
  border-radius:var(--r-12);padding:var(--sp-12) var(--sp-16);color:var(--on-deep);
  font-family:var(--font-h),sans-serif;font-size:var(--fs-subhead);font-weight:700;outline:none}
.chov .swatches{gap:var(--sp-8)}
.chov .sw{border-color:transparent}
.chov .sw.on{border-color:var(--on-deep)}
.chov .sw:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
@media (pointer:coarse){
  .chov .sw{width:var(--sp-44);height:var(--sp-44)}
}

/* --- focus dans la barre de tête : la règle globale utilise --accent (la
   marque), invisible sur le bouton de la marque lui-même (1:1) comme sur les
   plans verts (1,7 à 2:1). --mint tient sur les trois fonds. Porté sur les
   classes du bandeau, partagées par tous les écrans migrés. --- */
.ts-cta:focus-visible,.ts-seg:focus-visible,.ts-back:focus-visible,
.ts-search:focus-visible,.ts-navb:focus-visible,.ts-today:focus-visible{
  outline:2px solid var(--mint);outline-offset:2px}
/* cibles tactiles : la ligne de projet et les segments du bandeau */
@media (pointer:coarse){
  .pj-row{min-height:var(--sp-44)}
  .ts-seg{min-height:var(--sp-44);display:inline-flex;align-items:center}
}
/* titre-bouton des lignes du détail projet : même rendu que le span, mais
   focusable — l'alignement à gauche ne s'hérite pas d'un <button> */
.pjline .tl-ttl{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pjline .tl-ttl:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-6)}

/* --- détail d'un projet : ajustements des deux colonnes --- */
.pjdetail .pjd-add,.pjdetail .pjd-donetoggle{margin-left:var(--sp-12)}
.pjdetail .mprogress,.pjdetail .sprintbar,.pjdetail .verdict{background:var(--card)}
/* la colonne des tâches défile SEULE : l'identité du projet reste sous les yeux */
@media (min-width:1101px){
  .pjdetail{overflow:hidden}
  .pjd-cols{min-height:0;height:100%}
  .pjd-main{max-height:100%;overflow-y:auto}
  .pjd-main::-webkit-scrollbar{width:8px}
  .pjd-main::-webkit-scrollbar-thumb{background:var(--grid-empty);border-radius:var(--r-pill)}
}
@media (max-width:1100px){
  .pjd-cols{grid-template-columns:minmax(0,1fr)}
  .pjd-side{position:static}
}
/* champ de description dans l'overlay de projet */
.chov #p-desc.chov-ta{width:100%;background:var(--green-rail);border:none;border-radius:var(--r-9);
  padding:var(--sp-8) var(--sp-12);color:var(--on-deep);font-family:var(--font-body);
  font-size:var(--fs-body);line-height:1.5;outline:none;resize:vertical;
  min-height:calc(var(--sp-32) * 2)}
.chov #p-desc::placeholder{color:var(--on-deep-dim)}
/* avancement par membre dans une colonne étroite : le nom d'abord, ses chiffres
   dessous — à 320px, « 9 à faire · 0 en cours · 0 terminées » écrasait le nom */
.pjdetail .mprow{flex-wrap:wrap;row-gap:var(--sp-2)}
.pjdetail .mpname{flex:1 1 auto;min-width:0}
.pjdetail .mpcnt{margin-left:0;flex:1 1 100%;padding-left:28px}

/* ====== réglages d'un projet : OVERLAY vert profond, deux colonnes ======
   L'ancien volet droit a disparu. Comme pour la fiche Équipe, RIEN n'est
   hérité : les sections venaient d'une feuille claire (filets, fonds beiges),
   chaque propriété est redéclarée ici sur le plan.
   Répartition : à gauche l'équipage (membres, assignation), à droite la façon
   dont le projet se travaille (sprint, iCal, limites, champs). */
.chov-wide .chov-panel{width:1120px}
.psetov{align-items:start}
.psetov .chov-col{gap:var(--sp-24)}
.psetov .psec{padding:0;border-top:none;display:flex;flex-direction:column;gap:var(--sp-8)}
.psetov .psec-t{margin:0;font-family:var(--font-mono),ui-monospace,monospace;
  font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-deep-accent);font-weight:400}
.psetov .caphint{font-size:var(--fs-body);color:var(--on-deep-muted);line-height:1.45}
.psetov .cfempty{color:var(--on-deep-muted);font-size:var(--fs-body);padding:0}
/* interrupteur : la case native, mais posée dans une ligne cliquable */
.psetov .pstoggle{display:flex;align-items:center;gap:var(--sp-8);min-height:var(--sp-32);
  font-size:var(--fs-body-lg);font-weight:600;color:var(--on-deep);cursor:pointer}
.psetov .pstoggle input{accent-color:var(--mint);width:16px;height:16px;flex:0 0 auto}
.psetov .pstoggle .ic{width:16px;height:16px;color:var(--on-deep-accent)}

/* --- membres du projet --- */
.psetov .memlist{display:flex;flex-direction:column;gap:var(--sp-2)}
.psetov .memrow{border-bottom:none;gap:var(--sp-8);padding:var(--sp-4) var(--sp-8);
  border-radius:var(--r-9);background:var(--green-rail);min-height:var(--sp-44)}
.psetov .memwho b{font-size:var(--fs-body);color:var(--on-deep)}
.psetov .memmail,.psetov .memyou{font-size:var(--fs-caption);color:var(--on-deep-muted)}
.psetov .mav{border:none}
.psetov .mav-ghost{background:var(--green-deep);color:var(--on-deep-muted)}
.psetov .membadge{background:var(--green-deep);color:var(--on-deep);border-radius:var(--r-6);
  font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-micro);
  letter-spacing:.09em;padding:var(--sp-2) var(--sp-8)}
.psetov select.memrole{background:var(--green-deep);border:none;border-radius:var(--r-6);
  color:var(--on-deep);font-size:var(--fs-caption);padding:var(--sp-4) var(--sp-8)}
.psetov .memact{color:var(--on-deep-muted);border-radius:var(--r-6)}
.psetov .memact:hover,.psetov .memact[data-memdel]:hover{background:var(--green-deep);
  color:var(--urgence-on-deep)}
.psetov .meminvite{gap:var(--sp-8);margin-top:var(--sp-4)}
.psetov .meminvite input{flex:1;min-width:0;background:var(--green-rail);border:none;
  border-radius:var(--r-9);padding:var(--sp-8) var(--sp-12);color:var(--on-deep);
  font-size:var(--fs-body);outline:none}
.psetov .meminvite input::placeholder{color:var(--on-deep-dim)}

/* --- sprint, limites WIP, champs personnalisés --- */
.psetov .spfields{display:flex;flex-direction:column;gap:var(--sp-8);margin-top:var(--sp-4)}
.psetov .chdates{display:flex;gap:var(--sp-12);flex-wrap:wrap}
.psetov .chdates label{display:flex;flex-direction:column;gap:var(--sp-4);
  font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-micro);
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-deep-accent)}
.psetov .spobj{width:100%}
.psetov .caplist{display:flex;flex-direction:column;gap:var(--sp-4)}
.psetov .capr{display:flex;align-items:center;gap:var(--sp-8);min-height:var(--sp-32)}
.psetov .capr-d{flex:1;min-width:0;font-size:var(--fs-body);color:var(--on-deep)}
.psetov .capr-i{width:72px;flex:0 0 auto;text-align:center;background:var(--green-rail);
  border:none;border-radius:var(--r-9);padding:var(--sp-4) var(--sp-8);color:var(--on-deep)}
.psetov .capr-u{flex:0 0 auto;font-size:var(--fs-caption);color:var(--on-deep-muted)}
.psetov .cflist{display:flex;flex-direction:column;gap:var(--sp-4)}
.psetov .cfdef{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.psetov .cfdef-l{flex:1 1 40%;min-width:0}
.psetov .cfdef-t{flex:0 0 auto;background:var(--green-rail);border:none;border-radius:var(--r-9);
  color:var(--on-deep);font-family:inherit;font-size:var(--fs-body);padding:var(--sp-8)}
.psetov .cfdef-o{flex:1 1 100%}
.psetov .cfdef-x{flex:0 0 auto;width:var(--sp-32);height:var(--sp-32);border-radius:var(--r-9);
  color:var(--on-deep-muted)}
.psetov .cfdef-x:hover{background:var(--green-rail);color:var(--urgence-on-deep)}
.psetov .subadd{align-self:flex-start;background:var(--green-rail);color:var(--on-deep);
  border:none;border-radius:var(--r-9);padding:var(--sp-8) var(--sp-12);
  font-size:var(--fs-body);font-weight:600;min-height:var(--sp-32)}
.psetov .subadd:hover{background:var(--green-deep)}
/* le select doit suivre le plan : sans ça, seul `input` était habillé et le
   sélecteur restait blanc sur vert (le défaut relevé sur les participants) */
.chov select{background:var(--green-rail);border:none;border-radius:var(--r-9);
  color:var(--on-deep);font-family:inherit;font-size:var(--fs-body);padding:var(--sp-8) var(--sp-12)}
/* ⚠️ `textarea` et `select` compris : la liste de focus d'origine ne visait que
   `input`, des identifiants précis et des boutons. Et les deux champs du
   formulaire de projet sont visés PAR IDENTIFIANT (`.chov #p-name.chov-title`,
   `.chov #p-desc.chov-ta` posent `outline:none`) : sans sélecteur de même
   spécificité, aucun anneau n'apparaissait au clavier. */
.chov select:focus-visible,.chov textarea:focus-visible,
.chov #p-name.chov-title:focus-visible,.chov #p-desc.chov-ta:focus-visible{
  outline:2px solid var(--mint);outline-offset:2px}
.psetov input:focus-visible,.psetov select:focus-visible,.psetov button:focus-visible{
  outline:2px solid var(--mint);outline-offset:2px}
@media (pointer:coarse){
  .psetov .subadd,.psetov .capr-i,.psetov .cfdef-x{min-height:var(--sp-44)}
  .psetov .pstoggle input{width:22px;height:22px}
}
@media (max-width:900px){
  .chov-wide .chov-panel{width:94%}
}
.psetov .subadd{width:auto}
.psetov .capr-u{white-space:nowrap}
.psetov .capr-i{width:64px}
@media (max-width:520px){
  /* au doigt, le nom garde sa place : le badge et le rôle passent à la ligne */
  .psetov .memrow{flex-wrap:wrap;row-gap:var(--sp-4)}
  .psetov .memwho{flex:1 1 100%}
}

/* ============ écran Bilan : « lecture », plein registre (design system) ============
   Grammaire §6 : héros numéral SERIF, « en clair » à puces, UNE FORME DIFFÉRENTE
   par question, Spectral (chargée à la demande, comme sur Projets). Il agrège la
   pile de l'accompli et les cotes.
   Vocabulaire partagé avec Projets — `.pj-hero`, `.pj-num`, `.pj-tile`,
   `.pj-lab`, `.pj-clair*`, `.pj-bar`, `.pj-empty*` : sur ces deux écrans de
   lecture le préfixe `pj-` désigne le PLAN DE LECTURE, pas l'écran Projets.
   Surface --zone (comme Projets, Challenges, Équipe), ascenseur interne. */
body.v-stats{overflow:hidden}
body.v-stats #mainscroll{padding:0}
#main:has(.blscreen){max-width:none}
.blscreen{background:var(--zone);height:calc(100vh - var(--sp-44));overflow-y:auto;
  padding:var(--sp-24) 26px;display:flex;flex-direction:column;gap:var(--sp-16)}
.bl-head{display:flex;align-items:baseline;gap:var(--sp-12);flex-wrap:wrap;min-width:0}
.bl-title{font-family:var(--font-h),sans-serif;font-size:var(--fs-heading);font-weight:800;
  color:var(--ink);line-height:1.1}
/* ⚠️ --text-muted-warm ne tient que 4,4:1 sur --zone en clair : dès que le
   texte COMPTE, c'est --text (piège déjà payé sur les cases du calendrier). */
.bl-sub{font-family:var(--font-read),Georgia,serif;font-style:italic;
  font-size:var(--fs-body-lg);color:var(--text)}

/* --- barre de filtres : même composant que la col.1 d'Aujourd'hui (un groupe
   par axe, puces en aplat, active à la marque). Scopée : la base `.fchip` sert
   encore la Recherche, écran non migré. --- */
.blscreen .filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-8) var(--sp-24);
  margin:0;border:none;box-shadow:none;background:var(--inset-green);
  border-radius:var(--r-12);padding:10px var(--sp-16)}
.blscreen .fgrp{display:inline-flex;align-items:center;gap:var(--sp-8)}
.blscreen .fbar-l{font-family:var(--font-mono),ui-monospace,monospace;
  font-size:var(--fs-micro);letter-spacing:1px;text-transform:uppercase;color:var(--text);
  white-space:nowrap}
.blscreen .fchips{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
/* ⚠️ Préfixe `body.v-stats` et non `.blscreen` : à spécificité ÉGALE (0,2,0), ces
   règles ne battaient les règles héritées `.filterbar .fchip` (qui servent encore
   la Recherche, non migrée) que par leur POSITION en fin de feuille. */
body.v-stats .fchip{display:inline-flex;align-items:center;gap:5px;background:transparent;
  border:none;border-radius:var(--r-pill);padding:3px 9px;font-size:var(--fs-caption);
  font-weight:600;color:var(--text);box-shadow:none}
body.v-stats .fchip .ic-sm{width:15px;height:15px;color:var(--text-strong);flex:0 0 auto}
body.v-stats .fchip:hover{background:var(--zone-2);filter:none}
body.v-stats .fchip.on{background:var(--brand);color:var(--on-brand)}
body.v-stats .fchip.on .ic-sm{color:var(--on-brand)}
.blscreen .fgrp-state{margin-left:auto}
/* la puce de remise à zéro : un aplat en creux, pas un pointillé (interdit du DS) */
body.v-stats .fchip.freset{border:none;background:var(--zone-2);color:var(--text)}
body.v-stats .fchip.freset:hover{background:var(--grid-empty)}

/* --- héros de la période + trois tuiles de fait --- */
.bl-top{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
.bl-hero{justify-content:space-between;gap:var(--sp-12);min-height:172px}
.bl-heron{display:flex;align-items:flex-end;gap:var(--sp-12)}
/* l'écart avec la période précédente, adossé au numéral : une flèche et un signe,
   jamais une couleur d'alerte — un bilan qui recule n'est pas une erreur */
.bl-delta{display:inline-flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-8);
  font-size:var(--fs-body-lg);font-weight:600;color:var(--on-brand);
  font-variant-numeric:tabular-nums}
/* la DIRECTION se dit par la flèche, pas par la couleur : sur --brand en clair,
   ni --on-deep-muted (3,08:1) ni la menthe (3,44:1) ne tiennent AA à 15px.
   En sombre le héros passe sur --green-deep, où la menthe est confortable. */
:root[data-theme="dark"] .bl-delta{color:var(--on-deep-muted)}
:root[data-theme="dark"] .bl-delta.up{color:var(--mint)}
.bl-delta .ic-sm{width:18px;height:18px}
.bl-top .pj-tile{justify-content:space-between;gap:var(--sp-8);min-height:172px}
/* La maquette hiérarchise : 82px pour le héros, 60 pour les tuiles. La gamme
   s'arrêtant à --fs-display (46), les tuiles descendent d'un cran à --fs-title —
   sans quoi les quatre chiffres pèsent pareil et le héros n'en est plus un.
   ⚠️ Scopé .bl-top : sur Projets, les tuiles gardent le cran du héros (validé). */
.bl-top .pj-tile .pj-num{font-size:var(--fs-title)}
.bl-flame{color:var(--p04)}
.bl-flame svg{width:22px;height:22px}
/* le poids horaire du retard, collé au nombre. ⚠️ Il est en encre NEUTRE : la
   règle du DS (déjà codifiée sur les tuiles de Projets) veut que SEUL LE NOMBRE
   prenne l'encre d'urgence — et mesuré, `--urgence-text` à 13px ne tient que
   4,13:1 sur --card en sombre. */
.bl-tmono{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-body);
  color:var(--text);white-space:nowrap}
/* l'or de l'écart : la gamme brute ne tient que 3,2:1 sur --card en clair — on
   l'assied pour le TEXTE, exactement comme sur les tuiles de Challenges. En
   sombre la gamme est claire, la valeur brute passe largement. */
.bl-tile-gold .pj-num,.bl-tile-gold .bl-pct{color:color-mix(in srgb, var(--p04) 70%, var(--green-deep))}
:root[data-theme="dark"] .bl-tile-gold .pj-num,
:root[data-theme="dark"] .bl-tile-gold .bl-pct{color:var(--p04)}
.bl-pct{font-family:var(--font-read),Georgia,serif;font-size:var(--fs-heading);line-height:1}
/* une valeur ABSENTE ne prend pas la place d'un chiffre : le tiret se dit en
   creux et au cran d'en dessous, sinon on lit un trait de 46px pour une panne */
.bl-num-none{font-size:var(--fs-title);color:var(--text-muted-warm)}
.bl-tile-gold .pj-num.bl-num-none,.bl-evr-n.bl-num-none{color:var(--text-muted-warm)}

/* --- « en clair » : six constats au plus, en trois colonnes --- */
.bl-clair-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-8) var(--sp-32)}

/* --- une forme par question : histogramme · mosaïque · jauges --- */
.bl-forms{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  gap:var(--sp-16);align-items:stretch;min-width:0}
/* en-tête de carte : identité à gauche, chiffre-clé en mono à droite */
.bl-cardh{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-12);
  min-width:0}
.bl-peak{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-caption);
  color:var(--text-muted-warm);white-space:nowrap;flex:0 0 auto}
.bl-peak b{color:var(--text-strong);font-weight:600}
.bl-chart{display:flex;flex-direction:column;gap:var(--sp-12)}
/* les barres : intensité par la rampe d'assiduité, le pic au plus haut cran.
   Pas de grille figée à sept pistes — le mois en compte 28 à 31, l'année 12. */
/* la gouttière suit le NOMBRE de barres : 12px sont justes pour 7 jours,
   étouffants pour 31 (il ne resterait que 5px de barre) et trop pour 12 mois */
.bl-bars{flex:1;display:flex;align-items:flex-end;gap:var(--sp-4);min-height:120px}
.bl-bars.sc-week{gap:var(--sp-12)}
.bl-bars.sc-month{gap:var(--sp-2)}
.bl-bars.sc-year{gap:var(--sp-8)}
.bl-col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:6px;height:100%}
.bl-bar{width:100%;display:block;border-radius:var(--r-6) var(--r-6) 0 0;
  background:var(--grid-empty);min-height:3px}
.bl-bar.l0{height:3px}
.bl-bar.l2{background:var(--heat-2)}
.bl-bar.l3{background:var(--heat-3)}
.bl-bar.l4{background:var(--heat-4)}
.bl-bar.l5{background:var(--heat-5)}
.bl-d{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-micro);
  color:var(--text-muted-warm);min-height:1em;text-align:center}
.bl-d.peak{color:var(--text-strong);font-weight:600}
.bl-col.now .bl-d{color:var(--brand);font-weight:600}

/* --- la pile de l'accompli, en MOSAÏQUE (plan vert profond) ---
   Une case = une tâche classée tant que le total tient dans la grille, sinon les
   cases disent les proportions. Forme DISCRÈTE, délibérément autre que la barre
   continue de l'avancement par projet juste dessous (demande Manu). */
.bl-pile{border-radius:var(--r-12);padding:var(--sp-16) 18px;gap:var(--sp-8);
  justify-content:flex-start}
.bl-pile .fb-head{color:var(--on-deep-accent)}
.bl-pile-sub{font-family:var(--font-read),Georgia,serif;font-style:italic;
  font-size:var(--fs-body);color:var(--on-deep-muted)}
.bl-mosaic{display:flex;flex-wrap:wrap;gap:3px;margin-top:var(--sp-4)}
.bl-cell{width:11px;height:11px;flex:0 0 11px;border-radius:3px;background:var(--pc);display:block}
.bl-unit{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-micro);
  letter-spacing:.06em;color:var(--on-deep-muted)}
/* `margin-top:auto` : les dernières classées se posent EN PIED de la carte —
   sans ça, une semaine à deux tâches laissait un grand vide sous la mosaïque */
.bl-pile-rows{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:var(--sp-8)}
/* les lignes de la pile se LISENT ici (aucun geste sur cet écran) : ni rature,
   ni curseur de clic — la coche menthe dit déjà que c'est classé */
/* ⚠️ PAS --cote ici : le plan de la pile est --green-deep dans LES DEUX thèmes,
   or --cote est une encre sombre en clair (mesuré 1,64:1). --on-deep-muted : 6,2:1. */
.bl-pile .fb-row .cote{width:auto;min-width:52px;color:var(--on-deep-muted)}
.bl-pile .fb-t{text-decoration:none;cursor:default}
.bl-pile .fb-row svg{color:var(--mint)}
.bl-pile .fb-more{color:var(--on-deep-muted)}

/* --- estimé vs réel : deux jauges à la même échelle + le verdict en serif --- */
.bl-evr{display:flex;flex-direction:column;gap:var(--sp-4)}
.bl-evr-rows{display:flex;flex-direction:column;gap:var(--sp-16);margin-top:var(--sp-12)}
.bl-evr-h{display:flex;justify-content:space-between;gap:var(--sp-8);
  font-size:var(--fs-body);color:var(--text-muted-warm);margin-bottom:5px}
.bl-evr-v{font-family:var(--font-mono),ui-monospace,monospace;font-variant-numeric:tabular-nums}
.bl-evr-v.est{color:var(--brand)}
/* ⚠️ en sombre, --brand comme ENCRE ne fait que 2,42:1 sur --card : la menthe
   est la même famille et tient 6,1:1 (même arbitrage que la coche de la pile) */
:root[data-theme="dark"] .bl-evr-v.est{color:var(--mint)}
.bl-evr-v.reel{color:color-mix(in srgb, var(--p04) 70%, var(--green-deep))}
:root[data-theme="dark"] .bl-evr-v.reel{color:var(--p04)}
.bl-evr-bar{height:13px;border-radius:7px;background:var(--grid-empty);overflow:hidden}
.bl-evr-bar i{display:block;height:100%;border-radius:7px}
.bl-evr-bar i.est{background:var(--brand)}
.bl-evr-bar i.reel{background:var(--p04)}
.bl-evr-foot{display:flex;align-items:baseline;gap:var(--sp-8);margin-top:auto;
  padding-top:var(--sp-16);flex-wrap:wrap}
.bl-evr-n{font-family:var(--font-read),Georgia,serif;font-weight:500;font-size:var(--fs-title);
  line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;
  color:color-mix(in srgb, var(--p04) 70%, var(--green-deep))}
:root[data-theme="dark"] .bl-evr-n{color:var(--p04)}
.bl-evr .pj-tilesub{flex:1;min-width:0}

/* --- avancement par projet : deux colonnes de lignes cliquables --- */
.bl-proj,.bl-ch{gap:var(--sp-12)}
.bl-reset{font-size:var(--fs-caption);font-weight:600;color:var(--brand);
  background:none;border:none;padding:var(--sp-4) 0;white-space:nowrap;flex:0 0 auto}
.bl-reset:hover{text-decoration:underline}
.bl-prows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8) 40px}
.bl-prow{display:grid;grid-template-columns:20px minmax(70px,92px) minmax(60px,1fr) 46px;
  align-items:center;gap:11px;min-width:0;text-align:left;
  background:none;border:none;padding:var(--sp-4) var(--sp-8);border-radius:var(--r-9);
  transition:background var(--t-fast) var(--ease)}
.bl-prow:hover{background:var(--card-hi)}
/* sélectionné / écarté : la VALEUR le dit (fond en creux), jamais une opacité —
   elle traverserait le texte et ruinerait son contraste */
.bl-prow.on{background:var(--zone-2)}
.bl-prow.dim{background:var(--inset)}
.bl-prow.dim .bl-pname,.bl-prow.dim .bl-ppct{color:var(--text-muted-warm)}
.bl-pname{font-size:var(--fs-body);color:var(--text-strong);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bl-ppct{font-family:var(--font-mono),ui-monospace,monospace;font-size:var(--fs-caption);
  color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
.bl-prow .pj-bar{height:11px;border-radius:var(--r-6)}

/* --- challenges de la période : les tuiles de verdict de l'écran Challenges,
   posées dans une carte (donc un cran en creux) et dont les noms mènent aux
   défis --- */
.bl-ch .chx-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-16)}
.bl-ch .chx-tile{background:var(--inset-green)}
.bl-ch button.chx-tl{background:none;border:none;padding:0;font:inherit;width:100%;
  border-radius:var(--r-6)}
.bl-ch button.chx-tl:hover .chx-tl-n{text-decoration:underline}
.bl-chnone{color:var(--text-muted-warm)}

/* --- étroit : les rangées se dépilent, rien ne se comprime sous sa lisibilité --- */
@media (max-width:1180px){
  .bl-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-forms{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .bl-forms .bl-evr{grid-column:1 / -1}
  .bl-clair-l{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .bl-prows{grid-template-columns:minmax(0,1fr)}
  .bl-ch .chx-tiles{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  /* mobile : la barre de tête n'existe pas, la surface reprend toute la hauteur */
  .blscreen{height:auto;padding:var(--sp-16) var(--sp-12);gap:var(--sp-12)}
  /* le chiffre-clé passe à la ligne : « pic lun · 25 » débordait de 37px */
  .bl-cardh{flex-wrap:wrap}
  .bl-top,.bl-forms{grid-template-columns:minmax(0,1fr)}
  .bl-clair-l{grid-template-columns:minmax(0,1fr)}
  .bl-hero,.bl-top .pj-tile{min-height:0}
  .blscreen .filterbar{gap:var(--sp-8) var(--sp-16)}
  .blscreen .fgrp-state{margin-left:0}
}
/* au doigt, TOUT ce qui se touche tient la cible de 44px du skill — y compris
   les puces de filtre et les noms de challenges, qui sont de vrais boutons */
@media (pointer:coarse){
  .bl-prow,.bl-reset{min-height:var(--sp-44)}
  body.v-stats .fchip{min-height:var(--sp-44);padding:6px 11px}
  .bl-ch button.chx-tl{min-height:var(--sp-44)}
}