/* 73-journal — 02/10/2026 : Journal d'activité lisible du premier coup. */
#t-journal{
  --jx-card:var(--s1);
  --jx-soft:var(--s2);
  --jx-line:var(--brd);
  --jx-sh:0 1px 2px rgba(12,18,32,.04),0 6px 20px rgba(12,18,32,.06);
  --jx-mono:'JetBrains Mono',ui-monospace,monospace;
}
body:not(.light-theme) #t-journal{ --jx-sh:0 1px 2px rgba(0,0,0,.2),0 8px 24px rgba(0,0,0,.22); }
#t-journal .sec > .sec-hd{ display:none !important; }
#jx-root, #jbody.jx-body{ font-family:'Outfit',system-ui,sans-serif; color:var(--tx); }
#t-journal .jx-ico{ width:18px; height:18px; display:block; }
#t-journal .jx-ico-s{ width:14px; height:14px; flex:none; display:block; }
#t-journal .jx-mu{ color:var(--mu); }
#t-journal .jx-sep{ color:var(--mu); }
#t-journal mark{ background:rgba(249,115,22,.28); color:inherit; border-radius:3px; padding:0 2px; }

/* ── Résumé ── */
#t-journal .jx-sum{
  display:grid; grid-template-columns:minmax(220px,300px) 1fr; gap:14px;
  margin:0 0 14px;
}
#t-journal .jx-today, #t-journal .jx-week{
  background:var(--jx-card); border:1px solid var(--jx-line); border-radius:16px;
  padding:16px 18px; box-shadow:var(--jx-sh); min-width:0;
}
#t-journal .jx-today{
  /* 14/10/2026 (user) : « c'est noir, c'est moche, jamais de bouton noir — mets
     le bleu marine du site ». C'est le même bleu que l'écran de connexion. */
  background:linear-gradient(135deg,#1a2336 0%,#2b3b63 100%); border-color:transparent; color:#fff;
}
#t-journal .jx-k{
  font-family:var(--jx-mono); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--mu); margin-bottom:10px; display:flex; align-items:center; gap:2px; flex-wrap:wrap;
}
#t-journal .jx-dot{ width:3px; height:3px; border-radius:50%; background:currentColor; margin:0 8px; opacity:.7; }
#t-journal .jx-k .jx-n{ color:var(--tx); font-weight:700; }
#t-journal .jx-today .jx-k{ color:#FDBA74; }
#t-journal .jx-big{ font-size:15px; color:rgba(255,255,255,.78); display:flex; align-items:baseline; gap:8px; }
#t-journal .jx-big .jx-n{ font-size:40px; line-height:1; font-weight:700; color:#fff; letter-spacing:-.02em; }
#t-journal .jx-who-today{ margin-top:14px; display:flex; align-items:center; gap:10px; font-size:13px; color:rgba(255,255,255,.78); flex-wrap:wrap; }
#t-journal .jx-who-today .jx-n{ color:#fff; }
#t-journal .jx-today .jx-q{ background:rgba(255,255,255,.12); color:#fff; }
#t-journal .jx-stack{ display:inline-flex; }
#t-journal .jx-stack .jx-av{ box-shadow:0 0 0 2px #141c31; margin-left:-6px; }
#t-journal .jx-stack .jx-av:first-child{ margin-left:0; }
/* 14/10/2026 : qui a fait tourner le dépôt cette semaine — ce que les filtres
   de type, juste en dessous, ne disent pas. Les pastilles qui les répétaient
   mot pour mot ont été retirées (voir js/73-journal.js). */
#t-journal .jx-who-week{ display:flex; align-items:center; gap:10px; margin-top:14px; font-size:13px; flex-wrap:wrap; }
#t-journal .jx-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; }
#t-journal button.jx-tile{
  min-height:0 !important; display:grid !important; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:10px; align-items:center; text-align:left; cursor:pointer;
  padding:10px 12px; border-radius:12px; border:1px solid var(--jx-line); background:var(--jx-soft);
  font-family:'Outfit',sans-serif; color:var(--tx); transition:border-color .15s, background .15s, transform .15s;
}
#t-journal button.jx-tile:hover{ border-color:color-mix(in srgb,var(--c) 55%,transparent); transform:translateY(-1px); }
#t-journal button.jx-tile.on{ border-color:var(--c); background:color-mix(in srgb,var(--c) 10%,var(--jx-card)); }
#t-journal .jx-tile .jx-badge{ grid-row:1 / span 2; }
#t-journal .jx-tn{ font-size:20px; font-weight:700; line-height:1.05; }
#t-journal .jx-tl{ font-size:12px; color:var(--mu); line-height:1.2; }
#t-journal .jx-calme{ font-size:13px; }

