/* DSTec Bureau — bleu roi de la marque, neutres teintés de bleu, clair et sombre. */
:root {
  --bleu: #3b43c4; --bleu-fonce: #2c33a0; --bleu-pale: #eceefb; --rouge: #d62d33;
  --encre: #1c2040; --discret: #5b6285; --trait: #e1e3f0; --fond: #f5f6fb; --carte: #ffffff;
  --ok: #1f7a4d; --ok-fond: #e5f4ec; --alerte: #a5560a; --alerte-fond: #fcf0df; --err-fond: #fdecec;
  --ombre: 0 1px 2px rgba(28,32,64,.06);
  --col-side: 14.5rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bleu: #8a92f2; --bleu-fonce: #aab0f6; --bleu-pale: #262a52; --rouge: #ff7a7f;
    --encre: #e7e9f8; --discret: #9ba1c6; --trait: #2c3058; --fond: #12142b; --carte: #1a1d3b;
    --ok: #6fd3a0; --ok-fond: #17332a; --alerte: #f0b667; --alerte-fond: #3a2c14; --err-fond: #3b1b20;
    --ombre: none; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bleu: #8a92f2; --bleu-fonce: #aab0f6; --bleu-pale: #262a52; --rouge: #ff7a7f;
  --encre: #e7e9f8; --discret: #9ba1c6; --trait: #2c3058; --fond: #12142b; --carte: #1a1d3b;
  --ok: #6fd3a0; --ok-fond: #17332a; --alerte: #f0b667; --alerte-fond: #3a2c14; --err-fond: #3b1b20;
  --ombre: none; color-scheme: dark;
}

* { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; background: var(--fond); color: var(--encre); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.5; -webkit-text-size-adjust: 100%; }
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; border-radius: 4px; }
h1 { font-size: 1.55rem; line-height: 1.2; margin: 0; font-weight: 650; letter-spacing: -.01em; text-wrap: balance; }
h2 { font-size: 1rem; margin: 0; font-weight: 650; }
.muted { color: var(--discret); }
.small { font-size: .85rem; }
.alert { color: var(--rouge); font-weight: 600; }

/* ---- structure : barre latérale (grand écran) ou barre du haut (téléphone) ---- */
.topbar { display: none; }
.side { position: fixed; inset: 0 auto 0 0; width: var(--col-side); background: var(--carte); border-right: 1px solid var(--trait); padding: 1.1rem .8rem; display: flex; flex-direction: column; gap: .15rem; overflow-y: auto; }
.side .brand { display: flex; align-items: center; gap: .6rem; padding: .2rem .5rem 1.1rem; color: var(--encre); font-weight: 650; }
.side .brand:hover { text-decoration: none; }
.brand img { height: 2rem; width: auto; display: block; }
.nav-item { display: block; padding: .5rem .7rem; border-radius: .5rem; color: var(--encre); }
.nav-item:hover { background: var(--bleu-pale); text-decoration: none; }
.nav-item.on { background: var(--bleu-pale); color: var(--bleu); font-weight: 600; }
.side hr { border: 0; border-top: 1px solid var(--trait); margin: .55rem .4rem; width: calc(100% - .8rem); }
.side-foot { margin-top: auto; padding: .9rem .6rem 0; border-top: 1px solid var(--trait); display: flex; justify-content: space-between; align-items: center; font-size: .88rem; gap: .5rem; }
.side-foot .who { color: var(--discret); overflow: hidden; text-overflow: ellipsis; }
.main { margin-left: var(--col-side); padding: 1.6rem clamp(1rem, 3vw, 2.4rem) 3rem; max-width: 78rem; }
body:not(:has(.side)) .main { margin-left: 0; margin-inline: auto; }

@media (max-width: 900px) {
  .topbar { display: flex; align-items: center; gap: .8rem; position: sticky; top: 0; z-index: 20; background: var(--carte); border-bottom: 1px solid var(--trait); padding: .55rem 1rem; padding-top: calc(.55rem + env(safe-area-inset-top, 0px)); }
  .topbar .brand img { height: 1.8rem; }
  .burger { width: 2.5rem; height: 2.5rem; border: 1px solid var(--trait); background: var(--carte); border-radius: .5rem; display: inline-flex; flex-direction: column; justify-content: center; gap: .26rem; padding: 0 .65rem; cursor: pointer; }
  .burger span { display: block; height: 2px; background: var(--encre); border-radius: 2px; }
  .side { position: static; width: auto; display: none; border-right: 0; border-bottom: 1px solid var(--trait); padding: .6rem 1rem 1rem; }
  .side.open { display: flex; }
  .side .brand { display: none; }
  .main { margin-left: 0; padding: 1.2rem 1rem 3rem; }
}

/* ---- en-tête de page ---- */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; margin-bottom: 1.3rem; }
.head-tools { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; padding: .22rem .7rem; border-radius: 999px; background: var(--bleu-pale); color: var(--bleu); font-weight: 600; }
.pill::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.pill.ok { background: var(--ok-fond); color: var(--ok); }
.pill.warn { background: var(--alerte-fond); color: var(--alerte); }

