/* ===== Radar Colis — thème ===== */
:root {
  --pico-font-size: 15px;
  --rc-navy: #0b1e3a; --rc-navy-2: #12305a; --rc-amber: #f59e0b; --rc-amber-2: #fbbf24; --rc-sky: #7dd3fc;
  --rc-bg: #f4f6fa; --rc-card: #ffffff; --rc-border: #e3e8ef; --rc-text: #1f2937; --rc-muted: #6b7280;
  --pico-background-color: var(--rc-bg); --pico-card-background-color: var(--rc-card); --pico-muted-border-color: var(--rc-border);
  --pico-primary: #1d4ed8; --pico-primary-hover: #1e40af; --pico-primary-background: #1d4ed8; --pico-primary-hover-background: #1e40af;
}
body { background: var(--rc-bg); color: var(--rc-text); }
/* ---- barre du haut ---- */
header.topbar { background: linear-gradient(90deg, var(--rc-navy) 0%, var(--rc-navy-2) 100%); color: #e5e7eb; padding: 0 1.1rem; display: flex; align-items: center; gap: .25rem; height: 54px; position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.topbar .brand { display: flex; align-items: center; gap: .55rem; margin-right: 1rem; text-decoration: none; color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: -.2px; }
.topbar .brand img { height: 30px; width: 30px; border-radius: 7px; }
.topbar .brand span b { color: var(--rc-amber-2); font-weight: 700; }
.topbar nav { display: flex; align-items: center; gap: .1rem; flex: 1; }
.topbar nav > a, .topbar nav summary { color: #d1d5db; text-decoration: none; padding: .42rem .65rem; border-radius: .45rem; font-size: .9rem; line-height: 1.2; white-space: nowrap; list-style: none; cursor: pointer; margin: 0; }
.topbar nav > a:hover, .topbar nav summary:hover { background: rgba(255,255,255,.09); color: #fff; }
.topbar nav > a.active { background: rgba(251,191,36,.16); color: #fde68a; }
.topbar nav details { position: relative; margin: 0; padding: 0; border: 0; }
.topbar nav details summary::after { content: " ▾"; font-size: .75em; opacity: .7; }
.topbar nav details summary::-webkit-details-marker { display: none; }
.topbar nav details[open] summary { background: rgba(255,255,255,.12); color: #fff; }
.topbar nav details .menu { position: absolute; top: 100%; left: 0; min-width: 230px; background: #fff; color: var(--rc-text); border: 1px solid var(--rc-border); border-radius: .6rem; box-shadow: 0 12px 30px rgba(0,0,0,.18); padding: .35rem; margin-top: .3rem; display: flex; flex-direction: column; }
.topbar nav details .menu a { color: var(--rc-text); text-decoration: none; padding: .45rem .7rem; border-radius: .4rem; font-size: .9rem; display: flex; justify-content: space-between; gap: .8rem; }
.topbar nav details .menu a:hover { background: #eef2ff; color: #1e3a8a; }
.topbar nav details .menu a .n { color: var(--rc-muted); font-size: .8rem; }
.topbar nav details .menu .sep { height: 1px; background: var(--rc-border); margin: .3rem .2rem; }
.topbar .right { color: #cbd5e1; font-size: .82rem; display: flex; align-items: center; gap: .6rem; white-space: nowrap; }
.topbar .right a { color: #e5e7eb; text-decoration: none; opacity: .85; } .topbar .right a:hover { opacity: 1; text-decoration: underline; }
.topbar .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--rc-amber); color: var(--rc-navy); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }
.topbar .scanbtn { background: var(--rc-amber); color: var(--rc-navy); border: 0; padding: .35rem .7rem; border-radius: .45rem; font-weight: 600; font-size: .82rem; margin: 0; width: auto; }
.topbar .scanbtn:disabled { opacity: .5; }
/* ---- page ---- */
main.container-fluid { padding: 1.1rem 1.4rem 2rem; max-width: 1560px; margin: 0 auto; }
h1 { font-size: 1.45rem; margin-bottom: .5rem; letter-spacing: -.2px; } h2 { font-size: 1.1rem; margin: 1.3rem 0 .5rem; letter-spacing: -.1px; } h3 { font-size: .98rem; }
h1 .small, h2 .small { font-weight: 500; }
article { border: 1px solid var(--rc-border); border-radius: .75rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); padding: 1rem 1.1rem; margin-bottom: 1rem; }
/* ---- tableaux ---- */
table { font-size: .86rem; border-collapse: separate; border-spacing: 0; background: var(--rc-card); border: 1px solid var(--rc-border); border-radius: .6rem; }
table thead th { background: #f8fafc; color: #475569; font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid var(--rc-border); }
table thead th:first-child { border-top-left-radius: .6rem; } table thead th:last-child { border-top-right-radius: .6rem; }
table td, table th { padding: .45rem .6rem; vertical-align: top; border-bottom: 1px solid #eef2f7; }
table tbody tr:hover { background: #f8fafc; }
table tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* ---- badges ---- */
.badge { display: inline-block; padding: .08rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap; line-height: 1.5; }
.badge.danger { background: #fee2e2; color: #991b1b; } .badge.warn { background: #ffedd5; color: #9a3412; }
.badge.info { background: #dbeafe; color: #1e40af; } .badge.ok { background: #dcfce7; color: #166534; } .badge.muted { background: #eceff3; color: #374151; }
.badge.new { background: #fef9c3; color: #854d0e; }
.flag { font-size: .68rem; border: 1px solid #d1d5db; border-radius: .3rem; padding: 0 .3rem; margin-left: .2rem; color: #4b5563; background: #fff; }
/* ---- tuiles ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; margin: .8rem 0 1rem; }
.tile { background: var(--rc-card); border: 1px solid var(--rc-border); border-left: 4px solid #cbd5e1; border-radius: .7rem; padding: .75rem .95rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.tile .k { font-size: 1.75rem; font-weight: 700; line-height: 1.1; letter-spacing: -.5px; color: var(--rc-navy); } .tile .l { font-size: .8rem; color: var(--rc-muted); margin-top: .15rem; } .tile .s { font-size: .78rem; color: #475569; margin-top: .2rem; }
.tile .l a { color: #1e3a8a; text-decoration: none; } .tile .l a:hover { text-decoration: underline; }
.tile.red { border-left-color: #dc2626; } .tile.red .k { color: #b91c1c; }
.tile.green { border-left-color: #16a34a; } .tile.green .k { color: #15803d; }
.tile.amber { border-left-color: var(--rc-amber); } .tile.amber .k { color: #b45309; }
/* ---- bandeaux ---- */
.banner { padding: .55rem .9rem; border-radius: .55rem; margin-bottom: .8rem; font-size: .9rem; border: 1px solid transparent; }
.banner.err { background: #fef2f2; color: #7f1d1d; border-color: #fecaca; } .banner.ok { background: #f0fdf4; color: #14532d; border-color: #bbf7d0; } .banner.warn { background: #fffbeb; color: #78350f; border-color: #fde68a; }
.muted { color: var(--rc-muted); } .small { font-size: .8rem; }
/* ---- contrôles ---- */
td.actions { min-width: 185px; }
.actions form { display: inline; } .actions button, .actions a[role=button] { padding: .18rem .5rem; font-size: .74rem; margin: 0 .12rem .12rem 0; border-radius: .4rem; display: inline-block; }
button.sm, a.sm[role=button], input.sm { padding: .25rem .6rem; font-size: .8rem; width: auto; margin: 0; border-radius: .4rem; }
button, [role=button], input[type=submit] { font-weight: 600; }
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: .6rem; }
.tabs a { display: inline-block; padding: .35rem .85rem; border: 1px solid var(--rc-border); border-radius: 999px; text-decoration: none; font-size: .86rem; color: #334155; background: #fff; }
.tabs a.active { background: var(--rc-navy); color: #fff; border-color: var(--rc-navy); font-weight: 600; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: .7rem; background: var(--rc-card); border: 1px solid var(--rc-border); border-radius: .6rem; padding: .55rem .7rem; }
.filters label { margin: 0; font-size: .76rem; color: #475569; } .filters select, .filters input { margin: 0; padding: .25rem .5rem; height: auto; font-size: .85rem; width: auto; border-radius: .4rem; }
.timeline { list-style: none; padding-left: 0; font-size: .84rem; } .timeline li { padding: .2rem 0 .2rem .6rem; border-left: 3px solid #e5e7eb; margin-bottom: .15rem; }
.timeline li.real { border-left-color: #2563eb; } .timeline li.courtesy { color: #9ca3af; }
.msgbox { white-space: pre-wrap; font-family: inherit; background: #f8fafc; border: 1px solid var(--rc-border); padding: .7rem; border-radius: .5rem; font-size: .88rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
.delta.up { color: #b91c1c; } .delta.down { color: #15803d; }
details summary { cursor: pointer; }
.store-card { border: 1px solid var(--rc-border); border-radius: .6rem; padding: .6rem .8rem; background: var(--rc-card); }
.progress-wrap { background: #e5e7eb; border-radius: .3rem; height: .5rem; } .progress-wrap div { background: #2563eb; height: 100%; border-radius: .3rem; }
.login-wrap { min-height: calc(100vh - 2rem); display: flex; align-items: center; justify-content: center; }
.login-box { width: 400px; max-width: 95vw; padding: 1.6rem 1.7rem; }
.login-box .logo { display: block; margin: 0 auto 1rem; width: 230px; }
.copybtn { float: right; }
dialog article { border-radius: .8rem; }
@media (max-width: 1100px) { .topbar nav > a span.lbl { display: none; } }
@media print { .topbar, .filters, .actions, .tabs, button, .noprint { display: none !important; } main { padding: 0; } }

/* ---- guide & aide ---- */
.guide { max-width: 980px; } .guide .lead { font-size: 1.05rem; line-height: 1.55; background: #fff; border: 1px solid var(--rc-border); border-left: 4px solid var(--rc-amber); border-radius: .6rem; padding: .9rem 1rem; }
.guide .toc { font-size: .9rem; margin: .4rem 0 1rem; color: var(--rc-muted); } .guide .toc a { text-decoration: none; }
.guide ol.steps { padding-left: 1.3rem; } .guide ol.steps li { margin: .45rem 0; line-height: 1.5; }
.guide ul.rules li { margin: .35rem 0; } .guide details { background: #fff; border: 1px solid var(--rc-border); border-radius: .5rem; padding: .5rem .8rem; margin: .4rem 0; } .guide details p { margin: .4rem 0 0; }
.guide table td, .guide table th { vertical-align: top; }
details.help { background: #fffbeb; border: 1px solid #fde68a; border-radius: .55rem; padding: .45rem .8rem; margin: 0 0 .8rem; font-size: .9rem; }
details.help summary { font-weight: 600; color: #78350f; } details.help p { margin: .4rem 0 0; color: #451a03; }
.first-visit { background: #eef2ff; border: 1px solid #c7d2fe; color: #1e3a8a; border-radius: .55rem; padding: .55rem .9rem; margin-bottom: .8rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.first-visit a { font-weight: 600; } .first-visit button { width: auto; margin: 0; padding: .2rem .6rem; font-size: .8rem; }
/* ---- accueil simple ---- */
.todo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .9rem; margin: .6rem 0 1.2rem; }
.todo a.card { display: block; background: #fff; border: 1px solid var(--rc-border); border-radius: .8rem; padding: 1rem 1.1rem; text-decoration: none; color: var(--rc-text); box-shadow: 0 1px 2px rgba(16,24,40,.05); transition: transform .08s, box-shadow .08s; }
.todo a.card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16,24,40,.08); }
.todo .big { font-size: 2.1rem; font-weight: 700; letter-spacing: -.5px; line-height: 1.05; color: var(--rc-navy); }
.todo .what { font-size: 1rem; font-weight: 600; margin-top: .25rem; } .todo .sub { font-size: .82rem; color: var(--rc-muted); margin-top: .25rem; }
.todo a.card.red .big { color: #b91c1c; } .todo a.card.amber .big { color: #b45309; } .todo a.card.green .big { color: #15803d; } .todo a.card.zero { opacity: .55; }
.todo .go { display: inline-block; margin-top: .55rem; font-size: .82rem; color: #1e3a8a; font-weight: 600; }
.since { display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: .95rem; background: #fff; border: 1px solid var(--rc-border); border-radius: .6rem; padding: .6rem 1rem; margin-bottom: 1rem; }
.since b { font-size: 1.2rem; }

details.groupmsg { background: #fff; border: 1px solid var(--rc-border); border-radius: .6rem; padding: .5rem .8rem; margin: -.3rem 0 1.2rem; }
details.groupmsg summary { font-weight: 600; color: #1e3a8a; } details.groupmsg textarea { font-size: .84rem; margin: .5rem 0 .4rem; background: #f8fafc; }

.htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }