/* Timeline "Ta journée" and options comparison. */

/* ---------- Timeline ---------- */
.tl{margin-top:20px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);min-width:0}
.tl-title{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:700 1.3rem/1.1 var(--cond)}
.tl-facts{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.92rem;color:var(--muted)}
.tl-facts li{display:inline-flex;align-items:center;gap:6px}
.tl-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:6px;margin:0 -4px}
.tl-canvas{min-width:640px;padding:0 4px}
.tl-bar{position:relative}
.tl-days{position:relative;height:26px}
.tl-day{position:absolute;top:0;bottom:0;overflow:hidden;white-space:nowrap;font-size:.8rem;color:var(--muted);border-left:2px solid var(--line);padding-left:6px;line-height:22px}
.tl-day:first-child{border-left-color:transparent}
.tl-day b{font-weight:600;color:var(--ink-2)}
.tl-day.is-match b{color:var(--red)}
.tl-stage{position:relative;height:48px}
.tl-track{position:absolute;inset:0}
.tl-seg{position:absolute;top:0;bottom:0;padding:0 1px;transform-origin:left center;animation:tl-grow .55s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
.tl-seg-in{display:flex;align-items:center;gap:5px;height:100%;padding:0 7px;border-radius:var(--r-s);background:var(--c);color:#fff;font-size:.8rem;font-weight:600;overflow:hidden;white-space:nowrap}
.tl-seg-txt{overflow:hidden;text-overflow:ellipsis;min-width:0}
.tl-attente .tl-seg-in{background:repeating-linear-gradient(135deg,#eef1f7 0 6px,#e0e6f0 6px 12px);color:var(--muted);font-weight:500;border:1px dashed #b7c1d4}
.tl-retenue .tl-seg-in{background:repeating-linear-gradient(135deg,#ffe29a 0 7px,#ffc63a 7px 14px);color:#5a3a00;border:1px solid #d79e00}
.tl-hotel .tl-seg-in{background:#6b4fa0;justify-content:center}
.tl-match .tl-seg-in{background:linear-gradient(90deg,var(--red) 0 6px,var(--ink) 6px);border:2px solid var(--ink);padding-left:12px}
.tl-match .tl-seg-in::after{content:"";width:12px;height:12px;border-radius:50%;margin-left:auto;flex-shrink:0;background:radial-gradient(circle at 50% 50%,var(--ink) 0 2.5px,transparent 3px),#fff}
.tl-seg.is-packed .tl-seg-in{background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 3px,transparent 3px 9px)}
.tl-seg.is-packed.tl-hotel .tl-seg-in::before,.tl-seg.is-packed .tl-seg-in::after{content:none}
.tl-marks{position:absolute;inset:-4px 0;pointer-events:none}
.tl-midnight{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed var(--ink-2);opacity:.7}
.tl-kick-line{position:absolute;top:-8px;bottom:-4px;width:2px;margin-left:-1px;background:var(--red);box-shadow:0 0 0 1px #fff}
.tl-axis{position:relative;height:22px;margin-top:6px}
.tl-tick{position:absolute;top:0;transform:translateX(-50%);font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tl-tick::before{content:"";position:absolute;left:50%;top:-6px;height:4px;border-left:1px solid var(--line)}
.tl-kick{position:relative;height:26px}
.tl-kick-flag{position:absolute;top:0;transform:translateX(-50%);display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:var(--red);color:#fff;font-size:.8rem;font-weight:600;white-space:nowrap}
.tl-kick-flag.is-right{transform:translateX(-85%)}
@keyframes tl-grow{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:none}}

.tl-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:2px;border-top:1px solid var(--line);padding-top:10px}
.tl-item{display:grid;grid-template-columns:28px minmax(9.5em,auto) 1fr auto;align-items:center;gap:4px 12px;padding:6px 0;font-size:.95rem}
.tl-dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c);color:#fff}
.tl-dot .ico{width:15px;height:15px}
.tl-when{font-variant-numeric:tabular-nums;font-weight:600}
.tl-what{min-width:0}
.tl-len{color:var(--muted);font-size:.88rem;white-space:nowrap}
.tl-sens{grid-column:2/-1;font-size:.8rem;color:var(--muted);margin-top:-4px}
@media (max-width:560px){
  .tl{padding:14px 12px}
  .tl-item{grid-template-columns:28px 1fr auto}
  .tl-what{grid-column:2;grid-row:2}
  .tl-when{grid-column:2;grid-row:1}
  .tl-len{grid-column:3;grid-row:1}
  .tl-sens{grid-column:2/-1}
}

/* ---------- Comparison ---------- */
.cmp{min-width:0;margin-top:16px}
.cmp-scroll{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow)}
.cmp-table{border-collapse:separate;border-spacing:0;width:100%;min-width:calc(150px + var(--n,3) * 170px)}
.cmp-caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.cmp-table th,.cmp-table td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp-table tbody tr:last-child>*{border-bottom:0}
.cmp-col{background:var(--ink);color:#fff;font-weight:400;vertical-align:bottom}
.cmp-corner{background:var(--ink);position:sticky;left:0;z-index:2}
.cmp-col-n{display:block;font-size:.8rem;color:#b9c3dc}
.cmp-col-t{display:block;font:700 1.15rem/1.15 var(--cond)}
.cmp-row{position:sticky;left:0;z-index:1;background:var(--card);font-weight:600;font-size:.92rem;width:150px;box-shadow:1px 0 0 var(--line)}
.cmp-row>.ico{margin-right:6px;color:var(--muted)}
.cmp-row small{display:block;font-weight:400;color:var(--muted)}
.cmp-val{font-weight:600;font-variant-numeric:tabular-nums}
.cmp-val small{font-weight:400;color:var(--muted);font-size:.85rem}
.cmp-warn{color:var(--warn)!important;font-weight:600!important}
.cmp-cell.is-best{background:#e8f6ee}
.cmp-badge{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:.78rem;font-weight:700;color:var(--ok)}
.cmp-badge .ico{width:14px;height:14px;padding:2px;border-radius:50%;background:var(--ok);color:#fff}
.cmp-modes{display:inline-flex;flex-wrap:wrap;gap:4px}
.cmp-mode{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c);color:#fff}
.cmp-mode .ico{width:15px;height:15px}
@media (max-width:560px){
  .cmp-table{min-width:calc(112px + var(--n,3) * 150px)}
  .cmp-table th,.cmp-table td{padding:10px}
  .cmp-row{width:112px;font-size:.85rem}
  .cmp-row>.ico{display:none}
}

@media (prefers-reduced-motion:reduce){
  .tl-seg{animation:none}
}