/* ============================================================
   JOURNAL DE BORD — frise éditoriale joy (mockup journal-page.jsx)
   ------------------------------------------------------------
   Règle d'or : aucune couleur en dur. Tokens thème + --joy-*.
   Teinte d'une entrée (--jx-ink/--jx-tint) = canal ; chip couple
   = teinte du mariage (--jc-ink/--jc-tint, inline).
   ============================================================ */

.jx-page { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }

/* En-tête */
.jx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.jx-title { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.6vw, 50px); line-height: 1.05; margin: 10px 0 0; color: var(--ink); letter-spacing: -.01em; }
.jx-title em { font-style: italic; color: var(--accent); }
.jx-sub { font-family: var(--serif); font-style: italic; font-size: 15.5px; line-height: 1.5; color: var(--muted); margin: 10px 0 0; max-width: 520px; }
.jx-actions { display: flex; gap: 12px; align-items: center; flex-shrink: 0; flex-wrap: wrap; }
.jx-btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding: 11px 18px; border-radius: 8px; transition: filter .15s ease, background .15s ease, transform .12s ease; white-space: nowrap; }
.jx-btn:active { transform: translateY(1px); }
.jx-btn-dicter { background: var(--surface); color: var(--joy-rose-ink); border: 1px solid color-mix(in srgb, var(--joy-rose-ink) 50%, transparent); }
.jx-btn-dicter:hover { background: color-mix(in srgb, var(--joy-rose-tint) 70%, transparent); }
.jx-btn-primary { background: var(--primary); color: #fff; border: 1px solid var(--primary); }
.jx-btn-primary:hover { filter: brightness(1.08); }

/* Légende / filtre canal */
.jx-legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jx-leg { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 12px; font-weight: 500; padding: 7px 13px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); transition: background .15s ease, color .15s ease, border-color .15s ease; }
.jx-leg-count { font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--muted-soft); }
.jx-leg.on { border-color: var(--jx-ink); background: var(--jx-tint); color: var(--jx-ink); font-weight: 600; }
.jx-leg.on .jx-leg-count { color: var(--jx-ink); }
.jx-leg-all.on { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.jx-leg-all.on .jx-leg-count { color: var(--accent); }

/* Barre de filtres */
.jx-filterbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.jx-search { flex: 2; min-width: 240px; display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); transition: border-color .15s ease, box-shadow .15s ease; }
.jx-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.jx-search input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--sans); font-size: 13.5px; color: var(--ink); }
.jx-search button { border: none; background: transparent; cursor: pointer; color: var(--muted); display: flex; }
.jx-select { flex: 1; min-width: 168px; font-family: var(--sans); font-size: 13px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; cursor: pointer; outline: none; transition: border-color .15s ease; }
.jx-select:focus { border-color: var(--accent); }

/* Empty */
.jx-empty { padding: 64px 0; text-align: center; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--muted); }
.jx-resume { text-align: center; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--muted); padding-top: 4px; }

/* Frise — groupe jour */
.jx-timeline { display: flex; flex-direction: column; gap: 26px; }
.jx-day-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding-left: 4px; }
.jx-day-label { font-family: var(--sans); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--accent); }
.jx-day-date { font-family: var(--sans); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.jx-day-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--muted-soft); }
.jx-day-rule { flex: 1; height: 1px; background: var(--line); }
.jx-day-count { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--muted); }

/* Entrée : heure | rail+nœud | carte */
.jx-entry { display: grid; grid-template-columns: 54px 34px 1fr; column-gap: 4px; position: relative; }
.jx-time { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 20px; text-align: right; letter-spacing: .02em; }
.jx-rail { position: relative; display: flex; justify-content: center; }
.jx-rail-line { position: absolute; top: 0; bottom: -18px; width: 2px; background: var(--line); }
.jx-entry.is-last .jx-rail-line { bottom: calc(100% - 24px); }
.jx-node { position: absolute; top: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; }
.jx-node span { width: 30px; height: 30px; border-radius: 50%; background: var(--jx-tint); border: 1.5px solid var(--jx-ink); color: var(--jx-ink); display: flex; align-items: center; justify-content: center; transition: box-shadow .2s ease; }
.jx-entry:hover .jx-node span { box-shadow: 0 0 0 4px color-mix(in srgb, var(--jx-ink) 12%, transparent); }

.jx-card { margin: 8px 0; padding: 15px 18px; background: var(--surface); border-radius: 10px; border: 1px solid var(--line); position: relative; overflow: hidden; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent); transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .18s ease; animation: jx-card-in .45s cubic-bezier(.2,.7,.3,1) both; }
.jx-card:hover { transform: translateX(3px); border-color: color-mix(in srgb, var(--jx-ink) 40%, transparent); box-shadow: 0 16px 36px color-mix(in srgb, var(--ink) 9%, transparent); }
.jx-card-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--jx-ink); opacity: 0; transition: opacity .18s ease; }
.jx-card:hover .jx-card-accent { opacity: 1; }
.jx-card-head { display: flex; align-items: center; gap: 10px; }
.jx-chan { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--jx-ink); background: var(--jx-tint); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.jx-who { font-family: var(--serif); font-size: 17px; color: var(--ink); font-weight: 500; white-space: nowrap; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; }
.jx-tools { margin-left: auto; display: flex; gap: 2px; opacity: 0; transform: translateX(4px); transition: opacity .16s ease, transform .16s ease; flex-shrink: 0; }
.jx-card:hover .jx-tools { opacity: 1; transform: none; }
.jx-tool { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; transition: background .15s ease, color .15s ease; }
.jx-tool:hover { background: var(--surface-tinted); color: var(--ink-soft); }
.jx-tool.danger:hover { color: var(--danger, #b4665c); }
.jx-text { font-family: var(--sans); font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin: 9px 0 0; text-wrap: pretty; word-break: break-word; }
.jx-text a { color: var(--accent); }
.jx-metarow { margin-top: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jx-couple { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--jc-ink); background: var(--jc-tint); padding: 4px 10px; border-radius: 999px; white-space: nowrap; cursor: pointer; }
.jx-vendor { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 11px; color: var(--ink-soft); background: var(--surface-tinted); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; white-space: nowrap; cursor: pointer; }
.jx-phase { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 11px; color: var(--muted); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.jx-phase-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--jp-ink, var(--muted)); }
.jx-voice { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 11px; color: var(--joy-rose-ink); }

@keyframes jx-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Responsive */
@media (max-width: 700px) {
  .jx-entry { grid-template-columns: 40px 30px 1fr; }
  .jx-time { font-size: 11px; padding-top: 18px; }
  .jx-tools { opacity: 1; transform: none; }
  .jx-who { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .jx-card { animation: none !important; transition: none !important; }
  .jx-card:hover { transform: none !important; }
}