/* ── Badges de type ── */
#t-journal .jx-badge{
  width:36px; height:36px; border-radius:11px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  color:var(--c); background:color-mix(in srgb,var(--c) 13%,var(--jx-card));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 22%,transparent);
}
body:not(.light-theme) #t-journal .jx-badge{ color:color-mix(in srgb,var(--c) 70%,#fff); background:color-mix(in srgb,var(--c) 22%,var(--jx-card)); }

/* ── Recherche et filtres ── */
#t-journal .jx-tools{
  background:var(--jx-card); border:1px solid var(--jx-line); border-radius:16px; box-shadow:var(--jx-sh);
  padding:14px 16px; margin-bottom:18px; display:flex; flex-direction:column; gap:10px;
}
#t-journal .jx-sbox{ position:relative; }
#t-journal .jx-loupe{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--mu); pointer-events:none; }
#t-journal #jrn-search{
  width:100% !important; height:44px; padding:0 44px 0 40px !important; border:1.5px solid var(--jx-line) !important; border-radius:12px !important;
  background:var(--jx-soft) !important; color:var(--tx) !important; font:500 14px 'Outfit',sans-serif !important; outline:none; box-sizing:border-box;
  transition:border-color .15s, box-shadow .15s;
}
#t-journal #jrn-search:focus{ border-color:#F97316 !important; box-shadow:0 0 0 3px rgba(249,115,22,.15); }
#t-journal #jrn-search::-webkit-search-cancel-button{ -webkit-appearance:none; }
#t-journal #jrn-search-clear{ display:none !important; }
#t-journal .jx-sbox.has-q #jrn-search-clear{ display:inline-flex !important; }
#t-journal #jrn-search-clear{
  min-height:0 !important; width:30px; height:30px; border-radius:8px; align-items:center; justify-content:center;
  font-size:18px !important; right:7px !important;
}
#t-journal #jrn-search-clear:hover{ background:var(--s3) !important; }
#t-journal .jx-frow{ display:flex; align-items:flex-start; gap:12px; }
#t-journal .jx-flab{
  font-family:var(--jx-mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--mu);
  width:72px; flex:none; padding-top:11px;
}
#t-journal .jx-pills{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; flex:1; }
#t-journal button.jx-pill{
  min-height:34px !important; display:inline-flex !important; align-items:center; gap:6px; padding:0 11px; border-radius:999px;
  border:1px solid var(--jx-line); background:var(--jx-card); color:var(--tx2,var(--tx));
  font:600 12.5px 'Outfit',sans-serif; cursor:pointer; white-space:nowrap; transition:all .15s;
}
#t-journal button.jx-pill .jx-ico-s{ color:var(--c); }
#t-journal button.jx-pill:hover{ border-color:color-mix(in srgb,var(--c) 60%,transparent); }
#t-journal button.jx-pill.on{ background:var(--c); border-color:var(--c); color:#fff; }
#t-journal button.jx-pill.on .jx-ico-s{ color:#fff; }
#t-journal .jx-pc{
  font-family:var(--jx-mono); font-size:10.5px; font-weight:600; padding:1px 6px; border-radius:999px;
  background:var(--s3); color:var(--mu);
}
#t-journal button.jx-pill.on .jx-pc{ background:rgba(255,255,255,.24); color:#fff; }
#t-journal button.jx-pill.on .jx-av{ box-shadow:0 0 0 1.5px rgba(255,255,255,.85); }

/* ── Avatars ── */
#t-journal .jx-av{
  width:24px; height:24px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center;
  background:var(--p); color:#fff; font:700 10px 'Outfit',sans-serif; letter-spacing:.02em;
}
#t-journal .jx-av-s{ width:28px; height:28px; font-size:11px; }
#t-journal .jx-av-xs{ width:20px; height:20px; font-size:8.5px; margin-left:-5px; }