/* ---- chiffres clés ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: .9rem; margin-bottom: 1.3rem; }
.kpi { display: flex; flex-direction: column; gap: .15rem; background: var(--carte); border: 1px solid var(--trait); border-radius: .8rem; padding: .95rem 1.1rem; box-shadow: var(--ombre); color: var(--encre); }
.kpi:hover { text-decoration: none; border-color: var(--bleu); }
.kpi-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--discret); }
.kpi-val { font-size: 2.1rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--bleu); }
.kpi-sub { font-size: .84rem; color: var(--discret); }
.kpi-sub.alert { color: var(--rouge); }

/* ---- cartes et listes ---- */
.cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: .9rem; align-items: start; }
.stack { display: grid; gap: .9rem; }
@media (max-width: 1100px) { .cols { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--carte); border: 1px solid var(--trait); border-radius: .8rem; padding: 1rem 1.1rem 1.1rem; box-shadow: var(--ombre); }
.card + .card { margin-top: 0; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; gap: .6rem; }
.card-head a { font-size: .86rem; }
.empty { color: var(--discret); margin: .4rem 0 0; }
.table-wrap { overflow-x: auto; margin: 0 -.2rem; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--discret); font-weight: 600; padding: .35rem .5rem; border-bottom: 1px solid var(--trait); white-space: nowrap; }
td { padding: .55rem .5rem; border-bottom: 1px solid var(--trait); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.act { text-align: right; white-space: nowrap; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; flex-direction: column; gap: .1rem; padding: .55rem 0; border-bottom: 1px solid var(--trait); }
.rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.rows .meta { font-size: .84rem; color: var(--discret); }
.badge { display: inline-block; font-size: .74rem; padding: .08rem .5rem; border-radius: 999px; background: var(--bleu-pale); color: var(--bleu); font-weight: 600; vertical-align: .05em; }
.badge.warn { background: var(--alerte-fond); color: var(--alerte); }

/* ---- boutons et formulaires ---- */
.btn { display: inline-block; font: inherit; font-size: .88rem; padding: .38rem .85rem; border-radius: .5rem; border: 1px solid var(--trait); background: var(--carte); color: var(--encre); cursor: pointer; text-align: center; }
.btn:hover { border-color: var(--bleu); color: var(--bleu); text-decoration: none; }
.btn.primary { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.btn.primary:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { color: #12142b; } :root:not([data-theme="light"]) .btn.primary:hover { color: #12142b; } }
.btn.danger { color: var(--rouge); }
input, select { font: inherit; color: var(--encre); background: var(--carte); border: 1px solid var(--trait); border-radius: .5rem; padding: .45rem .65rem; width: 100%; }
input:focus { border-color: var(--bleu); }
label { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; color: var(--discret); }
.search { width: 16rem; max-width: 100%; }
.notice { padding: .6rem .9rem; border-radius: .5rem; margin: 0 0 1rem; }
.notice.ok { background: var(--ok-fond); color: var(--ok); }
.notice.err { background: var(--err-fond); color: var(--rouge); }

/* ---- connexion ---- */
.login { max-width: 22rem; margin: min(14vh, 6rem) auto 0; background: var(--carte); border: 1px solid var(--trait); border-radius: 1rem; padding: 1.8rem 1.6rem 1.6rem; box-shadow: var(--ombre); }
.login-logo { height: 2.6rem; margin-bottom: .9rem; }
.login h1 { font-size: 1.3rem; margin-bottom: 1rem; }
.login form { display: grid; gap: .9rem; }

/* ---- liens ---- */
.grid-groupes { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: .9rem; margin-top: .9rem; }
.groupe h2 { margin-bottom: .5rem; }
.links { list-style: none; margin: 0; padding: 0; }
.links li { padding: .22rem 0; }
.links .badge { margin-left: .4rem; }
.links li[hidden], .groupe[hidden] { display: none; }
.edit-row { display: grid; grid-template-columns: 1fr 1fr 2fr .6fr; gap: .6rem; align-items: end; padding: .7rem 0; border-top: 1px solid var(--trait); }
.edit-row:first-of-type { border-top: 0; }
.edit-row .check { flex-direction: row; align-items: center; gap: .4rem; color: var(--encre); }
.edit-row .check input { width: auto; }
@media (max-width: 800px) { .edit-row { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: no-preference) { .kpi, .btn, .nav-item { transition: border-color .15s, background-color .15s, color .15s; } }

/* ---- tickets ---- */
.pill.wait { background: var(--bleu-pale); color: var(--discret); }
textarea { font: inherit; color: var(--encre); background: var(--carte); border: 1px solid var(--trait); border-radius: .5rem; padding: .55rem .7rem; width: 100%; resize: vertical; line-height: 1.5; }
textarea:focus, select:focus { border-color: var(--bleu); }
.tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .9rem; border-bottom: 1px solid var(--trait); }
.tab { padding: .5rem .85rem; color: var(--discret); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--encre); text-decoration: none; }
.tab.on { color: var(--bleu); border-bottom-color: var(--bleu); font-weight: 600; }
.tab-n { font-size: .78rem; background: var(--bleu-pale); color: var(--bleu); border-radius: 999px; padding: .02rem .45rem; margin-left: .2rem; font-variant-numeric: tabular-nums; }
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .9rem; }
.filters select { width: auto; min-width: 12rem; }
.tk-liste tr.nonlu td { background: color-mix(in srgb, var(--bleu-pale) 55%, transparent); }
.tk-liste tr.nonlu .tk-sujet { font-weight: 650; }
.tk-sujet { color: var(--encre); }
.pager { text-align: center; margin: .9rem 0 0; }
.tk-cols { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .tk-cols { grid-template-columns: minmax(0, 1fr); } .tk-side { order: -1; } }
.tk-fil { display: grid; gap: .8rem; }
.msg { background: var(--carte); border: 1px solid var(--trait); border-radius: .8rem; padding: .8rem 1rem .9rem; max-width: 100%; }
.msg header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; margin-bottom: .4rem; }
.msg-staff { background: var(--bleu-pale); border-color: transparent; }
.msg-note { background: var(--alerte-fond); border-color: transparent; }
.msg-corps { overflow-wrap: anywhere; }
.sys { text-align: center; color: var(--discret); font-size: .82rem; margin: .1rem 0; }
.pj { display: inline-block; margin: .5rem .8rem 0 0; font-size: .88rem; }
.tk-rep h2 { margin-bottom: .6rem; }
.rep-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .7rem 1rem; margin: .8rem 0 .4rem; align-items: end; }
.stack-form { display: grid; gap: .7rem; }
.tk-side { display: grid; gap: .9rem; }
.tk-side .card p { margin: .2rem 0; }
.tk-meta { margin-top: .9rem !important; line-height: 1.7; }
.form-large { display: grid; gap: .9rem; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .9rem; }
.check { flex-direction: row; align-items: center; gap: .5rem; color: var(--encre); font-size: .92rem; }
.check input { width: auto; }
.row-actions { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
abbr.info { cursor: help; text-decoration: none; color: var(--bleu); font-style: normal; }
.svc-edit { display: grid; gap: .8rem; margin-bottom: .6rem; }
.cat-titre { margin: .4rem 0; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.cat-edit { border-top: 1px solid var(--trait); padding: .45rem 0; }
.cat-edit summary { cursor: pointer; font-size: .92rem !important; color: var(--encre); }
.grid-cat { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .7rem; align-items: end; padding: .6rem 0 .3rem; }
.grid-cat .row-actions { grid-column: 1 / -1; }
.cat-new { display: flex; gap: .5rem; margin-top: .6rem; max-width: 22rem; }
.url { word-break: break-all; font-size: .82rem; background: var(--bleu-pale); padding: .3rem .5rem; border-radius: .4rem; display: inline-block; }

/* ---- aide publique ---- */
body.pub { background: var(--fond); }
.pub-head { max-width: 40rem; margin: 0 auto; padding: 1.4rem 1rem .4rem; padding-top: calc(1.4rem + env(safe-area-inset-top, 0px)); }
.pub-head img { height: 2.4rem; width: auto; display: block; }
.pub-main { max-width: 40rem; margin: 0 auto; padding: 1rem 1rem 3rem; display: grid; gap: 1rem; }
.pub-main > * { min-width: 0; }
.pub-choix { display: grid; gap: .8rem; }
.choix { color: var(--encre); display: block; }
.choix:hover { text-decoration: none; border-color: var(--bleu); }
.choix h2 { color: var(--bleu); font-size: 1.1rem; margin-bottom: .3rem; }
.choix p { margin: 0; }
.pub-foot { text-align: center; color: var(--discret); font-size: .82rem; padding: 0 1rem calc(2rem + env(safe-area-inset-bottom, 0px)); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pub-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pub-langues { display: flex; gap: .15rem; }
.pub-langues a { padding: .25rem .55rem; border-radius: .4rem; font-size: .82rem; font-weight: 600; color: var(--discret); }
.pub-langues a:hover { background: var(--bleu-pale); text-decoration: none; }
.pub-langues a.on { background: var(--bleu-pale); color: var(--bleu); }

.tk-liste .pill { white-space: nowrap; }
.filters .search { flex: 1 1 14rem; width: auto; max-width: 26rem; }

/* mot de passe oublié / changement */
.login-lien { margin: 1rem 0 0; font-size: .9rem; text-align: center; }
.login-lien a { color: var(--gris, inherit); }
.form-mdp { display: grid; gap: .9rem; max-width: 24rem; }
.form-mdp label { display: grid; gap: .3rem; }