:root {
  --navy: #1f3864; --navy-2: #2f5496; --navy-3: #e8eef8; --bg: #f4f6fa; --card: #fff; --text: #1c2433; --muted: #64708a;
  --line: #dde3ee; --green: #1d7a46; --green-bg: #e3f4ea; --amber: #9a6200; --amber-bg: #fff3d6; --red: #b42318; --red-bg: #fdecea;
  --blue: #1f5fbf; --blue-bg: #e6effc; --grey-bg: #eef0f4; --radius: 8px; --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; font-size: 14px; color: var(--text); background: var(--bg); line-height: 1.45; }
a { color: var(--navy-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 0; color: var(--navy); }
h2 { font-size: 16px; margin: 0 0 12px; color: var(--navy); }
h3 { font-size: 14px; margin: 0 0 8px; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Mise en page */
.layout { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.sidebar { background: var(--navy); color: #fff; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { padding: 16px 16px 14px; border-bottom: 1px solid rgba(255,255,255,.12); display: flex; gap: 10px; align-items: center; }
.logo-img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: #fff; padding: 3px; flex: none; }
.logo-img.sm { width: 30px; height: 30px; padding: 2px; border-radius: 6px; }
.login-brand { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.login-brand .logo-img { width: 64px; height: 64px; box-shadow: 0 0 0 1px var(--line); }
.login-brand .org { margin: 4px 0 0; }
.logo-preview { width: 120px; height: 120px; border: 1px dashed #c8d0de; border-radius: 10px; display: grid; place-items: center; background: #fff; }
.logo-preview img { max-width: 104px; max-height: 104px; object-fit: contain; }
.brand b { display: block; font-size: 16px; letter-spacing: .3px; }
.brand span { font-size: 11.5px; opacity: .75; }
.nav { padding: 10px 8px; flex: 1; }
.nav .sec { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; opacity: .55; padding: 14px 12px 6px; }
.nav a { display: flex; align-items: center; gap: 10px; color: #dfe6f3; padding: 8px 12px; border-radius: 6px; margin: 1px 0; }
.nav a:hover { background: rgba(255,255,255,.08); text-decoration: none; color: #fff; }
.nav a.active { background: rgba(255,255,255,.16); color: #fff; font-weight: 600; }
.nav a .count { margin-left: auto; background: #f0b429; color: #1c2433; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 0 7px; }
.nav svg { width: 17px; height: 17px; flex: none; opacity: .9; }
.userbox { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12.5px; }
.userbox b { display: block; font-size: 13px; }
.userbox span { opacity: .75; display: block; }
.userbox .links { margin-top: 8px; display: flex; gap: 12px; }
.userbox a { color: #c9d6ee; }
.main { min-width: 0; }
.topbar { display: none; }
.content { padding: 24px 28px 48px; max-width: 1500px; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.pagehead .sub { color: var(--muted); margin-top: 3px; }
.crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }

/* Cartes et grilles */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px; }
.card.flush { padding: 0; }
.card.flush > h2 { padding: 16px 18px 0; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.kpi .lbl { color: var(--muted); font-size: 12.5px; }
.kpi .val { font-size: 28px; font-weight: 700; color: var(--navy); margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .hint { font-size: 12px; color: var(--muted); }
.kpi.alert .val { color: var(--red); }
.kpi.warn .val { color: var(--amber); }
.kpi a { color: inherit; }

/* Tableaux */
.tablewrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; }
table.t th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #fafbfd; white-space: nowrap; position: sticky; top: 0; }
table.t td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t tr:last-child td { border-bottom: 0; }
table.t tr.click { cursor: pointer; }
table.t tr.click:hover td { background: #f7f9fd; }
table.t td.num, table.t th.num { text-align: right; font-variant-numeric: tabular-nums; }
.small { font-size: 12.5px; }
.muted { color: var(--muted); }
.mono { font-family: Consolas, "Courier New", monospace; font-size: 12.5px; }
.empty { padding: 28px; text-align: center; color: var(--muted); }
.nowrap { white-space: nowrap; }

/* Badges */
.b { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--grey-bg); color: #46506a; }
.b.green { background: var(--green-bg); color: var(--green); }
.b.amber { background: var(--amber-bg); color: var(--amber); }
.b.red { background: var(--red-bg); color: var(--red); }
.b.blue { background: var(--blue-bg); color: var(--blue); }
.b.navy { background: var(--navy-3); color: var(--navy); }

/* Formulaires */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar .grow { flex: 1; min-width: 200px; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=email], input[type=search], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid #c8d0de; border-radius: 6px; background: #fff; min-height: 36px;
}
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid #9db8e8; outline-offset: 0; border-color: var(--navy-2); }
.toolbar select, .toolbar input, .pagehead .actions select, .pagehead .actions input { width: auto; }
.toolbar .grow input { width: 100%; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.form.g3f { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form .full { grid-column: 1 / -1; }
.field label { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: 5px; color: #2c3650; }
.field .req { color: var(--red); }
.field .help { font-size: 12px; color: var(--muted); margin-top: 4px; }
.fieldset-title { grid-column: 1 / -1; font-weight: 700; color: var(--navy); border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-top: 6px; }
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #c8d0de; background: #fff; color: var(--text); padding: 8px 14px; border-radius: 6px; cursor: pointer; font-weight: 600; white-space: nowrap; min-height: 36px; }
.btn:hover { background: #f3f5f9; text-decoration: none; }
.btn.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn.primary:hover { background: #172a4d; }
.btn.green { background: var(--green); color: #fff; border-color: var(--green); }
.btn.danger { color: var(--red); border-color: #f1b8b2; }
.btn.danger:hover { background: var(--red-bg); }
.btn.sm { padding: 4px 10px; min-height: 28px; font-size: 12.5px; }
.btn:disabled { opacity: .55; cursor: default; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.check { display: flex; gap: 8px; align-items: center; }
.check input { width: auto; min-height: 0; }

/* Détails */
.dl { display: grid; grid-template-columns: 190px 1fr; gap: 7px 14px; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; font-weight: 500; word-break: break-word; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs a { padding: 9px 14px; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 600; white-space: nowrap; }
.tabs a.on { color: var(--navy); border-bottom-color: var(--navy); }
.tabs a:hover { text-decoration: none; color: var(--navy); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 16px 22px; border-left: 2px solid var(--line); margin-left: 6px; }
.timeline li:last-child { border-left-color: transparent; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--navy-2); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--navy-2); }
.timeline .who { font-size: 12.5px; color: var(--muted); }
.timeline .com { background: #f6f8fc; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin-top: 6px; white-space: pre-wrap; }
.steps { display: flex; gap: 0; margin: 4px 0 18px; flex-wrap: wrap; }
.steps div { flex: 1; min-width: 110px; text-align: center; font-size: 12px; color: var(--muted); padding-top: 22px; position: relative; }
.steps div::before { content: ""; position: absolute; top: 6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #cfd6e4; z-index: 1; }
.steps div::after { content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: #cfd6e4; }
.steps div:first-child::after { display: none; }
.steps div.done { color: var(--navy); font-weight: 600; }
.steps div.done::before, .steps div.done::after { background: var(--navy-2); }
.steps div.cur::before { box-shadow: 0 0 0 4px #c9d8f3; }
.bar { height: 8px; background: var(--grey-bg); border-radius: 4px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--green); }
.notice { padding: 10px 14px; border-radius: 6px; background: var(--blue-bg); color: #163f7e; margin-bottom: 14px; }
.notice.warn { background: var(--amber-bg); color: #6d4600; }
.notice.err { background: var(--red-bg); color: var(--red); }

/* Fenêtre modale et messages */
.modal-bg { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px; z-index: 50; overflow-y: auto; }
.modal { background: #fff; border-radius: 10px; width: 100%; max-width: 640px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.modal.wide { max-width: 980px; }
.modal header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal header h2 { margin: 0; }
.modal .body { padding: 18px; }
.modal footer { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.x { border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--muted); line-height: 1; }
#toast { position: fixed; bottom: 20px; right: 20px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
#toast div { background: #1c2433; color: #fff; padding: 10px 16px; border-radius: 6px; box-shadow: var(--shadow); max-width: 380px; }
#toast div.err { background: var(--red); }

/* Connexion */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: linear-gradient(160deg, #1f3864 0%, #2f5496 100%); }
.login .box { background: #fff; width: 100%; max-width: 400px; border-radius: 12px; padding: 30px 28px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.login h1 { font-size: 20px; }
.login .org { color: var(--muted); font-size: 12.5px; margin: 4px 0 22px; }
.login .field { margin-bottom: 14px; }
.login .btn { width: 100%; justify-content: center; }

/* Pièces jointes */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.gallery figure { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fafbfd; }
.gallery img { width: 100%; height: 120px; object-fit: cover; display: block; }
.gallery figcaption { padding: 6px 8px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gallery figcaption span { display: block; color: var(--muted); font-size: 11px; }

/* Étiquettes QR */
.labels { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.labels.g { grid-template-columns: repeat(2, 1fr); }
.labels.p { grid-template-columns: repeat(4, 1fr); }
.label { display: flex; gap: 10px; align-items: center; border: 1.5px solid #1f3864; border-radius: 8px; padding: 10px; background: #fff; break-inside: avoid; page-break-inside: avoid; }
.label .qr { width: 96px; height: 96px; flex: none; }
.labels.g .label .qr { width: 130px; height: 130px; }
.labels.p .label { flex-direction: column; text-align: center; padding: 8px 6px; }
.labels.p .label .qr { width: 84px; height: 84px; }
.label .ltxt { min-width: 0; }
.label .lhead { display: flex; gap: 5px; align-items: center; font-size: 10px; font-weight: 700; color: #1f3864; margin-bottom: 4px; }
.labels.p .label .lhead { justify-content: center; }
.label .lhead img { width: 16px; height: 16px; object-fit: contain; }
.label .lcode { font-family: Consolas, monospace; font-weight: 700; font-size: 15px; }
.label .ldes { font-size: 12px; line-height: 1.25; }
.label .lsite { font-size: 11px; color: #46506a; }
.label .lhint { font-size: 9px; color: #64708a; margin-top: 3px; }

/* Rapport mensuel */
.report { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.report-head { display: flex; gap: 16px; align-items: center; border-bottom: 2px solid var(--navy); padding-bottom: 14px; }
.report-head img { width: 64px; height: 64px; object-fit: contain; }
.report .kpi .val { font-size: 24px; }

/* Impression (fiche d'intervention) */
.print-only { display: none; }
@media print {
  .sidebar, .topbar, .no-print, #toast { display: none !important; }
  .layout { display: block; }
  .content { padding: 0; }
  .card { box-shadow: none; border: 1px solid #999; }
  body { background: #fff; }
  .print-only { display: block; }
  .report { border: 0; padding: 0; }
  .report .grid.g4 { grid-template-columns: repeat(4, 1fr); }
  .report .grid.g2 { grid-template-columns: repeat(2, 1fr); }
  .report .card { break-inside: avoid; }
  .labels { gap: 4mm; }
  .label { border-color: #000; }
  @page { margin: 12mm; }
}

/* Mobile */
@media (max-width: 1100px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; width: 260px; z-index: 40; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  .topbar { display: flex; align-items: center; gap: 12px; background: var(--navy); color: #fff; padding: 10px 16px; position: sticky; top: 0; z-index: 30; }
  .topbar button { background: none; border: 0; color: #fff; font-size: 22px; cursor: pointer; }
  .content { padding: 16px; }
  .g2, .g3, .form, .form.g3f { grid-template-columns: 1fr; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 12px; } .kpi .val { font-size: 24px; }
  .dl { grid-template-columns: 1fr; gap: 2px; }
  .dl dd { margin-bottom: 8px; }
}
.btn svg { width: 16px; height: 16px; flex: none; }

/* ---- Version 6 ---- */
.appbar { display: flex; gap: 12px; align-items: center; padding: 10px 28px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.gsearch { position: relative; flex: 1; max-width: 640px; }
.gsearch input { background: #f4f6fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364708a' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 10px center / 16px; padding-left: 34px; border-color: transparent; }
.gsearch input:focus { background-color: #fff; }
.gres { position: absolute; top: 42px; left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 30px rgba(15,23,42,.18); max-height: 70vh; overflow: auto; z-index: 30; }
.gres .gh { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 10px 14px 4px; }
.gres a { display: block; padding: 7px 14px; color: var(--text); }
.gres a:hover { background: #f4f7fc; text-decoration: none; }
.gres a span { display: block; font-size: 12px; color: var(--muted); }
.bellwrap { position: relative; margin-left: auto; }
.bell { position: relative; border: 1px solid var(--line); background: #fff; border-radius: 8px; width: 40px; height: 38px; display: grid; place-items: center; cursor: pointer; color: var(--navy); }
.bell svg { width: 19px; height: 19px; }
.bell .count { position: absolute; top: -6px; right: -6px; background: var(--red); color: #fff; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 0 6px; line-height: 18px; }
.npanel { position: absolute; right: 0; top: 46px; width: 380px; max-width: 92vw; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 34px rgba(15,23,42,.2); max-height: 72vh; overflow: auto; z-index: 30; }
.nhead { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; }
.nhead a { font-size: 12.5px; }
.nitem { display: block; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--text); }
.nitem:hover { background: #f6f8fc; text-decoration: none; }
.nitem.nouv { background: #eef4ff; border-left: 3px solid var(--navy-2); }
.nitem b { display: block; font-size: 13px; }
.nitem span { display: block; font-size: 12.5px; color: #46506a; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nitem i { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 3px; }

/* graphiques */
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: #e6eaf2; stroke-width: 1; }
.chart .axis { stroke: #b9c2d3; stroke-width: 1; }
.chart .tick { font-size: 11px; fill: var(--muted); font-family: inherit; }
.chart .bar:hover path { opacity: .82; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: #46506a; margin-bottom: 6px; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.dtable { margin-top: 6px; font-size: 12.5px; }
.dtable summary { cursor: pointer; color: var(--navy-2); }
.dtable .t td, .dtable .t th { padding: 5px 8px; }
.hbars { display: grid; gap: 8px; }
.hrow { display: grid; grid-template-columns: minmax(110px, 34%) 1fr 70px; gap: 10px; align-items: center; font-size: 13px; }
.hl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb { height: 12px; background: var(--grey-bg); border-radius: 4px; overflow: hidden; }
.hb i { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.hv { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* calendrier */
.cal { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.chead, .cgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.chead div { padding: 8px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; background: #fafbfd; border-bottom: 1px solid var(--line); }
.cday { min-height: 112px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.cday:nth-child(7n) { border-right: 0; }
.cday.off { background: #fafbfd; }
.cday.today { background: #f2f6ff; }
.cday.today .cnum { background: var(--navy); color: #fff; border-radius: 10px; padding: 0 7px; }
.cnum { font-size: 12px; font-weight: 700; color: #46506a; align-self: flex-start; }
.ev { display: block; font-size: 11.5px; line-height: 1.3; padding: 2px 6px; border-radius: 4px; color: #1c2433; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid; }
.ev:hover { text-decoration: none; filter: brightness(.96); }
.ev-plan, .legend .ev-plan { background: var(--blue-bg); border-color: var(--blue); }
.ev-prev, .legend .ev-prev { background: #eef0f4; border-color: #7a869e; }
.ev-ret, .legend .ev-ret { background: var(--red-bg); border-color: var(--red); }
.ev-done, .legend .ev-done { background: var(--green-bg); border-color: var(--green); }
.evmore { font-size: 11px; }

/* planning annuel */
.ptable th.pc, .ptable td.pc { text-align: center; padding: 6px 2px; width: 44px; font-size: 12px; font-variant-numeric: tabular-nums; }
.ptable th.pc.cur { color: var(--navy); background: #e8eef8; }
.ptable tr.peq td { background: #f2f5fa; padding-top: 9px; padding-bottom: 7px; }
.ptable td { padding: 6px 10px; }
.pc.ok, .legend .pc-ok { background: var(--green-bg); color: var(--green); font-weight: 700; }
.pc.ko, .legend .pc-ko { background: var(--red-bg); color: var(--red); font-weight: 700; }
.pc.now, .legend .pc-now { background: var(--amber-bg); color: var(--amber); font-weight: 700; }
.pc.fut, .legend .pc-fut { background: #eef0f4; color: #46506a; }
.legend .pc-ok, .legend .pc-ko, .legend .pc-now, .legend .pc-fut { border: 1px solid rgba(0,0,0,.08); }

/* fiche de vie */
.kv { width: 100%; border-collapse: collapse; font-size: 13px; }
.kv th { text-align: left; color: var(--muted); font-weight: 500; padding: 5px 10px 5px 0; width: 42%; vertical-align: top; }
.kv td { padding: 5px 0; font-weight: 500; }
.report h2 { font-size: 15px; margin-bottom: 8px; }

@media print {
  .appbar { display: none !important; }
  .planning .ptable td, .planning .ptable th { padding: 3px 4px; font-size: 10px; }
  .planning .ptable th.pc, .planning .ptable td.pc { width: 30px; }
  @page { size: auto; margin: 10mm; }
}
@media (max-width: 820px) {
  .appbar { padding: 8px 12px; top: 48px; }
  .cday { min-height: 74px; padding: 3px; }
  .ev { font-size: 10px; padding: 1px 3px; }
  .hrow { grid-template-columns: 1fr 1fr 56px; }
}
.legend i.ev-plan { background: var(--blue); } .legend i.ev-prev { background: #7a869e; } .legend i.ev-ret { background: var(--red); } .legend i.ev-done { background: var(--green); }
.legend i.pc-ok { background: var(--green); } .legend i.pc-ko { background: var(--red); } .legend i.pc-now { background: #d39b00; } .legend i.pc-fut { background: #c8cfdc; }
.btn.red { background: var(--red); color: #fff; border-color: var(--red); }
.btn.red:hover { background: #8f1c12; }