/* ── Journées ── */
#t-journal .jx-day{ margin-bottom:22px; }
#t-journal .jx-dh{ display:flex; align-items:baseline; gap:10px; padding:0 4px 10px; flex-wrap:wrap; }
#t-journal .jx-dt{ font-size:17px; font-weight:700; color:var(--tx); letter-spacing:-.01em; }
#t-journal .jx-ds{ font-family:var(--jx-mono); font-size:11px; color:var(--mu); }
#t-journal .jx-dc{ margin-left:auto; font-size:12px; color:var(--mu); }
#t-journal .jx-dc .jx-n{ color:var(--tx); }
#t-journal .jx-list{
  list-style:none; margin:0; padding:6px 0; background:var(--jx-card); border:1px solid var(--jx-line);
  border-radius:16px; box-shadow:var(--jx-sh); position:relative;
}
#t-journal .jx-it{
  position:relative; display:flex; align-items:flex-start; gap:14px; padding:12px 18px;
}
#t-journal .jx-it + .jx-it::after{
  content:''; position:absolute; top:0; left:68px; right:18px; height:1px; background:var(--jx-line); opacity:.7;
}
/* 29/10/2026 (user) : « des traits qui suivent des boutons qui n'ont rien à faire là ».
   Ce fil vertical faisait 24 px alors que deux pictos sont séparés de 60 px ou plus dès
   qu'une ligne tient sur deux lignes : il pendait dans le vide, relié à rien. Le trait
   horizontal qui sépare deux actions suffit. */
#t-journal .jx-it .jx-badge{ position:relative; z-index:1; }
#t-journal .jx-main{ flex:1; min-width:0; padding-top:1px; }
#t-journal .jx-txt{ font-size:14.5px; line-height:1.75; color:var(--tx); overflow-wrap:anywhere; }
#t-journal button.jx-who{
  min-height:0 !important; display:inline-flex !important; align-items:center; gap:6px; vertical-align:middle;
  padding:1px 8px 1px 1px; border-radius:999px; border:0; cursor:pointer;
  background:color-mix(in srgb,var(--p) 12%,transparent); font:700 14px 'Outfit',sans-serif; color:var(--tx);
}
#t-journal button.jx-who:hover{ background:color-mix(in srgb,var(--p) 22%,transparent); }
#t-journal .jx-qui2{ font-weight:600; }
#t-journal .jx-lib{ font-weight:600; }
#t-journal .jx-q{
  display:inline-block; font-family:var(--jx-mono); font-size:12.5px; font-weight:700; line-height:1.5;
  padding:0 7px; border-radius:7px; background:var(--s3); color:var(--tx); vertical-align:baseline;
}
#t-journal button.jx-ch{
  min-height:0 !important; display:inline-flex !important; align-items:center; gap:5px; vertical-align:middle; max-width:100%;
  padding:2px 9px 2px 7px; border-radius:8px; border:1px solid var(--jx-line); background:var(--jx-soft); cursor:pointer;
  font:600 13px 'Outfit',sans-serif; color:var(--tx); line-height:1.4; text-align:left;
}
#t-journal button.jx-ch .jx-ico-s{ color:#F97316; }
#t-journal button.jx-ch:hover{ border-color:rgba(249,115,22,.55); }
#t-journal .jx-meta{ display:flex; align-items:center; gap:8px; margin-top:3px; flex-wrap:wrap; }
#t-journal .jx-tag{
  font-family:var(--jx-mono); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--c);
}
body:not(.light-theme) #t-journal .jx-tag{ color:color-mix(in srgb,var(--c) 65%,#fff); }
#t-journal .jx-role{ font-size:12px; color:var(--mu); }
#t-journal .jx-role::before{ content:''; display:inline-block; width:3px; height:3px; border-radius:50%; background:var(--mu); margin:0 8px 3px 0; vertical-align:middle; }
#t-journal .jx-h{
  flex:none; font-family:var(--jx-mono); font-size:12px; font-weight:600; color:var(--mu); padding-top:8px;
}

/* ── Pied, vide ── */
#t-journal .jx-foot{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:4px 0 10px; font-size:12px; }
#t-journal button.jx-more{
  min-height:40px !important; display:inline-flex !important; align-items:center; gap:8px; padding:0 18px; border-radius:999px;
  border:1px solid var(--jx-line); background:var(--jx-card); color:var(--tx); font:600 13px 'Outfit',sans-serif; cursor:pointer; box-shadow:var(--jx-sh);
}
#t-journal button.jx-more:hover{ border-color:rgba(249,115,22,.55); }
#t-journal .jx-vide{
  text-align:center; padding:44px 20px; background:var(--jx-card); border:1px dashed var(--jx-line); border-radius:16px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
#t-journal .jx-vide-ic{ width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#F97316; background:rgba(249,115,22,.1); margin-bottom:6px; }
#t-journal .jx-vide-ic .jx-ico{ width:24px; height:24px; }
#t-journal .jx-vide-t{ font-size:16px; font-weight:700; }
#t-journal .jx-vide-s{ font-size:13.5px; color:var(--mu); max-width:420px; line-height:1.5; margin-bottom:6px; }

/* ── Mobile ── */
@media (max-width:760px){
  #t-journal .jx-sum{ grid-template-columns:1fr; gap:10px; }
  #t-journal .jx-today, #t-journal .jx-week{ padding:12px 14px; }
  #t-journal .jx-today{ display:flex; flex-wrap:wrap; align-items:center; column-gap:16px; row-gap:4px; }
  #t-journal .jx-today .jx-k{ width:100%; margin-bottom:2px; }
  #t-journal .jx-big .jx-n{ font-size:28px; }
  #t-journal .jx-who-today{ margin-top:0; }
  #t-journal .jx-av-s{ width:24px; height:24px; font-size:10px; }
  #t-journal .jx-week .jx-k{ margin-bottom:8px; }
  #t-journal button.jx-tile{ padding:8px 10px; }
  #t-journal .jx-tile .jx-badge{ width:30px; height:30px; border-radius:9px; }
  #t-journal .jx-tn{ font-size:17px; }
  #t-journal .jx-ds{ display:none; }
  #t-journal .jx-tiles{ display:flex; overflow-x:auto; gap:8px; margin:0 -14px; padding:0 14px 2px; scrollbar-width:none; }
  #t-journal .jx-tiles::-webkit-scrollbar{ display:none; }
  #t-journal button.jx-tile{ flex:none; min-width:112px; }
  #t-journal .jx-tools{ padding:12px; }
  #t-journal .jx-frow{ flex-direction:column; gap:6px; }
  #t-journal .jx-flab{ width:auto; padding-top:0; }
  #t-journal .jx-pills{ flex-wrap:nowrap; overflow-x:auto; width:calc(100% + 24px); margin:0 -12px; padding:0 12px 2px; scrollbar-width:none; }
  #t-journal .jx-pills::-webkit-scrollbar{ display:none; }
  #t-journal button.jx-pill{ min-height:38px !important; flex:none; }
  #t-journal .jx-it{ padding:12px 14px; gap:12px; }
  #t-journal .jx-it + .jx-it::after{ left:62px; right:14px; }
  #t-journal .jx-txt{ font-size:14px; line-height:1.7; }
  #t-journal .jx-h{ position:absolute; top:12px; right:14px; padding-top:0; font-size:11px; }
  #t-journal .jx-main{ padding-right:40px; }
}
body:not(.light-theme) #t-journal .jx-av{ color:#0C1220; }
body:not(.light-theme) #t-journal .jx-today{ border-color:rgba(249,115,22,.28); background:linear-gradient(135deg,#0C1220 0%,#202c4a 100%); }

/* ══════════════════════════════════════════════════════════════════════════
   23/10/2026 (user) : « je ne comprends rien à la disposition : c'est où, qui,
   pourquoi, quand ? Il y a une action, on ne sait pas ce que c'est, on clique
   dessus et ça ne fait rien. »
   Une ligne se lit maintenant de haut en bas : le TYPE en couleur, l'HEURE à
   droite, puis QUI a fait QUOI et OÙ. Et elle s'ouvre.
   ══════════════════════════════════════════════════════════════════════════ */

/* Le résumé tient sur une ligne. */
#t-journal .jx-sum{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:0 0 12px;
  padding:11px 16px; background:var(--jx-card); border:1px solid var(--jx-line); border-radius:14px; box-shadow:var(--jx-sh); }
#t-journal .jx-fait{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--mu); }
#t-journal .jx-fait b{ font:800 17px/1 'Outfit',sans-serif; color:var(--tx); }
#t-journal .jx-fait-g{ margin-left:auto; }

/* La ligne : un seul bouton, tout est cliquable. */
#t-journal .jx-it{ padding:0; }
#t-journal .jx-row{
  display:flex; align-items:flex-start; gap:14px; width:100%; text-align:left; padding:12px 16px;
  border:0; background:transparent; cursor:pointer; font:inherit; border-radius:12px;
}
#t-journal .jx-row:hover{ background:var(--jx-soft); }
#t-journal .jx-row:focus-visible{ outline:2px solid var(--c); outline-offset:-2px; }
#t-journal .jx-row .jx-main{ display:flex; flex-direction:column; gap:3px; }
#t-journal .jx-top{ display:flex; align-items:baseline; gap:10px; }
#t-journal .jx-type{
  font:700 11px/1.3 'Outfit',sans-serif; letter-spacing:.05em; text-transform:uppercase; color:var(--c);
}
body:not(.light-theme) #t-journal .jx-type{ color:color-mix(in srgb,var(--c) 68%,#fff); }
#t-journal .jx-row .jx-h{ margin-left:auto; padding:0; }
#t-journal .jx-row .jx-txt{ display:block; font-size:14.5px; line-height:1.6; }
#t-journal .jx-row .jx-av{ vertical-align:-4px; margin-right:5px; }
#t-journal .jx-wn{ font-weight:700; }
#t-journal .jx-go{ flex:none; align-self:center; color:var(--mu); transform:rotate(-90deg); opacity:.55; }
#t-journal .jx-row:hover .jx-go{ opacity:1; color:var(--c); }
/* le fil de la journée reste aligné sur les pictos */
#t-journal .jx-it + .jx-it::after{ left:66px; right:16px; }

/* Le détail d'une action. */
.jx-det .jx-det-tete{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.jx-det .jx-det-type{ display:block; font:700 11px/1.3 'Outfit',sans-serif; letter-spacing:.05em; text-transform:uppercase; color:var(--c); }
.jx-det .jx-det-q{ font:700 15px/1.3 'Outfit',sans-serif; color:var(--tx); }
.jx-det .jx-det-p{ margin:0 0 14px; padding:12px 14px; border-radius:12px; background:var(--s2); font-size:14.5px; line-height:1.6; color:var(--tx); }
.jx-det .jx-det-l{ display:grid; gap:9px; margin:0 0 4px; }
.jx-det .jx-det-l > div{ display:grid; grid-template-columns:70px 1fr; gap:10px; align-items:baseline; }
.jx-det dt{ font:600 12px/1.4 'Outfit',sans-serif; color:var(--mu); text-transform:uppercase; letter-spacing:.04em; }
.jx-det dd{ margin:0; font-size:14px; color:var(--tx); }
.jx-det dd span{ color:var(--mu); font-size:12.5px; }

@media(max-width:560px){
  #t-journal .jx-fait-g{ margin-left:0; }
  #t-journal .jx-row{ padding:11px 13px; gap:11px; }
  #t-journal .jx-it + .jx-it::after{ left:58px; right:13px; }
}

/* Le détail vit hors de #t-journal : il lui faut les mêmes petits éléments. */
.jx-det .jx-ico{ width:18px; height:18px; display:block; }
.jx-det .jx-ico-s{ width:14px; height:14px; flex:none; display:block; }
.jx-det .jx-av{
  width:24px; height:24px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center;
  background:var(--p); color:#fff; font:700 10px 'Outfit',sans-serif; vertical-align:-6px; margin-right:6px;
}
.jx-det .jx-badge{
  width:38px; height:38px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:color-mix(in srgb,var(--c) 14%,transparent); color:var(--c);
}
.jx-det .jx-q{
  display:inline-block; font-family:var(--jx-mono,'JetBrains Mono',monospace); font-size:12.5px; font-weight:700;
  padding:0 7px; border-radius:7px; background:var(--s3,var(--s2)); color:var(--tx);
}
.jx-det button.jx-ch{
  min-height:0 !important; display:inline-flex !important; align-items:center; gap:5px; vertical-align:middle; max-width:100%;
  padding:2px 9px 2px 7px; border-radius:8px; border:1px solid var(--brd); background:var(--s2); cursor:default;
  font:600 13px 'Outfit',sans-serif; color:var(--tx); line-height:1.4;
}
.jx-det button.jx-ch .jx-ico-s{ color:#F97316; }
.jx-det .jx-mot{ color:var(--mu); }
.jx-det .jx-sep{ color:var(--mu); }